/* Platform landing page (index.php) - marketing + self-service
   registration. Standalone page, deliberately NOT using the per-tenant
   theming system (buildThemeAssets()) - this is platform-level chrome
   with its own fixed blue "cloud tech" identity, not any one company's
   branding. Its own small token set, same "standalone page defines its
   own tiny palette" precedent as link-page-public.css/group-units.css.

   Redesigned 2026-08-16 (see CLAUDE.md's "Registration page: full
   redesign" section) - the old layout was a permanent 60/40 split
   (dark marketing panel | white form column) for BOTH steps, which
   meant the plan picker (Step 1) was always squeezed into that ~40%-
   wide column even though comparing 3-4 pricing plans genuinely needs
   real width. This version gives each step the width it actually
   needs: Step 1 is a full-width page (hero band, then a proper
   pricing-page-style card grid); Step 2 drops the marketing panel
   entirely in favor of a small, centered, distraction-free form - by
   that point the sale is already made, and every extra visual element
   is just friction toward finishing. */

:root {
    --reg-blue-dark: #0b1f3a;
    --reg-blue-mid: #123a6b;
    --reg-blue-accent: #2f6fed;
    --reg-blue-light: #7ea6f7;
    --reg-white: #ffffff;
    --reg-surface: #f5f8fc;
    --reg-text: #1a202c;
    --reg-muted: #718096;
    --reg-border: #e2e8f0;
    --reg-green: #16a34a;
    --reg-radius: 12px;
    --reg-radius-sm: 8px;
    --reg-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --reg-shadow-lg: 0 14px 32px rgba(15, 32, 65, 0.14);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Manrope", sans-serif;
    color: var(--reg-text);
    line-height: 1.4;
    background: var(--reg-white);
}

/* ---------- Top bar (persistent across both steps) ---------- */
.reg-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 14px 32px;
    background: var(--reg-white);
    border-bottom: 1px solid var(--reg-border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.reg-topbar-brand {
    justify-self: start;
    display: flex;
    align-items: center;
}

.reg-topbar-logo {
    height: 30px;
    width: auto;
    object-fit: contain;
}

.reg-topbar-login {
    justify-self: end;
    font-size: 0.85rem;
    color: var(--reg-muted);
    white-space: nowrap;
}

.reg-topbar-login a {
    color: var(--reg-blue-accent);
    font-weight: 700;
    text-decoration: none;
}

.reg-topbar-login a:hover {
    text-decoration: underline;
}

/* ---------- Step progress indicator (lives in the top bar) ---------- */
.reg-steps-indicator {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reg-step-dot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--reg-muted);
    white-space: nowrap;
}

.reg-step-dot-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--reg-border);
    color: var(--reg-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.reg-step-dot-active {
    color: var(--reg-text);
}

.reg-step-dot-active .reg-step-dot-num {
    background: var(--reg-blue-accent);
    color: #fff;
}

.reg-step-dot-done .reg-step-dot-num {
    background: var(--reg-green);
    color: #fff;
}

.reg-step-dot-line {
    width: 32px;
    height: 2px;
    background: var(--reg-border);
}

/* ---------- Step 1: Hero band ---------- */
/* Layered background - each comma-separated layer paints on TOP of the
   ones listed after it, so the two decorative radial glows and the main
   navy gradient sit above assets/images/bg.webp, acting as a real
   darkening scrim rather than the photo showing through untouched. This
   was a real, serious bug during the redesign's own first pass: an
   inline style="background-image:url(...)" on the element (carried over
   from the old markup) silently overrode this entire rule's
   background-image, since an inline style always wins over an external
   stylesheet for the same longhand property regardless of the other
   rule's own specificity - the gradients were never actually rendering,
   leaving raw photo-on-white-text with no contrast control at all.
   Confirmed fixed by removing that inline style from index.php AND
   moving the image into this one shorthand declaration as the bottom
   layer, so it can never silently reassert itself as a separate,
   unlayered background-image again. */
.reg-hero {
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.10) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(255,255,255,0.08) 0%, transparent 40%),
        linear-gradient(150deg, rgba(11,31,58,0.94) 0%, rgba(18,58,107,0.9) 55%, rgba(47,111,237,0.86) 130%),
        url('../images/bg.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    color: var(--reg-white);
    text-align: center;
    padding: 56px 32px 46px;
}

.reg-hero-inner {
    max-width: 760px;
    margin: 0 auto;
}

.reg-headline {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}

.reg-subheadline {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 28px;
}

.reg-trust-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.reg-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}

.reg-trust-chip i {
    color: var(--reg-blue-light);
    font-size: 0.85rem;
}

/* ---------- Step 1: Plan grid section ---------- */
.reg-plans-section {
    background: var(--reg-surface);
    padding: 48px 24px 60px;
}

.reg-plans-section-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.reg-plans-heading {
    text-align: center;
    margin-bottom: 36px;
}

