/**
 * Compare Gold Brokers — landing page styles.
 *
 * Colours, fonts and spacing come from theme.json presets
 * (--wp--preset--* / --wp--custom--*). Nothing is hard-coded here except
 * layout maths. Mobile-first: base rules are the narrow layout, min-width
 * media queries widen it.
 */

/* ==========================================================================
   Fonts — self-hosted latin-subset variable files

   The unicode-range below is deliberate on a site that also runs in Thai and
   Chinese: the browser never downloads these files for a page of Thai or Han
   text, because none of those characters is in range. Those languages fall
   through to the system fonts named after Inter and Montserrat in theme.json —
   Leelawadee UI, PingFang SC and their equivalents — which are already on the
   reader's device. Shipping Thai and CJK webfonts instead would add megabytes
   and take Lighthouse below the 90 that CLAUDE.md §6 asks for.
   ========================================================================== */

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-var-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-var-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Vietnamese.
 *
 * Not optional the way the Thai and Chinese fallbacks are. Those scripts share
 * no characters with Latin, so a page of Thai falls back to a system font whole
 * and still looks deliberate. Vietnamese is Latin with diacritics: without
 * these two files the browser sets "Tieng Viet" in Inter but has to reach for a
 * system font for every ế, ệ and ư — a different typeface appearing mid-word.
 *
 * Same subsetting trick as above, so a reader who never opens /vi/ never
 * downloads them: together they are 23KB, and the unicode-range below is the
 * one Google Fonts uses for its own Vietnamese subset.
 */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-var-vietnamese.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-var-vietnamese.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ==========================================================================
   Base
   ========================================================================== */

.cgb-landing {
	margin: 0;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--on-background);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	line-height: var(--wp--custom--line-height--body-md);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.cgb-landing * {
	box-sizing: border-box;
}

.cgb-landing :where(h1, h2, h3, h4) {
	font-family: var(--wp--preset--font-family--headline);
	margin: 0;
}

.cgb-landing :where(p, ul, ol) {
	margin: 0;
}

.cgb-landing img,
.cgb-landing svg {
	max-width: 100%;
}

html {
	scroll-behavior: smooth;
}

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

	/*
	 * Every transition on this page is declared in this file, so naming them
	 * explicitly is enough — no !important needed (CLAUDE.md §7).
	 */
	.cgb-skip-link,
	.cgb-btn,
	.cgb-nav__link,
	.cgb-nav__list a,
	.cgb-footer__link {
		transition: none;
	}
}

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

.cgb-skip-link {
	position: absolute;
	top: -100px;
	left: var(--wp--preset--spacing--stack-md);
	z-index: 100;
	padding: 12px 20px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border-radius: var(--wp--custom--radius--lg);
	font-weight: 600;
	text-decoration: none;
	transition: top 0.2s ease;
}

.cgb-skip-link:focus {
	top: var(--wp--preset--spacing--stack-md);
}

.cgb-landing :where(a, button, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-container);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--lg);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.cgb-container {
	max-width: var(--wp--custom--container-max);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--stack-md);
}

@media (min-width: 768px) {
	.cgb-container {
		padding-inline: var(--wp--preset--spacing--margin-x);
	}
}

.cgb-section {
	padding-block: 48px;
	background-color: var(--wp--preset--color--background);
}

@media (min-width: 768px) {
	.cgb-section {
		padding-block: var(--wp--preset--spacing--section-padding);
	}
}

.cgb-section--flat {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}

.cgb-section--muted {
	background-color: var(--wp--preset--color--surface-container-low);
	border-block: 1px solid var(--wp--preset--color--outline-variant);
}

.cgb-section__title {
	font-size: var(--wp--preset--font-size--headline-lg-mobile);
	line-height: var(--wp--custom--line-height--headline-lg-mobile);
	letter-spacing: -0.01em;
	font-weight: 700;
	color: var(--wp--preset--color--on-surface);
	margin-bottom: var(--wp--preset--spacing--gutter);
}

@media (min-width: 768px) {
	.cgb-section__title {
		font-size: var(--wp--preset--font-size--headline-lg);
		line-height: var(--wp--custom--line-height--headline-lg);
		margin-bottom: var(--wp--preset--spacing--stack-lg);
	}
}

.cgb-section__title--center {
	text-align: center;
}

.cgb-lead {
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--line-height--body-lg);
	color: var(--wp--preset--color--on-surface-variant);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.cgb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--stack-sm);
	padding: 10px 24px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--lg);
	font-size: var(--wp--preset--font-size--label-md);
	line-height: var(--wp--custom--line-height--label-md);
	letter-spacing: 0.05em;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cgb-btn--lg {
	padding: 14px 32px;
}

.cgb-btn--primary {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary);
}

.cgb-btn--primary:hover,
.cgb-btn--primary:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.cgb-btn--outline {
	border-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary);
	background-color: transparent;
}

.cgb-btn--outline:hover,
.cgb-btn--outline:focus-visible {
	background-color: var(--wp--preset--color--surface-container-low);
}

.cgb-btn--ghost {
	border-color: #fff;
	color: #fff;
	background-color: transparent;
}

.cgb-btn--ghost:hover,
.cgb-btn--ghost:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
}

/*
 * Visit Site / Sign Up.
 *
 * Both are gold, which sets them apart from the navy "Read the … review" button
 * they sit under, and Sign Up is the solid one — that ordering is the point of
 * the pair.
 *
 * Sign Up uses --primary (#775a00) rather than --primary-container (#b48c1d) as
 * its fill: white on #b48c1d is only 3.1:1, which fails WCAG AA for body text,
 * while white on #775a00 is 6.1:1.
 */
