:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1c1e21;background:#f0f2f5;font-synthesis:none;text-rendering:optimizeLegibility}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;background:radial-gradient(ellipse at 50% 30%,#fff 0,#f0f2f5 65%);display:flex;flex-direction:column}
.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,68px);background:#fff;border-bottom:1px solid #e4e6eb}
.brand{display:flex;align-items:center;gap:10px;color:#20252d;font-size:18px;font-weight:750;text-decoration:none;letter-spacing:-.04em}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#213c2e;color:#b9f36b;font-size:17px}
.exercise-tag{display:flex;align-items:center;gap:8px;color:#748074;font-size:10px;font-weight:700;letter-spacing:.12em}
.exercise-tag span{width:8px;height:8px;border-radius:50%;background:#7dac55;box-shadow:0 0 0 4px #7dac551b}
.page-shell{width:min(100% - 32px,950px);margin:auto;padding:48px 0 62px;display:grid;grid-template-columns:minmax(0,1fr) 396px;align-items:center;gap:50px}
.intro{max-width:470px}
.eyebrow{margin:0 0 13px;color:#698c4e;font-size:11px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.intro h1{margin:0;color:#202b24;font-size:clamp(32px,4.5vw,52px);line-height:1.07;letter-spacing:-.055em}
.intro>p:last-child{max-width:430px;margin:19px 0 0;color:#626c64;font-size:17px;line-height:1.65}
.intro strong{color:#34462e}
.login-card{width:100%;padding:27px 25px 0;border:1px solid #e2e5e9;border-radius:13px;background:#fff;box-shadow:0 10px 30px #26351e13;text-align:center;transition:border-color .3s,box-shadow .3s,transform .3s}
.facebook-wordmark{color:#0866ff;font-size:37px;font-weight:800;letter-spacing:-.07em;line-height:1}
.login-prompt{margin:12px 0 19px;color:#606770;font-size:14px}
#training-login{display:grid;gap:12px}
#training-login input{width:100%;height:54px;padding:0 15px;border:1px solid #ccd0d5;border-radius:8px;background:#fff;color:#1c1e21;font:inherit;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
#training-login input:focus{border-color:#1877f2;box-shadow:0 0 0 3px #1877f225}
#training-login input::placeholder{color:#8a8d91}
.login-button{min-height:50px;border:0;border-radius:8px;background:#1877f2;color:#fff;font-size:18px;font-weight:750;cursor:pointer;transition:background .15s,transform .15s}
.login-button:hover{background:#166fe5}.login-button:active{transform:scale(.99)}
.forgot-link{width:max-content;margin:2px auto 1px;color:#1877f2;font-size:13px;text-decoration:none}.forgot-link:hover{text-decoration:underline}
.login-card-footer{margin:21px -25px 0;padding:16px;border-top:1px solid #e4e6eb;background:#fafbfc;border-radius:0 0 13px 13px;color:#7a818a;font-size:12px}
.safety-note{grid-column:2;display:flex;align-items:flex-start;gap:9px;margin-top:-36px;color:#69756b;font-size:12px;line-height:1.5}.safety-note span{color:#658b4d;font-size:16px}
.takeover{grid-column:1/-1;position:relative;overflow:hidden;margin-top:8px;padding:clamp(25px,5vw,48px);border:1px solid #a6212d;border-radius:17px;background:radial-gradient(ellipse at 50% 0,#561b25 0,#190e12 58%,#110d10 100%);color:#fff;box-shadow:0 22px 70px #2a071c35;animation:takeover-in .6s cubic-bezier(.2,.8,.2,1) both}
.page-shell.is-takeover{width:min(100% - 32px,850px);grid-template-columns:minmax(0,1fr)}
.takeover::before,.takeover::after{content:"";position:absolute;pointer-events:none;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,#ff31500b 6px 7px);mix-blend-mode:screen}
.takeover::after{inset:10px;border:1px solid #ff52632b;border-radius:10px;background:none}
.glitch-mark{position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;margin-bottom:20px;border:1px solid #ff647553;border-radius:15px;background:#e6263b20;color:#ff5263;font-size:31px;font-weight:800;box-shadow:0 0 24px #e6263b20}
.takeover-label{position:relative;z-index:1;margin:0 0 10px;color:#ff8b96;font-size:10px;font-weight:800;letter-spacing:.18em}
.takeover h2{position:relative;z-index:1;max-width:780px;margin:0;color:#fff;font-size:clamp(25px,5vw,45px);line-height:1.1;letter-spacing:-.045em;text-shadow:0 0 20px #ff294633}
.debrief{position:relative;z-index:1;max-width:700px;margin:18px 0 0;color:#f4cbd0;font-size:16px;line-height:1.65}
.continue-link{position:relative;z-index:1;display:flex;width:max-content;max-width:100%;align-items:center;justify-content:space-between;gap:18px;margin:28px 0 0;padding:15px 19px;border:1px solid #b9f36b55;border-radius:10px;background:#b9f36b;color:#142117;font-size:15px;font-weight:800;text-decoration:none;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .8s ease,transform .8s ease,background .2s}
.continue-link.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}.continue-link:hover{background:#c8ff80}.continue-link span{font-size:19px}
.page-footer{display:flex;justify-content:space-between;gap:12px;padding:18px clamp(18px,5vw,68px);border-top:1px solid #e4e6eb;background:#fff;color:#747c75;font-size:11px}.page-footer span{color:#9a9f9a}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
@keyframes takeover-in{from{opacity:0;transform:translateY(14px) scale(.99);filter:blur(5px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@media(max-width:760px){.page-shell{width:min(100% - 30px,500px);grid-template-columns:1fr;gap:25px;padding:38px 0 45px}.intro{text-align:center;margin:0 auto}.intro h1{font-size:clamp(33px,9vw,47px)}.intro>p:last-child{margin:15px auto 0;font-size:15px}.login-card{max-width:400px;margin:0 auto}.safety-note{grid-column:1;grid-row:3;margin:-12px auto 0;max-width:400px}.takeover{grid-column:1;padding:27px 22px}.takeover h2{font-size:clamp(27px,8vw,40px)}.debrief{font-size:14px}.page-footer{padding:15px 18px;font-size:10px}}
@media(max-width:420px){.topbar{height:60px;padding:0 14px}.brand{gap:7px;font-size:16px}.exercise-tag{max-width:155px;font-size:8px;letter-spacing:.08em}.page-shell{width:calc(100% - 24px)}.login-card{padding:24px 17px 0}.login-card-footer{margin-right:-17px;margin-left:-17px}.safety-note{font-size:11px}.takeover{padding:24px 18px}.continue-link{width:100%;font-size:14px}.page-footer{flex-direction:column;align-items:center;text-align:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
