.sale-workflow-demo {
  margin: 48px 0;
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #f3f7fc;
  scroll-margin-top: 100px;
}
.sale-workflow-demo .workflow-eyebrow { color: var(--sea); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sale-workflow-demo h2 { max-width: 600px; font-size: clamp(26px, 4vw, 36px); line-height: 1.2; margin: 12px 0 18px; }
.sale-workflow-demo .workflow-controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0; }
.sale-workflow-demo button { background: white; border: 1px solid #a8b4c8; border-radius: 9px; padding: 10px 15px; font-weight: 600; cursor: pointer; }
.sale-workflow-demo button[aria-pressed="true"] { color: white; background: var(--ink); border-color: var(--ink); }
.sale-workflow-demo button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.sale-workflow-demo .workflow-result { display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; }
.sale-workflow-demo .workflow-order { padding: 28px; background: var(--ink); color: white; }
.sale-workflow-demo .workflow-order span { display: block; font-size: 13px; color: #c5d5ef; }
.sale-workflow-demo [data-workflow-stage] { display: block; margin: 18px 0 8px; font: 600 clamp(28px, 4vw, 38px) "Outfit", sans-serif; }
.sale-workflow-demo [data-workflow-record] { margin: 0; color: #dce7f7; font-size: 14px; }
.sale-workflow-demo .workflow-stock { display: grid; align-content: center; gap: 20px; margin: 0; padding: 28px; }
.sale-workflow-demo dt { color: var(--muted); font-size: 13px; }
.sale-workflow-demo dd { margin: 4px 0 0; color: var(--ink); font: 600 clamp(24px, 4vw, 30px) "Outfit", sans-serif; }
.sale-workflow-demo .workflow-notice { padding: 18px 0 0; margin: 0; color: var(--sea); font-weight: 600; }
.sale-workflow-demo[data-outcome="skip"] .workflow-notice { color: #8a360f; }
.sale-workflow-demo .workflow-note { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 18px 0 0; }
@media (max-width: 600px) {
  .sale-workflow-demo .workflow-result { grid-template-columns: 1fr; }
  .sale-workflow-demo .workflow-stock { grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px; }
  .sale-workflow-demo .workflow-order { padding: 24px; }
}