.cgb-btn--visit {
	border-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--primary);
	background-color: transparent;
}

.cgb-btn--visit:hover,
.cgb-btn--visit:focus-visible {
	background-color: rgba(180, 140, 29, 0.1);
}

.cgb-btn--signup {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.cgb-btn--signup:hover,
.cgb-btn--signup:focus-visible {
	background-color: var(--wp--custom--color--on-primary-fixed-variant);
	color: var(--wp--preset--color--on-primary);
}

/*
 * No destination set yet. Shown so the client can see the button exists, but
 * rendered as a <span>, not a link to nowhere — the same treatment the footer
 * gives its unset links.
 */
.cgb-btn.is-placeholder {
	opacity: 0.5;
	cursor: default;
}

.cgb-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--stack-sm);
}

.cgb-ctas .cgb-btn {
	flex: 1 1 auto;
	justify-content: center;
}

/* Inside a table cell there is no room for two buttons side by side. */
.cgb-ctas--stacked {
	flex-direction: column;
}

/* ==========================================================================
   Header
   ========================================================================== */

/*
 * Leaderboard slot above the nav. Sits outside .cgb-header so it scrolls away
 * instead of taking 90px off every screen for the whole visit.
 */
.cgb-banner {
	padding-block: var(--wp--preset--spacing--stack-sm);
	padding-inline: var(--wp--preset--spacing--stack-md);
	background-color: var(--wp--preset--color--surface-container-low);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}

/*
 * Sitting under the menu, the strip needs a rule above it as well, or it reads
 * as part of the header bar rather than as an advertisement below it.
 */
.cgb-banner--below-header {
	border-top: 1px solid var(--wp--preset--color--outline-variant);
}

/*
 * Above the footer the divider belongs on top: the risk warning directly below
 * already draws its own top border, and two lines together look like a mistake.
 */
.cgb-banner--above-footer {
	border-top: 1px solid var(--wp--preset--color--outline-variant);
	border-bottom: 0;
}

/*
 * In the body of the page, between two content sections. It needs rules on both
 * sides and real breathing room, or it reads as part of the comparison table it
 * follows rather than as an advertisement between two things.
 */
.cgb-banner--after-compare-table {
	padding-block: var(--wp--preset--spacing--gutter);
	border-top: 1px solid var(--wp--preset--color--outline-variant);
	background-color: var(--wp--preset--color--surface-container-low);
}

/*
 * aspect-ratio does two jobs here: it reserves the height before the image has
 * loaded, so nothing below shifts, and it scales the slot down proportionally
 * on screens narrower than 728px without needing a media query.
 */
.cgb-banner__slot {
	width: 100%;
	max-width: 728px;
	aspect-ratio: 728 / 90;
	margin-inline: auto;
}

.cgb-banner__link {
	display: block;
	height: 100%;
}

/*
 * contain, not cover: artwork that is not exactly 728×90 gets letterboxed
 * rather than cropped. Cropping an advertisement can cut off the offer.
 */
.cgb-banner__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Only rendered for logged-in editors — see cgb_render_header_banner(). */
.cgb-banner__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding-inline: var(--wp--preset--spacing--stack-md);
	border: 2px dashed var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--label-md);
	line-height: var(--wp--custom--line-height--label-md);
	text-align: center;
}

.cgb-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}

.cgb-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--stack-md);
	max-width: var(--wp--custom--container-max);
	min-height: var(--wp--custom--nav-height);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--stack-md);
}

@media (min-width: 768px) {
	.cgb-header__inner {
		padding-inline: var(--wp--preset--spacing--margin-x);
	}
}

.cgb-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--stack-sm);
	text-decoration: none;
}

.cgb-brand__mark {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.cgb-brand__mark--sm {
	width: 32px;
	height: 32px;
}

/*
 * A logo chosen in Appearance → Customize → Site Identity. Sized by height with
 * a free width, because a real logo is usually a wide wordmark and the square
 * the bundled mark uses would squash it. max-width keeps a very wide one from
 * pushing the nav off the bar.
 */
.cgb-brand__mark.is-custom {
	width: auto;
	max-width: 220px;
	height: 40px;
	object-fit: contain;
	object-position: left center;
}

.cgb-brand__mark--sm.is-custom {
	max-width: 180px;
	height: 32px;
}

/*
 * The footer is dark navy and a supplied logo is artwork the theme does not
 * control — a wordmark drawn in a dark colour would disappear into it. A white
 * chip keeps any logo legible there, the same treatment the broker logos in the
 * review cards already get.
 *
 * content-box so the padding is added around the 32px image rather than eaten
 * out of it, which is what the border-box default higher up this file would do.
 */
.cgb-footer .cgb-brand__mark.is-custom {
	box-sizing: content-box;
	padding: 6px 10px;
	background-color: #fff;
	border-radius: var(--wp--custom--radius--lg);
}

@media (min-width: 1024px) {
	.cgb-brand__mark.is-custom {
		height: 48px;
	}

	.cgb-brand__mark--sm.is-custom {
		height: 32px;
	}
}

.cgb-brand__name {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 700;
	color: var(--wp--preset--color--on-surface);
	line-height: 1.2;
}

@media (min-width: 1024px) {
	.cgb-brand__mark {
		width: 48px;
		height: 48px;
	}

	.cgb-brand__name {
		font-size: var(--wp--preset--font-size--headline-md);
	}
}

/* Navigation ------------------------------------------------------------- */

.cgb-nav {
	display: none;
}

.cgb-nav__list {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--gutter);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cgb-nav__link,
.cgb-nav__list a {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	font-size: var(--wp--preset--font-size--label-md);
	line-height: var(--wp--custom--line-height--label-md);
	letter-spacing: 0.05em;
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.cgb-nav__link:hover,
.cgb-nav__list a:hover {
	color: var(--wp--preset--color--primary);
}

.cgb-nav__link.is-current {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}

@media (min-width: 1024px) {
	.cgb-nav {
		display: block;
	}
}

/* Mobile menu ------------------------------------------------------------ */

.cgb-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--secondary);
	cursor: pointer;
}

