:root {
	--bg: #ffffff;
	--surface: #ffffff;
	--ink: #112f3d;
	--muted: #5d707b;
	--line: #dce5ea;
	--green: #8dc63f;
	--green-dark: #539926;
	--blue: #214e6d;
	--blue-dark: #2e3a44;
	--radius: 12px;
	--shell-max: 1240px;
	--shell-gutter: max(20px, calc((100vw - var(--shell-max)) / 2));
}

* {
	box-sizing: border-box;
}

/* clip rather than hidden. Setting one axis to hidden forces the other axis from
   visible to auto, which makes the element a scroll container and re-anchors
   every position: sticky descendant to it instead of to the viewport. clip does
   the same visual job without that side effect, which is what lets the sticky
   site header and the sticky leaderboard column header work. */
html,
body {
	margin: 0;
	padding: 0;
	overflow-x: clip;
}

body {
	font-family: 'Inter', sans-serif;
	background: var(--bg);
	color: var(--ink);
	line-height: 1.42;
}

a {
	color: var(--blue);
}

.container {
	width: min(1180px, 94vw);
	margin: 0 auto;
}

.site-ribbon {
	display: none;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: #ffffff;
	border-bottom: 1px solid #d4dee5;
}

/* The header is a stacking context, so its drawers can never rise above the
   compare drawer (940) unless the header itself does. Stays under modals. */
.global-nav {
	z-index: 960;
}

.site-header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 70px;
}

.brand {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem);
	font-weight: 700;
	text-decoration: none;
	color: #183849;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.site-nav a {
	text-decoration: none;
	color: #2b404b;
	font-weight: 600;
	font-size: 0.9rem;
	padding: 8px 10px;
	border-radius: 999px;
}

.site-nav a:hover {
	background: #f5f9fb;
}

.site-main {
	padding: 0;
}

.figma-home {
	display: grid;
}

.figma-home > * {
	min-width: 0;
}

.home-shell {
	width: 100%;
	min-width: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: clip;
}

.figma-nav {
	display: grid;
	grid-template-columns: 320px minmax(420px, 1fr) auto;
	align-items: center;
	gap: 22px;
	min-height: 92px;
	padding: 0 var(--shell-gutter);
	background: #ffffff;
	border-bottom: 1px solid rgba(174, 176, 179, 0.45);
	position: relative;
}

.nav-icon-btn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	border-radius: 10px;
}

.nav-menu-toggle {
	flex-direction: column;
	gap: 4px;
}

.nav-icon-btn span {
	display: block;
	width: 28px;
	height: 3px;
	background: #214e6d;
	border-radius: 999px;
	margin: 0;
}

.nav-search-toggle img {
	width: 22px;
	height: 22px;
	opacity: 0.72;
}

.nav-drawer-backdrop {
	display: none;
}

.is-viewport-resizing .figma-nav-links,
.is-viewport-resizing .figma-nav-actions,
.is-viewport-resizing .nav-drawer-backdrop {
	transition: none !important;
}

.figma-logo {
	display: inline-flex;
	align-items: center;
	gap: 0;
	text-decoration: none;
	color: #163746;
	min-width: 0;
}

.logo-mark {
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
}

.logo-svg {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
	min-width: 0;
}

.figma-logo-header {
	max-width: 420px;
	min-height: 62px;
}

.figma-logo-header .logo-svg {
	height: 62px;
}

.logo-word {
	font-family: 'Inter', sans-serif;
	font-size: 1.34rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 0.95;
}

.logo-word span {
	display: block;
	font-weight: 600;
	font-size: 0.56em;
	letter-spacing: 0.1em;
	color: #2f5f77;
}

.figma-nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	flex-wrap: wrap;
}

.figma-nav-links a {
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #214e6d;
}

.figma-nav-links a:hover,
.figma-nav-links a:focus-visible {
	color: #17384d;
}

/* Underline is drawn rather than using font-weight, which would resize the item
   and shift the rest of the bar as you move between pages. */
.figma-nav-links a.is-current,
.nav-dropdown-wrap.is-current-section .nav-dropdown-trigger {
	color: #0f2c3d;
	text-decoration: underline;
	text-decoration-color: var(--green);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.nav-dropdown-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.nav-dropdown-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	padding: 0;
	background: transparent;
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #214e6d;
	cursor: pointer;
	line-height: 1;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible {
	color: #17384d;
}

.nav-dropdown-chevron {
	width: 8px;
	height: 8px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: translateY(-1px) rotate(45deg);
	opacity: 0.7;
	transition: transform 140ms ease;
}

.nav-dropdown {
	position: absolute;
	top: calc(100% + 11px);
	left: -12px;
	min-width: min(760px, calc(100vw - 42px));
	max-width: min(760px, calc(100vw - 42px));
	display: none;
	padding: 12px;
	background: #ffffff;
	border: 1px solid #d8e3ea;
	border-radius: 12px;
	box-shadow: 0 22px 44px rgba(20, 45, 62, 0.18);
	z-index: 85;
	max-height: min(68vh, 520px);
	overflow: auto;
}

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

.nav-dropdown.is-open + .nav-dropdown-chevron,
.nav-dropdown-wrap:focus-within .nav-dropdown-chevron {
	transform: translateY(1px) rotate(225deg);
}

.nav-dropdown-item {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.25;
	color: #214e6d;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
	background: #f1f7fb;
	color: #163746;
}

.nav-dropdown-item--all {
	margin-bottom: 8px;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #3d6f92;
	border-bottom: 1px solid #e3edf3;
	padding-bottom: 10px;
	border-radius: 0;
}

.nav-dropdown-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px 8px;
}

.figma-nav-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: flex-end;
}

.search-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 248px;
	padding-bottom: 7px;
	border-bottom: 1px solid rgba(174, 176, 179, 0.9);
}

.search-wrap > img {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	opacity: 0.55;
}

.figma-nav-actions input {
	width: 100%;
	height: 24px;
	border: 0;
	border-radius: 0;
	padding: 0 0 0 28px;
	font-size: 0.82rem;
	color: #214e6d;
	background: transparent;
}

.figma-nav-actions input:focus {
	outline: none;
}

.nav-actions-divider {
	width: 1px;
	height: 30px;
	background: rgba(174, 176, 179, 0.75);
}

/* Sitewide search suggestions. The wrapper exists purely to anchor the panel,
   because the panel cannot live inside the <label> without label activation
   stealing clicks from the result links. */
.nav-search {
	position: relative;
}

/* Drawer chrome only exists at the mobile breakpoint. */
.nav-drawer-head {
	display: none;
}

body.is-search-drawer-open,
body.is-nav-drawer-open {
	overflow: hidden;
}

/* Desktop dim behind the suggestion panel. The mobile nav already has
   .nav-drawer-backdrop for its slide-down search, so this one is confined to
   the desktop breakpoint to avoid stacking two washes on top of each other.
   z-index sits below the header's 35 so the header and its dropdown stay clear. */
.site-search-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(20, 45, 62, 0.24);
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease;
	z-index: 30;
}

@media (min-width: 1201px) {
	.site-search-backdrop {
		display: block;
	}

	body.is-site-search-open .site-search-backdrop {
		opacity: 1;
		pointer-events: auto;
	}
}

.nav-search-results {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	width: 380px;
	max-width: min(380px, calc(100vw - 32px));
	max-height: min(70vh, 520px);
	overflow-y: auto;
	padding: 6px;
	background: #ffffff;
	border: 1px solid #d8e3ea;
	border-radius: 12px;
	box-shadow: 0 22px 44px rgba(20, 45, 62, 0.18);
	z-index: 80;
}

.nav-search-results[hidden] {
	display: none;
}

.nav-search-heading {
	margin: 8px 8px 4px;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #93a6b3;
}

.nav-search-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 8px;
	text-decoration: none;
	color: #14354b;
}

.nav-search-row:hover,
.nav-search-row.is-active {
	background: #f1f7fb;
}

.nav-search-thumb {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 38px;
	border-radius: 6px;
	background: #f4f7f9;
	overflow: hidden;
}

.nav-search-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.nav-search-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nav-search-title {
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.25;
	color: #14354b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nav-search-meta {
	font-size: 0.72rem;
	font-weight: 600;
	color: #6b7f8c;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nav-search-score {
	margin-left: auto;
	flex: none;
	font-size: 0.74rem;
	font-weight: 800;
	color: #5f991f;
}

.nav-search-empty {
	margin: 0;
	padding: 14px 10px;
	font-size: 0.82rem;
	color: #6b7f8c;
}

.nav-search-all {
	display: block;
	margin-top: 4px;
	padding: 10px 8px 6px;
	border-top: 1px solid #eef3f7;
	font-size: 0.78rem;
	font-weight: 700;
	color: #173c54;
	text-decoration: none;
}

.nav-search-all:hover,
.nav-search-all.is-active {
	color: #5f991f;
}

.nav-match-link {
	text-decoration: none;
	min-height: 38px;
	min-width: 133px;
	padding: 9px 16px;
	font-size: 0.79rem;
	font-weight: 700;
	letter-spacing: 0;
	border-radius: 999px;
	background: var(--green);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

.nav-match-link:hover,
.nav-match-link:focus-visible {
	background: #7abf33;
	box-shadow: 0 8px 20px rgba(84, 153, 38, 0.3);
}

/* A pill, so it takes the darkened treatment without the underline. */
.nav-match-link.is-current {
	background: #539926;
}

.hero-v4 {
	position: relative;
	min-height: 675px;
	background:
		linear-gradient(90deg, rgba(33, 49, 65, 0.72) 0%, rgba(33, 49, 65, 0.2) 60%, rgba(33, 49, 65, 0.03) 100%),
		var(--hero-bg-image, none) center top / cover no-repeat,
		#214e6d;
}

.hero-v4-overlay {
	padding: 108px var(--shell-gutter) 74px;
	max-width: none;
	/* No width cap: --shell-gutter grows with the viewport, so capping the
	   bordered box made the copy column narrower the wider the window got. The
	   gutter alone already yields the same --shell-max content width every other
	   section uses, and h1/p/.hero-stats each carry their own max-width. */
	width: 100%;
	color: #fff;
}

.hero-kicker {
	margin: 0 0 18px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	line-height: 16px;
	font-weight: 900;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.hero-kicker::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 16px;
	border-radius: 999px;
	background: var(--green);
}

.hero-v4 h1 {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 64px;
	line-height: 64px;
	max-width: 650px;
	letter-spacing: 0;
}

.hero-v4 h1 span {
	color: var(--green);
}

.hero-v4 p {
	margin: 24px 0 0;
	font-size: 1.08rem;
	max-width: 54ch;
	font-weight: 600;
}

.hero-actions {
	display: flex;
	gap: 14px;
	margin-top: 26px;
	flex-wrap: wrap;
}

.btn-solid,
.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	min-height: 45px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 11px 18px;
	border-radius: 999px;
}

.btn-solid {
	background: var(--green);
	color: #163746;
}

.btn-solid:hover,
.btn-solid:focus-visible {
	background: #7abf33;
	box-shadow: 0 8px 18px rgba(84, 153, 38, 0.34);
}

.btn-outline {
	border: 1px solid rgba(255, 255, 255, 0.38);
	color: #fff;
	background: rgba(255, 255, 255, 0.09);
	-webkit-backdrop-filter: blur(8px) saturate(130%);
	backdrop-filter: blur(8px) saturate(130%);
}

.btn-outline:hover,
.btn-outline:focus-visible {
	background: rgba(255, 255, 255, 0.17);
	border-color: rgba(255, 255, 255, 0.6);
}

.hero-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 44px;
	max-width: 470px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.hero-stats strong {
	display: block;
	font-size: 2rem;
	line-height: 1;
}

.hero-stats span {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--green);
	opacity: 1;
}

.claims-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: -56px var(--shell-gutter) 0;
	border-radius: 12px;
	border: 1px solid rgba(33, 78, 109, 0.2);
	box-shadow: 0 12px 30px rgba(22, 55, 70, 0.16);
	overflow: hidden;
	position: relative;
	z-index: 2;
}

.claims-row article {
	text-align: center;
	padding: 36px 14px;
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	background: var(--green-dark);
}

.claims-row article + article {
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.22);
}

.claims-row article:first-child {
	background: var(--green);
}

.claims-row article:nth-child(2) {
	background: var(--blue);
}

.filter-row {
	display: grid;
	grid-template-columns: 220px 220px minmax(320px, 571px) 133px;
	gap: 30px;
	padding: 90px var(--shell-gutter) 52px;
	background: #ffffff;
	border-top: 1px solid #dbe4ea;
	border-bottom: 1px solid #dbe4ea;
	margin-top: -50px;
}

.filter-row label {
	display: grid;
	gap: 10px;
	font-size: 0.83rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(46, 58, 68, 0.6);
}

.filter-row select,
.filter-row input {
	width: 100%;
	height: 47px;
	border: 1px solid rgba(46, 58, 68, 0.25);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 0.94rem;
	background: #fff;
	color: #2e3a44;
}

.filter-row button {
	align-self: end;
	height: 38px;
	border: 0;
	border-radius: 999px;
	padding: 9px 0;
	font-size: 0.79rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	background: var(--green);
	color: #ffffff;
	cursor: pointer;
}

.filter-row button:hover,
.filter-row button:focus-visible {
	background: #7abf33;
}

.section-v4 {
	padding: 86px var(--shell-gutter);
	min-width: 0;
	border-bottom: 1px solid rgba(174, 176, 179, 0.6);
}

.leaderboard-block,
.methodology-v4 {
	padding-top: 92px;
	padding-bottom: 92px;
}

.section-tag {
	margin: 0 0 12px;
	padding-left: 13px;
	font-size: 0.83rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: rgba(33, 78, 109, 0.8);
	position: relative;
}

.section-tag::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 14px;
	transform: translateY(-50%);
	border-radius: 999px;
	background: var(--green);
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 12px;
}

.section-head h2 {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: clamp(2.2rem, 3.1vw, 2.5rem);
	line-height: 0.98;
}

/* Optional "All Categories" link, opposite the heading in the space-between row. */
.section-head-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--blue);
}

.section-head-link img {
	width: 14px;
	height: auto;
}

.section-head-link:hover,
.section-head-link:focus-visible {
	color: var(--green-dark);
	text-decoration: underline;
}

/* Sits opposite the heading because .section-head is a space-between flex row.
   Reports when the rankings were last published, which is the only date that
   means anything on this table: scores are frozen between publishes. */
.leaderboard-updated {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
}

.leaderboard-updated span {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(33, 78, 109, 0.7);
}

.leaderboard-updated time {
	font-size: 0.85rem;
	font-weight: 700;
	color: #163746;
}

.section-copy {
	margin: 0 0 34px;
	font-size: 1.06rem;
	color: var(--muted);
	max-width: 66ch;
}

.category-grid-v4 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.category-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid rgba(174, 176, 179, 0.3);
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 8px 30px rgba(33, 78, 109, 0.09);
	will-change: transform;
	transition: transform 120ms ease-out, box-shadow 150ms ease-out;
}

.category-card:hover,
.category-card:focus-within {
	transform: scale(1.018);
	box-shadow: 0 18px 42px rgba(23, 56, 77, 0.18);
}

.category-image {
	height: 220px;
	background:
		var(--category-image, none) center / cover no-repeat,
		linear-gradient(135deg, #ced8df, #e7edf2);
}

.category-card h3 {
	margin: 18px 22px 8px;
	font-size: 1.86rem;
	line-height: 1;
	font-family: 'Inter', sans-serif;
	font-weight: 800;
}

.category-card p {
	margin: 0 22px;
	font-size: 1rem;
	color: #5f7380;
	min-height: 84px;
}

.category-card .category-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 16px 22px 20px;
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5f8c1c;
}

.category-card .category-link img {
	width: 11px;
	height: 11px;
}

.leaderboard-block {
	background: #f9fbfc;
}

.leaderboard-block .compare-table-wrap {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	/* clip, not hidden: hidden on one axis computes the other to auto, which makes
	   this a scroll container and re-anchors the sticky header row to it. */
	overflow-x: clip;
	overflow-y: visible;
	overscroll-behavior-x: contain;
	touch-action: auto;
	border: 1px solid rgba(174, 176, 179, 0.35);
	border-radius: 18px;
	cursor: default;
}

.compare-table-wrap.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.leaderboard-block .compare-table {
	width: 100%;
	min-width: 0;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: auto;
}

.compare-table thead th {
	background: #8dc63f;
	color: #163746;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0;
	text-align: left;
}

.compare-table thead th .sort-btn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 14px 10px;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	font-weight: 800;
	cursor: pointer;
}

.compare-table thead th .sort-indicator {
	margin-left: auto;
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.compare-table thead th .sort-icon {
	width: 9px;
	height: 11px;
	fill: currentColor;
}

.compare-table thead th .sort-icon path {
	opacity: 0.3;
}

.compare-table thead th .sort-btn[data-sort-dir='asc'] .sort-icon-up,
.compare-table thead th .sort-btn[data-sort-dir='desc'] .sort-icon-down {
	opacity: 1;
}

.compare-table thead th.col-award {
	width: 34px;
	min-width: 34px;
	max-width: 34px;
	padding: 0;
}

.compare-table td {
	padding: 13px 10px;
	font-size: 0.92rem;
	font-weight: 600;
	border-bottom: 1px solid #e2eaef;
	background: #ffffff;
}

.leaderboard-block .compare-table th,
.leaderboard-block .compare-table td {
	white-space: normal;
}

.leaderboard-block .compare-table th:not(:nth-child(-n+3)),
.leaderboard-block .compare-table td:not(:nth-child(-n+3)) {
	min-width: 0;
}

.leaderboard-block .compare-table th:nth-child(1),
.leaderboard-block .compare-table td:nth-child(1) {
	position: static;
	left: auto;
	z-index: auto;
	width: auto;
	min-width: 0;
	max-width: none;
}

.leaderboard-block .compare-table th:nth-child(2),
.leaderboard-block .compare-table td:nth-child(2) {
	position: static;
	left: auto;
	z-index: auto;
	width: auto;
	min-width: 0;
	max-width: none;
}

.leaderboard-block .compare-table thead th:nth-child(1),
.leaderboard-block .compare-table thead th:nth-child(2) {
	z-index: auto;
}

.leaderboard-block .compare-table td:nth-child(1),
.leaderboard-block .compare-table td:nth-child(2),
.leaderboard-block .compare-table td:nth-child(3) {
	background: #ffffff;
}

/* .is-highlighted rather than :first-child: the leader is whoever holds rank 1,
   and the sort buttons reorder the DOM. Matching on position would repaint an
   arbitrary row navy as soon as the table is sorted by any other column. */
.leaderboard-block .compare-table tbody tr.is-highlighted td:nth-child(1),
.leaderboard-block .compare-table tbody tr.is-highlighted td:nth-child(2),
.leaderboard-block .compare-table tbody tr.is-highlighted td:nth-child(3) {
	background: #2f3f4d;
}

.leaderboard-block .compare-table th:nth-child(3),
.leaderboard-block .compare-table td:nth-child(3) {
	box-shadow: none;
}

.leaderboard-block .compare-table td:nth-child(3) {
	padding-right: 10px;
}

.leaderboard-block .compare-table .bike-name-truncate {
	display: block;
	max-width: none;
	overflow: hidden;
	text-overflow: clip;
	white-space: normal;
	font-weight: 700;
}

.leaderboard-block .compare-table .bike-brand {
	display: block;
	margin-top: 2px;
	font-size: 0.72rem;
	font-weight: 500;
	color: #7c8d97;
}

/* Underline-only hover so the link reads correctly on both the white rows and
   the dark highlighted first row. */
.leaderboard-bike-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.leaderboard-bike-link:hover .bike-name-truncate,
.leaderboard-bike-link:focus .bike-name-truncate,
.leaderboard-bike-link:focus-visible .bike-name-truncate {
	text-decoration: underline;
}

.compare-table tbody tr.is-highlighted td {
	background: #2f3f4d;
	color: #f1f7fb;
	font-weight: 700;
}

.compare-table tbody tr.is-highlighted .bike-brand {
	color: #8dc63f;
}

/* The hollow grey pin is invisible against the navy leader row, so invert it to
   white there. Same treatment the full board applies. */
.compare-table tbody tr.is-highlighted .leaderboard-pin-toggle img {
	filter: brightness(0) invert(1);
}

.compare-table td:nth-child(1),
.compare-table td:nth-child(2),
.compare-table td:nth-child(4),
.compare-table td:nth-child(5),
.compare-table td:nth-child(6),
.compare-table td:nth-child(7),
.compare-table td:nth-child(9) {
	text-align: center;
}

.award-cell {
	padding-left: 8px;
	padding-right: 8px;
}

.award-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: #8dc63f;
}

.award-icon img {
	width: 11px;
	height: 11px;
}

.award-icon svg {
	display: block;
	width: 10px;
	height: 13px;
	color: #ffffff;
}

.award-icon-empty {
	background: transparent;
}

/* .award-icon is display:inline-flex, which outranks the UA [hidden] rule. The
   medal moves between rows as the filter changes, so the cell keeps its width
   whether or not it currently holds the leader. */
.award-icon[hidden] {
	display: none;
}

.award-cell {
	min-width: 26px;
}

.status-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 1;
}

.status-pill img {
	width: 12px;
	height: 12px;
}

.status-pill.is-champion {
	background: #8dc63f;
	color: #ffffff;
}

.status-pill.is-top {
	background: #c8e0f3;
	color: #194a67;
}

.status-pill.is-stable {
	background: #e3ebf0;
	color: #3f5665;
}

/* A bike with no published standing yet: newly added, or re-enabled after being
   held back. It has no previous position to move from. */
.status-pill.is-new {
	background: #ded3f2;
	color: #4a2f7a;
}

.pin-cell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pin-cell img {
	width: 14px;
	height: 14px;
}

.compare-table tbody tr:last-child td {
	border-bottom: 0;
}

.leaderboard-actions {
	text-align: center;
	padding-top: 20px;
}

.leaderboard-actions a {
	display: inline-flex;
	text-decoration: none;
	height: 38px;
	align-items: center;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	background: var(--green);
	color: #163746;
	padding: 0 18px;
	border-radius: 999px;
}

.leaderboard-actions p {
	margin: 12px 0 0;
	font-size: 0.86rem;
	color: #7b8b93;
}

.leaderboards-page {
	background: #f9fbfc;
}

/* The home page top-five preview reuses the .leaderboards-page wrapper purely to
   inherit the table rules, but it sits on the home page's own background rather
   than the leaderboard page's tint. */
.leaderboards-page.is-preview {
	background: transparent;
}

.leaderboards-shell {
	padding-top: 74px;
	padding-bottom: 74px;
}

.leaderboards-shell .section-head h1 {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: clamp(2.35rem, 3.5vw, 3.25rem);
	line-height: 1;
	color: #163746;
}

.leaderboards-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 19px;
	row-gap: 12px;
	margin: 24px 0 18px;
	scroll-margin-top: 110px;
}

.leaderboards-filter-label {
	flex: 0 0 100%;
	margin: 0;
	font-size: 18px;
	line-height: 18px;
	font-weight: 400;
	color: rgba(46, 58, 68, 0.6);
}

