/* =============================================================
   Register V2 -- redesigned signup page.
   Matches the LandingV2 homepage design system. Selectors use a
   shared .rv2-* class prefix (and a .rv2 wrapper on the root) so
   they cannot collide with the legacy register.css (.register-*)
   classes.
   Tokens come from brand-tokens.css (--brand-*), same as
   landing-v2.css. Dark mode rides the global body.dark-mode class.
   ============================================================= */

.rv2 {
    --rv2-blue: var(--brand-primary, #00B4FF);
    --rv2-blue-deep: var(--brand-secondary, #0174B1);
    --rv2-tint: var(--brand-bg, #F6FBFF);
    --rv2-charcoal: var(--brand-charcoal, #222222);
    --rv2-orange: var(--brand-cta, #FFAA00);
    --rv2-gray: var(--brand-divider, #E0E0E0);
    --rv2-ink-60: #5A6472;
    --rv2-field-border: #D6DEE8;
    --rv2-card: #FFFFFF;

    font-family: 'Inter', system-ui, sans-serif;
    color: var(--rv2-charcoal);
    -webkit-font-smoothing: antialiased;
}

.rv2 *, .rv2 *::before, .rv2 *::after { box-sizing: border-box; }

.rv2 .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* SHELL ----------------------------------------------------- */
.rv2-shell {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    background: var(--rv2-tint);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 96px 24px 48px;
}

.rv2-grid {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    /* DOM order is form-first (so keyboard tab order matches the visual
       form-first order on mobile, per WCAG 2.4.3). On desktop we place
       the value panel on the left and the form on the right via named
       grid areas, keeping the original visual layout. */
    grid-template-areas: "value form";
    gap: 64px;
    align-items: center;
}
.rv2-value { grid-area: value; }
.rv2-form-card { grid-area: form; }

/* VALUE PANEL (left) ---------------------------------------- */
.rv2-value { max-width: 520px; }

.rv2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rv2-blue);
    margin: 0 0 18px;
}

.rv2-value h2 {
    font-weight: 700;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0 0 18px;
    color: var(--rv2-charcoal);
}

.rv2-value .rv2-sub {
    font-size: 18px;
    line-height: 1.5;
    color: var(--rv2-ink-60);
    margin: 0 0 28px;
}
.rv2-value .rv2-sub .rv2-em { font-style: italic; font-weight: 600; color: var(--rv2-charcoal); }

.rv2-price-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--rv2-card);
    border: 1px solid var(--rv2-gray);
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 10px 30px rgba(2, 32, 71, 0.06);
    margin-bottom: 30px;
}
.rv2-price-card .rv2-price { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--rv2-charcoal); }
.rv2-price-card .rv2-price-per { font-size: 15px; color: var(--rv2-ink-60); }
.rv2-price-card .rv2-price-sep { width: 1px; height: 34px; background: var(--rv2-gray); }
.rv2-price-card .rv2-price-trust { font-size: 15px; font-weight: 600; color: var(--rv2-blue-deep); }

.rv2-diffs { display: flex; flex-direction: column; gap: 18px; }
.rv2-diff { display: flex; gap: 14px; align-items: flex-start; }
.rv2-diff .rv2-diff-ico {
    flex: 0 0 22px;
    width: 22px; height: 22px;
    color: var(--rv2-blue);
    margin-top: 2px;
}
.rv2-diff .rv2-diff-ico svg { width: 100%; height: 100%; display: block; }
.rv2-diff .rv2-diff-head { font-weight: 700; font-size: 16px; margin: 0 0 2px; color: var(--rv2-charcoal); }
.rv2-diff .rv2-diff-sub { font-size: 14px; line-height: 1.5; color: var(--rv2-ink-60); margin: 0; }

/* FORM CARD (right) ----------------------------------------- */
.rv2-form-card {
    background: var(--rv2-card);
    border: 1px solid var(--rv2-gray);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(2, 32, 71, 0.10);
    padding: 32px;
    width: 100%;
    max-width: 520px;
    justify-self: end;
}

/* Plan toggle */
.rv2-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: var(--rv2-tint);
    border: 1px solid var(--rv2-gray);
    border-radius: 12px;
    padding: 5px;
    margin-bottom: 22px;
}
.rv2-toggle-btn {
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--rv2-ink-60);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.rv2-toggle-btn .rv2-toggle-price { font-size: 13px; font-weight: 700; opacity: 0.85; }
.rv2-toggle-btn.active {
    background: var(--rv2-blue);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 180, 255, 0.30);
}
.rv2-toggle-btn:focus-visible { outline: 2px solid var(--rv2-blue-deep); outline-offset: 2px; }

