/**
 * Better.care — Better Header plugin
 * Source: Figma WebsiteDesign node 3480:13822
 * Scope: .bm-header-root / .bm-header
 */

/* Root keeps document flow height; bar is fixed (sticky breaks inside FSE wrappers). */
.bm-header-root {
  --bm-header-bar-height: 64px;
  position: relative;
  z-index: 10050;
  width: 100%;
  min-height: var(--bm-header-bar-height);
  overflow: visible !important;
}

.bm-header-root.alignfull {
  max-width: none;
}

.bm-header {
  --bm-color-bc-1: var(--color-bc-1, #1D4056);
  --bm-color-primary: var(--color-bc-primary, #026FD0);
  --bm-color-white: var(--color-white, #FFFFFF);
  --bm-color-border: #E9E9E9;
  --bm-color-border-light: var(--color-grey-3, #EFEFEF);
  --bm-color-grey-label: #A4A4A4;
  --bm-color-badge-bg: #DEEBFF;
  --bm-color-surface-muted: #FAFAFA;
  --bm-color-announcement: #FCFCFC;
  --bm-color-ai-start: #085DFF;
  --bm-color-ai-end: #D83EFF;
  --bm-font: 'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;
  --bm-nav-height: 64px;
  --bm-container-max: 1280px;
  --bm-radius-pill: 100px;
  --bm-radius-md: 16px;
  --bm-radius-sm: 6px;
  --bm-shadow-header: 0 0 16px rgba(0, 0, 0, 0.12);
  --bm-shadow-menu: 0 10px 40px rgba(29, 64, 86, 0.08);
  --bm-transition: 200ms ease;
  position: fixed;
  top: var(--bm-admin-bar-height, 0px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10050;
  font-family: var(--bm-font);
  color: var(--bm-color-bc-1);
  -webkit-font-smoothing: antialiased;
}

.bm-header *,
.bm-header *::before,
.bm-header *::after {
  box-sizing: border-box;
}

.bm-header img {
  display: block;
  max-width: 100%;
  height: auto;
}

.bm-header a {
  text-decoration: none;
  color: var(--bm-color-primary);
}

.bm-header__nav .bm-header__nav-link {
  color: var(--bm-color-bc-1);
}

.bm-header__shell {
  position: relative;
  background: var(--bm-color-white);
  box-shadow: var(--bm-shadow-header);
  overflow: visible;
}

.bm-header__bar {
  border-bottom: 1px solid var(--bm-color-border);
  background: var(--bm-color-white);
}

.bm-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: var(--bm-container-max);
  margin: 0 auto;
  padding: 0 16px;
  min-height: var(--bm-nav-height);
  gap: 0;
}

.bm-header__start {
  display: contents;
}

.bm-header__drawer {
  display: flex;
  align-items: center;
  min-width: 0;
}

.bm-header__mobile-ctas {
  display: none;
}

.bm-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.bm-header__logo img {
  height: 24px;
  width: auto;
}

.bm-header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bm-color-border);
  border-radius: var(--bm-radius-sm);
  background: var(--bm-color-white);
  cursor: pointer;
}

.bm-header__toggle span,
.bm-header__toggle span::before,
.bm-header__toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--bm-color-bc-1);
  border-radius: 1px;
  transition: transform var(--bm-transition), opacity var(--bm-transition);
}

.bm-header__toggle span {
  position: relative;
}

.bm-header__toggle span::before,
.bm-header__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

.bm-header__toggle span::before {
  top: -6px;
}

.bm-header__toggle span::after {
  top: 6px;
}

.bm-header.is-mobile-open .bm-header__toggle span {
  background: transparent;
}

.bm-header.is-mobile-open .bm-header__toggle span::before {
  transform: translateY(6px) rotate(45deg);
}

.bm-header.is-mobile-open .bm-header__toggle span::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile breadcrumb submenus (tablet + phone) */
.bm-header__mobile-panels {
  width: 100%;
}

.bm-header__mobile-back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--bm-color-border-light);
  background: var(--bm-color-white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bm-color-primary);
  cursor: pointer;
  text-align: left;
}

.bm-header__mobile-back-icon {
  font-size: 14px;
  line-height: 1;
}

.bm-header__mobile-panel-title {
  margin: 0;
  padding: 16px 16px 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bm-color-bc-1);
}

.bm-header__mobile-group-title {
  margin: 0;
  padding: 12px 16px 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bm-color-grey-label);
}

