.join-page {
  --join-fluid-width: min(100vw, var(--page-max-width));

  width: 100%;
  overflow: hidden;
}

.join-hero {
  position: relative;
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  overflow: hidden;
}

.join-hero__image {
  width: 100%;
  height: auto;
}

.join-search {
  position: absolute;
  top: calc(583 / var(--design-width) * var(--join-fluid-width));
  left: 50%;
  display: flex;
  align-items: center;
  width: calc(900 / var(--design-width) * var(--join-fluid-width));
  height: calc(66 / var(--design-width) * var(--join-fluid-width));
  padding: calc(3 / var(--design-width) * var(--join-fluid-width));
  margin: 0;
  background: #202120;
  border-radius: calc(34 / var(--design-width) * var(--join-fluid-width));
  transform: translateX(-50%);
}

.join-search__input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 calc(24 / var(--design-width) * var(--join-fluid-width));
  color: #ffffff;
  font-size: calc(18 / var(--design-width) * var(--join-fluid-width));
  font-weight: 500;
  background: transparent;
  border: 0;
  outline: none;
  appearance: none;
}

.join-search__input::-webkit-search-decoration,
.join-search__input::-webkit-search-cancel-button {
  appearance: none;
}

.join-search__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: calc(60 / var(--design-width) * var(--join-fluid-width));
  height: calc(60 / var(--design-width) * var(--join-fluid-width));
  padding: 0;
  background: #ffffff;
  border: 0;
  border-radius: 50%;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.join-search__icon {
  width: calc(32 / var(--design-width) * var(--join-fluid-width));
  height: calc(32 / var(--design-width) * var(--join-fluid-width));
  transition: transform 0.18s ease;
}

.join-search__button:hover,
.join-search__button:focus-visible {
  background: #ffffff;
  box-shadow: 0 0 18px rgb(255 255 255 / 35%);
  transform: scale(1.05);
}

.join-search__button:hover .join-search__icon,
.join-search__button:focus-visible .join-search__icon {
  transform: scale(1.08);
}

.join-search__button:active {
  box-shadow: 0 0 10px rgb(255 255 255 / 28%);
  transform: scale(0.96);
}

.join-search__button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.join-careers {
  position: relative;
  display: grid;
  grid-template-columns: calc(500 / var(--design-width) * var(--join-fluid-width)) 1fr;
  width: 100%;
  max-width: var(--page-max-width);
  min-height: calc(847 / var(--design-width) * var(--join-fluid-width));
  margin: calc(-120 / var(--design-width) * var(--join-fluid-width)) auto 0;
  color: #ffffff;
  background: var(--glass-panel-bg, rgb(5 6 7 / 58%));
  border: 1px solid var(--glass-panel-border-color, rgb(255 255 255 / 22%));
  border-radius: calc(64 / var(--design-width) * var(--join-fluid-width))
    calc(64 / var(--design-width) * var(--join-fluid-width)) 0 0;
}

.join-careers::before {
  position: absolute;
  inset: 1px;
  border: 1px solid var(--glass-panel-inner-border-color, rgb(255 255 255 / 7%));
  border-bottom: 0;
  border-radius: calc(63 / var(--design-width) * var(--join-fluid-width))
    calc(63 / var(--design-width) * var(--join-fluid-width)) 0 0;
  pointer-events: none;
  content: "";
}

.join-filter {
  padding-top: calc(55 / var(--design-width) * var(--join-fluid-width));
  padding-left: calc(195 / var(--design-width) * var(--join-fluid-width));
  padding-right: calc(36 / var(--design-width) * var(--join-fluid-width));
  padding-bottom: calc(76 / var(--design-width) * var(--join-fluid-width));
}

.join-filter__top {
  position: relative;
  height: calc(20 / var(--design-width) * var(--join-fluid-width));
}

.join-filter__title {
  position: absolute;
  top: calc(2 / var(--design-width) * var(--join-fluid-width));
  left: calc(2 / var(--design-width) * var(--join-fluid-width));
  color: #ffffff;
  font-size: calc(13 / var(--design-width) * var(--join-fluid-width));
  font-weight: 400;
  line-height: calc(20 / var(--design-width) * var(--join-fluid-width));
}

.join-filter__clear {
  position: absolute;
  top: calc(3 / var(--design-width) * var(--join-fluid-width));
  right: 0;
  padding: 0;
  color: #00a4ff;
  font-size: calc(13 / var(--design-width) * var(--join-fluid-width));
  font-weight: 400;
  line-height: calc(18 / var(--design-width) * var(--join-fluid-width));
  background: transparent;
  border: 0;
}

.join-filter__divider {
  width: 100%;
  height: 1px;
  margin-top: calc(14 / var(--design-width) * var(--join-fluid-width));
  background: #1e1e1e;
}

.join-filter__group {
  margin-top: calc(36 / var(--design-width) * var(--join-fluid-width));
}

