/* =============================================================
   casinofigure - design system v2
   Monochrome warm-neutral. Black is the only action colour; there is
   no accent hue, so emphasis comes from weight, scale and the
   condensed/display faces rather than from colour. Motion is short,
   entry-only, and disabled under prefers-reduced-motion.
   ============================================================= */

/* ---------- faces ----------
   Self-hosted. unicode-range means an English page fetches only the four
   `latin` files; the ext files sit unused until a glyph needs them. */

@font-face {
	font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('../fonts/anton-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('../fonts/anton-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('../fonts/barlow-condensed-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('../fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url('../fonts/inter-400_800-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url('../fonts/inter-400_800-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Ink. Near-black rather than #000 everywhere except the deepest stop
	   of the hero gradient, where true black gives it a floor. */
	--rs-ink:        #0a0a0a;
	--rs-ink-soft:   #161615;
	--rs-ink-band:   #0b0b0b;

	--rs-paper:      #ffffff;
	--rs-bg:         #fafaf9;
	--rs-surface:    #f4f4f2;

	--rs-line:       #e4e4e1;
	--rs-line-2:     #ededea;
	--rs-line-dash:  #c2c2be;
	--rs-line-hover: #bfbfbb;

	--rs-body:       #4a4a48;
	--rs-muted:      #5a5a58;
	--rs-faint:      #6b6b68;
	--rs-fainter:    #8a8a87;

	--rs-on-dark:       rgb(255 255 255 / .7);
	--rs-on-dark-soft:  rgb(255 255 255 / .55);
	--rs-on-dark-faint: rgb(255 255 255 / .45);
	--rs-on-dark-line:  rgb(255 255 255 / .16);
	--rs-on-dark-fill:  rgb(255 255 255 / .08);

	--rs-r-pill: 999px;
	--rs-r-lg:   18px;
	--rs-r:      16px;
	--rs-r-md:   12px;
	--rs-r-sm:   11px;
	--rs-r-xs:   8px;

	--rs-1: 4px;  --rs-2: 8px;  --rs-3: 12px; --rs-4: 16px;
	--rs-5: 24px; --rs-6: 32px; --rs-7: 48px; --rs-8: 64px; --rs-9: 96px;

	--rs-container: 1240px;
	/* Article line length. Applied to the blocks inside .rs-article .rs-prose. */
	--rs-measure: 72ch;
	--rs-gutter: 20px;

	--rs-display: Anton, Impact, 'Arial Narrow Bold', sans-serif;
	--rs-cond:    'Barlow Condensed', 'Arial Narrow', ui-sans-serif, sans-serif;
	--rs-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--rs-font:    Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--rs-ease: cubic-bezier(.16, 1, .3, 1);
	--rs-shadow:       0 8px 30px -18px rgb(10 10 10 / .16);
	--rs-shadow-tile:  0 8px 30px -20px rgb(10 10 10 / .18);
	--rs-shadow-hover: 0 12px 34px -20px rgb(10 10 10 / .28);
	--rs-shadow-lift:  0 14px 30px -16px rgb(10 10 10 / .3);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	font-family: var(--rs-font);
	font-size: 16px; line-height: 1.62;
	color: var(--rs-body);
	background: var(--rs-bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
::selection { background: var(--rs-ink); color: #fff; }

.rs-wrap {
	width: 100%; max-width: var(--rs-container);
	margin-inline: auto; padding-inline: var(--rs-gutter);
}

/* ---------- typography ---------- */
h1, h2, h3, h4 { color: var(--rs-ink); margin: 0 0 var(--rs-3); text-wrap: balance; }

/* Anton is a single-weight display face: it carries headline weight in its
   own drawing, so it is never bolded and always set uppercase. */
h1, h2, .rs-display {
	font-family: var(--rs-display); font-weight: 400;
	text-transform: uppercase; letter-spacing: .5px; line-height: 1.04;
}
h1 { font-size: clamp(34px, 5.2vw, 56px); }
h2 { font-size: clamp(30px, 4vw, 42px); }
h3 { font-family: var(--rs-cond); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .3px; line-height: 1.1; }
h4 { font-family: var(--rs-font); font-weight: 700; font-size: 1rem; }

p { margin: 0 0 var(--rs-4); }
a { color: var(--rs-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--rs-body); }

.rs-lede { font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.6; max-width: 62ch; color: var(--rs-muted); }
/* A hub standfirst is written in the editor, so it arrives as one or more
   paragraphs inside the .rs-lede block rather than as its text. */
.rs-lede > p { margin: 0 0 12px; }
.rs-lede > p:last-child { margin-bottom: 0; }
.rs-lede a { color: inherit; }
.rs-muted { color: var(--rs-muted); }
.rs-small { font-size: 13px; }

/* Mono is the "machine-read" voice: field labels, provenance notes, and
   anything the reader should treat as a data point rather than prose. */
.rs-meta {
	font-family: var(--rs-mono); font-size: 10.5px;
	letter-spacing: .9px; text-transform: uppercase; color: var(--rs-faint);
}
.rs-eyebrow {
	font-weight: 700; font-size: 13px; letter-spacing: 1.5px;
	text-transform: uppercase; color: var(--rs-muted);
}

/* ---------- utility bar ---------- */
.rs-strip { background: var(--rs-ink); color: #fff; padding: 9px 0; }
.rs-strip .rs-wrap {
	display: flex; align-items: center; justify-content: center;
	gap: 14px; flex-wrap: wrap;
	font-size: 11.5px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
}
.rs-strip i { font-style: normal; opacity: .4; }
.rs-strip a { color: #fff; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .45); }
.rs-strip a:hover { color: #fff; border-bottom-color: #fff; }

/* One line on a phone, whatever the width.
   At the desktop size the three items need ~334px and wrapped onto a second
   line, which left a separator stranded at the end of the first and turned a
   compliance note into a two-line banner. Type and gap both scale with the
   viewport so the row fits without wrapping down to 320px, where the text
   measures 261px inside a 296px box. The separators stay hidden: at four gaps
   instead of two they are what stops it fitting on the narrowest screens, and
   the gap divides the phrases well enough on its own. */
@media (max-width: 620px) {
	.rs-strip { padding: 3px 0; }
	.rs-strip .rs-wrap {
		flex-wrap: nowrap;
		gap: clamp(8px, 3vw, 16px);
		padding-inline: 12px;
		font-size: clamp(9px, 2.6vw, 10.5px);
		letter-spacing: .3px;
	}
	.rs-strip .rs-wrap > * { white-space: nowrap; }
	.rs-strip i { display: none; }
}

/* ---------- masthead ---------- */
.rs-head {
	position: sticky; top: 0; z-index: 60;
	background: rgb(255 255 255 / .93);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--rs-line);
}
.rs-head .rs-wrap { height: 70px; display: flex; align-items: center; gap: var(--rs-5); }

.rs-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
/* The mark ships as white artwork on transparency, so it drops straight
   onto dark surfaces and is inverted to black for light ones. */
.rs-brand img { width: 62px; height: auto; flex: none; filter: invert(1); }
.rs-brand__name {
	display: block; font-family: var(--rs-display); font-weight: 400;
	font-size: 23px; letter-spacing: .4px; text-transform: uppercase;
	line-height: 1; color: var(--rs-ink);
}
.rs-brand__tag {
	display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .7px;
	text-transform: uppercase; color: var(--rs-fainter); margin-top: 3px;
}

.rs-head__end { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.rs-nav ul { list-style: none; display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; }
.rs-nav a {
	font-size: 14.5px; font-weight: 500; color: var(--rs-ink);
	text-decoration: none; padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: opacity .16s ease;
}
.rs-nav a:hover { opacity: .6; }
.rs-nav .current-menu-item > a,
.rs-nav .current_page_item > a,
.rs-nav .current-menu-parent > a,
.rs-nav .current-menu-ancestor > a { font-weight: 700; border-bottom-color: var(--rs-ink); }

.rs-burger {
	width: 42px; height: 42px; border: 1px solid var(--rs-line); background: #fff;
	border-radius: var(--rs-r-md); display: flex; flex-direction: column;
	gap: 4px; align-items: center; justify-content: center; cursor: pointer;
}
.rs-burger span { width: 18px; height: 2px; background: var(--rs-ink); border-radius: 2px; }

/* Mobile drawer. Hidden via [hidden] so it stays out of the keyboard order
   and the accessibility tree until it is actually opened. */
.rs-drawer {
	position: fixed; inset: 0; z-index: 90;
	background: var(--rs-ink); color: #fff;
	padding: var(--rs-5); display: flex; flex-direction: column; overflow-y: auto;
	/* Clears the notch and the home indicator, and stops a flick at the end of
	   the list from scrolling the page underneath. */
	padding-top: max(var(--rs-5), env(safe-area-inset-top));
	padding-bottom: max(var(--rs-5), env(safe-area-inset-bottom));
	overscroll-behavior: contain;
}
.rs-drawer[hidden] { display: none; }
.rs-drawer__top { display: flex; align-items: center; justify-content: space-between; }
.rs-drawer__brand { display: flex; align-items: center; gap: 10px; }
.rs-drawer__brand img { width: 52px; height: auto; flex: none; }
.rs-drawer__brand span { font-family: var(--rs-display); font-weight: 400; font-size: 24px; text-transform: uppercase; }
.rs-drawer__close {
	width: 42px; height: 42px; border: 1px solid rgb(255 255 255 / .25);
	background: transparent; color: #fff; border-radius: var(--rs-r-sm);
	font-size: 22px; line-height: 1; cursor: pointer;
}
.rs-drawer ul { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rs-drawer a {
	display: block; font-family: var(--rs-display); font-weight: 400;
	font-size: 32px; text-transform: uppercase; color: #fff;
	text-decoration: none; padding: 10px 0;
	border-bottom: 1px solid rgb(255 255 255 / .1);
}
/* The header CTA is hidden below 980px, so the drawer carries it instead -
   otherwise the primary action simply disappears on phones. Pinned to the
   bottom of the panel, within thumb reach. */
.rs-drawer__cta { margin-top: auto; padding-top: var(--rs-6); }
.rs-drawer__cta .rs-btn { width: 100%; font-size: 17px; padding: 16px 24px; }
/* Colour included on purpose: `.rs-drawer a` above sets white for the nav
   links and outranks .rs-btn--light, which left the CTA as white text on a
   white button - a blank pill at the bottom of the drawer. */
.rs-drawer__cta a { font-family: var(--rs-font); font-size: 17px; text-transform: none; border-bottom: 0; color: var(--rs-ink); }

/* ---------- buttons ---------- */
.rs-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	background: var(--rs-ink); color: #fff;
	font-weight: 700; font-size: 16px; padding: 15px 28px;
	border-radius: var(--rs-r-pill); text-decoration: none;
	border: 1px solid transparent; cursor: pointer; white-space: nowrap;
	transition: transform .16s ease, background .16s ease, opacity .16s ease;
}
.rs-btn:hover { transform: translateY(-1px); background: #262625; color: #fff; }
.rs-btn:active { transform: translateY(0); opacity: .85; }
.rs-btn--sm { font-size: 14px; padding: 11px 20px; }
.rs-btn--light { background: #fff; color: var(--rs-ink); }
.rs-btn--light:hover { background: #f0f0ee; color: var(--rs-ink); }
.rs-btn--ghost { background: var(--rs-on-dark-fill); border-color: rgb(255 255 255 / .25); color: #fff; padding: 15px 24px; }
.rs-btn--ghost:hover { background: rgb(255 255 255 / .14); color: #fff; }
.rs-btn--outline { background: transparent; color: var(--rs-ink); border-color: var(--rs-line); }
.rs-btn--outline:hover { background: var(--rs-surface); color: var(--rs-ink); }
.rs-btn--block { width: 100%; }
.rs-btn:disabled, .rs-btn[aria-disabled="true"] {
	background: var(--rs-line-2); color: var(--rs-fainter);
	border-color: var(--rs-line); cursor: not-allowed; transform: none;
}

/* ---------- responsive masthead ----------
   These MUST stay below the .rs-btn block. The header CTA carries both
   .rs-btn and .rs-head__cta, which are equal specificity (0,1,0), so
   whichever is written last wins. While this lived up beside the masthead
   rules, `.rs-btn { display: inline-flex }` overrode `display: none` and the
   CTA stayed visible on phones - pushing the burger 29px off the right edge,
   where body{overflow-x:hidden} clipped it. The menu button was 13px wide and
   the whole page was 403px in a 375px viewport. */
@media (max-width: 980px) {
	.rs-nav, .rs-head__cta, .rs-brand__tag { display: none; }
}
@media (min-width: 981px) { .rs-burger { display: none; } }

/* Phones: a shorter bar and a smaller mark, so the sticky header costs less
   of a short viewport. */
@media (max-width: 620px) {
	.rs-head .rs-wrap { height: 60px; gap: var(--rs-3); }
	.rs-brand img { width: 48px; }
	.rs-brand__name { font-size: 20px; }
	/* The mark is a wide wordmark - 48px across is only 25px tall, so the
	   home link was a 25px target. Fills the bar's height instead. */
	.rs-brand { min-height: 46px; }
}

/* ---------- hero ---------- */
.rs-hero {
	position: relative; overflow: hidden; color: #fff;
	background: linear-gradient(155deg, var(--rs-ink-soft) 0%, var(--rs-ink) 52%, #000 100%);
}
.rs-hero::before, .rs-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.rs-hero::before { background: radial-gradient(1100px 620px at 78% -20%, rgb(255 255 255 / .16), transparent 62%); }
.rs-hero::after  { background: radial-gradient(700px 460px at 8% 110%, rgb(255 255 255 / .07), transparent 60%); }
.rs-hero .rs-wrap {
	position: relative; z-index: 1; padding-block: 74px 82px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--rs-7); align-items: center;
}
.rs-hero__badge {
	display: inline-flex; align-items: center; gap: var(--rs-2);
	background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .28);
	color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .4px;
	padding: 7px 14px; border-radius: var(--rs-r-pill);
}
.rs-hero h1 { color: #fff; font-size: clamp(40px, 6.2vw, 70px); line-height: 1.03; margin: 20px 0 0; }
.rs-hero .rs-lede { color: var(--rs-on-dark); max-width: 540px; margin: 18px 0 0; }
.rs-hero__actions { display: flex; flex-wrap: wrap; gap: var(--rs-3); margin-top: 28px; }
.rs-hero__fine { margin: 22px 0 0; font-size: 12.5px; color: var(--rs-on-dark-faint); }

.rs-hero__stats { display: grid; gap: var(--rs-4); max-width: 420px; width: 100%; justify-self: end; }
.rs-stat {
	background: rgb(255 255 255 / .07); border: 1px solid var(--rs-on-dark-line);
	border-radius: var(--rs-r-lg); padding: 34px 32px;
}
.rs-stat b { display: block; font-family: var(--rs-display); font-weight: 400; font-size: 64px; line-height: 1; color: #fff; }
.rs-stat span {
	display: block; margin-top: 14px; font-size: 12.5px; font-weight: 700;
	letter-spacing: .9px; text-transform: uppercase; color: var(--rs-on-dark-soft);
}
@media (max-width: 720px) {
	.rs-hero .rs-wrap { padding-block: 48px 56px; gap: var(--rs-6); }
	.rs-hero__stats { justify-self: stretch; grid-template-columns: 1fr 1fr; max-width: none; }
	.rs-stat { padding: 22px 20px; }
	.rs-stat b { font-size: 44px; }
}

/* Pills sized to their labels are two different widths, and stacked in one
   column they left a ragged right edge under a hero set flush left. Full
   width squares them off and makes both a full-width tap target; the fill
   still separates the primary action from the secondary one. */
@media (max-width: 620px) {
	.rs-hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
	.rs-hero__actions .rs-btn { width: 100%; padding: 16px 20px; }
}

/* ---------- trust strip ---------- */
.rs-trust { background: var(--rs-paper); border-bottom: 1px solid var(--rs-line); }
.rs-trust .rs-wrap { padding-block: 22px; }
/* The grid lives on the track now. display:contents on the set lets the four
   items be grid items directly, so the extra wrapper costs no layout. */
.rs-trust__track {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 18px;
}
.rs-trust__set { display: contents; }
.rs-trust__set[aria-hidden] { display: none; }
.rs-trust__item { display: flex; align-items: center; gap: var(--rs-3); justify-content: center; }
.rs-trust__item span {
	width: 40px; height: 40px; border-radius: var(--rs-r-sm); flex: none;
	background: var(--rs-surface); color: var(--rs-ink);
	display: flex; align-items: center; justify-content: center;
}
.rs-trust__item p { margin: 0; font-size: 13px; font-weight: 600; color: var(--rs-body); line-height: 1.35; }

/* Below 911px the four claims stop fitting comfortably on one row, so the
   strip becomes a row that scrolls itself: the track holds two identical sets
   and slides by exactly half its width, so the copy arrives where the original
   started and the loop has no seam. Above that width it is a plain grid. */
@media (max-width: 911px) {
	.rs-trust .rs-wrap {
		padding-block: 14px;
		padding-inline: 0;
		overflow: hidden;
		/* Fades at both edges, so items enter and leave rather than being cut. */
		-webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	}

	.rs-trust__track {
		display: flex;
		width: max-content;
		gap: 0;
		animation: rs-trust-marquee 26s linear infinite;
	}
	/* Both sets are shown here: the second is what the loop hands over to. */
	.rs-trust__set { display: flex; gap: var(--rs-5); flex: none; padding-right: var(--rs-5); }
	.rs-trust__set[aria-hidden] { display: flex; }

	.rs-trust__item { flex: 0 0 auto; justify-content: flex-start; }
	/* Each claim is short; wrapping one mid-phrase in a moving row reads as a
	   mistake rather than a line break. */
	.rs-trust__item p { white-space: nowrap; }
	.rs-trust__item span { width: 34px; height: 34px; }

	/* Touching or focusing it stops the motion, which is the pause mechanism
	   WCAG 2.2.2 asks for on anything that moves by itself for over five
	   seconds. */
	.rs-trust:hover .rs-trust__track,
	.rs-trust:focus-within .rs-trust__track,
	.rs-trust__track:active { animation-play-state: paused; }
}

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

/* Motion off means motion off. The strip goes back to being a row the reader
   pushes themselves, which is where it started. */
@media (prefers-reduced-motion: reduce) {
	.rs-trust__track { animation: none !important; width: auto; }
	@media (max-width: 911px) {
		.rs-trust .rs-wrap {
			overflow-x: auto; padding-inline: var(--rs-gutter);
			scrollbar-width: none; overscroll-behavior-x: contain;
			-webkit-mask-image: none; mask-image: none;
		}
		.rs-trust .rs-wrap::-webkit-scrollbar { display: none; }
		.rs-trust__set[aria-hidden] { display: none; }
	}
}

/* ---------- sections ---------- */
.rs-section { padding-block: 64px; }
.rs-section--paper { background: var(--rs-paper); border-top: 1px solid var(--rs-line); padding-block: 62px; }
.rs-section--surface { background: var(--rs-surface); padding-block: 62px; }

.rs-sec-head { max-width: 660px; margin: 0 auto var(--rs-6); text-align: center; }
.rs-sec-head h1, .rs-sec-head h2 { margin: 10px 0 0; }
.rs-sec-head p { color: var(--rs-muted); font-size: 16px; margin: 12px 0 0; }

/* Left-aligned variant: heading on one side, a one-line summary on the other. */
.rs-sec-head--split {
	max-width: none; text-align: left; margin-bottom: 26px;
	display: flex; align-items: flex-end; justify-content: space-between;
	flex-wrap: wrap; gap: var(--rs-3);
}
.rs-sec-head--split > span { color: var(--rs-muted); font-size: 15px; }
.rs-sec-foot { text-align: center; font-size: 13px; color: var(--rs-muted); margin-top: 22px; }

/* ---------- inner-page shell ---------- */
.rs-page { padding-block: var(--rs-7) var(--rs-8); }
.rs-crumbs { font-family: var(--rs-mono); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--rs-faint); margin-bottom: var(--rs-5); }
.rs-crumbs a { color: var(--rs-faint); text-decoration: none; }
.rs-crumbs a:hover { color: var(--rs-ink); }
/* The last crumb is the full post title, which is a headline, not a label -
   set in uppercase mono it ran to three lines on a phone. One line, clipped;
   the title itself is directly underneath. */
@media (max-width: 720px) {
	.rs-crumbs {
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		margin-bottom: var(--rs-4);
	}
}
.rs-page-head { margin-bottom: var(--rs-6); }
/* Heading and jump link share a line, and the link drops beneath the heading
   rather than squeezing it once there is no room for both. */
.rs-page-head__top {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--rs-3) var(--rs-5); flex-wrap: wrap;
}
.rs-page-head__top h1 { margin: 0; }
.rs-jump { flex: none; }
/* Clears the sticky masthead when the jump lands. */
#rs-list { scroll-margin-top: 96px; }
.rs-page-head h1 { margin: 0; }
.rs-page-head .rs-lede { margin: var(--rs-3) 0 0; }

/* ---------- ranked rows ---------- */
.rs-rows { display: flex; flex-direction: column; gap: var(--rs-4); }
/* A configured grid dropped inside a page that already has a container: an
   article body, or the top of a hub listing. The full-bleed variant uses
   .rs-section instead and supplies its own .rs-wrap. */
.rs-grid-inline { display: block; margin: 0 0 var(--rs-7); }
.rs-row {
	position: relative; background: var(--rs-paper);
	border: 1px solid var(--rs-line); border-left: 4px solid var(--rs-ink);
	border-radius: var(--rs-r); box-shadow: var(--rs-shadow);
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.rs-row:hover { border-color: var(--rs-line-hover); border-left-color: var(--rs-ink); box-shadow: var(--rs-shadow-hover); transform: translateY(-2px); }
.rs-row__inner {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 22px; align-items: center; padding: var(--rs-5);
}

.rs-row__brand { display: flex; align-items: center; gap: 15px; min-width: 0; }
.rs-rank {
	width: 44px; height: 44px; flex: none; border-radius: 50%;
	background: var(--rs-ink); color: #fff;
	font-family: var(--rs-display); font-weight: 400; font-size: 21px;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 4px var(--rs-line-2);
}
/* The plate is transparent, not ink. An operator logo arrives as a square that
   already carries its own background colour, and an ink plate behind it with
   6px of padding rendered as a black frame around every one of them. With no
   background and no padding the artwork fills the plate and the border-radius
   clips its corners, which is what the plate was for. Every context this
   appears in sits on --rs-paper, so a transparent-background logo still reads. */
.rs-logo {
	width: 60px; height: 60px; flex: none; border-radius: var(--rs-r-md);
	background: transparent; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.rs-logo img { width: 100%; height: 100%; object-fit: contain; padding: 0; }
/* No logo uploaded: a dashed plate that reads as "missing". Never a broken
   image, never an invented mark. */
.rs-logo--empty {
	background: transparent; border: 1px dashed var(--rs-line-dash);
	font-family: var(--rs-mono); font-size: 9px; letter-spacing: .8px;
	color: var(--rs-faint); text-transform: uppercase;
}
.rs-row__id { min-width: 0; }
.rs-row__id h3 { margin: 0; font-size: 20px; }
.rs-row__id h3 a { color: var(--rs-ink); text-decoration: none; }
.rs-row:hover .rs-row__id h3 a { text-decoration: underline; }
.rs-row__id .rs-meta { margin-top: 6px; }

.rs-row__col { text-align: center; min-width: 0; }
.rs-row__label { font-size: 11px; color: var(--rs-muted); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.rs-row__bonus {
	font-family: var(--rs-cond); font-weight: 700; text-transform: uppercase;
	line-height: 1.03; margin-top: 2px; font-size: clamp(26px, 3.2vw, 40px);
	color: var(--rs-ink); overflow-wrap: anywhere;
}
.rs-row__bonus--pending { color: var(--rs-fainter); }
.rs-row__col .rs-meta { margin-top: 4px; }

/* Three across by default, and still three when a grid is configured to show
   more: the row sets --rs-specs-n to min(3, count), so a fourth and fifth spec
   wrap to a second line instead of squeezing every column. */
.rs-specs { display: grid; grid-template-columns: repeat(var(--rs-specs-n, 3), minmax(0, 1fr)); gap: 14px; margin: 0; }
.rs-specs > div { min-width: 0; }
.rs-specs dt { font-family: var(--rs-mono); font-size: 10px; letter-spacing: .9px; text-transform: uppercase; color: var(--rs-faint); }
.rs-specs dd { margin: 5px 0 0; font-size: 16px; color: var(--rs-ink); overflow-wrap: anywhere; }
.rs-specs dd.is-empty { color: var(--rs-fainter); }

.rs-row__cta { display: flex; flex-direction: column; gap: 9px; }
.rs-row__cta .rs-meta { text-align: center; font-size: 10px; letter-spacing: .8px; }

/* The "Read review" fallback is a secondary, internal link, so it does not carry
   the full-width weight the operator CTA gets. Centred rather than stretched,
   because a flex column stretches its children by default. */
.rs-row__cta .rs-btn--narrow { width: auto; max-width: 190px; align-self: center; }

@media (max-width: 620px) {
	.rs-row__inner { padding: var(--rs-4); gap: var(--rs-4); }
	.rs-row__col { text-align: left; }
	.rs-rank { width: 38px; height: 38px; font-size: 18px; }
	.rs-logo { width: 52px; height: 52px; }
}

/* ---------- tiles ---------- */
.rs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--rs-4); }
.rs-tile {
	background: var(--rs-paper); border: 1px solid var(--rs-line);
	border-radius: var(--rs-r); padding: 26px; text-decoration: none;
	color: var(--rs-ink); display: flex; flex-direction: column;
	min-height: 220px; box-shadow: var(--rs-shadow-tile);
	transition: transform .17s ease, box-shadow .17s ease;
}
.rs-tile:hover { transform: translateY(-3px); box-shadow: var(--rs-shadow-lift); color: var(--rs-ink); }
.rs-icon {
	width: 44px; height: 44px; flex: none; border-radius: var(--rs-r-md);
	background: var(--rs-ink); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.rs-tile h3 { margin: 18px 0 0; font-size: 25px; }
.rs-tile p { font-size: 14.5px; line-height: 1.6; color: var(--rs-muted); margin: 10px 0 0; }
.rs-tile__go {
	margin-top: auto; padding-top: 20px; font-size: 13.5px; font-weight: 700;
	display: flex; align-items: center; gap: 7px; color: var(--rs-ink);
}
.rs-tile__go svg { transition: transform .17s ease; }
.rs-tile:hover .rs-tile__go svg { transform: translateX(3px); }

/* ---------- criteria ---------- */
.rs-crit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--rs-4); }
.rs-crit > div { background: var(--rs-paper); border: 1px solid var(--rs-line); border-radius: var(--rs-r); padding: var(--rs-5); }
.rs-crit .rs-icon { width: 46px; height: 46px; }
.rs-crit h3 { margin: 14px 0 0; font-size: 20px; }
.rs-method {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 30px; margin: 34px auto 0; max-width: 960px;
}
.rs-method p { font-size: 15.5px; line-height: 1.65; color: var(--rs-body); margin: 0; }

/* ---------- licence status ----------
   Colour is not load-bearing in a monochrome system, so state is carried
   by the left rule's style, the heading text and a mono status label. */
.rs-licence {
	background: var(--rs-paper); border: 1px solid var(--rs-line);
	border-left: 4px solid var(--rs-line-dash);
	border-radius: var(--rs-r); padding: var(--rs-5); margin-bottom: var(--rs-6);
}
.rs-licence__tag { font-family: var(--rs-mono); font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; color: var(--rs-faint); }
.rs-licence h2 { font-family: var(--rs-cond); font-size: 24px; text-transform: uppercase; letter-spacing: .3px; margin: 6px 0 var(--rs-2); line-height: 1.1; }
.rs-licence p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rs-muted); }
.rs-licence--ok      { border-left-color: var(--rs-ink); }
.rs-licence--warn    { border-left-color: var(--rs-fainter); border-left-style: dashed; }
.rs-licence--unknown { border-left-color: var(--rs-line-dash); border-left-style: dotted; }

/* ---------- notice ---------- */
.rs-notice {
	background: var(--rs-surface); border: 1px dashed var(--rs-line-dash);
	border-radius: var(--rs-r); padding: var(--rs-4) var(--rs-5);
	font-size: 14.5px; color: var(--rs-body);
}
.rs-notice strong { color: var(--rs-ink); }
.rs-notice p:last-child { margin-bottom: 0; }

/* ---------- review header ---------- */
.rs-review-head {
	display: grid; grid-template-columns: 132px 1fr auto; gap: var(--rs-5);
	align-items: center; background: var(--rs-paper);
	border: 1px solid var(--rs-line); border-left: 4px solid var(--rs-ink);
	border-radius: var(--rs-r); padding: var(--rs-5); box-shadow: var(--rs-shadow);
	margin-bottom: var(--rs-6);
}
.rs-review-head .rs-logo { width: 132px; height: 132px; border-radius: var(--rs-r); }
/* No logo and no CTA: one column, so the text uses the full width. */
.rs-review-head--plain { grid-template-columns: 1fr; }
.rs-review-head h1 { margin: 0 0 var(--rs-2); font-size: clamp(30px, 3.6vw, 46px); }
.rs-review-head__meta { display: flex; flex-wrap: wrap; gap: var(--rs-2) var(--rs-4); }
.rs-review-head__cta { display: flex; flex-direction: column; gap: 9px; min-width: 220px; }
.rs-review-head__cta .rs-meta { text-align: center; font-size: 10px; }
@media (max-width: 900px) {
	.rs-review-head { grid-template-columns: 96px 1fr; }
	.rs-review-head .rs-logo { width: 96px; height: 96px; }
	.rs-review-head__cta { grid-column: 1 / -1; min-width: 0; }
}
@media (max-width: 520px) {
	.rs-review-head { grid-template-columns: 1fr; gap: var(--rs-4); padding: var(--rs-4); }
	.rs-review-head .rs-logo { width: 76px; height: 76px; }
	/* The dashed "LOGO" plate says nothing, and stacked on a phone it cost a
	   96px band plus a gap before the title. Worth the space on the desktop
	   grid, where it sits in a column that would otherwise be empty; not here. */
	.rs-review-head .rs-logo--empty { display: none; }
}

/* ---------- review hero stats strip ----------
   auto-fill, not auto-fit: a review with two verified stats should show two
   ordinary tiles, not two half-width ones. Empty tracks stay collapsed and
   the tiles keep the same size however many are populated. */
.rs-hero-stats {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	gap: var(--rs-3); margin: 0 0 var(--rs-6);
}
.rs-hero-stats__item {
	padding: var(--rs-3) var(--rs-4); background: var(--rs-paper);
	border: 1px solid var(--rs-line); border-radius: var(--rs-r-sm);
}
.rs-hero-stats__item dt { font-family: var(--rs-mono); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--rs-faint); }
/* Body face, not the display face: Anton ships weight 400 only, so asking it
   for 700 gets a synthesised bold - and these values are prose as often as
   they are numbers ("UK Gambling Commission"). */
.rs-hero-stats__item dd { margin: var(--rs-1) 0 0; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--rs-ink); }

/* ---------- advertisement slot ---------- */
.rs-ad {
	position: relative; margin: 0 0 var(--rs-6); padding: var(--rs-4);
	border: 1px dashed var(--rs-line-dash); border-radius: var(--rs-r);
}
.rs-ad__label {
	position: absolute; top: -9px; left: var(--rs-4); padding: 0 var(--rs-2);
	background: var(--rs-paper); font-family: var(--rs-mono); font-size: 10px;
	letter-spacing: .6px; text-transform: uppercase; color: var(--rs-faint);
}

/* Score. A numeric chip rather than stars: this palette has no amber to
   spend, and the number is what the ranking is actually built on. */
.rs-score { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--rs-display); font-weight: 400; color: var(--rs-ink); line-height: 1; }
.rs-score b { font-size: 26px; font-weight: 400; }
.rs-score span { font-family: var(--rs-mono); font-size: 10.5px; letter-spacing: .6px; color: var(--rs-faint); }
.rs-row__id .rs-score { margin-top: 6px; }
.rs-review-head .rs-score b { font-size: 34px; }

/* ---------- facts and scores ---------- */
.rs-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 0 var(--rs-7); margin: 0; }
.rs-fact { display: flex; justify-content: space-between; gap: var(--rs-4); padding: var(--rs-3) 0; border-bottom: 1px solid var(--rs-line); }
.rs-fact dt { font-family: var(--rs-mono); font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; color: var(--rs-faint); align-self: center; }
.rs-fact dd { margin: 0; font-weight: 600; color: var(--rs-ink); font-size: 15px; text-align: right; }

/* A long value ("UK Gambling Commission") ragged-right against a mono label
   on the left leaves a hole down the middle and wraps badly under ~400px.
   Stack them instead, label over value. */
@media (max-width: 520px) {
	.rs-fact { display: block; padding: var(--rs-3) 0; }
	.rs-fact dd { text-align: left; margin-top: var(--rs-1); }
}

.rs-scores { display: grid; max-width: 620px; }
.rs-scores__row { display: grid; grid-template-columns: 1fr 90px auto; gap: var(--rs-4); align-items: center; padding: var(--rs-3) 0; border-bottom: 1px solid var(--rs-line); }
.rs-scores__label { font-size: 15px; color: var(--rs-body); }
.rs-scores__bar { height: 4px; border-radius: var(--rs-r-pill); background: var(--rs-line); overflow: hidden; }
.rs-scores__bar i { display: block; height: 100%; border-radius: var(--rs-r-pill); background: var(--rs-ink); transform-origin: left; }
.rs-scores__val { font-family: var(--rs-display); font-weight: 400; color: var(--rs-ink); font-size: 17px; }

/* ---------- article list ---------- */
.rs-list { display: grid; gap: var(--rs-3); }
.rs-list > a {
	display: block; background: var(--rs-paper); border: 1px solid var(--rs-line);
	border-radius: var(--rs-r); padding: var(--rs-5); text-decoration: none;
	box-shadow: var(--rs-shadow-tile);
	transition: transform .17s ease, box-shadow .17s ease;
}
.rs-list > a:hover { transform: translateY(-2px); box-shadow: var(--rs-shadow-lift); }
.rs-list h3 { margin: 0; font-size: 22px; }
.rs-list p { margin: var(--rs-2) 0 0; font-size: 14.5px; color: var(--rs-muted); }

/* ---------- article + table of contents ----------
   Source order is content-then-nav, so the article leads for screen readers
   and for anyone on a narrow screen. The grid puts the nav in the second
   column on wide viewports; below that it flows above the article. */
.rs-article { display: grid; gap: var(--rs-5); }
.rs-article > div { min-width: 0; }
.rs-toc { order: -1; }

@media (min-width: 1080px) {
	.rs-article { grid-template-columns: minmax(0, 1fr) 258px; gap: var(--rs-7); align-items: start; }
	.rs-toc {
		order: 0;
		position: sticky;
		/* Clears the sticky masthead, and never grows past the viewport. */
		top: 90px; max-height: calc(100vh - 130px); overflow-y: auto;
	}
}

.rs-toc {
	background: var(--rs-paper); border: 1px solid var(--rs-line);
	border-radius: var(--rs-r); padding: var(--rs-4) var(--rs-5);
}
/* The heading is a <summary>, so the list collapses on phones. It is styled
   to read as the same label it always was. */
.rs-toc summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--rs-4);
	font-family: var(--rs-mono); font-weight: 400; font-size: 10.5px;
	letter-spacing: .9px; text-transform: uppercase; color: var(--rs-faint);
	margin: 0 0 var(--rs-3); cursor: pointer; list-style: none;
}
.rs-toc summary::-webkit-details-marker { display: none; }
.rs-toc summary::after {
	content: ""; flex: none; width: 8px; height: 8px;
	border-right: 2px solid var(--rs-faint); border-bottom: 2px solid var(--rs-faint);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .18s ease;
}
.rs-toc__box[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.rs-toc__box:not([open]) > summary { margin-bottom: 0; }
.rs-toc summary:hover { color: var(--rs-ink); }

.rs-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.rs-toc a {
	display: block; padding: 6px 0 6px var(--rs-3);
	font-size: 13.5px; line-height: 1.4; color: var(--rs-muted);
	text-decoration: none; border-left: 2px solid var(--rs-line);
	transition: color .16s ease, border-color .16s ease;
}
.rs-toc a:hover { color: var(--rs-ink); border-left-color: var(--rs-line-hover); }
.rs-toc li.is-sub a { padding-left: var(--rs-5); font-size: 13px; }

/* Touch: a bigger label to tap, and entries deep enough to hit reliably. */
@media (max-width: 1079px) {
	.rs-toc summary { font-size: 12px; padding: var(--rs-2) 0; min-height: 44px; }
	.rs-toc a { padding-block: 11px; font-size: 15px; }
	.rs-toc li.is-sub a { font-size: 14px; }
}
/* The heading currently being read. Marked with aria-current so the state is
   announced, not only drawn. */
.rs-toc a[aria-current="location"] { color: var(--rs-ink); font-weight: 600; border-left-color: var(--rs-ink); }

/* ---------- prose ---------- */
.rs-prose { max-width: var(--rs-measure); font-size: 16.5px; }

/* In the two-column article layout the measure capped the whole column, so a
   table stopped at 707px and left ~235px of the column empty beside the
   contents list. Cap the blocks instead: prose keeps its line length, and a
   table is free to use the full column. Scoped to .rs-article so the hub and
   home bodies, which are deliberately full width, are untouched. */
.rs-article .rs-prose { max-width: none; }
.rs-article .rs-prose > * { max-width: var(--rs-measure); }
.rs-article .rs-prose > figure.wp-block-table { max-width: none; }
/* The hub introduction, between the standfirst and the listing. Its first
   heading sits close under the standfirst, so it loses the top margin .rs-prose
   h2 would otherwise give it. */
.rs-hub-body { margin: 0 0 var(--rs-7); max-width: none; }
/* The home page's written body. Full container width like the bands above and
   below it, rather than the 68ch measure .rs-prose gives an article. */
.rs-home-body { max-width: none; }
.rs-hub-body > :first-child { margin-top: 0; }
.rs-hub-body h2:first-child { margin-top: 0; }
/* Anchor jumps must clear the sticky masthead. */
.rs-prose :is(h2, h3)[id] { scroll-margin-top: 92px; }
.rs-prose h2 { margin-top: var(--rs-7); font-size: clamp(24px, 2.6vw, 32px); }
.rs-prose h3 { margin-top: var(--rs-6); font-size: 22px; }
.rs-prose ul, .rs-prose ol { padding-left: 1.15rem; margin: 0 0 var(--rs-4); }
.rs-prose li { margin-bottom: var(--rs-2); }
.rs-prose a { color: var(--rs-ink); text-decoration: underline; }
.rs-prose img { border-radius: var(--rs-r); margin-block: var(--rs-5); }
.rs-prose blockquote {
	margin: var(--rs-5) 0; padding: var(--rs-2) 0 var(--rs-2) var(--rs-5);
	border-left: 4px solid var(--rs-ink); color: var(--rs-ink);
}

/* ---------- comparison ---------- */

/* Picker bar on a review, and the "add another" bar under the table. */
.rs-compare-bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--rs-3) var(--rs-4);
	justify-content: space-between;
	background: var(--rs-paper); border: 1px solid var(--rs-line);
	border-radius: var(--rs-r); padding: var(--rs-4) var(--rs-5);
	margin-bottom: var(--rs-6);
}
.rs-compare-bar label { font-size: 15px; color: var(--rs-body); }
.rs-compare-bar strong { color: var(--rs-ink); }
/* min-width: 0 on the whole flex chain. A flex item defaults to min-width:auto,
   so it refuses to shrink below its content: the <select> here is sized by its
   longest option label, which on a phone pushed the bar past the viewport and
   made the entire page scroll sideways. body{overflow-x:hidden} does not save
   this - it hides the scrollbar on some browsers and nothing on others. */
.rs-compare-bar > * { min-width: 0; }
.rs-compare-bar__controls {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--rs-2);
	min-width: 0; max-width: 100%;
}
.rs-compare-bar__controls > * { min-width: 0; }
.rs-compare-bar select {
	font: inherit; font-size: 14.5px; padding: 10px var(--rs-3);
	border: 1px solid var(--rs-line); border-radius: var(--rs-r-sm);
	background: var(--rs-paper); color: var(--rs-ink);
	min-width: 0; max-width: 100%;
}
.rs-compare-bar select:hover { border-color: var(--rs-line-hover); }

/* Checkbox attached to a hub row. */
.rs-pick {
	display: flex; align-items: flex-start; gap: var(--rs-4);
	background: var(--rs-paper); border: 1px solid var(--rs-line);
	border-radius: var(--rs-r); box-shadow: var(--rs-shadow-tile);
	transition: transform .17s ease, box-shadow .17s ease;
}
.rs-pick:hover { transform: translateY(-2px); box-shadow: var(--rs-shadow-lift); }
.rs-pick__link { flex: 1; min-width: 0; padding: var(--rs-5); text-decoration: none; }
.rs-pick__link h3 { margin: 0; font-size: 22px; }
.rs-pick__link p { margin: var(--rs-2) 0 0; font-size: 14.5px; color: var(--rs-muted); }
.rs-pick__check {
	display: flex; align-items: center; gap: var(--rs-2); flex: none;
	padding: var(--rs-5) var(--rs-5) var(--rs-5) 0; cursor: pointer;
	font-family: var(--rs-mono); font-size: 10.5px; letter-spacing: .9px;
	text-transform: uppercase; color: var(--rs-faint); white-space: nowrap;
}
.rs-pick__check input { width: 18px; height: 18px; accent-color: var(--rs-ink); cursor: pointer; }
.rs-pick__check:hover { color: var(--rs-ink); }
.rs-pick__check--standalone {
	padding: var(--rs-3) var(--rs-4); border: 1px solid var(--rs-line);
	border-radius: var(--rs-r-sm); background: var(--rs-paper);
	font-family: var(--rs-font); font-size: 14.5px; letter-spacing: 0;
	text-transform: none; color: var(--rs-ink); white-space: normal;
}
.rs-pick__check--standalone:has(input:checked) { border-color: var(--rs-ink); box-shadow: inset 0 0 0 1px var(--rs-ink); }

.rs-compare-pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--rs-3); }
.rs-compare-pick__go { display: flex; align-items: center; gap: var(--rs-4); flex-wrap: wrap; margin-top: var(--rs-5); }

/* The table itself. Scrolls in its own box so the page never scrolls sideways. */
.rs-compare-scroll { overflow-x: auto; border: 1px solid var(--rs-line); border-radius: var(--rs-r); background: var(--rs-paper); }
.rs-compare { border-collapse: collapse; width: 100%; min-width: 640px; }
.rs-compare th, .rs-compare td {
	padding: var(--rs-3) var(--rs-4); text-align: left; vertical-align: middle;
	border-bottom: 1px solid var(--rs-line);
}
.rs-compare thead th { vertical-align: bottom; padding-block: var(--rs-5) var(--rs-4); border-bottom-width: 2px; border-bottom-color: var(--rs-ink); }
/* Operator logos are wide wordmarks, not square marks - a square plate scales
   them down to nothing. */
.rs-compare thead .rs-logo { width: 132px; height: 52px; border-radius: var(--rs-r-sm); margin-bottom: var(--rs-3); }
.rs-compare thead a { font-family: var(--rs-cond); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .3px; text-decoration: none; }
.rs-compare tbody th {
	font-family: var(--rs-mono); font-weight: 400; font-size: 10.5px;
	letter-spacing: .9px; text-transform: uppercase; color: var(--rs-faint);
	white-space: nowrap;
}
.rs-compare tbody td { font-weight: 600; font-size: 15px; color: var(--rs-ink); }
.rs-compare tbody tr:nth-child(even) { background: var(--rs-bg); }
.rs-compare__empty { color: var(--rs-fainter); font-weight: 400; }
.rs-compare tfoot td { padding-block: var(--rs-5); border-bottom: 0; }
.rs-compare tfoot .rs-meta { display: block; text-align: center; margin-top: var(--rs-2); font-size: 10px; }
.rs-compare .rs-score b { font-size: 22px; }

/* First column stays put while the rest scrolls, so a value never loses its
   label on a narrow screen. */
@media (min-width: 700px) {
	.rs-compare th:first-child { position: sticky; left: 0; z-index: 1; background: var(--rs-paper); }
	.rs-compare tbody tr:nth-child(even) th:first-child { background: var(--rs-bg); }
}

/* ---------- FAQ ----------
   <details>/<summary>, so open/close, keyboard access and in-page find all
   work without JavaScript. */
.rs-faq { max-width: 68ch; margin-top: var(--rs-7); }
.rs-faq > h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: var(--rs-4); scroll-margin-top: 92px; }
.rs-faq__item {
	background: var(--rs-paper); border: 1px solid var(--rs-line);
	border-radius: var(--rs-r-md); margin-bottom: var(--rs-2);
}
.rs-faq__item[open] { border-color: var(--rs-line-hover); }
.rs-faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--rs-4);
	padding: var(--rs-4) var(--rs-5); cursor: pointer;
	font-family: var(--rs-cond); font-weight: 700; font-size: 19px;
	text-transform: uppercase; letter-spacing: .3px; line-height: 1.15;
	color: var(--rs-ink); list-style: none;
}
/* Replace the native disclosure marker with one that flips on open. */
.rs-faq__item summary::-webkit-details-marker { display: none; }
.rs-faq__item summary::after {
	content: ""; flex: none; width: 10px; height: 10px;
	border-right: 2px solid var(--rs-faint); border-bottom: 2px solid var(--rs-faint);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .18s ease;
}
.rs-faq__item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.rs-faq__item summary:hover { background: var(--rs-surface); }
.rs-faq__answer { padding: 0 var(--rs-5) var(--rs-4); }
.rs-faq__answer p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--rs-muted); }
.rs-faq__answer a { color: var(--rs-ink); }

