/*
 * Crypto4Casinos front-end styles.
 *
 * Scoped to .c4c-* class names so the stylesheet can sit alongside the theme and
 * Elementor without fighting them. Colours are exposed as custom properties on
 * :root so the Elementor Kit's global colours can override them per site.
 */

:root {
	--c4c-bg: #0a0d14;
	--c4c-surface: #12161f;
	--c4c-surface-2: #171c27;
	--c4c-border: #232a38;
	--c4c-text: #e7eaf1;
	--c4c-muted: #8b93a7;
	--c4c-accent: #2fd06f;
	--c4c-accent-strong: #24b85e;
	--c4c-accent-soft: rgba(47, 208, 111, 0.12);
	--c4c-purple: #6d3ff0;
	--c4c-gold: #f5b731;
	--c4c-danger: #ef4444;
	--c4c-radius: 14px;
	--c4c-radius-sm: 9px;
	--c4c-gap: 20px;
	--c4c-font: inherit;
}

/* ------------------------------------------------------------ line height */

/*
 * The kit sets a 2em body line-height. That inherits into every component and
 * silently adds tens of pixels to each casino row, which is what made the list
 * far taller than the approved artwork. A direct declaration on each component
 * root beats the inherited value, and the components set their own rhythm from
 * there.
 */
.c4c-header,
.c4c-footer,
.c4c-hero,
.c4c-section,
.c4c-panel,
.c4c-casino,
.c4c-bonus-card,
.c4c-newsletter,
.c4c-review,
.c4c-ctable,
.c4c-trust {
	line-height: 1.45;
}

/* ------------------------------------------------------------ accessibility */

.c4c-header .screen-reader-text,
.c4c-footer .screen-reader-text,
.c4c-casino .screen-reader-text,
.c4c-bonus-card .screen-reader-text,
.c4c-ctable .screen-reader-text,
.c4c-newsletter .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- the brand */

.c4c-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.c4c-brand__mark {
	width: 34px;
	height: 34px;
	color: var(--c4c-accent);
	flex: none;
}

.c4c-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.c4c-brand__top {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
}

.c4c-brand__four {
	color: var(--c4c-accent);
}

.c4c-brand__bottom {
	margin-top: 3px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	color: #cfd5e2;
}

/* -------------------------------------------------------------------- header */

/*
 * No bottom border: the hero band starts immediately underneath and the two are
 * meant to read as one surface, so a hairline would show as a seam.
 */
.c4c-header {
	background: #05070c;
	color: var(--c4c-text);
}

.c4c-header--sticky,
.c4c-sticky-host {
	position: sticky;
	top: 0;
	z-index: 90;
}

/* When the wrapper is doing the sticking, the header inside must not also try. */
.c4c-sticky-host .c4c-header--sticky {
	position: static;
}

.c4c-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px 24px;
}

.c4c-header__logo {
	text-decoration: none;
	flex: none;
}

.c4c-header__logo img {
	display: block;
	max-height: 46px;
	width: auto;
}

.c4c-nav {
	flex: 1 1 auto;
}

.c4c-nav__list {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4c-nav__list li {
	position: relative;
}

.c4c-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	color: #e7eaf1;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.c4c-nav__list a:hover,
.c4c-nav__list a:focus-visible,
.c4c-nav__list .current-menu-item > a {
	color: var(--c4c-accent);
}

/* Chevron for items that have a submenu. */
.c4c-nav__list .menu-item-has-children > a::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.c4c-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: -14px;
	z-index: 20;
	display: block;
	min-width: 210px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--c4c-surface);
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.c4c-nav__list li:hover > .sub-menu,
.c4c-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.c4c-nav__list .sub-menu a {
	display: block;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 13px;
}

.c4c-nav__list .sub-menu a:hover {
	background: var(--c4c-surface-2);
}

.c4c-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.c4c-header__icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: transparent;
	color: var(--c4c-text);
	cursor: pointer;
}

.c4c-header__icon-btn:hover,
.c4c-header__icon-btn:focus-visible {
	border-color: var(--c4c-accent);
	color: var(--c4c-accent);
}

.c4c-header__icon-btn .c4c-icon {
	width: 19px;
	height: 19px;
}

.c4c-header__burger {
	display: none;
}

.c4c-lang {
	position: relative;
}

.c4c-lang__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: transparent;
	color: var(--c4c-text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.c4c-lang__toggle:hover,
.c4c-lang__toggle:focus-visible {
	border-color: var(--c4c-accent);
}

.c4c-lang__toggle .c4c-icon {
	width: 17px;
	height: 17px;
}

.c4c-lang__chevron {
	width: 13px !important;
	height: 13px !important;
	color: var(--c4c-muted);
}

.c4c-lang__list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 20;
	min-width: 168px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--c4c-surface);
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	display: none;
}

.c4c-lang.is-open .c4c-lang__list {
	display: block;
}

.c4c-lang__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	color: var(--c4c-text);
	font-size: 13px;
	text-decoration: none;
}

.c4c-lang__list a:hover,
.c4c-lang__list a[aria-current] {
	background: var(--c4c-surface-2);
	color: var(--c4c-accent);
}

.c4c-lang__list .c4c-lang__code {
	min-width: 26px;
	color: var(--c4c-muted);
	font-weight: 700;
}

.c4c-header__search {
	border-top: 1px solid var(--c4c-border);
	background: var(--c4c-surface);
}

.c4c-header__search form {
	display: flex;
	gap: 10px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px 24px;
}

.c4c-header__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-bg);
	color: var(--c4c-text);
	font-size: 14px;
}

.c4c-header__search input[type="search"]:focus {
	outline: 2px solid var(--c4c-accent);
	outline-offset: 1px;
}

/* -------------------------------------------------------------------- footer */

.c4c-footer {
	background: #05070c;
	border-top: 1px solid var(--c4c-border);
	color: var(--c4c-text);
}

/*
 * The footer sits on the same column as the rest of the site: 1170px with the
 * 15px gutters Elementor's container uses, so the brand starts on the same line
 * as every section above it and the age block ends on the same line too. It
 * used to be 1280px wide and overhung the page by about 30px on each side.
 */
.c4c-footer__main,
.c4c-footer__bar {
	max-width: 1170px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
}

/*
 * Brand, three link columns and the responsible gambling block. The brand and
 * age blocks are capped at the width their text needs, and the three link
 * columns share everything left over evenly — so the space the removed Casinos
 * and Bonuses columns freed is spread across the row instead of pooling into
 * one dead gap beside the brand.
 */
.c4c-footer__main {
	display: grid;
	grid-template-columns: minmax(200px, 260px) repeat(3, minmax(0, 1fr)) minmax(160px, 260px);
	gap: 30px;
	padding-top: 40px;
	padding-bottom: 32px;
}

.c4c-footer__brand a {
	text-decoration: none;
}

.c4c-footer__tagline {
	margin: 16px 0 18px;
	max-width: 30ch;
	font-size: 13px;
	line-height: 1.6;
	color: var(--c4c-muted);
}

.c4c-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4c-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--c4c-surface-2);
	color: #b9c1d2;
}

.c4c-footer__social a:hover {
	background: var(--c4c-accent);
	color: #06210f;
}

.c4c-footer__social .c4c-icon {
	width: 17px;
	height: 17px;
}

.c4c-footer__col-title {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}

.c4c-footer__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4c-footer__links a {
	color: var(--c4c-muted);
	font-size: 13px;
	text-decoration: none;
}

.c4c-footer__links a:hover,
.c4c-footer__links a:focus-visible {
	color: var(--c4c-accent);
}

.c4c-footer__responsible {
	text-align: center;
}

.c4c-footer__age {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 10px;
	border: 2px solid #e5484d;
	border-radius: 50%;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.c4c-footer__responsible-title {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.c4c-footer__responsible-text {
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--c4c-muted);
}

.c4c-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 16px;
	padding-bottom: 22px;
	border-top: 1px solid var(--c4c-border);
}

.c4c-footer__bar p {
	margin: 0;
	font-size: 12px;
	color: var(--c4c-muted);
}

/* ------------------------------------------------------ newsletter subscribe */

.c4c-subscribe {
	display: flex;
	gap: 10px;
}

.c4c-subscribe__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 16px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-bg);
	color: var(--c4c-text);
	font-size: 14px;
}

.c4c-subscribe__field::placeholder {
	color: #6b7488;
}

.c4c-subscribe__field:focus {
	outline: 2px solid var(--c4c-accent);
	outline-offset: 1px;
}

.c4c-subscribe__button {
	flex: none;
}

/* Honeypot: off-screen rather than display:none so bots still fill it in. */
.c4c-subscribe__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.c4c-subscribe__notice {
	margin: 10px 0 0;
	font-size: 13px;
}

.c4c-subscribe__notice--success { color: var(--c4c-accent); }
.c4c-subscribe__notice--error { color: var(--c4c-danger); }

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

.c4c-compare-table__scroll {
	overflow-x: auto;
}

.c4c-ctable {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.c4c-ctable th,
.c4c-ctable td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--c4c-border);
	text-align: center;
	vertical-align: middle;
}

.c4c-ctable tbody th {
	text-align: left;
	color: var(--c4c-muted);
	font-weight: 600;
	white-space: nowrap;
}

.c4c-ctable thead a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--c4c-text);
	font-size: 13px;
	text-decoration: none;
}

.c4c-ctable thead img {
	max-width: 110px;
	max-height: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.c4c-yes {
	color: var(--c4c-accent);
}

.c4c-yes .c4c-icon {
	width: 18px;
	height: 18px;
}

.c4c-no {
	color: #4d5668;
}

/* ---------------------------------------------------------------- primitives */

.c4c-icon {
	width: 1em;
	height: 1em;
	flex: none;
	fill: currentColor;
	vertical-align: middle;
}

.c4c-section {
	background: var(--c4c-surface);
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
	padding: 22px;
	color: var(--c4c-text);
	font-family: var(--c4c-font);
}

.c4c-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.c4c-section__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--c4c-text);
}

.c4c-section__icon {
	width: 22px;
	height: 22px;
	color: var(--c4c-accent);
}

.c4c-section__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c4c-accent);
	text-decoration: none;
	white-space: nowrap;
	min-width: 0;
}

/* German and Finnish labels are long; let them wrap instead of overflowing. */
@media (max-width: 620px) {
	.c4c-section__header {
		flex-wrap: wrap;
	}

	.c4c-section__link {
		white-space: normal;
	}
}

.c4c-section__link:hover,
.c4c-section__link:focus-visible {
	text-decoration: underline;
}

.c4c-section__link .c4c-icon {
	width: 14px;
	height: 14px;
}

.c4c-empty {
	margin: 0;
	padding: 18px;
	border: 1px dashed var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	color: var(--c4c-muted);
	font-size: 14px;
	text-align: center;
}

/* ------------------------------------------------------------------- buttons */

.c4c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: var(--c4c-radius-sm);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.c4c-btn:hover,
.c4c-btn:focus-visible {
	transform: translateY(-1px);
}

.c4c-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.c4c-btn--play {
	background: var(--c4c-accent);
	color: #06210f;
}

.c4c-btn--play:hover,
.c4c-btn--play:focus-visible {
	background: var(--c4c-accent-strong);
	color: #06210f;
}

.c4c-btn--review,
.c4c-btn--outline {
	background: transparent;
	border-color: var(--c4c-border);
	color: var(--c4c-text);
}

.c4c-btn--review:hover,
.c4c-btn--outline:hover,
.c4c-btn--review:focus-visible,
.c4c-btn--outline:focus-visible {
	border-color: var(--c4c-accent);
	color: var(--c4c-accent);
}

.c4c-btn--primary {
	background: var(--c4c-purple);
	color: #fff;
}

.c4c-btn--ghost {
	background: transparent;
	border-color: #37405280;
	color: var(--c4c-text);
}

.c4c-btn--lg {
	padding: 15px 26px;
	font-size: 15px;
}

.c4c-btn--block {
	display: flex;
	width: 100%;
}

/* ---------------------------------------------------------------------- hero */

/*
 * The hero is a full-bleed band that butts straight against the header, with the
 * artwork reading as part of its background rather than as a picture in a column.
 */
.c4c-hero {
	--c4c-hero-band: #02030e;
	position: relative;
	isolation: isolate;
	background-color: var(--c4c-hero-band);
	color: var(--c4c-text);
	overflow: hidden;
}

/*
 * The backdrop tracks the content container rather than the viewport, so on wide
 * screens the artwork still finishes level with the copy instead of drifting off
 * to the far edge. Beyond it the flat band colour continues, and because that
 * colour matches the artwork's own backdrop the join is invisible.
 */
.c4c-hero__backdrop {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 100%;
	max-width: 1240px;
	transform: translateX(-50%);
	pointer-events: none;
}

/*
 * Sized from the band's width, not its height. Driving it off the height made
 * the artwork grow every time a translation pushed the heading onto another
 * line, until it ran underneath the copy.
 *
 * The mask feathers all four edges. The artwork's own halo is measurably
 * lighter than the band (its border averages around #050020 against #02030E),
 * so without this the picture reads as a rectangle pasted onto the band. Four
 * one-directional gradients are intersected rather than using one radial, so
 * each side can be tuned independently around an off-centre subject.
 */
