/* Products dropdown in the header of the For accountants section.
   Self-contained: site.css flattens .menu below 940px for the old hamburger nav, so these rules restate the dropdown. */
.nav .menu--products { position: absolute; top: calc(100% + 12px); left: 0; translate: none; z-index: 30; width: max-content; min-width: 180px; padding: 10px; display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--white); color: var(--ink); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.nav .menu--products[hidden] { display: none; }
.nav .menu--products a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 15px; }
.nav .menu--products a span { display: block; color: var(--grey-soft); font-size: 13px; margin-top: 1px; }
.nav .menu--products a:hover { background: var(--tint); color: var(--ink); }
/* Phones: logo on its own row, the four tabs spread across the row below, menu opens leftwards. */
@media (max-width: 640px) {
  .nav.nav--products { flex-wrap: wrap; height: auto; row-gap: 6px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
  .nav.nav--products .nav__links { width: 100%; justify-content: space-between; gap: 8px; }
  .nav .menu--products { left: auto; right: 0; }
}
@media (max-width: 360px) { .nav.nav--products .nav__links { font-size: 13px; } .nav.nav--products .nav__links > a, .nav.nav--products .nav__menu-btn { font-size: 13px; } }