/* =============================================================
   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); }

/* ===================== WEB PREMIUM SIGNUP (.rv2-join) =====================
   The web Premium signup approved in Claude Design on October 10, 2026
   ("Premium Join"): a plan switch and a centered title, then the account and
   card steps beside the free printed book card. The app layout above is
   unchanged; Premium there runs through the app stores. /upgrade uses the
   same layout with only the payment step ("Premium Upgrade", October 11). */
.rv2-join .rv2-shell {
    align-items: flex-start;
    padding-top: calc(var(--topnav-controls-top, 72px) + 28px);
}
.rv2-join-wrap { width: 100%; max-width: 940px; margin: 0 auto; }

.rv2-plan-switch {
    display: flex;
    width: fit-content;
    gap: 4px;
    margin: 0 auto 22px;
    padding: 4px;
    background: #EDF2F7;
    border: 1px solid var(--rv2-gray);
    border-radius: 999px;
}
.rv2-plan-btn {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--rv2-ink-60);
}
.rv2-plan-btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.rv2-plan-btn .rv2-plan-price { font-weight: 700; }
.rv2-plan-btn.active {
    background: var(--rv2-card);
    color: var(--rv2-blue-deep);
    box-shadow: 0 1px 4px rgba(2, 32, 71, 0.14);
    cursor: default;
}
.rv2-plan-btn:not(.active):not(:disabled):hover { color: var(--rv2-charcoal); }
.rv2-plan-btn:focus-visible { outline: 2px solid var(--rv2-blue-deep); outline-offset: 2px; }

.rv2-join-head { text-align: center; margin: 0 0 26px; }
.rv2-join-title {
    margin: 0 0 8px;
    font-size: clamp(28px, 3.2vw, 36px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--rv2-charcoal);
    text-wrap: balance;
}
.rv2 .rv2-join-sub { margin: 0; font-size: 16px; line-height: 1.5; color: var(--rv2-ink-60); }

.rv2-join-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.rv2-join-card {
    background: var(--rv2-card);
    border: 1px solid var(--rv2-gray);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(2, 32, 71, 0.08);
    padding: 26px;
}
.rv2-join-card .rv2-form { gap: 14px; }

/* Steps: "1 Your account ---- 2 Payment", then the finished account folds into one row. */
.rv2-join-steps { list-style: none; display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 0; }
.rv2-join-step { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--rv2-ink-60); }
.rv2-join-step.current { color: var(--rv2-charcoal); }
.rv2 p.rv2-join-step { margin: 0 0 14px; color: var(--rv2-charcoal); }
.rv2-join-step-line { flex: 1; height: 1px; background: var(--rv2-gray); }
.rv2-join-num {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--rv2-ink-60);
    background: var(--rv2-card);
    border: 1px solid var(--rv2-field-border);
}
.rv2-join-step.current .rv2-join-num,
.rv2-join-num.done { background: var(--rv2-blue); border-color: var(--rv2-blue); color: #FFFFFF; }
.rv2-join-num svg { width: 12px; height: 12px; display: block; }

.rv2-join-account {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--rv2-tint);
    border: 1px solid var(--rv2-gray);
    border-radius: 12px;
}
.rv2-join-account-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.rv2-join-account-text strong { font-size: 14px; color: var(--rv2-charcoal); }
.rv2-join-account-text span { color: var(--rv2-ink-60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv2-join-edit {
    appearance: none;
    border: 0;
    background: none;
    padding: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--rv2-blue-deep);
}
.rv2-join-edit:not(:disabled):hover { text-decoration: underline; }
.rv2 .rv2-join-renews { margin: -4px 0 0; text-align: center; font-size: 12.5px; color: var(--rv2-ink-60); }

/* The free book card, what Premium includes, and the fine print. */
.rv2-join-side { display: flex; flex-direction: column; gap: 18px; }
.rv2-join-book {
    background: var(--rv2-card);
    border: 1px solid var(--rv2-gray);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(2, 32, 71, 0.06);
    padding: 20px 22px;
}
.rv2-join-book-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--rv2-charcoal); }
.rv2-join-fan { display: flex; align-items: center; justify-content: center; height: 152px; margin: 4px 0 12px; }
.rv2-join-fan img {
    width: 84px;
    height: 126px;
    object-fit: cover;
    border-radius: 4px;
    background: #E6EDF4;
    box-shadow: 0 8px 18px rgba(2, 32, 71, 0.22);
}
.rv2-join-fan img:nth-child(1) { position: relative; z-index: 1; transform: translateX(30px) rotate(-9deg); }
.rv2-join-fan img:nth-child(2) { position: relative; z-index: 2; width: 92px; height: 138px; transform: translateY(-4px); }
.rv2-join-fan img:nth-child(3) { position: relative; z-index: 1; transform: translateX(-30px) rotate(9deg); }
.rv2-join-fan.rv2-join-fan-one img { width: 96px; height: 144px; transform: none; }
.rv2 .rv2-join-book-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--rv2-ink-60); }
.rv2-join-book-note strong { display: block; margin-bottom: 2px; font-size: 14px; color: var(--rv2-charcoal); }
.rv2 .rv2-join-ship { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--rv2-ink-60); }
.rv2-join-checks { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0 4px; }
.rv2-join-checks li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--rv2-charcoal); }
.rv2-join-fine { display: flex; flex-direction: column; gap: 6px; padding: 14px 4px 0; border-top: 1px solid var(--rv2-gray); }
.rv2 .rv2-join-fine p { margin: 0; font-size: 13px; color: var(--rv2-ink-60); }
.rv2-join-fine a { color: var(--rv2-blue-deep); font-weight: 600; text-decoration: none; }
.rv2-join-fine a:hover { text-decoration: underline; }

