.signup-card {
  background: var(--cf-surface);
  border: 2px solid var(--cf-border);
  border-radius: 8px;
  padding: 2rem;
  width: 100%;
  max-width: 580px;
  margin: 2rem auto;
}
.signup-card .plan-card {
  border: 2px solid var(--cf-border);
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
}
.signup-card .plan-card.active {
  border-color: var(--cf-ink);
  background: var(--cf-page);
}
.signup-password-wrap { position: relative; }
.signup-password-wrap input { padding-right: 3rem; }
.signup-password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cf-ink);
  padding: 0;
}
.signup-password-toggle:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: 2px; }
.signup-coupon > summary { cursor: pointer; color: var(--cf-ink); }
@media (max-width: 575.98px) {
  .signup-card { padding: 1.25rem; margin: 1rem auto; }
}