/* ==========================================================================
   header-v3.css — the v3 header / mega-menu overrides.
   --------------------------------------------------------------------------
   Promoted out of the inline <style id="header-v3-overrides"> block that
   index.html, assistants.html and email-agent.html each carried a copy of —
   phase 2 of the rollout, as that block's own comment called for. Every page
   links this instead, so the header has ONE source of truth.

   A new shared file on purpose: s-7b769d0663.css and s-ef39ab5d25.css are not
   edited — 49 pages depend on them. Linked last in <head> so these rules still
   win the cascade over the base .header styles.
   ========================================================================== */

/* ---- One shell for every mega menu ---------------------------------- */
#header .mega-menu.mx-menu {
  width: min(1040px, calc(100vw - 48px)) !important;
  max-width: none !important;
  padding: 0 !important;
  overflow: hidden;
}
.mx { display: grid; grid-template-columns: 280px 1fr; }

.mx__aside {
  padding: 30px 26px;
  background: #FBFBFC;
  border-right: 1px solid #ECECEF;
}
.mx__eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4338ca;
}
.mx__title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: #1E1E24;
}
.mx__desc {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #6E6E78;
}
.mx__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #4338ca;
  text-decoration: none;
}
.mx__cta:hover { text-decoration: underline; }

/* Bullet points in the rail (used by Platform). */
.mx__points { margin: 0 0 18px; padding: 0; list-style: none; }
.mx__points li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #4A4A54;
}
.mx__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6366f1;
}

.mx__main { padding: 26px 28px 22px; }
.mx__group + .mx__group { margin-top: 20px; }
.mx__gtitle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9A9AA2;
  white-space: nowrap;
}
.mx__gtitle::after { content: ""; flex: 1; height: 1px; background: #ECECEF; }

.mx__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
}
.mx__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color .15s ease;
}
.mx__item:hover { background: #F4F5FF; }
.mx__item:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

.mx__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #F3F4F6;
  color: #6366f1;
}
.mx__ic svg { width: 17px; height: 17px; }
/* The only filled chip on the whole header: Build & operate. */
.mx__ic--build { background: #6366f1; color: #fff; }

.mx__txt { min-width: 0; }
.mx__n {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #1E1E24;
}
.mx__d {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #6E6E78;
}

.mx__item--soon { cursor: default; opacity: .7; }
.mx__item--soon:hover { background: transparent; }
.nav-soon-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid rgba(99,102,241,.32);
  border-radius: 999px;
  background: #eef0fe;
  color: #4338ca;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* Stats bar (Agents only): hairline, muted, no fill. */
#header .agents-stats {
  margin: 0;
  background: #fff !important;
  border-top: 1px solid #ECECEF !important;
}
#header .agents-stat strong { color: #1E1E24 !important; }
#header .agents-stat span  { color: #6E6E78 !important; }

/* Solutions: plain top-level link, so no caret.
   Retained for any page still on the pre-dropdown nav; the converted pages use
   .nav-item[data-dropdown="solutions"] and show the caret like every other item. */
.nav-item--plain .nav-link svg { display: none; }

/* ---- Solutions: industry-first two-panel ----------------------------------
   The visitor self-identifies by industry (rail) and reads that industry's
   revenue outcomes (panel). Same [rail | content] shape as every other mega
   menu, so it inherits the base .mx grid; only the rail's internals and the
   swapping panels are new. Scoped to .mx--ind — no other dropdown is affected.

   RTL (ar/he): CSS grid tracks follow `direction`, so the rail lands on the
   right by itself. The only thing that does not mirror is a physical border —
   hence border-inline-end below. Nothing here is scoped to a locale. */
.mx--ind { grid-template-columns: 264px 1fr; }
.mx--ind .mx__aside {
  padding: 22px 14px;
  border-right: 0;                        /* drop the physical border… */
  border-inline-end: 1px solid #ECECEF;   /* …re-add it direction-aware */
}
.mx--ind .mx__main { padding: 22px 24px 18px; }

/* Rail — the 7 industries. Each row is a real link to its industry page, so
   Enter follows it; hover/focus only swaps the panel next to it. */
.mxi__rail { display: flex; flex-direction: column; gap: 2px; }
.mxi__rail .mx__gtitle { padding: 0 10px; }
.mxi__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color .15s ease;
}
.mxi__ind:hover,
.mxi__ind.is-active { background: #F4F5FF; }
.mxi__ind:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.mxi__ind .mx__n { font-size: 13.5px; }
.mxi__ind.is-active .mx__n { color: #4338ca; }

/* Panels — one per industry, stacked; only the active one renders. The first
   is marked active in the markup, so with JS off the menu still reads.
   The rail is 7 rows tall and a panel is 3, so the panel is laid out as a column
   with the footer pushed to the bottom edge (below) — otherwise the CTA floats
   mid-panel above ~170px of dead space. */
.mxi__panel { display: none; }
.mxi__panel.is-active {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.mxi__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 12px;
}
.mxi__uc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color .15s ease;
}
.mxi__uc:hover { background: #F4F5FF; }
.mxi__uc:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.mxi__uctxt { min-width: 0; }
.mxi__uc .mx__n { font-size: 13.5px; }
.mxi__uc .mx__d { font-size: 11.5px; }

/* Operation tag: the revenue motion, legible but deliberately quiet — the
   industry tone already carries the colour in this panel. */
.mxi__tag {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid #E4E4E9;
  border-radius: 999px;
  background: #F7F7F9;
  color: #6E6E78;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mxi__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;      /* sit on the panel's bottom edge, not under the last row */
  padding-top: 14px;
  border-top: 1px solid #ECECEF;
}
.mxi__benefit { font-size: 12px; line-height: 1.4; color: #9A9AA2; }

/* Per-industry tone accents on the icon tiles (decorative; every action on the
   panel stays indigo). */
.mx__ic--violet { background: #EEF0FE; color: #4f46e5; }
.mx__ic--teal   { background: #E4F4F1; color: #0d9488; }
.mx__ic--blue   { background: #E8EFFD; color: #2563eb; }
.mx__ic--green  { background: #E6F4EE; color: #059669; }
.mx__ic--amber  { background: #FBF0E1; color: #b45309; }
.mx__ic--pink   { background: #FBE9F1; color: #db2777; }

.mobile-accordion-trigger--link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-decoration: none;
}

@media (max-width: 1100px) {
  .mx { grid-template-columns: 1fr; }
  .mx__aside { border-right: 0; border-bottom: 1px solid #ECECEF; }

  /* Solutions stacks: the industry rail becomes a row of chips above the panel,
     which keeps the industry-first order intact on a narrow screen. */
  .mx--ind { grid-template-columns: 1fr; }
  .mx--ind .mx__aside {
    border-inline-end: 0;
    border-bottom: 1px solid #ECECEF;
  }
  .mxi__rail { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .mxi__rail .mx__gtitle { flex: 1 0 100%; }
  .mxi__ind { border: 1px solid #ECECEF; }
  .mxi__ind .mx__ic { flex-basis: 24px; width: 24px; height: 24px; border-radius: 7px; }
  .mxi__ind .mx__ic svg { width: 13px; height: 13px; }
  .mxi__grid { grid-template-columns: 1fr; }
  .mxi__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}