.c4c-hero__image {
	position: absolute;
	top: 50%;
	right: 0;
	width: 48%;
	max-width: 620px;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	object-position: right center;
	transform: translateY(-50%);
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, #000 17%),
		linear-gradient(to left, transparent 0%, #000 11%),
		linear-gradient(to bottom, transparent 0%, #000 13%),
		linear-gradient(to top, transparent 0%, #000 11%);
	mask-image:
		linear-gradient(to right, transparent 0%, #000 17%),
		linear-gradient(to left, transparent 0%, #000 11%),
		linear-gradient(to bottom, transparent 0%, #000 13%),
		linear-gradient(to top, transparent 0%, #000 11%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/*
 * Contrast behind the copy. The edge mask above already dissolves the artwork's
 * border, so this only has to lift the text side, not hide a hard edge.
 */
.c4c-hero--scrim .c4c-hero__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--c4c-hero-band) 0%,
		color-mix(in srgb, var(--c4c-hero-band) 80%, transparent) 24%,
		transparent 50%
	);
}

.c4c-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 42px 24px 46px;
}

/* Stops short of the artwork so the two never overlap. */
.c4c-hero__content {
	max-width: 50%;
	min-width: 340px;
}

.c4c-hero--no-media .c4c-hero__content {
	max-width: none;
}

.c4c-hero--no-media .c4c-hero__subtitle {
	max-width: 60ch;
}

.c4c-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 7px 13px;
	border: 1px solid rgba(47, 208, 111, 0.35);
	border-radius: 999px;
	background: var(--c4c-accent-soft);
	color: var(--c4c-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.c4c-hero__title {
	margin: 0 0 16px;
	font-size: clamp(32px, 4.4vw, 52px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	/*
	 * German joins headings into single compound words — "Datenschutzerklärung",
	 * "Zahlungsmethoden" — which have no break opportunity and run off the side
	 * of a phone. Hyphenate where the language allows it, and break mid-word
	 * only as a last resort.
	 */
	hyphens: auto;
	overflow-wrap: break-word;
}

.c4c-hero__title-line {
	display: block;
}

.c4c-hero__highlight {
	color: var(--c4c-accent);
}

.c4c-hero__subtitle {
	max-width: 46ch;
	margin: 0 0 22px;
	color: var(--c4c-muted);
	font-size: 16px;
	line-height: 1.6;
}

.c4c-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

/* Sized to keep all four points on one line beside the artwork, as designed. */
.c4c-hero__point {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	white-space: nowrap;
	color: var(--c4c-text);
}

/*
 * Column variant: a boxed icon above a label that is allowed to wrap onto a
 * second line, which is how the About hero presents its four points.
 */
.c4c-hero__points--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(112px, max-content));
	gap: 18px 34px;
}

.c4c-hero__points--grid .c4c-hero__point {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	white-space: normal;
	font-size: 13px;
	line-height: 1.35;
}

.c4c-hero__point-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--c4c-border);
	border-radius: 12px;
	background: rgba(10, 15, 26, 0.55);
}

.c4c-hero__points--grid .c4c-hero__point .c4c-icon {
	width: 19px;
	height: 19px;
}

/*
 * With a description under it the label becomes a bolder heading. On its own it
 * is the whole sentence, so it stays at body weight.
 */
.c4c-hero__points--grid .c4c-hero__point:has(.c4c-hero__point-text) .c4c-hero__point-label {
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-hero__point-text {
	margin-top: -4px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--c4c-muted);
}

/* Descriptions need more room than bare labels do. */
.c4c-hero__points--grid:has(.c4c-hero__point-text) {
	grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
}

.c4c-hero__point .c4c-icon {
	width: 16px;
	height: 16px;
	color: var(--c4c-accent);
}

.c4c-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* -------------------------------------------------------------- casino rows */

.c4c-casino-list__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.c4c-casino {
	position: relative;
	display: grid;
	/*
	 * The rank pennant is positioned absolutely, so it is out of the grid flow
	 * and must not have a track of its own; the row reserves space for it with
	 * left padding instead.
	 */
	/*
	 * Column shares and vertical rhythm follow the approved section artwork,
	 * where a row is roughly six times as wide as it is tall. Anything looser
	 * turns the list into five tall blocks and pushes the fifth casino below the
	 * fold.
	 */
	grid-template-columns: minmax(106px, 0.9fr) minmax(248px, 2.2fr) minmax(110px, 0.88fr) minmax(128px, 0.76fr);
	align-items: center;
	gap: 14px;
	padding: 13px 18px 13px 56px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
	background: var(--c4c-surface-2);
}

.c4c-casino:hover {
	border-color: #2f3a4d;
}

/* Pennant badge anchored to the top-left corner, as in the approved design. */
.c4c-casino__rank {
	position: absolute;
	top: -1px;
	left: 16px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 30px;
	height: 40px;
	padding-top: 5px;
	background: var(--c4c-surface);
	color: var(--c4c-muted);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}

.c4c-casino--rank-1 .c4c-casino__rank {
	background: var(--c4c-gold);
	color: #2a1c00;
}

.c4c-casino--rank-2 .c4c-casino__rank {
	background: #c3cad4;
	color: #1b2029;
}

.c4c-casino--rank-3 .c4c-casino__rank {
	background: #c9835a;
	color: #2a1608;
}


.c4c-casino__logo {
	display: block;
	text-decoration: none;
}

.c4c-casino__logo img {
	display: block;
	width: 100%;
	max-width: 100%;
	max-height: 46px;
	height: auto;
	object-fit: contain;
	object-position: left center;
}

.c4c-casino__logo-text {
	font-size: 17px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-casino__bonus {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--c4c-text);
}

.c4c-casino__bonus-extra {
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--c4c-muted);
}

.c4c-casino__description {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--c4c-muted);
}

.c4c-casino__rating {
	display: flex;
	align-items: center;
	gap: 8px;
}

.c4c-casino__score-value {
	font-size: 15px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-casino__score-max {
	color: var(--c4c-muted);
	font-weight: 500;
}

.c4c-casino__word {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--c4c-muted);
}

.c4c-casino__actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.c4c-casino__actions .c4c-btn {
	width: 100%;
}

.c4c-compliance {
	margin: 1px 0 0;
	font-size: 10px;
	color: var(--c4c-muted);
	text-align: center;
}

.c4c-compliance a {
	color: inherit;
}

/*
 * The approved artwork has no compare control on the card, but the compare tray
 * still needs a way to be filled. It is revealed on hover or keyboard focus, and
 * always shown once a casino is selected so the state is never invisible.
 *
 * Taken out of the flow on purpose: while it sat in the actions column it added
 * its own line to every row, which is what kept the list taller than the design
 * even after the text was tightened.
 */
.c4c-compare-toggle {
	position: absolute;
	top: 10px;
	right: 16px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c4c-muted);
	font-size: 11px;
	text-decoration: underline;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.c4c-casino:hover .c4c-compare-toggle,
.c4c-casino:focus-within .c4c-compare-toggle,
.c4c-compare-toggle:focus-visible,
.c4c-compare-toggle.is-active {
	opacity: 1;
}

.c4c-compare-toggle:hover,
.c4c-compare-toggle.is-active {
	color: var(--c4c-accent);
}

/* Touch devices have no hover, so the control stays visible there. */
@media (hover: none) {
	.c4c-compare-toggle {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------- chips */

.c4c-chip {
	display: inline-block;
	margin-bottom: 6px;
	padding: 4px 9px;
	border-radius: 5px;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Award labels are single line in the design; "Best for Fast Withdrawals"
	   would otherwise wrap and make that row taller than its neighbours. */
	white-space: nowrap;
}

/* Award chips are solid in the design, not tinted. */
.c4c-chip--yellow { background: var(--c4c-gold); color: #2a1c00; }
.c4c-chip--purple { background: var(--c4c-purple); color: #fff; }
.c4c-chip--green  { background: var(--c4c-accent); color: #06210f; }
.c4c-chip--blue   { background: #3b82f6; color: #fff; }
.c4c-chip--orange { background: #f97316; color: #2a1200; }

/* Outlined variant used for the EXCLUSIVE marker beside a bonus type. */
.c4c-chip--outline {
	background: transparent;
	border: 1px solid var(--c4c-accent);
	color: var(--c4c-accent);
}

.c4c-sample {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 7px;
	border: 1px dashed var(--c4c-danger);
	border-radius: 4px;
	color: var(--c4c-danger);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------- stars */

.c4c-stars {
	display: inline-flex;
	gap: 1px;
}

.c4c-star {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
	color: var(--c4c-gold);
}

.c4c-star .c4c-icon {
	width: 14px;
	height: 14px;
}

.c4c-star__bg {
	color: #39415400;
	fill: #394154;
}

.c4c-star__fg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	display: block;
}

/* ------------------------------------------------------------------- crypto */

/*
 * Sized so three coins plus the "+N more" counter stay on one line. When this
 * wraps, that row grows by 20px and the list loses its even rhythm.
 */
.c4c-crypto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 8px;
	margin: 9px 0 0;
	padding: 0;
	list-style: none;
}

.c4c-crypto__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.c4c-crypto__coin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	flex: none;
}

.c4c-crypto__code {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--c4c-muted);
}

/*
 * The counter is translated and German renders it noticeably longer than
 * English, so the row is sized with headroom rather than to the English string.
 */
.c4c-crypto__more {
	font-size: 10.5px;
	white-space: nowrap;
	color: #626b7e;
}

.c4c-licence {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 7px 0 0;
	font-size: 11px;
	color: var(--c4c-muted);
}

.c4c-licence .c4c-icon {
	width: 14px;
	height: 14px;
	color: var(--c4c-accent);
}

/* -------------------------------------------------------------------- panels */

.c4c-panel {
	background: var(--c4c-surface);
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
	padding: 20px;
	color: var(--c4c-text);
}

.c4c-panel + .c4c-panel {
	margin-top: var(--c4c-gap);
}

.c4c-panel__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 700;
}

.c4c-panel__subtitle {
	margin: 20px 0 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--c4c-text);
}

/* -------------------------------------------------------------------- filter */

.c4c-filter__group {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.c4c-filter__legend {
	padding: 0;
	margin-bottom: 9px;
	font-size: 12px;
	color: var(--c4c-muted);
}

.c4c-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.c4c-chip-toggle input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.c4c-chip-toggle span,
.c4c-chip-link {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid var(--c4c-border);
	border-radius: 7px;
	background: var(--c4c-surface-2);
	color: var(--c4c-text);
	font-size: 12px;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.c4c-chip-toggle input:checked + span,
.c4c-chip-toggle span:hover,
.c4c-chip-link:hover {
	border-color: var(--c4c-accent);
	color: var(--c4c-accent);
}

.c4c-chip-toggle input:focus-visible + span {
	outline: 2px solid var(--c4c-accent);
	outline-offset: 2px;
}

.c4c-checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
	gap: 10px;
}

.c4c-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	cursor: pointer;
}

.c4c-check input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.c4c-check__box {
	width: 16px;
	height: 16px;
	border: 1px solid #3a4356;
	border-radius: 4px;
	flex: none;
	position: relative;
}

.c4c-check input:checked + .c4c-check__box {
	background: var(--c4c-accent);
	border-color: var(--c4c-accent);
}

.c4c-check input:checked + .c4c-check__box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid #06210f;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.c4c-check input:focus-visible + .c4c-check__box {
	outline: 2px solid var(--c4c-accent);
	outline-offset: 2px;
}

.c4c-rating-picker {
	display: flex;
	align-items: center;
	gap: 4px;
}

.c4c-rating-picker__star {
	padding: 2px;
	border: 0;
	background: none;
	color: #394154;
	cursor: pointer;
	line-height: 0;
}

.c4c-rating-picker__star .c4c-icon {
	width: 20px;
	height: 20px;
}

.c4c-rating-picker__star.is-on {
	color: var(--c4c-gold);
}

.c4c-rating-picker__suffix {
	margin-left: 6px;
	font-size: 12px;
	color: var(--c4c-muted);
}

/* ------------------------------------------------------------------- compare */

.c4c-compare__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--c4c-purple);
	color: #fff;
	font-size: 12px;
}

.c4c-compare__slots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}

.c4c-compare__slot {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 78px;
	padding: 10px 6px;
	border: 1px dashed var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	text-align: center;
}

.c4c-compare__slot:not(.is-empty) {
	border-style: solid;
	background: var(--c4c-surface-2);
}

.c4c-compare__slot img {
	max-width: 100%;
	max-height: 30px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.c4c-compare__name {
	font-size: 10px;
	font-weight: 700;
	color: var(--c4c-text);
	line-height: 1.2;
}

.c4c-compare__placeholder {
	font-size: 10px;
	color: #5c6579;
}

.c4c-compare__remove {
	position: absolute;
	top: -7px;
	right: -7px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--c4c-border);
	border-radius: 50%;
	background: var(--c4c-surface);
	color: var(--c4c-muted);
	cursor: pointer;
}

.c4c-compare__remove:hover {
	color: var(--c4c-danger);
	border-color: var(--c4c-danger);
}

.c4c-compare__remove .c4c-icon {
	width: 11px;
	height: 11px;
}

/* --------------------------------------------------------------------- trust */

.c4c-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 8px;
	padding: 22px;
	background: var(--c4c-surface);
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
}

.c4c-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0 18px;
	border-left: 1px solid var(--c4c-border);
}

.c4c-trust__item:first-child {
	border-left: 0;
}

.c4c-trust__icon {
	color: var(--c4c-accent);
}

.c4c-trust__icon .c4c-icon {
	width: 26px;
	height: 26px;
}

.c4c-trust__title {
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-trust__text {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--c4c-muted);
}

/* -------------------------------------------------------------- bonus cards */

.c4c-bonuses__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.c4c-bonus-card {
	--card-accent: var(--c4c-accent);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 16px 12px;
	/* Solid values first so browsers without color-mix() still get a card. */
	border: 1px solid var(--c4c-border);
	border-color: color-mix(in srgb, var(--card-accent) 45%, transparent);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface-2);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--card-accent) 12%, var(--c4c-surface-2)) 0%,
		var(--c4c-surface-2) 70%
	);
	text-align: center;
}

.c4c-bonus-card--green  { --card-accent: var(--c4c-accent); }
.c4c-bonus-card--purple { --card-accent: #8b5cf6; }
.c4c-bonus-card--orange { --card-accent: #f59e0b; }
.c4c-bonus-card--blue   { --card-accent: #3b82f6; }

.c4c-bonus-card__type {
	margin: 0;
	padding: 5px 11px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--card-accent) 22%, transparent);
	color: var(--card-accent);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.c4c-bonus-card__value {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 4px 0;
	color: var(--c4c-text);
}

.c4c-bonus-card__line {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
}

.c4c-bonus-card__line--strong {
	font-size: 26px;
	font-weight: 800;
}

.c4c-bonus-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	margin: 2px 0 6px;
}

.c4c-bonus-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 14px;
	background: color-mix(in srgb, var(--card-accent) 16%, transparent);
	color: var(--card-accent);
	font-size: 30px;
	font-weight: 800;
}

