/* Chip In 4.0 real-screen stages: the hero phone that cycles eight screens (v4s-*, MobileV4Stage.razor), the
   fourteen-card reel of screens with overlay moments (v4r-*, MobileV4Reel.razor), and the eight showcase stories on the
   release page (v4x-*, MobileV4Showcase.razor + V4Story.razor). All sit on the hs-* tokens and reuse the v4-intelligence-*
   backdrop (mobile-v4-refinement.css), the hs-panel/hs-duo phone layouts and hr-* reel primitives (home-showcase.css), and
   the V4Motion gates (mobile-v4-motion.css), which load first. Base styles are the finished frame; keyframes describe the
   journey, so reduced-motion users and the V4Motion "still" state see a sensible composed frame. */

/* ===== Hero stage: a phone cycling eight real screens (40s loop, 5s each, 1s cross-fades) ===== */
.v4s-stage { aspect-ratio: 1 / 1.02; }
.v4s-four { left: 2%; top: -4%; font-size: 92cqw; }
.v4s-edition { top: 7%; left: 5%; max-width: 32%; }
.v4s-phone { position: absolute; z-index: 2; right: 5%; top: 3%; width: 46%; aspect-ratio: 720 / 1564; border-radius: 4.6cqw; border: .75cqw solid #161a2c; background: #161a2c; box-shadow: 0 34px 60px -28px rgba(27, 19, 64, .65), 0 0 0 1px rgba(255, 255, 255, .06) inset; overflow: hidden; transform: rotate(2deg); animation: v4s-drift 12s ease-in-out infinite; }
.v4s-phone::after { content: ""; position: absolute; top: 1.6cqw; left: 50%; z-index: 6; width: 30%; height: 3.2cqw; transform: translateX(-50%); border-radius: 999px; background: #05070d; }
.v4s-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 3.8cqw; opacity: 0; animation: v4s-screen 40s linear infinite; }
.v4s-screen.is-1 { opacity: 1; animation-name: v4s-screen-first; }
.v4s-screen.is-2, .v4s-caption.is-2 { animation-delay: 5s; } .v4s-screen.is-3, .v4s-caption.is-3 { animation-delay: 10s; } .v4s-screen.is-4, .v4s-caption.is-4 { animation-delay: 15s; }
.v4s-screen.is-5, .v4s-caption.is-5 { animation-delay: 20s; } .v4s-screen.is-6, .v4s-caption.is-6 { animation-delay: 25s; } .v4s-screen.is-7, .v4s-caption.is-7 { animation-delay: 30s; } .v4s-screen.is-8, .v4s-caption.is-8 { animation-delay: 35s; }
.v4s-caption { position: absolute; left: 5%; top: 9%; z-index: 7; display: inline-flex; align-items: center; gap: 1.2cqw; max-width: 90%; padding: 1.4cqw 2.2cqw; border-radius: 999px; background: rgba(12, 14, 30, .8); color: #fff; font-size: clamp(.5rem, 1.85cqw, .7rem); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; animation: v4s-screen 40s linear infinite; }
.v4s-caption i { color: #a99cff; font-size: 1.3em; }
.v4s-caption.is-1 { opacity: 1; animation-name: v4s-screen-first; }
.v4s-pills { position: absolute; z-index: 3; left: 0; top: 22%; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6cqw; margin: 0; padding: 0; list-style: none; max-width: 44%; }
.v4s-pills li { display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.5cqw 2.4cqw; border: 1px solid var(--cp-border); border-radius: 999px; background: color-mix(in srgb, var(--cp-surface) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 28px -18px rgba(27, 19, 64, .5); color: var(--cp-text); font-size: clamp(.58rem, 2.1cqw, .78rem); font-weight: 700; white-space: nowrap; }
.v4s-pills li i { color: var(--cp-accent); font-size: 1.3em; }
.v4s-pills li.is-new { gap: 1.2cqw; padding-inline: 2.2cqw; border-color: transparent; background: var(--cp-accent); color: #fff; font-size: clamp(.55rem, 2cqw, .7rem); letter-spacing: .1em; text-transform: uppercase; }
.v4s-pills li.is-new::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #fff; animation: nf-pulse 2.2s ease-in-out infinite; }
.v4s-callout { position: absolute; z-index: 4; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2.2cqw; padding: 2.4cqw 2.8cqw; border: 1px solid var(--cp-border); border-radius: 2.8cqw; background: color-mix(in srgb, var(--cp-surface) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 48px -24px rgba(27, 19, 64, .6); }
.v4s-callout.is-a { left: 0; bottom: 14%; width: 56%; animation: nf-float-b 9s ease-in-out infinite; }
.v4s-callout.is-b { right: 0; bottom: 0; width: 58%; animation: nf-float-a 7.5s ease-in-out 1s infinite; }
.v4s-callout > i { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 3.6cqw; }
.v4s-callout.tone-success > i { background: color-mix(in srgb, #22c55e 18%, var(--cp-surface)); color: #15803d; }
.v4s-callout small { display: block; margin-bottom: .6cqw; color: var(--cp-text-muted); font-size: clamp(.5rem, 1.7cqw, .66rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.v4s-callout strong { display: block; color: var(--cp-text); font-size: clamp(.7rem, 2.55cqw, .95rem); line-height: 1.25; }
.v4s-callout span { display: block; margin-top: .5cqw; color: var(--cp-text-muted); font-size: clamp(.58rem, 1.95cqw, .78rem); }
[data-bs-theme="dark"] .v4s-callout.tone-success > i { color: #4ade80; }
@keyframes v4s-screen { 0% { opacity: 0; } 2.5%, 12.5% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes v4s-screen-first { 0%, 12.5% { opacity: 1; } 15%, 97.5% { opacity: 0; } 100% { opacity: 1; } }
@keyframes v4s-drift { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(.5deg) translateY(-1cqw); } }
/* V4Motion gates: still/paused hold the first screen, running cycles. */
.v4-motion[data-motion="still"] .v4s-screen:not(.is-1), .v4-motion[data-motion="still"] .v4s-caption:not(.is-1) { opacity: 0; }
.v4-motion[data-motion="still"] .v4s-screen.is-1, .v4-motion[data-motion="still"] .v4s-caption.is-1 { opacity: 1; }

/* ===== The 4.0 reel: real screens in phones with an overlay moment each ===== */
.v4r-section .hs-head { margin-bottom: clamp(.75rem, 2vw, 1.25rem); }
.v4r-reel { --fs-card: 22.5rem; }
.v4r-reel .fs-reel-track { padding: 1.5rem 4vw 1.75rem; }
.v4r-card > strong { min-height: 2.5rem; }
.v4r-stage { --t: 8s; height: 18rem; padding: 0; background: radial-gradient(90% 70% at 70% 20%, color-mix(in srgb, var(--cp-accent) 16%, transparent), transparent 70%), color-mix(in srgb, var(--cp-text) 3%, var(--cp-surface)); }
.v4r-stage .hs-phone.v4r-phone { --w: 8.6rem; position: absolute; left: .75rem; top: .75rem; z-index: 1; --hs-shadow: 0 22px 40px -22px rgba(27, 19, 64, .55); }
.v4r-chip { position: absolute; z-index: 3; right: .7rem; top: .8rem; max-width: 56%; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .65rem; border: 1px solid var(--cp-border); border-radius: 999px; background: var(--cp-surface); color: var(--cp-text); font-size: .66rem; font-weight: 800; line-height: 1.2; box-shadow: 0 10px 22px -12px rgba(27, 19, 64, .45); animation-name: v4r-pop-a; }
.v4r-chip i { flex: none; color: var(--cp-accent); font-size: 1rem; }
.v4r-chip.tone-danger i { color: #dc2626; } .v4r-chip.tone-amber i { color: #b45309; } .v4r-chip.tone-success i { color: #16a34a; }
.v4r-chip.tone-accent { border-color: transparent; background: var(--cp-accent); color: #fff; }
.v4r-chip.tone-accent i { color: #fff; }
.v4r-toast { left: 6.4rem; right: .7rem; bottom: .75rem; animation-name: v4r-pop-b; }
.v4r-toast b { font-size: .72rem; }
.v4r-toast span { font-size: .6rem; }
.v4r-ring { position: absolute; z-index: 2; left: calc(.75rem + var(--x) * .086rem); top: calc(.75rem + var(--y) * .1868rem); width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem; border: 2px solid var(--cp-accent); border-radius: 50%; box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--cp-accent) 28%, transparent); opacity: 0; animation-name: v4r-ring; }
.v4r-swipe { position: absolute; z-index: 3; left: calc(.75rem + var(--x) * .086rem); top: calc(.75rem + var(--y) * .1868rem); color: var(--cp-text); font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); opacity: 0; animation-name: v4r-swipe; }
.v4r-stamp { position: absolute; z-index: 3; left: 2rem; top: 7.2rem; display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border: 2px solid #16a34a; border-radius: .5rem; color: #16a34a; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-8deg); opacity: 0; animation-name: v4r-stamp; }
[data-bs-theme="dark"] .v4r-stamp { border-color: #4ade80; color: #4ade80; }
@keyframes v4r-pop-a { 0%, 8% { opacity: 0; transform: translateY(.4rem); } 14%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(.4rem); } }
@keyframes v4r-pop-b { 0%, 38% { opacity: 0; transform: translateY(.5rem) scale(.97); } 44%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(.5rem) scale(.97); } }
@keyframes v4r-ring { 0%, 24% { opacity: 0; transform: scale(.4); } 28% { opacity: 1; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes v4r-swipe { 0%, 18% { opacity: 0; transform: translate(0, .6rem); } 24% { opacity: 1; transform: translate(0, 0); } 26% { transform: translate(0, 0) scale(.85); } 36% { opacity: 1; transform: translate(4.2rem, -.4rem) rotate(6deg); } 42%, 100% { opacity: 0; transform: translate(4.2rem, -.4rem); } }
@keyframes v4r-stamp { 0%, 34% { opacity: 0; transform: rotate(-8deg) scale(1.4); } 40%, 88% { opacity: 1; transform: rotate(-8deg) scale(1); } 94%, 100% { opacity: 0; transform: rotate(-8deg) scale(1); } }

/* ===== Showcase stories: a real screen, a tap, the next screen, and the answer in a callout (16s loop) ===== */
.v4x-intro { max-width: 44rem; margin: 0 auto 1.5rem; text-align: center; }
.v4x-intro .hs-eyebrow { justify-content: center; }
.v4x-intro .hs-lead { margin-inline: auto; }
.v4-showcase .v4-jump-nav { margin: 0 0 1rem; }
.v4x-story { scroll-margin-top: 7rem; }
.v4x-copy .hs-points { margin-top: 1.5rem; }
.v4x-copy .hs-chips { margin-top: 1.4rem; }
.v4x-fine { margin: 1.25rem 0 0; color: var(--cp-text-muted); font-size: .8rem; line-height: 1.5; }
.v4-showcase .v4-motion.v4x-motion { width: 100%; max-width: 38rem; margin-inline: 0; justify-self: end; }
.v4-showcase .v4x-story.is-flipped .v4-motion.v4x-motion { justify-self: start; }
.v4x-stage { --t: 16s; aspect-ratio: 10 / 9; }
.v4x-stage * { animation-duration: var(--t); animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.v4x-stage .hs-float-b { animation-duration: 9.5s; }
.v4x-stage .hs-phone-back { --w: 34cqw; left: 6cqw; top: 26%; z-index: 1; }
/* The front phone is a stack of real screens that cross-fade: screen 1 is the base, 2 fades in after the tap */
.v4x-swap { --sw: 40cqw; position: absolute; right: 6cqw; top: 5%; z-index: 3; width: var(--sw); aspect-ratio: 720 / 1564; }
.v4x-swap > .hs-phone { --w: var(--sw); position: absolute; left: 0; top: 0; }
.v4x-swap > .hs-phone.is-2 { opacity: 0; animation-name: v4x-shot-2; animation-timing-function: linear; }
/* Tap targets are placed in fractions of the screenshot (--px, --py), mapped through the bezel onto the phone */
.v4x-pointer, .v4x-ring, .v4x-stamp, .v4x-typed { position: absolute; left: calc((2.2 + var(--px, .5) * 95.6) * 1%); top: calc((1.01 + var(--py, .5) * 97.97) * 1%); pointer-events: none; }
.v4x-pointer { z-index: 8; color: var(--cp-text); font-size: 4.4cqw; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); opacity: 0; animation-name: v4x-tap; }
.v4x-pointer.is-swipe { animation-name: v4x-swipe; }
.v4x-pointer.is-late { animation-name: v4x-tap-late; }
.v4x-ring { z-index: 7; width: 8cqw; height: 8cqw; margin: -4cqw 0 0 -4cqw; border: .5cqw solid var(--cp-accent); border-radius: 50%; box-shadow: 0 0 0 1.2cqw color-mix(in srgb, var(--cp-accent) 28%, transparent); opacity: 0; animation-name: v4x-ring; }
.v4x-ring.is-late { animation-name: v4x-ring-late; }
.v4x-stamp { z-index: 8; display: inline-flex; align-items: center; gap: .6cqw; padding: 1cqw 1.8cqw; border: .45cqw solid #16a34a; border-radius: 1.2cqw; background: color-mix(in srgb, var(--cp-surface) 80%, transparent); color: #16a34a; font-size: clamp(.5rem, 1.9cqw, .72rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transform: rotate(-8deg); opacity: 0; animation-name: v4x-stamp; }
.v4x-typed { z-index: 8; display: inline-flex; align-items: center; gap: .8cqw; padding: .9cqw 1.6cqw; border-radius: 1.2cqw; background: var(--cp-surface); color: var(--cp-text); font-size: clamp(.5rem, 1.9cqw, .72rem); font-weight: 700; white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(27, 19, 64, .4); opacity: 0; animation-name: v4x-typed; }
.v4x-typed::after { content: ""; width: .12em; height: 1.1em; background: var(--cp-accent); animation: v4x-caret .8s steps(1) infinite; }
.v4x-stage .hs-pill { animation-name: v4x-pill; }
.v4x-pill-1 { left: 4cqw; top: 4cqw; }
.v4x-pill-2 { left: 4cqw; top: 12cqw; animation-delay: .4s; }
.v4x-stage .hs-callout { opacity: 1; }
/* Figures that differ between the light and dark screenshots (taken minutes apart) follow the theme; the spans inherit
   their parent's type so they can sit inside toast and callout text, whose own span rules set block display */
span.v4x-l, span.v4x-d { display: inline; margin: 0; font: inherit; color: inherit; }
span.v4x-d, [data-bs-theme="dark"] span.v4x-l { display: none; }
[data-bs-theme="dark"] span.v4x-d { display: inline; }
.v4x-callout-a { left: 3cqw; bottom: 9cqw; width: 44cqw; animation-name: v4x-pop-a; }
.v4x-callout-b { right: 3cqw; bottom: 3cqw; width: 48cqw; animation-name: v4x-pop-b; }
.v4x-callout-b.is-late { animation-name: v4x-pop-late; }
[data-bs-theme="dark"] .v4x-stamp { border-color: #4ade80; color: #4ade80; }
@keyframes v4x-shot-2 { 0%, 44% { opacity: 0; } 48%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes v4x-tap { 0%, 26% { opacity: 0; transform: translate(10cqw, 14cqw); } 31% { opacity: 1; } 38% { transform: translate(0, 0); } 40% { transform: translate(0, 0) scale(.8); } 42%, 45% { opacity: 1; transform: none; } 49%, 100% { opacity: 0; transform: none; } }
@keyframes v4x-ring { 0%, 39% { opacity: 0; transform: scale(.3); } 42% { opacity: 1; transform: scale(1); } 50%, 100% { opacity: 0; transform: scale(2.1); } }
@keyframes v4x-swipe { 0%, 12% { opacity: 0; transform: translate(0, 6cqw); } 16% { opacity: 1; transform: none; } 18% { transform: scale(.85); } 27% { opacity: 1; transform: translate(15cqw, -1cqw) rotate(6deg) scale(.85); } 32%, 100% { opacity: 0; transform: translate(15cqw, -1cqw); } }
@keyframes v4x-stamp { 0%, 25% { opacity: 0; transform: rotate(-8deg) scale(1.4); } 30%, 42% { opacity: 1; transform: rotate(-8deg) scale(1); } 47%, 100% { opacity: 0; transform: rotate(-8deg) scale(1); } }
@keyframes v4x-tap-late { 0%, 54% { opacity: 0; transform: translate(-10cqw, 14cqw); } 59% { opacity: 1; } 65% { transform: translate(0, 0); } 67% { transform: translate(0, 0) scale(.8); } 69%, 72% { opacity: 1; transform: none; } 76%, 100% { opacity: 0; transform: none; } }
@keyframes v4x-ring-late { 0%, 66% { opacity: 0; transform: scale(.3); } 69% { opacity: 1; transform: scale(1); } 77%, 100% { opacity: 0; transform: scale(2.1); } }
@keyframes v4x-typed { 0%, 41% { opacity: 0; } 43%, 48% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes v4x-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes v4x-pill { 0%, 2% { opacity: 0; transform: translateY(1cqw); } 6%, 100% { opacity: 1; transform: none; } }
@keyframes v4x-pop-a { 0%, 7% { opacity: 0; transform: translateY(1.2cqw); } 12%, 100% { opacity: 1; transform: none; } }
@keyframes v4x-pop-b { 0%, 52% { opacity: 0; transform: translateY(1.2cqw) scale(.97); } 57%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(1.2cqw) scale(.97); } }
@keyframes v4x-pop-late { 0%, 76% { opacity: 0; transform: translateY(1.2cqw) scale(.97); } 81%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(1.2cqw) scale(.97); } }
/* V4Motion gates: "still" (before the first play, or with reduced motion) is the composed base frame */
.v4-motion[data-motion="still"] .v4x-swap > .hs-phone.is-2, .v4-motion[data-motion="still"] .v4x-pointer, .v4-motion[data-motion="still"] .v4x-ring, .v4-motion[data-motion="still"] .v4x-stamp, .v4-motion[data-motion="still"] .v4x-typed { opacity: 0; }

/* ===== More in 4.0: three real-screen tiles ===== */
.v4x-more { padding-top: 0; }
.v4x-more .hs-tile { min-height: 23rem; }
.v4x-more .hs-tile-shot .hs-phone { --w: min(13rem, 62%); }
.v4x-more .hs-tile.is-wide .hs-tile-shot .hs-phone { --w: 12.5rem; right: 8%; }
.v4x-more .hs-tile.is-wide .hs-tile-shot .hs-phone.is-second { right: 40%; top: 2.5rem; }
.v4x-more .hs-tile-shot .hs-pill { left: 1rem; bottom: 1.2rem; }
.v4x-more .hs-tile.is-wide .hs-tile-shot .hs-pill { left: 1.5rem; top: .5rem; bottom: auto; }
.v4-showcase .v4-finish-band { margin-top: clamp(2rem, 5vw, 3.5rem); }

@media (max-width: 991.98px) {
    .v4-showcase .v4-motion.v4x-motion, .v4-showcase .v4x-story.is-flipped .v4-motion.v4x-motion { justify-self: center; margin-inline: auto; }
}
@media (max-width: 767.98px) {
    .v4x-callout-a { width: 52cqw; bottom: 27cqw; }
    .v4x-callout-b { width: 62cqw; right: 2cqw; bottom: 2cqw; }
    .v4x-pill-2 { display: none; }
    .v4x-more .hs-tile { min-height: 20rem; }
    .v4x-more .hs-tile.is-wide .hs-tile-shot .hs-phone.is-second { display: none; }
    .v4r-reel { --fs-card: 19rem; }
    .v4r-stage { height: 16rem; }
    .v4r-stage .hs-phone.v4r-phone { --w: 7.4rem; }
    .v4r-toast { left: 5.4rem; }
    .v4r-ring { left: calc(.75rem + var(--x) * .074rem); top: calc(.75rem + var(--y) * .1607rem); }
    .v4r-swipe { left: calc(.75rem + var(--x) * .074rem); top: calc(.75rem + var(--y) * .1607rem); }
}
@media (max-width: 575.98px) {
    .v4s-stage { aspect-ratio: 1 / 1.22; }
    .v4s-phone { width: 54%; right: 3%; }
    .v4s-pills { top: 18%; max-width: 40%; }
    .v4s-callout.is-a { width: 62%; bottom: 23%; }
    .v4s-callout.is-b { width: 64%; }
}
@media (prefers-reduced-motion: reduce) {
    .v4s-phone, .v4s-screen, .v4s-caption, .v4s-callout, .v4s-pills li.is-new::before, .v4r-stage *, .v4r-stage *::before, .v4r-stage *::after, .v4x-stage *, .v4x-stage *::after { animation: none !important; }
    .v4s-screen:not(.is-1), .v4s-caption:not(.is-1) { opacity: 0; }
    .v4r-ring, .v4r-swipe, .v4x-pointer, .v4x-ring, .v4x-stamp, .v4x-typed { display: none; }
    .v4r-chip, .v4r-toast, .v4r-stamp, .v4x-stage .hs-pill, .v4x-stage .hs-callout { opacity: 1; transform: none; }
    .v4x-swap > .hs-phone.is-2 { opacity: 0; }
}