/* styles/sections/cta-band.css
 * The fern closing band the landing pages already end on (not the shared Closing CTA: these
 * pages keep their own copy and actions). Flat fern from .surface--inverse; the h2 holds the
 * pre-swap 890px measure and the deck its pre-swap breaks (656px). Actions are the inverse
 * button and the light arrow link in a fern CTA pair. 48px padding below 768px, the page's own pre-swap query. */
@layer sections {
  .cta-section {
    position: relative;
    padding-block: var(--space-96);
  }

  /* The hairline that fades in across the band's top edge (css/animations.css). */
  .cta-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule-edge), transparent);
  }

  .cta-section h2 {
    max-width: 890px;
    margin-inline: auto;
  }

  /* The deck was 16px in 618px before the swap; on the body role's 17px step the same breaks
     need 17/16 of that measure (656px). */
  .cta-section h2 + p {
    max-width: 656px;
    margin: var(--space-24) auto var(--space-32);
    color: var(--white-85);
  }

  .cta-section .cta-pair {
    justify-content: center;
  }

  @media (width <= 767px) {
    .cta-section {
      padding-block: var(--space-48);
    }
  }
}