/* Adapted from the supplied prototype. Namespaced to keep the site header/footer unchanged. */
@media (max-width: 640px) {
  .referral-reward-page .rr-back-label { display: none; }
}
.referral-reward-content {
  --heading: #7066c8;
  --body-copy: #7f94af;
  --number-fill: #1a2538;
  --number-outline: #28344b;
  position: relative;
  flex: 1;
  min-width: 0;
  width: 100%;
  color: #ebebeb;
  font-family: "DM Sans", sans-serif;
}
.referral-reward-content :where(h1,h2,p,ol,ul) { margin: 0; }
.referral-reward-content :is(h1,h2) { font-family: "Manrope", sans-serif; }
.referral-reward-content img { display: block; max-width: 100%; height: auto; }
.referral-reward-content section { background: transparent; }
.rr-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* 1–6: real, editable text on a completely black surface. */
.rr-referral-section{max-width:1044px;margin-inline:auto;padding:62px 56px 36px;font-family:"DM Sans",sans-serif}
.rr-intro{max-width:850px;margin-inline:auto;text-align:center;font-size:23px;line-height:1.17;color:#e0e0e0}
.rr-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:62px;row-gap:111px;list-style:none;padding:0;margin-top:76px}
.rr-feature{position:relative;min-width:0;min-height:207px;padding-left:127px;background:transparent}
.rr-feature-number{position:absolute;top:-18px;left:0;z-index:0;color:var(--number-fill);-webkit-text-stroke:1px var(--number-outline);font-family:"DM Sans",sans-serif;font-size:270px;font-weight:700;line-height:.86;letter-spacing:-19px;user-select:none}
.rr-feature-copy{position:relative;z-index:1;max-width:272px}
.rr-feature h2{margin-bottom:3px;color:var(--heading);font-size:38px;line-height:.96;font-weight:700}
.rr-feature p{color:var(--body-copy);font-size:18px;line-height:1.48}
.rr-and-more{margin-top:74px;text-align:center;font-size:23px;line-height:1.3}
/* Cropped original Frax artwork, including its labels and icons. */
.rr-mission-section{max-width:940px;margin-inline:auto;padding:28px 40px 43px;text-align:center}
.rr-eyebrow{font-size:10px;font-weight:400;line-height:1.2;margin-bottom:12px}
.rr-mission-section h2{max-width:780px;margin-inline:auto;font-size:34px;line-height:1.15;letter-spacing:-1px;font-weight:500}
.rr-mission-description{margin-top:26px;color:#939393;font-size:12px;line-height:1.4}
.rr-mission-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:748px;margin:56px auto 0}
/* Three independent PNGs occupy the exact original 240 x 239 card canvas. */
.rr-mission-card{position:relative;width:70%;justify-self:center;aspect-ratio:240 / 239;min-width:0}
.rr-mission-card .rr-frax-main-body{width:100%;height:auto}
.rr-mission-card .rr-frax-top-right-arrow,.rr-mission-card .rr-frax-bottom-left-icon{position:absolute;width:33.3333333333%;height:auto}
.rr-mission-card .rr-frax-top-right-arrow{top:0;left:66.6666666667%}
.rr-mission-card .rr-frax-bottom-left-icon{top:66.9456066946%;left:0}
/* Specialist portraits are transparent PNGs; labels remain selectable HTML text. */
.rr-specialists-section{max-width:940px;margin-inline:auto;padding:20px 35px 38px}
.rr-specialists-section h2{color:#c5d3e8;font-size:35px;line-height:1.1;letter-spacing:.3px;font-weight:400}
.rr-specialists-section h2>span,.rr-specialists-section h2 strong{display:block}
.rr-specialists-section h2 strong{font-weight:700}
.rr-star{font-size:23px;margin-left:5px;vertical-align:middle}
.rr-specialist-cards{display:grid;grid-template-columns:1fr 1fr 1fr 1.14fr 1fr;gap:22px;align-items:end;list-style:none;padding:0;margin-top:12px}
/* White outlines follow the original card surfaces; portraits sit above them. */
.rr-specialist-cards li{position:relative;min-width:0;aspect-ratio:155 / 144;background:transparent;container-type:inline-size}
.rr-specialist-cards li::before{content:"";position:absolute;inset:12.5% 1px 1px;border:1px solid #fff;border-radius:10px;background:transparent;pointer-events:none}
.rr-specialist-cards li.rr-specialist-featured{aspect-ratio:177 / 216}
.rr-specialist-cards li.rr-specialist-featured::before{top:16.6667%}
.rr-specialist-cards .rr-specialist-portrait{position:absolute;z-index:1;top:0;left:19.3548%;width:61.2903%;height:auto}
.rr-specialist-cards .rr-specialist-featured .rr-specialist-portrait{top:5.5556%;left:23.1638%;width:53.6723%}
.rr-specialist-details{position:absolute;z-index:2;top:67.3%;left:0;width:100%;text-align:center;font-family:Arial,Helvetica,sans-serif;line-height:1.4}
.rr-specialist-details strong,.rr-specialist-details span{display:block}
.rr-specialist-details strong{color:#c5d3e8;font-size:6.4516cqi;font-weight:600}
.rr-specialist-details span{color:#db84a8;font-size:5.8065cqi;font-weight:400}
.rr-specialist-featured .rr-specialist-details{top:50%}
.rr-specialist-featured .rr-specialist-details strong{font-size:5.6497cqi}
.rr-specialist-featured .rr-specialist-details span{font-size:5.0847cqi}
.rr-specialist-reward-badge{position:absolute;z-index:3;top:0;left:60.452%;width:38.9831%;height:17.5926%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:#eb8cac;color:#171a22;font-family:Arial,Helvetica,sans-serif;line-height:1;pointer-events:none}
.rr-specialist-reward-badge strong{font-size:8.4746cqi;font-weight:700}
.rr-specialist-reward-badge span{margin-top:4px;font-size:4.5198cqi;font-weight:500;white-space:nowrap}
@media(max-width:900px){
 .rr-referral-section{padding-inline:30px}
 .rr-features{column-gap:38px;row-gap:80px}
 .rr-feature{padding-left:100px}
 .rr-feature-number{font-size:224px;top:-6px}
 .rr-feature h2{font-size:33px}
 .rr-specialist-cards{gap:14px}
}
@media(max-width:680px){
 .rr-referral-section{padding:36px 24px 30px}
 .rr-intro{font-size:21px;line-height:1.3;max-width:470px}
 .rr-features{grid-template-columns:1fr;gap:48px;max-width:410px;margin:50px auto 0}
 .rr-feature{padding-left:102px;min-height:190px}
 .rr-feature-number{top:-3px;font-size:226px}
 .rr-feature h2{font-size:34px;line-height:1}
 .rr-feature p{font-size:18px;line-height:1.4}
 .rr-feature-copy{max-width:none}
 .rr-and-more{margin-top:42px}
 .rr-mission-section{padding:24px 24px 42px}
 .rr-mission-section h2{font-size:28px;letter-spacing:-.6px}
 .rr-desktop-break{display:none}
 .rr-mission-description{margin-top:20px;font-size:12px}
 .rr-mission-cards{grid-template-columns:1fr;max-width:300px;gap:24px;margin-top:34px}
 .rr-specialists-section{padding:12px 24px 40px}
 .rr-specialists-section h2{font-size:32px}
 .rr-specialist-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px;margin:30px auto 0;gap:24px 18px}
 .rr-specialist-cards li{width:100%;max-width:190px;justify-self:center}
 .rr-specialist-cards li:last-child{grid-column:1 / -1;width:calc((100% - 18px)/2);justify-self:center}
}
@media(max-width:360px){
 .rr-referral-section{padding-inline:18px}
 .rr-feature{padding-left:83px}
 .rr-feature-number{font-size:193px;top:0}
 .rr-feature h2{font-size:30px}
 .rr-feature p{font-size:17px}
}

/* Frax entrance: three pieces assemble once, then return to the exact artwork. */
.rr-mission-section{overflow:hidden;overflow:clip}
.rr-mission-card{--frax-delay:100ms;perspective:1000px;isolation:isolate}
.rr-mission-card:nth-child(2){--frax-delay:340ms}
.rr-mission-card:nth-child(3){--frax-delay:580ms}
.rr-mission-card>img{
  transform-origin:center;
  animation-duration:1450ms;
  animation-delay:var(--frax-delay);
  animation-timing-function:cubic-bezier(.22,.7,.18,1);
  animation-iteration-count:1;
  animation-fill-mode:backwards;
}
.rr-mission-card .rr-frax-main-body{
  animation-name:rr-page-frax-body-arrive;
  animation-duration:1550ms;
}
.rr-mission-card .rr-frax-top-right-arrow{
  animation-name:rr-page-frax-arrow-arrive;
  animation-delay:calc(var(--frax-delay) + 180ms);
  animation-duration:1320ms;
}
.rr-mission-card .rr-frax-bottom-left-icon{
  animation-name:rr-page-frax-icon-arrive;
  animation-delay:calc(var(--frax-delay) + 380ms);
}
.rr-mission-card[data-frax-state="waiting"]>img,
.rr-mission-card[data-frax-state="loading"]>img{animation:none;opacity:0}
@keyframes rr-page-frax-body-arrive{
  0%{opacity:0;transform:translate3d(0,48px,-90px) rotateX(15deg) rotateY(-11deg) rotateZ(-4deg) scale(.88);filter:blur(7px) brightness(1.25)}
  55%{opacity:1;filter:blur(0) brightness(1.12)}
  74%{transform:translate3d(0,-4px,0) rotateX(-1deg) rotateY(1deg) rotateZ(.6deg) scale(1.012)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes rr-page-frax-arrow-arrive{
  0%{opacity:0;transform:translate3d(55px,-56px,80px) rotateX(-18deg) rotateZ(34deg) scale(.5);filter:blur(5px) brightness(1.55)}
  55%{opacity:1;filter:blur(0) brightness(1.2)}
  74%{transform:translate3d(-4px,4px,0) rotateX(0) rotateZ(-5deg) scale(1.045)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes rr-page-frax-icon-arrive{
  0%{opacity:0;transform:translate3d(-52px,49px,65px) rotateY(24deg) rotateZ(-30deg) scale(.5);filter:blur(5px) brightness(1.45)}
  55%{opacity:1;filter:blur(0) brightness(1.16)}
  74%{transform:translate3d(4px,-3px,0) rotateY(0) rotateZ(4deg) scale(1.035)}
  100%{opacity:1;transform:none;filter:none}
}
@media(prefers-reduced-motion:reduce){
  .rr-mission-card>img{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}

/* Non-interactive HTML label replaces the raster badge below the last card. */
.rr-specialists-more{display:flex;justify-content:flex-end;margin-top:18px}
.rr-more-label{
  display:flex;
  align-items:center;
  gap:12px;
  width:183px;
  max-width:100%;
  min-height:30px;
  padding:6px 14px;
  border:1px solid #254059;
  border-radius:4px;
  background:#1b344c;
  color:#f7f8ff;
  font-family:"DM Sans",sans-serif;
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  cursor:default;
}
.rr-more-label__icon{
  flex:0 0 11px;
  width:11px;
  height:11px;
  border:2px solid #45d8ed;
  border-radius:50%;
  box-shadow:0 0 3px #45d8ed40;
}
@media(max-width:680px){
 .rr-specialists-more{width:calc((100% - 18px)/2);max-width:201px;margin-inline:auto}
 .rr-more-label{gap:8px;padding-inline:10px;font-size:clamp(10px,2.6vw,12px)}
}

/* Favourite Specialists: a gentle fan-in, soft focus and a fading border glow. */
.rr-specialists-section{overflow:hidden;overflow:clip}
.rr-specialist-cards{perspective:1100px}
.rr-specialist-cards>li{
  --specialist-delay:80ms;
  --specialist-x:-18px;
  --specialist-tilt:-5deg;
  transform-origin:50% 85%;
  animation:rr-page-specialist-card-arrive 1450ms cubic-bezier(.22,.72,.2,1) var(--specialist-delay) 1 backwards;
}
.rr-specialist-cards>li:nth-child(2){--specialist-delay:240ms;--specialist-x:-9px;--specialist-tilt:-2.5deg}
.rr-specialist-cards>li:nth-child(3){--specialist-delay:400ms;--specialist-x:0px;--specialist-tilt:0deg}
.rr-specialist-cards>li:nth-child(4){--specialist-delay:560ms;--specialist-x:9px;--specialist-tilt:2.5deg}
.rr-specialist-cards>li:nth-child(5){--specialist-delay:720ms;--specialist-x:18px;--specialist-tilt:5deg}
.rr-specialist-cards>li>img{
  animation:rr-page-specialist-soft-focus 1350ms cubic-bezier(.22,.72,.2,1) calc(var(--specialist-delay) + 100ms) 1 backwards;
}
.rr-specialist-cards>li::before{
  animation:rr-page-specialist-border-bloom 1600ms ease-out calc(var(--specialist-delay) + 180ms) 1 backwards;
}
.rr-specialist-cards>li[data-specialist-state="waiting"],
.rr-specialist-cards>li[data-specialist-state="loading"]{animation:none;opacity:0}
.rr-specialist-cards>li[data-specialist-state="waiting"]>img,
.rr-specialist-cards>li[data-specialist-state="loading"]>img,
.rr-specialist-cards>li[data-specialist-state="waiting"]::before,
.rr-specialist-cards>li[data-specialist-state="loading"]::before{animation:none}
@keyframes rr-page-specialist-card-arrive{
  0%{opacity:0;transform:translate3d(var(--specialist-x),44px,-45px) rotateX(9deg) rotateZ(var(--specialist-tilt)) scale(.94)}
  48%{opacity:1}
  74%{transform:translate3d(0,-3px,0) rotateX(0) rotateZ(0) scale(1.008)}
  100%{opacity:1;transform:none}
}
@keyframes rr-page-specialist-soft-focus{
  0%{filter:blur(4px) brightness(1.14)}
  60%{filter:blur(0) brightness(1.06)}
  100%{filter:none}
}
@keyframes rr-page-specialist-border-bloom{
  0%{opacity:0;clip-path:inset(0 48% 0 48% round 10px);box-shadow:none}
  38%{opacity:1;clip-path:inset(0 0 0 0 round 10px);box-shadow:0 0 16px rgba(185,211,255,.28),inset 0 0 8px rgba(214,184,255,.08)}
  68%{opacity:1;clip-path:inset(-20px);box-shadow:0 0 22px rgba(185,211,255,.2),inset 0 0 6px rgba(214,184,255,.04)}
  100%{opacity:1;clip-path:none;box-shadow:none}
}
@media(max-width:680px){
  .rr-specialist-cards>li:nth-child(n){--specialist-x:0px}
}
@media(prefers-reduced-motion:reduce){
  .rr-specialist-cards>li,
  .rr-specialist-cards>li>img,
  .rr-specialist-cards>li::before{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
    box-shadow:none!important;
  }
}

/* Numbers 1–6: one page-load entrance, independent of scrolling and card observers. */
.rr-feature{--feature-delay:100ms;--feature-start-x:-22px;--feature-turn:-6deg}
.rr-feature:nth-child(2){--feature-delay:240ms}
.rr-feature:nth-child(3){--feature-delay:380ms}
.rr-feature:nth-child(4){--feature-delay:520ms}
.rr-feature:nth-child(5){--feature-delay:660ms}
.rr-feature:nth-child(6){--feature-delay:800ms}
.rr-feature:nth-child(even){--feature-start-x:22px;--feature-turn:6deg}
.rr-feature-number{
  transform-origin:50% 85%;
  animation:rr-page-referral-number-arrive 1500ms cubic-bezier(.2,.75,.2,1) var(--feature-delay) 1 backwards;
}
.rr-feature h2{
  animation:rr-page-referral-heading-arrive 1300ms cubic-bezier(.2,.75,.2,1) calc(var(--feature-delay) + 150ms) 1 backwards;
}
.rr-feature p{
  animation:rr-page-referral-copy-arrive 1200ms cubic-bezier(.2,.75,.2,1) calc(var(--feature-delay) + 290ms) 1 backwards;
}
@keyframes rr-page-referral-number-arrive{
  0%{opacity:0;transform:translate3d(var(--feature-start-x),28px,0) rotate(var(--feature-turn)) scale(.88);filter:blur(3px)}
  48%{opacity:1;filter:blur(0) drop-shadow(0 0 14px rgba(130,112,230,.3))}
  74%{transform:translate3d(0,-3px,0) rotate(0deg) scale(1.012);filter:drop-shadow(0 0 9px rgba(130,112,230,.15))}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes rr-page-referral-heading-arrive{
  0%{opacity:0;transform:translate3d(10px,22px,0);text-shadow:none}
  48%{opacity:1;text-shadow:0 0 18px rgba(151,132,246,.3)}
  78%{transform:translate3d(0,-1px,0);text-shadow:0 0 9px rgba(151,132,246,.12)}
  100%{opacity:1;transform:none;text-shadow:none}
}
@keyframes rr-page-referral-copy-arrive{
  0%{opacity:0;transform:translate3d(0,18px,0)}
  100%{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .rr-feature-number,.rr-feature h2,.rr-feature p{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    text-shadow:none!important;
  }
}