/*================================================================================================
  2026Q4 MEGA MENU  —  [inflow_mega_menu]
  ------------------------------------------------------------------------------------------------
  Markup comes from Inflow_Mega_Menu_Walker in includes/mega-menu.php. Everything here is
  namespaced mm-* and scoped to #inflow-mega-menu so none of it collides with the legacy
  #menu-main-menu rules still living in style.css.

  Structure:
    ul#inflow-mega-menu
      li.mm-panel            > a              top-level trigger
        ul.mm-panel-inner                     the floating dropdown card
          li.mm-col          > span           column + its heading
            ul.mm-col-items
              li.mm-static   > span           in-column group label (a '#' item)
              li.mm-feature  > a              large product card
              li.mm-card     > a              small product card
              li.mm-link     > a              icon + label row
              li.mm-cta-link > a              bold text + arrow
              li.mm-button   > a              tile icon + label
================================================================================================*/

/* Every colour below maps to a token in style-colours.css. The literal after
   each var() is only a fallback for if that stylesheet fails to load — change
   the palette, not these. */
:root {
  --mm-panel-bg: #FFFFFF;
  --mm-panel-radius: 16px;
  /* Every label and icon in the menu uses this one colour — the product cards'
     subtext is the single exception. */
  --mm-text: var(--inflow-preset-color-mineshaft, #222222);
  --mm-subtext: var(--inflow-preset-color-mineshaft-90, #4A4A4A);
  --mm-rule: var(--inflow-preset-color-mineshaft-30, #EBEBEB);
  /* Product tints are the palette's -10 steps; their hover borders are the -30
     of the same family. */
  --mm-cream: var(--inflow-preset-color-sun-10, #FEF8EF);
  --mm-cream-border: var(--inflow-preset-color-sun-30, #FCDFAF);
  --mm-purple: var(--inflow-preset-color-grape-10, #F5F6FF);
  --mm-purple-border: var(--inflow-preset-color-grape-30, #D5D7F5);
  --mm-blue: var(--inflow-preset-color-sky-10, #F0F8FF);
  --mm-blue-border: var(--inflow-preset-color-sky-30, #BFDBF5);
  --mm-orange: var(--inflow-preset-color-orange, #F7B952);
  --mm-cream-deep: var(--inflow-preset-color-sun-20, #FCF0DB);
  --mm-grey: var(--inflow-preset-color-mineshaft-20, #F3F3F3);
  --mm-mint: var(--inflow-preset-color-pine-20, #CCEBE9);
  /* Gap between the header and the panel. The hover bridge below spans exactly
     this, so changing it here keeps the two in step. */
  --mm-gap: 28px;
}

/*------------------------------------------------------------------------------
  1. TOP LEVEL
------------------------------------------------------------------------------*/
#inflow-mega-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

#inflow-mega-menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 9px 16px;
  border-radius: 8px;
  color: var(--mm-text);
  font-family: 'ZonaPro Semi Bold 600', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* Header: centring the menu in the row.
   The row holds the logo and the Proudly Canadian badge on one side and the
   Log in / Free trial buttons on the other. Those two groups aren't the same
   width, and flex-grow only shares out leftover space rather than equalising
   content, so no flex sizing puts the menu on the page centre — style.css's
   auto margins land it in the middle of whatever is left over. Taking it out of
   the flow centres it on the row instead, which spans the full width. Scoped
   with :has() so the legacy header, which has no #inflow-mega-menu, is
   untouched.

   Page-centred only from 1161px up. Below that there isn't room between the
   logo/badge and the buttons for a page-centred menu to clear them, so it drops
   back to the flow and style.css's auto margins centre it in the space that is
   actually left — see the 1025–1160 note further down. */
@media (min-width: 1161px) {
  /* !important is not optional here. Divi's Theme Builder emits
        .et_pb_code_5_tb_header { position: static !important }
     for this code module in et-core-unified-*.css, so any positioning without
     !important is silently discarded — which is why `left` had no effect.

     left:0 + right:0 + auto margins on a max-content box is the CSS way to
     centre an absolutely positioned element. No transform, so the menu never
     becomes a containing block for the panel's position:fixed backdrop. The
     containing block ends up being the header section (Divi forces the column
     static too), which spans the full width, so this lands on the page centre
     whatever else is in the row. */
  #inflow-main-menu:has(#inflow-mega-menu) {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    z-index: 5;
  }

  /* The menu is out of the flow now, so this holds the buttons to the right
     edge with the logo and badge together on the left. Scoped to this range
     only: in the flow it would compete with the menu's own auto margins and
     stop it centring. */
  .et_pb_column.flex:has(#inflow-mega-menu) > #inflow-secondary-menu {
    margin-left: auto;
  }
}

/* 1025–1160px: too narrow to page-centre the menu without colliding with the
   logo or the buttons, so it stays in the flow and style.css's auto margins
   centre it between them. The panels still belong on the page centre though,
   and a panel positioned inside the menu can only ever centre on the menu.
   Making the list static hands them to the header section instead, which spans
   the full content width — so left:0 + right:0 + auto margins centre them on
   the page, the same technique the menu itself uses above 1160px. */
@media (min-width: 1025px) and (max-width: 1160px) {
  #inflow-mega-menu {
    position: static;
  }

  /* 100% now measures the section rather than the menu. The section's bottom
     sits 14px below the menu's — the row's bottom padding — so that comes off
     the gap to keep the panel the same distance from the header as elsewhere. */
  #inflow-mega-menu .mm-panel-inner {
    top: calc(100% + var(--mm-gap) - 14px);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-6px);
  }

  #inflow-mega-menu > .mm-panel:hover > .mm-panel-inner,
  #inflow-mega-menu > .mm-panel:has(:focus-visible) > .mm-panel-inner {
    transform: translateY(0);
  }
}

/* Free trial / Book a demo live in the menu as ordinary top-level items so they
   can be edited in WP, but they only appear in the mobile panel — the header
   already carries its own pair on desktop. */
#inflow-mega-menu > .mm-cta {
  display: none;
}

/* Chevron on the three panel triggers only. */
#inflow-mega-menu > .mm-panel > a:after {
  content: "";
  width: 10px;
  height: 10px;
  background-image: url(icons/chevron-down.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.2s ease;
}

/*------------------------------------------------------------------------------
  2. THE PANEL
  Centred on the menu rather than anchored to its trigger — that matches the
  design, where all three panels share one centre line.
------------------------------------------------------------------------------*/
#inflow-mega-menu .mm-panel-inner {
  margin: 0;
  padding: 32px;
  list-style: none;
  background: var(--mm-panel-bg);
  border-radius: var(--mm-panel-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
  display: flex;
  align-items: stretch;
  gap: 40px;
}

/* Software runs wider on the right than the other two. */
#inflow-mega-menu .mm-panel-software .mm-panel-inner {
  padding-right: 64px;
}

/* Columns stretch to the panel's height and their item list fills whatever is
   left under the heading, so the closing CTA can be pinned to the bottom edge
   and line up across every column. */
#inflow-mega-menu .mm-col {
  display: flex;
  flex-direction: column;
}

#inflow-mega-menu .mm-col-items {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
}

/* Column + its heading */
#inflow-mega-menu .mm-col + .mm-col {
  border-left: 1px solid var(--mm-rule);
  padding-left: 40px;
}

/* Hardware has no divider — its two columns are separated by 32px of space
   alone, so the rule and its 40px inset both come off and the panel's own gap
   provides the whole distance. */
#inflow-mega-menu .mm-panel-hardware .mm-panel-inner {
  gap: 32px;
}

#inflow-mega-menu .mm-panel-hardware .mm-col + .mm-col {
  border-left: 0;
  padding-left: 0;
}

#inflow-mega-menu .mm-col-heading {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--mm-text);
  font-family: 'ZonaPro Bold 700', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: default;
}

