/* ═══════════════════════════════════════════════════════════════════════════
   hero-device.css — VSHR homepage hero device (v4, 2026-05-31).
   Replaces the legacy .mb-13 / .dash-pane / .story-stage iPad cycler.

   EVERY selector is scoped under the `#vshHero` ID (specificity +100) so the
   theme's element/class rules — including the hero's 18px base font-size and
   `.hero h2 {44px}` — can never leak in. A normalizer forces generic
   span/div/h2/etc. to inherit MY sizes, not the theme's.

   Motion (settled 2026-05-31): sequential zero-overlap beat crossfade;
   ±3px device float; one-shot glass glint. Mono-blue chrome. RM handled.
   ═══════════════════════════════════════════════════════════════════════════ */

#vshHero{
  /* self-contained tokens */
  --vsh-ink:#0D1829; --vsh-ink-soft:#3D5266; --vsh-muted:#6B7C8F;
  --vsh-accent:#2563EB; --vsh-accent-deep:#1D4FD7; --vsh-accent-tint:#EAF0FE;
  --vsh-card:#FFFFFF; --vsh-line:rgba(13,24,41,.09);
  --vsh-shadow:0 1px 3px rgba(13,24,41,.06), 0 14px 34px -16px rgba(13,24,41,.22);
  --vsh-ease:cubic-bezier(.22,1,.36,1);
  --vsh-font-h:'Poppins',system-ui,-apple-system,sans-serif;
  --vsh-font-b:'Inter',system-ui,-apple-system,sans-serif;
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--vsh-font-b); font-size:13px; line-height:1.4; font-weight:400;
  letter-spacing:normal; color:var(--vsh-ink); text-transform:none;
  -webkit-font-smoothing:antialiased;
  /* Hidden until hero-device.js measures + zoom-fits, then .vsh-ready fades it
     in at the FINAL size — kills the "load small then grow" flash. No-JS is
     revealed by the <noscript> rule in the partial. */
  opacity:0; transition:opacity .45s var(--vsh-ease);
}
#vshHero.vsh-ready{opacity:1}
@media (prefers-reduced-motion:reduce){#vshHero{transition:none}}
/* box model + defensive resets */
#vshHero *,#vshHero *::before,#vshHero *::after{box-sizing:border-box;margin:0;padding:0}
/* NORMALIZER: generic elements inherit MY tokens, not the theme's (kills the
   theme's `span{18px}` / `.hero h2{44px}` leakage). My class rules below carry
   the #vshHero ID too, so they out-specify this and set the real sizes. */
#vshHero span,#vshHero b,#vshHero i,#vshHero a,#vshHero p,#vshHero h1,#vshHero h2,#vshHero h3,#vshHero div{
  font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;
  font-family:inherit;color:inherit;text-transform:none;text-decoration:none}
#vshHero button{min-width:0;background:none;border:none;font:inherit;color:inherit;cursor:pointer;letter-spacing:inherit}
#vshHero img{max-width:none;display:block}
#vshHero svg{display:block}

#vshHero .vsh-scaler{zoom:1} /* JS sets zoom to fit the container */
#vshHero .vsh-device{position:relative;display:inline-flex;animation:vshFloat 7s cubic-bezier(.42,0,.58,1) infinite;will-change:transform}
@keyframes vshFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (hover:hover){#vshHero .vsh-device:hover{animation-play-state:paused}}
#vshHero .vsh-device::before{content:"";position:absolute;inset:-6% -6%;z-index:-2;pointer-events:none;
  background:radial-gradient(58% 50% at 50% 42%, rgba(13,24,41,.10) 0%, transparent 72%);filter:blur(40px);opacity:.6}
#vshHero .vsh-device::after{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:42px;z-index:-1;
  background:radial-gradient(ellipse at center, rgba(13,24,41,.28) 0%, rgba(13,24,41,0) 70%);filter:blur(18px)}

#vshHero .vsh-ipad{width:400px;aspect-ratio:3/4.16;border-radius:42px;padding:12px;position:relative;
  background:linear-gradient(155deg,#2c2f35 0%,#191b1f 48%,#0d0e11 100%);
  transform-style:preserve-3d;transition:transform .5s var(--vsh-ease);
  box-shadow:0 1px 1px rgba(13,24,41,.05),0 2px 2px rgba(13,24,41,.06),0 4px 8px rgba(13,24,41,.07),
    0 8px 16px rgba(13,24,41,.08),0 16px 32px rgba(13,24,41,.09),0 32px 64px rgba(13,24,41,.12)}
#vshHero .vsh-ipad.vsh-tilting{transition:transform 120ms ease-out}
#vshHero .vsh-ipad::before{content:"";position:absolute;inset:0;border-radius:42px;pointer-events:none;z-index:3;
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.10),inset 0 1px 2px rgba(255,255,255,.05),inset -1px -1px 2px rgba(0,0,0,.9)}
#vshHero .vsh-ipad::after{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;
  background:#0a0a0c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);z-index:4}

#vshHero .vsh-screen{width:100%;height:100%;background:#fff;border-radius:31px;overflow:hidden;display:flex;flex-direction:column;position:relative;
  box-shadow:inset 0 0 3px 1px rgba(0,0,0,.45)}
#vshHero .vsh-screen::before{content:"";position:absolute;inset:0;border-radius:31px;pointer-events:none;z-index:50;
  background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 6%)}
/* Environment reflection — a broad soft sky/ceiling sheen across the upper glass
   that slides down and fades as the device rises out of its tilt (one-shot). */
#vshHero .vsh-screen::after{content:"";position:absolute;inset:0;border-radius:31px;pointer-events:none;z-index:49;opacity:0;
  background:linear-gradient(157deg, rgba(255,255,255,.55) 0%, rgba(208,226,255,.20) 24%, rgba(255,255,255,0) 50%)}
#vshHero.vsh-ready .vsh-screen::after{animation:vshGlassEnv 1.5s var(--vsh-ease) .06s 1 both}
@keyframes vshGlassEnv{
  0%  {opacity:.92;transform:translateY(-15%) scaleY(1.22)}
  58% {opacity:.5}
  100%{opacity:0;transform:translateY(9%) scaleY(1)}
}
/* Specular glass rake — a crisp light streak (bright core + faint dark glass
   edge so it reads even over the white UI) that sweeps as the device tilts up. */
#vshHero .vsh-sweep{position:absolute;inset:-2px;border-radius:31px;pointer-events:none;z-index:51;
  background:linear-gradient(116deg, transparent 38%, rgba(255,255,255,0) 44%, rgba(255,255,255,.72) 50%, rgba(13,24,41,.07) 54%, transparent 62%);
  transform:skewX(-18deg) translateX(-175%)}
