#hero {
  background: linear-gradient(140deg, transparent -25%, white 35%),
    linear-gradient(#0590e2, white, #ff4370);
  header {
    text-align: center;
  }
  h1 {
    margin: 6rem 0 1rem;
    font-size: clamp(2.5rem, 7vw - .3rem, 3.7rem);
  }
  p {
    max-width: 55rem;
    margin: 2rem auto;
    font-size: clamp(1rem, .8vw + .86rem, 1.3rem);
  }
  .chart-benchmarks {
    margin: 5rem 0 0;
  }
}

#saas-roundup-cta {
  margin: 6rem min((1200px - 100vw)/2 - 2rem, -2rem);
}

#research {
  padding-bottom: 6rem;
  background: bottom / 100% 24rem no-repeat linear-gradient(white, #e0f1ff);
  header {
    padding: 2rem;
    text-align: center;
    h2 {
      margin: 1.5rem auto;
      font-size: clamp(2rem, 8.3vw + .4rem, 3rem);
    }
    p {
      margin: 1rem auto;
    }
  }
}

article.report {
  display: grid;
  grid: auto / 1fr 32rem;
  gap: 3rem;
  padding: clamp(2rem, 10vw - .5rem, 3rem);
  margin: 2rem auto;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 0 5rem #eaf0f7;
  h3 {
    margin: 0 0 1rem 0;
    font-size: 1.4rem;
  }
  p.report-author {
    margin: 0 0 2rem 0;
    font-weight: 700;
    font-size: .9rem;
  }
  ul {
    list-style-type: "\2192";
    padding: 0 0 0 1.2rem;
    li {
      padding: 0 0 0 1rem;
      margin: 1rem 0;
    }
  }
  a {
    display: inline-block;
    padding: .6rem 1.2rem;
    margin: 1rem 0 -.5rem;
    color: white;
    background-color: black;
    border-radius: .3rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s;
    &:hover { opacity: .8; }
  }
  img {
    place-self: start;
    width: min(100%, 32rem);
    height: auto;
    margin: 0 auto;
  }
  @media(width < 1000px){
    grid: auto / 1fr;
    img {
      grid-area: 1 / 1;
    }
  }
}

#showcase {
  padding-top: 6rem;
}