/* /aanmelden: the self-service signup. Built on site.css tokens. */
.signup { max-width: 520px; margin: 0 auto; padding: 32px 16px 64px; }
.signup h1 { margin: 28px 0 8px; }
.signup__lead { color: var(--color-ink-muted); line-height: 1.55; margin: 0 0 24px; }
.signup section p { line-height: 1.55; }

.field { margin: 0 0 18px; border: 0; padding: 0; }
.field label, .field legend { display: block; font-weight: 600; margin: 0 0 6px; padding: 0; }
.field__optional { font-weight: 400; color: var(--color-ink-subtle); }
.field input:not([type="radio"]) {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--color-ink);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.field input:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 1px; border-color: var(--color-forest); }
.field__hint { margin: 6px 0 0; font-size: 0.875rem; color: var(--color-ink-subtle); }

.plans .plan {
  display: flex; gap: 12px; align-items: flex-start; font-weight: 400; padding: 12px 14px; margin: 0 0 8px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer;
}
.plans .plan:has(input:checked) { border-color: var(--color-forest); background: var(--color-forest-tint); }
.plans .plan input { margin-top: 3px; accent-color: var(--color-forest); }
.plans small { color: var(--color-ink-subtle); font-size: 0.875rem; }

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

.consent { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; margin: 4px 0 20px; }
.consent input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--color-forest); }

.form-error {
  margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--color-status-check-bg); color: var(--color-status-check);
}
.signup__submit { width: 100%; }
.signup__submit[disabled] { opacity: 0.6; cursor: progress; }