@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--cream:#fffbee;--white:#fffefa;--ink:#10264a;--muted:#687992;--blue:#1086ed;--line:#e9e7dc;--soft:#f0f7ff;--green:#168b60;--font:'DM Sans',sans-serif;--display:'Manrope',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}.brand{display:flex;align-items:center;gap:9px;font:800 23px var(--display);letter-spacing:-1px;color:var(--ink);text-decoration:none}.brand-mark{height:33px;width:33px;border-radius:11px;background:var(--ink);color:white;display:grid;place-items:center;font:800 17px var(--display)}.demo-nav{height:73px;padding:0 max(calc((100vw - 1190px)/2),24px);display:flex;align-items:center;justify-content:space-between;background:#fffefa;border-bottom:1px solid var(--line)}.back-link{color:#65758d;font-size:13px;font-weight:600;text-decoration:none}.demo-nav-title,.eyebrow,.step-kicker{font-size:10px;letter-spacing:1.25px;font-weight:800;color:#687b95}.demo-shell{width:min(1160px,calc(100% - 40px));margin:42px auto 90px}.demo-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:22px}.demo-heading h1{font:800 clamp(34px,4.7vw,52px)/1.12 var(--display);letter-spacing:-2px;margin:12px 0}.demo-heading h1 em{font-style:normal;color:var(--blue)}.demo-heading p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;max-width:610px}.mode-switch{background:white;border:1px solid var(--line);border-radius:14px;padding:12px 15px;min-width:260px}.switch-caption{display:block;font-size:9px;letter-spacing:1.1px;font-weight:800;color:#8490a1;margin-bottom:8px}.mode-switch label{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;cursor:pointer}.mode-switch input{position:absolute;opacity:0}.switch-ui{width:30px;height:18px;border-radius:20px;background:#c7d0dd;position:relative;transition:.2s}.switch-ui:after{content:"";position:absolute;background:white;width:12px;height:12px;border-radius:50%;left:3px;top:3px;transition:.2s}.mode-switch input:checked+.switch-ui{background:var(--blue)}.mode-switch input:checked+.switch-ui:after{left:15px}.mode-switch small{display:block;color:#7d8ba0;font-size:10px;margin:8px 0 0 39px}.truth-banner{display:flex;gap:12px;align-items:center;border-radius:11px;padding:13px 16px;margin-bottom:17px;font-size:12px;line-height:1.5}.truth-banner b{font-size:9px;letter-spacing:.9px;white-space:nowrap}.simulation-banner{background:#fff4d8;color:#805819;border:1px solid #f2dfb4}.backend-banner{background:#e5f5ed;color:#236b51;border:1px solid #cce9da}.setup-card,.side-card,.activity-card{background:var(--white);border:1px solid var(--line);border-radius:19px;box-shadow:0 8px 26px #10264a08}.setup-card{padding:22px 24px}.setup-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.setup-title h2,.side-heading h2,.activity-head h2{font:700 20px var(--display);margin:5px 0 0;letter-spacing:-.5px}.status-pill{font-size:10px;color:var(--green);background:#eaf7f1;padding:7px 10px;border-radius:30px;display:flex;gap:6px;align-items:center}.status-pill i{width:6px;height:6px;background:#22ad75;border-radius:50%}.status-pill.offline{color:#aa6830;background:#fff1df}.status-pill.offline i{background:#eb9a3b}.setup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.setup-grid label,.field-label{font-size:10px;letter-spacing:.45px;font-weight:700;color:#70809a}.setup-grid input,.field-label input,.field-label select{margin-top:6px;display:block;width:100%;height:40px;border:1px solid #dce2e8;border-radius:9px;background:#fff;padding:0 11px;color:var(--ink);font:500 12px var(--font);outline:none}.setup-grid input:focus,.field-label input:focus,.field-label select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1086ed1c}.setup-actions{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}.button{height:42px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 16px;border:0;border-radius:10px;font:700 12px var(--font);cursor:pointer;transition:.18s}.button:hover{transform:translateY(-1px);filter:brightness(.98)}.button:disabled{opacity:.48;cursor:not-allowed;transform:none}.button-quiet{color:var(--ink);background:#edf4fb;border:1px solid #dceaf8}.button-primary{background:var(--blue);color:white;box-shadow:0 5px 13px #1086ed2b}.button-dark{background:var(--ink);color:white}.reserve-control{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:10px;height:42px;padding:0 9px;font-size:11px;color:#66768f}.reserve-control input{border:0;width:53px;color:var(--ink);font:700 12px var(--font);outline:0}.reserve-control input[type=number]{width:39px}.wallet-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:#f4f8fc;border-radius:12px;padding:14px;margin-top:17px}.wallet-summary>div{border-right:1px solid #dfe7ef;padding-left:10px}.wallet-summary>div:last-child{border:0}.wallet-summary small,.consumer-balance small,.merchant-metrics small{display:block;font-size:9px;letter-spacing:.7px;color:#8391a4;font-weight:800}.wallet-summary strong{display:block;font:700 16px var(--display);margin-top:5px}.paypal-text{border:0;background:transparent;color:#147bc7;font:700 11px var(--font);padding:14px 0 4px;cursor:pointer}.microcopy{color:#8190a5;font-size:10px;line-height:1.55;margin:7px 0 0}.flow-connector{display:flex;align-items:center;justify-content:center;gap:12px;height:59px;color:#76869c;font-size:9px;font-weight:800;letter-spacing:.9px}.flow-connector i{height:1px;background:#cfd9e3;width:90px}.perspectives{display:grid;grid-template-columns:1fr 38px 1fr;gap:13px;align-items:stretch}.side-card{padding:21px;min-width:0}.side-heading{display:flex;align-items:center;gap:10px;margin-bottom:16px}.side-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font:800 14px var(--display)}.consumer-avatar{background:#e3f2ff;color:#1382df}.merchant-avatar{background:#e6f7ee;color:#18845c}.side-heading h2{font-size:19px}.role-tag{margin-left:auto;border-radius:30px;background:#f1f3f5;color:#75839a;padding:6px 8px;font-size:8px;letter-spacing:.8px;font-weight:800}.offline-callout{display:flex;align-items:center;gap:7px;border-radius:9px;background:#f0f7ff;padding:9px 10px;color:#59708d;font-size:10px}.online-dot{width:7px;height:7px;border-radius:50%;background:#34ae7b}.offline-callout.offline{background:#fff2e2;color:#9a6428}.offline-callout.offline .online-dot{background:#ec9b3f}.offline-callout button{margin-left:auto;border:0;background:white;color:#267cc0;border-radius:6px;padding:6px 8px;font:700 9px var(--font);cursor:pointer;white-space:nowrap}.consumer-balance{display:flex;align-items:center;justify-content:space-between;border-radius:12px;padding:14px;background:#f7faff;margin:13px 0}.consumer-balance strong{font:800 25px var(--display);display:block;margin-top:5px}.lock-symbol{width:33px;height:33px;border-radius:11px;background:#e1f1ff;color:#1683da;display:grid;place-items:center}.field-label{display:block;margin-top:11px}.receipt-preview{padding:11px 0 3px}.receipt-preview div{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:10px;color:#75849a}.receipt-preview b{color:#435874;font-size:10px;text-align:right}.full{width:100%;margin-top:10px}.handoff{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7c8da3;font-size:8px;font-weight:800;letter-spacing:.8px}.handoff div{width:35px;height:35px;display:grid;place-items:center;background:white;border:1px solid var(--line);color:var(--blue);font-size:19px;border-radius:50%;margin:8px 0}.merchant-brand{display:flex;align-items:center;gap:10px;padding:13px;border-radius:11px;background:#f8faf8;margin-top:9px}.merchant-logo{height:36px;width:36px;border-radius:11px;background:#e5f6ed;color:#17855d;display:grid;place-items:center;font-size:19px}.merchant-brand strong{font-size:12px;display:block}.merchant-brand small{display:block;color:#8391a4;font-size:9px;margin-top:3px}.merchant-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:11px 0}.merchant-metrics>div{padding:11px;border:1px solid var(--line);border-radius:10px}.merchant-metrics strong{display:block;font:700 15px var(--display);margin-top:5px}.merchant-section-title{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:9px 1px;font-size:9px;letter-spacing:.8px;color:#77879d;font-weight:800}.merchant-section-title span+span{background:#eaf3fc;color:#1c7dc4;padding:3px 7px;border-radius:20px}.merchant-inbox{min-height:105px;max-height:180px;overflow:auto}.empty-inbox{text-align:center;color:#8b98aa;font-size:10px;padding:19px}.empty-inbox>span{font-size:20px;color:#9cb4ca}.inbox-receipt{display:flex;align-items:center;gap:9px;border-bottom:1px solid #eef0ec;padding:10px 2px}.receipt-icon{width:29px;height:29px;border-radius:9px;background:#e6f7ef;color:#18845c;display:grid;place-items:center}.inbox-receipt strong{display:block;font-size:10px}.inbox-receipt small{display:block;font-size:9px;color:#8996a6;margin-top:3px}.receipt-amount{margin-left:auto;font-size:11px;font-weight:800;white-space:nowrap}.settlement-note{display:flex;gap:8px;background:#f6f7f3;border-radius:9px;padding:9px;margin-top:9px;color:#75849a}.settlement-note>span{color:#5888ac}.settlement-note p{font-size:9px;line-height:1.5;margin:0}.timeline-label{font-size:9px;font-weight:800;letter-spacing:.8px;color:#75849a;margin:13px 0 7px}.timeline-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.timeline-step{background:#f2f4f6;color:#8994a3;border-radius:6px;padding:7px 5px;text-align:center;font-size:8px}.timeline-step.done{background:#e8f6ef;color:#20835c}.sync-timeline-card p{font-size:10px;color:#66768e}.activity-card{margin-top:16px;padding:20px 22px}.activity-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.activity-head h2{font-size:18px}.local-storage-tag{font-size:9px;color:#8491a3;background:#f3f5f5;padding:7px 9px;border-radius:20px}.transactions{display:grid;gap:7px}.transaction{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f8fafb;border-radius:9px;padding:10px 12px}.transaction strong{font-size:11px}.transaction small{display:block;font-size:9px;color:#8995a5;margin-top:4px}.tx-badge-group{font-size:9px;font-weight:800;color:#9b7132;background:#fff1d7;border-radius:20px;padding:6px 8px;white-space:nowrap}.tx-badge-group.settled{background:#e4f5ec;color:#20835c}.advanced{margin-top:17px;color:#52647e;font-size:12px}.advanced summary{cursor:pointer;font-weight:700}.advanced div{background:white;border:1px solid var(--line);border-radius:12px;padding:10px 15px;margin-top:9px}.advanced p{line-height:1.6}.notice{position:fixed;z-index:10;bottom:18px;left:50%;transform:translateX(-50%);max-width:min(620px,calc(100vw - 30px));background:#10264a;color:white;padding:11px 17px;border-radius:11px;box-shadow:0 8px 28px #10264a30;font-size:11px;opacity:.97;text-align:center}.notice:empty{display:none}
@media(max-width:900px){.demo-shell{width:min(100% - 30px,700px);margin-top:30px}.demo-heading{align-items:flex-start;flex-direction:column}.mode-switch{width:100%}.setup-grid{grid-template-columns:repeat(2,1fr)}.setup-actions{align-items:stretch}.setup-actions>.button{flex:1}.perspectives{grid-template-columns:1fr 1fr}.handoff{grid-column:1/-1;flex-direction:row;gap:7px;height:22px}.handoff div{transform:rotate(90deg);margin:0}.merchant-card{grid-column:2}.consumer-card{grid-column:1}.wallet-summary{grid-template-columns:repeat(2,1fr)}.wallet-summary>div:nth-child(2){border:0}.flow-connector{height:45px}}
@media(max-width:560px){.demo-nav{height:62px;padding:0 16px}.demo-nav-title{display:none}.demo-shell{width:calc(100% - 24px);margin-top:24px}.demo-heading h1{font-size:35px;letter-spacing:-1.3px}.demo-heading p{font-size:12px}.truth-banner{align-items:flex-start;flex-direction:column;gap:4px;font-size:10px}.setup-card,.side-card,.activity-card{padding:16px;border-radius:15px}.setup-title h2{font-size:18px}.setup-grid{gap:8px}.setup-grid input{height:38px;padding:0 8px;font-size:10px}.setup-actions{gap:7px}.setup-actions>.button{font-size:10px;padding:0 9px}.reserve-control{order:3;width:100%;justify-content:center}.wallet-summary{padding:11px 5px}.wallet-summary>div{padding-left:7px}.wallet-summary strong{font-size:14px}.wallet-summary small{font-size:8px}.flow-connector{font-size:7px;gap:7px}.flow-connector i{width:25px}.perspectives{grid-template-columns:1fr;gap:10px}.consumer-card,.merchant-card{grid-column:1}.handoff{grid-column:1;grid-row:2}.merchant-card{grid-row:3}.side-card{padding:16px}.activity-card{padding:16px}.activity-head h2{font-size:16px}.local-storage-tag{font-size:8px}.transaction{align-items:flex-start}.tx-badge-group{font-size:8px}.notice{bottom:8px}}
.setup-grid label small{display:block;margin-top:5px;color:var(--muted);font-size:10px;font-weight:400;line-height:1.4}
.connection-settings{margin:0 0 16px;color:var(--muted);font-size:11px}
.connection-settings summary{width:max-content;cursor:pointer;font-weight:700;color:#52647e}
.connection-settings .setup-grid{margin-top:12px}