:root {
    --signup-accent: #6945ed;
    --signup-blue: #347df3;
    --signup-ink: #181426;
    --signup-muted: #746e83;
    --signup-line: rgba(54, 43, 88, .13);
    --signup-panel: rgba(255, 255, 255, .9);
    --signup-field: rgba(255, 255, 255, .7);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --signup-ink: #f7f8f9;
    --signup-muted: #bec2c8;
    --signup-line: rgba(255, 255, 255, .15);
    --signup-panel: rgba(21, 23, 26, .97);
    --signup-field: rgba(255, 255, 255, .055);
}

.signup-shell {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    overflow: hidden;
    padding: 105px 0 20px;
    background:
        radial-gradient(circle at 12% 18%, rgba(132, 95, 255, .15), transparent 29%),
        radial-gradient(circle at 91% 76%, rgba(38, 143, 255, .12), transparent 31%),
        #f7f7fb;
}

html[data-theme="dark"] .signup-shell {
    background:
        radial-gradient(circle at 12% 18%, rgba(132, 95, 255, .07), transparent 30%),
        radial-gradient(circle at 91% 76%, rgba(38, 143, 255, .045), transparent 31%),
        #08090b;
}

.signup-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.signup-backdrop i { position: absolute; border: 1px solid rgba(104, 74, 218, .1); border-radius: 42%; animation: signup-float 12s ease-in-out infinite alternate; }
.signup-backdrop i:nth-child(1) { width: 300px; height: 300px; left: -155px; top: 17%; transform: rotate(18deg); }
.signup-backdrop i:nth-child(2) { width: 430px; height: 430px; right: -260px; top: 4%; animation-delay: -4s; transform: rotate(28deg); }
.signup-backdrop i:nth-child(3) { width: 160px; height: 160px; left: 41%; bottom: -100px; animation-delay: -7s; transform: rotate(45deg); }
@keyframes signup-float { to { transform: translate3d(0, -13px, 0) rotate(24deg); } }

.signup-layout {
    display: grid;
    grid-template-columns: minmax(235px, .58fr) minmax(760px, 1.75fr);
    gap: clamp(26px, 4vw, 60px);
    align-items: center;
    max-width: 1320px;
}

.signup-story { color: var(--signup-ink); animation: signup-enter .55s cubic-bezier(.2, .8, .2, 1) both; }
.signup-story__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(22px, 4vh, 40px); color: var(--signup-muted); font-size: 12px; font-weight: 750; transition: color .2s ease, transform .2s ease; }
.signup-story__back:hover { color: var(--signup-accent); transform: translateX(-3px); }
.signup-story__eyebrow { display: flex; align-items: center; gap: 9px; color: var(--signup-accent); font: 750 10px/1 system-ui; letter-spacing: .14em; }
.signup-story__eyebrow i { width: 23px; height: 1px; background: currentColor; }
.signup-story h1 { margin: 16px 0 14px; font: 760 clamp(35px, 3.5vw, 52px)/1 system-ui; letter-spacing: -.052em; }
.signup-story h1 span { color: transparent; background: linear-gradient(110deg, var(--signup-accent), var(--signup-blue)); background-clip: text; }
.signup-story > p { max-width: 390px; margin: 0; color: var(--signup-muted); font-size: 13px; line-height: 1.65; }

.signup-story__points { display: grid; gap: 10px; margin: clamp(22px, 3.5vh, 32px) 0; }
.signup-story__points span { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 11px; align-items: center; }
.signup-story__points i { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--signup-line); border-radius: 12px; color: var(--signup-accent); background: color-mix(in srgb, var(--signup-panel) 75%, transparent); box-shadow: 0 8px 20px rgba(46, 34, 82, .06); }
.signup-story__points b { align-self: end; font-size: 11px; }
.signup-story__points small { align-self: start; color: var(--signup-muted); font-size: 9px; line-height: 1.35; }
.signup-story__trust { display: flex; align-items: center; gap: 11px; max-width: 370px; padding: 12px 14px; border: 1px solid var(--signup-line); border-radius: 16px; background: color-mix(in srgb, var(--signup-panel) 52%, transparent); }
.signup-story__trust > i { color: var(--signup-accent); font-size: 16px; }
.signup-story__trust span { display: grid; }
.signup-story__trust b { font-size: 10px; }
.signup-story__trust small { color: var(--signup-muted); font-size: 8px; }

