/* The navigation belongs to the opening hero and scrolls away with it. */
/* The nav used to scroll away with the hero, which left no navigation at all
   on the rest of the page. It now sticks, and compacts once you scroll. */
.site-header { position: sticky; top: 0; z-index: 40; }
html { scroll-padding-top: 112px; }
.motivation-sticky { top: 98px; height: calc(100vh - 98px); height: calc(100svh - 98px); }

/* Reference wheel: 2200px diameter, 330 × 382px cards, 30° spacing. */
.voices { position: relative; padding: var(--band) 0; }
.voices > .centered-heading { margin-bottom: 50px; }
.testimonials-window { position: relative; height: 650px; padding: 0; overflow: hidden; touch-action: pan-y; scroll-snap-type: none; cursor: grab; }
.testimonials-window.is-dragging { cursor: grabbing; user-select: none; }
.testimonial-fan { position: relative; display: block; width: 100%; height: 100%; padding: 0; }
.testimonials-window .testimonial-card { position: absolute; left: 0; top: 0; width: 330px; height: 382px; margin: 0; border-radius: 6px; transform: translate3d(var(--card-x, -1000px),var(--card-y, 0px),0) translate(-50%,-50%) rotate(var(--card-rotation, 0deg)); transform-origin: center; transition: none; will-change: transform; }
.testimonials-window:after { content: ''; position: absolute; inset: auto 0 0; height: 80px; background: linear-gradient(transparent,white); pointer-events: none; z-index: 2; }
.testimonials-window .celebrity-card:hover { transform: translate3d(var(--card-x),var(--card-y),0) translate(-50%,-50%) rotate(var(--card-rotation)); }
.voices .quote-card { padding: 30px; }
.voices .testimonial-avatar { margin-bottom: 22px; }
.voices .quote-mark { height: 26px; font-size: 48px; margin-bottom: 8px; }
.voices .quote-author { padding-top: 20px; }
.voices .quote-author small { font-size: 12px; }
.voices .celebrity-card video { object-position: center; }
.voices .celebrity-card:is(:hover,:focus-visible) .play-button { background: var(--green); color: var(--lime); }
.voices .play-button .icon { opacity: 1; visibility: visible; }
.voices .community-stats { position: relative; z-index: 3; margin: 0 auto; }
.story-progress { display: none; }
@media (max-width: 700px) {
  .voices { padding: var(--band) 0; }
  .voices > .centered-heading { margin-bottom: 35px; }
  .testimonials-window { --phone-story-height: clamp(420px,110vw,520px); height: calc(var(--phone-story-height) + 16px); padding: 0; scroll-snap-type: none; }
  .testimonials-window:after { display: none; }
  .testimonials-window .testimonial-card { width: calc(100% - 2 * var(--gutter)); height: var(--phone-story-height); }
  .voices .quote-card { padding: 24px; }
  .voices .testimonial-avatar { width: 44px; height: 44px; margin-bottom: 20px; }
  .voices .quote-card blockquote { font-size: 15px; }
  .voices .quote-author > span { font-size: 23px; }
  .voices .quote-author small { font-size: 10px; }
  .voices .community-stats { margin: 0 15px; }
  .story-progress:not([hidden]) { display: flex; align-items: center; gap: 5px; width: calc(100% - 2 * var(--gutter)); height: 24px; margin: 4px auto 26px; }
  .story-progress-segment { flex: 1; height: 4px; overflow: hidden; border-radius: 10px; background: #034c2922; }
  .story-progress-segment > span { display: block; width: 100%; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: left center; }
}