/* Step indicator */
.rv2-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.rv2-step {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: var(--rv2-tint);
    border: 1px solid var(--rv2-gray);
    color: var(--rv2-ink-60);
}
.rv2-step.active { background: var(--rv2-blue); border-color: var(--rv2-blue); color: #FFFFFF; }
/* Done step matches active fill so the palette stays strictly blue + charcoal --
   the visible difference is the check icon vs. the step number. */
.rv2-step.done { background: var(--rv2-blue); border-color: var(--rv2-blue); color: #FFFFFF; }
/* Constrain the inline check SVG so it does not fall back to the 300x150
   intrinsic box and overflow the 26x26 step badge. */
.rv2-step svg { width: 14px; height: 14px; display: block; }
.rv2-step-line { flex: 1; height: 2px; background: var(--rv2-gray); border-radius: 2px; }

/* Header */
.rv2-form-head { margin-bottom: 20px; }
.rv2-title { font-weight: 700; font-size: 26px; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--rv2-charcoal); }
.rv2-subtitle { font-size: 15px; line-height: 1.5; color: var(--rv2-ink-60); margin: 0; }

/* Benefits disclosure. On desktop this duplicates the always-visible value
   panel beside the form, so it is hidden there and only shown on mobile
   (below the stacking breakpoint) where the value panel drops beneath the
   form and the plan details are no longer at hand during signup. */
.rv2-benefits { margin-bottom: 18px; }
@media (min-width: 981px) { .rv2 .rv2-benefits { display: none; } }
.rv2-benefits-toggle {
    appearance: none; border: 0; background: transparent;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit; font-size: 14px; font-weight: 600;
    color: var(--rv2-blue-deep); cursor: pointer; padding: 0;
}
.rv2-benefits-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.rv2-benefit { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--rv2-charcoal); }
/* Base sizing for every .rv2-check (eyebrow, benefit list, etc.).
   Without an explicit box the inline SVG falls back to the 300x150
   default viewport and inflates header rows. */
.rv2-check { flex: 0 0 18px; width: 18px; height: 18px; color: var(--rv2-blue); display: inline-block; }
.rv2-check svg { width: 100%; height: 100%; display: block; }
.rv2-benefits-meta { font-size: 13px; color: var(--rv2-ink-60); margin: 4px 0 0; }

