/* ════════════════════════════════════════════════════════════════════
   KHIO MARKETING TOP BAR — the phone handover for the shared site header.
   Loaded by recipes.html (/add-ons), recipe.html (/add-ons/:slug) and
   connections.html (/connections). James 2026-07-31.

   Those three are the marketing pages that are ALSO in-app destinations, so
   each carries TWO tops and shows one. On desktop (≥769px) it is the shared
   site header, views/site/header.html, written in by lib/shared/site-chrome.js
   and styled by /css/shared/site-chrome.css. Below that it is the page's own
   iOS-style header — compact brand row under the status bar, 44px hit
   targets, its own dark treatment — built 2026-07-30 in each page's
   `@media (max-width: 768px)` block. That is the app's phone chrome, not a
   marketing bar, and it stays. Don't "simplify" that into one bar without
   reading those mobile blocks first.

   Until 2026-09-24 this file was a plain-CSS copy of the old Tailwind bar
   (`.mnav`, `.khio-navx`), because these three must not load
   tw-marketing.css: its preflight would reset their bespoke cream design. The
   shared header replaced that bar, so all that is left here is the handover.
   In the app shell the shared bar is hidden by site-chrome.css itself.
   ════════════════════════════════════════════════════════════════════ */

/* The page's own phone header takes over below this width. */
/* body .kd-nav, not .kd-nav: site-chrome.css is written into <head> after this
   file and sets display on .kd-nav itself, so a bare .kd-nav here would lose
   and both bars would show (seen live 2026-09-24). */
@media (max-width: 768px) {
    body .kd-nav { display: none; }
}