/* Shared v2 top menu (kxNav), standalone (SITE-COPY-REVIEW-01, Marcus first-release plan item 2): for pages that
   don't load the v2 design system (about, privacy, terms). Rules copied from v2/styles.css (NAV + MOBILE NAV); the
   tokens they need are scoped to .kx-nav / .kx-mobile so the host page's own styles are untouched. These pages have
   light heroes, so the bar is always the solid "scrolled" look. Keep in step with v2/styles.css. */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/lexend-400-800.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/inter-400-800.woff2) format('woff2'); }

.kx-nav, .kx-mobile {
  --terracotta: #E8703A;
  --terracotta-deep: #D4521A;
  --warm-bg: #F5F0EB;
  --fg1: #1C1917;
  --fg3: #78716C;
  --border-light: rgba(28, 25, 23, 0.08);
  --radius-sm: 8px;
  --measure-grid: 1280px;
  --gutter: clamp(20px, 2.6vw, 48px);
  --font-ui: 'Lexend', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}
/* Wide screens: the same steps as v2/colors_and_type.css, so this follows the nav and page body there (LAYOUT-WIDTH-01). */
@media (min-width: 1920px) { .kx-nav, .kx-mobile { --measure-grid: 1440px; } }
@media (min-width: 2560px) { .kx-nav, .kx-mobile { --measure-grid: 1600px; } }
.kx-nav *, .kx-mobile * { box-sizing: border-box; }

.kx-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(245,240,235,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light); }
.kx-nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--measure-grid);
  margin: 0 auto; padding: 14px var(--gutter); }
.kx-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.kx-nav-brand img { display: block; }
.kx-nav-name { font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--fg1); }
.kx-nav-right { display: flex; align-items: center; gap: 24px; }
.kx-nav-link { font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; color: var(--fg3); text-decoration: none; transition: color .2s; }
.kx-nav-link:hover { color: var(--fg1); }
.kx-nav-link.active, .kx-nav-link[aria-current="page"] { color: var(--terracotta); }
.kx-nav-cta { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; padding: 8px 18px; border-radius: var(--radius-sm);
  background: var(--terracotta); color: #fff !important; text-decoration: none; transition: background .2s; }
.kx-nav-cta:hover { background: var(--terracotta-deep); }
.kx-nav a:focus-visible, .kx-nav button:focus-visible, .kx-mobile a:focus-visible, .kx-mobile button:focus-visible {
  outline: 2px solid var(--terracotta); outline-offset: 2px; border-radius: 4px; }

.kx-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: none; color: var(--fg1); cursor: pointer; padding: 0; }
.kx-mobile { position: fixed; inset: 0; z-index: 1100; display: none; }
.kx-mobile.open { display: block; }
.kx-mobile-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
.kx-mobile-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(82vw, 340px);
  background: var(--warm-bg); padding: 24px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: -20px 0 60px rgba(0,0,0,0.25); animation: kxslide .35s cubic-bezier(0.16,1,0.3,1); }
@keyframes kxslide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.kx-mobile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kx-mobile-link { font-family: var(--font-ui); font-weight: 500; font-size: 1.05rem; color: var(--fg1);
  text-decoration: none; padding: 13px 0; border-bottom: 1px solid var(--border-light); }
.kx-mobile-link:hover, .kx-mobile-link.active, .kx-mobile-link[aria-current="page"] { color: var(--terracotta); }
.kx-mobile-cta { margin-top: 18px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .kx-mobile-panel { animation: none; } }

@media (max-width: 768px) {
  .kx-nav-right { display: none; }
  .kx-burger { display: flex; }
}