/* ==========================================================================
   Workflow Studio — showreel
   pitch.css
   The reading of the headline, directly under the hero.
   ========================================================================== */

/* --- Pitch -----------------------------------------------------------------
   Its own band rather than a column inside the hero: the footage owns the
   first screen, and this is the first thing read once the page has been
   scrolled. Padding is lighter than .section — it belongs to the hero above
   it, not to the sections below.
   -------------------------------------------------------------------------- */

.pitch {
  padding: 72px 0 24px;
}

.pitch-copy {
  /* Sized against its column, so the tagline keeps its proportions when the
     measure narrows — same reason the display headline is set in cqw. */
  container-type: inline-size;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.pitch-tagline {
  margin: 0;
  font-size: clamp(22px, 5cqw, 38px);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.pitch-sub {
  /* Narrower than the block it sits in, so it needs its own centring — the
     auto margins are what keep it under the middle of the tagline. */
  margin: 20px auto 0;
  max-width: 520px;
  color: var(--text-muted);
  font-size: 17px;
}

/* A flex row is not moved by text-align, so the centred block needs this on
   top — same reason .cta re-centres the row it borrows from the hero. */
.pitch .hero-actions {
  justify-content: center;
}

.pitch-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-muted);
}