/*
 * 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 ("Corporate Trust") was written for an enterprise SaaS
 * MARKETING page: a hero, six feature cards, a pricing grid, a closing band —
 * one idea per screen, generous air, every element a lifted card. 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 where every paragraph is a
 * floating white box with a coloured shadow, and the reader stops seeing any of
 * them.
 *
 * So the theme has TWO registers that share one DNA (cool grey ground, white
 * surfaces, coloured shadow, indigo→violet gradient, 12px radius, hover lift):
 *
 *   ELEVATED — hero, cta-banner, casino-cards, calculator, key-takeaways,
 *              page-summary, footer. Cards, shadows, the gradient, the whole
 *              micro-interaction set.
 *   READING  — content-section, tables, FAQ, callouts, sources, prose. Same
 *              DNA, ordinary measure, calm body, NO lift and NO shadow on
 *              anything that is just text. The radius, the indigo links and
 *              the soft rules keep it in the family.
 *
 * The contrast between the two is what makes the style land on a content site:
 * the elevated sections work BECAUSE the prose between them is not competing.
 * Do not "upgrade" the reading register into cards.
 * ────────────────────────────────────────────────────────────────────────────
 */

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

/*
 * ATMOSPHERE — the system's "soft blobs": large blurred gradient orbs that
 * give the flat grey ground some depth without ever becoming a pattern. This
 * is one of the five things the direction names as its Visual DNA, and it is
 * the only decorative layer in the theme.
 *
 * IMPLEMENTATION NOTE, and it is the whole reason this looks the way it does:
 * THE ORBS ARE RADIAL GRADIENTS, NOT BLURRED ELEMENTS. The system specifies
 * `blur-3xl filter` on 400–600px circles. A `filter: blur(64px)` on a
 * full-viewport fixed layer re-rasterises a very large surface on every scroll
 * frame, which this network has already measured as a jank source on mobile
 * Safari (CLAUDE.md §12, the grain layer note). A radial-gradient with a soft
 * colour stop is visually identical at these opacities, costs one paint, and
 * cannot be re-rasterised because nothing about it changes.
 *
 * They are `fixed` so they behave as atmosphere rather than as content that
 * scrolls past, and they carry no animation: the system's `animate-pulse` on
 * decorative elements is fine on a landing page and is exactly the sort of
 * ambient movement that has no place behind 3000 words of YMYL copy.
 */
#page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image:
		radial-gradient(42rem 32rem at 15% -8%, rgba(79, 70, 229, .10), transparent 65%),
		radial-gradient(38rem 30rem at 92% 6%, rgba(124, 58, 237, .09), transparent 62%),
		radial-gradient(34rem 28rem at 70% 96%, rgba(79, 70, 229, .06), transparent 60%);
	pointer-events: none;
	z-index: 0;
}

/*
 * Everything the reader touches sits above the atmosphere.
 *
 * THE `:where()` IS LOAD-BEARING — do not unwrap it. Written bare, `#page > *`
 * is (1,0,0), which BEATS every class rule it collides with, including the
 * ones that own an element's own stacking. It silently did two things:
 * `.x24dea3f4` (0,1,0) lost BOTH its `position: sticky` AND its `z-index: 100`
 * to this rule's `relative` / `1`, so the header was not sticky at all, and it
 * shared a stacking level with `#content` — which comes later in the document,
 * so the page painted over the header. The visible symptom was the nav
 * dropdown disappearing behind the hero: the submenu carries z-index 99999,
 * but it is trapped inside the header's own stacking context and a child can
 * never climb out of its parent's level.
 *
 * At (0,0,0) the intent survives — anything without a stacking opinion of its
 * own still lands on layer 1, above the fixed atmosphere on layer 0 — and
 * anything that DOES have one keeps it. Same lesson, and the same fix, as the
 * global link rules (CLAUDE.md §12, 2026-08-10): 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);
	/*
	 * NO FORCED FONT SMOOTHING, and that is a change from the last two
	 * markets. `-webkit-font-smoothing: antialiased` exists to stop light
	 * type on a dark ground from smearing a weight heavier than it is set;
	 * this page is DARK TYPE ON A LIGHT GROUND, where the same declaration
	 * thins every stroke and makes a 400-weight body look under-inked on a
	 * standard-density display. The browser default is correct here.
	 */
}

