/* Product demo component. Fixed-size stage (560x500, or 360x520 on phones), scaled by JS to fit. */
.pdemo { position: relative; width: 100%; }
.pdemo__fit { position: relative; width: 100%; }
.pdemo__stage {
  position: absolute; left: 0; top: 0; width: 560px; height: 500px;
  transform-origin: 0 0; font-family: var(--sans); color: var(--ink);
  user-select: none; pointer-events: none;
}
.pdemo__stage * { box-sizing: border-box; }
.pdemo__stage p { margin: 0; }

/* Scenes */
.sc { position: absolute; inset: 0; opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 0.45s ease, transform 0.45s ease; }
.sc.is-on { opacity: 1; transform: none; }
.is-carding .sc.is-on { opacity: 0.3; }

.glass, .win, .pk, .rem {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 24px 60px rgba(22, 39, 92, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
}

/* ---------- Scene 1: new packet ---------- */
.win { position: absolute; inset: 12px; border-radius: 24px; overflow: hidden; }
.win__bar { height: 42px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid rgba(22, 39, 92, 0.08); font-size: 14px; }
.win__dots { display: flex; gap: 6px; }
.win__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(22, 39, 92, 0.18); }
.win__body { padding: 14px 18px 16px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field label, .lbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 5px; }
.lbl { margin-top: 14px; }
.field__val { height: 36px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(22, 39, 92, 0.12); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.tpls { display: flex; gap: 8px; flex-wrap: nowrap; }
.tpl { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(22, 39, 92, 0.15); transition: background 0.3s ease, color 0.3s ease, transform 0.15s ease; }
.s1-tpl .tpl[data-t="tpl-0"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.tpl.is-pressed { transform: scale(0.93); }
.newlist { position: relative; height: 168px; }
.newlist__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted);
  border: 1.5px dashed rgba(22, 39, 92, 0.18); border-radius: 14px; transition: opacity 0.3s ease; }
.s1-filled .newlist__empty { opacity: 0; }
.newlist__items { list-style: none; margin: 0; padding: 0; }
.newlist__items li { height: 28px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; border-bottom: 1px solid rgba(22, 39, 92, 0.07);
  opacity: 0; transform: translateX(-10px); transition: opacity 0.3s ease, transform 0.3s ease; }
