/*
 * Versus pages: additions to the frontend vs-page component (assets/vendor/v02/main.min.css).
 * Loaded only on /versus/ pages (inc/versus.php); every rule is scoped to body.page-vs.
 * Tokens follow the bundle: ink #1b1b3c, muted #4e4e70, accent #ff4562, border #e5e7eb.
 */

/* Group-IB hero: the live comparison has a lead paragraph under the title. */
body.page-vs .vs-hero__lead {
	margin: -1.5rem 0 2rem;
	max-width: 36rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #4e4e70;
}

/* Index hero has no form column. */
body.page-vs .vs-hero--index .vs-hero__container {
	grid-template-columns: minmax(0, 1fr);
}

/* Index cards. */
body.page-vs .vs-index__card {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}
body.page-vs .vs-index__card:hover .vs-index__more,
body.page-vs .vs-index__card:focus-visible .vs-index__more {
	text-decoration: underline;
}
body.page-vs .vs-index__more {
	margin-top: auto;
	padding-top: 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #ff4562;
}

/* Group-IB capability tables: full / partial / not offered marks with their label. */
body.page-vs .vs-group__title {
	margin: 2.5rem 0 1rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: #1b1b3c;
}
body.page-vs .vs-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.75rem;
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: #4e4e70;
}
body.page-vs .vs-level,
body.page-vs .vs-table td > .vs-level {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding-left: 0;
}
body.page-vs .vs-level .vs-table__mark {
	float: none;
	flex: none;
	margin: 0;
}
body.page-vs .vs-level > span {
	display: inline;
	padding: 0;
}
body.page-vs .vs-table--levels .vs-table__feature {
	width: 46%;
	font-weight: 500;
}
body.page-vs .vs-table--levels .vs-table__us,
body.page-vs .vs-table--levels .vs-table__them {
	width: 27%;
}
body.page-vs .vs-table--levels .vs-table__feature strong {
	font-weight: 700;
}
body.page-vs .vs-table--levels .vs-table__feature ul {
	margin: 0.5rem 0 0;
	padding-left: 1.125rem;
	font-weight: 400;
	color: #4e4e70;
}
@media (max-width: 767px) {
	body.page-vs .vs-table--levels td::before {
		margin-left: 0;
	}
}

/* Contrast: the vendor pink (#FF4562) is 3.2:1 on white/gray-50; same hue at AA (as the press dates). */
body.page-vs .vs-case__label,
body.page-vs .vs-index__more {
	color: #c81e3e;
}
body.page-vs .vs-demo .btn--primary {
	background-color: #c81e3e;
	border-color: #c81e3e;
}
