/*
 * Comparison Table — side-by-side specs with a verdict bar.
 *
 * The inner grid keeps a min-width so columns stay legible, and this wrapper
 * scrolls horizontally rather than letting the page do it. The article column
 * sets min-width: 0 for the same reason; without it a grid item refuses to
 * shrink below its content and the whole page scrolls sideways instead.
 */

.masthead-comparison-table {
	border: 1px solid var( --mh-color-border, #242424 );
	background: var( --mh-color-paper, #111111 );
	margin: 2.5em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.masthead-ct__header,
.masthead-ct__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr 1fr;
	min-width: 480px;
}

.masthead-ct__header {
	border-bottom: 1px solid var( --mh-color-border, #242424 );
	background: var( --mh-surface-raised, #151515 );
	color: var( --mh-color-heading, #ffffff );
}

.masthead-ct__header-spacer { padding: 0.85em 1em; }

.masthead-ct__name-a,
.masthead-ct__name-b {
	padding: 0.85em 1em;
	font-family: var( --mh-font-display, inherit );
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
	text-align: center;
	border-left: 1px solid var( --mh-color-border, #242424 );
}

.masthead-ct__labels,
.masthead-ct__values-a,
.masthead-ct__values-b {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The three columns are separate lists sitting in a grid, so their rows have no
 * inherent relationship — and because the label column is set smaller than the
 * value columns, each row resolved to a different height and the labels drifted
 * progressively out of line with their values.
 *
 * A row height in rem rather than em is the fix: it resolves identically in
 * every column regardless of that column's own font-size, so the rows line up.
 * Flex centering keeps single- and double-line cells on the same baseline.
 */
.masthead-ct__labels li,
.masthead-ct__values-a li,
.masthead-ct__values-b li {
	display: flex;
	align-items: center;
	min-height: 3.5rem;
	padding: 0.7em 1em;
	border-bottom: 1px solid var( --mh-color-border, #242424 );
	font-size: 0.9375rem;
	line-height: 1.35;
}

.masthead-ct__labels li {
	font-family: var( --mh-font-ui, inherit );
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var( --mh-color-muted, #a3a3a3 );
}

.masthead-ct__values-a li,
.masthead-ct__values-b li {
	justify-content: center;
	text-align: center;
	border-left: 1px solid var( --mh-color-border, #242424 );
	font-variant-numeric: tabular-nums;
}

.masthead-ct__winner {
	margin: 0;
	padding: 0.95em 1em;
	text-align: center;
	font-family: var( --mh-font-ui, inherit );
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	background: var( --mh-surface-raised, #151515 );
	color: var( --mh-color-accent-text, #ec4a22 );
	border-top: 2px solid var( --mh-color-accent, #d92b00 );
	min-width: 480px;
}