:root {
    color: #172033;
    background: #f5f7fb;
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
    --primary: #4f7bf1;
    --text: #172033;
    --muted: #7a8499;
}

* { box-sizing: border-box; }

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
}

button,
input { font: inherit; }

button,
label { -webkit-tap-highlight-color: transparent; }

button { border: 0; }

[hidden] { display: none !important; }

.slider-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 16px;
    background: rgba(23, 32, 51, .55);
}

.slider-dialog-panel {
    flex: 0 0 auto;
    width: 318px;
    max-width: 100%;
    margin: auto;
}

.slider-dialog-panel #captcha-box { min-height: 318px; }
.slider-error { padding: 10px; border-radius: 5px; color: #bb2635; background: #fff; }

.input-shell-with-sms { display: flex; align-items: center; }
.sms-send-button { flex-shrink: 0; padding: 8px 12px; color: #3468d6; background: transparent; cursor: pointer; }
.sms-send-button:disabled { color: #808ba3; cursor: default; }
.sms-status { margin: 8px 0 0; font-size: 13px; color: #35415c; }

.login-page {
    overflow-x: hidden;
    background: #f5f7fb;
}

.auth-stage {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: minmax(520px, 1.08fr) minmax(520px, .92fr);
}

.visual-carousel {
    position: relative;
    display: flex;
    min-height: 720px;
    padding: 34px clamp(44px, 5vw, 88px) 30px;
    flex-direction: column;
    overflow: hidden;
    background:
            radial-gradient(circle at 14% 14%, rgba(255, 255, 255, .92) 0 2px, transparent 3px),
            radial-gradient(circle at 88% 72%, rgba(255, 255, 255, .72) 0 2px, transparent 3px),
            linear-gradient(142deg, #eff4ff 0%, #e9f0ff 46%, #f4f7ff 100%);
}

.visual-carousel::before,
.visual-carousel::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(94, 132, 226, .12);
    border-radius: 50%;
}

.visual-carousel::before {
    top: -260px;
    right: -290px;
    width: 650px;
    height: 650px;
    box-shadow: 0 0 0 46px rgba(255, 255, 255, .18), 0 0 0 92px rgba(255, 255, 255, .1);
}

.visual-carousel::after {
    bottom: -330px;
    left: -210px;
    width: 560px;
    height: 560px;
    box-shadow: 0 0 0 58px rgba(255, 255, 255, .18);
}

.marketing-brand,
.compact-brand,
.mobile-brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}

.brand-logo-image {
    display: block;
    width: min(100%, 360px);
    height: auto;
}

.brand-logo-mobile {
    width: 210px;
}

.marketing-brand-name {
    margin-left: 11px;
    color: #1d2940;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .02em;
}

.marketing-brand-slogan {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(23, 32, 51, .18);
    color: #8893a9;
    font-size: 13px;
}

.okrt-logo {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}

.okrt-logo i {
    position: absolute;
    display: block;
    height: 8px;
    border-radius: 999px;
    transform: rotate(32deg);
}

.okrt-logo i:nth-child(1) { top: 3px; left: 2px; width: 13px; background: #6aa7f8; }
.okrt-logo i:nth-child(2) { top: 12px; left: 7px; width: 19px; background: #62c9a9; }
.okrt-logo i:nth-child(3) { top: 22px; left: 13px; width: 17px; background: #f2a36e; }
.okrt-logo-small { transform: scale(.78); }

.carousel-copy {
    position: relative;
    z-index: 2;
    width: min(540px, 90%);
    margin: clamp(58px, 8vh, 94px) auto 0;
}

.eyebrow {
    margin: 0 0 12px;
    color: #6e8fe8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .17em;
}

.carousel-copy h1 {
    margin: 0;
    color: #16233d;
    font-size: clamp(34px, 3vw, 52px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.26;
}

.carousel-copy h1 em {
    color: var(--primary);
    font-style: normal;
}

.carousel-viewport {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 0;
    margin: 24px auto 0;
    flex: 1;
}

.visual-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(22px);
    transition: opacity .55s ease, transform .55s ease;
}

.visual-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.carousel-image {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 520px);
    max-height: calc(100vh - 190px);
    max-height: calc(100dvh - 190px);
    object-fit: contain;
}

.slide-art {
    position: relative;
    width: min(470px, 82%);
    height: 270px;
}

.slide-caption {
    display: flex;
    width: min(460px, 88%);
    margin-top: 8px;
    flex-direction: column;
    align-items: center;
    color: #7f8ca4;
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

.slide-caption strong {
    margin-bottom: 3px;
    color: #30415f;
    font-size: 17px;
    font-weight: 600;
}

.goal-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(78, 122, 234, .2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.orbit-one { width: 224px; height: 224px; }
.orbit-two { width: 330px; height: 170px; }

.goal-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 104px;
    height: 104px;
    transform: translate(-50%, -50%);
    place-items: center;
    border: 11px solid rgba(255, 255, 255, .78);
    border-radius: 31px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(67, 105, 194, .19);
}

.goal-center .okrt-logo { margin-top: 4px; }
.goal-center strong { margin-top: -17px; color: #5b6f96; font-size: 11px; letter-spacing: .08em; }

.orbit-node {
    position: absolute;
    display: grid;
    min-width: 62px;
    height: 48px;
    padding: 0 12px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 15px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 26px rgba(69, 101, 173, .12);
    color: #617397;
    font-size: 12px;
}

.node-todo { top: 21px; left: 73px; }
.node-review { top: 8px; right: 78px; }
.node-team { top: 104px; right: 18px; }
.node-data { bottom: 17px; right: 91px; }
.node-focus { bottom: 28px; left: 55px; }

.slide-art-connect {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
}

.connect-card {
    position: relative;
    z-index: 2;
    display: flex;
    width: 126px;
    height: 142px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 31px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 20px 45px rgba(65, 101, 183, .16);
}

.connect-card small { margin-top: 13px; color: #596a89; font-size: 12px; }

.agent-glyph {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(145deg, #37d0aa, #16ad83);
    box-shadow: 0 10px 22px rgba(34, 183, 143, .25);
    color: #ffffff;
    font-size: 25px;
    font-weight: 800;
}

.connect-card-okrt .okrt-logo { transform: scale(1.45); }

.connect-path { display: flex; gap: 8px; }
.connect-path i { width: 9px; height: 9px; transform: rotate(-45deg); border-right: 2px solid #6c91ef; border-bottom: 2px solid #6c91ef; }
.connect-path i:nth-child(2) { opacity: .62; }
.connect-path i:nth-child(3) { opacity: .3; }

.security-chip {
    position: absolute;
    z-index: 3;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 22px rgba(65, 101, 183, .13);
    color: #6481c7;
    font-size: 11px;
}

.chip-one { top: 34px; left: 49%; }
.chip-two { right: 45px; bottom: 38px; }

.slide-art-progress { display: grid; place-items: center; }

.progress-window {
    width: min(410px, 96%);
    padding: 18px 22px 20px;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 28px;
    background: rgba(255, 255, 255, .91);
    box-shadow: 0 24px 52px rgba(65, 101, 183, .17);
    transform: rotate(-1.5deg);
}

.progress-window-head { display: flex; gap: 5px; padding-bottom: 14px; border-bottom: 1px solid #edf0f6; }
.progress-window-head i { width: 6px; height: 6px; border-radius: 50%; background: #d7deed; }

.progress-stat {
    display: flex;
    padding: 18px 0 14px;
    align-items: flex-end;
    justify-content: space-between;
    color: #7887a2;
    font-size: 12px;
}

.progress-stat strong { color: #4d78ea; font-size: 36px; line-height: 1; }
.progress-stat small { font-size: 17px; }
.progress-bars { display: grid; gap: 10px; }
.progress-bars i { height: 8px; overflow: hidden; border-radius: 999px; background: #eef2f9; }
.progress-bars b { display: block; width: 82%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #76a6ff, #4e78e9); }
.progress-bars i:nth-child(2) b { width: 65%; background: linear-gradient(90deg, #79d8ba, #45bb98); }
.progress-bars i:nth-child(3) b { width: 48%; background: linear-gradient(90deg, #f7ba82, #ee9b63); }

.progress-people { display: flex; margin-top: 17px; align-items: center; }
.progress-people i { display: grid; width: 28px; height: 28px; margin-right: -6px; place-items: center; border: 2px solid #ffffff; border-radius: 50%; background: #dfe9ff; color: #5574bc; font-size: 10px; font-style: normal; font-weight: 700; }
.progress-people i:nth-child(2) { background: #dff7ef; color: #399477; }
.progress-people i:nth-child(3) { background: #fff0df; color: #bd7340; }
.progress-people span { margin-left: 14px; color: #8994a8; font-size: 11px; }

.carousel-dots {
    position: relative;
    z-index: 3;
    display: flex;
    margin: 4px auto 0;
    gap: 8px;
}

.carousel-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 999px;
    background: #bdc9e3;
    cursor: pointer;
    transition: width .25s ease, background-color .25s ease;
}

.carousel-dots button.is-active { width: 24px; background: #5c82e8; }
.carousel-dots button:focus-visible { outline: 3px solid rgba(79, 123, 241, .25); outline-offset: 4px; }

.visual-footnote {
    position: relative;
    z-index: 2;
    margin: 22px 0 0;
    color: #9aa6bc;
    font-size: 11px;
    letter-spacing: .08em;
    text-align: center;
}

.auth-content {
    position: relative;
    display: grid;
    min-height: 720px;
    padding: 54px clamp(38px, 6vw, 104px);
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 100% 0, rgba(233, 241, 255, .9), transparent 38%), linear-gradient(160deg, #ffffff 0%, #fbfcff 100%);
}

.auth-content::before,
.auth-content::after {
    position: absolute;
    content: "";
    width: 54px;
    height: 54px;
    border: 1px solid rgba(94, 132, 226, .18);
    border-radius: 18px 30px;
    background: rgba(234, 241, 255, .7);
    transform: rotate(28deg);
}

.auth-content::before { top: 12%; left: 10%; }
.auth-content::after { right: 9%; bottom: 11%; transform: rotate(-18deg); }
.mobile-brand { display: none; }

.auth-card {
    position: relative;
    z-index: 2;
    width: min(100%, 470px);
    padding: 44px 42px 32px;
    border: 1px solid rgba(231, 235, 243, .88);
    border-radius: 28px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 26px 70px rgba(55, 74, 117, .12);
}

.card-heading { margin-bottom: 27px; }
.card-heading h2 { margin: 0; color: var(--text); font-size: 30px; font-weight: 700; letter-spacing: -.025em; }
.card-heading > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.login-error {
    display: flex;
    margin: -8px 0 18px;
    padding: 11px 13px;
    align-items: center;
    gap: 9px;
    border: 1px solid #ffd7d0;
    border-radius: 12px;
    background: #fff6f4;
    color: #c8472e;
    font-size: 13px;
    line-height: 1.5;
}

.login-error span { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e5664e; color: #fff; font-size: 11px; font-weight: 700; }

.mode-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.mode-switch {
    position: relative;
    display: grid;
    height: 46px;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    border-radius: 13px;
    background: #f2f5fa;
}

.mode-switch label {
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #788399;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

#mode-sms:checked ~ .mode-switch label[for="mode-sms"],
#mode-password:checked ~ .mode-switch label[for="mode-password"] {
    background: #fff;
    box-shadow: 0 4px 14px rgba(70, 91, 134, .1);
    color: #315fcf;
}

#mode-sms:focus-visible ~ .mode-switch label[for="mode-sms"],
#mode-password:focus-visible ~ .mode-switch label[for="mode-password"] {
    outline: 3px solid rgba(79, 123, 241, .22);
    outline-offset: 2px;
}

.login-form { display: none; padding-top: 23px; }
#mode-sms:checked ~ .login-forms .sms-form,
#mode-password:checked ~ .login-forms .password-form { display: block; }

.field-label { display: block; margin: 0 0 8px; color: #3f4a5f; font-size: 13px; font-weight: 500; }

.input-shell {
    position: relative;
    display: flex;
    height: 52px;
    margin-bottom: 18px;
    align-items: center;
    border: 1px solid #e8ecf3;
    border-radius: 12px;
    background: #f7f9fc;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.input-shell:focus-within { border-color: #8cacf6; background: #fff; box-shadow: 0 0 0 3px rgba(79, 123, 241, .11); }
.input-shell input { width: 100%; height: 100%; min-width: 0; padding: 0 15px; border: 0; outline: 0; background: transparent; color: #1d2739; font-size: 14px; }
.input-shell input::placeholder { color: #b3bbca; }
.phone-prefix { display: flex; height: 22px; padding: 0 13px 0 16px; align-items: center; border-right: 1px solid #dfe4ed; color: #5073cb; font-size: 14px; }
.phone-input-shell input { padding-left: 13px; }
.input-shell-with-action input { padding-right: 52px; }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    transform: translateY(-50%);
    place-items: center;
    border-radius: 10px;
    background: transparent;
    color: #68758c;
    cursor: pointer;
}

.password-toggle:hover { background: #edf1f7; }
.password-toggle:focus-visible { outline: 3px solid rgba(79, 123, 241, .22); }
.password-toggle svg { width: 20px; height: 20px; }
.password-toggle .eye-closed,
.password-toggle[aria-pressed="true"] .eye-open { display: none; }
.password-toggle[aria-pressed="true"] .eye-closed { display: block; }

.primary-button,
.secondary-button {
    display: grid;
    width: 100%;
    height: 52px;
    padding: 0 20px;
    place-items: center;
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease;
}

.primary-button { background: linear-gradient(135deg, #5a85f4, #4773ec); box-shadow: 0 11px 24px rgba(68, 111, 232, .22); color: #fff; }
.primary-button:hover { background: linear-gradient(135deg, #4d79ed, #3868e4); box-shadow: 0 13px 28px rgba(68, 111, 232, .28); }
.primary-button:active,
.secondary-button:active,
.company-option:active { transform: translateY(1px); }
.primary-button:focus-visible,
.secondary-button:focus-visible,
.company-option:focus-visible,
.scope-option:has(input:focus-visible) { outline: 3px solid rgba(79, 123, 241, .24); outline-offset: 3px; }
.login-button { margin-top: 7px; }

.service-note,
.selection-note {
    display: flex;
    margin: 19px 0 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #9aa3b3;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

.service-note svg,
.selection-note svg { width: 16px; height: 16px; flex: 0 0 auto; }

.standalone-page {
    background: radial-gradient(circle at 14% 16%, rgba(199, 218, 255, .55), transparent 32%), radial-gradient(circle at 88% 84%, rgba(218, 239, 233, .52), transparent 31%), #f7f9fd;
}

.standalone-shell {
    position: relative;
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 42px 20px;
    place-items: center;
    overflow: hidden;
}

.standalone-shell::before,
.standalone-shell::after {
    position: absolute;
    content: "";
    width: 360px;
    height: 360px;
    border: 1px solid rgba(90, 130, 226, .12);
    border-radius: 50%;
}

.standalone-shell::before { top: -220px; right: -90px; box-shadow: 0 0 0 52px rgba(255, 255, 255, .25); }
.standalone-shell::after { bottom: -270px; left: -120px; box-shadow: 0 0 0 42px rgba(255, 255, 255, .22); }

.selection-card {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    padding: 28px 40px 30px;
    border: 1px solid rgba(230, 235, 243, .92);
    border-radius: 28px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 28px 80px rgba(62, 82, 125, .13);
}

.compact-brand { justify-content: center; color: #233049; font-size: 18px; }
.compact-brand strong { margin-left: 8px; }
.compact-brand .okrt-logo { transform: scale(.82); }

.selection-heading {
    display: flex;
    margin: 25px 0 24px;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.heading-icon {
    display: grid;
    width: 60px;
    height: 60px;
    margin-bottom: 17px;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(145deg, #eff4ff, #e4edff);
    box-shadow: inset 0 0 0 1px rgba(100, 139, 232, .1);
    color: #5277d5;
}

.heading-icon svg { width: 31px; height: 31px; }
.selection-heading .eyebrow { margin-bottom: 8px; }
.selection-heading h1 { margin: 0; color: var(--text); font-size: 25px; font-weight: 700; letter-spacing: -.025em; }
.selection-heading > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.company-list {
    display: grid;
    max-height: min(390px, 44vh);
    gap: 10px;
    overflow-y: auto;
    scrollbar-color: #d4dbea transparent;
    scrollbar-width: thin;
}

.company-form:nth-child(4n + 1) .company-avatar { background: #f1eaff; color: #7856c7; }
.company-form:nth-child(4n + 2) .company-avatar { background: #e8f7f2; color: #31866d; }
.company-form:nth-child(4n + 3) .company-avatar { background: #eaf1ff; color: #4f72c9; }
.company-form:nth-child(4n) .company-avatar { background: #fff0e6; color: #c16b35; }

.company-option {
    display: grid;
    width: 100%;
    min-height: 72px;
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    padding: 10px 13px;
    align-items: center;
    gap: 13px;
    border: 1px solid #e8ecf3;
    border-radius: 16px;
    background: #fff;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .08s ease;
}

.company-option:hover { border-color: #b9caf3; background: #fbfcff; box-shadow: 0 9px 24px rgba(68, 92, 145, .08); }
.company-avatar { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; font-size: 16px; font-weight: 700; }
.company-copy { display: flex; min-width: 0; flex-direction: column; }
.company-copy strong { overflow: hidden; color: #273248; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.company-copy small { margin-top: 4px; color: #a0a8b7; font-size: 11px; }
.option-arrow { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: #f4f7fc; color: #8c99b1; }
.option-arrow svg { width: 16px; height: 16px; }

.or-divider { display: flex; margin: 23px 0 19px; align-items: center; gap: 14px; color: #9ba5b7; font-size: 11px; }
.or-divider::before,
.or-divider::after { height: 1px; flex: 1; content: ""; background: #e5e9f1; }

.secondary-button { border: 1px solid #dce3ef; background: #fff; color: #62708a; }
.secondary-button:hover { border-color: #b9c8e8; background: #f9fbff; color: #4464aa; }
.consent-card { width: min(100%, 560px); }
.consent-heading { margin-bottom: 21px; }

.trusted-consent {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trusted-consent-logo {
    display: block;
    width: min(100%, 218px);
    height: auto;
    margin: 8px auto 34px;
}

.trusted-consent-heading { width: 100%; }
.trusted-consent-heading h1 {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.5;
}

.trusted-capability-list {
    display: grid;
    width: 100%;
    margin: 25px 0 4px;
    padding: 0;
    gap: 15px;
    list-style: none;
}

.trusted-capability-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    color: #47536a;
    font-size: 14px;
    line-height: 1.75;
}

.trusted-capability-check {
    display: grid;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    place-items: center;
    border-radius: 50%;
    background: #eaf7f2;
    color: #2e9a79;
    font-size: 14px;
    font-weight: 700;
}

.app-connection { display: flex; margin-bottom: 20px; align-items: center; justify-content: center; gap: 13px; }
.connected-app { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid #e4e9f3; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(72, 93, 138, .1); }
.connected-app-agent { background: linear-gradient(145deg, #38cda7, #16a97f); color: #fff; font-size: 22px; font-weight: 800; }
.connection-line { display: flex; gap: 5px; }
.connection-line i { width: 6px; height: 6px; border-radius: 50%; background: #8da7e8; }
.connection-line i:nth-child(2) { opacity: .62; }
.connection-line i:nth-child(3) { opacity: .3; }

.scope-list {
    display: grid;
    max-height: min(370px, 42vh);
    padding: 0;
    gap: 10px;
    overflow-y: auto;
    border: 0;
}

.scope-option {
    position: relative;
    display: grid;
    min-height: 76px;
    grid-template-columns: 22px 42px minmax(0, 1fr);
    padding: 12px 14px;
    align-items: center;
    gap: 12px;
    border: 1px solid #e7ebf2;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.scope-option:hover,
.scope-option:has(input:checked) { border-color: #b9caf5; background: #fbfcff; }
.scope-option:has(input:checked) { box-shadow: inset 0 0 0 1px rgba(83, 124, 229, .08); }
.scope-option input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.custom-checkbox {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1.5px solid #cbd3e1;
    border-radius: 6px;
    background: #fff;
    color: transparent;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.custom-checkbox svg { width: 16px; height: 16px; }
.scope-option input:checked + .custom-checkbox { border-color: var(--primary); background: var(--primary); color: #fff; }
.scope-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: #eef3ff; color: #587bd3; }
.scope-icon svg { width: 24px; height: 24px; }
.scope-copy { display: flex; min-width: 0; flex-direction: column; }
.scope-copy strong { color: #2c374c; font-size: 14px; font-weight: 600; }
.scope-copy small { margin-top: 5px; overflow: hidden; color: #9ba4b5; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.consent-button { margin-top: 20px; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1120px) {
    .auth-stage { grid-template-columns: minmax(430px, .92fr) minmax(480px, 1.08fr); }
    .visual-carousel { padding-right: 38px; padding-left: 38px; }
    .carousel-copy { width: 92%; }
    .slide-art { width: 94%; }
}

@media (max-width: 900px) {
    .auth-stage { display: block; }
    .visual-carousel { display: none; }
    .auth-content { min-height: 100vh; min-height: 100dvh; padding: 88px 24px 38px; }
    .mobile-brand { position: absolute; top: 30px; left: 30px; display: flex; }
}

@media (max-width: 600px) {
    .auth-content { padding: 78px 14px 20px; align-items: start; }
    .auth-content::before,
    .auth-content::after,
    .standalone-shell::before,
    .standalone-shell::after { display: none; }
    .mobile-brand { top: 24px; left: 22px; }
    .auth-card { padding: 32px 24px 26px; border-radius: 22px; box-shadow: 0 18px 52px rgba(55, 74, 117, .1); }
    .card-heading h2 { font-size: 27px; }
    .standalone-shell { padding: 0; align-items: start; }
    .selection-card { min-height: 100vh; min-height: 100dvh; padding: 25px 20px 28px; border: 0; border-radius: 0; box-shadow: none; }
    .selection-heading { margin-top: 20px; }
    .selection-heading h1 { font-size: 23px; }
    .trusted-consent-logo { width: min(100%, 196px); margin-bottom: 30px; }
    .trusted-consent-heading h1 { font-size: 21px; }
    .trusted-capability-list { margin-top: 22px; }
    .company-list,
    .scope-list { max-height: none; }
}

@media (max-height: 760px) and (min-width: 901px) {
    .auth-card { padding-top: 34px; padding-bottom: 26px; }
    .carousel-viewport { margin-top: 16px; }
    .carousel-image { max-height: calc(100dvh - 170px); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}