/* V3 Referral: a full-screen photo hero holding the one-field link form, the reward in two numbers and two plain
   sentences, three steps, questions, and a photo close. */

/* ---------- 1. Hero: the form is the hero's one action, so it gets the whole first screen (as the home's hero does)
   and the fold falls on the hero's edge instead of an empty band ---------- */
.r-hero.hero-page{min-height:max(640px,100svh)}
.r-hero .hero-bg img{object-position:62% 30%}
/* the wind-carried fabric runs bright behind the copy: a deeper smoke on the left and at the foot */
.r-hero .hero-shade{background:linear-gradient(180deg,rgba(12,16,18,.5) 0%,rgba(12,16,18,.18) 9%,rgba(12,16,18,0) 18%),linear-gradient(90deg,rgba(14,18,21,.84) 0%,rgba(14,18,21,.62) 34%,rgba(14,18,21,.14) 62%,rgba(14,18,21,0) 100%),linear-gradient(0deg,rgba(17,21,24,.72) 0%,rgba(17,21,24,0) 46%)}
.r-hero .hero-copy{max-width:620px}
.r-get{max-width:520px;margin-top:4px}
.r-field{display:flex;align-items:center;gap:6px;padding:5px 5px 5px 22px;border-radius:999px;background:rgba(240,243,241,.1);border:1px solid rgba(240,243,241,.26);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);transition:border-color .2s,background .2s,box-shadow .2s}
.r-field:focus-within{border-color:rgba(240,243,241,.6);background:rgba(240,243,241,.14)}
.r-field:has(input:focus-visible){box-shadow:0 0 0 2px var(--jade)}
.r-field input{flex:1;min-width:0;height:50px;padding:0;border:0;background:none;outline:none;color:var(--pearl);font:400 var(--fs-17)/1.4 var(--sans)}
.r-field input::placeholder{color:rgba(240,243,241,.72)}
.r-field input[aria-invalid=true]{color:#ffd9d2}
.r-submit{flex:none;height:50px}
.r-err{margin-top:12px;font-size:var(--fs-15);color:#ffd9d2}
.r-fine{margin-top:14px;font-size:var(--fs-13);color:rgba(240,243,241,.8)}
.r-sent{padding:22px 24px 16px;border-radius:18px;background:rgba(17,21,24,.52);border:1px solid rgba(240,243,241,.18);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);outline:none;animation:rise .6s var(--ease-out) both}
.r-sent-t{margin-bottom:6px;font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2;color:var(--pearl)}
.r-sent p:not(.r-sent-t){font-size:var(--fs-15);color:var(--silver);text-wrap:pretty}
.r-again{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;padding:0;border:0;background:none;color:var(--pearl);font:inherit;font-size:var(--fs-15);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(240,243,241,.45);cursor:pointer}
.r-get [hidden]{display:none!important}
@media (max-width:760px){
  .r-hero.hero-page{min-height:max(620px,100svh)}
  .r-hero .hero-bg img{object-position:50% 22%}
  .r-hero .hero-shade{background:linear-gradient(180deg,rgba(12,16,18,.5) 0%,rgba(12,16,18,.18) 9%,rgba(12,16,18,0) 18%),linear-gradient(0deg,rgba(12,16,18,.96) 0%,rgba(12,16,18,.88) 50%,rgba(12,16,18,.56) 68%,rgba(12,16,18,.1) 86%,rgba(12,16,18,0) 100%)}
}
@media (max-width:560px){
  .r-field{flex-direction:column;align-items:stretch;gap:10px;padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .r-field:focus-within{background:none}
  .r-field:has(input:focus-visible){box-shadow:none}
  .r-field input{flex:none;height:54px;padding:0 20px;border-radius:999px;background:rgba(240,243,241,.1);border:1px solid rgba(240,243,241,.26);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .r-field input:focus-visible{border-color:rgba(240,243,241,.6);box-shadow:0 0 0 2px var(--jade)}
  .r-submit{width:100%;height:54px}
}

/* ---------- 2. The reward: it follows the photo on dark, so it starts sooner and the chapter rule is drawn brighter
   than the shared hairline, where it would vanish against the photo's smoke ---------- */
.r-reward{padding-top:clamp(72px,7vw,112px)}
section[data-tone=dark]:not(.photo):not(.logos)+section.r-reward[data-tone=dark]:not(.photo){border-top-color:rgba(240,243,241,.16)}
.r-numbers{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(40px,4.4vw,64px);margin-bottom:0}
.r-numbers dd{margin:0}
.r-reward .stat{gap:14px;padding:30px 30px 32px}
.r-reward .stat-v{font-size:var(--fs-h1)}
.r-reward .stat-v b{font-weight:300}
.r-reward .stat-d{font-size:var(--fs-17);max-width:30em;text-wrap:pretty}
.r-reward .stat-d a{color:var(--pearl);text-underline-offset:3px;text-decoration-color:rgba(240,243,241,.45)}
.r-notes{display:flex;flex-wrap:wrap;gap:12px clamp(24px,3vw,48px);margin-top:28px}
.r-notes li{display:flex;align-items:center;gap:10px;font-size:var(--fs-15);color:var(--silver)}
.r-notes svg{flex:none;width:18px;height:18px;padding:2px;border-radius:50%;background:var(--jade);color:var(--obsidian)}
@media (max-width:640px){.r-numbers{grid-template-columns:1fr}.r-notes{flex-direction:column}.r-notes li{align-items:flex-start}.r-notes svg{margin-top:2px}}

/* ---------- 3. How it works: the shared numbered steps ---------- */
.r-steps .ln{display:block}
.r-steps .steps-list p{text-wrap:pretty}

/* ---------- 4. Questions ---------- */
.r-faq .faq-head .arrow-link{align-self:flex-start;margin-top:-6px}
.r-faq .qa summary{text-wrap:balance}

/* ---------- 5. Close ---------- */
.r-close .photo-bg img{object-position:42% 30%}
.r-close .close-note{max-width:34em;text-wrap:balance}
.r-close .photo-shade{background:linear-gradient(90deg,rgba(14,18,21,.76) 0%,rgba(14,18,21,.4) 42%,rgba(14,18,21,0) 70%),linear-gradient(0deg,rgba(14,18,21,.6) 0%,rgba(14,18,21,0) 44%)}
@media (max-width:760px){.r-close .photo-shade{background:linear-gradient(0deg,rgba(12,16,18,.94) 0%,rgba(12,16,18,.72) 44%,rgba(12,16,18,.08) 80%)}}

/* ---------- Phones under 360px: the sticky bar keeps one line of label beside its button ---------- */
@media (max-width:359px){.sticky-cta .sc-t span{display:none}}

@media (prefers-reduced-motion:reduce){.r-sent{animation:none}}