.elementor-9004111224736043 .elementor-element.elementor-element-173704f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9004111224736043 .elementor-element.elementor-element-a31b246{--display:flex;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-9004111224736043 .elementor-element.elementor-element-40e5a95{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9004111224736043 .elementor-element.elementor-element-7dcab3d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9004111224736043 .elementor-element.elementor-element-ad2f645{width:100%;max-width:100%;}.elementor-9004111224736043 .elementor-element.elementor-element-ad2f645.elementor-element{--align-self:flex-end;}.elementor-9004111224736043 .elementor-element.elementor-element-2d2abd1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9004111224736043 .elementor-element.elementor-element-d49b052{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9004111224736043 .elementor-element.elementor-element-6cb3ba4{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9004111224736043 .elementor-element.elementor-element-66f7a4d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9004111224736043 .elementor-element.elementor-element-d07e0d6{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9004111224736043 .elementor-element.elementor-element-817fa97{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9004111224736043 .elementor-element.elementor-element-14adadf{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:1px 0px 0px 0px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:var( --e-global-color-c123914 );--border-color:var( --e-global-color-c123914 );--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-9004111224736043 .elementor-element.elementor-element-39ae44b .elementor-button{background-color:#FFFFFF;font-family:"Roboto", Sans-serif;font-size:1rem;font-weight:700;text-transform:capitalize;letter-spacing:-0.3px;fill:#054053;color:#054053;transition-duration:0.2s;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-f7f1952 );border-radius:4px 4px 4px 4px;}.elementor-9004111224736043 .elementor-element.elementor-element-39ae44b .elementor-button:hover, .elementor-9004111224736043 .elementor-element.elementor-element-39ae44b .elementor-button:focus{background-color:var( --e-global-color-f7f1952 );color:#FFFFFF;border-color:var( --e-global-color-f7f1952 );}.elementor-9004111224736043 .elementor-element.elementor-element-39ae44b .elementor-button:hover svg, .elementor-9004111224736043 .elementor-element.elementor-element-39ae44b .elementor-button:focus svg{fill:#FFFFFF;}#elementor-popup-modal-9004111224736043 .dialog-message{width:100vw;height:auto;padding:0px 0px 0px 0px;}#elementor-popup-modal-9004111224736043{justify-content:center;align-items:flex-start;}#elementor-popup-modal-9004111224736043 .dialog-widget-content{margin:0px 0px 0px 0px;}@media(max-width:1366px){.elementor-9004111224736043 .elementor-element.elementor-element-7dcab3d{--margin-top:0px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:1024px){.elementor-9004111224736043 .elementor-element.elementor-element-173704f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9004111224736043 .elementor-element.elementor-element-a31b246{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-9004111224736043 .elementor-element.elementor-element-a31b246.e-con{--flex-grow:1;--flex-shrink:0;}}@media(max-width:1366px) and (min-width:768px){.elementor-9004111224736043 .elementor-element.elementor-element-7dcab3d{--width:100%;}}/* Start custom CSS *//* ===== Popup layout: starts below the header (--pi-header-bottom, set by the header's toggle widget)
   and fills the rest of the screen.
   Elementor sets .dialog-message's height (from the popup's Height setting) with an ID #elementor-popup-modal-9004111224736043,
   so instead of overriding that height, .dialog-message is stretched as a flex item.
   Skipped in the editor so the popup there grows to fit all the panels. ===== */
body:not(.elementor-editor-active) .elementor-popup-modal:has(.pi-mnav-root) {
  top: var(--pi-header-bottom, 0px);
  bottom: 0;
  height: auto;
}
body:not(.elementor-editor-active) .elementor-popup-modal:has(.pi-mnav-root) .dialog-widget-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
}
body:not(.elementor-editor-active) .elementor-popup-modal:has(.pi-mnav-root) .dialog-message {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  max-width: 100%;                  /* the popup's 100vw width includes the scrollbar; this caps it at the visible width */
  overflow: hidden;
}
/* The popup document wrapper sits between .dialog-message and .pi-mnav-root.
   Elementor gives it an inline display: block, so it stays a block; .pi-mnav-root takes 100% of its height. */
.elementor-popup-modal:has(.pi-mnav-root) .dialog-message > [data-elementor-type="popup"] {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

/* ===== Popup containers =====
   Scoped to the popup document so these outrank Elementor's own container rules (".e-con"),
   whatever order the stylesheets load in. */
[data-elementor-type="popup"] .pi-mnav-root {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
  padding: 0;
}
.pi-mnav-root > .pi-mnav-body { flex: 1 1 auto; min-height: 0; }
.pi-mnav-root > .pi-mnav-footer { flex: 0 0 auto; }

[data-elementor-type="popup"] .pi-mnav {
  --pi-mnav-row-bleed: 12px;        /* how far a row's hover fill reaches past its text on each side */
  --pi-mnav-panel-end-space: 80px;  /* empty space after a panel's last item, so it can scroll up off the bottom edge */
  --pi-mnav-desc-icon-size: 36px;   /* icon box on list rows that have one */
  --pi-mnav-promo-max-width: 360px; /* largest size of square promo images */
  --pi-mnav-backbar-height: 52px;   /* shared Back bar: 8px top padding + 44px tap row; submenu panels start below it */
  --pi-mnav-font-size-desc: 0.875rem;  /* descriptions; a step larger than desktop's --pi-nav-font-size-desc */
  --pi-mnav-slide: 0.3s ease;       /* panel slide */

  position: relative;
  overflow: hidden;
  font-family: var(--pi-nav-font-family);
  letter-spacing: var(--pi-nav-letter-spacing);
  color: var(--pi-nav-color-text);
}

.pi-mnav > .pi-mnav-engine { display: none; }

/* ----- Panels: Elementor containers stacked on top of each other, each scrolls on its own.
   ".pi-mnav .pi-mnav__panel" outranks Elementor's ".e-con" defaults (display, padding, position, transition). ----- */
.pi-mnav .pi-mnav__panel {
  container: pi-mnav-panel / inline-size;   /* lets content (e.g. the Framework card) adapt to the panel's width */
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  /* Left/right padding comes from the pi-mnav-body container's padding (set in Elementor).
     The panels are absolutely positioned, so they cover that padding instead of sitting inside it;
     inheriting it puts the same inset on each panel's content. */
  padding: 16px 0 var(--pi-mnav-panel-end-space);
  padding-left: inherit;
  padding-right: inherit;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--pi-nav-color-white);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--pi-mnav-slide), visibility 0s linear 0.3s;
}
.pi-mnav .pi-mnav__panel.is-active {
  transform: none;
  visibility: visible;
  transition: transform var(--pi-mnav-slide), visibility 0s;
}
.pi-mnav .pi-mnav__panel.is-behind { transform: translateX(-25%); }
.pi-mnav.is-resetting .pi-mnav__panel { transition: none; }

/* In case a panel container is set to Boxed */
.pi-mnav .pi-mnav__panel > .e-con-inner { display: block; max-width: none; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .pi-mnav .pi-mnav__panel,
  .pi-mnav .pi-mnav__panel.is-active { transition: none; }
}

/* ----- Elementor editor: show every panel one under another so each can be edited ----- */
.elementor-editor-active .pi-mnav { overflow: visible; }
.elementor-editor-active .pi-mnav .pi-mnav__panel {
  position: relative;
  inset: auto;
  transform: none;
  visibility: visible;
  overflow: visible;
  padding-left: 0;                  /* panels sit inside the body's padding here, so don't add it twice */
  padding-right: 0;
  outline: 1px dashed var(--pi-nav-color-card-border);
  outline-offset: -1px;
}

/* ----- Shared element resets ----- */
.pi-mnav ul { list-style: none; margin: 0; padding: 0; }
.pi-mnav li { margin: 0; }
.pi-mnav a,
.pi-mnav a:hover,
.pi-mnav a:focus { text-decoration: none; }
.pi-mnav :focus-visible { outline: var(--pi-nav-focus-ring); outline-offset: var(--pi-nav-focus-ring-offset); }

/* Strip theme / Elementor kit button styles (".pi-mnav .x:hover" outranks ".elementor-kit-N button:hover") */
.pi-mnav .pi-mnav__root-item,
.pi-mnav .pi-mnav__back {
  appearance: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--pi-nav-color-text);
  font-family: var(--pi-nav-font-family);
  letter-spacing: inherit;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}
/* The kit/theme restyle buttons on hover/focus, so reset those states too, but only the visual properties:
   re-setting margin or radius here would override the rows' own spacing while hovered and make them jump. */
.pi-mnav .pi-mnav__root-item:hover,
.pi-mnav .pi-mnav__root-item:focus,
.pi-mnav .pi-mnav__back:hover,
.pi-mnav .pi-mnav__back:focus {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--pi-nav-color-text);
}

/* ----- Chevron (CSS-drawn) ----- */
.pi-mnav .pi-mnav__chevron {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--pi-nav-color-chevron);
  border-right: 1.5px solid var(--pi-nav-color-chevron);
  transform: rotate(45deg);
  transition: transform var(--pi-nav-transition), border-color var(--pi-nav-transition);
}
.pi-mnav .pi-mnav__chevron--left { transform: rotate(-135deg); }

/* ----- Root list ----- */
/* Dividers sit on the list items, so a row's hover fill can reach past the text without stretching them */
.pi-mnav .pi-mnav__root-list > li { border-bottom: 1px solid var(--pi-nav-color-card-border); }
.pi-mnav .pi-mnav__root-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;           /* buttons default to this; links (e.g. Student Login) don't */
  width: calc(100% + 2 * var(--pi-mnav-row-bleed));
  max-width: none;                  /* themes often cap buttons at max-width: 100%, which would cut the fill short on the right */
  margin: 0 calc(-1 * var(--pi-mnav-row-bleed));
  padding: 18px calc(var(--pi-mnav-row-bleed) + 4px) 18px var(--pi-mnav-row-bleed);
  border-radius: var(--pi-nav-card-radius);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  transition: background-color var(--pi-nav-transition);
}
/* Repeated for :hover/:focus so the button reset above (which clears the background) doesn't win */
.pi-mnav .pi-mnav__root-item:hover,
.pi-mnav .pi-mnav__root-item:focus-visible { background: var(--pi-nav-color-card-hover-bg); }
@media (hover: hover) {
  .pi-mnav .pi-mnav__root-item:hover .pi-mnav__chevron {
    border-color: var(--pi-nav-color-text);
    transform: translateX(3px) rotate(45deg);
  }
}

/* ----- Shared Back bar (nav-back.html) ----- */
/* The widget holding the bar sits over the top of the panels, outside them, so it never scrolls away.
   It's hidden on the root list and fades in while a submenu panel is open. */
.pi-mnav > :has(.pi-mnav__backbar) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0;
  padding-left: inherit;            /* same side padding as the panels (from pi-mnav-body) */
  padding-right: inherit;
  background: var(--pi-nav-color-white);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--pi-nav-transition), visibility 0s linear 0.2s, box-shadow var(--pi-nav-transition);
}
.pi-mnav:has(> .pi-mnav__panel.is-active:not([data-panel="root"])) > :has(.pi-mnav__backbar) {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--pi-nav-transition), visibility 0s, box-shadow var(--pi-nav-transition);
}
/* Once the open panel has scrolled, a divider under the bar separates it from the content passing beneath */
.pi-mnav:has(> .pi-mnav__panel.is-active.is-scrolled:not([data-panel="root"])) > :has(.pi-mnav__backbar) {
  box-shadow: 0 1px 0 var(--pi-nav-color-card-border);
}
.pi-mnav.is-resetting > :has(.pi-mnav__backbar) { transition: none; }
.pi-mnav .pi-mnav__backbar { padding-top: 8px; }

