@import url("https://fonts.googleapis.com/css2?family=Abel&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap");

/* The designer files provide the visual system. This file only adapts existing
   content renderers to the same dark, fluid page canvas. */
.design-site { background: var(--bg); color: var(--text); }
.design-site .mx-shell-header { font-family: var(--font-body); }
.design-site main:not(.ax-main) { min-height: 60vh; }
.design-site .v2-page-hero, .design-site .legal-hero, .design-site .blog-hero { background: var(--bg); color: var(--text); }
.design-site .v2-page-hero { padding-top: calc(var(--site-header-height) + 72px); }
.design-site .v2-page-content, .design-site .legal-layout, .design-site .blog-main { color: var(--text); }
.design-site .v2-site, .design-site .legal-page, .design-site .mx-blog-site { background: var(--bg); }
.design-site .mx-shell-footer { font-family: var(--font-body); }
.design-site .site-footer .language-picker { position: relative; }
/* The legacy responsive stylesheet hides language labels for its compact
   header control. Design pages keep the current locale visible in the footer
   control, including on narrow screens. */
.design-site .site-footer .language-trigger span { display: inline; }
.design-site .site-footer .language-trigger { color: var(--text); }
.design-site .site-footer .language-trigger svg { color: inherit; }
.design-site.mx-blog-site .blog-main { padding-top: var(--site-header-height); }
.design-site.mx-blog-site .blog-row-image { margin: 0; }
.design-site .site-footer .language-picker > .language-menu {
  position: absolute; top: auto; right: auto; bottom: calc(100% + 8px); left: 0;
  width: max-content; min-width: 130px; opacity: 0; visibility: hidden;
  transform: translateY(5px); pointer-events: none; z-index: 30;
}
.design-site .site-footer .language-picker.open > .language-menu {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* Reset legacy site-wide rules that otherwise leak into the designer shell. */
.design-site .site-header { border: 0; background: transparent; box-shadow: none; }
/* Price and all non-home design pages use the detached translucent header
   surface. Only the homepage hero may hide that surface at the top. */
.design-site .site-header:before { opacity: 1; }
.design-site.design-home .site-header.hero-integrated:not(.scrolled):before { opacity: 0; }
.design-site .site-header .navigation-panel__inner { display: contents; }
.design-site .site-header .main-nav {
  position: static; display: flex; flex: 0 0 auto; flex-direction: row;
  align-items: center; gap: 30px; width: auto; margin: 0 0 0 60px;
}
.design-site .site-header .main-nav > .nav-item,
.design-site .site-header .main-nav > .nav-dropdown { position: relative; inset: auto; flex: 0 0 auto; }
.design-site .site-header .main-nav > .nav-item { position: relative; inset: auto; width: auto; flex: 0 0 auto; }
.design-site .site-header .nav-dropdown > .menu-trigger { width: auto; }
.design-site .site-header .nav-dropdown,
.design-site .site-header .nav-dropdown > .menu-trigger,
.design-site .site-header .language-picker,
.design-site .site-header .language-trigger,
.design-site .site-footer .language-picker,
.design-site .site-footer .language-trigger { pointer-events: auto; }
.design-site .site-header .nav-dropdown > .dropdown,
.design-site .site-footer .language-picker > .language-menu { pointer-events: auto; }
.design-site .site-header .nav-dropdown {
  position: relative; display: block; width: auto; height: auto; min-width: 0;
  padding: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; opacity: 1; visibility: visible; transform: none;
}
.design-site .site-header .nav-dropdown .dropdown {
  position: absolute; display: block; width: auto; min-width: 174px;
  padding: 7px; margin: 0; border: 0; border-radius: 5px;
  background: var(--menu-bg); box-shadow: 0 10px 30px #0002;
  opacity: 0; visibility: hidden; transform: translateY(5px);
}
.design-site .site-header .nav-dropdown.open .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.design-site .hero { border-bottom: 0; }
.design-site .hero .eyebrow { margin: 0; }
.design-site .site-footer {
  padding: 0 0 60px; border: 0; background: var(--bg); color: var(--text);
}
.design-site .footer-top { padding: 32px 0 0; }
.design-site .footer-bottom { min-height: 54px; border-top: 0; }
.design-site .research .text-link {
  display: flex; margin-top: 0; padding-bottom: 0; background-image: none;
  color: var(--text-muted); font-size: 12px; font-weight: 400;
}
.design-site .text-link .icon { display: inline-block; }
.design-site .site-header .nav-actions {
  position: static; min-height: 0; padding: 0; border: 0; margin: 0;
  background: transparent; display: flex; gap: 22px;
}

/* The legacy content styles also define a .nav-dropdown component. Keep the
   designer's compact menu geometry authoritative on every page. */
.design-site .site-header .navigation-panel { display: contents; }
.design-site .site-header .navigation-panel { z-index: 100; }
@media (max-width: 760px) {
  .design-site .site-header .navigation-panel { display: grid; }
  .design-site .site-header .navigation-panel { z-index: 100; }
  .design-site .site-header .navigation-panel__inner { display: flex; }
  .design-site .site-header .main-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; margin: 8px 0 0;
  }
  .design-site .site-header .main-nav > .nav-item,
  .design-site .site-header .main-nav > .nav-dropdown { position: relative; inset: auto; width: 100%; }
  .design-site .site-header .main-nav > .nav-item { position: relative; inset: auto; width: 100%; }
  .design-site .site-header .nav-item { width: 100%; min-height: 48px; }
  .design-site .site-header .nav-dropdown { width: 100%; border-top: var(--border-width) solid var(--line-subtle); }
  .design-site .site-header .nav-dropdown .menu-trigger { width: 100%; }
  .design-site .site-header .nav-dropdown .dropdown {
    position: relative; top: auto; left: auto; width: auto; min-width: 0;
    margin: 0 0 10px; padding: 0; border-radius: 0; box-shadow: none;
    background: var(--menu-bg); transform: none;
  }
  .design-site .site-header .nav-dropdown:not(.open) .dropdown { display: none; }
  .design-site .site-header .nav-dropdown.open .dropdown { display: block; }
  .design-site .site-header .nav-actions {
    position: static; min-height: 0; padding: 16px 0 20px; margin-top: 8px;
    border-top: var(--border-width) solid var(--line-subtle); background: transparent;
    display: flex; gap: 16px;
  }
}