.bm-header__mobile-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bm-header .bm-header__mobile-link {
  display: block;
  padding: 12px 16px 12px 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bm-color-bc-1);
  border-bottom: 1px solid var(--bm-color-border-light);
  text-decoration: none;
}

.bm-header .bm-header__mobile-link:hover,
.bm-header .bm-header__mobile-link:focus-visible {
  color: var(--bm-color-primary);
  outline: none;
}

.bm-header__mobile-empty {
  margin: 0;
  padding: 12px 16px 16px 24px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--bm-color-bc-1);
  opacity: 0.75;
}

.bm-header__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .bm-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 32px;
    padding: 0;
  }

  .bm-header__start {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
  }

  .bm-header__nav {
    gap: 16px;
    flex-wrap: nowrap;
  }
}

.bm-header__nav > li {
  position: relative;
  list-style: none;
}

.bm-header__nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 10px;
  border: 0;
  border-radius: var(--bm-radius-pill);
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: var(--bm-color-bc-1);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--bm-transition), background-color var(--bm-transition);
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
}

@media (min-width: 1024px) {
  .bm-header__nav-link {
    padding: 12px 16px;
    height: auto;
    line-height: 14px;
    border-radius: var(--bm-radius-pill);
  }

  .bm-header__nav-link--plain {
    padding: 12px 0;
  }
}

/* Compact desktop — keep horizontal nav, reduce density on small laptops / tablet landscape */
@media (min-width: 1024px) and (max-width: 1279px) {
  .bm-header__inner {
    column-gap: 16px;
  }

  .bm-header__start {
    gap: 12px;
  }

  .bm-header__nav {
    gap: 8px;
  }

  .bm-header__nav-link {
    padding: 12px 8px;
  }

  .bm-header__nav-link--plain {
    padding: 12px 0;
  }

  .bm-header__utilities {
    gap: 16px;
  }

  .bm-header__actions {
    gap: 12px;
  }

  /* Log in — secondary at full density; hide until 1280 to free CTA space */
  .bm-header__actions > .bm-header__login {
    display: none;
  }
}

.bm-header__nav-link--plain {
  cursor: pointer;
}

.bm-header__nav-link:hover,
.bm-header__nav-link:focus-visible,
.bm-header__nav > li.is-active > .bm-header__nav-link,
.bm-header__nav > li.is-open > .bm-header__nav-link,
.bm-header__utility-item.is-active > .bm-header__lang {
  color: var(--bm-color-primary);
}

.bm-header__chevron {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  transform: rotate(90deg);
  transition: transform var(--bm-transition);
}

.bm-header__nav > li:not(.is-active):not(.is-open) .bm-header__chevron {
  opacity: 0.85;
}

.bm-header__nav > li.is-open .bm-header__chevron,
.bm-header__nav > li.is-active .bm-header__chevron,
.bm-header__utility-item.is-active .bm-header__chevron {
  transform: rotate(-90deg);
}

.bm-header__search-icon {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  flex-shrink: 0;
}

.bm-header__utilities {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-shrink: 0;
}

.bm-header__utility-item {
  position: relative;
  flex-shrink: 0;
}

.bm-header__utility-item--lang .bm-header__lang {
  padding: 12px 0;
  height: auto;
  line-height: 14px;
  color: var(--bm-color-primary);
}

.bm-header__utility-item--lang .bm-header__chevron {
  color: var(--bm-color-primary);
  opacity: 1;
}

.bm-header__utility-item--lang.is-active .bm-header__lang,
.bm-header__utility-item--lang .bm-header__lang:hover,
.bm-header__utility-item--lang.is-active .bm-header__chevron {
  color: var(--bm-color-primary);
}

.bm-header__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 168px;
  padding: 8px;
  background: var(--bm-color-white);
  border: 1px solid var(--bm-color-border);
  border-radius: var(--bm-radius-md);
  box-shadow: var(--bm-shadow-menu);
  z-index: 1002;
}

