.metamarker {
  --button-margin-top: 3em;
  --button-margin-bottom: 5em;
  --button-max-width: 20em;
  --problems-direction: column;
  --problems-align: center;
  --problems-margin-horizontal: calc(-1 * var(--block-offset));
  --problems-padding-top: 3em;
  --problems-padding-bottom: 4em;
  --problems-padding-horizontal: var(--block-offset);
  --problems-image-scale: 0.9;
  --team-margin-bottom: 3.5em;
  --team-direction: column;
  --team-title-margin-horizontal: auto;
  --team-title-padding-horizontal: 0.4em;
  --team-description-align: center;
  --team-description-justify: center;
  --team-description-padding-horizontal: var(--team-title-padding-horizontal);
  --team-arrow-top: calc(100% + 7px);
  --team-arrow-left: calc(50% - 8px);
  --team-arrow-rotate: 0;
  --team-list-max-width: unset;
  --team-list-margin-horizontal: 0;
  --process-gap: 0.56em;
  --process-padding-right: 2.33em;
  --process-arrow-left: calc(100% + 20px);
  --process-list-columns: 1fr;
  --process-list-col-gap: 3.44em;
  --deeper-cell-min-height: 110px;
  --deeper-cell-arrow-size: 1.33em;
  --deeper-cell-padding-horizontal: 0.78em;
  --deeper-cell-padding-vertical: var(--deeper-cell-padding-horizontal);
  --deeper-pair-direction: column;
  --deeper-cell-hor-offset: -5px;
  --deeper-heading-display: none;
  --improve-offset-ratio: 0;
  --improve-list-max-width: unset;
  --intro-list-direction: column;
  --intro-list-font-size: 1.25em;
  --banner-padding-top: 2.8125em;
  --banner-padding-bottom: 3.375em;
  --banner-padding-horizontal: 1.25em;
  --banner-background-position-x: center;
  --banner-image-width: 447px;
  --banner-image-height: 178px;
  --banner-image-margin: 1.5em;
  --banner-image-url: url(./img/hero-image.webp);
  --banner-text-align: center;
}

.metamarker .metamarker__button {
  margin-top: var(--button-margin-top);
  margin-bottom: var(--button-margin-bottom);
}

.metamarker .metamarker__button button {
  display: block;
  max-width: var(--button-max-width);
  margin-right: auto;
  margin-left: auto;
}

.metamarker .metamarker__problems {
  display: flex;
  flex-direction: var(--problems-direction);
  align-items: center;
  margin-right: var(--problems-margin-horizontal);
  margin-left: var(--problems-margin-horizontal);
  padding: var(--problems-padding-top) var(--problems-padding-horizontal) var(--problems-padding-bottom);
  text-align: var(--problems-align);
  background-color: var(--color-white);
}

.metamarker .metamarker__problems-text {
  font-size: 1.125em;
}

.metamarker .metamarker__header {
  margin-top: 0;
  margin-bottom: 1.33em;
  font-size: 1.5em;
  font-weight: 700;
}