/* Help's column headings are grey pills rather than plain capitals.
   inline-flex with align-self:start so the pill hugs its label — .mm-col is a
   flex column, so a plain display:flex would stretch it the full width. */
#inflow-mega-menu .mm-panel-help .mm-col-heading {
  display: inline-flex;
  align-self: start;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--inflow-preset-color-mineshaft-20, #F3F3F3);
  color: var(--mm-text);
  font-family: 'ZonaPro Regular 400', Helvetica, Arial, sans-serif;
  font-size: 12px;
}

/* Hardware's left column has no visible heading, but keep it for screen readers. */
#inflow-mega-menu .mm-heading-hidden > .mm-col-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/*------------------------------------------------------------------------------
  3. LINK ROWS  (.mm-link)
------------------------------------------------------------------------------*/
#inflow-mega-menu .mm-link {
  margin-bottom: 8px;
}

/* Sets the floor for the Help columns' width, since the column sizes to its
   widest item. */
#inflow-mega-menu .mm-panel-help .mm-link {
  min-width: 230px;
}

/* No flex gap here — spacing is set per child instead, so the hover arrow can
   sit exactly 8px from the label without the gap adding to its margin. */
#inflow-mega-menu .mm-link > a {
  display: flex;
  align-items: center;
  padding: 7px 8px;
  margin: 0 -8px;
  color: var(--mm-text);
  font-family: 'ZonaPro Regular 400', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
}

/* Software > Use cases hover: the glyph goes inFlow orange and an arrow slides
   in beside the label. The arrow is laid out but transparent at rest so the row
   doesn't reflow on hover. */
#inflow-mega-menu .mm-panel-software .mm-link > a:after {
  content: "";
  position: relative;
  top: -1px;
  width: 14px;
  height: 18px;
  margin-left: 8px;
  background-image: url(icons/arrow-small.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#inflow-mega-menu .mm-panel-software .mm-link > a:hover:after {
  opacity: 1;
  transform: translateX(0);
}

#inflow-mega-menu .mm-panel-software .mm-link > a:hover .mm-icon {
  color: var(--mm-orange);
}

/* Plain glyph — the Software > Use cases treatment. */
#inflow-mega-menu .mm-link .mm-icon {
  flex: 0 0 auto;
  margin-right: 12px;
  width: 18px;
  font-size: 15px;
  color: var(--mm-text);
  text-align: center;
}

/* Help list items: an orange icon tile plus label, with the description
   revealed on hover and focus. Same construction as the Buy hardware button —
   named grid areas, and a second row animating from 0fr so the title lifts as
   the subtitle opens. Applies to the whole Help panel, so no class is needed
   in WP (this replaces the old mm-col-tiles hook). */
/* The icon is positioned rather than placed in a grid cell. Spanning both rows
   made the grid hand the tile's 40px out to the tracks themselves, which left
   the title pinned to the top of a 20px track instead of centred. Out of the
   grid, the tracks size to the text alone: at rest the second is 0fr so
   align-content centres the title across the full height, and on hover it
   becomes 1fr and lifts the title as the description opens. */
#inflow-mega-menu .mm-panel-help .mm-link > a {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 0fr;
  grid-template-areas:
    "title external"
    "desc  external";
  align-items: center;
  align-content: center;
  column-gap: 12px;
  /* The row's own content height with the description shown: 20px title + 16px
     description + 6px padding top and bottom. Not an arbitrary floor — it's the
     hover state's natural height, held at rest too so hovering doesn't resize
     the row. The icon is absolutely positioned and contributes nothing, so
     dropping this entirely would give a 32px row at rest that the 40px tile
     overflows, and a jump to 48px on hover. */
  min-height: 48px;
  /* Left padding clears the absolutely positioned tile: 6 + 40 + 12. Right is
     12px, the gap between the new-tab icon and the row's edge. */
  padding: 6px 12px 6px 58px;
  margin: 0 -6px;
  border-radius: 12px;
  transition: grid-template-rows 0.2s ease, background-color 0.2s ease;
}

/* border-box so every tile is the same 32px square: the glyph scales to fit the
   16px content area and keeps its own aspect ratio rather than being stretched,
   which matters because the Font Awesome viewBoxes aren't all square. */
#inflow-mega-menu .mm-panel-help .mm-link .mm-icon {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin-right: 0;
  /* Padding is what sizes the glyph: 40px tile less 10px each side leaves it
     20px, half the tile. */
  padding: 10px;
  border-radius: 8px;
  background: var(--inflow-preset-color-sun-30, #FCDFAF);
  transition: background-color 0.2s ease;
}

#inflow-mega-menu .mm-panel-help .mm-link .mm-title {
  grid-area: title;
  font-family: 'ZonaPro Bold 700', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 20px;
}

#inflow-mega-menu .mm-panel-help .mm-link .mm-external {
  grid-area: external;
  margin-left: 0;
  padding-left: 0;
}

#inflow-mega-menu .mm-panel-help .mm-link .mm-desc {
  grid-area: desc;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  /* Offset down at rest so it rises into place as it fades in, travelling the
     same direction as the title above it. */
  transform: translateY(10px);
  color: var(--mm-subtext);
  font-family: 'ZonaPro Regular 400', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#inflow-mega-menu .mm-panel-help .mm-link > a:hover,
#inflow-mega-menu .mm-panel-help .mm-link > a:focus-visible {
  grid-template-rows: auto 1fr;
}

#inflow-mega-menu .mm-panel-help .mm-link > a:hover {
  background-color: var(--inflow-preset-color-sun-10, #FEF8EF);
}

#inflow-mega-menu .mm-panel-help .mm-link > a:focus-visible {
  background-color: var(--inflow-preset-color-sun-20, #FCF0DB);
  outline: none;
}

#inflow-mega-menu .mm-panel-help .mm-link > a:hover .mm-icon {
  background-color: var(--inflow-preset-color-sun-40, #FACC81);
}

#inflow-mega-menu .mm-panel-help .mm-link > a:focus-visible .mm-icon {
  background-color: var(--inflow-preset-color-sun, #F7B952);
}

