body {
  background: top / 100% 30rem no-repeat linear-gradient(to bottom,
    #D3EAFFB2,
    transparent
  );
  @media(width <= 800px){
    padding-top: 3.75rem;
    navigation-menu {
      top: 3.75rem;
    }
    #hero h1 { margin-top: 1em; }
  }
}

nav {
  a:is(.primary, .secondary){
    padding: 1rem 1.4rem;
    border-radius: .75rem;
    text-decoration: none;
    transition: background-color .2s, box-shadow .2s;
  }
  a.primary {
    color: white;
    background-color: black;
    &:hover { background-color: #12324B; }
  }
  a.secondary {
    color: black;
    background: none;
    box-shadow: 0 0 0 2px inset #7A87A2;
    &:hover { box-shadow: 0 0 0 2px inset black; }
  }
}

#hero {
  padding-inline: max((100% - 1100px) / 2 + 2rem, 2rem, (100% - 33rem - 36vw) / 2);
  text-align: center;
  #report-cta {
    display: flex;
    max-width: max-content;
    padding: .625rem 1.25rem;
    margin: 3rem auto;
    align-items: center;
    gap: 2rem;
    background: rgba(184, 220, 255, 0.37);
    border-radius: .5rem;
    text-decoration: none;
    text-align: left;
    color: inherit;
    p { margin: 0; }
    .fake-link {
      display: flex;
      padding: 0 1.5rem 0 0;
      align-items: center;
      gap: .5rem;
      font-weight: 600;
      background: right / 1rem 1rem no-repeat url("data:image/svg+xml,\
        %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='24' height='24'%3E \
          %3Cpath d='M0 4H7M4 1L7 4L4 7M7 4' stroke='black' fill='none'/%3E \
        %3C/svg%3E \
      ");
      white-space: nowrap;
    }
    @media (width <= 800px){
      max-width: none;
      height: 2.5rem;
      margin: 0;
      position: absolute;
      inset: 0 0 auto;
      .marquee {
        flex: 1 0 0;
        container: marquee / inline-size;
        padding-inline-start: 1.25rem;
        margin-inline-start: -1.25rem;
        overflow: clip;
      }
      p {
        width: max-content;
        white-space: nowrap;
        animation: marquee 5s linear infinite;
      }
    }
  }
  h1 {
    margin: 0 auto 1.7rem;
    font-size: clamp(2rem, 1rem + 4vw, 4rem);
  }
  header p {
    font-size: clamp(1rem, .8vw + .86rem, 1.3rem);
    @media (width > 700px){
      max-width: 84%;
      margin: 0 auto;
    }
  }
  nav {
    display: flex;
    justify-content: center;
    gap: 1rem 2rem;
    margin: 2.5rem auto 1rem;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .01em;
    white-space: nowrap;
    @media (width < 500px){
      width: min(100%, 16rem);
      flex-flow: column;
    }
  }
  picture { display: contents; }
  img {
    width: min(95vw, 1400px);
    height: auto;
    margin: -4rem -50vw;
    position: relative;
    z-index: -1;
    @media (width < 1000px){
      width: min(100% + 4rem, 40rem);
      margin: 2rem -2rem 0;
    }
  }
  @media (width < 700px){
    padding-bottom: 2rem;
  }
}
@keyframes marquee {
  0%, 20% { translate: 0 0; }
  80%, 100% { translate: calc(-100% + 100cqw) 0; }
}

.trusted-by {
  color: #666F88;
  padding: 4rem;
  figcaption { margin: 0 0 1.5rem; }
  @media (width < 800px){
    padding: 3rem;
  }
  img { height: clamp(1.8rem, 10vw - .1rem, 3rem); }
  @media (width >= 850px){
    img:nth-of-type(n + 6){ display: none; }
  }
}

