/* czm-lib.css - rich animated cz-stage mockup library (m01-m24).
   Generated from preview/_czm_parts/*.frag.html. Play is triggered by
   /js/czm-mock.js adding .play to [data-mock] on scroll-reveal. ADDITIVE and
   inert until a page uses <div class="czm mNN-root" data-mock> markup, so it
   cannot affect existing pages. Regenerate from the fragments; do not hand-edit. */
.cz-band,.czm{--g:linear-gradient(135deg,#8C6CFF,#6A9EFF 55%,#48E2D9);--ink:#0f172a;--sub:#475569;--line:#e8edf4;--mut:#94a3b8;--ok:#10b981;--bad:#ef4444}
.czm .top{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;color:#334155;margin-bottom:14px}
.czm .top .ic{width:20px;height:20px;border-radius:6px;background:var(--g);display:grid;place-items:center;color:#fff;flex-shrink:0}
.czm .top .ic svg{width:12px;height:12px}
.czm .top .ctx{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);background:#f1f5f9;padding:3px 9px;border-radius:999px}

/* ===== m01 ===== */
.m01-root{position:relative}
.m01-body{display:flex;gap:14px;align-items:center;margin-top:14px}

/* ===== gauge ===== */
.m01-gauge{position:relative;width:120px;height:120px;flex:0 0 120px}
.m01-svg{width:120px;height:120px;display:block;transform:rotate(-90deg)}
.m01-track{fill:none;stroke:var(--line);stroke-width:9}
.m01-arc{fill:none;stroke:url(#m01-grad);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:308;stroke-dashoffset:308}
.m01-root.play .m01-arc{animation:m01-sweep 1.5s cubic-bezier(.22,.9,.3,1) .1s forwards}
@keyframes m01-sweep{to{stroke-dashoffset:28}}  /* 308*(1-91/100)=28 */

/* rotating sheen ring (ambient) */
.m01-sheen{fill:none;stroke:url(#m01-sheen);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:34 274;stroke-dashoffset:0;opacity:.55;
  animation:m01-spin 3.6s linear infinite}
@keyframes m01-spin{to{stroke-dashoffset:-308}}

/* glowing dot riding the arc tip */
.m01-tip{transform-origin:60px 60px;transform:rotate(0deg);opacity:0}
.m01-tip circle{fill:#fff;stroke:url(#m01-grad);stroke-width:2.5;
  filter:drop-shadow(0 0 5px rgba(106,158,255,.9))}
.m01-root.play .m01-tip{animation:m01-ride 1.5s cubic-bezier(.22,.9,.3,1) .1s forwards}
/* 91% of 360 = 327.6deg */
@keyframes m01-ride{0%{opacity:0;transform:rotate(0deg)}
  8%{opacity:1}100%{opacity:1;transform:rotate(327.6deg)}}
.m01-tip .m01-halo{fill:rgba(106,158,255,.18);animation:m01-pulse 1.8s ease-in-out infinite}
@keyframes m01-pulse{0%,100%{opacity:.5}50%{opacity:.15}}

/* center number */
.m01-num{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.m01-num b{font-size:30px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.5px}
.m01-num span{font-size:8.5px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--mut);margin-top:3px;font-weight:700}
.m01-num em{font-size:9px;font-style:normal;font-weight:700;color:var(--ok);
  opacity:0;transform:translateY(3px);margin-top:4px}
.m01-root.play .m01-num em{animation:m01-verdict .38s ease 2.1s forwards}
@keyframes m01-verdict{to{opacity:1;transform:translateY(0)}}

/* ===== reason chips ===== */
.m01-chips{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.m01-chip{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);
  border-radius:9px;background:#fbfcfe;opacity:0;transform:translateX(10px);
  box-shadow:0 1px 2px rgba(15,23,42,.03)}
.m01-root.play .m01-chip{animation:m01-cascade .4s cubic-bezier(.22,.9,.3,1) forwards}
.m01-root.play .m01-chip:nth-child(1){animation-delay:1.4s}
.m01-root.play .m01-chip:nth-child(2){animation-delay:1.58s}
.m01-root.play .m01-chip:nth-child(3){animation-delay:1.76s}
@keyframes m01-cascade{to{opacity:1;transform:translateX(0)}}
.m01-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:var(--ok)}
.m01-chip .m01-k{font-size:10.5px;color:var(--sub);font-weight:600}
.m01-chip .m01-v{font-size:11px;color:var(--ink);font-weight:800;margin-left:auto}
.m01-chip .m01-v.m01-good{color:var(--ok)}

/* static green dot on the verdict line */
.m01-tick{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--ok);margin-left:5px;vertical-align:middle}

/* ===== m02 ===== */
/* ===== m02 : Rent collection / money landing ===== */
.m02-root{
  position:relative;
  font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  padding-bottom:2px;
}

/* ACH source chip */
.m02-src{
  display:flex;align-items:center;gap:8px;
  margin:13px 0 0;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(180deg,#fff,#fafcff);
  position:relative;
  overflow:hidden;
}
.m02-src::after{
  content:"";position:absolute;inset:0;
  border-radius:10px;
  box-shadow:0 0 0 0 rgba(106,158,255,.30);
  animation:m02-pulse 2.8s ease-in-out infinite;
}
@keyframes m02-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(106,158,255,.26)}
  50%{box-shadow:0 0 0 5px rgba(106,158,255,0)}
}
.m02-srcdot{
  width:9px;height:9px;border-radius:50%;
  background:var(--g);
  flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(72,226,217,.18);
}
.m02-srclab{font-weight:700;letter-spacing:.2px}
.m02-srcsub{margin-left:auto;font-size:11px;color:var(--mut);font-weight:600}

/* the payment rail: one continuous wire running down the LEFT,
   physically connecting the ACH source to each ledger row */
.m02-rail{
  position:relative;
  padding-left:22px;
  margin-top:0;
}
.m02-rail::before{
  content:"";position:absolute;
  left:9px;top:-4px;bottom:14px;
  width:2px;border-radius:2px;
  background:linear-gradient(180deg,#6A9EFF 0%,#48E2D9 100%);
  opacity:.45;
}
/* one traveling money dot per row: each pulse runs the wire and ARRIVES
   just before its row lands, so the rail visibly feeds the ledger */
.m02-dot{
  position:absolute;left:6px;top:-4px;
  width:8px;height:8px;border-radius:50%;
  background:var(--g);
  box-shadow:0 0 8px rgba(106,158,255,.85),0 0 0 3px rgba(72,226,217,.16);
  opacity:0;
  transform:translateY(0) scale(.7);
}
.m02-root.play .m02-d1{animation:m02-send1 .7s cubic-bezier(.4,0,.5,1) forwards .0s}
.m02-root.play .m02-d2{animation:m02-send2 .7s cubic-bezier(.4,0,.5,1) forwards .9s}
/* dot 1 travels to row-1 (~22px) and arrives ~0.6s, just before the .62s drop */
@keyframes m02-send1{
  0%{opacity:0;transform:translateY(0) scale(.7)}
  18%{opacity:1;transform:translateY(4px) scale(1)}
  78%{opacity:1;transform:translateY(20px) scale(1)}
  100%{opacity:0;transform:translateY(26px) scale(.6)}
}
/* dot 2 travels to row-2 (~70px) and arrives ~1.5s, just before its drop */
@keyframes m02-send2{
  0%{opacity:0;transform:translateY(4px) scale(.7)}
  16%{opacity:1;transform:translateY(20px) scale(1)}
  80%{opacity:1;transform:translateY(68px) scale(1)}
  100%{opacity:0;transform:translateY(74px) scale(.6)}
}

/* little connector elbow tying each row back into the rail */
.m02-row::before{
  content:"";position:absolute;
  left:-13px;top:50%;
  width:11px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#6A9EFF,#48E2D9);
  opacity:0;
  transform:scaleX(0);transform-origin:left center;
}
.m02-root.play .m02-r1::before{animation:m02-elbow .4s ease forwards .55s}
.m02-root.play .m02-r2::before{animation:m02-elbow .4s ease forwards 1.45s}
@keyframes m02-elbow{to{opacity:.55;transform:scaleX(1)}}

/* ledger rows */
.m02-row{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;
  margin:8px 0;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  position:relative;
  opacity:0;
  transform:translateY(-14px);
}
.m02-root.play .m02-r1{animation:m02-drop .5s cubic-bezier(.2,1.4,.4,1) forwards .62s, m02-flash 1s ease 1.0s}
.m02-root.play .m02-r2{animation:m02-drop .5s cubic-bezier(.2,1.4,.4,1) forwards 1.52s, m02-flash 1s ease 1.9s}
@keyframes m02-drop{
  0%{opacity:0;transform:translateY(-16px) scale(.97)}
  60%{opacity:1}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes m02-flash{
  0%{background:#fff;border-color:var(--line)}
  20%{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.5)}
  100%{background:#fff;border-color:var(--line)}
}
.m02-av{
  width:24px;height:24px;border-radius:7px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:11px;color:#fff;
  background:var(--g);
}
.m02-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.m02-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m02-unit{font-size:11px;color:var(--mut);font-weight:600}
.m02-amt{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}

/* the little green check that lands on a row */
.m02-chk{
  margin-left:8px;flex:0 0 auto;
  width:18px;height:18px;border-radius:50%;
  background:var(--ok);
  display:flex;align-items:center;justify-content:center;
  transform:scale(0);
}
.m02-root.play .m02-r1 .m02-chk{animation:m02-pop .4s cubic-bezier(.2,1.6,.4,1) forwards 1.02s}
.m02-root.play .m02-r2 .m02-chk{animation:m02-pop .4s cubic-bezier(.2,1.6,.4,1) forwards 1.92s}
@keyframes m02-pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.m02-chk svg{width:11px;height:11px;display:block}

/* footer: "Deposited to your account" chip that flies out */
.m02-bal{
  display:flex;align-items:center;gap:8px;
  margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line);
}
.m02-ballab{font-size:11px;color:var(--sub);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.m02-dep{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;
  background:linear-gradient(180deg,rgba(16,185,129,.14),rgba(16,185,129,.08));
  border:1px solid rgba(16,185,129,.34);
  font-size:12px;font-weight:800;color:#0f7a52;
  font-variant-numeric:tabular-nums;
  opacity:0;transform:translateX(14px) scale(.94);
}
.m02-dep svg{width:11px;height:11px;display:block;flex:0 0 auto}
.m02-root.play .m02-dep{animation:m02-fly .5s cubic-bezier(.2,1.5,.4,1) forwards 2.05s}
@keyframes m02-fly{
  0%{opacity:0;transform:translateX(14px) scale(.94)}
  100%{opacity:1;transform:translateX(0) scale(1)}
}
.m02-depamt{
  background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;
}

@media (prefers-reduced-motion:reduce){
  .m02-root *,.m02-row::before{animation-duration:.001s!important}
  .m02-row,.m02-dep{opacity:1!important;transform:none!important}
  .m02-dot{opacity:0!important}
  .m02-row::before{opacity:.55!important;transform:scaleX(1)!important}
}

/* ===== m03 ===== */
/* m03 - Maintenance triage: under-sink leak photo -> AI scan -> work order. */
.m03-root{position:relative;font-size:13px;color:var(--ink)}
.m03-stack{margin-top:6px;display:flex;flex-direction:column;gap:7px}

/* ---- the "photo": under-sink cabinet view ---- */
.m03-photo{
  position:relative;height:80px;border-radius:11px;overflow:hidden;
  background:linear-gradient(160deg,#26303f 0%,#1a2230 50%,#10151f 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.m03-svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* cabinet interior surfaces (lighter wood tone so it reads as a real cabinet) */
.m03-cabwall{fill:#3a3026}
.m03-cabback{fill:#2c2620}
.m03-cabfloor{fill:#241d16}
/* chrome P-trap + supply lines */
.m03-trap{stroke:#aeb6c2;stroke-width:8;fill:none;stroke-linecap:round}
.m03-trapH{stroke:#7f8794;stroke-width:8;fill:none;stroke-linecap:round}
.m03-supply{stroke:#9aa3b0;stroke-width:4;fill:none;stroke-linecap:round}
.m03-nut{fill:#cbd2dc}
.m03-nut2{fill:#90b0d8}

/* the puddle: soft blue wet sheen pooling at the bottom */
.m03-puddle{opacity:.0;transform-origin:center bottom}
.m03-root.play .m03-puddle{animation:m03-pool 1s ease-out .25s forwards}
/* drips falling into the puddle: a slow finite few cycles, not forever */
.m03-drip{fill:#7fc3ff;opacity:0}
.m03-root.play .m03-drip{animation:m03-drip 1.6s ease-in .9s 3}
.m03-root.play .m03-drip.d2{animation-delay:1.5s}
/* ambient: one subtle puddle shimmer is the resting idle loop */
.m03-sheen{opacity:.0}
.m03-root.play .m03-sheen{animation:m03-pool 1s ease-out .25s forwards}
.m03-sheen2{transform-origin:center;animation:m03-shimmer 3.4s ease-in-out infinite}

/* scan grid overlay */
.m03-grid{
  position:absolute;inset:0;opacity:0;
  background-image:
    linear-gradient(rgba(106,158,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(106,158,255,.16) 1px,transparent 1px);
  background-size:18px 18px;
}
.m03-root.play .m03-grid{animation:m03-gridin .5s ease .15s forwards}

/* sweeping scan line: animated via transform:translateY, not top */
.m03-scan{
  position:absolute;left:0;right:0;height:32px;top:0;opacity:0;
  transform:translateY(-32px);
  background:linear-gradient(180deg,rgba(72,226,217,0) 0%,rgba(72,226,217,.28) 55%,rgba(106,158,255,.55) 92%,rgba(255,255,255,.85) 100%);
  box-shadow:0 0 16px 2px rgba(72,226,217,.45);
}
.m03-root.play .m03-scan{animation:m03-sweep 1.05s cubic-bezier(.45,.05,.3,1) .2s forwards}

/* ONE corner-bracket detection box, anchored over the puddle.
   Puddle ellipse is cx=178/360 (~49.4%), rx=94 (~26%); the 122px box is
   centered on the puddle via translateX(-50%) so it tracks if width shifts. */
.m03-det{
  position:absolute;width:122px;height:28px;left:49.4%;top:60%;opacity:0;
  transform:translateX(-50%) scale(.7);transform-origin:center;
}
.m03-root.play .m03-det{animation:m03-detin .4s cubic-bezier(.34,1.56,.64,1) 1.1s forwards,m03-blink 1.1s ease-in-out 1.5s 2}
.m03-cn{position:absolute;width:11px;height:11px;border:2px solid #48e2d9;filter:drop-shadow(0 0 3px rgba(72,226,217,.7))}
.m03-cn.tl{left:0;top:0;border-right:0;border-bottom:0}
.m03-cn.tr{right:0;top:0;border-left:0;border-bottom:0}
.m03-cn.bl{left:0;bottom:0;border-right:0;border-top:0}
.m03-cn.br{right:0;bottom:0;border-left:0;border-top:0}
/* tiny detection label on the box */
.m03-tag{
  position:absolute;left:0;top:-15px;font-size:8.5px;font-weight:700;letter-spacing:.04em;
  color:#06281f;background:#48e2d9;padding:1px 5px;border-radius:4px;white-space:nowrap;
  box-shadow:0 1px 4px rgba(72,226,217,.5);
}

/* ---- header status flip: Analyzing -> Triaged ---- */
.m03-status{position:relative;display:inline-flex;align-items:center;min-width:74px;height:13px;vertical-align:middle}
.m03-sa,.m03-st{position:absolute;left:0;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.m03-sa i{width:6px;height:6px;border-radius:50%;background:#48e2d9;animation:m03-beat 1.4s ease-in-out infinite}
.m03-st{opacity:0}
.m03-st i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.m03-root.play .m03-sa{animation:m03-fadeout .3s ease 1.35s forwards}
.m03-root.play .m03-st{animation:m03-fadein .35s ease 1.45s forwards}

/* ---- triage card ---- */
.m03-card{
  border:1px solid var(--line);border-radius:11px;padding:9px 11px;
  background:#fff;opacity:0;transform:translateY(10px) scale(.97);
  box-shadow:0 6px 18px -10px rgba(15,23,42,.22);
}
.m03-root.play .m03-card{animation:m03-stamp .5s cubic-bezier(.34,1.4,.5,1) 1.7s forwards}
.m03-crow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.m03-issue{font-weight:650;letter-spacing:-.01em;font-size:13px}
.m03-sev{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  color:#fff;background:linear-gradient(135deg,#ef4444,#f97316);
  padding:3px 9px;border-radius:999px;
  animation:m03-pulse 2.4s ease-in-out 2.1s 3;
}
.m03-sev::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9}
.m03-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.m03-chip{
  border:1px solid var(--line);border-radius:8px;padding:5px 8px;
  background:#f8fafc;opacity:0;transform:translateY(6px);
}
.m03-root.play .m03-chip{animation:m03-chipin .4s ease forwards}
.m03-root.play .m03-chip.c1{animation-delay:1.95s}
.m03-root.play .m03-chip.c2{animation-delay:2.06s}
.m03-root.play .m03-chip.c3{animation-delay:2.17s}
.m03-root.play .m03-chip.c4{animation-delay:2.28s}
.m03-k{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700}
.m03-v{font-size:12px;font-weight:650;margin-top:1px;color:var(--ink);display:flex;align-items:center;gap:4px;flex-wrap:nowrap;min-width:0}
.m03-v b{font-weight:650}
.m03-vendor{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.m03-match{font-size:7.5px;font-weight:700;color:var(--ok);background:rgba(16,185,129,.12);padding:1px 3px;border-radius:4px;flex:0 0 auto}

/* Dispatch pill pops at the end (propose, you approve) */
.m03-dispatch{
  margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11.5px;font-weight:700;color:#fff;
  background:var(--g);background-size:160% 100%;
  padding:5px 12px;border-radius:999px;
  opacity:0;transform:translateY(6px) scale(.96);
  box-shadow:0 6px 16px -6px rgba(106,158,255,.55);
}
.m03-root.play .m03-dispatch{animation:m03-pop .5s cubic-bezier(.34,1.6,.5,1) 2.45s forwards,m03-shift 5s ease-in-out 3s infinite}
.m03-dispatch svg{width:13px;height:13px}

@keyframes m03-gridin{to{opacity:1}}
@keyframes m03-sweep{
  0%{opacity:0;transform:translateY(-32px)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(80px)}
}
@keyframes m03-pool{to{opacity:1}}
@keyframes m03-shimmer{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes m03-drip{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}70%{opacity:.7;transform:translateY(13px)}80%{opacity:0;transform:translateY(14px)}100%{opacity:0}}
@keyframes m03-detin{from{opacity:0;transform:translateX(-50%) scale(.7)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes m03-blink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes m03-stamp{0%{opacity:0;transform:translateY(10px) scale(.97)}60%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes m03-chipin{to{opacity:1;transform:translateY(0)}}
@keyframes m03-pop{0%{opacity:0;transform:translateY(6px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes m03-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes m03-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.28)}50%{box-shadow:0 0 0 4px rgba(239,68,68,0)}}
@keyframes m03-beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
@keyframes m03-fadeout{to{opacity:0;transform:translateY(-4px)}}
@keyframes m03-fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .m03-root *{animation:none!important}
  .m03-grid,.m03-card,.m03-chip,.m03-dispatch,.m03-puddle,.m03-sheen{opacity:1!important;transform:none!important}
  .m03-det{opacity:1!important;transform:translateX(-50%)!important}
  .m03-sa{opacity:0!important}.m03-st{opacity:1!important}
}

/* ===== m04 ===== */
.m04-root{position:relative;font-size:12px;color:var(--ink)}

/* top strip: listing chip + posting pill */
.m04-strip{display:flex;align-items:center;justify-content:space-between;margin-top:6px;margin-bottom:5px}
.m04-listing{display:flex;align-items:center;gap:5px;padding:3px 8px;border-radius:8px;background:#fff;border:1px solid var(--line);font-size:9px;font-weight:700;color:var(--sub)}
.m04-listing svg{width:11px;height:11px;color:#6A9EFF}
.m04-posting{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#6A9EFF;padding:3px 8px;border-radius:999px;background:rgba(106,158,255,.10)}
.m04-pdot{width:6px;height:6px;border-radius:50%;background:#6A9EFF;animation:m04-pulse 1.4s ease-in-out infinite}

/* checklist */
.m04-list{display:flex;flex-direction:column;gap:3px}
.m04-row{display:flex;align-items:center;gap:7px;padding:2px 8px;border-radius:8px;background:#fff;border:1px solid var(--line)}

/* network glyph badge */
.m04-badge{width:16px;height:16px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;flex:0 0 auto;will-change:transform}
.m04-b-zil{background:#1f6fff}
.m04-b-apt{background:#0a8a6a}
.m04-b-rea{background:#d2402b}
.m04-b-fb{background:#1877f2}
.m04-b-cl{background:#5a2d8f}
.m04-b-more{background:var(--g);font-size:8px}

.m04-nm{font-size:10px;font-weight:700;color:var(--ink);white-space:nowrap;flex:1 1 auto}
.m04-row.m04-r6 .m04-nm{color:var(--sub);font-weight:600}

/* right-side status: a dim dot, then the broadcast wave swaps it to a check */
.m04-status{flex:0 0 auto;width:15px;height:15px;position:relative}
.m04-dot{position:absolute;inset:3px;border-radius:50%;border:1.6px solid var(--line);opacity:1}
.m04-check{position:absolute;inset:0;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4)}
.m04-check svg{width:9px;height:9px;color:#fff}

/* ONE broadcast wave travels down the column.
   The badge gets a brief outward ripple as the wave passes,
   then the dim dot fades and the green check pops. Keyed per row by delay. */
.m04-root.play .m04-badge{animation:m04-ripple .5s ease forwards}
.m04-root.play .m04-dot{animation:m04-dotout .25s ease forwards}
.m04-root.play .m04-check{animation:m04-pop .4s cubic-bezier(.34,1.56,.64,1) forwards}

.m04-root.play .m04-r1 .m04-badge{animation-delay:.30s}
.m04-root.play .m04-r2 .m04-badge{animation-delay:.60s}
.m04-root.play .m04-r3 .m04-badge{animation-delay:.90s}
.m04-root.play .m04-r4 .m04-badge{animation-delay:1.20s}
.m04-root.play .m04-r5 .m04-badge{animation-delay:1.50s}
.m04-root.play .m04-r6 .m04-badge{animation-delay:1.80s}

.m04-root.play .m04-r1 .m04-dot{animation-delay:.42s}
.m04-root.play .m04-r2 .m04-dot{animation-delay:.72s}
.m04-root.play .m04-r3 .m04-dot{animation-delay:1.02s}
.m04-root.play .m04-r4 .m04-dot{animation-delay:1.32s}
.m04-root.play .m04-r5 .m04-dot{animation-delay:1.62s}
.m04-root.play .m04-r6 .m04-dot{animation-delay:1.92s}

.m04-root.play .m04-r1 .m04-check{animation-delay:.46s}
.m04-root.play .m04-r2 .m04-check{animation-delay:.76s}
.m04-root.play .m04-r3 .m04-check{animation-delay:1.06s}
.m04-root.play .m04-r4 .m04-check{animation-delay:1.36s}
.m04-root.play .m04-r5 .m04-check{animation-delay:1.66s}
.m04-root.play .m04-r6 .m04-check{animation-delay:1.96s}

/* payoff beat: once the wave clears the column, every badge flashes once together */
.m04-root.play .m04-badge{animation:m04-ripple .5s ease forwards, m04-flash .5s ease 2.30s}

/* footer */
.m04-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.m04-posted{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--sub)}
.m04-posted b{font-size:13px;color:var(--ink);font-weight:800}
.m04-eye{width:12px;height:12px;color:var(--mut)}
.m04-views{font-size:9px;color:var(--mut);margin-left:2px}
.m04-live{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ok);padding:3px 8px;border-radius:999px;background:rgba(16,185,129,.10)}
/* the Broadcasting pill gives the final payoff pulse, then settles to a soft idle blip */
.m04-blip{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:m04-blink 1.6s ease-in-out infinite}
.m04-root.play .m04-live{animation:m04-pillpop .5s ease 2.35s}

@keyframes m04-ripple{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes m04-flash{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes m04-dotout{to{opacity:0}}
@keyframes m04-pop{0%{opacity:0;transform:scale(.4)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes m04-pillpop{0%,100%{transform:scale(1)}45%{transform:scale(1.06)}}
@keyframes m04-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes m04-blink{0%,100%{opacity:1}50%{opacity:.25}}

@media (prefers-reduced-motion:reduce){
  .m04-root *{animation:none!important}
  .m04-badge{transform:none}
  .m04-dot{opacity:0}
  .m04-check{opacity:1;transform:scale(1)}
}

/* ===== m05 ===== */
/* m05 - Messaging: a reply being written, then approved & sent */
.m05-root{display:flex;flex-direction:column;gap:9px;padding-top:4px;font-size:12px}

/* incoming tenant bubble */
.m05-in{align-self:flex-start;max-width:78%;background:#f1f5f9;color:var(--ink);
  border-radius:13px 13px 13px 4px;padding:8px 11px;line-height:1.35;
  opacity:0;transform:translateY(6px) scale(.96);transform-origin:left bottom}
.m05-in .m05-who{font-size:9.5px;font-weight:700;color:var(--sub);letter-spacing:.02em;margin-bottom:2px}

/* AI reply bubble - send-whoosh nudges the whole bubble on approve */
.m05-ai{align-self:flex-end;max-width:84%;position:relative;
  border-radius:13px 13px 4px 13px;padding:10px 12px 11px;line-height:1.4;color:#fff;
  background:var(--g);box-shadow:0 6px 16px -8px rgba(106,158,255,.6);
  opacity:0;transform:translateY(6px) scale(.96);transform-origin:right bottom}
.m05-ai .m05-who{font-size:9.5px;font-weight:700;opacity:.92;margin-bottom:4px;
  display:flex;align-items:center;gap:5px}
.m05-spark{width:9px;height:9px;flex:none}

/* fixed-height body: dots and revealed text occupy the SAME box, cross-fade, no reflow */
.m05-body{position:relative;min-height:34px}
.m05-dots{position:absolute;inset:0;display:flex;gap:4px;align-items:center;
  height:13px;opacity:0;transform:scale(.9);transform-origin:left center}
.m05-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.9)}

/* the reveal text: two lines, each wiped left->right in sequence */
.m05-type{display:block;opacity:0}
.m05-line{display:block;position:relative;white-space:nowrap;overflow:hidden;
  clip-path:inset(0 100% 0 0)}
.m05-l2{margin-top:1px}
.m05-caret{display:inline-block;width:1.5px;height:12px;margin-left:1px;
  background:#fff;vertical-align:-2px;border-radius:1px;opacity:0;
  transform-origin:center}

/* thin meta line under the body for breathing room */
.m05-meta{margin-top:7px;font-size:8.5px;font-weight:600;opacity:.82;
  display:flex;align-items:center;gap:5px;letter-spacing:.02em}
.m05-meta .m05-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.7)}

/* read receipt + approve row */
.m05-foot{align-self:flex-end;display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(4px)}
.m05-rr{display:flex;align-items:center;gap:4px;font-size:9.5px;color:var(--ok);font-weight:600}
.m05-rr svg{width:15px;height:9px}
.m05-rr .m05-ck{stroke-dasharray:22;stroke-dashoffset:22}
.m05-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;
  color:#fff;background:var(--g);border-radius:999px;padding:4px 10px;
  box-shadow:0 4px 12px -5px rgba(106,158,255,.7)}
.m05-chip svg{width:11px;height:11px}

/* ===== PLAY sequence ===== */
.m05-root.play .m05-in{animation:m05-pop .45s cubic-bezier(.2,.8,.25,1) .15s forwards}
.m05-root.play .m05-ai{animation:m05-pop .45s cubic-bezier(.2,.8,.25,1) .75s forwards}
/* dots fade+scale in, then fade+scale out (no height jump) */
.m05-root.play .m05-dots{animation:m05-dotsin .25s ease .95s forwards,m05-dotsout .22s ease 1.82s forwards}
.m05-root.play .m05-dots i{animation:m05-bounce .9s ease-in-out 1s infinite}
/* text cross-fades in as dots leave; each line wipes after the previous */
.m05-root.play .m05-type{animation:m05-textin .25s ease 1.84s forwards}
.m05-root.play .m05-l1{animation:m05-wipe .62s steps(48) 1.9s forwards}
.m05-root.play .m05-l2{animation:m05-wipe .5s steps(38) 2.5s forwards}
/* caret rides the wipe, then fades+scales away (no width/height collapse) */
.m05-root.play .m05-caret{animation:m05-caretin .01s linear 1.9s forwards,
  m05-blink 1s steps(1) 1.9s 2,m05-caretgone .25s ease 3.0s forwards}
.m05-root.play .m05-foot{animation:m05-pop .4s cubic-bezier(.2,.8,.25,1) 3.15s forwards}
.m05-root.play .m05-rr .m05-ck{animation:m05-draw .4s ease 3.45s forwards}
/* send-whoosh: the bubble nudges right and lifts as the message is sent */
.m05-root.play .m05-ai{animation:m05-pop .45s cubic-bezier(.2,.8,.25,1) .75s forwards,
  m05-whoosh .55s cubic-bezier(.4,0,.2,1) 3.55s}

@keyframes m05-pop{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes m05-dotsin{to{opacity:1;transform:scale(1)}}
@keyframes m05-dotsout{to{opacity:0;transform:scale(.85)}}
@keyframes m05-bounce{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(-3px);opacity:1}}
@keyframes m05-textin{to{opacity:1}}
@keyframes m05-wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes m05-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes m05-caretin{to{opacity:1}}
@keyframes m05-caretgone{to{opacity:0;transform:scale(.6)}}
@keyframes m05-draw{to{stroke-dashoffset:0}}
/* distinctive whoosh, NOT a sheen: translate + lift + settle */
@keyframes m05-whoosh{0%{transform:translate(0,0) scale(1)}
  45%{transform:translate(7px,-3px) scale(1.015)}
  100%{transform:translate(0,0) scale(1)}}

/* ===== AMBIENT idle ===== */
.m05-live{position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:m05-ping 2.4s ease-out infinite}
@keyframes m05-ping{0%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}70%,100%{box-shadow:0 0 0 7px rgba(16,185,129,0)}}
/* idle caret blink keeps the frame alive between replays */
.m05-idlecaret{display:inline-block;width:1.5px;height:11px;margin-left:2px;vertical-align:-1px;
  background:var(--mut);border-radius:1px;animation:m05-blink 1.05s steps(1) infinite}

/* ===== m06 ===== */
.m06-root{position:relative;font-size:12px;color:var(--ink)}
.m06-doc{position:relative;margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:14px 14px 12px;background:#fff;overflow:hidden}
/* ambient highlight sweep across the page */
.m06-doc::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(140,108,255,.10),rgba(72,226,217,.08),transparent);
  pointer-events:none;animation:m06-sweep 4.2s linear infinite}
@keyframes m06-sweep{0%{transform:translateX(0)}100%{transform:translateX(360%)}}

/* document title block */
.m06-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.m06-seal{width:22px;height:22px;border-radius:6px;background:var(--g);flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px}
.m06-htxt{font-weight:700;font-size:12px;letter-spacing:.01em}
.m06-hsub{font-size:9.5px;color:var(--mut);margin-top:1px}

/* text lines that fill left to right */
.m06-line{height:6px;border-radius:4px;background:#eef2f8;margin:7px 0;position:relative;overflow:hidden}
.m06-line::before{content:"";position:absolute;inset:0;border-radius:4px;
  background:linear-gradient(90deg,#cbd5e1,#e2e8f0);transform:scaleX(0);transform-origin:left}
.m06-line.s2{width:88%}.m06-line.s3{width:72%}
.m06-root.play .m06-line::before{animation:m06-fill .4s cubic-bezier(.4,0,.2,1) forwards}
.m06-root.play .m06-l1::before{animation-delay:.08s}
.m06-root.play .m06-l2::before{animation-delay:.18s}
.m06-root.play .m06-l3::before{animation-delay:.28s}
@keyframes m06-fill{to{transform:scaleX(1)}}

/* compliance rows: a single sweeping pass lights each row green */
.m06-checks{margin:10px 0 4px;display:flex;flex-direction:column;gap:5px}
.m06-chk{position:relative;display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--sub);
  padding:3px 7px;border-radius:6px;background:transparent;overflow:hidden}
/* green row fill grows from the left as the pass reaches it */
.m06-chk::before{content:"";position:absolute;inset:0;border-radius:6px;
  background:rgba(16,185,129,.10);transform:scaleX(0);transform-origin:left}
.m06-chk>*{position:relative}
.m06-box{width:15px;height:15px;border-radius:5px;border:1.5px solid var(--line);flex:none;
  display:flex;align-items:center;justify-content:center;background:#fff}
.m06-box svg{width:9px;height:9px}
.m06-box path{stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:14;stroke-dashoffset:14}
/* one continuous compliance pass: rows fill, boxes flip green, checks draw, in sequence */
.m06-root.play .m06-chk::before{animation:m06-rowfill .3s ease forwards}
.m06-root.play .m06-chk .m06-box{animation:m06-flip .25s ease forwards}
.m06-root.play .m06-chk .m06-box path{animation:m06-draw .22s ease forwards}
.m06-root.play .m06-c1::before{animation-delay:.5s}
.m06-root.play .m06-c1 .m06-box{animation-delay:.56s}.m06-root.play .m06-c1 .m06-box path{animation-delay:.64s}
.m06-root.play .m06-c2::before{animation-delay:.66s}
.m06-root.play .m06-c2 .m06-box{animation-delay:.72s}.m06-root.play .m06-c2 .m06-box path{animation-delay:.80s}
.m06-root.play .m06-c3::before{animation-delay:.82s}
.m06-root.play .m06-c3 .m06-box{animation-delay:.88s}.m06-root.play .m06-c3 .m06-box path{animation-delay:.96s}
@keyframes m06-rowfill{to{transform:scaleX(1)}}
@keyframes m06-flip{from{transform:scale(.7)}to{transform:scale(1);background:var(--ok);border-color:var(--ok)}}
@keyframes m06-draw{to{stroke-dashoffset:0}}

/* signature line + drawn path, tied to a name */
.m06-sig{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px;position:relative}
.m06-sig svg{display:block;width:130px;height:30px}
.m06-sig path{fill:none;stroke:url(#m06-grad);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:300;stroke-dashoffset:300}
.m06-root.play .m06-sig path{animation:m06-sign 1.2s cubic-bezier(.65,0,.35,1) forwards;animation-delay:1.05s}
@keyframes m06-sign{to{stroke-dashoffset:0}}
.m06-signame{font-size:11px;font-weight:600;color:var(--ink);margin-top:-2px;opacity:0}
.m06-root.play .m06-signame{animation:m06-namein .3s ease forwards;animation-delay:2.0s}
@keyframes m06-namein{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
.m06-sigcap{font-size:8.5px;color:var(--mut);letter-spacing:.04em;text-transform:uppercase;margin-top:1px}

/* approved stamp (non-clipped: smaller entry scale so frames are not cut) */
.m06-stamp{position:absolute;right:6px;top:2px;width:74px;height:74px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ok);font-weight:800;font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  border:2.5px solid var(--ok);transform:rotate(-14deg) scale(1.8);opacity:0;
  background:rgba(16,185,129,.06)}
.m06-stamp small{display:block;text-align:center;line-height:1.15}
.m06-root.play .m06-stamp{animation:m06-slam .4s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:2.0s}
@keyframes m06-slam{0%{transform:rotate(-14deg) scale(1.8);opacity:0}
  55%{opacity:1}100%{transform:rotate(-14deg) scale(1);opacity:1}}
/* ink splash flecks that scatter on stamp impact */
.m06-splash{position:absolute;right:43px;top:39px;width:0;height:0;pointer-events:none}
.m06-splash i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--ok);
  opacity:0;transform:translate(0,0) scale(.3)}
.m06-splash i:nth-child(1){--tx:-22px;--ty:-16px;width:5px;height:5px}
.m06-splash i:nth-child(2){--tx:20px;--ty:-12px}
.m06-splash i:nth-child(3){--tx:-16px;--ty:18px;width:3px;height:3px}
.m06-splash i:nth-child(4){--tx:24px;--ty:14px;width:3px;height:3px}
.m06-splash i:nth-child(5){--tx:2px;--ty:-24px;width:3px;height:3px}
.m06-root.play .m06-splash i{animation:m06-fleck .5s ease-out forwards;animation-delay:2.18s}
@keyframes m06-fleck{0%{opacity:.85;transform:translate(0,0) scale(.3)}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(1)}}

/* footer chip */
.m06-foot{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:9.5px;color:var(--sub)}
.m06-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);
  animation:m06-pulse 1.8s ease-in-out infinite}
@keyframes m06-pulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* ===== m07 ===== */
.m07-root{position:relative;font-size:12px;color:var(--ink)}
.m07-body{position:relative;margin-top:12px;min-height:172px}

/* invoice card */
.m07-inv{
  position:relative;border:1px solid var(--line);border-radius:12px;
  background:#fff;padding:11px 12px 10px;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  opacity:0;transform:translateX(26px) rotate(1.5deg);
  overflow:hidden;
}
.m07-root.play .m07-inv{animation:m07-slidein .55s cubic-bezier(.2,.7,.25,1) .05s forwards}
@keyframes m07-slidein{
  0%{opacity:0;transform:translateX(26px) rotate(1.5deg)}
  70%{opacity:1;transform:translateX(-3px) rotate(-.4deg)}
  100%{opacity:1;transform:translateX(0) rotate(0)}
}

.m07-invhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.m07-vend{display:flex;align-items:center;gap:7px;font-weight:700;font-size:11.5px;color:var(--ink)}
.m07-vdot{width:18px;height:18px;border-radius:6px;background:var(--g);flex:none;
  display:grid;place-items:center;color:#fff;font-size:9px;font-weight:800}
.m07-inum{font-size:9.5px;color:var(--mut);font-weight:600;letter-spacing:.02em}

/* line items */
.m07-li{display:flex;align-items:center;justify-content:space-between;
  padding:4.5px 0;border-top:1px dashed var(--line);font-size:11px}
.m07-li:first-of-type{border-top:0}
.m07-li span{color:var(--sub)}
.m07-li b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.m07-li.m07-flagrow b{color:var(--bad)}

/* scan line sweeping the items */
.m07-scan{
  position:absolute;left:0;right:0;top:0;height:34px;pointer-events:none;
  background:linear-gradient(180deg,rgba(106,158,255,0) 0%,rgba(106,158,255,.16) 48%,rgba(72,226,217,.14) 60%,rgba(106,158,255,0) 100%);
  border-bottom:1.5px solid rgba(106,158,255,.55);
  transform:translateY(8px);opacity:.5;
  animation:m07-idle 3.4s ease-in-out infinite;
}
.m07-root.play .m07-scan{animation:m07-sweep 1.15s cubic-bezier(.5,0,.3,1) .55s 1,m07-idle 3.4s ease-in-out 2s infinite}
@keyframes m07-sweep{
  0%{transform:translateY(6px);opacity:.85}
  100%{transform:translateY(118px);opacity:.2}
}
@keyframes m07-idle{
  0%,100%{transform:translateY(40px);opacity:.32}
  50%{transform:translateY(58px);opacity:.55}
}

/* markup flag */
.m07-flag{
  position:absolute;right:9px;top:64px;z-index:3;
  display:flex;align-items:center;gap:5px;
  background:#fff;border:1px solid rgba(239,68,68,.45);
  color:var(--bad);font-weight:700;font-size:10px;
  padding:4px 8px;border-radius:999px;
  box-shadow:0 6px 16px rgba(239,68,68,.18);
  transform:scale(.4) translateX(0) translateY(4px);opacity:0;
}
.m07-flag svg{width:11px;height:11px;flex:none}
.m07-root.play .m07-flag{animation:m07-pop .5s cubic-bezier(.2,1.5,.4,1) 1.55s forwards,m07-shake .42s ease 2.05s 1}
@keyframes m07-pop{
  0%{transform:scale(.4) translateX(0) translateY(4px);opacity:0}
  100%{transform:scale(1) translateX(0) translateY(0);opacity:1}
}
@keyframes m07-shake{
  0%,100%{transform:scale(1) translateX(0)}
  20%{transform:scale(1) translateX(4px)}
  45%{transform:scale(1) translateX(-3px)}
  70%{transform:scale(1) translateX(2px)}
  85%{transform:scale(1) translateX(-1px)}
}

/* footer actions */
.m07-foot{display:flex;align-items:center;gap:8px;margin-top:11px}
.m07-approve{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--g);color:#fff;font-weight:700;font-size:11px;
  padding:7px 13px;border-radius:9px;
  box-shadow:0 6px 14px rgba(106,158,255,.28);
  transform:scale(.92);opacity:0;
}
.m07-approve svg{width:12px;height:12px}
.m07-root.play .m07-approve{animation:m07-rise .45s cubic-bezier(.2,.9,.3,1) 2.5s forwards,m07-press .4s ease 3.05s 1}
@keyframes m07-rise{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes m07-press{0%,100%{transform:scale(1)}45%{transform:scale(.93)}}

/* total: submitted amount, struck, corrected drop */
.m07-tot{margin-left:auto;font-size:10px;color:var(--sub);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.m07-was{
  font-variant-numeric:tabular-nums;color:var(--mut);font-weight:600;
  position:relative;opacity:0;
}
.m07-was::after{
  content:"";position:absolute;left:-1px;right:-1px;top:50%;height:1.5px;
  background:var(--bad);transform:scaleX(0);transform-origin:left center;
}
.m07-root.play .m07-was{animation:m07-wasin .01s linear 1.9s forwards}
.m07-root.play .m07-was::after{animation:m07-strike .42s cubic-bezier(.5,0,.3,1) 2.15s forwards}
@keyframes m07-wasin{to{opacity:.85}}
@keyframes m07-strike{to{transform:scaleX(1)}}
.m07-now{
  font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700;
  opacity:0;transform:translateY(4px);
}
.m07-root.play .m07-now{animation:m07-nowin .4s cubic-bezier(.2,.9,.3,1) 2.45s forwards}
@keyframes m07-nowin{to{opacity:1;transform:translateY(0)}}

/* ACH payout chip: starts AT the Approve button, flies to vendor */
.m07-ach{
  position:absolute;left:12px;bottom:9px;z-index:4;
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--line);
  color:var(--ink);font-weight:700;font-size:10px;
  padding:5px 9px;border-radius:999px;
  box-shadow:0 8px 20px rgba(15,23,42,.12);
  opacity:0;transform:translate(0,0) scale(.78);transform-origin:left center;
}
.m07-ach .m07-pdot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:m07-blip 1.6s ease-out infinite}
.m07-root.play .m07-ach{animation:m07-fly 1.25s cubic-bezier(.3,.2,.2,1) 3.2s forwards}
@keyframes m07-fly{
  0%{opacity:0;transform:translate(0,0) scale(.78)}
  16%{opacity:1;transform:translate(2px,-2px) scale(1)}
  70%{opacity:1;transform:translate(150px,-92px) scale(.94)}
  100%{opacity:0;transform:translate(196px,-122px) scale(.82)}
}
@keyframes m07-blip{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}
  70%,100%{box-shadow:0 0 0 6px rgba(16,185,129,0)}
}

/* ambient caret */
.m07-caret{display:inline-block;width:2px;height:10px;background:var(--mut);
  margin-left:1px;vertical-align:-1px;animation:m07-blink 1.1s steps(1) infinite}
@keyframes m07-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .m07-root *{animation:none!important}
  .m07-inv,.m07-flag,.m07-approve,.m07-ach,.m07-was,.m07-now{opacity:1!important;transform:none!important}
  .m07-was::after{transform:scaleX(1)!important}
}

/* ===== m08 ===== */
.m08-root{position:relative;font-size:12px;color:var(--ink)}
.m08-kpis{display:flex;gap:8px;margin:10px 0 8px}
.m08-kpi{flex:1;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;position:relative;overflow:hidden}
.m08-kpi .m08-lab{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700}
.m08-kpi .m08-val{font-size:18px;font-weight:800;line-height:1.1;margin-top:2px;color:var(--ink)}
.m08-kpi .m08-val b{font-weight:800}
.m08-kpi .m08-delta{font-size:9px;font-weight:700;color:var(--ok);display:inline-flex;align-items:center;gap:2px;margin-top:1px;opacity:0;transform:translateY(4px)}
.m08-root.play .m08-kpi:nth-child(1) .m08-delta{animation:m08-fade .5s ease 2s forwards}
.m08-root.play .m08-kpi:nth-child(2) .m08-delta{animation:m08-fade .5s ease 2.1s forwards}

.m08-chart{position:relative;height:116px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#fff,#fbfcfe);padding:8px 10px 0;overflow:hidden}
.m08-grid{position:absolute;left:10px;right:10px;top:10px;bottom:24px}
.m08-grid i{position:absolute;left:0;right:0;height:1px;background:var(--line);opacity:.55}
.m08-grid i:nth-child(1){top:0}
.m08-grid i:nth-child(2){top:33%}
.m08-grid i:nth-child(3){top:66%}
.m08-grid i:nth-child(4){top:100%}

.m08-bars{position:absolute;left:14px;right:14px;bottom:24px;top:14px;display:flex;align-items:flex-end;justify-content:space-between;z-index:2}
.m08-col{width:14%;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.m08-bar{width:100%;border-radius:5px 5px 2px 2px;background:var(--g);transform:scaleY(0);transform-origin:bottom;will-change:transform}
.m08-bar.b1{height:46%}
.m08-bar.b2{height:62%}
.m08-bar.b3{height:54%}
.m08-bar.b4{height:78%}
.m08-bar.b5{height:88%}
.m08-cap{font-size:8px;color:var(--mut);font-weight:700;margin-top:3px;letter-spacing:.04em}
.m08-root.play .m08-bar.b1{animation:m08-grow .55s cubic-bezier(.34,1.4,.5,1) .15s forwards}
.m08-root.play .m08-bar.b2{animation:m08-grow .55s cubic-bezier(.34,1.4,.5,1) .27s forwards}
.m08-root.play .m08-bar.b3{animation:m08-grow .55s cubic-bezier(.34,1.4,.5,1) .39s forwards}
.m08-root.play .m08-bar.b4{animation:m08-grow .55s cubic-bezier(.34,1.4,.5,1) .51s forwards}
.m08-root.play .m08-bar.b5{animation:m08-grow .55s cubic-bezier(.34,1.4,.5,1) .63s forwards}

.m08-spark{position:absolute;left:14px;right:14px;top:14px;bottom:24px;z-index:3;pointer-events:none;overflow:visible}
.m08-line{fill:none;stroke:url(#m08-sg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240}
.m08-root.play .m08-line{animation:m08-draw 1s ease .7s forwards}
.m08-dot{fill:#fff;stroke:url(#m08-sg);stroke-width:2;opacity:0;transform:scale(0);transform-origin:center;transform-box:fill-box}
.m08-root.play .m08-dot{animation:m08-pop .35s cubic-bezier(.34,1.5,.5,1) 1.55s forwards}

.m08-shine{position:absolute;top:0;bottom:0;width:42%;left:0;z-index:4;pointer-events:none;will-change:transform;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-130%);animation:m08-sweep 3.6s ease-in-out infinite}

.m08-foot{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:9px;color:var(--sub)}
.m08-pulse{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:m08-beat 2s ease-in-out infinite}

@keyframes m08-grow{to{transform:scaleY(1)}}
@keyframes m08-draw{to{stroke-dashoffset:0}}
@keyframes m08-pop{to{opacity:1;transform:scale(1)}}
@keyframes m08-fade{to{opacity:1;transform:translateY(0)}}
@keyframes m08-sweep{0%{transform:translateX(-130%)}55%{transform:translateX(290%)}100%{transform:translateX(290%)}}
@keyframes m08-beat{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}}
@media (prefers-reduced-motion:reduce){
  .m08-bar{transform:scaleY(1)!important;animation:none!important}
  .m08-line{stroke-dashoffset:0!important;animation:none!important}
  .m08-dot{opacity:1!important;transform:scale(1)!important;animation:none!important}
  .m08-delta{opacity:1!important;transform:none!important;animation:none!important}
  .m08-shine{animation:none!important;display:none}
  .m08-pulse{animation:none!important}
}

/* ===== m09 ===== */
.m09-root{position:relative;font-family:inherit}
.m09-sub{font-size:11px;color:var(--sub);margin:10px 2px 14px;display:flex;align-items:center;gap:6px}
.m09-sub b{color:var(--ink);font-weight:700}
.m09-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(16,185,129,.45);animation:m09-live 2.6s ease-in-out infinite}
@keyframes m09-live{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}}

/* timeline track */
.m09-track{position:relative;height:6px;border-radius:6px;background:var(--line);margin:6px 6px 0}
.m09-fill{position:absolute;inset:0;border-radius:6px;background:var(--g);transform:scaleX(0);transform-origin:left;will-change:transform}
.m09-root.play .m09-fill{animation:m09-fill 2.7s cubic-bezier(.45,.05,.2,1) forwards}
@keyframes m09-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* shimmer riding the fill edge. The spark SPANS the track (left:0;right:0) so its inner dot's
   translateX percentages read as a fraction of the TRACK width, letting us sync to the pin x-positions.
   The dot translates with transform only; stops 33%/61%/89% match the pin-light delays
   (.9s/1.65s/2.4s over 2.7s) at the 34%/62%/90% pin positions, each with a ripple-scale beat. */
.m09-spark{position:absolute;top:50%;left:0;right:0;height:11px;margin-top:-5.5px;pointer-events:none}
.m09-spark::before{content:"";position:absolute;top:0;left:-5.5px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.65) 38%,rgba(255,255,255,0) 70%);opacity:0;transform:translateX(0) scale(1);will-change:transform,opacity}
.m09-root.play .m09-spark::before{animation:m09-spark-move 2.7s cubic-bezier(.45,.05,.2,1) forwards}
@keyframes m09-spark-move{
  0%{transform:translateX(0) scale(.6);opacity:0}
  8%{opacity:1}
  /* passing pin A (34%) */
  31%{transform:translateX(32%) scale(1)}
  33%{transform:translateX(34%) scale(1.5)}
  36%{transform:translateX(36%) scale(1)}
  /* passing pin B (62%) */
  59%{transform:translateX(58%) scale(1)}
  61%{transform:translateX(62%) scale(1.5)}
  64%{transform:translateX(64%) scale(1)}
  /* passing pin C (90%) */
  87%{transform:translateX(86%) scale(1)}
  89%{transform:translateX(90%) scale(1.5)}
  92%{transform:translateX(92%) scale(1)}
  96%{opacity:1}
  100%{transform:translateX(100%) scale(.6);opacity:0}
}

/* markers */
.m09-marks{position:relative;height:46px;margin:0 6px}
.m09-mk{position:absolute;top:0;transform:translateX(-50%);text-align:center}
.m09-mk .pin{position:relative;width:13px;height:13px;border-radius:50%;margin:0 auto;background:#fff;border:2px solid var(--mut);transition:none}
.m09-mk .d{font-size:11px;font-weight:800;color:var(--mut);margin-top:6px;letter-spacing:-.2px}
.m09-mk .l{font-size:8.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px;margin-top:1px}
.m09-mk.a{left:34%}.m09-mk.b{left:62%}.m09-mk.c{left:90%}

.m09-root.play .m09-mk.a .pin{animation:m09-pin .5s ease forwards .9s}
.m09-root.play .m09-mk.b .pin{animation:m09-pin .5s ease forwards 1.65s}
.m09-root.play .m09-mk.c .pin{animation:m09-pin .5s ease forwards 2.4s}
@keyframes m09-pin{
  0%{border-color:var(--mut);transform:scale(1)}
  45%{transform:scale(1.55)}
  100%{border-color:#6A9EFF;background:#6A9EFF;box-shadow:0 0 0 4px rgba(106,158,255,.16);transform:scale(1)}
}

/* ripple emitted by each pin as the spark passes (synced to the spark beats) */
.m09-mk .pin::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(106,158,255,.55);opacity:0;transform:scale(.6)}
.m09-root.play .m09-mk.a .pin::before{animation:m09-ripple .55s ease-out forwards .9s}
.m09-root.play .m09-mk.b .pin::before{animation:m09-ripple .55s ease-out forwards 1.65s}
.m09-root.play .m09-mk.c .pin::before{animation:m09-ripple .55s ease-out forwards 2.4s}
@keyframes m09-ripple{0%{opacity:.6;transform:scale(.6)}100%{opacity:0;transform:scale(2.4)}}

.m09-root.play .m09-mk.a .d,.m09-root.play .m09-mk.a .l{animation:m09-txt .4s ease forwards .95s}
.m09-root.play .m09-mk.b .d,.m09-root.play .m09-mk.b .l{animation:m09-txt .4s ease forwards 1.7s}
.m09-root.play .m09-mk.c .d,.m09-root.play .m09-mk.c .l{animation:m09-txt .4s ease forwards 2.45s}
@keyframes m09-txt{to{color:var(--ink)}}

/* ambient: the last (active) marker keeps a soft pulse */
.m09-mk.c .pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(106,158,255,.5);opacity:0;animation:m09-pulse 2.4s ease-out infinite 3.4s}
@keyframes m09-pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}

/* renewal offer card */
.m09-offer{position:relative;margin:16px 6px 2px;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:linear-gradient(180deg,#fbfcfe,#fff);box-shadow:0 6px 16px -10px rgba(15,23,42,.25);display:flex;align-items:center;justify-content:space-between;opacity:0;transform:translateY(18px);will-change:transform,opacity}
.m09-root.play .m09-offer{animation:m09-rise .55s cubic-bezier(.2,.8,.25,1) forwards 2.85s}
@keyframes m09-rise{to{opacity:1;transform:translateY(0)}}
.m09-offer .lt{display:flex;flex-direction:column;gap:2px}
.m09-offer .cap{font-size:8.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);font-weight:700}
.m09-offer .price{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.6px;line-height:1}
.m09-offer .price small{font-size:10px;font-weight:600;color:var(--sub)}
.m09-chip{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;color:#0f7a52;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);padding:3px 8px;border-radius:999px}
.m09-chip svg{width:9px;height:9px}
.m09-cta{position:relative;font-size:10px;font-weight:700;color:#fff;background:var(--g);border-radius:8px;padding:6px 11px;white-space:nowrap;box-shadow:0 4px 10px -4px rgba(106,158,255,.6);transform:scale(1)}
/* final beat: a subtle scale + glow pop ~0.3s after the offer card finishes rising (rise ends ~3.4s) */
.m09-root.play .m09-cta{animation:m09-cta-pop .5s cubic-bezier(.2,.8,.25,1) forwards 3.7s}
@keyframes m09-cta-pop{
  0%{transform:scale(1);box-shadow:0 4px 10px -4px rgba(106,158,255,.6)}
  45%{transform:scale(1.08);box-shadow:0 6px 18px -3px rgba(106,158,255,.85)}
  100%{transform:scale(1);box-shadow:0 4px 12px -3px rgba(106,158,255,.7)}
}
.m09-rt{display:flex;flex-direction:column;align-items:flex-end;gap:6px}

/* ===== m10 ===== */
/* m10 - Document vault: real doc cards fly in + stack, then padlock clicks shut */
.m10-root{position:relative;padding-top:6px}
.m10-stack{position:relative;height:130px;margin:12px auto 0;width:188px}
/* settle wrapper fills the stack so it sizes the scale + anchors the absolute cards/lock */
.m10-settlewrap{position:absolute;inset:0;transform-origin:50% 60%}

/* document cards */
.m10-doc{position:absolute;left:0;top:0;width:188px;height:50px;border-radius:11px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 10px 22px -14px rgba(15,23,42,.5),0 2px 5px -2px rgba(15,23,42,.18);
  opacity:0;transform-origin:50% 50%;overflow:hidden}

/* file-type badge, colored by type */
.m10-doc .m10-badge{position:absolute;left:10px;top:10px;width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;font:800 8.5px/1 system-ui,sans-serif;
  letter-spacing:.3px;color:#fff}
.m10-badge.m10-pdf{background:linear-gradient(150deg,#f4584f,#dc2f2f)}
.m10-badge.m10-jpg{background:linear-gradient(150deg,#5b9bf5,#2f6fdc)}
.m10-badge.m10-doc2{background:linear-gradient(150deg,#8b7cf0,#5b53e0)}

/* filename + meta */
.m10-doc .m10-name{position:absolute;left:50px;top:11px;right:34px;font:700 11.5px/1.1 system-ui,sans-serif;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m10-doc .m10-meta{position:absolute;left:50px;top:28px;right:34px;display:flex;align-items:center;gap:5px;
  font:600 9.5px/1 system-ui,sans-serif;color:var(--mut);white-space:nowrap}
.m10-doc .m10-tdot{width:5px;height:5px;border-radius:50%;flex:0 0 auto}
.m10-tdot.m10-cpdf{background:#dc2f2f}.m10-tdot.m10-cjpg{background:#2f6fdc}

/* the gradient check on the top (landed) card */
.m10-doc .m10-chk{position:absolute;right:11px;top:17px;width:17px;height:17px;border-radius:50%;
  background:var(--g);display:flex;align-items:center;justify-content:center;opacity:0;
  box-shadow:0 2px 6px -1px rgba(106,158,255,.55)}
.m10-doc .m10-chk svg{width:10px;height:10px}

/* lower (peeking) cards read slightly muted so the top one is most prominent */
.m10-d4 .m10-name,.m10-d3 .m10-name{color:var(--sub)}
.m10-d4{opacity:0}.m10-d3{opacity:0}.m10-d2{opacity:0}.m10-d1{opacity:0}

/* depth-stacked landing offsets handled inside the fly keyframes */

/* play sequence: cards fly from edges and settle into an offset stack (compressed .12s stagger) */
.m10-root.play .m10-d4{animation:m10-fly-tl .54s cubic-bezier(.34,1.4,.5,1) .05s forwards}
.m10-root.play .m10-d3{animation:m10-fly-tr .54s cubic-bezier(.34,1.4,.5,1) .17s forwards}
.m10-root.play .m10-d2{animation:m10-fly-bl .54s cubic-bezier(.34,1.4,.5,1) .29s forwards}
.m10-root.play .m10-d1{animation:m10-fly-br .54s cubic-bezier(.34,1.4,.5,1) .41s forwards}
.m10-root.play .m10-d1 .m10-chk{animation:m10-pop .38s ease .92s forwards}

/* snap-together settle on the whole stack right before the lock clacks
   (on a dedicated wrapper so the ambient float stays free to loop) */
.m10-root.play .m10-settlewrap{animation:m10-settle .26s cubic-bezier(.34,1.3,.5,1) 1.12s both}
@keyframes m10-settle{0%{transform:scale(.98)}60%{transform:scale(1.012)}100%{transform:scale(1)}}

@keyframes m10-fly-tl{
  0%{opacity:0;transform:translate(-150px,-70px) rotate(-16deg) scale(.85)}
  70%{opacity:1}
  100%{opacity:1;transform:translate(0,75px) rotate(0) scale(1)}}
@keyframes m10-fly-tr{
  0%{opacity:0;transform:translate(160px,-64px) rotate(15deg) scale(.85)}
  70%{opacity:1}
  100%{opacity:1;transform:translate(0,50px) rotate(0) scale(1)}}
@keyframes m10-fly-bl{
  0%{opacity:0;transform:translate(-160px,86px) rotate(13deg) scale(.85)}
  70%{opacity:1}
  100%{opacity:1;transform:translate(0,25px) rotate(0) scale(1)}}
@keyframes m10-fly-br{
  0%{opacity:0;transform:translate(158px,92px) rotate(-14deg) scale(.85)}
  70%{opacity:1}
  100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes m10-pop{
  0%{opacity:0;transform:scale(.3)}
  60%{opacity:1;transform:scale(1.18)}
  100%{opacity:1;transform:scale(1)}}

/* padlock - sits over the stacked deck, clicks shut as the FINALE.
   Pulled fully inside the stack bounds so it never clips the card edge. */
.m10-lock{position:absolute;right:6px;bottom:4px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6)}
.m10-lock svg{width:40px;height:40px;overflow:visible}
.m10-shackle{transform-origin:50% 64%;transform:translateY(-9px)}
.m10-root.play .m10-lock{animation:m10-lock-in .4s cubic-bezier(.34,1.5,.5,1) 1.2s forwards}
.m10-root.play .m10-shackle{animation:m10-clack .4s cubic-bezier(.5,-0.4,.4,1.4) 1.9s forwards}
@keyframes m10-lock-in{0%{opacity:0;transform:scale(.6) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes m10-clack{
  0%{transform:translateY(-9px)}
  62%{transform:translateY(.5px)}
  80%{transform:translateY(-1.5px)}
  100%{transform:translateY(0)}}

/* status line */
.m10-status{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:11.5px;color:var(--sub)}
.m10-status .m10-sdot{width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:m10-beacon 2.4s ease-in-out infinite}
.m10-status b{color:var(--ink);font-weight:700}
@keyframes m10-beacon{
  0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}
  50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}}

/* AMBIENT: the locked stack gently floats (infinite idle loop) */
.m10-float{animation:m10-bob 4.4s ease-in-out infinite}
@keyframes m10-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

@media (prefers-reduced-motion:reduce){
  .m10-root .m10-doc,.m10-root .m10-lock{opacity:1;transform:none!important}
  .m10-root .m10-d1{transform:none}.m10-root .m10-d2{transform:translateY(25px)}
  .m10-root .m10-d3{transform:translateY(50px)}.m10-root .m10-d4{transform:translateY(75px)}
  .m10-root .m10-chk{opacity:1}.m10-root .m10-shackle{transform:translateY(0)}
  .m10-float,.m10-status .m10-sdot,.m10-root.play .m10-settlewrap{animation:none}}

/* ===== m11 ===== */
.m11-root{position:relative;font-size:12px;color:var(--ink)}

/* ---- device + sensor tile ---- */
.m11-grid{display:grid;grid-template-columns:96px 1fr;gap:12px;margin-top:12px;align-items:stretch}
.m11-dev{position:relative;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fbfcff,#f3f6fc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 6px;overflow:hidden}
.m11-pulse,.m11-pulse2{position:absolute;top:34px;width:30px;height:30px;border-radius:50%;border:2px solid #6A9EFF;opacity:0;transform:scale(.4)}
.m11-pulse2{border-color:#48E2D9}
.m11-root.play .m11-pulse{animation:m11-ring 1.3s ease-out 2;animation-fill-mode:forwards}
.m11-root.play .m11-pulse2{animation:m11-ring 1.3s ease-out .65s 2;animation-fill-mode:forwards}
@keyframes m11-ring{0%{opacity:.5;transform:scale(.35)}70%{opacity:.1}100%{opacity:0;transform:scale(2.1)}}
.m11-puck{position:relative;width:38px;height:38px;border-radius:12px;background:var(--g);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(106,158,255,.34);z-index:2}
.m11-puck svg{width:20px;height:20px}
.m11-root.play .m11-puck{animation:m11-flash 2.8s ease}
@keyframes m11-flash{0%,55%{box-shadow:0 4px 12px rgba(106,158,255,.34);transform:scale(1)}62%{box-shadow:0 0 0 5px rgba(239,68,68,.30),0 4px 14px rgba(239,68,68,.4);transform:scale(1.08)}72%{box-shadow:0 0 0 0 rgba(239,68,68,0);transform:scale(1)}82%{box-shadow:0 0 0 5px rgba(239,68,68,.22)}100%{box-shadow:0 4px 12px rgba(106,158,255,.34)}}
.m11-devname{font-size:10px;font-weight:700;color:var(--sub);letter-spacing:.02em;z-index:2}
.m11-led{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:m11-blink 2.2s ease-in-out infinite;z-index:3}
@keyframes m11-blink{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5);opacity:.9}50%{box-shadow:0 0 0 4px rgba(16,185,129,0);opacity:1}}

/* ---- reading graph ---- */
.m11-read{position:relative;border:1px solid var(--line);border-radius:14px;background:#fff;padding:9px 10px 8px;display:flex;flex-direction:column;gap:6px}
.m11-rhead{display:flex;align-items:center;justify-content:space-between}
.m11-rlbl{font-size:9.5px;font-weight:700;color:var(--mut);letter-spacing:.08em;text-transform:uppercase}
.m11-rval{font-size:11px;font-weight:800;color:var(--ink)}
.m11-rval b{color:var(--bad)}
.m11-spikeval{display:inline-block;opacity:0;transform:scale(.6)}
.m11-root.play .m11-spikeval{animation:m11-setflash .5s cubic-bezier(.34,1.56,.64,1) 1.5s forwards}
@keyframes m11-setflash{0%{opacity:0;transform:scale(.6)}1%{opacity:1;transform:scale(1.18);text-shadow:0 0 10px rgba(239,68,68,.7)}45%{transform:scale(1);text-shadow:0 0 4px rgba(239,68,68,.3)}100%{opacity:1;transform:scale(1);text-shadow:none}}
.m11-chart{position:relative;height:60px}
.m11-chart svg{display:block;width:100%;height:100%;overflow:visible}
.m11-base{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.m11-wave{fill:none;stroke:url(#m11-grad);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260}
.m11-root.play .m11-wave{animation:m11-draw 1.5s ease forwards}
@keyframes m11-draw{to{stroke-dashoffset:0}}
.m11-wave-amb{fill:none;stroke:#cfe0ff;stroke-width:1.4;stroke-linecap:round;opacity:.7;animation:m11-wob 3.4s ease-in-out infinite}
@keyframes m11-wob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.m11-spike{fill:var(--bad);opacity:0;transform:scale(0)}
.m11-root.play .m11-spike{transform-box:fill-box;transform-origin:center;animation:m11-pop .5s cubic-bezier(.34,1.56,.64,1) 1.5s forwards}
@keyframes m11-pop{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.5)}100%{opacity:1;transform:scale(1)}}
.m11-scan{fill:none;stroke:rgba(106,158,255,.5);stroke-width:1.5}
.m11-dot{fill:#48E2D9;opacity:0;offset-path:path("M0 40 L26 38 L52 42 L78 37 L104 41 L130 39 L156 41 L172 40 L180 12 L188 40 L208 41 L240 40");offset-distance:0%;offset-rotate:0deg}
.m11-root.play .m11-dot{animation:m11-trav 1.65s linear .15s forwards}
@keyframes m11-trav{0%{offset-distance:0%;opacity:0}10%{opacity:1}82%{opacity:1}88%{opacity:.55}100%{offset-distance:100%;opacity:0}}

/* ---- alert / ticket card ---- */
.m11-alert{margin-top:11px;display:flex;align-items:center;gap:10px;border:1px solid #fde0e0;background:linear-gradient(180deg,#fff6f6,#fff);border-radius:12px;padding:9px 11px;opacity:0;transform:translateY(12px);box-shadow:0 6px 16px rgba(239,68,68,.10)}
.m11-root.play .m11-alert{animation:m11-slidein .55s cubic-bezier(.22,1,.36,1) 2.1s forwards}
@keyframes m11-slidein{to{opacity:1;transform:translateY(0)}}
.m11-aic{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:rgba(239,68,68,.12);display:flex;align-items:center;justify-content:center}
.m11-aic svg{width:15px;height:15px}
.m11-atxt{flex:1;min-width:0}
.m11-at1{font-size:11.5px;font-weight:800;color:var(--ink);line-height:1.2}
.m11-at2{font-size:10px;color:var(--sub);margin-top:1px}
.m11-tk{flex:0 0 auto;font-size:9.5px;font-weight:800;color:#fff;background:var(--ok);border-radius:20px;padding:3px 8px;white-space:nowrap;opacity:0}
.m11-root.play .m11-tk{animation:m11-tkin .4s ease 2.55s forwards}
@keyframes m11-tkin{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* ===== m12 ===== */
/* m12 -- AI co-pilot: thinking orb -> proposal types -> APPROVE flips (hero) -> run sweep + 3 steps check off */
.m12-root{position:relative;font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}

/* thinking row */
.m12-think{display:flex;align-items:center;gap:10px;margin-top:12px}
.m12-orbwrap{position:relative;width:34px;height:34px;flex:none}
.m12-orb{position:absolute;inset:5px;border-radius:50%;background:var(--g);filter:saturate(1.1);
  animation:m12-pulse 2.4s ease-in-out infinite}
.m12-orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--g);
  opacity:.45;filter:blur(5px);animation:m12-halo 2.4s ease-in-out infinite}
.m12-dot{position:absolute;top:50%;left:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 1.5px rgba(106,158,255,.7)}
.m12-d1{animation:m12-orbit 2.8s linear infinite}
.m12-d2{animation:m12-orbit 2.8s linear infinite;animation-delay:-1.4s;opacity:.85}
.m12-tlabel{font-size:11px;color:var(--sub);font-weight:600;letter-spacing:.01em}
.m12-tlabel i{font-style:normal;color:var(--mut)}
.m12-tlabel .m12-cur{display:inline-block;width:1px;height:11px;vertical-align:-1px;margin-left:1px;
  background:var(--ink);animation:m12-blink 1s steps(1) infinite}
/* once the proposal has typed in, thinking resolves into acting: caret stops, orb pulse eases to rest */
.m12-root.play .m12-orb{animation:m12-settle 1.35s ease-in-out forwards}
.m12-root.play .m12-orb::after{animation:m12-settle-halo 1.35s ease-in-out forwards}
.m12-root.play .m12-cur{animation:m12-cur-stop 1.35s steps(1) forwards}

/* proposal card */
.m12-prop{margin-top:10px;border:1px solid var(--line);border-radius:11px;padding:9px 10px;
  background:#fff;box-shadow:0 1px 0 rgba(15,23,42,.02);
  opacity:0;transform:translateY(6px) scale(.985);transform-origin:top}
.m12-phead{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.m12-pchip{width:7px;height:7px;border-radius:2px;background:var(--g)}
/* copy-agnostic typewriter via clip-path: no reflow, no hardcoded ems */
.m12-pttl{margin:5px 0 2px;font-size:12.5px;font-weight:650;color:var(--ink);
  white-space:nowrap;clip-path:inset(0 100% 0 0)}
.m12-psub{font-size:11px;color:var(--sub);
  white-space:nowrap;clip-path:inset(0 100% 0 0)}

/* approve toggle row -- the hero beat */
.m12-app{display:flex;align-items:center;justify-content:space-between;margin-top:9px;
  opacity:0;transform:translateY(4px)}
.m12-appL{position:relative;font-size:11.5px;font-weight:650;color:var(--sub);transition:color .3s ease}
.m12-appL b{font-weight:650}
.m12-appL .m12-lb{display:inline-block}
.m12-appL .m12-lb2{position:absolute;left:0;top:0;color:var(--ok);opacity:0}
.m12-tog{position:relative;width:38px;height:21px;border-radius:11px;background:#e2e8f0;
  flex:none;transition:background .35s ease}
.m12-tog::before{content:"";position:absolute;inset:-4px;border-radius:15px;
  box-shadow:0 0 0 0 rgba(16,185,129,.45);opacity:0}
.m12-knob{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.25);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.m12-root.play .m12-tog{background:var(--ok);transition-delay:1.55s}
.m12-root.play .m12-knob{transform:translateX(17px);transition-delay:1.55s}
/* the instant the knob lands: ring flash + label swap to "Approved" */
.m12-root.play .m12-tog::before{animation:m12-ring-flash .55s ease-out forwards;animation-delay:1.9s}
.m12-root.play .m12-lb{animation:m12-lb-out .2s ease forwards;animation-delay:1.9s}
.m12-root.play .m12-lb2{animation:m12-lb-in .28s ease forwards;animation-delay:1.94s}

/* run row: progress + steps */
.m12-run{margin-top:10px;opacity:0}
.m12-track{height:5px;border-radius:3px;background:#eef2f8;overflow:hidden}
.m12-fill{height:100%;width:100%;border-radius:3px;background:var(--g);
  transform:translateX(-100%)}
.m12-root.play .m12-fill{animation:m12-sweep 1.4s cubic-bezier(.45,.05,.3,1) forwards;animation-delay:2.05s}
.m12-steps{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.m12-step{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--mut);
  opacity:.5;transition:color .3s ease,opacity .3s ease}
.m12-check{width:15px;height:15px;flex:none}
.m12-check circle{fill:none;stroke:#cbd5e1;stroke-width:2}
.m12-check path{fill:none;stroke:var(--ok);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:14;stroke-dashoffset:14}
.m12-root.play .m12-s1{animation:m12-lit .3s ease forwards;animation-delay:2.3s}
.m12-root.play .m12-s2{animation:m12-lit .3s ease forwards;animation-delay:2.7s}
.m12-root.play .m12-s3{animation:m12-lit .3s ease forwards;animation-delay:3.1s}
.m12-root.play .m12-s1 .m12-check circle{animation:m12-ring .3s ease forwards;animation-delay:2.3s}
.m12-root.play .m12-s2 .m12-check circle{animation:m12-ring .3s ease forwards;animation-delay:2.7s}
.m12-root.play .m12-s3 .m12-check circle{animation:m12-ring .3s ease forwards;animation-delay:3.1s}
.m12-root.play .m12-s1 .m12-check path{animation:m12-draw .4s ease forwards;animation-delay:2.35s}
.m12-root.play .m12-s2 .m12-check path{animation:m12-draw .4s ease forwards;animation-delay:2.75s}
.m12-root.play .m12-s3 .m12-check path{animation:m12-draw .4s ease forwards;animation-delay:3.15s}

/* gated intro beats */
.m12-root.play .m12-prop{animation:m12-rise .45s ease forwards;animation-delay:.25s}
.m12-root.play .m12-pttl{animation:m12-type .6s steps(24) forwards;animation-delay:.55s}
.m12-root.play .m12-psub{animation:m12-type .55s steps(26) forwards;animation-delay:1.05s}
.m12-root.play .m12-app{animation:m12-rise2 .4s ease forwards;animation-delay:1.4s}
.m12-root.play .m12-run{animation:m12-rise2 .4s ease forwards;animation-delay:2s}

@keyframes m12-rise{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes m12-rise2{to{opacity:1;transform:translateY(0)}}
@keyframes m12-type{to{clip-path:inset(0 0 0 0)}}
@keyframes m12-sweep{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes m12-lit{to{color:var(--sub);opacity:1}}
@keyframes m12-ring{to{stroke:var(--ok)}}
@keyframes m12-draw{to{stroke-dashoffset:0}}
/* hero approve beats */
@keyframes m12-ring-flash{0%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,.5)}
  100%{opacity:0;box-shadow:0 0 0 9px rgba(16,185,129,0)}}
@keyframes m12-lb-out{to{opacity:0;transform:translateY(-3px)}}
@keyframes m12-lb-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
/* thinking resolves into acting: two soft pulses then rest, caret blinks twice then stays gone */
@keyframes m12-settle{0%{transform:scale(1)}21%{transform:scale(1.08)}42%,100%{transform:scale(1)}}
@keyframes m12-settle-halo{0%{opacity:.32;transform:scale(1)}21%{opacity:.55;transform:scale(1.18)}42%,100%{opacity:.28;transform:scale(1)}}
@keyframes m12-cur-stop{0%,18%{opacity:1}19%,55%{opacity:0}56%,73%{opacity:1}74%,100%{opacity:0}}

/* ambient idle loops (not gated) */
@keyframes m12-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes m12-halo{0%,100%{opacity:.32;transform:scale(1)}50%{opacity:.55;transform:scale(1.18)}}
@keyframes m12-orbit{from{transform:rotate(0deg) translateX(15px)}to{transform:rotate(360deg) translateX(15px)}}
@keyframes m12-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .m12-orb,.m12-orb::after,.m12-d1,.m12-d2,.m12-tlabel .m12-cur{animation:none}
}

/* ===== m13 ===== */
.m13-root{position:relative;font:13px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--ink)}

/* compare viewport */
.m13-cmp{position:relative;margin-top:12px;border-radius:12px;overflow:hidden;height:120px;
  border:1px solid var(--line);box-shadow:0 1px 0 rgba(15,23,42,.04)}

/* the two room layers (CSS-painted interior: light wall + floor) */
.m13-layer{position:absolute;inset:0}

/* shared room paint: light wall up top, warm floor at the bottom */
.m13-room{position:absolute;inset:0;
  background:linear-gradient(180deg,#f4f6fb 0%,#eef1f7 62%,#eef1f7 62%,#d9cdbd 62.4%,#cdbfac 100%)}
/* baseboard / floor line */
.m13-base{position:absolute;left:0;right:0;top:62%;height:6px;
  background:linear-gradient(180deg,#ffffff,#e7e2d8);
  border-top:1px solid #c8bca8;border-bottom:1px solid #c0b29c}

/* AFTER = damaged (bottom layer, always present) */
.m13-after{}
/* carpet stain near the floor (pin 1) */
.m13-stain{position:absolute;left:23%;top:70%;width:54px;height:26px;border-radius:50% 50% 48% 52%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(74,52,38,.92),rgba(96,66,46,.55) 62%,rgba(96,66,46,0));
  filter:blur(.4px)}
.m13-stain::after{content:"";position:absolute;left:60%;top:30%;width:18px;height:12px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(74,52,38,.7),rgba(74,52,38,0))}
/* wall patch + crack (pin 2) */
.m13-patch{position:absolute;left:70%;top:30%;width:30px;height:24px;
  transform:translate(-50%,-50%);border-radius:3px;
  background:repeating-linear-gradient(135deg,#dfd6c7,#dfd6c7 3px,#d4c9b6 3px,#d4c9b6 6px);
  box-shadow:inset 0 0 0 1px rgba(150,135,110,.6)}
.m13-crack{position:absolute;left:70%;top:30%;width:2px;height:40px;
  transform:translate(-50%,-10%) rotate(13deg);transform-origin:top;
  background:linear-gradient(180deg,rgba(60,48,34,.7),rgba(60,48,34,0))}

/* BEFORE = clean (top layer, clipped by a STATIC divider at 50%) */
.m13-before{clip-path:inset(0 50% 0 0)}

/* corner labels */
.m13-cap{position:absolute;top:8px;font:700 8.5px/1 ui-sans-serif,system-ui;letter-spacing:.07em;
  padding:3px 7px;border-radius:6px;color:#fff;text-transform:uppercase;z-index:3;
  box-shadow:0 1px 3px rgba(15,23,42,.18)}
.m13-cap.b{left:9px;background:linear-gradient(120deg,#3aa7c7,#48e2d9)}
.m13-cap.a{right:9px;background:linear-gradient(120deg,#e05a5a,#ef4444)}

/* numbered damage pins (on the AFTER side) */
.m13-pin{position:absolute;width:17px;height:17px;border-radius:50%;z-index:4;
  transform:translate(-50%,-50%) scale(0);
  background:#ef4444;color:#fff;font:800 10px/17px ui-sans-serif,system-ui;text-align:center;
  border:2px solid #fff;box-shadow:0 2px 5px rgba(15,23,42,.35)}
.m13-pin.p1{left:23%;top:70%}
.m13-pin.p2{left:70%;top:24%}
/* pin ring: pseudo-element, animated with transform:scale + opacity (no box-shadow ping) */
.m13-pin .m13-ring{position:absolute;inset:-2px;border-radius:50%;
  border:2px solid rgba(239,68,68,.5);opacity:0;
  transform:scale(.4);pointer-events:none}

/* divider line + handle: line is STATIC at left:50%, only the handle drifts via translateX */
.m13-div{position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:5;
  background:#fff;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(15,23,42,.22)}
.m13-handle{position:absolute;top:50%;left:0;width:24px;height:24px;border-radius:50%;
  transform:translate(-50%,-50%);background:#fff;
  box-shadow:0 2px 8px rgba(15,23,42,.3),0 0 0 1px rgba(15,23,42,.06);display:grid;place-items:center;
  animation:m13-handle 6.4s ease-in-out infinite}
.m13-handle::before,.m13-handle::after{content:"";position:absolute;width:0;height:0;
  border-top:4px solid transparent;border-bottom:4px solid transparent}
.m13-handle::before{left:5px;border-right:5px solid #6a9eff}
.m13-handle::after{right:5px;border-left:5px solid #6a9eff}
/* grip pulse: pseudo-element scale+opacity, no box-shadow */
.m13-grip{position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(106,158,255,.5);opacity:0;
  transform:scale(.7);animation:m13-grip 2.8s ease-in-out infinite}

/* connector SVG: thin lines from each pin to its row */
.m13-wires{position:absolute;left:0;right:0;top:0;height:0;overflow:visible;z-index:2;pointer-events:none}
.m13-wire{fill:none;stroke:var(--bad);stroke-width:1.5;opacity:.5;stroke-linecap:round;
  stroke-dasharray:64;stroke-dashoffset:64}
.m13-wire.w1{stroke-dashoffset:64}
.m13-wire.w2{stroke-dashoffset:64}

/* itemized deductions */
.m13-list{position:relative;margin-top:11px;display:flex;flex-direction:column;gap:6px}
.m13-li{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);
  border-radius:8px;background:#fff;opacity:0;transform:translateX(-8px)}
.m13-num{width:16px;height:16px;border-radius:50%;flex:0 0 auto;background:var(--bad);
  color:#fff;font:800 9.5px/16px ui-sans-serif,system-ui;text-align:center}
.m13-name{color:var(--sub);font-weight:600;font-size:11.5px}
.m13-amt{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:11.5px;color:var(--ink)}
.m13-amt::before{content:"-";color:var(--bad);margin-right:1px}

/* deposit split bar: $275 withheld vs $725 refund reconcile to $1,000 */
.m13-split{margin-top:9px;display:flex;align-items:center;gap:8px}
.m13-bar{position:relative;flex:1;height:9px;border-radius:5px;overflow:hidden;
  background:rgba(16,185,129,.16);border:1px solid var(--line)}
.m13-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:27.5%;
  background:linear-gradient(90deg,#f0726f,#ef4444);
  transform:scaleX(0);transform-origin:left;border-radius:5px 0 0 5px}
.m13-bcap{font:700 8.5px/1 ui-sans-serif,system-ui;letter-spacing:.03em;color:var(--mut);
  text-transform:uppercase;white-space:nowrap}
.m13-bcap.dep{color:var(--sub)}

/* total bar */
.m13-tot{margin-top:9px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
  background:linear-gradient(120deg,rgba(140,108,255,.10),rgba(72,226,217,.10));
  border:1px solid var(--line);opacity:0;transform:translateY(6px)}
.m13-tlab{font-weight:700;font-size:11px;color:var(--sub);text-transform:uppercase;letter-spacing:.04em}
.m13-tval{margin-left:auto;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;
  background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.m13-ret{font-size:9.5px;font-weight:700;color:var(--ok);
  background:rgba(16,185,129,.12);padding:2px 6px;border-radius:6px;
  opacity:0;transform:scale(.85)}

/* ===== replay: gated on .play ===== */
.m13-root.play .m13-pin.p1{animation:m13-pinin .45s cubic-bezier(.2,1.4,.3,1) forwards;animation-delay:1.15s}
.m13-root.play .m13-pin.p2{animation:m13-pinin .45s cubic-bezier(.2,1.4,.3,1) forwards;animation-delay:1.4s}
.m13-root.play .m13-pin.p1 .m13-ring{animation:m13-ping 1.1s ease 1.4s 1}
.m13-root.play .m13-pin.p2 .m13-ring{animation:m13-ping 1.1s ease 1.65s 1}
/* connector wire draws as its matching row cascades in */
.m13-root.play .m13-wire.w1{animation:m13-draw .55s ease forwards;animation-delay:1.7s}
.m13-root.play .m13-wire.w2{animation:m13-draw .55s ease forwards;animation-delay:2.05s}
.m13-root.play .m13-li.r1{animation:m13-rowin .5s ease forwards;animation-delay:1.7s}
.m13-root.play .m13-li.r2{animation:m13-rowin .5s ease forwards;animation-delay:2.05s}
.m13-root.play .m13-bar::before{animation:m13-fill .6s cubic-bezier(.2,.8,.25,1) forwards;animation-delay:2.2s}
/* count-up finishes LAST: total bar settles after both rows land, count begins ~2.45s */
.m13-root.play .m13-tot{animation:m13-totin .55s cubic-bezier(.2,.8,.25,1) forwards;animation-delay:2.45s}
/* refund chip waits until AFTER the count settles */
.m13-root.play .m13-ret{animation:m13-retin .5s ease forwards;animation-delay:3.4s}

@keyframes m13-pinin{to{transform:translate(-50%,-50%) scale(1)}}
@keyframes m13-rowin{to{opacity:1;transform:translateX(0)}}
@keyframes m13-totin{to{opacity:1;transform:translateY(0)}}
@keyframes m13-retin{to{opacity:1;transform:scale(1)}}
@keyframes m13-fill{to{transform:scaleX(1)}}
@keyframes m13-draw{to{stroke-dashoffset:0}}
/* ring ping: scale + opacity on the pseudo-element (no box-shadow) */
@keyframes m13-ping{
  0%{transform:scale(.4);opacity:.6}
  100%{transform:scale(1.7);opacity:0}
}

/* ===== ambient (always running): calm grip breath + subtle handle drift ===== */
@keyframes m13-handle{
  0%,100%{transform:translate(-50%,-50%) translateX(-10%)}
  50%{transform:translate(-50%,-50%) translateX(10%)}
}
@keyframes m13-grip{
  0%,100%{transform:scale(.7);opacity:.5}
  50%{transform:scale(1.15);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .m13-handle{animation:none}
  .m13-grip{animation:none;opacity:0}
  .m13-root .m13-pin{transform:translate(-50%,-50%) scale(1)}
  .m13-wire{stroke-dashoffset:0}
  .m13-bar::before{transform:scaleX(1)}
}

/* ===== m14 ===== */
.m14-root{position:relative;font-size:12px;color:var(--ink)}

/* layout: scanner zone left, OCR form right */
.m14-body{display:grid;grid-template-columns:96px 1fr;gap:14px;margin-top:12px;align-items:start}

/* ---- scanner zone ---- */
.m14-scan{position:relative;height:150px;border-radius:12px;
  background:linear-gradient(180deg,#f6f9ff,#eef3fb);
  border:1px solid var(--line);overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center}
/* subtle scanner bezel glow (ambient) */
.m14-scan::before{content:"";position:absolute;inset:0;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(106,158,255,.12);
  animation:m14-bezel 3.2s ease-in-out infinite}
@keyframes m14-bezel{0%,100%{opacity:.4}50%{opacity:.9}}

/* the receipt paper (sits inside the scan box, below the header) */
.m14-receipt{position:relative;width:64px;height:122px;margin-bottom:-58px;
  background:#fff;border-radius:4px 4px 2px 2px;
  box-shadow:0 6px 16px rgba(15,23,42,.16);
  transform:translateY(96px);opacity:0;
  padding:8px 7px 0}
.m14-root.play .m14-receipt{animation:m14-feed 1s cubic-bezier(.22,1,.36,1) .15s forwards}
@keyframes m14-feed{
  0%{transform:translateY(96px);opacity:0}
  35%{opacity:1}
  100%{transform:translateY(-12px);opacity:1}
}
/* zigzag torn bottom edge */
.m14-receipt::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:6px;
  background:linear-gradient(135deg,#fff 25%,transparent 25%) -3px 0/6px 6px,
            linear-gradient(225deg,#fff 25%,transparent 25%) -3px 0/6px 6px}
/* receipt content lines (3 readable zones: header, amount, date) */
.m14-rh{height:5px;width:60%;margin:0 auto 6px;border-radius:2px;
  background:var(--g);opacity:.85}
.m14-rl{height:3px;border-radius:2px;background:#e2e8f0;margin-bottom:4px}
.m14-rl.s{width:70%}.m14-rl.m{width:88%}.m14-rl.b{width:50%}
.m14-rtot{height:4px;width:46%;margin-top:6px;border-radius:2px;background:#cbd5e1}

/* scan line sweeps over the receipt; starts only AFTER the feed settles (~1.05s) */
.m14-line{position:absolute;left:8px;right:8px;height:2px;border-radius:2px;
  top:30px;opacity:0;
  background:linear-gradient(90deg,transparent,#48e2d9,#6a9eff,transparent);
  box-shadow:0 0 10px 2px rgba(72,226,217,.55);
  transform:translateY(0)}
/* one slow downward pass (1.05s -> 2.25s) so it crosses vendor/amount/date in turn */
.m14-root.play .m14-line{animation:m14-sweep 1.2s ease-in-out 1.05s 1 forwards}
@keyframes m14-sweep{
  0%{opacity:0;transform:translateY(0)}
  8%{opacity:1}
  92%{opacity:1}
  100%{opacity:0;transform:translateY(78px)}
}

/* ---- OCR form (right) ---- */
.m14-form{display:flex;flex-direction:column;gap:8px}
.m14-field{display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:9px;padding:6px 9px;
  background:#fff;opacity:0;transform:translateY(6px)}
.m14-root.play .m14-field{animation:m14-fill .42s cubic-bezier(.22,1,.36,1) forwards}
/* fields populate IN SYNC with the scan line crossing each receipt zone:
   line starts 1.05s, spans 1.2s; ~30% in -> vendor, ~55% -> amount, ~82% -> date */
.m14-root.play .m14-f1{animation-delay:1.30s}
.m14-root.play .m14-f2{animation-delay:1.66s}
.m14-root.play .m14-f3{animation-delay:1.98s}
@keyframes m14-fill{to{opacity:1;transform:translateY(0)}}

.m14-flab{font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mut);min-width:48px}
.m14-fval{font-weight:700;color:var(--ink);font-size:12px;
  white-space:nowrap;overflow:hidden}
.m14-fval.amt{color:#0f172a;margin-left:auto}

/* ONE validation cue: the amount field (the hero number) gets a gradient ring
   once its odometer settles. Vendor & date get a single check; the ring is the
   amount's own signal so it carries no check. */
.m14-ok{margin-left:auto;width:14px;height:14px;border-radius:50%;
  background:var(--ok);display:flex;align-items:center;justify-content:center;
  transform:scale(0)}
.m14-ok svg{width:8px;height:8px}
.m14-root.play .m14-f1 .m14-ok{animation:m14-pop .4s cubic-bezier(.34,1.56,.64,1) 1.62s forwards}
.m14-root.play .m14-f3 .m14-ok{animation:m14-pop .4s cubic-bezier(.34,1.56,.64,1) 2.28s forwards}
@keyframes m14-pop{to{transform:scale(1)}}

/* amount field: count-up odometer is the input mechanic; gradient ring = its validation */
.m14-f2{position:relative}
.m14-root.play .m14-f2{animation:m14-fill .42s cubic-bezier(.22,1,.36,1) 1.66s forwards,
  m14-ring 1.4s ease 2.20s 1}
@keyframes m14-ring{
  0%{box-shadow:0 0 0 0 rgba(106,158,255,.35)}
  100%{box-shadow:0 0 0 6px rgba(106,158,255,0)}
}

/* auto-category chip pops last */
.m14-cat{display:flex;align-items:center;gap:6px;margin-top:2px;
  align-self:flex-start;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:700;color:#fff;background:var(--g);
  opacity:0;transform:scale(.6)}
.m14-root.play .m14-cat{animation:m14-chip .5s cubic-bezier(.34,1.56,.64,1) 2.55s forwards}
@keyframes m14-chip{to{opacity:1;transform:scale(1)}}
.m14-cat .m14-dot{width:6px;height:6px;border-radius:50%;background:#fff;
  animation:m14-blink 1.6s ease-in-out infinite}
@keyframes m14-blink{0%,100%{opacity:.45}50%{opacity:1}}

/* ambient: gentle float on the whole scanner so it feels alive */
.m14-scan{animation:m14-float 4.5s ease-in-out infinite}
@keyframes m14-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* ===== m15 ===== */
.m15-root{font:13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);position:relative}
.m15-body{position:relative;display:flex;gap:14px;padding:14px 16px 16px;align-items:flex-start;min-height:168px}

/* left rail: raw fact tiles */
.m15-facts{position:relative;width:108px;flex:0 0 108px;display:flex;flex-direction:column;gap:9px;padding-top:6px}
.m15-tile{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 9px;box-shadow:0 1px 2px rgba(15,23,42,.04);opacity:0;transform:translateX(-14px) scale(.96);transform-origin:left center}
.m15-tile .m15-k{font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);font-weight:600}
.m15-tile .m15-v{font-size:14px;font-weight:700;color:var(--ink);margin-top:1px}
.m15-tile .m15-v .m15-u{font-size:10px;font-weight:600;color:var(--sub)}

/* the morph runner: a tile copy that flies into the card */
.m15-fly{position:absolute;left:9px;width:90px;height:30px;border-radius:9px;background:linear-gradient(120deg,#eef2ff,#e7f7f4);border:1px solid var(--line);opacity:0;z-index:3}
.m15-fly.a{top:10px}
.m15-fly.b{top:49px}
.m15-fly.c{top:88px}

/* right: forming listing card */
.m15-card{position:relative;flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 3px 10px rgba(15,23,42,.05);opacity:0;transform:translateY(8px) scale(.97);transform-origin:left top}
.m15-hero{position:relative;height:46px;background:linear-gradient(120deg,#0f172a,#1e2a4a);display:flex;align-items:flex-end;padding:8px 10px;overflow:hidden}
.m15-hh{position:relative;font-size:13px;font-weight:700;color:#fff;letter-spacing:.01em}
/* mask-wipe headline: text laid out, gradient sheen sweeps to reveal */
.m15-hh::after{content:"";position:absolute;left:0;top:-2px;bottom:-2px;right:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);background-size:60% 100%;background-repeat:no-repeat;background-position:-70% 0;mix-blend-mode:screen;opacity:0;pointer-events:none}
.m15-hclip{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
.m15-price{position:absolute;right:9px;top:8px;font-size:12px;font-weight:800;color:#7ee0d3;opacity:0;transform:translateY(-4px)}

.m15-meta{padding:9px 10px 4px;display:flex;gap:6px;flex-wrap:wrap}
.m15-tag{font-size:10px;font-weight:600;color:#3a4a66;background:#eef2ff;border:1px solid #dfe6f5;border-radius:999px;padding:3px 8px;opacity:0;transform:scale(.6)}
.m15-line{height:5px;border-radius:3px;background:var(--line);margin:0 10px 6px;opacity:0;transform:scaleX(.4);transform-origin:left}
.m15-line.s2{width:78%}
.m15-line.s3{width:62%}

/* fair housing shield */
.m15-shield{display:flex;align-items:center;gap:6px;margin:2px 10px 0;font-size:10px;font-weight:700;color:#0e7a63;opacity:0;transform:translateY(4px)}
.m15-shield svg{width:14px;height:14px;display:block}
.m15-tick{stroke:#10b981;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:14;stroke-dashoffset:14}

/* ambient highlighter shimmer under headline baseline (idle, subtle) */
.m15-shim{position:absolute;left:10px;right:10px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(122,90,248,.5),rgba(80,140,255,.5),rgba(72,226,217,.5),transparent);background-size:55% 100%;background-repeat:no-repeat;opacity:0}

/* ===== replay-gated sequence ===== */
.m15-root.play .m15-tile{animation:m15-tilein .5s cubic-bezier(.2,.8,.25,1) forwards}
.m15-root.play .m15-tile.t1{animation-delay:.08s}
.m15-root.play .m15-tile.t2{animation-delay:.2s}
.m15-root.play .m15-tile.t3{animation-delay:.32s}
@keyframes m15-tilein{to{opacity:1;transform:translateX(0) scale(1)}}

/* facts get pulled rightward + fade as the fly-runners launch */
.m15-root.play .m15-tile.t1{animation:m15-tilein .5s cubic-bezier(.2,.8,.25,1) .08s forwards,m15-pull .5s ease-in .98s forwards}
.m15-root.play .m15-tile.t2{animation:m15-tilein .5s cubic-bezier(.2,.8,.25,1) .2s forwards,m15-pull .5s ease-in 1.08s forwards}
.m15-root.play .m15-tile.t3{animation:m15-tilein .5s cubic-bezier(.2,.8,.25,1) .32s forwards,m15-pull .5s ease-in 1.18s forwards}
@keyframes m15-pull{to{opacity:.18;transform:translateX(22px) scale(.92)}}

/* fly-runners arc rightward into the card (curved via two-stage translate) */
.m15-root.play .m15-fly.a{animation:m15-fly-a .62s cubic-bezier(.5,0,.3,1) 1s forwards}
.m15-root.play .m15-fly.b{animation:m15-fly-b .62s cubic-bezier(.5,0,.3,1) 1.1s forwards}
.m15-root.play .m15-fly.c{animation:m15-fly-c .62s cubic-bezier(.5,0,.3,1) 1.2s forwards}
@keyframes m15-fly-a{0%{opacity:0;transform:translate(0,0) scale(1)}18%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:translate(150px,18px) scale(.3)}}
@keyframes m15-fly-b{0%{opacity:0;transform:translate(0,0) scale(1)}18%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:translate(150px,-12px) scale(.3)}}
@keyframes m15-fly-c{0%{opacity:0;transform:translate(0,0) scale(1)}18%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:translate(150px,-44px) scale(.3)}}

/* card forms as the runners collapse in */
.m15-root.play .m15-card{animation:m15-cardin .55s cubic-bezier(.2,.8,.25,1) 1.18s forwards}
@keyframes m15-cardin{to{opacity:1;transform:translateY(0) scale(1)}}

/* headline mask-wipe reveal (clip opens L->R) + sheen sweep */
.m15-root.play .m15-hclip{animation:m15-wipe .7s cubic-bezier(.4,0,.2,1) 1.55s forwards}
@keyframes m15-wipe{to{clip-path:inset(0 0 0 0)}}
.m15-root.play .m15-hh::after{animation:m15-sheen .75s ease-out 1.6s 1}
@keyframes m15-sheen{0%{opacity:0;background-position:-70% 0}25%{opacity:1}100%{opacity:0;background-position:170% 0}}

.m15-root.play .m15-price{animation:m15-pricein .4s cubic-bezier(.2,.8,.25,1) 1.9s forwards}
@keyframes m15-pricein{to{opacity:1;transform:translateY(0)}}

.m15-root.play .m15-line{animation:m15-linein .4s ease-out forwards}
.m15-root.play .m15-line.s2{animation-delay:1.95s}
.m15-root.play .m15-line.s3{animation-delay:2.05s}
@keyframes m15-linein{to{opacity:1;transform:scaleX(1)}}

/* amenity tags pop with scale-overshoot */
.m15-root.play .m15-tag{animation:m15-pop .42s cubic-bezier(.34,1.56,.5,1) forwards}
.m15-root.play .m15-tag.g1{animation-delay:2.12s}
.m15-root.play .m15-tag.g2{animation-delay:2.22s}
.m15-root.play .m15-tag.g3{animation-delay:2.32s}
@keyframes m15-pop{to{opacity:1;transform:scale(1)}}

/* shield ticks at the end */
.m15-root.play .m15-shield{animation:m15-shieldin .4s ease-out 2.4s forwards}
@keyframes m15-shieldin{to{opacity:1;transform:translateY(0)}}
.m15-root.play .m15-tick{animation:m15-draw .4s ease-out 2.52s forwards}
@keyframes m15-draw{to{stroke-dashoffset:0}}

/* ambient: headline highlighter shimmer (only after reveal settles) */
.m15-root.play .m15-shim{animation:m15-shim-in .01s linear 2.7s forwards,m15-shimmer 3.4s ease-in-out 2.9s infinite}
@keyframes m15-shim-in{to{opacity:.85}}
@keyframes m15-shimmer{0%,100%{background-position:-40% 0}50%{background-position:140% 0}}

@media (prefers-reduced-motion: reduce){
  .m15-tile,.m15-card,.m15-hclip,.m15-price,.m15-line,.m15-tag,.m15-shield,.m15-tick{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important;stroke-dashoffset:0!important}
  .m15-fly,.m15-shim{display:none}
}

/* ===== m16 ===== */
.m16-root{position:relative;font-size:12px;color:var(--ink)}
.m16-body{display:grid;grid-template-columns:80px 1fr;gap:14px;margin-top:12px;align-items:center}

/* ===== left: two paystub thumbnails feed in, then a single authenticity sweep ===== */
.m16-docs{position:relative;height:138px}
.m16-stub{position:absolute;left:6px;width:60px;height:78px;background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:7px 6px 0;
  box-shadow:0 5px 14px rgba(15,23,42,.12);overflow:hidden;will-change:transform,opacity}
.m16-stub.a{top:4px;z-index:2;transform:translateX(-70px) rotate(-7deg);opacity:0}
.m16-stub.b{top:56px;left:14px;z-index:1;transform:translateX(-70px) rotate(5deg);opacity:0}
.m16-root.play .m16-stub.a{animation:m16-feedA .55s cubic-bezier(.22,1,.36,1) .1s forwards}
.m16-root.play .m16-stub.b{animation:m16-feedB .55s cubic-bezier(.22,1,.36,1) .28s forwards}
@keyframes m16-feedA{0%{transform:translateX(-70px) rotate(-7deg);opacity:0}
  60%{opacity:1}100%{transform:translateX(0) rotate(-5deg);opacity:1}}
@keyframes m16-feedB{0%{transform:translateX(-70px) rotate(5deg);opacity:0}
  60%{opacity:1}100%{transform:translateX(0) rotate(4deg);opacity:1}}

/* stub paper content */
.m16-sh{height:4px;width:64%;border-radius:2px;background:var(--g);opacity:.85;margin-bottom:5px}
.m16-sl{height:3px;border-radius:2px;background:#e6ecf5;margin-bottom:4px}
.m16-sl.s{width:55%}.m16-sl.m{width:80%}
.m16-sgross{height:5px;width:58%;border-radius:2px;background:#cbd5e1;margin-top:6px}

/* authenticity sweep band: one pass down across both stubs after they seat (~0.85s) */
.m16-sweep{position:absolute;left:0;right:0;top:0;height:24px;border-radius:8px;
  background:linear-gradient(180deg,rgba(72,226,217,0),rgba(106,158,255,.28),rgba(72,226,217,0));
  box-shadow:0 0 14px 3px rgba(72,226,217,.4);opacity:0;transform:translateY(0);will-change:transform,opacity}
.m16-root.play .m16-sweep{animation:m16-scan .85s ease-in-out .85s 1 forwards}
@keyframes m16-scan{0%{opacity:0;transform:translateY(0)}
  14%{opacity:1}86%{opacity:1}100%{opacity:0;transform:translateY(114px)}}

/* "Genuine" watermark stamps onto each stub once the sweep passes */
.m16-wm{position:absolute;right:5px;bottom:5px;display:flex;align-items:center;gap:3px;
  font-size:7px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ok);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.32);
  border-radius:999px;padding:1px 5px 1px 3px;opacity:0;transform:scale(.7);will-change:transform,opacity}
.m16-wm svg{width:7px;height:7px}
.m16-root.play .m16-stub.a .m16-wm{animation:m16-stamp .35s cubic-bezier(.34,1.56,.64,1) 1.25s forwards}
.m16-root.play .m16-stub.b .m16-wm{animation:m16-stamp .35s cubic-bezier(.34,1.56,.64,1) 1.4s forwards}
@keyframes m16-stamp{to{opacity:1;transform:scale(1)}}

/* ===== right: balance / ratio beam (the hero) ===== */
.m16-scale{position:relative;height:138px;padding-top:4px}

/* beam pivot column */
.m16-post{position:absolute;left:50%;top:28px;width:3px;height:60px;margin-left:-1.5px;
  background:linear-gradient(180deg,#cbd5e1,#e8edf4);border-radius:2px}
.m16-base{position:absolute;left:50%;bottom:12px;width:62px;height:7px;margin-left:-31px;
  border-radius:4px;background:linear-gradient(90deg,#e2e8f0,#cbd5e1,#e2e8f0)}
.m16-fulc{position:absolute;left:50%;top:22px;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;background:var(--g);box-shadow:0 0 0 3px #fff,0 2px 6px rgba(15,23,42,.18);z-index:3}

/* the beam: holds level, then swings ONCE to settle tilted (income heavier) and rests there */
.m16-beam{position:absolute;left:50%;top:27px;width:138px;height:5px;margin-left:-69px;
  border-radius:3px;background:linear-gradient(90deg,#94a3b8,#475569,#94a3b8);
  transform-origin:50% 50%;transform:rotate(0deg);z-index:2;will-change:transform}
.m16-root.play .m16-beam{animation:m16-tip 1s cubic-bezier(.34,1.4,.5,1) 1.5s forwards}
@keyframes m16-tip{
  0%{transform:rotate(0deg)}
  45%{transform:rotate(-13deg)}
  72%{transform:rotate(-7deg)}
  100%{transform:rotate(-9.5deg)}}

/* pans hang from beam ends. left=income (drops), right=rent (lifts) */
.m16-pan{position:absolute;top:30px;width:46px;text-align:center;will-change:transform}
.m16-pan.inc{left:4px}
.m16-pan.rent{right:4px}
.m16-pstring{width:1px;height:14px;margin:0 auto;background:#cbd5e1}
.m16-dish{height:14px;border-radius:0 0 14px 14px;border:1.5px solid #cbd5e1;border-top:none;
  background:linear-gradient(180deg,#f8fafc,#eef3fb)}
.m16-plab{font-size:8px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);
  font-weight:700;margin-bottom:2px}
.m16-pval{font-size:12px;font-weight:800;color:var(--ink);line-height:1}
.m16-root.play .m16-pan.inc{animation:m16-down 1s cubic-bezier(.34,1.4,.5,1) 1.5s forwards}
.m16-root.play .m16-pan.rent{animation:m16-up 1s cubic-bezier(.34,1.4,.5,1) 1.5s forwards}
@keyframes m16-down{0%{transform:translateY(0)}45%{transform:translateY(12px)}100%{transform:translateY(9px)}}
@keyframes m16-up{0%{transform:translateY(0)}45%{transform:translateY(-12px)}100%{transform:translateY(-9px)}}

/* dashed 3x threshold line across the scale */
.m16-thresh{position:absolute;left:4px;right:4px;top:92px;height:0;
  border-top:1.5px dashed var(--mut);opacity:.55}
.m16-thresh span{position:absolute;right:0;top:-13px;font-size:8px;font-weight:800;
  color:var(--mut);background:#fff;padding:0 3px}

/* verdict pill: ratio + Meets 3x, snaps green right as the beam settles */
.m16-verdict{position:absolute;left:50%;bottom:0;transform:translateX(-50%) translateY(6px) scale(.85);
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:4px 11px;border-radius:999px;font-size:11px;font-weight:800;color:#fff;
  background:var(--ok);box-shadow:0 4px 12px rgba(16,185,129,.32);opacity:0;will-change:transform,opacity}
.m16-root.play .m16-verdict{animation:m16-snap .45s cubic-bezier(.34,1.56,.64,1) 2.2s forwards}
@keyframes m16-snap{to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.m16-verdict svg{width:11px;height:11px}
.m16-verdict b{font-weight:900}

/* lone ambient: the green pill gives one soft pulse glow once settled (the single idle loop) */
.m16-root.play .m16-verdict::after{content:"";position:absolute;inset:0;border-radius:999px;
  box-shadow:0 0 0 0 rgba(16,185,129,.45);animation:m16-pulse 3.4s ease-in-out 3s infinite}
@keyframes m16-pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.36)}
  50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}}

/* ===== m17 ===== */
.m17-root{position:relative;font-size:12px;color:var(--ink)}
.m17-body{position:relative;margin-top:12px;min-height:178px}

/* the lease page that auto-advances clause by clause */
.m17-doc{position:relative;border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:12px 12px 12px 30px;overflow:hidden;box-shadow:0 6px 18px rgba(15,23,42,.05)}

/* left margin rail the audit cursor runs down */
.m17-rail{position:absolute;left:0;top:0;bottom:0;width:24px;
  border-right:1px solid var(--line);background:linear-gradient(180deg,#fbfcfe,#f4f7fc)}

/* the audit cursor: a small chevron with a soft scan glow, slides down the rail */
.m17-cur{position:absolute;left:5px;top:8px;width:14px;height:14px;z-index:4;
  display:grid;place-items:center;color:#6a9eff;
  transform:translateY(0);opacity:0}
.m17-cur svg{width:12px;height:12px}
.m17-cur::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;
  margin:-15px 0 0 -15px;border-radius:50%;
  background:radial-gradient(circle,rgba(106,158,255,.30),rgba(72,226,217,0) 68%);
  animation:m17-scan 2.2s ease-in-out infinite}
@keyframes m17-scan{0%,100%{transform:scale(.78);opacity:.5}50%{transform:scale(1.12);opacity:.95}}
.m17-root.play .m17-cur{animation:m17-run 2.2s cubic-bezier(.55,.05,.35,1) .1s forwards}
@keyframes m17-run{
  0%{opacity:0;transform:translateY(0)}
  8%{opacity:1}
  92%{opacity:1}
  100%{opacity:1;transform:translateY(132px)}
}

/* status dots the cursor drops in the margin as it passes each clause */
.m17-dot{position:absolute;left:8px;width:8px;height:8px;border-radius:50%;z-index:3;
  transform:scale(0);transform-origin:center}
.m17-dot.ok{background:var(--ok)}
.m17-dot.bad{background:var(--bad)}
.m17-dot.d1{top:11px}.m17-dot.d2{top:39px}.m17-dot.d3{top:67px}.m17-dot.d4{top:95px}.m17-dot.d5{top:123px}
.m17-root.play .m17-dot{animation:m17-pop .3s cubic-bezier(.34,1.56,.64,1) forwards}
.m17-root.play .m17-d1{animation-delay:.34s}
.m17-root.play .m17-d2{animation-delay:.74s}
.m17-root.play .m17-d3{animation-delay:1.14s}
.m17-root.play .m17-d4{animation-delay:1.54s}
.m17-root.play .m17-d5{animation-delay:1.94s}
@keyframes m17-pop{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* clause lines */
.m17-cl{position:relative;height:24px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.m17-bar{height:6px;border-radius:4px;background:#eef2f8}
.m17-bar.w1{width:92%}.m17-bar.w2{width:74%}.m17-bar.w3{width:84%}.m17-bar.w4{width:66%}.m17-bar.w5{width:88%}

/* a green tick that draws beside a clean clause */
.m17-tick{position:absolute;right:2px;top:50%;width:13px;height:13px;margin-top:-6.5px}
.m17-tick path{fill:none;stroke:var(--ok);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:16;stroke-dashoffset:16}
.m17-root.play .m17-tick path{animation:m17-draw .3s ease forwards}
.m17-root.play .m17-clA .m17-tick path{animation-delay:.4s}
.m17-root.play .m17-clC .m17-tick path{animation-delay:1.2s}
.m17-root.play .m17-clE .m17-tick path{animation-delay:2.0s}
@keyframes m17-draw{to{stroke-dashoffset:0}}

/* the flagged risky clause: a red underline draws itself under the wording */
.m17-risk{position:relative;display:inline-block;font-size:10.5px;color:var(--ink);font-weight:600;
  padding-bottom:2px}
.m17-risk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--bad);transform:scaleX(0);transform-origin:left center}
.m17-root.play .m17-clB .m17-risk::after{animation:m17-uline .4s cubic-bezier(.5,0,.3,1) .9s forwards,
  m17-upulse 1.6s ease-in-out 1.5s 1}
.m17-root.play .m17-clD .m17-risk::after{animation:m17-uline .4s cubic-bezier(.5,0,.3,1) 1.7s forwards}
@keyframes m17-uline{to{transform:scaleX(1)}}
@keyframes m17-upulse{0%,100%{opacity:1}50%{opacity:.4}}

/* margin callout that slides out from a flagged clause */
.m17-call{position:absolute;right:6px;z-index:5;
  display:inline-flex;align-items:center;gap:5px;
  background:#fff;border:1px solid rgba(239,68,68,.42);color:var(--bad);
  font-weight:700;font-size:9.5px;line-height:1;white-space:nowrap;
  padding:4px 8px;border-radius:999px;box-shadow:0 6px 16px rgba(239,68,68,.16);
  transform:translateX(14px) scale(.6);opacity:0;transform-origin:right center}
.m17-call svg{width:10px;height:10px;flex:none}
.m17-callB{top:34px}
.m17-callD{top:90px}
.m17-root.play .m17-callB{animation:m17-slide .45s cubic-bezier(.2,1.4,.4,1) 1.0s forwards}
.m17-root.play .m17-callD{animation:m17-slide .45s cubic-bezier(.2,1.4,.4,1) 1.8s forwards}
@keyframes m17-slide{0%{transform:translateX(14px) scale(.6);opacity:0}
  100%{transform:translateX(0) scale(1);opacity:1}}

/* the suggested fix: old wording struck through, compliant replacement gradient-wipes in over it */
.m17-fix{position:relative;margin-top:7px;border-top:1px dashed var(--line);padding-top:7px;
  font-size:10px;line-height:1.35}
.m17-fix .lbl{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);
  font-weight:700;margin-bottom:3px;display:flex;align-items:center;gap:5px}
.m17-fix .lbl::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--g)}
.m17-old{position:relative;display:inline-block;color:var(--mut);font-weight:600}
.m17-old::after{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:1.5px;
  background:var(--bad);transform:scaleX(0);transform-origin:left center}
.m17-root.play .m17-old::after{animation:m17-strike .4s cubic-bezier(.5,0,.3,1) 2.2s forwards}
@keyframes m17-strike{to{transform:scaleX(1)}}
.m17-new{position:relative;display:block;margin-top:2px;font-weight:700;color:var(--ink);
  clip-path:inset(0 100% 0 0)}
.m17-new b{background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.m17-root.play .m17-new{animation:m17-wipe .55s cubic-bezier(.4,0,.2,1) 2.45s forwards}
@keyframes m17-wipe{to{clip-path:inset(0 0 0 0)}}

/* closing state-clean shield: 2 issues -> 0 */
.m17-shield{display:flex;align-items:center;gap:8px;margin-top:9px;
  opacity:0;transform:translateY(4px)}
.m17-root.play .m17-shield{animation:m17-rise .4s cubic-bezier(.2,.9,.3,1) 3.05s forwards}
@keyframes m17-rise{to{opacity:1;transform:translateY(0)}}
.m17-sbadge{display:inline-flex;align-items:center;gap:5px;
  background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.34);color:#0b7a5c;
  font-weight:700;font-size:10px;padding:4px 9px;border-radius:999px}
.m17-sbadge svg{width:12px;height:12px;flex:none}
.m17-count{margin-left:auto;font-size:9.5px;color:var(--sub);font-weight:600;
  display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.m17-count s{color:var(--bad);text-decoration-thickness:1.5px}
.m17-count .arr{color:var(--mut)}
.m17-count b{color:var(--ok)}

@media (prefers-reduced-motion:reduce){
  .m17-root *{animation:none!important}
  .m17-cur{opacity:1!important;transform:translateY(132px)!important}
  .m17-dot{transform:scale(1)!important}
  .m17-tick path{stroke-dashoffset:0!important}
  .m17-risk::after,.m17-old::after{transform:scaleX(1)!important}
  .m17-call{opacity:1!important;transform:none!important}
  .m17-new{clip-path:inset(0 0 0 0)!important}
  .m17-shield{opacity:1!important;transform:none!important}
}

/* ===== m18 ===== */
.m18-root{--m18-h1:#7c5cff;font:13px/1.4 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);}
.m18-board{padding:8px 10px 6px;}
.m18-grid{display:grid;grid-template-columns:1fr 86px;gap:10px;}
.m18-list{position:relative;display:flex;flex-direction:column;}
/* each row is absolutely flowed via translateY so reorder is a pure transform (FLIP) */
.m18-row{position:relative;display:grid;grid-template-columns:26px 1fr 34px;align-items:center;gap:8px;
  height:38px;padding:0 8px 0 10px;border:1px solid var(--line);border-radius:10px;background:#fff;
  margin-bottom:6px;opacity:.45;transform:translateY(0);
  transition:transform .55s cubic-bezier(.5,0,.15,1),opacity .4s ease,box-shadow .4s ease,border-color .4s ease;}
.m18-root.play .m18-row{opacity:.45;}
/* dim/resolve: rows un-dim once bars resolve */
.m18-root.play .m18-row{animation:m18-undim .4s ease forwards;}
.m18-root.play .m18-r1{animation-delay:1.0s;}
.m18-root.play .m18-r2{animation-delay:1.1s;}
.m18-root.play .m18-r3{animation-delay:1.2s;}
.m18-root.play .m18-r4{animation-delay:1.3s;}
@keyframes m18-undim{to{opacity:1;}}

/* leader gradient left-edge bar (breathing ambient) */
.m18-row::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:var(--g);opacity:0;transition:opacity .4s ease;}
.m18-lead::before{opacity:1;animation:m18-breathe 2.8s ease-in-out infinite;}
@keyframes m18-breathe{0%,100%{opacity:.45;}50%{opacity:1;}}
.m18-lead{border-color:#d8ddf2;box-shadow:0 6px 16px -10px rgba(124,92,255,.5);}

.m18-rank{font-weight:800;font-size:12px;color:var(--mut);text-align:center;transition:color .4s ease;}
.m18-lead .m18-rank{color:var(--m18-h1);}
.m18-who{min-width:0;}
.m18-nm{font-weight:700;font-size:12px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m18-bar{height:5px;border-radius:4px;background:#eef1f8;margin-top:4px;overflow:hidden;}
.m18-fill{height:100%;width:0;border-radius:4px;background:var(--g);
  transition:width .8s cubic-bezier(.4,0,.1,1);}
.m18-root.play .m18-fill{width:var(--w);}
.m18-sc{font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;text-align:right;color:var(--sub);}
.m18-lead .m18-sc{color:var(--ink);}

/* Top match ribbon slides in on the leader */
.m18-ribbon{position:absolute;top:-7px;right:8px;display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:999px;background:var(--g);color:#fff;font-size:9px;font-weight:800;
  letter-spacing:.02em;box-shadow:0 4px 10px -4px rgba(124,92,255,.6);
  transform:translateX(14px);opacity:0;}
.m18-root.play .m18-ribbon{animation:m18-ribbon .5s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:2.05s;}
@keyframes m18-ribbon{to{transform:translateX(0);opacity:1;}}
.m18-ribbon svg{width:8px;height:8px;}

/* pipeline rail beside the leader */
.m18-rail{border:1px solid var(--line);border-radius:10px;padding:8px 8px;background:#fafbfe;
  display:flex;flex-direction:column;gap:0;}
.m18-rtitle{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:7px;}
.m18-step{position:relative;display:flex;align-items:center;gap:7px;height:22px;}
.m18-step:not(:last-child)::after{content:"";position:absolute;left:5px;top:16px;width:2px;height:14px;background:var(--line);}
.m18-dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--line);background:#fff;flex:none;
  transition:border-color .35s ease,background .35s ease;}
.m18-slab{font-size:10px;font-weight:600;color:var(--mut);transition:color .35s ease;}
.m18-root.play .m18-s1 .m18-dot{animation:m18-on .35s ease forwards;animation-delay:2.2s;}
.m18-root.play .m18-s2 .m18-dot{animation:m18-on .35s ease forwards;animation-delay:2.4s;}
.m18-root.play .m18-s3 .m18-dot{animation:m18-on .35s ease forwards;animation-delay:2.6s;}
.m18-root.play .m18-s1 .m18-slab{animation:m18-onl .35s ease forwards;animation-delay:2.2s;}
.m18-root.play .m18-s2 .m18-slab{animation:m18-onl .35s ease forwards;animation-delay:2.4s;}
.m18-root.play .m18-s3 .m18-slab{animation:m18-onl .35s ease forwards;animation-delay:2.6s;}
@keyframes m18-on{to{border-color:transparent;background:var(--ok);}}
@keyframes m18-onl{to{color:var(--ink);}}
/* traveling active pulse on the rail */
.m18-trav{position:absolute;left:2px;width:11px;height:11px;border-radius:50%;background:rgba(16,185,129,.35);
  opacity:0;transform:translateY(0);}
.m18-root.play .m18-trav{animation:m18-travel 1.2s ease forwards;animation-delay:2.2s;}
@keyframes m18-travel{0%{opacity:1;transform:translateY(0) scale(1);}
  100%{opacity:0;transform:translateY(44px) scale(1.6);}}

/* ===== m19 ===== */
.m19-root{font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);padding:14px 16px 16px}

/* segmented dial */
.m19-dial{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;background:#f1f5f9;border:1px solid var(--line);border-radius:11px;padding:4px;margin-top:2px}
.m19-seg{position:relative;z-index:2;text-align:center;font-size:11px;font-weight:600;color:var(--mut);padding:6px 2px;transition:color .35s ease}
.m19-knob{position:absolute;z-index:1;top:4px;left:4px;width:calc((100% - 8px)/3);height:calc(100% - 8px);border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.12),0 0 0 1px rgba(106,158,255,.18);transform:translateX(0);transition:transform .55s cubic-bezier(.5,.05,.2,1)}
.m19-root.play .m19-knob{animation:m19-slide 2.4s cubic-bezier(.5,.05,.2,1) forwards}
.m19-root .m19-knob{animation:m19-breath 3.2s ease-in-out infinite}
.m19-root.play .m19-knob{animation:m19-slide 2.4s cubic-bezier(.5,.05,.2,1) forwards, m19-breath 3.2s ease-in-out infinite}
@keyframes m19-slide{0%{transform:translateX(0)}38%{transform:translateX(100%)}72%,100%{transform:translateX(200%)}}
@keyframes m19-breath{0%,100%{box-shadow:0 1px 3px rgba(15,23,42,.12),0 0 0 1px rgba(106,158,255,.18)}50%{box-shadow:0 1px 5px rgba(15,23,42,.14),0 0 0 3px rgba(106,158,255,.20)}}

/* active label tracks the knob via staged opacity (CSS-only, no JS) */
.m19-seg.a0{color:var(--ink)}
.m19-root.play .m19-seg.a0{animation:m19-lblA 2.4s steps(1) forwards}
.m19-root.play .m19-seg.a1{animation:m19-lblB 2.4s steps(1) forwards}
.m19-root.play .m19-seg.a2{animation:m19-lblC 2.4s steps(1) forwards}
@keyframes m19-lblA{0%{color:var(--ink)}38%,100%{color:var(--mut)}}
@keyframes m19-lblB{0%{color:var(--mut)}38%{color:var(--ink)}72%,100%{color:var(--mut)}}
@keyframes m19-lblC{0%{color:var(--mut)}72%{color:var(--mut)}72.1%,100%{color:var(--ink)}}

/* pills */
.m19-pills{margin-top:11px;display:grid;gap:7px}
.m19-pill{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:#fff;transition:border-color .4s ease,background .4s ease}
.m19-name{font-size:12px;font-weight:600;flex:1;letter-spacing:-.1px}
.m19-ctl{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.2px;padding:3px 7px;border-radius:999px;white-space:nowrap}

/* control: locked (grey "Ask first") vs auto-bolt (green) */
.m19-lock{background:#f1f5f9;color:var(--sub)}
.m19-auto{background:rgba(16,185,129,.12);color:#0f9d70}
.m19-ctl svg{width:11px;height:11px;display:block}

/* default = Co-pilot state: every pill locked. .pAuto pills flip green as autonomy climbs */
.m19-root.play .m19-pill.lo{animation:m19-pillGreen 2.4s ease forwards;animation-delay:.62s}
.m19-root.play .m19-pill.lo .m19-lock{animation:m19-ctlOut 2.4s ease forwards;animation-delay:.62s}
.m19-root.play .m19-pill.lo .m19-auto{animation:m19-ctlIn 2.4s ease forwards;animation-delay:.62s}

.m19-root.play .m19-pill.hi{animation:m19-pillGreen 2.4s ease forwards;animation-delay:1.5s}
.m19-root.play .m19-pill.hi .m19-lock{animation:m19-ctlOut 2.4s ease forwards;animation-delay:1.5s}
.m19-root.play .m19-pill.hi .m19-auto{animation:m19-ctlIn 2.4s ease forwards;animation-delay:1.5s}

@keyframes m19-pillGreen{to{border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.05)}}
@keyframes m19-ctlOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.85);display:none}}
@keyframes m19-ctlIn{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}

/* before-state: auto chip hidden, lock chip shown; flip swaps them */
.m19-pill .m19-auto{display:none}
.m19-root.play .m19-pill.lo .m19-auto,.m19-root.play .m19-pill.hi .m19-auto{display:inline-flex}
.m19-root.play .m19-pill.lo .m19-lock,.m19-root.play .m19-pill.hi .m19-lock{display:none}

/* Eviction guardrail pill: NEVER flips, lock pulses slowly */
.m19-pill.guard .m19-lock{background:#fef2f2;color:#b42318}
.m19-pill.guard .m19-lock svg{animation:m19-lockPulse 2.6s ease-in-out infinite}
@keyframes m19-lockPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* autonomy rail */
.m19-rail{margin-top:11px;height:5px;border-radius:999px;background:#eef2f7;overflow:hidden}
.m19-fill{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#8c6cff,#6a9eff,#48e2d9);transform-origin:left;transform:scaleX(.14);transition:transform .55s cubic-bezier(.5,.05,.2,1)}
.m19-root.play .m19-fill{animation:m19-railGrow 2.4s cubic-bezier(.5,.05,.2,1) forwards}
@keyframes m19-railGrow{0%{transform:scaleX(.14)}38%{transform:scaleX(.55)}72%,100%{transform:scaleX(.9)}}
.m19-foot{margin-top:7px;font-size:10.5px;color:var(--mut);display:flex;justify-content:space-between}

/* ===== m20 ===== */
/* m20 - Tenant AI (Luna): two-path honesty (answer vs abstain+escalate) */
.m20-root{font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);position:relative}
.m20-root .top .ic svg{display:block}

/* shared chrome under the doc-scan + chat */
.m20-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:10px;padding:10px 11px 11px}

/* ---- left: lease doc with scan + clause rows ---- */
.m20-doc{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 9px 8px;overflow:hidden}
.m20-doc-h{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;color:var(--sub);letter-spacing:.02em;margin-bottom:7px}
.m20-doc-h b{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(16,185,129,.14)}
.m20-row{position:relative;display:flex;align-items:center;gap:6px;padding:4px 5px;border-radius:6px;margin-bottom:4px;background:#f8fafc;transition:background .3s ease}
.m20-row:last-child{margin-bottom:0}
.m20-line{height:5px;border-radius:3px;background:#e2e8f0;flex:1}
.m20-line.s{flex:.55}
.m20-key{font-size:9px;font-weight:700;color:var(--mut);white-space:nowrap}

/* a clause that holds the found answer (rent) */
.m20-row.m20-hit{background:#f8fafc}
.m20-root.play .m20-row.m20-hit{animation:m20-hitlight 1s ease .95s both}
@keyframes m20-hitlight{
  0%{background:#f8fafc}
  35%{background:rgba(106,158,255,.16)}
  100%{background:rgba(16,185,129,.10)}
}
.m20-row.m20-hit .m20-line{background:linear-gradient(90deg,#cbd5e1,#cbd5e1);transition:background .4s ease}
.m20-root.play .m20-row.m20-hit .m20-line{animation:m20-fillline .5s ease 1.15s both}
@keyframes m20-fillline{to{background:linear-gradient(90deg,#6A9EFF,#48E2D9)}}

/* the empty/absent clause (gate code) - dashed not-on-file */
.m20-row.m20-miss{background:#fff;border:1px dashed transparent}
.m20-root.play .m20-row.m20-miss{animation:m20-missflash 1.1s ease 2.0s both}
@keyframes m20-missflash{
  0%{background:#fff;border-color:transparent}
  45%{background:rgba(239,68,68,.07);border-color:rgba(239,68,68,.35)}
  100%{background:rgba(148,163,184,.07);border-color:rgba(148,163,184,.45)}
}
.m20-miss .m20-line{background:repeating-linear-gradient(90deg,#cbd5e1 0 5px,transparent 5px 9px);opacity:.6}
.m20-miss .m20-key{color:var(--mut)}

/* scanning highlight sweep over the doc */
.m20-scan{position:absolute;left:0;right:0;top:-30%;height:34%;
  background:linear-gradient(180deg,transparent,rgba(106,158,255,.22),transparent);
  opacity:0;pointer-events:none}
.m20-root.play .m20-scan{animation:m20-sweep 1.0s ease .35s 1 both}
@keyframes m20-sweep{
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(280%)}
}
/* ambient: faint reading underline gliding across lines */
.m20-read{position:absolute;left:9px;width:36px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(106,158,255,.5),transparent);
  bottom:8px;opacity:.0;animation:m20-readglide 4.2s ease-in-out 2.9s infinite}
@keyframes m20-readglide{
  0%,100%{opacity:0;transform:translateX(0)}
  20%{opacity:.7}
  50%{opacity:.7;transform:translateX(120px)}
  80%{opacity:0;transform:translateX(150px)}
}

/* ---- right: chat thread, Luna orb, two replies, escalation wire ---- */
.m20-chat{display:flex;flex-direction:column;gap:6px;position:relative}
.m20-q{align-self:flex-end;max-width:84%;background:#eef2f9;border:1px solid var(--line);
  color:var(--ink);font-size:11px;padding:5px 8px;border-radius:10px 10px 3px 10px;
  opacity:0;transform:translateY(6px)}
.m20-a{align-self:flex-start;max-width:90%;display:flex;gap:6px;opacity:0;transform:translateY(6px)}

/* Luna orb */
.m20-orb{flex:none;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#a9c4ff,#6A9EFF 55%,#8C6CFF);
  box-shadow:0 0 0 3px rgba(106,158,255,.14);margin-top:1px;
  animation:m20-breathe 3.4s ease-in-out infinite}
@keyframes m20-breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 3px rgba(106,158,255,.14)}
  50%{transform:scale(1.08);box-shadow:0 0 0 4px rgba(106,158,255,.20)}}

.m20-bub{background:#fff;border:1px solid var(--line);border-radius:10px 10px 10px 3px;
  padding:5px 8px;font-size:11px;box-shadow:0 1px 0 rgba(15,23,42,.03)}
.m20-bub b{font-weight:700}

/* the quoted answer that "lifts out" of the clause and pins in */
.m20-quote{display:inline-flex;align-items:center;gap:4px;margin-top:3px;
  background:linear-gradient(90deg,rgba(106,158,255,.12),rgba(72,226,217,.12));
  border:1px solid rgba(106,158,255,.35);border-radius:7px;padding:2px 6px;
  font-size:10.5px;font-weight:700;color:#1e3a8a;
  opacity:0;transform:translateY(-8px) scale(.96)}
.m20-root.play .m20-quote{animation:m20-pin .5s cubic-bezier(.2,1.3,.4,1) 1.35s both}
@keyframes m20-pin{0%{opacity:0;transform:translateY(-8px) scale(.96)}
  60%{opacity:1;transform:translateY(2px) scale(1.02)}
  100%{opacity:1;transform:translateY(0) scale(1)}}

/* "Not on file" chip on the abstain reply */
.m20-chip{display:inline-flex;align-items:center;gap:4px;margin-top:3px;
  background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.45);
  border-radius:7px;padding:2px 6px;font-size:10px;font-weight:700;color:var(--sub);
  opacity:0;transform:translateY(4px)}
.m20-chip i{width:5px;height:5px;border-radius:1px;background:var(--mut);font-style:normal}
.m20-root.play .m20-chip{animation:m20-rise .4s ease 2.35s both}

/* escalation: routed dot travels Luna -> PM avatar */
.m20-esc{display:flex;align-items:center;gap:7px;margin-top:5px;padding-left:24px;
  opacity:0;transform:translateY(4px)}
.m20-root.play .m20-esc{animation:m20-rise .4s ease 2.55s both}
.m20-wire{position:relative;flex:1;height:14px}
.m20-wire svg{position:absolute;inset:0;width:100%;height:100%}
.m20-wpath{stroke:#cbd5e1;stroke-width:1.6;stroke-dasharray:3 3;fill:none}
.m20-dot{fill:#6A9EFF}
.m20-root.play .m20-dot{animation:m20-travel 1.1s ease 2.7s 1 both}
@keyframes m20-travel{0%{opacity:0;transform:translateX(0)}
  12%{opacity:1}90%{opacity:1}100%{opacity:1;transform:translateX(54px)}}
.m20-pm{display:flex;align-items:center;gap:5px;flex:none;font-size:9.5px;font-weight:700;color:var(--sub)}
.m20-pmav{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:#eef2f9;border:1px solid var(--line);font-size:9px;font-weight:800;color:#1e3a8a}
.m20-root.play .m20-pmav{animation:m20-ping .5s ease 3.55s both}
@keyframes m20-ping{0%{box-shadow:0 0 0 0 rgba(106,158,255,.45)}
  100%{box-shadow:0 0 0 6px rgba(106,158,255,0)}}

@keyframes m20-rise{to{opacity:1;transform:translateY(0)}}

/* reveal timings for the four chat blocks */
.m20-root.play .m20-q1{animation:m20-in .4s ease .15s both}
.m20-root.play .m20-a1{animation:m20-in .4s ease 1.15s both}
.m20-root.play .m20-q2{animation:m20-in .4s ease 1.8s both}
.m20-root.play .m20-a2{animation:m20-in .4s ease 2.2s both}
@keyframes m20-in{to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .m20-root *{animation-duration:.001s!important;animation-delay:0s!important}
  .m20-orb{animation:none}.m20-read{display:none}
}

/* ===== m21 ===== */
.m21-root{font:13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);padding:12px 14px}

.m21-stamp{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:7px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:11px;color:var(--ink);box-shadow:0 1px 3px rgba(15,23,42,.06);transform:scale(1.55) rotate(-7deg);opacity:0;transform-origin:left center}
.m21-root.play .m21-stamp{animation:m21-stamp .45s cubic-bezier(.2,1.4,.4,1) .1s forwards}
@keyframes m21-stamp{0%{transform:scale(1.55) rotate(-7deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-2deg);opacity:1}}
.m21-stamp .m21-flag{width:14px;height:14px;border-radius:3px;background:linear-gradient(135deg,#1e293b,#475569);color:#fff;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.3px}

.m21-body{display:flex;gap:13px;margin-top:13px;align-items:flex-start}
.m21-left{flex:1.4;min-width:0}

.m21-rulewrap{position:relative;padding-top:18px;padding-right:6px}
.m21-rule{position:relative;height:6px;border-radius:3px;background:#eef2f8;overflow:hidden}
.m21-wedge{position:absolute;top:0;left:0;height:6px;border-radius:3px;background:linear-gradient(90deg,#94a3b8,#fbbf24);width:100%;transform:scaleX(0);transform-origin:left center}
.m21-root.play .m21-wedge{animation:m21-sweep 1.5s cubic-bezier(.4,0,.25,1) .5s forwards}
@keyframes m21-sweep{to{transform:scaleX(.82)}}

.m21-mark{position:absolute;top:9px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px}
.m21-mark .m21-dot{width:8px;height:8px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.m21-mark .m21-lbl{font-size:9px;font-weight:700;color:var(--sub);white-space:nowrap;letter-spacing:.2px}
.m21-served{left:2%}
.m21-served .m21-dot{background:#475569}
.m21-deadline{left:82%}
.m21-deadline .m21-dot{background:var(--bad);position:relative}
.m21-deadline .m21-dot::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(239,68,68,.5);opacity:0;animation:m21-pulse 1.9s ease-out 2s infinite}
@keyframes m21-pulse{0%{transform:scale(.6);opacity:.85}100%{transform:scale(1.7);opacity:0}}
.m21-deadline .m21-lbl{color:var(--bad)}

.m21-count{margin-top:20px;display:flex;align-items:baseline;gap:7px}
.m21-num{font-size:34px;font-weight:800;line-height:1;color:#475569;font-variant-numeric:tabular-nums;transition:color .5s ease}
.m21-root.play .m21-num{animation:m21-amber 1.5s ease .5s forwards}
@keyframes m21-amber{0%,45%{color:#475569}100%{color:#d97706}}
.m21-num b{display:inline-block}
.m21-unit{font-size:12px;font-weight:600;color:var(--sub)}
.m21-sub{font-size:10px;color:var(--mut);margin-top:3px;font-weight:600}

.m21-doc{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px;box-shadow:0 2px 8px rgba(15,23,42,.05);transform:translateY(14px);opacity:0}
.m21-root.play .m21-doc{animation:m21-rise .5s cubic-bezier(.2,.9,.3,1) 1.3s forwards}
@keyframes m21-rise{to{transform:translateY(0);opacity:1}}
.m21-doctitle{font-size:11px;font-weight:700;color:var(--ink);margin-bottom:7px}
.m21-line{height:4px;border-radius:2px;background:#eef2f8;margin-bottom:5px}
.m21-line.s{width:70%}
.m21-line.m{width:90%}
.m21-check{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:10px;font-weight:700;color:var(--ok)}
.m21-check svg{flex:none}
.m21-pill{display:inline-block;margin-top:8px;padding:3px 8px;border-radius:20px;background:rgba(16,185,129,.1);color:#047857;font-size:9px;font-weight:800;letter-spacing:.3px;border:1px solid rgba(16,185,129,.25)}

/* ===== m22 ===== */
/* m22 - Accounting: ledger rows fold into a Schedule E statement, then export arc (HERO) */
.m22-root{font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);position:relative;overflow:hidden}

/* ambient loop 1 of 2: a slow brand sheen across the card */
.m22-shimmer{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 42%,rgba(106,158,255,.05) 50%,transparent 58%);background-size:240% 100%;background-position:120% 0;animation:m22-shim 6s ease-in-out infinite}
@keyframes m22-shim{0%{background-position:120% 0}60%{background-position:-40% 0}100%{background-position:-40% 0}}

.m22-wrap{position:relative;padding:10px 12px 12px;min-height:178px}

/* phase 1: ledger rows stream in, then fold up and away */
.m22-ledger{display:flex;flex-direction:column;gap:6px;transform-origin:top center;will-change:transform,opacity}
.m22-row{display:flex;align-items:center;gap:8px;padding:6px 9px;background:#fff;border:1px solid var(--line);border-radius:9px;opacity:0;transform:translateY(9px)}
.m22-root.play .m22-row{animation:m22-up .42s cubic-bezier(.2,.7,.2,1) forwards}
.m22-root.play .m22-row:nth-child(1){animation-delay:.08s}
.m22-root.play .m22-row:nth-child(2){animation-delay:.18s}
.m22-root.play .m22-row:nth-child(3){animation-delay:.28s}
.m22-root.play .m22-row:nth-child(4){animation-delay:.38s}
@keyframes m22-up{to{opacity:1;transform:translateY(0)}}
.m22-cat{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.m22-c1{background:#6A9EFF}.m22-c2{background:#8C6CFF}.m22-c3{background:#48E2D9}.m22-c4{background:#f59e0b}
.m22-lbl{flex:1;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m22-sub{color:var(--mut);font-size:11px;font-weight:500}
.m22-amt{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}

/* the ledger lifts and collapses upward as the statement takes its place (the fold) */
.m22-root.play .m22-ledger{animation:m22-fold .5s cubic-bezier(.4,0,.2,1) 1.18s forwards}
@keyframes m22-fold{to{opacity:0;transform:translateY(-10px) scaleY(.9)}}

/* phase 2 (HERO): the statement folds down into place over the ledger */
.m22-stmt{position:absolute;left:12px;right:12px;top:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 11px;box-shadow:0 6px 18px rgba(28,40,82,.07);opacity:0;transform:translateY(7px) scaleY(.9);transform-origin:top center;will-change:transform,opacity}
.m22-root.play .m22-stmt{animation:m22-stmtin .52s cubic-bezier(.2,.7,.2,1) 1.24s forwards}
@keyframes m22-stmtin{0%{opacity:0;transform:translateY(7px) scaleY(.9)}100%{opacity:1;transform:translateY(0) scaleY(1)}}
.m22-shead{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.04em;padding-bottom:6px;margin-bottom:5px;border-bottom:1px solid var(--line)}
.m22-shead span{color:var(--mut);font-weight:600;text-transform:none;letter-spacing:0}
.m22-sline{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12px;opacity:0;transform:translateX(-5px)}
.m22-root.play .m22-sline{animation:m22-slin .34s ease forwards}
.m22-root.play .m22-sline:nth-child(2){animation-delay:1.46s}
.m22-root.play .m22-sline:nth-child(3){animation-delay:1.56s}
.m22-root.play .m22-sline:nth-child(4){animation-delay:1.66s}
@keyframes m22-slin{to{opacity:1;transform:translateX(0)}}
.m22-sdot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.m22-sname{flex:1;font-weight:600}
.m22-snum{font-variant-numeric:tabular-nums;font-weight:700}
.m22-net{display:flex;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);font-weight:800;opacity:0;transform:translateY(4px)}
.m22-root.play .m22-net{animation:m22-netin .4s cubic-bezier(.2,.7,.2,1) 1.8s forwards}
@keyframes m22-netin{to{opacity:1;transform:translateY(0)}}
.m22-net .m22-pos{color:var(--ok)}

/* AI narrative line wipes in under the statement (clip-path, not width) */
.m22-narr{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:11.5px;color:var(--sub);font-weight:600;clip-path:inset(0 100% 0 0);opacity:.001}
.m22-root.play .m22-narr{animation:m22-wipe .5s ease 2.02s forwards}
@keyframes m22-wipe{to{clip-path:inset(0 0 0 0);opacity:1}}
.m22-spark{width:13px;height:13px;flex:0 0 auto}

/* export chip arcs out and settles, then ambient loop 2 of 2: a gentle resting glow */
.m22-exp{position:absolute;right:14px;bottom:12px;display:inline-flex;align-items:center;gap:6px;background:var(--g);color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:20px;box-shadow:0 4px 12px rgba(106,158,255,.3);opacity:0;transform:translate(5px,7px) scale(.82)}
.m22-root.play .m22-exp{animation:m22-flyout .5s cubic-bezier(.34,1.4,.5,1) 2.18s forwards,m22-glow 3s ease-in-out 2.7s infinite}
@keyframes m22-flyout{0%{opacity:0;transform:translate(5px,7px) scale(.82)}55%{opacity:1;transform:translate(-2px,-4px) scale(1.04)}100%{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes m22-glow{0%,100%{box-shadow:0 4px 12px rgba(106,158,255,.28)}50%{box-shadow:0 5px 16px rgba(106,158,255,.42)}}
.m22-exp svg{width:12px;height:12px}

/* ===== m23 ===== */
/* m23 -- Portfolio worklist heals the grid: 3 items resolve top->bottom, each flips a
   specific amber tile -> green with a ripple; rollup occupancy 10/12 -> 11/12, rent-roll firms.
   Distinct from m08 (numbers/chart, no map) and m12 (single unit): hero is the LINKED grid<->worklist. */
.m23-root{position:relative;font:12px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}

/* rollup strip */
.m23-roll{display:flex;gap:8px;margin:10px 0 9px}
.m23-rc{flex:1;border:1px solid var(--line);border-radius:9px;padding:6px 9px;background:#fff}
.m23-rl{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700}
.m23-rv{font-size:15px;font-weight:800;line-height:1.1;margin-top:1px;color:var(--ink);display:flex;align-items:baseline;gap:3px}
/* occupancy odometer: 10 -> 11 swap (two-number track scrolls up one slot) */
.m23-occ{position:relative;display:inline-block;overflow:hidden;height:17px;vertical-align:bottom}
.m23-occ .m23-track{display:block;transform:translateY(0)}
.m23-occ .m23-n{display:block;height:17px;line-height:17px;font-weight:800}
.m23-root.play .m23-occ .m23-track{animation:m23-roll .6s cubic-bezier(.34,1.4,.5,1) 2.15s forwards}
.m23-rden{font-size:11px;font-weight:700;color:var(--mut)}
.m23-rdelta{font-size:8.5px;font-weight:700;color:var(--ok);opacity:0;transform:translateY(3px)}
.m23-root.play .m23-rdelta{animation:m23-fade .45s ease 2.4s forwards}

/* body grid: unit map (left) + worklist (right) */
.m23-body{display:grid;grid-template-columns:108px 1fr;gap:13px;align-items:start}

/* ---- unit grid (3x4 = 12 tiles) ---- */
.m23-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:7px;
  border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#fff,#fbfcfe);overflow:hidden}
.m23-t{position:relative;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:800;letter-spacing:.02em;overflow:hidden}
.m23-t .m23-tl{position:relative;z-index:2}
.m23-t.ok{background:rgba(16,185,129,.12);color:#0a7a55;box-shadow:inset 0 0 0 1px rgba(16,185,129,.22)}
.m23-t.vac{background:#f1f5f9;color:#94a3b8;box-shadow:inset 0 0 0 1px #e2e8f0}
.m23-t.amber{background:rgba(245,158,11,.16);color:#b45309;box-shadow:inset 0 0 0 1px rgba(245,158,11,.34)}
/* amber attention pulse (ambient, only while still amber) */
.m23-t.amber::after{content:"";position:absolute;inset:0;border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(245,158,11,.6);opacity:0;animation:m23-attn 1.9s ease-in-out infinite}
/* heal overlay: a green wash + ripple that flips an amber tile when its item clears */
.m23-t .m23-heal{position:absolute;inset:0;border-radius:6px;background:rgba(16,185,129,.14);
  box-shadow:inset 0 0 0 1px rgba(16,185,129,.3);opacity:0;z-index:1}
.m23-t .m23-rip{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;
  background:var(--ok);opacity:0;transform:scale(0);z-index:1}
/* tiles heal in worklist order: T2 (1.0s), T7 (1.7s), T11 (2.35s) */
.m23-root.play .m23-t.h1 .m23-heal{animation:m23-healin .5s ease .95s forwards}
.m23-root.play .m23-t.h2 .m23-heal{animation:m23-healin .5s ease 1.65s forwards}
.m23-root.play .m23-t.h3 .m23-heal{animation:m23-healin .5s ease 2.30s forwards}
.m23-root.play .m23-t.h1 .m23-rip{animation:m23-ripple .7s ease-out .95s forwards}
.m23-root.play .m23-t.h2 .m23-rip{animation:m23-ripple .7s ease-out 1.65s forwards}
.m23-root.play .m23-t.h3 .m23-rip{animation:m23-ripple .7s ease-out 2.30s forwards}
/* once healed, kill the amber attention pulse + recolor the label/box to green */
.m23-root.play .m23-t.h1{animation:m23-toGreen .01s linear 1.45s forwards}
.m23-root.play .m23-t.h2{animation:m23-toGreen .01s linear 2.15s forwards}
.m23-root.play .m23-t.h3{animation:m23-toGreen .01s linear 2.80s forwards}

/* ambient scan highlight sweeping over the grid */
.m23-scan{position:absolute;top:0;bottom:0;width:40%;left:0;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(106,158,255,.14),transparent);
  transform:translateX(-130%);animation:m23-sweep 4.2s ease-in-out infinite}

/* ---- worklist (right) ---- */
.m23-wl{display:flex;flex-direction:column;gap:6px}
.m23-wh{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:1px}
.m23-it{position:relative;display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:9px;padding:6px 9px;background:#fff;
  transform-origin:top center}
.m23-pri{width:6px;height:6px;border-radius:2px;background:#f59e0b;flex:none;box-shadow:0 0 0 3px rgba(245,158,11,.12)}
.m23-itxt{flex:1;min-width:0}
.m23-itt{font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m23-its{font-size:9px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m23-chk{width:16px;height:16px;flex:none}
.m23-chk circle{fill:none;stroke:#cbd5e1;stroke-width:2}
.m23-chk path{fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:14;stroke-dashoffset:14}
/* each item: check draws, then it slides off as "done" */
.m23-root.play .m23-i1 .m23-chk circle{animation:m23-ring .3s ease .85s forwards}
.m23-root.play .m23-i2 .m23-chk circle{animation:m23-ring .3s ease 1.55s forwards}
.m23-root.play .m23-i3 .m23-chk circle{animation:m23-ring .3s ease 2.20s forwards}
.m23-root.play .m23-i1 .m23-chk path{animation:m23-draw .35s ease .9s forwards}
.m23-root.play .m23-i2 .m23-chk path{animation:m23-draw .35s ease 1.6s forwards}
.m23-root.play .m23-i3 .m23-chk path{animation:m23-draw .35s ease 2.25s forwards}
.m23-root.play .m23-i1 .m23-pri{animation:m23-pridone .3s ease 1.0s forwards}
.m23-root.play .m23-i2 .m23-pri{animation:m23-pridone .3s ease 1.7s forwards}
.m23-root.play .m23-i3 .m23-pri{animation:m23-pridone .3s ease 2.35s forwards}
.m23-root.play .m23-i1{animation:m23-slideoff .5s cubic-bezier(.5,0,.75,0) 1.15s forwards}
.m23-root.play .m23-i2{animation:m23-slideoff .5s cubic-bezier(.5,0,.75,0) 1.85s forwards}
.m23-root.play .m23-i3{animation:m23-slideoff .5s cubic-bezier(.5,0,.75,0) 2.50s forwards}
/* "all clear" rests in the gap the cleared items leave */
.m23-clear{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700;color:var(--ok);
  margin-top:2px;opacity:0;transform:translateY(3px)}
.m23-clear .m23-cd{width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:m23-beat 2.2s ease-in-out infinite}
.m23-root.play .m23-clear{animation:m23-fade .45s ease 2.85s forwards}

/* keyframes */
@keyframes m23-healin{to{opacity:1}}
@keyframes m23-ripple{0%{opacity:.5;transform:scale(0)}100%{opacity:0;transform:scale(9)}}
@keyframes m23-toGreen{to{
  background:rgba(16,185,129,.12);color:#0a7a55;
  box-shadow:inset 0 0 0 1px rgba(16,185,129,.22)}}
@keyframes m23-ring{to{stroke:var(--ok)}}
@keyframes m23-draw{to{stroke-dashoffset:0}}
@keyframes m23-pridone{to{background:var(--ok);box-shadow:0 0 0 3px rgba(16,185,129,.14)}}
@keyframes m23-slideoff{0%{transform:translateX(0);opacity:1}
  60%{transform:translateX(16px);opacity:0}100%{transform:translateX(16px) scaleY(0);opacity:0}}
@keyframes m23-roll{to{transform:translateY(-17px)}}
@keyframes m23-fade{to{opacity:1;transform:translateY(0)}}
/* ambient */
@keyframes m23-attn{0%,100%{opacity:0}50%{opacity:.9}}
@keyframes m23-sweep{0%{transform:translateX(-130%)}55%{transform:translateX(320%)}100%{transform:translateX(320%)}}
@keyframes m23-beat{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}}

@media (prefers-reduced-motion:reduce){
  .m23-t.amber::after,.m23-scan,.m23-clear .m23-cd{animation:none!important}
  .m23-t .m23-heal{opacity:1!important;animation:none!important}
  .m23-t .m23-rip{display:none}
  .m23-chk path{stroke-dashoffset:0!important;animation:none!important}
  .m23-chk circle{stroke:var(--ok)!important}
  .m23-i1,.m23-i2,.m23-i3{display:none}
  .m23-clear,.m23-rdelta{opacity:1!important;transform:none!important;animation:none!important}
  .m23-occ .m23-track{transform:translateY(-17px)!important;animation:none!important}
  .m23-t.h1,.m23-t.h2,.m23-t.h3{background:rgba(16,185,129,.12)!important;color:#0a7a55!important;box-shadow:inset 0 0 0 1px rgba(16,185,129,.22)!important}
}

/* ===== m24 ===== */
/* ===== m24 vendor sourcing radar (match + dispatch) ===== */
.m24-root{
  font:13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
}
.m24-grad-stop1{stop-color:#8b5cf6}
.m24-grad-stop2{stop-color:#3b82f6}
.m24-grad-stop3{stop-color:#2dd4bf}

/* radar field */
.m24-field{
  position:relative;
  width:100%;
  height:158px;
  margin-top:8px;
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 54%, #ffffff 0%, #f6f8fc 60%, #eef2f9 100%);
  border:1px solid var(--line);
}

/* faint range rings (static guide, not pulsing) */
.m24-ring{
  position:absolute;
  left:50%; top:54%;
  border-radius:50%;
  border:1px solid #e3e9f3;
  transform:translate(-50%,-50%);
}
.m24-ring.r1{width:54px;height:54px}
.m24-ring.r2{width:108px;height:108px}
.m24-ring.r3{width:168px;height:168px}
.m24-cross{
  position:absolute; left:50%; top:54%;
  width:168px; height:1px;
  background:#e8edf4;
  transform:translate(-50%,-50%);
}
.m24-cross.v{width:1px;height:168px}

/* rotating sweep arm (ambient) */
.m24-sweep{
  position:absolute;
  left:50%; top:54%;
  width:84px; height:84px;
  transform-origin:0 0;
  transform:translate(0,-1px) rotate(0deg);
  animation:m24-rotate 6s linear infinite;
  pointer-events:none;
}
.m24-sweep::before{
  content:"";
  position:absolute;
  left:0; top:-42px;
  width:84px; height:84px;
  border-radius:0 100% 0 0;
  background:conic-gradient(from 0deg,
    rgba(59,130,246,0.22) 0deg,
    rgba(59,130,246,0.05) 24deg,
    rgba(59,130,246,0) 46deg);
}
.m24-sweep-line{
  position:absolute;
  left:0; top:0;
  width:84px; height:2px;
  transform-origin:0 50%;
  background:linear-gradient(90deg, rgba(59,130,246,0.85), rgba(59,130,246,0));
  border-radius:2px;
}
@keyframes m24-rotate{to{transform:translate(0,-1px) rotate(360deg)}}

/* central ticket node */
.m24-core{
  position:absolute;
  left:50%; top:54%;
  width:34px; height:34px;
  transform:translate(-50%,-50%);
  border-radius:10px;
  background:linear-gradient(135deg,#0f172a,#243049);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(15,23,42,0.28);
  z-index:5;
}
.m24-core svg{width:18px;height:18px;display:block}
.m24-core::after{
  content:"";
  position:absolute; inset:-5px;
  border-radius:13px;
  border:1.5px solid rgba(59,130,246,0.35);
  opacity:0;
  animation:m24-corebreath 3.4s ease-in-out infinite;
}
@keyframes m24-corebreath{
  0%,100%{opacity:0; transform:scale(0.9)}
  50%{opacity:0.6; transform:scale(1)}
}

/* vendor pins */
.m24-pin{
  position:absolute;
  width:24px; height:24px;
  transform:translate(-50%,-50%) scale(0.4);
  opacity:0;
  z-index:4;
}
.m24-pin .dot{
  width:24px; height:24px;
  border-radius:50% 50% 50% 2px;
  background:#fff;
  border:1.5px solid #cdd7e6;
  box-shadow:0 3px 8px rgba(15,23,42,0.12);
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-45deg);
}
.m24-pin .dot b{
  transform:rotate(45deg);
  font-size:10px; font-weight:800; color:var(--sub);
  letter-spacing:-.3px;
}
/* badge that pops next to each pin */
.m24-badge{
  position:absolute;
  top:-7px; left:24px;
  white-space:nowrap;
  font-size:9px; font-weight:700;
  padding:2px 6px;
  border-radius:999px;
  background:#0f172a; color:#fff;
  opacity:0; transform:translateX(-4px) scale(0.8);
  box-shadow:0 3px 8px rgba(15,23,42,0.22);
}
.m24-badge.left{left:auto; right:24px}

/* pin placements (around the field) */
.m24-p1{left:24%; top:30%}
.m24-p2{left:78%; top:34%}
.m24-p3{left:30%; top:80%}
.m24-p4{left:72%; top:78%}

/* reveal each pin as the sweep passes (staggered) */
.m24-root.play .m24-pin{animation:m24-pinin .5s cubic-bezier(.2,.9,.3,1.4) forwards}
.m24-root.play .m24-p1{animation-delay:.35s}
.m24-root.play .m24-p2{animation-delay:.95s}
.m24-root.play .m24-p3{animation-delay:1.5s}
.m24-root.play .m24-p4{animation-delay:1.15s}
@keyframes m24-pinin{
  0%{opacity:0; transform:translate(-50%,-50%) scale(0.4)}
  60%{opacity:1; transform:translate(-50%,-58%) scale(1.12)}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1)}
}
.m24-root.play .m24-pin .m24-badge{animation:m24-badgein .45s ease forwards}
.m24-root.play .m24-p1 .m24-badge{animation-delay:.6s}
.m24-root.play .m24-p2 .m24-badge{animation-delay:1.2s}
.m24-root.play .m24-p3 .m24-badge{animation-delay:1.75s}
.m24-root.play .m24-p4 .m24-badge{animation-delay:1.4s}
@keyframes m24-badgein{
  0%{opacity:0; transform:translateX(-4px) scale(0.8)}
  100%{opacity:1; transform:translateX(0) scale(1)}
}

/* the SELECTED best-fit pin (p1) upgrades to brand */
.m24-root.play .m24-p1 .dot{animation:m24-select .5s ease 1.95s forwards}
@keyframes m24-select{
  to{
    border-color:#2dd4bf;
    background:linear-gradient(135deg,#8b5cf6,#3b82f6 55%,#2dd4bf);
    box-shadow:0 4px 12px rgba(45,212,191,0.4);
  }
}
.m24-root.play .m24-p1 .dot b{animation:m24-selecttxt .4s ease 1.95s forwards}
@keyframes m24-selecttxt{to{color:#fff}}
.m24-root.play .m24-p1 .m24-badge{} /* keep, recolored below */
.m24-root.play .m24-p1 .m24-badge.win{
  animation:m24-badgewin .4s ease 2s forwards;
}
@keyframes m24-badgewin{
  to{background:linear-gradient(135deg,#8b5cf6,#2dd4bf)}
}

/* taut dispatch line (core -> selected pin), drawn via SVG */
.m24-line{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:3;
  pointer-events:none;
}
.m24-line path{
  fill:none;
  stroke:url(#m24grad);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:200;
  stroke-dashoffset:200;
}
.m24-root.play .m24-line path{
  animation:m24-snap .5s cubic-bezier(.4,0,.2,1) 2.05s forwards;
}
@keyframes m24-snap{to{stroke-dashoffset:0}}

/* dispatch pill travels along the line */
.m24-pill{
  position:absolute;
  left:50%; top:54%;
  font-size:9.5px; font-weight:800;
  white-space:nowrap;
  padding:3px 9px;
  border-radius:999px;
  color:#065f46;
  background:#d1fae5;
  border:1px solid #6ee7b7;
  box-shadow:0 4px 12px rgba(16,185,129,0.25);
  transform:translate(-50%,-50%) scale(0.6);
  opacity:0;
  z-index:6;
}
.m24-root.play .m24-pill{
  animation:m24-travel 1.1s cubic-bezier(.5,0,.3,1) 2.45s forwards;
}
/* travel from core toward p1 (left:24% top:30% of field) */
@keyframes m24-travel{
  0%{opacity:0; transform:translate(-50%,-50%) scale(0.6)}
  18%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  100%{opacity:1; transform:translate(-148%,-150%) scale(1)}
}

/* footer status strip */
.m24-foot{
  display:flex; align-items:center; gap:8px;
  margin-top:9px;
}
.m24-foot .seg{
  flex:1;
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; color:var(--sub);
}
.m24-foot .seg .ck{
  width:14px;height:14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#e8edf4; color:#fff; font-size:9px;
  transition:background .3s;
}
.m24-root.play .m24-foot .s1 .ck{animation:m24-ok .3s ease 1.1s forwards}
.m24-root.play .m24-foot .s2 .ck{animation:m24-ok .3s ease 2.05s forwards}
.m24-root.play .m24-foot .s3 .ck{animation:m24-ok .3s ease 2.9s forwards}
@keyframes m24-ok{to{background:var(--ok)}}
.m24-foot .seg.s3{color:var(--ink); font-weight:700}