.join-filter__group-title {
  margin: 0 0 calc(18 / var(--design-width) * var(--join-fluid-width));
  color: rgb(255 255 255 / 38%);
  font-size: calc(13 / var(--design-width) * var(--join-fluid-width));
  font-weight: 400;
  line-height: 1;
}

.join-filter__group-title--social {
  margin-top: calc(26 / var(--design-width) * var(--join-fluid-width));
}

.join-filter__subgroup {
  margin-top: calc(16 / var(--design-width) * var(--join-fluid-width));
}

.join-filter__subgroup-title {
  margin: 0 0 calc(12 / var(--design-width) * var(--join-fluid-width));
  color: rgb(255 255 255 / 68%);
  font-size: calc(13 / var(--design-width) * var(--join-fluid-width));
  font-weight: 500;
  line-height: 1;
}

.join-filter__option {
  display: flex;
  align-items: center;
  gap: calc(10 / var(--design-width) * var(--join-fluid-width));
  margin-bottom: calc(12 / var(--design-width) * var(--join-fluid-width));
  color: rgb(255 255 255 / 86%);
  font-size: calc(14 / var(--design-width) * var(--join-fluid-width));
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.join-filter__checkbox {
  position: relative;
  width: calc(16 / var(--design-width) * var(--join-fluid-width));
  height: calc(16 / var(--design-width) * var(--join-fluid-width));
  margin: 0;
  background: #050607;
  border: 1px solid rgb(183 197 214 / 72%);
  border-radius: calc(3 / var(--design-width) * var(--join-fluid-width));
  appearance: none;
}

.join-filter__checkbox:checked {
  background: #19a9ff;
  border-color: #19a9ff;
}

.join-filter__checkbox:checked::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(7 / var(--design-width) * var(--join-fluid-width));
  height: calc(4 / var(--design-width) * var(--join-fluid-width));
  border-bottom: calc(2 / var(--design-width) * var(--join-fluid-width)) solid #ffffff;
  border-left: calc(2 / var(--design-width) * var(--join-fluid-width)) solid #ffffff;
  content: "";
  transform: translate(-50%, -58%) rotate(-45deg);
}