.c4c-bonus-icon .c4c-icon {
	width: 40px;
	height: 40px;
}

.c4c-bonus-icon--coin {
	border-radius: 50%;
	width: 66px;
	height: 66px;
	background: var(--card-accent);
	color: #1a1200;
	font-size: 34px;
}

.c4c-bonus-card .c4c-btn {
	width: 100%;
	padding: 9px 12px;
	border-color: color-mix(in srgb, var(--card-accent) 60%, transparent);
	color: var(--card-accent);
	font-size: 11px;
}

.c4c-bonus-card .c4c-btn:hover,
.c4c-bonus-card .c4c-btn:focus-visible {
	border-color: var(--card-accent);
	background: color-mix(in srgb, var(--card-accent) 14%, transparent);
	color: var(--card-accent);
}

/* ------------------------------------------------------- reviews & news list */

.c4c-reviews__list,
.c4c-news__list {
	display: flex;
	flex-direction: column;
}

.c4c-review-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--c4c-border);
	text-decoration: none;
	color: inherit;
}

.c4c-review-item:first-child,
.c4c-news-item:first-child {
	border-top: 0;
}

.c4c-review-item:hover .c4c-review-item__title {
	color: var(--c4c-accent);
}

.c4c-review-item__logo img {
	max-width: 100%;
	max-height: 36px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.c4c-review-item__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.c4c-review-item__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-review-item__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--c4c-muted);
}

.c4c-review-item__bonus {
	font-size: 11px;
	color: var(--c4c-muted);
}

.c4c-review-item__score {
	font-size: 12px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-news-item {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--c4c-border);
}

.c4c-news-item__thumb img {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	object-fit: cover;
}

.c4c-news-item__title {
	margin: 0 0 5px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.c4c-news-item__title a {
	color: var(--c4c-text);
	text-decoration: none;
}

.c4c-news-item__title a:hover {
	color: var(--c4c-accent);
}

.c4c-news-item__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 11px;
	color: var(--c4c-muted);
}

.c4c-news-item__category {
	color: var(--c4c-accent);
	text-decoration: none;
}

/* ----------------------------------------------------------------- news page */

.c4c-breadcrumbs--hero {
	margin-bottom: 18px;
}

.c4c-hero__title-line--inline {
	display: inline;
}

/* Category tabs */

.c4c-news-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 6px;
	background: var(--c4c-surface);
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
}

.c4c-news-tabs__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: var(--c4c-radius-sm);
	color: var(--c4c-muted);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.c4c-news-tabs__item .c4c-icon {
	width: 17px;
	height: 17px;
}

.c4c-news-tabs__item:hover {
	color: var(--c4c-text);
	background: var(--c4c-surface-2);
}

.c4c-news-tabs__item.is-active {
	color: var(--c4c-text);
	background: var(--c4c-surface-2);
	border-bottom-color: var(--c4c-accent);
}

.c4c-news-tabs__item.is-active .c4c-icon {
	color: var(--c4c-accent);
}

/* Category chips on cards */

.c4c-cat-chip {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 5px;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.c4c-cat-chip--purple { background: rgba(109, 63, 240, 0.9); color: #fff; }
.c4c-cat-chip--green  { background: rgba(47, 208, 111, 0.9); color: #06210f; }
.c4c-cat-chip--blue   { background: rgba(59, 130, 246, 0.9); color: #fff; }
.c4c-cat-chip--orange { background: rgba(249, 115, 22, 0.9); color: #2a1200; }

/* Article cards */

.c4c-news-grid__featured {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

.c4c-news-grid__rest {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
}

.c4c-article {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
	background: var(--c4c-surface-2);
	overflow: hidden;
}

.c4c-article:hover {
	border-color: #2f3a4d;
}

.c4c-article__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.c4c-article__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c4c-article__media .c4c-cat-chip {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
}

/*
 * Articles without artwork get a tinted block carrying the category icon rather
 * than an empty frame, so the grid keeps its rhythm while images are missing.
 */
.c4c-article__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.c4c-article__placeholder .c4c-icon {
	width: 42px;
	height: 42px;
	opacity: 0.85;
}

.c4c-article__placeholder--purple { background: linear-gradient(140deg, #2a1a5e, #150d33); color: #a78bfa; }
.c4c-article__placeholder--green  { background: linear-gradient(140deg, #10402a, #08251a); color: #34d399; }
.c4c-article__placeholder--blue   { background: linear-gradient(140deg, #12315e, #0a1c38); color: #60a5fa; }
.c4c-article__placeholder--orange { background: linear-gradient(140deg, #4a2a10, #2a1708); color: #fb923c; }

.c4c-article__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}

.c4c-article__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.c4c-article--featured .c4c-article__title {
	font-size: 18px;
}

.c4c-article__title a {
	color: var(--c4c-text);
	text-decoration: none;
}

.c4c-article__title a:hover {
	color: var(--c4c-accent);
}

.c4c-article__excerpt {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--c4c-muted);
}

.c4c-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 4px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--c4c-border);
	font-size: 11px;
	color: var(--c4c-muted);
}

.c4c-article__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.c4c-article__meta .c4c-icon {
	width: 13px;
	height: 13px;
}

.c4c-news-grid__more {
	margin-top: 16px;
}

.c4c-news-grid__more a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface-2);
	color: var(--c4c-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.c4c-news-grid__more a:hover {
	border-color: var(--c4c-accent);
	color: var(--c4c-accent);
}

/* Popular articles sidebar */

.c4c-popular__list {
	display: flex;
	flex-direction: column;
}

.c4c-article-row {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 12px;
	padding: 13px 0;
	border-top: 1px solid var(--c4c-border);
}

.c4c-article-row:first-child {
	border-top: 0;
	padding-top: 0;
}

.c4c-article-row__media {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
}

.c4c-article-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c4c-article-row__media .c4c-article__placeholder .c4c-icon {
	width: 24px;
	height: 24px;
}

.c4c-article-row__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	min-width: 0;
}

.c4c-article-row__title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.c4c-article-row__title a {
	color: var(--c4c-text);
	text-decoration: none;
}

.c4c-article-row__title a:hover {
	color: var(--c4c-accent);
}

.c4c-article-row .c4c-article__meta {
	margin: 0;
	padding-top: 0;
	border-top: 0;
	gap: 4px 12px;
}

/* Follow us panel */

.c4c-follow__text {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--c4c-muted);
}

.c4c-follow__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4c-follow__links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c4c-border);
	border-radius: 50%;
	background: var(--c4c-surface-2);
	color: #b9c1d2;
}

.c4c-follow__links a:hover {
	border-color: var(--c4c-accent);
	background: var(--c4c-accent);
	color: #06210f;
}

.c4c-follow__links .c4c-icon {
	width: 18px;
	height: 18px;
}

/* -------------------------------------------------------------------- terms */

.c4c-terms {
	padding: 28px;
}

.c4c-terms__intro {
	padding-bottom: 22px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--c4c-border);
	font-size: 13px;
	line-height: 1.7;
}

.c4c-terms__section {
	padding-top: 22px;
	/* Anchored sections must clear the sticky header when jumped to. */
	scroll-margin-top: 90px;
}

.c4c-terms__section + .c4c-terms__section {
	border-top: 1px solid var(--c4c-border);
}

.c4c-terms__header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.c4c-terms__number {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(47, 208, 111, 0.14);
	color: var(--c4c-accent);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
}

html body .c4c-terms__title {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--c4c-text);
}

/*
 * The clause number sits in its own column so wrapped clause text stays aligned
 * under itself rather than running back under the number.
 */
.c4c-terms__clauses {
	margin: 0;
	padding: 0 0 0 44px;
	list-style: none;
}

.c4c-terms__clauses li {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 10px;
	margin-bottom: 11px;
	font-size: 13px;
	line-height: 1.65;
	color: var(--c4c-muted);
}

.c4c-terms__clause-number {
	color: var(--c4c-accent);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.c4c-terms__body {
	padding-left: 44px;
	font-size: 13px;
	line-height: 1.7;
}

.c4c-terms__body p:last-child {
	margin-bottom: 0;
}

/*
 * Accent-bar variant: the cookie policy marks its sections with a bar instead
 * of a number badge, and its text runs full width.
 */
.c4c-terms--bar .c4c-terms__header {
	gap: 12px;
}

.c4c-terms--bar .c4c-terms__title::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 20px;
	margin-right: 12px;
	vertical-align: -3px;
	border-radius: 2px;
	background: var(--c4c-accent);
}

html body .c4c-terms--bar .c4c-terms__title {
	font-size: 21px;
}

.c4c-terms--bar .c4c-terms__body,
.c4c-terms--bar .c4c-terms__clauses {
	padding-left: 16px;
}

/* Cookie type cards inside a section */

.c4c-terms__cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 16px 0 4px;
	padding-left: 16px;
}

.c4c-terms-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 15px 16px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface-2);
}

.c4c-terms-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border: 1px solid var(--c4c-border);
	border-radius: 11px;
	color: var(--c4c-accent);
}

.c4c-terms-card__icon .c4c-icon {
	width: 21px;
	height: 21px;
}

.c4c-terms-card__body {
	min-width: 0;
}

.c4c-terms-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-terms-card__title .c4c-chip {
	margin-bottom: 0;
}

.c4c-terms-card__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--c4c-muted);
}

/* Quick link list */

.c4c-links__intro {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--c4c-muted);
}

.c4c-links__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4c-links__list li + li {
	margin-top: 8px;
}

/*
 * Rows are anchors when they lead somewhere and plain blocks when they only
 * explain something, so everything visual hangs off the row class rather than
 * off the element name.
 */
.c4c-links__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 13px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface-2);
	color: var(--c4c-text);
	font-size: 13px;
	text-decoration: none;
}

a.c4c-links__row:hover {
	border-color: var(--c4c-accent);
}

.c4c-links__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.c4c-links__text {
	font-size: 12px;
	line-height: 1.5;
	color: var(--c4c-muted);
}

.c4c-links__meta {
	font-size: 11px;
	line-height: 1.4;
	color: var(--c4c-accent);
	overflow-wrap: anywhere;
}

/* A row with a description is taller, so the icon rides at the top. */
.c4c-links__row:has(.c4c-links__text) {
	align-items: flex-start;
}

.c4c-links__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: rgba(47, 208, 111, 0.12);
	color: var(--c4c-accent);
}

.c4c-links__icon .c4c-icon {
	width: 17px;
	height: 17px;
}

.c4c-links__label {
	min-width: 0;
	font-weight: 600;
}

.c4c-links__arrow {
	flex: none;
	width: 15px;
	height: 15px;
	color: var(--c4c-muted);
}

a.c4c-links__row:hover .c4c-links__arrow {
	color: var(--c4c-accent);
}

html body .c4c-links__all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.c4c-links__all .c4c-icon {
	width: 15px;
	height: 15px;
}

/* Contents list */

.c4c-terms-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4c-terms-toc__list li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 8px;
	padding: 9px 0;
	font-size: 13px;
}

.c4c-terms-toc__list li + li {
	border-top: 1px solid var(--c4c-border);
}

.c4c-terms-toc__number {
	color: var(--c4c-accent);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.c4c-terms-toc__list a {
	color: var(--c4c-text);
	text-decoration: none;
}

.c4c-terms-toc__list a:hover {
	color: var(--c4c-accent);
}

/* Artwork under a checklist panel */

.c4c-checklist__art {
	margin: 18px 0 0;
	text-align: center;
}

.c4c-checklist__art img {
	display: block;
	max-width: 150px;
	margin: 0 auto;
	height: auto;
}

@media (max-width: 640px) {
	.c4c-terms {
		padding: 20px;
	}

	/* The number column costs more than it gives on a narrow screen. */
	.c4c-terms__clauses,
	.c4c-terms__body,
	.c4c-terms--bar .c4c-terms__clauses,
	.c4c-terms--bar .c4c-terms__body,
	.c4c-terms__cards {
		padding-left: 0;
	}
}

/* ---------------------------------------------------------- policy sections */

.c4c-policy {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/*
 * The number sits in the card's top-left corner and the artwork below it, so
 * the text column starts clear of both.
 */
.c4c-policy__item {
	position: relative;
	display: grid;
	grid-template-columns: 152px minmax(0, 1fr);
	gap: 24px;
	padding: 26px 26px 26px 24px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
	background: var(--c4c-surface);
}

.c4c-policy__number {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(47, 208, 111, 0.14);
	color: var(--c4c-accent);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
}

.c4c-policy__art {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: start;
	margin-top: 22px;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface-2);
	overflow: hidden;
}

.c4c-policy__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c4c-policy__art .c4c-icon {
	width: 54px;
	height: 54px;
	color: var(--c4c-accent);
}

html body .c4c-policy__title {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--c4c-text);
}

.c4c-policy__body .c4c-prose {
	font-size: 14px;
	line-height: 1.7;
}

.c4c-policy__body .c4c-prose p:last-child {
	margin-bottom: 0;
}

/* Framed rows for a list of short principles. */

.c4c-checklist__list--boxed {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.c4c-checklist__list--boxed li {
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface-2);
}

.c4c-checklist__list--boxed .c4c-icon {
	flex: none;
	width: 30px;
	height: 30px;
	padding: 6px;
	border: 1px solid var(--c4c-border);
	border-radius: 9px;
	color: var(--c4c-accent);
}

@media (max-width: 760px) {
	.c4c-policy__item {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 56px;
	}

	.c4c-policy__art {
		max-width: 152px;
		margin-top: 0;
	}
}

/* -------------------------------------------------------------- single post */

/*
 * Full-bleed hero band. Same trick as the page heroes: the section is stretched
 * to the viewport with a negative margin and its own background, so it reads as
 * one surface with the header above it.
 */
.c4c-article-hero {
	position: relative;
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
	background: var(--c4c-hero-band, #02030e);
}

.c4c-article-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: 26px 0 34px;
}

