/* Minification failed. Returning unminified contents.
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-text'
(53,46): run-time error CSS1039: Token not allowed after unary operator: '-fp-base'
(53,65): run-time error CSS1039: Token not allowed after unary operator: '-fp-base'
(56,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,62): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,62): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(78,51): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-rgb'
(82,51): run-time error CSS1039: Token not allowed after unary operator: '-brand-purple-rgb'
(87,51): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(117,28): run-time error CSS1039: Token not allowed after unary operator: '-fp-border'
(119,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-muted'
(125,57): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-rgb'
(125,103): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-rgb'
(155,22): run-time error CSS1039: Token not allowed after unary operator: '-fp-base'
(180,43): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(180,78): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(182,18): run-time error CSS1039: Token not allowed after unary operator: '-fp-base'
(183,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(184,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(185,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(186,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(197,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(198,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(199,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(200,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(201,36): run-time error CSS1039: Token not allowed after unary operator: '-fp-base'
(201,60): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(201,95): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(237,45): run-time error CSS1039: Token not allowed after unary operator: '-brand-green'
(237,70): run-time error CSS1039: Token not allowed after unary operator: '-brand-green-rgb'
(245,14): run-time error CSS1039: Token not allowed after unary operator: '-warning'
(250,14): run-time error CSS1039: Token not allowed after unary operator: '-warning'
(271,33): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent-rgb'
(274,28): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent-rgb'
(287,33): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent-rgb'
(288,27): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent-rgb'
(289,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent'
(299,22): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent'
(304,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-text'
(325,33): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent-rgb'
(330,28): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent-rgb'
(337,37): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent-rgb'
(342,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-dim'
(350,22): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent-rgb'
(361,27): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent-rgb'
(370,58): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent'
(375,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-dim'
(383,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-muted'
(413,42): run-time error CSS1039: Token not allowed after unary operator: '-fp-angle'
(414,19): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(415,19): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-rgb'
(416,19): run-time error CSS1039: Token not allowed after unary operator: '-brand-purple-rgb'
(417,19): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-rgb'
(418,19): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(433,63): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(434,63): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-rgb'
(445,42): run-time error CSS1039: Token not allowed after unary operator: '-fp-dim'
(460,37): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(460,119): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(466,90): run-time error CSS1039: Token not allowed after unary operator: '-warning'
(495,14): run-time error CSS1039: Token not allowed after unary operator: '-fp-cta-bg'
(496,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-cta-ink'
(501,39): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(506,25): run-time error CSS1039: Token not allowed after unary operator: '-fp-cta-ink'
(524,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-cta-ink'
(528,14): run-time error CSS1039: Token not allowed after unary operator: '-fp-cta-bg'
(529,39): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(534,74): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(542,28): run-time error CSS1039: Token not allowed after unary operator: '-fp-cta-ink'
(548,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-dim'
(553,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-link'
(580,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(581,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(587,33): run-time error CSS1039: Token not allowed after unary operator: '-fp-tier-rgb'
(589,55): run-time error CSS1039: Token not allowed after unary operator: '-fp-tier-rgb'
(589,87): run-time error CSS1039: Token not allowed after unary operator: '-fp-tier-rgb'
(591,68): run-time error CSS1039: Token not allowed after unary operator: '-fp-tier-rgb'
(595,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(596,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(610,46): run-time error CSS1039: Token not allowed after unary operator: '-gold'
(610,59): run-time error CSS1039: Token not allowed after unary operator: '-warning'
(617,38): run-time error CSS1039: Token not allowed after unary operator: '-gold-rgb'
(621,46): run-time error CSS1039: Token not allowed after unary operator: '-brand-purple'
(624,38): run-time error CSS1039: Token not allowed after unary operator: '-brand-purple-rgb'
(646,27): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-rgb'
(647,33): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-rgb'
(652,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-muted'
(654,28): run-time error CSS1039: Token not allowed after unary operator: '-fp-border'
(656,33): run-time error CSS1039: Token not allowed after unary operator: '-fp-tier'
(680,33): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(681,27): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(690,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-dim'
(709,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-muted'
(721,28): run-time error CSS1039: Token not allowed after unary operator: '-fp-border'
(733,30): run-time error CSS1039: Token not allowed after unary operator: '-brand-green'
(744,45): run-time error CSS1039: Token not allowed after unary operator: '-brand-green'
(758,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-muted'
(803,28): run-time error CSS1039: Token not allowed after unary operator: '-fp-border'
(809,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(810,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(817,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(817,63): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(818,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(831,43): run-time error CSS1039: Token not allowed after unary operator: '-fp-step-rgb'
(831,75): run-time error CSS1039: Token not allowed after unary operator: '-fp-next-rgb'
(841,33): run-time error CSS1039: Token not allowed after unary operator: '-fp-step-rgb'
(842,51): run-time error CSS1039: Token not allowed after unary operator: '-fp-step-rgb'
(842,83): run-time error CSS1039: Token not allowed after unary operator: '-fp-step-rgb'
(843,16): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var('
(843,20): run-time error CSS1046: Expect comma, found '-'
(843,21): run-time error CSS1047: Expected number or percentage value in rgb function, found '-fp-step-rgb'
(843,33): run-time error CSS1046: Expect comma, found ')'
(843,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(845,36): run-time error CSS1039: Token not allowed after unary operator: '-fp-step-rgb'
(849,16): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var('
(849,20): run-time error CSS1046: Expect comma, found '-'
(849,21): run-time error CSS1047: Expected number or percentage value in rgb function, found '-fp-step-rgb'
(849,33): run-time error CSS1046: Expect comma, found ')'
(849,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(856,37): run-time error CSS1039: Token not allowed after unary operator: '-fp-muted'
(875,28): run-time error CSS1039: Token not allowed after unary operator: '-fp-border'
(883,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-muted'
(886,31): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(887,49): run-time error CSS1039: Token not allowed after unary operator: '-fp-dim'
(896,37): run-time error CSS1039: Token not allowed after unary operator: '-brand-green'
(896,74): run-time error CSS1039: Token not allowed after unary operator: '-brand-green-rgb'
(896,128): run-time error CSS1039: Token not allowed after unary operator: '-brand-green-rgb'
(898,49): run-time error CSS1039: Token not allowed after unary operator: '-fp-dim'
(903,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-link'
(926,19): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(927,19): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(931,48): run-time error CSS1039: Token not allowed after unary operator: '-fp-muted'
(939,17): run-time error CSS1039: Token not allowed after unary operator: '-fp-dim'
(944,28): run-time error CSS1039: Token not allowed after unary operator: '-fp-link'
(946,29): run-time error CSS1039: Token not allowed after unary operator: '-fp-muted'
(1022,47): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1022,82): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1023,45): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1023,80): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1025,27): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1026,27): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1027,27): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1028,27): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1029,27): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1030,27): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1073,32): run-time error CSS1039: Token not allowed after unary operator: '-fp-border'
(1079,31): run-time error CSS1039: Token not allowed after unary operator: '-brand-green'
(1095,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1096,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1097,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1124,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1125,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1126,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1127,23): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1132,31): run-time error CSS1039: Token not allowed after unary operator: '-fp-base-rgb'
(1158,42): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent-rgb'
(1159,44): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent-rgb'
(1160,42): run-time error CSS1039: Token not allowed after unary operator: '-fp-accent-rgb'
(1175,10): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1182,50): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(1182,121): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(1183,50): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(1183,123): run-time error CSS1039: Token not allowed after unary operator: '-warning-rgb'
(1186,79): run-time error CSS1039: Token not allowed after unary operator: '-fp-tier-rgb'
(1186,120): run-time error CSS1039: Token not allowed after unary operator: '-fp-tier-rgb'
(1187,80): run-time error CSS1039: Token not allowed after unary operator: '-fp-tier-rgb'
(1187,121): run-time error CSS1039: Token not allowed after unary operator: '-fp-tier-rgb'
 */
