body{ display:flex; flex-direction:column; min-height:100vh; }
main.hero{
  flex:1;
  display:grid;
  grid-template-columns:400px 1fr;
  min-height:0;
}
@media (max-width:860px){
  main.hero{grid-template-columns:1fr; height:auto;}
}

.login-panel{
  background:linear-gradient(160deg, var(--navy-deep), var(--navy));
  color:#fff;
  padding:48px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
}
.login-panel .brand-inline{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.login-panel .brand-inline img{height:34px;}
.login-panel .brand-inline span{font-family:"Fredoka",sans-serif; font-size:20px; font-weight:600;}
.login-panel h1{font-size:22px; color:#fff; margin-bottom:2px;}
.login-panel .sub{font-size:13.5px; color:#B9C6DC; margin-bottom:6px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12.5px; color:#B9C6DC;}
.phone-input{display:flex; border-radius:8px; overflow:hidden; border:1px solid #2C4570;}
.phone-input span{background:#16305A; padding:11px 12px; font-size:14px; color:#B9C6DC; border-right:1px solid #2C4570;}
.phone-input input{
  flex:1; background:#16305A; border:none; color:#fff; padding:11px 12px; font-size:15px; font-family:inherit;
}
.password-input{display:flex; border-radius:8px; overflow:hidden; border:1px solid #2C4570;}
.password-input input{
  flex:1; background:#16305A; border:none; color:#fff; padding:11px 12px; font-size:15px; font-family:inherit;
}
.password-input button{
  background:#16305A; border:none; border-left:1px solid #2C4570; color:#B9C6DC;
  padding:0 14px; cursor:pointer; font-size:13px;
}
.text-input{
  background:#16305A; border:1px solid #2C4570; color:#fff; border-radius:8px; padding:11px 12px; font-size:15px; font-family:inherit; width:100%;
}
::placeholder{color:#8DA0BE;}
.btn-primary{
  background:var(--green);
  color:#fff; font-weight:600; text-align:center;
  padding:12px 16px; border-radius:8px; border:none; font-size:15px;
  text-decoration:none; display:block; cursor:pointer; width:100%;
}
.btn-primary:hover{background:var(--green-light); text-decoration:none;}
.consent{font-size:12px; color:#A9BAD5; line-height:1.5;}
.consent a{color:#DCE9FA; text-decoration:underline;}
.signup-note{
  font-size:12.5px; color:#A9BAD5; border-top:1px solid #2C4570; padding-top:16px;
}
.signup-note a{color:var(--green-light);}
.forgot-link{font-size:12px; color:#A9BAD5;}
.forgot-link a{color:#DCE9FA; text-decoration:underline;}
.login-error{
  background:#7A1F2B; color:#fff; border-radius:8px; padding:10px 12px; font-size:13px;
}
.login-user-note{font-size:13px; color:#B9C6DC;}
.login-user-note a{color:var(--green-light);}

.info-panel{
  padding:44px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:26px;
}
.info-panel h2{font-size:26px; color:var(--navy); max-width:16ch;}
.info-panel .lede{font-size:15px; color:var(--muted); max-width:48ch;}
.steps{display:flex; gap:22px; flex-wrap:wrap;}
.step{flex:1; min-width:160px;}
.step .icon{
  width:42px; height:42px; border-radius:10px;
  background:#EAF3FB; display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
}
.step .icon svg{width:22px; height:22px;}
.step h3{font-size:14.5px; color:var(--navy); font-family:"Plus Jakarta Sans"; font-weight:700; margin-bottom:4px;}
.step p{font-size:13px; color:var(--muted); margin:0;}