.bm-header__utility-item--lang .bm-header__dropdown--lang {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.bm-header__shell[data-active-panel="lang"] .bm-header__dropdown--lang {
  display: block;
}

.bm-header__dropdown-link {
  display: block;
  padding: 10px 12px;
  border-radius: var(--bm-radius-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--bm-color-bc-1);
  text-decoration: none;
}

.bm-header__dropdown-link:hover,
.bm-header__dropdown-link:focus-visible {
  background: var(--bm-color-surface-muted);
  color: var(--bm-color-primary);
  outline: none;
}

.bm-header__utility-item--search {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.bm-header__search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--bm-radius-sm);
  background: transparent;
  color: var(--bm-color-primary);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

.bm-header__search-toggle .bm-header__search-icon {
  display: inline-block;
}

.bm-header__search-form {
  position: absolute;
  top: 50%;
  right: 0;
  width: 40px;
  max-width: 40px;
  height: 40px;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition:
    max-width var(--bm-transition),
    width var(--bm-transition),
    opacity var(--bm-transition);
  z-index: 4;
}

.bm-header__search-form.is-open {
  width: min(280px, 42vw);
  max-width: min(280px, 42vw);
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(29, 64, 86, 0.12);
}

.bm-header__utility-item--search.is-search-open .bm-header__search-toggle {
  display: none;
}

.bm-header__search-label {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  margin: 0;
}

.bm-header__search-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--bm-color-border);
  border-radius: var(--bm-radius-sm);
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--bm-color-bc-1);
  background: var(--bm-color-white);
  transition: border-color var(--bm-transition), box-shadow var(--bm-transition);
}

.bm-header__search-input:focus {
  outline: none;
  border-color: var(--bm-color-primary);
  box-shadow: 0 0 0 3px rgba(2, 111, 208, 0.15);
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.bm-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bm-header__ctas {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Flyouts (mega panels) — single hover zone below bar ── */

.bm-header__flyouts {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1001;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.bm-header__flyouts::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 20px;
}

.bm-header__shell.has-active-panel .bm-header__flyouts {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.bm-header__shell[data-active-panel="lang"] .bm-header__flyouts {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.bm-header__panel {
  display: none;
  background: var(--bm-color-white);
  border-bottom: 1px solid var(--bm-color-border);
  box-shadow: var(--bm-shadow-menu);
}

.bm-header__panel-inner {
  max-width: var(--bm-container-max);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 1024px) {
  .bm-header {
    /* Never taller than 80vh or the space below the fixed bar */
    --bm-panel-max-height: min(80vh, calc(100dvh - var(--bm-header-bar-height, 64px) - var(--bm-admin-bar-height, 0px)));
  }

  /* Every mega panel sits in the same grid cell, so the cell is as tall as
     the tallest panel and so is every panel in it: switching panels fast
     never makes the menu jump. Inactive panels keep their layout and are
     only hidden. Past the max height the panel body scrolls. */
  .bm-header__flyouts {
    display: grid;
  }

  .bm-header__panel {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    max-height: var(--bm-panel-max-height);
    visibility: hidden;
  }

  .bm-header__shell[data-active-panel="solutions"] .bm-header__panel[data-panel="solutions"],
  .bm-header__shell[data-active-panel="community"] .bm-header__panel[data-panel="community"],
  .bm-header__shell[data-active-panel="resources"] .bm-header__panel[data-panel="resources"] {
    visibility: visible;
  }

  .bm-header__panel .bm-header__panel-inner {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--bm-color-border) transparent;
    padding: 0;
  }

  .bm-header__announcement {
    flex-shrink: 0;
  }
}

/* Below 1312px the 1280px container hits the viewport edges — keep 16px side
   gutters on the top bar and every flyout panel (overrides the desktop padding
   resets above; selectors match their specificity, later in file wins) */
@media (min-width: 1024px) and (max-width: 1312px) {
  .bm-header__inner {
    padding: 0 16px;
  }

  .bm-header__panel-inner,
  .bm-header__shell[data-active-panel] .bm-header__panel[data-panel] .bm-header__panel-inner {
    padding: 0 16px;
  }

  /* Footer band too: its padding reset (0,1,0) sits later in the file */
  .bm-header .bm-header__announcement-inner {
    padding: 0 16px;
  }
}

.bm-panel-platform__divider {
  width: 1px;
  background: var(--bm-color-border);
  align-self: stretch;
  margin: 24px 0;
}

.bm-panel-platform__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.028px;
  color: var(--bm-color-bc-1);
  opacity: 0.75;
}

.bm-panel-platform__col-title {
  margin: 0;
  padding: 0 12px 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: var(--bm-color-grey-label);
}

.bm-panel-platform__entry {
  display: block;
  padding: 0;
  text-decoration: none;
  color: inherit;
}

/* CGP linkblock_platform_header — inner div carries hover (Customizer may override) */
.bm-panel-platform__entry > div {
  padding: 16px 48px 16px 16px;
  border-radius: var(--bm-radius-md);
  transition: background-color var(--bm-transition);
}

.bm-panel-platform__entry:hover > div,
.bm-panel-platform__entry:focus-visible > div {
  background: var(--bm-color-surface-muted);
  outline: none;
}

.bm-panel-platform__entry.is-highlight > div {
  background: var(--bm-color-border-light);
}

.bm-panel-platform__entry-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 14px;
  color: var(--bm-color-bc-1);
}

.bm-panel-platform__entry.is-highlight .bm-panel-platform__entry-title,
.bm-panel-platform__entry:hover .bm-panel-platform__entry-title {
  color: var(--bm-color-primary);
}

.bm-panel-platform__entry-desc,
.bm-header .mega-menu-description {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.028px;
  color: #546F7F;
}

/* ── Solutions flyout — intro column, equal cards in one row + footer band ──
   Figma 4025:5837: four equal columns split by full-height hairlines. Every
   card has the same anatomy: photo, title, description and a pill CTA.
   Hover turns the title blue. */

.bm-panel-solutions__cards {
  display: grid;
  grid-template-columns: repeat(var(--bm-sol-cards, 4), minmax(0, 1fr));
  column-gap: 24px;
  min-height: 100%;
}

.bm-panel-solutions__intro {
  padding: 32px 0 24px;
}

.bm-panel-solutions__intro-title {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bm-color-bc-1);
}

