/* Sign-up funnel — standalone pages, no SPA shell.
   The app's theme variables live in style.css, which these pages deliberately
   do not load (they need none of its layout). The handful of tokens they do
   need are redeclared here, taken from the same kassia.ai palette, so the two
   files stay independent without drifting apart visually. */

:root {
    --su-bg: #131311;
    --su-surface: #1c1c18;
    --su-surface-2: #26261f;
    --su-border: #2f2f28;
    --su-border-strong: #454339;
    --su-text: #f5f3ea;
    --su-text-dim: #cbc8ba;
    --su-text-muted: #93907f;
    --su-accent: #f5c11e;
    --su-accent-2: #ffd23f;
    /* Amber is light; anything sitting on it needs ink, not white. */
    --su-accent-ink: #171408;
    --su-accent-soft: rgba(245, 193, 30, 0.13);
    --su-success: #3fb950;
    --su-danger: #f85149;
}

.signup-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 12% -10%, rgba(245, 193, 30, 0.10), transparent 45%),
        radial-gradient(circle at 92% 8%, rgba(245, 193, 30, 0.06), transparent 42%),
        var(--su-bg);
    color: var(--su-text);
    font-family: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- Top bar --- */

.signup-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--su-border);
    background: rgba(13, 17, 23, 0.72);
    backdrop-filter: blur(8px);
}

.signup-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--su-text);
    font-size: 1.05rem;
}

.signup-brand img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--su-accent);
}

.signup-brand strong {
    font-weight: 600;
    color: var(--su-text-dim);
}

.signup-topbar-aside {
    margin: 0;
    font-size: 0.9rem;
    color: var(--su-text-dim);
}

.signup-topbar-aside a {
    color: var(--su-accent);
    font-weight: 600;
    text-decoration: none;
}

.signup-topbar-aside a:hover {
    text-decoration: underline;
}

/* --- Layout --- */

.signup-main {
    flex: 1 1 auto;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.signup-main-narrow {
    max-width: 640px;
}

.signup-intro {
    text-align: center;
    margin-bottom: 2.5rem;
}

.signup-intro h1 {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.signup-intro p {
    margin: 0 auto;
    max-width: 52ch;
    color: var(--su-text-dim);
}

.signup-notice {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    border: 1px solid var(--su-border-strong);
    border-left: 3px solid #d29922;
    border-radius: 10px;
    background: var(--su-surface);
    color: var(--su-text-dim);
    font-size: 0.92rem;
}

.signup-notice strong {
    color: var(--su-text);
    display: block;
}

/* --- Steps --- */

.signup-step {
    margin-bottom: 2.75rem;
}

.signup-step-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.signup-step-number {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--su-accent-soft);
    border: 1px solid var(--su-accent);
    color: var(--su-accent);
    font-weight: 600;
    font-size: 0.95rem;
}

.signup-step-head h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
}

.signup-step-head p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--su-text-dim);
}

/* --- Plan cards --- */

.billing-toggle {
    display: inline-flex;
    gap: 0.25rem;
    margin: 0 0 1.25rem;
    padding: 0.25rem;
    border: 1px solid var(--su-border);
    border-radius: 999px;
    background: var(--su-surface);
}

.billing-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--su-text-dim);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.billing-option.is-selected {
    background: var(--su-accent);
    color: var(--su-accent-ink);
}

.billing-option:has(.billing-radio:focus-visible) {
    outline: 2px solid var(--su-accent);
    outline-offset: 2px;
}

.billing-save {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--su-accent-soft);
    color: var(--su-accent);
    font-size: 0.72rem;
}

.billing-option.is-selected .billing-save {
    background: rgba(23, 20, 8, 0.15);
    color: var(--su-accent-ink);
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.plan-card,
.credential-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--su-border);
    border-radius: 14px;
    background: var(--su-surface);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.plan-card:hover,
.credential-card:hover {
    border-color: var(--su-border-strong);
    transform: translateY(-2px);
}

