/* legacy vizypay.css puts 15px of top padding on the main body container,
   which would show as a white gap under the header */
.body-container-wrapper .body-container { padding-top: 0; }

/* =====================================================================
   STICKY CONTAINMENT — DO NOT REMOVE

   A sticky element can never travel outside its parent's box. HubSpot
   wraps every {% module %} call in a div.hs_cos_wrapper, and base.html
   wraps that in .header-container. Both boxes are exactly as tall as
   the header itself, so sticky had zero distance to travel and the bar
   scrolled away with the page. Diagnosed live: parentH 64, headerH 64.

   display: contents drops those wrapper boxes out of layout without
   removing the elements, so .vzhead's layout parent becomes
   .body-wrapper — which spans the whole page, giving sticky somewhere
   to go.

   Both selectors are scoped to wrappers that actually contain vzhead,
   so no other module or layout is affected. The #id rule is a fallback
   for browsers without :has().
   ===================================================================== */
#hs_cos_wrapper_vzhead { display: contents; }
.hs_cos_wrapper:has(> .vzhead),
.header-container:has(.vzhead) { display: contents; }

.vzhead {
  /* brand palette — do not substitute */
  --vz-green: #81b338;
  --vz-green-dk: #6e9830;
  --vz-black: #191414;
  --vz-white: #FFFFFF;
  --vz-grey: #f4f4f4;
  --vz-body: rgba(25, 20, 20, .72);
  --vz-muted: rgba(25, 20, 20, .55);
  --vz-line: rgba(25, 20, 20, .12);

  /* ROUND 3 — the phone bar was removed from the markup. --bar-h is
     kept at 0 rather than deleted because the drawer's top padding is
     computed from it; leaving it defined means that calc still reads
     correctly and the bar can be restored by putting the markup back
     and setting this to 40px. */
  --bar-h: 0px;
  --main-h: 82px;     /* one fixed height — no longer shrinks on scroll */

  position: sticky;
  top: 0;
  z-index: 900;
  width: 100%;

  /* =====================================================================
     THE BACKGROUND DELIBERATELY DOES NOT LIVE HERE.

     The frosted glass is painted on .vzhead-main instead, one level
     down. This is a hard constraint, not a preference:

     backdrop-filter (like transform and filter) makes an element the
     CONTAINING BLOCK for every position: fixed descendant.
     .vzhead-drawer is position: fixed and is a child of .vzhead. Put
     backdrop-filter here and the drawer stops resolving against the
     viewport and starts resolving against an 82px-tall header — a
     full-screen mobile menu collapsing into the height of the bar.

     .vzhead-main is not an ancestor of the drawer, so the same
     declaration is harmless there. It is already position: relative
     and already the containing block for the mega panels, so nothing
     else moves.
     ===================================================================== */
  background: transparent;

  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: normal;
  transition: box-shadow .22s ease;
}
.vzhead * { box-sizing: border-box; }

/* ROUND 3 — was a 22px-blurred drop shadow, which against a white page
   read as a fuzzy second white strip below the nav rather than an edge.
   A 1px hairline separates without the smudge, and it holds up now that
   the bar is translucent. */
.vzhead[data-stuck] { box-shadow: 0 1px 0 rgba(25, 20, 20, .10); }

/* ================= main bar ================= */
/* position: relative is load-bearing. The mega panels escape their
   .vzhead-item and position against this instead, which is what lets
   them span the header rather than hang off one nav item.

   z-index is load-bearing too: .vzhead-drawer sets z-index 899, and a
   positioned element with an explicit z-index paints above a positioned
   element with z-index auto no matter how small the number. Without a
   value here the open drawer laid its white background over the whole
   bar — logo and close button included — so the menu could be opened
   and not closed. */
.vzhead .vzhead-main {
  position: relative;
  z-index: 900;
  height: var(--main-h);

  /* ROUND 3 — translucent, frosted. The blur is load-bearing, not
     decoration: 72% white over photography without it turns to mud and
     the nav links stop being legible. saturate() stops colour bleeding
     through from below from going grey. */
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);

  transition: background-color .22s ease;
}

/* ROUND 3 — the header no longer changes size on scroll. Only the
   opacity firms up, so nav text stays readable while content streams
   underneath it. */
.vzhead[data-stuck] .vzhead-main { background: rgba(255, 255, 255, .86); }