.bm-header .bm-panel-solutions__card-desc,
.bm-header .bm-panel-solutions__footer-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: rgb(29 64 86 / 0.75);
}

.bm-panel-solutions__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 32px 0 24px 24px;
  border-left: 1px solid #F6F6F6;
  color: inherit;
}

.bm-panel-solutions__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 323 / 161;
  border-radius: var(--bm-radius-md);
  object-fit: cover;
}

.bm-panel-solutions__card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.bm-panel-solutions__card-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bm-color-bc-1);
}

/* WEB26 secondary button, pinned to the card bottom */
.bm-panel-solutions__cta {
  align-self: flex-start;
  margin-top: auto;
}

.bm-header .bm-panel-solutions__card-desc {
  margin-bottom: 16px;
}

.bm-header__solutions-footer .bm-header__announcement-inner {
  align-items: center;
}

.bm-panel-solutions__footer-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 8px;
  min-width: 0;
}

.bm-panel-solutions__footer-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bm-color-bc-1);
}

.bm-panel-solutions__footer-text {
  margin: 0;
  font-weight: 400;
}

/* ── Community flyout — Figma 4100:6489: intro column split off by a
   full-height hairline, then one column per group with its CTA card under
   it. One grid, so CTA cards line up with their columns. ── */

.bm-panel-community__layout,
.bm-panel-resources__grid {
  display: grid;
  grid-template-columns: repeat(calc(var(--bm-com-cols, 3) + 1), minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  column-gap: 24px;
  row-gap: 48px;
  min-height: 100%;
  padding: 24px 0;
}

/* One row only: the hairline still runs down to the footer band */
.bm-panel-resources__grid {
  grid-template-rows: 1fr;
}

.bm-panel-community__intro {
  grid-row: span 2;
}

/* Community is the tallest panel; keep it short enough not to scroll */
.bm-panel-community__layout {
  row-gap: 24px;
}

.bm-panel-community__intro,
.bm-panel-resources__intro {
  margin: -24px 0;
  padding: 32px 24px 24px 0;
  border-right: 1px solid #DBE0E4;
}

.bm-panel-community__intro-title {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bm-color-bc-1);
}

/* Shared by both intro columns (Figma 4100:6489) */
.bm-panel-solutions__intro-text,
.bm-panel-community__intro-text {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.4;
  color: rgb(29 64 86 / 0.75);
}

.bm-panel-community__col,
.bm-panel-resources__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.bm-panel-community__links,
.bm-panel-resources__links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bm-panel-community__links {
  gap: 8px;
}

.bm-panel-community__entry > div,
.bm-panel-resources__entry > div {
  padding: 16px 48px 16px 16px;
}

.bm-panel-community__entry .bm-panel-platform__entry-desc,
.bm-panel-resources__entry .bm-panel-platform__entry-desc {
  color: rgb(29 64 86 / 0.75);
}

.bm-panel-community__entry:hover > div,
.bm-panel-community__entry:focus-visible > div,
.bm-panel-resources__entry:hover > div,
.bm-panel-resources__entry:focus-visible > div {
  background: #FAFAFA;
}

