/* For-couples page additions to the hs-* showcase system (home-showcase.css must load first).
   cs-* = couples showcase. Every demo is CSS keyframes on one loop per demo (--cs-t); no JS.
   Colors mirror the app: blue = you, gold = partner. Figures in the mocks are illustrative. */
.cs { --cs-you: #3661e3; --cs-partner: #cc7c2d; --cs-screen: #fbfbfd; --cs-bar: #ffffff; --cs-card: #ffffff; --cs-line: #e4e5ef; --cs-tab: #e9eaea; --cs-pay: #16a34a; --cs-t: 12s; }
[data-bs-theme="dark"] .cs { --cs-you: #70a3f3; --cs-partner: #f2c14b; --cs-screen: #0b0e18; --cs-bar: #0b0e18; --cs-card: #10131f; --cs-line: #2c2f43; --cs-tab: #121725; --cs-pay: #4ade80; }
.cs-swap { display: grid; }
.cs-swap > * { grid-area: 1 / 1; }
.cs-avatar-img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- CSS phone mock (same bezel as .hs-phone, but the screen is markup) ---------- */
.cs-phone { --w: 16rem; position: relative; width: var(--w); aspect-ratio: 720 / 1564; flex: none; border-radius: calc(var(--w) * .135); border: calc(var(--w) * .022) solid var(--hs-bezel); background: var(--hs-bezel); box-shadow: var(--hs-shadow), 0 0 0 1px rgba(255, 255, 255, .06) inset; overflow: hidden; font-size: calc(var(--w) * .052); line-height: 1.25; }
.cs-phone::after { content: ""; position: absolute; top: calc(var(--w) * .035); left: 50%; z-index: 6; width: calc(var(--w) * .3); height: calc(var(--w) * .07); transform: translateX(-50%); border-radius: 999px; background: #05070d; }
.cs-screen { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: calc(var(--w) * .115); background: var(--cs-screen); color: var(--cp-text); overflow: hidden; }
.cs-status { display: flex; justify-content: space-between; padding: 1em 1.5em 0; font-size: .78em; font-weight: 800; }
.cs-status span:last-child { display: flex; gap: .3em; font-size: 1.1em; }
.cs-appbar { display: flex; align-items: center; justify-content: space-between; padding: .9em 1.1em .75em; border-bottom: 1px solid var(--cs-line); background: var(--cs-bar); }
.cs-logo { display: block; height: 2em; width: auto; }
.cs-appbar-icons { display: flex; align-items: center; gap: .55em; font-size: 1.2em; color: var(--cp-text); }
.cs-appbar-icons > i { position: relative; }
.cs-appbar-icons > i b { position: absolute; top: -.3em; right: -.35em; min-width: 1.15em; height: 1.15em; padding: 0 .2em; border-radius: 999px; background: #1e8c86; color: #fff; font-size: .48em; font-weight: 800; line-height: 1.15em; text-align: center; }
.cs-avatars { position: relative; display: flex; margin-right: .35em; perspective: 12em; }
.cs-avatar { width: 1.75em; height: 1.75em; border-radius: 50%; border: 2px solid var(--cs-you); overflow: hidden; background: var(--cs-card); }
.cs-avatar.is-partner { margin-left: -.45em; border-color: var(--cs-partner); }
.cs-tap { position: absolute; left: 50%; top: 50%; width: 3.6em; height: 3.6em; margin: -1.8em 0 0 -1.8em; border-radius: 50%; border: 2px solid var(--cp-accent); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--cp-accent) 25%, transparent); opacity: 0; transform: scale(.35); pointer-events: none; }
.cs-body { flex: 1; padding: .7em .9em 0; overflow: hidden; }
.cs-mode { font-size: .66em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-accent); }
.cs-mode i { font-size: 1.3em; vertical-align: -.15em; }
.cs-total { margin: .35em 0 .2em; }
.cs-total small { display: block; font-size: .6em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-text-muted); }
.cs-total b { display: block; font-size: 1.55em; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.cs-total em { display: block; font-size: .62em; font-style: normal; color: var(--cp-text-muted); }
.cs-group { margin: .8em 0 .1em; font-size: .58em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-text-muted); }
.cs-group.is-partner { display: flex; align-items: center; gap: .5em; color: var(--cs-partner); }
.cs-group img { width: 1.9em; height: 1.9em; border-radius: 50%; border: 1px solid var(--cs-partner); }
.cs-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55em; margin-top: .4em; padding: .5em .65em; border: 1px solid var(--cs-line); border-left: .22em solid var(--cs-you); border-radius: .8em; background: var(--cs-card); }
.cs-row.is-partner { border-left-color: var(--cs-partner); }
.cs-row > i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .55em; background: color-mix(in srgb, var(--cp-accent) 12%, var(--cs-card)); color: var(--cp-accent); font-size: 1em; }
.cs-row.is-partner > i { background: color-mix(in srgb, var(--cs-partner) 16%, var(--cs-card)); color: var(--cs-partner); }
.cs-row div { min-width: 0; }
.cs-row div b { display: block; font-size: .78em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-row div span { display: block; font-size: .62em; color: var(--cp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-row > b { font-size: .76em; font-weight: 800; white-space: nowrap; }
.cs-row.is-neg > b { color: #dc2626; }
[data-bs-theme="dark"] .cs-row.is-neg > b { color: #f87171; }
.cs-tabbar { display: flex; justify-content: space-between; margin: auto .7em .8em; padding: .45em .5em; border: 1px solid var(--cs-line); border-radius: 999px; background: var(--cs-bar); box-shadow: 0 .5em 1.2em rgba(0, 0, 0, .14); }
.cs-tabbar span { display: grid; justify-items: center; gap: .1em; padding: .35em .55em; border-radius: 999px; font-size: .5em; font-weight: 700; }
.cs-tabbar span i { font-size: 2em; }
.cs-tabbar span.is-active { background: var(--cs-tab); color: var(--cp-accent); }

/* ---------- Hero: tap the avatars → they spin into one, partner rows collapse (12s loop) ---------- */
.cs-hero { --cs-t: 12s; }
.cs-hero-stage { aspect-ratio: 10 / 9.9; width: 100%; max-width: 34rem; margin-left: auto; }
.cs-hero-stage::before { content: ""; position: absolute; inset: 12% 8% 10% 8%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cp-accent) 26%, transparent), transparent 70%); filter: blur(18px); }
.cs-hero-stage .cs-phone { --w: 44cqw; position: absolute; right: 3%; top: 2%; z-index: 2; }
.cs-hero-pill-1 { top: 4%; right: 2%; animation: cs-hero-pill var(--cs-t) ease-in-out infinite; }
.cs-hero-callout { left: 0; bottom: 10%; width: 47%; }
.cs-hero-callout-b { right: 0; top: 40%; width: 40%; }
.cs-hero .cs-avatar.is-partner { transform-origin: 30% 50%; animation: cs-hero-partner var(--cs-t) ease-in-out infinite; }
.cs-hero .cs-avatar.is-you { animation: cs-hero-you var(--cs-t) ease-in-out infinite; }
.cs-hero .cs-tap { animation: cs-hero-tap var(--cs-t) ease-out infinite; }
.cs-partner-block { display: grid; grid-template-rows: 1fr; animation: cs-hero-block var(--cs-t) ease-in-out infinite; }
.cs-partner-block > div { min-height: 0; overflow: hidden; }
.cs-hero .cs-swap .is-both { animation: cs-hero-both var(--cs-t) ease-in-out infinite; }
.cs-hero .cs-swap .is-you { opacity: 0; animation: cs-hero-only-you var(--cs-t) ease-in-out infinite; }
@keyframes cs-hero-partner { 0%, 33% { transform: translateX(0) rotate(0turn) scale(1); opacity: 1; } 41%, 74% { transform: translateX(-60%) rotate(-1.5turn) scale(.08); opacity: 0; } 82%, 100% { transform: translateX(0) rotate(0turn) scale(1); opacity: 1; } }
@keyframes cs-hero-you { 0%, 33% { transform: rotateY(0turn) scale(1); } 37% { transform: rotateY(.5turn) scale(1.16); } 41%, 74% { transform: rotateY(1turn) scale(1); } 78% { transform: rotateY(1.5turn) scale(1.16); } 82%, 100% { transform: rotateY(2turn) scale(1); } }
@keyframes cs-hero-tap { 0%, 30% { opacity: 0; transform: scale(.35); } 31% { opacity: 1; transform: scale(.5); } 35%, 71% { opacity: 0; transform: scale(1.35); } 72% { opacity: 1; transform: scale(.5); } 76%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes cs-hero-block { 0%, 34% { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); } 42%, 74% { grid-template-rows: 0fr; opacity: 0; transform: translateY(-.4em); } 82%, 100% { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); } }
@keyframes cs-hero-both { 0%, 34% { opacity: 1; transform: translateY(0); } 40%, 75% { opacity: 0; transform: translateY(-.3em); } 81%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes cs-hero-only-you { 0%, 34% { opacity: 0; transform: translateY(.3em); } 40%, 75% { opacity: 1; transform: translateY(0); } 81%, 100% { opacity: 0; transform: translateY(.3em); } }
@keyframes cs-hero-pill { 0%, 29%, 35%, 70%, 76%, 100% { transform: scale(1); } 32%, 73% { transform: scale(1.09); } }

/* Mini avatar loop used in the "one tap" strip (4s) */
.cs-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.cs-mode-card { --cs-t: 4s; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.35rem; border: 1px solid var(--cp-border); border-radius: 1.4rem; background: var(--cp-surface); }
.cs-mode-card b { display: block; margin-bottom: .2rem; color: var(--cp-text); font-size: 1.02rem; }
.cs-mode-card p { margin: 0; font-size: .9rem; line-height: 1.45; }
.cs-mini { position: relative; display: flex; width: 4.6rem; height: 2.6rem; perspective: 20rem; }
.cs-mini .cs-avatar { width: 2.6rem; height: 2.6rem; font-size: 1rem; }
.cs-mini .cs-avatar.is-partner { margin-left: -.7rem; }
.cs-mini.is-one .cs-avatar.is-partner { display: none; }
.cs-mini.is-spin .cs-avatar.is-partner { transform-origin: 30% 50%; animation: cs-mini-partner var(--cs-t) ease-in-out infinite; }
.cs-mini.is-spin .cs-avatar.is-you { animation: cs-mini-you var(--cs-t) ease-in-out infinite; }
.cs-mini.is-spin .cs-tap { width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; left: 40%; animation: cs-mini-tap var(--cs-t) ease-out infinite; }
@keyframes cs-mini-partner { 0%, 30% { transform: translateX(0) rotate(0turn) scale(1); opacity: 1; } 45%, 75% { transform: translateX(-55%) rotate(-1.5turn) scale(.08); opacity: 0; } 90%, 100% { transform: translateX(0) rotate(0turn) scale(1); opacity: 1; } }
@keyframes cs-mini-you { 0%, 30% { transform: rotateY(0turn) scale(1); } 37% { transform: rotateY(.5turn) scale(1.14); } 45%, 75% { transform: rotateY(1turn) scale(1); } 82% { transform: rotateY(1.5turn) scale(1.14); } 90%, 100% { transform: rotateY(2turn) scale(1); } }
@keyframes cs-mini-tap { 0%, 26% { opacity: 0; transform: scale(.35); } 28% { opacity: 1; transform: scale(.5); } 36%, 71% { opacity: 0; transform: scale(1.3); } 73% { opacity: 1; transform: scale(.5); } 81%, 100% { opacity: 0; transform: scale(1.3); } }

/* ---------- Granular sharing: three switches, partner's phone fills in layer by layer (16s loop) ---------- */
.cs-share { --cs-t: 16s; }
.cs-share-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.cs-pv { display: grid; justify-items: center; }
.cs-controls { position: relative; padding: 1.2rem 1.25rem 1rem; border: 1px solid var(--cp-border); border-radius: 1.4rem; background: var(--cp-surface); box-shadow: var(--hs-shadow); }
.cs-controls-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; color: var(--cp-text); font-size: .86rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cs-controls-head > i { color: var(--cp-accent); font-size: 1.3rem; }
.cs-controls-head small { margin-left: auto; color: var(--cp-accent); font-size: .68rem; font-weight: 800; }
.cs-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--cp-border); }
.cs-switch-row b { display: block; color: var(--cp-text); font-size: .9rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cs-switch-row span { display: block; color: var(--cp-text-muted); font-size: .8rem; }
.cs-switch { position: relative; flex: none; width: 3.1rem; height: 1.75rem; border-radius: 999px; background: color-mix(in srgb, var(--cp-accent) 22%, var(--cp-surface)); }
.cs-switch i { position: absolute; top: .2rem; left: .2rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--cp-accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.cs-switch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; border-radius: 50%; border: 2px solid var(--cp-accent); opacity: 0; transform: scale(.4); }
.cs-controls-foot { display: flex; gap: .6rem; margin-top: .9rem; }
.cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; flex: 1; padding: .6rem .9rem; border-radius: .75rem; background: var(--cp-accent); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cs-btn.is-ghost { flex: 0 0 auto; background: var(--cp-accent-soft); color: var(--cp-text); }
.cs-share .is-1 .cs-switch { animation: cs-sw1 var(--cs-t) ease-in-out infinite; }
.cs-share .is-2 .cs-switch { animation: cs-sw2 var(--cs-t) ease-in-out infinite; }
.cs-share .is-3 .cs-switch { animation: cs-sw3 var(--cs-t) ease-in-out infinite; }
.cs-share .is-1 .cs-switch i { animation: cs-knob1 var(--cs-t) ease-in-out infinite; }
.cs-share .is-2 .cs-switch i { animation: cs-knob2 var(--cs-t) ease-in-out infinite; }
.cs-share .is-3 .cs-switch i { animation: cs-knob3 var(--cs-t) ease-in-out infinite; }
.cs-share .is-1 .cs-switch::after { animation: cs-ring1 var(--cs-t) ease-out infinite; }
.cs-share .is-2 .cs-switch::after { animation: cs-ring2 var(--cs-t) ease-out infinite; }
.cs-share .is-3 .cs-switch::after { animation: cs-ring3 var(--cs-t) ease-out infinite; }
.cs-share .cs-controls-foot .cs-btn:not(.is-ghost) { animation: cs-save var(--cs-t) ease-in-out infinite; }
@keyframes cs-sw1 { 0%, 8% { background: color-mix(in srgb, var(--cp-accent) 22%, var(--cp-surface)); } 10%, 86% { background: color-mix(in srgb, var(--cp-accent) 62%, var(--cp-surface)); } 88%, 100% { background: color-mix(in srgb, var(--cp-accent) 22%, var(--cp-surface)); } }
@keyframes cs-sw2 { 0%, 32% { background: color-mix(in srgb, var(--cp-accent) 22%, var(--cp-surface)); } 34%, 86% { background: color-mix(in srgb, var(--cp-accent) 62%, var(--cp-surface)); } 88%, 100% { background: color-mix(in srgb, var(--cp-accent) 22%, var(--cp-surface)); } }
@keyframes cs-sw3 { 0%, 56% { background: color-mix(in srgb, var(--cp-accent) 22%, var(--cp-surface)); } 58%, 86% { background: color-mix(in srgb, var(--cp-accent) 62%, var(--cp-surface)); } 88%, 100% { background: color-mix(in srgb, var(--cp-accent) 22%, var(--cp-surface)); } }
@keyframes cs-knob1 { 0%, 8% { transform: translateX(0); } 10%, 86% { transform: translateX(1.35rem); } 88%, 100% { transform: translateX(0); } }
@keyframes cs-knob2 { 0%, 32% { transform: translateX(0); } 34%, 86% { transform: translateX(1.35rem); } 88%, 100% { transform: translateX(0); } }
@keyframes cs-knob3 { 0%, 56% { transform: translateX(0); } 58%, 86% { transform: translateX(1.35rem); } 88%, 100% { transform: translateX(0); } }
@keyframes cs-ring1 { 0%, 7% { opacity: 0; transform: scale(.4); } 8% { opacity: 1; transform: scale(.5); } 12%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes cs-ring2 { 0%, 31% { opacity: 0; transform: scale(.4); } 32% { opacity: 1; transform: scale(.5); } 36%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes cs-ring3 { 0%, 55% { opacity: 0; transform: scale(.4); } 56% { opacity: 1; transform: scale(.5); } 60%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes cs-save { 0%, 9%, 12%, 33%, 36%, 57%, 60%, 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } 10.5%, 34.5%, 58.5% { transform: scale(1.06); box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--cp-accent) 30%, transparent); } }
/* partner's phone: layers */
.cs-pv .cs-phone { --w: 15rem; }
.cs-pv-head { display: flex; align-items: center; gap: .5em; margin-top: .3em; font-size: .78em; font-weight: 800; }
.cs-pv-head img { width: 1.9em; height: 1.9em; border-radius: 50%; border: 1px solid var(--cs-you); }
.cs-layer { display: grid; grid-template-rows: 0fr; opacity: 0; }
.cs-layer > div { min-height: 0; overflow: hidden; }
.cs-layer.is-0 { grid-template-rows: 1fr; opacity: 1; animation: cs-layer0 var(--cs-t) ease-in-out infinite; }
.cs-layer.is-1 { animation: cs-layer1 var(--cs-t) ease-in-out infinite; }
.cs-layer.is-2 { animation: cs-layer2 var(--cs-t) ease-in-out infinite; }
.cs-layer.is-3 { animation: cs-layer3 var(--cs-t) ease-in-out infinite; }
.cs-empty { display: grid; justify-items: center; gap: .3em; margin-top: 1.4em; padding: 1.4em 1em; border: 1px dashed var(--cs-line); border-radius: 1em; text-align: center; }
.cs-empty i { font-size: 1.8em; color: var(--cp-text-muted); }
.cs-empty b { font-size: .8em; }
.cs-empty span { font-size: .62em; color: var(--cp-text-muted); }
.cs-layer .cs-row { grid-template-columns: 1fr auto; }
.cs-layer .cs-row.is-tx { grid-template-columns: auto 1fr auto; }
@keyframes cs-layer0 { 0%, 9% { grid-template-rows: 1fr; opacity: 1; } 13%, 89% { grid-template-rows: 0fr; opacity: 0; } 93%, 100% { grid-template-rows: 1fr; opacity: 1; } }
@keyframes cs-layer1 { 0%, 11% { grid-template-rows: 0fr; opacity: 0; transform: translateY(.5em); } 15%, 87% { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); } 91%, 100% { grid-template-rows: 0fr; opacity: 0; transform: translateY(.5em); } }
@keyframes cs-layer2 { 0%, 35% { grid-template-rows: 0fr; opacity: 0; transform: translateY(.5em); } 39%, 87% { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); } 91%, 100% { grid-template-rows: 0fr; opacity: 0; transform: translateY(.5em); } }
@keyframes cs-layer3 { 0%, 59% { grid-template-rows: 0fr; opacity: 0; transform: translateY(.5em); } 63%, 87% { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); } 91%, 100% { grid-template-rows: 0fr; opacity: 0; transform: translateY(.5em); } }
.cs-share-caption { display: flex; align-items: center; gap: .4rem; justify-content: center; margin-top: .8rem; color: var(--cp-text-muted); font-size: .82rem; font-weight: 700; }
.cs-share-caption img { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--cs-partner); }