.leaderboards-search {
	order: 3;
	flex: none;
	width: 336px;
	max-width: 100%;
	margin-left: auto;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 27px;
	padding: 5px 17px;
	border: 1px solid rgba(46, 58, 68, 0.3);
	border-radius: 100px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.leaderboards-search:focus-within {
	border-color: var(--blue);
	box-shadow: 0 0 0 2px rgba(33, 78, 109, 0.15);
}

.leaderboards-search-icon {
	flex: 0 0 auto;
	display: block;
	width: 15px;
	height: 15px;
}

.leaderboards-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 0;
	background: transparent;
	font-size: 12px;
	line-height: 16px;
	color: var(--blue-dark);
}

.leaderboards-search-input::placeholder {
	color: #aeb0b3;
}

.leaderboards-search-input:focus {
	outline: none;
}

.leaderboards-pills {
	order: 2;
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 19px;
	margin: 0;
}

.leaderboards-pill {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	height: 27px;
	padding: 5px 17px;
	border: 1px solid rgba(46, 58, 68, 0.3);
	border-radius: 100px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	color: rgba(46, 58, 68, 0.5);
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.leaderboards-pill.is-active {
	background: var(--blue);
	border-color: var(--blue);
	color: #ffffff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.leaderboards-stats {
	display: flex;
	align-items: flex-start;
	gap: 34px;
	flex: 0 0 auto;
}

.leaderboards-stats article {
	display: grid;
	justify-items: end;
	gap: 2px;
	text-align: right;
}

.leaderboards-stats strong {
	font-size: 28px;
	line-height: 32px;
	font-weight: 800;
	color: #163746;
}

.leaderboards-stats span {
	font-size: 12px;
	line-height: 16px;
	color: #7b8b93;
}

.pinned-bikes {
	background: #ffffff;
	border: 1px solid #dbe5eb;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 18px;
}

.pinned-bikes-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 16px;
	background: var(--green);
}

.pinned-bikes-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 11px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #ffffff;
}

.pinned-bikes-title img {
	display: block;
	width: 12px;
	height: 12px;
}

.pinned-bikes-clear {
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 10px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffffff;
	cursor: pointer;
}

.pinned-bikes-list {
	display: block;
	margin: 0;
}

.pinned-bike-card {
	display: grid;
	grid-template-columns: 78px minmax(150px, 1fr) minmax(0, 2.6fr) auto auto auto;
	align-items: center;
	gap: 18px;
	padding: 14px 16px;
	border-top: 1px solid #e6edf1;
	background: #ffffff;
}

.pinned-bikes-list .pinned-bike-card:first-child {
	border-top: 0;
}

.pinned-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 58px;
	border: 1px solid #e2eaef;
	border-radius: 8px;
	background: #ffffff;
	overflow: hidden;
}

.pinned-thumb img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.pinned-thumb--empty {
	border-color: #edf2f5;
}

.pinned-thumb--empty span {
	font-size: 9px;
	line-height: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #9aa9b3;
}

.pinned-identity {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	min-width: 0;
}

.pinned-rank {
	margin: 0;
	font-size: 13px;
	line-height: 17px;
	font-weight: 800;
	color: #8a99a3;
}

.pinned-bike-card h3 {
	margin: 0;
	font-size: 15px;
	line-height: 19px;
	font-weight: 800;
	color: #163746;
}

.pinned-bike-card h3 a {
	color: inherit;
	text-decoration: none;
}

.pinned-brand {
	flex: 0 0 100%;
	margin: 0;
	font-size: 10px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #8a99a3;
}

.pinned-meters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	min-width: 0;
}

.pinned-meter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 5px 8px;
}

.pinned-meter-label {
	font-size: 10px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #8a99a3;
}

.pinned-meter-value {
	font-size: 12px;
	line-height: 14px;
	font-weight: 800;
	text-align: right;
	color: var(--score-text, #1f4259);
}

.pinned-meter-track {
	grid-column: 1 / -1;
	display: block;
	height: 4px;
	border-radius: 999px;
	background: var(--score-track, #e3eaee);
	overflow: hidden;
}

.pinned-meter-track i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--score-color, var(--green));
}

.pinned-price {
	display: grid;
	gap: 2px;
	justify-items: end;
	text-align: right;
}

.pinned-price span {
	font-size: 9px;
	line-height: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #8a99a3;
}

.pinned-price strong {
	font-size: 15px;
	line-height: 19px;
	font-weight: 800;
	color: #163746;
}

.pinned-unpin {
	padding: 4px;
	border: 0;
	background: transparent;
	line-height: 0;
	cursor: pointer;
}

.pinned-unpin img {
	display: block;
	width: 16px;
	height: 16px;
}

/* Shared drag-handle chrome. touch-action must be none or the browser claims
   the gesture for scrolling and no pointermove ever reaches the sortable. */
.pinned-drag,
.compare-drawer-drag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	cursor: grab;
	touch-action: none;
}

.pinned-drag svg,
.compare-drawer-drag svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.pinned-drag {
	color: #9db0bc;
}

.pinned-drag:hover,
.pinned-drag:focus-visible {
	color: #4b6373;
	background: #f1f5f8;
}

.compare-drawer-drag {
	flex: none;
	color: rgba(255, 255, 255, 0.55);
}

.compare-drawer-drag:hover,
.compare-drawer-drag:focus-visible {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.12);
}

.pinned-bikes-list.is-sorting,
.compare-drawer-list.is-sorting {
	cursor: grabbing;
}

.pinned-bikes-list.is-sorting .pinned-drag,
.compare-drawer-list.is-sorting .compare-drawer-drag {
	cursor: grabbing;
}

/* The gap the card would drop into. Created by the sortable with the same tag
   as the item it replaces, so the container's grid or list rules still apply. */
.ebr-sort-placeholder {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	border: 2px dashed #a9bccb;
	border-radius: 14px;
	background: rgba(33, 78, 109, .06);
}

@media screen and (prefers-reduced-motion: no-preference) {
	.ebr-sort-placeholder {
		animation: ebrSortSlotIn 160ms ease-out;
	}

	/* Keyboard reordering gets no ghost, so flash the row that moved instead. */
	.pinned-bike-card.is-just-moved,
	.compare-drawer-item.is-just-moved {
		animation: ebrSortFlash 600ms ease-out;
	}
}

@keyframes ebrSortSlotIn {
	from { opacity: 0; transform: scale(.97); }
	to { opacity: 1; transform: scale(1); }
}

.compare-drawer-list .ebr-sort-placeholder {
	border-color: rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .1);
	border-radius: 10px;
}

/* Lifted to <body> and following the pointer, so it needs to read as detached
   from the list it came out of. */
.pinned-bike-card.is-dragging,
.compare-drawer-item.is-dragging {
	overflow: hidden;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 20px 38px rgba(11, 32, 45, .34);
	opacity: .96;
	transform: scale(1.02);
	cursor: grabbing;
}

.compare-drawer-item.is-dragging {
	background: #1b4157;
	color: #fff;
}

/* Only the ghost should look draggable while a drag is running: everything else
   keeps its own cursor, but nothing anywhere may start a text selection. */
body.is-ebr-sorting {
	cursor: grabbing;
	user-select: none;
}

@keyframes ebrSortFlash {
	from { box-shadow: inset 0 0 0 2px var(--green, #6cc04a); }
	to { box-shadow: inset 0 0 0 2px transparent; }
}

.pinned-bikes-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px;
	border-top: 1px solid #e6edf1;
	background: #f7fafb;
}

.pinned-compare {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 240px;
	padding: 12px 28px;
	border-radius: 999px;
	background: var(--green, #8dc63f);
	color: #fff;
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease;
}

.pinned-compare:hover,
.pinned-compare:focus {
	background: #7ab32f;
}

.pinned-compare.is-disabled {
	background: #c6d2d9;
	cursor: default;
}

.pinned-compare-hint {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	color: #7b8b93;
	text-align: center;
}

@media (max-width: 900px) {
	.pinned-bike-card {
		grid-template-columns: 64px minmax(0, 1fr) auto auto;
		gap: 10px 12px;
	}

	.pinned-thumb {
		width: 64px;
		height: 48px;
	}

	.pinned-drag {
		grid-column: 3;
		grid-row: 1;
		align-self: start;
		justify-self: end;
	}

	/* Auto-placement pushed the pin below the two full-width spans that follow
	   it, landing it at the bottom-left. Place it explicitly in the card's top
	   right instead. The negative margin keeps the icon flush with the corner
	   while the padding grows the tap target to ~40px. */
	.pinned-unpin {
		grid-column: 4;
		grid-row: 1;
		justify-self: end;
		align-self: start;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		min-height: 40px;
		margin: -8px -8px 0 0;
	}

	.pinned-meters {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.pinned-price {
		grid-column: 1 / -1;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		justify-items: stretch;
		padding-top: 10px;
		border-top: 1px solid #eef3f6;
		text-align: left;
	}

	.pinned-bikes-foot {
		align-items: stretch;
	}

	.pinned-compare {
		width: 100%;
		min-width: 0;
	}
}

@media (min-width: 1037px) {
	.leaderboards-page .compare-table th:nth-child(1),
	.leaderboards-page .compare-table td:nth-child(1) {
		width: 3%;
	}

	.leaderboards-page .compare-table th:nth-child(2),
	.leaderboards-page .compare-table td:nth-child(2) {
		width: 7%;
	}

	.leaderboards-page .compare-table th:nth-child(3),
	.leaderboards-page .compare-table td:nth-child(3) {
		width: 32%;
	}

	.leaderboards-page .compare-table th:nth-child(4),
	.leaderboards-page .compare-table td:nth-child(4) {
		width: 12%;
	}

	.leaderboards-page .compare-table th:nth-child(5),
	.leaderboards-page .compare-table td:nth-child(5),
	.leaderboards-page .compare-table th:nth-child(6),
	.leaderboards-page .compare-table td:nth-child(6) {
		width: 9%;
	}

	.leaderboards-page .compare-table th:nth-child(7),
	.leaderboards-page .compare-table td:nth-child(7) {
		width: 11%;
	}

	.leaderboards-page .compare-table th:nth-child(8),
	.leaderboards-page .compare-table td:nth-child(8) {
		width: 12%;
	}

	.leaderboards-page .compare-table th:nth-child(9),
	.leaderboards-page .compare-table td:nth-child(9) {
		width: 5%;
	}

	.leaderboards-page .award-cell {
		padding-left: 6px;
		padding-right: 6px;
	}
}

.leaderboards-page .compare-table-wrap {
	margin-top: 8px;
	/* Prevent the shared drag-scroll script from making the leaderboard table scroll horizontally */
	overscroll-behavior-x: auto;
	touch-action: auto;
	/* clip keeps the rounded corners trimmed without turning the wrapper into a
	   scroll container, which would strand the sticky header at the top of the
	   table rather than letting it follow the page. */
	overflow: clip;
}

/* The header row follows the page down so the column a number belongs to, and
   which column is currently sorted, stay readable in an 85 row table. top: 0
   rather than an offset because .figma-nav sets position: relative on the site
   header, overriding the sticky rule on .site-header, so the nav scrolls away
   and leaves nothing to clear. Scoped through .leaderboard-block to outrank the
   home page rule that clears z-index on the first two header cells. */
.leaderboards-page .leaderboard-block .compare-table thead th {
	position: sticky;
	top: 0;
	z-index: 6;
	box-shadow: 0 1px 0 rgba(22, 55, 70, 0.16);
}

/* Sticky is only the no-JS fallback. iOS pins it to the layout viewport, which
   starts below Safari's floating toolbar, so it parks mid-screen with rows
   visible above it; the script mirrors the row into a fixed bar instead. */
.leaderboards-page.has-float-head .compare-table thead th {
	position: static !important;
}

.leaderboard-float-head {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 18;
	margin: 0;
	padding: 0;
	max-width: none;
	/* !important because the clone inherits .is-preview, whose transparent
	   background outranks a single-class rule here. Only ever visible in the
	   mobile full-bleed gutters; on desktop the header cells cover it. */
	background: #8dc63f !important;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(22, 55, 70, 0.2);
}

.leaderboard-float-head.is-visible {
	visibility: visible;
	pointer-events: auto;
}

/* The clone mirrors the board's wrapper elements to inherit their column rules,
   so their own spacing has to be stripped back off. !important because the
   section's own responsive padding sits later in this file and would otherwise
   shrink the cloned table out of line with the real one. */
.leaderboard-float-head > * {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	border: 0 !important;
	background: transparent !important;
}

.leaderboard-float-head .compare-table {
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

.leaderboard-float-head .compare-table thead th {
	position: static !important;
}

.leaderboards-page .compare-table td {
	font-size: 0.9rem;
	font-weight: 600;
}

.leaderboards-page .compare-table td:nth-child(3) {
	text-align: left;
}

.leaderboards-page .leaderboard-row {
	cursor: default;
}

.leaderboards-page .leaderboard-row.is-highlighted td {
	background: #2f3f4d;
	color: #f2f7fb;
}

.leaderboards-page .leaderboard-row.is-highlighted .bike-brand {
	color: #8dc63f;
}

/* Unscoped: the home page top-five preview renders the same pin button so a
   bike can be shortlisted without loading the full board. */
.leaderboard-pin-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
}

/* Overall rank on the left, standing within the active filter on the right. The
   category rank is only rendered while a filter is active. */
.leaderboards-page .rank-cell {
	white-space: nowrap;
}

/* .status-pill sets display:inline-flex, which outranks the UA [hidden] rule,
   so the toggled pills need this to actually disappear. */
.leaderboards-page .status-pill[hidden],
.leaderboards-page .rank-category[hidden] {
	display: none;
}

.leaderboards-page .rank-category {
	margin-left: 8px;
	color: #6f8b1f;
	font-weight: 800;
}

.leaderboards-page .leaderboard-row.is-highlighted .rank-category {
	color: #8dc63f;
}

/* A pinned row greys out with a solid blue pin. The rank-1 leader is exempt:
   it keeps the navy leader highlight and fills its pin white instead, which the
   existing .is-highlighted invert filter already does once the icon swaps to
   the solid variant. */
.leaderboards-page .leaderboard-row.is-pinned:not(.is-highlighted) td {
	background: #f1f4f6;
	color: #163746;
}

.leaderboards-page .leaderboard-row.is-highlighted .leaderboard-pin-toggle img {
	filter: brightness(0) invert(1);
}

.leaderboards-page .leaderboard-empty td {
	padding: 18px 12px;
	text-align: center;
	color: #52708a;
}

.status-pill.is-up {
	background: #d9efd4;
	color: #285629;
}

.status-pill.is-down {
	background: #f5dada;
	color: #7d2c2c;
}

/* Expand toggle: hide on desktop, visible on mobile only via override */
.row-expand-toggle {
	display: none;
}

.leaderboard-detail td {
	background: #f6fafc;
	padding: 0;
	border-top: 0;
}

.detail-inner {
	display: block;
}

.detail-body {
	overflow: hidden;
	height: 0;
	transition: height 240ms ease;
}

.detail-content {
	padding: 14px 16px 16px;
	border-top: 1px solid #dde8ef;
	display: grid;
	gap: 12px;
}

.detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pin-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 999px;
	height: 34px;
	padding: 0 12px;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	text-decoration: none;
	border: 1px solid #1f4a63;
	background: #1f4a63;
	color: #ffffff;
	cursor: pointer;
}

.pin-btn .pin-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
}

.pin-btn .pin-btn-icon img {
	width: 11px;
	height: 11px;
	filter: brightness(0) invert(1);
}

.pin-btn.is-pinned {
	background: #8dc63f;
	border-color: #8dc63f;
	color: #173a4d;
}

.pin-btn.is-pinned .pin-btn-icon {
	background: rgba(23, 58, 77, 0.14);
}

.pin-btn.is-pinned .pin-btn-icon img {
	filter: none;
}

.detail-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	height: 34px;
	padding: 0 14px;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid #d2dfe7;
	background: #ffffff;
	color: #214e6d;
}

.detail-score-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.detail-score-card {
	border: 1px solid #dbe6ed;
	border-radius: 10px;
	padding: 8px 10px;
	background: #ffffff;
	display: grid;
	gap: 6px;
}

.detail-score-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.detail-score-head span {
	font-size: 0.73rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6a7f8b;
}

.detail-score-head strong {
	font-size: 0.9rem;
	font-weight: 800;
	color: var(--score-text, #1f4259);
}

.detail-score-track {
	height: 3px;
	border-radius: 99px;
	background: var(--score-track, #dfe8ee);
	overflow: hidden;
}

.detail-score-track span {
	display: block;
	height: 100%;
	background: var(--score-color, #8dc63f);
	border-radius: 99px;
}

@media (max-width: 1100px) {
	.detail-score-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.leaderboards-page {
		overflow-x: clip;
	}

	.leaderboards-shell .section-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.leaderboards-stats {
		gap: 28px;
	}

	.leaderboards-stats article {
		justify-items: start;
		text-align: left;
	}

	.leaderboards-shell {
		padding-top: 54px;
		padding-bottom: 56px;
	}

	.leaderboards-shell .section-head h1 {
		font-size: clamp(2rem, 8vw, 2.45rem);
		line-height: 0.98;
	}

	.leaderboards-filter {
		column-gap: 12px;
		row-gap: 10px;
	}

	.leaderboards-filter-label {
		flex: 0 0 auto;
		order: 1;
	}

	.leaderboards-search {
		order: 2;
		flex: 1 1 auto;
		width: auto;
		margin-left: 0;
	}

	.leaderboards-pills {
		order: 3;
		flex: 0 0 100%;
		gap: 8px;
	}

	.pinned-bikes-list {
		grid-template-columns: 1fr;
	}

	.leaderboards-page .compare-table th:nth-child(1),
	.leaderboards-page .compare-table th:nth-child(5),
	.leaderboards-page .compare-table th:nth-child(6),
	.leaderboards-page .compare-table th:nth-child(7),
	.leaderboards-page .compare-table th:nth-child(9),
	.leaderboards-page .compare-table tr:not([data-bike-detail]) > td:nth-child(1),
	.leaderboards-page .compare-table tr:not([data-bike-detail]) > td:nth-child(5),
	.leaderboards-page .compare-table tr:not([data-bike-detail]) > td:nth-child(6),
	.leaderboards-page .compare-table tr:not([data-bike-detail]) > td:nth-child(7),
	.leaderboards-page .compare-table tr:not([data-bike-detail]) > td:nth-child(9) {
		display: none;
	}

	.leaderboards-page .compare-table-wrap {
		overflow-x: clip;
		width: 100%;
	}

	.leaderboards-page .compare-table {
		min-width: 100%;
		width: 100%;
		table-layout: fixed;
	}

	.leaderboards-page .compare-table th:nth-child(2),
	.leaderboards-page .compare-table td:nth-child(2) {
		width: 13%;
		max-width: none;
	}

	.leaderboards-page .compare-table th:nth-child(3),
	.leaderboards-page .compare-table td:nth-child(3) {
		width: 38%;
	}

	.leaderboards-page .compare-table th:nth-child(4),
	.leaderboards-page .compare-table td:nth-child(4) {
		width: 19%;
		max-width: none;
	}

	.leaderboards-page .compare-table th:nth-child(8),
	.leaderboards-page .compare-table td:nth-child(8) {
		width: 30%;
		max-width: none;
	}

	.leaderboards-page .compare-table .bike-name-truncate {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.leaderboards-page .compare-table .bike-brand {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.leaderboards-page .leaderboard-row {
		cursor: pointer;
	}

	.leaderboards-page .leaderboard-row.is-expanded {
		outline: 2px solid #d5e9c0;
		outline-offset: -2px;
	}

	.detail-score-grid {
		grid-template-columns: 1fr;
	}

	.detail-actions {
		justify-content: space-between;
	}

	.detail-link,
	.pin-btn {
		height: 30px;
		font-size: 0.7rem;
	}
}

.methodology-v4 {
	background: #f3f6f8;
}

.value-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.value-card {
	border: 1px solid rgba(174, 176, 179, 0.3);
	border-radius: 20px;
	background: #fff;
	padding: 24px;
}

.value-card .mini {
	margin: 0;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #73b533;
}

.value-card h3 {
	margin: 8px 0 8px;
	font-size: 1.42rem;
	line-height: 1.18;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #2d333b;
}

.value-card p:not(.formula-kicker):not(.formula-main):not(.formula-note) {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.5;
	color: #394b59;
}

.value-formula-box {
	margin-top: 20px;
	padding: 16px 18px;
	border-radius: 10px;
	background: linear-gradient(120deg, #e9f4d5, #d9ecbd);
	text-align: center;
}

.value-card .formula-kicker {
	margin: 0;
	font-size: 18px;
	line-height: 29.25px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #4d8f24;
}

.value-card .formula-main {
	margin: 6px 0 4px;
	font-size: 36px;
	line-height: 64px;
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	letter-spacing: 0;
	color: #2f3d4f;
}

.value-card .formula-note {
	margin: 0;
	font-size: 18px;
	line-height: 29.25px;
	font-weight: 400;
	letter-spacing: 0;
	color: #4b606f;
}

.value-criteria-list,
.points-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.value-criteria-list li,
.points-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid #dbe5eb;
	font-size: 0.99rem;
	font-weight: 600;
	color: #303c49;
}

.value-criteria-list li:last-child,
.points-list li:last-child {
	border-bottom: 0;
}

.value-criteria-list li strong,
.points-list li strong {
	font-size: 1rem;
	font-weight: 700;
	color: #56a331;
}

.request-review {
	border-radius: 0;
	overflow: hidden;
	margin: 0 0 72px;
	border: 0;
}

.request-review-kicker {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	line-height: 15px;
	font-weight: 900;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(235, 246, 252, 0.95);
}

.request-review-kicker::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 14px;
	border-radius: 999px;
	background: var(--green);
}

.request-review-body {
	display: block;
	min-height: 310px;
	/* Band art stays full-bleed while the copy lines up with the shared content column. */
	padding: 52px var(--shell-gutter);
	background:
		linear-gradient(95deg, rgba(17, 55, 82, 0.78), rgba(17, 55, 82, 0.78)),
		var(--request-bg-image, none) center / cover no-repeat,
		#1e4a68;
	color: #fff;
}

.request-review-content {
	max-width: 575px;
	display: grid;
	gap: 16px;
}

.request-review-body h3 {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 64px;
	line-height: 64px;
	letter-spacing: 0;
	max-width: 14ch;
}

.request-review-body p {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 500;
	opacity: 0.94;
	max-width: 46ch;
}

.request-review-body a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	text-decoration: none;
	height: 34px;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--green);
	color: #163746;
	justify-self: start;
}

.request-review-body a img {
	width: 12px;
	height: 12px;
	filter: brightness(0) saturate(100%) invert(17%) sepia(22%) saturate(747%) hue-rotate(159deg) brightness(92%) contrast(91%);
}

.site-footer {
	position: relative;
	border-top: 1px solid rgba(174, 176, 179, 0.4);
	padding: 0;
	font-size: 0.86rem;
	color: #435a68;
}

.figma-footer {
	background:
		var(--footer-bg-image, none) center top / cover no-repeat,
		#ffffff;
}

.figma-footer-top {
	display: grid;
	grid-template-columns: minmax(280px, 1.3fr) minmax(0, 2fr);
	gap: 30px;
	padding: 56px 0 30px;
}

.figma-logo-footer {
	max-width: 300px;
	min-height: 52px;
}

.figma-logo-footer .logo-svg {
	max-height: 52px;
}

.figma-logo-footer.no-image {
	color: #163746;
}

.figma-logo-footer.no-image .logo-word span {
	color: #2f5f77;
}

.figma-footer-brand p {
	margin: 14px 0 0;
	font-size: 0.9rem;
	max-width: 42ch;
	color: #5a717f;
}

.figma-footer-contact {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.figma-footer-contact li {
	display: block;
}


.figma-footer-contact a {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #f2f6f9;
	border: 1px solid #d7e2e8;
}

.figma-footer-contact img {
	width: 15px;
	height: 15px;
	object-fit: contain;
}

.figma-footer-links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.figma-footer-links h3 {
	margin: 0 0 8px;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #6f8694;
}

.figma-footer-links a {
	display: block;
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 600;
	color: #214e6d;
	padding: 4px 0;
}

.figma-footer-links a:hover {
	color: #8dc63f;
}

.figma-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0 22px;
	border-top: 1px solid #dbe5eb;
}

.figma-footer-bottom p {
	margin: 0;
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: none;
	color: #7a8f9c;
}

.figma-footer-legal {
	display: inline-flex;
	align-items: center;
	gap: 16px;
}

.figma-footer-legal a {
	text-decoration: none;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	color: #214e6d;
}

.section-title {
	margin: 0 0 10px;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.65rem;
}

.featured-grid,
.collection-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.bike-card,
.collection-card,
.spec-card,
.page-panel {
	border: 1px solid #dce4ea;
	border-radius: 10px;
	background: #fff;
	padding: 12px;
}

.bike-card h3,
.collection-card h3 {
	margin: 0 0 6px;
	font-size: 1.05rem;
}

.bike-meta,
.note,
.component-value {
	color: #647781;
}

.score-chip,
.metric-pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 9px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
}

.score-chip {
	background: #d9efc6;
	color: #28421b;
}

.metric-pill {
	border: 1px solid #d8e2e8;
	background: #f7fafb;
	color: #4e616a;
}

.metric-row {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.detail-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
	gap: 12px;
}

.spec-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.spec-card h3 {
	margin: 0 0 6px;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #65808c;
}

.spec-card p {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
}

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

.component-item {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) minmax(0, 1.4fr) auto;
	gap: 10px;
	border-bottom: 1px solid #edf1f4;
	padding-bottom: 8px;
}

