/* =========================================================================
   Clearstake — the whole front end.

   Dark, dense and deliberately loud where it counts: the bonus, the score and
   the button. Replaces the earlier editorial stylesheet rather than layering
   over it, so there is one place to reason about colour and spacing.

   Contrast note: the bright accents carry DARK text, not white. Orange with
   near-black text is 8.2:1 — vivid and readable, which white on orange is not.
   ========================================================================= */

/* --- Fonts --------------------------------------------------------------- */

@font-face {
	font-family: "Inter var";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-variable.woff2") format("woff2");
}
@font-face {
	font-family: "Inter var";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-italic-variable.woff2") format("woff2");
}

/* --- Tokens -------------------------------------------------------------- */

:root {
	--cs-bg: #0a0d1c;
	--cs-bg-2: #0d1226;
	--cs-panel: #141a30;
	--cs-panel-2: #1a2140;
	--cs-line: #28304f;
	--cs-line-soft: #1e2542;

	--cs-text: #eef1f8;
	--cs-muted: #98a3c0;
	--cs-dim: #7b87a8;

	--cs-cta: #ff8a00;
	--cs-cta-2: #ff6a1a;
	--cs-ink: #1a1005;

	--cs-gold: #ffc531;
	--cs-gold-2: #f0a91c;
	--cs-violet: #7c5cff;
	--cs-violet-2: #a78bfa;
	--cs-green: #22c55e;
	--cs-green-2: #4ade80;
	--cs-red: #f87171;

	--cs-font: "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--cs-shell: 1240px;
	--cs-gutter: clamp(0.9rem, 3.5vw, 2rem);
	--cs-r: 14px;
	--cs-r-lg: 20px;
	--cs-r-pill: 999px;

	--cs-glow-violet: 0 0 0 1px rgba(124, 92, 255, 0.35), 0 12px 40px -14px rgba(124, 92, 255, 0.55);
	--cs-glow-gold: 0 0 0 1px rgba(255, 197, 49, 0.45), 0 14px 44px -16px rgba(255, 197, 49, 0.4);
	--cs-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--cs-bg);
	background-image:
		radial-gradient(1100px 500px at 8% -6%, rgba(124, 92, 255, 0.16), transparent 62%),
		radial-gradient(900px 460px at 96% 2%, rgba(255, 138, 0, 0.1), transparent 60%);
	background-repeat: no-repeat;
	color: var(--cs-text);
	font-family: var(--cs-font);
	font-size: 16px;
	line-height: 1.6;
	font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cs-font);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin: 0 0 0.5em;
	color: #fff;
	text-wrap: balance;
}

p, ul, ol, dl, figure, table, blockquote { margin: 0 0 1rem; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--cs-violet-2); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: #c4b5fd; }

:focus-visible { outline: 3px solid var(--cs-gold); outline-offset: 2px; border-radius: 4px; }

hr { border: 0; border-top: 1px solid var(--cs-line); margin: 2rem 0; }
code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.cs-shell { width: min(100% - (var(--cs-gutter) * 2), var(--cs-shell)); margin-inline: auto; }
.cs-icon { flex: none; vertical-align: -0.15em; }

.cs-skip-link {
	position: absolute; left: 50%; transform: translate(-50%, -150%);
	z-index: 100; background: var(--cs-gold); color: var(--cs-ink);
	padding: 0.7rem 1.2rem; border-radius: 0 0 12px 12px;
	font-weight: 800; text-decoration: none; transition: transform 0.18s ease;
}
.cs-skip-link:focus { transform: translate(-50%, 0); color: var(--cs-ink); }

.cs-lead { font-size: 1.1rem; line-height: 1.55; color: var(--cs-muted); max-width: 62ch; }
.cs-note { font-size: 0.85rem; color: var(--cs-dim); }

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

.cs-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	width: 100%;
	padding: 0.85rem 1.2rem;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(180deg, var(--cs-cta) 0%, var(--cs-cta-2) 100%);
	color: var(--cs-ink);
	font: inherit;
	font-size: 0.98rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 10px 26px -12px rgba(255, 122, 0, 0.9);
	transition: transform 0.14s cubic-bezier(.34,1.56,.64,1), box-shadow 0.14s ease, filter 0.14s ease;
}
.cs-cta::after {
	content: "";
	position: absolute; inset: 0 auto 0 -60%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-18deg);
	transition: left 0.5s ease;
}
.cs-cta:hover { color: var(--cs-ink); text-decoration: none; filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 16px 32px -12px rgba(255,122,0,0.95); }
.cs-cta:hover::after { left: 115%; }
.cs-cta:active { transform: translateY(0); }
.cs-cta--lg { width: auto; padding: 1.05rem 1.9rem; font-size: 1.08rem; border-radius: 14px; }
.cs-cta--sm { width: auto; padding: 0.5rem 0.9rem; font-size: 0.84rem; border-radius: 9px; }

.cs-cta--off {
	display: flex; width: 100%; gap: 0.5rem; align-items: flex-start;
	padding: 0.7rem 0.85rem; border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px dashed var(--cs-line);
	color: var(--cs-muted); font-size: 0.83rem; font-weight: 500;
	line-height: 1.4; text-align: left; box-shadow: none;
}
.cs-cta--off::after { display: none; }

.cs-cta-block { display: grid; gap: 0.4rem; }
.cs-cta__legal { margin: 0; font-size: 0.7rem; color: var(--cs-dim); text-align: center; }
.cs-cta__terms { margin: 0; font-size: 0.75rem; text-align: center; }
.cs-cta__terms a { color: var(--cs-dim); }

.cs-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
	padding: 0.8rem 1.25rem; border-radius: 12px;
	border: 1px solid var(--cs-line); background: rgba(255, 255, 255, 0.05);
	color: var(--cs-text); font: inherit; font-size: 0.95rem; font-weight: 700;
	text-decoration: none; cursor: pointer;
	transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.14s ease;
}
.cs-button:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--cs-violet); color: #fff; text-decoration: none; transform: translateY(-1px); }
.cs-button--ghost { background: transparent; }
.cs-button--quiet { background: rgba(255,255,255,0.06); }