/* ---------- Per-account sharing stage ---------- */
.cs-accounts-stage { aspect-ratio: 10 / 10.6; width: 100%; max-width: 34rem; }
.cs-accounts-stage::before { content: ""; position: absolute; inset: 10% 5%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cp-accent) 26%, transparent), transparent 70%); filter: blur(18px); }
.cs-accounts-stage .hs-phone { position: absolute; }
.cs-accounts-stage .hs-phone-front { --w: 46cqw; left: 4cqw; top: 6%; z-index: 3; }
.cs-accounts-stage .hs-phone-back { --w: 40cqw; right: 5cqw; top: 14%; z-index: 2; }
.cs-accounts-stage .cs-pill-1 { top: 2%; left: 40%; }
.cs-accounts-stage .cs-pill-2 { top: 52%; right: 0; }
.cs-accounts-stage .cs-callout-a { left: 2%; bottom: 4%; width: 58%; }

/* ---------- Settle demo (14s loop) ---------- */
@property --cs-d { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --cs-c { syntax: '<integer>'; inherits: false; initial-value: 0; }
@counter-style cs-pad2 { system: extends decimal; pad: 2 "0"; }
.cs-settle { --cs-t: 14s; }
.cs-settle-demo { position: relative; max-width: 26rem; margin-top: 1.75rem; padding: 1.1rem 1.15rem 1rem; border: 1px solid var(--cp-border); border-radius: 1.4rem; background: var(--cp-surface); box-shadow: var(--hs-shadow); animation: cs-sd-fade var(--cs-t) ease-in-out infinite; }
.cs-sd-title { margin-bottom: .75rem; text-align: center; color: var(--cp-text-muted); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cs-sd-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cs-sd-person { display: grid; justify-items: center; gap: .15rem; text-align: center; }
.cs-sd-person img { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--cs-you); }
.cs-sd-person.is-partner img { border-color: var(--cs-partner); }
.cs-sd-person small { color: var(--cs-you); font-size: .74rem; font-weight: 800; }
.cs-sd-person.is-partner small { color: var(--cs-partner); }
.cs-sd-person b { color: var(--cp-text); font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.cs-sd-person span { color: var(--cp-text-muted); font-size: .72rem; }
.cs-sd-amt { --cs-d: 263; --cs-c: 42; counter-reset: csd var(--cs-d) csc var(--cs-c); animation: cs-sd-amt var(--cs-t) steps(1, end) infinite; }
.cs-sd-amt::before { content: "$" counter(csd) "." counter(csc, cs-pad2); }
.cs-sd-bar { display: flex; gap: .3rem; margin: .8rem 0 .5rem; height: .55rem; }
.cs-sd-bar i { flex: 0 0 94%; border-radius: 999px; background: var(--cs-you); animation: cs-sd-bar var(--cs-t) ease-in-out infinite; }
.cs-sd-bar i + i { flex: 1; background: var(--cs-partner); animation: none; }
.cs-sd-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--cp-border); }
.cs-sd-logo { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: color-mix(in srgb, var(--cs-you) 14%, var(--cp-surface)); color: var(--cs-you); font-size: .8rem; font-weight: 800; }
.cs-sd-row div b { display: block; color: var(--cp-text); font-size: .86rem; }
.cs-sd-row div span { display: block; color: var(--cp-text-muted); font-size: .72rem; }
.cs-sd-row > b { color: var(--cp-text); font-size: .95rem; font-weight: 800; }
.cs-sd-pay { display: grid; min-width: 3.4rem; padding: .35rem .5rem; border: 1px solid var(--cp-border); border-radius: .6rem; text-align: center; font-size: .66rem; font-weight: 800; letter-spacing: .06em; }
.cs-sd-pay i { grid-area: 1 / 1; font-style: normal; color: var(--cs-pay); }
.cs-sd-pay i + i { opacity: 0; }
.cs-sd-pay i + i::before { content: "✓ "; }
.cs-sd-done { position: absolute; left: 50%; bottom: -1rem; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 999px; background: var(--cs-pay); color: #fff; font-size: .78rem; font-weight: 800; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(22, 163, 74, .8); transform: translate(-50%, .6rem); opacity: 0; animation: cs-sd-done var(--cs-t) ease-in-out infinite; }
.cs-sd-row.is-1 { animation: cs-sd-r1 var(--cs-t) ease-in-out infinite; } .cs-sd-row.is-1 .cs-sd-pay i:first-child { animation: cs-sd-p1-out var(--cs-t) ease-in-out infinite; } .cs-sd-row.is-1 .cs-sd-pay i + i { animation: cs-sd-p1-in var(--cs-t) ease-in-out infinite; }
.cs-sd-row.is-2 { animation: cs-sd-r2 var(--cs-t) ease-in-out infinite; } .cs-sd-row.is-2 .cs-sd-pay i:first-child { animation: cs-sd-p2-out var(--cs-t) ease-in-out infinite; } .cs-sd-row.is-2 .cs-sd-pay i + i { animation: cs-sd-p2-in var(--cs-t) ease-in-out infinite; }
.cs-sd-row.is-3 { animation: cs-sd-r3 var(--cs-t) ease-in-out infinite; } .cs-sd-row.is-3 .cs-sd-pay i:first-child { animation: cs-sd-p3-out var(--cs-t) ease-in-out infinite; } .cs-sd-row.is-3 .cs-sd-pay i + i { animation: cs-sd-p3-in var(--cs-t) ease-in-out infinite; }
.cs-sd-row.is-4 { animation: cs-sd-r4 var(--cs-t) ease-in-out infinite; } .cs-sd-row.is-4 .cs-sd-pay i:first-child { animation: cs-sd-p4-out var(--cs-t) ease-in-out infinite; } .cs-sd-row.is-4 .cs-sd-pay i + i { animation: cs-sd-p4-in var(--cs-t) ease-in-out infinite; }
.cs-sd-row.is-5 { animation: cs-sd-r5 var(--cs-t) ease-in-out infinite; } .cs-sd-row.is-5 .cs-sd-pay i:first-child { animation: cs-sd-p5-out var(--cs-t) ease-in-out infinite; } .cs-sd-row.is-5 .cs-sd-pay i + i { animation: cs-sd-p5-in var(--cs-t) ease-in-out infinite; }
@keyframes cs-sd-fade { 0% { opacity: 0; } 3%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cs-sd-amt { 0%, 18.9% { --cs-d: 263; --cs-c: 42; } 19%, 32.9% { --cs-d: 229; --cs-c: 14; } 33%, 46.9% { --cs-d: 156; --cs-c: 7; } 47%, 60.9% { --cs-d: 87; --cs-c: 67; } 61%, 74.9% { --cs-d: 12; --cs-c: 67; } 75%, 100% { --cs-d: 0; --cs-c: 0; } }
@keyframes cs-sd-bar { 0%, 18% { flex-basis: 94%; } 22%, 32% { flex-basis: 84%; } 36%, 46% { flex-basis: 62%; } 50%, 60% { flex-basis: 40%; } 64%, 74% { flex-basis: 12%; } 78%, 100% { flex-basis: 0%; } }
@keyframes cs-sd-r1 { 0%, 19% { opacity: 1; } 22%, 100% { opacity: .5; } }
@keyframes cs-sd-r2 { 0%, 33% { opacity: 1; } 36%, 100% { opacity: .5; } }
@keyframes cs-sd-r3 { 0%, 47% { opacity: 1; } 50%, 100% { opacity: .5; } }
@keyframes cs-sd-r4 { 0%, 61% { opacity: 1; } 64%, 100% { opacity: .5; } }
@keyframes cs-sd-r5 { 0%, 75% { opacity: 1; } 78%, 100% { opacity: .5; } }
@keyframes cs-sd-p1-out { 0%, 18% { opacity: 1; transform: scale(1); } 19% { transform: scale(.85); } 20%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cs-sd-p1-in { 0%, 19% { opacity: 0; transform: scale(.7); } 21%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cs-sd-p2-out { 0%, 32% { opacity: 1; transform: scale(1); } 33% { transform: scale(.85); } 34%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cs-sd-p2-in { 0%, 33% { opacity: 0; transform: scale(.7); } 35%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cs-sd-p3-out { 0%, 46% { opacity: 1; transform: scale(1); } 47% { transform: scale(.85); } 48%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cs-sd-p3-in { 0%, 47% { opacity: 0; transform: scale(.7); } 49%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cs-sd-p4-out { 0%, 60% { opacity: 1; transform: scale(1); } 61% { transform: scale(.85); } 62%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cs-sd-p4-in { 0%, 61% { opacity: 0; transform: scale(.7); } 63%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cs-sd-p5-out { 0%, 74% { opacity: 1; transform: scale(1); } 75% { transform: scale(.85); } 76%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cs-sd-p5-in { 0%, 75% { opacity: 0; transform: scale(.7); } 77%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cs-sd-done { 0%, 78% { opacity: 0; transform: translate(-50%, .6rem) scale(.9); } 82%, 94% { opacity: 1; transform: translate(-50%, 0) scale(1); } 97%, 100% { opacity: 0; transform: translate(-50%, .6rem) scale(.9); } }
.cs-settle-panel { aspect-ratio: 10 / 9; }
.cs-settle-panel .cs-pill-1 { top: 3%; left: 3%; }
.cs-settle-panel .cs-pill-2 { top: 3%; right: 3%; }
.cs-settle-panel .cs-callout-a { left: 3%; bottom: 4%; width: 46%; }
.cs-settle-panel .cs-callout-b { right: 3%; bottom: 4%; width: 44%; }

/* ---------- Recurring split demo (10s loop) ---------- */
.cs-recurring { --cs-t: 10s; }
.cs-rule-demo { position: relative; max-width: 26rem; margin-top: 1.75rem; padding: 1.1rem 1.15rem; border: 1px solid var(--cp-border); border-radius: 1.4rem; background: var(--cp-surface); box-shadow: var(--hs-shadow); }
.cs-rd-rule { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; }
.cs-rd-rule div b { display: block; color: var(--cp-text); font-size: .95rem; }
.cs-rd-rule div span { display: block; color: var(--cp-text-muted); font-size: .74rem; }
.cs-rd-pill { padding: .3rem .6rem; border-radius: .6rem; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .7rem; font-style: normal; font-weight: 800; }
.cs-rd-ratio { display: flex; gap: .4rem; margin: .8rem 0 0; font-size: .8rem; font-weight: 800; }
.cs-rd-ratio span { flex: var(--pct) 1 0; padding: .35rem .5rem; border-radius: .5rem; background: color-mix(in srgb, var(--cs-you) 14%, var(--cp-surface)); color: var(--cs-you); text-align: center; white-space: nowrap; }
.cs-rd-ratio span.is-partner { background: color-mix(in srgb, var(--cs-partner) 16%, var(--cp-surface)); color: var(--cs-partner); }
.cs-rd-charge { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; margin-top: .9rem; padding: .6rem .7rem; border: 1px solid var(--cp-border); border-radius: .9rem; background: color-mix(in srgb, var(--cp-text) 3%, var(--cp-surface)); opacity: 0; animation: cs-rd-charge var(--cs-t) ease-in-out infinite; }
.cs-rd-charge > i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 1.15rem; }
.cs-rd-charge div b { display: block; color: var(--cp-text); font-size: .88rem; }
.cs-rd-charge div span { display: block; color: var(--cp-text-muted); font-size: .72rem; }
.cs-rd-charge em { padding: .25rem .5rem; border-radius: 999px; background: color-mix(in srgb, #f59e0b 18%, var(--cp-surface)); color: #b45309; font-size: .64rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
[data-bs-theme="dark"] .cs-rd-charge em { color: #fbbf24; }
.cs-rd-split { display: grid; gap: .45rem; margin-top: .7rem; opacity: 0; animation: cs-rd-split var(--cs-t) ease-in-out infinite; }
.cs-rd-line { display: grid; grid-template-columns: auto 4.2rem 1fr auto; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 800; }
.cs-rd-line img { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--cs-you); }
.cs-rd-line.is-partner img { border-color: var(--cs-partner); }
.cs-rd-line span { color: var(--cp-text); }
.cs-rd-line i { position: relative; height: .55rem; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 8%, var(--cp-surface)); overflow: hidden; }
.cs-rd-line i::after { content: ""; position: absolute; inset: 0; width: var(--pct); border-radius: 999px; background: var(--cs-you); transform-origin: left; transform: scaleX(0); animation: cs-rd-fill var(--cs-t) ease-out infinite; }
.cs-rd-line.is-partner i::after { background: var(--cs-partner); }
.cs-rd-line b { color: var(--cp-text); }
.cs-rd-sent { display: flex; align-items: center; gap: .45rem; margin-top: .8rem; padding: .55rem .75rem; border-radius: .75rem; background: color-mix(in srgb, var(--cs-pay) 14%, var(--cp-surface)); color: var(--cp-text); font-size: .78rem; font-weight: 800; opacity: 0; animation: cs-rd-sent var(--cs-t) ease-in-out infinite; }
.cs-rd-sent > i { color: var(--cs-pay); font-size: 1.1rem; }
.cs-rd-sent em { position: relative; margin-left: auto; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid var(--cs-partner); overflow: visible; }
.cs-rd-sent em img { width: 100%; height: 100%; border-radius: 50%; }
.cs-rd-sent em b { position: absolute; top: -.45rem; right: -.5rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 999px; background: #dc2626; color: #fff; font-size: .58rem; line-height: 1.05rem; text-align: center; animation: cs-rd-badge var(--cs-t) ease-out infinite; }
@keyframes cs-rd-charge { 0%, 6% { opacity: 0; transform: translateY(.5rem); } 12%, 92% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(.5rem); } }
@keyframes cs-rd-split { 0%, 24% { opacity: 0; transform: translateY(.5rem); } 30%, 92% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(.5rem); } }
@keyframes cs-rd-fill { 0%, 28% { transform: scaleX(0); } 42%, 100% { transform: scaleX(1); } }
@keyframes cs-rd-sent { 0%, 52% { opacity: 0; transform: translateY(.4rem); } 58%, 92% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(.4rem); } }
@keyframes cs-rd-badge { 0%, 57% { transform: scale(0); } 61% { transform: scale(1.35); } 64%, 100% { transform: scale(1); } }
.cs-recurring-stage { aspect-ratio: 10 / 10.6; width: 100%; max-width: 34rem; }
.cs-recurring-stage::before { content: ""; position: absolute; inset: 10% 5%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cp-accent) 26%, transparent), transparent 70%); filter: blur(18px); }
.cs-recurring-stage .hs-phone { position: absolute; }
.cs-recurring-stage .hs-phone-front { --w: 46cqw; right: 4cqw; top: 6%; z-index: 3; }
.cs-recurring-stage .hs-phone-back { --w: 40cqw; left: 5cqw; top: 14%; z-index: 2; }
.cs-recurring-stage .cs-pill-1 { top: 2%; left: 2%; }
.cs-recurring-stage .cs-pill-2 { top: 50%; left: 0; }
.cs-recurring-stage .cs-callout-a { right: 2%; bottom: 4%; width: 58%; }

/* ---------- Split intelligence demo (11s loop) ---------- */
.cs-ai { --cs-t: 11s; }
.cs-ai-demo { position: relative; max-width: 26rem; margin-top: 1.75rem; padding: 1.1rem 1.15rem; border: 1px solid var(--cp-border); border-radius: 1.4rem; background: var(--cp-surface); box-shadow: var(--hs-shadow); }
.cs-ad-head { display: flex; align-items: center; gap: .6rem; }
.cs-ad-head > i { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .7rem; background: var(--cp-accent); color: #fff; font-size: 1.3rem; }
.cs-ad-head b { display: block; color: var(--cp-text); font-size: .9rem; }
.cs-ad-head span { display: block; color: var(--cp-text-muted); font-size: .72rem; }
.cs-ad-tx { display: flex; justify-content: space-between; align-items: baseline; margin-top: .9rem; padding: .6rem .7rem; border: 1px solid var(--cp-border); border-radius: .8rem; color: var(--cp-text); font-size: .9rem; font-weight: 800; }
.cs-ad-tx span { color: var(--cp-text-muted); font-size: .72rem; font-weight: 600; }
.cs-ad-scan { position: relative; margin-top: .8rem; height: 2.4rem; }
.cs-ad-scan span { position: absolute; inset: 0; display: flex; align-items: center; gap: .5rem; color: var(--cp-text-muted); font-size: .76rem; font-weight: 700; opacity: 0; animation: cs-ad-scan-text var(--cs-t) ease-in-out infinite; }
.cs-ad-scan span::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--cp-accent); border-right-color: transparent; animation: cs-spin 1s linear infinite; }
.cs-ad-scan i { position: absolute; left: 0; right: 0; bottom: 0; height: .35rem; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 8%, var(--cp-surface)); overflow: hidden; }
.cs-ad-scan i::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cp-accent), #a78bfa); transform-origin: left; transform: scaleX(0); animation: cs-ad-scan-bar var(--cs-t) ease-in-out infinite; }
.cs-ad-result { margin-top: -2.4rem; opacity: 0; animation: cs-ad-result var(--cs-t) ease-in-out infinite; }
.cs-ad-ratio { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem .6rem; }
.cs-ad-ratio small { grid-column: 1 / -1; white-space: nowrap; }
.cs-ad-ratio small { color: var(--cp-accent); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cs-ad-ratio b { color: var(--cp-text); font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; }
.cs-ad-conf { justify-self: end; white-space: nowrap; padding: .3rem .6rem; border-radius: 999px; background: color-mix(in srgb, #f59e0b 22%, var(--cp-surface)); color: #b45309; font-size: .62rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transform: scale(0); animation: cs-ad-conf var(--cs-t) ease-out infinite; }
[data-bs-theme="dark"] .cs-ad-conf { color: #fbbf24; }
.cs-ad-bar { display: flex; gap: .25rem; margin: .6rem 0; height: .6rem; }
.cs-ad-bar i { flex: 0 0 0%; border-radius: 999px; background: var(--cs-you); animation: cs-ad-bar var(--cs-t) ease-in-out infinite; }
.cs-ad-bar i + i { flex: 1; background: var(--cs-partner); animation: none; }
.cs-ad-result p { margin: 0 0 .8rem; color: var(--cp-text-muted); font-size: .78rem; line-height: 1.45; }
.cs-ad-actions { display: flex; gap: .5rem; }
.cs-ad-actions .cs-btn { position: relative; }
.cs-ad-actions .cs-btn:not(.is-ghost)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem; border-radius: 50%; border: 2px solid var(--cp-accent); opacity: 0; transform: scale(.4); animation: cs-ad-tap var(--cs-t) ease-out infinite; }
.cs-ad-sent { position: absolute; left: 50%; bottom: -1rem; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 999px; background: var(--cs-pay); color: #fff; font-size: .78rem; font-weight: 800; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(22, 163, 74, .8); opacity: 0; transform: translate(-50%, .6rem); animation: cs-ad-sent var(--cs-t) ease-in-out infinite; }
@keyframes cs-spin { to { transform: rotate(1turn); } }
@keyframes cs-ad-scan-text { 0%, 5% { opacity: 0; } 8%, 34% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes cs-ad-scan-bar { 0%, 7% { transform: scaleX(0); opacity: 1; } 33%, 37% { transform: scaleX(1); opacity: 1; } 40%, 100% { transform: scaleX(0); opacity: 0; } }
@keyframes cs-ad-result { 0%, 38% { opacity: 0; transform: translateY(.5rem); } 44%, 92% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(.5rem); } }
@keyframes cs-ad-bar { 0%, 42% { flex-basis: 0%; } 54%, 100% { flex-basis: 78%; } }
@keyframes cs-ad-conf { 0%, 52% { transform: scale(0); } 56% { transform: scale(1.15); } 59%, 100% { transform: scale(1); } }
@keyframes cs-ad-tap { 0%, 65% { opacity: 0; transform: scale(.4); } 66% { opacity: 1; transform: scale(.5); } 70%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes cs-ad-sent { 0%, 70% { opacity: 0; transform: translate(-50%, .6rem) scale(.9); } 74%, 92% { opacity: 1; transform: translate(-50%, 0) scale(1); } 97%, 100% { opacity: 0; transform: translate(-50%, .6rem) scale(.9); } }
.cs-ai-stage { aspect-ratio: 10 / 10.6; width: 100%; max-width: 34rem; }
.cs-ai-stage::before { content: ""; position: absolute; inset: 10% 5%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cp-accent) 26%, transparent), transparent 70%); filter: blur(18px); }
.cs-ai-stage .hs-phone { position: absolute; }
.cs-ai-stage .hs-phone-front { --w: 46cqw; left: 4cqw; top: 6%; z-index: 3; }
.cs-ai-stage .hs-phone-back { --w: 40cqw; right: 5cqw; top: 14%; z-index: 2; }
.cs-ai-stage .cs-pill-1 { top: 2%; right: 2%; }
.cs-ai-stage .cs-pill-2 { top: 54%; right: 0; }
.cs-ai-stage .cs-callout-a { left: 2%; bottom: 4%; width: 58%; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .cs-hero-stage, .cs-accounts-stage, .cs-recurring-stage, .cs-ai-stage { justify-self: center; margin-left: auto; margin-right: auto; }
    .cs-modes { grid-template-columns: 1fr; }
    .cs-settle-demo, .cs-rule-demo, .cs-ai-demo { max-width: 30rem; }
}
@media (max-width: 1199.98px) {
    .cs-share-layout { grid-template-columns: minmax(0, 1fr) auto; }
    .cs-share-layout > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .cs-share-layout { grid-template-columns: 1fr; justify-items: stretch; }
    .cs-hero-callout-b, .cs-settle-panel .cs-callout-b, .cs-settle-panel .cs-pill-2, .cs-accounts-stage .cs-pill-2, .cs-recurring-stage .cs-pill-2, .cs-ai-stage .cs-pill-2 { display: none; }
    .cs-hero-stage .cs-phone { --w: 50cqw; right: 2%; }
    .cs-hero-callout { width: 46%; bottom: 4%; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-hero *, .cs-share *, .cs-settle-demo, .cs-settle-demo *, .cs-rule-demo *, .cs-ai-demo *, .cs-mini * { animation: none !important; }
    .cs-hero .cs-swap .is-you, .cs-tap, .cs-sd-done, .cs-ad-sent, .cs-ad-scan span { opacity: 0 !important; }
    .cs-layer, .cs-rd-charge, .cs-rd-split, .cs-rd-sent, .cs-ad-result { grid-template-rows: 1fr; opacity: 1; transform: none; }
    .cs-layer.is-0 { display: none; }
    .cs-share .cs-switch { background: color-mix(in srgb, var(--cp-accent) 62%, var(--cp-surface)); }
    .cs-share .cs-switch i { transform: translateX(1.35rem); }
    .cs-rd-line i::after { transform: none; }
    .cs-ad-scan { display: none; }
    .cs-ad-result { margin-top: .8rem; }
    .cs-ad-bar i { flex-basis: 78%; }
    .cs-ad-conf { transform: none; }
}