/* mobile-nav.v1.css (2026-10-06, patches/trial_cta). Served max-age=604800: never edit in place, ship a new name.
 *
 * The menu the header gains below 1024px, where the bundle hides its nav (Features / Pricing / FAQ
 * are `hidden lg:flex`) and a phone had no way to reach a section except by scrolling. The button
 * and its panel come from the bundle (JpMobileNav, sections90.trialcta) and are display:none
 * without this sheet, so taking its <link> out takes the menu out.
 *
 * THE FIT. header-join.v1.css fitted the phone row to the pixel (6-8px to spare at 320-375px in de
 * and fr), so there is no room for one more button. Below 1024px the menu button therefore STANDS
 * IN for the round appearance button: same 36px, same place (last in the row), and the appearance
 * switch is the last row of the menu. The row's width does not change at any size. From 1024px the
 * nav and the appearance button are back and the menu is not drawn.
 *
 * The button is the appearance button's shape (.jpa-thm in landing-dark.v2.css: 36px round, the
 * muted ink, surface-2 under the pointer); the panel is the language menu's glass, hung from the
 * same edge. Rows are 44px tall: they are pressed with a thumb.
 */
.jp-mnav { display: none; }

@media (max-width: 1023px) {
  header .ml-auto > .jpa-thm { display: none; }

  .jp-mnav { display: block; position: relative; flex: none; }
  .jp-mnav-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 9999px;
    background: transparent; color: hsl(var(--fg-muted)); cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .jp-mnav-btn:hover, .jp-mnav-btn:focus-visible, .jp-mnav-btn[aria-expanded="true"] {
    background: hsl(var(--surface-2)); color: hsl(var(--fg)); outline: none;
  }
  .jp-mnav-btn svg { width: 18px; height: 18px; display: block; }

  .jp-mnav-panel {
    position: absolute; right: 0; top: 44px; z-index: 50;
    min-width: 184px; padding: 4px; border-radius: 12px; overflow: hidden;
  }
  .jp-mnav-panel a, .jp-mnav-thm {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 0 12px;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    font: inherit; font-size: 14px; line-height: 1.2; text-align: left; white-space: nowrap;
    color: hsl(var(--fg-muted)); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .jp-mnav-panel a:hover, .jp-mnav-panel a:focus-visible,
  .jp-mnav-thm:hover, .jp-mnav-thm:focus-visible {
    background: hsl(var(--surface-2)); color: hsl(var(--fg)); outline: none;
  }
  /* mobile-sections.v6.css hides every a[href="#features"] up to 768px. It was written for the header's
     nav entry in the days the section itself was not drawn on a phone; the section is back (it is
     3400px of the phone page) and only that link rule is left. The hero's "See features" button was
     given its display back the same way (hero-copy.v5.css). */
  .jp-mnav-panel a[href="#features"] { display: flex !important; }
  /* the appearance switch: under a hairline, its icon the size of the header's */
  .jp-mnav-thm { margin-top: 4px; position: relative; }
  .jp-mnav-thm::before {
    content: ""; position: absolute; left: 8px; right: 8px; top: -2.5px; height: 1px;
    background: hsl(var(--line-strong) / .7); pointer-events: none;
  }
  .jp-mnav-thm svg { width: 16px; height: 16px; flex: none; display: block; }
}