*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}body{background:#f8fafb;color:#163744}button,input{font:inherit}button{cursor:pointer}a,button,input{ -webkit-tap-highlight-color:transparent}.welcome-shell{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:55% 45%}.welcome-story{position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 80%,#135e71 0,transparent 52%),linear-gradient(145deg,#092a3c,#0b3c50);color:#fff;padding:48px 56px;display:flex;flex-direction:column;min-height:800px}.story-brand{display:flex;align-items:center;gap:22px;position:relative;z-index:2}.brand-emblem{background:#fff;padding:11px 18px;border-radius:12px;box-shadow:0 8px 35px #001a2a20;animation:brand-arrive 850ms cubic-bezier(.2,.7,.3,1) both}.brand-emblem img{display:block;max-width:100%;height:auto}.story-brand>span{font-size:10px;letter-spacing:2px;color:#aed1dd;font-weight:600}.story-content{position:relative;z-index:2;margin-top:90px}.story-eyebrow{font-size:10px;letter-spacing:2.3px;color:#8dd9d3;font-weight:700}.story-content h1{font-size:clamp(48px,4.4vw,76px);font-weight:600;letter-spacing:-3px;line-height:1.08;margin:22px 0 24px;animation:content-arrive .8s .12s both}.story-content>p{font-size:16px;color:#b9d2dc;line-height:1.9;max-width:430px;animation:content-arrive .8s .23s both}.story-topics{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;animation:content-arrive .8s .32s both}.story-topics span{border:1px solid #55839470;padding:9px 13px;border-radius:30px;font-size:11px;color:#cbe1e7;background:#ffffff04}.pool-art{position:absolute;right:-75px;bottom:40px;width:620px;height:280px;transform:rotate(-17deg) skewX(-8deg);opacity:.75;pointer-events:none;animation:water-arrive 1.5s .1s both}.pool-outline{position:absolute;inset:0;border:1px solid #72b9c22e;border-radius:30px;background:linear-gradient(110deg,#ffffff02,#5fcbb41a)}.pool-art i{position:absolute;left:30px;right:0;height:1px;background:linear-gradient(90deg,#72d5ce00,#72d5ce80);top:65px}.pool-art i:nth-of-type(2){top:135px}.pool-art i:nth-of-type(3){top:205px}.pool-shine{position:absolute;inset:10px 50px;background:radial-gradient(ellipse,#77daca20,transparent 65%)}.pool-label{position:absolute;left:50px;bottom:20px;letter-spacing:8px;font-size:22px;font-weight:700;color:#7fbdc330}.pool-label span{font-weight:300}.story-footer{position:relative;z-index:2;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#84a9b8;margin-top:auto;padding-top:150px}.welcome-access{display:flex;align-items:center;justify-content:center;padding:50px 45px;background:linear-gradient(150deg,#fff,#f5f8fa)}.access-card{width:100%;max-width:365px;animation:content-arrive .7s .16s both}.access-eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:700;color:#5c8391;display:flex;align-items:center;gap:9px}.access-eyebrow>span{width:6px;height:6px;border-radius:50%;background:#239d97}.access-card h2{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:18px 0 12px;font-weight:650}.access-intro{font-size:13px;color:#6d818b;line-height:1.7;margin:0 0 32px}#access-form>label:not(.remember){display:block;font-size:12px;font-weight:600;margin:20px 0 9px}.access-input{display:flex;align-items:center;border:1px solid #d6e1e6;background:#fff;border-radius:9px;min-height:54px;transition:border-color .16s,box-shadow .16s}.access-input:focus-within{border-color:#248b9e;box-shadow:0 0 0 3px #248b9e12}.access-input>svg{width:18px;height:18px;flex-shrink:0;margin-left:15px;color:#8aa0aa}.access-input input{width:100%;min-width:0;background:transparent;border:0;outline:0;padding:17px 12px;font-size:14px;color:#163744}.access-input input::placeholder{color:#9baab2}.password-toggle{border:0;background:none;color:#728c98;display:flex;align-items:center;justify-content:center;min-width:46px;min-height:48px;padding:10px}.password-toggle svg{width:19px;height:19px}.remember{display:flex;align-items:center;gap:8px;margin:18px 0 25px;font-size:12px;color:#637c88;cursor:pointer;min-height:28px}.remember input{width:16px;height:16px;accent-color:#157b8e;margin:0}.access-submit{width:100%;border:0;border-radius:9px;min-height:54px;display:flex;align-items:center;justify-content:center;gap:13px;background:linear-gradient(110deg,#176981,#138d92);color:white;font-size:14px;font-weight:600;box-shadow:0 7px 18px #17698120;transition:transform .15s,box-shadow .15s}.access-submit:hover{transform:translateY(-1px);box-shadow:0 9px 22px #17698130}.access-submit:disabled{cursor:wait;transform:none;opacity:.85}.access-submit svg{width:19px;height:19px}.access-help{text-align:center;font-size:12px;line-height:1.8;color:#5e7885;margin-top:28px}.access-help span{color:#8799a2}.access-footer{font-size:10px;text-align:center;color:#9aa9b0;margin-top:48px}.mobile-brand{display:none}.login-messages{background:#fff0ec;border:1px solid #efc9bd;border-radius:8px;color:#943e2a;font-size:13px;padding:12px 15px;margin-bottom:20px}.login-messages p{margin:0;line-height:1.6}.preview-login-note{border-left:2px solid #7db3bd;padding:4px 10px;color:#738e9b;font-size:10px;line-height:1.6;margin:0 0 20px}.login-progress{margin-top:17px}.login-progress[hidden]{display:none}.progress-track{height:3px;overflow:hidden;background:#e0edef;border-radius:3px}.progress-track span{display:block;width:40%;height:100%;background:#188e9e;animation:login-progress 1.1s ease-in-out infinite}.login-progress p{font-size:11px;text-align:center;color:#5c7b88;margin:9px 0 0}button:focus-visible,a:focus-visible{outline:3px solid #62c6c0;outline-offset:3px}
@keyframes brand-arrive{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes content-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes water-arrive{from{opacity:0;translate:45px 20px}to{opacity:.75;translate:0 0}}@keyframes login-progress{from{transform:translateX(-100%)}to{transform:translateX(350%)}}
@media(min-width:1600px){.welcome-story{padding:64px 80px}.story-content{margin-top:110px}.pool-art{width:800px;height:300px}}
@media(max-width:1100px){.welcome-story{padding:38px 30px;min-height:760px}.story-brand{gap:12px}.story-brand>span{display:none}.story-content h1{font-size:52px}.welcome-access{padding:35px 28px}.story-footer{flex-direction:column;gap:8px}.pool-art{right:-190px}.access-card h2{font-size:28px}}
@media(max-width:700px){.welcome-shell{display:block}.welcome-story{display:none}.welcome-access{min-height:100vh;min-height:100dvh;align-items:flex-start;padding:36px 25px 28px;background:radial-gradient(ellipse at top right,#dcf0f080,transparent 50%),#f9fbfc}.access-card{max-width:390px;animation:none}.mobile-brand{display:block;margin:0 0 44px;animation:brand-arrive .85s both}.mobile-brand img{display:block;width:160px;height:auto}.access-card h2{font-size:29px}.access-eyebrow{font-size:9px}.access-intro{margin-bottom:26px}.access-input input{font-size:16px}.access-footer{margin-top:36px}.access-help{margin-top:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.progress-track span{width:100%;opacity:.55}.access-submit:hover{transform:none}}

/* Logo-focused login: a single turn, with immediate form access. */
.logo-stage{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:1100px;padding:80px 0 60px}
.hero-logo{width:min(100%,430px);padding:42px 36px;background:#fff;border-radius:24px;box-shadow:0 28px 80px #001b3650,0 0 80px #54c9c112;animation:logo-turn 2s cubic-bezier(.16,.7,.2,1) both}
.hero-logo img{display:block;width:100%;height:auto}.logo-stage .story-topics{justify-content:center;margin-top:32px}.story-footer{padding-top:30px}.pool-art{opacity:.45}
@keyframes logo-turn{0%{opacity:0;transform:rotateY(-180deg) scale(.92)}25%{opacity:1}100%{opacity:1;transform:rotateY(0) scale(1)}}
@media(max-width:700px){.mobile-brand{perspective:900px;animation:none;margin-bottom:36px}.mobile-brand img{animation:logo-turn 1.8s cubic-bezier(.16,.7,.2,1) both;transform-origin:center}.access-card h2{margin-top:0}}

/* Freestanding logo variant. Approved tile design is saved in backups/login-tile-approved-20261030. */
.welcome-story{background:radial-gradient(ellipse at 30% 35%,#ffffff 0,#eef7f8 48%,#d6eaed 100%);color:#163744}
.hero-logo{width:min(100%,540px);padding:0;background:none;border-radius:0;box-shadow:none;animation:none}
.hero-logo img{animation:logo-float-turn 2.6s cubic-bezier(.16,.7,.2,1) both;transform-origin:50% 50%;filter:drop-shadow(0 16px 12px #123f4c12)}
.logo-stage .story-topics{margin-top:48px}.story-topics span{color:#496b78;border-color:#7ca5b63d;background:#ffffff30}.story-footer{color:#688894}
.pool-outline{border-color:#54899328;background:linear-gradient(110deg,#fff0,#5caaa91a)}.pool-art i{background:linear-gradient(90deg,#468b9700,#468b9745)}.pool-label{color:#417d891c}
@keyframes logo-float-turn{0%{opacity:0;transform:perspective(1100px) rotateY(-150deg) translateY(12px) scale(.94)}18%{opacity:1}75%{transform:perspective(1100px) rotateY(5deg) translateY(0) scale(1)}100%{opacity:1;transform:perspective(1100px) rotateY(0) translateY(0) scale(1)}}
@media(max-width:700px){.mobile-brand img{width:190px;animation:logo-float-turn 2.6s cubic-bezier(.16,.7,.2,1) both}}