/* ═══════════════════════════════════════════════════════════════════════════
   Blue Belmont - Auth Pages (login + signup)

   These pages share a single set of layout rules. Anything visual lives in
   tokens from app.css; only structural / layout rules live here so the form
   column and the marketing rail stay aligned.

   The split layout is form-on-left, value-prop sidebar on the right. On
   ≤60rem the marketing column collapses and the form takes the full width.
   ═══════════════════════════════════════════════════════════════════════════ */

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--cream);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

.auth-shell {
    display: grid;
    /* Two-column split only above 80em where there's genuinely enough
       room for the marketing rail without squeezing the form. Below
       that, the form column takes the full width AND its inner body
       is dead-centered in the viewport - previously a 853-1024px
       window dropped to single-column but the form still sat
       left-aligned because the form-col defaulted to stretch on the
       cross axis. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}
@media (max-width: 80em) {
    .auth-shell { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────────
   FORM COLUMN (left in two-column mode, only column otherwise)
   ─────────────────────────────────────────────────────────────────────── */
.auth-form-col {
    display: flex;
    flex-direction: column;
    /* Center the form-body in the column so the form is dead-center
       horizontally at every viewport width. The brand link above and
       any footer below override with align-self so they stay anchored
       to the column edges, but the form itself always centers. */
    align-items: center;
    justify-content: space-between;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--cream);
    min-width: 0;
}
.auth-form-col > .auth-brand-link {
    /* Brand stays in the natural top-left position; we only override
       horizontal centering on the form body. */
    align-self: flex-start;
}

.auth-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.auth-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--slate);
    transition: opacity var(--anim-fast) var(--easing);
}
.auth-brand-link:hover { opacity: 0.78; }

.auth-brand-logo {
    display: block;
    height: 1.375rem;
    width: auto;
    max-width: min(12rem, 50vw);
}

.auth-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--slate) 0%, var(--slate-light) 100%);
    color: var(--gold-light);
    box-shadow: 0 0.25rem 0.75rem rgba(28, 35, 49, 0.15);
}
.auth-brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    gap: 0.0625rem;
}
.auth-brand-name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 1rem;
    color: var(--slate);
    letter-spacing: 0.01em;
}
.auth-brand-region {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold-dark);
}
.auth-back-link {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: color var(--anim-fast) var(--easing),
                background var(--anim-fast) var(--easing);
}
.auth-back-link:hover {
    color: var(--slate);
    background: var(--bg-hover);
}

.auth-form-body {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    padding: clamp(2rem, 6vh, 4rem) 0;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    animation: fadeInUp var(--anim-normal) var(--easing) both;
}
.auth-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold-dark);
}
.auth-headline {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3.2vw, 2.5rem);
    font-weight: var(--weight-bold);
    color: var(--slate);
    line-height: var(--leading-tight);
    letter-spacing: -0.018em;
    margin-top: 0.5rem;
}
.auth-subhead {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--muted);
    line-height: var(--leading-relaxed);
    margin-top: 0.625rem;
    max-width: 24rem;
}

/* Signup wrapper. Without an explicit flex layout the heading group,
   error banner, and form sit flush against each other - only the
   ``.auth-form-body`` gap separates the wrapper from its siblings, not
   its children. Match the rhythm of the rest of the auth column so
   the subhead breathes from the first field. */
.signup-panel {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* ── Form fields ── */
.auth-form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-field { display: flex; flex-direction: column; gap: var(--space-2); }
.auth-field label {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.auth-field input {
    width: 100%;
    padding: 0.8125rem 1rem;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface-card);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--anim-fast) var(--easing),
                box-shadow var(--anim-fast) var(--easing),
                background var(--anim-fast) var(--easing);
    outline: none;
}
.auth-field input::placeholder { color: var(--faint); }
.auth-field input:focus,
.auth-field input:focus-visible {
    border-color: var(--gold);
    background: #fff;
    box-shadow: var(--shadow-gold);
}

.auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--text-sm);
}
/* Custom checkbox - hidden native input + a styled square that
   flips to a gold filled tick when checked. Keyboard-focusable
   via the native input underneath. */
