.workflow-rail {
  position: sticky;
  z-index: 68;
  top: 0;
  width: 100%;
  min-height: var(--workflow-height);
  padding: 0 18px;
  border-bottom: 1px solid rgba(67, 59, 45, 0.135);
  background: linear-gradient(180deg, rgba(244, 242, 234, 0.996), rgba(244, 242, 234, 0.972));
  box-shadow: 0 3px 11px rgba(20, 18, 13, 0.012);
  backdrop-filter: blur(9px) saturate(1.1);
  isolation: isolate;
}

.workflow-rail::after {
  position: absolute;
  right: auto;
  bottom: 0;
  left: 50%;
  width: var(--workflow-track-width);
  max-width: calc(100vw - 44px);
  height: 1px;
  background: linear-gradient(90deg, rgba(67, 59, 45, 0), rgba(67, 59, 45, 0.135) 13%, rgba(67, 59, 45, 0.135) 87%, rgba(67, 59, 45, 0));
  content: '';
  transform: translateX(-50%);
  pointer-events: none;
}

.workflow-product-wordmark,
.workflow-account {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}

.workflow-product-wordmark {
  left: clamp(28px, 3.35vw, 58px);
  color: rgba(26, 24, 20, 0.91);
  font-size: 0.86rem;
  font-weight: 350;
  letter-spacing: -0.021em;
  line-height: 1;
  white-space: nowrap;
}

.workflow-account {
  right: clamp(24px, 3.2vw, 54px);
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(26, 24, 20, 0.78);
}

.workflow-account-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(99, 88, 70, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 500;
}

.workflow-account-copy {
  display: grid;
  gap: 1px;
}

.workflow-account-copy strong {
  max-width: 150px;
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 450;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-account-copy small {
  color: rgba(85, 81, 73, 0.62);
  font-size: 0.62rem;
  line-height: 1;
}

.workflow-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  width: var(--workflow-track-width);
  max-width: calc(100vw - 28px);
  min-height: var(--workflow-height);
  margin: 0 auto;
  padding: 5px 0 12px;
  isolation: isolate;
}

.workflow-spine {
  position: absolute;
  z-index: 0;
  top: var(--workflow-spine-y);
  right: calc(100% / 6);
  left: calc(100% / 6);
  height: 1.62px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(49, 44, 35, 0.16), rgba(49, 44, 35, 0.52) 6.5%, rgba(49, 44, 35, 0.52) 93.5%, rgba(49, 44, 35, 0.16));
  box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.62);
  pointer-events: none;
}

.workflow-progress {
  position: absolute;
  top: -0.24px;
  left: 0;
  width: var(--workflow-progress, 0%);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(145, 101, 30, 0.34), rgba(145, 101, 30, 0.82) 42%, rgba(119, 81, 22, 0.9));
  transition: width var(--motion-standard) ease;
}

.workflow-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 9px 16px;
  align-content: start;
  justify-items: center;
  width: 100%;
  min-height: 48px;
  gap: 2px;
  padding: 0 5px 15px;
  color: rgba(45, 40, 31, 0.76);
  text-align: center;
}

.workflow-step-number {
  display: block;
  font-size: 0.555rem;
  font-weight: 505;
  letter-spacing: 0.052em;
  line-height: 1;
}

.workflow-step-label {
  display: block;
  max-width: 15ch;
  overflow: hidden;
  color: inherit;
  font-size: clamp(0.93rem, 0.78vw, 1.035rem);
  font-weight: 360;
  letter-spacing: -0.034em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-1px);
}

.workflow-station {
  position: absolute;
  top: var(--workflow-spine-y);
  left: 50%;
  width: 6.65px;
  height: 6.65px;
  border: 1px solid rgba(49, 44, 35, 0.68);
  border-radius: 999px;
  background: rgba(244, 242, 234, 0.992);
  box-shadow: 0 0 0 3.18px rgba(244, 242, 234, 0.992), 0 0 0 3.58px rgba(255, 255, 255, 0.28);
  transform: translate(-50%, -50%);
  transition:
    width 180ms ease,
    height 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.workflow-step.is-current {
  color: rgba(7, 7, 6, 0.995);
}

.workflow-step.is-current .workflow-station {
  width: 12.05px;
  height: 12.05px;
  border-color: rgba(119, 81, 22, 0.9);
  background: rgba(244, 242, 234, 0.992);
  box-shadow: 0 0 0 3.18px rgba(244, 242, 234, 0.992), 0 0 0 4.1px rgba(141, 98, 30, 0.18), 0 2px 7px rgba(84, 58, 19, 0.06);
}

.workflow-step.is-complete {
  color: rgba(119, 81, 22, 0.9);
}

.workflow-step.is-complete .workflow-station {
  width: 8.95px;
  height: 8.95px;
  border-color: rgba(145, 101, 30, 0.82);
  background: rgba(119, 81, 22, 0.9);
  box-shadow: 0 0 0 3.18px rgba(244, 242, 234, 0.992), 0 0 0 3.92px rgba(141, 98, 30, 0.105);
}

.workflow-step.is-locked {
  color: rgba(45, 40, 31, 0.49);
  cursor: default;
}

.workflow-step:focus-visible {
  outline: none;
}

.workflow-step:focus-visible .workflow-station {
  box-shadow: 0 0 0 3.18px rgba(244, 242, 234, 0.992), 0 0 0 5px rgba(139, 108, 50, 0.22);
}