/* ============================================================================
   Vantra Projects marketing site — design system.
   Static, no-JS friendly. Self-hosted Inter variable font.
   Everything is scoped under `.vmkt` so the same stylesheet is safe to load in
   the SPA (the React landing renders <div class="vmkt">) without leaking into
   the app UI. Static pages set <body class="vmkt">.
   The product surfaces shown across the site are pure CSS mockups (.mk-*), not
   screenshots — clearly stylised representations built from the brand palette.
   Bump the ?v= query in each page's <link> when this file changes.
   ============================================================================ */
@font-face {
  font-family: 'InterVar';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.vmkt {
  --ink:#111d29; --t1:#18222f; --t2:#5a6675; --t3:#8b95a3; --soft:#98a2b0;
  --line:#e8ebef; --line2:#eef1f5;
  --slate:#223947; --slate2:#2c4a5d; --slate3:#39586c; --slate-deep:#182b36;
  --tint:#eef1f4; --tint2:#f4f6f8;
  --bg:#ffffff; --bg2:#f7f8fa; --bg3:#eef2f5;
  --grad:linear-gradient(135deg,#2c4a5d 0%,#223947 100%);
  --grad-soft:linear-gradient(135deg,#39586c 0%,#223947 100%);
  --accent:#059669; --accent-2:#0b7a67; --accent-bg:#e7f6ef;
  --green:#10b981; --green-bg:#e9f9f1;
  --amber:#b45309; --amber-bg:#fdf3e7;
  --blue:#2563eb; --purple:#7c3aed;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  --sh-xs:0 1px 2px rgba(15,25,38,.05);
  --sh-sm:0 2px 6px -1px rgba(15,25,38,.08), 0 1px 2px rgba(15,25,38,.04);
  --sh-md:0 14px 34px -16px rgba(15,25,38,.25);
  --sh-lg:0 42px 84px -32px rgba(15,25,38,.36), 0 18px 36px -22px rgba(15,25,38,.22);
  --max:1152px;
  --sec-y:128px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* the landing/body surface */
  min-height:100dvh;
  background:var(--bg); color:var(--t1);
  font:16px/1.62 'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* Stated, not inherited: the SPA's global.css tracks body text at -0.006em,
     and this sheet is loaded there too. Without resetting it the React pages
     wearing .vmkt set type fractionally tighter than the static twins. */
  letter-spacing:normal;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:'cv11','ss01';
  scroll-behavior:smooth;
  overflow-x:clip;
}
/* Global rules kept deliberately harmless so this sheet can also load inside the
   SPA shell (for the React landing) without touching the app UI. Everything
   visual is scoped under .vmkt. Static marketing pages set <body class="vmkt">. */
body.vmkt { margin:0; scroll-behavior:smooth; overflow-x:clip; }
/* Static marketing pages scroll on <html>; clip its horizontal overflow too
   (matches only when the page is a marketing page, never the app). */
html:has(body.vmkt) { overflow-x:clip; }
.vmkt *, .vmkt *::before, .vmkt *::after { box-sizing:border-box; }
.vmkt a { color:var(--slate2); text-decoration:none; }
.vmkt img { max-width:100%; display:block; }
.vmkt ::selection { background:rgba(16,185,129,.22); }
.vmkt .wrap { max-width:var(--max); margin:0 auto; padding:0 28px; }
.vmkt .center { text-align:center; }

/* ---------- buttons ---------- */
.vmkt .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:15px; line-height:1; padding:13px 22px; border-radius:var(--r-md);
  border:1px solid transparent; cursor:pointer; white-space:nowrap; font-family:inherit;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s, border-color .16s, background .16s; }
.vmkt .btn-primary { background:var(--grad); color:#fff;
  box-shadow:0 2px 6px -1px rgba(34,57,71,.4), 0 0 0 1px rgba(34,57,71,.5), inset 0 1px 0 rgba(255,255,255,.14); }
.vmkt .btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px);
  box-shadow:0 12px 28px -10px rgba(16,60,48,.6), 0 0 0 1px rgba(34,57,71,.5), inset 0 1px 0 rgba(255,255,255,.18); }
