/* Login-only layout; the animated phone and card match the homepage. */
main.op-auth-main{max-width:1000px;width:100%;min-height:0;padding:32px 16px 24px}
.op-auth-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:stretch}
.op-auth-form{min-width:0}
.op-auth-form .auth-card{width:100%;max-width:none;margin:0;height:100%}
.op-auth-layout .op-app-banner--animated{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;width:100%;max-width:none;min-width:0;margin:0;padding:24px 28px;background:#e3f7f8;border:1px solid #a7e1e5;border-radius:24px;color:#07112d;font-family:Manrope,Arial,sans-serif}
.op-auth-layout .op-app-banner--animated>div{flex:none;width:100%;min-width:0}
.op-auth-layout .op-app-banner--animated h2{font:700 26px/1.2 Manrope,Arial,sans-serif;margin:0 0 10px;letter-spacing:normal}
.op-auth-layout .op-app-banner--animated p{font:400 16px/1.45 Manrope,Arial,sans-serif;margin:0}
.op-auth-layout .op-app-banner--animated .op-app-button{align-self:center;width:100%;margin:0;margin-top:auto;padding:13px 14px;font:600 14px/1.3 Manrope,Arial,sans-serif;border-radius:999px}
.op-auth-layout .op-app-banner--animated>.op-pocket-demo{display:flex;flex:1;min-height:196px;align-items:center;justify-content:center;position:relative;width:100%;margin:0;isolation:isolate}
.op-pocket-demo:before{content:"";position:absolute;width:180px;height:120px;background:radial-gradient(ellipse,rgba(18,183,191,.16),transparent 70%);z-index:-1}
.op-auth-layout .op-pocket-demo div{min-width:0;flex:none}
.op-pocket-phone{box-sizing:border-box;position:relative;width:78px;height:140px;border:3px solid #17233a;border-radius:16px;padding:4px;background:#17233a;box-shadow:0 9px 16px -7px #26495250;transform:scale(1.35)}
.op-pocket-screen{position:relative;height:100%;overflow:hidden;border-radius:10px;background:linear-gradient(155deg,#fff 12%,#d5f1f1 64%,#b9dfe5);font-family:Arial,sans-serif}
.op-pocket-notch{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:24px;height:5px;border-radius:6px;background:#17233a}
.op-pocket-time{position:absolute;top:12px;left:0;width:100%;text-align:center;color:#35445a;font-size:8px;font-weight:700}
.op-pocket-app{position:absolute;top:32px;left:calc(50% - 13px);width:26px;animation:op-pocket-arrive 8s ease-in-out infinite;text-align:center}
.op-auth-layout .op-pocket-app img{display:block;width:26px;height:26px;min-width:0;max-width:26px;margin:0;object-fit:contain;border-radius:7px;box-shadow:0 2px 4px #1834491c}
.op-pocket-app span{display:block;margin-top:4px;font-size:6px;color:#152138;font-weight:700}
.op-pocket-ring{position:absolute;top:34px;left:calc(50% - 11px);width:22px;height:22px;box-sizing:border-box;border:2px solid #b3d5da;border-top-color:#099aa5;border-radius:50%;animation:op-pocket-load 8s linear infinite}
.op-pocket-check{position:absolute;top:28px;left:calc(50% + 8px);width:10px;height:10px;border-radius:50%;background:#078e91;color:#fff;text-align:center;font:700 7px/10px Arial;animation:op-pocket-arrive 8s ease-in-out infinite}
.op-pocket-tiles{position:absolute;top:83px;left:10px;right:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.op-pocket-tiles i{display:block;aspect-ratio:1;border-radius:4px;background:#fff9;border:1px solid #fff}
.op-pocket-home{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);height:2px;width:24px;background:#17233a;border-radius:4px;opacity:.65}
@keyframes op-pocket-arrive{0%,24%{opacity:0;transform:translateY(4px) scale(.8)}36%,87%{opacity:1;transform:translateY(0) scale(1)}96%,100%{opacity:0;transform:translateY(0) scale(.95)}}
@keyframes op-pocket-load{0%{opacity:0;transform:rotate(0)}5%,23%{opacity:1}30%,100%{opacity:0;transform:rotate(720deg)}}
@media(max-width:799px){main.op-auth-main{max-width:512px;padding:24px 16px}.op-auth-layout{grid-template-columns:minmax(0,1fr);gap:16px}.op-auth-layout .op-app-banner--animated{flex-wrap:nowrap}.op-auth-layout .op-app-banner--animated>div{flex-basis:auto}}
@media(prefers-reduced-motion:reduce){.op-pocket-app,.op-pocket-check{animation:none;opacity:1;transform:none}.op-pocket-ring{animation:none;display:none}}