.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #5b5550;
    user-select: none;
}
.auth-remember input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1rem;
    height: 1rem;
}
.auth-remember-box {
    width: 1.0625rem;
    height: 1.0625rem;
    border-radius: 0.25rem;
    border: 0.0625rem solid #dcd4c3;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    flex-shrink: 0;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.auth-remember-box svg { width: 0.75rem; height: 0.75rem; }
.auth-remember input:checked + .auth-remember-box {
    background: #b5942a;
    border-color: #7a6315;
    color: #fff;
}
.auth-remember input:focus-visible + .auth-remember-box {
    box-shadow: 0 0 0 0.1875rem rgba(181, 148, 42, 0.25);
}
.auth-remember:hover .auth-remember-box {
    border-color: #7a6315;
}

/* Password reveal toggle - wraps the input + button in .auth-pw-wrap
   so the button can position relative to the input only (not the
   whole field, which may also contain a strength bar below). */
.auth-pw-wrap { position: relative; display: block; }
.auth-pw-wrap input { padding-right: 2.75rem; width: 100%; }
.auth-pw-toggle {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #6b6660;
    cursor: pointer;
    border-radius: 0.375rem;
    padding: 0;
    transition: color 150ms ease, background 150ms ease;
}
.auth-pw-toggle:hover {
    color: #7a6315;
    background: rgba(181, 148, 42, 0.08);
}
.auth-pw-toggle:focus-visible {
    color: #7a6315;
    background: rgba(181, 148, 42, 0.08);
    outline: none;
    /* Explicit focus ring so keyboard users can see where focus is.
       Removing outline:none without replacing with a visible indicator
       violates WCAG 2.4.7 Focus Visible. */
    box-shadow: 0 0 0 0.1875rem rgba(181, 148, 42, 0.35);
}
.auth-pw-toggle svg { width: 1.125rem; height: 1.125rem; display: block; }
.auth-pw-toggle .auth-pw-hide { display: none; }
.auth-pw-toggle.is-showing .auth-pw-show { display: none; }
.auth-pw-toggle.is-showing .auth-pw-hide { display: inline-block; }
.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
    cursor: pointer;
    font-weight: var(--weight-medium);
}
.auth-check input {
    accent-color: var(--gold);
    cursor: pointer;
    width: 0.9375rem;
    height: 0.9375rem;
}
.auth-link {
    color: var(--gold-dark);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: color var(--anim-fast) var(--easing);
}
.auth-link:hover { color: var(--gold); text-decoration: underline; }

/* JS-action variant - used for "Forgot password?" which fires a JS
   handler instead of navigating. Strips the default <button> chrome so
   it reads identically to the anchor variant above but carries the
   right semantics for keyboard and screen-reader users. */
.auth-link-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.auth-link-btn:focus-visible {
    outline: 0.125rem solid var(--gold);
    outline-offset: 0.125rem;
    border-radius: var(--radius-xs);
}

