/* referrals.css: layout for the two referral pages, /referrals and /affiliates (2026-09-29).
   Page layout only. The plate, the masthead layer, the hero and every token are style.css's;
   nothing here sets a colour that is not a var(--...), so the light theme follows the toggle.
   Its own file rather than more of style.css, because style.css is shared byte for byte with
   funded/public/site.css (tools/sync-site-chrome.sh) and these two pages are marketing only. */

/* /referrals: one card per partner, two across where there is room. */
.partners {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.partner {
  display: grid;
  align-content: start;
  gap: var(--s2);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  scroll-margin-top: 96px;
}
.partner .tag { margin: 0; }
.partner__name {
  margin: 0;
  font-family: var(--ui);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--parchment);
}
.partner__what { margin: 0; color: var(--text); }
.partner__links { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 0; }
.partner .block-note { margin: var(--s2) 0 0; font-size: 0.8rem; }

/* The one line that points at the other page. */
.ref-other { margin: var(--s5) 0 0; color: var(--muted); }
.ref-other a { color: var(--brass); }

/* /affiliates: the two buttons under the table, and the fine print under the steps. */
.aff-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.page-affiliates .steps { margin: 0; padding: 0; list-style: none; }
.page-affiliates .steps + .block-note { margin-top: var(--s3); }

/* Visually hidden, still read out: the heading that names the card list for a screen reader. */
.ref-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}