/* The referral program page (/referrals): who it is for and what they earn, how it works, the terms as a list of rates,
   then the sign-up. */
.ref-hero { padding: 150px 0 10px; }
.ref-hero h1 { font-size: var(--fs-big); text-wrap: balance; }
.ref-intro { margin: 30px 0 34px; max-width: var(--measure); font-size: var(--fs-body-lg); line-height: 1.55; color: var(--body); text-wrap: pretty; }

/* The terms: a ruled list, the figure first and its condition beside it (rate-list), not a second grid of boxes after
   the How it works steps (board, item 55). */
.ref-rates { margin: 0; border-bottom: 1px solid var(--line-soft); }   /* the rules run the width of the steps above */
.ref-rate { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, var(--measure)); justify-content: start; column-gap: 40px;   /* each condition sits beside its figure, as a settings row; the rules run full width */ align-items: baseline; padding: 26px 0; border-top: 1px solid var(--line-soft); }
.ref-rate dt { font-stretch: var(--display-stretch); font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: .5px; font-size: 34px; line-height: 1; color: var(--txt); }
.ref-rate dd { margin: 0; color: var(--body); line-height: var(--lh-body); text-wrap: pretty; }
.ref-note { margin: 26px 0 0 calc(16rem + 40px); max-width: var(--measure);   /* in the rows' description column, as the list's footer */ color: var(--body); line-height: var(--lh-body); text-wrap: pretty; }
.ref-terms { padding-bottom: var(--sec-y); }

/* The partner's code and link, shown in place of the form once Nowlark has minted them. */
.ref-code { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ref-code p { margin: 0; }
.ref-code code { font: 700 var(--fs-body-lg)/1.4 var(--font); color: var(--txt); overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .ref-rate { grid-template-columns: 1fr; row-gap: 10px; padding: 22px 0; }
  .ref-rate dt { font-size: 28px; }
  .ref-note { margin-left: 0; }
}
@media (max-width: 640px) {
  .ref-hero { padding-top: 120px; }
}