.c4c-article-hero--art .c4c-article-hero__inner {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.c4c-article-hero__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 14px 0 12px;
	font-size: 12px;
	color: var(--c4c-muted);
}

/* A dot between the category and the reading time, as in the design. */
.c4c-article-hero__read::before {
	content: "•";
	margin-right: 10px;
	color: var(--c4c-border);
}

/*
 * html body prefix: the kit styles headings as ".elementor-kit-10 h1", which is
 * (0,1,1) and would otherwise win over a bare class.
 */
html body .c4c-article-hero__title {
	margin: 0 0 14px;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--c4c-text);
}

.c4c-article-hero__standfirst {
	margin: 0 0 20px;
	max-width: 54ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--c4c-muted);
}

.c4c-article-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0;
	font-size: 12px;
	color: var(--c4c-muted);
}

.c4c-article-hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.c4c-article-hero__meta .c4c-icon {
	width: 15px;
	height: 15px;
	color: var(--c4c-accent);
}

.c4c-article-hero__art img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--c4c-radius);
}

/* Key takeaways */

.c4c-takeaways {
	margin-bottom: 26px;
	padding: 20px 22px;
	border: 1px solid var(--c4c-purple);
	border-left-width: 3px;
	border-radius: var(--c4c-radius);
	background: rgba(109, 63, 240, 0.08);
}

.c4c-takeaways__title {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-takeaways__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: rgba(109, 63, 240, 0.2);
	color: #a78bfa;
}

.c4c-takeaways__icon .c4c-icon {
	width: 17px;
	height: 17px;
}

.c4c-takeaways .c4c-checklist__list {
	margin: 0;
}

/* Article text. The accent bar marks each top-level heading. */

/*
 * Section headings carry the accent bar. Articles are written with different
 * levels — some use H2, some H4 — so all three get the same treatment rather
 * than only the one the design happened to use.
 */
.c4c-article-body__content h2,
.c4c-article-body__content h3,
.c4c-article-body__content h4 {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 32px 0 12px;
	font-weight: 800;
	/* Anchored headings must clear the sticky header when jumped to. */
	scroll-margin-top: 90px;
}

.c4c-article-body__content h2 { font-size: 24px; }
.c4c-article-body__content h3 { font-size: 20px; }
.c4c-article-body__content h4 { font-size: 18px; }

.c4c-article-body__content h2::before,
.c4c-article-body__content h3::before,
.c4c-article-body__content h4::before {
	content: "";
	flex: none;
	align-self: center;
	width: 4px;
	height: 22px;
	border-radius: 2px;
	background: var(--c4c-accent);
}

.c4c-prose blockquote {
	margin: 24px 0;
	padding: 20px 24px;
	border: 1px solid var(--c4c-border);
	border-left: 3px solid var(--c4c-purple);
	border-radius: var(--c4c-radius);
	background: var(--c4c-surface);
	color: var(--c4c-text);
	font-size: 15px;
	line-height: 1.65;
}

.c4c-prose blockquote p:last-child {
	margin-bottom: 0;
}

.c4c-prose blockquote cite {
	display: block;
	margin-top: 10px;
	color: var(--c4c-muted);
	font-size: 13px;
	font-style: normal;
}

.c4c-prose a {
	color: var(--c4c-accent);
}

.c4c-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--c4c-radius-sm);
}

/* Share row */

.c4c-share {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--c4c-border);
}

.c4c-share__title {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

html body .c4c-share__button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--c4c-border);
	border-radius: 12px;
	background: var(--c4c-surface);
	color: var(--c4c-text);
	cursor: pointer;
}

html body .c4c-share__button:hover {
	border-color: #2f3a4d;
	background: var(--c4c-surface-2);
}

.c4c-share__button .c4c-icon {
	width: 19px;
	height: 19px;
}

.c4c-share__button--facebook { color: #4c86ff; }
.c4c-share__button--telegram { color: #38b0e3; }
.c4c-share__button--reddit   { color: #ff5722; }
.c4c-share__button--link     { color: var(--c4c-muted); }

/* Author card */

.c4c-author__body {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.c4c-author__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	height: 52px;
	border: 1px solid var(--c4c-accent);
	border-radius: 50%;
	background: rgba(47, 208, 111, 0.1);
	color: var(--c4c-accent);
}

.c4c-author__avatar .c4c-icon {
	width: 24px;
	height: 24px;
}

.c4c-author__name {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-author__bio {
	margin: 0;
	font-size: 12px;
	line-height: 1.55;
	color: var(--c4c-muted);
}

html body .c4c-author__link,
html body .c4c-popular__all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.c4c-author__link .c4c-icon,
.c4c-popular__all .c4c-icon {
	width: 15px;
	height: 15px;
}

/* Table of contents */

.c4c-toc__list a {
	color: var(--c4c-text);
	font-size: 13px;
	text-decoration: none;
}

.c4c-toc__list a:hover {
	color: var(--c4c-accent);
}

/* Compact sidebar article list: thumbnail, title and date only. */
.c4c-popular--compact .c4c-article-row .c4c-cat-chip {
	display: none;
}

/* Related articles */

.c4c-related {
	margin-top: 34px;
}

.c4c-related__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--c4c-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.c4c-related__all .c4c-icon {
	width: 14px;
	height: 14px;
}

@media (max-width: 900px) {
	.c4c-article-hero--art .c4c-article-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	html body .c4c-article-hero__title {
		font-size: 28px;
	}

	.c4c-article-body__content h2 {
		font-size: 20px;
	}
}

/* ------------------------------------------------------------------- contact */

/* The design marks these headings with a short accent bar, as on the guide grid. */
.c4c-panel__title--bar::before {
	content: "";
	flex: none;
	width: 4px;
	height: 20px;
	margin-right: 10px;
	border-radius: 2px;
	background: var(--c4c-accent);
}

.c4c-panel__title--bar {
	justify-content: flex-start;
	font-size: 20px;
	font-weight: 800;
}

.c4c-faq-panel__more {
	margin: 16px 0 0;
	text-align: center;
}

.c4c-faq-panel__more a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--c4c-purple-text, #a78bfa);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.c4c-faq-panel__more a:hover {
	color: var(--c4c-accent);
}

.c4c-faq-panel__more .c4c-icon {
	width: 14px;
	height: 14px;
}

.c4c-contact-form__intro,
.c4c-channels__intro {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--c4c-muted);
}

/* The message form */

.c4c-contact__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
}

.c4c-contact__field {
	margin: 0 0 12px;
}

html body .c4c-contact__field input,
html body .c4c-contact__field textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface-2);
	color: var(--c4c-text);
	font-size: 13px;
	line-height: 1.5;
	font-family: inherit;
}

html body .c4c-contact__field textarea {
	min-height: 148px;
	resize: vertical;
}

html body .c4c-contact__field input::placeholder,
html body .c4c-contact__field textarea::placeholder {
	color: var(--c4c-muted);
}

html body .c4c-contact__field input:focus,
html body .c4c-contact__field textarea:focus {
	outline: 2px solid var(--c4c-accent);
	outline-offset: 1px;
}

.c4c-contact__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 18px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--c4c-muted);
}

.c4c-contact__consent input {
	flex: none;
	margin-top: 2px;
	accent-color: var(--c4c-accent);
}

.c4c-contact__consent a {
	color: var(--c4c-accent);
}

html body .c4c-contact__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.c4c-contact__footnote {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--c4c-muted);
}

.c4c-contact__footnote .c4c-icon {
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 1px;
	color: var(--c4c-accent);
}

/* The channel list */

.c4c-channels__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4c-channel {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 15px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface-2);
}

.c4c-channel__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border: 1px solid var(--c4c-border);
	border-radius: 11px;
}

.c4c-channel__icon .c4c-icon {
	width: 20px;
	height: 20px;
}

.c4c-channel--purple .c4c-channel__icon { color: #a78bfa; background: rgba(109, 63, 240, 0.14); }
.c4c-channel--green  .c4c-channel__icon { color: #34d399; background: rgba(47, 208, 111, 0.13); }
.c4c-channel--blue   .c4c-channel__icon { color: #60a5fa; background: rgba(59, 130, 246, 0.14); }
.c4c-channel--orange .c4c-channel__icon { color: #fb923c; background: rgba(249, 115, 22, 0.14); }

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

.c4c-channel__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c4c-text);
}

.c4c-channel__value {
	margin: 3px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--c4c-muted);
	overflow-wrap: anywhere;
}

html body .c4c-channel__button {
	flex: none;
	padding: 9px 14px;
	border: 1px solid var(--c4c-accent);
	border-radius: var(--c4c-radius-sm);
	background: transparent;
	color: var(--c4c-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

html body .c4c-channel__button:hover {
	background: rgba(47, 208, 111, 0.12);
}

html body .c4c-channel__icon-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--c4c-border);
	border-radius: 9px;
	background: transparent;
	color: var(--c4c-muted);
	cursor: pointer;
}

html body .c4c-channel__icon-button:hover {
	color: var(--c4c-text);
	border-color: #2f3a4d;
}

.c4c-channel__icon-button .c4c-icon {
	width: 16px;
	height: 16px;
}

/* Confirmation after a copy, positioned so it cannot resize the row. */
.c4c-channel__copied {
	position: absolute;
	right: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%);
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--c4c-accent);
	color: #06210f;
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 520px) {
	.c4c-channel {
		flex-wrap: wrap;
	}

	.c4c-channel__body {
		flex: 1 1 100%;
		order: 3;
	}
}

/* --------------------------------------------------------------- prose panel */

.c4c-prose-panel {
	padding: 28px;
	/*
	 * The same panel is used in a wide content column and in a narrow sidebar.
	 * A viewport media query cannot tell those apart — the sidebar is narrow at
	 * every screen size — so the panel measures itself instead.
	 */
	container-type: inline-size;
}

.c4c-prose-panel__grid {
	display: grid;
	gap: 28px 52px;
	align-items: start;
}

/* Text left, ticked criteria right. */
.c4c-prose-panel--list .c4c-prose-panel__grid {
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

/* Artwork left, text right. */
.c4c-prose-panel--image .c4c-prose-panel__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

/* Text left, artwork right. */
.c4c-prose-panel--image-right .c4c-prose-panel__grid {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.c4c-prose-panel--image-right .c4c-prose-panel__art {
	order: 2;
}

/* Artwork above the text, for a narrow card. */
.c4c-prose-panel--image-top .c4c-prose-panel__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.c4c-prose-panel--image-top .c4c-prose-panel__art {
	order: -1;
	text-align: center;
}

.c4c-prose-panel--image-top .c4c-prose-panel__art img {
	max-width: 220px;
	margin: 0 auto;
}

/*
 * In a sidebar the artwork becomes a small fixed column so the heading and text
 * still fit. Must come after the variants above, which it overrides.
 */
@container (max-width: 480px) {
	.c4c-prose-panel--image .c4c-prose-panel__grid,
	.c4c-prose-panel--image-right .c4c-prose-panel__grid {
		grid-template-columns: 68px minmax(0, 1fr);
		gap: 16px;
	}

	.c4c-prose-panel--list .c4c-prose-panel__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.c4c-prose-panel__main .c4c-checklist__list {
	margin: 16px 0 0;
}

html body .c4c-prose-panel__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding: 13px 22px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.c4c-prose-panel__art img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--c4c-radius-sm);
}

.c4c-prose-panel__eyebrow {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c4c-accent);
}

.c4c-prose-panel__title {
	margin: 0 0 10px;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--c4c-text);
}

.c4c-prose-panel__lead {
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--c4c-accent);
}

.c4c-prose-panel__aside-title {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--c4c-text);
}

.c4c-prose-panel__aside .c4c-checklist__list {
	margin: 0;
}

/* The footer row is drawn inside the same card, divided off by a hairline. */
.c4c-prose-panel__footer {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--c4c-border);
}

/* Figures row */

.c4c-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 8px;
}

.c4c-stats__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 18px;
	border-left: 1px solid var(--c4c-border);
}

.c4c-stats__item:first-child {
	border-left: 0;
	padding-left: 0;
}

.c4c-stats__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border: 1px solid var(--c4c-border);
	border-radius: 12px;
	background: var(--c4c-surface-2);
	color: var(--c4c-purple);
}

.c4c-stats__icon .c4c-icon {
	width: 22px;
	height: 22px;
}

.c4c-stats__value {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--c4c-accent);
}

.c4c-stats__label {
	margin: 3px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--c4c-muted);
}

/* Features row: the trust bar without its own card chrome. */
.c4c-trust--flat {
	padding: 22px 0 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--c4c-border);
	border-radius: 0;
}

.c4c-trust--flat .c4c-trust__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border: 1px solid var(--c4c-border);
	border-radius: 12px;
	background: var(--c4c-surface-2);
}

.c4c-trust--flat .c4c-trust__icon .c4c-icon {
	width: 20px;
	height: 20px;
}

@media (max-width: 900px) {
	.c4c-prose-panel--list .c4c-prose-panel__grid,
	.c4c-prose-panel--image .c4c-prose-panel__grid,
	.c4c-prose-panel--image-right .c4c-prose-panel__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Artwork below the text it illustrates rather than above the heading. */
	.c4c-prose-panel--image .c4c-prose-panel__art {
		order: 2;
	}

	.c4c-stats__item,
	.c4c-trust--flat .c4c-trust__item {
		padding-left: 0;
		border-left: 0;
	}
}

/* -------------------------------------------------------------------- guides */

.c4c-guide-tabs {
	flex-wrap: nowrap;
	gap: 0;
	padding: 0;
	overflow-x: auto;
}

.c4c-guide-tabs .c4c-news-tabs__item {
	flex: 1 1 0;
	justify-content: center;
	padding: 15px 10px;
	border-radius: 0;
	border-left: 1px solid var(--c4c-border);
}

.c4c-guide-tabs .c4c-news-tabs__item:first-child {
	border-left: 0;
}

/* Heading row: title on the left, sort control pushed to the right. */

.c4c-guide-grid__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