/* Older Safari and Firefox builds have no backdrop-filter. They would
   otherwise get flat 72% white with no blur, which is the unreadable
   case. Give them near-solid instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vzhead .vzhead-main { background: rgba(255, 255, 255, .96); }
  .vzhead[data-stuck] .vzhead-main { background: rgba(255, 255, 255, .98); }
}

.vzhead .vzhead-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1420px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.vzhead .vzhead-logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}
.vzhead .vzhead-logo img {
  display: block;
  width: auto;
  height: 38px;
}

/* ---------------- nav ---------------- */
.vzhead .vzhead-nav { flex: 1 1 auto; min-width: 0; }
.vzhead .vzhead-list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vzhead .vzhead-item { position: relative; }

/* A mega panel must not be trapped inside its own item, or it can only
   be as wide as one nav link. Making the item static hands the job of
   containing block up to .vzhead-main. The narrow dropdown style is
   still supported for any item without --mega. */
.vzhead .vzhead-item:has(.vzhead-panel--mega) { position: static; }

.vzhead a.vzhead-link {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 2px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--vz-black) !important;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease;
}
.vzhead a.vzhead-link:hover,
.vzhead .vzhead-item[data-open] > a.vzhead-link { color: var(--vz-green-dk) !important; }

/* caret for items that have a panel */
.vzhead .vzhead-item:has(.vzhead-panel) > a.vzhead-link::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.vzhead .vzhead-item[data-open]:has(.vzhead-panel) > a.vzhead-link::after {
  transform: rotate(225deg);
  margin-top: 2px;
}

/* green underline on the active item.
   ROUND 3: this is positioned against the LINK now, not the item. With
   mega items set to position: static the underline was resolving
   against .vzhead-main and stretching the full width of the header. */
.vzhead a.vzhead-link { position: relative; }
.vzhead a.vzhead-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: var(--vz-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.vzhead .vzhead-item[data-open] > a.vzhead-link::before,
.vzhead a.vzhead-link:hover::before { transform: scaleX(1); }

/* ---------------- panels: narrow (legacy, still supported) ---------------- */
.vzhead .vzhead-panel {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 2;
  min-width: 232px;
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.vzhead .vzhead-item[data-open] > .vzhead-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Panels stay SOLID white on purpose. The bar is translucent; the
   panels sit over body content and carry dense small type, so frosting
   them too would cost legibility for no gain. */
.vzhead .vzhead-panelInner {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--vz-white);
  border: 1px solid var(--vz-line);
  border-radius: 12px;
  box-shadow: 0 22px 50px -24px rgba(25,20,20,.34);
}

.vzhead a.vzhead-sub {
  display: block;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--vz-black) !important;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
  transition: background-color .14s ease, color .14s ease;
}
.vzhead a.vzhead-sub:hover,
.vzhead a.vzhead-sub:focus-visible {
  background: rgba(129,179,56,.12);
  color: var(--vz-green-dk) !important;
  outline: none;
}

/* =====================================================================
   ROUND 3 — MEGA PANELS
   ---------------------------------------------------------------------
   Spans the header rather than hanging off one nav item. left/right 0
   against .vzhead-main; the card inside is capped to the same 1420px
   and 24px gutter as .vzhead-inner so its edges line up with the logo
   and the Login button rather than floating loose.
   ===================================================================== */
.vzhead .vzhead-panel--mega {
  left: 0;
  right: 0;
  min-width: 0;
  padding-top: 8px;
}

.vzhead .vzhead-mega {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0;
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  background: var(--vz-white);
  border: 1px solid var(--vz-line);
  border-radius: 14px;
  box-shadow: 0 26px 60px -26px rgba(25,20,20,.34);
  overflow: hidden;
}

.vzhead .vzhead-megaCols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  padding: 22px 26px 24px;
}

/* Industries uses a three-across grid of short labels instead of two
   columns of described items. */
.vzhead .vzhead-megaGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 18px;
  align-content: start;
  padding: 22px 26px 24px;
}

.vzhead .vzhead-colHead {
  margin: 0 0 10px 8px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vz-muted);
}

/* ---------------- an item inside a mega panel ---------------- */
.vzhead a.vzhead-mi {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color .14s ease;
}
.vzhead a.vzhead-mi:hover,
.vzhead a.vzhead-mi:focus-visible {
  background: rgba(129,179,56,.10);
  outline: none;
}
.vzhead a.vzhead-mi:focus-visible { box-shadow: inset 0 0 0 2px var(--vz-green); }

