:root {
	--bg: #0b0d10;
	--bg2: #14171c;
	--ink: #f5f6f8;
	--muted: #aab0bb;
	--accent: #ffcc00;
	--accent-ink: #14171c;
	--line: #262b33;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
	font-family: var(--font);
	background:
		linear-gradient(180deg, rgba(6,7,9,.82) 0%, rgba(6,7,9,.9) 45%, var(--bg) 100%),
		url("img/dark-bg.webp") top center / cover no-repeat fixed;
	color: var(--ink);
	line-height: 1.6;
	font-size: 18px;
	-webkit-font-smoothing: antialiased;
}
@media (max-width: 800px) {
	/* iOS Safari handles fixed backgrounds poorly (jank/repaint on scroll). */
	body { background-attachment: scroll; }
}
img { max-width: 100%; display: block; }
.wrap { width: min(760px, 100% - 32px); margin-inline: auto; }
.eyebrow {
	display: inline-block; background: var(--accent); color: var(--accent-ink);
	font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem;
	padding: 6px 14px; border-radius: 999px; margin: 0 0 18px;
}
h1 { font-size: clamp(1.8rem, 5.2vw, 2.7rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 12px; text-transform: uppercase; }
h1 mark { background: none; color: var(--accent); }
.sub { font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--muted); margin: 0 0 26px; max-width: 560px; }
.hero { padding: 36px 0 28px; text-align: center; position: relative; }
.hero .wrap { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }

/* Full-color jumping-figure cutout — centered across the whole hero
   content block (headline through the results list), not confined to
   any one element, so it reads as part of the page background rather
   than something scoped to the card. The source photo is very dark on
   average (black jersey, dark skin tones, transparent elsewhere) so a
   low opacity alone makes it vanish against the dark page background —
   brightness/contrast compensate. */
.hero-figure {
	position: absolute; inset: 0; margin: auto; z-index: -1;
	width: min(88vw, 480px); aspect-ratio: 620 / 930; height: auto;
	opacity: .5; pointer-events: none;
	filter: brightness(1.5) contrast(1.05);
}
.hero-figure picture, .hero-figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 560px) {
	.hero-figure { width: 80vw; opacity: .4; }
}

/* Short end-result list under the fold — outcomes only, no clutter. */
.results { list-style: none; margin: 0; padding: 0; max-width: 460px; text-align: left; }
.results li { display: flex; gap: 10px; padding: 8px 0; }
.results .check { color: #29d38b; font-weight: 900; }

/* Translucent so the figure behind it stays visible through the whole
   card, not just the strip that peeks out past its edges. */
.formcard {
	background: rgba(20, 23, 28, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border: 1px solid var(--line); border-radius: 18px; padding: 22px; margin: 0 0 6px; text-align: left; width: 100%; max-width: 460px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.formcard { background: rgba(20, 23, 28, .82); }
}
.formcard h2 { margin: 0 0 4px; font-size: 1.15rem; text-align: center; }
.formcard .formcard__sub { color: var(--muted); text-align: center; margin: 0 0 18px; font-size: .92rem; }
.f-row { margin-bottom: 14px; }
.f-row label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.f-row input[type="text"], .f-row input[type="email"] {
	width: 100%; font: inherit; padding: 14px; border-radius: 10px; border: 1px solid #3a4150; background: #0f1216; color: var(--ink);
}
.f-row input::placeholder { color: #6b7280; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-error { color: #ff8080; font-size: .88rem; min-height: 1.2em; margin: 6px 0 0; }
.cta { display: block; width: 100%; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; padding: 17px; border-radius: 10px; border: none; cursor: pointer; font-size: 1.05rem; margin-top: 6px; }
.cta:hover { filter: brightness(1.05); }
.cta:disabled { opacity: .7; cursor: default; }
.microcopy { text-align: center; color: var(--muted); font-size: .82rem; margin: 14px 0 0; }
.microcopy a { color: #c9cdd6; }

.redirecting { display: none; }
body.is-redirecting .lander-content { opacity: .35; pointer-events: none; }
body.is-redirecting .redirecting {
	display: flex; position: fixed; inset: 0; background: rgba(11,13,16,.9); z-index: 50;
	align-items: center; justify-content: center; flex-direction: column; gap: 14px; text-align: center; padding: 24px;
}
.spinner { width: 34px; height: 34px; border: 4px solid #3a4150; border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

footer.legal { padding: 28px 0 48px; text-align: center; }
footer.legal p { color: #6b7280; font-size: .8rem; max-width: 640px; margin: 0 auto 8px; }
footer.legal a { color: #9aa1ad; }

@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }