/*
 * 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).
 */

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

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

/* Anchor targets land BELOW the sticky header instead of underneath it
   (header is ~92px: topbar + nav row), with a little 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);
	-webkit-font-smoothing: antialiased;
}

/* ---------- Type roles ---------- */
/* Three roles, never mixed. Anything not listed here is monospace body. */

h1, h2, h3, h4, h5, h6 {
	color: var(--sn-heading);
	line-height: var(--sn-lh-heading);
	font-family: var(--sn-font-display);
	font-weight: 600;
	letter-spacing: 0;
	clear: both;
}

/* ROLE 1 — display. Orange, UPPERCASE, thick ink outline, hard ink shadow.
   paint-order puts the stroke BEHIND the fill; without it -webkit-text-stroke
   is drawn centred on the outline and eats a third of every letterform.
   The extra one-pixel shadows are the fallback shape for engines that ignore
   text-stroke, and are invisible where it works. */
.x6c14aced {
	color: var(--sn-primary);
	font-family: var(--sn-font-display);
	font-weight: 600;
	text-transform: uppercase;
	line-height: .98;
	letter-spacing: .005em;
	-webkit-text-stroke: var(--sn-stroke-w) var(--sn-heading);
	paint-order: stroke fill;
	text-shadow:
		var(--sn-stroke-off) var(--sn-stroke-off) 0 var(--sn-heading),
		-1px -1px 0 var(--sn-heading),
		 1px -1px 0 var(--sn-heading),
		-1px  1px 0 var(--sn-heading);
}

/* On ink the stroke is unreadable — white fill, no outline, no shadow. */
.xc77ad06f,
.xd17ce033 .x6c14aced {
	color: var(--sn-on-chrome);
	-webkit-text-stroke: 0;
	text-shadow: none;
}

h1,
h2 {
	/* Every h1/h2 in the theme is a display heading. Blocks do not opt in. */
	color: var(--sn-primary);
	text-transform: uppercase;
	line-height: .98;
	-webkit-text-stroke: var(--sn-stroke-w) var(--sn-heading);
	paint-order: stroke fill;
	text-shadow:
		var(--sn-stroke-off) var(--sn-stroke-off) 0 var(--sn-heading),
		-1px -1px 0 var(--sn-heading),
		 1px -1px 0 var(--sn-heading),
		-1px  1px 0 var(--sn-heading);
}

h1 {
	font-size: clamp(2.25rem, 7vw, 4rem);
}

h2 {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
}

/* ROLE 2 — sub-headings. Fredoka, NO stroke, ink, title case. */
h3, h4, h5, h6 {
	color: var(--sn-heading);
	font-weight: 600;
	text-transform: none;
	line-height: 1.2;
}

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

/* The old square section marker is gone: a stroked orange heading needs no
   help announcing a section, and the marker collided with the outline. */

/* Section label pill — the small dark capsule that sits above a section
   ("SÅ TESTAR VI"). Michael drops it in a WYSIWYG as
   <p class="xbebca284">…</p> directly before a heading. */
.xbebca284 {
	display: inline-block;
	margin: 0 0 var(--sn-sp-3);
	padding: var(--sn-sp-1) var(--sn-sp-4);
	background: var(--sn-heading);
	border-radius: var(--sn-radius-pill);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font);
	font-size: .75rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1.6;
}

/* On a dark panel the pill inverts so it stays visible. */
.xd17ce033 .xbebca284 {
	background: var(--sn-on-chrome);
	color: var(--sn-heading);
}

.xbebca284 + h2,
.xbebca284 + h3 {
	margin-top: 0;
}

/* Opening paragraph of a section. Still monospace — the role rule holds —
   just larger and darker, so a long guide has somewhere to breathe. */
.x09ac0860 {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--sn-heading);
}

/* Dashed-box highlight for a key term inside running text. Michael writes
   <span class="xa8cd5439">30x omsättning</span>. */
.xa8cd5439 {
	padding: 2px 6px;
	border: 1.5px dashed var(--sn-primary);
	border-radius: 4px;
	color: var(--sn-heading);
	font-weight: 700;
	white-space: nowrap;
}

a {
	color: var(--sn-accent);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--sn-primary-hover);
	text-decoration: underline;
}

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

