@keyframes filterCheck {
  from { stroke-dasharray: 0 12; }
  to { stroke-dasharray: 12 12; }
}

#integrations {
  a {
    text-decoration: underline transparent;
    &:hover { text-decoration-color: currentcolor; }
    &:is(.primary, .secondary){
      display: inline-block;
      font-weight: 700;
      white-space: nowrap;
      transition: .2s;
    }
    &.primary {
      padding: 1.25rem 1.75rem;
      border-radius: 0.4rem;
      text-decoration: none;
      &:hover { opacity: .85; }
    }
    &.secondary {
      text-decoration-thickness: 3px;
      text-underline-offset: .75rem;
      padding: .5rem .75rem;
    }
  }
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  font-size: 1.1rem;
}

#hero {
  --hero-accent-color: #221EE9;
  --hero-header-to-image-ratio: 1fr;
  header {
    background:
      no-repeat 65% 20% / 400px 400px radial-gradient(
        #32D9F0,
        #32D9F060 30%,
        transparent 70%
      ),
      no-repeat 100% 50% / 400px 400px radial-gradient(
        #80FFD9,
        transparent 70%
      );
  }
  @media (width < 1000px){
    background:
      no-repeat 0% 0% / min(80vw, 100%) radial-gradient(at top left,
        #32D9F0,
        #32D9F060 30%,
        transparent 70%
      ),
      no-repeat 100% 0% / min(70vw, 100%) radial-gradient(at top right,
        #80FFD9,
        transparent 70%
      );
    header { background: none; }
    svg { display: none; }
  }
}

#integrations {
  display: grid;
  grid-template:
    "header header " auto
    "search search " auto
    "filter results" auto
    / minmax(300px, 1fr) 2fr;
  gap: 3rem;
  place-items: start center;
  header { grid-area: header; }
  h2 {
    margin: 0;
    font-size: clamp(2rem, 1vw + 1.7rem, 2.5rem);
    text-align: center;
  }
}

#search {
  grid-area: search;
  display: grid;
  grid-template:
    "icon  search " 4rem
    "subtext subtext" auto
    / 4.5rem 1fr;
  place-items: center;
  max-width: 40rem;
  margin-bottom: 1rem;
  svg {
    color: #8D949F;
    grid-area: icon;
    width: 2.2rem;
    height: 2.2rem;
    pointer-events: none;
  }
  input {
    grid-area: 1 / 1 / 2 / -1;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 1rem 1.5rem 1rem 4rem;
    box-sizing: border-box;
    color: black;
    background-color: #FAFCFF;
    border: 2px solid #D8DCE3;
    border-radius: .75rem;
    font-family: inherit;
    font-size: 1.1rem;
    line-height: 1.3;
    outline: none;
    transition: .4s;
    &:focus { border-color: #8D949F; }
    &::placeholder {
      opacity: 1;
      color: #979FAD;
    }
  }
  p {
    grid-area: subtext;
    font-size: 1.1rem;
    text-align: center;
  }
  a {
    color: #221EE9;
    white-space: nowrap;
  }
}

#filters {
  padding: 2rem;
  position: sticky;
  top: calc(var(--nav-height) + 2rem);
  background-color: #FAFCFF;
  border: 1px solid #D8DCE3;
  border-radius: 1.25rem;
  h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #70757e;
    font-weight: 600;
  }
  menu {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2.5rem;
  }
  li { margin: 1.2rem 0; }
  input { display: none; }
  label {
    display: grid;
    grid-template:
      "checkbox name     " auto
      ".    description" auto
      / auto  1fr;
    gap: .25rem .75rem;
    place-items: center start;
  }
  svg {
    grid-area: checkbox;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: white;
    background-color: white;
    border: 1px solid #8B93A1;
    border-radius: 1rem;
    box-sizing: border-box;
    path { visibility: hidden; }
  }
  input:checked + label {
    svg {
      border-color: transparent;
      background-color: #221EE9;
    }
    path {
      visibility: visible;
      animation: filterCheck .2s ease 1 both;
    }
  }
  :is(.filter-name, .filter-description){ margin: 0; }
  .filter-name {
    grid-area: name;
    font-size: 1.15rem;
    font-weight: 600;
  }
  .filter-description { grid-area: description; font-size: 0.9rem; }
  a.primary {
    padding: .75rem 1.25rem;
    color: white;
    background-color: black;
    font-weight: 600;
  }
  .cta-actions { font-size: 1rem; }

  @media (width < 1000px){
    menu { margin: 1.5rem 0 2rem; }
    h3 { font-size: 1.1rem; }
    .filter-name { font-size: 1.1rem; }
  }
}

#integrations-list {
  list-style: none;
  place-self: start stretch;
  display: grid;
  --columns: 3;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  /* Every row as tall as the tallest card, so cards match even when a
     translated subtext wraps onto two lines. */
  grid-auto-rows: 1fr;
  place-items: stretch;
  gap: 1.2rem;
  padding: 0;
  margin: 0;
  @media (width < 1100px){ --columns: 2; }
  @media (width < 400px){ --columns: 1; }
  @media (width < 1000px){ gap: 1rem; }
  a, .coming-soon {
    display: grid;
    grid-template: repeat(3, auto) / 1fr;
    align-items: center;
    align-content: start;
    height: 100%;
    box-sizing: border-box;
    padding: 1.5rem .5rem 1rem;
    position: relative;
    color: black;
    border: 1px solid #DFE4EC;
    border-radius: .75rem;
    text-align: center;
    text-decoration: none;
    transition: .3s;
  }
  a {
    &::after {
      content: "Learn more " url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E\
        %3Cpath d='M6 1H9V4V1L4 6M4 2H1V9H8V6' stroke='rgb(0 0 0 / 70%)' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E\
      %3C/svg%3E");
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .75ch;
      width: 100%;
      height: min-content;
      position: absolute;
      inset: auto 0 1rem 0;
      color: rgb(0 0 0 / 70%);
      font-size: .9rem;
      transition: .3s;
    }
    &:hover { border-color: #8D949F; }
    &:hover p { opacity: 0; }
    &:not(:hover)::after {
      opacity: 0;
      translate: 0 1rem;
    }
  }
  .coming-soon-badge {
    position: absolute;
    inset: -.5rem -.5rem auto auto;
    height: 1.5rem;
    width: auto;
  }
  svg {
    place-self: center;
    grid-area: 1 / 1 / 2 / 2;
    width: 3rem;
    height: 3rem;
    margin-bottom: .75rem;
  }
  svg.badge {
    width: 1.25rem;
    height: 1.25rem;
    margin: 1.5rem 0 0 2.625rem;
  }
  .integration-name {
    font-size: 1.1rem;
    font-weight: 600;
    @media (width < 1000px){
      font-size: 1rem;
    }
  }
  p {
    margin: 0;
    color: rgb(0 0 0 / 70%);
    font-size: .9rem;
    transition: .3s;
    @media (width < 1000px){
      font-size: .8rem;
    }
  }
}

#no-results {
  grid-area: results;
  font-size: 1.1rem;
  .no-results-title {
    font-size: 1.2rem;
    font-weight: 500;
  }
  a { color: #221ee9; }
}

footer-menu { background: none; }

@media (width < 800px){
  #integrations {
    grid-template:
      "header" auto
      "search" auto
      "filter" auto
      "results" auto
      / 1fr;
  }
  #filters {
    position: static;
    place-self: stretch;
  }
}