/* ============================================================================
   /free landing page (Views/Home/FreePick.cshtml). Phone-first: most visitors
   arrive from social media.

   Loaded only on that page (~/bundles/free-pick-css), after signup-form.css, whose
   form it restyles in place under .fp-form-card. Everything else is scoped under
   .fp-page. Like home-picks-teaser.css, the tokens style.css lacks (gold, the blue
   rgb triplet) are declared on the wrapper rather than loading account-home.css.

   The look is one real photo of the sport in season with the offer set on it: a
   band across the top on a phone (.fp-stage), the whole page's background, fixed to
   the window, on a wide screen (the 960px block near the end). Colour roles: gold is the action (every CTA, in the gradient the home
   hero's .btn-trial and the pass buttons already use), green is the Free Tier and a
   live pick, blue is a countdown to a drop. The ticket is gold for a Play of the Day
   and purple for a Super Play of the Day, as on the home page teaser.
   ============================================================================ */

/* The navbar is hidden here, so drop the offset it would need (as Account/SignUp does). */
.page-content { margin-top: 0 !important; }

/* Google's badge would sit on top of the phone-only sticky button. Hidden, which Google
   allows because the form card carries the reCAPTCHA notice (.fp-recaptcha). */
.grecaptcha-badge { visibility: hidden !important; }