.plan-card.is-selected,
.credential-card.is-selected {
    border-color: var(--su-accent);
    background: linear-gradient(180deg, var(--su-accent-soft), var(--su-surface) 60%);
}

/* The radio itself is the accessible control; it is visually replaced by the
   card, but must stay focusable and reachable — hence clipped, not hidden. */
.plan-radio,
.credential-radio,
.billing-radio,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.plan-radio:focus-visible + .plan-card-head,
.credential-radio:focus-visible + .credential-icon {
    outline: 2px solid var(--su-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.plan-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plan-name {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--su-text-dim);
}

.plan-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--su-border-strong);
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    color: transparent;
    transition: all 0.18s ease;
}

.plan-card.is-selected .plan-check,
.credential-card.is-selected .plan-check {
    background: var(--su-accent);
    border-color: var(--su-accent);
    color: var(--su-accent-ink);
}

.plan-price {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
}

.plan-price small {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--su-text-dim);
    margin-top: 0.2rem;
}

.plan-tagline {
    font-size: 0.9rem;
    color: var(--su-text-dim);
}

/* The Early Adopters first-year price (annual only) and the professional fee. */
.plan-offer {
    font-size: 0.82rem;
    color: var(--su-accent);
}

.plan-fee-note {
    font-size: 0.78rem;
    color: var(--su-text-dim);
}

.billing-cohort {
    margin: -0.5rem 0 1.25rem;
    font-size: 0.88rem;
    color: var(--su-accent);
}

/* Paid plans while the account application is on: visible, not selectable. */
.plan-card.is-coming-soon {
    cursor: default;
    opacity: 0.72;
}

.plan-card.is-coming-soon .plan-check {
    visibility: hidden;
}

.plan-soon-badge {
    margin-left: auto;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--su-border-strong);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--su-text-dim);
    white-space: nowrap;
}

.plan-soon-notice {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.5rem 0 1rem;
    color: var(--su-text-dim);
    font-size: 0.92rem;
}

/* --- Founding offer --- */

.plan-price-was {
    margin-right: 0.45rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--su-text-muted);
    text-decoration-thickness: 1px;
}

.plan-compare-price .plan-price-was {
    margin-right: 0.3rem;
    font-size: 0.75rem;
}

.plan-features {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--su-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--su-text-dim);
}

.plan-features li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.plan-features i {
    color: var(--su-success);
    margin-top: 0.15rem;
}

/* --- Plan comparison matrix --- */

.plan-compare {
    margin-top: 1.25rem;
    border: 1px solid var(--su-border);
    border-radius: 14px;
    background: var(--su-surface);
    overflow: hidden;
}

.plan-compare-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--su-text-dim);
    list-style: none;
    transition: color 0.18s ease, background 0.18s ease;
}

/* Safari still paints its own disclosure triangle without this. */
.plan-compare-summary::-webkit-details-marker {
    display: none;
}

.plan-compare-summary:hover {
    color: var(--su-text);
    background: var(--su-surface-2);
}

.plan-compare-summary:focus-visible {
    outline: 2px solid var(--su-accent);
    outline-offset: -2px;
}

.plan-compare-summary > .bi:first-child {
    color: var(--su-accent);
}

.plan-compare-summary-text {
    flex: 1 1 auto;
}

.plan-compare-chevron {
    font-size: 0.85rem;
    transition: transform 0.18s ease;
}

.plan-compare[open] .plan-compare-chevron {
    transform: rotate(180deg);
}

/* The matrix is wider than the page on a laptop and much wider on a tablet, so
   it scrolls in its own box rather than forcing the whole page sideways. */
.plan-compare-scroll {
    overflow: auto;
    max-height: 70vh;
    border-top: 1px solid var(--su-border);
}

.plan-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

.plan-compare-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.75rem 1rem;
    background: var(--su-surface-2);
    border-bottom: 1px solid var(--su-border-strong);
    white-space: nowrap;
}