#vshHero.vsh-ready .vsh-sweep{animation:vshSweep 1.55s var(--vsh-ease) .5s 1 both}
@keyframes vshSweep{0%{transform:skewX(-18deg) translateX(-175%)}100%{transform:skewX(-18deg) translateX(275%)}}

#vshHero .vsh-statusbar{display:flex;align-items:center;justify-content:space-between;padding:12px 22px 5px;font-size:12px;font-weight:600;color:var(--vsh-ink)}
#vshHero .vsh-statusbar-icons{display:flex;align-items:center;gap:6px}
#vshHero .vsh-tabs{display:flex;align-items:flex-start;justify-content:space-around;padding:3px 8px 8px;border-bottom:1px solid rgba(13,24,41,.10)}
#vshHero .vsh-tab{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--vsh-muted);font-size:8.5px;font-weight:600;line-height:1.1;
  flex:1 1 0;min-width:0;padding:4px 2px;font-family:var(--vsh-font-b);white-space:nowrap}
#vshHero .vsh-tab svg{width:17px;height:17px}
#vshHero .vsh-tab.vsh-active{color:var(--vsh-accent-deep)}
#vshHero .vsh-tabline{width:0;height:2.5px;border-radius:2px;background:var(--vsh-accent);margin-top:2px;transition:width .25s var(--vsh-ease)}
#vshHero .vsh-tab.vsh-active .vsh-tabline{width:18px}

#vshHero .vsh-stage{position:relative;flex:1;overflow:hidden}
#vshHero .vsh-pane{position:absolute;inset:0}
#vshHero .vsh-beat{position:absolute;inset:0;padding:17px 20px 66px;display:flex;flex-direction:column;
  opacity:0;transform:translateY(6px);filter:blur(3px);pointer-events:none;
  transition:opacity .18s var(--vsh-ease),transform .18s var(--vsh-ease),filter .18s var(--vsh-ease)}
/* sequential, zero-overlap: incoming waits for outgoing to fully leave */
#vshHero .vsh-beat.vsh-show{opacity:1;transform:none;filter:blur(0);pointer-events:auto;will-change:opacity,transform;
  transition:opacity .42s var(--vsh-ease) .18s,transform .46s var(--vsh-ease) .18s,filter .4s var(--vsh-ease) .18s}

#vshHero .vsh-anchor{display:flex;align-items:center;gap:9px;margin-bottom:13px}
#vshHero .vsh-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(150deg,#1B6FB3,#0F5C95);color:#fff;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(13,24,41,.06);
  font-family:var(--vsh-font-h);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none}
#vshHero .vsh-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#vshHero .vsh-beat.vsh-show .vsh-av{box-shadow:inset 0 0 0 1px rgba(13,24,41,.06), 0 0 0 2px rgba(37,99,235,.35);transition:box-shadow .4s var(--vsh-ease)}
#vshHero .vsh-who{font-weight:700;font-size:12.5px;line-height:1.1;color:var(--vsh-ink)}
#vshHero .vsh-role{font-size:10.5px;color:var(--vsh-muted);line-height:1.2}
#vshHero .vsh-chip{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--vsh-muted)}
#vshHero .vsh-chip svg{width:13px;height:13px;opacity:.7}
#vshHero .vsh-beat:has(.vsh-eyebrow) .vsh-chip{display:none}

#vshHero .vsh-payoff{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px}
#vshHero .vsh-check{width:62px;height:62px;border-radius:50%;background:var(--vsh-accent-tint);color:var(--vsh-accent-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:5px;transform:scale(.7);opacity:0}
#vshHero .vsh-check svg{width:31px;height:31px;stroke-width:3}
#vshHero .vsh-show .vsh-check{transform:scale(1);opacity:1;transition:transform .5s cubic-bezier(.34,1.18,.64,1) .1s,opacity .38s ease .1s}
#vshHero .vsh-payoff h2{font-family:var(--vsh-font-h);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.14;color:var(--vsh-ink)}
#vshHero .vsh-sub{color:var(--vsh-ink-soft);font-size:13.5px;font-weight:500;line-height:1.35}
#vshHero .vsh-sub .vsh-kw{color:var(--vsh-accent-deep);font-weight:700}
#vshHero .vsh-rowstats{display:flex;margin-top:14px;border:1px solid var(--vsh-line);border-radius:14px;overflow:hidden;background:var(--vsh-card);box-shadow:var(--vsh-shadow)}
#vshHero .vsh-cell{padding:12px 13px;text-align:center;flex:1}
#vshHero .vsh-cell + .vsh-cell{border-left:1px solid rgba(13,24,41,.14)}
#vshHero .vsh-val{font-family:var(--vsh-font-h);font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:-.01em;color:var(--vsh-ink)}
#vshHero .vsh-val.vsh-pill{color:var(--vsh-accent-deep)}
#vshHero .vsh-lbl{font-size:10px;color:#7A8A9B;margin-top:5px;letter-spacing:.01em;line-height:1.2}
#vshHero .vsh-moat{margin-top:auto;font-size:12.5px;color:var(--vsh-ink-soft);font-weight:600;text-align:center;padding-top:16px;padding-bottom:6px;line-height:1.4}
#vshHero .vsh-moat b{color:var(--vsh-ink);font-weight:700}

#vshHero .vsh-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vsh-accent-deep);margin-bottom:10px;line-height:1.2}
#vshHero .vsh-proofcard{background:var(--vsh-card);border:1px solid var(--vsh-line);border-radius:16px;box-shadow:var(--vsh-shadow);padding:14px 15px 12px}
#vshHero .vsh-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
#vshHero .vsh-icowarn{width:30px;height:30px;border-radius:9px;background:var(--vsh-accent-tint);color:var(--vsh-accent);display:flex;align-items:center;justify-content:center;flex:none}
#vshHero .vsh-icowarn svg{width:16px;height:16px}
#vshHero .vsh-htitle{font-weight:700;font-size:13px;line-height:1.15;color:var(--vsh-ink)}
#vshHero .vsh-hsub{font-size:10.5px;color:var(--vsh-muted);line-height:1.2}
#vshHero .vsh-amount{margin-left:auto;font-family:var(--vsh-font-h);font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;color:var(--vsh-ink);white-space:nowrap}
#vshHero .vsh-compare{display:flex;flex-direction:column;gap:6px;margin:2px 0 11px}
#vshHero .vsh-crow{display:flex;align-items:center;gap:8px;font-size:11.5px;padding:8px 10px;border-radius:10px;background:#F6F8FB;
  opacity:0;transform:translateY(7px);transition:opacity .42s var(--vsh-ease),transform .42s var(--vsh-ease)}
