:root{color-scheme:light;--ink:#172443;--muted:#717b8e;--gold:#d4a543;--blue:#254fc4;--error:#ac3048;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#faf9f6;color:var(--ink)}button,input{font:inherit}button{cursor:pointer}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}
.login-layout{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);min-height:100svh}.brand-panel{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 37%,#27478588,transparent 55%),#101e3e;color:#f5f2ea;padding:38px 48px 26px;display:flex;flex-direction:column;justify-content:space-between}.brand-panel:before{content:"";position:absolute;z-index:-1;inset:0;opacity:.17;background-image:radial-gradient(#b4c7ee 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(transparent,#000 20%,transparent 85%)}.brand-caption{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:9px;letter-spacing:1.55px;font-weight:600;color:#d4ddec}.brand-dot{width:7px;height:7px;background:#dfb857;border-radius:50%;box-shadow:0 0 16px #d4a54355}.caption-divider{color:#627494;margin:0 2px}.brand-art{position:relative;display:grid;place-items:center;min-height:330px;margin:12px -18px 6px}.logo-wrap{position:relative;z-index:1;display:block;width:min(81%,345px)}.brand-logo{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 20px 24px #0005);z-index:1}.art-cards{position:absolute;width:min(100%,450px);height:100%;color:#89a8df;opacity:.25}.orbit{position:absolute;width:340px;height:340px;border:1px solid #8caae012;border-radius:50%}.orbit-two{width:440px;height:440px;border-style:dashed}.art-star{position:absolute;color:#e9ba59}.star-one{left:10%;top:28%;font-size:29px}.star-two{right:8%;bottom:27%;font-size:32px}.art-label{position:absolute;bottom:-2px;font-size:8px;letter-spacing:1.65px;color:#a5b5d2;display:flex;align-items:center;gap:10px;text-align:center}.art-label>span{width:21px;height:1px;background:#d4a543}.brand-message{margin:26px 0 30px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:700;color:#debb71}.brand-message h2{font-size:clamp(30px,3vw,44px);font-weight:600;letter-spacing:-1.5px;line-height:1.16;margin:16px 0}.brand-message p{font-size:13px;color:#aebdd6;line-height:1.8;margin:0}.brand-topics{display:flex;align-items:center;gap:16px;margin-top:25px;font-size:10px;letter-spacing:.4px;color:#d8e1f2}.brand-topics i{width:3px;height:3px;background:#d4a543;border-radius:50%}.brand-footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff16;padding-top:17px;color:#8093b6;font-size:10px}.brand-footer>span:last-child{font-size:17px;color:#c6aa70}
.form-panel{padding:38px 52px 26px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}.access-label{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:9px;font-weight:600;letter-spacing:1.6px;color:#8a8b91}.access-label>span{width:5px;height:5px;border-radius:50%;background:#4e719e}.form-content{width:100%;max-width:382px;align-self:center;margin:40px 0 44px}.welcome-icon{width:46px;height:46px;display:grid;place-items:center;background:#eeeff3;border:1px solid #e1e4ec;border-radius:13px;margin-bottom:25px;color:#344b7b}.welcome-icon svg{width:23px;height:23px}.form-eyebrow{color:#8e7a4d;font-size:8px;letter-spacing:1.9px;margin-bottom:10px}h1{font-size:clamp(27px,2.8vw,38px);line-height:1.2;letter-spacing:-1.5px;font-weight:650;margin:0 0 14px}h1>span{color:#c39a42}.form-description{font-size:13px;color:var(--muted);line-height:1.8;margin:0 0 30px}.field-group{margin-bottom:20px}.field-group label{display:block;font-size:11px;font-weight:650;margin-bottom:9px}.input-wrap{display:flex;align-items:center;gap:12px;border:1px solid #dddfE6;border-radius:9px;background:#fff;min-height:50px;padding:0 15px;transition:border-color .15s,box-shadow .15s}.input-wrap:focus-within{border-color:#5574bb;box-shadow:0 0 0 3px #254fc410}.input-wrap>svg{flex:none;width:17px;height:17px;color:#8b94a6}.input-wrap input{min-width:0;width:100%;border:0;outline:none;background:transparent;padding:16px 0;color:var(--ink);font-size:12px}.input-wrap input::placeholder{color:#a0a6b3}.input-wrap:has([aria-invalid=true]){border-color:#c54c63;box-shadow:0 0 0 3px #c54c630c}.password-wrap{padding-right:7px}.password-wrap button{border:0;background:transparent;padding:9px;display:grid;place-items:center;border-radius:5px;color:#8b94a6}.password-wrap button:hover{color:#254fc4;background:#f1f4fa}.password-wrap button svg{width:18px;height:18px}.eye-slash{display:none}.password-wrap button[aria-pressed=true] .eye-slash{display:block}.field-error,.caps-lock{display:block;font-size:11px;line-height:1.5;margin-top:7px;color:var(--error)}.caps-lock{color:#9a6c20}.login-message{font-size:12px;line-height:1.7;color:#983047;background:#fbebed;border:1px solid #f0cdd3;padding:12px 14px;border-radius:8px;margin:0 0 20px}.login-message.info{color:#385074;background:#edf1f8;border-color:#d9e2ef}.submit-button{width:100%;display:flex;justify-content:center;align-items:center;gap:18px;min-height:51px;margin-top:26px;border:1px solid #2446a4;border-radius:9px;background:#254fc4;color:#fff;font-size:12px;font-weight:600;box-shadow:0 5px 12px #234eb515;transition:background .15s}.submit-button:hover{background:#1d40a5}.submit-button:disabled{cursor:wait;opacity:.8}.submit-button svg{width:17px;height:17px}.button-spinner{display:none;width:16px;height:16px;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.submit-button[aria-busy=true] .button-spinner{display:block}.submit-button[aria-busy=true] .button-arrow{display:none}.session-note{display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px;line-height:1.5;color:#9298a4;margin:15px 0 0}.session-note svg{width:13px;height:13px;margin-right:3px;flex:none}.session-note strong{font-weight:600;color:#727e93}.access-help{border-top:1px solid #e7e6e2;margin-top:32px;padding-top:22px;text-align:center;font-size:10px;line-height:1.8;color:#9298a4}.access-help span{font-weight:600;color:#606e88}.form-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:9px;color:#999da6}.form-footer>span:last-child{display:flex;align-items:center;gap:5px}.form-footer svg{width:12px;height:12px}button:focus-visible{outline:3px solid #d4a543;outline-offset:4px}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-height:920px) and (min-width:801px){.brand-panel{padding-top:48px;padding-bottom:32px}.brand-art{min-height:420px}.logo-wrap{width:380px}.brand-message{margin-bottom:50px}.form-panel{padding-top:48px;padding-bottom:32px}}
@media(max-width:1100px){.brand-panel{padding-left:30px;padding-right:30px}.form-panel{padding-left:34px;padding-right:34px}.brand-caption{font-size:8px;letter-spacing:1px}.brand-art{min-height:300px}.brand-message h2{font-size:34px}.art-label{font-size:7px;letter-spacing:1px}}
@media(max-width:800px){.login-layout{grid-template-columns:1fr}.brand-panel{padding:22px 24px 24px;align-items:center}.brand-caption{font-size:8px;justify-content:center}.brand-art{min-height:0;margin:12px 0 0;width:230px}.logo-wrap{width:165px}.art-cards{width:200px}.orbit{width:170px;height:170px}.orbit-two{display:none}.art-star,.art-label,.brand-message,.brand-footer{display:none}.form-panel{padding:28px 30px 22px;min-height:calc(100svh - 225px)}.access-label{justify-content:center;font-size:8px}.form-content{margin:30px 0 40px}.welcome-icon{display:none}h1{font-size:33px}.form-footer{max-width:382px;width:100%;align-self:center}.form-description{margin-bottom:26px}.form-eyebrow{margin-top:0}}
@media(max-width:380px){.form-panel{padding-left:22px;padding-right:22px}h1{font-size:28px}.session-note{font-size:9px}.brand-caption{font-size:7px;gap:7px}.form-footer{font-size:8px}.desktop-break{display:none}}

/* Motion graphics: entrance choreography, idle loops, interaction feedback and exit transition. */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-back:cubic-bezier(.34,1.56,.64,1);--ease-io:cubic-bezier(.76,0,.24,1)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}@keyframes fade{from{opacity:0}}@keyframes drop{from{opacity:0;transform:translateY(-8px)}}@keyframes pop{from{opacity:0;transform:scale(.4) rotate(-40deg)}}@keyframes line-up{from{transform:translateY(110%)}}@keyframes grow-x{from{transform:scaleX(0)}}@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes logo-in{from{opacity:0;transform:translateY(28px) scale(.84);filter:blur(14px) drop-shadow(0 20px 24px #0005)}}@keyframes float{50%{transform:translateY(-9px)}}@keyframes sway-a{50%{transform:rotate(-3deg) translateY(-7px)}}@keyframes sway-b{50%{transform:rotate(3.5deg) translateY(6px)}}@keyframes orbit-in{from{opacity:0;transform:scale(.6)}}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1) rotate(0)}50%{opacity:.4;transform:scale(.7) rotate(45deg)}}@keyframes shine{0%,58%{background-position:150% 0}100%{background-position:-50% 0}}@keyframes grid-drift{to{background-position:0 -52px}}@keyframes breathe{50%{opacity:.55;transform:scale(1.1)}}
@keyframes pulse-gold{from{box-shadow:0 0 0 0 #dfb857aa}to{box-shadow:0 0 0 9px #dfb85700}}@keyframes pulse-blue{from{box-shadow:0 0 0 0 #4e719e88}to{box-shadow:0 0 0 7px #4e719e00}}@keyframes nudge{0%,72%,100%{transform:none}86%{transform:translate(4px,-4px)}}
@keyframes sparkle{0%{opacity:0;transform:translateY(0) scale(.4)}25%{opacity:var(--o,.8)}100%{opacity:0;transform:translateY(-140px) scale(1)}}@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}@keyframes dot-bounce{0%{opacity:0;transform:translateY(-24px)}55%{opacity:1;transform:none}72%{transform:translateY(-7px)}100%{transform:none}}@keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
/* Brand panel */
.brand-panel:before{animation:grid-drift 16s linear infinite}.brand-panel:after{content:"";position:absolute;z-index:-1;left:50%;top:37%;width:640px;height:640px;margin:-320px;border-radius:50%;background:radial-gradient(circle,#3d68c247,transparent 62%);animation:breathe 7s ease-in-out infinite;pointer-events:none}
.brand-caption{animation:drop .8s var(--ease-out) .1s backwards}.brand-dot{animation:pulse-gold 2.4s ease-out 1.2s infinite}
.orbit{animation:orbit-in 1.2s var(--ease-out) .2s backwards,spin 28s linear 1.4s infinite;translate:calc(var(--mx,0)*-8px) calc(var(--my,0)*-6px)}.orbit-two{animation:orbit-in 1.4s var(--ease-out) .3s backwards,spin 90s linear 1.7s infinite reverse;translate:calc(var(--mx,0)*-14px) calc(var(--my,0)*-10px)}
.orbit:before{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#dfb857;box-shadow:0 0 12px 2px #dfb85788}.orbit-two:before{top:auto;bottom:-2px;width:4px;height:4px;margin-left:-2px;background:#9fb9ec;box-shadow:0 0 10px 2px #9fb9ec66}
.art-cards{animation:fade .6s ease .3s backwards;translate:calc(var(--mx,0)*-20px) calc(var(--my,0)*-14px)}.art-cards rect{stroke-dasharray:1;animation:draw 1.6s var(--ease-io) .35s backwards}.art-cards .card-b rect{animation-delay:.55s}
.card-a,.card-b{transform-box:fill-box;transform-origin:center}.card-a{animation:sway-a 9s ease-in-out 2s infinite}.card-b{animation:sway-b 11s ease-in-out 2s infinite}
.logo-wrap{animation:float 6s ease-in-out 1.6s infinite;translate:calc(var(--mx,0)*12px) calc(var(--my,0)*9px)}.brand-logo{animation:logo-in 1.2s var(--ease-out) .45s backwards}
.logo-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 42%,#fff7 50%,transparent 58%) 150% 0/250% 100% no-repeat;-webkit-mask:url(/assets/cop-cards-logo.png) center/contain no-repeat;mask:url(/assets/cop-cards-logo.png) center/contain no-repeat;mix-blend-mode:overlay;animation:shine 6.5s ease-in-out 2.2s infinite}
.art-star{translate:calc(var(--mx,0)*26px) calc(var(--my,0)*20px)}.star-one{animation:pop .9s var(--ease-back) 1s backwards,twinkle 3.6s ease-in-out 2s infinite}.star-two{animation:pop .9s var(--ease-back) 1.15s backwards,twinkle 4.4s ease-in-out 2.6s infinite}
.art-label{animation:fade .8s ease 1.25s backwards}.art-label>span{transform-origin:right;animation:grow-x .8s var(--ease-out) 1.3s backwards}
.sparkle{position:absolute;left:var(--x);bottom:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#f3cf7a;box-shadow:0 0 6px 1px #e9ba5999;opacity:0;pointer-events:none;animation:sparkle var(--t) linear var(--d) infinite}
.brand-message .eyebrow{display:inline-block;animation:rise .8s var(--ease-out) .7s backwards}.brand-message h2 .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}.brand-message h2 .line>span{display:block;animation:line-up 1s var(--ease-out) .8s backwards}.brand-message h2 .line+.line>span{animation-delay:.92s}
.brand-message p{animation:rise .9s var(--ease-out) 1.05s backwards}.brand-topics>*{animation:rise .7s var(--ease-out) backwards}.brand-topics>:nth-child(1){animation-delay:1.15s}.brand-topics>:nth-child(2){animation-delay:1.2s}.brand-topics>:nth-child(3){animation-delay:1.25s}.brand-topics>:nth-child(4){animation-delay:1.3s}.brand-topics>:nth-child(5){animation-delay:1.35s}
.brand-footer{position:relative;border-top:0;animation:fade .8s ease 1.4s backwards}.brand-footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#ffffff16;transform-origin:left;animation:grow-x 1.4s var(--ease-io) 1.3s backwards}.brand-footer>span:last-child{display:inline-block;animation:nudge 3.2s var(--ease-out) 2.4s infinite}
/* Form panel */
.access-label{animation:drop .8s var(--ease-out) .2s backwards}.access-label>span{animation:pulse-blue 2.4s ease-out 1.4s infinite}
.welcome-icon{animation:pop .8s var(--ease-back) .35s backwards;transition:color .3s,background .3s,border-color .3s}.welcome-icon .shackle{transform-box:fill-box;transform-origin:100% 100%;transition:transform .55s var(--ease-back)}
.form-eyebrow{animation:rise .7s var(--ease-out) .45s backwards}h1{animation:rise .8s var(--ease-out) .52s backwards}h1>span{display:inline-block;animation:dot-bounce 1s var(--ease-out) 1.1s backwards}.form-description{animation:rise .8s var(--ease-out) .6s backwards}
#login-form>:nth-child(1){animation:rise .8s var(--ease-out) .68s backwards}#login-form>:nth-child(2){animation:rise .8s var(--ease-out) .76s backwards}.submit-button{animation:rise .8s var(--ease-out) .84s backwards}.session-note{animation:fade .8s ease .95s backwards}.access-help{animation:fade .8s ease 1.05s backwards}.form-footer{animation:fade .8s ease 1.15s backwards}
.input-wrap{position:relative}.input-wrap:after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,#254fc4,#d4a543);transform:scaleX(0);transition:transform .5s var(--ease-out);pointer-events:none}.input-wrap:focus-within:after{transform:scaleX(1)}.input-wrap:has([aria-invalid=true]):after{background:#c54c63}
.input-wrap>svg{transition:color .2s,transform .35s var(--ease-back)}.input-wrap:focus-within>svg{color:#254fc4;transform:scale(1.12)}.input-wrap.shake{animation:shake .42s ease}
.field-error:not([hidden]),.caps-lock:not([hidden]),.login-message:not([hidden]){animation:drop .35s var(--ease-out)}
.submit-button{position:relative;overflow:hidden;isolation:isolate;transition:background .15s,transform .2s var(--ease-out),box-shadow .3s}.submit-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 22px #234eb530}.submit-button:active:not(:disabled){transform:scale(.985)}
.submit-button:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffff38 50%,transparent 70%);transform:translateX(-120%)}.submit-button:hover:not(:disabled):before{transform:translateX(120%);transition:transform .9s var(--ease-out)}
.button-arrow{transition:transform .3s var(--ease-out)}.submit-button:hover .button-arrow{transform:translateX(4px)}.ripple{position:absolute;z-index:-1;width:var(--r);height:var(--r);border-radius:50%;background:#ffffff40;transform:translate(-50%,-50%) scale(0);animation:ripple .65s var(--ease-out) forwards;pointer-events:none}
.button-check{display:none}.submit-button[data-state=success]{background:#1d40a5;opacity:1}.submit-button[data-state=success] .button-check{display:block;stroke-width:2.2;stroke-dasharray:1;animation:draw .45s var(--ease-out) backwards}.submit-button[data-state=success] .button-arrow,.submit-button[data-state=success] .button-spinner{display:none}
body.is-success .welcome-icon{color:#a8802f;background:#fbf4e4;border-color:#efdfb9}body.is-success .shackle{transform:translateY(-2.5px) rotate(22deg)}
/* Exit: the navy brand panel sweeps over the form before the redirect. */
.exit-curtain{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,#27478588,transparent 60%),#101e3e;visibility:hidden;opacity:0;clip-path:inset(0 54% 0 0);pointer-events:none}.exit-curtain img{width:min(46vw,260px);height:auto;filter:drop-shadow(0 20px 24px #0005);opacity:0}
body.is-leaving .exit-curtain{visibility:visible;opacity:1;clip-path:inset(0);transition:clip-path .75s var(--ease-io),opacity .3s ease}body.is-leaving .exit-curtain img{opacity:1;animation:logo-in .7s var(--ease-out) .3s backwards}
@media(max-width:800px){.exit-curtain{clip-path:inset(0 0 100% 0)}.sparkle{display:none}.brand-panel:after{width:380px;height:380px;margin:-190px;top:45%}}