/* Page model, straight from the Figma frame.

   Scroll is an auto-layout column: W 640, padding-top 420, gap 32, centre
   aligned. The 420px of top padding is the window onto the video, which is a
   pinned layer behind the column, not part of the flow. */

.page { position: relative; }

/* The stage holds the column and the two pinned layers behind it. It is the
   positioning context for both, so they end where the column ends and never
   reach the contact footer, which in Figma is a sibling of the Scroll frame. */
.stage {
  position: relative;
  display: flow-root;
}

.scroll {
  position: relative;
  z-index: 2;
  width: var(--column);
  margin: 0 auto;
  /* The Figma's 420 is a fixed number, so on a laptop the testimonials clear
     the fold and the page reads as having nothing below. The panel is placed
     from the viewport instead, so the avatar row is always cut in half by it.

     Measured, not derived: on a 1352x761 window the avatar row sat at 613-677
     with the panel top at 351.5, which puts 293.5px between the top of the
     panel and the middle of that row. That distance is CONSTANT — the column
     is 640 wide at every desktop size, so the headline always wraps to the
     same six lines — while the fold moves with the window's height. So the
     height is the only thing this can be measured from.

     It was in vw for a while, on request. vw tracks WIDTH, and it was tuned
     until it happened to be right on one machine; a taller window at the same
     width would have put the avatars back above the fold. This is the same
     placement expressed against the thing that actually decides it.

     dvh rather than vh so a mobile browser's collapsing toolbar is counted.
     The 280 floor only takes over on a window too short for the hero at all,
     and keeps the panel clear of the nav.

     This lives here and not in hero.css: layout.css owns .scroll and loads
     after it, so a rule there was silently overridden — which is why the block
     did not move through several attempts at the value. */
  padding-top: max(280px, calc(100dvh - 294px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

/* Sections are laid out by the column, so none of them carry their own margins */
.scroll > * { margin: 0; }

/* The one place the Figma leaves more than the 32px gap */
.scroll > .collaborations { margin-top: 9px; }

@media (max-width: 700px) {
  .scroll { width: 100%; padding-top: 400px; }
}

/* The column's last section carries trailing padding of its own — Discover ends
   with 28. That sits between the last thing you can see and the footer, so it
   adds to the 128 and the gap reads as 156 on the home while every other page
   shows 128. Trailing space at the end of a container is invisible structure;
   the declared gap should be the whole gap. */
.scroll > *:last-child { padding-bottom: 0; }