/* ==========================================================================
   Features hub · hero
   ==========================================================================
   Typographic only — the index below is the page's visual, so the hero stays
   words: the family's annotation chip, its title scale, a lede and the two
   actions. No figures rail; the six rows underneath are the proof.

   The reveal is a CSS load animation (no observer, no JS): this block is
   above the fold, so it plays once on paint rather than waiting for a scroll
   pass that has already happened.
   ========================================================================== */

.feat-hub-hero {
  position: relative;
  padding: clamp(4.5rem, 9vh, 7rem) 0 clamp(2.75rem, 5vw, 4.25rem);
  text-align: center;
}

/* Shared "unfold" separator closing the hero, matching the Comparisons hub.
   Its default 7rem margin is reduced because the directory already owns the
   next section's vertical rhythm. */
.features-page .feat-hub-hero-separator .unfold-separator-wrapper {
  margin: 0.5rem 0 0;
}

/* The family's feature heroes close on a tall device scene, so PageStyles gives
   the section under them an extra band to clear it. This hero is a short
   typographic block: that extra band reads as a hole, so the index starts on
   the standard rhythm instead. Keyed on the hero itself rather than on the
   first slot, so the rule states which hero it is compensating for. */
.features-page
  #features-content
  > div:first-child:has(> .feat-hub-hero)
  + .feat-hub-hero-separator
  + div
  section {
  padding-top: var(--feat-rhythm);
}

/* --------------------------------------------------------------------------
   Load reveal — one curve, staggered down the block
   -------------------------------------------------------------------------- */

.feat-hub-hero__load-reveal {
  animation: feat-hub-hero-reveal 0.9s cubic-bezier(0.22, 0.68, 0.35, 1) both;
}

.feat-hub-hero__eyebrow.feat-hub-hero__load-reveal {
  animation-delay: 100ms;
}
.feat-hub-hero__title.feat-hub-hero__load-reveal {
  animation-delay: 180ms;
}
.feat-hub-hero__lede.feat-hub-hero__load-reveal {
  animation-delay: 320ms;
}
.feat-hub-hero__cta.feat-hub-hero__load-reveal {
  animation-delay: 480ms;
}

@keyframes feat-hub-hero-reveal {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

/* The chip is an inline-flex in the shared sheet; centring a block-level
   paragraph would leave it left-aligned inside a full-width line. */
.feat-hub-hero__eyebrow {
  margin-bottom: 1.5rem;
}

.features-page .feat-hub-hero__title {
  max-width: 15ch;
  margin: 0 auto 1.65rem;
  font-size: clamp(3.75rem, 9.4vw, 8rem);
  letter-spacing: -0.055em;
  line-height: 1.08;
}

/* The family justifies its ledes against a left edge; a centred hero lede has
   no such edge, so it reverts to ragged-right. */
.features-page .feat-hub-hero__lede {
  max-width: 57ch;
  margin: 0 auto;
  font-size: clamp(1.08rem, 1.55vw, 1.24rem);
  line-height: 1.65;
  text-align: center;
  hyphens: none;
}

@media (max-width: 640px) {
  .features-page .feat-hub-hero__title {
    max-width: 12ch;
    font-size: clamp(3.45rem, 17vw, 5.5rem);
    line-height: 1.04;
  }
}

.feat-hub-hero__cta {
  justify-content: center;
  margin-top: clamp(2rem, 3.4vw, 2.75rem);
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .feat-hub-hero__load-reveal {
    animation: none;
  }
}