/* ---------- responsible gambling band ---------- */
.rs-rg { background: var(--rs-ink-band); color: #fff; padding-block: 60px; }
.rs-rg .rs-wrap {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
	gap: var(--rs-7); align-items: center;
}
.rs-rg .rs-eyebrow { color: rgb(255 255 255 / .62); }
.rs-rg h2 { color: #fff; margin: 10px 0 0; }
.rs-rg p { font-size: 16px; line-height: 1.65; color: rgb(255 255 255 / .78); margin: var(--rs-4) 0 0; max-width: 540px; }
.rs-rg a { color: #fff; border-bottom: 1px solid rgb(255 255 255 / .5); text-decoration: none; }
.rs-rg a:hover { color: #fff; border-bottom-color: #fff; }
.rs-rg__marks { display: flex; align-items: center; gap: var(--rs-5); flex-wrap: wrap; justify-content: center; }
.rs-18 {
	width: 62px; height: 62px; flex: none; border-radius: 50%;
	border: 2px solid rgb(255 255 255 / .55); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--rs-display); font-weight: 400; font-size: 22px;
}
.rs-chips { display: flex; flex-wrap: wrap; gap: var(--rs-2); max-width: 330px; }

/* Stacked on a phone, this badge lands a few hundred pixels above the footer's
   own one, so the same mark appears twice in a single scroll. It is decorative
   (aria-hidden) and the wording it stands for is still in the paragraph above,
   the top strip and the footer's legal text, so dropping it costs nothing. */
@media (max-width: 620px) {
	.rs-rg .rs-18 { display: none; }
	.rs-rg__marks { justify-content: flex-start; }
	.rs-chips { max-width: none; }
}
.rs-chips a {
	background: var(--rs-on-dark-fill); border: 1px solid rgb(255 255 255 / .28);
	border-radius: var(--rs-r-pill); padding: 9px 15px;
	font-size: 12.5px; font-weight: 700; color: #fff; text-decoration: none;
	transition: transform .16s ease, background .16s ease;
}
.rs-chips a:hover { transform: translateY(-1px); background: rgb(255 255 255 / .14); }

/* ---------- footer ---------- */
.rs-foot { background: var(--rs-ink); color: #fff; padding: 54px 0 30px; border-top: 1px solid rgb(255 255 255 / .12); }
.rs-foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--rs-6); }
.rs-foot__brand { display: flex; align-items: center; gap: 10px; }
.rs-foot__brand img { width: 52px; height: auto; flex: none; }
.rs-foot__brand span { font-family: var(--rs-display); font-weight: 400; font-size: 24px; text-transform: uppercase; }
.rs-foot p { font-size: 13px; color: rgb(255 255 255 / .72); line-height: 1.65; margin: var(--rs-3) 0 0; max-width: 280px; }
.rs-foot .rs-18 { width: 48px; height: 48px; font-size: 16px; border-color: rgb(255 255 255 / .5); margin-top: 18px; }
.rs-foot h2 { color: #fff; font-family: var(--rs-font); font-weight: 800; font-size: 12.5px; letter-spacing: .9px; text-transform: uppercase; margin: 0 0 14px; }
.rs-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rs-foot a { font-size: 13.5px; color: rgb(255 255 255 / .8); text-decoration: none; transition: opacity .16s ease; }
.rs-foot a:hover { color: #fff; opacity: .7; }
.rs-foot__legal {
	border-top: 1px solid rgb(255 255 255 / .12); margin-top: 36px; padding-top: 22px;
	font-size: 12.5px; color: rgb(255 255 255 / .68); line-height: 1.65;
	scroll-margin-top: 90px;
}
.rs-foot__legal p { margin: 0 0 10px; max-width: none; color: inherit; font-size: inherit; }
.rs-foot__legal p:last-child { margin: 0; }

/* ---------- pagination ---------- */
.navigation.pagination { margin-top: var(--rs-7); }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--rs-2); justify-content: center; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding-inline: var(--rs-3);
	border: 1px solid var(--rs-line); border-radius: var(--rs-r-pill);
	background: var(--rs-paper); color: var(--rs-ink);
	font-weight: 600; font-size: 14px; text-decoration: none;
}
.page-numbers:hover { border-color: var(--rs-line-hover); }
.page-numbers.current { background: var(--rs-ink); color: #fff; border-color: var(--rs-ink); }

/* ---------- operator group cards ---------- */
.rs-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: var(--rs-4); }
.rs-group {
	background: var(--rs-paper); border: 1px solid var(--rs-line);
	border-left: 4px solid var(--rs-ink); border-radius: var(--rs-r);
	padding: var(--rs-5); text-decoration: none; color: var(--rs-ink);
	display: flex; flex-direction: column; box-shadow: var(--rs-shadow-tile);
	transition: transform .17s ease, box-shadow .17s ease;
}
.rs-group:hover { transform: translateY(-3px); box-shadow: var(--rs-shadow-lift); color: var(--rs-ink); }
.rs-group__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rs-3); }
.rs-group__top h3 { margin: 0; font-size: 21px; }
/* The licence is the single most load-bearing fact on the card, so it is set
   apart rather than left in the list below. */
