/* ==========================================================================
   Comparison
   The "Us vs others" cards. HTML: template-parts/shared/us-vs-others.php
   ========================================================================== */

.vs__grid { position: relative; display: grid; grid-template-columns: 1fr 1.08fr; gap: 56px; align-items: center; max-width: 1060px; margin: 0 auto; }
.vs-card { position: relative; padding: 26px; border-radius: 26px; }
.vs-card--them { background: linear-gradient(165deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); border: 1px solid var(--border); }
.vs-card--us {
	background: radial-gradient(110% 60% at 100% 0%, rgba(124, 58, 237, .35), transparent 60%), linear-gradient(165deg, #1b1048, #0d0828);
	box-shadow: 0 40px 80px -36px rgba(124, 58, 237, .9);
	transform: translateY(-10px);
}
.vs-card--us::before { /* animated gradient border */
	content: "";
	position: absolute;
	inset: 0;
	padding: 1.5px;
	border-radius: inherit;
	background: conic-gradient(from var(--cta-angle, 0deg), #a78bfa, #22d3ee, #34d399, #f472b6, #a78bfa);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: cta-spin 8s linear infinite;
	pointer-events: none;
}
.vs-card__ribbon { position: absolute; top: -14px; right: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(120deg, #f59e0b, #fb7185); color: #1b0b3a; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 10px 24px -10px rgba(245, 158, 11, .9); }
.vs-card__head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.vs-card__avatar { flex-shrink: 0; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--border); color: var(--muted); }
.vs-card__avatar--logo { background: none; border: 0; }
.vs-card__avatar--logo .brand__logo { width: 48px; height: 48px; }
.vs-card__title { margin: 0; font-size: 1.15rem; }
.vs-card--them .vs-card__title { color: #c9c4e0; }
.vs-card__head small { color: var(--muted); font-size: .8rem; }
.vs-card__score { margin-left: auto; padding: 6px 12px; border-radius: 12px; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.vs-card--them .vs-card__score { color: #fbbf24; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .3); }
.vs-card--us .vs-card__score { color: #052e1f; background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 8px 20px -8px rgba(52, 211, 153, .9); }
.vs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vs-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: .94rem; line-height: 1.4; transition: background .3s, transform .3s var(--ease); }
.vs-card--them .vs-row { color: #9c97b8; }
.vs-card--us .vs-row { color: #f1eefc; }
.vs-row__icon { margin-left: auto; flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent); }
.vs-mark { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.vs-mark--yes { background: linear-gradient(135deg, #10b981, #34d399); color: #052e1f; box-shadow: 0 0 0 3px rgba(52, 211, 153, .14); }
.vs-mark--yes .std-icon { stroke-width: 2.8; }
.vs-mark--partial { color: #fbbf24; border: 1px dashed rgba(245, 158, 11, .55); }
.vs-mark--no { color: #f87171; border: 1px solid rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .08); }
/* Hover a feature: highlight the same row in both cards */
.vs__grid:has(.vs-row[data-row="0"]:hover) .vs-row[data-row="0"] { background: rgba(255, 255, 255, .06); transform: translateX(4px); }
.vs__grid:has(.vs-row[data-row="1"]:hover) .vs-row[data-row="1"] { background: rgba(255, 255, 255, .06); transform: translateX(4px); }
.vs__grid:has(.vs-row[data-row="2"]:hover) .vs-row[data-row="2"] { background: rgba(255, 255, 255, .06); transform: translateX(4px); }
.vs__grid:has(.vs-row[data-row="3"]:hover) .vs-row[data-row="3"] { background: rgba(255, 255, 255, .06); transform: translateX(4px); }
.vs__grid:has(.vs-row[data-row="4"]:hover) .vs-row[data-row="4"] { background: rgba(255, 255, 255, .06); transform: translateX(4px); }
.vs__grid:has(.vs-row[data-row="5"]:hover) .vs-row[data-row="5"] { background: rgba(255, 255, 255, .06); transform: translateX(4px); }
.vs__grid:has(.vs-row[data-row="6"]:hover) .vs-row[data-row="6"] { background: rgba(255, 255, 255, .06); transform: translateX(4px); }
.vs__grid:has(.vs-row[data-row="7"]:hover) .vs-row[data-row="7"] { background: rgba(255, 255, 255, .06); transform: translateX(4px); }
.vs__grid:has(.vs-row[data-row="8"]:hover) .vs-row[data-row="8"] { background: rgba(255, 255, 255, .06); transform: translateX(4px); }
.vs__grid:has(.vs-row[data-row="9"]:hover) .vs-row[data-row="9"] { background: rgba(255, 255, 255, .06); transform: translateX(4px); }
.vs-card--us .vs-row:hover { background: color-mix(in srgb, var(--rc) 12%, transparent) !important; }
.vs__badge {
	position: absolute;
	left: calc((100% - 56px) / 2.08 + 28px);
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 64px; height: 64px;
	display: grid; place-items: center;
	border-radius: 50%;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.2rem;
	color: #fff;
	background: var(--grad-btn);
	box-shadow: 0 0 0 8px var(--bg), 0 0 0 9px rgba(167, 139, 250, .4), 0 0 40px rgba(147, 51, 234, .8);
}
.vs__cta { display: flex; justify-content: center; margin-top: 40px; }

@media (max-width: 900px) {
	.vs__grid { grid-template-columns: 1fr; gap: 50px; }
	.vs-card--us { transform: none; order: 3; }
	.vs-card--them { order: 1; }
	.vs__badge { position: relative; left: auto; top: auto; transform: none; order: 2; justify-self: center; margin: -26px 0; }
}

@media (prefers-reduced-motion: reduce) {
	.vs-card--us::before { animation: none; }
}