@property --fp-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.fp-page {
    --gold: #ffd700;
    --gold-rgb: 255, 215, 0;
    --brand-blue-rgb: 74, 144, 226;
    --fp-base: #070b16;          /* the page behind the photo; the photo fades into it */
    --fp-base-rgb: 7, 11, 22;
    --fp-text: #f8fafc;
    --fp-muted: #cbd5e1;
    --fp-dim: #94a3b8;
    --fp-border: rgba(148, 163, 184, 0.18);
    --fp-link: #93c5fd;
    /* The site's gold button: same stops and ink as .hero .btn-trial and .teaser-pass-cta. */
    --fp-cta-bg: linear-gradient(135deg, var(--warning) 0%, #fbbf24 55%, #fde68a 110%);
    --fp-cta-ink: #0f172a;
    --fp-accent: var(--brand-blue);
    --fp-accent-rgb: var(--brand-blue-rgb);

    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-x: clip;
    color: var(--fp-text);
    background: linear-gradient(180deg, var(--fp-base) 0%, var(--fp-base) 26%, #0b1120 60%, #0f172a 100%);
}

.fp-page.fp-phase-live    { --fp-accent: var(--brand-green); --fp-accent-rgb: var(--brand-green-rgb); }
.fp-page.fp-phase-pending { --fp-accent: var(--gold);        --fp-accent-rgb: var(--gold-rgb); }

/* Several pieces here set display, which would otherwise beat the hidden attribute. */
.fp-page [hidden] { display: none !important; }

/* ---------- Backdrop: two soft brand glows, nothing busier (the photo is the show) ---------- */

.fp-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.fp-glow {
    position: absolute;
    border-radius: 50%;
    animation: fp-drift 18s ease-in-out infinite alternate;
}
.fp-glow-a {
    width: 620px; height: 620px; right: -260px; top: 80px;
    background: radial-gradient(circle, rgba(var(--brand-blue-rgb), 0.22), transparent 66%);
}
.fp-glow-b {
    width: 560px; height: 560px; left: -260px; top: 620px;
    background: radial-gradient(circle, rgba(var(--brand-purple-rgb), 0.16), transparent 66%);
    animation-delay: -6s;
}
.fp-glow-c {
    width: 520px; height: 520px; right: -200px; top: 1300px;
    background: radial-gradient(circle, rgba(var(--warning-rgb), 0.08), transparent 66%);
    animation-delay: -12s;
}

/* ---------- Top bar ---------- */

.fp-topbar {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 16px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.fp-logo img {
    display: block;
    width: 148px;
    height: auto;
    aspect-ratio: 2092 / 852; /* the file's own shape, so its space is held before it loads */
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.08));
}
.fp-signin {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--fp-border);
    background: rgba(15, 23, 42, 0.55);
    color: var(--fp-muted);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.fp-signin:hover { color: #fff; border-color: rgba(var(--brand-blue-rgb), 0.6); background: rgba(var(--brand-blue-rgb), 0.12); }

/* ---------- Hero layout ---------- */

.fp-hero {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "form";
    gap: 28px;
}
.fp-copy      { grid-area: copy; text-align: center; min-width: 0; }
.fp-form-col  { grid-area: form; min-width: 0; scroll-margin-top: 12px; }

/* ---------- The stage: the season's photo with the offer set on it ---------- */

.fp-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* text at the foot, unless the photo wants it at the top */
    min-height: 400px;
    margin: 0 -16px;             /* edge to edge on a phone */
    padding: 20px 16px 54px;     /* foot room: the status panel overlaps the last 30px */
    background: var(--fp-base);
}
/* Shared by the stage and the closing band. The file is chosen in the view (and swapped by
   free-pick.js); where it is anchored is art direction, per sport, below. */
.fp-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}
.fp-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.fp-stage .fp-photo img { animation: fp-settle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* Text at the foot: dark from the bottom up, clear over the top half where the player is. */
.fp-stage-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(var(--fp-base-rgb), 0.40) 0%, rgba(var(--fp-base-rgb), 0) 22%),
        linear-gradient(0deg,
            var(--fp-base) 0%,
            rgba(var(--fp-base-rgb), 0.94) 28%,
            rgba(var(--fp-base-rgb), 0.80) 48%,
            rgba(var(--fp-base-rgb), 0.36) 66%,
            rgba(var(--fp-base-rgb), 0) 86%);
}
.fp-stage-text { position: relative; }

/* Football: the ball is at the foot of the frame, so the text goes at the top (over the
   blurred sideline) and the photo is anchored to its bottom edge. */
.fp-sport-football .fp-stage { justify-content: flex-start; min-height: 440px; }
.fp-sport-football .fp-stage .fp-photo img { object-position: 50% 100%; }
.fp-sport-football .fp-stage-shade {
    background:
        linear-gradient(180deg,
            rgba(var(--fp-base-rgb), 0.95) 0%,
            rgba(var(--fp-base-rgb), 0.84) 24%,
            rgba(var(--fp-base-rgb), 0.42) 42%,
            rgba(var(--fp-base-rgb), 0) 58%),
        linear-gradient(0deg, var(--fp-base) 0%, rgba(var(--fp-base-rgb), 0.5) 10%, rgba(var(--fp-base-rgb), 0) 26%);
}
/* Basketball and baseball were shot in daylight: bring them down to the page's level. */
.fp-sport-basketball .fp-photo img { object-position: 30% 0%; filter: brightness(0.86) contrast(1.06); }
.fp-sport-baseball .fp-photo img   { object-position: 50% 0%; filter: brightness(0.84) contrast(1.06); }

/* The headline leads on its own. A "Free Tier / No credit card" pill used to sit above it;
   it was dropped because the headline already says free, the form says no credit card where
   people decide, and "Free Tier" means nothing to a first-time visitor. */
.fp-headline {
    margin: 0;
    font-size: clamp(2.3rem, 10.4vw, 3rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.6);
    animation: fp-rise 0.7s 0.08s ease-out both;
}
/* "Get tomorrow's" stays on one line even in the fallback font (wider than Outfit), so the
   headline is two lines before and after the web font arrives and nothing below it moves. */
