/* About screens: when a screen has more content than fits, its content area
   stops 30px higher and "Scroll for more" sits in that gap above the bottom nav,
   covering nothing. It fades away at the end. Placed by about-scroll-hint.js. */
@media (max-width: 760px), (max-width: 960px) and (max-height: 500px) and (pointer: coarse) {
  #admin-signup-page.landing-home-page .glass-panel .landing-about-info-stage.has-scroll-hint,
  #admin-signup-page.landing-home-page .glass-panel.is-guide .landing-guide-stage.has-scroll-hint {
    bottom: calc(var(--landing-about-nav-clear, 136px) + 30px) !important;
  }

  /* The scrolling area clips at its own edges, which cut the soft shadows of
     the cards, buttons and Previous / Next pills (they reach 18px past the
     sides, 24px below). It gets 24px of room each side, with the content kept
     in place, and 40px under the last row so its shadow ends above the 16px
     fade. */
  #admin-signup-page.landing-home-page .glass-panel #landingAboutInfoStage,
  #admin-signup-page.landing-home-page .glass-panel.is-guide #landingGuideStage {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 40px;
  }

  /* A guide screen grows with its content inside the scrolling area (flex: 1
     alone pinned it to the area's height), so the last row (Previous / Next)
     ends inside the area instead of under its bottom edge. */
  #admin-signup-page.landing-home-page .glass-panel.is-guide .landing-guide-stage > .landing-guide-screen {
    flex: 1 0 auto;
  }
}

.landing-scroll-hint {
  position: fixed;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 0;
  color: rgba(255, 255, 255, 0.92);
  background: none;
  text-shadow: 0 1px 6px rgba(60, 50, 45, 0.35);
  font-family: "Avenir Next LT Pro", "Avenir Next", Avenir, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 0s linear 220ms;
  -webkit-tap-highlight-color: transparent;
}

.landing-scroll-hint.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 0s;
}

.landing-scroll-hint svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgba(60, 50, 45, 0.35));
  animation: landing-scroll-hint-bob 1.6s ease-in-out infinite;
}

@keyframes landing-scroll-hint-bob {
  0%,
  100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(2px);
  }
}

@media (hover: hover) {
  .landing-scroll-hint:hover {
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-scroll-hint,
  .landing-scroll-hint.is-visible {
    transition: none;
  }

  .landing-scroll-hint svg {
    animation: none;
  }
}