.cgb-nav-toggle svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.cgb-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--stack-sm);
}

/* Language switcher ------------------------------------------------------ */

/*
 * A button plus a list, not a <select>: the entries are links, and a form
 * control that navigates on change is a well-known accessibility trap. The
 * open/closed state is driven by the [hidden] attribute on the menu, so it
 * still behaves if assets/js/nav.js fails to load — the menu simply stays shut
 * and the flags remain reachable from the footer links and the URL.
 */
.cgb-lang {
	position: relative;
}

.cgb-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--stack-sm);
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--lg);
	background-color: transparent;
	color: var(--wp--preset--color--secondary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--label-md);
	line-height: var(--wp--custom--line-height--label-md);
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.cgb-lang__toggle:hover,
.cgb-lang__toggle:focus-visible {
	border-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--primary);
}

.cgb-lang__flag {
	display: block;
	width: 16px;
	height: 11px;
	flex-shrink: 0;
	border-radius: 1px;
}

/*
 * The name is hidden on phones, where the header has no room for it — the flag
 * plus the caret is enough to show what the control does, and the button's
 * aria-label still names the current language in full.
 */
.cgb-lang__name {
	display: none;
}

.cgb-lang__caret {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	fill: currentColor;
	transition: transform 0.2s ease;
}

.cgb-lang__toggle[aria-expanded='true'] .cgb-lang__caret {
	transform: rotate(180deg);
}

@media (min-width: 480px) {
	.cgb-lang__name {
		display: inline;
	}
}

.cgb-lang__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 60;
	min-width: 168px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: 0 8px 24px rgba(11, 28, 48, 0.14);
}

.cgb-lang__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--stack-sm);
	padding: 8px 10px;
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cgb-lang__link:hover,
.cgb-lang__link:focus-visible {
	background-color: var(--wp--preset--color--surface-container-low);
	color: var(--wp--preset--color--primary);
}

.cgb-lang__link.is-current {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: reduce) {
	.cgb-lang__toggle,
	.cgb-lang__caret,
	.cgb-lang__link {
		transition: none;
	}
}

.cgb-header__cta {
	display: none;
}

@media (min-width: 1024px) {
	.cgb-header__cta {
		display: inline-flex;
	}

	.cgb-nav-toggle {
		display: none;
	}
}

/* Open state on narrow screens — the nav drops below the bar. */
@media (max-width: 1023px) {
	.cgb-nav.is-open {
		display: block;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		padding: var(--wp--preset--spacing--stack-md);
		background-color: var(--wp--preset--color--surface);
		border-bottom: 1px solid var(--wp--preset--color--outline-variant);
		box-shadow: 0 8px 24px rgba(11, 28, 48, 0.08);
	}

	.cgb-nav.is-open .cgb-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--stack-md);
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.cgb-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 520px;
	padding-block: var(--wp--preset--spacing--section-padding);
	overflow: hidden;
}

/*
 * Gold gradient stands in for the photography the brief asks for. Replace the
 * background with a real image when the client supplies one.
 */
.cgb-hero__backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 20%, rgba(238, 193, 80, 0.35), transparent 55%),
		radial-gradient(circle at 80% 30%, rgba(180, 140, 29, 0.4), transparent 50%),
		linear-gradient(160deg, #213145 0%, #0b1c30 60%, #251a00 100%);
}

/*
 * Photo supplied. Sits above the gradient and below the scrim.
 */
.cgb-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Dark wash over the photo. Without it the hero's white heading and the pale
 * gold subtitle can land on a bright part of the image and fail the 4.5:1
 * contrast requirement. Not applied when no photo is present, because the
 * gradient fallback is already dark enough.
 */
.cgb-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(11, 28, 48, 0.72) 0%,
		rgba(11, 28, 48, 0.62) 55%,
		rgba(11, 28, 48, 0.78) 100%
	);
}

.cgb-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--gutter);
	max-width: 900px;
	padding-inline: var(--wp--preset--spacing--stack-md);
	text-align: center;
}

.cgb-hero__title {
	font-size: var(--wp--preset--font-size--headline-lg);
	line-height: var(--wp--custom--line-height--headline-lg);
	letter-spacing: -0.02em;
	font-weight: 700;
	color: #fff;
}

@media (min-width: 768px) {
	.cgb-hero__title {
		font-size: var(--wp--preset--font-size--headline-xl);
		line-height: var(--wp--custom--line-height--headline-xl);
	}
}

.cgb-hero__subtitle {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--headline-md);
	line-height: var(--wp--custom--line-height--headline-md);
	font-weight: 600;
	color: var(--wp--preset--color--primary-fixed);
}

.cgb-hero__intro {
	max-width: 42rem;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--line-height--body-lg);
	color: var(--wp--preset--color--surface-variant);
}

.cgb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--stack-md);
}

