/*
 * Zlix Modules visual system v1
 * ----------------------------------------------------------
 * Responsive vector treatment for the public Modules page.
 */

body.page-products .page-hero-modules-visual {
  width: min(100% - 48px, 1220px);
  max-width: 1220px;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .72fr);
  column-gap: 34px;
  align-items: center;
}

body.page-products .page-hero-modules-visual > .eyebrow,
body.page-products .page-hero-modules-visual > h1,
body.page-products .page-hero-modules-visual > p {
  grid-column: 1;
}

body.page-products .page-hero-modules-visual > .eyebrow {
  grid-row: 1;
}

body.page-products .page-hero-modules-visual > h1 {
  grid-row: 2;
}

body.page-products .page-hero-modules-visual > p {
  grid-row: 3;
}

.modules-family-art {
  grid-column: 2;
  grid-row: 1 / 4;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modules-family-visual-stack {
  position: relative;
  width: min(100%, 430px);
  line-height: 0;
}

.modules-family-architecture {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(20, 61, 78, .07));
}

.modules-family-brand-mark {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 36.7%;
  width: 15.5%;
  min-width: 46px;
  max-width: 70px;
  transform: translate(-50%, -50%);
  line-height: 0;
  filter: drop-shadow(0 5px 7px rgba(6, 31, 50, .20));
}

.modules-family-brand-mark img {
  display: block;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  filter: none !important;
}


/* Quiet technical background around the module directory. */
body.page-products .module-overview-groups {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.page-products .module-overview-groups::before,
body.page-products .module-overview-groups::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 270px;
  height: 270px;
  pointer-events: none;
  background: url("/assets/svg/platform-ambient-network.svg") center / contain no-repeat;
  opacity: .12;
}

body.page-products .module-overview-groups::before {
  left: -55px;
  top: 130px;
}

body.page-products .module-overview-groups::after {
  right: -50px;
  top: 520px;
  transform: scaleX(-1);
}


/* Shared icon presentation. */
.zlix-visual-icon {
  display: block;
}

.visual-foundation-card,
.visual-module-card,
.future-visual-card {
  position: relative;
}

.visual-foundation-card {
  padding-right: 112px;
}

.visual-foundation-card .module-card-icon,
.visual-module-card .module-card-icon,
.future-visual-card .module-card-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 60px;
  height: 60px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(232, 247, 222, .72);
  box-shadow:
    0 10px 24px rgba(20, 61, 78, .07),
    0 1px 0 rgba(255, 255, 255, .5) inset;
}

.visual-module-card > strong,
.visual-module-card > em {
  max-width: calc(100% - 76px);
}

.future-visual-card h3 {
  padding-right: 72px;
}


/* Hero and card responsiveness. */
@media (max-width: 1050px) {
  body.page-products .page-hero-modules-visual {
    grid-template-columns: minmax(0, 1.22fr) minmax(270px, .78fr);
    gap: 24px;
  }

  .modules-family-visual-stack {
    width: min(100%, 370px);
  }
}

@media (max-width: 900px) {
  body.page-products .page-hero-modules-visual {
    grid-template-columns: 1fr;
  }

  body.page-products .page-hero-modules-visual > .eyebrow,
  body.page-products .page-hero-modules-visual > h1,
  body.page-products .page-hero-modules-visual > p,
  .modules-family-art {
    grid-column: 1;
  }

  .modules-family-art {
    grid-row: auto;
    margin-top: 18px;
  }

  .modules-family-visual-stack {
    width: min(100%, 500px);
  }
}

@media (max-width: 720px) {
  body.page-products .page-hero-modules-visual {
    display: block;
    width: min(100% - 28px, 1040px);
    padding: 24px 18px;
  }

  .modules-family-art {
    margin-top: 18px;
  }

  .modules-family-visual-stack {
    width: min(100%, 420px);
  }

  .modules-family-architecture {
    max-height: 225px;
    object-fit: contain;
  }

  .modules-family-brand-mark {
    width: 15.5%;
    min-width: 43px;
    max-width: 62px;
  }

  body.page-products .module-overview-groups::before,
  body.page-products .module-overview-groups::after {
    display: none;
  }

  .visual-foundation-card {
    padding-right: 20px !important;
  }

  .visual-foundation-card .module-card-icon,
  .visual-module-card .module-card-icon,
  .future-visual-card .module-card-icon {
    width: 52px;
    height: 52px;
    padding: 8px;
    top: 18px;
    right: 18px;
  }

  .visual-module-card > strong,
  .visual-module-card > em {
    max-width: calc(100% - 66px);
  }

  .future-visual-card h3 {
    padding-right: 62px;
  }
}

