/* ================================================================
   VITAL LOGIC — PUBLIC LANDING PAGE STYLES
   Brand: Connected Momentum (VL-PUB-001 / VL-PUB-002)
   Architecture: VL-PUBLIC-001-DES-030 (Option B — externalized landing CSS)
   Structure:
     1. Design tokens
     2. Reset / base
     3. Layout utilities
     4. Buttons, pills, badges
     5. Header / nav
     6. Hero
     7. Connected Workflow strip
     8. Problem section
     9. How it works
     10. Product proof
     11. AI section
     12. Production + Planning
     13. Learning loop
     14. Thumbnail Lab
     15. Creator toolkit
     16. Trial / credits
     17. Pricing
     18. Trust
     19. FAQ
     20. Final CTA
     21. Footer
     22. Back-to-top
     23. Responsive breakpoints
     24. Reduced motion
================================================================ */

/* 1. DESIGN TOKENS ------------------------------------------------ */
:root {
  --warm-canvas: #FAF8F4;
  --surface: #FFFFFF;
  --vital-navy: #0B1220;
  --deep-navy: #111827;
  --vital-indigo: #5B5BF7;
  --action-indigo: #4F46E5;
  --vital-violet: #7C5CFC;
  --momentum-coral: #F26A4F;
  --text-secondary-light: #667085;
  --text-secondary-dark: #B7C0D1;

  --border-light: rgba(11, 18, 32, 0.09);
  --border-on-navy: rgba(255, 255, 255, 0.12);
  --shadow-card: 0 1px 2px rgba(11,18,32,0.04), 0 12px 32px -12px rgba(11,18,32,0.16);
  --shadow-card-lg: 0 4px 10px rgba(11,18,32,0.06), 0 28px 60px -20px rgba(11,18,32,0.28);

  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --container-w: 1200px;
  --gap-section: 128px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. RESET / BASE -------------------------------------------------- */
.vl-landing, .vl-landing * , .vl-landing *::before, .vl-landing *::after { box-sizing: border-box; }
.vl-landing { font-family: var(--font-body); color: var(--vital-navy); background: var(--warm-canvas); line-height: 1.55; -webkit-font-smoothing: antialiased; }
.vl-landing img { max-width: 100%; display: block; }
.vl-landing a { color: inherit; text-decoration: none; }
.vl-landing ul { list-style: none; margin: 0; padding: 0; }
.vl-landing button { font-family: inherit; cursor: pointer; }
.vl-landing h1, .vl-landing h2, .vl-landing h3, .vl-landing h4 { margin: 0; font-weight: 400; }
.vl-landing p { margin: 0; }
.vl-landing section { position: relative; }

.vl-container { max-width: var(--container-w); margin: 0 auto; padding: 0 32px; }
.vl-section-pad { padding: 96px 0; }
.vl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--action-indigo); margin-bottom: 18px;
}
.vl-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--momentum-coral); flex-shrink: 0; }
.vl-h-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.08; }
.vl-h1 { font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
.vl-h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.vl-h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); }
.vl-lede { font-size: 1.15rem; color: var(--text-secondary-light); max-width: 620px; }
.vl-center { text-align: center; margin-left: auto; margin-right: auto; }
.vl-on-navy { color: #fff; }
.vl-on-navy .vl-lede { color: var(--text-secondary-dark); }
.vl-on-navy .vl-eyebrow { color: #C9C6FF; }

/* 3. LAYOUT UTILITIES ----------------------------------------------- */
.vl-grid { display: grid; gap: 28px; }
.vl-grid-2 { grid-template-columns: 1fr 1fr; }
.vl-grid-3 { grid-template-columns: repeat(3, 1fr); }
/* C4-C1: restored generic 4-column utility meaning (was wrongly hijacked to
   mean 2 columns in R1-C4). The C4-D 2x2 desktop intent for the Toolkit is
   now scoped to .vl-toolkit-grid specifically — see that rule below. */
.vl-grid-4 { grid-template-columns: repeat(4, 1fr); }
.vl-flex { display: flex; align-items: center; }
.vl-flex-col { display: flex; flex-direction: column; }
.vl-gap-12 { gap: 12px; } .vl-gap-16 { gap: 16px; } .vl-gap-24 { gap: 24px; }

/* 4. BUTTONS / PILLS / BADGES ---------------------------------------- */
.vl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius-pill); font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s ease;
  white-space: nowrap;
}
.vl-btn:hover { transform: translateY(-1px); }
.vl-btn-primary { background: var(--action-indigo); color: #fff; box-shadow: 0 6px 15px -6px rgba(79,70,229,0.45); }
.vl-btn-primary:hover { background: #4338CA; }
/* C4-C2: .vl-landing a{color:inherit} (0,1,1) was overriding .vl-btn-primary's
   color:#fff (0,1,0), producing dark-on-indigo text. Raise specificity to (0,2,1)
   so button text stays white regardless of source order. No other rule changed. */
.vl-landing a.vl-btn-primary { color: #fff; }
.vl-btn-secondary { background: transparent; color: var(--vital-navy); border-color: var(--border-light); }
.vl-btn-secondary:hover { background: rgba(11,18,32,0.04); }
.vl-btn-on-navy { background: rgba(255,255,255,0.08); color: #fff; border-color: var(--border-on-navy); }
.vl-btn-on-navy:hover { background: rgba(255,255,255,0.14); }
.vl-btn-lg { padding: 14px 30px; font-size: 15.5px; }

.vl-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; background: rgba(91,91,247,0.08); color: var(--action-indigo); }
ul.vl-trial-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.vl-trial-proof li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--vital-navy); }
.vl-trial-proof li svg { color: var(--action-indigo); flex-shrink: 0; }

/* 5. HEADER / NAV ----------------------------------------------------- */
.vl-nav {
  position: sticky; top: 0; z-index: 100; background: rgba(250,248,244,0.7);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .25s ease, background-color .25s ease;
}
.vl-nav.scrolled { border-bottom-color: var(--border-light); background: rgba(250,248,244,0.92); }
.vl-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; max-width: var(--container-w); margin: 0 auto; }
/* C4-A: brand lockup enlarged for header prominence (was font-size:22px / img:37px). */
.vl-brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 32px; color: var(--vital-navy); font-weight: 400; }
.vl-brand img { height: 44px; width: auto; }
.vl-nav-links { display: flex; align-items: center; gap: 34px; font-size: 14.5px; font-weight: 500; color: #3a3f4b; }
.vl-nav-links a:hover, .vl-nav-links a.is-active { color: var(--vital-navy); }
.vl-nav-actions { display: flex; align-items: center; gap: 14px; }
.vl-nav-login { font-size: 14.5px; font-weight: 600; color: var(--vital-navy); padding: 10px 6px; }
/* C4-C1: header CTA visual dominance reduced (padding/shadow/size only — same
   element, route, and .vl-btn-primary base; hero/final CTAs are untouched). */
.vl-nav-actions .vl-btn-primary { padding: 10px 20px; font-size: 14px; box-shadow: 0 3px 10px -5px rgba(79,70,229,0.35); }
.vl-nav-toggle { display: none; background: none; border: none; padding: 8px; }
.vl-nav-mobile { display: none; }

/* 6. HERO --------------------------------------------------------- */
.vl-hero { padding: 76px 0 0; overflow: hidden; }
.vl-hero-grid { display: grid; grid-template-columns: 44fr 56fr; gap: 56px; align-items: start; }
.vl-hero-copy { padding-top: 10px; }
.vl-hero-copy .vl-h1 { margin-bottom: 22px; }
.vl-hero-workflow-line { font-size: 15px; font-weight: 600; color: var(--action-indigo); margin-bottom: 14px; }
.vl-hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Restrained Momentum Coral gesture under "Keep it moving." */
.vl-hero-line-2 { position: relative; display: inline-block; }
.vl-hero-line-2::after {
  /* C4-C2: replaced with a re-fit vector derived directly from the operator-
     approved reference mockup's actual coral-stroke pixels (isolated by color,
     column-scanned into a top/bottom envelope, isotonic-regression-smoothed to
     guarantee a single unimodal arc with no secondary peak, then re-vectorized).
     The prior C4-C1 path developed a false secondary hump near the right end
     that does not exist in the reference -- this path is measured from the
     reference itself, not hand-redrawn, so that defect cannot recur. Span/
     position (left/width/bottom) are C4-C1's already-correct values, unchanged. */
  content: ""; position: absolute; left: 8%; width: 84%; bottom: -0.05em;
  aspect-ratio: 409 / 14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 409 14'%3E%3Cpath fill='%23F26A4F' d='M0.00,13.58 Q11.00,11.50 17.00,10.81 Q23.00,10.12 29.00,9.52 Q35.00,8.91 40.50,8.44 Q46.00,7.96 52.00,7.55 Q58.00,7.14 64.00,7.06 Q70.00,6.98 75.50,6.97 Q81.00,6.96 87.00,6.65 Q93.00,6.34 99.00,5.34 Q105.00,4.33 110.50,3.97 Q116.00,3.60 122.00,3.29 Q128.00,2.98 134.00,2.66 Q140.00,2.34 145.50,2.16 Q151.00,1.97 157.00,1.69 Q163.00,1.40 169.00,1.20 Q175.00,1.00 180.50,0.86 Q186.00,0.72 192.00,0.40 Q198.00,0.08 204.00,0.04 Q210.00,0.00 216.00,0.00 Q222.00,0.00 227.50,0.00 Q233.00,0.00 239.00,0.00 Q245.00,0.00 251.00,0.00 Q257.00,0.00 262.50,0.00 Q268.00,0.00 274.00,0.00 Q280.00,0.00 286.00,0.01 Q292.00,0.02 297.50,0.21 Q303.00,0.40 309.00,0.69 Q315.00,0.97 321.00,1.19 Q327.00,1.40 332.50,1.73 Q338.00,2.05 344.00,2.43 Q350.00,2.81 356.00,3.22 Q362.00,3.64 367.50,4.10 Q373.00,4.57 379.00,5.18 Q385.00,5.79 391.00,6.53 Q397.00,7.28 403.00,9.30 L409.00,11.31 M409.00,11.31 Q397.00,12.08 391.00,11.67 Q385.00,11.26 379.00,10.90 Q373.00,10.54 367.50,10.22 Q362.00,9.90 356.00,9.53 Q350.00,9.17 344.00,8.88 Q338.00,8.60 332.50,8.33 Q327.00,8.06 321.00,8.00 Q315.00,7.94 309.00,7.64 Q303.00,7.34 297.50,7.18 Q292.00,7.01 286.00,7.01 Q280.00,7.00 274.00,7.00 Q268.00,7.00 262.50,7.00 Q257.00,7.00 251.00,7.00 Q245.00,7.00 239.00,7.00 Q233.00,7.00 227.50,7.00 Q222.00,7.00 216.00,7.00 Q210.00,7.01 204.00,7.17 Q198.00,7.34 192.00,7.64 Q186.00,7.94 180.50,7.97 Q175.00,8.00 169.00,8.00 Q163.00,8.01 157.00,8.17 Q151.00,8.34 145.50,8.63 Q140.00,8.92 134.00,8.96 Q128.00,9.00 122.00,9.09 Q116.00,9.18 110.50,9.50 Q105.00,9.82 99.00,9.92 Q93.00,10.02 87.00,10.24 Q81.00,10.47 75.50,10.77 Q70.00,11.07 64.00,11.42 Q58.00,11.77 52.00,11.96 Q46.00,12.14 40.50,12.46 Q35.00,12.79 29.00,13.09 Q23.00,13.40 17.00,13.68 Q11.00,13.96 5.50,13.77 L0.00,13.58 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 100% 100%; opacity: 0.94; pointer-events: none;
}

/* Bounded visual stage: the dominant Dashboard frame + two corner-placed
   supporting shots, instead of letting the tall source image set hero height. */
.vl-hero-visual { position: relative; height: 540px; }
.vl-hero-visual::before {
  content: ""; position: absolute; inset: -60px -20px; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 55% at 62% 32%, rgba(124,92,252,0.16), transparent 72%);
}
.vl-shot-frame {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow-card-lg); border: 1px solid var(--border-light);
}
.vl-shot-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl-ai-grid .vl-shot-frame img,
.vl-thumb-strip .vl-shot-frame img { height: auto; object-fit: initial; }