.fp-headline-top { display: block; white-space: nowrap; }
.fp-day-word {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
/* The swoosh under the day, after the "REAL" underline in the home page's results ribbon. */
.fp-day-word::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.02em;
    height: 0.08em;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-green), rgba(var(--brand-green-rgb), 0.45));
    transform: rotate(-1.5deg) skewX(-8deg);
}
/* "picks for free" in the CTA's gold, with a glint crossing it. */
.fp-headline-shine {
    display: block;
    padding-bottom: 0.08em; /* room for descenders under background-clip */
    background: linear-gradient(100deg,
        var(--warning) 0%,
        #fbbf24 28%,
        #fff 46%,
        #fde68a 56%,
        #fbbf24 76%,
        var(--warning) 100%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
    animation: fp-shine 6s ease-in-out infinite;
}

/* ---------- Status panel (overlaps the foot of the stage) ---------- */

.fp-status {
    position: relative;
    z-index: 2;
    max-width: 460px;
    margin: -30px auto 20px;
    padding: 16px 16px 14px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.90), rgba(15, 23, 42, 0.94));
    border: 1px solid rgba(var(--fp-accent-rgb), 0.42);
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.5),
        0 0 44px rgba(var(--fp-accent-rgb), 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    animation: fp-rise 0.7s 0.16s ease-out both;
}
.fp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--fp-accent-rgb), 0.42);
    background: rgba(var(--fp-accent-rgb), 0.12);
    color: var(--fp-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.fp-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fp-accent);
    animation: fp-ping 1.6s ease-out infinite;
}
.fp-status-label {
    margin: 10px 0 12px;
    color: var(--fp-text);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    text-wrap: balance; /* a long label ("...Super Play of the Day tips off in") shouldn't strand its last word */
}
.fp-countdown {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
}
.fp-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fp-num {
    min-width: 72px;
    padding: 10px 8px 8px;
    border-radius: 14px;
    border: 1px solid rgba(var(--fp-accent-rgb), 0.32);
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.9), rgba(15, 23, 42, 0.95));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.38),
        0 0 20px rgba(var(--fp-accent-rgb), 0.16);
    color: #fff;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-shadow: 0 0 18px rgba(var(--fp-accent-rgb), 0.5);
}
.fp-num.fp-bump { animation: fp-bump 0.35s ease-out; }
.fp-unit-label {
    margin-top: 6px;
    color: var(--fp-dim);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.fp-colon {
    padding-top: 8px;
    color: rgba(var(--fp-accent-rgb), 0.75);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    animation: fp-blink 1s steps(1) infinite;
}
.fp-pending {
    position: relative;
    height: 6px;
    margin: 4px 4px 2px;
    border-radius: 999px;
    background: rgba(var(--fp-accent-rgb), 0.16);
    overflow: hidden;
}
.fp-pending-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--fp-accent), transparent);
    animation: fp-indeterminate 1.4s ease-in-out infinite;
}
.fp-status-note {
    margin: 12px 0 0;
    color: var(--fp-dim);
    font-size: 0.88rem;
    line-height: 1.45;
}

.fp-sub {
    max-width: 520px;
    margin: 0 auto;
    color: var(--fp-muted);
    font-size: 1.06rem;
    line-height: 1.55;
    animation: fp-rise 0.7s 0.24s ease-out both;
}
.fp-sub strong { color: #fff; font-weight: 700; }

/* Wide screens only: on a phone they would push the form further down the page. */
.fp-perks { display: none; }

/* ---------- Form card ---------- */

.fp-form-card {
    position: relative;
    isolation: isolate;
    max-width: 460px;
    margin: 0 auto;
    padding: 24px 20px 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    animation: fp-rise 0.7s 0.2s ease-out both;
}
/* Animated brand-gradient border. */
.fp-form-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--fp-angle),
        rgba(var(--warning-rgb), 0.9),
        rgba(var(--brand-blue-rgb), 0.5),
        rgba(var(--brand-purple-rgb), 0.7),
        rgba(var(--brand-blue-rgb), 0.3),
        rgba(var(--warning-rgb), 0.9));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: fp-rotate 6s linear infinite;
    pointer-events: none;
}
/* Soft glow behind it. */
.fp-form-card::after {
    content: '';
    position: absolute;
    inset: 8% 4% -4%;
    z-index: -1;
    border-radius: 30px;
    background: radial-gradient(60% 60% at 50% 40%, rgba(var(--warning-rgb), 0.16), transparent 70%),
                radial-gradient(60% 60% at 50% 80%, rgba(var(--brand-blue-rgb), 0.22), transparent 70%);
    filter: blur(28px);
}
.fp-form-head { text-align: center; margin-bottom: 18px; }
.fp-form-head h2 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.fp-form-head p { margin: 0; color: var(--fp-dim); font-size: 0.95rem; }

/* The shared form, tightened for a landing page. Buttons and inputs don't inherit the page
   font on their own, which left the CTA in a system face next to the Outfit links. */
