/* ═══════════════════════════════════════════════════════════════════════
   CHECKBOX — global marketing navigation (header + context nav + mobile
   sheet + footer). ONE stylesheet for every public marketing surface:
   the four static landings AND the React marketing pages.

   Self-contained on purpose: React pages do not load landing.css, so the
   brand tokens this file needs are (re)declared here with the exact values
   from the landing sheet. The mk- prefix keeps it inert next to any page's
   own styles.

   Interactivity: /js/marketing-nav.js (delegated events; aria-expanded,
   focus trap, Escape). Markup: lib/marketing/render-static-nav.mjs.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --mk-bg: #000000;
  --mk-surface: #0d0f12;
  --mk-surface-2: #14171b;
  --mk-line: rgba(255, 255, 255, .07);
  --mk-text: #F3F5F8;
  --mk-text-2: #9AA0A9;
  --mk-text-3: #7C838E;
  --mk-cy: #E6FC60;
  --mk-cy-2: #CADE54;
  --mk-on-cy: #10130A;
  --mk-glass: rgba(18, 21, 25, .66);
  --mk-pop-sh: 0 18px 44px rgba(0, 0, 0, .55);
  --mk-r-lg: 18px;
  --mk-r-xl: 22px;
  --mk-r-pill: 999px;
  --mk-ease: cubic-bezier(.22, .61, .36, 1);
  --mk-dur: .2s;
  --mk-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mk-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
}

/* ── Bar ─────────────────────────────────────────────────────────────── */

.mk-nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; padding: 0 16px; font-family: var(--mk-font); }
.mk-bar {
  box-sizing: border-box; width: 100%; max-width: 1128px; height: 62px; border-radius: var(--mk-r-pill);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 11px 0 24px;
  background: var(--mk-glass); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--mk-line);
}
.mk-brand { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--mk-text); }
.mk-brand svg { display: block; }

/* ── Desktop menus ───────────────────────────────────────────────────── */

.mk-links { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mk-menu { position: relative; }
.mk-menu-btn, .mk-plain {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px;
  border: 0; border-radius: var(--mk-r-pill); background: transparent; cursor: pointer;
  color: var(--mk-text-2); font-family: var(--mk-font); font-size: 14px; font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: color var(--mk-dur) var(--mk-ease), background var(--mk-dur) var(--mk-ease);
}
.mk-menu-btn:hover, .mk-plain:hover { color: var(--mk-text); background: rgba(255, 255, 255, .05); }
.mk-menu-btn[aria-expanded="true"] { color: var(--mk-text); background: rgba(255, 255, 255, .07); }
.mk-chev { transition: transform var(--mk-dur) var(--mk-ease); }
.mk-menu-btn[aria-expanded="true"] .mk-chev { transform: rotate(180deg); }

.mk-panel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  min-width: 250px; padding: 8px; border-radius: var(--mk-r-xl);
  /* Panels float over bright hero type — near-opaque, unlike the bar. */
  background: rgba(13, 15, 18, .96); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--mk-line); box-shadow: var(--mk-pop-sh);
}
.mk-panel--wide { min-width: 330px; }
.mk-panel[hidden] { display: none; }
.mk-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--mk-r-lg); text-decoration: none; transition: background var(--mk-dur) var(--mk-ease); }
.mk-item:hover { background: rgba(255, 255, 255, .05); }
.mk-item-label { color: var(--mk-text); font-size: 14px; font-weight: 550; letter-spacing: -.01em; }
.mk-item-tag { color: var(--mk-text-3); font-size: 12px; letter-spacing: -.005em; }

/* ── Right cluster ───────────────────────────────────────────────────── */

