/**
 * StreamVerse — Contact Page Hero
 *
 * Same construction as the FAQ/Trial/Pricing pages' own hero sections
 * (faq-hero.css, trial-hero.css, pricing-page-hero.css) — a small,
 * compact, centered intro scoped to this page only. padding-top clears
 * the fixed Header the same proven way (header.css's `.header` is
 * `position: fixed`) — --space-9 (96px), the same value used on every
 * other page's own hero.
 *
 * No new colors, radii, or type sizes: everything below is an existing
 * token, and #A3AED0 is the exact literal color every other section's
 * subtitle already uses sitewide.
 */

/* ------------------------------------------------------------------
 * Sticky-footer fix for this page specifically.
 *
 * Contact is one of the site's shorter pages (a compact hero + two
 * cards + a short reassurance note), so on wide/tall viewports — a
 * large monitor, an iPad Pro in portrait, a maximized browser window —
 * its total content height can end up LESS than the viewport height.
 * Without this, the page simply ends wherever its content ends,
 * leaving a visible band of the plain body background between the
 * footer and the actual bottom of the browser window: the "empty
 * space below the banner" this fixes.
 *
 * The fix makes body a full-viewport-height flex column and lets
 * #main-content (everything above the footer — .header and the
 * WhatsApp widget are both `position: fixed`, already out of normal
 * flow) grow to fill any leftover space, pushing the footer down to
 * sit flush with the bottom of the viewport instead of leaving a gap
 * after it. flex: 1 0 auto only ever ADDS space to #main-content when
 * the viewport is taller than the content — on any viewport where
 * this page's content is already taller than the viewport (most
 * phones, most laptops), there's no leftover space to fill, so this
 * is a no-op and normal scrolling is completely unaffected. No fixed
 * height, no vh-based sizing on any individual section, no negative
 * margins — just the standard, root-cause CSS pattern for "let the
 * footer reach the bottom of the viewport without ever cutting off or
 * stretching the actual content."
 *
 * Scoped to this page only, not base.css: contact-hero.css is
 * exclusively linked from contact.html (confirmed — no other page
 * includes this stylesheet), so this body/#main-content rule can
 * never affect any other page.
 * ------------------------------------------------------------------ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-content {
  flex: 1 0 auto;
}

.contact-hero {
  padding-top: var(--space-9);
  /* Bottom padding dropped to 0 — the gap down to the contact cards is
     now owned entirely by .contact-options's own top padding (see
     contact-options.css), the exact same technique already used to
     tighten the Pricing page's own title-to-cards gap
     (pricing-page-hero.css + .pricing__grid, 32px total). */
  padding-bottom: 0;
  text-align: center;
}

.contact-hero__inner {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .contact-hero__inner {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .contact-hero__inner {
    padding-inline: var(--space-7);
  }
}

.contact-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  line-height: var(--text-h1-line-height);
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Same construction as every other page hero's own subtitle: max-width:none
   + width:fit-content + margin-inline:auto centers the box on its own
   content width, with text-align as the belt-and-suspenders. margin-top:
   --space-1 matches the exact title-to-subtitle gap used sitewide. */
.contact-hero__subtitle {
  max-width: none;
  width: fit-content;
  margin-top: var(--space-1);
  margin-inline: auto;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: #A3AED0;
}