.rs-group__flag {
	flex: none; font-family: var(--rs-mono); font-size: 9.5px;
	letter-spacing: .8px; text-transform: uppercase;
	padding: 5px 9px; border-radius: var(--rs-r-pill);
	border: 1px dashed var(--rs-line-dash); color: var(--rs-faint);
}
.rs-group__flag.is-gb { border-style: solid; border-color: var(--rs-ink); color: var(--rs-ink); }
.rs-group__facts { display: grid; gap: var(--rs-2); margin: var(--rs-4) 0 0; }
.rs-group__facts > div { display: flex; justify-content: space-between; gap: var(--rs-3); border-bottom: 1px solid var(--rs-line-2); padding-bottom: var(--rs-2); }
.rs-group__facts dt { font-family: var(--rs-mono); font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--rs-faint); align-self: center; }
.rs-group__facts dd { margin: 0; font-size: 14.5px; font-weight: 600; text-align: right; }
.rs-group__go {
	margin-top: auto; padding-top: var(--rs-4);
	display: flex; align-items: center; gap: 7px;
	font-size: 13.5px; font-weight: 700;
}
.rs-group__go svg { transition: transform .17s ease; }
.rs-group:hover .rs-group__go svg { transform: translateX(3px); }

/* ---------- what is a sister site ---------- */
.rs-explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--rs-5); }
.rs-explain__item { display: flex; gap: var(--rs-4); align-items: flex-start; }
.rs-explain__item h3 { margin: 0; font-size: 19px; }
.rs-explain__item p { margin: var(--rs-2) 0 0; font-size: 15px; line-height: 1.65; color: var(--rs-muted); }

