/* Use --gradient-start and --gradient-end for custom gradient colors */
@layer modules {
  .footer-cta {
    display: grid;
    grid-template: auto auto / 1fr;
    place-items: center;
    gap: 5rem;
    max-width: 72rem;
    padding: clamp(6rem, 8vw + 1rem, 8rem) 2rem;
    margin: 4rem auto;
    box-sizing: border-box;
    border-radius: clamp(0px, 30vw - 21.6rem, 2rem);
    background: center / cover
      url("/-/modules/footer-cta/background.svg?v=QHTRe//nW9"),
      linear-gradient(-70deg,
        var(--gradient-start, #6DBFFF),
        var(--gradient-end, #BFF1FF)
      );
    font-size: clamp(1rem, .4vw + .9rem, 1.2rem);
    text-align: center;
    h2 {
      max-width: 50rem;
      margin: 0;
      font-size: clamp(2rem, 3vw + 1.1rem, 3.5rem);
      line-height: 1.3;
      font-weight: 700;
    }
    nav {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1.5rem 2rem;
    }
    a {
      display: inline-block;
      padding: 1rem 1.4rem;
      color: black;
      border-radius: .75rem;
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
      transition: background-color .2s, box-shadow .2s;
      &:first-child {
        color: white;
        background-color: black;
        &:hover { background-color: #12324B; }
      }
      &:not(:first-child){
        background: none;
        box-shadow: 0 0 0 2px inset #7A87A2;
        &:hover { box-shadow: 0 0 0 2px inset black; }
      }
    }
    book-a-demo {
      --demo-input-background: white;
      --demo-radius: .75rem;
    }
    p {
      max-width: 25rem;
      margin: -1em 0 0;
    }
    &.slim {
      grid-template: auto / 1fr auto;
      gap: 2rem;
      place-items: center start;
      padding: clamp(3rem, 5vw + .5rem, 5rem) 5rem;
      h2 {
        text-align: left;
        font-size: clamp(1.3rem, 1.5vw + 1rem, 2rem);
      }
      nav { gap: 2rem; }
      @media (width < 900px){
        grid-template: auto auto / 1fr;
        place-items: center;
        header { text-align: center; }
      }
    }
  }
}