.workflow-visual {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 18px;
  padding: 28px;
  border-radius: 16px;
  background: linear-gradient(145deg, #14213d, #253a6c);
  box-shadow: 0 16px 38px rgba(20, 33, 61, .14);
}

.workflow-stage {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.workflow-stage h3 { margin: 10px 0 14px; font-size: 20px; }
.workflow-stage p { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.workflow-number { color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.workflow-arrow { align-self: center; color: #fff; font-size: 34px; font-weight: 900; }
.workflow-outputs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.workflow-outputs span { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: 12px; }
.paper-stack { display: grid; gap: 8px; }
.paper-stack span { display: block; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(90deg, #eaf8f3 0 14%, #f7f8fb 14%); }
.paper-stack span:nth-child(2) { background: linear-gradient(90deg, #fff0f3 0 14%, #f7f8fb 14%); }
.paper-stack span:nth-child(3) { background: linear-gradient(90deg, #eef1f6 0 14%, #f7f8fb 14%); }
.result-check { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #eaf8f3; color: var(--green); font-size: 34px; font-weight: 900; }

@media (max-width: 760px) {
  .workflow-visual { grid-template-columns: 1fr; padding: 16px; }
  .workflow-stage { min-height: auto; }
  .workflow-arrow { transform: rotate(90deg); }
}