/*
Theme Name: Gambler Media
Theme URI: https://gamblermedia.com/
Description: A B2B trade publication theme for the online gambling industry. Author-led magazine layout, operator reviews, contributor pitching and responsible gambling compliance built in.
Author: Gambler Media
Author URI: https://gamblermedia.com/
Version: 6.26.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gamblermedia
Tags: news, magazine, blog, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   1. Tokens
   ========================================================================= */

:root {
	color-scheme: only light;

	--paper:     #fbfaf8;
	--surface:   #ffffff;
	--sunken:    #f4f2ee;

	--ink:       #1b1b2f;
	--body:      #3d3d4a;
	--muted:     #6b6b78;
	--faint:     #9a9aa4;

	--rule:      #ede9e3;
	--rule-firm: #ddd8d0;

	--brand:     #e8622c;
	--link:      #1a5aa8;

	--radius:    2px;
	--tile:      2px;

	--display:   'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--text:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mono:      'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--gap:       16px;
	--pad:       16px;
	--max:       1180px;

	--cat-default:       #5f5e5a;
	--cat-affiliates:    #b1490d;
	--cat-seo-marketing: #6a3fa0;
	--cat-operators:     #1a5aa8;
	--cat-law-regulation:#106b52;
	--cat-reviews:       #9a2f52;
}

/* =========================================================================
   2. Base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--body);
	font-family: var(--text);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-family: var(--display);
	font-weight: 700;
	letter-spacing: -.018em;
	line-height: 1.15;
	color: var(--ink);
	text-wrap: balance;
}

p { margin: 0 0 1em; }

button { font-family: inherit; }

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

.gm-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: .75em 1em;
	background: var(--ink);
	color: #fff;
}

.gm-skip:focus { left: 8px; top: 8px; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.gm-wrap {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--pad);
}

/* =========================================================================
   3. Primitives
   ========================================================================= */

.gm-tile {
	display: inline-flex;
	align-items: center;
	padding: .35em .6em;
	border: var(--tile) solid var(--accent, var(--cat-default));
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--display);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .16s ease, color .16s ease;
}

.gm-tile:hover, .gm-tile:focus-visible,
.gm-tile.is-current { background: var(--accent, var(--cat-default)); color: #fff; }

.gm-stamp {
	color: var(--faint);
	font-family: var(--mono);
	font-size: .625rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.gm-kicker {
	margin: 0 0 .6rem;
	color: var(--faint);
	font-family: var(--display);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.gm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .7em 1.2em;
	border: var(--tile) solid var(--ink);
	border-radius: var(--radius);
	background: var(--ink);
	color: #fff;
	font-family: var(--display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}

.gm-btn:hover, .gm-btn:focus-visible { background: var(--surface); color: var(--ink); }

.gm-btn--ghost { background: var(--surface); color: var(--ink); }
.gm-btn--ghost:hover, .gm-btn--ghost:focus-visible { background: var(--ink); color: #fff; }

.gm-btn--brand { border-color: var(--brand); background: var(--brand); }
.gm-btn--brand:hover, .gm-btn--brand:focus-visible { background: var(--surface); color: var(--brand); }

.gm-btn--full { width: 100%; }

.gm-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: .45em 1em;
	border: 1px solid var(--rule-firm);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--body);
	font-family: var(--display);
	font-size: .75rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.gm-pill:hover, .gm-pill:focus-visible { border-color: var(--ink); color: var(--ink); }

ul.gm-plain, ol.gm-plain { margin: 0; padding: 0; list-style: none; }
ul.gm-plain > li, ol.gm-plain > li { margin: 0; padding: 0; }

/* =========================================================================
   4. Header — compact, sticky on mobile
   ========================================================================= */

.gm-head {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
}

.gm-head__bar {
	display: flex;
	/* The drawer asks for the full width and sits after the buttons in
	   source order. Without wrapping it cannot reach its own line, so it
	   is squeezed into whatever space the buttons leave. */
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding: 8px var(--pad);
	min-height: 52px;
}

.gm-nav { flex: 0 0 100%; }

.gm-head__brand { flex: 1 1 auto; min-width: 0; }
.gm-logo { display: inline-block; line-height: 0; }
.gm-head__brand img { width: auto; display: block; }

.gm-head__toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	padding: 0;
	border: 1px solid var(--rule-firm);
	border-radius: var(--radius);
	background: var(--surface);
	cursor: pointer;
}

.gm-head__toggleBars,
.gm-head__toggleBars::before,
.gm-head__toggleBars::after {
	display: block;
	width: 17px; height: 2px;
	background: var(--ink);
	transition: transform .18s ease, opacity .18s ease;
}

.gm-head__toggleBars { position: relative; }
.gm-head__toggleBars::before,
.gm-head__toggleBars::after { content: ''; position: absolute; left: 0; }
.gm-head__toggleBars::before { top: -6px; }
.gm-head__toggleBars::after  { top: 6px; }

.gm-head__toggle[aria-expanded="true"] .gm-head__toggleBars { background: transparent; }
.gm-head__toggle[aria-expanded="true"] .gm-head__toggleBars::before { transform: translateY(6px) rotate(45deg); }
.gm-head__toggle[aria-expanded="true"] .gm-head__toggleBars::after  { transform: translateY(-6px) rotate(-45deg); }

.gm-nav {
	display: none;
	width: 100%;
	order: 3;
	padding: 4px 0 10px;
	border-top: 1px solid var(--rule);
}

.gm-nav.is-open { display: block; }

.gm-nav__list { margin: 0; padding: 0; list-style: none; }

.gm-nav__list a {
	display: block;
	padding: 11px 2px 11px 12px;
	border: 0;
	border-bottom: 1px solid var(--rule);
	border-left: 3px solid var(--accent, var(--cat-default));
	border-radius: 0;
	background: none;
	color: var(--ink);
	font-family: var(--display);
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}

.gm-nav__list a:hover { background: var(--sunken); }

.gm-nav__list .current-menu-item > a,
.gm-nav__list .current-cat > a { color: var(--brand); }

.gm-nav__list .sub-menu { margin: 0 0 0 12px; padding: 0; list-style: none; }
.gm-nav__list .sub-menu a { font-size: .875rem; font-weight: 500; }

.gm-head__actions { display: none; }

/* =========================================================================
   5. Homepage
   ========================================================================= */

.gm-lead { padding-block: 18px; border-bottom: 1px solid var(--rule); }

.gm-lead__media { margin-bottom: 10px; border-radius: var(--radius); overflow: hidden; text-decoration: none; }
.gm-lead__media,
.gm-lead__media * { text-decoration: none; }
.gm-lead__media img { width: 100%; aspect-ratio: 1200/630; object-fit: cover; }

.gm-lead__title { margin: 8px 0 6px; font-size: clamp(1.5rem, 1.05rem + 2vw, 2.25rem); }
.gm-lead__title a { color: var(--ink); text-decoration: none; }
.gm-lead__title a:hover { color: var(--brand); }

.gm-lead__stand { margin: 0 0 10px; font-size: 1rem; line-height: 1.55; color: var(--muted); }

.gm-recent { margin-top: 20px; }

.gm-recent__head {
	margin: 0 0 8px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--ink);
	font-family: var(--display);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink);
}

.gm-recent__item { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.gm-recent__item:last-child { border-bottom: 0; }
.gm-recent__title { margin: 2px 0 3px; font-size: .9375rem; line-height: 1.3; }
.gm-recent__title a { color: var(--ink); text-decoration: none; }
.gm-recent__title a:hover { color: var(--brand); }

/* --- Mosaic --------------------------------------------------------------- */

.gm-mosaic {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	align-items: start;
	padding-block: 20px;
}

.gm-card { min-width: 0; }

.gm-card__media { display: block; margin-bottom: 9px; border-radius: var(--radius); overflow: hidden; }
.gm-card__media img { width: 100%; aspect-ratio: 1200/630; object-fit: cover; transition: transform .4s ease; }
/* No zoom on a generated card: the text is drawn to the edges, so any
   scale crops the quote. Photographs keep it. */
.gm-card:hover .gm-card__media img { transform: scale(1.035); }
.gm-card__media--card img { transform: none !important; }

.gm-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }

.gm-card__title { margin: 0; font-size: 1.0625rem; line-height: 1.22; }
.gm-card__title a { color: var(--ink); text-decoration: none; }
.gm-card__title a:hover { color: var(--brand); }

.gm-card--feature .gm-card__title { font-size: 1.25rem; }

.gm-card--text {
	padding: 14px;
	border: 1px solid var(--rule);
	border-top: var(--tile) solid var(--brand);
	border-radius: var(--radius);
	background: var(--surface);
}

/* --- Byline --------------------------------------------------------------- */

