/* The same authentication surface is used by the main, pricing, and partner pages. */
.landing-auth-overlay {
    padding: 16px;
    background: rgba(7, 8, 12, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.landing-auth-modal {
    display: grid;
    grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
    inline-size: min(900px, 100%);
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: clip;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    background: #18191f;
    box-shadow: 0 32px 110px rgba(0, 0, 0, .72), 0 0 0 1px rgba(237, 72, 104, .08);
    scrollbar-gutter: auto;
}

.landing-auth-modal .modal-close {
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: #25262e;
    color: #ececf0;
    font-size: 14px;
}
.landing-auth-modal .modal-close:hover { border-color: #ed4868; background: #35232c; }
.landing-auth-modal .modal-close:focus-visible,
.landing-auth-modal button:focus-visible,
.landing-auth-modal a:focus-visible { outline: 2px solid #ff8fa5; outline-offset: 3px; }

.landing-auth-aside {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(26px, 3vw, 38px);
    border-right: 1px solid rgba(255, 255, 255, .1);
    background:
        radial-gradient(circle at 56% 38%, rgba(237, 72, 104, .19), transparent 37%),
        linear-gradient(145deg, #203042 0%, #171c2a 46%, #181319 100%);
}
.landing-auth-aside::before {
    content: '';
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at 51% 45%, transparent 0 51px, rgba(237, 72, 104, .13) 52px 53px, transparent 54px 86px);
    opacity: .7;
    pointer-events: none;
}
.landing-auth-aside::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    pointer-events: none;
}
.landing-auth-aside > * { position: relative; z-index: 1; }
.landing-auth-aside__eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #d7dfe8;
    font: 700 10px/1.3 var(--mono, monospace);
    letter-spacing: .15em;
}
.landing-auth-aside__eyebrow i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ed4868;
    box-shadow: 0 0 0 5px rgba(237, 72, 104, .15);
}
.landing-auth-aside__signal {
    display: flex;
    height: 132px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transform: rotate(-8deg);
}
.landing-auth-aside__signal span {
    align-self: flex-start;
    margin: 2px 8px 0 0;
    color: #ff819b;
    font: 800 11px/1 var(--mono, monospace);
    letter-spacing: .1em;
}
.landing-auth-aside__signal i {
    width: 8px;
    height: 28px;
    flex: 0 0 8px;
    border-radius: 4px;
    background: linear-gradient(#ff7592, #e73e62);
    box-shadow: 0 6px 22px rgba(237, 72, 104, .25);
}
.landing-auth-aside__signal i:nth-of-type(2),
.landing-auth-aside__signal i:nth-of-type(8) { height: 62px; }
.landing-auth-aside__signal i:nth-of-type(3),
.landing-auth-aside__signal i:nth-of-type(7) { height: 94px; }
.landing-auth-aside__signal i:nth-of-type(4),
.landing-auth-aside__signal i:nth-of-type(6) { height: 48px; }
.landing-auth-aside__signal i:nth-of-type(5) { height: 118px; }
.landing-auth-aside__copy strong {
    display: block;
    color: #fff;
    font: 800 clamp(28px, 3vw, 39px)/.98 var(--sans, sans-serif);
    letter-spacing: -.055em;
}
.landing-auth-aside__copy p {
    max-width: 27ch;
    margin: 15px 0 0;
    color: #c0c8d3;
    font-size: 12px;
    line-height: 1.55;
}

.landing-auth-modal .modal-body {
    min-width: 0;
    min-height: 0;
    max-height: calc(100vh - 34px);
    max-height: calc(100dvh - 34px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 31px clamp(28px, 4vw, 46px) 28px;
    scrollbar-width: thin;
    scrollbar-color: #67616b transparent;
}
.landing-auth-modal .landing-auth-brand {
    justify-content: flex-start;
    margin: 0 50px 28px 0;
    font-size: 22px;
    letter-spacing: -.045em;
}
.landing-auth-modal .landing-auth-brand i { width: 8px; height: 8px; margin-right: 9px; box-shadow: none; }
.landing-auth-modal .modal-title {
    margin: 0 0 7px;
    padding: 0;
    color: #f8f7f9;
    font-size: clamp(28px, 2.8vw, 34px);
    line-height: 1.05;
    letter-spacing: -.045em;
    text-align: left;
}
.landing-auth-modal .modal-subtitle {
    margin: 0 0 23px;
    color: #aaa9b4;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}
.landing-auth-modal .landing-yandex-button {
    justify-content: flex-start;
    gap: 12px;
    min-height: 52px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 11px;
    background: #262830;
    color: #f6f5f7;
    font: 750 12px/1.25 var(--sans, sans-serif);
    letter-spacing: .01em;
    text-transform: none;
}
.landing-auth-modal .landing-yandex-button:hover { border-color: #ec718b; background: #302831; }
.landing-auth-modal .landing-yandex-button::after { content: '↗'; margin-left: auto; color: #c4bcc5; font-size: 19px; }
.landing-auth-modal .landing-yandex-mark {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 8px;
    background: #f4f3f5;
    color: #d42e36;
    font: 800 21px/1 var(--sans, sans-serif);
}
.landing-auth-modal .landing-yandex-terms {
    margin: 9px 2px 0;
    color: #9b98a3;
    font: 11px/1.45 var(--sans, sans-serif);
    text-align: left;
}
.landing-auth-modal .landing-yandex-terms a,
.landing-auth-modal .landing-auth-legal a,
.landing-auth-modal .landing-registration-consents a { color: #f6d7df; text-underline-offset: 2px; }
.landing-auth-modal .landing-yandex-consent {
    padding: 15px;
    border: 1px solid rgba(237, 72, 104, .5);
    border-radius: 12px;
    background: #231c25;
}
.landing-auth-modal .landing-yandex-consent p { color: #d6d1d8; }
.landing-auth-modal .landing-yandex-consent a {
    color: #ffe1e9;
    font-weight: 700;
    text-decoration-color: #ff8fa5;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.landing-auth-modal .landing-yandex-consent a:hover { color: #fff; text-decoration-color: currentColor; }
.landing-auth-modal .landing-auth-divider { gap: 13px; margin: 20px 0 16px; }
.landing-auth-modal .landing-auth-divider span { color: #918e99; font: 11px/1.3 var(--sans, sans-serif); }
.landing-auth-modal .modal-form { gap: 13px; }
.landing-auth-modal .field { gap: 6px; }
.landing-auth-modal .field label {
    color: #d2d0d7;
    font: 700 12px/1.3 var(--sans, sans-serif);
    letter-spacing: 0;
    text-transform: none;
}
.landing-auth-modal .field input[type="text"],
.landing-auth-modal .field input[type="email"],
.landing-auth-modal .field input[type="password"] {
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #43434e;
    border-radius: 10px;
    background: #111217;
    color: #fff;
    font-size: 15px;
}
.landing-auth-modal .field input:focus-visible { border-color: #ff7996; box-shadow: 0 0 0 3px rgba(237, 72, 104, .19); }
.landing-auth-modal .landing-field-hint { color: #9996a2; font-size: 11px; line-height: 1.4; }
.landing-auth-modal .landing-registration-consents {
    gap: 12px;
    margin: 4px 0 1px;
    padding: 14px;
    border: 1px solid #41414a;
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}
.landing-auth-modal .landing-registration-consents legend {
    padding-inline: 5px;
    color: #e8e4e9;
    font: 750 11px/1.3 var(--sans, sans-serif);
    letter-spacing: 0;
    text-transform: none;
}
.landing-auth-modal .landing-registration-consents .lead-consent {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    color: #d5d2d9;
    font-size: 12px;
    line-height: 1.45;
}
.landing-auth-modal .landing-registration-consents input { width: 19px; min-height: 19px; }
.landing-auth-modal .landing-optional-consent { color: #b8b5bf; }
.landing-auth-modal .landing-yandex-consent .lead-consent {
    display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px;
    margin: 12px 0; color: #d5d2d9; font-size: 12px; line-height: 1.45;
}
.landing-auth-modal .landing-yandex-consent .lead-consent input { width: 19px; min-height: 19px; }
.landing-auth-modal .landing-auth-terms {
    margin: -4px 1px 0; color: #a9a5b0;
    font: 11px/1.5 var(--sans, sans-serif); text-align: left;
}
.landing-auth-modal .landing-auth-terms a { color: #ffe1e9; text-decoration-color: #ff8fa5; text-underline-offset: 2px; }
.landing-auth-modal .modal-form > .btn-primary {
    min-height: 50px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
}
.landing-auth-modal .landing-auth-switch {
    min-height: 32px;
    margin: 0;
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #ff8fa7;
    font-size: 12px;
    font-weight: 700;
}
.landing-auth-modal .landing-auth-switch:hover { border: 0; background: rgba(237, 72, 104, .08); color: #ffb8c8; }
.landing-auth-modal .landing-auth-legal { margin-top: 3px; color: #92909a; font-size: 10px; line-height: 1.5; }
.landing-auth-modal .landing-auth-error { border-radius: 9px; }

@media (max-width: 820px), (max-height: 620px) {
    .landing-auth-modal { grid-template-columns: minmax(0, 1fr); inline-size: min(520px, 100%); }
    .landing-auth-aside { display: none; }
    .landing-auth-modal .modal-body { padding: 30px clamp(22px, 5vw, 34px) 26px; }
}
@media (max-width: 520px) {
    .landing-auth-overlay { padding: 8px; }
    .landing-auth-modal {
        inline-size: 100%;
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 16px;
    }
    .landing-auth-modal .modal-body { padding: 27px 20px 22px; }
    .landing-auth-modal .landing-auth-brand { margin-bottom: 25px; font-size: 20px; }
    .landing-auth-modal .modal-title { font-size: clamp(26px, 7vw, 30px); }
    .landing-auth-modal .modal-subtitle { margin-bottom: 20px; }
    .landing-auth-modal .modal-close { top: 13px; right: 13px; width: 36px; height: 36px; }
}
@media (max-width: 360px) {
    .landing-auth-modal .modal-body { padding-inline: 16px; }
    .landing-auth-modal .landing-yandex-button { font-size: 11px; }
    .landing-auth-modal .landing-registration-consents { padding-inline: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .landing-auth-modal { transition: none; }
}