/*
 * Service pages: what it fixes (VOY-975, spec KB-525 section 03).
 *
 * A pull quote (core/quote) with the problem paragraphs beside it, then a
 * comparison table (core/table): the usual approach against the practice.
 * Hovering a line strikes through the usual side; the practice side carries
 * a 500 border. CSS only, no script.
 *
 * Mobile: each line becomes the usual text struck through above a card.
 */

.vy-svc-page .vy-svc-fixes__lead {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 64px;
	margin-bottom: 72px;
}

.vy-svc-page .vy-svc-fixes__quote {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
}
.vy-svc-page .vy-svc-fixes__quote p {
	font-family: var(--font-display);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-fixes__quote::before {
	content: "\201C";
	display: block;
	height: 0.5em;
	font-family: var(--font-display);
	font-size: 96px;
	line-height: 1;
	color: var(--um-500);
}

.vy-svc-page .vy-svc-fixes__body { display: grid; gap: 20px; align-content: start; }

/* ---- The comparison ---------------------------------------------------------------- */

.vy-svc-page .vy-svc-compare table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}
.vy-svc-page .vy-svc-compare :is(th, td) {
	padding: 22px 28px;
	border: 0;
	border-top: 1px solid var(--border-hair);
	text-align: left;
	vertical-align: top;
	font-size: 17px;
	line-height: 1.5;
}
.vy-svc-page .vy-svc-compare thead :is(th, td) {
	padding-block: 0 14px;
	border-top: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-4);
}
.vy-svc-page .vy-svc-compare thead th:last-child { color: var(--um-500); }

.vy-svc-page .vy-svc-compare td:first-child {
	color: var(--fg-3);
	text-decoration: line-through;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	transition: color 220ms var(--svc-ease), text-decoration-color 220ms var(--svc-ease);
}
.vy-svc-page .vy-svc-compare td:last-child {
	border-inline: 1px solid var(--um-500);
	background: color-mix(in oklab, var(--um-500) 6%, transparent);
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-compare tbody tr:first-child td:last-child { border-top-color: var(--um-500); }
.vy-svc-page .vy-svc-compare tbody tr:last-child td:last-child { border-bottom: 1px solid var(--um-500); }

.vy-svc-page .vy-svc-compare tbody tr:hover td:first-child {
	color: var(--fg-4);
	text-decoration-color: var(--um-500);
}

@media (max-width: 1023px) {
	.vy-svc-page .vy-svc-fixes__lead { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 48px; }
	.vy-svc-page .vy-svc-fixes__quote p { font-size: 30px; }
}

@media (max-width: 767px) {
	.vy-svc-page .vy-svc-compare thead { display: none; }
	.vy-svc-page .vy-svc-compare :is(table, tbody, tr, td) { display: block; width: auto; }
	.vy-svc-page .vy-svc-compare tr { margin-bottom: 16px; }
	.vy-svc-page .vy-svc-compare td { padding: 0; border: 0; }
	.vy-svc-page .vy-svc-compare td:first-child {
		margin-bottom: 8px;
		font-size: 15px;
		text-decoration-color: var(--fg-4);
	}
	.vy-svc-page .vy-svc-compare td:last-child,
	.vy-svc-page .vy-svc-compare tbody tr:first-child td:last-child,
	.vy-svc-page .vy-svc-compare tbody tr:last-child td:last-child {
		padding: 16px 18px;
		border: 1px solid var(--um-500);
		border-radius: 6px;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vy-svc-page .vy-svc-compare td:first-child { transition: none; }
}