#vshHero .vsh-show .vsh-crow{opacity:1;transform:none}
#vshHero .vsh-show .vsh-crow:nth-child(1){transition-delay:.10s}#vshHero .vsh-show .vsh-crow:nth-child(2){transition-delay:.17s}
#vshHero .vsh-crow.vsh-dupe{background:#FDF2F2}
#vshHero .vsh-tag{font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--vsh-muted);width:64px;flex:none}
#vshHero .vsh-crow.vsh-dupe .vsh-tag{color:#C2410C}
#vshHero .vsh-desc{color:var(--vsh-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vshHero .vsh-amt{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;color:var(--vsh-ink);flex:none}
#vshHero .vsh-amt.vsh-strike{text-decoration:line-through;opacity:.5}
#vshHero .vsh-resolved{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--vsh-accent-deep);background:var(--vsh-accent-tint);padding:8px 11px;border-radius:10px;margin-top:2px}
#vshHero .vsh-resolved svg{width:15px;height:15px;flex:none}
#vshHero .vsh-signoff{display:flex;align-items:center;gap:9px;margin-top:12px}
#vshHero .vsh-signoff .vsh-av{width:26px;height:26px;font-size:10px}
#vshHero .vsh-q{font-size:11.5px;color:var(--vsh-ink-soft);font-style:italic;line-height:1.35}

/* Benefits — wallet card */
#vshHero .vsh-wallet{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px}
#vshHero .vsh-wallet-card{border-radius:16px;padding:16px 18px;color:#fff;background:linear-gradient(140deg,#1D4FD7 0%,#1B3A8C 100%);
  box-shadow:0 14px 32px -14px rgba(13,24,41,.55)}
#vshHero .vsh-wallet-card span,#vshHero .vsh-wallet-card div{color:#fff}
#vshHero .vsh-wallet-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.86}
#vshHero .vsh-wallet-plan{font-family:var(--vsh-font-h);font-weight:800;font-size:20px;margin:14px 0 16px}
#vshHero .vsh-wallet-member{display:flex;justify-content:space-between}
#vshHero .vsh-wlbl{font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
#vshHero .vsh-wval{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
#vshHero .vsh-wallet-add{align-self:flex-start;background:#1A2433;color:#fff;border-radius:10px;padding:9px 14px;font-size:11px;font-weight:600;
  font-family:var(--vsh-font-b);display:inline-flex;align-items:center;gap:6px}
#vshHero .vsh-wallet-add svg{width:14px;height:14px}

/* HR + WC — checklist */
#vshHero .vsh-checklist{display:flex;flex-direction:column;gap:9px;margin-bottom:4px}
#vshHero .vsh-cl-row{display:flex;align-items:flex-start;gap:10px;opacity:0;transform:translateY(7px);transition:opacity .42s var(--vsh-ease),transform .42s var(--vsh-ease)}
#vshHero .vsh-show .vsh-cl-row{opacity:1;transform:none}
#vshHero .vsh-show .vsh-cl-row:nth-child(1){transition-delay:.10s}#vshHero .vsh-show .vsh-cl-row:nth-child(2){transition-delay:.18s}
#vshHero .vsh-show .vsh-cl-row:nth-child(3){transition-delay:.26s}#vshHero .vsh-show .vsh-cl-row:nth-child(4){transition-delay:.34s}
#vshHero .vsh-cl-ico{width:22px;height:22px;border-radius:50%;background:var(--vsh-accent-tint);color:var(--vsh-accent-deep);display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
#vshHero .vsh-cl-ico svg{width:13px;height:13px}
#vshHero .vsh-cl-t{font-size:12.5px;font-weight:600;line-height:1.25;color:var(--vsh-ink)}
#vshHero .vsh-cl-s{font-size:10.5px;color:var(--vsh-muted);line-height:1.2}

/* WC — e-mod sparkline */
#vshHero .vsh-wc-emod{text-align:center}
#vshHero .vsh-wc-emod-val{font-family:var(--vsh-font-h);font-weight:800;font-size:30px;letter-spacing:-.02em;color:var(--vsh-ink);font-variant-numeric:tabular-nums;line-height:1}
#vshHero .vsh-wc-emod-lbl{display:block;font-size:12px;color:var(--vsh-ink-soft);margin-top:3px}
#vshHero .vsh-sparkline{width:100%;height:80px;margin:14px 0 2px;position:relative}
#vshHero .vsh-sparkline svg{width:100%;height:100%}
#vshHero .vsh-spark-base{stroke:rgba(13,24,41,.18);stroke-width:1;stroke-dasharray:3 3}
#vshHero .vsh-spark-path{fill:none;stroke:var(--vsh-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
#vshHero .vsh-show .vsh-spark-path{animation:vshSparkDraw 1.1s var(--vsh-ease) .2s forwards}
@keyframes vshSparkDraw{to{stroke-dashoffset:0}}
#vshHero .vsh-spark-lbl{position:absolute;left:0;top:30%;font-size:9px;color:var(--vsh-muted)}
#vshHero .vsh-spark-now{position:absolute;right:0;bottom:6%;font-size:11px;font-weight:700;color:var(--vsh-accent-deep);font-variant-numeric:tabular-nums}

/* in-screen CTA bar */
#vshHero .vsh-ctabar{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px 16px;
  background:linear-gradient(to top,#fff 50%,rgba(255,255,255,.9) 78%,rgba(255,255,255,0))}
#vshHero .vsh-dots{display:flex;gap:6px;min-height:6px}
#vshHero .vsh-dots i{width:6px;height:6px;border-radius:50%;background:rgba(13,24,41,.2);transition:all .35s var(--vsh-ease)}
#vshHero .vsh-dots i.vsh-on{width:18px;border-radius:4px;background:var(--vsh-accent)}
#vshHero .vsh-home-ind{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:110px;height:4px;border-radius:3px;background:rgba(13,24,41,.16);z-index:7}
#vshHero .vsh-cta{position:relative;background:linear-gradient(180deg,#F97316,#F26A0C);color:#fff;font-family:var(--vsh-font-b);font-weight:700;font-size:12.5px;text-decoration:none;
  border-radius:100px;padding:10px 17px;display:inline-flex;align-items:center;gap:7px;overflow:hidden;white-space:nowrap;
  box-shadow:0 1px 2px rgba(13,24,41,.12),0 8px 18px -8px rgba(13,24,41,.30);transition:transform .2s var(--vsh-ease),box-shadow .2s var(--vsh-ease)}
