@font-face{font-family:Inter;src:url('/_signin/fonts/inter-latin-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url('/_signin/fonts/bebas-neue-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--bg:#0A0A0B;--card:#111113;--text:#F4F2ED;--muted:#a9a69f;--edge:rgba(244,242,237,.1);--field:rgba(244,242,237,.16);--gold:#C9AE78;--hair:rgba(201,174,120,.32);--ease:cubic-bezier(.16,1,.3,1);color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}
body{color:var(--text);font:400 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}
.stub{background:#141416;color:var(--muted);font-size:13px;line-height:1.5;padding:12px 20px;border-bottom:1px solid var(--edge)}
.signin-layout{flex:1;display:flex;flex-direction:column}
.body{flex:1;display:flex;padding:40px 20px calc(40px + env(safe-area-inset-bottom))}
.col{width:100%;max-width:440px;margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.mark{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:40px}
/* the lockup's file is taller than the lockup by the room its entrance needs above it (40.22% of its width): set back by that */
.mark-lockup{display:block;width:216px}.mark-lockup img,.panel-lockup img{display:block;width:100%;height:auto;margin-top:-40.22%;pointer-events:none}
.mark-label{font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--text);padding-left:.32em}
h1{font-size:36px;font-weight:650;letter-spacing:-.025em;line-height:1.1;margin:0 0 12px}
.dim{color:var(--muted);font-size:16px;line-height:1.55;margin:0;text-wrap:balance}
.glass{margin-top:32px;width:100%;padding:24px 20px;border-radius:16px;border:1px solid var(--edge);background:var(--card);display:flex;flex-direction:column;text-align:left}
.label{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.label.gap{margin-top:20px}
.input{color:var(--text);font:inherit;font-size:17px;height:56px;margin-top:10px;border:1px solid var(--field);border-radius:12px;padding:0 18px;background:var(--bg);width:100%;transition:border-color 160ms ease-out}
.input:focus,.input:focus-visible{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(201,174,120,.2)}
.input-code{font-size:22px;letter-spacing:.3em;font-variant-numeric:tabular-nums}.input-code::placeholder{letter-spacing:.3em}
.input::placeholder{color:#76736d}.input[readonly]{color:var(--muted);border-color:var(--edge)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.err{color:var(--gold);border-left:2px solid #8A6D2F;padding-left:12px;font-size:14px;margin:16px 0 0;line-height:1.55}
.btn{margin-top:20px;height:56px;padding:0 16px;border-radius:12px;border:0;background:var(--gold);color:var(--bg);font:600 16px/1 Inter,system-ui,sans-serif;letter-spacing:-.005em;cursor:pointer;width:100%}
.btn:hover{background:#D8C08E}.btn:disabled{opacity:.45;cursor:default;background:var(--gold)}.btn[aria-busy=true]{opacity:.7}
.other{align-self:center;margin-top:8px;color:var(--gold);font-size:14px;font-weight:500;min-height:44px;display:flex;align-items:center;padding:0 12px;text-decoration:none}
.other:hover{text-decoration:underline;text-underline-offset:4px}
.legal{color:var(--muted);font-size:13px;line-height:1.7;margin:24px 0 0;max-width:340px}
.legal a{color:var(--gold);font-weight:500;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px;display:inline-block;padding:10px 0;margin:-10px 0}
.legal a:hover{text-decoration-color:var(--gold)}
.signin-panel{display:none}
/* The preview's stub bar (about 45px) sits above the layout: the cover fits the screen under it (TOOLBOX job partners-login-0801). */
.stub~.signin-layout{--bar:45px}
@media(min-width:1024px){
.signin-layout{flex-direction:row}
.body{padding:48px 40px}.mark{margin-bottom:44px}.mark-label{display:none}.mark-lockup{width:232px}h1{font-size:40px}.glass{padding:28px 24px}
.signin-panel{display:block;flex:none;padding:24px 24px 24px 0;width:50vw}
.panel-cover{position:relative;height:calc(100svh - 48px - var(--bar,0px));min-height:560px;overflow:hidden;background:var(--bg);border:1px solid var(--hair);container-type:size}
.panel-lockup{position:absolute;left:50%;top:5cqh;width:48cqw;translate:-50% 0;z-index:4}
.duo{position:absolute;left:50%;bottom:0;width:auto;aspect-ratio:768/1376;translate:-50% 0;display:block;user-select:none}
/* www's hub ratio: the shards 96/88 of the figures, 4/88 below the edge, so their dark halo sits where www has it */
.duo--shards{height:89.5cqh;bottom:-3.7cqh;z-index:1}.duo--figures{height:82cqh;z-index:3}
.panel-word{position:absolute;left:0;right:0;top:17cqh;margin:0;z-index:2;text-align:center;font:400 27.5cqw/.8 "Bebas Neue",Inter,sans-serif;letter-spacing:.01em;text-transform:uppercase;color:var(--text);padding-left:.01em}
}
@media(prefers-reduced-motion:no-preference){
.btn{transition:opacity 160ms ease-out,transform 160ms ease-out,background-color 160ms ease-out}.btn:active:not(:disabled){transform:translateY(1px)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes burst{from{opacity:0;transform:scale(.7) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes stand{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.col>*{animation:rise 320ms var(--ease) both}.col>.mark{animation:none}.mark-label{animation:rise 320ms var(--ease) 420ms both}.col>h1{animation-delay:60ms}.col>.dim{animation-delay:110ms}.col>.glass{animation-delay:160ms}.col>.legal{animation-delay:220ms}
.panel-word{animation:rise 500ms var(--ease) 380ms both}
.duo--shards{animation:burst 520ms var(--ease) 300ms both;transform-origin:50% 60%}.duo--figures{animation:stand 700ms cubic-bezier(.22,1,.36,1) 520ms both}
}