/* Submenu panels start below the bar */
.pi-mnav .pi-mnav__panel:not([data-panel="root"]) { padding-top: var(--pi-mnav-backbar-height); }

/* Back: a full-width, 44px-tall row. The :hover/:focus #elementor-popup-modal-9004111224736043s repeat the background
   so the reset above doesn't clear it. */
.pi-mnav .pi-mnav__back,
.pi-mnav .pi-mnav__back:hover,
.pi-mnav .pi-mnav__back:focus {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 0 0 2px;
  background: var(--pi-nav-color-white);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
}
.pi-mnav .pi-mnav__back-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pi-mnav .pi-mnav__back .pi-mnav__chevron { border-color: var(--pi-nav-color-text); }

/* Keyboard focus ring around "‹ Back" only, not the whole row */
.pi-mnav .pi-mnav__back:focus-visible { outline: none; }
.pi-mnav .pi-mnav__back:focus-visible .pi-mnav__back-label {
  outline: var(--pi-nav-focus-ring);
  outline-offset: var(--pi-nav-focus-ring-offset);
}

/* Editor: the bar sits in the normal flow above the panels, visible, and panels need no room for it */
.elementor-editor-active .pi-mnav > :has(.pi-mnav__backbar) {
  position: static;
  opacity: 1;
  visibility: visible;
  padding-left: 0;
  padding-right: 0;
}
.elementor-editor-active .pi-mnav .pi-mnav__panel:not([data-panel="root"]) { padding-top: 8px; }