/* ==========================================================================
   Stars and ticks
   ========================================================================== */

.cgb-stars {
	/* One size for whole and half stars alike — see .cgb-stars__half below. */
	--cgb-star-size: 16px;
	display: inline-flex;
	align-items: center;
	gap: 1px;
	vertical-align: middle;
}

.cgb-stars__icon {
	width: var(--cgb-star-size);
	height: var(--cgb-star-size);
	flex-shrink: 0;
}

.cgb-stars__icon.is-filled {
	fill: var(--wp--preset--color--primary-container);
}

.cgb-stars__icon.is-empty {
	fill: none;
	stroke: var(--wp--preset--color--outline);
	stroke-width: 1.5;
}

/*
 * Half star: the outline with a filled copy stacked on top and cut down the
 * middle, so 4.5 reads as four gold stars and one gold left-hand half. The
 * wrapper carries the glyph's own size because its children are taken out of
 * the flow.
 */
.cgb-stars__half {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	width: var(--cgb-star-size);
	height: var(--cgb-star-size);
}

.cgb-stars__half .cgb-stars__icon {
	position: absolute;
	inset: 0;
}

.cgb-stars__half .cgb-stars__icon.is-filled {
	clip-path: inset(0 50% 0 0);
}

.cgb-check {
	display: inline-flex;
}

.cgb-check svg {
	width: 22px;
	height: 22px;
	fill: var(--wp--custom--color--positive);
}

/* ==========================================================================
   Comparison table
   ========================================================================== */

.cgb-compare__scroller {
	overflow-x: auto;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: 0 1px 2px rgba(11, 28, 48, 0.06);
	-webkit-overflow-scrolling: touch;
}

.cgb-compare {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	text-align: left;
}

.cgb-compare thead tr {
	background-color: var(--wp--preset--color--on-background);
}

.cgb-compare__corner,
.cgb-compare__broker {
	padding: var(--wp--preset--spacing--stack-md);
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 500;
	vertical-align: bottom;
}

.cgb-compare__corner {
	position: sticky;
	left: 0;
	z-index: 2;
	background-color: var(--wp--preset--color--on-background);
	min-width: 150px;
}

.cgb-compare__broker {
	text-align: center;
	min-width: 150px;
}

.cgb-compare__broker.is-top {
	background-color: var(--wp--custom--color--on-primary-fixed);
}

.cgb-compare__medal {
	display: block;
	font-size: 18px;
	line-height: 1;
	margin-bottom: 4px;
}

.cgb-compare__broker-name {
	display: block;
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

.cgb-compare tbody tr {
	border-top: 1px solid var(--wp--preset--color--outline-variant);
}

.cgb-compare tbody tr:nth-child(even) {
	background-color: var(--wp--preset--color--surface);
}

.cgb-compare tbody tr:nth-child(even) .cgb-compare__label {
	background-color: var(--wp--preset--color--surface);
}

.cgb-compare__label {
	position: sticky;
	left: 0;
	z-index: 1;
	padding: var(--wp--preset--spacing--stack-md);
	background-color: #fff;
	border-right: 1px solid var(--wp--preset--color--outline-variant);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
	vertical-align: top;
}

.cgb-compare__cell {
	padding: var(--wp--preset--spacing--stack-md);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
	vertical-align: top;
}

.cgb-compare__cell--rating,
.cgb-compare__cell--stars,
.cgb-compare__cell--check {
	text-align: center;
	white-space: nowrap;
}

.cgb-compare__cell--rating {
	line-height: 1.4;
}

.cgb-compare__cell.is-top {
	background-color: rgba(180, 140, 29, 0.06);
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
}

.cgb-compare__score {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--on-surface);
}

/*
 * A spare row the client has not filled in yet. Visitors never reach this —
 * the template drops the row for them — so this only has to tell an editor
 * "this is waiting for you", not look finished.
 */
.cgb-compare tbody tr.is-unfilled {
	background-image: repeating-linear-gradient(
		135deg,
		transparent,
		transparent 8px,
		rgba(180, 140, 29, 0.07) 8px,
		rgba(180, 140, 29, 0.07) 16px
	);
}

.cgb-compare tbody tr.is-unfilled .cgb-compare__cell {
	font-style: italic;
	color: var(--wp--preset--color--outline);
}

/*
 * The Visit Site / Sign Up row. It gets a heavier top border than the zebra
 * rows above so it reads as the end of the table rather than one more feature.
 */
.cgb-compare tfoot tr {
	border-top: 2px solid var(--wp--preset--color--outline-variant);
}

.cgb-compare tfoot .cgb-compare__label {
	vertical-align: middle;
}

.cgb-compare__cell--actions {
	min-width: 170px;
}

.cgb-compare__cell--actions .cgb-btn {
	width: 100%;
	padding-inline: var(--wp--preset--spacing--stack-md);
	white-space: normal;
}

/* ==========================================================================
   Our Verdict
   ========================================================================== */

.cgb-verdict {
	display: grid;
	gap: var(--wp--preset--spacing--gutter);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.cgb-verdict {
		grid-template-columns: repeat(2, 1fr);
	}
}

.cgb-verdict__card {
	position: relative;
	padding: var(--wp--preset--spacing--gutter);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--xl);
}

.cgb-verdict__card.is-top {
	background-color: #fff;
	border-color: var(--wp--preset--color--primary-container);
	box-shadow: 0 2px 8px rgba(180, 140, 29, 0.12);
}

.cgb-verdict__rank {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: 0 var(--wp--custom--radius--xl) 0 var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--outline-variant);
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
}

