/* ============================================================
   REFERRALS PAGE
   ============================================================ */

.page-hero .btn {
  margin-top: var(--sp-8);
}

/* ── Who can refer ── */
.ref-who-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.ref-who-grid li {
  background: var(--bc-white);
  border: 1px solid var(--bc-border);
  border-left: 2px solid var(--bc-gold);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--t-small);
}

/* ── What to include ── */
.ref-include-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-16);
  align-items: start;
}
@media (max-width: 800px) {
  .ref-include-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}
.ref-checklist {
  counter-reset: ref-item;
  display: flex;
  flex-direction: column;
}
.ref-checklist li {
  counter-increment: ref-item;
  position: relative;
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-12);
  border-bottom: 1px solid var(--bc-border);
  font-size: var(--t-small);
}
.ref-checklist li::before {
  content: counter(ref-item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--sp-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-body-lg);
  color: var(--bc-gold);
}

/* ── Pathway badges ── */
.step .badge {
  display: inline-flex;
  margin-top: var(--sp-2);
}

/* ── Form ── */
#referral-form {
  scroll-margin-top: 88px;
}
.ref-form-actions {
  margin-top: var(--sp-8);
}