.component-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.component-label {
	font-weight: 700;
}

.component-points {
	font-weight: 700;
	color: #2d4f1d;
}

.quick-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.quick-links a {
	text-decoration: none;
	font-size: 0.86rem;
	font-weight: 600;
	padding: 8px 10px;
	border-radius: 999px;
	border: 1px solid #d5e0e6;
	background: #fff;
	color: #2f4550;
}

.empty-state {
	border: 1px dashed #bed0db;
	border-radius: 10px;
	padding: 12px;
	background: #f7fbfd;
	color: #4d6672;
}

@media (max-width: 1200px) {
	.figma-nav {
		--mobile-top-row-height: 78px;
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 12px;
		padding: 0 20px;
		min-height: var(--mobile-top-row-height);
		align-items: center;
	}

	.nav-icon-btn {
		display: inline-flex;
	}

	.nav-menu-toggle {
		grid-column: 1;
		grid-row: 1;
	}

	.figma-logo-header {
		grid-column: 2;
		grid-row: 1;
		max-width: min(360px, 100%);
		min-height: 58px;
	}

	.figma-logo-header .logo-svg {
		height: 58px;
	}

	.nav-search-toggle {
		grid-column: 3;
		grid-row: 1;
	}

	.figma-nav-links {
		grid-column: auto;
		grid-row: auto;
		display: flex;
		flex-direction: column;
		/* Column direction plus the inherited wrap spills overflowing links
		   into a second column beside the drawer. */
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		height: 100dvh;
		width: min(350px, 84vw);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 14px 24px calc(24px + env(safe-area-inset-bottom, 0px));
		border-right: 1px solid #dbe5eb;
		background: #ffffff;
		box-shadow: 18px 0 38px rgba(20, 45, 62, 0.18);
		z-index: 55;
		transform: translateX(-106%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		will-change: transform;
		transition: none;
	}

	.figma-nav.is-menu-open .figma-nav-links {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: transform 180ms ease, opacity 120ms ease;
	}

	/* Direct children only: this also matched the accordion links, whose own
	   rules are less specific and lost the colour and indent. */
	.figma-nav-links > a {
		display: block;
		flex: 0 0 auto;
		width: 100%;
		font-size: 1.05rem;
		font-weight: 600;
		letter-spacing: -0.005em;
		line-height: 1.3;
		color: #163746;
		padding: 15px 0;
		border-bottom: 1px solid #edf2f5;
	}

	.nav-dropdown-wrap {
		display: block;
		flex: 0 0 auto;
		width: 100%;
		border-bottom: 1px solid #edf2f5;
	}

	.nav-dropdown-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		font-size: 1.05rem;
		font-weight: 600;
		letter-spacing: -0.005em;
		line-height: 1.3;
		color: #163746;
		padding: 15px 0;
	}

	.nav-dropdown-chevron {
		width: 9px;
		height: 9px;
		opacity: 0.55;
	}

	/* Flat list rather than a floating panel: inside the drawer the card border
	   and shadow read as a second, competing surface. */
	.nav-dropdown {
		position: static;
		display: none;
		min-width: 0;
		max-width: none;
		max-height: none;
		overflow: visible;
		margin: 0;
		padding: 0 0 12px 2px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

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

	.nav-dropdown-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.nav-dropdown-item {
		display: block;
		padding: 9px 0 9px 16px;
		border-radius: 0;
		border-bottom: 1px solid #f2f6f8;
		font-size: 0.9rem;
		font-weight: 500;
		color: #7c93a3;
	}

	.nav-dropdown-item:hover,
	.nav-dropdown-item:focus-visible {
		background: transparent;
		color: #163746;
	}

	.nav-dropdown-grid a:last-child {
		border-bottom: 0;
	}

	.nav-dropdown-item--all {
		margin-bottom: 2px;
		padding: 2px 0 9px 16px;
		font-size: 0.68rem;
		font-weight: 700;
		letter-spacing: 0.11em;
		color: #a2b3bd;
	}

	/* The chevron already marks the section, and the rule collides with the
	   row dividers. */
	.figma-nav-links a.is-current,
	.nav-dropdown-wrap.is-current-section .nav-dropdown-trigger {
		text-decoration: none;
	}

	.figma-nav-links > *:last-child,
	.figma-nav-links > *:last-child a {
		border-bottom: 0;
	}

	/* Mobile search is a full-height drawer rather than a drop-down: the results
	   sit in the flow beneath the field, so the keyboard cannot cover them. */
	.figma-nav-actions {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(420px, 100%);
		max-width: 100%;
		height: var(--search-drawer-height, 100dvh);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px));
		background: #ffffff;
		border-left: 1px solid #dbe5eb;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 220ms ease, visibility 0s linear 220ms;
		z-index: 56;
		box-shadow: -18px 0 36px rgba(20, 45, 62, 0.18);
		animation: none;
	}

	.figma-nav.is-search-open .figma-nav-actions {
		transform: translateX(0);
		visibility: visible;
		transition: transform 220ms ease;
	}

	.nav-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex: 0 0 auto;
		width: 100%;
		padding-bottom: 4px;
		border-bottom: 1px solid #eef3f6;
	}

	.nav-drawer-title {
		margin: 0;
		font-size: 0.72rem;
		font-weight: 800;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: #93a6b3;
	}

	.nav-drawer-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 1px solid #dbe5eb;
		border-radius: 999px;
		background: #ffffff;
		color: #214e6d;
		font-size: 22px;
		line-height: 1;
		cursor: pointer;
	}

	.nav-search {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		width: 100%;
		min-height: 0;
	}

	.search-wrap {
		width: 100%;
		padding-bottom: 10px;
	}

	/* 16px minimum, below which iOS Safari zooms the page on focus. */
	.figma-nav-actions input {
		height: 30px;
		font-size: 16px;
	}

	.nav-search-results {
		position: static;
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
		max-height: none;
		min-height: 0;
		margin-top: 12px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-shadow: none;
	}

	.nav-match-link {
		min-height: 46px;
		width: 100%;
		padding: 0 18px;
		font-size: 1rem;
		font-weight: 700;
	}

	.nav-drawer-backdrop {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		top: var(--mobile-top-row-height);
		bottom: 0;
		border: 0;
		background: rgba(20, 45, 62, 0.24);
		opacity: 0;
		pointer-events: none;
		z-index: 50;
		transition: opacity 180ms ease;
	}

	.figma-nav.is-menu-open .nav-drawer-backdrop {
		top: 0;
		opacity: 1;
		pointer-events: auto;
	}

	.figma-nav.is-search-open .nav-drawer-backdrop {
		top: 0;
		opacity: 1;
		pointer-events: auto;
		z-index: 55;
	}

	.figma-nav.is-menu-open .nav-menu-toggle span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.figma-nav.is-menu-open .nav-menu-toggle span:nth-child(2) {
		opacity: 0;
	}

	.figma-nav.is-menu-open .nav-menu-toggle span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.nav-menu-toggle span {
		transition: transform 160ms ease, opacity 120ms ease;
	}

	.claims-row,
	.filter-row,
	.section-v4 {
		padding-left: 20px;
		padding-right: 20px;
		margin-left: 0;
		margin-right: 0;
	}

	.request-review {
		margin-left: 0;
		margin-right: 0;
	}

	.claims-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-top: -34px;
		border-radius: 12px;
		border: 0;
		box-shadow: none;
		overflow: hidden;
		position: relative;
		z-index: 3;
	}

	/* The gutter became padding on the grid, so the row's own rounded clip box no
	   longer meets the cells and the ends have to round themselves. */
	.claims-row article:first-child {
		border-radius: 12px 0 0 12px;
	}

	.claims-row article:last-child {
		border-radius: 0 12px 12px 0;
	}

	.filter-row {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		padding-top: 34px;
		padding-bottom: 30px;
		margin-top: 12px;
	}

	.filter-row .grow,
	.filter-row button {
		grid-column: span 2;
	}

	.category-grid-v4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.value-grid {
		grid-template-columns: 1fr;
	}

	/* The home page preview used to get its own drag-to-scroll table here, with
	   three frozen columns and a 980px floor. It now renders inside the same
	   .leaderboards-page wrapper as /leaderboards/ and shares that table's rules
	   at every width, so those overrides were deleted rather than tuned. */
	.compare-table-wrap.is-dragging {
		cursor: grabbing;
		user-select: none;
	}

	.hero-v4-overlay {
		width: 100%;
	}

	.hero-v4 h1 {
		font-size: clamp(2.9rem, 5.6vw, 4rem);
		line-height: 0.96;
		max-width: 620px;
	}

}

@media (min-width: 1037px) and (max-width: 1200px) {
	.leaderboard-block .compare-table-wrap {
		overflow-x: clip !important;
		overflow-y: visible !important;
		touch-action: auto !important;
		cursor: default;
	}

	.leaderboard-block .compare-table {
		width: 100% !important;
		min-width: 0 !important;
		border-collapse: collapse;
		table-layout: auto;
	}

	.leaderboard-block .compare-table th,
	.leaderboard-block .compare-table td {
		white-space: normal;
	}

	.leaderboard-block .compare-table th:not(:nth-child(-n+3)),
	.leaderboard-block .compare-table td:not(:nth-child(-n+3)) {
		min-width: 0;
	}

	.leaderboard-block .compare-table th:nth-child(1),
	.leaderboard-block .compare-table td:nth-child(1),
	.leaderboard-block .compare-table th:nth-child(2),
	.leaderboard-block .compare-table td:nth-child(2),
	.leaderboard-block .compare-table th:nth-child(3),
	.leaderboard-block .compare-table td:nth-child(3) {
		position: static;
		left: auto;
		z-index: auto;
		width: auto;
		min-width: 0;
		max-width: none;
	}

	.leaderboard-block .compare-table thead th:nth-child(1),
	.leaderboard-block .compare-table thead th:nth-child(2),
	.leaderboard-block .compare-table thead th:nth-child(3) {
		z-index: auto;
	}

	.leaderboard-block .compare-table th:nth-child(3),
	.leaderboard-block .compare-table td:nth-child(3) {
		box-shadow: none;
	}

	.leaderboard-block .compare-table .bike-name-truncate {
		max-width: none;
		text-overflow: clip;
		white-space: normal;
	}
}

@media (max-width: 1036px) {
	.page-leaderboards-body {
		overflow-x: clip;
	}

	.leaderboards-page,
	.leaderboards-page .leaderboards-shell,
	.leaderboard-compact {
		min-width: 0;
		max-width: 100%;
		overflow-x: clip;
	}

	/* Everything below is keyed to .leaderboard-compact rather than the page
	   wrapper, because the homepage top-five preview opts into the same mobile
	   treatment: four columns, edge-to-edge, sticky header. */
	.leaderboard-compact .compare-table-wrap {
		overflow: clip !important;
		touch-action: auto !important;
		cursor: default !important;
		border-radius: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		margin-left: calc(var(--shell-gutter, 24px) * -1);
		margin-right: calc(var(--shell-gutter, 24px) * -1);
		width: calc(100% + var(--shell-gutter, 24px) * 2);
		max-width: none !important;
	}

	.leaderboard-compact .compare-table {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		table-layout: fixed !important;
		border-collapse: collapse !important;
	}

	.leaderboard-compact .compare-table th:nth-child(1),
	.leaderboard-compact .compare-table th:nth-child(5),
	.leaderboard-compact .compare-table th:nth-child(6),
	.leaderboard-compact .compare-table th:nth-child(7),
	.leaderboard-compact .compare-table th:nth-child(9),
	.leaderboard-compact .compare-table tr:not([data-bike-detail]) > td:nth-child(1),
	.leaderboard-compact .compare-table tr:not([data-bike-detail]) > td:nth-child(5),
	.leaderboard-compact .compare-table tr:not([data-bike-detail]) > td:nth-child(6),
	.leaderboard-compact .compare-table tr:not([data-bike-detail]) > td:nth-child(7),
	.leaderboard-compact .compare-table tr:not([data-bike-detail]) > td:nth-child(9) {
		display: none !important;
	}

	.leaderboard-compact .compare-table th,
	.leaderboard-compact .compare-table td {
		position: static !important;
		left: auto !important;
		z-index: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		white-space: normal !important;
		box-shadow: none !important;
	}

	/* The reset above exists to undo the home page's three sticky *columns*, but
	   it also catches the header row, which still needs to stick vertically. */
	.leaderboard-compact .compare-table thead th {
		position: sticky !important;
		top: 0;
		z-index: 6 !important;
		box-shadow: 0 1px 0 rgba(22, 55, 70, 0.16) !important;
	}

	.leaderboard-compact .compare-table th:nth-child(2),
	.leaderboard-compact .compare-table td:nth-child(2) {
		width: 15% !important;
		text-align: center;
	}

	.leaderboard-compact .compare-table th:nth-child(3),
	.leaderboard-compact .compare-table td:nth-child(3) {
		width: 35% !important;
		text-align: left;
	}

	.leaderboard-compact .compare-table th:nth-child(4),
	.leaderboard-compact .compare-table td:nth-child(4) {
		width: 20% !important;
		text-align: center;
	}

	/* Status keeps its original 30%: the pill and the expand chevron share the
	   cell and are already tight against it. */
	.leaderboard-compact .compare-table th:nth-child(8),
	.leaderboard-compact .compare-table td:nth-child(8) {
		width: 30% !important;
		text-align: center;
	}

	.leaderboard-compact .compare-table thead th {
		padding: 0;
		white-space: normal !important;
	}

	.leaderboard-compact .compare-table thead th .sort-btn {
		display: flex;
		align-items: center;
		width: 100%;
		min-width: 0;
		padding: 10px 4px;
		gap: 2px;
		white-space: normal;
		line-height: 1.12;
		font-size: 0.62rem;
		letter-spacing: 0.02em;
	}

	/* Wrap between words only: break-word split "RANK" into "RAN" / "K". */
	.leaderboard-compact .compare-table thead th .sort-btn > span:first-child {
		min-width: 0;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}

	.leaderboard-compact .compare-table thead th .sort-indicator {
		flex: 0 0 auto;
		margin-left: auto;
	}

	.leaderboard-compact .compare-table thead th:nth-child(2) .sort-btn {
		justify-content: flex-start;
		padding-left: 6px;
		padding-right: 6px;
	}

	.leaderboard-compact .compare-table thead th:nth-child(8) .sort-btn {
		justify-content: flex-end;
		padding-right: 6px;
	}

	.leaderboard-compact .compare-table thead th:nth-child(2) .sort-indicator,
	.leaderboard-compact .compare-table thead th:nth-child(3) .sort-indicator {
		margin-left: 2px;
	}

	/* Safari tints its full-width toolbar from the colour under it, so a bar only
	   as wide as the board leaves a pale sliver down each side where the two
	   meet. The bar goes edge to edge and the cloned table keeps the board's own
	   offset, which is how the full leaderboard already looks. */
	.leaderboard-float-head {
		left: 0 !important;
		width: 100% !important;
	}

	.leaderboard-float-head > * {
		margin-left: var(--float-head-left, 0px) !important;
		width: var(--float-head-width, 100%) !important;
	}

	/* !important on these two because the home page's own 1200px rules clamp the
	   name to 11ch and hide the brand at a higher specificity than this hook. */
	.leaderboard-compact .compare-table .bike-name-truncate,
	.leaderboard-compact .compare-table .bike-brand {
		display: block !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap !important;
	}

	.leaderboard-compact .compare-table .bike-name-truncate {
		max-width: 100% !important;
	}

	.leaderboard-compact .compare-table .bike-brand {
		font-size: 0.68rem;
	}

	.leaderboard-compact .compare-table thead th {
		white-space: normal !important;
	}

	.leaderboard-compact .compare-table thead th .sort-btn {
		width: 100%;
		white-space: normal;
	}

	.leaderboard-compact .compare-table thead th .sort-btn > span:first-child {
		min-width: 0;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}

	.leaderboard-compact .compare-table td {
		padding: 12px 8px;
	}

	/* The date sits top-right of the heading on desktop; at this width there is
	   no room beside the h2, so it drops underneath it. */
	.leaderboard-compact .section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.leaderboard-compact .leaderboard-status-cell {
		overflow: hidden;
	}

	.leaderboard-compact .leaderboard-status-wrap {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 4px;
		min-width: 0;
	}

	.leaderboard-compact .leaderboard-status-cell .status-pill {
		padding: 3px 6px;
		font-size: 0.54rem;
		letter-spacing: 0.04em;
		gap: 4px;
		min-width: 0;
		flex: 0 1 auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.leaderboard-compact .leaderboard-status-cell .status-pill img {
		flex: 0 0 auto;
		width: 10px;
		height: 10px;
	}

	.leaderboards-page .row-expand-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		flex-shrink: 0;
	}

	.leaderboards-page .row-chevron {
		display: block;
		width: 7px;
		height: 7px;
		border-right: 1.5px solid #60717c;
		border-bottom: 1.5px solid #60717c;
		transform: rotate(45deg) translateY(-1px);
		transform-origin: center;
	}

	.leaderboards-page .leaderboard-row.is-expanded .row-chevron,
	.leaderboards-page .row-expand-toggle[aria-expanded='true'] .row-chevron {
		transform: rotate(-135deg) translateY(-1px);
	}

	.leaderboards-page .leaderboard-row {
		cursor: pointer;
	}

	.leaderboards-page .leaderboard-detail[hidden] {
		display: none !important;
	}

	.leaderboards-page .leaderboard-detail:not([hidden]) {
		display: table-row !important;
	}

	.leaderboards-page .leaderboard-detail td {
		display: table-cell !important;
		padding: 0 !important;
		overflow: hidden;
	}
}

@keyframes navPanelIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes navSearchDown {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.leaderboards-page .detail-body {
		transition: none;
	}

	.figma-nav-links,
	.nav-drawer-backdrop,
	.nav-menu-toggle span {
		transition: none;
	}

	.category-card {
		transition: none;
		animation: none;
	}

	.category-card:hover,
	.category-card:focus-within {
		transform: none;
	}
}

@media (max-width: 760px) {
	.site-header-inner {
		flex-direction: column;
		align-items: flex-start;
		padding: 10px 0;
	}

	.figma-footer-top,
	.figma-footer-links {
		grid-template-columns: 1fr;
	}

	.hero-v4 {
		min-height: 0;
	}

	.hero-v4-overlay {
		padding: 50px 20px 44px;
		width: 100%;
		max-width: 100%;
	}

	.hero-v4 h1 {
		font-size: clamp(1.95rem, 8.4vw, 2.65rem);
		line-height: 0.92;
		max-width: 100%;
	}

	.hero-v4 p {
		max-width: 100%;
		font-size: 0.98rem;
	}

	.hero-actions {
		gap: 10px;
	}

	.hero-actions a {
		min-height: 42px;
		padding: 10px 15px;
		font-size: 0.74rem;
	}

	.figma-nav-actions {
		gap: 10px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.nav-search,
	.search-wrap {
		width: 100%;
	}

	.nav-match-link {
		min-height: 46px;
		width: 100%;
		padding: 0 18px;
		font-size: 0.92rem;
	}

	.claims-row article {
		padding: 18px 10px;
		font-size: 0.8rem;
	}

	.claims-row {
		grid-template-columns: 1fr;
		margin-top: -24px;
		border-radius: 12px;
		border: 0;
		box-shadow: none;
		overflow: hidden;
		position: relative;
		z-index: 3;
	}

	.claims-row article:first-child {
		border-radius: 12px 12px 0 0;
	}

	.claims-row article:last-child {
		border-radius: 0 0 12px 12px;
	}

	.claims-row article + article {
		box-shadow: none;
		border-top: 1px solid rgba(255, 255, 255, 0.22);
	}

	.filter-row {
		grid-template-columns: 1fr;
		gap: 12px;
		padding-top: 26px;
		padding-bottom: 24px;
		margin-top: 12px;
	}

	.filter-row .grow,
	.filter-row button {
		grid-column: auto;
	}

	.filter-row label,
	.filter-row select,
	.filter-row input,
	.filter-row button {
		width: 100%;
		min-width: 0;
	}

	.hero-stats {
		max-width: none;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		margin-top: 28px;
	}

	.hero-stats strong {
		font-size: 1.76rem;
	}

	.hero-stats span {
		font-size: 0.68rem;
		letter-spacing: 0.04em;
	}

	.category-grid-v4 {
		grid-template-columns: 1fr;
	}

	.request-review-body {
		padding: 30px var(--shell-gutter);
		min-height: 260px;
	}

	.request-review-body h3 {
		font-size: clamp(2.25rem, 10vw, 3.2rem);
	}

	.figma-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.figma-footer-legal {
		flex-wrap: wrap;
		gap: 10px 14px;
	}

	.component-item {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.detail-layout,
	.spec-grid,
	.featured-grid,
	.collection-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Bike detail page - hero
   Figma: "Desktop - Bike Detail - Rating - v6" (node 123:6128)
   ========================================================================== */

.page-ebike-model .bike-breadcrumb {
	padding: 18px 0 4px;
	font-size: 0.86rem;
	color: #5f7887;
}

.page-ebike-model .bike-breadcrumb a {
	text-decoration: none;
	font-weight: 700;
}

.page-ebike-model .bike-breadcrumb a:hover,
.page-ebike-model .bike-breadcrumb a:focus-visible {
	text-decoration: underline;
}

.page-ebike-model .bike-hero {
	padding-top: 46px;
}

/* The breadcrumb already supplies the top gap. */
.page-ebike-model .bike-breadcrumb + .bike-hero {
	padding-top: 24px;
}

.page-ebike-model .bike-hero-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--line);
}

.page-ebike-model .bike-hero-brand {
	display: inline-block;
	margin-bottom: 8px;
}

.page-ebike-model .bike-hero-brand img {
	display: block;
	width: 98px;
	height: 29px;
	object-fit: contain;
}

.page-ebike-model .bike-hero-brand--text {
	font-size: 1rem;
	font-weight: 700;
	color: var(--muted);
	text-decoration: none;
}

.page-ebike-model .bike-hero-title {
	margin: 0;
	font-size: 67.21px;
	line-height: 79.386px;
	font-weight: 800;
	letter-spacing: -2.2052px;
	color: #2b2f36;
}

.page-ebike-model .bike-hero-summary {
	margin: 8px 0 0;
	max-width: 560px;
	font-size: 16px;
	line-height: 23px;
	font-weight: 400;
	color: #4a5e6c;
}

.page-ebike-model .bike-hero-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	padding-bottom: 6px;
}