.cgb-verdict__card.is-top .cgb-verdict__rank {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary);
}

.cgb-verdict__broker {
	font-size: var(--wp--preset--font-size--headline-md);
	line-height: var(--wp--custom--line-height--headline-md);
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	margin-bottom: var(--wp--preset--spacing--stack-sm);
	padding-right: 72px;
}

.cgb-verdict__card.is-top .cgb-verdict__broker {
	color: var(--wp--preset--color--primary-container);
}

.cgb-verdict__reason {
	color: var(--wp--preset--color--on-surface-variant);
}

.cgb-verdict__reason-label {
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
}

/* ==========================================================================
   Spotlight — Why Fintrix Ranked #1
   ========================================================================== */

.cgb-spotlight {
	display: grid;
	gap: var(--wp--preset--spacing--stack-lg);
	align-items: center;
}

@media (min-width: 1024px) {
	.cgb-spotlight {
		grid-template-columns: 1fr 1fr;
		gap: 48px;
	}
}

.cgb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--stack-sm);
	padding: 8px 16px;
	margin-bottom: var(--wp--preset--spacing--stack-md);
	border-radius: 999px;
	background-color: rgba(180, 140, 29, 0.1);
	color: var(--wp--preset--color--primary-container);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.cgb-eyebrow__icon {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.cgb-spotlight__lead-in {
	margin-top: var(--wp--preset--spacing--stack-md);
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
}

.cgb-checklist {
	display: grid;
	gap: var(--wp--preset--spacing--stack-md);
	margin-top: var(--wp--preset--spacing--stack-md);
	padding: 0;
	list-style: none;
}

/*
 * Targets the bare <li> rather than a BEM class, and draws the tick with a
 * masked ::before rather than an inline <svg>, because this list is a
 * core/list block: Gutenberg lets the client put a class on the <ul>, but it
 * cannot put a class or any markup inside each <li>.
 */
.cgb-checklist > li {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--stack-sm);
	color: var(--wp--preset--color--on-surface-variant);
}

.cgb-checklist > li::before {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	background-color: var(--wp--preset--color--primary-container);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.4 14.6l-4.2-4.2 1.4-1.4 2.8 2.8 6.2-6.2 1.4 1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.4 14.6l-4.2-4.2 1.4-1.4 2.8 2.8 6.2-6.2 1.4 1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.cgb-spotlight__visual {
	position: relative;
	overflow: hidden;
	min-height: 280px;
	border-radius: var(--wp--custom--radius--full);
	border: 1px solid var(--wp--preset--color--outline-variant);
	background:
		radial-gradient(circle at 30% 25%, rgba(255, 223, 153, 0.55), transparent 55%),
		linear-gradient(145deg, #b48c1d 0%, #775a00 45%, #251a00 100%);
}

/* Photo fills the panel; the gradient behind it is the fallback. */
.cgb-panel__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (min-width: 1024px) {
	.cgb-spotlight__visual {
		min-height: 460px;
	}
}

/* ==========================================================================
   Exclusive Offer
   ========================================================================== */

/*
 * The one dark panel in the body of the page. Everything else here is white or
 * pale blue, so the inversion is what makes it stand out — no animation and no
 * extra weight on the page to achieve it.
 */
.cgb-section--offer {
	background-color: var(--wp--preset--color--surface-container-low);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}

.cgb-offer {
	display: grid;
	gap: var(--wp--preset--spacing--stack-lg);
	align-items: center;
	padding: var(--wp--preset--spacing--stack-lg) var(--wp--preset--spacing--gutter);
	border: 2px solid var(--wp--preset--color--primary-container);
	border-radius: var(--wp--custom--radius--full);
	background:
		radial-gradient(circle at 12% 20%, rgba(238, 193, 80, 0.28), transparent 55%),
		radial-gradient(circle at 88% 80%, rgba(180, 140, 29, 0.32), transparent 50%),
		linear-gradient(140deg, #213145 0%, #0b1c30 55%, #251a00 100%);
	box-shadow: 0 8px 28px rgba(180, 140, 29, 0.2);
}

@media (min-width: 768px) {
	.cgb-offer {
		grid-template-columns: 1fr auto;
		gap: 48px;
		padding: var(--wp--preset--spacing--section-padding) var(--wp--preset--spacing--stack-lg);
	}
}

.cgb-offer__heading {
	font-size: var(--wp--preset--font-size--headline-lg-mobile);
	line-height: var(--wp--custom--line-height--headline-lg-mobile);
	letter-spacing: -0.01em;
	font-weight: 700;
	color: #fff;
}

@media (min-width: 768px) {
	.cgb-offer__heading {
		font-size: var(--wp--preset--font-size--headline-lg);
		line-height: var(--wp--custom--line-height--headline-lg);
	}
}

.cgb-offer__subtitle {
	margin-top: var(--wp--preset--spacing--stack-sm);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--headline-md);
	line-height: var(--wp--custom--line-height--headline-md);
	font-weight: 600;
	color: var(--wp--preset--color--primary-fixed);
}

.cgb-offer__text {
	margin-top: var(--wp--preset--spacing--stack-md);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--line-height--body-lg);
	color: var(--wp--preset--color--surface-variant);
}

.cgb-offer__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--stack-md);
	margin-top: var(--wp--preset--spacing--stack-lg);
}

/*
 * On this dark ground the site's usual gold fill would leave white text at
 * 3.1:1. Inverting it — pale gold behind near-black text — reads as louder and
 * measures 13:1.
 */
