/* ============================================================
   Vital Tears — Design System
   File: vt-skin.css
   Foundation for vitaltears.org refresh.

   Built off:
   - /Brand Guidelines/Vital Tears_Style Guide (1).pdf  (March 2025)
   - /Brand Guidelines/SVG/Wave_*.svg                   (exact wave path)
   - /Brand Guidelines/brand.html                       (component patterns)

   Typeface:  Poppins only (300 – 800).
   Palette:   Indigo / Cobalt / Royal / Sky / Gold / Ecru / White.
   Wave:      The brand wave is always the same color as the
              destination section. The wave forms that section's
              organic edge — never a contrasting shape laid on top.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap");

:root {
  /* Brand palette */
  --vt-indigo:      #262261;
  --vt-indigo-deep: #1b1748;
  --vt-cobalt:      #2a388f;
  --vt-royal:       #1b75bb;
  --vt-sky:         #57c9e9;
  --vt-sky-dim:     #3db3d6;
  --vt-gold:        #ffcb1f;
  --vt-gold-deep:   #eeb000;
  --vt-ecru:        #f8f6d7;
  --vt-cream:       #fdfbed;
  --vt-paper:       #ffffff;
  --vt-page:        #fafbfd;
  --vt-slate:       #3d4260;
  --vt-slate-muted: #6b7194;
  --vt-line:        rgba(38, 34, 97, 0.08);

  /* Layout */
  --vt-max: 1200px;
  --vt-pad-x: clamp(20px, 4vw, 40px);
  --vt-tabbar-h: 64px;
  --vt-radius-sm: 12px;
  --vt-radius-md: 20px;
  --vt-radius-lg: 28px;
  --vt-radius-xl: 36px;
  /* ----------------------------------------------------------
     Shadow scale — four tokens, that's it.
       sm        ·  cards at rest, inputs, default elevation
       md        ·  anything that needs to lift off the page:
                    hover, glass panels, badges, hero media
       glow      ·  brand royal/cobalt CTA glow (primary btns,
                    indigo stat tiles)
       glow-gold ·  gold CTA glow (gold btns, gold stat tile)
     ---------------------------------------------------------- */
  --vt-shadow-sm:        0 1px 2px rgba(38, 34, 97, 0.05),
                         0 2px 8px rgba(38, 34, 97, 0.05);
  --vt-shadow-md:        0 14px 36px -10px rgba(38, 34, 97, 0.22),
                         0 4px 12px rgba(38, 34, 97, 0.06);
  --vt-shadow-glow:      0 14px 32px rgba(27, 117, 187, 0.32);
  --vt-shadow-glow-gold: 0 14px 32px rgba(255, 203, 31, 0.42);

  /* Aliases — old names keep working, but new code uses the 4 above. */
  --vt-shadow:            var(--vt-shadow-sm);
  --vt-shadow-lg:         var(--vt-shadow-md);
  --vt-shadow-xl:         var(--vt-shadow-md);
  --vt-shadow-glow-royal: var(--vt-shadow-glow);
  --vt-shadow-glow-sky:   var(--vt-shadow-glow);

  /* Type & motion */
  --vt-font: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --vt-font-script: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --vt-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Wave divider — default values, overridden per-instance */
  --vt-wave-bg:   transparent;
  --vt-wave-fill: var(--vt-page);
  --vt-wave-h:    clamp(60px, 8vw, 110px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--vt-font);
  font-weight: 400;
  color: var(--vt-slate);
  background: var(--vt-page);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--vt-royal); text-decoration: none; }
a:hover { color: var(--vt-indigo); }
a:focus-visible {
  outline: 2px solid var(--vt-sky);
  outline-offset: 3px;
  border-radius: 4px;
}

.vt-skip {
  position: absolute;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.vt-skip:focus {
  position: fixed;
  left: 12px; top: 12px;
  z-index: 10001;
  width: auto; height: auto;
  padding: 12px 16px;
  background: var(--vt-indigo);
  color: #fff;
  border-radius: var(--vt-radius-sm);
}

.vt-wrap {
  width: 100%;
  max-width: var(--vt-max);
  margin: 0 auto;
  padding-left: var(--vt-pad-x);
  padding-right: var(--vt-pad-x);
  position: relative;
  z-index: 2;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
/* Headings — never let a single word widow on the last line. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

.vt-h1 {
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--vt-indigo);
  margin: 0 0 20px;
  text-wrap: balance;
}
.vt-h1--xl { font-size: clamp(2.75rem, 7vw, 5.5rem); }
.vt-h2 {
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--vt-indigo);
  margin: 0 0 16px;
  text-wrap: balance;
}
.vt-h3 {
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--vt-indigo);
  margin: 0 0 8px;
  text-wrap: balance;
}
.vt-lead {
  font-size: clamp(1.05rem, 1.55vw, 1.2rem);
  line-height: 1.6;
  color: var(--vt-slate-muted);
  text-wrap: pretty;
}
.vt-body { font-size: 1rem; line-height: 1.7; color: var(--vt-slate); text-wrap: pretty; }
.vt-body p { margin: 0 0 1rem; }
.vt-body p:last-child { margin-bottom: 0; }

.vt-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vt-sky-dim);
  margin: 0 0 16px;
  text-wrap: balance;
}
.vt-eyebrow--royal { color: var(--vt-royal); }
.vt-eyebrow--gold  { color: var(--vt-gold-deep); }
.vt-eyebrow--sky   { color: var(--vt-sky); }

/* Gold rule directly under eyebrow (signature brand-guide pattern) */
.vt-rule {
  display: inline-block;
  width: 72px;
  height: 8px;
  background: var(--vt-gold);
  border-radius: 4px;
  margin: 6px 0 26px;
}
.vt-rule--sky    { background: var(--vt-sky); }
.vt-rule--royal  { background: var(--vt-royal); }
.vt-rule--small  { width: 44px; height: 4px; }

.vt-grad-text {
  background: linear-gradient(120deg, var(--vt-sky) 0%, var(--vt-royal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   BUTTONS — three variants + two modifiers.
     Variants:
       .vt-btn--primary   royal→cobalt gradient pill   (default CTA)
       .vt-btn--gold      solid gold                   (premium / download asks)
       .vt-btn--ghost     white with indigo outline    (secondary action)
     Modifiers (stack with any variant):
       .vt-btn--sm        compact size
       .vt-btn--on-dark   recolors for indigo backgrounds
   ============================================================ */
.vt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--vt-font);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--vt-ease), box-shadow 0.25s var(--vt-ease), background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

/* Primary — royal→cobalt gradient, sky glow */
.vt-btn--primary {
  background: linear-gradient(135deg, var(--vt-royal), var(--vt-cobalt));
  color: #fff;
  box-shadow: var(--vt-shadow-glow);
}
.vt-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -6px rgba(27, 117, 187, 0.45);
  color: #fff;
}

/* Gold — premium asks */
.vt-btn--gold {
  background: var(--vt-gold);
  color: var(--vt-indigo);
  box-shadow: var(--vt-shadow-glow-gold);
}
.vt-btn--gold:hover {
  background: var(--vt-gold-deep);
  transform: translateY(-2px);
  color: var(--vt-indigo);
  box-shadow: 0 20px 40px -6px rgba(255, 203, 31, 0.5);
}

/* Ghost — secondary action */
.vt-btn--ghost {
  background: #fff;
  color: var(--vt-indigo);
  border-color: var(--vt-indigo);
  box-shadow: none;
}
.vt-btn--ghost:hover {
  background: var(--vt-indigo);
  color: #fff;
  transform: translateY(-2px);
}

/* On-dark modifier — for placing any button on indigo sections.
   Ghost becomes a transparent white-outlined pill; primary/gold
   keep their fills but get a brighter outer glow.            */
.vt-btn--on-dark.vt-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.vt-btn--on-dark.vt-btn--ghost:hover {
  background: #fff;
  color: var(--vt-indigo);
  border-color: #fff;
}
.vt-btn--on-dark.vt-btn--primary {
  box-shadow: 0 14px 32px rgba(87, 201, 233, 0.45);
}

/* Size modifier */
.vt-btn--sm    { padding: 10px 20px; font-size: 0.875rem; }
.vt-btn-row    { display: flex; flex-wrap: wrap; gap: 14px; }
.vt-btn-row--center { justify-content: center; }

/* Centered section intro (eyebrow + h2 + rule + optional lead) */
.vt-section-head { margin-bottom: clamp(36px, 4vw, 48px); }
.vt-section-head--center { text-align: center; }
.vt-section-head--center .vt-rule {
  margin-left: auto;
  margin-right: auto;
}
.vt-section-head .vt-lead {
  max-width: 620px;
  margin-top: 12px;
}
.vt-section-head--center .vt-lead {
  margin-left: auto;
  margin-right: auto;
}

/* Indigo closing CTA block (centered copy + button row) */
.vt-indigo-cta {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.vt-indigo-cta .vt-rule {
  margin-left: auto;
  margin-right: auto;
}
.vt-indigo-cta .vt-lead {
  margin: 0 auto 28px;
}

/* CTA band (white / cream sections) */
.vt-cta-band .vt-h2 { margin-bottom: 1.25rem; }
.vt-cta-band .vt-btn-row { justify-content: center; }

/* Homepage — delivery product shot below leader copy */
.vt-home-delivery {
  margin: clamp(40px, 5vw, 56px) auto 0;
  text-align: center;
  max-width: min(320px, 72vw);
}
.vt-home-delivery img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(38, 34, 97, 0.14));
}

/* Inset indigo partner CTA on a white section (footer wave visible below) */
.vt-partner-band {
  background: var(--vt-indigo);
  border-radius: var(--vt-radius-xl);
  overflow: hidden;
  padding: clamp(40px, 5vw, 56px) clamp(28px, 4vw, 40px);
  position: relative;
}
.vt-partner-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(at 80% 20%, rgba(87, 201, 233, 0.25) 0, transparent 40%),
    radial-gradient(at 20% 80%, rgba(255, 203, 31, 0.15) 0, transparent 40%),
    linear-gradient(160deg, var(--vt-indigo-deep) 0%, var(--vt-indigo) 60%, var(--vt-cobalt) 100%);
  pointer-events: none;
}
.vt-partner-band .vt-indigo-cta {
  position: relative;
  z-index: 1;
}