/*
 * HEADINGS. The system's weights: ExtraBold 800 for the hero headline, Bold
 * 700 for section headings, SemiBold 600 for card titles — and NOTHING IS
 * UPPERCASE, anywhere in this theme. Both sibling French/English markets set
 * their labels in tracked-out caps; here the reflex has to be removed on
 * sight. Sentence case at near-zero tracking is half of what makes this skin
 * read as approachable rather than shouty, and it is the fastest way to tell
 * the two French sites apart at a glance.
 *
 * Weight 800 is also the TOP of Plus Jakarta Sans' wght axis (200–800, read
 * from fvar). A rule asking for 900 silently renders 800.
 */
h1, h2, h3, h4, h5, h6 {
	color: var(--sn-heading);
	font-family: var(--sn-font-display);
	font-weight: 700;
	line-height: var(--sn-lh-heading);
	letter-spacing: var(--sn-tracking-display);
	clear: both;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/*
 * FLUID DISPLAY SIZES — ONE CONTINUOUS RAMP, no breakpoint step.
 *
 * The shape of the clamp matters as much as its ends, and this is a standing
 * bug in the family rather than a preference: an earlier market shipped a
 * mobile clamp plus a desktop clamp with a comment claiming they met at the
 * split, and measured in real Chrome they did not — the LCP heading was 72px
 * at 899px and 61.8px at 900px, i.e. it got SMALLER as the viewport got
 * WIDER. Two clamps that have to agree at a breakpoint are an invitation to
 * that and nothing in CSS enforces the agreement.
 *
 * The middle terms below are solved so the line passes through the intended
 * value at both ends: h1 is 32px at 375px and 61px at 1280px. 61px is the
 * system's own desktop ceiling (text-6xl) — this register is enterprise SaaS,
 * not the previous market's poster scale, so the ceiling is deliberately 35px
 * lower than the skin it replaces.
 *
 * 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.
 */
h1 {
	font-size: clamp(2rem, 1.249rem + 3.2vw, var(--sn-fs-4xl));
	line-height: var(--sn-lh-display);
	letter-spacing: var(--sn-tracking-tighter);
	font-weight: 800;
}

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

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

h4, h5, h6 {
	font-size: var(--sn-fs-lead);
	font-weight: 600;
}

/*
 * EXPRESSIVE TYPE. Opt-in, for the hero headline and section breaks only —
 * kept off the document's ordinary headings so an article does not turn into
 * a landing page.
 */
.x97b8d1d9 {
	font-family: var(--sn-font-display);
	font-size: clamp(2.25rem, 1.35rem + 3.85vw, var(--sn-fs-4xl));
	font-weight: 800;
	line-height: var(--sn-lh-display);
	letter-spacing: var(--sn-tracking-tighter);
	text-wrap: balance;
}

/*
 * GRADIENT TEXT — the system's signature move: "first words in standard
 * colour, remaining words in gradient". It is a utility rather than a rule on
 * any heading, because it must be applied to a SPAN inside a headline and
 * never to the headline itself.
 *
 * ACCESSIBILITY, and this is why the fallback line is not optional:
 * background-clip:text with a transparent fill leaves NO computed text colour
 * at all, so in forced-colors mode (Windows high contrast) or if the paint
 * fails, the text is invisible. `color` is set to the primary first and the
 * clip is applied on top, and the whole effect is switched off under
 * forced-colors.
 */
.x36d2dca2 {
	color: var(--sn-primary);
	background-image: var(--sn-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	/* A descender clipped by the text box is the classic artefact here. */
	padding-bottom: .08em;
}

@media (forced-colors: active) {
	.x36d2dca2 {
		-webkit-text-fill-color: currentColor;
		background-image: none;
	}
}

/*
 * Large numerals as graphic shapes (step numbers, calculator figures, the 404).
 * Tabular figures so a column of numbers lines up and a recalculating figure
 * does not jiggle — see the tnum note in tokens.css, which is why this theme
 * ships no monospaced face.
 *
 * 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 indices or as the
 * calculator's own outputs — never an invented currency amount or multiplier.
 */
.xa453d725 {
	font-family: var(--sn-font-display);
	font-size: clamp(3rem, 1.8rem + 5.2vw, var(--sn-fs-5xl));
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--sn-tracking-tighter);
	font-variant-numeric: tabular-nums;
	color: var(--sn-heading);
}

/*
 * SECTION MARKER — a gradient orb with a soft glow, beside 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, ENG2 a mono section index. Here
 * it is a small GRADIENT ORB, which no sibling has and which is the most
 * direct expression of this system's DNA — the same indigo→violet sweep as
 * the primary button, the same glow as its numbered badges, at 10px.
 *
 * NO NUMBERING, deliberately. The previous market's marker was an automatic
 * counter, and that forced sn/toc to stop numbering its own items: the CSS
 * counter counts every h2 on the page while the ToC lists only the h2s that
 * carry an id, so a heading typed into a WYSIWYG desynchronised the two
 * permanently. A mark that does not count cannot drift.
 *
 * Do NOT add per-block heading markers on top of this.
 */
.site-main h2 {
	position: relative;
	padding-left: calc(10px + var(--sn-sp-4));
}

.site-main h2::before {
	content: '';
	position: absolute;
	left: 0;
	/* Optical centre of the first line, at the h2's own line-height. */
	top: calc(.55em * var(--sn-lh-heading));
	width: 10px;
	height: 10px;
	border-radius: var(--sn-radius-pill);
	background: var(--sn-gradient);
	box-shadow: var(--sn-glow);
}

/* The glow is the one place a decorative shadow could look like a smudge at
   small sizes on a low-density screen; the orb keeps its shape either way. */
@media (max-width: 767px) {
	.site-main h2 {
		padding-left: calc(10px + var(--sn-sp-3));
	}
}

/*
 * Eyebrow label above section headings — the system's BADGE: a pill with a
 * soft indigo fill and indigo ink, sentence case. The sibling skins made this
 * a tracked-out uppercase micro-label with a rule; a pill badge is the
 * enterprise-SaaS idiom and it is the same object as the "NEW" chip in the
 * direction. Michael drops it into a WYSIWYG as
 * <p class="x408c8236">…</p> before a heading.
 */
.x408c8236 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	margin: 0 0 var(--sn-sp-4);
	padding: var(--sn-sp-1) var(--sn-sp-3);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-surface-tint);
	color: var(--sn-primary-hover);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: var(--sn-tracking-label);
	line-height: var(--sn-lh-compact);
}