#inflow-mega-menu .mm-panel-help .mm-link > a:hover .mm-desc,
#inflow-mega-menu .mm-panel-help .mm-link > a:focus-visible .mm-desc {
  opacity: 1;
  transform: translateY(0);
}

#inflow-mega-menu .mm-external {
  margin-left: auto;
  padding-left: 16px;
  font-size: 12px;
  color: var(--mm-text);
}

/*------------------------------------------------------------------------------
  4. PRODUCT CARDS  (.mm-feature / .mm-card)
  Grid areas rather than source order: the Menu Image plugin emits the title and
  <img> in an order set per item in the backend, and the walker appends .mm-desc
  last, so placement must not depend on any of that.
------------------------------------------------------------------------------*/
#inflow-mega-menu .mm-feature > a,
#inflow-mega-menu .mm-card > a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "img title"
    "img desc";
  align-items: center;
  column-gap: 12px;
  text-decoration: none;
  border-radius: 16px;
  /* Always present but transparent, so the hover border adds no layout shift. */
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}

/* padding:0 clears the Menu Image plugin's own spacing — it adds a
   padding-right to separate image from title in its default layouts, which on a
   centred card just shifts the image off-centre. */
#inflow-mega-menu .mm-feature .menu-image,
#inflow-mega-menu .mm-card .menu-image {
  grid-area: img;
  display: block;
  padding: 0;
}

/* padding:0 for the same reason as .menu-image above — the plugin pads the
   title span to separate it from the image, which throws off a centred card. */
#inflow-mega-menu .mm-feature .menu-image-title,
#inflow-mega-menu .mm-feature .mm-title,
#inflow-mega-menu .mm-card .menu-image-title,
#inflow-mega-menu .mm-card .mm-title {
  grid-area: title;
  align-self: end;
  padding: 0;
  color: var(--mm-text);
  font-family: 'ZonaPro Bold 700', Helvetica, Arial, sans-serif;
}

#inflow-mega-menu .mm-feature .mm-desc,
#inflow-mega-menu .mm-card .mm-desc {
  grid-area: desc;
  align-self: start;
  color: var(--mm-subtext);
  font-family: 'ZonaPro Regular 400', Helvetica, Arial, sans-serif;
}

/* Product artwork comes from the theme's icons folder rather than the Menu Image
   plugin, which can only reference media-library attachments — so it rides on a
   pseudo-element sitting in the card's img grid area. */
#inflow-mega-menu .mm-col-products .mm-card > a:before,
#inflow-mega-menu .mm-card[class*="mm-art-"] > a:before {
  content: "";
  grid-area: img;
  align-self: start;
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Defaults by position, so the Products column paints itself with no extra
   classes in WP: feature card is Inventory, then Manufacturing, then Stockroom.
   Wrapped in :where() to contribute zero specificity, so any explicit
   mm-art-* or mm-tint-* below still wins. */
#inflow-mega-menu :where(.mm-col-products .mm-feature) > a {
  background-color: var(--mm-cream);
}

#inflow-mega-menu :where(.mm-col-products .mm-feature) > a:hover {
  border-color: var(--mm-cream-border);
}

#inflow-mega-menu :where(.mm-col-products .mm-card:nth-of-type(2)) > a {
  background-color: var(--mm-purple);
}

#inflow-mega-menu :where(.mm-col-products .mm-card:nth-of-type(2)) > a:hover {
  border-color: var(--mm-purple-border);
}

#inflow-mega-menu :where(.mm-col-products .mm-card:nth-of-type(2)) > a:before {
  background-image: url(icons/inFlow-Manufacturing.svg);
}

#inflow-mega-menu :where(.mm-col-products .mm-card:nth-of-type(3)) > a {
  background-color: var(--mm-blue);
}

#inflow-mega-menu :where(.mm-col-products .mm-card:nth-of-type(3)) > a:hover {
  border-color: var(--mm-blue-border);
}

#inflow-mega-menu :where(.mm-col-products .mm-card:nth-of-type(3)) > a:before {
  background-image: url(icons/inFlow-Stockroom.svg);
}

#inflow-mega-menu :where(.mm-col-cards .mm-card) > a {
  background-color: var(--mm-grey);
}

/* Hardware device photos come from the Menu Image plugin — see .mm-card-tall
   .menu-image below for their sizing. */

/* Explicit overrides — use these if the column order ever changes. */
#inflow-mega-menu .mm-art-inventory > a {
  background-color: var(--mm-cream);
}

#inflow-mega-menu .mm-art-inventory > a:hover {
  border-color: var(--mm-cream-border);
}

#inflow-mega-menu .mm-art-inventory > a:before {
  background-image: url(icons/inFlow-Inventory.svg);
}

#inflow-mega-menu .mm-art-manufacturing > a {
  background-color: var(--mm-purple);
}

#inflow-mega-menu .mm-art-manufacturing > a:hover {
  border-color: var(--mm-purple-border);
}

#inflow-mega-menu .mm-art-manufacturing > a:before {
  background-image: url(icons/inFlow-Manufacturing.svg);
}

#inflow-mega-menu .mm-art-stockroom > a {
  background-color: var(--mm-blue);
}

#inflow-mega-menu .mm-art-stockroom > a:hover {
  border-color: var(--mm-blue-border);
}

#inflow-mega-menu .mm-art-stockroom > a:before {
  background-image: url(icons/inFlow-Stockroom.svg);
}

/* A card outside the Products column with neither a plugin image nor theme
   artwork collapses to a single column instead of leaving an empty gutter. */
#inflow-mega-menu :where(.mm-col:not(.mm-col-products)) .mm-card:not([class*="mm-art-"]):not(.mm-card-tall) > a:not(:has(.menu-image)) {
  grid-template-columns: 1fr;
  grid-template-areas: "title" "desc";
}

/* Large card. The illustration is declared at its natural 166x112 so the column
   is sized before the asset loads — no reflow when it arrives. column-gap gives
   the exact 16px to the text. Path is root-relative so each environment serves
   its own upload. */
#inflow-mega-menu .mm-feature > a {
  position: relative;
  align-content: center;
  column-gap: 16px;
  padding: 12px;
}

/* Product icon overlaid flush into the illustration's top-left corner. Absolute
   so it sits on the artwork without taking a grid cell; the offsets match the
   card's padding, which is where the illustration starts. */
#inflow-mega-menu .mm-feature > a:after {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  background-image: url(icons/inFlow-Inventory.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#inflow-mega-menu .mm-feature > a:before {
  content: "";
  display: block;
  grid-area: img;
  align-self: center;
  width: 166px;
  height: 112px;
  background-image: url(/wp-content/uploads/2026/09/inFlow-Inventory-Menu-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 166px 112px;
}

/* The illustration lives in the card's background image, so a plugin image on
   this item would double it up. */
#inflow-mega-menu .mm-feature .menu-image {
  display: none;
}

