@font-face { font-family:"Manrope"; src:url("brand/manrope-latin.woff2") format("woff2"); font-style:normal; font-weight:400 800; font-display:swap; }
:root { color-scheme:light; font-family:"Manrope",system-ui,sans-serif; color:#13233a; background:#fff; font-synthesis:none; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { min-height:100vh; min-height:100svh; margin:0; }
a { color:#2457d6; text-decoration:none; }
a:hover { text-decoration:underline; }
button,input { font:inherit; }
button { cursor:pointer; }
button,a,input { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #78a5ff; outline-offset:3px; }
.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; }
.login-layout { display:grid; grid-template-columns:minmax(500px,1.08fr) minmax(500px,.92fr); min-height:100vh; min-height:100svh; }
.story-panel { position:relative; isolation:isolate; display:flex; min-width:0; flex-direction:column; overflow:hidden; padding:38px clamp(38px,5vw,72px) 34px; color:#001a55; background:linear-gradient(145deg,#f8fbff 0%,#eaf3ff 52%,#dcecff 100%); }
.story-panel::before { content:""; position:absolute; top:-140px; right:-160px; z-index:-2; width:520px; height:520px; border:92px solid rgb(0 109 255 / 8%); border-radius:50%; }
.story-panel::after { content:""; position:absolute; bottom:-230px; left:-150px; z-index:-2; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgb(0 109 255 / 14%) 0 2px,transparent 2.5px); background-size:22px 22px; transform:rotate(12deg); }
.brand { display:block; width:fit-content; }
.brand img { display:block; width:225px; height:auto; }
.story-mark { position:absolute; right:-58px; top:34%; z-index:-1; display:grid; gap:12px; opacity:.12; transform:rotate(14deg); }
.story-mark span { display:block; width:250px; height:94px; border:2px solid #006dff; border-radius:70px 20px 70px 20px; }
.story-copy { position:relative; display:grid; width:min(100%,680px); grid-template-columns:minmax(0,1fr) 190px; align-items:center; gap:30px; margin:auto 0; overflow:hidden; padding:clamp(32px,4vw,50px); border:1px solid rgb(255 255 255 / 16%); border-radius:30px; color:white; background:linear-gradient(145deg,#001a55,#062b74 64%,#064bad); box-shadow:0 28px 70px rgb(0 38 110 / 25%); }
.story-copy::after { content:""; position:absolute; right:-90px; bottom:-110px; width:280px; height:280px; border:52px solid rgb(57 167 255 / 12%); border-radius:50%; pointer-events:none; }
.story-copy-main { position:relative; z-index:2; min-width:0; }
.story-kicker { margin:0 0 26px; color:#9fc5ff; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.story-lines { position:relative; z-index:1; height:112px; pointer-events:none; user-select:none; -webkit-user-select:none; }
.story-lines p { position:absolute; inset:0; display:flex; align-items:center; margin:0; color:#7ed5ff; opacity:0; font-size:clamp(29px,3vw,44px); font-weight:650; line-height:1.15; letter-spacing:-.045em; text-wrap:balance; transition:opacity .45s ease; }
.story-lines p.is-active { opacity:1; text-shadow:0 0 30px rgb(74 184 255 / 18%); }
.story-progress { display:flex; gap:7px; margin-top:8px; }
.story-progress span { width:7px; height:7px; border-radius:999px; background:rgb(255 255 255 / 25%); transition:width .35s ease,background .35s ease; }
.story-progress span.is-active { width:25px; background:#54c5ff; }
.story-description { position:relative; z-index:1; max-width:470px; margin:24px 0 0; color:#c8d7ee; font-size:13px; line-height:1.75; }
.story-chips { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.story-chips span { padding:7px 10px; border:1px solid rgb(255 255 255 / 13%); border-radius:999px; color:#dce9fb; background:rgb(255 255 255 / 7%); font-size:10px; font-weight:750; letter-spacing:.035em; }
.network-visual { position:relative; z-index:1; width:180px; height:230px; justify-self:end; }
.network-visual::before,.network-visual::after { content:""; position:absolute; left:50%; top:50%; border:1px solid rgb(126 213 255 / 22%); border-radius:50%; transform:translate(-50%,-50%); }
.network-visual::before { width:150px; height:150px; }
.network-visual::after { width:100px; height:100px; }
.network-core,.network-node { position:absolute; display:block; border-radius:50%; }
.network-core { left:50%; top:50%; width:48px; height:48px; border:9px solid rgb(126 213 255 / 22%); background:#54c5ff; box-shadow:0 0 34px rgb(84 197 255 / 42%); transform:translate(-50%,-50%); }
.network-node { width:14px; height:14px; border:3px solid #184f9f; background:#dff5ff; box-shadow:0 0 0 5px rgb(126 213 255 / 10%); }
.network-node--one { left:12px; top:45px; }.network-node--two { right:5px; top:74px; }.network-node--three { left:38px; bottom:26px; }
.network-visual i,.network-visual b,.network-visual em { position:absolute; z-index:-1; display:block; width:2px; height:92px; background:linear-gradient(#54c5ff,transparent); transform-origin:bottom; }
.network-visual i { left:47px; top:50px; transform:rotate(-54deg); }.network-visual b { right:48px; top:68px; transform:rotate(48deg); }.network-visual em { left:66px; bottom:48px; transform:rotate(28deg); }
.story-footer { margin:0; color:#4e6790; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.form-panel { position:relative; display:flex; min-width:0; flex-direction:column; align-items:center; justify-content:center; padding:70px clamp(34px,6vw,100px) 34px; background:#fff; }
.signup-top { position:absolute; top:42px; right:clamp(34px,5vw,72px); font-size:14px; font-weight:700; }
.form-content { width:min(100%,470px); margin:auto 0; }
.form-header { margin-bottom:34px; text-align:center; }
.form-header h1 { margin:0 0 10px; color:#101c30; font-size:clamp(30px,3vw,40px); line-height:1.2; letter-spacing:-.045em; }
.form-header p { margin:0; color:#607087; font-size:14px; }
.field-group { margin-bottom:20px; }
.field-group label { display:block; margin-bottom:8px; color:#24364f; font-size:13px; font-weight:700; }
.field-label-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.field-label-row a { margin-bottom:8px; font-size:12px; font-weight:700; }
.field-group input { width:100%; min-width:0; height:56px; padding:0 16px; border:1.5px solid #b9c5d5; border-radius:12px; color:#14253b; background:#fff; font-size:15px; transition:border-color .15s,box-shadow .15s; }
.field-group input:focus { outline:none; border-color:#2457d6; box-shadow:0 0 0 4px rgb(36 87 214 / 10%); }
.field-group input[aria-invalid="true"] { border-color:#c24f4f; }
.password-field { position:relative; }
.password-field:has(.password-toggle:not([hidden])) input { padding-right:54px; }
.password-toggle { position:absolute; top:7px; right:7px; width:42px; height:42px; padding:10px; border:0; border-radius:8px; color:#6d7d93; background:transparent; }
.password-toggle[hidden] { display:none; }
.password-toggle:hover { color:#2457d6; background:#edf3ff; }
.password-toggle svg { display:block; width:22px; height:22px; stroke:currentColor; stroke-width:1.6; }
.eye-slash { display:none; }
.password-toggle[aria-pressed="true"] .eye-slash { display:block; }
.signin-button,.google-button { display:flex; width:100%; min-height:56px; align-items:center; justify-content:center; gap:11px; border-radius:12px; font-size:14px; font-weight:750; }
.signin-button { border:1px solid #2457d6; color:white; background:#2457d6; box-shadow:0 8px 18px rgb(36 87 214 / 18%); transition:background .18s,transform .18s; }
.signin-button:hover { background:#173f9e; transform:translateY(-1px); }
.signin-button:active { transform:none; }
.google-button { border:1px solid #ccd5e1; color:#26364d; background:#f7f9fc; }
.google-button:hover { border-color:#9eacbf; background:#eef2f7; }
.google-button img { width:20px; height:auto; }
.login-divider { display:flex; align-items:center; gap:14px; margin:24px 0; color:#7a8799; font-size:12px; }
.login-divider::before,.login-divider::after { content:""; flex:1; height:1px; background:#dce3ec; }
.legal-footer { display:flex; width:min(100%,600px); align-items:center; justify-content:space-between; gap:18px; margin-top:auto; padding-top:34px; color:#718096; font-size:11px; }
.legal-cobrand { display:block; width:160px; height:auto; }
.legal-footer nav { display:flex; flex-wrap:wrap; gap:18px; }
.legal-footer a { color:#536780; text-decoration:underline; text-underline-offset:3px; }
.login-errors,.login-message { margin-bottom:22px; padding:12px 15px; border-radius:10px; color:#334f77; background:#f0f5fd; font-size:12px; line-height:1.7; }
.login-errors { color:#a03838; border:1px solid #f2d3d0; background:#fff2f1; }
.errorlist { margin:8px 0 0; padding:0; color:#a03838; font-size:12px; line-height:1.6; list-style:none; }
.login-errors .errorlist { margin:0; }
@media (max-width:1100px) { .login-layout { grid-template-columns:minmax(430px,.95fr) minmax(470px,1.05fr); } .story-panel { padding:32px; } .story-copy { grid-template-columns:minmax(0,1fr) 130px; gap:18px; padding:34px; } .network-visual { width:130px; transform:scale(.8); transform-origin:center right; } .story-lines p { font-size:clamp(26px,3.2vw,36px); } .form-panel { padding-inline:48px; } }
@media (max-width:820px) { .login-layout { display:block; } .story-panel { min-height:390px; padding:24px; } .brand img { width:170px; } .story-copy { display:block; width:100%; margin:30px 0 18px; padding:25px 26px; border-radius:22px; } .network-visual { display:none; } .story-kicker { margin-bottom:14px; } .story-lines { height:42px; } .story-lines p { font-size:clamp(23px,7vw,30px); } .story-description { margin-top:14px; font-size:12px; } .story-chips { margin-top:16px; } .story-footer { display:none; } .form-panel { min-height:calc(100svh - 390px); padding:78px 24px 24px; } .signup-top { top:28px; right:24px; } .form-content { width:min(100%,470px); } .legal-footer { margin-top:52px; } .field-group input { font-size:16px; } }
@media (max-width:480px) { .story-panel { min-height:365px; } .story-copy { padding:22px; } .story-chips span:nth-child(3) { display:none; } .form-panel { min-height:calc(100svh - 365px); } .form-header { text-align:left; } .legal-footer { align-items:flex-start; flex-direction:column; } .legal-cobrand { width:145px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } .story-lines p { display:none; } .story-lines p:first-child { display:flex; color:#7ed5ff; opacity:1; } }