/* Full-bleed indigo partner CTA on a white section — no inset box, footer wave below */
.vt-partner-full {
  background: var(--vt-indigo);
  overflow: hidden;
  padding: clamp(48px, 7vw, 80px) 0;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.vt-partner-full::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(at 80% 20%, rgba(87, 201, 233, 0.25) 0, transparent 40%),
    radial-gradient(at 20% 80%, rgba(255, 203, 31, 0.15) 0, transparent 40%),
    linear-gradient(160deg, var(--vt-indigo-deep) 0%, var(--vt-indigo) 60%, var(--vt-cobalt) 100%);
  pointer-events: none;
}
.vt-partner-full .vt-indigo-cta {
  position: relative;
  z-index: 1;
}
.vt-partner-band .vt-h2,
.vt-partner-full .vt-h2 { color: #fff; }
.vt-partner-band .vt-eyebrow,
.vt-partner-full .vt-eyebrow { color: var(--vt-sky); }
.vt-partner-band .vt-lead,
.vt-partner-full .vt-lead { color: rgba(255, 255, 255, 0.9); }
/* White bridge: full indigo band above, wave pours into footer below */
.vt-section--partner-wave {
  padding-top: clamp(36px, 5vw, 64px);
}

/* Homepage — locate CTA without a boxed panel (typographic close) */
.vt-home-locate {
  margin: clamp(56px, 7vw, 80px) auto 0;
  padding-top: clamp(40px, 5vw, 56px);
  text-align: center;
  border-top: 1px solid var(--vt-line);
}
.vt-home-locate .vt-wave-accent {
  margin: 0 auto 20px;
}
.vt-home-locate .vt-rule {
  margin-left: auto;
  margin-right: auto;
}
.vt-home-locate .vt-lead {
  margin: 0 auto 24px;
}
.vt-home-locate--solo {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Subsection title inside long resource pages */
.vt-h2--subsection { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }

/* External-link icon (inline glyph next to text) */
.vt-ext-icon {
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-left: 4px;
  vertical-align: -0.05em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}
a:hover .vt-ext-icon { opacity: 1; }

/* ============================================================
   PAGE HEADER
   Structure (left → right):
     [ Logo ]   [ ........ Nav ........ ]   [ Become a Provider ]
   ============================================================ */
.vt-utility {
  background: linear-gradient(180deg, #eef1f8 0%, #e6ebf5 100%);
  border-bottom: 1px solid rgba(38, 34, 97, 0.06);
  font-size: 0.8125rem;
}
.vt-utility__inner {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 8px 0;
}
.vt-utility a {
  color: var(--vt-slate-muted);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}
.vt-utility a:hover { color: var(--vt-indigo); }

.vt-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--vt-line);
}
.vt-header-main {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Taller white bar — 22px top/bottom (was 14px). The utility bar above
     keeps its compact 8px padding; only this row gets more breathing room. */
  padding: 22px 0;
  flex-wrap: wrap;
  /* Anchor for both centered .vt-mega panels — they pin to this row so
     For Patients and For Providers always open at the same x-position. */
  position: relative;
}
.vt-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.vt-logo img { display: block; height: 44px; width: auto; }
@media (min-width: 768px) { .vt-logo img { height: 52px; } }

/* Mobile menu toggle (visible <1024px) */
.vt-nav-check {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.vt-nav-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(38, 34, 97, 0.12);
  border-radius: var(--vt-radius-sm);
  background: #fff;
  cursor: pointer;
  color: var(--vt-indigo);
  font-size: 1.1rem;
  margin-left: auto;
}
@media (min-width: 1024px) { .vt-nav-toggle { display: none; } }

.vt-nav {
  display: none;
  flex-basis: 100%;
  order: 99;
  padding-top: 8px;
}
.vt-nav-check:checked ~ .vt-nav { display: block; }

@media (min-width: 1024px) {
  .vt-nav {
    display: flex !important;
    flex: 1;
    flex-basis: auto;
    padding-top: 0;
    justify-content: flex-end;
    order: 1;
  }
}

.vt-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (min-width: 1024px) {
  .vt-nav-list { flex-direction: row; align-items: center; gap: 4px; }
}
.vt-nav-list > li > a,
.vt-nav-trigger {
  display: block;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--vt-indigo);
  text-decoration: none;
  border-radius: var(--vt-radius-sm);
  position: relative;
  cursor: pointer;
}
.vt-nav-list > li > a:hover,
.vt-nav-trigger:hover { color: var(--vt-royal); }
.vt-nav-list > li > a::after,
.vt-nav-trigger::after {
  /* gold rule grows under hover (echoes brand guide) */
  content: "";
  position: absolute;
  bottom: 4px;
  left: 16px;
  right: 16px;
  height: 3px;
  background: var(--vt-gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--vt-ease);
}
.vt-nav-list > li > a:hover::after,
.vt-nav-trigger:hover::after,
.vt-nav-group-wrap:hover .vt-nav-trigger::after,
.vt-nav-group-wrap:focus-within .vt-nav-trigger::after,
.vt-nav-group-wrap.is-open .vt-nav-trigger::after { transform: scaleX(1); }

/* The For Patients / For Providers trigger is a plain link — clicking it
   navigates to the section's landing page. Caret buttons stay in markup for
   touch/keyboard JS but are hidden visually. On hover-capable desktop, hovering
   the wrap opens the mega panel via :hover / :focus-within. */
.vt-nav-group-wrap {
  display: block;
}
.vt-nav-caret {
  display: none !important;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: var(--vt-indigo);
  cursor: pointer;
  border-radius: var(--vt-radius-sm);
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 1024px) {
  /* Trigger + caret render side by side on desktop. */
  .vt-nav-group-wrap {
    display: inline-flex;
    align-items: center;
    /* IMPORTANT: position: static so the absolutely-positioned .vt-mega
       inside escapes this wrap and pins to .vt-header-main instead, giving
       both panels the SAME horizontal anchor. */
    position: static;
  }
  /* Invisible bridge from trigger down toward the centered panel so moving
     the pointer off the label does not drop :hover before the mega is reached. */
  .vt-nav-group-wrap::after {
    content: "";
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: min(880px, calc(100vw - 40px));
    height: 48px;
    z-index: 59;
  }
  .vt-nav-group-wrap:hover::after,
  .vt-nav-group-wrap:focus-within::after,
  .vt-nav-group-wrap.is-open::after,
  .vt-nav-group-wrap.is-mega-hold::after,
  .vt-nav-group-wrap:has(.vt-mega:hover)::after {
    display: block;
  }
}

/* ============================================================
   MEGA MENU  — modern two-column dropdown for the For Patients
   and For Providers nav groups. Left column is a list of links
   rendered as accent mark + title + supporting line. Right column is a
   single featured CTA card with its own colored panel.
   Collapses to a single-column stack on mobile.

   Behavior:
   - Hover (desktop, hover-capable)  → opens via .vt-nav-group-wrap:hover.
   - Keyboard focus (Tab into wrap)  → opens via :focus-within.
   - Touch / no-hover / mobile drawer → opens via the sibling
     .vt-nav-caret button toggling .is-open on the wrap (tiny inline JS).

   The trigger label itself is a plain <a class="vt-nav-trigger"> link
   that navigates to the section landing page (patients.html /
   providers.html) — clicking it never just toggles the panel.

   Both panels are anchored to .vt-header-main (left:50% + translateX),
   so For Patients and For Providers always render at the same horizontal
   position with the same width.
   ============================================================ */
.vt-mega {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 8px 0 4px;
  padding: 14px;
  background: #fff;
  border-radius: var(--vt-radius-md);
  box-shadow: var(--vt-shadow-md);
}
@media (min-width: 1024px) {
  .vt-mega {
    position: absolute;
    top: 100%;
    /* Overlap the header bottom so the pointer hits the panel sooner. */
    margin-top: -20px;
    padding-top: 20px;
    /* Center under the header. Both panels use this exact rule, so they
       open at the same anchor regardless of which trigger you hover. */
    left: 50%;
    right: auto;
    width: min(880px, calc(100vw - 40px));
    min-width: 0;
    max-width: 880px;
    z-index: 60;
    grid-template-columns: 1.55fr 1fr;
    gap: 0;
    padding-left: 22px;
    padding-right: 22px;
    padding-bottom: 22px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -4px);
    transition: opacity 0.18s var(--vt-ease), transform 0.18s var(--vt-ease), visibility 0.18s;
    pointer-events: none;
  }
  /* Open on hover, keyboard focus, pointer over panel, or touch toggle. */
  .vt-nav-group-wrap:hover .vt-mega,
  .vt-nav-group-wrap:focus-within .vt-mega,
  .vt-nav-group-wrap.is-open .vt-mega,
  .vt-nav-group-wrap.is-mega-hold .vt-mega,
  .vt-nav-group-wrap:has(.vt-mega:hover) .vt-mega {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
  /* Extra hit area above the visible panel (full width). */
  .vt-mega::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(880px, calc(100vw - 40px));
    height: 32px;
  }
}

.vt-mega__main { padding: 4px; }
@media (min-width: 1024px) {
  .vt-mega__main {
    padding: 4px 22px 4px 4px;
    border-right: 1px solid var(--vt-line);
  }
}
.vt-mega__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vt-slate-muted);
  margin: 0 12px 12px;
}

.vt-mega__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.vt-mega__item {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--vt-radius-sm);
  text-decoration: none;
  transition: background 0.18s var(--vt-ease);
}
.vt-mega__item:hover {
  background: rgba(38, 34, 97, 0.04);
}
.vt-mega__item:hover .vt-mega__title { color: var(--vt-royal); }

/* Editorial list markers — accent bar color differs by section */
.vt-mega__mark {
  flex-shrink: 0;
  width: 3px;
  margin: 2px 0;
  border-radius: 2px;
  background: var(--vt-gold);
  transition: background 0.18s var(--vt-ease);
}
#vt-mega-patients .vt-mega__mark {
  background: var(--vt-sky);
}
#vt-mega-patients .vt-mega__item:hover .vt-mega__mark {
  background: var(--vt-royal);
}
#vt-mega-providers .vt-mega__mark {
  background: var(--vt-gold);
}
#vt-mega-providers .vt-mega__item:hover .vt-mega__mark {
  background: var(--vt-gold-deep);
}

.vt-mega__copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.vt-mega__title {
  display: block;
  color: var(--vt-indigo);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
  transition: color 0.18s;
}
.vt-mega__desc {
  display: block;
  color: var(--vt-slate-muted);
  font-size: 0.83rem;
  line-height: 1.45;
  font-weight: 400;
}

/* Featured CTA panel — second column on desktop */
.vt-mega__feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  border-radius: var(--vt-radius-md);
  background: linear-gradient(160deg, var(--vt-indigo-deep) 0%, var(--vt-indigo) 60%, var(--vt-cobalt) 100%);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  min-height: 220px;
  transition: transform 0.25s var(--vt-ease);
}
.vt-mega__feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(at 85% 15%, rgba(87, 201, 233, 0.35) 0, transparent 55%),
    radial-gradient(at 0% 100%, rgba(255, 203, 31, 0.12) 0, transparent 55%);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .vt-mega__feature { margin-left: 22px; }
}
.vt-mega__feature:hover { transform: translateY(-2px); color: #fff; }
.vt-mega__feature > * { position: relative; z-index: 2; }
.vt-mega__feature .vt-mega__eyebrow {
  color: var(--vt-sky);
  margin: 0 0 12px;
}
.vt-mega__feature h4 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  text-wrap: balance;
  margin: 0 0 10px;
  color: #fff;
}
.vt-mega__feature p {
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 28ch;
}
.vt-mega__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--vt-sky);
  margin-top: auto;
}
.vt-mega__cta::after {
  content: "→";
  transition: transform 0.2s var(--vt-ease);
}
.vt-mega__feature:hover .vt-mega__cta::after { transform: translateX(6px); }