/* The small leading dot inside the badge — the orb again, at 6px. */
.x408c8236::before {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: var(--sn-radius-pill);
	background: var(--sn-gradient);
}

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

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

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

.x408c8236 + 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. */
.x3cac887b {
	font-size: var(--sn-fs-lead);
	line-height: 1.55;
	color: var(--sn-text-muted);
	font-weight: 400;
}

/*
 * THE GLOBAL LINK RULES ARE ZERO-SPECIFICITY, VIA :where(). This is not a
 * style choice, it is what stops them repainting things that are not prose.
 *
 * Written as bare `a:hover` these rules are (0,1,1), which BEATS any
 * single-class button rule (0,1,0). Our own .x491557a5 escapes only because
 * `.x491557a5: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 DEEPEN HERE, and this is the fourth time this network has flipped the
 * rule. Both sibling branches are DARK skins where a hover had to brighten to
 * separate itself from the ground; on a light page a lighter link fades into
 * the paper instead. Indigo has a full ladder underneath it (6.29 → 7.90 →
 * 9.93 on white), so both hover and press deepen honestly. Treat every hover
 * value inherited from fr-asset or eng-asset2 as wrong until re-measured.
 */
:where(a:hover, a:focus) {
	color: var(--sn-primary-hover);
	text-decoration: underline;
}

/*
 * PROSE LINKS ARE UNDERLINED. Colour alone is not a distinction — indigo
 * measures 6.01:1 on the page against body text's 17.06: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.
 *
 * The underline is thinner and further from the baseline than the previous
 * skin's 2px rule: in this system the underline is a courtesy, not the
 * primary affordance, and a heavy one under 18px body type reads as a
 * strikethrough on a light ground.
 *
 * :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 `.x491557a5` (0,1,0) and underlined every button in a paragraph.
 */
:where(.site-main, .xcb180cad) :where(p, li, td, th, dd, blockquote) a {
	text-decoration: underline;
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}

:where(.site-main, .xcb180cad) :where(p, li, td, th, dd, blockquote) :where(.x491557a5, .x4962832e, .x23048a14, .x5bb962d8) {
	text-decoration: none;
}

