/* =====================================================================
   FunnelX — Feature hero live visual (hv)
   Animated product mockup for the top-right of every feature page hero.
   Self-contained: works on both the fp-hero and f2-hero templates.
   ===================================================================== */
.hv { position: relative; width: 100%; }
.hv::before { content: ""; position: absolute; inset: -14%; z-index: 0; pointer-events: none; background: radial-gradient(44% 48% at 24% 20%, rgba(50,101,255,0.30), transparent 70%), radial-gradient(40% 44% at 80% 84%, rgba(3,197,147,0.20), transparent 72%); filter: blur(46px); }
.hv-win { position: relative; z-index: 1; background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-xl); box-shadow: 0 26px 60px rgba(7,20,55,0.18); overflow: hidden; }
.hv-bar { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--border-1); background: #fbfcfe; }
.hv-bar b { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--fx-navy); white-space: nowrap; }
.hv-bar .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--fx-green); flex: none; animation: hv-pulse 1.6s var(--ease-in-out) infinite; }
.hv-bar .t { margin-left: auto; font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv-bar .chip { margin-left: auto; font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: rgba(3,197,147,0.16); color: #017d5f; white-space: nowrap; }
.hv-bar .chip.b { background: rgba(50,101,255,0.12); color: var(--fx-blue); }
@keyframes hv-pulse { 0%,100%{ opacity: 1 } 50%{ opacity: 0.22 } }
.hv-body { padding: var(--space-6); display: grid; gap: 12px; }
@keyframes hv-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes hv-slide { 0%,8%{ opacity: 0; transform: translateX(14px) } 18%,92%{ opacity: 1; transform: none } 100%{ opacity: 1 } }
@keyframes hv-grow { 0%{ transform: scaleX(0.08); opacity: .25 } 26%,100%{ transform: scaleX(1); opacity: 1 } }
@keyframes hv-fill { from { width: calc(var(--w) * 0.4) } to { width: var(--w) } }
@keyframes hv-bob { 0%,100%{ transform: translateY(0); opacity: .35 } 50%{ transform: translateY(-4px); opacity: 1 } }

/* ----- chat (roleplay) ----- */
.hv-msg { display: flex; gap: 10px; align-items: flex-start; animation: hv-in 620ms var(--ease-out) both; }
.hv-msg.me { flex-direction: row-reverse; }
.hv-msg .av { width: 30px; height: 30px; border-radius: 999px; flex: none; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--fx-navy); }
.hv-msg.me .av { background: var(--fx-light-blue); }
.hv-msg p { margin: 0; font-size: var(--fs-14); line-height: var(--lh-relaxed); color: var(--fx-navy); background: var(--bg-subtle); border-radius: 12px 12px 12px 4px; padding: 10px 13px; max-width: 80%; }
.hv-msg.me p { background: var(--accent-soft); border-radius: 12px 12px 4px 12px; }
.hv-typing { display: flex; gap: 4px; padding: 12px 13px; background: var(--bg-subtle); border-radius: 12px 12px 12px 4px; }
.hv-typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--fg-3); animation: hv-bob 1.2s var(--ease-in-out) infinite; }
.hv-typing i:nth-child(2){ animation-delay: .15s } .hv-typing i:nth-child(3){ animation-delay: .3s }

