@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-sans-v19-latin-6c1b9a07e2.woff2) format("woff2")}
:root{--sw-orange:#ff791a;--sw-dark:#333;--sw-h:max(100vh,820px);--sw-r:calc(var(--sw-h)*.6846);--sw-edge:calc(var(--sw-h)*.55)}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:"Nunito Sans",sans-serif;color:#333;background:#d4d4d4;overflow:hidden}
.sw-login{position:relative;display:block;height:100vh;width:100vw;overflow:hidden;background:#c9c9c9 url(../img/clouds-b71f04d3e9.svg) center/cover no-repeat}
.sw-login[hidden]{display:none}

/* Dark half-disc with the orange rim */
.sw-login__arc{position:absolute;z-index:1;width:calc(var(--sw-r)*2);height:calc(var(--sw-r)*2);border-radius:50%;
  left:calc(var(--sw-edge) - var(--sw-r)*2);top:calc(50% - var(--sw-r));background:var(--sw-dark);
  box-shadow:0 0 0 4px var(--sw-orange)}

.sw-login__panel{position:absolute;z-index:2;left:50px;top:calc(50% - 232px);width:302px;margin:0}
.sw-logo svg{display:block;width:226px;height:44px;margin-left:-2px}
.sw-logo text{font-family:"Nunito Sans",sans-serif;font-size:37px;fill:#8e8f91}
.sw-logo__sonic{font-weight:300;letter-spacing:1.6px}
.sw-logo__wall{font-weight:800;letter-spacing:.4px}
.sw-logo__swoosh{fill:var(--sw-orange)}
.sw-login__product{color:#a2a3a5;font-size:20px;font-weight:400;margin:10px 0 74px}
.sw-login__label{display:block;color:#d6d6d6;font-size:15px;font-weight:600;margin:0 0 7px}
.sw-login__input{display:block;width:100%;height:37px;padding:0 10px;margin:0 0 20px;background:var(--sw-dark);color:#f2f2f2;
  border:1px solid var(--sw-orange);border-radius:2px;font:13px "Nunito Sans",sans-serif;outline:0}
.sw-login__input{margin-bottom:29px}
.sw-login__input::placeholder{color:#8b8b8b;opacity:1}
.sw-login__input:focus{border-style:dashed}
.sw-login__pw{position:relative}
.sw-login__pw .sw-login__input{padding-right:40px}
.sw-login__eye{position:absolute;right:8px;top:9px;width:22px;height:20px;padding:0;border:0;background:none;cursor:pointer;fill:#3ba0e6}
.sw-login__eye.is-on{fill:#8fcaf2}
.sw-login__msg{min-height:20px;margin:-8px 0 0;color:#ff8a80;font-size:13px;font-weight:600}

/* Round LOG IN button sitting on the rim */
.sw-login__btn{position:fixed;z-index:3;left:calc(var(--sw-edge) - 48px);top:calc(50% - 48px);width:100px;height:100px;border-radius:50%;
  border:5px solid #fff;background:var(--sw-orange);color:#333;font:400 20px "Nunito Sans",sans-serif;letter-spacing:.3px;cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.sw-login__btn:hover{background:#ff8a35}
.sw-login__btn:focus-visible{outline:2px dashed #fff;outline-offset:4px}

.sw-features{position:absolute;z-index:2;left:calc(var(--sw-edge) + 172px);right:20px;top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0}
.sw-feature{display:flex;align-items:center;gap:10px;margin:0 0 21px}
.sw-feature__dot{flex:none;width:68px;height:68px;border-radius:50%;border:5px solid #707070}
.sw-feature__dot--teal{background:#0db5a1}.sw-feature__dot--orchid{background:#d28bc4}.sw-feature__dot--amber{background:#ffa94d}
.sw-feature__dot--magenta{background:#e8007a}.sw-feature__dot--slate{background:#787fba}
.sw-feature h2{margin:0;font-size:28px;font-weight:400;line-height:1.38;color:#2f3033}
.sw-feature p{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:#4b4c4f}

.sw-best{position:absolute;z-index:2;right:10px;bottom:9px;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#2b2b2b}
.sw-best__icon{display:inline-grid;place-items:center;width:22px;height:22px;background:#2f9ae0;color:#fff;border:2px solid #d9eefc;font:700 13px Georgia,serif}
.sw-best__short{display:none}

.sw-block{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:rgba(0,0,0,.45)}
.sw-block[hidden]{display:none}
.sw-block__box{display:flex;align-items:center;gap:14px;padding:18px 26px;background:#fff;color:#333;font-size:15px;font-weight:600;border-radius:3px;box-shadow:0 6px 30px rgba(0,0,0,.3)}
.sw-block__spin{width:22px;height:22px;border-radius:50%;border:3px solid #ffd2b0;border-top-color:var(--sw-orange);animation:sw-spin .8s linear infinite}
@keyframes sw-spin{to{transform:rotate(360deg)}}

@media (max-height:780px){
  .sw-feature{margin-bottom:14px}
  .sw-feature h2{font-size:21px;line-height:1.3}
  .sw-feature p{display:none}
  .sw-feature__dot{width:50px;height:50px;border-width:4px}
}
@media (max-width:900px),(max-height:560px){
  body{overflow:auto}
  .sw-login{min-height:100vh;height:auto;background:var(--sw-dark);border-top:3px solid var(--sw-orange)}
  .sw-login__arc,.sw-features{display:none}
  .sw-login__panel{position:static;width:auto;max-width:420px;padding:190px 40px 90px}
  .sw-login__product{margin-bottom:34px}
  .sw-login__input{margin-bottom:21px}
  .sw-login__btn{position:static;display:block;width:100%;height:35px;margin-top:0;border:0;border-radius:18px;font-size:14px;font-weight:700;box-shadow:none}
  .sw-best{left:0;right:0;bottom:18px;justify-content:center;color:#cfcfcf;font-weight:400}
  .sw-best__icon{width:18px;height:18px;border-radius:50%;background:none;border:1.5px solid #cfcfcf;color:#cfcfcf;font-size:11px}
  .sw-best__long{display:none}.sw-best__short{display:inline}
}
@media (prefers-reduced-motion:reduce){.sw-block__spin{animation:none}}