/* JUC brand tokens (2023 Brand Manual) — see juc-brand-design skill. */
:root {
  /* Primary */
  --juc-blue-900: #09384f;
  --juc-blue-700: #014b70;
  --juc-blue-200: #cedae2;
  /* Secondary */
  --juc-sand-200: #dbd5cd;
  --juc-sand-400: #bfb2a0;
  --juc-orange:   #df4e28;
  --juc-blue-100: #dee5ea;
  /* Practical neutrals */
  --juc-white:    #ffffff;
  --juc-ink:      #0d2531;
  --juc-grey-500: #5b6b74;

  /* Semantic */
  --color-bg: var(--juc-white);
  --color-text: var(--juc-ink);
  --color-text-muted: var(--juc-grey-500);
  --color-primary: var(--juc-blue-700);
  --color-accent: var(--juc-orange);
  --color-border: var(--juc-blue-200);

  /* Type */
  --font-display: "Exo", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Source Sans 3", "Myriad Pro", "Segoe UI", system-ui, sans-serif;

  /* Radius & shadow */
  --juc-radius: 10px;
  --juc-radius-lg: 16px;
  --juc-shadow: 0 6px 24px rgba(9, 56, 79, 0.12);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: transparent; /* transparent so the form blends into the host page when embedded */
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--juc-blue-900); line-height: 1.1; margin: 0; }
a { color: var(--color-primary); }

/* Layout ------------------------------------------------------------------ */
.signup {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem);
}

.signup__card {
  background: var(--juc-white);
  border: 1px solid var(--color-border);
  border-radius: var(--juc-radius-lg);
  box-shadow: var(--juc-shadow);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.signup__loading { padding: 2rem; text-align: center; }

.signup__header { margin-bottom: 1.75rem; }

.juc-display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--juc-blue-900);
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  line-height: 1.05;
}
.juc-display-accent {
  display: block;
  color: var(--juc-sand-400);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.6vw, 1.375rem);
  margin-top: 0.35rem;
}
.juc-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.signup__intro { margin: 0.85rem 0 0; color: var(--color-text-muted); }
.juc-muted { color: var(--color-text-muted); }

/* Fields ------------------------------------------------------------------ */
.signup__fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.25rem;
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--juc-blue-900);
}
.field .req { color: var(--juc-orange); margin-left: 0.15rem; }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--juc-ink);
  background: var(--juc-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--juc-radius);
  padding: 0.65rem 0.75rem;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--juc-blue-700);
  box-shadow: 0 0 0 3px rgba(1, 75, 112, 0.15);
}
.field input:invalid.touched { border-color: var(--juc-orange); }
.field .field-error { color: var(--juc-orange); font-size: 0.8125rem; min-height: 1em; }

/* Consent ----------------------------------------------------------------- */
.signup__consent { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.85rem; }
.signup__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.9rem;
  color: var(--juc-ink);
  cursor: pointer;
}
.signup__check input { margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--juc-blue-700); }
.signup__check a { text-decoration: underline; }

/* Captcha ----------------------------------------------------------------- */
.signup__captcha { margin: 1rem 0; min-height: 0; }

/* Button (the single orange CTA) ----------------------------------------- */
.juc-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--juc-white);
  background: var(--juc-orange);
  padding: 0.8rem 1.75rem;
  border: none;
  border-radius: var(--juc-radius);
  cursor: pointer;
  transition: filter .15s ease;
}
.juc-btn:hover { filter: brightness(0.93); }
.juc-btn:disabled { opacity: 0.6; cursor: progress; }

/* Errors & success -------------------------------------------------------- */
.signup__error {
  background: rgba(223, 78, 40, 0.08);
  border: 1px solid rgba(223, 78, 40, 0.4);
  color: #8c2d16;
  border-radius: var(--juc-radius);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.signup__success { text-align: center; }
.signup__success-mark {
  width: 56px; height: 56px; line-height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--juc-blue-700);
  color: var(--juc-white);
  font-size: 1.75rem;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 520px) {
  .signup__fields { grid-template-columns: 1fr; }
}