/* Account creation. Shares the login page's shell and form styling
   (login.css); everything here is the extra field hints and the
   what-you-get box that only signup has. */

.signup-shell {
  max-width: 480px; /* the what-you-get list needs a little more room than login */
}

/* Guidance under an input — quieter than the label above it. */
.signup-hint {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-weight: 400;
}

/* The join code arrives filled in from an invite link, but it is still a code
   somebody may want to check against the one in their email, so it gets the
   same monospace treatment it has on the Admin panel. */
#signup-joincode {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Sits under the submit button, inside the form, because that is where the
   agreement actually happens — quiet, but not hidden away in a footer. */
.signup-consent {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

.signup-consent a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

.signup-alt {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
}

.signup-alt a {
  color: #fff;
  font-weight: 600;
}

/* ── What a new company gets ─────────────────────────────────────
   Where the plan picker used to be. Creating a company is free now, so this
   block states what that includes instead of asking for a decision — boxed
   in the same shape the picker had. */

.signup-free {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
}

.signup-free-title {
  margin: 0;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}

.signup-free-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.83rem;
  line-height: 1.55;
}

.plan-foot { margin: 0; }
.plan-foot a { color: rgba(255, 255, 255, 0.85); text-decoration: underline; }