.cs-link-arrow { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.cs-link-arrow:hover { text-decoration: underline; }
.cs-link-arrow .cs-icon { transition: transform 0.14s ease; }
.cs-link-arrow:hover .cs-icon { transform: translateX(3px); }

/* --- Score, stars, medals, tags ------------------------------------------ */

.cs-score {
	display: inline-flex; align-items: baseline; gap: 0.06rem;
	padding: 0.32rem 0.6rem; border-radius: 11px;
	background: linear-gradient(180deg, var(--cs-gold) 0%, var(--cs-gold-2) 100%);
	color: var(--cs-ink); font-variant-numeric: tabular-nums; line-height: 1;
	box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 8px 20px -12px rgba(255,197,49,0.9);
}
.cs-score b { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.04em; }
.cs-score i { font-style: normal; font-size: 0.68rem; font-weight: 800; opacity: 0.7; }
.cs-score--lg { padding: 0.5rem 0.85rem; border-radius: 14px; }
.cs-score--lg b { font-size: 2.1rem; }
.cs-score--sm { padding: 0.2rem 0.42rem; border-radius: 8px; }
.cs-score--sm b { font-size: 0.95rem; }
.cs-score--fair { background: linear-gradient(180deg, #8f9ab8 0%, #77829f 100%); box-shadow: none; color: #0d1120; }
.cs-score--weak { background: linear-gradient(180deg, #6f7893 0%, #5b6480 100%); box-shadow: none; color: #f2f4fa; }

.cs-score__band { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-dim); }

.cs-stars { display: inline-flex; gap: 1px; color: var(--cs-gold); }
.cs-star { fill: currentColor; }
.cs-star--empty { fill: rgba(255, 255, 255, 0.16); }
.cs-star--half { fill: url(#csh1); color: var(--cs-gold); }
.cs-star--half path { fill: var(--cs-gold); opacity: 0.55; }

.cs-medal {
	display: inline-grid; place-items: center;
	width: 30px; height: 30px; border-radius: 10px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--cs-line);
	color: var(--cs-muted);
	font-size: 0.92rem; font-weight: 900; font-variant-numeric: tabular-nums;
	flex: none;
}
.cs-medal--gold   { background: linear-gradient(180deg, var(--cs-gold) 0%, var(--cs-gold-2) 100%); color: var(--cs-ink); border-color: transparent; }
.cs-medal--silver { background: linear-gradient(180deg, #d8dee9 0%, #aab4c6 100%); color: #131a2c; border-color: transparent; }
.cs-medal--bronze { background: linear-gradient(180deg, #e0a06a 0%, #c07f47 100%); color: #1d1206; border-color: transparent; }

.cs-tag {
	display: inline-flex; align-items: center;
	padding: 0.22rem 0.55rem; border-radius: 8px;
	border: 1px solid; font-size: 0.71rem; font-weight: 800;
	letter-spacing: 0.01em; white-space: nowrap; cursor: help;
}
.cs-tag--gold  { background: rgba(255, 197, 49, 0.14); border-color: rgba(255, 197, 49, 0.45); color: var(--cs-gold); }
.cs-tag--green { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.42); color: var(--cs-green-2); }
.cs-tag--teal  { background: rgba(124, 92, 255, 0.16); border-color: rgba(124, 92, 255, 0.45); color: var(--cs-violet-2); }

.cs-badge {
	display: inline-flex; align-items: center; padding: 0.2rem 0.5rem;
	border-radius: 7px; border: 1px solid; font-size: 0.66rem; font-weight: 800;
	letter-spacing: 0.06em; text-transform: uppercase;
}
.cs-badge--ok     { background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.4); color: var(--cs-green-2); }
.cs-badge--warn   { background: rgba(255,138,0,0.14); border-color: rgba(255,138,0,0.42); color: #ffb45e; }
.cs-badge--muted  { background: rgba(255,255,255,0.06); border-color: var(--cs-line); color: var(--cs-dim); }
.cs-badge--sample { background: rgba(124,92,255,0.16); border-color: rgba(124,92,255,0.45); color: var(--cs-violet-2); }

/* --- Operator tile ------------------------------------------------------- */

.cs-logo {
	display: grid; place-items: center; flex: none; overflow: hidden;
	border-radius: 12px; background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--cs-line);
}
.cs-logo--sm { width: 40px; height: 40px; }
.cs-logo--md { width: 52px; height: 52px; }
.cs-logo--lg { width: 62px; height: 62px; border-radius: 14px; }
.cs-logo__img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cs-logo--generated {
	background: linear-gradient(145deg, var(--a) 0%, var(--b) 100%);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.9);
}
.cs-logo--generated span {
	font-size: 1.15rem; font-weight: 900; letter-spacing: -0.03em;
	color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.cs-logo--lg.cs-logo--generated span { font-size: 1.35rem; }

/* --- Header -------------------------------------------------------------- */

.cs-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(10, 13, 28, 0.86);
	border-bottom: 1px solid var(--cs-line-soft);
	backdrop-filter: saturate(140%) blur(10px);
}
.cs-header__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 64px; padding-block: 0.6rem; }
.cs-header__bar { position: relative; }

.cs-brand { margin: 0; }
.cs-brand__link { text-decoration: none; display: inline-block; }
.cs-brand__image { max-height: 36px; width: auto; }
.cs-brand__mark {
	display: inline-flex; align-items: baseline; gap: 0.06rem;
	position: relative; padding-left: 0.75rem;
	/* A longer wordmark must not wrap into the nav; it shrinks instead. */
	font-size: clamp(1rem, 1.6vw, 1.35rem); font-weight: 900; letter-spacing: -0.04em; color: #fff;
	white-space: nowrap;
}
.cs-brand__lead, .cs-brand__tail { white-space: nowrap; }
.cs-brand__rule {
	position: absolute; left: 0; top: 0.16em; bottom: 0.2em; width: 4px; border-radius: 3px;
	background: linear-gradient(180deg, var(--cs-gold) 0%, var(--cs-cta) 100%);
}
.cs-brand__tail { background: linear-gradient(90deg, var(--cs-gold), var(--cs-cta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-brand__mark--footer { font-size: 1.2rem; }

.cs-menu-toggle {
	display: none; margin-left: auto; align-items: center; gap: 0.4rem;
	background: rgba(255,255,255,0.07); border: 1px solid var(--cs-line); color: #fff;
	border-radius: 10px; padding: 0.5rem 0.8rem; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.cs-menu-toggle__icon { display: inline-flex; }
.cs-menu-toggle__icon .cs-icon--close { display: none; }
.cs-menu-toggle[aria-expanded="true"] .cs-icon--menu { display: none; }
.cs-menu-toggle[aria-expanded="true"] .cs-icon--close { display: inline; }

.cs-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.4rem); }
.cs-menu { display: flex; align-items: center; gap: clamp(0.4rem, 1.2vw, 1rem); list-style: none; margin: 0; padding: 0; }
.cs-menu a {
	display: inline-block; padding: 0.45rem 0.7rem; border-radius: 9px;
	color: var(--cs-muted); text-decoration: none; white-space: nowrap;
	font-size: 0.92rem; font-weight: 700;
	transition: color 0.14s ease, background-color 0.14s ease;
}
.cs-menu a:hover { color: #fff; background: rgba(255,255,255,0.07); }
.cs-menu .current-menu-item > a, .cs-menu .current_page_item > a { color: var(--cs-gold); background: rgba(255,197,49,0.12); }
.cs-menu .sub-menu { display: none; }
.cs-nav__extras { display: flex; align-items: center; gap: 0.6rem; }
.cs-header__campaign-note { margin: 0 0 0 auto; font-size: 0.88rem; }

.cs-search__field {
	display: flex; align-items: center; gap: 0.4rem;
	background: rgba(255,255,255,0.06); border: 1px solid var(--cs-line);
	border-radius: 10px; padding: 0.2rem 0.25rem 0.2rem 0.6rem; color: var(--cs-dim);
}
.cs-search__field input[type="search"] {
	background: transparent; border: 0; color: #fff; font: inherit; font-size: 0.86rem;
	padding: 0.32rem 0; width: 7.5rem; min-width: 0;
}
.cs-search__field input::placeholder { color: var(--cs-dim); }
.cs-search__field input:focus { outline: none; }
.cs-search__field:focus-within { outline: 3px solid var(--cs-gold); outline-offset: 2px; }
.cs-search__submit {
	background: rgba(255,255,255,0.1); border: 0; color: #fff; border-radius: 8px;
	padding: 0.3rem 0.65rem; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.cs-search__submit:hover { background: var(--cs-violet); }

/* --- Country controls ---------------------------------------------------- */

.cs-country { margin: 0; }
.cs-country__label { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-dim); margin-bottom: 0.35rem; }
.cs-country__controls { display: flex; gap: 0.4rem; }
.cs-country__select {
	flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.9rem; font-weight: 600;
	padding: 0.5rem 0.6rem; border-radius: 10px;
	border: 1px solid var(--cs-line); background: var(--cs-panel); color: #fff;
}
.cs-country__select option { color: #fff; background: var(--cs-panel); }
.cs-country__current { margin: 0.45rem 0 0; font-size: 0.82rem; color: var(--cs-dim); }
.cs-country__note { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--cs-dim); }
.cs-country--compact { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cs-country--compact .cs-country__label { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.cs-country--compact .cs-country__select { max-width: 9.5rem; font-size: 0.84rem; padding-block: 0.42rem; }
.cs-country--compact .cs-country__note { display: none; }
.cs-country--panel { background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: var(--cs-r); padding: 1rem 1.1rem; }

.cs-country-chip {
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.4rem 0.8rem; border-radius: var(--cs-r-pill);
	border: 1px solid var(--cs-line); background: rgba(255,255,255,0.05);
	font-size: 0.83rem; color: var(--cs-muted); white-space: nowrap;
}
.cs-country-chip .cs-icon { color: var(--cs-violet-2); }
.cs-country-chip strong { color: #fff; }

/* --- Hero ---------------------------------------------------------------- */

.cs-hero { padding-block: clamp(2rem, 4.5vw, 3.5rem); }
.cs-hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.cs-hero__kicker {
	display: inline-flex; align-items: center; gap: 0.4rem;
	margin-bottom: 0.9rem; padding: 0.35rem 0.8rem; border-radius: var(--cs-r-pill);
	border: 1px solid rgba(255,197,49,0.35); background: rgba(255,197,49,0.1);
	color: var(--cs-gold); font-size: 0.76rem; font-weight: 800;
}
.cs-hero__title { font-size: clamp(2.3rem, 5.2vw, 3.9rem); max-width: 16ch; margin-bottom: 0.8rem; }
.cs-hero__title em { font-style: normal; background: linear-gradient(90deg, var(--cs-gold), var(--cs-cta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-hero__lead { font-size: 1.05rem; color: var(--cs-muted); max-width: 54ch; }
.cs-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; align-items: center; }
.cs-trustrow { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.cs-trustrow li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--cs-muted); }
.cs-trustrow .cs-icon { color: var(--cs-green-2); flex: none; }

.cs-hero__pick {
	position: relative; background: linear-gradient(180deg, var(--cs-panel-2) 0%, var(--cs-panel) 100%);
	border-radius: var(--cs-r-lg); border: 1px solid rgba(255,197,49,0.4);
	padding: 2.3rem 1.4rem 1.4rem; box-shadow: var(--cs-glow-gold);
}
.cs-hero__pick-flag {
	position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 0.3rem;
	margin: 0; padding: 0.35rem 1rem 0.35rem 1.3rem;
	border-radius: var(--cs-r-lg) 0 12px 0;
	background: linear-gradient(90deg, var(--cs-gold), var(--cs-cta));
	color: var(--cs-ink); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
}
.cs-hero__pick-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.cs-hero__pick-head > div { flex: 1; min-width: 0; }
.cs-hero__pick-title { font-size: 1.15rem; margin: 0 0 0.15rem; }
.cs-hero__pick-product { margin: 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cs-dim); }
.cs-hero__pick-headline {
	font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 900; line-height: 1.1;
	letter-spacing: -0.03em; color: #fff; margin-bottom: 0.9rem;
}
/* A verdict is a sentence, not a headline figure — it needs reading size. */
.cs-hero__pick-headline--sentence {
	font-size: 1.02rem; font-weight: 600; line-height: 1.45; letter-spacing: 0;
	color: var(--cs-text);
}
.cs-hero__pick-facts { list-style: none; margin: 0 0 1rem; padding: 0.75rem 0; border-block: 1px solid var(--cs-line); display: grid; gap: 0.4rem; }
.cs-hero__pick-facts li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.86rem; }
.cs-hero__pick-facts span { color: var(--cs-dim); }
.cs-hero__pick-facts b { color: #fff; font-variant-numeric: tabular-nums; }

/* --- Sections ------------------------------------------------------------ */

.cs-main { display: block; }
.cs-section { padding-block: clamp(1.75rem, 4vw, 3rem); }
.cs-section--offers { background: linear-gradient(180deg, rgba(124,92,255,0.07), transparent 40%); }
.cs-section--products { background: rgba(255, 255, 255, 0.015); border-block: 1px solid var(--cs-line-soft); }
.cs-section__title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.35rem; }
.cs-section__lead { color: var(--cs-muted); max-width: 60ch; font-size: 0.95rem; }
.cs-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.cs-section__action { margin: 0; }
.cs-two-col { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }

.cs-offers__head { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cs-offers__heading { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.cs-offers__note { margin-top: 1rem; font-size: 0.82rem; color: var(--cs-dim); }

/* --- The offer row ------------------------------------------------------- */

.cs-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.cs-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(210px, 245px);
	gap: 1.25rem;
	align-items: center;
	padding: 1.1rem 1.2rem;
	border-radius: var(--cs-r-lg);
	border: 1px solid var(--cs-line);
	background: linear-gradient(180deg, var(--cs-panel-2) 0%, var(--cs-panel) 100%);
	box-shadow: var(--cs-shadow);
	transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.cs-row:hover { border-color: rgba(124, 92, 255, 0.5); transform: translateY(-2px); }
.cs-row--top { border-color: rgba(255, 197, 49, 0.55); box-shadow: var(--cs-glow-gold); padding-top: 1.9rem; }
.cs-row--expired, .cs-row--unavailable, .cs-row--unverified { opacity: 0.78; }

.cs-row__flag {
	position: absolute; top: 0; left: 0; margin: 0;
	display: inline-flex; align-items: center; gap: 0.3rem;
	padding: 0.28rem 0.85rem 0.28rem 1.2rem;
	border-radius: var(--cs-r-lg) 0 12px 0;
	background: linear-gradient(90deg, var(--cs-gold), var(--cs-cta));
	color: var(--cs-ink); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
}

.cs-row__brand { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.cs-row__name { min-width: 0; }
.cs-row__name h3 { font-size: 1.02rem; margin: 0 0 0.2rem; letter-spacing: -0.02em; }
.cs-row__name h3 a { color: #fff; text-decoration: none; }
.cs-row__name h3 a:hover { color: var(--cs-gold); }
.cs-row__product { margin: 0.2rem 0 0; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-dim); }

.cs-row__offer { min-width: 0; }
.cs-row__headline {
	margin: 0 0 0.3rem;
	font-size: clamp(1.35rem, 2.3vw, 1.85rem);
	font-weight: 900; line-height: 1.08; letter-spacing: -0.035em; color: #fff;
}
.cs-row__value { margin: 0 0 0.6rem; font-size: 0.88rem; color: var(--cs-muted); }
.cs-row__badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.7rem; padding: 0; }

.cs-row__facts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.cs-row__facts > div {
	display: flex; align-items: baseline; gap: 0.35rem;
	padding: 0.3rem 0.6rem; border-radius: 9px;
	background: rgba(255, 255, 255, 0.05); border: 1px solid var(--cs-line-soft);
}
.cs-row__facts dt { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cs-dim); }
.cs-row__facts dd { margin: 0; font-size: 0.88rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

.cs-row__action { display: grid; gap: 0.55rem; justify-items: stretch; }
.cs-row__score { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cs-row__flags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; justify-content: center; }

.cs-row__foot {
	grid-column: 1 / -1;
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem;
	padding-top: 0.75rem; margin-top: 0.1rem;
	border-top: 1px solid var(--cs-line-soft);
	font-size: 0.78rem; color: var(--cs-dim);
}
.cs-row__terms summary { cursor: pointer; font-weight: 700; color: var(--cs-violet-2); list-style: none; }
.cs-row__terms summary::-webkit-details-marker { display: none; }
.cs-row__terms summary::before { content: "▸ "; }
.cs-row__terms[open] summary::before { content: "▾ "; }
.cs-row__terms ul { margin: 0.4rem 0 0; padding-left: 1.05rem; color: var(--cs-muted); }
.cs-row__terms li { margin-bottom: 0.2rem; line-height: 1.4; }
.cs-row__exclusion { color: #ffb45e; }
.cs-row__where { display: inline-flex; align-items: center; gap: 0.3rem; }
.cs-row__review { margin-left: auto; font-weight: 700; }

/* --- Filters, empty states ----------------------------------------------- */

.cs-filters { background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: var(--cs-r); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.cs-filters__title { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-dim); margin-bottom: 0.8rem; }
.cs-filters__row { display: flex; flex-wrap: wrap; gap: 0.8rem 1.1rem; align-items: flex-end; }
.cs-filters__field { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.cs-filters__field label { font-size: 0.74rem; font-weight: 700; color: var(--cs-dim); }
.cs-filters__field select {
	font: inherit; font-size: 0.88rem; font-weight: 600; padding: 0.45rem 0.6rem;
	border-radius: 10px; border: 1px solid var(--cs-line); background: var(--cs-panel-2); color: #fff; min-width: 10.5rem;
}
.cs-filters__field select option { background: var(--cs-panel-2); color: #fff; }
.cs-filters__field--check { flex-direction: row; align-items: center; align-self: flex-end; padding-bottom: 0.4rem; }
.cs-filters__field--check label { display: flex; gap: 0.4rem; align-items: center; font-weight: 600; color: var(--cs-text); font-size: 0.85rem; }
.cs-filters__actions { margin: 0; display: flex; align-items: center; gap: 0.7rem; }
.cs-filters__reset { font-size: 0.84rem; }
.cs-filters__count { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--cs-dim); }

.cs-empty { background: var(--cs-panel); border: 1px dashed var(--cs-line); border-radius: var(--cs-r-lg); padding: clamp(1.3rem, 3vw, 2rem); max-width: 46rem; }
.cs-empty__title { font-size: 1.35rem; margin-bottom: 0.5rem; }
.cs-empty__list { padding-left: 1.05rem; color: var(--cs-muted); }
.cs-empty__list li { margin-bottom: 0.4rem; }
.cs-empty__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }

/* --- Disclosure, method, responsible ------------------------------------- */

.cs-disclosure--inline {
	display: flex; align-items: flex-start; gap: 0.5rem;
	background: rgba(255, 255, 255, 0.04); border: 1px solid var(--cs-line);
	border-left: 3px solid var(--cs-violet); border-radius: 10px;
	padding: 0.65rem 0.9rem; font-size: 0.82rem; line-height: 1.45;
	color: var(--cs-muted); margin-bottom: 1rem;
}
.cs-disclosure--inline .cs-icon { color: var(--cs-violet-2); margin-top: 0.1rem; }
.cs-disclosure:not(.cs-disclosure--inline) { background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: var(--cs-r); padding: 1.2rem 1.3rem; }
.cs-disclosure__title { font-size: 1.1rem; }

.cs-method { background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: var(--cs-r-lg); padding: clamp(1.3rem, 3vw, 1.9rem); }
.cs-method__title { font-size: 1.4rem; }
.cs-method__body { color: var(--cs-muted); font-size: 0.94rem; }
.cs-method__points { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 0.7rem; }
.cs-method__points li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; color: var(--cs-muted); }
.cs-method__points .cs-icon { color: var(--cs-green-2); margin-top: 0.18rem; }

.cs-responsible { background: rgba(124, 92, 255, 0.08); border: 1px solid rgba(124, 92, 255, 0.28); border-radius: var(--cs-r-lg); padding: clamp(1.2rem, 3vw, 1.6rem); }
.cs-responsible__title { display: flex; align-items: center; gap: 0.45rem; font-size: 1.05rem; margin-bottom: 0.6rem; }
.cs-responsible__title .cs-icon { color: var(--cs-violet-2); }
.cs-responsible p { font-size: 0.88rem; color: var(--cs-muted); }
.cs-responsible__none { font-size: 0.85rem; color: var(--cs-dim); }
.cs-responsible__more { margin-top: 0.8rem; font-size: 0.86rem; }
.cs-resources { list-style: none; margin: 0.9rem 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 0.45rem; }
.cs-resources__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.55rem; padding: 0.5rem 0.7rem; background: rgba(255,255,255,0.05); border-radius: 9px; font-size: 0.85rem; }
.cs-resources__country { font-size: 0.72rem; color: var(--cs-dim); }
.cs-resources__phone { margin-left: auto; font-weight: 800; color: #fff; white-space: nowrap; overflow-wrap: anywhere; }

.cs-picker-panel { background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: var(--cs-r-lg); padding: clamp(1.2rem, 3vw, 1.6rem); }
.cs-picker-panel__title { display: flex; align-items: center; gap: 0.45rem; font-size: 1.1rem; margin-bottom: 0.5rem; }
.cs-picker-panel__title .cs-icon { color: var(--cs-violet-2); }
.cs-picker-panel p { font-size: 0.88rem; color: var(--cs-muted); margin-bottom: 0.9rem; }
.cs-picker-panel .cs-country--panel { border: 0; padding: 0; background: transparent; }

/* --- Product cards ------------------------------------------------------- */

.cs-products { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.cs-product-card {
	display: grid; grid-template-areas: "icon go" "title title" "blurb blurb" "count count";
	grid-template-columns: 1fr auto; gap: 0.3rem; height: 100%;
	background: linear-gradient(180deg, var(--cs-panel-2), var(--cs-panel));
	border: 1px solid var(--cs-line); border-radius: var(--cs-r-lg);
	padding: 1.2rem 1.25rem; text-decoration: none; color: inherit;
	transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.cs-product-card:hover { transform: translateY(-3px); border-color: rgba(124,92,255,0.55); box-shadow: var(--cs-glow-violet); color: inherit; text-decoration: none; }
.cs-product-card__icon {
	grid-area: icon; display: inline-grid; place-items: center; width: 44px; height: 44px;
	border-radius: 12px; background: linear-gradient(145deg, var(--cs-violet), #5b3fd6); color: #fff; margin-bottom: 0.5rem;
}
.cs-product-card__go { grid-area: go; color: var(--cs-dim); align-self: center; }
.cs-product-card__title { grid-area: title; font-size: 1.25rem; font-weight: 900; letter-spacing: -0.03em; color: #fff; }
.cs-product-card__blurb { grid-area: blurb; font-size: 0.88rem; color: var(--cs-muted); line-height: 1.45; }
.cs-product-card__count { grid-area: count; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--cs-line-soft); font-size: 0.8rem; font-weight: 800; color: var(--cs-gold); }
.cs-product-card:hover .cs-product-card__go { color: var(--cs-violet-2); }

/* --- Comparison table ---------------------------------------------------- */

.cs-table-wrap { overflow: auto; max-width: 100%; contain: paint; border: 1px solid var(--cs-line); border-radius: var(--cs-r-lg); background: var(--cs-panel); }
.cs-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 760px; }
.cs-table thead th {
	position: sticky; top: 0; background: var(--cs-panel-2); color: var(--cs-dim);
	font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
	text-align: left; padding: 0.7rem 0.9rem; white-space: nowrap; border-bottom: 1px solid var(--cs-line);
}
.cs-table tbody td, .cs-table tbody th { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--cs-line-soft); vertical-align: middle; text-align: left; color: var(--cs-muted); }
.cs-table tbody tr:last-child td, .cs-table tbody tr:last-child th { border-bottom: 0; }
.cs-table tbody tr:hover { background: rgba(124, 92, 255, 0.07); }
.cs-table__rank { width: 2.4rem; font-weight: 900; color: var(--cs-dim); font-variant-numeric: tabular-nums; }
.cs-table__operator { font-weight: 800; }
.cs-table__operator a { color: #fff; text-decoration: none; }
.cs-table__operator a:hover { color: var(--cs-gold); }
.cs-table__operator span { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-dim); }
.cs-table__offer { max-width: 22rem; color: var(--cs-text); font-weight: 600; }
.cs-table td strong { color: var(--cs-green-2); }
.cs-table__go { text-align: right; white-space: nowrap; }
.cs-table__detail { font-size: 0.82rem; color: var(--cs-dim); }
.cs-table__row--inactive { opacity: 0.6; }
.cs-table__note { margin: 0.8rem 0 0; font-size: 0.78rem; color: var(--cs-dim); }

/* --- Scorecard ----------------------------------------------------------- */

.cs-scorecard { background: linear-gradient(180deg, var(--cs-panel-2), var(--cs-panel)); border: 1px solid var(--cs-line); border-radius: var(--cs-r-lg); padding: 1.2rem 1.3rem; }
.cs-scorecard__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
.cs-scorecard__band { margin: 0; font-size: 1.05rem; font-weight: 900; color: #fff; }
.cs-scorecard__note { margin: 0; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-dim); }
.cs-scorecard__rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 0.75rem; }
.cs-scorecard__rows li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label points" "bar bar" "why why"; gap: 0.22rem 0.5rem; align-items: center; }
.cs-scorecard__label { grid-area: label; font-size: 0.84rem; color: var(--cs-text); }
.cs-scorecard__points { grid-area: points; font-size: 0.84rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.cs-scorecard__points i { font-style: normal; font-weight: 500; color: var(--cs-dim); }
.cs-scorecard__bar { grid-area: bar; display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.cs-scorecard__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cs-gold), var(--cs-cta)); }
.cs-scorecard__why { grid-area: why; font-size: 0.74rem; color: var(--cs-dim); line-height: 1.35; }
.cs-scorecard__method { margin: 1rem 0 0; font-size: 0.82rem; }

/* --- Sticky CTA ---------------------------------------------------------- */

.cs-sticky-cta {
	display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
	padding: 0.55rem 0 calc(0.55rem + env(safe-area-inset-bottom, 0px));
	background: rgba(13, 18, 38, 0.97); border-top: 1px solid var(--cs-line);
	backdrop-filter: blur(8px);
}
.cs-sticky-cta__inner { display: flex; align-items: center; gap: 0.6rem; }
.cs-sticky-cta__meta { flex: 1; min-width: 0; }
.cs-sticky-cta__meta b { display: block; font-size: 0.85rem; color: #fff; }
.cs-sticky-cta__meta span { display: block; font-size: 0.72rem; color: var(--cs-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-sticky-cta .cs-cta { width: auto; flex: none; padding: 0.65rem 1.1rem; font-size: 0.88rem; }

/* --- Pages, prose, cards ------------------------------------------------- */

.cs-page { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2.5rem, 5vw, 4rem); }
.cs-breadcrumbs { margin-bottom: 1.1rem; font-size: 0.8rem; }
.cs-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cs-breadcrumbs li { display: flex; align-items: center; gap: 0.3rem; color: var(--cs-dim); }
.cs-breadcrumbs li + li::before { content: "/"; color: var(--cs-line); }
.cs-breadcrumbs a { color: var(--cs-dim); text-decoration: none; }
.cs-breadcrumbs a:hover { color: var(--cs-violet-2); }
.cs-breadcrumbs [aria-current="page"] { color: var(--cs-text); font-weight: 600; display: inline-block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

.cs-page__head { max-width: 56rem; margin-bottom: 1.5rem; }
.cs-page__title { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 0.5rem; }
.cs-page__meta { font-size: 0.8rem; color: var(--cs-dim); margin-top: 0.8rem; }
.cs-page__search { margin-top: 1.1rem; max-width: 26rem; }
.cs-page__method, .cs-page__table, .cs-page__body { margin-top: 2.5rem; }

.cs-prose { max-width: 44rem; color: var(--cs-muted); font-size: 1rem; }
.cs-prose--narrow { max-width: 38rem; }
.cs-prose h2 { font-size: 1.5rem; margin-top: 2rem; }
.cs-prose h3 { font-size: 1.2rem; margin-top: 1.6rem; }
.cs-prose h4 { font-size: 1rem; margin-top: 1.3rem; }
.cs-prose p, .cs-prose li { line-height: 1.7; }
.cs-prose strong { color: var(--cs-text); }
.cs-prose ul, .cs-prose ol { padding-left: 1.2rem; }
.cs-prose li { margin-bottom: 0.4rem; }
.cs-prose li::marker { color: var(--cs-violet-2); }
.cs-prose blockquote { margin: 1.5rem 0; padding: 0.2rem 0 0.2rem 1.1rem; border-left: 3px solid var(--cs-violet); color: var(--cs-text); font-size: 1.05rem; }
.cs-prose table { width: 100%; border-collapse: collapse; font-size: 0.9rem; display: block; overflow-x: auto; }
.cs-prose th, .cs-prose td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--cs-line-soft); }
.cs-prose th { font-weight: 800; color: #fff; background: var(--cs-panel-2); }
.cs-prose figcaption { font-size: 0.8rem; color: var(--cs-dim); margin-top: 0.4rem; }
.cs-prose a { color: var(--cs-violet-2); }

.cs-keypoints { background: var(--cs-panel); border: 1px solid var(--cs-line); border-left: 3px solid var(--cs-gold); border-radius: var(--cs-r); padding: 1.1rem 1.3rem; margin-block: 1.5rem; }
.cs-keypoints h2 { font-size: 1rem; margin-top: 0; letter-spacing: 0; }
.cs-placeholder { background: rgba(255,138,0,0.14); border-bottom: 1px dashed rgba(255,138,0,0.5); color: #ffb45e; padding: 0 0.25em; }
.cs-placeholder-note, .cs-placeholder-block {
	display: block; background: rgba(255,138,0,0.1); border: 1px solid rgba(255,138,0,0.3);
	border-left: 3px solid var(--cs-cta); border-radius: var(--cs-r);
	padding: 0.85rem 1.05rem; color: #ffc98a; font-size: 0.88rem;
}
.cs-sources { font-size: 0.83rem; color: var(--cs-dim); }
.cs-draft-notice, .cs-sample-warning {
	display: flex; gap: 0.55rem; align-items: flex-start;
	background: rgba(124,92,255,0.1); border: 1px solid rgba(124,92,255,0.32);
	border-radius: var(--cs-r); padding: 0.85rem 1.05rem; color: var(--cs-violet-2);
	font-size: 0.86rem; line-height: 1.5; margin-bottom: 1.5rem;
}

.cs-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.cs-card { display: flex; flex-direction: column; background: linear-gradient(180deg, var(--cs-panel-2), var(--cs-panel)); border: 1px solid var(--cs-line); border-radius: var(--cs-r-lg); overflow: hidden; height: 100%; transition: transform 0.16s ease, border-color 0.16s ease; }
.cs-card:hover { transform: translateY(-3px); border-color: rgba(124,92,255,0.5); }
.cs-card__media { display: block; background: var(--cs-panel-2); aspect-ratio: 16 / 9; }
.cs-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cs-card__body { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.cs-card__kicker { margin: 0; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-violet-2); }
.cs-card__title { font-size: 1.1rem; margin: 0; line-height: 1.25; }
.cs-card__title a { color: #fff; text-decoration: none; }
.cs-card__title a:hover { color: var(--cs-gold); }
.cs-card__excerpt { margin: 0; font-size: 0.86rem; color: var(--cs-muted); line-height: 1.5; }
.cs-card__meta { margin: auto 0 0; padding-top: 0.7rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: 0.74rem; color: var(--cs-dim); }

.cs-cat-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cs-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; border-radius: var(--cs-r-pill); border: 1px solid var(--cs-line); background: rgba(255,255,255,0.05); color: var(--cs-muted); font-size: 0.85rem; font-weight: 700; text-decoration: none; }
.cs-chip:hover { border-color: var(--cs-violet); color: #fff; text-decoration: none; }
.cs-chip--current { background: linear-gradient(180deg, var(--cs-gold), var(--cs-gold-2)); border-color: transparent; color: var(--cs-ink); }
.cs-chip__count { font-size: 0.72rem; opacity: 0.7; font-variant-numeric: tabular-nums; }

.cs-article { max-width: 44rem; margin-inline: auto; }
.cs-page--article .cs-breadcrumbs { max-width: 44rem; margin-inline: auto; }
.cs-article__head { margin-bottom: 1.75rem; }
.cs-article__kicker { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.8rem; }
.cs-article__kicker a { text-decoration: none; }
.cs-article__title { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-bottom: 0.6rem; }
.cs-article__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--cs-line-soft); font-size: 0.8rem; color: var(--cs-dim); }
.cs-article__media { margin: 0 0 1.75rem; border-radius: var(--cs-r-lg); overflow: hidden; }
.cs-article__foot { margin-top: 2rem; }
.cs-article__note { background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: var(--cs-r); padding: 0.9rem 1.1rem; font-size: 0.86rem; color: var(--cs-dim); margin-bottom: 1.25rem; }
.cs-related { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--cs-line-soft); }
.cs-related__title { font-size: 1.5rem; margin-bottom: 1.25rem; }

.cs-offers-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; margin-top: 1.5rem; }
.cs-offers-layout__aside { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; position: sticky; top: 5rem; }
.cs-aside-block { background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: var(--cs-r); padding: 1rem 1.15rem; }
.cs-aside-block__title { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-dim); margin-bottom: 0.7rem; }
.cs-aside-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 0.6rem; }
.cs-aside-list li { display: flex; justify-content: space-between; gap: 0.7rem; font-size: 0.86rem; align-items: baseline; }
.cs-aside-list span { font-size: 0.72rem; color: var(--cs-dim); white-space: nowrap; }
.cs-aside-list a { color: var(--cs-text); text-decoration: none; }
.cs-aside-list a:hover { color: var(--cs-gold); }

.cs-offer-detail__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; padding-bottom: 1.4rem; border-bottom: 1px solid var(--cs-line-soft); margin-bottom: 1.6rem; }
.cs-offer-detail__identity { display: flex; gap: 1rem; align-items: center; }
.cs-offer-detail__kicker { margin: 0 0 0.2rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-violet-2); }
.cs-offer-detail__title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 0.2rem; }
.cs-offer-detail__operator { margin: 0; font-size: 0.88rem; color: var(--cs-dim); }
.cs-offer-detail__flags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0; }
.cs-offer-detail__layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
.cs-offer-detail__block { margin-top: 2rem; }
.cs-offer-detail__block h2 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.cs-offer-detail__bonus { background: rgba(255,197,49,0.09); border: 1px solid rgba(255,197,49,0.28); border-radius: var(--cs-r); padding: 1.1rem 1.25rem; margin-top: 1.25rem; }
.cs-offer-detail__bonus h2 { font-size: 1.35rem; margin-bottom: 0.4rem; color: var(--cs-gold); }
.cs-offer-detail__bonus p { color: var(--cs-muted); }
.cs-offer-detail__aside { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; position: sticky; top: 5rem; }
.cs-cta-panel { background: linear-gradient(180deg, var(--cs-panel-2), var(--cs-panel)); border: 1px solid rgba(255,138,0,0.35); border-radius: var(--cs-r-lg); padding: 1.25rem; }
.cs-cta-panel__title { font-size: 1.1rem; margin-bottom: 0.8rem; }
.cs-ticklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 0.5rem; }
.cs-ticklist li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; color: var(--cs-muted); }
.cs-ticklist .cs-icon { color: var(--cs-green-2); margin-top: 0.2rem; }
.cs-ticklist--warn .cs-icon { color: #ffb45e; }
.cs-country-list { list-style: none; margin: 0.6rem 0 0.9rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cs-country-list li { font-size: 0.8rem; padding: 0.22rem 0.55rem; border-radius: var(--cs-r-pill); border: 1px solid var(--cs-line); color: var(--cs-dim); }
.cs-country-list__current { border-color: var(--cs-gold); color: var(--cs-gold); font-weight: 700; }
.cs-spec { margin: 0; background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: var(--cs-r); padding: 0.3rem 1.05rem; }
.cs-spec__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--cs-line-soft); font-size: 0.86rem; }
.cs-spec__row:last-child { border-bottom: 0; }
.cs-spec dt { color: var(--cs-dim); }
.cs-spec dd { margin: 0; font-weight: 800; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.cs-source { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.8rem; color: var(--cs-dim); margin: 0; }

.cs-results { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 0.8rem; max-width: 46rem; }
.cs-result { background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: var(--cs-r); padding: 1rem 1.2rem; }
.cs-result__kind { margin: 0 0 0.25rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-violet-2); }
.cs-result__title { font-size: 1.1rem; margin: 0 0 0.3rem; }
.cs-result__title a { color: #fff; text-decoration: none; }
.cs-result__title a:hover { color: var(--cs-gold); }
.cs-result__excerpt { margin: 0 0 0.3rem; font-size: 0.88rem; color: var(--cs-muted); }
.cs-result__url { margin: 0; font-size: 0.75rem; color: var(--cs-dim); }

.cs-404__code { font-size: clamp(3.5rem, 11vw, 7rem); font-weight: 900; line-height: 1; margin: 0 0 0.3rem; background: linear-gradient(90deg, var(--cs-gold), var(--cs-cta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-404__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 1rem; }
.cs-404__block h2 { font-size: 1.2rem; margin-bottom: 0.9rem; }
.cs-404__block .cs-products { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.cs-404__subtitle { font-size: 0.95rem; margin: 1.5rem 0 0.7rem; }
.cs-404__report { margin-top: 1.25rem; font-size: 0.86rem; color: var(--cs-dim); }

.cs-pagination, .navigation.pagination { margin-top: 2rem; }
.cs-pagination .nav-links, .navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cs-pagination .page-numbers, .navigation.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 2.3rem; height: 2.3rem;
	padding-inline: 0.65rem; border-radius: 10px; border: 1px solid var(--cs-line);
	background: var(--cs-panel); color: var(--cs-text); text-decoration: none; font-size: 0.88rem; font-weight: 700;
}
.cs-pagination .page-numbers:hover { border-color: var(--cs-violet); }
.cs-pagination .page-numbers.current { background: linear-gradient(180deg, var(--cs-gold), var(--cs-gold-2)); border-color: transparent; color: var(--cs-ink); }

/* --- Forms --------------------------------------------------------------- */

.cs-form-wrap { max-width: 36rem; }
.cs-form__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cs-form__field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.1rem; }
.cs-form__field label { font-size: 0.85rem; font-weight: 700; color: var(--cs-text); }
.cs-form__field input, .cs-form__field select, .cs-form__field textarea {
	font: inherit; font-size: 0.95rem; padding: 0.65rem 0.8rem;
	border: 1px solid var(--cs-line); border-radius: 10px;
	background: var(--cs-panel); color: #fff; width: 100%;
}
.cs-form__field textarea { resize: vertical; min-height: 9rem; line-height: 1.55; }
.cs-form__field--error input, .cs-form__field--error select, .cs-form__field--error textarea { border-color: var(--cs-red); background: rgba(248,113,113,0.08); }
.cs-form__error { font-size: 0.82rem; color: var(--cs-red); font-weight: 600; }
.cs-form__hint { font-size: 0.82rem; color: var(--cs-dim); }
.cs-form__actions { margin-bottom: 0.7rem; }
.cs-form__actions .cs-cta { width: auto; }
.cs-form__privacy { font-size: 0.8rem; color: var(--cs-dim); }
.cs-notice { display: flex; gap: 0.6rem; align-items: flex-start; border-radius: var(--cs-r); padding: 0.9rem 1.1rem; margin-bottom: 1.5rem; border: 1px solid; font-size: 0.9rem; }
.cs-notice p { margin: 0; }
.cs-notice--ok { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); color: var(--cs-green-2); }
.cs-notice--warn { background: rgba(255,138,0,0.12); border-color: rgba(255,138,0,0.4); color: #ffb45e; }
.cs-notice--info { background: rgba(124,92,255,0.12); border-color: rgba(124,92,255,0.4); color: var(--cs-violet-2); }

/* --- Campaign, footer, ribbon -------------------------------------------- */

.cs-page--campaign { max-width: 48rem; }
.cs-campaign__footer { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--cs-line-soft); }
.cs-campaign__legal { margin-top: 1.25rem; }
.cs-campaign__legal h2 { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-dim); margin-bottom: 0.5rem; }
.cs-campaign__legal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.85rem; }
body.cs-campaign .cs-footer__grid { display: none; }

.cs-footer { background: var(--cs-bg-2); border-top: 1px solid var(--cs-line-soft); padding-block: clamp(2rem, 4vw, 3rem); margin-top: 2rem; }
.cs-footer a { color: var(--cs-muted); text-decoration: none; }
.cs-footer a:hover { color: #fff; text-decoration: underline; }
.cs-footer__warn { display: flex; gap: 1rem; align-items: flex-start; background: rgba(255,138,0,0.08); border: 1px solid rgba(255,138,0,0.25); border-radius: var(--cs-r); padding: 1rem 1.2rem; margin-bottom: 2rem; font-size: 0.87rem; line-height: 1.55; color: var(--cs-muted); }
.cs-footer__warn p { margin-bottom: 0.3rem; }
.cs-footer__warn p:last-child { margin-bottom: 0; }
.cs-footer__warn strong { color: #fff; }
.cs-footer__age { margin: 0; flex: none; }
.cs-footer__age span { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--cs-cta); color: var(--cs-cta); font-weight: 900; font-size: 0.9rem; }
.cs-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.8fr)) minmax(0, 1.1fr); gap: clamp(1.25rem, 3vw, 2.25rem); padding-bottom: 2rem; border-bottom: 1px solid var(--cs-line-soft); }
.cs-brand--footer { margin-bottom: 0.6rem; }
.cs-footer__tagline { font-size: 0.9rem; color: var(--cs-text); margin-bottom: 0.6rem; }
.cs-footer__disclosure { font-size: 0.82rem; line-height: 1.55; color: var(--cs-dim); }
.cs-footer__temp { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.8rem; color: var(--cs-dim); background: rgba(255,255,255,0.04); border-radius: 10px; padding: 0.65rem 0.8rem; margin-top: 0.9rem; }
.cs-footer__heading { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-dim); margin-bottom: 0.8rem; }
.cs-footer__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 0.5rem; font-size: 0.88rem; }
.cs-footer__country-note { font-size: 0.78rem; color: var(--cs-dim); margin-top: 0.7rem; }
.cs-footer__country .cs-country__label { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.cs-footer__legal { padding-top: 1.5rem; font-size: 0.8rem; color: var(--cs-dim); display: grid; gap: 0.3rem; }
.cs-footer__legal p { margin: 0; }

.cs-staging-ribbon {
	position: fixed; left: 0; bottom: 0; z-index: 90; margin: 0;
	background: var(--cs-violet); color: #fff; font-size: 0.68rem;
	letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.8rem;
	border-radius: 0 8px 0 0; opacity: 0.92;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
	.cs-row { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); }
	.cs-row__action { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; gap: 0.75rem; }
	.cs-row__score { justify-content: flex-start; }
	.cs-row__flags { justify-content: flex-start; grid-column: 1 / -1; }
	.cs-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-footer__about { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
	.cs-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.cs-hero__pick { max-width: 30rem; }
	.cs-two-col, .cs-offers-layout, .cs-offer-detail__layout { grid-template-columns: minmax(0, 1fr); }
	.cs-offers-layout__aside, .cs-offer-detail__aside { position: static; }
}

@media (max-width: 860px) {
	.cs-menu-toggle { display: inline-flex; }
	.cs-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		background: var(--cs-bg-2); border-top: 1px solid var(--cs-line);
		padding: 1.1rem var(--cs-gutter) 1.4rem; flex-direction: column;
		align-items: stretch; gap: 1rem; box-shadow: 0 24px 40px -20px rgba(0,0,0,0.9);
	}
	.cs-nav.is-open { display: flex; }
	.cs-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.cs-menu li { border-bottom: 1px solid var(--cs-line-soft); }
	.cs-menu a { display: block; padding: 0.75rem 0.4rem; font-size: 1rem; border-radius: 0; }
	.cs-nav__extras { flex-direction: column; align-items: stretch; gap: 0.8rem; }
	.cs-country--compact .cs-country__select { max-width: none; }
	.cs-search__field input[type="search"] { width: 100%; }
	body.single-cs_offer .cs-sticky-cta { display: block; }
	body.single-cs_offer .cs-footer { padding-bottom: 5rem; }
	body.single-cs_offer .cs-staging-ribbon { bottom: 4.2rem; }
}

