.signup-section { margin: 0 0 8px; padding: 0; border: 0; }
.signup-section + .signup-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.signup-section legend { margin-bottom: 12px; padding: 0; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.signup-slug { display: flex; align-items: stretch; }
.signup-slug .input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.signup-slug-domain {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: var(--accent);
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.signup-preview { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.signup-preview svg { flex: none; width: 14px; height: 14px; color: var(--muted); }
.signup-preview [data-slug-preview] { font-weight: 600; }

.signup-slug-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13px; }
.signup-slug-status:empty { display: none; }
.signup-slug-status.is-available { color: var(--chart-completed); }
.signup-slug-status.is-unavailable { color: var(--tone-danger); }

.signup-terms { align-items: flex-start; margin-top: 20px; line-height: 1.5; }
.signup-terms .auth-link { font-size: inherit; }

@media (max-width: 420px) {
    .signup-slug { flex-direction: column; }
    .signup-slug .input { border-radius: 8px 8px 0 0; }
    .signup-slug-domain { padding: 8px 12px; border-left: 1px solid var(--border); border-top: 0; border-radius: 0 0 8px 8px; }
}