.pi-mnav .pi-mnav__title {
  margin: 6px 0 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--pi-nav-color-card-border);
  font-family: var(--pi-nav-font-family);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: inherit;
  color: var(--pi-nav-color-text);
}

/* Small uppercase text: section labels (e.g. "Core Product Courses") and card eyebrows (e.g. "Build on one model") */
.pi-mnav .pi-mnav__label,
.pi-mnav .pi-mnav__eyebrow {
  font-family: var(--pi-nav-font-family-condensed);
  font-size: var(--pi-nav-font-size-meta);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0;
}
.pi-mnav .pi-mnav__label {
  margin: 16px 0 8px;
  color: var(--pi-nav-color-text);
}
.pi-mnav .pi-mnav__title + .pi-mnav__label { margin-top: 0; }
.pi-mnav .pi-mnav__eyebrow {
  margin: 0 0 10px;
  color: var(--pi-nav-color-accent);
}

/* ----- Featured row (e.g. Foundations / Get Started) ----- */
/* Header row (title + "Get Started") with the description underneath */
.pi-mnav .pi-mnav__featured {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: var(--pi-nav-card-border);
  border-radius: var(--pi-nav-card-radius);
  background: var(--pi-nav-color-card-hover-bg);
  color: var(--pi-nav-color-text);
}
.pi-mnav .pi-mnav__featured-head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pi-mnav .pi-mnav__featured-title { font-size: 0.875rem; font-weight: 700; }
.pi-mnav .pi-mnav__featured-desc {
  font-family: var(--pi-nav-font-family-condensed);
  font-size: var(--pi-mnav-font-size-desc);
  line-height: 1.35;
}
.pi-mnav .pi-mnav__featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--pi-nav-font-family-condensed);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--pi-nav-color-accent);
}
.pi-mnav .pi-mnav__featured-cta svg {
  width: 14px;
  height: 14px;
  color: var(--pi-nav-color-text);
  transition: transform var(--pi-nav-transition);
}
@media (hover: hover) {
  .pi-mnav .pi-mnav__featured:hover .pi-mnav__featured-cta svg { transform: translateX(3px); }
}
/* Its background is already the row-hover color, so hover/focus darkens the border instead */
.pi-mnav .pi-mnav__featured { transition: border-color var(--pi-nav-transition); }
.pi-mnav .pi-mnav__featured:hover,
.pi-mnav .pi-mnav__featured:focus-visible { border-color: var(--pi-nav-color-accent); }

