/* Site header menus: Product and Solutions (owner, 21 Oct 2026 ~18:30 IST: "two menus, the way Double's header has them").
   Loaded after ../landing-v2/style.css, whose .site-header, .bar, .nav and .nav-toggle stay as they are (the nav folds behind Menu
   under 861 px). This file adds only the two menu buttons and their panels, for every page that carries the shared header.
   Product groups the pages by what the product does; Solutions by who they are for. A page not built yet is a title with a small
   "Soon" mark and no link. Targets 44 px. Border rule (G56): no line around a panel, a shadow only. */

.nav-group { position: relative; display: flex; align-items: center; }
.mm-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 2px; background: none; border: 0;
  color: var(--ink-2); font: inherit; font-weight: 500; cursor: pointer; }
.mm-btn:hover, .mm-btn[aria-expanded="true"] { color: var(--ink); }
.mm-btn svg { width: 14px; height: 14px; transition: transform 160ms ease; }
.mm-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .mm-btn svg { transition: none; } }

.mm { display: none; }
.mm.is-open { display: block; }
.mm-grid { display: grid; gap: 12px; }
.mm-h { margin: 0 0 4px; font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); }
.mm ul { list-style: none; margin: 0; padding: 0; }
.mm li { display: flex; align-items: center; min-height: var(--tap); white-space: nowrap; }
.mm a { color: var(--ink); text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 10px; min-height: var(--tap); width: 100%; }
.mm a:hover, .mm a[aria-current="page"] { color: var(--accent); }
.nav .mm a[aria-current="page"] { text-decoration: none; color: var(--accent); }
.mm-soon { color: var(--ink-2); font-weight: 500; display: flex; align-items: center; gap: 10px; }
.mm-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.mm-ic svg { width: 18px; height: 18px; }
.mm-dot { flex: none; width: 32px; display: grid; place-items: center; }
.mm-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.mm-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 11.5px;
  font-weight: 600; line-height: 1.5; }
/* "Soon" (switched off, not in Pingtail yet) reads apart from "Page soon" (live, page being written): no fill, a thin ring, lighter
   weight (persona review N-R3-4) */
.mm-tag-off { background: transparent; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; font-style: italic; }
.mm-foot { margin: 0; font-size: var(--t-meta); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; }
.nav .mm-foot .link-arrow { color: var(--accent); font-weight: 600; font-size: .95rem; white-space: nowrap; }

@media (min-width: 861px) {
  .site-header .bar { position: relative; }
  .nav-group { position: static; }
  .mm { position: absolute; top: calc(100% - 4px); right: clamp(16px, 4vw, 24px); z-index: 6; width: max-content; max-width: calc(100vw - 32px);
    padding: 22px 28px 18px; border-radius: 16px; background: var(--surface); box-shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 24px 60px rgba(15, 27, 45, .16); }
  .mm-grid { grid-template-columns: repeat(var(--mm-cols, 2), max-content); gap: 8px 44px; }
  .mm-foot { grid-column: 1 / -1; padding-top: 12px; margin-top: 6px; box-shadow: inset 0 1px 0 var(--surface-2); }
}
@media (min-width: 861px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mm { box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, .5); } }
@media (min-width: 861px) { :root[data-theme="dark"] .mm { box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, .5); } }

/* phone and narrow screens: the two menus fold into the Menu list as two groups */
@media (max-width: 860px) {
  .nav-group { flex-direction: column; align-items: stretch; border-top: 1px solid var(--line); }
  .mm-btn { justify-content: space-between; width: 100%; padding: 4px 0; color: var(--ink); font-weight: 600; }
  .mm { padding: 0 0 12px; }
  .nav .mm a, .nav .mm li { border-top: 0; }
  /* a narrow phone (360) lets the "Page soon" tag drop under its title instead of running past the gutter (persona review N7) */
  .mm li { white-space: normal; }
  .mm-soon { align-items: flex-start; padding-block: 10px; }
  .mm-soon .mm-dot { height: 1.5em; }
  .mm-t { min-width: 0; }
}

/* The geo notice (base.html: "Showing prices for ..., Keep, Change country") under the shared header on every public page. site.css styles it on the older pages; the
   landing design's stylesheet does not, so the shared header CSS carries the same rules (same tokens, same 44 px target). */
.geo-bar { background: var(--accent-soft); border-bottom: 1px solid transparent; }
.geo-notice { margin: 0; padding-block: 6px; font-size: .9rem; line-height: 1.4; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.geo-notice a { font-weight: 600; display: inline-flex; align-items: center; min-height: var(--tap); }