/* Hover only on interaction — no permanent is-highlight in Community */
.bm-panel-community__entry.is-highlight > div {
  background: transparent;
}

.bm-panel-community__entry.is-highlight .bm-panel-platform__entry-title {
  color: var(--bm-color-bc-1);
}

.bm-panel-community__col-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 12px 16px;
  border-radius: var(--bm-radius-md);
  background: rgb(222 235 255 / 0.25);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--bm-transition);
  box-sizing: border-box;
}

.bm-panel-community__col-cta:hover,
.bm-panel-community__col-cta:focus-visible {
  background: rgb(222 235 255 / 0.5);
  outline: none;
}

.bm-panel-community__col-cta-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.bm-panel-community__col-cta-icon--circle {
  border-radius: 50%;
  background: transparent;
  box-sizing: border-box;
  color: var(--bm-color-primary);
}

.bm-panel-community__col-cta-icon--circle.bm-panel-community__col-cta-icon--custom {
  border: 1px solid var(--bm-color-primary);
}

.bm-panel-community__col-cta-icon--square {
  width: auto;
  max-width: 56px;
  height: 40px;
  border-radius: 0;
  background: transparent;
}

.bm-panel-community__col-cta-icon img {
  display: block;
  object-fit: contain;
}

.bm-panel-community__col-cta-icon--circle img {
  width: 40px;
  height: 40px;
}

.bm-panel-community__col-cta-icon--square img {
  width: auto;
  height: 40px;
  max-width: 56px;
}

.bm-panel-community__col-cta-icon--circle.bm-panel-community__col-cta-icon--custom img {
  width: 28px;
  height: 28px;
}

/* Tint Community CTA icons via CSS mask (hex or token → --bm-community-icon-color).
   The mask lives on an ::after layer, NOT the container — masking the container
   would clip away its circle border/background along with everything outside
   the glyph. */
.bm-panel-community__col-cta-icon--tint {
  position: relative;
}

.bm-panel-community__col-cta-icon--tint::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--bm-community-icon-color, var(--bm-color-primary));
  -webkit-mask: var(--bm-community-icon-url) center / contain no-repeat;
  mask: var(--bm-community-icon-url) center / contain no-repeat;
}

/* Custom circle glyphs: the source SVGs carry generous canvas padding, so the
   28px img box reads too small once masked — give the tint layer 38px instead */
.bm-panel-community__col-cta-icon--circle.bm-panel-community__col-cta-icon--custom.bm-panel-community__col-cta-icon--tint::after {
  inset: 1px;
}

/* The ring follows the chosen tint color */
.bm-panel-community__col-cta-icon--circle.bm-panel-community__col-cta-icon--custom.bm-panel-community__col-cta-icon--tint {
  border-color: var(--bm-community-icon-color, var(--bm-color-primary));
}

.bm-panel-community__col-cta-icon--tint img {
  opacity: 0;
  pointer-events: none;
}

.bm-panel-community__col-cta-title {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 9em;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bm-color-primary);
}

.bm-panel-community__col-cta-arrow {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 20px;
  color: var(--bm-color-primary);
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bm-panel-community__col-cta:hover .bm-panel-community__col-cta-arrow,
.bm-panel-community__col-cta:focus-visible .bm-panel-community__col-cta-arrow {
  transform: translate(2px, -2px);
}

/* ── Resources flyout — Figma 4100:6586: shares the Community layout
   (intro column + link columns, rules above). The footer band carries the
   latest featured post as News on the left and View all resources on the right. ── */

/* WEB26 set in the header: ".bm-header a" ties with the Customizer rules,
   so restate their colours here, hover included, whatever loads last */
.bm-header [class*="web26-button-"] a {
  color: var(--w26-fg);
}

.bm-header [class*="web26-button-"] a:hover {
  color: var(--w26-sweep-fg);
}

.bm-header [class*="web26-link"] a {
  color: var(--w26-link);
}

/* WEB26 text links in the header (Log in, News title, View all resources):
   header size, underline on hover. Log in has no chevron. */
.bm-header [class*="web26-link"] a {
  font-size: 14px;
  font-weight: 500;
}

.bm-header__login a::after {
  display: none;
}

/* Outranks the Customizer rule, which loads later and stops at 18px for the chevron */
.bm-header .bm-header__login a::before {
  right: 0;
}

.bm-panel-resources__news,
.bm-panel-resources__news a {
  min-width: 0;
}

.bm-panel-resources__news a {
  max-width: 100%;
}

.bm-header .bm-panel-resources__all {
  flex-shrink: 0;
  margin-left: auto;
}

.bm-header__announcement {
  background: var(--bm-color-announcement);
  border-top: 1px solid var(--bm-color-border-light);
}

.bm-header__announcement-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--bm-container-max);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 1024px) {
  .bm-header__announcement-inner {
    padding: 0;
  }
}

