body.onboarding-pending #loginSurface { visibility: hidden; }
.onboarding-shell { position: relative; width: min(100%, 520px); min-height: 100vh; min-height: 100dvh; margin: 0 auto; overflow: hidden; background: #fff; color: #0e2a47; }
.onboarding-skip { position: absolute; z-index: 2; top: max(18px, calc(10px + env(safe-area-inset-top))); right: max(20px, env(safe-area-inset-right)); min-width: 44px; min-height: 44px; padding: 8px 0 8px 12px; border: 0; color: #657681; background: transparent; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.onboarding-slides { display: flex; width: 300%; min-height: 100vh; min-height: 100dvh; transform: translateX(0); transition: transform 240ms ease-out; touch-action: pan-y; }
.onboarding-slide { position: relative; flex: 0 0 33.333333%; min-width: 0; min-height: 100vh; min-height: 100dvh; padding: max(64px, calc(50px + env(safe-area-inset-top))) max(24px, env(safe-area-inset-right)) calc(148px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: center; text-align: center; }
.onboarding-content { position: relative; z-index: 1; width: 100%; max-width: 420px; margin: 0 auto; transform: translateY(-4vh); }
.onboarding-content--brand { transform: translateY(-2vh); }
.onboarding-brand-lockup { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: clamp(52px, 11vh, 96px); color: #0e2a47; font-size: 34px; font-weight: 850; letter-spacing: -.07em; line-height: 1; }
.onboarding-brand-lockup img { display: block; width: 72px; height: 72px; object-fit: contain; }
.onboarding-icon { display: block; width: 96px; height: 96px; margin: 0 auto clamp(42px, 9vh, 82px); fill: none; stroke: #607d99; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.onboarding-icon-fill { fill: #173f69; stroke: #173f69; }
.onboarding-icon-check { stroke: #fff; }
.onboarding-content h1 { margin: 0; color: #0e2a47; font-size: clamp(25px, 6.8vw, 33px); font-weight: 850; line-height: 1.38; letter-spacing: -.065em; word-break: keep-all; overflow-wrap: anywhere; }
.onboarding-content p { margin: clamp(24px, 4.5vh, 38px) 0 0; color: #657681; font-size: clamp(15px, 4.2vw, 18px); font-weight: 500; line-height: 1.65; letter-spacing: -.035em; word-break: keep-all; }
.onboarding-wave { position: absolute; right: 0; bottom: 0; left: 0; height: min(25vh, 190px); overflow: hidden; pointer-events: none; }
.onboarding-wave svg { display: block; width: 100%; height: 100%; }
.onboarding-wave path:first-child { fill: #f3f8fb; }
.onboarding-wave path:last-child { fill: none; stroke: #a8c5d2; stroke-width: 1.1; }
.onboarding-footer { position: absolute; z-index: 2; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, calc(16px + env(safe-area-inset-bottom))); left: max(24px, env(safe-area-inset-left)); display: grid; gap: 20px; }
.onboarding-indicator { height: 16px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.onboarding-indicator span { width: 9px; height: 9px; border-radius: 50%; background: #e2e8ef; }
.onboarding-indicator span.is-active { background: #173f69; }
.onboarding-primary { min-height: 58px; border: 0; border-radius: 10px; color: #fff; background: #173f69; font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; box-shadow: 0 7px 16px rgb(14 42 71 / .10); }
.onboarding-skip:focus-visible, .onboarding-primary:focus-visible { outline: 3px solid #20b7a3; outline-offset: 3px; }
@media (max-width: 350px), (max-height: 690px) { .onboarding-slide { padding-bottom: calc(122px + env(safe-area-inset-bottom)); } .onboarding-content, .onboarding-content--brand { transform: translateY(-1vh); } .onboarding-brand-lockup { margin-bottom: 30px; } .onboarding-icon { width: 78px; height: 78px; margin-bottom: 26px; } .onboarding-content h1 { font-size: 24px; } .onboarding-content p { margin-top: 18px; font-size: 15px; } .onboarding-footer { gap: 12px; } .onboarding-primary { min-height: 52px; } }
@media (prefers-reduced-motion: reduce) { .onboarding-slides { transition: none; } }