/* ----- Plain link list ----- */
.pi-mnav .pi-mnav__list a {
  display: block;
  padding: 9px 2px;
  border-bottom: 1px solid var(--pi-nav-color-card-border);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--pi-nav-color-text);
}
@media (hover: hover) {
  .pi-mnav .pi-mnav__list a:hover { font-weight: 700; }
}

/* ----- Link list with descriptions (e.g. Certifications): indented, dividers between items ----- */
.pi-mnav .pi-mnav__desc-list {
  margin: 0 36px 0 16px;            /* indented both sides, so the dividers stop short of the title rule, as in the mock */
}
.pi-mnav .pi-mnav__desc-list li + li { border-top: 1px solid var(--pi-nav-color-card-border); }
/* The link reaches --pi-mnav-row-bleed past the text on each side (negative margin = padding),
   so its hover fill has some room without moving the text */
.pi-mnav .pi-mnav__desc-list a {
  display: block;
  margin: 0 calc(-1 * var(--pi-mnav-row-bleed));
  padding: 16px var(--pi-mnav-row-bleed);
  border-radius: var(--pi-nav-card-radius);
  color: var(--pi-nav-color-text);
  transition: background-color var(--pi-nav-transition);
}
.pi-mnav .pi-mnav__desc-list a:hover,
.pi-mnav .pi-mnav__desc-list a:focus-visible { background: var(--pi-nav-color-card-hover-bg); }
/* Right under a section label, the first item sits closer, like the Courses list.
   The list is pulled up and the item keeps some top padding, so its hover fill isn't cramped above the title. */
