/* Tamra site v2 — the Invoicing module page (modules/invoicing.html). Every rule is scoped under .vg-ic (the mock-ups)
   or .ic- (page layout). Drawn from src/modules/invoices/Invoices.jsx (the editor, its Payments tab, the Pay online strip
   and CreditNoteModal), src/ui/DocActions.jsx, src/modules/collections/Collections.jsx with the src/ui kit (Card, Button,
   Switch), and src/modules/settings/Templates.jsx with src/lib/templatePresets.js and src/lib/templateRenderer.js. */

/* ── the editor: INV-0042 ─────────────────────────────────────────────────────────────────────── */
.vg-ic.ed{isolation:isolate}
.vg-ic.ed .page{padding:0}
.vg-ic .pg{position:absolute;inset:0;padding:17px 26px 0;transition:opacity .45s ease,visibility 0s}
.vg-ic .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.vg-ic .h1{display:flex;align-items:center;gap:10px;font:800 22px/1.25 "Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;color:#0F1A2B;white-space:nowrap}
.vg-ic .who{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:2px;font-size:11px;color:#626976}
.vg-ic .party{line-height:1.35}
.vg-ic .pills{display:flex;align-items:center;gap:6px}
.vg-ic .trace{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08)}
.vg-ic .settle i b{width:100%}
.vg-ic .acts{display:flex;align-items:center;gap:8px}
.vg-ic .slot,.vg-ic .sw,.vg-ic .ist,.vg-ic .pl-t,.vg-ic .pl-m,.vg-ic .pl-act,.vg-ic .pbody,.vg-ic .ll{display:grid;align-items:center}
.vg-ic .slot>*,.vg-ic .sw>*,.vg-ic .ist>*,.vg-ic .pl-t>*,.vg-ic .pl-m>*,.vg-ic .pl-act>*,.vg-ic .pbody>*,.vg-ic .ll>*{grid-area:1/1}
.vg-ic .slot{justify-items:end}
.vg-ic .sw em,.vg-ic .ist em,.vg-ic .ll em{font-style:normal}
.vg-ic .rp{max-width:220px;overflow:hidden}

/* the header fields (read-only once posted) */
.vg-ic .form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;padding:15px 18px;border-radius:14px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06);margin-bottom:14px}
.vg-ic .f{min-width:0}
.vg-ic .s2{grid-column:span 2}
.vg-ic label{display:block;font:600 11px/1.2 "Inter",sans-serif;color:#8892A4;margin-bottom:6px;letter-spacing:.02em}
.vg-ic .inp{display:block;padding:10px 14px;border-radius:10px;background:rgba(0,0,0,.015);border:1px solid rgba(0,0,0,.08);color:#4A5263;
  font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-ic .inp.dim{opacity:.5}
.vg-ic .f small{display:block;font-size:11px;color:#8892A4;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-ic .ist{justify-items:start}
.vg-ic .ist em{display:inline-block;padding:8px 14px;border-radius:8px;font:700 11px/1.2 "Inter",sans-serif;letter-spacing:.05em;text-transform:uppercase}
.vg-ic .i-sent{color:#3B82F6;background:#3B82F620}
.vg-ic .i-paid{color:#10B981;background:#10B98120}

/* Lines | Payments | Other info */
.vg-ic .etabs{display:flex;gap:2px;margin-bottom:12px;border-bottom:1px solid rgba(0,0,0,.07);font:600 12.5px/1 "Plus Jakarta Sans",sans-serif;color:#626976}
.vg-ic .etabs>span{display:inline-flex;align-items:center;gap:6px;padding:9px 16px 10px;margin-bottom:-1px;border-bottom:2px solid transparent}
.vg-ic .etabs .t-p,.vg-ic[data-state=lines] .etabs .t-l{font-weight:800;color:#0F1A2B;border-bottom-color:#1E8E5A}
.vg-ic[data-state=lines] .etabs .t-p{font-weight:600;color:#626976;border-bottom-color:transparent}
.vg-ic .bdg{display:inline-block;box-sizing:border-box;max-width:30px;overflow:hidden;min-width:16px;padding:2px 5px;border-radius:8px;background:rgba(0,0,0,.06);font:800 9.5px/1.2 "Inter",sans-serif;font-style:normal;color:#0F1A2B;text-align:center}

/* the Lines tab: one line, posted */
.vg-ic .tab-l{display:none}
.vg-ic[data-state=lines] .tab-l{display:block}
.vg-ic[data-state=lines] .tab-p{display:none}
.vg-ic .lbox{border-radius:14px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06);overflow:hidden;margin-bottom:12px}
.vg-ic .lb-h{display:flex;justify-content:space-between;align-items:center;white-space:nowrap;padding:11px 18px;border-bottom:1px solid rgba(0,0,0,.06)}
.vg-ic .lb-h>b{font:700 13px/1 "Plus Jakarta Sans",sans-serif}
.vg-ic .plist{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#444D5A}
.vg-ic .plist em{font:700 10.5px/1 "Inter",sans-serif;font-style:normal;color:#626976;text-transform:uppercase;letter-spacing:.04em}
.vg-ic .hint{width:12px;height:12px;color:#9AA3AF}
.vg-ic .pls{display:inline-flex;align-items:center;gap:10px;padding:5px 8px;border-radius:8px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);font-size:11.5px;color:#444D5A}
.vg-ic .pls .ic{width:11px;height:11px;color:#8892A4}
.vg-ic .colsb{width:30px;height:30px;border-radius:8px;border:1px solid #D6DEE8;display:grid;place-items:center;color:#626976}
.vg-ic .colsb .ic{width:14px;height:14px}
.vg-ic .grid{border-radius:12px;border:1px solid #D6DEE8;background:#fff;box-shadow:0 4px 16px rgba(15,23,42,.06);overflow:hidden}
.vg-ic .gh,.vg-ic .gr{display:grid;grid-template-columns:minmax(280px,1fr) 200px 92px 128px 110px 100px 170px 120px}
.vg-ic .gh{background:#EEF2F6;border-bottom:1px solid #D6DEE8}
.vg-ic .gh span{padding:10px;font:800 10.5px/1.2 "Inter",sans-serif;color:#334155;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.vg-ic .gr>span{padding:9px 10px;min-width:0}
.vg-ic .r{text-align:right}
.vg-ic .cin{display:block;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.015);border:1px solid rgba(0,0,0,.06);font-size:12px;line-height:1.25;color:#4A5263;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-ic .unit{display:flex;justify-content:center;align-items:center;padding:6px 4px;border-radius:8px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);font:600 11px/1.3 "Inter",sans-serif;color:#444D5A;margin-top:2px}
.vg-ic .stot b{display:block;padding-top:8px;font:700 13px/1.3 "Inter",sans-serif;color:#0F1A2B}
.vg-ic .stot small{display:block;font-size:9px;color:#8892A4;margin-top:1px}
.vg-ic .efoot{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}
.vg-ic .box{padding:15px 18px;border-radius:14px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06)}
.vg-ic .inp.area{white-space:normal;height:52px;line-height:1.5}
.vg-ic .sum-h{font:700 11px/1 "Inter",sans-serif;color:#8892A4;text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}
.vg-ic .sum-r{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(0,0,0,.04);font-size:13px;color:#8892A4}
.vg-ic .sum-r span:last-child{font:600 13px/1.3 "SF Mono",Monaco,ui-monospace,monospace}
.vg-ic .sum-t{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding:10px 0 0;border-top:2px solid rgba(245,158,11,.25)}
.vg-ic .sum-t span{font:700 12px/1 "Inter",sans-serif;text-transform:uppercase;letter-spacing:.05em}
.vg-ic .sum-t b{font:900 22px/1 "Plus Jakarta Sans",sans-serif;color:#F59E0B;letter-spacing:-.02em}

/* the Payments tab: the settlement strip, Pay online, the payments */
.vg-ic .pstat{display:flex;align-items:flex-end;gap:22px;padding:12px 16px;border:1px solid #D6DEE8;border-radius:12px;margin-bottom:14px}
.vg-ic .psc{min-width:120px}
.vg-ic .psc small{display:block;font:600 10.5px/1.25 "Inter",sans-serif;color:#626976;margin-bottom:2px}
.vg-ic .psc b{font:700 13px/1.3 "Inter",sans-serif;color:#0F1A2B;font-variant-numeric:tabular-nums}
.vg-ic .psc b.big{font:800 16px/1.3 "Plus Jakarta Sans",sans-serif}
.vg-ic .psc .sw{justify-items:start}
.vg-ic .rp2{margin-left:auto}
.vg-ic .plink{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid #D6DEE8;border-radius:12px;margin-bottom:12px;background:#fff}
.vg-ic .pl-ic{width:34px;height:34px;border-radius:9px;background:rgba(0,0,0,.05);display:grid;place-items:center;color:#1E8E5A;flex:none}
.vg-ic .pl-ic .ic{width:17px;height:17px}
.vg-ic .pl-tx{flex:1;min-width:0}
.vg-ic .pl-t{font:700 13px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-ic .pl-m{margin-top:2px;font-size:12px;line-height:1.4;color:#626976}
.vg-ic .pl-t>*,.vg-ic .pl-m>*{white-space:nowrap}
.vg-ic .marks{display:flex;flex-wrap:wrap;gap:5px;align-items:center;max-height:39px;padding-top:9px;overflow:hidden}
.vg-ic .mk{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 9px;border-radius:7px;border:1px solid #D6DEE8;background:rgba(0,0,0,.02)}
.vg-ic .mk svg{display:block;width:28px;height:18px}
.vg-ic .mk svg.mw{width:39px}
.vg-ic .mk.mt{font:700 13px/1 "Inter",sans-serif;letter-spacing:.02em;color:#444D5A}
.vg-ic .pl-act{flex:none;justify-items:end}
.vg-ic .lk{display:flex;gap:6px}
.vg-ic .ll{justify-items:start;font-weight:inherit}
.vg-ic .pempty{padding:22px;text-align:center;color:#626976;font-size:12.5px;border:1px dashed #D6DEE8;border-radius:12px;line-height:1.7;align-self:start}
.vg-ic .pempty u,.vg-ic .ptr u{text-decoration:underline;text-decoration-color:#D6DEE8;text-underline-offset:3px}
.vg-ic .ptab{border:1px solid #D6DEE8;border-radius:12px;overflow:hidden;background:#fff;align-self:start}
.vg-ic .pth,.vg-ic .ptr{display:grid;grid-template-columns:30% 12% 15% 17% 11% 8% 7%}
.vg-ic .pth span{padding:9px 12px;background:#334155;color:#E6ECF2;font:700 10.5px/1.2 "Inter",sans-serif;letter-spacing:.04em}
.vg-ic .ptr span{padding:11px 12px;font-size:12.5px;line-height:1.4;color:#444D5A;white-space:nowrap}
.vg-ic .ptr span:first-child{font-weight:700;color:#0F1A2B}
.vg-ic .ptr b{font-weight:700;color:#0F1A2B;font-variant-numeric:tabular-nums}
.vg-ic .meth{display:inline-flex;align-items:center;gap:7px}
.vg-ic .meth .ic{width:13px;height:13px}

/* ── Collections, in the app's own kit (blue in every theme: src/ui/tokens.js LIGHT) ─────────────── */
.vg-ic .pg-col{padding:22px 28px 0}
.vg-ic .cl{display:grid;gap:14px;max-width:1080px}
.vg-ic .cl-h{font:800 22px/1.2 "Inter",sans-serif;letter-spacing:-.01em;color:#0F1A2B}
.vg-ic .cl-s{margin-top:-10px;font-size:13.5px;line-height:1.5;color:rgba(0,0,0,.62)}
.vg-ic .cl-s b{color:#0F1A2B}
.vg-ic .cl-s b.am{color:#D97706}
.vg-ic .ccard{padding:18px 20px;border-radius:10px;background:#fff;border:1px solid #E2E8F0;box-shadow:0 1px 2px rgba(0,0,0,.03),0 0 0 1px rgba(0,0,0,.02)}
.vg-ic .cc-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.vg-ic .cc-h>b{font:700 15px/1.3 "Inter",sans-serif}
.vg-ic .cbtns{margin-left:auto;display:flex;gap:8px}
.vg-ic .kb{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:12px;font:600 11px/1.5 "Inter",sans-serif;white-space:nowrap}
.vg-ic .kb .ic{width:14px;height:14px}
.vg-ic .kb-g{color:#334155;padding:6px 9px}
.vg-ic .kb-g .ic{width:15px;height:15px}
.vg-ic .kb-s{background:#fff;color:#334155;border:1px solid #E2E8F0;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.vg-ic .kb-p{background:linear-gradient(135deg,#1E40AF,#0EA5E9);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.vg-ic .cth,.vg-ic .ctr{display:grid;grid-template-columns:28px minmax(0,1.6fr) 110px 100px 140px minmax(0,1.1fr);align-items:center}
.vg-ic .cth{border-bottom:1px solid rgba(0,0,0,.08)}
.vg-ic .cth span{padding:8px 10px;font:700 11px/1.3 "Inter",sans-serif;letter-spacing:.05em;text-transform:uppercase;color:rgba(0,0,0,.5)}
.vg-ic .ctr{border-bottom:1px solid rgba(0,0,0,.05)}
.vg-ic .ctr:last-child{border-bottom:0}
.vg-ic .ctr>span{padding:11px 10px;font-size:13px;line-height:1.5;color:#0F1A2B}
.vg-ic .cth span:first-child,.vg-ic .ctr>span:first-child{padding-left:2px;padding-right:2px}
.vg-ic .ctr b{font-weight:600}
.vg-ic .ctr small{display:block;font-size:11.5px;color:rgba(0,0,0,.5)}
.vg-ic .ctr .iv{color:#1E8E5A;font-weight:600}
.vg-ic .ctr .dl{font-weight:600}
.vg-ic .ctr .d14{color:#D97706}
.vg-ic .ctr .d30{color:#DC2626}
.vg-ic .ctr .rm{color:rgba(0,0,0,.6)}
.vg-ic .cbx{display:block;width:13px;height:13px;border-radius:3px;border:1px solid #767676;background:#fff}
.vg-ic .cbx.on{border-color:#2563EB;background:#2563EB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.vg-ic .cflat{border-radius:12px;background:#F1F5F9;border:1px solid #E2E8F0}
.vg-ic .auto{display:flex;align-items:center;gap:14px;padding:14px 18px}
.vg-ic .auto b{display:block;font:700 14px/1.4 "Inter",sans-serif;color:#0F1A2B}
.vg-ic .auto small{display:block;font-size:12.5px;line-height:1.5;color:rgba(0,0,0,.6)}
.vg-ic .sw-off{position:relative;flex:none;width:40px;height:22px;border-radius:11px;background:#E2E8F0}
.vg-ic .sw-off i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.vg-ic .crow{display:flex;align-items:center;gap:12px;padding:14px 18px}
.vg-ic .crow .ic{width:16px;height:16px;color:rgba(0,0,0,.5)}
.vg-ic .crow b{font:700 14px/1.3 "Inter",sans-serif;color:#0F1A2B}
.vg-ic .crow span{margin-left:auto;font-size:12.5px;color:rgba(0,0,0,.55)}

/* ── Money → Credit Note (CreditNoteModal: 640 wide, radius 18) ─────────────────────────────── */
.vg-ic .ic-dim{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(4,6,12,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.vg-ic[data-state=credit] .ic-dim{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.vg-ic .cn{width:640px;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.08);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.vg-ic .cn-h{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid rgba(0,0,0,.06);background:rgba(0,0,0,.03)}
.vg-ic .cn-h b{display:flex;align-items:center;gap:8px;font:800 17px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-ic .cn-h b .ic{width:18px;height:18px;color:#626976}
.vg-ic .cn-h small{display:block;margin-top:2px;font-size:11px;color:#8892A4}
.vg-ic .cn-h strong{color:#A855F7}
.vg-ic .cn-x{display:grid;place-items:center;padding:8px;border-radius:10px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);color:#8892A4}
.vg-ic .cn-x .ic{width:16px;height:16px}
.vg-ic .cn-b{display:grid;gap:14px;padding:22px 24px}
.vg-ic .cn-info{padding:13px 14px;border-radius:12px;background:rgba(168,85,247,.04);border:1px solid rgba(168,85,247,.15);font-size:12px;line-height:1.6;color:#0F1A2B}
.vg-ic .cn-info strong{color:#A855F7}
.vg-ic .cn-t{border-radius:12px;border:1px solid rgba(0,0,0,.06);overflow:hidden}
.vg-ic .cn-th,.vg-ic .cn-tr{display:grid;grid-template-columns:minmax(0,1fr) 70px 80px 90px 110px;align-items:center}
.vg-ic .cn-th span{padding:7px 9px;background:rgba(0,0,0,.02);font:700 10px/1.3 "Inter",sans-serif;color:#8892A4;text-transform:uppercase;letter-spacing:.04em}
.vg-ic .cn-tr span{padding:7px 9px;font-size:12px;color:#0F1A2B;font-variant-numeric:tabular-nums;border-top:1px solid rgba(0,0,0,.05)}
.vg-ic .cn-tr .mu{color:#8892A4}
.vg-ic .cn-tr b{font-weight:700}
.vg-ic .cn-tr .cn-q{display:block;margin-left:auto;padding:6px 8px;border-radius:10px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);text-align:right;border-top:1px solid rgba(0,0,0,.08)}
.vg-ic .cn-sum{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:10px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06)}
.vg-ic .cn-sum small{display:block;font-size:10px;color:#8892A4;text-transform:uppercase;letter-spacing:.05em}
.vg-ic .cn-sum span{display:block;margin-top:2px;font-size:11px;color:#8892A4}
.vg-ic .cn-sum b{display:block;margin-top:2px;font:800 15px/1.3 "Plus Jakarta Sans",sans-serif;color:#A855F7}
.vg-ic .cn-r{white-space:normal;height:66px;color:#9AA3AF;background:rgba(0,0,0,.03)}
.vg-ic .cn-chk{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:10px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06);font-size:12px;line-height:1.5;color:#0F1A2B}
.vg-ic .cn-chk>i{flex:none;width:13px;height:13px;margin-top:2px;border-radius:3px;border:1px solid #767676;background:#fff}
.vg-ic .cn-chk small{display:block;margin-top:2px;font-size:10px;color:#8892A4}
.vg-ic .cn-f{display:flex;justify-content:flex-end;gap:8px;padding:14px 24px;border-top:1px solid rgba(0,0,0,.06);background:rgba(0,0,0,.025)}
.vg-ic .cn-f span{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:10px;font:600 12px/1.2 "Inter",sans-serif}
.vg-ic .cn-f .no{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);color:#8892A4}
.vg-ic .cn-f .ok{padding:10px 20px;background:#0F1A2B;color:#fff;font:700 13px/1.2 "Plus Jakarta Sans",sans-serif;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.vg-ic .cn-f .ok .ic{width:13px;height:13px}

/* ── states. Default: paid online. Tour: lines (posted, unpaid) · live (the link is out) · credit · chase ── */
.vg-ic .x-un,.vg-ic .v-ready,.vg-ic .v-live{opacity:0;visibility:hidden}
.vg-ic .marks{max-height:0;padding-top:0;opacity:0}
.vg-ic .rp{max-width:0;padding-left:0;padding-right:0;border-width:0;margin-left:-8px;opacity:0;visibility:hidden}
.vg-ic[data-state=lines] .x-un,.vg-ic[data-state=live] .x-un{opacity:1;visibility:visible}
.vg-ic[data-state=lines] .x-pd,.vg-ic[data-state=live] .x-pd{opacity:0;visibility:hidden}
.vg-ic[data-state=lines] .rp,.vg-ic[data-state=live] .rp{max-width:220px;padding-left:6px;padding-right:15px;border-width:1px;margin-left:0;opacity:1;visibility:visible}
.vg-ic[data-state=lines] .settle i b,.vg-ic[data-state=live] .settle i b{width:0}
.vg-ic[data-state=lines] .bdg,.vg-ic[data-state=live] .bdg{max-width:0;min-width:0;padding:0;margin-left:-6px}
.vg-ic[data-state=live] .v-live{opacity:1;visibility:visible}
.vg-ic[data-state=live] .v-paid{opacity:0;visibility:hidden}
.vg-ic[data-state=live] .marks{max-height:39px;padding-top:9px;opacity:1}
.vg-ic .pg-col{opacity:0;visibility:hidden}
.vg-ic[data-state=chase] .pg-col{opacity:1;visibility:visible}
.vg-ic[data-state=chase] .pg-inv{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
/* the header row follows the page: the crumb, and whether the invoice's tab is lit */
.vg-ic .crumb em{font-style:normal}
.vg-ic .on-col,.vg-ic[data-state=chase] .on-inv{display:none}
.vg-ic[data-state=chase] .on-col{display:inline}
.vg-ic .c-inv{color:#1A1A1E;background:#FFFFFF;box-shadow:0 1px 3px rgba(18,38,28,.08),0 0 0 1px rgba(30,142,90,.16)}
.vg-ic .c-inv .glyph{color:#1E8E5A;opacity:1}
.vg-ic[data-state=chase] .c-inv{color:#5A6472;background:#E7ECF2;box-shadow:none}
.vg-ic[data-state=chase] .c-inv .glyph{color:inherit;opacity:.9}

/* ── the hero plays it once: Create link, the gateway answers, the link is out, Meridian pays ────── */
.motion .m-shot:not(.in) .vg-ic .x-un,.motion .m-shot:not(.in) .vg-ic .v-ready{opacity:1;visibility:visible}
.motion .m-shot:not(.in) .vg-ic .x-pd,.motion .m-shot:not(.in) .vg-ic .v-paid,.motion .m-shot:not(.in) .vg-ic .l2{opacity:0;visibility:hidden}
.motion .m-shot:not(.in) .vg-ic .marks{max-height:39px;padding-top:9px;opacity:1}
.motion .m-shot:not(.in) .vg-ic .rp{max-width:220px;padding-left:6px;padding-right:15px;border-width:1px;margin-left:0;opacity:1;visibility:visible}
.motion .m-shot:not(.in) .vg-ic .settle i b{width:0}
.motion .m-shot:not(.in) .vg-ic .bdg{max-width:0;min-width:0;padding:0;margin-left:-6px}
.vg-ic .l2{opacity:0;visibility:hidden}
.motion .m-shot.in .vg-ic .mkl{animation:icPress .5s ease .3s}
.motion .m-shot.in .vg-ic .l1{animation:icOut .18s ease .64s both}
.motion .m-shot.in .vg-ic .l2{animation:icIn .2s ease .66s both}
.motion .m-shot.in .vg-ic .v-ready{animation:icOut .25s ease 1.6s both}
.motion .m-shot.in .vg-ic .v-live{animation:icIn .35s ease 1.66s both,icOut .25s ease 3.15s forwards}
.motion .m-shot.in .vg-ic .rf{animation:icPress .45s ease 2.7s}
.motion .m-shot.in .vg-ic .v-paid{animation:icIn .4s ease 3.2s both}
.motion .m-shot.in .vg-ic .marks{animation:icMarks .45s ease 3.15s both}
.motion .m-shot.in .vg-ic .x-un{animation:icOut .25s ease 3.2s both}
.motion .m-shot.in .vg-ic .x-pd{animation:icIn .35s ease 3.28s both}
.motion .m-shot.in .vg-ic .rp{animation:icFold .45s ease 3.2s both}
.motion .m-shot.in .vg-ic .settle i b{animation:icFill .9s cubic-bezier(.4,0,.2,1) 3.3s both}
.motion .m-shot.in .vg-ic .ptr{animation:icRow .5s cubic-bezier(.2,.7,.2,1) 3.4s both}
.motion .m-shot.in .vg-ic .bdg{animation:icBadge .35s ease 3.28s both,icPop .5s ease 3.3s}
.motion .m-shot.in .vg-ic .i-paid{animation:icIn .35s ease 3.28s both,icGlow 1.3s ease 3.5s}
@keyframes icPress{0%,100%{transform:none;box-shadow:0 0 0 0 rgba(15,26,43,0)}40%{transform:scale(.955);box-shadow:0 0 0 5px rgba(15,26,43,.12)}}
@keyframes icOut{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@keyframes icIn{from{opacity:0;visibility:visible}to{opacity:1;visibility:visible}}
@keyframes icMarks{from{max-height:39px;padding-top:9px;opacity:1}to{max-height:0;padding-top:0;opacity:0}}
@keyframes icFold{from{max-width:220px;padding-left:6px;padding-right:15px;border-width:1px;margin-left:0;opacity:1;visibility:visible}
  to{max-width:0;padding-left:0;padding-right:0;border-width:0;margin-left:-8px;opacity:0;visibility:hidden}}
@keyframes icBadge{from{max-width:0;min-width:0;padding:0;margin-left:-6px;opacity:0;visibility:visible}to{max-width:30px;min-width:16px;padding:2px 5px;margin-left:0;opacity:1;visibility:visible}}
@keyframes icFill{from{width:0}to{width:100%}}
@keyframes icRow{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes icPop{0%,100%{transform:none}40%{transform:scale(1.35)}}
@keyframes icGlow{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}30%{box-shadow:0 0 0 5px rgba(16,185,129,.18)}}

/* ── Settings → Templates (src/modules/settings/Templates.jsx 346–472): the left panel, the live preview ── */
.vg-ic.tpl{display:flex;gap:20px;padding:22px 24px;background:#fff;color:#0F1A2B}
.vg-ic .tp-l{width:460px;flex:none;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.vg-ic .tp-h{font:800 19px/1.2 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-ic .tp-s{margin:3px 0 12px;font-size:12px;line-height:1.5;color:#626976}
.vg-ic .tp-types{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.vg-ic .tp-types span{padding:6px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.12);font:700 12px/1.2 "Inter",sans-serif;color:#626976}
.vg-ic .tp-types .on{border-color:#1E8E5A;background:rgba(0,0,0,.06);color:#0F1A2B}
.vg-ic .tp-box{padding:12px;border-radius:12px;border:1px solid rgba(0,0,0,.1);background:#fff}
.vg-ic .tp-name{display:flex;align-items:center;gap:6px}
.vg-ic .tp-inp{flex:1;min-width:0;height:36px;display:flex;align-items:center;padding:0 10px;border-radius:8px;border:1px solid rgba(0,0,0,.12);font:700 13px/1 "Inter",sans-serif;color:#0F1A2B}
.vg-ic .idoor.off{opacity:.45}
.vg-ic .tp-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.vg-ic .tp-note{display:flex;align-items:baseline;gap:8px;margin-top:9px;font-size:10.5px;line-height:1.5;color:#626976}
.vg-ic .tp-note b{color:#0F1A2B}
.vg-ic .tp-st{display:grid;flex:none}
.vg-ic .tp-st>em{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;font:700 10.5px/1.5 "Inter",sans-serif;font-style:normal;color:#0F1A2B;white-space:nowrap}
.vg-ic .tp-st .ic{width:10px;height:10px;fill:#0F1A2B}
.vg-ic .tp-st i{width:6px;height:6px;border-radius:50%;background:#9A5B00}
.vg-ic .tp-tabs{display:flex;gap:2px;margin-top:12px;border-bottom:1px solid rgba(0,0,0,.08)}
.vg-ic .tp-tabs span{padding:9px 13px 10px;margin-bottom:-1px;border-bottom:2px solid transparent;font:600 12.5px/1 "Plus Jakarta Sans",sans-serif;color:#626976;white-space:nowrap}
.vg-ic .tp-tabs .on{font-weight:800;color:#0F1A2B;border-bottom-color:#1E8E5A}
.vg-ic .tp-panel{flex:1;min-height:0;overflow:hidden;padding-right:4px}
.vg-ic .tp-sec{display:flex;align-items:baseline;gap:8px;margin:18px 0 8px;font:700 10px/1.3 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.5px}
.vg-ic .tp-sec span{font-weight:500;text-transform:none;letter-spacing:0}
.vg-ic .tp-saved{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;border:1px solid #1E8E5A;background:rgba(0,0,0,.05)}
.vg-ic .tp-saved>.ic{width:13px;height:13px;color:#0F1A2B;flex:none}
.vg-ic .tp-saved>span{flex:1;font:700 12px/1.3 "Inter",sans-serif;white-space:nowrap}
.vg-ic .tp-saved>span i{font-style:normal}
.vg-ic .tp-saved em{display:inline-flex;align-items:center;gap:3px;font:800 9px/1 "Inter",sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.4px}
.vg-ic .tp-saved em .ic{width:11px;height:11px;fill:#0F1A2B}
.vg-ic .tp-saved .trs{width:12px;height:12px;color:#626976}
.vg-ic .tp-cards{display:grid;grid-template-columns:repeat(2,223px);gap:10px}
.vg-ic .tp-card{display:flex;flex-direction:column;gap:6px;padding:7px;border-radius:10px;border:1px solid rgba(0,0,0,.1);background:#fff;transition:border-color .2s,background .2s}
.vg-ic .th{position:relative;width:207px;height:217px;overflow:hidden;border-radius:6px;border:1px solid rgba(0,0,0,.1);background:#fff;flex:none}
.vg-ic .th .dc{transform:scale(.2607)}
.vg-ic .cd-n{display:flex;align-items:center;gap:6px;font:700 12.5px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-ic .cd-n .ck{width:12px;height:12px;color:#1E8E5A;opacity:0}
.vg-ic .cd-b{font:700 9.5px/1.35 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.4px}
.vg-ic .cd-d{font-size:10.5px;line-height:1.4;color:#626976}
.vg-ic .tp-r{flex:1;min-width:0;display:flex;flex-direction:column;border-radius:14px;border:1px solid rgba(0,0,0,.1);overflow:hidden;background:#525659}
.vg-ic .tp-ph{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.vg-ic .tp-pt{flex:1;min-width:0}
.vg-ic .tp-pt b{display:block;font:700 11px/1.35 "Inter",sans-serif;letter-spacing:.3px;color:#E5E7EB}
.vg-ic .tp-pt small{display:block;margin-top:1px;font-size:10.5px;line-height:1.35;color:rgba(229,231,235,.65)}
.vg-ic .pseg{display:inline-flex;gap:2px;padding:2px;border-radius:8px;border:1px solid rgba(255,255,255,.18)}
.vg-ic .pseg em{padding:3px 9px;border-radius:6px;font:600 11px/1.5 "Inter",sans-serif;font-style:normal;color:rgba(229,231,235,.75);white-space:nowrap}
.vg-ic .pseg .on,.vg-ic .smp .o-shop{background:rgba(255,255,255,.16);color:#fff;font-weight:700}
.vg-ic .pprint{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:7px;border:1px solid rgba(255,255,255,.18);font:600 11px/1 "Inter",sans-serif;color:#E5E7EB;white-space:nowrap}
.vg-ic .pprint .ic{width:13px;height:13px}
.vg-ic .tp-view{flex:1;min-height:0;overflow:hidden;display:flex;justify-content:center;padding:18px 18px 28px}
.vg-ic .psheet{position:relative;flex:none;width:550px;height:778px;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.45);background:#fff}
.vg-ic .psheet .dc{transform:scale(.6927);transition:opacity .45s ease,visibility 0s}

/* the document as the renderer draws it (src/lib/templateRenderer.js), an A4 page at 794 × 1123 */
.vg-ic .dc{position:absolute;left:0;top:0;width:794px;height:1123px;transform-origin:0 0;overflow:hidden;font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums;text-align:left}
.vg-ic .dc b,.vg-ic .dc strong{font-weight:700}
/* Classic — the business sample, the company's own accent */
.vg-ic .dc-cl{--ac:#1E8E5A;--tx:#111827;--mu:#6B7280;padding:36px 48px;background:#fff;color:var(--tx);font-family:"Inter",sans-serif}
.vg-ic .dc-cl .hs{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:16px;border-bottom:3px solid var(--ac);margin-bottom:20px}
.vg-ic .dc-cl .hs-l{display:flex;flex-direction:column;gap:8px}
.vg-ic .dc-cl .wm{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--ac);line-height:1.3}
.vg-ic .dc-cl .cb b{display:block;font-size:14px;margin-bottom:2px}
.vg-ic .dc-cl .cb span{display:block;font-size:10px;color:var(--mu)}
.vg-ic .dc-cl .trn{margin-top:4px}
.vg-ic .dc-cl .hs-r{text-align:right}
.vg-ic .dc-cl .ttl{font-size:18px;font-weight:800;color:var(--ac);text-transform:uppercase;letter-spacing:.08em}
.vg-ic .dc-cl .dno{margin-top:4px;font:700 14px/1.5 monospace}
.vg-ic .dc-cl .meta{margin-top:10px;font-size:10px;color:var(--mu)}
.vg-ic .dc-cl .meta span{opacity:.7}
.vg-ic .dc-cl .meta strong{color:var(--tx)}
.vg-ic .dc-cl .meta div+div{margin-top:2px}
.vg-ic .dc-cl .pc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
.vg-ic .dc-cl .lb{margin-bottom:6px;font-size:9px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.06em}
.vg-ic .dc-cl .bt{padding:14px;border-radius:8px;background:#F9FAFB;border:1px solid #E5E7EB}
.vg-ic .dc-cl .bt b{display:block;margin-bottom:4px;font-size:13px}
.vg-ic .dc-cl .bt span{display:block;font-size:10px;line-height:1.6;color:var(--mu)}
.vg-ic .dc-cl .gap{margin-top:4px}
.vg-ic .dc-cl .pd{padding:14px;border-radius:8px;background:rgba(30,142,90,.06);border:1px solid rgba(30,142,90,.25)}
.vg-ic .dc-cl .pd .lb{color:var(--ac)}
.vg-ic .dc-cl .kv{display:flex;justify-content:space-between;margin-bottom:4px;font-size:11px}
.vg-ic .dc-cl .kv span{color:var(--mu)}
.vg-ic .dc-cl .pdt{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(30,142,90,.35)}
.vg-ic .dc-cl .pdt b{font-size:20px;font-weight:800;color:var(--ac)}
.vg-ic .dc .lt{margin-bottom:14px}
.vg-ic .dc .lh,.vg-ic .dc .lr{display:grid;align-items:center}
.vg-ic .dc .lt.so .lh,.vg-ic .dc .lt.so .lr{grid-template-columns:30px minmax(0,1fr) 60px 80px 60px 60px 100px}
.vg-ic .dc .lt.el .lh,.vg-ic .dc .lt.el .lr{grid-template-columns:30px minmax(0,1fr) 60px 80px 60px 100px}
.vg-ic .dc .lh span:first-child,.vg-ic .dc .lr span:first-child{text-align:center}
.vg-ic .dc .lh span:nth-child(n+3),.vg-ic .dc .lr span:nth-child(n+3){text-align:right}
.vg-ic .dc .lr span{align-self:stretch;display:flex;align-items:center;font-size:11px}
.vg-ic .dc .lr span:nth-child(n+3){justify-content:flex-end}
.vg-ic .dc .lr span:first-child{justify-content:center}
.vg-ic .dc-cl .lt.so .lh{background:#1F2937;color:#fff}
.vg-ic .dc-cl .lh span{padding:10px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.vg-ic .dc-cl .lr span{padding:8px 10px;border-bottom:1px solid #E5E7EB}
.vg-ic .dc-cl .lr span:first-child,.vg-ic .dc-cl .lr span:nth-child(5),.vg-ic .dc-cl .lr span:nth-child(6){color:var(--mu)}
.vg-ic .dc .tt{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px}
.vg-ic .dc-cl .wd{flex:1;padding:12px;border-radius:6px;background:#F9FAFB;border:1px solid #E5E7EB}
.vg-ic .dc-cl .wd i{display:block;font-size:11px;line-height:1.5}
.vg-ic .dc-cl .tb{width:280px;flex:none}
.vg-ic .dc-cl .tb div{display:flex;justify-content:space-between;padding:6px 8px;font-size:11px}
.vg-ic .dc-cl .tb span{color:var(--mu)}
.vg-ic .dc-cl .tb b{font-weight:600}
.vg-ic .dc-cl .tb .tx{font-size:10px}
.vg-ic .dc-cl .tb .g{padding:10px 8px;background:var(--ac);color:#fff}
.vg-ic .dc-cl .tb .g span{color:#fff;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.vg-ic .dc-cl .tb .g b{font-size:14px;font-weight:800}
.vg-ic .dc-cl .nt{margin-bottom:20px;padding:12px;border-radius:6px;background:#FEFCE8;border:1px solid #FDE68A;font-size:11px;line-height:1.6;color:#451A03}
.vg-ic .dc-cl .nt .lb{color:#92400E}
.vg-ic .dc-cl .sg{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px}
.vg-ic .dc-cl .sg div{margin-top:50px;padding-top:6px;border-top:1px solid #9CA3AF;text-align:center;font-size:10px;color:var(--mu)}
/* Atelier and Noir — the shop sample, the boutique and monogram mastheads, the elegant table */
.vg-ic .dc-at{--ac:#A68A64;--tx:#2B2620;--mu:#7D7468;--hair:rgba(43,38,32,.1);--soft:rgba(166,138,100,.07);--hf:"Cormorant Garamond",Georgia,serif;--hw:600;
  padding:48px 60px;background:#FBF8F2;color:var(--tx);font-family:"Montserrat",sans-serif}
.vg-ic .dc-no{--ac:#B08D57;--tx:#141414;--mu:#6E6A64;--hair:rgba(20,20,20,.1);--soft:rgba(176,141,87,.07);--hf:"Bodoni Moda",Didot,serif;--hw:500;
  padding:56px 64px;background:#fff;color:var(--tx);font-family:"Jost",sans-serif}
.vg-ic .dc .frame{position:absolute;left:14px;right:14px;top:14px;bottom:14px;border:1px solid var(--ac)}
.vg-ic .dc .bq{text-align:center;margin-bottom:26px}
.vg-ic .dc-at .wm{font:600 32px/1.2 var(--hf);letter-spacing:-.01em;color:var(--tx)}
.vg-ic .dc-no .mono{display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;border:1.5px solid var(--ac);font:700 24px/1 var(--hf);letter-spacing:.04em;color:var(--ac)}
.vg-ic .dc-no .wm{margin-top:12px;font:700 22px/1.2 var(--hf);letter-spacing:-.01em;color:var(--tx)}
.vg-ic .dc .fl{margin-top:9px;font-size:9px;line-height:1.7;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.vg-ic .dc .fl.t{margin-top:2px}
.vg-ic .dc .bq .tr{display:flex;align-items:center;gap:14px;margin-top:22px}
.vg-ic .dc .bq .tr i{flex:1;height:1px;background:var(--ac)}
.vg-ic .dc .bq .tr b{padding-left:.3em;font:var(--hw) 12px/1.5 var(--hf);letter-spacing:.3em;text-transform:uppercase;color:var(--ac)}
.vg-ic .dc .mr{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 22px;margin-top:10px;font-size:10px;color:var(--mu)}
.vg-ic .dc .mr strong{color:var(--tx)}
.vg-ic .dc .cap{margin-bottom:7px;font:var(--hw) 9px/1.5 var(--hf);letter-spacing:.16em;text-transform:uppercase;color:var(--ac)}
.vg-ic .dc .pl2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
.vg-ic .dc .pl2>div,.vg-ic .dc .pl1{padding-top:12px;border-top:1px solid var(--ac)}
.vg-ic .dc .pl1{max-width:55%;margin-bottom:20px}
.vg-ic .dc .pl2 b,.vg-ic .dc .pl1 b{display:block;margin-bottom:4px;font-size:13px;font-weight:600}
.vg-ic .dc .pl2 span,.vg-ic .dc .pl1 span{display:block;font-size:10px;line-height:1.6;color:var(--mu)}
.vg-ic .dc .pl2 .gap,.vg-ic .dc .pl1 .gap{margin-top:4px}
.vg-ic .dc .lt.el .lh{border-top:1px solid var(--ac);border-bottom:1px solid var(--ac);color:var(--ac)}
.vg-ic .dc .lt.el .lh span{padding:11px 10px;font:var(--hw) 9px/1.5 var(--hf);letter-spacing:.16em;text-transform:uppercase}
.vg-ic .dc .lt.el .lr span{padding:10px;border-bottom:1px solid var(--hair)}
.vg-ic .dc .lt.el .lr span:first-child,.vg-ic .dc .lt.el .lr span:nth-child(5){color:var(--mu)}
.vg-ic .dc .lt.el .lr b{font-weight:600}
.vg-ic .dc .ds{gap:10px}
.vg-ic .dc .pic{display:block;flex:none;width:40px;height:40px;border-radius:6px;background:var(--soft)}
.vg-ic .dc .sp{flex:1}
.vg-ic .dc .te{width:280px;flex:none}
.vg-ic .dc .te div{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.vg-ic .dc .te span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.vg-ic .dc .te b{font-size:11px;font-weight:400}
.vg-ic .dc .te .tx{padding:5px 0}
.vg-ic .dc .te .tx span{letter-spacing:0;text-transform:none}
.vg-ic .dc .te .tx b{font-size:10px;font-weight:600}
.vg-ic .dc .te .g{padding:12px 0;border-top:1px solid var(--ac);border-bottom:1px solid var(--ac)}
.vg-ic .dc .te .g span{font:var(--hw) 10px/1.5 var(--hf);letter-spacing:.2em;color:var(--ac)}
.vg-ic .dc .te .g b{font:var(--hw) 20px/1.2 var(--hf);color:var(--tx)}
.vg-ic .dc .np{margin-bottom:20px;font-size:11px;line-height:1.6}
.vg-ic .dc .ty{margin:18px 0 8px;text-align:center;font:var(--hw) 26px/1.25 var(--hf);color:var(--ac)}
.vg-ic .dc-at .ty{font-weight:600}
.vg-ic .dc-no .ty{font-size:24px}
.vg-ic .dc .sx{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;margin:12px 0 6px;font-size:10px}
.vg-ic .dc .sx span{display:inline-flex;align-items:center;gap:6px}
.vg-ic .dc .sx .ic{width:12px;height:12px;color:var(--ac)}

/* ── it tries on three looks once, as it comes into view: the saved Classic, then Atelier, then Noir ── */
.vg-ic .psheet .dc-cl,.vg-ic .psheet .dc-at{opacity:0;visibility:hidden}
.vg-ic .c-no{border-color:#1E8E5A;background:rgba(0,0,0,.04)}
.vg-ic .c-no .ck{opacity:1}
.vg-ic .k-def{opacity:0;visibility:hidden}
.motion .shot:not(.in) .vg-ic .psheet .dc-cl{opacity:1;visibility:visible}
.motion .shot:not(.in) .vg-ic .psheet .dc-no{opacity:0;visibility:hidden}
.motion .shot:not(.in) .vg-ic .c-no{border-color:rgba(0,0,0,.1);background:#fff}
.motion .shot:not(.in) .vg-ic .c-no .ck{opacity:0}
.motion .shot:not(.in) .vg-ic .k-def{opacity:1;visibility:visible}
.motion .shot:not(.in) .vg-ic .k-dirty{opacity:0;visibility:hidden}
.motion .shot:not(.in) .vg-ic .tp-save{opacity:.55}
.motion .shot:not(.in) .vg-ic .smp .o-shop{background:transparent;color:rgba(229,231,235,.75);font-weight:600}
.motion .shot:not(.in) .vg-ic .smp .o-biz{background:rgba(255,255,255,.16);color:#fff;font-weight:700}
.motion .shot.in .vg-ic .c-at{animation:tpPress .45s ease 1s,tpOn .25s ease 1.2s both,tpOff .25s ease 3.4s forwards}
.motion .shot.in .vg-ic .c-at .ck{animation:icIn .25s ease 1.2s both,icOut .2s ease 3.4s forwards}
.motion .shot.in .vg-ic .c-no{animation:tpPress .45s ease 3.2s,tpOn .25s ease 3.4s both}
.motion .shot.in .vg-ic .c-no .ck{animation:icIn .25s ease 3.4s both}
.motion .shot.in .vg-ic .psheet .dc-cl{animation:icOut .35s ease 1.3s both}
.motion .shot.in .vg-ic .psheet .dc-at{animation:icIn .45s ease 1.35s both,icOut .35s ease 3.5s forwards}
.motion .shot.in .vg-ic .psheet .dc-no{animation:icIn .45s ease 3.55s both}
.motion .shot.in .vg-ic .k-def{animation:icOut .2s ease 1.3s both}
.motion .shot.in .vg-ic .k-dirty{animation:icIn .25s ease 1.32s both}
.motion .shot.in .vg-ic .tp-save{animation:tpLift .3s ease 1.3s both}
.motion .shot.in .vg-ic .smp .o-shop{animation:tpSegOn .3s ease 1.3s both}
.motion .shot.in .vg-ic .smp .o-biz{animation:tpSegOff .3s ease 1.3s both}
@keyframes tpPress{0%,100%{transform:none}40%{transform:scale(.97)}}
@keyframes tpOn{from{border-color:rgba(0,0,0,.1);background:#fff}to{border-color:#1E8E5A;background:rgba(0,0,0,.04)}}
@keyframes tpOff{from{border-color:#1E8E5A;background:rgba(0,0,0,.04)}to{border-color:rgba(0,0,0,.1);background:#fff}}
@keyframes tpLift{from{opacity:.55}to{opacity:1}}
@keyframes tpSegOn{from{background:transparent;color:rgba(229,231,235,.75)}to{background:rgba(255,255,255,.16);color:#fff}}
@keyframes tpSegOff{from{background:rgba(255,255,255,.16);color:#fff}to{background:transparent;color:rgba(229,231,235,.75)}}

/* ── page layout: the card payment's two entries, one under the other ─────────────────────────── */
.ic-pair{display:flex;flex-direction:column;gap:14px}
@media (max-width:1179px){.ic-pair{grid-area:je}}