.plan-compare-table thead th.plan-compare-corner {
    left: 0;
    z-index: 3;
    color: var(--su-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
}

.plan-compare-plan {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--su-text-dim);
}

.plan-compare-price {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--su-text);
}

.plan-compare-price small {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--su-text-muted);
}

.plan-compare-group th {
    padding: 0.75rem 1rem 0.4rem;
    background: var(--su-bg);
    border-top: 1px solid var(--su-border);
    border-bottom: 1px solid var(--su-border);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--su-accent);
}

.plan-compare-group th span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--su-text-muted);
}

.plan-compare-feature {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 15rem;
    padding: 0.7rem 1rem;
    background: var(--su-surface);
    font-weight: 500;
    color: var(--su-text);
    vertical-align: top;
}

.plan-compare-feature span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--su-text-muted);
}

@media (min-width: 721px) {
    .plan-compare-table tbody tr:not(.plan-compare-group) + tr:not(.plan-compare-group) th,
    .plan-compare-table tbody tr:not(.plan-compare-group) + tr:not(.plan-compare-group) td {
        border-top: 1px solid var(--su-border);
    }
}

.plan-compare-cell {
    min-width: 9rem;
    padding: 0.7rem 1rem;
    vertical-align: top;
    color: var(--su-text-dim);
}

.plan-compare-mark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

.plan-compare-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--su-text-muted);
}

.plan-compare-cell.is-yes .bi {
    color: var(--su-success);
}

.plan-compare-cell.is-partial .bi {
    color: var(--su-accent);
}

.plan-compare-cell.is-no {
    color: var(--su-text-muted);
}

.plan-compare-cell.is-no .bi,
.plan-compare-cell.is-soon .bi {
    color: var(--su-text-muted);
}

.plan-compare-cell.is-soon .plan-compare-label {
    font-style: italic;
}

/* The column for whatever plan is selected above, so the table answers "what
   am I about to buy" and not only "what is on offer". */
.plan-compare-table thead th.is-active,
.plan-compare-cell.is-active {
    background: var(--su-accent-soft);
}

/* The header is sticky, so its tint sits on an opaque base or the rows
   scrolling underneath show through it. */
.plan-compare-table thead th.is-active {
    background: linear-gradient(var(--su-accent-soft), var(--su-accent-soft)), var(--su-surface-2);
    box-shadow: inset 0 -2px 0 var(--su-accent);
}

/* Plan name repeated inside each cell; only used once the table has been
   re-flowed into stacked blocks and the column header is gone. */
.plan-compare-cell-plan {
    display: none;
}

@media (max-width: 720px) {
    .plan-compare-scroll {
        max-height: none;
    }

    .plan-compare-table,
    .plan-compare-table tbody,
    .plan-compare-table tr {
        display: block;
    }

    .plan-compare-table thead {
        display: none;
    }

    .plan-compare-table tbody tr:not(.plan-compare-group) {
        padding-bottom: 0.5rem;
    }

    .plan-compare-table tbody tr:not(.plan-compare-group) + tr:not(.plan-compare-group) {
        border-top: 1px solid var(--su-border);
    }

    .plan-compare-group th,
    .plan-compare-feature {
        display: block;
        position: static;
        min-width: 0;
    }

    .plan-compare-feature {
        padding-bottom: 0.35rem;
    }

    .plan-compare-cell {
        display: grid;
        grid-template-columns: 5.5rem 1fr;
        align-items: baseline;
        column-gap: 0.5rem;
        min-width: 0;
        padding: 0.25rem 1rem;
    }

    .plan-compare-cell-plan {
        display: block;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--su-text-muted);
    }

    .plan-compare-note {
        grid-column: 2;
        margin-top: 0;
    }
}

/* --- Credential preference --- */

.credential-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.credential-icon {
    font-size: 1.6rem;
    color: var(--su-accent);
}

.credential-title {
    font-weight: 600;
}

.credential-title em {
    font-style: normal;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--su-success);
    margin-left: 0.4rem;
}