.pi-mnav .pi-mnav__label + .pi-mnav__desc-list { margin-top: -6px; }
.pi-mnav .pi-mnav__label + .pi-mnav__desc-list > li:first-child > a { padding-top: 10px; }
.pi-mnav .pi-mnav__desc-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}
.pi-mnav .pi-mnav__desc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--pi-nav-font-family-condensed);
  font-size: var(--pi-nav-font-size-meta);
  text-transform: uppercase;
  color: var(--pi-nav-color-accent);
}
.pi-mnav .pi-mnav__desc-meta svg { width: 12px; height: 12px; flex-shrink: 0; }
.pi-mnav .pi-mnav__desc-body {
  display: block;
  margin-top: 4px;
  font-family: var(--pi-nav-font-family-condensed);
  font-size: var(--pi-mnav-font-size-desc);
  line-height: 1.35;
}
/* Row with an icon box on the left (e.g. The Pragmatic Framework in Why Pragmatic) */
.pi-mnav .pi-mnav__desc-list a.pi-mnav__desc-item--icon {
  display: grid;
  grid-template-columns: var(--pi-mnav-desc-icon-size) 1fr;
  align-items: center;
  column-gap: 14px;
}
.pi-mnav .pi-mnav__desc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pi-mnav-desc-icon-size);
  height: var(--pi-mnav-desc-icon-size);
  border-radius: var(--pi-nav-card-radius);
  background: var(--pi-nav-color-icon-box-hover-bg);
  color: var(--pi-nav-color-white);
}
.pi-mnav .pi-mnav__desc-icon svg { width: 72%; height: auto; display: block; }
.pi-mnav .pi-mnav__desc-text { display: block; min-width: 0; }

/* Title-only variant (e.g. AI Courses): same title style as the lists above, tighter rows */
/* Only the vertical padding changes; the left/right padding is the hover-fill bleed and has to stay */
.pi-mnav .pi-mnav__desc-list--plain a { padding-top: 11px; padding-bottom: 11px; }

/* Hover / keyboard focus: an arrow slides in after the title, as in the desktop menu.
   The arrow itself (.pi-nav-arrow: hidden at rest, slide-in, icon size) is shared, in site-wide.css.
   Here: its spot after the title, and when it shows.
   Hover only on devices that really hover: iOS Safari treats a tap whose :hover reveals hidden content
   (this arrow fades in from opacity 0) as a hover only, so links needed two taps. Keyboard focus shows it everywhere. */
