@layer layouts {
  html, body {
    scroll-padding-top: calc(var(--nav-height) + 2rem);
  }
  body {
    background: top left / 100vw max(30vw, 24rem) no-repeat linear-gradient(
      -10deg,
      transparent 50%,
      #dfe8ff
    );
  }

  #hero {
    max-width: 900px;
    padding: 8rem 2rem 0;
    margin: 0 auto;
    box-sizing: content-box;
    .backlink {
      display: inline-flex;
      align-items: center;
      gap: .5em;
      margin: 0 0 2rem;
      color: black;
      text-decoration: none;
      font-size: 1.1rem;
      font-weight: 500;
      &:hover {
        text-decoration: underline;
        text-underline-offset: .4em;
      }
      svg {
        width: 1rem;
        height: 1rem;
      }
    }
    .logos {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 0 0 1.5rem;
      svg {
        width: 3.5rem;
        height: 3.5rem;
        padding: .6rem;
        background: white;
        border: 1px solid #DFE4EC;
        border-radius: .75rem;
      }
      .plus {
        color: rgb(0 0 0 / 50%);
        font-size: 1.5rem;
      }
    }
    h1 {
      margin: 0;
      font-size: clamp(2rem, 3.4vw + 1rem, 3.4rem);
    }
    .intro {
      margin: 1.5rem 0 2rem;
      font-size: clamp(1.05rem, .4vw + .95rem, 1.25rem);
      line-height: 1.5;
    }
    /* Buttons match -/modules/hero (the site's standard hero). */
    nav {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem 2rem;
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: .01em;
      white-space: nowrap;
    }
    a.primary {
      padding: 1.25rem 1.75rem;
      color: white;
      background-color: black;
      border-radius: .4rem;
      text-decoration: none;
      transition: opacity .2s;
      &:hover { opacity: .8; }
    }
    a.secondary {
      padding: .5rem .75rem;
      color: black;
      text-decoration: underline transparent;
      text-decoration-thickness: 3px;
      text-underline-offset: .8rem;
      transition: text-decoration-color .2s;
      &:hover { text-decoration-color: currentcolor; }
    }
  }

  #facts {
    max-width: 900px;
    padding: 3rem 2rem 0;
    margin: 0 auto;
    box-sizing: content-box;
    h2 {
      margin: 0 0 1rem;
      font-size: 1.4rem;
    }
    .facts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
      gap: 1.5rem;
    }
    dl {
      display: grid;
      gap: 1rem;
      padding: 1.5rem;
      margin: 0;
      background: #f7f8ff;
      border: 1px solid #e2e4f0;
      border-radius: .75rem;
    }
    .facts-title {
      margin: 0;
      font-weight: 600;
    }
    div {
      display: grid;
      grid-template-columns: 11rem 1fr;
      gap: 1rem;
      @media (width < 600px){
        grid-template-columns: 1fr;
        gap: .25rem;
      }
    }
    dt {
      color: rgb(0 0 0 / 60%);
      font-size: .95rem;
    }
    dd {
      margin: 0;
      font-weight: 500;
      ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: grid;
        gap: .25rem;
      }
    }
    a {
      color: #245aff;
      text-decoration: none;
      &:hover { text-decoration: underline; }
    }
  }

  #content {
    max-width: 900px;
    padding: 3rem 2rem 0;
    margin: 0 auto;
    box-sizing: content-box;
  }

  article {
    max-width: 740px;
    & > :first-child { margin-top: 0; }
    & > h2 {
      font-size: 2rem;
      margin: 2.5em 0 .8em;
    }
    & > h3 {
      font-size: 1.3rem;
      margin: 2em 0 .8em;
    }
    & > p, & > ul, & > ol {
      font-size: 1.1rem;
      line-height: 1.6;
    }
    li + li { margin-top: .4em; }
    /* ...but not between hub cards, which are grid items, not bullets. */
    .integration-list li + li { margin-top: 0; }
    .warehouse-export {
      .columns {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        gap: 1.5rem;
      }
      h2 { font-size: 2rem; margin: 2.5em 0 .8em; }
      h3 { font-size: 1.2rem; margin: 1.5em 0 .5em; }
      p { font-size: 1.05rem; line-height: 1.6; }
      a { color: #245aff; text-decoration: none; }
    }
    .footnote {
      margin: 2rem 0 0;
      font-size: .95rem;
      color: rgb(0 0 0 / 65%);
    }
    :is(p, li) a {
      color: #245aff;
      text-decoration: none;
      &:hover { text-decoration: underline; }
    }
  }
}