.credential-body {
    font-size: 0.88rem;
    color: var(--su-text-dim);
}

/* --- Fields --- */

.signup-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.signup-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.signup-field-avatar {
    grid-column: 1 / -1;
}

.signup-field label,
.signup-field-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--su-text-dim);
}

.signup-field-label em {
    font-style: normal;
    font-weight: 400;
    color: var(--su-text-muted);
}

.signup-field input[type="text"],
.signup-field input[type="email"],
.signup-field select {
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--su-border);
    background: var(--su-bg);
    color: var(--su-text);
    font-size: 0.95rem;
}

.signup-field input:focus,
.signup-field select:focus {
    outline: none;
    border-color: var(--su-accent);
    box-shadow: 0 0 0 3px var(--su-accent-soft);
}

.signup-field input.is-invalid,
.signup-field select.is-invalid {
    border-color: var(--su-danger);
}

.signup-help {
    margin: 0;
    font-size: 0.8rem;
    color: var(--su-text-muted);
}

/* --- Avatar --- */

.avatar-picker {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatar-preview {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--su-surface-2);
    border: 1px solid var(--su-border);
    font-size: 1.75rem;
    color: var(--su-text-muted);
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-picker-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.avatar-picker-actions .signup-help {
    flex-basis: 100%;
}

.avatar-clear {
    color: var(--su-danger);
    text-decoration: none;
}

/* --- Consent + submit --- */

.signup-trial {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 2rem 0 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--su-accent);
    border-radius: 14px;
    background: var(--su-accent-soft);
    font-size: 0.9rem;
    color: var(--su-text-dim);
}

.signup-trial strong {
    color: var(--su-text);
}

.signup-trial input {
    margin-top: 0.2rem;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--su-accent);
}

.signup-trial input:disabled + label {
    opacity: 0.6;
}

.signup-consent {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 2rem 0 1.25rem;
    font-size: 0.9rem;
    color: var(--su-text-dim);
}

.signup-consent input {
    margin-top: 0.2rem;
    width: 18px;
    height: 18px;
    accent-color: var(--su-accent);
}

.signup-error {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--su-danger);
    background: rgba(248, 81, 73, 0.12);
    color: #ffb1ab;
    font-size: 0.9rem;
}

.signup-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.9rem 2rem;
    border: none;
    border-radius: 10px;
    background: var(--su-accent);
    color: var(--su-accent-ink);
    font-size: 1.05rem;
    font-weight: 600;
}

.signup-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.signup-submit-note {
    margin: 0.85rem 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--su-text-muted);
}

.signup-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--su-accent-ink);
    border-radius: 50%;
    animation: su-spin 0.8s linear infinite;
}

@keyframes su-spin { to { transform: rotate(360deg); } }

/* --- Embedded payment on /choose-plan --- */

.checkout-panel[hidden] {
    display: none;
}

.checkout-heading {
    margin: 0 0 1rem;
    font-size: 1.25rem;
}

.checkout-summary {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--su-border);
    border-radius: 10px;
    background: var(--su-surface-2);
}

.checkout-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.checkout-summary > div[hidden] {
    display: none;
}

.checkout-summary dt {
    font-weight: 600;
    color: var(--su-text);
}

.checkout-summary dd {
    margin: 0;
    text-align: right;
    color: var(--su-text-dim);
}

.checkout-payment-element {
    min-height: 3rem;
    margin-bottom: 1.25rem;
}

.checkout-back {
    display: block;
    margin: 0.5rem auto 0;
    color: var(--su-text-dim);
}

/* --- Footer --- */

.signup-footer {
    padding: 1.5rem;
    text-align: center;
    border-top: 1px solid var(--su-border);
}

.signup-footer p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--su-text-muted);
}

.legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.25rem;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
}

.legal-links a,
.signup-consent a,
.legal-doc a {
    color: var(--su-accent);
}

/* --- Create account (/signup): form left, showcase right --- */

