/* =============================================================
   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: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url('../fonts/dm-sans-400_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: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url('../fonts/dm-sans-400_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;
}

: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:        #0E1525;
	--rs-ink-soft:   #1C1C1C;
	--rs-ink-band:   #111111;

	--rs-paper:      #ffffff;
	--rs-bg:         #ffffff;
	--rs-surface:    #F5F7FB;

	--rs-line:       #E3E7F0;
	--rs-line-2:     #EEF1F6;
	--rs-line-dash:  #CBD3E4;
	--rs-line-hover: #CBD3E4;

	--rs-body:       #4A5368;
	--rs-muted:      #5A6275;
	--rs-faint:      #5A6275;
	--rs-fainter:    #8A93A6;

	--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:   20px;
	--rs-r:      16px;
	--rs-r-md:   14px;
	--rs-r-sm:   12px;
	--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: 1208px;
	/* Article line length. Applied to the blocks inside .rs-article .rs-prose. */
	--rs-measure: 72ch;
	--rs-gutter: 24px;

	--rs-display: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
	--rs-cond:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
	--rs-mono:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
	--rs-font:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;

	/* v3 brand. Blue carries links, primary actions and the hero bands; the
	   gold offer button stays the only warm colour on the site. */
	--rs-brand:       #3450D1;
	--rs-brand-hover: #2840AE;
	--rs-brand-tint:  #EEF0FC;
	--rs-brand-chip:  #E9ECFB;
	--rs-on-brand:    #E4E8FB;
	--rs-on-brand-2:  #DDE2FA;
	--rs-ok:          #11704F;
	--rs-ok-bg:       #E6F5EE;
	--rs-bad:         #A8301F;
	--rs-bad-bg:      #FCECEA;
	--rs-dark:        #111111;
	--rs-dark-2:      #1C1C1C;
	--rs-on-dark-grey: #B5B5B5;

	--rs-ease: cubic-bezier(.16, 1, .3, 1);
	--rs-shadow:       0 1px 2px rgb(11 27 63 / .04);
	--rs-shadow-tile:  none;
	--rs-shadow-hover: 0 12px 32px rgb(11 27 63 / .10);
	--rs-shadow-lift:  0 12px 32px rgb(11 27 63 / .10);
}

*, *::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; }

h1, h2, .rs-display {
	font-family: var(--rs-display); font-weight: 700;
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;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: 13px;
	color: var(--rs-faint);
}
.rs-eyebrow {
	font-weight: 700; font-size: 13px; 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; }
.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);
			}
	.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: 700;
	font-size: 23px; line-height: 1; color: var(--rs-ink);
}
.rs-brand__tag {
	display: block; font-size: 10.5px; font-weight: 600; 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: 700; font-size: 24px;}
.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: 700;
	font-size: 32px;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; 	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: 700; font-size: 64px; line-height: 1; color: #fff; }
.rs-stat span {
	display: block; margin-top: 14px; font-size: 12.5px; font-weight: 700;
	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: 13px; 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; }
.rs-list-heading { font-size: clamp(24px, 3vw, 32px); margin: 0 0 var(--rs-5); }

/* ---------- 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: 700; 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: 13px; 	color: var(--rs-faint);}
.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; }
.rs-row__bonus {
	font-family: var(--rs-cond); font-weight: 700;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: 13px; 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; }

/* 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: 13px; color: var(--rs-faint); }
.rs-licence h2 { font-family: var(--rs-cond); font-size: 24px;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: 13px; color: var(--rs-faint); }
.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); }

/* ---------- operator relationships ----------
   The licence number is the connective tissue on CasinoFigure, so this sits
   directly after the verified hero facts. */
.rs-operator-links {
	margin: 0 0 var(--rs-7); padding: clamp(22px, 3vw, 32px);
	background: var(--rs-ink); color: #fff;
	border-radius: var(--rs-r-lg); box-shadow: var(--rs-shadow-lift);
}
.rs-operator-links__head {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
	align-items: end; gap: var(--rs-4) var(--rs-7); margin-bottom: var(--rs-5);
}
.rs-operator-links .rs-eyebrow { color: var(--rs-on-dark-soft); }
.rs-operator-links__head h2 { color: #fff; font-size: clamp(26px, 3.2vw, 38px); margin: 7px 0 0; }
.rs-operator-links__head p { color: var(--rs-on-dark); margin: 0; font-size: 14.5px; line-height: 1.55; }
.rs-operator-links__grid {
	display: grid;
	grid-template-columns: repeat(var(--rs-operator-count, 3), minmax(0, 1fr));
	gap: var(--rs-3);
}
.rs-operator-card {
	min-width: 0; min-height: 210px; padding: 18px;
	display: flex; flex-direction: column;
	background: rgb(255 255 255 / .08); color: #fff;
	border: 1px solid var(--rs-on-dark-line); border-top: 3px solid #fff;
	border-radius: var(--rs-r-md); text-decoration: none;
	transition: transform .17s ease, background .17s ease, border-color .17s ease;
}
a.rs-operator-card:hover {
	transform: translateY(-3px); color: #fff;
	background: rgb(255 255 255 / .13); border-color: rgb(255 255 255 / .42);
}
.rs-operator-card--empty { border-top-style: dashed; border-top-color: var(--rs-on-dark-soft); }
.rs-operator-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--rs-3); }
.rs-operator-card__top .rs-meta { color: var(--rs-on-dark-soft); text-align: right; }
.rs-operator-card__mark {
	width: 44px; height: 44px; flex: none; overflow: hidden;
	display: grid; place-items: center;
	background: #fff; color: var(--rs-ink); border-radius: var(--rs-r-sm);
	font-family: var(--rs-cond); font-weight: 700; font-size: 16px; }
.rs-operator-card__mark img { width: 100%; height: 100%; object-fit: contain; }
.rs-operator-card h3 { color: #fff; margin: 18px 0 7px; font-size: 21px; }
.rs-operator-card p { color: var(--rs-on-dark); margin: 0; font-size: 13.5px; line-height: 1.5; }
.rs-operator-card__go {
	margin-top: auto; padding-top: var(--rs-4); color: #fff;
	font-size: 13px; font-weight: 700;
}
.rs-operator-card--empty .rs-operator-card__go { color: var(--rs-on-dark-soft); }
.rs-operator-links__footer {
	display: inline-block; color: #fff; margin-top: var(--rs-4);
	font-size: 13.5px; font-weight: 700;
}
.rs-operator-links__footer:hover { color: #fff; text-decoration-thickness: 2px; }

@media (max-width: 820px) {
	.rs-operator-links__head { grid-template-columns: 1fr; align-items: start; gap: var(--rs-3); }
	.rs-operator-links__grid { grid-template-columns: 1fr; }
	.rs-operator-card { min-height: 0; }
}

/* ---------- 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: 13px;
	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: 700; 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: 13px; 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: 13px; 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: 700; 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: 500; font-size: 13px;
	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: 13px; 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-decoration: none; }
.rs-compare tbody th {
	font-family: var(--rs-mono); font-weight: 500; font-size: 13px;
	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;
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: 700; 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); }
/* Six columns at full width: brand, site, reviews, sister sites, safety and about.
   auto-fit still collapses this naturally to fewer columns on smaller screens. */
.rs-foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 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: 700; font-size: 24px;}
.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; 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: 13px;
	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: 13px; 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: 700; 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;
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: 700; 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: 700; 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; }

	/* 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; }


/* ==========================================================================
   Page header shell (reviews, sister-site maps)
   One card: copy + side column, meta rail, optional offer band, facts rows.
   Slots collapse when empty; nothing reflows. Amber is used only on the paid
   action, nowhere else on the site.
   ========================================================================== */