/*
 * Global keyboard focus ring — the system's `focus-visible:ring-2
 * ring-indigo-500 ring-offset-2`, which is an outline plus an offset in
 * plain CSS. Indigo 500 measures 4.47:1 on white, comfortably over the 3:1
 * that 1.4.11 asks of a focus indicator. :focus-visible keeps it off mouse
 * clicks.
 *
 * KEPT DESPITE THE DESIGN SYSTEM ALSO 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. The border still turns
 * indigo as specified; this is in addition, and only for keyboards.
 */
:focus-visible {
	outline: var(--sn-border-thick) solid #6366F1;
	outline-offset: 2px;
}

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

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

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

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

/* Selection: the primary with its own white ink (6.29:1). Measured, not
   copied — the first dark skin in this network shipped an equivalent rule at
   1.35:1 and selected text was unreadable. */
::selection {
	background: var(--sn-primary);
	color: var(--sn-primary-dark);
}

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

.x9f4ab96b {
	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. */
.x28effcf6 {
	max-width: min(var(--sn-container-wide), 1600px);
}

.xcb180cad {
	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 px-4 sm:px-6 growing to
 * 24 / 48 / 64.
 *
 * This is the standing lesson of 2026-08-19 and it costs a column when it is
 * forgotten: the system's ramp is written for a marketing page where the
 * container holds one idea. Here it holds the casino grid, and generous
 * gutters at 1024px+ drop that grid from four columns to three. Usable width
 * at a 1280 viewport is 1232px; four 280px tracks with a 24px gap need 1192px.
 * Change either number and re-run tools/fold-measure/run.sh AND look at the
 * list at 1280 and 1440.
 */
@media (min-width: 768px) {
	.x9f4ab96b,
	.xcb180cad {
		padding-left: var(--sn-sp-6);
		padding-right: var(--sn-sp-6);
	}
}

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

/*
 * Four variants, all four from the design system, defined ONCE here.
 *
 *   .x491557a5         PRIMARY. The indigo→violet gradient, white ink, pill,
 *                   coloured shadow, and the system's -translate-y-0.5 lift on
 *                   hover. Every affiliate CTA on the site is this object.
 *   .x4962832e  The system's secondary: white fill, 1px edge, dark ink.
 *   .x23048a14  The quiet filled variant, on the soft indigo tint.
 *   .x5bb962d8   The in-prose text action, with the arrow-nudge
 *                   micro-interaction.
 *
 * INK NEVER GOES THROUGH `color`, ALWAYS THROUGH --sn-btn-ink. This bug
 * shipped twice: base.css forced `.x491557a5: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 WHITE AGAIN ON THIS SKIN, after a market where it was
 * near-black. That is exactly why it routes through a token: a button copied
 * across from eng-asset2 arrives with black ink on an indigo gradient (2.84:1)
 * and looks deliberate.
 *
 * THE GRADIENT'S CONTRAST IS ITS WORST STOP. White is 6.29 on the indigo end
 * and 5.70 on the violet end; 5.70 is the number that governs, and it clears
 * AA. Any restop must be measured at its lightest point.
 */
.x491557a5 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-3) var(--sn-sp-6);
	border: var(--sn-border-w) solid transparent;
	border-radius: var(--sn-radius-pill);
	background-image: var(--sn-gradient);
	background-color: var(--sn-primary); /* fallback under the gradient */
	color: var(--sn-btn-ink, #FFFFFF);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-base);
	font-weight: 600;
	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: var(--sn-shadow-btn);
	transition: transform var(--sn-motion) var(--sn-ease),
	            box-shadow var(--sn-motion) var(--sn-ease),
	            background-color var(--sn-motion) var(--sn-ease),
	            border-color var(--sn-motion) var(--sn-ease),
	            color var(--sn-motion) var(--sn-ease);
}

/*
 * HOVER IS A LIFT, NOT A REPAINT — the system's own primary-button behaviour
 * (-translate-y-0.5 plus a stronger shadow). The gradient itself does not
 * change, which is deliberate: a gradient that shifts on hover reads as a
 * loading state, and the label's 5.70 worst-stop contrast is guaranteed only
 * for the stops we measured.
 */
.x491557a5:hover,
.x491557a5:focus {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px 0 rgba(79, 70, 229, .38);
	color: var(--sn-btn-ink, #FFFFFF);
	text-decoration: none;
}

/* Press releases the lift and pulls the shadow in — the button settles onto
   the page. Chromatically it is free, which matters because darkening a
   gradient is not a thing that can be done in one property. */
.x491557a5:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px 0 rgba(79, 70, 229, .30);
}

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

/*
 * SECONDARY — the system's white button. Its edge is --sn-border-strong, NOT
 * the Slate 200 the direction specifies: the fill is white on a #F8FAFC page
 * (1.05:1), so the border is the ONLY thing that says "control", and at
 * 1.23:1 Slate 200 cannot do that job. See note 2 in tokens.css.
 */
.x4962832e {
	background-image: none;
	background-color: var(--sn-surface);
	border-color: var(--sn-border-strong);
	box-shadow: var(--sn-shadow);
	--sn-btn-ink: var(--sn-heading);
}

.x4962832e:hover,
.x4962832e:focus {
	background-color: var(--sn-surface-2);
	border-color: var(--sn-heading);
	box-shadow: var(--sn-shadow-md);
	--sn-btn-ink: var(--sn-heading);
}

/* TONAL — the quiet filled variant on the soft indigo tint, for secondary
   actions inside an already-elevated card where a second shadow would be
   noise. */
.x23048a14 {
	background-image: none;
	background-color: var(--sn-surface-tint);
	border-color: transparent;
	box-shadow: none;
	--sn-btn-ink: var(--sn-primary-hover);
}

.x23048a14:hover,
.x23048a14:focus {
	background-color: #E0E7FF;
	border-color: transparent;
	box-shadow: none;
	--sn-btn-ink: var(--sn-primary-press);
}

/*
 * TEXT — the in-prose action. No container, indigo label, and the system's
 * arrow nudge: the ::after chevron slides 4px right on hover
 * (`group-hover:translate-x-1`). This is the one place the direction's
 * directional micro-interaction is defined; blocks reuse the class rather
 * than rebuilding it.
 */
.x5bb962d8 {
	background-image: none;
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
	min-height: 44px;
	--sn-btn-ink: var(--sn-primary);
}

.x5bb962d8::after {
	content: '';
	width: 6px;
	height: 6px;
	border: solid currentColor;
	border-width: var(--sn-border-thick) var(--sn-border-thick) 0 0;
	transform: rotate(45deg);
	transition: transform var(--sn-motion) var(--sn-ease);
}

.x5bb962d8:hover,
.x5bb962d8:focus {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	transform: none;
	text-decoration: underline;
	text-underline-offset: .3em;
	text-decoration-thickness: 1px;
	--sn-btn-ink: var(--sn-primary-hover);
}

.x5bb962d8:hover::after,
.x5bb962d8:focus::after {
	transform: rotate(45deg) translate(3px, -3px);
}

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

	.x5bb962d8::after,
	.x5bb962d8:hover::after,
	.x5bb962d8:focus::after {
		transform: rotate(45deg);
		transition: none;
	}
}

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

