.login{display:block;min-height:100vh;min-height:100svh;padding:0;overflow:hidden}
.login-art{position:absolute;inset:0;display:block;width:100%;min-height:0;padding:0;background:transparent!important;pointer-events:none}
.login-brandbar{position:absolute;top:clamp(22px,4vw,48px);left:clamp(22px,5vw,72px);right:clamp(22px,5vw,72px)}
.login-art>.login-brandbar>.brand{max-width:60%;white-space:nowrap}
.login-copy{position:absolute;top:50%;left:clamp(24px,5vw,72px);width:min(34vw,390px);margin:0;transform:translateY(-50%)}
.login-copy h1{font-size:clamp(36px,4vw,54px)}
.login-copy>.eyebrow,.login-copy h1,.login-copy p,.login-copy>.pill-list{animation:login-copy-in .65s both}
.login-copy h1{animation-delay:.1s}
.login-copy p{animation-delay:.18s}
.login-copy>.pill-list{animation-delay:.24s}
.login-decoration{right:clamp(20px,4vw,64px);bottom:clamp(30px,7vh,76px)}
.login-form{position:absolute;inset:0;display:flex;width:100%;min-height:100%;align-items:center;justify-content:center;padding:24px;background:transparent}
.login-inner{width:min(100%,440px);max-width:440px}
.login-form .field input{background-color:#ffffffa8;background-repeat:no-repeat;background-position:15px center;background-size:19px}
.login-form .password-toggle{position:absolute;right:5px;top:50%;display:grid;width:40px;height:40px;place-items:center;transform:translateY(-50%);padding:0;border:0;border-radius:10px;background:transparent;color:transparent;font-size:0}
.login-form .password-toggle::before{content:"";width:21px;height:21px;background:#77758d;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.login-form .password-toggle[data-visible="true"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 3 18 18'/%3E%3Cpath d='M10.6 10.6a2 2 0 0 0 2.8 2.8'/%3E%3Cpath d='M9.9 5.2A10.7 10.7 0 0 1 12 5c6.4 0 10 7 10 7a15.7 15.7 0 0 1-3.2 4.1'/%3E%3Cpath d='M6.6 6.6C3.7 8.5 2 12 2 12s3.6 7 10 7a10.5 10.5 0 0 0 4-.8'/%3E%3C/svg%3E")}
.login-form .password-control input{padding-right:54px}
@media(max-width:1050px){.login-copy{display:none}.login-decoration{right:4vw;bottom:5vh;opacity:.5}}
@media(max-width:800px){
  .login{display:grid;place-items:center}
  .login-art{position:absolute;inset:0}
  .login-brandbar{top:max(18px,env(safe-area-inset-top));left:20px;right:20px;width:auto}
  .login-art>.login-brandbar>.brand{max-width:62%;font-size:18px}
  .login-tagline{font-size:10px}
  .login-decoration{display:none}
  .login-form{position:relative;inset:auto;width:100%;min-height:100vh;min-height:100svh;padding:16px;align-items:center}
  .login-inner{width:min(100%,420px);max-width:420px;margin:auto;padding:clamp(20px,5vw,30px)}
  .login-inner>.login-book-illustration{width:clamp(58px,16vw,76px);height:clamp(58px,16vw,76px);margin-bottom:10px}
  .login-inner>.eyebrow{font-size:10px;letter-spacing:.8px;margin-bottom:7px!important}
  .login-inner h2{font-size:clamp(22px,6vw,29px);line-height:1.16;margin-bottom:6px}
  .login-inner>p{font-size:12px;line-height:1.45;margin-bottom:16px}
  .login-form .field{gap:6px;margin-bottom:11px}
  .login-form .field label{font-size:11px}
  .login-form .field input{min-height:44px;padding:10px 12px 10px 39px;border-radius:12px;background-position:12px center;background-size:17px;font-size:16px}
  .login-form .password-control input{padding-right:54px}
  .login-form .password-toggle{display:grid}
  .login-inner .btn{min-height:46px;margin-top:5px;border-radius:12px;font-size:13px}
  .login-footer{margin-top:15px;padding-top:12px;font-size:10px;line-height:1.5}
}
@media(max-width:420px){.login-brandbar{left:16px;right:16px;width:auto}.login-art>.login-brandbar>.brand{font-size:16px}.login-tagline{font-size:9px}.login-form{padding-right:18px;padding-left:18px}.login-inner{padding:19px 18px}.login-inner>p{margin-bottom:13px}.login-form .field{margin-bottom:9px}.login-footer{margin-top:13px;padding-top:10px}}
@media(max-height:650px) and (min-width:801px){.login-form{padding-top:18px;padding-bottom:18px}.login-inner{padding:22px 30px}.login-inner>.login-book-illustration{width:64px;height:64px;margin-bottom:8px}.login-inner>p{margin-bottom:13px}.login-form .field{margin-bottom:10px}.login-inner .btn{min-height:46px}.login-footer{margin-top:13px;padding-top:11px}}
@media(max-height:650px) and (max-width:800px){.login-form{align-items:flex-start;padding-top:max(74px,calc(env(safe-area-inset-top) + 60px));padding-bottom:max(18px,env(safe-area-inset-bottom))}}
@media(max-height:740px) and (max-width:800px){.login-form{align-items:flex-start;padding-top:max(70px,calc(env(safe-area-inset-top) + 58px));padding-bottom:max(14px,env(safe-area-inset-bottom))}.login-inner>.login-book-illustration{width:54px;height:54px;margin-bottom:7px}.login-inner>p{margin-bottom:10px}.login-form .field{margin-bottom:8px}.login-form .field input{min-height:42px}.login-inner .btn{min-height:44px}.login-footer{margin-top:10px;padding-top:9px}}
@media(max-height:500px) and (max-width:800px){.login{overflow-y:auto;place-items:center}.login-tagline{display:none}.login-form{min-height:100vh;min-height:100dvh;align-items:center;padding:56px 14px 12px}.login-inner{padding:14px 18px}.login-inner>.login-book-illustration{display:none}.login-inner>.eyebrow{padding:4px 8px;margin-bottom:4px!important}.login-inner h2{font-size:20px;margin-bottom:3px}.login-inner>p{margin-bottom:6px;font-size:10px}.login-form .field{gap:3px;margin-bottom:5px}.login-form .field label{font-size:10px}.login-form .field input{min-height:34px;padding-top:6px;padding-bottom:6px;font-size:16px}.login-inner .btn{min-height:38px;margin-top:3px}.login-footer{display:none}}