/* Gold variant of the featured panel — for premium asks */
.vt-mega__feature--gold {
  background: linear-gradient(135deg, var(--vt-gold) 0%, var(--vt-gold-deep) 100%);
  color: var(--vt-indigo);
}
.vt-mega__feature--gold::before {
  background: radial-gradient(at 80% 20%, rgba(255, 255, 255, 0.4) 0, transparent 55%);
}
.vt-mega__feature--gold .vt-mega__eyebrow { color: rgba(38, 34, 97, 0.6); }
.vt-mega__feature--gold h4 { color: var(--vt-indigo); }
.vt-mega__feature--gold p  { color: rgba(38, 34, 97, 0.78); }
.vt-mega__feature--gold .vt-mega__cta { color: var(--vt-indigo); }

/* Reduced motion — drop the transition transforms */
@media (prefers-reduced-motion: reduce) {
  .vt-mega { transition: none; transform: none; }
  .vt-mega__item:hover .vt-mega__mark { transform: none; }
  .vt-mega__feature:hover { transform: none; }
  .vt-mega__feature:hover .vt-mega__cta::after { transform: none; }
}

/* "Become a Provider" — always far right (order: 2 on desktop) */
.vt-become {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--vt-royal), var(--vt-cobalt));
  box-shadow: 0 8px 22px rgba(27, 117, 187, 0.28);
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
  margin-left: auto;
  order: 0;
}
.vt-become:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(27, 117, 187, 0.4); color: #fff; }
@media (min-width: 1024px) {
  .vt-become { order: 2; margin-left: 8px; }
  .vt-nav-toggle { display: none; }
}

/* ============================================================
   MOBILE TAB BAR + MENU SHEET  (<1024px)
   Thumb-friendly primary nav; header drawer hidden on small screens.
   ============================================================ */
@media (max-width: 1023px) {
  .vt-utility { display: none; }
  .vt-nav-check,
  .vt-nav-toggle,
  .vt-nav { display: none !important; }
  .vt-header-main {
    flex-wrap: nowrap;
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 12px;
  }
  .vt-logo img { height: 40px; }
  .vt-become {
    margin-left: auto;
    order: 0;
    padding: 9px 14px;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  body {
    padding-bottom: calc(var(--vt-tabbar-h) + env(safe-area-inset-bottom, 0px));
  }
  html.vt-mobile-sheet-open body { overflow: hidden; }
}

.vt-tabbar {
  display: none;
}
@media (max-width: 1023px) {
  .vt-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    height: calc(var(--vt-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--vt-line);
    box-shadow: 0 -8px 28px rgba(38, 34, 97, 0.08);
  }
}

.vt-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--vt-tabbar-h);
  padding: 6px 4px 4px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vt-slate-muted);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vt-tabbar__item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.vt-tabbar__item.is-active,
.vt-tabbar__item[aria-current="page"] {
  color: var(--vt-royal);
}
.vt-tabbar__item.is-active svg,
.vt-tabbar__item[aria-current="page"] svg {
  stroke: var(--vt-royal);
}

.vt-mobile-sheet[hidden] { display: none; }
.vt-mobile-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: block;
  pointer-events: none;
}
.vt-mobile-sheet.is-open { pointer-events: auto; }
.vt-mobile-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 23, 66, 0.45);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.vt-mobile-sheet.is-open .vt-mobile-sheet__backdrop { opacity: 1; }
.vt-mobile-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(88vh, 640px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--vt-paper);
  border-radius: var(--vt-radius-lg) var(--vt-radius-lg) 0 0;
  padding: 12px var(--vt-pad-x) calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -16px 48px rgba(38, 34, 97, 0.18);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.vt-mobile-sheet.is-open .vt-mobile-sheet__panel {
  transform: translateY(0);
}
.vt-mobile-sheet__handle {
  width: 40px;
  height: 4px;
  margin: 4px auto 16px;
  border-radius: 999px;
  background: rgba(38, 34, 97, 0.15);
}
.vt-mobile-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.vt-mobile-sheet__head--toolbar {
  justify-content: flex-end;
  margin-bottom: 12px;
}
.vt-mobile-sheet__head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--vt-indigo);
}
.vt-mobile-sheet__close {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--vt-line);
  border-radius: 50%;
  background: #fff;
  color: var(--vt-indigo);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.vt-mobile-sheet__lead {
  margin: -8px 0 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--vt-slate-muted);
}
.vt-mobile-sheet__group {
  margin: 0 0 10px;
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius-md);
  background: var(--vt-page);
  overflow: hidden;
}
.vt-mobile-sheet__group[open] {
  background: #fff;
  border-color: rgba(27, 117, 187, 0.22);
  box-shadow: 0 6px 20px rgba(38, 34, 97, 0.06);
}
.vt-mobile-sheet__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 14px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--vt-indigo);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.vt-mobile-sheet__summary::-webkit-details-marker { display: none; }
.vt-mobile-sheet__summary::marker { content: ""; }
.vt-mobile-sheet__summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--vt-slate-muted);
  border-bottom: 2px solid var(--vt-slate-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  margin-top: -4px;
}
.vt-mobile-sheet__group[open] .vt-mobile-sheet__summary {
  color: var(--vt-royal);
  border-bottom: 1px solid var(--vt-line);
}
.vt-mobile-sheet__group[open] .vt-mobile-sheet__summary::after {
  transform: rotate(-135deg);
  margin-top: 4px;
  border-color: var(--vt-royal);
}
.vt-mobile-sheet__group .vt-mobile-sheet__links {
  padding: 6px 6px 10px;
}
.vt-mobile-sheet__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.vt-mobile-sheet__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px;
  border-radius: var(--vt-radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--vt-indigo);
  text-decoration: none;
}
.vt-mobile-sheet__links a:hover,
.vt-mobile-sheet__links a:focus-visible {
  background: rgba(87, 201, 233, 0.12);
  color: var(--vt-royal);
}
.vt-mobile-sheet__links a span[aria-hidden] {
  color: var(--vt-slate-muted);
  font-weight: 400;
}

@media (min-width: 1024px) {
  .vt-tabbar,
  .vt-mobile-sheet { display: none !important; }
}

@media (max-width: 1023px) {
  .vt-footer-meta {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
  }
  .vt-btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .vt-btn-row .vt-btn { width: 100%; justify-content: center; }
  .vt-partner-band { padding: clamp(28px, 6vw, 40px) clamp(20px, 5vw, 32px); }
}

@media (max-width: 380px) {
  .vt-become { font-size: 0.75rem; padding: 8px 12px; }
  .vt-tabbar__item { font-size: 0.58rem; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.vt-section {
  position: relative;
  padding: clamp(64px, 9vw, 120px) 0;
}
.vt-section--tight { padding: clamp(36px, 5vw, 64px) 0; }
.vt-section--white  { background: var(--vt-paper); }
.vt-section--cream  { background: var(--vt-cream); }
.vt-section--ecru   { background: var(--vt-ecru); }
.vt-section--page   { background: var(--vt-page); }

/* Mesh-gradient hero — lifted from brand.html .mesh-gradient */
.vt-mesh {
  background-color: #ffffff;
  background-image:
    radial-gradient(at 0% 0%,   hsla(193,82%,63%,0.20) 0px, transparent 50%),
    radial-gradient(at 100% 0%, hsla(264,47%,39%,0.10) 0px, transparent 50%),
    radial-gradient(at 100% 100%, hsla(193,82%,63%,0.10) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(50,100%,88%,0.40) 0px, transparent 50%);
}

/* Indigo statement band
   ----------------------------------------------------
   The base background is SOLID --vt-indigo so the wave seam (top AND
   bottom) lands on a flat color that the wave-bottom fill can match
   exactly. The richer gradient + radial mesh paints via ::before with
   `inset` insets so the top and bottom of the section stay pure indigo
   in the wave-seam zones. Same proven pattern the footer uses. */
.vt-section--indigo {
  background: var(--vt-indigo);
  color: #fff;
  overflow: hidden;
}
.vt-section--indigo .vt-h2,
.vt-section--indigo .vt-h1,
.vt-section--indigo .vt-h3 { color: #fff; }
.vt-section--indigo .vt-eyebrow { color: var(--vt-sky); }
.vt-section--indigo .vt-body { color: rgba(255,255,255,0.85); }
.vt-section--indigo .vt-lead { color: rgba(255,255,255,0.9); }
.vt-section--indigo::before {
  content: "";
  position: absolute;
  inset: 0; /* paint the full section… */
  background:
    radial-gradient(at 80% 20%, rgba(87,201,233,0.25) 0, transparent 40%),
    radial-gradient(at 20% 80%, rgba(255,203,31,0.15) 0, transparent 40%),
    linear-gradient(160deg, var(--vt-indigo-deep) 0%, var(--vt-indigo) 60%, var(--vt-cobalt) 100%);
  /* …but fade the whole rich layer in from transparent over the first
     ~140px so the solid --vt-indigo base shows through at the top.
     Result: the wave's flat indigo flows smoothly into the section
     with no hard boundary where the gradient kicks in. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 clamp(80px, 11vw, 160px), #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 clamp(80px, 11vw, 160px), #000 100%);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   WAVE — BUILT-IN BOTTOM CURVE (current strategy)
   ----------------------------------------------------
   The brand curve is part of the *previous* section, not a
   separate divider element. An absolutely-positioned SVG sits
   at the bottom of the section, filled with the *next*
   section's color. The previous section's own background
   (gradient, photo, solid, anything) naturally paints above
   the curve — so the colors above the curve always match,
   because they ARE the section's paint. The next section
   starts flush below, no spacer element needed.

   Usage:
     <section class="vt-section vt-section--cream
                     vt-wave-bottom vt-wave-bottom--to-indigo">
       <div class="vt-wrap"> ...content... </div>
       <svg class="vt-wave-bottom__svg" viewBox="0 0 184.66 44.96"
            preserveAspectRatio="none" aria-hidden="true">
         <use href="#vt-wave-fill"/>
       </svg>
     </section>
     <section class="vt-section vt-section--indigo"> ... </section>
   ============================================================ */
.vt-wave-bottom {
  position: relative;
  overflow: hidden; /* clip the 165%-wide SVG so the visible curve has the
                       same proportions as it does on .vt-section--indigo
                       (which is the "perfect" reference). Without this,
                       the SVG spills horizontally on white/cream/mesh
                       sections and the visible curve reads differently. */
  padding-bottom: calc(clamp(64px, 9vw, 120px) + var(--vt-wave-h));
}
.vt-wave-bottom__svg {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 165%;
  min-width: 1400px;
  height: var(--vt-wave-h); /* same token as .vt-hero__bottom-wave so every
                               wave on the site is exactly the same height */
  z-index: 5;
  pointer-events: none;
  display: block;
  color: var(--vt-cream); /* destination color — overridden below */
}
.vt-wave-bottom--to-indigo .vt-wave-bottom__svg { color: var(--vt-indigo); }
.vt-wave-bottom--to-cream  .vt-wave-bottom__svg { color: var(--vt-cream); }
.vt-wave-bottom--to-white  .vt-wave-bottom__svg { color: var(--vt-paper); }
.vt-wave-bottom--to-page   .vt-wave-bottom__svg { color: var(--vt-page); }

/* ============================================================
   WAVE DIVIDER  — DEPRECATED standalone-element strategy
   ----------------------------------------------------
   Kept only so the §08 demo in design-system.html keeps
   rendering during the transition. New code should use
   .vt-wave-bottom on the section itself (above) so the
   "above-curve" color is the section's actual paint, not a
   solid-color fallback that never quite matches a gradient.
   Will be removed once the DS demo is rewritten.
   ============================================================ */
.vt-wave-divider {
  position: relative;
  width: 100%;
  height: var(--vt-wave-h);
  background: var(--vt-wave-bg);
  overflow: hidden;
  line-height: 0;
  display: block;
}
.vt-wave-divider svg {
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 165%;
  min-width: 1400px;
  height: 100%;
  display: block;
  color: var(--vt-wave-fill);
}
.vt-wave--white-to-indigo  { --vt-wave-bg: var(--vt-paper);  --vt-wave-fill: var(--vt-indigo); }
.vt-wave--indigo-to-white  { --vt-wave-bg: var(--vt-indigo); --vt-wave-fill: var(--vt-paper); }
.vt-wave--cream-to-indigo  { --vt-wave-bg: var(--vt-cream);  --vt-wave-fill: var(--vt-indigo); }
.vt-wave--indigo-to-cream  { --vt-wave-bg: var(--vt-indigo); --vt-wave-fill: var(--vt-cream); }
.vt-wave--white-to-cream   { --vt-wave-bg: var(--vt-paper);  --vt-wave-fill: var(--vt-cream); }
.vt-wave--cream-to-white   { --vt-wave-bg: var(--vt-cream);  --vt-wave-fill: var(--vt-paper); }
.vt-wave--white-to-page    { --vt-wave-bg: var(--vt-paper);  --vt-wave-fill: var(--vt-page); }
.vt-wave--page-to-white    { --vt-wave-bg: var(--vt-page);   --vt-wave-fill: var(--vt-paper); }
.vt-wave--mesh-to-white    { --vt-wave-bg: transparent;      --vt-wave-fill: var(--vt-paper); }
.vt-wave--mesh-to-indigo   { --vt-wave-bg: transparent;      --vt-wave-fill: var(--vt-indigo); }
.vt-wave--mesh-to-cream    { --vt-wave-bg: transparent;      --vt-wave-fill: var(--vt-cream); }

/* ============================================================
   WAVE OVERLAY ON PHOTOS
   The original brand ribbon shape sits over a photo, white-colored,
   translated 33–66% beyond the frame (matches brand.html pattern).
   ============================================================ */
.vt-wave-overlay {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translate(-50%, 35%);
  width: 200%;
  max-width: none;
  height: auto;
  pointer-events: none;
  z-index: 4;
  color: #fff; /* fill = white over photo */
}
.vt-wave-overlay--indigo { color: var(--vt-indigo); }
.vt-wave-overlay--gold   { color: var(--vt-gold); }

/* Mini wave accent — RESERVED USE ONLY.
   Use sparingly: one-off decorative beat (e.g. under a hero
   eyebrow, or once per page above a closing CTA). Never as
   bullets, never repeated across a grid of cards, never as
   list markers. If it appears more than ~2 times on a page,
   it stops feeling like a brand mark and starts feeling like
   a decoration tic. */
.vt-wave-accent {
  display: block;
  width: 56px;
  height: 14px;
  margin-top: 14px;
  color: var(--vt-sky);
}
.vt-wave-accent--gold   { color: var(--vt-gold); }
.vt-wave-accent--royal  { color: var(--vt-royal); }
.vt-wave-accent--cobalt { color: var(--vt-cobalt); }

/* ============================================================
   HERO
   ----------------------------------------------------
   Base padding tuned for sub-page heroes (compact mesh band
   with eyebrow + h1 + lead). The homepage hero uses the
   .vt-hero--overlay variant below, which overrides padding.
   ============================================================ */
.vt-hero {
  position: relative;
  padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 80px);
  overflow: hidden;
}
.vt-hero__inner {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  grid-template-columns: 1fr;
  align-items: center;
  padding-bottom: clamp(40px, 7vw, 96px);
  position: relative;
  z-index: 2;
}
@media (min-width: 980px) {
  .vt-hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}
.vt-hero__media {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 540px;
  margin-left: auto;
}
@media (max-width: 980px) { .vt-hero__media { margin: 0 auto; } }
.vt-hero__photo {
  position: relative;
  z-index: 2;
  border-radius: var(--vt-radius-xl);
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--vt-ecru) 100%);
  box-shadow: var(--vt-shadow-md);
}
.vt-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  padding: clamp(16px, 3vw, 32px);
}
/* Lifestyle photo variant — for real photography (not product mockups).
   Fills the rounded frame edge-to-edge, no inner padding, no cream wash. */