.pi-mnav .pi-nav-arrow {
  margin-left: 6px;
  vertical-align: middle;
}
@media (hover: hover) {
  .pi-mnav .pi-mnav__desc-list a:hover .pi-nav-arrow {
    opacity: 1;
    transform: translateX(0);
  }
}
.pi-mnav .pi-mnav__desc-list a:focus-visible .pi-nav-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ----- Pill links ----- */
/* Pills sit side by side and only wrap to a new row when they run out of space */
.pi-mnav .pi-mnav__pills {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
/* After a list, add a little space on top of the last item's own bottom padding;
   and leave a clear gap before the next section's label, so the pills read as part of the section above */
.pi-mnav .pi-mnav__desc-list + .pi-mnav__pills { margin-top: 8px; }
.pi-mnav .pi-mnav__pills + .pi-mnav__label { margin-top: 32px; }
.pi-mnav .pi-mnav__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border: 1px solid var(--pi-nav-color-pill-border);
  border-radius: 999px;
  font-family: var(--pi-nav-font-family-condensed);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--pi-nav-color-accent);
  transition: background-color var(--pi-nav-transition), border-color var(--pi-nav-transition), color var(--pi-nav-transition);
}
.pi-mnav .pi-mnav__pill svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (hover: hover) {
  .pi-mnav .pi-mnav__pill:hover {
    background: var(--pi-nav-color-accent);
    border-color: var(--pi-nav-color-accent);
    color: var(--pi-nav-color-white);
  }
}

/* ----- "Have Questions? Chat with Us" after a list (desktop .pi-nav-icon-link, from site-wide.css) ----- */
.pi-mnav .pi-mnav__chat {
  margin: 12px 0 0 16px;            /* lines up with the list's titles */
  --pi-nav-icon-link-icon-size: 32px;  /* a bit smaller than desktop's 40px, as in the mock */
  --pi-nav-icon-link-glyph-size: 18px;
}

/* ----- Full-width divider between sections ----- */
.pi-mnav .pi-mnav__rule {
  height: 0;
  margin: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--pi-nav-color-card-border);
  background: none;
}

/* ----- Promo image link (e.g. the featured pop-up workshop in Workshops): square, width capped ----- */
.pi-mnav .pi-mnav__promo {
  display: block;
  width: 100%;
  max-width: var(--pi-mnav-promo-max-width);
  margin-top: 28px;
  border-radius: var(--pi-nav-card-radius);
  overflow: hidden;                 /* clips the image to the rounded corners */
}
.pi-mnav .pi-mnav__promo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--pi-nav-transition);
}
.pi-mnav .pi-mnav__promo:hover img { transform: scale(1.02); }

/* ===== Cards: the panels' featured cards (Framework in Courses, case study in Team Training,
   Perspective in Resources). One base, plus modifiers:
     --dark    dark gradient, white text            (Framework, Perspective)
     --light   light background, thin border        (case study)
     --split   eyebrow side + text side; two columns when the panel is 560px+ wide (Framework, case study)
     --ruled   a divider above the text side when stacked (Framework)
     --square  1:1, width capped like the promo image (Perspective)
   Inside: .pi-mnav__eyebrow, .pi-mnav__card-main / __card-body (split cards), __card-title, __card-desc,
   __card-image, __card-link (the link's ::after makes the whole card tappable). ===== */
.pi-mnav .pi-mnav__rule + .pi-mnav__card { margin-top: 28px; }
.pi-mnav .pi-mnav__card {
  --pi-mnav-card-split-min: 260px;  /* narrowest the left column gets in two-column mode */
  position: relative;               /* the link's ::after covers the card, so the whole card is tappable */
  padding: 18px 20px 20px;
  border-radius: var(--pi-nav-card-radius);
}
.pi-mnav .pi-mnav__card--dark {
  --pi-mnav-card-line: var(--pi-nav-color-line-on-dark);
  background: var(--pi-nav-gradient-dark);
  color: var(--pi-nav-color-white);
}
.pi-mnav .pi-mnav__card--light {
  --pi-mnav-card-line: var(--pi-nav-color-card-border);
  padding-top: 16px;
  border: 1px solid var(--pi-nav-color-card-border);
  background: var(--pi-nav-color-card-hover-bg);
  color: var(--pi-nav-color-text);
}
.pi-mnav .pi-mnav__card--square {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pi-mnav-promo-max-width);
  aspect-ratio: 1 / 1;
  padding: 20px;
}
.pi-mnav .pi-mnav__card--ruled .pi-mnav__card-body {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--pi-mnav-card-line);
}