/* ── Submit button ── */
.auth-submit {
    width: 100%;
    padding: 0.9375rem 1.5rem;
    background: linear-gradient(135deg, var(--slate) 0%, var(--slate-light) 100%);
    color: var(--gold-light);
    border: 0.0625rem solid var(--slate);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: transform var(--anim-fast) var(--easing),
                box-shadow var(--anim-fast) var(--easing),
                background var(--anim-fast) var(--easing);
    box-shadow: 0 0.375rem 1rem rgba(28, 35, 49, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
}
.auth-submit:hover:not(:disabled) {
    transform: translateY(-0.0625rem);
    box-shadow: var(--shadow-lg);
}
.auth-submit:focus-visible {
    outline: none;
    box-shadow: var(--shadow-gold), 0 0.375rem 1rem rgba(28, 35, 49, 0.18);
}
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.auth-submit svg { color: var(--gold-light); }

/* ── Error / info banner ── */
.auth-error {
    display: none;
    background: var(--error-light);
    border: 0.0625rem solid rgba(198, 40, 40, 0.18);
    color: var(--error);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
}
.auth-error.is-info {
    background: var(--info-light);
    border-color: rgba(21, 101, 192, 0.18);
    color: var(--info);
}

/* ── Divider with centered label ── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: var(--faint);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 0.0625rem;
    background: var(--border-light);
}

.auth-alt {
    font-size: var(--text-sm);
    color: var(--muted);
    text-align: center;
}

/* ── Terms line below signup button ── */
.auth-terms {
    font-size: var(--text-xs);
    color: var(--faint);
    text-align: center;
    line-height: var(--leading-relaxed);
}

/* ── Password strength meter (signup only) ──
   Hidden until the user starts typing, so the empty track doesn't look
   like a stray decorative line sandwiched between the input and the
   helper text. */
.auth-pw-strength {
    height: 0;
    border-radius: 62.4375rem;
    background: #ebe6dd;
    overflow: hidden;
    margin-top: 0;
    opacity: 0;
    transition: height 180ms ease, margin-top 180ms ease, opacity 180ms ease;
}
.auth-pw-strength.is-active {
    height: 0.1875rem;
    margin-top: 0.5rem;
    opacity: 1;
}
.auth-pw-strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 62.4375rem;
    background: transparent;
    transition: width 250ms ease, background 250ms ease;
}
.auth-pw-strength-bar.l1 { background: var(--error); }
.auth-pw-strength-bar.l2 { background: var(--warning); }
.auth-pw-strength-bar.l3 { background: var(--warning); }
.auth-pw-strength-bar.l4 { background: var(--success); }
.auth-pw-strength-bar.l5 { background: var(--success); }
.auth-pw-strength-text {
    font-size: var(--text-xs);
    color: var(--faint);
    margin-top: 0.25rem;
    font-weight: var(--weight-medium);
}
.auth-pw-strength-text.l1 { color: var(--error); }
.auth-pw-strength-text.l2,
.auth-pw-strength-text.l3 { color: var(--warning); }
.auth-pw-strength-text.l4,
.auth-pw-strength-text.l5 { color: var(--success); }

/* ── Form footer ── */
.auth-form-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
    color: var(--faint);
    padding-top: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.auth-form-foot a {
    color: var(--muted);
    text-decoration: none;
    font-weight: var(--weight-medium);
    transition: color var(--anim-fast) var(--easing);
}
.auth-form-foot a:hover { color: var(--slate); }
.auth-form-foot-links {
    display: inline-flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

/* ───────────────────────────────────────────────────────────────────────
   MARKETING COLUMN (right)
   ─────────────────────────────────────────────────────────────────────── */
.auth-pitch-col {
    position: relative;
    background: linear-gradient(180deg, var(--slate) 0%, var(--slate-light) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2rem, 4vw, 3.5rem);
    overflow: hidden;
}
@media (max-width: 64em) {
    .auth-pitch-col { display: none; }
}

.auth-pitch-inner {
    position: relative;
    max-width: 30rem;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    animation: fadeInUp var(--anim-normal) var(--easing) both;
    animation-delay: 80ms;
}
.auth-pitch-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold-light);
}
.auth-pitch-headline {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3vw, 2.5rem);
    font-weight: var(--weight-bold);
    color: #fff;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
}
.auth-pitch-headline em {
    color: var(--gold-light);
    font-style: normal;
}
.auth-pitch-list {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    list-style: none;
    padding: 0;
}
.auth-pitch-item {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: 0.875rem;
    align-items: flex-start;
}
.auth-pitch-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: rgba(212, 175, 55, 0.1);
    border: 0.0625rem solid rgba(212, 175, 55, 0.22);
    color: var(--gold-light);
    flex-shrink: 0;
}
.auth-pitch-item-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: var(--weight-bold);
    color: #fff;
    margin-bottom: 0.1875rem;
    letter-spacing: -0.005em;
}
.auth-pitch-item-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.62);
    line-height: var(--leading-relaxed);
}

