/* ============================================================
   Membership lead pages (templates/leads/*). Loaded only by those
   pages; every selector is under .lead, so nothing here reaches the
   base nav, the footer or any other page. Mobile first, the homepage
   palette (static/css/home.css arrives in homepage part 2), no JS.
   ============================================================ */

.lead {
  --lead-ink: #3B2F28;
  --lead-soft: #5A4A3E;
  --lead-muted: #6E5E50;
  --lead-cream: #F8F4EE;
  --lead-line: #E2D6C4;
  --lead-teal: #2F7A70;
  --lead-terracotta: #A9523E;     /* white text 5.30:1 */
  --lead-terracotta-dark: #7F3A2A;
  --lead-error: #A0262E;          /* 7.47:1 on white */
  --lead-error-tint: #FBEDEC;
  --lead-focus: #2F7A70;
  background: var(--lead-cream);
  color: var(--lead-ink);
  padding: 32px 16px 56px;
  font-family: 'Inter', sans-serif;
}
.lead-card {
  max-width: 640px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #EDE3D6;
  border-radius: 16px;
  padding: 24px 20px;
}
.lead h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: var(--lead-ink);
  margin: 0 0 12px;
}
.lead-kicker {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lead-teal);
  margin: 0 0 10px;
}
.lead-intro { font-size: 17px; line-height: 1.6; color: var(--lead-soft); margin: 0 0 24px; }
.lead a { color: var(--lead-terracotta); text-decoration: underline; }
.lead a:hover { color: var(--lead-terracotta-dark); }

.lead-field { margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }
.lead-field label, .lead-label, .lead-field legend {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--lead-ink);
  padding: 0;
}
.lead-optional { font-weight: 400; color: var(--lead-muted); }
.lead-hint { font-size: 14px; color: var(--lead-muted); margin: 0 0 6px; }
.lead-fixed { margin: 0; font-size: 16px; color: var(--lead-soft); }
.lead input[type="text"], .lead input[type="email"], .lead input[type="tel"],
.lead select, .lead textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: 16px 'Inter', sans-serif;   /* 16px keeps iOS from zooming in */
  color: var(--lead-ink);
  background: #FFFFFF;
  border: 1.5px solid var(--lead-line);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 48px;
}
.lead textarea { resize: vertical; line-height: 1.5; }
.lead-field--error input, .lead-field--error select, .lead-field--error textarea {
  border-color: var(--lead-error);
}
.lead-error { color: var(--lead-error); font-size: 14px; font-weight: 700; margin: 6px 0 0; }
.lead-alert {
  background: var(--lead-error-tint);
  color: var(--lead-error);
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 700;
  margin: 0 0 20px;
}
.lead-choice {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400 !important;
  line-height: 1.5;
  margin: 0 0 10px !important;
  cursor: pointer;
}
.lead-choice input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--lead-teal); }
.lead-turnstile { margin: 0 0 20px; }

.lead-submit {
  display: block;
  width: 100%;
  font: 700 17px 'Inter', sans-serif;
  color: #FFFFFF;
  background: var(--lead-terracotta);
  border: none;
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
}
.lead-submit:hover { background: var(--lead-terracotta-dark); }
.lead-small { font-size: 14px; color: var(--lead-muted); line-height: 1.5; margin: 14px 0 0; text-align: center; }

.lead input:focus-visible, .lead select:focus-visible, .lead textarea:focus-visible,
.lead button:focus-visible, .lead a:focus-visible {
  outline: 3px solid var(--lead-focus);
  outline-offset: 2px;
}

/* The honeypot: off screen, out of the tab order, hidden from readers. */
.lead-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead-card--thanks { text-align: center; padding: 40px 24px; }

/* ── Circle of Ten story (apply page) ──────────────────────────────
   Static reading column on the cream background, then the form card.
   The term lists stack on phones and go two-column from 768px. */
.lead-story {
  max-width: 680px;
  margin: 0 auto 32px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--lead-soft);          /* on cream 7.72:1 */
}
.lead-story p { margin: 0 0 16px; }
.lead-lede { font-size: 19px; color: var(--lead-ink); }   /* 11.81:1 */
.lead-story h2, .lead-apply h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  color: var(--lead-ink);
  margin: 36px 0 12px;
}
.lead-apply h2 { margin-top: 0; }
.lead-terms { margin: 0 0 16px; padding: 0; }
.lead-term { padding: 12px 0; border-top: 1px solid var(--lead-line); }
.lead-term:last-child { border-bottom: 1px solid var(--lead-line); }
.lead-term dt { font-weight: 700; color: var(--lead-ink); margin: 0 0 4px; }
.lead-term dd { margin: 0; }

@media (min-width: 768px) {
  .lead { padding: 56px 24px 88px; }
  .lead-card { padding: 40px 44px; }
  .lead h1 { font-size: 40px; }
  .lead-kicker { font-size: 14px; }
  .lead-story { font-size: 18px; margin-bottom: 48px; }
  .lead-story h2 { font-size: 28px; margin-top: 44px; }
  .lead-apply h2 { font-size: 32px; }
  .lead-term { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); column-gap: 24px; }
  .lead-term dt { margin: 0; }
}