.vl-shot-dominant {
  position: absolute; z-index: 2; top: 0; left: 5%; width: 90%;
  aspect-ratio: 1.45 / 1;
  opacity: 0; transform: translateY(22px);
}
.vl-shot-dominant img { object-position: top center; }

.vl-shot-support { position: absolute; z-index: 3; opacity: 0; }
.vl-shot-support img { object-position: top center; }
.vl-shot-support.support-a { width: 44%; aspect-ratio: 1.48 / 1; top: -4%; right: -4%; transform: translateY(16px); }
.vl-shot-support.support-b { width: 46%; aspect-ratio: 2.1 / 1; top: 60%; left: -4%; transform: translateY(16px); }

.vl-landing.vl-reveal-ready .vl-shot-dominant,
.vl-landing.vl-reveal-ready .vl-shot-support { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.vl-landing.vl-reveal-ready .vl-shot-support.support-a { transition-delay: .12s; }
.vl-landing.vl-reveal-ready .vl-shot-support.support-b { transition-delay: .22s; }

/* 7. CONNECTED WORKFLOW STRIP ------------------------------------- */
.vl-workflow { background: var(--vital-navy); margin-top: 88px; padding: 72px 0; }
.vl-workflow-path { display: flex; align-items: stretch; gap: 0; margin-top: 44px; }
.vl-workflow-stage { flex: 1; position: relative; padding: 22px 18px; text-align: center; }
.vl-workflow-stage::before {
  content: ""; position: absolute; top: 22px; left: -50%; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--border-on-navy) 20%, var(--border-on-navy) 80%, transparent);
}
.vl-workflow-stage:first-child::before { display: none; }
.vl-workflow-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--vital-violet); margin: 0 auto 14px; box-shadow: 0 0 0 6px rgba(124,92,252,0.18); }
.vl-workflow-stage .vl-stage-label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.vl-workflow-stage .vl-stage-sub { font-size: 12.5px; color: var(--text-secondary-dark); margin-top: 4px; }