#vshHero .vsh-cta:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(13,24,41,.14),0 12px 24px -8px rgba(13,24,41,.34)}
#vshHero .vsh-cta svg{width:14px;height:14px}
#vshHero .vsh-shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-130%)}
#vshHero .vsh-cta:hover .vsh-shine{transform:translateX(130%);transition:transform 1.1s var(--vsh-ease)}

@media (prefers-reduced-motion: reduce){
  #vshHero .vsh-beat,#vshHero .vsh-beat.vsh-show,#vshHero .vsh-crow,#vshHero .vsh-cl-row,#vshHero .vsh-check{transition-duration:.01s!important;transition-delay:0s!important}
  #vshHero .vsh-show .vsh-crow,#vshHero .vsh-show .vsh-cl-row{transition-delay:0s!important}
  #vshHero .vsh-beat{filter:none!important}
  #vshHero .vsh-sweep,#vshHero .vsh-device,#vshHero .vsh-screen::after{animation:none!important}
  #vshHero .vsh-screen::after{display:none!important}
  #vshHero .vsh-beat.vsh-show .vsh-av{box-shadow:none!important}
  #vshHero .vsh-show .vsh-spark-path{animation:none!important;stroke-dashoffset:0!important}
  #vshHero .vsh-ipad{transform:none!important}
}

/* ═══ !important DEFENSE ═══════════════════════════════════════════════════
   This theme ships aggressive GLOBAL typography resets — bare `h2{font-size:
   clamp()!important}`, `main section h2{}`, an 18px hero base, etc. Those use
   low specificity but `!important`, so they beat my normal ID-scoped rules.
   These ID-scoped `!important` rules out-specify them and lock the device's
   type scale no matter what the host theme does. (The payoff headline is a
   <div class="vsh-h2"> — NOT an <h2> — so global heading rules can't match it.) */
#vshHero .vsh-h2{font-family:var(--vsh-font-h)!important;font-weight:800!important;font-size:22px!important;line-height:1.14!important;letter-spacing:-.02em!important;color:var(--vsh-ink)!important;margin:0!important}
#vshHero .vsh-eyebrow{font-size:10.5px!important;line-height:1.2!important;margin:0 0 10px!important}
#vshHero .vsh-tab,#vshHero .vsh-tab span{font-size:8.5px!important;line-height:1.1!important}
#vshHero .vsh-sub{font-size:13.5px!important;line-height:1.35!important}
#vshHero .vsh-val{font-size:18px!important;line-height:1.05!important}
#vshHero .vsh-lbl{font-size:10px!important;line-height:1.2!important}
#vshHero .vsh-moat{font-size:12.5px!important;line-height:1.4!important}
#vshHero .vsh-who{font-size:12.5px!important;line-height:1.1!important}
#vshHero .vsh-role{font-size:10.5px!important;line-height:1.2!important}
#vshHero .vsh-chip{font-size:10.5px!important}
#vshHero .vsh-cl-t{font-size:12.5px!important;line-height:1.25!important}
#vshHero .vsh-cl-s{font-size:10.5px!important;line-height:1.2!important}
#vshHero .vsh-htitle{font-size:13px!important;line-height:1.15!important}
#vshHero .vsh-hsub{font-size:10.5px!important}
#vshHero .vsh-wc-emod-val{font-size:30px!important;line-height:1!important}
#vshHero .vsh-wc-emod-lbl{font-size:12px!important}
#vshHero .vsh-q{font-size:11.5px!important;line-height:1.35!important}
#vshHero .vsh-wallet-plan{font-size:20px!important;line-height:1.1!important}
#vshHero .vsh-wallet-top{font-size:10px!important}
#vshHero .vsh-wval{font-size:13px!important}#vshHero .vsh-wlbl{font-size:8.5px!important}
#vshHero .vsh-statusbar,#vshHero .vsh-statusbar span{font-size:12px!important}
#vshHero .vsh-amount{font-size:18px!important}
#vshHero .vsh-tag{font-size:9px!important}#vshHero .vsh-crow,#vshHero .vsh-desc,#vshHero .vsh-amt{font-size:11.5px!important}
#vshHero .vsh-resolved{font-size:11.5px!important;line-height:1.3!important}
#vshHero .vsh-cta{font-size:12.5px!important}
#vshHero .vsh-spark-lbl{font-size:9px!important}#vshHero .vsh-spark-now{font-size:11px!important}

/* ═══ PREMIUM screen-content motion (the dashboard UI assembles — never the
   device chrome). Each beat: check strokes on + soft accent halo → headline →
   subline → metric cells deal in left-to-right with a hairline accent. ═══ */
#vshHero .vsh-check{position:relative}
#vshHero .vsh-check::before{content:"";position:absolute;inset:-28%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle, color-mix(in srgb, var(--vsh-accent) 20%, transparent) 0%, transparent 68%);
  opacity:0;transform:scale(.7);transition:opacity .55s var(--vsh-ease) .14s, transform .6s var(--vsh-ease) .14s}
#vshHero .vsh-show .vsh-check::before{opacity:1;transform:scale(1)}
#vshHero .vsh-check svg *{stroke-dasharray:26;stroke-dashoffset:26}
#vshHero .vsh-show .vsh-check svg *{animation:vshDraw .55s var(--vsh-ease) .28s forwards}
@keyframes vshDraw{to{stroke-dashoffset:0}}

#vshHero .vsh-payoff .vsh-h2,#vshHero .vsh-payoff .vsh-sub{opacity:0;transform:translateY(7px);transition:opacity .42s var(--vsh-ease),transform .42s var(--vsh-ease)}
#vshHero .vsh-show .vsh-payoff .vsh-h2{opacity:1;transform:none;transition-delay:.30s}
#vshHero .vsh-show .vsh-payoff .vsh-sub{opacity:1;transform:none;transition-delay:.38s}

