.hs-signup-main {
  align-items: flex-start;
  overflow-y: auto;
}

.hs-signup-panel {
  width: min(100%, 600px);
  margin: auto 0;
}

.hs-signup-card {
  margin: 28px 0;
}

.hs-signup-form {
  margin: 0;
}

.hs-signup-card .hs-divider,
.hs-signup-form .hs-input::placeholder {
  color: var(--hs-muted);
}

.hs-signup-form .hs-input::placeholder {
  opacity: 1;
}

.hs-signup-password-rules {
  margin-top: -5px;
}

.hs-signup-password-rules li {
  transition: color 150ms ease;
}

.hs-field-error {
  margin: 7px 2px 0;
  color: var(--hs-danger);
  font-size: 0.76rem;
  font-weight: 620;
  line-height: 1.45;
}

.hs-field-error[hidden] {
  display: none;
}

.hs-signup-form .hs-input:user-invalid {
  border-color: #dc6b62;
}

.hs-signup-form .hs-input:user-valid:not(:placeholder-shown) {
  border-color: #82b993;
}

.hs-signup-form .hs-primary-button[aria-busy="true"] {
  cursor: wait;
}

@media (max-width: 840px) {
  .hs-signup-main {
    overflow-y: visible;
  }

  .hs-signup-panel {
    width: min(100%, 640px);
  }

  .hs-signup-card {
    margin: 0;
  }
}

@media (max-width: 560px) {
  .hs-signup-card {
    padding-bottom: 30px;
  }

  .hs-signup-password-rules {
    gap: 8px;
  }

  .hs-signup-form .hs-field {
    margin-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-signup-password-rules li,
  .hs-signup-form .hs-input,
  .hs-signup-form .hs-primary-button {
    transition: none;
  }
}

@media (forced-colors: active) {
  .hs-field-error {
    color: CanvasText;
  }
}