/* ShopLeads launch film — page-specific rules only.
   Everything else comes from css/shopleads.css, which is loaded first.
   Keep this file small: anything reusable belongs in the design system. */

/* Film-first page: the headline sits close to the top so the stage reaches
   the fold on a laptop, and the gap down to the video is tighter than the
   default hero rhythm. */
.hero {
  padding-block: clamp(30px, 4.4vw, 58px) clamp(20px, 2.8vw, 30px);
  gap: 18px;
}
.hero h1 { max-width: 15ch; }

/* The in-page fallback paragraph — only rendered by a browser that supports
   no <video> at all — should read as body copy, not as a bare link. */
.vstage video > p {
  margin: 0;
  padding: 24px;
  color: var(--on-dark-80);
  font-size: 15px;
  line-height: 1.5;
}

/* The proof line is a step quieter than the trial terms above it. */
.sec-tight .proofline { margin-top: 4px; }

/* After the film the page is one continuous argument — the sections below it
   sit closer together than the default marketing rhythm. */
#what { padding-block: clamp(34px, 5vw, 68px); }
#what + .sec { padding-top: 0; }