/* /card: SC Rewards Card explainer. The card itself is always SC blue; page accents follow the site color. */
.xp{max-width:1080px;margin:0 auto;padding:18px 18px 40px}
.xp h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:0 0 18px}
.xp-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:14px 0 30px}
.xp-hero h1{font-size:clamp(2rem,5vw,3.3rem);margin:6px 0 12px}
.xp-hero .lead{font-size:1.12rem;max-width:52ch;margin:0 0 18px}
.xp-ctas{display:flex;gap:10px;flex-wrap:wrap}
.xp-ticks{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:.92rem}
.xp-ticks li::before{content:"✓";color:var(--accent);font-weight:700;margin-right:6px}

/* the card */
.xp-card{display:grid;place-items:center;perspective:1000px}
.xc{position:relative;width:min(360px,100%);aspect-ratio:1.586;border-radius:20px;color:#fff;padding:20px 22px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,#0B4F8F 0%,#033057 42%,#021E38 82%);box-shadow:0 30px 60px -28px rgba(2,30,56,.8),inset 0 0 0 1px rgba(255,255,255,.12);
  transform:rotateX(8deg) rotateY(-14deg);animation:xc-float 6s ease-in-out infinite}
.xc-top{display:flex;justify-content:space-between;align-items:center}.xc-top b{font-size:1.05rem;letter-spacing:.02em}.xc-top img{width:44px;height:44px}
.xc-bal{align-self:center}.xc-bal b{display:block;font-size:2.4rem;font-family:var(--font-display);font-weight:400;line-height:1}.xc-bal span{opacity:.8;font-size:.9rem}
.xc-foot{display:flex;justify-content:space-between;font-size:.85rem;opacity:.85}.xc-no{letter-spacing:.12em}
.xc::after{content:"";position:absolute;right:-30px;bottom:-40px;width:150px;height:150px;border-radius:50%;background:rgba(224,165,38,.22)}
.xc-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);animation:xc-shine 5s ease-in-out infinite}
@keyframes xc-float{0%,100%{transform:rotateX(8deg) rotateY(-14deg) translateY(0)}50%{transform:rotateX(4deg) rotateY(-8deg) translateY(-8px)}}
@keyframes xc-shine{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}