/* Links in RUNNING TEXT are underlined, not merely tinted — colour alone is
   not an accessible distinction (WCAG 1.4.1). Component links opt out below;
   chips, cards, menus and the ToC carry their own affordance.
   :where() zeroes this rule's specificity on purpose, so ANY component rule
   (.x29b6595a, .xdfa7b149 a, …) outranks it without a specificity arms race — an
   earlier version of it underlined every button. */
:where(.site-main p, .site-main li, .site-main td, .site-main th) a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--sn-accent) 45%, transparent);
	transition: color .15s ease, text-decoration-color .15s ease;
}

:where(.site-main p, .site-main li) a:hover,
:where(.site-main p, .site-main li) a:focus {
	text-decoration-color: currentColor;
}

.xdfa7b149 a,
.x426e9663 a,
.x3f5e16c7 a,
.x86381d9f a,
.x8f2fbec6 a,
.x16375eb0 a,
.x712bfa53 a,
.x29b6595a {
	text-decoration: none;
}

/* Keyboard focus: one visible ring everywhere instead of the browser default
   (which several components had suppressed). Ink, because the orange ring
   disappears on an orange button. */
:focus-visible {
	outline: 2px solid var(--sn-heading);
	outline-offset: 3px;
}

/* Native controls inherit the brand. */
input,
select,
textarea {
	accent-color: var(--sn-primary);
	caret-color: var(--sn-primary);
	font-family: var(--sn-font);
}

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 {
	background: var(--sn-gold);
	color: var(--sn-heading);
}

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

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

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

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

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

/* An orange pill with an ink rule and a solid ink offset. Hover pushes the
   button INTO its own shadow (translate + shorter offset) — the only motion
   this skin allows, and the reason no blurred shadow exists anywhere.
   FONT SIZE IS LOAD-BEARING: white on #F0603A is 3.26:1, which is AA for
   large text only, so the label is Fredoka 700 at 19px and must not shrink.
   A smaller label on an orange fill has to switch to ink. */
.x29b6595a {
	display: inline-block;
	padding: var(--sn-sp-3) var(--sn-sp-8);
	border: var(--sn-rule) solid var(--sn-heading);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-primary);
	/* Ink goes through a custom property so EVERY state reads one value.
	   A context that recolours the button sets --sn-btn-ink, never `color` —
	   otherwise :visited below repaints it and the label vanishes once the
	   visitor comes back. */
	color: var(--sn-btn-ink, var(--sn-primary-dark));
	box-shadow: var(--sn-shadow);
	font-family: var(--sn-font-display);
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.x29b6595a:hover,
.x29b6595a:focus {
	background: var(--sn-primary-hover);
	color: var(--sn-btn-ink, var(--sn-primary-dark));
	transform: translate(2px, 2px);
	box-shadow: var(--sn-shadow-sm);
	text-decoration: none;
}

.x29b6595a:active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--sn-heading);
}

.x29b6595a:visited {
	color: var(--sn-btn-ink, var(--sn-primary-dark));
}

/* Secondary action: the same pill, cream fill, ink label. Only conversion
   buttons are orange, so an in-content link-out never competes with the
   money CTA. Ink on cream is 15:1, so this one may run smaller. */
.x84354185 {
	--sn-btn-ink: var(--sn-heading);
	background: var(--sn-surface);
	font-size: var(--sn-fs-md);
	font-family: var(--sn-font);
	font-weight: 700;
}

.x84354185:hover,
.x84354185:focus {
	--sn-btn-ink: var(--sn-heading);
	background: var(--sn-gold);
}

@media (prefers-reduced-motion: reduce) {
	.x29b6595a,
	.x29b6595a:hover,
	.x29b6595a:focus,
	.x29b6595a:active {
		transform: none;
		transition: none;
		box-shadow: var(--sn-shadow);
	}
}

/* ---------- Checklist marker ---------- */
/* The yellow tick used by every list that means "included": hero facts,
   key-takeaways, page-summary, pros, casino benefits. Blocks apply
   .xd781bb61 to the marker element (an <svg> or a <span>). */