.vt-hero__photo--lifestyle { background: none; }
.vt-hero__photo--lifestyle img { object-fit: cover; padding: 0; }

/* ----------------------------------------------------------
   OVERLAY HERO  — full-bleed photo with text overlaid on top.
   Used on the homepage. The photo fills the entire hero band
   edge-to-edge, an indigo→transparent gradient scrim makes the
   left side readable for white text, and the brand wave curve
   bridges the photo into the next (indigo) section.

   Markup:
     <section class="vt-hero vt-hero--overlay">
       <img class="vt-hero__bg" src="..." alt="...">
       <span class="vt-hero__scrim" aria-hidden="true"></span>
       <div class="vt-wrap">
         <div class="vt-hero__copy">
           <span class="vt-eyebrow ...">...</span>
           <h1 class="vt-h1 vt-h1--xl">...</h1>
           <span class="vt-rule"></span>
           <div class="vt-rotate" aria-live="polite">...</div>
           <div class="vt-btn-row">...</div>
         </div>
       </div>
       <svg class="vt-hero__bottom-wave" viewBox="0 0 184.66 44.96"
            preserveAspectRatio="none" aria-hidden="true">
         <use href="#vt-wave-fill"/>
       </svg>
     </section>

   No separate .vt-wave-divider after the section — the brand
   curve is built into the hero itself.
   ---------------------------------------------------------- */
.vt-hero--overlay {
  padding: 0;
  min-height: clamp(540px, 78vh, 760px);
  display: flex;
  align-items: center;
  background: #0b1742;
}
.vt-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  z-index: 0;
  display: block;
}
.vt-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(11, 23, 66, 0.92) 0%,
    rgba(11, 23, 66, 0.78) 28%,
    rgba(11, 23, 66, 0.42) 52%,
    rgba(11, 23, 66, 0.00) 76%
  );
}
.vt-hero--overlay .vt-wrap {
  position: relative;
  z-index: 2;
  padding: clamp(64px, 9vw, 112px) 0;
}
.vt-hero__copy {
  max-width: 580px;
  color: #fff;
}
.vt-hero--overlay .vt-hero__copy {
  display: flex;
  flex-direction: column;
  min-height: clamp(300px, 38vh, 400px);
}
.vt-hero--overlay .vt-hero__head {
  flex: 0 0 auto;
}
.vt-hero--overlay .vt-hero__head .vt-rule {
  margin-bottom: 0;
}
.vt-hero--overlay .vt-hero__tagline {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 3.25em;
}
.vt-hero--overlay .vt-hero__actions {
  flex: 0 0 auto;
  padding-top: 8px;
}
.vt-hero--overlay .vt-h1,
.vt-hero--overlay .vt-h2,
.vt-hero--overlay .vt-h3 { color: #fff; }
.vt-hero--overlay .vt-eyebrow { color: var(--vt-sky); }
.vt-hero--overlay .vt-rule { background: var(--vt-gold); }
.vt-hero--overlay .vt-rotate__line { color: rgba(255, 255, 255, 0.92); }
/* .vt-grad-text on the overlay hero inherits the global brand gradient
   (sky → royal) — both colors read against the dark scrim and stay
   inside the blue palette rather than mixing in a cross-palette gold. */
.vt-hero__bottom-wave {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 165%;
  min-width: 1400px;
  height: var(--vt-wave-h);
  color: var(--vt-indigo); /* SVG <path fill="currentColor"> */
  z-index: 3;
  pointer-events: none;
  display: block;
}
@media (max-width: 768px) {
  .vt-hero--overlay { min-height: clamp(480px, 72vh, 620px); }
  .vt-hero__scrim {
    background: linear-gradient(
      175deg,
      rgba(11, 23, 66, 0.88) 0%,
      rgba(11, 23, 66, 0.72) 55%,
      rgba(11, 23, 66, 0.60) 100%
    );
  }
  .vt-hero__bg { object-position: center 20%; }
}

.vt-hero__ring {
  position: absolute;
  inset: -28px;
  border: 1.5px dashed rgba(27, 117, 187, 0.22);
  border-radius: 50%;
  pointer-events: none;
  animation: vtSpin 60s linear infinite;
}
@keyframes vtSpin { to { transform: rotate(360deg); } }
.vt-hero__chip-gold {
  position: absolute;
  top: 12px;
  right: -32px;
  width: 96px;
  height: 96px;
  background: var(--vt-gold);
  border-radius: 50%;
  z-index: 3;
  box-shadow: 0 16px 36px rgba(255, 203, 31, 0.4);
}
.vt-hero__badge {
  position: absolute;
  bottom: 32px;
  left: -32px;
  z-index: 5;
  background: #fff;
  padding: 16px 22px;
  border-radius: var(--vt-radius-md);
  box-shadow: 0 24px 50px rgba(38, 34, 97, 0.22);
  max-width: 240px;
  font-size: 0.92rem;
  color: var(--vt-indigo);
  font-weight: 500;
  display: flex;
  gap: 12px;
  align-items: center;
}
.vt-hero__badge .check {
  display: inline-flex;
  width: 28px; height: 28px;
  background: var(--vt-sky);
  color: #fff;
  border-radius: 50%;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
}

.vt-rotate {
  position: relative;
  min-height: 3em;
  margin: 28px 0 32px;
  max-width: 540px;
}
.vt-rotate__line {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  font-weight: 500;
  color: var(--vt-slate-muted);
  opacity: 0;
  padding-left: 32px;
  animation: vtRotate 12s infinite;
}
.vt-rotate__line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 22px;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184.66 44.96' preserveAspectRatio='none'><path d='M184.66,38.75h0c-3.16-4.98-8.27-12.59-15.32-19.36C152.95,3.64,133.53-2.68,113.83,1.03c-10.49,1.97-21.62,5.48-32.4,8.89C50.83,19.57,20.4,30.14,0,6.25c5.65,12.93,15.16,23.72,27.75,31.22,20.75,12.35,45.1,6.99,70.89,1.31,26.46-5.83,56.21-12.38,86.03-.03' fill='%2357c9e9'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.vt-rotate__line:nth-child(1) { animation-delay: 0s; }
.vt-rotate__line:nth-child(2) { animation-delay: 4s; }
.vt-rotate__line:nth-child(3) { animation-delay: 8s; }
@keyframes vtRotate {
  0%, 3%   { opacity: 0; transform: translateY(10px); }
  8%, 30%  { opacity: 1; transform: translateY(0); }
  35%,100% { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .vt-rotate { min-height: 0; display: flex; flex-direction: column; gap: 0.4rem; }
  .vt-rotate__line { position: relative !important; opacity: 1 !important; }
  .vt-hero__ring { animation: none; }
}

/* ============================================================
   GLASS PANEL
   ============================================================ */
.vt-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.72) 100%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: var(--vt-radius-xl);
  box-shadow: var(--vt-shadow-md);
}
.vt-glass--dark {
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  color: #fff;
  box-shadow: var(--vt-shadow-md);
}
.vt-glass--dark .vt-step {
  border-top-color: rgba(255, 255, 255, 0.14);
}
.vt-glass--dark .vt-step h2,
.vt-glass--dark .vt-step h3 {
  color: #fff;
}
.vt-glass--dark .vt-step__body p {
  color: rgba(255, 255, 255, 0.82);
}