/* 8. PROBLEM -------------------------------------------------------- */
.vl-problem-grid { margin-top: 48px; }
.vl-problem-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 28px; }
.vl-problem-card .vl-icon-tile { margin-bottom: 16px; }
.vl-problem-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.vl-problem-card p { color: var(--text-secondary-light); font-size: 14.5px; }

/* Shared icon tile */
.vl-icon-tile { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(91,91,247,0.1); color: var(--action-indigo); }

/* 9. HOW IT WORKS --------------------------------------------------- */
.vl-stages-list { margin-top: 56px; display: grid; gap: 20px; }
.vl-stage-row { display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 26px 0; border-top: 1px solid var(--border-light); align-items: start; }
.vl-stage-row:first-child { border-top: none; }
.vl-stage-num { font-family: var(--font-display); font-size: 34px; color: var(--vital-violet); line-height: 1; }
.vl-stage-row h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.vl-stage-row p { color: var(--text-secondary-light); font-size: 15px; max-width: 640px; }

/* 10. PRODUCT PROOF --------------------------------------------------- */
.vl-proof { background: var(--surface); }
.vl-proof-shot { margin-top: 48px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card-lg); border: 1px solid var(--border-light); }
.vl-proof-shot img { height: auto; }

/* 11. AI SECTION ------------------------------------------------------ */
.vl-ai { background: var(--warm-canvas); }
.vl-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vl-ai-shot-stack { display: flex; flex-direction: column; gap: 14px; }
.vl-ai-line { display: inline-block; font-family: var(--font-display); font-size: 1.5rem; color: var(--vital-navy); margin-top: 6px; margin-bottom: 20px; }
.vl-ai-points { margin-top: 22px; display: grid; gap: 14px; }
.vl-ai-points li { display: flex; gap: 12px; font-size: 15px; color: var(--vital-navy); }
.vl-ai-points svg { color: var(--action-indigo); flex-shrink: 0; margin-top: 3px; }

