/* miracle.fyi — the marketing-site SHELL, defined exactly once.
 *
 * Loaded by BOTH surfaces that render marketing chrome:
 *   1. index.html (the SPA) — the landing page's header
 *   2. the server-rendered pages (/integrations, /updates, /terms,
 *      /privacy, /contact) via renderUpdatesShell
 *
 * That dual loading is the point: the header/footer existed twice (once
 * in styles.css as .lp-nav, once in updates.css as .up-topbar) and the
 * two drifted — different widths, different CTA weights, logo on one but
 * not the other (user report, June 12). One file, one vocabulary, drift
 * impossible. Tokens fall back so the file works under either page's
 * :root palette.
 */

:root {
  --mk-shell: 1080px; /* the frame every marketing page hangs in */
}

.mk-nav {
  display: flex; align-items: center; gap: 22px;
  /* width:100% is load-bearing: on the landing the nav is a GRID item
     (inside .view), where auto margins beat stretch and the element would
     shrink to fit-content — the "two different headers" bug (June 12).
     With an explicit width both contexts resolve identically: fill,
     capped at the shell, centered. */
  width: 100%;
  box-sizing: border-box;
  max-width: var(--mk-shell);
  margin: 0 auto 8px;
  padding: max(18px, calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px)) 24px 14px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}
.mk-nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink, #f5f5f7);
  text-decoration: none;
}
.mk-nav__brand:hover { color: var(--ink, #f5f5f7); }
.mk-nav__brand svg { display: block; width: 24px; height: 24px; }
.mk-nav__name {
  font-family: var(--font-display, "Fraunces", serif);
  font-weight: 400; font-size: 19px;
  letter-spacing: -0.02em;
}
.mk-nav__tld { color: var(--ink-3, #8a8a99); }
.mk-nav__links {
  display: flex; align-items: center; gap: 4px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.mk-nav__link {
  display: inline-flex; align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-3, #8a8a99);
  text-decoration: none;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
  transition: color 160ms ease, background 160ms ease;
}
.mk-nav__link:hover { color: var(--ink, #f5f5f7); background: var(--surface, rgba(255, 255, 255, 0.035)); }
.mk-nav__link--current { color: var(--ink, #f5f5f7); background: var(--surface-2, rgba(255, 255, 255, 0.07)); }
.mk-nav__cta {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px;
  padding: 8px 18px;
  border: 0; border-radius: 999px;
  background: var(--accent, #7c3aed);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.mk-nav__cta:hover { background: #8b5cf6; color: #fff; }
.mk-nav__cta:active { transform: translateY(1px); }

@media (max-width: 720px) {
  .mk-nav { flex-wrap: wrap; gap: 8px; padding-left: 16px; padding-right: 16px; }
  .mk-nav__links { order: 3; width: 100%; justify-content: center; margin: 2px 0 0; }
  .mk-nav__cta { margin-left: auto; }
}