/* Landing workflow readability and interaction refinement. */
.landing-workflow-list {
  gap: 22px;
}

.landing-workflow-list li,
.landing-workflow-list li:nth-child(2),
.landing-workflow-list li:nth-child(3) {
  position: relative;
  min-height: 396px;
  padding: 32px 32px 30px;
  overflow: hidden;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.landing-workflow-list li::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--landing-violet);
  transform-origin: left center;
  transition: height 180ms ease, filter 180ms ease;
}

.landing-workflow-list li:nth-child(2)::after {
  background: #11836d;
}

.landing-workflow-list li:nth-child(3)::after {
  background: #b56c0c;
}

.landing-workflow-card-head {
  min-height: 68px;
  margin-bottom: 22px;
}

.landing-workflow-card-head .landing-step-number {
  font-size: 17px;
  line-height: 1;
  font-weight: 850;
}

.landing-workflow-icon {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.landing-workflow-icon .landing-icon {
  width: 35px;
  height: 35px;
  stroke-width: 2.15;
}

.landing-workflow-list li > strong {
  display: block;
  min-height: 64px;
  font-size: 25px;
  line-height: 1.28;
  font-weight: 820;
}

.landing-workflow-list li > p {
  min-height: 112px;
  margin-top: 13px;
  font-size: 18px;
  line-height: 1.58;
}

.landing-workflow-tags {
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}

.landing-workflow-tags span {
  min-height: 52px;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 780;
  line-height: 1.3;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.landing-workflow-tags .landing-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  stroke-width: 2.15;
}

.landing-workflow-list li:nth-child(2) .landing-workflow-tags .landing-icon {
  color: #0e8a72;
}

.landing-workflow-list li:nth-child(3) .landing-workflow-tags .landing-icon {
  color: #a96409;
}

@media (hover: hover) and (pointer: fine) {
  .landing-shell .landing-workflow-list li:hover {
    transform: translateY(-6px);
    border-color: #cdd4e1;
    box-shadow: 0 22px 44px rgba(38, 48, 68, 0.14);
  }

  .landing-workflow-list li:hover::after {
    height: 8px;
    filter: saturate(1.16);
  }

  .landing-workflow-list li:hover .landing-workflow-icon {
    transform: translateY(-2px) scale(1.07);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.78),
      0 10px 22px rgba(44, 53, 78, 0.13);
  }

  .landing-workflow-tags span:hover {
    transform: translateY(-2px);
    border-color: #c8c2ff;
    background: #fff;
    box-shadow: 0 8px 18px rgba(49, 57, 80, 0.09);
  }

  .landing-workflow-list li:nth-child(2) .landing-workflow-tags span:hover {
    border-color: #9edbcc;
  }

  .landing-workflow-list li:nth-child(3) .landing-workflow-tags span:hover {
    border-color: #edca8e;
  }
}

@media (max-width: 1180px) {
  .landing-workflow-list li,
  .landing-workflow-list li:nth-child(2),
  .landing-workflow-list li:nth-child(3) {
    padding-inline: 26px;
  }

  .landing-workflow-list li > strong {
    font-size: 23px;
  }

  .landing-workflow-list li > p {
    font-size: 17px;
  }
}

@media (max-width: 980px) {
  .landing-workflow-list li,
  .landing-workflow-list li:nth-child(2),
  .landing-workflow-list li:nth-child(3) {
    min-height: 440px;
  }

  .landing-workflow-list li > strong {
    min-height: 88px;
  }

  .landing-workflow-list li > p {
    min-height: 136px;
  }
}

@media (max-width: 720px) {
  .landing-workflow-list {
    gap: 16px;
  }

  .landing-workflow-list li,
  .landing-workflow-list li:nth-child(2),
  .landing-workflow-list li:nth-child(3) {
    min-height: 0;
    padding: 25px 24px 24px;
  }

  .landing-workflow-card-head {
    min-height: 58px;
    margin-bottom: 18px;
  }

  .landing-workflow-icon {
    width: 58px;
    height: 58px;
  }

  .landing-workflow-icon .landing-icon {
    width: 32px;
    height: 32px;
  }

  .landing-workflow-list li > strong {
    min-height: 0;
    font-size: 23px;
  }

  .landing-workflow-list li > p {
    min-height: 0;
    margin-top: 10px;
    font-size: 17px;
    line-height: 1.55;
  }

  .landing-workflow-tags {
    padding-top: 17px;
  }

  .landing-workflow-tags span {
    min-height: 50px;
    font-size: 15px;
  }

  .landing-workflow-tags .landing-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }
}