.xd781bb61 {
	box-sizing: border-box;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: .12em;
	padding: 3px;
	background: var(--sn-gold);
	border: var(--sn-rule) solid var(--sn-heading);
	border-radius: 50%;
	color: var(--sn-heading);
	stroke-width: 3.5;
}

.xd17ce033 .xd781bb61 {
	border-color: var(--sn-gold);
}

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

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

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

/* A framed white card with the scroller inside it. */
.x89384e0a {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--sn-surface);
	border: var(--sn-rule) solid var(--sn-heading);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
}

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

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

/* Header row is an ink band with an acid-yellow label — the dark-UI-card
   language from the feature mockups, reused at table scale. */
.xed5b9406 thead th {
	background: var(--sn-purple-deep);
	color: var(--sn-gold);
	font-family: var(--sn-font);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	white-space: nowrap;
}

.xed5b9406 tbody tr {
	background: transparent;
	transition: background .15s ease;
}

.xed5b9406 tbody td,
.xed5b9406 tbody th {
	border-bottom: 1px solid color-mix(in srgb, var(--sn-heading) 15%, transparent);
}

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

.xed5b9406 tbody tr:hover {
	background: var(--sn-surface-2);
}

/* WYSIWYG tables (auto-wrapped by sterrennacht_wrap_naked_tables) usually
   keep their header cells in the first body row — style them like a thead. */
.xc49992e5 tr:first-child th {
	background: var(--sn-purple-deep);
	color: var(--sn-gold);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	white-space: nowrap;
}

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

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

.x04ed5aad {
	background: var(--sn-surface);
	border: var(--sn-rule) solid var(--sn-heading);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
	padding: var(--sn-sp-6);
}

/* The dark counterpart — the "serious but still on-brand" surface. Headings
   go white without a stroke, numbers go yellow, body goes translucent white.
   Blocks add .xd17ce033 to their root and inherit all of it. */
.xd17ce033 {
	background: var(--sn-purple-deep);
	border: var(--sn-rule) solid var(--sn-heading);
	border-radius: 20px;
	color: rgba(255, 255, 255, .75);
	padding: var(--sn-sp-8) var(--sn-sp-6);
}

.xd17ce033 h2,
.xd17ce033 h3,
.xd17ce033 h4 {
	color: var(--sn-on-chrome);
	-webkit-text-stroke: 0;
	text-shadow: none;
}

.xd17ce033 a {
	color: var(--sn-gold);
}

.xd17ce033 .x8c776e19 {
	color: rgba(255, 255, 255, .6);
}

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

	.xd17ce033 {
		padding: var(--sn-sp-12);
	}
}

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

/* The header sits ON the cream — no bar, no card, no border. The topbar is
   the only ink in the chrome, because the 18+ strip needs the contrast. */
.xe90ef8ab {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sn-bg);
}

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

/* Reading progress — sits ON the header's bottom edge, so it covers nothing
   (assets/js/ui.js drives the scale; no JS = a 0-width, invisible bar).
   The TRACK is an ink rule and is load-bearing, not decoration: the header
   is sticky and shares the page's cream, so without a line content slides
   under it invisibly. Never hide the track — hide the bar. */
.x4ffa1525 {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 3px;
	overflow: hidden;
	background: var(--sn-heading);
	pointer-events: none;
}

.xb3689077 {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: var(--sn-primary);
	transition: transform .12s linear;
}

.x0879da4d {
	background: var(--sn-purple);
	font-size: var(--sn-fs-xs);
	color: rgba(255, 255, 255, .78);
}

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

.xeb11cb6e {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--sn-sp-3);
	border: 1px solid var(--sn-gold);
	border-radius: var(--sn-radius-pill);
	color: var(--sn-gold);
	font-weight: 700;
}

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

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

.xac7889ab {
	flex: 0 0 auto;
}

/* Brand mark: a rounded ink-framed tile with the initial, then the name in
   monospace — the navbar is body-role, not display-role. */
.x2c5fbbd7 {
	margin: 0;
	font-family: var(--sn-font);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
	white-space: nowrap;
}

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

.x2c5fbbd7 a::before {
	content: '\2605';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: var(--sn-primary);
	border: var(--sn-rule) solid var(--sn-heading);
	border-radius: 10px;
	color: var(--sn-heading);
	font-size: 1rem;
	line-height: 1;
	transform: rotate(-4deg);
}

