/* Section colors from Website changes.docx, September 25. */
#meet,
#research-preview { background: #f4f4f4; }

.referral-journey {
  background: #e8e8e8;
  padding-bottom: 0;
}
.referral-heading,
.referral-nav { background: #e8e8e8; }

/* Carry each nested section's surface through the outer page gutters. */
.referral-stages { --section-surface: #f4f4f4; }
#about { --section-surface: #fff; margin-top: 0; border-top: 0; }
.referral-footer { --section-surface: #e8e8e8; margin-top: 0; padding-block: 64px; }
.referral-stages,
#about,
.referral-footer {
  position: relative;
  isolation: isolate;
  background: var(--section-surface);
}
.referral-stages::before,
#about::before,
.referral-footer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: var(--section-surface);
  pointer-events: none;
}

.referral-waypoint {
  background: #f4f4f4;
  box-shadow: 0 0 0 7px #f4f4f4;
}
.referral-stage.is-in-view .referral-waypoint {
  box-shadow: 0 0 0 7px #f4f4f4, 0 0 0 8px #c0a17b;
}
.referral-traveler { stroke: #f4f4f4; }
#reward-5 .referral-credit { background: #34131e; }
#details { background: #fff; }
.closing { background: #444342; }

@media (max-width: 700px) {
  .referral-footer { padding-block: 44px; }
  .referral-waypoint { box-shadow: 0 0 0 5px #f4f4f4; }
  .referral-stage.is-in-view .referral-waypoint {
    box-shadow: 0 0 0 5px #f4f4f4, 0 0 0 6px #c0a17b;
  }
}
.referral-stage-finale .referral-waypoint {
  background: #f4f4f4;
  box-shadow: 0 0 0 8px #f4f4f4;
}
.referral-stage-finale.is-in-view .referral-waypoint {
  background: var(--reward-wine);
  box-shadow: 0 0 0 8px #f4f4f4, 0 0 0 9px #c0a17b;
}