#lead-workflow {
  --workflow-wine: #772638;
  --workflow-wine-dark: #581a29;
  --workflow-paper: #1a090b;
  --workflow-surface: #290f13;
  --workflow-ink: #faf7f2;
  --workflow-muted: #c8bab4;
  --workflow-line: #583037;
  --workflow-accent: #eadbd5;
  position: relative;
  overflow: hidden;
  background: var(--workflow-paper);
  color: var(--workflow-ink);
  font-family: "Segoe UI", Arial, sans-serif;
}

#lead-workflow::before {
  content: "";
  position: absolute;
  width: 27rem;
  height: 27rem;
  top: -18rem;
  right: -8rem;
  border: 1px solid rgba(184, 81, 91, .14);
  border-radius: 50%;
  pointer-events: none;
}

#lead-workflow .lead-workflow__inner { position: relative; }

#lead-workflow .lead-workflow__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, .48fr);
  gap: 4rem;
  align-items: end;
  margin-bottom: 3.25rem;
}

#lead-workflow h2 {
  max-width: 19ch;
  margin-top: 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 3.4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.045em;
}

#lead-workflow .lead-workflow__intro > p:first-child {
  color: var(--workflow-muted);
  font-size: .96rem;
  line-height: 1.8;
}

#lead-workflow .lead-workflow__demo-note {
  display: flex;
  gap: .55rem;
  align-items: baseline;
  margin-top: 1rem;
  color: var(--workflow-accent);
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.55;
  letter-spacing: .045em;
}

#lead-workflow .lead-workflow__demo-note::before { content: "✳"; }

#lead-workflow .lead-workflow__track {
  --workflow-gap: 1.15rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--workflow-gap);
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: workflow;
}

#lead-workflow .workflow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2.375rem;
  left: 50%;
  width: calc(100% + var(--workflow-gap));
  height: 1px;
  background-color: var(--workflow-line);
  background-image: linear-gradient(var(--workflow-wine), var(--workflow-wine));
  background-repeat: no-repeat;
  background-size: var(--segment-progress, 100%) 100%;
}

#lead-workflow .workflow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
  min-width: 0;
  counter-increment: workflow;
}

#lead-workflow .workflow-step::before {
  content: "";
  display: block;
  flex: none;
  width: .65rem;
  height: .65rem;
  margin: 1.7rem auto 1.15rem;
  border: .35rem solid var(--workflow-paper);
  border-radius: 50%;
  background: var(--workflow-wine);
  box-sizing: content-box;
}

#lead-workflow .workflow-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 23rem;
  padding: 1.45rem 1.35rem 1.3rem;
  border: 1px solid var(--workflow-line);
  border-radius: 5px;
  background: var(--workflow-surface);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
}

#lead-workflow .workflow-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.8rem;
}

#lead-workflow .workflow-card__number {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--workflow-accent);
  font-size: 1.65rem;
}

#lead-workflow .workflow-card__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #361114;
  color: var(--workflow-accent);
}

#lead-workflow .workflow-card__icon svg {
  width: 1.25rem;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#lead-workflow .workflow-card__label {
  margin: 0 0 .65rem;
  color: var(--workflow-accent);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
}

#lead-workflow .workflow-card h3 {
  min-height: 3.4em;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.02em;
}

#lead-workflow .workflow-card__copy {
  margin: .85rem 0 1.35rem;
  color: var(--workflow-muted);
  font-size: .875rem;
  line-height: 1.72;
}

#lead-workflow .workflow-card__ui {
  position: relative;
  min-height: 4.6rem;
  margin-top: auto;
  padding: .9rem;
  border: 1px solid #583037;
  border-radius: 4px;
  background: #300f12;
}

#lead-workflow .workflow-card__ui-line {
  display: block;
  width: 58%;
  height: .32rem;
  margin-bottom: .55rem;
  border-radius: 1rem;
  background: #923039;
}

#lead-workflow .workflow-card__ui-line--strong { width: 78%; background: #bb3e4a; }

#lead-workflow .workflow-card__tag {
  position: absolute;
  right: .7rem;
  bottom: .65rem;
  padding: .22rem .45rem;
  border: 1px solid #812931;
  border-radius: 2px;
  color: var(--workflow-accent);
  font-size: .62rem;
}

