/* Financial Intelligence showcase (fi-*): the /intelligence reel and the sections under it. Sits on the hr-* reel
   primitives and hs-* layout system in home-showcase.css and the site's light/dark tokens. Convention (same as the
   home and sharing reels): an element's base style is its final state; keyframes describe the journey, so reduced-motion
   users see the finished frame. Transient helpers (pointers, packets, scan bars, menus) are hidden for them. */
.fi-section, .fi { --fi-you: #2563eb; --fi-partner: #d97706; --fi-ok: #16a34a; --fi-warn: #b45309; --fi-crit: #dc2626; --fi-gold: #f2c14e; --fi-teal: #3cb4d3; --fi-code: #141a2e; }
[data-bs-theme="dark"] .fi-section, [data-bs-theme="dark"] .fi { --fi-you: #60a5fa; --fi-partner: #fbbf24; --fi-ok: #4ade80; --fi-warn: #fbbf24; --fi-crit: #f87171; --fi-code: #0b1020; }
.fi-reel { --fs-card: 22rem; }
.fi-section .hr-card { background: linear-gradient(180deg, color-mix(in srgb, var(--cp-accent) 7%, var(--cp-surface)), var(--cp-surface) 62%); }
.fi-av { position: relative; flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 2px solid var(--fi-you); border-radius: 50%; background: var(--cp-surface); overflow: hidden; }
.fi-av img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fi-av.is-partner { border-color: var(--fi-partner); }
.fi-avatars { display: flex; flex: none; }
.fi-avatars .fi-av + .fi-av { margin-left: -.5rem; }
.fi-packet { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .25rem; padding: .26rem .5rem; border-radius: 999px; background: var(--cp-accent); color: #fff; font-size: .6rem; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cp-accent) 80%, transparent); opacity: 0; }
.fi-packet i { font-size: .8rem; }
.hr-stage .tone-ok { color: var(--fi-ok) !important; }
.hr-stage .tone-warn { color: var(--fi-warn) !important; }
.fi-pop-late { animation-name: fi-pop-late; }
.fi-pop-mid { animation-name: fi-pop-mid; }
.fi-spin { animation-name: fi-spin; animation-duration: 1.4s; animation-timing-function: linear; }
.hr-stage .fi-track::after, .hr-stage .fi-shield::after { animation-duration: var(--t); animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: var(--d, 0s); animation-fill-mode: both; }
@keyframes fi-spin { to { transform: rotate(360deg); } }
@keyframes fi-pop-late { 0%, 66% { opacity: 0; transform: translateY(10px) scale(.96); } 72%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes fi-pop-mid { 0%, 36% { opacity: 0; transform: translateY(10px) scale(.96); } 42%, 58% { opacity: 1; transform: none; } 63%, 100% { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes fi-fade-10 { 0%, 10% { opacity: 0; transform: translateY(6px); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes fi-fade-40 { 0%, 40% { opacity: 0; transform: translateY(6px); } 46%, 100% { opacity: 1; transform: none; } }
@keyframes fi-fade-48 { 0%, 48% { opacity: 0; transform: translateY(6px); } 54%, 100% { opacity: 1; transform: none; } }
@keyframes fi-fade-50 { 0%, 50% { opacity: 0; transform: translateY(6px); } 56%, 100% { opacity: 1; transform: none; } }
@keyframes fi-fade-56 { 0%, 56% { opacity: 0; transform: translateY(6px); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes fi-fade-58 { 0%, 58% { opacity: 0; transform: translateY(6px); } 64%, 100% { opacity: 1; transform: none; } }
@keyframes fi-fade-62 { 0%, 62% { opacity: 0; transform: translateY(6px); } 68%, 100% { opacity: 1; transform: none; } }
@keyframes fi-fade-66 { 0%, 66% { opacity: 0; transform: translateY(6px); } 72%, 100% { opacity: 1; transform: none; } }
@keyframes fi-press-58 { 0%, 56% { transform: scale(1); filter: none; } 59% { transform: scale(.92); filter: brightness(.88); } 62%, 100% { transform: scale(1); filter: none; } }

/* 1. Ask: a typed question, a grounding pause, a grounded answer */
.fi-ask .hr-bubble.is-user { font-size: .72rem; }
.fi-type-q { animation-name: fi-type-q, hr-caret; }
.fi-think { left: .8rem; top: 2.9rem; opacity: 0; animation-name: fi-think; }
.fi-think em { display: inline-flex; gap: .15rem; margin-left: .15rem; }
.fi-think em b { width: .28rem; height: .28rem; border-radius: 50%; background: var(--cp-accent); animation: fi-dots 1s ease-in-out infinite; }
.fi-think em b:nth-child(2) { animation-delay: .18s; }
.fi-think em b:nth-child(3) { animation-delay: .36s; }
.fi-ask .fi-answer { position: absolute; left: .8rem; right: .8rem; top: 2.95rem; bottom: .8rem; margin: 0; padding: .45rem .6rem; overflow: hidden; animation-name: fi-answer; }
.fi-ask .fi-answer small { margin-bottom: .2rem; }
.fi-answer > b { display: block; color: var(--cp-text); font-size: .72rem; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-deltas { display: grid; gap: .22rem; margin-top: .32rem; }
.fi-deltas > div { display: flex; align-items: center; gap: .4rem; padding: .14rem .45rem; border: 1px solid var(--cp-border); border-radius: .55rem; background: color-mix(in srgb, var(--cp-text) 2%, var(--cp-surface)); }
.fi-deltas i { flex: none; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: .4rem; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .8rem; }
.fi-deltas span { flex: 1; color: var(--cp-text); font-size: .64rem; font-weight: 700; }
.fi-deltas em { flex: none; padding: .12rem .4rem; border-radius: 999px; background: color-mix(in srgb, #ef4444 14%, var(--cp-surface)); color: var(--fi-crit); font-size: .58rem; font-weight: 800; font-style: normal; }
.fi-deltas .is-1 { animation-name: fi-delta-1; } .fi-deltas .is-2 { animation-name: fi-delta-2; } .fi-deltas .is-3 { animation-name: fi-delta-3; }
@keyframes fi-type-q { 0%, 4% { max-width: 0; } 24%, 100% { max-width: 15rem; } }
@keyframes fi-dots { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-2px); opacity: 1; } }
@keyframes fi-think { 0%, 24% { opacity: 0; transform: translateY(-4px); } 28%, 42% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes fi-answer { 0%, 44% { opacity: 0; transform: translateY(8px); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes fi-delta-1 { 0%, 54% { opacity: 0; transform: translateX(-6px); } 59%, 100% { opacity: 1; transform: none; } }
@keyframes fi-delta-2 { 0%, 60% { opacity: 0; transform: translateX(-6px); } 65%, 100% { opacity: 1; transform: none; } }
@keyframes fi-delta-3 { 0%, 66% { opacity: 0; transform: translateX(-6px); } 71%, 100% { opacity: 1; transform: none; } }

/* 2. Partner reach: shared rows flow in, the private one stays out */
.fi-reach-head { display: flex; align-items: center; gap: .45rem; }
.fi-reach-head > div { flex: 1; min-width: 0; }
.fi-reach-head b { display: block; color: var(--cp-text); font-size: .68rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-reach-head span { display: block; color: var(--cp-text-muted); font-size: .56rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-scope { flex: none; display: inline-flex; align-items: center; gap: .2rem; padding: .18rem .42rem; border: 1px solid var(--cp-accent); border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .52rem; font-weight: 800; font-style: normal; white-space: nowrap; }
.fi-perm { display: flex; align-items: center; gap: .4rem; margin-top: .32rem; padding: .22rem .42rem; border: 1px solid var(--cp-border); border-radius: .65rem; background: var(--cp-surface); }
.fi-perm > i { flex: none; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: .45rem; background: color-mix(in srgb, var(--fi-partner) 16%, var(--cp-surface)); color: var(--fi-partner); font-size: .8rem; }
.fi-perm > div { flex: 1; min-width: 0; }
.fi-perm b { display: block; color: var(--cp-text); font-size: .64rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-perm span { display: block; color: var(--cp-text-muted); font-size: .54rem; }
.fi-perm em { flex: none; display: inline-flex; align-items: center; gap: .15rem; padding: .14rem .4rem; border-radius: 999px; font-size: .54rem; font-weight: 800; font-style: normal; }
.fi-perm em.is-on { background: color-mix(in srgb, #22c55e 16%, var(--cp-surface)); color: var(--fi-ok); }
.fi-perm em.is-off { background: color-mix(in srgb, var(--cp-text) 10%, transparent); color: var(--cp-text-muted); }
.fi-perm.is-1 { border-color: var(--cp-accent); animation-name: fi-perm-hi-1; }
.fi-perm.is-2 { border-color: var(--cp-accent); animation-name: fi-perm-hi-2; }
.fi-perm.is-private { opacity: .55; animation-name: fi-perm-dim; }
.fi-packet-a { left: 13.4rem; top: 2.55rem; animation-name: fi-packet-a; }
.fi-packet-b { left: 13.4rem; top: 4.65rem; animation-name: fi-packet-b; }
@keyframes fi-perm-hi-1 { 0%, 28% { border-color: var(--cp-border); box-shadow: none; } 33%, 100% { border-color: var(--cp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-accent) 18%, transparent); } }
@keyframes fi-perm-hi-2 { 0%, 34% { border-color: var(--cp-border); box-shadow: none; } 39%, 100% { border-color: var(--cp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-accent) 18%, transparent); } }
@keyframes fi-perm-dim { 0%, 28% { opacity: 1; } 36%, 100% { opacity: .55; } }
@keyframes fi-packet-a { 0%, 40% { opacity: 0; transform: translate(0, 0) scale(.6); } 44% { opacity: 1; transform: translate(0, 0) scale(1); } 56% { opacity: 1; transform: translate(-6rem, 6.4rem) scale(.7); } 60%, 100% { opacity: 0; transform: translate(-6rem, 6.4rem) scale(.4); } }
@keyframes fi-packet-b { 0%, 46% { opacity: 0; transform: translate(0, 0) scale(.6); } 50% { opacity: 1; transform: translate(0, 0) scale(1); } 62% { opacity: 1; transform: translate(-6rem, 4.3rem) scale(.7); } 66%, 100% { opacity: 0; transform: translate(-6rem, 4.3rem) scale(.4); } }

/* 3. Grounded reasoning: question → your data → GPT → answer, with a governed query */
.fi-nodes { display: flex; align-items: center; gap: .15rem; }
.fi-node { flex: none; display: grid; justify-items: center; gap: .22rem; width: 3.7rem; color: var(--cp-text-muted); font-size: .52rem; font-weight: 800; letter-spacing: .02em; text-align: center; }
.fi-node > i { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border: 1px solid var(--cp-border); border-radius: .75rem; background: var(--cp-surface); color: var(--cp-accent); font-size: 1.1rem; box-shadow: 0 10px 20px -12px rgba(27, 19, 64, .5); }
.fi-node.is-1 > i { animation-name: fi-node-1; } .fi-node.is-2 > i { animation-name: fi-node-2; } .fi-node.is-3 > i { animation-name: fi-node-3; } .fi-node.is-4 > i { animation-name: fi-node-4; }
.fi-track { position: relative; flex: 1; height: 2px; margin-bottom: .9rem; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 14%, transparent); overflow: hidden; }
.fi-track::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--cp-accent), transparent); transform: translateX(-120%); }
.fi-code { margin-top: .5rem; padding: .42rem .5rem; border-radius: .6rem; background: var(--fi-code); color: #dfe3ff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .5rem; line-height: 1.45; animation-name: fi-code-in; }
.fi-code-line { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; animation-name: fi-code-type; animation-timing-function: steps(52, end); }
.fi-code-line b { color: #8ab4ff; font-weight: 700; }
.fi-code-ok { display: flex; align-items: center; gap: .25rem; margin-top: .22rem; color: #4ade80; font-family: var(--si-font-sans-serif, "Manrope", system-ui, sans-serif); font-size: .56rem; font-weight: 800; font-style: normal; animation-name: fi-fade-40; }
.fi-model { left: .8rem; bottom: .8rem; opacity: 0; animation-name: fi-model; }
@keyframes fi-node-1 { 0%, 4% { box-shadow: 0 10px 20px -12px rgba(27, 19, 64, .5); border-color: var(--cp-border); } 8% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cp-accent) 22%, transparent); border-color: var(--cp-accent); } 16%, 100% { box-shadow: 0 10px 20px -12px rgba(27, 19, 64, .5); border-color: var(--cp-border); } }
@keyframes fi-node-2 { 0%, 22% { box-shadow: 0 10px 20px -12px rgba(27, 19, 64, .5); border-color: var(--cp-border); } 26% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cp-accent) 22%, transparent); border-color: var(--cp-accent); } 36%, 100% { box-shadow: 0 10px 20px -12px rgba(27, 19, 64, .5); border-color: var(--cp-border); } }
@keyframes fi-node-3 { 0%, 42% { box-shadow: 0 10px 20px -12px rgba(27, 19, 64, .5); border-color: var(--cp-border); } 46% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cp-accent) 22%, transparent); border-color: var(--cp-accent); } 58%, 100% { box-shadow: 0 10px 20px -12px rgba(27, 19, 64, .5); border-color: var(--cp-border); } }
@keyframes fi-node-4 { 0%, 62% { box-shadow: 0 10px 20px -12px rgba(27, 19, 64, .5); border-color: var(--cp-border); } 66%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 24%, transparent); border-color: var(--fi-ok); } }
.fi-track.is-1::after { animation-name: fi-flow-1; } .fi-track.is-2::after { animation-name: fi-flow-2; } .fi-track.is-3::after { animation-name: fi-flow-3; }
@keyframes fi-flow-1 { 0%, 8% { transform: translateX(-120%); } 22%, 100% { transform: translateX(220%); } }
@keyframes fi-flow-2 { 0%, 30% { transform: translateX(-120%); } 44%, 100% { transform: translateX(220%); } }
@keyframes fi-flow-3 { 0%, 52% { transform: translateX(-120%); } 64%, 100% { transform: translateX(220%); } }
@keyframes fi-code-type { 0%, 24% { max-width: 0; } 40%, 100% { max-width: 100%; } }
@keyframes fi-code-in { 0%, 18% { opacity: 0; transform: translateY(6px); } 24%, 100% { opacity: 1; transform: none; } }
@keyframes fi-model { 0%, 44% { opacity: 0; transform: translateY(6px); } 48%, 62% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(6px); } }

/* 4. Multi-modal: text, then chart, then table, in one answer */
.fi-modes { display: flex; gap: .3rem; }
.fi-modes span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; padding: .26rem .3rem; border: 1px solid var(--cp-accent); border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.fi-modes span i { font-size: .8rem; }
.fi-modes .is-1 { animation-name: fi-mode-1; } .fi-modes .is-2 { animation-name: fi-mode-2; } .fi-modes .is-3 { animation-name: fi-mode-3; }
.fi-block { margin-top: .35rem; padding: .32rem .5rem; border: 1px solid var(--cp-border); border-radius: .65rem; background: var(--cp-surface); }
.fi-block-text { animation-name: fi-block-1; }
.fi-block-text b { display: block; color: var(--cp-text); font-size: .66rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-block-text span { display: block; color: var(--cp-text-muted); font-size: .56rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-block-chart { animation-name: fi-block-2; }
.fi-mini-bars { display: flex; align-items: flex-end; gap: .3rem; height: 1.7rem; padding-bottom: 2px; border-bottom: 1px solid color-mix(in srgb, var(--cp-text) 14%, transparent); }
.fi-mini-bars i { flex: 1; height: var(--h); border-radius: .25rem .25rem 0 0; background: linear-gradient(180deg, #93c5fd, var(--fi-you)); transform-origin: bottom; }
.fi-mini-bars i:nth-child(even) { background: linear-gradient(180deg, #c4b5fd, var(--cp-accent)); }
.fi-mini-bars .is-1 { animation-name: fi-mbar-1; } .fi-mini-bars .is-2 { animation-name: fi-mbar-2; } .fi-mini-bars .is-3 { animation-name: fi-mbar-3; } .fi-mini-bars .is-4 { animation-name: fi-mbar-4; } .fi-mini-bars .is-5 { animation-name: fi-mbar-5; } .fi-mini-bars .is-6 { animation-name: fi-mbar-6; }
.fi-block-chart small { display: block; margin-top: .18rem; color: var(--cp-text-muted); font-size: .5rem; font-weight: 700; letter-spacing: .04em; text-align: center; }
.fi-block-table { padding-top: .12rem; padding-bottom: .12rem; animation-name: fi-block-3; }
.fi-trow { display: grid; grid-template-columns: 1.1fr 1fr .8fr; gap: .3rem; padding: .14rem .1rem; border-top: 1px solid color-mix(in srgb, var(--cp-border) 70%, transparent); color: var(--cp-text); font-size: .56rem; font-weight: 600; }
.fi-trow > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-trow > span:last-child { text-align: right; font-weight: 800; }
.fi-trow.is-head { border-top: 0; color: var(--cp-text-muted); font-size: .5rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fi-block-table .is-1 { animation-name: fi-fade-66; } .fi-block-table .is-2 { animation-name: fi-fade-72; }
@keyframes fi-fade-72 { 0%, 72% { opacity: 0; transform: translateY(6px); } 78%, 100% { opacity: 1; transform: none; } }
@keyframes fi-mode-1 { 0%, 6% { border-color: var(--cp-border); background: var(--cp-surface); color: var(--cp-text-muted); } 12%, 100% { border-color: var(--cp-accent); background: var(--cp-accent-soft); color: var(--cp-accent); } }
@keyframes fi-mode-2 { 0%, 30% { border-color: var(--cp-border); background: var(--cp-surface); color: var(--cp-text-muted); } 36%, 100% { border-color: var(--cp-accent); background: var(--cp-accent-soft); color: var(--cp-accent); } }
@keyframes fi-mode-3 { 0%, 56% { border-color: var(--cp-border); background: var(--cp-surface); color: var(--cp-text-muted); } 62%, 100% { border-color: var(--cp-accent); background: var(--cp-accent-soft); color: var(--cp-accent); } }
@keyframes fi-block-1 { 0%, 8% { opacity: 0; transform: translateY(8px); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes fi-block-2 { 0%, 32% { opacity: 0; transform: translateY(8px); } 38%, 100% { opacity: 1; transform: none; } }
@keyframes fi-block-3 { 0%, 58% { opacity: 0; transform: translateY(8px); } 64%, 100% { opacity: 1; transform: none; } }
@keyframes fi-mbar-1 { 0%, 38% { transform: scaleY(0); } 48%, 100% { transform: scaleY(1); } }
@keyframes fi-mbar-2 { 0%, 40% { transform: scaleY(0); } 50%, 100% { transform: scaleY(1); } }
@keyframes fi-mbar-3 { 0%, 42% { transform: scaleY(0); } 52%, 100% { transform: scaleY(1); } }
@keyframes fi-mbar-4 { 0%, 44% { transform: scaleY(0); } 54%, 100% { transform: scaleY(1); } }
@keyframes fi-mbar-5 { 0%, 46% { transform: scaleY(0); } 56%, 100% { transform: scaleY(1); } }
@keyframes fi-mbar-6 { 0%, 48% { transform: scaleY(0); } 58%, 100% { transform: scaleY(1); } }

/* 5. Charts on demand: tap a follow-up, bars draw, tap again, it becomes a donut */
.fi-chips { display: flex; gap: .3rem; overflow: hidden; }
.fi-chip { flex: none; padding: .3rem .55rem; border: 1px solid transparent; border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .58rem; font-weight: 800; white-space: nowrap; }
.fi-chip.is-ghost { opacity: .55; }
.fi-chip.is-a { background: var(--cp-accent); color: #fff; animation-name: fi-chip-a; }
.fi-chip.is-b { background: var(--cp-accent); color: #fff; animation-name: fi-chip-b; }
.fi-pointer-chart { left: 3.2rem; top: 1.1rem; bottom: auto; animation-name: fi-pointer-chart; }
.fi-hbars { position: absolute; left: .8rem; right: .8rem; top: 2.9rem; display: grid; gap: .45rem; opacity: 0; animation-name: fi-hbars; }
.fi-hbars > div { display: grid; grid-template-columns: 2.2rem 1fr 2.5rem; align-items: center; gap: .4rem; color: var(--cp-text-muted); font-size: .6rem; font-weight: 700; }
.fi-hbars i { height: .66rem; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #93c5fd, var(--fi-you)); transform-origin: left; }
.fi-hbars b { color: var(--cp-text); font-weight: 800; text-align: right; }
.fi-hbars .is-1 i { animation-name: fi-hbar-1; } .fi-hbars .is-2 i { animation-name: fi-hbar-2; } .fi-hbars .is-3 i { animation-name: fi-hbar-3; } .fi-hbars .is-4 i { animation-name: fi-hbar-4; }
.fi-donut-wrap { position: absolute; left: .8rem; right: .8rem; top: 2.9rem; display: grid; grid-template-columns: 5.4rem 1fr; gap: .9rem; align-items: center; animation-name: fi-donut-wrap; }
.fi-donut { display: block; width: 5.4rem; height: 5.4rem; transform: rotate(-90deg); }
.fi-donut circle { fill: none; stroke-width: 16; }
.fi-donut .is-track { stroke: color-mix(in srgb, var(--cp-text) 10%, transparent); }
.fi-donut .is-a { stroke: var(--cp-accent); stroke-dasharray: 141 999; animation-name: fi-donut-a; }
.fi-donut .is-b { stroke: var(--fi-gold); stroke-dasharray: 86 999; stroke-dashoffset: -141; animation-name: fi-donut-b; }
.fi-donut .is-c { stroke: var(--fi-teal); stroke-dasharray: 50 999; stroke-dashoffset: -227; animation-name: fi-donut-c; }
.fi-donut-legend { display: grid; gap: .35rem; color: var(--cp-text-muted); font-size: .62rem; font-weight: 700; }
.fi-donut-legend b { display: inline-block; width: .55rem; height: .55rem; margin-right: .3rem; border-radius: 50%; vertical-align: -1px; }
.fi-donut-legend .is-a { background: var(--cp-accent); } .fi-donut-legend .is-b { background: var(--fi-gold); } .fi-donut-legend .is-c { background: var(--fi-teal); }
@keyframes fi-chip-a { 0%, 12% { background: var(--cp-accent-soft); color: var(--cp-accent); transform: scale(1); } 14% { transform: scale(.92); } 17%, 100% { background: var(--cp-accent); color: #fff; transform: scale(1); } }
@keyframes fi-chip-b { 0%, 54% { background: var(--cp-accent-soft); color: var(--cp-accent); transform: scale(1); } 56% { transform: scale(.92); } 59%, 100% { background: var(--cp-accent); color: #fff; transform: scale(1); } }
@keyframes fi-pointer-chart { 0%, 3% { opacity: 0; transform: translate(4rem, 4rem); } 7% { opacity: 1; } 12% { transform: translate(0, 0); } 14% { transform: translate(0, 0) scale(.82); } 17%, 22% { opacity: 1; transform: translate(0, 0) scale(1); } 27%, 45% { opacity: 0; transform: translate(0, 0); } 49% { opacity: 1; transform: translate(6.1rem, 0); } 54% { transform: translate(6.1rem, 0); } 56% { transform: translate(6.1rem, 0) scale(.82); } 59%, 64% { opacity: 1; transform: translate(6.1rem, 0) scale(1); } 69%, 100% { opacity: 0; transform: translate(6.1rem, 0); } }
@keyframes fi-hbars { 0%, 15% { opacity: 0; } 19%, 54% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes fi-hbar-1 { 0%, 18% { transform: scaleX(0); } 32%, 100% { transform: scaleX(1); } }
@keyframes fi-hbar-2 { 0%, 21% { transform: scaleX(0); } 35%, 100% { transform: scaleX(1); } }
@keyframes fi-hbar-3 { 0%, 24% { transform: scaleX(0); } 38%, 100% { transform: scaleX(1); } }
@keyframes fi-hbar-4 { 0%, 27% { transform: scaleX(0); } 41%, 100% { transform: scaleX(1); } }
@keyframes fi-donut-wrap { 0%, 58% { opacity: 0; transform: scale(.94); } 63%, 100% { opacity: 1; transform: none; } }
@keyframes fi-donut-a { 0%, 60% { stroke-dasharray: 0 999; } 78%, 100% { stroke-dasharray: 141 999; } }
@keyframes fi-donut-b { 0%, 70% { stroke-dasharray: 0 999; } 86%, 100% { stroke-dasharray: 86 999; } }
@keyframes fi-donut-c { 0%, 78% { stroke-dasharray: 0 999; } 92%, 100% { stroke-dasharray: 50 999; } }

/* 6. Tables: rows fill, the leader glows, CSV in one tap */
.fi-tbl { border: 1px solid var(--cp-border); border-radius: .65rem; background: var(--cp-surface); overflow: hidden; }
.fi-tbl .fi-trow { grid-template-columns: 3.2rem 1fr 3.4rem; padding: .3rem .55rem; font-size: .6rem; }
.fi-tbl .fi-trow.is-head { background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .5rem; }
.fi-tbl .fi-trow.is-head i { font-size: .8rem; vertical-align: -.15rem; }
.fi-tbl .is-1 { animation-name: fi-row-8; } .fi-tbl .is-2 { animation-name: fi-row-14; } .fi-tbl .is-3 { animation-name: fi-row-20; } .fi-tbl .is-4 { animation-name: fi-row-26; }
.fi-tbl .is-lead { color: var(--fi-ok); animation-name: fi-lead; }
.fi-csv-btn { right: .8rem; bottom: .8rem; gap: .3rem; animation-name: fi-press-58; }
.fi-csv-btn i { font-size: .9rem; }
.fi-pointer-csv { left: auto; right: 2.2rem; bottom: 1.1rem; animation-name: fi-pointer-csv; }
@keyframes fi-row-8 { 0%, 8% { opacity: 0; transform: translateX(-8px); } 13%, 100% { opacity: 1; transform: none; } }
@keyframes fi-row-14 { 0%, 14% { opacity: 0; transform: translateX(-8px); } 19%, 100% { opacity: 1; transform: none; } }
@keyframes fi-row-20 { 0%, 20% { opacity: 0; transform: translateX(-8px); } 25%, 100% { opacity: 1; transform: none; } }
@keyframes fi-row-26 { 0%, 26% { opacity: 0; transform: translateX(-8px); } 31%, 100% { opacity: 1; transform: none; } }
@keyframes fi-lead { 0%, 34% { color: var(--cp-text); text-shadow: none; } 40%, 100% { color: var(--fi-ok); text-shadow: 0 0 10px color-mix(in srgb, #22c55e 45%, transparent); } }
@keyframes fi-pointer-csv { 0%, 40% { opacity: 0; transform: translate(-5rem, -4rem); } 46% { opacity: 1; } 56% { transform: translate(0, 0); } 59% { transform: translate(0, 0) scale(.82); } 62%, 66% { opacity: 1; transform: translate(0, 0) scale(1); } 70%, 100% { opacity: 0; transform: translate(0, 0); } }

/* 7. Smart Signals: the panel fills up */
.fi-sig-head { display: flex; align-items: center; gap: .45rem; }
.fi-sig-head > i { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: .5rem; background: var(--cp-accent); color: #fff; font-size: .95rem; }
.fi-sig-head > div { flex: 1; min-width: 0; }
.fi-sig-head b { display: block; color: var(--cp-text); font-size: .74rem; font-weight: 800; }
.fi-sig-head span { display: block; color: var(--cp-text-muted); font-size: .56rem; }
.fi-sig-head em { flex: none; display: inline-grid; padding: .18rem .48rem; border: 1px solid color-mix(in srgb, var(--cp-accent) 40%, var(--cp-border)); border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .54rem; font-weight: 800; font-style: normal; white-space: nowrap; }
.fi-sig-head em > span { display: inline-flex; align-items: center; gap: .2rem; }
.fi-sig-list { display: grid; gap: .28rem; margin-top: .4rem; }
.fi-sig-list .fi-sig { align-items: center; padding: .2rem .42rem; }
.fi-sig-list .fi-sig > i { width: 1.35rem; height: 1.35rem; font-size: .8rem; }
.fi-sig-list .fi-sig b { font-size: .62rem; }
.fi-sig-list .fi-sig span { display: block; font-size: .52rem; white-space: nowrap; text-overflow: ellipsis; }
.fi-sig { --fi-tone: var(--cp-accent); position: relative; display: flex; align-items: flex-start; gap: .35rem; min-width: 0; padding: .32rem .4rem; border: 1px solid var(--cp-border); border-left: 3px solid var(--fi-tone); border-radius: .55rem; background: var(--cp-surface); }
.fi-sig.tone-crit { --fi-tone: #dc2626; } .fi-sig.tone-hot { --fi-tone: #e11d48; } .fi-sig.tone-due { --fi-tone: #f59e0b; } .fi-sig.tone-conc { --fi-tone: #d97706; }
.fi-sig > i { flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: color-mix(in srgb, var(--fi-tone) 14%, var(--cp-surface)); color: var(--fi-tone); font-size: .75rem; }
.fi-sig > div { flex: 1; min-width: 0; }
.fi-sig b { display: block; color: var(--cp-text); font-size: .58rem; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-sig span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--cp-text-muted); font-size: .52rem; line-height: 1.25; }
.fi-sig.is-1 { animation-name: fi-sig-1; } .fi-sig.is-2 { animation-name: fi-sig-2; } .fi-sig.is-3 { animation-name: fi-sig-3; } .fi-sig.is-4 { animation-name: fi-sig-4; }
@keyframes fi-sig-1 { 0%, 8% { opacity: 0; transform: translateY(8px); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes fi-sig-2 { 0%, 16% { opacity: 0; transform: translateY(8px); } 22%, 100% { opacity: 1; transform: none; } }
@keyframes fi-sig-3 { 0%, 24% { opacity: 0; transform: translateY(8px); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes fi-sig-4 { 0%, 32% { opacity: 0; transform: translateY(8px); } 38%, 100% { opacity: 1; transform: none; } }

/* 8. Tap a signal: the diagnostics sheet */
.fi-tap { --t: 9s; }
.fi-sig.is-solo { align-items: center; padding: .42rem .5rem; animation-name: fi-sig-tap; }
.fi-sig.is-solo > i { width: 1.5rem; height: 1.5rem; font-size: .9rem; }
.fi-sig.is-solo b { font-size: .68rem; }
.fi-sig.is-solo span { display: block; font-size: .56rem; white-space: nowrap; text-overflow: ellipsis; }
.fi-sig.is-solo em { flex: none; margin-left: .2rem; padding: .16rem .42rem; border-radius: 999px; background: var(--fi-tone); color: #fff; font-size: .5rem; font-weight: 800; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.fi-pointer-tap { left: 6rem; top: 1.3rem; bottom: auto; animation-name: fi-pointer-tap; }
.fi-diag { position: absolute; left: .55rem; right: .55rem; bottom: 0; z-index: 2; padding: .5rem .6rem .6rem; border: 1px solid var(--cp-border); border-bottom: 0; border-radius: .9rem .9rem 0 0; background: var(--cp-surface); box-shadow: 0 -14px 30px -16px rgba(27, 19, 64, .55); animation-name: fi-diag; }
.fi-diag::before { content: ""; display: block; width: 2rem; height: .22rem; margin: -.1rem auto .35rem; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 22%, transparent); }
.fi-diag-head { display: flex; align-items: center; gap: .35rem; }
.fi-diag-head i { color: var(--cp-accent); font-size: 1rem; }
.fi-diag-head b { color: var(--cp-text); font-size: .68rem; font-weight: 800; }
.fi-diag-head em { margin-left: auto; color: var(--cp-accent); font-size: .5rem; font-weight: 800; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.fi-diag p { margin: .3rem 0 0; color: var(--cp-text-muted); font-size: .6rem; line-height: 1.35; }
.fi-diag p b { color: var(--cp-text); }
.fi-diag p.is-1 { animation-name: fi-fade-40; } .fi-diag p.is-2 { animation-name: fi-fade-48; }
.fi-steps { display: grid; gap: .22rem; margin-top: .38rem; }
.fi-steps span { display: flex; align-items: center; gap: .3rem; color: var(--cp-text); font-size: .58rem; font-weight: 800; }
.fi-steps i { color: var(--fi-ok); font-size: .9rem; }
.fi-steps .is-1 { animation-name: fi-fade-56; } .fi-steps .is-2 { animation-name: fi-fade-62; }
@keyframes fi-sig-tap { 0%, 20% { transform: scale(1); box-shadow: none; } 22% { transform: scale(.97); } 25%, 100% { transform: scale(1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fi-tone) 22%, transparent); } }
@keyframes fi-pointer-tap { 0%, 6% { opacity: 0; transform: translate(5rem, 5rem); } 11% { opacity: 1; } 20% { transform: translate(0, 0); } 22% { transform: translate(0, 0) scale(.82); } 25%, 30% { opacity: 1; transform: translate(0, 0) scale(1); } 36%, 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes fi-diag { 0%, 26% { transform: translateY(110%); } 34%, 95% { transform: none; } 100% { transform: translateY(110%); } }

/* 9. Export: tap the icon, pick a format, four files land */
.fi-ans-card { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; border: 1px solid var(--cp-border); border-radius: .75rem; background: var(--cp-surface); }
.fi-ans-card > div:first-child { flex: 1; min-width: 0; }
.fi-ans-card b { display: block; color: var(--cp-text); font-size: .7rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-ans-card span { display: block; color: var(--cp-text-muted); font-size: .56rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-tools { flex: none; display: flex; gap: .35rem; color: var(--cp-text-muted); font-size: .95rem; }
.fi-tools .is-hot { color: var(--cp-accent); animation-name: fi-hot; }
.fi-pointer-export { left: auto; right: 1rem; top: 1.65rem; bottom: auto; animation-name: fi-pointer-export; }
.fi-menu { position: absolute; right: .8rem; top: 3.1rem; z-index: 3; display: grid; gap: .15rem; padding: .3rem; border: 1px solid var(--cp-border); border-radius: .6rem; background: var(--cp-surface); box-shadow: 0 16px 32px -14px rgba(27, 19, 64, .5); transform-origin: top right; opacity: 0; animation-name: fi-menu; }
.fi-menu span { display: flex; align-items: center; gap: .3rem; padding: .22rem .5rem; border-radius: .4rem; color: var(--cp-text); font-size: .58rem; font-weight: 800; }
.fi-menu span i { color: var(--cp-accent); font-size: .85rem; }
.fi-menu .is-1 { animation-name: fi-menu-pick; }
.fi-files { position: absolute; left: .8rem; right: .8rem; bottom: 2.75rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.fi-file { --fi-file: var(--cp-accent); display: grid; justify-items: center; gap: .05rem; min-width: 0; padding: .38rem .2rem .32rem; border: 1px solid var(--cp-border); border-radius: .6rem; background: var(--cp-surface); }
.fi-file i { color: var(--fi-file); font-size: 1.2rem; }
.fi-file b { color: var(--cp-text); font-size: .58rem; font-weight: 800; }
.fi-file small { max-width: 100%; color: var(--cp-text-muted); font-size: .46rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-file.is-pdf { --fi-file: #dc2626; animation-name: fi-file-1; } .fi-file.is-xlsx { --fi-file: #16a34a; animation-name: fi-file-2; } .fi-file.is-png { --fi-file: #2563eb; animation-name: fi-file-3; } .fi-file.is-csv { --fi-file: #7c3aed; animation-name: fi-file-4; }
.fi-saved { left: 50%; bottom: .8rem; transform: translateX(-50%); opacity: 0; animation-name: fi-saved; }
@keyframes fi-hot { 0%, 22% { transform: scale(1); } 24% { transform: scale(.8); } 27%, 100% { transform: scale(1); } }
@keyframes fi-pointer-export { 0%, 8% { opacity: 0; transform: translate(-5rem, 5rem); } 13% { opacity: 1; } 22% { transform: translate(0, 0); } 24% { transform: translate(0, 0) scale(.82); } 27%, 30% { opacity: 1; transform: translate(0, 0) scale(1); } 35%, 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes fi-menu { 0%, 26% { opacity: 0; transform: scale(.8); } 31%, 54% { opacity: 1; transform: none; } 58%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes fi-menu-pick { 0%, 44% { background: transparent; } 48%, 100% { background: var(--cp-accent-soft); } }
@keyframes fi-file-1 { 0%, 56% { opacity: 0; transform: translate(9rem, -4rem) scale(.4); } 64%, 100% { opacity: 1; transform: none; } }
@keyframes fi-file-2 { 0%, 60% { opacity: 0; transform: translate(6rem, -4rem) scale(.4); } 68%, 100% { opacity: 1; transform: none; } }
@keyframes fi-file-3 { 0%, 64% { opacity: 0; transform: translate(2rem, -4rem) scale(.4); } 72%, 100% { opacity: 1; transform: none; } }
@keyframes fi-file-4 { 0%, 68% { opacity: 0; transform: translate(-2rem, -4rem) scale(.4); } 76%, 100% { opacity: 1; transform: none; } }
@keyframes fi-saved { 0%, 76% { opacity: 0; transform: translate(-50%, 6px); } 82%, 97% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }

/* 10. History everywhere: phone → web, then web → phone */
.fi-history { --t: 10s; }
.fi-phone { position: absolute; left: .8rem; top: .7rem; width: 6rem; height: 10.5rem; border: .22rem solid var(--hs-bezel); border-radius: 1rem; background: var(--cp-surface); box-shadow: 0 18px 34px -16px rgba(27, 19, 64, .55); overflow: hidden; }
.fi-phone::before { content: ""; position: absolute; top: .3rem; left: 50%; width: 1.6rem; height: .3rem; transform: translateX(-50%); border-radius: 999px; background: var(--hs-bezel); }
.fi-phone-bar { display: flex; align-items: center; gap: .2rem; margin: 1.05rem .4rem .1rem; color: var(--cp-accent); font-size: .5rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fi-hist { position: relative; margin: .3rem .4rem 0; padding: .3rem .38rem; border: 1px solid var(--cp-border); border-radius: .45rem; background: var(--cp-surface); }
.fi-hist b { display: block; color: var(--cp-text); font-size: .52rem; font-weight: 800; line-height: 1.2; }
.fi-hist span { display: block; margin-top: .1rem; color: var(--cp-text-muted); font-size: .46rem; }
.fi-hist em { display: inline-block; margin-top: .22rem; padding: .12rem .38rem; border-radius: 999px; background: var(--cp-accent); color: #fff; font-size: .46rem; font-weight: 800; font-style: normal; letter-spacing: .04em; text-transform: uppercase; animation-name: fi-continue; }
.fi-hist.is-w2 { border-color: var(--cp-accent); animation-name: fi-hist-w2; }
.fi-hist.is-p2 { border-color: var(--cp-accent); animation-name: fi-hist-p2; }
.fi-browser { position: absolute; right: .8rem; top: .7rem; width: 10.4rem; height: 8.3rem; border: 1px solid var(--cp-border); border-radius: .65rem; background: var(--cp-surface); box-shadow: 0 16px 30px -16px rgba(27, 19, 64, .5); overflow: hidden; }
.fi-browser::before { content: ""; display: block; height: .95rem; border-bottom: 1px solid var(--cp-border); background: radial-gradient(circle at .55rem 50%, #ef4444 .16rem, transparent .2rem), radial-gradient(circle at 1rem 50%, #f59e0b .16rem, transparent .2rem), radial-gradient(circle at 1.45rem 50%, #22c55e .16rem, transparent .2rem), color-mix(in srgb, var(--cp-text) 4%, var(--cp-surface)); }
.fi-browser-bar { display: flex; align-items: center; gap: .25rem; margin: .38rem .5rem 0; color: var(--cp-accent); font-size: .54rem; font-weight: 800; }
.fi-browser-bar em { margin-left: auto; color: var(--cp-text-muted); font-size: .46rem; font-weight: 700; font-style: normal; }
.fi-browser .fi-hist { margin: .3rem .5rem 0; }
.fi-packet-up { left: 4.6rem; top: 3.7rem; animation-name: fi-packet-up; }
.fi-packet-down { left: 11rem; top: 4.9rem; animation-name: fi-packet-down; }
@keyframes fi-packet-up { 0%, 8% { opacity: 0; transform: translate(0, 0) scale(.6); } 12% { opacity: 1; transform: translate(0, 0) scale(1); } 20% { transform: translate(3.6rem, -2rem) scale(1.05); } 28% { opacity: 1; transform: translate(7.2rem, -1.4rem) scale(.55); } 30%, 100% { opacity: 0; transform: translate(7.2rem, -1.4rem) scale(.4); } }
@keyframes fi-packet-down { 0%, 58% { opacity: 0; transform: translate(0, 0) scale(.6); } 62% { opacity: 1; transform: translate(0, 0) scale(1); } 70% { transform: translate(-4rem, 2.6rem) scale(1.05); } 78% { opacity: 1; transform: translate(-8.2rem, 3.4rem) scale(.55); } 80%, 100% { opacity: 0; transform: translate(-8.2rem, 3.4rem) scale(.4); } }
@keyframes fi-hist-w2 { 0%, 28% { opacity: 0; transform: translateX(10px); border-color: var(--cp-border); } 34%, 100% { opacity: 1; transform: none; border-color: var(--cp-accent); } }
@keyframes fi-hist-p2 { 0%, 78% { opacity: 0; transform: translateY(8px); } 84%, 100% { opacity: 1; transform: none; } }
@keyframes fi-continue { 0%, 40% { transform: scale(1); filter: none; } 43% { transform: scale(.9); filter: brightness(.85); } 46%, 100% { transform: scale(1); filter: none; } }

/* 11. Private by design: mask, shield, three checks */
.fi-secure { --t: 9s; }
.fi-vault-row { display: flex; align-items: center; gap: .5rem; padding: .42rem .55rem; border: 1px solid var(--cp-border); border-radius: .75rem; background: var(--cp-surface); animation-name: fi-vault-row; }
.fi-vault-row > i { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: .55rem; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .95rem; }
.fi-vault-row > div { flex: 1; min-width: 0; display: grid; }
.fi-vault-row b { color: var(--cp-text); font-size: .66rem; font-weight: 800; }
.fi-vault-row > div > span { color: var(--cp-text-muted); font-size: .56rem; }
.fi-vault-row .hr-swap { min-width: 0; max-width: 100%; }
.fi-vault-row .hr-swap > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-vault-row .hr-swap > span:last-child { color: var(--fi-ok); }
.fi-vault-row > strong { flex: none; color: var(--cp-text); font-size: .74rem; font-weight: 800; }
.fi-shield { position: absolute; left: 50%; top: 3.35rem; z-index: 2; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; transform: translateX(-50%); color: var(--fi-ok); font-size: 2.7rem; line-height: 1; filter: drop-shadow(0 10px 16px rgba(22, 163, 74, .35)); animation-name: fi-shield; }
.fi-shield > i { grid-area: 1 / 1; }
.fi-shield .is-lock { color: #fff; font-size: 1rem; margin-top: -.25rem; }
.fi-shield::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--fi-ok); border-radius: 50%; opacity: 0; animation-name: fi-ring; }
.fi-checks { position: absolute; left: .8rem; right: .8rem; bottom: .8rem; display: grid; gap: .28rem; }
.fi-checks > div { display: flex; align-items: center; gap: .35rem; padding: .28rem .45rem; border: 1px solid var(--cp-border); border-radius: .6rem; background: var(--cp-surface); color: var(--cp-text); font-size: .56rem; font-weight: 700; }
.fi-checks > div > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-checks i { flex: none; color: var(--fi-ok); font-size: .9rem; }
.fi-checks .is-1 { animation-name: fi-fade-50; } .fi-checks .is-2 { animation-name: fi-fade-58; } .fi-checks .is-3 { animation-name: fi-fade-66; }
@keyframes fi-vault-row { 0%, 36% { border-color: var(--cp-border); } 42%, 100% { border-color: var(--fi-ok); } }
@keyframes fi-shield { 0%, 30% { opacity: 0; transform: translateX(-50%) scale(0); } 38% { opacity: 1; transform: translateX(-50%) scale(1.15); } 42%, 100% { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes fi-ring { 0%, 40% { opacity: 0; transform: scale(.8); } 44% { opacity: .8; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(2.2); } }

/* 12. Self-healing grounding: pre-flight, retry, validated */
.fi-heal { --t: 9s; }
.fi-heal-row { display: flex; align-items: center; gap: .45rem; padding: .4rem .5rem; border: 1px solid var(--cp-border); border-radius: .7rem; background: var(--cp-surface); }
.fi-heal-row + .fi-heal-row { margin-top: .4rem; }
.fi-heal-row > i { flex: none; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: .5rem; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .95rem; }
.fi-heal-row > div { flex: 1; min-width: 0; }
.fi-heal-row b { display: block; color: var(--cp-text); font-size: .68rem; font-weight: 800; }
.fi-heal-row span { display: block; color: var(--cp-text-muted); font-size: .56rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-heal-row > em { flex: none; display: inline-flex; align-items: center; gap: .15rem; padding: .16rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); font-size: .56rem; font-weight: 800; font-style: normal; }
.fi-heal-row.is-1 > em { animation-name: fi-fade-10; }
.fi-heal-row.is-2 { border-color: var(--fi-ok); animation-name: fi-heal-row; }
.fi-heal-row > em.fi-heal-state { display: inline-grid; }
.fi-heal-state > span { display: inline-flex; align-items: center; gap: .15rem; }
.fi-meter { display: flex; align-items: center; gap: .45rem; margin-top: .5rem; color: var(--cp-text-muted); font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.fi-meter > i { flex: 1; height: .62rem; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 10%, transparent); overflow: hidden; }
.fi-meter b { display: block; width: 96%; height: 100%; border-radius: 999px; background: var(--fi-ok); animation-name: fi-meter; }
.fi-meter em { color: var(--cp-text); font-size: .64rem; font-style: normal; }
@keyframes fi-heal-row { 0%, 14% { border-color: var(--cp-border); } 20%, 46% { border-color: #f59e0b; box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 20%, transparent); } 52%, 100% { border-color: var(--fi-ok); box-shadow: none; } }
@keyframes fi-meter { 0%, 12% { width: 0; background: #f59e0b; } 22%, 44% { width: 41%; background: #f59e0b; } 54%, 100% { width: 96%; background: var(--fi-ok); } }

/* 13. Outliers: a scan sweeps the year, three rows get flagged */
.fi-outliers { --t: 9s; }
.fi-out { padding: .28rem .5rem; }
.fi-out + .fi-out { margin-top: .3rem; }
.fi-out > i { width: 1.5rem; height: 1.5rem; font-size: .85rem; }
.fi-out > strong { font-size: .68rem; }
.fi-out.is-1 { border-color: var(--fi-crit); animation-name: fi-out-1; } .fi-out.is-2 { border-color: var(--fi-crit); animation-name: fi-out-2; } .fi-out.is-3 { border-color: var(--fi-crit); animation-name: fi-out-3; }
.fi-flag { position: absolute; right: .45rem; top: -.5rem; z-index: 2; padding: .12rem .38rem; border-radius: 999px; background: var(--fi-crit); color: #fff; font-size: .5rem; font-weight: 800; font-style: normal; }
.fi-out.is-1 .fi-flag { animation-name: fi-flag-1; } .fi-out.is-2 .fi-flag { animation-name: fi-flag-2; } .fi-out.is-3 .fi-flag { animation-name: fi-flag-3; }
.fi-scan { position: absolute; left: .8rem; right: .8rem; top: .8rem; height: 2.1rem; border-radius: .7rem; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cp-accent) 26%, transparent), transparent); pointer-events: none; opacity: 0; animation-name: fi-scan; }
@keyframes fi-scan { 0%, 4% { top: .8rem; opacity: 0; } 8% { opacity: 1; } 40% { top: 8.4rem; opacity: 1; } 45%, 100% { top: 8.4rem; opacity: 0; } }
@keyframes fi-out-1 { 0%, 14% { border-color: var(--cp-border); } 18%, 100% { border-color: var(--fi-crit); } }
@keyframes fi-out-2 { 0%, 22% { border-color: var(--cp-border); } 26%, 100% { border-color: var(--fi-crit); } }
@keyframes fi-out-3 { 0%, 30% { border-color: var(--cp-border); } 34%, 100% { border-color: var(--fi-crit); } }
@keyframes fi-flag-1 { 0%, 16% { opacity: 0; transform: scale(.5); } 21%, 100% { opacity: 1; transform: none; } }
@keyframes fi-flag-2 { 0%, 24% { opacity: 0; transform: scale(.5); } 29%, 100% { opacity: 1; transform: none; } }
@keyframes fi-flag-3 { 0%, 32% { opacity: 0; transform: scale(.5); } 37%, 100% { opacity: 1; transform: none; } }

@media (max-width: 575.98px) {
    .fi-reel { --fs-card: 19.5rem; }
    .fi-packet-a, .fi-packet-b { left: 11rem; }
    .fi-browser { width: 8.4rem; }
    .fi-packet-down { left: 9.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fi-think, .fi-packet, .fi-pointer-chart, .fi-pointer-csv, .fi-pointer-tap, .fi-pointer-export, .fi-menu, .fi-scan, .fi-model, .fi-hbars, .fi-track::after { display: none; }
    .fi-diag { transform: none; }
    .fi-code-line { max-width: 100%; }
}


/* ===== Page stages under the reel (fi-stage): sources, pipeline strip, multi-modal answer, Smart Signals, exports,
   cross-device history, comparison, privacy vault. Each stage loops on its own --fi-t; container units (cqw) keep the
   layouts proportional from phones to desktops. ===== */
.fi-stage { container-type: inline-size; position: relative; isolation: isolate; width: 100%; --fi-t: 14s; }
.fi-stage * { animation-duration: var(--fi-t); animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.fi-stage .hs-float-c { animation-duration: 7s; }
.fi-pointer { position: absolute; z-index: 8; color: var(--cp-text); font-size: 4.2cqw; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); opacity: 0; pointer-events: none; }
.fi-band { 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))); }
.fi-band.is-trust { background: linear-gradient(135deg, color-mix(in srgb, #16a34a 7%, var(--cp-surface)), color-mix(in srgb, var(--cp-accent) 8%, var(--cp-surface))); }
.fi-band .hs-chips li { background: color-mix(in srgb, var(--cp-surface) 70%, transparent); }

/* A. Sources: five inputs wire into the reasoning core, one answer card cycles two questions */
.fi-sources { aspect-ratio: 10 / 8.6; max-width: 38rem; justify-self: end; --fi-t: 14s; }
.fi-wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; }
.fi-wires path { fill: none; stroke: color-mix(in srgb, var(--cp-accent) 55%, var(--cp-border)); stroke-width: .45; stroke-dasharray: 1.4 1.4; animation: fi-wire 1.1s linear infinite; }
.fi-wires path.is-out { stroke: var(--fi-ok); stroke-width: .6; }
.fi-dot { fill: var(--cp-accent); }
.fi-dot.is-partner { fill: var(--fi-partner); }
.fi-dot.is-out { fill: var(--fi-ok); }
@keyframes fi-wire { to { stroke-dashoffset: -2.8; } }
.fi-src { position: absolute; z-index: 2; left: 3%; width: 32%; transform: translateY(-50%); display: flex; align-items: center; gap: 1.4cqw; padding: 1.5cqw 1.8cqw; border: 1px solid var(--cp-border); border-radius: 2.2cqw; background: color-mix(in srgb, var(--cp-surface) 96%, transparent); box-shadow: 0 12px 26px -16px rgba(27, 19, 64, .5); }
.fi-src.is-1 { top: 12.8%; } .fi-src.is-2 { top: 31.4%; } .fi-src.is-3 { top: 50%; } .fi-src.is-4 { top: 68.6%; } .fi-src.is-5 { top: 87.2%; }
.fi-src > i { flex: none; display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; border-radius: 1.6cqw; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 3cqw; }
.fi-src .fi-av { width: 5.6cqw; height: 5.6cqw; }
.fi-src > div { min-width: 0; }
.fi-src b { display: block; color: var(--cp-text); font-size: clamp(.5rem, 2cqw, .74rem); font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-src span { display: block; margin-top: .3cqw; color: var(--cp-text-muted); font-size: clamp(.44rem, 1.75cqw, .64rem); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-src.is-partner { border-color: color-mix(in srgb, var(--fi-partner) 55%, var(--cp-border)); }
.fi-src.is-partner span { display: flex; flex-wrap: wrap; gap: .6cqw; white-space: normal; }
.fi-src.is-partner em { display: inline-flex; align-items: center; gap: .3cqw; padding: .3cqw 1cqw; border-radius: 999px; font-size: clamp(.42rem, 1.55cqw, .58rem); font-weight: 800; font-style: normal; white-space: nowrap; }
.fi-src.is-partner em.is-on { background: color-mix(in srgb, #22c55e 16%, var(--cp-surface)); color: var(--fi-ok); }
.fi-src.is-partner em.is-off { background: color-mix(in srgb, var(--cp-text) 10%, transparent); color: var(--cp-text-muted); }
.fi-core { position: absolute; z-index: 3; left: 50%; top: 50%; width: 16cqw; height: 16cqw; transform: translate(-50%, -50%); display: grid; place-content: center; justify-items: center; gap: .3cqw; border-radius: 50%; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cp-accent) 80%, #fff), var(--cp-accent) 72%); color: #fff; text-align: center; box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--cp-accent) 80%, transparent), 0 0 0 1.4cqw color-mix(in srgb, var(--cp-accent) 14%, transparent); animation: fi-core 3.2s ease-in-out infinite; }
.fi-core > .bx { font-size: 4.6cqw; line-height: 1; }
.fi-core b { font-size: clamp(.42rem, 1.7cqw, .62rem); font-weight: 800; letter-spacing: .01em; line-height: 1.1; }
.fi-core small { font-size: clamp(.36rem, 1.4cqw, .54rem); opacity: .85; }
.fi-core-ring { position: absolute; inset: -2.4cqw; border: .35cqw dashed color-mix(in srgb, var(--cp-accent) 60%, transparent); border-radius: 50%; animation: fi-ring-spin 16s linear infinite; }
@keyframes fi-core { 0%, 100% { box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--cp-accent) 80%, transparent), 0 0 0 1.4cqw color-mix(in srgb, var(--cp-accent) 14%, transparent); } 50% { box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--cp-accent) 80%, transparent), 0 0 0 2.6cqw color-mix(in srgb, var(--cp-accent) 10%, transparent); } }
@keyframes fi-ring-spin { to { transform: rotate(360deg); } }
.fi-scope-pill { position: absolute; z-index: 4; left: 34.5%; top: 33.5%; display: inline-flex; align-items: center; gap: .6cqw; padding: .8cqw 1.5cqw; border: 1px solid var(--cp-accent); border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: clamp(.4rem, 1.5cqw, .58rem); font-weight: 800; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(27, 19, 64, .4); }
.fi-out-card { position: absolute; z-index: 3; right: 1.5%; top: 50%; width: 36.5%; transform: translateY(-50%); display: grid; grid-template-rows: auto auto; padding: 2cqw 2.2cqw; border: 1px solid var(--cp-border); border-radius: 2.4cqw; background: color-mix(in srgb, var(--cp-surface) 96%, transparent); box-shadow: 0 20px 44px -18px rgba(27, 19, 64, .5); }
.fi-out-q { display: grid; grid-row: 1; min-height: 6.4cqw; color: var(--cp-accent); font-size: clamp(.46rem, 1.85cqw, .68rem); font-weight: 800; line-height: 1.3; }
.fi-out-q > span { grid-area: 1 / 1; }
.fi-out-q .is-a { animation-name: fi-out-qa; } .fi-out-q .is-b { animation-name: fi-out-qb; }
.fi-out-a { grid-row: 2; grid-column: 1; margin-top: 1.2cqw; }
.fi-out-a > b { display: block; color: var(--cp-text); font-size: clamp(.62rem, 2.6cqw, .95rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.fi-out-bars { display: grid; gap: 1cqw; margin-top: 1.4cqw; }
.fi-out-bars > div { display: grid; grid-template-columns: 5.5cqw 1fr auto; align-items: center; gap: 1cqw; color: var(--cp-text-muted); font-size: clamp(.42rem, 1.65cqw, .62rem); font-weight: 700; }
.fi-out-bars i { display: block; height: 1.7cqw; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #93c5fd, var(--fi-you)); transform-origin: left; }
.fi-out-bars i.is-partner { background: linear-gradient(90deg, #fcd34d, var(--fi-partner)); }
.fi-out-bars b { color: var(--cp-text); font-weight: 800; }
.fi-out-a small { display: flex; align-items: center; gap: .6cqw; margin-top: 1.4cqw; color: var(--cp-text-muted); font-size: clamp(.4rem, 1.5cqw, .56rem); font-weight: 700; }
.fi-out-a small i { color: var(--fi-ok); font-size: 1.2em; }
.fi-out-a.is-a { animation-name: fi-out-aa; } .fi-out-a.is-b { animation-name: fi-out-ab; }
.fi-out-a.is-a .fi-out-bars i { animation-name: fi-out-bar-a; } .fi-out-a.is-b .fi-out-bars i { animation-name: fi-out-bar-b; }
@keyframes fi-out-qa { 0%, 46% { opacity: 1; } 50%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fi-out-qb { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fi-out-aa { 0%, 4% { opacity: 0; transform: translateY(6px); } 9%, 46% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes fi-out-ab { 0%, 51% { opacity: 0; transform: translateY(6px); } 56%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes fi-out-bar-a { 0%, 9% { transform: scaleX(0); } 22%, 100% { transform: scaleX(1); } }
@keyframes fi-out-bar-b { 0%, 56% { transform: scaleX(0); } 69%, 100% { transform: scaleX(1); } }

/* B. Pipeline strip: five steps light up in turn under a progress bar */
.fi-pipeline-section { --fi-t: 15s; }
.fi-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; counter-reset: fi-step; }
.fi-strip li { position: relative; padding: 1.15rem 1.1rem 1.1rem; border: 1px solid var(--cp-border); border-radius: 1.2rem; background: linear-gradient(180deg, color-mix(in srgb, var(--cp-accent) 5%, var(--cp-surface)), var(--cp-surface)); animation: fi-step-1 var(--fi-t) ease-in-out infinite both; }
.fi-strip li::before { counter-increment: fi-step; content: "0" counter(fi-step); position: absolute; top: .9rem; right: 1rem; color: var(--cp-text-muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; }
.fi-strip li > i { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .75rem; border-radius: .85rem; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 1.35rem; animation: fi-step-icon-1 var(--fi-t) ease-in-out infinite both; }
.fi-strip b { display: block; color: var(--cp-text); font-size: 1rem; font-weight: 800; }
.fi-strip span { display: block; margin-top: .3rem; color: var(--cp-text-muted); font-size: .84rem; line-height: 1.45; }
.fi-strip .is-2 { animation-name: fi-step-2; } .fi-strip .is-3 { animation-name: fi-step-3; } .fi-strip .is-4 { animation-name: fi-step-4; } .fi-strip .is-5 { animation-name: fi-step-5; }
.fi-strip .is-2 > i { animation-name: fi-step-icon-2; } .fi-strip .is-3 > i { animation-name: fi-step-icon-3; } .fi-strip .is-4 > i { animation-name: fi-step-icon-4; } .fi-strip .is-5 > i { animation-name: fi-step-icon-5; }
.fi-strip-bar { height: .45rem; margin: 1rem 0 0; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); overflow: hidden; }
.fi-strip-bar i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cp-accent), #22c55e); transform-origin: left; animation: fi-strip-bar var(--fi-t) linear infinite; }
.fi-strip-chips { justify-content: center; margin-top: 1.5rem; }
@keyframes fi-step-1 { 0%, 18% { border-color: var(--cp-accent); box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--cp-accent) 70%, transparent); transform: translateY(-3px); } 21%, 100% { border-color: var(--cp-border); box-shadow: none; transform: none; } }
@keyframes fi-step-2 { 0%, 19% { border-color: var(--cp-border); box-shadow: none; transform: none; } 22%, 38% { border-color: var(--cp-accent); box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--cp-accent) 70%, transparent); transform: translateY(-3px); } 41%, 100% { border-color: var(--cp-border); box-shadow: none; transform: none; } }
@keyframes fi-step-3 { 0%, 39% { border-color: var(--cp-border); box-shadow: none; transform: none; } 42%, 58% { border-color: var(--cp-accent); box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--cp-accent) 70%, transparent); transform: translateY(-3px); } 61%, 100% { border-color: var(--cp-border); box-shadow: none; transform: none; } }
@keyframes fi-step-4 { 0%, 59% { border-color: var(--cp-border); box-shadow: none; transform: none; } 62%, 78% { border-color: var(--cp-accent); box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--cp-accent) 70%, transparent); transform: translateY(-3px); } 81%, 100% { border-color: var(--cp-border); box-shadow: none; transform: none; } }
@keyframes fi-step-5 { 0%, 79% { border-color: var(--cp-border); box-shadow: none; transform: none; } 82%, 98% { border-color: var(--fi-ok); box-shadow: 0 18px 36px -20px color-mix(in srgb, #22c55e 70%, transparent); transform: translateY(-3px); } 100% { border-color: var(--cp-border); box-shadow: none; transform: none; } }
@keyframes fi-step-icon-1 { 0%, 18% { background: var(--cp-accent); color: #fff; } 21%, 100% { background: var(--cp-accent-soft); color: var(--cp-accent); } }
@keyframes fi-step-icon-2 { 0%, 19% { background: var(--cp-accent-soft); color: var(--cp-accent); } 22%, 38% { background: var(--cp-accent); color: #fff; } 41%, 100% { background: var(--cp-accent-soft); color: var(--cp-accent); } }
@keyframes fi-step-icon-3 { 0%, 39% { background: var(--cp-accent-soft); color: var(--cp-accent); } 42%, 58% { background: var(--cp-accent); color: #fff; } 61%, 100% { background: var(--cp-accent-soft); color: var(--cp-accent); } }
@keyframes fi-step-icon-4 { 0%, 59% { background: var(--cp-accent-soft); color: var(--cp-accent); } 62%, 78% { background: var(--cp-accent); color: #fff; } 81%, 100% { background: var(--cp-accent-soft); color: var(--cp-accent); } }
@keyframes fi-step-icon-5 { 0%, 79% { background: var(--cp-accent-soft); color: var(--cp-accent); } 82%, 98% { background: var(--fi-ok); color: #fff; } 100% { background: var(--cp-accent-soft); color: var(--cp-accent); } }
@keyframes fi-strip-bar { 0% { transform: scaleX(0); opacity: 1; } 97% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* C. Multi-modal answer: a browser composes text, chart, table, and follow-ups; a phone shows the same on mobile */
.fi-answer-stage { aspect-ratio: 10 / 8.8; max-width: 38rem; justify-self: start; --fi-t: 16s; }
.fi-web { position: absolute; left: 0; top: 0; z-index: 1; width: 74%; height: 88%; border: 1px solid var(--cp-border); border-radius: 2cqw; background: var(--cp-surface); box-shadow: var(--hs-shadow); overflow: hidden; }
.fi-web-bar { display: flex; align-items: center; gap: .9cqw; height: 4.4cqw; padding: 0 2cqw; border-bottom: 1px solid var(--cp-border); background: color-mix(in srgb, var(--cp-text) 4%, var(--cp-surface)); }
.fi-web-bar span { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #ef4444; }
.fi-web-bar span:nth-child(2) { background: #f59e0b; } .fi-web-bar span:nth-child(3) { background: #22c55e; }
.fi-web-bar b { margin-left: 1.2cqw; padding: .5cqw 1.6cqw; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 6%, transparent); color: var(--cp-text-muted); font-size: clamp(.4rem, 1.5cqw, .58rem); font-weight: 700; }
.fi-web-body { padding: 2cqw 2.2cqw; }
.fi-q { display: flex; justify-content: flex-end; align-items: center; gap: 1.2cqw; animation-name: fi-web-q; }
.fi-q > span:first-child { max-width: 78%; padding: 1.4cqw 2cqw; border-radius: 2.2cqw 2.2cqw .6cqw 2.2cqw; background: var(--cp-accent-soft); color: var(--cp-text); font-size: clamp(.46rem, 1.8cqw, .68rem); font-weight: 700; line-height: 1.35; }
.fi-q .fi-av { width: 4.2cqw; height: 4.2cqw; }
.fi-a { margin-top: 1.8cqw; }
.fi-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; animation-name: fi-web-a1; }
.fi-a-head em { margin-left: auto; color: var(--cp-text-muted); font-style: normal; font-weight: 700; letter-spacing: 0; text-transform: none; }
.fi-a-text { margin: 1cqw 0 0; color: var(--cp-text-muted); font-size: clamp(.44rem, 1.65cqw, .62rem); line-height: 1.45; animation-name: fi-web-a1; }
.fi-a-text b { color: var(--cp-text); }
.fi-a-chart { margin-top: 1.5cqw; padding: 1.3cqw 1.8cqw; border: 1px solid var(--cp-border); border-radius: 1.6cqw; background: color-mix(in srgb, var(--cp-text) 2%, var(--cp-surface)); animation-name: fi-web-a2; }
.fi-a-chart small { display: block; margin-bottom: .9cqw; color: var(--cp-text); font-size: clamp(.4rem, 1.5cqw, .58rem); font-weight: 800; }
.fi-a-bars { display: grid; gap: .6cqw; }
.fi-a-bars > div { display: grid; grid-template-columns: 13.5cqw 1fr 7cqw; align-items: center; gap: 1cqw; color: var(--cp-text-muted); font-size: clamp(.38rem, 1.4cqw, .54rem); font-weight: 700; }
.fi-a-bars > div > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.fi-a-bars i { display: block; height: 1.7cqw; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #a5b4fc, var(--cp-accent)); transform-origin: left; animation-name: fi-web-bar; }
.fi-a-bars .is-2 i { animation-delay: .15s; } .fi-a-bars .is-3 i { animation-delay: .3s; } .fi-a-bars .is-4 i { animation-delay: .45s; } .fi-a-bars .is-5 i { animation-delay: .6s; } .fi-a-bars .is-6 i { animation-delay: .75s; }
.fi-a-bars b { color: var(--cp-text); font-weight: 800; text-align: right; }
.fi-a-table { margin-top: 1.5cqw; border: 1px solid var(--cp-border); border-radius: 1.4cqw; overflow: hidden; animation-name: fi-web-a3; }
.fi-a-row { display: grid; grid-template-columns: 7cqw 1.4fr 1fr 9cqw; gap: 1cqw; padding: .75cqw 1.6cqw; border-top: 1px solid var(--cp-border); color: var(--cp-text); font-size: clamp(.38rem, 1.4cqw, .54rem); font-weight: 600; }
.fi-a-row > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-a-row > span:last-child { text-align: right; font-weight: 800; }
.fi-a-row.is-head { border-top: 0; background: var(--cp-accent); color: #fff; font-weight: 800; }
.fi-a-row.is-1 { animation-name: fi-web-row-1; } .fi-a-row.is-2 { animation-name: fi-web-row-2; } .fi-a-row.is-3 { animation-name: fi-web-row-3; } .fi-a-row.is-4 { animation-name: fi-web-row-4; }
.fi-a-chips { display: flex; flex-wrap: wrap; gap: .8cqw; margin-top: 1.5cqw; animation-name: fi-web-a4; }
.fi-a-chips span { padding: .8cqw 1.6cqw; border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: clamp(.38rem, 1.4cqw, .54rem); font-weight: 800; white-space: nowrap; }
.fi-a-chips .is-hot { background: var(--cp-accent); color: #fff; animation-name: fi-web-chip-hot; }
.fi-a-tools { display: flex; align-items: center; gap: 1.6cqw; margin-top: 1.4cqw; color: var(--cp-text-muted); font-size: clamp(.5rem, 2.2cqw, .85rem); }
.fi-answer-stage .fi-a-tools { animation-name: fi-web-a5; }
.fi-a-tools em { margin-left: auto; color: var(--cp-accent); font-size: clamp(.38rem, 1.4cqw, .54rem); font-weight: 800; font-style: normal; white-space: nowrap; }
.fi-a-tools .is-hot { color: var(--cp-accent); }
.fi-answer-phone { --w: 28cqw; position: absolute; right: 0; bottom: 0; z-index: 3; }
.fi-answer-pill-1 { left: 3%; bottom: 3%; }
.fi-answer-pill-2 { right: 1%; top: 26%; }
@keyframes fi-web-q { 0%, 2% { opacity: 0; transform: translateY(6px); } 6%, 100% { opacity: 1; transform: none; } }
@keyframes fi-web-a1 { 0%, 10% { opacity: 0; transform: translateY(6px); } 15%, 100% { opacity: 1; transform: none; } }
@keyframes fi-web-a2 { 0%, 24% { opacity: 0; transform: translateY(6px); } 29%, 100% { opacity: 1; transform: none; } }
@keyframes fi-web-bar { 0%, 30% { transform: scaleX(0); } 42%, 100% { transform: scaleX(1); } }
@keyframes fi-web-a3 { 0%, 44% { opacity: 0; transform: translateY(6px); } 49%, 100% { opacity: 1; transform: none; } }
@keyframes fi-web-row-1 { 0%, 50% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes fi-web-row-2 { 0%, 53% { opacity: 0; } 57%, 100% { opacity: 1; } }
@keyframes fi-web-row-3 { 0%, 56% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes fi-web-row-4 { 0%, 59% { opacity: 0; } 63%, 100% { opacity: 1; } }
@keyframes fi-web-a4 { 0%, 66% { opacity: 0; transform: translateY(6px); } 70%, 100% { opacity: 1; transform: none; } }
@keyframes fi-web-a5 { 0%, 72% { opacity: 0; transform: translateY(6px); } 76%, 100% { opacity: 1; transform: none; } }
@keyframes fi-web-chip-hot { 0%, 80% { transform: scale(1); filter: none; } 82% { transform: scale(.92); filter: brightness(.85); } 85%, 100% { transform: scale(1); filter: none; } }

/* D. Smart Signals: the panel fills, a card is tapped, the diagnostics sheet rises */
.fi-signals-stage { aspect-ratio: 10 / 9; max-width: 38rem; justify-self: end; --fi-t: 16s; }
.fi-panel { position: absolute; left: 0; top: 0; z-index: 1; width: 72%; height: 92%; border: 1px solid var(--cp-border); border-radius: 2.2cqw; background: var(--cp-surface); box-shadow: var(--hs-shadow); overflow: hidden; }
.fi-panel-head { display: flex; align-items: center; gap: 1.4cqw; padding: 1.8cqw 2.2cqw; border-bottom: 1px solid var(--cp-border); background: color-mix(in srgb, var(--cp-accent) 5%, var(--cp-surface)); }
.fi-panel-head > i { display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 1.4cqw; background: var(--cp-accent); color: #fff; font-size: 2.8cqw; }
.fi-panel-head > div { flex: 1; min-width: 0; }
.fi-panel-head b { display: block; color: var(--cp-text); font-size: clamp(.52rem, 2.1cqw, .8rem); font-weight: 800; }
.fi-panel-head span { display: block; color: var(--cp-text-muted); font-size: clamp(.42rem, 1.55cqw, .6rem); }
.fi-panel-head em { display: inline-flex; align-items: center; gap: .5cqw; padding: .7cqw 1.6cqw; border: 1px solid color-mix(in srgb, var(--cp-accent) 40%, var(--cp-border)); border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: clamp(.4rem, 1.5cqw, .58rem); font-weight: 800; font-style: normal; white-space: nowrap; }
.fi-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; padding: 1.8cqw 2.2cqw 0; }
.fi-sigcard { --fi-tone: var(--cp-accent); display: flex; align-items: flex-start; gap: 1.2cqw; min-width: 0; padding: 1.3cqw 1.5cqw; border: 1px solid var(--cp-border); border-left: .55cqw solid var(--fi-tone); border-radius: 1.4cqw; background: var(--cp-surface); box-shadow: 0 8px 18px -14px rgba(27, 19, 64, .4); }
.fi-sigcard.tone-crit { --fi-tone: #dc2626; } .fi-sigcard.tone-hot { --fi-tone: #e11d48; } .fi-sigcard.tone-due { --fi-tone: #f59e0b; } .fi-sigcard.tone-conc { --fi-tone: #d97706; } .fi-sigcard.tone-lapse { --fi-tone: #7c3aed; } .fi-sigcard.tone-good { --fi-tone: #16a34a; }
.fi-sigcard > i { flex: none; display: grid; place-items: center; width: 4cqw; height: 4cqw; border-radius: 50%; background: color-mix(in srgb, var(--fi-tone) 14%, var(--cp-surface)); color: var(--fi-tone); font-size: 2.2cqw; }
.fi-sigcard > div { flex: 1; min-width: 0; }
.fi-sigcard b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--cp-text); font-size: clamp(.44rem, 1.7cqw, .64rem); font-weight: 800; line-height: 1.25; }
.fi-sigcard span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .3cqw; color: var(--cp-text-muted); font-size: clamp(.38rem, 1.4cqw, .54rem); line-height: 1.3; }
.fi-sigcard small { display: inline-block; max-width: 100%; margin-top: .6cqw; padding: .3cqw 1cqw; border-radius: .6cqw; background: color-mix(in srgb, var(--cp-text) 6%, transparent); color: var(--cp-text-muted); font-size: clamp(.36rem, 1.3cqw, .5rem); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-sigcard.is-1 { animation-name: fi-sigcard-tap; } .fi-sigcard.is-2 { animation-name: fi-sigcard-2; } .fi-sigcard.is-3 { animation-name: fi-sigcard-3; } .fi-sigcard.is-4 { animation-name: fi-sigcard-4; } .fi-sigcard.is-5 { animation-name: fi-sigcard-5; } .fi-sigcard.is-6 { animation-name: fi-sigcard-6; }
.fi-panel-more { padding: 1.4cqw 2.2cqw 1.8cqw; color: var(--cp-accent); font-size: clamp(.42rem, 1.55cqw, .6rem); font-weight: 800; }
.fi-pointer-signal { left: 22%; top: 21%; animation-name: fi-pointer-signal; }
.fi-drawer { position: absolute; left: 3%; right: 3%; bottom: 0; z-index: 5; padding: 1.6cqw 2.4cqw 2.2cqw; border: 1px solid var(--cp-border); border-bottom: 0; border-radius: 2.4cqw 2.4cqw 0 0; background: var(--cp-surface); box-shadow: 0 -20px 44px -20px rgba(27, 19, 64, .55); animation-name: fi-drawer; }
.fi-drawer::before { content: ""; display: block; width: 8cqw; height: .7cqw; margin: 0 auto 1.4cqw; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 22%, transparent); }
.fi-drawer-head { display: flex; align-items: center; gap: 1.2cqw; }
.fi-drawer-head > i { flex: none; display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 1.2cqw; background: #dc2626; color: #fff; font-size: 2.6cqw; }
.fi-drawer-head > div { flex: 1; min-width: 0; }
.fi-drawer-head b { display: block; color: var(--cp-text); font-size: clamp(.52rem, 2cqw, .78rem); font-weight: 800; }
.fi-drawer-head span { display: block; color: var(--cp-text-muted); font-size: clamp(.4rem, 1.5cqw, .58rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-drawer-head em { flex: none; padding: .6cqw 1.4cqw; border-radius: 999px; background: #dc2626; color: #fff; font-size: clamp(.36rem, 1.35cqw, .52rem); font-weight: 800; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.fi-drawer h4 { display: flex; align-items: center; margin: 1.8cqw 0 .5cqw; color: var(--cp-text); font-size: clamp(.42rem, 1.6cqw, .62rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fi-drawer h4 em { margin-left: auto; color: var(--cp-accent); font-size: clamp(.38rem, 1.4cqw, .54rem); font-style: normal; }
.fi-drawer p { margin: 0; color: var(--cp-text-muted); font-size: clamp(.42rem, 1.55cqw, .6rem); line-height: 1.4; }
.fi-drawer p b { color: var(--cp-text); }
.fi-drawer p.is-diag { animation-name: fi-fade-52p; }
.fi-drawer-steps { display: grid; gap: .7cqw; margin: 1.4cqw 0 0; padding: 0; list-style: none; }
.fi-drawer-steps li { display: flex; align-items: center; gap: .8cqw; color: var(--cp-text); font-size: clamp(.42rem, 1.55cqw, .6rem); font-weight: 800; }
.fi-drawer-steps li i { color: var(--fi-ok); font-size: 1.3em; }
.fi-drawer-steps .is-1 { animation-name: fi-fade-62p; } .fi-drawer-steps .is-2 { animation-name: fi-fade-66p; } .fi-drawer-steps .is-3 { animation-name: fi-fade-70p; }
.fi-signals-phone { --w: 28cqw; position: absolute; right: 0; bottom: 0; z-index: 4; }
.fi-signals-pill { right: 0; top: 3%; z-index: 7; }
@keyframes fi-sigcard-tap { 0%, 2% { opacity: 0; transform: translateY(8px); box-shadow: none; } 6%, 28% { opacity: 1; transform: none; box-shadow: 0 8px 18px -14px rgba(27, 19, 64, .4); } 30% { transform: scale(.97); } 33%, 100% { opacity: 1; transform: none; box-shadow: 0 0 0 .7cqw color-mix(in srgb, var(--fi-tone) 22%, transparent); } }
@keyframes fi-sigcard-2 { 0%, 4% { opacity: 0; transform: translateY(8px); } 8%, 100% { opacity: 1; transform: none; } }
@keyframes fi-sigcard-3 { 0%, 6% { opacity: 0; transform: translateY(8px); } 10%, 100% { opacity: 1; transform: none; } }
@keyframes fi-sigcard-4 { 0%, 8% { opacity: 0; transform: translateY(8px); } 12%, 100% { opacity: 1; transform: none; } }
@keyframes fi-sigcard-5 { 0%, 10% { opacity: 0; transform: translateY(8px); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes fi-sigcard-6 { 0%, 12% { opacity: 0; transform: translateY(8px); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes fi-pointer-signal { 0%, 18% { opacity: 0; transform: translate(30cqw, 40cqw); } 22% { opacity: 1; } 28% { transform: translate(0, 0); } 30% { transform: translate(0, 0) scale(.82); } 33%, 36% { opacity: 1; transform: translate(0, 0) scale(1); } 40%, 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes fi-drawer { 0%, 32% { transform: translateY(110%); } 39%, 94% { transform: none; } 100% { transform: translateY(110%); } }
@keyframes fi-fade-52p { 0%, 48% { opacity: 0; transform: translateY(6px); } 54%, 100% { opacity: 1; transform: none; } }
@keyframes fi-fade-62p { 0%, 60% { opacity: 0; transform: translateX(-6px); } 65%, 100% { opacity: 1; transform: none; } }
@keyframes fi-fade-66p { 0%, 64% { opacity: 0; transform: translateX(-6px); } 69%, 100% { opacity: 1; transform: none; } }
@keyframes fi-fade-70p { 0%, 68% { opacity: 0; transform: translateX(-6px); } 73%, 100% { opacity: 1; transform: none; } }

/* E. Exports: tap, pick a format, four documents fan out around the answer */
.fi-export-stage { aspect-ratio: 10 / 8; max-width: 38rem; justify-self: end; --fi-t: 12s; }
.fi-doc { --fi-file: var(--cp-accent); position: absolute; z-index: 1; width: 31%; padding: 1cqw; border: 1px solid var(--cp-border); border-radius: 1.4cqw; background: #fff; box-shadow: 0 18px 40px -18px rgba(27, 19, 64, .5); overflow: hidden; }
.fi-doc img { display: block; width: 100%; height: auto; border-radius: .8cqw; }
.fi-doc pre { margin: 0; max-height: 19cqw; overflow: hidden; color: #1f2937; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(.3rem, 1.15cqw, .46rem); line-height: 1.5; white-space: pre; }
.fi-doc b { position: absolute; left: 1.2cqw; bottom: 1.2cqw; display: inline-flex; align-items: center; gap: .5cqw; padding: .6cqw 1.3cqw; border-radius: 999px; background: var(--fi-file); color: #fff; font-size: clamp(.38rem, 1.4cqw, .56rem); font-weight: 800; }
.fi-doc.is-pdf { --fi-file: #dc2626; left: 1%; top: 3%; transform: rotate(-6deg); animation-name: fi-doc-1; }
.fi-doc.is-xlsx { --fi-file: #16a34a; right: 1%; top: 3%; transform: rotate(6deg); animation-name: fi-doc-2; }
.fi-doc.is-png { --fi-file: #2563eb; left: 3%; bottom: 3%; transform: rotate(5deg); animation-name: fi-doc-3; }
.fi-doc.is-csv { --fi-file: #7c3aed; right: 3%; bottom: 3%; transform: rotate(-5deg); animation-name: fi-doc-4; }
.fi-export-card { position: absolute; z-index: 3; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%); padding: 2cqw 2.2cqw; border: 1px solid var(--cp-border); border-radius: 2.2cqw; background: var(--cp-surface); box-shadow: 0 24px 50px -20px rgba(27, 19, 64, .55); }
.fi-export-head { display: flex; align-items: center; gap: 1.2cqw; }
.fi-export-head .fi-av { width: 4.4cqw; height: 4.4cqw; }
.fi-export-head > div { min-width: 0; }
.fi-export-head b { display: block; color: var(--cp-text); font-size: clamp(.48rem, 1.85cqw, .7rem); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-export-head span { display: block; color: var(--cp-text-muted); font-size: clamp(.4rem, 1.5cqw, .56rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-export-mini { display: grid; gap: .7cqw; margin-top: 1.6cqw; }
.fi-export-mini i { display: block; height: 1.6cqw; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #a5b4fc, var(--cp-accent)); }
.fi-export-lines { display: grid; gap: .7cqw; margin-top: 1.4cqw; }
.fi-export-lines i { display: block; height: 1.2cqw; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 10%, transparent); }
.fi-export-lines i.is-short { width: 55%; }
.fi-export-card .fi-a-tools { margin-top: 1.6cqw; }
.fi-export-card .fi-a-tools .is-hot { animation-name: fi-export-hot; }
.fi-export-menu { position: absolute; right: 2cqw; bottom: 6.5cqw; z-index: 4; display: grid; gap: .3cqw; padding: .8cqw; border: 1px solid var(--cp-border); border-radius: 1.2cqw; background: var(--cp-surface); box-shadow: 0 16px 32px -14px rgba(27, 19, 64, .5); transform-origin: bottom right; opacity: 0; animation-name: fi-export-menu; }
.fi-export-menu span { display: flex; align-items: center; gap: .8cqw; padding: .7cqw 1.4cqw; border-radius: .8cqw; color: var(--cp-text); font-size: clamp(.4rem, 1.5cqw, .58rem); font-weight: 800; white-space: nowrap; }
.fi-export-menu span i { color: var(--cp-accent); font-size: 1.2em; }
.fi-export-menu .is-1 { animation-name: fi-export-pick; }
.fi-pointer-export { left: 66%; top: 60%; animation-name: fi-pointer-export2; }
.fi-export-pill { left: 50%; top: 3%; transform: translateX(-50%); z-index: 6; animation-name: fi-export-pill; }
@keyframes fi-export-hot { 0%, 12% { transform: scale(1); } 14% { transform: scale(.8); } 17%, 100% { transform: scale(1); } }
@keyframes fi-pointer-export2 { 0%, 2% { opacity: 0; transform: translate(-16cqw, 18cqw); } 6% { opacity: 1; } 12% { transform: translate(0, 0); } 14% { transform: translate(0, 0) scale(.82); } 17%, 20% { opacity: 1; transform: translate(0, 0) scale(1); } 24%, 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes fi-export-menu { 0%, 16% { opacity: 0; transform: scale(.8); } 21%, 32% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes fi-export-pick { 0%, 26% { background: transparent; } 29%, 100% { background: var(--cp-accent-soft); } }
@keyframes fi-doc-1 { 0%, 36% { opacity: 0; transform: translate(30cqw, 20cqw) rotate(0) scale(.6); } 46%, 100% { opacity: 1; transform: rotate(-6deg); } }
@keyframes fi-doc-2 { 0%, 40% { opacity: 0; transform: translate(-30cqw, 20cqw) rotate(0) scale(.6); } 50%, 100% { opacity: 1; transform: rotate(6deg); } }
@keyframes fi-doc-3 { 0%, 44% { opacity: 0; transform: translate(30cqw, -20cqw) rotate(0) scale(.6); } 54%, 100% { opacity: 1; transform: rotate(5deg); } }
@keyframes fi-doc-4 { 0%, 48% { opacity: 0; transform: translate(-30cqw, -20cqw) rotate(0) scale(.6); } 58%, 100% { opacity: 1; transform: rotate(-5deg); } }
@keyframes fi-export-pill { 0%, 58% { opacity: 0; transform: translate(-50%, 8px); } 64%, 94% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 8px); } }

/* F. History across devices: the web history beside a phone, packets both ways */
.fi-sync-stage { aspect-ratio: 10 / 8.6; max-width: 38rem; justify-self: start; --fi-t: 12s; }
.fi-sync-browser { position: absolute; left: 0; top: 0; z-index: 1; width: 56%; }
.fi-sync-phone { --w: 30cqw; position: absolute; right: 0; bottom: 0; z-index: 3; }
.fi-sync-packet { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: .8cqw; padding: 1.1cqw 1.8cqw; border-radius: 999px; background: var(--cp-accent); color: #fff; font-size: clamp(.44rem, 1.7cqw, .66rem); font-weight: 800; white-space: nowrap; box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--cp-accent) 80%, transparent); opacity: 0; }
.fi-sync-packet i { font-size: 1.3em; }
.fi-sync-packet.is-up { left: 58%; top: 46%; animation-name: fi-sync-up; }
.fi-sync-packet.is-down { left: 16%; top: 28%; animation-name: fi-sync-down; }
.fi-sync-callout { left: 2%; bottom: 3%; width: 56%; animation-name: fi-sync-callout; }
.fi-sync-pill { right: 0; top: 3%; z-index: 6; }
@keyframes fi-sync-up { 0%, 6% { opacity: 0; transform: translate(12cqw, 16cqw) scale(.6); } 10% { opacity: 1; transform: translate(12cqw, 16cqw) scale(1); } 26% { opacity: 1; transform: translate(-22cqw, -14cqw) scale(.9); } 30%, 100% { opacity: 0; transform: translate(-22cqw, -14cqw) scale(.4); } }
@keyframes fi-sync-down { 0%, 56% { opacity: 0; transform: translate(0, 0) scale(.6); } 60% { opacity: 1; transform: translate(0, 0) scale(1); } 76% { opacity: 1; transform: translate(40cqw, 36cqw) scale(.9); } 80%, 100% { opacity: 0; transform: translate(40cqw, 36cqw) scale(.4); } }
@keyframes fi-sync-callout { 0%, 30% { opacity: 0; transform: translateY(10px); } 36%, 52% { opacity: 1; transform: none; } 56%, 78% { opacity: 0; transform: translateY(10px); } 84%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px); } }

/* G. Comparison */
.fi-compare { display: grid; gap: .6rem; }
.fi-compare-head, .fi-compare-row { display: grid; grid-template-columns: 1.1fr 1fr 1.4fr; gap: .75rem; align-items: center; }
.fi-compare-head { padding: 0 1.1rem .2rem; color: var(--cp-text-muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fi-compare-head .is-chipin { display: inline-flex; align-items: center; gap: .4rem; color: var(--cp-accent); }
.fi-compare-head .is-chipin i { font-size: 1.1rem; }
.fi-compare-row { padding: .8rem 1.1rem; border: 1px solid var(--cp-border); border-radius: 1rem; background: var(--cp-surface); }
.fi-compare-row b { color: var(--cp-text); font-size: .95rem; font-weight: 800; }
.fi-compare-row span { display: flex; align-items: flex-start; gap: .45rem; color: var(--cp-text-muted); font-size: .88rem; line-height: 1.4; }
.fi-compare-row span i { flex: none; margin-top: .1rem; font-size: 1.1rem; color: color-mix(in srgb, var(--cp-text) 35%, transparent); }
.fi-compare-row .is-chipin { padding: .55rem .75rem; border-radius: .7rem; background: color-mix(in srgb, var(--cp-accent) 7%, var(--cp-surface)); color: var(--cp-text); font-weight: 600; }
.fi-compare-row .is-chipin i { color: var(--fi-ok); }

/* H. Privacy vault: what Chip In stores → shield over HTTPS → what the model sees */
.fi-vault-stage { aspect-ratio: 10 / 6.8; max-width: 38rem; justify-self: end; --fi-t: 12s; }
.fi-req { position: absolute; top: 3%; z-index: 2; width: 42%; padding: 2cqw 2.2cqw; border: 1px solid var(--cp-border); border-radius: 2cqw; background: var(--cp-surface); box-shadow: 0 16px 36px -18px rgba(27, 19, 64, .5); }
.fi-req.is-left { left: 0; }
.fi-req.is-right { right: 0; border-color: color-mix(in srgb, var(--fi-ok) 50%, var(--cp-border)); }
.fi-req-head { display: flex; flex-wrap: wrap; align-items: center; gap: .9cqw; margin-bottom: 1.2cqw; color: var(--cp-text); font-size: clamp(.5rem, 2cqw, .78rem); font-weight: 800; }
.fi-req-head > i { color: var(--cp-accent); font-size: 1.4em; }
.fi-req-head em { display: flex; align-items: center; gap: .5cqw; width: 100%; color: var(--fi-ok); font-size: clamp(.42rem, 1.55cqw, .6rem); font-style: normal; }
.fi-req-row { display: grid; grid-template-columns: 9.5cqw 1fr; gap: 1cqw; padding: 1.5cqw 0; border-top: 1px solid color-mix(in srgb, var(--cp-border) 70%, transparent); }
.fi-req-row small { color: var(--cp-text-muted); font-size: clamp(.4rem, 1.5cqw, .58rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fi-req-row span { min-width: 0; color: var(--cp-text); font-size: clamp(.5rem, 1.8cqw, .7rem); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-req-row .is-token { color: var(--fi-ok); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fi-req.is-right .is-1 { animation-name: fi-vault-r1; } .fi-req.is-right .is-2 { animation-name: fi-vault-r2; } .fi-req.is-right .is-3 { animation-name: fi-vault-r3; } .fi-req.is-right .is-4 { animation-name: fi-vault-r4; }
.fi-vault-mid { position: absolute; left: 42%; top: 3%; z-index: 3; width: 16%; height: 58%; display: grid; place-items: center; }
.fi-vault-shield { position: relative; display: grid; place-items: center; width: 13cqw; height: 13cqw; color: var(--fi-ok); font-size: 13cqw; line-height: 1; filter: drop-shadow(0 12px 20px rgba(22, 163, 74, .35)); animation-name: fi-vault-shield; }
.fi-vault-shield > i { grid-area: 1 / 1; }
.fi-vault-shield .is-lock { margin-top: -1cqw; color: #fff; font-size: 4.4cqw; }
.fi-vault-https { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5cqw; padding: .6cqw 1.5cqw; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 88%, var(--cp-accent)); color: var(--cp-surface); font-size: clamp(.38rem, 1.4cqw, .56rem); font-weight: 800; font-style: normal; white-space: nowrap; }
.fi-vault-packet { position: absolute; left: 0; top: 50%; z-index: 4; display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; margin-top: -2.3cqw; border-radius: 50%; background: var(--cp-accent); color: #fff; font-size: 2.4cqw; box-shadow: 0 8px 18px -8px rgba(27, 19, 64, .5); opacity: 0; }
.fi-vault-packet.is-1 { animation-name: fi-vault-p1; }
.fi-vault-packet.is-2 { background: var(--fi-ok); animation-name: fi-vault-p2; }
.fi-vault-checks { position: absolute; left: 0; right: 0; bottom: 3%; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; }
.fi-vault-checks span { display: flex; align-items: center; gap: .8cqw; min-width: 0; padding: 1.4cqw 1.8cqw; border: 1px solid var(--cp-border); border-radius: 1.4cqw; background: var(--cp-surface); color: var(--cp-text); font-size: clamp(.5rem, 1.8cqw, .7rem); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-vault-checks i { flex: none; color: var(--fi-ok); font-size: 1.3em; }
.fi-vault-checks .is-1 { animation-name: fi-vault-c1; } .fi-vault-checks .is-2 { animation-name: fi-vault-c2; } .fi-vault-checks .is-3 { animation-name: fi-vault-c3; } .fi-vault-checks .is-4 { animation-name: fi-vault-c4; }
@keyframes fi-vault-p1 { 0%, 8% { opacity: 0; transform: translateX(-4cqw) scale(.6); } 12% { opacity: 1; transform: translateX(-2cqw) scale(1); } 30% { opacity: 1; transform: translateX(6.7cqw) scale(.9); } 34%, 100% { opacity: 0; transform: translateX(6.7cqw) scale(.3); } }
@keyframes fi-vault-p2 { 0%, 34% { opacity: 0; transform: translateX(6.7cqw) scale(.3); } 38% { opacity: 1; transform: translateX(6.7cqw) scale(1); } 54% { opacity: 1; transform: translateX(17cqw) scale(.9); } 58%, 100% { opacity: 0; transform: translateX(19cqw) scale(.4); } }
@keyframes fi-vault-shield { 0%, 26% { transform: scale(1); } 31% { transform: scale(1.14); } 36%, 100% { transform: scale(1); } }
@keyframes fi-vault-r1 { 0%, 42% { opacity: 0; transform: translateX(-6px); } 47%, 100% { opacity: 1; transform: none; } }
@keyframes fi-vault-r2 { 0%, 46% { opacity: 0; transform: translateX(-6px); } 51%, 100% { opacity: 1; transform: none; } }
@keyframes fi-vault-r3 { 0%, 50% { opacity: 0; transform: translateX(-6px); } 55%, 100% { opacity: 1; transform: none; } }
@keyframes fi-vault-r4 { 0%, 54% { opacity: 0; transform: translateX(-6px); } 59%, 100% { opacity: 1; transform: none; } }
@keyframes fi-vault-c1 { 0%, 62% { opacity: 0; transform: translateY(6px); } 67%, 100% { opacity: 1; transform: none; } }
@keyframes fi-vault-c2 { 0%, 66% { opacity: 0; transform: translateY(6px); } 71%, 100% { opacity: 1; transform: none; } }
@keyframes fi-vault-c3 { 0%, 70% { opacity: 0; transform: translateY(6px); } 75%, 100% { opacity: 1; transform: none; } }
@keyframes fi-vault-c4 { 0%, 74% { opacity: 0; transform: translateY(6px); } 79%, 100% { opacity: 1; transform: none; } }
[data-bs-theme="dark"] .fi-vault-https { background: color-mix(in srgb, var(--cp-accent) 70%, #000); color: #fff; }
[data-bs-theme="dark"] .fi-doc { border-color: rgba(255, 255, 255, .18); }

@media (max-width: 991.98px) {
    .fi-sources, .fi-answer-stage, .fi-signals-stage, .fi-export-stage, .fi-sync-stage, .fi-vault-stage { justify-self: center; }
    .fi-strip { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
@media (max-width: 767.98px) {
    .fi-compare-head { display: none; }
    .fi-compare-row { grid-template-columns: 1fr; gap: .45rem; }
    .fi-compare-row span:not(.is-chipin) { font-size: .82rem; }
    .fi-answer-pill-2, .fi-sync-pill { display: none; }
}
@media (max-width: 575.98px) {
    .fi-src span { display: none; }
    .fi-src.is-partner span { display: flex; }
    .fi-out-a small { display: none; }
    .fi-signals-pill { display: none; }
    .fi-req-row { grid-template-columns: 1fr; gap: .2cqw; }
}
@media (prefers-reduced-motion: reduce) {
    .fi-stage *, .fi-strip li, .fi-strip li > i, .fi-strip-bar i, .fi-core, .fi-core-ring, .fi-wires path { animation: none !important; }
    .fi-dot, .fi-pointer, .fi-vault-packet, .fi-sync-packet, .fi-export-menu, .fi-strip-bar { display: none; }
    .fi-drawer { transform: none; }
    .fi-out-q .is-b, .fi-out-a.is-b { opacity: 0; }
    .fi-out-q .is-a, .fi-out-a.is-a { opacity: 1; }
    .fi-sync-callout { opacity: 1; transform: none; }
    .fi-strip li.is-5 { border-color: var(--cp-accent); }
}