/**
 * pricing.css — BracketSpot pricing page components (Vectorheart, brand-locked)
 *
 * Page-specific styling for the JS-driven pricing UI: billing toggle, the
 * "progression bracket" tier cards (Free → Starter → Pro★ → Enterprise),
 * "all plans include" tiles, the comparison bracket-grid, and the FAQ tiles.
 * Shared chrome (nav, footer, buttons, sections, eyebrows, reveal) lives in
 * marketing.css, which this file's tokens (--vh-*) come from.
 *
 * Rewritten 2026-06-06 (bracket-forward redesign): the previous file was a
 * ~600-line [data-theme="neon"] cyberpunk stylesheet (dead — public pages are
 * vector-locked) plus a thin [data-theme="vector"] !important shim. Both are
 * retired; the neon block + cyberpunk/vectorheart @imports are gone.
 *
 * Design doc: docs/plans/2026-06-06-marketing-bracket-forward-redesign-design.md
 */

/* ==========================================================================
   1. Billing toggle
   ========================================================================== */
.mkt-billing { display: flex; justify-content: center; margin: 0 auto 1rem; }
.mkt-billing__group {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem;
	background: var(--vh-surface);
	border: 1px solid var(--vh-line);
	border-radius: 3px;
}
.mkt-billing__opt {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--vh-mono);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vh-ink-3);
	background: transparent;
	border: 0;
	border-radius: 2px;
	padding: 0.55rem 1rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.mkt-billing__opt:hover { color: var(--vh-ink); }
.mkt-billing__opt.active { background: var(--vh-magenta); color: #0A0A0A; }
.mkt-billing__free {
	font-family: var(--vh-mono);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--vh-yellow);
	border: 1px solid currentColor;
	border-radius: 2px;
	padding: 0.05rem 0.35rem;
	letter-spacing: 0.04em;
	text-transform: none;
}
.mkt-billing__opt.active .mkt-billing__free { color: #0A0A0A; border-color: #0A0A0A; }

/* ==========================================================================
   2. Progression bracket — tier cards
   ========================================================================== */
.mkt-tiers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	align-items: stretch; /* all cards match the tallest (Enterprise) — equal height */
}
@media (max-width: 980px) { .mkt-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mkt-tiers { grid-template-columns: 1fr; } }

.mkt-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--vh-surface);
	border: 1px solid var(--vh-line);
	border-radius: 4px;
	padding: 1.5rem;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.mkt-tier:hover { border-color: var(--vh-magenta); }

/* Pro = the champion. Distinguished by the magenta border + "Most Popular" badge
   only — NOT a vertical offset. align-items:stretch makes every tier match the
   tallest (Enterprise); a translateY lift would shift Pro's bottom edge up and read
   as a shorter card, so the card sits flush and bottom-aligned with its siblings. */
.mkt-tier.is-popular {
	border: 2px solid var(--vh-magenta);
	box-shadow: 0 0 0 1px rgba(255, 0, 102, 0.15);
}

.mkt-tier__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--vh-magenta);
	color: #0A0A0A;
	font-family: var(--vh-mono);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.2rem 0.6rem;
	border-radius: 2px;
	white-space: nowrap;
}

.mkt-tier__name {
	font-family: var(--vh-display);
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--vh-ink);
	margin: 0.25rem 0 0.3rem;
}
.mkt-tier__desc { color: var(--vh-ink-3); font-size: 0.85rem; line-height: 1.5; margin: 0 0 1.1rem; min-height: 2.5em; }

.mkt-tier__price { display: flex; align-items: baseline; gap: 0.3rem; }
.mkt-tier__amount { font-family: var(--vh-display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--vh-ink); }
.mkt-tier__period { color: var(--vh-ink-3); font-size: 0.9rem; }
.mkt-tier__annual { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--vh-ink-3); }
.mkt-tier__savings {
	display: inline-block;
	margin-top: 0.5rem;
	font-family: var(--vh-mono);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--vh-yellow);
	border: 1px solid currentColor;
	border-radius: 2px;
	padding: 0.1rem 0.4rem;
}