.pi-mnav .pi-mnav__card-title {
  font-family: var(--pi-nav-font-family-condensed);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}
.pi-mnav .pi-mnav__card-body > .pi-mnav__card-title { margin: 0 0 8px; }
.pi-mnav .pi-mnav__card-desc {
  margin: 0;
  font-family: var(--pi-nav-font-family-condensed);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.pi-mnav .pi-mnav__card-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 14px;
  border-radius: var(--pi-nav-card-radius);
}
/* In a square card the link keeps its own width instead of stretching across the card */
.pi-mnav .pi-mnav__card--square .pi-mnav__card-link { align-self: flex-start; }
/* In a square card the image fills the space between eyebrow and link, scaled to fit */
.pi-mnav .pi-mnav__card--square .pi-mnav__card-image {
  min-height: 0;
  flex: 0 1 auto;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
}

/* Card link. Layout and spacing live on the plain #elementor-popup-modal-9004111224736043 only: if they were also in the :hover rule,
   that rule's higher specificity would override the two-column spacing while hovered and make the link jump. */
.pi-mnav .pi-mnav__card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--pi-nav-font-family-condensed);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--pi-nav-color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--pi-nav-transition);
}
/* Keep the underline on hover/focus: the theme and the shared reset above remove it for a:hover / a:focus */
.pi-mnav .pi-mnav__card-link:hover,
.pi-mnav .pi-mnav__card-link:focus { text-decoration: underline; }
.pi-mnav .pi-mnav__card-link::after { content: ""; position: absolute; inset: 0; }
.pi-mnav .pi-mnav__card-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--pi-nav-transition);
}
/* Hovering anywhere on the card (it's all one link), or focusing the link, lightens it and nudges the arrow */
.pi-mnav .pi-mnav__card:hover .pi-mnav__card-link,
.pi-mnav .pi-mnav__card-link:focus-visible { color: var(--pi-nav-color-link-hover); }
.pi-mnav .pi-mnav__card:hover .pi-mnav__card-link svg,
.pi-mnav .pi-mnav__card-link:focus-visible svg { transform: translateX(3px); }

/* Framework card: the outlined name + icon box */
.pi-mnav .pi-mnav__framework-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--pi-mnav-card-line);
  border-radius: var(--pi-nav-card-radius);
}
.pi-mnav .pi-mnav__framework-badge .pi-mnav__card-title {
  max-width: 9em;                   /* breaks "The Pragmatic / Framework" onto two lines, as in the mock */
}
.pi-mnav .pi-mnav__framework-icon {
  flex-shrink: 0;
  width: 68px;
  height: auto;
}
/* Case study card: its image column can be a little narrower than the Framework card's */
.pi-mnav .pi-mnav__card--light.pi-mnav__card--split { --pi-mnav-card-split-min: 240px; }

/* Wider panels (tablets, unfolded foldables): split cards go two-column, main on the left, text on the right.
   A container query on the panel's width, not the screen's, so it follows the side padding set in Elementor.
   560px is where both columns fit; phones (up to 430px wide) always stay stacked. */
@container pi-mnav-panel (min-width: 560px) {
  .pi-mnav .pi-mnav__card--split {
    display: grid;
    grid-template-columns: minmax(var(--pi-mnav-card-split-min), 1fr) 1fr;
    align-items: center;
    gap: 0 28px;
    padding: 20px 24px;
  }
  .pi-mnav .pi-mnav__card--split .pi-mnav__card-body {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    padding-left: 28px;
    border-left: 1px solid var(--pi-mnav-card-line);
  }
  .pi-mnav .pi-mnav__card--split .pi-mnav__card-image { margin: 0; }
  .pi-mnav .pi-mnav__card--split .pi-mnav__card-desc { max-width: 45ch; }
  .pi-mnav .pi-mnav__card--split .pi-mnav__card-link { align-self: flex-start; margin-top: 12px; }
}/* End custom CSS */