.auth-pitch-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 1.25rem 0 0;
    border-top: 0.0625rem solid rgba(212, 175, 55, 0.18);
}
.auth-pitch-stat {
    text-align: left;
    padding: 0 1rem;
    border-right: 0.0625rem solid rgba(255, 255, 255, 0.08);
}
.auth-pitch-stat:first-child { padding-left: 0; }
.auth-pitch-stat:last-child {
    padding-right: 0;
    border-right: 0;
}
.auth-pitch-stat-value {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: var(--weight-medium);
    color: var(--gold-light);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.auth-pitch-stat-label {
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 0.375rem;
}
.auth-pitch-foot {
    position: relative;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.4);
    font-weight: var(--weight-medium);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.auth-pitch-foot-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.18);
    /* Static glow - pulsing dot removed. The static ring already
       communicates "live" status without distracting motion. */
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .auth-form-body,
    .auth-pitch-inner { animation: none; }
    .auth-pitch-foot-dot { animation: none; }
}

/* ── Mobile compact ── */
@media (max-width: 30em) {
    .auth-form-col { padding: 1.25rem; }
    .auth-form-body { padding: 1.5rem 0; gap: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Payment panel - the card-on-file step that follows /api/auth/signup.
   ═══════════════════════════════════════════════════════════════════ */

/* Three plan cards in a row on desktop, stack on narrow viewports.
   Gap scales up on wider viewports - at 84rem the cards have room
   for a real 1.25rem aisle between them instead of looking like a
   tab strip. */
.plan-options-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.625rem, 1.4vw, 1.25rem);
}
@media (max-width: 30em) {
    .plan-options-grid { grid-template-columns: 1fr; }
}