/* The design marks the heading with a short accent bar rather than an icon. */
.c4c-guide-grid__header .c4c-section__title::before {
	content: "";
	flex: none;
	width: 4px;
	height: 22px;
	border-radius: 2px;
	background: var(--c4c-accent);
}

.c4c-guide-sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

.c4c-guide-sort select {
	padding: 10px 14px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface);
	color: var(--c4c-text);
	font-size: 13px;
}

/* With JavaScript the select submits itself, so the button is not needed. */
.c4c-guide-sort.is-auto .c4c-guide-sort__submit {
	display: none;
}

.c4c-guide-grid__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
	gap: 16px;
}

/* Popular Guides: numbered rows */

.c4c-article-row--ranked {
	grid-template-columns: 24px 62px minmax(0, 1fr);
	align-items: start;
}

.c4c-article-row__rank {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--c4c-surface-2);
	color: var(--c4c-muted);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

/* Only the leading entry is highlighted, as in the design. */
.c4c-popular--ranked .c4c-article-row:first-child .c4c-article-row__rank {
	background: var(--c4c-gold);
	color: #2a1c00;
}

/* Guide Categories list */

.c4c-guide-cats__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4c-guide-cats__item + .c4c-guide-cats__item {
	border-top: 1px solid var(--c4c-border);
}

.c4c-guide-cats__item a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	color: var(--c4c-text);
	font-size: 13px;
	text-decoration: none;
}

.c4c-guide-cats__item a:hover .c4c-guide-cats__name {
	color: var(--c4c-accent);
}

.c4c-guide-cats__item .c4c-icon {
	flex: none;
	width: 17px;
	height: 17px;
}

.c4c-guide-cats__item--purple .c4c-icon { color: var(--c4c-purple); }
.c4c-guide-cats__item--green  .c4c-icon { color: var(--c4c-accent); }
.c4c-guide-cats__item--blue   .c4c-icon { color: #60a5fa; }
.c4c-guide-cats__item--orange .c4c-icon { color: #fb923c; }

.c4c-guide-cats__name {
	flex: 1 1 auto;
	min-width: 0;
}

.c4c-guide-cats__count {
	flex: none;
	font-size: 12px;
	color: var(--c4c-muted);
}

html body .c4c-guide-cats__all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.c4c-guide-cats__all .c4c-icon {
	width: 15px;
	height: 15px;
}

/* Single guide */

.c4c-guide {
	max-width: 820px;
	margin: 0 auto;
}

.c4c-guide__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 20px;
}

.c4c-guide__title {
	margin: 0;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--c4c-text);
}

.c4c-guide__header .c4c-article__meta {
	margin: 0;
	padding-top: 0;
	border-top: 0;
	font-size: 12px;
}

.c4c-guide__media {
	margin: 0 0 22px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
	overflow: hidden;
}

.c4c-guide__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Article text. The kit sets a 2em line height that would space this out. */
.c4c-prose {
	font-size: 15px;
	line-height: 1.75;
	color: var(--c4c-muted);
}

.c4c-prose p {
	margin: 0 0 16px;
}

.c4c-prose h2,
.c4c-prose h3 {
	margin: 28px 0 10px;
	line-height: 1.3;
	color: var(--c4c-text);
}

.c4c-prose h2 { font-size: 22px; }
.c4c-prose h3 { font-size: 18px; }

.c4c-prose ul,
.c4c-prose ol {
	margin: 0 0 16px;
	padding-left: 20px;
}

.c4c-prose li {
	margin-bottom: 6px;
}

.c4c-prose strong {
	color: var(--c4c-text);
}

.c4c-guide__related {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--c4c-border);
}

.c4c-guide__related .c4c-section__header {
	margin-bottom: 16px;
}

@media (max-width: 640px) {
	.c4c-guide-grid__header {
		align-items: flex-start;
	}

	.c4c-guide-sort,
	.c4c-guide-sort select {
		width: 100%;
	}

	.c4c-guide__title {
		font-size: 24px;
	}
}

/* --------------------------------------------------------------- bonus table */

/*
 * The tab strip spans the table and divides the width between the seven bonus
 * types, as in the design, rather than sitting as loose pills on the left.
 */
.c4c-bonus__tabs {
	flex-wrap: nowrap;
	gap: 0;
	padding: 0;
	margin-bottom: 14px;
	overflow-x: auto;
}

.c4c-bonus__tabs .c4c-news-tabs__item {
	flex: 1 1 0;
	justify-content: center;
	padding: 15px 10px;
	border-radius: 0;
	border-left: 1px solid var(--c4c-border);
}

.c4c-bonus__tabs .c4c-news-tabs__item:first-child {
	border-left: 0;
}

.c4c-bonus-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	padding: 14px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
	background: var(--c4c-surface);
}

/* The design pushes the sort control to the far right of the filter bar. */
.c4c-bonus-filter__sort {
	margin-left: auto;
}

.c4c-bonus-filter__search {
	position: relative;
	flex: 0 1 260px;
	min-width: 0;
	display: block;
}

.c4c-bonus-filter__search input {
	width: 100%;
	padding: 11px 38px 11px 14px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-bg);
	color: var(--c4c-text);
	font-size: 13px;
}

.c4c-bonus-filter__search .c4c-icon {
	position: absolute;
	top: 50%;
	right: 13px;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	color: var(--c4c-muted);
	pointer-events: none;
}

.c4c-bonus-filter__select select {
	padding: 11px 14px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-bg);
	color: var(--c4c-text);
	font-size: 13px;
}

.c4c-bonus-filter__submit {
	flex: none;
}

/* With JavaScript the selects submit themselves, so the button is not needed. */
.c4c-bonus-filter.is-auto .c4c-bonus-filter__submit {
	display: none;
}

/* The table itself */

.c4c-bonus__table {
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
	background: var(--c4c-surface);
	overflow: hidden;
}

/*
 * Column widths follow the design: casino ~20%, bonus details ~33%, value ~16%,
 * rating ~18%, action ~13%, with a fixed track in front for the rank badge.
 */
.c4c-bonus__headings,
.c4c-bonus-row {
	display: grid;
	grid-template-columns: 40px minmax(112px, 1.30fr) minmax(230px, 2.20fr) minmax(104px, 1.10fr) minmax(104px, 1.20fr) minmax(136px, 0.95fr);
	align-items: center;
	gap: 14px;
}

.c4c-bonus__headings {
	padding: 13px 18px;
	border-bottom: 1px solid var(--c4c-border);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c4c-muted);
}

/* The first grid cell of the heading row lines up with the rank column. */
.c4c-bonus__headings span:first-child {
	grid-column: 2;
}

.c4c-bonus-row {
	position: relative;
	padding: 16px 18px;
	border-top: 1px solid var(--c4c-border);
}

.c4c-bonus-row:first-of-type {
	border-top: 0;
}

/* The badge hangs from the top edge of the row, as in the design. */
.c4c-bonus-row__rank {
	align-self: start;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 26px;
	height: 34px;
	padding-top: 4px;
	background: var(--c4c-surface-2);
	color: var(--c4c-muted);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}

.c4c-bonus-row--rank-1 .c4c-bonus-row__rank { background: var(--c4c-gold); color: #2a1c00; }
.c4c-bonus-row--rank-2 .c4c-bonus-row__rank { background: #c3cad4; color: #1b2029; }
.c4c-bonus-row--rank-3 .c4c-bonus-row__rank { background: #c9835a; color: #2a1608; }

.c4c-bonus-row__brand img {
	display: block;
	width: 100%;
	max-height: 46px;
	height: auto;
	object-fit: contain;
	object-position: left center;
}

.c4c-bonus-row__details {
	line-height: 1.4;
}

.c4c-bonus-row__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 6px;
}

.c4c-bonus-row__chips .c4c-chip {
	margin-bottom: 0;
}

.c4c-bonus-row__headline {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c4c-text);
}

.c4c-bonus-row__extra {
	margin: 1px 0 0;
	font-size: 13px;
	line-height: 1.3;
	color: var(--c4c-muted);
}

/* The crypto chip row sits directly under the offer text in the design. */
.c4c-bonus-row__details .c4c-crypto {
	margin-top: 7px;
}

.c4c-bonus-row__value {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.25;
	text-align: left;
}

.c4c-bonus-row__value-label {
	font-size: 11px;
	color: var(--c4c-muted);
}

.c4c-bonus-row__value-figure {
	font-size: 21px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--c4c-accent);
}

.c4c-bonus-row__value-note {
	font-size: 11px;
	color: var(--c4c-muted);
}

.c4c-bonus-row__rating {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	line-height: 1.3;
}

.c4c-bonus-row__rating .c4c-stars {
	margin: 0;
}

.c4c-bonus-row__score {
	font-size: 12px;
	color: var(--c4c-muted);
}

.c4c-bonus-row__review {
	font-size: 11px;
	color: var(--c4c-accent);
	text-decoration: underline;
}

.c4c-bonus-row__actions {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

html body .c4c-bonus-row__actions .c4c-btn {
	width: 100%;
	padding: 9px 12px;
	font-size: 11px;
	line-height: 1.2;
}

.c4c-bonus__more {
	margin-top: 16px;
}

/*
 * Below 1024px the five data columns no longer fit side by side, so the row
 * becomes a two column card: brand and value on top, details and actions below.
 */
@media (max-width: 1024px) {
	.c4c-bonus__headings {
		display: none;
	}

	.c4c-bonus-row {
		grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		row-gap: 10px;
	}

	.c4c-bonus-row__brand   { grid-column: 2; }
	.c4c-bonus-row__value   { grid-column: 3; text-align: right; align-items: flex-end; }
	.c4c-bonus-row__details { grid-column: 2 / -1; }
	.c4c-bonus-row__rating  { grid-column: 2; }
	.c4c-bonus-row__actions { grid-column: 3; }
}

@media (max-width: 560px) {
	.c4c-bonus-row {
		grid-template-columns: 34px minmax(0, 1fr);
	}

	.c4c-bonus-row__value,
	.c4c-bonus-row__actions {
		grid-column: 2;
	}

	.c4c-bonus-row__value {
		text-align: left;
		align-items: flex-start;
	}

	.c4c-bonus-filter__select,
	.c4c-bonus-filter__select select {
		width: 100%;
	}
}

/* ------------------------------------------------------------ payment methods */

.c4c-pay__header,
.c4c-pay__group-header,
.c4c-checklist__header,
.c4c-cta__copy {
	display: flex;
	align-items: center;
	gap: 14px;
}

.c4c-pay__header {
	margin-bottom: 18px;
}

.c4c-pay__header-icon,
.c4c-pay__group-icon,
.c4c-checklist__icon,
.c4c-cta__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	border: 1px solid rgba(47, 208, 111, 0.35);
	border-radius: 12px;
	background: var(--c4c-accent-soft);
	color: var(--c4c-accent);
}

.c4c-pay__header-icon .c4c-icon,
.c4c-pay__group-icon .c4c-icon,
.c4c-checklist__icon .c4c-icon,
.c4c-cta__icon .c4c-icon {
	width: 24px;
	height: 24px;
}

.c4c-pay__title {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-pay__intro {
	margin: 0;
	font-size: 13px;
	color: var(--c4c-muted);
}

.c4c-pay__tabs {
	margin-bottom: 20px;
}

.c4c-pay__group {
	margin-bottom: 20px;
}

.c4c-pay__group-header {
	margin-bottom: 18px;
}

.c4c-pay__group-title {
	margin: 0 0 3px;
	font-size: 18px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-pay__group-blurb {
	margin: 0;
	font-size: 12px;
	color: var(--c4c-muted);
}

/*
 * The minimum is sized so the five cryptocurrencies sit on one row inside the
 * main column, exactly as the design shows, while the three-card fiat and
 * e-wallet groups spread to fill the same width.
 */
.c4c-pay__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
	gap: 12px;
}

/* One payment method */

/*
 * Cards in a row stretch to the tallest, and the button used to sit at the
 * bottom and close the card off. Without it the content is centred instead, so
 * a card whose name runs to two lines does not leave a hole under a card whose
 * name fits on one.
 */
.c4c-pay-card {
	--pay-accent: var(--c4c-accent);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 14px 16px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface-2);
	text-align: center;
}

.c4c-pay-card:hover {
	border-color: color-mix(in srgb, var(--pay-accent) 55%, transparent);
}

.c4c-pay-card__badge--coin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--pay-accent);
	color: #fff;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

/*
 * Brand wordmarks are set in the site's own type rather than shipped as logo
 * files: the marks in the design are trademarks, and reproducing them would mean
 * hosting each brand's asset with its own usage terms.
 */
.c4c-pay-card__badge--wordmark {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 6px;
	color: var(--pay-accent);
	font-size: 21px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.c4c-pay-card__name {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c4c-text);
}

.c4c-pay-card__features {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	margin: 2px 0 4px;
	padding: 0;
	list-style: none;
}

.c4c-pay-card__features li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	text-align: left;
	color: var(--c4c-muted);
}

.c4c-pay-card__features .c4c-icon {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--c4c-accent);
}

.c4c-pay-card__cta {
	width: 100%;
	margin-top: auto;
	background: var(--pay-accent);
	color: #06210f;
	font-size: 11px;
}

.c4c-pay-card__cta:hover,
.c4c-pay-card__cta:focus-visible {
	filter: brightness(1.08);
	color: #06210f;
}

/* Checklist panel */

.c4c-checklist__header {
	margin-bottom: 16px;
}

.c4c-checklist__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c4c-text);
}

.c4c-checklist__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4c-checklist__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--c4c-text);
}

.c4c-checklist__list .c4c-icon {
	width: 17px;
	height: 17px;
	margin-top: 1px;
	flex: none;
	color: var(--c4c-accent);
}

/* FAQ panel */

.c4c-faq-panel__items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.c4c-faq-panel .c4c-faq__item {
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface-2);
}

.c4c-faq-panel .c4c-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 14px;
	font-size: 13px;
	line-height: 1.4;
}

.c4c-faq-panel .c4c-faq__question::before {
	content: none;
}

