/* Real local-app captures used inside provider workflow guides. This is a
   separate guide illustration class, outside the official UI registry. */
.guide-workflow-shot {
  display: block;
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  margin: 32px 0 40px 50%;
  transform: translateX(-50%);
}

.guide-workflow-shot--compact {
  width: min(900px, calc(100vw - 48px));
}

.guide-workflow-shot picture {
  display: block;
}

.guide-workflow-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  background: var(--bg2);
}

.guide-workflow-shot figcaption {
  margin-top: 12px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: var(--font-size-min);
  line-height: 1.6;
}