/* ----- coaching cue cards ----- */
.hv-cue { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 11px; font-size: var(--fs-14); line-height: var(--lh-snug); border: 1px solid transparent; }
.hv-cue b { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; flex: none; padding-top: 2px; }
.hv-cue.o { background: rgba(246,128,15,0.10); border-color: rgba(246,128,15,0.28); color: #9a5200; animation: hv-slide 6s var(--ease-in-out) infinite; }
.hv-cue.g { background: rgba(3,197,147,0.10); border-color: rgba(3,197,147,0.30); color: #017d5f; animation: hv-slide 6s var(--ease-in-out) infinite; animation-delay: 1.4s; }
.hv-cue.b { background: var(--accent-soft); border-color: rgba(50,101,255,0.26); color: var(--fx-blue); animation: hv-slide 6s var(--ease-in-out) infinite; animation-delay: 2.8s; }
.hv-wave { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.hv-wave i { flex: 1; border-radius: 2px; background: var(--fx-light-blue); opacity: 0.85; animation: hv-wv 1.3s ease-in-out infinite; }
.hv-wave i:nth-child(4n) { background: var(--fx-green); }
@keyframes hv-wv { 0%,100%{ height: 20% } 50%{ height: 100% } }

/* ----- tiles + transcript (analysis) ----- */
.hv-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.hv-tile { border: 1px solid var(--border-1); border-radius: 10px; padding: 10px 11px; min-width: 0; }
.hv-tile.hi { background: rgba(3,197,147,0.08); border-color: rgba(3,197,147,0.32); }
.hv-tile small { display: block; font-size: 10.5px; color: var(--fg-3); white-space: nowrap; }
.hv-tile b { display: block; font-size: 21px; font-weight: var(--fw-bold); color: var(--fx-navy); letter-spacing: -0.02em; line-height: 1.15; margin-top: 2px; }
.hv-tile em { font-style: normal; font-size: 10.5px; font-weight: var(--fw-semibold); color: #017d5f; }
.hv-tr { display: flex; align-items: flex-start; gap: 9px; }
.hv-who { font-size: 9.5px; font-weight: 700; color: #fff; background: var(--fx-navy); border-radius: 4px; padding: 3px 6px; flex: none; }
.hv-who.rep { background: var(--fx-light-blue); }
.hv-lines { flex: 1; display: grid; gap: 5px; padding-top: 3px; }
.hv-lines i { height: 6px; border-radius: 999px; background: var(--bg-muted); display: block; transform-origin: left; animation: hv-grow 4.2s var(--ease-in-out) infinite; }
.hv-tr + .hv-tr .hv-lines i { animation-delay: .8s }

/* ----- chart + rows (analytics) ----- */
.hv-chart { position: relative; display: flex; align-items: flex-end; gap: 7px; height: 96px; padding-top: 6px; }
.hv-chart i { flex: 1; border-radius: 4px 4px 0 0; background: var(--fx-light-blue); opacity: 0.9; animation: hv-bar 4.6s var(--ease-in-out) infinite alternate; }
.hv-chart i:nth-child(6), .hv-chart i:nth-child(7) { background: var(--fx-green); }
@keyframes hv-bar { from { height: 18% } to { height: var(--h) } }
.hv-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--fg-3); border-top: 1px solid var(--border-1); padding-top: 7px; }
.hv-rows { display: grid; gap: 9px; }
.hv-row { display: grid; grid-template-columns: 26px 1fr 34px; align-items: center; gap: 10px; }
.hv-av { width: 26px; height: 26px; border-radius: 999px; background: linear-gradient(135deg,#071437,#0331F3); color: #fff; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; }
.hv-row .nm { font-size: 11.5px; font-weight: var(--fw-medium); color: var(--fx-navy); margin-bottom: 5px; }
.hv-track { display: block; width: 100%; height: 7px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.hv-track i { display: block; height: 100%; border-radius: 999px; background: var(--fx-light-blue); width: var(--w); animation: hv-fill 4.4s var(--ease-in-out) infinite alternate; }
.hv-row.g .hv-track i { background: var(--fx-green); animation-delay: .45s }
.hv-row.o .hv-track i { background: var(--fx-orange); animation-delay: .9s }
.hv-score { font-size: 15px; font-weight: var(--fw-bold); color: var(--fx-navy); text-align: right; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ----- ramp steps (onboarding) ----- */
.hv-steps { display: grid; gap: 10px; }
.hv-st { display: flex; align-items: center; gap: 11px; }
.hv-st .n { width: 24px; height: 24px; border-radius: 999px; flex: none; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: var(--bg-muted); color: var(--fg-3); }
.hv-st.done .n { background: var(--fx-green); color: #fff; }
.hv-st.now .n { background: var(--fx-light-blue); color: #fff; animation: hv-pulse 1.9s var(--ease-in-out) infinite; }
.hv-st .txt { flex: 1; min-width: 0; }
.hv-st .txt b { display: block; font-size: 12.5px; font-weight: var(--fw-medium); color: var(--fx-navy); margin-bottom: 5px; }
.hv-st.done .txt b { color: var(--fg-3); }
.hv-st .txt .hv-track i { background: var(--fx-green); }
.hv-st.now .txt .hv-track i { background: var(--fx-light-blue); animation-delay: .5s }
.hv-st .pct { font-size: 11px; color: var(--fg-3); flex: none; font-variant-numeric: tabular-nums; }

/* ----- footer strip ----- */
.hv-foot { border-top: 1px solid var(--border-1); padding: 11px 16px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-3); background: #fbfcfe; }
.hv-foot .up { margin-left: auto; color: #017d5f; font-weight: var(--fw-semibold); }

/* ----- floating badge ----- */
.hv-badge { position: absolute; z-index: 2; right: -14px; bottom: 26px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 11px 16px; animation: hv-float 6s var(--ease-in-out) infinite; }
.hv-badge b { display: block; font-size: var(--fs-24); color: var(--fx-navy); line-height: 1.05; letter-spacing: -0.02em; }
.hv-badge small { font-size: 11px; color: var(--fg-3); }
@keyframes hv-float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-7px) } }
@media (max-width: 560px){ .hv-badge { right: 8px; } }

@media (prefers-reduced-motion: reduce){ .hv *, .hv { animation: none !important; } }

/* ----- voice conversation (roleplay hero) ----- */
.hv-voice .hv-body { gap: 16px; }
.hv-speakers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hv-sp { display: grid; justify-items: center; gap: 8px; padding: 14px 10px; border-radius: 12px; border: 1px solid var(--border-1); background: #fbfcfe; transition: border-color 300ms var(--ease-out); }
.hv-sp.on { border-color: rgba(50,101,255,0.34); background: var(--accent-soft); }
.hv-spav { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--fx-navy); }
.hv-sp.rep .hv-spav { background: var(--fx-light-blue); }
.hv-spav { overflow: hidden; }
.hv-spav img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 999px; }
.hv-spname { font-size: 10.5px; font-weight: var(--fw-semibold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); }
.hv-spwave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 26px; width: 100%; }
.hv-spwave i { width: 3px; border-radius: 2px; background: var(--fx-navy); opacity: 0.85; }
.hv-sp.rep .hv-spwave i { background: var(--fx-light-blue); }
.hv-sp.buyer .hv-spwave i { animation: hv-vc 1.1s ease-in-out infinite; }
.hv-sp.rep .hv-spwave i { animation: hv-vc 1.1s ease-in-out infinite; }
.hv-sp.buyer .hv-spwave { animation: hv-turnA 8s steps(1) infinite; }
.hv-sp.rep .hv-spwave { animation: hv-turnB 8s steps(1) infinite; }
@keyframes hv-turnA { 0%,49%{ opacity: 1 } 50%,100%{ opacity: 0.22 } }
@keyframes hv-turnB { 0%,49%{ opacity: 0.22 } 50%,100%{ opacity: 1 } }
@keyframes hv-vc { 0%,100%{ height: 14% } 50%{ height: 100% } }
.hv-spwave i:nth-child(1){ animation-delay: 0s } .hv-spwave i:nth-child(2){ animation-delay: .08s } .hv-spwave i:nth-child(3){ animation-delay: .16s } .hv-spwave i:nth-child(4){ animation-delay: .24s } .hv-spwave i:nth-child(5){ animation-delay: .32s } .hv-spwave i:nth-child(6){ animation-delay: .4s } .hv-spwave i:nth-child(7){ animation-delay: .48s } .hv-spwave i:nth-child(8){ animation-delay: .56s } .hv-spwave i:nth-child(9){ animation-delay: .64s } .hv-spwave i:nth-child(10){ animation-delay: .72s } .hv-spwave i:nth-child(11){ animation-delay: .8s } .hv-spwave i:nth-child(12){ animation-delay: .88s }
.hv-convo { display: grid; gap: 8px; }
.hv-line { display: flex; align-items: flex-start; gap: 8px; animation: hv-fromleft 700ms var(--ease-out) both; }
.hv-line.r { flex-direction: row-reverse; animation-name: hv-fromright; }
.hv-line:nth-child(2){ animation-delay: .5s } .hv-line:nth-child(3){ animation-delay: 1s } .hv-line:nth-child(4){ animation-delay: 1.5s }
@keyframes hv-fromleft { from { opacity: 0; transform: translateX(-18px) } to { opacity: 1; transform: none } }
@keyframes hv-fromright { from { opacity: 0; transform: translateX(18px) } to { opacity: 1; transform: none } }
.hv-tag { font-size: 9.5px; font-weight: 700; color: #fff; background: var(--fx-navy); border-radius: 4px; padding: 3px 6px; flex: none; margin-top: 4px; }
.hv-tag.rep { background: var(--fx-light-blue); }
.hv-line p { margin: 0; font-size: var(--fs-14); line-height: var(--lh-relaxed); color: var(--fx-navy); background: var(--bg-subtle); border-radius: 11px 11px 11px 4px; padding: 9px 12px; max-width: 84%; }
.hv-line.r p { background: var(--accent-soft); border-radius: 11px 11px 4px 11px; }