.bm-header__announcement-left {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 8px;
  min-width: 0;
}

.bm-header__badge {
  flex-shrink: 0;
  padding: 6px 11px 6px 12px;
  border-radius: var(--bm-radius-sm);
  background: var(--bm-color-badge-bg);
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  color: var(--bm-color-primary);
}

.bm-header__announcement-text {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  color: var(--bm-color-bc-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-header__external-icon {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .bm-header__start {
    display: contents;
  }

  .bm-header__inner {
    flex-wrap: wrap;
    padding: 0 16px;
    gap: 0;
  }

  .bm-header__logo {
    order: 1;
    margin-right: 0;
  }

  .bm-header__toggle {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
  }

  .bm-header__utilities {
    display: none;
  }

  .bm-header__flyouts {
    display: none !important;
  }

  /* The open menu is a full-height sheet under the bar, out of the bar's
     flow: the bar, logo and toggle never move and the page below isn't
     pushed down. Only the hamburger turns into an X. */
  .bm-header__drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - var(--bm-admin-bar-height, 0px) - var(--bm-header-bar-height, 65px));
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 0 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bm-color-white);
  }

  .bm-header__mobile-ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding: 24px 0 calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .bm-header__mobile-ctas [class*="web26-button-"] > a {
    width: 100%;
  }

  .bm-header__mobile-ctas .bm-header__login {
    text-align: center;
  }

  .bm-header.is-mobile-open .bm-header__drawer {
    display: flex;
  }

  .bm-header__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .bm-header__nav > li {
    width: 100%;
    border-bottom: 1px solid var(--bm-color-border-light);
  }

  .bm-header__nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 14px 16px;
    height: auto;
    line-height: 1.2;
    border-radius: 0;
  }

}

@media (min-width: 1024px) {
  .bm-header__nav > li.has-panel { position: static; }

  .bm-header__bar {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Solid bar when mega panel open — frosted glass was picking up the dim layer */
  .bm-header__shell.has-active-panel .bm-header__bar {
    background: var(--bm-color-white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Dim page content only — starts below the fixed bar (not under nav or flyouts) */
.bm-header__backdrop {
  position: fixed;
  top: calc(var(--bm-admin-bar-height, 0px) + var(--bm-header-bar-height, 54px));
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(29, 64, 86, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bm-transition);
  z-index: 10040;
}

.bm-header__backdrop.is-visible {
  opacity: 1;
}

/* Optional class hook for JS — no overflow lock (menu scrolls inside shell) */
html.bm-header-mobile-open,
body.bm-header-mobile-open {
  margin: 0;
}

/* ---- Figma header match (WebsiteDesign, Home header 3787-4679) ----------
   Top bar only; it keeps the 1280px container like the mega panels. Figma has
   no language switcher and no Get started button, no shadow (just the 1px
   #E9E9E9 line), grey 14/20 nav labels in
   8px-radius boxes, and Medium 14/20 36px buttons. Careers stays arrowless:
   it links straight to the page. The compact 1024-1279 layout is left as is. */
@media (min-width: 1024px) {
  .bm-header .bm-header__utility-item--lang,
  .bm-header .bm-header__ctas .web26-button-secondary {
    display: none;
  }

  .bm-header .bm-header__shell:not(.has-active-panel) {
    box-shadow: none;
  }
}

@media (min-width: 1280px) {
  .bm-header .bm-header__start {
    gap: 32px;
  }

  .bm-header .bm-header__nav .bm-header__nav-link {
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    line-height: 20px;
    letter-spacing: 0.2px;
    color: #5F6369;
  }

  .bm-header .bm-header__nav .bm-header__nav-link:hover,
  .bm-header .bm-header__nav .bm-header__nav-link:focus-visible,
  .bm-header .bm-header__nav > li.is-active > .bm-header__nav-link,
  .bm-header .bm-header__nav > li.is-open > .bm-header__nav-link {
    color: var(--bm-color-primary);
  }

  .bm-header .bm-header__utilities,
  .bm-header .bm-header__actions {
    gap: 16px;
  }

  .bm-header .bm-header__utility-item--search,
  .bm-header .bm-header__search-toggle {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }
}