@media (max-width: 860px) {
    .rv2-join-grid { grid-template-columns: 1fr; gap: 20px; max-width: 560px; margin: 0 auto; }
    .rv2-join-head { max-width: 560px; margin: 0 auto 18px; text-align: left; }
    .rv2-plan-switch { width: 100%; max-width: 560px; margin-bottom: 18px; }
    .rv2-plan-btn { flex: 1; }
}
@media (max-width: 560px) {
    /* Keeps the phone's Pay button above the fold on the payment step. */
    .rv2-join .rv2-shell { padding: calc(var(--topnav-controls-top, 60px) + 14px) 16px 32px; }
    .rv2-join-head { margin-bottom: 14px; }
    .rv2-join-title { font-size: 25px; }
    .rv2 .rv2-join-sub { font-size: 15px; }
    .rv2-join-card { padding: 20px 16px; border-radius: 16px; }

    /* The book card turns compact, as in both approved phone frames: the covers beside the title
       and note, and where it ships underneath. */
    .rv2-join-book { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px 16px; }
    .rv2-join-book.rv2-join-book-nocovers { display: block; }
    .rv2-join-book .rv2-join-fan { grid-column: 1; grid-row: 1 / span 2; justify-content: flex-start; height: 76px; margin: 0; }
    .rv2-join-fan img { width: 42px; height: 63px; }
    .rv2-join-fan img:nth-child(1) { transform: rotate(-8deg); }
    .rv2-join-fan img:nth-child(2) { width: 46px; height: 69px; margin-left: -24px; transform: translateY(-2px); }
    .rv2-join-fan img:nth-child(3) { margin-left: -24px; transform: rotate(8deg); }
    .rv2-join-fan.rv2-join-fan-one img { width: 50px; height: 75px; margin: 0; transform: none; }
    .rv2-join-book-title { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 2px; }
    .rv2 .rv2-join-book-note { grid-column: 2; grid-row: 2; align-self: start; font-size: 13px; }
    .rv2 .rv2-join-ship { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
}

body.dark-mode .rv2-plan-switch { background: #1C2026; }
body.dark-mode .rv2-plan-btn.active { background: #11151A; color: var(--rv2-blue); }
body.dark-mode .rv2 .rv2-join-title { color: #F5F5F5; }
body.dark-mode .rv2 .rv2-join-book-title,
body.dark-mode .rv2 .rv2-join-book-note strong { color: var(--rv2-charcoal); }