.signup-body {

  background-color: var(--color-bg);

  color: var(--color-text);

  margin: 0;

}



.signup-header {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.875rem;

  padding: 1.5rem 1rem;

  border-bottom: 1px solid var(--color-border);

  background: var(--color-surface);

}



.signup-header__theme-toggle {

  position: absolute;

  right: 1rem;

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  align-items: center;

  justify-content: center;

  width: 2rem;

  height: 2rem;

  padding: 0;

  background-color: transparent;

  border: 1px solid var(--color-border);

  border-radius: 4px;

  color: var(--color-text-muted);

  cursor: pointer;

  transition: background-color 0.15s, color 0.15s, border-color 0.15s;

}



.signup-header__theme-toggle:hover {

  color: var(--color-text);

  border-color: var(--color-text-muted);

}



.signup-header__theme-toggle svg {

  width: 16px;

  height: 16px;

  stroke: currentColor;

  fill: none;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

}



/* Show moon in light mode, sun in dark mode */

.signup-header__theme-toggle .icon-moon { display: block; }

.signup-header__theme-toggle .icon-sun  { display: none; }



[data-theme="dark"] .signup-header__theme-toggle .icon-moon { display: none; }

[data-theme="dark"] .signup-header__theme-toggle .icon-sun  { display: block; }



.signup-header__logo {

  height: 48px;

  width: auto;

}



.signup-header__title {

  font-size: 1.25rem;

  font-weight: 700;

  color: var(--color-accent);

  letter-spacing: 0.01em;

}



.signup-main {

  max-width: 720px;

  margin: 0 auto;

  padding: 2rem 1rem 4rem;

}



.signup-intro {

  margin-bottom: 1.5rem;

}



.signup-intro__title {

  font-size: 1.6rem;

  font-weight: 700;

  margin: 0 0 0.5rem;

}



.signup-intro__lead {

  font-size: 0.9375rem;

  color: var(--color-text-muted);

  line-height: 1.5;

  margin: 0;

}



.signup-main .detail-card {

  margin-bottom: 1.25rem;

}



.signup-main .detail-card__note {

  margin: 0 0 0.75rem;

  font-size: 0.8125rem;

  line-height: 1.4;

  color: var(--color-text-muted);

}



.signup-main .form-checks--single {

  grid-template-columns: 1fr;

}



/* Landing page — volunteer / provider options */

.signup-options {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1.25rem;

}



.signup-option {

  display: flex;

  flex-direction: column;

  gap: 0.625rem;

  padding: 1.75rem 1.5rem;

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: 10px;

  text-decoration: none;

  color: inherit;

  transition: border-color 0.15s, box-shadow 0.15s;

}



.signup-option:hover {

  border-color: var(--color-accent);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

}



.signup-option__title {

  margin: 0;

  font-size: 1.25rem;

  font-weight: 700;

  color: var(--color-accent);

}



.signup-option__desc {

  margin: 0;

  flex: 1;

  font-size: 0.9375rem;

  line-height: 1.5;

  color: var(--color-text-muted);

}



.signup-option__cta {

  font-weight: 600;

  font-size: 0.9375rem;

  color: var(--color-cta);

}



.signup-main .form-actions .btn--primary {

  padding: 0.7rem 2.25rem;

  font-size: 1.0625rem;

  border-radius: 6px;

}



.signup-thanks p {

  font-size: 0.9375rem;

  line-height: 1.5;

  color: var(--color-text-muted);

}



.signup-flash {

  padding: 0.75rem 1rem;

  border-radius: 6px;

  font-size: 0.9375rem;

  margin-bottom: 1.25rem;

}



.signup-flash--notice {

  background-color: #f0fdf4;

  color: #15803d;

  border: 1px solid #bbf7d0;

}



.signup-flash--alert {

  background-color: #fef2f2;

  color: #b91c1c;

  border: 1px solid #fecaca;

}



/* ---------------------------------------------------------------------------

   Mobile — stack multi-input rows, nested fields and checkbox grids

   --------------------------------------------------------------------------- */

@media (max-width: 640px) {

  .signup-main {

    padding: 1.5rem 0.875rem 3rem;

  }



  /* Side-by-side text inputs stack vertically */

  .signup-main .form-row {

    flex-direction: column;

    gap: 0.5rem;

  }



  /* Phone / address rows stack, and the fixed-width state/zip go full width */

  .signup-main .nested-fields__row {

    flex-direction: column;

    align-items: stretch;

    gap: 0.5rem;

  }



  .signup-main .nested-fields__state,

  .signup-main .nested-fields__zip {

    flex: 1 1 auto !important;

  }



  /* Checkbox grids collapse to a single column */

  .signup-main .form-checks {

    grid-template-columns: 1fr;

  }



  /* Landing options stack */

  .signup-options {

    grid-template-columns: 1fr;

  }



  /* Full-width, easy-to-tap submit button */

  .signup-main .form-actions .btn--primary {

    width: 100%;

    justify-content: center;

  }



  /* Keep the centered logo/title clear of the absolutely-positioned toggle */

  .signup-header {

    gap: 0.5rem;

    padding: 1rem 3.25rem 1rem 1rem;

  }



  .signup-header__logo {

    height: 38px;

  }



  .signup-header__title {

    font-size: 1rem;

  }

}



/* Honeypot field: kept off-screen (not display:none/visibility:hidden,

   which bots commonly check for) rather than visually hidden in place. */

.hp-field {

  position: absolute;

  left: -9999px;

  top: -9999px;

  width: 1px;

  height: 1px;

  overflow: hidden;

}