.c4c-faq-panel .c4c-faq__question::after {
	content: "";
	width: 8px;
	height: 8px;
	flex: none;
	border-right: 1.8px solid var(--c4c-muted);
	border-bottom: 1.8px solid var(--c4c-muted);
	transform: translateY(-2px) rotate(45deg);
}

.c4c-faq-panel .c4c-faq__item[open] .c4c-faq__question::after {
	transform: translateY(2px) rotate(-135deg);
}

.c4c-faq-panel .c4c-faq__answer {
	padding: 0 14px 13px;
}

/* Call to action */

.c4c-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 24px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
	background: var(--c4c-surface);
}

.c4c-cta__title {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-cta__title-accent {
	color: var(--c4c-accent);
}

.c4c-cta__text {
	margin: 0;
	font-size: 13px;
	color: var(--c4c-muted);
}

.c4c-cta__button {
	flex: none;
}

/*
 * Decorative artwork between the copy and the button. It is the first thing to
 * go when the band runs out of room, since it carries no information.
 */
.c4c-cta__art {
	flex: 0 1 auto;
	min-width: 0;
	line-height: 0;
}

.c4c-cta__art img {
	display: block;
	max-height: 84px;
	width: auto;
}

@media (max-width: 1100px) {
	.c4c-cta__art {
		display: none;
	}
}

.c4c-cta--panel {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	padding: 20px;
}

.c4c-cta--panel .c4c-cta__copy {
	align-items: center;
}

.c4c-cta--panel .c4c-cta__title {
	font-size: 17px;
}

.c4c-cta--panel .c4c-cta__button {
	width: 100%;
}

/* ---------------------------------------------------------------- newsletter */

.c4c-newsletter {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
	align-items: center;
	gap: 24px;
	padding: 26px;
	background: var(--c4c-surface);
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
}

.c4c-newsletter__copy {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.c4c-newsletter__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	border: 1px solid rgba(47, 208, 111, 0.4);
	border-radius: 10px;
	background: var(--c4c-accent-soft);
	color: var(--c4c-accent);
}

.c4c-newsletter__icon .c4c-icon {
	width: 24px;
	height: 24px;
}

.c4c-newsletter__words {
	min-width: 0;
}

.c4c-newsletter__title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-newsletter__text {
	margin: 0;
	font-size: 13px;
	color: var(--c4c-muted);
}

.c4c-newsletter__benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.c4c-newsletter__benefits li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--c4c-muted);
}

.c4c-newsletter__benefits .c4c-icon {
	width: 15px;
	height: 15px;
	color: var(--c4c-accent);
}

/* Feature band: copy and form on the left, artwork on the right. */

.c4c-newsletter--feature {
	grid-template-columns: minmax(0, 1fr) minmax(160px, 250px);
	align-items: center;
	gap: 20px;
	padding: 24px 26px;
}

.c4c-newsletter--feature .c4c-newsletter__form {
	grid-column: 1;
	grid-row: 2;
	margin-top: 16px;
}

.c4c-newsletter--feature .c4c-newsletter__art {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.c4c-newsletter__art-image {
	display: block;
	width: 100%;
	height: auto;
	/* The artwork sits on its own dark backdrop; feathering the edges keeps it
	   from reading as a pasted rectangle, as in the hero. */
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, #000 14%),
		linear-gradient(to left, transparent 0%, #000 10%),
		linear-gradient(to bottom, transparent 0%, #000 12%),
		linear-gradient(to top, transparent 0%, #000 10%);
	mask-image:
		linear-gradient(to right, transparent 0%, #000 14%),
		linear-gradient(to left, transparent 0%, #000 10%),
		linear-gradient(to bottom, transparent 0%, #000 12%),
		linear-gradient(to top, transparent 0%, #000 10%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Sidebar panel: everything stacked. */

.c4c-newsletter--panel {
	display: block;
	padding: 20px;
	background: var(--c4c-surface);
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
}

.c4c-newsletter--panel .c4c-newsletter__copy {
	align-items: center;
	gap: 12px;
}

.c4c-newsletter--panel .c4c-newsletter__title {
	font-size: 17px;
	margin: 0;
}

.c4c-newsletter--panel .c4c-newsletter__text {
	margin: 12px 0 0;
}

.c4c-newsletter--panel .c4c-newsletter__form {
	margin-top: 16px;
}

.c4c-newsletter--panel .c4c-subscribe {
	flex-direction: column;
}

.c4c-newsletter--panel .c4c-subscribe__button {
	width: 100%;
}

/* -------------------------------------------------------------- review page */

.c4c-review {
	color: var(--c4c-text);
}

.c4c-review__block {
	margin: 0 0 28px;
	padding: 22px;
	background: var(--c4c-surface);
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
}

.c4c-review__block h2 {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 700;
}

.c4c-review__block h3 {
	margin: 18px 0 8px;
	font-size: 15px;
	font-weight: 700;
}

.c4c-review__summary {
	margin: 0 0 28px;
	padding: 24px;
	background: var(--c4c-surface);
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
}

.c4c-review__score {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 14px;
}

.c4c-review__score-value {
	font-size: 38px;
	font-weight: 800;
	line-height: 1;
	color: var(--c4c-accent);
}

.c4c-review__score-max {
	color: var(--c4c-muted);
}

.c4c-review__score-word {
	font-size: 13px;
	color: var(--c4c-muted);
}

.c4c-review__lead {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--c4c-muted);
}

.c4c-review__highlights {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.c4c-review__highlights li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
}

.c4c-review__highlights .c4c-icon {
	width: 16px;
	height: 16px;
	margin-top: 3px;
	color: var(--c4c-accent);
}

.c4c-review__bonus {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

.c4c-review__bonus-extra,
.c4c-review__terms {
	margin: 6px 0 0;
	color: var(--c4c-muted);
	font-size: 14px;
	line-height: 1.6;
}

.c4c-review__sample {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--c4c-danger);
}

.c4c-review__header {
	margin-bottom: 24px;
}

.c4c-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 12px;
	color: var(--c4c-muted);
}

.c4c-breadcrumbs a {
	color: var(--c4c-muted);
	text-decoration: none;
}

.c4c-breadcrumbs a:hover {
	color: var(--c4c-accent);
}

.c4c-review__identity {
	display: flex;
	align-items: center;
	gap: 18px;
}

.c4c-review__logo img {
	max-width: 120px;
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.c4c-review__title {
	margin: 0;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--c4c-text);
}

.c4c-faq__item {
	border-bottom: 1px solid var(--c4c-border);
}

.c4c-faq__item:last-child {
	border-bottom: 0;
}

.c4c-faq__question {
	padding: 14px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--c4c-text);
	cursor: pointer;
	list-style: none;
}

.c4c-faq__question::-webkit-details-marker {
	display: none;
}

.c4c-faq__question::before {
	content: "+";
	display: inline-block;
	width: 18px;
	color: var(--c4c-accent);
	font-weight: 700;
}

.c4c-faq__item[open] .c4c-faq__question::before {
	content: "\2212";
}

.c4c-faq__answer {
	padding: 0 0 16px 18px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--c4c-muted);
}

.c4c-proscons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}

.c4c-proscons ul {
	margin: 0;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--c4c-muted);
}

.c4c-proscons__col--pro h3 { color: var(--c4c-accent); }
.c4c-proscons__col--con h3 { color: var(--c4c-danger); }

.c4c-facts {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.c4c-facts th,
.c4c-facts td {
	padding: 10px 0;
	border-bottom: 1px solid var(--c4c-border);
	text-align: left;
}

.c4c-facts th {
	width: 40%;
	font-weight: 600;
	color: var(--c4c-muted);
}

.c4c-responsible p {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--c4c-muted);
}

/* ------------------------------------------------------- kit style overrides */

/*
 * The active Elementor kit ships a global `button` rule (padding: 14px 30px)
 * whose stylesheet is printed after this one. `.elementor-kit-N button` scores
 * (0,1,1), so a single `body` prefix only ties and still loses on load order.
 * Each rule below therefore carries `html body` to score (0,1,2) and win
 * outright. Without this the rating stars and icon buttons inflate enough to
 * push the phone layout sideways.
 */
html body .c4c-btn {
	padding: 11px 18px;
	font-size: 14px;
	line-height: 1.2;
}

html body .c4c-btn--lg {
	padding: 15px 26px;
	font-size: 15px;
}

html body .c4c-bonus-card .c4c-btn {
	padding: 9px 12px;
	font-size: 11px;
}

html body .c4c-header__icon-btn {
	width: 42px;
	height: 40px;
	padding: 0;
}

html body .c4c-lang__toggle {
	height: 40px;
	padding: 0 12px;
	font-size: 13px;
}

html body .c4c-rating-picker__star {
	width: auto;
	min-width: 0;
	padding: 2px;
	line-height: 0;
}

html body .c4c-compare-toggle {
	width: auto;
	min-width: 0;
	height: auto;
	padding: 0;
	font-size: 11px;
	line-height: 1.3;
	text-transform: none;
}

html body .c4c-compare__remove {
	width: 20px;
	height: 20px;
	min-width: 0;
	padding: 0;
}

html body .c4c-subscribe__field,
html body .c4c-header__search input[type="search"] {
	padding: 13px 16px;
}

/*
 * Elementor's frontend stylesheet carries `.elementor img { height: auto;
 * max-width: 100% }`, which outranks a plain class and would stop the hero
 * artwork from being sized against its band.
 */
html body .c4c-hero__image {
	width: 48%;
	max-width: 620px;
	height: auto;
	max-height: 100%;
}

/* Compact buttons inside a casino row, matching the section artwork. */
html body .c4c-casino .c4c-btn {
	padding: 8px 12px;
	font-size: 11.5px;
	letter-spacing: 0.03em;
}

html body .c4c-casino__logo img {
	width: 100%;
	max-height: 46px;
	height: auto;
}

/*
 * Colours need the same treatment: the kit paints every <button> with the brand
 * green and every <a> with it too, which would turn the outlined controls into
 * solid green blocks and the secondary buttons into green text.
 */
html body .c4c-header__icon-btn,
html body .c4c-lang__toggle,
html body .c4c-rating-picker__star,
html body .c4c-compare-toggle,
html body .c4c-compare__remove {
	background: transparent;
	background-color: transparent;
	letter-spacing: normal;
	text-transform: none;
}

html body .c4c-header__icon-btn,
html body .c4c-lang__toggle {
	border: 1px solid var(--c4c-border);
	color: var(--c4c-text);
}

html body .c4c-header__icon-btn:hover,
html body .c4c-header__icon-btn:focus-visible,
html body .c4c-lang__toggle:hover,
html body .c4c-lang__toggle:focus-visible {
	border-color: var(--c4c-accent);
	color: var(--c4c-accent);
	background-color: transparent;
}

html body .c4c-rating-picker__star {
	border: 0;
	color: #394154;
}

html body .c4c-rating-picker__star.is-on {
	color: var(--c4c-gold);
}

html body .c4c-compare-toggle {
	border: 0;
	color: var(--c4c-muted);
}

html body .c4c-compare-toggle:hover,
html body .c4c-compare-toggle.is-active {
	color: var(--c4c-accent);
}

html body .c4c-compare__remove {
	border: 1px solid var(--c4c-border);
	background-color: var(--c4c-surface);
	color: var(--c4c-muted);
}

/* Anchor based buttons: the kit's `a` rule would recolour them. */
html body a.c4c-btn--play {
	background-color: var(--c4c-accent);
	color: #06210f;
}

html body a.c4c-btn--play:hover,
html body a.c4c-btn--play:focus-visible {
	background-color: var(--c4c-accent-strong);
	color: #06210f;
}

html body a.c4c-btn--review,
html body a.c4c-btn--ghost {
	background-color: transparent;
	color: var(--c4c-text);
}

html body a.c4c-btn--review:hover,
html body a.c4c-btn--review:focus-visible {
	color: var(--c4c-accent);
}

html body button.c4c-btn--primary {
	background-color: var(--c4c-purple);
	color: #fff;
}

html body .c4c-bonus-card a.c4c-btn {
	background-color: transparent;
	color: var(--card-accent);
}

html body .c4c-nav__list a {
	font-size: 14px;
	font-weight: 500;
	color: #e7eaf1;
}

html body .c4c-nav__list .sub-menu a {
	font-size: 13px;
}

html body .c4c-footer__links a {
	font-size: 13px;
	font-weight: 400;
	color: var(--c4c-muted);
}

html body .c4c-lang__list a,
html body .c4c-breadcrumbs a {
	font-size: 13px;
	font-weight: 500;
	color: var(--c4c-text);
}

html body .c4c-breadcrumbs a {
	font-size: 12px;
	color: var(--c4c-muted);
}

html body .c4c-section__link {
	font-size: 13px;
	font-weight: 600;
	color: var(--c4c-accent);
}

html body .c4c-news-item__title a,
html body .c4c-review-item {
	font-size: 13px;
	font-weight: 700;
	color: var(--c4c-text);
}

html body .c4c-news-item__category {
	font-size: 11px;
	font-weight: 500;
	color: var(--c4c-accent);
}

html body .c4c-compliance a,
html body .c4c-crypto__code {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

html body .c4c-nav__list a:hover,
html body .c4c-nav__list .current-menu-item > a,
html body .c4c-footer__links a:hover,
html body .c4c-breadcrumbs a:hover {
	color: var(--c4c-accent);
}

/*
 * Headings too: the kit sizes h1-h6 globally (h2 is 40px), which would blow the
 * component headings far past the design.
 */
html body .c4c-hero__title {
	font-size: clamp(32px, 4.4vw, 52px);
	font-weight: 800;
	line-height: 1.08;
	color: #fff;
}

html body .c4c-section__title,
html body .c4c-review__block h2 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--c4c-text);
}

html body .c4c-newsletter__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c4c-text);
}

html body .c4c-panel__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c4c-text);
}

html body .c4c-panel__subtitle,
html body .c4c-news-item__title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--c4c-text);
}

html body .c4c-trust__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c4c-text);
}

html body .c4c-footer__col-title {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	color: #fff;
}

html body .c4c-review__title {
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--c4c-text);
}

