/* ==========================================================================
   VizzEx — Divi / Lulo child theme stylesheet
   Paste into: Appearance > Theme File Editor > Lulo child style.css
   (or Divi > Theme Options > Custom CSS for a quick test)

   Fonts: load Archivo + IBM Plex Mono. Easiest route is to pick them per-module
   in Divi (both are in Divi's Google Fonts list). If you prefer a single global
   load, add this line at the very top of style.css:

   @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
   ========================================================================== */

:root {
  /* Core brand */
  --vz-navy-deep:  #0A1524;  /* darkest section background */
  --vz-navy:       #0E1B2E;  /* primary dark section background */
  --vz-navy-black: #07111D;  /* footer / inset panels */
  --vz-yellow:     #F8D810;  /* logo accent — CTAs only, never body text */

  /* Accents (from the deck) */
  --vz-teal:       #028090;
  --vz-mint:       #02C39A;
  --vz-red:        #C0392B;  /* problem / decay only */

  /* Accent (from the product UI) */
  --vz-purple:     #6C4FD0;
  --vz-purple-lt:  #8B5CF0;
  --vz-purple-pale:#B9A6F0;
  --vz-magenta:    #8B4FA8;

  /* Neutrals */
  --vz-ice:        #EFF5F7;  /* light section background */
  --vz-mist:       #F5F8F9;
  --vz-line-light: #E4EBEF;
  --vz-line-dark:  rgba(255,255,255,.12);
  --vz-ink:        #0E1B2E;
  --vz-ink-2:      #42586A;
  --vz-ink-3:      #4A6375;
  --vz-onDark-1:   #FFFFFF;
  --vz-onDark-2:   #C3D2DB;
  --vz-onDark-3:   #93A7B4;
  --vz-onDark-4:   #7E93A2;

  --vz-sans: 'Archivo', Helvetica, Arial, sans-serif;
  --vz-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   1. SECTION BACKGROUNDS
   Apply to a Divi SECTION in Advanced > CSS Class.
   Set the section's own padding in Divi (desktop 96px top/bottom, 56px sides).
   -------------------------------------------------------------------------- */
.vz-sec-dark   { background:var(--vz-navy-deep) !important; color:var(--vz-onDark-2); }
.vz-sec-navy   { background:var(--vz-navy) !important;      color:var(--vz-onDark-2); }
.vz-sec-light  { background:var(--vz-ice) !important;       color:var(--vz-ink); }
.vz-sec-white  { background:#FFFFFF !important;             color:var(--vz-ink); }
.vz-sec-yellow { background:var(--vz-yellow) !important;    color:var(--vz-navy-deep); }
.vz-sec-red    { background:var(--vz-red) !important;       color:#FFFFFF; }

/* Hero glow — put on the hero section. Pure CSS, no image needed. */
.vz-sec-hero {
  background:
    radial-gradient(1100px 600px at 78% 10%, rgba(2,128,144,.32), transparent 62%),
    radial-gradient(700px 500px at 12% 90%, rgba(108,79,208,.22), transparent 60%),
    var(--vz-navy-deep) !important;
}
.vz-sec-hero-purple {
  background:
    radial-gradient(1000px 560px at 76% 6%, rgba(108,79,208,.42), transparent 62%),
    radial-gradient(720px 500px at 6% 94%, rgba(2,128,144,.24), transparent 60%),
    #10082A !important;
}
.vz-sec-purple { background:linear-gradient(150deg,#6C4FD0,#8B4FA8 55%,#028090) !important; color:#fff; }
.vz-sec-teal   { background:linear-gradient(120deg,#028090,#02C39A) !important; color:#fff; }
/* Dark-purple gradient — the Mastery / Program sections (dark, not the bright purple). */
.vz-sec-mastery { background:linear-gradient(160deg,#1A1233,#2A1A44 45%,#0A1524) !important; color:var(--vz-onDark-2); }
.vz-sec-mastery h1, .vz-sec-mastery h2, .vz-sec-mastery h3 { color:var(--vz-onDark-1) !important; }
.vz-sec-mastery p { color:var(--vz-onDark-3); }
.vz-sec-mastery .vz-lead p { color:var(--vz-onDark-2); }
.vz-sec-mastery .vz-eyebrow { color:var(--vz-purple-pale); }
.vz-sec-mastery a { color:var(--vz-purple-pale); }
.vz-sec-mastery a:hover { color:#fff; }

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   Apply to Text / Heading modules. Set these as your Divi defaults where you
   can (Theme Customizer > Typography) and use the classes for the rest.
   -------------------------------------------------------------------------- */
.vz-eyebrow {
  font-family:var(--vz-mono) !important;
  font-size:14px !important; letter-spacing:.2em; text-transform:uppercase;
  color:var(--vz-teal); margin-bottom:14px;
}
.vz-sec-dark .vz-eyebrow, .vz-sec-navy .vz-eyebrow,
.vz-sec-hero .vz-eyebrow, .vz-sec-hero-purple .vz-eyebrow { color:var(--vz-mint); }
/* On the purple/teal gradient sections a light label reads best (teal is too dark). */
.vz-sec-purple .vz-eyebrow, .vz-sec-teal .vz-eyebrow { color:rgba(255,255,255,.8) !important; }
.vz-eyebrow-purple { color:var(--vz-purple-pale) !important; }

/* Muted inline text — e.g. the second clause of a hero headline. */
.vz-dim { color:#7F92A3 !important; }

/* Inline brand accent — e.g. "GEOMesh" in body copy. Teal on light, mint on dark. */
.vz-accent { color:var(--vz-teal) !important; font-weight:600 !important; }
.vz-sec-dark .vz-accent, .vz-sec-navy .vz-accent,
.vz-sec-hero .vz-accent, .vz-sec-hero-purple .vz-accent { color:var(--vz-mint) !important; }

.vz-h1 h1, .vz-h1 {
  font-family:var(--vz-sans) !important; font-weight:800 !important;
  font-size:76px !important; line-height:.98 !important; letter-spacing:-.035em !important;
  text-wrap:balance;
}
.vz-h2 h2, .vz-h2 {
  font-family:var(--vz-sans) !important; font-weight:800 !important;
  font-size:50px !important; line-height:1.04 !important; letter-spacing:-.03em !important;
}
.vz-h3 h3, .vz-h3 {
  font-family:var(--vz-sans) !important; font-weight:700 !important;
  font-size:27px !important; line-height:1.15 !important; letter-spacing:-.02em !important;
}
.vz-lead, .vz-lead p {
  font-size:21px !important; line-height:1.55 !important; font-weight:400;
}
.vz-body, .vz-body p {
  font-size:17px !important; line-height:1.7 !important;
}
.vz-small, .vz-small p { font-size:15px !important; line-height:1.65 !important; }
.vz-mono { font-family:var(--vz-mono) !important; letter-spacing:.14em; font-size:12px !important; }

/* Beat Divi/Lulo default heading line-heights inside Text modules (tight type). */
.et_pb_text.vz-h1 h1, .et_pb_text.vz-h1 { font-family:var(--vz-sans) !important; font-weight:800 !important; font-size:76px !important; line-height:.98 !important; letter-spacing:-.035em !important; }
.et_pb_text.vz-h2 h2, .et_pb_text.vz-h2 { font-family:var(--vz-sans) !important; font-weight:800 !important; font-size:50px !important; line-height:1.04 !important; letter-spacing:-.03em !important; }
.et_pb_text.vz-h3 h3, .et_pb_text.vz-h3 { font-family:var(--vz-sans) !important; font-weight:700 !important; font-size:27px !important; line-height:1.15 !important; letter-spacing:-.02em !important; }
.et_pb_text.vz-lead, .et_pb_text.vz-lead p { font-size:21px !important; line-height:1.55 !important; }
/* Zero the INNER heading/paragraph tag margins so Divi's defaults don't double up... */
.et_pb_text.vz-h1 h1, .et_pb_text.vz-h2 h2, .et_pb_text.vz-h3 h3,
.et_pb_text.vz-lead p, .et_pb_text.vz-body p { margin:0 !important; padding:0 !important; }
/* ...then give each block real spacing below it — the global vertical rhythm. */
/* Higher-specificity than plain .vz-eyebrow so it beats Divi's cached inline
   snapshot (which copies the original .vz-eyebrow selector). */
.et_pb_text.vz-eyebrow { font-size:14px !important; letter-spacing:.2em !important; margin:0 0 20px !important; }
.et_pb_text.vz-h1     { margin:0 0 28px !important; }
.et_pb_text.vz-h2     { margin:0 0 24px !important; }
.et_pb_text.vz-h3     { margin:0 0 16px !important; }
.et_pb_text.vz-lead   { margin:0 0 30px !important; }
.et_pb_text.vz-body   { margin:0 0 18px !important; }

/* Text colour on dark sections — Divi won't inherit reliably.
   Hero variants are dark too, so they get the same on-dark treatment. */
.vz-sec-dark h1, .vz-sec-dark h2, .vz-sec-dark h3,
.vz-sec-navy h1, .vz-sec-navy h2, .vz-sec-navy h3,
.vz-sec-hero h1, .vz-sec-hero h2, .vz-sec-hero h3,
.vz-sec-hero-purple h1, .vz-sec-hero-purple h2, .vz-sec-hero-purple h3 { color:var(--vz-onDark-1) !important; }
.vz-sec-dark p, .vz-sec-navy p,
.vz-sec-hero p, .vz-sec-hero-purple p { color:var(--vz-onDark-3); }
.vz-sec-dark .vz-lead p, .vz-sec-navy .vz-lead p,
.vz-sec-hero .vz-lead p, .vz-sec-hero-purple .vz-lead p { color:var(--vz-onDark-2); }

/* Mobile scale-down — MUST use the same .et_pb_text.vz-* specificity as the
   desktop rules above, or the 76px desktop size wins on phones (which caused the
   H1 to overflow and break mid-word). word-break:normal keeps words intact. */
.et_pb_text.vz-h1 h1, .et_pb_text.vz-h2 h2 { word-break:normal; overflow-wrap:break-word; }
@media (max-width:980px) {
  .et_pb_text.vz-h1 h1, .et_pb_text.vz-h1 { font-size:44px !important; }
  .et_pb_text.vz-h2 h2, .et_pb_text.vz-h2 { font-size:34px !important; }
  .et_pb_text.vz-lead, .et_pb_text.vz-lead p { font-size:18px !important; }
}
@media (max-width:767px) {
  /* reclaim the 56px side padding that cramps the hero on phones — widens the H1
     column (stops mid-word breaks) and makes the hero image bigger */
  .vz-sec-hero, .vz-sec-hero-purple { padding-left:24px !important; padding-right:24px !important; }
}
@media (max-width:479px) {
  .et_pb_text.vz-h1 h1, .et_pb_text.vz-h1 { font-size:30px !important; }
  .et_pb_text.vz-h2 h2, .et_pb_text.vz-h2 { font-size:27px !important; }
}

/* --------------------------------------------------------------------------
   3. BUTTONS
   Apply to a Divi Button module. Turn OFF "Use Custom Styles for Button"
   in the module so these rules win cleanly.
   -------------------------------------------------------------------------- */
.vz-btn .et_pb_button,
a.vz-btn.et_pb_button {
  font-family:var(--vz-sans) !important; font-weight:700 !important;
  font-size:17px !important; letter-spacing:0 !important;
  padding:18px 32px !important; border-radius:2px !important; border:none !important;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.vz-btn .et_pb_button:after, a.vz-btn.et_pb_button:after { display:none !important; }

/* NOTE: Divi applies module_class to the <a class="et_pb_button"> element itself,
   so every colour/variant rule needs BOTH a descendant form (…-yellow .et_pb_button)
   and a same-element compound form (a.…-yellow.et_pb_button). Keep both. */

.vz-btn-yellow .et_pb_button,
a.vz-btn-yellow.et_pb_button { background:var(--vz-yellow) !important; color:var(--vz-navy-deep) !important; }
.vz-btn-yellow .et_pb_button:hover,
a.vz-btn-yellow.et_pb_button:hover { background:#FFE95C !important; }

.vz-btn-teal .et_pb_button,
a.vz-btn-teal.et_pb_button { background:var(--vz-teal) !important; color:#fff !important; }
.vz-btn-teal .et_pb_button:hover,
a.vz-btn-teal.et_pb_button:hover { background:#02C39A !important; color:#04202B !important; }

.vz-btn-mint .et_pb_button,
a.vz-btn-mint.et_pb_button { background:var(--vz-mint) !important; color:#04202B !important; }

.vz-btn-purple .et_pb_button,
a.vz-btn-purple.et_pb_button { background:var(--vz-purple-lt) !important; color:#fff !important; }
.vz-btn-purple .et_pb_button:hover,
a.vz-btn-purple.et_pb_button:hover { background:var(--vz-purple) !important; }

.vz-btn-dark .et_pb_button,
a.vz-btn-dark.et_pb_button { background:var(--vz-navy-deep) !important; color:var(--vz-yellow) !important; }

/* Outline button on a dark background — visible grey outline */
.vz-btn-ghost .et_pb_button,
a.vz-btn-ghost.et_pb_button {
  background:transparent !important; color:#EAF1F4 !important;
  border:1px solid rgba(195,210,219,.45) !important; font-weight:600 !important;
}
.vz-btn-ghost .et_pb_button:hover,
a.vz-btn-ghost.et_pb_button:hover { border-color:var(--vz-mint) !important; color:var(--vz-mint) !important; }

/* Outline button on a light/yellow background — navy outline, visible on both. */
.vz-btn-ghost-dark .et_pb_button,
a.vz-btn-ghost-dark.et_pb_button {
  background:transparent !important; color:var(--vz-ink) !important;
  border:1px solid rgba(10,21,36,.4) !important; font-weight:600 !important;
}

/* Pill variant — use on the light "Bright Instrument" pages */
.vz-btn-pill .et_pb_button,
a.vz-btn-pill.et_pb_button { border-radius:999px !important; }

/* Hero CTAs sit inline (side by side), matching the design, instead of stacking. */
.vz-sec-hero .et_pb_button_module_wrapper,
.vz-sec-hero-purple .et_pb_button_module_wrapper { display:inline-block; margin:6px 12px 6px 0 !important; }

/* Vertically centre the hero's two columns (text + diagram), matching the design. */
.vz-sec-hero > .et_pb_row,
.vz-sec-hero-purple > .et_pb_row { display:flex !important; flex-wrap:wrap; align-items:center !important; }

/* Put "vz-inline-btns" on a COLUMN to make its buttons sit side by side. */
.vz-inline-btns .et_pb_button_module_wrapper { display:inline-block !important; margin:6px 12px 6px 0 !important; }

/* Outline "→" CTA link inside strips/panels (Text-module CTAs) — fills on hover. */
.vz-freebtn { transition:background .18s ease, color .18s ease, border-color .18s ease; }
.vz-freebtn:hover { background:var(--vz-yellow) !important; color:var(--vz-navy-deep) !important; border-color:var(--vz-yellow) !important; }

/* Hero vertical rhythm — the design leaves generous space between blocks; Divi's
   defaults squish them, so set explicit spacing (overrides the margin:0 above). */
.vz-sec-hero .et_pb_text.vz-eyebrow,
.vz-sec-hero-purple .et_pb_text.vz-eyebrow { margin-bottom:22px !important; }
.vz-sec-hero .et_pb_text.vz-h1,
.vz-sec-hero-purple .et_pb_text.vz-h1 { margin-bottom:30px !important; }
.vz-sec-hero .et_pb_text.vz-lead,
.vz-sec-hero-purple .et_pb_text.vz-lead { margin-bottom:36px !important; }

/* Ghost outline — Divi's global button style overrides border-color with an
   ID-level selector (#page-container .et_pb_button), which beats plain classes
   even with !important. Match that ID specificity so the outline shows. */
#page-container a.vz-btn-ghost.et_pb_button,
#et-boc a.vz-btn-ghost.et_pb_button {
  border:1px solid rgba(195,210,219,.45) !important;
  border-color:rgba(195,210,219,.45) !important;
}
#page-container a.vz-btn-ghost.et_pb_button:hover,
#et-boc a.vz-btn-ghost.et_pb_button:hover {
  border-color:var(--vz-mint) !important; color:var(--vz-mint) !important;
}
/* Same ID-level override for the light-background ghost variant. */
#page-container a.vz-btn-ghost-dark.et_pb_button,
#et-boc a.vz-btn-ghost-dark.et_pb_button {
  border:1px solid rgba(10,21,36,.4) !important;
  border-color:rgba(10,21,36,.4) !important;
}

/* --------------------------------------------------------------------------
   4. CARDS AND PANELS
   Apply to a Divi COLUMN (Advanced > CSS Class) or a Blurb/Text module.
   -------------------------------------------------------------------------- */
.vz-card {
  background:#fff; padding:32px 28px; height:100%;
  border-top:3px solid var(--vz-teal);
}
.vz-card-purple { border-top-color:var(--vz-purple); }
.vz-card-mint   { border-top-color:var(--vz-mint); }
.vz-card-yellow { border-top-color:var(--vz-yellow); }

/* Vertical rhythm INSIDE cards (number -> title -> description). Cards hold
   their content in one Text module, so space the inner block elements directly.
   Higher specificity than the plain classes so Divi's cached snapshot can't win. */
.vz-card .et_pb_text_inner > *, .vz-card-dark .et_pb_text_inner > * { margin:0 0 14px !important; }
.vz-card .et_pb_text_inner > *:last-child, .vz-card-dark .et_pb_text_inner > *:last-child { margin-bottom:0 !important; }
/* Card titles are smaller than section H3s so they don't wrap awkwardly. */
.vz-card h3, .vz-card .vz-h3, .vz-card-dark h3, .vz-card-dark .vz-h3 { font-size:20px !important; line-height:1.25 !important; }
.vz-card .vz-num, .vz-card-dark .vz-num { display:block; }

/* Card sitting on a dark section */
.vz-card-dark {
  background:rgba(255,255,255,.04); padding:34px 30px; height:100%;
  border-top:3px solid var(--vz-teal); color:var(--vz-onDark-3);
}
.vz-card-dark strong, .vz-card-dark h3, .vz-card-dark h4 { color:#fff !important; }

/* Rounded card — light pages only */
.vz-card-soft { background:var(--vz-mist); border-radius:10px; padding:32px; height:100%; }

/* Inset accent panel — the "callout" treatment used throughout */
.vz-callout {
  padding:24px 28px; background:rgba(2,195,154,.10);
  border-left:2px solid var(--vz-mint);
}
.vz-callout-red    { background:rgba(192,57,43,.08);  border-left-color:var(--vz-red); }
.vz-callout-purple { background:rgba(139,92,240,.12); border-left-color:var(--vz-purple-lt); }
.vz-callout-yellow { background:rgba(248,216,16,.10); border-left-color:var(--vz-yellow); }
.vz-callout-light  { background:#DFF2EE; border-left:3px solid var(--vz-mint); color:#204A44; }

/* Dashed "start free / VizzEx Basic" strip */
.vz-freebar {
  padding:26px 36px; border:1px dashed rgba(255,255,255,.24);
  background:rgba(255,255,255,.03);
}
.vz-sec-light .vz-freebar, .vz-sec-white .vz-freebar {
  border-color:#A9BCC7; background:#fff;
}

/* Hairline divider grid — put on a Divi ROW to get 1px gaps between columns */
.vz-hairline-row .et_pb_column { background:var(--vz-navy); }
.vz-hairline-row {
  background:var(--vz-line-dark);
  display:grid !important; grid-gap:1px; border:1px solid var(--vz-line-dark);
}

/* --------------------------------------------------------------------------
   5. STATS AND DATA
   -------------------------------------------------------------------------- */
.vz-stat-num {
  font-family:var(--vz-mono) !important; font-weight:600 !important;
  font-size:56px !important; line-height:.9 !important; letter-spacing:-.03em;
  color:var(--vz-teal);
}
.vz-sec-dark .vz-stat-num, .vz-sec-navy .vz-stat-num,
.vz-sec-hero .vz-stat-num, .vz-sec-hero-purple .vz-stat-num { color:var(--vz-yellow); }
.vz-stat-label {
  font-family:var(--vz-mono) !important; font-size:11px !important;
  letter-spacing:.2em; text-transform:uppercase; color:var(--vz-onDark-4);
}

/* Big numbered step, e.g. the "Five levels" rows */
.vz-step-num {
  font-family:var(--vz-mono) !important; font-weight:600 !important;
  font-size:56px !important; line-height:.9 !important; color:var(--vz-teal);
}

/* Five-levels row — apply to the ROW; each row gets 3 columns (num / copy / list) */
.vz-level-row { background:#fff; padding:44px !important; border-left:4px solid var(--vz-teal); }
.vz-level-row-featured {
  background:var(--vz-navy) !important; border-left-color:var(--vz-yellow);
  color:var(--vz-onDark-2);
}
.vz-level-row-featured .vz-step-num { color:var(--vz-yellow); }

/* Connectivity Score tiers */
.vz-tier { padding:22px 26px; border-left:3px solid; margin-bottom:12px; }
.vz-tier strong { color:#fff; font-size:19px; }
.vz-tier-isolated  { background:rgba(192,57,43,.12);  border-left-color:var(--vz-red); }
.vz-tier-emerging  { background:rgba(248,216,16,.10); border-left-color:var(--vz-yellow); }
.vz-tier-connected { background:rgba(2,128,144,.16);  border-left-color:var(--vz-teal); }
.vz-tier-hub       { background:rgba(2,195,154,.18);  border-left-color:var(--vz-mint); }

/* Horizontal bar chart (citation half-life). Markup in the guide. */
.vz-bar-track { flex:1; height:22px; background:var(--vz-line-light); border-radius:2px; overflow:hidden; }
.vz-bar-fill  { display:block; height:100%; background:var(--vz-teal); }
.vz-bar-fill.is-avg  { background:var(--vz-mint); }
.vz-bar-fill.is-warn { background:var(--vz-red); }

/* --------------------------------------------------------------------------
   6. IMAGERY
   -------------------------------------------------------------------------- */
/* Product screenshot treatment — apply to a Divi Image module */
.vz-shot img {
  border-radius:6px; display:block; width:100%;
  box-shadow:0 34px 80px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
}
.vz-sec-light .vz-shot img, .vz-sec-white .vz-shot img {
  border-color:#DCE5EA; box-shadow:0 24px 60px rgba(14,27,46,.16);
}
.vz-shot-float img { animation:vzDrift 8s ease-in-out infinite; }

/* Cropped product screenshot — shows the top of a tall dashboard, matching the
   design (the raw image is much taller). Add "vz-shot-crop" alongside vz-shot. */
.vz-shot-crop, .vz-shot-crop .et_pb_image_wrap { max-height:560px !important; overflow:hidden !important; border-radius:6px; display:block; }
.vz-shot-crop img { display:block; width:100%; box-shadow:none !important; border:none !important; border-radius:0 !important; }

/* Row helper — a hairline divider line above a row (the row's own top padding,
   set in the layout, provides the gap; this just draws the line). */
.vz-row-divider { border-top:1px solid rgba(255,255,255,.12) !important; }
.vz-sec-light .vz-row-divider, .vz-sec-white .vz-row-divider { border-top-color:var(--vz-line-light) !important; }

/* Striped placeholder — use on an empty Divi Code/Text module while you wait
   for real photography. Set a min-height in the module. */
.vz-placeholder {
  display:flex; align-items:center; justify-content:center;
  min-height:400px; border:1px solid rgba(255,255,255,.12);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px);
  font-family:var(--vz-mono); font-size:12px; letter-spacing:.16em;
  color:var(--vz-onDark-4); text-align:center;
}
.vz-sec-light .vz-placeholder, .vz-sec-white .vz-placeholder {
  border-color:#DCE5EA; color:#8398A6;
  background:repeating-linear-gradient(135deg,#E6EEF1 0 12px,#EFF4F6 12px 24px);
}

/* --------------------------------------------------------------------------
   7. FAQ (Divi Accordion / Toggle)
   -------------------------------------------------------------------------- */
.vz-faq .et_pb_toggle {
  background:transparent !important; border:none !important;
  border-bottom:1px solid var(--vz-line-dark) !important;
  padding:26px 0 !important; margin:0 !important;
}
.vz-faq .et_pb_toggle_title {
  font-family:var(--vz-sans) !important; font-weight:600 !important;
  font-size:19px !important; color:#fff !important; padding:0 40px 0 0 !important;
}
.vz-faq .et_pb_toggle_content {
  font-size:16px !important; line-height:1.7 !important;
  color:var(--vz-onDark-3) !important; padding-top:14px !important;
}
.vz-faq .et_pb_toggle_title:before { color:var(--vz-mint) !important; }

/* --------------------------------------------------------------------------
   8. FORMS (Divi Contact Form)
   -------------------------------------------------------------------------- */
/* Works for BOTH Divi's contact form (.et_pb_contact_field) and generic forms
   like Genoo (plain input/textarea/select). Put "vz-form" on the module or the
   column that wraps the form. */
.vz-form .et_pb_contact_field input,
.vz-form .et_pb_contact_field textarea,
.vz-form input[type="text"], .vz-form input[type="email"], .vz-form input[type="tel"],
.vz-form input[type="url"], .vz-form input[type="number"], .vz-form textarea, .vz-form select {
  background:var(--vz-navy-black) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#EAF1F4 !important; font-family:var(--vz-sans) !important;
  font-size:16px !important; padding:15px 16px !important; border-radius:2px !important;
  width:100% !important; box-sizing:border-box !important; max-width:100% !important;
}
.vz-form .et_pb_contact_field input:focus, .vz-form .et_pb_contact_field textarea:focus,
.vz-form input:focus, .vz-form textarea:focus, .vz-form select:focus { border-color:var(--vz-mint) !important; outline:none !important; }
.vz-form ::placeholder { color:#5A6E7E !important; }
.vz-form label { color:var(--vz-onDark-4) !important; font-family:var(--vz-mono) !important;
  font-size:11px !important; letter-spacing:.14em; text-transform:uppercase; }
.vz-form .et_pb_contact_submit,
.vz-form button[type="submit"], .vz-form input[type="submit"], .vz-form .genoo-submit, .vz-form button.button {
  background:var(--vz-yellow) !important; color:var(--vz-navy-deep) !important;
  border:none !important; border-radius:2px !important;
  font-family:var(--vz-sans) !important; font-weight:700 !important;
  font-size:17px !important; padding:18px 36px !important; cursor:pointer !important; width:auto !important;
}
.vz-form .et_pb_contact_submit:after { display:none !important; }

/* --- Genoo form dark theme (Contact). Put "vz-form" on the column. --------- */
.vz-form .gn-form, .vz-form .genooForm, .vz-form .gn-generated, .vz-form .genooGuts { background:transparent !important; }
.vz-form .gn-form .form-control, .vz-form .gn-form input.ext-form-input,
.vz-form .gn-form input[type="text"], .vz-form .gn-form input[type="email"],
.vz-form .gn-form input[type="tel"], .vz-form .gn-form textarea {
  background:var(--vz-navy-black) !important; border:1px solid rgba(255,255,255,.14) !important;
  color:#EAF1F4 !important; border-radius:2px !important; box-shadow:none !important;
}
.vz-form .gn-form .form-control:focus,
.vz-form .gn-form textarea:focus { border-color:var(--vz-mint) !important; box-shadow:none !important; outline:none !important; }
.vz-form .gn-form ::placeholder { color:#5A6E7E !important; }
.vz-form .gn-form .control-label, .vz-form .gn-form label {
  color:var(--vz-onDark-3) !important; font-family:var(--vz-mono) !important;
  font-size:14px !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.14em;
  text-align:left !important; display:block !important; margin-bottom:8px !important; }
/* "WHAT'S THIS ABOUT?" header above the pills — match the field-label size */
.vz-form .vz-mono { font-size:14px !important; }
/* rail headings opt into 15px via inline font-size; re-assert over global .vz-mono 12px !important */
.vz-mono[style*="15px"] { font-size:15px !important; }
.vz-form .gn-form .gn-btn, .vz-form .gn-form button[type="submit"] {
  background:var(--vz-yellow) !important; color:var(--vz-navy-deep) !important; border:none !important;
  border-radius:2px !important; font-weight:700 !important; font-family:var(--vz-sans) !important; padding:16px 34px !important; }
.vz-form .gn-form .gn-btn:hover, .vz-form .gn-form button[type="submit"]:hover { background:#FFE95C !important; }
.vz-form .gn-form .help-block, .vz-form .gn-form small, .vz-form .gn-form .gn-form-desc { color:#7E93A2 !important; }
/* hide the raw "What is this about?" text field — the pills drive it */
.vz-form .gn-form .vz-hide-field { display:none !important; }
/* Genoo success message — markup is <div id="genooMsg" class="genooPop">
   <strong class="genooSucess"> (Genoo misspells "Success"). Default text is dark
   navy → invisible on the dark hero, so light it up + style as a mint callout. */
.vz-form #genooMsg:not(:empty) {
  padding:22px 26px !important; margin-top:8px !important; border-left:3px solid var(--vz-mint) !important;
  background:rgba(2,195,154,.1) !important; border-radius:0 2px 2px 0 !important;
}
.vz-form #genooMsg, .vz-form #genooMsg *, .vz-form .genooSucess {
  color:#EAF1F4 !important; font-size:17px !important; line-height:1.6 !important; font-weight:600 !important;
}

/* Genoo 2-column layout to match the design. Fields flow into a 2-col grid;
   Message + the submit row span full width; button right-aligns.
   (Pairs: First|Last, Company|Email, Phone|Your-CMS. Add a "Your CMS" field in
   Genoo to fill the slot beside Phone — the grid pairs it automatically.) */
.vz-form .gn-form .gn-tier-0 { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; }
.vz-form .gn-form .gn-tier-0 > .form-group { float:none !important; width:auto !important; display:block !important; margin:0 0 20px !important; }
.vz-form .gn-form .gn-tier-0 > .form-group:has(textarea) { grid-column:1 / -1; }
.vz-form .gn-form .gn-tier-0 > div:not(.form-group) { grid-column:1 / -1; }
/* bottom row: "We respond…" note (left) + Send button (right), same line */
.vz-form .gn-form .gn-tier-0 > div:has(.gn-btn) { grid-column:2; text-align:right; align-self:center; }
.vz-form .gn-form .gn-tier-0 > div:not(.form-group):not(:has(.gn-btn)) { grid-column:1; align-self:center; text-align:left; margin:0; }
.vz-form .gn-form .gn-tier-0 > div:not(.form-group):not(:has(.gn-btn)),
.vz-form .gn-form .gn-tier-0 > div:not(.form-group):not(:has(.gn-btn)) * { color:#93A7B4 !important; }
.vz-form .gn-form .gn-tier-0 > div:empty { display:none !important; }
.vz-form .gn-form .form-control { width:100% !important; }
.vz-form .gn-form .gn-btn { width:auto !important; display:inline-block !important; }
.vz-form .gn-form .gn-btn::after { content:" \2192"; margin-left:8px; }
@media (max-width:767px) {
  .vz-form .gn-form .gn-tier-0 { grid-template-columns:1fr; }
  .vz-form .gn-form .gn-tier-0 > div:has(.gn-btn),
  .vz-form .gn-form .gn-tier-0 > div:not(.form-group):not(:has(.gn-btn)) { grid-column:1 / -1 !important; text-align:left; }
}

/* --- Genoo NOTIFY form (Mastery CLOSED hero) --------------------------------
   The live form (id 25480857) is a TWO-STEP Genoo form: step 1 = a radio question
   ("What is Your Top AI Visibility Challenge") + Continue; step 2 = First/Last/
   Email/Company + "Add My Name To The Waitlist". Wrapper class = "vz-form vz-notify".
   Reuses the .vz-form base (dark inputs, yellow button, success msg) and OVERRIDES
   the Contact page's 2-col grid (.vz-form .gn-form .gn-tier-0 {grid 1fr 1fr}) which
   otherwise squeezes this form into the left half of the card. Verified live on
   /vzx-aivm (both steps). */
/* single column, full width — kill the Contact 2-col grid on BOTH step tiers */
.vz-notify .gn-form .gn-tier-0 { display:block !important; grid-template-columns:none !important; }
.vz-notify .gn-form .gn-tier-0 > .form-group,
.vz-notify .gn-form .form-group { width:100% !important; display:block !important; float:none !important; margin:0 0 18px !important; }
.vz-notify .gn-form .gn-tier-0 > div,
.vz-notify .gn-form .gn-tier-0 > label.gn-btn { width:100% !important; text-align:left !important; }
/* text inputs: full width, translucent navy over the purple card */
.vz-notify .gn-form .gn-field-container input[type="text"],
.vz-notify .gn-form .gn-field-container input[type="email"],
.vz-notify .gn-form input.form-control, .vz-notify .gn-form input[type="text"], .vz-notify .gn-form input[type="email"] {
  width:100% !important; box-sizing:border-box !important;
  background:rgba(7,17,29,.6) !important; border:1px solid rgba(255,255,255,.16) !important; color:#EAF1F4 !important; }
/* field / question labels: mono uppercase (from base) in readable lavender */
.vz-notify .gn-form .control-label { color:#C9BEEA !important; font-size:13px !important; margin-bottom:10px !important; }
/* radio question (step 1): readable rows, bright option text, yellow accent */
.vz-notify .gn-form .checkbox-control > div { display:flex !important; align-items:flex-start; gap:12px; margin:0 0 12px !important; }
.vz-notify .gn-form .checkbox-control input[type="radio"] { flex:0 0 auto; width:18px; height:18px; margin:2px 0 0 !important; accent-color:var(--vz-yellow); cursor:pointer; }
.vz-notify .gn-form .checkbox-control span { color:#EAF1F4 !important; font-size:16px !important; line-height:1.45 !important; }
.vz-notify .gn-form .checkbox-control br { display:none !important; }
/* buttons — Continue (a label.gn-btn) + Waitlist submit: full-width yellow */
.vz-notify .gn-form .gn-btn, .vz-notify .gn-form label.gn-btn, .vz-notify .gn-form button[type="submit"] {
  width:100% !important; display:block !important; text-align:center !important; padding:16px !important;
  background:var(--vz-yellow) !important; color:var(--vz-navy-deep) !important; border:none !important;
  border-radius:2px !important; font-weight:700 !important; cursor:pointer !important; margin-top:6px !important; }
/* "BE FIRST IN LINE" attention pulse — the "Get notified" button JS adds .vz-attn.
   3 soft yellow glow flashes, settles back to lavender. ~1.6/sec, well under the
   photosensitivity threshold. Reduced-motion users get a brief static highlight. */
@keyframes vzHeadAttn {
  0%, 33%, 66%, 100% { color:#B9A6F0; text-shadow:none; }
  16%, 50%, 83%      { color:var(--vz-yellow); text-shadow:0 0 20px rgba(248,216,16,.65); }
}
.vz-notify-head.vz-attn { animation:vzHeadAttn 1.8s ease-in-out both; }
@media (prefers-reduced-motion: reduce) {
  .vz-notify-head.vz-attn { animation:none; color:var(--vz-yellow); text-shadow:0 0 14px rgba(248,216,16,.5); }
}
/* Contact "Select Press or research on the form" cue → glow the pills/form area to draw
   the eye (desktop especially). JS toggles .vz-attn-box on click. */
@keyframes vzBoxAttn { 0%,100% { box-shadow:none; } 30%,70% { box-shadow:0 0 0 3px rgba(248,216,16,.55); } }
.vz-attn-box { animation:vzBoxAttn 1.5s ease-in-out; border-radius:6px; }
@media (prefers-reduced-motion: reduce) { .vz-attn-box { animation:none; box-shadow:0 0 0 3px rgba(248,216,16,.45); } }

/* --- Reason pills (Contact "What's this about?") — selectable chips -------- */
.vz-pill { display:inline-block; padding:12px 20px; margin:0 10px 10px 0; border-radius:2px; font-size:15px;
  font-weight:600; cursor:pointer; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
  color:#B4C4CE; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.vz-pill:hover { border-color:rgba(2,195,154,.5); color:#fff; }
.vz-pill.is-selected { background:var(--vz-mint) !important; border-color:var(--vz-mint) !important; color:#04202B !important; }
/* Contextual helper callout under the pills (created by the functions.php script) */
.vz-pill-help { margin:6px 0 2px; padding:18px 22px; border-left:3px solid var(--vz-mint);
  background:rgba(2,195,154,.08); color:#CFE3E0; font-size:16px; line-height:1.55; border-radius:0 2px 2px 0; }
/* FAQ links in the Contact right rail */
.vz-faq-link { transition:color .15s ease; }
.vz-faq-link:hover { color:var(--vz-mint) !important; }

/* --- Pricing platform selector — shortcode [vzx_pricing_widget] ------------- */
/* self-contained labeled box so it reads the same wherever it's placed */
.vzx-pricing { max-width:580px; padding:26px 30px; border:1px solid rgba(2,195,154,.32);
  background:linear-gradient(140deg,rgba(2,128,144,.26),transparent); border-radius:2px; }
.vzx-pricing-label { display:block; font-family:var(--vz-mono); font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vz-mint); margin-bottom:16px; }
.vzx-pricing-pills { display:flex; gap:10px; margin-bottom:14px; }
.vzx-pricing-pill { flex:1; text-align:center; padding:15px 12px; font-size:16px; font-weight:600;
  font-family:var(--vz-sans); cursor:pointer; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:2px;
  transition:background .15s ease, border-color .15s ease, color .15s ease; }
.vzx-pricing-pill:hover { border-color:rgba(2,195,154,.55); }
.vzx-pricing-pill.is-selected { background:var(--vz-mint); border-color:var(--vz-mint); color:#04202B; }
.vzx-pricing-go { display:inline-block; padding:16px 32px; background:var(--vz-yellow);
  color:var(--vz-navy-deep) !important; font-family:var(--vz-sans); font-weight:700; font-size:16px;
  border-radius:2px; text-decoration:none; cursor:pointer; border:none; }
.vzx-pricing-go:hover { background:#FFE95C; color:var(--vz-navy-deep) !important; }
.vzx-pricing-msg { margin:12px 0 0; font-size:14px; color:#E07B6D; display:none; }
/* light variant — on the yellow CTA section */
.vzx-pricing--light { border-color:rgba(10,21,36,.28); background:rgba(10,21,36,.05); }
.vzx-pricing--light .vzx-pricing-label { color:var(--vz-navy-deep); }
.vzx-pricing--light .vzx-pricing-pill { background:rgba(10,21,36,.06); border-color:rgba(10,21,36,.3); color:#0A1524; }
.vzx-pricing--light .vzx-pricing-pill:hover { border-color:var(--vz-navy-deep); }
.vzx-pricing--light .vzx-pricing-pill.is-selected { background:var(--vz-navy-deep); border-color:var(--vz-navy-deep); color:#fff; }
.vzx-pricing--light .vzx-pricing-go { background:var(--vz-navy-deep); color:#fff !important; }
.vzx-pricing--light .vzx-pricing-go:hover { background:#14304C; color:#fff !important; }
.vzx-pricing--light .vzx-pricing-msg { color:#8A2415; }

/* --------------------------------------------------------------------------
   9. HEADER / FOOTER (Divi Theme Builder)
   -------------------------------------------------------------------------- */
.vz-nav { background:var(--vz-navy-deep) !important; border-bottom:1px solid rgba(255,255,255,.08); }
.vz-nav .et_pb_menu__menu > nav > ul > li > a {
  font-family:var(--vz-sans) !important; font-size:15px !important;
  font-weight:500 !important; color:#B4C4CE !important;
}
.vz-nav .et_pb_menu__menu > nav > ul > li > a:hover { color:#fff !important; opacity:1 !important; }
.vz-nav .current-menu-item > a {
  color:var(--vz-yellow) !important; border-bottom:2px solid var(--vz-yellow); padding-bottom:3px;
}
/* Live default Divi header (#top-menu): hover = white. Divi has no native hover-color
   field (its default is only opacity:0.7); opacity:1 cancels that fade. At-rest + active
   colors are set elsewhere (design + Theme Customizer). The .vz-nav rules above are inert
   here because the live header is the default Divi header, not an et_pb_menu module. */
#top-menu li > a:hover { color:#fff !important; opacity:1 !important; }
.vz-footer { background:var(--vz-navy-black) !important; color:#5A6E7E; }

/* --- Mobile: collapse the design's inline multi-column grids to ONE column -----
   The decoded design HTML uses inline `grid-template-columns` with no breakpoint, so
   on phones the 2/4-col grids (FAQ Q&A, "the math" label|body, feature lists, pricing
   card, how-it-works steps) stay multi-column and squish text into tiny columns.
   Targets ONLY inline-grid elements (Divi's own modules never inline this property),
   so it's safe site-wide. Verified on /pricing-wordpress mobile (FAQ + the-math). */
@media (max-width:767px) {
  [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  /* the design's CTA/pricing rows are flex with justify-content:space-between + a
     min-width:340px button column, which don't wrap on phones and overflow the screen.
     Wrap those rows and drop inline min-widths so columns stack full-width instead. */
  [style*="justify-content:space-between"] { flex-wrap:wrap !important; }
  [style*="min-width"] { min-width:0 !important; }
  /* About page (hand-authored flex cards): its numbered cards (number|title|body) and
     founder/mission rows use fixed flex-basis columns with no wrap, so they overflow on
     phones. Wrap those rows and let the fixed columns collapse so they stack. */
  [style*="display:flex"][style*="gap:40px"] { flex-wrap:wrap !important; gap:14px !important; }
  [style*="display:flex"][style*="gap:56px"] { flex-wrap:wrap !important; gap:24px !important; }
  [style*="flex:0 0 300px"] { flex:1 1 auto !important; }
  [style*="flex:0 0 340px"], [style*="flex:1 1 460px"],
  [style*="flex:1 1 300px"], [style*="flex:2 1 440px"],
  [style*="calc(50% - 10px)"] { flex:1 1 100% !important; }
  /* Founder rows: portrait/card first on mobile so Carolyn's section (portrait is the
     2nd child on desktop, right-side) matches Kim's (portrait shows on top). */
  [style*="flex:0 0 340px"] { order:-1 !important; }
  /* Mastery page: instructor cards (portrait|text, fixed flex:0 0 240px portrait) and
     the curriculum phase rows (align-items:baseline) — wrap so the portrait/title stack. */
  [style*="display:flex"][style*="border:1px solid rgba(255,255,255,.12)"] { flex-wrap:wrap !important; }
  [style*="flex:0 0 240px"] { flex:1 1 100% !important; }
  [style*="display:flex"][style*="align-items:baseline"] { flex-wrap:wrap !important; }
  /* Headings use fixed inline font-sizes with no mobile scaling. Scale the big hero /
     section sizes down on phones so they stay readable (e.g. the 74px About H1 was
     swallowing the screen). Still prominent — just phone-appropriate. */
  [style*="font-size:74px"], [style*="font-size:72px"],
  [style*="font-size:68px"], [style*="font-size:64px"] { font-size:40px !important; }
  [style*="font-size:58px"], [style*="font-size:56px"] { font-size:36px !important; }
  [style*="font-size:48px"], [style*="font-size:46px"] { font-size:38px !important; }
}
.vz-footer a { color:#7E93A2 !important; }
.vz-footer a:hover { color:var(--vz-mint) !important; }

/* --------------------------------------------------------------------------
   10. ANIMATION
   -------------------------------------------------------------------------- */
@keyframes vzPulse { 0%,100% { opacity:.3; transform:scale(1); } 50% { opacity:1; transform:scale(1.25); } }
@keyframes vzDrift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes vzSweep { 0% { transform:translateX(-100%); } 100% { transform:translateX(300%); } }

/* Standalone dot element (kept for completeness). NOTE: Divi strips EMPTY inline
   elements from module content, so an empty <span class="vz-livedot"></span> will
   disappear. Prefer .vz-live below for anything authored inside a Divi module. */
.vz-livedot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--vz-mint); animation:vzPulse 2.4s ease-in-out infinite;
  margin-right:10px; vertical-align:middle;
}

/* Live dot as a REAL character in the HTML — keeps source HTML and rendered DOM
   symmetric (nothing injected by CSS), which matters for AI/crawler parsing.
   Usage inside an eyebrow: <span class="vz-dot">&#9679;</span>THE CHALLENGE
   The &#9679; (●) glyph IS the dot; we just colour + pulse it. */
.vz-dot {
  color:var(--vz-mint); font-size:.85em; line-height:1; margin-right:8px;
  vertical-align:middle; display:inline-block;
  animation:vzPulse 2.4s ease-in-out infinite;
}
.vz-dot-purple { color:var(--vz-purple-pale); }

/* Legacy pseudo-element variant (CSS-injected — avoid where HTML/DOM symmetry
   matters; kept only for backward compatibility). */
.vz-live::before {
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--vz-mint); margin-right:10px; vertical-align:middle;
  animation:vzPulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce) {
  .vz-livedot, .vz-dot, .vz-live::before, .vz-shot-float img { animation:none !important; }
}

/* Pull quote — the theme's default blockquote adds an off-brand blue left bar;
   retheme it to brand yellow with padding between the bar and the text. */
.vz-sec-dark blockquote, .vz-sec-navy blockquote, .vz-sec-hero blockquote {
  border-left:3px solid var(--vz-yellow) !important;
  border-right:0 !important; border-bottom:0 !important;
  padding-left:24px !important;
}

/* --------------------------------------------------------------------------
   12. PAGE LAYOUT HELPERS
   Small reusable classes for the compact data bits inside Code modules on the
   built pages (hero stat row, product chips, decay numeral, problem cards).
   -------------------------------------------------------------------------- */
.vz-hero-stats {
  display:flex; flex-wrap:wrap; gap:36px;
  margin-top:20px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
}
.vz-stat { display:flex; flex-direction:column; gap:4px; }
.vz-stat b {
  font-family:var(--vz-mono); font-weight:600; font-size:30px; color:var(--vz-yellow);
}
.vz-stat span { font-size:13px; color:var(--vz-onDark-4); }

.vz-chips { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.vz-chip { display:flex; flex-direction:column; gap:6px; padding:22px; background:rgba(255,255,255,.12); border-radius:4px; }
.vz-chip b { font-family:var(--vz-mono); font-weight:600; font-size:26px; color:var(--vz-yellow); }
.vz-chip span { font-size:14px; color:rgba(255,255,255,.85); }
@media (max-width:980px){ .vz-chips { grid-template-columns:repeat(2,1fr); } }

.vz-decay-num {
  font-family:var(--vz-mono) !important; font-weight:600 !important;
  font-size:104px !important; line-height:.86 !important; letter-spacing:-.04em; color:#fff !important;
}
.vz-decay-weeks { font-family:var(--vz-mono); font-size:15px; letter-spacing:.28em; opacity:.85; }

/* Problem "noise" card — red-tinted (dark sections) */
.vz-noise-card { display:flex; flex-direction:column; gap:10px; padding:28px; background:rgba(192,57,43,.08); border-left:2px solid var(--vz-red); height:100%; }
.vz-noise-card .vz-tag { font-family:var(--vz-mono); font-size:11px; letter-spacing:.16em; color:#E07B6D; }
.vz-noise-card b { color:#fff; font-size:19px; font-weight:600; }
.vz-noise-card span { font-size:15px; line-height:1.6; color:var(--vz-onDark-3); }
/* THE PROBLEM noise grid is an inline 1fr 1fr grid; each card needs ~180px, so on
   phones two columns overflow the right edge. Collapse to one column on mobile. */
@media (max-width:767px){ div:has(> .vz-noise-card){ grid-template-columns:1fr !important; } }

/* Numbered methodology card number */
.vz-num { font-family:var(--vz-mono) !important; font-size:34px !important; color:var(--vz-teal) !important; font-weight:600 !important; }
.vz-sec-dark .vz-num, .vz-sec-navy .vz-num { color:var(--vz-mint) !important; }

/* --------------------------------------------------------------------------
   11. LINKS
   -------------------------------------------------------------------------- */
a { color:var(--vz-teal); text-decoration:none; }
a:hover { color:var(--vz-mint); }
.vz-sec-dark a, .vz-sec-navy a,
.vz-sec-hero a, .vz-sec-hero-purple a { color:var(--vz-mint); }
.vz-sec-dark a:hover, .vz-sec-navy a:hover,
.vz-sec-hero a:hover, .vz-sec-hero-purple a:hover { color:#fff; }
.vz-link-arrow { font-weight:600; }