/* The homepage FAQ is the article component on a wider measure, since it is
   not sitting beside a column of prose. */
.rs-faq--home { max-width: 860px; margin-inline: auto; margin-top: 0; }

@media (max-width: 620px) {
	.rs-group { padding: var(--rs-4); }
	.rs-group__top { flex-direction: column; }
	.rs-explain { gap: var(--rs-4); }
	.rs-explain__item { gap: var(--rs-3); }
}

/* ---------- byline, team and profiles ----------
   Bylines are a post type, not a WordPress user, so all three of these render
   from the same fields. Every one degrades to a monogram plate when no photo
   has been uploaded, for the same reason .rs-logo--empty exists: a missing
   asset should read as missing, never as a broken image. */

.rs-byline {
	margin-top: var(--rs-7);
	background: var(--rs-paper);
	border: 1px solid var(--rs-line);
	border-left: 4px solid var(--rs-ink);
	border-radius: var(--rs-r);
	padding: var(--rs-5);
	max-width: 68ch;
}
.rs-byline__who { display: flex; align-items: center; gap: var(--rs-4); }
.rs-byline__photo {
	width: 64px; height: 64px; flex: none; border-radius: 50%;
	overflow: hidden; display: block; background: var(--rs-surface);
}
.rs-byline__photo img { width: 100%; height: 100%; object-fit: cover; }
.rs-byline__photo--empty {
	display: flex; align-items: center; justify-content: center;
	background: var(--rs-ink); color: #fff;
	font-family: var(--rs-display); font-weight: 400; font-size: 26px;
	border: 0;
}
.rs-byline__id { min-width: 0; }
.rs-byline__id h2 {
	font-family: var(--rs-cond); font-weight: 700; font-size: 24px;
	text-transform: uppercase; letter-spacing: .3px; line-height: 1.1;
	margin: 4px 0 0;
}
.rs-byline__id h2 a { color: var(--rs-ink); text-decoration: none; }
.rs-byline__id h2 a:hover { text-decoration: underline; }
.rs-byline__role { margin: 4px 0 0; font-size: 14px; color: var(--rs-muted); }
.rs-byline__bio { margin: var(--rs-4) 0 0; font-size: 15px; line-height: 1.65; color: var(--rs-body); }
.rs-byline__foot {
	display: flex; flex-wrap: wrap; gap: var(--rs-2) var(--rs-4);
	margin-top: var(--rs-4); padding-top: var(--rs-3);
	border-top: 1px solid var(--rs-line-2);
}
.rs-byline__foot a { color: var(--rs-faint); }
.rs-byline__foot a:hover { color: var(--rs-ink); }

