body{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.side{background:var(--cocoa);color:#EADFD6;padding:46px 52px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.lgbox{align-self:flex-start;position:relative;z-index:2}
.lgbox img{height:104px;width:auto}
.side .mid{margin:auto 0;max-width:30ch;position:relative;z-index:2}
.side h2{font-family:var(--serif);font-weight:400;font-size:38px;color:#fff;line-height:1.12;margin-bottom:16px}
.side p{font-size:15px;color:rgba(234,223,214,.72)}
.side ul{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:13px}
.side li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:rgba(234,223,214,.85)}
.side li svg{width:17px;height:17px;color:var(--green);flex-shrink:0;margin-top:2px}
.side .ft{font-size:12px;color:rgba(234,223,214,.45);position:relative;z-index:2}
.side .blob{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(229,0,125,.26),transparent 68%);bottom:-180px;right:-150px}
.form{display:flex;align-items:center;justify-content:center;padding:46px 40px}
.box{width:100%;max-width:410px}
.tagline{display:inline-flex;align-items:center;gap:8px;background:var(--blush);color:var(--pink);border-radius:999px;padding:6px 14px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.tagline svg{width:13px;height:13px}
.box h1{font-family:var(--serif);font-weight:400;font-size:34px;color:var(--cocoa);margin-bottom:8px}
.box .lead{font-size:14.5px;color:var(--soft);margin-bottom:24px}
.box .lead a{color:var(--pink);font-weight:600}
.links{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:24px;font-size:13px;color:var(--soft);flex-wrap:wrap}
.links a:hover{color:var(--pink)}
.links span{opacity:.4}
@media(max-width:900px){body{grid-template-columns:1fr}.side{display:none}.form{padding:40px 24px}}

/* status of an access request made from this browser */
.status{display:flex;gap:11px;align-items:flex-start;border-radius:16px;padding:15px 17px;margin-bottom:18px;font-size:13.5px;line-height:1.55;background:var(--cream);border:1px solid var(--line);color:var(--text)}
.status svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--soft)}
.status b{display:block;color:var(--cocoa);margin-bottom:2px}
.status.wait{background:var(--blush);border-color:rgba(229,0,125,.18)}
.status.wait svg{color:var(--pink)}
.status.ok{background:var(--sage);border-color:rgba(94,127,58,.22)}
.status.ok svg{color:var(--sageD)}

/* a text-style button: "Forgot password?", "Back to sign in" */
.lnk{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(143,125,112,.4)}
.lnk:hover{color:var(--pink);text-decoration-color:currentColor}