/* Login workspace — isolated auth presentation */
.lgx-page {
    --lgx-ink: #1d1947;
    --lgx-muted: #716d87;
    --lgx-line: rgba(41, 32, 91, .13);
    --lgx-panel: rgba(255, 255, 255, .76);
    position: relative;
    isolation: isolate;
    min-height: calc(100svh - 118px);
    overflow: hidden;
    padding: 2.5rem 0 4rem;
    color: var(--lgx-ink)
}

.lgx-ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: transparent
}

.lgx-grid,
.lgx-orb {
    display: none
}

.lgx-orb-one {
    width: 560px;
    height: 560px;
    top: -300px;
    left: -160px;
    background: radial-gradient(circle, rgba(115, 81, 255, .28), transparent 68%)
}

.lgx-orb-two {
    width: 440px;
    height: 440px;
    right: -180px;
    bottom: -160px;
    background: radial-gradient(circle, rgba(37, 199, 213, .18), transparent 68%);
    animation-delay: -6s
}

.lgx-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, .8fr);
    align-items: stretch;
    max-width: 1120px;
    min-height: 680px;
    gap: 1rem;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none
}

.lgx-story {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 680px;
    padding: clamp(2rem, 5vw, 4.2rem);
    overflow: hidden;
    border: 1px solid rgba(150, 176, 255, .25);
    border-radius: 32px;
    color: #f7f9ff;
    background: linear-gradient(145deg, #101a45 0%, #1b3472 53%, #285bb0 100%);
    box-shadow: 0 28px 70px rgba(18, 37, 92, .28), inset 0 1px rgba(255, 255, 255, .16)
}

.lgx-story:before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .52;
    background-image: linear-gradient(rgba(183, 211, 255, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(183, 211, 255, .075) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, .68) 55%, transparent 88%)
}

.lgx-story:after {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    right: -220px;
    top: -150px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(255, 255, 255, .025), 0 0 0 110px rgba(255, 255, 255, .02)
}

.lgx-story>* {
    position: relative;
    z-index: 1
}

.lgx-story-glow {
    position: absolute !important;
    z-index: 0 !important;
    width: 330px;
    height: 330px;
    right: -90px;
    bottom: -130px;
    border-radius: 50%;
    background: rgba(41, 211, 212, .25);
    filter: blur(55px)
}

.lgx-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    width: max-content;
    padding: .42rem .7rem .42rem .42rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    color: #fff;
    background: rgba(7, 18, 57, .18);
    text-decoration: none;
    backdrop-filter: blur(8px)
}

.lgx-brand img,
.lgx-brand>span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    object-fit: contain;
    border-radius: 11px;
    background: rgba(255, 255, 255, .9);
    color: #241c61;
    font-weight: 900
}

.lgx-brand strong {
    font-size: 1.12rem;
    letter-spacing: -.03em
}

.lgx-story-copy {
    max-width: 570px;
    margin: auto 0;
    transform: translateY(-14px)
}

.lgx-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1.15rem;
    padding: .45rem .68rem;
    border: 1px solid rgba(125, 231, 225, .22);
    border-radius: 999px;
    color: #a9edff;
    background: rgba(7, 27, 66, .23);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase
}

.lgx-story h1 {
    margin: 0 0 1.1rem;
    color: #f8fbff;
    font-size: clamp(2.7rem, 5vw, 4.7rem);
    line-height: .98;
    letter-spacing: -.055em;
    text-shadow: 0 8px 28px rgba(5, 18, 55, .24)
}

.lgx-story h1 em {
    color: #7de7e1;
    font-style: normal
}

.lgx-story-copy p {
    max-width: 480px;
    margin: 0;
    color: rgba(239, 246, 255, .72);
    font-size: .96rem;
    line-height: 1.75
}

.lgx-preview {
    width: min(100%, 480px);
    margin: 2rem 0 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(15, 12, 48, .26);
    box-shadow: 0 20px 45px rgba(10, 6, 42, .18);
    transform: rotate(-2deg);
    animation: lgxLift .75s .25s both
}

.lgx-preview-head {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    color: rgba(255, 255, 255, .48);
    font-size: .51rem;
    letter-spacing: .13em
}