.metamarker .metamarker__problems-image {
  flex-shrink: 0;
  display: block;
  width: 270px;
  height: 195px;
  margin-top: 2em;
  margin-right: auto;
  margin-left: auto;
  background-image: url(img/no-problems.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  scale: var(--problems-image-scale);
}

.metamarker .metamarker__team {
  margin-bottom: var(--team-margin-bottom);
}

.metamarker .metamarker__team-list {
  max-width: var(--team-list-max-width);
  margin: 0 var(--team-list-margin-horizontal);
  padding-left: 0;
  font-size: 1.125em;
  list-style: none;
}

.metamarker .metamarker__team-step {
  display: flex;
  flex-direction: var(--team-direction);
  gap: 2.33em;
  color: #000000;
}

.metamarker .metamarker__team-step:not(:last-child) {
  margin-bottom: 1.33em;
}

.metamarker .metamarker__team-title {
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  min-height: 83px;
  margin: 0 var(--team-title-margin-horizontal);
  padding: 0.67em var(--team-title-padding-horizontal);
  font-size: 1em;
  font-weight: 400;
  text-align: center;
  background-color: var(--color-secondary);
  border-radius: 999px;
}

.metamarker .metamarker__team-title::after {
  position: absolute;
  top: var(--team-arrow-top);
  left: var(--team-arrow-left);
  content: '';
  display: block;
  width: 16px;
  height: 28px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 28'%3e%3cpath fill='currentColor' d='M6.657 27.44a1 1 0 0 0 1.414 0l6.364-6.364a1 1 0 1 0-1.414-1.414l-5.657 5.657-5.657-5.657a1 1 0 0 0-1.414 1.414l6.364 6.364ZM7.364 0h-1v26.733h2V0h-1Z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(var(--team-arrow-rotate));
}

.metamarker .metamarker__team-description {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: var(--team-description-justify);
  min-height: 80px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 1.3em var(--team-description-padding-horizontal);
  text-align: var(--team-description-align);
  background-color: #d9d9d9;
  border-radius: 999px;
}

.metamarker .metamarker__process {
  margin-bottom: 5em;
}

.metamarker .metamarker__process-list {
  display: grid;
  grid-template-columns: var(--process-list-columns);
  grid-row-gap: var(--process-gap);
  grid-column-gap: var(--process-list-col-gap);
  margin-top: 0;
  margin-bottom: 0;
  padding-right: var(--process-padding-right);
  padding-left: 0;
  font-size: 1.125em;
  list-style: none;
}

.metamarker .metamarker__process-item {
  position: relative;
  padding: 1.78em;
  text-align: center;
  background-color: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 4px 20px 0 rgba(60, 60, 60, 0.15);
}

.metamarker .metamarker__process-item:not(:last-child)::after {
  position: absolute;
  top: calc(50% - 13px);
  left: var(--process-arrow-left);
  content: '';
  display: block;
  width: 16px;
  height: 28px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 28'%3e%3cpath fill='currentColor' d='M6.657 27.44a1 1 0 0 0 1.414 0l6.364-6.364a1 1 0 1 0-1.414-1.414l-5.657 5.657-5.657-5.657a1 1 0 0 0-1.414 1.414l6.364 6.364ZM7.364 0h-1v26.733h2V0h-1Z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-90deg);
}

.metamarker .metamarker__process-icon {
  width: 82px;
  height: 81px;
  margin-right: auto;
  margin-bottom: 0.89em;
  margin-left: auto;
}

.metamarker .metamarker__process-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
  font-weight: 700;
}

.metamarker .metamarker__process-description {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
}

.metamarker .metamarker__deeper {
  margin-bottom: 5em;
}

.metamarker .metamarker__deeper-text {
  margin-top: 1.33em;
  margin-bottom: 1.78em;
  font-size: 1.125em;
}

.metamarker .metamarker__deeper-list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  font-size: 1.125em;
  list-style: none;
}

.metamarker .metamerker__deeper-item:not(:last-child) {
  margin-bottom: 0.67em;
}

.metamarker .metamerker__deeper-item:nth-child(2) {
  --deeper-cell-bg: #ffd200;
}

.metamarker .metamerker__deeper-item:nth-child(3) {
  --deeper-cell-bg: #ffeb8f;
}

.metamarker .metamerker__deeper-item:nth-child(4) {
  --deeper-cell-bg: #fff7d3;
}

.metamarker .metamarker__deeper-pair {
  display: flex;
  flex-direction: var(--deeper-pair-direction);
  row-gap: 4px;
}

.metamarker .metamarker__deeper-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: var(--deeper-cell-min-height);
  padding: var(--deeper-cell-padding-vertical) var(--deeper-cell-arrow-size) var(--deeper-cell-padding-vertical) calc(var(--deeper-cell-arrow-size) + var(--deeper-cell-padding-horizontal));
  background-color: var(--deeper-cell-bg);
  clip-path: polygon(0 0, calc(100% - var(--deeper-cell-arrow-size)) 0, 100% 50%, calc(100% - var(--deeper-cell-arrow-size)) 100%, 0 100%, var(--deeper-cell-arrow-size) 50%);
}

.metamarker .metamarker__deeper-cell dt {
  font-weight: 700;
}

.metamarker .metamarker__deeper-cell dd {
  margin-left: 0;
}

