/* Home page stories (hm-*): the animated feature sections under the hero carousel and the feature reel. Sits on the
   hs-* layout system and tokens in home-showcase.css (which must load first) and reuses fi-av / fi-pointer from
   intelligence-showcase.css. Convention: an element's base style is its final state; keyframes describe the journey,
   so reduced-motion users see the finished frame. Container units (cqw) keep every stage proportional. */
.hm { --hm-you: #2563eb; --hm-partner: #d97706; --hm-ok: #16a34a; --hm-bad: #dc2626; --hm-warn: #b45309; --hm-gold: #f2c14e; --hm-teal: #3cb4d3; --hm-app-bg: #fcfdfd; --hm-app-card: #ffffff; --hm-app-card-text: #0b0f19; --hm-app-card-muted: #565973; --hm-bills-bg: linear-gradient(90deg, #f8ecdc, #fcf7f0 55%, #ffffff); --hm-tile-bg: rgba(255, 255, 255, .92); --hm-tile-border: #e6dccd; --hm-chip-bg: #d0d0e0; --hm-chip-fg: #3b3d55; }
[data-bs-theme="dark"] .hm { --hm-you: #60a5fa; --hm-partner: #fbbf24; --hm-ok: #4ade80; --hm-bad: #f87171; --hm-warn: #fbbf24; --hm-app-bg: #0b0e18; --hm-app-card: #1a1d2c; --hm-app-card-text: #e9ebf5; --hm-app-card-muted: #a7abc2; --hm-bills-bg: linear-gradient(90deg, #26211f, #1c1b22 50%, #121320); --hm-tile-bg: rgba(28, 27, 36, .96); --hm-tile-border: #3a3340; --hm-chip-bg: #4d5064; --hm-chip-fg: #e8e9f4; }
/* The home reel follows the hero carousel directly, so it needs less headroom than the reel on other pages. */
.hr-section.hr-home { padding-top: clamp(1.25rem, 3vw, 2rem); }
.hm .tone-ok { color: var(--hm-ok) !important; }
.hm .tone-bad { color: var(--hm-bad) !important; }
.hm-stage { container-type: inline-size; position: relative; isolation: isolate; width: 100%; --hm-t: 12s; }
.hm-stage * { animation-duration: var(--hm-t); animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.hm-stage .hs-float-a { animation-duration: 8s; } .hm-stage .hs-float-b { animation-duration: 9.5s; } .hm-stage .hs-float-c { animation-duration: 7s; }
.hm-points-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.hm-links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.hm-tile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.6rem 1.6rem 1.5rem; 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; }
.hm-tile h3 { margin: 0 0 .4rem; padding-right: 5.5rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.hm-tile p { margin: 0 0 1.1rem; font-size: .92rem; line-height: 1.5; }
.hm-tile .hm-stage { margin-bottom: .5rem; }
.hm-tile .hs-link { margin-top: auto; padding-top: 1rem; font-size: .9rem; }
.hm-tile .hm-links .hs-link { margin-top: .5rem; padding-top: .5rem; }
.hm-duo, .hm-webgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.hm-webgrid .is-wide { grid-column: 1 / -1; }
.hm-shot-browser { margin-bottom: .5rem; }
@property --hm-k { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --hm-r { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --hm-c { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --hm-b { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --hm-g { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --hm-gd { syntax: '<integer>'; inherits: false; initial-value: 0; }
@counter-style hm-pad2 { system: extends decimal; pad: 2 "0"; }
@counter-style hm-pad3 { system: extends decimal; pad: 3 "0"; }

/* ===== Flow stages: Smart Signals and Bills Before Payday flowing through the phone =====
   Geometry is derived from the 1320x2868 Chip In 4.0 dashboard screenshots (home/dashboard-signals, home/dashboard-bills)
   so the strip lines up with the phone at any size: --hm-pw phone width and --hm-pl/--hm-pt its offset (cqw); the
   screenshot is cover-fitted by height, so the image is --hm-ih tall (phone height minus bezels) and 0.98 phone widths
   wide. --hm-st/--hm-sh are the strip's top and height as fractions of the screenshot: the Smart Signals cards sit at
   rows 655-979 (22.8%-34.1%), the Bills Before Payday tiles at rows 1564-1862 (54.5%-64.9%). */
.hm-flow-stage { --hm-pw: 36; --hm-pl: 32; --hm-pt: 6; --hm-st: .2284; --hm-sh: .113; --hm-bez: calc(var(--hm-pw) * .022); --hm-ih: calc(var(--hm-pw) * 2.1722 - var(--hm-bez) * 2); --hm-it: calc(var(--hm-pt) + var(--hm-bez)); aspect-ratio: 10 / 5.6; border: 1px solid var(--cp-border); border-radius: 2rem; overflow: hidden; background: radial-gradient(60% 90% at 50% 25%, color-mix(in srgb, var(--cp-accent) 16%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--cp-accent) 5%, var(--cp-surface)), var(--cp-surface)); }
.hm-flow-stage.is-bills { --hm-pt: 3; --hm-st: .5453; --hm-sh: .104; aspect-ratio: 10 / 6.2; }
.hm-flow-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(color-mix(in srgb, var(--cp-text-muted) 32%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; mask-image: radial-gradient(75% 80% at 50% 45%, #000, transparent); -webkit-mask-image: radial-gradient(75% 80% at 50% 45%, #000, transparent); opacity: .45; }
.hm-phone { --w: calc(var(--hm-pw) * 1cqw); position: absolute; left: calc(var(--hm-pl) * 1cqw); top: calc(var(--hm-pt) * 1cqw); z-index: 2; }
.hm-cover { position: absolute; left: 0; right: 0; z-index: 3; display: block; background: var(--hm-app-bg); }
.hm-cover-signals { top: 23.2%; height: 11.3%; }
.hm-cover-bills { top: 54.1%; height: 10.7%; background: var(--hm-bills-bg); }
.hm-lane { position: absolute; left: 0; right: 0; z-index: 1; display: block; height: 0; border-top: 2px dashed color-mix(in srgb, var(--cp-accent) 32%, transparent); top: calc((var(--hm-it) + var(--hm-ih) * (var(--hm-st) + var(--hm-sh) / 2)) * 1cqw); }
.hm-flow { position: absolute; left: 0; right: 0; z-index: 4; overflow: hidden; top: calc((var(--hm-it) + var(--hm-ih) * var(--hm-st)) * 1cqw); height: calc(var(--hm-ih) * var(--hm-sh) * 1cqw); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.hm-flow-track { display: flex; width: max-content; height: 100%; animation: hm-flow 64s linear infinite; }
.hm-flow-bills .hm-flow-track { animation-duration: 48s; }
@keyframes hm-flow { to { transform: translateX(-50%); } }
/* A Chip In 4.0 Smart Signal card, sized like the app's (723x324 of a 1320-wide screen): a severity bar on the left, a glyph
   badge in the top-right corner, the glyph again beside a one-line title, two lines of context, and the View alert link. */
.hm-sig { --hm-tone: var(--cp-accent); position: relative; display: flex; flex-direction: column; flex: none; width: calc(var(--hm-pw) * .548 * 1cqw); height: 100%; margin-right: calc(var(--hm-pw) * .022 * 1cqw); padding: calc(var(--hm-pw) * .026 * 1cqw) calc(var(--hm-pw) * .03 * 1cqw) calc(var(--hm-pw) * .02 * 1cqw) calc(var(--hm-pw) * .038 * 1cqw); border-radius: calc(var(--hm-pw) * .024 * 1cqw); background: linear-gradient(135deg, color-mix(in srgb, var(--hm-tone) 10%, var(--hm-app-card)), var(--hm-app-card) 55%); box-shadow: 0 8px 18px -12px rgba(27, 19, 64, .45), inset 0 0 0 1px color-mix(in srgb, var(--hm-tone) 28%, transparent); overflow: hidden; }
.hm-sig::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--hm-pw) * .01 * 1cqw); background: var(--hm-tone); }
.hm-sig > i { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: calc(var(--hm-pw) * .05 * 1cqw); height: calc(var(--hm-pw) * .05 * 1cqw); border-radius: 0 calc(var(--hm-pw) * .022 * 1cqw) 0 calc(var(--hm-pw) * .016 * 1cqw); background: var(--hm-tone); color: #fff; font-size: calc(var(--hm-pw) * .03 * 1cqw); }
.hm-sig b { display: flex; align-items: center; gap: calc(var(--hm-pw) * .012 * 1cqw); padding-right: calc(var(--hm-pw) * .05 * 1cqw); color: var(--hm-app-card-text); font-size: calc(var(--hm-pw) * .0275 * 1cqw); font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-sig b i { flex: none; color: var(--hm-tone); font-size: 1.1em; }
.hm-sig span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: calc(var(--hm-pw) * .006 * 1cqw); color: var(--hm-app-card-muted); font-size: calc(var(--hm-pw) * .0218 * 1cqw); line-height: 1.35; }
.hm-sig em { display: inline-flex; align-items: center; gap: .1em; align-self: flex-end; margin-top: auto; color: var(--cp-accent); font-size: calc(var(--hm-pw) * .021 * 1cqw); font-style: normal; font-weight: 700; }
.hm-sig.sig-crit, .hm-sig.sig-hot { --hm-tone: #e5484d; }
.hm-sig.sig-ok { --hm-tone: #22b573; }
.hm-sig.sig-info { --hm-tone: #6c5ce7; }
.hm-sig.sig-due { --hm-tone: #f28c38; }
.hm-sig.sig-warn { --hm-tone: #f5a524; }
/* A Bills Before Payday tile, sized like the app's: name, amount, cadence, due chip, faded merchant mark. */
.hm-bill { position: relative; display: flex; flex-direction: column; flex: none; width: calc(var(--hm-pw) * .3267 * 1cqw); height: 100%; margin-right: calc(var(--hm-pw) * .0218 * 1cqw); padding: calc(var(--hm-pw) * .028 * 1cqw) calc(var(--hm-pw) * .03 * 1cqw) calc(var(--hm-pw) * .024 * 1cqw); border: 1px solid var(--hm-tile-border); border-radius: calc(var(--hm-pw) * .026 * 1cqw); background: var(--hm-tile-bg); overflow: hidden; }
.hm-bill > * { position: relative; z-index: 1; }
.hm-bill small { color: var(--hm-app-card-muted); font-size: calc(var(--hm-pw) * .023 * 1cqw); font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-bill b { margin-top: calc(var(--hm-pw) * .008 * 1cqw); color: var(--hm-app-card-text); font-size: calc(var(--hm-pw) * .041 * 1cqw); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.hm-bill span { margin-top: calc(var(--hm-pw) * .006 * 1cqw); color: var(--hm-app-card-muted); font-size: calc(var(--hm-pw) * .0218 * 1cqw); line-height: 1.2; }
.hm-bill em { display: inline-block; align-self: flex-start; margin-top: auto; padding: calc(var(--hm-pw) * .011 * 1cqw) calc(var(--hm-pw) * .024 * 1cqw); border-radius: calc(var(--hm-pw) * .013 * 1cqw); background: var(--hm-chip-bg); color: var(--hm-chip-fg); font-size: calc(var(--hm-pw) * .019 * 1cqw); font-style: normal; font-weight: 700; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; }
.hm-bill-logo { position: absolute; z-index: 0; left: calc(var(--hm-pw) * .14 * 1cqw); top: calc(var(--hm-pw) * .005 * 1cqw); display: grid; place-items: center; width: calc(var(--hm-pw) * .185 * 1cqw); height: calc(var(--hm-pw) * .185 * 1cqw); border-radius: 50%; background: var(--c); color: #fff; font-size: calc(var(--hm-pw) * .06 * 1cqw); font-style: normal; font-weight: 800; opacity: .22; }
/* Flow stages are page-wide, so their callouts and pills use rem sizes instead of the container-relative defaults. */
.hm-flow-stage .hs-pill { gap: .5rem; padding: .7rem 1.1rem; font-size: .82rem; }
.hm-flow-stage .hs-callout { gap: .9rem; padding: 1rem 1.2rem; border-radius: 1.2rem; }
.hm-flow-stage .hs-callout > i { width: 2.8rem; height: 2.8rem; font-size: 1.4rem; }
.hm-flow-stage .hs-callout small { margin-bottom: .2rem; font-size: .62rem; }
.hm-flow-stage .hs-callout strong { font-size: .95rem; }
.hm-flow-stage .hs-callout span { margin-top: .15rem; font-size: .74rem; }
.hm-pill-tap { left: 3%; bottom: 8%; }
.hm-pill-web { right: 3%; bottom: 8%; }
.hm-callout-safe { left: 3%; top: 8%; width: 29%; animation: hs-float-a 8s ease-in-out infinite; }
.hm-pill-price { right: 3%; bottom: 6%; }

/* ===== Transaction detail: the three Instant Ink tab screenshots cross-fade as a pointer taps each tab, a highlight sweeps
   the fields, and the web recurring drawer sits beside. Geometry comes from the 1320x2868 popup screenshots: the segmented
   tab control sits at rows 1197-1333 (41.7%-46.5%) and the three tabs at 3.2%-34.3%, 35%-66.1%, 66.8%-97.8% of the width. */
.hm-detail-stage { aspect-ratio: 10 / 8.4; overflow: hidden; --hm-t: 12s; }
.hm-detail-phones { position: absolute; left: 1%; top: 2%; z-index: 2; width: 46cqw; aspect-ratio: 720 / 1564; }
.hm-detail-phones .hm-detail-phone { --w: 46cqw; position: absolute; left: 0; top: 0; }
.hm-detail-phone.is-2 { opacity: 0; animation-name: hm-shot-2; animation-timing-function: linear; }
.hm-detail-phone.is-3 { opacity: 0; animation-name: hm-shot-3; animation-timing-function: linear; }
.hm-scan { position: absolute; left: 3%; right: 3%; top: 50.5%; z-index: 3; display: block; height: 4.4%; border-radius: 1cqw; background: color-mix(in srgb, var(--cp-accent) 20%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cp-accent) 45%, transparent); opacity: 0; animation-name: hm-scan; }
.hm-tab-glow { position: absolute; top: 41.9%; z-index: 3; display: block; height: 4.6%; border-radius: 999px; box-shadow: inset 0 0 0 .4cqw var(--cp-accent), 0 0 0 .5cqw color-mix(in srgb, var(--cp-accent) 22%, transparent); opacity: 0; }
.hm-tab-glow.is-1 { left: 4.2%; width: 30.5%; animation-name: hm-tab-1; }
.hm-tab-glow.is-2 { left: 35.3%; width: 30.5%; animation-name: hm-tab-2; }
.hm-tab-glow.is-3 { left: 66.5%; width: 30.4%; animation-name: hm-tab-3; }
.hm-pointer-tab { left: 82%; top: 44%; z-index: 4; font-size: 4.2cqw; animation-name: hm-pointer-tab; }
@keyframes hm-shot-2 { 0%, 33% { opacity: 0; } 35.5%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hm-shot-3 { 0%, 66% { opacity: 0; } 68.5%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hm-pointer-tab { 0%, 24% { opacity: 0; transform: translate(6cqw, 18cqw); } 29% { opacity: 1; transform: translate(-14.4cqw, 0); } 32% { transform: translate(-14.4cqw, 0) scale(.82); } 34%, 38% { opacity: 1; transform: translate(-14.4cqw, 0) scale(1); } 44%, 57% { opacity: 0; transform: translate(-14.4cqw, 0); } 62% { opacity: 1; transform: translate(0, 0); } 65% { transform: translate(0, 0) scale(.82); } 67%, 71% { opacity: 1; transform: translate(0, 0) scale(1); } 77%, 100% { opacity: 0; transform: translate(0, 0); } }
.hm-fields { position: absolute; right: 1%; top: 3%; z-index: 3; display: grid; gap: 1.2cqw; width: 50%; }
.hm-fields span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .3cqw 1.2cqw; padding: 1.3cqw 1.5cqw; border: 1px solid var(--cp-border); border-radius: 1.6cqw; background: color-mix(in srgb, var(--cp-surface) 96%, transparent); box-shadow: 0 12px 26px -16px rgba(27, 19, 64, .5); color: var(--cp-text); font-size: clamp(.5rem, 2cqw, .78rem); font-weight: 800; }
.hm-fields span i { grid-row: 1 / span 2; display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 1.3cqw; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 2.6cqw; }
.hm-fields span em { color: var(--cp-text-muted); font-size: clamp(.4rem, 1.5cqw, .6rem); font-style: normal; font-weight: 600; line-height: 1.3; }
.hm-fields .is-1 { animation-name: hm-field-1; } .hm-fields .is-2 { animation-name: hm-field-2; } .hm-fields .is-3 { animation-name: hm-field-3; }
.hm-detail-web { position: absolute; right: 1%; bottom: -2%; z-index: 2; width: 50%; height: 40cqw; }
.hm-detail-web img { position: absolute; left: 0; top: 2rem; width: 100%; height: calc(100% - 2rem); object-fit: cover; object-position: 0 88%; }
.hm-pill-web2 { right: 3%; top: 46%; z-index: 4; }
@keyframes hm-scan { 0%, 3% { top: 50.5%; opacity: 0; } 6% { opacity: 1; } 28% { top: 74%; opacity: 1; } 31%, 36% { top: 74%; opacity: 0; } 36.1% { top: 50.5%; } 39% { opacity: 1; } 61% { top: 74%; opacity: 1; } 64%, 69% { top: 74%; opacity: 0; } 69.1% { top: 50.5%; } 72% { opacity: 1; } 94% { top: 74%; opacity: 1; } 97%, 100% { top: 74%; opacity: 0; } }
@keyframes hm-tab-1 { 0%, 32% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes hm-tab-2 { 0%, 33% { opacity: 0; } 36%, 65% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes hm-tab-3 { 0%, 66% { opacity: 0; } 69%, 98% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hm-field-1 { 0%, 32% { border-color: var(--cp-accent); background: color-mix(in srgb, var(--cp-accent) 9%, var(--cp-surface)); transform: translateX(-.6cqw); } 35%, 100% { border-color: var(--cp-border); background: color-mix(in srgb, var(--cp-surface) 96%, transparent); transform: none; } }
@keyframes hm-field-2 { 0%, 33% { border-color: var(--cp-border); background: color-mix(in srgb, var(--cp-surface) 96%, transparent); transform: none; } 36%, 65% { border-color: var(--cp-accent); background: color-mix(in srgb, var(--cp-accent) 9%, var(--cp-surface)); transform: translateX(-.6cqw); } 68%, 100% { border-color: var(--cp-border); background: color-mix(in srgb, var(--cp-surface) 96%, transparent); transform: none; } }
@keyframes hm-field-3 { 0%, 66% { border-color: var(--cp-border); background: color-mix(in srgb, var(--cp-surface) 96%, transparent); transform: none; } 69%, 98% { border-color: var(--cp-accent); background: color-mix(in srgb, var(--cp-accent) 9%, var(--cp-surface)); transform: translateX(-.6cqw); } 100% { border-color: var(--cp-border); background: color-mix(in srgb, var(--cp-surface) 96%, transparent); transform: none; } }

/* ===== Split dialog: Adjust, drag, Auto Split on, Save ===== */
.hm-split-stage { aspect-ratio: 10 / 7.8; --hm-t: 12s; }
.hm-dialog { position: absolute; inset: 2% 5%; border: 1px solid var(--cp-border); border-radius: 2.4cqw; background: var(--cp-surface); box-shadow: var(--hs-shadow); overflow: hidden; }
.hm-dialog-head { display: flex; align-items: center; gap: 1.8cqw; padding: 2cqw 2.6cqw; background: linear-gradient(135deg, #5b3fb8, #7c6af2); color: #fff; }
.hm-merchant { flex: none; display: grid; place-items: center; width: 6cqw; height: 6cqw; border: .4cqw solid rgba(255, 255, 255, .85); border-radius: 50%; background: #2e1d6b; font-size: 3cqw; font-weight: 800; }
/* The 4.0 popup paints its header in the merchant's logo colour; Instant Ink is sky blue. */
.hm-dialog.is-ink .hm-dialog-head { background: linear-gradient(135deg, #0284c7, #0ea5e9 60%, #38bdf8); }
.hm-dialog.is-ink .hm-merchant { background: #3fb7ed; font-size: 3.4cqw; font-weight: 600; }
.hm-dialog-head > div { flex: 1; min-width: 0; }
.hm-dialog-head b { display: block; font-size: clamp(.6rem, 2.4cqw, .9rem); font-weight: 800; letter-spacing: .04em; }
.hm-dialog-head span { display: block; font-size: clamp(.44rem, 1.7cqw, .66rem); opacity: .9; }
.hm-dialog-head > i { font-size: 3cqw; opacity: .85; }
.hm-dialog-body { position: relative; padding: 2.2cqw 2.6cqw 2.6cqw; }
.hm-dialog-label { display: block; color: var(--cp-text); font-size: clamp(.44rem, 1.75cqw, .68rem); font-weight: 800; }
.hm-who { display: flex; align-items: center; gap: 1.6cqw; margin-top: 1.2cqw; }
.hm-who .fi-av { width: 5.4cqw; height: 5.4cqw; }
.hm-who b { color: var(--cp-text); font-size: clamp(.56rem, 2.2cqw, .86rem); font-weight: 800; }
.hm-amt { display: inline-grid; margin-left: auto; min-width: 16cqw; padding: 1.1cqw 1.8cqw; border-radius: 1.3cqw; background: color-mix(in srgb, var(--cp-text) 6%, var(--cp-surface)); color: var(--cp-text); font-size: clamp(.6rem, 2.3cqw, .92rem); font-style: normal; font-weight: 800; text-align: right; }
.hm-amt > span { grid-area: 1 / 1; }
.hm-amt > span:first-child { opacity: 0; animation-name: hm-swap-out-42; }
.hm-amt > span:last-child { animation-name: hm-swap-in-42; }
.hm-slider-head { display: flex; align-items: center; gap: 1cqw; margin-top: 2.4cqw; }
.hm-slider-head > div { flex: 1; min-width: 0; }
.hm-lock-hint { display: grid; margin-top: .3cqw; color: var(--cp-text-muted); font-size: clamp(.4rem, 1.55cqw, .6rem); }
.hm-lock-hint > span { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-lock-hint > span:first-child { opacity: 0; animation-name: hm-swap-out-18; }
.hm-lock-hint > span:last-child { animation-name: hm-swap-in-18; }
.hm-adjust { flex: none; display: inline-flex; align-items: center; gap: .6cqw; padding: 1cqw 1.8cqw; border: 1px solid var(--cp-border); border-radius: 999px; background: var(--cp-surface); color: var(--cp-text); font-size: clamp(.44rem, 1.75cqw, .68rem); font-style: normal; font-weight: 800; animation-name: hm-adjust; }
.hm-adjust > i { font-size: 1.3em; }
.hm-adjust > i:first-child { display: none; }
.hm-adjust > span { display: inline-grid; }
.hm-adjust > span > span { grid-area: 1 / 1; }
.hm-adjust > span > span:first-child { opacity: 0; animation-name: hm-swap-out-18; }
.hm-adjust > span > span:last-child { animation-name: hm-swap-in-18; }
.hm-slider { position: relative; height: 1.3cqw; margin: 3.2cqw 10cqw 2cqw 0; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 12%, transparent); }
.hm-slider-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 86%; border-radius: 999px; background: linear-gradient(90deg, #a5b4fc, var(--cp-accent)); animation-name: hm-fill; }
.hm-slider-knob { position: absolute; top: 50%; left: 86%; width: 3.6cqw; height: 3.6cqw; transform: translate(-50%, -50%); border: .5cqw solid var(--cp-accent); border-radius: 50%; background: var(--cp-surface); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45); animation-name: hm-knob; }
.hm-slider-pct { position: absolute; right: -2cqw; top: 50%; display: inline-grid; transform: translate(100%, -50%); color: var(--cp-text); font-size: clamp(.56rem, 2.2cqw, .86rem); font-style: normal; font-weight: 800; }
.hm-slider-pct > span { grid-area: 1 / 1; }
.hm-slider-pct > span:first-child { opacity: 0; animation-name: hm-swap-out-42; }
.hm-slider-pct > span:last-child { animation-name: hm-swap-in-42; }
.hm-auto { display: flex; align-items: center; gap: 1.6cqw; margin-top: 2.4cqw; padding: 1.6cqw 1.8cqw; border: 1px solid color-mix(in srgb, var(--cp-accent) 45%, var(--cp-border)); border-radius: 1.8cqw; background: color-mix(in srgb, var(--cp-accent) 6%, var(--cp-surface)); animation-name: hm-auto; }
.hm-auto > i { flex: none; display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 2.8cqw; }
.hm-auto > div { flex: 1; min-width: 0; }
.hm-auto b { display: flex; align-items: center; gap: 1cqw; color: var(--cp-text); font-size: clamp(.5rem, 2cqw, .78rem); font-weight: 800; }
.hm-auto b em { padding: .2cqw 1.2cqw; border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: clamp(.38rem, 1.5cqw, .58rem); font-style: normal; }
.hm-auto > div > span { display: block; color: var(--cp-text-muted); font-size: clamp(.4rem, 1.55cqw, .6rem); }
.hm-toggle { position: relative; flex: none; display: flex; align-items: center; gap: 1.2cqw; }
.hm-toggle > b { display: none; color: var(--cp-text-muted); font-size: clamp(.4rem, 1.5cqw, .58rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hm-toggle > i { position: relative; display: block; width: 8.4cqw; height: 4.2cqw; border-radius: 999px; background: var(--cp-accent); animation-name: hm-toggle; }
.hm-toggle > i::after { content: ""; position: absolute; top: .5cqw; left: .5cqw; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); transform: translateX(4.2cqw); animation: hm-toggle-knob var(--hm-t) ease-in-out infinite both; }
.hm-save { display: block; margin-top: 2.6cqw; padding: 1.9cqw; border-radius: 999px; background: var(--cp-accent); color: #fff; font-size: clamp(.52rem, 2cqw, .8rem); font-weight: 800; text-align: center; box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--cp-accent) 80%, transparent); animation-name: hm-press-72; }
.hm-pointer-split { left: 80%; top: 28%; animation-name: hm-pointer-split; }
.hm-callout-saved { left: 5%; right: 5%; bottom: 4%; animation-name: hm-saved; }
@keyframes hm-swap-out-18 { 0%, 18% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes hm-swap-in-18 { 0%, 18% { opacity: 0; } 22%, 100% { opacity: 1; } }
@keyframes hm-swap-out-42 { 0%, 40% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes hm-swap-in-42 { 0%, 40% { opacity: 0; } 44%, 100% { opacity: 1; } }
@keyframes hm-adjust { 0%, 16% { transform: scale(1); border-color: var(--cp-border); background: var(--cp-surface); color: var(--cp-text); } 18% { transform: scale(.92); } 21%, 100% { transform: scale(1); border-color: var(--cp-accent); background: var(--cp-accent-soft); color: var(--cp-accent); } }
@keyframes hm-fill { 0%, 30% { width: 50%; } 42%, 100% { width: 86%; } }
@keyframes hm-knob { 0%, 30% { left: 50%; } 42%, 100% { left: 86%; } }
@keyframes hm-auto { 0%, 54% { border-color: var(--cp-border); background: var(--cp-surface); } 58%, 100% { border-color: color-mix(in srgb, var(--cp-accent) 45%, var(--cp-border)); background: color-mix(in srgb, var(--cp-accent) 6%, var(--cp-surface)); } }
@keyframes hm-toggle { 0%, 55% { background: color-mix(in srgb, var(--cp-text) 22%, transparent); } 59%, 100% { background: var(--cp-accent); } }
@keyframes hm-toggle-knob { 0%, 55% { transform: translateX(0); } 59%, 100% { transform: translateX(4.2cqw); } }
@keyframes hm-press-72 { 0%, 70% { transform: scale(1); filter: none; } 72% { transform: scale(.96); filter: brightness(.88); } 75%, 100% { transform: scale(1); filter: none; } }
@keyframes hm-pointer-split { 0%, 6% { opacity: 0; transform: translate(6cqw, 30cqw); } 10% { opacity: 1; } 16% { transform: translate(0, 0); } 18% { transform: translate(0, 0) scale(.82); } 21%, 26% { opacity: 1; transform: translate(0, 0) scale(1); } 30% { transform: translate(-39cqw, 15cqw); } 42% { transform: translate(-11cqw, 15cqw); } 44%, 48% { opacity: 1; transform: translate(-11cqw, 15cqw); } 55% { transform: translate(-2cqw, 27cqw); } 57% { transform: translate(-2cqw, 27cqw) scale(.82); } 60%, 64% { opacity: 1; transform: translate(-2cqw, 27cqw) scale(1); } 70% { transform: translate(-30cqw, 40cqw); } 72% { transform: translate(-30cqw, 40cqw) scale(.82); } 75%, 78% { opacity: 1; transform: translate(-30cqw, 40cqw) scale(1); } 84%, 100% { opacity: 0; transform: translate(-30cqw, 40cqw); } }
@keyframes hm-saved { 0%, 76% { opacity: 0; transform: translateY(10px) scale(.96); } 82%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px) scale(.96); } }

/* ===== Investments: chart draws, quote ticks, value counts up, alerts pop ===== */
.hm-invest-stage { aspect-ratio: 10 / 8.6; max-width: 38rem; justify-self: end; --hm-t: 14s; }
.hm-inv-card { position: absolute; left: 0; top: 3%; z-index: 2; width: 64%; padding: 2cqw 2.4cqw 2.2cqw; border: 1px solid var(--cp-border); border-radius: 2.2cqw; background: var(--cp-surface); box-shadow: var(--hs-shadow); }
.hm-inv-head { display: flex; align-items: flex-start; gap: 1.6cqw; }
.hm-inv-head > div { flex: 1; min-width: 0; }
.hm-inv-head small { display: block; color: var(--cp-text-muted); font-size: clamp(.4rem, 1.5cqw, .6rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hm-inv-total { --hm-k: 32; --hm-r: 461; --hm-c: 98; counter-reset: hmk var(--hm-k) hmr var(--hm-r) hmc var(--hm-c); display: block; color: var(--cp-text); font-size: clamp(1rem, 4.4cqw, 1.7rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; animation-name: hm-inv-count; }
.hm-inv-total::before { content: "$" counter(hmk) "," counter(hmr, hm-pad3) "." counter(hmc, hm-pad2); }
.hm-inv-head em { display: block; margin-top: .4cqw; color: var(--hm-ok); font-size: clamp(.42rem, 1.6cqw, .64rem); font-style: normal; font-weight: 800; }
.hm-inv-quote { flex: none; display: grid; justify-items: end; gap: .2cqw; padding: 1.2cqw 1.6cqw; border: 1px solid var(--cp-border); border-radius: 1.4cqw; background: color-mix(in srgb, var(--cp-text) 3%, var(--cp-surface)); }
.hm-inv-quote > b { color: var(--cp-text); font-size: clamp(.5rem, 1.9cqw, .74rem); font-weight: 800; }
.hm-inv-price { display: inline-grid; color: var(--cp-text); font-size: clamp(.6rem, 2.3cqw, .92rem); font-style: normal; font-weight: 800; }
.hm-inv-price > span { grid-area: 1 / 1; text-align: right; }
.hm-inv-price > span:first-child { opacity: 0; animation-name: hm-swap-out-50; }
.hm-inv-price > span:last-child { animation-name: hm-swap-in-50; }
.hm-inv-quote > small { padding: .2cqw 1cqw; border-radius: 999px; background: color-mix(in srgb, #22c55e 16%, var(--cp-surface)); color: var(--hm-ok); font-size: clamp(.4rem, 1.5cqw, .58rem); font-weight: 800; }
.hm-inv-chart { display: block; width: 100%; height: 19cqw; margin-top: 1.6cqw; overflow: visible; }
.hm-inv-grid { stroke: color-mix(in srgb, var(--cp-text) 10%, transparent); stroke-width: 1; }
.hm-inv-area { fill: url(#hm-inv-fill); animation-name: hm-inv-area; }
.hm-inv-line { fill: none; stroke: #22c55e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation-name: hm-inv-line; }
.hm-inv-dot { fill: #22c55e; stroke: var(--cp-surface); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation-name: hm-inv-dot; }
.hm-inv-ring { fill: none; stroke: #22c55e; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation-name: hm-inv-ring; }
.hm-inv-ticker { margin-top: 1.4cqw; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hm-inv-tape { display: flex; gap: 2.4cqw; width: max-content; animation: hm-tape 22s linear infinite; }
.hm-inv-tape span { flex: none; color: var(--hm-ok); font-size: clamp(.42rem, 1.6cqw, .64rem); font-weight: 800; white-space: nowrap; }
.hm-inv-tape span b { margin-right: .5cqw; color: var(--cp-text); }
.hm-inv-tape span:nth-child(3), .hm-inv-tape span:nth-child(8) { color: var(--hm-bad); }
.hm-inv-tape span:nth-child(5), .hm-inv-tape span:nth-child(10) { color: var(--cp-text-muted); }
@keyframes hm-tape { to { transform: translateX(-50%); } }
.hm-inv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; margin-top: 1.6cqw; }
.hm-inv-kpis div { min-width: 0; padding: 1cqw 1.2cqw; border: 1px solid var(--cp-border); border-radius: 1.2cqw; background: color-mix(in srgb, var(--cp-text) 2%, var(--cp-surface)); }
.hm-inv-kpis small { display: block; color: var(--cp-text-muted); font-size: clamp(.36rem, 1.35cqw, .52rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-inv-kpis b { display: block; color: var(--cp-text); font-size: clamp(.5rem, 1.9cqw, .74rem); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-inv-phone { --w: 33cqw; position: absolute; right: 0; bottom: 0; z-index: 3; }
.hm-inv-alert { left: 2%; width: 58%; z-index: 4; }
.hm-inv-alert.is-1 { bottom: 25%; animation-name: hm-alert-1; }
.hm-inv-alert.is-2 { bottom: 12.5%; animation-name: hm-alert-2; }
.hm-inv-alert.is-3 { bottom: 0; animation-name: hm-alert-3; }
@keyframes hm-inv-count { 0%, 8% { --hm-k: 21; --hm-r: 480; --hm-c: 0; } 40%, 100% { --hm-k: 32; --hm-r: 461; --hm-c: 98; } }
@keyframes hm-inv-line { 0%, 8% { stroke-dashoffset: 100; } 46%, 100% { stroke-dashoffset: 0; } }
@keyframes hm-inv-area { 0%, 38% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes hm-inv-dot { 0%, 44% { transform: scale(0); } 49% { transform: scale(1.4); } 53%, 100% { transform: scale(1); } }
@keyframes hm-inv-ring { 0%, 46% { opacity: 0; transform: scale(.6); } 50% { opacity: .8; transform: scale(1); } 64%, 100% { opacity: 0; transform: scale(2.8); } }
@keyframes hm-swap-out-50 { 0%, 50% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes hm-swap-in-50 { 0%, 50% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes hm-alert-1 { 0%, 52% { opacity: 0; transform: translateY(10px) scale(.96); } 58%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes hm-alert-2 { 0%, 62% { opacity: 0; transform: translateY(10px) scale(.96); } 68%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes hm-alert-3 { 0%, 72% { opacity: 0; transform: translateY(10px) scale(.96); } 78%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px) scale(.96); } }

/* ===== Cards and liabilities: a budget fills past its thresholds, a utilization gauge sweeps, an interest deadline lands ===== */
.hm-cards-stage { aspect-ratio: 10 / 9; max-width: 38rem; justify-self: start; --hm-t: 14s; }
.hm-budget { position: absolute; left: 0; top: 2%; z-index: 2; width: 62%; padding: 2cqw 2.4cqw 2.2cqw; border: 1px solid var(--cp-border); border-radius: 2.2cqw; background: var(--cp-surface); box-shadow: var(--hs-shadow); }
.hm-budget-head { display: flex; align-items: center; gap: 1.4cqw; }
.hm-budget-head > i { flex: none; display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 1.4cqw; background: var(--cp-accent); color: #fff; font-size: 2.8cqw; }
.hm-budget-head > div { flex: 1; min-width: 0; }
.hm-budget-head b { display: block; color: var(--cp-text); font-size: clamp(.5rem, 1.9cqw, .74rem); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-budget-head span { display: block; color: var(--cp-text-muted); font-size: clamp(.4rem, 1.5cqw, .58rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-budget-amt { flex: none; display: grid; justify-items: end; font-style: normal; }
.hm-budget-num { --hm-b: 970; counter-reset: hmb var(--hm-b); color: var(--cp-text); font-size: clamp(.9rem, 3.6cqw, 1.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; animation-name: hm-budget-count; }
.hm-budget-num::before { content: "$" counter(hmb); }
.hm-budget-amt small { color: var(--cp-text-muted); font-size: clamp(.38rem, 1.45cqw, .56rem); font-weight: 800; }
.hm-budget-bar { position: relative; height: 2.4cqw; margin-top: 2.6cqw; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 10%, transparent); }
.hm-budget-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 97%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #f59e0b 70%, #ef4444); animation-name: hm-budget-fill; }
.hm-pip { position: absolute; top: 50%; width: 2.6cqw; height: 2.6cqw; transform: translate(-50%, -50%); border: .45cqw solid var(--cp-surface); border-radius: 50%; background: color-mix(in srgb, var(--cp-text) 25%, transparent); }
.hm-pip.is-75 { left: 75%; background: #f59e0b; box-shadow: 0 0 0 .8cqw color-mix(in srgb, #f59e0b 30%, transparent); animation-name: hm-pip-75; }
.hm-pip.is-90 { left: 90%; background: #ef4444; box-shadow: 0 0 0 .8cqw color-mix(in srgb, #ef4444 30%, transparent); animation-name: hm-pip-90; }
.hm-pip.is-100 { left: 100%; }
.hm-budget-marks { position: relative; height: 3cqw; margin-top: .6cqw; color: var(--cp-text-muted); font-size: clamp(.38rem, 1.45cqw, .56rem); font-weight: 800; }
.hm-budget-marks span { position: absolute; transform: translateX(-50%); }
.hm-budget-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9cqw; margin-top: 1.4cqw; }
.hm-budget-cards span { min-width: 0; padding: .9cqw 1cqw; border: 1px solid var(--cp-border); border-radius: 1.1cqw; background: color-mix(in srgb, var(--cp-text) 2%, var(--cp-surface)); }
.hm-budget-cards b { display: block; color: var(--cp-text-muted); font-size: clamp(.34rem, 1.3cqw, .5rem); font-weight: 800; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-budget-cards i { display: block; margin-top: .2cqw; color: var(--cp-text); font-size: clamp(.5rem, 1.9cqw, .74rem); font-style: normal; font-weight: 800; }
.hm-budget-cards u { display: block; height: .8cqw; margin-top: .6cqw; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 10%, transparent); overflow: hidden; }
.hm-budget-cards u i { display: block; height: 100%; width: var(--w); margin: 0; border-radius: 999px; background: var(--cp-accent); transform-origin: left; animation-name: hm-budget-card; }
.hm-budget-toast { left: 3%; width: 56%; top: 44%; z-index: 4; }
.hm-budget-toast.is-1 { animation-name: hm-btoast-1; }
.hm-budget-toast.is-2 { animation-name: hm-btoast-2; }
.hm-gauge { position: absolute; left: 0; bottom: 2%; z-index: 2; width: 34%; padding: 2cqw 2cqw 1.8cqw; border: 1px solid var(--cp-border); border-radius: 2.2cqw; background: var(--cp-surface); box-shadow: var(--hs-shadow); text-align: center; }
.hm-gauge svg { display: block; width: 100%; height: auto; }
.hm-gauge-track { fill: none; stroke: color-mix(in srgb, var(--cp-text) 10%, transparent); stroke-width: 12; stroke-linecap: round; }
.hm-gauge-fill { fill: none; stroke: #f59e0b; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 52.8; animation-name: hm-gauge; }
.hm-gauge-num { --hm-g: 47; --hm-gd: 2; counter-reset: hmg var(--hm-g) hmgd var(--hm-gd); display: block; margin-top: -3.4cqw; color: var(--cp-text); font-size: clamp(.9rem, 3.8cqw, 1.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; animation-name: hm-gauge-count; }
.hm-gauge-num::before { content: counter(hmg) "." counter(hmgd) "%"; }
.hm-gauge small { display: block; margin-top: .6cqw; color: var(--cp-text-muted); font-size: clamp(.38rem, 1.45cqw, .56rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hm-cards-interest { left: 37%; right: 0; bottom: 2%; z-index: 4; animation-name: hm-interest; }
.hm-cards-phone { --w: 34cqw; position: absolute; right: 0; top: 3%; z-index: 3; }
@keyframes hm-budget-count { 0%, 8% { --hm-b: 0; } 30%, 46% { --hm-b: 750; } 60%, 74% { --hm-b: 900; } 90%, 100% { --hm-b: 970; } }
@keyframes hm-budget-fill { 0%, 8% { width: 0; } 30%, 46% { width: 75%; } 60%, 74% { width: 90%; } 90%, 100% { width: 97%; } }
@keyframes hm-budget-card { 0%, 8% { transform: scaleX(0); } 90%, 100% { transform: scaleX(1); } }
@keyframes hm-pip-75 { 0%, 28% { background: color-mix(in srgb, var(--cp-text) 25%, transparent); box-shadow: none; } 32%, 100% { background: #f59e0b; box-shadow: 0 0 0 .8cqw color-mix(in srgb, #f59e0b 30%, transparent); } }
@keyframes hm-pip-90 { 0%, 58% { background: color-mix(in srgb, var(--cp-text) 25%, transparent); box-shadow: none; } 62%, 100% { background: #ef4444; box-shadow: 0 0 0 .8cqw color-mix(in srgb, #ef4444 30%, transparent); } }
@keyframes hm-btoast-1 { 0%, 31% { opacity: 0; transform: translateY(10px) scale(.96); } 36%, 56% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes hm-btoast-2 { 0%, 62% { opacity: 0; transform: translateY(10px) scale(.96); } 67%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes hm-gauge { 0%, 10% { stroke-dashoffset: 100; } 44%, 100% { stroke-dashoffset: 52.8; } }
@keyframes hm-gauge-count { 0%, 10% { --hm-g: 0; --hm-gd: 0; } 44%, 100% { --hm-g: 47; --hm-gd: 2; } }
@keyframes hm-interest { 0%, 76% { opacity: 0; transform: translateY(10px) scale(.96); } 82%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px) scale(.96); } }

/* ===== Transactions grid: a row highlight sweeps, Excel Export is pressed, three files land ===== */
.hm-grid-stage { aspect-ratio: 10 / 7.4; --hm-t: 12s; }
.hm-grid-browser { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; }
.hm-grid-browser img { width: 100%; height: auto; }
.hm-row-glow { position: absolute; left: 1.5%; right: 1.5%; top: 32%; z-index: 2; display: block; height: 5.5%; border-radius: .6cqw; background: color-mix(in srgb, var(--cp-accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cp-accent) 45%, transparent); opacity: 0; animation-name: hm-rowglow; }
.hm-pointer-export { left: 14%; top: calc(2rem + 7cqw); animation-name: hm-pointer-export; }
.hm-exports { position: absolute; left: 2%; right: 2%; bottom: 3%; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqw; }
.hm-exports span { display: inline-flex; align-items: center; gap: .8cqw; padding: 1.1cqw 1.8cqw; border: 1px solid var(--cp-border); border-radius: 999px; background: var(--cp-surface); box-shadow: 0 12px 26px -14px rgba(27, 19, 64, .5); color: var(--cp-text); font-size: clamp(.46rem, 1.75cqw, .7rem); font-weight: 800; white-space: nowrap; }
.hm-exports span i { font-size: 1.35em; }
.hm-exports .is-xlsx i { color: #16a34a; } .hm-exports .is-pdf i { color: #dc2626; } .hm-exports .is-csv i { color: #7c3aed; }
.hm-exports .is-xlsx { animation-name: hm-export-1; } .hm-exports .is-pdf { animation-name: hm-export-2; } .hm-exports .is-csv { animation-name: hm-export-3; }
.hm-pill-grid { right: 2%; top: calc(2rem + 1.4cqw); z-index: 4; }
@keyframes hm-rowglow { 0%, 40% { top: 32%; opacity: 0; } 46% { opacity: 1; } 84% { top: 82%; opacity: 1; } 90%, 100% { top: 82%; opacity: 0; } }
@keyframes hm-pointer-export { 0%, 4% { opacity: 0; transform: translate(30cqw, 30cqw); } 9% { opacity: 1; } 16% { transform: translate(0, 0); } 18% { transform: translate(0, 0) scale(.82); } 21%, 26% { opacity: 1; transform: translate(0, 0) scale(1); } 32%, 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes hm-export-1 { 0%, 20% { opacity: 0; transform: translate(-16cqw, -30cqw) scale(.5); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes hm-export-2 { 0%, 34% { opacity: 0; transform: translate(-16cqw, -30cqw) scale(.5); } 44%, 100% { opacity: 1; transform: none; } }
@keyframes hm-export-3 { 0%, 48% { opacity: 0; transform: translate(-16cqw, -30cqw) scale(.5); } 58%, 100% { opacity: 1; transform: none; } }

/* ===== Intelligence: a typed question, grounding, a grounded answer with a chart and follow-ups ===== */
.hm-ai-stage { aspect-ratio: 10 / 7.2; max-width: 38rem; justify-self: start; --hm-t: 14s; }
.hm-ai-card { position: absolute; left: 0; top: 2%; width: 70%; padding: 2.4cqw; border: 1px solid var(--cp-border); border-radius: 2.2cqw; background: var(--cp-surface); box-shadow: var(--hs-shadow); overflow: hidden; }
/* The Chip In 4.0 AI tab (brain, suggested questions) leans in beside the answer card. */
.hm-ai-phone { --w: 34cqw; position: absolute; right: 0; bottom: 0; z-index: 3; animation: hs-float-b 9.5s ease-in-out infinite; }
.hm-pill-ai2 { right: 2%; top: 4%; z-index: 4; }
.hm-ai-q { display: flex; justify-content: flex-end; align-items: center; gap: 1.4cqw; }
.hm-ai-type { display: inline-block; max-width: 100%; padding: 1.6cqw 2.2cqw; border-radius: 2.4cqw 2.4cqw .6cqw 2.4cqw; background: var(--cp-accent); color: #fff; font-size: clamp(.56rem, 2.1cqw, .84rem); font-weight: 700; white-space: nowrap; overflow: hidden; animation-name: hm-ai-type; animation-timing-function: steps(28, end); }
.hm-ai-q .fi-av { width: 5cqw; height: 5cqw; }
.hm-ai-think { display: inline-flex; align-items: center; gap: .8cqw; margin-top: 1.6cqw; padding: 1cqw 1.8cqw; border: 1px solid var(--cp-border); border-radius: 999px; color: var(--cp-text); font-size: clamp(.42rem, 1.6cqw, .64rem); font-weight: 800; animation-name: hm-ai-think; }
.hm-ai-think i { color: var(--cp-accent); font-size: 1.3em; }
.hm-ai-a { margin-top: 1.6cqw; padding: 1.8cqw 2cqw; border: 1px solid var(--cp-border); border-radius: 1.8cqw; background: color-mix(in srgb, var(--cp-text) 2%, var(--cp-surface)); animation-name: hm-ai-a; }
.hm-ai-a-head { display: flex; align-items: center; gap: .8cqw; color: var(--cp-accent); font-size: clamp(.4rem, 1.55cqw, .6rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hm-ai-a-head em { margin-left: auto; color: var(--cp-text-muted); font-style: normal; letter-spacing: 0; text-transform: none; }
.hm-ai-a p { margin: 1cqw 0 0; color: var(--cp-text-muted); font-size: clamp(.46rem, 1.75cqw, .7rem); line-height: 1.45; }
.hm-ai-a p b { color: var(--cp-text); }
.hm-ai-bars { display: grid; gap: .9cqw; margin-top: 1.6cqw; }
.hm-ai-bars > div { display: grid; grid-template-columns: 12cqw 1fr 8cqw; align-items: center; gap: 1cqw; color: var(--cp-text-muted); font-size: clamp(.42rem, 1.6cqw, .64rem); font-weight: 700; }
.hm-ai-bars i { display: block; height: 2cqw; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #a5b4fc, var(--cp-accent)); transform-origin: left; animation-name: hm-ai-bar; }
.hm-ai-bars > div:nth-child(2) i { animation-delay: .2s; } .hm-ai-bars > div:nth-child(3) i { animation-delay: .4s; }
.hm-ai-bars b { color: var(--hm-bad); font-weight: 800; text-align: right; }
.hm-ai-chips { display: flex; flex-wrap: wrap; gap: .8cqw; margin-top: 1.8cqw; animation-name: hm-ai-chips; }
.hm-ai-chips span { display: inline-flex; align-items: center; gap: .6cqw; padding: .9cqw 1.7cqw; border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: clamp(.42rem, 1.6cqw, .64rem); font-weight: 800; white-space: nowrap; }
.hm-ai-chips .is-accent { background: var(--cp-accent); color: #fff; }
.hm-pill-ai { left: 3%; bottom: 0; z-index: 4; }
@keyframes hm-ai-type { 0%, 4% { max-width: 0; } 24%, 100% { max-width: 100%; } }
@keyframes hm-ai-think { 0%, 26% { opacity: 0; transform: translateY(-4px); } 30%, 44% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes hm-ai-a { 0%, 48% { opacity: 0; transform: translateY(8px); } 54%, 100% { opacity: 1; transform: none; } }
@keyframes hm-ai-bar { 0%, 56% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
@keyframes hm-ai-chips { 0%, 72% { opacity: 0; transform: translateY(6px); } 78%, 100% { opacity: 1; transform: none; } }

/* ===== Keep exploring ===== */
.hm-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hm-nav-card { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem 1.4rem 1.3rem; 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); text-decoration: none; transition: border-color .2s, transform .25s, box-shadow .25s; }
.hm-nav-card:hover { border-color: var(--cp-accent); transform: translateY(-3px); box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--cp-accent) 55%, transparent); color: var(--cp-text); }
.hm-nav-card > i { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: .5rem; border-radius: .9rem; background: var(--cp-accent); color: #fff; font-size: 1.4rem; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--cp-accent) 70%, transparent); }
.hm-nav-card b { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.hm-nav-card span { color: var(--cp-text-muted); font-size: .9rem; line-height: 1.45; }
.hm-nav-card em { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .8rem; color: var(--cp-accent); font-size: .88rem; font-style: normal; font-weight: 700; }
.hm-nav-card em i { transition: transform .2s; }
.hm-nav-card:hover em i { transform: translateX(3px); }

@media (max-width: 991.98px) {
    .hm-points-3 { grid-template-columns: 1fr; }
    .hm-duo, .hm-webgrid { grid-template-columns: 1fr; }
    .hm-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-invest-stage, .hm-cards-stage, .hm-ai-stage { justify-self: center; }
}
@media (max-width: 767.98px) {
    .hm-flow-stage { --hm-pw: 88; --hm-pl: 6; --hm-pt: 2; aspect-ratio: 10 / 9; border-radius: 1.4rem; }
    .hm-flow-stage.is-bills { --hm-pw: 76; --hm-pl: 12; --hm-pt: 2; aspect-ratio: 10 / 11.5; }
    .hm-pill-web, .hm-pill-price, .hm-callout-safe { display: none; }
    .hm-fields { width: 52%; }
    .hm-detail-web { display: none; }
    .hm-pill-web2 { display: none; }
}
@media (max-width: 575.98px) {
    .hm-nav { grid-template-columns: 1fr; }
    .hm-tile { padding: 1.25rem 1.1rem 1.2rem; }
    .hm-tile .hs-tile-tag { position: static; align-self: flex-start; margin-bottom: .6rem; }
    .hm-tile h3 { padding-right: 0; }
    .hm-pill-grid, .hm-pill-ai, .hm-pill-ai2, .hm-ai-phone { display: none; }
    .hm-ai-stage { aspect-ratio: 10 / 9.5; }
    .hm-ai-card { width: 100%; }
    .hm-invest-stage { aspect-ratio: 10 / 9; }
    .hm-inv-card { width: 100%; }
    .hm-inv-phone, .hm-inv-alert.is-3 { display: none; }
    .hm-inv-alert { width: 92%; }
    .hm-inv-alert.is-1 { bottom: 22%; }
    .hm-inv-alert.is-2 { bottom: 2%; }
    .hm-budget { width: 100%; }
    .hm-budget-toast { width: 92%; }
    .hm-cards-phone { display: none; }
    .hm-gauge { width: 46%; }
    .hm-cards-interest { left: 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .hm-stage *, .hm-stage *::before, .hm-stage *::after, .hm-flow-track, .hm-inv-tape { animation: none !important; }
    .hm-scan, .hm-row-glow, .fi-pointer.hm-pointer-split, .fi-pointer.hm-pointer-export, .fi-pointer.hm-pointer-tab, .hm-ai-think, .hm-budget-toast.is-1 { display: none; }
    .hm-tab-glow.is-1, .hm-fields .is-1 { opacity: 1; }
    .hm-detail-phone.is-2, .hm-detail-phone.is-3 { opacity: 0; }
    .hm-callout-saved, .hm-inv-alert, .hm-cards-interest, .hm-budget-toast.is-2 { opacity: 1; transform: none; }
    .hm-flow-track { transform: translateX(-25%); }
}