.cgb-btn--offer {
	background-color: var(--wp--preset--color--primary-fixed);
	color: var(--wp--custom--color--on-primary-fixed);
}

.cgb-btn--offer:hover,
.cgb-btn--offer:focus-visible {
	background-color: #fff;
	color: var(--wp--custom--color--on-primary-fixed);
}

.cgb-btn--offer-ghost {
	border-color: var(--wp--preset--color--primary-fixed);
	color: var(--wp--preset--color--primary-fixed);
	background-color: transparent;
}

.cgb-btn--offer-ghost:hover,
.cgb-btn--offer-ghost:focus-visible {
	background-color: rgba(255, 223, 153, 0.16);
	color: var(--wp--preset--color--primary-fixed);
}

/* The figure, restated as a medallion. Decorative — see the template. */
.cgb-offer__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 160px;
	height: 160px;
	margin-inline: auto;
	border-radius: 50%;
	border: 2px solid rgba(255, 223, 153, 0.5);
	background:
		radial-gradient(circle at 35% 30%, rgba(255, 223, 153, 0.9), transparent 60%),
		linear-gradient(150deg, #eec150 0%, #b48c1d 55%, #775a00 100%);
	color: var(--wp--custom--color--on-primary-fixed);
	text-align: center;
}

.cgb-offer__badge-amount {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--headline-lg);
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.cgb-offer__badge-label {
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.cgb-offer__badge {
		width: 200px;
		height: 200px;
	}
}

/* ==========================================================================
   Reviews
   ========================================================================== */

.cgb-reviews {
	display: grid;
	gap: var(--wp--preset--spacing--stack-lg);
}

.cgb-review {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--full);
	overflow: hidden;
	scroll-margin-top: 96px;
}

.cgb-review--featured {
	border-width: 2px;
	border-color: var(--wp--preset--color--primary-container);
	box-shadow: 0 4px 16px rgba(180, 140, 29, 0.14);
}

.cgb-review__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--stack-md);
	padding: var(--wp--preset--spacing--gutter);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}

.cgb-review--featured .cgb-review__header {
	background-color: rgba(180, 140, 29, 0.05);
}

@media (min-width: 768px) {
	.cgb-review__header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: var(--wp--preset--spacing--stack-lg);
	}
}

.cgb-review__identity {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--stack-md);
}

/*
 * Initials stand in for the broker logos the brief asks for — those are
 * third-party trademarks we have neither the files nor the licence for.
 */
.cgb-broker-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--custom--color--surface-container-high);
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.cgb-review--featured .cgb-broker-logo {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary);
}

/*
 * Real logo supplied. Broker logos are almost always wide wordmarks, so the
 * square built for the initials would squash them — the box becomes
 * height-constrained with a flexible width instead, on white because supplied
 * artwork nearly always assumes a light background.
 */
.cgb-broker-logo--image {
	width: auto;
	min-width: 48px;
	max-width: 150px;
	height: 48px;
	padding: 4px 8px;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--outline-variant);
}

.cgb-review--featured .cgb-broker-logo--image {
	background-color: #fff;
}

/*
 * height is 100%, not auto, on purpose. Logos exported as SVG often declare
 * width="100%" height="100%" and carry no intrinsic size — only the viewBox
 * ratio. With height:auto those files can collapse or fall back to the 300x150
 * default replaced-element size. Driving the height from the box and letting
 * the ratio set the width avoids that, and object-fit keeps any odd aspect
 * ratio letterboxed rather than stretched.
 */
.cgb-broker-logo--image img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.cgb-review__name {
	font-size: var(--wp--preset--font-size--headline-lg-mobile);
	line-height: var(--wp--custom--line-height--headline-lg-mobile);
	font-weight: 700;
	color: var(--wp--preset--color--on-surface);
}

.cgb-review__title {
	margin-top: 2px;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--secondary);
}

.cgb-review__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--stack-sm);
	margin-top: var(--wp--preset--spacing--stack-sm);
	font-size: var(--wp--preset--font-size--body-sm);
}

.cgb-review__rating-label {
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
}

.cgb-review__score {
	font-weight: 700;
	color: var(--wp--preset--color--on-surface);
}

.cgb-review__body {
	display: grid;
	gap: var(--wp--preset--spacing--stack-lg);
	padding: var(--wp--preset--spacing--gutter);
}

@media (min-width: 1024px) {
	.cgb-review__body {
		grid-template-columns: 2fr 1fr;
		padding: var(--wp--preset--spacing--stack-lg);
	}
}

.cgb-review__main {
	display: grid;
	gap: var(--wp--preset--spacing--stack-md);
	color: var(--wp--preset--color--on-surface-variant);
	align-content: start;
}

.cgb-review__subhead {
	margin-top: var(--wp--preset--spacing--stack-sm);
	padding-bottom: var(--wp--preset--spacing--stack-sm);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
	font-size: var(--wp--preset--font-size--headline-md);
	line-height: var(--wp--custom--line-height--headline-md);
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
}

.cgb-review__verdict.is-highlighted {
	font-weight: 500;
	color: var(--wp--preset--color--primary-container);
}

.cgb-review__facts {
	display: grid;
	gap: var(--wp--preset--spacing--stack-md);
}

@media (min-width: 640px) {
	.cgb-review__facts {
		grid-template-columns: repeat(2, 1fr);
	}

	.cgb-fact--wide {
		grid-column: 1 / -1;
	}
}

.cgb-fact {
	padding: var(--wp--preset--spacing--stack-md);
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
}

