/* "Solutions" menu in the top bar: links to the /for/ pages. Shared by the home page, /pricing and the /for/
   pages (each loads nav-for.css and nav-for.js). The links are plain HTML so search engines can follow them.
   :is(#home, body) lifts these rules above the home page's own "#home .nav a" styles. */
.nav-drop { position: relative; display: inline-flex; }
:is(#home, body) .nav-drop .nav-drop-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit;
}
.nav-drop-btn svg { width: 12px; height: 12px; transition: transform .2s; }
.nav-drop.open .nav-drop-btn svg { transform: rotate(180deg); }
:is(#home, body) .nav-drop .nav-drop-menu {
  display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); z-index: 60;
  width: 320px; padding: 8px; background: #fff; border: 1px solid #EEEDF2; border-radius: 16px;
  box-shadow: 0 16px 40px rgba(16, 15, 18, 0.12); text-align: left;
}
/* A gap-bridging strip so the menu stays open while the pointer moves down to it. */
.nav-drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
:is(#home, body) .nav-drop.open .nav-drop-menu { display: block; }
@media (hover: hover) and (min-width: 901px) { :is(#home, body) .nav-drop:hover .nav-drop-menu { display: block; } }
:is(#home, body) .nav-drop .nav-drop-menu a {
  display: block; padding: 10px 12px; border-radius: 10px; color: #16141C; font-size: 15px; font-weight: 600; line-height: 1.3;
}
:is(#home, body) .nav-drop .nav-drop-menu a:hover,
:is(#home, body) .nav-drop .nav-drop-menu a[aria-current] { background: #F4F3F8; }
:is(#home, body) .nav-drop .nav-drop-menu a span { display: block; margin-top: 2px; color: #6B6A75; font-size: 13px; font-weight: 400; }

/* Phones: the menu sits inside the open hamburger panel, so the three links open in place under "Solutions". */
@media (max-width: 900px) {
  .nav-drop { display: block; }
  :is(#home, body) .nav-drop .nav-drop-btn { width: 100%; justify-content: space-between; padding: 12px 14px; border-radius: 10px; }
  :is(#home, body) .nav-drop .nav-drop-menu {
    position: static; transform: none; width: auto; padding: 0 0 4px 8px; border: 0; box-shadow: none; background: none;
  }
  :is(#home, body) .nav-drop .nav-drop-menu::before { display: none; }
}

/* Narrow phones (360px wide): the home page's menu button, logo and "Scale your business" don't fit the fixed
   header. Kept here, not in the designer's css/site.css, so a designer import doesn't drop it. */
@media (max-width: 380px) {
  #home .header { gap: 6px; }
  #home .logo-img { max-width: 100px; }
  #home .header .cta { padding: 10px 11px; }
}