#lead-workflow .workflow-card__ui--message { display: grid; gap: .42rem; align-content: center; }
#lead-workflow .workflow-card__ui--message span { height: .34rem; border-radius: 1rem; background: #923039; }
#lead-workflow .workflow-card__ui--message span:nth-child(2) { width: 78%; }
#lead-workflow .workflow-card__ui--message span:nth-child(3) { width: 48%; background: #bb3e4a; }

#lead-workflow .workflow-card__ui--check { display: flex; align-items: center; gap: .65rem; }
#lead-workflow .workflow-card__ui--check span { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--workflow-wine); color: white; font-size: .72rem; }
#lead-workflow .workflow-card__ui--check i { display: block; width: 27%; height: .35rem; border-radius: 1rem; background: #923039; }
#lead-workflow .workflow-card__ui--check i:last-child { width: 17%; }

#lead-workflow .workflow-card__ui--calendar { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; }
#lead-workflow .workflow-card__ui--calendar span { border: 1px solid #583037; border-radius: 2px; background: #381215; }
#lead-workflow .workflow-card__ui--calendar span:last-child { border-color: var(--workflow-wine); background: #44161a; }

@media (max-width: 1050px) {
  #lead-workflow .lead-workflow__header { grid-template-columns: 1fr .55fr; gap: 2rem; }
  #lead-workflow .lead-workflow__track { --workflow-gap: .8rem; }
  #lead-workflow .workflow-card { padding-inline: 1rem; }
}

@media (max-width: 800px) {
  #lead-workflow .lead-workflow__header { grid-template-columns: 1fr; gap: 1.35rem; margin-bottom: 2.2rem; }
  #lead-workflow h2 { max-width: 14ch; }
  #lead-workflow .lead-workflow__intro { max-width: 36rem; }
  #lead-workflow .lead-workflow__track { grid-template-columns: 1fr; gap: 0; padding-left: 2.25rem; }
  #lead-workflow .workflow-step:not(:last-child)::after { top: 2.075rem; left: -1.575rem; width: 1px; height: 100%; background-size: 100% var(--segment-progress, 100%); }
  #lead-workflow .workflow-step { padding-bottom: 1rem; }
  #lead-workflow .workflow-step:last-child { padding-bottom: 0; }
  #lead-workflow .workflow-step::before { position: absolute; top: 1.4rem; left: -2.25rem; margin: 0; }
  #lead-workflow .workflow-card { min-height: 0; }
  #lead-workflow .workflow-card h3 { min-height: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  #lead-workflow.motion-ready .workflow-step {
    --segment-progress: 0%;
  }
  #lead-workflow.motion-ready .workflow-card {
    transform: translateY(.5rem);
    transition: transform .38s ease, border-color .38s ease;
  }
  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card {
    transform: translateY(0);
    border-color: rgba(184, 81, 91, .58);
    box-shadow: 0 0 0 1px rgba(119, 38, 56, .2), 0 18px 42px rgba(119, 38, 56, .22);
  }

  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__number { color: var(--workflow-ink); background: var(--workflow-wine); border-radius: 3px; padding-inline: .25rem; }
  #lead-workflow.motion-ready .workflow-step.is-connected { --segment-progress: 100%; }
  #lead-workflow.motion-ready .workflow-step::after { transition: background-size .55s ease; }

  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__icon,
  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__ui-line,
  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__ui--message span,
  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__ui--check i,
  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__ui--calendar span {
    animation: workflow-ui-rise .42s ease both;
  }
  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__ui-line:nth-child(2),
  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__ui--message span:nth-child(2),
  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__ui--check i:nth-child(2),
  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__ui--calendar span:nth-child(2) { animation-delay: .06s; }
  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__ui-line:nth-child(3),
  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__ui--message span:nth-child(3),
  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__ui--check i:nth-child(3),
  #lead-workflow.motion-ready .workflow-step.is-active .workflow-card__ui--calendar span:nth-child(3) { animation-delay: .12s; }
  @keyframes workflow-ui-rise {
    from { transform: translateY(.22rem) scale(.98); }
    to { transform: translateY(0) scale(1); }
  }
}