.auth-stage{display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,7vw,100px);
  align-items:center;
  padding-block:72px;
  max-width:1120px}
.auth-story h1{font-size:clamp(48px,6vw,80px);
  line-height:1.02;
  margin:20px 0}
.auth-story>p{max-width:390px;
  font-size:18px;
  line-height:1.7}
.auth-benefits{display:grid;
  gap:16px;
  margin:32px 0}
.auth-benefits span{display:flex;
  align-items:center;
  gap:12px}
.auth-benefits svg,.auth-security svg{width:18px;
  height:18px;
  color:#245be6;
  flex-shrink:0}
.auth-card{padding:clamp(24px,4vw,40px);
  background:#fff;
  border:1px solid #d9e2ec;
  border-radius:24px;
  box-shadow:0 20px 70px #1020340d;
  color:#102034}
.auth-switch{display:flex;
  background:#edf2f8;
  border-radius:12px;
  padding:5px;
  margin-bottom:30px}
.auth-switch a{flex:1;
  text-align:center;
  padding:12px 8px;
  border-radius:9px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  color:#46566b}
.auth-switch a[aria-current=page]{background:#fff;
  color:#164acb;
  box-shadow:0 2px 8px #10203415}
.auth-card h2{font-size:30px;
  line-height:1.12;
  margin-bottom:12px}
.auth-lead{color:#526273;
  line-height:1.6;
  margin-bottom:26px}
.auth-card .auth-form{display:grid;
  gap:10px}
.auth-form>label{font-weight:600;
  font-size:14px;
  margin-top:6px}
.auth-form input:not([type=checkbox]){width:100%;
  min-width:0;
  min-height:48px;
  border:1px solid #b8c7d8;
  border-radius:9px;
  background:#fff;
  color:#102034;
  padding:12px 14px;
  margin-top:0}
.auth-form input:focus{outline:3px solid #245be630;
  outline-offset:1px;
  border-color:#245be6}
.auth-password{display:flex;
  align-items:center;
  position:relative}
.auth-password input{padding-right:70px!important}
.auth-password button{position:absolute;
  right:8px;
  background:transparent;
  border:0;
  padding:10px;
  color:#164acb;
  font-size:12px;
  font-weight:600;
  cursor:pointer}
.auth-strength{display:grid;
  gap:6px}
.auth-strength meter{width:100%;
  height:8px}
.auth-strength span,.auth-footnote{font-size:12px;
  line-height:1.6;
  color:#526273}
.auth-form .auth-terms{display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:400;
  line-height:1.6;
  font-size:12px;
  margin:12px 0}
.auth-terms input{width:18px;
  height:18px;
  margin-top:2px;
  flex-shrink:0;
  accent-color:#245be6}
.auth-card a:not(.button){color:#164acb}
.auth-forgot{justify-self:end;
  font-size:13px;
  margin:6px 0 14px}
.auth-form>.button{margin-top:12px;
  min-height:50px}
.auth-security{display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  color:#526273;
  margin:26px 0 0}
.auth-card [hidden]{display:none!important}
.auth-verification{border:1px solid #ccd9ec;
  border-radius:14px;
  padding:22px;
  margin:22px 0;
  background:#f2f6fc}
.auth-verification form{display:inline-block;
  margin:12px 12px 0 0}
.auth-footnote{margin:20px 0}

@media(max-width:760px){.auth-stage{grid-template-columns:1fr;
  gap:28px;
  padding-block:36px}
.auth-story h1{font-size:44px;
  margin:12px 0}
.auth-story h1 br{display:none}
.auth-story>p{font-size:15px}
.auth-benefits,.auth-story>a{display:none}
.auth-card{padding:24px;
  border-radius:18px}
.auth-card h2{font-size:27px}
.auth-security{font-size:11px}
}

@media(prefers-reduced-motion:no-preference){.auth-switch a{transition:background .18s,color .18s}
.auth-card{animation:auth-enter .3s ease-out}
@keyframes auth-enter{from{opacity:0;
  transform:translateY(8px)}
to{opacity:1;
  transform:none}
}
}


.auth-card .auth-terms>span{font-size:12px;
  color:#526273}
.page-auth .cart-bubble{display:none}