.lgx-preview-head i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff6f83
}

.lgx-preview-head i:nth-child(2) {
    background: #ffc34f
}

.lgx-preview-head i:nth-child(3) {
    background: #42dda0
}

.lgx-preview-head span {
    margin-left: auto
}

.lgx-preview-body {
    padding: 1rem
}

.lgx-profile-sim {
    display: flex;
    align-items: center;
    gap: .65rem
}

.lgx-profile-sim>span {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #45d7d5, #7462ff);
    font-size: .65rem;
    font-weight: 900
}

.lgx-profile-sim b,
.lgx-profile-sim small {
    display: block
}

.lgx-profile-sim b {
    font-size: .76rem
}

.lgx-profile-sim small {
    margin-top: .15rem;
    color: rgba(255, 255, 255, .48);
    font-size: .58rem
}

.lgx-profile-sim em {
    margin-left: auto;
    padding: .3rem .45rem;
    border-radius: 6px;
    color: #8dffca;
    background: rgba(72, 230, 160, .12);
    font-size: .5rem;
    font-style: normal;
    font-weight: 850
}

.lgx-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: 1rem
}

.lgx-mini-grid span {
    padding: .55rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06)
}

.lgx-mini-grid b,
.lgx-mini-grid small {
    display: block
}

.lgx-mini-grid b {
    font-size: .95rem
}

.lgx-mini-grid small {
    margin-top: .2rem;
    color: rgba(255, 255, 255, .45);
    font-size: .55rem
}

.lgx-wave {
    display: flex;
    align-items: end;
    gap: 5px;
    height: 35px;
    margin-top: 1rem
}

.lgx-wave i {
    flex: 1;
    height: 45%;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(#78f4df, #7662f7);
    opacity: .75
}

.lgx-wave i:nth-child(2) {
    height: 72%
}

.lgx-wave i:nth-child(3) {
    height: 55%
}

.lgx-wave i:nth-child(4) {
    height: 90%
}

.lgx-wave i:nth-child(5) {
    height: 65%
}

.lgx-wave i:nth-child(6) {
    height: 80%
}

.lgx-wave i:nth-child(7) {
    height: 100%
}

.lgx-story-foot {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    color: rgba(235, 244, 255, .72);
    font-size: .62rem;
    font-weight: 750
}

.lgx-story-foot span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .55rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(7, 19, 58, .17)
}

.lgx-auth {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 32px;
    padding: 1.5rem clamp(1.5rem, 4vw, 3.4rem);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 24px 60px rgba(38, 28, 102, .12), inset 0 1px rgba(255, 255, 255, .9);
    backdrop-filter: blur(18px)
}

.lgx-auth-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .35rem;
    color: var(--lgx-muted);
    font-size: .7rem
}

.lgx-auth-top a,
.lgx-label-row a,
.lgx-mobile-alt a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #7358ef;
    font-weight: 800;
    text-decoration: none
}

.lgx-form-wrap {
    width: min(100%, 390px);
    margin: auto
}

.lgx-form-head {
    text-align: center;
    margin-bottom: 1.6rem
}

.lgx-mobile-mark {
    display: none
}

.lgx-form-head>small {
    color: #7358ef;
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .15em
}

.lgx-form-head h2 {
    margin: .55rem 0 .35rem;
    font-size: 2.25rem;
    letter-spacing: -.06em
}

.lgx-form-head p {
    margin: 0;
    color: var(--lgx-muted);
    font-size: .84rem
}

.lgx-error {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1rem;
    padding: .8rem;
    border: 1px solid rgba(221, 67, 104, .22);
    border-radius: 13px;
    color: #bd3157;
    background: rgba(221, 67, 104, .07);
    font-size: .7rem
}

.lgx-error strong,
.lgx-error span {
    display: block
}

.lgx-error strong {
    margin-bottom: .18rem;
    font-size: .73rem
}

.lgx-error span {
    line-height: 1.45
}

.lgx-form {
    display: grid;
    gap: 1.05rem
}

.lgx-field label,
.lgx-label-row label {
    display: block;
    margin-bottom: .45rem;
    color: var(--lgx-ink);
    font-size: .72rem;
    font-weight: 850
}