.vmkt .btn-primary:active { transform:translateY(0); }
.vmkt .btn-ghost { background:#fff; color:var(--t1); border-color:var(--line); box-shadow:var(--sh-xs); }
.vmkt .btn-ghost:hover { border-color:#c6d0d8; transform:translateY(-1px); box-shadow:var(--sh-sm); }
.vmkt .btn-light { background:#fff; color:var(--slate); }
.vmkt .btn-light:hover { transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(0,0,0,.45); }
.vmkt .btn-sm { padding:9px 16px; font-size:13.5px; border-radius:10px; }
.vmkt .btn-lg { padding:16px 30px; font-size:16px; border-radius:14px; }
.vmkt .btn .arr { transition:transform .16s var(--ease); }
.vmkt .btn:hover .arr { transform:translateX(3px); }

/* ---------- nav ---------- */
.vmkt .nav { background:rgba(255,255,255,.82); backdrop-filter:saturate(1.5) blur(16px);
  -webkit-backdrop-filter:saturate(1.5) blur(16px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;
  box-shadow:0 1px 0 rgba(20,40,54,.03), 0 10px 30px -24px rgba(20,40,54,.55); }
.vmkt .nav-in { display:flex; align-items:center; gap:26px; height:84px; position:relative; }
.vmkt .brand { display:inline-flex; align-items:center; gap:11px; flex:none; }
/* Logo mark sits in a rounded-square brand tile, mirroring the app sidebar. */
.vmkt .brand-mk { width:38px; height:38px; border-radius:11px; background:var(--grad); padding:7px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(16,32,42,.3), inset 0 1px 0 rgba(255,255,255,.14); }
.vmkt .brand-mk img { width:100%; height:100%; object-fit:contain; display:block; }
.vmkt .brand .wm { font-size:19px; font-weight:750; letter-spacing:-.02em; color:var(--ink); }
.vmkt .brand .wm span { color:var(--t3); font-weight:600; margin-left:-0.05em; }
.vmkt .nav-toggle { display:none; }
.vmkt .nav-burger { display:none; }
/* Stretch the link row to the full nav height so the mega triggers reach all
   the way down to the panel — otherwise there's a dead gap between the centred
   trigger and the fixed mega, and the menu closes before the cursor arrives. */
.vmkt .nav-links { margin-left:auto; align-self:stretch; display:flex; align-items:center; gap:4px; }
.vmkt .nav-links > * { flex:none; }
.vmkt .nav-links > a:not(.btn) { color:var(--t2); font-size:14.5px; font-weight:550; padding:9px 13px; border-radius:10px;
  white-space:nowrap; transition:background .14s, color .14s; }
.vmkt .nav-links > a:not(.btn):hover { color:var(--ink); background:var(--tint2); }
.vmkt .nav-links > a.is-active { color:var(--ink); background:var(--tint2); }
.vmkt .nav-sep { width:1px; height:22px; background:var(--line); margin:0 10px; }
.vmkt .nav-cta { margin-left:8px; }
/* homepage: nav rides transparent over the dark hero, then frosts on scroll */
.vmkt .nav.nav-hero { transition:background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease); }
.vmkt .nav.nav-hero:not(.scrolled) { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; box-shadow:none; }
.vmkt .nav.nav-hero.scrolled { background:rgba(255,255,255,.9); backdrop-filter:saturate(1.7) blur(20px); -webkit-backdrop-filter:saturate(1.7) blur(20px);
  border-bottom-color:rgba(20,40,54,.08); box-shadow:0 1px 0 rgba(20,40,54,.05), 0 12px 36px -20px rgba(20,40,54,.5); }
.vmkt .nav.nav-hero:not(.scrolled) .brand .wm { color:#fff; }
.vmkt .nav.nav-hero:not(.scrolled) .brand .wm span { color:rgba(255,255,255,.58); }
.vmkt .nav.nav-hero:not(.scrolled) .brand-mk { box-shadow:0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -6px rgba(0,0,0,.55); }
.vmkt .nav.nav-hero:not(.scrolled) .nav-links > a:not(.btn), .vmkt .nav.nav-hero:not(.scrolled) .nav-trigger { color:rgba(236,243,246,.9); }
.vmkt .nav.nav-hero:not(.scrolled) .nav-links > a:not(.btn):hover, .vmkt .nav.nav-hero:not(.scrolled) .nav-trigger:hover,
.vmkt .nav.nav-hero:not(.scrolled) .nav-item.has-mega:focus-within .nav-trigger { color:#fff; background:rgba(255,255,255,.12); }
.vmkt .nav.nav-hero:not(.scrolled) .nav-sep { background:rgba(255,255,255,.22); }
/* On the dark hero the primary CTA becomes a solid white pill — the single
   unmistakable anchor in the nav; on scroll it returns to the slate fill. */
.vmkt .nav.nav-hero:not(.scrolled) .btn-primary { background:#fff; color:var(--slate);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.7); }
.vmkt .nav.nav-hero:not(.scrolled) .btn-primary:hover { background:#fff; filter:none; transform:translateY(-1px);
  box-shadow:0 14px 30px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.85); }

/* ---------- mega menu (CSS-only, no JS) ---------- */
/* The app ships an unscoped `.nav-item` (sidebar) with width:100%/gap/padding
   AND a :hover/.is-active background. When this landing renders inside the app
   shell that sheet also loads, so we reset the layout props here — and clear the
   sidebar's hover/active background, which would otherwise paint a light pill
   behind the (light-on-dark) mega trigger and make its label unreadable. */
.vmkt .nav-item { position:relative; display:inline-flex; align-items:center; width:auto; flex:0 0 auto; gap:0; padding:0; background:transparent; border-radius:0; }
.vmkt .nav-item:hover, .vmkt .nav-item:focus-within, .vmkt .nav-item.is-active { background:transparent; }
.vmkt .nav-trigger { display:inline-flex; align-items:center; gap:5px; color:var(--t2); font-size:14.5px; font-weight:550;
  padding:9px 13px; border-radius:10px; cursor:pointer; transition:background .14s, color .14s; }
.vmkt .nav-trigger:hover, .vmkt .nav-item.has-mega:focus-within .nav-trigger, .vmkt .nav-trigger.is-active { color:var(--ink); background:var(--tint2); }
.vmkt .nav-caret { transition:transform .18s var(--ease); margin-top:1px; }
.vmkt .nav-item.has-mega:hover .nav-caret, .vmkt .nav-item.has-mega:focus-within .nav-caret { transform:rotate(180deg); }
/* Full-width mega: a fixed, edge-to-edge panel below the sticky nav with a
   centred content grid and a featured rail. The has-mega item stretches to the
   full nav height so hover survives the trip from the trigger down to the panel. */
.vmkt .nav-item.has-mega { align-self:stretch; }
.vmkt .mega { position:fixed; left:0; right:0; top:84px; z-index:39;
  opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s; }
.vmkt .nav-item.has-mega:hover .mega, .vmkt .nav-item.has-mega:focus-within .mega {
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .2s var(--ease), transform .2s var(--ease); }
.vmkt .mega-in { background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh-md); }
.vmkt .mega-body { max-width:var(--max); margin:0 auto; padding:30px 28px 28px;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:38px; align-items:start; }
/* grouped, labelled columns */
.vmkt .mega-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.vmkt .mega-col { display:flex; flex-direction:column; gap:2px; padding:2px 18px; min-width:0; }
.vmkt .mega-col:first-child { padding-left:2px; }
.vmkt .mega-col:last-child { padding-right:2px; }
.vmkt .mega-col + .mega-col { border-left:1px solid var(--line2); }
.vmkt .mega-col-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--t3); padding:0 10px 9px; }
.vmkt .mega-item { display:flex; gap:12px; align-items:center; min-height:56px; padding:9px 10px; border-radius:11px;
  position:relative; transition:background .14s; }
.vmkt .mega-item:hover { background:var(--tint2); }
.vmkt .mega-ic { width:36px; height:36px; border-radius:10px; background:var(--tint); border:1px solid var(--line2);
  color:var(--slate2); display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:background .14s, color .14s, border-color .14s; }
.vmkt .mega-item:hover .mega-ic { background:var(--accent-bg); color:var(--accent); border-color:transparent; }
.vmkt .mega-tx { min-width:0; }
.vmkt .mega-tx b { display:block; font-size:13.75px; color:var(--ink); font-weight:650; letter-spacing:-.012em; white-space:nowrap; }
.vmkt .mega-tx span { display:block; font-size:12.2px; color:var(--t3); line-height:1.4; margin-top:2px; }
/* per-menu personality lives in the promo card on the right: Product keeps
   the deep-slate card, Solutions goes emerald, Resources goes light */
.vmkt .mega--sol .mega-feature { background:linear-gradient(150deg,#0f9d6b 0%, #0b7a67 58%, #0c5b52 100%); }
.vmkt .mega--sol .mega-feature::before { background:radial-gradient(80% 55% at 100% 0%, rgba(255,255,255,.2), transparent 66%); }
.vmkt .mega--sol .mega-feature-tag { color:#d9f7ea; }
.vmkt .mega--sol .mega-feature p { color:#d6f0e4; }
.vmkt .mega--res .mega-feature { background:linear-gradient(180deg,#f2faf6 0%, #e8f2ee 100%);
  box-shadow:inset 0 0 0 1px rgba(16,185,129,.2); }
.vmkt .mega--res .mega-feature::before { background:radial-gradient(80% 55% at 100% 0%, rgba(16,185,129,.14), transparent 66%); }
.vmkt .mega--res .mega-feature-tag { color:var(--accent); }
.vmkt .mega--res .mega-feature h4 { color:var(--ink); }
.vmkt .mega--res .mega-feature p { color:var(--t2); }
.vmkt .mega--res .mega-feature-cta { background:var(--slate); color:#fff; }
.vmkt .mega--res .mega-feature-cta:hover { box-shadow:0 8px 20px rgba(20,40,54,.3); }
.vmkt .mega--res .mega-feature-shot { box-shadow:0 0 0 1px rgba(20,40,54,.12), 0 -18px 40px -24px rgba(20,40,54,.3); }
.vmkt .mega-go { flex:none; margin-left:auto; color:var(--t3); opacity:0; transform:translateX(-5px);
  transition:opacity .14s, transform .14s, color .14s; }
.vmkt .mega-item:hover .mega-go { opacity:1; transform:none; color:var(--accent); }
/* featured rail with a screenshot peeking from the bottom */
.vmkt .mega-feature { background:var(--grad); color:#fff; border-radius:var(--r-lg); padding:24px 24px 0;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.vmkt .mega-feature::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 55% at 100% 0%, rgba(16,185,129,.3), transparent 68%); }
.vmkt .mega-feature-tag { position:relative; font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#8fd6bb; margin-bottom:9px; }
.vmkt .mega-feature h4 { position:relative; font-size:18px; letter-spacing:-.02em; margin:0 0 7px; color:#fff; }
.vmkt .mega-feature p { position:relative; font-size:13px; line-height:1.55; color:#cdd9e2; margin:0 0 15px; }
.vmkt .mega-feature-cta { position:relative; display:inline-flex; align-items:center; gap:7px; margin:0 0 18px;
  align-self:flex-start; background:#fff; color:var(--slate); font-size:13.5px; font-weight:650;
  padding:9px 15px; border-radius:10px; transition:transform .14s, box-shadow .14s; }
.vmkt .mega-feature-cta:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.28); }
.vmkt .mega-feature-shot { position:relative; margin-top:2px; height:92px; border-radius:10px 10px 0 0;
  overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 -18px 40px -24px rgba(0,0,0,.7); }
.vmkt .mega-feature-shot img { display:block; width:100%; height:auto; }
/* foot bar */
.vmkt .mega-foot { border-top:1px solid var(--line2); background:var(--tint2); }
.vmkt .mega-foot-inner { max-width:var(--max); margin:0 auto; padding:13px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.vmkt .mega-badge { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--slate2); }
.vmkt .mega-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--green); }
.vmkt .mega-all { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:640; color:var(--accent); white-space:nowrap; }
.vmkt .mega-all:hover { text-decoration:underline; text-underline-offset:3px; }
@media (max-width:1040px) {
  .vmkt .mega-body { grid-template-columns:1fr; gap:20px; }
  .vmkt .mega-col { padding:2px 16px; }
  .vmkt .mega-feature { flex-direction:row; align-items:center; gap:18px; padding:18px 22px; }
  .vmkt .mega-feature h4 { margin-bottom:2px; }
  .vmkt .mega-feature p, .vmkt .mega-feature-shot { display:none; }
  .vmkt .mega-feature-cta { margin:0 0 0 auto; flex:none; }
}

@media (max-width:900px) {
  .vmkt .nav-in { height:72px; }
  .vmkt .nav-burger { display:inline-flex; margin-left:auto; align-items:center; justify-content:center;
    width:42px; height:42px; border:1px solid var(--line); border-radius:var(--r-md);
    background:#fff; color:var(--t1); cursor:pointer; position:relative; z-index:60;
    transition:background .18s, border-color .18s, color .18s; }
  .vmkt .nav.nav-hero:not(.scrolled) .nav-burger { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.24); color:#fff; }
  .vmkt .nav-toggle:checked ~ .nav-burger { background:#12242e; border-color:rgba(255,255,255,.28); color:#fff; }
  /* the menu is a full-screen dark sheet sliding in under the header */
  .vmkt .nav-links { margin-left:0; position:fixed; inset:72px 0 0 0; z-index:55; display:flex;
    flex-direction:column; align-items:stretch; gap:2px; padding:14px 16px 44px; overflow-y:auto;
    visibility:hidden; opacity:0; transform:translateY(-10px);
    transition:opacity .24s var(--ease), transform .24s var(--ease), visibility 0s linear .24s;
    background:
      radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.4px) 0 0 / 28px 28px,
      radial-gradient(56% 34% at 88% 0%, rgba(16,185,129,.16), transparent 62%),
      linear-gradient(180deg,#0d1b24 0%, #0b1720 100%); }
  .vmkt .nav-toggle:checked ~ .nav-links { visibility:visible; opacity:1; transform:none;
    transition:opacity .24s var(--ease), transform .24s var(--ease); }
  body:has(.nav-toggle:checked) { overflow:hidden; }
  /* the header bar goes solid dark while the sheet is open, whatever the page.
     backdrop-filter must go too: it would make the nav the containing block for
     the fixed sheet, collapsing it to the nav's height. */
  .vmkt .nav:has(.nav-toggle:checked) { background:#0d1b24; border-color:rgba(255,255,255,.1); box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none; }
  .vmkt .nav:has(.nav-toggle:checked) .wm, .vmkt .nav:has(.nav-toggle:checked) .wm span { color:#fff; }
  /* plain links (Pricing, Sign in) */
  .vmkt .nav-links > a:not(.btn) { padding:14px 12px; color:#eaf1f4; font-size:16px; font-weight:600; border-radius:11px; }
  .vmkt .nav-links > a:not(.btn):hover { background:rgba(255,255,255,.06); color:#fff; }
  .vmkt .nav-links .btn { width:100%; margin:10px 0 0; background:#fff; color:var(--ink);
    border-color:#fff; box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }
  .vmkt .nav-sep { display:none; }
  /* each mega becomes an always-open, labelled group of rich items */
  .vmkt .nav-item.has-mega { display:block; width:100%; }
  .vmkt .nav .nav-links .nav-item .nav-trigger { width:100%; padding:18px 12px 6px; color:#8fe6c4;
    font-size:12px; font-weight:720; letter-spacing:.09em; text-transform:uppercase; }
  .vmkt .nav .nav-links .nav-item .nav-trigger:hover { background:transparent; color:#b2f1d8; }
  .vmkt .nav-caret { display:none; }
  .vmkt .mega { display:block; position:static; opacity:1; visibility:visible; transform:none;
    pointer-events:auto; transition:none; }
  .vmkt .mega-in { background:transparent; border:0; box-shadow:none; }
  .vmkt .mega-body { display:block; max-width:none; padding:0; }
  .vmkt .mega-cols { display:block; }
  .vmkt .mega-col { padding:0; border:0; }
  .vmkt .mega-col + .mega-col { border-left:0; }
  .vmkt .mega-col-label { color:rgba(220,231,236,.42); padding:10px 12px 4px; }
  /* variants collapse back to uniform dark rows in the sheet */
  .vmkt .mega .mega-item { min-height:52px; padding:8px 12px; border-radius:12px;
    border:0; box-shadow:none; background:transparent; }
  .vmkt .mega .mega-item:hover { background:rgba(255,255,255,.06); border-color:transparent;
    box-shadow:none; transform:none; }
  .vmkt .mega .mega-ic { width:36px; height:36px; border:1px solid rgba(255,255,255,.13);
    background:rgba(255,255,255,.07); color:#8fe6c4; }
  .vmkt .mega .mega-item:hover .mega-ic { background:rgba(52,211,153,.16); color:#7ff0c6; border-color:transparent; }
  .vmkt .mega-tx b { color:#fff; }
  .vmkt .mega-tx span { color:rgba(220,231,236,.55); }
  .vmkt .mega-go, .vmkt .mega-feature, .vmkt .mega-foot { display:none; }
}

/* ---------- type scale ---------- */
.vmkt h1 { font-size:clamp(38px,5.4vw,60px); line-height:1.03; letter-spacing:-.042em; font-weight:760; margin:0 0 22px; color:var(--ink); }
.vmkt h2 { font-size:clamp(28px,3.4vw,40px); line-height:1.1; letter-spacing:-.032em; font-weight:730; margin:0 0 14px; color:var(--ink); }
.vmkt h3 { font-size:17px; letter-spacing:-.012em; margin:0 0 7px; font-weight:650; color:var(--ink); }
.vmkt .lead { font-size:clamp(17px,1.6vw,19.5px); line-height:1.6; color:var(--t2); margin:0; font-weight:430; }
.vmkt .sub { font-size:17px; line-height:1.62; color:var(--t2); margin:0; font-weight:430; }
.vmkt .accent-word { background:linear-gradient(100deg,#0f9d6b 0%,#0b7a67 85%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vmkt h1, .vmkt h2 { text-wrap:balance; }

.vmkt .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:680; letter-spacing:.075em;
  text-transform:uppercase; color:var(--slate2); background:#fff; border:1px solid var(--line);
  box-shadow:var(--sh-xs); padding:7px 14px; border-radius:var(--r-full); margin-bottom:22px; }
.vmkt .eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--green); }

.vmkt section { padding:var(--sec-y) 0 calc(var(--sec-y) + 24px); }
.vmkt section[id], .vmkt [id] { scroll-margin-top:96px; }
.vmkt .pad { padding-top:var(--sec-y); padding-bottom:calc(var(--sec-y) + 24px); }
/* two same-surface sections in a row would otherwise open a ~280px blank
   run between them — collapse the second one's top padding so the seam
   keeps the normal rhythm instead */
.vmkt section:where(:not(.band):not(.spotlight):not(.closing):not(.pricing-stage):not(.page-hero))
  + section:where(:not(.band):not(.spotlight):not(.closing):not(.pricing-stage)) { padding-top:0; }
.vmkt section.band + section.band { padding-top:0; }
/* inside a padded band or section the wrap already provides the rhythm —
   splits must not stack their own vertical padding on top of it */
.vmkt .pad .split, .vmkt section .split { padding:0; }
.vmkt .pad .split + .split, .vmkt section .split + .split { margin-top:var(--sec-y); }
.vmkt .sec-head { max-width:680px; margin:0 auto 56px; }
.vmkt .sec-head.center { text-align:center; }
.vmkt .sec-head.left { margin:0 0 48px; }
@media (max-width:820px) { .vmkt { --sec-y:84px; } }
/* Balance headings and short marketing copy so lines wrap evenly and never
   strand a single word on its own line; longer body copy uses pretty. */
.vmkt h1, .vmkt h2, .vmkt h3, .vmkt .lead, .vmkt .sub, .vmkt .desc { text-wrap:balance; }
.vmkt p, .vmkt .card p, .vmkt .step p, .vmkt .why p,
.vmkt .feat .ftx span, .vmkt .mega-tx span, .vmkt li { text-wrap:pretty; }

/* ---------- hero ---------- */
/* ---------- hero (dark, cinematic — homepage only) ---------- */
/* pulled up behind the sticky nav so the dark bg fills the whole top and the
   nav can ride transparent over it. */
.vmkt .hero { position:relative; overflow:hidden; color:#eaf1f4; isolation:isolate; margin-top:-84px; padding-top:84px;
  background:
    radial-gradient(58% 48% at 50% -6%, rgba(16,185,129,.22), transparent 66%),
    radial-gradient(48% 52% at 86% 6%, rgba(50,86,108,.6), transparent 72%),
    radial-gradient(44% 46% at 4% 24%, rgba(16,185,129,.13), transparent 70%),
    linear-gradient(178deg,#0b1820 0%, #0f2029 44%, #16303c 100%); }
/* faint dot grid, fading out toward the screenshot */
.vmkt .hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size:28px 28px;
  mask-image:radial-gradient(130% 86% at 50% -6%, #000 34%, transparent 74%);
  -webkit-mask-image:radial-gradient(130% 86% at 50% -6%, #000 34%, transparent 74%); }
/* a soft aurora sweep near the top */
.vmkt .hero::after { content:""; position:absolute; left:50%; top:-32%; width:min(1200px,120%); height:640px; z-index:-1;
  transform:translateX(-50%); pointer-events:none; opacity:.7;
  background:radial-gradient(46% 60% at 50% 50%, rgba(52,224,161,.16), transparent 72%); filter:blur(24px); }
.vmkt .hero-in { padding:132px 28px 0; max-width:960px; margin:0 auto; text-align:center; position:relative; z-index:2; }
.vmkt .hero h1 { color:#fff; font-size:clamp(42px,6.1vw,74px); letter-spacing:-.046em; line-height:1.0; }
.vmkt .hero .accent-word { background:linear-gradient(96deg,#4ee6ad 0%,#10b981 55%,#7ff0c6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.vmkt .hero .eyebrow { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);
  color:#8fe6c4; box-shadow:none; backdrop-filter:blur(6px); }
.vmkt .hero .eyebrow .dot { background:#3fe0a4; box-shadow:0 0 10px rgba(63,224,164,.8); }
.vmkt .hero .lead { max-width:60ch; margin:0 auto 36px; color:rgba(220,231,236,.82); font-size:clamp(17px,1.55vw,20px); }
.vmkt .cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; align-items:center; }
.vmkt .hero .btn-ghost { background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.2);
  box-shadow:none; backdrop-filter:blur(6px); }
.vmkt .hero .btn-ghost:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.36); }
.vmkt .hero-note { margin:20px 0 0; font-size:13.5px; color:rgba(255,255,255,.6); display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.vmkt .hero-note span { display:inline-flex; align-items:center; gap:7px; }
.vmkt .hero-note svg { color:#3fe0a4; }
@media (max-width:900px) { .vmkt .hero { margin-top:-72px; padding-top:72px; } .vmkt .hero-in { padding-top:104px; } }
/* Staggered entrance on first paint (homepage dark hero only). */
@media (prefers-reduced-motion: no-preference) {
  .vmkt .hero-in > .eyebrow, .vmkt .hero-in > h1, .vmkt .hero-in > .lead,
  .vmkt .hero-in > .cta-row, .vmkt .hero-in > .hero-note, .vmkt .hero .shot-stage {
    opacity:0; animation:hero-rise .72s var(--ease) both; }
  .vmkt .hero-in > .eyebrow { animation-delay:.04s; }
  .vmkt .hero-in > h1 { animation-delay:.12s; }
  .vmkt .hero-in > .lead { animation-delay:.2s; }
  .vmkt .hero-in > .cta-row { animation-delay:.28s; }
  .vmkt .hero-in > .hero-note { animation-delay:.34s; }
  .vmkt .hero .shot-stage { animation-duration:.9s; animation-delay:.42s; animation-name:hero-rise-shot; }
}
@keyframes hero-rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes hero-rise-shot { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:none; } }

/* browser-framed mock */
.vmkt .shot-stage { position:relative; max-width:1080px; margin:64px auto 0; padding:0 28px; }
.vmkt .shot-stage::before { content:""; position:absolute; inset:8% -4% -12% -4%; z-index:0;
  background:radial-gradient(50% 60% at 50% 45%, rgba(44,74,93,.24), transparent 72%); filter:blur(14px); }
.vmkt .hero .shot-stage { margin-top:72px; perspective:1900px; }
.vmkt .hero .shot-stage::before { inset:0% -8% 14% -8%;
  background:radial-gradient(54% 64% at 50% 42%, rgba(52,224,161,.34), rgba(46,92,116,.34) 42%, transparent 74%);
  filter:blur(34px); opacity:.95; }
/* the shot sits flush on the hero's bottom edge, rising out of the fold —
   square bottom corners, no gap (rotateX pivots on that edge, so it stays put) */
.vmkt .hero .shot-stage .browser { border-radius:16px 16px 0 0; border-bottom:0;
  transform:rotateX(4deg); transform-origin:50% 100%; transition:transform .7s var(--ease);
  box-shadow:0 50px 110px -34px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.07); }
.vmkt .hero .shot-stage:hover .browser { transform:rotateX(0deg); }
@media (prefers-reduced-motion:reduce) { .vmkt .hero .shot-stage .browser { transform:none; transition:none; } }
.vmkt .browser { position:relative; z-index:1; background:#fff; border:1px solid rgba(15,25,38,.09);
  border-radius:18px 18px 0 0; box-shadow:var(--sh-lg); overflow:hidden; }
.vmkt .browser.rounded { border-radius:18px; }
.vmkt .browser-bar { display:flex; align-items:center; gap:14px; height:46px; padding:0 18px;
  background:linear-gradient(180deg,#fafbfc,#f2f4f6); border-bottom:1px solid var(--line); }
.vmkt .browser-dots { display:flex; gap:7px; }
.vmkt .browser-dots span { width:11px; height:11px; border-radius:50%; }
.vmkt .browser-dots span:nth-child(1){ background:#f26d6d; } .vmkt .browser-dots span:nth-child(2){ background:#f2c14d; } .vmkt .browser-dots span:nth-child(3){ background:#5fc16d; }
.vmkt .browser-url { flex:1; max-width:420px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:7px;
  height:28px; background:#fff; border:1px solid var(--line); border-radius:8px; font-size:12.5px; color:var(--t3); font-weight:500; }
.vmkt .browser-url svg { color:var(--green); }
/* real product screenshots framed by .browser */
.vmkt .browser img { width:100%; height:auto; display:block; }
.vmkt .browser img.crop { aspect-ratio:var(--ar,16/10); height:auto; object-fit:cover; object-position:var(--pos,50% 0%); }
.vmkt .split-shot .browser img { transition:transform .5s var(--ease); }
.vmkt .split-shot .browser:hover img { transform:scale(1.015); }
.vmkt .duo-card .shot img { width:100%; height:auto; display:block; border:1px solid var(--line); border-bottom:0; border-radius:12px 12px 0 0; box-shadow:var(--sh-md); }
.vmkt .closing-shot img { display:block; width:100%; height:auto; aspect-ratio:16/6.5; object-fit:cover; object-position:50% 0%; }

/* floating chips over the hero mock */
.vmkt .float-chip { position:absolute; z-index:2; display:flex; align-items:center; gap:11px;
  background:rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.7); border-radius:14px;
  box-shadow:0 26px 54px -20px rgba(4,16,22,.6), 0 2px 8px -2px rgba(4,16,22,.3);
  padding:12px 16px; font-size:13.5px; font-weight:600; color:var(--t1); backdrop-filter:blur(4px);
  animation:floaty 6s var(--ease) infinite; will-change:transform; }
.vmkt .float-chip .fc-ic { width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.vmkt .float-chip .fc-sub { display:block; font-size:12px; color:var(--t3); font-weight:500; margin-top:1px; }
.vmkt .fc-green { background:var(--green-bg); color:var(--accent); }
.vmkt .fc-slate { background:var(--tint); color:var(--slate2); }
.vmkt .chip-a { right:-4px; top:-30px; }
.vmkt .chip-b { left:-14px; bottom:18%; animation-delay:-3s; }
.vmkt .chip-close-a { right:2px; top:-26px; }
.vmkt .chip-close-b { left:0; bottom:16%; animation-delay:-3s; }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@media (prefers-reduced-motion:reduce) { .vmkt .float-chip { animation:none; } }
@media (max-width:900px) { .vmkt .float-chip { display:none; } }

/* ---------- trust / stat strip ---------- */
.vmkt .strip { border-bottom:1px solid var(--line); background:#fff; }
.vmkt .strip-in { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; padding:34px 0; }
.vmkt .strip-item { display:flex; align-items:center; gap:14px; }
.vmkt .strip-item .ic { width:40px; height:40px; border-radius:12px; background:var(--tint2); color:var(--slate2);
  display:inline-flex; align-items:center; justify-content:center; flex:none; }
.vmkt .strip-item .tx b { display:block; font-size:14.5px; letter-spacing:-.01em; color:var(--ink); }
.vmkt .strip-item .tx span { font-size:12.5px; color:var(--t3); }

/* ---------- grids & cards ---------- */
.vmkt .grid { display:grid; gap:20px; }
.vmkt .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.vmkt .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.vmkt .grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.vmkt .card { background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
  box-shadow:0 1px 2px rgba(20,40,54,.045), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.vmkt .card:hover { transform:translateY(-4px); border-color:#cfd8de;
  box-shadow:0 22px 44px -22px rgba(20,40,54,.32), 0 3px 8px -3px rgba(20,40,54,.1); }
.vmkt .card.pad-lg { padding:30px; }
/* crafted icon tile — subtle gradient + hairline + inner highlight */
.vmkt .ic { width:46px; height:46px; border-radius:13px; background:linear-gradient(158deg,#f4f8fa 0%, #e7eef2 100%);
  border:1px solid var(--line2); color:var(--slate2); box-shadow:inset 0 1px 0 #fff;
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.vmkt .ic.ic-accent { background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%); border-color:rgba(16,185,129,.22); color:var(--accent); }
.vmkt .card:hover .ic:not(.ic-accent) { background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%); border-color:rgba(16,185,129,.22); color:var(--accent); }
.vmkt .card h3 { font-size:16.5px; }
.vmkt .card p { margin:0; color:var(--t2); font-size:14.5px; line-height:1.58; }
.vmkt .card .more { display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:13.5px; font-weight:600; color:var(--accent); }
/* template-gallery cards: real board screenshot + "5 stages · 12 tasks" meta */
.vmkt .card .tpl-meta { display:inline-flex; align-items:center; margin-top:12px; font-size:12.5px; font-weight:650; letter-spacing:.01em; color:var(--t3); }
.vmkt .tpl-group + .tpl-group { margin-top:40px; }
.vmkt .tpl-group .eyebrow { margin-bottom:18px; }
.vmkt .tpl-card { padding:0; overflow:hidden; }
.vmkt .tpl-card .tpl-shot { display:block; overflow:hidden; aspect-ratio:16/9; border-bottom:1px solid var(--line2); background:#f4f8fa; }
.vmkt .tpl-card .tpl-shot img { display:block; width:120%; max-width:none; transition:transform .5s var(--ease); }
.vmkt .tpl-card:hover .tpl-shot img { transform:scale(1.03); }
.vmkt .tpl-card .tpl-body { padding:18px 22px 20px; }
.vmkt .tpl-card .tpl-body h3 { margin:0; }
.vmkt .tpl-card .tpl-body p { margin-top:7px; }
.vmkt .card .more svg { transition:transform .18s var(--ease); }
.vmkt .card:hover .more svg { transform:translateX(3px); }
/* link-cards sweep an emerald hairline across the top on hover */
.vmkt a.card { position:relative; overflow:hidden; }
.vmkt a.card::after { content:""; position:absolute; left:0; right:0; top:0; height:2.5px;
  background:linear-gradient(90deg,#34d399,#059669); transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--ease); }
.vmkt a.card:hover::after { transform:scaleX(1); }
.vmkt .card p a { display:inline; padding:0; line-height:inherit; font-size:inherit; vertical-align:baseline; white-space:nowrap; font-weight:600; color:var(--accent); }

/* ---------- alternating feature rows ---------- */
.vmkt .split { display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; padding:64px 0; }
.vmkt .pad > .split:first-child { padding-top:0; }
.vmkt .pad > .split:last-child { padding-bottom:0; }
.vmkt .split.rev { grid-template-columns:1.1fr 0.9fr; }
.vmkt .split.rev .split-copy { order:2; }
.vmkt .split h2 { font-size:clamp(26px,2.9vw,34px); }
.vmkt .split .eyebrow { margin-bottom:16px; }
.vmkt .split .learn { display:inline-flex; align-items:center; gap:6px; margin-top:22px; font-size:14.5px; font-weight:640; color:var(--accent); }
.vmkt .split .learn:hover { text-decoration:underline; text-underline-offset:3px; }
.vmkt .split ul { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:13px; }
.vmkt .split li { display:flex; gap:12px; align-items:flex-start; color:var(--t1); font-size:15px; line-height:1.5; }
.vmkt .split li svg { flex:none; margin-top:3px; color:var(--green); }
.vmkt .split li b { font-weight:640; }
.vmkt .split-shot { position:relative; }
.vmkt .split-shot::before { content:""; position:absolute; inset:12% -6% -8% -6%; z-index:0; border-radius:32px;
  background:radial-gradient(55% 65% at 50% 50%, rgba(44,74,93,.16), transparent 75%); filter:blur(10px); }
.vmkt .split-shot .browser { border-radius:14px; overflow:hidden; }
.vmkt .split-shot .browser-bar { height:38px; }

.vmkt .learn { display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:640; color:var(--accent); }
.vmkt .learn:hover { text-decoration:underline; text-underline-offset:3px; }

/* ---------- duo: two-up feature cards ---------- */
.vmkt .duo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.vmkt .duo-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-xs); display:flex; flex-direction:column;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; }
.vmkt .duo-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:#d9e0e6; }
.vmkt .duo-card .shot { position:relative; background:linear-gradient(180deg,var(--tint2),#eaf0ee); border-bottom:1px solid var(--line);
  padding:30px 30px 0; max-height:340px; overflow:hidden; }
.vmkt .duo-card .shot::after { content:""; position:absolute; inset:auto 0 0; height:56px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(234,240,238,.95)); }
.vmkt .duo-card .body { padding:26px 30px 30px; display:flex; flex-direction:column; flex:1; }
.vmkt .duo-card .body h3 { font-size:19px; letter-spacing:-.015em; margin-bottom:8px; }
.vmkt .duo-card .body p { margin:0; color:var(--t2); font-size:15px; line-height:1.6; }
.vmkt .duo-card .body .learn { margin-top:auto; padding-top:18px; }

/* ---------- product tour: CSS-only tabs ---------- */
.vmkt .tour { position:relative; }
.vmkt .tour > input { position:absolute; opacity:0; pointer-events:none; }
.vmkt .tour-tabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:30px; }
.vmkt .tour-tabs label { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-full);
  border:1px solid var(--line); background:#fff; font-size:14px; font-weight:600; color:var(--t2); cursor:pointer;
  box-shadow:var(--sh-xs); transition:border-color .15s, color .15s, background .15s, transform .1s; }
.vmkt .tour-tabs label:hover { border-color:#c6d0d8; color:var(--ink); transform:translateY(-1px); }
.vmkt .tour-panel { display:none; margin:0; }
.vmkt .tour-panel figcaption { text-align:center; font-size:14px; color:var(--t3); margin-top:18px; }
.vmkt .tour-panel figcaption b { color:var(--t1); font-weight:640; }
.vmkt #tt1:checked ~ .tour-tabs label[for="tt1"],
.vmkt #tt2:checked ~ .tour-tabs label[for="tt2"],
.vmkt #tt3:checked ~ .tour-tabs label[for="tt3"],
.vmkt #tt4:checked ~ .tour-tabs label[for="tt4"] { background:var(--grad); border-color:transparent; color:#fff;
  box-shadow:0 6px 16px -8px rgba(34,57,71,.55); }
.vmkt #tt1:checked ~ .tour-panels .p1, .vmkt #tt2:checked ~ .tour-panels .p2,
.vmkt #tt3:checked ~ .tour-panels .p3, .vmkt #tt4:checked ~ .tour-panels .p4 { display:block; }
.vmkt #tt1:focus-visible ~ .tour-tabs label[for="tt1"], .vmkt #tt2:focus-visible ~ .tour-tabs label[for="tt2"],
.vmkt #tt3:focus-visible ~ .tour-tabs label[for="tt3"], .vmkt #tt4:focus-visible ~ .tour-tabs label[for="tt4"] { outline:2px solid var(--slate2); outline-offset:2px; }
.vmkt .tour .browser { max-width:1000px; margin:0 auto; }

/* ---------- versus: the usual stack vs Vantra ---------- */
.vmkt .versus { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:960px; margin:0 auto; align-items:stretch; }
.vmkt .versus-col { border-radius:var(--r-xl); padding:30px 32px; }
.vmkt .versus-col h3 { font-size:17.5px; margin-bottom:20px; display:flex; align-items:center; gap:11px; }
.vmkt .versus-col ul { list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.vmkt .versus-col li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.55; }
.vmkt .versus-col li svg { flex:none; margin-top:3px; }
.vmkt .vs-ic { width:34px; height:34px; border-radius:10px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tint2); border:1px solid var(--line2); color:var(--slate2); }
.vmkt .vs-mk { width:34px; height:34px; border-radius:10px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#243b4a,#17272f); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.vmkt .versus-old { background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); border:1px solid var(--line); box-shadow:var(--sh-xs); }
.vmkt .versus-old h3 { color:var(--t2); }
.vmkt .versus-old li { color:var(--t2); }
.vmkt .versus-old li svg { color:#cf7a72; }
.vmkt .versus-new { background:linear-gradient(180deg,#f0faf6 0%, #fff 130px); border:1.5px solid rgba(16,185,129,.5);
  box-shadow:0 28px 60px -30px rgba(16,120,84,.35), 0 0 0 1px rgba(16,185,129,.12); }
.vmkt .versus-new h3 { color:var(--ink); }
.vmkt .versus-new li { color:var(--t1); }
.vmkt .versus-new li svg { margin-top:1px; width:14px; height:14px; padding:3px; box-sizing:content-box;
  border-radius:50%; background:var(--accent-bg); color:var(--accent); }
@media (max-width:800px) { .vmkt .versus { grid-template-columns:1fr; } }

/* ---------- showcase ---------- */
.vmkt .showcase { text-align:center; }
.vmkt .showcase .shot-stage { margin-top:52px; }

/* ---------- live demo strip: clickable shot into /demo ---------- */
.vmkt .demo-strip { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:56px; align-items:center; }
.vmkt .demo-copy ul { list-style:none; padding:0; margin:22px 0 28px; display:grid; gap:13px; }
.vmkt .demo-copy li { display:flex; gap:12px; align-items:flex-start; color:var(--t1); font-size:15px; line-height:1.5; }
.vmkt .demo-copy li svg { flex:none; margin-top:3px; color:var(--green); }
.vmkt .demo-copy li b { font-weight:640; }
.vmkt .demo-note { margin:14px 0 0; font-size:13px; color:var(--t3); }
.vmkt .demo-shot { position:relative; display:block; }
.vmkt .demo-shot .browser { transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.vmkt .demo-shot:hover .browser { transform:translateY(-4px);
  box-shadow:0 34px 72px -30px rgba(20,40,54,.45), 0 4px 10px -4px rgba(20,40,54,.12); }
.vmkt .demo-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:var(--r-full);
  background:rgba(13,26,34,.92); color:#fff; font-weight:650; font-size:14.5px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.16); box-shadow:0 20px 48px -14px rgba(0,0,0,.55);
  backdrop-filter:blur(6px); transition:transform .2s var(--ease), background .2s; }
.vmkt .demo-shot:hover .demo-play { transform:translate(-50%,-50%) scale(1.06); background:rgba(13,26,34,.98); }
.vmkt .live-dot { width:8px; height:8px; border-radius:50%; background:#3fe0a4; flex:none;
  animation:live-pulse 2.2s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow:0 0 0 0 rgba(63,224,164,.55); }
  70% { box-shadow:0 0 0 9px rgba(63,224,164,0); } 100% { box-shadow:0 0 0 0 rgba(63,224,164,0); } }
.vmkt .chip-demo { right:-12px; top:-22px; }
@media (max-width:980px) { .vmkt .demo-strip { grid-template-columns:1fr; gap:36px; } }
@media (prefers-reduced-motion:reduce) { .vmkt .live-dot { animation:none; } }

/* ---------- pillar cards: screenshot peek above the copy ---------- */
.vmkt .pillar { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.vmkt .pillar-shot { display:block; position:relative; aspect-ratio:16/10; overflow:hidden;
  border-bottom:1px solid var(--line2); background:var(--tint2); }
.vmkt .pillar-shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:top;
  transition:transform .35s var(--ease); }
.vmkt .pillar:hover .pillar-shot img { transform:scale(1.04); }
.vmkt .pillar-body { padding:22px 24px 24px; display:flex; flex-direction:column; align-items:flex-start; flex:1; }
.vmkt .pillar-body .more { margin-top:auto; padding-top:14px; }

/* ---------- integration cards ---------- */
.vmkt .intg-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:1020px; margin:0 auto; }
.vmkt .intg-card { display:flex; gap:14px; align-items:flex-start; padding:18px 20px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-xs);
  transition:transform .17s var(--ease), box-shadow .17s var(--ease), border-color .17s; }
.vmkt .intg-card:hover { transform:translateY(-3px); border-color:#cfd8de; box-shadow:var(--sh-sm); }
.vmkt .intg-logo { width:40px; height:40px; border-radius:11px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tint2); border:1px solid var(--line2); }
.vmkt .intg-logo svg { width:20px; height:20px; }
.vmkt .intg-card b { display:block; font-size:14.5px; font-weight:660; color:var(--ink); }
.vmkt .intg-card > div > span { display:block; margin-top:3px; font-size:13px; line-height:1.5; color:var(--t2); }
.vmkt .intg-wide { display:flex; gap:14px; align-items:center; max-width:1020px; margin:14px auto 0; padding:18px 20px;
  border-radius:var(--r-lg); text-decoration:none; border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(120deg,#1d3341 0%, #16262f 100%);
  box-shadow:0 20px 44px -24px rgba(13,30,40,.6);
  transition:transform .17s var(--ease), box-shadow .17s var(--ease); }
.vmkt .intg-wide:hover { transform:translateY(-3px); box-shadow:0 26px 54px -26px rgba(13,30,40,.7); }
.vmkt .intg-wide .intg-logo { background:rgba(52,211,153,.13); border-color:rgba(52,211,153,.28); color:#5fd3a6; }
.vmkt .intg-wide b { display:block; font-size:14.5px; font-weight:660; color:#fff; }
.vmkt .intg-wide > div > span { display:block; margin-top:3px; font-size:13px; line-height:1.5; color:rgba(220,231,236,.68); }
.vmkt .intg-all { margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:640; color:#7fdcb6; white-space:nowrap; }
@media (max-width:980px) { .vmkt .intg-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) {
  .vmkt .intg-grid { grid-template-columns:1fr; }
  .vmkt .intg-wide { flex-wrap:wrap; }
  .vmkt .intg-all { margin-left:54px; }
}

/* ---------- spotlight: dark band ---------- */
.vmkt .spotlight { position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(50% 70% at 84% 0%, rgba(16,185,129,.28), transparent 64%),
    radial-gradient(44% 60% at 8% 100%, rgba(57,88,108,.5), transparent 68%),
    linear-gradient(160deg,#1d3341 0%, #16262f 100%); }
.vmkt .spotlight::before { content:""; position:absolute; inset:0; opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:26px 26px; }
.vmkt .spotlight .wrap { position:relative; }
.vmkt .spotlight h2 { color:#fff; }
.vmkt .spotlight .sub { color:rgba(255,255,255,.78); }
/* splits hosted on the dark band (e.g. ai.html) need light text */
.vmkt .spotlight .split li { color:rgba(255,255,255,.92); }
.vmkt .spotlight .split li b { color:#fff; }
.vmkt .spotlight .eyebrow { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#a7d9c8; box-shadow:none; }
.vmkt .spotlight .eyebrow .dot { background:#5fd3a6; }
.vmkt .spotlight .learn { color:#7fdcb6; }
/* console + side cards */
.vmkt .ai-hero { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr); gap:24px; align-items:stretch; }
.vmkt .ai-console { position:relative; display:flex; flex-direction:column; border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg,rgba(9,20,27,.94) 0%, rgba(12,25,33,.88) 100%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 44px 96px -34px rgba(0,0,0,.8), 0 0 90px -34px rgba(16,185,129,.4); }
/* gradient edge + a slow sheen sweeping across the glass */
.vmkt .ai-console::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(125deg, rgba(16,185,129,.6), rgba(255,255,255,.14) 32%, rgba(16,185,129,.08) 58%, rgba(94,234,212,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
.vmkt .ai-console::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.055) 50%, transparent 58%);
  transform:translateX(-100%); animation:ai-sheen 7s ease-in-out infinite; }
@keyframes ai-sheen { 0%, 55% { transform:translateX(-100%); } 80%, 100% { transform:translateX(100%); } }
.vmkt .ai-bar { display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid rgba(255,255,255,.09); }
.vmkt .ai-dots { display:inline-flex; gap:6px; }
.vmkt .ai-dots i { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.15); }
.vmkt .ai-title { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:660; color:#fff; }
.vmkt .ai-title svg { color:#5fd3a6; }
.vmkt .ai-badge { margin-left:auto; font-size:10.5px; font-weight:680; letter-spacing:.05em; text-transform:uppercase;
  color:#8fe6c4; padding:4px 10px; border-radius:var(--r-full);
  background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.26); }
.vmkt .ai-chat { flex:1; padding:20px 20px 6px; display:grid; gap:14px; align-content:start; }
.vmkt .ai-q { justify-self:end; max-width:75%; margin:0; padding:9px 15px; border-radius:14px 14px 4px 14px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:13.5px; font-weight:560; }
.vmkt .ai-a { display:flex; gap:11px; align-items:flex-start; }
.vmkt .ai-av { width:30px; height:30px; border-radius:9px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#10b981,#0d9488); color:#fff; box-shadow:0 6px 14px -6px rgba(16,185,129,.7); }
.vmkt .ai-msg { flex:1; min-width:0; border-radius:4px 14px 14px 14px; padding:12px 13px; display:grid; gap:8px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1); }
.vmkt .ai-msg > p { margin:0; font-size:13.5px; color:rgba(236,243,246,.92); }
.vmkt .ai-risk { display:flex; align-items:center; gap:9px; min-width:0; padding:8px 11px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.vmkt .ai-risk i { width:8px; height:8px; border-radius:50%; flex:none; }
.vmkt .ai-risk i.r-high { background:#f87171; box-shadow:0 0 9px rgba(248,113,113,.8); }
.vmkt .ai-risk i.r-med { background:#fbbf24; box-shadow:0 0 9px rgba(251,191,36,.7); }
.vmkt .ai-risk b { color:#fff; font-weight:640; font-size:13px; white-space:nowrap; }
.vmkt .ai-risk span { color:rgba(220,231,236,.6); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vmkt .ai-acts { display:flex; flex-wrap:wrap; gap:7px; margin-top:2px; }
.vmkt .ai-acts span { font-size:12px; font-weight:640; color:#8fe6c4; padding:5px 11px; border-radius:var(--r-full);
  background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.22); }
.vmkt .ai-slot { display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:10px;
  font-size:13px; color:rgba(236,243,246,.92);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.vmkt .ai-slot > span { flex:none; font-size:12px; font-weight:660; color:#8fe6c4; font-variant-numeric:tabular-nums; }
.vmkt .caret { width:2px; height:14px; margin-left:1px; background:#5fd3a6; animation:ai-caret 1.1s steps(2) infinite; }
@keyframes ai-caret { 0%, 49% { opacity:1; } 50%, 100% { opacity:0; } }
.vmkt .ai-input { display:flex; align-items:center; gap:10px; margin:12px 20px 20px; padding:11px 15px; border-radius:13px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:rgba(220,231,236,.55); font-size:13.5px; }
.vmkt .ai-input > svg { color:#5fd3a6; flex:none; }
.vmkt .ai-send { margin-left:auto; width:28px; height:28px; border-radius:9px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#10b981,#0d9488); color:#fff; box-shadow:0 6px 14px -6px rgba(16,185,129,.7); }
.vmkt .ai-side { display:flex; flex-direction:column; gap:14px; }
.vmkt .ai-card { flex:1; display:flex; gap:13px; align-items:center; padding:17px 18px; border-radius:16px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11); backdrop-filter:blur(8px);
  transition:transform .18s var(--ease), border-color .18s, background .18s; }
.vmkt .ai-card:hover { transform:translateY(-3px); border-color:rgba(94,234,212,.35); background:rgba(255,255,255,.085); }
.vmkt .ai-ic { width:38px; height:38px; border-radius:11px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(52,211,153,.13); border:1px solid rgba(52,211,153,.26); color:#5fd3a6; }
.vmkt .ai-card b { display:block; font-size:14.5px; font-weight:660; color:#fff; }
.vmkt .ai-card p { margin:3px 0 0; font-size:13px; line-height:1.5; color:rgba(220,231,236,.65); }
.vmkt .ai-note { margin-top:auto; display:flex; gap:9px; align-items:center; font-size:12.5px; line-height:1.5;
  color:rgba(220,231,236,.62); padding:12px 14px; border-radius:12px; border:1px dashed rgba(255,255,255,.2); }
.vmkt .ai-note svg { color:#8fe6c4; flex:none; }
/* the nine real AI tools */
.vmkt .ai-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:24px; }
.vmkt .ai-tool { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  transition:transform .17s var(--ease), border-color .17s, background .17s; }
.vmkt .ai-tool:hover { transform:translateY(-3px); background:rgba(255,255,255,.08); border-color:rgba(94,234,212,.3); }
.vmkt .ai-tool > svg { flex:none; margin-top:2px; color:#5fd3a6; }
.vmkt .ai-tool b { display:block; font-size:13.5px; font-weight:650; color:#fff; }
.vmkt .ai-tool span { display:block; margin-top:2px; font-size:12.5px; line-height:1.45; color:rgba(220,231,236,.58); }
.vmkt .ai-more { text-align:center; margin:30px 0 0; }
@media (max-width:980px) {
  .vmkt .ai-hero { grid-template-columns:1fr; }
  .vmkt .ai-tools { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .vmkt .ai-tools { grid-template-columns:1fr; }
  .vmkt .ai-badge { display:none; }
  .vmkt .ai-risk span { white-space:normal; }
}
@media (prefers-reduced-motion:reduce) {
  .vmkt .ai-console::after, .vmkt .caret { animation:none; }
}

/* ---------- steps ---------- */
.vmkt .steps-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.vmkt .step { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 26px; box-shadow:var(--sh-xs); }
.vmkt .step .n { width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#10b981,#059669); color:#fff;
  font-weight:700; font-size:15px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px;
  box-shadow:0 6px 14px -6px rgba(16,185,129,.5); }
.vmkt .step h3 { font-size:16.5px; }
.vmkt .step p { margin:0; color:var(--t2); font-size:14.5px; line-height:1.58; }

/* ---------- bands ---------- */
.vmkt .band { background:linear-gradient(180deg,#f2f8f5 0%,#eef3f6 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.5); }
.vmkt .band-plain { background:var(--bg2); }

/* ---------- integration logo chips ---------- */
.vmkt .logos { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; max-width:900px; margin:0 auto; }
.vmkt .logo-chip { display:inline-flex; align-items:center; gap:11px; padding:13px 20px; border:1px solid var(--line); border-radius:var(--r-full);
  background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); box-shadow:0 1px 2px rgba(20,40,54,.05), inset 0 1px 0 rgba(255,255,255,.7);
  font-size:14.5px; font-weight:600; color:var(--t1); white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.vmkt .logo-chip:hover { transform:translateY(-3px); border-color:#cfd8de; box-shadow:0 16px 30px -16px rgba(20,40,54,.3); }
.vmkt .logo-chip svg { width:20px; height:20px; color:var(--slate2); flex:none; transition:color .18s var(--ease); }
.vmkt .logo-chip:hover svg { color:var(--slate); }
.vmkt .logo-chip.logo-more { color:var(--accent); }
.vmkt .logo-chip.logo-more svg { color:var(--accent); }
.vmkt .logo-chip.logo-more .arr, .vmkt .logo-chip.logo-more svg:last-child { width:14px; height:14px; }

/* ---------- closing ---------- */
/* an emerald-teal band, deliberately a different hue from the blue-slate
   footer below so the two dark stages read as separate blocks */
.vmkt .closing { position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(56% 70% at 78% -10%, rgba(16,185,129,.4), transparent 62%),
    radial-gradient(48% 64% at 12% 8%, rgba(45,105,92,.5), transparent 66%),
    linear-gradient(180deg,#143430 0%, #10302c 58%, #0d2a27 100%); }
.vmkt .closing::before { content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:26px 26px; }
.vmkt .closing-in { position:relative; padding:var(--sec-y) 28px 0; text-align:center; max-width:760px; margin:0 auto; }
.vmkt .closing h2 { color:#fff; font-size:clamp(30px,3.6vw,42px); margin-bottom:14px; }
.vmkt .closing p { color:rgba(255,255,255,.82); font-size:17.5px; margin:0 0 32px; }
.vmkt .closing .cta-row { margin-bottom:26px; }
.vmkt .closing .btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.32); box-shadow:none; }
.vmkt .closing .btn-ghost:hover { border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.06); }
.vmkt .closing-ticks { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:0; padding:0 0 8px; list-style:none;
  font-size:13.5px; color:rgba(255,255,255,.62); }
.vmkt .closing-ticks li { display:inline-flex; align-items:center; gap:7px; }
.vmkt .closing-ticks svg { color:#5fd3a6; }
.vmkt .closing-shot { position:relative; max-width:920px; margin:80px auto 0; padding:0 28px; }
.vmkt .closing-shot .frame { border-radius:16px 16px 0 0; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-bottom:0;
  box-shadow:0 -20px 80px -20px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.4); background:#fff; }

/* ---------- pricing ---------- */
.vmkt .price-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch; }
.vmkt .price { background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); border:1px solid var(--line); border-radius:var(--r-xl); padding:32px 30px;
  display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(20,40,54,.045), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.vmkt .price:hover { transform:translateY(-5px); border-color:#cfd8de; box-shadow:0 24px 48px -24px rgba(20,40,54,.34), 0 3px 8px -3px rgba(20,40,54,.1); }
/* the extra properties undo the generic .feat capability-tile styles, which
   also match this element */
.vmkt .price.feat { border:1.5px solid rgba(16,185,129,.5); position:relative;
  padding:32px 30px; gap:0; align-items:stretch; border-radius:var(--r-xl);
  background:linear-gradient(180deg,#eafaf3 0%, #fff 140px);
  box-shadow:0 24px 54px -26px rgba(16,120,84,.4), 0 0 0 1px rgba(16,185,129,.12); }
.vmkt .price.feat:hover { transform:translateY(-5px); box-shadow:0 30px 60px -26px rgba(16,120,84,.5), 0 0 0 1px rgba(16,185,129,.16); }
.vmkt .price .tag { position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,#10b981,#059669); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:6px 14px; border-radius:var(--r-full);
  box-shadow:0 8px 18px -6px rgba(16,120,84,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.vmkt .price-head { display:flex; align-items:center; gap:11px; }
.vmkt .plan-ic { width:38px; height:38px; border-radius:11px; background:linear-gradient(158deg,#f4f8fa 0%, #e7eef2 100%);
  border:1px solid var(--line2); color:var(--slate2); box-shadow:inset 0 1px 0 #fff;
  display:inline-flex; align-items:center; justify-content:center; flex:none; }
.vmkt .price.feat .plan-ic { background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%);
  border-color:rgba(16,185,129,.22); color:var(--accent); }
.vmkt .price .name { font-size:20px; font-weight:720; color:var(--ink); letter-spacing:-.015em; }
/* per-plan limit stats (members / projects / workspaces) */
.vmkt .plan-limits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:22px; }
.vmkt .plan-limits div { padding:11px 4px 9px; border:1px solid var(--line2); border-radius:12px;
  background:var(--tint2); text-align:center; }
.vmkt .plan-limits b { display:block; font-size:14.5px; font-weight:720; color:var(--ink);
  letter-spacing:-.015em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vmkt .plan-limits span { display:block; margin-top:2px; font-size:10px; font-weight:680;
  letter-spacing:.05em; text-transform:uppercase; color:var(--t3); }
/* "what's included" lead-in above the feature list */
.vmkt .price .inc { display:block; margin-top:22px; padding-top:20px; border-top:1px solid var(--line2);
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--t3); }
.vmkt .price .inc + ul { border-top:0; padding-top:12px; }
.vmkt .price .desc { color:var(--t2); font-size:14px; margin:6px 0 22px; min-height:44px; }
.vmkt .price .amt-row { display:flex; align-items:baseline; gap:8px; }
.vmkt .price .amt { font-size:46px; font-weight:760; letter-spacing:-.04em; line-height:1; color:var(--ink); }
.vmkt .price .per { font-size:14px; color:var(--t2); font-weight:520; }
.vmkt .price .btn { margin:24px 0 0; width:100%; }
.vmkt .price ul { list-style:none; padding:22px 0 0; margin:0; display:grid; gap:12px; align-content:start; flex:1;
  border-top:1px solid var(--line2); }
.vmkt .price li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--t1); line-height:1.45; }
.vmkt .price li svg { flex:none; margin-top:1px; width:14px; height:14px; padding:3px; box-sizing:content-box;
  border-radius:50%; background:var(--accent-bg); color:var(--accent); }
/* billing period toggle */
.vmkt .bill-wrap { display:flex; justify-content:center; margin:-14px 0 44px; }
.vmkt .bill-toggle { display:inline-flex; align-items:center; gap:4px; padding:5px;
  border:1px solid var(--line); border-radius:var(--r-full); background:#fff; box-shadow:var(--sh-xs); }
.vmkt .bill-toggle button { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border:0;
  background:transparent; border-radius:var(--r-full); font:inherit; font-size:14px; font-weight:620;
  color:var(--t2); cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); }
.vmkt .bill-toggle button:hover { color:var(--ink); }
.vmkt .bill-toggle button.on { background:var(--slate); color:#fff; box-shadow:var(--sh-sm); }
.vmkt .bill-toggle .save { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--r-full); background:var(--green-bg); color:var(--accent); }
.vmkt .bill-toggle button.on .save { background:rgba(255,255,255,.15); color:#8fe6c4; }
.vmkt .price .bill-note { margin:8px 0 0; font-size:12.5px; color:var(--t3);
  font-variant-numeric:tabular-nums; min-height:18px; }

/* plan comparison table */
.vmkt .compare { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-xs); }
.vmkt .compare-wrap { max-width:880px; margin:64px auto 0; overflow-x:auto; }
.vmkt .compare th, .vmkt .compare td { padding:13px 18px; font-size:14px; text-align:center; border-bottom:1px solid var(--line2); }
.vmkt .compare tbody tr { transition:background .12s; }
.vmkt .compare tbody tr:hover { background:var(--tint2); }
.vmkt .compare th { background:var(--tint2); font-weight:680; color:var(--ink); font-size:13.5px; }
.vmkt .compare td:first-child, .vmkt .compare th:first-child { text-align:left; font-weight:550; color:var(--t1); }
.vmkt .compare tr:last-child td { border-bottom:0; }
.vmkt .compare .yes { color:var(--green); font-weight:700; }
.vmkt .compare .no { color:#c3ccd4; }
/* ---------- pricing stage (homepage): dark cinematic band ---------- */
.vmkt .pricing-stage { position:relative; overflow:hidden; color:#eaf1f4; isolation:isolate;
  background:
    radial-gradient(52% 58% at 82% 0%, rgba(16,185,129,.20), transparent 64%),
    radial-gradient(46% 54% at 8% 96%, rgba(57,88,108,.5), transparent 70%),
    linear-gradient(165deg,#0d1c26 0%, #142a35 55%, #16303c 100%); }
.vmkt .pricing-stage::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:28px 28px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 76%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 76%); }
.vmkt .pricing-stage .sec-head h2 { color:#fff; }
.vmkt .pricing-stage .sec-head .sub { color:rgba(220,231,236,.78); }
.vmkt .pricing-stage .eyebrow { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);
  color:#8fe6c4; box-shadow:none; backdrop-filter:blur(6px); }
.vmkt .pricing-stage .eyebrow .dot { background:#3fe0a4; box-shadow:0 0 10px rgba(63,224,164,.8); }
/* toggle: frosted glass */
.vmkt .pricing-stage .bill-toggle { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); box-shadow:none; backdrop-filter:blur(8px); }
.vmkt .pricing-stage .bill-toggle button { color:rgba(236,243,246,.72); }
.vmkt .pricing-stage .bill-toggle button:hover { color:#fff; }
.vmkt .pricing-stage .bill-toggle button.on { background:#fff; color:var(--slate); }
.vmkt .pricing-stage .bill-toggle button:not(.on) .save { background:rgba(52,211,153,.16); color:#7ff0c6; }
/* an emerald halo behind the featured column */
.vmkt .pricing-stage .price-grid { position:relative; }
.vmkt .pricing-stage .price-grid::before { content:""; position:absolute; left:33%; right:33%; top:-7%; bottom:-7%;
  z-index:0; pointer-events:none; filter:blur(46px); opacity:.8;
  background:radial-gradient(50% 55% at 50% 40%, rgba(16,185,129,.34), transparent 74%); }
.vmkt .pricing-stage .price { position:relative; z-index:1; }
/* side plans: dark frosted glass */
.vmkt .pricing-stage .price:not(.feat) { background:linear-gradient(180deg,rgba(255,255,255,.055) 0%, rgba(255,255,255,.026) 100%);
  border:1px solid rgba(255,255,255,.13); box-shadow:0 26px 52px -30px rgba(0,0,0,.65); backdrop-filter:blur(8px); }
.vmkt .pricing-stage .price:not(.feat):hover { transform:translateY(-5px); border-color:rgba(255,255,255,.24);
  box-shadow:0 34px 64px -30px rgba(0,0,0,.75); }
.vmkt .pricing-stage .price:not(.feat) .name { color:#fff; }
.vmkt .pricing-stage .price:not(.feat) .desc { color:rgba(220,231,236,.62); }
.vmkt .pricing-stage .price:not(.feat) .amt { color:#fff; }
.vmkt .pricing-stage .price:not(.feat) .per,
.vmkt .pricing-stage .price:not(.feat) .bill-note { color:rgba(220,231,236,.55); }
.vmkt .pricing-stage .price:not(.feat) .plan-ic { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16);
  color:#bfe3d4; box-shadow:none; }
.vmkt .pricing-stage .price:not(.feat) .plan-limits div { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.vmkt .pricing-stage .price:not(.feat) .plan-limits b { color:#fff; }
.vmkt .pricing-stage .price:not(.feat) .plan-limits span { color:rgba(220,231,236,.5); }
.vmkt .pricing-stage .price:not(.feat) .inc { color:rgba(220,231,236,.5); border-top-color:rgba(255,255,255,.11); }
.vmkt .pricing-stage .price:not(.feat) ul { border-top-color:rgba(255,255,255,.11); }
.vmkt .pricing-stage .price:not(.feat) li { color:rgba(236,243,246,.88); }
.vmkt .pricing-stage .price:not(.feat) li svg { background:rgba(52,211,153,.16); color:#5fd3a6; }
.vmkt .pricing-stage .price:not(.feat) .btn-ghost { background:rgba(255,255,255,.08); color:#fff;
  border-color:rgba(255,255,255,.2); box-shadow:none; }
.vmkt .pricing-stage .price:not(.feat) .btn-ghost:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.38); }
/* the featured plan: a white card lifted off the dark stage, glowing */
.vmkt .pricing-stage .price.feat { background:linear-gradient(180deg,#fff 0%, #f4faf7 100%); border:1px solid rgba(255,255,255,.92);
  box-shadow:0 0 0 1px rgba(16,185,129,.3), 0 46px 96px -32px rgba(0,0,0,.8), 0 0 90px -24px rgba(16,185,129,.45); }
.vmkt .pricing-stage .price.feat:hover { box-shadow:0 0 0 1px rgba(16,185,129,.38), 0 54px 110px -34px rgba(0,0,0,.85), 0 0 110px -24px rgba(16,185,129,.55); }
.vmkt .pricing-stage .price.feat .tag { box-shadow:0 10px 24px -8px rgba(16,120,84,.75), inset 0 1px 0 rgba(255,255,255,.25); }
/* perk panel + footer line on the dark stage */
.vmkt .pricing-stage .inc-all { color:rgba(220,231,236,.55); }
.vmkt .pricing-stage .all-plans { background:linear-gradient(180deg,rgba(255,255,255,.055) 0%, rgba(255,255,255,.028) 100%);
  border-color:rgba(255,255,255,.13); box-shadow:0 26px 52px -30px rgba(0,0,0,.55); backdrop-filter:blur(8px); }
.vmkt .pricing-stage .perk-ic { background:rgba(52,211,153,.14); border-color:rgba(255,255,255,.1); color:#5fd3a6; box-shadow:none; }
.vmkt .pricing-stage .perk b { color:#fff; }
.vmkt .pricing-stage .perk small { color:rgba(220,231,236,.6); }
.vmkt .pricing-stage .faq-more { color:rgba(220,231,236,.6); }
.vmkt .pricing-stage .faq-more a { color:#7fdcb6; }

/* grouped category rows inside the compare table */
.vmkt .compare .cmp-sec th { background:linear-gradient(180deg,#f2f8f5,#eef3f6); text-align:left;
  font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--slate2); padding:11px 18px; }
/* "every plan includes" perk panel under the plan cards */
.vmkt .all-plans { margin-top:46px; padding:30px 32px; text-align:center;
  background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-xs); }
.vmkt .all-plans .inc-all { display:block; font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--t3); margin-bottom:24px; }
.vmkt .perk-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 26px; text-align:left; }
.vmkt .perk { display:flex; gap:13px; align-items:flex-start; }
.vmkt .perk-ic { width:38px; height:38px; border-radius:11px; background:var(--accent-bg); color:var(--accent);
  border:1px solid rgba(16,185,129,.16); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.vmkt .perk b { display:block; font-size:14px; font-weight:660; color:var(--ink); letter-spacing:-.005em; }
.vmkt .perk small { display:block; margin-top:3px; font-size:12.5px; line-height:1.5; color:var(--t2); }
@media (max-width:980px) { .vmkt .perk-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:540px) { .vmkt .perk-grid { grid-template-columns:1fr; } }

/* ---------- faq ---------- */
.vmkt .faq { max-width:780px; margin:0 auto; display:grid; gap:14px; }
.vmkt .faq details { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:6px 22px; box-shadow:var(--sh-xs); }
.vmkt .faq details[open] { border-color:#d3dbe2; box-shadow:var(--sh-sm); }
.vmkt .faq summary { cursor:pointer; font-weight:620; font-size:15.5px; padding:16px 0; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--ink); }
.vmkt .faq summary::-webkit-details-marker { display:none; }
.vmkt .faq summary::after { content:"+"; color:var(--slate2); font-size:22px; font-weight:300; line-height:1; }
.vmkt .faq details[open] summary::after { content:"\2013"; }
.vmkt .faq details p { margin:0 0 18px; color:var(--t2); font-size:14.5px; line-height:1.62; }
.vmkt .faq-more { text-align:center; margin:36px 0 0; color:var(--t3); font-size:14.5px; }
.vmkt .faq-more a { font-weight:640; color:var(--accent); }

/* ---------- contact ---------- */
.vmkt .contact-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:40px;
  text-align:center; box-shadow:var(--sh-md); max-width:580px; margin:0 auto; }
.vmkt .contact-card .ic { margin:0 auto 18px; width:54px; height:54px; }

/* ---------- metrics band (big, honest numbers) ---------- */
.vmkt .metrics { border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fbfcfd,#f3f6f8); }
.vmkt .metrics-in { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.vmkt .metric { padding:40px 16px; text-align:center; border-right:1px solid var(--line); }
.vmkt .metric:last-child { border-right:0; }
.vmkt .metric-ic { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:15px;
  border-radius:12px; background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%); border:1px solid rgba(16,185,129,.22);
  color:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
.vmkt .metric .n { display:block; font-size:clamp(34px,3.7vw,46px); font-weight:800; letter-spacing:-.035em; line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg,#2c4a5d 0%, #16303c 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vmkt .metric .n .u { -webkit-text-fill-color:var(--accent); color:var(--accent); }
.vmkt .metric .l { display:block; margin-top:11px; font-size:13px; color:var(--t2); font-weight:580; letter-spacing:-.01em; }

/* ---------- "every view" tabbed gallery (CSS-only, no JS) ---------- */
.vmkt .viewgal { position:relative; }
.vmkt .viewgal > input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.vmkt .viewgal-tabs { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:0 0 28px; }
.vmkt .viewgal-tabs label { display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--r-full);
  border:1px solid var(--line); background:#fff; color:var(--t2); font-size:13.6px; font-weight:570; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s; white-space:nowrap; }
.vmkt .viewgal-tabs label:hover { border-color:var(--slate2); color:var(--ink); }
.vmkt .viewgal-tabs label svg { opacity:.62; flex:none; }
.vmkt .viewgal-body { position:relative; }
.vmkt .viewgal-stage { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--sh-lg); background:#0f1a21; aspect-ratio:1920/1200; }
.vmkt .vg-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .4s var(--ease); }
.vmkt .vg-slide img { width:100%; height:100%; object-fit:cover; object-position:top left; display:block; }
.vmkt .vg-badge { position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:baseline; gap:8px;
  max-width:calc(100% - 32px); background:rgba(15,26,33,.84); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:#d5dee4; padding:9px 14px; border-radius:11px; font-size:12.8px; line-height:1.35;
  box-shadow:0 10px 30px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); }
.vmkt .vg-badge b { color:#fff; font-weight:660; font-size:13.5px; }
/* active tab + visible slide (grouped so it stays compact for all 11 views) */
.vmkt #vg1:checked ~ .viewgal-tabs label[for=vg1], .vmkt #vg2:checked ~ .viewgal-tabs label[for=vg2],
.vmkt #vg3:checked ~ .viewgal-tabs label[for=vg3], .vmkt #vg4:checked ~ .viewgal-tabs label[for=vg4],
.vmkt #vg5:checked ~ .viewgal-tabs label[for=vg5], .vmkt #vg6:checked ~ .viewgal-tabs label[for=vg6],
.vmkt #vg7:checked ~ .viewgal-tabs label[for=vg7], .vmkt #vg8:checked ~ .viewgal-tabs label[for=vg8],
.vmkt #vg9:checked ~ .viewgal-tabs label[for=vg9], .vmkt #vg10:checked ~ .viewgal-tabs label[for=vg10],
.vmkt #vg11:checked ~ .viewgal-tabs label[for=vg11] {
  background:var(--slate); color:#fff; border-color:var(--slate); box-shadow:var(--sh-sm); }
.vmkt #vg1:checked ~ .viewgal-tabs label[for=vg1] svg, .vmkt #vg2:checked ~ .viewgal-tabs label[for=vg2] svg,
.vmkt #vg3:checked ~ .viewgal-tabs label[for=vg3] svg, .vmkt #vg4:checked ~ .viewgal-tabs label[for=vg4] svg,
.vmkt #vg5:checked ~ .viewgal-tabs label[for=vg5] svg, .vmkt #vg6:checked ~ .viewgal-tabs label[for=vg6] svg,
.vmkt #vg7:checked ~ .viewgal-tabs label[for=vg7] svg, .vmkt #vg8:checked ~ .viewgal-tabs label[for=vg8] svg,
.vmkt #vg9:checked ~ .viewgal-tabs label[for=vg9] svg, .vmkt #vg10:checked ~ .viewgal-tabs label[for=vg10] svg,
.vmkt #vg11:checked ~ .viewgal-tabs label[for=vg11] svg { opacity:1; }
.vmkt #vg1:checked ~ .viewgal-body .vs1, .vmkt #vg2:checked ~ .viewgal-body .vs2,
.vmkt #vg3:checked ~ .viewgal-body .vs3, .vmkt #vg4:checked ~ .viewgal-body .vs4,
.vmkt #vg5:checked ~ .viewgal-body .vs5, .vmkt #vg6:checked ~ .viewgal-body .vs6,
.vmkt #vg7:checked ~ .viewgal-body .vs7, .vmkt #vg8:checked ~ .viewgal-body .vs8,
.vmkt #vg9:checked ~ .viewgal-body .vs9, .vmkt #vg10:checked ~ .viewgal-body .vs10,
.vmkt #vg11:checked ~ .viewgal-body .vs11 { opacity:1; visibility:visible; z-index:2; }
.vmkt .viewgal :focus-visible + .viewgal-tabs { outline:none; }
.vmkt .viewgal-tabs label:focus-within { outline:2px solid var(--slate2); outline-offset:2px; }

/* ---------- dense capability grid ("everything in one workspace") ---------- */
.vmkt .feat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.vmkt .feat { display:flex; gap:13px; align-items:flex-start; padding:17px 18px; border:1px solid var(--line);
  border-radius:14px; background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); box-shadow:0 1px 2px rgba(20,40,54,.04);
  transition:border-color .17s var(--ease), box-shadow .17s var(--ease), transform .17s var(--ease); }
.vmkt .feat:hover { border-color:#cfd8de; box-shadow:0 16px 32px -18px rgba(20,40,54,.3); transform:translateY(-3px); }
.vmkt .feat .fic { width:36px; height:36px; border-radius:10px; background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%);
  border:1px solid rgba(16,185,129,.22); color:var(--accent); box-shadow:inset 0 1px 0 #fff;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:background .17s var(--ease), color .17s var(--ease), border-color .17s var(--ease); }
.vmkt .feat:hover .fic { background:linear-gradient(135deg,#10b981,#059669); border-color:transparent; color:#fff; }
.vmkt .feat .ftx b { display:block; font-size:14px; color:var(--ink); letter-spacing:-.01em; font-weight:640; }
.vmkt .feat .ftx span { display:block; margin-top:3px; font-size:12.7px; color:var(--t2); line-height:1.45; }

/* ---------- "how it works" numbered steps ---------- */
.vmkt .steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; counter-reset:step; }
.vmkt .step { position:relative; background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 28px; box-shadow:0 1px 2px rgba(20,40,54,.045), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.vmkt .step:hover { transform:translateY(-4px); border-color:rgba(16,185,129,.4);
  box-shadow:0 22px 44px -22px rgba(20,40,54,.32), 0 3px 8px -3px rgba(20,40,54,.1); }
.vmkt .step::before { counter-increment:step; content:counter(step); display:inline-flex; align-items:center;
  justify-content:center; width:42px; height:42px; border-radius:12px; color:#fff;
  background:linear-gradient(135deg,#10b981,#059669);
  font-weight:720; font-size:17px; margin-bottom:16px;
  box-shadow:0 10px 22px -8px rgba(16,140,100,.55), inset 0 1px 0 rgba(255,255,255,.25); }
.vmkt .step h3 { font-size:17.5px; letter-spacing:-.015em; margin:0 0 7px; }
.vmkt .step p { margin:0; color:var(--t2); font-size:14.5px; line-height:1.56; }
.vmkt .step p a { font-weight:600; color:var(--accent); }
/* a subtle chevron in the gap between steps, to read as a flow */
@media (min-width:821px) {
  .vmkt .steps .step:not(:last-child)::after { content:""; position:absolute; top:44px; right:-13px; z-index:2;
    width:9px; height:9px; border-top:2px solid #7bd0ac; border-right:2px solid #7bd0ac;
    transform:rotate(45deg); transition:transform .2s var(--ease); }
  .vmkt .steps .step:not(:last-child):hover::after { transform:rotate(45deg) translate(1px,-1px); }
}
@media (max-width:820px) { .vmkt .steps { grid-template-columns:1fr; max-width:460px; margin:0 auto; } }

/* ---------- "why" split-feature list ---------- */
.vmkt .why-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.vmkt .why { padding:6px 34px; }
.vmkt .why:first-child { padding-left:0; }
.vmkt .why:last-child { padding-right:0; }
.vmkt .why + .why { border-left:1px solid var(--line2); }
.vmkt .why .why-ic { width:44px; height:44px; border-radius:12px; background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%);
  border:1px solid rgba(16,185,129,.22); color:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:15px; }
.vmkt .why h3 { font-size:17px; letter-spacing:-.015em; margin:0 0 7px; }
.vmkt .why p { margin:0; color:var(--t2); font-size:14.5px; line-height:1.58; }
@media (max-width:900px) { .vmkt .why-grid { grid-template-columns:1fr; gap:26px; } .vmkt .why { padding:0; } .vmkt .why + .why { border-left:0; } }

/* ---------- integration chip row ---------- */
.vmkt .intg { display:flex; flex-wrap:wrap; gap:11px; justify-content:center; }
.vmkt .intg > span { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:1px solid var(--line);
  border-radius:var(--r-full); background:#fff; font-size:14px; font-weight:560; color:var(--t1); box-shadow:var(--sh-xs); }
.vmkt .intg span .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }

/* ---------- scroll-reveal motion (CSS-only, progressive enhancement) ---------- */
/* Guarded by @supports so browsers without scroll-timeline show everything
   normally, and disabled under reduced-motion. */
@keyframes rise-in { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vmkt .sec-head, .vmkt .grid > .card, .vmkt .step, .vmkt .feat, .vmkt .why,
    .vmkt .split-copy, .vmkt .split-shot, .vmkt .price, .vmkt .metric, .vmkt .intg,
    .vmkt .viewgal, .vmkt .faq, .vmkt .closing-in, .vmkt .logos,
    .vmkt .ai-console, .vmkt .ai-card, .vmkt .ai-tool,
    .vmkt .versus-col, .vmkt .intg-card, .vmkt .intg-wide {
      animation:rise-in linear both; animation-timeline:view(); animation-range:entry 0% cover 20%; }
    .vmkt .grid > .card:nth-child(2), .vmkt .steps .step:nth-child(2) { animation-range:entry 3% cover 22%; }
    .vmkt .grid > .card:nth-child(3), .vmkt .steps .step:nth-child(3) { animation-range:entry 6% cover 24%; }
  }
}

/* ---------- footer: dark aurora stage with a ghosted wordmark ---------- */
.vmkt .foot { position:relative; overflow:hidden; color:#b9c4cf;
  background:
    radial-gradient(44% 52% at 86% 0%, rgba(16,185,129,.13), transparent 64%),
    radial-gradient(38% 48% at 4% 8%, rgba(50,86,108,.38), transparent 70%),
    linear-gradient(180deg,#0d1b24 0%, #0a1620 100%); }
.vmkt .foot::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px); background-size:30px 30px;
  mask-image:radial-gradient(110% 70% at 50% 0%, #000 25%, transparent 70%);
  -webkit-mask-image:radial-gradient(110% 70% at 50% 0%, #000 25%, transparent 70%); }
/* emerald hairline along the top edge */
.vmkt .foot::after { content:""; position:absolute; inset:0 0 auto; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent 4%, rgba(16,185,129,.5) 28%, rgba(255,255,255,.28) 50%, rgba(16,185,129,.5) 72%, transparent 96%); }
.vmkt .foot .wrap { position:relative; z-index:1; }
/* top row: identity left, actions right */
.vmkt .foot-hero { display:flex; align-items:center; justify-content:space-between; gap:24px 28px; flex-wrap:wrap;
  padding:56px 0 40px; border-bottom:1px solid rgba(255,255,255,.08); }
.vmkt .foot-brand { display:inline-flex; align-items:center; gap:12px; }
.vmkt .foot-brand .brand-mk { box-shadow:0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -10px rgba(0,0,0,.7); }
.vmkt .foot-brand .wm { font-size:19px; font-weight:760; letter-spacing:-.015em; color:#fff; }
.vmkt .foot-brand .wm span { color:#8b98a5; font-weight:600; margin-left:-0.05em; }
.vmkt .foot-blurb { color:#8d9aa6; font-size:13.5px; margin:10px 0 0 2px; }
.vmkt .foot-cta { display:flex; align-items:center; gap:12px 14px; flex-wrap:wrap; }
.vmkt .foot .btn-ghost { background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.22); box-shadow:none; }
.vmkt .foot .btn-ghost:hover { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.4); }
.vmkt .foot-open { display:inline-flex; align-items:center; gap:6px; color:#7fdcb6; font-size:14px; font-weight:640; white-space:nowrap; }
.vmkt .foot-open:hover { color:#a9f0d3; }
.vmkt .foot-open svg { transition:transform .18s var(--ease); }
.vmkt .foot-open:hover svg { transform:translateX(3px); }
/* link columns */
.vmkt .foot-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; padding:44px 0 26px; }
.vmkt .foot-col h4 { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.94); font-size:12px;
  letter-spacing:.09em; text-transform:uppercase; margin:0 0 16px; font-weight:720; }
.vmkt .foot-col h4::before { content:""; width:5px; height:5px; border-radius:50%; flex:none;
  background:#34d399; box-shadow:0 0 8px rgba(52,211,153,.8); }
.vmkt .foot-col a { display:block; width:fit-content; position:relative; color:#95a3b0; font-size:14px;
  padding:5.5px 0; transition:color .14s; }
.vmkt .foot-col a::after { content:""; position:absolute; left:0; bottom:3px; height:1px; width:100%;
  background:linear-gradient(90deg,#34d399,#7ff0c6); transform:scaleX(0); transform-origin:left;
  transition:transform .18s var(--ease); }
.vmkt .foot-col a:hover { color:#fff; }
.vmkt .foot-col a:hover::after { transform:scaleX(1); }
.vmkt .foot-col .ext { display:flex; align-items:center; gap:6px; }
.vmkt .foot-col .ext svg { opacity:.55; flex:none; }
/* bottom bar */
.vmkt .foot-bot { border-top:1px solid rgba(255,255,255,.08); padding:22px 0 6px; display:flex; gap:14px 28px;
  align-items:center; justify-content:space-between; flex-wrap:wrap; color:#71808d; font-size:13px; }
.vmkt .foot-bot-l { display:flex; flex-direction:column; gap:4px; }
.vmkt .foot-reg { margin:0; color:#5e6e7b; font-size:12px; }
.vmkt .foot-bot-r { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.vmkt .foot-bot-r a { display:inline-flex; align-items:center; gap:5px; color:#95a3b0; }
.vmkt .foot-bot-r a:hover { color:#fff; }
.vmkt .foot-bot-r svg { opacity:.55; flex:none; }
.vmkt .foot-suite-badge { display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:620; color:#9fb4ac; background:rgba(16,185,129,.13);
  border:1px solid rgba(16,185,129,.3); padding:5px 11px; border-radius:var(--r-full); }
.vmkt .foot-suite-badge .dot { width:6px; height:6px; border-radius:50%; background:#5fd3a6; }
/* giant ghosted wordmark bleeding off the bottom edge */
.vmkt .foot-wm { position:relative; z-index:0; margin:24px 0 -0.24em; text-align:center; white-space:nowrap;
  font-size:clamp(64px, 11vw, 168px); font-weight:770; letter-spacing:-.05em; line-height:1;
  background:linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.012) 82%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  user-select:none; pointer-events:none; }
@media (max-width:1040px) { .vmkt .foot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 26px; } }
@media (max-width:640px) {
  .vmkt .foot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vmkt .foot-hero { flex-direction:column; align-items:flex-start; padding-top:46px; }
  .vmkt .foot-bot { flex-direction:column; align-items:flex-start; }
}

/* ---------- help widget (Vantra AI Assistant) ---------- */
.vmkt .hw-fab { position:fixed; right:22px; bottom:22px; z-index:70; display:inline-flex; align-items:center; gap:9px;
  padding:13px 19px; border:0; border-radius:var(--r-full); cursor:pointer; font:inherit; font-size:14.5px;
  font-weight:650; color:#fff; background:linear-gradient(135deg,#10b981,#0d9488);
  box-shadow:0 16px 38px -12px rgba(13,120,84,.6), inset 0 0 0 1px rgba(255,255,255,.14);
  transition:transform .18s var(--ease), box-shadow .18s; }
.vmkt .hw-fab svg { flex:none; }
.vmkt .hw-fab:hover { transform:translateY(-2px); box-shadow:0 22px 44px -12px rgba(13,120,84,.7), inset 0 0 0 1px rgba(255,255,255,.2); }
.vmkt .hw-panel { position:fixed; right:22px; bottom:84px; z-index:71; width:min(424px, calc(100vw - 32px));
  height:min(620px, calc(100vh - 116px)); display:none; flex-direction:column; overflow:hidden;
  border-radius:18px; background:#fff; border:1px solid var(--line);
  box-shadow:0 40px 90px -18px rgba(13,30,40,.45), 0 4px 14px -6px rgba(13,30,40,.22); }
.vmkt .hw-panel.open { display:flex; }

/* Hero (navy) — the "how can we help" ask box. Small bottom padding so the
   navy ends partway down the ask card, letting the card straddle the boundary
   (its lower third floats over the white area, like the reference). */
.vmkt .hw-hero { position:relative; flex:none; padding:18px 22px 12px; color:#fff;
  background:
    radial-gradient(90% 90% at 50% 118%, rgba(16,185,129,.34), transparent 60%),
    radial-gradient(120% 130% at 12% -10%, #17493f 0%, #103135 46%, #0b1a23 100%); }
.vmkt .hw-hero-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vmkt .hw-brand { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; letter-spacing:.1px; }
.vmkt .hw-brand svg { color:#6fe0b0; flex:none; }
.vmkt .hw-hero-actions { display:flex; align-items:center; gap:6px; }
.vmkt .hw-close { background:transparent; border:0; color:rgba(255,255,255,.72);
  cursor:pointer; font-size:22px; line-height:1; padding:2px 6px; border-radius:8px; }
.vmkt .hw-close:hover { color:#fff; background:rgba(255,255,255,.08); }
.vmkt .hw-new { display:none; align-items:center; gap:5px; background:rgba(255,255,255,.1); border:0;
  color:#eafaf3; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:var(--r-full); }
.vmkt .hw-new:hover { background:rgba(255,255,255,.18); }
.vmkt .hw-new svg { flex:none; }
.vmkt .hw-panel.convo .hw-new { display:inline-flex; }
.vmkt .hw-title { margin:20px 0 0; font-size:29px; line-height:1.12; font-weight:800; letter-spacing:-.5px; color:#fff; }
.vmkt .hw-sub { margin:10px 0 0; font-size:12.5px; line-height:1.5; letter-spacing:-.1px; white-space:nowrap; color:rgba(223,236,240,.76); }
.vmkt .hw-panel.convo .hw-title, .vmkt .hw-panel.convo .hw-sub { display:none; }
/* The floating, glowing ask box — a white card with a soft luminous frame
   over the dark hero, echoed by the green bloom behind it. */
.vmkt .hw-ask { position:relative; z-index:1; margin:24px 0 -48px; background:#fff; border-radius:18px;
  box-shadow:
    0 22px 48px -18px rgba(4,16,20,.55),
    0 0 42px 0 rgba(255,255,255,.10);
  transition:box-shadow .18s var(--ease); }
/* No distinct focus ring — the card looks the same whether or not the field
   is focused (it auto-focuses on open, so a focus glow reads as an unwanted
   permanent border). */
.vmkt .hw-ask:focus-within { box-shadow:
    0 22px 48px -18px rgba(4,16,20,.55),
    0 0 42px 0 rgba(255,255,255,.10); }
.vmkt .hw-input:focus, .vmkt .hw-input:focus-visible { outline:none; box-shadow:none; }
.vmkt .hw-panel.convo .hw-ask { margin-top:14px; }
.vmkt .hw-input { display:block; width:100%; box-sizing:border-box; resize:none; border:0; outline:none;
  font:inherit; font-size:14.5px; line-height:1.5; color:var(--ink); background:transparent;
  padding:16px 58px 16px 18px; border-radius:18px; min-height:88px; max-height:130px; }
.vmkt .hw-input::placeholder { color:#9aa7b0; }
.vmkt .hw-send { position:absolute; right:11px; bottom:11px; width:44px; height:44px; flex:none; border:0;
  border-radius:50%; cursor:pointer; color:#fff; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#10b981,#0d9488); box-shadow:0 10px 20px -6px rgba(13,120,84,.75);
  transition:transform .14s var(--ease), box-shadow .14s; }
.vmkt .hw-send:hover { transform:translateY(-1px); box-shadow:0 14px 24px -6px rgba(13,120,84,.85); }

.vmkt .hw-disclaim { flex:none; padding:60px 22px 10px; background:#fff; font-size:11.5px; line-height:1.5; color:var(--t3); }

/* Scroll area: home = suggested questions, convo = message thread */
.vmkt .hw-scroll { flex:1; min-height:0; overflow-y:auto; background:#fff; }
.vmkt .hw-suggest { display:flex; flex-direction:column; }
.vmkt .hw-panel.convo .hw-suggest { display:none; }
.vmkt .hw-suggest-item { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  font:inherit; font-size:14px; font-weight:500; color:var(--t1); background:transparent; border:0; border-top:1px solid var(--line);
  padding:13px 18px; transition:background .12s; }
.vmkt .hw-suggest-item:first-child { border-top:0; }
.vmkt .hw-suggest-item:hover { background:#eff8f3; color:var(--accent); }
.vmkt .hw-suggest-ic { flex:none; color:#8695a0; display:inline-flex; transition:color .12s; }
.vmkt .hw-suggest-item:hover .hw-suggest-ic, .vmkt .hw-suggest-item:hover .hw-suggest-ch { color:var(--accent); }
.vmkt .hw-suggest-tx { flex:1; min-width:0; }
.vmkt .hw-suggest-ch { flex:none; color:#b3bec6; display:inline-flex; transition:color .12s, transform .12s; }
.vmkt .hw-suggest-item:hover .hw-suggest-ch { transform:translateX(2px); }

.vmkt .hw-msgs { display:none; flex-direction:column; gap:10px; padding:16px 16px 18px; }
.vmkt .hw-panel.convo .hw-msgs { display:flex; }
.vmkt .hw-msg { max-width:88%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.55; }
.vmkt .hw-msg p { margin:0; }
.vmkt .hw-msg p + p, .vmkt .hw-msg ul { margin-top:7px; }
.vmkt .hw-msg ul { margin-bottom:0; padding-left:18px; }
.vmkt .hw-msg .hw-src { margin-top:9px; padding-top:8px; border-top:1px solid var(--line);
  font-size:12px; line-height:1.5; color:var(--t3, #6b7c86); }
.vmkt .hw-msg.bot { align-self:flex-start; background:#f4f7f8; border:1px solid var(--line);
  color:var(--t1); border-bottom-left-radius:5px; }
.vmkt .hw-msg.bot a { color:var(--accent); font-weight:620; }
.vmkt .hw-msg.user { align-self:flex-end; background:var(--slate); color:#fff; border-bottom-right-radius:5px; }
.vmkt .hw-typing { display:inline-flex; gap:4px; padding:2px 0; }
.vmkt .hw-typing i { width:6px; height:6px; border-radius:50%; background:#9fb0bc; animation:hw-blink 1.1s infinite; }
.vmkt .hw-typing i:nth-child(2) { animation-delay:.18s; }
.vmkt .hw-typing i:nth-child(3) { animation-delay:.36s; }
@keyframes hw-blink { 0%, 70%, 100% { opacity:.35; } 35% { opacity:1; } }

.vmkt .hw-foot { flex:none; padding:12px 18px; border-top:1px solid var(--line); background:#f8fafb;
  font-size:12.5px; color:var(--t3); }
.vmkt .hw-foot a { color:var(--accent); font-weight:620; }

/* a couple of gentle attention rings on first visit, until opened once */
@keyframes hw-ring { 0% { outline:0 solid rgba(16,185,129,.5); outline-offset:0; }
  70% { outline:14px solid rgba(16,185,129,0); outline-offset:6px; }
  100% { outline:0 solid rgba(16,185,129,0); outline-offset:0; } }
.vmkt .hw-fab.hw-pulse { animation:hw-ring 2.2s ease-out .8s 2; }
@media (max-width:560px) {
  .vmkt .hw-fab { right:14px; bottom:14px; padding:12px 16px; }
  .vmkt .hw-panel { right:8px; left:8px; bottom:76px; width:auto; }
  .vmkt .hw-title { font-size:23px; }
}
@media (prefers-reduced-motion:reduce) { .vmkt .hw-typing i, .vmkt .hw-fab.hw-pulse, .vmkt .hw-send { animation:none; transition:none; } }

/* ---------- page hero (inner pages): dark and cinematic, like the homepage ---------- */
.vmkt .page-hero { position:relative; overflow:hidden; color:#eaf1f4; isolation:isolate;
  background:
    radial-gradient(58% 48% at 50% -6%, rgba(16,185,129,.2), transparent 66%),
    radial-gradient(48% 52% at 86% 6%, rgba(50,86,108,.55), transparent 72%),
    linear-gradient(178deg,#0b1820 0%, #0f2029 48%, #16303c 100%); }
.vmkt .page-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size:28px 28px;
  mask-image:radial-gradient(130% 86% at 50% -6%, #000 34%, transparent 74%);
  -webkit-mask-image:radial-gradient(130% 86% at 50% -6%, #000 34%, transparent 74%); }
.vmkt .page-hero .hero-in { position:relative; padding:92px 28px 96px; max-width:960px; margin:0 auto; }
.vmkt .page-hero.has-shot .hero-in { padding-bottom:0; }
.vmkt .page-hero h1 { color:#fff; font-size:clamp(38px,4.9vw,58px); letter-spacing:-.04em; line-height:1.02; }
.vmkt .page-hero .lead { color:rgba(220,231,236,.82); font-size:clamp(17px,1.5vw,20px); }
.vmkt .page-hero .eyebrow { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#8fe6c4; box-shadow:none; }
.vmkt .page-hero .eyebrow .dot { background:#3fe0a4; box-shadow:0 0 10px rgba(63,224,164,.8); }
.vmkt .page-hero .btn-ghost { background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.2); box-shadow:none; }
.vmkt .page-hero .btn-ghost:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.36); }
/* the framed shot rises out of the fold, flush with the hero's bottom edge */
.vmkt .page-hero .hero-shot { position:relative; max-width:1040px; margin:64px auto 0; padding:0 28px; }
.vmkt .page-hero .hero-shot::before { content:""; position:absolute; inset:-4% -8% 12% -8%; z-index:0; pointer-events:none;
  background:radial-gradient(58% 58% at 50% 42%, rgba(16,185,129,.18), transparent 70%); filter:blur(30px); }
.vmkt .page-hero .hero-shot .browser { position:relative; border-radius:16px 16px 0 0; border:1px solid rgba(255,255,255,.16); border-bottom:0;
  box-shadow:0 -20px 80px -20px rgba(0,0,0,.45), 0 30px 60px rgba(0,0,0,.35); }

/* ---------- legal pages ---------- */
.vmkt .legal { max-width:760px; margin:0 auto; padding:72px 28px 96px; }
.vmkt .legal h1 { font-size:clamp(30px,4vw,40px); margin-bottom:8px; }
.vmkt .legal .meta { color:var(--t3); font-size:13.5px; margin:0 0 34px; }
.vmkt .legal .lead { margin-bottom:8px; }
.vmkt .legal h2 { font-size:19px; letter-spacing:-.015em; margin:38px 0 10px; }
.vmkt .legal p, .vmkt .legal li { color:var(--t1); font-size:15.5px; line-height:1.7; }
.vmkt .legal p { margin:0 0 14px; }
.vmkt .legal ul { padding-left:22px; margin:0 0 14px; }
.vmkt .legal li { margin:6px 0; }
.vmkt .legal a { font-weight:600; color:var(--accent); }

/* ---------- a11y ---------- */
.vmkt .skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--slate); color:#fff;
  padding:10px 16px; border-radius:0 0 10px 0; font-weight:600; font-size:14px; }
.vmkt .skip-link:focus { left:0; }
.vmkt :focus-visible { outline:2px solid var(--slate2); outline-offset:2px; border-radius:4px; }

/* ---------- responsive ---------- */
@media (max-width:980px) {
  .vmkt .strip-in { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
  .vmkt .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vmkt .split, .vmkt .split.rev { grid-template-columns:1fr; gap:34px; padding:44px 0; }
  .vmkt .split.rev .split-copy { order:0; }
  .vmkt .duo { grid-template-columns:1fr; }
  .vmkt .price-grid { grid-template-columns:1fr; max-width:460px; margin:0 auto; }
  .vmkt .foot-top { grid-template-columns:1fr 1fr; gap:28px 24px; }
  .vmkt .metrics-in { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .vmkt .metric:nth-child(4) { border-right:1px solid var(--line); }
  .vmkt .metric:nth-child(3n) { border-right:0; }
  .vmkt .feat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .vmkt { --sec-y:68px; }
  .vmkt .hero-in { padding:64px 22px 0; }
  .vmkt .shot-stage { margin-top:44px; padding:0 16px; }
  .vmkt .grid-2, .vmkt .grid-3, .vmkt .grid-4 { grid-template-columns:1fr; }
  .vmkt .metrics-in { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vmkt .metric { padding:26px 12px; border-bottom:1px solid var(--line); }
  .vmkt .metric:nth-child(odd) { border-right:1px solid var(--line); }
  .vmkt .metric:nth-child(even) { border-right:0; }
  .vmkt .feat-grid { grid-template-columns:1fr; }
  .vmkt .viewgal-tabs { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .vmkt .viewgal-tabs::-webkit-scrollbar { display:none; }
  .vmkt .vg-badge { left:10px; bottom:10px; font-size:11.5px; padding:7px 11px; }
  .vmkt .vg-badge b { font-size:12px; }
  .vmkt .steps-grid { grid-template-columns:1fr; }
  .vmkt .browser-url { display:none; }
  /* zoom-crop the wide app screenshots so the UI stays legible on phones */
  .vmkt .split-shot .browser img, .vmkt .hero .browser img { aspect-ratio:4/3; object-fit:cover; object-position:var(--pos-m,28% 0%); }
  .vmkt .cta-row { flex-direction:column; align-items:stretch; max-width:330px; margin-left:auto; margin-right:auto; }
  .vmkt .cta-row .btn { width:100%; }
  .vmkt .hero-note { flex-direction:column; gap:9px; align-items:center; }
  .vmkt .hero-note span { white-space:nowrap; }
  .vmkt .strip-in { grid-template-columns:1fr; gap:18px; }
  .vmkt .strip-item { justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  .vmkt, body.vmkt { scroll-behavior:auto; }
  .vmkt .btn, .vmkt .card, .vmkt .price { transition:none; }
}

/* ---- template marquee (homepage) ---- */
.vmkt .tplband { border-top:0; }
.vmkt .tplmq { display:flex; flex-direction:column; gap:18px; overflow:hidden; margin-top:46px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.vmkt .tplmq-row { display:flex; gap:18px; width:max-content; animation:tplmq-l 64s linear infinite; }
.vmkt .tplmq-row--rev { animation:tplmq-r 76s linear infinite; }
.vmkt .tplmq:hover .tplmq-row { animation-play-state:paused; }
.vmkt .tplmq-set { display:flex; gap:18px; }
@keyframes tplmq-l { to { transform:translateX(calc(-50% - 9px)); } }
@keyframes tplmq-r { from { transform:translateX(calc(-50% - 9px)); } to { transform:translateX(0); } }
.vmkt .tplmq-card { flex-shrink:0; width:384px; display:block; background:var(--bg); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; text-decoration:none; box-shadow:0 1px 2px rgba(15,30,40,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.vmkt .tplmq-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow:0 10px 26px rgba(15,30,40,.12); }
.vmkt .tplmq-shot { display:block; aspect-ratio:960/600; overflow:hidden; border-bottom:1px solid var(--line); }
.vmkt .tplmq-shot img { display:block; width:100%; height:100%; object-fit:cover; }
.vmkt .tplmq-body { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:11px 14px 12px; }
.vmkt .tplmq-body b { font-size:14px; font-weight:650; color:var(--ink); white-space:nowrap; }
.vmkt .tplmq-body > span:last-child { font-size:12px; color:var(--t3); white-space:nowrap; }
@media (prefers-reduced-motion:reduce) {
  .vmkt .tplmq { overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .vmkt .tplmq-row { animation:none; }
}
@media (max-width:720px) { .vmkt .tplmq-card { width:280px; } .vmkt .tplmq { margin-top:34px; } }

/* ---- mini-boards: stylised template previews ----
   Crisp HTML/CSS recreations of each template's board, built from the real
   template data (columns, tasks, priorities, milestones) with the app's stage
   and priority palette — sharp at any pixel density where a downscaled
   screenshot goes soft. Used on the templates page cards and the homepage
   marquee (.mb--sm). */
.vmkt .mb { display:flex; gap:10px; padding:16px 16px 0; aspect-ratio:8/5; overflow:hidden; align-items:flex-start;
  background:linear-gradient(160deg,#f6f9fb 0%,#eef3f7 100%); }
.vmkt .mb-col { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px; }
.vmkt .mb-head { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.01em;
  color:var(--t2); white-space:nowrap; overflow:hidden; padding:2px 2px 0; }
.vmkt .mb-head i { flex:none; width:8px; height:8px; border-radius:50%; }
.vmkt .mb-head b { margin-left:auto; font-size:10px; font-weight:700; color:var(--t3); background:#fff;
  border:1px solid var(--line); border-radius:99px; padding:1px 7px; }
.vmkt .mb-card { display:flex; flex-direction:column; gap:7px; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:10px 11px 11px; box-shadow:0 1px 2px rgba(15,30,40,.05); }
.vmkt .mb-name { font-size:12.5px; line-height:1.32; font-weight:600; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vmkt .mb-meta { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; overflow:hidden; }
.vmkt .mb-pill { flex:none; font-size:9.5px; font-weight:750; font-style:normal; letter-spacing:.02em;
  border-radius:99px; padding:2.5px 8px; }
.vmkt .mb-ms { flex:none; display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700;
  font-style:normal; color:#6b7683; background:#eef1f5; border-radius:99px; padding:2.5px 8px; }
.vmkt .mb-ms::before { content:"◆"; font-size:8px; color:#8b95a3; }
.vmkt .mb-ghost { border:1.5px dashed #d7dde4; border-radius:10px; min-height:30px; background:rgba(255,255,255,.35); }
/* smaller variant for the homepage marquee cards */
.vmkt .mb--sm { gap:8px; padding:12px 12px 0; }
.vmkt .mb--sm .mb-head { font-size:10px; gap:5px; }
.vmkt .mb--sm .mb-head b { font-size:8.5px; padding:1px 5px; }
.vmkt .mb--sm .mb-card { gap:5px; padding:8px 9px 9px; border-radius:8px; }
.vmkt .mb--sm .mb-name { font-size:10.5px; }
.vmkt .mb--sm .mb-pill, .vmkt .mb--sm .mb-ms { font-size:8px; padding:2px 6px; }
/* the templates-page card frame keeps its border/hover; the mini-board supplies the art */
.vmkt .tpl-card .tpl-shot.mb { display:flex; aspect-ratio:8/5; }

/* ---- About: "Our story" feature stage ----
   A light rounded stage with an editorial lede, a chaos->calm diagram drawn in
   HTML/CSS (five scattered tool chips wired together vs one calm workspace
   card), two-column prose and kicker links. */
.vmkt .abt-stage { position:relative; overflow:hidden; padding:78px 0 66px; color:var(--t2);
  background:linear-gradient(150deg,#ffffff 0%,#f7fafc 60%,#f3f8f6 100%); border-bottom:1px solid var(--line); }
.vmkt .abt-stage .wrap { position:relative; }
.vmkt .abt-stage::before { content:""; position:absolute; inset:-40% -20% auto; height:80%; pointer-events:none;
  background:radial-gradient(600px 320px at 78% 10%, rgba(16,185,129,.08), transparent 70%),
             radial-gradient(520px 300px at 12% 0%, rgba(87,155,252,.06), transparent 70%); }

.vmkt .abt-stage h2 { color:var(--ink); }
.vmkt .abt-lede { margin-top:16px; font-size:21px; line-height:1.5; color:var(--t1); max-width:56ch; font-weight:550; }
.vmkt .abt-lede em { font-style:normal; color:var(--accent-2); }
.vmkt .abt-diagram { display:flex; align-items:stretch; gap:26px; margin:46px 0 40px; }
.vmkt .abt-side { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:14px; }
.vmkt .abt-side-label { font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); }
.vmkt .abt-chaos { position:relative; flex:1; min-height:238px; border:1.5px dashed #d7dde4; border-radius:16px; background:rgba(255,255,255,.5); }
.vmkt .abt-wires { position:absolute; inset:0; width:100%; height:100%; }
.vmkt .abt-wires path { fill:none; stroke:rgba(226,68,92,.42); stroke-width:1.6; stroke-dasharray:5 7; }
.vmkt .abt-tool { position:absolute; display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:10px;
  background:#fff; border:1px solid var(--line); color:var(--t1); font-size:12.5px; font-weight:650;
  transform:rotate(var(--r,0deg)); box-shadow:0 8px 20px rgba(15,30,40,.10); white-space:nowrap; }
.vmkt .abt-tool i { width:8px; height:8px; border-radius:50%; flex:none; }
.vmkt .abt-slip { position:absolute; bottom:-13px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:12px; font-weight:650;
  color:#d63d55; background:#fdeaee; border:1px solid rgba(226,68,92,.35); border-radius:99px; padding:5px 13px; }
.vmkt .abt-arrow { align-self:center; color:var(--accent); flex:none; }
.vmkt .abt-calm { flex:1; background:#fff; border-radius:16px; padding:20px 22px; border:1px solid var(--line); box-shadow:0 18px 44px rgba(15,30,40,.12); }
.vmkt .abt-calm-head { display:flex; align-items:center; gap:11px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.vmkt .abt-calm-mk { width:38px; height:38px; border-radius:10px; background:var(--grad); padding:6px; flex:none; }
.vmkt .abt-calm-mk img { width:100%; height:100%; object-fit:contain; display:block; }
.vmkt .abt-calm-head b { display:block; font-size:14.5px; color:var(--ink); }
.vmkt .abt-calm-head span { font-size:12px; color:var(--t3); }
.vmkt .abt-calm-head em { margin-left:auto; font-style:normal; font-size:11px; font-weight:700; color:#0a7d55; background:#e7f6ef; border-radius:99px; padding:4px 10px; white-space:nowrap; }
.vmkt .abt-calm ul { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.vmkt .abt-calm li { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:550; color:var(--t1); }
.vmkt .abt-calm li svg { color:var(--accent); flex:none; }
.vmkt .abt-cols { columns:2; column-gap:44px; max-width:1000px; }
.vmkt .abt-cols p { margin:0 0 16px; font-size:15px; line-height:1.65; color:var(--t2); break-inside:avoid; }
.vmkt .abt-cols a { color:var(--accent-2); }
.vmkt .abt-kickers { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.vmkt .abt-kickers a { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:650; color:var(--t1);
  background:var(--bg2); border:1px solid var(--line); border-radius:99px; padding:9px 16px;
  text-decoration:none; transition:background .15s, border-color .15s; }
.vmkt .abt-kickers a:hover { background:var(--accent-bg); border-color:color-mix(in srgb, var(--accent) 34%, var(--line)); }
@media (max-width:920px) {
  .vmkt .abt-stage { padding:48px 0 40px; }
  .vmkt .abt-diagram { flex-direction:column; }
  .vmkt .abt-arrow { transform:rotate(90deg); align-self:center; }
  .vmkt .abt-chaos { min-height:220px; }
  .vmkt .abt-cols { columns:1; }
}
}

/* ---- comparison table (why page) ---- */
.vmkt .cmp-wrap { overflow-x:auto; max-width:1020px; margin:0 auto; -webkit-overflow-scrolling:touch; }
.vmkt .cmp { width:100%; min-width:760px; border-collapse:separate; border-spacing:0; font-size:14px; }
.vmkt .cmp th, .vmkt .cmp td { padding:14px 18px; text-align:center; border-bottom:1px solid var(--line); }
.vmkt .cmp th { font-size:13px; font-weight:750; color:var(--t2); }
.vmkt .cmp th:first-child, .vmkt .cmp td:first-child { text-align:left; font-weight:650; color:var(--t1); }
.vmkt .cmp td { color:var(--t3); }
.vmkt .cmp .cmp-us { background:var(--accent-bg); }
.vmkt .cmp th.cmp-us { color:var(--accent-2); }
.vmkt .cmp th.cmp-us .cmp-mark { display:inline-flex; align-items:center; gap:8px; }
.vmkt .cmp th.cmp-us .cmp-mark img { width:22px; height:22px; border-radius:6px; background:var(--grad); padding:3px; }
.vmkt .cmp td.cmp-us { color:var(--t1); font-weight:650; }
.vmkt .cmp td.cmp-us svg { color:var(--accent); vertical-align:-3px; margin-right:6px; }
.vmkt .cmp thead th { border-bottom:2px solid var(--line); }
.vmkt .cmp tbody tr:last-child th, .vmkt .cmp tbody tr:last-child td { border-bottom:0; }
.vmkt .cmp thead th.cmp-us { border-top-left-radius:12px; border-top-right-radius:12px; border-bottom-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
.vmkt .cmp tbody tr:last-child td.cmp-us { border-bottom-left-radius:12px; border-bottom-right-radius:12px; }
.vmkt .cmp-note { max-width:860px; margin:22px auto 0; text-align:center; font-size:12.5px; color:var(--t3); line-height:1.55; }

/* ---- guide articles ---- */
.vmkt .gd-art { max-width:760px; margin:0 auto; }
.vmkt .gd-art h2 { margin-top:8px; }
.vmkt .gd-art h3 { font-size:19px; margin:38px 0 10px; display:flex; align-items:baseline; gap:12px; }
.vmkt .gd-art h3 .gd-n { flex:none; width:28px; height:28px; border-radius:50%; background:var(--accent-bg); color:var(--accent-2);
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:750; transform:translateY(4px); }
.vmkt .gd-art p { font-size:15.5px; line-height:1.7; color:var(--t2); margin:0 0 14px; }
.vmkt .gd-art ul { margin:0 0 16px; padding-left:0; list-style:none; display:grid; gap:9px; }
.vmkt .gd-art li { display:flex; gap:10px; font-size:14.5px; line-height:1.55; color:var(--t1); }
.vmkt .gd-art li svg { flex:none; color:var(--accent); margin-top:3px; }
.vmkt .gd-art figure.browser { margin:26px 0 30px; }
.vmkt .gd-tip { border-left:3px solid var(--accent); background:var(--accent-bg); border-radius:0 12px 12px 0;
  padding:14px 18px; margin:22px 0; font-size:14px; line-height:1.6; color:var(--t1); }
.vmkt .gd-tip b { color:var(--accent-2); }
.vmkt .gd-meta { display:flex; gap:14px; justify-content:center; margin-top:14px; font-size:13px; color:#b9c6d0; }

/* ===========================================================================
   Download page — desktop app (uses the shared hero / card system)
   =========================================================================== */
.vmkt .dl-primary { display:inline-flex; align-items:center; gap:9px; }
.vmkt .dl-grid { max-width:920px; margin:0 auto; }
.vmkt .dl-card { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:30px; }
.vmkt .dl-os-ic { width:56px; height:56px; border-radius:16px; margin-bottom:16px; }
.vmkt .dl-card.is-detected { border-color:rgba(16,185,129,.4); box-shadow:0 0 0 3px var(--accent-bg), 0 1px 2px rgba(20,40,54,.045); }
.vmkt .dl-card.is-detected .dl-os-ic { background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%); border-color:rgba(16,185,129,.22); color:var(--accent); }
.vmkt .dl-card h3 { font-size:18px; margin:0 0 5px; }
.vmkt .dl-card p { font-size:13px; color:var(--t3); margin:0 0 20px; }
.vmkt .dl-badge { display:none; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  color:var(--accent-2); background:var(--accent-bg); border:1px solid rgba(16,185,129,.24);
  padding:4px 12px; border-radius:var(--r-full); }
.vmkt .dl-card.is-detected .dl-badge { display:block; }
.vmkt .dl-btn { width:100%; justify-content:center; }
.vmkt .dl-btn[aria-disabled="true"] { background:var(--tint); color:var(--soft); cursor:default; box-shadow:none; pointer-events:none; }
.vmkt .dl-card.is-detected .dl-btn[aria-disabled="true"] { background:var(--accent-bg); color:var(--accent-2); }
.vmkt .dl-fmt { font-size:12px; color:var(--soft); margin-top:12px; }
.vmkt .dl-soon-note { text-align:center; font-size:14px; color:var(--t2); max-width:58ch; margin:28px auto 0; line-height:1.6; }
.vmkt .dl-soon-note a { color:var(--accent); font-weight:600; }

/* ── Two-tier pricing (Free is a post-trial fallback, not pitched) ───────── */
.vmkt .price-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; margin-inline:auto; }
.vmkt .pricing-stage .price-grid--two::before { left:6%; right:54%; }
/* The two cards stack on narrow screens, as three do. Repeated here because
   the rule above comes after the responsive block and would otherwise keep
   two squeezed columns on a phone, where the plan limits run into each other.
   The halo then sits behind the featured card, which is first. */
@media (max-width:980px) {
  .vmkt .price-grid--two { grid-template-columns:1fr; max-width:460px; }
  .vmkt .pricing-stage .price-grid--two::before { left:8%; right:8%; bottom:52%; }
}
.vmkt .price .trial-note { color:#0f9d76; font-weight:650; font-size:12.5px; margin:2px 0 0; }
.vmkt .pricing-stage .trial-note { color:#34d399; }

/* ---------- support page: hero ask box (submits into the help widget) ---------- */
.vmkt .ask-hero { position:relative; max-width:560px; margin:30px auto 0; }
.vmkt .ask-hero input { width:100%; padding:17px 60px 17px 50px; border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); color:#fff;
  font:inherit; font-size:15px; outline:none; backdrop-filter:blur(6px);
  transition:border-color .15s, background .15s, box-shadow .15s; }
.vmkt .ask-hero input::placeholder { color:rgba(255,255,255,.55); }
.vmkt .ask-hero input:focus { border-color:rgba(63,224,164,.65); background:rgba(255,255,255,.12);
  box-shadow:0 0 0 4px rgba(63,224,164,.14); }
.vmkt .ask-hero .ask-ic { position:absolute; left:19px; top:50%; transform:translateY(-50%); z-index:1;
  color:#3fe0a4; display:inline-flex; pointer-events:none; }
.vmkt .ask-hero button { position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:var(--r-full); border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; color:#0b1e26;
  background:linear-gradient(135deg,#3fe0a4,#10b981); box-shadow:0 6px 16px -6px rgba(16,185,129,.6);
  transition:filter .15s, transform .15s; }
.vmkt .ask-hero button:hover { filter:brightness(1.07); transform:translateY(-50%) scale(1.05); }

/* ---------- funnel page: lean header + shared note style ---------- */
/* /get-started drops the mega-menu so the only things to click are the two
   actions the page exists to drive. */
.vmkt .nav--lean .nav-links { display:flex; align-items:center; gap:18px; margin-left:auto; }
.vmkt .nav--lean .nav-links a:not(.btn) { font-size:14.5px; font-weight:560; color:var(--t2); }
.vmkt .nav--lean .nav-links a:not(.btn):hover { color:var(--t1); }
.vmkt .lead-note { margin:0; font-size:12.5px; color:var(--t3); line-height:1.5; }
.vmkt .lead-note a { color:var(--accent); font-weight:600; }