/* client-site demos: real screenshot + a recreated next step */
.demo .dscreen{position:relative;container-type:inline-size;overflow:hidden;background:#111}
.demo .dscreen > img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.demo [data-t]{opacity:0;transform:translateY(1.4cqw);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.demo [data-t].go{opacity:1;transform:none}
.demo .dim{position:absolute;inset:0;background:rgba(8,10,18,.5);transform:none!important}
.demo .dpanel{position:absolute;right:4%;top:8%;width:40%;max-height:84%;border-radius:1.6cqw;padding:2.4cqw;display:grid;gap:1.3cqw;align-content:start;box-shadow:0 3cqw 7cqw -2cqw rgba(0,0,0,.55);font-family:var(--sans);transform:translateX(5cqw)}
.demo .dpanel.go{transform:none}
.demo .dpanel h5{margin:0;font-size:2.3cqw;line-height:1.15;letter-spacing:-.02em}
.demo .dpanel small{font:500 1.15cqw/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.demo .f{display:grid;gap:.6cqw;padding-bottom:1cqw;border-bottom:1px solid rgba(15,15,15,.1)}
.demo .dv{font-size:1.75cqw;min-height:2.2cqw;transform:none!important}
.demo .chips{display:flex;flex-wrap:wrap;gap:.8cqw}
.demo .chip{font-style:normal;font-size:1.45cqw;padding:.9cqw 1.3cqw;border-radius:99px;border:1px solid rgba(15,15,15,.15);transition:background .3s,color .3s,border-color .3s}
.demo .dbtn{justify-self:start;font-style:normal;font-weight:600;font-size:1.7cqw;padding:1.3cqw 2.2cqw;border-radius:99px;color:#fff;transition:transform .2s}
.demo .press{transform:scale(.95)}
.demo .dtoast{position:absolute;left:50%;bottom:5%;display:flex;align-items:center;gap:1.2cqw;padding:1.4cqw 2.2cqw;border-radius:99px;background:#0f0f0f;color:#fff;font:600 1.75cqw/1.2 var(--sans);white-space:nowrap;box-shadow:0 2cqw 5cqw -2cqw rgba(0,0,0,.6);transform:translate(-50%,2cqw)}
.demo .dtoast.go{transform:translate(-50%,0)}
.demo .dtoast i{font-style:normal;display:grid;place-items:center;width:2.6cqw;height:2.6cqw;border-radius:50%;background:#1f9d55;font-size:1.4cqw}
.demo .dcur{position:absolute;left:0;top:0;width:2.4cqw;height:2.4cqw;z-index:6;pointer-events:none;transform:translate(var(--cx,80cqw),var(--cy,40cqw));transition:transform .9s var(--ease-io)}
.demo .dcur::before{content:"";position:absolute;inset:0;background:#fff;clip-path:polygon(0 0,100% 62%,55% 62%,38% 100%);filter:drop-shadow(0 0 .25cqw rgba(0,0,0,.9))}
.demo .dcur::after{content:"";position:absolute;left:-1.6cqw;top:-1.6cqw;width:3.2cqw;height:3.2cqw;border-radius:50%;border:2px solid #fff;opacity:0}
.demo .dcur.click::after{animation:dclk .6s var(--ease)}
@keyframes dclk{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.9)}}
.demo .typing::after{content:"";display:inline-block;width:.1em;height:.9em;margin-left:.05em;background:currentColor;vertical-align:-.1em;animation:blink .8s steps(1) infinite}
.demo-cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px}
.demo-cap .replay{all:unset;cursor:pointer;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.demo-cap .replay:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.proof .demo-cap .lbl{color:var(--on-ink-3)}
/* Logistech: navy + orange */
.demo .dpanel.lt{background:#fff;color:#14213d}
.demo .dpanel.lt h5{color:#14213d}
.demo .dpanel.lt .tag{justify-self:start;font:600 1.15cqw/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#f26a1b;border:1px solid rgba(242,106,27,.45);padding:.7cqw 1.1cqw;border-radius:99px}
.demo .dpanel.lt .dbtn{background:#f26a1b}
/* GlowWithKayra: blush + gold */
.demo .dpanel.gk{background:#fffaf8;color:#3b2a2e}
.demo .dpanel.gk h5{font-family:var(--serif);font-weight:400;font-size:3cqw}
.demo .dpanel.gk h5 em{color:#c0577a}
.demo .dpanel.gk .chip.sel{background:#c0577a;border-color:#c0577a;color:#fff}
.demo .dpanel.gk .dbtn{background:linear-gradient(90deg,#c59a3e,#dcb766)}
/* Mr Paul: WhatsApp-style chat */
.demo .dpanel.mp{padding:0;overflow:hidden;background:#ece5dd;color:#111;gap:0;width:36%}
.demo .mp .wa-h{display:flex;align-items:center;gap:1.2cqw;padding:1.6cqw 2cqw;background:#1f7a5c;color:#fff}
.demo .mp .wa-h b{font-size:1.9cqw}
.demo .mp .wa-h div span{font-size:1.25cqw;opacity:.8;display:block}
.demo .mp .wa-av{width:3.6cqw;height:3.6cqw;border-radius:50%;background:#c9a45a;display:grid;place-items:center;font:700 1.5cqw/1 var(--sans);color:#14213d}
.demo .mp .wa-body{display:grid;gap:1.2cqw;padding:2.2cqw 2cqw;min-height:20cqw;align-content:end}
.demo .mp .bub{justify-self:end;max-width:82%;background:#d9fdd3;border-radius:1.4cqw 1.4cqw .3cqw 1.4cqw;padding:1.3cqw 1.6cqw;font-size:1.6cqw;line-height:1.35;box-shadow:0 .2cqw .4cqw rgba(0,0,0,.08)}
.demo .mp .bub .tk{display:block;text-align:right;font-size:1.1cqw;color:#5f8f9f;margin-top:.5cqw}
.demo .mp .wa-in{display:flex;align-items:center;gap:1cqw;padding:1.3cqw 1.6cqw;background:#f4f1ec}
.demo .mp .wa-in .dv{flex:1;background:#fff;border-radius:99px;padding:1cqw 1.6cqw;font-size:1.5cqw;min-height:1.6cqw}
.demo .mp .wa-send{width:3.6cqw;height:3.6cqw;border-radius:50%;background:#1f9d55;display:grid;place-items:center;color:#fff;font-style:normal;font-size:1.6cqw}
@media (prefers-reduced-motion: reduce){.demo [data-t]{opacity:1!important;transform:none!important}.demo .dcur{display:none}}
@media (max-width:640px){.demo .dpanel{width:52%;right:3%;top:5%;max-height:90%}.demo .dpanel.mp{width:50%}}
.show .demo-wrap,.built .demo-wrap{grid-column:1/9}
.show.flip .demo-wrap{grid-column:5/13;grid-row:1}
@media (max-width:960px){.show .demo-wrap,.show.flip .demo-wrap,.built .demo-wrap{grid-column:1/-1;grid-row:auto}}
.demo-sec .demo-wrap{margin-top:clamp(50px,8vh,90px)}
.demo .gkw .wa-av{background:#e7b3c4;color:#5a2236}

/* stacked work slides */
.stack-scroll{position:relative;height:calc(var(--n) * 100vh);margin:clamp(40px,7vh,80px) calc(-1 * var(--gx)) 0}
.stack-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1800px;perspective-origin:50% 0%}
.slide{position:absolute;inset:0;display:grid;align-items:center;align-content:center;padding:clamp(76px,10vh,96px) var(--gx) clamp(30px,5vh,52px);background:var(--paper);transform-origin:50% 60%;backface-visibility:hidden;will-change:transform,opacity;box-shadow:0 -40px 80px -60px rgba(15,15,15,.45)}
.slide:first-child{box-shadow:none}
.slide-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 2vw;align-items:center;width:100%;max-height:100%}
.slide-media{grid-column:1/9;min-width:0}
.slide-info{grid-column:9/13;display:grid;gap:12px;align-content:start}
.slide-info h3{font-size:clamp(34px,3.8vw,68px);letter-spacing:-.06em;line-height:.92}
.slide-info .k{font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.slide-info .outs{display:grid;grid-template-columns:1fr 1fr;gap:12px 2vw;margin-top:6px}
.slide-info .out{border-top:1px solid var(--ink);padding-top:12px;display:grid;gap:4px}
.slide-info .out b{font:800 clamp(30px,2.8vw,48px)/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.slide-info .out b.sm{font-size:clamp(24px,2vw,34px);line-height:1.2}
.slide-info .out > span{font-size:14px;color:var(--muted)}
.slide-info .pq{font:400 20px/1.25 var(--serif);font-style:italic}
.slide-info .ul{justify-self:start;margin-top:8px}
.stack-dots{position:absolute;left:calc(var(--gx) / 2 - 10px);top:50%;transform:translateY(-50%);display:grid;gap:10px;z-index:20}
.stack-dots i{width:16px;height:6px;background:var(--line);transform:skewX(-45deg);transition:background .4s,width .4s}
.stack-dots i.on{background:var(--red);width:26px}
@media (max-width:960px){
  .slide-in{grid-template-columns:1fr;gap:18px}
  .slide-media,.slide-info{grid-column:1/-1}
  .slide{align-items:center;align-content:center;padding:64px var(--gx) 44px}
  .slide-info h3{font-size:30px}
  .slide-info .pq,.slide-info .note-sm,.slide-info .lens-note{display:none}
  .stack-dots{top:auto;left:auto;bottom:16px;right:50%;transform:translateX(50%);grid-auto-flow:column}
}
.stack-scroll.static{height:auto}
.stack-scroll.static .stack-pin{position:static;height:auto;overflow:visible}
.stack-scroll.static .slide{position:relative;inset:auto;box-shadow:none;padding-block:40px}
.stack-scroll.static .stack-dots{display:none}