.demo-video { margin: 2rem 0 2.6rem; }
.demo-video video { display: block; width: 100%; height: auto; border: 1px solid #d7d6d1; border-radius: 6px; background: #17191b; }
.demo-video figcaption, .pipeline figcaption { margin-top: .7rem; color: #616660; font: .85rem/1.5 system-ui, sans-serif; }
.pipeline { margin: 2rem 0 2.6rem; padding: clamp(1rem, 3vw, 1.7rem); border: 1px solid #dcded8; border-radius: 8px; background: #f4f5f1; font-family: system-ui, sans-serif; }
.pipeline-source, .pipeline-node { padding: 1rem 1.2rem; border: 1px solid #ccd3c9; border-radius: 5px; background: #fff; text-align: center; }
.pipeline-source, .pipeline-wide { max-width: 33rem; margin-inline: auto; }
.pipeline-step, .pipeline-node strong, .pipeline-source strong, .pipeline-node small, .pipeline-source small { display: block; }
.pipeline-step { margin-bottom: .3rem; color: #486d62; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pipeline-node strong, .pipeline-source strong { color: #222a26; font-size: .95rem; line-height: 1.3; }
.pipeline-node small, .pipeline-source small { margin-top: .25rem; color: #67716b; font-size: .75rem; line-height: 1.4; }
.pipeline-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.pipeline-fork, .pipeline-arrow { padding: .6rem 0; color: #61796d; font-size: .72rem; font-weight: 600; text-align: center; }
.pipeline-final { border-color: #a8c5b5; background: #fafffb; }
.pipeline figcaption { margin-top: 1rem; text-align: center; }
@media (max-width: 540px) { .pipeline-branches { gap: .45rem; } .pipeline-node, .pipeline-source { padding: .75rem .45rem; } .pipeline-node strong, .pipeline-source strong { font-size: .82rem; } .pipeline-node small, .pipeline-source small { font-size: .68rem; } }