/* ============================================================
   Veraxsys — Motif A: horizontal lateral pinned scroll
   Beats travel left->right across a pinned stage; cyan thread
   runs along the bottom. Shared tokens/nav/hero/frame from
   redesign.css. Mobile / reduced-motion => vertical fallback.
   ============================================================ */
.mhz{position:relative;z-index:2}
.mhz .stage{position:sticky;top:0;height:100vh;overflow:hidden}
.mhz .track{display:flex;height:100%;will-change:transform}
.mhz .hbeat{flex:0 0 100vw;height:100%;display:grid;place-items:center;padding:130px 26px 56px}
.mhz .pwrap{width:min(960px,92vw);display:grid;gap:24px;text-align:center;opacity:.32;transform:scale(.965);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.mhz .hbeat.on .pwrap{opacity:1;transform:none}
.mhz h2{font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.03em;margin:0 auto;max-width:18ch;background:linear-gradient(180deg,#fff,#b3bcc8);-webkit-background-clip:text;background-clip:text;color:transparent}
.mhz .lead{color:var(--fg2);max-width:560px;margin:0 auto;font-size:16.5px;line-height:1.6}
.mhz .frame{max-width:720px;margin:0 auto;width:100%;transition:box-shadow .6s var(--ease)}
.mhz .frame img{max-height:44vh;object-fit:cover;object-position:top}
.mhz .frame .glow{position:absolute;left:0;right:0;top:-50px;height:140px;background:radial-gradient(60% 100% at 50% 0,rgba(103,232,249,.22),transparent 70%);filter:blur(20px);pointer-events:none}
.mhz .frame.lit{box-shadow:0 50px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(103,232,249,.30),0 0 46px -2px rgba(103,232,249,.40)}
.mhz .frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(115deg,transparent 30%,rgba(77,146,196,.30) 44%,rgba(103,232,249,.85) 50%,rgba(77,146,196,.30) 56%,transparent 70%);transform:translateX(-135%);opacity:0}
.mhz .frame.flash::after{animation:vx-sweep 1.1s var(--ease) 1}
@keyframes vx-sweep{0%{transform:translateX(-135%);opacity:1}100%{transform:translateX(135%);opacity:1}}
.mhz .beat-chips{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.mhz .beat-chips span{font-family:var(--mono);font-size:13px;color:var(--cyan);padding:10px 18px;border-radius:999px;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(120deg,rgba(103,232,249,.5),rgba(255,255,255,.06)) border-box;border:1px solid transparent}

/* WHO it's for — three buyer types, accentuated (hero of the first beat) */
.mhz .who3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:min(960px,92vw);margin:14px auto 0;text-align:left}
.mhz .who{position:relative;padding:30px 24px 26px;border-radius:14px;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02)) border-box;border:1px solid transparent}
.mhz .who .wnode{position:absolute;left:24px;top:-1px;width:38px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:2px;box-shadow:0 0 10px 0 rgba(103,232,249,.6)}
.mhz .who .wt{font-size:clamp(19px,2vw,24px);font-weight:800;letter-spacing:-.02em;color:#fff;margin-top:8px;line-height:1.15}
.mhz .who p{color:var(--fg2);font-size:14px;line-height:1.5;margin:12px 0 0}
a.who{display:block;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
a.who:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(0,0,0,.8)}
a.who:hover .wt{color:var(--cyan)}
@media(max-width:820px){.mhz .who3{grid-template-columns:1fr;width:auto;text-align:center}.mhz .who .wnode{left:50%;transform:translateX(-50%)}}

/* horizontal thread along the bottom — tall clickable strip, 2px line centered.
   Click anywhere on the strip to jump to the nearest beat. */
.hthread{position:fixed;left:8vw;right:8vw;top:96px;height:34px;z-index:40;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);cursor:pointer}
.hthread.show{opacity:1;pointer-events:auto}
.hthread::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:2px;background:linear-gradient(90deg,transparent,rgba(77,146,196,.28) 5%,var(--blue) 28%,var(--cyan) 66%,rgba(103,232,249,.30) 95%,transparent);border-radius:2px;box-shadow:0 0 12px 0 rgba(103,232,249,.30);pointer-events:none}
.hthread .hfill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:2px;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:2px;box-shadow:0 0 14px 1px rgba(103,232,249,.85);transition:width .12s linear;pointer-events:none;z-index:1}
.hthread .hn{position:absolute;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(103,232,249,.08),0 0 10px 1px rgba(103,232,249,.55);pointer-events:none;z-index:2;transition:width .25s var(--ease),height .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.hthread .hn.done{background:var(--cyan);box-shadow:0 0 0 4px rgba(103,232,249,.12),0 0 12px 2px rgba(103,232,249,.70)}
.hthread .hn.on{width:15px;height:15px;background:var(--cyan);box-shadow:0 0 0 5px rgba(103,232,249,.14),0 0 18px 3px rgba(103,232,249,.8)}
.hthread .hlbl{position:absolute;top:30px;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--fg3);white-space:nowrap;pointer-events:none;transition:color .25s var(--ease)}
.hthread .hlbl.on{color:var(--cyan)}

/* scroll affordance — tells the user the pinned section advances on scroll;
   shown only on the first beat, fades the moment they start scrolling */
.hcue{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--fg2);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.hcue.show{opacity:1}
.hcue .ar{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid rgba(103,232,249,.4);color:var(--cyan);animation:vx-bounce 1.6s var(--ease) infinite}
@keyframes vx-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* closing CTA finale reused from zoom-stack via .cta-finale (redefine to be safe) */
.cta-finale{min-height:100vh;display:grid;place-items:center;padding:80px 0}

/* short viewports: shrink media + gaps so a tall beat still fits under the thread */
@media(max-height:860px){.mhz .frame img{max-height:36vh}.mhz .pwrap{gap:16px}.mhz .hbeat{padding:118px 26px 44px}}

/* mobile / reduced-motion: linear vertical sections, no pin, no horizontal thread */
@media(max-width:820px),(prefers-reduced-motion:reduce){
  .mhz .stage{position:static;height:auto;overflow:visible}
  .mhz .track{display:block;height:auto}
  .mhz .hbeat{flex:none;width:auto;min-height:auto;padding:64px 26px}
  .mhz .pwrap{opacity:1;transform:none}
  .mhz{height:auto!important}
  .hthread{display:none}
}