/*
 * Service pages: what every plan includes (VOY-975, spec KB-525 section 05).
 *
 * A sticky title on the left, the inclusions as a two-column checklist on the
 * right. CSS only, no script.
 */

.vy-svc-page .vy-svc-includes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 64px;
	align-items: start;
}
.vy-svc-page .vy-svc-includes__title {
	position: sticky;
	top: 112px;
}
.vy-svc-page .vy-svc-includes__title .vy-svc-h2 { margin-bottom: 0; }

.vy-svc-page .vy-svc-includes__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 40px;
	padding: 0;
	list-style: none;
}
.vy-svc-page .vy-svc-includes__list > li:nth-child(n) {
	position: relative;
	padding: 22px 0 22px 36px;
	border-top: 1px solid var(--border-hair);
	font-size: 16px;
	line-height: 1.55;
	color: var(--fg-2);
}
/* The check: two borders of a rotated box. */
.vy-svc-page .vy-svc-includes__list > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 27px;
	width: 7px;
	height: 13px;
	border-right: 2px solid var(--um-500);
	border-bottom: 2px solid var(--um-500);
	transform: rotate(45deg);
}

@media (max-width: 1023px) {
	.vy-svc-page .vy-svc-includes { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.vy-svc-page .vy-svc-includes__title { position: static; }
}
@media (max-width: 767px) {
	.vy-svc-page .vy-svc-includes__list { grid-template-columns: minmax(0, 1fr); }
	.vy-svc-page .vy-svc-includes__list > li { padding-block: 16px; }
	.vy-svc-page .vy-svc-includes__list > li::before { top: 21px; }
}