.ranking-tabs {
	display: flex;
	gap: .55rem;
	margin: 0 0 1.2rem;
	overflow-x: auto;
	padding-bottom: .2rem;
}

.ranking-tabs a {
	flex: 0 0 auto;
	padding: .6rem .8rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--navy-950);
	font-size: .86rem;
	font-weight: 750;
	text-decoration: none;
}

.ranking-tabs a.is-active {
	border-color: var(--teal-700);
	background: var(--teal-100);
	color: var(--teal-700);
}

.ranking-filter { margin-top: 0; }
.ranking-filter .field small { color: var(--muted); font-weight: 500; }

.ranking-offer-card { position: relative; align-items: start; }
.ranking-offer-card .offer-main { align-self: center; }
.ranking-offer-card .offer-metric,
.ranking-offer-card .offer-action { align-self: center; }
.ranking-offer-card .offer-main h3 { font-size: 1.18rem; }

.ranking-details {
	grid-column: 2 / -1;
	padding-top: .8rem;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: .8rem;
}

.ranking-details summary { color: var(--navy-950); cursor: pointer; font-weight: 750; }
.ranking-details p { margin: .55rem 0 0; }

.ranking-method {
	max-width: 820px;
	margin: clamp(3rem, 7vw, 6rem) auto 0;
	padding: clamp(1.4rem, 4vw, 2.2rem);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-soft);
}

.ranking-method h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.ranking-method p:last-child { margin-bottom: 0; color: var(--muted); }

.ranking-hub { padding-block: clamp(3rem, 7vw, 6rem); }
.ranking-hub h1 { max-width: 14ch; }

.ranking-directory {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2.5rem;
}

.ranking-directory .content-card {
	display: grid;
	gap: .35rem;
	min-height: 130px;
	align-content: center;
	text-decoration: none;
}

.ranking-directory strong { color: var(--navy-950); font-size: 1.2rem; }
.ranking-directory span { color: var(--muted); }

.ranking-related {
	width: min(calc(100% - 2rem), var(--container));
	margin: 2rem auto 0;
	padding: 1rem 1.15rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface-soft);
}

@media (max-width: 900px) {
	.ranking-offer-card { grid-template-columns: 38px minmax(0, 1fr) minmax(150px, .45fr); }
	.ranking-offer-card .offer-metric,
	.ranking-offer-card .offer-action { grid-column: 2 / -1; }
	.ranking-details { grid-column: 2 / -1; }
}

@media (max-width: 600px) {
	.ranking-directory { grid-template-columns: 1fr; }
	.ranking-offer-card { grid-template-columns: 34px minmax(0, 1fr); }
	.ranking-offer-card .offer-metric,
	.ranking-offer-card .offer-action,
	.ranking-details { grid-column: 1 / -1; padding-left: 2.9rem; }
}