/* Alerts */
.rv2-alert {
    display: flex; align-items: flex-start; gap: 10px;
    border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
    font-size: 14px; line-height: 1.45;
}
.rv2-alert .rv2-alert-ico { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.rv2-alert .rv2-alert-ico svg { width: 100%; height: 100%; display: block; }
.rv2-alert-error { background: #FDECEC; color: #B42318; }
.rv2-alert-warning { background: #FFF6E5; color: #8A5A00; }
.rv2-alert a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Form fields */
.rv2-form { display: flex; flex-direction: column; gap: 16px; }
.rv2-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rv2-field { display: flex; flex-direction: column; gap: 6px; }
.rv2-label { font-size: 13px; font-weight: 600; color: var(--rv2-charcoal); }
/* Required-field asterisk uses a dedicated error/required red so the
   orange CTA token stays reserved for the paid-commit step button. */
.rv2-label .rv2-req { color: #D9534F; margin-left: 2px; }
.rv2-input {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: var(--rv2-charcoal);
    background: #FFFFFF;
    border: 1px solid var(--rv2-field-border);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.rv2-input::placeholder { color: #9AA6B2; }
.rv2-input:focus {
    outline: none;
    border-color: var(--rv2-blue);
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.18);
}
.rv2-input[aria-invalid="true"] { border-color: #D9534F; box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.15); }
.rv2-input:disabled { background: #F3F5F8; cursor: not-allowed; }
.rv2-hint { font-size: 12px; color: var(--rv2-ink-60); }
.rv2-field-error { font-size: 13px; color: #B42318; }

.rv2-password-wrap { position: relative; display: flex; }
.rv2-password-wrap .rv2-input { padding-right: 44px; }
.rv2-password-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    appearance: none; border: 0; background: transparent; cursor: pointer;
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--rv2-ink-60); border-radius: 8px;
}
.rv2-password-toggle:hover { color: var(--rv2-charcoal); }
.rv2-password-toggle svg { width: 20px; height: 20px; display: block; }

/* Opt-in + terms */
.rv2-optin { display: flex; }
.rv2-checkbox-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: var(--rv2-ink-60); line-height: 1.45; }
.rv2-checkbox { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--rv2-blue); flex: 0 0 18px; }
.rv2-terms { font-size: 13px; color: var(--rv2-ink-60); line-height: 1.5; }
.rv2-terms a { color: var(--rv2-blue-deep); font-weight: 600; text-decoration: none; }
.rv2-terms a:hover { text-decoration: underline; }

/* Buttons */
.rv2-btn {
    appearance: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 16px; font-weight: 700;
    border-radius: 12px; padding: 14px 20px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    transition: transform 80ms ease, box-shadow 120ms ease, background 120ms ease;
}
.rv2-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.rv2-btn svg { width: 18px; height: 18px; }
.rv2-btn-primary { background: var(--rv2-blue); color: #FFFFFF; box-shadow: 0 8px 20px rgba(0, 180, 255, 0.28); width: 100%; }
.rv2-btn-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0, 180, 255, 0.34); }
/* Orange is reserved for the paid-conversion commit step only. */
.rv2-btn-cta { background: var(--rv2-orange); color: #1F1300; box-shadow: 0 8px 20px rgba(255, 170, 0, 0.32); width: 100%; }
.rv2-btn-cta:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(255, 170, 0, 0.40); }
.rv2-btn-back {
    background: #FFFFFF; color: var(--rv2-charcoal);
    border: 1px solid var(--rv2-field-border);
    flex: 0 0 auto; padding: 14px 18px;
}
.rv2-btn-back:not(:disabled):hover { background: var(--rv2-tint); }

.rv2-form-actions { display: flex; gap: 12px; align-items: stretch; }
.rv2-form-actions .rv2-btn-primary,
.rv2-form-actions .rv2-btn-cta { flex: 1; }

.rv2-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: rv2-spin 0.7s linear infinite;
}
.rv2-btn-cta .rv2-spinner { border-color: rgba(31, 19, 0, 0.35); border-top-color: #1F1300; }
@keyframes rv2-spin { to { transform: rotate(360deg); } }

/* Payment step (Stripe) */
.rv2-payment-notice,
.rv2-pay-info {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--rv2-ink-60);
    background: var(--rv2-tint); border-radius: 10px; padding: 10px 12px;
}
.rv2-payment-notice svg, .rv2-pay-info svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--rv2-blue-deep); }
/* Stripe injects its own iframe here; keep it a plain styled shell.
   Scoped to .rv2 so this does not clash with .stripe-card-element
   styling in PaymentForm/Upgrade. */
.rv2 .stripe-card-element {
    border: 1px solid var(--rv2-field-border);
    border-radius: 10px;
    padding: 13px 14px;
    background: #FFFFFF;
}

/* Premium upgrade tease (Free signup only). Subtle by design --
   the user just chose Free, we are not trying to undo that choice. */
.rv2-upgrade-tease {
    appearance: none;
    cursor: pointer;
    margin-top: 26px;
    width: 100%;
    background: var(--rv2-tint);
    border: 1px solid var(--rv2-blue);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    font-family: inherit;
    color: var(--rv2-charcoal);
    transition: background 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}
.rv2-upgrade-tease:hover {
    background: #EEF8FF;
    box-shadow: 0 6px 16px rgba(0, 180, 255, 0.18);
    transform: translateY(-1px);
}
.rv2-upgrade-tease:focus-visible {
    outline: 2px solid var(--rv2-blue-deep);
    outline-offset: 2px;
}
.rv2-upgrade-tease-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rv2-upgrade-tease-head { font-size: 14px; font-weight: 700; color: var(--rv2-charcoal); }
.rv2-upgrade-tease-sub { font-size: 13px; color: var(--rv2-ink-60); }
.rv2-upgrade-tease svg {
    width: 18px; height: 18px; color: var(--rv2-blue); flex: 0 0 18px;
}