#inflow-mega-menu .mm-feature .menu-image-title,
#inflow-mega-menu .mm-feature .mm-title {
  font-size: 28px;
  line-height: 1.2;
}

#inflow-mega-menu .mm-feature .mm-desc {
  font-size: 14px;
  line-height: 1.4;
  padding-top: 4px;
}

/* Small cards sit two-up under the large one. */
/* Feature card, then the two small cards, then the CTA in a row that absorbs
   the leftover height so the link sits on the bottom edge. */
#inflow-mega-menu .mm-col-products .mm-col-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  max-width: 554px;
}

#inflow-mega-menu .mm-col-products .mm-feature,
#inflow-mega-menu .mm-col-products .mm-cta-link {
  grid-column: 1 / -1;
}

#inflow-mega-menu .mm-col-products .mm-cta-link {
  align-self: end;
}

/* List columns stack, and the CTA is pushed down to match. */
#inflow-mega-menu .mm-col-list .mm-col-items {
  display: flex;
  flex-direction: column;
}

#inflow-mega-menu .mm-col-list .mm-cta-link {
  margin-top: auto;
}

#inflow-mega-menu .mm-card > a {
  padding: 12px;
  align-items: start;
}

/* The li stretches to the tallest in its grid row by default, but the card is
   the <a> inside it, which is content-sized — so a two-line description made
   Manufacturing taller than Stockroom. Filling the li squares them up, in every
   layout, since it doesn't depend on the breakpoint. */
#inflow-mega-menu .mm-col-products .mm-card > a {
  height: 100%;
}

#inflow-mega-menu .mm-card .menu-image {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

#inflow-mega-menu .mm-card .menu-image-title,
#inflow-mega-menu .mm-card .mm-title {
  font-size: 20px;
  line-height: 1.3;
  align-self: center;
}

#inflow-mega-menu .mm-card .mm-desc {
  font-size: 12px;
  line-height: 1.35;
  padding-top: 4px;
}

/* Hardware devices: image above a centred caption. */
#inflow-mega-menu .mm-col-cards .mm-col-items {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 12px;
}

#inflow-mega-menu .mm-card-tall > a {
  grid-template-columns: 1fr;
  grid-template-areas: "img" "title";
  justify-items: center;
  text-align: center;
  /* border-box so 162px is the visible square, padding and the 1px transparent
     hover border included, rather than 162px plus both. min-width so a caption
     that runs longer than 162px widens the card instead of overflowing it. */
  box-sizing: border-box;
  padding: 16px;
  min-width: 162px;
}

/* justify-self rather than relying on the parent's justify-items: the shared
   .mm-card .menu-image rule places this in the img grid area, and an explicit
   self-alignment can't be undone by anything the plugin puts on the element. */
#inflow-mega-menu .mm-card-tall .menu-image {
  justify-self: center;
  width: 80px;
  height: 80px;
  border-radius: 0;
  margin-bottom: 10px;
}

#inflow-mega-menu .mm-card-tall .menu-image-title,
#inflow-mega-menu .mm-card-tall .mm-title {
  justify-self: center;
  white-space: nowrap;
  font-family: 'ZonaPro Bold 700', Helvetica, Arial, sans-serif;
  font-size: 12px;
}

/* Card tints. background-color, not the background shorthand — the shorthand
   resets background-image, which would wipe the Inventory card's artwork. */
#inflow-mega-menu .mm-tint-cream > a  { background-color: var(--mm-cream); }
#inflow-mega-menu .mm-tint-purple > a { background-color: var(--mm-purple); }
#inflow-mega-menu .mm-tint-blue > a   { background-color: var(--mm-blue); }
#inflow-mega-menu .mm-tint-grey > a   { background-color: var(--mm-grey); }

/*------------------------------------------------------------------------------
  5. CTA LINK + BUTTON
------------------------------------------------------------------------------*/
/* Flex, so the inline-flex anchor stops sitting on a text baseline. Otherwise
   the line box adds a few px of descender under it and the underline no longer
   lands on the column's bottom edge. */
#inflow-mega-menu .mm-cta-link {
  display: flex;
}

#inflow-mega-menu .mm-cta-link > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* The underline pins to the bottom edge, so this padding is the gap between
     it and the text — roughly 4px of descender space, tripled. */
  padding-top: 14px;
  padding-bottom: 8px;
  color: var(--mm-text);
  font-family: 'ZonaPro Semi Bold 600', Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-decoration: none;
}

#inflow-mega-menu .mm-cta-link > a:after {
  content: "";
  /* The glyph sits low in its own viewBox; nudge it onto the text's optical
     centre. Uses top rather than transform, which the hover slide owns. */
  position: relative;
  top: -1px;
  width: 14px;
  height: 18px;
  background-image: url(icons/arrow-small.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.2s ease;
}

/* Underline grows in from the left on hover. scaleX from a left origin, so it
   animates width without triggering layout. */
#inflow-mega-menu .mm-cta-link > a:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

#inflow-mega-menu .mm-cta-link > a:hover:before {
  transform: scaleX(1);
}

#inflow-mega-menu .mm-cta-link > a:hover:after {
  transform: translateX(4px);
}

/* Grid rather than flex: the walker emits icon, title, external and description
   as flat siblings, and the subtitle has to sit under the title while the icon
   and external arrow span both rows. Named areas place them regardless of
   source order. The second row is 0fr at rest and 1fr on hover, which animates
   the reveal and lifts the title without any absolute positioning. */
#inflow-mega-menu .mm-button > a {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 0fr;
  grid-template-areas:
    "title external"
    "desc  external";
  align-items: center;
  /* Centres the row block: at rest the second track is 0fr and claims none of
     the spare height, so the title sits centred; on hover it takes that space
     back and carries the title up as the description opens. */
  align-content: center;
  column-gap: 12px;
  /* Full column width, with the title's 1fr track absorbing the slack — that's
     what pushes the external icon to the right edge and lets the space between
     them grow and shrink with the column. */
  width: 100%;
  box-sizing: border-box;
  /* Title plus description plus padding — the hover state's natural height,
     held at rest so the button doesn't resize. See the Help rows for why this
     can't simply be auto. */
  min-height: 48px;
  /* Left padding clears the absolutely positioned tile: 6 + 40 + 12. */
  padding: 6px 12px 6px 58px;
  border-radius: 12px;
  color: var(--mm-text);
  font-family: 'ZonaPro Bold 700', Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-decoration: none;
  transition: grid-template-rows 0.2s ease, background-color 0.2s ease;
}

#inflow-mega-menu .mm-button .mm-title {
  grid-area: title;
  line-height: 20px;
}

#inflow-mega-menu .mm-button .mm-external {
  grid-area: external;
  margin-left: 0;
  padding-left: 0;
}

/* min-height:0 lets the 0fr row actually collapse; overflow clips the subtitle
   while it's collapsed. */
