.workflow-demo {
  margin: 30px 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 30px #173f3d12;
}

.workflow-demo video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 950;
  background: #172326;
  object-fit: contain;
}

.workflow-demo figcaption {
  display: grid;
  grid-template-columns: minmax(150px, .35fr) 1fr;
  gap: 18px;
  padding: 15px 18px;
  border-top: 1px solid var(--line);
}

.workflow-demo figcaption span { color: var(--muted); }
.workflow-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0; }
.workflow-pair .workflow-demo { margin: 0; }
.workflow-demo.compact figcaption { display: block; }
.workflow-demo.compact figcaption b,
.workflow-demo.compact figcaption span { display: block; }
.workflow-demo.compact figcaption span { margin-top: 4px; }

@media (max-width: 850px) {
  .workflow-pair { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .workflow-demo figcaption { grid-template-columns: 1fr; gap: 3px; }
}