.lgx-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.lgx-label-row a {
    font-size: .67rem
}

.lgx-input-wrap {
    position: relative
}

.lgx-input-wrap>svg {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: .9rem;
    color: #8b84a9;
    transform: translateY(-50%);
    pointer-events: none
}

.lgx-input-wrap input {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 0 2.8rem 0 2.75rem;
    border: 1px solid var(--lgx-line);
    border-radius: 14px;
    outline: 0;
    color: var(--lgx-ink);
    background: rgba(246, 245, 255, .85);
    font: inherit;
    font-size: .78rem;
    transition: .2s
}

.lgx-input-wrap input:focus {
    border-color: #8064ff;
    box-shadow: 0 0 0 4px rgba(128, 100, 255, .12);
    background: #fff
}

.lgx-input-wrap input::placeholder {
    color: #9d99ad
}

.lgx-password-toggle {
    position: absolute;
    top: 50%;
    right: .7rem;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: #817aa1;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer
}

.lgx-password-toggle:hover {
    color: #7358ef;
    background: rgba(115, 88, 239, .08)
}

.lgx-quiz {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: .7rem;
    padding: .8rem;
    border: 1px solid rgba(115, 88, 239, .18);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(125, 98, 255, .08), rgba(47, 205, 201, .06))
}

.lgx-quiz-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: #7358ef;
    background: rgba(115, 88, 239, .12)
}

.lgx-quiz-copy small,
.lgx-quiz-copy strong,
.lgx-quiz-copy span {
    display: block
}

.lgx-quiz-copy small {
    color: #7358ef;
    font-size: .57rem;
    font-weight: 900;
    letter-spacing: .1em
}

.lgx-quiz-copy strong {
    margin: .17rem 0;
    color: var(--lgx-ink);
    font-size: .7rem
}

.lgx-quiz-copy span {
    color: var(--lgx-muted);
    font-size: .58rem;
    line-height: 1.35
}

.lgx-equation {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: -.1rem;
    color: var(--lgx-ink);
    font-size: .83rem;
    font-weight: 900
}

.lgx-equation input {
    width: 86px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 .55rem;
    border: 1px solid var(--lgx-line);
    border-radius: 9px;
    outline: 0;
    color: var(--lgx-ink);
    background: rgba(255, 255, 255, .84);
    font: inherit;
    font-size: .74rem
}

.lgx-equation input:focus {
    border-color: #8064ff;
    box-shadow: 0 0 0 3px rgba(128, 100, 255, .12)
}

.lgx-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    height: 56px;
    margin-top: .15rem;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #6751e8, #a24ff0);
    box-shadow: 0 15px 28px rgba(113, 81, 232, .27);
    font: inherit;
    font-size: .82rem;
    font-weight: 850;
    cursor: pointer;
    transition: .2s
}

.lgx-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 19px 34px rgba(113, 81, 232, .35)
}

.lgx-submit svg {
    transition: transform .2s
}

.lgx-submit:hover svg {
    transform: translateX(3px)
}

.lgx-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: 1.25rem;
    color: #9590a5;
    font-size: .59rem
}

.lgx-trust span {
    display: inline-flex;
    align-items: center;
    gap: .3rem
}

.lgx-trust i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #b9b3c8
}

.lgx-mobile-alt {
    display: none;
    text-align: center;
    color: var(--lgx-muted);
    font-size: .72rem
}

body:has(.lgx-page) .site-footer .footer-reveal-head {
    display: none
}

body:has(.lgx-page) .site-footer {
    min-height: 0 !important;
    background: #171d43 !important;
    box-shadow: none !important
}

body:has(.lgx-page) .site-footer .footer-bottom {
    padding: 1rem 0
}

body:has(.lgx-page) .site-footer .footer-bottom .container {
    justify-content: center
}

body:has(.lgx-page) .site-footer .footer-bottom .legal,
body:has(.lgx-page) .site-footer .footer-grid {
    display: none
}

body:has(.lgx-page) .site-footer .footer-bottom span {
    font-size: .68rem;
    color: rgba(255, 255, 255, .52)
}

.footer-reveal-ready body:has(.lgx-page) .site-main {
    margin-bottom: 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0
}