.reg-plans-heading h2 {
    font-size: 1.85rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.reg-plans-heading .reg-form-sub {
    margin-bottom: 0;
}

.reg-form-sub {
    color: var(--reg-muted);
    font-size: 0.92rem;
    margin-bottom: 20px;
}

.reg-form-sub a {
    color: var(--reg-blue-accent);
    font-weight: 600;
    text-decoration: none;
}

.reg-form-sub a:hover {
    text-decoration: underline;
}

.reg-no-plans {
    color: var(--reg-muted);
    font-size: 0.92rem;
    padding: 20px;
    background: var(--reg-white);
    border-radius: var(--reg-radius-sm);
    text-align: center;
    grid-column: 1 / -1;
}

/* Real, proper grid now - no more artificial horizontal scrolling. A
   plan-picker squeezed into a ~40%-wide sidebar (the old layout) is
   what forced last time's horizontal-scroll-row workaround in the first
   place; with Step 1 owning the full page width, a plain responsive
   grid naturally wraps to fewer columns (down to 1 on mobile) with real
   vertical page scroll instead - simpler, and no JS-driven scroll
   mechanism needed at all. */
.reg-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    align-items: stretch;
}

.reg-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--reg-white);
    border: 2px solid var(--reg-border);
    border-radius: 18px;
    padding: 32px 26px 26px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15,32,65,0.05);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.reg-plan-card:hover {
    box-shadow: var(--reg-shadow-lg);
    transform: translateY(-3px);
}

.reg-plan-card:has(input:checked) {
    border-color: var(--reg-blue-accent);
    box-shadow: 0 0 0 3px rgba(47,111,237,0.14), var(--reg-shadow-lg);
}

.reg-plan-card input[type="radio"] {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 19px;
    height: 19px;
    accent-color: var(--reg-blue-accent);
    cursor: pointer;
}

.reg-plan-name {
    font-size: 1.15rem;
    font-weight: 800;
    padding-right: 28px;
    margin-bottom: 14px;
}

.reg-plan-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.reg-plan-price {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--reg-blue-accent);
}

.reg-plan-meta {
    font-size: 0.85rem;
    color: var(--reg-muted);
}

.reg-plan-units {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--reg-muted);
    margin-top: 8px;
}

.reg-plan-desc {
    font-size: 0.85rem;
    color: var(--reg-muted);
    line-height: 1.55;
    margin-top: 14px;
}

.reg-plan-features {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px;
    padding: 0;
    list-style: none;
    flex: 1;
}

.reg-plan-features li {
    font-size: 0.85rem;
    color: var(--reg-text);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.reg-plan-features li i {
    color: var(--reg-green);
    font-size: 0.72rem;
    margin-top: 3px;
    flex-shrink: 0;
}

/* Decorative "call to action" strip at the bottom of every card -
   purely presentational (the whole card is already the real click
   target, via the <label>/radio pairing), but gives each plan its own
   clear "select this" moment the way a proper pricing page does,
   instead of relying only on a shared Continue button below the grid
   to communicate that. */
.reg-plan-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 2px solid var(--reg-border);
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--reg-text);
    transition: background .15s, border-color .15s, color .15s;
}

.reg-plan-card:has(input:checked) .reg-plan-cta {
    background: var(--reg-blue-accent);
    border-color: var(--reg-blue-accent);
    color: #fff;
}

/* "MOST POPULAR"-style plan gets real visual weight, not just the badge -
   a permanently-visible accent border/tint plus a scale-up, so it stands
   out on the grid before anything is even selected - this is what
   actually does the "nudge toward this plan" work the badge alone
   can't. The hover/checked states are re-declared here (not just left
   to the base .reg-plan-card rules) so the scale-up composes correctly
   with the hover lift instead of one transform silently replacing the
   other. */
