/* Referral page, its own look: serif display type, the reward as cards and a timeline, terms as a receipt. */
:root{--r-gold:linear-gradient(100deg,#f3dfb4,#dfc79a 35%,#c9aa75 65%,#a8854e);--r-edge:rgba(201,170,117,.24)}
body{overflow-x:clip}
.r-label{display:flex;align-items:center;gap:14px;margin:0 0 22px;color:var(--gold2);font:600 11px/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.r-label:before{content:"";width:34px;height:1px;background:var(--gold)}
main h1,main h2{font-family:var(--serif);font-weight:300;letter-spacing:-.035em;line-height:1;margin:0}
main h1 em,main h2 em{font-style:italic;font-weight:400;background:var(--r-gold);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
main h2{font-size:clamp(40px,5.2vw,76px);max-width:16ch}
main h2:after{display:none!important}
.r-btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 28px;border-radius:999px;background:var(--r-gold);color:#0a0a0a;font:700 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;box-shadow:0 0 0 1px rgba(243,223,180,.4) inset,0 16px 40px -14px rgba(201,170,117,.8);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.r-btn:hover{transform:translateY(-2px)}
.r-btn span{font-size:16px;transition:transform .25s}.r-btn:hover span{transform:translateX(4px)}
.r-link{color:var(--ivory);font:500 15px/1 var(--sans);text-decoration:none;border-bottom:1px solid rgba(201,170,117,.5);padding-bottom:6px}
.r-link:hover{border-color:var(--gold2)}

/* Hero: the reward as three cards */
.r-hero{position:relative;overflow:hidden;padding:60px 0 110px;background:radial-gradient(ellipse 680px 520px at 82% 52%,rgba(92,22,46,.38),transparent 70%)}
.r-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;min-height:calc(100svh - 200px)}
.r-hero h1{font-size:clamp(58px,7.4vw,116px);line-height:.95;max-width:9ch}
.r-hero h1 em{display:block}
.r-lede{max-width:520px;margin:30px 0 0;color:var(--muted);font-size:18px;line-height:1.6}
.r-lede strong{color:var(--ivory);font-weight:600}
.r-actions{display:flex;flex-wrap:wrap;align-items:center;gap:30px;margin-top:40px}
.r-cards{position:relative;height:500px;perspective:1200px}
.r-card{position:absolute;left:50%;top:50%;width:330px;height:206px;margin:-103px 0 0 -165px;padding:22px 24px;border-radius:20px;display:flex;flex-direction:column;justify-content:space-between;color:var(--ivory);border:1px solid rgba(243,223,180,.28);background:radial-gradient(ellipse 120% 90% at 0% 0%,rgba(243,223,180,.18),transparent 55%),linear-gradient(145deg,#2a2124,#120e10 60%,#1b1316);box-shadow:0 40px 80px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);transform-style:preserve-3d;transition:transform .9s cubic-bezier(.16,1,.3,1);overflow:hidden}
.r-card:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,240,210,.14) 48%,transparent 60%);transform:translateX(var(--sheen,-60%));transition:transform .6s ease;pointer-events:none}
.r-card-top,.r-card-foot{display:flex;justify-content:space-between;align-items:center}.r-card-top{align-items:flex-start}
.r-card-top span{font:700 12px/1 var(--sans);letter-spacing:.3em;color:var(--gold2)}
.r-card small{font:500 10.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,231,.6)}
.r-card b{font:300 58px/.9 var(--serif);letter-spacing:-.03em;background:var(--r-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.r-card-foot em{font:italic 400 15px/1 var(--serif);color:var(--ivory)}
.r-card.c1{transform:translate3d(calc(var(--tx,0)*1px - 50px),calc(var(--ty,0)*1px + 88px),40px) rotate(-5deg)}
.r-card.c2{transform:translate3d(calc(var(--tx,0)*.6px),calc(var(--ty,0)*.6px),20px) rotate(0deg)}
.r-card.c3{transform:translate3d(calc(var(--tx,0)*.3px + 50px),calc(var(--ty,0)*.3px - 88px),0) rotate(5deg);filter:brightness(.8)}
.r-card.c2{filter:brightness(.9)}
.r-total{position:absolute;right:0;bottom:6px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.r-total small{font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.r-total b{font:italic 400 44px/1 var(--serif);color:var(--ivory)}
html.r-js .r-cards:not(.dealt) .r-card{transform:translate3d(0,40px,0) rotate(0);opacity:0}
.r-cards.dealt .r-card{opacity:1;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .5s}
.r-cards.dealt .c2{transition-delay:.12s}.r-cards.dealt .c3{transition-delay:.24s}
.r-cards.live .r-card{transition:transform .25s ease-out,opacity .5s}

/* The reward: a timeline that fills as you scroll */
.r-journey{position:relative;border-top:1px solid var(--line)}
.r-journey-pin{padding:110px 0}
html.r-js .r-journey{height:240vh}
html.r-js .r-journey-pin{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;padding:60px 0}
html.r-js .r-journey-pin>.wrap{width:min(1120px,calc(100% - 64px))}
.r-journey-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.r-earned{text-align:right;flex:none}
.r-earned small{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.r-earned b{display:block;margin-top:10px;font:300 clamp(64px,8vw,120px)/.9 var(--serif);letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:var(--r-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.r-track{position:relative;height:2px;margin:64px 0 0;background:rgba(244,239,231,.12)}
.r-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,1)*100%);background:linear-gradient(90deg,#a8854e,#dfc79a,#f3dfb4);box-shadow:0 0 16px rgba(201,170,117,.8)}
.r-track i{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--ink);border:2px solid rgba(244,239,231,.25);transition:all .4s}
.r-track .n1{left:16.66%}.r-track .n2{left:50%}.r-track .n3{left:83.33%}
.r-track i.on{border-color:var(--gold2);background:var(--gold);box-shadow:0 0 0 6px rgba(201,170,117,.15),0 0 20px rgba(223,199,154,.9)}
.r-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:34px 0 0;padding:0;list-style:none}
.r-stages li{text-align:center;opacity:.32;transform:translateY(10px);transition:opacity .5s,transform .5s}
.r-stages li.on,html:not(.r-js) .r-stages li{opacity:1;transform:none}
.r-when{font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold2)}
.r-stages b{display:block;margin:14px 0 10px;font:300 54px/1 var(--serif);letter-spacing:-.03em;color:var(--ivory)}
.r-stages h3{margin:0;font:600 18px/1.3 var(--sans);letter-spacing:-.01em}
.r-stages p{max-width:300px;margin:10px auto 0;color:var(--muted);font-size:14.5px;line-height:1.55}
.r-journey-note{max-width:560px;margin:56px auto 0;text-align:center;color:var(--muted);font:italic 400 18px/1.5 var(--serif)}

/* How it works: You, Privé, the creator */
.r-intro{padding:130px 0;border-top:1px solid var(--line);background:radial-gradient(ellipse 50% 60% at 50% 40%,rgba(201,170,117,.07),transparent 70%)}
.r-intro .wrap>.r-label,.r-intro h2{margin-left:auto;margin-right:auto;justify-content:center;text-align:center}
.r-intro h2{max-width:14ch}
.r-chain{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;margin:72px auto 0;max-width:860px}
.r-node{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;border:1px solid var(--r-edge);background:radial-gradient(circle at 30% 25%,rgba(244,239,231,.08),rgba(244,239,231,.01));font:italic 400 19px/1 var(--serif);color:var(--ivory)}
.r-node.gold{width:118px;height:118px;border-color:rgba(223,199,154,.6);background:radial-gradient(circle at 30% 25%,rgba(243,223,180,.25),rgba(92,22,46,.35));box-shadow:0 0 60px -10px rgba(201,170,117,.6)}
.r-wire{position:relative;height:1px;margin:0 14px;background:repeating-linear-gradient(90deg,rgba(201,170,117,.55) 0 6px,transparent 6px 12px)}
.r-wire i{position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--gold2);box-shadow:0 0 12px 2px rgba(223,199,154,.8);animation:r-travel 3.2s cubic-bezier(.6,0,.4,1) infinite}
.r-wire+.r-node+.r-wire i{animation-delay:1.6s}
@keyframes r-travel{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
.r-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:980px;margin:44px auto 0;padding:0;list-style:none;text-align:center}
.r-steps span{font:italic 400 15px/1 var(--serif);color:var(--gold2)}
.r-steps h3{margin:12px 0 0;font:600 19px/1.3 var(--sans);letter-spacing:-.01em}
.r-steps p{margin:10px auto 0;max-width:290px;color:var(--muted);font-size:14.5px;line-height:1.55}

/* Terms: an ivory receipt */
.r-terms{padding:130px 0;border-top:1px solid var(--line)}
.r-terms-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.r-terms-copy>p:not(.r-label){max-width:380px;margin:26px 0 0;color:var(--muted)}
.r-receipt{position:relative;padding:34px 36px 44px;color:#1b1714;background:#f4efe7;border-radius:6px 6px 0 0;box-shadow:0 50px 90px -40px rgba(0,0,0,.95);transform:rotate(.8deg);-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/20px 51% repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/20px 51% repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat}
.r-receipt-head{display:flex;justify-content:space-between;margin:0 0 18px;padding-bottom:16px;border-bottom:1px dashed rgba(27,23,20,.35);font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#5c162e}
.r-receipt dl{margin:0}
.r-receipt dl>div{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px;padding:14px 0;border-bottom:1px dashed rgba(27,23,20,.18)}
.r-receipt dl>div:before{content:"";grid-column:2;grid-row:1;border-bottom:1px dotted rgba(27,23,20,.45);transform:translateY(-4px)}
.r-receipt dt{grid-column:1;grid-row:1;font:600 15px/1.3 var(--sans)}
.r-receipt dd{grid-column:3;grid-row:1;margin:0;font:italic 400 17px/1.3 var(--serif);color:#5c162e}
.r-receipt dl p{grid-column:1/-1;margin:2px 0 0;color:#6b6259;font-size:13.5px;line-height:1.5}
.r-receipt-total{display:flex;justify-content:space-between;align-items:baseline;margin:20px 0 0;font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.r-receipt-total b{font:400 46px/1 var(--serif);letter-spacing:-.03em;color:#1b1714}
.r-receipt-note{margin:16px 0 0;color:#6b6259;font-size:12.5px;line-height:1.5}

/* The form keeps its flow; only the frame changes */
.referral-section{border-top:1px solid var(--line)}
.referral-section .form-intro h2{font-size:clamp(44px,5vw,72px)}
.referral-section .form-panel{border-radius:26px!important;border-color:var(--r-edge)!important}
.referral-section .type-choice,.referral-section .referral-form input,.referral-section .referral-form select,.referral-section .referral-form textarea{border-radius:14px!important}
.form-nav .button{border-radius:999px!important;background:var(--r-gold)!important;color:#0a0a0a!important;border-color:transparent!important}
.form-nav .button:disabled{opacity:.45}

/* Footer */
.r-footer{padding:120px 0 0;border-top:1px solid var(--line);background:radial-gradient(ellipse 60% 70% at 50% 110%,rgba(92,22,46,.4),transparent 70%);color:var(--muted);font-size:13.5px}
.r-footer-line{margin:0 auto;max-width:12ch;text-align:center;font:300 clamp(48px,7.4vw,110px)/.98 var(--serif);letter-spacing:-.035em;color:var(--ivory)}
.r-footer-line em{font-style:italic;font-weight:400;background:var(--r-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.r-footer-row{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:110px;padding:26px 0 calc(30px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.r-footer-row nav{display:flex;flex-wrap:wrap;gap:8px 26px}
.r-footer-row a{color:var(--muted);text-decoration:none}.r-footer-row nav a:hover{color:var(--ivory)}
.r-footer .wordmark{color:var(--ivory)}

@media(max-width:900px){
  .r-hero{padding:30px 0 70px}
  .r-hero-grid{grid-template-columns:1fr;gap:20px;min-height:0}
  .r-hero h1{font-size:clamp(50px,14vw,80px)}
  .r-lede{font-size:16.5px}
  .r-cards{height:360px;margin-top:10px}
  .r-card{width:250px;height:156px;margin:-78px 0 0 -125px;padding:16px 18px;border-radius:16px}
  .r-card b{font-size:42px}
  .r-card.c1{transform:translate3d(-30px,66px,40px) rotate(-5deg)}
  .r-card.c2{transform:translate3d(0,0,20px) rotate(0deg)}
  .r-card.c3{transform:translate3d(30px,-66px,0) rotate(5deg)}
  .r-total{bottom:-6px}.r-total b{font-size:34px}
  html.r-js .r-journey{height:auto}
  html.r-js .r-journey-pin{position:static;min-height:0;padding:80px 0}
  .r-journey-head{display:block}.r-earned{text-align:left;margin-top:26px}
  .r-track{display:none}
  .r-stages{grid-template-columns:1fr;gap:0;margin-top:30px;border-left:2px solid rgba(244,239,231,.12)}
  .r-stages li{text-align:left;padding:0 0 30px 26px;position:relative}
  .r-stages li:before{content:"";position:absolute;left:-9px;top:0;width:16px;height:16px;border-radius:50%;background:var(--ink);border:2px solid var(--gold2)}
  .r-stages li.on:before{background:var(--gold);box-shadow:0 0 16px rgba(223,199,154,.9)}
  .r-stages b{font-size:44px;margin:10px 0 8px}.r-stages p{margin-left:0}
  .r-journey-note{text-align:left;margin-top:20px}
  .r-intro,.r-terms{padding:90px 0}
  .r-node{width:68px;height:68px;font-size:15px}.r-node.gold{width:84px;height:84px}.r-node.gold img{width:26px;height:26px}
  .r-wire{margin:0 8px}
  .r-chain{margin-top:48px}
  .r-steps{grid-template-columns:1fr;gap:30px;text-align:left}.r-steps p{margin-left:0}
  .r-terms-grid{grid-template-columns:1fr;gap:44px}
  .r-receipt{padding:26px 22px 38px;transform:none}
  .r-receipt dl>div{grid-template-columns:1fr auto}.r-receipt dl>div:before{display:none}.r-receipt dd{grid-column:2}
  .r-footer{padding-top:90px}.r-footer-row{flex-direction:column;align-items:flex-start;margin-top:70px}
}
@media(prefers-reduced-motion:reduce){.r-wire i{animation:none;display:none}.r-card,.r-stages li{transition:none}}