.plan-option {
    position: relative;
    display: block;
    padding: 0.875rem 0.875rem 0.875rem 2.25rem;
    background: #fff;
    border: 0.0625rem solid rgba(28, 35, 49, 0.12);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    outline: none;
}
.plan-option:hover {
    border-color: var(--gold, #b5942a);
    background: #fffef7;
}
.plan-option:focus-visible {
    box-shadow: 0 0 0 0.1875rem rgba(181, 148, 42, 0.35);
}
.plan-option input[type="radio"] {
    position: absolute;
    top: 0.875rem;
    left: 0.75rem;
    margin: 0;
    accent-color: var(--gold, #b5942a);
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}
.plan-option:has(input:checked) {
    border-color: var(--gold, #b5942a);
    background: #fffdf2;
    box-shadow: 0 0 0 0.0625rem var(--gold, #b5942a);
}
.plan-option:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}
.plan-option-name {
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--slate, #1c2331);
    letter-spacing: 0.01em;
}
.plan-option-price {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--slate, #1c2331);
    margin-top: 0.125rem;
}
.plan-option-price span {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    color: #6b6760;
    margin-left: 0.125rem;
}
.plan-option-note {
    font-size: 0.6875rem;
    color: #6b6760;
    margin-top: 0.25rem;
    line-height: 1.4;
}
.plan-option-unavailable {
    font-size: 0.625rem;
    color: #b44;
    margin-top: 0.25rem;
    letter-spacing: 0.02em;
}

/* ── Partner-discount banner & plan-card price treatments ──
   Rendered on the signup payment panel for users whose email is on a
   brokerage-partner allowlist (e.g. Coldwell Banker Stiles agents).
   The banner sits above the plan picker; each plan card shows the
   strike-through original list price next to the post-discount price
   so the 40% saving is visible before card entry. */
.payment-partner-banner {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    margin: 0 0 1rem;
    border: 0.0625rem solid #d4af37;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0.02));
}
.payment-partner-banner img {
    height: 2.5rem;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.payment-partner-text { line-height: 1.35; min-width: 0; }
.payment-partner-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--slate, #1c2331);
}
.payment-partner-sub {
    font-size: 0.75rem;
    color: #6b6760;
    margin-top: 0.125rem;
}
.payment-partner-sub strong { color: #b5942a; font-weight: 700; }

.plan-option-price-discounted {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.plan-option-price-original {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: #a39d92;
    text-decoration: line-through;
    text-decoration-thickness: 0.0625rem;
}
.plan-option-price-final {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #b5942a;
}
.plan-option-discount-badge {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #b5942a;
    background: rgba(212, 175, 55, 0.12);
    border: 0.0625rem solid rgba(212, 175, 55, 0.4);
    border-radius: 0.25rem;
    letter-spacing: 0.02em;
}

#county-picker select {
    width: 100%;
    border: 0.0625rem solid rgba(28, 35, 49, 0.12);
    border-radius: 0.375rem;
    background: #fff;
    font-size: 0.8125rem;
    color: var(--slate, #1c2331);
}
#county-picker select:focus {
    outline: none;
    border-color: var(--gold, #b5942a);
    box-shadow: 0 0 0 0.1875rem rgba(181, 148, 42, 0.18);
}

/* ── Payment panel shell ────────────────────────────────────────── */
/* Width scales with viewport: comfortable on a 27" desktop, doesn't
   sprawl past the comfortable reading line, still collapses cleanly
   on narrow screens. The 30em breakpoint below stacks plan cards. */
.payment-panel {
    gap: 1rem;
    max-width: 100%;
}

/* When the payment panel is visible, collapse the marketing rail so
   the card form gets the full viewport width instead of leaving a
   large empty dark column on the right. The form stays centered,
   but the overall composition reads as a single focused task sheet
   rather than a narrow strip next to dead space. */
/* Both the inline-style sniff and a body class trigger these rules.
   The :has() form catches the original inline-style toggle path; the
   body.payment-panel-active form is what the JS now adds explicitly,
   and is bulletproof against browser quirks in how `style="display:
   none"` gets normalized after JS mutates `el.style.display`. */
body:has(#payment-panel:not([style*="display:none"])) .auth-shell,
body.payment-panel-active .auth-shell {
    grid-template-columns: 1fr;
}
body:has(#payment-panel:not([style*="display:none"])) .auth-pitch-col,
body.payment-panel-active .auth-pitch-col {
    display: none;
}
body:has(#payment-panel:not([style*="display:none"])) .auth-form-col,
body.payment-panel-active .auth-form-col {
    align-items: center;
}
body:has(#payment-panel:not([style*="display:none"])) .auth-form-body,
body.payment-panel-active .auth-form-body {
    /* On the payment step the panel is the entire viewport (the
       marketing rail is collapsed above). Use a generous fluid cap
       so the layout actually fills 4K / ultrawide monitors instead
       of stranding the user inside a narrow strip. Lower bound stays
       at 30rem so phones still get the existing mobile layout. The
       upper bound caps at 110rem (≈1760px) - past that line lengths
       on the plan-card rows start to feel uncomfortable to read. */
    max-width: min(96vw, 110rem) !important;
    width: 100% !important;
    padding-left: clamp(1rem, 4vw, 3rem) !important;
    padding-right: clamp(1rem, 4vw, 3rem) !important;
}
/* Card details + mandate copy stay narrower than the plan grid
   above - long line lengths on a 1300px-wide credit-card form read
   like a settings page, not a checkout. Constrain just those rows. */
body:has(#payment-panel:not([style*="display:none"])) .payment-card-field,
body:has(#payment-panel:not([style*="display:none"])) #payment-error,
body:has(#payment-panel:not([style*="display:none"])) .payment-mandate,
body:has(#payment-panel:not([style*="display:none"])) .payment-trust,
body:has(#payment-panel:not([style*="display:none"])) #payment-submit,
body.payment-panel-active .payment-card-field,
body.payment-panel-active #payment-error,
body.payment-panel-active .payment-mandate,
body.payment-panel-active .payment-trust,
body.payment-panel-active #payment-submit {
    max-width: 32rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Same treatment for the verify-email step: the 6-digit code screen
   is a single focused task, so collapse the marketing rail and center
   the card both horizontally and vertically on the viewport. */
body:has(#verify-panel:not([style*="display:none"])) .auth-shell {
    grid-template-columns: 1fr;
}
body:has(#verify-panel:not([style*="display:none"])) .auth-pitch-col {
    display: none;
}
body:has(#verify-panel:not([style*="display:none"])) .auth-form-col {
    justify-content: center;
    align-items: center;
}
body:has(#verify-panel:not([style*="display:none"])) .auth-form-body {
    max-width: 24rem;
    width: 100%;
    /* Reserve space for the absolutely-positioned brand link at the top
       so the verify heading never slides under the logo on short or
       narrow viewports. The brand link is ~3.25rem tall + 1–2rem top
       offset, so ~5.5rem of top padding is the minimum safe clearance. */
    margin: auto;
    padding: clamp(5.5rem, 10vh, 6.5rem) clamp(1rem, 4vw, 2rem) clamp(1.5rem, 6vh, 3rem);
    gap: 1.25rem;
}
/* Keep the brand link docked at the top so the layout still reads as
   a page (not a lone modal floating in a void) when the rest of the
   form-col is centered. */
body:has(#verify-panel:not([style*="display:none"])) .auth-brand-link {
    position: absolute;
    top: clamp(1rem, 4vw, 2rem);
    left: 50%;
    transform: translateX(-50%);
    /* Float above the form body so we're never painted over by content
       that scrolls up into this zone. */
    z-index: 2;
}
body:has(#verify-panel:not([style*="display:none"])) .auth-form-col {
    position: relative;
    /* Allow vertical scrolling on short viewports so the verify card
       doesn't get squeezed into overlapping the logo or the footer. */
    overflow-y: auto;
}
/* On very short viewports (landscape phones, chat-embedded webviews),
   stop trying to center the card vertically - it loses the fight with
   the brand link. Let it flow from the top instead. */
@media (max-height: 38em) {
    body:has(#verify-panel:not([style*="display:none"])) .auth-form-col {
        justify-content: flex-start;
    }
    body:has(#verify-panel:not([style*="display:none"])) .auth-form-body {
        margin: 0 auto;
    }
}

/* ───────────────────────────────────────────────────────────────────────
   VERIFY EMAIL PANEL - styles for the six-digit code input + heading.
   Goal: feel confident, branded, and tactile. Each digit box is a
   crisp square with a gold focus ring; typing auto-advances; a paste
   distributes the code; a wrong code shakes the whole group.
   ─────────────────────────────────────────────────────────────────── */
.verify-panel { align-items: stretch; }
.verify-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}
.verify-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999rem;
    background: linear-gradient(135deg, rgba(181, 148, 42, 0.15) 0%, rgba(212, 175, 55, 0.06) 100%);
    color: var(--gold-dark);
    box-shadow: 0 0 0 0.0625rem rgba(181, 148, 42, 0.25);
    animation: verifyBadgePop 480ms var(--easing) both;
}
.verify-badge svg { width: 1.375rem; height: 1.375rem; display: block; }
@keyframes verifyBadgePop {
    0%   { transform: scale(0.6);  opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}
.verify-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3.4vw, 1.875rem);
    line-height: 1.15;
    color: var(--slate, #1c2331);
    letter-spacing: -0.005em;
    margin: 0;
}
.verify-sub {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--muted, #5d5651);
    margin: 0;
    max-width: 20rem;
}
.verify-sub strong {
    color: var(--slate, #1c2331);
    font-weight: 600;
    word-break: break-all;
}
/* Spam-folder advisory - sits inline with the heading group so it's
   the FIRST thing the user reads after the address, not a buried
   footnote. Soft amber tint signals "important info, not an error". */
.verify-spam-note {
    display: block;
    max-width: 22rem;
    margin: 0.5rem auto 0;
    padding: 0.625rem 0.875rem;
    background: rgba(212, 175, 55, 0.10);
    border: 0.0625rem solid rgba(181, 148, 42, 0.30);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--slate, #1c2331);
    text-align: left;
}
.verify-spam-note strong {
    color: var(--gold-dark, #8a7020);
    font-weight: 600;
}
.verify-spam-note svg {
    color: var(--gold-dark, #8a7020);
}

.verify-field { display: flex; flex-direction: column; gap: 0.625rem; }
.verify-code-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted, #5d5651);
    text-align: center;
}
.verify-code-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    flex-wrap: nowrap;
}
.verify-code-sep {
    width: 0.625rem;
    height: 0.125rem;
    background: var(--border, #d5cfc5);
    border-radius: 62.4375rem;
    flex-shrink: 0;
    opacity: 0.65;
}
.verify-code-digit {
    /* Square digit tile - uses clamp so it scales on tiny phones without
       ever overflowing, and stays a comfortable tap target on desktop. */
    width: clamp(2.25rem, 11.5vw, 2.875rem);
    height: clamp(2.625rem, 13vw, 3.375rem);
    padding: 0;
    text-align: center;
    font-family: 'DM Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: clamp(1.25rem, 5vw, 1.625rem);
    font-weight: 600;
    color: var(--slate, #1c2331);
    background: #ffffff;
    border: 0.0625rem solid var(--border, #d5cfc5);
    border-radius: 0.5rem;
    box-shadow: 0 0.0625rem 0.125rem rgba(28, 35, 49, 0.05);
    transition: border-color 120ms ease, box-shadow 120ms ease,
                background 120ms ease, transform 120ms ease;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    caret-color: var(--gold, #b5942a);
}
.verify-code-digit::-webkit-outer-spin-button,
.verify-code-digit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.verify-code-digit:hover {
    border-color: rgba(181, 148, 42, 0.55);
}
.verify-code-digit:focus,
.verify-code-digit:focus-visible {
    border-color: var(--gold, #b5942a);
    box-shadow: 0 0 0 0.1875rem rgba(181, 148, 42, 0.22);
    background: #fffdf8;
}
.verify-code-digit.is-filled {
    background: linear-gradient(180deg, #fffdf5 0%, #fff8e9 100%);
    border-color: rgba(181, 148, 42, 0.55);
    color: var(--slate, #1c2331);
}

/* Error shake - triggered by adding .is-shaking to the group */
.verify-code-group.is-shaking { animation: verifyShake 380ms cubic-bezier(.36,.07,.19,.97); }
.verify-code-group.is-shaking .verify-code-digit {
    border-color: var(--error, #c62828);
    box-shadow: 0 0 0 0.1875rem rgba(198, 40, 40, 0.18);
}
@keyframes verifyShake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-0.375rem); }
    30%      { transform: translateX(0.375rem); }
    45%      { transform: translateX(-0.25rem); }
    60%      { transform: translateX(0.25rem); }
    75%      { transform: translateX(-0.125rem); }
    90%      { transform: translateX(0.125rem); }
}
@media (prefers-reduced-motion: reduce) {
    .verify-code-group.is-shaking,
    .verify-badge { animation: none !important; }
    .verify-code-digit { transition: none !important; }
}

.verify-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--muted, #5d5651);
    line-height: 1.5;
    text-align: center;
}
.verify-resend-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--gold-dark, #8a7020);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color 120ms ease;
}
.verify-resend-btn:hover,
.verify-resend-btn:focus-visible { color: var(--gold, #b5942a); outline: none; }
.verify-resend-btn:disabled { opacity: 0.55; cursor: progress; }
.verify-resend-status { color: var(--faint, #767069); font-size: 0.8125rem; }

/* Narrow-phone tweak - keep all six digit boxes on one row at 22em+. */
@media (max-width: 22.5em) {
    .verify-code-group { gap: 0.25rem; }
    .verify-code-sep { width: 0.375rem; }
}

/* Tablet/desktop breathing room for the verify card */
@media (min-width: 36em) {
    .verify-code-group { gap: 0.5rem; }
}

.payment-head { display: flex; flex-direction: column; gap: 0.5rem; }
.payment-headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.15;
    color: var(--slate, #1c2331);
    margin: 0;
}
@media (max-width: 30em) {
    .payment-headline { font-size: 1.375rem; }
}
.payment-reassure {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f4f9f2;
    border: 0.0625rem solid #c9e0b6;
    border-radius: 0.375rem;
    color: #3a5f1e;
    font-size: 0.8125rem;
    line-height: 1.4;
}
.payment-reassure svg { flex-shrink: 0; color: #5a8a2a; margin-top: 0.125rem; }
.payment-reassure strong { font-weight: 700; white-space: nowrap; }

/* ── County picker ─────────────────────────────────────────────── */
.county-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fafaf7;
    border: 0.0625rem solid rgba(28, 35, 49, 0.1);
    border-radius: 0.5rem;
}
.county-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.county-picker-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--slate, #1c2331);
}
.county-picker-status {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b6660;
    letter-spacing: 0.02em;
}
.county-picker-status.is-complete {
    color: #3a5f1e;
}
.county-search {
    width: 100%;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    border: 0.0625rem solid rgba(28, 35, 49, 0.12);
    border-radius: 0.375rem;
    background: #fff;
    color: var(--slate, #1c2331);
    font-family: var(--font-body);
    /* Extra gap below the search input so the first row of county chips
       has room to breathe - without this the chips crowd the caret. */
    margin-bottom: 0.625rem;
}
.county-search:focus {
    outline: none;
    border-color: var(--gold, #b5942a);
    box-shadow: 0 0 0 0.1875rem rgba(181, 148, 42, 0.18);
}
.county-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: 0.375rem;
    max-height: 12rem;
    overflow-y: auto;
    padding: 0.25rem;
    margin: -0.25rem;
    scrollbar-width: thin;
}
@media (max-width: 30em) {
    .county-grid {
        grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
        max-height: 9rem;
    }
}
.county-chip {
    appearance: none;
    border: 0.0625rem solid rgba(28, 35, 49, 0.12);
    background: #fff;
    color: var(--slate, #1c2331);
    padding: 0.375rem 0.5rem;
    border-radius: 0.3125rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, color 140ms ease;
}
.county-chip:hover {
    border-color: var(--gold, #b5942a);
    background: #fffef7;
}
.county-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.125rem rgba(181, 148, 42, 0.35);
}
.county-chip.selected {
    background: var(--gold, #b5942a);
    border-color: var(--gold, #b5942a);
    color: var(--slate, #1c2331);
}
.county-chip-flash {
    animation: countyChipFlash 350ms ease;
}
@keyframes countyChipFlash {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* ── Card field shell ───────────────────────────────────────────── */
.payment-card-field { display: flex; flex-direction: column; gap: 0.375rem; }
.payment-card-field label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--slate, #1c2331);
}
#payment-element {
    padding: 0.75rem;
    border: 0.0625rem solid rgba(28, 35, 49, 0.12);
    border-radius: 0.375rem;
    background: #fff;
    min-height: 2.75rem;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
#payment-element:focus-within {
    border-color: var(--gold, #b5942a);
    box-shadow: 0 0 0 0.1875rem rgba(181, 148, 42, 0.18);
}

/* ── Our own mandate copy (replaces Stripe's default "by providing
   your card information…" text, which we suppress via terms.card:'never'). */
.payment-mandate {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: #6b6760;
    letter-spacing: 0.01em;
}
.payment-mandate strong { color: var(--slate, #1c2331); }

/* ── Trust row: PCI badge + Powered by Stripe ──────────────────── */
.payment-trust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 0.0625rem solid rgba(28, 35, 49, 0.06);
    font-size: 0.6875rem;
    color: #6b6660;
}
.payment-trust-lock {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    letter-spacing: 0.02em;
}
.payment-trust-stripe {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #635bff;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: opacity 140ms ease;
}
.payment-trust-stripe:hover { opacity: 0.8; }
.payment-trust-stripe .stripe-wordmark {
    /* Scales with the surrounding font-size so the whole trust row
       responds together. Height tracks the row's line-height;
       native image ratio is preserved via width:auto. */
    height: 1.5em;
    width: auto;
    display: block;
    object-fit: contain;
    /* The official PNG ships as dark wordmark on transparent. Let it
       render as-is so the brand lockup stays recognizable; the
       surrounding link area provides the hover/focus affordance. */
}
.payment-trust-stripe span { color: #6b6660; }

/* ── Compact plan cards (override the earlier stacked version).
   At default viewports the cards are horizontal to reduce scroll. */
.plan-options-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
@media (max-width: 30em) {
    .plan-options-grid { grid-template-columns: 1fr; gap: 0.375rem; }
}
.plan-option {
    padding: 0.625rem 0.625rem 0.625rem 1.875rem;
}
.plan-option input[type="radio"] {
    top: 0.6875rem;
    left: 0.5rem;
}
.plan-option-name { font-size: 0.75rem; }
.plan-option-price { font-size: 1.125rem; margin-top: 0; }
.plan-option-note { font-size: 0.625rem; margin-top: 0.125rem; line-height: 1.3; }