@media (max-width: 460px) {
  .modules-family-architecture {
    max-height: 200px;
  }

  .modules-family-brand-mark {
    min-width: 40px;
    max-width: 58px;
  }
}


/* ----------------------------------------------------------
   Modules icon optical normalization - v2
   ---------------------------------------------------------- */

/*
 * Icons should support the card hierarchy rather than compete with
 * product names. All cards now use a consistent visual box.
 */
body.page-products .module-card-icon {
  box-sizing: border-box;
  width: 54px !important;
  height: 54px !important;
  padding: 9px !important;
  top: 20px !important;
  right: 20px !important;
  border-radius: 16px !important;
}

/* Give names/titles a predictable exclusion zone for the icon. */
body.page-products .visual-module-card > strong,
body.page-products .visual-module-card > em {
  display: block;
  max-width: calc(100% - 76px) !important;
}

body.page-products .visual-foundation-card {
  padding-right: 104px !important;
}

body.page-products .future-visual-card h3 {
  padding-right: 70px !important;
}

/*
 * Some symbols are naturally taller or wider. Adjust their optical
 * size without changing the shared container.
 */
body.page-products .visual-module-card[href="/zlixdmt"] .module-card-icon {
  padding: 10px !important;
}

body.page-products .visual-module-card[href="/zlixcsp"] .module-card-icon {
  padding: 10px !important;
}

body.page-products .visual-module-card[href="/zlixeht"] .module-card-icon {
  padding: 10px !important;
}

@media (max-width: 720px) {
  body.page-products .module-card-icon {
    width: 50px !important;
    height: 50px !important;
    padding: 8px !important;
    top: 18px !important;
    right: 18px !important;
    border-radius: 15px !important;
  }

  body.page-products .visual-foundation-card {
    padding-right: 20px !important;
  }

  body.page-products .visual-module-card > strong,
  body.page-products .visual-module-card > em {
    max-width: calc(100% - 66px) !important;
  }

  body.page-products .future-visual-card h3 {
    padding-right: 62px !important;
  }
}


/* ----------------------------------------------------------
   Zlix Modules icon/layout refinement - v3
   ---------------------------------------------------------- */

/* Give all small icon tiles the same subtle physical edge. */
body.page-products .module-card-icon {
  border: 1px solid rgba(23, 111, 105, .22) !important;
  box-shadow:
    0 7px 18px rgba(20, 61, 78, .07),
    inset 0 1px 0 rgba(255, 255, 255, .60) !important;
}


/*
 * Future capability cards need a real two-column header row.
 * The prior absolute positioning allowed the icon to overlap
 * paragraph text on narrower cards.
 */
body.page-products .future-visual-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 10px;
  align-items: start;
}

body.page-products .future-visual-card .module-card-icon {
  position: static !important;
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  align-self: start;
}

body.page-products .future-visual-card h3 {
  grid-column: 1;
  grid-row: 1;
  padding-right: 0 !important;
  margin-top: 6px;
  align-self: start;
}

body.page-products .future-visual-card p {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  max-width: none !important;
  margin-top: 0;
}


/* Mobile keeps the exact same non-overlapping structure. */
@media (max-width: 720px) {
  body.page-products .future-visual-card {
    column-gap: 12px;
    row-gap: 10px;
  }

  body.page-products .future-visual-card h3 {
    padding-right: 0 !important;
  }
}


/* ----------------------------------------------------------
   Extensible capability structural layout - v4
   ---------------------------------------------------------- */

body.page-products .future-visual-card {
  display: block !important;
}

body.page-products .future-visual-card .visual-card-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  width: 100%;
  min-height: 54px;
  margin: 0 0 14px !important;
}

body.page-products .future-visual-card .visual-card-head h3 {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  margin: 6px 0 0 !important;
}

body.page-products .future-visual-card .module-card-icon {
  position: static !important;
  flex: 0 0 54px !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
}

body.page-products .future-visual-card > p {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  clear: both !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 720px) {
  body.page-products .future-visual-card .visual-card-head {
    min-height: 50px;
    gap: 16px !important;
    margin-bottom: 12px !important;
  }

  body.page-products .future-visual-card .module-card-icon {
    flex-basis: 50px !important;
    width: 50px !important;
    height: 50px !important;
  }
}


/* ----------------------------------------------------------
   Zlix cool-blue visual palette - v5
   ---------------------------------------------------------- */

