/* Home page showcase (everything below the Enriched Investments section). Scoped to .hs-* and driven by the site's light/dark tokens. */
.hs {
    --cp-bg: var(--bs-body-bg, var(--si-body-bg));
    --cp-surface: var(--bs-body-bg, var(--si-body-bg));
    --cp-border: var(--bs-border-color, var(--si-border-color));
    --cp-text: var(--bs-heading-color, var(--si-heading-color));
    --cp-text-muted: var(--bs-body-color, var(--si-body-color));
    --cp-accent: var(--bs-primary, var(--si-primary));
    --cp-accent-soft: color-mix(in srgb, var(--cp-accent) 9%, var(--cp-bg));
    --hs-shadow: 0 30px 60px -24px rgba(27, 19, 64, .45);
    --hs-bezel: #161a2c;
    color: var(--cp-text);
    font-family: var(--si-font-sans-serif, "Manrope", system-ui, sans-serif);
}
.hs p { color: var(--cp-text-muted); }
.hs h2, .hs h3 { color: var(--cp-text); }
.hs a { text-decoration: none; }
.hs-section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.hs-section + .hs-section { padding-top: 0; }
.hs-eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .9rem; color: var(--cp-accent); font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.hs-h2 { margin: 0 0 .75rem; font-size: clamp(1.85rem, 3.4vw, 2.85rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.08; }
.hs-lead { max-width: 36rem; margin: 0; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; }
.hs-center { text-align: center; }
.hs-center .hs-lead { margin-inline: auto; }
.hs-head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.hs-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.25rem; color: var(--cp-accent); font-weight: 700; }
.hs-link i { transition: transform .2s; }
.hs-link:hover i { transform: translateX(3px); }
.hs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.hs-split.is-flipped > :first-child { order: 2; }
.hs-points { display: grid; gap: 1rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.hs-points li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .9rem; align-items: start; }
.hs-points i { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 1.3rem; }
.hs-points strong { display: block; color: var(--cp-text); font-size: .98rem; }
.hs-points span { display: block; color: var(--cp-text-muted); font-size: .92rem; line-height: 1.45; }
.hs-stores { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hs-stores a { display: inline-flex; align-items: center; padding: .55rem .9rem; border-radius: .7rem; background: #0b0f19; border: 1px solid rgba(255, 255, 255, .12); }
.hs-stores img { display: block; height: 1.9rem; width: auto; }
.hs-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.hs-chips li { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border: 1px solid var(--cp-border); border-radius: 999px; background: var(--cp-surface); color: var(--cp-text); font-size: .82rem; font-weight: 700; }
.hs-chips li i { color: var(--cp-accent); font-size: 1.05rem; }

/* Phone frame: real app screenshots, theme-matched. --w sets the width; bezel and radius scale from it. */
.hs-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; }
.hs-phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--w) * .115); }
.hs-phone::after { content: ""; position: absolute; top: calc(var(--w) * .035); left: 50%; width: calc(var(--w) * .3); height: calc(var(--w) * .07); transform: translateX(-50%); border-radius: 999px; background: #05070d; }
.hs-browser { position: relative; border: 1px solid var(--cp-border); border-radius: 1.1rem; background: var(--cp-surface); box-shadow: var(--hs-shadow); overflow: hidden; }
.hs-browser::before { content: ""; display: block; height: 2rem; border-bottom: 1px solid var(--cp-border); background: radial-gradient(circle at .9rem 50%, #ef4444 .28rem, transparent .34rem), radial-gradient(circle at 1.65rem 50%, #f59e0b .28rem, transparent .34rem), radial-gradient(circle at 2.4rem 50%, #22c55e .28rem, transparent .34rem), color-mix(in srgb, var(--cp-text) 4%, var(--cp-surface)); }
.hs-browser img { width: 100%; height: auto; vertical-align: top; }
.hs-browser .chipin-screenshot-lightbox-trigger { border-radius: 0; }

/* Overlays shared by every stage */
.hs-stage { container-type: inline-size; position: relative; isolation: isolate; }
.hs-callout { position: absolute; z-index: 4; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2cqw; padding: 2.2cqw 2.6cqw; border: 1px solid var(--cp-border); border-radius: 2.6cqw; 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 20px 44px -18px rgba(27, 19, 64, .5); }
.hs-callout > i { display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 3.3cqw; }
.hs-callout.tone-amber > i { background: color-mix(in srgb, #f59e0b 18%, var(--cp-surface)); color: #b45309; }
.hs-callout.tone-success > i { background: color-mix(in srgb, #22c55e 18%, var(--cp-surface)); color: #15803d; }
.hs-callout.tone-danger > i { background: color-mix(in srgb, #ef4444 16%, var(--cp-surface)); color: #dc2626; }
.hs-callout small { display: block; margin-bottom: .5cqw; color: var(--cp-text-muted); font-size: clamp(.5rem, 1.6cqw, .64rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hs-callout strong { display: block; color: var(--cp-text); font-size: clamp(.68rem, 2.3cqw, .92rem); line-height: 1.25; }
.hs-callout span { display: block; margin-top: .4cqw; color: var(--cp-text-muted); font-size: clamp(.58rem, 1.8cqw, .76rem); }
.hs-pill { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 2.2cqw; 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(.6rem, 2.1cqw, .82rem); font-weight: 700; line-height: 1; white-space: nowrap; }
.hs-pill i { color: var(--cp-accent); font-size: 1.3em; }
.hs-pill.is-accent { border-color: transparent; background: var(--cp-accent); color: #fff; }
.hs-pill.is-accent i { color: #fff; }
.hs-float-a { animation: hs-float-a 8s ease-in-out infinite; }
.hs-float-b { animation: hs-float-b 9.5s ease-in-out 1.2s infinite; }
.hs-float-c { animation: hs-float-c 7s ease-in-out .6s infinite; }
@keyframes hs-float-a { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-8px); } }
@keyframes hs-float-b { 0%, 100% { transform: rotate(1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-7px); } }
@keyframes hs-float-c { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 1. Ecosystem */
.hs-eco { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.hs-eco-card { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 1.6rem 1.5rem 1.5rem; border: 1px solid var(--cp-border); border-radius: 1.4rem; background: linear-gradient(180deg, color-mix(in srgb, var(--cp-accent) 7%, var(--cp-surface)), var(--cp-surface) 55%); transition: border-color .2s, transform .2s; }
.hs-eco-card:hover { border-color: var(--cp-accent); transform: translateY(-3px); }
.hs-eco-card > i { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-bottom: 1.1rem; border-radius: 1rem; background: var(--cp-accent); color: #fff; font-size: 1.5rem; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--cp-accent) 70%, transparent); }
.hs-eco-card h3 { margin: 0 0 .35rem; font-size: 1.15rem; font-weight: 700; }
.hs-eco-card p { margin: 0 0 1rem; font-size: .93rem; line-height: 1.5; }
.hs-eco-card .hs-link { margin-top: auto; font-size: .9rem; }
.hs-eco-card small { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .6rem; color: var(--cp-text-muted); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* Panel stages: rounded, glowing, dotted, clip their contents */
.hs-panel { aspect-ratio: 10 / 9; max-width: 38rem; width: 100%; border-radius: 2rem; border: 1px solid var(--cp-border); overflow: hidden; background: radial-gradient(110% 85% at 70% 15%, color-mix(in srgb, var(--cp-accent) 30%, var(--cp-surface)), color-mix(in srgb, var(--cp-accent) 6%, var(--cp-surface)) 62%, var(--cp-surface)); }
.hs-panel::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); }
.hs-panel .hs-phone { position: absolute; }
/* Panel layouts: one, two, or three phones */
.hs-solo .hs-phone-main { --w: 46cqw; left: 50%; top: 8%; transform: translateX(-50%); z-index: 2; }
.hs-duo .hs-phone-front { --w: 40cqw; right: 6cqw; top: 5%; z-index: 3; }
.hs-duo .hs-phone-back { --w: 36cqw; left: 8cqw; top: 30%; z-index: 1; }
.hs-trio .hs-phone-main { --w: 40cqw; left: 30cqw; top: 9%; z-index: 3; }
.hs-trio .hs-phone-left { --w: 30cqw; left: 3cqw; top: 22%; z-index: 2; opacity: .96; }
.hs-trio .hs-phone-right { --w: 30cqw; right: 3cqw; top: 22%; z-index: 2; opacity: .96; }

/* 2. Mobile showcase */
.hs-mobile-stage { justify-self: end; }
.hs-mobile-stage .hs-callout-a { left: 4%; bottom: 8%; width: 46%; }
.hs-mobile-stage .hs-callout-b { right: 3%; bottom: 20%; width: 42%; }
.hs-mobile-stage .hs-pill-1 { top: 5%; left: 4%; }
.hs-mobile-stage .hs-pill-2 { top: 5%; right: 4%; }
.hs-mobile-stage .hs-pill-3 { top: 14%; right: 12%; }

/* 3. Bento */
.hs-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.hs-tile { position: relative; display: flex; flex-direction: column; min-height: 25rem; padding: 1.6rem 1.6rem 0; border: 1px solid var(--cp-border); border-radius: 1.6rem; background: linear-gradient(180deg, color-mix(in srgb, var(--cp-accent) 5%, var(--cp-surface)), var(--cp-surface)); overflow: hidden; transition: border-color .2s, transform .25s; }
.hs-tile:hover { border-color: var(--cp-accent); transform: translateY(-3px); }
.hs-tile.is-wide { grid-column: span 2; }
.hs-tile-tag { position: absolute; top: 1.1rem; right: 1.1rem; padding: .3rem .65rem; border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hs-tile h3 { margin: 0 0 .4rem; padding-right: 5.5rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.hs-tile p { margin: 0; font-size: .92rem; line-height: 1.5; }
.hs-tile-shot { container-type: inline-size; position: relative; flex: 1; margin-top: 1.4rem; min-height: 14rem; }
.hs-tile-shot .hs-phone { --w: min(16rem, 74%); position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.hs-tile.is-wide .hs-tile-shot .hs-phone { --w: 15rem; left: auto; right: 6%; transform: none; }
.hs-tile.is-wide .hs-tile-shot .hs-phone.is-second { right: 38%; top: 3rem; opacity: .95; z-index: 0; }
.hs-tile-shot .hs-pill { position: absolute; z-index: 5; gap: .4rem; padding: .5rem .8rem; font-size: .8rem; }

/* 3b. Reports */
.hs-points.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.hs-moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1.6rem; }
.hs-moments > div { padding: .85rem .95rem; border: 1px solid var(--cp-border); border-radius: 1rem; background: linear-gradient(180deg, color-mix(in srgb, var(--cp-accent) 6%, var(--cp-surface)), var(--cp-surface)); }
.hs-moments small { display: block; margin-bottom: .3rem; color: var(--cp-accent); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hs-moments span { display: block; color: var(--cp-text-muted); font-size: .84rem; line-height: 1.4; }
.hs-reports-stage { justify-self: end; }
.hs-reports-stage .hs-phone-back { top: 42%; }
.hs-web-card { position: absolute; z-index: 2; left: 4cqw; top: 5cqw; width: 44cqw; padding: 2.2cqw 2.4cqw 1.6cqw; border: 1px solid var(--cp-border); border-radius: 2.4cqw; 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 20px 44px -18px rgba(27, 19, 64, .5); color: var(--cp-text); }
.hs-web-card small { display: flex; align-items: center; gap: .9cqw; margin-bottom: 1.4cqw; color: var(--cp-text-muted); font-size: clamp(.5rem, 1.6cqw, .64rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hs-web-card small i { color: var(--cp-accent); font-size: 1.4em; }
.hs-web-filters { display: flex; flex-wrap: wrap; gap: .9cqw; margin-bottom: 1.6cqw; }
.hs-web-filters span { padding: .8cqw 1.6cqw; border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: clamp(.5rem, 1.6cqw, .66rem); font-weight: 700; }
.hs-web-filters span:first-child { background: var(--cp-accent); color: #fff; }
.hs-sankey { display: block; width: 100%; height: auto; color: var(--cp-text); }
.hs-reports-stage .hs-pill-1 { right: 2cqw; top: 42cqw; }
.hs-reports-stage .hs-pill-2 { left: 3cqw; bottom: 4cqw; }
.hs-reports-stage .hs-callout-a { right: 3cqw; bottom: 6cqw; width: 44cqw; left: auto; }

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

/* 5. Services */
.hs-services { border: 1px solid var(--cp-border); border-radius: 2rem; padding: clamp(1.75rem, 4vw, 3.5rem); background: linear-gradient(135deg, color-mix(in srgb, var(--cp-accent) 9%, var(--cp-surface)), color-mix(in srgb, #06b6d4 6%, var(--cp-surface))); }
.hs-mail-stage { aspect-ratio: 10 / 8.6; max-width: 34rem; width: 100%; justify-self: end; }
.hs-mail { position: absolute; width: 50%; border: 1px solid var(--cp-border); border-radius: 1.6cqw; background: var(--cp-surface); box-shadow: var(--hs-shadow); overflow: hidden; }
.hs-mail::before { content: ""; display: block; height: 4.4cqw; border-bottom: 1px solid var(--cp-border); background: color-mix(in srgb, var(--cp-text) 4%, var(--cp-surface)); }
.hs-mail img { display: block; width: 100%; height: auto; }
.hs-mail-1 { left: -3%; top: 12%; transform: rotate(-7deg); z-index: 1; }
.hs-mail-2 { left: 25%; top: 0; z-index: 2; }
.hs-mail-3 { right: -3%; top: 14%; transform: rotate(7deg); z-index: 1; }
.hs-mail-stage .hs-callout-a { left: 4%; bottom: 3%; width: 60%; }
.hs-mail-stage .hs-pill-1 { right: 2%; bottom: 16%; }
.hs-mail-stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; z-index: 3; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cp-accent) 9%, var(--cp-surface)) 85%); }
.hs-services .hs-chips li { background: color-mix(in srgb, var(--cp-surface) 70%, transparent); }

/* 6. Intelligence */
.hs-ai-stage { aspect-ratio: 10 / 8; max-width: 38rem; width: 100%; }
.hs-ai-stage .hs-browser { position: absolute; left: 0; top: 0; width: 84%; z-index: 1; }
.hs-ai-stage .hs-phone { --w: 30cqw; position: absolute; right: 0; bottom: 0; z-index: 3; }
.hs-ai-stage .hs-pill-1 { left: 3%; bottom: 22%; }
.hs-ai-stage .hs-pill-2 { left: 9%; bottom: 12%; }
.hs-ai-stage .hs-pill-3 { left: 2%; bottom: 2%; }

/* 7. Trust */
.hs-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 1.5rem; border: 1px solid var(--cp-border); border-radius: 1.5rem; background: var(--cp-surface); }
.hs-trust > div { display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; align-items: center; }
.hs-trust i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .75rem; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 1.25rem; }
.hs-trust strong { display: block; color: var(--cp-text); font-size: .9rem; }
.hs-trust span { display: block; color: var(--cp-text-muted); font-size: .8rem; }
.hs-trust-link { grid-column: 1 / -1; justify-self: end; margin-top: -.25rem; font-size: .88rem; }

/* 8. CTA */
.hs-cta { position: relative; overflow: hidden; padding: clamp(2.5rem, 5vw, 4rem); border-radius: 2rem; color: #f8f9ff; text-align: center; background: linear-gradient(135deg, #1f2a44, var(--chipin-brand-primary, #5A45E6) 52%, var(--chipin-brand-accent, #7C6AF2)); }
.hs-cta::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.5px); background-size: 22px 22px; mask-image: radial-gradient(60% 80% at 50% 50%, #000, transparent); -webkit-mask-image: radial-gradient(60% 80% at 50% 50%, #000, transparent); }
.hs-cta > * { position: relative; }
.hs-cta h2 { margin: 0 0 .6rem; color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 700; letter-spacing: -.04em; }
.hs-cta p { max-width: 34rem; margin: 0 auto 1.5rem; color: rgba(255, 255, 255, .82); font-size: 1.05rem; }
.hs-cta .hs-stores { justify-content: center; margin-top: 0; }
.hs-cta .hs-stores a { background: #fff; border-color: transparent; }
.hs-cta .btn-outline-light { border-radius: .7rem; }
.hs-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; }


/* ===== Shared reel container (controller: js/feature-reel.js). Cards are page-specific. ===== */
.fs-reel { position: relative; margin-inline: calc(-1 * var(--bs-gutter-x, .75rem)); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fs-reel-track { display: flex; gap: 1rem; padding: 1.25rem 4vw 1.5rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-x pan-y; }
.fs-reel-track::-webkit-scrollbar { display: none; }
.fs-reel-track:active { cursor: grabbing; }

/* ===== Home feature reel: looping mini-demos (hr-*) ===== */
.hr-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1rem, 2vw, 1.5rem); }
.hr-section .hs-head { margin-bottom: clamp(.75rem, 2vw, 1.25rem); }
.hr-reel { --fs-card: 21.5rem; }
.hr-reel .fs-reel-track { padding: 1.5rem 4vw 1.75rem; }
.hr-card { flex: 0 0 var(--fs-card); position: relative; display: flex; flex-direction: column; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--cp-border); border-radius: 1.4rem; background: linear-gradient(180deg, color-mix(in srgb, var(--cp-accent) 6%, var(--cp-surface)), var(--cp-surface) 60%); color: var(--cp-text); transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .35s; will-change: transform; }
.hr-card:hover { transform: scale(1.04); border-color: var(--cp-accent); box-shadow: 0 24px 48px -22px color-mix(in srgb, var(--cp-accent) 55%, transparent); z-index: 2; }
.hr-card > small { display: flex; align-items: center; gap: .4rem; color: var(--cp-accent); font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hr-card > small i { font-size: 1rem; }
.hr-card > strong { display: block; margin: .3rem 0 .75rem; color: var(--cp-text); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.hr-stage { --t: 8s; position: relative; height: 12rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--cp-border) 70%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--cp-text) 3%, var(--cp-surface)); overflow: hidden; font-size: .74rem; line-height: 1.3; }
.hr-stage, .hr-stage * { animation-duration: var(--t); animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: var(--d, 0s); animation-fill-mode: both; }
.hr-stage .tone-success { color: #16a34a !important; }
.hr-stage .tone-amber { color: #b45309 !important; }

/* primitives */
.hr-label { display: block; margin-bottom: .45rem; color: var(--cp-text-muted); font-size: .66rem; font-weight: 700; letter-spacing: .04em; }
.hr-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .6rem; border: 1px solid var(--cp-border); border-radius: 999px; background: var(--cp-surface); color: var(--cp-text); font-size: .68rem; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(27, 19, 64, .4); }
.hr-chip i { color: var(--cp-accent); font-size: .95rem; }
.hr-toast { position: absolute; left: .7rem; right: .7rem; bottom: .7rem; z-index: 3; display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border: 1px solid var(--cp-border); border-radius: .85rem; background: var(--cp-surface); box-shadow: 0 16px 32px -14px rgba(27, 19, 64, .5); }
.hr-toast > i { flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 1rem; }
.hr-toast.tone-success > i { background: color-mix(in srgb, #22c55e 18%, var(--cp-surface)); color: #15803d; }
.hr-toast.tone-amber > i { background: color-mix(in srgb, #f59e0b 18%, var(--cp-surface)); color: #b45309; }
.hr-toast.tone-danger > i { background: color-mix(in srgb, #ef4444 16%, var(--cp-surface)); color: #dc2626; }
.hr-toast b { display: block; color: var(--cp-text); font-size: .74rem; font-weight: 700; }
.hr-toast span { display: block; color: var(--cp-text-muted); font-size: .64rem; }
.hr-row { position: relative; display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; border: 1px solid var(--cp-border); border-radius: .75rem; background: var(--cp-surface); }
.hr-row + .hr-row { margin-top: .4rem; }
.hr-row > i { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .55rem; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .95rem; }
.hr-row > div { flex: 1; min-width: 0; }
.hr-row b { display: block; color: var(--cp-text); font-size: .74rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-row span { display: block; color: var(--cp-text-muted); font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-row > strong { flex: none; color: var(--cp-text); font-size: .78rem; font-weight: 800; }
.hr-avatar { position: relative; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 2px solid var(--cp-surface); border-radius: 50%; color: #fff; font-size: .7rem; font-weight: 800; }
.hr-avatar.is-a { background: linear-gradient(135deg, #7C6AF2, #4B35D4); }
.hr-avatar.is-b { background: linear-gradient(135deg, #34d399, #0d9488); }
.hr-avatar.is-c { background: var(--cp-accent); }
.hr-badge { position: absolute; top: -.3rem; right: -.3rem; z-index: 2; display: grid; place-items: center; min-width: 1rem; height: 1rem; padding: 0 .25rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: .58rem; font-style: normal; font-weight: 800; }
.hr-btn { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; padding: .45rem .9rem; border-radius: .6rem; background: var(--cp-accent); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .04em; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cp-accent) 70%, transparent); }
.hr-swap { display: inline-grid; }
.hr-swap > span { grid-area: 1 / 1; }
.hr-swap > span:first-child { opacity: 0; animation-name: hr-swap-out; }
.hr-swap > span:last-child { animation-name: hr-swap-in; }
.hr-swap.at-36 > span:first-child { animation-name: hr-swap-out-36; }
.hr-swap.at-36 > span:last-child { animation-name: hr-swap-in-36; }
.hr-swap.at-46 > span:first-child { animation-name: hr-swap-out-46; }
.hr-swap.at-46 > span:last-child { animation-name: hr-swap-in-46; }
.hr-swap.is-round > span:first-child { animation-name: hr-swap-out-round; }
.hr-swap.is-round > span:last-child { animation-name: hr-swap-in-round; }
.hr-pop-b { animation-name: hr-pop-b; }
.hr-pop-c { animation-name: hr-pop-c; }
@keyframes hr-swap-out { 0%, 40% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes hr-swap-in { 0%, 40% { opacity: 0; } 44%, 100% { opacity: 1; } }
@keyframes hr-swap-out-36 { 0%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes hr-swap-in-36 { 0%, 36% { opacity: 0; } 40%, 100% { opacity: 1; } }
@keyframes hr-swap-out-46 { 0%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes hr-swap-in-46 { 0%, 46% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes hr-swap-out-round { 0%, 28% { opacity: 1; } 32%, 70% { opacity: 0; } 74%, 100% { opacity: 1; } }
@keyframes hr-swap-in-round { 0%, 28% { opacity: 0; } 32%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes hr-pop-b { 0%, 56% { opacity: 0; transform: translateY(10px) scale(.96); } 62%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes hr-pop-c { 0%, 64% { opacity: 0; transform: translateY(10px) scale(.96); } 70%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes hr-fade-30 { 0%, 28% { opacity: 0; transform: translateY(6px); } 34%, 100% { opacity: 1; transform: none; } }
@keyframes hr-fade-52 { 0%, 52% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes hr-badge-pop { 0%, 56% { transform: scale(0); } 61% { transform: scale(1.2); } 64%, 100% { transform: scale(1); } }
@keyframes hr-badge-pop-42 { 0%, 40% { transform: scale(0); } 45% { transform: scale(1.2); } 48%, 100% { transform: scale(1); } }

/* 1. Receipt scan */
.hr-paper { position: absolute; left: 50%; top: .7rem; width: 7.4rem; height: 9.6rem; padding: .9rem .8rem; transform: translateX(-50%) rotate(-4deg); border: 1px solid var(--cp-border); border-radius: .5rem .5rem 0 0; background: var(--cp-surface); box-shadow: var(--hs-shadow); overflow: hidden; }
.hr-paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 8px; background: linear-gradient(135deg, var(--cp-surface) 25%, transparent 25%) 0 0 / 12px 12px, linear-gradient(225deg, var(--cp-surface) 25%, transparent 25%) 0 0 / 12px 12px; }
.hr-paper b, .hr-paper i { display: block; height: .4rem; margin-bottom: .48rem; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 16%, transparent); }
.hr-paper b { width: 62%; background: color-mix(in srgb, var(--cp-text) 32%, transparent); }
.hr-paper b.is-short { width: 38%; }
.hr-paper i.is-total { width: 46%; margin-top: .7rem; background: var(--cp-accent); transform-origin: left; animation-name: hr-total; }
.hr-scanline { position: absolute; left: 0; right: 0; top: 92%; height: 3px; background: var(--cp-accent); box-shadow: 0 0 16px 4px color-mix(in srgb, var(--cp-accent) 60%, transparent); opacity: 0; animation-name: hr-scanline; }
.hr-scan-chip { left: .7rem; top: .7rem; opacity: 0; animation-name: hr-chip-scan; }
@keyframes hr-scanline { 0% { top: 6%; opacity: 0; } 5% { opacity: 1; } 40% { top: 92%; opacity: 1; } 45%, 100% { top: 92%; opacity: 0; } }
@keyframes hr-total { 0%, 44% { background: color-mix(in srgb, var(--cp-text) 16%, transparent); transform: scaleX(.6); } 52%, 100% { background: var(--cp-accent); transform: scaleX(1); } }
@keyframes hr-chip-scan { 0%, 3% { opacity: 0; transform: translateY(-6px); } 8%, 40% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: translateY(-6px); } }

/* 2. Add a card */
.hr-slot { position: absolute; left: 50%; top: .8rem; width: 13.6rem; height: 8.8rem; transform: translateX(-50%); display: grid; place-content: center; justify-items: center; gap: .2rem; border: 2px dashed color-mix(in srgb, var(--cp-accent) 45%, var(--cp-border)); border-radius: 1rem; color: var(--cp-text-muted); font-size: .68rem; font-weight: 700; }
.hr-slot i { font-size: 1.2rem; color: var(--cp-accent); }
.hr-cc { position: absolute; left: 50%; top: 1.5rem; width: 11.8rem; height: 7.2rem; padding: .8rem .9rem; transform: translateX(-50%) rotate(-3deg); border-radius: .8rem; background: linear-gradient(135deg, #1f2a44, var(--chipin-brand-primary, #5A45E6) 55%, var(--chipin-brand-accent, #7C6AF2)); color: #fff; box-shadow: 0 22px 40px -18px rgba(27, 19, 64, .7); overflow: hidden; animation-name: hr-cc-in; }
.hr-cc-chip { display: block; width: 1.7rem; height: 1.2rem; border-radius: .25rem; background: linear-gradient(135deg, #f5d27a, #c9992e); }
.hr-cc-num { position: absolute; left: .9rem; right: .9rem; top: 3.3rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.hr-cc-foot { position: absolute; left: .9rem; right: .9rem; bottom: .7rem; display: flex; justify-content: space-between; font-size: .58rem; font-weight: 800; letter-spacing: .12em; opacity: .85; }
.hr-cc-shine { position: absolute; inset: -20% -40%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%); transform: translateX(130%); animation-name: hr-shine; }
.hr-cc-check { position: absolute; left: calc(50% + 4.3rem); top: .9rem; z-index: 2; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #22c55e; color: #fff; font-size: 1.1rem; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4); animation-name: hr-check-pop; }
@keyframes hr-cc-in { 0%, 4% { transform: translate(-50%, 140%) rotate(8deg); } 30%, 100% { transform: translate(-50%, 0) rotate(-3deg); } }
@keyframes hr-shine { 0%, 32% { transform: translateX(-130%); } 52%, 100% { transform: translateX(130%); } }
@keyframes hr-check-pop { 0%, 54% { transform: scale(0); } 60% { transform: scale(1.15); } 64%, 100% { transform: scale(1); } }

/* 3. Safe to spend */
@property --hr-k { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --hh-n { syntax: '<integer>'; inherits: false; initial-value: 0; } /* home hero slide 1 count-up (Home.razor, hh-*) */
@property --hr-r { syntax: '<integer>'; inherits: false; initial-value: 0; }
@counter-style hr-pad3 { system: extends decimal; pad: 3 "0"; }
.hr-safe .hr-label { margin-bottom: .15rem; }
.hr-safe-num { --hr-k: 3; --hr-r: 680; counter-reset: hrk var(--hr-k) hrr var(--hr-r); color: var(--cp-text); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; animation-name: hr-count; }
.hr-safe-num::before { content: "$" counter(hrk) "," counter(hrr, hr-pad3); }
.hr-safe-bar { position: relative; height: .85rem; margin: .7rem 0 .6rem; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 10%, transparent); overflow: hidden; }
.hr-safe-bills { position: absolute; left: 0; top: 0; bottom: 0; width: 39.4%; border-radius: 999px; background: #f59e0b; animation-name: hr-bills; }
.hr-safe-left { position: absolute; left: 39.4%; top: 0; bottom: 0; width: 60.6%; border-radius: 0 999px 999px 0; background: #22c55e; animation-name: hr-left; }
.hr-legend { display: flex; flex-wrap: wrap; gap: .3rem .8rem; color: var(--cp-text-muted); font-size: .62rem; font-weight: 600; }
.hr-legend b { display: inline-block; width: .55rem; height: .55rem; margin-right: .3rem; border-radius: 50%; background: color-mix(in srgb, var(--cp-text) 20%, transparent); vertical-align: -1px; }
.hr-legend b.tone-amber { background: #f59e0b; }
.hr-legend b.tone-success { background: #22c55e; }
.hr-safe .hr-chip { right: .7rem; top: .6rem; }
@keyframes hr-bills { 0%, 8% { width: 0; } 38%, 100% { width: 39.4%; } }
@keyframes hr-left { 0%, 38% { width: 0; } 70%, 100% { width: 60.6%; } }
@keyframes hr-count { 0%, 36% { --hr-k: 0; --hr-r: 0; } 72%, 100% { --hr-k: 3; --hr-r: 680; } }

/* 4. Card spend alerts */
.hr-spend-bar { position: relative; height: .8rem; margin: 1rem 0 .35rem; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 10%, transparent); }
.hr-spend-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 90%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #f59e0b 70%, #ef4444); animation-name: hr-spend-fill; }
.hr-pip { position: absolute; top: 50%; width: .9rem; height: .9rem; transform: translate(-50%, -50%); border: 2px solid var(--cp-surface); border-radius: 50%; background: color-mix(in srgb, var(--cp-text) 25%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cp-text) 12%, transparent); }
.hr-pip-75 { left: 75%; background: #f59e0b; box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 30%, transparent); animation-name: hr-pip-75; }
.hr-pip-90 { left: 90%; background: #ef4444; box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 30%, transparent); animation-name: hr-pip-90; }
.hr-pip-100 { left: 100%; }
.hr-marks { position: relative; height: 1rem; color: var(--cp-text-muted); font-size: .58rem; font-weight: 700; }
.hr-marks span { position: absolute; transform: translateX(-50%); }
.hr-spend-t1 { opacity: 0; animation-name: hr-spend-t1; }
.hr-spend-t2 { animation-name: hr-spend-t2; }
@keyframes hr-spend-fill { 0%, 8% { width: 0; } 40%, 62% { width: 75%; } 78%, 100% { width: 90%; } }
@keyframes hr-pip-75 { 0%, 38% { background: color-mix(in srgb, var(--cp-text) 25%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cp-text) 12%, transparent); } 42%, 100% { background: #f59e0b; box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 30%, transparent); } }
@keyframes hr-pip-90 { 0%, 76% { background: color-mix(in srgb, var(--cp-text) 25%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cp-text) 12%, transparent); } 80%, 100% { background: #ef4444; box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 30%, transparent); } }
@keyframes hr-spend-t1 { 0%, 40% { opacity: 0; transform: translateY(10px) scale(.96); } 46%, 72% { opacity: 1; transform: none; } 76%, 100% { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes hr-spend-t2 { 0%, 78% { opacity: 0; transform: translateY(10px) scale(.96); } 84%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px) scale(.96); } }

/* 5. Investment alert */
.hr-chart { display: block; width: 100%; height: 8.4rem; margin-top: 1.4rem; }
.hr-grid { stroke: color-mix(in srgb, var(--cp-text) 10%, transparent); stroke-width: 1; }
.hr-target { stroke: var(--cp-accent); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .7; }
.hr-target-label { fill: var(--cp-accent); font-size: 9px; font-weight: 800; }
.hr-area { fill: var(--cp-accent); opacity: .18; animation-name: hr-area; }
.hr-line { fill: none; stroke: var(--cp-accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation-name: hr-line; }
.hr-dot { fill: var(--cp-accent); stroke: var(--cp-surface); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation-name: hr-dot; }
.hr-ring { fill: none; stroke: var(--cp-accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation-name: hr-ring; }
.hr-ticker { left: .7rem; top: .6rem; }
@keyframes hr-line { 0%, 6% { stroke-dashoffset: 1; } 56%, 100% { stroke-dashoffset: 0; } }
@keyframes hr-area { 0%, 40% { opacity: 0; } 62%, 100% { opacity: .18; } }
@keyframes hr-dot { 0%, 50% { transform: scale(0); } 56% { transform: scale(1.4); } 60%, 100% { transform: scale(1); } }
@keyframes hr-ring { 0%, 52% { opacity: 0; transform: scale(.6); } 58% { opacity: .8; transform: scale(1); } 72%, 100% { opacity: 0; transform: scale(2.6); } }

/* 6. Split */
.hr-people { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; margin-top: .75rem; }
.hr-person { display: grid; justify-items: center; gap: .1rem; }
.hr-person b { color: var(--cp-text); font-size: .74rem; font-weight: 800; }
.hr-person small { color: var(--cp-text-muted); font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hr-slider { position: relative; height: .7rem; margin-top: -.9rem; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 10%, transparent); }
.hr-slider-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 999px; background: linear-gradient(90deg, #7C6AF2, #5A45E6); animation-name: hr-slider-fill; }
.hr-knob { position: absolute; top: 50%; left: 50%; width: 1.15rem; height: 1.15rem; transform: translate(-50%, -50%); border: 3px solid var(--cp-accent); border-radius: 50%; background: var(--cp-surface); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4); animation-name: hr-knob; }
.hr-ratio { position: absolute; left: 50%; top: 100%; margin-top: .4rem; transform: translateX(-50%); color: var(--cp-accent); font-size: .62rem; font-weight: 800; white-space: nowrap; }
.hr-split-btn { right: .8rem; bottom: .8rem; animation-name: hr-press; }
@keyframes hr-slider-fill { 0%, 12% { width: 100%; } 40%, 100% { width: 50%; } }
@keyframes hr-knob { 0%, 12% { left: 100%; } 40%, 100% { left: 50%; } }
@keyframes hr-press { 0%, 52% { transform: scale(1); filter: none; } 56% { transform: scale(.92); filter: brightness(.9); } 60%, 100% { transform: scale(1); filter: none; } }

/* 7. Auto-splits */
.hr-spin { animation-name: hr-spin; animation-duration: 3s; animation-timing-function: linear; }
.hr-fly { position: absolute; right: .9rem; top: 1.05rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; border-radius: 999px; background: var(--cp-accent); color: #fff; font-size: .68rem; font-weight: 800; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cp-accent) 70%, transparent); opacity: 0; animation-name: hr-fly; }
.hr-recur-partner { position: absolute; right: 1.2rem; top: 4.4rem; display: grid; justify-items: center; gap: .15rem; color: var(--cp-text-muted); font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hr-recur-partner .hr-avatar { width: 2.3rem; height: 2.3rem; font-size: .9rem; animation-name: hr-bounce; }
.hr-recur-partner .hr-badge { top: -.15rem; right: .5rem; animation-name: hr-badge-pop; }
@keyframes hr-spin { to { transform: rotate(360deg); } }
@keyframes hr-fly { 0%, 26% { opacity: 0; transform: translate(0, 0) scale(.8); } 30% { opacity: 1; transform: translate(0, 0) scale(1); } 42% { transform: translate(-2.4rem, 1.6rem) scale(1.05); } 54% { opacity: 1; transform: translate(-.3rem, 3.5rem) scale(.6); } 56%, 100% { opacity: 0; transform: translate(-.3rem, 3.5rem) scale(.4); } }
@keyframes hr-bounce { 0%, 54% { transform: scale(1); } 58% { transform: scale(1.18); } 62%, 100% { transform: scale(1); } }

/* 8. Settle up */
.hr-rails { display: flex; gap: .35rem; margin-top: .55rem; }
.hr-rails span { padding: .28rem .5rem; border: 1px solid var(--cp-border); border-radius: 999px; color: var(--cp-text-muted); font-size: .6rem; font-weight: 700; }
.hr-rails .hr-rail-venmo { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; animation-name: hr-rail; }
.hr-pay-btn { left: .8rem; bottom: .8rem; animation-name: hr-press-34; }
.hr-pointer { position: absolute; left: 4.4rem; bottom: 1.9rem; z-index: 4; color: var(--cp-text); font-size: 1.35rem; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); opacity: 0; animation-name: hr-pointer; }
@keyframes hr-rail { 0%, 34% { background: transparent; border-color: var(--cp-border); color: var(--cp-text-muted); } 38%, 100% { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; } }
@keyframes hr-press-34 { 0%, 32% { transform: scale(1); filter: none; } 35% { transform: scale(.92); filter: brightness(.9); } 38%, 100% { transform: scale(1); filter: none; } }
@keyframes hr-pointer { 0%, 10% { opacity: 0; transform: translate(6rem, 2rem); } 16% { opacity: 1; } 30% { transform: translate(-1.6rem, -.1rem); } 34% { transform: translate(-1.6rem, -.1rem) scale(.82); } 38%, 44% { opacity: 1; transform: translate(-1.6rem, -.1rem) scale(1); } 50%, 100% { opacity: 0; transform: translate(-1.6rem, -.1rem); } }

/* 9. Email alert */
.hr-node { position: absolute; top: 1rem; display: grid; justify-items: center; gap: .3rem; color: var(--cp-text-muted); font-size: .58rem; font-weight: 700; }
.hr-node > i { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--cp-border); border-radius: .9rem; background: var(--cp-surface); color: var(--cp-accent); font-size: 1.3rem; box-shadow: 0 10px 20px -12px rgba(27, 19, 64, .5); }
.hr-node-a { left: 1.4rem; }
.hr-node-a > i { animation-name: hr-tick; }
.hr-node-b { right: 1.4rem; }
.hr-node-b .hr-badge { top: -.35rem; right: -.35rem; animation-name: hr-badge-pop-42; }
.hr-envelope { position: absolute; left: 2.1rem; top: 1.55rem; z-index: 2; color: var(--cp-accent); font-size: 1.5rem; filter: drop-shadow(0 6px 10px rgba(90, 69, 230, .35)); opacity: 0; animation-name: hr-envelope; }
.hr-mail { position: absolute; left: .7rem; right: .7rem; bottom: .7rem; z-index: 3; border: 1px solid var(--cp-border); border-radius: .85rem; background: var(--cp-surface); box-shadow: 0 16px 32px -14px rgba(27, 19, 64, .5); overflow: hidden; animation-name: hr-mail; }
.hr-mail-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-bottom: 1px solid var(--cp-border); background: color-mix(in srgb, var(--cp-accent) 6%, var(--cp-surface)); }
.hr-mail-head > div { flex: 1; min-width: 0; }
.hr-mail-head b { display: block; color: var(--cp-text); font-size: .7rem; }
.hr-mail-head span { display: block; color: var(--cp-text-muted); font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-mail-head small { color: var(--cp-text-muted); font-size: .58rem; }
.hr-mail-body { padding: .5rem .6rem; }
.hr-mail-body b { display: block; color: var(--cp-text); font-size: .76rem; }
.hr-mail-body span { display: block; color: var(--cp-text-muted); font-size: .62rem; }
.hr-mail-body em { display: inline-block; margin-top: .35rem; padding: .28rem .55rem; border-radius: .45rem; background: var(--cp-accent); color: #fff; font-size: .6rem; font-style: normal; font-weight: 800; }
@keyframes hr-tick { 0%, 4% { transform: scale(1); box-shadow: 0 10px 20px -12px rgba(27, 19, 64, .5); } 8% { transform: scale(1.12); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cp-accent) 20%, transparent); } 14%, 100% { transform: scale(1); box-shadow: 0 10px 20px -12px rgba(27, 19, 64, .5); } }
@keyframes hr-envelope { 0%, 8% { opacity: 0; transform: translate(0, 0) scale(.6); } 14% { opacity: 1; transform: translate(0, 0) scale(1); } 26% { transform: translate(6.6rem, -1.2rem) rotate(8deg); } 38% { opacity: 1; transform: translate(13.3rem, 0) rotate(0); } 42%, 100% { opacity: 0; transform: translate(13.3rem, 0) scale(.5); } }
@keyframes hr-mail { 0%, 44% { opacity: 0; transform: translateY(110%); } 52%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(110%); } }

/* 10. Intelligence */
.hr-bubble { position: relative; padding: .5rem .65rem; border-radius: .9rem; font-size: .72rem; }
.hr-bubble.is-user { display: block; width: fit-content; max-width: 100%; margin-left: auto; border-bottom-right-radius: .25rem; background: var(--cp-accent); color: #fff; }
.hr-type { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; border-right: 2px solid rgba(255, 255, 255, .85); animation-name: hr-type, hr-caret; animation-duration: var(--t), .8s; animation-timing-function: steps(24, end), steps(1, end); }
.hr-bubble.is-ai { margin-top: .5rem; border: 1px solid var(--cp-border); border-bottom-left-radius: .25rem; background: var(--cp-surface); animation-name: hr-fade-30; }
.hr-bubble.is-ai small { display: flex; align-items: center; gap: .3rem; margin-bottom: .35rem; color: var(--cp-accent); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hr-bars { display: grid; gap: .3rem; }
.hr-bars > div { display: grid; grid-template-columns: 2.4rem 1fr 2.2rem; align-items: center; gap: .4rem; color: var(--cp-text-muted); font-size: .64rem; font-weight: 700; }
.hr-bars i { height: .55rem; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #7C6AF2, #5A45E6); transform-origin: left; animation-name: hr-grow; }
.hr-bars > div:nth-child(2) i { animation-delay: calc(var(--d) + .3s); }
.hr-bars > div:nth-child(3) i { animation-delay: calc(var(--d) + .6s); }
.hr-bars > div:nth-child(4) i { animation-delay: calc(var(--d) + .9s); }
.hr-bars b { color: #16a34a; text-align: right; animation-name: hr-fade-52; }
.hr-ai .hr-chip { right: .7rem; bottom: .7rem; }
@keyframes hr-type { 0%, 4% { max-width: 0; } 24%, 100% { max-width: 12rem; } }
@keyframes hr-caret { 0%, 50% { border-color: rgba(255, 255, 255, .85); } 50.01%, 100% { border-color: transparent; } }
@keyframes hr-grow { 0%, 34% { transform: scaleX(0); } 54%, 100% { transform: scaleX(1); } }

/* 11. Partner toggle */
.hr-toggle-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.hr-avatars { display: flex; }
.hr-avatars .hr-avatar + .hr-avatar { margin-left: -.5rem; }
.hr-partner-avatar { animation-name: hr-partner-avatar; }
.hr-toggle-head small { flex: 1; color: var(--cp-text-muted); font-size: .62rem; font-weight: 700; }
.hr-switch { position: relative; flex: none; width: 2.1rem; height: 1.2rem; border-radius: 999px; background: var(--cp-accent); animation-name: hr-switch; }
.hr-switch i { position: absolute; top: .15rem; left: .15rem; width: .9rem; height: .9rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); transform: translateX(.9rem); animation-name: hr-knob-toggle; }
.hr-networth { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .4rem; padding: 0 .1rem; }
.hr-networth small { color: var(--cp-text-muted); font-size: .62rem; font-weight: 700; }
.hr-networth b { color: var(--cp-text); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.hr-toggle .hr-row { padding: .3rem .5rem; }
.hr-toggle .hr-row > div { display: flex; align-items: baseline; gap: .35rem; }
.hr-toggle .hr-row span::before { content: "· "; }
.hr-toggle .hr-row + .hr-row { margin-top: .3rem; }
.hr-row.is-partner { animation-name: hr-partner-row; }
.hr-partner-2 { animation-delay: calc(var(--d) + .25s); }
@keyframes hr-switch { 0%, 22% { background: color-mix(in srgb, var(--cp-text) 22%, transparent); } 26%, 70% { background: var(--cp-accent); } 74%, 100% { background: color-mix(in srgb, var(--cp-text) 22%, transparent); } }
@keyframes hr-knob-toggle { 0%, 22% { transform: translateX(0); } 26%, 70% { transform: translateX(.9rem); } 74%, 100% { transform: translateX(0); } }
@keyframes hr-partner-row { 0%, 26% { opacity: 0; transform: translateX(10px); } 32%, 70% { opacity: 1; transform: none; } 76%, 100% { opacity: 0; transform: translateX(10px); } }
@keyframes hr-partner-avatar { 0%, 24% { opacity: .35; filter: grayscale(1); } 28%, 70% { opacity: 1; filter: none; } 74%, 100% { opacity: .35; filter: grayscale(1); } }

/* 12. Category flow */
.hr-sankey { display: block; width: 100%; height: 9.8rem; }
.hr-ribbon { fill-opacity: .55; clip-path: inset(0 0 0 0); animation-name: hr-reveal; }
.hr-ribbon.r1 { fill: #e05252; }
.hr-ribbon.r2 { fill: #5A45E6; animation-delay: calc(var(--d) + .25s); }
.hr-ribbon.r3 { fill: #f28c38; animation-delay: calc(var(--d) + .5s); }
.hr-ribbon.r4 { fill: #3cb4d3; animation-delay: calc(var(--d) + .75s); }
.hr-ribbon.r5 { fill: #22c55e; animation-delay: calc(var(--d) + 1s); }
.hr-lbl { fill: var(--cp-text); font-size: 8.5px; font-weight: 700; animation-name: hr-fade-52; }
.hr-lbl.l4 { transform: translateY(-1px); }
.hr-lbl.l5 { transform: translateY(-1px); }
.hr-flow .hr-chip { right: .7rem; top: .6rem; }
@keyframes hr-reveal { 0%, 8% { clip-path: inset(0 100% 0 0); } 48%, 100% { clip-path: inset(0 0 0 0); } }

/* 13. Subscription price change */
.hr-price-row { border-color: #f59e0b; animation-name: hr-flash; }
.hr-delta { position: absolute; right: .55rem; top: -.55rem; padding: .18rem .4rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: .58rem; font-style: normal; font-weight: 800; animation-name: hr-delta; }
@keyframes hr-flash { 0%, 34% { border-color: var(--cp-border); box-shadow: none; } 38% { border-color: #f59e0b; box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 25%, transparent); } 48%, 100% { border-color: #f59e0b; box-shadow: none; } }
@keyframes hr-delta { 0%, 34% { opacity: 0; transform: translateY(6px) scale(.8); } 40%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px) scale(.8); } }

@media (max-width: 767.98px) {
    .hr-reel { --fs-card: 19rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hr-stage, .hr-stage * { animation: none !important; }
    .hr-card { transition: none; }
    .hr-scanline, .hr-scan-chip, .hr-pointer, .hr-envelope, .hr-fly, .hr-spend-t1, .hr-ring { display: none; }
    .hr-swap > span:first-child { opacity: 0; }
}

@media (max-width: 991.98px) {
    .hs-split { grid-template-columns: 1fr; gap: 2rem; }
    .hs-split.is-flipped > :first-child { order: 0; }
    .hs-mobile-stage, .hs-reports-stage, .hs-mail-stage, .hs-couples-stage, .hs-ai-stage { justify-self: center; }
    .hs-eco { grid-template-columns: 1fr; }
    .hs-eco::before { display: none; }
    .hs-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hs-tile.is-wide { grid-column: span 2; }
    .hs-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .hs-bento { grid-template-columns: 1fr; }
    .hs-tile.is-wide { grid-column: span 1; }
    .hs-tile.is-wide .hs-tile-shot .hs-phone { --w: min(15rem, 68%); left: 50%; right: auto; transform: translateX(-50%); }
    .hs-tile.is-wide .hs-tile-shot .hs-phone.is-second { display: none; }
    .hs-trust { grid-template-columns: 1fr; }
    .hs-mobile-stage .hs-callout-b, .hs-mobile-stage .hs-pill-3, .hs-mail-stage .hs-pill-1, .hs-reports-stage .hs-pill-2 { display: none; }
    .hs-points.is-grid { grid-template-columns: 1fr; }
    .hs-moments { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .hs-float-a, .hs-float-b, .hs-float-c { animation: none; }
    .hs-tile, .hs-eco-card { transition: none; }
}