/*
 * The system's spec: white fill, rounded-lg, 16px text so iOS does not zoom on
 * focus, h-12 rising to h-14, and the border turns indigo on focus with a
 * ring.
 *
 * The resting edge is --sn-border-strong, not the specified Slate 200. An
 * input outlined at 1.23:1 on a white card is not an input, it is a rectangle
 * of slightly different white — see note 2 in tokens.css.
 */
.x05de7f19,
.xcb180cad input[type='text'],
.xcb180cad input[type='email'],
.xcb180cad input[type='search'],
.xcb180cad input[type='number'],
.xcb180cad textarea,
.search-form input[type='search'] {
	width: 100%;
	min-height: 48px;
	padding: var(--sn-sp-3) var(--sn-sp-4);
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: var(--sn-radius-input);
	color: var(--sn-text);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-base);
	transition: border-color var(--sn-motion-fast) var(--sn-ease),
	            box-shadow var(--sn-motion-fast) var(--sn-ease);
}

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

.x05de7f19:focus,
.xcb180cad input:focus,
.xcb180cad textarea:focus,
.search-form input[type='search']:focus {
	border-color: var(--sn-primary);
	box-shadow: 0 0 0 3px var(--sn-primary-tint);
}

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

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

/*
 * THE CARD BEHAVIOUR, and it is the exact inverse of the last two markets.
 * Both of those said "border colour lightens, background changes, no lift, no
 * shadow, no scale" — a dark-skin rule, where a lifted card has nothing to
 * cast a shadow onto. Here the lift IS the system: "on hover, slight lift and
 * increased shadow intensity", -translate-y-1 with the two-layer shadow.
 * Without it a white card on a #F8FAFC ground (1.05:1) has no edge at all.
 *
 * INK ROUTES THROUGH CUSTOM PROPERTIES, not through a descendant `*` rule. The
 * obvious implementation (`.x32344e74: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
 * and position, never visibility (CLAUDE.md §7, §12 2026-07-14).
 */