body.page-products .module-card-icon {
  background: rgba(237, 246, 251, .94) !important;
  border-color: rgba(33, 126, 167, .30) !important;
  box-shadow:
    0 7px 18px rgba(15, 52, 79, .08),
    inset 0 1px 0 rgba(255, 255, 255, .75) !important;
}

body.page-products .modules-family-architecture {
  filter: drop-shadow(0 16px 25px rgba(15, 52, 79, .08)) !important;
}

body.page-products .module-overview-groups::before,
body.page-products .module-overview-groups::after {
  opacity: .09 !important;
}


/* ==========================================================
   Zlix modules geometry and card-layout repair - v6
   ========================================================== */


/* ----------------------------------------------------------
   Module/card icon wells

   Deliberately opaque cool-blue surfaces. Do not allow the
   underlying mint page color to tint these graphics.
   ---------------------------------------------------------- */

body.page-products .module-card-icon {
  position: absolute !important;

  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;

  padding: 8px !important;
  margin: 0 !important;

  background: #edf6fb !important;
  border: 1px solid rgba(27, 116, 160, .34) !important;
  border-radius: 15px !important;

  box-shadow:
    0 6px 16px rgba(13, 48, 77, .08),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}


/* ----------------------------------------------------------
   Extensible by Design cards

   The icon gets its own grid column.
   The paragraph ALWAYS begins on a separate full-width row.
   ---------------------------------------------------------- */

body.page-products .future-visual-card {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    54px !important;

  grid-template-rows:
    auto
    auto !important;

  grid-template-areas:
    "future-title future-icon"
    "future-copy  future-copy" !important;

  column-gap: 18px !important;
  row-gap: 10px !important;

  align-items: start !important;
}


/*
 * The wrapper itself should not consume a grid cell.
 * Its children become direct grid children of the card.
 */
body.page-products .future-visual-card .visual-card-head {
  display: contents !important;
}


/* Heading owns the left side of row one. */
body.page-products .future-visual-card .visual-card-head h3 {
  grid-area: future-title !important;

  min-width: 0 !important;
  width: auto !important;

  margin: 3px 0 0 !important;
  padding: 0 !important;

  position: static !important;
}


/* Icon owns the right side of row one. */
body.page-products .future-visual-card .visual-card-head .module-card-icon {
  grid-area: future-icon !important;

  position: static !important;

  justify-self: end !important;
  align-self: start !important;

  margin: 0 !important;
}


/*
 * Copy cannot enter the icon column because it occupies an
 * entirely separate grid row spanning BOTH columns.
 */
body.page-products .future-visual-card > p {
  grid-area: future-copy !important;

  position: static !important;
  float: none !important;
  clear: both !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ----------------------------------------------------------
   Other Products-page module cards

   Keep the icon well consistently blue rather than translucent
   green/mint.
   ---------------------------------------------------------- */

body.page-products .module-overview-groups .module-card-icon,
body.page-products .product-module-card .module-card-icon,
body.page-products .card .module-card-icon {
  background: #edf6fb !important;
  border-color: rgba(27, 116, 160, .34) !important;
}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 720px) {

  body.page-products .future-visual-card {
    grid-template-columns:
      minmax(0, 1fr)
      50px !important;

    column-gap: 14px !important;
    row-gap: 12px !important;
  }

  body.page-products .future-visual-card .module-card-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 7px !important;
  }
}


/* ==========================================================
   ZLIX PRODUCTS VISUAL FINALIZATION V10
   ========================================================== */

/*
 * All Products-page icon wells use an opaque cool-blue surface.
 * This prevents the underlying page/theme color from tinting
 * them green.
 */
body.page-products .module-card-icon {
  box-sizing: border-box !important;

  background: #edf6fb !important;
  background-color: #edf6fb !important;

  border: 1px solid rgba(38, 126, 169, .38) !important;
  border-radius: 16px !important;

  color: #1487b3 !important;

  box-shadow:
    0 7px 18px rgba(15, 52, 79, .08),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;

  filter: none !important;
}


/*
 * Normal Products cards:
 * icon remains in the upper-right corner without changing the
 * title/content flow.
 */
body.page-products .visual-foundation-card,
body.page-products .visual-module-card {
  position: relative !important;
}

body.page-products .visual-foundation-card .module-card-icon,
body.page-products .visual-module-card .module-card-icon {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;

  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;

  padding: 8px !important;
  margin: 0 !important;
}


/*
 * Extensible-by-Design cards:
 *
 * Row 1 = heading | icon
 * Row 2 = copy    | icon
 *
 * The paragraph is intentionally restricted to the LEFT column.
 * It can no longer flow underneath the icon.
 */