#insights {
  max-width: 75rem;
  padding: 7rem clamp(2rem, 7vw - .2rem, 4rem);
  margin: 4rem auto 0;
  box-sizing: border-box;
  background: #F1F5F9;
  border-radius: clamp(0rem, 100vw - 75rem, 2rem);
  header {
    max-width: 54rem;
    margin: 0 auto;
    text-align: center;
  }
  h2 {
    margin: .5em 0 .8em;
    font-size: clamp(2rem, 1rem + 4vw, 4rem);
    span { color: #636F8A; }
  }
  p {
    margin: 0;
    font-size: clamp(1rem, .8vw + .9rem, 1.2rem);
  }
  #kyle-quote {
    display: flex;
    padding: 2rem;
    margin: 6rem clamp(-2rem, 25vw - 8.5rem, 1rem) 4rem;
    position: relative;
    background: white;
    border: 1px solid #DADBE9;
    border-radius: clamp(0rem, 10vw - 2.6rem, 1rem);
    box-shadow: 0 0 .5rem #00000018;
    overflow: clip;
    & > img {
      width: min(60vw - 12rem, 35rem);
      height: auto;
    }
    blockquote {
      padding: 2rem;
      margin: -2rem -2rem -2rem 2rem;
      color: #69574B;
      background: #E8E4E0;
      &::before {
        content: "";
        width: 12rem;
        height: 100%;
        float: right;
        shape-outside: polygon(
          100% 0%,
          100% 100%,
          calc(100% - 12rem) 100%,
          calc(100% - 8rem) calc(100% - 4rem),
          calc(100% - 8rem) calc(100% - 11rem),
          100% calc(100% - 11rem)
        );
      }
      p { 
        font-weight: 600;
        line-height: 1.3;
      }
      @media (width > 1130px) or (width < 1080px) {
        p::before {
          content: open-quote;
          display: block;
          height: 2rem;
          margin: -1rem 0 0;
          color: #CDC2B7;
          font-size: 4rem;
          line-height: 1;
        }
        p::after { content: close-quote; }
      }
      cite {
        display: block;
        margin: 1rem 0 0;
        color: #7C695D;
        font-size: .95rem;
        font-style: normal;
      }
      cite span { display: block; }
      .quote-name { font-weight: 600; }
      .quote-role { font-size: .95em; }
      img {
        width: 14rem;
        height: auto;
        position: absolute;
        inset: auto 0 0 auto;
      }
    }
    @media (width < 1080px){
      flex-flow: column;
      & > img {
        width: min(100%, 40rem);
        margin: 0 auto;
      }
      blockquote {
        flex: 0 0 auto;
        padding-left: clamp(12rem, 25vw + 3rem, 16rem);
        margin: 2rem -2rem -2rem;
        img {
          inset: auto auto 0 0;
          width: clamp(10rem, 25vw + 1rem, 14rem);
        }
        &::before { content: none; }
        cite span { display: inline; }
        p { position: relative; }
        p::before {
          position: absolute;
          inset: .25rem auto auto -2.25rem;
        }
      }
    }
    @media (width < 650px) {
      blockquote {
        padding-left: 2rem;
        img { display: none; }
        p::before, p::after { content: none; }
      }
    }
  }
  picture img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

#billing-strats header, #integrations header {
  display: grid;
  grid: auto / 25rem minmax(auto, 50%);
  justify-content: space-between;
  gap: 2rem;
  margin: 4rem 0;
  h2 {
    margin: 0;
    font-size: clamp(2rem, 3vw + 1.2rem, 2.5rem);
  }
  p {
    margin: .5rem 0;
    font-size: clamp(1rem, .8vw + .9rem, 1.2rem);
  }
  @media (width < 800px){
    grid: auto / auto;
    text-align: center;
    justify-content: center;
    p {
      max-width: 30rem;
      margin: 0 auto;
    }
  }
}

