/* Sign in at /login (design/onward-redesign/screens/Login.dc.html), on top of base.css. Values are the design's. */
.login{min-height:100vh;display:flex;flex-wrap:wrap}
[hidden]{display:none !important}

/* Maya's side */
.side{flex:1 1 560px;min-height:100vh;position:relative;overflow:hidden;background:#0E1018;color:#FFFFFF;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:40px 48px 48px}
.glow{position:absolute;border-radius:50%}
.glow-a{width:760px;height:760px;left:-220px;top:-260px;background:radial-gradient(circle,rgba(34,166,153,0.32),transparent 62%)}
.glow-b{width:700px;height:700px;right:-260px;bottom:-280px;background:radial-gradient(circle,rgba(75,69,214,0.36),transparent 62%)}
.side-brand{position:relative;align-self:flex-start;display:flex;align-items:center;gap:12px;color:#FFFFFF;text-decoration:none;font-weight:700;font-size:22px;letter-spacing:-0.02em}
.side-brand:hover{color:#FFFFFF}
.side-brand>span{width:40px;height:40px;border-radius:12px;background:#FFFFFF;display:flex;align-items:center;justify-content:center}
.side-mid{position:relative;display:flex;flex-direction:column;gap:22px}
.side-stage{position:relative;width:min(560px,100%);aspect-ratio:16/9}
.side-stage>img:first-child,.side-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s ease}
.side-stage video{opacity:0}
.side-stage.live video{opacity:1}
.side-stage.done>img:first-child,.side-stage.done video{opacity:0}
.side-cheer{position:absolute;left:50%;bottom:0;height:120%;width:auto;transform:translateX(-50%);animation:pop .5s cubic-bezier(.22,1,.36,1) both}
.side-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,0.1);font-size:15px}
.side-pill i{width:9px;height:9px;border-radius:50%;background:#22A699;box-shadow:0 0 0 3px rgba(34,166,153,0.3)}
.side h1{margin:0;font-size:clamp(44px,4.6vw,68px);line-height:0.98;font-weight:800;letter-spacing:-0.045em;text-wrap:balance;max-width:620px;animation:rise .7s cubic-bezier(.22,1,.36,1) both}
.side-mid>p{margin:0;font-size:21px;line-height:1.45;color:rgba(255,255,255,0.72);max-width:520px}
.side-foot{position:relative;display:flex;align-items:center;gap:14px;font-size:16px;color:rgba(255,255,255,0.6)}
.side-foot img{display:block}

/* the form side */
/* overflow hidden: the step's slide-in starts 40px to the right, wider than the phone padding; without the clip a phone widens its layout
   viewport by that overflow during the first half second and stays zoomed out (seen at 320 to 430px, 2026-10-05) */
.pane{flex:1 1 520px;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 24px;outline:none;overflow:hidden}
.box{width:100%;max-width:480px}
.step{display:flex;flex-direction:column;gap:28px;animation:push .5s cubic-bezier(.22,1,.36,1) both}
.step-center{align-items:center;text-align:center}
.step h2{margin:0;font-size:clamp(40px,4vw,56px);line-height:1;font-weight:800;letter-spacing:-0.045em;outline:none}
.step>p,.head p{margin:0;font-size:20px;line-height:1.45;color:#3D4250}
.step strong{color:#1B1D26}
.head{display:flex;flex-direction:column;gap:10px}
.tabs{display:flex;gap:6px;padding:6px;border-radius:999px;background:#E6E8EE}
.seg{flex:1;min-height:52px;border:0;border-radius:999px;font-size:17px;font-weight:700;cursor:pointer;background:transparent;color:#626977;transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.seg[aria-selected="true"]{background:#FFFFFF;color:#1B1D26;box-shadow:0 4px 14px -6px rgba(14,16,24,0.35)}
.seg:focus-visible,.pill:has(input:focus-visible),.linkb:focus-visible{outline:3px solid rgba(0,113,227,.5);outline-offset:3px}
form{display:flex;flex-direction:column;gap:8px}
form.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.lab{font-size:17px;font-weight:700;padding:0;margin-top:10px}
.field{width:100%;height:68px;padding:0 20px;border-radius:20px;border:1.5px solid #CDD1DA;background:#FFFFFF;font-size:20px;color:#1B1D26;outline:none;box-shadow:inset 0 2px 4px rgba(14,16,24,.06);transition:border-color .2s ease,box-shadow .2s ease}
.field:focus{border-color:#22A699;box-shadow:0 0 0 4px rgba(34,166,153,.2)}
.field[aria-invalid="true"]{border-color:#E5484D;box-shadow:0 0 0 4px rgba(229,72,77,.14)}
.field-code{font-size:26px;letter-spacing:.2em;font-variant-numeric:tabular-nums}
.err{font-size:17px;color:#C2343A;font-weight:600}
.err:empty{display:none}
.roles{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;display:inline-flex;align-items:center;min-height:52px;padding:0 18px;border-radius:999px;font-size:17px;font-weight:600;cursor:pointer;background:#FFFFFF;color:#1B1D26;border:1.5px solid #CDD1DA;transition:background .2s ease,color .2s ease,border-color .2s ease}
.pill input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pill:has(input:checked){background:#1B1D26;color:#FFFFFF;border-color:#1B1D26}
.key-go,.key-alt,.key-dark{width:100%;border-radius:22px}
.key-go .cap,.key-alt .cap,.key-dark .cap{justify-content:center;gap:14px;min-height:72px;border-radius:22px}
.key-go{background:#0B6E64;margin-top:18px}.key-go .cap{background:#22A699;color:#06302B;font-size:21px;font-weight:800}
.key-alt{background:#CDD1DA}.key-alt .cap{background:#FFFFFF;color:#1B1D26;font-size:20px;font-weight:700}
.key-dark{background:#0E1018}.key-dark .cap{background:#272B37;color:#FFFFFF;font-size:20px;font-weight:700}
#done-cta .cap{font-size:21px;font-weight:800;gap:12px}
.box .key+.key{margin-top:-10px}
.linkb{align-self:flex-start;border:0;background:none;padding:8px 0;font:inherit;font-size:17px;font-weight:700;color:#0066CC;cursor:pointer}
.linkb:hover{color:#004C99}
.step-center .linkb{align-self:center}
.links{display:flex;gap:22px;flex-wrap:wrap}
.or{display:flex;align-items:center;gap:14px;color:#626977;font-size:16px}
.or span{flex:1;height:1px;background:#D9DCE4}
.legal{margin:0;font-size:15px;line-height:1.5;color:#626977}
.env{animation:env 2.4s ease-in-out infinite}
@keyframes env{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.pk{position:relative;width:168px;height:168px;display:flex;align-items:center;justify-content:center}
.ring{position:absolute;inset:0;border-radius:50%;border:3px solid #22A699;animation:ring 1.6s cubic-bezier(.22,1,.36,1) infinite}
.ring2{animation-delay:.5s}
@keyframes ring{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.pk-core{width:132px;height:132px;border-radius:50%;background:#1B1D26;display:flex;align-items:center;justify-content:center}
.offer{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:24px;background:#FFFFFF;box-shadow:0 10px 30px -18px rgba(14,16,24,.35)}
.offer h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-0.02em}
.offer p{margin:0;font-size:17px;line-height:1.45;color:#3D4250}
.offer-keys{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.offer-keys .key{width:auto;flex:1 1 220px}
.done-img{display:block;width:140px;height:auto;animation:pop .5s cubic-bezier(.22,1,.36,1) both}
#step-done{gap:22px}
#step-done h2{font-size:clamp(44px,4.4vw,64px);line-height:0.98;text-wrap:balance}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes push{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* phones: Maya's side shrinks above the form instead of filling a whole screen first */
@media (max-width:700px){
 .side{min-height:auto;padding:20px 20px 24px;gap:18px}
 .side-mid{gap:14px}
 .side-stage{width:min(240px,100%)}
 .side h1{font-size:30px;line-height:1.02}
 .side-mid>p{font-size:16px}
 .side-foot{display:none}
 .pane{min-height:auto;padding:28px 16px 44px}
 .step h2{font-size:34px}
 .tabs .seg{min-height:48px;font-size:16px}
}