/* PAKA payments: one continuous connection, not an embedded checkout. */
.payment-story{background:#141210;color:#fafafa;padding:112px 0;isolation:isolate}
.payment-story-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:88px}
.payment-story-copy{min-width:0;max-width:560px}
.payment-story-copy>.pf-eyebrow{margin-bottom:24px}
.payment-story-copy h2{font-size:clamp(38px,4.25vw,60px);line-height:1.08;text-wrap:balance}
.payment-story-copy h2 span{color:var(--orange)}
.payment-story-copy>p{font-size:16px;line-height:1.7;color:#bcb9b4;margin-top:24px;max-width:510px}
.payment-story-copy>.text-link{margin-top:18px}
.payment-story-details{list-style:none;margin:32px 0 0;padding:0;counter-reset:payment-step}
.payment-story-details li{position:relative;counter-increment:payment-step;padding:18px 0 18px 36px;border-top:1px solid #ffffff24}
.payment-story-details li:before{content:'0' counter(payment-step);position:absolute;inset-inline-start:0;top:21px;font-size:11px;line-height:1.5;color:#928b83;font-variant-numeric:tabular-nums}
.payment-story-details b{display:block;font-size:16px;line-height:1.4;font-weight:600}
.payment-story-details li>span{display:block;font-size:14px;line-height:1.6;color:#bcb9b4;margin-top:7px;max-width:440px}
.payment-story-art{min-width:0;position:relative;--payment-cycle:9.6s}
.payment-visual{position:relative;padding:78px 0 38px;min-height:350px}
.payment-flow{display:grid;grid-template-columns:80px minmax(24px,1fr) 104px minmax(24px,1fr) 80px;align-items:start;max-width:620px;margin:auto}
.payment-node{display:grid;justify-items:center;position:relative;z-index:1}
.payment-node-ring{width:80px;height:80px;border:1px solid #ffffff38;border-radius:50%;display:grid;place-items:center;position:relative;background:#141210}
.payment-node-ring>svg{width:28px;height:28px;color:#c6c0b8;stroke-width:1.35}
.payment-node>span{font-size:12px;line-height:1.4;color:#bcb9b4;white-space:nowrap;margin-top:24px}
.payment-node--payment .payment-node-ring{width:104px;height:104px;margin-top:-12px;border-color:#ff542e66}
.payment-node--payment .payment-node-ring>svg{width:32px;height:32px;color:var(--orange)}
.payment-node--payment>span{color:#fafafa;margin-top:12px}
.payment-orbit{position:absolute;inset:-12px;border:1px solid #ff542e26;border-radius:50%}
.payment-orbit:after{content:'';position:absolute;width:5px;height:5px;background:#ff542e;border-radius:50%;top:4px;left:25px}
.payment-wire{height:1px;background:#ffffff24;position:relative;margin-top:40px;overflow:visible}
.payment-wire>i{position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left}
.payment-wire>i:after{content:'';position:absolute;inset-inline-end:-2px;top:-2px;width:5px;height:5px;background:var(--orange);border-radius:50%}
.payment-provider-row{text-align:center;margin-top:52px}
.payment-provider-row>span{display:block;font-size:11px;color:#928b83;margin-bottom:13px}
.payment-provider-row>div{display:inline-flex;align-items:center;gap:22px}
.payment-provider-row .payment-provider-logo{display:block;width:auto;object-fit:contain;flex:none}
.payment-provider-logo--stripe{height:27px}
.payment-provider-logo--payme{height:24px}
.payment-provider-row i{height:16px;width:1px;background:#ffffff24}



.payment-availability{font-size:12px;line-height:1.65;color:#928b83;max-width:500px;margin:24px auto 0;text-align:center}
.payment-story--home{min-height:100dvh;display:flex;align-items:center;padding-block:100px 64px}
.home-film-scene[data-film-index="payments"]{background:#141210}
.payment-story--home .payment-visual{min-height:330px}

/* Every stage remains legible; the animated stroke never retracts into a fragment. */
.payment-typing{position:absolute;inset:50% auto auto 50%;translate:-45% -40%;display:flex;gap:2px}
.payment-typing i{width:2px;height:2px;border-radius:50%;background:#fafafa;animation:payment-typing var(--payment-cycle) ease infinite}
.payment-typing i:nth-child(2){animation-delay:.16s}
.payment-typing i:nth-child(3){animation-delay:.32s}
.payment-node--conversation .payment-node-ring{animation:payment-conversation var(--payment-cycle) ease infinite}
.payment-wire--first>i{animation:payment-first-wire var(--payment-cycle) cubic-bezier(.22,1,.36,1) infinite}
.payment-wire--second>i{animation:payment-second-wire var(--payment-cycle) cubic-bezier(.22,1,.36,1) infinite}
.payment-node--payment .payment-node-ring{animation:payment-connection var(--payment-cycle) ease infinite}
.payment-orbit{animation:payment-orbit var(--payment-cycle) cubic-bezier(.22,1,.36,1) infinite}
.payment-node--confirmed .payment-node-ring{animation:payment-confirm-ring var(--payment-cycle) ease infinite}
.payment-node--confirmed .payment-check-base{color:#c6c0b8;opacity:.3}
.payment-node--confirmed .payment-check-draw{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;color:#ff542e;animation:payment-check-visibility var(--payment-cycle) linear infinite}
.payment-check-draw path{stroke-dasharray:1;stroke-dashoffset:1;animation:payment-confirm-check var(--payment-cycle) cubic-bezier(.22,1,.36,1) infinite}
.payment-node--confirmed>span{animation:payment-confirm-label var(--payment-cycle) ease infinite}
.payment-node--confirmed .payment-node-ring:after{content:'';position:absolute;inset:-1px;border:1px solid #ff542e;border-radius:50%;opacity:0;animation:payment-confirm-pulse var(--payment-cycle) ease-out infinite}
.payment-story-art[data-running="false"] .payment-visual *,.home-film-scene:not(.is-active) .payment-visual *{animation-play-state:paused!important}
@keyframes payment-typing{0%,5%,12%{opacity:.2;transform:translateY(0)}3%,9%{opacity:1;transform:translateY(-2px)}18%,100%{opacity:0;transform:translateY(0)}}
@keyframes payment-conversation{0%,20%{border-color:#ffffff80}32%,94%{border-color:#ffffff38}100%{border-color:#ffffff80}}
@keyframes payment-first-wire{0%,10%{transform:scaleX(0);opacity:0}12%{opacity:1}28%,94%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes payment-connection{0%,22%,100%{border-color:#ff542e66;background:#141210}32%,42%{border-color:#ff542e;background:#ff542e0c}55%,94%{border-color:#ff542e80;background:#141210}}
@keyframes payment-orbit{0%,22%{transform:rotate(-45deg);opacity:.25}44%,94%{transform:rotate(315deg);opacity:1}100%{transform:rotate(315deg);opacity:.25}}
@keyframes payment-second-wire{0%,42%{transform:scaleX(0);opacity:0}44%{opacity:1}60%,94%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes payment-confirm-ring{0%,57%,100%{border-color:#ffffff38;background:#141210}66%,94%{border-color:#ff542e;background:#ff542e12}}
@keyframes payment-check-visibility{0%,58%{opacity:0}59%,94%{opacity:1}100%{opacity:0}}
@keyframes payment-confirm-check{0%,58%{stroke-dashoffset:1}68%,100%{stroke-dashoffset:0}}
@keyframes payment-confirm-label{0%,57%,100%{color:#bcb9b4}68%,94%{color:#fafafa}}
@keyframes payment-confirm-pulse{0%,63%{opacity:0;transform:scale(1)}65%{opacity:.5;transform:scale(1)}79%,100%{opacity:0;transform:scale(1.35)}}
html[dir="rtl"] .payment-story-details li{padding-left:0;padding-right:36px}
html[dir="rtl"] .payment-wire>i{transform-origin:right}
html[dir="rtl"] .payment-orbit{scale:-1 1}
@media(min-width:1800px){.payment-story-layout{gap:120px}.payment-story--home .payment-story-layout{max-width:1560px}.payment-story--home h2{font-size:64px}}
@media(max-width:1100px){.payment-story-layout{gap:48px}.payment-flow{grid-template-columns:64px minmax(18px,1fr) 88px minmax(18px,1fr) 64px}.payment-node-ring{width:64px;height:64px}.payment-node--payment .payment-node-ring{width:88px;height:88px}.payment-wire{margin-top:32px}.payment-node-ring>svg{width:25px;height:25px}}
@media(max-width:800px){.payment-story{padding-block:72px}.payment-story-layout{grid-template-columns:1fr;gap:18px}.payment-story-copy{max-width:620px}.payment-story-copy h2{font-size:clamp(36px,6vw,48px)}.payment-story-art{width:100%;max-width:620px}.payment-visual{padding-top:52px;min-height:280px}.payment-story-details{margin-top:26px}.payment-story--home{padding-block:90px 38px}.payment-story--home .payment-visual{min-height:260px}.payment-story--home .payment-story-layout{gap:8px}
}
@media(max-width:600px){.payment-story>.shell{width:calc(100% - 40px)}.payment-story-copy>.pf-eyebrow{margin-bottom:18px}.payment-story-copy>p{margin-top:20px}.payment-story-copy h2{font-size:38px}.payment-story-copy>.text-link{margin-top:10px}.payment-flow{grid-template-columns:56px minmax(18px,1fr) 76px minmax(18px,1fr) 56px}.payment-node-ring{width:56px;height:56px}.payment-node--payment .payment-node-ring{width:76px;height:76px;margin-top:-10px}.payment-node--payment .payment-node-ring>svg{width:27px;height:27px}.payment-wire{margin-top:28px}.payment-node>span{font-size:11px;margin-top:18px}.payment-node--payment>span{margin-top:8px}.payment-provider-row{margin-top:40px}.payment-provider-logo--stripe{height:25px}.payment-provider-logo--payme{height:23px}.payment-visual{min-height:250px;padding-top:44px;padding-bottom:26px}.payment-availability{font-size:12px;margin-top:20px}.payment-story--home .payment-visual{min-height:240px}.payment-story--home{min-height:100dvh;padding-top:86px;padding-bottom:28px}
.payment-story-details li>span{font-size:14px}}
@media(max-height:760px) and (min-width:801px){.payment-story--home{padding-block:84px 30px}.payment-story--home h2{font-size:48px}}
@media(prefers-reduced-motion:reduce){
 .payment-visual *,.payment-visual *:after{animation:none!important}
 .payment-wire>i{transform:scaleX(1);opacity:1}
 .payment-node--confirmed .payment-node-ring{border-color:#ff542e;background:#ff542e12}
 .payment-check-draw{opacity:1!important}.payment-check-draw path{stroke-dashoffset:0}
 .payment-typing{display:none}
}
.payment-story-art[data-reduced="true"] .payment-visual *,.payment-story-art[data-reduced="true"] .payment-visual *:after{animation:none!important}
.payment-story-art[data-reduced="true"] .payment-wire>i{transform:scaleX(1);opacity:1}
.payment-story-art[data-reduced="true"] .payment-check-draw{opacity:1}
.payment-story-art[data-reduced="true"] .payment-check-draw path{stroke-dashoffset:0}
.payment-story-art[data-reduced="true"] .payment-node--confirmed .payment-node-ring{border-color:#ff542e;background:#ff542e12}
.payment-story-art[data-reduced="true"] .payment-typing{display:none}

/* Keep the short chapter complete on smaller phone heights. */
@media(max-width:600px) and (max-height:740px){
 .payment-story--home{padding-block:84px 20px}
 .payment-story--home .payment-story-copy h2{font-size:34px}
 .payment-story--home .payment-story-copy>.pf-eyebrow{margin-bottom:16px}
 .payment-story--home .payment-story-copy>p{font-size:15px;line-height:1.6;margin-top:16px}
 .payment-story--home .payment-visual{min-height:214px;padding-top:32px;padding-bottom:18px}
 .payment-story--home .payment-provider-row{margin-top:32px}
}
@media(max-width:600px) and (max-height:740px){
 .payment-story--home .payment-story-layout{gap:0}
 .payment-story--home .payment-visual{padding-top:28px}
 .payment-story--home .payment-provider-row{margin-top:24px}
}
.payment-story-art[data-running="false"] .payment-visual *:after,.home-film-scene:not(.is-active) .payment-visual *:after{animation-play-state:paused!important}