#vshHero .vsh-rowstats{position:relative;background:linear-gradient(180deg,#FFFFFF 0%,#FAFCFE 100%)}
#vshHero .vsh-rowstats::after{content:"";position:absolute;top:0;left:16px;right:16px;height:2px;border-radius:0 0 2px 2px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--vsh-accent) 45%, transparent), transparent);opacity:0;transition:opacity .5s ease .5s}
#vshHero .vsh-show .vsh-rowstats::after{opacity:1}
#vshHero .vsh-cell{opacity:0;transform:translateY(6px);transition:opacity .4s var(--vsh-ease),transform .4s var(--vsh-ease)}
#vshHero .vsh-show .vsh-cell{opacity:1;transform:none}
#vshHero .vsh-show .vsh-cell:nth-child(1){transition-delay:.46s}
#vshHero .vsh-show .vsh-cell:nth-child(2){transition-delay:.54s}
#vshHero .vsh-show .vsh-cell:nth-child(3){transition-delay:.62s}

@media (prefers-reduced-motion: reduce){
  #vshHero .vsh-check::before,#vshHero .vsh-payoff .vsh-h2,#vshHero .vsh-payoff .vsh-sub,#vshHero .vsh-cell,#vshHero .vsh-rowstats::after{transition-duration:.01s!important;transition-delay:0s!important;opacity:1!important;transform:none!important}
  #vshHero .vsh-show .vsh-check svg *{animation:none!important;stroke-dashoffset:0!important}
}

/* ═══ PREMIUM pass 2: card materials + sparkline area + tab affordance ═══ */
/* cards lit from above — a hairline inner top highlight + a deeper, softer drop */
#vshHero .vsh-rowstats{box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(13,24,41,.05), 0 12px 30px -16px rgba(13,24,41,.26)}
#vshHero .vsh-proofcard{box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(13,24,41,.05), 0 14px 32px -16px rgba(13,24,41,.28)}
#vshHero .vsh-wallet-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 16px 36px -16px rgba(13,24,41,.6)}
#vshHero .vsh-tab{transition:color .2s var(--vsh-ease)}
@media (hover:hover){#vshHero .vsh-tab:not(.vsh-active):hover{color:var(--vsh-ink-soft)}}
/* WC e-mod: soft gradient area under the line so "below industry average" reads spatially */
#vshHero .vsh-spark-fill{opacity:0;transition:opacity .6s ease .45s}
#vshHero .vsh-show .vsh-spark-fill{opacity:1}
@media (prefers-reduced-motion: reduce){#vshHero .vsh-spark-fill{transition-duration:.01s!important;opacity:1!important}}

/* ═══ PREMIUM pass 3: richer per-pane visuals ═══ */
/* Benefits — a light sweep catches the insurance card as it lands */
#vshHero .vsh-wallet-card{position:relative;overflow:hidden}
#vshHero .vsh-card-sheen{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.22) 50%, transparent 64%);transform:translateX(-130%)}
#vshHero .vsh-show .vsh-card-sheen{animation:vshSheen 1.3s var(--vsh-ease) .55s 1}
@keyframes vshSheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
/* HR + WC — each checklist tick draws itself in as its row deals in */
#vshHero .vsh-cl-ico svg *{stroke-dasharray:22;stroke-dashoffset:22}
#vshHero .vsh-show .vsh-cl-row:nth-child(1) .vsh-cl-ico svg *{animation:vshDraw .4s var(--vsh-ease) .22s forwards}
#vshHero .vsh-show .vsh-cl-row:nth-child(2) .vsh-cl-ico svg *{animation:vshDraw .4s var(--vsh-ease) .30s forwards}
#vshHero .vsh-show .vsh-cl-row:nth-child(3) .vsh-cl-ico svg *{animation:vshDraw .4s var(--vsh-ease) .38s forwards}
#vshHero .vsh-show .vsh-cl-row:nth-child(4) .vsh-cl-ico svg *{animation:vshDraw .4s var(--vsh-ease) .46s forwards}
/* Finances — the duplicate charge gets struck through, drawn live */
#vshHero .vsh-amt.vsh-strike{position:relative;text-decoration:none}
#vshHero .vsh-amt.vsh-strike::after{content:"";position:absolute;left:-1px;right:-1px;top:52%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--vsh-ease) .55s}
#vshHero .vsh-show .vsh-amt.vsh-strike::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){
  #vshHero .vsh-card-sheen{display:none!important}
  #vshHero .vsh-cl-ico svg *{stroke-dashoffset:0!important}
  #vshHero .vsh-show .vsh-cl-row .vsh-cl-ico svg *{animation:none!important;stroke-dashoffset:0!important}
  #vshHero .vsh-amt.vsh-strike{text-decoration:line-through!important}
  #vshHero .vsh-amt.vsh-strike::after{display:none!important}
}

/* ═══ DESIGN PANEL PASS (2026-05-31): synthesized from a 6-lens critique ═══ */
/* R1 — top-anchor the payoff so every beat's first content lands at the same Y
   as the dense beats (kills the cross-pane anchor jump + airy dead-air) */
#vshHero .vsh-payoff{justify-content:flex-start!important;padding-top:6px;gap:6px}
#vshHero .vsh-payoff .vsh-check{margin-top:4px}
#vshHero .vsh-payoff .vsh-rowstats{margin-top:18px}
/* R3 — WCAG AA: lift muted/label greys to >=4.5:1 on white */
#vshHero{--vsh-muted:#5E6F82}
#vshHero .vsh-lbl{color:#5E6F82!important}
#vshHero .vsh-spark-lbl{color:#5E6F82}
/* R7 — balance the stat row: tracking on long numbers, word-values one tier down */
#vshHero .vsh-cell{padding:12px 10px}
#vshHero .vsh-val{letter-spacing:-.015em!important}
#vshHero .vsh-val.vsh-pill{font-size:16px!important;letter-spacing:-.005em!important}
/* R8 — unify avatar material (photos get the hairline initials already have) +
   fix the divider/edge hierarchy inversion (internal lines <= the card edge) */
#vshHero .vsh-av img{box-shadow:inset 0 0 0 1px rgba(13,24,41,.10)}
#vshHero .vsh-cell + .vsh-cell{border-left-color:rgba(13,24,41,.09)}
/* R4 — active tab gets a soft mono-blue selection plate (iOS/Rippling convention),
   fired once per tab change (not looped); the hairline underline stays */
#vshHero .vsh-tab{position:relative;border-radius:10px}
#vshHero .vsh-tab::before{content:"";position:absolute;inset:2px 1px;border-radius:9px;background:var(--vsh-accent-tint);opacity:0;transform:scale(.92);transform-origin:center;z-index:-1;transition:opacity .25s var(--vsh-ease),transform .25s var(--vsh-ease)}
#vshHero .vsh-tab.vsh-active::before{opacity:1;transform:scale(1)}
/* R5 — contain the two tallest panes (HR, WC) instead of clipping under the CTA at
   small zoom; tighten the CTA fade reserve so it never eats a content row */
#vshHero .vsh-beat{padding-bottom:62px;min-height:0}
#vshHero .vsh-pane[data-p="2"] .vsh-beat,#vshHero .vsh-pane[data-p="4"] .vsh-beat{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#vshHero .vsh-pane[data-p="2"] .vsh-beat::-webkit-scrollbar,#vshHero .vsh-pane[data-p="4"] .vsh-beat::-webkit-scrollbar{display:none}
#vshHero .vsh-ctabar{padding:11px 16px 14px}
/* R9 — demote the kicker eyebrow below the identity row (identity reads first) */
#vshHero .vsh-beat:has(.vsh-eyebrow) .vsh-anchor{margin-bottom:9px}
#vshHero .vsh-eyebrow{font-size:10px!important;letter-spacing:.14em;margin:0 0 11px!important;color:var(--vsh-accent)}
/* R10 — visible focus rings (outline, so the CTA's overflow:hidden can't clip it) */
#vshHero .vsh-tab:focus-visible{outline:2px solid var(--vsh-accent-deep);outline-offset:2px;border-radius:6px}
#vshHero .vsh-cta:focus-visible{outline:2px solid #1D4FD7;outline-offset:3px}
/* a11y — off-screen live region for the auto-rotating content */
#vshHero .vsh-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){ #vshHero .vsh-tab::before{transition:none!important} }

/* ═══ Payroll "Same Day Pay" beat — deposit notification card ═══ */
#vshHero .vsh-notif{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--vsh-line);border-radius:14px;padding:12px 14px;margin-bottom:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(13,24,41,.05), 0 12px 30px -16px rgba(13,24,41,.26);
  opacity:0;transform:translateY(8px);transition:opacity .42s var(--vsh-ease),transform .42s var(--vsh-ease)}