#inflow-mega-menu .mm-button .mm-desc {
  grid-area: desc;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  /* Offset down at rest so it rises into place as it fades in, travelling the
     same direction as the title above it. */
  transform: translateY(10px);
  color: var(--mm-subtext);
  font-family: 'ZonaPro Regular 400', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#inflow-mega-menu .mm-button > a:hover,
#inflow-mega-menu .mm-button > a:focus-visible {
  grid-template-rows: auto 1fr;
}

#inflow-mega-menu .mm-button > a:hover {
  background-color: var(--inflow-preset-color-pine-10, #EBFAF9);
}

#inflow-mega-menu .mm-button > a:focus-visible {
  background-color: var(--inflow-preset-color-pine-20, #CCEBE9);
  outline: none;
}

#inflow-mega-menu .mm-button > a:hover .mm-desc,
#inflow-mega-menu .mm-button > a:focus-visible .mm-desc {
  opacity: 1;
  transform: translateY(0);
}

/* Font Awesome swaps the <i> for an inline <svg> carrying .mm-icon, so this is
   the glyph itself, not a wrapper — the tile has to come from padding.
   content-box so the padding sits around the glyph instead of eating into it. */
#inflow-mega-menu .mm-button .mm-icon {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 8px 8px 5px 9px;
  border-radius: 8px;
  background: var(--mm-mint);
}

/* Buy hardware sits on the column's bottom edge, level with the CTA links in
   the other panels. */
#inflow-mega-menu .mm-col-promo .mm-col-items {
  display: flex;
  flex-direction: column;
}

#inflow-mega-menu .mm-col-promo .mm-button {
  margin-top: auto;
}

/* Hardware promo column: the heading is the pitch, so it reads as a headline. */
#inflow-mega-menu .mm-col-promo > .mm-col-heading {
  margin-bottom: 18px;
  max-width: 220px;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
}

/*------------------------------------------------------------------------------
  6. OPEN / CLOSE
------------------------------------------------------------------------------*/
@media (min-width: 1025px) {
  /* The menu itself is centred on the page above, so the panels centre on the
     menu and land in the same place — no measured offset needed. */
  #inflow-mega-menu .mm-panel-inner {
    position: absolute;
    top: calc(100% + var(--mm-gap));
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: max-content;
    max-width: calc(100vw - 48px);
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }

  /* Invisible bridge across the gap. Without it the pointer leaves .mm-panel on
     the way down to the panel and the whole thing closes mid-travel. It sits in
     the dead strip below the header, so it never covers the menu items, and it
     inherits pointer-events:none while the panel is hidden. */
  #inflow-mega-menu .mm-panel-inner:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--mm-gap));
    height: var(--mm-gap);
  }

  #inflow-mega-menu > .mm-panel:hover > .mm-panel-inner,
  #inflow-mega-menu > .mm-panel:has(:focus-visible) > .mm-panel-inner {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
  }

  /* Open state on the trigger itself. */
  #inflow-mega-menu > .mm-panel:hover > a,
  #inflow-mega-menu > .mm-panel:has(:focus-visible) > a {
    background: var(--inflow-preset-color-sun-20, #FCF0DB);
  }

  #inflow-mega-menu > .mm-panel:hover > a:after,
  #inflow-mega-menu > .mm-panel:has(:focus-visible) > a:after {
    transform: rotate(180deg);
  }

  /* Dim the page behind an open panel. */
  #inflow-mega-menu:has(.mm-panel:hover):after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
  }
}

/* Tablet only: keep Log in / Free trial usable while the menu is open. Two
   rules in style.css otherwise take them away — .inflow-transparent-on-desktop
   is opacity:0 from 980px up, and #inflow-secondary-menu is display:none at
   768px and below — so the buttons only survive in the 769–979 band.

   Deliberately stops at 769px. Below that the header has no room for both
   buttons beside the logo and toggle, and forcing them back overflows the page
   (measured 463px of content in a 390px viewport, which also pushed the close
   button off). On phones they belong at the foot of the panel instead. */
@media (min-width: 769px) and (max-width: 1024px) {
  body.inflow-mobile-menu-open #inflow-secondary-menu {
    display: block;
  }

  body.inflow-mobile-menu-open #inflow-secondary-menu .inflow-transparent-on-desktop {
    opacity: 1 !important;
  }
}