.footer-reveal-ready body:has(.lgx-page) .site-footer {
    position: relative;
    min-height: 0
}

@keyframes lgxFloat {
    to {
        transform: translate3d(28px, 22px, 0) scale(1.08)
    }
}

@keyframes lgxLift {
    from {
        opacity: 0;
        transform: translateY(18px) rotate(-2deg)
    }

    to {
        opacity: 1;
        transform: translateY(0) rotate(-2deg)
    }
}

@media(max-width:900px) {
    .lgx-shell {
        grid-template-columns: 1fr;
        max-width: 620px;
        gap: 1rem
    }

    .lgx-story {
        min-height: 420px;
        padding: 2rem
    }

    .lgx-story-copy {
        margin: 2rem 0 0;
        transform: translateY(-8px)
    }

    .lgx-preview {
        width: 390px;
        margin: 1.5rem 0 0
    }

    .lgx-story-foot {
        margin-top: 2rem
    }

    .lgx-auth {
        min-height: 550px
    }

    .lgx-form-wrap {
        margin: 2rem auto
    }

    .lgx-register-story .lgx-story-copy p {
        display: block
    }
}

@media(max-width:600px) {
    .lgx-page {
        min-height: calc(100svh - 88px);
        padding: 1rem 0 2rem
    }

    .lgx-shell {
        border-radius: 0
    }

    .lgx-story,
    .lgx-auth {
        border-radius: 23px
    }

    .lgx-story {
        min-height: 390px;
        padding: 1.45rem
    }

    .lgx-story h1 {
        font-size: 2.7rem
    }

    .lgx-story-copy {
        margin: 1.8rem 0 0;
        transform: translateY(-5px)
    }

    .lgx-preview {
        width: 100%;
        margin-top: 1.25rem
    }

    .lgx-story-foot {
        gap: .55rem .8rem;
        font-size: .58rem
    }

    .lgx-auth {
        padding: 1.2rem
    }

    .lgx-register-story .lgx-story-copy p {
        display: block
    }

    .lgx-auth-top {
        font-size: .64rem
    }

    .lgx-form-wrap {
        margin: 2.1rem auto 1rem
    }

    .lgx-form-head h2 {
        font-size: 2rem
    }

    .lgx-mobile-alt {
        display: block;
        margin: 1.25rem 0 0
    }

    .lgx-trust {
        font-size: .55rem
    }
}

@media(prefers-reduced-motion:reduce) {

    .lgx-orb,
    .lgx-preview {
        animation: none !important
    }

    .lgx-submit,
    .lgx-submit svg {
        transition: none !important
    }
}

[data-theme='dark'] .lgx-page,
.dark .lgx-page {
    --lgx-ink: #f5f2ff;
    --lgx-muted: #aaa5bd;
    --lgx-line: rgba(255, 255, 255, .12);
    --lgx-panel: rgba(29, 25, 58, .78)
}

[data-theme='dark'] .lgx-ambient,
.dark .lgx-ambient {
    background: transparent
}

[data-theme='dark'] .lgx-auth,
.dark .lgx-auth {
    border-color: rgba(153, 178, 255, .17);
    background: rgba(18, 26, 57, .78)
}

[data-theme='dark'] .lgx-input-wrap input,
.dark .lgx-input-wrap input,
[data-theme='dark'] .lgx-equation input,
.dark .lgx-equation input {
    color: #f5f2ff;
    background: rgba(255, 255, 255, .07)
}

[data-theme='dark'] .lgx-input-wrap input:focus,
.dark .lgx-input-wrap input:focus {
    background: rgba(255, 255, 255, .1)
}

