.payment-story{--story-ink:#111;--story-muted:#626262;--story-border:#dedede;--story-surface:#f6f6f6;border:1px solid var(--story-border);background:var(--story-surface);text-align:left;isolation:isolate;border-radius:12px;max-width:1120px;margin:54px auto 0;padding:22px 26px 20px;position:relative}.payment-story-header{border-bottom:1px solid var(--story-border);justify-content:space-between;align-items:center;gap:16px;padding-bottom:20px;display:flex}.payment-story-header p{color:var(--story-muted);font-size:13px}.payment-story-controls{flex-shrink:0;gap:4px;display:flex}.payment-story button{font:inherit;color:var(--story-ink);cursor:pointer}.payment-story-controls button{background:0 0;border:1px solid #ccc;border-radius:5px;padding:8px 12px;font-size:14px}.payment-story-controls button:hover{background:#fff;border-color:#111}.payment-story button:focus-visible{outline-offset:4px;outline:2px solid #111}.payment-scene{grid-template-columns:minmax(0,1fr) minmax(280px,1.6fr) minmax(0,1fr);align-items:center;gap:34px;min-height:460px;padding:34px 0;display:grid;position:relative}.payment-scene:before{content:"";z-index:-1;background:#ccc;height:1px;position:absolute;top:52%;left:12%;right:12%}.payment-party{border:1px solid var(--story-border);background:#fff;border-radius:8px;min-width:0;padding:22px 18px;transition:border-color .4s,transform .5s}.payment-party-label{color:var(--story-muted);font-size:13px}.payment-party h3{letter-spacing:-.025em;margin-top:5px;font-size:19px;line-height:1.25}.payment-party .payment-party-status{border-top:1px solid #e7e7e7;min-height:48px;margin-top:18px;padding-top:12px;font-size:14px;line-height:1.45}.payment-party-number{letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap;margin:12px 0 5px;font-size:clamp(28px,3.1vw,40px);font-weight:500;display:block}.payment-party p{color:#555;font-size:14px;line-height:1.5}.payment-party small{min-height:37px;color:var(--story-muted);margin-top:9px;font-size:12px;line-height:1.5;display:block}.payment-card-wrap{min-width:0;transition:transform .55s cubic-bezier(.2,.75,.25,1)}.payment-agent{justify-content:center;align-items:center;gap:9px;margin-bottom:14px;font-size:14px;display:flex}.payment-agent>span{color:#fff;background:#111;border-radius:50%;place-items:center;width:28px;height:28px;font-size:19px;display:grid}.payment-agent small{color:#626262;font-size:12px}.payment-invoice{background:#fff;border:1px solid #c9c9c9;border-radius:8px;padding:22px;transition:box-shadow .45s,border-color .45s;box-shadow:0 8px 18px #00000006}.payment-invoice header{color:#626262;justify-content:space-between;align-items:start;gap:12px;min-height:35px;font-size:13px;display:flex}.payment-status{text-align:right;background:#fafafa;border:1px solid #dedede;border-radius:4px;padding:3px 6px;font-size:12px;line-height:1.3}.payment-invoice .payment-amount-label{color:#555;min-height:21px;margin:23px 0 6px;font-size:14px}.payment-amount{letter-spacing:-.055em;font-variant-numeric:tabular-nums;margin-bottom:25px;font-size:clamp(36px,4.3vw,54px);font-weight:500;line-height:1.1;display:block}.payment-terms{margin:0;font-size:13px}.payment-terms>div{border-top:1px solid #e8e8e8;justify-content:space-between;align-items:start;gap:12px;padding:11px 0;display:flex}.payment-terms dt{color:#626262}.payment-terms dd{text-align:right;font-variant-numeric:tabular-nums;margin:0}.payment-terms .term-emphasized{font-weight:600}.payment-signoffs{color:#737373;flex-wrap:wrap;gap:8px 14px;padding:14px 0;font-size:12px;display:flex}.payment-signoffs [data-approved=true]{color:#111}.payment-external{color:#626262;border-top:1px solid #ddd;min-height:31px;padding-top:12px;font-size:12px;line-height:1.5}.payment-external[data-paid=true]{color:#111;font-weight:500}.payment-story[data-step="1"] .payment-invoice{border-color:#111;box-shadow:0 8px 24px #0000000c}.payment-story[data-step="2"] .payment-card-wrap{transform:translate(-9px)}.payment-story[data-step="2"] .payment-buyer,.payment-story[data-step="3"] .payment-supplier{border-color:#111;transform:translateY(-4px)}.payment-story[data-step="3"] .payment-card-wrap{transform:translate(9px)}.payment-story[data-step="4"] .payment-invoice,.payment-story[data-step="4"] .payment-party{border-color:#111}.payment-story-caption{text-align:center;max-width:740px;min-height:140px;margin:0 auto 16px;padding:0 12px}.payment-story-caption>span{color:#626262;font-size:13px}.payment-story-caption h3{letter-spacing:-.04em;margin:10px 0;font-size:24px;line-height:1.2}.payment-story-caption p{color:#626262;font-size:16px;line-height:1.55}.payment-story-steps{border-top:1px solid #d7d7d7;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding-top:17px;display:grid}.payment-story-steps button{text-align:left;background:0 0;border:1px solid #0000;border-radius:5px;justify-content:center;align-items:center;gap:8px;padding:10px 5px;font-size:13px;line-height:1.4;display:flex}.payment-story-steps button>span{border:1px solid #ccc;border-radius:50%;flex-shrink:0;place-items:center;width:22px;height:22px;font-size:12px;display:grid}.payment-story-steps button[aria-current=step]{color:#fff;background:#111}.payment-story-steps button[aria-current=step]>span{border-color:#777}.payment-story-steps button:hover:not([aria-current]){background:#fff;border-color:#bbb}.payment-story .payment-story-note{color:#626262;text-align:center;margin:18px 0 0;max-width:800px;margin-inline:auto;font-size:12px;line-height:1.6}.payment-story-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@keyframes payment-reveal{0%{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.payment-story-caption,.payment-amount,.payment-party-status,.payment-status{animation:.4s ease-out both payment-reveal}@media (max-width:1000px){.payment-story{padding:20px}.payment-scene{grid-template-columns:minmax(0,1fr) minmax(270px,1.6fr) minmax(0,1fr);gap:18px}.payment-party{padding:18px 13px}.payment-invoice{padding:18px}.payment-story-steps button{text-align:center;flex-direction:column;font-size:12px}}@media (max-width:760px){.payment-story{margin-top:35px;padding:16px}.payment-story-header{align-items:start}.payment-story-header p{max-width:200px;line-height:1.5}.payment-scene{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-height:0;padding:22px 0}.payment-scene:before{display:none}.payment-card-wrap{grid-area:1/1/auto/-1;width:100%;max-width:390px;margin:auto}.payment-buyer{grid-area:2/1}.payment-supplier{grid-area:2/2}.payment-party h3{font-size:18px}.payment-party-number{font-size:32px}.payment-invoice{padding:22px}.payment-story-caption{min-height:170px;padding:0}.payment-story-caption h3{font-size:22px}.payment-story-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.payment-story-steps button{padding:9px 5px;font-size:13px}.payment-story-controls button{padding:7px 9px}.payment-story[data-step] .payment-card-wrap{transform:none}}@media (max-width:380px){.payment-party{padding:14px 10px}.payment-party-number{font-size:28px}.payment-party .payment-party-status{min-height:58px}.payment-agent,.payment-story-header,.payment-terms>div{flex-wrap:wrap}.payment-terms dd{text-align:left}}@media (prefers-reduced-motion:reduce){.payment-story *{transition:none!important;animation:none!important;transform:none!important}}@media (max-width:480px){.payment-story-caption{min-height:245px}}