#vshHero .vsh-show .vsh-notif{opacity:1;transform:none;transition-delay:.14s}
#vshHero .vsh-notif-ico{width:38px;height:38px;border-radius:11px;background:var(--vsh-accent-tint);color:var(--vsh-accent-deep);display:flex;align-items:center;justify-content:center;flex:none}
#vshHero .vsh-notif-ico svg{width:20px;height:20px}
#vshHero .vsh-notif-body{flex:1;min-width:0}
#vshHero .vsh-notif-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
#vshHero .vsh-notif-t{font-family:var(--vsh-font-h)!important;font-weight:800!important;font-size:14px!important;color:var(--vsh-ink)}
#vshHero .vsh-notif-when{font-size:10px!important;color:var(--vsh-muted)}
#vshHero .vsh-notif-s{font-size:11.5px!important;color:var(--vsh-ink-soft);margin-top:2px;line-height:1.35}
@media (prefers-reduced-motion: reduce){#vshHero .vsh-notif{transition-duration:.01s!important;transition-delay:0s!important;opacity:1!important;transform:none!important}}

/* ═══ Payroll Same Day Pay — employee phone LOCKSCREEN (dog wallpaper + deposit notification) ═══ */
#vshHero .vsh-phonewrap{flex:1;display:flex;align-items:center;justify-content:center;padding:2px 0 4px}
#vshHero .vsh-phone{position:relative;width:172px;aspect-ratio:9/17;border-radius:26px;overflow:hidden;background:#0c0d10;border:4px solid #0c0d10;
  box-shadow:0 1px 1px rgba(13,24,41,.10),0 18px 42px -14px rgba(13,24,41,.55);
  opacity:0;transform:translateY(10px) scale(.97);transition:opacity .45s var(--vsh-ease),transform .5s var(--vsh-ease)}
#vshHero .vsh-show .vsh-phone{opacity:1;transform:none;transition-delay:.12s}
#vshHero .vsh-phone-wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#vshHero .vsh-phone-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,20,.46) 0%,rgba(8,12,20,.04) 32%,rgba(8,12,20,.04) 62%,rgba(8,12,20,.22) 100%)}
#vshHero .vsh-phone-time{position:absolute;top:15px;left:0;right:0;text-align:center;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
#vshHero .vsh-phone-clock{display:block;font-family:var(--vsh-font-h)!important;font-weight:700!important;font-size:34px!important;line-height:1!important;letter-spacing:-.01em}
#vshHero .vsh-phone-date{display:block;font-size:10px!important;font-weight:600;margin-top:3px;opacity:.94}
#vshHero .vsh-phone-notif{position:absolute;left:8px;right:8px;top:46%;display:flex;align-items:flex-start;gap:8px;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-radius:14px;padding:9px 10px;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.45);
  opacity:0;transform:translateY(16px);transition:opacity .42s var(--vsh-ease) .5s,transform .5s var(--vsh-ease) .5s}
#vshHero .vsh-show .vsh-phone-notif{opacity:1;transform:none}
#vshHero .vsh-pn-ico{width:27px;height:27px;border-radius:8px;background:var(--vsh-accent);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
#vshHero .vsh-pn-ico svg{width:15px;height:15px}
#vshHero .vsh-pn-body{flex:1;min-width:0}
#vshHero .vsh-pn-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
#vshHero .vsh-pn-app{font-size:8.5px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.06em;color:var(--vsh-accent-deep)}
#vshHero .vsh-pn-when{font-size:8.5px!important;color:var(--vsh-muted)}
#vshHero .vsh-pn-t{font-family:var(--vsh-font-h)!important;font-weight:800!important;font-size:13px!important;color:var(--vsh-ink);margin-top:1px}
#vshHero .vsh-pn-s{font-size:10.5px!important;color:var(--vsh-ink-soft);line-height:1.3;margin-top:1px}
@media (prefers-reduced-motion:reduce){#vshHero .vsh-phone,#vshHero .vsh-phone-notif{transition-duration:.01s!important;transition-delay:0s!important;opacity:1!important;transform:none!important}}

/* ═══ Payroll Beat 2 — full-bleed employee LOCKSCREEN "got paid" (replica of the
   original Wallet-style payslip card; dog wallpaper; VSHR V logo) ═══ */
#vshHero .vsh-lockbeat{padding:0!important;overflow:hidden}
#vshHero .vsh-lock-bg{position:absolute;inset:0;overflow:hidden}
/* Framed so Kona's face (upper-center of the source) is the visible subject,
   zoomed in and lightened so she reads through the lockscreen scrim. */
#vshHero .vsh-lock-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%;transform:scale(1.24);transform-origin:50% 24%;filter:brightness(.78) saturate(1.12)}
#vshHero .vsh-lock-vig{position:absolute;inset:0;background:radial-gradient(ellipse 86% 58% at 50% 84%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 60%, transparent 100%), linear-gradient(180deg, rgba(0,0,0,.16) 0%, transparent 30%, transparent 56%, rgba(0,0,0,.52) 100%)}
#vshHero .vsh-lock-time{position:absolute;left:0;right:0;top:22px;text-align:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
#vshHero .vsh-lock-day{font-size:11px!important;font-weight:600;opacity:.92;letter-spacing:.01em}
#vshHero .vsh-lock-hour{font-family:var(--vsh-font-h)!important;font-size:50px!important;font-weight:300!important;line-height:1!important;letter-spacing:-.025em;margin-top:2px}
#vshHero .vsh-lock-name{position:absolute;left:0;right:0;bottom:60px;text-align:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);font-size:9.5px!important;font-weight:600;letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:6px}
#vshHero .vsh-lock-dot{width:6px;height:6px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
#vshHero .vsh-payslip{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(88%,300px);padding:17px 17px 13px;border-radius:22px;background:#fff;color:#07192E;
  box-shadow:0 40px 80px -28px rgba(7,25,46,.62),0 16px 36px -12px rgba(7,25,46,.38),0 1px 0 rgba(255,255,255,.95) inset;isolation:isolate;
  opacity:0;transition:opacity .5s var(--vsh-ease) .12s}