.page-ebike-model .bike-hero-compare,
.page-ebike-model .bike-hero-inventory {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	padding: 0 14px;
	border-radius: 100px;
	font-family: inherit;
	font-size: 12px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.page-ebike-model .bike-hero-compare {
	background: #fff;
	border: 1px solid #d4dbe2;
	color: #7f8f99;
	gap: 4px;
}

.page-ebike-model .bike-hero-compare-plus {
	color: #8dc63f;
	font-weight: 800;
}

.page-ebike-model .bike-hero-inventory {
	background: var(--green);
	border: 1px solid var(--green);
	color: #fff;
}

.page-ebike-model .bike-hero-compare:hover,
.page-ebike-model .bike-hero-compare:focus-visible {
	border-color: rgba(46, 58, 68, 0.38);
	color: #566570;
}

.page-ebike-model .bike-hero-inventory:hover,
.page-ebike-model .bike-hero-inventory:focus-visible {
	background: var(--green-dark);
	border-color: var(--green-dark);
}

.page-ebike-model .bike-hero-body {
	display: grid;
	grid-template-columns: 806fr 401fr;
	gap: 32px;
	align-items: start;
	margin-top: 82px;
}

/* ----------------------------- Gallery ---------------------------------- */

.page-ebike-model .bike-gallery {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(174, 176, 179, 0.3);
	border-radius: 24px;
	box-shadow: 0 8px 26px -5px rgba(43, 47, 54, 0.1);
	overflow: hidden;
}

.page-ebike-model .bike-gallery-rail {
	padding: 12px 20px 16px;
	border-top: 1px solid rgba(174, 176, 179, 0.3);
}

.page-ebike-model .bike-gallery-rail.is-hidden {
	display: none;
}

.page-ebike-model .bike-thumbs-swiper {
	width: 100%;
}

.page-ebike-model .bike-thumbs-swiper .swiper-slide {
	width: 82px;
	cursor: pointer;
}

.page-ebike-model .bike-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Fixed box so portrait, landscape and square shots all present the same
	   footprint; the image is centred inside it rather than setting its height. */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	padding: 3px;
	background: #fff;
	border: 1px solid rgba(174, 176, 179, 0.35);
	border-radius: 10px;
	cursor: pointer;
}

.page-ebike-model .bike-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	object-fit: contain;
}

.page-ebike-model .swiper-slide-thumb-active .bike-thumb {
	border-color: var(--green);
}

.page-ebike-model .bike-gallery-stage {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.page-ebike-model .bike-gallery-controls {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 16px 24px 10px;
	border-bottom: 1px solid rgba(174, 176, 179, 0.3);
}

.page-ebike-model .bike-frame-tabs {
	display: flex;
	gap: 10px;
}

.page-ebike-model .bike-swatches {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.page-ebike-model .bike-swatches[hidden] {
	display: none;
}

.page-ebike-model .bike-swatch-picker {
	position: relative;
	margin-left: auto;
}

.page-ebike-model .bike-swatch-picker[hidden] {
	display: none;
}

.page-ebike-model .bike-swatch-picker-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 28px 0 8px;
	border: 1px solid #cfd7de;
	border-radius: 8px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23566570' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E") no-repeat right 10px center/10px 7px;
	font-family: inherit;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: #2f3d49;
	cursor: pointer;
}

.page-ebike-model .bike-swatch-picker-label {
	white-space: nowrap;
}

.page-ebike-model .bike-swatch-picker-list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 5;
	min-width: 100%;
	max-height: 240px;
	margin: 0;
	padding: 4px;
	list-style: none;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #cfd7de;
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba(43, 47, 54, 0.16);
}

.page-ebike-model .bike-swatch-picker-list[hidden] {
	display: none;
}

.page-ebike-model .bike-swatch-picker-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px 6px 6px;
	border-radius: 6px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: #2f3d49;
	white-space: nowrap;
	cursor: pointer;
}

.page-ebike-model .bike-swatch-picker-option:hover,
.page-ebike-model .bike-swatch-picker-option:focus-visible {
	background: #eef3f7;
	outline: none;
}

.page-ebike-model .bike-swatch-picker-option.is-selected {
	background: #e4edf4;
}

.page-ebike-model .bike-swatch-picker .bike-swatch-dot {
	flex: none;
	width: 18px;
	height: 18px;
}

.page-ebike-model .bike-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 2px solid transparent;
	border-radius: 100px;
	cursor: pointer;
}

/* Beats the display above, which would otherwise defeat the hidden attribute. */
.page-ebike-model .bike-swatch[hidden] {
	display: none;
}

.page-ebike-model .bike-swatch.is-active {
	border-color: #1f2f3c;
	background: #fff;
}

.page-ebike-model .bike-swatch-dot {
	display: block;
	width: 22px;
	height: 22px;
	background: #7ca7c5;
	border-radius: 100px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.page-ebike-model .bike-frame-tab {
	height: 24px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #cfd7de;
	border-radius: 999px;
	font-family: inherit;
	font-size: 12px;
	line-height: 14px;
	font-weight: 600;
	color: #85929c;
	opacity: 1;
	cursor: pointer;
}

.page-ebike-model .bike-frame-tab.is-active {
	background: #6e91aa;
	border-color: #6e91aa;
	color: #fff;
}

.page-ebike-model .bike-gallery-stage-image {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	padding: 24px 30px;
	min-height: 0;
	position: relative;
}

.page-ebike-model .bike-main-swiper {
	width: 100%;
	max-width: 599px;
}

.page-ebike-model .bike-main-swiper .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 432px;
}

.page-ebike-model .bike-gallery-stage-image img {
	max-width: 100%;
	max-height: 432px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.page-ebike-model .bike-gallery-zoom {
	position: absolute;
	right: 16px;
	bottom: 14px;
	width: 46px;
	height: 46px;
	border: 1px solid #cfd7de;
	border-radius: 999px;
	background: #e9edf1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
}

.page-ebike-model .bike-gallery-zoom svg {
	width: 22px;
	height: 22px;
	fill: #243643;
}

.page-ebike-model .bike-gallery-zoom:disabled {
	opacity: 0.45;
	cursor: default;
}

.page-ebike-model .bike-gallery-modal[hidden] {
	display: none;
}

.page-ebike-model .bike-gallery-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.page-ebike-model .bike-gallery-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(7, 15, 21, 0.76);
}

.page-ebike-model .bike-gallery-modal-dialog {
	position: relative;
	z-index: 1;
	width: min(1560px, 96vw);
	max-height: 96vh;
	padding: 12px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-ebike-model .bike-gallery-modal-dialog img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
}

.page-ebike-model .bike-modal-swiper {
	width: 100%;
}

.page-ebike-model .bike-modal-swiper .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Reserves the frame so a portrait shot does not shrink the dialog. */
	height: min(880px, calc(96vh - 72px));
}

.page-ebike-model .bike-modal-swiper .swiper-slide img {
	max-height: 100%;
}

.page-ebike-model .bike-gallery-modal-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	border: 1px solid #dbe4ea;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: #213445;
	box-shadow: 0 6px 18px rgba(9, 20, 28, 0.18);
	cursor: pointer;
}

.page-ebike-model .bike-gallery-modal-nav svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.page-ebike-model .bike-gallery-modal-nav.is-prev {
	left: 12px;
}

.page-ebike-model .bike-gallery-modal-nav.is-next {
	right: 12px;
}

.page-ebike-model .bike-gallery-modal-nav.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.page-ebike-model .bike-gallery-modal-pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 2;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
}

.page-ebike-model .bike-gallery-modal-pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #b9c7d1;
	opacity: 1;
	cursor: pointer;
}

.page-ebike-model .bike-gallery-modal-pagination .swiper-pagination-bullet-active {
	background: var(--brand, #17a34a);
}

.page-ebike-model .bike-gallery-modal.is-single .bike-gallery-modal-nav,
.page-ebike-model .bike-gallery-modal.is-single .bike-gallery-modal-pagination {
	display: none;
}

@media (max-width: 700px) {
	.page-ebike-model .bike-gallery-modal-nav {
		width: 36px;
		height: 36px;
	}

	.page-ebike-model .bike-gallery-modal-nav.is-prev {
		left: 4px;
	}

	.page-ebike-model .bike-gallery-modal-nav.is-next {
		right: 4px;
	}
}

.page-ebike-model .bike-main-swiper .swiper-slide img {
	cursor: zoom-in;
}

.page-ebike-model .bike-gallery-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	/* Above the nav arrows and dots, which share the dialog's stacking context. */
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 999px;
	background: #213445;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	box-shadow: 0 4px 14px rgba(9, 20, 28, 0.35);
	cursor: pointer;
}

.page-ebike-model .bike-gallery-modal-close:hover,
.page-ebike-model .bike-gallery-modal-close:focus-visible {
	background: #0f1f2b;
}

.page-ebike-model .bike-gallery-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 360px;
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
}

/* ------------------------- Ranking history ------------------------------- */

/* Deliberately not scoped to .page-ebike-model: the same panel is meant to drop
   into category pages and the leaderboard detail rows. */
.rank-history {
	background: #fff;
	border-radius: 12px;
	border: 1px solid rgba(174, 176, 179, 0.3);
	box-shadow: 0 8px 24px rgba(33, 78, 109, 0.05);
	padding: 18px 20px 20px;
}

.rank-history-head {
	margin-bottom: 14px;
}

.rank-history-title {
	margin: 0;
	font-size: 15px;
	line-height: 20px;
	font-weight: 800;
	color: #1f4259;
}

.rank-history-sub {
	margin: 2px 0 0;
	font-size: 11px;
	line-height: 15px;
	font-weight: 500;
	color: #8b9aa5;
}

.rank-history-current {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 10px;
}

.rank-history-current-value {
	font-size: 34px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: #214e6d;
}

.rank-history-current-label {
	font-size: 11px;
	line-height: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8b9aa5;
}

.rank-history-chart {
	display: block;
	width: 100%;
	height: 72px;
	overflow: visible;
}

.rank-history-area {
	fill: rgba(33, 78, 109, 0.08);
	stroke: none;
}

.rank-history-line {
	fill: none;
	stroke: #214e6d;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* preserveAspectRatio="none" stretches the viewBox, which would smear the
	   stroke horizontally without this. */
	vector-effect: non-scaling-stroke;
}

.rank-history-dot {
	fill: #8dc63f;
	stroke: #fff;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.rank-history-axis {
	display: flex;
	justify-content: space-between;
	margin: 6px 0 0;
	font-size: 10px;
	line-height: 14px;
	font-weight: 600;
	color: #a6b3bc;
}

.rank-history-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 12px;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid #eef2f5;
}

.rank-history-stat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.rank-history-stat dt {
	font-size: 11px;
	line-height: 15px;
	font-weight: 600;
	color: #7b8b93;
}

.rank-history-move {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	font-weight: 800;
}

.rank-history-move.is-up {
	color: #4d7a1e;
}

.rank-history-move.is-down {
	color: #b4453a;
}

.rank-history-move.is-flat,
.rank-history-move.is-none {
	color: #a6b3bc;
	font-weight: 600;
}

.rank-history-move.is-best {
	color: #214e6d;
}

.rank-history-note {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 16px;
	color: #8b9aa5;
}

@media (max-width: 900px) {
	.rank-history-stats {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------- Ratings rail -------------------------------- */

.page-ebike-model .bike-score-rail {
	display: flex;
	flex-direction: column;
	gap: 19px;
}

.page-ebike-model .bike-score-box {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(33, 78, 109, 0.05);
	border: 1px solid rgba(174, 176, 179, 0.3);
	overflow: hidden;
}

.page-ebike-model .bike-score-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	background: #fff;
}

.page-ebike-model .bike-score-head-top {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px 0;
}

.page-ebike-model .bike-score-badge {
	padding: 0;
	background: transparent;
	border-radius: 0;
	height: auto;
	min-width: 0;
	padding-inline: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 15px;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #214e6d;
}

.page-ebike-model .bike-score-compare {
	display: none;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 10px;
	line-height: 16.5px;
	font-weight: 700;
	color: #e2e6ea;
	letter-spacing: 0.3px;
	cursor: pointer;
}

.page-ebike-model .bike-score-compare img {
	display: block;
	width: 8.167px;
	height: 8.167px;
}

.page-ebike-model .bike-score-head-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 6px 20px 20px;
}

.page-ebike-model .bike-score-figure {
	flex: none;
	text-align: center;
}

/* Score colour scale: five equal 20% bands, red (worst) to green (best).
   --score-color   : fill for the ring arc and bar, readable on white and on the
                     dark blue panel.
   --score-track   : unfilled remainder of the ring on white.
   --score-text    : darker variant for the large numeral on white. */
.ebr-score-band-1 {
	--score-color: #e2574c;
	--score-track: #f4dcd9;
	--score-text: #a3352c;
}

.ebr-score-band-2 {
	--score-color: #ef8b3c;
	--score-track: #f9e5d2;
	--score-text: #a85d1c;
}

.ebr-score-band-3 {
	--score-color: #f0c033;
	--score-track: #faeecd;
	--score-text: #8a6d10;
}

.ebr-score-band-4 {
	--score-color: #b9d148;
	--score-track: #e9eed2;
	--score-text: #5f7220;
}

.ebr-score-band-5 {
	--score-color: #8dc63f;
	--score-track: #dce7d4;
	--score-text: #3f5e42;
}

.page-ebike-model .bike-score-circle {
	width: 108px;
	height: 108px;
	border-radius: 50%;
	position: relative;
	--score-progress: 0%;
	--score-ring-thickness: 8px;
	background: conic-gradient(var(--score-color, #8dc63f) 0 var(--score-progress), var(--score-track, #dce7d4) var(--score-progress) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0 auto 7px;
}

.page-ebike-model .bike-score-circle::before {
	content: "";
	position: absolute;
	inset: var(--score-ring-thickness);
	border-radius: 50%;
	background: #fff;
}

.page-ebike-model .bike-score-circle-value {
	position: relative;
	z-index: 1;
	font-size: 52px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.8px;
	color: var(--score-text, #3f5e42);
}

.page-ebike-model .bike-score-value {
	margin: 0;
	font-size: 36px;
	line-height: 40px;
	font-weight: 900;
	color: #f2efec;
	white-space: nowrap;
}

.page-ebike-model .bike-score-caption {
	margin: 0;
	font-size: 11px;
	line-height: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: #b0bcc6;
	text-align: center;
}

.page-ebike-model .bike-score-verdict {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

.page-ebike-model .bike-score-tier {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	color: #2e3a44;
}

.page-ebike-model .bike-score-tier-desc {
	margin: 6px 0 0;
	font-size: 11px;
	line-height: 16px;
	font-weight: 500;
	color: #7e94a3;
}

.page-ebike-model .bike-score-rank {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 10px 12px;
	background: var(--green);
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: #fff;
}

/* Divider between banner segments. */
.page-ebike-model .bike-score-rank-sep {
	flex: 0 0 auto;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.65);
}

.page-ebike-model .bike-score-rank img {
	display: block;
	width: 16px;
	height: 16px;
}

/* The banner becomes a button when the model ranks in more than one category.
   Resetting the UA button styling here keeps both variants pixel-identical. */
.page-ebike-model .bike-score-rank--toggle {
	width: 100%;
	border: 0;
	font-family: inherit;
	letter-spacing: 0.9px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.page-ebike-model .bike-score-rank--toggle:hover {
	background: #7ab32f;
}

.page-ebike-model .bike-score-rank-chevron {
	width: 6px;
	height: 6px;
	margin-left: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 150ms ease;
}

.page-ebike-model .bike-score-rank--toggle[aria-expanded="true"] .bike-score-rank-chevron {
	transform: translateY(1px) rotate(225deg);
}

.page-ebike-model .bike-score-rank-list {
	list-style: none;
	margin: 0;
	padding: 2px 14px 10px;
	background: #7ab32f;
	color: #fff;
}

.page-ebike-model .bike-score-rank-list[hidden] {
	display: none;
}

.page-ebike-model .bike-score-rank-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	font-size: 12px;
	line-height: 16px;
}

.page-ebike-model .bike-score-rank-item:first-child {
	border-top: 0;
}

.page-ebike-model .bike-score-rank-cat {
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
}

.page-ebike-model .bike-score-rank-cat:hover,
.page-ebike-model .bike-score-rank-cat:focus {
	text-decoration: underline;
}

.page-ebike-model .bike-score-rank-pos {
	white-space: nowrap;
	font-size: 13px;
	font-weight: 800;
}

.page-ebike-model .bike-score-rank-pos span {
	font-size: 11px;
	font-weight: 600;
	opacity: 0.75;
}

.page-ebike-model .bike-score-breakdown {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 18px 16px 16px;
	border-top: 0;
	background: #285675;
	border-radius: 10px;
}

.page-ebike-model .bike-score-breakdown-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
}

.page-ebike-model .bike-score-breakdown-title {
	margin: 0;
	font-size: 28px;
	line-height: 30px;
	font-weight: 800;
	color: #fff;
}

.page-ebike-model .bike-score-breakdown-sub {
	margin: 0;
	font-size: 10px;
	line-height: 16.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.62);
}

.page-ebike-model .bike-score-total {
	display: flex;
	flex: none;
	flex-direction: row;
	align-items: baseline;
	gap: 5px;
	padding-left: 12px;
	border-left: 0;
}

.page-ebike-model .bike-score-total-value {
	font-size: 48px;
	line-height: 1;
	font-weight: 900;
	color: #fff;
}

.page-ebike-model .bike-score-total-max {
	font-size: 18px;
	line-height: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.45);
}

.page-ebike-model .bike-score-total-sep {
	font-size: 18px;
	line-height: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.45);
}

.page-ebike-model .bike-score-bars {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 8px;
}

.page-ebike-model .bike-score-bar {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.page-ebike-model .bike-score-bar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	line-height: 16.5px;
	font-weight: 700;
	color: #f6fafc;
}

.page-ebike-model .bike-score-bar-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.page-ebike-model .bike-score-bar-label img {
	display: none;
	flex: none;
}

.page-ebike-model .bike-score-bar-value {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
}

.page-ebike-model .bike-score-bar-points {
	color: var(--score-color, #8dc63f);
	font-weight: 800;
}

.page-ebike-model .bike-score-bar-max {
	color: rgba(255, 255, 255, 0.7);
}

.page-ebike-model .bike-score-track {
	height: 4px;
	border-radius: 9999px;
	background: rgba(224, 237, 246, 0.45);
	overflow: hidden;
}

.page-ebike-model .bike-score-fill {
	display: block;
	height: 100%;
	border-radius: 9999px;
	background: var(--score-color, #8dc63f);
}

.page-ebike-model .bike-compare-ad {
	display: none;
	flex-direction: column;
	align-items: center;
	padding: 11px 32px 24px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(33, 78, 109, 0.05);
}

.page-ebike-model .bike-compare-ad img {
	display: block;
	width: 30px;
	height: 24px;
	margin-bottom: 16px;
}

.page-ebike-model .bike-compare-ad-title {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	font-weight: 800;
	letter-spacing: 0.14px;
	text-align: center;
	color: var(--blue-dark);
}

.page-ebike-model .bike-compare-ad-link {
	margin-top: 8px;
	padding-bottom: 6px;
	border-bottom: 2px solid #b8f568;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.14px;
	text-decoration: none;
	color: var(--green-dark);
}

.page-ebike-model .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.page-ebike-model .bike-hero :is(button, a):focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

@media (max-width: 1100px) {
	.page-ebike-model .bike-hero-body {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 40px;
	}

	.page-ebike-model .bike-gallery {
		min-height: 0;
	}
}

@media (max-width: 760px) {
	.page-ebike-model .bike-hero-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.page-ebike-model .bike-hero-title {
		font-size: 40px;
		line-height: 46px;
		letter-spacing: -1.2px;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.page-ebike-model .bike-hero-meta-strip {
		width: 100%;
		flex: 1 1 auto;
	}

	.page-ebike-model .bike-gallery-rail {
		padding: 10px 14px 14px;
	}

	.page-ebike-model .bike-thumbs-swiper .swiper-slide {
		width: 74px;
	}

	.page-ebike-model .bike-gallery-controls {
		flex-wrap: wrap;
		padding: 18px 20px 12px;
	}

	.page-ebike-model .bike-main-swiper .swiper-slide {
		height: 260px;
	}
}

/* ==========================================================================
   Bike detail page - top-down section pass (Figma alignment)
   ========================================================================== */

.page-ebike-model .bike-hero-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0 36px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}

.page-ebike-model .bike-hero-headline {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	flex: 1 1 100%;
	min-width: 0;
}

.page-ebike-model .bike-hero-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	flex: 0 0 auto;
	margin-top: 12px;
}

.page-ebike-model .bike-hero-tag {
	display: inline-flex;
	align-items: center;
	height: 18px;
	padding: 0 8px;
	border: 1px solid rgba(33, 78, 109, 0.35);
	border-radius: 999px;
	font-size: 9px;
	line-height: 1;
	font-weight: 500;
	color: var(--blue);
	text-transform: capitalize;
}

.page-ebike-model .bike-hero-brand {
	display: inline-flex;
	margin-bottom: 0;
}

.page-ebike-model .bike-hero-brand img {
	width: 64px;
	height: 20px;
}

.page-ebike-model .bike-hero-brand--text {
	display: inline-block;
	margin-bottom: 4px;
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #18a1dc;
}

.page-ebike-model .bike-hero-title {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 64px;
	line-height: 64px;
	font-weight: 800;
	letter-spacing: -2.56px;
	color: #214e6d;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.page-ebike-model .bike-hero-brand-line {
	/* Previous style (kept for quick rollback)
	margin: 4px 0 0;
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13px;
	line-height: 16px;
	font-weight: 500;
	color: #5f7482;
	*/
	margin: 6px 0 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: rgb(74, 94, 108);
}

.page-ebike-model .bike-hero-brand-link {
	/* Previous style (kept for quick rollback)
	color: #2d5f84;
	text-decoration: underline;
	text-underline-offset: 2px;
	*/
	color: rgb(23, 60, 84);
	font-weight: 700;
	text-decoration: none;
}

.page-ebike-model .bike-hero-brand-sep {
	/* Previous style (kept for quick rollback)
	color: #9caeb9;
	font-weight: 600;
	*/
	color: rgb(176, 190, 199);
}

.page-ebike-model .bike-hero-inventory-link {
	/* Previous style (kept for quick rollback)
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 11px;
	border-radius: 999px;
	background: var(--green);
	color: #ffffff;
	font-size: 11px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(83, 153, 38, 0.22);
	*/
	color: rgb(95, 153, 31);
	font-weight: 700;
	text-decoration: none;
}

.page-ebike-model .bike-hero-inventory-link:hover,
.page-ebike-model .bike-hero-inventory-link:focus-visible {
	/* Previous style (kept for quick rollback)
	background: var(--green-dark);
	color: #ffffff;
	*/
	color: rgb(95, 153, 31);
	text-decoration: none;
}

.page-ebike-model .bike-hero-discontinued {
	color: rgb(122, 137, 148);
	font-size: 13px;
	/*font-style: italic;*/
	font-weight: 500;
}

.page-ebike-model .bike-hero-meta-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	gap: 22px;
	align-items: center;
	margin-top: 0;
	/* Held against the right edge rather than by space-between, which would let
	   the strip slide left on bikes that have no category tags beside it. */
	margin-left: auto;
	padding: 0;
	border-bottom: 0;
	flex: 0 0 min(760px, 64%);
}

