/*
 * AH Compare: one white table card, plan heads with price and button, checks and dashes, the row
 * names kept in view while the table scrolls sideways on phones.
 */

.ah-cmp { display: grid; gap: 14px; }
.ah-cmp .ah-cmp__scroll {
	overflow-x: auto;
	border: 1px solid var(--ah-card-line);
	border-radius: var(--ah-r-card);
	background: var(--ah-card);
	box-shadow: var(--ah-shadow);
	scrollbar-width: thin;
}
.ah-cmp .ah-cmp__scroll:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 3px; }
.ah-cmp .ah-cmp__t { width: 100%; min-width: calc(200px + var(--n, 3) * 190px); margin: 0; border: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ah-cmp .ah-cmp__t th,
.ah-cmp .ah-cmp__t td {
	padding: 14px 16px;
	border: 0;
	border-block-end: 1px solid var(--ah-card-line);
	background: transparent;
	color: var(--ah-ink);
	font-family: var(--ah-f-body);
	font-size: .92rem;
	line-height: 1.6;
	text-align: center;
	vertical-align: middle;
}
.ah-cmp .ah-cmp__t tbody th {
	position: sticky;
	inset-inline-start: 0;
	z-index: 1;
	width: 200px;
	background: var(--ah-card);
	color: var(--ah-navy);
	font-weight: 700;
	text-align: start;
}
.ah-cmp .ah-cmp__t tbody tr:nth-child(even) td,
.ah-cmp .ah-cmp__t tbody tr:nth-child(even) th { background: color-mix(in srgb, var(--ah-sand) 45%, #fff); }
.ah-cmp .ah-cmp__t tbody tr:last-child th,
.ah-cmp .ah-cmp__t tbody tr:last-child td { border-block-end: 0; }
.ah-cmp .ah-cmp__corner { position: sticky; inset-inline-start: 0; z-index: 1; width: 200px; background: var(--ah-card) !important; }
.ah-cmp .ah-cmp__head.ah-cmp__head { padding: 22px 16px 18px; border-block-end: 2px solid var(--ah-tint-line); vertical-align: bottom; }
.ah-cmp .ah-cmp__head > span { display: block; }
.ah-cmp .ah-cmp__name { color: var(--ah-navy); font-family: var(--ah-f-display); font-size: 1.08rem; font-weight: 700; line-height: 1.4; }
.ah-cmp .ah-cmp__who { margin-block-start: 4px; color: var(--ah-muted); font-size: .82rem; font-weight: 500; }
.ah-cmp .ah-cmp__price { margin-block-start: 12px; color: var(--ah-navy); font-family: var(--ah-f-display); font-size: 1.4rem; font-weight: 800; line-height: 1.2; }
.ah-cmp .ah-cmp__price .ah-cur { font-size: .9rem; }
.ah-cmp .ah-cmp__per { margin-block-start: 2px; color: var(--ah-ink-gold); font-size: .82rem; font-weight: 700; }
.ah-cmp .ah-cmp__total { margin-block-start: 2px; color: var(--ah-muted); font-size: .8rem; font-weight: 500; }
.ah-cmp .ah-cmp__go.ah-btn { margin-block-start: 12px; padding: 9px 16px; font-size: .88rem; }
.ah-cmp .ah-cmp__yes { fill: color-mix(in srgb, var(--ah-gold) 22%, #fff); stroke: var(--ah-ink-gold); vertical-align: middle; }
.ah-cmp .ah-cmp__yes path { stroke: var(--ah-ink-gold); }
.ah-cmp .ah-cmp__yes circle { stroke: none; }
.ah-cmp .ah-cmp__no { color: var(--ah-soft); }
.ah-cmp .ah-cmp__note { margin: 0; color: var(--ah-muted); font-size: .9rem; line-height: 1.8; text-align: center; }

@media (max-width: 767px) {
	.ah-cmp .ah-cmp__t { min-width: calc(130px + var(--n, 3) * 168px); }
	.ah-cmp .ah-cmp__t tbody th,
	.ah-cmp .ah-cmp__corner { width: 130px; }
	.ah-cmp .ah-cmp__t th,
	.ah-cmp .ah-cmp__t td { padding: 12px 10px; font-size: .86rem; }
	.ah-cmp .ah-cmp__note { text-align: start; }
}