#vshHero .vsh-show .vsh-payslip{opacity:1}
#vshHero .vsh-payslip>*{opacity:0;transform:translateY(5px);transition:opacity .4s var(--vsh-ease),transform .4s var(--vsh-ease)}
#vshHero .vsh-show .vsh-payslip>*{opacity:1;transform:none}
#vshHero .vsh-show .vsh-pay-brand{transition-delay:.30s}
#vshHero .vsh-show .vsh-pay-eyebrow{transition-delay:.40s}
#vshHero .vsh-show .vsh-pay-amount{transition-delay:.50s}
#vshHero .vsh-show .vsh-pay-badge{transition-delay:.55s}
#vshHero .vsh-show .vsh-pay-bank{transition-delay:.62s}
#vshHero .vsh-show .vsh-pay-sign{transition-delay:.74s}
#vshHero .vsh-pay-badge{position:absolute;top:-9px;left:17px;z-index:2;padding:4px 9px;background:linear-gradient(135deg,#29ABE2,#1479A3);color:#fff;font-size:8.5px!important;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:6px;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 4px 10px -2px rgba(20,121,163,.55)}
#vshHero .vsh-pay-brand{display:flex;align-items:center;margin:0 0 13px}
#vshHero .vsh-pay-mark{display:inline-flex;width:30px;height:30px;border-radius:9px;background:#fff;align-items:center;justify-content:center;box-shadow:0 5px 12px -4px rgba(13,24,41,.18),0 0 0 1px rgba(13,24,41,.06);margin-right:9px;padding:3px 5px;flex:none}
#vshHero .vsh-pay-mark img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain}
#vshHero .vsh-pay-brandname{font-family:var(--vsh-font-h)!important;font-weight:700!important;font-size:13px!important;color:#07192E;letter-spacing:-.005em}
#vshHero .vsh-pay-eyebrow{display:flex;align-items:center;gap:6px;font-size:9.5px!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1479A3;margin-bottom:6px}
#vshHero .vsh-pay-dot{width:5px;height:5px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.18);flex:none}
#vshHero .vsh-pay-amount{font-family:var(--vsh-font-h)!important;font-weight:800!important;font-size:40px!important;color:#07192E;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1!important;margin:0 0 13px}
#vshHero .vsh-pay-bank{display:flex;align-items:center;gap:8px;padding:9px 11px;background:rgba(13,24,41,.04);border-radius:10px;margin:0 0 11px}
#vshHero .vsh-pay-bankmark{flex:none;width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#117ACA,#0B5394);color:#fff;display:inline-flex;align-items:center;justify-content:center}
#vshHero .vsh-pay-banktext{flex:1;min-width:0;font-size:11px!important;font-weight:600;color:#3D5266;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vshHero .vsh-pay-bankamt{flex:none;font-size:11.5px!important;font-weight:700;color:#15803D;font-variant-numeric:tabular-nums}
#vshHero .vsh-pay-sign{display:flex;align-items:center;gap:9px;padding-top:11px;border-top:1px solid rgba(13,24,41,.06)}
#vshHero .vsh-pay-av{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#5b25b8);color:#fff;font-size:9px!important;font-weight:700;line-height:26px;text-align:center;letter-spacing:.04em}
#vshHero .vsh-pay-signtxt{flex:1;min-width:0;line-height:1.2}
#vshHero .vsh-pay-quote{font-size:11px!important;font-weight:600;color:#07192E;line-height:1.25}
#vshHero .vsh-pay-by{font-size:9px!important;color:#6B7C8F;margin-top:1px}
#vshHero .vsh-pay-check{flex:none;width:22px;height:22px;border-radius:50%;background:#15803D;color:#fff;display:inline-flex;align-items:center;justify-content:center}
#vshHero .vsh-pay-check svg{width:13px;height:13px;stroke-width:3}
/* CTA bar adapts on the dark lockscreen beat (no white wash) */
#vshHero.vsh-lockon .vsh-ctabar{background:linear-gradient(to top, rgba(7,25,46,.55) 0%, rgba(7,25,46,.16) 60%, transparent 100%)}
#vshHero.vsh-lockon .vsh-dots i{background:rgba(255,255,255,.45)}
#vshHero.vsh-lockon .vsh-dots i.vsh-on{background:#fff}
@media (prefers-reduced-motion:reduce){
  #vshHero .vsh-payslip{transition-duration:.01s!important;opacity:1!important}
  #vshHero .vsh-payslip>*{transition-duration:.01s!important;transition-delay:0s!important;opacity:1!important;transform:none!important}
}

/* ════════════════════════════════════════════════════════════════════════
   CINEMATIC ENTRANCE (2026-05-31, striking pass 4)
   The device floats up and settles into its pool of light as the headline
   copy finishes revealing — the grand finale of the first-paint cascade.
   Animates #vshHero (device root, INSIDE .hero-scene) so the parent's
   aurora/stage glow stays put and the device floats INTO it. Transform +
   opacity only → GPU-composited; never changes layout size, so fit()'s
   ResizeObserver (which watches clientWidth/Height) never refires. The
   scaler-zoom (child) and ipad mouse-tilt (descendant) compose on top.
   ════════════════════════════════════════════════════════════════════════ */
