.workflow-demo { box-sizing: border-box; width: min(100%, 1200px); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2rem); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 2rem; color: #172b4d; background: #f5f6f3; border-radius: 12px; scroll-margin-top: 5rem; }
.workflow-demo__eyebrow { color: #284ed1; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.workflow-demo h2 { margin: .8rem 0 1rem; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.18; letter-spacing: -.025em; }
.workflow-demo p { color: #526477; line-height: 1.7; }
.workflow-demo .workflow-demo__note { font-size: .85rem; }
.workflow-demo a { color: #284ed1; text-underline-offset: 4px; }
.workflow-demo a:focus-visible { outline: 3px solid #284ed1; outline-offset: 4px; }
.workflow-demo__player { width: 100%; aspect-ratio: 16 / 9; background: #172b4d; border-radius: 8px; overflow: hidden; }
.workflow-demo .workflow-demo__pending { display: grid; place-items: center; height: 100%; margin: 0; padding: 1rem; box-sizing: border-box; color: #fff; text-align: center; }
.workflow-demo iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 760px) { .workflow-demo { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } }