/* ============================================================================
   VolTrack marketing design system (homepage, pricing, blog)
   White base, company indigo accent, slate text. Brand font: Space Grotesk.
   Palette matches the product app tokens (public/css/ui.css).

   Motion: transform / opacity / SVG-stroke only. Everything is gated behind
   `html.js` (set by an inline script before paint) so no-JS visitors and
   crawlers see the complete page, and every animation is neutralized inside
   the prefers-reduced-motion block at the bottom.
   ========================================================================== */

:root {
  --vt-bg:        #FFFFFF;   /* white page base */
  --vt-bg-alt:    #F6F7FB;   /* neutral near-white for alternating sections */
  --vt-surface:   #FFFFFF;
  --vt-primary:   #4F46E5;   /* company indigo (ui.css) */
  --vt-primary-d: #4338CA;
  --vt-ink:       #0F172A;   /* slate-900 headings */
  --vt-body:      #51607A;   /* body text */
  --vt-muted:     #8A97AD;   /* secondary text */
  --vt-line:      #E6E9F0;
  --vt-line-2:    #CBD2E0;
  --vt-green:     #10B981;
  --vt-amber:     #D97706;
  --vt-soft:      #EEF2FF;   /* indigo-tinted accent surface (icon chips, pills) */
  --vt-radius:    16px;
  --vt-shadow:    0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
  --vt-shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --vt-max:       1120px;
  /* motion tokens */
  --vt-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --vt-ease-move: cubic-bezier(0.2, 0.7, 0.3, 1);
  --vt-dur-micro:  150ms;
  --vt-dur-enter:  600ms;
  --vt-dur-reveal: 700ms;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--vt-bg);
  color: var(--vt-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

h1, h2, h3, h4 { color: var(--vt-ink); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.vt-container { max-width: var(--vt-max); margin: 0 auto; padding: 0 24px; }

/* ── Focus (accessibility): visible ring on every interactive element ────── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,70,229,.38);
}
/* on dark surfaces the indigo ring vanishes; use the light indigo instead */
.vt-announce a:focus-visible, .vt-nav--dark a:focus-visible, .vt-nav--dark button:focus-visible,
.vt-hero a:focus-visible, .vt-proofband a:focus-visible, .vt-future a:focus-visible,
.vt-footer a:focus-visible {
  box-shadow: 0 0 0 3px rgba(165,180,252,.5);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.vt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1;
  border: 1.5px solid transparent; border-radius: 12px; padding: 12px 20px;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--vt-dur-micro) var(--vt-ease-move),
              background var(--vt-dur-micro) var(--vt-ease-move),
              border-color var(--vt-dur-micro) var(--vt-ease-move),
              color var(--vt-dur-micro) var(--vt-ease-move),
              box-shadow var(--vt-dur-micro) var(--vt-ease-move);
}
.vt-btn:active { transform: translateY(1px); }
.vt-btn-primary { background: var(--vt-primary); color: #fff; }
.vt-btn-primary:hover { background: var(--vt-primary-d); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79,70,229,.35); }
.vt-btn-ghost { background: transparent; color: var(--vt-ink); border-color: var(--vt-line-2); }
.vt-btn-ghost:hover { background: var(--vt-bg-alt); border-color: var(--vt-primary); color: var(--vt-primary); }
.vt-btn-sm { padding: 9px 16px; font-size: 14px; border-radius: 10px; }
.vt-btn-lg { padding: 15px 26px; font-size: 16px; border-radius: 14px; }

/* trailing → glyph nudge (wrap the arrow in .vt-arr) */
.vt-arr { display: inline-block; transition: transform var(--vt-dur-micro) var(--vt-ease-move); }
a:hover > .vt-arr, .vt-btn:hover .vt-arr, a:hover .vt-arr { transform: translateX(3px); }

/* ── Announcement bar ────────────────────────────────────────────────────── */
.vt-announce {
  background: var(--vt-ink); color: #E2E8F0; font-size: 13.5px; text-align: center;
  padding: 9px 18px;
}
.vt-announce a { color: #fff; font-weight: 600; }
.vt-announce a:hover { text-decoration: underline; }
.vt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--vt-primary); margin-right: 8px; vertical-align: middle; }
.vt-announce .vt-dot { background: #A5B4FC; animation: vtDotPulse 2.4s ease-in-out infinite; }
@keyframes vtDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.vt-nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.85); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--vt-line); }
.vt-nav-inner { max-width: var(--vt-max); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 22px; }
.vt-logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 19px; color: var(--vt-ink); letter-spacing: -.02em; }
.vt-logo img { width: 26px; height: 26px; border-radius: 7px; }
.vt-nav-links { display: flex; align-items: center; gap: 22px; margin-left: 8px; }
.vt-nav-link { color: var(--vt-body); font-size: 14.5px; font-weight: 500; position: relative; }
.vt-nav-link:hover { color: var(--vt-primary); }
/* underline grows from the left on hover */
.vt-nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--vt-primary); transform: scaleX(0); transform-origin: left;
  transition: transform var(--vt-dur-micro) var(--vt-ease-move);
}
.vt-nav-link:hover::after, .vt-nav-link:focus-visible::after { transform: scaleX(1); }
.vt-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.vt-nav-toggle { display: none; background: none; border: none; font-size: 24px; color: var(--vt-ink); cursor: pointer; line-height: 1; }
.vt-mobile-menu { display: none; flex-direction: column; gap: 4px; padding: 10px 24px 18px; background: var(--vt-bg); border-bottom: 1px solid var(--vt-line); }
.vt-mobile-menu.open { display: flex; }
.vt-mobile-menu a:not(.vt-btn) { padding: 9px 2px; color: var(--vt-ink); font-weight: 500; border-bottom: 1px solid var(--vt-line); }
.vt-mobile-menu .vt-btn { margin-top: 10px; }

