.vp-login-page--reference {
 --login-unit:clamp(.8px,min(.0631vw,.1008svh),1px);
 --brand:#3185e9;
 --brand-hover:#4294f4;
 --login-accent:#45c6ff;
 --login-focus:#9bc7ef;
 position:relative;
 isolation:isolate;
 grid-template-columns:minmax(0,48fr) minmax(0,52fr);
 background:#07131f url('/static/img/login-workspace.webp') center / cover no-repeat;
}
.vp-login-page--reference .vp-login-identity {
 display:flex;
 align-items:center;
 min-width:0;
 padding:calc(160 * var(--login-unit)) 3vw calc(100 * var(--login-unit)) 6.7vw;
 background:transparent;
 overflow:visible;
}
.vp-login-page--reference .vp-login-identity::after { display:none; }
.vp-login-page--reference .vp-login-brand {
 position:absolute;
 left:4.75vw;
 top:5.45vh;
 gap:calc(18 * var(--login-unit));
 white-space:nowrap;
}
.vp-login-page--reference .vp-login-brand img { width:calc(42 * var(--login-unit));filter:none; }
.vp-login-page--reference .vp-login-brand>span { font-size:calc(26 * var(--login-unit));letter-spacing:-.65px; }
.vp-login-page--reference .vp-login-guide { width:100%;max-width:520px; }
.vp-login-page--reference .vp-login-guide-label {
 position:relative;
 top:9px;
 color:#45c6ff;
 font-size:calc(14 * var(--login-unit));
 font-weight:400;
 letter-spacing:.12em;
}
.vp-login-page--reference .vp-login-guide h2 {
 margin-top:14px;
 font-size:calc(58 * var(--login-unit));
 line-height:1.1;
 font-weight:750;
 letter-spacing:-1.1px;
}
.vp-login-page--reference .vp-login-guide h2>span { display:block; }
.vp-login-reference-accent {
 background:linear-gradient(100deg,#69c9f6,#4c9bf2);
 color:#67bdf4;
 background-clip:text;
 -webkit-text-fill-color:transparent;
}
.vp-login-page--reference .vp-login-guide-intro {
 max-width:calc(430 * var(--login-unit));
 margin-top:18px;
 color:#c4d2e4;
 font-size:calc(20 * var(--login-unit));
 line-height:1.44;
}
.vp-login-reference-benefits {
 display:grid;
 gap:calc(28 * var(--login-unit));
 margin-top:calc(46 * var(--login-unit));
 padding:0;
 list-style:none;
}
.vp-login-reference-benefits li { display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:calc(31 * var(--login-unit)); }
.vp-login-reference-icon {
 display:grid;
 place-items:center;
 width:calc(68 * var(--login-unit));
 height:calc(68 * var(--login-unit));
 border:1px solid #264d76;
 border-radius:11px;
 background:linear-gradient(130deg,#11273fe0,#182d45c0);
 color:#a0d7ff;
 box-shadow:inset 0 1px 0 #91caff0a;
}
.vp-login-reference-icon .ic { width:calc(34 * var(--login-unit));height:calc(34 * var(--login-unit));filter:drop-shadow(0 2px 6px #288aff30); }
.vp-login-reference-benefits strong { display:block;color:#f4f6fb;font-size:max(14px,calc(18 * var(--login-unit)));line-height:1.4;font-weight:600; }
.vp-login-reference-benefits p { max-width:calc(335 * var(--login-unit));margin-top:4px;color:#c0d0e6;font-size:max(13px,calc(16 * var(--login-unit)));line-height:1.5; }
.vp-login-reference-benefits li:first-child p { max-width:calc(280 * var(--login-unit)); }
.vp-login-reference-benefits li:nth-child(2) p { max-width:calc(310 * var(--login-unit)); }
.vp-login-reference-benefits li:nth-child(-n+2) .vp-login-reference-icon { position:relative;top:-6px; }
.vp-login-page--reference .vp-login-guide { top:-8px; }
.vp-login-page--reference .vp-login-main {
 position:static;
 min-height:100vh;
 justify-content:flex-start;
 padding:calc(40 * var(--login-unit)) 5vw 0 4.85vw;
 border:0;
 background:transparent;
}
.vp-login-page--reference .vp-login-content {
 max-width:500px;
 width:min(100%,calc(500 * var(--login-unit)));
 padding:calc(52 * var(--login-unit)) calc(54 * var(--login-unit)) calc(30 * var(--login-unit));
 border:1px solid #4f7fa8;
 border-radius:22px;
 background:linear-gradient(140deg,#33567f85,#081724b8 36%,#0a1a2bb8);
 box-shadow:inset 1px 1px 0 #c2e1ff25,0 24px 70px #020c1840;
 backdrop-filter:blur(16px);
}
.vp-login-page--reference .vp-login-eyebrow { margin-bottom:12px;color:#cad8e9;font-size:max(12px,calc(14 * var(--login-unit)));line-height:1.5; }
.vp-login-page--reference .vp-login-heading h1 { font-size:max(26px,calc(34 * var(--login-unit)));line-height:1.18;letter-spacing:-.7px; }
.vp-login-page--reference .vp-login-heading p { margin-top:10px;color:#c5d2e5;font-size:max(14px,calc(17 * var(--login-unit)));line-height:1.5; }
.vp-login-page--reference .vp-login-form { margin-top:calc(32 * var(--login-unit));gap:calc(24 * var(--login-unit)); }
.vp-login-page--reference .vp-login-field { gap:8px; }
.vp-login-page--reference .vp-login-field+.vp-login-field { margin-top:2px; }
.vp-login-page--reference .vp-login-field>label { font-size:14px;line-height:1.5;color:#f4f6fb; }
.vp-login-page--reference .vp-login-form .input {
 height:max(44px,calc(54 * var(--login-unit)));
 padding-left:calc(58 * var(--login-unit));
 border:1px solid #537693;
 border-radius:9px;
 background:#09182750;
 color:#f4f6fb;
 font-size:14px;
 box-shadow:inset 0 1px 4px #0002;
}
.vp-login-page--reference .vp-login-form .input::placeholder { color:#738da8;opacity:1; }
.vp-login-page--reference .vp-login-form .input:focus { border-color:#96c4ea;box-shadow:0 0 0 2px #88b9ec12; }
.vp-login-page--reference .vp-login-form .input:autofill { box-shadow:0 0 0 100px #102237 inset; }
.vp-login-page--reference .vp-login-input-icon { left:18px;color:#bdd9f5; }
.vp-login-page--reference .vp-login-input-icon .ic { width:calc(24 * var(--login-unit));height:calc(24 * var(--login-unit));stroke-width:1.6; }
.vp-login-page--reference .vp-login-password-toggle { top:50%;right:10px;transform:translateY(-50%);color:#bfd8ef; }
.vp-login-page--reference .vp-login-password-toggle .ic { width:23px;height:23px; }
.vp-login-page--reference .vp-login-options { gap:12px;font-size:14px; }
.vp-login-page--reference .vp-login-remember { gap:12px;color:#f1f3f8; }
.vp-login-page--reference .vp-login-remember input { appearance:none;display:grid;place-items:center;width:max(18px,calc(22 * var(--login-unit)));height:max(18px,calc(22 * var(--login-unit)));border:1px solid #6382a1;border-radius:4px;background:#10273b; }
.vp-login-page--reference .vp-login-remember input:checked { border-color:#5aafff;background:linear-gradient(135deg,#51a1f1,#2878d9);box-shadow:inset 0 1px 0 #ffffff30; }
.vp-login-page--reference .vp-login-remember input:checked::after { content:"";width:12px;height:7px;margin-top:-3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg); }
.vp-login-page--reference .vp-login-submit {
 height:max(48px,calc(60 * var(--login-unit)));
 margin-top:2px;
 padding:0 24px;
 border:1px solid #65aeff;
 border-radius:9px;
 background:linear-gradient(115deg,#3188e8,#2e7ee0);
 color:#fff;
 font-size:max(16px,calc(19 * var(--login-unit)));
 font-weight:500;
}
.vp-login-page--reference .vp-login-submit:hover { background:linear-gradient(115deg,#4199f8,#388cf1);box-shadow:0 7px 24px #2183ef28; }
.vp-login-page--reference .vp-login-arrow { font-size:32px; }
.vp-login-page--reference .vp-login-foot { gap:0;margin-top:calc(36 * var(--login-unit));padding-top:22px;border-color:#304b65;font-size:14px; }
.vp-login-page--reference .vp-login-foot nav { gap:20px; }
.vp-login-page--reference .vp-login-foot nav a+a { padding-left:20px;border-color:#40607d; }
.vp-login-page--reference .vp-login-language { top:4.65vh;right:4.75vw;gap:12px;padding:8px 14px;border-color:#224564;border-radius:7px;background:#07162570;font-size:13px; }
.vp-login-page--reference .vp-login-language .ic { width:19px;height:19px; }
.vp-login-page--reference .vp-login-language select { min-width:89px;font-size:13px;line-height:22px; }
.vp-login-page--reference .vp-login-language-chevron { right:12px; }
@media(max-width:1350px) {
 .vp-login-page--reference .vp-login-options { font-size:12px; }
 .vp-login-page--reference .vp-login-remember { gap:8px; }
 .vp-login-page--reference .vp-login-remember input { width:19px;height:19px; }
}
@media(max-width:1100px) {
 .vp-login-page--reference { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .vp-login-page--reference .vp-login-identity { padding:150px 30px 80px 5vw; }
 .vp-login-page--reference .vp-login-main { padding:90px 4vw 45px 0; }
 .vp-login-page--reference .vp-login-content { width:100%;padding:36px 28px 28px; }
 .vp-login-page--reference .vp-login-guide h2 { font-size:42px; }
 .vp-login-reference-benefits li { gap:18px; }
 .vp-login-reference-benefits strong { font-size:14px; }
 .vp-login-reference-benefits p { font-size:13px; }
}
@media(max-width:760px) {
 .vp-login-page--reference { grid-template-columns:minmax(0,460px);justify-content:center;padding:110px 20px 32px;background-position:62% center; }
 .vp-login-page--reference .vp-login-identity { display:contents; }
 .vp-login-page--reference .vp-login-guide { display:none; }
 .vp-login-page--reference .vp-login-brand { left:24px;top:28px;gap:10px; }
 .vp-login-page--reference .vp-login-brand img { width:32px; }
 .vp-login-page--reference .vp-login-brand>span { font-size:18px;letter-spacing:-.5px; }
 .vp-login-page--reference .vp-login-main { min-height:calc(100svh - 142px);padding:0;justify-content:center; }
 .vp-login-page--reference .vp-login-content { padding:32px 24px 26px;border-radius:18px; }
 .vp-login-page--reference .vp-login-heading h1 { white-space:normal;font-size:27px; }
 .vp-login-page--reference .vp-login-language { top:26px;right:24px;gap:7px;padding:5px 8px; }
 .vp-login-page--reference .vp-login-language select { min-width:74px;font-size:12px; }
 .vp-login-page--reference .vp-login-language .ic { width:16px;height:16px; }
 .vp-login-page--reference .vp-login-foot { font-size:12px; }
}
@media(max-height:800px) and (min-width:761px) {
 .vp-login-page--reference .vp-login-identity { padding-top:120px;padding-bottom:45px; }
 .vp-login-page--reference .vp-login-main { padding-top:70px;padding-bottom:25px; }
 .vp-login-reference-benefits { margin-top:28px;gap:24px; }
 .vp-login-page--reference .vp-login-content { padding-top:32px;padding-bottom:24px; }
 .vp-login-page--reference .vp-login-form { margin-top:24px;gap:18px; }
 .vp-login-page--reference .vp-login-foot { margin-top:24px;padding-top:18px; }
}

/* Size by available height as well as width; keep wide-screen desk framing. */
@media(min-width:761px) and (min-aspect-ratio:19/10) {
 .vp-login-page--reference { background-image:url('/static/img/login-workspace-wide-20261028.webp');background-position:center bottom; }
}