.vzhead .vzhead-miIcon {
  flex: 0 0 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 8px;
  background: rgba(129,179,56,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .14s ease;
}
.vzhead .vzhead-miIcon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--vz-green-dk);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vzhead a.vzhead-mi:hover .vzhead-miIcon { background: rgba(129,179,56,.22); }

.vzhead .vzhead-miText { min-width: 0; }
.vzhead .vzhead-miText b {
  display: block;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--vz-black);
}
.vzhead .vzhead-miText span {
  display: block;
  margin-top: 2px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--vz-body);
}

/* Industries items carry no description, so they centre on the icon */
.vzhead a.vzhead-mi--tight { align-items: center; }
.vzhead a.vzhead-mi--tight .vzhead-miIcon { margin-top: 0; }

/* the catch-all row at the foot of Industries */
.vzhead a.vzhead-mi--all {
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--vz-line);
  border-radius: 0;
}
.vzhead a.vzhead-mi--all:hover { background: transparent; }
.vzhead a.vzhead-mi--all .vzhead-miText b { color: var(--vz-green-dk); font-size: 13px; }
.vzhead .vzhead-allGo {
  font-size: 14px;
  font-weight: 800;
  color: var(--vz-green-dk);
}

/* ---------------- featured card ---------------- */
.vzhead .vzhead-feat {
  padding: 22px 24px 24px;
  background: #f7f8f6;
  border-left: 1px solid var(--vz-line);
}
.vzhead .vzhead-featHead {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--vz-green);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vz-muted);
}
.vzhead a.vzhead-featCard {
  display: block;
  padding: 16px;
  background: var(--vz-white);
  border: 1px solid var(--vz-line);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.vzhead a.vzhead-featCard:hover {
  border-color: var(--vz-green);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(25,20,20,.4);
}
.vzhead a.vzhead-featCard:focus-visible {
  outline: 2px solid var(--vz-green);
  outline-offset: 2px;
}
.vzhead .vzhead-tag {
  display: inline-block;
  margin-bottom: 9px;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(129,179,56,.16);
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vz-green-dk);
}
.vzhead a.vzhead-featCard b {
  display: block;
  margin-bottom: 5px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--vz-black);
}
.vzhead .vzhead-featP {
  display: block;
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--vz-body);
}
.vzhead .vzhead-featGo {
  display: block;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--vz-green-dk);
}

/* ---------------- login ---------------- */
.vzhead a.vzhead-login {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--vz-black) !important;
  text-decoration: none;
  background: var(--vz-green);
  border-radius: 8px;
  transition: background-color .16s ease, transform .16s ease;
}
.vzhead a.vzhead-login:hover {
  background: var(--vz-green-dk);
  transform: translateY(-1px);
}

/* ---------------- burger ---------------- */
.vzhead button.vzhead-burger {
  display: none;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.vzhead button.vzhead-burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px auto;
  background: var(--vz-black);
  transition: transform .2s ease, opacity .2s ease;
}
.vzhead[data-drawer] .vzhead-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vzhead[data-drawer] .vzhead-burger span:nth-child(2) { opacity: 0; }
.vzhead[data-drawer] .vzhead-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ================= drawer ================= */
/* Stays SOLID white. It covers the whole viewport and is read at arm's
   length on a phone — translucency here would put body copy behind the
   menu links. */
.vzhead .vzhead-drawer {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 899;
  padding-top: calc(var(--bar-h) + var(--main-h));
  background: var(--vz-white);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.vzhead[data-drawer] .vzhead-drawer { opacity: 1; visibility: visible; }

.vzhead .vzhead-drawerInner { padding: 8px 20px 40px; }

.vzhead .vzhead-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--vz-line);
}
.vzhead .vzhead-rowLink {
  display: block;
  padding: 17px 0;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--vz-black) !important;
  text-decoration: none;
}
.vzhead .vzhead-rowPlain { color: var(--vz-black) !important; }

.vzhead button.vzhead-acc {
  position: relative;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
}
.vzhead button.vzhead-acc::before,
.vzhead button.vzhead-acc::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 2px;
  margin: -1px 0 0 -6.5px;
  background: var(--vz-black);
  transition: transform .2s ease;
}
.vzhead button.vzhead-acc::after { transform: rotate(90deg); }
.vzhead .vzhead-row[data-open] button.vzhead-acc::after { transform: rotate(0deg); }