.metamarker .metamarker__deeper-heading {
  display: var(--deeper-heading-display);
  padding-bottom: 1.33em;
}

.metamarker .metamarker__deeper-heading div {
  flex: 1 0 0;
  font-weight: 700;
  text-transform: uppercase;
}

.metamarker .metamarker__improve-text {
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  font-size: 1.125em;
}

.metamarker .metamarker__improve-text.metamarker__improve-text_after {
  font-weight: 700;
  text-align: center;
}

.metamarker .metamarker__improve-list {
  max-width: var(--improve-list-max-width);
  margin: 0 auto;
  padding-left: 0;
  list-style: none;
}

.metamarker .metamarker__improve-item {
  display: flex;
  align-items: center;
  gap: 1.5em;
  min-height: 84px;
  padding: 0.625em 0.625em 0.625em 2em;
  background-color: var(--improve-item-bg, transparent);
  line-height: 1;
  border-top-right-radius: 42px;
  border-bottom-right-radius: 42px;
}

.metamarker .metamarker__improve-item:nth-child(1) {
  --improve-item-bg: #ffd200;
  margin-right: calc(4 * var(--improve-offset-ratio));
}

.metamarker .metamarker__improve-item:nth-child(2) {
  --improve-item-bg: #ffe56a;
  margin-right: calc(3 * var(--improve-offset-ratio));
  margin-left: var(--improve-offset-ratio);
}

.metamarker .metamarker__improve-item:nth-child(3) {
  --improve-item-bg: #dfdfdf;
  margin-right: calc(2 * var(--improve-offset-ratio));
  margin-left: calc(2 * var(--improve-offset-ratio));
}

.metamarker .metamarker__improve-item:nth-child(4) {
  --improve-item-bg: #d4d4d4;
  margin-right: var(--improve-offset-ratio);
  margin-left: calc(3 * var(--improve-offset-ratio));
}

.metamarker .metamarker__improve-item:nth-child(5) {
  --improve-item-bg: #c0c0c0;
  margin-left: calc(4 * var(--improve-offset-ratio));
}

.metamarker .metamarker__improve-item-icon {
  flex-shrink: 0;
  display: inline-block;
  margin-left: auto;
  font-size: 60px;
}

.metamarker .metamarker__improve-item-icon {
  width: 1em;
  height: 1em;
}

.metamarker .metamarker__intro-text {
  font-size: 1.125em;
}

.metamarker .metamarker__intro-list {
  display: flex;
  flex-direction: var(--intro-list-direction);
  row-gap: 0.5em;
  margin-top: 2.25em;
  margin-bottom: 2.25em;
  padding-left: 0;
  font-size: var(--intro-list-font-size);
  font-weight: 700;
  text-transform: uppercase;
  list-style: none;
}

.metamarker .metamarker__intro-item {
  flex: 1 0 0;
  filter: drop-shadow(0 4px 20px rgba(60, 60, 60, 0.15));
}

.metamarker .metamarker__intro-item-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.7em;
  background-color: var(--color-white);
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}

.metamarker .metamarker__intro-item-text::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  background-color: var(--color-secondary);
  clip-path: polygon(0 0, 8px 0, 100% 50%, 8px 100%, 0 100%, 12px 50%);
}

.metamarker .metamarker__intro-item:not(:last-child) .metamarker__intro-item-text::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 20px;
  background-color: var(--color-secondary);
  clip-path: polygon(0 0, 8px 0, 100% 50%, 8px 100%, 0 100%, 12px 50%);
}

.metamarker .metamarker__hero {
  position: relative;
  padding: var(--banner-padding-top) var(--banner-padding-horizontal) var(--banner-padding-bottom);
  text-align: var(--banner-text-align);
  background-image: url(./img/hero.webp);
  background-position: top var(--banner-background-position-x);
  background-repeat: no-repeat;
  background-size: cover;
}

.metamarker .metamarker__page-title {
  font-size: 1.5em;
  font-weight: 700;
}

.metamarker .metamarker__page-title span {
  color: var(--color-primary);
}

.metamarker .metamarker__hero-text {
  margin-top: 1em;
  font-size: 1.25em;
}