.newlist__items li.is-on { opacity: 1; transform: none; }
.sq { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgba(22, 39, 92, 0.3); flex: none; }
.sendbtn { position: relative; margin-top: 14px; height: 46px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; opacity: 0.35; transition: opacity 0.3s ease, background 0.3s ease, transform 0.15s ease; }
.s1-filled .sendbtn { opacity: 1; }
.sendbtn.is-pressed { transform: scale(0.95); background: #0d1a44; }
.sendbtn__b { position: absolute; opacity: 0; transition: opacity 0.25s ease; }
.sendbtn__a { transition: opacity 0.25s ease; }
.s1-sent .sendbtn { background: var(--green); }
.s1-sent .sendbtn__a { opacity: 0; }
.s1-sent .sendbtn__b { opacity: 1; }

/* ---------- Scene 2: phone ---------- */
.phone { position: absolute; left: 290px; top: 8px; width: 250px; height: 484px; border-radius: 40px; padding: 8px; background: #0f1a3d;
  box-shadow: 0 30px 60px rgba(22, 39, 92, 0.28), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #f4f6fb; }
.ps { position: absolute; inset: 0; padding: 26px 16px 16px; opacity: 0; transition: opacity 0.35s ease; }
.ps.is-on { opacity: 1; }

.sms__head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid rgba(22, 39, 92, 0.08); font-size: 13px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.sms__bubble { margin-top: 18px; padding: 12px 13px; border-radius: 18px 18px 18px 6px; background: #e4e8f2; font-size: 14px; line-height: 1.42; }
.sms__link { color: var(--blue); text-decoration: underline; font-weight: 600; border-radius: 6px; transition: background 0.15s ease; }
.sms__link.is-pressed { background: rgba(58, 97, 199, 0.2); }
.sms__time { margin-top: 6px; font-size: 11px; color: var(--muted); }

.ps-code { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 70px; }
.logo-img--sm { width: 40px; height: 40px; }
.code__hi { margin-top: 18px !important; font: 900 22px/1.1 var(--display); }
.code__q { margin-top: 8px !important; font-size: 14px; color: var(--muted); }
.code__boxes { display: flex; gap: 5px; margin-top: 22px; }
.code__boxes span { width: 29px; height: 40px; border-radius: 9px; background: #fff; border: 1.5px solid rgba(22, 39, 92, 0.15); display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: transparent; transition: color 0.15s ease, border-color 0.15s ease; }
.code__boxes span.is-on { color: var(--ink); border-color: var(--blue); }
.code__note { margin-top: 18px !important; font-size: 13px; font-weight: 600; color: var(--green-ink); }

.pl__from { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.pl__title { margin-top: 4px !important; font: 900 19px/1.15 var(--display); }
.pl__count { margin-top: 14px; font-size: 13px; }
.bar { height: 6px; border-radius: 6px; background: rgba(22, 39, 92, 0.1); overflow: hidden; margin-top: 7px; }
.bar i { display: block; height: 100%; background: var(--ink); border-radius: 6px; transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.5s ease; }
.pl__items { list-style: none; margin: 10px 0 0; padding: 0; }
.pl__items li { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 500; border-bottom: 1px solid rgba(22, 39, 92, 0.07); }
.snap { flex: none; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; transition: transform 0.15s ease; }
.snap.is-pressed { transform: scale(0.88); }
.got { display: none; flex: none; font-size: 12px; font-weight: 700; color: var(--green-ink); background: rgba(31, 157, 107, 0.14); border-radius: 999px; padding: 5px 9px; }
.s2-got .is-first .snap { display: none; }
.s2-got .is-first .got { display: inline-block; }
.s2-got .is-first { background: rgba(31, 157, 107, 0.08); }

.ps-cam { background: #0b1022; color: #fff; text-align: center; }
.cam__top { font-size: 13px; font-weight: 600; opacity: 0.85; }
.cam__view { position: relative; height: 250px; margin: 14px 4px 0; }
.paper { position: absolute; inset: 26px 22px; background: #fbfaf6; color: #1f2a44; border-radius: 4px; padding: 14px 14px; text-align: left; transform: rotate(-3deg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.paper b { display: block; font-size: 13px; padding-bottom: 7px; border-bottom: 1px solid rgba(31, 42, 68, 0.2); }
.paper span { display: block; margin-top: 8px; font-size: 11.5px; }
.br { position: absolute; width: 24px; height: 24px; border: 3px solid rgba(255, 255, 255, 0.7); transition: border-color 0.25s ease, transform 0.25s ease; }
.br--tl { left: 10px; top: 12px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.br--tr { right: 10px; top: 12px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.br--bl { left: 10px; bottom: 12px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.br--br { right: 10px; bottom: 12px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.s2-found .br { border-color: #3fd49a; }
.s2-found .br--tl { transform: translate(8px, 10px); } .s2-found .br--tr { transform: translate(-8px, 10px); }
.s2-found .br--bl { transform: translate(8px, -10px); } .s2-found .br--br { transform: translate(-8px, -10px); }
.cam__hint { position: relative; height: 20px; margin-top: 10px !important; font-size: 13px; font-weight: 600; }
.cam__hint span { position: absolute; left: 0; right: 0; transition: opacity 0.25s ease; }
.cam__h2 { opacity: 0; color: #3fd49a; }
.s2-found .cam__h1 { opacity: 0; }
.s2-found .cam__h2 { opacity: 1; }
.shutter { position: absolute; left: 50%; bottom: 26px; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; border: 4px solid #fff; display: flex; align-items: center; justify-content: center; }
.shutter i { width: 48px; height: 48px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; }
.shutter.is-pressed i { transform: scale(0.78); }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 0.12s ease; }
.s2-flash .flash { opacity: 0.85; }

/* "No account" callout: pitched at the agent, who is the one paying */
.noacct { position: absolute; left: 16px; top: 150px; width: 250px; padding: 16px 18px; border-radius: 18px; background: var(--ink); color: #fff;
  box-shadow: 0 16px 36px rgba(22, 39, 92, 0.3); opacity: 0; transform: translateX(-10px) scale(0.95); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.3, 1.4, .5, 1); }
.noacct::after { content: ''; position: absolute; right: -9px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-right: 0; border-left-color: var(--ink); }
.noacct small { display: block; font-size: 13px; opacity: 0.85; }
.noacct b { display: block; margin-top: 4px; font: 900 22px/1.15 var(--display); color: #ffcf8a; }
.s2-noacct .noacct { opacity: 1; transform: none; }
.is-sm .noacct { left: 46px; right: 46px; top: auto; bottom: 56px; width: auto; text-align: center; padding: 12px 14px; }
.is-sm .noacct::after { display: none; }
.is-sm .noacct b { font-size: 17px; }

/* ---------- Scenes 3 and 4: packet ---------- */
.pk { position: absolute; left: 12px; top: 12px; bottom: 12px; width: 330px; border-radius: 24px; padding: 20px; }
.pk__label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pk__done { font-size: 11px; letter-spacing: 0.04em; color: #fff; background: var(--green); border-radius: 999px; padding: 4px 9px; opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.3, 1.6, .5, 1); }
.s4-complete .pk__done { opacity: 1; transform: none; }
.pk__name { margin-top: 6px !important; font: 900 21px/1.15 var(--display); }
.pk__for { margin-top: 3px !important; font-size: 13px; color: var(--muted); }
.pk__count { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; }
.pk__count span { font-size: 13px; color: var(--muted); }
.pk__count b { border-radius: 6px; padding: 1px 4px; margin-left: -4px; transition: background 0.3s ease; }
.s3-count-fresh .pk__count b { background: rgba(31, 157, 107, 0.18); }
.pk .bar { margin-top: 8px; }
.pk__rows { list-style: none; margin: 8px 0 0; padding: 0; }
.pk__rows li { height: 40px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; border-bottom: 1px solid rgba(22, 39, 92, 0.07);
  margin: 0 -8px; padding: 0 8px; border-radius: 8px; transition: background 0.4s ease; }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--amber); transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(.3, 1.8, .5, 1); }
.st { margin-left: auto; flex: none; font-style: normal; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 4px 9px; color: var(--amber-ink); background: rgba(217, 138, 31, 0.16); transition: background 0.3s ease, color 0.3s ease; }
.pk__rows li.is-got .dot { background: var(--green); border-color: var(--green); }
.pk__rows li.is-got .st { color: var(--green-ink); background: rgba(31, 157, 107, 0.14); }
.pk__rows li.is-loading .st { color: var(--blue); background: rgba(58, 97, 199, 0.14); }
.pk__rows li.is-loading .dot { border-color: var(--blue); }
.pk__rows li.is-fresh { background: rgba(31, 157, 107, 0.12); }
.pk__rows li.is-fresh .dot { transform: scale(1.5); }
.pkbtn { position: absolute; left: 20px; right: 20px; bottom: 20px; height: 46px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, transform 0.15s ease; }
.pkbtn > span { position: absolute; transition: opacity 0.25s ease; opacity: 0; white-space: nowrap; }
.pkbtn__a { opacity: 1 !important; }
.s4-dl .pkbtn__a { opacity: 0 !important; }
.s4-dl .pkbtn__b { opacity: 1; }
.s4-zip .pkbtn__b { opacity: 0; }
.s4-zip .pkbtn__c { opacity: 1; }
.s4-zip .pkbtn { background: var(--green); }
.pkbtn.is-pressed { transform: scale(0.95); background: #0d1a44; }

.rem { position: absolute; left: 322px; top: 150px; width: 226px; border-radius: 20px; padding: 14px; opacity: 0; transform: translateX(24px);
  transition: opacity 0.4s ease, transform 0.4s ease; }
.s3-rem .rem { opacity: 1; transform: none; }
.rem__head b { display: block; font-size: 13px; }
.rem__head span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.rem__bubble { margin-top: 10px; padding: 10px 11px; border-radius: 16px 16px 16px 6px; background: #e4e8f2; font-size: 13px; line-height: 1.42; transition: opacity 0.3s ease; }
.rem__bubble mark { color: var(--ink); font-weight: 700; padding: 1px 2px; border-radius: 4px;
  background: linear-gradient(rgba(255, 207, 138, 0.95), rgba(255, 207, 138, 0.95)) no-repeat 0 0 / 0% 100%; transition: background-size 0.6s ease; }
.s3-mark .rem__bubble mark { background-size: 100% 100%; }
.rem__link { color: var(--blue); text-decoration: underline; font-size: 12px; }
.rem__foot { margin-top: 8px !important; font-size: 11px; color: var(--muted); }
.stamp { position: absolute; left: 50%; top: 50%; padding: 7px 12px; border: 3px solid var(--green-ink); border-radius: 10px; color: var(--green-ink); background: rgba(255, 255, 255, 0.92);
  font-size: 15px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(1.8); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.3, 1.4, .5, 1); }
.s4-stamp .stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
.s4-stamp .rem__bubble { opacity: 0.45; }

.callout { position: absolute; left: 326px; top: 360px; width: 224px; padding: 12px 15px; border-radius: 16px; background: var(--ink); color: #fff;
  box-shadow: 0 16px 36px rgba(22, 39, 92, 0.3); opacity: 0; transform: translateY(10px) scale(0.94); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.3, 1.4, .5, 1); }
.callout::before { content: ''; position: absolute; left: 70px; top: -9px; border: 9px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
.callout small { display: block; font-size: 12.5px; opacity: 0.85; }
.callout b { display: block; margin-top: 2px; font: 900 20px/1.1 var(--display); color: #ffcf8a; }
.s3-callout .callout { opacity: 1; transform: none; }

/* ---------- Overlays ---------- */
.toast { position: absolute; z-index: 5; padding: 9px 14px; border-radius: 999px; background: rgba(22, 39, 92, 0.94); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3;
  box-shadow: 0 10px 26px rgba(22, 39, 92, 0.28); opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.3s ease; white-space: nowrap; }
.toast::before { content: '\2713'; color: #6fe0b0; margin-right: 7px; }
.toast.is-on { opacity: 1; transform: none; }
.toast.pos-tr { top: 16px; right: 22px; }
.toast.pos-l, .toast.pos-r { top: 200px; width: 230px; white-space: normal; border-radius: 16px; }
.toast.pos-l { left: 10px; }
.toast.pos-r { right: 10px; }
.toast.pos-t, .toast.pos-b { left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 330px; }
.toast.pos-t { top: 12px; }
.toast.pos-b { bottom: 14px; }

.cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 0; height: 0; transition: transform 0.65s cubic-bezier(.45, 0, .25, 1), opacity 0.25s ease; }
.cursor svg { position: absolute; left: -4px; top: -2px; fill: var(--ink); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.cursor .ring { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--blue); opacity: 0; transform: scale(0.3); transition: opacity 0.35s ease, transform 0.35s ease; }
.cursor.is-click .ring { opacity: 1; transform: scale(1); }
.cursor.is-touch svg { display: none; }
.cursor.is-touch::before { content: ''; position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; background: rgba(22, 39, 92, 0.28); border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: transform 0.15s ease; }
.cursor.is-touch.is-click::before { transform: scale(0.8); background: rgba(22, 39, 92, 0.45); }
.cursor.is-hidden { opacity: 0; }

.tcard { position: absolute; z-index: 7; left: 50%; top: 50%; width: 78%; padding: 22px 26px; border-radius: 24px; text-align: center;
  background: rgba(255, 255, 255, 0.86); border: 1px solid #fff; box-shadow: 0 24px 60px rgba(22, 39, 92, 0.22);
  opacity: 0; transform: translate(-50%, -50%) scale(0.96); transition: opacity 0.22s ease, transform 0.22s ease; }
.tcard.is-on { opacity: 1; transform: translate(-50%, -50%); }
.tcard small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.tcard b { display: block; margin-top: 6px; font: 900 26px/1.15 var(--display); letter-spacing: -0.01em; }

/* ---------- Phone-size stage (360x520) ---------- */
.is-sm .win { inset: 10px; }
.is-sm .win__body { padding: 14px 14px 16px; }
.is-sm .tpl--3 { display: none; }
.is-sm .newlist { height: 192px; }
.is-sm .newlist__items li { height: 32px; }
.is-sm .phone { left: 30px; top: 4px; width: 300px; height: 512px; border-radius: 44px; }
.is-sm .phone__screen { border-radius: 36px; }
.is-sm .ps { padding: 30px 18px 18px; }
.is-sm .cam__view { height: 280px; }
.is-sm .pk { left: 10px; right: 10px; width: auto; bottom: 10px; padding: 18px; }
.is-sm .pk__rows li { height: 34px; }
.is-sm .rem__foot { display: none; }
.is-sm .rem__bubble { font-size: 12.5px; }
.is-sm .rem { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; transform: translateY(30px); }
.is-sm.s3-rem .rem { transform: none; }
.is-sm.s4-rem-away .rem { opacity: 0; transform: translateY(40px); }
.is-sm .callout { left: 24px; right: 24px; top: 10px; width: auto; text-align: center; }
.is-sm .callout::before { display: none; }
.is-sm .tcard { width: 88%; }
.is-sm .tcard b { font-size: 24px; }

/* ---------- Controls ---------- */
.pdemo__controls { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; }
.pdemo__steps { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; }
.pdemo__steps button { width: 100%; border: 0; background: none; padding: 4px 2px; text-align: left; cursor: pointer; font: 600 13px/1.25 var(--sans); color: var(--muted); }
.pdemo__steps button[aria-current] { color: var(--ink); }
.pdemo__steps button i { display: block; height: 3px; margin-top: 7px; border-radius: 3px; background: rgba(22, 39, 92, 0.13); overflow: hidden; }
.pdemo__steps button b { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.pdemo__pause { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.55); cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.i-pause { width: 10px; height: 12px; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); }
.i-play { display: none; width: 0; height: 0; border-left: 11px solid var(--ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.is-paused .i-pause { display: none; }
.is-paused .i-play { display: block; }

/* Reduced motion: still frames, no transitions, no pause button. */
.is-reduced .pdemo__stage *, .is-reduced .pdemo__stage *::before { transition: none !important; }
.is-reduced .pdemo__pause { display: none; }