html body .c4c-review__block h3,
html body .c4c-proscons h3 {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

/* News page: article titles are h3/h4, which the kit sizes at 36px and 30px. */
html body .c4c-article__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

html body .c4c-article--featured .c4c-article__title {
	font-size: 18px;
}

html body .c4c-article-row__title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

html body .c4c-article__title a,
html body .c4c-article-row__title a {
	font-size: inherit;
	font-weight: inherit;
	color: var(--c4c-text);
}

html body .c4c-article__title a:hover,
html body .c4c-article-row__title a:hover {
	color: var(--c4c-accent);
}

html body .c4c-cat-chip {
	font-size: 10px;
	font-weight: 800;
	line-height: 1.3;
	color: #fff;
}

html body .c4c-cat-chip--green,
html body .c4c-cat-chip--orange {
	color: #06210f;
}

html body .c4c-article__excerpt {
	font-size: 13px;
	line-height: 1.6;
	color: var(--c4c-muted);
}

html body .c4c-article__meta,
html body .c4c-article__meta span {
	font-size: 11px;
	font-weight: 400;
	color: var(--c4c-muted);
}

html body .c4c-news-tabs__item {
	font-size: 13px;
	font-weight: 600;
}

html body .c4c-follow__text,
html body .c4c-newsletter__benefits li {
	font-size: 12px;
	font-weight: 400;
}

html body .c4c-news-grid__more a {
	font-size: 12px;
	font-weight: 700;
	color: var(--c4c-text);
}

/* Payment methods: the card name is an h4 and the group title an h3. */
html body .c4c-pay__title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--c4c-text);
}

html body .c4c-pay__group-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c4c-text);
}

html body .c4c-pay-card__name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c4c-text);
}

html body .c4c-checklist__title,
html body .c4c-cta__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c4c-text);
}

html body .c4c-cta--band .c4c-cta__title {
	font-size: 19px;
}

html body a.c4c-pay-card__cta {
	padding: 9px 12px;
	font-size: 11px;
	background-color: var(--pay-accent);
	color: #06210f;
}

html body .c4c-faq-panel .c4c-faq__question {
	font-size: 13px;
	font-weight: 600;
}

html body .c4c-pay-card__features li,
html body .c4c-checklist__list li {
	font-size: 13px;
	font-weight: 400;
}

html body .c4c-pay-card__features li {
	font-size: 12px;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
	.c4c-footer__main {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.c4c-footer__brand,
	.c4c-footer__responsible {
		grid-column: span 3;
	}

	.c4c-footer__responsible {
		text-align: left;
	}
}

@media (max-width: 980px) {
	/* Below this width the navigation collapses behind the burger. */
	.c4c-header__burger {
		display: flex;
	}

	.c4c-header__inner {
		gap: 14px;
	}

	.c4c-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 80;
		display: none;
		padding: 10px 24px 18px;
		background: #05070c;
		border-bottom: 1px solid var(--c4c-border);
	}

	.c4c-header {
		position: relative;
	}

	.c4c-header.is-menu-open .c4c-nav {
		display: block;
	}

	.c4c-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.c4c-nav__list a {
		padding: 11px 0;
	}

	.c4c-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		margin-left: 12px;
		border: 0;
		background: transparent;
		padding: 0 0 6px;
	}
}

@media (max-width: 1024px) {
	.c4c-hero__inner {
		padding: 40px 20px 44px;
	}

	.c4c-hero__content {
		max-width: 54%;
	}

	.c4c-trust__item {
		border-left: 0;
		padding: 0;
	}
}

/*
 * Below this width there is no room for copy and artwork side by side, so the
 * artwork drops to the bottom of the band and the shading turns vertical. The
 * heading and its call to action stay at the top, where they are readable and
 * remain the largest contentful paint.
 */
@media (max-width: 860px) {
	.c4c-hero__inner {
		padding: 34px 20px 190px;
	}

	.c4c-hero__content {
		max-width: none;
	}

	/*
	 * The backdrop is pinned to exactly the strip the inner padding reserves, so
	 * the artwork can never creep up behind the buttons no matter how long a
	 * translated heading runs.
	 */
	.c4c-hero__backdrop {
		top: auto;
		bottom: 0;
		height: 180px;
		max-width: none;
	}

	/*
	 * width:auto keeps the element box exactly the size of the picture. With
	 * object-fit letterboxing the box was wider than the image, so the edge mask
	 * faded empty space instead of the artwork's own border.
	 */
	html body .c4c-hero__image {
		top: 0;
		right: auto;
		bottom: auto;
		left: 50%;
		width: auto;
		max-width: none;
		height: 100%;
		max-height: none;
		object-fit: fill;
		transform: translateX(-50%);
	}

	.c4c-hero--scrim .c4c-hero__backdrop::after {
		background: linear-gradient(
			180deg,
			var(--c4c-hero-band) 0%,
			color-mix(in srgb, var(--c4c-hero-band) 70%, transparent) 28%,
			transparent 55%
		);
	}
}

@media (max-width: 860px) {
	.c4c-casino {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"brand score"
			"offer offer"
			"actions actions";
		row-gap: 14px;
		padding: 22px 16px 18px;
	}

	/*
	 * The compact desktop button would be a 32px touch target. On a phone the
	 * call to action is the whole point of the row, so it goes back to a size a
	 * thumb can hit comfortably.
	 */
	html body .c4c-casino .c4c-btn {
		padding: 12px 14px;
		font-size: 12.5px;
	}

	.c4c-casino__brand { grid-area: brand; }
	.c4c-casino__score { grid-area: score; }
	.c4c-casino__offer { grid-area: offer; }

	.c4c-casino__actions {
		grid-area: actions;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.c4c-casino__actions .c4c-btn {
		flex: 1 1 140px;
		width: auto;
	}

	.c4c-compliance,
	.c4c-compare-toggle {
		flex-basis: 100%;
	}

	.c4c-newsletter {
		grid-template-columns: 1fr;
	}

	/* The wide call-to-action band has no room for a side-by-side button here. */
	.c4c-cta--band {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.c4c-cta--band .c4c-cta__button {
		width: 100%;
	}

	/*
	 * Three link columns still fit in one row at this width, and 2 + 1 would
	 * leave an odd single column hanging. Two columns only below 520px, where
	 * the longer link labels start to run out of room.
	 */
	.c4c-footer__main {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.c4c-footer__brand,
	.c4c-footer__responsible {
		grid-column: span 3;
	}

	.c4c-subscribe {
		flex-wrap: wrap;
	}

	.c4c-subscribe__button {
		width: 100%;
	}
}

@media (max-width: 520px) {
	.c4c-section,
	.c4c-panel {
		padding: 16px;
	}

	/* Below this the three link columns are too narrow for their longest labels. */
	.c4c-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.c4c-footer__brand,
	.c4c-footer__responsible {
		grid-column: span 2;
	}

	/* Keep the header on one line on a phone. */
	.c4c-header__inner {
		gap: 10px;
		padding: 12px 16px;
	}

	.c4c-brand__mark {
		width: 28px;
		height: 28px;
	}

	.c4c-brand__top {
		font-size: 17px;
	}

	.c4c-brand__bottom {
		font-size: 9px;
		letter-spacing: 0.22em;
	}

	html body .c4c-header__icon-btn {
		width: 38px;
		height: 38px;
	}

	html body .c4c-lang__toggle {
		height: 38px;
		gap: 4px;
		padding: 0 8px;
	}

	.c4c-lang__toggle > .c4c-icon:first-child {
		display: none;
	}

	/* 15px, not 16, so the footer keeps lining up with Elementor's own gutter. */
	.c4c-footer__main,
	.c4c-footer__bar {
		padding-left: 15px;
		padding-right: 15px;
	}

	.c4c-rating-picker__star .c4c-icon {
		width: 22px;
		height: 22px;
	}

	.c4c-casino {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"brand"
			"offer"
			"score"
			"actions";
	}
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
	.c4c-btn,
	.c4c-chip-toggle span,
	.c4c-chip-link {
		transition: none;
	}

	.c4c-btn:hover,
	.c4c-btn:focus-visible {
		transform: none;
	}
}

/* ------------------------------------------------------------- info sections */

.c4c-info__section {
	padding-top: 22px;
	/* Anchored sections must clear the sticky header when jumped to. */
	scroll-margin-top: 90px;
}

.c4c-info__section:first-child {
	padding-top: 0;
}

.c4c-info__section + .c4c-info__section {
	margin-top: 26px;
	border-top: 1px solid var(--c4c-border);
}

html body .c4c-info__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--c4c-text);
	/* German compounds are long enough to overflow the card without this. */
	hyphens: auto;
	overflow-wrap: break-word;
}

.c4c-info__title::before {
	content: "";
	flex: none;
	width: 4px;
	height: 20px;
	border-radius: 2px;
	background: var(--c4c-accent);
}

.c4c-info__body {
	margin-bottom: 18px;
	padding-left: 16px;
}

.c4c-info__body :last-child {
	margin-bottom: 0;
}

/* Tip cards */

.c4c-info__tips {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding-left: 16px;
}

.c4c-info-tip {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 15px 16px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface-2);
}

.c4c-info-tip__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(47, 208, 111, 0.12);
	color: var(--c4c-accent);
}

.c4c-info-tip__icon .c4c-icon {
	width: 18px;
	height: 18px;
}

html body .c4c-info-tip__title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c4c-text);
}

.c4c-info-tip__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--c4c-muted);
}

/* Ticked list in two columns */

.c4c-info__ticks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
	padding-left: 16px;
}

/* Row of icons with a label under each */

.c4c-info__icons {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px 14px;
	margin: 0;
	padding: 4px 0 0 16px;
	list-style: none;
}

.c4c-info__icons li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	font-size: 13px;
	line-height: 1.45;
	color: var(--c4c-text);
	hyphens: auto;
	overflow-wrap: break-word;
}

.c4c-info__icon-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(47, 208, 111, 0.12);
	color: var(--c4c-accent);
}

.c4c-info__icon-badge .c4c-icon {
	width: 21px;
	height: 21px;
}

/* Highlighted note under a section */

.c4c-info__note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 18px 0 0 16px;
	padding: 14px 16px;
	border: 1px solid rgba(47, 208, 111, 0.35);
	border-left-width: 3px;
	border-radius: var(--c4c-radius-sm);
	background: rgba(47, 208, 111, 0.08);
}

.c4c-info__note-icon {
	flex: none;
	display: flex;
	color: var(--c4c-accent);
}

.c4c-info__note-icon .c4c-icon {
	width: 19px;
	height: 19px;
}

.c4c-info__note p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--c4c-text);
}

/*
 * The two column blocks have no room to stay side by side once the main column
 * narrows, and the icon row drops to two per line rather than shrinking further.
 */
@media (max-width: 860px) {
	.c4c-info__tips,
	.c4c-info__ticks {
		grid-template-columns: minmax(0, 1fr);
	}

	.c4c-info__icons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.c4c-info__body,
	.c4c-info__tips,
	.c4c-info__ticks,
	.c4c-info__icons {
		padding-left: 0;
	}

	.c4c-info__note {
		margin-left: 0;
	}
}

/* Artwork before the copy on a wide call to action band. */
.c4c-cta--art-start .c4c-cta__art {
	order: -1;
}

.c4c-cta--art-start .c4c-cta__copy {
	flex: 1 1 auto;
}

/* Small print under a newsletter form. */
.c4c-newsletter__footnote {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--c4c-muted);
}

/* -------------------------------------------------------------------- sitemap */

.c4c-sitemap {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.c4c-sitemap__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
	background: var(--c4c-surface);
}

/*
 * Room for two lines of title whether the title needs them or not, so the lists
 * in one row of cards all start at the same height. English fits on one line
 * everywhere; German and Norwegian do not.
 */
.c4c-sitemap__head {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
}

.c4c-sitemap__icon {
	display: flex;
	flex: none;
	color: var(--c4c-accent);
}

.c4c-sitemap__icon .c4c-icon {
	width: 24px;
	height: 24px;
}

.c4c-sitemap__number {
	flex: none;
	font-size: 15px;
	font-weight: 700;
	color: var(--c4c-accent);
	font-variant-numeric: tabular-nums;
}

html body .c4c-sitemap__title {
	margin: 0;
	min-width: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--c4c-text);
	/*
	 * Card titles are narrow, so Norwegian and German compounds must break
	 * rather than overflow. The title stays a plain block: making it a flex
	 * container gave its text an anonymous item with min-width auto, and
	 * "kasinoanmeldelser" then refused to break and ran past the card edge.
	 */
	hyphens: auto;
	overflow-wrap: break-word;
}

.c4c-sitemap__list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4c-sitemap__link {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--c4c-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.c4c-sitemap__link:hover {
	color: var(--c4c-accent);
}

/* The page the visitor is already on, so the map says "you are here". */
.c4c-sitemap__link.is-current {
	font-weight: 600;
	color: var(--c4c-accent);
}

.c4c-sitemap__tick {
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	padding: 2.5px;
	border: 1.4px solid var(--c4c-accent);
	border-radius: 50%;
	color: var(--c4c-accent);
}

@media (max-width: 1100px) {
	.c4c-sitemap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.c4c-sitemap {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Artwork above the copy on a sidebar call to action card. The wide band drops
 * its artwork below 1100px because it is competing for a row; a stacked card is
 * not, so this deliberately overrides that rule for the panel layout only.
 */
.c4c-cta--panel .c4c-cta__art {
	order: -1;
	display: flex;
	justify-content: center;
}

.c4c-cta--panel .c4c-cta__art img {
	max-height: 116px;
}

/* ---------------------------------------------------------------- guide hero */

/*
 * The 15px sides match the padding Elementor puts inside the columns below, so
 * the hero copy starts on the same line as the article card under it.
 */
.c4c-guide-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	align-items: center;
	gap: 40px;
	padding: 26px 15px 34px;
}

.c4c-guide-hero__copy {
	min-width: 0;
}

html body .c4c-guide-hero__title {
	margin: 14px 0 16px;
	font-size: 42px;
	font-weight: 800;
	line-height: 1.14;
	color: var(--c4c-text);
	/* German and Finnish guide titles are long compounds. */
	hyphens: auto;
	overflow-wrap: break-word;
}

.c4c-guide-hero__accent {
	color: var(--c4c-accent);
}

.c4c-guide-hero__lead {
	margin: 0 0 20px;
	max-width: 54ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--c4c-muted);
}

.c4c-guide-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	margin: 0;
	font-size: 13px;
	color: var(--c4c-muted);
}