/* Native-store review (iOS / Google Play) */
.rv2-disclosure {
    background: var(--rv2-tint);
    border: 1px solid var(--rv2-gray);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
}
.rv2-disclosure-title { font-size: 15px; font-weight: 700; color: var(--rv2-charcoal); margin: 0 0 8px; }
.rv2-disclosure-body { font-size: 13px; line-height: 1.55; color: var(--rv2-ink-60); margin: 0 0 10px; }
.rv2-disclosure-links { font-size: 13px; margin: 0; }
.rv2-disclosure-links a { color: var(--rv2-blue-deep); font-weight: 600; text-decoration: none; }
.rv2-disclosure-links a:hover { text-decoration: underline; }

/* Sign-in prompt */
.rv2-signin { text-align: center; margin-top: 20px; font-size: 14px; color: var(--rv2-ink-60); }
.rv2-signin a { color: var(--rv2-blue-deep); font-weight: 700; text-decoration: none; margin-left: 6px; }
.rv2-signin a:hover { text-decoration: underline; }

/* Footer trust strip under the form */
.rv2-formfoot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; font-size: 13px; color: var(--rv2-ink-60); }
.rv2-formfoot .rv2-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rv2-gray); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 980px) {
    .rv2-grid {
        grid-template-columns: 1fr;
        /* Mobile stack: form first, value second. DOM order already
           matches this, so no `order` override is needed. */
        grid-template-areas: "form" "value";
        gap: 36px;
        max-width: 560px;
    }
    .rv2-form-card { justify-self: stretch; }
    .rv2-value { max-width: none; }
    .rv2-value h2 { font-size: clamp(28px, 7vw, 38px); }
    /* On narrow screens the value panel compresses to a chip strip of proof. */
    .rv2-diffs { flex-direction: row; flex-wrap: wrap; gap: 12px; }
    .rv2-diff { flex: 1 1 calc(50% - 12px); }
}
@media (max-width: 560px) {
    .rv2-shell { padding: 84px 16px 32px; }
    .rv2-form-card { padding: 24px 20px; border-radius: 16px; }
    .rv2-row { grid-template-columns: 1fr; }
    .rv2-diff { flex: 1 1 100%; }
}

/* ============================ DARK MODE ============================ */
body.dark-mode .rv2 {
    --rv2-tint: #15181D;
    --rv2-charcoal: #E8EAED;
    --rv2-ink-60: #9AA6B2;
    --rv2-gray: #2C313A;
    --rv2-field-border: #3A4250;
    --rv2-card: #1C2026;
    --rv2-blue: var(--brand-primary-light, #4DB8FF);
}
body.dark-mode .rv2-shell { background: #121212; }
body.dark-mode .rv2-value h2,
body.dark-mode .rv2-title { color: #F5F5F5; }
body.dark-mode .rv2-input { background: #11151A; color: #E8EAED; }
body.dark-mode .rv2-input::placeholder { color: #66707C; }
body.dark-mode .rv2-btn-back { background: #1C2026; color: #E8EAED; }
body.dark-mode .rv2 .stripe-card-element { background: #11151A; }
body.dark-mode .rv2-alert-error { background: #3A1B1A; color: #FCA29A; }
body.dark-mode .rv2-alert-warning { background: #3A2E12; color: #F2CE7A; }

/* Restore brand text colors that a global `body.dark-mode p` rule in
   app.css would otherwise clobber. Single-class rules like .rv2-eyebrow
   lose to (0,1,2) specificity, so scope-prefix to win the cascade. */
body.dark-mode .rv2 .rv2-eyebrow { color: var(--rv2-blue); }
body.dark-mode .rv2 .rv2-subtitle,
body.dark-mode .rv2 .rv2-terms,
body.dark-mode .rv2 .rv2-benefits-meta,
body.dark-mode .rv2 .rv2-disclosure-body { color: var(--rv2-ink-60); }
body.dark-mode .rv2 .rv2-disclosure-title { color: var(--rv2-charcoal); }
body.dark-mode .rv2 .rv2-upgrade-tease { background: rgba(77, 184, 255, 0.10); }
body.dark-mode .rv2 .rv2-upgrade-tease:hover { background: rgba(77, 184, 255, 0.18); }