:root {
    --auth-grid-gap: clamp(2rem, 4vw, 4rem);
}

/* ── Defensive guarantees so the signup form is NEVER clipped ──
   These rules belong above all others so they win specificity battles
   without having to use !important on every override.

   Reported bug 2026-04-28: user on a brand-new 13" MacBook (and again on
   his TV) said the signup form was "cut off at the plan area." Root
   cause was overflow:hidden on .auth-card + small viewport heights, but
   to bullet-proof every screen size and every browser engine we also
   force horizontal overflow on the body/main and disable any clipping
   on the auth shell hierarchy. */
body.auth-body,
body.auth-body .app-main,
body.auth-body .auth-page,
body.auth-body .auth-page-single,
body.auth-body .auth-card,
body.auth-body .auth-card-single {
    overflow: visible;
}
body.auth-body {
    /* Allow the page to scroll vertically as much as it needs while
       preventing accidental horizontal scrollbars from decorative
       gradient pseudo-elements that bleed past the viewport. */
    overflow-x: clip;
    overflow-y: auto;
}

body.auth-body {
    font-family: var(--plans-font, "Space Grotesk", "Inter", system-ui, sans-serif);
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 201, 85, 0.16), transparent 50%),
        radial-gradient(circle at 85% 10%, rgba(90, 116, 255, 0.25), transparent 52%),
        linear-gradient(135deg, #050712, #05060f 60%);
    color: var(--plans-text, #f6f7ff);
    min-height: 100vh;
}

body.auth-body .app-main {
    padding: clamp(1.75rem, 4vw, 4.25rem) 0 clamp(1.75rem, 4vw, 3.25rem);
}

body.auth-body .app-header,
body.auth-body .app-footer {
    background: transparent;
    border-bottom: none;
}

body.auth-body .app-header .container,
body.auth-body .app-footer .container {
    border-color: transparent;
}

.auth-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--auth-grid-gap);
    position: relative;
    isolation: isolate;
}

.auth-page-single {
    max-width: 640px;
    padding-top: clamp(1.25rem, 5vw, 3.25rem);
    padding-bottom: clamp(1.25rem, 5vw, 3rem);
    display: flex;
    justify-content: center;
    min-height: calc(100vh - clamp(2.5rem, 6vw, 5.5rem));
}

.auth-page::after {
    content: "";
    position: absolute;
    inset: 12% auto auto 45%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 201, 85, 0.18), transparent 65%);
    filter: blur(8px);
    z-index: -1;
}

.auth-page-single::after {
    left: 50%;
    inset: 8% auto auto 50%;
    transform: translateX(-50%);
}

.auth-info-card {
    border-radius: var(--plans-radius-lg, 28px);
    border: 1px solid var(--t-border);
    padding: clamp(2rem, 4vw, 3rem);
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.05), transparent 45%),
        linear-gradient(160deg, rgba(13, 17, 34, 0.95), rgba(6, 8, 18, 0.92));
    box-shadow: 0 35px 60px rgba(0, 0, 0, 0.55);
}

.auth-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    border: 1px solid var(--t-border-strong);
    color: var(--plans-muted, rgba(246, 247, 255, 0.64));
    letter-spacing: 0.22em;
    font-size: 0.72rem;
    text-transform: uppercase;
    background: linear-gradient(125deg, rgba(20, 24, 50, 0.9), rgba(8, 10, 22, 0.9));
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
}

.auth-pill-toned {
    background: linear-gradient(125deg, rgba(20, 24, 50, 0.85), rgba(8, 10, 22, 0.85));
    border-color: var(--t-border-accent);
}

.auth-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--plans-accent, #ffc955);
    box-shadow: 0 0 12px var(--plans-accent, #ffc955);
}