/* Meet the team */
.rs-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--rs-4); }
.rs-team__card {
	background: var(--rs-paper); border: 1px solid var(--rs-line);
	border-radius: var(--rs-r); padding: var(--rs-5);
	text-decoration: none; color: var(--rs-ink);
	display: flex; flex-direction: column; align-items: center; text-align: center;
	box-shadow: var(--rs-shadow-tile);
	transition: transform .17s ease, box-shadow .17s ease;
}
.rs-team__card:hover { transform: translateY(-3px); box-shadow: var(--rs-shadow-lift); color: var(--rs-ink); }
.rs-team__photo {
	width: 92px; height: 92px; flex: none; border-radius: 50%;
	object-fit: cover; background: var(--rs-surface);
}
.rs-team__photo--empty {
	display: flex; align-items: center; justify-content: center;
	background: var(--rs-ink); color: #fff;
	font-family: var(--rs-display); font-weight: 400; font-size: 36px;
}
.rs-team__card h3 { margin: var(--rs-4) 0 0; font-size: 21px; }
.rs-team__card p { margin: 6px 0 0; font-size: 14px; color: var(--rs-muted); }
.rs-team__go {
	margin-top: var(--rs-4); font-size: 13px; font-weight: 700;
	border-bottom: 2px solid var(--rs-ink); padding-bottom: 2px;
}