.join-filter__contact {
  margin-top: calc(42 / var(--design-width) * var(--join-fluid-width));
  padding-top: calc(22 / var(--design-width) * var(--join-fluid-width));
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.join-filter__contact-text,
.join-filter__contact-note {
  margin: 0;
  color: rgb(255 255 255 / 62%);
  font-size: calc(13 / var(--design-width) * var(--join-fluid-width));
  font-weight: 400;
  line-height: 1.65;
}

.join-filter__contact-mail {
  display: inline-flex;
  margin-top: calc(6 / var(--design-width) * var(--join-fluid-width));
  color: var(--color-primary);
  font-size: calc(14 / var(--design-width) * var(--join-fluid-width));
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.join-filter__contact-note {
  margin-top: calc(10 / var(--design-width) * var(--join-fluid-width));
  color: rgb(255 255 255 / 76%);
}

.join-filter__contact-mail:hover,
.join-filter__contact-mail:focus-visible {
  color: #72c0ff;
}

.join-filter__contact-mail:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.join-jobs {
  padding-top: calc(39 / var(--design-width) * var(--join-fluid-width));
  padding-right: calc(150 / var(--design-width) * var(--join-fluid-width));
  padding-bottom: calc(76 / var(--design-width) * var(--join-fluid-width));
  padding-left: calc(40 / var(--design-width) * var(--join-fluid-width));
  border-left: 1px solid rgb(255 255 255 / 10%);
}

.join-jobs__title {
  margin: 0;
  color: #ffffff;
  font-size: calc(30 / var(--design-width) * var(--join-fluid-width));
  font-weight: 500;
  line-height: 1.25;
}

.join-jobs__result {
  min-height: calc(20 / var(--design-width) * var(--join-fluid-width));
  margin: calc(12 / var(--design-width) * var(--join-fluid-width)) 0 0;
  color: rgb(255 255 255 / 54%);
  font-size: calc(14 / var(--design-width) * var(--join-fluid-width));
  font-weight: 400;
  line-height: 1.45;
}

.join-job {
  position: relative;
  max-width: calc(790 / var(--design-width) * var(--join-fluid-width));
  padding-left: calc(20 / var(--design-width) * var(--join-fluid-width));
  margin-top: calc(48 / var(--design-width) * var(--join-fluid-width));
  cursor: pointer;
  transition:
    transform 0.24s ease,
    opacity 0.24s ease;
}

.join-job::before {
  position: absolute;
  top: calc(2 / var(--design-width) * var(--join-fluid-width));
  bottom: 0;
  left: 0;
  width: calc(2 / var(--design-width) * var(--join-fluid-width));
  background: var(--color-primary);
  border-radius: 999px;
  opacity: 0;
  content: "";
  transform: scaleY(0.2);
  transform-origin: top;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

.join-job__title {
  margin: 0;
  color: #ffffff;
  font-size: calc(22 / var(--design-width) * var(--join-fluid-width));
  font-weight: 700;
  line-height: 1.2;
  transition: color 0.24s ease;
}

.join-job__meta {
  margin: calc(18 / var(--design-width) * var(--join-fluid-width)) 0 0;
  color: rgb(255 255 255 / 92%);
  font-size: calc(17 / var(--design-width) * var(--join-fluid-width));
  font-weight: 400;
  line-height: 1.2;
  transition: color 0.24s ease;
}

.join-job__description {
  margin: calc(16 / var(--design-width) * var(--join-fluid-width)) 0 0;
  color: rgb(255 255 255 / 54%);
  font-size: calc(14 / var(--design-width) * var(--join-fluid-width));
  font-weight: 400;
  line-height: 1.55;
  transition: color 0.24s ease;
}

.join-job__section {
  margin-top: calc(18 / var(--design-width) * var(--join-fluid-width));
}

.join-job__section-title {
  margin: 0;
  color: rgb(255 255 255 / 88%);
  font-size: calc(15 / var(--design-width) * var(--join-fluid-width));
  font-weight: 600;
  line-height: 1.45;
  transition: color 0.24s ease;
}

.join-job__list {
  padding: 0 0 0 calc(20 / var(--design-width) * var(--join-fluid-width));
  margin: calc(8 / var(--design-width) * var(--join-fluid-width)) 0 0;
  color: rgb(255 255 255 / 54%);
  font-size: calc(14 / var(--design-width) * var(--join-fluid-width));
  font-weight: 400;
  line-height: 1.55;
  list-style: decimal;
  transition: color 0.24s ease;
}

.join-job__list li::marker {
  color: currentColor;
}

.join-job__list li + li {
  margin-top: calc(5 / var(--design-width) * var(--join-fluid-width));
}

.join-job:hover {
  transform: translateX(calc(8 / var(--design-width) * var(--join-fluid-width)));
}

.join-job:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.join-job:hover .join-job__title,
.join-job:hover .join-job__section-title {
  color: var(--color-primary);
}

.join-job:hover .join-job__meta {
  color: rgb(255 255 255 / 100%);
}

.join-job:hover .join-job__description,
.join-job:hover .join-job__list {
  color: rgb(255 255 255 / 68%);
}

.join-jobs__empty {
  margin: calc(48 / var(--design-width) * var(--join-fluid-width)) 0 0;
  color: rgb(255 255 255 / 54%);
  font-size: calc(16 / var(--design-width) * var(--join-fluid-width));
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 1199px) {
  .join-search {
    top: 68%;
    width: min(90%, 520px);
    height: 52px;
    padding: 3px;
    border-radius: 28px;
  }

  .join-search__input {
    padding-inline: 18px;
    font-size: 15px;
  }

  .join-search__button {
    width: 46px;
    height: 46px;
  }

  .join-search__icon {
    width: 25px;
    height: 25px;
  }

  .join-careers {
    display: block;
    min-height: auto;
    margin-top: -32px;
    border-radius: 36px 36px 0 0;
  }

  .join-filter {
    padding: 36px 24px 24px;
  }

  .join-filter__top {
    height: auto;
  }

  .join-filter__title,
  .join-filter__option {
    font-size: 14px;
  }

  .join-filter__clear,
  .join-filter__group-title {
    font-size: 13px;
  }

  .join-filter__group {
    margin-top: 28px;
  }

  .join-filter__option {
    gap: 10px;
    margin-bottom: 18px;
  }

  .join-filter__checkbox {
    width: 16px;
    height: 16px;
    border-radius: 3px;
  }

  .join-filter__checkbox:checked::after {
    width: 7px;
    height: 4px;
    border-bottom-width: 2px;
    border-left-width: 2px;
  }

  .join-filter__contact {
    margin-top: 34px;
    padding-top: 20px;
  }

  .join-filter__contact-text,
  .join-filter__contact-note {
    font-size: 13px;
  }

  .join-filter__contact-mail {
    margin-top: 6px;
    font-size: 14px;
  }

  .join-filter__contact-note {
    margin-top: 8px;
  }

  .join-jobs {
    padding: 32px 24px 56px;
    border-left: 0;
  }

  .join-jobs__title {
    font-size: 26px;
  }

  .join-jobs__result {
    min-height: 20px;
    margin-top: 10px;
    font-size: 14px;
  }

  .join-job {
    max-width: none;
    padding-left: 0;
    margin-top: 36px;
  }

  .join-job__title {
    font-size: 21px;
  }

  .join-job__meta {
    margin-top: 14px;
    font-size: 16px;
  }

  .join-job__description {
    margin-top: 14px;
    font-size: 14px;
  }

  .join-job__section {
    margin-top: 16px;
  }

  .join-job__section-title {
    font-size: 15px;
  }

  .join-job__list {
    padding-left: 20px;
    margin-top: 8px;
    font-size: 14px;
  }

  .join-job__list li + li {
    margin-top: 6px;
  }

  .join-jobs__empty {
    margin-top: 32px;
    font-size: 14px;
  }
}