/* The device lies pitched back ~46° in a pool of light, then RISES and tilts
   up to face the viewer — pivoting from its base like it's standing up. A real
   `perspective()` is baked into the transform so the rotateX reads as true 3D
   depth (the prior version had no perspective, so it just scaled .93→1 and
   "jumped" to size). A 5° overshoot past vertical gives it cinematic weight as
   it rocks to rest. Reflection light (.vsh-sweep glass rake + .vsh-screen::after
   environment sheen) is timed to rake across the glass as it rises. */
@keyframes vshDeviceIn{
  0%   { opacity:0; transform:perspective(1600px) translateY(74px) rotateX(46deg) scale(.985); }
  30%  { opacity:1; }
  70%  { transform:perspective(1600px) translateY(-7px) rotateX(-5deg) scale(1.006); }
  100% { opacity:1; transform:perspective(1600px) translateY(0) rotateX(0deg) scale(1); }
}
/* Reveal on LOAD (2026-06-03). Was gated on `.vsh-ready`, which the deferred
   hero-device.js only adds ~1s into the load (cold AND warm — it sits behind
   home-page.js + the render-blocking stylesheet chain). That left the device
   invisible for ~1s while the logo bar below showed through ("logos, then the
   iPad pops in"). Now the entrance plays on first paint; JS only refines the
   zoom-fit, which happens INSIDE the reserved .hero-scene slot (home-inline.css),
   so there's no layout shift either way. The desktop default zoom below makes the
   pre-fit size ≈ the fitted size, so the JS adjustment is barely perceptible. */
@media (prefers-reduced-motion: no-preference){
  #vshHero{
    transform-origin:50% 84%;
    animation:vshDeviceIn 1.4s cubic-bezier(.18,.78,.26,1) .08s both;
    will-change:transform, opacity;
    backface-visibility:hidden;
  }
}
@media (prefers-reduced-motion: reduce){
  /* No tilt-up for reduced-motion, but still reveal on load (don't wait for JS). */
  #vshHero{animation:vshFadeInOnly .4s ease .06s both}
}
@keyframes vshFadeInOnly{from{opacity:0}to{opacity:1}}
/* Desktop: a default zoom that approximates fit()'s typical laptop result, so the
   device reveals at ~final size on first paint and the JS zoom-fit only fine-tunes
   it (no visible grow). JS overrides this inline once it measures. Mobile keeps
   zoom:1 and scales down via JS as before. */
@media (min-width:1101px){ #vshHero .vsh-scaler{ zoom:1.25 } }

/* ═══ PREMIUM PASS 5 (2026-06-08) — screen-content refinements ONLY. Device
   chrome (frame, glass sweep, cinematic 3D entrance) deliberately untouched.
   Respects prior decisions: pill value stays 16px (R7), the internal divider
   peaks at the R8 card-edge ceiling (.09) so it never out-weighs the border,
   and labels keep the AA-compliant grey #5E6F82 (design-panel R3). Fully
   contained — revert by deleting this block. ═══════════════════════════════ */

/* Richer material: unify the KPI card's radius with the proof/wallet cards and
   deepen the lift so it reads as a raised surface, not a flat strip. */
#vshHero .vsh-rowstats{border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(13,24,41,.05), 0 22px 46px -22px rgba(13,24,41,.34)}

/* Gradient hairline divider — softly fades at top/bottom (a premium detail vs a
   hard rule), peak alpha held at the R8 card-edge value so hierarchy is kept. */
#vshHero .vsh-cell{position:relative;z-index:1}
#vshHero .vsh-cell + .vsh-cell{border-left:0;
  background:linear-gradient(180deg, transparent, rgba(13,24,41,.09) 24%, rgba(13,24,41,.09) 76%, transparent) left center / 1px 100% no-repeat}

/* The standout metric gets a mono-blue gradient fill (color only — size stays
   16px per R7), tying it to the dashboard's accent without shouting. */
#vshHero .vsh-val.vsh-pill{background:linear-gradient(135deg,#2F6BFF 0%,#1D4FD7 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* (Micro-cap labels were tried here but uppercase+tracking overflowed the
   narrow stat cells — e.g. "PLAN CHOSEN" — so labels stay as designed.) */

/* One-shot light sheen rakes across the stat card as it lands — same language as
   the wallet-card sheen. Sits BEHIND the cells (z-index:0) so text never washes
   out; clipped by the card's existing overflow:hidden + border-radius. */
#vshHero .vsh-rowstats::before{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;z-index:0;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);transform:translateX(-130%);opacity:0}
#vshHero .vsh-show .vsh-rowstats::before{animation:vshRowSheen 1.2s var(--vsh-ease) .72s 1 both}
@keyframes vshRowSheen{0%{opacity:0;transform:translateX(-130%)}22%{opacity:1}100%{opacity:0;transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){#vshHero .vsh-show .vsh-rowstats::before{animation:none!important}}

/* ═══ MANUAL PACING CONTROLS (2026-06-08) — prev/next + clickable dots in the
   bottom bar so the reader can step through the demo at their own speed (the
   dots were previously inert). Pause-on-hover already exists. ═══ */
#vshHero .vsh-nav{display:flex;align-items:center;gap:5px}
/* Small, subtle chevrons (no pill) — a sliver, not a button. Transparent
   padding keeps a usable hit area without visual weight. */
#vshHero .vsh-navbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:0;min-height:0; /* defeat the global button touch-target (var(--touch-min)=48px) */
  padding:4px;background:none;border-radius:4px;color:var(--vsh-muted);opacity:.5;cursor:pointer;
  transition:color .2s var(--vsh-ease),opacity .2s var(--vsh-ease)}
#vshHero .vsh-navbtn svg{width:9px;height:9px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){#vshHero .vsh-navbtn:hover{color:var(--vsh-accent-deep);opacity:1}}
#vshHero .vsh-navbtn:focus-visible{outline:2px solid var(--vsh-accent-deep);outline-offset:1px;opacity:1}
#vshHero .vsh-dots i{cursor:pointer}
#vshHero .vsh-dots i:focus-visible{outline:2px solid var(--vsh-accent-deep);outline-offset:2px}
/* Dark full-bleed lockscreen beat: lift the controls for contrast. */
#vshHero.vsh-lockon .vsh-navbtn{color:rgba(255,255,255,.8)}
@media (hover:hover){#vshHero.vsh-lockon .vsh-navbtn:hover{color:#fff}}