.gm-byline { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.gm-byline__avatar { flex: none; line-height: 0; }
.gm-byline__text { min-width: 0; }

.gm-byline__name {
	display: block;
	color: var(--ink);
	font-family: var(--display);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.gm-byline__name:hover { color: var(--brand); }
.gm-byline__role { display: block; color: var(--muted); font-size: .6875rem; line-height: 1.35; }
.gm-byline__bio { display: block; max-width: 56ch; margin-top: 2px; color: var(--faint); font-size: .6875rem; line-height: 1.45; }

/* On a card the byline sits under a headline, so it aligns to the top of
   the avatar rather than centring against a two-line block. */
.gm-card .gm-byline,
.gm-lead .gm-byline { align-items: flex-start; }
.gm-card .gm-byline__avatar,
.gm-lead .gm-byline__avatar { margin-top: 2px; }

.gm-avatar { display: block; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.gm-avatar--square { border-radius: var(--radius); aspect-ratio: 1/1; }

.gm-avatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-family: var(--display);
	font-weight: 700;
	line-height: 1;
	filter: none;
	user-select: none;
}

/* --- Voices strip --------------------------------------------------------- */

.gm-voices {
	margin-block: 8px 24px;
	padding: 18px var(--pad);
	border-radius: var(--radius);
	background: var(--ink);
}

.gm-voices__head { margin: 0 0 14px; color: var(--brand); font-family: var(--display);
	font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

.gm-voices__list { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gm-voices__item { display: flex; align-items: center; gap: 10px; }
.gm-voices__name { display: block; color: #fff; font-family: var(--display); font-size: .875rem; font-weight: 600; text-decoration: none; }
.gm-voices__role { display: block; color: rgba(255,255,255,.6); font-size: .75rem; }

/* =========================================================================
   6. Article
   ========================================================================= */

.gm-article { padding-block: 16px 32px; }
.gm-article__inner { max-width: 720px; margin-inline: auto; }

.gm-crumbs { margin: 0 0 12px; font-family: var(--mono); font-size: .6875rem; color: var(--faint); }
.gm-crumbs a { color: var(--muted); text-decoration: none; }
.gm-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.gm-crumbs__sep { color: var(--rule-firm); padding-inline: 4px; }

.gm-article__title { margin: 10px 0 8px; font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem); letter-spacing: -.028em; line-height: 1.08; }
.gm-article__stand { margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.5; color: var(--muted); }

.gm-authorlead {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	margin-bottom: 18px;
}

.gm-authorlead__avatar { flex: none; line-height: 0; }
.gm-authorlead__body { flex: 1 1 auto; min-width: 0; }
.gm-authorlead__name { margin: 0; font-family: var(--display); font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.gm-authorlead__name a { color: var(--ink); text-decoration: none; }
.gm-authorlead__name a:hover { color: var(--brand); }
.gm-authorlead__role { margin: 2px 0 0; font-size: .8125rem; color: var(--body); }
.gm-authorlead__bio { margin: 5px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.gm-authorlead__company { margin: 3px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--faint); }
.gm-authorlead__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }

.gm-article__media { margin: 0 0 18px; border-radius: var(--radius); overflow: hidden; }
.gm-article__media img { width: 100%; }

.gm-summary {
	margin: 0 0 20px;
	padding: 15px 16px;
	border: 1px solid var(--rule);
	border-left: 4px solid var(--brand);
	border-radius: var(--radius);
	background: var(--surface);
}

.gm-summary__head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.gm-summary__label { margin: 0; font-family: var(--display); font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.gm-summary__list { margin: 0; padding: 0; list-style: none; }
.gm-summary__list > li { position: relative; margin: 0; padding: 4px 0 4px 20px; font-size: .9375rem; line-height: 1.55; }
.gm-summary__list > li::before { content: ''; position: absolute; top: .72em; left: 0; width: 8px; height: 8px; border: var(--tile) solid var(--brand); border-radius: 1px; }

.gm-content { font-size: 1.0625rem; line-height: 1.7; }
.gm-content > * { margin-bottom: 1.1em; }
.gm-content h2 { margin: 1.6em 0 .5em; font-size: 1.375rem; }
.gm-content h3 { margin: 1.4em 0 .4em; font-size: 1.125rem; }
.gm-content img, .gm-content figure { border-radius: var(--radius); }
.gm-content blockquote {
	margin: 1.4em 0;
	padding: 2px 0 2px 16px;
	border-left: 3px solid var(--brand);
	font-size: 1.125rem;
	line-height: 1.55;
	color: var(--ink);
}
.gm-content ul, .gm-content ol { padding-left: 1.2em; }
.gm-content li { margin-bottom: .4em; }

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

.gm-postfoot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rule); }
.gm-postfoot__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }

.gm-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gm-share__label { margin: 0; flex: none; color: var(--faint); font-family: var(--display); font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.gm-share__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gm-share__copy.is-copied { border-color: #0f6e56; color: #0f6e56; }

.gm-authorbox {
	margin: 22px 0 0;
	padding: 15px 16px;
	border: 1px solid var(--rule);
	border-top: var(--tile) solid var(--ink);
	border-radius: var(--radius);
	background: var(--surface);
}

.gm-authorbox__list { margin: 0; padding: 0; list-style: none; }
.gm-authorbox__list > li { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.gm-authorbox__list > li:last-child { border-bottom: 0; }
.gm-authorbox__list a { color: var(--ink); font-family: var(--display); font-size: .9375rem; font-weight: 600; line-height: 1.3; text-decoration: none; }
.gm-authorbox__list a:hover { color: var(--brand); }
.gm-authorbox__all { display: inline-block; margin-top: 10px; font-family: var(--display); font-size: .75rem; font-weight: 700; }

.gm-related { margin-top: 28px; }
.gm-related__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }

/* =========================================================================
   7. Archives
   ========================================================================= */

.gm-arch { padding-block: 20px 8px; }
.gm-arch__title { margin: 0 0 6px; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.25rem); letter-spacing: -.028em; }
.gm-arch__intro { margin: 0 0 6px; max-width: 62ch; font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.gm-arch__count { margin: 0; font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

.gm-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding-block: 8px 32px; }
.gm-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; min-height: 40px; padding: 0 .6em;
	border: 1px solid var(--rule-firm); border-radius: var(--radius);
	background: var(--surface); color: var(--body);
	font-family: var(--display); font-size: .8125rem; font-weight: 600; text-decoration: none;
}
.gm-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }

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

.gm-authorhead { display: flex; flex-direction: column; gap: 14px; padding-block: 20px; border-bottom: 1px solid var(--rule); }
.gm-authorhead__avatar { flex: none; line-height: 0; }
.gm-authorhead__name { margin: 0; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.25rem); letter-spacing: -.025em; }
.gm-authorhead__role { margin: 3px 0 0; font-size: .9375rem; color: var(--muted); }
.gm-authorhead__bio { margin: 10px 0 0; max-width: 62ch; font-size: .9375rem; line-height: 1.6; color: var(--body); }
.gm-authorhead__company { margin: 6px 0 0; max-width: 62ch; font-size: .875rem; line-height: 1.55; color: var(--faint); }
.gm-authorhead__links { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }

/* --- Contributors --------------------------------------------------------- */

.gm-authors { display: grid; grid-template-columns: 1fr; gap: var(--gap); padding-block: 20px 32px; }
.gm-authors__card { display: flex; gap: 12px; padding: 15px; border: 1px solid var(--rule); border-top: var(--tile) solid var(--brand); border-radius: var(--radius); background: var(--surface); }
.gm-authors__avatar { flex: none; line-height: 0; }
.gm-authors__name { margin: 0 0 2px; font-size: 1.0625rem; }
.gm-authors__name a { color: var(--ink); text-decoration: none; }
.gm-authors__role { margin: 0 0 6px; font-size: .75rem; color: var(--muted); }
.gm-authors__bio { margin: 0 0 6px; font-size: .875rem; line-height: 1.55; }
.gm-authors__meta { margin: 8px 0 0; font-family: var(--mono); font-size: .6875rem; }

/* =========================================================================
   8. Operator review
   ========================================================================= */

.gm-op { padding-block: 16px 32px; }
.gm-op__inner { max-width: 780px; margin-inline: auto; }

.gm-op__hero {
	padding: 16px;
	border: 1px solid var(--rule);
	border-top: 3px solid var(--cat-reviews);
	border-radius: var(--radius);
	background: var(--surface);
	margin-bottom: 16px;
}

.gm-op__heroTop { display: flex; gap: 14px; align-items: flex-start; }
.gm-op__logo { flex: none; width: 76px; height: 76px; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--sunken); }
.gm-op__logo img { width: 100%; height: 100%; object-fit: contain; }
.gm-op__title { margin: 0; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.125rem); letter-spacing: -.025em; }
.gm-op__stand { margin: 6px 0 0; font-size: .9375rem; line-height: 1.5; color: var(--muted); }

.gm-op__rating { display: inline-flex; align-items: baseline; gap: 4px; padding: 7px 12px; border: var(--tile) solid var(--cat-reviews); border-radius: var(--radius); }
.gm-op__ratingNum { font-family: var(--display); font-size: 1.375rem; font-weight: 700; color: var(--ink); }
.gm-op__ratingMax { font-family: var(--mono); font-size: .6875rem; color: var(--muted); }
.gm-op__ratingRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.gm-op__offer {
	margin: 16px 0 10px;
	padding: 12px 14px;
	border: 1px solid var(--rule);
	border-left: 4px solid var(--brand);
	border-radius: var(--radius);
	background: var(--sunken);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink);
}

.gm-op__offer strong { font-family: var(--display); }

.gm-op__terms {
	margin: 8px 0 0;
	font-size: .6875rem;
	line-height: 1.5;
	color: var(--faint);
}

.gm-op__terms a { color: var(--muted); }

.gm-op__age {
	display: inline-block;
	margin-right: 5px;
	padding: 1px 5px;
	border: 1px solid currentColor;
	border-radius: var(--radius);
	font-family: var(--display);
	font-size: .625rem;
	font-weight: 700;
}

.gm-op__reviewer {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	padding: 10px 14px; margin-bottom: 18px;
	background: var(--sunken); border-radius: var(--radius);
}

.gm-facts { width: 100%; border-collapse: collapse; margin: 0 0 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.gm-facts th, .gm-facts td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--rule); font-size: .9375rem; vertical-align: top; }
.gm-facts tr:last-child th, .gm-facts tr:last-child td { border-bottom: 0; }
.gm-facts th { width: 42%; font-family: var(--display); font-weight: 600; color: var(--ink); }
.gm-facts td { color: var(--body); }
.gm-facts .gm-facts__terms { display: block; margin-top: 3px; font-size: .6875rem; line-height: 1.45; color: var(--faint); }