.x32344e74 {
	--sn-ink: var(--sn-heading);
	--sn-ink-muted: var(--sn-text-muted);
	--sn-ink-rule: var(--sn-border);
	box-shadow: var(--sn-shadow);
	transition: transform var(--sn-motion) var(--sn-ease),
	            box-shadow var(--sn-motion) var(--sn-ease),
	            border-color var(--sn-motion) var(--sn-ease);
}

.x32344e74:hover,
.x32344e74:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--sn-shadow-md);
	border-color: #C7D2FE;
	--sn-ink-rule: #C7D2FE;
	/* Ink is unchanged and that is correct: the foreground reads 17.85:1 on
	   the card. Measured, not assumed. */
}

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

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

/* The system's vertical rhythm: py-16 / sm:py-20 / lg:py-24 — 64 / 80 / 96px.
   Note this is roughly HALF the previous market's poster rhythm; generous, not
   cinematic. */
.x26b3c94c {
	padding-top: var(--sn-sp-16);
	padding-bottom: var(--sn-sp-16);
}

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

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

/* Full-width rule between major sections. A hairline in this system — the
   heavy structural rules belonged to the skin that had no shadows. */
.xda11b04b {
	border: 0;
	border-top: var(--sn-border-w) solid var(--sn-border);
	margin: var(--sn-sp-12) 0;
}

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

.xc56a2a00 {
	display: block;
	border-radius: var(--sn-radius);
	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 (`group-hover:scale-105`, the
 * blog-card zoom). Blocks opt in by wrapping the image in .xbf8bd847 — the
 * frame clips, the image moves.
 */
.xbf8bd847 {
	overflow: hidden;
	display: block;
	border-radius: var(--sn-radius);
}

.xbf8bd847 .xc56a2a00 {
	border-radius: 0; /* the frame owns the corner */
	transition: transform var(--sn-motion-slow) var(--sn-ease);
}

.xbf8bd847:hover .xc56a2a00,
.xbf8bd847:focus-within .xc56a2a00 {
	transform: scale(1.05);
}

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

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

/*
 * Tables are CARDS on this skin: white fill, 12px radius, hairline edge, the
 * resting coloured shadow, and a toned header band. That is the inverse of
 * the last market, where they were ruled and transparent — and it follows
 * from the ground: a transparent table on #F8FAFC has no edge and its header
 * band would be the only painted thing in it.
 *
 * 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 band is
 * --sn-surface-2, so the corner is --sn-surface-2.
 */
.x565e1ac3 {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
}

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

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

/* The header band. Sentence case, semibold, muted — the system's label
   treatment, which is emphatically NOT uppercase. */
.x73fc73dd thead th {
	background: var(--sn-surface-2);
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: var(--sn-tracking-label);
	white-space: nowrap;
	border-bottom: var(--sn-border-w) solid var(--sn-border);
}

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

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

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

/* Row hover is a soft indigo wash — the state layer, not a grey. */
.x73fc73dd 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. */
.xd3788d72 tr:first-child th {
	background: var(--sn-surface-2);
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: var(--sn-tracking-label);
	white-space: nowrap;
	border-bottom: var(--sn-border-w) solid var(--sn-border);
}

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

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

/*
 * The system's card, verbatim: white background, rounded-xl, a hairline
 * border, and the soft coloured shadow. This is the single most-reused object
 * in the theme, and the shadow is what makes it a card at all — the fill is
 * 1.05:1 from the page.
 */
.x27ae11a9 {
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: var(--sn-radius);
	padding: var(--sn-sp-6);
	box-shadow: var(--sn-shadow);
}

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

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

/*
 * A WHITE BAR over the grey ground, held down by the resting shadow rather
 * than by a heavy rule. No backdrop blur: the atmosphere layer behind it is
 * fixed and extremely low-contrast, so a translucent header would buy nothing
 * a solid one does not already have, and backdrop-filter on a sticky element
 * is the most expensive thing that can be put in a scroll path.
 */
.x24dea3f4 {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sn-purple);
	border-bottom: var(--sn-border-w) solid var(--sn-border);
	box-shadow: 0 1px 3px 0 rgba(79, 70, 229, .06);
}

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