.page-ebike-model .bike-hero-meta-item {
	margin: 0;
	min-width: 0;
}

.page-ebike-model .bike-hero-meta-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-size: 9px;
	line-height: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--green-dark);
}

.page-ebike-model .bike-hero-meta-label img {
	display: block;
	width: 10px;
	height: 10px;
}

.page-ebike-model .bike-hero-meta-value {
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 20px;
	font-weight: 800;
	letter-spacing: -0.2px;
	color: var(--ink);
}

.page-ebike-model .bike-hero-meta-strip .bike-hero-compare {
	justify-self: end;
	height: 34px;
	padding: 0 16px;
	border-radius: 8px;
	border: 1px solid #8dc63f;
	background: #fff;
	color: #4f7d2e;
	font-size: 14px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0;
	box-shadow: none;
}

.page-ebike-model .bike-hero-meta-strip .bike-hero-compare-plus {
	font-weight: 800;
	color: #8dc63f;
}

/* Added state is a filled pill rather than an outline, so the toggle reads as
   "on" at a glance instead of relying on the checkmark alone. */
.page-ebike-model .bike-hero-compare.is-added {
	background: #8dc63f;
	border-color: #8dc63f;
	color: #fff;
}

.page-ebike-model .bike-hero-compare.is-added .bike-hero-compare-plus,
.page-ebike-model .bike-hero-meta-strip .bike-hero-compare.is-added .bike-hero-compare-plus {
	color: #fff;
}

.page-ebike-model .bike-hero-compare.is-added:hover,
.page-ebike-model .bike-hero-compare.is-added:focus-visible {
	background: #7abf33;
	border-color: #7abf33;
	color: #fff;
}

.page-ebike-model .bike-hero-compare[disabled] {
	background: #f1f4f6;
	border-color: #dbe4ea;
	color: #9aabb6;
	cursor: not-allowed;
	box-shadow: none;
}

.page-ebike-model .bike-hero-compare[disabled] .bike-hero-compare-plus,
.page-ebike-model .bike-hero-meta-strip .bike-hero-compare[disabled] .bike-hero-compare-plus {
	color: #9aabb6;
}

/* Card checkboxes share the ceiling, so a full basket has to be visible there
   too rather than silently refusing the click. */
.bike-similar-compare.is-added {
	color: var(--green-dark);
	font-weight: 700;
}

.bike-similar-compare:has(.compare-check[disabled]) {
	color: #9aabb6;
	cursor: not-allowed;
}

.bike-similar-compare .compare-check[disabled] {
	cursor: not-allowed;
}

.page-ebike-model .bike-hero-body {
	margin-top: 24px;
}

.page-ebike-model .bike-section {
	padding: 56px 0 0;
}

.page-ebike-model .bike-section-eyebrow {
	margin: 0;
	font-size: 9px;
	line-height: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--green-dark);
}

.page-ebike-model .bike-tech .bike-section-eyebrow,
.page-ebike-model .bike-insights .bike-section-eyebrow,
.page-ebike-model .bike-key-specs .bike-section-eyebrow,
.page-ebike-model .bike-analysis .bike-section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--blue);
}

.page-ebike-model .bike-tech .bike-section-eyebrow::before,
.page-ebike-model .bike-insights .bike-section-eyebrow::before,
.page-ebike-model .bike-key-specs .bike-section-eyebrow::before,
.page-ebike-model .bike-analysis .bike-section-eyebrow::before {
	content: "";
	width: 3px;
	height: 10px;
	border-radius: 999px;
	background: var(--green);
}

.page-ebike-model .bike-section-title {
	margin: 8px 0 0;
	font-size: 46px;
	line-height: 52px;
	font-weight: 800;
	letter-spacing: -0.9px;
	color: var(--blue);
}

.page-ebike-model .bike-section-title span {
	color: var(--green-dark);
}

.page-ebike-model .bike-tech-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 26px;
}

.page-ebike-model .bike-tech-card {
	padding: 18px 18px 16px;
	background: #fff;
	border: 1px solid #e1e7ea;
	border-radius: 16px;
	box-shadow: 0 1px 0 rgba(33, 78, 109, 0.04);
	min-height: 104px;
}

.page-ebike-model .bike-tech-card--safety {
	grid-column: span 2;
}

.page-ebike-model .bike-tech-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.page-ebike-model .bike-tech-card--safety .bike-tech-head {
	justify-content: flex-start;
	margin-bottom: 12px;
}

.page-ebike-model .bike-tech-label {
	margin: 0;
	font-size: 9px;
	line-height: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #6c777d;
	text-align: right;
}

.page-ebike-model .bike-tech-card--safety .bike-tech-label {
	text-align: left;
	color: var(--blue);
}

.page-ebike-model .bike-tech-card-icon {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin: 0;
	opacity: 0.95;
}

.page-ebike-model .bike-tech-value {
	margin: 0;
	font-size: 18px;
	line-height: 22px;
	font-weight: 800;
	letter-spacing: -0.4px;
	color: #1d2f3a;
}

.page-ebike-model .bike-tech-sub {
	margin: 6px 0 0;
	font-size: 10px;
	line-height: 13px;
	color: #707c84;
}

.page-ebike-model .bike-tech-safety {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin-top: 2px;
}

.page-ebike-model .bike-tech-safety-item {
	padding-right: 14px;
}

.page-ebike-model .bike-tech-safety-item + .bike-tech-safety-item {
	padding-left: 16px;
	padding-right: 0;
	border-left: 1px solid #dde5e9;
}

.page-ebike-model .bike-tech-safety-title {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	color: var(--ink);
}

.page-ebike-model .bike-tech-safety-sub {
	margin: 4px 0 0;
	font-size: 9px;
	line-height: 12px;
	color: #6d7d86;
}

.page-ebike-model .bike-insights {
	padding-bottom: 48px;
}

.page-ebike-model .bike-insights-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	margin-top: 28px;
}

.page-ebike-model .bike-insights-head {
	margin: 0;
	font-size: 20px;
	line-height: 24px;
	font-weight: 800;
	text-transform: none;
	letter-spacing: 0;
}

.page-ebike-model .bike-insights-col--pros .bike-insights-head {
	color: var(--green-dark);
}

.page-ebike-model .bike-insights-col--cons .bike-insights-head {
	color: #e03b3b;
}

.page-ebike-model .bike-insights-list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.page-ebike-model .bike-insights-list li {
	position: relative;
	padding-left: 14px;
	margin: 0;
	font-size: 13px;
	line-height: 21px;
	color: #3c4e59;
}

.page-ebike-model .bike-analysis {
	border-top: 1px solid var(--line);
}

.page-ebike-model .bike-analysis-subtitle {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 21px;
	font-weight: 500;
}

.page-ebike-model .bike-analysis-subtitle-text {
	color: #8b98a2;
}

.page-ebike-model .bike-analysis-subtitle-model {
	flex: none;
	font-size: 20px;
	line-height: 24px;
	font-weight: 800;
	letter-spacing: -0.3px;
	color: var(--green);
	text-align: right;
}

.page-ebike-model .bike-analysis-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-top: 24px;
}

.page-ebike-model .bike-analysis-richtext {
	margin-top: 24px;
	color: #4a5a64;
	font-size: 13px;
	line-height: 22px;
}

.page-ebike-model .bike-analysis-richtext > :first-child {
	margin-top: 0;
}

.page-ebike-model .bike-analysis-richtext > :last-child {
	margin-bottom: 0;
}

.page-ebike-model .bike-analysis-richtext h2,
.page-ebike-model .bike-analysis-richtext h3,
.page-ebike-model .bike-analysis-richtext h4 {
	margin: 18px 0 8px;
	font-weight: 800;
	color: var(--ink);
}

.page-ebike-model .bike-analysis-richtext p,
.page-ebike-model .bike-analysis-richtext ul,
.page-ebike-model .bike-analysis-richtext ol {
	margin: 10px 0;
}

.page-ebike-model .bike-analysis-richtext ul,
.page-ebike-model .bike-analysis-richtext ol {
	padding-left: 20px;
}

/* Separate borders rather than collapsed, so overflow can clip the top corners. */
.page-ebike-model .bike-analysis-richtext table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	margin: 30px 0;
	overflow: hidden;
}

.page-ebike-model .bike-analysis-richtext table td {
	padding: 10px;
	border-bottom: 1px solid #e3eaef;
	vertical-align: top;
}

.page-ebike-model .bike-analysis-richtext table tr:nth-of-type(1) {
	background: #285675;
	color: #fff;
}

.page-ebike-model .bike-analysis-richtext table tr:nth-of-type(1) td {
	font-weight: 700;
	border-bottom: 0;
}

.page-ebike-model .bike-analysis-card {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.page-ebike-model .bike-analysis-card h3 {
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 800;
	letter-spacing: -0.2px;
	color: var(--ink);
}

.page-ebike-model .bike-analysis-card p {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 22px;
	color: #4a5a64;
}

.page-ebike-model .bike-insights-col--pros li::before,
.page-ebike-model .bike-insights-col--cons li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
}

.page-ebike-model .bike-insights-col--pros li::before {
	background: var(--green);
}

.page-ebike-model .bike-insights-col--cons li::before {
	background: #e03b3b;
}

.page-ebike-model .bike-key-specs-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 48px;
	margin-top: 24px;
}

.page-ebike-model .bike-specs-title {
	margin: 0;
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	color: var(--ink);
}

.page-ebike-model .bike-specs-list {
	margin: 10px 0 0;
	padding: 0;
	border-top: 2px solid #83919c;
}

.page-ebike-model .bike-specs-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 9px 0;
	border-bottom: 1px solid #e3eaef;
}

.page-ebike-model .bike-specs-row dt,
.page-ebike-model .bike-specs-row dd {
	margin: 0;
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
	color: #46555f;
}

.page-ebike-model .bike-specs-row dd {
	font-weight: 700;
	color: #1d2f3a;
	text-align: right;
}

.page-ebike-model .bike-range-card {
	max-width: 780px;
	margin: 24px auto 0;
	padding: 34px 42px;
	background: #fff;
	border: 1px solid rgba(174, 176, 179, 0.25);
	border-radius: 10px;
	box-shadow: 0 10px 20px rgba(33, 78, 109, 0.08);
}

.page-ebike-model .bike-range-title {
	margin: 0;
	font-size: 34px;
	line-height: 40px;
	font-weight: 800;
	text-align: center;
	color: #2f3d49;
}

.page-ebike-model .bike-range-sub {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	color: #6b7881;
}

.page-ebike-model .bike-range-value {
	margin: 20px 0 0;
	font-size: 56px;
	line-height: 1;
	font-weight: 800;
	text-align: center;
	color: var(--blue);
}

.page-ebike-model .bike-range-unit {
	font-size: 22px;
	font-weight: 700;
	color: #7e8f9a;
}

.page-ebike-model .bike-range-control {
	margin-top: 26px;
}

.page-ebike-model .bike-range-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 8px;
	font-size: 10px;
	line-height: 13px;
	font-weight: 700;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: #3f4e58;
}

.page-ebike-model .bike-range-label strong {
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--green-dark);
}

/* The thumb centre of a range input travels from half a thumb in to half a thumb
   short of the end, never a clean 0%-100%. --range-position encodes exactly that
   travel, and the fill, the thumb and the tick labels below are all derived from
   it so they cannot drift out of alignment. --range-fraction is written by the
   estimator script on every input event. */
.page-ebike-model .bike-range-slider {
	position: relative;
	--thumb-size: 18px;
	--track-height: 6px;
}

.page-ebike-model .bike-range input[type="range"] {
	--range-position: calc((var(--thumb-size) / 2) + (var(--range-fraction, 0) * (100% - var(--thumb-size))));
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: var(--thumb-size);
	margin: 0;
	background: transparent;
	cursor: pointer;
}

.page-ebike-model .bike-range input[type="range"]:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 4px;
}

.page-ebike-model .bike-range input[type="range"]::-webkit-slider-runnable-track {
	height: var(--track-height);
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--green) 0,
		var(--green) var(--range-position),
		#2f3d49 var(--range-position),
		#2f3d49 100%
	);
}

.page-ebike-model .bike-range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: var(--thumb-size);
	height: var(--thumb-size);
	/* Recentres the thumb on the track, which WebKit otherwise top-aligns. */
	margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 1px 4px rgba(33, 78, 109, 0.35);
}

/* Firefox has a native progress element, so it needs no gradient. */
.page-ebike-model .bike-range input[type="range"]::-moz-range-track {
	height: var(--track-height);
	border-radius: 999px;
	background: #2f3d49;
}

.page-ebike-model .bike-range input[type="range"]::-moz-range-progress {
	height: var(--track-height);
	border-radius: 999px;
	background: var(--green);
}

.page-ebike-model .bike-range input[type="range"]::-moz-range-thumb {
	width: var(--thumb-size);
	height: var(--thumb-size);
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 1px 4px rgba(33, 78, 109, 0.35);
}

/* Ticks are absolutely positioned on the same expression as the thumb. A five
   column grid cannot do this: its cell centres sit at 10/30/50/70/90% of the
   full width, which is why the labels used to sit off the notches. */
.page-ebike-model .bike-range-scale {
	position: relative;
	height: 28px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.page-ebike-model .bike-range-scale li {
	position: absolute;
	top: 0;
	left: calc((var(--thumb-size) / 2) + (var(--tick, 0) * (100% - var(--thumb-size))));
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: center;
	white-space: nowrap;
	font-size: 9px;
	line-height: 12px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #8b98a2;
}

/* The active level is called out above the slider, so the matching tick is
   emphasised rather than left to blend in with the rest. */
.page-ebike-model .bike-range-scale li.is-current {
	color: var(--green-dark);
}

.page-ebike-model .bike-range-scale-name {
	font-weight: 700;
	color: #5b6b75;
}

.page-ebike-model .bike-range-scale li.is-current .bike-range-scale-name {
	color: var(--green-dark);
}

/* Five two-line labels cannot fit side by side on a phone, so every other one
   drops out. Keeping the odd ones leaves 1/3/5, still evenly spaced. */
@media (max-width: 560px) {
	.page-ebike-model .bike-range-scale li:nth-child(even) {
		display: none;
	}
}

.page-ebike-model .bike-range-toggles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 24px;
}

.page-ebike-model .bike-toggle-title {
	margin: 0 0 8px;
	font-size: 10px;
	line-height: 13px;
	font-weight: 700;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: #3f4e58;
}

.page-ebike-model .bike-toggle-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
	padding: 4px;
	border-radius: 12px;
	background: #dfe5e9;
}

.page-ebike-model .bike-toggle-btn {
	height: 38px;
	padding: 0 12px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #6b7a85;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.page-ebike-model .bike-toggle-btn:hover:not(.is-active) {
	color: #2f3d49;
}

.page-ebike-model .bike-toggle-btn.is-active {
	background: var(--green);
	color: #fff;
	box-shadow: 0 1px 3px rgba(33, 78, 109, 0.25);
}

/* Methodology link + modal for the range estimator. Sits under the card so the
   estimator itself stays uncluttered. */
.page-ebike-model .bike-range-explain {
	margin: 14px 0 0;
	text-align: center;
}

.page-ebike-model .bike-range-explain button {
	border: 0;
	background: none;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.page-ebike-model .bike-range-explain button:hover,
.page-ebike-model .bike-range-explain button:focus-visible {
	color: var(--green-dark);
}

.page-ebike-model .bike-range-modal[hidden] {
	display: none;
}

.page-ebike-model .bike-range-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.page-ebike-model .bike-range-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 38, 53, 0.55);
}

.page-ebike-model .bike-range-modal-dialog {
	position: relative;
	width: min(620px, 100%);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 28px 30px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 30px 60px rgba(16, 38, 53, 0.28);
}

.page-ebike-model .bike-range-modal-dialog:focus {
	outline: none;
}

.page-ebike-model .bike-range-modal-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--ink);
}

.page-ebike-model .bike-range-modal-lead {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #4a5c6a;
}

.page-ebike-model .bike-range-modal-lead strong {
	color: var(--ink);
	white-space: nowrap;
}

.page-ebike-model .bike-range-modal-subtitle {
	margin: 20px 0 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--green-dark);
}

.page-ebike-model .bike-range-modal-list {
	margin: 10px 0 0;
	padding-left: 20px;
	display: grid;
	gap: 10px;
	font-size: 14px;
	line-height: 1.6;
	color: #4a5c6a;
}

.page-ebike-model .bike-range-modal-list strong {
	color: var(--ink);
}

.page-ebike-model .bike-range-modal-note {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	line-height: 1.6;
	color: #6b7f8c;
}

.page-ebike-model .bike-range-modal-close {
	margin-top: 20px;
	height: 38px;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--blue);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.page-ebike-model .bike-range-modal-close:hover,
.page-ebike-model .bike-range-modal-close:focus-visible {
	background: #1a3f59;
}

body.is-range-help-open {
	overflow: hidden;
}

.page-ebike-model .bike-similar .bike-section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--blue);
}

.page-ebike-model .bike-similar .bike-section-eyebrow::before {
	content: "";
	width: 3px;
	height: 10px;
	border-radius: 999px;
	background: var(--green);
}

.page-ebike-model .bike-similar-slider {
	position: relative;
	margin-top: 24px;
	padding: 0 36px 46px;
	border-bottom: 1px solid var(--line);
}

.page-ebike-model .bike-similar-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: visible;
	padding-top: 24px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	touch-action: pan-x pan-y;
	cursor: grab;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.page-ebike-model .bike-similar-track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}

.page-ebike-model .bike-similar-track.is-dragging .bike-similar-card {
	pointer-events: none;
}

.page-ebike-model .bike-similar-track img {
	-webkit-user-drag: none;
	user-select: none;
}

.page-ebike-model .bike-similar-track::-webkit-scrollbar {
	display: none;
}

.page-ebike-model .bike-similar-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #7e909d;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	z-index: 4;
}

.page-ebike-model .bike-similar-nav--prev {
	left: 0;
}

.page-ebike-model .bike-similar-nav--next {
	right: 0;
}

.page-ebike-model .bike-similar-nav:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Model card. Deliberately NOT scoped to .page-ebike-model: the same markup is
   emitted by _model-card.php on the PDP, brand pages, the model index and the
   home page. Only the slider/carousel chrome above stays PDP scoped. */
.bike-similar-card {
	padding: 8px;
	background: #fff;
	border: 1px solid rgba(174, 176, 179, 0.35);
	border-radius: 14px;
	box-shadow: 0 10px 20px rgba(33, 78, 109, 0.06);
	position: relative;
	margin-top: 26px;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
}

.page-ebike-model .bike-similar-track .bike-similar-card {
	flex: 0 0 calc((100% - 32px) / 3);
}

/* Grid container for surfaces that list cards instead of scrolling them. */
.bike-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px 16px;
}

.bike-similar-compare {
	position: absolute;
	top: -26px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 11px;
	line-height: 14px;
	font-weight: 600;
	color: #4e6170;
}

.bike-similar-compare input {
	margin: 0;
}

/* Compare count badge on the primary nav link. */
.nav-compare-link {
	position: relative;
}

.nav-compare-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	margin-left: 6px;
	padding: 0 5px;
	border-radius: 999px;
	background: #8dc63f;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	vertical-align: middle;
}

.nav-compare-count[hidden] {
	display: none;
}

/* Sitewide compare drawer, pinned to the bottom of the viewport. */
.compare-drawer {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 940;
	background: #12344a;
	color: #fff;
	box-shadow: 0 -8px 26px rgba(11, 32, 45, .28);
	transform: translateY(100%);
}

@media screen and (prefers-reduced-motion: no-preference) {
	.compare-drawer {
		transition: transform 240ms ease;
	}
}

.compare-drawer.is-open {
	transform: translateY(0);
}

.compare-drawer[hidden] {
	display: none;
}

.compare-drawer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 20px 14px;
}

.compare-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.compare-drawer-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
}

.compare-drawer-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: #8dc63f;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0;
}

.compare-drawer-max {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #a9c2d1;
}

.compare-drawer-head-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.compare-drawer-clear,
.compare-drawer-toggle {
	border: 0;
	background: none;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	color: #cfe0ea;
	cursor: pointer;
}

.compare-drawer-clear:hover,
.compare-drawer-toggle:hover {
	color: #fff;
}

.compare-drawer-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.compare-drawer-chevron {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform .18s ease;
}

.compare-drawer.is-collapsed .compare-drawer-chevron {
	transform: rotate(180deg);
}

.compare-drawer-body {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 10px;
}

/* Minimized state keeps the bar as a sliver: the header row only. */
.compare-drawer.is-collapsed .compare-drawer-body {
	display: none;
}

.compare-drawer-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	flex: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}

.compare-drawer-item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	padding: 6px 8px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .08);
}

.compare-drawer-item.is-empty-slot {
	border: 1px dashed rgba(255, 255, 255, .28);
	background: none;
	justify-content: center;
}

.compare-drawer-slot {
	font-size: 12px;
	color: #9fbacb;
}

.compare-drawer-item-main {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex: 1;
	color: #fff;
	text-decoration: none;
}

.compare-drawer-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 44px;
	flex: none;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}

.compare-drawer-thumb.is-empty {
	background: rgba(255, 255, 255, .16);
}

.compare-drawer-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.compare-drawer-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Matches the .pinned-brand eyebrow treatment used elsewhere for the same data. */
.compare-drawer-brand {
	font-size: 10px;
	font-weight: 700;
	line-height: 14px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #9fbacb;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.compare-drawer-name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.compare-drawer-price {
	font-size: 12px;
	color: #a9c2d1;
}

.compare-drawer-remove {
	flex: none;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.compare-drawer-remove:hover {
	background: #dc2626;
}

.compare-drawer-cta {
	flex: none;
}

.compare-drawer-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 22px;
	border-radius: 999px;
	background: #8dc63f;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.compare-drawer-go:hover {
	background: #7abf33;
}

/* Keeps the drawer from covering page content at the very bottom of a scroll. */
body.has-compare-drawer {
	padding-bottom: 132px;
}