#billing-strats {
  padding-block: 7rem 12rem;
  @media(width < 900px) {
    padding-block: 6rem 4rem;
  }
  nav {
    display: flex;
    gap: 1rem;
    padding: 0 2rem;
    margin: 5rem -2rem;
    position: relative;
    overflow: auto clip;
    a {
      text-decoration: none;
      padding: .375rem .75rem;
      color: inherit;
      border-radius: .5rem;
      border: 1px solid #A1A6BD;
      white-space: nowrap;
    }
  }
  h3 {
    font-size: clamp(1rem, .8vw + .9rem, 1.2rem);
  }
  ul {
    scroll-snap-type: inline mandatory;
    scroll-behavior: smooth;
    display: flex;
    gap: 4rem;
    padding: 0 2rem;
    margin: 0 -2rem;
    overflow: scroll;
    list-style: none;
  }
  li {
    flex: 0 0 100%;
    scroll-snap-align: center;
    img {
      width: calc(100% - 20rem);
      height: auto;
      float: right;
      margin: 0 0 0 4rem;
    }
    @media(width < 900px){
      h3 { display: none; }
      img {
        float: none;
        margin: 0 0 2rem;
        width: 100%;
      }
    }
  }
  &.manual-scroll {
    ul {
      display: grid;
      grid: auto / auto;
      overflow: clip;
    }
    li {
      grid-area: 1 / 1;
      opacity: 0;
      translate: -2rem 0;
      transition: opacity .3s, translate .3s;
      li.selected ~ & { translate: 2rem 0; }
    }
    a {
      text-align: center;
      &::after {
        content: attr(data-label) / "";
        content: attr(data-label);
        display: block;
        height: 1px;
        margin-top: -1px;
        color: transparent;
        font-weight: 600;
      }
      &.selected {
        font-weight: 600;
        border-color: currentcolor;
      }
    }
    li.selected {
      opacity: 1;
      translate: 0;
    }
  }
}

#integrations {
  color: #D0DBF5;
  background: #192744;
  padding-bottom: 12rem;
  @media(width < 900px) {
    padding-bottom: 6rem;
  }
  @media(width >= 800px){
    header {
      margin: 8rem 0;
    }
  }
  h2 { color: white; }
  h2 span { color: #ACBAD9; }
  img {
    width: 100%;
    height: auto;
  }
}

#workflows {
  header {
    margin: 4rem 0;
    text-align: center;
    h2 {
      max-width: 50rem;
      margin: 2em auto 1em;
      font-size: clamp(2rem, 3vw + 1.2rem, 2.6rem);
    }
    p {
      margin: 0 auto;
      font-size: clamp(1rem, .8vw + .9rem, 1.2rem);
    }
  }
  @media(width < 900px) {
    padding-bottom: 7rem;
  }
  #automations {
    padding: clamp(3rem, 20vw - 9.4rem, 5rem);
    margin: 4rem 0;
    box-sizing: border-box;
    background: #F7FAFD;
    border-radius: 2rem;
    &::after {
      content: "";
      display: block;
      clear: both;
    }
    img {
      float: right;
      max-width: min(100%, 30rem);
      height: auto;
      margin: 0 0 0 4rem;
    }
    h3 {
      margin: 3em 0 1em;
      font-weight: 600;
      font-size: clamp(1rem, .8vw + .9rem, 1.3rem);
    }
    p {
      max-width: 20rem;
    }
    a {
      display: inline-block;
      padding: 1rem 1.25rem;
      margin: 2rem 0 0;
      color: white;
      background: black;
      border-radius: .5rem;
      font-weight: 600;
      text-decoration: none;
      transition: background-color .2s;
      &:hover { background: #12324B; }
    }
    @media (width < 1000px) {
      max-width: 30rem;
      padding: 0;
      margin: 0 auto;
      background: none;
      img {
        float: none;
        display: block;
        margin: 0;
      }
      p { max-width: none; }
    }
  }
}