/* the walkthrough */
.xp-demo{padding:34px 0 10px;border-top:1px solid var(--line)}
.xd{position:relative;display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center}
.xd-phone{position:relative;width:250px;height:500px;border-radius:40px;background:#0d1117;padding:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.55),inset 0 0 0 2px #2a2f38}
.xd-notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:12px;background:#0d1117;z-index:5}
.xd-screen{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:#F4F6F8;color:#13202F;font-family:var(--font-body)}
.sc{position:absolute;inset:0;padding:54px 16px 18px;display:flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden;transition:opacity .35s ease}
.xd[data-step="0"] .sc0,.xd[data-step="1"] .sc1,.xd[data-step="2"] .sc2,.xd[data-step="3"] .sc3,.xd[data-step="4"] .sc4{opacity:1;visibility:visible}
.mini-top{display:flex;justify-content:space-between;align-items:center;font-size:.72rem}.mini-top img{width:26px;height:26px}
.mini-bal{font-family:var(--font-display);font-size:1.6rem;margin-top:10px}.mini-bal small{font-family:var(--font-body);font-size:.7rem;opacity:.8}
.s0-card,.s1-card{width:100%;aspect-ratio:1.586;border-radius:14px;color:#fff;padding:12px 14px;background:radial-gradient(120% 140% at 100% 0%,#0B4F8F 0%,#033057 42%,#021E38 82%);box-shadow:0 14px 26px -16px rgba(2,30,56,.9);position:relative;overflow:hidden}

/* 0: add to wallet */
.s0-wallet{position:relative;width:100%;height:230px;margin-top:6px}
.s0-pass{position:absolute;left:6px;right:6px;height:120px;border-radius:12px}
.s0-a{top:0;background:#E0A526}.s0-b{top:26px;background:#5E6876}
.s0-card{position:absolute;left:0;top:52px}
.s0-btn{margin-top:auto;background:#000;color:#fff;border-radius:999px;padding:11px 18px;font-weight:600;font-size:.85rem;display:flex;gap:8px;align-items:center}
.s0-btn span{width:18px;height:13px;border-radius:3px;background:linear-gradient(180deg,#4FB3FF 0 33%,#FFC94D 33% 66%,#FF6B6B 66%)}
.s0-ok{margin-top:10px;color:#1D7A3A;font-weight:700;font-size:.85rem;opacity:0}
.run[data-step="0"] .s0-card{animation:s0-in .9s cubic-bezier(.2,.9,.2,1) 1.4s both}
.run[data-step="0"] .s0-btn{animation:s0-press .4s ease .9s both}
.run[data-step="0"] .s0-ok{animation:fade-in .4s ease 2.3s both}
@keyframes s0-in{from{transform:translateY(240px) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes s0-press{50%{transform:scale(.92)}}

/* 1: scan at checkout */
.s1-card{margin-top:20px}
.s1-code{position:absolute;left:14px;right:14px;bottom:12px;height:30px;background:#fff;border-radius:6px;display:flex;gap:2px;align-items:stretch;padding:4px 6px;overflow:hidden}
.s1-code i{background:#13202F;flex:none}
.s1-beam{position:absolute;left:8px;right:8px;bottom:26px;height:2px;background:#FF3B3B;box-shadow:0 0 10px 2px rgba(255,59,59,.7);opacity:0}
.run[data-step="1"] .s1-beam{animation:beam 1.1s ease-in-out .4s 1 both}
@keyframes beam{0%{opacity:0;transform:translateY(-14px)}15%{opacity:1}50%{transform:translateY(10px)}85%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.s1-pop{margin-top:26px;font-weight:700;color:#8a5e00;background:#F6ECD3;border-radius:999px;padding:8px 16px;opacity:0}
.run[data-step="1"] .s1-pop{animation:pop .6s cubic-bezier(.2,1.4,.4,1) 1.5s both}
.s1-caption{margin-top:auto;font-size:.8rem;color:#5E6876}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.8)}to{opacity:1;transform:none}}

/* 2: nearby alert on the lock screen */
.sc2{background:linear-gradient(170deg,#0B4F8F,#021E38);color:#fff}
.s2-lock{text-align:center;margin-top:12px}.s2-time{font-size:3rem;font-weight:300;letter-spacing:-.02em;line-height:1}.s2-date{font-size:.8rem;opacity:.85;margin-top:4px}
.s2-ping{position:absolute;left:50%;top:62%;width:16px;height:16px;margin:-8px;border-radius:50%;background:#E0A526}
.s2-ping i{position:absolute;inset:0;border-radius:50%;border:2px solid #E0A526;animation:ping 1.8s ease-out infinite}.s2-ping i+i{animation-delay:.9s}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(6);opacity:0}}
.s2-note{position:absolute;left:10px;right:10px;top:150px;display:flex;gap:9px;align-items:flex-start;background:rgba(255,255,255,.92);color:#13202F;border-radius:16px;padding:10px 11px;font-size:.74rem;line-height:1.3;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5);opacity:0}
.s2-note img{width:28px;height:28px;border-radius:7px;flex:none}.s2-note b{display:flex;justify-content:space-between;font-size:.74rem}.s2-note small{font-weight:400;color:#5E6876}
.run[data-step="2"] .s2-note{animation:note 0.7s cubic-bezier(.2,1.2,.3,1) 1.1s both}
@keyframes note{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:none}}

/* 3: redeem at checkout */
.sc3{align-items:stretch;gap:10px;font-size:.86rem}
.s3-head{font-weight:700;font-size:1.05rem;margin:6px 0 4px}
.s3-row,.s3-total{display:flex;justify-content:space-between}
.s3-use{display:flex;justify-content:space-between;align-items:center;background:#E2EBF5;border-radius:12px;padding:10px 12px;font-weight:600;color:#033057}
.s3-sw{width:38px;height:22px;border-radius:999px;background:#C6CFDA;position:relative;transition:background .3s}
.s3-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .3s}
.run[data-step="3"] .s3-sw{animation:sw-bg .01s linear 1.1s both}.run[data-step="3"] .s3-sw::after{animation:sw-knob .3s ease 1.1s both}
@keyframes sw-bg{to{background:#0B4F8F}}@keyframes sw-knob{to{transform:translateX(16px)}}
.s3-disc{color:#1D7A3A;opacity:0}.run[data-step="3"] .s3-disc{animation:fade-in .3s ease 1.5s both}
.s3-total{border-top:1px solid #D8DEE6;padding-top:10px;font-weight:700;font-size:1.05rem;position:relative}
.s3-b{position:absolute;right:0;opacity:0;color:#033057}
.run[data-step="3"] .s3-a{animation:fade-out .3s ease 1.7s both}.run[data-step="3"] .s3-b{animation:fade-in .3s ease 1.8s both}
.s3-saved{margin-top:auto;align-self:center;background:#F6ECD3;color:#8a5e00;font-weight:700;border-radius:999px;padding:8px 16px;opacity:0}
.run[data-step="3"] .s3-saved{animation:pop .5s cubic-bezier(.2,1.4,.4,1) 2.2s both}

/* 4: spending */
.sc4{align-items:stretch}
.s4-head{font-size:.8rem;color:#5E6876;margin-top:6px}.s4-big{font-family:var(--font-display);font-size:2.4rem;color:#033057}
.s4-bars{display:flex;align-items:flex-end;gap:10px;height:150px;margin-top:14px;padding:0 4px}
.s4-bars i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#2F73B5,#033057);transform-origin:bottom}
.run[data-step="4"] .s4-bars i{animation:grow .7s cubic-bezier(.2,.9,.2,1) calc(.3s + var(--d)) both}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.s4-months{display:flex;justify-content:space-between;font-size:.66rem;color:#5E6876;padding:4px 4px 0}
.s4-saved{margin-top:auto;align-self:center;background:#E2EBF5;color:#033057;font-weight:700;border-radius:999px;padding:8px 16px;font-size:.82rem}
@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-out{from{opacity:1}to{opacity:0}}

/* step list */
.xd-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:st}
.xd-steps li{counter-increment:st}
.xd-steps button{position:relative;width:100%;text-align:left;border:1.5px solid transparent;background:transparent;border-radius:16px;padding:14px 16px 16px 58px;color:var(--ink);cursor:pointer;display:grid;gap:3px;overflow:hidden;font:inherit}
.xd-steps button::before{content:counter(st);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--accent-soft);color:var(--accent-strong)}
.xd-steps b{font-size:1.08rem}.xd-steps span{color:var(--muted)}
.xd-steps li.on button{border-color:var(--accent);background:var(--surface);box-shadow:0 10px 24px -18px rgba(0,0,0,.35)}
.xd-steps li.on button::before{background:var(--accent);color:#fff}
.xd-steps .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent)}
.run .xd-steps li.on .bar{animation:bar 5.2s linear both}
.paused .xd-steps .bar{animation:none!important;width:0}
@keyframes bar{to{width:100%}}
.xd-pause{position:absolute;right:0;top:-46px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:.85rem;cursor:pointer}

.xp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:34px 0}
.xp-tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}.xp-tile h3{font-size:1.15rem;margin:0 0 6px}.xp-tile p{margin:0;color:var(--muted)}
.xp-faq{max-width:760px;padding:10px 0 20px}.xp-faq details{border-top:1px solid var(--line);padding:12px 0}.xp-faq summary{cursor:pointer;font-weight:600}.xp-faq p{margin:8px 0 0;color:var(--muted)}
.xp-end{text-align:center;padding:30px 0 10px;display:grid;justify-items:center;gap:12px}.xp-end h2{margin:0}

@media (max-width:860px){
  .xp-hero{grid-template-columns:1fr;gap:20px}.xp-card{order:-1}.xc{width:min(320px,90%)}
  .xd{grid-template-columns:1fr;justify-items:center;gap:24px}.xd-steps{width:100%}
  .xd-steps li:not(.on) span{display:none}
  .xp-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.xp-grid{grid-template-columns:1fr}.xd-phone{width:230px;height:460px}}
@media (prefers-reduced-motion:reduce){
  .xc,.xc-shine,.s2-ping i{animation:none!important}.xc{transform:none}
  .sc *{animation-duration:.01s!important;animation-delay:0s!important}
}
@media (max-width:860px){.xd-pause{position:static;justify-self:end;order:-1}}
.xc::after{width:110px;height:110px;right:-34px;bottom:-46px}

/* New metal card on /card */
.xp-card .scard.xp-tilt{max-width:400px;transform:perspective(1000px) rotateX(8deg) rotateY(-14deg);animation:xp-float 6s ease-in-out infinite}
@keyframes xp-float{0%,100%{transform:perspective(1000px) rotateX(8deg) rotateY(-14deg) translateY(0)}50%{transform:perspective(1000px) rotateX(4deg) rotateY(-8deg) translateY(-8px)}}
.s0-wallet .scard.s0-card{position:absolute;left:0;top:52px;width:100%;max-width:none;margin:0}
.scard.s1-card{margin-top:20px;max-width:none}
.scard.s1-card .s1-code{z-index:3;bottom:9%;left:7%;right:7%;height:16%}
.scard.s1-card .s1-code i:nth-child(6n+1),.scard.s1-card .s1-code i:nth-child(6n+3){width:1px}
.scard.s1-card .s1-code i:nth-child(6n+2),.scard.s1-card .s1-code i:nth-child(6n){width:2px}
.scard.s1-card .s1-code i:nth-child(6n+4){width:3px}
.scard.s1-card .s1-code i:nth-child(6n+5){width:1px}
.scard.s1-card .s1-beam{z-index:4;bottom:16%}
.scard.s1-card .s-bot{visibility:hidden}
@media (prefers-reduced-motion:reduce){.xp-card .scard.xp-tilt{animation:none}}