.vzhead .vzhead-accPanel {
  grid-column: 1 / -1;
  display: none;
  padding: 2px 0 14px 4px;
}
.vzhead .vzhead-row[data-open] .vzhead-accPanel { display: block; }
.vzhead .vzhead-accPanel a {
  display: block;
  padding: 11px 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--vz-body) !important;
  text-decoration: none;
}
.vzhead .vzhead-accPanel a:hover { color: var(--vz-green-dk) !important; }

/* Solutions is the one drawer group long enough to need sub-headings,
   so Pricing and Technology do not run together as one list of nine. */
.vzhead .vzhead-accHead {
  margin: 12px 0 2px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vz-muted);
}
.vzhead .vzhead-accHead:first-child { margin-top: 4px; }

.vzhead a.vzhead-drawerLogin {
  display: block;
  margin: 24px 0 0;
  padding: 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: var(--vz-black) !important;
  text-decoration: none;
  background: var(--vz-green);
  border-radius: 10px;
}
.vzhead .vzhead-drawerPhones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}
.vzhead .vzhead-drawerPhones a {
  font-size: 14px;
  font-weight: 600;
  color: var(--vz-muted) !important;
  text-decoration: none;
}

/* ================= breakpoints =================
   ROUND 3: five top-level items instead of nine, so the nav needs far
   less room and this could come down to around 1024. Left at 1180
   deliberately — the mega panels are the wide thing now, not the nav,
   and they want the space more than the links do. Worth revisiting
   once the real content is in and we can see how tall they run. */
@media (max-width: 1180px) {
  .vzhead .vzhead-nav { display: none; }
  .vzhead button.vzhead-burger { display: block; }
  .vzhead .vzhead-drawer { display: block; }
  .vzhead .vzhead-inner { justify-content: space-between; }
  .vzhead a.vzhead-login { margin-left: auto; }
}

/* Between 1181 and about 1300 the featured column squeezes the two
   item columns badly. Dropping it there keeps the items readable; it
   is supporting content, not navigation. */
@media (min-width: 1181px) and (max-width: 1320px) {
  .vzhead .vzhead-mega { grid-template-columns: 1fr; }
  .vzhead .vzhead-feat { display: none; }
}