/* 12. PRODUCTION + PLANNING -------------------------------------------- */
.vl-split-shot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
.vl-split-shot-card { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-light); box-shadow: var(--shadow-card); }
.vl-split-shot-card img { height: auto; }
.vl-split-shot-card figcaption { padding: 18px 22px; font-size: 14.5px; font-weight: 600; color: var(--vital-navy); }
.vl-split-shot-card-micro { grid-column: 1 / -1; max-width: 560px; margin: 8px auto 0; }

/* 13. LEARNING LOOP ------------------------------------------------ */
.vl-learn { background: var(--deep-navy); }
.vl-learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vl-loop-badge { display: inline-flex; gap: 10px; align-items: center; padding: 10px 18px; border-radius: var(--radius-pill); background: rgba(124,92,252,0.16); color: #D9D3FF; font-size: 13.5px; font-weight: 600; margin-bottom: 20px; }

/* 14. THUMBNAIL LAB --------------------------------------------------- */
.vl-thumb-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 48px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 36px; }

/* 15. TOOLKIT --------------------------------------------------------- */
/* C4-C1: desktop 2x2 intent (previously on generic .vl-grid-4) scoped here. */
.vl-toolkit-grid { margin-top: 48px; grid-template-columns: repeat(2, 1fr); }
.vl-toolkit-card { padding: 26px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border-light); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); overflow: hidden; }
.vl-toolkit-shot { margin: -26px -26px 16px; border-bottom: 1px solid var(--border-light); background: var(--warm-canvas); }
.vl-toolkit-shot img { width: 100%; height: auto; display: block; }
.vl-toolkit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.vl-toolkit-card h3 { font-size: 16px; font-weight: 700; margin: 14px 0 6px; }
.vl-toolkit-card p { font-size: 14px; color: var(--text-secondary-light); }