.gm-prosCons { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-bottom: 18px; }
.gm-pros, .gm-cons { padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.gm-pros { border-top: var(--tile) solid var(--cat-law-regulation); }
.gm-cons { border-top: var(--tile) solid var(--cat-affiliates); }
.gm-pros ul, .gm-cons ul { margin: 0; padding: 0; list-style: none; }
.gm-pros li, .gm-cons li { position: relative; padding: 4px 0 4px 20px; font-size: .9375rem; line-height: 1.5; }
.gm-pros li::before, .gm-cons li::before { content: ''; position: absolute; top: .68em; left: 0; width: 8px; height: 8px; border-radius: 1px; border: var(--tile) solid; }
.gm-pros li::before { border-color: var(--cat-law-regulation); }
.gm-cons li::before { border-color: var(--cat-affiliates); }

.gm-verdict {
	padding: 15px 16px; margin-bottom: 18px;
	border: 1px solid var(--rule); border-left: 4px solid var(--brand);
	border-radius: var(--radius); background: var(--surface);
}

.gm-verdict p:last-child { margin-bottom: 0; }

/* =========================================================================
   9. Pitch widget
   ========================================================================= */

.gm-pitch { margin: 24px 0; border: 1px solid var(--rule); border-top: var(--tile) solid var(--brand); border-radius: var(--radius); background: var(--surface); }
.gm-pitch__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; cursor: pointer; list-style: none; }
.gm-pitch__summary::-webkit-details-marker { display: none; }
.gm-pitch__intro { flex: 1 1 220px; min-width: 0; }
.gm-pitch__title { display: block; margin-bottom: 3px; font-family: var(--display); font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.gm-pitch__blurb { display: block; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.gm-pitch__body { padding: 0 16px 16px; }
.gm-pitch__lede { max-width: 62ch; margin: 0 0 16px; font-size: .875rem; line-height: 1.55; color: var(--muted); }
.gm-pitch__row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gm-pitch__field { margin: 0 0 12px; }
.gm-pitch__field label,
.gm-form label { display: block; margin-bottom: 5px; font-family: var(--display); font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gm-pitch__field input, .gm-pitch__field textarea,
.gm-form input, .gm-form textarea, .gm-form select {
	display: block; width: 100%; padding: 11px 12px;
	border: 1px solid var(--rule-firm); border-radius: var(--radius);
	background: var(--surface); color: var(--ink);
	font-family: var(--text); font-size: 16px; line-height: 1.5;
}
.gm-pitch__field textarea, .gm-form textarea { min-height: 120px; resize: vertical; }
.gm-pitch__req { color: var(--brand); }
.gm-pitch__consent, .gm-form__consent { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 14px; }
.gm-pitch__consent input, .gm-form__consent input { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.gm-pitch__consent label, .gm-form__consent label { font-family: var(--text); font-size: .75rem; letter-spacing: 0; text-transform: none; color: var(--muted); line-height: 1.5; }
.gm-pitch__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.gm-pitch__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.gm-pitch__dest, .gm-pitch__noscript { font-size: .75rem; color: var(--faint); }
.gm-pitch__status { margin: 12px 0 0; font-size: .8125rem; }
.gm-pitch__status.is-error { color: #a32d2d; }
.gm-pitch.is-done { border-top-color: #0f6e56; }
.gm-pitch__done { padding: 15px 16px; }
.gm-pitch__doneTitle { margin: 0 0 3px; color: #0f6e56; font-family: var(--display); font-size: 1.0625rem; font-weight: 700; }
.gm-pitch__doneBody { margin: 0; font-size: .875rem; color: var(--muted); }

/* =========================================================================
   10. Pages: about, contact
   ========================================================================= */

.gm-page { padding-block: 20px 34px; }
.gm-page__inner { max-width: 760px; margin-inline: auto; }
.gm-page__title { margin: 0 0 10px; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); letter-spacing: -.028em; }
.gm-page__intro { max-width: 64ch; margin: 0 0 22px; font-size: 1.0625rem; line-height: 1.65; color: var(--muted); }

.gm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.gm-stat { padding: 13px; border: 1px solid var(--rule); border-top: var(--tile) solid var(--brand); border-radius: var(--radius); background: var(--surface); }
.gm-stat__num { margin: 0; font-family: var(--mono); font-size: 1.375rem; color: var(--ink); }
.gm-stat__label { margin: 2px 0 0; font-size: .6875rem; line-height: 1.35; color: var(--muted); }

.gm-covers { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
.gm-covers p { margin: 0; font-size: .9375rem; line-height: 1.55; }
.gm-covers b { font-family: var(--display); }

.gm-team { display: flex; flex-wrap: wrap; gap: 16px; }
.gm-team__member { display: flex; align-items: center; gap: 10px; }
.gm-team__name { display: block; font-family: var(--display); font-size: .9375rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.gm-team__role { display: block; font-size: .75rem; color: var(--muted); }

.gm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.gm-tab {
	display: inline-flex; align-items: center; min-height: 40px;
	padding: 0 13px; border: var(--tile) solid var(--rule-firm); border-radius: var(--radius);
	background: var(--surface); color: var(--muted);
	font-family: var(--display); font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; cursor: pointer;
}
.gm-tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.gm-form__panel[hidden] { display: none; }
.gm-form__row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gm-form__field { margin: 0 0 12px; }
.gm-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gm-form__note { font-size: .75rem; color: var(--faint); }

/* =========================================================================
   11. Press strip and responsible gambling
   ========================================================================= */

.gm-press { padding: 16px var(--pad); border-top: 1px solid var(--rule); background: var(--surface); }
.gm-press__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; max-width: var(--max); margin-inline: auto; }
.gm-press__label { margin: 0; color: var(--faint); font-family: var(--display); font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.gm-press__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin: 0; padding: 0; list-style: none; }
.gm-press__img { height: 22px; width: auto; object-fit: contain; }
.gm-press__link { display: block; line-height: 0; opacity: .78; }
.gm-press__link:hover { opacity: 1; }
.gm-press__divider { width: 1px; height: 22px; background: var(--rule-firm); }

.gm-rg { padding: 18px var(--pad); border-top: var(--tile) solid var(--brand); background: var(--ink); color: rgba(255,255,255,.64); }
.gm-rg__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: var(--max); margin-inline: auto; text-align: center; }
.gm-rg__note { max-width: 64ch; margin: 0; font-size: .8125rem; line-height: 1.6; }
.gm-rg__age { display: inline-block; margin-right: 6px; padding: 2px 7px; border: var(--tile) solid var(--brand); border-radius: var(--radius); color: #fff; font-family: var(--display); font-size: .6875rem; font-weight: 700; }
.gm-rg__tel { color: #fff; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-rg__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.gm-rg__img { height: 26px; width: auto; object-fit: contain; }
.gm-rg__link { display: block; line-height: 0; opacity: .72; }
.gm-rg__link:hover { opacity: 1; }

/* =========================================================================
   12. Footer
   ========================================================================= */

.gm-foot { margin-top: 12px; }
.gm-foot__inner { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: var(--max); margin-inline: auto; padding: 24px var(--pad); background: var(--sunken); }
.gm-foot__brandLink { display: inline-block; line-height: 0; margin-bottom: 10px; }
.gm-foot__logo { width: auto; display: block; }
.gm-foot__blurb { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--muted); }
.gm-foot__title { margin: 0 0 8px; font-family: var(--display); font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.gm-foot__col ul { margin: 0; padding: 0; list-style: none; }
.gm-foot__col li { margin: 0; }
.gm-foot__col a { display: inline-block; padding: 5px 0; color: var(--muted); font-size: .875rem; text-decoration: none; }
.gm-foot__col a:hover { color: var(--ink); text-decoration: underline; }
.gm-foot__cta { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; padding: 0 14px; border: var(--tile) solid var(--ink); border-radius: var(--radius); color: var(--ink); font-family: var(--display); font-size: .6875rem; font-weight: 700; text-decoration: none; }
.gm-foot__cta:hover { background: var(--ink); color: #fff; }
.gm-foot__legal { padding: 14px var(--pad); background: var(--ink); text-align: center; }
.gm-foot__legal p { margin: 0; font-family: var(--mono); font-size: .625rem; letter-spacing: .06em; color: rgba(255,255,255,.4); text-transform: uppercase; }

/* =========================================================================
   13. Larger screens
   ========================================================================= */

@media (min-width: 600px) {
	:root { --pad: 22px; --gap: 18px; }

	.gm-mosaic { grid-template-columns: repeat(2, 1fr); }
	.gm-related__grid { grid-template-columns: repeat(3, 1fr); }
	.gm-prosCons { grid-template-columns: 1fr 1fr; }
	.gm-covers { grid-template-columns: 1fr 1fr; }
	.gm-pitch__row, .gm-form__row { grid-template-columns: 1fr 1fr; }
	.gm-voices__list { grid-template-columns: repeat(2, 1fr); }
	.gm-authorbox__list > li { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; }
	.gm-authorhead { flex-direction: row; align-items: flex-start; gap: 20px; }
	.gm-authors { grid-template-columns: repeat(2, 1fr); }
	.gm-op__heroTop { gap: 18px; }
	.gm-op__logo { width: 96px; height: 96px; }
}

@media (min-width: 900px) {
	:root { --max: 1180px; }


	.gm-head { position: static; }
	.gm-head__bar { min-height: 64px; gap: 20px; }
	.gm-head__brand { flex: none; }

	.gm-head__toggle { display: none; }

	.gm-nav {
		display: block;
		order: 0;
		flex: 1 1 auto;
		width: auto;
		padding: 0;
		border: 0;
	}

	.gm-nav__list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
	.gm-nav__list > li { position: relative; }

	/* The sections are the navigation, so they carry their own colour.
	   Framed rather than filled: a row of solid blocks competes with the
	   headline beneath it, and filling on hover made the label vanish
	   whenever the border was removed. */
	.gm-nav__list a {
		padding: .42em .7em;
		border: var(--tile) solid var(--accent, var(--cat-default));
		background: transparent;
		color: var(--ink);
		font-size: .75rem;
		white-space: nowrap;
	}

	.gm-nav__list a:hover,
	.gm-nav__list a:focus-visible {
		background: transparent;
		color: var(--accent, var(--ink));
	}

	/* The section being viewed: same frame, its own colour, and a filled
	   underline so it reads as selected without becoming a solid block. */
	.gm-nav__list .current-cat > a {
		color: var(--accent, var(--ink));
		box-shadow: inset 0 -3px 0 0 var(--accent, var(--cat-default));
	}
	.gm-nav__list .sub-menu {
		position: absolute; top: 100%; left: 0; z-index: 20;
		display: none; min-width: 190px; margin: 0;
		padding: 6px 0; border: 1px solid var(--rule);
		border-radius: var(--radius); background: var(--surface);
		box-shadow: 0 6px 20px rgba(27,27,47,.08);
	}
	.gm-nav__list > li:hover > .sub-menu,
	.gm-nav__list > li:focus-within > .sub-menu { display: block; }
	.gm-nav__list .sub-menu a { padding: 8px 14px; }

	.gm-head__actions { display: block; flex: none; }
	.gm-head__pitch {
		display: inline-flex; align-items: center; min-height: 38px;
		padding: 0 14px; border: var(--tile) solid var(--ink);
		border-radius: var(--radius); background: var(--ink); color: #fff;
		font-family: var(--display); font-size: .6875rem; font-weight: 700;
		letter-spacing: .04em; text-decoration: none;
	}
	.gm-head__pitch:hover { background: var(--surface); color: var(--ink); }

	.gm-lead { display: grid; grid-template-columns: 1.9fr 1fr; gap: 26px; }
	.gm-recent { margin-top: 0; }

	.gm-mosaic { grid-template-columns: repeat(3, 1fr); }
	.gm-card--feature { grid-column: span 2; }
	.gm-card--feature .gm-card__title { font-size: 1.5rem; }

	.gm-voices__list { grid-template-columns: repeat(3, 1fr); }
	.gm-authors { grid-template-columns: repeat(2, 1fr); }
	.gm-foot__inner { grid-template-columns: 1.4fr 1fr 1fr 1.2fr 1.1fr; gap: 24px; }
	.gm-stats { gap: 14px; }
}

@media (min-width: 1100px) {
	.gm-authors { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   14. Motion and print
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.gm-card:hover .gm-card__media img { transform: none; }
}

@media print {
	.gm-head, .gm-foot, .gm-share, .gm-pitch, .gm-press, .gm-rg__logos, .gm-related { display: none; }
	body { background: #fff; }
}


/* =========================================================================
   15. Remaining pieces
   ========================================================================= */

.gm-main { display: block; min-height: 40vh; }

.gm-foot__brand { min-width: 0; }
.gm-foot__widgets { min-width: 0; }

.gm-widget { margin-bottom: 16px; }
.gm-widget__title { margin: 0 0 8px; font-family: var(--display); font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.gm-widget ul { margin: 0; padding: 0; list-style: none; }
.gm-widget a { color: var(--muted); font-size: .875rem; text-decoration: none; }

.gm-press__item { line-height: 0; }
.gm-press__item--trust .gm-press__img { height: 20px; }

.gm-pitch__wrap { display: block; }

.gm-pitch__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border: var(--tile) solid var(--ink);
	border-radius: var(--radius);
	background: var(--ink);
	color: #fff;
	font-family: var(--display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .03em;
}

.gm-pitch__summary:hover .gm-pitch__cta,
.gm-pitch__wrap[open] .gm-pitch__cta { background: var(--surface); color: var(--ink); }

.gm-pitch__submit, .gm-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: var(--tile) solid var(--ink);
	border-radius: var(--radius);
	background: var(--ink);
	color: #fff;
	font-family: var(--display);
	font-size: .8125rem;
	font-weight: 700;
	cursor: pointer;
}

.gm-pitch__submit:hover:not(:disabled),
.gm-form__submit:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.gm-pitch__submit:disabled, .gm-form__submit:disabled { opacity: .55; cursor: default; }

/* On phones the review CTA is the primary action; keep it reachable. */
@media (max-width: 599px) {
	.gm-op__heroTop { flex-direction: column; }
	.gm-op__logo { width: 64px; height: 64px; }
	.gm-facts th, .gm-facts td { display: block; width: 100%; }
	.gm-facts th { padding-bottom: 2px; border-bottom: 0; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
	.gm-facts td { padding-top: 0; }
	.gm-stats { grid-template-columns: 1fr; }
	.gm-voices { border-radius: 0; margin-inline: calc(var(--pad) * -1); }
}

.gm-foot__legalLinks { margin: 0 0 6px; }
.gm-foot__legalLinks a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.gm-foot__legalLinks a:hover { color: #fff; text-decoration: underline; }
.gm-foot__legalLinks span { color: rgba(255, 255, 255, .3); padding-inline: 6px; }


/* =========================================================================
   16. LinkedIn: follow block and icon links
   ========================================================================= */

.gm-li { display: block; flex: none; }

.gm-liLink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--rule-firm);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	transition: border-color .16s ease, color .16s ease;
}

.gm-liLink:hover,
.gm-liLink:focus-visible { border-color: var(--ink); color: var(--brand); }

/* Mobile: sits beside the burger, hidden once the desktop bar appears. */
.gm-head__socialMobile { order: 2; width: 42px; height: 42px; }

/* --- Follow block --------------------------------------------------------- */

.gm-follow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 24px 0;
	padding: 18px;
	border-radius: var(--radius);
}

.gm-follow--dark {
	background: var(--ink);
	border-top: var(--tile) solid var(--brand);
	color: rgba(255, 255, 255, .68);
}

.gm-follow--light {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-top: var(--tile) solid var(--brand);
	color: var(--muted);
}

.gm-follow__mark { flex: none; line-height: 0; }
.gm-follow--dark .gm-follow__mark { color: #fff; }
.gm-follow--light .gm-follow__mark { color: var(--link); }

.gm-follow__body { flex: 1 1 240px; min-width: 0; }

.gm-follow__title {
	margin: 0 0 3px;
	font-family: var(--display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.012em;
	line-height: 1.25;
}

.gm-follow--dark .gm-follow__title { color: #fff; }
.gm-follow--light .gm-follow__title { color: var(--ink); }

.gm-follow__blurb { margin: 0; font-size: .875rem; line-height: 1.5; }

.gm-follow__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: var(--tile) solid var(--brand);
	border-radius: var(--radius);
	background: var(--brand);
	color: #fff;
	font-family: var(--display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}

.gm-follow__cta:hover,
.gm-follow__cta:focus-visible { background: transparent; color: var(--brand); }

.gm-follow--dark .gm-follow__cta:focus-visible { outline-color: #fff; }

/* --- Footer --------------------------------------------------------------- */

.gm-foot__follow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 0;
	font-size: .875rem;
}

.gm-foot__follow a:not(.gm-liLink) { color: var(--muted); text-decoration: none; }
.gm-foot__follow a:not(.gm-liLink):hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 899px) {
	.gm-follow { padding: 16px; }
	.gm-follow__cta { width: 100%; justify-content: center; }
}

@media (min-width: 900px) {
	.gm-head__socialMobile { display: none; }
	.gm-head__actions { display: flex; align-items: center; gap: 8px; }
	.gm-head__social { width: 38px; height: 38px; }
}

.gm-foot__company {
	max-width: 46ch;
	margin: 8px 0 0;
	color: var(--faint);
	font-size: .75rem;
	line-height: 1.5;
}


/* =========================================================================
   17. Mobile drawer and bottom navigation
   ========================================================================= */

.gm-drawer { padding-top: 4px; }




.gm-drawer__label {
	margin: 16px 0 6px;
	color: var(--faint);
	font-family: var(--display);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.gm-drawer__posts,
.gm-drawer__pages { margin: 0; padding: 0; list-style: none; }

.gm-drawer__posts a {
	display: block;
	padding: 10px 2px;
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
}

.gm-drawer__postMeta {
	display: flex;
	gap: 8px;
	margin-bottom: 2px;
	font-family: var(--mono);
	font-size: .625rem;
	color: var(--faint);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.gm-drawer__postCat { font-weight: 500; }

.gm-drawer__postTitle {
	display: block;
	color: var(--ink);
	font-family: var(--display);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.3;
}

.gm-drawer__pages a {
	display: block;
	padding: 10px 2px;
	border-bottom: 1px solid var(--rule);
	color: var(--ink);
	font-family: var(--display);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
}

.gm-drawer .gm-follow { margin: 16px 0 8px; }

/* --- Bottom bar ----------------------------------------------------------- */

.gm-bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	display: flex;
	align-items: stretch;
	gap: 8px;
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--rule-firm);
	box-shadow: 0 -4px 18px rgba(27, 27, 47, .06);
}

.gm-bottom__list {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0 2px;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	flex: 1 1 auto;
	min-width: 0;
}

.gm-bottom__list::-webkit-scrollbar { display: none; }

.gm-bottom__link {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 12px;
	border: var(--tile) solid var(--accent, var(--cat-default));
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--display);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.gm-bottom__link.is-current { background: var(--accent, var(--cat-default)); color: #fff; }

.gm-bottom__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 14px;
	border: var(--tile) solid var(--ink);
	border-radius: var(--radius);
	background: var(--ink);
	color: #fff;
	font-family: var(--display);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	white-space: nowrap;
}

/* The bar floats over the page, so the footer needs room beneath it. */
body { padding-bottom: 62px; }

@media (min-width: 900px) {
	.gm-bottom { display: none; }
	body { padding-bottom: 0; }
	.gm-drawer { display: none; }
}

@media print {
	.gm-bottom { display: none; }
	body { padding-bottom: 0; }
}


/* =========================================================================
   18. Author page: explore blocks
   ========================================================================= */

.gm-explore {
	margin-top: 8px;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
	padding-bottom: 32px;
}

.gm-explore__block + .gm-explore__block {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
}

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

.gm-explore__sections {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-explore__section {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent, var(--cat-default));
	border-radius: var(--radius);
	background: var(--surface);
	text-decoration: none;
	transition: border-color .16s ease;
}

.gm-explore__section:hover,
.gm-explore__section:focus-visible { border-color: var(--accent, var(--cat-default)); }

.gm-explore__sectionName {
	color: var(--ink);
	font-family: var(--display);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: -.008em;
}

.gm-explore__sectionCount {
	flex: none;
	color: var(--faint);
	font-family: var(--mono);
	font-size: .6875rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- People --------------------------------------------------------------- */

.gm-explore__people {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-explore__person {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
	text-decoration: none;
	transition: border-color .16s ease;
}

.gm-explore__person:hover,
.gm-explore__person:focus-visible { border-color: var(--ink); }

.gm-explore__personText { min-width: 0; }

.gm-explore__personName {
	display: block;
	color: var(--ink);
	font-family: var(--display);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.25;
}

.gm-explore__personRole {
	display: block;
	color: var(--muted);
	font-size: .75rem;
	line-height: 1.4;
}

.gm-explore__personCount {
	display: block;
	margin-top: 2px;
	color: var(--faint);
	font-family: var(--mono);
	font-size: .625rem;
	font-variant-numeric: tabular-nums;
}

.gm-explore__more { margin: 14px 0 0; }

@media (min-width: 600px) {
	.gm-explore__sections { grid-template-columns: 1fr 1fr; }
	.gm-explore__people { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.gm-explore__sections { grid-template-columns: repeat(3, 1fr); }
	.gm-explore__people { grid-template-columns: repeat(2, 1fr); }
}


/* =========================================================================
   19. Guided pitch interview
   ========================================================================= */

.gm-iv {
	margin: 0 0 16px;
	padding: 16px;
	border: 1px solid var(--rule);
	border-left: 4px solid var(--brand);
	border-radius: var(--radius);
	background: var(--surface);
}

.gm-iv__lede { margin: 0 0 6px; font-size: .9375rem; line-height: 1.6; color: var(--body); }
.gm-iv__note { margin: 0 0 14px; font-size: .75rem; color: var(--faint); }

.gm-iv__skip {
	display: inline-block;
	margin-left: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font-family: var(--text);
	font-size: .8125rem;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

.gm-iv__skip:hover { color: var(--ink); }

.gm-iv__progress {
	margin: 0 0 8px;
	color: var(--faint);
	font-family: var(--mono);
	font-size: .6875rem;
	letter-spacing: .1em;
}

.gm-iv__question {
	margin: 0 0 12px;
	color: var(--ink);
	font-family: var(--display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
	min-height: 1.4em;
}

.gm-iv__answer {
	display: block;
	width: 100%;
	min-height: 130px;
	padding: 11px 12px;
	border: 1px solid var(--rule-firm);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--text);
	font-size: 16px;
	line-height: 1.6;
	resize: vertical;
}

.gm-iv__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 12px 0 0;
}

.gm-iv__status { font-size: .8125rem; color: var(--muted); }

.gm-iv__rq {
	margin: 12px 0 2px;
	color: var(--muted);
	font-family: var(--display);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.4;
}

.gm-iv__ra {
	margin: 0 0 8px;
	padding-left: 12px;
	border-left: 2px solid var(--rule-firm);
	color: var(--body);
	font-size: .9375rem;
	line-height: 1.6;
	white-space: pre-wrap;
}

.gm-iv__edit {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--link);
	font-family: var(--text);
	font-size: .8125rem;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

.gm-form select {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--rule-firm);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--text);
	font-size: 16px;
	line-height: 1.5;
}


/* =========================================================================
   20. Latest from industry experts
   ========================================================================= */

.gm-voicesGrid {
	margin-top: 8px;
	padding-top: 24px;
	padding-bottom: 32px;
	border-top: 1px solid var(--rule);
}

.gm-voicesGrid__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.gm-voicesGrid__all {
	font-family: var(--display);
	font-size: .75rem;
	font-weight: 700;
	text-decoration: none;
}

.gm-voicesGrid__all:hover { text-decoration: underline; text-underline-offset: .2em; }

.gm-voicesGrid__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-voicesGrid__item {
	padding: 14px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
}

.gm-voicesGrid__person {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
}

.gm-voicesGrid__personText { min-width: 0; }

.gm-voicesGrid__name {
	display: block;
	color: var(--ink);
	font-family: var(--display);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.25;
}

.gm-voicesGrid__person:hover .gm-voicesGrid__name { color: var(--brand); }

.gm-voicesGrid__role {
	display: block;
	color: var(--muted);
	font-size: .6875rem;
	line-height: 1.4;
}

.gm-voicesGrid__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 5px;
	font-family: var(--display);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.gm-voicesGrid__title {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.3;
}

.gm-voicesGrid__title a { color: var(--ink); text-decoration: none; }
.gm-voicesGrid__title a:hover { color: var(--brand); }

@media (min-width: 600px) {
	.gm-voicesGrid__list { grid-template-columns: 1fr 1fr; gap: 14px; }
}

@media (min-width: 900px) {
	.gm-voicesGrid__list { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (min-width: 1100px) {
	.gm-voicesGrid__list { grid-template-columns: repeat(4, 1fr); }
}


/* =========================================================================
   21. Reviews index
   ========================================================================= */

.gm-revHead { padding-block: 20px 6px; }

.gm-revHead__title {
	margin: 0 0 8px;
	font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem);
	letter-spacing: -.028em;
}

.gm-revHead__intro {
	max-width: 62ch;
	margin: 0 0 10px;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--muted);
}

.gm-revHead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	font-size: .75rem;
}

.gm-revFilter {
	display: flex;
	gap: 6px;
	padding-bottom: 18px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.gm-revFilter::-webkit-scrollbar { display: none; }

.gm-revFilter__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 14px;
	border: var(--tile) solid var(--accent, var(--rule-firm));
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--display);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .16s ease, color .16s ease;
}

.gm-revFilter__chip:hover,
.gm-revFilter__chip.is-current { background: var(--accent, var(--ink)); color: #fff; }

.gm-revFilter__count {
	font-family: var(--mono);
	font-size: .625rem;
	font-weight: 400;
	letter-spacing: 0;
	opacity: .7;
}

/* --- Cards ---------------------------------------------------------------- */

.gm-revGrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	padding-bottom: 24px;
}

.gm-revCard {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: 1px solid var(--rule);
	border-top: 3px solid var(--accent, var(--cat-default));
	border-radius: var(--radius);
	background: var(--surface);
	transition: border-color .16s ease;
}

.gm-revCard:hover { border-color: var(--accent, var(--ink)); }

.gm-revCard__top { display: flex; align-items: flex-start; gap: 12px; }

.gm-revCard__logo {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--sunken);
	overflow: hidden;
}

.gm-revCard__logo img { width: 100%; height: 100%; object-fit: contain; }

.gm-revCard__initial {
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--accent, var(--ink));
}

.gm-revCard__id { flex: 1 1 auto; min-width: 0; }

.gm-revCard__type {
	display: inline-block;
	margin-bottom: 4px;
	color: var(--accent, var(--muted));
	font-family: var(--display);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}

.gm-revCard__title { margin: 0; font-size: 1.0625rem; line-height: 1.25; }
.gm-revCard__title a { color: var(--ink); text-decoration: none; }
.gm-revCard__title a:hover { color: var(--accent, var(--brand)); }

.gm-revCard__rating {
	flex: none;
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	padding: 5px 9px;
	border: var(--tile) solid var(--accent, var(--ink));
	border-radius: var(--radius);
}

.gm-revCard__ratingNum { font-family: var(--display); font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.gm-revCard__ratingMax { font-family: var(--mono); font-size: .625rem; color: var(--muted); }

.gm-revCard__offer {
	margin: 12px 0 0;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--body);
}

.gm-revCard__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--rule);
}

.gm-revCard__read {
	font-family: var(--display);
	font-size: .75rem;
	font-weight: 700;
	text-decoration: none;
}

.gm-revCard__read:hover { text-decoration: underline; text-underline-offset: .2em; }

.gm-revNote {
	max-width: 78ch;
	margin: 0 0 32px;
	padding-top: 16px;
	border-top: 1px solid var(--rule);
	font-size: .6875rem;
	line-height: 1.6;
	color: var(--faint);
}

.gm-revNote a { color: var(--muted); }

@media (min-width: 600px) {
	.gm-revGrid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
	.gm-revGrid { grid-template-columns: repeat(3, 1fr); }
}


/* --- Review cards: bonus, CTA, terms --------------------------------------- */

.gm-revCard__summary {
	margin: 12px 0 0;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--body);
}

.gm-revCard__offer {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: var(--radius);
	background: var(--sunken);
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--ink);
}

.gm-revCard__offerLabel {
	display: block;
	margin-bottom: 2px;
	color: var(--accent, var(--muted));
	font-family: var(--display);
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.gm-revCard__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
}

.gm-revCard__cta {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: var(--tile) solid var(--brand);
	border-radius: var(--radius);
	background: var(--brand);
	color: #fff;
	font-family: var(--display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}

.gm-revCard__cta:hover,
.gm-revCard__cta:focus-visible { background: var(--surface); color: var(--brand); }

.gm-revCard .gm-op__terms {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--rule);
	font-size: .625rem;
}

/* --- Long copy below the cards -------------------------------------------- */

.gm-revSeo {
	margin-top: 8px;
	padding-top: 26px;
	border-top: 1px solid var(--rule);
}

.gm-revSeo__inner { max-width: 72ch; font-size: 1rem; }
.gm-revSeo__inner h2 { margin: 1.6em 0 .4em; font-size: 1.25rem; }
.gm-revSeo__inner h2:first-child { margin-top: 0; }
.gm-revSeo__inner p { margin-bottom: 1em; line-height: 1.7; }

/* Anchored sections clear the sticky header when jumped to. */
.gm-revSeo__inner h2[id],
.gm-revSeo__inner h3[id] { scroll-margin-top: 70px; }

/* --- Researched sections on a review --------------------------------------- */

.gm-opBlock {
	margin: 0 0 18px;
	padding: 16px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
}

.gm-opBlock h2 { margin: 0 0 10px; font-size: 1.125rem; }
.gm-opBlock p { margin: 0 0 .8em; font-size: .9375rem; line-height: 1.65; }
.gm-opBlock p:last-child { margin-bottom: 0; }
.gm-opBlock ul { margin: 0; padding-left: 1.1em; font-size: .9375rem; line-height: 1.7; }

/* --- Contact box ------------------------------------------------------------ */

.gm-contacts {
	margin: 0 0 18px;
	padding: 15px 16px;
	border: 1px solid var(--rule);
	border-top: var(--tile) solid var(--cat-operators);
	border-radius: var(--radius);
	background: var(--surface);
}

.gm-contacts .gm-kicker { color: var(--cat-operators); }

.gm-contacts__list { margin: 0; }

.gm-contacts__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--rule);
}

.gm-contacts__row:last-child { border-bottom: 0; padding-bottom: 0; }
.gm-contacts__row:first-of-type { padding-top: 0; }

.gm-contacts__row dt {
	flex: 0 0 auto;
	min-width: 132px;
	color: var(--muted);
	font-family: var(--display);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.gm-contacts__row dd {
	flex: 1 1 200px;
	margin: 0;
	color: var(--ink);
	font-size: .9375rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.gm-contacts__row dd a { color: var(--link); }


/* =========================================================================
   22. Company disclosure in the byline
   ========================================================================= */

.gm-company { margin: 8px 0 0; }

.gm-company__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 9px 4px 10px;
	border: 1px solid var(--rule-firm);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--muted);
	font-family: var(--display);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	cursor: pointer;
	list-style: none;
	transition: border-color .16s ease, color .16s ease;
}

.gm-company__toggle::-webkit-details-marker { display: none; }
.gm-company__toggle:hover { border-color: var(--ink); color: var(--ink); }

/* A plus that becomes a minus, rather than a caret that can read as a link */
.gm-company__mark {
	position: relative;
	width: 9px;
	height: 9px;
	flex: none;
}

.gm-company__mark::before,
.gm-company__mark::after {
	content: '';
	position: absolute;
	background: currentColor;
	transition: transform .16s ease, opacity .16s ease;
}

.gm-company__mark::before { top: 4px; left: 0; width: 9px; height: 1.5px; }
.gm-company__mark::after { top: 0; left: 3.75px; width: 1.5px; height: 9px; }

.gm-company[open] .gm-company__mark::after { transform: scaleY(0); opacity: 0; }
.gm-company[open] .gm-company__toggle { border-color: var(--ink); color: var(--ink); }

.gm-company__body {
	max-width: 62ch;
	margin: 8px 0 0;
	padding: 10px 12px;
	border-left: 2px solid var(--rule-firm);
	background: var(--sunken);
	border-radius: var(--radius);
}

.gm-company__body p {
	margin: 0;
	color: var(--muted);
	font-size: .8125rem;
	line-height: 1.55;
}

.gm-company__link { margin-top: 6px !important; }

.gm-company__link a {
	color: var(--muted);
	font-family: var(--mono);
	font-size: .6875rem;
	text-decoration: none;
	border-bottom: 1px solid var(--rule-firm);
}

.gm-company__link a:hover { color: var(--ink); border-color: var(--ink); }

/* --- Promo code on a review ------------------------------------------------ */

.gm-op__code {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
}

.gm-op__codeLabel {
	color: var(--muted);
	font-family: var(--display);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.gm-op__codeValue {
	display: inline-block;
	padding: 7px 14px;
	border: 2px dashed var(--brand);
	border-radius: var(--radius);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .12em;
	user-select: all;
}


/* =========================================================================
   23. Figures inside an article
   ========================================================================= */

.gm-figure {
	margin: 1.8em 0;
	padding: 18px;
	border: 1px solid var(--rule);
	border-top: var(--tile) solid var(--brand);
	border-radius: var(--radius);
	background: var(--surface);
}

.gm-figure__head { display: block; margin-bottom: 16px; }

.gm-figure__title {
	display: block;
	color: var(--ink);
	font-family: var(--display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.012em;
}

.gm-figure__subtitle {
	display: block;
	margin-top: 3px;
	color: var(--muted);
	font-size: .8125rem;
	line-height: 1.45;
}

.gm-figure__source {
	margin: 14px 0 0;
	color: var(--faint);
	font-size: .6875rem;
	line-height: 1.5;
}

/* --- Bars ------------------------------------------------------------------ */

.gm-bars__label {
	margin: 0 0 6px;
	color: var(--faint);
	font-family: var(--mono);
	font-size: .625rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.gm-bars__track {
	display: flex;
	gap: 2px;
	margin-bottom: 16px;
	border-radius: var(--radius);
	overflow: hidden;
}

.gm-bars__track:last-child { margin-bottom: 0; }

.gm-bars__seg {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	min-height: 38px;
	padding: 0 8px;
	color: #fff;
	font-family: var(--display);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-align: center;
}

.gm-bars__segName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-bars__segValue { font-family: var(--mono); font-weight: 400; opacity: .8; }

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

.gm-compare { display: grid; grid-template-columns: 1fr; gap: 12px; }

.gm-compare__panel {
	padding: 15px 16px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
}

.gm-compare__panel.is-highlight { border-left: 3px solid var(--brand); }

.gm-compare__figure {
	margin: 0;
	color: var(--faint);
	font-family: var(--mono);
	font-size: 1.75rem;
	line-height: 1.1;
}

.gm-compare__panel.is-highlight .gm-compare__figure { color: var(--brand); }

.gm-compare__label {
	margin: 5px 0 0;
	color: var(--ink);
	font-family: var(--display);
	font-size: .8125rem;
	font-weight: 700;
}

.gm-compare__note {
	margin: 5px 0 0;
	color: var(--muted);
	font-size: .8125rem;
	line-height: 1.5;
}

/* --- Statistics ------------------------------------------------------------- */

.gm-stats--figure { grid-template-columns: 1fr; gap: 12px; margin-bottom: 0; }
.gm-stats--figure .gm-stat { border-top-width: 0; border-left: 3px solid var(--brand); }
.gm-stats--figure .gm-stat__num { font-size: 1.625rem; }

@media (min-width: 560px) {
	.gm-compare { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
	.gm-stats--figure { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

.gm-op__fullTerms {
	white-space: nowrap;
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

.gm-op__media {
	margin: 0 0 16px;
	border-radius: var(--radius);
	overflow: hidden;
}

.gm-op__media img { width: 100%; height: auto; display: block; }

/* --- Promo code inside the facts table -------------------------------------- */

.gm-facts__code {
	display: inline-block;
	padding: 4px 11px;
	border: 2px dashed var(--brand);
	border-radius: var(--radius);
	color: var(--ink);
	font-family: var(--mono);
	font-size: .9375rem;
	font-weight: 500;
	letter-spacing: .1em;
	user-select: all;
}


/* =========================================================================
   24. Guides
   ========================================================================= */

.gm-guide__head { padding-block: 4px 0; }

.gm-guide__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 12px 0 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rule);
}

.gm-guide__disclosure { color: var(--brand); }

/* --- Jump list -------------------------------------------------------------- */

.gm-guide__jump {
	margin: 0 0 22px;
	padding: 14px 16px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
}

.gm-guide__jumpList {
	margin: 6px 0 0;
	padding-left: 1.2em;
	display: grid;
	gap: 4px;
}

.gm-guide__jumpList li { font-size: .9375rem; }
.gm-guide__jumpList a { color: var(--ink); text-decoration: none; }
.gm-guide__jumpList a:hover { color: var(--brand); }
.gm-guide__jumpList span { color: var(--muted); font-size: .8125rem; }
.gm-guide__jumpList span::before { content: ' — '; }

.gm-guide__body { margin-bottom: 26px; }

/* --- One entry -------------------------------------------------------------- */

.gm-pick {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 16px;
	padding: 18px;
	border: 1px solid var(--rule);
	border-top: 3px solid var(--accent, var(--brand));
	border-radius: var(--radius);
	background: var(--surface);
	scroll-margin-top: 70px;
}

.gm-pick__brand { display: flex; align-items: center; gap: 14px; }

.gm-pick__rank {
	font-family: var(--display);
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1;
	color: var(--faint);
}

.gm-pick__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	padding: 8px;
	border: var(--tile) solid var(--brand);
	border-radius: 4px;
	background: var(--paper);
	overflow: hidden;
}

.gm-pick__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.gm-pick__logoText {
	font-family: var(--display);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--ink);
}

.gm-pick__body { flex: 1 1 auto; min-width: 0; }

.gm-pick__super {
	display: inline-block;
	margin: 0 0 5px;
	padding: 3px 8px;
	border-radius: var(--radius);
	background: var(--brand);
	color: #fff;
	font-family: var(--display);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.gm-pick__name { margin: 0 0 7px; font-size: 1.1875rem; }
.gm-pick__name a { color: var(--ink); text-decoration: none; }
.gm-pick__name a:hover { color: var(--accent, var(--brand)); }

.gm-pick__blurb { margin: 0 0 12px; font-size: .9375rem; line-height: 1.6; }

.gm-pick__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.gm-pick__facts li {
	padding: 5px 9px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	font-size: .75rem;
}

.gm-pick__factLabel { font-family: var(--display); font-weight: 700; color: var(--ink); }
.gm-pick__factValue { margin-left: 5px; color: var(--muted); }

.gm-pick__verdict { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
.gm-pick__col ul { margin: 4px 0 0; padding-left: 1.1em; font-size: .875rem; line-height: 1.55; }
.gm-pick__col li { margin-bottom: 3px; }
.gm-pick__col--pro .gm-kicker { color: var(--cat-law-regulation, #106b52); }
.gm-pick__col--con .gm-kicker { color: var(--cat-affiliates, #b1490d); }

.gm-pick__offer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: var(--radius);
	background: var(--sunken);
}

.gm-pick__offerLabel {
	color: var(--accent, var(--muted));
	font-family: var(--display);
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	width: 100%;
}

.gm-pick__offerText { font-size: .9375rem; color: var(--ink); }

.gm-pick__code {
	padding: 3px 9px;
	border: 2px dashed var(--brand);
	border-radius: var(--radius);
	font-family: var(--mono);
	font-size: .8125rem;
	letter-spacing: .1em;
	user-select: all;
}

.gm-pick__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.gm-pick__review { font-family: var(--display); font-size: .75rem; font-weight: 700; }

.gm-pick .gm-op__terms { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }

/* --- Closing note ----------------------------------------------------------- */

.gm-guide__note {
	margin: 26px 0 32px;
	padding: 16px 18px;
	border-top: var(--tile) solid var(--brand);
	border-radius: var(--radius);
	background: var(--ink);
}

.gm-guide__note p { margin: 0 0 8px; color: rgba(255, 255, 255, .68); font-size: .75rem; line-height: 1.6; }
.gm-guide__note p:last-child { margin-bottom: 0; }
.gm-guide__note .gm-op__age { border-color: currentColor; color: #fff; }
.gm-guide__note a { color: #fff; }
.gm-guide__tel { font-family: var(--mono); color: #fff; }

@media (min-width: 620px) {
	.gm-pick { flex-direction: row; gap: 18px; }
	.gm-pick__brand { flex: none; flex-direction: column; gap: 8px; }
	.gm-pick__verdict { grid-template-columns: 1fr 1fr; }
	.gm-guide__jumpList { grid-template-columns: 1fr 1fr; }
}

/* --- The listing ------------------------------------------------------------ */

.gm-guide__listing { margin: 26px 0; }
.gm-guide__listingHead { margin: 0 0 14px; font-size: 1.5rem; }

.gm-picks { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.gm-picks__item { margin: 0; }

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

.gm-table__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 -4px;
	padding: 0 4px;
}

.gm-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: .8125rem;
	line-height: 1.4;
}

.gm-table th,
.gm-table td {
	padding: 9px 14px 9px 0;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: middle;
}

.gm-table th:last-child,
.gm-table td:last-child { padding-right: 0; }

.gm-table thead th {
	padding-bottom: 7px;
	border-bottom: var(--tile) solid var(--ink);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--display);
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The brand stays put while the figures scroll sideways. */
.gm-table tbody th {
	position: sticky;
	left: 0;
	padding-right: 18px;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--display);
	font-size: .875rem;
	font-weight: 700;
	white-space: nowrap;
}

.gm-table thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	padding-right: 18px;
}

/* Figures read as figures. */
.gm-table td { color: var(--body); }
.gm-table tbody tr:last-child th,
.gm-table tbody tr:last-child td { border-bottom: 0; }
.gm-table tbody tr:hover th,
.gm-table tbody tr:hover td { background: var(--sunken); }


/* =========================================================================
   25. Guides strip on the homepage
   ========================================================================= */

.gm-guides {
	margin: 8px 0 28px;
	padding: 20px;
	border-radius: var(--radius);
	background: var(--sunken);
}

.gm-guides__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: var(--tile) solid var(--ink);
}

.gm-guides__title {
	margin: 3px 0 0;
	font-size: 1.1875rem;
	letter-spacing: -.015em;
}

.gm-guides__all {
	flex: none;
	font-family: var(--display);
	font-size: .75rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.gm-guides__all:hover { text-decoration: underline; text-underline-offset: .2em; }

.gm-guides__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

/* --- One card ---------------------------------------------------------------- */

.gm-gcard {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: 1px solid var(--rule);
	border-top: 3px solid var(--brand);
	border-radius: var(--radius);
	background: var(--surface);
	transition: border-color .16s ease;
}

.gm-gcard:hover { border-color: var(--brand); }

.gm-gcard__type {
	align-self: flex-start;
	padding: 3px 8px;
	border-radius: var(--radius);
	background: var(--brand);
	color: #fff;
	font-family: var(--display);
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.gm-gcard__title { margin: 8px 0 0; font-size: .9375rem; line-height: 1.25; }
.gm-gcard__title a { color: var(--ink); text-decoration: none; }
.gm-gcard__title a:hover { color: var(--brand); }

.gm-gcard__blurb {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: .75rem;
	line-height: 1.5;
}

.gm-gcard__logos {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: auto 0 0;
	padding-top: 12px;
}

.gm-gcard__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 3px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--muted);
	font-family: var(--display);
	font-size: .5625rem;
	font-weight: 700;
	overflow: hidden;
}

.gm-gcard__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.gm-gcard__more { color: var(--faint); font-size: .6875rem; }

.gm-guides__note {
	margin: 14px 0 0;
	color: var(--faint);
	font-size: .625rem;
	line-height: 1.6;
}

.gm-guides__note a { color: var(--muted); }

@media (min-width: 560px) {
	.gm-guides__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.gm-guides__grid { grid-template-columns: repeat(4, 1fr); }
	.gm-guides { padding: 24px; }
}


/* =========================================================================
   26. Article header
   ========================================================================= */

.gm-hero { margin: 0 0 20px; }

.gm-hero__panel {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--sunken);
}

/* The pattern is decoration: it sits behind live text and is hidden from
   assistive technology. */
.gm-hero__pattern {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.gm-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 62ch;
	padding: 26px 22px 28px;
}

.gm-hero__tile { position: relative; z-index: 1; }

.gm-hero__title {
	margin: 12px 0 0;
	font-size: clamp(1.6rem, 1.15rem + 2.1vw, 2.5rem);
	line-height: 1.14;
	letter-spacing: -.028em;
}

.gm-hero__standfirst {
	margin: 10px 0 0;
	max-width: 56ch;
	color: var(--muted);
	font-size: 1.0625rem;
	line-height: 1.55;
}

/* --- Headline on paper, overlapping the panel -------------------------------- */

.gm-hero--panel { padding-bottom: 0; }
.gm-hero--panel .gm-hero__panel { min-height: 168px; padding: 22px; }

.gm-hero--panel .gm-hero__card {
	position: relative;
	z-index: 1;
	margin: -34px 0 0 16px;
	padding: 20px 22px;
	border-left: 4px solid var(--brand);
	background: var(--paper);
}

.gm-hero--panel .gm-hero__card .gm-hero__title { margin-top: 0; }

@media (min-width: 700px) {
	.gm-hero__inner { padding: 34px 32px 36px; }
	.gm-hero--panel .gm-hero__panel { min-height: 210px; }
	.gm-hero--panel .gm-hero__card { margin: -48px 96px 0 28px; padding: 24px 28px; }
}

/* --- The pattern in a card's image slot -------------------------------------- */

.gm-card__pattern {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1200/630;
	background: var(--sunken);
	overflow: hidden;
}

.gm-card__pattern .gm-hero__pattern { position: absolute; inset: 0; }

/* No zoom: the pattern is drawn to the edges. */
.gm-card:hover .gm-card__pattern { transform: none; }

/* --- The headline over a card's pattern -------------------------------------- */

.gm-card__over {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 18px 20px;
	max-width: 68%;
	/* A flex item won't shrink below its content's natural width by
	   default — min-width:0 overrides that, so long text wraps onto a
	   new line instead of visually escaping the box's max-width. */
	min-width: 0;
}

.gm-card__overTitle {
	font-family: var(--display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--ink);
	overflow-wrap: break-word;
}

.gm-card__overBy { margin-top: auto; min-width: 0; }

.gm-card__overName {
	display: block;
	font-family: var(--display);
	font-size: .8125rem;
	font-weight: 700;
	color: var(--ink);
	overflow-wrap: break-word;
}

.gm-card__overRole {
	display: block;
	font-size: .6875rem;
	line-height: 1.4;
	color: var(--muted);
	overflow-wrap: break-word;
}

/* The lead cell is far larger, so the type scales with it. */
.gm-lead .gm-card__overTitle,
.gm-card--feature .gm-card__overTitle { font-size: 1.5rem; }
.gm-lead .gm-card__over,
.gm-card--feature .gm-card__over { padding: 26px 28px; }

@media (min-width: 700px) {
	.gm-lead .gm-card__overTitle { font-size: 1.875rem; }
}


/* A card whose pattern carries the text needs no gap under the meta row. */
.gm-card__media + .gm-card__meta,
.gm-lead__media + .gm-card__meta { margin-top: 10px; }


/* --- Ranked list ------------------------------------------------------------ */

.gm-ranking { margin: 0; padding: 0; list-style: none; counter-reset: none; }

.gm-ranking__item {
	display: flex;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--rule);
}

.gm-ranking__item:last-child { border-bottom: 0; padding-bottom: 0; }
.gm-ranking__item:first-child { padding-top: 0; }

.gm-ranking__rank {
	flex: none;
	width: 30px;
	font-family: var(--display);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--faint);
}

.gm-ranking__item.is-top .gm-ranking__rank { color: var(--brand); }

.gm-ranking__body { flex: 1 1 auto; min-width: 0; }

.gm-ranking__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
}

.gm-ranking__name {
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink);
}

.gm-ranking__rating {
	padding: 2px 7px;
	border: 1px solid var(--rule-firm);
	border-radius: var(--radius);
	font-family: var(--mono);
	font-size: .6875rem;
	color: var(--muted);
}

.gm-ranking__item.is-top .gm-ranking__rating { border-color: var(--brand); color: var(--brand); }

.gm-ranking__best {
	font-family: var(--display);
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.gm-ranking__item.is-top .gm-ranking__best { color: var(--brand); }

.gm-ranking__feature {
	display: block;
	margin-top: 4px;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--body);
}

/* --- Links under a byline ---------------------------------------------------- */

.gm-byline__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin-top: 6px;
}

.gm-byline__links a {
	padding: 2px 8px;
	border: 1px solid var(--rule-firm);
	border-radius: var(--radius);
	color: var(--muted);
	font-family: var(--display);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
	transition: border-color .16s ease, color .16s ease;
}

.gm-byline__links a:hover { border-color: var(--ink); color: var(--ink); }

/* The bio now runs in full, so it needs room to breathe. */
.gm-byline__bio { max-width: 68ch; }


/* =========================================================================
   27. Guide card, title inset on the image
   ========================================================================= */

.gm-gc { display: flex; flex-direction: column; }

.gm-gc__media {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 1200/630;
	padding: 12px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--sunken);
	overflow: hidden;
	text-decoration: none;
}

.gm-gc__media img,
.gm-gc__fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gm-gc__fallback {
	background:
		linear-gradient(135deg, transparent 62%, rgba(232, 98, 44, .14) 62%),
		var(--sunken);
}

.gm-gc__type {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	padding: 3px 9px;
	border-radius: var(--radius);
	background: var(--brand);
	color: #fff;
	font-family: var(--display);
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

/* Paper behind the title: a photograph is busy, and type over it would be
   unreadable on half the images that end up here. */
.gm-gc__plate {
	position: relative;
	z-index: 1;
	padding: 12px 14px;
	border-left: 4px solid var(--brand);
	background: var(--paper);
}

.gm-gc__title {
	display: block;
	color: var(--ink);
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
}

.gm-gc__media:hover .gm-gc__title { color: var(--brand); }

.gm-gc__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 10px 0 0;
}

.gm-card--feature .gm-gc__title,
.gm-gc--lead .gm-gc__title { font-size: 1.25rem; }

/* --- Guide authors: same component, light instead of dark -------------------
   Sits directly under the guides strip, which is already a light, tinted
   panel. Reusing the dark .gm-voices treatment here would put two
   identical-looking dark boxes back to back, which reads as a repeated
   component rather than a considered layout — so this variant inverts the
   palette to continue visually from the guides strip instead. */

.gm-voices--guides {
	background: var(--sunken);
	border: 1px solid var(--rule);
}

.gm-voices--guides .gm-voices__head { color: var(--brand); }
.gm-voices--guides .gm-voices__name { color: var(--ink); }
.gm-voices--guides .gm-voices__role { color: var(--muted); }

/* The reviews listing is a ranked list, so the markup says so and the
   position is drawn deliberately rather than left to browser markers. */
.gm-revGrid { list-style: none; margin: 0; padding: 0; counter-reset: gm-rank; }

.gm-revGrid__item {
	counter-increment: gm-rank;
	position: relative;
	margin: 0;
	display: flex;
}

.gm-revGrid__item > .gm-revCard { flex: 1 1 auto; }

.gm-revGrid__item::before {
	content: counter(gm-rank);
	position: absolute;
	z-index: 2;
	top: -1px;
	left: -1px;
	min-width: 30px;
	padding: 3px 8px 4px;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--display);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	border-radius: var(--radius) 0 var(--radius) 0;
}

/* The first three carry the brand colour, so the top of the table reads
   at a glance without a second element. */
.gm-revGrid__item:nth-child(-n+3)::before { background: var(--brand); }

/* Clear the badge so it never sits on the logo. */
.gm-revGrid__item > .gm-revCard { padding-top: 34px; }


/* =========================================================================
   26. About the publication, closing the homepage
   ========================================================================= */

.gm-about {
	margin: 8px 0 32px;
	padding-top: 20px;
	border-top: var(--tile) solid var(--ink);
}

.gm-about__title {
	margin: 0 0 12px;
	font-size: 1.1875rem;
	letter-spacing: -.015em;
}

.gm-about__body { max-width: 74ch; }

.gm-about__body p {
	margin: 0 0 10px;
	color: var(--muted);
	font-size: .875rem;
	line-height: 1.7;
}

.gm-about__body a { color: var(--ink); }
.gm-about__body a:hover { color: var(--brand); }

.gm-about__cta {
	margin-top: 12px !important;
	font-family: var(--display);
	font-weight: 500;
	color: var(--ink) !important;
}

.gm-about__cta a { border-bottom: 2px solid var(--brand); text-decoration: none; }

/* --- Support badges, when no official artwork is on file --------------------- */

.gm-rg__logos--text { gap: 10px; }

.gm-rg__badge {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--radius);
	color: #fff;
	font-family: var(--display);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-decoration: none;
	transition: border-color .16s ease, background .16s ease;
}

.gm-rg__badge:hover {
	border-color: rgba(255, 255, 255, .6);
	background: rgba(255, 255, 255, .06);
	color: #fff;
}

/* --- Footer columns ---------------------------------------------------------- */

.gm-foot__col ul { margin: 0; padding: 0; list-style: none; }
.gm-foot__col li { margin-bottom: 6px; }

/* --- Press strip inside the about block -------------------------------------- */

.gm-press {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--rule);
}