@media (max-width: 900px) {
	.compare-drawer-body {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.compare-drawer-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.compare-drawer-go {
		width: 100%;
	}

	body.has-compare-drawer {
		padding-bottom: 220px;
	}
}

.bike-similar-image {
	display: block;
	aspect-ratio: 16 / 10;
	min-height: 150px;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.bike-similar-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 8px;
}

.bike-similar-image--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bike-similar-image--fallback span {
	font-size: 12px;
	line-height: 15px;
	font-weight: 700;
	color: #8394a0;
}

.bike-similar-body {
	position: static;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin: 8px -8px -8px;
	padding: 14px 16px 12px;
	background: rgba(33, 78, 109, 0.05);
	border-radius: 0 0 13px 13px;
}

.bike-similar-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 11px;
	line-height: 14px;
	font-weight: 700;
	color: #2d3d47;
}

.bike-similar-badge img {
	display: block;
	width: 14px;
	height: 14px;
}

.bike-similar-score {
	position: absolute;
	top: 8px;
	right: 8px;
	margin: 0;
	padding: 3px 8px;
	border-radius: 8px;
	background: #2f3d49;
	font-size: 18px;
	line-height: 21px;
	font-weight: 800;
	color: #fff;
	z-index: 2;
}

.bike-similar-score span {
	font-size: 10px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
}

.bike-similar-body h3 {
	margin: 0;
	font-size: 17px;
	line-height: 20px;
	font-weight: 800;
}

.bike-similar-body h3 a {
	color: var(--ink);
	text-decoration: none;
}

.bike-similar-brand {
	margin: 6px 0 0;
	font-size: 11px;
	line-height: 14px;
	color: #738792;
}

.bike-similar-bars {
	display: grid;
	gap: 14px;
	margin-top: 14px;
}

.bike-similar-bar {
	position: relative;
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: #3a4e59;
}

.bike-similar-bar-icon {
	display: block;
	width: 18px;
	height: 18px;
	justify-self: center;
	opacity: 0.75;
}

.bike-similar-bar-main {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.bike-similar-bar-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.bike-similar-bar strong {
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	color: var(--score-text, #223947);
	white-space: nowrap;
}

.bike-similar-bar-label {
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	color: #2f3f4a;
}

.bike-similar-bar i {
	display: block;
	height: 6px;
	max-width: 100%;
	background: var(--score-color, var(--green));
	border-radius: 999px;
}

.bike-similar-bar-track {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: var(--score-track, #dfe5ea);
	overflow: hidden;
}

.bike-similar-ul {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 18px;
	margin-bottom: 16px;
}

/* Placeholder: matches one chip row so cards stay the same height. */
.bike-similar-ul--empty {
	min-height: 18px;
}

.bike-similar-ul-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	color: #2f3f4a;
}

.bike-similar-ul-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1.5px solid #2f3f4a;
	border-radius: 50%;
	font-size: 8px;
	line-height: 1;
	font-weight: 800;
}

.bike-similar-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid rgba(33, 78, 109, 0.12);
}

.bike-similar-footer p {
	margin: 0;
	font-size: 18px;
	line-height: 22px;
	font-weight: 800;
	color: var(--blue);
}

.bike-similar-footer a {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 11px;
	border-radius: 999px;
	background: var(--green);
	font-size: 10px;
	line-height: 14px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Grid / list view switch
   The control writes the mode to <html data-card-view> and localStorage, so the
   preference follows the visitor across every listing surface.
   --------------------------------------------------------------------------- */
.card-view-toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
	padding: 3px;
	border-radius: 999px;
	background: #e6ecf1;
}

.card-view-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #7b8f9c;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.card-view-toggle-btn svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.card-view-toggle-btn:hover,
.card-view-toggle-btn:focus {
	color: #3d5666;
}

.card-view-toggle-btn[aria-pressed="true"] {
	background: #ffffff;
	color: #214e6d;
	box-shadow: 0 1px 3px rgba(20, 45, 62, 0.22);
}

.card-view-toggle-btn:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

[data-card-view="list"] [data-card-grid] {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

/* Explicit placement: the compare label precedes the image in the markup, and
   the list row wants it tucked under the thumbnail. */
[data-card-view="list"] [data-card-grid] .bike-similar-card {
	display: grid;
	grid-template-columns: minmax(88px, 132px) minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: start;
	gap: 6px 14px;
	margin-top: 0;
	padding: 12px;
	scroll-snap-align: none;
}

[data-card-view="list"] [data-card-grid] .bike-similar-compare {
	position: static;
	grid-column: 1;
	grid-row: 2;
	justify-content: center;
}

[data-card-view="list"] [data-card-grid] .bike-similar-image {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	min-height: 0;
	aspect-ratio: 4 / 3;
}

[data-card-view="list"] [data-card-grid] .bike-similar-image img {
	padding: 0;
}

[data-card-view="list"] [data-card-grid] .bike-similar-body {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"badges score"
		"title  score"
		"brand  score"
		"bars   bars"
		"chips  chips"
		"footer footer";
	align-content: start;
	gap: 0 12px;
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

[data-card-view="list"] [data-card-grid] .bike-similar-badges {
	grid-area: badges;
}

[data-card-view="list"] [data-card-grid] .bike-similar-badge {
	margin-bottom: 6px;
}

/* Out of the absolute corner and into the row so the compare label and the
   thumbnail stay clear of it. */
[data-card-view="list"] [data-card-grid] .bike-similar-score {
	position: static;
	grid-area: score;
	justify-self: end;
	align-self: start;
	font-size: 15px;
	line-height: 18px;
}

[data-card-view="list"] [data-card-grid] .bike-similar-body h3 {
	grid-area: title;
	font-size: 15px;
	line-height: 19px;
}

[data-card-view="list"] [data-card-grid] .bike-similar-brand {
	grid-area: brand;
	margin-top: 3px;
}

[data-card-view="list"] [data-card-grid] .bike-similar-bars {
	grid-area: bars;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin-top: 10px;
}

[data-card-view="list"] [data-card-grid] .bike-similar-ul {
	grid-area: chips;
	margin-top: 10px;
	margin-bottom: 0;
}

[data-card-view="list"] [data-card-grid] .bike-similar-ul--empty {
	min-height: 0;
	margin-top: 0;
}

[data-card-view="list"] [data-card-grid] .bike-similar-footer {
	grid-area: footer;
	margin-top: 10px;
	padding-top: 10px;
}

[data-card-view="list"] [data-card-grid] .bike-similar-footer p {
	font-size: 16px;
	line-height: 20px;
}

/* The grid hint reserves ~460px per off-screen row, which leaves large gaps
   once the rows are short. */
[data-card-view="list"] .models-grid-item {
	contain-intrinsic-size: auto 190px;
}

@media (max-width: 640px) {
	.models-toolbar .models-sort {
		flex: 1 1 auto;
		width: auto;
	}
}

@media (max-width: 560px) {
	[data-card-view="list"] [data-card-grid] .bike-similar-card {
		grid-template-columns: minmax(76px, 96px) minmax(0, 1fr);
		gap: 6px 12px;
		padding: 10px;
	}

	[data-card-view="list"] [data-card-grid] .bike-similar-body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"badges"
			"title"
			"brand"
			"score"
			"bars"
			"chips"
			"footer";
	}

	[data-card-view="list"] [data-card-grid] .bike-similar-score {
		justify-self: start;
		margin-top: 8px;
	}

	[data-card-view="list"] [data-card-grid] .bike-similar-compare {
		font-size: 10px;
		gap: 6px;
	}
}

@media (max-width: 1100px) {
	.page-ebike-model .bike-similar-slider {
		padding: 0 32px 46px;
	}

	.page-ebike-model .bike-similar-track {
		padding-top: 24px;
	}

	.page-ebike-model .bike-similar-track .bike-similar-card {
		flex-basis: calc((100% - 16px) / 2);
	}

	.page-ebike-model .bike-hero-meta-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 20px;
		width: 100%;
		flex: 1 1 auto;
	}

	.page-ebike-model .bike-tech-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.page-ebike-model .bike-tech-card--safety {
		grid-column: span 2;
		order: 1;
	}

	.page-ebike-model .bike-key-specs-grid,
	.page-ebike-model .bike-analysis-grid,
	.page-ebike-model .bike-similar-grid,
	.page-ebike-model .bike-range-toggles {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 700px) {
	.page-ebike-model .bike-tech-safety {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.page-ebike-model .bike-tech-safety-item {
		padding: 0 0 12px;
		border-left: 0;
	}

	.page-ebike-model .bike-tech-safety-item + .bike-tech-safety-item {
		padding: 12px 0 0;
		border-left: 0;
		border-top: 1px solid #dde5e9;
	}
}

@media (max-width: 760px) {
	.page-ebike-model .bike-similar-slider {
		padding: 0 24px 36px;
	}

	.page-ebike-model .bike-similar-track {
		padding-top: 20px;
	}

	.page-ebike-model .bike-similar-track .bike-similar-card {
		flex-basis: 86%;
	}

	.page-ebike-model .bike-similar-track .bike-similar-card:only-child {
		flex-basis: 100%;
	}

	.page-ebike-model .bike-section {
		padding-top: 42px;
	}

	.page-ebike-model .bike-hero {
		padding-top: 18px;
	}

	.page-ebike-model .bike-hero-head {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
	}

	.page-ebike-model .bike-hero-headline {
		flex: 0 0 auto;
		width: 100%;
		align-items: flex-start;
		text-align: left;
	}

	.page-ebike-model .bike-hero-brand img {
		width: 82px;
		height: 26px;
	}

	.page-ebike-model .bike-hero-title {
		font-size: 40px;
		line-height: 44px;
		letter-spacing: -1.4px;
	}

	.page-ebike-model .bike-hero-brand-line {
		/* Previous responsive override (kept for rollback)
		font-size: 12px;
		line-height: 15px;
		*/
	}

	.page-ebike-model .bike-hero-inventory-link {
		/* Previous responsive override (kept for rollback)
		height: 22px;
		padding: 0 10px;
		font-size: 10px;
		*/
	}

	.page-ebike-model .bike-hero-tags {
		align-self: flex-start;
		margin-top: 14px;
	}

	.page-ebike-model .bike-hero-meta-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		gap: 20px 16px;
		align-items: start;
		width: 100%;
		flex: 0 0 auto;
		margin-top: 20px;
		padding-inline: 10px;
	}

	.page-ebike-model .bike-hero-meta-strip .bike-hero-compare {
		grid-column: 1 / -1;
		justify-self: stretch;
		width: auto;
		height: 44px;
		margin-top: 4px;
		margin-inline: -10px;
	}

	.page-ebike-model .bike-hero-meta-value {
		font-size: 26px;
		line-height: 30px;
	}

	.page-ebike-model .bike-section-title {
		font-size: 34px;
		line-height: 40px;
	}

	.page-ebike-model .bike-insights-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.page-ebike-model .bike-tech-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.page-ebike-model .bike-tech-card {
		padding: 14px 14px 12px;
		min-height: 0;
	}

	.page-ebike-model .bike-tech-card--safety {
		grid-column: 1 / -1;
		order: 1;
	}

	.page-ebike-model .bike-tech-value {
		font-size: 24px;
		line-height: 28px;
	}

	.page-ebike-model .bike-analysis-subtitle {
		gap: 12px;
	}

	.page-ebike-model .bike-analysis-subtitle-model {
		font-size: 18px;
		line-height: 22px;
	}

	.page-ebike-model .bike-specs-row dt,
	.page-ebike-model .bike-specs-row dd {
		font-size: 17px;
		line-height: 24px;
	}

	.page-ebike-model .bike-range-card {
		padding: 22px;
	}

	.page-ebike-model .bike-range-title {
		font-size: 32px;
		line-height: 38px;
	}

	.page-ebike-model .bike-range-value {
		font-size: 62px;
	}

	.page-ebike-model .bike-range-unit {
		font-size: 26px;
	}

	.page-ebike-model .bike-similar-footer p {
		font-size: 26px;
		line-height: 30px;
	}
}

/* =====================================================================
   Brand Directory + Profile (legacy-inspired)
   ===================================================================== */

.brand-directory {
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 46%);
	padding: 44px 0 68px;
}

.brand-directory-hero {
	text-align: center;
	padding: 24px 0 32px;
}

.brand-directory-hero h1 {
	margin: 0;
	font-size: clamp(2.2rem, 1.9rem + 1.2vw, 3.4rem);
	line-height: 1.04;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: #0f172a;
}

.brand-directory-hero p {
	max-width: 760px;
	margin: 12px auto 0;
	font-size: 1.02rem;
	line-height: 1.6;
	color: #64748b;
}

.brand-directory-head {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr minmax(260px, 480px);
	align-items: end;
	margin-bottom: 28px;
}

.brand-directory-head h2 {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.2;
	font-weight: 800;
	color: #1e293b;
}

.brand-directory-head h2 span {
	color: #94a3b8;
	font-weight: 500;
}

.brand-directory-search input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid #d7e1e8;
	background: #fff;
	font-size: 0.95rem;
	color: #214e6d;
}

.brand-directory-search input:focus {
	outline: 2px solid rgba(33, 78, 109, 0.2);
	outline-offset: 0;
	border-color: #214e6d;
}

.brand-directory-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

.brand-directory-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.brand-directory-card:hover,
.brand-directory-card:focus {
	transform: translateY(-4px);
	border-color: #96aec0;
	box-shadow: 0 16px 28px rgba(15, 23, 42, 0.1);
}

.brand-directory-card:focus-within {
	transform: translateY(-4px);
	border-color: #96aec0;
	box-shadow: 0 16px 28px rgba(15, 23, 42, 0.1);
}

.brand-directory-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 138px;
	padding: 20px;
	border-bottom: 1px solid #edf2f7;
	text-decoration: none;
	background: #fff;
}

.brand-directory-logo img {
	max-width: 150px;
	max-height: 84px;
	object-fit: contain;
}

.brand-directory-logo-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	border-radius: 999px;
	background: #eff4f8;
	font-size: 2.2rem;
	font-weight: 900;
	color: #9fb0bf;
}

.brand-directory-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 18px 20px;
	flex: 1 1 auto;
}

.brand-directory-card-body h3 {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 800;
}

.brand-directory-card-body h3 a {
	color: #0f172a;
	text-decoration: none;
}

.brand-directory-card-body h3 a:hover,
.brand-directory-card-body h3 a:focus-visible {
	text-decoration: underline;
}

.brand-directory-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.brand-meta-pill {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #475569;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.03em;
}

@media (prefers-reduced-motion: reduce) {
	.brand-directory-card {
		transition: none;
	}
}

.brand-meta-pill-models {
	background: #e9f2fb;
	color: #214e6d;
}

.brand-directory-card-body p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.54;
	color: #64748b;
}

.brand-directory-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 12px;
	background: #0f172a;
	color: #fff;
	font-size: 0.86rem;
	font-weight: 700;
	text-decoration: none;
}

.brand-directory-cta:hover,
.brand-directory-cta:focus-visible {
	background: #1f2c3f;
}

.brand-profile {
	padding-bottom: 56px;
}

.brand-profile-hero {
	background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
	border-bottom: 1px solid #e2e8f0;
	padding: 42px 0;
}

.brand-profile-back {
	display: inline-block;
	margin-bottom: 16px;
	font-weight: 700;
	font-size: 0.96rem;
	color: #334155;
	text-decoration: none;
}

.brand-profile-back:hover,
.brand-profile-back:focus-visible {
	text-decoration: underline;
}

.brand-profile-hero-grid {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 28px;
	align-items: start;
}

.brand-profile-logo {
	width: 150px;
	height: 150px;
	border-radius: 20px;
	border: 1px solid #e2e8f0;
	background: #fff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.brand-profile-logo img {
	max-width: 84%;
	max-height: 84%;
	object-fit: contain;
}

.brand-profile-logo span {
	font-size: 3.8rem;
	line-height: 1;
	font-weight: 900;
	color: #9fb0bf;
}

.brand-profile-title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}

.brand-profile-title-row h1 {
	margin: 0;
	font-size: clamp(2rem, 1.8rem + 0.7vw, 2.6rem);
	line-height: 1.1;
	font-weight: 900;
	color: #0f172a;
}

.brand-profile-site {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px;
	border-radius: 8px;
	background: #e0f2fe;
	color: #0369a1;
	font-size: 0.84rem;
	font-weight: 700;
	text-decoration: none;
}

.brand-profile-site:hover,
.brand-profile-site:focus-visible {
	background: #c9eaff;
}

.brand-profile-site svg {
	flex: none;
}

.brand-profile-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.brand-profile-meta span {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 10px;
	border: 1px solid #cbd5e1;
	border-radius: 7px;
	background: #fff;
	font-size: 0.84rem;
	font-weight: 600;
	color: #475569;
}

.brand-profile-body {
	font-size: 1.02rem;
	line-height: 1.68;
	color: #334155;
}

.brand-profile-copy {
	margin: 0;
}

.brand-profile-placeholder {
	margin: 8px 0 0;
	color: #64748b;
	font-size: 1rem;
	line-height: 1.6;
}

.brand-profile-models {
	padding-top: 42px;
}

.brand-profile-models-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 10px;
	padding-bottom: 12px;
	margin-bottom: 22px;
	border-bottom: 2px solid #e2e8f0;
}

.brand-profile-models-head h2 {
	margin: 0 auto 0 0;
	font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.9rem);
	line-height: 1.2;
	font-weight: 900;
	color: #0f172a;
}

.brand-profile-models-head span {
	font-size: 0.95rem;
	font-weight: 700;
	color: #64748b;
}

.brand-model-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 24px;
}

.brand-model-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.brand-model-topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px 6px;
	min-height: 28px;
}

.brand-model-top-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	color: #3f5e42;
}

.brand-model-top-badge span {
	color: #8dc63f;
}

.brand-model-top-badge-empty {
	visibility: hidden;
}

.brand-model-compare {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	line-height: 1;
	font-weight: 500;
	color: #455b6b;
}

.brand-model-compare input {
	width: 12px;
	height: 12px;
	margin: 0;
}

.brand-model-media {
	position: relative;
	height: 200px;
	padding: 14px 16px 16px;
	background: #fff;
	border-bottom: 1px solid #eef2f7;
	display: flex;
	align-items: center;
	justify-content: center;
}

.brand-model-media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.brand-model-image-fallback {
	font-size: 0.92rem;
	font-weight: 700;
	color: #94a3b8;
}

.brand-model-score-chip {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2px;
	padding: 5px 8px 4px;
	border-radius: 8px;
	background: #2e3a44;
	color: #fff;
	line-height: 1;
}

.brand-model-score-chip strong {
	font-size: 30px;
	line-height: 1;
	font-weight: 900;
	letter-spacing: -0.03em;
}

.brand-model-score-chip span {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 700;
	padding-top: 11px;
}

.brand-model-body {
	padding: 10px 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
}

.brand-model-body h3 {
	margin: 0;
	font-size: 1.95rem;
	line-height: 1.2;
	font-weight: 800;
}

.brand-model-brand {
	margin: 0;
	font-size: 15px;
	line-height: 1.2;
	font-weight: 500;
	color: #64748b;
}

.brand-model-body h3 a {
	color: #0f172a;
	text-decoration: none;
}

.brand-model-body h3 a:hover,
.brand-model-body h3 a:focus-visible {
	text-decoration: underline;
}

.brand-model-meters {
	display: grid;
	gap: 10px;
}

.brand-model-meter {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 12px;
	align-items: center;
	font-size: 14px;
	font-weight: 800;
	color: #29465c;
	position: relative;
	padding-bottom: 4px;
}

.brand-model-meter-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.brand-model-meter-label em {
	font-style: normal;
	font-size: 11px;
	color: #92a4b4;
}

.brand-model-meter-track {
	grid-column: 1 / -1;
	height: 6px;
	border-radius: 999px;
	background: #e3e9ef;
	overflow: hidden;
}

.brand-model-meter-track i {
	grid-column: 1 / -1;
	display: block;
	height: 6px;
	border-radius: 999px;
	background: #8dc63f;
}

.brand-model-ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.brand-model-ul-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1;
	font-weight: 700;
	color: #2e3a44;
}

.brand-model-ul-chip b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 800;
	color: #26323a;
	background: #fff;
	border: 1px solid #8394a3;
}

.brand-model-footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 10px;
	border-top: 1px solid #edf2f7;
}

.brand-model-footer p {
	margin: 0;
	font-size: 2.05rem;
	font-weight: 900;
	line-height: 1.1;
	color: #214e6d;
}

.brand-model-no-price {
	color: #64748b !important;
	font-size: 15px !important;
	font-weight: 700 !important;
}

.brand-model-footer a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 0 14px;
	border-radius: 999px;
	background: #63a72f;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.brand-model-footer a:hover,
.brand-model-footer a:focus-visible {
	background: #4f9222;
}

@media (max-width: 860px) {
	.brand-directory-head {
		grid-template-columns: 1fr;
	}

	.brand-profile-hero-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.brand-profile-logo {
		width: 124px;
		height: 124px;
	}
}

@media (max-width: 640px) {
	.brand-directory {
		padding-top: 28px;
	}

	.brand-profile-hero {
		padding: 30px 0;
	}

	.brand-model-media {
		height: 196px;
	}

	.brand-model-footer {
		flex-wrap: wrap;
	}

	.brand-model-body h3 {
		font-size: 1.72rem;
	}

	.brand-model-footer p {
		font-size: 1.84rem;
	}
}

/* Category templates: style both /categories/ and individual category pages. */
.page-categories .cat-index-hero {
	padding: 40px 0 18px;
	border-bottom: 1px solid #e1eaf0;
	background: #ffffff;
}

.page-categories .cat-index-kicker {
	margin: 0 0 10px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #3d6f92;
}

/* Same green pipe marker used by .section-tag across the rest of the site. */
.page-categories .cat-index-kicker::before {
	content: '';
	width: 3px;
	height: 14px;
	border-radius: 999px;
	background: var(--green);
}

.page-categories .cat-index-hero-inner h1 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3.1rem);
	line-height: 1;
	color: #163746;
}

.page-categories .cat-index-hero-copy {
	margin: 18px 0 0;
	max-width: 58ch;
	font-size: 1.1rem;
	line-height: 1.46;
	color: #4c687a;
}

.page-categories .cat-index-grid-section {
	padding: 30px 0 72px;
}

.page-categories .cat-index-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.page-categories .cat-index-card {
	display: block;
	text-decoration: none;
	border: 1px solid #d8e5ed;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 12px 30px rgba(25, 63, 87, 0.08);
	transition: transform 140ms ease, box-shadow 160ms ease;
	color: inherit;
}

.page-categories .cat-index-card:hover,
.page-categories .cat-index-card:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 22px 38px rgba(25, 63, 87, 0.14);
}

.page-categories .cat-index-card-image {
	height: 184px;
	background:
		var(--cat-hero-img, none) center / cover no-repeat,
		linear-gradient(130deg, #d8e3eb, #eef4f8);
	border-bottom: 1px solid #dfe9f1;
}

.page-categories .cat-index-card-body {
	padding: 16px 16px 18px;
	display: grid;
	gap: 10px;
}

.page-categories .cat-index-card h2 {
	margin: 0;
	font-size: 2rem;
	line-height: 0.95;
	color: #15384c;
}

.page-categories .cat-index-card-desc {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.45;
	color: #577284;
	min-height: 58px;
}

.page-categories .cat-index-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}

