.join-form {
  max-width: var(--form-width);
}

/* The sentence wraps at the form's width, so the box sits on its first line
   rather than at the vertical middle the label would give it. The field
   above ends in its reserved message line, so the top margin is the smaller
   step. */
.join-terms {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: var(--space-3) 0 var(--space-4);
  font-size: 0.9375rem;
  font-weight: var(--weight-body);
  line-height: 1.5;
}

.join-terms .checkbox {
  margin: calc((0.9375rem * 1.5 - var(--check-size)) / 2) 0 0;
  flex: none;
}

.join-terms a {
  text-decoration: none;
}

/* Each document's name stays in one piece, so "Privacy Policy" never breaks
   in two. */
.join-terms a {
  white-space: nowrap;
}

.join-error {
  color: var(--danger-ink, var(--danger));
  margin: 0 0 var(--space-4);
}

.join-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.join-actions {
  margin-top: var(--space-2);
}

/* The button spans the form, like the payment button on /purchase, so the
   one action reads as the end of the form. */
.join-actions .button {
  width: 100%;
  justify-content: center;
}