.gm-press__title {
	margin: 0 0 14px !important;
	color: var(--faint) !important;
	font-family: var(--display);
	font-size: .625rem !important;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.gm-press__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-press__logos li { margin: 0; }

.gm-press__logos img {
	display: block;
	max-width: 100%;
	height: auto;
	opacity: .38;
	transition: opacity .18s ease;
}

.gm-press__logos img:hover { opacity: .78; }

@media (prefers-reduced-motion: reduce) {
	.gm-press__logos img { transition: none; }
}


/* =========================================================================
   27. Contribute button
   ========================================================================= */

/* Hidden by default: the bottom bar carries this link on a phone. */
.gm-contribute { display: none; }

@media (min-width: 900px) {
	.gm-contribute {
		position: fixed;
		right: 24px;
		bottom: 24px;
		z-index: 70;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 12px 18px;
		border: var(--tile) solid var(--brand);
		border-radius: var(--radius);
		background: var(--brand);
		color: #fff;
		font-family: var(--display);
		font-size: .8125rem;
		font-weight: 700;
		letter-spacing: .02em;
		text-decoration: none;
		box-shadow: 0 6px 20px rgba(27, 27, 47, .18);
		transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
	}

	.gm-contribute:hover,
	.gm-contribute:focus-visible {
		transform: translateY(-2px);
		background: var(--ink);
		border-color: var(--ink);
		color: #fff;
		box-shadow: 0 10px 26px rgba(27, 27, 47, .26);
	}

	.gm-contribute:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

	.gm-contribute__icon { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.gm-contribute { transition: none; }
	.gm-contribute:hover { transform: none; }
}

@media print {
	.gm-contribute { display: none; }
}


/* =========================================================================
   28. Guides index
   ========================================================================= */

.gm-guideList {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	border-top: 1px solid var(--rule);
}

.gm-guideList__item {
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--rule);
}

.gm-guideList__title {
	margin: 0 0 5px;
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: -.015em;
}

.gm-guideList__title a { color: var(--ink); text-decoration: none; }
.gm-guideList__title a:hover { color: var(--brand); }

.gm-guideList__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	color: var(--muted);
	font-size: .8125rem;
}