.signup-panel {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 28px;
    color: var(--signup-ink);
    background: var(--signup-panel);
    box-shadow: 0 32px 74px rgba(46, 34, 82, .14), 0 7px 22px rgba(46, 34, 82, .06), inset 0 1px rgba(255, 255, 255, .85);
    backdrop-filter: blur(28px) saturate(1.25);
    animation: signup-enter .58s .06s cubic-bezier(.2, .8, .2, 1) both;
}
html[data-theme="dark"] .signup-panel { border-color: rgba(255, 255, 255, .08); box-shadow: 0 38px 84px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .06); }
@keyframes signup-enter { from { opacity: 0; transform: translateY(14px) scale(.992); } }

.signup-panel__header { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 12px 22px; border-bottom: 1px solid var(--signup-line); }
.signup-panel__title { display: flex; align-items: center; gap: 11px; }
.signup-panel__title > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--signup-accent), var(--signup-blue)); box-shadow: 0 10px 22px rgba(95, 66, 221, .22); }
.signup-panel__title > div { display: grid; }
.signup-panel__title small { color: var(--signup-muted); font: 750 8px/1.5 system-ui; letter-spacing: .14em; }
.signup-panel__title strong { font-size: 14px; }
.signup-panel__secure { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid rgba(31, 154, 109, .2); border-radius: 99px; color: #17855f; background: rgba(31, 154, 109, .06); font-size: 9px; font-weight: 750; }

.signup-wizard { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 36px; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--signup-line); background: color-mix(in srgb, var(--signup-panel) 76%, transparent); }
.signup-wizard span { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--signup-muted); font-size: 8px; transition: color .22s ease; }
.signup-wizard span:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: calc(50% + 34px); width: calc(100% - 68px); height: 1px; background: var(--signup-line); transition: background .22s ease; }
.signup-wizard i { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid var(--signup-line); border-radius: 50%; background: var(--signup-field); font: 750 7px/1 system-ui; transition: color .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease; }
.signup-wizard b { font-weight: 720; }
.signup-wizard span.is-active { color: var(--signup-accent); }
.signup-wizard span.is-active i { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--signup-accent), var(--signup-blue)); box-shadow: 0 5px 12px rgba(95, 66, 221, .2); transform: scale(1.08); }
.signup-wizard span.is-complete { color: var(--signup-ink); }
.signup-wizard span.is-complete i { border-color: rgba(31, 154, 109, .28); color: #17855f; background: rgba(31, 154, 109, .08); }
.signup-wizard span.is-complete:not(:last-child)::after { background: rgba(31, 154, 109, .28); }

.signup-panel form { display: flex; min-height: 390px; flex-direction: column; }
.signup-plan-section, .signup-form-section { min-width: 0; margin: 0; border: 0; }
.signup-plan-section { padding: 0; }
.signup-plan-section legend, .signup-form-section legend { float: none; width: auto; margin: 0; color: var(--signup-ink); font-size: 17px; font-weight: 780; letter-spacing: -.02em; }
.signup-plan-section legend span, .signup-form-section legend span { margin-right: 6px; color: var(--signup-accent); font-size: 8px; letter-spacing: .08em; }
.signup-step-copy { margin: 6px 0 17px; color: var(--signup-muted); font-size: 10px; line-height: 1.5; }
.signup-wizard-pane { width: min(100%, 650px); margin: 0 auto; padding: 27px 24px 20px; animation: signup-pane-in .34s cubic-bezier(.2, .8, .2, 1) both; }
.signup-wizard-pane[hidden] { display: none !important; }
@keyframes signup-pane-in { from { opacity: 0; transform: translateX(12px); } }
.signup-plan-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 15px; }
.signup-plan { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; min-height: 52px; padding: 8px 12px; cursor: pointer; border: 1px solid var(--signup-line); border-radius: 13px; background: var(--signup-field); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.signup-plan:hover { transform: translateY(-2px); border-color: rgba(111, 75, 243, .34); }
.signup-plan.is-selected { border-color: rgba(111, 75, 243, .55); background: rgba(111, 75, 243, .065); box-shadow: 0 8px 18px rgba(75, 52, 166, .09); }
.signup-plan input { position: absolute; opacity: 0; }
.signup-plan span { display: grid; min-width: 0; }
.signup-plan b { font-size: 11px; }
.signup-plan small { overflow: hidden; color: var(--signup-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.signup-plan strong { padding-right: 19px; font-size: 13px; }
.signup-plan > i { position: absolute; top: 8px; right: 8px; color: var(--signup-accent); font-size: 10px; opacity: 0; transform: scale(.7); transition: opacity .2s ease, transform .2s ease; }
.signup-plan.is-selected > i { opacity: 1; transform: scale(1); }

.signup-form-grid { display: block; flex: 1; }
.signup-form-section { padding: 27px 24px 20px; }

.signup-label { display: block; margin: 10px 0 5px; color: var(--signup-ink); font-size: 9px; font-weight: 750; }
.signup-address-field, .signup-input { display: flex; align-items: center; min-height: 42px; border: 1px solid var(--signup-line); border-radius: 12px; background: var(--signup-field); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.signup-address-composer { display: grid; gap: 8px; }
.signup-address-composer.has-domain-choice { grid-template-columns: minmax(0, 1fr) minmax(165px, .58fr); }
.signup-domain-choice { min-width: 0; position: relative; }
.signup-domain-choice > i { position: absolute; z-index: 4; top: 50%; left: 13px; color: var(--signup-accent); font-size: 11px; transform: translateY(-50%); pointer-events: none; }
.signup-domain-choice .choices { height: 42px; margin: 0; }
.signup-domain-choice .choices__inner { min-height: 42px; padding: 5px 32px 5px 34px; display: flex; align-items: center; border: 1px solid var(--signup-line); border-radius: 12px; background: var(--signup-field); color: var(--signup-ink); font-size: 10px; }
.signup-domain-choice .is-focused .choices__inner, .signup-domain-choice .is-open .choices__inner { border-color: rgba(111, 75, 243, .58); box-shadow: 0 0 0 3px rgba(111, 75, 243, .09); }
.signup-domain-choice .choices[data-type*=select-one]::after { right: 14px; border-color: var(--signup-muted) transparent transparent; }
.signup-domain-choice .choices[data-type*=select-one].is-open::after { border-color: transparent transparent var(--signup-muted); }
.signup-domain-choice .choices__list--single { padding: 0; }
.signup-domain-choice .choices__list--dropdown { z-index: 12; margin-top: 5px; overflow: hidden; border: 1px solid var(--signup-line); border-radius: 12px; background: var(--signup-panel); box-shadow: 0 16px 35px rgba(20, 18, 40, .16); }
.signup-domain-choice .choices__list--dropdown .choices__item { padding: 10px 12px; color: var(--signup-ink); font-size: 10px; }
.signup-domain-choice .choices__list--dropdown .is-highlighted { background: rgba(111, 75, 243, .09); }
.signup-address-field:focus-within, .signup-input:focus-within { border-color: rgba(111, 75, 243, .58); box-shadow: 0 0 0 3px rgba(111, 75, 243, .09); transform: translateY(-1px); }
.signup-address-field > i, .signup-input > i { width: 35px; color: var(--signup-muted); font-size: 11px; text-align: center; }
.signup-address-field input, .signup-input input { min-width: 0; flex: 1; padding: 0 2px; border: 0; outline: 0; background: transparent; color: var(--signup-ink); font-size: 11px; }
.signup-select select { min-width: 0; flex: 1; align-self: stretch; padding: 0 2px; border: 0; outline: 0; appearance: none; background: transparent; color: var(--signup-ink); font-size: 11px; cursor: pointer; }
.signup-select select:invalid { color: var(--signup-muted); }
.signup-select > i:last-child { width: 32px; color: var(--signup-muted); font-size: 8px; pointer-events: none; }
.signup-select option { color: var(--signup-ink); background: var(--signup-panel); }
.signup-address-field > span { max-width: 118px; overflow: hidden; padding-right: 9px; color: var(--signup-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.signup-address-field > em { display: none; margin-right: 9px; font-size: 10px; font-style: normal; }
.signup-address-field.is-valid > em, .signup-address-field.is-invalid > em, .signup-address-field.is-checking > em { display: block; }
.signup-address-field.is-valid > em::before { content: "\f058"; color: #159a6a; font-family: "Font Awesome 7 Free"; font-weight: 900; }
.signup-address-field.is-invalid > em::before { content: "\f057"; color: #d54a65; font-family: "Font Awesome 7 Free"; font-weight: 900; }
.signup-address-field.is-checking > em::before { content: "\f110"; color: var(--signup-accent); font-family: "Font Awesome 7 Free"; font-weight: 900; animation: fa-spin 1s linear infinite; }
.signup-input button { width: 38px; align-self: stretch; border: 0; background: transparent; color: var(--signup-muted); }

.signup-grid--two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field-error { min-height: 11px; margin: 3px 2px 0; color: #cc3f5b; font-size: 8px; font-weight: 650; line-height: 1.2; }
.signup-hint { display: block; margin: 8px 2px 0; color: var(--signup-muted); font-size: 8px; line-height: 1.4; }
.signup-hint i { margin-right: 4px; color: var(--signup-accent); }

.signup-consent { display: flex; align-items: center; gap: 8px; margin-top: 6px; cursor: pointer; }
.signup-consent input { position: absolute; opacity: 0; }
.signup-consent > span { display: grid; place-items: center; flex: 0 0 19px; height: 19px; border: 1px solid var(--signup-line); border-radius: 6px; background: var(--signup-field); transition: background .2s ease, transform .2s ease; }
.signup-consent > span i { color: #fff; font-size: 8px; opacity: 0; transform: scale(.5); transition: opacity .18s ease, transform .18s ease; }
.signup-consent input:checked + span { border-color: transparent; background: var(--signup-accent); transform: scale(1.04); }
.signup-consent input:checked + span i { opacity: 1; transform: scale(1); }
.signup-consent input:focus-visible + span { outline: 3px solid rgba(111, 75, 243, .26); outline-offset: 2px; }
.signup-consent b { font-size: 9px; line-height: 1.35; }
.signup-consent--legal { margin-top: 2px; }
.signup-consent--legal b { color: var(--signup-muted); font-size: 8px; }
.signup-consent--legal a { color: var(--signup-accent); font-weight: 780; text-decoration: underline; text-decoration-color: rgba(111, 75, 243, .28); text-underline-offset: 2px; }
.signup-consent--legal a:hover { text-decoration-color: currentColor; }
.signup-final-consents { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--signup-line); }
.signup-final-consents .signup-consent { margin-top: 4px; }

.signup-phone .iti { width: 100%; }
.signup-phone .iti__tel-input { width: 100%; height: 42px; padding-left: 52px !important; border: 1px solid var(--signup-line); border-radius: 12px; outline: 0; background: var(--signup-field); color: var(--signup-ink); font-size: 11px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.signup-phone .iti__tel-input:focus { border-color: rgba(111, 75, 243, .58); box-shadow: 0 0 0 3px rgba(111, 75, 243, .09); transform: translateY(-1px); }
.signup-phone .iti__country-container { padding-left: 2px; }
.signup-phone .iti__selected-country { padding: 0 6px; border-radius: 9px; }
.signup-phone .iti__arrow { display: none; }

.password-meter { position: relative; display: flex; align-items: center; gap: 7px; margin: 6px 2px 0; }
.password-meter::before { content: ""; width: 58px; height: 3px; border-radius: 9px; background: var(--signup-line); }
.password-meter i { position: absolute; left: 0; width: 0; max-width: 58px; height: 3px; border-radius: 9px; background: #d34e62; transition: width .22s ease, background .22s ease; }
.password-meter span { color: var(--signup-muted); font-size: 7px; }

.signup-actions { display: flex; min-height: 65px; align-items: center; justify-content: flex-end; gap: 9px; margin-top: auto; padding: 10px 20px 13px; border-top: 1px solid var(--signup-line); }
.signup-step-label { margin-right: auto; color: var(--signup-muted); font-size: 8px; font-weight: 720; }
.signup-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; font-size: 10px; font-weight: 780; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.signup-button--back { min-width: 86px; padding: 0 14px; color: var(--signup-muted); background: rgba(92, 75, 135, .08); }
.signup-button--next, .signup-button--submit { min-width: 190px; padding: 0 18px; color: #fff; background: linear-gradient(110deg, var(--signup-accent), var(--signup-blue)); box-shadow: 0 12px 24px rgba(88, 63, 206, .21); }
.signup-button--next:hover, .signup-button--submit:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(88, 63, 206, .26); }
.signup-button:disabled { cursor: wait; opacity: .65; transform: none; }
.signup-unavailable { display: grid; min-height: 430px; place-items: center; align-content: center; padding: 50px 25px; text-align: center; }
.signup-unavailable i { color: var(--signup-accent); font-size: 28px; }
.signup-unavailable h2 { margin: 15px 0 4px; }
.signup-unavailable p { color: var(--signup-muted); }

@media (min-width: 1021px) and (min-height: 700px) {
    .signup-shell { height: 100svh; }
    .signup-layout { height: 100%; }
}

@media (max-width: 1120px) {
    .signup-layout { grid-template-columns: 220px minmax(700px, 1fr); gap: 24px; }
    .signup-story h1 { font-size: 36px; }
    .signup-wizard-pane { padding-inline: 20px; }
}

@media (max-width: 1020px) {
    .signup-shell { overflow: visible; padding-bottom: 36px; }
    .signup-layout { grid-template-columns: 1fr; max-width: 820px; }
    .signup-story { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 30px; }
    .signup-story__back { grid-column: 1 / -1; margin-bottom: 8px; }
    .signup-story__eyebrow, .signup-story h1, .signup-story > p { grid-column: 1; }
    .signup-story h1 { margin-block: 8px; }
    .signup-story__points { grid-column: 2; grid-row: 2 / 5; margin: 0; }
    .signup-story__trust { display: none; }
}

@media (max-width: 720px) {
    .signup-address-composer.has-domain-choice { grid-template-columns: 1fr; }
    .signup-shell { padding: 88px 0 28px; }
    .signup-story { display: block; }
    .signup-story__back { margin-bottom: 18px; }
    .signup-story__points { display: none; }
    .signup-story h1 { font-size: 34px; }
    .signup-panel { border-radius: 22px; }
    .signup-plan-picker { grid-template-columns: 1fr; }
    .signup-plan { min-height: 48px; }
    .signup-actions { align-items: stretch; flex-wrap: wrap; gap: 8px; }
    .signup-step-label { order: -1; width: 100%; margin: 0; text-align: center; }
    .signup-button--back, .signup-button--next, .signup-button--submit { flex: 1; min-width: 120px; }
}

@media (max-width: 430px) {
    .signup-layout { width: min(100% - 24px, 1320px); }
    .signup-story > p { font-size: 12px; }
    .signup-panel__header { padding-inline: 15px; }
    .signup-wizard { padding-inline: 10px; }
    .signup-wizard b { display: none; }
    .signup-wizard span:not(:last-child)::after { left: calc(50% + 16px); width: calc(100% - 32px); }
    .signup-panel__secure { display: none; }
    .signup-wizard-pane { padding-inline: 14px; }
    .signup-grid--two { grid-template-columns: 1fr; gap: 0; }
    .signup-address-field > span { max-width: 102px; }
}

@media (prefers-reduced-motion: reduce) {
    .signup-backdrop i, .signup-story, .signup-panel, .signup-wizard-pane { animation: none !important; }
    .signup-address-field, .signup-input, .signup-plan, .signup-button { transition-duration: .01ms !important; }
}