/* Profile page */
.rs-profile {
	display: grid; grid-template-columns: 132px 1fr; gap: var(--rs-5);
	align-items: center; background: var(--rs-paper);
	border: 1px solid var(--rs-line); border-left: 4px solid var(--rs-ink);
	border-radius: var(--rs-r); padding: var(--rs-5);
	box-shadow: var(--rs-shadow); margin-bottom: var(--rs-6);
}
.rs-profile__photo {
	width: 132px; height: 132px; flex: none; border-radius: 50%;
	overflow: hidden; background: var(--rs-surface);
}
.rs-profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.rs-profile__photo--empty {
	display: flex; align-items: center; justify-content: center;
	background: var(--rs-ink); color: #fff;
	font-family: var(--rs-display); font-weight: 400; font-size: 52px;
}
.rs-profile__id { min-width: 0; }
.rs-profile h1 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); }
.rs-profile__role { margin: var(--rs-2) 0 0; font-size: 16px; color: var(--rs-muted); }
.rs-profile__meta { display: flex; flex-wrap: wrap; gap: var(--rs-2) var(--rs-4); margin-top: var(--rs-3); }
.rs-profile__links { display: flex; flex-wrap: wrap; gap: var(--rs-2); margin-top: var(--rs-4); }
.rs-profile__work { margin-top: var(--rs-7); }