.fp-form-card .signup-form button,
.fp-form-card .signup-form input { font-family: inherit; }
.fp-form-card .signup-form .form-group { margin-bottom: 1rem; }
.fp-form-card .signup-form .form-group label {
    margin-bottom: 0.35rem;
    color: #e2e8f0;
    font-size: 0.88rem;
}
.fp-form-card .signup-form .form-control { padding: 0.8rem 1rem; }
.fp-form-card .signup-form .form-control:focus {
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.20), 0 10px 30px rgba(2, 6, 23, 0.35), inset 0 0 0 1px rgba(var(--warning-rgb), 0.25);
}
.fp-form-card .signup-form .form-group.terms-checkbox {
    margin-top: 1.1rem;
    padding: 0.9rem 0.25rem 0.7rem;
}
.fp-form-card .signup-form .checkbox-wrapper input[type="checkbox"] { accent-color: var(--warning); }
@media (min-width: 400px) {
    /* First and last name side by side: two fewer rows to scroll past on a phone. */
    .fp-form-card .signup-name-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
    }
}

/* The gold CTA, shared by the form's button and the page's other "Get My Picks" links.
   Stops, ink, border and glow are .hero .btn-trial's, so it is the same button the home page
   uses for "Create Free Account". */
.fp-form-card .signup-form #createAccountBtn,
.fp-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.4rem;
    height: auto;
    padding: 0 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 52%),
        var(--fp-cta-bg);
    color: var(--fp-cta-ink);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(var(--warning-rgb), 0.22), 0 6px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    animation: fp-cta-pulse 2.8s ease-in-out infinite;
}
.fp-form-card .signup-form #createAccountBtn { width: 100%; }
.fp-cta i { color: var(--fp-cta-ink); opacity: 0.85; }
/* Light sweep across the button. */
.fp-form-card .signup-form #createAccountBtn::after,
.fp-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.6) 50%, transparent 62%, transparent 100%);
    background-size: 260% 100%;
    background-position: 120% 0;
    animation: fp-sweep 3.6s ease-in-out infinite;
    pointer-events: none;
}
.fp-form-card .signup-form #createAccountBtn:hover,
.fp-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.03);
    color: var(--fp-cta-ink);
    text-decoration: none;
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 52%),
        var(--fp-cta-bg);
    box-shadow: 0 18px 36px rgba(var(--warning-rgb), 0.30), 0 10px 18px rgba(0, 0, 0, 0.22);
}
.fp-form-card .signup-form #createAccountBtn:focus-visible,
.fp-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 0 0 6px rgba(var(--warning-rgb), 0.5);
}
.fp-form-card .signup-form #createAccountBtn:disabled {
    animation: none;
    transform: none;
}
.fp-form-card .signup-form #createAccountBtn .spinner {
    border-color: rgba(15, 23, 42, 0.25);
    border-top-color: var(--fp-cta-ink);
}

.fp-form-foot {
    margin: 14px 0 0;
    text-align: center;
    color: var(--fp-dim);
    font-size: 0.92rem;
}
.fp-form-foot a,
.fp-recaptcha a {
    color: var(--fp-link);
    font-weight: 700;
    text-decoration: none;
}
.fp-form-foot a:hover,
.fp-recaptcha a:hover { color: #bfdbfe; text-decoration: underline; }
.fp-recaptcha {
    margin: 10px 0 0;
    text-align: center;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.45;
}
.fp-recaptcha a { font-weight: 600; }

/* ---------- Locked pick card (in the steps section: what a pass opens) ----------
   A real pick card under lock: the frame, labels and tiles are crisp, the pick's own values
   (decoys) are frosted. Gold for a Play of the Day, purple for a Super, as on the home teaser. */

.fp-ticket-col {
    grid-area: ticket;
    min-width: 0;
    display: flex;
    justify-content: center;
    padding-top: 16px; /* the ribbon overhangs the card's top edge */
}
.fp-ticket {
    --fp-tier: var(--gold);
    --fp-tier-rgb: var(--gold-rgb);
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 30px 16px 16px;
    border-radius: 20px;
    border: 1px solid rgba(var(--fp-tier-rgb), 0.5);
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(var(--fp-tier-rgb), 0.12), rgba(var(--fp-tier-rgb), 0) 62%),
        linear-gradient(165deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.97));
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.5), 0 0 26px rgba(var(--fp-tier-rgb), 0.16);
    animation: fp-tier-glow 3.2s ease-in-out infinite;
}
.fp-super .fp-ticket {
    --fp-tier: var(--brand-purple);
    --fp-tier-rgb: var(--brand-purple-rgb);
}
/* Same ribbon as the home teaser's .pod-ribbon. */
.fp-ticket-ribbon {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, var(--gold), var(--warning));
    color: #000;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(var(--gold-rgb), 0.25);
    z-index: 2;
}
.fp-super .fp-ticket-ribbon {
    background: linear-gradient(135deg, var(--brand-purple), #7c3aed);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 18px rgba(var(--brand-purple-rgb), 0.3);
}
.fp-ticket-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.fp-ticket-sport,
.fp-ticket-time {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}
.fp-ticket-sport {
    color: #fff;
    background: rgba(var(--brand-blue-rgb), 0.22);
    border: 1px solid rgba(var(--brand-blue-rgb), 0.45);
    letter-spacing: 0.06em;
}
.fp-ticket-time {
    margin-left: auto;
    color: var(--fp-muted);
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid var(--fp-border);
}
.fp-ticket-time i { color: var(--fp-tier); }

/* The pick itself: an inner panel with crisp labels and frosted values. */
.fp-ticket-body {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 14px 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(2, 6, 23, 0.58);
    text-align: left;
    user-select: none;
    -webkit-user-select: none;
}
.fp-ticket-locked {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--warning-rgb), 0.45);
    background: rgba(var(--warning-rgb), 0.12);
    color: #fbbf24;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.fp-ticket-label {
    display: block;
    color: var(--fp-dim);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
