/* "Run the sample" automation simulations (business automation pages only). */
.ark-demo { border: 1px solid var(--rule-dark); background: var(--navy-2); color: var(--ivory); padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.ark-demo__head { display: grid; gap: .75rem; }
.ark-demo__label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0; }
.ark-demo__trigger { margin: 0; color: var(--ivory-soft); max-width: var(--measure); }
.ark-demo__trigger strong { color: var(--ivory); }
.ark-demo__run { display: none; justify-self: start; font: 600 .95rem var(--f-body); padding: .8rem 1.4rem; border: 1px solid var(--gold); background: var(--gold); color: var(--navy); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.ark-demo__run:hover, .ark-demo__run:focus-visible { background: transparent; color: var(--gold); }
.ark-demo__run:disabled { opacity: .6; cursor: progress; }
.ark-demo.is-ready .ark-demo__run { display: inline-block; }
.ark-demo__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: demo; }
.ark-demo__steps > li { counter-increment: demo; position: relative; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 1rem; row-gap: .2rem; padding: .9rem 0; border-top: 1px solid var(--rule-dark); }
.ark-demo__steps > li::before { content: counter(demo); grid-row: span 3; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--rule-dark); display: grid; place-items: center; font: .8rem var(--f-mono); color: var(--ivory-soft); transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.ark-demo__tool { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.ark-demo__what { font-weight: 600; }
.ark-demo__log { font-family: var(--f-mono); font-size: .8rem; color: var(--ivory-soft); min-height: 0; }
.ark-demo.is-ready .ark-demo__steps > li { opacity: .45; transition: opacity .3s var(--ease); }
.ark-demo.is-ready .ark-demo__steps > li.is-done { opacity: 1; }
.ark-demo__steps > li.is-done::before { content: "✓"; background: var(--gold); border-color: var(--gold); color: var(--navy); }
.ark-demo__steps > li.is-active::before { box-shadow: 0 0 0 6px rgba(200, 167, 121, .2); }
.ark-demo__done { margin: 0; padding: 1rem 1.25rem; border-left: 3px solid var(--gold); background: rgba(200, 167, 121, .08); }
.ark-demo__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ark-sample-note { font-size: .9rem; color: var(--ink-soft); border-left: 3px solid var(--gold); padding-left: 1rem; max-width: var(--measure); }
.is-dark .ark-sample-note { color: var(--ivory-soft); }
@media (prefers-reduced-motion: reduce) { .ark-demo * { transition: none !important; } }