.page-categories .cat-meta-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: #ecf3f8;
	color: #27495f;
}

.page-categories .cat-meta-price {
	background: #e7f3d7;
	color: #44691f;
}

.page-categories .cat-index-empty {
	margin: 0;
	padding: 30px;
	border: 1px dashed #c6d8e5;
	border-radius: 14px;
	text-align: center;
	color: #5a7587;
	background: #f8fbfd;
}

.page-category .cat-page {
	padding-bottom: 56px;
}

.page-category .cat-breadcrumb {
	padding: 18px 0 4px;
	font-size: 0.86rem;
	color: #5f7887;
}

.page-category .cat-breadcrumb a {
	text-decoration: none;
	font-weight: 700;
}

.page-category .cat-hero {
	padding: 24px 0 20px;
}

.page-category .cat-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(420px, 560px);
	gap: 28px;
	align-items: start;
}

.page-category .cat-hero-content h1 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
}

.page-category .cat-hero-copy {
	margin: 12px 0 0;
	max-width: 52ch;
	font-size: 1.02rem;
	line-height: 1.5;
	color: #496476;
}

.page-category .cat-hero-top-pick-label {
	margin: 0 0 14px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #3e6f92;
}

.page-category .cat-hero-top-pick-label::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 14px;
	border-radius: 999px;
	background: var(--green);
}

.page-category .cat-hero-champion {
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 0;
}

.page-category .cat-hero-champion-body {
	display: grid;
	grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.page-category .cat-hero-champion-img-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 178px;
	border-radius: 0;
	background: transparent;
	overflow: hidden;
	text-decoration: none;
}

/* Sized to the wrap rather than max-height percentages: Safari lays the image
   out at its intrinsic size before it decodes, and overflow crops it until the
   next reflow. */
.page-category .cat-hero-champion-img-wrap img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
}

.page-category .cat-hero-champion-img-wrap--fallback {
	color: #6a8396;
	font-size: 0.86rem;
	font-weight: 600;
	text-align: center;
	padding: 16px;
	border: 1px dashed #cddde8;
	border-radius: 10px;
	background: #f8fbfe;
}

.page-category .cat-hero-champion-info {
	display: grid;
	align-content: start;
	gap: 8px;
}

.page-category .cat-hero-champion-title {
	margin: 0;
	font-size: clamp(1.42rem, 2.4vw, 1.9rem);
	font-weight: 800;
	line-height: 1.08;
	color: #163746;
}

.page-category .cat-hero-champion-brand,
.page-category .cat-hero-badge {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
	color: #567587;
}

.page-category .cat-hero-champion-score {
	margin: 4px 0 0;
	font-size: 2rem;
	line-height: 1;
	font-weight: 800;
	color: #214e6d;
}

.page-category .cat-hero-champion-score span {
	font-size: 1rem;
	color: #5f7787;
	margin-left: 3px;
}

.page-category .cat-hero-champion-cta {
	display: inline-flex;
	margin-top: 6px;
	padding: 10px 16px;
	border-radius: 999px;
	background: #214e6d;
	color: #ffffff;
	text-decoration: none;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.page-category .cat-stats-bar {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	padding: 10px 0 22px;
}

.page-category .cat-stat {
	border: 1px solid #d9e5ed;
	border-radius: 12px;
	padding: 14px;
	background: #fff;
}

.page-category .cat-stat-label {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #607c8f;
	text-transform: uppercase;
}

.page-category .cat-stat-value {
	margin: 8px 0 4px;
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	color: #163746;
}

.page-category .cat-stat-value span {
	font-size: 0.88rem;
	font-weight: 700;
	color: #5f7787;
	margin-left: 2px;
}

.page-category .cat-stat-sub {
	margin: 0;
	font-size: 0.82rem;
	color: #668394;
}

.page-category .cat-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	gap: 22px;
	align-items: start;
	padding-top: 6px;
}

.page-category .cat-content {
	min-width: 0;
	display: grid;
	gap: 16px;
}

.page-category .cat-chart-section,
.page-category .cat-sidebar-box {
	border: 1px solid #d8e5ed;
	border-radius: 14px;
	background: #ffffff;
	padding: 16px;
}

.page-category .cat-overview-summary {
	margin: 0 0 12px;
	font-size: 0.95rem;
	line-height: 1.45;
	color: #5d7788;
}

.page-category .cat-chart-section h2 {
	margin: 0;
	font-size: clamp(1.26rem, 2vw, 1.55rem);
	line-height: 1.2;
}

.page-category .cat-chart-desc {
	margin: 10px 0 0;
	font-size: 0.95rem;
	line-height: 1.45;
	color: #5d7788;
}

.page-category .cat-chart-wrap {
	margin-top: 14px;
	min-height: 320px;
	position: relative;
	background: #f7fbfd;
	border: 1px solid #deebf2;
	border-radius: 12px;
	padding: 8px;
}

.page-category #catScatterCanvas {
	width: 100%;
	height: auto;
	display: block;
}

.page-category .cat-sidebar {
	display: grid;
	gap: 14px;
	position: sticky;
	top: 106px;
}

.page-category .cat-overview-dl {
	margin: 0;
	display: grid;
	gap: 10px;
}

.page-category .cat-overview-dl > div {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: baseline;
	padding-bottom: 9px;
	border-bottom: 1px solid #e6eef3;
}

.page-category .cat-overview-dl > div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.page-category .cat-overview-dl dt {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #678192;
}

.page-category .cat-overview-dl dd {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: #163746;
}

.page-category .cat-sidebar-wtlf h3 {
	margin: 0 0 10px;
	font-size: 1.02rem;
}

.page-category .cat-sidebar-wtlf ul {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 7px;
	color: #567587;
	font-size: 0.9rem;
	line-height: 1.35;
}

.page-category .cat-models-section {
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid #d8e5ed;
}

.page-category .cat-models-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.page-category .cat-models-head h2 {
	margin: 0 auto 0 0;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	line-height: 1.1;
}

.page-category .cat-models-count {
	font-size: 0.84rem;
	font-weight: 700;
	color: #5d7889;
}

.page-category .cat-models-grid {
	margin-top: 0;
}

@media (max-width: 1180px) {
	.page-categories .cat-index-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.page-category .cat-main {
		grid-template-columns: 1fr;
	}

	.page-category .cat-sidebar {
		position: static;
		order: -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.page-category .cat-hero-inner,
	.page-category .cat-stats-bar,
	.page-category .cat-sidebar {
		grid-template-columns: 1fr;
	}

	.page-category .cat-hero-champion-body {
		grid-template-columns: 1fr;
	}

	.page-category .cat-hero-champion-img-wrap {
		height: 220px;
	}

	.page-categories .cat-index-grid {
		grid-template-columns: 1fr;
	}
}

/* Blog index + post */
.page-blog-index .blog-index-page {
	padding: 26px 0 64px;
}

.page-blog-post .blog-post-page {
	padding: 0 0 64px;
}

.page-blog-index .blog-index-head h1,
.page-blog-post .blog-post-hero h1 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.08;
	color: #163c56;
}

.page-blog-index .blog-index-kicker {
	margin: 0 0 8px;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #214e6d;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Same green pipe marker used by .section-tag across the rest of the site. */
.page-blog-index .blog-index-kicker::before {
	content: '';
	width: 3px;
	height: 14px;
	border-radius: 999px;
	background: var(--green);
}

.page-blog-index .blog-index-intro {
	margin: 14px 0 0;
	max-width: 72ch;
	font-size: 1rem;
	line-height: 1.6;
	color: #5f7887;
}

.page-blog-index .blog-index-layout {
	margin-top: 24px;
	display: grid;
	grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
	gap: 26px;
}

.page-blog-index .blog-filters {
	border: 1px solid #d8e4ec;
	border-radius: 14px;
	background: #f8fbfd;
	padding: 16px;
	height: fit-content;
	position: sticky;
	top: 96px;
}

.page-blog-index .blog-filters__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.page-blog-index .blog-filters__head h2 {
	margin: 0;
	font-size: 1.06rem;
	color: #163c56;
}

.page-blog-index .blog-filters__close {
	display: none;
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	color: #5f7887;
	cursor: pointer;
}

.page-blog-index .blog-filters form {
	display: grid;
	gap: 12px;
}

/* Direct children only: the checkbox rows inside the fieldsets are labels too,
   and this rule outranks theirs on specificity. */
.page-blog-index .blog-filters > form > label,
.page-blog-index .blog-filters legend {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5f7887;
}

.page-blog-index .blog-filters input[type='search'],
.page-blog-index .blog-filters select {
	width: 100%;
	border: 1px solid #cfdee8;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 0.95rem;
	color: #183f59;
	background: #fff;
}

.page-blog-index .blog-filters__cats {
	margin: 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: 2px;
}

.page-blog-index .blog-filter-cat {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 8px;
	align-items: center;
	padding: 3px 0;
	font-size: 0.88rem;
	color: #244c63;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.page-blog-index .blog-filter-cat strong {
	font-size: 0.78rem;
	color: #6c8796;
	font-weight: 600;
}

.page-blog-index .blog-filters__actions {
	display: flex;
	gap: 10px;
	align-items: center;
	padding-top: 6px;
}

.page-blog-index .blog-filters__actions button,
.page-blog-index .blog-filters__actions a {
	border-radius: 999px;
	padding: 10px 14px;
	font-size: 0.82rem;
	font-weight: 800;
	text-decoration: none;
}

.page-blog-index .blog-filters__actions button {
	border: 0;
	background: #83c53e;
	color: #fff;
	cursor: pointer;
}

.page-blog-index .blog-filters__actions a {
	border: 1px solid #cfdee8;
	color: #244c63;
	background: #fff;
}

.page-blog-index .blog-index-results__tools {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.page-blog-index .blog-index-results__count {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
	color: #5f7887;
}

.page-blog-index .blog-filter-toggle {
	display: none;
	border: 1px solid #cfe0e9;
	background: #fff;
	border-radius: 999px;
	padding: 9px 14px;
	font-size: 0.82rem;
	font-weight: 800;
	color: #214860;
	cursor: pointer;
}

.page-blog-index .blog-per-page-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.84rem;
	font-weight: 700;
	color: #5f7887;
}

.page-blog-index .blog-per-page-form label {
	white-space: nowrap;
}

.page-blog-index .blog-per-page-form select {
	border: 1px solid #cfdee8;
	border-radius: 999px;
	padding: 7px 10px;
	font-size: 0.84rem;
	color: #244c63;
	background: #fff;
}

.page-blog-index .blog-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.page-blog-index .blog-card {
	border: 1px solid #d8e4ec;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr;
}

.page-blog-index .blog-card__image {
	display: block;
	aspect-ratio: 16 / 9;
	background: #eaf2f7;
}

.page-blog-index .blog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.page-blog-index .blog-card__body {
	padding: 15px;
	display: grid;
	gap: 10px;
}

.page-blog-index .blog-card__meta {
	margin: -2px 0 0;
	font-size: 0.72rem;
	font-weight: 700;
	color: #698594;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.page-blog-index .blog-card h2 {
	margin: 0;
	font-size: 1.18rem;
	line-height: 1.25;
}

.page-blog-index .blog-card h2 a {
	color: #173f58;
	text-decoration: none;
}

.page-blog-index .blog-card h2 a:hover,
.page-blog-index .blog-card h2 a:focus-visible {
	text-decoration: underline;
}

.page-blog-index .blog-card__summary {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #5f7887;
}

.page-blog-index .blog-card__cats {
	margin: -2px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.page-blog-index .blog-card__cats li {
	background: #edf5fa;
	color: #2d5a75;
	border-radius: 999px;
	padding: 4px 9px;
	font-size: 0.74rem;
	font-weight: 700;
}

.page-blog-index .blog-card__read {
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: #7fbf39;
}

.page-blog-index .blog-card__tags {
	margin: 6px 0 0;
	padding-top: 12px;
	border-top: 1px solid #e6ecf0;
	font-size: 0.66rem;
	line-height: 1.5;
	color: #8ca0ac;
}

.page-blog-index .blog-pagination {
	margin-top: 20px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.page-blog-index .blog-pagination__link,
.page-blog-index .blog-pagination__num {
	border: 1px solid #d5e2ea;
	border-radius: 999px;
	padding: 7px 11px;
	font-size: 0.84rem;
	font-weight: 700;
	text-decoration: none;
	color: #264e66;
	background: #fff;
}

.page-blog-index .blog-pagination__num.is-active {
	background: #83c53e;
	border-color: #83c53e;
	color: #fff;
}

.page-blog-post .blog-post-breadcrumb {
	padding: 18px 0 4px;
	font-size: 0.86rem;
	color: #5f7887;
}

.page-blog-post .blog-post-breadcrumb a {
	text-decoration: none;
	font-weight: 700;
}

.page-blog-post .blog-post-breadcrumb a:hover,
.page-blog-post .blog-post-breadcrumb a:focus-visible {
	text-decoration: underline;
}

.page-blog-post .blog-post-hero {
	padding-top: 22px;
	display: grid;
	gap: 12px;
}

.page-blog-post .blog-post-tags {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.page-blog-post .blog-post-tags li {
	background: #edf5fa;
	color: #2d5a75;
	border-radius: 999px;
	padding: 5px 10px;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.page-blog-post .blog-post-summary {
	margin: 0;
	max-width: 74ch;
	font-size: 1.05rem;
	line-height: 1.55;
	color: #5f7887;
}

.page-blog-post .blog-post-meta {
	margin: 2px 0 0;
	display: flex;
	gap: 12px;
	font-size: 0.84rem;
	font-weight: 700;
	color: #6f8794;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.page-blog-post .blog-post-topic-tags {
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.page-blog-post .blog-post-topic-tags li {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5f7887;
	background: #f4f8fb;
	border: 1px solid #dbe7ef;
	border-radius: 999px;
	padding: 4px 9px;
}

.page-blog-post .blog-post-updated {
	margin: 26px 0 0;
	text-align: right;
	font-size: 0.76rem;
	color: #8ca0ac;
}

.page-blog-post .blog-post-hero-image {
	width: 100%;
	max-width: 100%;
	border-radius: 14px;
	border: 1px solid #dbe7ef;
	display: block;
}

.page-blog-post .blog-post-layout {
	margin-top: 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: start;
}

.page-blog-post .blog-post-main {
	display: grid;
	gap: 16px;
}

.page-blog-post .blog-post-richtext {
	border: 1px solid #d8e4ec;
	border-radius: 14px;
	background: #fff;
	padding: 18px;
	line-height: 1.7;
	color: #304b5b;
}

.page-blog-post .blog-post-page--figma-v4 .blog-post-richtext {
	padding: 20px;
	border-radius: 16px;
}

.page-blog-post .blog-post-page--figma-v4 {
	--blog-v4-blue: #214e6d;
	--blog-v4-deep: #1a3244;
	--blog-v4-green: #8dc63f;
	--blog-v4-soft: #f3f7fa;
	--blog-v4-line: #d8e4ec;
	/* Tint starts transparent so the breadcrumb sits on white like the category
	   landing page, then fades in behind the hero card. */
	background: linear-gradient(180deg, rgba(36, 86, 119, 0) 0, rgba(36, 86, 119, 0.09) 90px, rgba(36, 86, 119, 0) 460px);
	border-radius: 18px;
	padding-bottom: 20px;
}

.page-blog-post .blog-v4-hero {
	margin-top: 24px;
	padding: 18px 18px 20px;
	border: 0;
	border-bottom: 1px solid #d8e4ec;
	border-radius: 18px;
	background: #fff;
	display: grid;
	grid-template-columns: minmax(0, 1.07fr) minmax(300px, 0.78fr);
	gap: 24px;
	align-items: center;
}

.page-blog-post .blog-v4-kicker {
	margin: 0 0 8px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #214e6d;
}

/* Same green pipe marker used by .section-tag across the rest of the site. */
.page-blog-post .blog-v4-kicker::before {
	content: '';
	width: 3px;
	height: 14px;
	border-radius: 999px;
	background: var(--green);
}

.page-blog-post .blog-v4-hero h1 {
	margin: 0;
	font-size: clamp(2.1rem, 4.7vw, 3.45rem);
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--blog-v4-deep);
	max-width: 15.5ch;
	/* Two balanced lines: "Top 10 Commuter" / "E-Bikes of 2026". */
	text-wrap: balance;
}

.page-blog-post .blog-v4-title-highlight {
	color: var(--blog-v4-green);
	font-weight: 900;
}

.page-blog-post .blog-v4-summary {
	margin: 14px 0 0;
	max-width: 50ch;
	font-size: 1.12rem;
	line-height: 1.52;
	color: #516b7b;
}

.page-blog-post .blog-v4-hero-actions {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.page-blog-post .blog-v4-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-decoration: none;
	border: 1px solid transparent;
}

.page-blog-post .blog-v4-btn--solid {
	background: var(--blog-v4-green);
	border-color: var(--blog-v4-green);
	color: #fff;
}

.page-blog-post .blog-v4-btn--ghost {
	background: #fff;
	border-color: #a5bac8;
	color: var(--blog-v4-blue);
}

.page-blog-post .blog-v4-hero-media {
	position: relative;
	border-radius: 16px;
	border: 0;
	overflow: hidden;
	/* Default panel. Overridden per post by the Hero Image Panel Background
	   field, which writes an inline background on this element. */
	background: #ffffff;
	min-height: 268px;
}

.page-blog-post .blog-v4-hero-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: grid;
	gap: 7px;
}

.page-blog-post .blog-v4-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 8px;
	padding: 4px 8px;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1;
}

.page-blog-post .blog-v4-hero-badge img {
	width: 16px;
	height: 16px;
	display: block;
	flex: none;
}

.page-blog-post .blog-v4-hero-badge--meta {
	background: rgba(21, 53, 74, 0.92);
	color: #b9d7eb;
}

.page-blog-post .blog-v4-hero-badge--model {
	background: #8dc63f;
	color: #fff;
}

.page-blog-post .blog-v4-hero-badge--model em {
	font-style: normal;
	font-weight: 700;
	opacity: 0.82;
}

.page-blog-post .blog-v4-hero-badge--model strong {
	font-weight: 800;
}

.page-blog-post .blog-v4-hero-image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: center bottom;
	min-height: 268px;
}

.page-blog-post .blog-v4-hero-placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	min-height: 268px;
	font-size: 0.9rem;
	font-weight: 700;
	color: #d4e6f2;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.page-blog-post .blog-v4-leaderboard {
	margin-top: 28px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 302px;
	gap: 18px;
	align-items: start;
}

/* Sections that follow the two-column band live in the same grid so the sidebar
   can be re-ordered below all of them on narrow screens. The grid gap owns the
   spacing between them. */
.page-blog-post .blog-v4-leaderboard > .blog-v4-results,
.page-blog-post .blog-v4-leaderboard > .blog-post-richtext--after {
	grid-column: 1 / -1;
	margin-top: 0;
}

/* Both columns are placed explicitly: pinning only the sidebar would make the
   grid treat it as the first item and push the main column to column two. */
.page-blog-post .blog-v4-leaderboard > .blog-v4-main-col {
	grid-column: 1;
	grid-row: 1;
}

.page-blog-post .blog-v4-leaderboard > .blog-v4-sidebar {
	grid-column: 2;
	grid-row: 1;
}

.page-blog-post .blog-v4-main-col {
	display: grid;
	gap: 30px;
}

.page-blog-post .blog-v4-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 3px;
}

/* The board sits directly on the page here: no card, no rounded corners that
   would clip the Status column. */
.page-blog-post .blog-v4-main-col .blog-leaderboard-preview {
	border: 0;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
	background: transparent;
}

/* .section-v4 draws the rule as its own border-bottom, so the breathing room
   above the line is this padding and the room below it is the column gap. */
.page-blog-post .blog-v4-main-col .leaderboards-page.is-preview .leaderboard-block {
	padding: 0 0 40px;
	margin: 0;
	background: transparent;
}

.page-blog-post .blog-v4-main-col .leaderboard-actions {
	padding: 10px 12px 12px;
}

/* Category switcher above the embedded board. Sits between the heading and the
   table, so it borrows the section head's rhythm rather than adding its own. */
.leaderboard-category-filter {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	flex-wrap: wrap;
}

.leaderboard-category-filter label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5b6b76;
}

.leaderboard-category-filter select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 200px;
	padding: 9px 34px 9px 12px;
	border: 1px solid #d8e4ec;
	border-radius: 8px;
	background-color: #fff;
	/* Inline chevron keeps the control from depending on an icon asset. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235b6b76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	color: #1c2b36;
	cursor: pointer;
}

.leaderboard-category-filter select:focus-visible {
	outline: 2px solid #1c2b36;
	outline-offset: 2px;
}

.leaderboard-empty-row td {
	padding: 22px 12px;
	text-align: center;
	color: #5b6b76;
	font-weight: 600;
}

/* The homepage board is built for a full-width page; inside the blog's narrower
   content column its Status pill was being clipped, so the embedded copy gets
   tighter metrics and a scroll fallback instead of a second table markup. */
.page-blog-post .blog-leaderboard-preview .compare-table-wrap {
	overflow-x: auto !important;
	/* The compact board bleeds into the shell gutter below 1037px, but the blog
	   column has no gutter to bleed into, so the table was clipped on both sides. */
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

.page-blog-post .blog-leaderboard-preview .compare-table {
	min-width: 0;
	width: 100%;
}

.page-blog-post .blog-leaderboard-preview .compare-table th,
.page-blog-post .blog-leaderboard-preview .compare-table td {
	padding-left: 6px;
	padding-right: 6px;
	font-size: 0.82rem;
}

.page-blog-post .blog-leaderboard-preview .compare-table th {
	font-size: 0.62rem;
	letter-spacing: 0.03em;
}

.page-blog-post .blog-leaderboard-preview .col-award,
.page-blog-post .blog-leaderboard-preview .award-cell {
	width: 30px;
}

.page-blog-post .blog-leaderboard-preview .status-pill {
	white-space: nowrap;
	font-size: 0.62rem;
	padding: 4px 8px;
}

.page-blog-post .blog-leaderboard-preview .leaderboard-pin-toggle {
	padding: 0;
}

.page-blog-post .blog-leaderboard-preview .pin-cell img {
	width: 14px;
	height: 14px;
}

.page-blog-post .blog-v4-compare-panel {
	background: #fff;
	border: 1px solid var(--blog-v4-line);
	border-radius: 14px;
	padding: 14px;
	display: grid;
	gap: 12px;
}

.page-blog-post .blog-v4-compare-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.page-blog-post .blog-v4-compare-panel h3 {
	margin: 0;
	font-size: 1.04rem;
	color: #1f435a;
}

.page-blog-post .blog-v4-compare-category {
	margin: 0;
	margin-left: auto;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--blog-v4-green);
	text-align: right;
}

.page-blog-post .blog-v4-compare-copy {
	margin: -4px 0 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: #5d7788;
}

/* Point-in-time marker for snapshotted modules. */
.blog-module-stamp {
	display: block;
	margin: 10px 0 0;
	text-align: right;
	font-size: 0.7rem;
	font-style: italic;
	letter-spacing: 0.02em;
	color: #93a7b3;
}

.blog-module-stamp time {
	white-space: nowrap;
}

.page-blog-post .blog-v4-compare-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.page-blog-post .blog-v4-compare-label {
	margin: 0 0 7px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #728996;
}

