/* 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; }
}