/* Left-border accent block (mirrors brand "Effective Results") */
.vt-accent-block {
  border-left: 4px solid var(--vt-sky);
  padding: 4px 0 4px 24px;
}
.vt-accent-block--royal { border-left-color: var(--vt-royal); }
.vt-accent-block--gold  { border-left-color: var(--vt-gold); }
.vt-accent-block h3 { margin-bottom: 6px; }
.vt-accent-block h3.royal { color: var(--vt-royal); }
.vt-accent-block h3.gold  { color: var(--vt-gold-deep); }

/* ============================================================
   GRIDS
   ============================================================ */
.vt-grid-2 {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .vt-grid-2 { grid-template-columns: 1fr 1fr; } }

.vt-grid-2--asym {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .vt-grid-2--asym { grid-template-columns: 1.15fr 0.85fr; } }

.vt-grid-3 {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 740px) { .vt-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.vt-grid-4 {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .vt-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vt-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   PILLARS  — editorial, not card-y.
   No box-border, no card chrome by default. Just a brand
   icon (or a bold colored numeral) up top, strong indigo
   headline, body copy, and a short colored bottom-rule for
   identity. The pillar leans on type and the brand icon
   library to do the work — not a glass tile pattern.

   Light variant: sits on white / cream / page backgrounds.
   Dark variant:  for indigo statement sections.
   ============================================================ */
.vt-pillar {
  position: relative;
  padding: 8px 4px 0;
  transition: transform 0.35s var(--vt-ease);
}
.vt-pillar:hover { transform: translateY(-4px); }

/* Brand icon (uses existing patient/provider icon library) */
.vt-pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
}
.vt-pillar__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* Light sections: brand icons are white line-art — give a royal chip so they read on cream/white */
.vt-section--cream .vt-pillar:not(.vt-pillar--dark) .vt-pillar__icon,
.vt-section--white .vt-pillar:not(.vt-pillar--dark) .vt-pillar__icon {
  justify-content: center;
  background: linear-gradient(145deg, var(--vt-royal) 0%, var(--vt-cobalt) 100%);
  border-radius: 14px;
}
.vt-section--cream .vt-pillar:not(.vt-pillar--dark) .vt-pillar__icon img,
.vt-section--white .vt-pillar:not(.vt-pillar--dark) .vt-pillar__icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.vt-pillar__icon svg {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
}
.vt-section--cream .vt-pillar:not(.vt-pillar--dark) .vt-pillar__icon,
.vt-section--white .vt-pillar:not(.vt-pillar--dark) .vt-pillar__icon {
  color: #fff;
}
.vt-pillar--dark .vt-pillar__icon {
  justify-content: center;
  background: none;
  border-radius: 0;
  color: #fff;
}
.vt-pillar--dark .vt-pillar__icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
}

/* Bold numeral alternative — used when there's no icon */
.vt-pillar__num {
  display: block;
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--vt-royal);
  margin-bottom: 18px;
}
.vt-pillar__num--gold   { color: var(--vt-gold-deep); }
.vt-pillar__num--royal  { color: var(--vt-royal); }
.vt-pillar__num--cobalt { color: var(--vt-cobalt); }
.vt-pillar__num--sky    { color: var(--vt-sky-dim); }

/* Type — bigger and bolder than the old pillar; no muted body */
.vt-pillar h3,
.vt-pillar .vt-h3 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--vt-indigo);
  margin: 0 0 10px;
  line-height: 1.25;
}
.vt-pillar p {
  margin: 0;
  color: var(--vt-slate);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* Short colored bottom-rule = pillar's identity stripe.
   This replaces the previous "mini wave on every card" pattern. */
.vt-pillar__stripe {
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 22px;
  background: var(--vt-sky);
  border-radius: 2px;
}
.vt-pillar__stripe--gold   { background: var(--vt-gold); }
.vt-pillar__stripe--royal  { background: var(--vt-royal); }
.vt-pillar__stripe--cobalt { background: var(--vt-cobalt); }

/* Dark variant for indigo statement sections.
   Same shape, just inverted text colors. No glass card. */
.vt-pillar--dark h3,
.vt-pillar--dark .vt-h3 { color: #fff; }
.vt-pillar--dark p { color: rgba(255, 255, 255, 0.82); }
.vt-pillar--dark .vt-pillar__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.vt-pillar--dark .vt-pillar__num { color: var(--vt-sky); }
.vt-pillar--dark .vt-pillar__num--gold { color: var(--vt-gold); }
.vt-pillar--dark .vt-pillar__stripe { background: rgba(255, 255, 255, 0.55); }
.vt-pillar--dark .vt-pillar__stripe--gold { background: var(--vt-gold); }
.vt-pillar--dark .vt-pillar__stripe--sky  { background: var(--vt-sky); }

/* ============================================================
   BOOKLET MOCKUP — provider packet cover presentation
   ============================================================ */
.vt-booklet {
  margin: 0;
  text-align: center;
}
.vt-booklet__scene {
  position: relative;
  display: inline-block;
  padding: 0 0 18px 24px;
  transform: perspective(880px) rotateY(-14deg);
  transform-style: preserve-3d;
}
.vt-booklet__edge {
  position: absolute;
  top: 10px;
  left: 22px;
  right: -6px;
  bottom: 10px;
  background: linear-gradient(180deg, #fcfcfd 0%, #e8ecf4 55%, #dde3ef 100%);
  border-radius: 1px 3px 4px 1px;
  box-shadow:
    3px 4px 0 #d4dae8,
    6px 8px 0 #c2c9db,
    10px 16px 28px rgba(38, 34, 97, 0.22);
  z-index: 0;
}
.vt-booklet__edge::before {
  content: "";
  position: absolute;
  inset: 5px 8px 5px 5px;
  border-radius: 0 2px 2px 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(38, 34, 97, 0.05) 0,
    rgba(38, 34, 97, 0.05) 1px,
    transparent 1px,
    transparent 5px
  );
}
.vt-booklet__spine {
  position: absolute;
  left: 2px;
  top: 6px;
  bottom: 22px;
  width: 20px;
  background: linear-gradient(
    90deg,
    #141238 0%,
    var(--vt-indigo-deep) 30%,
    var(--vt-indigo) 65%,
    #4340a0 100%
  );
  border-radius: 4px 0 0 4px;
  box-shadow:
    inset -4px 0 8px rgba(0, 0, 0, 0.4),
    -1px 0 6px rgba(38, 34, 97, 0.2);
  z-index: 1;
}
.vt-booklet__cover-wrap {
  position: relative;
  z-index: 2;
  display: block;
}
.vt-booklet__cover-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0 5px 5px 0;
  pointer-events: none;
  background: linear-gradient(
    128deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 28%,
    transparent 52%
  );
}
.vt-booklet__cover {
  display: block;
  width: min(240px, 72vw);
  height: auto;
  aspect-ratio: 232 / 300;
  object-fit: cover;
  object-position: center top;
  border-radius: 0 5px 5px 0;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.35),
    14px 18px 36px rgba(38, 34, 97, 0.3),
    3px 6px 12px rgba(0, 0, 0, 0.14);
}
@media (max-width: 768px) {
  .vt-booklet__scene {
    transform: perspective(880px) rotateY(-8deg);
    padding-left: 20px;
  }
  .vt-booklet__cover {
    width: min(220px, 78vw);
  }
}

/* Sitewide content pattern:
   - .vt-section--cream + .vt-glass + .vt-step  → numbered process lists
   - .vt-section--indigo + .vt-pillar--dark     → icon feature pillars */

/* ============================================================
   STEP BLOCKS
   ============================================================ */
.vt-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--vt-line);
}
.vt-step:first-of-type { border-top: none; padding-top: 4px; }
.vt-step__num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vt-royal), var(--vt-cobalt));
  color: #fff;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(27, 117, 187, 0.16);
}
.vt-step__num--gold {
  background: var(--vt-gold);
  color: var(--vt-indigo);
  box-shadow: 0 2px 8px rgba(255, 203, 31, 0.22);
}
/* Step badges inside glass panels — drop heavy glow (reads as muddy on white/cream glass) */
.vt-glass .vt-step__num,
.vt-glass .vt-step__num--gold {
  box-shadow: none;
}
.vt-glass:has(.vt-step) {
  box-shadow: var(--vt-shadow-sm);
}
.vt-step h2,
.vt-step h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--vt-indigo);
  margin: 6px 0 6px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.vt-step__body p { margin: 0 0 12px; color: var(--vt-slate); }
.vt-step__body p:last-child { margin-bottom: 0; }

/* ============================================================
   STAT TILE (bento-style number badge)
   ============================================================ */
.vt-stat {
  background: linear-gradient(135deg, var(--vt-sky) 0%, var(--vt-royal) 100%);
  border-radius: var(--vt-radius-lg);
  padding: clamp(28px, 4vw, 44px);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--vt-shadow-glow);
}
.vt-stat::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.vt-stat__num {
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  position: relative;
  z-index: 2;
}
.vt-stat__num sup { font-size: 0.32em; font-weight: 500; vertical-align: top; margin-left: 6px; opacity: 0.9; }
.vt-stat__label {
  margin-top: 14px;
  position: relative; z-index: 2;
  font-size: 0.98rem;
  opacity: 0.95;
}
.vt-stat--gold {
  background: var(--vt-gold);
  color: var(--vt-indigo);
  box-shadow: var(--vt-shadow-glow-gold);
}
.vt-stat--gold::after { background: radial-gradient(ellipse at center, rgba(255,255,255,0.4), transparent 60%); }
.vt-stat--indigo {
  background: linear-gradient(135deg, var(--vt-indigo), var(--vt-cobalt));
}

/* Inline stat — typographic, no shadow tile. For embedding a big number
   inside an existing band (e.g. directly under the indigo statement)
   without introducing another card or shadow. Big sky number, short
   label to its right. Stacks on small screens. */
.vt-stat-inline {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.vt-stat-inline__num {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--vt-gold);
}
.vt-stat-inline__num sup {
  font-size: 0.32em;
  font-weight: 500;
  vertical-align: top;
  margin-left: 4px;
  opacity: 0.85;
}
.vt-stat-inline__label {
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  max-width: 32ch;
}
@media (max-width: 600px) {
  .vt-stat-inline { flex-direction: column; gap: 10px; padding: 18px; text-align: center; }
  .vt-stat-inline__label { text-align: center; }
}

/* ============================================================
   AUDIENCE TILES  — bold solid color panels.
   No borders. No card-on-cream pattern. Each tile is a
   confident colored block. Color does the work, type sits
   on top. One audience gets the indigo-deep gradient, the
   other gets the royal→cobalt gradient. Both have a soft
   radial highlight bloom for depth without losing weight.
   ============================================================ */