body.page-products .future-visual-card {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    58px !important;

  grid-template-rows:
    auto
    auto !important;

  grid-template-areas:
    "future-title future-icon"
    "future-copy  future-icon" !important;

  column-gap: 18px !important;
  row-gap: 10px !important;

  align-items: start !important;
}


/*
 * Let the heading and SVG participate directly in the parent
 * card grid.
 */
body.page-products .future-visual-card .visual-card-head {
  display: contents !important;
}


/* Heading stays entirely within the left column. */
body.page-products .future-visual-card h3 {
  grid-area: future-title !important;

  margin: 3px 0 0 !important;
  padding: 0 !important;

  min-width: 0 !important;
}


/*
 * Copy stays entirely within the left column.
 * This is the important overlap correction.
 */
body.page-products .future-visual-card > p {
  grid-area: future-copy !important;

  margin: 0 !important;
  padding: 0 !important;

  min-width: 0 !important;
  max-width: 100% !important;
}


/* Icon permanently owns the right column. */
body.page-products
.future-visual-card
.visual-card-head
.module-card-icon {
  grid-area: future-icon !important;

  position: static !important;

  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;

  padding: 8px !important;
  margin: 0 !important;

  justify-self: end !important;
  align-self: start !important;
}


/*
 * Mobile keeps exactly the same safe layout, only with a slightly
 * smaller dedicated icon column.
 */
@media (max-width: 720px) {

  body.page-products .future-visual-card {
    grid-template-columns:
      minmax(0, 1fr)
      52px !important;

    column-gap: 14px !important;
    row-gap: 8px !important;
  }

  body.page-products
  .future-visual-card
  .visual-card-head
  .module-card-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;

    padding: 7px !important;
  }
}

/* ZLIX PRODUCTS VISUAL FINALIZATION V10 */


/* ==========================================================
   ZLIX PRODUCTS ICON NORMALIZATION V11
   ========================================================== */

/*
 * Neutralize older per-product optical overrides.
 * All normal module icons now use the same 8px interior spacing.
 */
body.page-products
.visual-module-card[href="/zlixdmt"]
.module-card-icon,

body.page-products
.visual-module-card[href="/zlixcsp"]
.module-card-icon,

body.page-products
.visual-module-card[href="/zlixeht"]
.module-card-icon {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;

  padding: 8px !important;

  background: #edf6fb !important;
  background-color: #edf6fb !important;

  border: 1px solid rgba(38, 126, 169, .38) !important;
  border-radius: 16px !important;
}


@media (max-width: 720px) {

  body.page-products
  .visual-module-card[href="/zlixdmt"]
  .module-card-icon,

  body.page-products
  .visual-module-card[href="/zlixcsp"]
  .module-card-icon,

  body.page-products
  .visual-module-card[href="/zlixeht"]
  .module-card-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;

    padding: 7px !important;

    border-radius: 15px !important;
  }
}

/* ZLIX PRODUCTS ICON NORMALIZATION V11 */


/* ==========================================================
   ZLIX PRODUCTS VISUAL STABILIZATION V12
   ========================================================== */


/* ----------------------------------------------------------
   Products hero Z alignment

   modules-family-visual.svg:
     viewBox height = 460
     landing-pad center Y = 154

   154 / 460 = 33.4782608%

   The old 36.7% position was appropriate to the Platform
   artwork's 420-high viewBox, but not the Products artwork.
   ---------------------------------------------------------- */

body.page-products .modules-family-brand-mark {
  top: 33.48% !important;
}


/* ----------------------------------------------------------
   Products small-icon palette

   Use a visibly cool blue-white opaque surface. This is
   intentionally less mint-adjacent than the previous surface.
   ---------------------------------------------------------- */

body.page-products .module-card-icon {
  box-sizing: border-box !important;

  background: #e6f2fa !important;
  background-color: #e6f2fa !important;
  background-image: none !important;

  border: 1px solid rgba(31, 125, 169, .44) !important;
  border-radius: 16px !important;

  color: #1487b3 !important;

  box-shadow:
    0 7px 18px rgba(15, 52, 79, .08),
    inset 0 1px 0 rgba(255, 255, 255, .94) !important;

  filter: none !important;
}


/* ----------------------------------------------------------
   Extensible by Design

   Restore the clean structure that worked previously:

       [ HEADING                 ICON ]
       [ PARAGRAPH BELOW ENTIRE HEADER ]

   The icon is NOT allowed to share vertical space with the
   paragraph.
   ---------------------------------------------------------- */

