:root{
  --page:#f9f9fa;
  --card:#fff;
  --card-border:#d4d5dc;
  --field-border:#c3c8d1;
  --label:#687083;
  --text:#1a1f1e;
  --placeholder:#9ca5b7;
  --active:#00987b;
  --disabled:#ededed;
  --disabled-text:#a5adbd;
  --brand:#39163d;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{background:var(--page)}
button,input{font:inherit}

.auth-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:152px;
}

.brand{
  display:block;
  width:180px;
  height:60px;
  object-fit:contain;
  margin:0 0 43px;
}

.contact-form{
  width:360px;
  height:325px;
  padding:25px;
  border:1px solid var(--card-border);
  border-radius:6px;
  background:var(--card);
}

.field-group{margin:0 0 19px}
.field-group:first-child{margin-bottom:14px}
.field-group label{
  display:block;
  margin:0 0 9px;
  color:var(--label);
  font-size:13px;
  line-height:16px;
  font-weight:400;
}

.field-group input{
  display:block;
  width:310px;
  height:40px;
  padding:0 10px;
  border:1px solid var(--field-border);
  border-radius:6px;
  outline:0;
  background:#fff;
  color:var(--text);
  font-size:14px;
  line-height:38px;
  transition:border-color .12s ease,box-shadow .12s ease;
}

.field-group input::placeholder{color:var(--placeholder);opacity:1}
.field-group input:focus{
  border-color:var(--active);
  box-shadow:0 0 0 1px var(--active);
}
.field-group input.invalid{
  border-color:#c74646;
  box-shadow:0 0 0 1px #c74646;
}

.remember{
  width:max-content;
  height:18px;
  display:flex;
  align-items:center;
  gap:5px;
  margin:0 0 20px;
  color:var(--text);
  font-size:14px;
  line-height:18px;
  cursor:pointer;
}

.remember input{
  width:14px;
  height:14px;
  margin:0;
  accent-color:#3273f6;
}

.continue{
  width:310px;
  height:40px;
  display:block;
  border:0;
  border-radius:6px;
  background:var(--active);
  color:#fff;
  font-size:14px;
  line-height:40px;
  font-weight:700;
  text-align:center;
  padding:0;
  cursor:pointer;
  transition:background-color .12s ease,color .12s ease;
}

.continue:disabled{
  background:var(--disabled);
  color:var(--disabled-text);
  cursor:default;
}

.button-loader{
  display:none;
  width:18px;
  height:18px;
  margin:auto;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:button-spin .7s linear infinite;
}
.continue.is-loading .button-label{display:none}
.continue.is-loading .button-loader{display:block}
.continue.is-loading:disabled{background:var(--active);color:#fff}
@keyframes button-spin{to{transform:rotate(360deg)}}

.forgot{
  display:block;
  width:max-content;
  margin:18px auto 0;
  color:var(--text);
  font-size:14px;
  line-height:18px;
  text-decoration:none;
}
.forgot:hover{text-decoration:underline}

.form-status{
  min-height:15px;
  margin:7px 0 0;
  color:var(--label);
  font-size:11px;
  line-height:15px;
  text-align:center;
}
.step-hidden{display:none}
.phone-only{margin-top:59px}
#phoneStep .continue{margin-top:24px}

@media(max-width:600px){
  .auth-page{padding:72px 12px 24px}
  .brand{margin-bottom:38px}
  .contact-form{width:min(360px,100%);height:325px;padding:25px}
  .field-group input,.continue{width:100%}
}

@media(max-height:720px) and (min-width:601px){
  .auth-page{padding-top:70px}
  .brand{margin-bottom:35px}
}