/* Lightweight app demos, drawn with HTML/CSS/SVG. All timelines share a 15 second loop. */
.v4-motion { --v4-green: #087f55; --v4-coral: #cc343e; --v4-gold: #a75c09; --v4-blue: #2468be; --v4-teal: #087e79; --v4-demo-accent: var(--cp-accent); --v4-demo-soft: color-mix(in srgb, var(--v4-demo-accent) 8%, var(--cp-surface)); min-width: 0; }
[data-bs-theme="dark"] .v4-motion { --v4-green: #34d399; --v4-coral: #fb7d85; --v4-gold: #efbe69; --v4-blue: #82b6ff; --v4-teal: #42d9c8; }
.v4-motion-art { min-width: 0; }
.v4-motion-controls { display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: .8rem .15rem; font-size: .69rem; color: var(--cp-text-muted); }
.v4-motion-controls > span { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.v4-motion-controls button { flex: none; display: flex; align-items: center; gap: .25rem; min-height: 44px; padding: .4rem .7rem; border: 1px solid var(--cp-border); border-radius: 999px; background: var(--cp-surface); color: var(--cp-text); font-size: .75rem; }
.v4-motion-controls button:hover { border-color: var(--cp-accent); color: var(--cp-accent); }
.v4-motion-controls button:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 3px; }
.v4-motion-controls button i { font-size: 1.15rem; }
.v4-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cp-accent); }
.v4-demo-disclaimer { opacity: .85; }
.v4-demo { container-type: inline-size; position: relative; isolation: isolate; --v4-demo-accent: var(--cp-accent); }
.v4-demo.is-green { --v4-demo-accent: var(--v4-green); }
.v4-demo.is-teal { --v4-demo-accent: var(--v4-teal); }
.v4-demo.is-coral { --v4-demo-accent: var(--v4-coral); }
.v4-demo.is-blue { --v4-demo-accent: var(--v4-blue); }
.v4-demo-face { position: relative; overflow: hidden; font-size: 3cqw; line-height: 1.5; padding: 2em; min-height: 35.5em; border: 1px solid color-mix(in srgb, var(--v4-demo-accent) 25%, var(--cp-border)); border-radius: 1.75em; background: linear-gradient(145deg, color-mix(in srgb, var(--v4-demo-accent) 9%, var(--cp-surface)), var(--cp-surface) 75%); box-shadow: 0 2em 4em -3em color-mix(in srgb, var(--v4-demo-accent) 35%, transparent); color: var(--cp-text); }
.v4-demo h3 { color: var(--cp-text); font-size: 1.7em; letter-spacing: -.03em; line-height: 1.2; margin: .8em 0 .5em; }
.v4-demo p { color: var(--cp-text-muted); margin: .4em 0 .8em; font-size: .95em; line-height: 1.65; }
.v4-demo small { font-size: .75em; }
.v4-demo em { font-style: normal; }
.v4-demo svg { width: 100%; height: auto; overflow: visible; }
.v4-demo-top { display: flex; justify-content: space-between; align-items: center; gap: .8em; margin-bottom: 1.6em; }
.v4-demo-top > span:first-child { display: flex; align-items: center; gap: .45em; font-size: 1.04em; font-weight: 800; }
.v4-demo-top > span:first-child > i { font-size: 1.5em; color: var(--v4-demo-accent); }
.v4-tag { display: inline-flex; align-items: center; gap: .3em; padding: .4em .65em; border-radius: 999px; background: color-mix(in srgb, var(--v4-demo-accent) 11%, var(--cp-surface)); color: var(--v4-demo-accent); font-size: .7em; font-weight: 700; white-space: nowrap; }
.v4-tag.is-warm { color: var(--v4-coral); background: color-mix(in srgb, var(--v4-coral) 10%, var(--cp-surface)); }
.v4-tag.is-green { color: var(--v4-green); background: color-mix(in srgb, var(--v4-green) 10%, var(--cp-surface)); }
.v4-positive { color: var(--v4-green) !important; }
.v4-negative { color: var(--v4-coral) !important; }
.v4-mini-label { color: var(--cp-text-muted); letter-spacing: .1em; font-size: .66em; font-weight: 800; margin: 1.7em 0 1.2em; }
.v4-scene-stack { position: relative; height: 27.2em; }
.v4-phase { position: absolute; inset: 0; opacity: 0; transform: translateY(.7em); pointer-events: none; }
.v4-phase.is-one { opacity: 1; transform: none; animation: v4-phase-one 15s infinite; }
.v4-phase.is-two { animation: v4-phase-two 15s infinite; }
.v4-phase.is-three { animation: v4-phase-three 15s infinite; }
.v4-demo-progress { position: absolute; left: 2em; right: 2em; bottom: 1em; height: 2px; background: var(--cp-border); overflow: hidden; border-radius: 2px; }
.v4-demo-progress > i { display: block; height: 100%; background: var(--v4-demo-accent); transform-origin: left; animation: v4-progress 15s linear infinite; }
.v4-insight { display: flex; gap: .9em; padding: 1.25em; margin-bottom: .8em; border: 1px solid color-mix(in srgb, var(--v4-demo-accent) 17%, var(--cp-border)); border-left: .25em solid var(--v4-demo-accent); background: var(--cp-surface); border-radius: 1em; }
.v4-insight.is-coral { --v4-demo-accent: var(--v4-coral); }
.v4-insight.is-gold { --v4-demo-accent: var(--v4-gold); }
.v4-insight.is-green { --v4-demo-accent: var(--v4-green); }
.v4-insight > i { font-size: 1.5em; color: var(--v4-demo-accent); margin-top: .1em; }
.v4-insight b { font-size: 1em; }
.v4-insight p { font-size: .85em; margin: .3em 0 .6em; }
.v4-insight span { color: var(--cp-accent); font-size: .8em; font-weight: 700; }
.v4-feature-icon { display: inline-grid; place-items: center; width: 3.5em; height: 3.5em; border-radius: 1em; color: var(--v4-demo-accent); background: color-mix(in srgb, var(--v4-demo-accent) 12%, var(--cp-surface)); }
.v4-feature-icon.is-coral { --v4-demo-accent: var(--v4-coral); }
.v4-feature-icon > i { font-size: 1.9em; }
.v4-compare { display: grid; gap: 1.3em; margin: 1.5em 0; }
.v4-compare > div { display: grid; grid-template-columns: 1fr auto; gap: .5em; font-size: .95em; }
.v4-compare i { grid-column: 1/-1; height: .7em; width: var(--fill); border-radius: 1em; background: var(--v4-coral); transform-origin: left; animation: v4-comparison 15s infinite; }
.v4-compare > div:first-child i { background: var(--cp-accent); }
.v4-action { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: 1em; font-weight: 700; border-radius: .85em; background: var(--cp-accent); color: #fff; font-size: .85em; }
.v4-ai-heading { display: flex; gap: .9em; align-items: center; margin: 1.8em 0; }
.v4-ai-heading > i { font-size: 2.5em; color: var(--cp-accent); }
.v4-ai-heading b, .v4-ai-heading span { display: block; }
.v4-ai-heading span { color: var(--cp-text-muted); font-size: .75em; }
.v4-analysis-line { display: flex; align-items: flex-start; gap: 1em; padding: 1.2em 0; border-top: 1px solid var(--cp-border); }
.v4-analysis-line > span { display: grid; place-items: center; padding: .5em; background: var(--cp-accent-soft); color: var(--cp-accent); border-radius: .55em; font-size: .85em; }
.v4-soft-note { display: flex; align-items: center; gap: .65em; background: color-mix(in srgb, var(--v4-demo-accent) 9%, var(--cp-surface)); padding: 1em; border-radius: .85em; font-size: .85em; margin: 1.2em 0; color: var(--cp-text); }
.v4-soft-note > i { color: var(--v4-demo-accent); font-size: 1.45em; flex: none; }
.v4-pulse-value b { font-size: 3.3em; letter-spacing: -.055em; line-height: 1.1; }
.v4-pulse-value span { display: block; color: var(--cp-text-muted); font-size: 1em; margin-top: .3em; }
.v4-payday { display: inline-flex; align-items: center; gap: .4em; color: var(--v4-green); background: color-mix(in srgb, var(--v4-green) 10%, var(--cp-surface)); padding: .45em .75em; border-radius: 999px; margin: .8em 0 1.2em; font-size: .85em; font-weight: 700; }
.v4-stat-trio { display: grid; grid-template-columns: repeat(3,1fr); gap: .65em; }
.v4-stat-trio > div { background: color-mix(in srgb, var(--cp-surface) 85%, transparent); padding: .9em .65em; border-radius: .9em; }
.v4-stat-trio small, .v4-stat-trio b { display: block; }
.v4-stat-trio small { color: var(--cp-text-muted); font-size: .58em; letter-spacing: .05em; font-weight: 700; }
.v4-stat-trio b { font-size: 1.25em; margin-top: .3em; }
.v4-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3em; margin: .5em 0 1.4em; }
.v4-calendar > div { display: flex; align-items: center; flex-direction: column; gap: .4em; padding: .6em .1em; border: 1px solid var(--cp-border); border-radius: .6em; background: var(--cp-surface); }
.v4-calendar small { font-size: .5em; color: var(--cp-text-muted); }
.v4-calendar b { font-size: .9em; }
.v4-merchant { display: inline-grid; place-items: center; flex: none; width: 2em; height: 2em; font-weight: 800; background: var(--cp-accent); color: #fff; border-radius: 50%; }
.v4-merchant.is-teal { background: #087e79; }.v4-merchant.is-coral { background: #c8454e; }.v4-merchant.is-blue { background: #2468be; }.v4-merchant.is-green { background: #087f55; }
.v4-calendar .v4-merchant { font-size: .9em; animation: v4-calendar-pop 15s infinite; }
.v4-calendar > div:nth-child(2) .v4-merchant { animation-delay: .2s; }.v4-calendar > div:nth-child(3) .v4-merchant { animation-delay: .4s; }.v4-calendar > div:nth-child(4) .v4-merchant { animation-delay: .6s; }.v4-calendar > div:nth-child(5) .v4-merchant { animation-delay: .8s; }.v4-calendar > div:nth-child(6) .v4-merchant { animation-delay: 1s; }
.v4-calendar em { font-size: .56em; color: var(--cp-accent); font-weight: 800; }
.v4-income-day { border-color: var(--v4-green) !important; }.v4-income-day em { color: var(--v4-green); }
.v4-day-empty { height: 1.8em; color: var(--cp-text-muted); }
.v4-chart-caption { display: flex; justify-content: space-between; gap: .7em; color: var(--cp-text-muted); font-size: .65em; margin: .75em 0; }
.v4-chart-caption b { font-weight: 800; }
.v4-chart-grid { stroke: var(--cp-text-muted); stroke-opacity: .15; }
.v4-area { fill: var(--v4-demo-accent); fill-opacity: .12; }
.v4-draw { stroke: var(--v4-demo-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: v4-line 15s ease-in-out infinite; }
.v4-chart-ping { fill: var(--v4-coral); animation: v4-ping 15s infinite; }.v4-payday-ping { fill: var(--v4-green); animation: v4-ping 15s 1s infinite; }
.v4-segments { position: relative; display: flex; align-items: center; gap: .25em; padding: .3em; background: color-mix(in srgb, var(--cp-text-muted) 7%, var(--cp-surface)); border-radius: .85em; font-size: .78em; margin: .8em 0 1.5em; }
.v4-segments > span { flex: 1; text-align: center; padding: .7em .25em; border-radius: .65em; z-index: 1; }
.v4-segments .is-selected { background: var(--cp-surface); box-shadow: 0 .3em 1em #0000000a; color: var(--v4-demo-accent); font-weight: 800; }
.v4-checkup-total { padding: .5em 0 1em; }.v4-checkup-total small { font-size: .65em; letter-spacing: .1em; color: var(--cp-text-muted); font-weight: 700; }.v4-checkup-total b { display: block; font-size: 3em; letter-spacing: -.05em; color: var(--v4-green); }.v4-checkup-total b span { font-size: .45em; }.v4-checkup-total p { font-size: .85em; }
.v4-task { display: flex; align-items: center; gap: .75em; padding: 1.2em .1em; border-top: 1px solid var(--cp-border); }.v4-task b,.v4-task small { display: block; }.v4-task b { font-size: .85em; }.v4-task small { color: var(--cp-text-muted); margin-top: .2em; }.v4-task em { margin-left: auto; color: var(--v4-green); font-size: .73em; font-weight: 700; white-space: nowrap; }.v4-task-check { width: 1.5em; height: 1.5em; flex: none; border-radius: .45em; border: 1px solid var(--cp-border); display: grid; place-items: center; }.v4-task-done .v4-task-check { animation: v4-check 15s infinite; }.v4-task-done .v4-task-check i { animation: v4-checkmark 15s infinite; }.v4-task-snooze .v4-task-check { color: var(--v4-gold); }.v4-task-snooze { animation: v4-snooze 15s infinite; }
.v4-completion { font-size: .8em; margin: 1.8em 0 0; color: var(--v4-green); padding: .9em; background: color-mix(in srgb, var(--v4-green) 8%, transparent); border-radius: .7em; animation: v4-complete 15s infinite; }
.v4-review-stack { position: relative; height: 25em; margin: 1em .5em 0; }.v4-review-card { position: absolute; inset: 1em .5em; padding: 2em; text-align: center; border: 1px solid var(--cp-border); border-radius: 1.5em; background: var(--cp-surface); box-shadow: 0 .7em 2em #0000000a; }.v4-review-card .v4-merchant { font-size: 1.6em; margin-top: .5em; }.v4-review-card > b { font-size: 2em; letter-spacing: -.04em; }.v4-review-card > b small { font-size: .45em; color: var(--cp-text-muted); }.v4-review-card p { font-size: .85em; }.v4-review-card.is-under { transform: translateY(.6em) scale(.96); }.v4-review-card.is-top { animation: v4-swipe 15s infinite; }.v4-reviewed-stamp { position: absolute; right: 1.3em; top: 1.3em; color: var(--v4-green); font-size: .8em; font-weight: 800; border: 2px solid var(--v4-green); padding: .3em .6em; border-radius: .4em; transform: rotate(12deg); animation: v4-stamp 15s infinite; }.v4-price-history { display: flex; align-items: center; justify-content: center; gap: 1.5em; padding: 1.6em 0 .5em; font-size: .8em; color: var(--cp-text-muted); }.v4-price-history b { display: block; color: var(--cp-text); }.v4-review-actions { display: flex; justify-content: space-between; font-size: .85em; margin: .5em 1em; }.v4-review-gesture { color: var(--cp-accent); animation: v4-gesture 15s infinite; }
.v4-demo-review .v4-demo-face { min-height: 39.5em; }.v4-demo-checkup .v4-demo-face { min-height: 39.5em; }
.v4-search { position: relative; display: flex; gap: .7em; padding: 1em; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: .8em; font-size: .85em; color: var(--cp-text-muted); }.v4-search-placeholder { animation: v4-search-placeholder 15s infinite; }.v4-search-query { position: absolute; left: 3em; color: var(--cp-text); font-weight: 700; animation: v4-query 15s infinite; }.v4-caret { color: var(--v4-demo-accent); }
.v4-account-row { display: flex; align-items: flex-start; gap: .8em; padding: 1.3em .25em; border-bottom: 1px solid var(--cp-border); }.v4-account-row b { font-size: .9em; }.v4-account-row small,.v4-account-row em { display: block; font-size: .72em; color: var(--cp-text-muted); margin-top: .3em; }.v4-account-row em { color: var(--v4-green); }.v4-account-row strong { margin-left: auto; font-size: .95em; }.v4-bank-icon { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: .8em; background: color-mix(in srgb, var(--v4-demo-accent) 12%, var(--cp-surface)); color: var(--v4-demo-accent); font-weight: 800; }.v4-bank-icon.is-coral { color: var(--v4-coral); }.v4-bank-icon.is-green { color: var(--v4-green); }.v4-bank-icon i { font-size: 1.4em; }.v4-account-row.is-filtered { animation: v4-filter 15s infinite; }
.v4-account-sheet { position: absolute; left: 1em; right: 1em; top: 7.7em; bottom: 2em; background: linear-gradient(145deg, color-mix(in srgb,var(--v4-teal) 13%,var(--cp-surface)), var(--cp-surface) 75%); box-shadow: 0 -1em 3em #00000012; border: 1px solid color-mix(in srgb,var(--v4-teal) 22%,var(--cp-border)); padding: 1.5em; border-radius: 1.6em; transform: translateY(120%); animation: v4-sheet 15s infinite; }.v4-sheet-handle { height: .25em; width: 3em; margin: -.4em auto 1.5em; background: var(--cp-text-muted); border-radius: 1em; opacity: .3; }.v4-account-sheet > small { font-size: .63em; letter-spacing: .04em; }.v4-account-sheet h3 { font-size: 2.8em; margin: .45em 0 .25em; }.v4-account-sheet > span { font-size: .85em; }.v4-account-sheet .v4-chart-caption { margin-top: 2em; }.v4-account-sheet .v4-action { margin-top: 1.3em; }.v4-account-hint { margin: 2em 0 1em; font-size: .85em; color: var(--v4-teal); }
.v4-portfolio-value { display: flex; flex-direction: column; gap: .4em; margin: 1em 0 1.7em; }.v4-portfolio-value small { font-size: .63em; letter-spacing: .1em; color: var(--cp-text-muted); }.v4-portfolio-value b { font-size: 2.9em; letter-spacing: -.045em; line-height: 1.1; }.v4-portfolio-value > span { font-size: .83em; }
.v4-cycle-segments > i { position: absolute; top: .3em; bottom: .3em; left: .3em; width: calc((100% - .6em) / 3); border-radius: .65em; background: var(--cp-surface); box-shadow: 0 .3em 1em #0000000a; animation: v4-segment 15s infinite; }.v4-demo-portfolio .v4-scene-stack { height: 18.7em; }.v4-demo-portfolio .v4-soft-note { margin-top: 0; }
.v4-bars { position: relative; display: flex; align-items: flex-end; gap: .65em; height: 13em; padding: 1em .2em 3em; border-bottom: 1px solid var(--cp-border); background: repeating-linear-gradient(to top, transparent 0, transparent calc(33.33% - 1px),var(--cp-border) calc(33.33% - 1px),var(--cp-border) 33.33%); }.v4-bars > div { position: relative; flex: 1; height: var(--bar); min-height: .2em; }.v4-bars i { display: block; height: 100%; background: linear-gradient(var(--v4-green),color-mix(in srgb,var(--v4-green) 70%,var(--cp-surface))); border-radius: .4em .4em 0 0; transform-origin: bottom; animation: v4-grow 15s infinite; }.v4-bars .is-negative { align-self: flex-end; transform: translateY(100%); max-height: 2.3em; }.v4-bars .is-negative i { background: var(--v4-coral); transform-origin: top; border-radius: 0 0 .4em .4em; }.v4-bars span { position: absolute; left: 50%; top: calc(100% + 2.5em); transform: translateX(-50%); font-size: .58em; color: var(--cp-text-muted); }.v4-bars .is-negative span { top: calc(100% + .5em); }
.v4-bars { padding: 1em .2em 1.8em; }
.v4-demo-portfolio .v4-scene-stack { height: 19.7em; }
.v4-bars > div { height: 100%; }
.v4-bars i { position: absolute; bottom: 25%; width: 100%; height: calc(var(--bar) * .7); }
.v4-bars .is-negative { transform: none; max-height: none; }
.v4-bars .is-negative i { top: 75%; bottom: auto; }
.v4-bars span, .v4-bars .is-negative span { top: auto; bottom: -2.4em; }
.v4-account-sheet { z-index: 3; }
.v4-drawdown-chart { --v4-demo-accent: var(--v4-coral); margin-top: 1.5em; }
.v4-driver { display: grid; grid-template-columns: 3.3em 1fr 4.3em; align-items: center; gap: .7em; margin: 1.7em 0; font-size: .85em; }.v4-driver i { height: 1.8em; width: var(--fill); background: var(--v4-green); border-radius: .4em; transform-origin: left; animation: v4-driver 15s infinite; }.v4-driver span { text-align: right; font-weight: 700; }.v4-driver.is-negative i { background: var(--v4-coral); }
.v4-dividend-total { display: flex; flex-direction: column; gap: .4em; margin: 2em 0; }.v4-dividend-total small { color: var(--cp-text-muted); letter-spacing: .08em; font-size: .63em; }.v4-dividend-total b { font-size: 3.4em; letter-spacing: -.05em; color: var(--v4-green); line-height: 1.1; }.v4-dividend-total > span { font-size: .8em; color: var(--cp-text-muted); }.v4-income-bars { display: flex; align-items: flex-end; gap: .7em; height: 10em; border-bottom: 1px solid var(--cp-border); }.v4-income-bars > i { flex: 1; height: var(--bar); border-radius: .4em .4em 0 0; background: linear-gradient(var(--v4-green),color-mix(in srgb,var(--v4-green) 55%,var(--cp-surface))); transform-origin: bottom; animation: v4-income 15s infinite; }.v4-income-bars > i:nth-child(3n) { animation-delay: .3s; }.v4-income-bars > i:nth-child(3n + 1) { animation-delay: .6s; }.v4-dividend-event { display: flex; gap: .8em; align-items: center; padding: 1.2em; margin-top: 1.5em; border: 1px solid var(--cp-border); background: var(--cp-surface); border-radius: 1em; animation: v4-payout 15s infinite; }.v4-dividend-event b { font-size: .9em; }.v4-dividend-event small { display: block; color: var(--cp-text-muted); }.v4-dividend-event strong { margin-left: auto; color: var(--v4-green); font-size: .95em; }.v4-demo-dividends .v4-demo-face,.v4-demo-portfolio .v4-demo-face { min-height: 39em; }
.v4-credit-summary { display: flex; align-items: center; gap: 1.2em; margin: 2em 0; }.v4-credit-summary h3 { margin: .2em 0; font-size: 2em; }.v4-credit-summary small { color: var(--cp-text-muted); font-size: .6em; letter-spacing: .1em; }.v4-credit-summary div > span { font-size: .72em; color: var(--cp-text-muted); }.v4-cycle-track { height: .4em; border-radius: 1em; background: var(--cp-border); position: relative; margin-top: 2.2em; }.v4-cycle-track > i { display: block; width: 63%; height: 100%; background: var(--v4-coral); border-radius: inherit; transform-origin: left; animation: v4-cycle 15s infinite; }.v4-cycle-track > span { position: absolute; top: -.2em; width: .8em; height: .8em; border-radius: 50%; background: var(--cp-surface); border: .2em solid var(--v4-coral); }.v4-cycle-start { left: 0; }.v4-cycle-now { left: 62%; }.v4-cycle-due { right: 0; }.v4-interest-warning { display: flex; gap: .8em; padding: 1.2em; margin: 1.7em 0; background: color-mix(in srgb,var(--v4-gold) 9%,var(--cp-surface)); border-radius: 1em; }.v4-interest-warning > i { color: var(--v4-gold); font-size: 1.6em; }.v4-interest-warning b { font-size: .85em; }.v4-interest-warning p { font-size: .8em; margin-bottom: 0; }.v4-payoff-row { display: grid; grid-template-columns: 1fr; gap: .55em; margin: 1.2em 0; font-size: .85em; }.v4-payoff-row > i { width: 90%; height: .7em; background: var(--v4-coral); border-radius: 1em; transform-origin: left; animation: v4-cycle 15s infinite; }.v4-payoff-row > i.is-plan { width: 47%; background: var(--v4-green); }
.v4-transaction-head { display: flex; align-items: center; gap: .85em; padding: 1.5em; margin: -2em -2em 1.8em; background: #c53f50; color: #fff; }.v4-transaction-head .v4-merchant { background: #ffffff25; border-radius: .6em; font-size: 1.4em; }.v4-transaction-head small { font-size: .55em; letter-spacing: .1em; }.v4-transaction-head h3 { color: #fff; margin: .15em 0 0; font-size: 1.5em; }.v4-transaction-head > b { margin-left: auto; font-size: 1.6em; }.v4-edit-row { display: flex; align-items: center; gap: 1em; padding: 1.4em .25em; border-bottom: 1px solid var(--cp-border); font-size: .85em; }.v4-edit-row > span { color: var(--cp-text-muted); }.v4-edit-row > b { margin-left: auto; }.v4-edit-row > i { color: var(--v4-blue); }.v4-keep-row { display: flex; align-items: center; gap: .7em; margin: 1.7em 0; padding: 1em; border: 1px solid var(--cp-border); border-radius: 1em; background: var(--cp-surface); }.v4-keep-row > i { color: var(--v4-blue); font-size: 1.7em; }.v4-keep-row b { font-size: .9em; }.v4-keep-row small { display: block; color: var(--cp-text-muted); }.v4-switch { margin-left: auto; width: 2.7em; height: 1.5em; border-radius: 999px; background: var(--cp-accent); padding: .2em; }.v4-switch > i { display: block; width: 1.1em; height: 1.1em; background: #fff; border-radius: 50%; transform: translateX(1.2em); animation: v4-toggle 15s infinite; }
.v4-sync-flow { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 1.5em .5em; font-size: .8em; }.v4-sync-flow > span { display: flex; align-items: center; gap: .5em; position: relative; background: var(--cp-surface); z-index: 1; padding: .5em; }.v4-sync-flow > span:first-child i { animation: v4-sync 15s infinite; }.v4-sync-flow::before { content: ""; position: absolute; left: 4em; right: 4em; top: 50%; border-bottom: 1px dashed var(--cp-border); }.v4-sync-packet { position: absolute; left: 30%; width: .65em; height: .65em; border-radius: 50%; background: var(--v4-blue); animation: v4-packet 15s infinite; }.v4-kept-note { display: grid; grid-template-columns: auto 1fr; column-gap: .65em; padding: 1.1em; margin: 1em 0; background: color-mix(in srgb,var(--v4-green) 8%,var(--cp-surface)); border-radius: .8em; animation: v4-kept 15s infinite; }.v4-kept-note > i { grid-row: span 2; font-size: 1.8em; color: var(--v4-green); }.v4-kept-note b { font-size: .95em; }.v4-kept-note > span { font-size: .75em; color: var(--cp-text-muted); }.v4-demo-transaction .v4-demo-face,.v4-demo-splits .v4-demo-face { min-height: 36em; }
.v4-split-purchase { display: flex; gap: .8em; align-items: center; margin: 2em 0; }.v4-split-purchase small { display: block; color: var(--cp-text-muted); }.v4-split-purchase .v4-merchant { font-size: 1.6em; }.v4-split-people { display: flex; align-items: center; justify-content: space-around; padding: 1em 0 2em; }.v4-split-people > div:not(.v4-split-connector) { display: flex; align-items: center; flex-direction: column; gap: .4em; }.v4-person { display: grid; place-items: center; width: 3.5em; height: 3.5em; border: 2px solid var(--cp-accent); background: var(--cp-accent-soft); color: var(--cp-accent); border-radius: 50%; font-size: .85em; font-weight: 800; }.v4-person.is-partner { color: var(--v4-teal); border-color: var(--v4-teal); background: color-mix(in srgb,var(--v4-teal) 10%,var(--cp-surface)); }.v4-split-people b { font-size: 2.2em; letter-spacing: -.04em; }.v4-split-people small { color: var(--cp-text-muted); }.v4-split-connector { flex: 1; max-width: 6em; height: 1px; border-bottom: 1px dashed var(--cp-border); text-align: center; }.v4-split-connector > .bx { transform: translateY(-50%); font-size: 1.5em; color: var(--cp-accent); background: var(--cp-surface); padding: .5em; }.v4-split-states { position: relative; height: 6em; }.v4-split-states .v4-phase { display: flex; align-items: center; gap: .8em; background: var(--cp-accent-soft); border: 1px solid var(--cp-border); border-radius: 1em; padding: 1.1em; }.v4-split-states .v4-phase > i { color: var(--cp-accent); font-size: 1.5em; }.v4-split-states .v4-phase > i:last-child { margin-left: auto; }.v4-split-states b { font-size: .95em; }.v4-split-states small { display: block; color: var(--cp-text-muted); margin-top: .35em; }.v4-split-steps { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 2em .5em; color: var(--cp-accent); font-size: .8em; font-weight: 700; }.v4-split-steps > i { height: 2px; flex: 1; background: var(--cp-accent); transform-origin: left; animation: v4-cycle 15s infinite; }
/* Hero: real app proportions with live, theme-aware content inside both phones. */
.v4-hero-motion .v4-motion-controls { padding-top: 0; }

.v4-device { position: absolute; width: 44%; aspect-ratio: 1320/2868; container-type: inline-size; background: var(--cp-surface); border: .85cqw solid #242839; border-radius: 5cqw; overflow: hidden; box-shadow: 0 4cqw 8cqw -2cqw #16182b40; }
[data-bs-theme="dark"] .v4-device { border-color: #42475b; }
.v4-device.v4-stage-back { left: 3%; top: 8%; transform: rotate(-9deg); }
.v4-device.v4-stage-front { right: 4%; top: 3%; transform: rotate(7deg); animation: v4-device-float 15s ease-in-out infinite; }
.v4-device-status { display: flex; justify-content: space-between; align-items: center; font-size: 4.1cqw; padding: 5cqw 9cqw 3cqw; color: var(--cp-text); }
.v4-device-brand { display: flex; align-items: center; justify-content: space-between; padding: 4cqw 6cqw; }
.v4-device-brand img { width: 40%; height: auto; aspect-ratio: auto; object-fit: contain; }
.v4-device-brand > span { display: flex; gap: 3cqw; font-size: 6cqw; color: var(--cp-text); }
.v4-device-nav { display: flex; align-items: center; gap: 5cqw; font-size: 3.2cqw; padding: 4cqw 5cqw; border-block: 1px solid var(--cp-border); white-space: nowrap; color: var(--cp-text-muted); }
.v4-device-nav > span { position: relative; color: var(--cp-text); font-weight: 800; }
.v4-device-nav > span::after { content: ""; position: absolute; width: 40%; height: 2px; background: var(--cp-accent); bottom: -4cqw; left: 30%; box-shadow: 0 0 5px var(--cp-accent); }
.v4-device .v4-demo { margin: 4cqw 3cqw 0; }
.v4-device .v4-demo-face { font-size: 4.3cqw; padding: 1.1em; border-radius: 1.2em; min-height: 0; box-shadow: none; }
.v4-device .v4-demo-top { margin-bottom: 1.1em; }
.v4-device .v4-demo-top > .v4-tag { display: none; }
.v4-device .v4-demo-top > span:first-child { font-size: 1em; }
.v4-device .v4-pulse-value b { font-size: 3.2em; }
.v4-device .v4-calendar { gap: .2em; }
.v4-device .v4-calendar .v4-merchant { font-size: .75em; }
.v4-device .v4-stat-trio { gap: .35em; }
.v4-device .v4-stat-trio b { font-size: 1.1em; }
.v4-device .v4-demo-progress { display: none; }
.v4-device .v4-portfolio-value b { font-size: 2.7em; }
.v4-device .v4-demo-portfolio .v4-scene-stack { height: 18.4em; }
.v4-device .v4-bars { gap: .4em; }
.v4-device .v4-soft-note { font-size: .8em; }
.v4-device-dock { position: absolute; bottom: 2.5%; left: 4%; right: 4%; display: flex; justify-content: space-around; padding: 4cqw 2cqw; background: color-mix(in srgb,var(--cp-surface) 92%,var(--cp-text-muted)); border: 1px solid var(--cp-border); border-radius: 999px; box-shadow: 0 -.5em 1em #00000006; color: var(--cp-text); font-size: 6.5cqw; }
.v4-device-dock i:first-child { color: var(--cp-accent); }.v4-stage-front .v4-device-dock i:first-child { color: var(--cp-text); }.v4-stage-front .v4-device-dock i:nth-child(2) { color: var(--cp-accent); }
.v4-stage-signal { bottom: 4%; left: 1%; right: 8%; }
.v4-device .dark-mode-img { display: none !important; }[data-bs-theme="dark"] .v4-device .light-mode-img { display: none !important; }[data-bs-theme="dark"] .v4-device .dark-mode-img { display: block !important; }
.v4-demo-duo { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }.v4-demo-duo > div { min-width: 0; }.v4-demo-duo > div > h3 { font-size: 1.4rem; letter-spacing: -.025em; margin: 1.2rem 0 .8rem; }.v4-demo-duo > div > p { font-size: .95rem; line-height: 1.75; }
.v4-duo-section { padding: 3rem 0 5rem; }.v4-release-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; border-top: 1px solid var(--cp-border); padding-top: 2rem; margin-top: 2rem; }.v4-release-strip i { font-size: 1.7rem; color: var(--cp-accent); display: block; margin-bottom: .7rem; }.v4-release-strip strong { display: block; font-size: .95rem; }.v4-release-strip span { display: block; color: var(--cp-text-muted); font-size: .87rem; line-height: 1.7; margin-top: .5rem; }
.v4-finish-band { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; padding: 3rem; margin-top: 4rem; border-radius: 1.5rem; border: 1px solid var(--cp-border); background: linear-gradient(130deg,var(--cp-accent-soft),var(--cp-surface)); }.v4-finish-band h3 { font-size: 2rem; letter-spacing: -.035em; line-height: 1.2; }.v4-finish-band ul { list-style: none; display: grid; gap: 1.5rem; padding: 0; margin: 0; }.v4-finish-band li { display: flex; align-items: flex-start; gap: 1rem; font-size: .88rem; line-height: 1.7; color: var(--cp-text-muted); }.v4-finish-band li i { font-size: 1.5rem; color: var(--cp-accent); margin-top: .1em; }.v4-finish-band strong { color: var(--cp-text); }
/* No per-frame JavaScript. Motion stops offscreen, in background tabs, and in hidden carousel slides. */
.v4-motion *, .v4-motion *::before, .v4-motion *::after { animation-play-state: paused !important; }
.v4-motion[data-motion="running"] *, .v4-motion[data-motion="running"] *::before, .v4-motion[data-motion="running"] *::after { animation-play-state: running !important; }
.v4-motion[data-motion="still"] *, .v4-motion[data-motion="still"] *::before, .v4-motion[data-motion="still"] *::after { animation: none !important; }
.v4-motion[data-motion="still"] .v4-search-query,.v4-motion[data-motion="still"] .v4-reviewed-stamp { opacity: 0; }
@keyframes v4-phase-one { 0%,28% { opacity: 1; transform: none; } 32%,96% { opacity: 0; transform: translateY(-.6em); } 100% { opacity: 1; transform: none; } }
@keyframes v4-phase-two { 0%,30%,64%,100% { opacity: 0; transform: translateY(.7em); } 34%,60% { opacity: 1; transform: none; } }
@keyframes v4-phase-three { 0%,63%,98%,100% { opacity: 0; transform: translateY(.7em); } 68%,94% { opacity: 1; transform: none; } }
@keyframes v4-progress { 0% { transform: scaleX(0); } 97%,100% { transform: scaleX(1); } }
@keyframes v4-line { 0%,4% { stroke-dashoffset: 1; } 25%,94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes v4-calendar-pop { 0% { opacity: .3; transform: scale(.5) translateY(.5em); } 12%,94% { opacity: 1; transform: none; } 100% { opacity: .3; transform: scale(.5) translateY(.5em); } }
@keyframes v4-ping { 0%,20%,50%,100% { opacity: .3; } 27%,43% { opacity: 1; } }
@keyframes v4-comparison { 0%,33% { transform: scaleX(.08); } 45%,100% { transform: scaleX(1); } }
@keyframes v4-check { 0%,24%,98%,100% { background: transparent; color: transparent; } 30%,94% { background: var(--v4-green); color: var(--cp-surface); border-color: var(--v4-green); } }
@keyframes v4-checkmark { 0%,24%,98%,100% { opacity: 0; } 30%,94% { opacity: 1; } }
@keyframes v4-complete { 0%,28%,98%,100% { opacity: 0; transform: translateY(.5em); } 35%,94% { opacity: 1; transform: none; } }
@keyframes v4-snooze { 0%,50%,98%,100% { opacity: 1; } 60%,94% { opacity: .5; } }
@keyframes v4-swipe { 0%,25%,97%,100% { transform: none; opacity: 1; } 32% { transform: translateX(1em) rotate(2deg); opacity: 1; } 43%,85% { transform: translateX(130%) rotate(16deg); opacity: 0; } 90% { transform: translateY(1em); opacity: 0; } }
@keyframes v4-stamp { 0%,26%,90%,100% { opacity: 0; } 31%,85% { opacity: 1; } }
@keyframes v4-gesture { 0%,22%,50%,100% { transform: none; } 33%,40% { transform: translateX(.7em); } }
@keyframes v4-search-placeholder { 0%,12%,95%,100% { opacity: 1; } 17%,90% { opacity: 0; } }
@keyframes v4-query { 0%,12%,95%,100% { opacity: 0; clip-path: inset(0 100% 0 0); } 17% { opacity: 1; clip-path: inset(0 100% 0 0); } 27%,90% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes v4-filter { 0%,27%,95%,100% { opacity: 1; transform: none; } 34%,90% { opacity: 0; transform: translateY(.5em); } }
@keyframes v4-sheet { 0%,42%,98%,100% { transform: translateY(120%); } 50%,90% { transform: none; } }
@keyframes v4-segment { 0%,28%,100% { transform: translateX(0); } 34%,60% { transform: translateX(100%); } 68%,94% { transform: translateX(200%); } }
@keyframes v4-grow { 0% { transform: scaleY(.05); } 13%,95% { transform: scaleY(1); } 100% { transform: scaleY(.05); } }
@keyframes v4-driver { 0%,64% { transform: scaleX(.05); } 76%,100% { transform: scaleX(1); } }
@keyframes v4-income { 0%,3% { transform: scaleY(.05); } 25%,92% { transform: scaleY(1); } 100% { transform: scaleY(.05); } }
@keyframes v4-payout { 0%,30% { opacity: 0; transform: translateY(.8em); } 40%,94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(.8em); } }
@keyframes v4-cycle { 0%,6% { transform: scaleX(.05); } 40%,93% { transform: scaleX(1); } 100% { transform: scaleX(.05); } }
@keyframes v4-toggle { 0%,13%,98%,100% { transform: translateX(0); } 20%,93% { transform: translateX(1.2em); } }
@keyframes v4-sync { 0%,24% { transform: rotate(0); } 50%,100% { transform: rotate(720deg); } }
@keyframes v4-packet { 0%,25%,65%,100% { opacity: 0; left: 30%; } 30% { opacity: 1; left: 30%; } 60% { opacity: 1; left: 67%; } }
@keyframes v4-kept { 0%,52%,100% { opacity: .25; transform: translateY(.3em); } 60%,94% { opacity: 1; transform: none; } }
@keyframes v4-device-float { 0%,100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-1.3%); } }
@media (max-width: 991.98px) { .v4-home .v4-hero-motion { max-width: 32rem; margin: 0 auto; width: 100%; }.v4-story { gap: 2rem; }.v4-motion-controls { font-size: .64rem; }.v4-finish-band { padding: 2rem; gap: 2rem; } }
@media (max-width: 767.98px) { .v4-demo-duo { grid-template-columns: 1fr; gap: 2rem; }.v4-motion { width: 100%; max-width: 34rem; margin-inline: auto; }.v4-release-strip { grid-template-columns: 1fr; gap: 1.3rem; }.v4-release-strip > div { display: grid; grid-template-columns: 2rem 1fr; gap: .3rem 1rem; }.v4-release-strip i { grid-row: span 2; }.v4-release-strip span { margin: 0; }.v4-finish-band { grid-template-columns: 1fr; padding: 1.7rem; margin-top: 2rem; }.v4-duo-section { padding: 2rem 0 3rem; }.v4-demo-face { font-size: 3.2cqw; padding: 1.5em; }.v4-transaction-head { margin: -1.5em -1.5em 1.8em; }.v4-demo-progress { left: 1.5em; right: 1.5em; }.v4-motion-controls { font-size: .66rem; } }
@media (prefers-reduced-motion: reduce) { .v4-motion[data-motion="still"] *, .v4-motion[data-motion="still"] *::before, .v4-motion[data-motion="still"] *::after { animation: none !important; } }