/*------------------------------------------------------------------------------
  7. MOBILE
  mobile-menu.js toggles .inflow-hover on the tapped top-level item.
------------------------------------------------------------------------------*/
@media (max-width: 1024px) {
  /* Full-screen overlay anchored to the header section, slid out of view until
     #inflow-mobile-menu-toggle puts .inflow-mobile-menu-open on the body. Same
     mechanism as the legacy #menu-main-menu in style.css, so the existing
     toggle drives this with no JS changes. */
  /* top:100% is the bottom of the header section, which is the header row's
     bottom edge — the row is the last thing in that section. Anchoring here
     rather than at top:0 means the panel never paints over the row's border.
     It can't be anchored to the row itself: Divi forces .et_pb_row static, so
     position:relative on it is refused. */
  /* Flex-wrap rather than block: every row takes a full line, and the two CTAs
     at the end share the last one. Whitespace between the <li>s rules out
     inline-block, and there's no wrapper element to float against. */
  #inflow-mega-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 12px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 90;
    padding: 16px 16px 32px;
    background: var(--mm-panel-bg);
    border-radius: 0 0 40px 40px;
  }

  /* display, not the transform-slide the legacy menu uses. Tested on the live
     header: a transition on this element gets stuck mid-flight and the closed
     transform never lands, which leaves the whole menu sitting open over the
     page. display:none can't be swallowed that way. The cost is the slide-in
     animation, which isn't worth the failure mode. */
  body:not(.inflow-mobile-menu-open) #inflow-mega-menu {
    display: none;
  }

  /* No admin-bar offset needed any more: the panel hangs off the bottom of the
     header section, which already sits below the admin bar. Adding 32px here
     would open a gap between the row and the panel instead of closing one. */

  /* Dim the page behind the open menu, matching the desktop hover backdrop.
     On body rather than on #inflow-mega-menu: the mobile panel has its own
     white background, and a negative-z pseudo-element paints *over* its
     originating element's background rather than under it. Sits at 80, below
     the panel (90) and the header (95), above everything else. */
  body.inflow-mobile-menu-open:after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0, 0, 0, 0.3);
  }

  /* Divi wraps the header in .et_builder_inner_content at position:relative,
     z-index:2 — a stacking context. The panel's z-index:90 is therefore scoped
     inside it, and the whole header competes with the scrim at 2, losing. This
     lifts the context itself above the scrim; the 90/95 ordering within it is
     unaffected. Scoped to the header's copy, not the page's. */
  body.inflow-mobile-menu-open .et-l--header .et_builder_inner_content {
    z-index: 85;
  }

  /* The sticky header carries its own duplicate logo and Free trial, which sit
     on top of the header row's pair. The duplicate is forced to height:46px by
     et-core-unified-*.css and is placed by the sticky section rather than the
     row, so it lands a few px below the real one and reads as misaligned.
     Hiding the sticky section while the menu is open leaves just the row's own
     Log in / Free trial, which do share the row's centre line. */
  body.inflow-mobile-menu-open #inflow-header-sticky-section-1 {
    display: none;
  }

  /* The duplicate that just got hidden was 46px; the row's own Free trial is
     44px, so swapping one for the other shrinks the button the instant the menu
     opens. Matching the height keeps it visually identical through the toggle. */
  body.inflow-mobile-menu-open #inflow-secondary-menu .inflow-transparent-on-desktop .inflow-button {
    height: 46px;
    /* The sticky duplicate this replaces sat fractionally lower; nudging the
       open-state button down keeps it on the same line through the toggle. */
    position: relative;
    top: 1px;
  }

  /* The header section shows a grey strip around the rounded bar; white while
     the menu is open so the bar, the strip and the panel below read as one
     continuous surface. */
  body.inflow-mobile-menu-open .inflow-header-section-container {
    background-color: var(--mm-panel-bg) !important;
  }

  /* Header row closes off with a rounded, bordered edge while the menu is open,
     so it reads as one panel with the overlay below it. */
  body.inflow-mobile-menu-open #header-menu-row {
    border: 1px solid var(--inflow-preset-color-mineshaft-40, #DDD);
    border-top: 0;
    border-radius: 0 0 24px 24px;
    padding-bottom: 16px !important;
  }

  /* That bottom padding grows the row, and the column stretches with it — which
     drags Log in / Free trial down with the extra height. Centring the column's
     items keeps them on the logo's line instead. */
  body.inflow-mobile-menu-open #header-menu-row .et_pb_column.flex {
    align-items: center;
  }

  /* The overlay covers the header, so the close button, logo and buttons have
     to be lifted above it explicitly. style.css does give these z-index:100,
     but it computes to auto here, so they'd otherwise be relying on a stacking
     accident — and the close button would be unreachable if it changed. */
  #mobile-menu-toggle-container,
  #inflow-logo,
  #inflow-logo-mobile,
  #inflow-secondary-menu {
    position: relative;
    z-index: 95;
  }

  /* Log in / Free trial: see the 769–1024 block below. */

  /* Top level becomes a stack of accordion rows, capped and centred so the
     content doesn't stretch edge to edge on a tablet. Each row's panel is
     inside its li, so this caps the panels too. */
  #inflow-mega-menu > li {
    flex: 0 0 100%;
    max-width: 672px;
    margin: 0 auto 8px;
  }

  /* The pair share the final row, capped so together they match a full row's
     672px. Centred by the container's justify-content on narrower screens. */
  /* display:flex on the item, with the anchor stretching to fill it — the two
     otherwise size to their own text and sit at different heights. */
  #inflow-mega-menu > .mm-cta {
    display: flex;
    flex: 1 1 calc(50% - 6px);
    max-width: 330px;
    margin: 16px 0 0;
  }

  /* 12px sides rather than the rows' 24px, and nowrap: at half a row's width
     the label only has ~124px to work with at 24px padding, which is enough to
     wrap "Book a demo" onto two lines and make that button 16px taller than
     its neighbour. */
  #inflow-mega-menu > .mm-cta > a {
    flex: 1;
    justify-content: center;
    align-items: center;
    min-height: 56px;
    padding: 16px 12px;
    border-radius: 8px;
    font-family: 'ZonaPro Bold 700', Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
  }

  /* No icons on these — they're buttons, not navigation rows. The arrow is a
     pseudo-element on every non-panel row, and Free trial opens in a new tab so
     the walker also gives it an external-link icon. Both come off. */
  #inflow-mega-menu > li.mm-cta > a:after {
    content: none;
  }

  #inflow-mega-menu > li.mm-cta .mm-external {
    display: none;
  }

  #inflow-mega-menu > .mm-cta-fill > a {
    background: var(--inflow-preset-color-sun, #F7B952);
  }

  #inflow-mega-menu > .mm-cta-outline > a {
    background: none;
    border: 1px solid var(--mm-text);
  }

  /* 56px tall: 24px line box (20px at the inherited 1.2) plus 16px of padding
     top and bottom. min-height states the target rather than leaving it as a
     side effect of the padding arithmetic. */
  #inflow-mega-menu > li > a {
    width: 100%;
    justify-content: space-between;
    min-height: 56px;
    padding: 16px 24px;
    border-radius: 8px;
    background: var(--inflow-preset-color-sun-10, #FEF8EF);
    font-family: 'ZonaPro Bold 700', Helvetica, Arial, sans-serif;
    font-size: 18px;
  }

  #inflow-mega-menu > .mm-panel.inflow-hover > a {
    background: var(--inflow-preset-color-sun-20, #FCF0DB);
  }

  #inflow-mega-menu > .mm-panel > a:after {
    width: 14px;
    height: 14px;
  }

  #inflow-mega-menu > .mm-panel.inflow-hover > a:after {
    transform: rotate(180deg);
  }

  /* Pricing and Talk to Sales have no panel, so they get an arrow instead of a
     chevron. */
  #inflow-mega-menu > li:not(.mm-panel):not(.mm-cta) > a:after {
    content: "";
    width: 14px;
    height: 18px;
    background-image: url(icons/arrow-small.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* The panel is no longer a floating card — it's inline content under its row.
     The desktop positioning lives in the min-width block, so only the card
     styling from the base rule needs undoing here. */
  /* No horizontal padding: the panel's content lines up with the outer edge of
     the accordion rows above it, rather than sitting 8px inside them. */
  #inflow-mega-menu .mm-panel-inner {
    display: none;
    flex-direction: column;
    gap: 24px;
    padding: 24px 0 32px;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }

  #inflow-mega-menu > .mm-panel.inflow-hover > .mm-panel-inner {
    display: flex;
  }

  #inflow-mega-menu .mm-panel-software .mm-panel-inner {
    padding-right: 8px;
  }

  /* Columns stack, so the vertical rules and their insets come off. */
  #inflow-mega-menu .mm-col + .mm-col,
  #inflow-mega-menu .mm-panel-hardware .mm-col + .mm-col {
    border-left: 0;
    padding-left: 0;
  }

  /* Software's use cases go two-up, with the closing CTA across both.
     minmax(0,1fr) rather than 1fr so a long label can't push its column wider
     than half — plain 1fr refuses to shrink below the content's min width.
     Scoped to the Software panel: Help uses the same .mm-col-list class but
     stays single column. */
  #inflow-mega-menu .mm-panel-software .mm-col-list .mm-col-items {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
  }

  #inflow-mega-menu .mm-panel-software .mm-col-list .mm-cta-link {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  /* Every tiled icon is 36px on mobile — the Help rows and the Buy hardware
     button alike. */
  #inflow-mega-menu .mm-panel-help .mm-link .mm-icon,
  #inflow-mega-menu .mm-button .mm-icon {
    width: 36px;
    height: 36px;
  }

  /* Tile flush with the row's left edge, lining Buy hardware up with the
     heading above it. The tile is absolutely positioned, so the offset comes
     off it — setting padding-left to 0 alone would leave it where it was and
     run the label underneath. Left padding is then 36 tile + 12 gap. */
  #inflow-mega-menu .mm-button .mm-icon {
    left: 0;
  }

  #inflow-mega-menu .mm-button > a {
    padding-left: 48px;
  }

  /* Indents: the column heading sits 16px in from the panel's content edge and
     the rows 32px, so the icons line up one step further than the pill above
     them. Putting the 32px on the li rather than the anchor means the divider
     starts at the icon's edge too. */
  #inflow-mega-menu .mm-panel-help .mm-col-heading {
    margin-left: 16px;
  }

  #inflow-mega-menu .mm-panel-help .mm-link {
    margin-left: 32px;
  }

  /* 8px above and below the tile — that padding is the gap between the icon and
     the dividers. The tile is absolutely positioned and adds no height of its
     own, so min-height reserves 36 + 8 + 8. Left padding is 36 tile + 12 gap,
     with the tile itself flush at the row's edge. */
  #inflow-mega-menu .mm-panel-help .mm-link .mm-icon {
    left: 0;
  }

  #inflow-mega-menu .mm-panel-help .mm-link > a {
    min-height: 52px;
    margin: 0;
    padding: 8px 21px 8px 48px;
  }

  /* Indent ladder across the whole mobile range, the same shape the Help panel
     uses: column headings sit 16px in, the product cards stay flush with their
     PRODUCTS heading, and the use-case rows and both closing CTAs step in a
     further 16px. */
  #inflow-mega-menu .mm-panel-software .mm-col-heading,
  #inflow-mega-menu .mm-col-products .mm-col-items {
    margin-left: 16px;
  }

  #inflow-mega-menu .mm-panel-software .mm-col-list .mm-link,
  #inflow-mega-menu .mm-panel-software .mm-col-list .mm-cta-link {
    margin-left: 32px;
  }

  /* Its list is already inset 16px, so this adds the second step. */
  #inflow-mega-menu .mm-col-products .mm-cta-link {
    margin-left: 16px;
  }


  /* Help rows run full width, separated by a rule rather than a gap. Stated
     explicitly rather than left to the desktop base rule, so it can't be
     reached by the two-up grid above. */
  #inflow-mega-menu .mm-panel-help .mm-col-list .mm-col-items {
    display: flex;
    flex-direction: column;
  }

  #inflow-mega-menu .mm-panel-help .mm-link {
    margin-bottom: 0;
    border-bottom: 1px solid var(--mm-rule);
  }

  #inflow-mega-menu .mm-panel-help .mm-link:last-child {
    border-bottom: 0;
  }

  /* Trailing arrow on every Help row, except the ones that already carry an
     external-tab icon in that same grid area — :not(:has()) keeps the two from
     stacking on top of each other. */
  #inflow-mega-menu .mm-panel-help .mm-link > a:not(:has(.mm-external)):after {
    content: "";
    grid-area: external;
    width: 14px;
    height: 18px;
    background-image: url(icons/arrow-small.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* No hover on touch, so the use-case arrows are simply always shown. Scoped
     to the Use cases column — the Features rows sit in the same panel and share
     the .mm-link class, but the design has no arrow on them. Size comes from the
     base rule: 14x18 everywhere. */
  #inflow-mega-menu .mm-panel-software .mm-col-list .mm-link > a:after {
    opacity: 1;
    transform: none;
  }

  /* Same reasoning for the rows that carry a description: the desktop hover
     state is the default here, with the second row open rather than collapsed
     to 0fr so title and description are both visible. */
  #inflow-mega-menu .mm-panel-help .mm-link > a,
  #inflow-mega-menu .mm-button > a {
    grid-template-rows: auto auto;
  }

  #inflow-mega-menu .mm-panel-help .mm-link .mm-desc,
  #inflow-mega-menu .mm-button .mm-desc {
    opacity: 1;
    transform: none;
  }

  /* Help rows keep their tiles but must not force a 230px column. */
  #inflow-mega-menu .mm-panel-help .mm-link {
    min-width: 0;
  }

  /* Hardware's two device cards share the row instead of holding 162px each. */
  #inflow-mega-menu .mm-col-cards .mm-card-tall {
    flex: 1;
  }

  #inflow-mega-menu .mm-card-tall > a {
    width: 100%;
    min-width: 0;
  }

  /* The promo heading is a full-width headline over the Buy hardware row, not
     the 220px-wrapped column heading it is on desktop. */
  #inflow-mega-menu .mm-col-promo > .mm-col-heading {
    max-width: none;
    margin-bottom: 12px;
    font-size: 18px;
  }

  /* Buy hardware is a row in the flow here, not pinned to a column's bottom. */
  #inflow-mega-menu .mm-col-promo .mm-button {
    margin-top: 0;
  }

  /* The products grid keeps its two-up small cards — only the feature card and
     the CTA span the full width, which is already the desktop behaviour.
     minmax(0,1fr) rather than 1fr: a plain fr won't shrink below its content's
     minimum, and the Inventory card's 166px illustration plus its text forces
     the grid to 422px, overflowing a 390px phone. */
  #inflow-mega-menu .mm-col-products .mm-col-items {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: none;
  }
}

