/* Sharing reel (sr-*): looping mini-demos of splitting, paying, and automating shared expenses. Sits on the hr-* reel
   primitives in home-showcase.css (card, stage, toast, row, chip, pointer, swap, pop) and the site's light/dark tokens.
   Convention: an element's base style is its final state; keyframes describe the journey, so reduced-motion users see
   the finished frame. Transient helpers (pointers, packets, envelopes, scan bars) are hidden for them. */
.sr-section { --sr-you: #2563eb; --sr-partner: #d97706; --sr-pay: #16a34a; --sr-venmo: #008cff; }
[data-bs-theme="dark"] .sr-section { --sr-you: #60a5fa; --sr-partner: #fbbf24; --sr-pay: #4ade80; --sr-venmo: #3d95ce; }
.sr-reel { --fs-card: 22rem; }
.sr-section .hr-card { background: linear-gradient(180deg, color-mix(in srgb, var(--cp-accent) 7%, var(--cp-surface)), var(--cp-surface) 62%); }
.sr-you { color: var(--sr-you) !important; }
.sr-partner { color: var(--sr-partner) !important; }
.sr-av { position: relative; flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 2px solid var(--sr-you); border-radius: 50%; background: var(--cp-surface); overflow: hidden; }
.sr-av img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sr-av.is-partner { border-color: var(--sr-partner); }
.sr-av.is-ai { border-color: var(--cp-accent); background: var(--cp-accent); color: #fff; font-size: 1rem; }
.hr-avatars .sr-av + .sr-av { margin-left: -.5rem; }
.sr-press { animation-name: sr-press; }
.sr-press-14 { animation-name: sr-press-14; }
.sr-pop-late { animation-name: sr-pop-late; }
.hr-swap.sr-swap-16 > span:first-child { animation-name: sr-swap-out-16; }
.hr-swap.sr-swap-16 > span:last-child { animation-name: sr-swap-in-16; }
.hr-swap.sr-swap-64 > span:first-child { animation-name: sr-swap-out-64; }
.hr-swap.sr-swap-64 > span:last-child { animation-name: sr-swap-in-64; }
@keyframes sr-press { 0%, 56% { transform: scale(1); filter: none; } 59% { transform: scale(.93); filter: brightness(.9); } 62%, 100% { transform: scale(1); filter: none; } }
@keyframes sr-press-14 { 0%, 12% { transform: scale(1); filter: none; } 15% { transform: scale(.9); filter: brightness(.85); } 18%, 100% { transform: scale(1); filter: none; } }
@keyframes sr-pop-late { 0%, 80% { opacity: 0; transform: translateY(10px) scale(.96); } 85%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes sr-swap-out-16 { 0%, 16% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes sr-swap-in-16 { 0%, 16% { opacity: 0; } 20%, 100% { opacity: 1; } }
@keyframes sr-swap-out-64 { 0%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes sr-swap-in-64 { 0%, 62% { opacity: 0; } 66%, 100% { opacity: 1; } }

/* 1. Split any purchase: unlock, drag to 60/40, save */
.sr-shares { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; margin-top: .8rem; }
.sr-share { display: grid; justify-items: center; gap: .1rem; }
.sr-share b { color: var(--cp-text); font-size: .74rem; font-weight: 800; }
.sr-share small { color: var(--cp-text-muted); font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sr-track { position: relative; height: .7rem; margin-top: -.9rem; border-radius: 999px; background: color-mix(in srgb, var(--sr-partner) 38%, transparent); }
.sr-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; border-radius: 999px; background: linear-gradient(90deg, #93c5fd, var(--sr-you)); animation-name: sr-fill-60; }
.sr-knob { position: absolute; top: 50%; left: 60%; width: 1.15rem; height: 1.15rem; transform: translate(-50%, -50%); border: 3px solid var(--sr-you); border-radius: 50%; background: var(--cp-surface); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4); animation-name: sr-knob-60; }
.sr-pct { position: absolute; left: 50%; top: 100%; margin-top: .4rem; transform: translateX(-50%); color: var(--cp-text-muted); font-size: .62rem; font-weight: 800; font-style: normal; white-space: nowrap; }
.sr-lock { position: absolute; left: .8rem; bottom: .8rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; padding: .34rem .6rem; border: 1px solid var(--cp-accent); border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .62rem; font-weight: 800; animation-name: sr-lock; }
.sr-lock i { font-size: .85rem; }
.sr-save-btn { right: .8rem; bottom: .8rem; animation-name: sr-press; }
@keyframes sr-fill-60 { 0%, 24% { width: 50%; } 40%, 100% { width: 60%; } }
@keyframes sr-knob-60 { 0%, 24% { left: 50%; } 40%, 100% { left: 60%; } }
@keyframes sr-lock { 0%, 15% { border-color: var(--cp-border); background: var(--cp-surface); color: var(--cp-text-muted); } 19%, 100% { border-color: var(--cp-accent); background: var(--cp-accent-soft); color: var(--cp-accent); } }

/* 2. Pay: four rails, Venmo picked */
.sr-pay-head { display: flex; align-items: center; gap: .55rem; }
.sr-pay-head b { display: block; color: var(--cp-text); font-size: .78rem; font-weight: 800; }
.sr-pay-head span { display: block; color: var(--cp-text-muted); font-size: .62rem; }
.sr-rails { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .65rem; }
.sr-rail { display: flex; align-items: center; gap: .4rem; padding: .42rem .55rem; border: 1px solid var(--cp-border); border-radius: .7rem; background: var(--cp-surface); color: var(--cp-text); font-size: .68rem; font-weight: 700; }
.sr-rail i { flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .9rem; }
.sr-rail.is-venmo i { background: color-mix(in srgb, var(--sr-venmo) 16%, var(--cp-surface)); color: var(--sr-venmo); }
.sr-rail.is-cash i { background: color-mix(in srgb, #22c55e 18%, var(--cp-surface)); color: #15803d; }
.sr-rail.is-venmo { border-color: var(--sr-venmo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sr-venmo) 22%, transparent); animation-name: sr-rail-pick; }
.sr-rail.is-venmo.is-late { animation-name: sr-rail-pick-late; }
.sr-pointer-pay { left: 4.6rem; top: 3.9rem; bottom: auto; animation-name: sr-pointer-pay; }
.sr-open-chip { left: 50%; bottom: .8rem; animation-name: sr-open-chip; }
@keyframes sr-rail-pick { 0%, 32% { border-color: var(--cp-border); box-shadow: none; } 36%, 100% { border-color: var(--sr-venmo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sr-venmo) 22%, transparent); } }
@keyframes sr-rail-pick-late { 0%, 58% { border-color: var(--cp-border); box-shadow: none; } 62%, 100% { border-color: var(--sr-venmo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sr-venmo) 22%, transparent); } }
@keyframes sr-pointer-pay { 0%, 8% { opacity: 0; transform: translate(3rem, 3.5rem); } 14% { opacity: 1; } 30% { transform: translate(0, 0); } 33% { transform: translate(0, 0) scale(.82); } 36%, 42% { opacity: 1; transform: translate(0, 0) scale(1); } 48%, 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes sr-open-chip { 0%, 40% { opacity: 0; transform: translate(-50%, 6px); } 45%, 62% { opacity: 1; transform: translate(-50%, 0); } 66%, 100% { opacity: 0; transform: translate(-50%, 6px); } }

/* 3. Auto Split: a rule, a new charge, two shares, two notifications */
.sr-auto { --t: 9s; }
.sr-rulerow { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid color-mix(in srgb, var(--cp-accent) 40%, var(--cp-border)); border-radius: .75rem; background: color-mix(in srgb, var(--cp-accent) 6%, var(--cp-surface)); }
.sr-rulerow > i { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: .55rem; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 1rem; }
.sr-rulerow > div { flex: 1; min-width: 0; }
.sr-rulerow b { display: block; color: var(--cp-text); font-size: .74rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-rulerow span { display: block; color: var(--cp-text-muted); font-size: .62rem; white-space: nowrap; }
.sr-rulerow em { font-style: normal; font-weight: 800; }
.sr-switch { position: relative; flex: none; width: 2rem; height: 1.15rem; border-radius: 999px; background: var(--sr-pay); }
.sr-switch i { position: absolute; top: .14rem; right: .14rem; width: .87rem; height: .87rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.sr-charge { position: absolute; left: .8rem; right: .8rem; top: 3.25rem; z-index: 2; display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid var(--cp-border); border-radius: .7rem; background: var(--cp-surface); box-shadow: 0 12px 26px -14px rgba(27, 19, 64, .5); animation-name: sr-charge-in; }
.sr-charge > i { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: .5rem; background: color-mix(in srgb, #f59e0b 18%, var(--cp-surface)); color: #b45309; font-size: .95rem; }
.sr-charge > div { flex: 1; min-width: 0; }
.sr-charge b { display: block; color: var(--cp-text); font-size: .72rem; font-weight: 700; }
.sr-charge span { display: block; color: var(--cp-text-muted); font-size: .6rem; }
.sr-charge em { font-style: normal; font-weight: 800; color: var(--cp-text); font-size: .78rem; }
.sr-beam { position: absolute; left: 50%; top: 5.45rem; z-index: 1; width: 2px; height: .5rem; margin-left: -1px; background: var(--cp-accent); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--cp-accent) 55%, transparent); transform-origin: top; animation-name: sr-beam; }
.sr-outs { position: absolute; left: .8rem; right: .8rem; top: 5.95rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sr-out { display: flex; align-items: center; gap: .4rem; padding: .3rem .45rem; border: 1px solid var(--cp-border); border-radius: .7rem; background: var(--cp-surface); animation-name: sr-out-a; }
.sr-out.is-partner { animation-name: sr-out-b; }
.sr-out .sr-av { width: 1.6rem; height: 1.6rem; }
.sr-out b { color: var(--sr-you); font-size: .74rem; font-weight: 800; }
.sr-out.is-partner b { color: var(--sr-partner); }
.sr-out small { margin-left: auto; color: var(--cp-text-muted); font-size: .58rem; font-weight: 800; }
.sr-notif { opacity: 0; }
.sr-notif-mail { left: .8rem; top: 8.45rem; animation-name: sr-notif-a; }
.sr-notif-push { right: .8rem; top: 8.45rem; animation-name: sr-notif-b; }
@keyframes sr-charge-in { 0%, 8% { opacity: 0; transform: translateX(110%); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes sr-beam { 0%, 18% { transform: scaleY(0); opacity: 0; } 20% { opacity: 1; } 26%, 100% { transform: scaleY(1); opacity: 1; } }
@keyframes sr-out-a { 0%, 24% { opacity: 0; transform: translateY(-6px) scale(.7); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes sr-out-b { 0%, 29% { opacity: 0; transform: translateY(-6px) scale(.7); } 35%, 100% { opacity: 1; transform: none; } }
@keyframes sr-notif-a { 0%, 40% { opacity: 0; transform: translateY(8px); } 45%, 60% { opacity: 1; transform: none; } 64%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes sr-notif-b { 0%, 46% { opacity: 0; transform: translateY(8px); } 51%, 60% { opacity: 1; transform: none; } 64%, 100% { opacity: 0; transform: translateY(8px); } }

/* 4. Split Intelligence: scan, score, send */
.sr-ai-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.sr-ai-head b { display: block; color: var(--cp-text); font-size: .74rem; font-weight: 800; }
.sr-ai-head span { display: block; color: var(--cp-text-muted); font-size: .6rem; }
.sr-ai-list .hr-row { padding: .25rem .5rem; }
.sr-ai-list .hr-row + .hr-row { margin-top: .3rem; }
.sr-ai-list .hr-row > i { width: 1.5rem; height: 1.5rem; font-size: .9rem; }
.sr-conf { flex: none; margin-left: .3rem; padding: .18rem .45rem; border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .6rem; font-weight: 800; font-style: normal; animation-name: sr-conf-1; }
.sr-reco.is-2 .sr-conf { animation-name: sr-conf-2; }
.sr-reco.is-3 .sr-conf { animation-name: sr-conf-3; }
.sr-scanbar { position: absolute; left: .8rem; right: .8rem; top: 3.05rem; height: 1.9rem; border-radius: .7rem; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cp-accent) 26%, transparent), transparent); pointer-events: none; opacity: 0; animation-name: sr-scanbar; }
.sr-go { flex: none; margin-left: .25rem; padding: .22rem .5rem; border-radius: 999px; background: var(--cp-accent); color: #fff; font-size: .58rem; font-weight: 800; font-style: normal; letter-spacing: .05em; text-transform: uppercase; animation-name: sr-go; }
@keyframes sr-scanbar { 0%, 3% { top: 3.05rem; opacity: 0; } 7% { opacity: 1; } 30% { top: 6.95rem; opacity: 1; } 35%, 100% { top: 6.95rem; opacity: 0; } }
@keyframes sr-go { 0%, 38% { opacity: 0; transform: scale(.5); } 43%, 56% { opacity: 1; transform: none; } 59% { transform: scale(.9); filter: brightness(.85); } 62%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes sr-conf-1 { 0%, 13% { opacity: 0; transform: scale(.5); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes sr-conf-2 { 0%, 22% { opacity: 0; transform: scale(.5); } 27%, 100% { opacity: 1; transform: none; } }
@keyframes sr-conf-3 { 0%, 31% { opacity: 0; transform: scale(.5); } 36%, 100% { opacity: 1; transform: none; } }

/* 5. Who owes what: counters and bars */
@property --sr-d { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --sr-c { syntax: '<integer>'; inherits: false; initial-value: 0; }
@counter-style sr-pad2 { system: extends decimal; pad: 2 "0"; }
.sr-owes .hr-label { margin-bottom: .35rem; }
.sr-owes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sr-owe { display: grid; justify-items: center; gap: .05rem; padding: .45rem .3rem .4rem; border: 1px solid var(--cp-border); border-radius: .8rem; background: var(--cp-surface); text-align: center; }
.sr-owe .sr-av { width: 2rem; height: 2rem; margin-bottom: .1rem; }
.sr-owe small { color: var(--cp-text-muted); font-size: .54rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sr-owe > span { color: var(--cp-text-muted); font-size: .56rem; font-weight: 700; }
.sr-count { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; counter-reset: srd var(--sr-d) src var(--sr-c); }
.sr-count::before { content: "$" counter(srd) "." counter(src, sr-pad2); }
.sr-count-you { --sr-d: 468; --sr-c: 69; color: var(--sr-you); animation-name: sr-count-you; }
.sr-count-partner { --sr-d: 31; --sr-c: 97; color: var(--sr-partner); animation-name: sr-count-partner; }
.sr-owes-bar { display: flex; gap: .3rem; height: .65rem; margin-top: .55rem; }
.sr-bar-you { flex: 0 0 90%; border-radius: 999px; background: linear-gradient(90deg, #93c5fd, var(--sr-you)); transform-origin: left; animation-name: sr-grow; }
.sr-bar-partner { flex: 1; border-radius: 999px; background: var(--sr-partner); transform-origin: left; animation-name: sr-grow; }
.sr-net { left: 50%; bottom: .8rem; transform: translateX(-50%); animation-name: sr-net; }
@keyframes sr-count-you { 0%, 10% { --sr-d: 0; --sr-c: 0; } 55%, 100% { --sr-d: 468; --sr-c: 69; } }
@keyframes sr-count-partner { 0%, 10% { --sr-d: 0; --sr-c: 0; } 55%, 100% { --sr-d: 31; --sr-c: 97; } }
@keyframes sr-grow { 0%, 10% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
@keyframes sr-net { 0%, 58% { opacity: 0; transform: translate(-50%, 8px); } 64%, 96% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 8px); } }

/* 6. Pay all: tick, tick, tick, one tap */
.sr-payall .hr-row { padding: .32rem .5rem; }
.sr-payall .hr-row + .hr-row { margin-top: .32rem; }
.sr-check { flex: none; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border: 2px solid var(--cp-accent); border-radius: .35rem; background: var(--cp-accent); color: #fff; font-size: .85rem; animation-name: sr-check-1; }
.sr-check i { animation-name: sr-checki-1; }
.sr-sel.is-2 .sr-check { animation-name: sr-check-2; }
.sr-sel.is-2 .sr-check i { animation-name: sr-checki-2; }
.sr-sel.is-3 .sr-check { animation-name: sr-check-3; }
.sr-sel.is-3 .sr-check i { animation-name: sr-checki-3; }
.sr-selbar { position: absolute; left: .8rem; right: .8rem; bottom: .8rem; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: .4rem .45rem .4rem .7rem; border-radius: .75rem; background: var(--cp-accent); color: #fff; font-size: .66rem; font-weight: 800; box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--cp-accent) 80%, transparent); transform: translateY(160%); opacity: 0; animation-name: sr-selbar; }
.sr-selbtn { padding: .28rem .6rem; border-radius: 999px; background: #fff; color: var(--cp-accent); letter-spacing: .04em; text-transform: uppercase; animation-name: sr-press; }
@keyframes sr-check-1 { 0%, 10% { border-color: color-mix(in srgb, var(--cp-text) 30%, transparent); background: transparent; } 14%, 100% { border-color: var(--cp-accent); background: var(--cp-accent); } }
@keyframes sr-check-2 { 0%, 20% { border-color: color-mix(in srgb, var(--cp-text) 30%, transparent); background: transparent; } 24%, 100% { border-color: var(--cp-accent); background: var(--cp-accent); } }
@keyframes sr-check-3 { 0%, 30% { border-color: color-mix(in srgb, var(--cp-text) 30%, transparent); background: transparent; } 34%, 100% { border-color: var(--cp-accent); background: var(--cp-accent); } }
@keyframes sr-checki-1 { 0%, 10% { opacity: 0; transform: scale(.4); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes sr-checki-2 { 0%, 20% { opacity: 0; transform: scale(.4); } 24%, 100% { opacity: 1; transform: none; } }
@keyframes sr-checki-3 { 0%, 30% { opacity: 0; transform: scale(.4); } 34%, 100% { opacity: 1; transform: none; } }
@keyframes sr-selbar { 0%, 34% { opacity: 0; transform: translateY(160%); } 40%, 60% { opacity: 1; transform: none; } 65%, 100% { opacity: 0; transform: translateY(160%); } }

/* 7. Payments ledger: rail totals, revert */
.sr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: .5rem; }
.sr-tiles span { padding: .32rem .45rem; border: 1px solid var(--cp-border); border-left-width: 3px; border-radius: .6rem; background: var(--cp-surface); }
.sr-tiles .is-venmo { border-left-color: var(--sr-venmo); }
.sr-tiles .is-cash { border-left-color: #22c55e; }
.sr-tiles .is-check { border-left-color: var(--cp-accent); }
.sr-tiles small { display: block; color: var(--cp-text-muted); font-size: .52rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sr-tiles b { display: block; color: var(--cp-text); font-size: .74rem; font-weight: 800; }
.sr-led { padding: .36rem .5rem; }
.sr-revert { flex: none; padding: .24rem .55rem; border: 1px solid var(--cp-accent); border-radius: 999px; color: var(--cp-accent); font-size: .58rem; font-weight: 800; font-style: normal; letter-spacing: .05em; text-transform: uppercase; animation-name: sr-press-42; }
.sr-lockicon { flex: none; color: var(--cp-text-muted); font-size: .95rem; }
.sr-pointer-revert { left: auto; right: 1.5rem; top: 4.55rem; bottom: auto; animation-name: sr-pointer-revert; }
@keyframes sr-press-42 { 0%, 40% { transform: scale(1); filter: none; } 43% { transform: scale(.9); filter: brightness(.85); } 46%, 100% { transform: scale(1); filter: none; } }
@keyframes sr-pointer-revert { 0%, 14% { opacity: 0; transform: translate(-4rem, 4rem); } 20% { opacity: 1; } 38% { transform: translate(0, 0); } 42% { transform: translate(0, 0) scale(.82); } 45%, 52% { opacity: 1; transform: translate(0, 0) scale(1); } 58%, 100% { opacity: 0; transform: translate(0, 0); } }

/* 8. Insights: tiles, donut, bars */
.sr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.sr-kpis div { min-width: 0; padding: .32rem .4rem; border: 1px solid var(--cp-border); border-radius: .6rem; background: var(--cp-surface); }
.sr-kpis small { display: block; color: var(--cp-text-muted); font-size: .5rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sr-kpis b { display: block; color: var(--cp-text); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.sr-viz { display: grid; grid-template-columns: 4.4rem 1fr; gap: .8rem; align-items: center; margin-top: .55rem; }
.sr-donut { display: block; width: 4.4rem; height: 4.4rem; transform: rotate(-90deg); }
.sr-donut circle { fill: none; stroke-width: 15; stroke-linecap: butt; }
.sr-donut .is-track { stroke: color-mix(in srgb, var(--cp-text) 10%, transparent); }
.sr-donut .is-a { stroke: var(--cp-accent); stroke-dasharray: 163 999; animation-name: sr-donut-a; }
.sr-donut .is-b { stroke: #f2c14e; stroke-dasharray: 113 999; stroke-dashoffset: -163; animation-name: sr-donut-b; }
.sr-bars { display: flex; align-items: flex-end; gap: .35rem; height: 4rem; padding-bottom: 2px; border-bottom: 1px solid color-mix(in srgb, var(--cp-text) 14%, transparent); }
.sr-bars i { flex: 1; height: var(--h); border-radius: .3rem .3rem 0 0; background: linear-gradient(180deg, #93c5fd, var(--sr-you)); transform-origin: bottom; }
.sr-bars i:nth-child(even) { background: linear-gradient(180deg, #fcd34d, var(--sr-partner)); }
.sr-bars .is-1 { animation-name: sr-bar-1; } .sr-bars .is-2 { animation-name: sr-bar-2; } .sr-bars .is-3 { animation-name: sr-bar-3; }
.sr-bars .is-4 { animation-name: sr-bar-4; } .sr-bars .is-5 { animation-name: sr-bar-5; } .sr-bars .is-6 { animation-name: sr-bar-6; }
.sr-legend { display: flex; flex-wrap: wrap; gap: .2rem .6rem; margin-top: .45rem; color: var(--cp-text-muted); font-size: .56rem; font-weight: 700; }
.sr-legend b { display: inline-block; width: .5rem; height: .5rem; margin-right: .25rem; border-radius: 50%; vertical-align: -1px; }
.sr-legend .is-a { background: var(--cp-accent); } .sr-legend .is-b { background: #f2c14e; } .sr-legend .is-you { background: var(--sr-you); } .sr-legend .is-partner { background: var(--sr-partner); }
.sr-range { right: .8rem; bottom: .8rem; }
@keyframes sr-donut-a { 0%, 8% { stroke-dasharray: 0 999; } 46%, 100% { stroke-dasharray: 163 999; } }
@keyframes sr-donut-b { 0%, 40% { stroke-dasharray: 0 999; } 66%, 100% { stroke-dasharray: 113 999; } }
@keyframes sr-bar-1 { 0%, 12% { transform: scaleY(0); } 34%, 100% { transform: scaleY(1); } }
@keyframes sr-bar-2 { 0%, 18% { transform: scaleY(0); } 40%, 100% { transform: scaleY(1); } }
@keyframes sr-bar-3 { 0%, 24% { transform: scaleY(0); } 46%, 100% { transform: scaleY(1); } }
@keyframes sr-bar-4 { 0%, 30% { transform: scaleY(0); } 52%, 100% { transform: scaleY(1); } }
@keyframes sr-bar-5 { 0%, 36% { transform: scaleY(0); } 58%, 100% { transform: scaleY(1); } }
@keyframes sr-bar-6 { 0%, 42% { transform: scaleY(0); } 64%, 100% { transform: scaleY(1); } }

/* 9. Recurring rule: drag from 75/25 to 60/40, save */
.sr-rule-head { display: flex; align-items: center; gap: .5rem; }
.sr-rule-head > div { flex: 1; min-width: 0; }
.sr-rule-head b { display: block; color: var(--cp-text); font-size: .76rem; font-weight: 800; }
.sr-rule-head span { display: block; color: var(--cp-text-muted); font-size: .6rem; }
.sr-logo { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .55rem; background: #0e3f6b; color: #fff; font-size: .8rem; font-weight: 800; }
.sr-pill-on { flex: none; padding: .2rem .5rem; border-radius: 999px; background: color-mix(in srgb, #22c55e 18%, var(--cp-surface)); color: #15803d; font-size: .58rem; font-weight: 800; font-style: normal; }
[data-bs-theme="dark"] .sr-pill-on { color: #4ade80; }
.sr-ratio-row { display: flex; justify-content: space-between; margin-top: .75rem; font-size: .7rem; font-weight: 800; }
.sr-track-rule { margin-top: .4rem; }
.sr-fill-rule { width: 60%; animation-name: sr-fill-75-60; }
.sr-knob-rule { left: 60%; animation-name: sr-knob-75-60; }
.sr-rule-note { display: flex; align-items: center; gap: .3rem; margin-top: .65rem; color: var(--cp-text-muted); font-size: .6rem; font-weight: 700; }
.sr-rule-note i { color: var(--cp-accent); font-size: .85rem; }
.sr-rule-actions { position: absolute; left: .8rem; right: .8rem; bottom: .8rem; display: flex; gap: .4rem; }
.sr-rule-actions span { flex: 1; padding: .38rem .3rem; border: 1px solid var(--cp-border); border-radius: 999px; color: var(--cp-text); font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
.sr-rule-actions .is-accent { border-color: var(--cp-accent); background: var(--cp-accent); color: #fff; }
@keyframes sr-fill-75-60 { 0%, 24% { width: 75%; } 40%, 100% { width: 60%; } }
@keyframes sr-knob-75-60 { 0%, 24% { left: 75%; } 40%, 100% { left: 60%; } }

/* 10. Web to mobile: a split leaves the browser and lands on the phone */
.sr-sync { --t: 9s; }
.sr-line { display: block; height: .34rem; margin: .45rem .5rem 0; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 12%, transparent); }
.sr-line.is-short { width: 55%; }
.sr-browser { position: absolute; left: .8rem; top: .8rem; width: 10.6rem; height: 6.6rem; border: 1px solid var(--cp-border); border-radius: .65rem; background: var(--cp-surface); box-shadow: 0 16px 30px -16px rgba(27, 19, 64, .5); overflow: hidden; }
.sr-browser::before { content: ""; display: block; height: .95rem; border-bottom: 1px solid var(--cp-border); background: radial-gradient(circle at .55rem 50%, #ef4444 .16rem, transparent .2rem), radial-gradient(circle at 1rem 50%, #f59e0b .16rem, transparent .2rem), radial-gradient(circle at 1.45rem 50%, #22c55e .16rem, transparent .2rem), color-mix(in srgb, var(--cp-text) 4%, var(--cp-surface)); }
.sr-mini-row { display: flex; align-items: center; gap: .3rem; margin: .45rem .5rem 0; padding: .26rem .4rem; border: 1px solid var(--cp-border); border-radius: .45rem; color: var(--cp-text); font-size: .54rem; font-weight: 800; white-space: nowrap; }
.sr-mini-row > i { color: var(--cp-accent); font-size: .75rem; }
.sr-mini-row em { margin-left: auto; padding: .14rem .38rem; border-radius: 999px; background: var(--cp-accent); color: #fff; font-size: .5rem; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.sr-mini-row.is-ghost { opacity: .55; }
.sr-mini-row.is-ghost em { background: color-mix(in srgb, var(--cp-text) 20%, transparent); }
.sr-packet { position: absolute; left: 7.6rem; top: 4rem; z-index: 3; display: inline-flex; align-items: center; gap: .25rem; padding: .28rem .5rem; border-radius: 999px; background: var(--cp-accent); color: #fff; font-size: .62rem; font-weight: 800; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cp-accent) 80%, transparent); opacity: 0; animation-name: sr-packet; }
.sr-phone { position: absolute; right: .8rem; top: .55rem; width: 5.5rem; height: 10.7rem; border: .22rem solid var(--hs-bezel); border-radius: 1rem; background: var(--cp-surface); box-shadow: 0 18px 34px -16px rgba(27, 19, 64, .55); overflow: hidden; }
.sr-phone::before { content: ""; position: absolute; top: .3rem; left: 50%; width: 1.6rem; height: .3rem; transform: translateX(-50%); border-radius: 999px; background: var(--hs-bezel); }
.sr-phone > .sr-line { margin-top: .45rem; }
.sr-phone > .sr-line:first-of-type { margin-top: 3.3rem; }
.sr-notify { position: absolute; left: .3rem; right: .3rem; top: .85rem; z-index: 2; padding: .35rem .4rem; border: 1px solid var(--cp-border); border-radius: .5rem; background: var(--cp-surface); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .4); animation-name: sr-notify; }
.sr-notify b { display: flex; align-items: center; gap: .2rem; color: var(--cp-text); font-size: .52rem; }
.sr-notify b i { color: var(--cp-accent); }
.sr-notify span { display: block; color: var(--cp-text-muted); font-size: .5rem; line-height: 1.25; }
.sr-paybtn { position: absolute; left: .4rem; right: .4rem; bottom: .45rem; padding: .34rem; border-radius: 999px; background: var(--sr-pay); color: #fff; font-size: .56rem; font-weight: 800; text-align: center; animation-name: sr-paybtn; }
@keyframes sr-packet { 0%, 16% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; transform: translate(0, 0) scale(1); } 32% { transform: translate(3.4rem, -2.2rem) scale(1.06); } 42% { opacity: 1; transform: translate(6.7rem, -2.4rem) scale(.55); } 44%, 100% { opacity: 0; transform: translate(6.7rem, -2.4rem) scale(.4); } }
@keyframes sr-notify { 0%, 42% { transform: translateY(-170%); opacity: 0; } 48%, 100% { transform: none; opacity: 1; } }
@keyframes sr-paybtn { 0%, 52% { opacity: 0; transform: translateY(6px); } 58% { opacity: 1; transform: none; } 66% { transform: scale(1.06); } 72%, 100% { opacity: 1; transform: none; } }

/* 11. Alerts for both */
.sr-inboxes { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding: .15rem .55rem 0; }
.sr-inbox { position: relative; display: grid; justify-items: center; gap: .15rem; color: var(--cp-text-muted); font-size: .54rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sr-inbox .sr-av { width: 2.25rem; height: 2.25rem; }
.sr-inbox .hr-badge { top: -.1rem; right: .1rem; animation-name: sr-badge-a; }
.sr-inbox.is-partner .hr-badge { animation-name: sr-badge-b; }
.sr-envelope { position: absolute; left: 50%; top: .55rem; margin-left: -.7rem; color: var(--cp-accent); font-size: 1.45rem; line-height: 1; filter: drop-shadow(0 4px 8px rgba(27, 19, 64, .35)); opacity: 0; animation-name: sr-env-a; }
.sr-envelope.is-b { animation-name: sr-env-b; }
.sr-mail { position: absolute; left: .8rem; right: .8rem; padding: .4rem .55rem; border: 1px solid var(--cp-border); border-radius: .7rem; background: var(--cp-surface); box-shadow: 0 12px 26px -14px rgba(27, 19, 64, .5); }
.sr-mail.is-1 { top: 4.7rem; animation-name: sr-mail-1; }
.sr-mail.is-2 { top: 8.05rem; animation-name: sr-mail-2; }
.sr-mail-head { display: flex; align-items: center; gap: .35rem; }
.sr-mail-head i { flex: none; color: var(--cp-accent); font-size: .95rem; }
.sr-mail-head b { flex: 1; min-width: 0; color: var(--cp-text); font-size: .66rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-mail-head small { flex: none; color: var(--cp-text-muted); font-size: .54rem; font-weight: 700; }
.sr-mail > span { display: block; margin-top: .1rem; color: var(--cp-text-muted); font-size: .6rem; }
@keyframes sr-env-a { 0%, 8% { opacity: 0; transform: translate(0, -.4rem) scale(.6); } 12% { opacity: 1; transform: translate(0, 0) scale(1); } 30% { opacity: 1; transform: translate(-6.3rem, .3rem) scale(.9); } 34%, 100% { opacity: 0; transform: translate(-6.3rem, .3rem) scale(.4); } }
@keyframes sr-env-b { 0%, 8% { opacity: 0; transform: translate(0, -.4rem) scale(.6); } 12% { opacity: 1; transform: translate(0, 0) scale(1); } 30% { opacity: 1; transform: translate(6.3rem, .3rem) scale(.9); } 34%, 100% { opacity: 0; transform: translate(6.3rem, .3rem) scale(.4); } }
@keyframes sr-badge-a { 0%, 30% { transform: scale(0); } 35% { transform: scale(1.25); } 38%, 100% { transform: scale(1); } }
@keyframes sr-badge-b { 0%, 32% { transform: scale(0); } 37% { transform: scale(1.25); } 40%, 100% { transform: scale(1); } }
@keyframes sr-mail-1 { 0%, 36% { opacity: 0; transform: translateY(8px); } 42%, 100% { opacity: 1; transform: none; } }
@keyframes sr-mail-2 { 0%, 54% { opacity: 0; transform: translateY(8px); } 60%, 100% { opacity: 1; transform: none; } }

/* 13. From the email to the payment sheet */
.sr-mailcard { padding: .5rem .6rem .55rem; border: 1px solid var(--cp-border); border-radius: .8rem; background: var(--cp-surface); box-shadow: 0 12px 26px -14px rgba(27, 19, 64, .5); }
.sr-mailcard > span { display: block; margin: .12rem 0 .45rem; color: var(--cp-text-muted); font-size: .6rem; }
.sr-mailbtn { display: inline-block; padding: .32rem .75rem; border-radius: 999px; background: var(--cp-accent); color: #fff; font-size: .6rem; font-weight: 800; font-style: normal; animation-name: sr-press-30; }
.sr-pointer-deep { left: 2.9rem; top: 4.15rem; bottom: auto; animation-name: sr-pointer-deep; }
.sr-sheet { position: absolute; left: .55rem; right: .55rem; bottom: 0; z-index: 2; padding: .55rem .6rem .6rem; border: 1px solid var(--cp-border); border-bottom: 0; border-radius: .9rem .9rem 0 0; background: var(--cp-surface); box-shadow: 0 -14px 30px -16px rgba(27, 19, 64, .55); transform: translateY(110%); animation-name: sr-sheet; }
.sr-sheet::before { content: ""; display: block; width: 2rem; height: .22rem; margin: -.15rem auto .35rem; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 22%, transparent); }
.sr-sheet b { display: block; margin-bottom: .4rem; color: var(--cp-text); font-size: .66rem; font-weight: 800; }
.sr-rails.is-compact { grid-template-columns: repeat(4, 1fr); gap: .3rem; margin-top: 0; }
.sr-rails.is-compact .sr-rail { flex-direction: column; gap: .2rem; padding: .35rem .15rem; font-size: .52rem; }
.sr-rails.is-compact .sr-rail i { width: 1.3rem; height: 1.3rem; font-size: .8rem; }
@keyframes sr-press-30 { 0%, 28% { transform: scale(1); filter: none; } 31% { transform: scale(.9); filter: brightness(.85); } 34%, 100% { transform: scale(1); filter: none; } }
@keyframes sr-pointer-deep { 0%, 6% { opacity: 0; transform: translate(6rem, 5rem); } 12% { opacity: 1; } 26% { transform: translate(0, 0); } 30% { transform: translate(0, 0) scale(.82); } 33%, 38% { opacity: 1; transform: translate(0, 0) scale(1); } 44%, 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes sr-sheet { 0%, 36% { transform: translateY(110%); } 42%, 74% { transform: none; } 80%, 100% { transform: translateY(110%); } }


/* ===== Share & Settle Up stage (ss-*): the release's animated hero art ===== */
.ss-stage { container-type: inline-size; position: relative; isolation: isolate; width: 100%; aspect-ratio: 10 / 8.4; border: 1px solid var(--cp-border); border-radius: 1.75rem; overflow: hidden; background: radial-gradient(110% 85% at 74% 18%, color-mix(in srgb, var(--cp-accent) 22%, transparent), transparent 60%), radial-gradient(90% 70% at 10% 90%, color-mix(in srgb, #d97706 14%, transparent), transparent 55%), linear-gradient(160deg, color-mix(in srgb, var(--cp-accent) 9%, var(--cp-surface)), var(--cp-surface) 70%); color: var(--cp-text); font-family: var(--si-font-sans-serif, "Manrope", system-ui, sans-serif); }
.ss-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(color-mix(in srgb, var(--cp-text-muted) 32%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; mask-image: radial-gradient(70% 70% at 55% 45%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 55% 45%, #000, transparent); opacity: .5; }
.ss-browser { position: absolute; z-index: 1; left: 4%; top: 18.5%; width: 71%; height: 64%; border: 1px solid var(--cp-border); border-radius: 1.6cqw; background: var(--cp-surface); box-shadow: 0 34px 60px -26px rgba(27, 19, 64, .55); overflow: hidden; }
.ss-browser::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 3.4cqw; border-bottom: 1px solid var(--cp-border); background: radial-gradient(circle at 1.6cqw 50%, #ef4444 .5cqw, transparent .62cqw), radial-gradient(circle at 3cqw 50%, #f59e0b .5cqw, transparent .62cqw), radial-gradient(circle at 4.4cqw 50%, #22c55e .5cqw, transparent .62cqw), color-mix(in srgb, var(--cp-text) 4%, var(--cp-surface)); }
.ss-shot { position: absolute; left: 0; top: 3.4cqw; width: 100%; height: calc(100% - 3.4cqw); object-fit: cover; object-position: top; opacity: 0; animation: ss-shot-1 30s ease-in-out infinite; }
.ss-shot.is-1 { opacity: 1; }
.ss-shot.is-2 { animation-name: ss-shot-2; } .ss-shot.is-3 { animation-name: ss-shot-3; } .ss-shot.is-4 { animation-name: ss-shot-4; } .ss-shot.is-5 { animation-name: ss-shot-5; }
.ss-shot-label { position: absolute; z-index: 3; left: 2.4cqw; top: 5.4cqw; padding: 1cqw 1.9cqw; border: 1px solid var(--cp-border); border-radius: 999px; background: color-mix(in srgb, var(--cp-surface) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--cp-text); font-size: clamp(.5rem, 1.9cqw, .72rem); font-weight: 800; white-space: nowrap; opacity: 0; animation: ss-shot-1 30s ease-in-out infinite; }
.ss-shot-label.is-1 { opacity: 1; }
.ss-shot-label.is-2 { animation-name: ss-shot-2; } .ss-shot-label.is-3 { animation-name: ss-shot-3; } .ss-shot-label.is-4 { animation-name: ss-shot-4; } .ss-shot-label.is-5 { animation-name: ss-shot-5; }
@keyframes ss-shot-1 { 0%, 17% { opacity: 1; } 20%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ss-shot-2 { 0%, 17% { opacity: 0; } 20%, 37% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes ss-shot-3 { 0%, 37% { opacity: 0; } 40%, 57% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes ss-shot-4 { 0%, 57% { opacity: 0; } 60%, 77% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes ss-shot-5 { 0%, 77% { opacity: 0; } 80%, 97% { opacity: 1; } 100% { opacity: 0; } }
.ss-phone { position: absolute; z-index: 4; right: 3.5%; bottom: 3.5%; width: 25%; aspect-ratio: 9 / 18.5; border: .7cqw solid #161a2c; border-radius: 4.2cqw; background: #161a2c; overflow: hidden; box-shadow: 0 30px 56px -22px rgba(27, 19, 64, .6), 0 0 0 .25cqw rgba(255, 255, 255, .06) inset; }
.ss-phone::after { content: ""; position: absolute; z-index: 3; top: 1.1cqw; left: 50%; width: 30%; height: 2.2cqw; transform: translateX(-50%); border-radius: 999px; background: #05070d; }
.ss-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 3.4cqw; opacity: 0; animation: ss-screen-1 30s ease-in-out infinite; }
.ss-screen.is-1 { opacity: 1; }
.ss-screen.is-2 { animation-name: ss-screen-2; } .ss-screen.is-3 { animation-name: ss-screen-3; }
@keyframes ss-screen-1 { 0%, 30% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ss-screen-2 { 0%, 30% { opacity: 0; } 34%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes ss-screen-3 { 0%, 63% { opacity: 0; } 67%, 96% { opacity: 1; } 100% { opacity: 0; } }
.ss-notify { position: absolute; z-index: 5; left: 5%; right: 5%; top: 9%; padding: 1.3cqw 1.6cqw; border: 1px solid var(--cp-border); border-radius: 1.6cqw; background: color-mix(in srgb, var(--cp-surface) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .5); animation: ss-notify 9s ease-in-out infinite; }
.ss-notify b { display: flex; align-items: center; gap: .6cqw; color: var(--cp-text); font-size: clamp(.42rem, 1.7cqw, .66rem); }
.ss-notify b i { color: var(--cp-accent); }
.ss-notify span { display: block; margin-top: .3cqw; color: var(--cp-text-muted); font-size: clamp(.4rem, 1.55cqw, .6rem); line-height: 1.3; }
@keyframes ss-notify { 0%, 40% { opacity: 0; transform: translateY(-140%); } 47%, 100% { opacity: 1; transform: none; } }
.ss-pills { position: absolute; z-index: 5; top: 4.5%; left: 4%; right: 4%; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2cqw; margin: 0; padding: 0; list-style: none; }
.ss-pills li { display: inline-flex; align-items: center; gap: 1.1cqw; padding: 1.2cqw 1.9cqw; border: 1px solid var(--cp-border); border-radius: 999px; background: color-mix(in srgb, var(--cp-surface) 86%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 18px -10px rgba(27, 19, 64, .4); color: var(--cp-text); font-size: clamp(.54rem, 2cqw, .74rem); font-weight: 700; white-space: nowrap; }
.ss-pills li i { color: var(--cp-accent); font-size: 1.3em; }
.ss-pills li.is-new { gap: 1cqw; padding-inline: 2cqw; border-color: transparent; background: var(--cp-accent); color: #fff; font-size: clamp(.5rem, 1.7cqw, .64rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ss-pills li.is-new::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #fff; animation: ss-pulse 2.2s ease-in-out infinite; }
@keyframes ss-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .55; } }
.ss-badge { position: absolute; z-index: 5; right: 4%; top: 15.5%; display: inline-flex; align-items: center; gap: 1cqw; padding: 1.1cqw 1.8cqw; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 88%, var(--cp-accent)); color: var(--cp-surface); font-size: clamp(.5rem, 1.8cqw, .68rem); font-weight: 800; white-space: nowrap; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .5); }
.ss-badge i { font-size: 1.3em; }
.ss-flow { position: absolute; z-index: 6; left: 40%; top: 44%; display: inline-flex; align-items: center; gap: 1cqw; padding: 1.3cqw 2cqw; border-radius: 999px; background: var(--cp-accent); color: #fff; font-size: clamp(.52rem, 1.9cqw, .72rem); font-weight: 800; white-space: nowrap; box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--cp-accent) 85%, transparent); opacity: 0; animation: ss-flow 9s ease-in-out infinite; }
.ss-flow i { font-size: 1.3em; }
@keyframes ss-flow { 0%, 10% { opacity: 0; transform: translate(0, 0) scale(.7); } 15% { opacity: 1; transform: translate(0, 0) scale(1); } 30% { transform: translate(16cqw, -14cqw) scale(1.04); } 40% { opacity: 1; transform: translate(31cqw, -13cqw) scale(.55); } 42%, 100% { opacity: 0; transform: translate(31cqw, -13cqw) scale(.4); } }
.ss-callout { position: absolute; z-index: 6; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2.2cqw; padding: 2.2cqw 2.6cqw; border: 1px solid var(--cp-border); border-radius: 2.8cqw; background: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)), color-mix(in srgb, var(--cp-surface) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 48px -22px rgba(27, 19, 64, .55); }
.ss-callout > i { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 3.6cqw; }
.ss-callout.tone-success > i { background: color-mix(in srgb, #22c55e 18%, var(--cp-surface)); color: #15803d; }
.ss-callout small { display: block; margin-bottom: .6cqw; color: var(--cp-text-muted); font-size: clamp(.5rem, 1.7cqw, .66rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ss-callout strong { display: block; color: var(--cp-text); font-size: clamp(.68rem, 2.5cqw, .95rem); line-height: 1.25; }
.ss-callout span { display: block; margin-top: .5cqw; color: var(--cp-text-muted); font-size: clamp(.56rem, 1.9cqw, .78rem); }
.ss-auto { left: 3%; bottom: 4%; width: 54%; animation: ss-float-a 9s ease-in-out infinite; }
.ss-paid { right: 12%; bottom: 20%; width: 50%; animation: ss-paid 9s ease-in-out infinite; }
@keyframes ss-float-a { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-6px); } }
@keyframes ss-paid { 0%, 56% { opacity: 0; transform: translateY(12px) scale(.94); } 63%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(12px) scale(.94); } }
[data-bs-theme="dark"] .ss-callout.tone-success > i { color: #4ade80; }
[data-bs-theme="dark"] .ss-badge { background: color-mix(in srgb, var(--cp-accent) 70%, #000); color: #fff; }
.nf-spotlight-art.nf-spotlight-stage { background: transparent; overflow: visible; }
.nf-spotlight-stage .ss-stage { aspect-ratio: 10 / 8.4; }
.nf-detail-art { position: relative; width: 100%; max-width: 36rem; justify-self: end; text-decoration: none; }
.nf-reel { margin: 0 0 3.5rem; }
.nf-reel > .container { max-width: none; padding-inline: 0; }
.nf-reel.hr-section { padding-top: 0; }
.nf-detail-art .ss-stage { transition: transform .25s ease; }
.nf-detail-art:hover .ss-stage { transform: translateY(-4px); }
@media (max-width: 991.98px) {
    .nf-detail-art { justify-self: center; }
}
@media (max-width: 575.98px) {
    .ss-pills li:nth-child(n + 5) { display: none; }
    .ss-badge { display: none; }
    .ss-paid { width: 56%; right: 6%; }
}
@media (prefers-reduced-motion: reduce) {
    .ss-shot, .ss-shot-label, .ss-screen, .ss-notify, .ss-paid, .ss-auto, .ss-pills li.is-new::before { animation: none; }
    .ss-flow { display: none; }
    .ss-notify, .ss-paid { opacity: 1; transform: none; }
}

@media (max-width: 575.98px) {
    .sr-reel { --fs-card: 19.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sr-pointer-pay, .sr-pointer-revert, .sr-pointer-deep, .sr-packet, .sr-envelope, .sr-scanbar, .sr-beam, .sr-notif, .sr-selbar, .sr-sheet, .sr-open-chip { display: none; }
    .sr-charge { transform: none; opacity: 1; }
}