@media (max-width: 620px) {
	.rs-profile { grid-template-columns: 1fr; padding: var(--rs-4); gap: var(--rs-4); }
	.rs-profile__photo { width: 88px; height: 88px; }
	.rs-profile__photo--empty { font-size: 34px; }
	.rs-byline { padding: var(--rs-4); }
	.rs-byline__photo { width: 56px; height: 56px; }
	.rs-team__card { padding: var(--rs-4); }
}

/* ---------- phones ----------
   Everything above is written desktop-out with local breakpoints. This block
   is the opposite: the handful of adjustments that only make sense once the
   whole page is one column, kept together so they are easy to reason about.
   Nothing here changes a layout - it is spacing, target size and type scale. */
@media (max-width: 620px) {

	/* Bands are tuned for a wide viewport; at this width the same padding
	   reads as dead space between every section. */
	.rs-section, .rs-section--paper, .rs-section--surface { padding-block: 44px; }
	.rs-page { padding-block: var(--rs-5) var(--rs-7); }
	.rs-rg { padding-block: 44px; }
	.rs-foot { padding: 40px 0 26px; }

	/* Guidance is 44px. These are the controls that sat under it. */
	.rs-foot ul { gap: 2px; }
	.rs-foot a { display: inline-block; padding-block: 10px; font-size: 14.5px; }
	.rs-foot__cols { gap: var(--rs-5); }
	.rs-chips a { padding: 12px 16px; font-size: 13px; }
	.rs-strip a { display: inline-block; padding-block: 8px; }

	/* The mono label styles bottom out around 10px, which is legible on a
	   desktop monitor at arm's length and marginal on a phone. */
	.rs-meta { font-size: 11.5px; }
	.rs-specs dt { font-size: 11px; }
	.rs-hero-stats__item dt { font-size: 11px; }
	.rs-fact dt { font-size: 11px; }
	.rs-row__label { font-size: 11.5px; }

	/* ---- Compact pass ----
	   The row card is the densest thing on the site and on a phone it ran to
	   most of a screen each: a 40px bonus line, three specs stacked, and 22px
	   of gap between every block. Everything below tightens type and space
	   without changing a single layout. */
	.rs-row__inner { padding: 16px; gap: 14px; }
	.rs-row__bonus { font-size: clamp(21px, 6.4vw, 26px); line-height: 1.05; }
	.rs-row__id h3 { font-size: 17px; }
	.rs-row__id .rs-meta { margin-top: 3px; }
	.rs-row__brand { gap: 11px; }
	.rs-rows { gap: 12px; }

	/* Three specs across rather than stacked. They are short values and the
	   column was costing three lines each. */
	.rs-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
	.rs-specs dd { font-size: 13.5px; margin-top: 3px; line-height: 1.3; }
	.rs-specs dt { font-size: 9.5px; letter-spacing: .6px; }

	/* Headings are set with vw clamps tuned for a wide viewport; the lower
	   bound is what a phone actually gets, and it was set for tablets. */
	h1 { font-size: clamp(28px, 8.4vw, 38px); line-height: 1.06; }
	h2 { font-size: clamp(22px, 6.4vw, 28px); }
	h3 { font-size: 17px; }
	.rs-lede { font-size: 15.5px; line-height: 1.55; }
	.rs-prose { font-size: 15.5px; }
	.rs-prose h2 { margin-top: var(--rs-5); font-size: 21px; }
	.rs-prose h3 { margin-top: var(--rs-4); font-size: 17.5px; }
	.rs-prose p { margin-bottom: var(--rs-3); }

	.rs-sec-head { margin-bottom: var(--rs-5); }
	.rs-sec-head p { font-size: 14.5px; margin-top: 8px; }
	.rs-page-head { margin-bottom: var(--rs-5); }

	/* The hero tiles were 2-up with generous padding; at this width the value
	   wrapped anyway, so the padding was buying nothing. */
	.rs-hero-stats { gap: 8px; }
	.rs-hero-stats__item { padding: 12px 14px; }
	.rs-hero-stats__item dd { font-size: 15px; }
	.rs-fact { padding: 12px 14px; }
	.rs-fact dd { font-size: 15px; }


	/* max-width is doing nothing at this width; the extra 0.5px of body copy
	   is worth having. */
	.rs-prose { font-size: 17px; }
	.rs-tile { min-height: 0; padding: 22px; }
	.rs-tile h3 { font-size: 22px; }
	.rs-crit > div { padding: var(--rs-4); }
}

