/**
 * marketing.css — BracketSpot public marketing chrome (Vectorheart, brand-locked)
 *
 * Shared design system for the public landing (landing.html) and pricing
 * (pricing.html) pages. Concept: "Bracket-Forward" — the bracket is the spine of
 * the page; sections hang off nodes (○ undecided, ● decided, one pulsing ● live)
 * and reveal round-by-round as you scroll toward a "grand final" CTA.
 *
 * Vectorheart is brand-locked for public surfaces (STYLE_GUIDE §20): near-black
 * surfaces, signal-magenta accent, cyan secondary, Oswald display / Inter body /
 * Space Mono telemetry labels. This file is self-sufficient (its own tokens) so it
 * doesn't depend on the 7-theme machinery in style.css. Pages still load
 * tailwind.css for colorless layout utilities; all brand color/type lives here.
 *
 * Pairs with: public-nav.js (emits .mkt-nav* classes), bracket-reveal.js (toggles
 * .is-revealed on [data-reveal]). Pricing-card component styling lives in pricing.css.
 *
 * Design doc: docs/plans/2026-06-06-marketing-bracket-forward-redesign-design.md
 */

/* ==========================================================================
   0. Tokens
   ========================================================================== */
:root {
	--vh-bg:        #0A0A0A;   /* page surface */
	--vh-surface:   #141414;   /* cards */
	--vh-surface-2: #1A1A1A;   /* nested / elevated */
	--vh-line:      #242424;   /* default border */
	--vh-hairline:  #1C1C1C;   /* faint rule */

	--vh-magenta:   #FF0066;   /* signal accent */
	--vh-magenta-h: #CC0052;   /* accent hover */
	--vh-cyan:      #00E5FF;   /* secondary accent */
	--vh-yellow:    #EED202;   /* tertiary (savings) */

	--vh-ink:    #FAFAFA;      /* primary text */
	--vh-ink-2:  #C7C7C7;      /* secondary text */
	--vh-ink-3:  #8C8C8C;      /* muted text */

	--vh-display: 'Oswald', 'Inter', system-ui, sans-serif;
	--vh-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--vh-mono:    'Space Mono', 'JetBrains Mono', 'Courier New', monospace;

	--vh-maxw: 1180px;
}

/* ==========================================================================
   1. Base
   ========================================================================== */
body.mkt-body {
	background-color: var(--vh-bg);
	color: var(--vh-ink);
	font-family: var(--vh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	margin: 0;
	min-height: 100vh;
}

.mkt-body h1, .mkt-body h2, .mkt-body h3 { font-family: var(--vh-display); }

.mkt-shell { max-width: var(--vh-maxw); margin: 0 auto; padding: 0 1.5rem; width: 100%; box-sizing: border-box; }

.mkt-body a { color: inherit; }

/* Skip link (defined here so pages don't depend on style.css) */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--vh-magenta);
	color: #0A0A0A;
	padding: 0.6rem 1rem;
	font-family: var(--vh-mono);
	font-size: 0.8rem;
	text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Focus ring — magenta, brand-locked */
.mkt-body :focus-visible {
	outline: 2px solid var(--vh-magenta);
	outline-offset: 3px;
	border-radius: 1px;
}

/* ==========================================================================
   2. Telemetry labels + nodes (the bracket "spine")
   ========================================================================== */
.mkt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--vh-mono);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--vh-ink-3);
}

/* Node dot — ○ undecided / ● decided / pulsing ● live */
.mkt-node {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1.5px solid var(--vh-ink-3);
	background: transparent;
	flex-shrink: 0;
}
.mkt-node--decided { background: var(--vh-ink-2); border-color: var(--vh-ink-2); }
.mkt-node--live {
	background: var(--vh-magenta);
	border-color: var(--vh-magenta);
	box-shadow: 0 0 0 0 rgba(255, 0, 102, 0.55);
	animation: mkt-pulse 2s ease-out infinite;
}
@keyframes mkt-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 0, 102, 0.5); }
	70%  { box-shadow: 0 0 0 9px rgba(255, 0, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 0, 102, 0); }
}