.mk-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mk-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--mk-r-pill); background: var(--mk-surface-2); border: 1px solid var(--mk-line); flex: 0 0 auto; }
.mk-lang a {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; padding: 0 10px;
  border-radius: var(--mk-r-pill); font-family: var(--mk-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  color: var(--mk-text-3); text-transform: uppercase; text-decoration: none; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; transition: color var(--mk-dur) var(--mk-ease), background var(--mk-dur) var(--mk-ease);
}
.mk-lang a:hover { color: var(--mk-text-2); }
.mk-lang a.on { background: var(--mk-cy); color: var(--mk-on-cy); border: 1px solid #353a42; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 2px 5px rgba(0, 0, 0, .5); }

.mk-cta {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px;
  border-radius: var(--mk-r-pill); background: var(--mk-cy); color: var(--mk-on-cy);
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; text-decoration: none;
  transition: background var(--mk-dur) var(--mk-ease), transform .14s var(--mk-ease);
}
.mk-cta:hover { background: var(--mk-cy-2); }
.mk-cta:active { transform: scale(.97); }

.mk-burger {
  display: none; width: 44px; height: 44px; border-radius: var(--mk-r-pill); flex: 0 0 auto; padding: 0;
  background: var(--mk-surface); border: 1px solid var(--mk-line); color: var(--mk-text-2);
  align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* ── Contextual second nav (Coach / Food Safety) ─────────────────────── */

.mk-ctx {
  box-sizing: border-box; width: 100%; max-width: 1128px; margin-top: 8px; height: 40px;
  display: flex; align-items: center; gap: 18px; padding: 0 20px; border-radius: var(--mk-r-pill);
  background: var(--mk-glass); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--mk-line);
  transition: transform .25s var(--mk-ease), opacity .2s var(--mk-ease);
}
/* Auto-hidden while scrolling down (js/marketing-nav.js); scroll up brings it back. */
.mk-ctx--hidden { transform: translateY(-10px); opacity: 0; pointer-events: none; }
.mk-ctx-label { font-family: var(--mk-mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--mk-text-3); white-space: nowrap; }
.mk-ctx-links { display: flex; align-items: center; gap: 18px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mk-ctx-links::-webkit-scrollbar { display: none; }
.mk-ctx-links a { color: var(--mk-text-2); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: color var(--mk-dur) var(--mk-ease); }
.mk-ctx-links a:hover { color: var(--mk-text); }

/* Pages that carry a context bar need extra room under the fixed stack.
   :has() is supported by every browser these landings target. */
body:has(.mk-ctx) .hero { padding-top: 216px; }

/* ── Mobile sheet ────────────────────────────────────────────────────── */

.mk-mobile {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  background: rgba(0, 0, 0, .92); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4);
  padding: 16px; font-family: var(--mk-font);
}
.mk-mobile[hidden] { display: none; }
.mk-m-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 18px; color: var(--mk-text); }
.mk-m-close { width: 44px; height: 44px; border-radius: var(--mk-r-pill); background: var(--mk-surface); border: 1px solid var(--mk-line); color: var(--mk-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mk-m-scroll { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding: 4px 8px; }
.mk-m-group { display: flex; flex-direction: column; gap: 2px; }
.mk-m-title { font-family: var(--mk-mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mk-text-3); padding: 0 12px 8px; }
.mk-m-link { display: flex; flex-direction: column; gap: 1px; padding: 11px 12px; border-radius: var(--mk-r-lg); text-decoration: none; color: var(--mk-text); font-size: 16.5px; font-weight: 550; letter-spacing: -.01em; transition: background var(--mk-dur) var(--mk-ease); }
.mk-m-link:hover { background: rgba(255, 255, 255, .05); }
.mk-m-link--plain { font-size: 16.5px; }
.mk-m-tag { color: var(--mk-text-3); font-size: 12.5px; font-weight: 400; }
.mk-m-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 8px 6px; border-top: 1px solid var(--mk-line); }
.mk-m-foot .mk-cta { display: inline-flex; flex: 1 1 auto; height: 48px; font-size: 15px; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.mk-footer { border-top: 1px solid var(--mk-line); padding: 56px 24px 40px; font-family: var(--mk-font); background: var(--mk-bg); }
.mk-f-grid { max-width: 1128px; margin: 0 auto; display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.mk-f-brand { display: flex; flex-direction: column; gap: 10px; color: var(--mk-text); max-width: 260px; }
.mk-f-quote { color: var(--mk-text-3); font-size: 13px; line-height: 1.55; }
.mk-f-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.mk-f-col { display: flex; flex-direction: column; gap: 9px; min-width: 120px; }
.mk-f-title { font-family: var(--mk-mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mk-text-3); margin-bottom: 3px; }
.mk-f-col a { color: var(--mk-text-2); font-size: 13.5px; text-decoration: none; transition: color var(--mk-dur) var(--mk-ease); }
.mk-f-col a:hover { color: var(--mk-text); }
.mk-f-legal { max-width: 1128px; margin: 36px auto 0; padding-top: 22px; border-top: 1px solid var(--mk-line); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mk-f-legal a, .mk-f-legal span { font-family: var(--mk-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--mk-text-3); text-decoration: none; }
.mk-f-legal a:hover { color: var(--mk-text-2); }

/* ── Focus & motion ──────────────────────────────────────────────────── */

.mk-nav a:focus-visible, .mk-nav button:focus-visible, .mk-footer a:focus-visible {
  outline: 2px solid var(--mk-text); outline-offset: 2px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .mk-nav *, .mk-mobile * { transition: none !important; }
}

/* ── Breakpoints ─────────────────────────────────────────────────────── */

@media (max-width: 1020px) {
  .mk-cta { display: none; }
}
@media (max-width: 880px) {
  .mk-links { display: none; }
  .mk-burger { display: inline-flex; }
  .mk-bar { padding: 0 11px 0 20px; height: 58px; }
  /* Context nav becomes the mobile chip strip (replaces the old bespoke
     .mnav): label hidden, links restyled as pill chips. */
  .mk-ctx { height: auto; padding: 7px 10px; gap: 7px; }
  .mk-ctx-label { display: none; }
  .mk-ctx-links { gap: 7px; }
  .mk-ctx-links a {
    flex: 0 0 auto; display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
    border-radius: var(--mk-r-pill); background: var(--mk-surface-2); border: 1px solid var(--mk-line);
    font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: var(--mk-text-2);
  }
  body:has(.mk-ctx) .hero { padding-top: 200px; }
  body:has(.mk-ctx) .section, body:has(.mk-ctx) .get-section { scroll-margin-top: 142px; }
}
@media (min-width: 881px) {
  .mk-mobile { display: none !important; }
}
@media (max-width: 420px) {
  .mk-lang a { min-width: 44px; padding: 0 8px; font-size: 10px; }
}

@media (max-width: 700px) {
  .mk-footer { padding: 44px 18px 30px; }
  .mk-f-grid { display: block; }
  .mk-f-cols { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; margin-top: 34px; }
  .mk-f-col { min-width: 0; gap: 5px; }
  .mk-f-legal { margin-top: 28px; padding-top: 16px; gap: 4px 16px; }
}

@media (min-width: 361px) and (max-width: 700px) {
  .mk-f-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; }
}

/* ═══ Touch targets ══════════════════════════════════════════════════
   Redesign rule 8: every control must answer to at least 44px of finger.
   Where there is room in the layout the control simply grows; where the
   design fixes a small visual size (the wordmark, the language pill) an
   invisible pseudo-element extends the hit area without moving a pixel. */

.mk-menu-btn, .mk-plain, .mk-item, .mk-m-link, .mk-cta, .mk-m-close,
.mk-ctx-links a, .mk-f-cols a, .mk-f-legal a {
  min-height: 44px;
}
.mk-f-legal a { min-width: 44px; justify-content: center; }

html[data-accent="blue"] {
  --mk-cy: #57C7FF;
  --mk-cy-2: #2DA9E8;
  --mk-on-cy: #06141C;
}

html[data-accent="pink"] {
  --mk-cy: #FF73B5;
  --mk-cy-2: #E75098;
  --mk-on-cy: #1B0711;
}
.mk-menu-btn, .mk-plain, .mk-ctx-links a { display: inline-flex; align-items: center; }
.mk-f-cols a, .mk-f-legal a { display: inline-flex; align-items: center; }
.mk-item { display: flex; flex-direction: column; justify-content: center; }

.mk-brand, .mk-lang a, .mk-burger { position: relative; }
.mk-brand::after, .mk-lang a::after, .mk-burger::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 44px;
}
/* The footer wordmark is a 16px logo; it gets its finger the same way. */
.mk-f-brand > a { position: relative; display: inline-block; }
.mk-f-brand > a::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 44px;
}