.cgb-fact__label {
	margin-bottom: var(--wp--preset--spacing--stack-sm);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
}

.cgb-fact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--on-surface);
}

.cgb-fact__list li + li {
	margin-top: 2px;
}

.cgb-fact__text {
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--on-surface);
}

.cgb-review__side {
	display: grid;
	gap: var(--wp--preset--spacing--stack-md);
	align-content: start;
}

.cgb-proscons {
	padding: var(--wp--preset--spacing--gutter);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--xl);
}

.cgb-proscons__title {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--stack-sm);
	margin-bottom: var(--wp--preset--spacing--stack-md);
	font-size: var(--wp--preset--font-size--headline-md);
	line-height: var(--wp--custom--line-height--headline-md);
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
}

.cgb-proscons__title svg {
	width: 20px;
	height: 20px;
}

.cgb-proscons--pros .cgb-proscons__title svg,
.cgb-proscons--pros .cgb-proscons__icon {
	fill: var(--wp--custom--color--positive);
}

.cgb-proscons--cons .cgb-proscons__title svg,
.cgb-proscons--cons .cgb-proscons__icon {
	fill: var(--wp--custom--color--negative);
}

.cgb-proscons__list {
	display: grid;
	gap: var(--wp--preset--spacing--stack-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cgb-proscons__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--stack-sm);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
}

.cgb-proscons__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

/* ==========================================================================
   Review cards (front page) — link out to the individual review pages
   ========================================================================== */

.cgb-reviewcards {
	display: grid;
	gap: var(--wp--preset--spacing--gutter);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.cgb-reviewcards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.cgb-reviewcards {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cgb-reviewcard {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--stack-md);
	padding: var(--wp--preset--spacing--gutter);
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--xl);
}

.cgb-reviewcard.is-featured {
	border-width: 2px;
	border-color: var(--wp--preset--color--primary-container);
	box-shadow: 0 2px 10px rgba(180, 140, 29, 0.14);
}

.cgb-reviewcard__head {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--stack-sm);
}

.cgb-reviewcard__name {
	font-size: var(--wp--preset--font-size--headline-md);
	line-height: var(--wp--custom--line-height--headline-md);
	font-weight: 700;
	color: var(--wp--preset--color--on-surface);
}

.cgb-reviewcard__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}

.cgb-reviewcard__best {
	flex: 1;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
}

.cgb-reviewcard__best-label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	margin-bottom: 2px;
}

.cgb-reviewcard__actions {
	display: grid;
	gap: var(--wp--preset--spacing--stack-sm);
}

.cgb-reviewcard__actions .cgb-btn {
	width: 100%;
	white-space: normal;
	text-align: center;
}

/*
 * "Read the … review" keeps the full width of the card; Visit Site and Sign Up
 * share the row below it, so the three buttons read as one primary action and
 * two follow-ups rather than three equal ones.
 */
.cgb-reviewcard__actions .cgb-ctas .cgb-btn {
	width: auto;
	padding-inline: var(--wp--preset--spacing--stack-md);
}

.cgb-reviewcards__all {
	margin-top: var(--wp--preset--spacing--stack-lg);
	text-align: center;
}

/* ==========================================================================
   Reviews index (/reviews/)
   ========================================================================== */

.cgb-reviewindex {
	display: grid;
	gap: var(--wp--preset--spacing--gutter);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cgb-reviewindex__item {
	display: grid;
	gap: var(--wp--preset--spacing--stack-md);
	padding: var(--wp--preset--spacing--gutter);
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--xl);
}

.cgb-reviewindex__item.is-featured {
	border-width: 2px;
	border-color: var(--wp--preset--color--primary-container);
	box-shadow: 0 2px 10px rgba(180, 140, 29, 0.14);
}

.cgb-reviewindex__head {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--stack-md);
}

.cgb-reviewindex__rank {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--headline-md);
	font-weight: 700;
	color: var(--wp--preset--color--outline);
	min-width: 2.5ch;
}

.cgb-reviewindex__item.is-featured .cgb-reviewindex__rank {
	color: var(--wp--preset--color--primary-container);
}

.cgb-reviewindex__name {
	font-size: var(--wp--preset--font-size--headline-lg-mobile);
	line-height: var(--wp--custom--line-height--headline-lg-mobile);
	font-weight: 700;
}

.cgb-reviewindex__name a {
	color: var(--wp--preset--color--on-surface);
	text-decoration: none;
}

.cgb-reviewindex__name a:hover,
.cgb-reviewindex__name a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.cgb-reviewindex__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}

.cgb-reviewindex__facts {
	display: grid;
	gap: var(--wp--preset--spacing--stack-md);
	margin: 0;
}

@media (min-width: 768px) {
	.cgb-reviewindex__facts {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cgb-reviewindex__facts dt {
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	margin-bottom: 2px;
}

.cgb-reviewindex__facts dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
}

.cgb-reviewindex__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--stack-sm);
}

.cgb-reviewindex__back {
	margin-top: var(--wp--preset--spacing--stack-lg);
}

/* ==========================================================================
   Breadcrumb (review pages)
   ========================================================================== */

.cgb-breadcrumb {
	background-color: var(--wp--preset--color--surface-container-low);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
	padding-block: var(--wp--preset--spacing--stack-md);
}

.cgb-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--stack-sm);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--secondary);
}

.cgb-breadcrumb__list li + li::before {
	content: '/';
	margin-right: var(--wp--preset--spacing--stack-sm);
	color: var(--wp--preset--color--outline);
}