.vt-tiles {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .vt-tiles { grid-template-columns: 1fr 1fr; } }

.vt-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(160deg, var(--vt-royal) 0%, var(--vt-cobalt) 100%);
  border-radius: var(--vt-radius-lg);
  padding: clamp(32px, 4vw, 52px);
  overflow: hidden;
  min-height: 280px;
  box-shadow: var(--vt-shadow-md);
  transition: transform 0.4s var(--vt-ease), box-shadow 0.4s var(--vt-ease);
}
.vt-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--vt-shadow-md);
  color: #fff;
}
.vt-tile::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -25%;
  width: 90%;
  height: 180%;
  background: radial-gradient(ellipse at center, rgba(87, 201, 233, 0.32) 0%, transparent 60%);
  pointer-events: none;
}

/* Variant: indigo-deep for the second audience */
.vt-tile--indigo {
  background: linear-gradient(160deg, var(--vt-indigo-deep) 0%, var(--vt-indigo) 55%, var(--vt-cobalt) 100%);
}
.vt-tile--indigo::before {
  background: radial-gradient(ellipse at center, rgba(255, 203, 31, 0.22) 0%, transparent 60%);
}

/* Variant: gold panel — premium feel, dark text */
.vt-tile--gold {
  background: linear-gradient(135deg, var(--vt-gold) 0%, var(--vt-gold-deep) 100%);
  color: var(--vt-indigo);
}
.vt-tile--gold:hover { color: var(--vt-indigo); }
.vt-tile--gold::before {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.45) 0%, transparent 60%);
}

.vt-tile__label {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}
.vt-tile--gold .vt-tile__label { color: rgba(38, 34, 97, 0.6); }

.vt-tile h3 {
  font-size: clamp(1.55rem, 2.7vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: inherit;
  margin: 0 0 14px;
  line-height: 1.08;
  position: relative;
  z-index: 2;
}
.vt-tile p {
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 24px;
  max-width: 420px;
  font-size: 1rem;
  line-height: 1.55;
  position: relative;
  z-index: 2;
}
.vt-tile--gold p { color: rgba(38, 34, 97, 0.78); }

.vt-tile .vt-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: auto;
  position: relative;
  z-index: 2;
}
.vt-tile .vt-go::after { content: "→"; transition: transform 0.25s var(--vt-ease); }
.vt-tile:hover .vt-go::after { transform: translateX(8px); }

/* ============================================================
   PERSON CARD  — team / leadership / advisor
   No box chrome. Circular photo, bold indigo name, slate title.
   Sits inside a 3- or 4-col grid (.vt-grid-3 / .vt-grid-4).
   ============================================================ */
.vt-person { text-align: center; padding: 0 4px; }
.vt-person__photo {
  width: clamp(110px, 14vw, 150px);
  height: clamp(110px, 14vw, 150px);
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 18px;
  box-shadow: var(--vt-shadow-sm);
  background: var(--vt-page);
}
.vt-person__name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vt-indigo);
  margin: 0 0 4px;
  line-height: 1.25;
}
.vt-person__title {
  font-size: 0.85rem;
  color: var(--vt-slate-muted);
  line-height: 1.4;
  margin: 0;
}
.vt-person__role-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vt-gold-deep);
  margin-top: 8px;
}

/* Rounded lifestyle / lab photo — pairs with .vt-grid-2 */
.vt-photo-card {
  position: relative;
  border-radius: var(--vt-radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--vt-shadow-md);
}
.vt-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vt-photo-card--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(87, 201, 233, 0.14) 0%, rgba(27, 117, 187, 0.08) 100%),
    var(--vt-page);
  border: 1px dashed rgba(38, 34, 97, 0.18);
  box-shadow: none;
}
.vt-photo-card__placeholder-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vt-slate-muted);
}
/* Centered in-flow photo (no empty column beside short copy) */
.vt-photo-card--inline {
  max-width: min(640px, 100%);
  margin: clamp(28px, 4vw, 40px) auto;
}

/* ============================================================
   JOB ROW  — careers / open opportunities list
   Plain typographic list, divider rules between rows, hover
   shifts the arrow to invite interaction. Sits inside a glass
   panel (.vt-glass).
   ============================================================ */
.vt-job-list { display: block; }
.vt-job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--vt-line);
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}
.vt-job:first-child { border-top: none; padding-top: 8px; }
.vt-job:hover { color: var(--vt-royal); }
.vt-job__body { min-width: 0; }
.vt-job__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--vt-indigo);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.vt-job:hover .vt-job__title { color: var(--vt-royal); }
.vt-job__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--vt-slate-muted);
}
.vt-job__location::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vt-sky);
  flex-shrink: 0;
}
.vt-job__arrow {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--vt-royal);
  transition: transform 0.25s var(--vt-ease);
}
.vt-job:hover .vt-job__arrow { transform: translateX(6px); }

/* ============================================================
   CONFERENCE ROSTER  — upcoming-events.html
   ============================================================ */
.vt-event-list { display: block; margin: 0; padding: 0; list-style: none; }
.vt-event {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 20px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--vt-line);
  text-decoration: none;
  color: inherit;
}
.vt-event:first-child { border-top: none; padding-top: 8px; }
.vt-event__body { min-width: 0; }
.vt-event__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--vt-indigo);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
a.vt-event:hover .vt-event__title { color: var(--vt-royal); }
.vt-event__meta {
  font-size: 0.88rem;
  color: var(--vt-slate-muted);
  margin: 0 0 6px;
  line-height: 1.5;
}
.vt-event__note {
  font-size: 0.88rem;
  color: var(--vt-slate);
  margin: 0;
  line-height: 1.5;
}
.vt-event__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.vt-event__status {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.vt-event__status--upcoming {
  background: rgba(87, 201, 233, 0.22);
  color: var(--vt-royal);
}
.vt-event__status--past {
  background: rgba(38, 34, 97, 0.08);
  color: var(--vt-slate-muted);
}
.vt-event__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vt-royal);
  text-decoration: none;
}
.vt-event__link:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .vt-event { grid-template-columns: 1fr; }
  .vt-event__aside { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

.vt-resource-row__badge--ebook {
  background: rgba(255, 203, 31, 0.35);
  color: var(--vt-gold-deep);
}
.vt-resource-row__badge--webinar {
  background: rgba(42, 56, 143, 0.12);
  color: var(--vt-indigo);
}
.vt-resource-row__badge--event {
  background: rgba(87, 201, 233, 0.2);
  color: var(--vt-royal);
}

/* ============================================================
   CONTACT INFO LIST  — for Contact & Support
   Icon + label/value pairs. Calm typography, no card chrome.
   ============================================================ */
.vt-contact-list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.vt-contact-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
}
.vt-contact-item__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(87, 201, 233, 0.16);
  color: var(--vt-royal);
}
.vt-contact-item__icon svg { width: 20px; height: 20px; }
.vt-contact-item__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-slate-muted);
  margin-bottom: 4px;
}
.vt-contact-item__value {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--vt-indigo);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.vt-contact-item__value a { color: inherit; }
.vt-contact-item__value a:hover { color: var(--vt-royal); }
.vt-contact-item__sub {
  display: block;
  margin-top: 2px;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--vt-slate-muted);
  line-height: 1.5;
}

/* ============================================================
   VIDEO + CTA BAND
   ============================================================ */
