/* Tamra site v2 — the Point of Sale module page (pages/modules/pos.html).
   Mock-ups drawn from src/modules/pos/POSTerminal.jsx (LiveTerminal, ProductCard, CatPill, CartLine, PaymentModal,
   ReceiptScreen) and POS.jsx (SessionsView, ZReportModal), Quiet theme, at the terminal's touch sizes (the till is
   usually a tablet). Every selector sits under .vg-pos (the terminal), .vg-pz (sessions + Z-report) or .pos-… (page).
   Hidden starting states live only under .motion. */

/* ── the terminal: full screen, no app chrome (POSTerminal.jsx:449-689) ─────────────────────────── */
.vg-pos{display:flex;flex-direction:column;background:#F6F9FC;color:#0F1A2B}
.vg-pos .mono{font-family:"SF Mono",Menlo,ui-monospace,monospace}

/* top bar */
.vg-pos .po-top{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid rgba(0,0,0,.06);background:rgba(0,0,0,.02);flex:none}
.vg-pos .po-exit{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:7px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);color:#444D5A;font:700 11px/1.2 "Inter",sans-serif}
.vg-pos .po-exit .ic{width:11px;height:11px}
.vg-pos .po-term{display:flex;align-items:center;gap:8px;flex:1}
.vg-pos .po-logo{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(135deg,#F43F5E,#E11D48);color:#fff}
.vg-pos .po-logo .ic{width:14px;height:14px}
.vg-pos .po-term b{display:block;font:800 13px/1.1 "Plus Jakarta Sans",sans-serif}
.vg-pos .po-term small{display:block;font-size:10px;color:#626976;margin-top:2px}
.vg-pos .po-cust,.vg-pos .po-plist{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:7px;font:700 11px/1.2 "Inter",sans-serif;white-space:nowrap}
.vg-pos .po-cust{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.25);color:#60A5FA}
.vg-pos .po-cust .ic{width:11px;height:11px}
.vg-pos .po-plist{padding:7px 9px;background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.3);color:#60A5FA;gap:14px}
.vg-pos .po-plist .ic{width:11px;height:11px;color:#626976}

.vg-pos .po-split{flex:1;min-height:0;display:flex}

/* products: search, category pills, the stock message, the tiles */
.vg-pos .po-prods{flex:1 1 60%;min-width:0;display:flex;flex-direction:column;padding:14px;border-right:1px solid rgba(0,0,0,.06)}
.vg-pos .po-search{position:relative;display:flex;align-items:center;height:42px;padding:0 12px 0 34px;border-radius:9px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);font-size:13px;margin-bottom:10px}
.vg-pos .po-sic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:#626976}
.vg-pos .po-ph{color:#8A919C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-pos .po-typed{position:absolute;left:34px;top:0;bottom:0;display:flex;align-items:center;gap:1px;color:#0F1A2B;opacity:0}
.vg-pos .po-typed em{display:flex}
.vg-pos .po-typed b{display:inline-block;overflow:hidden;font-weight:400;white-space:pre}
.vg-pos .po-typed i{width:1.5px;height:16px;background:#0F1A2B}
.vg-pos .po-sx{position:absolute;right:8px;top:0;bottom:0;margin:auto 0;width:22px;height:22px;border-radius:6px;background:rgba(0,0,0,.04);display:grid;place-items:center;color:#626976;opacity:0}
.vg-pos .po-sx .ic{width:11px;height:11px}
.vg-pos .po-cats{display:flex;gap:6px;padding-bottom:4px;margin-bottom:10px}
.vg-pos .po-cat{display:flex;align-items:center;gap:5px;padding:10px 16px;border-radius:10px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);color:#444D5A;font:700 12.5px/1.2 "Inter",sans-serif;white-space:nowrap}
.vg-pos .po-cat i{font-style:normal;font-size:9px;font-weight:800;opacity:.7}
.vg-pos .po-cat.on{background:linear-gradient(135deg,#F43F5E,#E11D48);border-color:transparent;color:#fff}
/* "Only 3 of … available at Front Counter." — in the flow, above the tiles, while it's showing */
.vg-pos .po-msg{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.vg-pos .po-msg-in{min-height:0;overflow:hidden}
.vg-pos .po-msg p{margin:0 0 18px;padding:7px 10px;border-radius:8px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);color:#F59E0B;font:600 10.5px/1.45 "Inter",sans-serif}
.vg-pos .po-msg p span{opacity:.6}
.vg-pos .po-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-content:start}
.vg-pos .po-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:106px;padding:14px;border-radius:13px;
  background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);text-align:left;--op:1}
.vg-pos .po-tile b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:30px;padding-right:30px;font:700 13px/1.3 "Inter",sans-serif;color:#0F1A2B}
.vg-pos .po-tile code{font:400 9px/1.3 ui-monospace,Menlo,monospace;color:#626976}
.vg-pos .po-tile em{margin-top:auto;font:800 16px/1.2 "Plus Jakarta Sans",sans-serif;color:#FB7185}
.vg-pos .po-stk{position:absolute;top:6px;right:6px;padding:2px 6px;border-radius:4px;font:700 9px/1.4 "SF Mono",ui-monospace,Menlo,monospace;font-style:normal;background:rgba(16,185,129,.12);color:#10B981}
.vg-pos .po-stk.lo{background:rgba(245,158,11,.15);color:#F59E0B}
.vg-pos .po-stk.no{background:rgba(244,63,94,.15);color:#F43F5E}
.vg-pos .po-tile.out{opacity:.55;border-color:rgba(244,63,94,.25);--op:.55}
.vg-pos .po-tap{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:2px solid rgba(244,63,94,.55);background:rgba(244,63,94,.10);opacity:0;pointer-events:none}

/* the cart */
.vg-pos .po-cart{flex:0 0 40%;min-width:360px;display:flex;flex-direction:column;gap:10px;padding:14px}
.vg-pos .po-ch{display:flex;align-items:center;justify-content:space-between;min-height:24px}
.vg-pos .po-ch>b{display:flex;align-items:center;gap:8px;font:800 14px/1.2 "Plus Jakarta Sans",sans-serif}
.vg-pos .po-ch>b .ic{width:14px;height:14px;color:#FB7185}
.vg-pos .po-cnt{font-style:normal;padding:2px 7px;border-radius:5px;background:rgba(244,63,94,.12);color:#FB7185;font:800 10px/1.3 "Inter",sans-serif}
.vg-pos .po-clear{display:flex;align-items:center;gap:4px;padding:5px 9px;border-radius:6px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);color:#626976;font:700 10px/1.2 "Inter",sans-serif}
.vg-pos .po-clear .ic{width:10px;height:10px}
.vg-pos .po-lines{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.vg-pos .po-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;color:#626976;opacity:0}
.vg-pos .po-empty .ic{width:36px;height:36px;opacity:.3;margin-bottom:6px}
.vg-pos .po-empty b{font-weight:400;font-size:12px}
.vg-pos .po-empty small{font-size:10px}
.vg-pos .po-ln{padding:10px;border-radius:9px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06)}
.vg-pos .po-lh{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.vg-pos .po-lh b{display:block;font:700 12px/1.3 "Inter",sans-serif}
.vg-pos .po-lh small{display:block;font-size:10px;color:#626976;margin-top:2px}
.vg-pos .po-lst{margin-left:5px;color:#60A5FA;font-weight:700}
.vg-pos .po-rm{width:22px;height:22px;flex:none;border-radius:5px;display:grid;place-items:center;background:rgba(244,63,94,.06);border:1px solid rgba(244,63,94,.2);color:#FB7185}
.vg-pos .po-rm .ic{width:10px;height:10px}
.vg-pos .po-lb{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.vg-pos .po-qty{display:flex;align-items:center;gap:4px}
.vg-pos .po-qb{position:relative;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);color:#444D5A}
.vg-pos .po-qb .ic{width:11px;height:11px}
.vg-pos .po-pct{margin-left:4px;color:#626976}
.vg-pos .po-pct .ic{width:10px;height:10px}
.vg-pos .po-qb .po-tap{width:46px;height:46px;margin:-23px 0 0 -23px}
.vg-pos .po-qi{width:58px;height:40px;display:grid;place-items:center;border-radius:6px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);font:800 12px/1 "Plus Jakarta Sans",sans-serif}
.vg-pos .po-lv{font:800 13px/1.2 "Plus Jakarta Sans",sans-serif}
.vg-pos .po-opts{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.vg-pos .po-opts-in{min-height:0;overflow:hidden}
.vg-pos .po-og{margin-top:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,.06);display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vg-pos .po-opts label{display:block;font:700 9px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase;margin-bottom:3px}
.vg-pos .po-in{display:block;padding:6px 8px;border-radius:6px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);font-size:11px;line-height:1.3}
.vg-pos .po-tots{display:flex;flex-direction:column;gap:4px;padding-top:10px;border-top:1px solid rgba(0,0,0,.06)}
.vg-pos .po-tr{display:flex;justify-content:space-between;align-items:center;padding:3px 4px}
.vg-pos .po-tr span{font:600 11px/1.3 "Inter",sans-serif;color:#626976}
.vg-pos .po-tr b{font:700 12px/1.3 "SF Mono",ui-monospace,Menlo,monospace;color:#444D5A}
.vg-pos .po-vat b{color:#626976}
.vg-pos .po-total{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding:10px 12px;border-radius:9px;
  background:linear-gradient(135deg,rgba(244,63,94,.08),rgba(139,92,246,.04));border:1px solid rgba(244,63,94,.2)}
.vg-pos .po-total span{font:800 12px/1 "Inter",sans-serif;text-transform:uppercase;letter-spacing:.5px}
.vg-pos .po-total b{font:900 22px/1.2 "Plus Jakarta Sans",sans-serif;color:#FB7185}
.vg-pos .po-pay{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;padding:19px 16px;border-radius:13px;
  background:linear-gradient(135deg,#10B981,#059669);color:#fff;font:800 16px/1.2 "Plus Jakarta Sans",sans-serif;box-shadow:0 8px 22px rgba(16,185,129,.3)}
.vg-pos .po-pay .ic{width:16px;height:16px}
.vg-pos .po-pay b{font-weight:800}

/* a value that steps as the cart fills: every figure it passes through is stacked in place, the last one shows */
.vg-pos .sv{display:inline-grid;justify-items:end}
.vg-pos .sv>em{grid-area:1/1;white-space:nowrap}
.vg-pos .po-qi.sv{justify-items:center}
.vg-pos .po-cnt.sv{justify-items:center}
.vg-pos .sv>em:not(:last-child){visibility:hidden}

/* Take Payment (POSTerminal.jsx:847-1043): a split, fully paid, before Confirm & Post Sale */
.vg-pos .po-ov{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
.vg-pos .po-modal{width:100%;max-width:640px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden;
  transform:translateY(16px) scale(.985);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.vg-pos .po-mh{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.06)}
.vg-pos .po-mh b{display:block;font:800 15px/1.25 "Plus Jakarta Sans",sans-serif}
.vg-pos .po-mh small{display:block;font-size:11px;color:#626976;margin-top:2px}
.vg-pos .po-mx{width:28px;height:28px;border-radius:7px;border:1px solid rgba(0,0,0,.06);display:grid;place-items:center;color:#626976}
.vg-pos .po-mx .ic{width:13px;height:13px}
.vg-pos .po-mb{padding:18px}
.vg-pos .po-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.vg-pos .po-stats>div{padding:10px;border-radius:8px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06);text-align:center}
.vg-pos .po-stats small{display:block;font:700 9px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.vg-pos .po-stats b{display:block;font:800 14px/1.3 "Plus Jakarta Sans",sans-serif}
.vg-pos .po-stats .ok b{color:#34D399}
.vg-pos .po-stats .mu b{color:#626976}
.vg-pos .po-plab{font:700 11px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.vg-pos .po-pays{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.vg-pos .po-pr{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:7px;background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.2)}
.vg-pos .po-pm{display:flex;align-items:center;gap:8px}
.vg-pos .po-pm .ic{width:13px;height:13px}
.vg-pos .po-pm .ca{color:#34D399}
.vg-pos .po-pm .cd{color:#60A5FA}
.vg-pos .po-pm b{display:block;font:700 12px/1.3 "Inter",sans-serif}
.vg-pos .po-pm small{display:block;font-size:9px;color:#626976}
.vg-pos .po-pa{display:flex;align-items:center;gap:8px}
.vg-pos .po-pa b{font:800 13px/1.2 "Plus Jakarta Sans",sans-serif;color:#34D399}
.vg-pos .po-mf{display:flex;gap:8px}
.vg-pos .po-cancel{padding:10px 14px;border-radius:8px;border:1px solid rgba(0,0,0,.06);color:#444D5A;font:700 12px/1.2 "Inter",sans-serif}
.vg-pos .po-confirm{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;border-radius:8px;background:linear-gradient(135deg,#10B981,#059669);
  color:#fff;font:800 13px/1.2 "Inter",sans-serif;box-shadow:0 8px 22px rgba(16,185,129,.3)}
.vg-pos .po-confirm .ic{width:14px;height:14px}

/* the receipt screen after a sale (POSTerminal.jsx:1057-1190) */
.vg-pos .po-rc{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;background:#F6F9FC;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.vg-pos .po-rbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid rgba(0,0,0,.06);background:rgba(0,0,0,.02)}
.vg-pos .po-rok{display:flex;align-items:center;gap:10px}
.vg-pos .po-rt{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#10B981,#059669);color:#fff;box-shadow:0 4px 14px rgba(16,185,129,.3)}
.vg-pos .po-rt .ic{width:18px;height:18px}
.vg-pos .po-rok b{display:block;font:800 14px/1.25 "Plus Jakarta Sans",sans-serif}
.vg-pos .po-rok small{display:block;font-size:11px;color:#626976}
.vg-pos .po-racts{display:flex;gap:8px}
.vg-pos .po-print,.vg-pos .po-new{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:8px;font:700 12px/1.2 "Inter",sans-serif}
.vg-pos .po-print{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);color:#444D5A}
.vg-pos .po-new{background:linear-gradient(135deg,#F43F5E,#E11D48);color:#fff;box-shadow:0 4px 14px rgba(244,63,94,.3)}
.vg-pos .po-print .ic,.vg-pos .po-new .ic{width:12px;height:12px}
.vg-pos .po-rwrap{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;padding:24px}
.vg-pos .po-slip{width:100%;max-width:360px;padding:24px;border-radius:8px;background:#fff;color:#000;box-shadow:0 24px 60px rgba(0,0,0,.5);
  font:400 12px/1.5 "Courier New",Courier,"Liberation Mono",monospace;transform:translateY(-14px);transition:transform .7s cubic-bezier(.2,.7,.2,1) .1s}
.vg-pos .po-slip p{display:flex;justify-content:space-between;margin:0}
.vg-pos .sl-h{text-align:center;margin-bottom:12px;padding-bottom:10px;border-bottom:2px dashed #000}
.vg-pos .sl-h b{display:block;font-size:16px;font-weight:900;letter-spacing:1px}
.vg-pos .sl-h small{display:block;font-size:11px;margin-top:4px}
.vg-pos .sl-meta{margin-bottom:12px;font-size:11px}
.vg-pos .sl-meta b{font-weight:800}
.vg-pos .sl-lines{border-top:1px dashed #000;border-bottom:1px dashed #000;padding:8px 0;margin-bottom:8px}
.vg-pos .sl-lines>div{margin-bottom:6px}
.vg-pos .sl-lines>div:last-child{margin-bottom:0}
.vg-pos .sl-lines b{display:block;font-weight:700}
.vg-pos .sl-lines p{font-size:11px}
.vg-pos .sl-lines p.v{font-size:10px;color:#666;padding-left:1ch}
.vg-pos .sl-tot{margin-bottom:10px}
.vg-pos .sl-tot p{font-size:11px}
.vg-pos .sl-tot p.g{font-size:14px;font-weight:900;margin-top:6px;padding-top:6px;border-top:2px solid #000}
.vg-pos .sl-pay{border-top:1px dashed #000;padding-top:8px;margin-bottom:10px;font-size:11px}
.vg-pos .sl-f{text-align:center;border-top:2px dashed #000;padding-top:10px;font-size:10px;color:#333}
.vg-pos .sl-f b{display:block;font-weight:700;margin-bottom:4px}
.vg-pos .sl-f span{display:block}
.vg-pos .sl-f small{display:block;margin-top:6px;font-size:9px;color:#666}

/* ── the tour's states ─────────────────────────────────────────────────────────────────────── */
.vg-pos[data-state=stock] .po-msg{grid-template-rows:1fr}
.vg-pos[data-state=stock] .t-gbk{background:rgba(244,63,94,.06);border-color:rgba(244,63,94,.3)}
.vg-pos[data-state=list] .po-opts{grid-template-rows:1fr}
.vg-pos[data-state=pay] .po-ov{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.vg-pos[data-state=pay] .po-modal{transform:none}
.vg-pos[data-state=done] .po-rc{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
.vg-pos[data-state=done] .po-slip{transform:none}

/* ── the hero: three products go into the cart, one tap at a time (only with the site script) ───── */
.motion .m-shot .vg-pos .po-empty{opacity:1}
.motion .m-shot:not(.in) .vg-pos .po-ln,.motion .m-shot:not(.in) .vg-pos .po-tots,
.motion .m-shot:not(.in) .vg-pos .po-clear,.motion .m-shot:not(.in) .vg-pos .po-cnt{opacity:0}
.motion .m-shot.in .vg-pos .po-empty{animation:poOut .2s ease .6s forwards}
.motion .m-shot.in .vg-pos .po-l1,.motion .m-shot.in .vg-pos .po-tots{animation:poIn .4s cubic-bezier(.2,.7,.2,1) .6s both}
.motion .m-shot.in .vg-pos .po-clear,.motion .m-shot.in .vg-pos .po-cnt{animation:poOn .25s ease .6s both}
.motion .m-shot.in .vg-pos .po-l2{animation:poIn .4s cubic-bezier(.2,.7,.2,1) 2.4s both}
.motion .m-shot.in .vg-pos .po-l3{animation:poIn .4s cubic-bezier(.2,.7,.2,1) 3.8s both}
.motion .m-shot.in .vg-pos .sv>em{visibility:visible;animation:poOn .26s cubic-bezier(.2,.7,.2,1) calc(var(--a) * 1ms + 70ms) both,poOff .12s ease-in calc(var(--b) * 1ms) forwards}
.motion .m-shot.in .vg-pos .sv>em:last-child{animation:poOn .26s cubic-bezier(.2,.7,.2,1) calc(var(--a) * 1ms + 70ms) both}
/* the taps: the gift box three times, the Medjool once, the Ajwa line's + once */
.motion .m-shot.in .vg-pos .t-gbk .po-tap{animation:poTap .55s ease-out .6s 3 both}
.motion .m-shot.in .vg-pos .t-mdj .po-tap{animation:poTap .55s ease-out 2.4s both}
.motion .m-shot.in .vg-pos .po-l3 .po-tap{animation:poTap .55s ease-out 4.45s both}
/* the scan: AJW-01 typed into search, the tiles narrow to the match, Enter adds it and clears the search */
.motion .m-shot.in .vg-pos .po-ph{animation:poOut .01s linear 3s forwards,poOn .01s linear 3.8s forwards}
.motion .m-shot.in .vg-pos .po-typed,.motion .m-shot.in .vg-pos .po-sx{animation:poShow .01s linear 3s both,poOut .01s linear 3.8s forwards}
.motion .m-shot .vg-pos .po-typed b{max-width:0}
.motion .m-shot.in .vg-pos .po-typed b{animation:poChar .01s linear 3s forwards}
.motion .m-shot.in .vg-pos .po-typed b:nth-child(2){animation-delay:3.05s}
.motion .m-shot.in .vg-pos .po-typed b:nth-child(3){animation-delay:3.1s}
.motion .m-shot.in .vg-pos .po-typed b:nth-child(4){animation-delay:3.15s}
.motion .m-shot.in .vg-pos .po-typed b:nth-child(5){animation-delay:3.2s}
.motion .m-shot.in .vg-pos .po-typed b:nth-child(6){animation-delay:3.25s}
.motion .m-shot.in .vg-pos .po-typed i{animation:poBlink .9s steps(1,end) 3s infinite}
.motion .m-shot.in .vg-pos .po-tile{animation:poFadeOut .22s ease 3.35s forwards,poFadeIn .3s ease 3.8s forwards}
.motion .m-shot.in .vg-pos .po-tile.t-gbk{animation:poPress .55s ease-out .6s 3 both,poFadeOut .22s ease 3.35s forwards,poFadeIn .3s ease 3.8s forwards}
.motion .m-shot.in .vg-pos .po-tile.t-mdj{animation:poPress .55s ease-out 2.4s both,poFadeOut .22s ease 3.35s forwards,poFadeIn .3s ease 3.8s forwards}
.motion .m-shot.in .vg-pos .po-tile.t-ajw{animation:poToFirst .34s cubic-bezier(.3,.7,.2,1) 3.35s forwards,poFromFirst .34s cubic-bezier(.3,.7,.2,1) 3.8s forwards}
.motion .m-shot.in .vg-pos .po-pay{animation:poGlow 1.3s ease 4.95s both}

@keyframes poIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes poOn{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
@keyframes poOff{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-.4em)}}
@keyframes poOut{to{opacity:0}}
@keyframes poTap{0%{opacity:0;transform:scale(.35)}12%{opacity:1}100%{opacity:0;transform:scale(1.45)}}
@keyframes poPress{18%{background:rgba(244,63,94,.06);border-color:rgba(244,63,94,.3);transform:scale(.97)}}
@keyframes poShow{from{opacity:0}to{opacity:1}}
@keyframes poChar{to{max-width:1em}}
@keyframes poBlink{50%{opacity:0}}
@keyframes poFadeOut{to{opacity:0}}
@keyframes poFadeIn{from{opacity:0}to{opacity:var(--op,1)}}
@keyframes poToFirst{to{transform:translate(-373.5px,-114px)}}
@keyframes poFromFirst{from{transform:translate(-373.5px,-114px)}to{transform:none}}
@keyframes poGlow{0%{box-shadow:0 8px 22px rgba(16,185,129,.3),0 0 0 0 rgba(16,185,129,.35)}100%{box-shadow:0 8px 22px rgba(16,185,129,.3),0 0 0 16px rgba(16,185,129,0)}}

/* ── sessions and the Z-report (POS.jsx:297-529, 1286-1472) ─────────────────────────────────── */
.vg-pz .page{position:relative;padding:18px 24px 0}
.vg-pz .pz-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px}
.vg-pz .pz-head h4{margin:0;font:900 22px/1.2 "Plus Jakarta Sans",sans-serif;letter-spacing:-.02em}
.vg-pz .pz-head small{display:block;font-size:12px;color:#626976;margin-top:4px}
.vg-pz .pz-open,.vg-pz .pz-b{display:flex;align-items:center;gap:6px}
.vg-pz .pz-open{padding:9px 14px;border-radius:8px;background:linear-gradient(135deg,#F43F5E,#E11D48);color:#fff;font:700 12px/1.2 "Inter",sans-serif;box-shadow:0 4px 14px rgba(244,63,94,.25)}
.vg-pz .pz-open .ic{width:13px;height:13px}
.vg-pz .pz-info{display:flex;align-items:center;gap:6px;width:max-content;font:600 11.5px/1.2 "Inter",sans-serif;color:#2563EB;margin-bottom:16px}
.vg-pz .pz-info .ic{width:13px;height:13px}
.vg-pz .pz-lab{display:flex;align-items:center;gap:6px;font:800 10px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px}
.vg-pz .pz-lab.g{color:#34D399}
.vg-pz .pz-lab .ic{width:11px;height:11px}
.vg-pz .pz-card{width:340px;padding:14px;border-radius:12px;background:linear-gradient(135deg,rgba(16,185,129,.06),transparent);border:1px solid rgba(16,185,129,.2);margin-bottom:18px}
.vg-pz .pz-ct{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.vg-pz .pz-ct b{display:block;font:800 13px/1.3 "Plus Jakarta Sans",sans-serif}
.vg-pz .pz-ct small{display:block;font-size:11px;color:#626976;margin-top:2px}
.vg-pz .pz-badge{padding:3px 8px;border-radius:6px;background:rgba(16,185,129,.12);color:#34D399;font:800 9px/1.3 "Inter",sans-serif;letter-spacing:.5px}
.vg-pz .pz-cb{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.vg-pz .pz-cb small{font-size:10px;color:#626976}
.vg-pz .pz-cb>span{display:flex;gap:6px}
.vg-pz .pz-b{padding:6px 10px;border-radius:7px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);color:#444D5A;font:700 10px/1.2 "Inter",sans-serif;gap:4px}
.vg-pz .pz-b .ic{width:11px;height:11px}
.vg-pz .pz-b.r{background:rgba(244,63,94,.06);border-color:rgba(244,63,94,.2);color:#FB7185}
.vg-pz .pz-tbl{border-radius:10px;background:#F6F9FC;border:1px solid rgba(0,0,0,.06);overflow:hidden}
.vg-pz .pz-tr{display:grid;grid-template-columns:1.25fr 1fr 1fr .9fr .9fr .7fr .6fr 1.15fr;align-items:center;border-bottom:1px solid rgba(0,0,0,.06)}
.vg-pz .pz-tr:last-child{border-bottom:0}
.vg-pz .pz-tr>span{padding:10px 12px;font-size:12px;color:#444D5A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-pz .pz-th{background:rgba(0,0,0,.03)}
.vg-pz .pz-th>span{font:700 10px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.5px}
.vg-pz .pz-tr .m{font:700 12px/1.2 ui-monospace,Menlo,monospace;color:#0F1A2B}
.vg-pz .pz-tr .v{font:700 12px/1.2 ui-monospace,Menlo,monospace;color:#626976}
.vg-pz .pz-tr .v.neg{color:#FB7185}
.vg-pz .st{font-style:normal;padding:2px 7px;border-radius:5px;background:rgba(0,0,0,.04);color:#626976;font:800 9px/1.3 "Inter",sans-serif;text-transform:uppercase;letter-spacing:.5px}
.vg-pz .st.op{color:#34D399}
.vg-pz .pz-tr .bt{display:flex;justify-content:flex-end;gap:5px;padding:8px 12px}
.vg-pz .pz-tr .bt .pz-b{padding:5px 9px;border-radius:6px}
.vg-pz .pz-tr .bt .pz-b .ic{width:10px;height:10px}
/* the overlay and the modal, kept to the screen with its own scroll (so Tax Breakdown sits below the fold) */
.vg-pz .pz-ov{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-start;justify-content:center;padding:20px;
  background:rgba(15,23,42,.55);-webkit-backdrop-filter:blur(10px) saturate(.7);backdrop-filter:blur(10px) saturate(.7)}
.vg-pz .pz-modal{width:100%;max-width:540px;height:660px;overflow:hidden;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.vg-pz .pz-mh{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid rgba(0,0,0,.06)}
.vg-pz .pz-mh b{display:block;font:800 15px/1.25 "Plus Jakarta Sans",sans-serif}
.vg-pz .pz-mh small{display:block;font-size:11px;color:#626976;margin-top:2px}
.vg-pz .pz-mx{width:28px;height:28px;border-radius:7px;border:1px solid rgba(0,0,0,.06);display:grid;place-items:center;color:#626976}
.vg-pz .pz-mx .ic{width:13px;height:13px}
.vg-pz .pz-mb{padding:20px}
.vg-pz .pz-sec{margin-bottom:14px}
.vg-pz .pz-sec>small{display:block;font:800 9px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.vg-pz .pz-box{padding:4px;border-radius:8px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06)}
.vg-pz .pz-cut .pz-box{height:60px}
.vg-pz .pz-box p{display:flex;justify-content:space-between;align-items:center;margin:0;padding:6px 10px;font-size:11px}
.vg-pz .pz-box p span{color:#444D5A;font-weight:500}
.vg-pz .pz-box p b{color:#444D5A;font-weight:600;font-size:11px}
.vg-pz .pz-box p.bd span{color:#0F1A2B;font-weight:700}
.vg-pz .pz-box p.bd b{color:#0F1A2B;font-weight:800;font-size:13px}
.vg-pz .pz-box p.neg b{color:#FB7185}
.vg-pz .pz-net{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:10px;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(16,185,129,.08),transparent);border:1px solid rgba(16,185,129,.25)}
.vg-pz .pz-net span{font:800 12px/1.2 "Inter",sans-serif;color:#34D399;letter-spacing:.4px}
.vg-pz .pz-net b{font:800 20px/1.2 "SF Mono",ui-monospace,Menlo,monospace;color:#34D399}

/* once, as it comes into view: the page dims, the report rises, its sections land, the variance shows last */
.motion .shot:not(.in) .vg-pz .pz-ov{background:rgba(15,23,42,0);-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1)}
.motion .shot:not(.in) .vg-pz .pz-modal{opacity:0;transform:translateY(26px)}
.motion .shot:not(.in) .vg-pz .pz-sec,.motion .shot:not(.in) .vg-pz .pz-net{opacity:0}
.motion .shot.in .vg-pz .pz-ov{transition:background .7s ease .15s,-webkit-backdrop-filter .7s ease .15s,backdrop-filter .7s ease .15s}
.motion .shot.in .vg-pz .pz-modal{transition:opacity .45s ease .45s,transform .7s cubic-bezier(.2,.7,.2,1) .45s}
.motion .shot.in .vg-pz .pz-sec,.motion .shot.in .vg-pz .pz-net{animation:pzIn .45s cubic-bezier(.2,.7,.2,1) calc(var(--z) * 140ms + 850ms) both}
.motion .shot.in .vg-pz .pz-var{animation:pzVar 1.4s ease 1.8s both}
@keyframes pzIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pzVar{0%{background:rgba(244,63,94,0)}30%{background:rgba(244,63,94,.10)}100%{background:rgba(244,63,94,0)}}
.vg-pz .pz-var{border-radius:6px}

/* ── the page ───────────────────────────────────────────────────────────────────────────────── */
.pos-none .entry-empty{min-height:0;height:auto;flex:1;padding:22px 24px;background:#fff}
.pos-none .entry-empty b{font-size:17px}
.pos-none .entry-empty span{font-size:14.5px;line-height:1.55}