.mkt-tier__features { list-style: none; margin: 1.3rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.mkt-tier__feat { display: flex; align-items: flex-start; gap: 0.55rem; color: var(--vh-ink-2); font-size: 0.9rem; line-height: 1.45; }
.mkt-tier__feat.is-note { color: var(--vh-ink-3); font-size: 0.82rem; }
.mkt-feat-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--vh-magenta); }
.mkt-tier__feat.is-note .mkt-feat-icon { color: var(--vh-ink-3); }

/* CTA at the foot of each card uses marketing.css .mkt-btn; current-plan lock: */
.mkt-tier .mkt-btn.is-current {
	background: var(--vh-surface-2);
	color: var(--vh-ink-3);
	border-color: var(--vh-line);
	cursor: default;
	pointer-events: none;
}

/* ==========================================================================
   3. All plans include
   ========================================================================== */
.mkt-include { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
@media (max-width: 900px) { .mkt-include { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mkt-include { grid-template-columns: 1fr; } }
.mkt-include__tile {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--vh-surface);
	border: 1px solid var(--vh-hairline);
	border-radius: 3px;
	padding: 0.9rem 1rem;
	font-size: 0.86rem;
	color: var(--vh-ink-2);
}
.mkt-include__tile svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--vh-magenta); }

/* ==========================================================================
   4. Comparison bracket-grid
   ========================================================================== */
.mkt-compare__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	background: transparent;
	border: 1px solid var(--vh-line);
	border-radius: 3px;
	color: var(--vh-ink-2);
	font-family: var(--vh-mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.85rem 1rem;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.mkt-compare__toggle:hover { color: var(--vh-ink); border-color: var(--vh-magenta); }
.mkt-compare__toggle svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.mkt-compare__toggle svg.is-open { transform: rotate(180deg); }

.mkt-compare__wrap { margin-top: 1rem; overflow-x: auto; }
.mkt-compare__wrap[hidden] { display: none; }
.mkt-compare {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.86rem;
	min-width: 640px;
}
.mkt-compare th, .mkt-compare td { padding: 0.7rem 0.9rem; text-align: center; border-bottom: 1px solid var(--vh-hairline); }
.mkt-compare thead th { font-family: var(--vh-display); font-weight: 600; color: var(--vh-ink); border-bottom: 1px solid var(--vh-line); }
.mkt-compare th.mkt-compare__feat, .mkt-compare td.mkt-compare__feat { text-align: left; color: var(--vh-ink-2); }
.mkt-compare__head--pro { color: var(--vh-magenta); }
.mkt-compare__cat td {
	font-family: var(--vh-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vh-magenta);
	text-align: left;
	background: var(--vh-surface);
	border-bottom: 1px solid var(--vh-line);
}
/* Pro column tint across the grid */
.mkt-compare th:nth-child(4), .mkt-compare td:nth-child(4) { background: rgba(255, 0, 102, 0.05); }
.mkt-compare__cat td:nth-child(1) { background: var(--vh-surface); }
.mkt-compare .mkt-yes { color: var(--vh-magenta); font-weight: 700; }
.mkt-compare .mkt-no { color: var(--vh-ink-3); }
.mkt-compare__note { display: block; font-size: 0.72rem; color: var(--vh-ink-3); }

/* ==========================================================================
   5. FAQ tiles
   ========================================================================== */
.mkt-faq { display: flex; flex-direction: column; gap: 0.75rem; max-width: 760px; margin: 0 auto; }
.mkt-faq__item {
	background: var(--vh-surface);
	border: 1px solid var(--vh-hairline);
	border-radius: 4px;
	padding: 1.25rem 1.4rem;
	transition: border-color 0.15s ease;
}
.mkt-faq__item:hover { border-color: var(--vh-line); }
.mkt-faq__q {
	display: flex;
	gap: 0.6rem;
	font-family: var(--vh-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--vh-ink);
	margin: 0 0 0.5rem;
}
.mkt-faq__q::before { content: '>'; font-family: var(--vh-mono); color: var(--vh-magenta); flex-shrink: 0; }
.mkt-faq__a { color: var(--vh-ink-3); font-size: 0.92rem; line-height: 1.6; margin: 0; padding-left: 1.2rem; }

/* ==========================================================================
   6. Reduced motion (pricing-specific; marketing.css covers shared chrome)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	/* Kill the animated transitions; keep the Pro card's static elevation/border. */
	.mkt-compare__toggle svg { transition: none; }
	.mkt-tier { transition: none; }
}