/* 16. TRIAL / CREDITS --------------------------------------------------- */
.vl-trial { background: linear-gradient(135deg, var(--action-indigo), var(--vital-violet)); color: #fff; border-radius: var(--radius-lg); padding: 56px; text-align: center; }
.vl-trial .vl-h2 { color: #fff; }
ul.vl-trial-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 32px; margin: 30px 0 28px; }
.vl-trial-list li { font-size: 15px; font-weight: 600; }
.vl-credit-table { margin-top: 40px; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; text-align: left; background: rgba(255,255,255,0.08); border-radius: var(--radius-md); padding: 24px; }
.vl-credit-table div strong { display: block; font-size: 22px; margin-bottom: 4px; }
.vl-credit-table div span { font-size: 13px; color: rgba(255,255,255,0.8); }

/* 17. PRICING ----------------------------------------------------------- */
.vl-pricing-grid { margin-top: 48px; align-items: stretch; }
.vl-price-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; }
.vl-price-card.featured { border-color: var(--vital-indigo); box-shadow: var(--shadow-card-lg); position: relative; }
.vl-price-card .vl-price-tag { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--action-indigo); margin-bottom: 10px; }
.vl-price-amount { font-family: var(--font-display); font-size: 2.4rem; margin: 6px 0 4px; }
.vl-price-amount span { font-size: 14px; font-family: var(--font-body); color: var(--text-secondary-light); }
.vl-price-note { font-size: 13px; color: var(--text-secondary-light); margin-bottom: 22px; }
.vl-price-features { display: grid; gap: 10px; margin: 22px 0 26px; flex: 1; }
.vl-price-features li { font-size: 14px; display: flex; gap: 10px; }
.vl-price-features svg { color: var(--action-indigo); flex-shrink: 0; margin-top: 3px; }
.vl-price-soon { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--text-secondary-light); text-align: center; }

/* 18. TRUST --------------------------------------------------------- */
.vl-trust-grid { margin-top: 48px; }
.vl-trust-card { text-align: center; padding: 8px; }
.vl-trust-card .vl-icon-tile { margin: 0 auto 16px; }
.vl-trust-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; }
.vl-trust-card p { font-size: 13.5px; color: var(--text-secondary-light); }

/* 19. FAQ ------------------------------------------------------------- */
.vl-faq-list { margin-top: 40px; max-width: 800px; margin-left: auto; margin-right: auto; }
.vl-faq-item { border-bottom: 1px solid var(--border-light); }
.vl-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; background: none; border: none; text-align: left; font-size: 16px; font-weight: 600; color: var(--vital-navy); }
.vl-faq-q svg { flex-shrink: 0; transition: transform .25s var(--ease-out); color: var(--action-indigo); }
.vl-faq-item[data-open="true"] .vl-faq-q svg { transform: rotate(45deg); }
.vl-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease-out); }
.vl-faq-a p { padding: 0 4px 22px; font-size: 14.5px; color: var(--text-secondary-light); max-width: 680px; }

/* 20. FINAL CTA --------------------------------------------------------- */
.vl-final-cta { background: var(--vital-navy); text-align: center; }
.vl-final-cta .vl-h2 { color: #fff; margin-bottom: 16px; }
.vl-final-cta p { color: var(--text-secondary-dark); margin-bottom: 32px; }

/* 21. FOOTER ------------------------------------------------------------ */
.vl-footer { background: var(--vital-navy); color: var(--text-secondary-dark); padding: 56px 0 32px; font-size: 13.5px; }
.vl-footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--border-on-navy); }
.vl-footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; color: #fff; margin-bottom: 10px; }
.vl-footer-brand img { height: 26px; }
.vl-footer h4 { color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.vl-footer ul { display: grid; gap: 10px; }
.vl-footer a:hover { color: #fff; }
.vl-footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; flex-wrap: wrap; gap: 12px; }

/* 22. BACK TO TOP -------------------------------------------------------- */
.vl-back-to-top {
  position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--vital-navy); color: #fff; border: none; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
  box-shadow: var(--shadow-card); z-index: 90;
}
.vl-back-to-top.visible { opacity: 1; pointer-events: auto; transform: none; }

