/* Phone menu for the landing, blog and notes pages (the ones with <nav class="header-nav">).
   Those pages carry their own copy of the header CSS and, below 640px, hide the plain links and keep
   only the "Try Free" button, which left a phone visitor with no way to reach Pricing, Features or the
   FAQ. landing-nav.js adds a menu button and a drawer; this file styles them and only applies on a phone. */

.ln-menu-btn, .ln-drawer { display: none; }

@media (max-width: 768px) {
  /* one rule for the whole set, so the pages' differing inline breakpoints cannot leave a gap */
  .header-nav a:not([class]) { display: none !important; }

  .ln-menu-btn {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; margin-left: 4px;
    background: #fff; border: 1px solid #d4d4d4; border-radius: 6px; cursor: pointer;
  }
  .ln-menu-btn:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
  .ln-menu-btn span { display: block; width: 20px; height: 2px; background: #111; border-radius: 1px; transition: transform .15s, opacity .15s; }
  .ln-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .ln-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .ln-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .ln-drawer {
    position: fixed; left: 0; right: 0; z-index: 1000;
    max-height: calc(100vh - 64px); overflow-y: auto;
    background: #fff; border-bottom: 1px solid #d4d4d4; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 4px 16px 16px;
  }
  .ln-drawer.ln-open { display: block; }
  .ln-drawer a {
    display: flex; align-items: center; min-height: 48px;
    font-size: var(--step-md, 1rem); font-weight: 500; color: #111; text-decoration: none; border-bottom: 1px solid #eee;
  }
  .ln-drawer a[aria-current="page"] { font-weight: 700; }
  .ln-drawer a:focus-visible { outline: 2px solid #111; outline-offset: -2px; }
}
@media (prefers-reduced-motion: reduce) { .ln-menu-btn span { transition: none; } }