:root {
	--rs-amber:      oklch(0.82 0.15 85);
	--rs-amber-hi:   oklch(0.88 0.15 85);
	--rs-amber-lo:   oklch(0.62 0.13 85);
}
@supports not (color: oklch(0.5 0.1 85)) {
	:root { --rs-amber: #f0b429; --rs-amber-hi: #f6c651; --rs-amber-lo: #b8841a; }
}

.rs-ph {
	display: block; width: 100%; min-width: 0;
	background: var(--rs-paper);
	border: 1px solid var(--rs-line); border-left: 5px solid var(--rs-ink);
	border-radius: var(--rs-r); overflow: hidden;
	box-shadow: var(--rs-shadow);
	margin: 0 0 var(--rs-6);
}
.rs-ph__main {
	display: grid; grid-template-columns: minmax(0, 1fr) 168px;
	gap: 36px; align-items: start;
	padding: 36px 40px 28px;
}
.rs-ph--no-side .rs-ph__main { grid-template-columns: minmax(0, 1fr); }
.rs-ph__copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rs-ph__kicker {
	font-family: var(--rs-mono); font-size: 13px; color: var(--rs-faint);
}
.rs-ph__title {
	margin: 0; font-size: clamp(30px, 3.6vw, 46px); line-height: .98;
	text-wrap: balance;
}
.rs-ph__lede {
	margin: 0; font-size: 17px; line-height: 1.55; color: var(--rs-body);
	max-width: 60ch; text-wrap: pretty;
}
.rs-ph__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rs-ph__shot {
	aspect-ratio: 16 / 10; overflow: hidden;
	border: 1px solid var(--rs-line); border-radius: var(--rs-r-sm); background: var(--rs-surface);
}
.rs-ph__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-ph__shot--logo { aspect-ratio: 1 / 1; padding: 12px; background: #fff; }
.rs-ph__shot--logo img { object-fit: contain; }
.rs-ph__score {
	display: flex; align-items: baseline; justify-content: space-between;
	border: 1px solid var(--rs-ink); border-radius: var(--rs-r-sm); padding: 10px 12px;
	font-family: var(--rs-display); line-height: 1;
}
.rs-ph__score b { font-size: 34px; font-weight: 400; color: var(--rs-ink); }
.rs-ph__score span { font-family: var(--rs-mono); font-size: 13px; color: var(--rs-faint); }
.rs-ph__plate {
	aspect-ratio: 1 / 1; display: grid; place-items: center;
	background: var(--rs-ink); color: #fff; border-radius: var(--rs-r-sm);
	font-family: var(--rs-display); font-size: 40px; }
.rs-ph__plate-note {
	font-family: var(--rs-mono); font-size: 13px; color: var(--rs-faint); text-align: center;
}

.rs-ph__meta {
	display: flex; flex-wrap: wrap; gap: 8px 24px;
	padding: 12px 40px; border-top: 1px solid var(--rs-line-2);
	font-family: var(--rs-mono); font-size: 13px; color: var(--rs-faint);
}

/* ---------- sponsored offer band ---------- */
.rs-offer {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	gap: 28px; align-items: center;
	padding: 22px 40px; background: var(--rs-ink-band); color: #fff;
}
.rs-offer__copy { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rs-offer__kicker {
	font-family: var(--rs-mono); font-size: 13px; color: var(--rs-amber);
}
.rs-offer__headline {
	font-family: var(--rs-display); font-size: clamp(20px, 2.4vw, 27px);
	line-height: 1.02;color: #fff;
}
.rs-offer__terms {
	font-family: var(--rs-mono); font-size: 13px; color: var(--rs-on-dark-soft); line-height: 1.5;
}
.rs-offer__action { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.rs-offer__btn {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--rs-amber); color: var(--rs-ink);
	font-family: var(--rs-display); font-size: 19px; text-decoration: none; text-align: center;
	padding: 15px 30px; white-space: nowrap; border-radius: var(--rs-r-pill);
	box-shadow: 0 8px 22px -12px var(--rs-amber-lo);
	transition: background .16s ease, transform .16s ease;
}
.rs-offer__btn:hover { background: var(--rs-amber-hi); color: var(--rs-ink); text-decoration: none; transform: translateY(-1px); }
.rs-offer__btn:active { transform: translateY(0); opacity: .9; }
.rs-offer__btn--sm { font-size: 15px; padding: 11px 22px; box-shadow: none; }
.rs-offer__note {
	font-family: var(--rs-mono); font-size: 13px; color: var(--rs-on-dark-faint); text-align: center;
}

/* ---------- facts rows ---------- */
.rs-ph-facts { margin: 0; border-top: 1px solid var(--rs-ink); }
.rs-ph-facts__row {
	display: grid; grid-template-columns: 200px minmax(0, 1fr);
	border-bottom: 1px solid var(--rs-line-2);
}
.rs-ph-facts__row:last-child { border-bottom: 0; }
.rs-ph-facts dt {
	padding: 14px 16px 14px 40px;
	font-family: var(--rs-mono); font-size: 13px; color: var(--rs-faint);
}
.rs-ph-facts dd { margin: 0; padding: 14px 40px 14px 0; font-size: 15px; font-weight: 600; color: var(--rs-ink); overflow-wrap: anywhere; }

/* ---------- sticky re-offer ---------- */
.rs-sticky-offer {
	position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
	max-width: calc(var(--rs-container) - 2 * var(--rs-gutter)); margin-inline: auto;
	display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
	padding: 12px 20px; background: var(--rs-ink-band); color: #fff;
	border-radius: var(--rs-r); box-shadow: var(--rs-shadow-lift), 0 0 0 1px rgb(255 255 255 / .08);
}
.rs-sticky-offer[hidden] { display: none; }
.rs-sticky-offer__mark {
	width: 34px; height: 34px; flex: none; display: grid; place-items: center;
	background: #fff; color: var(--rs-ink); font-family: var(--rs-display); font-size: 13px;
	border-radius: var(--rs-r-xs);
}
.rs-sticky-offer__text { flex: 1 1 200px; min-width: 0; font-size: 14px; font-weight: 600; }
.rs-sticky-offer__text strong { font-weight: 700; }
.rs-sticky-offer__terms {
	font-family: var(--rs-mono); font-size: 13px; color: var(--rs-on-dark-soft);
}
.rs-sticky-offer__close {
	appearance: none; background: var(--rs-on-dark-fill); border: 0; color: var(--rs-on-dark);
	width: 36px; height: 36px; flex: none; border-radius: var(--rs-r-pill);
	font-size: 20px; line-height: 1; cursor: pointer;
}
.rs-sticky-offer__close:hover { color: #fff; }
body.has-sticky-offer { padding-bottom: 84px; }
/* The cookie banner owns the bottom edge while it is open; the offer waits. */
body:has(.rs-consent:not([hidden])) .rs-sticky-offer { display: none; }

@media (max-width: 900px) {
	.rs-ph__main { grid-template-columns: minmax(0, 1fr) 132px; gap: 24px; padding: 28px 28px 22px; }
	.rs-ph__meta, .rs-offer { padding-left: 28px; padding-right: 28px; }
	.rs-ph-facts dt { padding-left: 28px; }
	.rs-ph-facts dd { padding-right: 28px; }
	.rs-ph-facts__row { grid-template-columns: 150px minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.rs-ph { border-left-width: 4px; border-radius: var(--rs-r-md); }
	.rs-ph__main { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px 18px; }
	.rs-ph__side { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; gap: 12px; }
	.rs-ph__shot { width: auto; aspect-ratio: auto; height: 72px; }
	.rs-ph__shot--logo { height: 72px; padding: 8px; }
	.rs-ph__score { height: 72px; align-items: center; padding: 0 16px; }
	.rs-ph__score b { font-size: 30px; }
	.rs-ph__plate { width: 72px; height: 72px; aspect-ratio: auto; font-size: 24px; }
	.rs-ph__plate-note { align-self: center; text-align: left; }
	.rs-ph__side:has(.rs-ph__plate) { grid-template-columns: 72px minmax(0, 1fr); }
	.rs-ph__meta, .rs-offer { padding-left: 18px; padding-right: 18px; }
	.rs-offer { grid-template-columns: 1fr; gap: 16px; }
	.rs-ph-facts__row { grid-template-columns: 1fr; }
	.rs-ph-facts dt { padding: 12px 18px 2px; }
	.rs-ph-facts dd { padding: 0 18px 12px; }
	.rs-sticky-offer {
		left: 8px; right: 8px; bottom: 8px;
		display: grid; grid-template-columns: 34px minmax(0, 1fr) 36px; align-items: center;
		gap: 10px 12px; padding: 12px 14px; border-radius: var(--rs-r-md);
	}
	.rs-sticky-offer__text { font-size: 13.5px; line-height: 1.35; }
	.rs-sticky-offer__terms { grid-column: 1 / -1; }
	.rs-sticky-offer .rs-offer__btn--sm { grid-column: 1 / 3; width: 100%; }
	.rs-sticky-offer__close { grid-column: 3; grid-row: 3; }
	body.has-sticky-offer { padding-bottom: 124px; }
}
@media (prefers-reduced-motion: reduce) {
	.rs-sticky-offer, .rs-offer__btn { transition: none; }
}

/* 2.29.8: missing-image placeholders removed; decorative star row under scores. */
.rs-review-head--nologo { grid-template-columns: 1fr auto; }
.rs-stars { position: relative; display: inline-block; font-family: Arial, sans-serif; font-size: 13px; line-height: 1; color: var(--rs-line); white-space: nowrap; vertical-align: middle; }
.rs-stars::before { content: "\2605\2605\2605\2605\2605"; }
.rs-stars i { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; color: var(--rs-ink); font-style: normal; }
.rs-stars i::before { content: "\2605\2605\2605\2605\2605"; }
.rs-score .rs-stars { margin-left: 8px; }
.rs-ph__score { flex-wrap: wrap; row-gap: 8px; }
.rs-ph__score .rs-stars { flex-basis: 100%; font-size: 15px; }
.rs-ph__score--count span {}
@media (max-width: 640px) {
	.rs-ph__score { height: auto; min-height: 72px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 10px 16px; }
	.rs-ph__score .rs-stars { flex-basis: auto; }
	.rs-ph__side:not(:has(.rs-ph__shot)) { grid-template-columns: minmax(0, 1fr); }
}
/* 2.29.9 group link under operator module */
.rs-operator-links__footer--group{margin-right:var(--rs-5,1.25rem)}


/* ==========================================================================
   v3 component layer (October 2026 redesign)
   DM Sans throughout, sentence case, blue brand (#3450D1) on white, dark
   chrome (#111) for the strip, header, safety band and footer. Gold stays the
   only warm colour and belongs to the sponsored offer button alone.
   Rules here override the component rules above; the tokens at the top of
   the file were switched to the v3 palette, so most components only need
   their decoration (left accent rules, mono caps) removed.
   ========================================================================== */

body { color: var(--rs-body); background: #fff; font-size: 16px; line-height: 1.6; }
::selection { background: var(--rs-brand); color: #fff; }
h1, h2, h3, h4, .rs-display { color: var(--rs-ink); font-weight: 700; }
h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.05; letter-spacing: -1.5px; }
h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -1px; }
h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.2px; }
a { color: var(--rs-brand); }
a:hover { color: var(--rs-brand-hover); }
.rs-eyebrow { font-size: 14px; font-weight: 600; color: var(--rs-brand); }
.rs-meta { font-size: 13px; font-weight: 500; color: var(--rs-muted); }
.rs-lede { color: var(--rs-muted); }

/* ---------- strip, header, drawer ---------- */
.rs-strip { background: #000; color: var(--rs-on-dark-grey); padding: 7px 0; }
.rs-strip .rs-wrap { font-size: 12px; font-weight: 500; gap: 4px 16px; }
.rs-strip i { opacity: 1; }
.rs-strip a { color: var(--rs-on-dark-grey); border-bottom-color: rgb(181 181 181 / .5); }
.rs-strip a:hover { color: #fff; border-bottom-color: #fff; }

.rs-head { background: var(--rs-dark); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.rs-head .rs-wrap { height: 76px; }
.rs-brand img { filter: none; width: 56px; }
.rs-brand__name { font-size: 20px; font-weight: 700; letter-spacing: -.3px; color: #fff; }
.rs-brand__tag { font-size: 12px; font-weight: 500; color: #8F8F8F; }
.rs-nav ul { gap: 28px; }
.rs-nav a { font-size: 15px; font-weight: 500; color: #D4D4D4; border-bottom: 0; padding: 0; transition: color .16s ease; }
.rs-nav a:hover { color: #fff; opacity: 1; }
.rs-nav .current-menu-item > a, .rs-nav .current_page_item > a,
.rs-nav .current-menu-parent > a, .rs-nav .current-menu-ancestor > a,
.rs-nav a[aria-current="page"] { color: #fff; font-weight: 600; }
.rs-head__cta.rs-btn { min-height: 44px; padding: 0 22px; font-size: 15px; }
.rs-burger { background: transparent; border-color: rgb(255 255 255 / .25); }
.rs-burger span { background: #fff; }
.rs-drawer { background: var(--rs-dark); }
.rs-drawer__brand span { font-size: 22px; font-weight: 700; }
.rs-drawer a { font-size: 24px; font-weight: 700; letter-spacing: -.4px; }
.rs-drawer__cta a { color: var(--rs-brand); }
@media (max-width: 620px) {
	.rs-head .rs-wrap { height: 60px; }
	.rs-brand img { width: 44px; }
	.rs-brand__name { font-size: 18px; }
}

/* ---------- buttons ---------- */
.rs-btn {
	background: var(--rs-brand); color: #fff; font-weight: 600; font-size: 16px;
	min-height: 52px; padding: 0 28px; border-radius: var(--rs-r-pill);
}
.rs-btn:hover { background: var(--rs-brand-hover); color: #fff; }
.rs-btn--sm { font-size: 15px; min-height: 46px; padding: 0 22px; }
.rs-btn--light { background: #fff; color: var(--rs-brand); }
.rs-btn--light:hover { background: var(--rs-brand-tint); color: var(--rs-brand-hover); }
.rs-btn--ghost { background: transparent; border-color: rgb(255 255 255 / .35); color: #fff; padding: 0 28px; }
.rs-btn--ghost:hover { background: rgb(255 255 255 / .1); color: #fff; }
.rs-btn--outline { background: #fff; color: var(--rs-ink); border-color: var(--rs-line-dash); }
.rs-btn--outline:hover { background: var(--rs-surface); color: var(--rs-ink); }
.rs-more { font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.rs-more:hover { text-decoration: underline; }

/* ---------- home hero ---------- */
.rs-hero { background: var(--rs-brand); color: #fff; }
.rs-hero::before, .rs-hero::after { display: none; }
.rs-hero .rs-wrap {
	padding-block: 88px 96px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px;
}
.rs-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.rs-hero__badge { background: none; border: 0; padding: 0; border-radius: 0; font-size: 14px; font-weight: 600; color: var(--rs-on-brand-2); }
.rs-hero h1 { margin: 0; font-size: clamp(42px, 5.4vw, 64px); line-height: 1.05; letter-spacing: -1.5px; max-width: 600px; }
.rs-hero .rs-lede { margin: 0; max-width: 500px; font-size: 18px; color: var(--rs-on-brand); }
.rs-hero__actions { margin: 0; }
.rs-hero__stats {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px;
	max-width: none; width: auto; justify-self: auto; padding-top: 8px;
	font-size: 14px; color: var(--rs-on-brand);
}
.rs-stat { background: none; border: 0; border-radius: 0; padding: 0; }
.rs-stat b { display: inline; font-family: var(--rs-font); font-size: 22px; font-weight: 700; color: #fff; margin-right: 6px; }
.rs-hero__fine { margin: 0; font-size: 14px; color: var(--rs-on-brand); }
.rs-hero__feature {
	display: flex; flex-direction: column; overflow: hidden;
	border-radius: var(--rs-r-lg); background: #fff; color: var(--rs-ink); text-decoration: none;
	box-shadow: 0 24px 60px rgb(10 20 60 / .25);
	transition: transform .2s ease;
}
.rs-hero__feature:hover { color: var(--rs-ink); transform: translateY(-2px); }
.rs-hero__feature .rs-card__body { padding: 22px 26px 26px; }
.rs-hero__feature .rs-card__tag { padding-inline: 26px; }
.rs-hero__feature .rs-card__title { font-size: 22px; line-height: 1.25; letter-spacing: -.3px; }
.rs-hero__feature .rs-card__text { font-size: 15px; }
.rs-hero :focus-visible { outline-color: #fff; }
@media (max-width: 900px) {
	.rs-hero .rs-wrap { grid-template-columns: 1fr; padding-block: 56px 64px; gap: 40px; }
	.rs-hero__feature { max-width: 560px; }
}
@media (max-width: 620px) {
	.rs-hero .rs-wrap { padding-block: 40px 48px; }
	.rs-hero__copy { gap: 18px; }
	.rs-hero .rs-lede { font-size: 16px; }
	.rs-hero__actions .rs-btn { min-height: 52px; }
	.rs-hero__stats { gap: 6px 20px; }
}

/* ---------- trust strip ---------- */
.rs-trust { border-bottom: 1px solid var(--rs-line); }
.rs-trust__item span { background: var(--rs-brand-tint); color: var(--rs-brand); border-radius: 50%; }
.rs-trust__item p { font-size: 14px; font-weight: 600; color: var(--rs-ink); }

/* ---------- sections ---------- */
.rs-section { padding-block: 88px 0; }
.rs-section:last-of-type { padding-bottom: 88px; }
.rs-section--paper { background: #fff; border-top: 0; padding-block: 88px 0; }
.rs-section--surface { background: var(--rs-surface); padding-block: 72px; margin-top: 88px; }
.rs-section--tint { background: var(--rs-brand-tint); padding-block: 88px; margin-top: 88px; }
.rs-section--flush { padding-top: 72px; }
.rs-section--qa { padding-bottom: 104px; }
.rs-section--tint + .rs-section, .rs-section--surface + .rs-section { padding-top: 88px; }

.rs-sec-head { max-width: 560px; margin: 0 0 40px; text-align: left; }
.rs-sec-head h1, .rs-sec-head h2 { margin: 10px 0 0; }
.rs-sec-head p { margin: 10px 0 0; font-size: 16px; color: var(--rs-muted); }
.rs-sec-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 32px; }
.rs-sec-head--split > div { max-width: 560px; }
.rs-sec-foot { text-align: left; font-size: 13px; color: var(--rs-muted); margin-top: 20px; }

/* ---------- cards ---------- */
.rs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 20px; }
.rs-card {
	display: flex; flex-direction: column; overflow: hidden; min-width: 0;
	background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-r);
	color: var(--rs-ink); text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}
.rs-card:hover { color: var(--rs-ink); box-shadow: var(--rs-shadow-hover); transform: translateY(-2px); }
.rs-card__media { display: block; aspect-ratio: 16 / 10; background: #E6EBF5; overflow: hidden; }
.rs-card__media img { width: 100%; height: 100%; object-fit: cover; }
.rs-card__media--logo { background: #fff; border-bottom: 1px solid var(--rs-line-2); }
.rs-card__media--logo img { object-fit: contain; padding: 18px; }
.rs-hero__feature .rs-card__media { aspect-ratio: 16 / 9; }
.rs-card__tag {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 10px 20px; font-size: 13px; font-weight: 600;
	background: var(--rs-brand-chip); color: var(--rs-brand);
}
.rs-card__tag > span:last-child:not(:first-child) { font-weight: 500; text-align: right; }
.rs-card__tag--ok  { background: var(--rs-ok-bg);  color: var(--rs-ok); }
.rs-card__tag--bad { background: var(--rs-bad-bg); color: var(--rs-bad); }
.rs-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1; }
.rs-card__title { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--rs-ink); }
.rs-card:hover .rs-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rs-card__text { font-size: 14px; line-height: 1.55; color: var(--rs-muted); }

/* ---------- operator group cards ---------- */
.rs-groups { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.rs-group { border-left: 1px solid var(--rs-line); border-radius: var(--rs-r); padding: 0; box-shadow: none; }
.rs-group:hover { box-shadow: var(--rs-shadow-hover); transform: translateY(-2px); }
.rs-group__top { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 24px; flex: 1; }
.rs-group__name { font-weight: 700; font-size: 19px; line-height: 1.2; color: var(--rs-ink); }
.rs-group__owner { font-size: 14px; color: var(--rs-muted); }
.rs-group .rs-card__tag { padding: 12px 24px; }

/* ---------- what is a sister site ---------- */
.rs-explain {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px;
}
.rs-explain__item {
	display: flex; flex-direction: column; gap: 0; overflow: hidden;
	background: #fff; border: 1px solid #DDE2F5; border-radius: var(--rs-r);
}
.rs-explain__num { padding: 10px 22px; background: var(--rs-brand); color: #fff; font-size: 13px; font-weight: 600; }
.rs-explain__body { padding: 22px 22px 26px; }
.rs-explain__item h3 { margin: 0; font-size: 18px; }
.rs-explain__item p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--rs-body); }

/* ---------- brand band (how we review) ---------- */
.rs-band {
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center;
	padding: 56px; border-radius: 24px; background: var(--rs-brand); color: #fff;
}
.rs-band > * { min-width: 0; }
.rs-band .rs-eyebrow { color: var(--rs-on-brand-2); }
.rs-band h2 { color: #fff; margin: 10px 0 0; }
.rs-band__main > p { margin: 14px 0 0; font-size: 17px; color: var(--rs-on-brand-2); }
.rs-band__crit {
	list-style: none; margin: 24px 0 0; padding: 0; max-width: 560px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); column-gap: 24px;
}
.rs-band__crit { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.rs-band__crit li { padding: 10px 0; border-top: 1px solid rgb(255 255 255 / .25); font-size: 15px; font-weight: 500; }
.rs-band__method { background: #fff; color: var(--rs-body); border-radius: var(--rs-r); padding: 24px 26px; }
.rs-band__method p { margin: 0; font-size: 15px; line-height: 1.6; }
.rs-band__method p + p { margin-top: 12px; }
.rs-band :focus-visible { outline-color: #fff; }
@media (max-width: 900px) { .rs-band { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; } }
@media (max-width: 620px) { .rs-band { padding: 28px 20px; border-radius: var(--rs-r-lg); gap: 24px; } }

/* ---------- team ---------- */
.rs-team { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 340px)); }
.rs-team__card { border-radius: var(--rs-r); box-shadow: none; }
.rs-team__card:hover { box-shadow: var(--rs-shadow-hover); transform: translateY(-2px); }
.rs-team__photo--empty, .rs-byline__photo--empty, .rs-profile__photo--empty { background: var(--rs-brand-tint); color: var(--rs-brand); font-weight: 700; }
.rs-team__go { border-bottom: 0; color: var(--rs-brand); font-size: 14px; font-weight: 600; }

/* ---------- long read + FAQ (home) ---------- */
.rs-qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 48px; align-items: start; }
.rs-qa__col { min-width: 0; }
.rs-qa__head { margin-bottom: 20px; }
.rs-qa__head h2 { margin: 8px 0 0; font-size: 30px; line-height: 1.15; letter-spacing: -.6px; }
.rs-qa__head p { margin: 6px 0 0; font-size: 15px; color: var(--rs-muted); }
.rs-home-body { font-size: 15px; }
.rs-home-body > * { max-width: none; }

/* Accordion rows: shared by the homepage long read and every FAQ. */
.rs-acc, .rs-faq__item {
	background: var(--rs-surface); border: 0; border-radius: var(--rs-r-md);
	padding: 0 20px; margin: 0 0 10px;
}
.rs-acc > summary, .rs-faq__item summary {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none;
	font-family: var(--rs-font); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--rs-ink);
}
.rs-acc > summary::-webkit-details-marker, .rs-faq__item summary::-webkit-details-marker { display: none; }
.rs-acc > summary::after, .rs-faq__item summary::after {
	content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
	border-right: 2.2px solid var(--rs-brand); border-bottom: 2.2px solid var(--rs-brand);
	transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.rs-acc[open] > summary::after, .rs-faq__item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.rs-faq__item summary:hover, .rs-acc > summary:hover { background: none; color: var(--rs-brand); }
.rs-acc__title, .rs-prose .rs-acc__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: 0; color: inherit; }
.rs-qa__title { margin: 8px 0 0; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.6px; color: var(--rs-ink); }
.rs-acc__body { padding: 0 0 18px; color: var(--rs-body); }
.rs-acc__body > :first-child { margin-top: 0; }
.rs-acc__body > :last-child { margin-bottom: 0; }
.rs-acc__body h3 { font-size: 16px; margin-top: 18px; }
.rs-faq { max-width: 820px; }
.rs-faq > h2 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.6px; }
.rs-faq__item[open] { border-color: transparent; }
.rs-faq__answer { padding: 0 0 18px; }
.rs-faq__answer p { font-size: 15px; color: var(--rs-body); }
.rs-faq--home { max-width: none; margin: 0; }

/* ---------- safety band + footer ---------- */
.rs-rg { background: var(--rs-dark); padding: 64px 0 0; }
.rs-rg .rs-wrap {
	background: var(--rs-dark-2); border-radius: var(--rs-r-lg);
	padding: 28px 32px; gap: 24px 40px;
	width: calc(100% - 2 * var(--rs-gutter)); max-width: calc(var(--rs-container) - 2 * var(--rs-gutter));
}
.rs-rg .rs-eyebrow { color: var(--rs-on-dark-grey); }
.rs-rg h2 { font-size: 28px; letter-spacing: -.6px; }
.rs-rg p { color: #D4D4D4; font-size: 15px; }
.rs-18 { font-family: var(--rs-font); font-weight: 700; font-size: 18px; border-color: #fff; }
.rs-chips a { background: transparent; border-color: rgb(255 255 255 / .3); font-weight: 600; }
.rs-foot { background: var(--rs-dark); color: var(--rs-on-dark-grey); border-top: 0; padding: 56px 0 32px; }
.rs-foot__brand span { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.rs-foot p { color: var(--rs-on-dark-grey); font-size: 14px; }
.rs-foot h2 { font-family: var(--rs-font); font-size: 15px; font-weight: 600; letter-spacing: 0; color: #fff; }
.rs-foot ul { gap: 8px; }
.rs-foot a { font-size: 14px; color: var(--rs-on-dark-grey); }
.rs-foot a:hover { color: #fff; opacity: 1; }
.rs-foot .rs-18 { border-color: #fff; }
.rs-foot__legal { border-top-color: rgb(255 255 255 / .1); color: #8F8F8F; font-size: 12px; }
/* Brand plus seven link columns: two even rows of four on wide screens, so the
   auto-fit grid does not leave one long row with a single orphan below it. */
@media (min-width: 760px) {
	.rs-foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 40px; }
}
/* On a phone, one column of 42 links ran past 2,500px. Two columns halve it;
   the brand block keeps the full width. */
@media (max-width: 759px) {
	.rs-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
	.rs-foot__cols > div:first-child { grid-column: 1 / -1; }
	.rs-foot a { line-height: 1.35; }
}
@media (max-width: 620px) {
	.rs-rg { padding-top: 40px; }
	.rs-rg .rs-wrap { padding: 22px 20px; }
}

/* ---------- inner-page hero band ---------- */
.rs-pagehero { background: var(--rs-brand); color: #fff; }
.rs-pagehero .rs-wrap { padding-block: 40px 64px; }
.rs-pagehero .rs-crumbs { font-family: var(--rs-font); font-size: 14px; color: var(--rs-on-brand-2); margin-bottom: 28px; }
.rs-pagehero .rs-crumbs a { color: var(--rs-on-brand-2); }
.rs-pagehero .rs-crumbs a:hover { color: #fff; }
.rs-pagehero .rs-crumbs > span:last-child { color: #fff; }
.rs-pagehero .rs-page-head { margin: 0; }
.rs-pagehero .rs-eyebrow { color: var(--rs-on-brand-2); margin-bottom: 14px; }
.rs-pagehero h1 { color: #fff; font-size: clamp(36px, 5vw, 58px); }
.rs-pagehero .rs-lede { color: var(--rs-on-brand); font-size: 18px; max-width: 640px; margin-top: 18px; }
.rs-pagehero .rs-lede a { color: #fff; }
.rs-pagehero .rs-meta { color: var(--rs-on-brand-2); margin: 16px 0 0; }
.rs-pagehero .rs-btn--outline { background: transparent; color: #fff; border-color: rgb(255 255 255 / .35); }
.rs-pagehero .rs-btn--outline:hover { background: rgb(255 255 255 / .1); color: #fff; }
.rs-pagehero :focus-visible { outline-color: #fff; }
.rs-pagehero + .rs-page { padding-top: 56px; }
@media (max-width: 620px) {
	.rs-pagehero .rs-wrap { padding-block: 24px 40px; }
	.rs-pagehero .rs-crumbs { margin-bottom: 18px; }
	.rs-pagehero .rs-lede { font-size: 16px; }
	.rs-pagehero + .rs-page { padding-top: 32px; }
}

/* ---------- inner pages ---------- */
.rs-crumbs { font-family: var(--rs-font); font-size: 14px; color: var(--rs-muted); }
.rs-crumbs a { color: var(--rs-muted); }
.rs-crumbs a:hover { color: var(--rs-brand); }
.rs-list-heading { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.8px; margin-top: 56px; }

/* Lists that are still plain rows (search results and older callers). */
.rs-list > a { border-radius: var(--rs-r); box-shadow: none; }
.rs-list > a:hover { box-shadow: var(--rs-shadow-hover); }
.rs-list h3 { font-size: 19px; }

/* ---------- article header shell ---------- */
.rs-ph { border: 1px solid var(--rs-line); border-radius: var(--rs-r-lg); box-shadow: none; }
.rs-ph__kicker { font-size: 14px; font-weight: 600; color: var(--rs-brand); }
.rs-ph__title { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -1px; }
.rs-ph__lede { color: var(--rs-muted); }
.rs-ph__shot { border-radius: var(--rs-r-md); }
.rs-ph__score { border-color: var(--rs-line); background: var(--rs-brand-tint); font-family: var(--rs-font); border-radius: var(--rs-r-md); }
.rs-ph__score b { font-weight: 700; color: var(--rs-brand); letter-spacing: -.5px; }
.rs-ph__score span { font-size: 13px; color: var(--rs-muted); }
.rs-ph__plate { background: var(--rs-brand); font-weight: 700; }
.rs-ph__meta { font-size: 13px; font-weight: 500; color: var(--rs-muted); background: var(--rs-surface); border-top-color: var(--rs-line-2); }
.rs-ph-facts { border-top: 1px solid var(--rs-line); }
.rs-ph-facts dt { font-size: 14px; font-weight: 500; color: var(--rs-muted); }
.rs-ph-facts dd { font-weight: 600; }
.rs-stars i { color: var(--rs-brand); }

/* Operator module: brand band with white cards. */
.rs-operator-links { background: var(--rs-brand); box-shadow: none; border-radius: 24px; }
.rs-operator-links .rs-eyebrow { color: var(--rs-on-brand-2); }
.rs-operator-links__head p { color: var(--rs-on-brand); }
.rs-operator-card { background: #fff; color: var(--rs-ink); border: 0; border-radius: var(--rs-r); }
a.rs-operator-card:hover { background: #fff; color: var(--rs-ink); border-color: transparent; box-shadow: 0 12px 32px rgb(10 20 60 / .2); }
.rs-operator-card--empty { background: rgb(255 255 255 / .12); color: #fff; border: 1px dashed rgb(255 255 255 / .4); }
.rs-operator-card__top .rs-meta { color: var(--rs-muted); }
.rs-operator-card__mark { background: var(--rs-brand-tint); color: var(--rs-brand); font-weight: 700; }
.rs-operator-card h3 { color: var(--rs-ink); font-size: 19px; }
.rs-operator-card p { color: var(--rs-muted); }
.rs-operator-card__go { color: var(--rs-brand); font-weight: 600; }
.rs-operator-card--empty h3, .rs-operator-card--empty p, .rs-operator-card--empty .rs-meta, .rs-operator-card--empty .rs-operator-card__go { color: #fff; }
.rs-operator-links__footer { font-weight: 600; }
.rs-operator-links :focus-visible { outline-color: #fff; }

/* Old left accent rules removed: hierarchy comes from the card, not a stripe. */
.rs-row, .rs-row:hover, .rs-review-head, .rs-licence, .rs-byline, .rs-profile { border-left-width: 1px; border-left-color: var(--rs-line); border-left-style: solid; }
.rs-row { border-radius: var(--rs-r); box-shadow: none; }
.rs-row:hover { box-shadow: var(--rs-shadow-hover); }
.rs-rank { background: var(--rs-brand); box-shadow: 0 0 0 4px var(--rs-brand-tint); font-family: var(--rs-font); font-weight: 700; font-size: 18px; }
.rs-row__bonus { font-weight: 700; letter-spacing: -.5px; font-size: clamp(22px, 2.6vw, 30px); }
.rs-licence--ok { background: var(--rs-ok-bg); border-color: transparent; }
.rs-licence--warn { background: var(--rs-bad-bg); border-color: transparent; }
.rs-licence--unknown { background: var(--rs-surface); border-color: transparent; }
.rs-licence__tag { font-weight: 600; }
.rs-licence h2 { font-size: 22px; letter-spacing: -.3px; }
.rs-score { font-family: var(--rs-font); }
.rs-score b { font-weight: 700; color: var(--rs-brand); }
.rs-scores__bar { height: 8px; background: var(--rs-line-2); }
.rs-scores__bar i { background: var(--rs-brand); }
.rs-scores__val { font-family: var(--rs-font); font-weight: 700; }
.rs-byline { border-radius: var(--rs-r-lg); background: var(--rs-surface); border-color: transparent; }
.rs-byline__id h2 { font-size: 20px; letter-spacing: -.3px; }
.rs-byline__id h2 a { color: var(--rs-ink); }
.rs-notice { border-style: solid; border-color: transparent; background: var(--rs-brand-tint); color: #23304D; }
.rs-tile, .rs-crit > div, .rs-compare-bar, .rs-pick { box-shadow: none; border-radius: var(--rs-r); }
.rs-tile:hover, .rs-pick:hover { box-shadow: var(--rs-shadow-hover); transform: translateY(-2px); }
.rs-icon { background: var(--rs-brand-tint); color: var(--rs-brand); }
.rs-tile__go { color: var(--rs-brand); font-weight: 600; }
.rs-pick__check { font-size: 13px; font-weight: 600; }
.rs-pick__check input { accent-color: var(--rs-brand); }
.rs-compare thead th { border-bottom-color: var(--rs-brand); }
.rs-compare thead a { font-size: 18px; letter-spacing: -.2px; }
.rs-compare tbody th { font-size: 13px; font-weight: 500; }
.rs-group__flag.is-gb { border-color: var(--rs-ok); color: var(--rs-ok); }
.page-numbers.current { background: var(--rs-brand); border-color: var(--rs-brand); }
.page-numbers:hover { border-color: var(--rs-brand); color: var(--rs-brand); }

/* ---------- prose ---------- */
.rs-prose { font-size: 17px; color: var(--rs-body); }
.rs-prose h2 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.8px; }
.rs-prose h3 { font-size: 20px; }
.rs-prose a { color: var(--rs-brand); text-decoration-thickness: 1px; }
.rs-prose a:hover { color: var(--rs-brand-hover); }
.rs-prose strong { color: var(--rs-ink); }
.rs-prose blockquote { border-left: 0; background: var(--rs-brand-tint); border-radius: var(--rs-r); padding: 18px 22px; color: #23304D; }

/* Tables: one rounded frame, tinted header, hairline rows. The scroll
   shadows from the base rules still apply on narrow screens. */
.rs-prose figure.wp-block-table { border: 1px solid var(--rs-line); border-radius: var(--rs-r); }
.rs-prose table, .rs-prose figure.wp-block-table > table { border: 0; border-radius: 0; font-size: 15px; }
.rs-prose thead th {
	background: var(--rs-surface); border-bottom: 1px solid var(--rs-line);
	font-size: 13px; font-weight: 600; color: var(--rs-muted); padding: 14px 20px;
}
.rs-prose th, .rs-prose td { padding: 14px 20px; border-bottom: 1px solid var(--rs-line-2); }
.rs-prose tbody tr:nth-child(even) { background: transparent; }
.rs-prose tbody td:first-child { font-weight: 600; color: var(--rs-ink); }
.rs-prose tbody th[scope="row"] { color: var(--rs-ink); font-weight: 600; }

/* ---------- table of contents ---------- */
.rs-toc { border-radius: var(--rs-r); background: var(--rs-surface); border-color: transparent; }
.rs-toc summary { font-size: 14px; font-weight: 600; color: var(--rs-ink); }
.rs-toc summary::after { border-color: var(--rs-brand); }
.rs-toc a { font-size: 14px; color: var(--rs-muted); border-left-color: var(--rs-line); }
.rs-toc a:hover { color: var(--rs-brand); border-left-color: var(--rs-line-dash); }
.rs-toc a[aria-current="location"] { color: var(--rs-brand); border-left-color: var(--rs-brand); }

/* ---------- forms, consent, focus ---------- */
.rs-form :is(input, select, textarea):focus-visible { outline-color: var(--rs-brand); }
.rs-consent { background: var(--rs-dark); }
.rs-consent .rs-btn { background: #fff; color: var(--rs-ink); border-color: #fff; min-height: 46px; }
.rs-consent .rs-btn--outline { background: transparent; color: #fff; border-color: rgb(255 255 255 / .5); }
:where(a, button, input, [tabindex], summary):focus-visible { outline: 2px solid var(--rs-brand); outline-offset: 3px; }
.rs-head :focus-visible, .rs-strip :focus-visible, .rs-rg :focus-visible, .rs-foot :focus-visible, .rs-drawer :focus-visible { outline-color: #fff; }

/* ---------- phones ---------- */
@media (max-width: 620px) {
	h1 { font-size: clamp(30px, 8.4vw, 40px); letter-spacing: -1px; }
	h2 { font-size: clamp(24px, 6.6vw, 30px); letter-spacing: -.6px; }
	.rs-section, .rs-section--paper { padding-top: 56px; }
	.rs-section:last-of-type, .rs-section--qa { padding-bottom: 56px; }
	.rs-section--tint, .rs-section--surface { padding-block: 56px; margin-top: 56px; }
	.rs-section--tint + .rs-section, .rs-section--surface + .rs-section { padding-top: 56px; }
	.rs-section--flush { padding-top: 48px; }
	.rs-sec-head { margin-bottom: 24px; }
	.rs-qa { gap: 40px; }
	.rs-qa__head h2, .rs-qa__title { font-size: 24px; }
	.rs-cards, .rs-groups { gap: 14px; }
	.rs-card__body { padding: 16px 18px; }
	.rs-card__tag { padding: 9px 18px; }
	.rs-group__top { padding: 18px; }
	.rs-acc, .rs-faq__item { padding: 0 16px; }
	.rs-prose { font-size: 16.5px; }
	.rs-prose th, .rs-prose td { padding: 12px 14px; }
	.rs-operator-links { border-radius: var(--rs-r-lg); }
}

/* ---------- polish ---------- */
/* Some tables carry an all-empty header row from the editor; on a tinted
   header it shows as a blank band. Collapse it (content is untouched). */
.rs-prose thead:not(:has(th:not(:empty), td:not(:empty))) { display: none; }
/* Hub and home bodies run full width for their tables, but paragraphs keep a
   readable line length. */
.rs-hub-body > :is(p, ul, ol, h2, h3, blockquote) { max-width: 78ch; }
/* Header CTA keeps its colour in the drawer and on hover over the dark bar. */
.rs-head .rs-btn:hover { color: #fff; }
/* Score box under the review header: brand number, quiet stars. */
.rs-ph__score .rs-stars { color: #CBD3E4; }
/* Mobile: the trust strip and section heads keep the new left alignment. */
@media (max-width: 620px) {
	.rs-sec-head--split { align-items: flex-start; }
	.rs-sec-head--split .rs-btn { width: 100%; }
	.rs-hero__feature .rs-card__body { padding: 18px 20px 22px; }
	.rs-hero__feature .rs-card__tag { padding-inline: 20px; }
	.rs-hero__feature .rs-card__title { font-size: 20px; }
}

/* ==========================================================================
   v3 round 2 (Luka's review, 2 Oct)
   ========================================================================== */

/* Numbered "What is a sister site" cards: the number is a full-width bar. */
.rs-explain__item { align-items: stretch; }
.rs-explain__num { display: block; width: 100%; }

/* Card image placeholder: pale plate, faint mark, no colour. */
.rs-card__media--empty { display: grid; place-items: center; background: var(--rs-surface); border-bottom: 1px solid var(--rs-line-2); }
.rs-card__media--empty img { width: 64px; height: auto; object-fit: contain; filter: invert(1); opacity: .08; }

/* Meet the team: centred heading and cards. */
.rs-sec-head--center { margin-inline: auto; text-align: center; }
.rs-team { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 320px)); justify-content: center; }

/* Header side boxes (logo plate, score) are dark, not white panels. */
.rs-ph__shot { background: var(--rs-dark); border-color: var(--rs-dark); }
.rs-ph__shot--logo { background: var(--rs-dark); padding: 16px; }
.rs-ph__score { background: var(--rs-dark); border-color: var(--rs-dark); }
.rs-ph__score b { color: #fff; }
.rs-ph__score span { color: var(--rs-on-dark-grey); }
.rs-ph__score .rs-stars { color: #3A3A3A; }
.rs-ph__score .rs-stars i { color: #fff; }
.rs-ph__plate-note { color: var(--rs-muted); }

/* Sponsored offers band: flat black, sentence case, one gold button. */
.rs-offerband {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 32px;
	padding: 26px 40px; background: var(--rs-dark); color: #fff;
	background-image: radial-gradient(520px 200px at 100% 50%, rgb(240 180 41 / .10), transparent 70%);
}
.rs-offerband__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.rs-offerband__label {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 10px; border: 1px solid rgb(255 255 255 / .2); border-radius: var(--rs-r-pill);
	font-size: 12px; font-weight: 600; color: var(--rs-on-dark-grey);
}
.rs-offerband__head { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.15; letter-spacing: -.4px; color: #fff; }
.rs-offerband__head b { color: #F0B429; font-weight: 700; }
.rs-offerband__sub { font-size: 15px; color: #D4D4D4; }
.rs-offerband__features { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.rs-offerband__features li { position: relative; padding-left: 14px; font-size: 13px; color: var(--rs-on-dark-grey); }
.rs-offerband__features li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: #F0B429; }
.rs-offerband__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 52px; padding: 0 28px; border-radius: var(--rs-r-pill);
	background: #F0B429; color: #111; font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;
	transition: background .16s ease, transform .16s ease;
}
.rs-offerband__btn:hover { background: #F6C651; color: #111; transform: translateY(-1px); }
.rs-offerband__btn:focus-visible { outline: 2px solid #F0B429; outline-offset: 3px; }
@media (max-width: 900px) { .rs-offerband { padding: 22px 28px; } }
@media (max-width: 640px) {
	.rs-offerband { grid-template-columns: 1fr; padding: 20px 18px; }
	.rs-offerband__btn { width: 100%; }
}

/* Compare picker: one quiet row under the article. */
.rs-compare-bar {
	display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 12px 16px;
	margin: 48px 0 0; padding: 16px 20px; background: var(--rs-surface); border: 0; border-radius: var(--rs-r);
}
.rs-compare-bar__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--rs-brand); }
.rs-compare-bar label { font-size: 15px; line-height: 1.4; }
.rs-compare-bar__controls { display: flex; flex-wrap: nowrap; gap: 8px; }
.rs-compare-bar select { flex: 1; min-height: 46px; background: #fff; border-radius: var(--rs-r-pill); padding: 0 16px; }
.rs-compare-bar .rs-btn { flex: none; }
@media (max-width: 760px) {
	.rs-compare-bar { grid-template-columns: auto minmax(0, 1fr); }
	.rs-compare-bar__controls { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
	.rs-compare-bar__controls { flex-wrap: wrap; }
	.rs-compare-bar .rs-btn { width: 100%; }
}

/* Pages without the contents column: one centred reading column, header
   card and author box included, instead of a left column and empty space. */
.rs-page:has(.rs-article--solo) > .rs-wrap { max-width: calc(860px + 2 * var(--rs-gutter)); }
.rs-article--solo .rs-prose > * { max-width: none; }
.rs-article--solo .rs-faq, .rs-page:has(.rs-article--solo) .rs-byline { max-width: none; }
/* Byline and compare bar line up with the article column when there is one. */
@media (min-width: 1080px) {
	.rs-article:not(.rs-article--solo) ~ .rs-compare-bar,
	.rs-article:not(.rs-article--solo) ~ .rs-byline { max-width: calc(100% - 258px - var(--rs-7)); }
}
.rs-byline { max-width: none; }
/* Hub bodies now carry a contents column; a short one is centred instead. */
.rs-hub-article { margin-bottom: var(--rs-7); }
.rs-hub-article .rs-hub-body { margin: 0; }
.rs-hub-body--solo { max-width: 860px; margin-inline: auto; }
.rs-hub-body > :is(p, ul, ol, h2, h3, blockquote) { max-width: none; }
/* Logo artwork usually ships on its own white plate; round it so it sits in the dark frame as a tile. */
.rs-ph__shot--logo img { border-radius: 10px; }
/* Single column fills its centred 860px track (prose and form included). */
.rs-article--solo .rs-prose, .rs-page:has(.rs-article--solo) .rs-form { max-width: none; }
.rs-article.rs-article--solo { grid-template-columns: minmax(0, 1fr); }
/* FAQ, compare bar and byline share the article column width. */
.rs-article .rs-faq { max-width: none; }

/* ==========================================================================
   v3 round 3: black article header, blue glowing offer band
   ========================================================================== */
.rs-ph { background: #0B0B0D; border-color: #0B0B0D; color: #fff; overflow: hidden; }
.rs-ph__kicker { color: #8EA2FF; }
.rs-ph__title { color: #fff; }
.rs-ph__lede { color: #B4B8C2; }
.rs-ph__shot, .rs-ph__shot--logo, .rs-ph__score { background: #17181C; border: 1px solid #26282E; }
.rs-ph__score .rs-stars { color: #3A3D45; }
.rs-ph__plate-note { color: #9AA0AC; }
.rs-ph__meta { background: #121317; color: #9AA0AC; border-top-color: #1F2126; }
.rs-ph__meta a { color: #C9D1FF; }
.rs-ph-facts { border-top-color: #1F2126; }
.rs-ph-facts__row { border-bottom-color: #1F2126; }
.rs-ph-facts dt { color: #8C929E; }
.rs-ph-facts dd { color: #F2F3F5; }
.rs-ph-facts dd a { color: #C9D1FF; }
.rs-ph .rs-breadcrumbs, .rs-ph .rs-chip { color: #B4B8C2; }

/* Offer band: the blue casino artwork, glow behind the headline, glowing button. */
.rs-offerband {
	position: relative; isolation: isolate; overflow: hidden;
	padding: 34px 40px;
	background: #2A44C9 url("../img/offer-bg.webp") center / cover no-repeat;
	border-block: 1px solid rgb(140 162 255 / .35);
}
@media (max-width: 800px) { .rs-offerband { background-image: url("../img/offer-bg-800.webp"); } }
/* Dim the artwork behind the copy so the text stays readable. */
.rs-offerband::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(60% 120% at 22% 50%, rgb(14 26 110 / .82), rgb(14 26 110 / .35) 60%, transparent 85%),
		linear-gradient(90deg, rgb(10 20 90 / .55), rgb(10 20 90 / .1) 70%);
}
/* Soft moving light across the band. */
.rs-offerband::after {
	content: ""; position: absolute; z-index: -1; top: -60%; left: -30%; width: 45%; height: 220%;
	background: linear-gradient(100deg, transparent, rgb(255 255 255 / .14), transparent);
	transform: rotate(8deg); animation: rs-offer-sheen 6s ease-in-out infinite;
}
@keyframes rs-offer-sheen { 0%, 55% { left: -50%; } 100% { left: 130%; } }
.rs-offerband__label { color: #DCE3FF; border-color: rgb(220 227 255 / .35); background: rgb(10 20 90 / .35); backdrop-filter: blur(4px); }
.rs-offerband__head { color: #fff; text-shadow: 0 2px 18px rgb(10 20 90 / .6); }
.rs-offerband__head b { color: #fff; text-shadow: 0 0 18px rgb(140 170 255 / .95), 0 0 42px rgb(110 140 255 / .6); }
.rs-offerband__sub { color: #DCE3FF; }
.rs-offerband__features li { color: #C8D2FF; }
.rs-offerband__features li::before { background: #9DB2FF; box-shadow: 0 0 8px #9DB2FF; }
.rs-offerband__btn {
	background: #fff; color: #2238B8;
	box-shadow: 0 0 0 1px rgb(255 255 255 / .6), 0 0 24px rgb(150 175 255 / .75), 0 10px 30px rgb(10 20 90 / .5);
	animation: rs-offer-pulse 2.8s ease-in-out infinite;
}
.rs-offerband__btn:hover { background: #fff; color: #1A2C99; box-shadow: 0 0 0 1px #fff, 0 0 36px rgb(170 195 255 / .95), 0 12px 32px rgb(10 20 90 / .55); }
.rs-offerband__btn:focus-visible { outline-color: #fff; }
@keyframes rs-offer-pulse {
	0%, 100% { box-shadow: 0 0 0 1px rgb(255 255 255 / .6), 0 0 18px rgb(150 175 255 / .55), 0 10px 30px rgb(10 20 90 / .5); }
	50% { box-shadow: 0 0 0 1px rgb(255 255 255 / .8), 0 0 34px rgb(150 175 255 / .95), 0 10px 30px rgb(10 20 90 / .5); }
}
@media (prefers-reduced-motion: reduce) { .rs-offerband::after, .rs-offerband__btn { animation: none; } }
@media (max-width: 640px) { .rs-offerband { padding: 24px 18px; } }
/* Star row must be as wide as its five glyphs, or the % fill overshoots. */
.rs-ph__score .rs-stars { flex: none; width: max-content; }
.rs-ph__score { flex-wrap: wrap; }
.rs-ph__score::after { content: ""; flex-basis: 100%; order: 2; }
.rs-ph__score .rs-stars { order: 3; }

/* "More from CasinoFigure": black cards inside the blue box, matching the article header. */
.rs-operator-card { background: #0B0B0D; border-color: #0B0B0D; color: #fff; }
.rs-operator-card:hover { background: #141519; border-color: #2A2D35; box-shadow: 0 10px 28px rgb(8 14 60 / .35); }
.rs-operator-card h3 { color: #fff; }
.rs-operator-card p { color: #B4B8C2; }
.rs-operator-card .rs-meta { color: #8C929E; }
.rs-operator-card__go { color: #A9B8FF; }
.rs-operator-card:hover .rs-operator-card__go { color: #fff; }
.rs-operator-card__mark { background: #17181C; border: 1px solid #26282E; color: #C9D1FF; }
a.rs-operator-card:hover { background: #141519; color: #fff; border-color: #2A2D35; }
.rs-operator-card__top .rs-meta { color: #8C929E; }
.rs-operator-card--empty { background: rgb(11 11 13 / .5); border-color: rgb(255 255 255 / .25); }

/* Mobile header side: logo tile and score box as one tidy row of equal height. */
@media (max-width: 640px) {
	.rs-ph__side { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: stretch; }
	.rs-ph__shot, .rs-ph__shot--logo { height: 84px; width: auto; aspect-ratio: auto; padding: 8px; border-radius: 14px; }
	.rs-ph__shot--logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; background: #fff; }
	.rs-ph__score {
		display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; column-gap: 4px; row-gap: 4px;
		height: 84px; min-height: 0; padding: 0 18px; align-content: center; border-radius: 14px;
	}
	.rs-ph__score::after { display: none; }
	.rs-ph__score b { font-size: 30px; line-height: 1; }
	.rs-ph__score span { font-size: 14px; }
	.rs-ph__score .rs-stars { grid-column: 3; justify-self: end; align-self: center; font-size: 15px; }
	.rs-ph__score--count { grid-template-columns: auto 1fr; column-gap: 8px; }
}
@media (max-width: 360px) {
	.rs-ph__score { grid-template-columns: auto 1fr; }
	.rs-ph__score .rs-stars { grid-column: 1 / -1; justify-self: start; }
}

/* Homepage hero: Luka's blue casino artwork on its own layer, softly blurred
   so the low-resolution source reads as a backdrop. Only the layer is blurred;
   the copy and card sit above it (.rs-hero .rs-wrap has z-index 1). The layer
   overhangs by 24px so the blur does not fade in at the edges. */
.rs-hero { background: #3450D1; isolation: isolate; }
.rs-hero::before {
	display: block; content: ""; position: absolute; inset: -24px; z-index: 0; pointer-events: none;
	background: url("../img/hero-bg.webp") center / cover no-repeat;
	filter: blur(5px) saturate(1.05);
}
.rs-hero::after { display: none; }
/* Stacked layout: a centre crop would show only the plain middle, so show the
   right edge (roulette, gift) at the top and the left edge (cards, chip) at the bottom. */
@media (max-width: 1000px) {
	.rs-hero::before {
		background:
			url("../img/hero-bg-1000.webp") right top / auto 300px no-repeat,
			url("../img/hero-bg-1000.webp") left bottom / auto 300px no-repeat;
		filter: blur(4px);
	}
}

/* Hub page header (archives, group pages): Luka's news-and-casino artwork on a
   blurred layer, same approach as the homepage hero. Copy sits above it. */
.rs-pagehero { position: relative; overflow: hidden; isolation: isolate; }
.rs-pagehero::before {
	content: ""; position: absolute; inset: -24px; z-index: -1; pointer-events: none;
	background: url("../img/hub-bg.webp") center / cover no-repeat;
	filter: blur(5px);
}
/* A soft wash on the left keeps breadcrumbs and the headline clear of the newspaper art. */
.rs-pagehero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(90deg, rgb(52 80 209 / .55), rgb(52 80 209 / .15) 45%, transparent 65%);
}
@media (max-width: 1000px) {
	.rs-pagehero::before {
		background: url("../img/hub-bg-1000.webp") right center / auto 100% no-repeat;
		filter: blur(4px);
	}
	.rs-pagehero::after { background: linear-gradient(90deg, rgb(52 80 209 / .7), rgb(52 80 209 / .35)); }
}


/* ---------- offer band: a little more alive ----------
   Slow drift on the artwork, a light sweep across the numbers, a few
   twinkling sparks and a nudging arrow. All of it stops for reduced motion. */
.rs-offerband { background-size: 112% auto; animation: rs-band-drift 22s ease-in-out infinite alternate; }
@keyframes rs-band-drift { from { background-position: 0% 40%; } to { background-position: 100% 60%; } }
@media (max-width: 1000px) { .rs-offerband { background-size: cover; animation: none; } }
.rs-offerband__copy, .rs-offerband__btn { position: relative; z-index: 1; }
.rs-offerband__head b {
	background: linear-gradient(100deg, #fff 0%, #fff 40%, #C9D6FF 47%, #fff 50%, #9DB2FF 53%, #fff 60%, #fff 100%);
	background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
	animation: rs-band-shine 5.5s ease-in-out infinite;
}
@keyframes rs-band-shine { 0%, 45% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }
.rs-offerband__spark {
	position: absolute; z-index: 0; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
	background: #fff; box-shadow: 0 0 10px 3px rgb(170 195 255 / .85); opacity: 0;
	animation: rs-band-spark 4.2s ease-in-out infinite;
}
.rs-offerband__spark--1 { left: 46%; top: 22%; animation-delay: .2s; }
.rs-offerband__spark--2 { left: 58%; top: 68%; animation-delay: 1.4s; width: 4px; height: 4px; }
.rs-offerband__spark--3 { left: 71%; top: 30%; animation-delay: 2.3s; }
.rs-offerband__spark--4 { left: 84%; top: 78%; animation-delay: 3.1s; width: 4px; height: 4px; }
.rs-offerband__spark--5 { left: 38%; top: 80%; animation-delay: 2.8s; width: 3px; height: 3px; }
@keyframes rs-band-spark {
	0%, 100% { opacity: 0; transform: scale(.4) translateY(0); }
	35% { opacity: 1; transform: scale(1) translateY(-6px); }
	60% { opacity: .2; transform: scale(.7) translateY(-12px); }
}
.rs-offerband__features li::before { animation: rs-band-dot 3s ease-in-out infinite; }
.rs-offerband__features li:nth-child(2)::before { animation-delay: .5s; }
.rs-offerband__features li:nth-child(3)::before { animation-delay: 1s; }
@keyframes rs-band-dot { 0%, 100% { box-shadow: 0 0 4px #9DB2FF; } 50% { box-shadow: 0 0 12px 2px #C9D6FF; } }
.rs-offerband__arrow { display: inline-block; animation: rs-band-nudge 1.8s ease-in-out infinite; }
@keyframes rs-band-nudge { 0%, 60%, 100% { transform: translateX(0); } 75% { transform: translateX(4px); } }
.rs-offerband__btn:hover .rs-offerband__arrow { animation: none; transform: translateX(4px); }
@media (max-width: 640px) { .rs-offerband__spark--1, .rs-offerband__spark--5 { display: none; } }

/* ---------- compact offer pill ----------
   Appears at the bottom once the band has scrolled out of view; hidden again
   near the footer, while the cookie notice is open, or after the reader
   closes it. */
.rs-offerpill {
	position: fixed; z-index: 55; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 24px);
	padding: 6px 6px 6px 14px; border-radius: 999px; color: #fff;
	background: linear-gradient(135deg, #1A2A9C, #2E49D0 60%, #3E5BE6);
	box-shadow: 0 0 0 1px rgb(160 180 255 / .35), 0 0 28px rgb(80 110 255 / .45), 0 14px 34px rgb(5 10 50 / .45);
	transform: translate(-50%, 140%); opacity: 0;
	transition: transform .5s cubic-bezier(.16, 1.2, .3, 1), opacity .3s ease;
}
.rs-offerpill[hidden] { display: none; }
.rs-offerpill.is-on { transform: translate(-50%, 0); opacity: 1; }
.rs-offerpill__dot {
	width: 8px; height: 8px; border-radius: 50%; flex: none; margin-right: 6px; background: #C9D6FF;
	box-shadow: 0 0 0 0 rgb(201 214 255 / .7); animation: rs-pill-ping 2s ease-out infinite;
}
@keyframes rs-pill-ping { 0% { box-shadow: 0 0 0 0 rgb(201 214 255 / .7); } 80%, 100% { box-shadow: 0 0 0 10px rgb(201 214 255 / 0); } }
.rs-offerpill__link { display: flex; align-items: center; gap: 12px; min-width: 0; color: #fff; text-decoration: none; }
.rs-offerpill__text { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rs-offerpill__text b { font-weight: 800; text-shadow: 0 0 12px rgb(190 205 255 / .9); }
.rs-offerpill__btn {
	flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 18px; border-radius: 999px;
	background: #fff; color: #2238B8; font-size: 15px; font-weight: 700;
	box-shadow: 0 0 16px rgb(170 195 255 / .7); transition: transform .16s ease;
}
.rs-offerpill__link:hover .rs-offerpill__btn { transform: translateX(2px); }
.rs-offerpill__close {
	flex: none; width: 36px; height: 36px; margin-left: 2px; border: 0; border-radius: 50%; cursor: pointer;
	display: grid; place-items: center; background: rgb(255 255 255 / .1); color: #DCE3FF; font-size: 20px; line-height: 1;
	transition: background .16s ease, color .16s ease;
}
.rs-offerpill__close:hover { background: rgb(255 255 255 / .2); color: #fff; }
.rs-offerpill a:focus-visible, .rs-offerpill__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 999px; }
@media (max-width: 520px) {
	.rs-offerpill { left: 12px; right: 12px; transform: translateY(140%); padding-left: 12px; }
	.rs-offerpill.is-on { transform: translateY(0); }
	.rs-offerpill__link { flex: 1; justify-content: space-between; gap: 8px; }
	.rs-offerpill__text { font-size: 14px; }
	.rs-offerpill__btn { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.rs-offerband, .rs-offerband__head b, .rs-offerband__spark, .rs-offerband__features li::before, .rs-offerband__arrow, .rs-offerpill__dot { animation: none; }
	.rs-offerband__spark { display: none; }
	.rs-offerband__head b { color: #fff; background: none; }
	.rs-offerpill { transition: opacity .2s ease; }
}


/* =====================================================================
   Mobile pass (3 Oct 2026)
   ===================================================================== */

/* ---------- tables: a tinted panel with a dark header, so a table reads
   as its own object on a white page, on a phone most of all. The cover
   gradients of the scroll shadows must match the panel colour. */
.rs-prose figure.wp-block-table {
	--rs-tbl: #F3F5FC;
	background-color: var(--rs-tbl);
	background-image:
		linear-gradient(to right, var(--rs-tbl), rgb(243 245 252 / 0)),
		linear-gradient(to left,  var(--rs-tbl), rgb(243 245 252 / 0)),
		radial-gradient(farthest-side at 0 50%,    rgb(10 10 40 / .18), rgb(10 10 40 / 0)),
		radial-gradient(farthest-side at 100% 50%, rgb(10 10 40 / .18), rgb(10 10 40 / 0));
	border: 1px solid #DCE2F3; overflow-x: auto;
}
.rs-prose thead th {
	background: #15161B; color: #fff; border-bottom: 0;
	font-size: 13px; font-weight: 600; letter-spacing: .1px;
}
.rs-prose th, .rs-prose td { border-bottom: 1px solid #E1E6F4; }
.rs-prose tbody tr:nth-child(even) { background: rgb(52 80 209 / .045); }
.rs-prose tbody tr:last-child > * { border-bottom: 0; }
.rs-prose tbody tr:hover { background: rgb(52 80 209 / .08); }
@media (max-width: 640px) {
	.rs-prose th, .rs-prose td { padding: 11px 14px; }
	.rs-prose table, .rs-prose figure.wp-block-table > table { font-size: 14.5px; }
}

/* ---------- mobile drawer: slides in instead of popping up ---------- */
.rs-drawer {
	transform: translateX(100%);
	transition: transform .42s cubic-bezier(.22, .9, .25, 1), visibility 0s linear .42s;
	visibility: hidden;
}
.rs-drawer.is-open { transform: none; visibility: visible; transition: transform .42s cubic-bezier(.22, .9, .25, 1); }
.rs-drawer li, .rs-drawer__cta {
	opacity: 0; transform: translateX(24px);
	transition: opacity .3s ease, transform .4s cubic-bezier(.22, .9, .25, 1);
}
.rs-drawer.is-open li, .rs-drawer.is-open .rs-drawer__cta { opacity: 1; transform: none; }
.rs-drawer.is-open li:nth-child(1) { transition-delay: .08s; }
.rs-drawer.is-open li:nth-child(2) { transition-delay: .12s; }
.rs-drawer.is-open li:nth-child(3) { transition-delay: .16s; }
.rs-drawer.is-open li:nth-child(4) { transition-delay: .20s; }
.rs-drawer.is-open li:nth-child(5) { transition-delay: .24s; }
.rs-drawer.is-open li:nth-child(6) { transition-delay: .28s; }
.rs-drawer.is-open .rs-drawer__cta { transition-delay: .3s; }
.rs-drawer a:active { color: #C9D6FF; }
@media (prefers-reduced-motion: reduce) {
	.rs-drawer, .rs-drawer.is-open { transform: none; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; }
	.rs-drawer.is-open { opacity: 1; transition: opacity .2s ease; }
	.rs-drawer li, .rs-drawer__cta { transform: none; transition: none; opacity: 1; }
}

/* ---------- "Scroll to list" on hub heroes: a small pill with an arrow,
   and on a phone it follows the introduction instead of wedging itself
   between the heading and the text. */
.rs-pagehero .rs-jump {
	gap: 8px; padding: 10px 16px 10px 18px; font-size: 14.5px;
	background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .28); color: #fff;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rs-pagehero .rs-jump::after {
	content: ""; width: 7px; height: 7px; margin-top: -4px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
	transition: transform .2s ease;
}
.rs-pagehero .rs-jump:hover { background: rgb(255 255 255 / .22); color: #fff; }
.rs-pagehero .rs-jump:hover::after { transform: translateY(3px) rotate(45deg); }
@media (max-width: 720px) {
	.rs-pagehero .rs-page-head { display: flex; flex-direction: column; align-items: flex-start; }
	.rs-pagehero .rs-page-head__top { display: contents; }
	.rs-pagehero .rs-page-head .rs-eyebrow { order: 0; }
	.rs-pagehero .rs-page-head h1 { order: 1; }
	.rs-pagehero .rs-page-head .rs-lede { order: 2; margin-top: 14px; }
	.rs-pagehero .rs-jump { order: 3; margin-top: 18px; padding: 9px 14px 9px 16px; font-size: 14px; }
}

@media (max-width: 620px) {
	/* Tighter page gutter: the cards were boxed in twice, by the gutter and
	   by their own padding. */
	:root { --rs-gutter: 16px; }

	/* Home hero: two buttons on one row, a calmer heading and a shorter
	   feature card. */
	.rs-hero h1 { font-size: 36px; letter-spacing: -1px; }
	.rs-hero__actions { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
	.rs-hero__actions .rs-btn { min-height: 48px; padding: 12px 10px; font-size: 15px; white-space: nowrap; }
	.rs-hero__stats { gap: 4px 18px; }
	.rs-stat b { font-size: 20px; }
	.rs-hero__feature .rs-card__media { aspect-ratio: 21 / 9; }
	.rs-hero__feature .rs-card__media--empty { display: none; }
	.rs-hero__feature .rs-card__body { padding: 16px 18px 18px; }
	.rs-hero__feature .rs-card__tag { padding-inline: 18px; }
	.rs-hero__feature .rs-card__title { font-size: 19px; }
	.rs-hero__feature .rs-card__text { font-size: 14.5px; }

	/* Review list rows: text full width, Compare tucked underneath. */
	.rs-pick { flex-direction: column; gap: 0; }
	.rs-pick__link { padding: 16px 16px 8px; }
	.rs-pick__link h3 { font-size: 18px; line-height: 1.3; }
	.rs-pick__link p { font-size: 14px; line-height: 1.5; }
	.rs-pick__check { padding: 4px 16px 14px; font-size: 12.5px; }
	.rs-pick__check input { width: 16px; height: 16px; }
	.rs-list { gap: 10px; }

	/* Review / sister header card. */
	.rs-ph__main { padding: 18px 16px 16px; gap: 14px; }
	.rs-ph__title { font-size: 27px; letter-spacing: -.6px; }
	.rs-ph__copy { gap: 10px; }
	.rs-ph__copy .rs-lede, .rs-ph .rs-lede { font-size: 15.5px; }
	.rs-ph__meta, .rs-offer { padding-left: 16px; padding-right: 16px; }
	.rs-ph-facts dt { padding: 10px 16px 2px; }
	.rs-ph-facts dd { padding: 0 16px 10px; }
	.rs-offerband { padding: 18px 16px; }

	/* Compare picker: one compact strip, select and button side by side. */
	.rs-compare-bar { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 32px; padding: 14px; }
	.rs-compare-bar__icon { display: none; }
	.rs-compare-bar label { font-size: 13.5px; line-height: 1.4; }
	.rs-compare-bar__controls { grid-column: auto; flex-wrap: nowrap; }
	.rs-compare-bar select { min-height: 42px; font-size: 14px; padding: 0 12px; }
	.rs-compare-bar .rs-btn { width: auto; min-height: 42px; padding: 0 16px; font-size: 14px; }

	/* "More from CasinoFigure": compact rows, logo beside the name. */
	.rs-operator-links { padding: 18px 14px 16px; margin-bottom: var(--rs-6); }
	.rs-operator-links__head { margin-bottom: 14px; gap: 6px; }
	.rs-operator-links__head h2 { font-size: 24px; margin-top: 4px; }
	.rs-operator-links__head p { font-size: 13.5px; }
	.rs-operator-links__grid { gap: 8px; }
	.rs-operator-card {
		display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 1px;
		align-items: center; padding: 11px 12px; min-height: 0;
	}
	.rs-operator-card__top { display: contents; }
	.rs-operator-card__mark { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; }
	.rs-operator-card__top .rs-meta { grid-column: 2; grid-row: 1; text-align: left; font-size: 11.5px; line-height: 1.3; }
	.rs-operator-card h3 { grid-column: 2; grid-row: 2; margin: 0; font-size: 16.5px; line-height: 1.25; }
	.rs-operator-card p { grid-column: 2; grid-row: 3; font-size: 12.5px; line-height: 1.35; }
	.rs-operator-card__go {
		grid-column: 3; grid-row: 1 / span 3; margin: 0; padding: 0;
		position: relative; display: block; align-self: center;
		width: 30px; height: 30px; border-radius: 50%; background: rgb(255 255 255 / .1);
		font-size: 0; line-height: 0; color: transparent; overflow: hidden;
	}
	/* Absolutely centred: the hidden "→" text node was taking a grid row of
	   its own and pushing the chevron below the middle of the circle. The
	   -65% offsets the rotated corner so the chevron reads as centred. */
	.rs-operator-card__go::after {
		content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
		border-top: 2px solid #fff; border-right: 2px solid #fff;
		transform: translate(-65%, -50%) rotate(45deg);
	}
	.rs-operator-card--empty .rs-operator-card__go { display: none; }
	a.rs-operator-card:hover { transform: none; }
	.rs-operator-links__footer { margin-top: 12px; font-size: 13px; }
}

/* Logo plates on cards: plate colour fills the media box, square logo centred. */
.rs-card__media--plate { border-bottom-color: transparent; }
.rs-card__media--plate img { padding: 0; object-fit: contain; }

/* Contact form: Turnstile box sits above the Send button; Send is disabled until it passes. */
.rs-form__verify { margin: 0 0 var(--rs-4); min-height: 65px; }
.rs-form .rs-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }