/* Hand-written companion to the generated page.
   Base styles and per-element hover rules live inline in index.html, exactly as
   authored in the design doc. Only what the flattened page genuinely needs is here. */

/* The collapsed Q&A panels carry an inline display:flex, which outranks the
   UA stylesheet's [hidden] rule — so it has to win explicitly. */
[hidden] {
  display: none !important;
}

/* The Q&A buttons use `all:unset`, which also drops the focus ring. Put one back
   for keyboard users without changing the resting appearance. */
[data-faq-toggle]:focus-visible {
  outline: 2px solid oklch(0.53 0.15 38);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Hero: the export's 92vh min-height, ~180px top padding and 104px headline push
   the CTA below the fold on 1080p and MacBook viewports. Compress so it shows on load.
   !important is needed to outrank the generated inline styles. */
[data-screen-label="Hero"] {
  min-height: 0 !important;
  padding: clamp(40px, 7vh, 88px) 0 clamp(64px, 10vh, 120px) !important;
}
[data-screen-label="Hero"] h1 {
  font-size: clamp(40px, min(6.4vw, 7.8vh), 92px) !important;
  max-width: 18ch !important;
}
[data-screen-label="Hero"] > div > p:first-child {
  margin-bottom: clamp(16px, 2.5vh, 28px) !important;
}
[data-screen-label="Hero"] h1 + p {
  margin-top: clamp(16px, 2.5vh, 28px) !important;
}
[data-screen-label="Hero"] h1 + p + div {
  margin-top: clamp(24px, 4vh, 44px) !important;
}

/* Mobile: drop the Newsletter link from the top bar so the header reads cleaner.
   It's still reachable from the hero ("Join the newsletter"). */
@media (max-width: 600px) {
  header nav a.hv1 {
    display: none !important;
  }
}