@charset "UTF-8";
/* "How to partner with Krisp" — Figma nodes 11167:4177 / 11162:1495.
   The section pins for the length of its own scroll: the connecting line
   fills with scroll and each step lights up as the line reaches its node.
   When the line is full the pin releases and the page scrolls on normally. */
.partner_steps {
  position: relative;
  /* Pin viewport + 150vh of travel spent on the three steps. */
  height: calc(100dvh + 150vh);
  /* Painted against the viewport, not the section box, so the gradient holds
     still while the section is pinned instead of sliding past. */
  background-color: #2a216b;
  background-image: radial-gradient(120% 130% at 23% 0%, #483abb 0%, #3a2e95 42%, #2a216b 100%);
  background-attachment: fixed;
}
.partner_steps__pin {
  position: sticky;
  top: 73px;
  height: calc(100dvh - 73px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.partner_steps .container {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.partner_steps__title {
  margin: 0;
  text-align: center;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: #ffffff;
}
.partner_steps {
  /* ---- Timeline ---- */
}
.partner_steps__timeline {
  position: relative;
}
.partner_steps {
  /* The track spans node 1's centre to node 3's centre: half a column in
     from each end (column = 1/3 of the row, node is 36px at its start). */
}
.partner_steps__track {
  position: absolute;
  left: 18px;
  right: calc(33.333% - 34.667px);
  top: 182.5px;
  height: 3px;
  border-radius: 3px;
  background: #2a216b;
}
.partner_steps__fill {
  display: block;
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(to right, #614efa 0%, #a59afc 100%);
  box-shadow: 0 0 16px 0 rgba(165, 154, 252, 0.45);
}
.partner_steps__row {
  position: relative;
  /* Above the absolutely-positioned track, so the line passes behind
     the node circles rather than across them. */
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 25px;
}
.partner_steps__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.partner_steps__tile-slot {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 144px;
}
.partner_steps__tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  height: 140px;
  padding: 12px;
  border: 1px solid #343441;
  border-radius: 16px;
  background: #23232e;
  overflow: hidden;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.partner_steps__node {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
}
.partner_steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(97, 78, 250, 0.5);
  border-radius: 100px;
  background: #2a216b;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: rgba(247, 247, 248, 0.6);
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.partner_steps__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.partner_steps__step-title {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: #f7f7f8;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}
.partner_steps__step-desc {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #f7f7f8;
  opacity: 0.38;
  transition: opacity 0.4s ease;
}
.partner_steps {
  /* ---- Active step ---- */
}
.partner_steps__step.is-active .partner_steps__tile {
  transform: translateY(-4px);
  border-color: #614efa;
  box-shadow: 0 0 24px 0 rgba(97, 78, 250, 0.35);
}
.partner_steps__step.is-active .partner_steps__num {
  background: #614efa;
  border-color: #614efa;
  color: #f7f7f8;
  box-shadow: 0 0 16px 0 rgba(165, 154, 252, 0.5);
}
.partner_steps__step.is-active .partner_steps__step-title {
  opacity: 1;
}
.partner_steps__step.is-active .partner_steps__step-desc {
  opacity: 0.7;
}
.partner_steps {
  /* ---- Tile: apply ---- */
}
.partner_steps__field {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: #14141a;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #f7f7f8;
  opacity: 0.55;
}
.partner_steps__submit-row {
  display: flex;
  justify-content: flex-end;
}
.partner_steps__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 26px;
  border-radius: 100px;
  background: #614efa;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #f7f7f8;
}
.partner_steps {
  /* ---- Tile: review ---- */
}
.partner_steps__status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 12px;
  border-radius: 100px;
  background: #14141a;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #f7f7f8;
  opacity: 0.9;
}
.partner_steps__status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: #f5b544;
  box-shadow: 0 0 0 3px rgba(245, 181, 68, 0.22);
}
.partner_steps__progress {
  display: flex;
  gap: 8px;
}
.partner_steps__progress-seg {
  flex: 1 1 0;
  height: 6px;
  border-radius: 6px;
  background: #343441;
}
.partner_steps__progress-seg.is-done {
  background: #614efa;
}
.partner_steps__tile-note {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #f7f7f8;
  opacity: 0.65;
}
.partner_steps {
  /* ---- Tile: earn ---- */
}
.partner_steps__chart {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  height: 61px;
}
.partner_steps__bar {
  display: block;
  flex: 0 0 56px;
  max-width: 56px;
  border-radius: 6px;
  background: #343441;
}
.partner_steps__bar--peak {
  background: #614efa;
}
.partner_steps {
  /* ---- Prompt row ---- */
}
.partner_steps__prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.partner_steps__prompt-text {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #f7f7f8;
  opacity: 0.8;
}
.partner_steps {
  /* Rendered as a <button> when it opens the inquiry modal, so the default
     button chrome needs clearing. */
}
.partner_steps__prompt-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  background: transparent;
  cursor: pointer;
  border: 1px solid rgba(247, 247, 248, 0.4);
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #f7f7f8;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.partner_steps__prompt-cta:hover {
  background: #f7f7f8;
  border-color: #f7f7f8;
  color: #1a1a22;
}

@media screen and (max-width: 1280px) {
  .partner_steps__title {
    font-size: 32px;
    line-height: 40px;
  }
  .partner_steps .container {
    gap: 40px;
  }
  .partner_steps__row {
    gap: 16px;
  }
  .partner_steps__bar {
    flex: 1 1 0;
    max-width: none;
  }
  .partner_steps__chart {
    gap: 10px;
  }
}
/* Short viewports: the pin would clip, so shrink the vertical rhythm. */
@media screen and (max-height: 760px) and (min-width: 1025px) {
  .partner_steps .container {
    gap: 24px;
  }
  .partner_steps__title {
    font-size: 28px;
    line-height: 36px;
  }
  .partner_steps__tile-slot {
    height: 120px;
  }
  .partner_steps__tile {
    height: 116px;
  }
  .partner_steps__track {
    top: 158px;
  }
  .partner_steps__node {
    height: 44px;
  }
}
/* No pinning below this width: the steps become a plain vertical list with a
   filled connector, and every step reads as active. */
@media screen and (max-width: 1024px) {
  .partner_steps {
    height: auto;
    padding: 56px 0;
    /* Nothing is pinned here, and iOS treats `fixed` unreliably. */
    background-attachment: scroll;
  }
  .partner_steps__pin {
    position: static;
    top: auto;
    height: auto;
    overflow: visible;
  }
  .partner_steps .container {
    gap: 32px;
  }
  .partner_steps__track {
    left: 17px;
    right: auto;
    top: 24px;
    bottom: 80px;
    width: 3px;
    height: auto;
  }
  .partner_steps__fill {
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, #614efa 0%, #a59afc 100%);
  }
  .partner_steps__row {
    flex-direction: column;
    gap: 32px;
  }
  .partner_steps__step {
    flex: 0 0 auto;
    padding-left: 56px;
    position: relative;
  }
  .partner_steps__step .partner_steps__tile,
  .partner_steps__step .partner_steps__num,
  .partner_steps__step .partner_steps__step-title,
  .partner_steps__step .partner_steps__step-desc {
    transition: none;
  }
  .partner_steps__step .partner_steps__num {
    background: #614efa;
    border-color: #614efa;
    color: #f7f7f8;
  }
  .partner_steps__step .partner_steps__step-title {
    opacity: 1;
  }
  .partner_steps__step .partner_steps__step-desc {
    opacity: 0.7;
  }
  .partner_steps__tile-slot {
    height: auto;
  }
  .partner_steps__node {
    position: absolute;
    left: 0;
    top: 0;
    height: 36px;
  }
}
@media screen and (max-width: 767px) {
  .partner_steps {
    padding: 32px 0;
  }
  .partner_steps__title {
    font-size: 28px;
    line-height: 36px;
  }
  .partner_steps__step-title {
    font-size: 18px;
    line-height: 26px;
  }
  .partner_steps__step-desc {
    font-size: 15px;
    line-height: 22px;
  }
  .partner_steps__prompt {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .partner_steps__prompt-cta {
    height: 40px;
    padding: 0 20px;
  }
}