:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#241d35;background:#201231;font-synthesis:none;--purple:#822be4}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:36px;background:radial-gradient(ellipse at 15% 12%,#482468 0,transparent 48%),radial-gradient(ellipse at 85% 94%,#352253 0,transparent 48%),#201231}button,input{font:inherit}a{color:inherit;text-decoration:none}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}.entry-shell{display:grid;grid-template-columns:1.06fr 1fr;max-width:1110px;width:100%;min-height:730px;background:white;border-radius:20px;overflow:hidden;box-shadow:0 32px 100px #10061870;border:1px solid #ffffff1a}.brand-panel{position:relative;min-height:730px;background:#221444 url('/asana-login-city.png') center 62%/cover no-repeat;color:white;overflow:hidden}.brand-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0c091952,#0c091914),linear-gradient(180deg,#0e0b2359,transparent 61%,#09091d87)}.brand-content{position:relative;padding:42px 46px 130px;z-index:1}.wordmark{display:inline-flex;gap:12px;align-items:center}.brand-a{color:#c15dff;font-weight:1000;font-size:45px;font-style:italic;line-height:1;letter-spacing:-7px;margin-right:6px}.wordmark strong{font-size:22px;letter-spacing:1.8px;display:block;font-weight:850}.wordmark small{font-size:8px;letter-spacing:2px;display:block;margin-top:4px;color:#e7dff3}.brand-content h1{font-size:43px;line-height:1.14;margin:44px 0 16px;font-weight:820;letter-spacing:-1.4px}.brand-content h1 span{color:#bc68ff}.brand-description{color:#d5d0e3;line-height:1.6;font-size:14px;margin:0}.brand-features{display:grid;gap:18px;margin-top:26px}.brand-features>div{display:flex;gap:14px;align-items:center}.brand-features svg{width:37px;height:37px;padding:7px;background:#ffffff0c;border:1px solid #ffffff23;border-radius:10px;color:#efebf9}.brand-features strong{display:block;font-size:14px;font-weight:650}.brand-features small{display:block;color:#d4cce0;font-size:11px;margin-top:5px}.brand-caption{position:absolute;bottom:27px;left:46px;font-size:11px;color:#ede6f5c2}.form-panel{position:relative;padding:66px 48px 50px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#fff 40%,#fbf9ff)}.language-pill{position:absolute;right:24px;top:21px;display:flex;gap:6px;align-items:center;color:#6e667d;font-size:11px;letter-spacing:1px;border:1px solid #ede8f4;border-radius:9px;padding:8px 11px;background:#fff}.form-content{width:100%;max-width:356px;text-align:center;padding-bottom:24px}.form-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:31px}.form-a{font-weight:1000;color:#922dee;font-style:italic;font-size:53px;line-height:.93;letter-spacing:-7px;margin-left:-9px}.form-brand strong{font-size:28px;font-weight:850;letter-spacing:1px;line-height:1.2;margin-top:8px}.form-brand small{font-size:8px;letter-spacing:2.7px;font-weight:650;margin-top:6px;color:#6d617b}.form-content h2{font-size:24px;line-height:1.4;margin:0 0 10px;font-weight:750;letter-spacing:-.6px}.form-description{font-size:12px;line-height:1.7;color:#8b8198;margin:0 0 23px}.entry-notice{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:13px 14px;border:1px solid #eee2ff;border-radius:12px;background:#f7f1ff;margin-bottom:20px;color:#7836c8}.entry-notice>svg{height:26px;min-width:26px;padding:4px;border-radius:50%;background:#fff;color:#9d44f1}.entry-notice strong{font-size:11px;display:block;line-height:1.5;font-weight:750}.entry-notice p{font-size:10px;line-height:1.6;color:#9b86b6;margin:4px 0 0;overflow-wrap:anywhere}.entry-notice.warning{background:#fff5f1;border-color:#f3ddd5;color:#b45d36}.entry-notice.warning p{color:#a37867}.entry-notice.warning>svg{color:#c87744}.field{height:49px;display:flex;align-items:center;gap:9px;border:1px solid #e8e3ef;border-radius:10px;background:#fff;position:relative;margin:12px 0;transition:border-color .15s,box-shadow .15s}.field:focus-within{border-color:#aa63eb;box-shadow:0 0 0 3px #9c42e20c}.field-icon{color:#a39aac;margin-left:14px;height:18px;width:18px;flex-shrink:0}.field-icon svg{height:18px;width:18px}.field input{border:0;outline:0;min-width:0;width:100%;padding:13px 10px 13px 0;background:transparent;font-size:12px;color:#4b3c62}.field input::placeholder{color:#aaa1b5}.field input[readonly]{color:#8964a9;background:transparent}.password-toggle{border:0;background:none;color:#a69caf;padding:8px 12px 8px 4px;display:flex;flex-shrink:0}.password-toggle svg{width:18px;height:18px}.password-help{font-size:10px;color:#a399af;text-align:left;margin:8px 2px 0;line-height:1.7}.primary-button{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:48px;border:0;border-radius:10px;background:linear-gradient(105deg,#6922d3,#962fea);color:#fff;font-weight:650;font-size:13px;box-shadow:0 5px 15px #8a2edd21;margin-top:16px;transition:transform .15s,box-shadow .15s}.primary-button:hover{box-shadow:0 7px 20px #8a2edd40;transform:translateY(-1px)}.primary-button span{font-size:20px;font-weight:400}.text-button{display:inline-block;font-size:11px;color:#907aa6;border:0;background:none;padding:12px 0}.text-button:hover{color:#792bd3}.forgot{display:block;margin:0 0 0 auto;padding:4px 0 0;font-size:10px}.invite-only-help{font-size:10px;color:#a096ac;margin-top:18px}.form-error{text-align:left;color:#ba4360;font-size:11px;line-height:1.7;margin:10px 0 0;min-height:0}.form-error:empty{display:none}.secure-caption{display:flex;align-items:center;justify-content:center;gap:6px;font-size:9px;color:#b3a9be;margin:31px 0 0}.secure-caption svg{width:12px;height:12px}.owner-entry{position:absolute;bottom:20px;color:#b1a6bd;font-size:9px}.owner-entry:hover{color:#7d3ec5}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:3px solid #c684ff;outline-offset:3px}@media(min-width:1450px){.entry-shell{min-height:780px}.brand-panel{min-height:780px}.brand-content{padding-top:49px}.brand-content h1{margin-top:51px;font-size:47px}}@media(max-width:900px){body{padding:24px}.entry-shell{grid-template-columns:1fr 1fr;min-height:680px}.brand-panel{min-height:680px}.brand-content{padding:35px 30px 100px}.brand-content h1{font-size:34px;margin-top:40px}.brand-description{font-size:12px}.brand-features{gap:16px}.brand-features small{font-size:10px}.form-panel{padding:65px 28px 48px}.form-content h2{font-size:21px}.brand-caption{left:30px;font-size:10px}}@media(max-width:640px){body{padding:0;background:#faf8fd;display:block}.entry-shell{display:block;min-height:100vh;border:0;border-radius:0;box-shadow:none}.brand-panel{min-height:210px;height:210px;background-position:center 53%;border-radius:0 0 28px 28px}.brand-shade{background:linear-gradient(90deg,#130c279e,#130c274a)}.brand-content{padding:24px 25px}.wordmark strong{font-size:18px}.wordmark small{font-size:7px}.brand-a{font-size:36px}.brand-content h1{font-size:25px;line-height:1.12;margin:22px 0 0;letter-spacing:-.8px}.brand-content h1 br:nth-of-type(2){display:none}.brand-content h1 span{margin-left:8px}.brand-description,.brand-features,.brand-caption{display:none}.form-panel{padding:35px 28px 54px;min-height:calc(100vh - 210px);background:#fff}.form-brand{display:none}.form-content{max-width:380px;padding-bottom:0}.form-content h2{font-size:24px;padding-right:0;margin-bottom:7px}.form-description{margin-bottom:21px;padding:0 30px}.language-pill{right:18px;top:15px;font-size:9px;padding:5px 8px;display:none}.field{height:52px;margin:13px 0}.field input{font-size:16px;padding-top:12px;padding-bottom:12px}.primary-button{min-height:51px;font-size:14px}.entry-notice strong{font-size:12px}.entry-notice p{font-size:11px}.secure-caption{margin-top:25px}.owner-entry{bottom:19px}.password-help{font-size:11px}.form-error{font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Shared ASANA artwork and readable text above the city photograph. */
.entry-logo{display:block;width:190px;max-width:100%;height:auto;border-radius:12px;object-fit:contain}
.form-brand .entry-logo{width:190px}
.brand-content h1{margin-top:28px}
.brand-description{color:#fff;font-size:16px;font-weight:550;text-shadow:0 2px 5px #000}
.brand-shade{background:linear-gradient(90deg,#0c0919b8,#0c091955),linear-gradient(180deg,#0e0b2366,transparent 61%,#09091d99)}
.brand-features{padding:20px;background:#130b28d9;border:1px solid #ffffff35;border-radius:16px;gap:20px;max-width:365px}
.brand-features strong{font-size:17px;font-weight:750;color:#fff}
.brand-features small{font-size:13px;line-height:1.55;color:#f1eafa;margin-top:4px}
.brand-features svg{color:#fff;background:#8f43d840;border-color:#c496ec80;width:40px;height:40px;flex-shrink:0}
.brand-caption{color:#fff;font-size:12px;text-shadow:0 2px 5px #000}
@media(max-width:900px) and (min-width:641px){.brand-features{padding:15px}.brand-description{font-size:14px}.brand-features small{font-size:12px}}
@media(max-width:640px){.wordmark .entry-logo{width:125px}.brand-content{padding-top:18px}.brand-content h1{margin-top:13px}.brand-features,.brand-description{display:none}}

/* Approved wide courier composition. Keep the rider clear of all copy. */
body{padding:28px}
.entry-shell{max-width:1500px;grid-template-columns:minmax(0,1.85fr) minmax(390px,1fr);min-height:800px}
.brand-panel{min-height:800px;background-image:url('/asana-login-wide.png');background-position:right bottom;background-size:cover}
.brand-shade{background:linear-gradient(90deg,#10092685 0%,#10092635 43%,transparent 65%)}
.brand-content{padding:36px 38px 70px;width:49%;min-width:0}
.brand-content .entry-logo{width:170px}
.brand-content h1{font-size:clamp(32px,3.2vw,49px);line-height:1.14;margin:35px 0 16px;letter-spacing:-1px}
.brand-description{font-size:14px;line-height:1.6}
.brand-description br{display:none}
.brand-features{padding:19px;margin-top:26px;gap:0;width:100%;max-width:365px;background:#170e2deb}
.brand-features>div{gap:12px;padding:16px 0}
.brand-features>div:first-child{padding-top:0}
.brand-features>div:last-child{padding-bottom:0}
.brand-features>div+div{border-top:1px solid #ffffff25}
.brand-features strong{font-size:17px}
.brand-features small{font-size:13px}
.brand-caption{left:38px;bottom:23px}
.form-panel{padding:60px 38px 58px}
.form-content{max-width:390px}
.form-content h2{font-size:28px}
.form-description{font-size:14px}
.form-brand{margin-bottom:32px}
.form-brand .entry-logo{width:200px}
.field{height:54px}
.field input{font-size:14px}
.primary-button{min-height:54px;font-size:15px}
.entry-notice strong{font-size:13px}
.entry-notice p{font-size:12px}
.owner-entry{font-size:11px}
@media(min-width:901px) and (max-width:1199px){
body{padding:20px}.entry-shell{grid-template-columns:minmax(0,1.55fr) minmax(350px,1fr);min-height:760px}
.brand-panel{min-height:760px}.brand-content{width:48%;padding:28px 0 68px 24px}
.brand-content h1{font-size:30px;margin-top:28px}.brand-content .entry-logo{width:145px}
.brand-description{font-size:12px}.brand-features{padding:12px}.brand-features>div{gap:8px;padding:12px 0}
.brand-features svg{width:28px;height:28px;padding:5px}.brand-features strong{font-size:14px}.brand-features small{font-size:11px}
.form-panel{padding:60px 26px}.form-content h2{font-size:24px}.brand-caption{left:24px;font-size:10px}
}
@media(max-width:900px){
body{padding:0;display:block}
.entry-shell{display:block;border:0;border-radius:0;min-height:100vh}
.brand-panel{min-height:0;height:auto;aspect-ratio:3/2;border-radius:0 0 24px 24px;background-size:contain;background-position:center;background-color:#171333}
.brand-content{padding:clamp(18px,4vw,32px);width:55%}
.brand-content .entry-logo{width:clamp(100px,20vw,155px)}
.brand-content h1{font-size:clamp(23px,4.2vw,36px);margin-top:clamp(14px,3vw,25px);letter-spacing:-.5px}
.brand-content h1 br:nth-of-type(2){display:block}.brand-content h1 span{margin-left:0}
.brand-description,.brand-features,.brand-caption{display:none}
.form-panel{padding:35px 28px 62px;min-height:0}
.form-brand{display:none}.form-content{max-width:420px;padding-bottom:0}.form-content h2{font-size:25px}
.field input{font-size:16px}.language-pill{display:none}
}
/* Soft photographic edges and a feathered transition into the login panel. */
.entry-shell{border-color:transparent;box-shadow:0 30px 90px #10061865,0 0 44px #7134a82b}
.brand-panel{box-shadow:inset 18px 0 30px -20px #26103b,inset 0 18px 30px -22px #26103b,inset 0 -20px 34px -23px #26103b}
.brand-panel::after{content:"";pointer-events:none;position:absolute;z-index:0;top:0;right:-1px;bottom:0;width:55px;background:linear-gradient(90deg,transparent,#ffffff24 48%,#fff 100%)}
.brand-shade{background:linear-gradient(90deg,#211034a6 0%,#10092638 35%,transparent 62%),linear-gradient(180deg,#26103b44,transparent 15%,transparent 88%,#26103b55)}
.brand-caption{z-index:1}
@media(max-width:900px){
.brand-panel{border-radius:0;box-shadow:none}
.brand-panel::after{top:auto;bottom:-1px;left:0;right:0;height:48px;width:auto;background:linear-gradient(180deg,transparent,#ffffff25 48%,#fff)}
}

.form-panel{padding-bottom:80px}.form-panel .owner-entry{bottom:40px}.entry-copyright{position:absolute;bottom:14px;left:16px;right:16px;text-align:center;font-size:11px;line-height:1.5;letter-spacing:.3px;color:#756b83}

@media(max-width:600px){.form-panel{padding-bottom:110px}.form-panel .owner-entry{bottom:64px}.entry-copyright{font-size:10px;line-height:1.6}}

.entry-contact{display:flex;align-items:center;justify-content:center;min-height:46px;margin:16px 0 0;padding:10px 18px;border:1px solid #9c7cc0;border-radius:12px;background:#f4edfc;color:#60318b;font-size:15px;font-weight:650;text-decoration:none}.entry-contact:hover{background:#eaddf8}.entry-contact:focus-visible{outline:3px solid #8f54cb;outline-offset:3px}

/* Keep the owner link and wrapping copyright in separate flow rows. */
.form-panel{flex-direction:column;justify-content:center;padding-bottom:24px}
.entry-bottom{position:relative;flex:none;width:100%;margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.form-panel .entry-bottom .owner-entry{position:static;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;color:#75568f;font-size:12px;cursor:pointer;touch-action:manipulation}
.entry-bottom .entry-copyright{position:static;margin:0;max-width:100%;overflow-wrap:anywhere}
@media(max-width:640px){.form-panel{padding-bottom:24px}.entry-bottom{margin-top:16px}}