/* The 18+ compliance strip. Static, never animated, never collapsed. On the
   tinted band rather than white so it reads as a separate register from the
   navigation — it is information, not chrome. */
.xa1810d4f {
	background: var(--sn-surface-2);
	border-bottom: var(--sn-border-w) solid var(--sn-border);
	font-size: var(--sn-fs-xs);
	color: var(--sn-text-muted);
}

.xbc63eb1e {
	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 filled pill in the heading colour. 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, which is why it
 * is the one badge in the theme that does not use a soft tint.
 */
.x4fbd18a5 {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--sn-sp-2);
	border: var(--sn-border-w) solid var(--sn-heading);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-heading);
	color: var(--sn-surface);
	font-weight: 700;
	letter-spacing: var(--sn-tracking-wide);
}

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

.xbce1c5ee {
	flex: 0 0 auto;
}

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

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

/* The wordmark's one flourish: a gradient full stop. A dot is punctuation
   rather than ornament, and it is the cheapest possible place to put the
   signature sweep. */
.xe960a114 a::after {
	content: '.';
	background-image: var(--sn-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--sn-primary);
}

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

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

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

.x506b4ac6 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: var(--sn-sp-2);
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: var(--sn-radius-input);
	color: var(--sn-heading);
	cursor: pointer;
	transition: border-color var(--sn-motion-fast) var(--sn-ease),
	            color var(--sn-motion-fast) var(--sn-ease),
	            background var(--sn-motion-fast) var(--sn-ease);
}

.x506b4ac6:hover,
.x506b4ac6:focus {
	background: var(--sn-surface-tint);
	border-color: var(--sn-primary);
	color: var(--sn-primary);
}

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

/* Mobile: dropdown panel (covers both wp_nav_menu ul and wp_page_menu div>ul).
   A white card with the resting shadow — the same object as every other
   surface in the theme. */
.x2573c6cd > ul,
.x2573c6cd > 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);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow-md);
}

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

/*
 * Nav items are MEDIUM-WEIGHT SENTENCE-CASE LABELS that fill with a soft
 * indigo pill on hover — the enterprise-SaaS navigation idiom, and a
 * deliberate inversion of both siblings, which underline. Nothing here is
 * uppercase and nothing is tracked out.
 */
.x2573c6cd li a {
	position: relative;
	display: block;
	padding: var(--sn-sp-3);
	border-radius: var(--sn-radius-input);
	color: var(--sn-text-muted);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-base);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--sn-motion-fast) var(--sn-ease),
	            background var(--sn-motion-fast) var(--sn-ease);
}

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

/* The current item keeps the pill permanently. */
.x2573c6cd li.current-menu-item > a,
.x2573c6cd li.current_page_item > a {
	background: var(--sn-surface-tint);
	color: var(--sn-primary-hover);
	font-weight: 600;
}

/* Chevron on parent items (rotates up when open via .focus — navigation.js). */
.x2573c6cd li.menu-item-has-children > a::before,
.x2573c6cd 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);
}

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

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

@media (prefers-reduced-motion: reduce) {
	.x2573c6cd li.menu-item-has-children > a::before,
	.x2573c6cd li.page_item_has_children > a::before {
		transition: none;
	}
}

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

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

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

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

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

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

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

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

	/* Desktop dropdown: a white card under the parent item. Opens on hover,
	   keyboard focus, or click (.focus via nav.js). */
	.x2573c6cd 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);
		border-radius: var(--sn-radius);
		box-shadow: var(--sn-shadow-md);
	}

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

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

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

	/* Chevron opens on hover too. */
	.x2573c6cd li.menu-item-has-children:hover > a::before,
	.x2573c6cd 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 DARK CLOSING BAND. The direction's "Final CTA Background:
 * from-indigo-900 to-indigo-950 for dramatic dark section" is spent HERE
 * rather than on a promotional block, and that is a compliance decision as
 * much as a design one: the most dramatic surface on the page carries the 18+
 * badge, the statutory warning and the help links, instead of carrying a
 * bonus offer. White on #1E1B4B is 15.99:1 and the muted ink (indigo-200) is
 * 10.72 — the strip is the most legible thing on the site, which is the
 * intent.
 *
 * The top corners are rounded (24px) so the band reads as a shape that closes
 * the page. DELIBERATELY NOT the accent gradient: an indigo→violet flood
 * behind compliance text 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.
 */
