.journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 14px 0 0;
}

.journey-step {
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #ffffff02;
}

.journey-step i {
  display: block;
  width: 7px;
  height: 7px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #41495c;
}

.journey-step b,
.journey-step small {
  display: block;
}

.journey-step b {
  color: #788196;
  font-size: 11px;
  font-weight: 600;
}

.journey-step small {
  margin-top: 4px;
  color: #596174;
  font-size: 10px;
}

.journey-step.done {
  border-color: #51e0aa35;
  background: #51e0aa07;
}

.journey-step.done i { background: #51e0aa; }
.journey-step.done b { color: #a7d9c5; }

.journey-step.active {
  border-color: #e7bb6e55;
  background: #e7bb6e09;
}

.journey-step.active i {
  background: var(--gold);
  box-shadow: 0 0 12px #e7bb6e;
}

.journey-step.active b { color: #efd498; }
.journey-step.active small { color: #aeb5c3; }

.stage-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.button.small {
  padding: 7px 11px;
  font-size: 11px;
}

@media (max-width: 650px) {
  .journey { grid-template-columns: 1fr 1fr; }
}