/* FLOW hero: the original screen stays at the back; a second screen in front plays the prototype film */
.cs-hero figure.stack{position:relative;overflow:visible;min-height:0;align-self:center;aspect-ratio:1/.581;max-width:100%;border-radius:0}
.stack .back{position:absolute;right:0;bottom:0;width:73.5%;aspect-ratio:1600/1020;border-radius:10px;background:url(img/flow/app-taskbar.webp) center/100% 100% no-repeat;box-shadow:0 24px 50px -34px rgba(20,18,16,.5)}
.stack .front{position:absolute;left:0;top:0;width:73.5%;aspect-ratio:1600/1020;border-radius:12px;overflow:hidden;background:#1c1b19;padding:1.3%;box-sizing:border-box;cursor:zoom-in;
  box-shadow:0 34px 60px -26px rgba(20,18,16,.6),0 0 0 1px rgba(255,255,255,.08);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.stack.big .front{width:100%;cursor:zoom-out}
.cs-hero figure.stack .front video{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px}
.stack .fh-play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(20,18,16,.62);color:#F4EFE6;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px)}
.stack .fh-play svg{width:12px;height:12px;fill:currentColor}
.stack .fh-steps{position:absolute;left:0;right:0;bottom:-3%;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;transform:translateY(100%)}
.stack .fh-steps button{all:unset;box-sizing:border-box;display:grid;gap:5px;width:100%;padding:8px 2px;cursor:pointer;color:var(--hero-ink)}
.stack .fh-steps button:focus-visible{outline:2px solid var(--hero-accent);outline-offset:2px;border-radius:4px}
.stack .fh-steps .bar{height:2px;background:color-mix(in srgb,var(--hero-ink) 16%,transparent);overflow:hidden}
.stack .fh-steps .bar i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--hero-accent)}
.stack .fh-steps small{font:500 10px/1 var(--mono,"DM Mono",ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--hero-muted)}
.stack .fh-steps b{font-size:13px;font-weight:500;line-height:1.25;color:var(--hero-muted);transition:color .3s}
.stack .fh-steps li.on b,.stack .fh-steps button:hover b{color:var(--hero-ink)}
.stack .fh-steps li.on small{color:var(--hero-accent)}
.cs-hero.has-stack{padding-bottom:clamp(80px,8vw,110px)}
@media (max-width:860px){.cs-hero.has-stack{padding-bottom:110px}.stack .fh-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}}