/* Section scaffolding — each section reads as a "round" off the spine */
.mkt-section { position: relative; padding: 4.5rem 0; }
.mkt-section + .mkt-section { border-top: 1px solid var(--vh-hairline); }
.mkt-section__head { margin-bottom: 2.5rem; }
.mkt-section__title {
	font-size: clamp(1.6rem, 3.4vw, 2.3rem);
	font-weight: 600;
	line-height: 1.1;
	margin: 0.9rem 0 0;
	color: var(--vh-ink);
}
.mkt-section__sub {
	margin: 0.85rem 0 0;
	color: var(--vh-ink-2);
	font-size: 1.02rem;
	max-width: 46ch;
	line-height: 1.6;
}

/* ==========================================================================
   3. Typography helpers
   ========================================================================== */
.mkt-display {
	font-family: var(--vh-display);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: var(--vh-ink);
	margin: 0;
}
.mkt-lead { color: var(--vh-ink-2); line-height: 1.65; font-size: 1.12rem; }
.mkt-muted { color: var(--vh-ink-3); }
.mkt-accent { color: var(--vh-magenta); }
.mkt-mono { font-family: var(--vh-mono); }

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.mkt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--vh-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	padding: 0.9rem 1.5rem;
	border-radius: 2px;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
	white-space: nowrap;
}
.mkt-btn:active { transform: translateY(1px); }

.mkt-btn--primary { background: var(--vh-magenta); color: #0A0A0A; border-color: var(--vh-magenta); }
.mkt-btn--primary:hover { background: var(--vh-magenta-h); border-color: var(--vh-magenta-h); }

.mkt-btn--ghost { background: transparent; color: var(--vh-ink); border-color: var(--vh-line); }
.mkt-btn--ghost:hover { border-color: var(--vh-magenta); color: var(--vh-ink); }

.mkt-btn--sm { padding: 0.55rem 1rem; font-size: 0.9rem; }
.mkt-btn--block { width: 100%; }

/* ==========================================================================
   5. Navigation (built by public-nav.js)
   ========================================================================== */
.mkt-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 10, 10, 0.86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--vh-hairline);
}
.mkt-nav__inner {
	max-width: var(--vh-maxw);
	margin: 0 auto;
	padding: 0.85rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.mkt-nav__brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.mkt-nav__logo {
	width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--vh-magenta);
	color: #0A0A0A;
	border-radius: 3px;
}
.mkt-nav__logo svg { width: 18px; height: 18px; }
.mkt-nav__wordmark {
	font-family: var(--vh-display);
	font-weight: 600;
	font-size: 1.18rem;
	letter-spacing: 0.01em;
	color: var(--vh-ink);
}
.mkt-nav__links { display: flex; align-items: center; gap: 1.75rem; }
.mkt-nav__link {
	font-size: 0.95rem;
	color: var(--vh-ink-2);
	text-decoration: none;
	transition: color 0.15s ease;
}
.mkt-nav__link:hover { color: var(--vh-ink); }
.mkt-nav__link.is-active { color: var(--vh-ink); }
.mkt-nav__toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--vh-line);
	border-radius: 2px;
	color: var(--vh-ink);
	padding: 0.4rem;
	cursor: pointer;
}
.mkt-nav__toggle svg { width: 22px; height: 22px; display: block; }
.mkt-nav__mobile {
	display: none;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.5rem 1.5rem 1.25rem;
	border-top: 1px solid var(--vh-hairline);
}
.mkt-nav__mobile.is-open { display: flex; }
.mkt-nav__mobile a { padding: 0.65rem 0; color: var(--vh-ink-2); text-decoration: none; }
.mkt-nav__mobile a:hover { color: var(--vh-ink); }
.mkt-nav__mobile a.is-active { color: var(--vh-ink); }
.mkt-nav__mobile .mkt-btn { margin-top: 0.5rem; }

