/* Sign-up page and the page after payment. Builds on home.css (form) and docs.css (doc layout). */
.signup {
  padding-block: var(--s-4) var(--section);
}

.signup__head {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-5) var(--s-7);
}

.signup__head h1 {
  max-width: 12ch;
  font-size: clamp(2.9rem, 1.4rem + 7.4vw, 7.5rem);
  line-height: 0.86;
}

.signup__grid {
  display: grid;
  gap: var(--s-7);
}

.signup__copy {
  display: grid;
  gap: var(--s-5);
  align-content: start;
}

/* What happens after you pay: three numbered steps */
.after {
  display: grid;
  gap: var(--s-4);
  counter-reset: after;
}

.after li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  counter-increment: after;
}

.after li::before {
  content: counter(after);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: var(--rule) solid var(--ink);
  border-radius: var(--radius-key);
  background: var(--paper-white);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
}

.after h3 {
  font-size: var(--text-lg);
}

/* The plan card, one choice for now. It sits in a .field, so the label look is reset. */
.field .plan {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.plan {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  border: var(--rule) solid var(--ink);
  background: var(--yellow);
}

.plan input,
.choice input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--ink);
}

.plan__name {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan__note {
  display: block;
  margin-top: var(--s-1);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

fieldset.field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset.field legend {
  margin-bottom: var(--s-2);
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.choice {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-weight: 600;
}

.choice[aria-invalid="true"] {
  color: var(--red);
}

.choice-wrap {
  display: grid;
  gap: var(--s-2);
}

/* After payment */
.paid {
  display: grid;
  gap: var(--s-5);
  max-width: 50rem;
  margin-top: var(--s-6);
}

.paid__banner {
  padding: clamp(var(--s-5), 5vw, var(--s-7));
  border: var(--rule) solid var(--ink);
  background: var(--yellow);
  box-shadow: 8px 8px 0 var(--ink);
}

.paid__banner h1 {
  max-width: 16ch;
  font-stretch: 62%;
  font-size: var(--text-2xl);
  line-height: 0.92;
  text-transform: uppercase;
}

.paid__banner p {
  margin-top: var(--s-4);
  font-size: var(--text-lg);
}

.keybox {
  padding: clamp(var(--s-4), 4vw, var(--s-6));
  border: var(--rule) solid var(--ink);
  background: var(--paper-white);
}

.keybox h2 {
  font-size: var(--text-xl);
}

.keybox .code {
  margin-block: var(--s-4);
}

.keybox__warn {
  padding: var(--s-3) var(--s-4);
  border-left: var(--rule-heavy) solid var(--red);
  background: var(--paper);
  font-weight: 600;
}

.keybox__error {
  padding: var(--s-3) var(--s-4);
  border-left: var(--rule-heavy) solid var(--red);
  background: var(--paper);
  color: var(--red);
  font-weight: 700;
}

.key-value {
  word-break: break-all;
}

@media (min-width: 62rem) {
  .signup__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-8);
  }
}