/* ---------- motion ----------
   Entry reveals only, driven by IntersectionObserver. Content is visible by
   default; the hidden start state applies only once JS confirms it can
   finish, so a script failure never hides content permanently. */
.rs-anim .rs-reveal { opacity: 0; transform: translateY(16px); }
.rs-anim .rs-reveal.is-in {
	opacity: 1; transform: none;
	transition: opacity .55s var(--rs-ease), transform .55s var(--rs-ease);
	transition-delay: var(--rs-delay, 0ms);
}
.rs-scores__bar i { transform: scaleX(0); transition: transform .8s var(--rs-ease); }
.is-in .rs-scores__bar i, .rs-scores.is-in i { transform: scaleX(1); }

/* ---------- accessibility ---------- */
:where(a, button, input, [tabindex]):focus-visible {
	outline: 2px solid var(--rs-ink); outline-offset: 3px; border-radius: var(--rs-r-xs);
}
.rs-hero :focus-visible, .rs-rg :focus-visible, .rs-foot :focus-visible,
.rs-drawer :focus-visible, .rs-strip :focus-visible { outline-color: #fff; }
.rs-skip { position: absolute; left: -9999px; background: #fff; color: var(--rs-ink); padding: var(--rs-3) var(--rs-4); z-index: 100; }
.rs-skip:focus { left: var(--rs-4); top: var(--rs-4); }
.rs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
	.rs-reveal { opacity: 1 !important; transform: none !important; }
	.rs-row:hover, .rs-tile:hover, .rs-list > a:hover { transform: none; }
	.rs-scores__bar i { transform: scaleX(1) !important; }
}

/* ---------- tables inside article prose ----------
   Article tables arrive from the editor as bare <table> inside
   <figure class="wp-block-table">, so none of the .rs-compare rules reached
   them and they rendered borderless — rows ran together and the header was
   indistinguishable from the body. Same visual language as .rs-compare, but
   it has to work for any table an article happens to contain. */

/* A wide table scrolls inside its own box so the page never scrolls sideways.
   On a phone that box is not obviously scrollable, so it carries the standard
   scroll-shadow pair: a soft shadow at whichever edge still has content past
   it, which fades out as that end is reached.
   Four layers - two white "cover" gradients pinned to the content (local) and
   two shadows pinned to the box (scroll). When the content edge meets the box
   edge the cover slides over the shadow and hides it. */
.rs-prose figure.wp-block-table {
	margin: var(--rs-5) 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	background-color: var(--rs-paper);
	background-image:
		linear-gradient(to right, var(--rs-paper), rgb(255 255 255 / 0)),
		linear-gradient(to left,  var(--rs-paper), rgb(255 255 255 / 0)),
		radial-gradient(farthest-side at 0 50%,    rgb(10 10 10 / .17), rgb(10 10 10 / 0)),
		radial-gradient(farthest-side at 100% 50%, rgb(10 10 10 / .17), rgb(10 10 10 / 0));
	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-size: 32px 100%, 32px 100%, 13px 100%, 13px 100%;
	background-attachment: local, local, scroll, scroll;
}

.rs-prose table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-r);
	background: var(--rs-paper);
	font-size: 0.95em;
}

/* Transparent so the shadows above are not painted over. The figure supplies
   the same paper colour underneath, so this looks identical. */
.rs-prose figure.wp-block-table > table { background: transparent; }

.rs-prose thead th {
	text-align: left;
	vertical-align: bottom;
	padding: var(--rs-3) var(--rs-4);
	border-bottom: 2px solid var(--rs-ink);
	font-weight: 700;
}

.rs-prose th, .rs-prose td {
	padding: var(--rs-3) var(--rs-4);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--rs-line);
}

/* A row-header column carries the label, so it needs the weight rather than
   the alignment - these tables are label/value pairs, not a matrix. */
.rs-prose tbody th[scope="row"] { font-weight: 700; width: 34%; }

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

.rs-prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--rs-ink) 3%, transparent); }

@media (max-width: 640px) {
	.rs-prose table { min-width: 520px; }
	.rs-prose tbody th[scope="row"] { width: auto; }
}


/* ---------- contact form ---------- */
.rs-form { max-width: 620px; margin: var(--rs-6) 0 0; }
.rs-form p { margin: 0 0 var(--rs-4); }
.rs-form label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.rs-form input[type=text], .rs-form input[type=email], .rs-form select, .rs-form textarea {
	width: 100%; padding: 12px 14px; font: inherit; font-size: 15.5px;
	background: var(--rs-paper); color: var(--rs-ink);
	border: 1px solid var(--rs-line); border-radius: var(--rs-r-sm);
}
.rs-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 1px; }
.rs-form textarea { resize: vertical; min-height: 150px; }
.rs-form__hint { display: block; font-size: 13px; color: var(--rs-muted); margin-top: 6px; }
/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.rs-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rs-notice--ok { border-style: solid; border-color: #007017; color: var(--rs-ink); }
.rs-notice--warn { border-style: solid; border-color: #b26200; color: var(--rs-ink); }

/* ---------- cookie consent ---------- */
.rs-consent {
	position: fixed; inset: auto 0 0 0; z-index: 60;
	background: var(--rs-ink); color: #fff;
	border-top: 1px solid rgb(255 255 255 / .15);
	box-shadow: 0 -8px 30px rgb(0 0 0 / .18);
	padding: var(--rs-4) 0;
}
.rs-consent[hidden] { display: none; }
.rs-consent__inner {
	width: 100%; max-width: var(--rs-container); margin-inline: auto; padding-inline: var(--rs-gutter);
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--rs-4) var(--rs-5); flex-wrap: wrap;
}
.rs-consent p { margin: 0; font-size: 14px; line-height: 1.55; max-width: 68ch; color: rgb(255 255 255 / .86); }
.rs-consent a { color: #fff; }
.rs-consent__actions { display: flex; gap: var(--rs-3); flex: none; }
.rs-consent .rs-btn { background: #fff; color: var(--rs-ink); border-color: #fff; }
.rs-consent .rs-btn--outline { background: transparent; color: #fff; border-color: rgb(255 255 255 / .5); }

@media (max-width: 620px) {
	.rs-consent { padding: var(--rs-3) 0; }
	.rs-consent p { font-size: 13px; }
	.rs-consent__actions { width: 100%; }
	.rs-consent__actions .rs-btn { flex: 1; }
}


/* ---------- overflow backstop ----------
   Causes are fixed at their source above. This is the net underneath: a wide
   table or a long unbroken string pasted into an article should scroll inside
   its own block, never take the page with it. */
.rs-prose :is(table, pre) { max-width: 100%; }
.rs-prose figure.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* break-word, not anywhere: `anywhere` is counted in min-content sizing, so a
   table column shrank to one character and split "Brand" across two lines.
   `break-word` still rescues a long unbroken string, but leaves the intrinsic
   column widths alone. */
.rs-prose { overflow-wrap: break-word; }
.rs-hub-body, .rs-home-body { overflow-wrap: break-word; }