.join-layout {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: 4rem;
    align-items: center;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.join-panel h1 {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.join-lead {
    margin: 0 0 1rem;
    color: var(--su-text-dim);
}

.join-preview {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 1.75rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--su-accent);
    border-radius: 10px;
    background: var(--su-accent-soft);
    color: var(--su-text);
    font-size: 0.9rem;
}

.join-preview > .bi {
    color: var(--su-accent);
}

.join-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.join-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--su-border-strong);
    border-radius: 10px;
    background: var(--su-surface-2);
    color: var(--su-text);
    font-weight: 600;
}

.join-google:hover:not(:disabled) {
    border-color: var(--su-accent);
}

.join-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--su-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.join-divider::before,
.join-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--su-border);
}

.join-input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--su-border-strong);
    border-radius: 10px;
    background: var(--su-surface);
    color: var(--su-text);
    font-size: 1rem;
}

.join-input:focus {
    outline: 2px solid var(--su-accent);
    outline-offset: 1px;
}

.join-form .signup-consent {
    margin: 0.25rem 0 0;
}

.join-login {
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--su-border);
    color: var(--su-text-dim);
    text-align: center;
}

.join-login a {
    color: var(--su-accent);
    font-weight: 600;
}

.join-showcase {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.join-shot {
    width: 100%;
    border: 1px solid var(--su-border);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.join-highlights,
.join-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.join-highlights li {
    display: flex;
    gap: 0.75rem;
}

.join-highlights .bi {
    flex: none;
    color: var(--su-accent);
    font-size: 1.25rem;
}

.join-highlights strong {
    display: block;
    margin-bottom: 0.15rem;
}

.join-highlights span,
.join-quote-by {
    color: var(--su-text-muted);
    font-size: 0.88rem;
}

.join-quotes blockquote {
    margin: 0 0 0.35rem;
    font-style: italic;
    color: var(--su-text-dim);
}

@media (max-width: 900px) {
    .join-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2rem 1rem 3rem;
    }

    .join-panel {
        max-width: 30rem;
    }
}

/* --- Terms and refund policy --- */

.legal-doc {
    line-height: 1.6;
    color: var(--su-text-dim);
}

.legal-doc h1 {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
    color: var(--su-text);
}

.legal-doc h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 2rem 0 0.6rem;
    color: var(--su-text);
}

.legal-updated {
    margin: 0 0 2rem;
    font-size: 0.85rem;
    color: var(--su-text-muted);
}

.legal-notice {
    margin: 0 0 1.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--su-border);
    border-left: 3px solid var(--su-text-muted);
    border-radius: 8px;
}

.legal-notice p {
    margin: 0;
}

.legal-doc li + li {
    margin-top: 0.35rem;
}

.legal-table {
    width: 100%;
    margin: 0 0 1rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.legal-table th,
.legal-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--su-border);
    text-align: left;
}

.legal-table thead th {
    color: var(--su-text-muted);
    font-weight: 500;
}

.legal-table tbody th {
    color: var(--su-text);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .signup-topbar { padding: 0.85rem 1rem; }
    .signup-topbar-aside { display: none; }
    .signup-main { padding: 2rem 1rem 3rem; }
    .signup-intro h1 { font-size: 1.6rem; }
    .plan-card, .credential-card { padding: 1.25rem; }
}

/* Member sign-in panel: shown instead of the email and name inputs when members
   bring their own account. */
.signup-member .btn-primary {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.signup-member-switch {
    align-self: flex-start;
    padding: 0;
    color: var(--su-text-muted);
    font-size: 0.85rem;
}

.signup-member-switch:hover {
    color: var(--su-text-dim);
}

/* --- Account application (/open-account) --- */

.oa-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    counter-reset: oa-step;
}

.oa-progress li {
    counter-increment: oa-step;
    flex: 1 1 8rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--su-border-strong);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--su-text-muted);
}

.oa-progress li::before {
    content: counter(oa-step) ". ";
}

