.scroll-cue-dock {
  --scroll-cue-background: 245 245 245;
  position: fixed;
  z-index: 100;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem max(.5rem, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgb(var(--scroll-cue-background) / 0), rgb(var(--scroll-cue-background) / .85) 55%, rgb(var(--scroll-cue-background)) 90%);
  pointer-events: none;
}

.scroll-cue-dock[hidden] { display: none; }
.hero-arrow-box.scroll-cue-replaced { visibility: hidden; }
.scroll-cue-dock-dark { --scroll-cue-background: 0 0 0; }
.scroll-cue-dock .down-arrow-link { color: #c5b3ff; pointer-events: auto; }
.scroll-cue-dock-dark .down-arrow-link { color: #fe9900; }

#build, #story, #pricing { scroll-margin-top: 7rem; }
.scroll-cue-pointer-target:focus { outline: none; }

@media (max-height: 750px) {
  .about-page .section.about-hero {
    padding-top: 7rem;
    padding-bottom: 2rem;
  }

  .about-page .about-hero-wrapper { gap: 1rem; }
}