/**
 * Compact site navigation: Sample report · How it works · Pricing · Scan my page.
 *
 * One definition for every page that carries it: the static marketing pages
 * (the homepage hero, /message-market-fit, /ai-info, /contact) and the
 * server-rendered /blog and /category-map routes (lib/page-shell.ts). Not on
 * the report pages (/scan-result, /scan-result-paid, /sample-report) or
 * /rewrite: someone reading a report doesn't get a site nav.
 *
 * Markup, everywhere:
 *   <header class="… site-nav-host">
 *     <a>logo</a>
 *     <nav class="site-nav" aria-label="Main">
 *       <span class="site-nav__menu"> three text links </span>
 *       <a class="yp-cta-nav yp-cta-type">Scan my page</a>   (not on the homepage,
 *     </nav>                                                    whose form is right there)
 *   </header>
 *
 * Link type inherits the page's own face. The button is .yp-cta-nav in
 * yp-button.css. On a phone the four items don't fit one row beside the logo,
 * so the nav dissolves into its header: logo and button share the top row and
 * the three text links take a row of their own underneath.
 */
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav__menu { display: flex; align-items: center; gap: 26px; }
.site-nav__menu a {
  color: #5b6280; text-decoration: none;
  font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.site-nav__menu a:hover { color: #1E5BFF; }
.site-nav__menu a[aria-current="page"] { color: #0a0d24; }

@media (max-width: 640px) {
  .site-nav-host { flex-wrap: wrap; row-gap: 14px; }
  .site-nav { display: contents; }
  .site-nav .yp-cta-nav { order: 1; }
  .site-nav__menu { order: 2; flex-basis: 100%; gap: 20px; }
  .site-nav__menu a { font-size: 14px; }
}