@media (max-width: 600px) {
  .vzhead { --main-h: 68px; }
  .vzhead .vzhead-logo img { height: 30px; }
  .vzhead a.vzhead-login { padding: 0 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .vzhead,
  .vzhead .vzhead-main,
  .vzhead .vzhead-panel,
  .vzhead a.vzhead-link::before,
  .vzhead a.vzhead-login,
  .vzhead a.vzhead-mi,
  .vzhead .vzhead-miIcon,
  .vzhead a.vzhead-featCard,
  .vzhead .vzhead-drawer { transition: none; }
  .vzhead a.vzhead-login:hover,
  .vzhead a.vzhead-featCard:hover { transform: none; }
}
/* =====================================================================
   REVEAL SAFETY NET — SITE-WIDE, SMALL SCREENS ONLY

   Every rebuilt module hides its content with [data-r] or [data-reveal]
   at opacity 0 and reveals it when its own IntersectionObserver adds a
   class. On a phone those sections are tall relative to the viewport,
   the threshold is frequently not met on load, and the content sits
   there invisible until you scroll.

   This did NOT fix the 60px gap below — it was one of three wrong
   theories about it — but it is kept because it fixes a real, separate
   problem: .vpu and .vpd both declare `[data-r] { opacity: 0 }`
   UNSCOPED, while only `.vpu.is-in [data-r]` reveals. On any page
   carrying two such modules, one can permanently hide the other's
   content.

   THE PROPER FIX, AFTER LAUNCH: scope each module's hiding selector to
   its own wrapper, then delete this block.
   ===================================================================== */
@media (max-width: 900px) {
  [data-r],
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   THE 60px GAP UNDER THE HEADER — MOBILE COMPENSATION

   Measured on the live page at 393px:
       .vzhead bottom      68
       #main-content top  128
       gap                 60

   THIS IS A COMPENSATION. THE CAUSE IS NOT KNOWN.

   Everything below was measured and cleared. Do not re-check it:

     .vzhead            height 68, margin-bottom 0, constant at every
                        scroll position, --bar-h already 0
     #main-content      margin-top 0, padding-top 0
     .header-container  exactly one child, zero height — it has
                        display: contents from the sticky fix above
     .body-wrapper      row-gap: 0 changed nothing, so not a flex gap
     first dnd section  zero padding and margin at both breakpoints,
                        confirmed in the page editor
     hero modules       top padding 30px on mobile, correct

   Sixty pixels sit between two boxes whose every box-model property is
   zero, with nothing between them in the DOM. Whatever creates it is
   outside what a box-model inspection can reach.

   >>> IF SOMEONE FINDS THE REAL SOURCE, DELETE THIS BLOCK IN THE SAME
   >>> CHANGE. Leaving both in place pulls content 60px too far up and
   >>> the header will overlap it.

   SCOPED TO 900px BECAUSE THAT IS WHERE THE MODULES SWITCH TO THEIR
   MOBILE LAYOUTS. The 60px was measured at 393px. If the gap turns out
   to be smaller between 600 and 900, narrow this to (max-width: 600px)
   rather than changing the number — 600 is where --main-h drops to 68,
   and the two are likely related.

   Desktop measures a 14px gap, which reads as spacing rather than a
   hole, and is deliberately left alone.
   ===================================================================== */
@media (max-width: 900px) {
  main#main-content {
    margin-top: -60px;
  }
}
/* ======================================================================
   VZHEAD  ·  SECTION 7  —  TRANSPARENT NAV OVER THE HERO VIDEO
   Append to the END of the vzhead module's CSS pane. Add nothing else.

   ----------------------------------------------------------------------
   WHY THE LAST THREE ATTEMPTS DID NOTHING

   All three edited `vzheadfix`. That module restyles the OLD theme
   header, and this page does not have one. Read off the live preview:

     .custom-header-wrapper   MISSING
     .custom-logo img         MISSING
     .notif-bar               MISSING
     .header-container        found, height 0, background transparent

   The header you actually see is this module — `header.vzhead` — and the
   white bar is one element in it:

     div.vzhead-main   background: rgba(255,255,255,.72)
                       backdrop-filter: saturate(180%) blur(14px)
                       y = 0..82, full width

   Nothing in vzheadfix can reach that, at any specificity, because none
   of its selectors match anything on this page. So the fix belongs here.

   ----------------------------------------------------------------------
   THE TWO STATES

   OVERLAY   html.vzh-hero-overlay            — bar transparent, white
                                                logo, white links, soft
                                                dark scrim for legibility
   SOLID     + html.vzh-past-hero, or a menu   — the bar as it is today
             open, or the pointer in the
             header

   `vzh-hero-overlay` is put on <html> by script when a hero module is on
   the page, so no other page is affected and this whole section is inert
   everywhere else. `vzh-past-hero` is added by the JS append.

   ----------------------------------------------------------------------
   WHY THE HEADER HAS TO LEAVE FLOW

   `.vzhead` is `position: sticky`, which still RESERVES its 82px at the
   top of the page — measured: the hero section begins at y=82 and the
   module read `--vzwf-top: 82px`. Making the bar transparent on its own
   would not have fixed anything: you would have swapped 82px of white bar
   for 82px of whatever is behind it, and `section.vzwf` is white, so the
   white band would still be there.

   `position: fixed` takes the 82px back. The hero then starts at y=0, the
   module measures `--vzwf-top: 0`, its pinned stage takes the whole
   viewport, and the nav floats over the first frame. That is also exactly
   what the module's own `--vzwf-headroom` below 1149px already assumes,
   so desktop and mobile agree without either being told about the other.

   Sticky and fixed behave identically once you have scrolled; the only
   difference is the reserved band at the start, which is the thing we are
   removing.

   ----------------------------------------------------------------------
   WHY SOLID ON SCROLL IS NOT OPTIONAL

   The hero section does not stay dark. The sweep replaces the video with
   a white sheet, and the module marks that moment by putting
   `vzwf-is-set` on `.vzwf`. From then on the top of the screen is white,
   and white nav text on it is invisible. The JS append watches for that
   class and for the section scrolling away, and flips `vzh-past-hero`.

   So: white type only while there is actually video behind it.

   ----------------------------------------------------------------------
   SPECIFICITY, SO NOTHING HERE NEEDS A BLIND !important

   The module's own rules are `.vzhead .vzhead-main` (0,2,0) and
   `.vzhead a.vzhead-link` (0,2,1). Prefixing with `html.vzh-hero-overlay`
   adds a class and an element, so these land at (0,3,1) and (0,3,2) and
   win on weight alone.

   The ONE exception is colour on the links: the module sets
   `color: var(--vz-black) !important`, so only `!important` can beat it.
   That is matched here and nowhere else.

   DO NOT shorten `html.vzh-hero-overlay` to `.vzh-hero-overlay`. It drops
   an element from the count, and the solid-state rules below stop
   outranking the overlay rules they are meant to override.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1. OUT OF FLOW, SO THE VIDEO STARTS AT THE TOP
   ---------------------------------------------------------------------- */
html.vzh-hero-overlay .vzhead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* ----------------------------------------------------------------------
   2. THE BAR ITSELF  —  transparent

   backdrop-filter has to go too, not just the background. A blur with no
   tint still visibly smears the video underneath and reads as a band.

   The transition is on background-color and backdrop-filter so the
   handoff to solid is a fade rather than a snap. The module already
   transitions background-color at .22s; this matches it.
   ---------------------------------------------------------------------- */
html.vzh-hero-overlay .vzhead .vzhead-main {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  transition: background-color .22s ease, backdrop-filter .22s ease,
              -webkit-backdrop-filter .22s ease;
}

/* ----------------------------------------------------------------------
   3. LEGIBILITY SCRIM

   Not a bar: a soft dark fade from the very top that has died out well
   below the header. The hero's first frame changes shot to shot and we
   lightened the hero's own scrim earlier in the build, so white type
   needs a little help on a bright cut.

   z-index -1 keeps it behind the header's own content while staying
   inside .vzhead-main's stacking context, so it sits over the video and
   under the logo and links. pointer-events: none so it can never swallow
   a click on the nav.

   190px rather than exactly 82px on purpose — a gradient that ends on the
   header's own edge draws a visible line there. Running it past the edge
   and fading to nothing hides where it stops.

   DELETE THIS RULE if you want the video completely clean. Everything
   else keeps working; the type just has less help.
   ---------------------------------------------------------------------- */
html.vzh-hero-overlay .vzhead .vzhead-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 190px;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  transition: opacity .22s ease;
  background: linear-gradient(to bottom,
              rgba(25, 20, 20, .52) 0%,
              rgba(25, 20, 20, .26) 46%,
              rgba(25, 20, 20, 0) 100%);
}

