/* ============================================================================
   FPVR NATS join page — canon CSS
   ============================================================================
   This stylesheet was extracted from the inline <style> block of the NATS
   join template (templates/site/join in NATS admin) to make it cacheable +
   editable independently of the Smarty template.

   Deployment:
     /NATS/fpvr-join.css   on the live host (i.e. www.fuckpassvr.com/NATS/...)

   The join.php template references this file via:
     <link rel="stylesheet" href="//{$siteDomain}/NATS/fpvr-join.css?v=N">

   Cache busting:
     Bump ?v=N in the template <link> tag whenever this file is edited so
     repeat visitors get the fresh CSS.

   Architecture notes:
     - This file is loaded AFTER /NATS/main_2.css (which has legacy .pricely__*
       rules + a #plans rule with `gap: 50px` + nth-child(2n) silver gradient).
       We sidestep #plans by using id="fpvrPlanGrid" on the new plan grid.
     - The template's id="fpvrPlanGrid" is intentional — do not rename it back
       to "plans" without first auditing /NATS/main_2.css line ~6678 for
       conflicting rules.

   ----------------------------------------------------------------------------
   Last updated: 2026-05-28 (extracted from inline; future edits happen here)
   ============================================================================ */

    :root {
        --c-bg: #0B1024;
        --c-bg-elev-1: #141A33;
        --c-bg-elev-2: #1E2647;
        --c-text: #F5F5FF;
        --c-text-dim: rgba(245,245,255,.72);
        --c-text-muted: rgba(245,245,255,.45);
        --c-brand: #F53C46;
        --c-brand-light: #FF6B73;
        --c-brand-deep: #C2202B;
        --c-border: rgba(245,245,255,.08);
        --c-success: #1FBA63;
        /* radius tokens used by canon footer */
        --r-sm: 10px;
        --r-md: 14px;
        --r-pill: 999px;
    }
    * { box-sizing: border-box; }
    html, body {
        margin: 0 !important; padding: 0 !important;
        background: var(--c-bg) !important; color: var(--c-text) !important;
        font-family: 'Montserrat', system-ui, sans-serif !important; font-size: 16px;
        -webkit-font-smoothing: antialiased; scroll-behavior: smooth;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; height: auto; display: block; }
    button { font-family: inherit; cursor: pointer; }
    .join_error {
        background: rgba(245,60,70,.12);
        border: 1px solid rgba(245,60,70,.4);
        color: var(--c-brand);
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 12px;
        margin-bottom: 12px;
    }
    .hide { display: none !important; }

    /* Topbar — pixel-matches homepage `.header-promo` styling.
       Verified 2026-05-28 via getComputedStyle on www.fuckpassvr.com:
       bg #000, h 40px, body white 13px weight 500, strong brand-red
       weight 800, icon brand-red 14px, gap 8px, padding 0 24px. */
    .fpvr-topbar.header-promo {
        background: #000;
        color: #fff;
        padding: 0 24px;
        height: 40px;
        text-align: center;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .2px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .fpvr-topbar .header-promo__icon {
        color: var(--c-brand);
        width: 18px;
        height: 16px;
        display: inline-block;
        flex-shrink: 0;
    }
    /* Strong inside topbar is brand-RED (not white) — was the main miss. */
    .fpvr-topbar strong {
        color: var(--c-brand);
        font-weight: 800;
    }

    /* Header */
    .fpvr-headerBar {
        background: rgba(11, 16, 36, .92);
        border-bottom: 1px solid var(--c-border);
        width: 100%;
        position: sticky; top: 0; z-index: 50;
    }
    .fpvr-header {
        padding: 16px 55px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1700px;
        margin: 0 auto;
    }
    .fpvr-header__logo { display: flex; align-items: center; line-height: 0; }
    .fpvr-header__logo img { height: 40px; width: auto; }
    .fpvr-header__nav {
        display: flex; align-items: center; gap: 14px;
        font-size: 13px; color: var(--c-text-dim);
    }
    .fpvr-header__nav a:hover { color: var(--c-text); }

    /* Hero */
    .fpvr-hero {
        text-align: center;
        padding: 56px 55px 24px;
        max-width: 1700px;
        margin: 0 auto;
        position: relative;
    }
    .fpvr-hero__eyebrow {
        display: inline-flex; align-items: center; gap: 10px;
        font-size: 11px; font-weight: 800; letter-spacing: 2px;
        text-transform: uppercase; color: var(--c-brand);
        margin-bottom: 14px;
    }
    .fpvr-hero__dot {
        width: 7px; height: 7px; border-radius: 50%; background: var(--c-brand);
        animation: heroDot 2.2s infinite;
    }
    @keyframes heroDot {
        0% { box-shadow: 0 0 0 0 rgba(245,60,70,.65); }
        70% { box-shadow: 0 0 0 8px rgba(245,60,70,0); }
        100% { box-shadow: 0 0 0 0 rgba(245,60,70,0); }
    }
    .fpvr-hero__h1 {
        font-size: 44px; font-weight: 900;
        letter-spacing: -1px; line-height: 1.05;
        margin: 0 auto 14px;
        max-width: 1200px;        /* roomy enough for "Your passport. Their bodies. No limits." on one line at desktop */
    }
    .fpvr-hero__h1 em { font-style: normal; color: var(--c-brand); }
    .fpvr-hero__sub {
        font-size: 15px; color: var(--c-text-dim);
        margin: 0 auto 28px; line-height: 1.6;
        max-width: 760px;         /* wider per operator request */
    }
    .fpvr-headsets {
        display: flex; justify-content: center; align-items: center;
        gap: 10px; flex-wrap: wrap; margin-bottom: 20px;
    }
    .fpvr-headsets__label {
        font-size: 10px; font-weight: 800; letter-spacing: 2px;
        text-transform: uppercase; color: var(--c-text-muted); margin-right: 6px;
    }
    .fpvr-headsets__chip {
        display: inline-flex; align-items: center; gap: 6px;
        background: rgba(11,16,36,.6);
        border: 1px solid var(--c-border);
        padding: 7px 12px;
        border-radius: 999px;
        font-size: 12px; font-weight: 700; color: var(--c-text-dim);
    }
    .fpvr-headsets__chip .dot {
        width: 6px; height: 6px; background: var(--c-success); border-radius: 50%;
    }
    .fpvr-trustMicro {
        display: flex; justify-content: center; align-items: center;
        gap: 18px; flex-wrap: wrap;
        margin-bottom: 36px;
        font-size: 12px; color: var(--c-text-dim);
    }
    .fpvr-trustMicro__item {
        display: inline-flex; align-items: center; gap: 6px;
    }
    .fpvr-trustMicro__item svg { color: var(--c-brand); }
    .fpvr-statsPanel {
        max-width: 1700px;
        margin: 0 auto 56px;
        background: linear-gradient(135deg, var(--c-bg-elev-1), var(--c-bg-elev-2));
        border: 1px solid var(--c-border);
        border-radius: 16px;
        padding: 22px 32px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        position: relative;
        overflow: hidden;
    }
    .fpvr-statsPanel::before {
        content: ""; position: absolute; top: 0; right: 0;
        width: 280px; height: 200px;
        background: radial-gradient(circle at 92% 12%, rgba(245,60,70,.16), transparent 55%);
        pointer-events: none;
    }
    .fpvr-statsPanel__stat { text-align: center; position: relative; }
    .fpvr-statsPanel__num {
        font-size: 26px; font-weight: 900; color: var(--c-brand);
        line-height: 1; letter-spacing: -.5px;
    }
    .fpvr-statsPanel__label {
        font-size: 10px; font-weight: 800; letter-spacing: 1.6px;
        text-transform: uppercase; color: var(--c-text-dim); margin-top: 6px;
    }

    /* Activity ticker — sits nested inside .fpvr-proof now, so no outer
       max-width / padding needed; parent handles it. Margins tightened to
       form a unified block with statement above + tiles below. */
    .fpvr-ticker {
        margin: 0 auto 28px;
        text-align: center;
    }
    .fpvr-ticker__card {
        background: rgba(31, 186, 99, .12);
        border: 1px solid rgba(31, 186, 99, .32);
        border-radius: 999px;
        padding: 14px 28px;
        display: inline-flex; align-items: center; gap: 12px;
        font-size: 14px; color: var(--c-text-dim);
        box-shadow: 0 8px 20px rgba(31, 186, 99, .12);
    }
    .fpvr-ticker__pulse {
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--c-success);
        animation: tickerPulse 2s infinite;
        flex-shrink: 0;
    }
    @keyframes tickerPulse {
        0% { box-shadow: 0 0 0 0 rgba(31,186,99,.65); }
        70% { box-shadow: 0 0 0 6px rgba(31,186,99,0); }
        100% { box-shadow: 0 0 0 0 rgba(31,186,99,0); }
    }
    .fpvr-ticker__text { transition: opacity .25s ease; }
    .fpvr-ticker__text strong { color: var(--c-text); font-weight: 700; }
    .fpvr-ticker__text em { font-style: normal; color: var(--c-brand); font-weight: 600; }
    /* Twemoji-rendered flag images — size them to match the inline text */
    .fpvr-ticker__text img.emoji {
        height: 14px;
        width: auto;
        margin: 0 2px;
        vertical-align: -2px;
        display: inline-block;
    }

    /* Social proof */
    .fpvr-proof {
        max-width: 1700px;
        margin: 0 auto 48px;
        padding: 0 55px;
        text-align: center;
    }
    .fpvr-proof__head {
        font-size: 11px; font-weight: 800; letter-spacing: 2.4px;
        text-transform: uppercase; color: var(--c-brand); margin-bottom: 12px;
    }
    .fpvr-proof__statement {
        font-size: 20px; font-weight: 700; color: var(--c-text);
        line-height: 1.3; letter-spacing: -.3px;
        margin: 0 auto 24px; max-width: 720px;
    }
    .fpvr-proof__statement strong { color: var(--c-brand); font-weight: 900; }
    .fpvr-proof__stats {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    }
    .fpvr-proof__stat {
        background: linear-gradient(135deg, var(--c-bg-elev-1), var(--c-bg-elev-2));
        border: 1px solid var(--c-border);
        border-radius: 14px;
        padding: 22px 16px;
        position: relative;
        overflow: hidden;
    }
    .fpvr-proof__stat::before {
        content: ""; position: absolute; top: 0; right: 0;
        width: 120px; height: 80px;
        background: radial-gradient(circle at 90% 10%, rgba(245,60,70,.12), transparent 60%);
        pointer-events: none;
    }
    .fpvr-proof__num, .fpvr-proof__label { position: relative; }
    .fpvr-proof__num {
        font-size: 26px; font-weight: 900; color: var(--c-text);
        line-height: 1; letter-spacing: -.4px;
    }
    .fpvr-proof__label {
        font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
        text-transform: uppercase; color: var(--c-text-dim); margin-top: 6px;
    }

    /* Plan picker */
    .fpvr-plans {
        max-width: 1700px;
        margin: 0 auto;
        padding: 0 55px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
        align-items: stretch;
    }
    .fpvr-plan {
        background: linear-gradient(135deg, var(--c-bg-elev-1), var(--c-bg-elev-2));
        border: 1px solid var(--c-border);
        border-radius: 18px;
        /* Top padding 48px reserves room for the absolute-positioned
           .pricely__headline eyebrow + .pricely__discount-bottom badge that
           live in the top-left + top-right corners. Without this, the price
           section overlaps them. Bumped 2026-05-28 R2. */
        padding: 48px 18px 26px;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        text-align: center;
        cursor: pointer;
        transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .fpvr-plan::before {
        content: ""; position: absolute; top: 0; right: 0;
        width: 200px; height: 140px;
        background: radial-gradient(circle at 92% 10%, rgba(245,60,70,.10), transparent 60%);
        pointer-events: none;
    }
    .fpvr-plan > * { position: relative; }
    .fpvr-plan:hover {
        transform: translateY(-3px);
        border-color: rgba(245,60,70,.32);
        box-shadow: 0 20px 40px rgba(0,0,0,.4);
    }
    .fpvr-plan.is-selected {
        border-color: rgba(245,60,70,.65);
        box-shadow: 0 0 0 2px var(--c-brand), 0 24px 50px rgba(245,60,70,.22);
        transform: translateY(-4px);
    }
    .fpvr-plan.is-selected::before {
        background: radial-gradient(circle at 92% 10%, rgba(245,60,70,.30), transparent 55%);
    }
    .fpvr-plan--best {
        border-color: rgba(245,60,70,.5);
    }
    .fpvr-plan--best.is-selected {
        box-shadow:
            0 0 0 2px var(--c-brand),
            0 24px 50px rgba(245,60,70,.28),
            0 0 60px 8px rgba(245,60,70,.18);
    }
    /* Modern ambient glow on the yearly (best) card — a soft, persistent
       multi-layer breathing glow with subtle color drift. Replaces the older
       3-cycle hard pulse. Stripped on first user click via is-attention class. */
    @keyframes ambientGlowBest {
        0% {
            box-shadow:
                0 0 0 2px var(--c-brand),
                0 24px 50px rgba(245,60,70,.28),
                0 0 60px 6px rgba(245,60,70,.20),
                0 0 100px 12px rgba(245,60,70,.10);
        }
        50% {
            box-shadow:
                0 0 0 2px var(--c-brand),
                0 24px 50px rgba(245,60,70,.32),
                0 0 80px 12px rgba(245,60,70,.32),
                0 0 140px 24px rgba(255,80,90,.16);
        }
        100% {
            box-shadow:
                0 0 0 2px var(--c-brand),
                0 24px 50px rgba(245,60,70,.28),
                0 0 60px 6px rgba(245,60,70,.20),
                0 0 100px 12px rgba(245,60,70,.10);
        }
    }
    .fpvr-plan--best.is-attention {
        animation: ambientGlowBest 4s ease-in-out infinite;
    }
    .fpvr-plan__badge {
        position: absolute;
        top: -1px; left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #F53C46, #C2202B);
        color: #fff;
        font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
        text-transform: uppercase;
        padding: 5px 14px;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 4px 12px rgba(245,60,70,.4);
        z-index: 2;
    }
    .pricely__discount-bottom {
        position: absolute;
        top: 14px; right: 14px;
        background: rgba(31,186,99,.18);
        border: 1px solid rgba(31,186,99,.4);
        color: var(--c-success);
        font-size: 10px; font-weight: 800; letter-spacing: 1px;
        padding: 4px 8px;
        border-radius: 6px;
        z-index: 2;
    }
    /* Headline (plan name from meta.json) — top-LEFT eyebrow, paired with the
       20% OFF discount badge top-right. Restyled 2026-05-28 R2: was centered
       below the badge which made the upper area visually unbalanced (title
       competed with badge for the same vertical band). Now they're symmetric
       corner labels and the price below becomes the focal point. */
    .pricely__headline {
        position: absolute;
        top: 18px; left: 16px;
        margin: 0;
        font-size: 11px; font-weight: 800;
        letter-spacing: 1.5px; text-transform: uppercase;
        color: var(--c-text-dim);
        text-align: left;
        z-index: 1;
    }
    .fpvr-plan.is-selected .pricely__headline { color: var(--c-brand); }
    .fpvr-plan__price {
        margin-bottom: 4px;
        display: flex; align-items: baseline; justify-content: center; gap: 2px;
    }
    .fpvr-plan__priceCurrency {
        font-size: 22px; font-weight: 700; color: var(--c-text); line-height: 1;
    }
    .fpvr-plan__priceAmount {
        font-size: 56px; font-weight: 900; color: var(--c-text);
        letter-spacing: -2px; line-height: 1;
    }
    .fpvr-plan__pricePeriod {
        font-size: 12px; color: var(--c-text-muted); font-weight: 600;
        margin-left: 4px; text-transform: lowercase;
    }
    .fpvr-plan__billing {
        font-size: 11px; color: var(--c-text-dim);
        margin: 8px 0 18px; line-height: 1.4;
    }
    .fpvr-plan__billing strong { color: var(--c-text); font-weight: 700; }
    .fpvr-plan__billingAutoRenew {
        display: block; margin-top: 4px;
        font-size: 10px; color: var(--c-text-muted);
    }
    .fpvr-plan__features {
        list-style: none; padding: 0; margin: 18px 0 20px;
        text-align: left;
        font-size: 13px; color: var(--c-text-dim); line-height: 1.6;
        flex-grow: 1;
    }
    .fpvr-plan__features li {
        padding-left: 24px;
        position: relative;
        margin-bottom: 8px;
    }
    .fpvr-plan__features li::before {
        content: "✓"; position: absolute;
        left: 0; top: 4px;
        width: 16px; height: 16px;
        background: var(--c-brand);
        border-radius: 50%;
        color: #fff; font-size: 9px; font-weight: 900;
        display: flex; align-items: center; justify-content: center;
    }
    .fpvr-plan__cta {
        width: 100%; padding: 14px 22px;
        background: transparent; color: var(--c-text);
        border: 1px solid var(--c-border);
        font-size: 12px; font-weight: 800; letter-spacing: 1.4px;
        text-transform: uppercase;
        border-radius: 999px;
        transition: all .25s ease;
    }
    .fpvr-plan:hover .fpvr-plan__cta {
        border-color: rgba(245,60,70,.5); color: #fff;
    }
    .fpvr-plan.is-selected .fpvr-plan__cta {
        background: linear-gradient(135deg, #F53C46, #C2202B);
        color: #fff; border-color: transparent;
        box-shadow: 0 8px 18px rgba(245,60,70,.32);
    }
    .fpvr-plan.is-selected .fpvr-plan__cta::before { content: "✓ "; }
    /* Hide pricely__img + line-through-discount hooks. !important + higher specificity
       because NATS-provided main_2.css has its own .pricely__img rules that win
       otherwise — meta.json fetch sets background-image which then renders as a
       horizontal stripe through the headline. */
    .fpvr-plan .pricely__img,
    .fpvr-plan .pricely__img.has-image,
    div.pricely__img { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; }
    .fpvr-plan .line-through-discount-2,
    .fpvr-plan .line-through { display: none !important; height: 0 !important; }

    /* Trust marks row */
    .fpvr-trust {
        max-width: 1700px;
        margin: 44px auto 0;
        padding: 0 55px;
        text-align: center;
    }
    .fpvr-trust__row {
        background: linear-gradient(135deg, var(--c-bg-elev-1), var(--c-bg-elev-2));
        border: 1px solid var(--c-border);
        border-radius: 16px;
        padding: 22px 32px;
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        gap: 26px;
    }
    .fpvr-trust__item {
        display: flex; align-items: center; gap: 10px;
        font-size: 12px; font-weight: 700; color: var(--c-text-dim);
        letter-spacing: .2px;
    }
    /* Uniform chip — same background, size, border-radius across all trust
       icons. Brand color accents are inset (via color/inner border) instead
       of swapping the whole background, for a more refined look. */
    .fpvr-trust__icon {
        width: 36px; height: 28px;
        background: rgba(11, 16, 36, .55);
        border: 1px solid rgba(245, 245, 255, .12);
        border-radius: 6px;
        display: flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 900; color: var(--c-text);
        letter-spacing: .3px;
        transition: border-color .2s;
    }
    .fpvr-trust__icon--epoch {
        background: rgba(26, 114, 196, .15);
        border-color: rgba(26, 114, 196, .55);
        color: #6CB0F0;
        font-size: 9px;
        letter-spacing: 1.2px;
    }
    .fpvr-trust__icon--ssl {
        background: rgba(31, 186, 99, .12);
        border-color: rgba(31, 186, 99, .45);
        color: var(--c-success);
    }
    .fpvr-trust__divider {
        width: 1px; height: 22px;
        background: var(--c-border);
    }

    /* Signup form */
    .fpvr-signup {
        max-width: 1700px;
        margin: 48px auto 0;
        padding: 0 55px;
        scroll-margin-top: 90px;
    }
    .fpvr-signup__panel {
        background: linear-gradient(135deg, var(--c-bg-elev-1), var(--c-bg-elev-2));
        border: 1px solid var(--c-border);
        border-radius: 18px;
        padding: 28px 32px 32px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 24px 48px rgba(0,0,0,.4);
        max-width: 560px;
        margin: 0 auto;
    }
    .fpvr-signup__panel::before {
        content: ""; position: absolute; top: 0; right: 0;
        width: 280px; height: 200px;
        background: radial-gradient(circle at 92% 12%, rgba(245,60,70,.18), transparent 55%);
        pointer-events: none;
    }
    .fpvr-signup__panel > * { position: relative; }
    /* Picked-plan panel — restructured 2026-05-28 so "Change plan" is a
       prominent pill button below the plan/price row, not a tiny dim link
       in the corner. */
    .fpvr-signup__pickedPlan {
        background: rgba(11,16,36,.5);
        border: 1px solid var(--c-border);
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 24px;
    }
    .fpvr-signup__pickedPlanRow {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 10px;
    }
    .fpvr-signup__pickedPlanLeft { display: flex; flex-direction: column; gap: 2px; }
    .fpvr-signup__pickedPlanLabel {
        font-size: 9px; font-weight: 800; letter-spacing: 1.6px;
        text-transform: uppercase; color: var(--c-text-muted);
    }
    .fpvr-signup__pickedPlanName {
        font-size: 15px; font-weight: 800; color: var(--c-text);
    }
    .fpvr-signup__pickedPlanRight { text-align: right; display: flex; flex-direction: column; gap: 2px; }
    .fpvr-signup__pickedPlanPrice {
        font-size: 17px; font-weight: 900; color: var(--c-brand); line-height: 1;
    }
    /* "Change plan" pill button — visible, full-width inside panel */
    .fpvr-signup__pickedPlanChange {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 9px 16px;
        background: rgba(245, 60, 70, .12);
        border: 1px solid rgba(245, 60, 70, .35);
        color: var(--c-brand);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 999px;
        transition: background .2s, border-color .2s, color .2s, transform .15s;
        cursor: pointer;
    }
    .fpvr-signup__pickedPlanChange:hover {
        background: rgba(245, 60, 70, .22);
        border-color: var(--c-brand);
        color: #fff;
    }
    .fpvr-signup__pickedPlanChange::before {
        content: "↑";
        font-size: 13px;
        line-height: 1;
        display: inline-block;
    }
    .fpvr-signup__h {
        font-size: 24px; font-weight: 700; letter-spacing: -.4px;
        text-align: center; margin: 0 0 4px; color: var(--c-text);
    }
    .fpvr-signup__sub {
        text-align: center; font-size: 13px;
        color: var(--c-text-dim); margin: 0 0 24px;
    }
    .fpvr-signup__field { margin-bottom: 16px; }
    .fpvr-signup__label {
        display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
        text-transform: uppercase; color: var(--c-text-dim); margin-bottom: 6px;
    }
    .fpvr-signup__input {
        width: 100%; padding: 14px 16px;
        background: rgba(11,16,36,.7);
        border: 1px solid var(--c-border);
        border-radius: 10px;
        color: var(--c-text); font-size: 14px; font-weight: 500;
        transition: border-color .2s, background .2s;
        outline: none;
        font-family: inherit;
    }
    .fpvr-signup__input:focus {
        border-color: var(--c-brand);
        background: rgba(11,16,36,.85);
    }
    .fpvr-signup__input::placeholder { color: var(--c-text-muted); font-weight: 400; }
    /* Opt-in checkbox row — checkbox sized appropriately + aligned to first
       line of the multi-line label using line-height-matched offset. */
    .fpvr-signup__optin {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 12px;
        color: var(--c-text-dim);
        margin: 16px 0 8px;
        line-height: 1.55;
        cursor: pointer;
    }
    .fpvr-signup__optin input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 2px 0 0;        /* aligns with first line of text given line-height 1.55 */
        accent-color: var(--c-brand);
        flex-shrink: 0;
        cursor: pointer;
    }
    .fpvr-signup__optin span {
        flex: 1;
        text-align: left;
    }
    .fpvr-signup__trustTrail {
        background: rgba(31,186,99,.06);
        border: 1px solid rgba(31,186,99,.20);
        border-radius: 10px;
        padding: 10px 14px;
        margin: 18px 0;
        font-size: 12px; color: var(--c-text-dim); text-align: center;
    }
    .fpvr-signup__trustTrail strong { color: var(--c-text); font-weight: 700; }
    .fpvr-signup__trustTrail .brand-name { color: var(--c-brand); font-weight: 800; }
    .fpvr-signup__submit {
        width: 100%; padding: 16px 22px;
        background: linear-gradient(135deg, #F53C46, #C2202B);
        color: #fff;
        font-size: 13px; font-weight: 800; letter-spacing: 1.4px;
        text-transform: uppercase;
        border: 0;
        border-radius: 999px;
        box-shadow: 0 10px 22px rgba(245,60,70,.36);
        transition: transform .2s, box-shadow .2s;
        display: flex; align-items: center; justify-content: center; gap: 10px;
    }
    .fpvr-signup__submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(245,60,70,.5);
    }
    .fpvr-signup__trustRow {
        display: flex; justify-content: center; align-items: center;
        gap: 16px; margin-top: 18px;
        font-size: 11px; color: var(--c-text-muted);
        flex-wrap: wrap;
    }
    .fpvr-signup__trustRow span { display: inline-flex; align-items: center; gap: 4px; }
    .fpvr-signup__legal {
        text-align: center; margin-top: 16px;
        font-size: 11px; color: var(--c-text-muted); line-height: 1.6;
    }
    .fpvr-signup__legal a { color: var(--c-text-dim); text-decoration: underline; }
    .fpvr-signup__legal a:hover { color: var(--c-brand); }
    /* NATS captcha — restyle for canon dark */
    .fpvr-signup fieldset {
        border: 1px solid var(--c-border);
        border-radius: 10px;
        padding: 16px;
        margin: 16px 0;
    }
    .fpvr-signup fieldset legend {
        font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
        text-transform: uppercase; color: var(--c-text-dim);
        padding: 0 8px;
    }

    /* Benefits / FAQ / Footer */
    .fpvr-benefits {
        max-width: 1700px;
        margin: 80px auto 0;
        padding: 0 55px;
    }
    .fpvr-benefits__head { text-align: center; margin-bottom: 36px; }
    .fpvr-benefits__eyebrow {
        font-size: 11px; font-weight: 800; letter-spacing: 2px;
        text-transform: uppercase; color: var(--c-brand);
    }
    .fpvr-benefits__h {
        font-size: 28px; font-weight: 700;
        letter-spacing: -.4px; line-height: 1.15;
        margin: 8px 0 0;
    }
    .fpvr-benefits__h em { font-style: normal; color: var(--c-brand); }
    .fpvr-benefits__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        max-width: 1700px;
        margin: 0 auto;
    }
    .fpvr-benefit {
        background: linear-gradient(135deg, var(--c-bg-elev-1), var(--c-bg-elev-2));
        border: 1px solid var(--c-border);
        border-radius: 16px;
        padding: 24px;
        display: flex; gap: 14px; align-items: flex-start;
    }
    .fpvr-benefit__icon {
        width: 42px; height: 42px;
        background: rgba(245,60,70,.12); color: var(--c-brand);
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .fpvr-benefit__h {
        font-size: 14px; font-weight: 800;
        margin: 0 0 4px; color: var(--c-text);
    }
    .fpvr-benefit__sub {
        font-size: 12px; color: var(--c-text-dim); margin: 0; line-height: 1.5;
    }
    .fpvr-faq {
        max-width: 1700px;
        margin: 80px auto 0;
        padding: 0 55px;
    }
    /* Inner cap removed 2026-05-28 — section now fills the full canon outer
       width (matches plan picker + trust marks bounds, no inset rhythm gap). */
    .fpvr-faq__inner { margin: 0 auto; }
    .fpvr-faq__head { text-align: center; margin-bottom: 28px; }
    .fpvr-faq__eyebrow {
        font-size: 11px; font-weight: 800; letter-spacing: 2px;
        text-transform: uppercase; color: var(--c-brand);
    }
    .fpvr-faq__h {
        font-size: 28px; font-weight: 700;
        letter-spacing: -.4px; line-height: 1.15;
        margin: 8px 0 0;
    }
    .fpvr-faq__item {
        background: rgba(11,16,36,.5);
        border: 1px solid var(--c-border);
        border-radius: 12px;
        margin-bottom: 10px;
        overflow: hidden;
    }
    .fpvr-faq__q {
        padding: 16px 20px;
        width: 100%;
        background: transparent;
        color: var(--c-text);
        border: 0;
        font-size: 14px; font-weight: 700;
        text-align: left; cursor: pointer; font-family: inherit;
        display: flex; justify-content: space-between; align-items: center;
        list-style: none;
    }
    .fpvr-faq__q::-webkit-details-marker { display: none; }
    .fpvr-faq__chevron {
        color: var(--c-brand);
        transition: transform .25s ease;
    }
    details[open] .fpvr-faq__chevron { transform: rotate(180deg); }
    .fpvr-faq__a {
        padding: 0 20px 18px;
        color: var(--c-text-dim);
        font-size: 13px; line-height: 1.6;
    }
    /* ── Canon footer — mirrors www.fuckpassvr.com homepage footer 2026-05-28 ── */
    .fpvr-footer {
        width: 100%;
        background: var(--c-bg-elev-1);
        color: var(--c-text-dim);
        margin-top: 64px;
        font-size: 14px;
        line-height: 1.55;
        position: relative;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }
    .fpvr-footer::before {
        content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg, transparent 0%, rgba(245, 60, 70, 0.5) 30%, var(--c-brand) 50%, rgba(245, 60, 70, 0.5) 70%, transparent 100%);
        pointer-events: none; z-index: 1;
    }
    .fpvr-footer::after {
        content: ''; position: absolute; top: -1px; left: 25%; right: 25%; height: 14px;
        background: radial-gradient(ellipse at center top, rgba(245, 60, 70, 0.3), transparent 65%);
        pointer-events: none; filter: blur(1px);
    }
    /* Width capped to 1700px to match the rest of the join page sections —
       2026-05-28 fix (homepage uses 1920px but join page elsewhere is 1700). */
    .fpvr-footer__inner { max-width: 1700px; margin: 0 auto; padding: 64px 55px 32px; box-sizing: border-box; }
    .fpvr-footer__cols {
        /* Join page uses 4 cols (no partner banner — removed 2026-05-28 since
           the join page itself is the conversion surface, no need for sister
           site promo here). */
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 40px;
        padding-bottom: 40px;
        border-bottom: 1px solid var(--c-border);
    }
    .fpvr-footer__brand {
        max-width: 360px;
        text-align: left;   /* explicit — same Vuetify h3/p default-center issue as colHead */
    }
    .fpvr-footer__logo { display: inline-block; margin: 0 0 16px; }
    .fpvr-footer__logo img { height: 48px; width: auto; display: block; }
    .fpvr-footer__blurb { color: var(--c-text-dim); font-size: 13px; line-height: 1.6; margin: 0 0 18px; }
    .fpvr-footer__blurbSpec { display: block; margin-top: 4px; color: var(--c-text-muted); font-size: 12px; letter-spacing: 0.2px; }
    .fpvr-footer__stats { display: flex; gap: 24px; margin: 0 0 20px; }
    .fpvr-footer__stat strong { display: block; font-size: 22px; font-weight: 800; color: var(--c-text); line-height: 1; }
    .fpvr-footer__stat span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-text-muted); font-weight: 600; margin-top: 4px; }
    .fpvr-footer__social { display: flex; gap: 10px; }
    .fpvr-footer__social a {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border-radius: 50%;
        background: var(--c-bg-elev-2); border: 1px solid var(--c-border);
        color: var(--c-text-dim); text-decoration: none; font-size: 14px;
        transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
    }
    .fpvr-footer__social a:hover { background: rgba(245, 60, 70, 0.12); border-color: var(--c-brand); color: var(--c-brand-light); transform: translateY(-2px); }
    .fpvr-footer__social a svg { width: 14px; height: 14px; display: block; }
    .fpvr-footer__col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;  /* ensures column heads + links share the same left edge */
    }
    .fpvr-footer__colHead {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #fff;
        margin: 0 0 16px;
        text-align: left;     /* explicit override — Vuetify h3 default centers in some configs */
    }
    .fpvr-footer__link {
        color: var(--c-text-dim) !important; font-size: 13px; text-decoration: none !important;
        padding: 4px 0; transition: color 0.18s, transform 0.18s;
        display: inline-block; width: fit-content;
    }
    .fpvr-footer__link:hover { color: var(--c-brand-light) !important; transform: translateX(2px); }
    .fpvr-footer__partnerCol { align-items: stretch; }
    .fpvr-footer__partnerBanner { display: block; border-radius: var(--r-sm); overflow: hidden; transition: transform 0.22s; }
    .fpvr-footer__partnerImg, .fpvr-footer__partnerBanner img { width: 100%; max-width: 100%; height: auto; display: block; border-radius: var(--r-sm); transition: transform 0.22s; }
    .fpvr-footer__partnerBanner a { display: block; text-decoration: none; }
    .fpvr-footer__partnerBanner:hover img, .fpvr-footer__partnerBanner a:hover img { transform: scale(1.015); }
    .fpvr-footer__trust { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 0 24px; }
    .fpvr-footer__trustRow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: 0 1 auto; }
    .fpvr-footer__trustBadge {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 12px; border-radius: var(--r-pill);
        background: var(--c-bg-elev-2); border: 1px solid var(--c-border);
        color: var(--c-text-dim); font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
        text-decoration: none; transition: 0.18s ease;
    }
    .fpvr-footer__trustBadge i { color: var(--c-success); font-size: 11px; }
    .fpvr-footer__trustBadge svg { width: 11px; height: 11px; color: var(--c-success); flex-shrink: 0; }
    .fpvr-footer__trustBadge--link:hover { background: rgba(52, 211, 153, 0.10); border-color: rgba(52, 211, 153, 0.4); color: #fff; }
    .fpvr-footer__copyright { color: var(--c-text-muted); font-size: 12px; letter-spacing: 0.2px; text-align: right; margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
    @media (min-width: 1701px) {
        .fpvr-footer__inner { padding: 64px 85px 32px; }
    }
    @media (max-width: 1280px) {
        .fpvr-footer__cols { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
        .fpvr-footer__brand { grid-column: 1 / -1; max-width: none; }
    }
    @media (max-width: 1090px) {
        .fpvr-footer__inner { padding: 48px 40px 24px; }
        .fpvr-footer__cols { grid-template-columns: 1fr 1fr; gap: 36px; }
        .fpvr-footer__brand { grid-column: 1 / -1; max-width: none; }
        .fpvr-footer__partnerCol { grid-column: 1 / -1; }
    }
    @media (max-width: 700px) {
        .fpvr-footer__inner { padding: 40px 20px 24px; }
        .fpvr-footer__cols { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; }
        .fpvr-footer__trust { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 0; }
        .fpvr-footer__copyright { text-align: left; margin-left: 0; white-space: normal; }
    }

    /* Responsive */
    @media (min-width: 1701px) {
        .fpvr-hero, .fpvr-ticker, .fpvr-proof, .fpvr-plans, .fpvr-trust, .fpvr-signup, .fpvr-benefits, .fpvr-faq, .fpvr-footer {
            padding-left: 85px;
            padding-right: 85px;
        }
        .fpvr-header { padding: 16px 85px; }
    }
    @media (max-width: 1090px) {
        .fpvr-plans { grid-template-columns: repeat(2, 1fr); }
        .fpvr-statsPanel { grid-template-columns: repeat(2, 1fr); }
        .fpvr-proof__stats { grid-template-columns: repeat(2, 1fr); }
        .fpvr-benefits__grid { grid-template-columns: repeat(2, 1fr); }
        .fpvr-hero, .fpvr-ticker, .fpvr-proof, .fpvr-plans, .fpvr-trust, .fpvr-signup, .fpvr-benefits, .fpvr-faq, .fpvr-footer {
            padding-left: 40px; padding-right: 40px;
        }
        .fpvr-header { padding: 14px 40px; }
    }
    /* Topbar — keep both promo messages on a single line. The "__long" message
       is too wide for mobile (215px on a 375 viewport), so it's hidden ≤700px
       and the short variant carries the topbar copy alone. Reason for forcing
       nowrap: without it the long variant wraps to 2 lines + bleeds vertically
       past the 40px topbar height into the header below it. Caught 2026-05-28
       mobile QA. */
    .fpvr-topbar .header-promo__short,
    .fpvr-topbar .header-promo__long { white-space: nowrap; }
    @media (max-width: 700px) {
        .fpvr-topbar .header-promo__long { display: none; }
        .fpvr-topbar { font-size: 11px; padding: 8px 12px; }
        .fpvr-header { padding: 14px 20px; flex-wrap: wrap; gap: 8px; }
        /* iOS auto-zooms any focused <input> with computed font-size < 16px,
           which yanks the layout sideways the moment a user taps a field.
           Bump to 16px on mobile to prevent that — 14px stays on desktop. */
        .fpvr-signup__input { font-size: 16px; }
        .fpvr-header__nav a { font-size: 12px; }
        .fpvr-hero, .fpvr-ticker, .fpvr-proof, .fpvr-plans, .fpvr-trust, .fpvr-signup, .fpvr-benefits, .fpvr-faq, .fpvr-footer {
            padding-left: 20px; padding-right: 20px;
        }
        .fpvr-hero { padding-top: 36px; padding-bottom: 16px; }
        .fpvr-hero__h1 { font-size: 30px; letter-spacing: -.6px; }
        .fpvr-headsets__label { display: block; width: 100%; margin: 0 0 4px; text-align: center; }
        .fpvr-trustMicro { gap: 12px; }
        .fpvr-statsPanel { padding: 16px; gap: 12px; }
        .fpvr-statsPanel__num { font-size: 22px; }
        .fpvr-ticker__card { font-size: 12px; padding: 9px 16px; }
        .fpvr-proof__statement { font-size: 16px; }
        .fpvr-proof__num { font-size: 22px; }
        .fpvr-trust__row { padding: 18px 20px; gap: 16px; }
        .fpvr-trust__divider { display: none; }
        .fpvr-plans { grid-template-columns: 1fr; }
        .fpvr-plan--best { transform: none; }
        .fpvr-benefits__grid { grid-template-columns: 1fr; }
        .fpvr-benefits__h, .fpvr-faq__h { font-size: 24px; }
        .fpvr-signup { padding: 0 15px; }
        .fpvr-signup__panel { padding: 22px 22px 24px; }
        /* Form heading — was 20px, felt too big inside the card panel relative
           to the YOUR PLAN box above it. Drop to 18px to feel like a card
           heading, not a page section header. 2026-05-28 R2. */
        .fpvr-signup__h { font-size: 18px; line-height: 1.3; letter-spacing: -.3px; }
        /* YOUR PLAN summary — vertical stack on mobile so longer plan names
           ("Plan: 1 Month") and longer billing strings ("$19.95 billed
           monthly") don't fight for horizontal space and wrap awkwardly.
           Eyebrow / plan name / price-line / Change button vertically
           centered. 2026-05-28 R2. */
        .fpvr-signup__pickedPlanRow {
            flex-direction: column;
            align-items: center;
            gap: 6px;
            text-align: center;
            margin-bottom: 12px;
        }
        .fpvr-signup__pickedPlanLeft { align-items: center; }
        .fpvr-signup__pickedPlanRight { text-align: center; align-items: center; }
        .fpvr-signup__pickedPlanLabel,
        .fpvr-signup__pickedPlanName,
        .fpvr-signup__pickedPlanPrice { text-align: center; }
    }
    @media (max-width: 500px) {
        .fpvr-hero__h1 { font-size: 26px; }
        .fpvr-benefits__h, .fpvr-faq__h { font-size: 20px; }
        .fpvr-statsPanel__num { font-size: 18px; }
        .fpvr-statsPanel__label { font-size: 9px; }
        .fpvr-proof__stats { grid-template-columns: repeat(2, 1fr); }
        .fpvr-proof__num { font-size: 20px; }
    }