/* Well Known · "the edit" scroll sequence (#edit-canvas). Classes are m-* */
.edit-sticky:has(.edit-canvas:empty){height:0}

/* phone */
.m-phone{position:relative;flex:none;width:var(--pw);height:var(--ph);background:#0f1013;border-radius:calc(var(--pw)*.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 2px #26282d,0 30px 60px -30px rgba(21,23,26,.5)}
.m-phone::before{content:"";position:absolute;z-index:4;left:50%;top:calc(var(--pw)*.058);width:calc(var(--pw)*.28);height:calc(var(--pw)*.082);margin-left:calc(var(--pw)*-.14);background:#000;border-radius:999px}
.m-screen{position:absolute;inset:calc(var(--pw)*.034);border-radius:calc(var(--pw)*.128);background:#000}
.m-b{position:absolute;width:calc(var(--pw)*.014);background:#2c2e33;border-radius:2px;left:calc(var(--pw)*-.014)}
.m-b1{top:17%;height:4.5%}.m-b2{top:25%;height:9%}.m-b3{top:36%;height:9%}
.m-b4{left:auto;right:calc(var(--pw)*-.014);top:28%;height:14%}

/* footage: licensed stock clip (or its still under reduced motion); face at 57% / 35% */
.m-foot{position:absolute;inset:0;overflow:hidden;background:#2a2622;transform-origin:57% 35%;transition:transform .45s var(--ease)}
.m-foot video,.m-foot img{display:block;width:100%;height:100%;object-fit:cover;object-position:57% 35%}

/* canvas */
.m-ec{position:absolute;inset:0;container-type:size;font-family:var(--sans);overflow:hidden;--d:.65s}
.m-ec>*{position:absolute;left:50%}
.m-ef{top:50%;width:78.2cqh;height:44cqh;margin:-22cqh 0 0 -39.1cqh;z-index:2;transform:translate(0,-15cqh) scale(1);clip-path:inset(0 round 2.2cqh);filter:saturate(.25) contrast(.92) brightness(.96);transition:transform var(--d) var(--ease),clip-path var(--d) var(--ease),filter var(--d) var(--ease);will-change:transform}
:is([data-state="2"],[data-state="3"],[data-state="4"]) .m-ef{transform:translate(-10.2cqh,0) scale(1.864);clip-path:inset(0 27.17% 0 41.17% round 1.9cqh);filter:none}
[data-state="2"] .m-ef{transition-delay:.55s}
[data-state="5"] .m-ef{transform:translate(-9.45cqh,0) scale(1.727);clip-path:inset(0 27.17% 0 41.17% round 3.4cqh);filter:none}
[data-state]:not([data-state="0"]) .m-ef .m-foot{transform:scale(1.08)}
/* 0 · raw */
.m-recw{top:50%;width:78.2cqh;height:44cqh;margin:-22cqh 0 0 -39.1cqh;z-index:3;transform:translateY(-15cqh);pointer-events:none}
.m-rec{position:absolute;left:3.5%;top:7%;display:flex;align-items:center;gap:.45em;color:#fff;font:600 2.4cqh/1 var(--sans);letter-spacing:.04em;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.5);transition:opacity .3s}
.m-rec i{width:.75em;height:.75em;border-radius:50%;background:#e5322d;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
[data-state="0"] .m-rec i{animation:m-blink 1.2s steps(1) infinite}
@keyframes m-blink{0%,55%{opacity:1}56%,100%{opacity:.25}}
[data-state]:not([data-state="0"]) .m-rec{opacity:0}
.m-tl{top:63.5cqh;width:78.2cqh;height:8cqh;margin-left:-39.1cqh;z-index:2;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.m-tx{top:75.5cqh;width:78.2cqh;margin-left:-39.1cqh;height:9cqh;font-size:2.9cqh;line-height:1.35;color:var(--ink3);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.m-tx span{position:absolute;left:0;top:0;transition:opacity .35s var(--ease),text-decoration-color .25s}
.m-tx b{font-weight:600;color:var(--ink)}
.m-tx0{text-decoration:line-through;text-decoration-color:transparent;text-decoration-thickness:2px}
.m-tx1{opacity:0}
:is([data-state="2"],[data-state="3"],[data-state="4"],[data-state="5"]) :is(.m-tl,.m-tx){opacity:0;transform:translateY(3cqh)}
.m-clip{position:absolute;top:0;height:100%;left:calc(var(--a)*1cqh);width:calc(var(--w)*1cqh);border-radius:1cqh;background:#fff;box-shadow:inset 0 0 0 1px var(--line2);transform-origin:0 50%;transition:transform .55s var(--ease),opacity .35s var(--ease),box-shadow .3s}
.m-clip svg{position:absolute;left:6%;top:14%;width:88%;height:72%;fill:var(--ink3)}
.m-clip.m-p{background:var(--tint);box-shadow:inset 0 0 0 1px var(--line)}
.m-clip.m-p::after{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;margin-top:-1px;background:var(--line2)}
.m-clip::before{content:"Hook";position:absolute;left:0;bottom:calc(100% + .6cqh);font:600 2.1cqh/1 var(--sans);color:#fff;background:var(--accent);padding:.5cqh .9cqh;border-radius:.6cqh;opacity:0;transform:translateY(.6cqh);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.m-dur{position:absolute;right:0;top:calc(100% + .9cqh);font:600 2.3cqh/1 var(--sans);color:var(--ink3);font-variant-numeric:tabular-nums;transition:color .3s}
/* 1 · hook first: pauses collapse, clips slide, hook to the front */
[data-state="1"] .m-clip.m-x{opacity:0;transform:scaleX(0)}
[data-state="1"] .m-clip.m-k{transform:translateX(calc((var(--b) - var(--a))*1cqh));transition-delay:.3s,0s,.3s}
[data-state="1"] .m-clip.m-h{box-shadow:inset 0 0 0 2px var(--accent)}
[data-state="1"] .m-clip.m-h::before{opacity:1;transform:none;transition-delay:.75s}
[data-state="1"] .m-dur{color:var(--ok)}
[data-state="1"] .m-tx0{opacity:0;text-decoration-color:var(--accent);transition-delay:.4s,0s}
[data-state="1"] .m-tx1{opacity:1;transition-delay:.6s}
/* 2 · vertical: crop window sweeps in, sides dim, then the frame reframes and colour returns */
.m-crop{position:absolute;left:41.17%;right:27.17%;top:0;bottom:0;transform-origin:60.3% 50%;border:1px solid rgba(255,255,255,.85);border-radius:1.9cqh;box-shadow:0 0 0 200cqh rgba(0,0,0,.42);opacity:0}
[data-state="2"] .m-crop{animation:m-sweep 1.5s var(--ease) both}
@keyframes m-sweep{0%{opacity:0;transform:scaleX(3.16)}12%{opacity:1;transform:scaleX(3.16)}48%{opacity:1;transform:none}78%{opacity:1}100%{opacity:0;transform:none}}
.m-face{position:absolute;left:57%;top:35%;width:11cqh;height:13.5cqh;margin:-6.75cqh 0 0 -5.5cqh;border:1.5px solid rgba(255,255,255,.9);border-radius:1.6cqh;opacity:0}
[data-state="2"] .m-face{animation:m-face 2s var(--ease) .6s both}
@keyframes m-face{0%{opacity:0;transform:scale(1.5)}30%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}
/* phone + vertical overlay */
.m-ephone{top:50%;margin:calc(var(--ph)*-.5) 0 0 calc(var(--pw)*-.5);--pw:45.5cqh;--ph:78.8cqh;z-index:1;opacity:0;transform:scale(1.04);transition:opacity .4s var(--ease),transform var(--d) var(--ease)}
[data-state="5"] .m-ephone{opacity:1;transform:none}
.m-ev{top:50%;width:46.1cqh;height:82cqh;margin:-41cqh 0 0 -23.05cqh;z-index:3;opacity:0;container-type:size;overflow:hidden;border-radius:3.54cqh;transition:opacity .4s var(--ease),transform var(--d) var(--ease),border-radius var(--d) var(--ease)}
:is([data-state="3"],[data-state="4"],[data-state="5"]) .m-ev{opacity:1}
[data-state="5"] .m-ev{transform:scale(.927);border-radius:6.33cqh}
.m-ev>*{position:absolute}
.m-scrim{inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 22%),linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.6) 100%)}
.m-isl{left:35%;right:35%;top:1.6%;height:4.9%;border-radius:999px;background:#000;opacity:0;transition:opacity .2s}
[data-state="5"] .m-isl{opacity:1}
.m-prog{left:5%;right:5%;top:13cqw;height:2px;border-radius:2px;background:rgba(255,255,255,.35)}
.m-prog i{position:absolute;inset:0;background:#fff;border-radius:2px;transform-origin:0 50%;transform:scaleX(.42)}
.m-user{left:6%;bottom:3.4%;display:flex;align-items:center;gap:.6em;color:rgba(255,255,255,.92);font:500 4.3cqw/1 var(--sans);white-space:nowrap;transition:opacity .3s}
.m-user i{width:2em;height:2em;border-radius:50%;background:linear-gradient(135deg,#f3d5b5,#c98b5e);box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
/* 3 · captions: words pop in one by one, then the highlight follows the voice */
.m-cap{left:5%;right:5%;bottom:20%;text-align:center;color:#fff;font:600 8.6cqw/1.28 var(--sans);letter-spacing:-.01em;text-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform var(--d) var(--ease)}
.m-w{display:inline-block;padding:.02em .16em;margin:.05em -.04em;border-radius:.3em;opacity:0;transform:translateY(.35em) scale(.8);transition:opacity .2s var(--ease),transform .4s cubic-bezier(.2,.9,.3,1.25),background-color .2s var(--ease)}
.m-w.m-on{background:var(--accent);text-shadow:none}
:is([data-state="3"],[data-state="4"],[data-state="5"]) .m-w{opacity:1;transform:none;transition-delay:calc(var(--i)*.22s)}
[data-state="3"] .m-w{animation:m-kar 1.8s steps(1) calc(var(--i)*.6s + .1s) infinite}
@keyframes m-kar{0%,66.6%{background:transparent}66.7%,100%{background:var(--accent);text-shadow:none}}
@media (prefers-reduced-motion:no-preference){[data-state="3"] .m-w.m-on{background:transparent}}
/* 4 · graphics: a card with a count-up and a drawn chart, then a stat pill */
.m-card{left:6%;top:10%;min-width:56%;padding:.6em .8em .7em;background:#fff;border-radius:.6em;color:var(--ink);font:400 5.2cqw/1.2 var(--sans);box-shadow:0 10px 30px -10px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.04);opacity:0;transform:translateY(10px) scale(.94);transform-origin:0 100%;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.m-cl{font-size:.82em;color:var(--ink3);font-weight:500;white-space:nowrap}
.m-cv{font-size:2em;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-top:.08em;display:flex;align-items:center;gap:.15em}
.m-cv small{font-size:.5em;color:var(--ink2);font-weight:500;letter-spacing:0}
.m-chart{display:block;width:100%;height:1.9em;margin-top:.45em;fill:none;stroke-linecap:round;stroke-linejoin:round}
.m-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.m-line{stroke:var(--accent);stroke-width:2;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s var(--ease) .35s}
.m-dot{fill:var(--accent);opacity:0;transform:scale(.4);transform-origin:78px 24px;transition:opacity .2s 1.1s,transform .35s cubic-bezier(.2,.9,.3,1.3) 1.1s}
.m-pill{right:6%;top:55%;padding:.55em .9em;background:#fff;border-radius:999px;color:var(--ink2);font:500 4.3cqw/1 var(--sans);white-space:nowrap;box-shadow:0 8px 24px -10px rgba(0,0,0,.45);opacity:0;transform:translateX(1em);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.m-pill b{color:var(--ink);font-weight:600;font-size:1.2em;margin-left:.2em}
[data-state="4"] .m-card{opacity:1;transform:none;transition:opacity .35s var(--ease) .1s,transform .5s cubic-bezier(.2,.9,.25,1.12) .1s}
[data-state="4"] .m-line{stroke-dashoffset:0}
[data-state="4"] .m-dot{opacity:1;transform:none}
[data-state="4"] .m-pill{opacity:1;transform:none;transition:opacity .35s var(--ease) .7s,transform .5s cubic-bezier(.2,.9,.25,1.12) .7s}
/* 5 · approved on the phone: tap, check draws in, "Scheduled" toast drops in */
[data-state="5"] .m-cap{transform:translateY(-15cqh)}
[data-state="5"] .m-user{opacity:0}
.m-ap{left:6%;right:6%;bottom:4%;padding:.6em;background:#fff;border-radius:.8em;font:600 5.2cqw/1.2 var(--sans);color:var(--ink);opacity:0;transform:translateY(1em);transition:opacity .3s var(--ease),transform .4s var(--ease)}
[data-state="5"] .m-ap{opacity:1;transform:none;transition-delay:.35s}
.m-apb{position:relative;height:2.4em;border-radius:999px;background:var(--accent);color:#fff;transition:background .18s var(--ease),transform .12s var(--ease)}
.m-apb span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.4em;transition:opacity .12s}
.m-apb svg{width:1em;height:1em;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s var(--ease) .15s}
.m-ap2{opacity:0}
.m-press .m-apb{transform:scale(.96);background:var(--accent-d)}
.m-ok .m-apb{background:var(--ok)}
.m-ok .m-ap1{opacity:0}.m-ok .m-ap2{opacity:1;transition-delay:.12s}.m-ok .m-apb svg{stroke-dashoffset:0}
.m-toast{left:8%;right:8%;top:10%;display:flex;align-items:center;justify-content:center;gap:.5em;padding:.6em .9em;background:#fff;border-radius:999px;color:var(--ink);font:600 4.4cqw/1 var(--sans);white-space:nowrap;box-shadow:0 8px 24px -10px rgba(0,0,0,.45);opacity:0;transform:translateY(-2.4em);transition:opacity .25s var(--ease),transform .5s cubic-bezier(.2,.9,.25,1.15)}
.m-toast i{width:.7em;height:.7em;border-radius:50%;background:var(--ok)}
.m-sched .m-toast{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.m-ec{--d:0s}}