/*================================================================================================
  8. T28 — SOFTWARE PANEL, SINGLE-PRODUCT VARIANT  (.mm-col-features)
  ------------------------------------------------------------------------------------------------
  T28-1 sells inFlow as one product, so the Software panel's three product cards are replaced by
  a flat feature list grouped under three pill labels. Both versions are in the markup for every
  visitor — the menu is server-rendered and page-cached, so the swap has to be CSS.

  js/inflow-packaging-test-t28.js puts "t28-1" on <html>. An EXCLUDED visitor gets no class at
  all, which is why .mm-col-features is hidden by default and only .t28-1 reveals it: "no class"
  must mean "see the control". The class can land after first paint because geo is async — that's
  safe here and only here, because the panel is closed until hover.

  Backend structure (WP > Appearance > Menus), indented under the Software item:
    li.mm-col.mm-col-features     "Features"                 <- column heading
      li.mm-group                 "Core operations"          <- url '#', renders as a pill
        li.mm-link                links, indented under it
      li.mm-group                 "Fulfillment"
        li.mm-link                ...
      li.mm-group                 "Insights & connections"
        li.mm-link                ...
      li.mm-cta-link              "See all features"

  Nothing below cares how many groups there are or how many links each one holds — a group is
  one grid item in row 1, and its links are a plain list inside it. Add, remove or reorder them
  in the backend and the layout follows. This is why the groups are real nested items rather
  than one flat list: a flat list can only be split into columns by counting, and the count
  would then live in this file.
================================================================================================*/