.gm-guideList__by { font-family: var(--display); font-weight: 700; color: var(--ink); }
.gm-guideList__meta time { font-family: var(--mono); font-size: .75rem; color: var(--faint); }

@media (min-width: 700px) {
	.gm-guideList__item { padding: 22px 0; }
	.gm-guideList__title { font-size: 1.4375rem; }
}


/* --- Lead card on a narrow screen ------------------------------------------- */

/* The overlay is absolutely positioned inside a 1200/630 box. That box is
   short, and a headline wrapping to four lines overflows and is clipped.
   Below the breakpoint the text lays out normally and the box grows to
   fit it, while the pattern keeps filling whatever height results. */
@media (max-width: 699px) {
	.gm-lead .gm-card__pattern,
	.gm-card--feature .gm-card__pattern {
		aspect-ratio: auto;
		min-height: 190px;
	}

	.gm-lead .gm-card__over,
	.gm-card--feature .gm-card__over {
		position: relative;
		inset: auto;
		max-width: 100%;
		padding: 20px;
	}

	.gm-lead .gm-card__overTitle { font-size: 1.375rem; }

}


/* =========================================================================
   29. Keeping the page inside the screen
   ========================================================================= */

/* Grid and flex children are min-width:auto by default, so one long
   unbreakable string — an email address, a URL, a long headline — makes
   its track wider than the screen and scrolls the whole page sideways. */
.gm-foot__inner > *,
.gm-foot__col,
.gm-guides__grid > *,
.gm-revGrid__item,
.gm-mosaic > *,
.gm-lead,
.gm-recent li { min-width: 0; }

.gm-foot__col a,
.gm-foot__widgets,
.gm-about__body,
.gm-guideList__title,
.gm-rg__bar p { overflow-wrap: anywhere; }

/* An address should break at the @ rather than force the column wider. */
.gm-about__cta a { overflow-wrap: anywhere; }

/* Backstop. Clip rather than hidden, which would break sticky elements. */
body { overflow-x: clip; }

@supports not (overflow: clip) {
	body { overflow-x: hidden; }
}