@charset "UTF-8";
/* "Ways to partner with Krisp" — Figma node 11255:1408
   ("A: All three open (photo cards)"). Three 410x520 cards, each a full-bleed
   photo under a bottom gradient scrim, with the CTA pinned top-left and the
   copy sitting on the dark end of the scrim. */
.partner_routes {
  background: #ffffff;
  /* Figma gives the frame 40px of top padding, but the logo wall above it
     ends flush on its bottom rule (logos_bordered has no trailing space),
     so the 72px the hero frame carries after that rule lands here. */
  padding: 112px 0 120px;
}
.partner_routes__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 64px;
  margin-bottom: 40px;
}
.partner_routes__title {
  margin: 0;
  flex: 0 0 560px;
  max-width: 560px;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: #1a1a22;
}
.partner_routes__desc {
  margin: 0;
  flex: 0 1 628px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: #434351;
}
.partner_routes {
  /* ---- Cards ---- */
  /* 410 x 3 + 25 x 2 = the 1280 container. */
}
.partner_routes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.partner_routes__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  height: 520px;
  padding: 32px;
  background: #1a1a22;
  border-radius: 20px;
  overflow: hidden;
}
.partner_routes__card:hover .partner_routes__card-bg {
  transform: scale(1.04);
}
.partner_routes {
  /* The photo covers the card edge to edge; Figma draws a 1px border under it
     and then bleeds the photo over it, so no border is left to show. */
}
.partner_routes__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.partner_routes__card-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 372px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
  pointer-events: none;
}
.partner_routes {
  /* Rendered as a <button> when it opens a modal, so clear the default
     button chrome. */
}
.partner_routes__card-cta {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 8px 12px 8px 16px;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  background: #614efa;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.partner_routes__card-cta:hover {
  background: #4a3bbe;
}
.partner_routes__card-cta img {
  flex: 0 0 auto;
}
.partner_routes__card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.partner_routes__card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.partner_routes__card-eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #b4abfd;
}
.partner_routes__card-name {
  margin: 0;
  max-width: 304px;
  font-size: 24px;
  line-height: 36px;
  font-weight: 600;
  color: #f7f7f8;
}
.partner_routes__card-desc {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #f7f7f8;
  opacity: 0.8;
}
.partner_routes__card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.partner_routes {
  /* The outline is an inset shadow, not a border: Figma draws the chip stroke
     inside the 28px box, so a real border would add 2px and shift the text. */
}
.partner_routes__card-chip {
  padding: 6px 12px;
  box-shadow: inset 0 0 0 1px #e7e7ea;
  border-radius: 100px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #f7f7f8;
  opacity: 0.6;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.partner_routes__card-chip.is-key {
  opacity: 1;
}
.partner_routes {
  /* The first chip is the active one at rest; hovering the row hands the
     active state over to whichever chip is under the cursor and dims the
     default one. Both rules carry the same specificity, so the promote rule
     has to stay last for a hover on the first chip to keep it active. */
}
.partner_routes__card-chips:hover .partner_routes__card-chip.is-key {
  opacity: 0.6;
}
.partner_routes__card-chips:hover .partner_routes__card-chip:hover {
  opacity: 1;
}

@media screen and (max-width: 1280px) {
  .partner_routes {
    padding: 72px 0 80px;
  }
  .partner_routes__header {
    gap: 40px;
    margin-bottom: 32px;
  }
  .partner_routes__title {
    flex-basis: 420px;
    font-size: 32px;
    line-height: 40px;
  }
  .partner_routes__desc {
    font-size: 16px;
    line-height: 24px;
  }
  .partner_routes__grid {
    gap: 16px;
  }
}
/* The header stacks from the tablet breakpoint down; the cards hold three
   columns and trade padding for room. */
@media screen and (max-width: 1024px) {
  .partner_routes {
    padding: 40px 0;
  }
  .partner_routes__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .partner_routes__title, .partner_routes__desc {
    flex: 0 1 auto;
    max-width: 100%;
  }
  .partner_routes__card {
    height: 480px;
    padding: 24px;
  }
}
@media screen and (max-width: 767px) {
  .partner_routes__title {
    font-size: 28px;
    line-height: 36px;
  }
  .partner_routes__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .partner_routes__card {
    height: 440px;
    border-radius: 16px;
  }
  .partner_routes__card-name {
    font-size: 20px;
    line-height: 28px;
  }
}