.x2398e9a6 {
	margin-top: var(--sn-sp-24);
	background-image: var(--sn-gradient-dark);
	background-color: var(--sn-purple-deep);
	color: var(--sn-on-chrome-muted);
	font-size: var(--sn-fs-base);
	border-radius: var(--sn-radius-xl) var(--sn-radius-xl) 0 0;
}

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

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

/* On the dark band the gradient dot would disappear into the ground at its
   indigo end, so the wordmark's full stop is the violet stop only — 5.87:1
   on #1E1B4B, and it is punctuation, not information. */
.x7f22f914::after {
	content: '.';
	color: #A78BFA;
}

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

.xab7b2435 {
	margin: 0 0 var(--sn-sp-4);
	color: var(--sn-on-chrome);
	font-weight: 700;
	font-size: var(--sn-fs-base);
	letter-spacing: var(--sn-tracking-label);
}

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

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

.xdcaa82f0 a:hover,
.xdcaa82f0 a:focus {
	color: var(--sn-on-chrome);
	text-decoration: underline;
	text-underline-offset: 4px;
}

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

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

.x1ce66ac9 p {
	margin: 0;
	color: var(--sn-on-chrome);
}

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

/*
 * Outlined chips — deliberately NOT the gradient block: compliance links are
 * informational, not the action (CLAUDE.md §7). The edge is white at 40%,
 * which over #1E1B4B resolves to #787693 and measures 3.66:1 against the
 * band — a real control edge, where the 14% rule used on the dividers above
 * would be 1.53:1 and could not carry one.
 *
 * AND THEY ARE NOT UPPERCASE, which on this skin is not even a deviation:
 * nothing here is. "Joueurs Info Service" is far easier to recognise as
 * written than in caps, and this strip is the part of the page where
 * recognition beats styling.
 */
.x2ed29608 a {
	display: inline-block;
	padding: var(--sn-sp-2) var(--sn-sp-4);
	border: var(--sn-border-w) solid rgba(255, 255, 255, .40);
	border-radius: var(--sn-radius-pill);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--sn-motion-fast) var(--sn-ease),
	            background var(--sn-motion-fast) var(--sn-ease);
}

.x2ed29608 a:hover,
.x2ed29608 a:focus {
	background: rgba(255, 255, 255, .12);
	border-color: var(--sn-on-chrome);
	color: var(--sn-on-chrome);
	text-decoration: none;
}

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

.xa47e642b,
.x0b59a08f {
	margin: 0;
}

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

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

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

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

/* ---------- Scroll reveal ---------- */
/*
 * COMPLIANCE BY CONSTRUCTION: the hidden state exists ONLY under .xa544a545,
 * 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. 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.
 */

.xa544a545 .x2bd08d34 {
	opacity: 0;
	transform: translateY(20px);
}

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

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

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

/*
 * The label. The system's is `text-sm font-semibold text-slate-700` — small,
 * heavy, SENTENCE CASE. On both sibling markets this was the theme's
 * tracked-out uppercase micro-type; here uppercase is banned outright, and
 * removing it from every block that inherited it was the largest mechanical
 * part of this reskin. If a label in a block is still in caps, it was missed.
 */
.xdf7b1c77 {
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-text-muted);
}

/* Kept for blocks that reference it. It no longer widens anything — see the
   tracking tokens. */
.x036e6d36 {
	letter-spacing: var(--sn-tracking-widest);
}

/* Chip — the system's badge: a soft-tinted pill with brand ink. In this
   system a chip IS a capsule, which is the opposite of the last market. */
.x5f4b1cec {
	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 transparent;
	border-radius: var(--sn-radius-pill);
	background: var(--sn-surface-tint);
	color: var(--sn-primary-hover);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	line-height: var(--sn-lh-compact);
}

/* The one gradient chip: reserved for a single mark per screen (the featured
   casino, the "best value" column). White ink, 5.70 at the worst stop. */
.x9b2754aa {
	background-image: var(--sn-gradient);
	background-color: var(--sn-primary);
	border-color: transparent;
	color: var(--sn-primary-dark);
	box-shadow: var(--sn-shadow-btn);
}

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