#the-standard {
  padding-block: 9rem;
  color: white;
  background: linear-gradient(to bottom,
    #232121 15%,
    #614848 50%,
    #232121 75%
  );
  @media (width < 900px){
    padding-block: 4rem;
  }
  header {
    max-width: 54rem;
    margin: 0 auto;
    text-align: center;
    h2 {
      margin: .5em 0 .8em;
      font-size: clamp(2rem, 1rem + 4vw, 4rem);
      span { color: #BEA5A5; }
    }
    p {
      margin: 0;
      color: #CDD0D7;
      font-size: clamp(1rem, .8vw + .9rem, 1.2rem);
    }
  }
  ul {
    display: flex;
    height: clamp(12rem, 33vw + 5.4rem, 24rem);
    justify-content: space-around;
    align-items: end;
    padding: 0;
    margin: 4rem clamp(-2rem, 8vw - 3.7rem, 2rem) 0;
    list-style: none;
  }
  li:first-of-type::after {
      content: "";
      width: 150vw;
      height: 20rem;
      background: linear-gradient(to bottom,
        transparent,
        #282020 40% 60%,
        transparent
      );
      position: absolute;
      inset: auto auto -10rem -50vw;
      pointer-events: none;
      z-index: 3;
    }
  li {
    flex: 1 0 0;
    display: flex;
    justify-content: center;
    align-items: end;
    position: relative;
    width: 0;
    height: 100%;
    white-space: nowrap;
    figure { display: contents; }
    img {
      width: auto;
      height: 100%;
      position: absolute;
      inset: auto auto 0 50%;
      translate: -50% 0;
      z-index: 2;
    }
    figcaption {
      display: flex;
      flex-flow: column;
      margin-bottom: 2rem;
      position: relative;
      z-index: 4;
      color: #E4D3CB;
      .name {
        font-weight: 600;
        font-size: clamp(1rem, 1vw + .8rem, 1.2rem);
      }
      .role {
        font-size: clamp(.8rem, 2vw + .4rem, 1rem);
      }
    }
  }
  li:last-of-type {
    img { z-index: 1; }
  }
  @media (width < 1000px) {
    li { justify-content: start; }
    li:last-of-type { justify-content: end; }
  }
  @media (width < 700px){
    li:nth-of-type(even) figcaption { margin-bottom: 4rem; }
    li:nth-of-type(odd) figcaption { margin-bottom: 1rem; }
  }
  & > img {
    width: calc(100% + 4rem);
    height: auto;
    margin: 2rem -2rem;
    position: relative;
    z-index: 5;
    mask: linear-gradient(to top, transparent 10%, #FFF2 20%, white 50%);
    @media (width < 800px){
      width: 150%;
      margin: 0 -25%;
    }
  }
  a {
    display: block;
    width: max-content;
    padding: 1rem 1.25rem;
    margin: 1rem auto;
    color: black;
    background: #D8B6B6;
    border-radius: .5rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s;
    &:hover { background: #edcccc; }
  }
}

#pricing {
  display: grid;
  grid: 1fr 1fr / 1fr 1fr;
  place-items: start;
  gap: 4rem;
  padding-block: 8rem;
  border-bottom: 1px solid #E0E2EA;
  h2 {
    align-self: end;
    max-width: 30rem;
    margin: 0;
    font-size: clamp(2rem, 3.5vw + 1.1rem, 3rem);
  }
  nav {
    display: flex;
    gap: 1rem 2rem;
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .01em;
    white-space: nowrap;
    @media (width < 500px){
      width: min(100%, 16rem);
      flex-flow: column;
      text-align: center;
    }
  }
  #up-to-120k {
    grid-area: 1 / 2 / -1 / -1;
    max-width: 20rem;
    padding: 3rem;
    margin: 2rem clamp(0rem, 20vw - 4rem, 2rem);
    position: relative;
    &::before {
      content: "";
      position: absolute;
      inset: -15%;
      background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' vector-effect='non-scaling-stroke' preserveAspectRatio='none' fill='none' stroke='%23BCC0D6'%3E%3Cg stroke-linecap='square' stroke-width='12'%3E%3Cpath d='M1 1v.01' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M9 1v.01' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M9 9v.01' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M1 9v.01' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Cpath d='M0 1H10M0 9H10M1 0V10M9 0V10' vector-effect='non-scaling-stroke' stroke-width='2' stroke-dasharray='3 7'/%3E%3C/svg%3E");
    }
    header {
      text-align: center;
      h3 {
        margin: 0 0 1em;
      }
      p {
        margin: 0;
        font-weight: 600;
        font-size: 2rem;
      }
      em {
        font-style: normal;
        line-height: 1;
        font-size: 5rem;
      }
      span {
        display: block;
        font-weight: normal;
        font-size: 1rem;
        text-indent: 2ch;
      }
    }
    ul {
      padding: 0;
      margin: 2rem 0 0;
      list-style: none;
    }
    li {
      padding-left: 1.75rem;
      margin: .75rem 0;
      background: 0 .25em / 1rem 1rem no-repeat url("data:image/svg+xml, \
        %3Csvg viewBox='0 0 8 8' width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E \
          %3Cpath d='M1 4L3 6M3 6L7 2' stroke='%231FD273' stroke-linecap='round'/%3E \
        %3C/svg%3E \
      ");
    }
  }
  @media(width < 900px){
    display: flex;
    flex-flow: column;
    align-items: center;
    h2 {
      text-align: center;
      align-self: center;
    }
    #up-to-120k { margin-top: 3rem; }
  }
}