/* Dark nav variant (homepage opts in via the partial's `dark` flag) so the
   announce bar + nav + hero read as one continuous dark header. */
.vt-nav--dark { background: #0F172A; border-bottom-color: rgba(255,255,255,.08); }
.vt-nav--dark .vt-logo { color: #fff; }
.vt-nav--dark .vt-nav-link { color: #CBD5E1; }
.vt-nav--dark .vt-nav-link:hover { color: #fff; }
.vt-nav--dark .vt-nav-link::after { background: #A5B4FC; }
.vt-nav--dark .vt-nav-toggle { color: #fff; }
.vt-nav--dark .vt-mobile-menu { background: #0F172A; border-bottom-color: rgba(255,255,255,.08); }
.vt-nav--dark .vt-mobile-menu a:not(.vt-btn) { color: #E2E8F0; border-bottom-color: rgba(255,255,255,.08); }
/* scrolled state (landing.js toggles .scrolled at scrollY > 8) */
.vt-nav--dark.scrolled {
  background: rgba(15,23,42,.9);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(255,255,255,.12);
}

/* ── Hero (dark header — homepage only; merges with the dark announce + nav) ── */
.vt-hero {
  padding: 72px 0 96px;
  background: var(--vt-ink);
  position: relative;
  overflow: hidden;
}
/* drifting indigo glow (kept faint; never a lavender base) */
.vt-hero::before {
  content: ''; position: absolute; pointer-events: none;
  left: 50%; top: -30%; width: 130%; height: 95%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 55% 60% at 50% 30%, rgba(99,102,241,.22) 0%, transparent 70%);
  animation: vtGlowDrift 26s ease-in-out infinite alternate;
}
@keyframes vtGlowDrift {
  from { transform: translateX(-56%) scale(1); }
  to   { transform: translateX(-44%) scale(1.05); }
}
.vt-hero-inner { max-width: 880px; margin: 0 auto; padding: 0 24px; text-align: center; position: relative; }
.vt-hero h1 { font-size: clamp(34px, 6vw, 56px); color: #fff; }
.vt-accent { color: #A5B4FC; }
.vt-hero-sub { max-width: 620px; margin: 20px auto 0; font-size: clamp(16px, 2.4vw, 19px); color: #CBD5E1; }
.vt-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.vt-hero-note { margin-top: 16px; font-size: 13.5px; color: #94A3B8; }
.vt-hero-note strong { color: #fff; }
/* "See how it works" ghost button is light-on-dark in the hero only (the
   final-CTA ghost button stays light because it is outside .vt-hero). */
.vt-hero .vt-btn-ghost { background: transparent; color: #E2E8F0; border-color: rgba(255,255,255,.25); }
.vt-hero .vt-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; }

/* hero entrance (gated on html.js so no-JS shows the final state) */
@keyframes vtRise   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes vtFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vtRingIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
html.js .vt-hero h1          { animation: vtRise 700ms var(--vt-ease-out) 0ms both; }
html.js .vt-hero-sub         { animation: vtRise var(--vt-dur-enter) var(--vt-ease-out) 120ms both; }
html.js .vt-hero-actions     { animation: vtRise var(--vt-dur-enter) var(--vt-ease-out) 240ms both; }
html.js .vt-hero-note        { animation: vtFadeIn 500ms ease 360ms both; }
html.js .vt-hero-ring        { animation: vtRingIn 800ms var(--vt-ease-out) 420ms both; }

/* ── Lifecycle ring (partials/lifecycle-ring.ejs) ────────────────────────── */
.vt-hero-ring { max-width: 660px; margin: 56px auto 0; }
.vt-ring { display: block; width: 100%; height: auto; }
.vt-ring--racetrack-v { display: none; max-width: 230px; margin: 0 auto; }
.vt-ring-path  { stroke: rgba(79,70,229,.28); stroke-width: 2; fill: none; }
.vt-ring-node  { fill: var(--vt-surface); stroke: var(--vt-primary); stroke-width: 2.5; }
.vt-ring-label { fill: var(--vt-ink); font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.vt-ring-pulse { display: none; fill: var(--vt-primary); }
/* on the dark hero */
.vt-hero .vt-ring-path  { stroke: rgba(165,180,252,.35); }
.vt-hero .vt-ring-node  { fill: var(--vt-ink); stroke: #A5B4FC; }
.vt-hero .vt-ring-label { fill: #CBD5E1; }
.vt-hero .vt-ring-pulse { fill: #A5B4FC; }
/* The pulse dot travels the closed path via CSS Motion Path. Unsupported
   browsers simply never show the dot — the ring still reads as complete. */
@supports (offset-path: path('M0 0')) {
  .vt-ring-pulse { display: block; offset-distance: 0%; offset-rotate: 0deg; }
  .vt-hero .vt-ring-pulse { animation: vtRingTravel 12s linear infinite; }
  /* literal easing (see the .vt-reveal-draw note: var() in the shorthand can
     wedge transitions of SVG-only properties in Chromium) */
  html.js .vt-how-ring .vt-ring-pulse { transition: offset-distance 600ms cubic-bezier(0.2, 0.7, 0.3, 1); }
}
@keyframes vtRingTravel { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* ── Capability strip (borderless one-liner under the hero) ──────────────── */
.vt-trust { padding: 34px 0; }
.vt-caps-strip {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  max-width: var(--vt-max); margin: 0 auto; padding: 0 24px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vt-muted); text-align: center;
}
.vt-caps-strip span { padding: 2px 22px; border-left: 1px solid var(--vt-line-2); white-space: nowrap; }
.vt-caps-strip span:first-child { border-left: 0; }

/* ── Sections ────────────────────────────────────────────────────────────── */
.vt-section { padding: 72px 0; }
.vt-section.alt { background: var(--vt-bg-alt); }
.vt-section-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.vt-section-head--left { text-align: left; margin: 0; }
.vt-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vt-primary); margin-bottom: 12px; }
.vt-section-head h2 { font-size: clamp(26px, 4vw, 38px); }
.vt-section-head p { margin-top: 14px; font-size: 16.5px; color: var(--vt-body); }

/* ── Problem (cardless: left head, right pain list) ──────────────────────── */
.vt-problem { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.vt-pains { display: flex; flex-direction: column; gap: 28px; padding-top: 6px; }
.vt-pain { border-left: 2px solid var(--vt-primary); padding-left: 20px; }
.vt-pain h3 { font-size: 18px; margin-bottom: 6px; }
.vt-pain p { font-size: 15px; color: var(--vt-body); }
/* broken chain: 3 disconnected gray nodes (contrast to the connected ring) */
.vt-broken { display: block; width: 220px; height: auto; margin-top: 32px; }
.vt-broken circle { fill: none; stroke: var(--vt-line-2); stroke-width: 2; }
.vt-broken line { stroke: var(--vt-line-2); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 7; }

/* ── How it works (flagship): full-circle ring + cardless step list ──────── */
.vt-how { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: center; }
.vt-how-ring { max-width: 420px; width: 100%; }
.vt-how-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.vt-how-step { border-top: 1px solid var(--vt-line-2); }
.vt-how-step:last-child { border-bottom: 1px solid var(--vt-line-2); }
.vt-how-step-btn {
  display: flex; gap: 18px; align-items: baseline; width: 100%; text-align: left;
  background: none; border: none; padding: 18px 6px; margin: 0;
  font-family: inherit; cursor: pointer; color: inherit;
}
.vt-how-num {
  flex: none; font-size: 13px; font-weight: 700; color: var(--vt-primary);
  letter-spacing: .06em; transition: transform 300ms var(--vt-ease-move);
}
.vt-how-body h3 { font-size: 17px; margin-bottom: 4px; }
.vt-how-body p { font-size: 14.5px; color: var(--vt-body); }
/* active-step emphasis exists only when JS can drive it */
html.js .vt-how-step { opacity: .55; transition: opacity 300ms var(--vt-ease-move); }
html.js .vt-how-step.is-active { opacity: 1; }
.vt-how-step.is-active .vt-how-num { transform: translateX(4px); }

/* ── Why VolTrack (3 cardless columns) ───────────────────────────────────── */
.vt-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.vt-why-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; color: var(--vt-primary); background: var(--vt-soft); margin-bottom: 16px; }
.vt-why-col h3 { font-size: 19px; margin-bottom: 9px; }
.vt-why-col p { font-size: 15px; color: var(--vt-body); }

/* email → verified vignette (one-shot crossfade on reveal; decorative).
   Default (no JS / reduced motion): the final "verified" state is shown. */
.vt-vignette { position: relative; height: 46px; margin-top: 18px; max-width: 320px; }
.vt-vig {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--vt-line); border-radius: 12px; padding: 0 14px;
  font-size: 13.5px; background: var(--vt-surface); box-shadow: var(--vt-shadow-sm);
  white-space: nowrap; overflow: hidden;
}
.vt-vig i { color: var(--vt-primary); font-size: 16px; flex: none; }
.vt-vig-btn { background: var(--vt-primary); color: #fff; font-weight: 600; font-size: 12.5px; border-radius: 8px; padding: 5px 12px; }
.vt-vig-done { color: var(--vt-ink); font-weight: 500; }
.vt-vig-done i { color: var(--vt-green); }
.vt-vig-email { opacity: 0; }
.vt-vig-done { opacity: 1; }
html.js .vt-vig-email { opacity: 1; transition: opacity 250ms ease 900ms; }
html.js .vt-vig-done { opacity: 0; transition: opacity 250ms ease 900ms; }
html.js .vt-why-col.visible .vt-vig-email { opacity: 0; }
html.js .vt-why-col.visible .vt-vig-done { opacity: 1; }

/* ── Switching / migration (numbered hairline rows + mapping sketch) ─────── */
.vt-switchgrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; max-width: 980px; margin: 0 auto; }
.vt-steps { display: flex; flex-direction: column; }
.vt-step { display: flex; gap: 18px; padding: 20px 6px; border-top: 1px solid var(--vt-line-2); }
.vt-step:last-child { border-bottom: 1px solid var(--vt-line-2); }
.vt-step-n { flex: none; font-size: 13px; font-weight: 700; color: var(--vt-primary); letter-spacing: .06em; padding-top: 4px; }
.vt-step h3 { font-size: 16.5px; margin-bottom: 4px; }
.vt-step p { font-size: 14.5px; color: var(--vt-body); }
.vt-switch-cta { text-align: center; margin-top: 36px; }
.vt-switch-note { color: var(--vt-muted); font-size: 13px; margin-top: 12px; }
/* column mapping: their gray columns → our indigo fields */
.vt-map { display: block; width: 100%; height: auto; }
.vt-map text { font-family: inherit; font-size: 13.5px; }
.vt-map-theirs rect { fill: var(--vt-bg-alt); stroke: var(--vt-line-2); stroke-width: 1.5; }
.vt-map-theirs text { fill: var(--vt-muted); }
.vt-map-ours rect { fill: var(--vt-soft); stroke: var(--vt-primary); stroke-width: 1.5; }
.vt-map-ours text { fill: var(--vt-primary-d); font-weight: 600; }
.vt-map-lines path { fill: none; stroke: var(--vt-primary); stroke-width: 2; opacity: .65; }

/* ── Confidence band (full-bleed thin dark-slate band; echoes the hero) ──── */
.vt-proofband { background: var(--vt-ink); padding: 64px 0; text-align: center; }
.vt-proofband-line { font-size: clamp(26px, 4.4vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.vt-proofband-sub { max-width: 560px; margin: 14px auto 26px; font-size: 16.5px; color: #CBD5E1; }

/* ── Pricing teaser (the one card that earns it: a priced offer) ─────────── */
.vt-price-card { max-width: 540px; margin: 0 auto; background: var(--vt-surface); border: 1.5px solid var(--vt-line-2); border-radius: 20px; padding: 32px; box-shadow: var(--vt-shadow); text-align: center; }
.vt-price-badge { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vt-primary); background: var(--vt-soft); border-radius: 99px; padding: 5px 14px; margin-bottom: 16px; }
.vt-price-main { font-size: 44px; font-weight: 700; color: var(--vt-ink); letter-spacing: -.02em; }
.vt-price-num { font-variant-numeric: tabular-nums; }
.vt-price-per { font-size: 17px; font-weight: 500; color: var(--vt-muted); }
.vt-price-list-price { font-size: 13.5px; color: var(--vt-muted); text-decoration: line-through; margin-top: 2px; }
.vt-price-sub { font-size: 14px; color: var(--vt-body); margin-top: 8px; }
.vt-price-points { list-style: none; padding: 0; margin: 22px 0; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.vt-price-points li { display: flex; gap: 10px; font-size: 14.5px; color: var(--vt-body); }
.vt-price-points li i { color: var(--vt-green); flex: none; margin-top: 3px; }
.vt-price-points li.muted { color: var(--vt-muted); }
.vt-price-cta { width: 100%; }
.vt-price-spots { margin-top: 16px; font-size: 13px; color: var(--vt-muted); }
/* scarcity as a subtle indigo hairline: scaleX(remaining / total) */
.vt-spots-bar { height: 2px; margin: 8px auto 0; max-width: 300px; background: var(--vt-line); border-radius: 2px; overflow: hidden; }
.vt-spots-bar span { display: block; height: 100%; background: var(--vt-primary); transform-origin: left; transform: scaleX(var(--spots, 0)); }
html.js .vt-reveal .vt-spots-bar span { transform: scaleX(0); transition: transform 900ms var(--vt-ease-out) 250ms; }
html.js .vt-reveal.visible .vt-spots-bar span { transform: scaleX(var(--spots, 0)); }
.vt-price-smallprint { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--vt-line); font-size: 12px; color: var(--vt-muted); text-align: center; }

/* ── Forward-looking (dark slate) ────────────────────────────────────────── */
.vt-future { background: var(--vt-ink); }
.vt-future .vt-eyebrow { color: #A5B4FC; }
.vt-future h2 { color: #fff; }
.vt-future .vt-section-head p { color: #CBD5E1; }
.vt-future-tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto; font-size: 13.5px; font-weight: 500; color: #C7D2FE; background: rgba(99,102,241,.18); border: 1px solid rgba(99,102,241,.35); border-radius: 99px; padding: 8px 18px; }
.vt-future .vt-container { text-align: center; }
.vt-future-tag i { color: #A5B4FC; }
/* faint constellation: opportunities connecting toward a central node */
.vt-constellation { max-width: 360px; margin: 8px auto 28px; }
.vt-constellation svg { display: block; width: 100%; height: auto; }
.vt-constellation path { fill: none; stroke: rgba(165,180,252,.3); stroke-width: 1.5; }
.vt-constellation circle { fill: rgba(165,180,252,.45); }
.vt-constellation-core { fill: #A5B4FC; }

/* ── Final CTA ───────────────────────────────────────────────────────────── */
.vt-cta { background: var(--vt-bg-alt); }
.vt-cta-inner { max-width: 640px; margin: 0 auto; padding: 0 24px; text-align: center; }
.vt-cta h2 { font-size: clamp(26px, 4vw, 36px); }
.vt-cta p { margin: 14px 0 26px; font-size: 16.5px; color: var(--vt-body); }
.vt-wl-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.vt-wl-input { flex: 1; min-width: 240px; max-width: 320px; padding: 13px 16px; border: 1.5px solid var(--vt-line-2); border-radius: 12px; font-family: inherit; font-size: 15px; background: #fff; color: var(--vt-ink); }
.vt-wl-input:focus { outline: none; border-color: var(--vt-primary); }
.vt-wl-input.shake { animation: vtShake .4s; border-color: #DC2626; }
.vt-wl-msg { width: 100%; font-size: 14px; margin-top: 8px; }
.vt-wl-msg.error { color: #DC2626; }
.vt-wl-msg.success { color: var(--vt-green); }
@keyframes vtShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ── Footer (dark slate) ─────────────────────────────────────────────────── */
.vt-footer { background: var(--vt-ink); color: #CBD5E1; padding: 52px 0 28px; }
.vt-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.vt-footer-brand .vt-logo { color: #fff; }
.vt-footer-brand p { font-size: 14px; color: #94A3B8; margin-top: 12px; max-width: 280px; }
.vt-footer-social { display: flex; gap: 12px; margin-top: 16px; font-size: 18px; }
.vt-footer-social a { color: #94A3B8; }
.vt-footer-social a:hover { color: #fff; }
.vt-footer-col h4 { color: #fff; font-size: 14px; margin-bottom: 12px; }
.vt-footer-col a { display: block; font-size: 14px; color: #94A3B8; padding: 5px 0; }
.vt-footer-col a:hover { color: #fff; }
.vt-footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: #64748B; }
.vt-footer-bottom a { color: #94A3B8; }
.vt-footer-bottom a:hover { color: #fff; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.vt-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 20px; }
.vt-modal.open { display: flex; }
.vt-modal-overlay { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.vt-modal-card { position: relative; background: #fff; border-radius: 20px; padding: 30px; max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(15,23,42,.3); }
.vt-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 26px; line-height: 1; color: var(--vt-muted); cursor: pointer; }
.vt-modal-card h3 { font-size: 22px; }
.vt-modal-card .sub { font-size: 14.5px; color: var(--vt-muted); margin: 8px 0 20px; }
.vt-field { margin-bottom: 14px; }
.vt-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vt-field label { display: block; font-size: 13px; font-weight: 600; color: var(--vt-ink); margin-bottom: 6px; }
.vt-field label .opt { font-weight: 400; color: var(--vt-muted); }
.vt-input, .vt-select, .vt-textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--vt-line-2); border-radius: 11px; font-family: inherit; font-size: 14.5px; color: var(--vt-ink); background: #fff; }
.vt-input:focus, .vt-select:focus, .vt-textarea:focus { outline: none; border-color: var(--vt-primary); }
.vt-textarea { min-height: 80px; resize: vertical; }
.vt-form-msg { font-size: 13.5px; margin-bottom: 10px; }
.vt-form-msg.error { color: #DC2626; }

/* ── Scroll reveal ───────────────────────────────────────────────────────── */
/* Progressive enhancement: content is VISIBLE by default. Only when JS is
   confirmed running (html.js, set by an inline script before paint) do we hide
   reveal elements and animate them in on scroll. So a JS-off / JS-failed visitor
   (and search crawlers) see the full page — never a blank section. */
.vt-reveal { opacity: 1; transform: none; }
html.js .vt-reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--vt-dur-reveal) var(--vt-ease-out), transform var(--vt-dur-reveal) var(--vt-ease-out);
}
html.js .vt-reveal-left { transform: translateX(-24px); }
html.js .vt-reveal.visible { opacity: 1; transform: none; }
/* SVG line-draw variant: give drawn paths pathLength="1" in the markup.
   NOTE: literal easing here on purpose — var() inside the transition shorthand
   leaves stroke-dashoffset transitions stuck at their start value in Chromium. */
html.js .vt-reveal-draw path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(0.16, 1, 0.3, 1) .15s; }
html.js .vt-reveal-draw.visible path[pathLength] { stroke-dashoffset: 0; }
/* list stagger: 80ms steps, capped at 240ms */
.vt-d1 { transition-delay: .08s; }
.vt-d2 { transition-delay: .16s; }
.vt-d3 { transition-delay: .24s; }

/* ── Reduced motion: final states, instantly, everywhere ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vt-reveal, html.js .vt-reveal { opacity: 1; transform: none; transition: none; }
  html.js .vt-reveal-draw path[pathLength] { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  html.js .vt-hero h1, html.js .vt-hero-sub, html.js .vt-hero-actions,
  html.js .vt-hero-note, html.js .vt-hero-ring { animation: none; }
  .vt-hero::before { animation: none; }
  .vt-announce .vt-dot { animation: none; }
  .vt-ring-pulse, .vt-hero .vt-ring-pulse { animation: none; transition: none; }
  html.js .vt-how-ring .vt-ring-pulse { transition: none; }
  html.js .vt-how-step { opacity: 1; transition: none; }
  .vt-how-num { transition: none; }
  .vt-how-step.is-active .vt-how-num { transform: none; }
  .vt-vig-email { opacity: 0 !important; transition: none; }
  .vt-vig-done { opacity: 1 !important; transition: none; }
  html.js .vt-reveal .vt-spots-bar span { transform: scaleX(var(--spots, 0)); transition: none; }
  .vt-btn, .vt-arr, .vt-nav-link::after, .vt-how-num { transition: none; }
  .vt-btn-primary:hover { transform: none; }
  .vt-wl-input.shake { animation: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .vt-how { grid-template-columns: 1fr; gap: 40px; }
  .vt-how-ring { margin: 0 auto; max-width: 340px; }
  .vt-problem { grid-template-columns: 1fr; gap: 36px; }
  .vt-switchgrid { grid-template-columns: 1fr; gap: 40px; }
  .vt-mapwrap { max-width: 460px; margin: 0 auto; }
  .vt-why { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 860px) {
  .vt-nav-links { display: none; }
  .vt-nav-toggle { display: inline-flex; }
  /* Collapse the inline Log In / Start Free into the hamburger menu on mobile
     (they'd otherwise push the actions row past the viewport → h-scroll). */
  .vt-nav-actions .vt-nav-link,
  .vt-nav-actions .vt-btn { display: none; }
  .vt-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 700px) {
  .vt-caps-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  .vt-caps-strip span { border-left: 0; padding: 0; white-space: normal; }
}
@media (max-width: 560px) {
  .vt-hero { padding: 52px 0 72px; }
  .vt-section { padding: 56px 0; }
  .vt-proofband { padding: 52px 0; }
  .vt-field-row { grid-template-columns: 1fr; }
  .vt-footer-grid { grid-template-columns: 1fr; }
  /* the wide racetrack would render tiny; swap to the vertical racetrack */
  .vt-hero-ring { margin-top: 44px; }
  .vt-ring--racetrack { display: none; }
  .vt-ring--racetrack-v { display: block; }
}