@media (min-width: 576px) {
  .metamarker {
    --problems-padding-bottom: 3em;
    --problems-margin-horizontal: 0;
    --problems-image-scale: 1;
    --team-margin-bottom: 5em;
    --process-gap: 1.33em;
    --process-padding-right: 3.06em;
    --process-arrow-left: calc(100% + 34px);
    --deeper-cell-min-height: unset;
    --deeper-cell-arrow-size: 1.11em;
    --improve-offset-ratio: 2em;
    --banner-padding-bottom: 2em;
    --banner-background-position: left;
  }

  .metamarker .metamarker__hero-image {
    width: var(--banner-image-width);
    height: var(--banner-image-height);
    margin-top: var(--banner-image-margin);
    margin-right: 0;
    margin-left: 0;
    background-image: var(--banner-image-url);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

@media (min-width: 768px) {
  .metamarker {
    --team-direction: row;
    --team-title-margin-horizontal: 0;
    --team-title-padding-horizontal: 1.8em;
    --team-description-align: left;
    --team-description-justify: flex-start;
    --team-arrow-top: calc(50% - 13px);
    --team-arrow-left: calc(100% + 13px);
    --team-arrow-rotate: -90deg;
    --process-padding-right: 3.44em;
    --process-arrow-left: calc(100% + 24px);
    --process-list-columns: repeat(2, 1fr);
    --deeper-pair-direction: row;
    --deeper-heading-display: flex;
    --intro-list-direction: row;
    --intro-list-font-size: 0.875em;
    --banner-background-position-x: calc(50% + 100px);
    --banner-padding-horizontal: 3.5em;
    --banner-padding-top: 7em;
    --banner-padding-bottom: var(--banner-padding-top);
    --banner-text-align: left;
    --banner-image-width: 416px;
    --banner-image-height: 185px;
    --banner-image-margin: 0;
    --banner-image-url: url(./img/hero-image-md.webp);
    --banner-image-top: calc(50% - calc(var(--banner-image-height) * 0.5));
    --banner-content-width: 40%;
  }

  .metamarker .metamarker__deeper-cell {
    flex: 1 0 0;
  }

  .metamarker .metamarker__deeper-cell:first-child {
    margin-right: var(--deeper-cell-hor-offset);
  }

  .metamarker .metamarker__deeper-cell:last-child {
    margin-left: var(--deeper-cell-hor-offset);
  }

  .metamarker .metamarker__deeper-cell dt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(100%);
    border: 0;
    white-space: nowrap;
  }

  .metamarker .metamarker__intro-item:not(:last-child) .metamarker__intro-item-text {
    margin-right: -10px;
  }

  .metamarker .metamarker__intro-item:not(:first-child) .metamarker__intro-item-text {
    margin-left: -10px;
  }

  .metamarker .metamarker__intro-item-text::after {
    display: none;
  }

  .metamarker .metamarker__page-title,
  .metamarker .metamarker__hero-text {
    width: var(--banner-content-width);
  }

  .metamarker .metamarker__hero-image {
    position: absolute;
    top: var(--banner-image-top);
    right: 0;
  }
}

@media (min-width: 992px) {
  .metamarker {
    --problems-direction: row;
    --problems-align: left;
    --problems-padding-horizontal: 2.5em;
    --team-list-max-width: 945px;
    --team-list-margin-horizontal: auto;
    --process-padding-right: 4.56em;
    --process-arrow-left: calc(100% + 36px);
    --process-list-col-gap: var(--process-padding-right);
    --improve-offset-ratio: 2.5em;
    --improve-list-max-width: 810px;
    --intro-list-font-size: 1.125em;
    --banner-image-width: 448px;
    --banner-image-height: 227px;
    --banner-image-url: url(./img/hero-image-lg.webp);
    --banner-content-width: 50%;
  }
}

@media (min-width: 1200px) {
  .metamarker {
    --process-padding-right: 0;
    --process-arrow-left: calc(100% + 16px);
    --process-list-columns: repeat(4, 1fr);
    --process-list-col-gap: 2.67em;
    --deeper-cell-min-height: 82px;
    --banner-background-position-x: center;
    --banner-image-width: 691px;
    --banner-image-height: 271px;
    --banner-image-url: url(./img/hero-image-xl.webp);
  }
}