/* ----------------------------------------------------------------------
   4. WHITE LOGO

   brightness(0) crushes the mark to solid black, invert(1) flips it to
   solid white. A filter and not an image swap, because CSS cannot change
   an img's src, and painting a replacement behind it fails silently if
   the file does not resolve.

   NOTE: this throws away the green. If you have a proper white-and-green
   wordmark in the File Manager, swapping the src in the HTML pane and
   deleting this rule will look better than a flat white silhouette.
   ---------------------------------------------------------------------- */
html.vzh-hero-overlay .vzhead .vzhead-logo img {
  filter: brightness(0) invert(1);
  transition: filter .22s ease;
}

/* ----------------------------------------------------------------------
   5. WHITE NAV LINKS

   `!important` here only because the module's own rule carries one:
     .vzhead a.vzhead-link { color: var(--vz-black) !important }

   The hover and [data-open] colour is left alone deliberately — it goes
   to --vz-green-dk, which the solid state below restores anyway, and by
   the time you are hovering an item the bar has gone solid.

   The green underline (::before) and the dropdown caret inherit, so they
   turn white with the text at no extra cost.
   ---------------------------------------------------------------------- */
html.vzh-hero-overlay .vzhead a.vzhead-link {
  color: #FFFFFF !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}

/* ----------------------------------------------------------------------
   6. THE LOGIN PILL STAYS GREEN

   #81b338 behind #191414 ink measures 7.33:1, which passes everywhere, so
   the pill needs no change on a dark background — only the inherited text
   shadow stripped, which would otherwise blur the dark text on the green.
   ---------------------------------------------------------------------- */
html.vzh-hero-overlay .vzhead .vzhead-login {
  text-shadow: none !important;
}

/* ----------------------------------------------------------------------
   7. WHITE BURGER

   The three bars are <span>s painted with background-color, so all three
   need overriding or you get one white bar and two dark ones. The shadow
   is for bright video frames, same reason as the link shadow.
   ---------------------------------------------------------------------- */
html.vzh-hero-overlay .vzhead .vzhead-burger span {
  background-color: #FFFFFF;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .45);
  transition: background-color .22s ease;
}

/* ======================================================================
   8. THE SOLID STATE

   Three triggers, one look — the header exactly as it is on every other
   page:

     html.vzh-past-hero        the sweep has laid white over the video, or
                               the hero has scrolled away. Set by the JS
                               append.
     .vzhead:has(... [data-open])
                               a dropdown is open. Its panel is a white
                               card that overlaps the bar by ~13px
                               (measured: panel top y=69, bar bottom
                               y=82), so a transparent bar above a white
                               panel reads as a mistake. `:has()` with a
                               single argument is used by this module
                               already and works; do not add a comma
                               inside it — a selector list in :has() is
                               what silently failed in vzheadfix.
     .vzhead:hover             the pointer is in the header. Covers a
                               click-opened menu too, since the cursor is
                               inside the header either way.

   The background numbers are copied from the module's own .vzhead-main
   rule so the two states cannot drift apart. If you change the bar's
   colour up there, change it here too.
   ====================================================================== */
html.vzh-hero-overlay.vzh-past-hero .vzhead .vzhead-main,
html.vzh-hero-overlay .vzhead:has(.vzhead-item[data-open]) .vzhead-main,
html.vzh-hero-overlay .vzhead:hover .vzhead-main {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
}

/* the scrim fades out rather than cutting, or you see it blink */
html.vzh-hero-overlay.vzh-past-hero .vzhead .vzhead-main::before,
html.vzh-hero-overlay .vzhead:has(.vzhead-item[data-open]) .vzhead-main::before,
html.vzh-hero-overlay .vzhead:hover .vzhead-main::before {
  opacity: 0;
}

html.vzh-hero-overlay.vzh-past-hero .vzhead .vzhead-logo img,
html.vzh-hero-overlay .vzhead:has(.vzhead-item[data-open]) .vzhead-logo img,
html.vzh-hero-overlay .vzhead:hover .vzhead-logo img {
  filter: none;
}

html.vzh-hero-overlay.vzh-past-hero .vzhead a.vzhead-link,
html.vzh-hero-overlay .vzhead:has(.vzhead-item[data-open]) a.vzhead-link,
html.vzh-hero-overlay .vzhead:hover a.vzhead-link {
  color: var(--vz-black) !important;
  text-shadow: none;
}

/* the module's own hover/open colour, put back on top of the line above */
html.vzh-hero-overlay .vzhead a.vzhead-link:hover,
html.vzh-hero-overlay .vzhead .vzhead-item[data-open] > a.vzhead-link {
  color: var(--vz-green-dk) !important;
  text-shadow: none;
}

html.vzh-hero-overlay.vzh-past-hero .vzhead .vzhead-burger span,
html.vzh-hero-overlay .vzhead:has(.vzhead-item[data-open]) .vzhead-burger span,
html.vzh-hero-overlay .vzhead:hover .vzhead-burger span {
  background-color: var(--vz-black);
  box-shadow: none;
}

/* ======================================================================
   9. NO-BACKDROP-FILTER FALLBACK

   The module already has:
     @media not ((backdrop-filter: blur(1px)) or (-webkit-...))
       { .vzhead .vzhead-main { background: rgba(255,255,255,.96) } }

   That rule is (0,2,0) inside a media query and would repaint the bar
   opaque white on a browser without backdrop-filter — putting the white
   bar straight back on exactly the browsers least able to cope with it.
   Overridden here for the overlay state only; the solid state gets the
   .96 fill, which is the right call without a blur to lean on.
   ====================================================================== */
@media not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.vzh-hero-overlay .vzhead .vzhead-main {
    background: transparent;
  }
  html.vzh-hero-overlay.vzh-past-hero .vzhead .vzhead-main,
  html.vzh-hero-overlay .vzhead:has(.vzhead-item[data-open]) .vzhead-main,
  html.vzh-hero-overlay .vzhead:hover .vzhead-main {
    background: rgba(255, 255, 255, .96);
  }
}

