/* Tamra site v2 — PDF module page (modules/pdf.html).
   The workspace drawn from src/modules/pdf/PdfWorkspace.jsx, the viewer from src/components/DocViewer.jsx with
   viewer/ViewerChrome.jsx (pill groups, 30px buttons, the accent for the tool in use), viewer/PageRail.jsx and
   viewer/markupIcons.jsx, and Split into bills from src/modules/pdf/SplitIntoBills.jsx. Quiet theme.
   Every selector is scoped to a mock-up (.vg-pw, .vg-pwb) or to this page (.pw-…). */

.vg-pw,.vg-pwb{isolation:isolate}                /* their layers stay under the tour's spotlight */

/* ── the workspace: the viewer and, docked beside it, the Letterhead panel ────────────────────────── */
.vg-pw .page{background:#fff}
.vg-pw .pw-work{position:absolute;left:30px;right:16px;top:14px;bottom:14px;display:flex;gap:12px}
.vg-pw .pw-view{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.08);border-radius:12px;overflow:hidden;background:#fff}

/* the toolbar: the title on the left, quiet pill groups on the right */
.vg-pw .pw-bar{display:flex;align-items:center;gap:8px;padding:9px 12px}
:is(.vg-pw,.vg-pwb) .pw-g{display:inline-flex;align-items:center;gap:1px;padding:2px;border-radius:999px;background:rgba(0,0,0,.055);flex:none}
:is(.vg-pw,.vg-pwb) .pw-b{height:30px;min-width:32px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:none;color:#444D5A}
:is(.vg-pw,.vg-pwb) .pw-b .ic{width:16px;height:16px}
:is(.vg-pw,.vg-pwb) .pw-b.cv{min-width:20px;width:20px}
:is(.vg-pw,.vg-pwb) .pw-b.cv .ic{width:13px;height:13px}
:is(.vg-pw,.vg-pwb) .pw-b.lbl{min-width:52px;padding:0 10px;font:600 12.5px/1 "Inter",sans-serif;color:#0F1A2B}
:is(.vg-pw,.vg-pwb) .pw-b.r{width:34px;height:34px;background:rgba(0,0,0,.055)}
:is(.vg-pw,.vg-pwb) .pw-b.r.w{width:32px}
:is(.vg-pw,.vg-pwb) .pw-b.r .ic{width:17px;height:17px}
:is(.vg-pw,.vg-pwb) .pw-b.on{background:#1E8E5A;color:#fff}
:is(.vg-pw,.vg-pwb) .pw-t{flex:1;min-width:0;margin-left:2px}
:is(.vg-pw,.vg-pwb) .pw-t b{display:block;font:700 13.5px/1.3 "Inter",sans-serif;color:#0F1A2B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.vg-pw,.vg-pwb) .pw-t small{display:flex;align-items:center;font-size:11.5px;line-height:1.35;color:#626976;white-space:nowrap}
.vg-pw .pw-n{display:inline-grid}
.vg-pw .pw-n>span{grid-area:1/1;opacity:0}
.vg-pw .pw-n .n3{opacity:1}
:is(.vg-pw,.vg-pwb) .pw-chip{display:inline-flex;align-items:center;gap:8px;flex:none;padding:5px 15px 5px 6px;border-radius:9px;border:1px solid #D6DEE8;background:#fff;
  font:600 14px/1.2 "Inter",sans-serif;color:#0F1A2B;white-space:nowrap}
:is(.vg-pw,.vg-pwb) .pw-chip i{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#0F1A2B;color:#fff;font-style:normal}
:is(.vg-pw,.vg-pwb) .pw-chip .ic{width:15px;height:15px}

/* the markup row, while marking up */
.vg-pw .pw-mk{display:flex;align-items:center;justify-content:center;gap:3px;padding:0 12px 9px;border-bottom:1px solid rgba(0,0,0,.08)}
.vg-pw .pw-mk .pw-b.ct{padding:0 5px 0 8px}
.vg-pw .pw-mk .cr{width:12px!important;height:12px!important;opacity:.65}
.vg-pw .pw-mk .dot{width:12px;height:12px;border-radius:50%;background:#DC2626;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.vg-pw .pw-dv{width:1px;height:18px;margin:0 5px;background:rgba(0,0,0,.12);flex:none}
.vg-pw .pw-pw{position:relative;display:inline-flex}
.vg-pw .pw-pop{position:absolute;z-index:8;left:0;top:calc(100% + 8px);width:318px;padding:12px;border-radius:12px;background:#fff;border:1px solid #D6DEE8;
  box-shadow:0 18px 44px rgba(15,26,43,.16);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
.vg-pw .pw-pop .pk{margin:12px 2px 7px;font:600 11px/1 "Inter",sans-serif;color:#626976}
.vg-pw .pw-pop .pk:first-child{margin-top:0}
.vg-pw .pw-cs{display:inline-flex;padding:6px 12px;border-radius:10px;border:1px solid #D6DEE8;background:#fff}
.vg-pw .pw-cs svg{width:40px;height:40px;display:block}
.vg-pw .pw-st{display:flex;flex-wrap:wrap;gap:6px}
.vg-pw .pw-st span{padding:5px 10px;border-radius:6px;border:1.5px solid color-mix(in srgb,var(--c) 40%,transparent);color:var(--c);font:800 10px/1.2 "Inter",sans-serif;letter-spacing:1px}
.vg-pw .pw-st.rd span{border-radius:20px;font-size:9px}

/* the pages: the rail, and the canvas the page sits on */
.vg-pw .pw-body{position:relative;flex:1;min-height:0;display:flex}
.vg-pw .pw-rail{position:relative;width:172px;flex:none;display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.08);background:#fff}
.vg-pw .pr-h{display:flex;align-items:center;gap:6px;padding:10px 8px 8px 12px}
.vg-pw .pr-h b{flex:1;font:700 12px/1 "Inter",sans-serif;color:#0F1A2B}
.vg-pw .pr-sb{width:28px;height:28px;flex:none;border-radius:7px;border:1px solid #D6DEE8;display:grid;place-items:center;color:#444D5A}
.vg-pw .pr-sb .ic{width:14px;height:14px}
.vg-pw .pr-list{position:relative;flex:1;min-height:0;overflow:hidden;padding:2px 0 10px}
.vg-pw .pr-th{display:flex;flex-direction:column;align-items:center;gap:7px;padding:7px 0}
.vg-pw .pr-th em{padding:1px 7px;border-radius:9px;font:600 10.5px/1.3 "Inter",sans-serif;color:#626976;font-variant-numeric:tabular-nums}
.vg-pw .pr-th.cur em{color:#0F1A2B}
.vg-pw .pr-pg{position:relative;display:block;width:107px;height:152px;padding-top:30px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);overflow:hidden}
.vg-pw .pr-th.cur .pr-pg{outline:1px solid rgba(0,0,0,.45);outline-offset:3px}
.vg-pw .pr-pg .lh{position:absolute;left:10px;right:10px;top:7px;height:13px;border-bottom:1.5px solid #1E8E5A}
.vg-pw .pr-pg .lh::before{content:"";position:absolute;left:0;top:1px;width:9px;height:9px;border-radius:2px;background:#1E8E5A}
.vg-pw .pr-pg .lh::after{content:"";position:absolute;left:12px;top:3px;width:26px;height:4px;border-radius:1px;background:#0F1A2B}
.vg-pw .pr-pg .l,.vg-pw .pr-pg .tb,.vg-pw .pr-pg .ps,.vg-pw .pr-pg .sg,.vg-pw .pr-pg .hand{display:block;position:relative}
.vg-pw .pr-pg .l{height:2.5px;margin:0 0 4px 14px;border-radius:1px;background:#C9CED6}
.vg-pw .pr-pg .l.b{height:3.5px;background:#6B7280}
.vg-pw .pr-pg .l.r{margin-left:auto;margin-right:14px}
.vg-pw .pr-pg .w30{width:30%}.vg-pw .pr-pg .w35{width:35%}.vg-pw .pr-pg .w40{width:40%}.vg-pw .pr-pg .w50{width:50%}.vg-pw .pr-pg .w60{width:60%}.vg-pw .pr-pg .w70{width:70%}
.vg-pw .pr-pg .tb{height:14px;margin:6px 14px 6px;border-top:1.5px solid #6B7280;background:repeating-linear-gradient(#fff 0 4px,#E3E6EA 4px 5.5px)}
.vg-pw .pr-pg .tb.sm{height:9px}
.vg-pw .pr-pg .ps{position:absolute;left:30px;top:84px;width:20px;height:16px;border:1.5px solid #059669;border-radius:2px;transform:rotate(-15deg);opacity:.85}
.vg-pw .pr-pg .sg{position:absolute;left:21px;top:110px;width:22px;height:6px;border-bottom:1.2px solid #1E3A5F;border-radius:0 0 40% 40%}
.vg-pw .pr-pg .scan{position:absolute;inset:26px 6px 8px;padding-top:8px;background:#F4F4F1;transform:rotate(-.8deg)}
.vg-pw .pr-pg .hand{width:26px;height:6px;margin:10px 0 0 60px;border-bottom:1.2px solid #44546A;border-radius:0 0 50% 50%}
.vg-pw .pr-drop{position:absolute;left:14px;right:14px;top:184px;height:2px;border-radius:2px;background:#1E8E5A;opacity:0}
.vg-pw .pr-ghost{position:absolute;z-index:3;left:96px;top:226px;padding:4px 10px;border-radius:8px;background:#0F1A2B;color:#fff;font:600 11.5px/1.3 "Inter",sans-serif;
  box-shadow:0 6px 18px rgba(0,0,0,.25);white-space:nowrap;opacity:0}
.vg-pw .pr-f{display:flex;justify-content:center;gap:4px;padding:8px 6px;border-top:1px solid rgba(0,0,0,.08)}

.vg-pw .pw-cv{position:relative;flex:1;min-width:0;overflow:hidden;background:#E3E6EA}
.vg-pw .pw-pgw{position:absolute;left:50%;top:24px;width:655px;height:926px;margin-left:-327.5px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.16),0 6px 20px rgba(0,0,0,.14)}
.vg-pw .pw-a4{position:absolute;left:0;top:0;width:595.28px;height:841.89px;transform:scale(1.1);transform-origin:0 0;overflow:hidden;
  font-family:Helvetica,Arial,sans-serif;color:#111827;font-variant-numeric:normal}

/* the invoice as it was opened (in points: an A4 is 595 × 842) */
.vg-pw .pw-doc{position:absolute;left:0;top:0;width:595.28px;height:841.89px;transform-origin:0 0;transform:translate(75.1px,127.6px) scale(.747)}
.vg-pw .pw-doc>*{position:absolute}
.vg-pw .iv-t{left:44px;top:46px;font-size:20px;font-weight:700;letter-spacing:.04em}
.vg-pw .iv-no{left:371px;top:44px;width:180px;display:grid;grid-template-columns:auto auto;justify-content:end;column-gap:14px;row-gap:3px;font-size:8.5px;text-align:right}
.vg-pw .iv-no b{grid-column:1/-1;font-size:13px;margin-bottom:3px}
.vg-pw .iv-no span{color:#6B7280}
.vg-pw .iv-from{left:44px;top:80px;font-size:7.5px;color:#6B7280}
.vg-pw .iv-to{left:44px;top:106px;display:flex;flex-direction:column;gap:2px;font-size:8.5px;color:#374151}
.vg-pw .iv-to span,.vg-pw .iv-pay span{font-size:7px;font-weight:700;letter-spacing:.08em;color:#6B7280;margin-bottom:2px}
.vg-pw .iv-to b{font-size:10.5px;color:#111827}
.vg-pw .iv-tb{left:44px;top:182px;width:507px;font-size:9px}
.vg-pw .iv-tb .h,.vg-pw .iv-tb .r{display:grid;grid-template-columns:1fr 46px 70px 40px 84px;gap:8px;align-items:start}
.vg-pw .iv-tb .h{padding-bottom:5px;border-bottom:1px solid #111827;font-size:7.5px;font-weight:700;color:#4B5563}
.vg-pw .iv-tb .r{padding:7px 0 8px;border-bottom:.6px solid #D1D5DB}
.vg-pw .iv-tb span:not(:first-child){text-align:right}
.vg-pw .iv-tb small{display:block;margin-top:2px;font-size:7px;color:#6B7280}
.vg-pw .iv-tot{left:331px;top:250px;width:220px;font-size:9px}
.vg-pw .iv-tot div{display:flex;justify-content:space-between;padding:3px 0}
.vg-pw .iv-tot .g{margin-top:3px;padding-top:6px;border-top:1.2px solid #111827;font-size:10.5px;font-weight:700}
.vg-pw .iv-pay{left:44px;top:360px;display:flex;flex-direction:column;gap:2px;font-size:8.5px;color:#374151}
.vg-pw .iv-ty{left:44px;top:410px;font-size:8px;color:#6B7280}

/* the letterhead: header and footer artwork, laid over the page with Multiply */
.vg-pw .pw-lhd{position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none}
.vg-pw .pw-lhd>*{position:absolute}
.vg-pw .lh-mk{left:56px;top:38px;width:30px;height:30px;border-radius:7px;background:#1E8E5A;color:#fff;display:grid;place-items:center}
.vg-pw .lh-mk svg{width:21px;height:21px}
.vg-pw .lh-nm{left:96px;top:37px;font:800 19px/1.05 "Plus Jakarta Sans",sans-serif;letter-spacing:-.01em;color:#0F1A2B}
.vg-pw .lh-nm small{display:block;margin-top:3px;font:700 6.5px/1 Helvetica,Arial,sans-serif;letter-spacing:.3em;color:#1E8E5A}
.vg-pw .lh-ad{left:360px;top:39px;width:179px;text-align:right;font-size:7.5px;line-height:1.55;color:#4B5563}
.vg-pw .lh-r1{left:56px;right:56px;top:86px;height:1.6px;background:#1E8E5A}
.vg-pw .lh-r2{left:56px;right:56px;top:90px;height:.6px;background:#C9CED6}
.vg-pw .lh-ft{left:56px;right:56px;bottom:34px;padding-top:7px;border-top:.6px solid #C9CED6;text-align:center;font-size:7px;color:#6B7280}

/* the marks (in points, on the page): placed on top of the letterhead and the content */
.vg-pw .mk-paid{position:absolute;left:150px;top:284px;width:119px;height:97px;overflow:visible}
.vg-pw .mk-seal{position:absolute;left:330px;top:398px;width:94px;height:94px}
.vg-pw .mk-sig{position:absolute;left:112px;top:446px;width:118px;display:flex;flex-direction:column;align-items:center}
.vg-pw .mk-sig svg{width:118px;height:39px;display:block}
.vg-pw .mk-sig small{margin-top:1px;font-size:7px;color:#1E3A5F}
.vg-pw .mk-red{position:absolute;left:104px;top:418px;width:121px;height:10px;border-radius:1px;background:rgba(11,11,12,.82);opacity:0}

/* the hint (a tool in use) and the toast (a mark placed) */
.vg-pw .pw-hint{position:absolute;z-index:5;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;border-radius:999px;
  background:#0F1A2B;color:#fff;font:600 12.5px/1.3 "Inter",sans-serif;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0}
.vg-pw .pw-hint u{padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.16);text-decoration:none;font-size:12px;font-weight:700}
.vg-pw .pw-toast{position:absolute;z-index:9;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:11px;
  background:#fff;border:1px solid rgba(0,0,0,.14);box-shadow:0 12px 32px rgba(0,0,0,.18);font:400 12.5px/1.5 "Inter",sans-serif;color:#0F1A2B;white-space:nowrap;opacity:0}
.vg-pw .pw-toast .ic{width:15px;height:15px;color:#10B981}

/* the Letterhead panel */
.vg-pw .pw-lh{width:300px;flex:none;padding:14px 16px 6px;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:#fff;overflow:hidden}
.vg-pw .lp-h{display:flex;align-items:flex-start;gap:8px;margin-bottom:4px}
.vg-pw .lp-h>div{flex:1;min-width:0}
.vg-pw .lp-h b{display:block;font:800 15px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-pw .lp-h .sw{margin-top:2px;font-size:12px;color:#626976}
.vg-pw .lp-x{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;background:rgba(0,0,0,.06);color:#444D5A}
.vg-pw .lp-x .ic{width:14px;height:14px}
.vg-pw .lp-a{display:flex;align-items:center;gap:14px;padding:10px 0 12px}
.vg-pw .lp-u{display:inline-flex;align-items:center;gap:5px;font:600 12.5px/1 "Inter",sans-serif;color:#444D5A}
.vg-pw .lp-u .ic{width:13px;height:13px}
.vg-pw .lp-s{padding:12px 0;border-top:1px solid rgba(0,0,0,.07)}
.vg-pw .lp-k{margin-bottom:8px;font:800 10.5px/1 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#626976}
.vg-pw .lp-c{display:flex;gap:6px}
.vg-pw .lp-c span{flex:1;min-width:0;padding:8px 10px;border-radius:10px;border:1px solid #D6DEE8}
.vg-pw .lp-c span.on{border-color:#0F1A2B;background:rgba(0,0,0,.05)}
.vg-pw .lp-c b{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#0F1A2B}
.vg-pw .lp-c b .ic{width:12px;height:12px}
.vg-pw .lp-c small{display:block;margin-top:2px;font-size:11px;line-height:1.35;color:#626976}
.vg-pw .lp-st{display:flex;align-items:center;gap:6px;margin-top:6px}
.vg-pw .lp-c+.lp-st{margin-top:12px}
.vg-pw .lp-st>span{flex:1;min-width:0;font-size:12px;color:#444D5A}
.vg-pw .lp-st i{width:28px;height:28px;flex:none;border-radius:8px;border:1px solid #D6DEE8;display:grid;place-items:center;color:#444D5A}
.vg-pw .lp-st i .ic{width:13px;height:13px}
.vg-pw .lp-st em{position:relative;width:74px;height:28px;flex:none;padding:0 30px 0 6px;border-radius:8px;border:1px solid #D6DEE8;display:flex;align-items:center;justify-content:flex-end;
  font-size:12.5px;color:#0F1A2B;font-variant-numeric:tabular-nums}
.vg-pw .lp-st u{position:absolute;right:8px;top:0;height:26px;display:flex;align-items:center;font-size:11px;text-decoration:none;color:#626976}
.vg-pw .lp-n{margin-top:8px;font-size:11px;line-height:1.45;color:#626976}
.vg-pw .lp-f{padding:10px 0;border-top:1px solid rgba(0,0,0,.07);font-size:11px;line-height:1.45;color:#626976}
.vg-pw .sw{display:grid}
.vg-pw .sw>span{grid-area:1/1}
.vg-pw .sw .n1{opacity:0}
.vg-pw .lp-a .sw{display:inline-grid}
.vg-pw .lp-a .sw>span{justify-self:start}

/* Reduce size (tour) */
.vg-pw .pw-scrim{position:absolute;z-index:20;inset:0;background:rgba(15,23,42,.42);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.vg-pw .pw-modal{position:absolute;z-index:21;left:50%;top:92px;width:520px;margin-left:-260px;border-radius:16px;background:#fff;box-shadow:0 24px 64px rgba(15,23,42,.28);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s .4s}
.vg-pw .md-h{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.07)}
.vg-pw .md-h>div{flex:1}
.vg-pw .md-h b{display:block;font:700 17px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-pw .md-h span{display:block;margin-top:3px;font-size:12px;color:#626976}
.vg-pw .md-lv{display:flex;align-items:center;gap:12px;margin:8px 20px 0;padding:10px 12px;border-radius:10px;border:1px solid #D6DEE8}
.vg-pw .md-lv:first-of-type{margin-top:20px}
.vg-pw .md-lv.on{border-color:#0F1A2B;background:rgba(0,0,0,.05)}
.vg-pw .md-lv>span{flex:1;min-width:0}
.vg-pw .md-lv b{display:block;font-size:13px;font-weight:700;color:#0F1A2B}
.vg-pw .md-lv small{display:block;margin-top:2px;font-size:11.5px;color:#626976}
.vg-pw .md-lv em{font-size:12px;color:#444D5A;font-variant-numeric:tabular-nums}
.vg-pw .md-lv .ic{width:14px;height:14px;color:#0F1A2B}
.vg-pw .md-r{margin:14px 20px 0;padding:12px 14px;border-radius:10px;background:rgba(0,0,0,.04);font-size:13px;line-height:1.5;color:#0F1A2B}
.vg-pw .md-r span{color:#626976}
.vg-pw .md-n{margin:8px 20px 18px;font-size:11.5px;line-height:1.45;color:#626976}
.vg-pw .md-f{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:12px 20px;background:#FAFBFC;border-top:1px solid rgba(0,0,0,.06)}
.vg-pw .md-dl{font:600 12.5px/1 "Inter",sans-serif;color:#444D5A}

/* ── the tour's states ──────────────────────────────────────────────────────────────────────────── */
.vg-pw[data-state=arrange] .pr-th.mv{opacity:.35}
.vg-pw[data-state=arrange] .pr-th.mv .pr-pg{outline:2px solid #1E8E5A;outline-offset:3px}
.vg-pw[data-state=arrange] .pr-th.mv em{background:#1E8E5A;color:#fff}
.vg-pw[data-state=arrange] .pr-drop,.vg-pw[data-state=arrange] .pr-ghost{opacity:1;transition:opacity .3s ease .2s}
.vg-pw[data-state=stamps] .t-stamp{background:#1E8E5A;color:#fff}
.vg-pw[data-state=stamps] .pw-pop{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease .1s,transform .35s ease .1s,visibility 0s}
.vg-pw[data-state=redact] .t-red{background:#1E8E5A;color:#fff}
.vg-pw[data-state=redact] .mk-red{opacity:1;transition:opacity .35s ease .25s}
.vg-pw[data-state=redact] .pw-hint{opacity:1;transition:opacity .35s ease .1s}
.vg-pw[data-state=shrink] .pw-scrim{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.vg-pw[data-state=shrink] .pw-modal{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease .05s,transform .45s cubic-bezier(.2,.7,.2,1) .05s,visibility 0s}

/* ── the hero plays once: the letterhead goes on, PAID lands, the company stamp and Sara's signature follow ── */
.motion .m-shot:not(.in) .vg-pw .pw-doc{transform:none}
.motion .m-shot:not(.in) .vg-pw .pw-lhd,.motion .m-shot:not(.in) .vg-pw .pr-pg .lh{opacity:0}
.motion .m-shot:not(.in) .vg-pw .mk-paid,.motion .m-shot:not(.in) .vg-pw .mk-seal,.motion .m-shot:not(.in) .vg-pw .mk-sig,
.motion .m-shot:not(.in) .vg-pw .pr-pg .ps,.motion .m-shot:not(.in) .vg-pw .pr-pg .sg{opacity:0}
.motion .m-shot:not(.in) .vg-pw .sw .n1{opacity:1}
.motion .m-shot:not(.in) .vg-pw .sw .n2{opacity:0}
.motion .m-shot:not(.in) .vg-pw .lp-u{opacity:0}
.motion .m-shot:not(.in) .vg-pw .pw-n .n3{opacity:0}
.motion .m-shot:not(.in) .vg-pw .pw-n .n0{opacity:1}
.motion .m-shot.in .vg-pw .pw-doc{animation:pwFit 1s cubic-bezier(.45,0,.2,1) .75s both}
.motion .m-shot.in .vg-pw .pw-lhd{animation:pwIn .7s ease .75s both}
.motion .m-shot.in .vg-pw .pr-pg .lh{animation:pwIn .5s ease 1.1s both}
.motion .m-shot.in .vg-pw .sw .n1{animation:pwOut .25s ease .65s both}
.motion .m-shot.in .vg-pw .sw .n2{animation:pwIn .3s ease .7s both}
.motion .m-shot.in .vg-pw .lp-u{animation:pwIn .3s ease .8s both}
.motion .m-shot.in .vg-pw .t-stamp{animation:pwTool 1.25s ease 1.55s both}
.motion .m-shot.in .vg-pw .t-sign{animation:pwTool .7s ease 2.85s both}
.motion .m-shot.in .vg-pw .mk-paid{animation:pwLand .55s cubic-bezier(.2,.7,.2,1) 2.05s both}
.motion .m-shot.in .vg-pw .pr-pg .ps{animation:pwIn .3s ease 2.3s both}
.motion .m-shot.in .vg-pw .mk-seal{animation:pwPop .45s cubic-bezier(.2,.7,.2,1) 2.6s both}
.motion .m-shot.in .vg-pw .mk-sig{animation:pwWipe .75s cubic-bezier(.45,0,.3,1) 3.4s both}
.motion .m-shot.in .vg-pw .pr-pg .sg{animation:pwIn .3s ease 3.8s both}
.motion .m-shot.in .vg-pw .pw-n .n0{animation:pwOut .2s ease 2.05s both}
.motion .m-shot.in .vg-pw .pw-n .n1{animation:pwBlip .55s ease 2.05s both}
.motion .m-shot.in .vg-pw .pw-n .n2{animation:pwBlip .8s ease 2.6s both}
.motion .m-shot.in .vg-pw .pw-n .n3{animation:pwIn .2s ease 3.4s both}
.motion .m-shot.in .vg-pw .pw-toast{animation:pwToast 3.6s ease 3.55s both}
@keyframes pwFit{from{transform:none}to{transform:translate(75.1px,127.6px) scale(.747)}}
@keyframes pwIn{from{opacity:0}to{opacity:1}}
@keyframes pwOut{from{opacity:1}to{opacity:0}}
@keyframes pwBlip{0%{opacity:0}10%,90%{opacity:1}100%{opacity:0}}
@keyframes pwTool{0%,100%{background:transparent;color:#444D5A}8%,90%{background:#1E8E5A;color:#fff}}
@keyframes pwLand{0%{opacity:0;transform:scale(1.7)}60%{opacity:1;transform:scale(.94)}100%{opacity:1;transform:none}}
@keyframes pwPop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
@keyframes pwWipe{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes pwToast{0%{opacity:0;transform:translate(-50%,8px)}8%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}

/* ── Split into bills: a scanned batch, cut into bills and read one after another ───────────────────── */
.vg-pwb{background:#fff;display:flex;flex-direction:column}
.vg-pwb .pb-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid rgba(0,0,0,.08)}
.vg-pwb .pb-steps{display:flex;align-items:center;padding:16px 22px 14px;border-bottom:1px solid rgba(0,0,0,.08)}
.vg-pwb .pb-back{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 9px;margin-right:18px;border-radius:999px;border:1px solid #D6DEE8;font:700 12.5px/1 "Inter",sans-serif;color:#0F1A2B;flex:none}
.vg-pwb .pb-back .ic{width:15px;height:15px}
.vg-pwb .pb-step{display:flex;align-items:center;gap:10px;flex:none}
.vg-pwb .pb-step b{display:block;font-size:12.5px;font-weight:800;color:#0F1A2B}
.vg-pwb .pb-step small{display:block;margin-top:1px;font-size:11px;color:#626976}
.vg-pwb .pb-c{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.07)}
.vg-pwb .pb-c .ic{width:16px;height:16px}
.vg-pwb .pb-c.ok{background:#16A34A}
.vg-pwb .pb-c.ok .ic{width:17px;height:17px}
.vg-pwb .pb-c.now{background:#1E8E5A;box-shadow:0 0 0 5px rgba(0,0,0,.06)}
.vg-pwb .pb-c.nx{color:#626976}
.vg-pwb .pb-c>span{position:absolute;inset:0;display:grid;place-items:center}
.vg-pwb .s2 .pb-c.now{background:#16A34A;box-shadow:none}
.vg-pwb .s2 .pb-c .a{opacity:0}
.vg-pwb .s3 .pb-c.nx{background:#1E8E5A;color:#fff;box-shadow:0 0 0 5px rgba(0,0,0,.06)}
.vg-pwb .pb-line{flex:1;min-width:30px;height:2px;margin:0 14px;border-radius:2px;background:rgba(0,0,0,.1);overflow:hidden}
.vg-pwb .pb-line>i{display:block;height:100%;width:100%;background:#16A34A}
.vg-pwb .sw,.vg-pwb .pb-step .sw{display:grid}
.vg-pwb .sw>span{grid-area:1/1}
.vg-pwb .sw .n1{opacity:0}
.vg-pwb .pb-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start;padding:18px;background:rgba(0,0,0,.05)}
.vg-pwb .pb-card{padding:12px;border-radius:12px;border:1px solid rgba(0,0,0,.1);background:#fff}
.vg-pwb .pb-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:11.5px;color:#626976}
.vg-pwb .pb-tag{padding:2px 6px;border-radius:6px;background:#0F1A2B;color:#fff;font-size:10px;font-weight:800}
.vg-pwb .pb-h b{font-size:12.5px;font-weight:800;color:#0F1A2B}
.vg-pwb .pb-h u{margin-left:auto;text-decoration:none;font-weight:700;color:#444D5A}
.vg-pwb .pb-pages{display:flex;align-items:center;gap:6px}
.vg-pwb .pb-th{position:relative;display:block;width:74px;height:96px;padding:22px 0 0;border:1px solid rgba(0,0,0,.12);border-radius:3px;background:#F6F5F1;box-shadow:0 1px 3px rgba(0,0,0,.12);overflow:hidden}
.vg-pwb .pb-th i{display:block}
.vg-pwb .pb-th .hd{position:absolute;left:7px;top:7px;width:30px;height:8px;border-radius:1px;background:#8A8F98}
.vg-pwb .t2 .hd{width:24px;height:10px;border-radius:50%;background:#9AA0A8}
.vg-pwb .t3 .hd{width:38px;height:6px;background:#7E848D}
.vg-pwb .pb-th .l{height:2.5px;margin:0 0 4px 7px;border-radius:1px;background:#B8BCC3}
.vg-pwb .pb-th .l.r{margin-left:auto;margin-right:7px}
.vg-pwb .pb-th .w30{width:30%}.vg-pwb .pb-th .w35{width:35%}.vg-pwb .pb-th .w40{width:40%}.vg-pwb .pb-th .w50{width:50%}.vg-pwb .pb-th .w60{width:60%}
.vg-pwb .pb-th .tb{height:16px;margin:5px 7px;border-top:1.5px solid #7E848D;background:repeating-linear-gradient(transparent 0 4px,#D9DBDF 4px 5.5px)}
.vg-pwb .pb-th .tb.lg{height:30px}
.vg-pwb .pb-th .tb.sm{height:10px}
.vg-pwb .pb-th em{position:absolute;right:5px;bottom:3px;padding:0 3px;border-radius:4px;background:rgba(255,255,255,.85);font-size:9px;font-weight:800;color:#626976}
.vg-pwb .pb-cut{width:24px;height:24px;flex:none;border-radius:50%;border:1px dashed rgba(0,0,0,.35);display:grid;place-items:center;color:#626976;background:#fff}
.vg-pwb .pb-cut .ic{width:12px;height:12px}
.vg-pwb .pb-st{display:grid;margin-top:10px;font-size:12px;font-weight:700}
.vg-pwb .pb-st>span{grid-area:1/1;display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border-radius:9px;white-space:nowrap;overflow:hidden}
.vg-pwb .pb-st .w{background:rgba(0,0,0,.035);color:#626976;opacity:0}
.vg-pwb .pb-st .rd{align-items:flex-start;background:rgba(0,0,0,.05);color:#1E8E5A;opacity:0}
.vg-pwb .pb-st .rd>span{flex:1}
.vg-pwb .pb-st .dn{background:rgba(22,163,74,.08);color:#15803D}
.vg-pwb .pb-st .d{width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.2);color:#fff;font-style:normal;font-size:11px;font-weight:900}
.vg-pwb .pb-st .d.ok{background:#16A34A}
.vg-pwb .pb-st .d .ic{width:12px;height:12px}
.vg-pwb .spin{width:16px;height:16px;flex:none;border-radius:50%;border:2.5px solid rgba(0,0,0,.12);border-top-color:#1E8E5A}
.vg-pwb .bar{position:relative;display:block;height:4px;margin-top:6px;border-radius:2px;background:rgba(0,0,0,.08);overflow:hidden}
.vg-pwb .bar>i{position:absolute;top:0;bottom:0;left:0;width:38%;border-radius:2px;background:#1E8E5A}
.vg-pwb .pb-sup{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:11.5px;color:#444D5A}
.vg-pwb .pb-sup strong{color:#0F1A2B}
.vg-pwb .pb-sup span{color:#626976}
.vg-pwb .pill{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:999px;border:1px solid #D6DEE8;font:700 11.5px/1.2 "Inter",sans-serif;font-style:normal;color:#0F1A2B;background:#fff}
.vg-pwb .pill.dk{border-color:#0F1A2B;background:#0F1A2B;color:#fff}
.vg-pwb .pill .ic{width:12px;height:12px;opacity:.7}
.vg-pwb .pb-foot{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid rgba(0,0,0,.08)}
.vg-pwb .pb-ft{flex:1;min-width:0}
.vg-pwb .pb-ft b{font-size:12.5px;font-weight:800;color:#0F1A2B}
.vg-pwb .pb-ft .bar{display:none}
.vg-pwb .stop{display:none}
@media (max-width:760px){.vg-pwb .pb-ft{flex:none}}      /* phones see the left 720px: the button comes in beside the line */

/* plays once: each bill is read in turn, then the button opens them in Purchase */
.motion .shot:not(.in) .vg-pwb .pb-st .dn,.motion .shot:not(.in) .vg-pwb .pb-sup{opacity:0}
.motion .shot:not(.in) .vg-pwb .pb-st .w{opacity:1}
.motion .shot:not(.in) .vg-pwb .pb-card[style*="--k:0"] .pb-st .rd{opacity:1}
.motion .shot:not(.in) .vg-pwb .sw .n1.a,.motion .shot:not(.in) .vg-pwb .sw .t1{opacity:1}
.motion .shot:not(.in) .vg-pwb .sw .n2{opacity:0}
.motion .shot:not(.in) .vg-pwb .pb-line>i{width:0}
.motion .shot:not(.in) .vg-pwb .s2 .pb-c.now{background:#1E8E5A;box-shadow:0 0 0 5px rgba(0,0,0,.06)}
.motion .shot:not(.in) .vg-pwb .s2 .pb-c .a{opacity:1}
.motion .shot:not(.in) .vg-pwb .s2 .pb-c .b{opacity:0}
.motion .shot:not(.in) .vg-pwb .s3 .pb-c.nx{background:rgba(0,0,0,.07);color:#626976;box-shadow:none}
.motion .shot:not(.in) .vg-pwb .s3 b{color:#626976}
.motion .shot:not(.in) .vg-pwb .pb-ft .bar,.motion .shot:not(.in) .vg-pwb .stop{display:block}
.motion .shot:not(.in) .vg-pwb .stop{display:inline-flex}
.motion .shot:not(.in) .vg-pwb .pb-open{opacity:.45}
.motion .shot.in .vg-pwb .pb-ft .bar,.motion .shot.in .vg-pwb .stop{animation:pbGone 3.5s steps(1,end) both}
.motion .shot.in .vg-pwb .pb-ft .bar{display:block}
.motion .shot.in .vg-pwb .stop{display:inline-flex}
.motion .shot.in .vg-pwb .pb-ft .bar>i{animation:pbFill 3.3s linear .2s both}
.motion .shot.in .vg-pwb .pb-st .w{animation:pbOut .25s ease calc(var(--k) * 1.1s + .2s) both}
.motion .shot.in .vg-pwb .pb-st .rd{animation:pbRead 1.1s ease calc(var(--k) * 1.1s + .2s) both}
.motion .shot.in .vg-pwb .pb-st .rd .bar>i{animation:pbSlide 1.1s ease-in-out calc(var(--k) * 1.1s + .2s) both}
.motion .shot.in .vg-pwb .pb-st .rd .spin{animation:pbSpin .8s linear calc(var(--k) * 1.1s + .2s) 2}
.motion .shot.in .vg-pwb .pb-st .dn{animation:pbIn .35s ease calc(var(--k) * 1.1s + 1.2s) both}
.motion .shot.in .vg-pwb .pb-sup{animation:pbIn .35s ease calc(var(--k) * 1.1s + 1.35s) both}
.motion .shot.in .vg-pwb .pb-line.l1>i{animation:pbW 3.3s linear .2s both}
.motion .shot.in .vg-pwb .pb-line.l2>i{animation:pbW .4s ease 3.6s both}
.motion .shot.in .vg-pwb .s2 .pb-c.now{animation:pbDone .3s ease 3.5s both}
.motion .shot.in .vg-pwb .s2 .pb-c .a{animation:pbOut .2s ease 3.5s both}
.motion .shot.in .vg-pwb .s2 .pb-c .b{animation:pbIn .25s ease 3.55s both}
.motion .shot.in .vg-pwb .s3 .pb-c.nx{animation:pbNow .3s ease 3.95s both}
.motion .shot.in .vg-pwb .s3 b{animation:pbInk .3s ease 3.95s both}
.motion .shot.in .vg-pwb .sw .t1{animation:pbOut .25s ease 3.5s both}
.motion .shot.in .vg-pwb .sw .n1.a{animation:pbOn 1.1s linear .2s both}
.motion .shot.in .vg-pwb .sw .n1.b{animation:pbOn 1.1s linear 1.3s forwards}
.motion .shot.in .vg-pwb .sw .n1.c{animation:pbOn 1.1s linear 2.4s forwards}
.motion .shot.in .vg-pwb .sw .n2{animation:pbIn .3s ease 3.55s both}
.motion .shot.in .vg-pwb .pb-open{animation:pbOpen .4s ease 3.7s both}
@keyframes pbIn{from{opacity:0}to{opacity:1}}
@keyframes pbOn{0%,99%{opacity:1}100%{opacity:0}}
@keyframes pbOut{from{opacity:1}to{opacity:0}}
@keyframes pbRead{0%{opacity:0}12%,88%{opacity:1}100%{opacity:0}}
@keyframes pbSlide{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@keyframes pbSpin{to{transform:rotate(360deg)}}
@keyframes pbFill{from{width:4%}to{width:100%}}
@keyframes pbW{from{width:0}to{width:100%}}
@keyframes pbGone{0%{visibility:visible}100%{visibility:hidden}}
@keyframes pbDone{from{background:#1E8E5A;box-shadow:0 0 0 5px rgba(0,0,0,.06)}to{background:#16A34A;box-shadow:none}}
@keyframes pbNow{from{background:rgba(0,0,0,.07);color:#626976;box-shadow:none}to{background:#1E8E5A;color:#fff;box-shadow:0 0 0 5px rgba(0,0,0,.06)}}
@keyframes pbInk{from{color:#626976}to{color:#0F1A2B}}
@keyframes pbOpen{from{opacity:.45}to{opacity:1}}