/* Hidden for control AND for excluded visitors. */
#inflow-mega-menu .mm-col-features {
  display: none;
}

/* .mm-col is display:flex/column in section 2; restate it, since the default above is the
   off switch and `display: revert` would give us a plain block. */
.t28-1 #inflow-mega-menu .mm-col-features {
  display: flex;
}

.t28-1 #inflow-mega-menu .mm-col-products {
  display: none;
}

/* With Products hidden, Features is the panel's second .mm-col and so still matches the
   `.mm-col + .mm-col` divider rules — it's the leading column now, so take them back off.
   Both breakpoints' properties are reset here rather than in two places. */
.t28-1 #inflow-mega-menu .mm-col-features {
  border-left: 0;
  border-top: 0;
  padding-left: 0;
  padding-top: 0;
  margin-top: 0;
}

/* Groups side by side, CTA on its own row beneath them. Two rows, and BOTH child types name
   their row explicitly — so auto-placement only ever picks the column, and an extra group is
   just an extra auto column. grid-auto-columns (not grid-template-columns) is what keeps the
   group count out of this file. */
#inflow-mega-menu .mm-col-features .mm-col-items {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(155px, max-content);
  /* Row 2 takes the slack so the CTA lands on the panel's bottom edge, level with the one in
     Use cases. */
  grid-template-rows: auto 1fr;
  column-gap: 40px;
}

#inflow-mega-menu .mm-col-features .mm-group {
  grid-row: 1;
}

#inflow-mega-menu .mm-col-features .mm-cta-link {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}

/* The group's own link list — emitted by the walker at depth 2, and deliberately not
   .mm-col-items, so it doesn't inherit the grid above. */
#inflow-mega-menu .mm-group-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Group labels: grey pills, the same treatment as the Help panel's column headings. The walker
   renders a '#' item below depth 1 as span.mm-static, and wraps its label in .mm-title. */
#inflow-mega-menu .mm-col-features .mm-static {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--inflow-preset-color-mineshaft-20, #F3F3F3);
  color: var(--mm-text);
  font-family: 'ZonaPro Regular 400', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: default;
}

/* Feature rows carry a cream icon tile instead of the Use cases columns' bare glyph. Same
   construction as .mm-panel-help .mm-link .mm-icon, one size down: border-box so 32px is the
   visible square, and padding is what sizes the glyph inside it. */
#inflow-mega-menu .mm-col-features .mm-link .mm-icon {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  padding: 8px;
  border-radius: 8px;
  background: var(--inflow-preset-color-sun-30, #FCDFAF);
  font-size: inherit;
  transition: background-color 0.2s ease;
}

/* Section 3's Software hover turns the glyph orange, which on a tile reads as the icon
   vanishing into its own background. Tint the tile instead and leave the glyph alone. */
#inflow-mega-menu .mm-col-features .mm-link > a:hover .mm-icon {
  color: var(--mm-text);
  background-color: var(--inflow-preset-color-sun-40, #FACC81);
}

#inflow-mega-menu .mm-col-features .mm-link > a {
  font-family: 'ZonaPro Bold 700', Helvetica, Arial, sans-serif;
  font-size: 15px;
}

@media (max-width: 1024px) {
  /* One column, groups stacked in source order, CTA last. */
  #inflow-mega-menu .mm-col-features .mm-col-items {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    column-gap: 0;
  }

  #inflow-mega-menu .mm-col-features .mm-group,
  #inflow-mega-menu .mm-col-features .mm-cta-link {
    grid-column: auto;
    grid-row: auto;
  }

  /* Stacked now, so a group opens below the previous one's last link and needs the gap.
     Deliberately mobile-only: on desktop every pill sits in row 1, and a top margin on all
     but the first would push that row down and leave the first pill sitting high. */
  #inflow-mega-menu .mm-col-features .mm-group + .mm-group {
    margin-top: 16px;
  }

  /* Same indent ladder as the Help panel: group pill 16px in from the panel's
     content edge, rows 32px, so the tiles sit one step further than the pill.
     The 32px goes on the li so the divider starts at the tile's edge too. */
  #inflow-mega-menu .mm-col-features .mm-static {
    margin-left: 16px;
  }

  #inflow-mega-menu .mm-col-features .mm-link {
    margin-left: 32px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--mm-rule);
  }

  #inflow-mega-menu .mm-col-features .mm-group:last-of-type .mm-link:last-child {
    border-bottom: 0;
  }

  /* 36px to match every other mobile tile — the desktop rule sizes these one
     step down at 32px. These rows are the plain flex construction, not Help's
     grid, so the tile is an ordinary flex child rather than positioned. */
  #inflow-mega-menu .mm-col-features .mm-link .mm-icon {
    width: 36px;
    height: 36px;
  }

  #inflow-mega-menu .mm-col-features .mm-link > a {
    min-height: 52px;
    margin: 0;
    padding: 8px 0;
  }
}

/*------------------------------------------------------------------------------
  8. NARROW PHONES (<= 560px)
  Two-up layouts stop fitting here, so they drop to one column.
------------------------------------------------------------------------------*/
@media (max-width: 560px) {
  /* Use cases go single column — at two-up the longer labels wrap to three
     lines and the rows stop lining up with each other. */
  #inflow-mega-menu .mm-panel-software .mm-col-list .mm-col-items {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Manufacturing and Stockroom stack too. Their 36px icon plus a two-line
     description leaves very little for the title at half width. Inventory and
     the CTA already span the full row, so one column suits all four. */
  #inflow-mega-menu .mm-col-products .mm-col-items {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The device captions are nowrap above this width so the two cards stay the
     same height. Down here the cards are too narrow for "Portable Label
     Printer" on one line, and nowrap would push it past the panel edge. */
  #inflow-mega-menu .mm-card-tall .menu-image-title,
  #inflow-mega-menu .mm-card-tall .mm-title {
    white-space: normal;
  }

  /* Inset to match the indent ladder. Above this width the cards run to the
     panel's edges instead. The promo section below them — the headline and the
     Buy hardware row — takes the same inset. Scoped through .mm-panel-hardware
     so it outweighs the rule that strips the divider inset off that panel's
     second column, which is this one. */
  #inflow-mega-menu .mm-col-cards .mm-col-items,
  #inflow-mega-menu .mm-panel-hardware .mm-col + .mm-col-promo {
    padding-left: 16px;
    padding-right: 16px;
  }

}

li#menu-item-74642 a,
li#menu-item-74643 a {
	position: relative;
}

li#menu-item-74642 a:after,
li#menu-item-74643 a:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2026/09/Portable-Printer-1.png);
    background-repeat: no-repeat;
    background-position: center top 16px;
	opacity: 0;
}
li#menu-item-74642 a:after {
	background-image: url(/wp-content/uploads/2026/09/Mask-group.png);
    background-position: center top;
}
li#menu-item-74642:hover a:after,
li#menu-item-74643:hover a:after {
	opacity: 1;
}