.page-blog-post .blog-v4-meter-row {
	border: 1px solid #dbe8ef;
	border-radius: 10px;
	padding: 8px;
	background: #fbfdff;
	margin-top: 8px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
}

.page-blog-post .blog-v4-meter-row span {
	font-size: 0.78rem;
	font-weight: 700;
	color: #244a61;
}

.page-blog-post .blog-v4-meter-row strong {
	font-size: 0.75rem;
	font-weight: 800;
	color: #6f8794;
}

.page-blog-post .blog-v4-meter-row i {
	grid-column: 1 / -1;
	display: block;
	height: 6px;
	border-radius: 999px;
	background: #e4edf3;
	overflow: hidden;
	font-style: normal;
}

.page-blog-post .blog-v4-meter-row i b {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #6e9fbe 0, #8dc63f 100%);
	border-radius: inherit;
}

/* The results section shares this grid, so a sticky aside is free to travel
   down over it. Pin the aside to row one and stick an inner wrapper instead. */
.page-blog-post .blog-v4-leaderboard > .blog-v4-sidebar {
	display: block;
	align-self: stretch;
}

.page-blog-post .blog-v4-sidebar-inner {
	display: grid;
	gap: 14px;
	position: sticky;
	top: 96px;
}

/* Each sidebar block repeater row wraps its module so per-row colours can be
   handed down as custom properties without touching the shared module page. */
.page-blog-post .blog-v4-sidebar .blog-block {
	display: block;
	min-width: 0;
}

.page-blog-post .blog-v4-sidebar .blog-module {
	position: relative;
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(22, 61, 87, 0.08);
	border: 1px solid #d6e3ec;
	padding: 22px 20px;
	background: var(--blog-block-bg, transparent);
	/* Clips the accent bar to the panel's inner radius instead of letting it
	   overhang the rounded corners. */
	overflow: hidden;
}

/* No fallback: with --blog-block-accent unset the declaration is invalid at
   computed-value time, so the bar renders transparent rather than green. */
.page-blog-post .blog-v4-sidebar .blog-module::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: var(--blog-block-accent);
}

.page-blog-post .blog-v4-sidebar .blog-module h3 {
	margin: 4px 0 14px;
	font-size: 0.9rem;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--blog-block-title, #173f58);
}

/* Wording an editor typed keeps the case they typed it in. */
.page-blog-post .blog-v4-sidebar .blog-module h3.is-custom-case,
.page-blog-post .blog-v4-sidebar .blog-module--custom h3 {
	text-transform: none;
	letter-spacing: 0;
}

.page-blog-post .blog-v4-sidebar .blog-module p {
	font-size: 0.8rem;
	line-height: 1.55;
	color: var(--blog-block-text, #577382);
}

.page-blog-post .blog-v4-sidebar .blog-module .blog-module-btn,
.page-blog-post .blog-v4-sidebar .blog-module .blog-module-link {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: capitalize;
}

.page-blog-post .blog-v4-sidebar .blog-module .blog-module-btn.is-custom-case,
.page-blog-post .blog-v4-sidebar .blog-module .blog-module-link.is-custom-case,
.page-blog-post .blog-v4-sidebar .blog-module--custom .blog-module-btn,
.page-blog-post .blog-v4-sidebar .blog-module--custom .blog-module-link {
	text-transform: none;
}

.page-blog-post .blog-v4-sidebar .blog-module .blog-module-btn {
	background: var(--blog-block-link, #83c53e);
	color: var(--blog-block-link-text, #fff);
}

.page-blog-post .blog-v4-sidebar .blog-module .blog-module-link {
	color: var(--blog-block-link, #7fbf39);
}

.page-blog-post .blog-v4-sidebar .blog-module--newsletter,
.page-blog-post .blog-v4-sidebar .blog-module--compare,
.page-blog-post .blog-v4-sidebar .blog-module--custom {
	background: var(--blog-block-bg, linear-gradient(180deg, #fff 0, #f8fbfe 100%));
}

.page-blog-post .blog-v4-sidebar .blog-module--custom p {
	margin: 0;
}

.page-blog-post .blog-v4-sidebar .blog-module--custom .blog-module-btn {
	margin-top: 18px;
}

.page-blog-post .blog-v4-sidebar .blog-module--custom .blog-module-link {
	margin-top: 16px;
}

.page-blog-post .blog-v4-sidebar .blog-module-btn {
	width: 100%;
	text-align: center;
}

.page-blog-post .blog-v4-results {
	margin-top: 28px;
	background: #fff;
	border: 0;
	border-radius: 0;
	padding: 20px;
	display: grid;
	gap: 12px;
}

.page-blog-post .blog-v4-results h2 {
	margin: 0;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1.1;
	color: #163b53;
}

.page-blog-post .blog-v4-breakdown-module {
	display: grid;
	gap: 10px;
}

.page-blog-post .blog-v4-breakdown-title {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
	color: #2a4b5d;
}

.page-blog-post .blog-v4-breakdown-copy {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: #64808f;
}

/* Product rating breakdown card. Every value inside is read from the selected
   bike's own page, so this stays in step with the product detail view. */
.ebr-breakdown {
	border: 1px solid #dbe8ef;
	border-radius: 14px;
	background: #fff;
	padding: 18px;
	display: grid;
	gap: 16px;
}

.ebr-breakdown-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e3edf3;
}

.ebr-breakdown-id {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.ebr-breakdown-brand-logo {
	width: 44px;
	height: 44px;
	object-fit: contain;
	flex: 0 0 auto;
}

.ebr-breakdown-id-text h3 {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.1;
	color: #173e56;
}

.ebr-breakdown-id-text h3 a {
	color: inherit;
	text-decoration: none;
}

.ebr-breakdown-id-text h3 a:hover,
.ebr-breakdown-id-text h3 a:focus-visible {
	text-decoration: underline;
}

.ebr-breakdown-id-text p {
	margin: 3px 0 0;
	font-size: 0.84rem;
	color: #6a8391;
}

.ebr-breakdown-perf {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

.ebr-breakdown-perf-text {
	text-align: right;
}

.ebr-breakdown-perf-title {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #214e6d;
}

.ebr-breakdown-perf-sub {
	margin: 3px 0 0;
	font-size: 0.76rem;
	color: #7a919f;
}

.ebr-breakdown-perf-score {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 3px;
	color: #214e6d;
}

.ebr-breakdown-perf-score strong {
	font-size: 2.4rem;
	font-weight: 900;
	line-height: 1;
}

.ebr-breakdown-perf-score span {
	font-size: 0.9rem;
	font-weight: 700;
	color: #7a919f;
}

.ebr-breakdown-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 22px;
}

.ebr-breakdown-insights {
	border-left: 1px solid #e3edf3;
	padding-left: 22px;
}

.ebr-breakdown-eyebrow {
	margin: 0 0 12px;
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #214e6d;
}

.ebr-breakdown-value-row {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.ebr-breakdown-ring-wrap {
	display: grid;
	justify-items: center;
	gap: 7px;
	flex: 0 0 auto;
}

.ebr-breakdown-ring {
	position: relative;
	width: 108px;
	height: 108px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: conic-gradient(var(--score-color, #8dc63f) 0 var(--score-progress, 0%), var(--score-track, #e0eaf1) var(--score-progress, 0%) 100%);
}

.ebr-breakdown-ring::before {
	content: '';
	position: absolute;
	inset: 9px;
	border-radius: 50%;
	background: #fff;
}

.ebr-breakdown-ring span {
	position: relative;
	font-size: 1.9rem;
	font-weight: 900;
	line-height: 1;
	color: var(--score-text, #3f5e42);
}

.ebr-breakdown-ring-caption {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 700;
	color: #7a919f;
}

.ebr-breakdown-verdict h4 {
	margin: 0;
	font-size: 1.05rem;
	color: #173e56;
}

.ebr-breakdown-verdict p {
	margin: 5px 0 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: #64808f;
}

.ebr-breakdown-bars {
	margin-top: 16px;
	display: grid;
	gap: 11px;
}

.ebr-breakdown-bar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 5px;
}

.ebr-breakdown-bar-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.8rem;
	font-weight: 700;
	color: #274b61;
}

.ebr-breakdown-bar-label img {
	width: 15px;
	height: 15px;
	object-fit: contain;
}

.ebr-breakdown-bar-value {
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--green);
}

.ebr-breakdown-track {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: #e6eef4;
	overflow: hidden;
}

.ebr-breakdown-track span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--green);
}

.ebr-breakdown-insight-head {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: 900;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #3f7a13;
}

.ebr-breakdown-insight-head.is-avoid {
	margin-top: 30px;
	color: #c0392b;
}

.ebr-breakdown-insight-icon {
	width: 16px;
	height: 16px;
	flex: none;
}

.ebr-breakdown-list {
	margin: 10px 0 0;
	padding: 0 0 0 10px;
	list-style: none;
	display: grid;
	gap: 8px;
	font-size: 0.86rem;
	line-height: 1.45;
	color: #2c4f63;
}

.ebr-breakdown-list li {
	position: relative;
	padding-left: 16px;
}

.ebr-breakdown-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
}

.ebr-breakdown-list.is-avoid {
	color: #5e6f7b;
}

.ebr-breakdown-list.is-avoid li::before {
	top: 0.68em;
	width: 8px;
	height: 2px;
	border-radius: 0;
	background: #c0392b;
}

.ebr-breakdown-tech {
	border-top: 1px solid #e3edf3;
	padding-top: 16px;
}

.ebr-breakdown-tech-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.ebr-breakdown-tech-card {
	border: 1px solid #dde9f0;
	border-radius: 11px;
	padding: 11px;
	background: #fbfdff;
	display: grid;
	align-content: start;
	gap: 5px;
}

.ebr-breakdown-tech-card--safety {
	grid-column: span 2;
}

.ebr-breakdown-tech-head {
	display: flex;
	align-items: center;
	gap: 7px;
}

.ebr-breakdown-tech-head img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.ebr-breakdown-tech-head p {
	margin: 0;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #7a919f;
}

.ebr-breakdown-tech-value {
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.1;
	color: #1a3e56;
}

.ebr-breakdown-tech-sub {
	font-size: 0.72rem;
	color: #6d8592;
}

.ebr-breakdown-safety {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.ebr-breakdown-safety-item + .ebr-breakdown-safety-item {
	border-left: 1px solid #dde9f0;
	padding-left: 10px;
}

.ebr-breakdown-safety-title {
	font-size: 0.92rem;
	font-weight: 800;
	color: #1a3e56;
}

.ebr-breakdown-safety-sub {
	margin-top: 2px;
	font-size: 0.72rem;
	line-height: 1.35;
	color: #6d8592;
}

@media (max-width: 900px) {
	.ebr-breakdown-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ebr-breakdown-insights {
		border-left: 0;
		border-top: 1px solid #e3edf3;
		padding-left: 0;
		padding-top: 16px;
	}

	.ebr-breakdown-tech-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	/* The score has wrapped onto its own row by here, so it stops hugging the
	   title and spans the card instead. */
	.ebr-breakdown-perf {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
	}

	.ebr-breakdown-perf-text {
		text-align: left;
	}

	.ebr-breakdown-value-row {
		justify-content: center;
	}

	.ebr-breakdown-verdict {
		text-align: center;
	}

	.ebr-breakdown-tech-grid,
	.ebr-breakdown-tech-card--safety,
	.ebr-breakdown-safety {
		grid-template-columns: minmax(0, 1fr);
	}

	.ebr-breakdown-tech-card--safety {
		grid-column: auto;
	}

	.ebr-breakdown-safety-item + .ebr-breakdown-safety-item {
		border-left: 0;
		border-top: 1px solid #dde9f0;
		padding-left: 0;
		padding-top: 10px;
	}
}

.page-blog-post .blog-post-richtext--after {
	margin-top: 18px;
}

.page-blog-post .blog-post-richtext .blog-figma-intro {
	border-bottom: 1px solid #e4edf3;
	padding-bottom: 14px;
	margin-bottom: 14px;
}

.page-blog-post .blog-post-richtext .blog-figma-intro p {
	margin: 0;
}

.page-blog-post .blog-post-richtext .blog-figma-intro p + p {
	margin-top: 10px;
}

.page-blog-post .blog-post-richtext .blog-figma-section {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #edf3f7;
}

.page-blog-post .blog-post-richtext .blog-figma-section h2 {
	margin: 0;
	font-size: 1.45rem;
	line-height: 1.18;
	color: #123d58;
}

.page-blog-post .blog-post-richtext .blog-figma-section p {
	margin: 10px 0 0;
}

.page-blog-post .blog-post-richtext > :first-child {
	margin-top: 0;
}

.page-blog-post .blog-post-sidebar {
	display: grid;
	gap: 14px;
	position: sticky;
	top: 96px;
}

.blog-module {
	border: 1px solid #d8e4ec;
	border-radius: 14px;
	background: #fff;
	padding: 16px;
}

.blog-module h3 {
	margin: 0;
	font-size: 1.1rem;
	color: #173f58;
}

.blog-module p {
	margin: 10px 0 0;
	font-size: 0.95rem;
	line-height: 1.52;
	color: #5f7887;
}

.blog-module-btn {
	display: inline-block;
	margin-top: 12px;
	background: #83c53e;
	color: #fff;
	text-decoration: none;
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.blog-module-link {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	color: #7fbf39;
}

.blog-newsletter-form {
	margin-top: 14px;
	display: grid;
	gap: 12px;
}

.blog-newsletter-form input {
	border: 1px solid #cfe0e9;
	border-radius: 999px;
	padding: 10px 12px;
	font-size: 0.8rem;
}

.blog-newsletter-form button {
	margin-top: 4px;
	border: 0;
	border-radius: 999px;
	background: var(--blog-block-link, #83c53e);
	color: var(--blog-block-link-text, #fff);
	padding: 11px 12px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: capitalize;
	cursor: pointer;
}

.blog-newsletter-form button.is-custom-case {
	text-transform: none;
}

.blog-newsletter-note {
	margin: 12px 0 0;
	font-size: 0.6rem;
	line-height: 1.5;
	font-style: italic;
	color: #8ca0ac;
}

.blog-mini-leaderboard {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.blog-mini-leaderboard__meta {
	margin: 8px 0 0;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6e8794;
}

.blog-mini-leaderboard li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: center;
	font-size: 0.9rem;
	color: #274f67;
	padding-bottom: 8px;
	border-bottom: 1px solid #e8eff4;
}

.blog-mini-leaderboard__rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 22px;
	border-radius: 999px;
	background: #ecf4e3;
	color: #4f7f21;
	font-size: 0.72rem;
	font-weight: 800;
}

.blog-mini-leaderboard li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.blog-mini-leaderboard__bike a {
	text-decoration: none;
	font-weight: 700;
	color: #173f58;
}

.blog-mini-leaderboard__score {
	font-weight: 800;
	color: #7fbf39;
}

.blog-featured-bike {
	margin-top: 10px;
	display: grid;
	gap: 8px;
}

.blog-featured-bike img {
	width: 100%;
	border-radius: 10px;
	border: 1px solid #d8e4ec;
	display: block;
}

.blog-featured-bike__name,
.blog-featured-bike__brand,
.blog-featured-bike__score {
	margin: 0;
}

.blog-featured-bike__name a {
	text-decoration: none;
	font-size: 1rem;
	font-weight: 800;
	color: #173f58;
}

.blog-featured-bike__brand {
	font-size: 0.88rem;
	color: #5f7887;
}

.blog-featured-bike__score {
	font-size: 0.88rem;
	font-weight: 800;
	color: #7fbf39;
}

.page-faq .faq-shell {
	max-width: 980px;
	padding: 36px 0 56px;
}

.page-faq .faq-hero {
	margin-bottom: 22px;
}

.page-faq .faq-kicker {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #2f6b91;
}

.page-faq .faq-hero h1 {
	margin: 8px 0 0;
	font-size: clamp(1.9rem, 3.5vw, 2.6rem);
	line-height: 1.1;
	color: #183e56;
}

.page-faq .faq-intro {
	margin: 12px 0 0;
	font-size: 1rem;
	line-height: 1.65;
	color: #5e7787;
	max-width: 74ch;
}

.page-faq .faq-list {
	display: grid;
	gap: 12px;
}

.page-faq .faq-item {
	border: 1px solid #d4e2eb;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(22, 61, 87, 0.05);
	overflow: hidden;
}

.page-faq .faq-item > summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	padding: 16px 44px 16px 18px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.45;
	color: #204861;
}

.page-faq .faq-item > summary::-webkit-details-marker {
	display: none;
}

.page-faq .faq-item > summary::after {
	content: '+';
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
	color: #78b53d;
}

.page-faq .faq-item[open] > summary {
	border-bottom: 1px solid #e1ebf1;
	background: #fbfdff;
}

.page-faq .faq-item[open] > summary::after {
	content: '-';
}

.page-faq .faq-answer {
	padding: 16px 18px 18px;
	font-size: 0.95rem;
	line-height: 1.7;
	color: #405663;
}

.page-faq .faq-answer > :first-child {
	margin-top: 0;
}

.page-faq .faq-answer > :last-child {
	margin-bottom: 0;
}

.page-faq .faq-answer h3,
.page-faq .faq-answer h4 {
	margin: 16px 0 6px;
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 800;
	color: #1f4a63;
}

.page-faq .faq-answer p,
.page-faq .faq-answer ul,
.page-faq .faq-answer ol {
	margin: 10px 0;
}

.page-faq .faq-answer ul,
.page-faq .faq-answer ol {
	padding-left: 20px;
}

.page-faq .faq-methodology-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 10px 0 12px;
}

.page-faq .faq-methodology-card {
	border: 1px solid #d5e4ec;
	border-radius: 12px;
	padding: 12px;
	background: #f8fbfe;
}

.page-faq .faq-methodology-tag {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #2f6b91;
}

.page-faq .faq-methodology-card h4 {
	margin-top: 6px;
	margin-bottom: 4px;
}

.page-faq .faq-methodology-formula {
	margin-top: 8px;
	font-size: 0.92rem;
	color: #3f5561;
}

.page-faq .faq-methodology-formula span {
	color: #6f8592;
}

.page-faq .faq-empty {
	margin: 0;
	padding: 16px 18px;
	border: 1px dashed #c8d9e5;
	border-radius: 12px;
	background: #f9fcff;
	color: #617b8b;
}

.page-faq .faq-pagination {
	margin-top: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.page-faq .faq-page-numbers {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.page-faq .faq-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #c9dbe7;
	border-radius: 999px;
	background: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1;
	color: #2a526a;
	text-decoration: none;
}

.page-faq .faq-page-link:hover {
	border-color: #9cc2d8;
	background: #f4fafe;
}

.page-faq .faq-page-link.is-active {
	border-color: #7fb93f;
	background: #8dc63f;
	color: #183943;
}

.page-sitemap .sitemap-shell {
	padding: 30px 0 56px;
}

.page-sitemap .sitemap-hero h1 {
	margin: 0;
	font-size: clamp(1.8rem, 3.6vw, 2.7rem);
	color: #214e6d;
}

.page-sitemap .sitemap-kicker {
	margin: 0 0 8px;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: #7691a1;
}

.page-sitemap .sitemap-intro {
	margin: 10px 0 0;
	max-width: 70ch;
	font-size: 0.97rem;
	line-height: 1.6;
	color: #3f5968;
}

.page-sitemap .sitemap-groups {
	margin-top: 22px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.page-sitemap .sitemap-column {
	display: grid;
	gap: 14px;
	align-content: start;
}

.page-sitemap .sitemap-group {
	padding: 14px;
	border: 1px solid #d4e2eb;
	border-radius: 12px;
	background: #fff;
}

.page-sitemap .sitemap-group h2 {
	margin: -14px -14px 10px;
	padding: 10px 14px;
	font-size: 1.03rem;
	color: #ffffff;
	background: #214e6d;
	border-radius: 12px 12px 0 0;
}

.page-sitemap .sitemap-group ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.page-sitemap .sitemap-group li {
	display: grid;
	gap: 2px;
	padding-bottom: 8px;
	border-bottom: 1px solid #ecf2f6;
}

.page-sitemap .sitemap-group li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.page-sitemap .sitemap-group a {
	color: #1f506b;
	font-weight: 700;
	text-decoration: none;
}

.page-sitemap .sitemap-group a:hover,
.page-sitemap .sitemap-group a:focus-visible {
	color: #7abf33;
}

.page-sitemap .sitemap-empty {
	margin: 18px 0 0;
	padding: 14px;
	border: 1px dashed #c8d9e5;
	border-radius: 12px;
	background: #f9fcff;
	color: #617b8b;
}

@media (max-width: 1120px) {
	.page-sitemap .sitemap-groups {
		grid-template-columns: 1fr;
	}

	.page-blog-post .blog-post-layout {
		grid-template-columns: 1fr;
	}

	.page-blog-post .blog-post-sidebar {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.page-blog-post .blog-v4-hero {
		grid-template-columns: 1fr;
	}

	.page-blog-post .blog-v4-leaderboard {
		grid-template-columns: 1fr;
	}

	.page-blog-post .blog-v4-leaderboard > .blog-v4-main-col,
	.page-blog-post .blog-v4-leaderboard > .blog-v4-sidebar {
		/* Explicit placement would keep forcing a second column open. */
		grid-column: auto;
		grid-row: auto;
	}

	.page-blog-post .blog-v4-leaderboard > .blog-v4-sidebar {
		/* Single column now, so push the sidebar below every main-content
		   section rather than leaving it stranded mid-article. */
		order: 2;
	}

	.page-blog-post .blog-v4-sidebar-inner {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.page-blog-post .blog-v4-winner-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 980px) {
	.page-blog-index .blog-index-layout {
		grid-template-columns: 1fr;
	}

	.page-blog-index .blog-filters {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(360px, 92vw);
		max-width: 100%;
		z-index: 120;
		overflow-y: auto;
		transform: translateX(-102%);
		transition: transform .22s ease;
		border-radius: 0 14px 14px 0;
	}

	.page-blog-index .blog-filters.is-open {
		transform: translateX(0);
	}

	.page-blog-index .blog-filters__close,
	.page-blog-index .blog-filter-toggle {
		display: inline-flex;
	}
}

@media (max-width: 780px) {
	.page-blog-index .blog-card-grid,
	.page-blog-post .blog-post-sidebar {
		grid-template-columns: 1fr;
	}

	.page-blog-post .blog-v4-hero {
		padding: 16px;
		border-radius: 14px;
	}

	.page-blog-post .blog-v4-compare-grid,
	.page-blog-post .blog-v4-tech-grid,
	.page-blog-post .blog-v4-sidebar-inner {
		grid-template-columns: 1fr;
	}

	.page-blog-post .blog-v4-results {
		padding: 14px;
	}

	.page-blog-post .blog-v4-table th,
	.page-blog-post .blog-v4-table td {
		padding: 9px 6px;
	}

	.page-faq .faq-shell {
		padding: 26px 0 42px;
	}

	.page-faq .faq-item > summary {
		font-size: 0.95rem;
		padding: 14px 40px 14px 14px;
	}

	.page-faq .faq-answer {
		padding: 12px 14px 14px;
		font-size: 0.9rem;
	}

	.page-faq .faq-methodology-cards {
		grid-template-columns: 1fr;
	}

	.page-faq .faq-pagination {
		justify-content: center;
	}
}