/* Payment illustrations inside the shared capability-page layout. */
.payment-demo{--payment-cycle:15s;user-select:none;-webkit-user-select:none;pointer-events:none}
.payment-demo *{cursor:default;-webkit-user-drag:none}
.payment-demo--hero{display:grid;place-items:center;padding:48px;min-height:580px;scroll-margin-top:100px}
.payment-demo--hero>div{width:min(820px,100%);min-width:0}
.payment-demo__window{width:min(820px,100%);overflow:hidden;background:#fff;color:var(--dark);border:2px solid var(--dark);border-radius:24px}
.payment-demo__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--light-2);padding:20px 28px;font-size:.85rem}
.payment-demo__bar>span:last-child{color:var(--dark-2);font-size:.75rem}
.payment-demo__steps{display:flex;justify-content:center;gap:28px;padding:24px 16px 0;color:var(--dark-2);font-size:.8rem}
.payment-demo__steps>span{display:flex;align-items:center;gap:8px}
.payment-demo__steps i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bg-card);font-style:normal;font-size:.7rem}
.payment-demo__stage{display:grid;min-height:350px;padding:28px 48px 36px}
.payment-demo__frame{grid-area:1/1;min-width:0;align-self:center;opacity:0;visibility:hidden;transform:translateY(8px)}
.payment-demo__heading{font-size:1.45rem;line-height:1.3;font-weight:500;letter-spacing:-.03em}
.payment-demo__sub{margin-top:8px;color:var(--dark-2);font-size:.85rem;line-height:1.5}
.payment-demo__product{display:flex;align-items:center;gap:18px;padding:22px 0;margin:0;border-bottom:1px solid var(--light-2)}
.payment-demo__product img{width:70px;height:82px;object-fit:cover;border-radius:12px}
.payment-demo__product p{display:grid;gap:7px;font-size:.95rem}
.payment-demo__product small{font-size:.8rem;color:var(--dark-2)}
.payment-demo__product>span{margin-left:auto;white-space:nowrap;font-size:1rem}
.payment-demo__total{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font-size:.9rem}
.payment-demo__total span:last-child{font-size:1.4rem;letter-spacing:-.04em}
.payment-demo__button{background:var(--brand);border-radius:100px;padding:15px 20px;text-align:center;font-size:.95rem}
.payment-demo__provider{display:grid;justify-items:center;text-align:center;max-width:370px;margin:auto;padding:8px 0}
.payment-demo__symbol{display:grid;place-items:center;width:54px;height:54px;background:var(--bg-card);border-radius:18px;margin-bottom:20px}
.payment-demo__symbol svg{width:25px;height:25px}
.payment-demo__amount{font-size:2.5rem;letter-spacing:-.055em;line-height:1.2;margin:22px 0}
.payment-demo__provider .payment-demo__button{width:100%}
.payment-demo__confirmed{text-align:center}
.payment-demo__confirmed .payment-demo__symbol{margin:0 auto 20px;background:var(--brand);border-radius:50%}
.payment-demo__confirmation{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--bg-card);border-radius:16px;padding:20px 24px;margin-top:26px;text-align:left;font-size:.9rem}
.payment-demo__confirmation span:last-child{white-space:nowrap;font-size:1.2rem;letter-spacing:-.03em}
.payment-demo__caption{text-align:center;color:var(--dark-2);font-size:.75rem;line-height:1.4;margin-top:18px}
.payment-demo__frame--cart{opacity:1;visibility:visible;transform:none}
.payment-demo.playing .payment-demo__frame--cart{animation:paymentCart var(--payment-cycle) ease infinite}
.payment-demo.playing .payment-demo__frame--provider{animation:paymentProvider var(--payment-cycle) ease infinite}
.payment-demo.playing .payment-demo__frame--confirmed{animation:paymentConfirmed var(--payment-cycle) ease infinite}
.payment-demo.playing .payment-demo__steps>span:nth-child(1) i{animation:paymentStepCart var(--payment-cycle) step-end infinite}
.payment-demo.playing .payment-demo__steps>span:nth-child(2) i{animation:paymentStepProvider var(--payment-cycle) step-end infinite}
.payment-demo.playing .payment-demo__steps>span:nth-child(3) i{animation:paymentStepConfirmed var(--payment-cycle) step-end infinite}
@keyframes paymentCart{0%,26%{opacity:1;visibility:visible;transform:none}29%{opacity:0;visibility:visible;transform:translateY(-8px)}29.01%,97%{opacity:0;visibility:hidden;transform:translateY(8px)}100%{opacity:1;visibility:visible;transform:none}}
@keyframes paymentProvider{0%,30%{opacity:0;visibility:hidden;transform:translateY(8px)}30.01%{visibility:visible}34%,58%{opacity:1;visibility:visible;transform:none}61%{opacity:0;visibility:visible;transform:translateY(-8px)}61.01%,100%{opacity:0;visibility:hidden;transform:translateY(8px)}}
@keyframes paymentConfirmed{0%,62%{opacity:0;visibility:hidden;transform:translateY(8px)}62.01%{visibility:visible}66%,93%{opacity:1;visibility:visible;transform:none}96%{opacity:0;visibility:visible;transform:translateY(-8px)}96.01%,100%{opacity:0;visibility:hidden;transform:translateY(8px)}}
@keyframes paymentStepCart{0%,29%{background:var(--brand)}30%,100%{background:var(--bg-card)}}
@keyframes paymentStepProvider{0%,29%{background:var(--bg-card)}30%,61%{background:var(--brand)}62%,100%{background:var(--bg-card)}}
@keyframes paymentStepConfirmed{0%,61%{background:var(--bg-card)}62%,96%{background:var(--brand)}97%,100%{background:var(--bg-card)}}
.payment-connection{width:min(410px,100%);padding:28px;border:2px solid var(--dark);border-radius:22px;background:#fff;text-align:left}
.payment-connection__top{display:flex;align-items:center;gap:14px;font-size:1.05rem}
.payment-connection__icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:var(--brand)}
.payment-connection__icon svg{width:23px;height:23px}
.payment-connection__fields{display:grid;gap:14px;margin:26px 0;padding:22px 0;border-top:1px solid var(--light-2);border-bottom:1px solid var(--light-2);font-size:.85rem;color:var(--dark-2)}
.payment-connection__fields>span{display:flex;justify-content:space-between;gap:20px}
.payment-connection__fields i{font-style:normal;letter-spacing:.15em;color:var(--dark)}
.payment-connection__saved{font-size:.85rem;line-height:1.5}
.payment-toggle-demo{display:grid;place-items:center;width:100%;min-height:320px}
.payment-toggle-card{width:min(380px,100%);padding:32px;border-radius:24px;background:#fff;color:var(--dark)}
.payment-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:1.15rem;line-height:1.4}
.payment-toggle-track{position:relative;display:block;flex:0 0 44px;width:44px;height:26px;border-radius:100px;background:var(--brand)}
.payment-toggle-track i{position:absolute;left:3px;top:3px;display:block;width:20px;height:20px;border-radius:50%;background:#fff;transform:translateX(18px)}
.domain-how .sp-3 .payment-toggle-status{display:flex;align-items:center;gap:8px;margin-top:22px;color:var(--dark-2);font-size:.85rem;line-height:1.4}
.payment-toggle-status>span{color:var(--dark)}
.payment-toggle-demo.playing .payment-toggle-track{animation:paymentToggleTrack 1.8s ease both}
.payment-toggle-demo.playing .payment-toggle-track i{animation:paymentToggleKnob 1.8s cubic-bezier(.22,.61,.36,1) both}
.payment-toggle-demo.playing .payment-toggle-status{animation:paymentToggleStatus 1.8s ease both}
@keyframes paymentToggleTrack{0%,35%{background:#e6e6e6}70%,100%{background:var(--brand)}}
@keyframes paymentToggleKnob{0%,35%{transform:translateX(0)}70%,100%{transform:translateX(18px)}}
@keyframes paymentToggleStatus{0%,55%{opacity:0;transform:translateY(4px)}85%,100%{opacity:1;transform:none}}
@media(max-width:767px){
  .payment-demo--hero{padding:28px 16px;min-height:520px}
  .payment-demo__window{border-radius:20px}
  .payment-demo__bar{padding:16px;font-size:.75rem;gap:10px}
  .payment-demo__bar>span:last-child{font-size:.65rem}
  .payment-demo__steps{gap:14px;font-size:.7rem;padding-top:20px}
  .payment-demo__steps>span{gap:5px}
  .payment-demo__steps i{width:20px;height:20px;font-size:.65rem}
  .payment-demo__stage{padding:24px 20px;min-height:350px}
  .payment-demo__heading{font-size:1.15rem}
  .payment-demo__product{gap:12px}
  .payment-demo__product img{width:52px;height:64px}
  .payment-demo__product p{font-size:.8rem}
  .payment-demo__product>span{font-size:.85rem}
  .payment-demo__confirmation{padding:18px 14px;font-size:.8rem}
  .payment-demo__confirmation span:last-child{font-size:1rem}
  .payment-connection{padding:22px}
  .payment-toggle-card{padding:26px}
  .payment-toggle-row{font-size:1rem;gap:18px}
}
@media(prefers-reduced-motion:reduce){
  .payment-demo .payment-demo__frame{animation:none!important;opacity:0;visibility:hidden;transform:none}
  .payment-demo .payment-demo__frame--confirmed{opacity:1;visibility:visible}
  .payment-demo .payment-demo__steps>span i{animation:none!important;background:var(--bg-card)}
  .payment-demo .payment-demo__steps>span:last-child i{background:var(--brand)}
  .payment-toggle-demo .payment-toggle-track,.payment-toggle-demo .payment-toggle-track i,.payment-toggle-demo .payment-toggle-status{animation:none!important}
}