.auth-info-card h1 {
    margin-top: 1.5rem;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.15;
    color: var(--plans-text, #fff);
}

.auth-info-card p {
    margin-top: 1rem;
    color: var(--plans-muted, rgba(255, 255, 255, 0.72));
    font-size: 1.05rem;
}

.auth-feature-list {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.auth-feature-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.auth-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(255, 201, 85, 0.12);
    border: 1px solid rgba(255, 201, 85, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--plans-accent, #ffc955);
    font-size: 1.2rem;
    box-shadow: 0 12px 18px rgba(0, 0, 0, 0.35);
}

.auth-feature-item h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    color: var(--plans-text, #fff);
}

.auth-feature-item p {
    margin: 0;
    color: var(--plans-muted, rgba(246, 247, 255, 0.62));
    font-size: 0.95rem;
}

.auth-card {
    border-radius: var(--plans-radius-lg, 26px);
    padding: clamp(2rem, 4vw, 3rem);
    background: linear-gradient(180deg, rgba(13, 17, 38, 0.95), rgba(8, 10, 22, 0.97));
    border: 1px solid var(--t-border-medium);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 55px rgba(2, 4, 15, 0.55);
    position: relative;
    /* overflow MUST be visible so the form (tier picker + card + terms +
       submit button) is never clipped on short viewports / Safari. The
       decorative ::before glow is positioned with z-index:-1 + pointer-events
       none, so a small visual leak past the rounded corners is acceptable
       and dramatically better than a clipped sign-up form. */
    overflow: visible;
}

.auth-single-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(1.1rem, 2.5vw, 2.25rem);
    align-items: center;
}

.auth-single-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.auth-single-header h1 {
    margin: 0;
    font-size: clamp(1.85rem, 4.6vw, 2.4rem);
    color: #ffffff;
}

.auth-single-subtitle {
    margin: 0;
    font-size: 1rem;
    color: var(--plans-muted, rgba(246, 247, 255, 0.85));
}

.auth-single-body {
    margin: 0;
    color: var(--plans-muted, rgba(246, 247, 255, 0.72));
    font-size: 0.92rem;
}

.auth-card-single {
    width: 100%;
    max-width: 520px;
}

.auth-card-single.auth-card {
    padding: clamp(1.6rem, 3.5vw, 2.6rem);
    display: flex;
    flex-direction: column;
}

.auth-card-single.auth-card::-webkit-scrollbar {
    width: 6px;
}

.auth-card-single.auth-card::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: -40% auto auto 60%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 201, 85, 0.18), transparent 60%);
    pointer-events: none;
    z-index: -1;
}

.auth-card h2 {
    margin: 0 0 0.75rem;
    font-size: 2.1rem;
    color: #fff;
}

.auth-card p.auth-subtitle {
    margin-bottom: 2rem;
    color: #fff;
}

.auth-form-group {
    margin-bottom: 1.35rem;
}

.auth-input-label {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 0.35rem;
}

.auth-input-wrapper {
    position: relative;
}

.auth-input-wrapper input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 1rem;
    padding: 0.95rem 1rem 0.95rem 3rem;
    transition: border-color var(--plans-transition, 220ms ease),
        background-color var(--plans-transition, 220ms ease),
        box-shadow var(--plans-transition, 220ms ease);
}

.auth-input-wrapper input:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}

.auth-input-wrapper input:focus {
    outline: none;
    border-color: rgba(255, 201, 85, 0.65);
    box-shadow: 0 0 0 3px rgba(255, 201, 85, 0.15);
}

.auth-input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
}

.auth-card-group {
    margin-top: 0.25rem;
}

.auth-trial-reassure {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.auth-trial-reassure-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.auth-trial-reassure-list li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}

