/* ============================================================
 * Comparison single — /compare/{slug}/  (BRIEF-5 Phase 4)
 * Dark hero + a side-by-side spec table (sticky row labels,
 * horizontal scroll on narrow screens).
 * ========================================================== */

.cmp-hero {
	background: var(--c-navy-900);
	color: var(--c-ivory);
	padding: var(--s-9) 0 var(--s-8);
}

.cmp-hero .ac-crumb__list {
	margin-bottom: var(--s-6);
}

.cmp-hero__title {
	margin: var(--s-3) 0 0;
	font-size: var(--fs-display);
	max-width: 18ch;
}

.cmp-hero__lede {
	margin: var(--s-5) 0 0;
	max-width: 60ch;
	font-size: var(--fs-h5);
	color: var(--c-silver-dim);
}

/* ---------- Spec table ---------- */
.cmp-table__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cmp-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ff-sans);
	min-width: 32rem;
}

.cmp-table th,
.cmp-table td {
	padding: var(--s-4);
	border-bottom: 1px solid var(--c-rule);
	text-align: left;
	vertical-align: baseline;
}

.cmp-table__rowhead {
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-luxe);
	text-transform: uppercase;
	color: var(--c-silver);
	white-space: nowrap;
	position: sticky;
	left: 0;
	background: var(--c-bg, var(--c-ivory));
}

.cmp-table thead .cmp-table__ac {
	font-family: var(--ff-serif);
	font-size: var(--fs-h5);
	font-weight: var(--fw-regular);
	color: var(--c-ink);
}

.cmp-table__ac a {
	color: var(--c-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--c-rule);
	transition: border-color var(--t-quiet, 280ms ease);
}

.cmp-table__ac a:hover {
	border-bottom-color: var(--c-silver);
}

.cmp-table tbody td {
	font-size: var(--fs-small);
	color: var(--c-ink);
}

.cmp-table__note {
	margin: var(--s-5) 0 0;
	font-style: italic;
	color: var(--c-text-soft);
}

@media (max-width: 640px) {
	.cmp-hero__title { font-size: var(--fs-h1); }
	.cmp-table th,
	.cmp-table td { padding: var(--s-3); }
}