/* 23. RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 980px) {
  .vl-nav-inner { flex-wrap: nowrap; }
  .vl-brand, .vl-nav-login, .vl-nav-actions .vl-btn { white-space: nowrap; flex-shrink: 0; }
  .vl-nav-links { display: none; }
  .vl-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .vl-nav-mobile.open {
    display: block; background: var(--warm-canvas); border-top: 1px solid var(--border-light);
    padding: 18px 28px 26px; max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .vl-nav-mobile ul { display: grid; gap: 6px; font-size: 17px; font-weight: 600; }
  .vl-nav-mobile a { display: block; padding: 14px 6px; border-bottom: 1px solid var(--border-light); }
  .vl-nav-mobile .vl-nav-mobile-cta { display: grid; gap: 12px; margin-top: 22px; }

  .vl-hero-grid, .vl-ai-grid, .vl-learn-grid { grid-template-columns: 1fr; }
  .vl-hero-copy { text-align: left; padding-top: 0; }
  /* Locked mobile order: headline/copy/CTAs/trial proof first, then the
     product shots — stacked in normal flow, no absolute overlap, no rotation. */
  .vl-hero-visual { height: auto; margin-top: 32px; }
  .vl-hero-visual::before { display: none; }
  .vl-shot-dominant, .vl-shot-support {
    position: static; width: 100%; z-index: auto; margin: 0 0 16px;
  }
  .vl-shot-dominant { aspect-ratio: 1.4 / 1; }
  .vl-shot-support { aspect-ratio: auto; }
  .vl-shot-support img { object-fit: initial; height: auto; }
  .vl-shot-support.support-b { margin-bottom: 0; }

  .vl-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .vl-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .vl-split-shot-grid, .vl-thumb-strip { grid-template-columns: 1fr; }
  .vl-pricing-grid.vl-grid-3 { grid-template-columns: 1fr; }
  .vl-credit-table { grid-template-columns: 1fr; }
  .vl-footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .vl-container { padding: 0 20px; }
  .vl-section-pad { padding: 64px 0; }
  .vl-nav-inner { padding: 14px 20px; gap: 10px; }
  .vl-nav-login { display: none; }
  .vl-brand { font-size: 19px; gap: 8px; }
  .vl-brand img { height: 30px; }
  .vl-nav-actions { gap: 8px; }
  .vl-nav-actions .vl-btn-primary { padding: 9px 15px; font-size: 13.5px; box-shadow: 0 2px 8px -4px rgba(79,70,229,0.35); }
  .vl-grid-2, .vl-grid-3, .vl-grid-4 { grid-template-columns: 1fr; }
  .vl-workflow-path { flex-direction: column; gap: 22px; }
  .vl-workflow-stage::before { display: none; }
  .vl-hero-cta-row { flex-direction: column; align-items: stretch; }
  .vl-hero-cta-row .vl-btn { width: 100%; }
  .vl-trial-list { gap: 16px; flex-direction: column; align-items: center; }
  .vl-trial { padding: 40px 24px; }
  .vl-footer-top { grid-template-columns: 1fr; }
  .vl-footer-bottom { flex-direction: column; }
  .vl-stage-row { grid-template-columns: 1fr; }
  .vl-stage-num { display: none; }
}

@media (max-width: 520px) {
  .vl-h1 { font-size: 2.3rem; }
  .vl-trial-proof { gap: 8px 16px; }
}

/* Scroll-reveal for [data-vl-reveal] elements (sections, cards) --------- */
[data-vl-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-vl-reveal].vl-in-view { opacity: 1; transform: none; }

/* 24. REDUCED MOTION -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vl-landing * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  .vl-shot-dominant, .vl-shot-support, [data-vl-reveal] { opacity: 1 !important; transform: none !important; }
}

/* 25. ACCESSIBILITY — FOCUS VISIBLE ------------------------------------ */
.vl-landing a:focus-visible,
.vl-landing button:focus-visible,
.vl-landing input:focus-visible,
.vl-landing [tabindex]:focus-visible {
  outline: 2px solid var(--vital-indigo);
  outline-offset: 3px;
  border-radius: 4px;
}