/* Animated product scenes rendered as real DOM inside a laptop frame.
   Each scene is a tiny "screen recording": a cursor moves, rows highlight,
   text types itself, toasts land. Driven by assets/demos.js.

   Every size inside the screen is in em, and the screen's font-size tracks
   the laptop's width (container query units), so a scene composed for a
   680px laptop scales down to a 440px column or a phone exactly like a
   video would: nothing wraps differently, nothing spills off the bottom. */
/* The laptop: a space-grey MacBook. Aluminium rim, black bezel, notch, glass
   glare, then a deck drawn as a trapezoid so it reads as a surface receding
   from the viewer, with keyboard and trackpad, and the front lip below. */
.laptop{position:relative;width:100%;max-width:720px;margin:0 auto;padding-bottom:4px;--al-hi:#8e9099;--al:#5d5f68;--al-lo:#3a3b42;--deck:#4b4c54;--deck-lo:#35363d}
.laptop .lid{position:relative;background:linear-gradient(180deg,var(--al-hi),var(--al) 18%,var(--al-lo));border-radius:20px 20px 6px 6px;padding:3px 3px 0;box-shadow:0 40px 80px -36px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.4);container-type:inline-size}
.laptop .lid::before{content:"";position:absolute;inset:3px 3px 0;background:#0b0b0e;border-radius:18px 18px 4px 4px}
.laptop .lid::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:6px;background:linear-gradient(180deg,#2a2b31,#141418);border-radius:0 0 4px 4px}
.laptop .notch{position:absolute;z-index:3;top:3px;left:50%;transform:translateX(-50%);width:clamp(60px,12%,100px);height:clamp(12px,2.4%,17px);background:#0b0b0e;border-radius:0 0 10px 10px}
.laptop .notch::after{content:"";position:absolute;left:50%;top:40%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#1b2a3f;box-shadow:0 0 0 1px #000,0 0 3px rgba(80,140,255,.5)}
.laptop .scr{position:relative;z-index:1;margin:10px 12px 22px;background:#FBFAF7;color:#101014;border-radius:6px;aspect-ratio:16/10;overflow:hidden;font-family:var(--body);font-size:clamp(7px,1.86cqi,13px);line-height:1.4;transition:opacity .28s ease;-webkit-font-smoothing:antialiased}
.laptop .scr.out{opacity:0}
.laptop .glare{position:absolute;z-index:2;inset:10px 12px 22px;border-radius:6px;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 26%,transparent 44%)}
.laptop .base{position:relative;height:30px;margin:0 -4.5%;background:linear-gradient(180deg,#6a6c75 0,var(--deck) 12%,var(--deck) 70%,var(--deck-lo));clip-path:polygon(4.1% 0,95.9% 0,100% 100%,0 100%)}
.laptop .keys{position:absolute;left:14%;right:14%;top:4px;height:15px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 6px,transparent 6px 8px),repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 4px,transparent 4px 5px),rgba(0,0,0,.14);clip-path:polygon(1.5% 0,98.5% 0,100% 100%,0 100%)}
.laptop .pad{position:absolute;left:50%;bottom:3px;width:21%;height:8px;transform:translateX(-50%);border-radius:2px;background:rgba(0,0,0,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 2px rgba(0,0,0,.35)}
.laptop .lip{height:6px;margin:0 -4.9%;background:linear-gradient(180deg,#9a9ca5,#62646c 55%,#3d3e45);border-radius:0 0 9px 9px;clip-path:polygon(0 0,100% 0,99.2% 100%,.8% 100%);position:relative}
.laptop .lip::after{content:"";position:absolute;left:50%;top:0;width:11%;height:3px;transform:translateX(-50%);background:rgba(0,0,0,.35);border-radius:0 0 3px 3px}
.laptop .shadow{position:absolute;left:-2%;right:-2%;bottom:-10px;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);filter:blur(6px);z-index:-1}
@media (max-width:600px){.laptop .lid{border-radius:14px 14px 4px 4px}.laptop .lid::before{border-radius:12px 12px 3px 3px}.laptop .scr{margin:6px 7px 14px;border-radius:4px}.laptop .glare{inset:6px 7px 14px}.laptop .notch{height:10px;width:52px}.laptop .base{height:20px;margin:0 -3.5%}.laptop .keys{top:3px;height:9px}.laptop .pad{height:5px;bottom:2px}.laptop .lip{height:4px;margin:0 -3.8%}}

/* cursor */
.cur{position:absolute;z-index:9;width:1.5em;height:1.5em;pointer-events:none;left:0;top:0;will-change:transform;transition:transform .75s cubic-bezier(.3,0,.15,1);filter:drop-shadow(0 .17em .25em rgba(0,0,0,.35))}
.cur::before{content:"";position:absolute;inset:0;background:#101014;clip-path:polygon(0 0,100% 55%,55% 60%,70% 100%,55% 100%,42% 65%,0 90%)}
.cur.ai::after{content:"AI";position:absolute;left:1.15em;top:1em;font:600 .67em/1 var(--mono);color:#fff;background:linear-gradient(135deg,#FF6B2B,#7B61FF);padding:.35em .55em;border-radius:999px;letter-spacing:.04em}
.cur.click::before{animation:click .35s ease}
@keyframes click{40%{transform:scale(.8)}}
.toast{position:absolute;right:1em;top:1em;z-index:8;background:#fff;border:1px solid #e3e0d8;border-radius:1em;padding:.8em 1em;box-shadow:0 1.5em 3.3em -1.7em rgba(16,16,20,.5);display:grid;grid-template-columns:1.85em 1fr;gap:.7em;align-items:center;max-width:62%;opacity:0;transform:translateY(-.7em);transition:opacity .4s,transform .45s cubic-bezier(.2,.8,.2,1)}
.toast.on{opacity:1;transform:none}
.toast i{width:1.85em;height:1.85em;border-radius:50%;background:#2E9E5B;position:relative}.toast i::after{content:"";position:absolute;inset:.5em;background:#fff;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.toast b{display:block;font-weight:500;font-size:1em;line-height:1.3}.toast span{font-size:.9em;color:#666;line-height:1.3}
.typing-caret::after{content:"";display:inline-block;width:1px;height:1em;background:currentColor;vertical-align:-.15em;margin-left:1px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* ── Scene: inbox ── */
.sc-inbox{display:grid;grid-template-columns:9em 1fr 1.15fr;grid-template-rows:100%;height:100%}.sc-inbox>*{min-width:0;min-height:0;overflow:hidden}
.sc-inbox .side{background:#F2F0EA;border-right:1px solid #e3e0d8;padding:1em .85em;display:grid;gap:.5em;align-content:start}
.sc-inbox .side b{font-weight:600;font-size:1em;margin-bottom:.5em;display:flex;align-items:center;gap:.5em}.sc-inbox .side b i{width:.67em;height:.67em;border-radius:50%;background:linear-gradient(135deg,#FF6B2B,#7B61FF)}
.sc-inbox .side div{padding:.5em .67em;border-radius:.67em;color:#444;display:flex;justify-content:space-between;transition:background .3s}.sc-inbox .side div.on{background:#fff;font-weight:500;color:#101014}
.sc-inbox .side div em{font-style:normal;font-size:.83em;color:#888;transition:color .3s}
.sc-inbox .list{border-right:1px solid #e3e0d8;overflow:hidden}
.sc-inbox .sr-row{display:grid;grid-template-columns:1fr auto;gap:.17em .67em;padding:.75em 1em;border-bottom:1px solid #eee;position:relative;transition:background .35s,opacity .4s}
.sc-inbox .sr-row b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sc-inbox .sr-row span{color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-column:1/-1;padding-right:4.5em}.sc-inbox .sr-row em{font-style:normal;font-size:.83em;color:#999}
.sc-inbox .sr-row.hl{background:#FFF1EA}.sc-inbox .sr-row.open{background:#fff;box-shadow:inset 3px 0 0 #F25A1C}
.sc-inbox .sr-row.done{opacity:.45}
.sc-inbox .tag{position:absolute;right:.85em;bottom:.6em;font:500 .8em/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:.3em .55em;border-radius:999px;background:#101014;color:#fff;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.sc-inbox .tag.on{opacity:1;transform:none}.sc-inbox .tag.q{background:#F25A1C}.sc-inbox .tag.inv{background:#7B61FF}.sc-inbox .tag.arc{background:#999}.sc-inbox .tag.cust{background:#2E9E5B}
.sc-inbox .pane{padding:1em;display:grid;gap:.6em;align-content:start;min-width:0;font-size:.95em}
.sc-inbox .pane h4{margin:0;font-size:1.08em;font-weight:600;line-height:1.25}.sc-inbox .pane .meta{font-size:.875em;color:#888}
.sc-inbox .pane p{margin:0;color:#333;font-size:1em;line-height:1.4}
.sc-inbox .compose{border:1px solid #e3e0d8;border-radius:.85em;padding:.75em;background:#fff;min-height:5.5em;font-size:1em;color:#101014;line-height:1.4;display:grid;gap:.4em;align-content:start}.sc-inbox .compose .sb-body{white-space:pre-wrap}
.sc-inbox .compose .lbl{font-size:.83em;color:#888;display:block;line-height:1.35}.sc-inbox .compose .lbl i{font-style:normal;color:#7B61FF;font-weight:500}
.sc-inbox .send{justify-self:end;background:#101014;color:#fff;padding:.5em 1em;border-radius:999px;font-size:.96em;font-weight:500;transition:background .3s}
.sc-inbox .send.on{background:#2E9E5B}

/* ── Scene: search ── */
.sc-search{height:100%;position:relative}
.sc-search .g{position:absolute;inset:0;padding:1em 1.5em;display:grid;gap:.7em;align-content:start;background:#fff;transition:opacity .5s}
.sc-search .q{display:flex;align-items:center;gap:.67em;border:1px solid #dadce0;border-radius:999px;padding:.6em 1em;font-size:1em;color:#202124;box-shadow:0 1px .5em rgba(32,33,36,.18);max-width:70%}
.sc-search .q i{width:1em;height:1em;border-radius:50%;border:2px solid #4285f4;border-right-color:#ea4335;border-bottom-color:#fbbc05;border-left-color:#34a853;flex:none}
.sc-search .stabs{display:flex;gap:1.17em;font-size:.875em;color:#5f6368;border-bottom:1px solid #eee;padding-bottom:.5em}.sc-search .stabs b{color:#1a73e8;font-weight:500;border-bottom:2px solid #1a73e8;padding-bottom:.5em;margin-bottom:calc(-.5em - 1px)}
.sc-search .res{display:grid;gap:.5em;position:relative}
.sc-search .r{display:grid;gap:.05em;padding:.45em .67em;border-radius:.67em;transition:transform .8s cubic-bezier(.3,0,.15,1),background .4s;position:relative}
.sc-search .r small{font-size:.83em;color:#202124}.sc-search .r b{font-weight:400;color:#1a0dab;font-size:1.08em;line-height:1.3}.sc-search .r span{font-size:.875em;color:#4d5156;line-height:1.35}
.sc-search .r.us{background:#FFF1EA;box-shadow:inset 3px 0 0 #F25A1C}
.sc-search .r .rk{position:absolute;right:.67em;top:.5em;font:500 .83em var(--mono);color:#999;background:#f1f3f4;padding:.2em .5em;border-radius:999px;transition:background .3s,color .3s}
.sc-search .ai{position:absolute;inset:0;background:#FBFAF7;padding:1.33em 1.5em;display:grid;gap:.85em;align-content:start;opacity:0;transition:opacity .5s}
.sc-search .ai .sq-ask{align-self:start;justify-self:end;background:#101014;color:#fff;padding:.67em 1em;border-radius:1.17em 1.17em .33em 1.17em;font-size:1em;max-width:70%;line-height:1.35}
.sc-search .ai .ans{background:#fff;border:1px solid #e3e0d8;border-radius:1.17em;padding:1em;font-size:1em;color:#222;min-height:9em;white-space:pre-wrap;line-height:1.45}
.sc-search .ai .ans .hd{display:flex;align-items:center;gap:.5em;font-size:.83em;color:#888;margin-bottom:.67em}.sc-search .ai .ans .hd i{width:1.17em;height:1.17em;border-radius:50%;background:#101014}
.sc-search .ai .src{display:inline-flex;align-items:center;gap:.4em;font-size:.83em;background:#FFF1EA;color:#101014;border:1px solid #F25A1C;padding:.25em .67em;border-radius:999px;margin-top:.67em;opacity:0;transition:opacity .4s}.sc-search .ai .src.on{opacity:1}
.sc-search .chart{position:absolute;inset:0;background:#fff;padding:1.33em 1.5em;display:grid;grid-template-rows:auto 1fr auto;gap:.67em;opacity:0;transition:opacity .5s}
.sc-search .chart b{font-size:1.08em;font-weight:600}.sc-search .chart svg{width:100%;height:100%}.sc-search .chart .leg{display:flex;gap:1.17em;font-size:.875em;color:#666}
.sc-search .chart .leg i{display:inline-block;width:1.5em;height:.25em;border-radius:2px;vertical-align:middle;margin-right:.4em;background:linear-gradient(90deg,#FF6B2B,#7B61FF)}
.sc-search .chart path{stroke-dasharray:1000;stroke-dashoffset:1000}.sc-search .chart.on path{animation:draw 2.2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sc-search .on{opacity:1}
.sc-search .g,.sc-search .ai,.sc-search .chart{visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.sc-search .on{visibility:visible;transition:opacity .5s,visibility 0s}
/* GEO: the monthly AI visibility report (named / quoted / not yet) */
.sc-geo .rep{position:absolute;inset:0;background:#fff;padding:1.33em 1.5em;display:grid;gap:.6em;align-content:start;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.sc-geo .rep.on{opacity:1;visibility:visible;transition:opacity .5s,visibility 0s}
.sc-geo .rep b{font-size:1.08em;font-weight:600;color:#101014}
.sc-geo .rep .sub{font-size:.83em;color:#888;margin-bottom:.4em}
.sc-geo .rep .row{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.6em .8em;border:1px solid #eee;border-radius:.67em;font-size:.92em;color:#222;opacity:0;transform:translateY(.4em);transition:opacity .4s,transform .4s}
.sc-geo .rep .row.on{opacity:1;transform:none}
.sc-geo .rep .row i{font:500 .8em var(--mono);font-style:normal;padding:.25em .6em;border-radius:999px;white-space:nowrap}
.sc-geo .rep .row i.ok{background:#FFF1EA;color:#B4400F;border:1px solid #F25A1C}
.sc-geo .rep .row i.no{background:#f3f3f5;color:#6b6b74;border:1px solid #e3e3e8}
@media (prefers-reduced-motion:reduce){.sc-geo .rep .row{transition:none;transform:none}}

/* ── Scene: dispatch app ── */
.sc-app{display:grid;grid-template-rows:auto 1fr;height:100%;background:#F7F6F2}
.sc-app .top{display:flex;align-items:center;gap:1.17em;padding:.75em 1.17em;background:#101014;color:#fff;font-size:.96em}
.sc-app .top b{font-weight:600;display:flex;align-items:center;gap:.5em;white-space:nowrap}.sc-app .top b i{width:.67em;height:.67em;border-radius:50%;background:linear-gradient(135deg,#FF6B2B,#7B61FF)}
.sc-app .top nav{display:flex;gap:1em;color:rgba(255,255,255,.6)}.sc-app .top nav span{transition:color .3s}.sc-app .top nav span.on{color:#fff;font-weight:500}
.sc-app .top .av{margin-left:auto;width:1.67em;height:1.67em;border-radius:50%;background:#2E9E5B;flex:none}
.sc-app .sb-body{display:grid;grid-template-columns:1.1fr 1fr;gap:.85em;padding:.85em;min-height:0;position:relative}
.sc-app .jobs{display:grid;gap:.5em;align-content:start;min-width:0;transition:opacity .4s}
.sc-app .sj-job{background:#fff;border:1px solid #e3e0d8;border-radius:.85em;padding:.67em .85em;display:grid;grid-template-columns:1fr auto;gap:.17em .67em;transition:box-shadow .3s,transform .3s;min-width:0}
.sc-app .sj-job.sel{box-shadow:0 0 0 2px #F25A1C}.sc-app .sj-job b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sc-app .sj-job span{color:#777;font-size:.875em;grid-column:1/-1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-app .st{font:500 .8em var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:.3em .6em;border-radius:999px;background:#F2F0EA;align-self:center;transition:background .3s,color .3s;white-space:nowrap}
.sc-app .st.urgent{background:#F25A1C;color:#fff}.sc-app .st.go{background:#2E9E5B;color:#fff}.sc-app .st.paid{background:#101014;color:#fff}
.sc-app .detail{background:#fff;border:1px solid #e3e0d8;border-radius:1em;padding:1em;display:grid;gap:.67em;align-content:start;opacity:0;transform:translateX(.67em);transition:opacity .35s,transform .4s cubic-bezier(.2,.8,.2,1);position:relative;min-width:0}
.sc-app .detail.on{opacity:1;transform:none}
.sc-app .detail h4{margin:0;font-size:1.08em;font-weight:600;line-height:1.25}.sc-app .detail .kv{display:grid;grid-template-columns:5.8em 1fr;gap:.25em .67em;font-size:.92em;line-height:1.35}.sc-app .detail .kv span{color:#888}
.sc-app .detail .map{height:5.2em;border-radius:.67em;background:repeating-linear-gradient(0deg,#eceae4 0 1px,transparent 1px 1em),repeating-linear-gradient(90deg,#eceae4 0 1px,transparent 1px 1em),#F7F6F2;position:relative}
.sc-app .detail .map i{position:absolute;left:62%;top:40%;width:.83em;height:.83em;border-radius:50%;background:#F25A1C;box-shadow:0 0 0 .33em rgba(242,90,28,.25)}
.sc-app .btn2{justify-self:start;background:#101014;color:#fff;padding:.5em 1em;border-radius:999px;font-size:.92em;font-weight:500;position:relative;white-space:nowrap}
.sc-app .dd{position:absolute;left:0;bottom:calc(100% + .33em);background:#fff;border:1px solid #e3e0d8;border-radius:.85em;padding:.33em;display:grid;gap:.17em;box-shadow:0 1.17em 2.5em -1.33em rgba(0,0,0,.4);opacity:0;transform:translateY(.33em);transition:opacity .25s,transform .25s;z-index:3;min-width:11em;pointer-events:none}
.sc-app .dd.on{opacity:1;transform:none}.sc-app .dd div{padding:.5em .85em;border-radius:.6em;font-size:1em;color:#101014;white-space:nowrap;transition:background .25s}.sc-app .dd div.hl{background:#FFF1EA}
.sc-app .inv{display:grid;gap:.5em;align-content:start;opacity:0;transition:opacity .4s;position:absolute;inset:.85em}
.sc-app .inv.on{opacity:1}

/* ── Scene: receptionist on a client site ── */
.sc-site{height:100%;position:relative;background:#fff;overflow:hidden}
.sc-site .hdr{display:flex;align-items:center;justify-content:space-between;padding:1em 1.5em;border-bottom:1px solid #e6e9ee;font-size:.92em}.sc-site .hdr b{font-family:Georgia,serif;font-size:1.27em;color:#1F3A5F;white-space:nowrap}.sc-site .hdr nav{display:flex;gap:1.1em;color:#425466;align-items:center;white-space:nowrap}.sc-site .hdr nav i{font-style:normal;background:#1F3A5F;color:#fff;padding:.36em .7em;border-radius:.45em}
.sc-site .sh-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:1.33em;padding:1.83em 1.5em;background:linear-gradient(180deg,#f4f7fb,#fff)}
.sc-site .sh-hero h1{font-family:Georgia,serif;font-size:1.5em;line-height:1.15;margin:0 0 .5em;color:#1F3A5F}.sc-site .sh-hero p{margin:0;color:#425466;font-size:.92em;line-height:1.4}.sc-site .sh-hero .ph{background:#dfe6ef;border-radius:.67em;min-height:5.5em}
.sc-site .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.67em;padding:0 1.5em}.sc-site .cards div{border:1px solid #e6e9ee;border-radius:.67em;padding:.67em;font-size:.83em;color:#425466;line-height:1.35}.sc-site .cards b{display:block;font-family:Georgia,serif;color:#1F3A5F;font-size:1.1em;margin-bottom:.2em}
.sc-site .wbtn{position:absolute;right:1em;bottom:1em;background:linear-gradient(135deg,#FF6B2B,#7B61FF);color:#fff;font-size:.92em;font-weight:600;padding:.75em 1.17em .75em .92em;border-radius:999px;display:flex;align-items:center;gap:.5em;box-shadow:0 .83em 2em -.83em rgba(242,90,28,.6);transition:opacity .3s;white-space:nowrap}
.sc-site .wbtn i{width:1em;height:1em;border-radius:50%;background:rgba(255,255,255,.35)}
.sc-site .nudge{position:absolute;right:1em;bottom:4.2em;background:#fff;border:1px solid #e3e0d8;border-radius:1em 1em .25em 1em;padding:.67em .85em;font-size:.875em;box-shadow:0 1.17em 2.5em -1.33em rgba(0,0,0,.4);max-width:15em;opacity:0;transform:translateY(.5em);transition:opacity .35s,transform .4s cubic-bezier(.2,.8,.2,1);line-height:1.35}
.sc-site .nudge.on{opacity:1;transform:none}.sc-site .nudge b{display:block;font-weight:600}
.sc-site .win{position:absolute;right:1em;bottom:1em;width:min(21.7em,62%);height:78%;background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);border:1px solid #e3e0d8;border-radius:1.33em;box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(16,16,20,.12),0 2.5em 5em -2.3em rgba(16,16,20,.5);display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;opacity:0;transform:translateY(1em) scale(.9);transition:opacity .35s,transform .45s cubic-bezier(.34,1.3,.64,1)}
.sc-site .win.on{opacity:1;transform:none}
.sc-site .wh{display:flex;align-items:center;gap:.67em;padding:.75em .85em;border-bottom:1px solid #eee;font-size:.92em}.sc-site .wh i{width:1.83em;height:1.83em;border-radius:50%;background:linear-gradient(135deg,#FF6B2B,#7B61FF);color:#fff;font:600 .67em var(--mono);display:inline-flex;align-items:center;justify-content:center;flex:none}.sc-site .wh b{display:block;font-weight:600;line-height:1.2}.sc-site .wh span{font-size:.8em;color:#777;display:flex;align-items:center;gap:.35em}.sc-site .wh span::before{content:"";width:.42em;height:.42em;border-radius:50%;background:#2E9E5B}
.sc-site .wl{flex:1;overflow:hidden;padding:.85em;display:flex;flex-direction:column;gap:.5em;justify-content:flex-end}
.sc-site .m{max-width:88%;padding:.6em .85em;border-radius:1em;font-size:.875em;line-height:1.35;animation:pop .4s cubic-bezier(.2,.8,.2,1) both}.sc-site .m.a{align-self:flex-start;background:#F2F0EA;border-bottom-left-radius:.33em}.sc-site .m.u{align-self:flex-end;background:linear-gradient(135deg,#FF6B2B,#7B61FF);color:#fff;border-bottom-right-radius:.33em}.sc-site .m.ok{align-self:flex-start;background:#2E9E5B;color:#fff}
@keyframes pop{from{opacity:0;transform:translateY(.5em) scale(.97)}to{opacity:1;transform:none}}
.sc-site .wt{align-self:flex-start;display:flex;gap:.25em;padding:.67em .85em;background:#F2F0EA;border-radius:1em}.sc-site .wt i{width:.42em;height:.42em;border-radius:50%;background:#999;animation:blink 1s infinite}.sc-site .wt i:nth-child(2){animation-delay:.15s}.sc-site .wt i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
.sc-site .wi{margin:.67em;height:2.33em;border:1px solid #d9d5cc;border-radius:999px;padding:0 .85em;display:flex;align-items:center;font-size:.875em;color:#888;flex:none}

/* ── Scenes: setup sheet, staging checklist, live report (how it works) ── */
.sc-sheet{height:100%;padding:1.33em 1.67em;display:grid;gap:.6em;align-content:start;background:#fff}
.sc-sheet h4{margin:0 0 .25em;font-size:1.17em;font-weight:600;line-height:1.25}.sc-sheet .sub{font-size:.875em;color:#888;margin-bottom:.4em}
.sc-sheet .kv{display:grid;grid-template-columns:7.5em 1fr;gap:.5em 1em;font-size:.96em;align-items:start;opacity:0;transform:translateY(.33em);transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1);border-bottom:1px solid #eee;padding-bottom:.5em;line-height:1.35}
.sc-sheet .kv.on{opacity:1;transform:none}.sc-sheet .kv span{color:#888}.sc-sheet .kv .tg{display:inline-block;background:#F2F0EA;border-radius:999px;padding:.17em .6em;margin:0 .33em .25em 0;font-size:.9em}
.sc-stage{height:100%;display:grid;grid-template-columns:1fr 12.5em;background:#fff}
.sc-stage .prev{position:relative;border-right:1px solid #eee;font-size:.72em;overflow:hidden}
.sc-stage .chk{padding:1em;display:grid;gap:.5em;align-content:start;font-size:.92em}.sc-stage .chk b{font-weight:600;font-size:1.04em;margin-bottom:.17em}
.sc-stage .chk div{display:flex;gap:.6em;align-items:center;color:#444;opacity:.45;transition:opacity .3s;line-height:1.3}.sc-stage .chk div.on{opacity:1}.sc-stage .chk div i{width:1.17em;height:1.17em;border-radius:50%;border:1.5px solid #cfcbc1;flex:none;position:relative;transition:background .3s,border-color .3s}.sc-stage .chk div.on i{background:#2E9E5B;border-color:#2E9E5B}.sc-stage .chk div.on i::after{content:"";position:absolute;inset:.25em;background:#fff;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sc-live{height:100%;background:#F7F6F2;padding:1.17em 1.33em;display:grid;grid-template-columns:1fr 1fr;gap:.85em;align-content:start}
.sc-live .sm-mail{grid-column:1/-1;background:#fff;border:1px solid #e3e0d8;border-radius:.85em;padding:.85em 1em;font-size:.92em;display:grid;gap:.25em;opacity:0;transform:translateY(.5em);transition:opacity .4s,transform .45s cubic-bezier(.2,.8,.2,1);line-height:1.35}.sc-live .sm-mail.on{opacity:1;transform:none}.sc-live .sm-mail b{font-weight:600;font-size:1.08em}.sc-live .sm-mail span{color:#666}
.sc-live .kpi{background:#fff;border:1px solid #e3e0d8;border-radius:.85em;padding:.85em 1em}.sc-live .kpi b{display:block;font-family:var(--display);font-weight:300;font-size:2.17em;letter-spacing:-.02em;line-height:1}.sc-live .kpi span{font-size:.83em;color:#777;text-transform:uppercase;letter-spacing:.05em}
.how-shot{aspect-ratio:auto;padding:16px clamp(16px,5.5%,46px) 20px}
.how-shot .laptop{max-width:none}
.how-shot img{display:none!important}
@media (prefers-reduced-motion:reduce){.cur{transition:none}.sc-search .chart path{animation:none;stroke-dashoffset:0}.sc-site .m{animation:none}}

/* ─── Phone pass (Oct 2026): the how-it-works laptop fills the card, Pause sits under it ─── */
@media (max-width:760px){
  .how-shot{display:block;padding:8px 8px 10px;border-radius:18px}
  .how-shot .laptop{width:100%;max-width:none;animation:none}
  .how-shot .demo-bar{margin:8px 2px 0;justify-content:flex-end}
  .how-shot .demo-pause{height:40px}
}
@media (max-width:600px){
  /* drop the laptop chrome so the scene gets the whole card width */
  .how-shot .laptop .base,.how-shot .laptop .lip,.how-shot .laptop .shadow,.how-shot .laptop .notch{display:none}
  .how-shot .laptop .lid{padding:0;background:none;box-shadow:none;border-radius:12px}
  .how-shot .laptop .lid::before,.how-shot .laptop .lid::after{display:none}
  .how-shot .laptop .scr{margin:0;border-radius:12px;box-shadow:0 0 0 1px var(--line-2)}
  .how-shot .laptop .glare{inset:0;border-radius:12px}
}
@media (max-width:600px){
  /* Pause floats over the scene's empty bottom-left corner instead of taking a band of its own */
  #howShot,.lp-demo-wrap [data-demo]{position:relative;top:auto}
  #howShot{padding-bottom:8px}
  #howShot .demo-bar,.lp-demo-wrap [data-demo] .demo-bar{position:absolute;left:16px;bottom:16px;margin:0;z-index:3}
  /* service-page laptops keep their base and lip (46px under the screen at this width): lift the pill onto the screen */
  .lp-demo-wrap [data-demo] .demo-bar{left:18px;bottom:56px}
  #howShot .demo-pause,.lp-demo-wrap [data-demo] .demo-pause{height:34px;padding:0 12px;background:var(--lg-tint-strong,var(--card));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}