/* Draco Staff Development — v8
 * signup.css — styles specific to the public signup / trial page (signup.php).
 * Loaded AFTER landing.css, so it reuses .hero, .section, .features, .cta-band,
 * .checklist, .btn and the design tokens; this file only adds the signup form
 * panel and a few page-specific bits. All colours come from tokens so it tracks
 * the light/dark theme automatically.
 */

/* Hero: let the form panel sit beside the copy and align to the top. */
.su-hero { align-items: start; }
.su-hero__checks { margin-top: var(--space-5); }

/* -------- Tighter vertical rhythm for this conversion page --------
   Scoped to .signup-page so the marketing landing page keeps its airier spacing.
   The landing defaults are generous (section padding up to 6rem, footer margin 5rem);
   a signup page reads better tighter. */
.signup-page .hero__inner { padding-block: clamp(1.5rem, 3vw, 2.75rem); }
.signup-page .section { padding-block: clamp(2rem, 4vw, 3.25rem); }
.signup-page .su-sectionhead { margin-bottom: var(--space-8); }
.signup-page .site-footer { margin-top: var(--space-10); padding-top: var(--space-12); }
.signup-page .cta-band { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); }
.signup-page .feature { padding: var(--space-5); }

/* -------- The signup form panel (right column of the hero) -------- */
.su-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.su-panel__head { margin-bottom: var(--space-5); }
.su-panel__head h2 {
  font-size: var(--fs-2xl);
  color: var(--brand-navy);
  margin: 0 0 var(--space-1);
  letter-spacing: -0.02em;
}
:root[data-theme="dark"] .su-panel__head h2 { color: var(--text); }
.su-panel__head p { color: var(--text-2); font-size: var(--fs-sm); margin: 0; }

.su-form .su-field { margin-bottom: var(--space-4); }
.su-form label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin-bottom: var(--space-2);
}
.su-form input,
.su-form select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--form-surface, var(--surface));
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.3;
  transition: border-color var(--transition, .15s), box-shadow var(--transition, .15s);
}
.su-form input:focus,
.su-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(91, 155, 213, 0.28));
}
.su-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.su-hint { display: block; margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--text-3); }

.su-terms {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.45;
}
.su-terms input { width: auto; margin-top: 0.15rem; flex: none; }
.su-terms a { color: var(--link); }

.su-form .btn { margin-top: var(--space-2); }
.su-reassure {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.su-reassure .icon { width: 16px; height: 16px; }
.su-signin { text-align: center; margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.su-signin a { color: var(--link); font-weight: var(--fw-semibold); }

.su-errors {
  background: var(--danger-bg, rgba(220, 38, 38, 0.08));
  border: 1px solid var(--danger-border, rgba(220, 38, 38, 0.30));
  color: var(--danger);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--fs-sm);
}
.su-errors ul { margin: var(--space-2) 0 0; padding-left: 1.1rem; }
.su-errors li { margin-bottom: 0.15rem; }

/* -------- Shared section header -------- */
.su-sectionhead { text-align: center; max-width: 46rem; margin: 0 auto var(--space-10); }
.su-sectionhead h2 {
  font-size: var(--fs-3xl);
  color: var(--brand-navy);
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 0;
}
:root[data-theme="dark"] .su-sectionhead h2 { color: var(--text); }
.su-sectionlead { color: var(--text-2); font-size: var(--fs-lg); margin: var(--space-3) 0 0; }

/* -------- Pricing card -------- */
.su-pricing { text-align: center; }
.su-price-card {
  max-width: 30rem;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}
.su-price-amt {
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  font-weight: var(--fw-extra);
  color: var(--brand-navy);
  letter-spacing: -0.03em;
  line-height: 1;
}
:root[data-theme="dark"] .su-price-amt { color: var(--text); }
.su-price-amt span { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-2); letter-spacing: 0; }
.su-price-sub { color: var(--text-2); font-size: var(--fs-base); margin-top: var(--space-2); }
.su-price-card .checklist { max-width: 24rem; margin-inline: auto; text-align: left; }
.su-price-card .btn { margin-top: var(--space-6); }

/* Security band checklist emphasis */
.band .checklist strong { color: var(--text); font-weight: var(--fw-semibold); }

@media (max-width: 700px) {
  .su-grid2 { grid-template-columns: 1fr; }
}