/* Auth V2 — compact, viewport-aware premium composition */
@media(min-width:901px) {
    .lgx-page {
        height: calc(100svh - 160px);
        min-height: 0;
        padding: clamp(.65rem, 1.4vh, 1rem) 0;
    }

    .lgx-shell {
        height: 100%;
        min-height: 0;
        max-height: 700px;
    }

    .lgx-story {
        min-height: 0;
        padding: clamp(1.6rem, 3.2vh, 2.6rem) clamp(2rem, 4vw, 3.7rem)
    }

    .lgx-story h1 {
        font-size: clamp(2.55rem, 4.2vw, 4.15rem)
    }

    .lgx-story-copy p {
        line-height: 1.6
    }

    .lgx-preview {
        margin-top: clamp(1rem, 2.2vh, 1.6rem)
    }

    .lgx-auth {
        padding-top: 1.1rem;
        padding-bottom: 1.1rem
    }

    .lgx-form-head {
        margin-bottom: clamp(.85rem, 1.8vh, 1.35rem)
    }

    .lgx-form-head h2 {
        margin-top: .35rem;
        font-size: clamp(1.85rem, 3.2vh, 2.2rem)
    }

    .lgx-form {
        gap: clamp(.65rem, 1.25vh, .95rem)
    }

    .lgx-input-wrap input {
        height: clamp(46px, 6.2vh, 52px)
    }

    .lgx-quiz {
        padding: .65rem
    }

    .lgx-submit {
        height: clamp(48px, 6.4vh, 54px)
    }

    .lgx-trust {
        margin-top: clamp(.65rem, 1.3vh, 1rem)
    }
}

.lgx-auth-state,
.lgx-signin-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .7rem;
    border: 1px solid rgba(115, 88, 239, .16);
    border-radius: 999px;
    color: #6751df;
    background: rgba(115, 88, 239, .07);
    font-weight: 850
}

.lgx-create-cta {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    align-items: center;
    gap: .75rem;
    margin-top: clamp(.7rem, 1.5vh, 1.1rem);
    padding: .72rem .8rem;
    border: 1px solid rgba(103, 81, 232, .25);
    border-radius: 16px;
    color: var(--lgx-ink);
    background: linear-gradient(120deg, rgba(108, 83, 237, .12), rgba(44, 210, 201, .09));
    box-shadow: 0 12px 30px rgba(75, 53, 175, .1);
    text-decoration: none;
    transition: transform .22s, border-color .22s, box-shadow .22s
}

.lgx-create-cta:hover {
    transform: translateY(-2px);
    border-color: rgba(103, 81, 232, .48);
    box-shadow: 0 16px 34px rgba(75, 53, 175, .17)
}

.lgx-create-icon,
.lgx-create-arrow {
    display: grid;
    place-items: center;
    border-radius: 12px
}

.lgx-create-icon {
    width: 42px;
    height: 42px;
    color: #fff;
    background: linear-gradient(135deg, #6550e5, #a14bef);
    box-shadow: 0 8px 18px rgba(103, 81, 232, .27)
}

.lgx-create-arrow {
    width: 34px;
    height: 34px;
    color: #7358ef;
    background: rgba(255, 255, 255, .72)
}

.lgx-create-copy small,
.lgx-create-copy strong,
.lgx-create-copy em {
    display: block
}

.lgx-create-copy small {
    color: #7358ef;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .11em
}

.lgx-create-copy strong {
    margin: .1rem 0;
    font-size: .76rem
}

.lgx-create-copy em {
    color: var(--lgx-muted);
    font-size: .57rem;
    font-style: normal
}

.lgx-benefits {
    display: grid;
    gap: .65rem;
    width: min(100%, 500px);
    margin: 1.3rem 0
}

.lgx-benefits article {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .72rem .8rem;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 14px;
    background: rgba(255, 255, 255, .065);
    backdrop-filter: blur(10px)
}

.lgx-benefits article>span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 11px;
    color: #a8f6ec;
    background: rgba(101, 231, 217, .12)
}

.lgx-benefits strong,
.lgx-benefits small {
    display: block
}

.lgx-benefits strong {
    font-size: .72rem
}

.lgx-benefits small {
    margin-top: .18rem;
    color: rgba(255, 255, 255, .55);
    font-size: .59rem
}

.lgx-register-shell {
    grid-template-columns: minmax(320px, .72fr) minmax(560px, 1.28fr);
    max-width: 1180px
}

.lgx-register-story h1 {
    font-size: clamp(2.3rem, 3.7vw, 3.8rem)
}

.lgx-register-wrap {
    width: min(100%, 660px)
}

.lgx-register-head {
    text-align: left
}

.lgx-register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem
}

.lgx-register-form {
    gap: .72rem
}

.lgx-register-form .lgx-field label {
    margin-bottom: .3rem
}