@media (max-width: 700px) {
	.cs-row { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; padding: 1rem; }
	.cs-row--top { padding-top: 1.9rem; }
	.cs-row__headline { font-size: 1.5rem; }
	.cs-row__action { grid-template-columns: minmax(0, 1fr); }
	.cs-row__score { justify-content: space-between; }
	.cs-card-grid, .cs-products { grid-template-columns: minmax(0, 1fr); }
	.cs-filters__field, .cs-filters__field select { width: 100%; min-width: 0; }
	.cs-footer__grid { grid-template-columns: minmax(0, 1fr); }
	.cs-footer__warn { flex-direction: column; gap: 0.7rem; }
	.cs-hero__actions .cs-button, .cs-hero__actions .cs-cta { width: 100%; }
	.cs-country__controls { flex-direction: column; }
	.cs-country--compact .cs-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	.cs-row:hover, .cs-card:hover, .cs-product-card:hover, .cs-cta:hover { transform: none; }
	.cs-cta::after { display: none; }
}

@media print {
	.cs-header, .cs-footer, .cs-staging-ribbon, .cs-filters, .cs-country, .cs-menu-toggle, .cs-sticky-cta { display: none !important; }
	body { background: #fff; color: #000; }
	.cs-row, .cs-card { break-inside: avoid; border-color: #ccc; }
}

/* The filter panel folds away on a phone so the first offer is not pushed
   below the fold by three select boxes. */
.cs-filters__title { cursor: default; list-style: none; }
.cs-filters__title::-webkit-details-marker { display: none; }

@media (max-width: 700px) {
	.cs-filters__title { cursor: pointer; display: flex; align-items: center; gap: 0.4rem; }
	.cs-filters__title::before { content: "▸"; color: var(--cs-gold); }
	.cs-filters__wrap[open] .cs-filters__title::before { content: "▾"; }
	.cs-filters__wrap:not([open]) + .cs-filters__count { margin-top: 0.5rem; }
	.cs-filters__row { padding-top: 0.85rem; }
}

/* --- Games ---------------------------------------------------------------- */
/*
 * The cost figure reuses the shape of the offer score but not its colour
 * language: on a score, high is good. On a cost, high is bad. Inverting the
 * palette without inverting the shape is what keeps the two readable side by
 * side on the same page.
 */

.cs-cost {
	display: inline-flex;
	align-items: baseline;
	gap: 0.15rem;
	padding: 0.35rem 0.7rem;
	border-radius: 12px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--cs-ink);
	background: linear-gradient(180deg, var(--cs-gold) 0%, var(--cs-gold-2, #e0a800) 100%);
	box-shadow: var(--cs-glow-gold);
}
.cs-cost b { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.04em; }
.cs-cost i { font-style: normal; font-size: 0.66rem; font-weight: 800; opacity: 0.75; }
.cs-cost--lg { padding: 0.55rem 0.95rem; border-radius: 16px; }
.cs-cost--lg b { font-size: 2.1rem; }

/*
 * Bands describe how a game behaves, not whether it is allowed. Nothing here
 * is red: a fast, high-variance game is a different game, not a worse one, and
 * a warning colour on a slots page is both wrong and bad selling.
 */
.cs-cost--longest { background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%); color: #05240f; box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35), 0 8px 26px -12px rgba(34, 197, 94, 0.8); }
.cs-cost--long    { background: linear-gradient(180deg, #7ee3a8 0%, #3cc77d 100%); color: #052414; }
.cs-cost--brisk   { background: linear-gradient(180deg, var(--cs-gold) 0%, #e0a800 100%); color: var(--cs-ink); }
.cs-cost--fastest { background: linear-gradient(180deg, var(--cs-violet) 0%, #5b3ce0 100%); color: #fff; box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.45), 0 8px 26px -12px rgba(124, 92, 255, 0.9); }

.cs-game__cost { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; text-align: right; }
.cs-game__band { margin: 0; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-dim); }
.cs-game__more { white-space: nowrap; }

.cs-families { margin: 0; }
.cs-families ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cs-chip {
	display: inline-block;
	padding: 0.45rem 0.95rem;
	border-radius: 999px;
	border: 1px solid var(--cs-line);
	background: var(--cs-panel);
	color: var(--cs-text);
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.cs-chip:hover { border-color: var(--cs-violet); color: #fff; }
.cs-chip--on { background: var(--cs-violet); border-color: var(--cs-violet); color: #fff; }

/* The sum, shown as a sum. */
.cs-sum {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	padding: 1.2rem;
	border-radius: var(--cs-r-lg);
	border: 1px solid var(--cs-line);
	background: linear-gradient(180deg, var(--cs-panel-2) 0%, var(--cs-panel) 100%);
}
.cs-sum__part { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cs-sum__value { font-size: 1.45rem; font-weight: 900; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.cs-sum__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cs-dim); }
.cs-sum__op { font-size: 1.2rem; font-weight: 900; color: var(--cs-violet); }
.cs-sum__part--total .cs-sum__value { display: inline-flex; }

.cs-note { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--cs-dim); }

.cs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0.75rem; margin: 1.2rem 0 0; padding: 0; }
.cs-facts > div { padding: 0.85rem 1rem; border-radius: var(--cs-r); border: 1px solid var(--cs-line); background: var(--cs-panel); min-width: 0; }
.cs-facts dt { margin: 0 0 0.25rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-dim); }
.cs-facts dd { margin: 0; font-weight: 700; color: #fff; }

.cs-assume { margin-top: 1.2rem; padding: 1rem 1.2rem; border-left: 3px solid var(--cs-violet); background: rgba(124, 92, 255, 0.07); border-radius: 0 var(--cs-r) var(--cs-r) 0; }
.cs-assume h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.cs-assume p { margin: 0 0 0.5rem; color: var(--cs-text); }
.cs-assume__source { font-size: 0.82rem; color: var(--cs-dim); margin-bottom: 0; }

/* Good version against bad version. */
.cs-versus__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0.9rem; }
.cs-versus__side { padding: 1.1rem 1.2rem; border-radius: var(--cs-r-lg); border: 1px solid var(--cs-line); background: var(--cs-panel); min-width: 0; }
.cs-versus__side--good { border-color: rgba(34, 197, 94, 0.45); }
.cs-versus__side--bad { border-color: rgba(220, 38, 38, 0.45); }
.cs-versus__label { margin: 0 0 0.4rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-dim); }
.cs-versus__figure { margin: 0; font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.cs-versus__side--good .cs-versus__figure { color: #4ade80; }
.cs-versus__side--bad .cs-versus__figure { color: #f87171; }
.cs-versus__note { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--cs-dim); }
.cs-versus__delta { margin: 0.9rem 0 0; font-weight: 700; color: #fff; }

.cs-watch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.cs-watch__list li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 0.95rem; border-radius: var(--cs-r); border: 1px solid var(--cs-line); background: var(--cs-panel); min-width: 0; }
.cs-watch__list svg { flex: none; margin-top: 0.15rem; color: var(--cs-cta); }

/* Game head. */
.cs-gamehead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.5rem 0 1.2rem; }
.cs-gamehead__kicker { margin: 0 0 0.35rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-violet); }
.cs-gamehead__title { margin: 0 0 0.5rem; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.035em; }
.cs-gamehead__verdict { margin: 0; font-size: 1.05rem; color: var(--cs-text); max-width: 52ch; }
.cs-gamehead__figure { text-align: right; }
.cs-gamehead__band { margin: 0.45rem 0 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-dim); }

.cs-crumbs { display: flex; gap: 0.5rem; align-items: center; padding-top: 1.2rem; font-size: 0.85rem; color: var(--cs-dim); }
.cs-crumbs a { color: var(--cs-dim); }
.cs-crumbs a:hover { color: #fff; }

/* Cost bar in the table. */
.cs-bar { display: block; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.09); overflow: hidden; margin-bottom: 0.3rem; max-width: 140px; }
.cs-bar__fill { display: block; height: 100%; border-radius: 99px; }
.cs-bar__fill--longest { background: #22c55e; }
.cs-bar__fill--long    { background: #3cc77d; }
.cs-bar__fill--brisk   { background: var(--cs-gold); }
.cs-bar__fill--fastest { background: var(--cs-violet); }
.cs-table__cost { font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
	.cs-gamehead { grid-template-columns: minmax(0, 1fr); }
	.cs-gamehead__figure { text-align: left; }
	.cs-game__cost { align-items: flex-start; text-align: left; }
}

/*
 * The header packs a wordmark, a nav, a country control and a search box onto
 * one line. Let the nav give up its gaps before anything is pushed off screen.
 */
.cs-header__inner { min-width: 0; }
.cs-nav { min-width: 0; }
@media (min-width: 981px) and (max-width: 1200px) {
	.cs-nav ul { gap: 0.9rem; }
}

/* Archive head. Its own spacing, since it sits straight under the header. */
.cs-pagehead { padding: 2.2rem 0 1.4rem; display: grid; gap: 0.9rem; }
.cs-pagehead__title { margin: 0; font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.035em; }
.cs-pagehead__lead { margin: 0; max-width: 72ch; color: var(--cs-text); }
.cs-game-page .cs-gamehead { padding-top: 1rem; }


/* --- Play time, appeal and how-to-play ----------------------------------- */

.cs-playtime { display: inline-flex; align-items: baseline; gap: 0.2rem; }
.cs-playtime b { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.04em; }
.cs-cost--lg .cs-playtime b { font-size: 2.1rem; }

.cs-gamehead__appeal {
	margin: 0.55rem 0 0; font-size: 1.02rem; color: var(--cs-gold);
	font-weight: 700; max-width: 52ch;
}
.cs-gamehead__basis { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--cs-dim); }

.cs-howto__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: cs-howto; }
.cs-howto__list li {
	display: flex; gap: 0.75rem; align-items: flex-start; min-width: 0;
	padding: 0.85rem 1rem; border-radius: var(--cs-r);
	border: 1px solid var(--cs-line);
	background: linear-gradient(180deg, var(--cs-panel-2) 0%, var(--cs-panel) 100%);
}
.cs-howto__list li::before {
	counter-increment: cs-howto; content: counter(cs-howto);
	flex: none; width: 24px; height: 24px; border-radius: 8px;
	display: grid; place-items: center;
	background: var(--cs-violet); color: #fff;
	font-size: 0.74rem; font-weight: 900;
}
.cs-howto__list li span { min-width: 0; }

.cs-row__appeal { margin: 0.3rem 0 0; font-size: 0.86rem; color: var(--cs-gold); font-weight: 600; }

/* --- In-article call to action ------------------------------------------- */

.cs-playcta {
	margin: 2rem 0;
	padding: 1.3rem 1.4rem;
	border-radius: var(--cs-r-lg);
	border: 1px solid rgba(124, 92, 255, 0.45);
	background: linear-gradient(180deg, var(--cs-panel-2) 0%, var(--cs-panel) 100%);
	box-shadow: var(--cs-shadow);
}
.cs-playcta__head { display: flex; gap: 1.2rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.cs-playcta__kicker { margin: 0 0 0.25rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-violet); }
.cs-playcta__title { margin: 0 0 0.4rem; font-size: 1.45rem; letter-spacing: -0.03em; }
.cs-playcta__verdict { margin: 0; color: var(--cs-text); max-width: 54ch; }
.cs-playcta__actions { margin: 1rem 0 0; }

/*
 * Two buttons in one card need a winner. Inside the article card the operator
 * buttons are the action; the link across to the game page is a second route
 * for people who want more first. So the game link drops to an outline and the
 * orange stays with the Claim buttons, where it means something.
 */
.cs-playcta__actions .cs-cta {
	width: auto;
	background: transparent;
	border: 1px solid rgba(124, 92, 255, 0.55);
	color: var(--cs-violet);
	font-weight: 700;
	box-shadow: none;
}
.cs-playcta__actions .cs-cta::after { display: none; }
.cs-playcta__actions .cs-cta:hover {
	filter: none;
	color: #fff;
	border-color: rgba(124, 92, 255, 0.9);
	background: rgba(124, 92, 255, 0.14);
	box-shadow: none;
}
.cs-playcta .cs-strip__item { border-color: rgba(124, 92, 255, 0.28); }

.cs-strip { list-style: none; margin: 1rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--cs-line); display: grid; gap: 0.6rem; }
.cs-strip__item {
	display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
	padding: 0.7rem 0.85rem; border-radius: var(--cs-r);
	border: 1px solid var(--cs-line); background: var(--cs-panel-2); min-width: 0;
}
.cs-strip__name { font-weight: 800; color: #fff; }
.cs-strip__offer { flex: 1 1 12rem; min-width: 0; color: var(--cs-text); font-size: 0.9rem; }
.cs-strip__off { font-size: 0.8rem; color: var(--cs-dim); }
.cs-strip__legal { margin: 0.6rem 0 0; font-size: 0.7rem; color: var(--cs-dim); }