/* Frosted, not smeared: big enough type that the blur still reads as words and numbers. */
.fp-frost { filter: blur(7px); }
.fp-ticket-pick {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
}
.fp-ticket-match {
    display: block;
    margin-top: 4px;
    color: var(--fp-muted);
    font-size: 0.95rem;
    font-weight: 600;
}
.fp-ticket-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.fp-tile {
    padding: 10px 12px 12px;
    border-radius: 12px;
    border: 1px solid var(--fp-border);
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
}
.fp-tile-value {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.fp-tile-units { color: var(--brand-green); }
.fp-ticket-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    overflow: hidden;
}
.fp-ticket-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-green), #fbbf24);
    filter: blur(3px);
    opacity: 0.85;
}
/* The card's own gold button (.fp-cta), full width. */
.fp-ticket-cta {
    display: flex;
    width: 100%;
    min-height: 3rem;
    margin-top: 14px;
    font-size: 1rem;
}
.fp-ticket-more {
    margin: 12px 0 0;
    color: var(--fp-muted);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
}
.fp-ticket-more i { margin-right: 0.35rem; color: #fbbf24; }

/* ---------- Sections below the hero ---------- */

.fp-steps,
.fp-proof {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}
.fp-steps h2,
.fp-proof h2,
.fp-final h2 {
    margin: 0 0 18px;
    text-align: center;
    color: #f8fafc;
    font-size: clamp(1.55rem, 6vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.fp-steps {
    padding: 4px 16px 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* On a phone the ticket comes first, straight after the form, then the heading and steps. */
    grid-template-areas: "ticket" "title" "list";
}
.fp-steps h2 { grid-area: title; margin-top: 40px; }
/* The steps as one connected timeline: an icon node per step, a line running through them,
   the colour moving green (free) to blue to gold (the unlock). */
.fp-steps-list {
    grid-area: list;
    list-style: none;
    margin: 0 auto;
    padding: 22px 20px;
    width: 100%;
    max-width: 620px;
    border-radius: 20px;
    border: 1px solid var(--fp-border);
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.66));
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3);
    text-align: left;
}
.fp-step {
    --fp-step-rgb: var(--brand-green-rgb);
    --fp-next-rgb: var(--brand-blue-rgb);
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    padding-bottom: 26px;
}
.fp-step:nth-child(2) { --fp-step-rgb: var(--brand-blue-rgb); --fp-next-rgb: var(--warning-rgb); }
.fp-step:nth-child(3) { --fp-step-rgb: var(--warning-rgb); }
.fp-step:last-child { padding-bottom: 0; }
/* The line to the next node, with a light running down it. */
.fp-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 54px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%) 0 -70% / 100% 40% no-repeat,
        linear-gradient(180deg, rgba(var(--fp-step-rgb), 0.75), rgba(var(--fp-next-rgb), 0.75));
    animation: fp-run 2.8s ease-in-out infinite;
}
.fp-step:nth-child(2)::before { animation-delay: 0.9s; }
.fp-step-node {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    border: 1px solid rgba(var(--fp-step-rgb), 0.55);
    background: linear-gradient(160deg, rgba(var(--fp-step-rgb), 0.22), rgba(var(--fp-step-rgb), 0.08));
    color: rgb(var(--fp-step-rgb));
    font-size: 1.1rem;
    box-shadow: 0 0 22px rgba(var(--fp-step-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.fp-step-kicker {
    display: block;
    color: rgb(var(--fp-step-rgb));
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.fp-step h3 { margin: 2px 0 5px; color: #fff; font-size: 1.14rem; font-weight: 800; letter-spacing: -0.005em; }
.fp-step p { margin: 0; color: var(--fp-muted); font-size: 0.95rem; line-height: 1.5; }

.fp-proof { padding: 12px 0 36px; }
.fp-proof h2 { padding: 0 16px; }
.fp-proof-track {
    display: flex;
    gap: 12px;
    padding: 4px 16px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px; /* snap to the padding, not the screen edge */
    scrollbar-width: none;
}
.fp-proof-track::-webkit-scrollbar { display: none; }
.fp-proof-card {
    flex: 0 0 min(210px, 68%);
    scroll-snap-align: start;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--fp-border);
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.82));
    animation: fp-rise 0.5s ease-out both;
}
.fp-proof-top {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--fp-muted);
    font-size: 0.85rem;
}
.fp-proof-top i { color: var(--brand-blue); }
.fp-proof-date { margin-left: auto; color: var(--fp-dim); font-size: 0.78rem; }
.fp-proof-win { margin: 8px 0 6px; color: #fff; font-size: 1.5rem; font-weight: 800; }
.fp-proof-roi {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
}
.fp-proof-roi.is-up   { color: var(--brand-green); background: rgba(var(--brand-green-rgb), 0.12); border: 1px solid rgba(var(--brand-green-rgb), 0.35); }
.fp-proof-roi.is-down { color: #fca5a5; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); }
.fp-proof-period { margin-top: 6px; color: var(--fp-dim); font-size: 0.8rem; }
.fp-proof-link {
    display: block;
    margin-top: 6px;
    text-align: center;
    color: var(--fp-link);
    font-weight: 700;
    text-decoration: none;
}
.fp-proof-link:hover { color: #bfdbfe; text-decoration: underline; }

/* Closing band: the same photo again, dimmed, behind the last call to action. */
.fp-final {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: hidden;
    margin-top: 8px;
    padding: 76px 16px 84px;
    text-align: center;
}
.fp-page .fp-final .fp-photo img { object-position: 50% 62%; }
.fp-final-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        #0e1526 0%,
        rgba(var(--fp-base-rgb), 0.74) 30%,
        rgba(var(--fp-base-rgb), 0.74) 70%,
        #0f172a 100%);
}
.fp-final h2 { margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); }
.fp-final-note { margin: 12px 0 0; color: var(--fp-muted); font-weight: 600; }

.fp-footer {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 22px 16px 104px; /* clears the phone-only sticky button */
    color: var(--fp-dim);
    font-size: 0.82rem;
    line-height: 1.55;
    text-align: center;
}
.fp-footer a { color: var(--fp-link); text-decoration: none; }
.fp-footer a:hover { color: #bfdbfe; text-decoration: underline; }
.fp-rg strong { color: var(--fp-muted); }
.fp-legal {
    margin: 10px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.fp-legal-sep { color: #64748b; }

/* Phones: a way back to the form once it has scrolled away. */
.fp-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(2, 6, 23, 0), rgba(2, 6, 23, 0.94) 38%);
    transform: translateY(115%);
    visibility: hidden; /* not just off-screen: out of the accessibility tree and any capture */
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
    pointer-events: none;
}
.fp-sticky.is-shown {
    transform: none;
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s linear 0s;
    pointer-events: auto;
}
.fp-sticky .fp-cta { width: 100%; }

/* ---------- Wider screens ---------- */

@media (min-width: 760px) {
    /* No longer edge to edge once the column is narrower than the screen. */
    .fp-stage { margin: 0; border-radius: 24px; }
}

@media (min-width: 960px) {
    .fp-topbar { max-width: 1320px; padding: 16px 24px 12px; }
    .fp-logo img { width: 160px; }

    /* The photo stops being a band and becomes the page's background: fixed to the window,
       the page scrolling over it. It keeps its place in the markup and sits at z -1 inside
       the hero's stacking context, so everything in the hero paints over it and so do the
       sections after the hero, each with its own veil. (Nothing above it in the tree may get
       a transform or filter, or "fixed" would stop meaning the window.) */
    .fp-stage,
    .fp-sport-football .fp-stage {
        position: static;
        isolation: auto;
        overflow: visible;
        display: block;
        min-height: 0;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: none;
    }
    .fp-stage .fp-photo,
    .fp-stage-shade,
    .fp-sport-football .fp-stage-shade {
        position: fixed;
        inset: 0;
        z-index: -1;
    }
    /* The wide cuts are 16:9 with the subject in the middle, which is the one part of the
       window the text column and the form leave clear. */
    .fp-sport-football .fp-stage .fp-photo img { object-position: 50% 50%; }
    .fp-sport-basketball .fp-stage .fp-photo img { object-position: 50% 0%; filter: brightness(0.74) contrast(1.06); }
    .fp-sport-baseball .fp-stage .fp-photo img { object-position: 50% 40%; filter: brightness(0.72) contrast(1.06); }
    /* Dark behind the text on the left and the form on the right, clear down the middle. */
    .fp-stage-shade,
    .fp-sport-football .fp-stage-shade {
        background:
            linear-gradient(180deg, rgba(var(--fp-base-rgb), 0.74) 0%, rgba(var(--fp-base-rgb), 0) 17%),
            linear-gradient(0deg, rgba(var(--fp-base-rgb), 0.82) 0%, rgba(var(--fp-base-rgb), 0) 22%),
            linear-gradient(90deg,
                rgba(var(--fp-base-rgb), 0.94) 0%,
                rgba(var(--fp-base-rgb), 0.86) 22%,
                rgba(var(--fp-base-rgb), 0.46) 41%,
                rgba(var(--fp-base-rgb), 0.16) 51%,
                rgba(var(--fp-base-rgb), 0.42) 62%,
                rgba(var(--fp-base-rgb), 0.80) 100%);
    }

    /* One screen: text left, form right, sitting in the middle of the window's height.
       Placed from the top with padding worked out from the window, not with align-items:
       center, which makes both columns jump as fonts and late content change their heights
       while the page loads. 93px is the top bar, 700px the form card, 72px the foot. */
    .fp-hero {
        max-width: 1320px;
        min-height: calc(100vh - 93px);
        grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
        grid-template-areas: "copy form";
        column-gap: 48px;
        align-items: start;
        padding: clamp(8px, calc((100vh - 93px - 700px - 72px) / 2), 150px) 24px 72px;
    }
    /* The text column is about 120px shorter than the form: start it lower to centre the pair. */
    .fp-copy { max-width: 520px; margin-top: 88px; text-align: left; }
    .fp-headline { font-size: 4rem; }

    .fp-status {
        max-width: 460px;
        margin: 28px 0 22px;
        background: linear-gradient(160deg, rgba(30, 41, 59, 0.66), rgba(15, 23, 42, 0.76));
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
    .fp-countdown { justify-content: flex-start; }
    .fp-sub { margin-left: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
    .fp-perks {
        list-style: none;
        margin: 14px 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .fp-perks li {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.4rem 0.75rem;
        border-radius: 999px;
        border: 1px solid var(--fp-border);
        background: rgba(15, 23, 42, 0.66);
        color: #e2e8f0;
        font-size: 0.82rem;
        font-weight: 600;
    }
    .fp-perks i { color: var(--brand-green); }

    .fp-form-card {
        margin-right: 0;
        padding: 30px 28px 22px;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.90));
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    }

    /* Below the hero the page slides up over the photo behind a veil, dark enough to read on. */
    .fp-below {
        position: relative;
        z-index: 1;
        padding-top: 84px;
        background: linear-gradient(180deg,
            rgba(var(--fp-base-rgb), 0) 0,
            rgba(var(--fp-base-rgb), 0.90) 120px,
            rgba(var(--fp-base-rgb), 0.93) 100%);
    }

    /* Ticket on the left, the three steps stacked beside it, under one heading. */
    .fp-steps {
        grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
        grid-template-areas: "title title" "ticket list";
        column-gap: 64px;
        align-items: center;
        padding: 0 24px 56px;
    }
    .fp-steps h2 { margin-top: 0; margin-bottom: 28px; }
    .fp-steps-list { max-width: none; padding: 26px 26px; }

    .fp-proof-track {
        justify-content: center;
        flex-wrap: wrap;
        overflow: visible;
    }
    .fp-proof-card { flex-basis: 175px; }

    /* The closing band is a window: its own copy of the photo isn't needed, the page's shows
       through a lighter veil. */
    .fp-final { margin-top: 0; padding: 124px 24px 132px; }
    .fp-final .fp-photo { display: none; }
    .fp-final-shade {
        background: linear-gradient(180deg,
            rgba(var(--fp-base-rgb), 0.93) 0%,
            rgba(var(--fp-base-rgb), 0.50) 36%,
            rgba(var(--fp-base-rgb), 0.50) 64%,
            rgba(var(--fp-base-rgb), 0.96) 100%);
    }
    .fp-footer {
        max-width: none;
        padding: 26px 24px 32px;
        background: rgba(var(--fp-base-rgb), 0.96);
    }
    .fp-footer p { max-width: 860px; margin-left: auto; margin-right: auto; }
    .fp-sticky { display: none; }
}

/* ---------- Motion ---------- */

@keyframes fp-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
/* The photo eases out of a slight zoom as the page opens. */
@keyframes fp-settle {
    from { opacity: 0; transform: scale(1.07); }
    to   { opacity: 1; transform: none; }
}
@keyframes fp-shine {
    0%, 20% { background-position: 100% center; }
    100%    { background-position: -20% center; }
}
@keyframes fp-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-40px, 30px, 0) scale(1.08); }
}
@keyframes fp-ping {
    0%   { box-shadow: 0 0 0 0 rgba(var(--fp-accent-rgb), 0.65); }
    80%  { box-shadow: 0 0 0 9px rgba(var(--fp-accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--fp-accent-rgb), 0); }
}
@keyframes fp-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
@keyframes fp-bump {
    0%   { transform: translateY(-3px) scale(1.04); }
    100% { transform: none; }
}
@keyframes fp-indeterminate {
    0%   { left: -42%; }
    100% { left: 100%; }
}
@keyframes fp-rotate {
    to { --fp-angle: 360deg; }
}
@keyframes fp-sweep {
    0%, 55% { background-position: 120% 0; }
    100%    { background-position: -40% 0; }
}
@keyframes fp-cta-pulse {
    0%, 100% { box-shadow: 0 12px 24px rgba(var(--warning-rgb), 0.22), 0 6px 14px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(var(--warning-rgb), 0.4); }
    50%      { box-shadow: 0 14px 28px rgba(var(--warning-rgb), 0.30), 0 6px 14px rgba(0, 0, 0, 0.2), 0 0 0 8px rgba(var(--warning-rgb), 0); }
}
@keyframes fp-tier-glow {
    0%, 100% { box-shadow: 0 24px 54px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--fp-tier-rgb), 0.14), 0 0 38px rgba(var(--fp-tier-rgb), 0.08); }
    50%      { box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55), 0 0 28px rgba(var(--fp-tier-rgb), 0.26), 0 0 50px rgba(var(--fp-tier-rgb), 0.14); }
}
/* The light running down a timeline connector. */
@keyframes fp-run {
    0%        { background-position: 0 -70%, 0 0; }
    70%, 100% { background-position: 0 180%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fp-page *,
    .fp-page *::before,
    .fp-page *::after {
        animation: none !important;
        transition: none !important;
    }
}