.auth-trial-reassure-list svg {
    flex-shrink: 0;
    color: var(--plans-accent, #ffc955);
}

/* Trust strip directly above the card field. Mirrors the existing
   .auth-trial-reassure look so it reads as part of the same family
   instead of a foreign element. Same surface, same accent color,
   same spacing rhythm. */
.auth-card-trust {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.auth-card-trust-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.auth-card-trust-list li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}
.auth-card-trust-list svg {
    flex-shrink: 0;
    color: var(--plans-accent, #ffc955);
}
.auth-card-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 201, 85, 0.18);
    color: #ffc955;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.auth-card-element {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 14px 16px;
    min-height: 48px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-card-element .__PrivateStripeElement,
.auth-card-element iframe {
    width: 100% !important;
    min-height: 20px;
}

.auth-card-element.StripeElement--focus {
    border-color: var(--plans-accent, #ffc955);
    box-shadow: 0 0 0 3px rgba(255, 201, 85, 0.15);
}

.auth-card-element.StripeElement--invalid {
    border-color: #ff7a7a;
}

/* ── Split card layout: Number on its own row, Exp + CVC side by side ── */
.auth-card-split {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-card-split-row {
    display: flex;
    width: 100%;
}

.auth-card-split-row--two {
    gap: 10px;
}

.auth-card-split-row--two > .auth-card-element {
    flex: 1 1 0;
    min-width: 0; /* allow shrink in flex */
}

.auth-card-element--number {
    width: 100%;
}

/* Express Checkout (Apple Pay / Google Pay / Link) */
.auth-express-checkout {
    margin-bottom: 0.75rem;
}

.auth-express-checkout #expressCheckoutElement {
    min-height: 48px;
}

/* While Stripe is checking wallet availability, show a small skeleton so the
   layout doesn't shift when Apple Pay / Google Pay buttons drop in late. */
.auth-express-checkout--loading {
    min-height: 56px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.auth-express-skeleton {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.auth-express-skeleton-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    animation: authExpressDot 1.2s ease-in-out infinite;
}

.auth-express-skeleton-dot:nth-child(2) { animation-delay: 0.15s; }
.auth-express-skeleton-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes authExpressDot {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
    40%           { opacity: 1;    transform: scale(1); }
}

.auth-express-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.9rem 0 0.6rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.auth-express-divider::before,
.auth-express-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.auth-express-divider span {
    white-space: nowrap;
}

.auth-card-disclosure {
    margin: 0.5rem 0 0;
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.55rem;
    line-height: 1.45;
    font-weight: 400;
    display: block;
    letter-spacing: 0.01em;
}

.auth-card-disclosure svg {
    display: none;
}

.auth-card-disclosure strong {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.auth-checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    color: #fff;
    font-size: 0.95rem;
}

.auth-checkbox-group label {
    margin-bottom: 0;
    cursor: pointer;
}

.auth-checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    accent-color: var(--plans-accent, #ffc955);
}

.auth-submit {
    width: 100%;
    border: none;
    border-radius: 16px;
    padding: 0.95rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #05070f;
    background: linear-gradient(120deg, #ffd86b, #ffb347);
    box-shadow: 0 18px 30px rgba(255, 184, 71, 0.35);
    cursor: pointer;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 45px rgba(255, 184, 71, 0.45);
}

.auth-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.auth-error {
    margin-top: 0.45rem;
    color: #ff7b7b;
    font-size: 0.9rem;
    display: none;
}

.auth-error-global {
    margin-top: 1rem;
    text-align: center;
}

.auth-error.visible {
    display: block;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--t-text-tertiary);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.auth-switch {
    margin-top: 1.5rem;
    text-align: center;
    color: #fff;
}

.auth-switch a {
    color: var(--plans-accent, #ffc955);
    text-decoration: none;
    font-weight: 600;
}

.auth-switch a:hover {
    text-decoration: underline;
}

.auth-password-hint {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.auth-forgot-link {
    font-size: 0.85rem;
    color: #ffd08a;
    text-decoration: none;
    font-weight: 600;
}

.auth-forgot-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

body.auth-body .auth-forgot-link {
    color: #ffd08a !important;
}

body.auth-body .auth-forgot-link:hover,
body.auth-body .auth-forgot-link:focus-visible {
    color: #ffffff !important;
    text-decoration: underline;
}

.auth-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* ── Social / OAuth Login Buttons ───────────────────────────────────────────── */

.auth-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--t-border-strong);
    background-color: var(--t-surface-input);
    color: var(--t-text);
    font-size: 0.97rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 180ms ease;
}

.auth-social-btn:hover {
    background-color: var(--t-surface-hover);
    border-color: var(--t-border-accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.auth-social-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.auth-social-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Google — subtle white bg to show multi-color logo */
.auth-social-google {
    border-color: var(--t-border-strong);
}

.auth-social-google:hover {
    border-color: rgba(66, 133, 244, 0.5);
    box-shadow: 0 8px 24px rgba(66, 133, 244, 0.15);
}

/* Microsoft — subtle blue tint */
.auth-social-microsoft:hover {
    border-color: rgba(0, 164, 239, 0.45);
    box-shadow: 0 8px 24px rgba(0, 164, 239, 0.12);
}

/* Apple — white icon on dark bg */
.auth-social-apple:hover {
    border-color: var(--t-border-accent);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.08);
}

.auth-badges {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--t-border-accent);
    color: var(--t-text-secondary);
    font-size: 0.85rem;
}

.auth-badge svg {
    width: 16px;
    height: 16px;
    color: var(--plans-accent, #ffc955);
}

@media (max-width: 768px) {
    .auth-page {
        padding-top: 1rem;
    }

    .auth-card,
    .auth-info-card {
        padding: clamp(1.5rem, 6vw, 2rem);
    }

    .auth-info-card h1 {
        font-size: clamp(1.8rem, 8vw, 2.25rem);
    }

    .auth-page-single {
        padding-top: clamp(1rem, 7vw, 2.5rem);
    }

    .auth-page-single .auth-card {
        max-height: unset;
        overflow: visible;
    }
}

@media (max-height: 820px) {
    body.auth-body .app-main {
        padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.5rem, 4vw, 2.5rem);
    }

    .auth-page-single {
        min-height: calc(100vh - clamp(2rem, 6vw, 4.5rem));
        padding-top: clamp(1rem, 4vw, 2.5rem);
        padding-bottom: clamp(1rem, 4vw, 2.5rem);
    }

    .auth-single-shell {
        gap: clamp(1.2rem, 3vw, 2rem);
    }

    .auth-single-header h1 {
        font-size: clamp(1.7rem, 4.5vw, 2.25rem);
    }

    .auth-single-subtitle {
        font-size: 1rem;
    }

    .auth-single-body {
        font-size: 0.9rem;
    }

    .auth-card-single.auth-card {
        padding: clamp(1.35rem, 3.5vw, 2.2rem);
    }
}

@media (max-width: 520px) {
    .auth-card-single.auth-card {
        padding: clamp(1.25rem, 6vw, 1.9rem);
    }

    .auth-single-header h1 {
        font-size: clamp(1.8rem, 8vw, 2.2rem);
    }

    .auth-single-subtitle {
        font-size: 0.95rem;
    }
}

@media (max-height: 740px) {
    .auth-single-header {
        gap: 0.75rem;
    }

    .auth-single-header h1 {
        font-size: clamp(1.65rem, 4vw, 2.1rem);
    }

    .auth-single-body {
        font-size: 0.85rem;
    }

    .auth-page-single .auth-card {
        max-height: none;
    }
}

@media (max-height: 640px) {
    .auth-single-body {
        display: none;
    }

    .auth-single-subtitle {
        font-size: 0.9rem;
    }

    .auth-page-single {
        padding-top: clamp(0.75rem, 4vw, 1.5rem);
        padding-bottom: clamp(0.75rem, 4vw, 1.5rem);
        min-height: calc(100vh - clamp(1.5rem, 4vw, 3rem));
    }

    .auth-card-single.auth-card {
        padding: clamp(1.2rem, 3vw, 1.8rem);
    }
}

/* ── Account type radio cards (signup) ─────────────────────── */
.auth-account-type {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.auth-account-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    background: rgba(255, 255, 255, 0.04);
}

.auth-account-opt:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
}

.auth-account-opt input[type=radio] {
    margin: 0;
    accent-color: var(--plans-accent, #ffc955);
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.auth-account-opt input[type=radio]:checked ~ .auth-account-opt-body .auth-account-opt-title {
    color: var(--plans-accent, #ffc955);
}

.auth-account-opt:has(input:checked) {
    border-color: rgba(255, 201, 85, 0.45);
    background: rgba(255, 201, 85, 0.06);
    box-shadow: 0 0 0 3px rgba(255, 201, 85, 0.08);
}

.auth-account-opt-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auth-account-opt-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
}

.auth-account-opt-sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ── Card-on-file section polish ─────────────────────────── */
.auth-card-group {
    margin-top: 0.75rem;
    padding: 1.1rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
}

.auth-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.auth-card-label {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}

/* Refined badge: subtle green "no-charge" reassurance */
.auth-card-group .auth-card-badge {
    margin-left: auto;
    background: rgba(74, 222, 128, 0.10);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.20);
    padding: 3px 10px;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
}

.auth-card-element {
    padding: 16px 18px;
    min-height: 52px;
}

.auth-card-disclosure {
    margin-top: 0.65rem;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.62rem;
    gap: 4px;
    align-items: flex-start;
}

.auth-card-disclosure svg {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    opacity: 0.55;
    margin-top: 1px;
}

/* ── Mobile: full-bleed signup form ──────────────────────── */
@media (max-width: 640px) {
    body.auth-body {
        /* Solid dark so Safari's URL/chrome bars blend. */
        background: #05060f;
    }

    .auth-page {
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }

    body.auth-body .app-main {
        padding-left: 0;
        padding-right: 0;
        /* Respect iPhone safe-area (Dynamic Island / home indicator). */
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }

    .auth-card,
    .auth-card-single.auth-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        padding: 1.5rem 1.1rem 2.25rem;
        /* Extra bottom padding so the submit button never sits under the
           iOS home bar. env() added to the existing 2.25rem via calc(). */
        padding-bottom: calc(2.25rem + env(safe-area-inset-bottom));
        box-shadow: none;
        width: 100%;
        max-width: 100%;
    }

    .auth-card::before {
        display: none; /* drop the glow that caused edge bleed on small screens */
    }

    .auth-card h2 {
        font-size: 1.7rem;
    }

    .auth-card-head {
        gap: 0.4rem;
    }

    .auth-card-group {
        padding: 0.9rem 0.85rem;
        margin-left: -0.15rem;
        margin-right: -0.15rem;
    }

    .auth-card-group .auth-card-badge {
        font-size: 0.64rem;
        padding: 2px 8px;
    }

    .auth-card-element {
        padding: 14px 14px;
    }

    /* Tighter gaps in the split card group on phones — fields hug each other
       so the Card Number row reads as one big tap target. */
    .auth-card-split {
        gap: 8px;
    }

    .auth-card-split-row--two {
        gap: 8px;
    }

    /* Make submit button an easy thumb target; iOS recommends 44pt min. */
    .auth-submit {
        min-height: 52px;
        font-size: 1.02rem;
    }

    /* Inputs stay ≥16px so iOS does not auto-zoom on focus. */
    .auth-input-wrapper input {
        font-size: 16px;
    }
}

/* Signup shell refresh for the Plans flow. Keep the form dark, and make the
   surrounding page/header match the new job-vault landing page even when the
   global theme is light. */
body.auth-body {
    background-color: #0b0b09 !important;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
        radial-gradient(circle at 18% 12%, rgba(242, 140, 40, 0.16), transparent 34%),
        radial-gradient(circle at 84% 8%, rgba(62, 91, 82, 0.16), transparent 34%),
        linear-gradient(135deg, #11100d 0%, #060605 48%, #15110c 100%) !important;
    background-size: 44px 44px, 44px 44px, auto, auto, auto !important;
    color: #fff7e7;
}

[data-theme="light"] body.auth-body .app-main,
body.auth-body .app-main {
    background:
        linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
        radial-gradient(circle at 18% 12%, rgba(242, 140, 40, 0.16), transparent 34%),
        radial-gradient(circle at 84% 8%, rgba(62, 91, 82, 0.16), transparent 34%),
        linear-gradient(135deg, #11100d 0%, #060605 48%, #15110c 100%) !important;
    background-size: 44px 44px, 44px 44px, auto, auto, auto !important;
}

[data-theme="light"] body.auth-body .app-header,
body.auth-body .app-header {
    background:
        linear-gradient(180deg, rgba(18, 17, 14, 0.98), rgba(8, 8, 7, 0.98)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36) !important;
    color: #fff7e7 !important;
}

[data-theme="light"] body.auth-body .app-logo-title,
body.auth-body .app-logo-title {
    color: #fff7e7 !important;
    text-shadow: none !important;
}

[data-theme="light"] body.auth-body .app-logo-icon--dark,
body.auth-body .app-logo-icon--dark {
    display: block !important;
}

[data-theme="light"] body.auth-body .app-logo-icon--light,
body.auth-body .app-logo-icon--light {
    display: none !important;
}

[data-theme="light"] body.auth-body .app-nav-link,
body.auth-body .app-nav-link {
    color: #ffffff !important;
    background: transparent;
}

[data-theme="light"] body.auth-body .app-nav-link:hover,
[data-theme="light"] body.auth-body .app-nav-link:focus-visible,
body.auth-body .app-nav-link:hover,
body.auth-body .app-nav-link:focus-visible {
    color: #ffffff !important;
    background: rgba(255, 177, 95, 0.08) !important;
}

[data-theme="light"] body.auth-body .app-nav-research,
[data-theme="light"] body.auth-body .app-nav-help,
[data-theme="light"] body.auth-body .app-nav-link[href*="/auth/login"],
body.auth-body .app-nav-research,
body.auth-body .app-nav-help,
body.auth-body .app-nav-link[href*="/auth/login"],
[data-theme="light"] body.auth-body .plans-header-actions .app-nav .app-nav-research,
[data-theme="light"] body.auth-body .plans-header-actions .app-nav .app-nav-help,
[data-theme="light"] body.auth-body .plans-header-actions .app-nav .app-nav-link[href*="/auth/login"],
body.auth-body .plans-header-actions .app-nav .app-nav-research,
body.auth-body .plans-header-actions .app-nav .app-nav-help,
body.auth-body .plans-header-actions .app-nav .app-nav-link[href*="/auth/login"] {
    color: #ffffff !important;
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

[data-theme="light"] body.auth-body .app-nav-link--active,
body.auth-body .app-nav-link--active,
[data-theme="light"] body.auth-body .app-nav-link[href*="/auth/signup"],
body.auth-body .app-nav-link[href*="/auth/signup"],
[data-theme="light"] body.auth-body .plans-header-actions .app-nav .app-nav-link[href*="/auth/signup"],
body.auth-body .plans-header-actions .app-nav .app-nav-link[href*="/auth/signup"] {
    border-color: #f28c28 !important;
    background: #f28c28 !important;
    background-color: #f28c28 !important;
    background-image: none !important;
    color: #11100d !important;
    box-shadow: none !important;
}

[data-theme="light"] body.auth-body .app-nav-link[href*="/auth/signup"]:hover,
[data-theme="light"] body.auth-body .app-nav-link[href*="/auth/signup"]:focus-visible,
body.auth-body .app-nav-link[href*="/auth/signup"]:hover,
body.auth-body .app-nav-link[href*="/auth/signup"]:focus-visible,
[data-theme="light"] body.auth-body .plans-header-actions .app-nav .app-nav-link[href*="/auth/signup"]:hover,
[data-theme="light"] body.auth-body .plans-header-actions .app-nav .app-nav-link[href*="/auth/signup"]:focus-visible,
body.auth-body .plans-header-actions .app-nav .app-nav-link[href*="/auth/signup"]:hover,
body.auth-body .plans-header-actions .app-nav .app-nav-link[href*="/auth/signup"]:focus-visible {
    background: #ff9d37 !important;
    background-color: #ff9d37 !important;
    background-image: none !important;
    border-color: #ff9d37 !important;
    color: #11100d !important;
    box-shadow: none !important;
}

[data-theme="light"] body.auth-body .plans-mobile-menu-toggle-icon,
[data-theme="light"] body.auth-body .plans-mobile-menu-toggle-icon::before,
[data-theme="light"] body.auth-body .plans-mobile-menu-toggle-icon::after,
body.auth-body .plans-mobile-menu-toggle-icon,
body.auth-body .plans-mobile-menu-toggle-icon::before,
body.auth-body .plans-mobile-menu-toggle-icon::after {
    background: rgba(255, 247, 231, 0.95) !important;
}

body.auth-body .auth-page {
    max-width: 880px;
    width: 100%;
    box-sizing: border-box;
}

body.auth-body .auth-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border-color: rgba(255, 177, 95, 0.18);
    border-radius: 8px;
    background:
        radial-gradient(circle at 82% 0%, rgba(242, 140, 40, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(22, 21, 18, 0.97), rgba(8, 8, 7, 0.985));
    box-shadow: 0 26px 72px rgba(0, 0, 0, 0.42);
}

@media (max-width: 640px) {
    body.auth-body {
        overflow-x: hidden;
    }

    body.auth-body .app-main {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    body.auth-body .auth-page {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    body.auth-body .auth-card,
    body.auth-body .auth-card-single.auth-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        border: 1px solid rgba(255, 177, 95, 0.16);
        border-radius: 8px;
    }

    body.auth-body .auth-card h2,
    body.auth-body .auth-subtitle,
    body.auth-body .auth-input-label,
    body.auth-body .auth-account-opt-sub,
    body.auth-body .auth-tier-card-summary,
    body.auth-body .auth-card-disclosure,
    body.auth-body .auth-checkbox-group,
    body.auth-body .auth-switch {
        overflow-wrap: anywhere;
    }
}