/* ==========================================================================
   Salespuzzle scroll cue - the "there is more below this" mark that closes a
   hero and opens the page.

   ONE definition, loaded by every page that shows the cue. It started life as
   an inline block in index.html; sixteen copies of it would have drifted
   inside a month, and the whole point of the mark is that it looks identical
   everywhere.

   Every custom property carries a literal fallback - the same convention
   sp-nav.css and sp-footer.css follow - so the cue still renders correctly on
   a page whose :root block does not define the token.

   The markup is the LAST child of the hero and sits OUTSIDE .wrap, so it
   centres on the page rather than on the text column:

     <div class="scrollcue"><span>Explore</span><span class="chev"></span></div>
   ========================================================================== */

.scrollcue{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-top:clamp(14px,2.4vw,28px);color:var(--muted,#5C6B60);
  font-family:var(--mono,ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace);
  font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.scrollcue .chev{width:2px;height:46px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand,#3DA435),transparent);
  animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(10px);opacity:.45}}
@media(prefers-reduced-motion:reduce){.scrollcue .chev{animation:none}}

/* Salespuzzle121 opens on a dark band - that is the section's signature, and
   the page ink would disappear into it. Light label, lighter brand line. */
.s1-hero .scrollcue{color:rgba(255,255,255,.72)}
.s1-hero .scrollcue .chev{background:linear-gradient(180deg,var(--brand-l,#7DBE3C),transparent)}