.cgb-breadcrumb__list a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.cgb-breadcrumb__list a:hover,
.cgb-breadcrumb__list a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.cgb-breadcrumb__list [aria-current='page'] {
	color: var(--wp--preset--color--on-surface);
	font-weight: 600;
}

/* ==========================================================================
   "Compare other brokers" list (review pages)
   ========================================================================== */

.cgb-otherlinks {
	display: grid;
	gap: var(--wp--preset--spacing--stack-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.cgb-otherlinks {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cgb-otherlinks__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--stack-md);
	height: 100%;
	padding: var(--wp--preset--spacing--stack-md);
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--xl);
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.cgb-otherlinks__item:hover,
.cgb-otherlinks__item:focus-visible {
	border-color: var(--wp--preset--color--primary-container);
}

.cgb-otherlinks__name {
	display: block;
	font-family: var(--wp--preset--font-family--headline);
	font-weight: 700;
	color: var(--wp--preset--color--on-surface);
}

.cgb-otherlinks__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}

.cgb-otherlinks__back {
	margin-top: var(--wp--preset--spacing--stack-lg);
}

/* ==========================================================================
   About
   ========================================================================== */

.cgb-about {
	display: grid;
	gap: var(--wp--preset--spacing--stack-lg);
	align-items: center;
}

@media (min-width: 1024px) {
	.cgb-about {
		grid-template-columns: 1fr 1fr;
		gap: 48px;
	}
}

.cgb-about__body {
	display: grid;
	gap: var(--wp--preset--spacing--stack-md);
	color: var(--wp--preset--color--on-surface-variant);
	align-content: start;
}

.cgb-about__subtitle {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--headline-md);
	line-height: var(--wp--custom--line-height--headline-md);
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
	margin-top: calc(var(--wp--preset--spacing--stack-md) * -1);
}

.cgb-about__heading {
	margin-top: var(--wp--preset--spacing--stack-md);
	font-size: var(--wp--preset--font-size--headline-md);
	line-height: var(--wp--custom--line-height--headline-md);
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
}

.cgb-about__visual {
	position: relative;
	overflow: hidden;
	min-height: 280px;
	border-radius: var(--wp--custom--radius--full);
	border: 1px solid var(--wp--preset--color--outline-variant);
	background:
		radial-gradient(circle at 70% 30%, rgba(255, 223, 153, 0.5), transparent 55%),
		linear-gradient(200deg, #eec150 0%, #b48c1d 40%, #382800 100%);
}

@media (min-width: 1024px) {
	.cgb-about__visual {
		min-height: 460px;
	}
}

/* ==========================================================================
   404
   ========================================================================== */

.cgb-404__code {
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--headline-xl);
	line-height: 1;
	font-weight: 700;
	color: var(--wp--preset--color--primary-container);
	margin-bottom: var(--wp--preset--spacing--stack-md);
}

.cgb-404__subhead {
	margin-top: var(--wp--preset--spacing--stack-lg);
	margin-bottom: var(--wp--preset--spacing--stack-md);
	font-size: var(--wp--preset--font-size--headline-md);
	line-height: var(--wp--custom--line-height--headline-md);
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
}

.cgb-404__links {
	display: grid;
	gap: var(--wp--preset--spacing--stack-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.cgb-404__links {
		grid-template-columns: repeat(2, 1fr);
	}
}

.cgb-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--stack-sm);
	margin-top: var(--wp--preset--spacing--stack-lg);
}

/* ==========================================================================
   Risk warning
   ========================================================================== */

.cgb-risk {
	background-color: var(--wp--preset--color--surface-container-low);
	border-top: 1px solid var(--wp--preset--color--outline-variant);
}

.cgb-risk__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--stack-md);
	max-width: var(--wp--custom--container-max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--stack-md);
}

@media (min-width: 768px) {
	.cgb-risk__inner {
		padding-inline: var(--wp--preset--spacing--margin-x);
	}
}

.cgb-risk__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	fill: var(--wp--custom--color--error);
}

.cgb-risk__text {
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
}

.cgb-risk__label {
	color: var(--wp--custom--color--error);
	font-weight: 700;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.cgb-footer {
	background-color: var(--wp--preset--color--on-surface);
	color: #fff;
}

.cgb-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--stack-lg);
	max-width: var(--wp--custom--container-max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--section-padding) var(--wp--preset--spacing--stack-md);
}

@media (min-width: 768px) {
	.cgb-footer__inner {
		flex-direction: row;
		justify-content: space-between;
		padding-inline: var(--wp--preset--spacing--margin-x);
	}
}

.cgb-footer__brand {
	display: grid;
	gap: var(--wp--preset--spacing--stack-md);
	max-width: 28rem;
}

.cgb-footer .cgb-brand__name {
	color: #fff;
}

.cgb-footer__copyright {
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
	color: var(--wp--preset--color--surface-variant);
}

.cgb-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--gutter);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cgb-footer__link {
	font-size: var(--wp--preset--font-size--label-md);
	line-height: var(--wp--custom--line-height--label-md);
	letter-spacing: 0.05em;
	font-weight: 600;
	color: var(--wp--preset--color--surface-variant);
	text-decoration: none;
	transition: color 0.2s ease;
}

.cgb-footer__link:hover,
.cgb-footer__link:focus-visible {
	color: var(--wp--preset--color--primary-fixed);
}

/* Footer entry with no destination set yet — shown, but not a dead link. */
.cgb-footer__link.is-placeholder {
	opacity: 0.55;
	cursor: default;
}