.oa-progress li[aria-current="step"] {
    border-color: var(--su-accent);
    color: var(--su-text);
    background: var(--su-accent-soft);
}

.oa-progress li.is-done {
    color: var(--su-text-dim);
}

.oa-group {
    margin: 0 0 1.75rem;
    padding: 0;
    border: 0;
}

.oa-group > legend {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--su-text);
}

.oa-question {
    margin: 0 0 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--su-border);
    border-radius: 10px;
    background: var(--su-surface);
}

.oa-question > legend {
    float: left;
    width: 100%;
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    color: var(--su-text-dim);
}

.oa-yesno {
    clear: both;
    display: flex;
    gap: 1.5rem;
}

.oa-yesno label,
.oa-signature-mode label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.oa-consent {
    margin: 1rem 0;
}

.oa-docs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oa-doc {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--su-border);
}

.oa-doc-title {
    flex: 1 1 16rem;
    color: var(--su-text);
}

.oa-doc-version {
    font-size: 0.8rem;
    color: var(--su-text-muted);
}

.oa-doc-links {
    display: inline-flex;
    gap: 1rem;
}

.oa-doc-links a,
.oa-consent a {
    color: var(--su-accent);
}

.oa-field {
    margin: 1.5rem 0 1rem;
}

.oa-signature {
    margin: 0;
    padding: 0;
    border: 0;
}

.oa-signature-mode {
    display: flex;
    gap: 1.5rem;
    margin: 0.5rem 0 0.75rem;
}

.oa-typed {
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 1.6rem;
}

.oa-canvas {
    display: block;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 600 / 180;
    border: 1px solid var(--su-border-strong);
    border-radius: 8px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

.oa-actions,
.oa-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.5rem;
}

.oa-actions .signup-submit {
    width: auto;
    flex: 1 1 auto;
}

.oa-telegram {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--su-border);
}

.oa-telegram h3 {
    font-size: 1.05rem;
}

.oa-status-action {
    margin-top: 0.75rem;
}

.oa-step h2:focus,
.oa-result:focus {
    outline: none;
}

.oa-result .btn-primary,
.oa-status-action.btn-primary {
    background: var(--su-accent);
    border-color: var(--su-accent);
    color: var(--su-accent-ink);
    font-weight: 600;
}

.oa-result .btn-primary:hover,
.oa-result .btn-primary:focus-visible,
.oa-status-action.btn-primary:hover {
    background: #ffd34a;
    border-color: #ffd34a;
    color: var(--su-accent-ink);
}

.oa-result .btn-outline-secondary,
.oa-actions .btn-outline-secondary {
    color: var(--su-text);
    border-color: var(--su-border-strong);
}

.oa-result .btn-outline-secondary:hover,
.oa-actions .btn-outline-secondary:hover {
    color: var(--su-text);
    background: var(--su-surface);
    border-color: var(--su-text-muted);
}

#oaCanvasClear,
#openAccountSignOut {
    color: var(--su-accent);
}
/* --- The free Private Preview card (plans page, while the application is on) --- */

.plan-grid-preview {
    grid-template-columns: 1fr;
    margin-bottom: 1rem;
}

.plan-card.plan-card-preview {
    cursor: default;
    border-color: var(--su-accent);
    background: linear-gradient(180deg, var(--su-accent-soft), var(--su-surface) 70%);
}

.plan-card.plan-card-preview:hover {
    transform: none;
}

.plan-free-badge {
    border-color: var(--su-accent);
    color: var(--su-accent);
}

.plan-preview-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.plan-preview-cta.btn-primary {
    background: var(--su-accent);
    border-color: var(--su-accent);
    color: var(--su-accent-ink);
    font-weight: 600;
}

.plan-preview-cta.btn-primary:hover,
.plan-preview-cta.btn-primary:focus-visible {
    background: #ffd34a;
    border-color: #ffd34a;
    color: var(--su-accent-ink);
}

.plan-preview-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--su-text-dim);
}