.xe90ef8ab .custom-logo {
	max-height: 54px;
	width: auto;
}

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

.x92ca867a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sn-sp-2);
	background: var(--sn-surface);
	border: var(--sn-rule) solid var(--sn-heading);
	border-radius: var(--sn-radius-sm);
	box-shadow: var(--sn-shadow-sm);
	color: var(--sn-heading);
	cursor: pointer;
}

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

/* Mobile: dropdown panel (covers both wp_nav_menu ul and wp_page_menu div>ul). */
.x6de6abd2 > ul,
.x6de6abd2 > div > ul {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + var(--sn-sp-3));
	min-width: 230px;
	padding: var(--sn-sp-3);
	background: var(--sn-surface);
	border: var(--sn-rule) solid var(--sn-heading);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
}

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

/* Mobile-first: links live in the white dropdown panel — dark text. */
.x6de6abd2 li a {
	display: block;
	padding: var(--sn-sp-2) var(--sn-sp-3);
	border-radius: var(--sn-radius-sm);
	color: var(--sn-text);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 400;
	text-decoration: none;
	transition: color .15s ease, background .15s ease;
}

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

.x6de6abd2 li.current-menu-item > a,
.x6de6abd2 li.current_page_item > a {
	color: var(--sn-heading);
	font-weight: 700;
}

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

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

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

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

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

.x6de6abd2 ul ul a {
	width: auto; /* underscores forces 200px */
}

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

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

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

	/* Desktop: plain monospace links, no underline, no hover background —
	   only a colour transition. nowrap because two-word items were breaking
	   across lines. */
	.x6de6abd2 li a {
		padding-left: 0;
		padding-right: 0;
		border-radius: 0;
		white-space: nowrap;
		font-size: var(--sn-fs-sm);
	}

	.x6de6abd2 li a:hover,
	.x6de6abd2 li a:focus {
		background: transparent;
		color: var(--sn-primary-hover);
	}

	/* The LAST top-level item becomes the orange pill CTA — the navbar's one
	   action, exactly like the reference. Editors get it for free by putting
	   the money page last in the menu. */
	.x6de6abd2 > ul > li:last-child > a,
	.x6de6abd2 > div > ul > li:last-child > a {
		padding: var(--sn-sp-2) var(--sn-sp-6);
		background: var(--sn-primary);
		border: var(--sn-rule) solid var(--sn-heading);
		border-radius: var(--sn-radius-pill);
		box-shadow: var(--sn-shadow-sm);
		color: var(--sn-heading);
		font-weight: 700;
		transition: transform .12s ease, box-shadow .12s ease;
	}

	.x6de6abd2 > ul > li:last-child > a:hover,
	.x6de6abd2 > div > ul > li:last-child > a:hover,
	.x6de6abd2 > ul > li:last-child > a:focus,
	.x6de6abd2 > div > ul > li:last-child > a:focus {
		background: var(--sn-primary);
		color: var(--sn-heading);
		transform: translate(2px, 2px);
		box-shadow: 0 0 0 var(--sn-heading);
	}

	/* …unless it has a submenu, in which case it is a normal parent item. */
	.x6de6abd2 > ul > li:last-child.menu-item-has-children > a,
	.x6de6abd2 > div > ul > li:last-child.page_item_has_children > a {
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		font-weight: 400;
	}

	/* Desktop dropdown: framed white card under the parent item. Opens on
	   hover, keyboard focus, or click (.focus via nav.js). */
	.x6de6abd2 ul ul {
		display: none;
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		min-width: 240px;
		margin: 0;
		padding: var(--sn-sp-3);
		background: var(--sn-surface);
		border: var(--sn-rule) solid var(--sn-heading);
		border-radius: var(--sn-radius);
		box-shadow: var(--sn-shadow);
	}

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

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

	.x6de6abd2 ul ul li a {
		padding: var(--sn-sp-2) var(--sn-sp-3);
		color: var(--sn-text);
		border-radius: var(--sn-radius-sm);
	}

	.x6de6abd2 ul ul li a:hover,
	.x6de6abd2 ul ul li a:focus {
		background: var(--sn-gold);
		color: var(--sn-heading);
	}

	/* The pill rule must not leak into the dropdown's last child. */
	.x6de6abd2 ul ul li:last-child > a {
		background: transparent;
		border: 0;
		box-shadow: none;
		font-weight: 400;
	}

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