.vt-video {
  width: 100%;
  border-radius: var(--vt-radius-lg);
  box-shadow: var(--vt-shadow-md);
  background: #000;
}
.vt-cta-band {
  background: linear-gradient(135deg, rgba(87, 201, 233, 0.18) 0%, rgba(38, 34, 97, 0.06) 100%);
  border-radius: var(--vt-radius-xl);
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
  box-shadow: var(--vt-shadow-md);
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.vt-field { display: block; margin-bottom: 20px; }
.vt-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vt-indigo);
  margin-bottom: 8px;
}
.vt-input,
.vt-textarea,
.vt-select {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--vt-font);
  font-size: 1rem;
  color: var(--vt-slate);
  background: #fff;
  border: 1.5px solid var(--vt-line);
  border-radius: var(--vt-radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.vt-input:focus,
.vt-textarea:focus,
.vt-select:focus {
  outline: none;
  border-color: var(--vt-sky);
  box-shadow: 0 0 0 4px rgba(87, 201, 233, 0.18);
}
.vt-textarea { min-height: 120px; resize: vertical; }

/* ============================================================
   FOOTER
   ============================================================ */
/* The footer is intentionally a SOLID indigo. The wave above
   pours straight into the same color — no gradient/solid
   collision at the seam. Subtle decorative blooms live below
   the seam, well clear of the wave edge. */
.vt-footer {
  background: var(--vt-indigo);
  color: rgba(255, 255, 255, 0.88);
  padding: clamp(32px, 5vw, 52px) 0 clamp(20px, 3vw, 28px);
  position: relative;
  overflow: hidden;
}
.vt-footer::before {
  content: "";
  position: absolute;
  inset: clamp(24px, 4vw, 48px) 0 0 0;
  background-image:
    radial-gradient(at 85% 30%, rgba(87, 201, 233, 0.12) 0, transparent 45%),
    radial-gradient(at 15% 90%, rgba(255, 203, 31, 0.06) 0, transparent 50%);
  pointer-events: none;
}
.vt-footer .vt-wrap { position: relative; z-index: 2; }
.vt-footer a { color: var(--vt-sky); }
.vt-footer a:hover { color: #fff; }
.vt-footer-main {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.5vw, 32px);
}
.vt-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0;
  padding-bottom: clamp(20px, 3vw, 24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.vt-footer-brand > a {
  display: block;
  align-self: flex-start;
}
@media (min-width: 1024px) {
  .vt-footer-main {
    display: grid;
    grid-template-columns: minmax(280px, 320px) 1fr;
    gap: clamp(28px, 4vw, 40px);
    align-items: start;
  }
  .vt-footer-brand {
    border-bottom: none;
    padding-bottom: 0;
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .vt-footer-li {
    align-self: flex-start;
    margin-top: 16px;
  }
}
.vt-footer-nav {
  display: grid;
  gap: clamp(20px, 3vw, 28px) clamp(20px, 2.5vw, 28px);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .vt-footer-nav { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .vt-footer-nav {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}
.vt-footer-subcol + .vt-footer-subcol {
  margin-top: clamp(16px, 2.5vw, 20px);
}
.vt-footer-brand img {
  display: block;
  width: min(240px, 62vw);
  height: auto;
}
.vt-footer-tagline {
  margin: 10px 0 12px;
  font-size: 0.84rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
  max-width: 36ch;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .vt-footer-tagline {
    max-width: 48ch;
  }
}
@media (min-width: 1024px) {
  .vt-footer-tagline {
    margin: 10px 0 0;
    max-width: 28em;
  }
}
.vt-footer-li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
  max-width: 100%;
  text-align: left;
}
.vt-footer-li__label {
  margin: 0;
  font-family: var(--vt-font-script);
  font-size: clamp(1.25rem, 4.8vw, 1.85rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--vt-sky);
  transform: rotate(-2deg);
  transform-origin: left center;
  text-align: left;
}
.vt-footer-li .vt-icon-li {
  margin: 0;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .vt-footer-brand img {
    width: min(210px, 58vw);
  }
  .vt-footer-tagline {
    max-width: none;
  }
}
.vt-footer-col {
  min-width: 0;
}
.vt-footer-heading {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vt-sky);
}
.vt-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.vt-footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.25;
}
.vt-footer-links a .vt-ext-icon {
  flex-shrink: 0;
  opacity: 0.8;
}
.vt-footer-links a:hover { color: #fff; }
.vt-footer-signup__lead {
  margin: 0 0 8px;
  font-size: 0.84rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.72);
}
.vt-footer-signup__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
@media (min-width: 480px) {
  .vt-footer-signup__row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}
.vt-footer-signup__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
}
.vt-footer-signup__input::placeholder { color: rgba(255, 255, 255, 0.48); }
.vt-footer-signup__input:focus {
  outline: none;
  border-color: var(--vt-sky);
  box-shadow: 0 0 0 3px rgba(87, 201, 233, 0.22);
}
.vt-footer-signup__btn {
  flex: 0 0 auto;
  padding: 10px 20px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--vt-indigo);
  background: var(--vt-gold);
  border: none;
  border-radius: 999px;
  box-shadow: var(--vt-shadow-glow-gold);
  cursor: pointer;
  white-space: nowrap;
}
.vt-footer-signup__btn:hover {
  background: var(--vt-gold-deep);
}
.vt-footer-signup__btn:disabled {
  opacity: 0.65;
  cursor: wait;
}
.vt-footer-signup__status {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
}
.vt-footer-signup__status--ok { color: rgba(255, 255, 255, 0.9); }
.vt-footer-signup__status--err { color: #ffb4bc; }
@media (max-width: 479px) {
  .vt-footer-signup__btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

.vt-footer-contact {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.84rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}
.vt-footer-contact p { margin: 0 0 6px; }
.vt-footer-contact p:last-child { margin-bottom: 0; }
.vt-footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(24px, 3.5vw, 32px);
  padding-top: clamp(16px, 2vw, 20px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem;
}
.vt-icon-li {
  display: inline-flex;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #fff;
  transition: background 0.2s, transform 0.2s;
}
.vt-icon-li:hover { background: rgba(87, 201, 233, 0.4); transform: translateY(-2px); color: #fff; }

/* ============================================================
   BIO MODAL  — click-to-expand advisor / team bio
   Built on the native <dialog> element so the browser handles
   focus trap, Esc-to-close, inert background, and a11y.
   Markup:
     <button class="vt-person vt-person--clickable" data-bio="bio-x">
       <img class="vt-person__photo" src="..." alt="">
       <h3 class="vt-person__name">...</h3>
       <p class="vt-person__title">...</p>
     </button>
     <dialog class="vt-bio-modal" id="bio-x">
       <button class="vt-bio-modal__close" type="button" aria-label="Close">×</button>
       <div class="vt-bio-modal__inner">
         <img class="vt-bio-modal__photo" src="..." alt="">
         <h3 class="vt-bio-modal__name">Name, Credentials</h3>
         <span class="vt-rule"></span>
         <div class="vt-bio-modal__body vt-body">
           <p>...</p>
         </div>
       </div>
     </dialog>
   A tiny script wires data-bio click → dialog.showModal() and a
   backdrop click closes the dialog. Esc and Tab-focus-trap are
   already free from <dialog>.
   ============================================================ */
.vt-person--clickable {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 4px;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  border-radius: var(--vt-radius-lg);
  transition: transform 0.25s var(--vt-ease), background 0.25s var(--vt-ease);
}
.vt-person--clickable:hover {
  transform: translateY(-3px);
  background: rgba(87, 201, 233, 0.08);
}
.vt-person--clickable:hover .vt-person__photo {
  box-shadow: var(--vt-shadow-md);
}
.vt-person--clickable:focus-visible {
  outline: 2px solid var(--vt-sky);
  outline-offset: 4px;
}
.vt-person__expand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vt-royal);
}
.vt-person__expand::after { content: "→"; transition: transform 0.2s var(--vt-ease); }
.vt-person--clickable:hover .vt-person__expand::after { transform: translateX(4px); }

/* Native <dialog>: reset chrome, position, animate. */
.vt-bio-modal {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 0;
  border-radius: var(--vt-radius-xl);
  background: var(--vt-paper);
  color: var(--vt-slate);
  box-shadow: 0 30px 80px -20px rgba(38, 34, 97, 0.45),
              0 8px 24px rgba(38, 34, 97, 0.12);
  overflow: hidden;
  font-family: var(--vt-font);
}
.vt-bio-modal::backdrop {
  background: rgba(27, 23, 72, 0.55);
  backdrop-filter: blur(4px);
}
.vt-bio-modal[open] {
  animation: vt-bio-in 0.32s var(--vt-ease) both;
}
@keyframes vt-bio-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.vt-bio-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--vt-indigo);
  background: rgba(38, 34, 97, 0.06);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 2;
}
.vt-bio-modal__close:hover {
  background: rgba(38, 34, 97, 0.14);
  transform: rotate(90deg);
}
.vt-bio-modal__close:focus-visible {
  outline: 2px solid var(--vt-sky);
  outline-offset: 3px;
}

.vt-bio-modal__inner {
  padding: clamp(28px, 4vw, 44px);
  padding-top: clamp(36px, 5vw, 56px);
  overflow-y: auto;
  max-height: calc(100vh - 64px);
  text-align: center;
}
.vt-bio-modal__photo {
  width: clamp(120px, 18vw, 160px);
  height: clamp(120px, 18vw, 160px);
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 20px;
  box-shadow: var(--vt-shadow-sm);
  background: var(--vt-page);
  display: block;
}
.vt-bio-modal__name {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vt-indigo);
  margin: 0 0 6px;
  line-height: 1.2;
}
.vt-bio-modal__role {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vt-royal);
  margin: 0 0 14px;
}
.vt-bio-modal__inner > .vt-rule {
  margin: 6px auto 24px;
  display: block;
}
.vt-bio-modal__body {
  text-align: left;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--vt-slate);
}
.vt-bio-modal__body p { margin: 0 0 1rem; }
.vt-bio-modal__body p:last-child { margin-bottom: 0; }

/* Full-screen on mobile. */
@media (max-width: 560px) {
  .vt-bio-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .vt-bio-modal__inner { max-height: 100vh; }
}

/* ============================================================
   PROVIDER SEARCH FORM  — find-a-provider page shell
   Beautiful card with state / zip / radius inputs.
   ============================================================ */
.vt-search-card {
  background: var(--vt-paper);
  border-radius: var(--vt-radius-xl);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--vt-shadow-md);
  border: 1px solid var(--vt-line);
}
.vt-search-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .vt-search-grid {
    grid-template-columns: 1.2fr 1fr 1fr auto;
    align-items: end;
  }
}
.vt-search-grid .vt-field { margin: 0; }
.vt-search-grid .vt-btn { white-space: nowrap; }

/* ============================================================
   RESOURCE GRID  — link list with rich tile chrome.
   Slightly heavier than .vt-job; built for resource catalogs.
   ============================================================ */
.vt-resource-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .vt-resource-grid { grid-template-columns: 1fr 1fr; }
}
.vt-resource {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  background: var(--vt-paper);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius-md);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s var(--vt-ease), box-shadow 0.25s var(--vt-ease), border-color 0.25s var(--vt-ease);
}
.vt-resource:hover {
  transform: translateY(-3px);
  box-shadow: var(--vt-shadow-md);
  border-color: rgba(87, 201, 233, 0.45);
  color: inherit;
}
.vt-resource__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(87, 201, 233, 0.16);
  color: var(--vt-royal);
}
.vt-resource__icon svg { width: 22px; height: 22px; }
.vt-resource__body { min-width: 0; flex: 1; }
.vt-resource__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--vt-indigo);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.vt-resource__desc {
  font-size: 0.92rem;
  color: var(--vt-slate-muted);
  margin: 0;
  line-height: 1.55;
}
.vt-resource__meta {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-royal);
}

/* Scannable link list — titles read at a glance (education / practice libraries) */
.vt-resource-jump,
ul.vt-resource-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
ul.vt-resource-jump li { margin: 0; padding: 0; }
.vt-resource-jump a {
  display: inline-block;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--vt-royal);
  text-decoration: none;
  background: rgba(87, 201, 233, 0.14);
  border: 1px solid rgba(87, 201, 233, 0.35);
  border-radius: 999px;
}
.vt-resource-jump a:hover {
  background: rgba(87, 201, 233, 0.22);
  color: var(--vt-cobalt);
}
.vt-resource-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius-md);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--vt-shadow-sm);
}
.vt-resource-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 14px 18px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--vt-line);
  color: inherit;
  text-decoration: none;
}
.vt-resource-row:first-child { border-top: none; }
.vt-resource-row:hover {
  background: rgba(87, 201, 233, 0.07);
  color: inherit;
}
.vt-resource-row__badge {
  justify-self: start;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 6px;
  text-align: center;
  line-height: 1.2;
}
.vt-resource-row__badge--case {
  background: rgba(255, 203, 31, 0.28);
  color: var(--vt-gold-deep);
}
.vt-resource-row__badge--insight {
  background: rgba(27, 117, 187, 0.1);
  color: var(--vt-royal);
}
.vt-resource-row__badge--pdf {
  background: rgba(42, 56, 143, 0.1);
  color: var(--vt-cobalt);
}
.vt-resource-row__badge--guide,
.vt-resource-row__badge--web {
  background: rgba(87, 201, 233, 0.18);
  color: var(--vt-royal);
}
.vt-resource-row__badge--portal {
  background: rgba(38, 34, 97, 0.08);
  color: var(--vt-indigo);
}
.vt-resource-row__title {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--vt-indigo);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.vt-resource-row:hover .vt-resource-row__title { color: var(--vt-royal); }
.vt-resource-row__go {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--vt-sky-dim);
  line-height: 1;
}
.vt-resource-row:hover .vt-resource-row__go { color: var(--vt-royal); }
@media (max-width: 520px) {
  .vt-resource-row {
    grid-template-columns: 3.75rem 1fr auto;
    gap: 10px 12px;
    padding: 12px 14px;
  }
  .vt-resource-row__title { font-size: 0.92rem; }
}

/* HubSpot embed — shared by contact + find-a-provider */
.vt-hsform .hs-form,
.vt-hsform .hs-form * { font-family: "Poppins", system-ui, sans-serif !important; }
.vt-hsform .hs-form-field { margin-bottom: 18px; }
.vt-hsform .hs-form-field > label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vt-indigo);
  margin-bottom: 8px;
}
.vt-hsform .hs-input:not([type="checkbox"]):not([type="radio"]),
.vt-hsform .hs-input.hs-fieldtype-text,
.vt-hsform .hs-input.hs-fieldtype-textarea,
.vt-hsform select.hs-input,
.vt-hsform textarea.hs-input {
  width: 100% !important;
  padding: 12px 16px !important;
  font: inherit !important;
  font-size: 1rem !important;
  color: var(--vt-slate) !important;
  background: #fff !important;
  border: 1.5px solid var(--vt-line) !important;
  border-radius: var(--vt-radius-sm) !important;
  box-shadow: none !important;
}
.vt-hsform .hs-input:focus {
  outline: none !important;
  border-color: var(--vt-sky) !important;
  box-shadow: 0 0 0 4px rgba(87, 201, 233, 0.18) !important;
}
.vt-hsform textarea.hs-input { min-height: 120px; resize: vertical; }
.vt-hsform .hs-error-msgs,
.vt-hsform .hs_error_rollup {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  color: #c2185b;
  font-size: 0.85rem;
}
.vt-hsform .hs-submit { margin-top: 24px; }
.vt-hsform .legal-consent-container,
.vt-hsform .hs-richtext {
  font-size: 0.82rem;
  color: var(--vt-slate-muted);
  margin: 6px 0;
}
.vt-hsform .legal-consent-container a { color: var(--vt-royal); }
.vt-hsform--provider .hs-submit { margin-top: 8px; }

