/* Formation signup wizard: public design tokens drive both themes. */
.signup-layout {
  --signup-accent: var(--bd-electric);
  --signup-ink: var(--bd-text);
  --signup-muted: var(--bd-muted);
  --signup-card: var(--bd-card);
  --signup-soft: var(--bd-soft);
  --signup-line: var(--bd-border);
  --signup-link: var(--bd-link);
  --signup-focus: var(--bd-focus);
  --signup-success: var(--bd-green);
  --signup-danger: var(--bd-terracotta);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap: 2rem;
  width: min(1120px, 100%);
  margin: 3rem auto;
  padding: 1.5rem;
  box-sizing: border-box;
  color: var(--signup-ink);
}
.signup-layout * { box-sizing: border-box; }
.signup-panel,
.signup-summary {
  min-width: 0;
  padding: 2.5rem;
  background: var(--signup-card);
  border: 1px solid var(--signup-line);
  border-radius: 1.5rem;
  box-shadow: var(--bd-shadow);
}
.signup-brand { display: inline-flex; gap: .5rem; align-items: center; color: var(--signup-ink); font-weight: 800; text-decoration: none; }
.signup-brand span { font-weight: 500; }
.signup-panel h1 { margin: 1.7rem 0 .7rem; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2; }
.signup-panel h2,
.signup-summary h2 { margin: 1.5rem 0; font-size: 1.25rem; }
.signup-muted,
.signup-login { color: var(--signup-muted); font-size: .95rem; line-height: 1.6; }
.signup-progress { height: 7px; margin: 1.6rem 0; overflow: hidden; background: var(--signup-soft); border-radius: 99px; }
.signup-progress span { display: block; width: 4%; height: 100%; background: var(--signup-accent); }
.signup-progress .is-step-two { width: 50%; }
.signup-progress .is-step-three { width: 100%; }
.signup-steps { display: flex; justify-content: space-between; gap: .7rem; padding: 0; margin: 0 0 1.8rem; color: var(--signup-muted); font-size: .8rem; list-style: none; }
.signup-steps li { flex: 1; line-height: 1.4; }
.signup-steps li > span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: .5rem; color: var(--signup-muted); background: var(--signup-soft); border-radius: 50%; font-weight: 700; }
.signup-steps .active > span { color: var(--bd-card); background: var(--signup-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signup-accent) 14%, transparent); }
.signup-steps .complete > span { color: var(--bd-card); background: var(--signup-success); }
.signup-steps .active,
.signup-steps .complete { color: var(--signup-ink); font-weight: 600; }
.signup-panel form > div:not(.signup-actions):not(.signup-row) { margin-bottom: 1rem; }
.signup-panel label { display: block; margin-bottom: .45rem; color: var(--signup-ink); font-size: .9rem; font-weight: 600; }
.signup-panel input:not([type="checkbox"]):not([type="hidden"]),
.signup-panel select { width: 100%; min-height: 46px; padding: .85rem .9rem; color: var(--signup-ink); background: var(--signup-card); border: 1px solid var(--signup-line); border-radius: .65rem; font: inherit; }
.signup-panel input:focus,
.signup-panel select:focus { outline: 2px solid color-mix(in srgb, var(--signup-focus) 55%, transparent); outline-offset: 2px; border-color: var(--signup-focus); }
.signup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.signup-consents { display: grid; gap: 1rem; margin: 1.4rem 0; }
.signup-consents label { display: flex; align-items: flex-start; gap: .65rem; font-weight: 400; line-height: 1.55; }
.signup-consents input { flex: 0 0 19px; width: 19px; height: 19px; margin-top: .25rem; accent-color: var(--signup-accent); }
.signup-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .7rem; margin: 1.5rem 0 1rem; }
.signup-primary,
.signup-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .8rem 1.3rem; border: 1px solid transparent; border-radius: 99px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.signup-primary { color: var(--bd-card); background: var(--signup-accent); }
.signup-primary:hover { color: var(--bd-card); background: color-mix(in srgb, var(--signup-accent) 82%, var(--signup-ink)); }
.signup-secondary { color: var(--signup-ink); background: var(--signup-soft); border-color: var(--signup-line); }
.signup-primary:focus-visible,
.signup-secondary:focus-visible { outline: 3px solid var(--signup-focus); outline-offset: 3px; }
.signup-summary { align-self: start; position: sticky; top: 2rem; }
.signup-eyebrow { color: var(--signup-accent); font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
.signup-summary-item,
.signup-selected { padding: 1.15rem; margin: 1rem 0; overflow-wrap: anywhere; background: var(--signup-soft); border-radius: 1rem; }
.signup-summary-item h3 { margin: 0 0 .5rem; font-size: .95rem; }
.signup-summary-item p,
.signup-selected p { margin: .3rem 0; color: var(--signup-muted); line-height: 1.6; }
.signup-cohort-status { margin: .45rem 0 0; color: var(--signup-muted); font-size: .85rem; line-height: 1.4; }
.signup-cohort-status[data-state="error"] { color: var(--signup-danger); }
.signup-error { padding: 1rem; overflow-wrap: anywhere; color: var(--signup-danger); background: color-mix(in srgb, var(--signup-danger) 12%, var(--signup-card)); border: 1px solid color-mix(in srgb, var(--signup-danger) 35%, var(--signup-line)); border-radius: .6rem; }
.signup-panel code { overflow-wrap: anywhere; font-size: .85rem; }
.signup-verification-account { overflow-wrap: anywhere; line-height: 1.8; }
.signup-verification-panel form { margin: 1rem 0; }
.signup-verification-panel input[name="code"] { font-size: 1.4rem; letter-spacing: .35em; text-align: center; }
.signup-layout a:not(.signup-primary):not(.signup-secondary):not(.signup-brand) { color: var(--signup-link); text-decoration: underline; }
html[data-design-scope="site"][data-design-theme="light"] .signup-layout,
html[data-design-scope="site"][data-design-theme="dark"] .signup-layout { color: var(--bd-text); }
@media (max-width: 800px) {
  .signup-layout { grid-template-columns: 1fr; gap: 1rem; margin: 1rem auto; padding: 1rem; }
  .signup-panel, .signup-summary { padding: 1.5rem; border-radius: 1rem; }
  .signup-summary { position: static; }
  .signup-summary-item { padding: .8rem; }
  .signup-steps { font-size: .75rem; }
}
@media (max-width: 420px) {
  .signup-row { grid-template-columns: 1fr; }
  .signup-panel { padding: 1.2rem; }
  .signup-actions > * { flex: 1; }
  .signup-brand { font-size: .95rem; }
  .signup-steps { gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) { .signup-layout * { scroll-behavior: auto; transition: none; } }