/* The referral program page (Chris, Oct 20): simple, but with presence. A dark hero about helping people you know, with
   "Who could you help?" lit like the prism, three steps on cream, the two ways to earn on dark, then the short rules and the closing call to action. Built on
   site-shared.css and site-hireprism.css; the closing band reuses faq.css. */
.ref-hero{min-height:auto;padding:200px 0 160px}
.ref-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:44px;align-items:center}
/* Two set lines (Chris, Oct 20): "Help us connect great talent" / "with great teams." Sized so the first line fits. */
.ref-hero h1{font-size:clamp(30px,3.3vw,46px);line-height:1.12;margin-bottom:22px}
.ref-hero-copy{min-width:0}
.ref-hero-copy p{max-width:52ch}
.ref-hero-copy > p:not(.eyebrow):not(.ref-bonus){margin-bottom:22px}
/* The $500 on its own line (Chris, Oct 20): a small callout with a gift icon and a warm edge, apart from the paragraph. */
/* The callout keeps the width it had beside the original two buttons, 488px (Chris, Oct 20); the buttons keep their
   own widths. */
.ref-cta-group{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}
.hero .ref-bonus{width:min(488px,100%);max-width:100%;box-sizing:border-box;display:flex;align-items:center;gap:14px;margin:0 0 30px;padding:14px 18px;border:1px solid rgba(240,160,48,.35);border-left:4px solid #F0A030;border-radius:12px;background:rgba(240,160,48,.1);color:var(--cream);font-size:16.5px;line-height:1.5}
.ref-bonus svg{flex:none;width:26px;height:26px;fill:none;stroke:#F0A030;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ref-actions{display:flex;flex-wrap:wrap;gap:12px}
.ref-actions .btn-g{margin-left:0}

/* "Who could you help?": a glass card with the spectrum edge and a soft glow, the two kinds of people side by side.
   The $500 is one mention in the hero's paragraph (Chris, Oct 20: "The $500 is icing"). */
/* Centered on the headline-to-buttons block, not the eyebrow (Chris, Oct 20): the eyebrow and its gap are 55px, so the
   card starts 55px lower, which moves its center down by half that. Stacked layouts (900px and under) don't need it. */
.ref-figure{position:relative;margin-top:55px;padding:38px 36px 36px;border:1px solid rgba(254,252,247,.14);border-radius:22px;
  background:linear-gradient(90deg,#4FC3F7,#7C6BF5 36%,#E05FA8 64%,#F0A030) top / 100% 4px no-repeat,rgba(254,252,247,.05);
  box-shadow:0 30px 80px -30px rgba(124,107,245,.45),0 20px 60px -30px rgba(240,160,48,.4)}
.hero .ref-figure-head{max-width:none;margin:0 0 22px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#D89250}
.ref-people{display:flex;flex-direction:column;gap:26px;margin:0;padding:0;list-style:none}
.ref-people li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.ref-people b{display:block;margin-bottom:6px;font-size:19.5px;color:var(--cream)}
.ref-people span:not(.ref-dot){font-size:16.5px;line-height:1.6;color:#CFC7BB}
.ref-dot{width:14px;height:14px;margin-top:8px;border-radius:50%}
.ref-dot.is-hire{background:#F0A030;box-shadow:0 0 0 5px rgba(240,160,48,.18)}
.ref-dot.is-talent{background:#4FC3F7;box-shadow:0 0 0 5px rgba(79,195,247,.18)}

/* Three steps */
.ref-steps-band{background:var(--cream);padding:104px 0 112px;scroll-margin-top:60px} /* "How it works" lands here, clear of the sticky header */
.ref-steps-band h2,.ref-ways h2{font-size:clamp(30px,3.6vw,44px);max-width:24ch;text-wrap:balance}
.ref-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:44px 0 0;padding:0;list-style:none;counter-reset:none}
.ref-steps li{position:relative;padding:30px 28px 28px;border:1px solid rgba(196,184,168,.55);border-radius:18px;background:#FFFFFF}
.ref-num{display:grid;place-items:center;width:46px;height:46px;margin-bottom:18px;border-radius:50%;background:var(--char);color:var(--cream);font-size:22px}
.ref-steps li:nth-child(1) .ref-num{box-shadow:0 0 0 4px rgba(79,195,247,.25)}
.ref-steps li:nth-child(2) .ref-num{box-shadow:0 0 0 4px rgba(124,107,245,.25)}
.ref-steps li:nth-child(3) .ref-num{box-shadow:0 0 0 4px rgba(240,160,48,.3)}
.ref-steps h3{margin:0 0 8px;font-size:20px;color:var(--char)}
.ref-steps p{margin:0;font-size:15.5px;line-height:1.65;color:var(--muted)}

/* Two ways to earn */
.ref-ways{padding:104px 0 112px}
.ref-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px}
.ref-card{padding:32px 30px;border:1px solid rgba(254,252,247,.12);border-radius:20px;background:rgba(254,252,247,.05)}
.ref-tag{display:inline-block;padding:4px 12px;border-radius:99px;background:rgba(240,160,48,.16);color:#F3B866;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ref-tag.is-talent{background:rgba(79,195,247,.14);color:#8FD8FA}
.ref-card h3{margin:16px 0 10px;font-size:clamp(24px,2.6vw,30px);font-weight:400;color:var(--cream)}
.ref-card p{margin:0;font-size:16px;line-height:1.7;color:#CFC7BB}

@media(max-width:900px){
  .ref-hero-in{grid-template-columns:1fr;gap:40px}
  .ref-figure{margin-top:0}
  .ref-steps{grid-template-columns:1fr}
  .ref-cards{grid-template-columns:1fr}
}
@media(max-width:560px){
  .ref-hero{padding:130px 0 90px}
  .ref-steps-band,.ref-ways{padding:72px 0 80px}
  .ref-cta-group{width:100%}
  .ref-actions .btn{flex:1 1 100%;text-align:center}
  .ref-figure{padding:28px 22px 24px}
}