@media (max-width: 768px) {
	.mkt-nav__links { display: none; }
	.mkt-nav__toggle { display: inline-flex; }
}
/* Never leave the mobile menu showing on desktop (e.g. opened then widened/rotated) */
@media (min-width: 769px) {
	.mkt-nav__mobile,
	.mkt-nav__mobile.is-open { display: none; }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.mkt-hero { padding: 4.5rem 0 4rem; position: relative; overflow: hidden; }
.mkt-hero::before {
	/* faint magenta glow behind the hero bracket */
	content: '';
	position: absolute;
	top: -20%;
	right: -10%;
	width: 60%;
	height: 120%;
	background: radial-gradient(closest-side, rgba(255, 0, 102, 0.10), transparent 70%);
	pointer-events: none;
}
.mkt-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 3rem;
	align-items: center;
	position: relative;
}
.mkt-hero__title {
	font-size: clamp(2.4rem, 6vw, 4rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.015em;
	margin: 1.1rem 0 0;
}
.mkt-hero__title .mkt-accent { display: block; }
.mkt-hero__sub { margin: 1.4rem 0 0; max-width: 44ch; }
.mkt-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.mkt-hero__fine { margin-top: 1.1rem; font-family: var(--vh-mono); font-size: 0.78rem; color: var(--vh-ink-3); letter-spacing: 0.04em; }

/* Dynamic beta notice (shown by landing.js only when signup is invite-gated) */
.mkt-beta { margin-top: 0.55rem; font-family: var(--vh-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--vh-cyan); }
.mkt-beta[hidden] { display: none; }

@media (max-width: 880px) {
	.mkt-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.mkt-hero__art { order: -1; }
}

/* ==========================================================================
   7. Bracket mock (hero art + screenshot slots)
   ========================================================================== */
.mkt-bracket {
	background: var(--vh-surface);
	border: 1px solid var(--vh-line);
	border-radius: 4px;
	padding: 1.5rem;
	position: relative;
}
.mkt-bracket__rounds { display: flex; align-items: center; gap: 1.75rem; }
.mkt-bracket__col { display: flex; flex-direction: column; gap: 1.1rem; flex: 1; }
.mkt-match {
	background: var(--vh-surface-2);
	border: 1px solid var(--vh-line);
	border-radius: 3px;
	padding: 0.55rem 0.7rem;
	font-size: 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.mkt-match__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mkt-match__seed {
	font-family: var(--vh-mono);
	font-size: 0.65rem;
	color: var(--vh-ink-3);
	border: 1px solid var(--vh-line);
	border-radius: 2px;
	padding: 0 0.3rem;
	margin-right: 0.5rem;
}
.mkt-match__name { color: var(--vh-ink-2); flex: 1; }
.mkt-match__score { font-family: var(--vh-mono); font-size: 0.75rem; color: var(--vh-ink-3); }
.mkt-match.is-winner { border-color: var(--vh-magenta); background: rgba(255, 0, 102, 0.08); }
.mkt-match.is-winner .mkt-match__name { color: var(--vh-ink); font-weight: 600; }
.mkt-match.is-winner .mkt-match__score { color: var(--vh-magenta); }
.mkt-bracket__live { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; font-family: var(--vh-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vh-ink-3); }

/* Screenshot slot — labeled placeholder until real PNG/WebP supplied */
.mkt-shot {
	position: relative;
	background:
		linear-gradient(135deg, rgba(255,0,102,0.05), transparent 60%),
		var(--vh-surface);
	border: 1px solid var(--vh-line);
	border-radius: 4px;
	aspect-ratio: 16 / 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	text-align: center;
	padding: 1.5rem;
	overflow: hidden;
}
.mkt-shot::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 5px);
	pointer-events: none;
}
.mkt-shot__tag { font-family: var(--vh-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vh-ink-3); }
.mkt-shot__label { color: var(--vh-ink-2); font-size: 0.95rem; }
.mkt-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-shot--tall { aspect-ratio: 4 / 3; }

/* ==========================================================================
   8. Capability band (replaces stat band — no scale claims)
   ========================================================================== */
.mkt-capband { padding: 2rem 0; border-top: 1px solid var(--vh-hairline); border-bottom: 1px solid var(--vh-hairline); }
.mkt-capband__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.6rem 1.5rem;
	font-family: var(--vh-display);
	font-weight: 500;
	font-size: clamp(0.95rem, 1.7vw, 1.15rem);
	color: var(--vh-ink);
	text-align: center;
}
.mkt-capband__sep { color: var(--vh-magenta); }
.mkt-capband__sub {
	margin: 0.9rem 0 0;
	text-align: center;
	font-family: var(--vh-mono);
	font-size: 0.76rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vh-ink-3);
}

/* ==========================================================================
   9. Pipeline (the bracket path — advancing rounds)
   ========================================================================== */