/* ============================================================
   FAQ ACCORDION  — pure CSS / <details>
   ============================================================ */
.vt-faq { display: block; }
.vt-faq__item {
  border-top: 1px solid var(--vt-line);
  padding: 0;
}
.vt-faq__item:first-child { border-top: none; }
.vt-faq__item[open] { background: rgba(87, 201, 233, 0.04); }
.vt-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 20px 4px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--vt-indigo);
  list-style: none;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.vt-faq__q::-webkit-details-marker { display: none; }
.vt-faq__q::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--vt-royal);
  transition: transform 0.3s var(--vt-ease);
  line-height: 1;
}
.vt-faq__item[open] .vt-faq__q::after { content: "−"; }
.vt-faq__a {
  padding: 0 4px 22px;
  color: var(--vt-slate);
  font-size: 0.98rem;
  line-height: 1.7;
}
.vt-faq__a p { margin: 0 0 1rem; }
.vt-faq__a p:last-child { margin-bottom: 0; }
.vt-faq__a ol, .vt-faq__a ul { margin: 0 0 1rem 1.25rem; padding: 0; }
.vt-faq__a li { margin-bottom: 0.5rem; }

/* ============================================================
   PROSE  — long-form body content (legal, terms)
   Single column inside .vt-narrow, comfortable reading rhythm.
   ============================================================ */
.vt-prose { color: var(--vt-slate); }
.vt-prose h2, .vt-prose .vt-h2 { margin-top: 2.2rem; margin-bottom: 0.6rem; }
.vt-prose h3, .vt-prose .vt-h3 { margin-top: 1.6rem; margin-bottom: 0.4rem; }
.vt-prose p { margin: 0 0 1.1rem; line-height: 1.75; }
.vt-prose ul, .vt-prose ol { margin: 0 0 1.1rem 1.25rem; padding: 0; }
.vt-prose li { margin-bottom: 0.5rem; line-height: 1.7; }
.vt-prose a { color: var(--vt-royal); text-decoration: underline; text-underline-offset: 2px; }
.vt-prose a:hover { color: var(--vt-indigo); }

/* ============================================================
   INTERNAL NAV BAND  — discoverability for non-public pages
   A thin, dark, deliberately understated band that sits BELOW
   the indigo public footer. Used during stakeholder previews so
   reviewers can reach the off-nav routes (MAB, privacy, clinical-
   staff resources, education for providers, design-system) in
   one click. Contrasts hard with the indigo footer above so it
   reads as clearly internal-only.
   ============================================================ */
.vt-internal-nav {
  background: #0e1023;          /* near-black slate, sits below indigo footer */
  color: rgba(255, 255, 255, 0.62);
  padding: 18px 0;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.vt-internal-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  color: inherit;
}
.vt-internal-nav__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 203, 31, 0.78); /* dim gold tag */
  font-size: 0.66rem;
  white-space: nowrap;
}
.vt-internal-nav__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}
.vt-internal-nav__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vt-internal-nav__list a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.vt-internal-nav__list a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 203, 31, 0.6);
}
.vt-internal-nav__list a:focus-visible {
  outline: 2px solid var(--vt-sky);
  outline-offset: 3px;
  border-radius: 2px;
}
.vt-internal-nav__list a.is-active {
  color: var(--vt-gold);
  border-bottom-color: var(--vt-gold);
}

/* ============================================================
   UTILITY HELPERS
   ============================================================ */
.vt-narrow  { max-width: 820px; margin-left: auto; margin-right: auto; }
.vt-center  { text-align: center; }
.vt-mt-1    { margin-top: 1rem; }
.vt-mt-2    { margin-top: 1.5rem; }
.vt-mt-3    { margin-top: 2rem; }

/* ============================================================
   ELEMENTOR HANDOFF
   Static WebP backgrounds (images/backgrounds/), solid footer
   and buttons, no motion. Regenerate assets: python3 _export_backgrounds.py
   ============================================================ */

/* — Static background images — */
.vt-utility {
  background: #eef1f8 url("images/backgrounds/utility-bar.webp") center / cover no-repeat;
}

.vt-mesh {
  background-color: #fff;
  background-image: url("images/backgrounds/mesh-hero.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.vt-section--indigo::before {
  background: url("images/backgrounds/indigo-section-wave-top.webp") center top / cover no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
}

.vt-hero__photo {
  background: url("images/backgrounds/hero-photo-frame.webp") center / cover no-repeat;
}

/* Glass stays CSS gradient + blur (WebP panels looked opaque and fought step shadows) */

.vt-cta-band {
  background: url("images/backgrounds/cta-band.webp") center / 100% 100% no-repeat;
}

.vt-tile {
  background: url("images/backgrounds/tile-royal.webp") center / 100% 100% no-repeat;
}
.vt-tile::before { display: none; }
.vt-tile--indigo {
  background-image: url("images/backgrounds/tile-indigo.webp");
}
.vt-tile--gold {
  background-image: url("images/backgrounds/tile-gold.webp");
}

.vt-mega__feature {
  background: url("images/backgrounds/mega-feature-indigo.webp") center / 100% 100% no-repeat;
}
.vt-mega__feature::before { display: none; }
.vt-mega__feature--gold {
  background-image: url("images/backgrounds/mega-feature-gold.webp");
}

.vt-mega__item:hover {
  background: rgba(87, 201, 233, 0.12);
}

.vt-stat {
  background: url("images/backgrounds/stat-sky.webp") center / 100% 100% no-repeat;
}
.vt-stat::after { display: none; }
.vt-stat--gold {
  background-image: url("images/backgrounds/stat-gold.webp");
}
.vt-stat--indigo {
  background-image: url("images/backgrounds/stat-indigo.webp");
}

/* — Solid buttons & footer (grad text keeps sky→royal clip) — */
.vt-btn--primary,
.vt-hsform .hs-button {
  background: var(--vt-royal);
}
.vt-btn--primary:hover,
.vt-hsform .hs-button:hover {
  background: var(--vt-cobalt);
}

.vt-become {
  background: var(--vt-royal);
}

.vt-step__num {
  background: linear-gradient(135deg, var(--vt-royal), var(--vt-cobalt));
}
.vt-step__num--gold {
  background: var(--vt-gold);
}
.vt-glass .vt-step__num,
.vt-glass .vt-step__num--gold {
  box-shadow: none !important;
}

.vt-footer::before {
  display: none;
}

/* — No motion sitewide (homepage overlay hero exempt — see below) — */
*,
*::before,
*::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

.vt-btn:hover,
.vt-btn--primary:hover,
.vt-btn--gold:hover,
.vt-btn--ghost:hover,
.vt-become:hover,
.vt-tile:hover,
.vt-pillar:hover,
.vt-mega__feature:hover,
.vt-mega__item:hover .vt-mega__mark,
.vt-mega__feature:hover .vt-mega__cta::after,
.vt-job:hover .vt-job__arrow,
.vt-tile:hover .vt-go::after,
.vt-icon-li:hover,
.vt-resource:hover,
.vt-person--clickable:hover .vt-person__expand::after,
.vt-nav-caret span,
.vt-nav-group-wrap:hover .vt-nav-caret span {
  transform: none !important;
}

.vt-bio-modal[open] {
  animation: none !important;
}

/* ============================================================
   HOMEPAGE HERO — restore full overlay behavior
   (CSS scrim, rotating lines, grad headline, CTA motion)
   ============================================================ */
.vt-hero--overlay .vt-hero__scrim {
  background: linear-gradient(
    100deg,
    rgba(11, 23, 66, 0.92) 0%,
    rgba(11, 23, 66, 0.78) 28%,
    rgba(11, 23, 66, 0.42) 52%,
    rgba(11, 23, 66, 0) 76%
  ) !important;
}
@media (max-width: 768px) {
  .vt-hero--overlay .vt-hero__scrim {
    background: linear-gradient(
      175deg,
      rgba(11, 23, 66, 0.88) 0%,
      rgba(11, 23, 66, 0.72) 55%,
      rgba(11, 23, 66, 0.6) 100%
    ) !important;
  }
}

.vt-hero--overlay .vt-rotate {
  position: relative;
  width: 100%;
  min-height: 3em !important;
  max-width: 540px;
  margin: 0 !important;
  display: block !important;
  flex-direction: unset !important;
  gap: unset !important;
}
.vt-hero--overlay .vt-rotate__line {
  position: absolute !important;
  left: 0;
  top: 50%;
  width: 100%;
  opacity: 0;
  padding-left: 32px;
  margin: 0;
  animation: vtRotateOverlay 12s infinite !important;
}
@keyframes vtRotateOverlay {
  0%, 3%   { opacity: 0; transform: translateY(calc(-50% + 10px)); }
  8%, 30%  { opacity: 1; transform: translateY(-50%); }
  35%,100% { opacity: 0; transform: translateY(calc(-50% - 8px)); }
}
.vt-hero--overlay .vt-rotate__line:nth-child(1) { animation-delay: 0s !important; }
.vt-hero--overlay .vt-rotate__line:nth-child(2) { animation-delay: 4s !important; }
.vt-hero--overlay .vt-rotate__line:nth-child(3) { animation-delay: 8s !important; }

.vt-hero--overlay .vt-btn {
  transition: transform 0.25s var(--vt-ease), box-shadow 0.25s var(--vt-ease), background 0.2s, color 0.2s, border-color 0.2s !important;
}
.vt-hero--overlay .vt-btn--primary {
  background: linear-gradient(135deg, var(--vt-royal), var(--vt-cobalt)) !important;
}
.vt-hero--overlay .vt-btn--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 40px -6px rgba(27, 117, 187, 0.45) !important;
  background: linear-gradient(135deg, var(--vt-royal), var(--vt-cobalt)) !important;
}
.vt-hero--overlay .vt-btn--ghost:hover {
  transform: translateY(-2px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .vt-hero--overlay .vt-hero__copy {
    min-height: 0;
  }
  .vt-hero--overlay .vt-hero__tagline {
    display: block;
    min-height: 0;
  }
  .vt-hero--overlay .vt-rotate {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
  }
  .vt-hero--overlay .vt-rotate__line {
    position: relative !important;
    top: auto !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .vt-hero--overlay .vt-btn:hover {
    transform: none !important;
  }
}

/* Mobile sheet — allow open/close motion despite sitewide transition lock */
.vt-mobile-sheet__backdrop,
.vt-mobile-sheet__panel {
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;
}