/**
 * Alternatives — the comparison hub at `/alternatives/`.
 *
 * Ported from the Claude Design artboard `Alternatives.dc.html`. Only what
 * that artboard does and the shared layer does not; grounds, heads, buttons,
 * cards, grids and the brand rail come from `product.css` behind the
 * `zp-product` handle.
 *
 * Three compositions are this page's own: the hero's stat rule, the comparison
 * cards with their gradient top edge, and the review cards with their clamp.
 *
 * The three head-to-head child pages do NOT depend on this stylesheet. What
 * they share with each other — and with nothing here — lives in
 * `comparison.css` behind the `zp-comparison` handle; see its header. The one
 * thing this page and those three do share is the review card, which is why
 * `zp-alternatives` sits on `zp-comparison` too.
 */

/* ==========================================================================
   §1 HERO
   ========================================================================== */

.zpv-open .zpx-wrap { padding:112px 48px 64px; }
.zpv-open .zpx-pill { display:flex; margin-inline:auto; width:max-content; }
.zpv-open__head { margin-bottom:34px; }
.zpv-open__head .zpx-h2 { font-size:clamp(38px,4.2vw,62px); letter-spacing:-0.028em; line-height:1.02; }
.zpv-open__head .zpx-lede { max-width:620px; margin-inline:auto; font-size:20px; }

.zpv-open__cta { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }

.zpv-stats {
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
	margin:56px 0 0; padding-top:44px;
	border-top:1px solid rgba(255,255,255,.14);
}
/* Figure over label with `dt` first in the DOM — as on About and Contact. */
.zpv-stat { display:flex; flex-direction:column-reverse; gap:10px; text-align:center; padding:0 16px; }
.zpv-stats .zpv-stat + .zpv-stat { border-left:1px solid rgba(255,255,255,.14); }
.zpv-stat__value {
	margin:0; font-size:clamp(32px,3.4vw,46px); font-weight:900;
	letter-spacing:-0.028em; line-height:1; color:var(--zip-yellow);
}
.zpv-stat__label {
	font-size:12px; font-weight:700; line-height:1.4;
	letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6);
}

/* ==========================================================================
   §2 RAIL
   Tighter than the same band on the four pages that open with it: here it
   divides the hero from the card grid rather than standing on its own.
   ========================================================================== */

.zpv-rail .zpx-rail-band { padding-block:44px clamp(28px,3vh,44px); }
.zpv-rail .zpx-rail__track { padding-bottom:0; }

/* ==========================================================================
   §3 THE COMPARISON INDEX
   ========================================================================== */

.zpv-index .zpx-wrap { padding-block:88px 96px; max-width:1240px; }
.zpv-index .zpx-head { margin-bottom:32px; }
.zpv-index__grid { gap:24px; }

.zpv-card {
	position:relative; overflow:hidden;
	display:flex; flex-direction:column;
	padding:28px; border-radius:18px;
	color:var(--ink-900); box-shadow:var(--sh-2);
}
.zpv-card:hover { color:var(--ink-900); border-color:var(--ink-300); }
.zpv-card__bar { position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-ocu); }
.zpv-card__h { margin:8px 0 0; font-size:26px; font-weight:800; line-height:1.1; letter-spacing:-0.02em; }
.zpv-card__blurb { margin:12px 0 0; font-size:16px; line-height:1.6; color:var(--ink-600); }

/* The card is the link, so its call to action is a span styled as a button
   rather than a nested `<a>` — which would be invalid inside one. */
/* `margin-top:auto` pins the button to the bottom so a short blurb and a long
   one still line their buttons up across the row; the 28px is the artboard's
   minimum gap above it. */
.zpv-card__cta {
	margin-top:auto; align-self:flex-start;
	display:inline-block; padding:14px 24px; border-radius:10px;
	background:var(--grad-ocu); color:#fff;
	font-size:12px; font-weight:800; letter-spacing:var(--ls-button); text-transform:uppercase;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(240,48,90,.22);
}
.zpv-card__blurb { margin-bottom:28px; }

/* ==========================================================================
   §4 REVIEWS
   The card itself is on the shared layer — the three head-to-head pages
   render the same one. Only the band around it is this page's.
   ========================================================================== */

.zpv-reviews .zpx-wrap { padding-block:88px; max-width:1240px; }
.zpv-reviews .zpx-head { margin-bottom:40px; }
.zpv-reviews__grid { gap:22px; align-items:start; max-width:1068px; margin-inline:auto; }

/* ==========================================================================
   §5 CLOSING BAND
   ========================================================================== */

.zpv-close .zpx-wrap { padding-block:96px; text-align:center; }
.zpv-close__logo { height:34px; width:auto; margin:0 auto 28px; display:block; }
.zpv-close__badge {
	display:inline-block; margin:0 0 24px;
	padding:8px 14px; border-radius:var(--r-pill);
	background:rgba(255,215,72,.10); border:1px solid rgba(255,215,72,.28);
	font-size:11px; font-weight:700; letter-spacing:var(--ls-eyebrow);
	text-transform:uppercase; color:var(--zip-yellow);
}
.zpv-close__cta { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:36px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:760px) {
	.zpv-open .zpx-wrap { padding:96px 20px 48px; }
	.zpv-index .zpx-wrap,
	.zpv-reviews .zpx-wrap,
	.zpv-close .zpx-wrap { padding-block:64px; }

	.zpv-stats { grid-template-columns:1fr; margin-top:40px; padding-top:32px; }
	.zpv-stat { text-align:left; padding:0; }
	.zpv-stats .zpv-stat + .zpv-stat {
		border-left:0; border-top:1px solid rgba(255,255,255,.14);
		margin-top:24px; padding-top:24px;
	}
	.zpv-open__cta .zpx-btn { flex:1 1 100%; }
}