/* ---------- Site footer (T2) ---------- */
/* Ink deck under a thin orange rule: brand + origin note | two menus |
   the responsible-gambling card, then a slim bottom bar. */

.x6fbb4a1a {
	position: relative;
	margin-top: var(--sn-sp-16);
	background: var(--sn-purple-deep);
	color: rgba(255, 255, 255, .62);
	font-size: var(--sn-fs-sm);
	border-top: 3px solid var(--sn-primary);
}

.x7a0d3c80 {
	display: grid;
	gap: var(--sn-sp-8);
	padding: var(--sn-sp-12) 0 var(--sn-sp-8);
}

/* The one place the display role appears on ink: brand name, white, no
   stroke (the outline does not read on a dark ground). */
.xdf4cdbb6 {
	margin: 0 0 var(--sn-sp-3);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.05;
	letter-spacing: .01em;
}

.xdf4cdbb6::after {
	content: ' \2605';
	color: var(--sn-primary);
}

.x0b5e5413 {
	margin: 0;
	max-width: 44ch;
	line-height: 1.65;
}

.x7a0d3c80 > * {
	min-width: 0; /* grid children must be allowed to shrink below content */
}

/* Both menus live in one grid cell (see the 1024px rule). */
.xa1149747 {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-8);
}

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

.x4c0a1b95 {
	margin: 0 0 var(--sn-sp-4);
	color: var(--sn-gold);
	font-family: var(--sn-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .9375rem;
}

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

.x100884bc a {
	color: rgba(255, 255, 255, .7);
	text-decoration: none;
	transition: color .15s ease;
}

.x100884bc a:hover,
.x100884bc a:focus {
	color: var(--sn-gold);
	text-decoration: none;
}

/* The compliance card — sits in the deck, not in a strip below it. */
.x02e42480 {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-4);
	padding: var(--sn-sp-6);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--sn-radius);
}

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

.x9eafb4e6 p {
	margin: 0;
	color: rgba(255, 255, 255, .86);
	line-height: 1.6;
}

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

/* Outlined chips — deliberately NOT the action colour (compliance links are
   informational, CLAUDE.md §7). */
.xff01c072 a {
	display: inline-block;
	padding: var(--sn-sp-1) var(--sn-sp-3);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: var(--sn-radius-pill);
	color: rgba(255, 255, 255, .82);
	font-size: var(--sn-fs-xs);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

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

/* Row 2: copyright + disclosure. 58% white on ink reads 7.4:1 — these two
   lines carry the affiliate disclosure and must stay readable at 13px. */
.x1e19da57 {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-6) 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: var(--sn-fs-xs);
	color: rgba(255, 255, 255, .6);
}

.x53e57bd9,
.x3f1c687d {
	margin: 0;
}

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

	.xa1149747 {
		flex-direction: row;
		gap: var(--sn-sp-12);
	}

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

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

@media (min-width: 1024px) {
	/* Exactly three columns — brand, the menu cell, the compliance card. The
	   menus share ONE cell so an unassigned menu location cannot change the
	   column count and squash the brand text. */
	.x7a0d3c80 {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.6fr) minmax(250px, 1.3fr);
		gap: var(--sn-sp-12);
		padding-top: var(--sn-sp-16);
	}
}

/* ---------- Scroll reveal ---------- */
/* COMPLIANCE BY CONSTRUCTION: the hidden state exists ONLY under .x98e8c5e1,
   which assets/js/reveal.js adds after its prefers-reduced-motion check, and
   only for blocks still below the fold. No JS = nothing is ever hidden. */

.x98e8c5e1 .x0f2c3fd1 {
	opacity: 0;
	transform: translateY(14px);
}

.x98e8c5e1 .x0f2c3fd1.is-inview {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease, transform .5s ease;
}

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

	/* Decorative motion off: the progress BAR carries no information. The
	   track stays — it is the header's separating rule (see above). */
	.xb3689077 {
		display: none;
	}
}

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

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

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