.mkt-pipeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
.mkt-stop {
	position: relative;
	background: var(--vh-surface);
	border: 1px solid var(--vh-line);
	border-radius: 3px;
	padding: 1.1rem 0.9rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.mkt-stop__n { font-family: var(--vh-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--vh-ink-3); }
.mkt-stop__name { font-family: var(--vh-display); font-weight: 600; font-size: 1.02rem; color: var(--vh-ink); }
.mkt-stop__desc { font-size: 0.82rem; color: var(--vh-ink-3); line-height: 1.5; }
.mkt-stop:not(:last-child)::after {
	/* connector toward the next stop */
	content: '';
	position: absolute;
	top: 50%;
	right: -0.78rem;
	width: 0.75rem;
	height: 1px;
	background: var(--vh-line);
	z-index: 1;
}
@media (max-width: 980px) { .mkt-pipeline { grid-template-columns: repeat(2, 1fr); } .mkt-stop:not(:last-child)::after { display: none; } }
@media (max-width: 520px) { .mkt-pipeline { grid-template-columns: 1fr; } }

/* Entry-fee informational aside — a small node, never a pillar */
.mkt-aside {
	margin-top: 1.5rem;
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.9rem 1.1rem;
	background: var(--vh-surface);
	border: 1px solid var(--vh-hairline);
	border-left: 2px solid var(--vh-line);
	border-radius: 2px;
	color: var(--vh-ink-3);
	font-size: 0.88rem;
	line-height: 1.55;
}
.mkt-aside .mkt-node { margin-top: 0.35rem; }

/* ==========================================================================
   10. Spotlight (live on every screen — the differentiator)
   ========================================================================== */
.mkt-spotlight { background: var(--vh-surface); border-top: 1px solid var(--vh-hairline); border-bottom: 1px solid var(--vh-hairline); }
.mkt-spotlight__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.mkt-checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.mkt-checks li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--vh-ink-2); line-height: 1.5; }
.mkt-checks svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--vh-magenta); margin-top: 1px; }
.mkt-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.mkt-chip {
	font-family: var(--vh-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vh-ink-2);
	border: 1px solid var(--vh-line);
	border-radius: 2px;
	padding: 0.35rem 0.6rem;
}
@media (max-width: 880px) { .mkt-spotlight__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ==========================================================================
   11. Feature grid (depth round — formats + AI)
   ========================================================================== */
.mkt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 880px) { .mkt-grid2 { grid-template-columns: 1fr; } }
.mkt-feature {
	background: var(--vh-surface);
	border: 1px solid var(--vh-line);
	border-radius: 4px;
	padding: 1.5rem;
	transition: border-color 0.15s ease;
}
.mkt-feature:hover { border-color: var(--vh-magenta); }
.mkt-feature__title { font-family: var(--vh-display); font-weight: 600; font-size: 1.2rem; margin: 1rem 0 0.4rem; color: var(--vh-ink); }
.mkt-feature__desc { color: var(--vh-ink-3); font-size: 0.92rem; line-height: 1.6; margin: 0; }
.mkt-feature__shot { margin-top: 1.1rem; }

/* ==========================================================================
   12. Final CTA (grand final)
   ========================================================================== */
.mkt-final { text-align: center; padding: 5rem 0; }
.mkt-final__title { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 600; margin: 1rem 0 0; }
.mkt-final__cta { display: inline-flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 1.75rem; }
.mkt-final__fine { margin-top: 1.1rem; font-family: var(--vh-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--vh-ink-3); }

/* ==========================================================================
   13. Footer
   ========================================================================== */
.mkt-footer { border-top: 1px solid var(--vh-hairline); padding: 3rem 0; }
.mkt-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
.mkt-footer__brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.mkt-footer__brand .mkt-nav__logo { width: 26px; height: 26px; }
.mkt-footer__brand .mkt-nav__logo svg { width: 16px; height: 16px; }
.mkt-footer__links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.mkt-footer__links a { color: var(--vh-ink-3); font-size: 0.9rem; text-decoration: none; transition: color 0.15s ease; }
.mkt-footer__links a:hover { color: var(--vh-ink); }
.mkt-footer__copy { width: 100%; padding-top: 1.5rem; margin-top: 0.5rem; border-top: 1px solid var(--vh-hairline); color: var(--vh-ink-3); font-size: 0.85rem; }

/* ==========================================================================
   14. Scroll reveal (driven by bracket-reveal.js)
   - Only hidden once JS adds .mkt-reveal-ready to <html> (so no-JS users see all).
   - bracket-reveal.js adds .mkt-reveal-ready only when motion is allowed +
     IntersectionObserver is supported; it reveals everything as a backstop.
   ========================================================================== */
.mkt-reveal-ready [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}
.mkt-reveal-ready [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mkt-reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.mkt-node--live { animation: none; }
	.mkt-btn:active { transform: none; }
}