/* SoftPOS demo styles (softpos.js). Elements are found by data-ref, so the CSS uses [data-ref="..."] instead of ids.
   1. Shared: everything under .spx (the root of every demo instance).
   2. Landing page: .spx-embed (#softpos-app in index.html) - page-header offsets, bottom dock and sheet, tablet and phone layouts.
   3. Hero preview: .spx-preview (the phone in the landing-page hero), mounted with SoftPOS.mount(el, {preview: true}). */

/* ---------- 1. shared ---------- */
.spx{
  --ground:#FFFFFF;--ground-2:#FFFFFF;--ground-3:#F2F3F8;--line:#E4E6EE;--line-2:#CDD2DF;--ink:#0D0E16;--ink-2:#3A3F58;--muted:#565C7C;--faint:#626884;
  --req:#00874A;--brand:#00BF63;--ok:#08916B;--bad:#D3294A;--sec:#6A4FE0;--glow1:rgba(106,79,224,.04);--glow2:rgba(0,191,99,.07);
  --dots:rgba(13,14,22,.07);--zone-alt:rgba(13,14,22,.02);--edge:#D6DAE6;--edge-live:#9AA1C4;--node-fill:#FFFFFF;--node-stroke:#CDD2DF;
  --node-icon:#4A5070;--node-sub:#5A6080;--node-on-fill:#FFFFFF;--node-on-stroke:#7C84B5;--node-hover:#4F5790;--code-bg:#F6F7FA;--code-ink:#252A40;
  --code-c:#6C7290;--code-s:#A35600;--code-row:#EAECF2;--code-nm:#4A5070;--pkt-bg:#FFFFFF;--log-last:rgba(13,14,22,.04);--log-m:#3A3F58;
  --log-bad-m:#B0213F;--hard-ink:#3A3F58;--pp-ink:#2A2F48;--req-t1:rgba(0,191,99,.13);--req-t2:rgba(0,191,99,.04);--req-line:rgba(0,150,80,.28);
  --req-glow:rgba(0,191,99,.4);--card-shadow:0 1px 2px rgba(13,14,22,.04),0 10px 30px -16px rgba(13,14,22,.12);
  --phone-shadow:0 34px 70px -26px rgba(20,24,50,.45),0 0 0 1px #2A2E45,inset 0 0 0 2px #06070C;--pin:#00BF63;--a-bg:#F2F3F7;--a-card:#FFFFFF;
  --a-ink:#0D0E16;--a-muted:#5F6480;--a-line:#E4E6EE;--display:'Century Gothic','CenturyGothic','Questrial',system-ui,sans-serif;
  --body:'Open Sans',Helvetica,Arial,sans-serif;--mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
.spx *{box-sizing:border-box}
.spx{color:var(--ink);font-family:var(--body);font-size:14px;position:relative;text-align:left;line-height:normal}
.spx button{font-family:inherit;color:inherit}
.spx a{color:var(--req)}
.spx a:hover{color:var(--ink)}
.spx :focus-visible{outline:2px solid var(--req);outline-offset:2px}
.spx .hdr{max-width:1480px;margin:0 auto;padding:30px 0 28px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.spx .ctl{display:flex;flex-direction:column;gap:6px}
.spx .ctl>span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.spx .seg{display:flex;background:var(--ground-2);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap;box-shadow:var(--card-shadow)}
.spx .seg button{border:0;background:none;color:var(--muted);font-size:12.5px;font-weight:600;padding:7px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px}
.spx .seg button:hover{color:var(--ink)}
.spx .seg button.on{background:var(--ground-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.spx .seg button:disabled{opacity:.35;cursor:not-allowed}
.spx .seg button .sd{width:6px;height:6px;border-radius:50%;background:var(--faint);display:none}
.spx .seg button.on .sd{display:block;background:var(--bad)}
.spx .seg button.on[data-v="approve"] .sd{background:var(--ok)}
.spx .replay{border:1px solid var(--line-2);background:var(--ground-2);border-radius:11px;padding:9px 14px;font-weight:600;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:var(--card-shadow)}
.spx .replay:hover{border-color:var(--req);color:var(--req)}
.spx .sumbtn{display:flex;align-items:center;gap:12px;border:1px solid var(--line-2);background:var(--ground-2);border-radius:12px;padding:7px 7px 7px 14px;cursor:pointer;box-shadow:var(--card-shadow);font-size:13px;text-align:left}
.spx .sumbtn:hover{border-color:var(--req)}
.spx .sum-l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.spx .sum-t{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--ink)}
.spx .sum-t .sd{width:7px;height:7px;border-radius:50%;background:var(--bad)}
.spx .sum-t .sd.ok{background:var(--ok)}
.spx .gear{display:flex;align-items:center;gap:7px;background:var(--ground-3);border-radius:8px;padding:7px 11px;font-weight:600;font-size:12.5px;color:var(--ink)}
.spx .drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:92vw;background:var(--ground-2);border-left:1px solid var(--line);box-shadow:-24px 0 60px -30px rgba(13,14,22,.35);transform:translateX(105%);transition:transform .25s ease;z-index:60;overflow:auto;visibility:hidden}
.spx .drawer.open{transform:none;visibility:visible}
.spx .dr-h{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ground-2);z-index:1}
.spx .dr-t{font-size:16px;font-weight:600;margin:0}
.spx .dr-x{border:1px solid var(--line-2);background:var(--ground-3);border-radius:9px;width:34px;height:34px;cursor:pointer;font-size:18px;line-height:1;color:var(--muted)}
.spx .dr-x:hover{color:var(--ink);border-color:var(--req)}
.spx .dr-sec{padding:20px 22px;display:flex;flex-direction:column;gap:20px;border-bottom:1px solid var(--line)}
.spx .dr-k{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--req);font-weight:500}
.spx .drawer .ctl{gap:8px}
.spx .drawer .ctl>span{font-family:var(--body);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600}
.spx .drawer .seg{align-self:flex-start}
.spx .ctl small{font-size:12.5px;color:var(--muted);line-height:1.45;text-wrap:pretty}
.spx .ctl.locked .seg{opacity:.55}
.spx .ctl.locked .seg button{cursor:not-allowed}
.spx .ctl.locked .seg button.on{opacity:1}
.spx [data-ref="pinSmall"] b{color:var(--ink);font-weight:600}
.spx [data-ref="segAmt"].nudge{animation:nudge .36s ease-in-out}
.spx [data-ref="pinSmall"].nudge{animation:noteIn 1.2s ease-out}
@keyframes nudge{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes noteIn{0%,30%{background:var(--ground-3);color:var(--ink)}100%{background:transparent}}
.spx [data-ref="pinSmall"]{border-radius:6px;margin:0 -6px;padding:2px 6px}
.spx .pinhint{font-family:var(--mono);font-size:11px;color:var(--muted)}
.spx .pinhint b{color:var(--req);font-weight:600}
.spx .steps{max-width:1480px;margin:0 auto 22px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line)}
.spx .step{border:0;background:none;text-align:left;padding:12px 12px 14px;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:3px;color:var(--muted);min-width:0}
.spx .step::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;transition:background .25s}
.spx .step .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint)}
.spx .step .t{font-weight:600;font-size:13px;color:var(--muted);transition:color .2s}
.spx .step .c{font-size:11.5px;color:var(--faint);line-height:1.35}
.spx .step:hover .t{color:var(--ink)}
.spx .step.done::after{background:var(--line-2)}
.spx .step.done .t{color:var(--ink-2)}
.spx .step.active::after{background:var(--req)}
.spx .step.active .t{color:var(--ink)}
.spx .step.active .n{color:var(--req)}
.spx .step.skip .t,.spx .step.skip .n{color:var(--faint)}
.spx .step.nr{opacity:.4}
.spx .main{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:350px minmax(0,1fr);gap:30px;align-items:start}
.spx .phonecol{position:sticky;top:16px;display:flex;justify-content:center}
.spx .rightcol{display:flex;flex-direction:column;gap:18px;min-width:0}
@media (max-width:980px){.spx .main{grid-template-columns:1fr}
.spx .phonecol{position:static}
.spx .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:520px){.spx .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.spx .phone{width:340px;max-width:100%;height:700px;border-radius:52px;padding:11px;position:relative;background:linear-gradient(160deg,#2A2E45,#0E1019 40%,#1B1E2E);box-shadow:var(--phone-shadow)}
.spx .island{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:104px;height:30px;border-radius:20px;background:#000;z-index:30}
.spx .screen{width:100%;height:100%;border-radius:42px;overflow:hidden;position:relative;background:var(--a-bg);color:var(--a-ink);font-family:var(--body)}
.spx .view{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none;opacity:0;transform:translateX(18px) scale(.99);pointer-events:none;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.spx .view::-webkit-scrollbar{display:none}
.spx .view.active{opacity:1;transform:none;pointer-events:auto}
.spx .sb{height:50px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:6px 28px 0 32px;font-size:14px;font-weight:600}
.spx .sb svg{display:block}
.spx .sb .ic{display:flex;gap:5px;align-items:center}
.spx .pin{position:absolute;z-index:6;width:22px;height:22px;border-radius:50%;border:0;cursor:pointer;background:#0D0E16;color:#fff;font-family:var(--body);font-style:normal;font-weight:700;font-size:12px;display:grid;place-items:center;box-shadow:0 0 0 2px #fff,0 3px 8px rgba(13,14,22,.25)}
.spx .pin::before{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--pin);opacity:.5;animation:ping 2.4s ease-out infinite}
.spx .pin.active{background:var(--pin);color:#03230F;box-shadow:0 0 0 2px #fff,0 3px 8px rgba(13,14,22,.25)}
@keyframes ping{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.spx .tip{position:absolute;z-index:40;width:220px;background:#0D0E16;color:#fff;font-size:12px;line-height:1.45;padding:10px 12px;border-radius:12px;box-shadow:0 12px 30px -8px rgba(0,0,0,.5);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .18s,transform .18s}
.spx .tip.show{opacity:1;transform:none;pointer-events:auto}
.spx .tip b{display:block;color:#5CE39F;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;font-family:var(--mono);font-weight:600}
.spx .tb{display:grid;grid-template-columns:72px 1fr 72px;align-items:center;padding:2px 12px 6px;flex:0 0 auto}
.spx .tb button{border:0;background:none;font-size:14px;font-weight:500;color:var(--a-ink);cursor:pointer;text-align:left;padding:8px 6px;border-radius:10px}
.spx .tb button:hover{background:#E6E8EF}
.spx .tb-t{margin:0;text-align:center;font-weight:600;font-size:15px}
.spx .ctawrap{position:relative;margin:auto 18px 20px;padding-top:10px}
.spx .cta{width:100%;height:54px;border:0;border-radius:17px;background:var(--a-ink);color:#fff;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px}
.spx .cta:hover{background:#262838}
.spx .cta:disabled{opacity:.3;cursor:default;background:var(--a-ink)}
.spx .cta.ghost{background:var(--a-card);color:var(--a-ink)}
.spx .cta.ghost:hover{background:#E6E8EF}
.spx .cta .chev{font-size:28px;font-weight:400;line-height:1;margin-top:-3px}
.spx .m-sub{font-size:12px;color:var(--a-muted)}
.spx .big-amt{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;position:relative;display:inline-block}
.spx .m-top{display:flex;align-items:center;gap:12px;padding:6px 20px 14px}
.spx .store{width:42px;height:42px;border-radius:13px;background:var(--a-ink);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.spx .m-name{font-weight:600;font-size:17px}
.spx .status{display:flex;gap:8px;padding:0 16px}
.spx .online{margin-left:auto;display:flex;align-items:center;gap:6px;background:#E7F7EF;color:#0B7F58;border-radius:99px;padding:5px 10px;font-size:12px;font-weight:600;position:relative;white-space:nowrap}
.spx .online i{width:7px;height:7px;border-radius:50%;background:#12B886}
.spx .stc{flex:1;background:var(--a-card);border-radius:14px;padding:11px 12px;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;position:relative;white-space:nowrap}
.spx .stc i{width:8px;height:8px;border-radius:50%;background:#12B886;box-shadow:0 0 0 3px #D8F5EA;flex:0 0 auto}
.spx .stc.off{color:var(--a-muted)}
.spx .stc.off i{background:#B8BCCB;box-shadow:0 0 0 3px #ECEDF2}
.spx .conn{margin-left:auto;border:0;border-radius:99px;background:var(--a-ink);color:#fff;font:inherit;font-size:12.5px;font-weight:600;padding:7px 14px;min-height:32px;cursor:pointer;box-shadow:0 0 0 0 rgba(0,191,99,.45);animation:connPulse 2s ease-out infinite}
.spx .conn:hover{background:#262838}
.spx .conn[hidden]{display:none}
@keyframes connPulse{0%{box-shadow:0 0 0 0 rgba(0,191,99,.45)}70%,100%{box-shadow:0 0 0 8px rgba(0,191,99,0)}}
@media (prefers-reduced-motion:reduce){.spx .conn{animation:none}
}
.spx .stc.wait i{background:#E09B12;box-shadow:0 0 0 3px #FFF0D2;animation:live 1s ease-in-out infinite}
.spx .hero-cta{position:relative;margin:12px 16px 0}
.spx .hero-cta .cta{height:64px;border-radius:18px;font-size:16px}
.spx .sec-h{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 8px}
.spx .sec-h span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--a-muted);font-weight:600}
.spx .sec-h button{border:0;background:none;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--a-ink)}
.spx .list{display:flex;flex-direction:column;gap:6px;padding:0 14px 24px}
.spx .tx{background:var(--a-card);border-radius:16px;padding:10px 12px;cursor:pointer;position:relative;display:flex;align-items:center;gap:12px;transition:box-shadow .2s}
.spx .tx.new{box-shadow:0 0 0 2px #12B886}
.spx .tx-av{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#ECEEF4;color:var(--a-ink);flex:0 0 auto}
.spx .tx-m{flex:1;min-width:0}
.spx .tx-n{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spx .tx-s{font-size:11.5px;color:var(--a-muted);margin-top:2px;white-space:nowrap}
.spx .tx-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;position:relative}
.spx .tx-a{font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap;font-family:var(--mono)}
.spx .st{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:99px}
.spx .st.posted{background:#E7F7EF;color:#0B7F58}
.spx .st.declined{background:#FFE4E9;color:#C21F3D}
.spx .st.refund{background:#E6EDFF;color:#2D5BD7}
.spx .amt{text-align:center;padding:22px 0 8px;position:relative}
.spx .amt-v{font-family:var(--display);font-weight:700;font-size:42px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:inline-block;position:relative}
.spx .amt-s{font-size:12px;color:var(--a-muted);margin-top:4px}
.spx .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px 22px 0;position:relative}
.spx .keys button:not(.pin){height:54px;border:0;border-radius:14px;background:none;cursor:pointer;color:var(--a-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:2px}
.spx .keys button:not(.pin):hover{background:#E6E8EF}
.spx .keys button:not(.pin):active,.spx .keys button:not(.pin).hit{background:#DADDE7}
.spx .keys button:not(.pin) b{font-size:22px;font-weight:500}
.spx .keys button:not(.pin) b svg{display:block}
.spx .keys button:not(.pin) small{font-size:8.5px;letter-spacing:.16em;color:var(--a-muted);font-weight:600;min-height:9px}
.spx .keys button:not(.pin).txt b{font-size:14px;font-weight:600}
.spx .keys.pk button:not(.pin){height:48px}
.spx .dots{display:flex;gap:14px;justify-content:center;margin-top:14px;position:relative}
.spx .dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--a-ink);transition:background .15s}
.spx .dots i.on{background:var(--a-ink)}
.spx .secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;font-weight:600;color:#0B7F58;margin:10px auto 2px;padding:5px 11px;border-radius:99px;background:#E7F7EF;position:relative;width:max-content}
.spx .pin-foot{font-size:10.5px;color:var(--a-muted);text-align:center;padding:0 26px 18px;margin-top:-8px;line-height:1.4}
.spx .tip-hd{text-align:center;padding:8px 0 10px;display:flex;flex-direction:column;align-items:center;gap:4px}
.spx .tip-q{font-size:13px;margin-top:4px}
.spx .tipgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:4px 16px;position:relative}
.spx .tipb{grid-column:span 2;border:0;background:var(--a-card);border-radius:14px;padding:12px 4px;cursor:pointer;display:flex;flex-direction:column;gap:3px;align-items:center;color:var(--a-ink)}
.spx .tipb.wide{grid-column:span 3}
.spx .tipb b{font-size:16px;font-weight:600}
.spx .tipb span{font-size:11.5px;color:var(--a-muted);font-variant-numeric:tabular-nums}
.spx .tipb:hover{box-shadow:inset 0 0 0 1.5px #C9CCDA}
.spx .tipb.on{background:var(--a-ink);color:#fff}
.spx .tipb.on span{color:#C9CCDA}
.spx .stepper{display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.spx .stepper button{width:34px;height:34px;border-radius:50%;border:0;background:var(--a-card);cursor:pointer;font-size:18px}
.spx .stepper button:hover{background:#E6E8EF}
.spx .rcpt{margin:12px 16px 0;background:var(--a-card);border-radius:16px;padding:2px 0;position:relative}
.spx .rcpt .r{display:flex;justify-content:space-between;padding:11px 16px;font-size:13.5px}
.spx .rcpt .r+.r{border-top:1px dashed var(--a-line)}
.spx .rcpt .k{color:var(--a-muted)}
.spx .rcpt .v{font-weight:600;font-variant-numeric:tabular-nums}
.spx .rcpt .total .v{font-size:15px}
.spx .tap-hd{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 0}
.spx .stage{height:220px;display:grid;place-items:center;position:relative;flex:0 0 auto}
.spx .nfc{position:relative;width:176px;height:176px;display:grid;place-items:center}
.spx .nfc .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--a-ink);opacity:0;animation:ripple 2.2s ease-out infinite}
.spx .nfc .r2{animation-delay:.73s}
.spx .nfc .r3{animation-delay:1.46s}
.spx .nfc.reading .ring{animation-duration:1.1s;border-color:#12B886}
@keyframes ripple{0%{transform:scale(.35);opacity:.55}100%{transform:scale(1);opacity:0}}
.spx .nfc-ico{width:66px;height:66px;border-radius:50%;background:var(--a-card);display:grid;place-items:center;box-shadow:0 8px 22px -8px rgba(13,14,22,.3);z-index:1}
.spx .tok{position:absolute;left:50%;top:50%;z-index:2;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform:translate(var(--tx),var(--ty)) rotate(var(--rot))}
.spx .tok.card{width:92px;height:58px;margin:-29px 0 0 -46px;border-radius:9px;background:linear-gradient(135deg,#4A4F72,#1A1C2B);box-shadow:0 10px 24px -8px rgba(13,14,22,.5)}
.spx .tok.card::before{content:'';position:absolute;left:12px;top:17px;width:18px;height:14px;border-radius:3px;background:linear-gradient(135deg,#F3D58A,#B58B3A);opacity:.9}
.spx .tok.card::after{content:'';position:absolute;left:12px;right:34px;bottom:11px;height:3px;border-radius:2px;background:rgba(255,255,255,.25)}
.spx .tok.phone{width:46px;height:84px;margin:-42px 0 0 -23px;border-radius:12px;background:#1A1C2B;border:3px solid #4A4F72;box-shadow:0 10px 24px -8px rgba(13,14,22,.5)}
.spx .tok.phone::before{content:'';position:absolute;left:50%;top:5px;width:14px;height:3px;border-radius:2px;background:#4A4F72;transform:translateX(-50%)}
.spx .nfc.awaiting .tok{--tx:44px;--ty:-58px;--rot:-14deg;animation:bob 1.8s ease-in-out infinite}
.spx .nfc.reading .tok{--tx:18px;--ty:-8px;--rot:-4deg}
@keyframes bob{50%{translate:0 -7px}}
.spx .tapbtn{border:0;background:none;padding:0;cursor:pointer;border-radius:50%}
.spx .tapbtn:hover .tok{--ty:-50px;--tx:36px}
.spx .tapcue{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px auto 0;padding:7px 12px;border-radius:99px;background:var(--a-ink);color:#fff;font-size:12px;font-weight:600;width:max-content;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{50%{opacity:.6}}
.spx .spin{width:74px;height:74px;border-radius:50%;border:5px solid #E1E3EC;border-top-color:var(--a-ink);animation:rot .9s linear infinite}
.spx .ldots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.spx .ldots i{width:7px;height:7px;border-radius:50%;background:var(--a-ink);opacity:.2;animation:ldot 1.2s ease-in-out infinite}
.spx .ldots i:nth-child(2){animation-delay:.15s}
.spx .ldots i:nth-child(3){animation-delay:.3s}
.spx .ldots i:nth-child(4){animation-delay:.45s}
@keyframes ldot{0%,60%,100%{opacity:.2;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes rot{to{transform:rotate(360deg)}}
.spx .tap-tx{text-align:center;padding:0 26px;display:flex;flex-direction:column;gap:4px;align-items:center}
.spx .tap-tx b{font-size:15px;font-weight:600;position:relative;text-wrap:balance}
.spx .tap-tx span{font-size:12.5px;color:var(--a-muted);position:relative}
.spx .rprog{display:flex;gap:6px;justify-content:center;margin-top:14px}
.spx .rprog i{width:36px;height:4px;border-radius:2px;background:#D5D8E4;transition:background .25s}
.spx .rprog i.on{background:#12B886}
.spx .res{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 18px 20px;gap:8px;text-align:center}
.spx .r-ico{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin-top:6px;flex:0 0 auto}
.spx .r-ico.ok{background:#E3F8EF;color:#0B8A5F}
.spx .r-ico.bad{background:#FFE4E9;color:#D11F40}
.spx .r-ico.sm{width:96px;height:96px;animation:pop .35s cubic-bezier(.2,.8,.2,1.3) both}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.spx .r-ico path{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .6s .15s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.spx .r-t{font-weight:600;font-size:21px;margin:4px 0 0}
.spx .r-s{font-size:13px;color:var(--a-muted);margin:0}
.spx .r-card{width:100%;background:var(--a-card);border-radius:16px;margin-top:6px;position:relative;text-align:left}
.spx .r-card .r{display:flex;justify-content:space-between;padding:10px 14px;font-size:12.5px;gap:12px;position:relative}
.spx .r-card .r+.r{border-top:1px dashed var(--a-line)}
.spx .r-card .k{color:var(--a-muted)}
.spx .r-card .v{font-weight:600;font-family:var(--mono);font-size:11.5px;text-align:right}
.spx .r-next{padding:12px 14px}
.spx .r-next .k{margin-bottom:4px}
.spx .r-next p{margin:0;font-size:13px;line-height:1.45}
.spx .r-btns{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:10px}
.spx .card{background:var(--ground-2);border:1px solid var(--line);border-radius:20px;box-shadow:var(--card-shadow)}
.spx .mapcard{position:relative;overflow:hidden;background:radial-gradient(circle at 1px 1px,var(--dots) 1px,transparent 0) 0 0/22px 22px,var(--ground-2)}
.spx .slow-note{position:absolute;right:22px;bottom:16px;z-index:2;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--faint);pointer-events:none}
.spx .slow-note svg{flex:0 0 auto}
.spx .maphead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 20px 0;flex-wrap:wrap}
.spx .maphead .mh-t{font-weight:600;font-size:15px;margin:0;color:inherit}
.spx .maphead p{margin:4px 0 0;color:var(--muted);font-size:12.5px}
.spx .mapscroll{overflow-x:auto;padding:0 8px 8px}
.spx [data-ref="map"]{display:block;width:100%;min-width:780px;height:auto}
.spx [data-ref="map"] text{font-family:var(--body)}
.spx .zone-l{fill:var(--muted);font-family:var(--mono)!important;font-size:12px;letter-spacing:.16em}
.spx .zone-sep{stroke:var(--line);stroke-dasharray:3 6}
.spx .edge{fill:none}
.spx .edge.base{stroke:var(--edge);stroke-width:1.6}
.spx .edge.flow{stroke:transparent;stroke-width:2.6;stroke-linecap:round}
.spx .edge.flow.live{stroke:var(--edge-live);stroke-dasharray:3 7}
@keyframes march{to{stroke-dashoffset:-20}}
.spx .nb text{font-family:var(--mono)!important;font-size:10px;font-weight:600}
.spx .node{cursor:pointer;transition:opacity .35s}
.spx .node .nbox{fill:var(--node-fill);stroke:var(--node-stroke);stroke-width:1.3;transition:stroke .25s,fill .25s}
.spx .node .nicon{fill:none;stroke:var(--node-icon);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.spx .node .nlabel{fill:var(--ink);font-size:14.5px;font-weight:600}
.spx .node .nsub{fill:var(--node-sub);font-size:12px}
.spx .node.on .nbox{stroke:var(--node-on-stroke);fill:var(--node-on-fill)}
.spx .node.dim{opacity:.3}
.spx .node:hover .nbox{stroke:var(--node-hover)}
.spx .node:focus{outline:none}
.spx .node:focus-visible .nbox{stroke:var(--req);stroke-width:2}
.spx .node.sel .nbox{stroke:var(--ink);stroke-width:2}
.spx .node.sel .nicon{stroke:var(--ink)}
.spx .node.hot .nbox{animation:hot .8s ease-out}
@keyframes hot{0%{fill:color-mix(in srgb,var(--req) 12%,transparent);stroke:var(--req)}100%{}}
.spx .node.fail .nbox{stroke:var(--bad);fill:color-mix(in srgb,var(--bad) 12%,transparent)}
.spx .node.fail .nicon{stroke:var(--bad)}
.spx .legend text{fill:var(--muted);font-size:13px}
.spx [data-ref="pkt"]{pointer-events:none;transition:opacity .2s}
.spx [data-ref="pkt"] .halo,.spx [data-ref="pkt"] .plabel,.spx [data-ref="trail"]{display:none}
.spx [data-ref="pkt"] .plabel text{font-family:var(--mono)!important;font-size:11px;font-weight:600}
.spx .insp{padding:20px 22px 22px;display:flex;flex-direction:column;gap:18px;transition:opacity .18s}
.spx .insp.fade{opacity:0}
.spx .i-head{display:flex;gap:14px;align-items:center}
.spx .i-acts{margin-left:auto;flex:0 0 auto;display:flex;gap:8px}
.spx .replay.ico{padding:9px 11px;min-height:36px}
.spx .step[aria-current]{scroll-margin:8px}
.spx .i-glyph{width:48px;height:48px;border-radius:14px;background:var(--ground-3);border:1px solid var(--line-2);display:grid;place-items:center;flex:0 0 auto;font-family:var(--mono);font-weight:600;font-size:16px;color:var(--req)}
.spx .i-glyph svg{width:24px;height:24px;fill:none;stroke:var(--req);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.spx .i-titles{flex:1;min-width:0}
.spx .i-zone{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);line-height:1.5}
.spx .i-titles h3,.spx .i-titles p{font-weight:600;font-size:20px;margin:4px 0 0;letter-spacing:-.01em;text-wrap:balance;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spx .i-titles h3 em,.spx .i-titles p em{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:6px;padding:2px 6px}
.spx .i-lat{text-align:right;flex:0 0 auto;max-width:40%}
.spx .i-lat span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.spx .i-lat b{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--req)}
.spx .i-lat b.sm{font-size:12px}
.spx .i-now{background:linear-gradient(135deg,var(--req-t1),var(--req-t2));border:1px solid var(--req-line);border-radius:14px;padding:12px 14px}
.spx .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:8px}
.spx .i-now .k{color:var(--req);margin-bottom:5px}
.spx .i-now p{margin:0;font-size:15px;line-height:1.55;color:var(--ink);max-width:62ch;text-wrap:pretty}
.spx .i-now.idle{background:var(--ground-3);border-color:var(--line)}
.spx .i-now.idle .k{color:var(--faint)}
.spx .i-now.idle p{color:var(--muted)}
.spx .i-back{align-self:flex-start;border:1px solid var(--line-2);background:var(--ground-3);border-radius:9px;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted)}
.spx .i-back:hover{color:var(--ink);border-color:var(--req)}
.spx .pipe{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.spx .pipe .pp{font-family:var(--mono);font-size:11.5px;padding:6px 10px;border-radius:8px;background:var(--ground-3);border:1px solid var(--line-2);color:var(--pp-ink);white-space:nowrap;animation:pin .4s both}
.spx .pipe button.pp{cursor:pointer}
.spx .pipe button.pp:hover{border-color:var(--req);color:var(--req)}
.spx .pipe svg{width:12px;height:12px;stroke:var(--faint);fill:none;stroke-width:2}
@keyframes pin{from{opacity:0;transform:translateY(4px)}}
.spx pre.pl{margin:0;background:var(--code-bg);border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-family:var(--mono);font-size:12px;line-height:1.65;color:var(--code-ink);overflow-x:auto;white-space:pre}
.spx pre.pl .c{color:var(--code-c)}
.spx pre.pl .s{color:var(--code-s)}
.spx pre.pl .n{color:var(--ok)}
.spx pre.pl .kw{color:var(--sec)}
.spx pre.pl .bad{color:var(--bad)}
.spx .hard{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.spx .hard li{display:grid;grid-template-columns:18px 1fr;gap:6px;font-size:13.5px;line-height:1.5;color:var(--hard-ink);text-wrap:pretty}
.spx .hard li>span{min-width:0}
.spx .hard li::before{content:'';width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--brand)}
.spx .note{border:1px dashed var(--line-2);border-radius:12px;padding:11px 14px}
.spx .note .k{margin-bottom:4px}
.spx .note p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.spx .stds{display:flex;flex-wrap:wrap;gap:6px}
.spx .stds span{font-family:var(--mono);font-size:11px;padding:4px 8px;border-radius:6px;border:1px solid var(--line-2);color:var(--muted)}
.spx .tech-btn{display:flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--ground-2);border-radius:9px;padding:7px 11px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.spx .tech-btn em{font-style:normal}
.spx .tech-btn svg{transition:transform .2s}
.spx .tech-btn:hover{color:var(--ink);border-color:var(--brand)}
.spx.tech-open .tech-btn svg{transform:rotate(180deg)}
/* technical details open as the lower part of the step card: what goes over the wire, standards, the live log.
   The height opens and closes with the same timing as the map above (0fr <-> 1fr), so the page below glides
   instead of jumping; while closed the part is hidden from focus and screen readers. */
.spx .tech{display:grid;grid-template-rows:0fr;border-top:1px solid transparent;visibility:hidden;
  transition:grid-template-rows .42s cubic-bezier(.2,.8,.2,1),border-color .3s,visibility 0s .42s}
.spx .tech.open{grid-template-rows:1fr;border-top-color:var(--line);visibility:visible;
  transition:grid-template-rows .42s cubic-bezier(.2,.8,.2,1),border-color .3s,visibility 0s}
.spx .tech>.tech-b{min-height:0;overflow:hidden}
/* lines hide while the map changes size (softpos.js, positionGraph) and fade back in once the boxes land */
.spx [data-ref="edges"]{transition:opacity .3s}
.spx .tech-b{display:flex;flex-direction:column}
.spx .tech .log{min-height:0;border-top:1px solid var(--line)}
.spx .tech-side{padding:18px 22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.spx .node.second{transition:opacity .2s}
.spx [data-ref="map"].flat .node.second{opacity:0;pointer-events:none}
.spx:not(.tech-open) [data-ref="nums"]{display:none}
.spx .log{display:flex;flex-direction:column;min-height:300px}
.spx .log-h{display:flex;justify-content:space-between;align-items:center;padding:16px 22px 12px;border-bottom:1px solid var(--line)}
.spx .log-h b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:8px}
.spx .log-h b i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:live 1.6s ease-in-out infinite}
@keyframes live{50%{opacity:.35}}
.spx .log-h .rt{font-size:10.5px;letter-spacing:0;color:var(--faint);font-weight:400;margin-left:6px;padding-left:10px;border-left:1px solid var(--line)}
.spx .log-h span{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.spx .log-b{padding:10px 22px 14px;max-height:520px;overflow:auto;font-family:var(--mono);font-size:11.5px;line-height:1.5}
.spx .log-b{scrollbar-width:thin;scrollbar-color:transparent transparent}
.spx .log-b:hover{scrollbar-color:var(--line-2) transparent}
.spx .log-b::-webkit-scrollbar{height:8px;width:8px}
.spx .log-b::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}
.spx .log-b:hover::-webkit-scrollbar-thumb{background:var(--line-2)}
.spx .ll{display:grid;grid-template-columns:18px 86px 92px max-content;gap:8px;padding:5px 10px 5px 0;border-radius:7px;animation:pin .3s both;white-space:nowrap;min-width:max-content}
.spx .ll:last-child{background:var(--log-last)}
.spx .ll .no{color:var(--faint)}
.spx .ll .t{color:var(--faint)}
.spx .ll .r{font-weight:600}
.spx .ll .m{color:var(--log-m)}
.spx .ll.req .r{color:var(--req)}
.spx .ll.ok .r{color:var(--ok)}
.spx .ll.bad .r{color:var(--bad)}
.spx .ll.bad .m{color:var(--log-bad-m)}
.spx .ll.sec .r{color:var(--sec)}
.spx .ll.info .r{color:var(--muted)}
.spx .log-empty{color:var(--faint);padding:10px;font-size:11.5px}
.spx [data-ref="leader"]{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
.spx [data-ref="leader"] path{fill:none;stroke:var(--req);stroke-width:2;stroke-dasharray:6 6;filter:drop-shadow(0 0 6px var(--req-glow))}
.spx [data-ref="leader"] circle{fill:var(--req)}
@media (prefers-reduced-motion:reduce){.spx *,.spx *::before,.spx *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
.spx .step.skip,.spx .step.nr{opacity:.38;transition:opacity .2s}
.spx .step.skip:hover,.spx .step.nr:hover,.spx .step.skip.active,.spx .step.nr.active{opacity:.75}
.spx [data-ref="edges"] .edge.flow.xchg{stroke:var(--brand)!important;opacity:1!important;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:6 7!important;animation:xchg .55s ease-in-out infinite alternate}
@keyframes xchg{from{stroke-dashoffset:0}to{stroke-dashoffset:26}}
@media (prefers-reduced-motion:reduce){.spx [data-ref="edges"] .edge.flow.xchg{animation:none}
}
.spx .nfc.landing .tok{animation:none;transition:transform .7s cubic-bezier(.3,.7,.2,1)}

/* narrow step card (tablet column, phone sheet): the actions drop to their own full-width row so the title is never cut */
.spx .insp{container-type:inline-size}
@container (max-width:400px){
.spx .i-head{flex-wrap:wrap;row-gap:12px}
.spx .i-titles{flex:1 1 140px}
.spx .i-acts{order:3;flex:1 1 100%;margin-left:0}
.spx .i-acts .replay:not(.ico){flex:1;justify-content:center}
}

/* ---------- 2. landing page (.spx-embed) ---------- */
/* sits inside the page layout: no own max-widths, header row reduced to the settings button, settings as a dropdown */
.spx-embed .hdr,.spx-embed .steps,.spx-embed .main{max-width:none}
.spx-embed .hdr{padding:10px 0 14px;justify-content:flex-end}
.spx-embed .drawer{position:absolute;top:66px;right:0;bottom:auto;left:auto;width:380px;max-height:none;overflow:hidden;border:1px solid #CDD2DF;border-radius:16px;box-shadow:0 1px 2px rgba(13,14,22,.06),0 40px 80px -30px rgba(13,14,22,.35);transform:translateY(-8px);opacity:0;transition:transform .2s ease,opacity .2s ease,visibility 0s .2s}
.spx-embed .drawer.open{transform:none;opacity:1;transition:transform .2s ease,opacity .2s ease}
.spx-embed .dr-h{border-radius:16px 16px 0 0}.spx-embed .dr-sec:last-child{border-bottom:0;padding-bottom:26px}
.spx-embed .phonecol{top:88px}

@media (max-width:980px){.spx-embed .main{grid-template-columns:minmax(0,1fr)}.spx-embed .phonecol,.spx-embed .rightcol,.spx-embed .card,.spx-embed .mapcard{min-width:0;max-width:100%}}
@media (max-width:400px){.spx-embed .phone{width:100%;height:auto;aspect-ratio:340/700;border-radius:46px;padding:9px}.spx-embed .screen{border-radius:38px}}

/* below 1180px the map and log move out of the right column: a bottom dock (phones: fixed, opens a sheet; tablets: first card of the right column) */
.spx-embed .mdock,.spx-embed .msheet,.spx-embed .msheet-bg{display:none}
@media (max-width:1180px){
.spx-embed .rightcol{display:none}.spx-embed .tech{display:none!important}
.spx-embed .phone{width:340px;height:700px;aspect-ratio:auto;border-radius:52px;padding:11px}.spx-embed .screen{border-radius:42px}
.spx-embed .mdock{display:block;position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:60;transform:translateY(140%);transition:transform .38s cubic-bezier(.2,.8,.2,1);max-width:520px;margin:0 auto}
.spx-embed .mdock.show{transform:none}
.spx-embed .md-btn{width:100%;display:flex;flex-direction:column;gap:9px;padding:11px 14px 10px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 44px -16px rgba(13,14,22,.38);text-align:left;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.spx-embed .md-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.spx-embed .md-step{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.spx-embed .md-more{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--req);white-space:nowrap}
.spx-embed .md-rail{position:relative;display:flex;justify-content:space-between}
.spx-embed .md-line{position:absolute;left:24px;right:24px;top:14px;height:1px;background:var(--line-2)}
.spx-embed .md-z{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;width:56px}
.spx-embed .md-ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line-2);color:var(--faint);transition:background .3s,border-color .3s,color .3s}
.spx-embed .md-l{font-size:10.5px;font-weight:600;color:var(--faint);white-space:nowrap;transition:color .3s}
.spx-embed .md-z.on .md-ic{background:#E8FFF4;border-color:var(--brand);color:var(--req)}.spx-embed .md-z.on .md-l{color:var(--ink)}
.spx-embed .md-z.pt .md-ic{box-shadow:0 0 0 4px rgba(0,191,99,.22);border-color:var(--brand);color:var(--req);background:#E8FFF4}.spx-embed .md-z.pt .md-l{color:var(--req)}
.spx-embed .md-z.bad .md-ic{background:#FDECEF;border-color:var(--bad);color:var(--bad)}
.spx-embed .md-dot{position:absolute;top:9.5px;left:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(0,191,99,.16);opacity:0;z-index:2;pointer-events:none}
.spx-embed .md-msg{position:relative;display:block;height:20px;overflow:hidden;border-top:1px solid var(--line);padding-top:0;margin-top:1px}
.spx-embed .md-msg span{position:absolute;left:0;right:0;top:4px;font-family:var(--mono);font-size:11px;line-height:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spx-embed .md-msg .cap{font-family:var(--body);font-size:12px;color:var(--muted)}
.spx-embed .msheet-bg{display:block;position:fixed;inset:0;z-index:70;background:rgba(13,14,22,.38);opacity:0;pointer-events:none;transition:opacity .25s}
.spx-embed .msheet-bg.open{opacity:1;pointer-events:auto}
.spx-embed .msheet{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:71;max-height:84svh;background:#f7f7f7;border-radius:20px 20px 0 0;transform:translateY(104%);transition:transform .34s cubic-bezier(.2,.8,.2,1);box-shadow:0 -24px 60px -24px rgba(13,14,22,.45);max-width:640px;margin:0 auto}
.spx-embed .msheet.open{transform:none}
.spx-embed .ms-h{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 10px 12px 20px;touch-action:none;cursor:grab}
.spx-embed .ms-grab{position:absolute;left:50%;top:8px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line-2)}
.spx-embed .ms-t{display:flex;flex-direction:column;gap:2px}.spx-embed .ms-t b{font-size:16px;color:var(--ink)}.spx-embed .ms-t span{font-size:12.5px;color:var(--muted)}
.spx-embed .ms-x{width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:24px;line-height:1;color:var(--muted);cursor:pointer}
.spx-embed .ms-b{overflow:auto;overscroll-behavior:contain;padding:0 10px 14px;display:flex;flex-direction:column;gap:10px}
.spx-embed .ms-b>*{flex-shrink:0}
.spx-embed .ms-b .log{background:var(--ground-2);border:1px solid var(--line);border-radius:20px;min-height:0;overflow:hidden}
.spx-embed .ms-b .log-b{max-height:none;padding:10px 16px 14px}.spx-embed .ms-b .log-h{padding:14px 16px 10px}.spx-embed .ms-b .log-h .rt{display:none}
.spx-embed .ctl:has([data-ref="segTip"]),.spx-embed .dr-sec:has([data-ref="segMode"]){display:none}
.spx-embed .drawer.open~.mdock{transform:translateY(140%)}
.spx-embed .ms-foot{margin:0;padding:10px 20px calc(12px + env(safe-area-inset-bottom));font-size:12px;color:var(--faint);text-align:center;border-top:1px solid var(--line)}
}

@media (min-width:700px) and (max-width:1180px){
.spx-embed .main{grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start}
.spx-embed .phonecol{position:sticky;top:84px}
.spx-embed .rightcol{display:flex;gap:14px}.spx-embed .rightcol .mapcard{display:none}
.spx-embed .mdock{display:block;position:static;transform:none;max-width:none;margin:0;z-index:auto}
.spx-embed .md-btn{padding:16px 18px 14px;gap:14px;border-radius:20px;box-shadow:var(--card-shadow);transition:border-color .2s}
.spx-embed .md-btn:hover{border-color:var(--brand)}
.spx-embed .md-step{font-size:14px}
.spx-embed .md-ic{width:36px;height:36px}.spx-embed .md-line{top:18px;left:30px;right:30px}.spx-embed .md-dot{top:13.5px}.spx-embed .md-z{width:72px}.spx-embed .md-l{font-size:11.5px}
.spx-embed .md-msg{height:24px}.spx-embed .md-msg span{top:7px;font-size:11.5px}
}

/* phones and portrait tablets: steps become one swipeable row of chips, bleeding to the screen edges; the active chip is scrolled into view by renderSteps() */
@media (max-width:980px){
.spx-embed .steps{position:relative;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-bottom:0;margin:0 calc(-1*clamp(16px,4vw,32px)) 16px;padding:2px clamp(16px,4vw,32px) 4px}
.spx-embed .steps::-webkit-scrollbar{display:none}
.spx-embed .step{flex:none;flex-direction:row;align-items:baseline;gap:6px;padding:9px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;white-space:nowrap}
.spx-embed .step::after,.spx-embed .step .c{display:none}
.spx-embed .step.skip{border-style:dashed;background:transparent}
.spx-embed .step.active{border-color:var(--brand);background:#E8FFF4}
}

/* tablets and up: the steps bar sticks under the page header while the demo is in view; the phone sticks right below it.
   --steps-h (bar height + its bottom margin) is set by fit(); .stuck (set on scroll) paints a full-width band only while pinned */
@media (min-width:700px){
.spx-embed .steps{position:sticky;top:68px;z-index:10;clip-path:inset(0 -100vmax -2px)}
.spx-embed .steps.stuck{background:#f7f7f7;box-shadow:0 0 0 100vmax #f7f7f7}
.spx-embed .phonecol{top:calc(68px + var(--steps-h,101px))}
}
/* portrait tablets: the chip row sits inside the content grid and stretches edge to edge (scrolls only if it cannot fit) */
@media (min-width:700px) and (max-width:980px){
.spx-embed .steps{margin:0 0 16px;padding:10px 0;gap:6px}
.spx-embed .step{flex:1 0 auto;justify-content:center;padding:9px 10px}
}

/* phones and portrait tablets: the interactive demo is replaced by the film (softpos.js, "film"), a story-style
   player: one illustrated scene plays the payment step by step, on its own or by swiping, and the page scrolls as usual */
.spx .film{display:none}
@media (max-width:980px){
.spx-embed .hdr,.spx-embed .drawer,.spx-embed .steps,.spx-embed .main,.spx-embed .mdock,.spx-embed .msheet,.spx-embed .msheet-bg,.spx-embed [data-ref="leader"]{display:none!important}
.spx-embed .film{display:flex}
}
.spx .film{flex-direction:column;gap:12px;max-width:560px;margin:0 auto;padding-bottom:12px;touch-action:pan-y pinch-zoom}
.spx .film__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.spx .film__top{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.spx .film__bars{flex:1;display:flex;gap:4px}
/* each segment is a 3px bar inside a taller button, so it is easy to hit; the current one fills while it plays */
.spx .film__bars button{flex:1;display:flex;align-items:center;height:32px;padding:0;border:0;background:none;cursor:pointer}
.spx .film__bars i{position:relative;flex:1;height:3px;overflow:hidden;border-radius:2px;background:var(--line-2);transition:height .2s}
.spx .film__bars i::after{content:'';position:absolute;inset:0;background:var(--brand);transform:scaleX(var(--p,0));transform-origin:left}
.spx .film__bars button[aria-current] i{background:color-mix(in srgb,var(--brand) 30%,var(--line-2))}
.spx .film__bars button:hover i{height:5px}
.spx .film__art{display:block;width:100%;max-height:52svh;overflow:visible;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.spx .film__cap>b{display:block;margin-bottom:6px;font-family:var(--display);font-size:26px;font-weight:400;line-height:1.15;color:var(--ink)}
/* room for three lines, so the controls below don't jump between steps */
.spx .film__cap>p{margin:0;min-height:4.5em;font-size:15px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.spx .film__wire{margin-top:6px;font-size:13px}
.spx .film__wire summary{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-weight:600;color:var(--req);cursor:pointer;list-style:none}
.spx .film__wire summary::-webkit-details-marker{display:none}
.spx .film__wire summary::after{content:'+';font-weight:400}
.spx .film__wire[open] summary::after{content:'\2212'}
.spx .film__wire>div{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--log-m)}
.spx .film__wire b{font-weight:600;color:var(--req)}

/* the illustration: one SVG, every scene is a state of data-scene="1".."5" */
.spx .film__art text{font-family:var(--body);font-size:10px;fill:var(--muted);text-anchor:middle}
.spx .f-body,.spx .f-notch{fill:var(--ink)}
.spx .f-screen{fill:#fff}
.spx .f-s{opacity:0;transition:opacity .35s}
.spx .film__art[data-scene="1"] .f-s1,.spx .film__art[data-scene="2"] .f-s2,.spx .film__art[data-scene="3"] .f-s3,.spx .film__art[data-scene="4"] .f-s4,.spx .film__art[data-scene="5"] .f-s5{opacity:1}
.spx .f-s1 path,.spx .f-nfc{fill:none;stroke:var(--brand);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.spx .f-nfc{stroke:var(--ink);stroke-width:1.8}
.spx .film__art .f-amt{font-family:var(--display);font-size:22px;font-weight:700;fill:var(--ink)}
.spx .f-cta{fill:var(--ink)}
.spx .film__art .f-cta__t{fill:#fff;font-weight:600}
.spx .f-lock circle{fill:var(--brand)}
.spx .f-lock path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.spx .f-spin{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-dasharray:60 41;transform-box:fill-box;transform-origin:center;animation:fspin 1s linear infinite}
.spx .f-okbg{fill:#E3F8EF}
.spx .f-ok{fill:none;stroke:var(--req);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:32;stroke-dashoffset:32;transition:stroke-dashoffset .6s .25s}
.spx .film__art[data-scene="5"] .f-ok{stroke-dashoffset:0}
.spx .film__art .f-strong{font-size:13px;font-weight:700;fill:var(--ink)}

.spx .f-phone{transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.spx .film__art[data-scene="3"] .f-phone{transform:translate(26px,0)}
.spx .film__art[data-scene="4"] .f-phone{transform:translate(-108px,8px) scale(.6)}

.spx .f-card{transform-box:fill-box;transform-origin:center;transform:translate(-130px,40px) rotate(-35deg);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .4s}
.spx .film__art[data-scene="3"] .f-card{transform:translate(12px,0) rotate(-12deg);opacity:1}
.spx .f-card__body{fill:#2A2E45}
.spx .f-chip{fill:#F3D58A}
.spx .f-stripe{fill:rgba(255,255,255,.35)}
.spx .f-waves path{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;opacity:0}
.spx .film__art[data-scene="3"] .f-waves path{animation:fwave 1.6s ease-out infinite}
.spx .film__art[data-scene="3"] .f-waves path:nth-child(2){animation-delay:.2s}
.spx .film__art[data-scene="3"] .f-waves path:nth-child(3){animation-delay:.4s}

.spx .f-node{opacity:0;transition:opacity .45s,transform .7s cubic-bezier(.2,.8,.2,1)}
.spx .f-node circle{fill:#fff;stroke:var(--line-2);stroke-width:1.2}
.spx .f-node path{fill:none;stroke:var(--req);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.spx .film__art .f-node text{font-size:11px;font-weight:600;fill:var(--ink)}
.spx .f-cloud{transform:translate(300px,62px)}
.spx .f-psp{transform:translate(205px,150px)}
.spx .f-bank{transform:translate(305px,80px)}
/* step 1: the phone opens a session with our cloud; step 4: card data goes from the phone straight to the payment
   provider and on to the bank, never through our cloud (as on the desktop map) */
.spx .film__art[data-scene="1"] .f-cloud,.spx .film__art[data-scene="4"] .f-psp,.spx .film__art[data-scene="4"] .f-bank{opacity:1}
.spx .f-route,.spx .f-link{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:4 5;opacity:0;transition:opacity .45s}
.spx .film__art[data-scene="4"] .f-route,.spx .film__art[data-scene="1"] .f-link{opacity:1}
.spx .f-dot{fill:var(--brand);opacity:0;transition:opacity .3s}
.spx .film__art[data-scene="4"] .f-dot{opacity:1}
@media (prefers-reduced-motion:reduce){.spx .f-dot{display:none}}
@keyframes fspin{to{transform:rotate(360deg)}}
@keyframes fwave{0%{opacity:0;transform:translateX(-6px)}30%{opacity:1}100%{opacity:0;transform:translateX(6px)}}

/* ---------- 3. hero preview (.spx-preview) ---------- */
/* only the phone, laid out on a 420x800 canvas; the page scales the canvas to fit the hero (styles.css) */
.spx-preview{width:420px;height:800px;isolation:isolate;pointer-events:none}
.spx-preview .hdr,.spx-preview .drawer,.spx-preview .steps,.spx-preview .rightcol,.spx-preview .mdock,.spx-preview .msheet,.spx-preview .msheet-bg,.spx-preview [data-ref="leader"],.spx-preview .pin,.spx-preview .tip,.spx-preview .tapcue{display:none!important}
.spx-preview .main{display:block;max-width:none;margin:0}
.spx-preview .phonecol{position:static;display:block;padding:20px 40px 80px}
.spx-preview .phone{margin:0}