/* Signup screens share the existing onboarding tokens and form components. */
.signup-page [hidden] { display: none !important; }
.signup-page .back-icon { width: 36px; height: 36px; }
.signup-page .setup-option__copy { display: flex; flex-direction: column; }
.signup-logo { display: block; position: relative; width: 112px; height: 28px; flex: 0 0 auto; }
.signup-logo span { position: absolute; }
.signup-logo__card { left: 0; top: 0; }
.signup-logo__score { left: 38px; top: 8px; }
.signup-logo__id { left: 91px; top: 8px; }
.signup-logo img { max-width: none; }
.signup-logo--welcome { width: 128px; height: 32px; }
.signup-logo--welcome .signup-logo__score { left: 43.43px; top: 9.14px; }
.signup-logo--welcome .signup-logo__id { left: 104px; top: 9.14px; }
.signup-page .onboarding-main { padding: 24px 24px 48px; }
.signup-page .onboarding-flow { width: 600px; }
.signup-page .onboarding-header { width: 100%; }
.signup-page .onboarding-flow:has(.signup-steps--1) .onboarding-header { width: 500px; max-width: 100%; }
.signup-steps { width: 100%; margin-top: 40px; }
.signup-steps .step-content { width: 100%; }
.signup-steps--1 .step--active .step-content { width: 344px; max-width: 100%; }
.signup-steps--2 .step--active .step-content { width: 488px; max-width: 100%; }
.signup-steps .step--active { padding-bottom: 12px; }
.signup-steps .step--active .step-content { padding-top: 8px; }
.signup-steps .step--done { align-items: center; min-height: 56px; }
.signup-steps .step--done .step-number, .signup-steps .step--done .step-title { color: var(--primary); }
.signup-tail { position: relative; display: block; width: 1px; flex: 1; min-height: 0; }
.signup-tail img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: top left; transform: rotate(90deg); }
.signup-tail--personal { min-height: 554px; }
.signup-tail--verification { min-height: 177px; }
.signup-tail--preferences { min-height: 253px; }
.signup-page .verification-card { margin-top: 32px; }
.signup-page .verification-fields { gap: 16px; }
.signup-page .field-box { height: 68px; padding: 8px 12px; }
.signup-page .field-control { height: 38px; margin-top: 0; }
.signup-page .field-message { display: block; font-weight: 600; }
.signup-page .signup-email-message { padding: 8px 6px; margin: 0; }
.signup-page .password-rules { padding-left: 20px; margin: 8px 0 0; }
.signup-page .document-terms { padding-top: 12px; gap: 16px; }
.signup-page .document-term { font-weight: 400; line-height: 16px; }
.signup-page .document-term input { appearance: none; border: 0; border-radius: 4px; background: #ecf0f1; cursor: pointer; }
.signup-page .document-term input:checked { background: var(--primary) url('/images/onboarding/checkbox-check.svg') center no-repeat; }
.signup-page .document-term input:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.signup-page .document-term label { cursor: pointer; }
.signup-page .document-term button { font-weight: 700; text-decoration: none; }
.signup-page .form-actions { margin-top: 24px; }
.signup-page .form-actions .primary-button { min-width: 0; padding: 0 24px; }
.signup-page .signup-password-toggle { right: 0; width: 24px; height: 24px; padding: 0; }
.signup-page .signup-password-toggle img { width: 24px; height: 24px; }
.email-check { width: 16px; height: 16px; border-radius: 4px; background: var(--success); }
.text-link { padding: 0; border: 0; color: var(--primary); background: transparent; cursor: pointer; font: inherit; font-weight: 700; }
.text-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.signup-page:not(.welcome-page) .remote-language-select { width: auto; }
.signup-page:not(.welcome-page) .remote-language-select__trigger { min-width: 0; min-height: 32px; height: 32px; border: 0; background: transparent; padding: 0; gap: 8px; font-weight: 600; }
.signup-page:not(.welcome-page) .remote-language-select__chevron { width: 20px; height: 20px; border: 0; margin: 0; background: url('/images/onboarding/chevron-down.svg') center no-repeat; transform: none; }
.signup-page:not(.welcome-page) .remote-language-select--open .remote-language-select__chevron { transform: rotate(180deg); }
.signup-page:not(.welcome-page) .remote-language-select__menu { min-width: 156px; }
.consent-load-status, .signup-status { color: var(--text-muted); font-size: 12px; line-height: 18px; margin: 12px 0 0; }
.signup-full-button { width: 100%; }
.signup-page .signup-otp-form, .signup-page .signup-preferences { margin-top: 32px; }
.signup-otp-form .signup-full-button { margin-top: 20px; }
.signup-otp-input { position: relative; width: 180px; min-width: 0; }
.signup-otp-input .field-input { position: relative; z-index: 1; letter-spacing: 12px; font-size: 16px; height: 24px; }
.signup-otp-placeholder { position: absolute; left: 14px; top: 4px; pointer-events: none; }
.signup-otp-input:has(input:not(:placeholder-shown)) .signup-otp-placeholder { display: none; }
.signup-page .signup-otp-control { justify-content: space-between; gap: 8px; }
.signup-otp-timer { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text); }
.signup-otp-timer img { max-width: none; }
.signup-resend, .signup-login { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; font-weight: 600; margin: 12px 0 0; }
.signup-resend { flex-wrap: wrap; }
.signup-resend button:disabled { color: var(--text-muted); cursor: default; }
.signup-otp-budget { margin: 8px 0 0; color: var(--text-muted); font-size: 12px; line-height: 18px; text-align: center; }
.signup-preferences__choices { display: flex; flex-direction: column; gap: 24px; font-size: 12px; line-height: 16px; }
.signup-preferences__choices p { margin: 0 0 8px; }
.signup-channels { display: flex; gap: 40px; }
.signup-preferences .signup-full-button { margin-top: 24px; }
.signup-page .modal-overlay { background: rgba(8, 8, 8, .4); }
.signup-page .onboarding-error-modal { width: 490px; }
.signup-page .onboarding-error-modal__body { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 20px 12px; text-align: center; }
.signup-page .onboarding-error-modal__icon { width: 36px; height: 36px; color: white; background: #de0000; font-size: 24px; font-weight: 500; }
.signup-page .onboarding-error-modal h2 { font-size: 14px; font-weight: 600; line-height: 22px; margin: 0 0 4px; }
.signup-page .onboarding-error-modal p { font-weight: 500; line-height: 16px; }
.signup-page .onboarding-error-modal__footer { display: flex; justify-content: center; padding: 0 20px 20px; }
.signup-page .onboarding-error-modal__footer .primary-button { min-width: 0; padding: 0 24px; }
.signup-page [data-document-modal] {
    inset: auto;
    top: var(--document-viewport-top, 0px);
    left: var(--document-viewport-left, 0px);
    width: 100%;
    width: var(--document-viewport-width, 100%);
    height: 100vh;
    height: 100dvh;
    height: var(--document-viewport-height, 100dvh);
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    overflow: hidden;
}
.signup-page .document-modal {
    width: 720px;
    max-width: 100%;
    height: min(760px, 100%);
    max-height: 100%;
    min-width: 0;
    min-height: 0;
}
.signup-page .document-modal__header,
.signup-page .document-modal__footer { flex: 0 0 auto; }
.signup-page .document-modal__header h2 { min-width: 0; overflow-wrap: anywhere; }
.signup-page .document-modal__close { flex-basis: 44px; width: 44px; height: 44px; }
.signup-page .document-modal__close::before,
.signup-page .document-modal__close::after { left: 15px; top: 21px; }
.signup-page .document-modal__footer { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.signup-page .document-modal__footer .text-link { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
.signup-page .document-modal__footer .primary-button { margin-left: auto; min-height: 44px; flex: 0 0 auto; }
.signup-document-body {
    min-height: 0;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    overflow-wrap: anywhere;
}
.signup-document-body iframe { height: 500px; max-width: 100%; margin: 0; }
.signup-page.body--modal-open { position: fixed; top: var(--signup-scroll-top, 0px); left: 0; width: 100%; }
.document-copy { white-space: pre-wrap; line-height: 1.6; }
.document-version { color: var(--text-muted); font-size: 12px; }
.welcome-shell { display: flex; min-height: 100vh; }
.welcome-story { position: relative; flex: 0 0 42.89%; min-height: 832px; background: #f7f7f7; overflow: hidden; }
.welcome-art { position: absolute; inset: 0; overflow: hidden; }
.welcome-art > img { position: absolute; width: 141.54%; height: 93.4%; left: -20.71%; top: -15.36%; max-width: none; object-fit: cover; }
.welcome-art__gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0) 33.53%, #f7f7f7 69.427%); }
.welcome-story__copy { position: absolute; top: 71.75%; left: 50%; transform: translateX(-50%); width: 400px; max-width: calc(100% - 48px); text-align: center; }
.welcome-story h1 { margin: 0; font-size: 32px; font-weight: 600; line-height: 40px; white-space: nowrap; }
html:not([lang="en"]) .welcome-story h1 { white-space: normal; overflow-wrap: anywhere; }
.welcome-story p { font: 400 16px/1.4 Arial, sans-serif; margin: 11px 0 0; }
.welcome-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 24px 48px 76px; min-width: 0; }
.welcome-form { width: 455px; max-width: 100%; display: flex; flex-direction: column; gap: 36px; }
.welcome-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.welcome-form h2 { margin: 0; padding: 8px 0; font: 400 32px/40px Arial, sans-serif; }
.welcome-form .verification-card { margin-top: 16px; }
.welcome-form .form-actions { margin-top: 16px; }
.welcome-form .primary-button { width: 100%; }
.welcome-form .signup-login { margin-top: 16px; }
@media (max-width: 1100px) {
    .welcome-story h1 { font-size: 26px; white-space: normal; line-height: 34px; }
    .welcome-main { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 820px) {
    .signup-page .onboarding-flow, .signup-page .onboarding-header { width: 100%; }
    .signup-steps--1 .step--active .step-content, .signup-steps--2 .step--active .step-content { width: 100%; }
    .signup-tail--personal { min-height: 0; }
    .welcome-shell { flex-direction: column; }
    .welcome-story { flex: none; min-height: 360px; }
    .welcome-art > img { width: 100%; height: auto; left: 0; top: -45%; }
    .welcome-art__gradient { background: linear-gradient(to bottom, transparent 10%, #f7f7f7 85%); }
    .welcome-story__copy { top: auto; bottom: 24px; }
    .welcome-main { padding: 32px 24px 48px; }
}
@media (max-width: 520px) {
    .signup-page [data-document-modal] {
        padding: 8px;
        padding-top: max(8px, env(safe-area-inset-top, 0px));
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
        padding-left: max(8px, env(safe-area-inset-left, 0px));
        padding-right: max(8px, env(safe-area-inset-right, 0px));
    }
    .signup-page .document-modal__header { padding: 8px 12px; }
    .signup-page .document-modal__footer { padding: 8px 12px; gap: 8px; }
    .signup-document-body { padding: 12px; }
    .signup-page .onboarding-main { padding: 24px 16px 40px; }
    .signup-steps { margin-top: 28px; }
    .signup-steps .step { column-gap: 14px; }
    .signup-tail--verification, .signup-tail--preferences { min-height: 0; }
    .signup-otp-input { width: 150px; }
    .signup-otp-input .field-input { letter-spacing: 8px; }
    .welcome-story { min-height: 300px; }
    .welcome-story h1 { font-size: 24px; line-height: 32px; }
    .welcome-story p { font-size: 14px; }
    .welcome-form h2 { font-size: 28px; }
}
@media (max-width: 360px) {
    .welcome-main { padding-inline: 16px; }
}