.lgx-register-form .lgx-input-wrap input {
    height: 47px
}

.lgx-label-row label span {
    color: var(--lgx-muted);
    font-weight: 650
}

.lgx-label-row>small {
    color: var(--lgx-muted);
    font-size: .58rem
}

.lgx-phone-wrap {
    display: grid;
    grid-template-columns: 144px minmax(0, 1fr);
    gap: .55rem
}

.lgx-phone-wrap select {
    min-width: 0;
    height: 47px;
    padding: 0 .7rem;
    border: 1px solid var(--lgx-line);
    border-radius: 14px;
    outline: 0;
    color: var(--lgx-ink);
    background: rgba(246, 245, 255, .85);
    font: inherit;
    font-size: .68rem;
    font-weight: 750
}

.lgx-phone-wrap select:focus {
    border-color: #8064ff;
    box-shadow: 0 0 0 4px rgba(128, 100, 255, .12)
}

.lgx-register-actions {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(250px, 1.2fr);
    align-items: stretch;
    gap: .7rem
}

.lgx-register-quiz {
    grid-template-columns: 34px minmax(0, 1fr) 76px;
    align-items: center;
    padding: .55rem
}

.lgx-register-quiz .lgx-quiz-icon {
    width: 34px;
    height: 34px
}

.lgx-register-quiz .lgx-equation {
    grid-column: 3;
    margin: 0
}

.lgx-register-quiz .lgx-equation input {
    width: 76px
}

.lgx-register-actions .lgx-submit {
    height: auto;
    min-height: 52px;
    margin: 0
}

[data-theme='dark'] .lgx-create-cta,
.dark .lgx-create-cta {
    background: linear-gradient(120deg, rgba(117, 91, 243, .2), rgba(44, 210, 201, .1))
}

[data-theme='dark'] .lgx-create-arrow,
.dark .lgx-create-arrow {
    background: rgba(255, 255, 255, .08)
}

[data-theme='dark'] .lgx-phone-wrap select,
.dark .lgx-phone-wrap select {
    color: #f5f2ff;
    background: rgba(255, 255, 255, .07)
}

@media(min-width:901px) and (max-height:760px) {
    .lgx-story-copy p {
        display: none
    }

    .lgx-preview-body {
        padding: .75rem
    }

    .lgx-wave {
        display: none
    }

    .lgx-create-cta {
        padding-top: .55rem;
        padding-bottom: .55rem
    }

    .lgx-register-story .lgx-story-copy p {
        display: block
    }

    .lgx-benefits {
        gap: .45rem;
        margin: .8rem 0
    }

    .lgx-benefits article {
        padding: .5rem .65rem
    }
}

@media(max-width:900px) {
    .lgx-create-cta {
        margin-bottom: 1rem
    }

    .lgx-register-shell {
        max-width: 700px
    }

    .lgx-register-story {
        min-height: 430px
    }

    .lgx-register-auth {
        min-height: 0
    }

    .lgx-register-wrap {
        margin: 1.6rem auto
    }
}

@media(max-width:650px) {
    .lgx-auth-top>span:first-child {
        display: none
    }

    .lgx-register-grid,
    .lgx-register-actions {
        grid-template-columns: 1fr
    }

    .lgx-phone-wrap {
        grid-template-columns: 118px minmax(0, 1fr)
    }

    .lgx-register-quiz {
        grid-template-columns: 34px minmax(0, 1fr) 76px
    }

    .lgx-benefits article:nth-child(2) {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .lgx-create-cta {
        transition: none !important
    }
}
@media (max-width: 900px) {
    .lgx-story {
        display: none !important;
    }
}

@media (max-width: 600px) {
  .lgx-page-register {
    padding: 1.5rem 0 !important;
    display: block !important;
    min-height: calc(100svh - 60px) !important;
  }
  .lgx-page-register .container.lgx-register-shell {
    display: block !important;
    width: 92% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .lgx-page-register .lgx-register-auth {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 24px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    padding: 1.8rem 1.4rem !important;
    box-sizing: border-box !important;
    box-shadow: 0 12px 35px rgba(38,28,102,0.08) !important;
  }
  .lgx-page-register .lgx-register-wrap {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}