.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; border: 1px solid var(--line, rgba(255, 255, 255, .13)); }
.cmp th, .cmp td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--line, rgba(255, 255, 255, .13)); font-size: .96rem; }
.cmp thead th {
	font-family: var(--wp--preset--font-family--display);
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mute);
	font-weight: 400;
	background: var(--wp--preset--color--panel);
}
.cmp tbody tr { transition: background .35s; }
.cmp .plan { font-family: var(--wp--preset--font-family--display); font-size: 1.2rem; color: var(--wp--preset--color--white); }
.cmp .amt { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; color: var(--wp--preset--color--ice); white-space: nowrap; }
.cmp .note { color: var(--wp--preset--color--mute); font-size: .88rem; }
.cmp tr.grp td {
	background: var(--wp--preset--color--panel);
	font-family: var(--wp--preset--font-family--display);
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ice);
}

@media (hover: hover) and (pointer: fine) {
	.cmp tbody tr:hover { background: var(--ice-tint, rgba(201, 230, 240, .09)); }
}

@media (max-width: 900px) {
	.cmp th, .cmp td { padding: 14px 14px; font-size: .9rem; }
}