.c4c-guide-hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.c4c-guide-hero__meta .c4c-icon {
	width: 15px;
	height: 15px;
	color: var(--c4c-accent);
}

.c4c-guide-hero__art {
	min-width: 0;
	line-height: 0;
}

.c4c-guide-hero__art img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--c4c-radius);
}

/* --------------------------------------------------------------- guide body */

.c4c-guide__intro {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 22px 24px;
	margin-bottom: 8px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
	background: var(--c4c-surface);
}

.c4c-guide__intro-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(47, 208, 111, 0.1);
	color: var(--c4c-accent);
}

.c4c-guide__intro-icon .c4c-icon {
	width: 30px;
	height: 30px;
}

.c4c-guide__intro p {
	margin: 0;
	font-size: 14px;
	line-height: 1.75;
	color: var(--c4c-text);
}

.c4c-guide__section {
	padding-top: 30px;
	/* Anchored sections must clear the sticky header when jumped to. */
	scroll-margin-top: 90px;
}

.c4c-guide__section-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 12px;
}

.c4c-guide__number {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(47, 208, 111, 0.14);
	color: var(--c4c-accent);
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

html body .c4c-guide__section-title {
	margin: 0;
	min-width: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--c4c-text);
	hyphens: auto;
	overflow-wrap: break-word;
}

/*
 * Everything under a heading lines up with the heading text rather than with
 * the number badge, so the column of prose reads as one block.
 */
.c4c-guide__section > .c4c-prose,
.c4c-guide__section > .c4c-guide-list,
.c4c-guide__section > .c4c-guide-steps {
	margin-left: 54px;
}

.c4c-guide__section > .c4c-prose p {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.75;
}

/* Ticked lists, boxed or bare */

.c4c-guide-list {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 18px;
}

.c4c-guide-list--boxed {
	padding: 18px 20px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
	background: var(--c4c-surface);
}

.c4c-guide-list--tips {
	border-color: rgba(47, 208, 111, 0.3);
	background: rgba(47, 208, 111, 0.05);
}

.c4c-guide-list__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	color: var(--c4c-accent);
}

.c4c-guide-list--tips .c4c-guide-list__icon {
	color: #a855f7;
}

.c4c-guide-list__icon .c4c-icon {
	width: 28px;
	height: 28px;
}

.c4c-guide-list__body {
	flex: 1 1 auto;
	min-width: 0;
}

html body .c4c-guide-list__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--c4c-text);
}

.c4c-guide-list__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A tip box reads as a single column of advice, not as a two column table. */
.c4c-guide-list--tips .c4c-guide-list__items {
	grid-template-columns: minmax(0, 1fr);
}

.c4c-guide-list__items li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--c4c-text);
}

.c4c-guide-list__items .c4c-icon {
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	padding: 2.5px;
	border: 1.4px solid var(--c4c-accent);
	border-radius: 50%;
	color: var(--c4c-accent);
}

/* The step row */

.c4c-guide-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px;
	margin: 4px 0 20px;
	padding: 0;
	list-style: none;
}

.c4c-guide-steps__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.c4c-guide-steps__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(47, 208, 111, 0.1);
	color: var(--c4c-accent);
}

.c4c-guide-steps__icon .c4c-icon {
	width: 28px;
	height: 28px;
}

html body .c4c-guide-steps__name {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c4c-text);
	hyphens: auto;
	overflow-wrap: break-word;
}

.c4c-guide-steps__text {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--c4c-muted);
}

/*
 * The arrow is centred in the grid gap, level with the icons, so it reaches
 * outside its own cell by design — the cell's scrollWidth grows by half an
 * arrow and nothing scrolls, because the row never clips. It is decorative, so
 * it disappears once the row stops being a row.
 */
.c4c-guide-steps__arrow {
	position: absolute;
	top: 31px;
	left: calc(100% + 13px);
	transform: translate(-50%, -50%);
	color: var(--c4c-muted);
	line-height: 0;
}

.c4c-guide-steps__arrow .c4c-icon {
	width: 20px;
	height: 20px;
}

/* Numbered contents list */

.c4c-toc--numbered .c4c-toc__list li {
	align-items: baseline;
}

.c4c-toc__number {
	flex: none;
	width: 18px;
	color: var(--c4c-accent);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
	.c4c-guide-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	html body .c4c-guide-hero__title {
		font-size: 34px;
	}

	.c4c-guide-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 10px;
	}

	.c4c-guide-steps__arrow {
		display: none;
	}
}

@media (max-width: 700px) {
	html body .c4c-guide-hero__title {
		font-size: 28px;
	}

	.c4c-guide__section > .c4c-prose,
	.c4c-guide__section > .c4c-guide-list,
	.c4c-guide__section > .c4c-guide-steps {
		margin-left: 0;
	}

	.c4c-guide-list__items {
		grid-template-columns: minmax(0, 1fr);
	}

	.c4c-guide__intro {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	html body .c4c-guide__section-title {
		font-size: 20px;
	}
}

@media (max-width: 480px) {
	.c4c-guide-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------- glossary */

.c4c-glossary__search {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}

.c4c-glossary__search .c4c-icon {
	position: absolute;
	left: 16px;
	width: 18px;
	height: 18px;
	color: var(--c4c-muted);
	pointer-events: none;
}

html body .c4c-glossary__field {
	width: 100%;
	padding: 14px 16px 14px 46px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface-2);
	color: var(--c4c-text);
	font-size: 14px;
}

html body .c4c-glossary__field:focus {
	outline: none;
	border-color: var(--c4c-accent);
}

.c4c-glossary__field::placeholder {
	color: var(--c4c-muted);
}

/* The A to Z filter */

.c4c-glossary__letters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

html body .c4c-glossary__letter {
	min-width: 38px;
	padding: 8px 10px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	background: var(--c4c-surface-2);
	color: var(--c4c-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	cursor: pointer;
}

html body .c4c-glossary__letter:hover:not(:disabled) {
	border-color: var(--c4c-accent);
}

html body .c4c-glossary__letter.is-active {
	border-color: var(--c4c-accent);
	background: var(--c4c-accent);
	color: #04140b;
}

/*
 * A letter no term starts with stays visible so the row keeps the shape of the
 * alphabet, but it cannot be picked: a filter that can only ever return nothing
 * is worse than no filter.
 */
html body .c4c-glossary__letter.is-empty {
	opacity: 0.35;
	cursor: default;
}

/* The terms */

.c4c-glossary__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.c4c-glossary__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius);
	background: var(--c4c-surface-2);
	/* Anchored terms must clear the sticky header when jumped to. */
	scroll-margin-top: 100px;
}

.c4c-glossary__item:target {
	border-color: var(--c4c-accent);
}

.c4c-glossary__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: rgba(47, 208, 111, 0.14);
	color: var(--c4c-accent);
	font-size: 16px;
	font-weight: 700;
}

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

html body .c4c-glossary__term {
	margin: 0 0 5px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: var(--c4c-text);
	text-transform: uppercase;
	hyphens: auto;
	overflow-wrap: break-word;
}

.c4c-glossary__definition {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--c4c-muted);
}

.c4c-glossary__anchor {
	display: flex;
	align-items: center;
	flex: none;
	align-self: center;
	color: var(--c4c-accent);
	text-decoration: none;
}

/* The chevron points the way a link does, not the way an accordion does. */
.c4c-glossary__anchor .c4c-icon {
	width: 20px;
	height: 20px;
	transform: rotate(-90deg);
}

.c4c-glossary__anchor:hover {
	color: var(--c4c-text);
}

.c4c-glossary__empty {
	margin: 18px 0 0;
	padding: 18px;
	border: 1px dashed var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	font-size: 13px;
	text-align: center;
	color: var(--c4c-muted);
}

@media (max-width: 560px) {
	.c4c-glossary__item {
		gap: 12px;
		padding: 14px;
	}

	html body .c4c-glossary__letter {
		min-width: 32px;
		padding: 7px 8px;
	}
}

/*
 * The purple call to action. Used where the design deliberately steps away from
 * the green accent to mark a card as an aside rather than the main action.
 */
.c4c-cta--purple {
	border-color: rgba(168, 85, 247, 0.35);
	background: linear-gradient(180deg, rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.02));
}

.c4c-cta--purple .c4c-cta__icon {
	background: rgba(168, 85, 247, 0.14);
	color: #c084fc;
}

html body .c4c-cta--purple .c4c-cta__button {
	border: 1px solid rgba(168, 85, 247, 0.55);
	background: rgba(168, 85, 247, 0.14);
	color: #d8b4fe;
	box-shadow: none;
}

html body .c4c-cta--purple .c4c-cta__button:hover {
	background: rgba(168, 85, 247, 0.24);
	color: #f3e8ff;
}

/* ------------------------------------------------------------------ the logo */

/*
 * The logo is a wide mark with a glow baked into its alpha channel, so it needs
 * no background of its own and sits on any surface. Height is what is fixed;
 * the width follows, and the intrinsic size in the markup keeps the header from
 * shifting while it loads.
 */
.c4c-logo {
	display: block;
	width: auto;
	height: auto;
}

.c4c-logo--footer {
	max-height: 52px;
}

/*
 * Height is set through the link rather than the image class so it applies
 * whichever path drew the mark — the attachment, an external URL on the widget,
 * or nothing at all. `.c4c-header__logo img` above already fixes it at 46px.
 */
@media (max-width: 900px) {
	.c4c-header__logo img {
		max-height: 38px;
	}

	.c4c-logo--footer {
		max-height: 44px;
	}
}

/* ------------------------------------------------- bonus cards, three across */

/*
 * On the homepage the three bonus cards share a third of the page with the
 * reviews and news panels, so the track has about 320px to hold all three. The
 * old 150px minimum could only fit two, which wrapped the third onto a second
 * row and left the column twice as tall as the two beside it.
 */
.c4c-bonuses__grid {
	grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
	gap: 10px;
}

/*
 * The card sizes itself from its own width rather than from the page, so the
 * same widget still reads correctly if it is ever given a wider column.
 */
.c4c-bonus-card {
	container-type: inline-size;
}

@container (max-width: 140px) {
	.c4c-bonus-card {
		padding: 12px 9px;
		gap: 9px;
	}

	.c4c-bonus-card__type {
		/*
		 * Finnish writes "Free Spins" as the single word "Ilmaiskierrokset",
		 * which is wider than the card. It breaks onto a second line rather
		 * than pushing the card out of its track.
		 */
		max-width: 100%;
		padding: 4px 8px;
		font-size: 9px;
		letter-spacing: 0.05em;
		line-height: 1.3;
		overflow-wrap: anywhere;
	}

	.c4c-bonus-card__value {
		margin: 2px 0;
	}

	.c4c-bonus-card__line {
		font-size: 13px;
	}

	.c4c-bonus-card__line--strong {
		font-size: 19px;
	}

	.c4c-bonus-card__icon {
		width: 52px;
		height: 52px;
		margin: 0;
	}

	.c4c-bonus-icon {
		border-radius: 11px;
		font-size: 22px;
	}

	.c4c-bonus-icon .c4c-icon {
		width: 28px;
		height: 28px;
	}

	.c4c-bonus-icon--coin {
		width: 48px;
		height: 48px;
		font-size: 24px;
	}

	/* Same `html body` reach as the rule this narrows, which exists to beat the kit. */
	html body .c4c-bonus-card .c4c-btn {
		padding: 7px 6px;
		font-size: 9px;
	}

	.c4c-compliance {
		font-size: 9px;
	}
}

/*
 * The design draws the homepage trio level at both edges. Elementor packs a
 * column's widgets to the top, so the panel is told to fill the row instead;
 * `:has()` keeps this to the three widgets that are actually side by side.
 */
.elementor-widget-wrap:has(> .elementor-widget-c4c-bonus-cards),
.elementor-widget-wrap:has(> .elementor-widget-c4c-latest-reviews),
.elementor-widget-wrap:has(> .elementor-widget-c4c-latest-news) {
	align-content: stretch;
}

.elementor-widget-c4c-bonus-cards,
.elementor-widget-c4c-latest-reviews,
.elementor-widget-c4c-latest-news {
	display: flex;
}

.elementor-widget-c4c-bonus-cards > .elementor-widget-container,
.elementor-widget-c4c-latest-reviews > .elementor-widget-container,
.elementor-widget-c4c-latest-news > .elementor-widget-container {
	width: 100%;
}

.c4c-bonuses,
.c4c-reviews,
.c4c-news {
	height: 100%;
}

/* Stacked on a narrow screen there is no row to level, and room for wider cards. */
@media (max-width: 1024px) {
	.c4c-bonuses,
	.c4c-reviews,
	.c4c-news {
		height: auto;
	}
}

/*
 * The same three panels share the row, so their headers have about 320px for a
 * title and a "view all" link that were sized for a full width section. At the
 * old sizes the link was squeezed until its text clipped. The panel is asked
 * about its own width rather than the viewport's, because what changed is the
 * column it sits in, not the screen.
 */
.c4c-bonuses,
.c4c-reviews,
.c4c-news {
	container-type: inline-size;
}

@container (max-width: 420px) {
	/* `html body` to reach past the kit, as elsewhere in this file. */
	html body .c4c-section__title {
		font-size: 15px;
	}

	html body .c4c-section__link {
		/* Never shrink: squeezing this is what clipped the label. */
		flex: none;
		font-size: 9px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.c4c-section__header {
		gap: 10px;
		align-items: baseline;
	}

	.c4c-section__link .c4c-icon {
		width: 13px;
		height: 13px;
	}
}

/* The note that marks a converted bonus figure as approximate. */
.c4c-compliance__converted {
	display: block;
	margin-top: 2px;
	opacity: 0.85;
}