/* ======================================================================
   10. REDUCED MOTION
   Colour still changes — that is information, not decoration, and a
   visitor who has asked for less motion still needs to read the nav.
   Only the fades are dropped.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.vzh-hero-overlay .vzhead .vzhead-main,
  html.vzh-hero-overlay .vzhead .vzhead-main::before,
  html.vzh-hero-overlay .vzhead .vzhead-logo img,
  html.vzh-hero-overlay .vzhead .vzhead-burger span {
    transition: none;
  }
}
/* ======================================================================
   SECTION 11  —  NO SIDEWAYS PAN
   Append to the END of the vzhead module's CSS pane, under section 10.

   It goes in this module because this header renders on every page, so
   its stylesheet is the one place a site-wide rule reliably loads. It is
   NOT in vzheadfix: that pane does not reach these pages at all, which
   is what cost us three rounds on the nav.

   ----------------------------------------------------------------------
   WHAT WAS HAPPENING

   Measured on the sandbox preview at a 2020px viewport:

     document.scrollWidth   2547
     document.clientWidth   2020
     overflow               527px of real horizontal scroll

   527px is a lot of slack, which is why a careless swipe threw the whole
   page off centre. It is not a HubSpot preview artifact — the sandbox
   serves the same markup and CSS as production, so it would have shipped.

   ----------------------------------------------------------------------
   THE TWO THINGS CAUSING IT, NEITHER IN THE HERO

   1. `.vzpr-tilt` in the Rotating Cards module  —  387px
      It carries perspective(1500px) rotateX(37deg) with
      transform-origin: 50% 0. A perspective rotation makes the near edge
      BIGGER: the bottom of the card row tips toward the viewer, so a
      1200px grid projects to roughly 1590px on screen. Nothing clips it,
      so that projected width counts toward the document's scroll width.
      Worst at `--p: 0`, which is the state before the card row has
      scrolled into view and flattened out — so the overflow is at its
      maximum exactly when the section is still below the fold and
      invisible.

   2. `.vzll` in the Look Local First module  —  8px
      `width: 100vw` with `margin-left: calc(50% - 50vw)` to go full
      bleed. `100vw` INCLUDES the scrollbar: 2035px against a 2020px
      content box. The module already has `overflow-x: hidden` on itself,
      which hides its own children but does nothing about the box being
      15px too wide in the first place. This is the exact trap the hero
      module avoids by having its JS measure a real `--vw` — and why
      `.vzwf` is not on this list.

   ----------------------------------------------------------------------
   WHY CLIPPING IS THE RIGHT FIX AND NOT A COVER-UP

   Everything spilling past the right edge is ALREADY invisible. The only
   way to see any of it is to pan the page sideways, which is the thing
   being removed. So this changes nothing about how the site looks at any
   width — it removes a gesture, not a pixel.

   Fixing the two causes at source is still worth doing and both are
   listed above with their numbers. This rule means neither is urgent, and
   it also covers anything we have not found yet, on any page, at any
   width — which a week out from launch is worth more than a tidy
   stylesheet.

   ----------------------------------------------------------------------
   WHY `clip` AND NOT `hidden`  —  THIS IS THE WHOLE RULE

   `overflow-x: hidden` on <html> or <body> creates a SCROLL CONTAINER.
   The hero's stage is `position: sticky` and the header is
   `position: fixed`; both resolve against the nearest scrollport, so
   introducing a new one here is exactly how you end up with a sweep that
   will not pin and a nav that scrolls away. That is a far worse bug than
   the one being fixed, and it is the usual reason this fix gets reverted.

   `overflow-x: clip` clips without creating a scroll container, so the
   sticky and fixed behaviour is untouched.

   VERIFIED on the live preview rather than assumed:

     before          scrollWidth 2547 / client 2020, overflow 527
     after           scrollWidth 2020 / client 2020, overflow 0
     stage at top    sticky, y 0..1223          unchanged
     stage mid-sweep sticky, y 0..1223          unchanged
     stage past it   sticky, y -666..557        unpins correctly
     header          fixed,  y 0..82, x 0..2020 unchanged
     forced pan      scrollLeft = 400 -> 0

   ----------------------------------------------------------------------
   NO `overflow-x: hidden` FALLBACK, DELIBERATELY

   `overflow: clip` needs Safari 16 (Sept 2022), Chrome 90, Firefox 81.
   On an older iPhone this rule simply does not apply and the visitor gets
   today's behaviour — a page that can be nudged sideways. That is a
   cosmetic annoyance.

   Adding `hidden` as a fallback for those same old browsers would hand
   them the scroll-container problem above, on the devices least able to
   recover from a sweep that will not pin. A small annoyance on old
   Safari beats a broken hero on old Safari.

   `overscroll-behavior-x` is not needed either: with nothing to scroll
   horizontally there is no overscroll to chain.
   ====================================================================== */

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}