:root {
  --signup-primary: #0b8d99;
  --signup-primary-dark: #08717b;
  --signup-ink: #172033;
  --signup-muted: #64748b;
  --signup-line: #dfe7f1;
}

.signup-page {
  min-height: 100vh;
  color: var(--signup-ink);
  background-color: #f4f8fb;
  background-position: center;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.signup-page::before {
  position: fixed;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, rgba(244, 248, 251, .91), rgba(234, 249, 248, .88));
}

.signup-page .signin-wrapper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 35px 18px;
}

.signup-page .signin-box {
  width: min(100%, 520px);
  padding: 34px;
  border: 1px solid rgba(223, 231, 241, .9);
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 65px rgba(15, 23, 42, .13);
}

.signup-page .signin-box.signup { width: min(100%, 720px); }

.signup-page .signin-box img {
  width: 180px;
  max-height: 85px;
  object-fit: contain;
}

.signup-page .signin-title-secondary {
  margin: 18px 0 18px;
  color: var(--signup-ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.signup-page .signin-box > center {
  display: block;
  margin-bottom: 20px;
}

.signup-page .signin-box > center br {
  display: none;
}

.signup-page .signin-box > center + p,
.signup-page .signin-box > p[style*="margin-top"] {
  margin-top: 0 !important;
  margin-bottom: 20px;
}

.signup-page .signup-separator {
  margin-top: 22px !important;
  color: var(--signup-muted);
}

.signup-page .signup-separator::before,
.signup-page .signup-separator::after { background: var(--signup-line); }

.signup-page p,
.signup-page label {
  color: var(--signup-muted);
  line-height: 1.55;
}

.signup-page .form-control {
  min-height: 46px;
  border: 1px solid var(--signup-line);
  border-radius: 11px;
  color: var(--signup-ink);
  background: #fff;
  box-shadow: none;
}

.signup-page .form-control:focus {
  border-color: var(--signup-primary);
  box-shadow: 0 0 0 3px rgba(11, 141, 153, .12);
}

.signup-page .btn-primary {
  min-height: 48px;
  border: 0;
  border-radius: 11px;
  background: var(--signup-primary);
  font-weight: 800;
  box-shadow: 0 9px 22px rgba(11, 141, 153, .22);
}

.signup-page .btn-primary:hover,
.signup-page .btn-primary:focus { background: var(--signup-primary-dark); }

.signup-page hr { border-color: var(--signup-line); }

@media (max-width: 575px) {
  .signup-page .signin-wrapper { align-items: flex-start; padding: 18px 12px; }
  .signup-page .signin-box,
  .signup-page .signin-box.signup { padding: 24px 18px; }
  .signup-page .signin-title-secondary { font-size: 19px; }
}