.reg-plan-card-featured {
    border-color: var(--reg-blue-accent);
    background: linear-gradient(180deg, #eff6ff 0%, var(--reg-white) 55%);
    box-shadow: 0 10px 26px rgba(47,111,237,0.18);
    transform: scale(1.035);
    z-index: 2;
}

.reg-plan-card-featured:hover {
    transform: scale(1.035) translateY(-3px);
}

.reg-plan-card-featured:has(input:checked) {
    background: #eff6ff;
}

.reg-plan-badge {
    position: absolute;
    top: -13px;
    left: 26px;
    padding: 4px 14px;
    background: var(--reg-blue-accent);
    color: #fff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 3px 8px rgba(47,111,237,0.3);
}

/* A $0 plan's own visual language - "here's a free option worth
   noticing," deliberately calmer than .reg-plan-card-featured's
   scale-up + permanent blue accent (reserved for the one promoted PAID
   tier, e.g. "MOST POPULAR"), so the two never compete for the same
   "this is the special one" attention on the same grid. A left accent
   stripe instead of a scaled-up card, and green instead of blue - green
   already reads as "included/no-cost" everywhere else on this picker
   (.reg-plan-features li i uses the same color). */
.reg-plan-card-free {
    border-color: #bbf0cf;
    border-left: 5px solid var(--reg-green);
    background: linear-gradient(180deg, #f0fdf4 0%, var(--reg-white) 55%);
}

.reg-plan-card-free:has(input:checked) {
    border-color: var(--reg-green);
    box-shadow: 0 0 0 3px rgba(22,163,74,0.14), var(--reg-shadow-lg);
    background: #f0fdf4;
}

.reg-plan-card-free:has(input:checked) .reg-plan-cta {
    background: var(--reg-green);
    border-color: var(--reg-green);
}

.reg-plan-badge-free {
    background: var(--reg-green);
    box-shadow: 0 3px 8px rgba(22,163,74,0.3);
}

.reg-step1-actions {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.reg-step1-actions .reg-submit-btn {
    max-width: 320px;
}

.reg-trust-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
    font-size: 0.82rem;
    color: var(--reg-muted);
}

/* ---------- Step 2: Account details (narrow, centered, no marketing) ---------- */
.reg-account-section {
    min-height: calc(100vh - 62px); /* full viewport minus the sticky top bar's own height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--reg-surface);
    padding: 48px 20px;
}

.reg-account-card {
    background: var(--reg-white);
    border-radius: 20px;
    padding: 40px 36px;
    max-width: 480px;
    width: 100%;
    box-shadow: var(--reg-shadow-lg);
}

.reg-account-card h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.reg-alert {
    background: #fed7d7;
    color: #742a2a;
    border: 1px solid #feb2b2;
    border-radius: var(--reg-radius-sm);
    padding: 12px 14px;
    font-size: 0.85rem;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.reg-selected-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid var(--reg-blue-light);
    border-radius: var(--reg-radius-sm);
    margin-bottom: 22px;
}

.reg-selected-plan-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reg-selected-plan-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--reg-muted);
    font-weight: 700;
}

.reg-selected-plan-name {
    font-size: 0.85rem;
    font-weight: 700;
}

.reg-change-plan-btn {
    background: none;
    border: none;
    color: var(--reg-blue-accent);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
}

.reg-change-plan-btn:hover {
    background: rgba(47, 111, 237, 0.1);
}

.reg-form-row {
    margin-bottom: 16px;
}

.reg-form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.reg-form-row label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--reg-text);
}

.reg-optional {
    font-weight: 400;
    color: var(--reg-muted);
}

.reg-form-row input[type="text"],
.reg-form-row input[type="email"],
.reg-form-row input[type="tel"],
.reg-form-row input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--reg-border);
    border-radius: var(--reg-radius-sm);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.reg-form-row input:focus {
    outline: none;
    border-color: var(--reg-blue-accent);
}

/* ---------- Shared submit button (both steps) ---------- */
.reg-submit-btn {
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--reg-blue-mid) 0%, var(--reg-blue-accent) 100%);
    color: var(--reg-white);
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.reg-submit-btn-wide {
    width: 100%;
}

.reg-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--reg-shadow-lg);
}

.reg-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .reg-topbar {
        grid-template-columns: auto 1fr;
        padding: 12px 18px;
    }
    .reg-steps-indicator {
        justify-self: end;
        gap: 6px;
    }
    .reg-step-dot-label {
        display: none; /* number badge only on narrow screens - "Choose your plan" text wraps awkwardly this tight */
    }
    .reg-step-dot-line {
        width: 16px;
    }
    .reg-topbar-login {
        display: none; /* the "Log in" link isn't worth the space competition here - still reachable from the login page itself */
    }
    .reg-hero {
        padding: 40px 20px 34px;
    }
    .reg-headline {
        font-size: 1.7rem;
    }
    .reg-subheadline {
        font-size: 0.95rem;
    }
    .reg-plans-section {
        padding: 36px 16px 48px;
    }
    .reg-plan-card-featured {
        transform: none; /* the scale-up reads as misalignment once cards stack to 1 column - full width is already "featured" enough at that point */
    }
    .reg-plan-card-featured:hover {
        transform: translateY(-3px);
    }
    .reg-account-card {
        padding: 32px 24px;
    }
}

@media (max-width: 480px) {
    .reg-form-row-split {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ---------- Shared: signup/payment-return.php status page ---------- */
.reg-status-body {
    font-family: "Manrope", sans-serif;
    background: var(--reg-blue-dark);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.reg-status-card {
    background: var(--reg-white);
    border-radius: 16px;
    padding: 44px 36px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.reg-status-icon {
    font-size: 44px;
    margin-bottom: 18px;
}

.reg-status-icon-success { color: #48bb78; }
.reg-status-icon-pending { color: var(--reg-blue-accent); }
.reg-status-icon-error { color: #e53e3e; }

.reg-status-card h1 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.reg-status-card p {
    color: var(--reg-muted);
    font-size: 0.92rem;
    margin-bottom: 22px;
    line-height: 1.5;
}

.reg-btn-primary {
    display: inline-block;
    padding: 11px 26px;
    border-radius: var(--reg-radius-sm);
    background: linear-gradient(135deg, var(--reg-blue-mid) 0%, var(--reg-blue-accent) 100%);
    color: var(--reg-white);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}