body.page-products .future-visual-card {
  display: block !important;

  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
}


body.page-products
.future-visual-card
.visual-card-head {
  display: flex !important;

  align-items: flex-start !important;
  justify-content: space-between !important;

  gap: 18px !important;

  width: 100% !important;
  min-height: 54px !important;

  margin: 0 0 14px !important;
}


body.page-products
.future-visual-card
.visual-card-head
h3 {
  display: block !important;

  flex: 1 1 auto !important;

  min-width: 0 !important;

  position: static !important;

  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;

  align-self: auto !important;

  margin: 4px 0 0 !important;
  padding: 0 !important;
}


body.page-products
.future-visual-card
.visual-card-head
.module-card-icon {
  display: block !important;

  position: static !important;

  flex: 0 0 54px !important;

  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;

  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;

  justify-self: auto !important;
  align-self: flex-start !important;

  padding: 8px !important;
  margin: 0 !important;
}


body.page-products
.future-visual-card
> p {
  display: block !important;

  position: static !important;
  float: none !important;
  clear: both !important;

  width: 100% !important;
  max-width: none !important;

  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;

  margin: 0 !important;
  padding: 0 !important;
}


@media (max-width: 720px) {

  body.page-products
  .future-visual-card
  .visual-card-head {
    gap: 14px !important;

    min-height: 50px !important;

    margin-bottom: 12px !important;
  }


  body.page-products
  .future-visual-card
  .visual-card-head
  .module-card-icon {
    flex-basis: 50px !important;

    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;

    padding: 7px !important;

    border-radius: 15px !important;
  }
}

/* ZLIX PRODUCTS VISUAL STABILIZATION V12 */


/* ==========================================================
   ZLIX HERO VISUAL SCALE NORMALIZATION V13

   Platform and Products intentionally use different SVG
   viewBox heights because Products has a fifth lower module.

   Their shared central stack, however, uses identical SVG
   geometry. These rules give both illustrations the same
   rendered WIDTH, which makes the platform stack and Zlix
   mark render at the same physical scale when moving between
   /platform and /products.
   ========================================================== */


/* ----------------------------------------------------------
   Desktop / tablet landscape

   Both hero layouts reserve the exact same width for artwork.
   The clamp lets the illustration reduce slightly before the
   single-column breakpoint without changing one page
   independently of the other.
   ---------------------------------------------------------- */

@media (min-width: 901px) {

  .page-hero-platform-visual,
  body.page-products .page-hero-modules-visual {
    grid-template-columns:
      minmax(0, 1fr)
      clamp(340px, 32vw, 400px) !important;
  }

  .platform-visual-stack,
  .modules-family-visual-stack {
    width: 100% !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .platform-architecture-art,
  .modules-family-architecture {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }


  /*
   * At the maximum desktop artwork width, both approved Zlix
   * marks render at exactly the same 62px width.
   */
  .platform-brand-mark,
  .modules-family-brand-mark {
    left: 50% !important;

    width: 15.5% !important;
    min-width: 46px !important;
    max-width: 62px !important;

    transform: translate(-50%, -50%) !important;
  }

  /*
   * Same SVG landing point, expressed against each SVG's
   * own viewBox height:
   *
   * Platform: 154 / 420 = 36.6667%
   * Products: 154 / 460 = 33.4783%
   */
  .platform-brand-mark {
    top: 36.67% !important;
  }

  .modules-family-brand-mark {
    top: 33.48% !important;
  }
}


/* ----------------------------------------------------------
   Mobile / stacked layout

   Use the same responsive maximum on both pages so neither
   illustration becomes independently larger on mobile.
   ---------------------------------------------------------- */

@media (max-width: 900px) {

  .platform-visual-stack,
  .modules-family-visual-stack {
    width: min(100%, 420px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .platform-architecture-art,
  .modules-family-architecture {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .platform-brand-mark,
  .modules-family-brand-mark {
    left: 50% !important;

    width: 15.5% !important;
    min-width: 43px !important;
    max-width: 62px !important;

    transform: translate(-50%, -50%) !important;
  }

  .platform-brand-mark {
    top: 36.67% !important;
  }

  .modules-family-brand-mark {
    top: 33.48% !important;
  }
}


@media (max-width: 460px) {

  .platform-brand-mark,
  .modules-family-brand-mark {
    min-width: 40px !important;
    max-width: 58px !important;
  }
}


/* ZLIX HERO VISUAL SCALE NORMALIZATION V13 */