/* ============================================================
   Solvex — module illustrations
   One block per drawing, each scoped to .mst--<key>. The matching
   markup is inline in index.html between <!--MOD:key--> markers
   inside each .mod__art. Conventions (stage size, mobile crop,
   reduced-motion base frame) are documented in README.md.
   ============================================================ */
.mod__art .mst { visibility: visible; }

/* ---- 01 Booking & scheduling --------------------------------
   Loop (8s): cursor travels to an open slot, clicks, the slot fills
   with brand yellow, a confirmation card slides in, then a WhatsApp
   reminder pops. Base styles = the finished, confirmed frame.     */
.mst--booking { --sw: 57; --sh: 42; }

.mst--booking .bk-cal { left: 0; top: 1.4em; width: 41em; height: 38.6em; }
.mst--booking .bk-tools { display: flex; align-items: center; gap: .4em; padding: .75em .9em; }
.mst--booking .bk-staff { margin-left: auto; display: flex; }
.mst--booking .bk-staff .mui-avatar + .mui-avatar { margin-left: -.45em; }

.mst--booking .bk-grid {
  display: grid;
  grid-template-columns: 3.3em repeat(5, minmax(0, 1fr));
  grid-template-rows: 2.9em repeat(6, 4.55em);
  padding: 0 .9em .9em;
}
.mst--booking .bk-corner { border-bottom: 1px solid #eef0f4; }
.mst--booking .bk-day {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  font-size: .62em; font-weight: 600; color: var(--ink-60);
  border-bottom: 1px solid #eef0f4;
}
.mst--booking .bk-day b {
  display: grid; place-items: center;
  width: 2.1em; height: 2.1em; border-radius: 50%;
  font-family: var(--font-display); font-weight: 500; font-size: 1.25em; color: var(--ink);
}
.mst--booking .bk-day--today b { background: var(--ink); color: #fff; }
.mst--booking .bk-time {
  font-family: var(--font-mono); font-size: .5em; letter-spacing: .06em; color: var(--ink-40);
  padding-top: .6em;
}
.mst--booking .bk-cell {
  position: relative;
  border-left: 1px solid #f0f2f5; border-bottom: 1px solid #f0f2f5;
  padding: .28em;
}
.mst--booking .bk-ev {
  display: grid; align-content: start; gap: .35em;
  height: 100%; border-radius: .4em; padding: .4em .45em;
  border-left: .22em solid;
}
.mst--booking .bk-ev b { font-size: .56em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mst--booking .bk-ev .mui-skel { width: 70%; height: .34em; opacity: .8; }
.mst--booking .bk-ev--blue { background: #eaf1ff; border-color: #3b82f6; color: #1e4fb8; }
.mst--booking .bk-ev--green { background: #e4f6ec; border-color: #1f9d63; color: #146c43; }
.mst--booking .bk-ev--grey { background: #f3f5f8; border-color: #c7cbd0; color: var(--ink-60); }
.mst--booking .bk-ev--purple { background: #f0ecff; border-color: #7c5cff; color: #5134c9; }
.mst--booking .bk-ev .mui-skel { background: currentColor; opacity: .18; }
.mst--booking .bk-open {
  display: grid; place-items: center; height: 100%;
  border: 1px dashed #cfd5de; border-radius: .4em;
  font-size: .5em; font-weight: 600; letter-spacing: .04em; color: var(--ink-40);
}

/* the slot that gets booked */
.mst--booking .bk-slot {
  position: relative; display: block; height: 100%;
  border-radius: .4em; overflow: hidden;
  border: 1px dashed transparent;
  animation: booking-slot 8s var(--ease-out) infinite;
}
.mst--booking .bk-slot__fill {
  position: absolute; inset: 0;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  transform-origin: 30% 60%;
  animation: booking-fill 8s var(--ease-out) infinite;
}
.mst--booking .bk-slot__txt {
  position: relative; display: grid; gap: .15em; padding: .42em .45em;
  animation: booking-txt 8s var(--ease-out) infinite;
}
.mst--booking .bk-slot__txt b { font-size: .58em; font-weight: 600; color: var(--accent-ink); }
.mst--booking .bk-slot__txt em { font-style: normal; font-size: .5em; font-weight: 600; color: #6b5200; }

.mst--booking .bk-ripple {
  position: absolute; left: 30.6em; top: 21.2em;
  width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em;
  border-radius: 50%; border: .2em solid var(--accent);
  opacity: 0; pointer-events: none;
  animation: booking-ripple 8s var(--ease-out) infinite;
}

/* confirmation card */
.mst--booking .bk-confirm {
  left: 33.5em; top: 11.2em; width: 23em;
  padding: 1.1em 1.15em 1.15em;
  display: grid; gap: .9em;
  animation: booking-card 8s var(--ease-out) infinite;
}
.mst--booking .bk-confirm__top { display: flex; align-items: center; gap: .7em; }
.mst--booking .bk-confirm__top > span:last-child { display: grid; gap: .15em; }
.mst--booking .bk-confirm__rows { display: grid; gap: .5em; margin: 0; padding-top: .8em; border-top: 1px solid #eef0f4; }
.mst--booking .bk-confirm__rows > div { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.mst--booking .bk-confirm__rows dt { font-size: .64em; color: var(--ink-40); }
.mst--booking .bk-confirm__rows dd { margin: 0; font-size: .66em; font-weight: 600; }
.mst--booking .bk-confirm__cta { display: flex; gap: .45em; }

/* reminder toast */
.mst--booking .bk-remind {
  left: 5em; top: 33.8em; width: 26em;
  display: flex; align-items: center; gap: .75em;
  padding: .75em .9em;
  animation: booking-toast 8s var(--ease-out) infinite;
}
.mst--booking .bk-remind > span:nth-child(2) { display: grid; gap: .12em; flex: 1; }
.mst--booking .bk-remind__ico {
  width: 2.3em; height: 2.3em; border-radius: .65em; flex: none;
  display: grid; place-items: center;
  background: #25d366; color: #25d366;
}
.mst--booking .bk-remind__ico svg { width: 62%; height: 62%; }
.mst--booking .bk-remind__ico svg path:first-child { fill: #fff; }
.mst--booking .bk-remind__ico svg path:last-child { fill: #25d366; }

/* cursor: hidden in the static frame */
.mst--booking .bk-cursor { left: 30.2em; top: 20.6em; opacity: 0; animation: booking-cursor 8s var(--ease-io) infinite; }

@keyframes booking-cursor {
  0%        { opacity: 0; transform: translate(15em, 14em); }
  5%        { opacity: 1; transform: translate(15em, 14em); }
  17%       { opacity: 1; transform: translate(0, 0) scale(1); }
  19%       { transform: translate(0, 0) scale(.8); }
  21%       { transform: translate(0, 0) scale(1); }
  31%       { opacity: 1; transform: translate(0, 0); }
  40%, 100% { opacity: 0; transform: translate(7em, 11em); }
}
@keyframes booking-slot {
  0%, 11%   { border-color: #cfd5de; background: #fff; }
  15%       { border-color: var(--accent-deep); background: var(--accent-mist); }
  19%, 100% { border-color: transparent; background: transparent; }
}
@keyframes booking-fill {
  0%, 19%   { transform: scale(0); opacity: 0; }
  20%       { transform: scale(.2); opacity: 1; }
  27%, 88%  { transform: scale(1); opacity: 1; }
  95%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes booking-txt {
  0%, 23%   { opacity: 0; transform: translateY(.4em); }
  29%, 88%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; }
}
@keyframes booking-ripple {
  0%, 18%   { opacity: 0; transform: scale(.3); }
  19%       { opacity: .9; transform: scale(.4); }
  30%, 100% { opacity: 0; transform: scale(2.4); }
}
@keyframes booking-card {
  0%, 26%   { opacity: 0; transform: translate(2.2em, .6em) scale(.96); }
  34%, 86%  { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: translate(1em, 0) scale(.98); }
}
@keyframes booking-toast {
  0%, 40%   { opacity: 0; transform: translateY(1.4em) scale(.96); }
  47%, 86%  { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: translateY(.6em); }
}

/* mobile: crop in on the slot + confirmation, where the story is */
.mst--booking { --m-zoom: 1.4; --m-pan-x: -14.2em; --m-pan-y: -1.2em; }

/* ---- Wayfinding & indoor maps ---------------------------------
   Loop (9s): the search resolves to Clinic 2-14, the room lights up,
   a brand-yellow route draws itself from "You are here" along the
   corridors with a travelling dot, the pin drops with a bounce and
   the turn-by-turn card floats in. Base = the finished route frame. */
.mst--wayfinding { --sw: 40; --sh: 34; }

.mst--wayfinding .wf-win { left: 0; top: 0; width: 38.5em; height: 34em; }

/* toolbar */
.mst--wayfinding .wf-tools { display: flex; align-items: center; gap: .55em; height: 3.3em; padding: 0 .8em; }
.mst--wayfinding .wf-search {
  flex: 1; display: flex; align-items: center; gap: .5em;
  height: 2.2em; padding: 0 .7em; border-radius: .6em;
  background: #fff; border: 1px solid var(--mui-line);
  box-shadow: 0 0 0 .22em var(--accent-soft);
  border-color: var(--accent-deep);
}
.mst--wayfinding .wf-search svg { width: 1em; height: 1em; color: var(--ink-40); flex: none; }
.mst--wayfinding .wf-search__q {
  position: relative; font-size: .76em; font-weight: 600; white-space: nowrap;
  clip-path: inset(0 0 0 0);
  animation: wayfinding-type 9s linear infinite;
}
.mst--wayfinding .wf-search__hint {
  margin-left: auto; font-family: var(--font-mono); font-size: .6em; letter-spacing: .04em;
  color: var(--ink-40); padding: .2em .5em; border-radius: .4em; background: var(--mui-soft);
  animation: wayfinding-hint 9s var(--ease-out) infinite;
}
.mst--wayfinding .wf-levels {
  display: flex; gap: .15em; padding: .2em; border-radius: .65em; background: var(--mui-soft);
}
.mst--wayfinding .wf-levels b {
  display: grid; place-items: center; width: 2.9em; height: 2.6em; border-radius: .7em;
  font-size: .66em; font-weight: 600; color: var(--ink-60);
}
.mst--wayfinding .wf-levels b.is-on { background: var(--ink); color: #fff; box-shadow: 0 .15em .4em rgba(18,20,23,.25); }
.mst--wayfinding .wf-ctl {
  display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .6em;
  border: 1px solid var(--mui-line); background: #fff;
}
.mst--wayfinding .wf-ctl svg { width: 1.1em; height: 1.1em; }

/* the floor plan */
.mst--wayfinding .wf-map {
  position: absolute; left: 0; top: 5.4em; width: 38.5em; height: 28.6em;
  background: #f7f8fa; border-top: 1px solid #eef0f4;
  font-family: var(--font-body);
}
.mst--wayfinding .wf-rooms rect { fill: #f1f3f6; stroke: #e3e6ec; stroke-width: 1; }
.mst--wayfinding .wf-dest {
  fill: #fffceb; stroke: #ebba34; stroke-width: 1.4;
  animation: wayfinding-dest 9s var(--ease-out) infinite;
}
.mst--wayfinding .wf-lobby-fill { fill: #fafbfc; }
.mst--wayfinding .wf-lobby { fill: none; stroke: #cfd5de; stroke-width: 1; stroke-dasharray: 3 2.5; }
.mst--wayfinding .wf-swing path { stroke: #dfe3e9; stroke-width: 1; }
.mst--wayfinding .wf-furn { fill: #fbfcfd; stroke: #dfe3e9; stroke-width: 1; }
.mst--wayfinding .wf-thresh {
  stroke: #ebba34; stroke-width: 2.6; stroke-linecap: round;
  animation: wayfinding-thresh 9s var(--ease-out) infinite;
}
.mst--wayfinding .wf-doors path { stroke: #fff; stroke-width: 2.6; }
.mst--wayfinding .wf-lift rect { fill: #fff; stroke: #cfd5de; stroke-width: 1; }
.mst--wayfinding .wf-lab text { font-size: 9.5px; font-weight: 600; fill: #3a3f47; letter-spacing: -.01em; }
.mst--wayfinding .wf-lab text.wf-lab--dest { fill: #1a1204; font-weight: 700; }
.mst--wayfinding .wf-lab text.wf-lab--lobby { fill: #1a1204; font-weight: 700; }
.mst--wayfinding .wf-sub text { font-size: 7.2px; fill: #7d838c; }

/* route */
.mst--wayfinding .wf-route { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.mst--wayfinding .wf-route--halo { stroke: #ebba34; stroke-opacity: .28; stroke-width: 9; }
.mst--wayfinding .wf-route--line { stroke: #fed423; stroke-width: 4.4; }
.mst--wayfinding .wf-route { animation: wayfinding-draw 9s linear infinite; }
.mst--wayfinding .wf-turn {
  fill: #fff; stroke: #1a1204; stroke-width: 1.8;
  transform-box: fill-box; transform-origin: center;
  animation: wayfinding-turn 9s var(--ease-out) infinite;
}

/* you are here */
.mst--wayfinding .wf-yah__pulse {
  fill: #3b82f6; opacity: .16;
  transform-box: fill-box; transform-origin: center;
  animation: wayfinding-pulse 9s var(--ease-out) infinite;
}
.mst--wayfinding .wf-yah-tag {
  position: absolute; right: 31.4em; top: 30.1em; height: 1.7em;
  display: grid; place-items: center; padding: 0 .55em; border-radius: .45em;
  background: var(--ink); color: #fff;
  box-shadow: 0 .3em .8em -.2em rgba(18,20,23,.4);
}
.mst--wayfinding .wf-yah-tag > span { font-size: .68em; font-weight: 600; white-space: nowrap; }

/* travelling dot (hidden in the static frame) */
.mst--wayfinding .wf-dot { opacity: 0; transform: translate(211px, 94px); animation: wayfinding-dot 9s linear infinite; }

/* pin */
.mst--wayfinding .wf-pin {
  transform-box: fill-box; transform-origin: 50% 100%;
  filter: drop-shadow(0 1.5px 1.5px rgba(18,20,23,.25));
  animation: wayfinding-pin 9s var(--ease-out) infinite;
}
.mst--wayfinding .wf-shadow {
  opacity: .22; transform-box: fill-box; transform-origin: center;
  animation: wayfinding-shadow 9s var(--ease-out) infinite;
}

/* instruction card */
.mst--wayfinding .wf-card {
  left: 19.2em; top: 28.3em; width: 20.6em;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55em .75em;
  padding: .8em .9em .85em;
  animation: wayfinding-card 9s var(--ease-out) infinite;
}
.mst--wayfinding .wf-card__ico {
  width: 2.5em; height: 2.5em; border-radius: .7em; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.mst--wayfinding .wf-card__ico svg { width: 60%; height: 60%; }
.mst--wayfinding .wf-card__txt { display: grid; gap: .2em; min-width: 0; }
.mst--wayfinding .wf-card__meta {
  display: flex; align-items: center; gap: .45em;
  font-size: .64em; color: var(--ink-60); white-space: nowrap;
}
.mst--wayfinding .wf-card__meta b { color: var(--ink); font-weight: 600; }
.mst--wayfinding .wf-card__meta i { width: .25em; height: .25em; border-radius: 50%; background: var(--ink-20); }
.mst--wayfinding .wf-card__step { display: grid; justify-items: end; gap: .15em; }
.mst--wayfinding .wf-card__step b { font-family: var(--font-display); font-weight: 500; font-size: .95em; }
.mst--wayfinding .wf-card__bar { grid-column: 1 / -1; }
.mst--wayfinding .wf-card__bar b { width: 62%; animation: wayfinding-bar 9s var(--ease-out) infinite; }

/* ---- timeline (9s) ---------------------------------------------
   0-12  search types   12-16 room lights   16-48 route + dot
   46-54 pin drop       52-60 card in       60-86 rest   86-96 fade */
@keyframes wayfinding-type {
  0%, 2%    { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(11, end); }
  12%, 88%  { clip-path: inset(0 0 0 0); opacity: 1; }
  96%       { clip-path: inset(0 0 0 0); opacity: 0; }
  100%      { clip-path: inset(0 100% 0 0); opacity: 0; }
}
@keyframes wayfinding-hint {
  0%, 11%   { opacity: 0; }
  15%, 88%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes wayfinding-dest {
  0%, 12%   { fill: #f1f3f6; stroke: #e3e6ec; }
  17%, 88%  { fill: #fffceb; stroke: #ebba34; }
  96%, 100% { fill: #f1f3f6; stroke: #e3e6ec; }
}
@keyframes wayfinding-draw {
  0%, 16%   { stroke-dashoffset: 100; opacity: 1; }
  48%, 87%  { stroke-dashoffset: 0; opacity: 1; }
  95%       { stroke-dashoffset: 0; opacity: 0; }
  100%      { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes wayfinding-dot {
  0%, 14%   { opacity: 0; transform: translate(92px, 252px) scale(.4); }
  16%       { opacity: 1; transform: translate(92px, 252px) scale(1); }
  30%       { transform: translate(92px, 131px); }
  43.7%     { transform: translate(211px, 131px); }
  48%       { opacity: 1; transform: translate(211px, 94px); }
  52%, 100% { opacity: 0; transform: translate(211px, 94px) scale(.4); }
}
@keyframes wayfinding-turn {
  0%, 42%   { opacity: 0; transform: scale(.3); }
  45%       { opacity: 1; transform: scale(1.35); }
  48%, 87%  { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(.6); }
}
@keyframes wayfinding-thresh {
  0%, 12%   { opacity: 0; }
  17%, 88%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes wayfinding-pulse {
  0%   { opacity: .3; transform: scale(.5); }
  16%  { opacity: 0;  transform: scale(1.6); }
  33%  { opacity: .3; transform: scale(.5); }
  49%  { opacity: 0;  transform: scale(1.6); }
  66%  { opacity: .3; transform: scale(.5); }
  82%  { opacity: 0;  transform: scale(1.6); }
  100% { opacity: .3; transform: scale(.5); }
}
@keyframes wayfinding-pin {
  0%, 45%   { opacity: 0; transform: translateY(-40px) scale(.9); }
  48%       { opacity: 1; transform: translateY(0) scale(1.08, .88); }
  51%       { transform: translateY(-7px) scale(.97, 1.04); }
  54%, 87%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes wayfinding-shadow {
  0%, 45%   { opacity: 0; transform: scale(.3); }
  48%       { opacity: .32; transform: scale(1.25); }
  51%       { opacity: .16; transform: scale(.8); }
  54%, 87%  { opacity: .22; transform: none; }
  94%, 100% { opacity: 0; transform: scale(.6); }
}
@keyframes wayfinding-card {
  0%, 52%   { opacity: 0; transform: translateY(1.4em) scale(.96); }
  60%, 86%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(.6em) scale(.98); }
}
@keyframes wayfinding-bar {
  0%, 56%   { width: 0; }
  76%, 100% { width: 62%; }
}

/* mobile: crop in on the route, pin and instruction card */
.mst--wayfinding { --m-zoom: 1.1; --m-pan-x: -.4em; --m-pan-y: -2.1em; }

/* ---- Mobile apps ----------------------------------------------
   Loop (9s): a push notification drops in ("Daniel is 5 min away"),
   the brand-yellow booking card's live-tracking bar advances, a tap
   glides the tab indicator to Track, then a "Works offline" chip
   fades in. Base styles = the finished frame with everything shown. */
.mst--mobile { --sw: 26; --sh: 40; }

/* ---------- back device (Android build) ---------------------- */
.mst--mobile .mb-back {
  position: absolute; left: 8.6em; top: 4.2em; width: 14.8em; height: 32.6em;
  border-radius: 2.2em; padding: .38em;
  background: linear-gradient(160deg, #2a2d33, #16181c 60%);
  box-shadow: 0 .2em .5em rgba(18,20,23,.12), 0 2.4em 4em -1.6em rgba(18,20,23,.35);
  transform: rotate(6deg); transform-origin: 50% 50%;
}
.mst--mobile .mb-back__scr {
  position: relative; height: 100%; border-radius: 1.85em; overflow: hidden;
  background: #f4f5f8;
  display: grid; align-content: start; gap: .6em;
  padding: 2.4em 1em 0;
}
.mst--mobile .mb-back__cam {
  position: absolute; left: 50%; top: .75em; width: .75em; height: .75em; margin-left: -.375em;
  border-radius: 50%; background: #121417;
}
.mst--mobile .mb-back__bar { display: flex; justify-content: space-between; }
.mst--mobile .mb-back__bar i { width: 2.2em; height: .4em; border-radius: 99em; background: #dde1e7; }
.mst--mobile .mb-back__h { width: 62%; height: .7em; background: #d9dde4; }
.mst--mobile .mb-back__hero {
  display: grid; gap: .5em; padding: 1em; height: 9em; align-content: end;
  border-radius: 1.1em; background: var(--accent);
}
.mst--mobile .mb-back__hero i { height: .45em; border-radius: 99em; background: rgba(26,18,4,.2); width: 55%; }
.mst--mobile .mb-back__hero i:first-child { width: 72%; height: .7em; background: rgba(26,18,4,.55); }
.mst--mobile .mb-back__hero i:last-child { width: 100%; background: rgba(26,18,4,.14); }
.mst--mobile .mb-back__row {
  display: flex; align-items: center; gap: .6em; padding: .7em; border-radius: .8em; background: #fff;
}
.mst--mobile .mb-back__row b { width: 1.8em; height: 1.8em; border-radius: .55em; background: #eef0f4; }
.mst--mobile .mb-back__row i { flex: 1; height: .42em; border-radius: 99em; background: #e4e7ec; }
.mst--mobile .mb-back__nav {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3.4em;
  display: flex; justify-content: space-around; align-items: center;
  background: #fff; border-top: 1px solid #eceef2;
}
.mst--mobile .mb-back__nav i { width: 1.2em; height: 1.2em; border-radius: .35em; background: #e1e4ea; }
.mst--mobile .mb-back__nav i:nth-child(2) { width: 2.6em; border-radius: 99em; background: var(--accent-soft); }

/* ---------- hero device -------------------------------------- */
.mst--mobile .mb-phone {
  position: absolute; left: 1.2em; top: 1em; width: 17.4em; height: 38em;
  border-radius: 2.75em; padding: .42em;
  background: linear-gradient(145deg, #3a3e45, #121417 35%, #1d2026 80%, #454a52);
  box-shadow:
    inset 0 0 0 .08em rgba(255,255,255,.12),
    0 .2em .5em rgba(18,20,23,.14),
    0 2.8em 4.4em -1.6em rgba(18,20,23,.45);
}
.mst--mobile .mb-scr {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 2.35em;
  background: linear-gradient(180deg, #fff 0, #f6f7f9 30%);
  padding: 0 1em;
}

/* status bar */
.mst--mobile .mb-status {
  position: relative; height: 2.9em;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 .75em;
}
.mst--mobile .mb-status > b { font-size: .7em; font-weight: 600; letter-spacing: -.01em; }
.mst--mobile .mb-island {
  position: absolute; left: 50%; top: .6em; width: 5.2em; height: 1.55em; margin-left: -2.6em;
  border-radius: 99em; background: #0b0c0e;
}
.mst--mobile .mb-sig { display: flex; align-items: center; gap: .35em; }
.mst--mobile .mb-sig svg { width: 1em; height: .68em; fill: var(--ink); }
.mst--mobile .mb-batt {
  position: relative; width: 1.45em; height: .7em; border-radius: .22em;
  border: .08em solid rgba(18,20,23,.4); padding: .08em;
}
.mst--mobile .mb-batt i { display: block; width: 72%; height: 100%; border-radius: .12em; background: var(--ink); }

/* greeting */
.mst--mobile .mb-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 1.45em 0 .9em;
}
.mst--mobile .mb-head > span:first-child { display: grid; gap: .3em; }
.mst--mobile .mb-date { font-family: var(--font-mono); font-size: .58em; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); }
.mst--mobile .mb-hello { font-family: var(--font-display); font-size: 1.12em; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.mst--mobile .mb-me { font-size: .7em; background: #7c5cff; box-shadow: 0 0 0 .18em #fff, 0 0 0 .26em #e6e9ef; }

/* hero booking card */
.mst--mobile .mb-hero {
  position: relative; overflow: hidden;
  border-radius: 1.2em; padding: 1em 1em 1.05em;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(255,255,255,.55), transparent 60%),
    var(--accent);
  box-shadow: 0 .1em .2em rgba(128,97,0,.12), 0 1.1em 2em -1em rgba(180,140,0,.55);
  color: var(--accent-ink);
  animation: mobile-glow 9s var(--ease-out) infinite;
}
.mst--mobile .mb-hero::after {
  content: ''; position: absolute; right: -2.4em; bottom: -3.4em; width: 8em; height: 8em;
  border-radius: 50%; border: 1.2em solid rgba(255,255,255,.12);
}
.mst--mobile .mb-hero__top { display: flex; align-items: center; justify-content: space-between; }
.mst--mobile .mb-hero__lbl { font-family: var(--font-mono); font-size: .58em; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: #5c4600; }
.mst--mobile .mb-eta {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .65em; border-radius: 99em;
  font-size: .56em; font-weight: 600; background: var(--ink); color: #fff;
  animation: mobile-eta 9s var(--ease-out) infinite;
}
.mst--mobile .mb-eta::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: #3ddc84; }
.mst--mobile .mb-hero__title { margin-top: .5em; font-family: var(--font-display); font-size: 1.28em; font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.mst--mobile .mb-hero__sub { margin-top: .3em; font-size: .64em; color: #5c4600; }
.mst--mobile .mb-tech {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .6em;
  margin-top: .85em; padding: .55em .6em; border-radius: .8em;
  background: rgba(255,255,255,.62);
}
.mst--mobile .mb-tech__av { font-size: .6em; background: #3b82f6; box-shadow: 0 0 0 .2em #fff; }
.mst--mobile .mb-tech__txt { display: grid; gap: .1em; flex: 1; min-width: 0; }
.mst--mobile .mb-tech__txt b { font-size: .7em; font-weight: 600; }
.mst--mobile .mb-tech__txt em { font-style: normal; font-size: .6em; color: #5c4600; }
.mst--mobile .mb-call {
  width: 1.9em; height: 1.9em; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--ink); color: #fff;
}
.mst--mobile .mb-call svg { width: 50%; height: 50%; }
.mst--mobile .mb-track {
  position: relative; z-index: 1;
  height: .36em; margin: .9em .2em 0; border-radius: 99em; background: rgba(26,18,4,.14);
}
.mst--mobile .mb-track b {
  position: absolute; left: 0; top: 0; bottom: 0; width: 76%;
  border-radius: inherit; background: var(--ink);
  animation: mobile-track 9s var(--ease-out) infinite;
}
.mst--mobile .mb-track b::after {
  content: ''; position: absolute; right: -.45em; top: 50%; width: .9em; height: .9em; margin-top: -.45em;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 .2em var(--ink);
}
.mst--mobile .mb-track i {
  position: absolute; right: -.1em; top: 50%; width: .7em; height: .7em; margin-top: -.35em;
  border-radius: 50%; border: .16em solid var(--ink); background: var(--accent);
}

/* recent list */
.mst--mobile .mb-sec {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 1em .1em .5em;
}
.mst--mobile .mb-sec span { font-size: .8em; font-weight: 600; letter-spacing: -.01em; }
.mst--mobile .mb-sec em { font-style: normal; font-size: .6em; font-weight: 600; color: var(--accent-text); }
.mst--mobile .mb-list {
  border-radius: 1em; background: #fff; border: 1px solid #eceef2;
  box-shadow: 0 .1em .25em rgba(18,20,23,.04);
}
.mst--mobile .mb-row { display: flex; align-items: center; gap: .6em; padding: .56em .7em; }
.mst--mobile .mb-row + .mb-row { border-top: 1px solid #f0f2f5; }
.mst--mobile .mb-ico {
  width: 2em; height: 2em; border-radius: .6em; flex: none;
  display: grid; place-items: center; background: var(--mui-soft); color: var(--ink-60);
}
.mst--mobile .mb-ico svg { width: 55%; height: 55%; }
.mst--mobile .mb-ico--ok { background: var(--ok-soft); color: var(--ok); }
.mst--mobile .mb-ico--info { background: var(--info-soft); color: var(--info); }
.mst--mobile .mb-row__t { display: grid; gap: .12em; flex: 1; min-width: 0; }
.mst--mobile .mb-row__t b { font-size: .7em; font-weight: 600; white-space: nowrap; }
.mst--mobile .mb-row__t em { font-style: normal; font-size: .6em; color: var(--ink-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mst--mobile .mb-amt { font-family: var(--font-display); font-size: .74em; font-weight: 500; letter-spacing: -.02em; }

/* tab bar */
.mst--mobile .mb-tabs {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4.6em;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: start;
  padding: .55em .5em 0;
  background: rgba(255,255,255,.94); border-top: 1px solid #eceef2;
}
.mst--mobile .mb-tab {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: .25em; padding-top: .35em;
  color: var(--ink-40);
}
.mst--mobile .mb-tab svg { width: 1.3em; height: 1.3em; }
.mst--mobile .mb-tab em { font-style: normal; font-size: .6em; font-weight: 600; }
.mst--mobile .mb-tab:nth-child(2) { animation: mobile-tab1 9s var(--ease-io) infinite; }
.mst--mobile .mb-tab:nth-child(3) { color: var(--ink); animation: mobile-tab2 9s var(--ease-io) infinite; }
/* indicator sits on tab 2 (Track) in the static frame; one tab = (17.4em - .84em bezel - 1em padding) / 4 */
.mst--mobile .mb-ind {
  position: absolute; top: .6em; height: 2.9em;
  left: calc(.5em + (100% - 1em) / 4 + ((100% - 1em) / 4 - 3.2em) / 2); width: 3.2em;
  border-radius: .9em; background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(235,186,52,.35);
  animation: mobile-ind 9s var(--ease-io) infinite;
}
.mst--mobile .mb-touch {
  position: absolute; top: 1.95em; width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em;
  left: calc(.5em + (100% - 1em) * .375);
  border-radius: 50%; background: rgba(18,20,23,.14);
  opacity: 0; animation: mobile-touch 9s var(--ease-out) infinite;
}
.mst--mobile .mb-home {
  position: absolute; left: 50%; bottom: .45em; width: 5.6em; height: .26em; margin-left: -2.8em;
  border-radius: 99em; background: var(--ink); z-index: 2;
}

/* push notification: compact banner in the status-bar zone, clear of the greeting */
.mst--mobile .mb-push {
  position: absolute; left: .5em; right: .5em; top: .4em; z-index: 5;
  display: flex; align-items: center; gap: .6em;
  padding: .5em .7em .5em .5em; border-radius: 1.2em;
  background: #fff;
  border: 1px solid rgba(230,233,239,.9);
  box-shadow: 0 .15em .4em rgba(18,20,23,.08), 0 1.2em 2.2em -1em rgba(18,20,23,.38);
  animation: mobile-push 9s var(--ease-out) infinite;
}
.mst--mobile .mb-push__ico {
  position: relative; width: 2.2em; height: 2.2em; border-radius: .65em; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.mst--mobile .mb-push__ico svg { width: 62%; height: 62%; }
.mst--mobile .mb-push__ico::after {
  content: ''; position: absolute; inset: -.2em; border-radius: .8em;
  border: .16em solid var(--accent);
  opacity: 0; animation: mobile-ping 9s var(--ease-out) infinite;
}
.mst--mobile .mb-push__txt { display: grid; gap: .15em; flex: 1; min-width: 0; }
.mst--mobile .mb-push__top { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; }
.mst--mobile .mb-push__top b { font-size: .74em; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.mst--mobile .mb-push__top em { font-style: normal; font-size: .58em; color: var(--ink-40); }
.mst--mobile .mb-push__sub { font-size: .62em; color: var(--ink-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* floating chips */
.mst--mobile .mb-chip {
  display: flex; align-items: center; gap: .6em;
  padding: .6em .85em .6em .7em; border-radius: 99em;
}
.mst--mobile .mb-chip > span:last-child { display: grid; gap: .08em; }
.mst--mobile .mb-chip b { font-size: .72em; font-weight: 600; white-space: nowrap; }
.mst--mobile .mb-chip em { font-style: normal; font-size: .6em; color: var(--ink-40); white-space: nowrap; }
.mst--mobile .mb-chip--off { left: 16.2em; top: 16.4em; animation: mobile-chip 9s var(--ease-out) infinite; }
.mst--mobile .mb-chip__dot {
  position: relative; width: 1.9em; height: 1.9em; border-radius: 50%; flex: none;
  background: var(--ok-soft);
}
.mst--mobile .mb-chip__dot::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: .6em; height: .6em; margin: -.3em 0 0 -.3em;
  border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 .22em rgba(31,157,99,.18);
}
.mst--mobile .mb-chip--os { left: 17.5em; top: 34.9em; }
.mst--mobile .mb-os {
  width: 1.9em; height: 1.9em; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--mui-soft); color: var(--ink-80);
}
.mst--mobile .mb-os svg { width: 58%; height: 58%; }

/* ---------- keyframes (all 9s) ------------------------------- */
@keyframes mobile-push {
  0%, 8%    { opacity: 0; transform: translateY(-4.4em) scale(.94); }
  10.5%     { opacity: 1; }
  14%       { opacity: 1; transform: translateY(.2em) scale(1); }
  17%, 86%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(-2.4em) scale(.97); }
}
@keyframes mobile-ping {
  0%, 15%   { opacity: 0; transform: scale(1); }
  17%       { opacity: 1; transform: scale(1); }
  28%, 100% { opacity: 0; transform: scale(1.6); }
}
@keyframes mobile-track {
  0%, 16%   { width: 50%; }
  28%, 86%  { width: 76%; }
  96%, 100% { width: 50%; }
}
@keyframes mobile-eta {
  0%, 16%   { opacity: 0; transform: scale(.6); }
  21%       { opacity: 1; transform: scale(1.08); }
  25%, 88%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: scale(.9); }
}
@keyframes mobile-touch {
  0%, 33%   { opacity: 0; transform: scale(.4); }
  36%       { opacity: 1; transform: scale(.8); }
  44%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes mobile-ind {
  0%, 36%   { transform: translateX(calc(-1 * (17.4em - .84em - 1em) / 4)); }
  44%, 88%  { transform: none; }
  97%, 100% { transform: translateX(calc(-1 * (17.4em - .84em - 1em) / 4)); }
}
@keyframes mobile-tab1 {
  0%, 37%   { color: var(--ink); }
  42%, 89%  { color: var(--ink-40); }
  96%, 100% { color: var(--ink); }
}
@keyframes mobile-tab2 {
  0%, 37%   { color: var(--ink-40); }
  42%, 89%  { color: var(--ink); }
  96%, 100% { color: var(--ink-40); }
}
@keyframes mobile-chip {
  0%, 52%   { opacity: 0; transform: translateX(-1em) scale(.95); }
  60%, 86%  { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: translateX(.5em) scale(.98); }
}

@keyframes mobile-glow {
  0%, 18%, 34%, 100% { box-shadow: 0 .1em .2em rgba(128,97,0,.12), 0 1.1em 2em -1em rgba(180,140,0,.55), 0 0 0 0 rgba(254,212,35,0); }
  22%       { box-shadow: 0 .1em .2em rgba(128,97,0,.12), 0 1.4em 2.6em -1em rgba(200,155,0,.7), 0 0 0 .45em rgba(254,212,35,.38); }
}

/* mobile: crop to the top half of the phone (push + hero card) */
.mst--mobile { --m-zoom: 1.7; --m-pan-x: .6em; --m-pan-y: 1.2em; }

/* ---- Stock control -------------------------------------------
   Loop (9s): Oat milk at Tampines ticks down 54 > 31 > 12 > 6 past its
   reorder point and turns red ("Low stock"); the reorder rule fires and
   PO #1042 is raised (the yellow climax); stock arrives, the bar refills
   with "+48 received" and Stock value bumps. Base styles = PO-raised frame. */
.mst--stock { --sw: 38; --sh: 22; }

.mst--stock .sk-win { left: 0; top: .5em; width: 24.4em; height: 21em; z-index: 1; }

.mst--stock .sk-tools { display: flex; align-items: center; gap: .5em; padding: .7em 1em .5em; }
.mst--stock .sk-search {
  display: flex; align-items: center; gap: .45em;
  width: 8.4em; height: 1.9em; padding: 0 .6em;
  border: 1px solid var(--mui-line); border-radius: .55em; color: var(--ink-40);
}
.mst--stock .sk-search svg { width: .95em; height: .95em; flex: none; }
.mst--stock .sk-search .mui-skel { width: 60%; height: .4em; }
.mst--stock .sk-tab { background: var(--ink); color: #fff; font-size: .68em; }
.mst--stock .sk-sync {
  margin-left: auto; display: flex; align-items: center; gap: .45em;
  font-size: .7em; font-weight: 600; color: var(--ink-60);
}
.mst--stock .sk-sync i { width: .6em; height: .6em; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 .25em var(--ok-soft); }

.mst--stock .sk-head,
.mst--stock .sk-row {
  display: grid; grid-template-columns: 9.4em 3em minmax(0, 1fr);
  align-items: center; column-gap: .6em;
  margin: 0 .5em; padding: 0 .5em;
}
.mst--stock .sk-head { height: 1.9em; border-bottom: 1px solid #eef0f4; }
.mst--stock .sk-row { position: relative; height: 4.35em; border-bottom: 1px solid #f0f2f5; }
.mst--stock .sk-row:last-child { border-bottom: 0; }

/* the row that runs low: yellow-marked while its PO is open */
.mst--stock .sk-row--hot::before {
  content: ''; position: absolute; inset: .3em 0; z-index: 0;
  border-radius: .55em;
  background: var(--accent-mist);
  box-shadow: inset .2em 0 0 var(--accent), inset 0 0 0 1px rgba(235,186,52,.35);
  animation: stock-hot 9s var(--ease-out) infinite;
}
.mst--stock .sk-row > * { position: relative; z-index: 1; }

.mst--stock .sk-item { display: grid; gap: .3em; min-width: 0; }
.mst--stock .sk-item b { font-size: .92em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mst--stock .sk-item em {
  display: flex; align-items: center; gap: .35em;
  font-style: normal; font-size: .7em; color: var(--ink-60);
}
.mst--stock .sk-item em::before {
  content: ''; width: .55em; height: .55em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: .15em solid currentColor; box-sizing: border-box; opacity: .7;
}

.mst--stock .sk-qty { position: relative; font-size: 1.25em; display: block; height: 1em; }
.mst--stock .sk-row--hot .sk-qty .sk-q { position: absolute; left: 0; top: 0; opacity: 0; }
.mst--stock .sk-row--hot .sk-qty .sk-q--lo { opacity: 1; color: #c9343a; animation: stock-lo 9s var(--ease-io) infinite; }
.mst--stock .sk-q--a { animation: stock-qa 9s var(--ease-io) infinite; }
.mst--stock .sk-q--b { animation: stock-qb 9s var(--ease-io) infinite; }
.mst--stock .sk-q--c { animation: stock-qc 9s var(--ease-io) infinite; }

.mst--stock .sk-lvl { position: relative; display: grid; gap: .5em; padding-top: .1em; }
.mst--stock .sk-bar { height: .55em; }
.mst--stock .sk-bar > b { background: #474d57; }
.mst--stock .sk-tick {
  position: absolute; top: -.1em; width: .14em; height: .95em; border-radius: .1em;
  background: var(--ink-40); opacity: .6;
}
.mst--stock .sk-state { position: relative; height: 1.4em; }
.mst--stock .sk-st { position: absolute; left: 0; top: 0; font-size: .74em; }
.mst--stock .sk-row--hot .sk-st--ok { opacity: 0; animation: stock-ok 9s var(--ease-out) infinite; }
.mst--stock .sk-st--low { font-size: .8em; font-weight: 700; animation: stock-low 9s var(--ease-out) infinite; }

/* the draining bar */
.mst--stock .sk-bar > b.sk-drain {
  width: 10%; background: var(--bad);
  animation: stock-drain 9s var(--ease-io) infinite;
}

/* "+48 received": inline, after the In stock pill */
.mst--stock .sk-recv {
  position: absolute; left: 0; top: 0; font-size: .8em; font-weight: 700; white-space: nowrap;
  box-shadow: 0 .3em .8em -.3em rgba(21,122,74,.45);
  opacity: 0; animation: stock-recv 9s var(--ease-out) infinite;
}

/* KPI card */
.mst--stock .sk-kpi {
  left: 25.1em; top: .5em; width: 12.9em; z-index: 2;
  display: grid; gap: .35em; padding: .75em .9em .8em;
}
.mst--stock .sk-kpi__top { display: flex; align-items: center; justify-content: space-between; }
.mst--stock .sk-kpi__delta {
  font-size: .7em; font-weight: 700; color: var(--ok);
  opacity: 0; animation: stock-delta 9s var(--ease-out) infinite;
}
.mst--stock .sk-kpi__num { position: relative; display: block; height: 1.1em; font-size: 1.45em; }
.mst--stock .sk-kv { position: absolute; left: 0; top: 0; }
.mst--stock .sk-kv--b { opacity: 0; animation: stock-kvb 9s var(--ease-io) infinite; }
.mst--stock .sk-kv--a { animation: stock-kva 9s var(--ease-io) infinite; }
.mst--stock .sk-spark { width: 100%; height: 1.5em; color: var(--ok); overflow: visible; }
.mst--stock .sk-spark__b { stroke-dasharray: 20; stroke-dashoffset: 20; animation: stock-spark 9s var(--ease-out) infinite; }

/* reorder rules card: persistent, rule 1 fires at the climax */
.mst--stock .sk-rules {
  left: 25.1em; top: 6.95em; width: 12.9em; height: 14.55em; z-index: 2;
  display: grid; grid-template-rows: auto repeat(3, 1fr); padding: .75em .8em .6em;
}
.mst--stock .sk-rules__top { display: flex; align-items: center; justify-content: space-between; padding: 0 .1em .5em; }
.mst--stock .sk-rules .mui-h { font-size: .88em; }
.mst--stock .sk-rules__n { font-size: .66em; }
.mst--stock .sk-rule {
  position: relative; display: flex; align-items: center; gap: .55em;
  padding: 0 .35em; border-top: 1px solid #f0f2f5;
}
.mst--stock .sk-rule__ico {
  width: 1.7em; height: 1.7em; flex: none; border-radius: .5em;
  display: grid; place-items: center;
  background: var(--surface-alt); color: var(--ink-60);
}
.mst--stock .sk-rule__ico svg { width: 60%; height: 60%; }
.mst--stock .sk-rule__txt { display: grid; gap: .2em; min-width: 0; }
.mst--stock .sk-rule__txt b { font-size: .78em; font-weight: 600; white-space: nowrap; }
.mst--stock .sk-rule__txt em { font-style: normal; font-size: .68em; color: var(--ink-60); white-space: nowrap; }
.mst--stock .sk-rule--hot::before {
  content: ''; position: absolute; inset: .2em -.2em; border-radius: .5em; z-index: -1;
  background: var(--accent-mist); box-shadow: inset 0 0 0 1px rgba(235,186,52,.35);
  animation: stock-hot 9s var(--ease-out) infinite;
}
.mst--stock .sk-rule--hot { z-index: 0; }
.mst--stock .sk-rule--hot .sk-rule__ico { background: var(--accent); color: var(--accent-ink); animation: stock-ico 9s var(--ease-out) infinite; }
.mst--stock .sk-rule__tag {
  margin-left: auto; font-size: .64em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-text);
  animation: stock-hot 9s var(--ease-out) infinite;
}

/* PO card: the climax. Sits over the rules card, only kisses the window edge */
.mst--stock .sk-po {
  left: 23.7em; top: 12.6em; width: 14.3em; z-index: 3;
  padding: .8em .95em .85em;
  display: grid; gap: .6em;
  border-color: rgba(235,186,52,.55);
  box-shadow: 0 0 0 .3em rgba(254,212,35,.22), 0 .1em .3em rgba(18,20,23,.05), 0 1.2em 2.4em -.8em rgba(18,20,23,.3);
  animation: stock-po 9s var(--ease-out) infinite;
}
.mst--stock .sk-po__top { display: flex; align-items: center; gap: .65em; }
.mst--stock .sk-po__top > span:last-child { display: grid; gap: .2em; }
.mst--stock .sk-po .mui-h { font-size: 1.02em; white-space: nowrap; }
.mst--stock .sk-po .mui-t { font-size: .74em; }
.mst--stock .sk-po__ico {
  width: 2.3em; height: 2.3em; border-radius: .6em; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
}
.mst--stock .sk-po__ico svg { width: 58%; height: 58%; }
.mst--stock .sk-po__rows { margin: 0; padding-top: .55em; border-top: 1px solid #eef0f4; }
.mst--stock .sk-po__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; }
.mst--stock .sk-po__rows dt { font-size: .76em; color: var(--ink-60); }
.mst--stock .sk-po__rows dd { margin: 0; font-size: .82em; font-weight: 700; font-family: var(--font-display); }
.mst--stock .sk-po__foot { display: flex; gap: .35em; }
.mst--stock .sk-po__foot .mui-pill { font-size: .7em; }

.mst--stock .sk-ring {
  position: absolute; left: 30.8em; top: 16.8em; z-index: 2;
  width: 4em; height: 4em; margin: -2em 0 0 -2em;
  border-radius: 50%; border: .2em solid var(--accent);
  opacity: 0; pointer-events: none;
  animation: stock-ring 9s var(--ease-out) infinite;
}

/* ---- keyframes (all 9s) ----
   0-25%  drain, count 54>31>12>6, red + Low stock
   29-39% rule fires, PO raised (climax)
   58-66% received: bar refills, +48, value bumps
   84-100% calm, fade back                                      */
@keyframes stock-drain {
  0%, 5%    { width: 60%; background: #474d57; }
  11%       { width: 36%; background: #474d57; }
  17%       { width: 16%; background: #474d57; }
  21%       { background: var(--bad); }
  24%       { width: 10%; background: var(--bad); }
  56%       { width: 10%; background: var(--bad); }
  60%       { background: var(--ok); }
  66%       { width: 60%; }
  84%       { width: 60%; background: var(--ok); }
  94%, 100% { width: 60%; background: #474d57; }
}
@keyframes stock-qa {
  0%, 8%    { opacity: 1; transform: none; }
  10%       { opacity: 0; transform: translateY(-.3em); }
  59%       { opacity: 0; transform: translateY(.3em); }
  62%, 100% { opacity: 1; transform: none; }
}
@keyframes stock-qb {
  0%, 8.5% { opacity: 0; transform: translateY(.3em); }
  10.5%, 13.5% { opacity: 1; transform: none; }
  15.5%, 100% { opacity: 0; transform: translateY(-.3em); }
}
@keyframes stock-qc {
  0%, 14% { opacity: 0; transform: translateY(.3em); }
  16%, 19% { opacity: 1; transform: none; color: var(--ink); }
  21%, 100% { opacity: 0; transform: translateY(-.3em); }
}
@keyframes stock-lo {
  0%, 19.5% { opacity: 0; transform: translateY(.3em); }
  21.5%, 57% { opacity: 1; transform: none; }
  60%, 100% { opacity: 0; transform: translateY(-.3em); }
}
@keyframes stock-ok {
  0%, 21%   { opacity: 1; }
  22.5%, 88% { opacity: 0; }
  92%, 100% { opacity: 1; }
}
@keyframes stock-low {
  0%, 22%   { opacity: 0; transform: scale(.85); }
  25.5%, 56% { opacity: 1; transform: none; }
  59%, 100% { opacity: 0; transform: scale(.95); }
}
@keyframes stock-hot {
  0%, 29%   { opacity: 0; }
  34%, 84%  { opacity: 1; }
  93%, 100% { opacity: 0; }
}
@keyframes stock-ico {
  0%, 29%   { background: var(--surface-alt); color: var(--ink-60); }
  34%, 84%  { background: var(--accent); color: var(--accent-ink); }
  93%, 100% { background: var(--surface-alt); color: var(--ink-60); }
}
@keyframes stock-po {
  0%, 32%   { opacity: 0; transform: translate(1.2em, .8em) scale(.96); }
  40%, 84%  { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translate(.8em, 0) scale(.98); }
}
@keyframes stock-recv {
  0%, 59%   { opacity: 0; transform: scale(.85); }
  63%, 84%  { opacity: 1; transform: none; }
  89%, 100% { opacity: 0; transform: scale(.95); }
}
@keyframes stock-kva {
  0%, 62%   { opacity: 1; transform: none; }
  65%       { opacity: 0; transform: translateY(-.3em); }
  87.5%     { opacity: 0; transform: translateY(.3em); }
  91%, 100% { opacity: 1; transform: none; }
}
@keyframes stock-kvb {
  0%, 62%   { opacity: 0; transform: translateY(.3em); }
  65%, 85.5% { opacity: 1; transform: none; }
  88.5%, 100% { opacity: 0; transform: translateY(-.3em); }
}
@keyframes stock-delta {
  0%, 63%   { opacity: 0; transform: translateY(.3em); }
  67%, 86%  { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}
@keyframes stock-spark {
  0%, 62%   { stroke-dashoffset: 20; opacity: 1; }
  70%, 86%  { stroke-dashoffset: 0; opacity: 1; }
  93%       { stroke-dashoffset: 0; opacity: 0; }
  100%      { stroke-dashoffset: 20; opacity: 0; }
}
@keyframes stock-ring {
  0%, 34%   { opacity: 0; transform: scale(.4); }
  36%       { opacity: .9; transform: scale(.5); }
  48%, 100% { opacity: 0; transform: scale(2.6); }
}

/* mobile: crop in on the low row + PO card */
.mst--stock { --m-zoom: 1.04; --m-pan-x: 0em; --m-pan-y: 0em; }

/* ---- 05 Reporting & dashboards ---------------------------------
   Loop (9s): bars grow in day by day while the revenue KPI counts up,
   last week's trend line draws across, the channel donut fills,
   then the cursor clicks the best day (Sat), which lights up brand
   yellow with a tooltip, and the scheduled weekly report chip lands.
   Base = that finished frame. */
.mst--reporting { --sw: 40; --sh: 34; }

.mst--reporting .rp-win { left: 0; top: .2em; width: 40em; height: 31.6em; background: #fbfcfd; }
.mst--reporting .mui-win__bar { background: #fff; }

/* toolbar */
.mst--reporting .rp-tools { display: flex; align-items: center; gap: .6em; padding: .8em 1em .2em; }
.mst--reporting .rp-tools__h { font-family: var(--font-display); font-size: 1.1em; font-weight: 500; letter-spacing: -.03em; }
.mst--reporting .rp-tools__h em { font-family: var(--font-body); font-style: normal; font-size: .64em; font-weight: 500; letter-spacing: 0; color: var(--ink-40); margin-left: .5em; }
.mst--reporting .rp-seg { margin-left: auto; display: flex; padding: .18em; border-radius: .55em; background: var(--mui-soft); border: 1px solid #eceff3; }
.mst--reporting .rp-seg > span { font-size: .6em; font-weight: 600; padding: .32em .75em; border-radius: .6em; color: var(--ink-60); }
.mst--reporting .rp-seg > .rp-seg__on { background: #fff; color: var(--ink); box-shadow: 0 .05em .2em rgba(18,20,23,.12); }
.mst--reporting .rp-live { background: var(--ok-soft); color: #157a4a; }
.mst--reporting .rp-live i { width: .55em; height: .55em; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 .25em rgba(31,157,99,.18); }

/* KPI row */
.mst--reporting .rp-kpis { position: absolute; left: 1em; right: 1em; top: 5.2em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
.mst--reporting .rp-kpi {
  position: relative; display: grid; gap: .45em; padding: .8em .9em .75em;
  background: #fff; border: 1px solid var(--mui-line); border-radius: .75em;
  box-shadow: 0 .08em .25em rgba(18,20,23,.04);
}
.mst--reporting .rp-kpi__row { display: flex; align-items: center; justify-content: space-between; gap: .4em; }
.mst--reporting .rp-kpi__num { font-size: 1.55em; display: block; height: 1em; }
.mst--reporting .rp-delta { font-size: .6em; padding: .25em .5em; gap: .2em; }
.mst--reporting .rp-delta svg { width: .9em; height: .9em; }
.mst--reporting .rp-delta--flat { color: var(--ink-60); }
.mst--reporting .rp-spark { display: block; width: 100%; height: 1.2em; overflow: visible; }

/* counting revenue ticker: base shows the final value (last row) */
.mst--reporting .rp-tick { overflow: hidden; }
.mst--reporting .rp-tick__col { display: flex; flex-direction: column; transform: translateY(-4em); animation: reporting-tick 9s var(--ease-out) infinite; }
.mst--reporting .rp-tick__col b { display: block; height: 1em; line-height: 1; font-weight: 500; }
.mst--reporting .rp-tick__col b:first-child { visibility: hidden; }
.mst--reporting .rp-fadein { animation: reporting-fadein 9s var(--ease-out) infinite; }

/* cards */
.mst--reporting .rp-card {
  position: absolute; top: 11.5em; height: 19.1em;
  background: #fff; border: 1px solid var(--mui-line); border-radius: .75em;
  box-shadow: 0 .08em .25em rgba(18,20,23,.04);
}
.mst--reporting .rp-card__head { display: flex; align-items: center; justify-content: space-between; height: 2.9em; padding: 0 .95em; }
.mst--reporting .rp-chart { left: 1em; width: 26.1em; }
.mst--reporting .rp-chart .rp-card__head { justify-content: flex-start; gap: .85em; }
.mst--reporting .rp-donut { left: 27.8em; width: 11.2em; }

.mst--reporting .rp-legend { position: absolute; left: .95em; bottom: 1.25em; display: flex; gap: 1.1em; }
.mst--reporting .rp-legend > span { display: flex; align-items: center; gap: .4em; font-size: .6em; font-weight: 500; color: var(--ink-60); }
.mst--reporting .rp-sw { display: block; }
.mst--reporting .rp-sw--bar { width: .9em; height: .9em; border-radius: .2em; background: #cdd4de; }
.mst--reporting .rp-sw--line { width: 1.4em; height: 0; border-top: .16em solid var(--ink); border-radius: 1em; }

/* plot */
.mst--reporting .rp-plot { position: absolute; left: 0; top: 2.9em; width: 100%; height: 15.6em; }
.mst--reporting .rp-svg { position: absolute; left: 2.6em; top: .5em; width: 22em; height: 10.8em; overflow: visible; }
.mst--reporting .rp-y { position: absolute; left: .95em; top: .5em; height: 10.8em; width: 1.5em; }
.mst--reporting .rp-y b {
  position: absolute; left: 0; font-family: var(--font-mono); font-weight: 400;
  font-size: .5em; color: var(--ink-40); transform: translateY(-50%);
}
.mst--reporting .rp-y b:nth-child(1) { top: 1.3em; }
.mst--reporting .rp-y b:nth-child(2) { top: 6.2em; }
.mst--reporting .rp-y b:nth-child(3) { top: 11.1em; }
.mst--reporting .rp-y b:nth-child(4) { top: 16em; }
.mst--reporting .rp-y b:nth-child(5) { top: 20.9em; }
.mst--reporting .rp-x { position: absolute; left: 2.6em; top: 11.9em; width: 22em; display: grid; grid-template-columns: repeat(7, 1fr); }
.mst--reporting .rp-x b { text-align: center; font-size: .58em; font-weight: 500; color: var(--ink-40); }
.mst--reporting .rp-x b.rp-x--hi { color: var(--ink); font-weight: 600; }

.mst--reporting .rp-bar {
  fill: #d5dbe4;
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: reporting-bar 9s var(--ease-out) infinite;
  animation-delay: calc(var(--i) * .09s - .6s);
}
.mst--reporting .rp-bar--hi {
  fill: var(--accent); stroke: #e8b900; stroke-width: .8;
  animation-name: reporting-bar-hi;
}
.mst--reporting .rp-band { fill: #fff6cc; animation: reporting-band 9s var(--ease-out) infinite; }
.mst--reporting .rp-line { stroke-dashoffset: 0; animation: reporting-line 9s var(--ease-io) infinite; }
.mst--reporting .rp-dots circle { animation: reporting-dots 9s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }

/* tooltip: floats above the Saturday bar (bar centre x = 19.9em, top = 4.4em) */
.mst--reporting .rp-tip {
  position: absolute; left: 15.9em; top: .35em; width: 9.1em; z-index: 3;
  display: grid; gap: .3em; padding: .5em .65em .55em;
  background: var(--ink); color: #fff; border-radius: .6em;
  box-shadow: 0 .8em 1.8em -.6em rgba(18,20,23,.5);
  transform-origin: 44% 100%;
  animation: reporting-tip 9s var(--ease-out) infinite;
}
.mst--reporting .rp-tip::after {
  content: ''; position: absolute; left: 4em; bottom: -.3em; margin-left: -.35em;
  width: .7em; height: .7em; background: var(--ink); transform: rotate(45deg); border-radius: .1em;
}
.mst--reporting .rp-tip__top { display: flex; align-items: center; justify-content: space-between; gap: .4em; }
.mst--reporting .rp-tip__v { font-size: 1.3em; color: var(--accent); }
.mst--reporting .rp-tip__up {
  display: inline-flex; align-items: center; gap: .2em; padding: .2em .45em; border-radius: 99em;
  font-size: .6em; font-weight: 600; color: #7fe0ae; background: rgba(31,157,99,.22);
}
.mst--reporting .rp-tip__up svg { width: .9em; height: .9em; }
.mst--reporting .rp-tip__r { display: flex; align-items: center; gap: .45em; font-size: .6em; font-weight: 500; color: rgba(255,255,255,.78); white-space: nowrap; }
.mst--reporting .rp-tip__r i { width: .7em; height: .7em; border-radius: .2em; background: var(--accent); flex: none; }

/* click ripple on the Saturday bar (hidden in the static frame) */
.mst--reporting .rp-ripple {
  position: absolute; left: 18.95em; top: 6.7em; width: 2em; height: 2em; z-index: 2;
  border-radius: 50%; border: .14em solid var(--ink); background: rgba(18,20,23,.08);
  opacity: 0; pointer-events: none;
  animation: reporting-ripple 9s var(--ease-out) infinite;
}

/* donut */
.mst--reporting .rp-ring { position: relative; width: 7.6em; height: 7.6em; margin: .2em auto 0; }
.mst--reporting .rp-ring svg { width: 100%; height: 100%; }
.mst--reporting .rp-seg1 { animation: reporting-seg1 9s var(--ease-out) infinite; }
.mst--reporting .rp-seg2 { animation: reporting-seg2 9s var(--ease-out) infinite; }
.mst--reporting .rp-seg3 { animation: reporting-seg3 9s var(--ease-out) infinite; }
.mst--reporting .rp-ring__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .25em; }
.mst--reporting .rp-ring__c b { font-size: 1.15em; }
.mst--reporting .rp-ring__c em { font-style: normal; font-size: .56em; color: var(--ink-40); font-weight: 500; }
.mst--reporting .rp-leg { list-style: none; margin: 1em 0 0; padding: 0 .95em; display: grid; gap: .55em; }
.mst--reporting .rp-leg li { display: flex; align-items: center; gap: .5em; font-size: .62em; font-weight: 500; color: var(--ink-60); }
.mst--reporting .rp-leg li i { width: .8em; height: .8em; border-radius: .22em; flex: none; }
.mst--reporting .rp-leg li b { margin-left: auto; color: var(--ink); font-weight: 600; font-family: var(--font-mono); font-size: .95em; }

/* report chip */
.mst--reporting .rp-chip {
  left: 13.4em; top: 29.2em; width: 25.2em;
  display: flex; align-items: center; gap: .75em; padding: .7em .8em .7em .75em;
  animation: reporting-chip 9s var(--ease-out) infinite;
}
.mst--reporting .rp-chip__ico { width: 2.3em; height: 2.3em; border-radius: .65em; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.mst--reporting .rp-chip__ico svg { width: 58%; height: 58%; }
.mst--reporting .rp-chip__txt { display: grid; gap: .12em; flex: 1; }
.mst--reporting .rp-chip__ok { width: 1.6em; height: 1.6em; }

/* cursor: hidden in the static frame; tip lands on the Saturday bar */
.mst--reporting .rp-cursor { left: 20.6em; top: 19em; opacity: 0; animation: reporting-cursor 9s var(--ease-io) infinite; }

/* ---- timeline (9s) ----
   0-19%  bars grow + revenue counts up · 22-40% trend line draws
   24-42% donut fills · 44-52% cursor glides to Sat, click
   52-58% Sat turns yellow + tooltip · 64-70% report chip lands
   70-84% rest · 84-96% everything fades out together */
@keyframes reporting-bar {
  0%, 6%    { transform: scaleY(0); opacity: 1; }
  19%, 88%  { transform: scaleY(1); opacity: 1; }
  96%, 100% { transform: scaleY(1); opacity: 0; }
}
@keyframes reporting-bar-hi {
  0%, 6%    { transform: scaleY(0); opacity: 1; fill: #d5dbe4; stroke-width: 0; }
  19%, 51%  { transform: scaleY(1); fill: #d5dbe4; stroke-width: 0; }
  55%, 88%  { transform: scaleY(1); opacity: 1; fill: var(--accent); stroke-width: .8; }
  96%, 100% { transform: scaleY(1); opacity: 0; fill: var(--accent); }
}
@keyframes reporting-tick {
  0%, 2%    { transform: translateY(-1em); opacity: 0; }
  5%        { transform: translateY(-1em); opacity: 1; }
  10%       { transform: translateY(-2em); }
  15%       { transform: translateY(-3em); }
  20%, 87%  { transform: translateY(-4em); opacity: 1; }
  95%, 100% { transform: translateY(-4em); opacity: 0; }
}
@keyframes reporting-fadein {
  0%, 12%   { opacity: 0; transform: translateY(.3em); }
  20%, 87%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}
@keyframes reporting-line {
  0%, 22%   { stroke-dashoffset: 1; opacity: 1; }
  40%, 83%  { stroke-dashoffset: 0; opacity: 1; }
  90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes reporting-dots {
  0%, 39%   { opacity: 0; transform: scale(0); }
  45%, 83%  { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: none; }
}
@keyframes reporting-seg1 {
  0%, 24%   { stroke-dasharray: 0 100; opacity: 1; }
  34%, 87%  { stroke-dasharray: 50 50; opacity: 1; }
  95%, 100% { stroke-dasharray: 50 50; opacity: 0; }
}
@keyframes reporting-seg2 {
  0%, 30%   { stroke-dasharray: 0 100; opacity: 1; }
  38%, 87%  { stroke-dasharray: 31 69; opacity: 1; }
  95%, 100% { stroke-dasharray: 31 69; opacity: 0; }
}
@keyframes reporting-seg3 {
  0%, 35%   { stroke-dasharray: 0 100; opacity: 1; }
  42%, 87%  { stroke-dasharray: 15 85; opacity: 1; }
  95%, 100% { stroke-dasharray: 15 85; opacity: 0; }
}
@keyframes reporting-band {
  0%, 51%   { opacity: 0; }
  56%, 84%  { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes reporting-tip {
  0%, 52%   { opacity: 0; transform: translateY(.6em) scale(.92); }
  57%, 84%  { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(.3em) scale(.97); }
}
@keyframes reporting-ripple {
  0%, 50%   { opacity: 0; transform: scale(.3); }
  51%       { opacity: .9; transform: scale(.4); }
  58%, 100% { opacity: 0; transform: scale(1.6); }
}
@keyframes reporting-chip {
  0%, 63%   { opacity: 0; transform: translateY(1.4em) scale(.96); }
  70%, 86%  { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: translateY(.6em); }
}
@keyframes reporting-cursor {
  0%, 40%   { opacity: 0; transform: translate(9em, 8em); }
  43%       { opacity: 1; transform: translate(9em, 8em); }
  50%       { opacity: 1; transform: translate(0, 0); }
  51%       { opacity: 1; transform: translate(0, 0) scale(.88); }
  53%       { opacity: 1; transform: translate(0, 0); }
  62%       { opacity: 1; transform: translate(0, 0); }
  70%, 100% { opacity: 0; transform: translate(4em, 6em); }
}

/* mobile: crop in on the chart, tooltip and the report chip */
.mst--reporting { --m-zoom: 1.25; --m-pan-x: -.6em; --m-pan-y: -5em; }

/* ---- CRM & sales pipeline -----------------------------------
   Loop (9s): cursor grabs "Lim & Partners" in Proposal, the card
   lifts and glides into Won, lands and turns brand yellow; Won's
   total flashes to S$31,000 and a "Deal won +S$12,400" toast rises
   over the window's bottom-right edge. Calm rest, then a soft fade.
   Base styles = the landed, won frame.                          */
.mst--crm { --sw: 32; --sh: 19; }

.mst--crm .cr-win { left: 0; top: 0; width: 31em; height: 16.6em; }
.mst--crm .mui-win__bar { height: 2em; }
.mst--crm .cr-add { margin-left: auto; font-size: .62em; padding: .35em .9em; }

/* columns */
.mst--crm .cr-col {
  position: absolute; top: 2.6em; width: 7.25em; height: 13.4em;
  border-radius: .7em; background: #f5f6f9;
  box-shadow: inset 0 0 0 1px #eceef2;
  overflow: hidden;
}
.mst--crm .cr-col--0 { left: .4em; }
.mst--crm .cr-col--1 { left: 8.05em; }
.mst--crm .cr-col--2 { left: 15.7em; }
.mst--crm .cr-col--3 { left: 23.35em; }
.mst--crm .cr-col--won { background: #fffbea; box-shadow: inset 0 0 0 1px #f6e7a6; animation: crm-won 9s var(--ease-out) infinite; }

.mst--crm .cr-hd { display: grid; gap: .2em; padding: .55em .55em 0; }
.mst--crm .cr-hd__row { display: flex; align-items: center; gap: .35em; }
.mst--crm .cr-dot { width: .45em; height: .45em; border-radius: 50%; background: #b8bec8; flex: none; }
.mst--crm .cr-col--1 .cr-dot { background: var(--info); }
.mst--crm .cr-col--2 .cr-dot { background: #7c5cff; }
.mst--crm .cr-col--3 .cr-dot { background: var(--ok); }
.mst--crm .cr-hd__row b { font-size: .78em; font-weight: 600; }
.mst--crm .cr-cnt {
  margin-left: auto; min-width: 1.8em; padding: .12em .45em; border-radius: 99em;
  background: #fff; box-shadow: inset 0 0 0 1px #e3e6ec;
  font-family: var(--font-mono); font-size: .62em; font-weight: 500; color: var(--ink-60); text-align: center;
}
.mst--crm .cr-tot {
  justify-self: start; position: relative;
  font-family: var(--font-display); font-weight: 500; font-size: .95em; letter-spacing: -.03em; color: var(--ink-80);
}
/* Won total: highlighter flash when the new total lands */
.mst--crm .cr-tot--won { color: var(--ink); font-weight: 600; z-index: 0; }
.mst--crm .cr-tot--won::before {
  content: ''; position: absolute; left: -.2em; right: -.2em; top: .12em; bottom: .02em; z-index: -1;
  border-radius: .25em; background: var(--accent); opacity: .45; transform-origin: left center;
  animation: crm-mark 9s var(--ease-out) infinite;
}

/* number swaps (before -> after), base shows "after" */
.mst--crm .cr-sw { display: inline-grid; }
.mst--crm .cr-sw > span { grid-area: 1 / 1; }
.mst--crm .cr-sw__a { opacity: 0; animation: crm-swa 9s var(--ease-out) infinite; }
.mst--crm .cr-sw__b { animation: crm-swb 9s var(--ease-out) infinite; }

/* deal cards */
.mst--crm .cr-card {
  position: absolute; left: .3em; width: 6.65em; height: 4.8em;
  box-sizing: border-box; padding: .55em .6em .5em;
  display: grid; grid-template-rows: auto auto 1fr; gap: .1em;
  background: #fff; border-radius: .6em;
  border: 1px solid var(--mui-line);
  box-shadow: 0 .08em .2em rgba(18,20,23,.05);
}
.mst--crm .cr-s1 { top: 3.1em; }
.mst--crm .cr-s2 { top: 8.3em; }
.mst--crm .cr-s3 { top: 13.5em; }
.mst--crm .cr-co { font-size: .78em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mst--crm .cr-val { font-family: var(--font-display); font-weight: 500; font-size: 1.02em; letter-spacing: -.03em; }
.mst--crm .cr-ft { display: flex; align-items: flex-end; gap: .35em; }
.mst--crm .cr-ft .mui-avatar { font-size: .52em; box-shadow: none; }
.mst--crm .cr-ic { width: 1em; height: 1em; border-radius: .3em; display: grid; place-items: center; flex: none; }
.mst--crm .cr-ic svg { width: 78%; height: 78%; }
.mst--crm .cr-ic--wa { color: #25d366; }
.mst--crm .cr-ic--wa svg { width: 100%; height: 100%; }
.mst--crm .cr-ic--ml { background: var(--info-soft); color: #2f6fe0; }
.mst--crm .cr-ic--ph { background: #f0ecff; color: #6a4ae6; }

/* Proposal keeps a placeholder so the column doesn't read as broken */
.mst--crm .cr-adddeal {
  position: absolute; box-sizing: border-box;
  display: grid; place-items: center;
  border: 1px dashed #d3d8e0; border-radius: calc(.6em / .7);
  color: var(--ink-40); font-weight: 500;
  animation: crm-add 9s var(--ease-out) infinite;
}
.mst--crm .cr-adddeal { font-size: .7em; left: calc(.3em / .7); top: calc(8.3em / .7); width: calc(6.65em / .7); height: calc(2.4em / .7); }

/* neighbours making room */
.mst--crm .cr-up   { animation: crm-up 9s var(--ease-io) infinite; }
.mst--crm .cr-down { animation: crm-down 9s var(--ease-io) infinite; }
.mst--crm .cr-ghost {
  position: absolute; left: .2em; top: 2.75em; width: 6.85em; height: 5.2em; box-sizing: border-box;
  border: 1px dashed var(--accent-deep); border-radius: .7em; background: rgba(254,212,35,.14);
  opacity: 0; animation: crm-ghost 9s var(--ease-out) infinite;
}

/* the deal that moves */
.mst--crm .cr-mover {
  left: 23.65em; top: 5.7em; z-index: 5; overflow: hidden;
  border-color: #f0c400;
  box-shadow: 0 .15em .4em rgba(18,20,23,.08), 0 1em 2em -.8em rgba(160,120,0,.45);
  animation: crm-move 9s var(--ease-io) infinite;
}
.mst--crm .cr-mover > :not(.cr-glow) { position: relative; }
.mst--crm .cr-glow {
  position: absolute; inset: 0; background: var(--accent);
  animation: crm-glow 9s var(--ease-out) infinite;
}
.mst--crm .cr-mover .cr-co { color: var(--accent-ink); }
.mst--crm .cr-tick {
  position: absolute !important; right: .5em; bottom: .5em; width: 1.1em; height: 1.1em;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-ink); color: var(--accent);
  animation: crm-tick 9s var(--ease-out) infinite;
}
.mst--crm .cr-tick svg { width: 70%; height: 70%; }

/* "Deal won" toast, overhanging the window's bottom-right edge */
.mst--crm .cr-toast {
  right: 0; bottom: .1em; z-index: 8;
  display: flex; align-items: center; gap: .6em;
  padding: .55em .8em .55em .55em; border-radius: .8em;
  animation: crm-toast 9s var(--ease-out) infinite;
}
.mst--crm .cr-toast::before {
  content: ''; position: absolute; inset: -1.2em -1em; z-index: -1; border-radius: 2em;
  background: radial-gradient(closest-side, rgba(254,212,35,.38), rgba(254,212,35,0));
}
.mst--crm .cr-toast__ico {
  width: 2em; height: 2em; border-radius: .6em; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
}
.mst--crm .cr-toast__ico svg { width: 58%; height: 58%; }
.mst--crm .cr-toast__txt { display: grid; gap: .1em; }
.mst--crm .cr-toast__txt b { font-size: .8em; font-weight: 600; }
.mst--crm .cr-toast__txt span { font-size: .66em; color: var(--ink-60); white-space: nowrap; }
.mst--crm .cr-toast__amt {
  margin-left: .4em; font-family: var(--font-display); font-weight: 600; font-size: 1.1em;
  letter-spacing: -.03em; color: var(--ok); white-space: nowrap;
}

.mst--crm .cr-cursor { left: 28.4em; top: 7.8em; opacity: 0; animation: crm-cursor 9s var(--ease-io) infinite; }

/* ---- timeline ----------------------------------------------- */
@keyframes crm-move {
  0%        { opacity: 0; transform: translateX(-7.65em); }
  6%, 17%   { opacity: 1; transform: translateX(-7.65em); box-shadow: 0 .08em .2em rgba(18,20,23,.05); border-color: var(--mui-line); }
  22%       { transform: translate(-7.65em, -.5em) rotate(-2.5deg) scale(1.05); box-shadow: 0 .3em .6em rgba(18,20,23,.08), 0 2em 3em -1em rgba(18,20,23,.4); border-color: var(--mui-line); }
  38%       { transform: translate(0, -.5em) rotate(1.5deg) scale(1.05); box-shadow: 0 .3em .6em rgba(18,20,23,.08), 0 2em 3em -1em rgba(18,20,23,.4); }
  43%       { transform: none; border-color: var(--mui-line); }
  47%, 86%  { opacity: 1; transform: none; border-color: #f0c400; box-shadow: 0 .15em .4em rgba(18,20,23,.08), 0 1em 2em -.8em rgba(160,120,0,.45); }
  93%, 100% { opacity: 0; transform: translateY(.3em) scale(.97); border-color: #f0c400; }
}
@keyframes crm-glow {
  0%, 43%   { opacity: 0; }
  48%, 100% { opacity: 1; }
}
@keyframes crm-tick {
  0%, 46%   { opacity: 0; transform: scale(.3); }
  51%       { opacity: 1; transform: scale(1.15); }
  54%, 100% { opacity: 1; transform: none; }
}
@keyframes crm-up {
  0%, 19%   { transform: translateY(5.2em); }
  29%, 88%  { transform: none; }
  97%, 100% { transform: translateY(5.2em); }
}
@keyframes crm-add {
  0%, 27%   { opacity: 0; }
  33%, 86%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes crm-down {
  0%, 26%   { transform: translateY(-5.2em); }
  36%, 88%  { transform: none; }
  97%, 100% { transform: translateY(-5.2em); }
}
@keyframes crm-ghost {
  0%, 30%   { opacity: 0; }
  35%, 41%  { opacity: 1; }
  45%, 100% { opacity: 0; }
}
@keyframes crm-won {
  0%, 43%   { background-color: #f5f6f9; box-shadow: inset 0 0 0 1px #eceef2; }
  50%, 86%  { background-color: #fffbea; box-shadow: inset 0 0 0 1px #f6e7a6; }
  95%, 100% { background-color: #f5f6f9; box-shadow: inset 0 0 0 1px #eceef2; }
}
@keyframes crm-mark {
  0%, 47%   { opacity: 0; transform: scaleX(0); }
  53%       { opacity: 1; transform: scaleX(1); }
  64%, 86%  { opacity: .45; transform: scaleX(1); }
  93%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes crm-swa {
  0%, 45%   { opacity: 1; transform: none; }
  50%, 89%  { opacity: 0; transform: translateY(-.5em); }
  95%, 100% { opacity: 1; transform: none; }
}
@keyframes crm-swb {
  0%, 46%   { opacity: 0; transform: translateY(.5em); }
  51%, 89%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}
@keyframes crm-toast {
  0%, 49%   { opacity: 0; transform: translateY(1.4em) scale(.96); }
  55%, 86%  { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: translateY(.6em) scale(.98); }
}
@keyframes crm-cursor {
  0%, 5%    { opacity: 0; transform: translate(-2em, 9em); }
  9%        { opacity: 1; transform: translate(-4.5em, 6.5em); }
  17%       { opacity: 1; transform: translate(-7.65em, 0) scale(1); }
  19%       { transform: translate(-7.65em, 0) scale(.85); }
  22%       { transform: translate(-7.65em, -.5em) scale(.85); }
  38%       { transform: translate(0, -.5em) scale(.85); }
  43%       { opacity: 1; transform: translate(0, 0) scale(1); }
  52%, 100% { opacity: 0; transform: translate(2.5em, -3em); }
}

/* mobile: crop in on Proposal -> Won + the toast, where the story is */
.mst--crm { --m-zoom: 1.4; --m-pan-x: -7.9em; --m-pan-y: -.9em; }

/* ---- Warehouse management ------------------------------------
   Loop (9s): the picker walks the shortest route through Zone A;
   each target bin is scanned (beam), flashes brand yellow and pops
   "+n" while the pick list ticks off; ends at Pack 02 with "Ready to
   pack". Base styles = the finished frame (all picked, at the station). */
.mst--warehouse { --sw: 40; --sh: 34; --wh-d: 9s; }

.mst--warehouse .wh-win { left: 0; top: .4em; width: 26.5em; height: 33.2em; }
.mst--warehouse .wh-tools { display: flex; align-items: center; gap: .4em; height: 2.7em; padding: 0 .9em; font-size: 1.12em; }
.mst--warehouse .wh-who { margin-left: .5em; display: flex; align-items: center; gap: .45em; }
.mst--warehouse .wh-who .mui-avatar { width: 1.75em; height: 1.75em; font-size: .56em; }
.mst--warehouse .wh-who__t { font-size: .6em; font-weight: 600; color: var(--ink-60); white-space: nowrap; }

.mst--warehouse .wh-map {
  position: absolute; left: .8em; top: 4.9em; width: 24.9em; height: 27.4em;
  border-radius: .55em;
  background:
    linear-gradient(to right, rgba(18,20,23,.035) 1px, transparent 1px) 0 0 / 1.4em 1.4em,
    linear-gradient(to bottom, rgba(18,20,23,.035) 1px, transparent 1px) 0 0 / 1.4em 1.4em,
    #f7f8fa;
  box-shadow: inset 0 0 0 1px #eceff3;
}
.mst--warehouse .wh-routes { position: absolute; inset: 0; width: 24.9em; height: 27.4em; overflow: visible; z-index: 3; }
.mst--warehouse .wh-plan { stroke: rgba(18,20,23,.36); stroke-width: .17; stroke-dasharray: .4 .42; stroke-linejoin: round; }
.mst--warehouse .wh-trail {
  stroke: var(--ink); stroke-width: .32; stroke-linejoin: round;
  stroke-dasharray: 51.7 60; stroke-dashoffset: 0;
  animation: warehouse-trail var(--wh-d) linear infinite;
}

/* racking */
.mst--warehouse .wh-rack {
  position: absolute; top: 3em; width: 3.6em; height: 16.5em;
  display: grid; grid-template-rows: repeat(6, 1fr);
  background: #fff; border: 1px solid #dde2e9; border-radius: .35em;
  box-shadow: 0 .1em .25em rgba(18,20,23,.05), 0 .5em 1em -.6em rgba(18,20,23,.2);
  z-index: 2;
}
.mst--warehouse .wh-bin {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: .42em .48em .5em; border-bottom: 1px solid #eef0f4;
}
.mst--warehouse .wh-bin:last-child { border-bottom: 0; }
.mst--warehouse .wh-bin b {
  position: relative; font-family: var(--font-mono); font-size: .82em; font-weight: 500;
  letter-spacing: .02em; color: var(--ink-60); line-height: 1;
}
.mst--warehouse .wh-bin i {
  position: relative; display: block; height: .28em; border-radius: 99em; background: #e3e7ed;
}
.mst--warehouse .wh-bin--p b { color: var(--accent-ink); font-weight: 600; }
.mst--warehouse .wh-bin--p i { background: rgba(18,20,23,.16); }
.mst--warehouse .wh-fill {
  position: absolute; inset: -1px; border-radius: .2em;
  background: var(--accent); box-shadow: 0 0 0 .14em rgba(254,212,35,.35);
  opacity: .5;
}

/* scan beam: a cone from the picker to the bin face */
.mst--warehouse .wh-beam {
  position: absolute; width: 1.75em; height: 2.2em; z-index: 5; opacity: 0;
  background: linear-gradient(90deg, rgba(254,212,35,.25), rgba(254,212,35,.9));
  clip-path: polygon(0 47%, 100% 4%, 100% 96%, 0 53%);
  transform-origin: left center;
}
.mst--warehouse .wh-beam::after {
  content: ''; position: absolute; right: 0; top: 4%; bottom: 4%; width: 1px;
  background: var(--ink); box-shadow: 0 0 .3em .06em rgba(254,212,35,.9);
}
.mst--warehouse .wh-beam--l {
  background: linear-gradient(270deg, rgba(254,212,35,.25), rgba(254,212,35,.9));
  clip-path: polygon(100% 47%, 0 4%, 0 96%, 100% 53%);
  transform-origin: right center;
}
.mst--warehouse .wh-beam--l::after { right: auto; left: 0; }
.mst--warehouse .wh-plus b { font-size: .8em; font-weight: 600; }
.mst--warehouse .wh-plus {
  position: absolute; z-index: 6; opacity: 0;
  margin-left: -.85em; padding: .22em .4em; border-radius: 99em;
  font-family: var(--font-mono); line-height: 1;
  background: var(--ink); color: var(--accent);
  box-shadow: 0 .4em .9em -.4em rgba(18,20,23,.5);
}

/* dock doors + start + pack station */
.mst--warehouse .wh-dock {
  position: absolute; bottom: .7em; width: 5em; height: 1.7em;
  border-radius: .35em;
  background: repeating-linear-gradient(-45deg, #dfe9fb 0 .35em, #eef3fd .35em .7em);
  border: 1px solid #c9d8f3;
  display: grid; place-items: center;
}
.mst--warehouse .wh-dock b { font-family: var(--font-mono); font-size: .62em; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #3d5f9a; background: #eef3fd; padding: .1em .45em; border-radius: .3em; }
.mst--warehouse .wh-start {
  position: absolute; display: flex; align-items: center; gap: .35em;
  font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #3d5f9a;
}
.mst--warehouse .wh-start b { font-size: .62em; font-weight: 500; }
.mst--warehouse .wh-start i { width: .6em; height: .6em; border-radius: 50%; border: 1px solid #7f9bcb; background: #fff; }
.mst--warehouse .wh-start { left: 5.6em; top: 22.45em; }
.mst--warehouse .wh-pack {
  position: absolute; left: 14.4em; top: 21.3em; width: 7.8em; height: 3.5em;
  display: flex; align-items: center; gap: .55em; padding: 0 .75em;
  background: #fff; border: 1px solid #dde2e9; border-radius: .5em;
  box-shadow: 0 .1em .25em rgba(18,20,23,.05), 0 .6em 1.2em -.7em rgba(18,20,23,.25);
  color: var(--ink); z-index: 2;
}
.mst--warehouse .wh-pack svg { position: relative; width: 1.35em; height: 1.35em; flex: none; }
.mst--warehouse .wh-pack > span:last-child { position: relative; display: grid; gap: .12em; }
.mst--warehouse .wh-pack b { font-size: .8em; font-weight: 600; }
.mst--warehouse .wh-pack em { font-style: normal; font-family: var(--font-mono); font-size: .58em; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
.mst--warehouse .wh-pack__glow {
  position: absolute; inset: -1px; border-radius: inherit;
  background: var(--accent-mist); box-shadow: 0 0 0 .18em var(--accent), 0 0 1.6em rgba(254,212,35,.45);
}

.mst--warehouse .wh-stage {
  position: absolute; left: 1em; top: 20.4em; width: 12.4em; height: 3.7em;
  border: 1px dashed #a9bfe6; border-radius: .45em; background: rgba(232,240,255,.7);
}
.mst--warehouse .wh-stage b { position: absolute; left: .9em; top: .8em; font-family: var(--font-mono); font-size: .62em; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #3d5f9a; }

/* the picker */
.mst--warehouse .wh-me {
  position: absolute; left: 0; top: 0; z-index: 8;
  width: 1.5em; height: 1.5em; margin: -.75em 0 0 -.75em;
  border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 .22em #fff, 0 .35em .8em rgba(18,20,23,.35), 0 0 0 .75em rgba(18,20,23,.07);
  display: grid; place-items: center;
  transform: translate(18.3em, 19.7em);
  animation: warehouse-me var(--wh-d) linear infinite;
}
.mst--warehouse .wh-me i { width: .5em; height: .5em; border-radius: 50%; background: var(--accent); }
.mst--warehouse .wh-ping {
  position: absolute; left: 18.3em; top: 19.7em; z-index: 7;
  width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%;
  border: .18em solid var(--accent); opacity: 0;
  animation: warehouse-ping var(--wh-d) var(--ease-out) infinite;
}

/* pick list */
.mst--warehouse .wh-list {
  left: 23.9em; top: 2.6em; width: 16.1em;
  padding: 1em 1em 1.05em; display: grid; gap: .75em; z-index: 10;
}
.mst--warehouse .wh-list__top { display: flex; align-items: center; justify-content: space-between; }
.mst--warehouse .wh-list__head { display: grid; gap: .25em; }
.mst--warehouse .wh-list__head .mui-h { font-size: 1.02em; }
.mst--warehouse .wh-list__head .mui-t { white-space: nowrap; }
.mst--warehouse .wh-cnt { display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; vertical-align: bottom; font-weight: 600; color: var(--ink); }
.mst--warehouse .wh-cnt__col { display: grid; transform: translateY(-5em); animation: warehouse-cnt var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-cnt__col i { font-style: normal; height: 1.25em; }
.mst--warehouse .wh-bar b { transform-origin: left; animation: warehouse-bar var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-bar { box-shadow: 0 0 0 .2em rgba(254,212,35,.28); animation: warehouse-barglow var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .15em; }
.mst--warehouse .wh-row {
  position: relative; display: flex; align-items: center; gap: .6em;
  padding: .45em .5em; margin: 0 -.5em; border-radius: .5em;
}
.mst--warehouse .wh-row::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--accent-mist); box-shadow: inset .18em 0 0 var(--accent);
  opacity: 0;
}
.mst--warehouse .wh-row > * { position: relative; }
.mst--warehouse .wh-ck {
  width: 1.45em; height: 1.45em; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  background: var(--ok); box-shadow: inset 0 0 0 1px var(--ok);
}
.mst--warehouse .wh-ck svg { width: 62%; height: 62%; }
.mst--warehouse .wh-row__t { flex: 1; min-width: 0; display: grid; gap: .1em; }
.mst--warehouse .wh-row__t b { font-size: .76em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mst--warehouse .wh-row__t em { font-style: normal; font-family: var(--font-mono); font-size: .6em; letter-spacing: .04em; color: var(--ink-40); }
.mst--warehouse .wh-loc {
  font-family: var(--font-mono); font-size: .66em; font-weight: 500;
  padding: .2em .45em; border-radius: .35em; background: var(--mui-soft); color: var(--ink-80);
}
.mst--warehouse .wh-qty { font-size: .72em; font-weight: 600; color: var(--ink-60); width: 1.5em; text-align: right; }
.mst--warehouse .wh-foot { position: relative; height: 2em; border-top: 1px solid #eef0f4; }
.mst--warehouse .wh-state { position: absolute; left: 0; right: 0; bottom: 0; top: .75em; display: flex; align-items: center; gap: .5em; }
.mst--warehouse .wh-state--go { font-size: .7em; font-weight: 600; color: var(--ink-60); opacity: 0; animation: warehouse-go var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 .25em var(--info-soft); }
.mst--warehouse .wh-state--done { justify-content: space-between; animation: warehouse-done var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-state--done .mui-pill { font-size: .7em; padding: .35em .75em; }

/* route KPI */
.mst--warehouse .wh-kpi {
  left: 23.9em; top: 29.8em; width: 16.1em; box-sizing: border-box;
  display: flex; align-items: center; gap: .7em; padding: .8em .9em; z-index: 9;
}
.mst--warehouse .wh-kpi__ico { width: 2.2em; height: 2.2em; border-radius: .6em; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--accent); }
.mst--warehouse .wh-kpi__ico svg { width: 60%; height: 60%; }
.mst--warehouse .wh-kpi__t { display: grid; gap: .3em; }
.mst--warehouse .wh-kpi__t > span:last-child { display: flex; align-items: center; gap: .5em; }
.mst--warehouse .wh-kpi .mui-num { font-size: 1.35em; }

.mst--warehouse .wh-pack__glow { animation: warehouse-pack var(--wh-d) var(--ease-out) infinite; }

.mst--warehouse .wh-p1 .wh-fill { animation: warehouse-p1-fill var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-beam.wh-p1 { animation: warehouse-p1-beam var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-plus.wh-p1 { animation: warehouse-p1-plus var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-row.wh-p1::before { animation: warehouse-p1-row var(--wh-d) var(--ease-io) infinite; }
.mst--warehouse .wh-row.wh-p1 .wh-ck { animation: warehouse-p1-ck var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-row.wh-p1 .wh-ck svg { animation: warehouse-p1-tick var(--wh-d) var(--ease-out) infinite; }
@keyframes warehouse-p1-fill {
  0%, 11.8% { opacity: 0; }
  12.7%, 16.3% { opacity: 1; }
  19.3%, 90% { opacity: .5; }
  96%, 100% { opacity: 0; }
}
@keyframes warehouse-p1-beam {
  0%, 10.1% { opacity: 0; transform: scaleX(.2); }
  10.9% { opacity: 1; transform: scaleX(1); }
  11.5% { opacity: .5; transform: scaleX(1); }
  12.1% { opacity: 1; transform: scaleX(1); }
  12.9% { opacity: 1; transform: scaleX(1); }
  13.9%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes warehouse-p1-plus {
  0%, 12.3% { opacity: 0; transform: translateY(.6em) scale(.8); }
  13.5% { opacity: 1; transform: none; }
  16.5% { opacity: 1; transform: translateY(-.5em); }
  18.3%, 100% { opacity: 0; transform: translateY(-1.1em); }
}
@keyframes warehouse-p1-row {
  0%, 4% { opacity: 0; }
  5.5%, 15.3% { opacity: 1; }
  17.8%, 100% { opacity: 0; }
}
@keyframes warehouse-p1-ck {
  0%, 12.7% { background: #fff; box-shadow: inset 0 0 0 1px #cfd5de; }
  13.7%, 90% { background: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
  96%, 100% { background: #fff; box-shadow: inset 0 0 0 1px #cfd5de; }
}
@keyframes warehouse-p1-tick {
  0%, 12.7% { opacity: 0; transform: scale(.4); }
  13.9%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: scale(.6); }
}
.mst--warehouse .wh-p2 .wh-fill { animation: warehouse-p2-fill var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-beam.wh-p2 { animation: warehouse-p2-beam var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-plus.wh-p2 { animation: warehouse-p2-plus var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-row.wh-p2::before { animation: warehouse-p2-row var(--wh-d) var(--ease-io) infinite; }
.mst--warehouse .wh-row.wh-p2 .wh-ck { animation: warehouse-p2-ck var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-row.wh-p2 .wh-ck svg { animation: warehouse-p2-tick var(--wh-d) var(--ease-out) infinite; }
@keyframes warehouse-p2-fill {
  0%, 23% { opacity: 0; }
  23.9%, 27.5% { opacity: 1; }
  30.5%, 90% { opacity: .5; }
  96%, 100% { opacity: 0; }
}
@keyframes warehouse-p2-beam {
  0%, 21.3% { opacity: 0; transform: scaleX(.2); }
  22.1% { opacity: 1; transform: scaleX(1); }
  22.7% { opacity: .5; transform: scaleX(1); }
  23.3% { opacity: 1; transform: scaleX(1); }
  24.1% { opacity: 1; transform: scaleX(1); }
  25.1%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes warehouse-p2-plus {
  0%, 23.5% { opacity: 0; transform: translateY(.6em) scale(.8); }
  24.7% { opacity: 1; transform: none; }
  27.7% { opacity: 1; transform: translateY(-.5em); }
  29.5%, 100% { opacity: 0; transform: translateY(-1.1em); }
}
@keyframes warehouse-p2-row {
  0%, 17.3% { opacity: 0; }
  18.8%, 26.5% { opacity: 1; }
  29%, 100% { opacity: 0; }
}
@keyframes warehouse-p2-ck {
  0%, 23.9% { background: #fff; box-shadow: inset 0 0 0 1px #cfd5de; }
  24.9%, 90% { background: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
  96%, 100% { background: #fff; box-shadow: inset 0 0 0 1px #cfd5de; }
}
@keyframes warehouse-p2-tick {
  0%, 23.9% { opacity: 0; transform: scale(.4); }
  25.1%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: scale(.6); }
}
.mst--warehouse .wh-p3 .wh-fill { animation: warehouse-p3-fill var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-beam.wh-p3 { animation: warehouse-p3-beam var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-plus.wh-p3 { animation: warehouse-p3-plus var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-row.wh-p3::before { animation: warehouse-p3-row var(--wh-d) var(--ease-io) infinite; }
.mst--warehouse .wh-row.wh-p3 .wh-ck { animation: warehouse-p3-ck var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-row.wh-p3 .wh-ck svg { animation: warehouse-p3-tick var(--wh-d) var(--ease-out) infinite; }
@keyframes warehouse-p3-fill {
  0%, 50.2% { opacity: 0; }
  51.1%, 54.7% { opacity: 1; }
  57.7%, 90% { opacity: .5; }
  96%, 100% { opacity: 0; }
}
@keyframes warehouse-p3-beam {
  0%, 48.5% { opacity: 0; transform: scaleX(.2); }
  49.3% { opacity: 1; transform: scaleX(1); }
  49.9% { opacity: .5; transform: scaleX(1); }
  50.5% { opacity: 1; transform: scaleX(1); }
  51.3% { opacity: 1; transform: scaleX(1); }
  52.3%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes warehouse-p3-plus {
  0%, 50.7% { opacity: 0; transform: translateY(.6em) scale(.8); }
  51.9% { opacity: 1; transform: none; }
  54.9% { opacity: 1; transform: translateY(-.5em); }
  56.7%, 100% { opacity: 0; transform: translateY(-1.1em); }
}
@keyframes warehouse-p3-row {
  0%, 28.5% { opacity: 0; }
  30%, 53.7% { opacity: 1; }
  56.2%, 100% { opacity: 0; }
}
@keyframes warehouse-p3-ck {
  0%, 51.1% { background: #fff; box-shadow: inset 0 0 0 1px #cfd5de; }
  52.1%, 90% { background: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
  96%, 100% { background: #fff; box-shadow: inset 0 0 0 1px #cfd5de; }
}
@keyframes warehouse-p3-tick {
  0%, 51.1% { opacity: 0; transform: scale(.4); }
  52.3%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: scale(.6); }
}
.mst--warehouse .wh-p4 .wh-fill { animation: warehouse-p4-fill var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-beam.wh-p4 { animation: warehouse-p4-beam var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-plus.wh-p4 { animation: warehouse-p4-plus var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-row.wh-p4::before { animation: warehouse-p4-row var(--wh-d) var(--ease-io) infinite; }
.mst--warehouse .wh-row.wh-p4 .wh-ck { animation: warehouse-p4-ck var(--wh-d) var(--ease-out) infinite; }
.mst--warehouse .wh-row.wh-p4 .wh-ck svg { animation: warehouse-p4-tick var(--wh-d) var(--ease-out) infinite; }
@keyframes warehouse-p4-fill {
  0%, 61.4% { opacity: 0; }
  62.3%, 65.9% { opacity: 1; }
  68.9%, 90% { opacity: .5; }
  96%, 100% { opacity: 0; }
}
@keyframes warehouse-p4-beam {
  0%, 59.7% { opacity: 0; transform: scaleX(.2); }
  60.5% { opacity: 1; transform: scaleX(1); }
  61.1% { opacity: .5; transform: scaleX(1); }
  61.7% { opacity: 1; transform: scaleX(1); }
  62.5% { opacity: 1; transform: scaleX(1); }
  63.5%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes warehouse-p4-plus {
  0%, 61.9% { opacity: 0; transform: translateY(.6em) scale(.8); }
  63.1% { opacity: 1; transform: none; }
  66.1% { opacity: 1; transform: translateY(-.5em); }
  67.9%, 100% { opacity: 0; transform: translateY(-1.1em); }
}
@keyframes warehouse-p4-row {
  0%, 55.7% { opacity: 0; }
  57.2%, 64.9% { opacity: 1; }
  67.4%, 100% { opacity: 0; }
}
@keyframes warehouse-p4-ck {
  0%, 62.3% { background: #fff; box-shadow: inset 0 0 0 1px #cfd5de; }
  63.3%, 90% { background: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
  96%, 100% { background: #fff; box-shadow: inset 0 0 0 1px #cfd5de; }
}
@keyframes warehouse-p4-tick {
  0%, 62.3% { opacity: 0; transform: scale(.4); }
  63.5%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: scale(.6); }
}

/* picker path: axis-aligned, so em translate keyframes trace it exactly */
@keyframes warehouse-me {
  0%        { opacity: 0; transform: translate(5.9em, 22.8em) scale(.6); }
  3%        { opacity: 1; transform: translate(5.9em, 22.8em) scale(1); animation-timing-function: var(--ease-io); }
  4%        { transform: translate(5.9em, 22.8em); animation-timing-function: var(--ease-io); }
  10.3%     { transform: translate(5.9em, 15.375em); }
  17.3%     { transform: translate(5.9em, 15.375em); animation-timing-function: var(--ease-io); }
  21.5%     { transform: translate(5.9em, 9.875em); }
  28.5%     { transform: translate(5.9em, 9.875em); animation-timing-function: cubic-bezier(.45,0,1,1); }
  35%       { transform: translate(5.9em, 1.6em); animation-timing-function: linear; }
  44.3%     { transform: translate(18.3em, 1.6em); animation-timing-function: cubic-bezier(0,0,.55,1); }
  48.7%     { transform: translate(18.3em, 7.125em); }
  55.7%     { transform: translate(18.3em, 7.125em); animation-timing-function: var(--ease-io); }
  59.9%     { transform: translate(18.3em, 12.625em); }
  66.9%     { transform: translate(18.3em, 12.625em); animation-timing-function: var(--ease-io); }
  73.9%     { opacity: 1; transform: translate(18.3em, 19.7em); }
  90%       { opacity: 1; transform: translate(18.3em, 19.7em); }
  95%, 100% { opacity: 0; transform: translate(18.3em, 19.7em) scale(.8); }
}
@keyframes warehouse-trail {
  0%, 4%    { stroke-dashoffset: 51.7; opacity: 1; animation-timing-function: var(--ease-io); }
  10.3%     { stroke-dashoffset: 44.275; }
  17.3%     { stroke-dashoffset: 44.275; animation-timing-function: var(--ease-io); }
  21.5%     { stroke-dashoffset: 38.775; }
  28.5%     { stroke-dashoffset: 38.775; animation-timing-function: cubic-bezier(.45,0,1,1); }
  35%       { stroke-dashoffset: 30.5; animation-timing-function: linear; }
  44.3%     { stroke-dashoffset: 18.1; animation-timing-function: cubic-bezier(0,0,.55,1); }
  48.7%     { stroke-dashoffset: 12.575; }
  55.7%     { stroke-dashoffset: 12.575; animation-timing-function: var(--ease-io); }
  59.9%     { stroke-dashoffset: 7.075; }
  66.9%     { stroke-dashoffset: 7.075; animation-timing-function: var(--ease-io); }
  73.9%, 90% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes warehouse-ping {
  0%, 73.5% { opacity: 0; transform: scale(.3); }
  74.3%     { opacity: .9; transform: scale(.45); }
  84%, 100% { opacity: 0; transform: scale(2.2); }
}
@keyframes warehouse-pack {
  0%, 73%   { opacity: 0; }
  77%, 90%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes warehouse-cnt {
  0%, 12.8%   { transform: translateY(0); opacity: 1; }
  13.8%, 24% { transform: translateY(-1.25em); }
  25%, 51.2% { transform: translateY(-2.5em); }
  52.2%, 62.4% { transform: translateY(-3.75em); }
  63.4%, 90%  { transform: translateY(-5em); opacity: 1; }
  94%         { transform: translateY(-5em); opacity: 0; }
  95%         { transform: translateY(0); opacity: 0; }
  99%, 100%   { transform: translateY(0); opacity: 1; }
}
@keyframes warehouse-bar {
  0%, 12.8%   { transform: scaleX(.02); opacity: 1; }
  14.5%, 24%  { transform: scaleX(.25); }
  25.7%, 51.2% { transform: scaleX(.5); }
  52.9%, 62.4% { transform: scaleX(.75); }
  64.1%, 90%  { transform: scaleX(1); opacity: 1; }
  95%         { transform: scaleX(1); opacity: 0; }
  96%         { transform: scaleX(.02); opacity: 0; }
  100%        { transform: scaleX(.02); opacity: 1; }
}
@keyframes warehouse-barglow {
  0%, 63%   { box-shadow: 0 0 0 0 rgba(254,212,35,0); }
  66%       { box-shadow: 0 0 0 .35em rgba(254,212,35,.45); }
  72%, 90%  { box-shadow: 0 0 0 .2em rgba(254,212,35,.28); }
  95%, 100% { box-shadow: 0 0 0 0 rgba(254,212,35,0); }
}
@keyframes warehouse-go {
  0%, 72.5% { opacity: 1; transform: none; }
  75%, 95%  { opacity: 0; transform: translateY(-.4em); }
  99%, 100% { opacity: 1; transform: none; }
}
@keyframes warehouse-done {
  0%, 74%   { opacity: 0; transform: translateY(.5em); }
  77.5%, 90% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(.3em); }
}

/* mobile: crop in on the floor plan with the pick list alongside */
.mst--warehouse { --m-zoom: 1.12; --m-pan-x: .5em; --m-pan-y: -.1em; }

/* ---- Fleet & delivery tracking --------------------------------
   Loop (9s): van leaves the hub and drives the route; each stop it
   reaches turns green, the ETA card rolls to the next stop, and at
   stop 4 a yellow proof-of-delivery card lands. Base = route done.
   Map units: 10 svg units = 1em, map origin at (0, 2.1em).       */
.mst--fleet { --sw: 40; --sh: 34; }

.mst--fleet .fl-win { left: 0; top: 0; width: 40em; height: 34em; }
.mst--fleet .fl-bar-r { margin-left: auto; display: flex; gap: .35em; }
.mst--fleet .fl-live {
  width: .5em; height: .5em; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 .22em rgba(31,157,99,.18);
}

.mst--fleet .fl-map { position: absolute; left: 0; top: 2.1em; width: 40em; height: 31.9em; overflow: hidden; }
.mst--fleet .fl-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.mst--fleet .fl-area {
  position: absolute;
  font-family: var(--font-mono); font-size: .5em; letter-spacing: .2em; text-transform: uppercase;
  color: #a3abb6; white-space: nowrap;
}
.mst--fleet .fl-area--1 { left: 1.2em; top: 31.4em; }
.mst--fleet .fl-area--2 { left: 43em; top: 8.6em; }
.mst--fleet .fl-area--3 { left: 40em; top: 52.4em; }
.mst--fleet .fl-area--4 { left: 58em; top: 36.4em; }

/* hub */
.mst--fleet .fl-hub { position: absolute; left: 4.5em; top: 23.5em; }
.mst--fleet .fl-hub__ico {
  position: absolute; left: -.85em; top: -.85em; width: 1.7em; height: 1.7em;
  display: grid; place-items: center; border-radius: .45em;
  background: var(--ink); color: #fff;
  box-shadow: 0 0 0 .2em #fff, 0 .3em .7em rgba(18,20,23,.25);
}
.mst--fleet .fl-hub__ico svg { width: 62%; height: 62%; }
.mst--fleet .fl-hub__lbl {
  position: absolute; left: -2.6em; top: -4.1em; white-space: nowrap;
  font-size: .56em; font-weight: 600; color: var(--ink-60);
  background: rgba(255,255,255,.92); border: 1px solid var(--mui-line);
  padding: .25em .55em; border-radius: 99em;
}

/* stop pins: element sits on the road point, head floats above */
.mst--fleet .fl-pin { position: absolute; width: 0; height: 0; }
.mst--fleet .fl-pin--1 { left: 12.5em; top: 23.5em; }
.mst--fleet .fl-pin--2 { left: 20.5em; top: 17.5em; }
.mst--fleet .fl-pin--3 { left: 29em;   top: 24.5em; }
.mst--fleet .fl-pin--4 { left: 35em;   top: 10em; }
.mst--fleet .fl-pin::before {
  content: ''; position: absolute; left: -.32em; top: -.32em; width: .64em; height: .64em;
  border-radius: 50%; background: #fff; border: .16em solid var(--ink);
}
.mst--fleet .fl-pin__head {
  position: absolute; left: -1.05em; top: -3.45em; width: 2.1em; height: 2.1em;
  border-radius: 50%; background: #fff; border: 1px solid #d9dee6;
  display: grid; place-items: center;
  box-shadow: 0 .15em .35em rgba(18,20,23,.08), 0 .6em 1.2em -.4em rgba(18,20,23,.3);
}
.mst--fleet .fl-pin__head::after {
  content: ''; position: absolute; left: 50%; bottom: -.34em; width: .6em; height: .6em;
  margin-left: -.3em; background: inherit; transform: rotate(45deg);
  border-right: 1px solid #d9dee6; border-bottom: 1px solid #d9dee6; border-radius: 0 0 .12em 0;
}
.mst--fleet .fl-pin__head b { font-family: var(--font-display); font-weight: 500; font-size: .85em; color: var(--ink); }
.mst--fleet .fl-pin__ok {
  position: absolute; inset: -1px; z-index: 1; border-radius: 50%;
  display: grid; place-items: center; background: var(--ok); color: #fff;
  box-shadow: 0 0 0 .18em #fff;
}
.mst--fleet .fl-pin__ok svg { width: 56%; height: 56%; }
.mst--fleet .fl-pin--4 .fl-pin__ok { background: var(--accent); color: var(--accent-ink); }

.mst--fleet .fl-ring {
  position: absolute; left: -1.6em; top: -4em; width: 3.2em; height: 3.2em;
  border-radius: 50%; border: .2em solid var(--accent); opacity: 0;
  animation: fleet-ring 9s var(--ease-out) infinite;
}

/* van */
.mst--fleet .fl-van { position: absolute; left: 35em; top: 10em; width: 0; height: 0; z-index: 3;
  animation: fleet-van 9s var(--ease-io) infinite; }
.mst--fleet .fl-van__dot {
  position: absolute; left: -1em; top: -1em; width: 2em; height: 2em; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff;
  box-shadow: 0 0 0 .2em #fff, 0 .4em .9em rgba(18,20,23,.35);
}
.mst--fleet .fl-van__dot svg { width: 64%; height: 64%; }
.mst--fleet .fl-van__halo {
  position: absolute; left: -2em; top: -2em; width: 4em; height: 4em; border-radius: 50%;
  background: radial-gradient(circle, rgba(18,20,23,.14), rgba(18,20,23,0) 70%);
}

.mst--fleet .fl-zoom {
  position: absolute; right: 1em; top: 1em; display: grid;
  background: #fff; border: 1px solid var(--mui-line); border-radius: .5em; overflow: hidden;
  box-shadow: 0 .3em .8em -.3em rgba(18,20,23,.25);
}
.mst--fleet .fl-zoom i {
  width: 1.8em; height: 1.7em; display: grid; place-items: center;
  font-style: normal; font-size: .8em; font-weight: 500; color: var(--ink-60);
}
.mst--fleet .fl-zoom i + i { border-top: 1px solid #eef0f4; }

/* route strokes */
.mst--fleet .fl-trail { stroke-dasharray: 100 101; stroke-dashoffset: 0;
  animation: fleet-trail 9s var(--ease-io) infinite; }

/* ETA card */
.mst--fleet .fl-eta { left: 1.1em; top: 3.2em; width: 16em; padding: .85em .95em .95em; display: grid; gap: .6em; }
.mst--fleet .fl-eta__top { display: flex; align-items: center; justify-content: space-between; }
.mst--fleet .fl-eta__van { font-size: .58em; font-weight: 600; color: var(--ink-60); }
.mst--fleet .fl-eta__win { height: 2.5em; overflow: hidden; }
.mst--fleet .fl-eta__roll { transform: translateY(-10em); animation: fleet-eta 9s var(--ease-out) infinite; }
.mst--fleet .fl-eta__it { height: 2.5em; display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.mst--fleet .fl-eta__it > span { display: grid; gap: .12em; }
.mst--fleet .fl-eta__it em {
  font-style: normal; font-family: var(--font-mono); font-size: .62em; color: var(--ink-60);
  padding: .3em .5em; border-radius: .4em; background: var(--mui-soft);
}
.mst--fleet .fl-eta__it em.fl-eta__ok { background: var(--ok-soft); color: #157a4a; }
.mst--fleet .fl-segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; }
.mst--fleet .fl-segs i { height: .4em; border-radius: 99em; background: #eef0f4; overflow: hidden; }
.mst--fleet .fl-segs b { display: block; height: 100%; background: var(--ok); border-radius: inherit; transform-origin: left center; }
.mst--fleet .fl-segs i:last-child b { background: var(--accent-deep); }

/* proof of delivery */
.mst--fleet .fl-pod {
  left: 17.6em; top: 6.9em; width: 15.4em; overflow: visible;
  animation: fleet-pod 9s var(--ease-out) infinite;
}
.mst--fleet .fl-pod::after {
  content: ''; position: absolute; right: -.42em; top: 2em; width: .8em; height: .8em;
  background: var(--accent); transform: rotate(45deg); border-radius: .1em;
}
.mst--fleet .fl-pod__head {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .6em;
  padding: .6em .75em; border-radius: .8em .8em 0 0;
  background: var(--accent); color: var(--accent-ink);
}
.mst--fleet .fl-pod__chk {
  width: 1.8em; height: 1.8em; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--accent-ink); color: var(--accent);
}
.mst--fleet .fl-pod__chk svg { width: 56%; height: 56%; }
.mst--fleet .fl-pod__ttl { display: grid; gap: .05em; flex: 1; }
.mst--fleet .fl-pod__ttl b { font-size: .98em; font-weight: 700; letter-spacing: -.01em; }
.mst--fleet .fl-pod__ttl em { font-style: normal; font-size: .7em; font-weight: 500; opacity: .75; }
.mst--fleet .fl-pod__time { font-family: var(--font-mono); font-size: .6em; font-weight: 500; opacity: .7; }
.mst--fleet .fl-pod__body { display: flex; align-items: center; gap: .5em; padding: .7em .75em .75em; }
.mst--fleet .fl-thumb {
  width: 3.9em; height: 2.9em; border-radius: .45em; overflow: hidden; flex: none;
  border: 1px solid var(--mui-line);
}
.mst--fleet .fl-thumb svg { width: 100%; height: 100%; display: block; }
.mst--fleet .fl-pod__meta { display: grid; gap: .2em; justify-items: start; margin-left: .15em; }
.mst--fleet .fl-pod__meta b { font-size: .76em; font-weight: 600; }

/* driver card */
.mst--fleet .fl-drv {
  left: 1.1em; top: 28.4em; width: 16em;
  display: flex; align-items: center; gap: .65em; padding: .7em .8em;
}
.mst--fleet .fl-drv__av { width: 2.4em; height: 2.4em; font-size: .7em; background: #7c5cff; }
.mst--fleet .fl-drv__txt { display: grid; gap: .1em; flex: 1; }
.mst--fleet .fl-drv__call {
  width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--mui-line); color: var(--ink-80);
}
.mst--fleet .fl-drv__call svg { width: 50%; height: 50%; }

.mst--fleet .fl-eta .mui-t, .mst--fleet .fl-pod .mui-t { font-size: .77em; }
.mst--fleet .fl-pod .mui-pill { font-size: .62em; }

/* stop number badge on the check */
.mst--fleet .fl-pin__n {
  position: absolute; right: -.75em; top: -.75em; width: 1.75em; height: 1.75em;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: .56em; line-height: 1;
  box-shadow: 0 0 0 .22em #fff, 0 .15em .4em rgba(18,20,23,.2);
}

/* driver status: crossfades from moving to parked */
.mst--fleet .fl-drv__sub { display: grid; }
.mst--fleet .fl-drv__sub > span { grid-area: 1 / 1; white-space: nowrap; }
.mst--fleet .fl-drv__a { opacity: 0; animation: fleet-drva 9s var(--ease-out) infinite; }
.mst--fleet .fl-drv__b { animation: fleet-drvb 9s var(--ease-out) infinite; }
.mst--fleet .fl-drv__b::before {
  content: ''; display: inline-block; width: .5em; height: .5em; margin-right: .4em; vertical-align: .05em;
  border-radius: 50%; background: var(--ok);
}

/* a second, quieter van elsewhere in the fleet */
.mst--fleet .fl-van2 { position: absolute; left: 35em; top: 28.2em; width: 0; height: 0; }
.mst--fleet .fl-van2__dot {
  position: absolute; left: -.55em; top: -.55em; width: 1.1em; height: 1.1em; border-radius: 50%;
  background: #8a93a0; box-shadow: 0 0 0 .18em #fff, 0 .2em .5em rgba(18,20,23,.2);
}
.mst--fleet .fl-van2__lbl {
  position: absolute; right: 1em; top: -.95em; white-space: nowrap;
  font-size: .56em; font-weight: 600; color: var(--ink-60);
  background: rgba(255,255,255,.92); border: 1px solid var(--mui-line);
  padding: .25em .55em; border-radius: 99em;
}

/* ---- motion ---- */
.mst--fleet .fl-ok1 { animation: fleet-s1 9s var(--ease-out) infinite; }
.mst--fleet .fl-ok2 { animation: fleet-s2 9s var(--ease-out) infinite; }
.mst--fleet .fl-ok3 { animation: fleet-s3 9s var(--ease-out) infinite; }
.mst--fleet .fl-ok4 { animation: fleet-s4 9s var(--ease-out) infinite; }

/* offsets from stop 4 (35, 10): hub (4.5,23.5) s1 (12.5,23.5) turn (12.5,17.5)
   s2 (20.5,17.5) s3 (29,24.5) turn (35,24.5) s4 (35,10) */
@keyframes fleet-van {
  0%        { opacity: 0; transform: translate(-28em, 13.5em) scale(.6); }
  4%        { opacity: 1; transform: translate(-28em, 13.5em) scale(1); }
  12%, 15%  { transform: translate(-22.5em, 13.5em); }
  21%       { transform: translate(-22.5em, 7.5em); }
  29%, 32%  { transform: translate(-14.5em, 7.5em); }
  43%, 46%  { transform: translate(-6em, 14.5em); }
  52%       { transform: translate(0, 14.5em); }
  64%, 88%  { opacity: 1; transform: translate(0, 0) scale(1); }
  94%       { opacity: 0; transform: translate(0, 0) scale(.7); }
  95%, 100% { opacity: 0; transform: translate(-28em, 13.5em) scale(.6); }
}
@keyframes fleet-trail {
  0%, 4%    { stroke-dashoffset: 95.3; opacity: 1; }
  12%, 15%  { stroke-dashoffset: 85.05; }
  21%       { stroke-dashoffset: 73.84; }
  29%, 32%  { stroke-dashoffset: 58.89; }
  43%, 46%  { stroke-dashoffset: 38.31; }
  52%       { stroke-dashoffset: 27.10; }
  64%, 88%  { stroke-dashoffset: 0; opacity: 1; }
  94%       { stroke-dashoffset: 0; opacity: 0; }
  95%       { stroke-dashoffset: 100; opacity: 0; }
  100%      { stroke-dashoffset: 100; opacity: 1; }
}
@keyframes fleet-s1 {
  0%, 12.5% { opacity: 0; transform: scale(.4); }
  14.5%     { opacity: 1; transform: scale(1.15); }
  16.5%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes fleet-s2 {
  0%, 29.5% { opacity: 0; transform: scale(.4); }
  31.5%     { opacity: 1; transform: scale(1.15); }
  33.5%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes fleet-s3 {
  0%, 43.5% { opacity: 0; transform: scale(.4); }
  45.5%     { opacity: 1; transform: scale(1.15); }
  47.5%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes fleet-s4 {
  0%, 64.5% { opacity: 0; transform: scale(.4); }
  66.5%     { opacity: 1; transform: scale(1.2); }
  69%, 88%  { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes fleet-ring {
  0%, 65%   { opacity: 0; transform: scale(.5); }
  66%       { opacity: .9; transform: scale(.6); }
  78%, 100% { opacity: 0; transform: scale(1.9); }
}
@keyframes fleet-eta {
  0%, 14%   { opacity: 1; transform: translateY(0); }
  17%, 31%  { transform: translateY(-2.5em); }
  34%, 45%  { transform: translateY(-5em); }
  48%, 65%  { transform: translateY(-7.5em); }
  68%, 90%  { opacity: 1; transform: translateY(-10em); }
  95%       { opacity: 0; transform: translateY(-10em); }
  96%       { opacity: 0; transform: translateY(0); }
  100%      { opacity: 1; transform: translateY(0); }
}
@keyframes fleet-drva {
  0%, 64%   { opacity: 1; }
  67%, 96%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes fleet-drvb {
  0%, 64%   { opacity: 0; }
  67%, 90%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes fleet-pod {
  0%, 67%   { opacity: 0; transform: translate(1.2em, .5em) scale(.94); }
  74%, 89%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translate(.6em, 0) scale(.98); }
}

/* mobile: crop in on the route's last leg + proof of delivery */
.mst--fleet { --m-zoom: 1.25; --m-pan-x: -.4em; --m-pan-y: -3em; }

/* ---- Payments & checkout -------------------------------------
   Loop (8s): cursor presses the yellow "Pay" button, a PayNow QR
   slides in, a scan line sweeps while "Waiting for payment" spins,
   then the QR resolves to a green check with a yellow burst, the
   footer morphs to "Payment received" and a receipt toast pops.
   Base styles = the finished, paid frame.                        */
.mst--payments { --sw: 36; --sh: 21.6; }

/* ---------- checkout window ---------- */
.mst--payments .py-co { left: 0; top: .4em; width: 20.6em; height: 20.8em; }
.mst--payments .py-status { margin-left: auto; position: relative; display: grid; justify-items: end; }
.mst--payments .py-status > * { grid-area: 1 / 1; }
.mst--payments .py-status .mui-pill { font-size: .64em; }
.mst--payments .py-status__wait { opacity: 0; background: var(--accent-mist); color: #7a5b00; }
.mst--payments .py-co__body { display: grid; gap: .55em; padding: .8em .95em .95em; }

.mst--payments .py-item { display: flex; align-items: center; gap: .6em; }
.mst--payments .py-thumb { width: 2.2em; height: 2.2em; border-radius: .45em; flex: none; position: relative; overflow: hidden; }
.mst--payments .py-thumb--a { background: linear-gradient(145deg, #efe6d6, #dccbb0); }
.mst--payments .py-thumb--a::after { content: ''; position: absolute; left: 30%; top: 22%; width: 40%; height: 62%; border-radius: .2em .2em .1em .1em; background: #f8f3ea; box-shadow: 0 .05em .15em rgba(0,0,0,.12); }
.mst--payments .py-thumb--b { background: linear-gradient(145deg, #e3e8d8, #c4cdb1); }
.mst--payments .py-thumb--b::after { content: ''; position: absolute; left: 26%; top: 38%; width: 48%; height: 44%; border-radius: .12em; background: #7d8a5f; box-shadow: 0 -.35em 0 -.18em #7d8a5f; }
.mst--payments .py-item__name { display: grid; gap: .12em; flex: 1; min-width: 0; }
.mst--payments .py-item__name b { font-size: .72em; font-weight: 600; }
.mst--payments .py-item__name em { font-style: normal; font-size: .62em; color: var(--ink-40); }
.mst--payments .py-item__amt { font-size: .7em; font-weight: 600; font-variant-numeric: tabular-nums; }

.mst--payments .py-sum { display: grid; gap: .32em; margin: .1em 0 0; padding-top: .6em; border-top: 1px solid #eef0f4; }
.mst--payments .py-sum > div { display: flex; justify-content: space-between; align-items: baseline; }
.mst--payments .py-sum dt { font-size: .64em; color: var(--ink-60); }
.mst--payments .py-sum dd { margin: 0; font-size: .64em; font-weight: 500; color: var(--ink-80); font-variant-numeric: tabular-nums; }
.mst--payments .py-sum__total { padding-top: .35em; margin-top: .1em; border-top: 1px dashed #e3e6ec; }
.mst--payments .py-sum__total dt { font-size: .76em; font-weight: 600; color: var(--ink); }
.mst--payments .py-sum__total dd { font-family: var(--font-display); font-size: 1.05em; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }

.mst--payments .py-methods { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: .35em; }
.mst--payments .py-m {
  display: flex; align-items: center; gap: .4em;
  height: 2.3em; padding: 0 .5em; border-radius: .55em;
  border: 1px solid var(--mui-line); background: #fff;
  font-size: .64em; font-weight: 600; color: var(--ink-60);
}
.mst--payments .py-m--on {
  border-color: var(--accent-deep); background: var(--accent-mist); color: var(--ink);
  box-shadow: 0 0 0 .22em rgba(254,212,35,.28);
}
.mst--payments .py-radio { width: .95em; height: .95em; border-radius: 50%; flex: none; border: .12em solid #cfd4dc; background: #fff; }
.mst--payments .py-m--on .py-radio { border: .12em solid var(--ink); background: radial-gradient(circle, var(--ink) 0 38%, #fff 42%); }
.mst--payments .py-m__svg { width: 1.3em; height: 1.3em; flex: none; }
.mst--payments .py-m__ico {
  display: grid; place-items: center; flex: none;
  width: 1.45em; height: 1.45em; border-radius: .35em;
  background: var(--ink); color: var(--accent);
  font-family: var(--font-display); font-weight: 600; font-size: .85em; line-height: 1;
}
.mst--payments .py-pay { display: block; position: relative; }
.mst--payments .py-pay__btn {
  display: flex; width: 100%; box-sizing: border-box;
  padding: .85em 1em; font-size: .74em; border-radius: .7em;
  box-shadow: inset 0 -.12em 0 rgba(0,0,0,.08), 0 .5em 1.2em -.5em rgba(214,168,0,.7);
  transform-origin: 50% 50%;
  animation: payments-btn 8s var(--ease-out) infinite;
}
.mst--payments .py-pay__btn svg { width: 1.1em; height: 1.1em; }

.mst--payments .py-secure { display: flex; align-items: center; justify-content: center; gap: .4em; font-size: .6em; color: var(--ink-40); margin-top: -.1em; }
.mst--payments .py-secure svg { width: 1.2em; height: 1.2em; color: var(--ok); }

/* ---------- PayNow QR card ---------- */
.mst--payments .py-qr {
  left: 21.6em; top: .4em; width: 14.4em; height: 17.6em;
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
  animation: payments-card 8s var(--ease-out) infinite;
}
.mst--payments .py-qr__head { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .75em .85em .55em; }
.mst--payments .py-qr__brand { display: flex; align-items: center; gap: .45em; }
.mst--payments .py-qr__brand .py-m__ico { font-size: .95em; }
.mst--payments .py-qr__brand > span:last-child { display: grid; gap: .08em; }
.mst--payments .py-qr__brand b { font-size: .72em; font-weight: 600; }
.mst--payments .py-qr__brand em { font-style: normal; font-size: .6em; color: var(--ink-40); }
.mst--payments .py-qr__amt { font-family: var(--font-display); font-weight: 500; font-size: .92em; letter-spacing: -.03em; }

.mst--payments .py-qr__code {
  position: relative; justify-self: center; align-self: center;
  width: 10.4em; height: 10.4em; padding: .55em; box-sizing: border-box;
  border-radius: .7em; border: 1px solid var(--mui-line); background: #fff;
  overflow: hidden;
}
.mst--payments .py-qr__svg { display: block; width: 100%; height: 100%; opacity: .16; animation: payments-qr 8s var(--ease-out) infinite; }
.mst--payments .py-qr__logo {
  position: absolute; left: 50%; top: 50%; width: 1.9em; height: 1.9em; margin: -.95em 0 0 -.95em;
  display: grid; place-items: center; border-radius: .4em;
  background: var(--ink); color: var(--accent); box-shadow: 0 0 0 .22em #fff;
  font-family: var(--font-display); font-weight: 600; font-size: .9em;
  opacity: .16; animation: payments-qr 8s var(--ease-out) infinite;
}
.mst--payments .py-qr__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2.6em;
  background: linear-gradient(to bottom, rgba(254,212,35,0), rgba(254,212,35,.38) 85%, var(--accent-deep) 100%);
  border-bottom: 1px solid var(--accent-deep);
  opacity: 0; transform: translateY(-2.6em);
  animation: payments-scan 8s linear infinite;
}
.mst--payments .py-qr__done { position: absolute; inset: 0; display: grid; place-items: center; animation: payments-done 8s var(--ease-out) infinite; }
.mst--payments .py-qr__done > * { grid-area: 1 / 1; }
.mst--payments .py-qr__done .mui-check { width: 3.6em; height: 3.6em; box-shadow: 0 0 0 .45em var(--accent), 0 .6em 1.4em -.4em rgba(31,157,99,.6); }
.mst--payments .py-ring {
  width: 3.6em; height: 3.6em; border-radius: 50%;
  border: .25em solid var(--accent); opacity: 0;
  animation: payments-ring 8s var(--ease-out) infinite;
}

.mst--payments .py-qr__foot { position: relative; display: grid; margin: .55em .7em .7em; }
.mst--payments .py-qr__foot > * { grid-area: 1 / 1; }
.mst--payments .py-wait, .mst--payments .py-ok, .mst--payments .py-idle {
  display: flex; align-items: center; gap: .5em;
  height: 2.6em; padding: 0 .65em; border-radius: .6em; box-sizing: border-box;
}
.mst--payments .py-wait { background: var(--mui-soft); opacity: 0; animation: payments-wait 8s var(--ease-out) infinite; }
.mst--payments .py-spin {
  width: 1em; height: 1em; border-radius: 50%; flex: none;
  border: .16em solid #dfe3e9; border-top-color: var(--ink);
  animation: payments-spin 8s linear infinite;
}
.mst--payments .py-wait__t { font-size: .64em; font-weight: 600; flex: 1; }
.mst--payments .py-wait__time { font-family: var(--font-mono); font-size: .54em; color: var(--ink-40); }
.mst--payments .py-ok { background: var(--ok-soft); animation: payments-ok 8s var(--ease-out) infinite; }
.mst--payments .py-ok > span:first-child { display: grid; gap: .08em; flex: 1; }
.mst--payments .py-ok b { font-size: .66em; font-weight: 600; color: #146c43; }
.mst--payments .py-ok em { font-style: normal; font-size: .58em; color: #3f8a64; }
.mst--payments .py-ok__amt { font-family: var(--font-display); font-weight: 500; font-size: .86em; letter-spacing: -.03em; color: #146c43; }

/* ---------- receipt toast ---------- */
.mst--payments .py-receipt {
  left: 22.8em; top: 18.7em; width: 13em;
  display: flex; align-items: center; gap: .55em; padding: .5em .7em;
  animation: payments-toast 8s var(--ease-out) infinite;
}
.mst--payments .py-receipt__ico {
  width: 1.9em; height: 1.9em; border-radius: .5em; flex: none;
  display: grid; place-items: center; background: var(--info-soft); color: var(--info);
}
.mst--payments .py-receipt__ico svg { width: 62%; height: 62%; }
.mst--payments .py-receipt__t { display: grid; gap: .06em; }
.mst--payments .py-receipt__t b { font-size: .66em; font-weight: 600; }
.mst--payments .py-receipt__t em { font-style: normal; font-size: .6em; color: var(--ink-40); }


/* idle footer (loop start) */
.mst--payments .py-idle {
  border: 1px dashed #dde1e8; color: var(--ink-40); font-size: .64em; font-weight: 500;
  height: 4.06em; gap: .6em; padding: 0 1em; border-radius: .94em;
  opacity: 0; animation: payments-idle 8s var(--ease-out) infinite;
}
.mst--payments .py-idle__dot { width: .7em; height: .7em; border-radius: 50%; background: #d3d8e0; flex: none; }

/* pay button turns into a quiet "Paid" state after success */
.mst--payments .py-pay__done {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .45em;
  border-radius: .52em; border: 1px solid #cfe9dc; background: var(--ok-soft); color: #146c43;
  font-size: .74em; font-weight: 600;
  animation: payments-paid 8s var(--ease-out) infinite;
}
.mst--payments .py-pay__done svg { width: 1.1em; height: 1.1em; }

/* ---------- cursor (hidden in the static frame) ---------- */
.mst--payments .py-cursor { left: 12.2em; top: 19em; opacity: 0; animation: payments-cursor 8s var(--ease-io) infinite; }

/* ---------- the loop ---------- */
@keyframes payments-cursor {
  0%, 2%    { opacity: 0; transform: translate(6em, 3em); }
  5%        { opacity: 1; transform: translate(6em, 3em); }
  12%       { opacity: 1; transform: translate(0, 0) scale(1); }
  14%       { transform: translate(0, 0) scale(.82); }
  16%       { opacity: 1; transform: translate(0, 0) scale(1); }
  24%, 100% { opacity: 0; transform: translate(-2em, 2.5em); }
}
@keyframes payments-btn {
  0%, 13%   { transform: none; filter: none; }
  14.5%     { transform: scale(.96); filter: brightness(.95); }
  18%, 100% { transform: none; filter: none; }
}
@keyframes payments-card {
  0%, 14%   { transform: none; }
  16%       { transform: scale(.985); }
  21%, 100% { transform: none; }
}
@keyframes payments-qr {
  0%, 14%   { opacity: .16; }
  21%, 50%  { opacity: 1; }
  55%, 100% { opacity: .16; }
}
@keyframes payments-scan {
  0%, 24%   { opacity: 0; transform: translateY(-2.6em); }
  25%       { opacity: 1; transform: translateY(-2.6em); }
  36%       { opacity: 1; transform: translateY(9.6em); }
  37%       { opacity: 0; transform: translateY(9.6em); }
  38%       { opacity: 0; transform: translateY(-2.6em); }
  39%       { opacity: 1; transform: translateY(-2.6em); }
  50%       { opacity: 1; transform: translateY(9.6em); }
  51%, 100% { opacity: 0; transform: translateY(9.6em); }
}
@keyframes payments-done {
  0%, 51%   { opacity: 0; transform: scale(.5); }
  55%       { opacity: 1; transform: scale(1.08); }
  58%, 91%  { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: scale(.9); }
}
@keyframes payments-ring {
  0%, 53%   { opacity: 0; transform: scale(1); }
  54%       { opacity: 1; transform: scale(1); }
  66%, 100% { opacity: 0; transform: scale(2.6); }
}
@keyframes payments-wait {
  0%, 22%   { opacity: 0; }
  26%, 51%  { opacity: 1; transform: none; }
  55%, 100% { opacity: 0; transform: translateY(-.5em); }
}
@keyframes payments-ok {
  0%, 52%   { opacity: 0; transform: translateY(.6em); }
  57%, 91%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-.3em); }
}
@keyframes payments-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(3600deg); }
}
@keyframes payments-toast {
  0%, 60%   { opacity: 0; transform: translateY(1em) scale(.96); }
  66%, 88%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(.5em); }
}
@keyframes payments-idle {
  0%, 13%   { opacity: 1; }
  17%, 93%  { opacity: 0; }
  98%, 100% { opacity: 1; }
}
@keyframes payments-paid {
  0%, 55%   { opacity: 0; transform: translateY(.3em); }
  59%, 91%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
@keyframes payments-status-wait {
  0%, 14%   { opacity: 0; }
  18%, 53%  { opacity: 1; }
  56%, 100% { opacity: 0; }
}
@keyframes payments-status-paid {
  0%, 55%   { opacity: 0; transform: scale(.9); }
  57%       { opacity: 1; transform: scale(1.18); }
  60%, 91%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
.mst--payments .py-status__wait { animation: payments-status-wait 8s var(--ease-out) infinite; }
.mst--payments .py-status__paid { animation: payments-status-paid 8s var(--ease-out) infinite; }

/* mobile: light zoom only, so the summary labels and the QR card both stay whole */
.mst--payments { --m-zoom: 1.06; --m-pan-x: -.15em; --m-pan-y: 0em; }

/* ---- QR ordering & POS ----------------------------------------
   Loop (9s): the Table 12 tent card is scanned, the menu loads on the
   phone, two Kaya toast sets and a Kopi C are added (cart badge bumps),
   "Place order" is tapped and flips to "Order placed", a kitchen ticket
   prints out and "Sent to kitchen" lands in brand yellow.
   Base styles = the printed, sent frame.                           */
.mst--qrorder { --sw: 34; --sh: 20; }

/* ---------- table tent card ---------- */
.mst--qrorder .qo-tent {
  position: absolute; left: .2em; top: 1.7em; width: 7.7em; height: 15.9em; z-index: 1;
  background: #fff; border: 1px solid var(--mui-line); border-radius: .8em;
  box-shadow: 0 .1em .3em rgba(18,20,23,.05), 0 1.2em 2.4em -.9em rgba(18,20,23,.3);
  overflow: hidden;
}
.mst--qrorder .qo-tent__top {
  height: 2em; display: grid; place-items: center;
  background: var(--ink); color: #fff;
}
.mst--qrorder .qo-tent__top span { font-family: var(--font-mono); font-size: .56em; letter-spacing: .14em; text-transform: uppercase; }
.mst--qrorder .qo-tent__body { display: grid; justify-items: center; padding-top: .8em; }
.mst--qrorder .qo-tent__lbl { font-size: .75em; font-weight: 600; color: var(--ink-60); }
.mst--qrorder .qo-tent__no { font-size: 2.4em; margin-top: .02em; }
.mst--qrorder .qo-qr { position: relative; width: 5.6em; height: 5.6em; margin-top: .85em; }
.mst--qrorder .qo-qr svg { display: block; width: 100%; height: 100%; }
.mst--qrorder .qo-qr__c {
  position: absolute; width: 1em; height: 1em;
  border: .18em solid var(--accent-deep); border-radius: .2em;
}
.mst--qrorder .qo-qr__c--tl { left: -.42em; top: -.42em; border-right: 0; border-bottom: 0; }
.mst--qrorder .qo-qr__c--tr { right: -.42em; top: -.42em; border-left: 0; border-bottom: 0; }
.mst--qrorder .qo-qr__c--bl { left: -.42em; bottom: -.42em; border-right: 0; border-top: 0; }
.mst--qrorder .qo-qr__c--br { right: -.42em; bottom: -.42em; border-left: 0; border-top: 0; }
.mst--qrorder .qo-qr__beam {
  position: absolute; left: -.25em; right: -.25em; top: 0; height: .2em; border-radius: 99em;
  background: var(--accent);
  box-shadow: 0 0 .5em .1em rgba(254,212,35,.8), 0 -1.4em 1.4em -.6em rgba(254,212,35,.45);
  opacity: 0;
  animation: qrorder-beam 9s var(--ease-io) infinite;
}
.mst--qrorder .qo-tent__pay { margin-top: 1em; font-size: .7em; font-weight: 600; color: var(--ink-60); }
.mst--qrorder .qo-tent__shadow {
  position: absolute; left: .9em; top: 17.3em; width: 6.4em; height: 1.1em; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18,20,23,.16), transparent);
}

/* ---------- phone ---------- */
.mst--qrorder .qo-phone {
  position: absolute; left: 8.6em; top: .2em; width: 12.2em; height: 19.6em; z-index: 2;
  padding: .3em; border-radius: 1.9em;
  background: linear-gradient(160deg, #2a2d33, #121417);
  box-shadow: 0 .2em .5em rgba(18,20,23,.12), 0 1.8em 3.2em -1.2em rgba(18,20,23,.45);
}
.mst--qrorder .qo-scr {
  position: relative; height: 100%; border-radius: 1.6em; overflow: hidden; background: #fff;
}
.mst--qrorder .qo-stat {
  display: flex; align-items: center; justify-content: space-between;
  height: 1.6em; padding: 0 1em; color: var(--ink);
}
.mst--qrorder .qo-stat span:first-child { font-family: var(--font-mono); font-size: .5em; font-weight: 500; }
.mst--qrorder .qo-stat > i { width: 2.8em; height: .78em; border-radius: 99em; background: #121417; }
.mst--qrorder .qo-stat__r { display: flex; align-items: flex-end; gap: .1em; height: .5em; }
.mst--qrorder .qo-stat__r b { width: .13em; background: var(--ink); border-radius: .05em; }
.mst--qrorder .qo-stat__r b:nth-child(1) { height: 40%; }
.mst--qrorder .qo-stat__r b:nth-child(2) { height: 70%; }
.mst--qrorder .qo-stat__r b:nth-child(3) { height: 100%; }

.mst--qrorder .qo-menu {
  position: absolute; left: 0; right: 0; top: 1.6em; bottom: 0;
  padding: .35em .7em .7em;
  display: flex; flex-direction: column;
  animation: qrorder-menu 9s var(--ease-out) infinite;
}
.mst--qrorder .qo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45em; }
.mst--qrorder .qo-head > span:first-child { display: grid; gap: .15em; }
.mst--qrorder .qo-head__lbl { font-family: var(--font-mono); font-size: .56em; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); }
.mst--qrorder .qo-head__h { font-family: var(--font-display); font-size: 1.15em; font-weight: 500; letter-spacing: -.03em; }
.mst--qrorder .qo-cart {
  position: relative; width: 2em; height: 2em; border-radius: .6em;
  display: grid; place-items: center; background: var(--mui-soft); color: var(--ink);
}
.mst--qrorder .qo-cart svg { width: 1.1em; height: 1.1em; }
.mst--qrorder .qo-badge {
  position: absolute; right: -.45em; top: -.45em;
  width: 1.25em; height: 1.25em; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 .15em #fff;
  animation: qrorder-badge 9s var(--ease-out) infinite;
}
.mst--qrorder .qo-badge .qo-v { font-size: .72em; font-weight: 700; }

/* stacked values that swap as items are added */
.mst--qrorder .qo-v { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.mst--qrorder .qo-v--1 { animation: qrorder-v1 9s var(--ease-out) infinite; }
.mst--qrorder .qo-v--2 { animation: qrorder-v2 9s var(--ease-out) infinite; }
.mst--qrorder .qo-k2 { opacity: 1; animation: qrorder-k2 9s var(--ease-out) infinite; }
.mst--qrorder .qo-v--3 { opacity: 1; animation: qrorder-v3 9s var(--ease-out) infinite; }

.mst--qrorder .qo-item {
  position: relative; display: flex; align-items: center; gap: .5em;
  height: 3.25em; border-bottom: 1px solid #eef0f4;
}
.mst--qrorder .qo-thumb {
  position: relative; flex: none; width: 2.2em; height: 2.2em; border-radius: .6em; overflow: hidden;
}
.mst--qrorder .qo-thumb i { position: absolute; }
.mst--qrorder .qo-thumb--kaya { background: linear-gradient(145deg, #fbe9c6, #f1cf8f); }
.mst--qrorder .qo-thumb--kaya i {
  left: .45em; top: .55em; width: 1.6em; height: 1.35em; border-radius: .25em .25em .2em .2em;
  background: linear-gradient(180deg, #d9953f 0 .2em, #f6dfae .2em 45%, #8fb35a 45% 60%, #f6dfae 60%);
  box-shadow: 0 .1em .2em rgba(120,70,10,.25);
}
.mst--qrorder .qo-thumb--kopi { background: linear-gradient(145deg, #efe4d6, #d9c3a6); }
.mst--qrorder .qo-thumb--kopi i {
  left: .6em; top: .6em; width: 1.3em; height: 1.3em; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #c79a6c 0 25%, #7a4b27 45%, #4a2a14 70%);
  box-shadow: 0 0 0 .18em #fff, 0 .15em .3em .1em rgba(60,30,10,.25);
}
.mst--qrorder .qo-thumb--laksa { background: linear-gradient(145deg, #fde0c4, #f4a86c); }
.mst--qrorder .qo-thumb--laksa i {
  left: .4em; top: .4em; width: 1.7em; height: 1.7em; border-radius: 50%;
  background: radial-gradient(circle at 38% 42%, #fff4dc 0 12%, transparent 13%),
              radial-gradient(circle at 62% 60%, #e8743a 0 10%, transparent 11%),
              radial-gradient(circle, #f08a3c 0 55%, #d9602a 70%);
  box-shadow: 0 0 0 .16em #fff;
}
.mst--qrorder .qo-item__txt { display: grid; gap: .12em; min-width: 0; flex: 1; padding-right: 1.8em; }
.mst--qrorder .qo-item__txt b { font-size: .85em; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.mst--qrorder .qo-item__txt span { font-size: .8em; font-weight: 500; color: var(--ink-60); }

.mst--qrorder .qo-add {
  position: absolute; right: 0; top: 50%; margin-top: -.8em;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--mui-line); background: #fff;
  font-size: 1em; font-weight: 500; line-height: 1; color: var(--ink);
  opacity: 0;
}
.mst--qrorder .qo-item--kaya .qo-add { animation: qrorder-add-a 9s var(--ease-out) infinite; }
.mst--qrorder .qo-item--kopi .qo-add { animation: qrorder-add-b 9s var(--ease-out) infinite; }
.mst--qrorder .qo-step {
  position: absolute; right: 0; top: 50%; margin-top: -.8em;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--ink); color: #fff;
  box-shadow: 0 0 0 .2em var(--accent-soft);
}
.mst--qrorder .qo-step__n { position: absolute; inset: 0; font-size: .8em; font-weight: 700; }
.mst--qrorder .qo-item--kaya .qo-step { animation: qrorder-step-a 9s var(--ease-out) infinite; }
.mst--qrorder .qo-item--kopi .qo-step { animation: qrorder-step-b 9s var(--ease-out) infinite; }
.mst--qrorder .qo-item--kopi .qo-step__n .qo-v--3 { animation: none; opacity: 1; }

.mst--qrorder .qo-sum {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-bottom: .5em;
}
.mst--qrorder .qo-sum__lbl { font-size: .75em; font-weight: 600; color: var(--ink-60); }
.mst--qrorder .qo-sum__amt { position: relative; width: 4.6em; height: 1.3em; }
.mst--qrorder .qo-sum__amt .qo-v { place-items: center end; font-family: var(--font-display); font-size: 1em; font-weight: 500; letter-spacing: -.02em; }

/* CTA: base = placed (ink + check); keyframes run grey -> yellow -> tap -> ink */
.mst--qrorder .qo-cta {
  position: relative; height: 2.3em; border-radius: 99em;
  background: var(--ink); color: #fff;
  box-shadow: 0 .5em 1em -.5em rgba(18,20,23,.5);
  animation: qrorder-cta 9s var(--ease-out) infinite;
}
.mst--qrorder .qo-cta__a, .mst--qrorder .qo-cta__b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .4em;
}
.mst--qrorder .qo-cta__a { opacity: 0; animation: qrorder-cta-a 9s var(--ease-out) infinite; }
.mst--qrorder .qo-cta__b { animation: qrorder-cta-b 9s var(--ease-out) infinite; }
.mst--qrorder .qo-cta__a span, .mst--qrorder .qo-cta__b span { font-size: .8em; font-weight: 600; }
.mst--qrorder .qo-cta svg { width: .95em; height: .95em; }
.mst--qrorder .qo-cta__b svg { color: var(--accent); }

/* loading skeleton (only visible in the loop) */
.mst--qrorder .qo-load {
  position: absolute; left: .7em; right: .7em; top: 2em; bottom: .7em;
  display: flex; flex-direction: column; gap: .75em; opacity: 0;
  animation: qrorder-load 9s var(--ease-out) infinite;
}
.mst--qrorder .qo-load__h { width: 55%; height: 1.1em; margin: .3em 0 .35em; background: #e4e8ee; }
.mst--qrorder .qo-load__row { display: flex; align-items: center; gap: .55em; height: 2.5em; }
.mst--qrorder .qo-load__th { flex: none; width: 2.2em; height: 2.2em; border-radius: .6em; background: #eceff3; }
.mst--qrorder .qo-load__row > span { flex: 1; display: grid; gap: .45em; }
.mst--qrorder .qo-load__row .mui-skel { height: .6em; background: #e4e8ee; }
.mst--qrorder .qo-load__row .mui-skel:first-child { width: 80%; }
.mst--qrorder .qo-load__row .mui-skel:last-child { width: 42%; background: #eceff3; }
.mst--qrorder .qo-load__btn { margin-top: auto; height: 2.3em; border-radius: 99em; background: #eceff3; }

/* ---------- kitchen printer + ticket ---------- */
.mst--qrorder .qo-printer {
  position: absolute; left: 21.2em; top: .4em; width: 12.6em; height: 2.4em; z-index: 3;
  display: flex; align-items: center; gap: .55em; padding: 0 .9em .3em;
  border-radius: .75em .75em .5em .5em;
  background: linear-gradient(180deg, #2a2d33, #16181c);
  box-shadow: 0 .8em 1.6em -.8em rgba(18,20,23,.5);
}
.mst--qrorder .qo-printer__dot {
  width: .5em; height: .5em; border-radius: 50%; background: #3ddc84;
  box-shadow: 0 0 0 .22em rgba(61,220,132,.2);
}
.mst--qrorder .qo-printer__txt { font-size: .75em; font-weight: 600; color: #fff; }
.mst--qrorder .qo-printer__slot {
  position: absolute; left: .7em; right: .7em; bottom: .3em; height: .22em; border-radius: 99em;
  background: #000; box-shadow: 0 .06em 0 rgba(255,255,255,.12);
}
.mst--qrorder .qo-clip {
  position: absolute; left: 21.4em; top: 2.55em; width: 12.2em; height: 13.4em; z-index: 2;
  padding: 0 .5em 1.2em; overflow: hidden;
}
.mst--qrorder .qo-ticket {
  position: relative; padding: .9em .9em 1.25em;
  background: #fff;
  filter: drop-shadow(0 .5em .8em rgba(18,20,23,.16));
  --zz: radial-gradient(circle at 50% 100%, transparent .32em, #000 .34em) 0 100% / .8em .6em repeat-x;
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - .55em) no-repeat, var(--zz);
  mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - .55em) no-repeat, var(--zz);
  animation: qrorder-print 9s cubic-bezier(.4,0,.3,1) infinite;
}
.mst--qrorder .qo-tk__top { display: flex; align-items: baseline; justify-content: space-between; }
.mst--qrorder .qo-tk__no { font-size: 1.55em; }
.mst--qrorder .qo-tk__time { font-family: var(--font-mono); font-size: .7em; color: var(--ink-60); }
.mst--qrorder .qo-tk__sub { margin-top: .3em; font-size: .78em; font-weight: 600; color: var(--ink-60); }
.mst--qrorder .qo-tk__rule { margin: .65em 0; border-top: 1px dashed #cfd5de; }
.mst--qrorder .qo-tk__line { display: flex; align-items: baseline; gap: .5em; }
.mst--qrorder .qo-tk__line + .qo-tk__line { margin-top: .4em; }
.mst--qrorder .qo-tk__line b { font-family: var(--font-mono); font-size: .88em; font-weight: 500; color: var(--ink-60); }
.mst--qrorder .qo-tk__line > span { font-size: .95em; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.mst--qrorder .qo-tk__foot { display: flex; align-items: center; justify-content: space-between; }
.mst--qrorder .qo-tk__foot .mui-pill { font-size: .7em; }
.mst--qrorder .qo-tk__foot b { font-family: var(--font-display); font-size: 1.05em; font-weight: 500; letter-spacing: -.02em; }

/* the climax: sent to kitchen */
.mst--qrorder .qo-sent {
  left: 21.3em; top: 15.3em; width: 12.4em; z-index: 4;
  display: flex; align-items: center; gap: .55em; padding: .6em .7em;
  background: var(--accent); border-color: rgba(0,0,0,.05);
  box-shadow: 0 .1em .3em rgba(18,20,23,.06), 0 1em 2em -.8em rgba(160,120,0,.55);
  animation: qrorder-sent 9s var(--ease-out) infinite;
}
.mst--qrorder .qo-sent > span:last-child { display: grid; gap: .1em; }
.mst--qrorder .qo-sent .mui-h { font-size: 1.08em; letter-spacing: -.02em; color: var(--accent-ink); white-space: nowrap; }
.mst--qrorder .qo-sent .mui-t { font-size: .75em; font-weight: 500; color: rgba(18,20,23,.7); white-space: nowrap; }
.mst--qrorder .qo-sent__ico {
  flex: none; width: 1.9em; height: 1.9em; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--accent);
}
.mst--qrorder .qo-sent__ico svg { width: 55%; height: 55%; }

/* cursor: hotspot just below-right of the Kaya qty chip; hidden in the static frame */
.mst--qrorder .qo-cursor { left: 19.1em; top: 7.15em; opacity: 0; animation: qrorder-cursor 9s var(--ease-io) infinite; }

@keyframes qrorder-beam {
  0%, 3%    { opacity: 0; transform: translateY(0); }
  5%        { opacity: 1; transform: translateY(0); }
  12%       { opacity: 1; transform: translateY(5.4em); }
  14%, 100% { opacity: 0; transform: translateY(5.4em); }
}
@keyframes qrorder-menu {
  0%, 14%   { opacity: 0; transform: translateY(.6em); }
  19%, 88%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}
@keyframes qrorder-load {
  0%, 2%    { opacity: 0; }
  5%, 14%   { opacity: 1; }
  18%, 100% { opacity: 0; }
}
@keyframes qrorder-cursor {
  0%, 15%   { opacity: 0; transform: translate(2.5em, 6em); }
  18%       { opacity: 1; transform: translate(1.5em, 3.5em); }
  21.5%     { opacity: 1; transform: translate(0, 0) scale(1); }
  22.5%     { transform: translate(0, 0) scale(.82); }
  24%       { transform: translate(0, 0) scale(1); }
  29.5%     { transform: translate(0, 0) scale(1); }
  30.5%     { transform: translate(0, 0) scale(.82); }
  32%       { transform: translate(0, 0) scale(1); }
  37.5%     { transform: translate(0, 3.25em) scale(1); }
  38.5%     { transform: translate(0, 3.25em) scale(.82); }
  40%       { transform: translate(0, 3.25em) scale(1); }
  47.5%     { opacity: 1; transform: translate(-4.3em, 10.6em) scale(1); }
  48.5%     { transform: translate(-4.3em, 10.6em) scale(.82); }
  50%       { opacity: 1; transform: translate(-4.3em, 10.6em) scale(1); }
  58%, 100% { opacity: 0; transform: translate(-2em, 13em); }
}
@keyframes qrorder-add-a {
  0%, 21.5% { opacity: 1; transform: none; }
  23%, 100% { opacity: 0; transform: scale(.7); }
}
@keyframes qrorder-add-b {
  0%, 37.5% { opacity: 1; transform: none; }
  39%, 100% { opacity: 0; transform: scale(.7); }
}
@keyframes qrorder-step-a {
  0%, 21.5% { opacity: 0; transform: scale(.5); }
  23.5%     { opacity: 1; transform: scale(1.12); }
  25%, 100% { opacity: 1; transform: none; }
}
@keyframes qrorder-step-b {
  0%, 37.5% { opacity: 0; transform: scale(.5); }
  39.5%     { opacity: 1; transform: scale(1.12); }
  41%, 100% { opacity: 1; transform: none; }
}
@keyframes qrorder-v1 {
  0%, 21.5%   { opacity: 0; transform: translateY(.5em); }
  23%, 29.5%  { opacity: 1; transform: none; }
  31%, 100%   { opacity: 0; transform: translateY(-.5em); }
}
@keyframes qrorder-v2 {
  0%, 29.5%   { opacity: 0; transform: translateY(.5em); }
  31%, 37.5%  { opacity: 1; transform: none; }
  39%, 100%   { opacity: 0; transform: translateY(-.5em); }
}
@keyframes qrorder-k2 {
  0%, 29.5%   { opacity: 0; transform: translateY(.5em); }
  31%, 100%   { opacity: 1; transform: none; }
}
@keyframes qrorder-v3 {
  0%, 37.5%   { opacity: 0; transform: translateY(.5em); }
  39%, 100%   { opacity: 1; transform: none; }
}
@keyframes qrorder-badge {
  0%, 21.5%  { transform: scale(0); }
  23.5%      { transform: scale(1.3); }
  26%, 29.5% { transform: scale(1); }
  31.5%      { transform: scale(1.3); }
  34%, 37.5% { transform: scale(1); }
  39.5%      { transform: scale(1.3); }
  42%, 100%  { transform: scale(1); }
}
@keyframes qrorder-cta {
  0%, 21.5%  { background: #eef0f4; color: var(--ink-40); box-shadow: 0 0 0 0 rgba(254,212,35,0); transform: none; }
  24%, 47.5% { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 0 rgba(254,212,35,0); transform: none; }
  48.5%      { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 0 rgba(254,212,35,.75); transform: scale(.95); }
  50%        { background: var(--accent); color: var(--accent-ink); transform: none; }
  51%        { background: var(--ink); color: #fff; }
  56%        { box-shadow: 0 0 0 1.1em rgba(254,212,35,0); }
  60%, 100%  { background: var(--ink); color: #fff; box-shadow: 0 0 0 0 rgba(254,212,35,0); transform: none; }
}
@keyframes qrorder-cta-a {
  0%, 50%    { opacity: 1; transform: none; }
  51%, 100%  { opacity: 0; transform: translateY(-.4em); }
}
@keyframes qrorder-cta-b {
  0%, 50.3%  { opacity: 0; transform: translateY(.4em); }
  52.5%, 100%  { opacity: 1; transform: none; }
}
@keyframes qrorder-print {
  0%, 51%   { opacity: 1; transform: translateY(-104%); }
  55%       { transform: translateY(-70%); }
  57%       { transform: translateY(-62%); }
  61%       { transform: translateY(-20%); }
  64%, 88%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}
@keyframes qrorder-sent {
  0%, 63%   { opacity: 0; transform: translateY(1em) scale(.94); }
  67%       { opacity: 1; transform: scale(1.03); }
  70%, 87%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(.5em); }
}

/* mobile: crop in on phone + ticket, where the story lands; the tent steps out */
.mst--qrorder { --m-zoom: 1.35; --m-pan-x: -7.6em; --m-pan-y: 0em; }
@media (max-width: 699px) {
  .mst--qrorder .qo-tent, .mst--qrorder .qo-tent__shadow { visibility: hidden; }
}

/* ---- Membership & loyalty -----------------------------------
   Loop (8s): a QR payment receipt lands, "+240 pts" rises onto the
   Gold card, the balance rolls 1,240 -> 1,480, the Platinum bar
   advances, then stamp 7 fills in brand yellow. Base = finished. */
.mst--loyalty { --sw: 34; --sh: 20; }

/* ---------- the dark membership card ---------- */
.mst--loyalty .ly-card {
  position: absolute; left: .3em; top: .5em; width: 19.8em; height: 12.6em;
  border-radius: 1em; overflow: hidden; color: #fff;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(254,212,35,.22), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(255,255,255,.06), transparent 70%),
    linear-gradient(145deg, #25282e 0%, #15171b 55%, #0d0e11 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 .2em .5em rgba(18,20,23,.12), 0 1.6em 3em -1em rgba(18,20,23,.45);
  padding: 1em 1.15em;
}
.mst--loyalty .ly-card__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mst--loyalty .ly-card__top { position: relative; display: flex; align-items: center; gap: .5em; }
.mst--loyalty .ly-mark {
  width: 1.7em; height: 1.7em; border-radius: .45em; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
}
.mst--loyalty .ly-mark svg { width: 64%; height: 64%; }
.mst--loyalty .ly-brand { font-size: .74em; font-weight: 600; letter-spacing: .01em; color: rgba(255,255,255,.88); }
.mst--loyalty .ly-tier {
  margin-left: auto; padding: .3em .7em; border-radius: 99em;
  font-family: var(--font-mono); font-size: .58em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-ink);
  background: linear-gradient(120deg, #ffe680, var(--accent) 45%, var(--accent-deep));
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
}

.mst--loyalty .ly-bal { position: relative; margin-top: 1.05em; display: grid; gap: .35em; }
.mst--loyalty .ly-lbl { font-family: var(--font-mono); font-size: .54em; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.mst--loyalty .ly-num {
  position: relative; display: block; height: 1em; overflow: hidden;
  font-family: var(--font-display); font-weight: 500; font-size: 2.7em; letter-spacing: -.04em; line-height: 1;
}
.mst--loyalty .ly-num > span { position: absolute; left: 0; top: 0; }
.mst--loyalty .ly-num__old { opacity: 0; transform: translateY(-100%); }

.mst--loyalty .ly-prog { position: relative; margin-top: .95em; display: grid; gap: .45em; }
.mst--loyalty .ly-prog__row { display: flex; justify-content: space-between; font-size: .68em; color: rgba(255,255,255,.55); }
.mst--loyalty .ly-prog__row b { font-weight: 600; color: #fff; }
.mst--loyalty .ly-to { position: relative; display: inline-block; width: 1.9em; height: 1.2em; vertical-align: bottom; overflow: hidden; text-align: right; }
.mst--loyalty .ly-to i { position: absolute; right: 0; top: 0; font-style: normal; }
.mst--loyalty .ly-to__old { opacity: 0; transform: translateY(-100%); }
.mst--loyalty .ly-prog__bar { height: .42em; border-radius: 99em; background: rgba(255,255,255,.12); overflow: hidden; }
.mst--loyalty .ly-prog__bar b {
  display: block; height: 100%; width: 74%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  box-shadow: 0 0 .8em rgba(254,212,35,.55);
  transform-origin: left center;
}
.mst--loyalty .ly-card__foot {
  position: absolute; left: 1.15em; right: 1.15em; bottom: .95em;
  display: flex; justify-content: space-between; align-items: baseline;
}
.mst--loyalty .ly-name { font-size: .74em; font-weight: 600; letter-spacing: .01em; }
.mst--loyalty .ly-no { font-family: var(--font-mono); font-size: .64em; letter-spacing: .1em; color: rgba(255,255,255,.5); }

/* ---------- receipt ---------- */
.mst--loyalty .ly-rcpt {
  left: .3em; top: 14.7em; width: 19.8em;
  display: flex; align-items: center; gap: .7em; padding: .8em .9em;
}
.mst--loyalty .ly-rcpt__ico {
  width: 2.1em; height: 2.1em; border-radius: .6em; flex: none;
  display: grid; place-items: center; background: var(--ok-soft); color: var(--ok);
}
.mst--loyalty .ly-rcpt__ico svg { width: 55%; height: 55%; }
.mst--loyalty .ly-rcpt__txt { display: grid; gap: .15em; flex: 1; }
.mst--loyalty .ly-rcpt__earn {
  font-family: var(--font-display); font-weight: 500; font-size: .95em; letter-spacing: -.02em;
  color: var(--accent-text);
}
.mst--loyalty .ly-rcpt__earn::after { content: ' pts'; font-family: var(--font-body); font-size: .7em; font-weight: 600; letter-spacing: 0; }

/* the points pop — rests next to the balance */
.mst--loyalty .ly-pop {
  position: absolute; left: 13.9em; top: 8.3em; z-index: 5;
  padding: .32em .7em; border-radius: 99em;
  font-size: .68em; font-weight: 700; white-space: nowrap;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 .3em .9em -.2em rgba(254,212,35,.7), 0 0 0 .25em rgba(254,212,35,.18);
}

/* ---------- stamp card ---------- */
.mst--loyalty .ly-stamps {
  left: 21.2em; top: .5em; width: 12.5em; height: 18.3em;
  padding: 1em 1em .95em; display: flex; flex-direction: column;
}
.mst--loyalty .ly-stamps__head { display: grid; gap: .3em; }
.mst--loyalty .ly-stamps__head .mui-h { font-size: .8em; }
.mst--loyalty .ly-grid {
  margin-top: .8em;
  display: grid; grid-template-columns: repeat(4, 2.35em); justify-content: space-between; row-gap: .6em;
}
.mst--loyalty .ly-st {
  position: relative; width: 2.35em; height: 2.35em; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px dashed #cfd5de; color: var(--ink-40);
}
.mst--loyalty .ly-st svg { width: 58%; height: 58%; }
.mst--loyalty .ly-st--on { border: 0; background: var(--ink); color: var(--accent); }
.mst--loyalty .ly-st--new { border-color: transparent; }
.mst--loyalty .ly-st__fill {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 .3em .8em -.2em rgba(235,186,52,.8);
}
.mst--loyalty .ly-st__ring {
  position: absolute; inset: -.35em; border-radius: 50%;
  border: 1px solid var(--accent-deep); opacity: .7;
}
.mst--loyalty .ly-st__ok {
  position: absolute; right: -.3em; top: -.3em; width: 1.05em; height: 1.05em; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--accent);
  box-shadow: 0 0 0 .14em #fff;
}
.mst--loyalty .ly-st__ok svg { width: 78%; height: 78%; }

.mst--loyalty .ly-count { margin-top: .75em; display: flex; justify-content: space-between; align-items: baseline; }
.mst--loyalty .ly-count__n { font-size: .74em; font-weight: 600; }
.mst--loyalty .ly-dig { position: relative; display: inline-block; width: .65em; height: 1.2em; vertical-align: bottom; overflow: hidden; }
.mst--loyalty .ly-dig b { position: absolute; left: 0; top: 0; font-weight: 700; }
.mst--loyalty .ly-count__old { opacity: 0; }
.mst--loyalty .ly-sbar { margin-top: .5em; height: .42em; border-radius: 99em; background: #eef0f4; overflow: hidden; }
.mst--loyalty .ly-sbar b { display: block; width: 87.5%; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left center; }
.mst--loyalty .ly-next { margin-top: .65em; display: flex; align-items: center; gap: .45em; }
.mst--loyalty .ly-next .mui-t { font-size: .64em; }
.mst--loyalty .ly-next__dot { width: .5em; height: .5em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .2em var(--accent-soft); }

.mst--loyalty .ly-price {
  margin-top: auto; padding-top: .8em; border-top: 1px solid #eef0f4;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.mst--loyalty .ly-price__txt { display: grid; gap: .4em; }
.mst--loyalty .ly-price__row { display: flex; align-items: baseline; gap: .4em; }
.mst--loyalty .ly-price__num { font-size: 1.35em; }
.mst--loyalty .ly-price s { font-size: .72em; color: var(--ink-40); }

/* ---------- motion (8s) ---------- */
.mst--loyalty .ly-rcpt      { animation: loyalty-rcpt 8s var(--ease-out) infinite; }
.mst--loyalty .ly-pop       { animation: loyalty-pop 8s var(--ease-io) infinite; }
.mst--loyalty .ly-num__old  { animation: loyalty-old 8s var(--ease-out) infinite; }
.mst--loyalty .ly-num__new  { animation: loyalty-new 8s var(--ease-out) infinite; }
.mst--loyalty .ly-to__old   { animation: loyalty-old 8s var(--ease-out) infinite; }
.mst--loyalty .ly-to__new   { animation: loyalty-new 8s var(--ease-out) infinite; }
.mst--loyalty .ly-prog__bar b { animation: loyalty-bar 8s var(--ease-out) infinite; }
.mst--loyalty .ly-st__fill  { animation: loyalty-stamp 8s var(--ease-out) infinite; }
.mst--loyalty .ly-st--new   { animation: loyalty-slot 8s var(--ease-out) infinite; }
.mst--loyalty .ly-st__ring  { animation: loyalty-ring 8s var(--ease-out) infinite; }
.mst--loyalty .ly-count__old { animation: loyalty-cold 8s var(--ease-out) infinite; }
.mst--loyalty .ly-count__new { animation: loyalty-cnew 8s var(--ease-out) infinite; }
.mst--loyalty .ly-sbar b    { animation: loyalty-sbar 8s var(--ease-out) infinite; }

@keyframes loyalty-rcpt {
  0%, 6%    { opacity: 0; transform: translateY(1.2em) scale(.97); }
  14%, 86%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(.5em); }
}
@keyframes loyalty-pop {
  0%, 17%   { opacity: 0; transform: translate(10.4em, 14.2em) scale(.7); }
  21%       { opacity: 1; transform: translate(10.4em, 14.2em) scale(1.05); }
  27%       { opacity: 1; transform: translate(10.2em, 1.4em) scale(1.08); }
  34%       { opacity: 1; transform: translate(0, 0) scale(1.08); }
  38%, 86%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(-.4em); }
}
@keyframes loyalty-old {
  0%, 34%   { opacity: 1; transform: none; }
  40%, 88%  { opacity: 0; transform: translateY(-100%); }
  96%, 100% { opacity: 1; transform: none; }
}
@keyframes loyalty-new {
  0%, 34%   { opacity: 0; transform: translateY(100%); }
  40%, 88%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}
@keyframes loyalty-bar {
  0%, 36%   { transform: scaleX(.838); }
  46%, 88%  { transform: scaleX(1); }
  97%, 100% { transform: scaleX(.838); }
}
@keyframes loyalty-slot {
  0%, 44%   { border-color: #cfd5de; }
  48%, 88%  { border-color: transparent; }
  96%, 100% { border-color: #cfd5de; }
}
@keyframes loyalty-stamp {
  0%, 46%   { opacity: 0; transform: scale(.2) rotate(-25deg); }
  51%       { opacity: 1; transform: scale(1.14) rotate(4deg); }
  55%, 88%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: scale(.9); }
}
@keyframes loyalty-ring {
  0%, 48%   { opacity: 0; transform: scale(.6); }
  50%       { opacity: .9; transform: scale(.8); }
  62%       { opacity: 0; transform: scale(1.7); }
  63%, 74%  { opacity: 0; transform: scale(.9); }
  80%, 88%  { opacity: .7; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}
@keyframes loyalty-cold {
  0%, 48%   { opacity: 1; transform: none; }
  53%, 88%  { opacity: 0; transform: translateY(-.6em); }
  96%, 100% { opacity: 1; transform: none; }
}
@keyframes loyalty-cnew {
  0%, 48%   { opacity: 0; transform: translateY(.6em); }
  53%, 88%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; }
}

@keyframes loyalty-sbar {
  0%, 48%   { transform: scaleX(.857); }
  56%, 88%  { transform: scaleX(1); }
  97%, 100% { transform: scaleX(.857); }
}

/* mobile: crop onto the card + stamps */
.mst--loyalty { --m-zoom: 1.05; --m-pan-x: 0em; --m-pan-y: 0em; }

/* ---- AI assistant ----------------------------------------------
   Loop (9s): user question lands, typing dots pulse, the answer
   arrives with its stock card + sparkline drawing in, suggested
   actions appear, cursor clicks "Raise PO" (brand yellow) which
   confirms with a tick, rest, fade.
   Base styles = the answered frame with the yellow chip highlighted. */
.mst--ai { --sw: 29.6; --sh: 17.6; }

.mst--ai .ai-win { left: 0; top: 0; width: 29.6em; height: 17.6em; }

/* header (window chrome + assistant identity) */
.mst--ai .ai-head {
  display: flex; align-items: center; gap: .55em;
  height: 2.7em; padding: 0 .8em;
  border-bottom: 1px solid #eef0f4; background: #fbfcfd;
}
.mst--ai .ai-lights { display: flex; gap: .3em; margin-right: .25em; }
.mst--ai .ai-lights i { width: .48em; height: .48em; border-radius: 50%; background: #e1e4ea; }
.mst--ai .ai-spark {
  width: 1.65em; height: 1.65em; border-radius: .48em; flex: none;
  display: grid; place-items: center;
  background: var(--ink); color: var(--accent);
}
.mst--ai .ai-spark svg { width: 64%; height: 64%; }
.mst--ai .ai-who { display: grid; gap: .05em; }
.mst--ai .ai-who b { font-size: .78em; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.mst--ai .ai-who em { display: flex; align-items: center; gap: .4em; font-style: normal; font-size: .6em; color: var(--ink-60); }
.mst--ai .ai-who em i { width: .55em; height: .55em; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 .2em var(--ok-soft); }
.mst--ai .ai-src { margin-left: auto; display: flex; gap: .25em; }
.mst--ai .ai-src .mui-pill { font-size: .56em; font-weight: 500; color: var(--ink-60); border: 1px solid var(--mui-line); background: #fff; }

/* user bubble */
.mst--ai .ai-user {
  position: absolute; right: .8em; top: 3.3em;
  transform-origin: right bottom;
  animation: ai-user 9s var(--ease-out) infinite;
}
.mst--ai .ai-user span {
  display: block;
  padding: .5em .85em; border-radius: 1em 1em .3em 1em;
  background: var(--ink); color: #fff; line-height: 1.3;
  font-size: .84em; font-weight: 500; white-space: nowrap;
  box-shadow: 0 .3em .8em -.3em rgba(18,20,23,.35);
}

/* assistant avatar */
.mst--ai .ai-av {
  width: 1.55em; height: 1.55em; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep);
  border: 1px solid rgba(0,0,0,.05);
  transform: translateY(.1em);
}
.mst--ai .ai-av svg { width: 62%; height: 62%; }

/* shared assistant bubble look */
.mst--ai .ai-dots, .mst--ai .ai-bub {
  background: var(--mui-soft); border: 1px solid #e9ecf1;
  border-radius: 1em 1em 1em .3em;
}

/* typing indicator */
.mst--ai .ai-typing {
  position: absolute; left: .8em; top: 5.9em;
  display: flex; align-items: flex-end; gap: .45em;
  opacity: 0;
  animation: ai-typing 9s var(--ease-out) infinite;
}
.mst--ai .ai-dots { display: flex; align-items: center; gap: .35em; height: 2.2em; padding: 0 .95em; }
.mst--ai .ai-dots i { width: .55em; height: .55em; border-radius: 50%; background: var(--ink-60); opacity: .7; animation: ai-dot 9s linear infinite; }
.mst--ai .ai-dots i:nth-child(2) { animation-name: ai-dot2; }
.mst--ai .ai-dots i:nth-child(3) { animation-name: ai-dot3; }

/* reply */
.mst--ai .ai-reply {
  position: absolute; left: .8em; top: 5.9em;
  display: flex; align-items: flex-end; gap: .45em;
  animation: ai-reply 9s var(--ease-out) infinite;
}
.mst--ai .ai-bub {
  width: 24.2em;
  padding: .55em .7em .6em;
  display: grid; gap: .42em;
}
.mst--ai .ai-bub p { margin: 0; padding-left: .1em; font-size: .86em; line-height: 1.35; color: var(--ink-80); white-space: nowrap; }
.mst--ai .ai-bub p b { font-weight: 700; color: var(--ink); }
.mst--ai .ai-stat {
  display: flex; align-items: center; gap: .8em;
  background: #fff; border: 1px solid var(--mui-line); border-radius: .6em;
  padding: .35em .65em;
  box-shadow: 0 .1em .25em rgba(18,20,23,.04);
  animation: ai-stat 9s var(--ease-out) infinite;
}
.mst--ai .ai-spk { width: 9em; height: 1.75em; flex: none; overflow: visible; }
.mst--ai .ai-spk__area { fill: var(--bad-soft); opacity: .85; animation: ai-area 9s var(--ease-out) infinite; }
.mst--ai .ai-spk__line {
  fill: none; stroke: var(--bad); stroke-width: 1.6; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  animation: ai-line 9s var(--ease-out) infinite;
}
/* end dot as HTML so it stays round under the stretched viewBox */
.mst--ai .ai-stat { position: relative; }
.mst--ai .ai-stat::before {
  content: ""; position: absolute; left: calc(.65em + 9em - .3em); top: calc(.35em + 1.75em * 25 / 28 - .3em);
  width: .6em; height: .6em; border-radius: 50%;
  background: #fff; border: .14em solid var(--bad); box-sizing: border-box;
  box-shadow: 0 0 0 .28em rgba(229,72,77,.18);
  animation: ai-area 9s var(--ease-out) infinite;
}
.mst--ai .ai-kv { display: grid; gap: .15em; }
.mst--ai .ai-kv .mui-lbl { font-size: .54em; }
.mst--ai .ai-kv b { font-family: var(--font-display); font-weight: 500; font-size: .9em; letter-spacing: -.02em; }
.mst--ai .ai-stat .mui-pill { margin-left: auto; font-size: .62em; }

/* suggested actions */
.mst--ai .ai-acts {
  position: absolute; left: 2.8em; top: 12.35em;
  display: flex; align-items: center; gap: .45em;
  animation: ai-acts 9s var(--ease-out) infinite;
}
.mst--ai .ai-chip {
  position: relative;
  display: inline-grid; align-items: center;
  height: 2.1em; padding: 0 1em; border-radius: 99em;
  font-size: .78em; font-weight: 600; white-space: nowrap;
  background: #fff; border: 1px solid var(--mui-line); color: var(--ink);
}
.mst--ai .ai-chip--go {
  background: var(--accent); border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 0 0 .3em rgba(254,212,35,.35), 0 .5em 1.1em -.4em rgba(180,140,0,.55);
  animation: ai-go 9s var(--ease-out) infinite;
}
.mst--ai .ai-chip__a, .mst--ai .ai-chip__b { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .35em; justify-content: center; }
.mst--ai .ai-chip__b svg { width: 1.1em; height: 1.1em; }
.mst--ai .ai-chip__a { animation: ai-lblA 9s var(--ease-out) infinite; }
.mst--ai .ai-chip__b { opacity: 0; animation: ai-lblB 9s var(--ease-out) infinite; }

/* confirmation tick badge */
.mst--ai .ai-tick {
  position: absolute; right: -.45em; top: -.55em;
  width: 1.35em; height: 1.35em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ok); color: #fff; border: .14em solid #fff;
  box-shadow: 0 .2em .5em -.1em rgba(18,20,23,.3);
  opacity: 0; transform: scale(.4);
  animation: ai-tick 9s var(--ease-out) infinite;
}
.mst--ai .ai-tick svg { width: 72%; height: 72%; }

/* click ripple + cursor live inside the chip (hidden in the static frame);
   font-size resets the chip's .78em so they keep stage proportions */
.mst--ai .ai-ring {
  position: absolute; left: 76%; top: 55%; font-size: 1.28em;
  width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em;
  border-radius: 50%; border: .2em solid var(--accent);
  opacity: 0; pointer-events: none;
  animation: ai-ring 9s var(--ease-out) infinite;
}
.mst--ai .ai-cursor { left: 76%; top: 55%; font-size: 1.28em; margin: -.25em 0 0 -.35em; opacity: 0; animation: ai-cursor 9s var(--ease-io) infinite; }

/* composer */
.mst--ai .ai-comp {
  position: absolute; left: .8em; right: .8em; bottom: .8em;
  height: 2.2em; padding: 0 .3em 0 .9em;
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--mui-line); border-radius: 99em; background: #fff;
  box-shadow: 0 .1em .3em rgba(18,20,23,.04);
}
.mst--ai .ai-comp > span:first-child { font-size: .7em; color: var(--ink-40); }
.mst--ai .ai-send {
  width: 1.65em; height: 1.65em; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff;
}
.mst--ai .ai-send svg { width: 58%; height: 58%; }

/* ---- keyframes (9s) ------------------------------------------- */
@keyframes ai-user {
  0%, 4%    { opacity: 0; transform: translateY(.8em) scale(.96); }
  10%, 88%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-.3em); }
}
@keyframes ai-typing {
  0%, 12%   { opacity: 0; transform: translateY(.5em); }
  15%, 29%  { opacity: 1; transform: none; }
  32%, 100% { opacity: 0; transform: none; }
}
@keyframes ai-dot {
  0%, 15%, 19%, 23%, 27%, 31%, 100% { transform: none; opacity: .7; }
  17%, 21%, 25%, 29% { transform: translateY(-.3em); opacity: 1; }
}
@keyframes ai-dot2 {
  0%, 16%, 20%, 24%, 28%, 100% { transform: none; opacity: .7; }
  18%, 22%, 26%, 30% { transform: translateY(-.3em); opacity: 1; }
}
@keyframes ai-dot3 {
  0%, 17%, 21%, 25%, 29%, 100% { transform: none; opacity: .7; }
  19%, 23%, 27%, 31% { transform: translateY(-.3em); opacity: 1; }
}
@keyframes ai-reply {
  0%, 30%   { opacity: 0; transform: translateY(.8em) scale(.98); }
  36%, 88%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-.3em); }
}
@keyframes ai-stat {
  0%, 32%   { opacity: 0; transform: translateY(.3em); }
  37%, 100% { opacity: 1; transform: none; }
}
@keyframes ai-line {
  0%, 33%   { stroke-dashoffset: 100; }
  45%, 100% { stroke-dashoffset: 0; }
}
@keyframes ai-area {
  0%, 42%   { opacity: 0; }
  47%, 100% { opacity: 1; }
}
@keyframes ai-acts {
  0%, 44%   { opacity: 0; transform: translateY(.6em); }
  50%, 88%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-.3em); }
}
@keyframes ai-go {
  0%, 56%   { transform: none; box-shadow: 0 0 0 0 rgba(254,212,35,0), 0 .3em .8em -.4em rgba(180,140,0,.3); }
  60%       { transform: scale(1.03); box-shadow: 0 0 0 .3em rgba(254,212,35,.35), 0 .5em 1.1em -.4em rgba(180,140,0,.55); }
  62%       { transform: scale(.95); }
  67%       { transform: scale(1.06); box-shadow: 0 0 0 .4em rgba(254,212,35,.4), 0 .6em 1.3em -.4em rgba(180,140,0,.6); }
  74%, 100% { transform: none; box-shadow: 0 0 0 .3em rgba(254,212,35,.35), 0 .5em 1.1em -.4em rgba(180,140,0,.55); }
}
@keyframes ai-lblA {
  0%, 63%   { opacity: 1; transform: none; }
  67%, 100% { opacity: 0; transform: translateY(-.5em); }
}
@keyframes ai-lblB {
  0%, 64%   { opacity: 0; transform: translateY(.5em); }
  69%, 100% { opacity: 1; transform: none; }
}
@keyframes ai-tick {
  0%, 65%   { opacity: 0; transform: scale(.4); }
  69%       { opacity: 1; transform: scale(1.15); }
  72%, 100% { opacity: 1; transform: none; }
}
@keyframes ai-ring {
  0%, 61%   { opacity: 0; transform: scale(.3); }
  62%       { opacity: .9; transform: scale(.45); }
  74%, 100% { opacity: 0; transform: scale(2.6); }
}
@keyframes ai-cursor {
  0%, 46%   { opacity: 0; transform: translate(9em, 2.6em); }
  50%       { opacity: 1; transform: translate(9em, 2.6em); }
  60%       { opacity: 1; transform: translate(0, 0) scale(1); }
  62%       { transform: translate(0, 0) scale(.8); }
  64%       { transform: translate(0, 0) scale(1); }
  67%       { opacity: 1; transform: translate(.6em, .9em); }
  76%, 100% { opacity: 0; transform: translate(4em, 3em); }
}

/* mobile: crop in on the reply + action chip */
.mst--ai { --m-zoom: 1.04; --m-pan-x: 0em; --m-pan-y: -.4em; }

/* ---- Work card: Grooming academy platform ---------------------
   Loop (9s): a student opens the 14:00 slot on their training day,
   the slot is linked into the Customer portal as a new session, the
   customer books it, and it turns brand yellow in every portal
   ("Booked · Milo"). Base styles = the finished, booked frame.     */
.mst--grooming { --sw: 50; --sh: 31; }

/* ---------- shared bits ---------- */
.mst--grooming .gm-role {
  display: inline-flex; align-items: center; gap: .4em;
  margin-left: .55em; padding: .22em .6em .22em .5em; border-radius: .45em;
  font-size: .62em; font-weight: 600; letter-spacing: .01em;
  background: #fff; border: 1px solid var(--mui-line); color: var(--ink);
}
.mst--grooming .gm-role s { width: .55em; height: .55em; border-radius: 50%; background: #9aa1ab; }
.mst--grooming .gm-role--s s { background: #7c5cff; }
.mst--grooming .gm-role--c s { background: var(--info); }
.mst--grooming .gm-role + .mui-win__title { margin-left: .3em; font-weight: 500; color: var(--ink-40); }
.mst--grooming .gm-win .mui-win__bar { height: 2.2em; }

/* ---------- Admin ---------- */
.mst--grooming .gm-admin { left: 0; top: 1.5em; width: 15.2em; height: 27em; }
.mst--grooming .gm-pad { position: absolute; left: .9em; top: 2.9em; width: 10.5em; display: grid; gap: .6em; }
.mst--grooming .gm-search {
  display: flex; align-items: center; gap: .45em; height: 1.9em; padding: 0 .6em;
  border: 1px solid var(--mui-line); border-radius: .55em; background: #fbfcfd; color: var(--ink-40);
}
.mst--grooming .gm-search svg { width: .85em; height: .85em; flex: none; }
.mst--grooming .gm-search span { font-size: .64em; white-space: nowrap; }
.mst--grooming .gm-pet { display: flex; align-items: center; gap: .6em; }
.mst--grooming .gm-pet__ava {
  width: 2.7em; height: 2.7em; border-radius: .8em; flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, #fff4c4, #fde68a); color: #b98a00;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.mst--grooming .gm-pet__ava svg { width: 58%; height: 58%; }
.mst--grooming .gm-pet__id { display: grid; gap: .15em; }
.mst--grooming .gm-pet__id b { font-family: var(--font-display); font-weight: 500; font-size: 1.12em; letter-spacing: -.03em; }
.mst--grooming .gm-pet__id em { font-style: normal; font-size: .64em; color: var(--ink-60); white-space: nowrap; }
.mst--grooming .gm-rows { margin: 0; display: grid; gap: .36em; padding-top: .6em; border-top: 1px solid #eef0f4; }
.mst--grooming .gm-rows > div { display: flex; justify-content: space-between; gap: .6em; }
.mst--grooming .gm-rows dt { font-size: .64em; color: var(--ink-40); }
.mst--grooming .gm-rows dd { margin: 0; font-size: .68em; font-weight: 600; white-space: nowrap; }
.mst--grooming .gm-note {
  display: grid; gap: .3em; padding: .55em .65em; border-radius: .55em;
  background: #fff7ed; border: 1px solid #fde3c3;
}
.mst--grooming .gm-note .mui-lbl { color: #b45309; font-size: .5em; }
.mst--grooming .gm-note p { margin: 0; font-size: .64em; line-height: 1.4; color: #7c3a0a; font-weight: 500; }
.mst--grooming .gm-sub { margin-bottom: -.35em; font-size: .5em; }
.mst--grooming .gm-next {
  position: relative; height: 2.7em; border-radius: .55em; overflow: hidden;
  border: 1px solid var(--mui-line); background: #fff;
}
.mst--grooming .gm-next__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; animation: grooming-fillA 9s var(--ease-out) infinite; }
.mst--grooming .gm-next__txt { position: relative; display: grid; gap: .12em; padding: .45em .6em; animation: grooming-txt 9s var(--ease-out) infinite; }
.mst--grooming .gm-next__txt b { font-size: .7em; font-weight: 600; color: var(--accent-ink); }
.mst--grooming .gm-next__txt em { font-style: normal; font-size: .58em; font-weight: 600; color: #6b5200; }
.mst--grooming .gm-next__nil { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 .75em; font-size: .6em; color: var(--ink-40); opacity: 0; animation: grooming-nil 9s var(--ease-out) infinite; }
.mst--grooming .gm-hist { display: grid; gap: .34em; padding-top: .45em; border-top: 1px solid #eef0f4; }
.mst--grooming .gm-hist .mui-lbl { font-size: .5em; }
.mst--grooming .gm-hist__r { display: flex; align-items: center; gap: .45em; }
.mst--grooming .gm-hist__r s { width: .42em; height: .42em; border-radius: 50%; background: var(--ok); flex: none; }
.mst--grooming .gm-hist__r span { flex: 1; font-size: .62em; color: var(--ink-80); white-space: nowrap; }
.mst--grooming .gm-hist__r em { font-style: normal; font-family: var(--font-mono); font-size: .56em; color: var(--ink-40); }

/* ---------- Customer ---------- */
.mst--grooming .gm-cust { left: 31.4em; top: 1.1em; width: 18.6em; height: 21.1em; }
.mst--grooming .gm-cpad { position: absolute; left: 1.7em; right: .9em; top: 2.2em; bottom: 0; }
.mst--grooming .gm-for {
  position: absolute; left: 0; right: 0; top: .75em; height: 2.3em;
  display: flex; align-items: center; gap: .55em; padding: 0 .5em;
  border: 1px solid var(--mui-line); border-radius: .6em;
}
.mst--grooming .gm-for__ava {
  width: 1.6em; height: 1.6em; border-radius: .5em; display: grid; place-items: center; flex: none;
  background: linear-gradient(145deg, #fff4c4, #fde68a); color: #b98a00;
}
.mst--grooming .gm-for__ava svg { width: 62%; height: 62%; }
.mst--grooming .gm-for > span:nth-child(2) { display: grid; gap: .05em; flex: 1; }
.mst--grooming .gm-for b { font-size: .72em; font-weight: 600; }
.mst--grooming .gm-for em { font-style: normal; font-size: .6em; color: var(--ink-40); }
.mst--grooming .gm-days {
  position: absolute; left: 0; right: 0; top: 3.55em; height: 2.5em;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .35em;
}
.mst--grooming .gm-days > span {
  display: grid; place-items: center; align-content: center; gap: .1em; border-radius: .55em;
  font-size: .5em; font-weight: 600; color: var(--ink-40); background: var(--mui-soft);
}
.mst--grooming .gm-days b { font-family: var(--font-display); font-weight: 500; font-size: 1.7em; color: var(--ink); line-height: 1; }
.mst--grooming .gm-days .is-on { background: var(--ink); color: rgba(255,255,255,.7); }
.mst--grooming .gm-days .is-on b { color: #fff; }
.mst--grooming .gm-avl { position: absolute; left: 0; top: 12.4em; }
.mst--grooming .gm-sess {
  position: absolute; left: 0; right: 0; height: 2.85em;
  display: flex; align-items: center; gap: .6em; padding: 0 .55em;
  border: 1px solid var(--mui-line); border-radius: .6em; background: #fff; overflow: hidden;
}
.mst--grooming .gm-sess:nth-of-type(3) { top: 8.05em; }
.mst--grooming .gm-sess:nth-of-type(4) { top: 11.25em; }
.mst--grooming .gm-sess--hit { top: 14.45em; border-color: transparent; animation: grooming-row 9s var(--ease-out) infinite; }
.mst--grooming .gm-sess__t { position: relative; font-family: var(--font-mono); font-size: .6em; font-weight: 500; color: var(--ink-80); width: 3.2em; flex: none; }
.mst--grooming .gm-sess__m { position: relative; display: grid; gap: .1em; flex: 1; min-width: 0; }
.mst--grooming .gm-sess__m b { font-size: .72em; font-weight: 600; white-space: nowrap; }
.mst--grooming .gm-sess__m em { font-style: normal; font-size: .62em; color: var(--ink-40); white-space: nowrap; }
.mst--grooming .gm-sess .mui-btn { position: relative; padding: .45em .95em; font-size: .6em; }
.mst--grooming .gm-sess--full { background: #fafbfc; }
.mst--grooming .gm-sess--full .gm-sess__m b, .mst--grooming .gm-sess--full .gm-sess__t { color: var(--ink-40); }
.mst--grooming .gm-sess__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; animation: grooming-fillB 9s var(--ease-out) infinite; }
.mst--grooming .gm-sess--hit .gm-sess__t,
.mst--grooming .gm-sess--hit .gm-sess__m b { color: var(--accent-ink); }
.mst--grooming .gm-sw { position: relative; display: grid; }
.mst--grooming .gm-sw > span { grid-area: 1 / 1; }
.mst--grooming .gm-sw__a { opacity: 0; animation: grooming-swA 9s var(--ease-out) infinite; }
.mst--grooming .gm-sw__b { font-weight: 600; color: #6b5200; animation: grooming-swB 9s var(--ease-out) infinite; }
.mst--grooming .gm-cta { position: relative; display: grid; place-items: center; }
.mst--grooming .gm-cta > * { grid-area: 1 / 1; }
.mst--grooming .gm-cta__a { opacity: 0; background: var(--ink); color: #fff; animation: grooming-swA 9s var(--ease-out) infinite; }
.mst--grooming .gm-cta__b {
  width: 1.55em; height: 1.55em; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-ink); color: var(--accent);
  animation: grooming-pop 9s var(--ease-out) infinite;
}
.mst--grooming .gm-cta__b svg { width: 60%; height: 60%; }

/* ---------- Student ---------- */
.mst--grooming .gm-stu { left: 12.3em; top: 3.6em; width: 20.3em; height: 27em; z-index: 2; }
.mst--grooming .gm-spad { position: absolute; left: .9em; right: .9em; top: 2.2em; bottom: 0; }
.mst--grooming .gm-prog { position: absolute; left: 0; right: 0; top: .8em; display: flex; align-items: center; gap: .6em; }
.mst--grooming .gm-prog .mui-avatar { width: 2.6em; height: 2.6em; font-size: .7em; box-shadow: none; }
.mst--grooming .gm-prog__txt { display: grid; gap: .1em; flex: 1; }
.mst--grooming .gm-prog__txt b { font-size: .78em; font-weight: 600; letter-spacing: -.01em; }
.mst--grooming .gm-prog__txt em { font-style: normal; font-size: .6em; color: var(--ink-40); }
.mst--grooming .gm-prog__pct { font-size: 1.35em; }
.mst--grooming .gm-prog__bar { position: absolute; left: 0; right: 0; top: 3.2em; height: .5em; }
.mst--grooming .gm-prog__bar b { width: 54%; }
.mst--grooming .gm-exam { position: absolute; left: 0; right: 0; top: 4.2em; display: flex; align-items: center; justify-content: space-between; }
.mst--grooming .gm-exam__d { font-size: .6em; color: var(--ink-60); font-weight: 500; }
.mst--grooming .gm-dayhd {
  position: absolute; left: 0; right: 0; top: 6.1em; padding-top: .7em;
  display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #eef0f4;
}
.mst--grooming .gm-dayhd__n { font-family: var(--font-mono); font-size: .52em; color: var(--ink-40); }
.mst--grooming .gm-tl { position: absolute; left: 0; right: 0; top: 7.75em; display: grid; gap: .2em; }
.mst--grooming .gm-r { display: grid; grid-template-columns: 2.5em 1fr; align-items: stretch; height: 1.9em; }
.mst--grooming .gm-r__t { font-family: var(--font-mono); font-size: .56em; color: var(--ink-40); padding-top: .95em; letter-spacing: .03em; }
.mst--grooming .gm-blk {
  display: flex; align-items: center; justify-content: space-between; gap: .5em;
  padding: 0 .55em; border-radius: .42em; border-left: .2em solid;
}
.mst--grooming .gm-blk b { font-size: .68em; font-weight: 600; white-space: nowrap; }
.mst--grooming .gm-blk i { font-style: normal; font-size: .54em; font-weight: 600; opacity: .8; }
.mst--grooming .gm-blk--done   { background: #e4f6ec; border-color: #1f9d63; color: #146c43; }
.mst--grooming .gm-blk--now    { background: #eaf1ff; border-color: #3b82f6; color: #1e4fb8; }
.mst--grooming .gm-blk--blue   { background: #eaf1ff; border-color: #3b82f6; color: #1e4fb8; }
.mst--grooming .gm-blk--grey   { background: #f3f5f8; border-color: #c7cbd0; color: var(--ink-60); }
.mst--grooming .gm-blk--purple { background: #f0ecff; border-color: #7c5cff; color: #5134c9; }

/* the slot that gets opened, then booked */
.mst--grooming .gm-slot { position: relative; border-radius: .42em; overflow: hidden; }
.mst--grooming .gm-slot__open {
  position: absolute; inset: 0; display: flex; align-items: center; padding: 0 .75em;
  border: 1px dashed #cfd5de; border-radius: inherit;
  font-size: .56em; font-weight: 600; color: var(--ink-40);
  opacity: 0; animation: grooming-open 9s var(--ease-out) infinite;
}
.mst--grooming .gm-slot__fill {
  position: absolute; inset: 0; background: var(--accent);
  box-shadow: inset .2em 0 0 var(--accent-deep);
  transform-origin: 0 50%;
  animation: grooming-fillA 9s var(--ease-out) infinite;
}
.mst--grooming .gm-slot__txt {
  position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 .55em 0 .75em;
  animation: grooming-txt 9s var(--ease-out) infinite;
}
.mst--grooming .gm-slot__txt b { font-size: .7em; font-weight: 600; color: var(--accent-ink); }
.mst--grooming .gm-slot__txt i { font-style: normal; font-size: .56em; font-weight: 600; color: #6b5200; }

/* ---------- link between portals ---------- */
.mst--grooming .gm-link { position: absolute; left: 0; top: 0; width: 50em; height: 31em; z-index: 3; pointer-events: none; overflow: visible; }
.mst--grooming .gm-link__p {
  stroke: var(--accent-deep); stroke-width: .16; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  animation: grooming-draw 9s var(--ease-io) infinite;
}
.mst--grooming .gm-dot {
  position: absolute; z-index: 4; width: .75em; height: .75em; margin: -.375em 0 0 -.375em; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 .18em #fff, 0 .1em .35em .15em rgba(18,20,23,.18);
}
.mst--grooming .gm-dot--a { left: 31.9em; top: 25em; animation: grooming-dotA 9s var(--ease-out) infinite; }
.mst--grooming .gm-dot--b { left: 41.2em; top: 20.6em; animation: grooming-dotB 9s var(--ease-out) infinite; }
.mst--grooming .gm-ring {
  position: absolute; z-index: 4; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%;
  border: .2em solid var(--accent); opacity: 0; pointer-events: none;
}
.mst--grooming .gm-ring--a { left: 20.6em; top: 25em; animation: grooming-ringA 9s var(--ease-out) infinite; }
.mst--grooming .gm-ring--b { left: 47.4em; top: 19.2em; animation: grooming-ringB 9s var(--ease-out) infinite; }

/* ---------- toast ---------- */
.mst--grooming .gm-toast {
  left: 34.2em; top: 26.1em; width: 15.8em; z-index: 3;
  display: flex; align-items: center; gap: .65em; padding: .7em .8em;
  animation: grooming-toast 9s var(--ease-out) infinite;
}
.mst--grooming .gm-toast__ico {
  width: 2.1em; height: 2.1em; border-radius: .6em; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
}
.mst--grooming .gm-toast__ico svg { width: 58%; height: 58%; }
.mst--grooming .gm-toast__txt { display: grid; gap: .1em; flex: 1; }
.mst--grooming .gm-toast__txt b { font-size: .7em; font-weight: 600; }
.mst--grooming .gm-toast__txt em { font-style: normal; font-size: .6em; color: var(--ink-60); }

/* ---------- cursor (hidden in the static frame) ---------- */
.mst--grooming .gm-cursor { left: 20.2em; top: 24.7em; opacity: 0; animation: grooming-cursor 9s var(--ease-io) infinite; }

/* ---------- keyframes (9s) ----------
   0-6 settle · 8-17 cursor to slot · 17 click: slot opens
   20-33 link draws, new session appears for customers
   34-46 cursor to Book · 47 click · 48-56 yellow in every portal
   56-86 rest · 88-97 fade reset                                  */
@keyframes grooming-cursor {
  0%, 4%    { opacity: 0; transform: translate(-6em, 5em); }
  8%        { opacity: 1; transform: translate(-6em, 5em); }
  16%       { opacity: 1; transform: translate(0, 0) scale(1); }
  17.5%     { transform: translate(0, 0) scale(.82); }
  19%       { transform: translate(0, 0) scale(1); }
  33%       { opacity: 1; transform: translate(0, 0); }
  45%       { opacity: 1; transform: translate(27em, -5.4em) scale(1); }
  47%       { transform: translate(27em, -5.4em) scale(.82); }
  49%       { opacity: 1; transform: translate(27em, -5.4em) scale(1); }
  60%, 100% { opacity: 0; transform: translate(28.5em, -2em); }
}
@keyframes grooming-open {
  0%, 3%    { opacity: 0; }
  7%, 17%   { opacity: 1; border-color: #cfd5de; background: #fff; color: var(--ink-40); }
  19%, 47%  { opacity: 1; border-color: var(--accent-deep); background: var(--accent-mist); color: var(--accent-ink); }
  52%, 100% { opacity: 0; border-color: var(--accent-deep); background: var(--accent-mist); }
}
@keyframes grooming-fillA {
  0%, 48%   { transform: scaleX(0); opacity: 0; }
  48.5%     { transform: scaleX(.15); opacity: 1; }
  55%, 88%  { transform: scaleX(1); opacity: 1; }
  96%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes grooming-fillB {
  0%, 47.5% { transform: scaleX(0); opacity: 0; }
  48%       { transform: scaleX(.12); opacity: 1; }
  54%, 88%  { transform: scaleX(1); opacity: 1; }
  96%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes grooming-txt {
  0%, 51%   { opacity: 0; transform: translateY(.3em); }
  56%, 88%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; }
}
@keyframes grooming-row {
  0%, 26%   { opacity: 0; transform: translateY(.8em); border-color: var(--accent-deep); background: var(--accent-mist); }
  32%, 54%  { opacity: 1; transform: none; border-color: var(--accent-deep); background: var(--accent-mist); }
  57%, 88%  { opacity: 1; transform: none; border-color: transparent; background: #fff; }
  96%, 100% { opacity: 0; transform: translateY(.4em); border-color: transparent; }
}
@keyframes grooming-swA {
  0%, 47%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes grooming-swB {
  0%, 50%   { opacity: 0; }
  55%, 100% { opacity: 1; }
}
@keyframes grooming-pop {
  0%, 48%   { opacity: 0; transform: scale(.3); }
  52%       { opacity: 1; transform: scale(1.12); }
  56%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes grooming-draw {
  0%, 20%   { stroke-dashoffset: 100; opacity: 0; }
  21%       { stroke-dashoffset: 92; opacity: 1; }
  31%, 86%  { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes grooming-dotA {
  0%, 19%   { opacity: 0; transform: scale(0); }
  22%, 86%  { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(.6); }
}
@keyframes grooming-dotB {
  0%, 30%   { opacity: 0; transform: scale(0); }
  33%, 86%  { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(.6); }
}
@keyframes grooming-ringA {
  0%, 17%   { opacity: 0; transform: scale(.3); }
  18%       { opacity: .9; transform: scale(.4); }
  28%, 48%  { opacity: 0; transform: scale(2.2); }
  49%       { opacity: .9; transform: scale(.4); }
  60%, 100% { opacity: 0; transform: scale(2.4); }
}
@keyframes grooming-ringB {
  0%, 47.5% { opacity: 0; transform: scale(.3); }
  48.5%     { opacity: .9; transform: scale(.4); }
  60%, 100% { opacity: 0; transform: scale(2.4); }
}
@keyframes grooming-nil {
  0%, 5%    { opacity: 0; }
  9%, 46%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes grooming-toast {
  0%, 54%   { opacity: 0; transform: translateY(1.2em) scale(.96); }
  61%, 86%  { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: translateY(.6em); }
}

/* mobile: crop in on the student slot, the link and the customer booking */
.mst--grooming { --m-zoom: 1.15; --m-pan-x: -3.3em; --m-pan-y: -1.4em; }