/* Canonical top-nav styles, shared by every marketing page.
   Paired with scripts/partials/header.html and injected by scripts/sync-partials.js,
   which also guarantees each page links this file. Edit here, not in a page.

   .nav-in carries its own container rather than leaning on each page's .wrap,
   because those differ (the blog's .wrap is a 800px reading column against
   1180px on the marketing pages). Self-contained keeps the nav identical
   everywhere, which is the whole point of sharing it. */

.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ink-100); }
.nav-in { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; height: 68px; display: flex; align-items: center; gap: 28px; }
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 48px; width: auto; }

/* Left, next to the logo. .nav-login carries margin-left:auto, which is what
   pushes Log in / Start free right and leaves these where they are. */
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { position: relative; font-size: 14px; font-weight: 700; color: var(--slate); text-decoration: none; transition: color 0.15s; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--gold); opacity: 0; transition: opacity 0.15s; }
.nav-links a:hover { color: var(--charcoal); }
.nav-links a:hover::after { opacity: 1; }
.nav-links a:active { color: var(--gold-600); }
.nav-links a:focus-visible { outline: 2.5px solid var(--gold-600); outline-offset: 4px; border-radius: 4px; }

.nav-login { display: inline-flex; align-items: center; margin-left: auto; height: 34px; padding: 0 14px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--slate); text-decoration: none; transition: color 0.15s, background 0.15s; }
.nav-login:hover { color: var(--charcoal); background: var(--ink-050); }
.nav-login:active { background: var(--ink-100); }
.nav-login:focus-visible { outline: 2.5px solid var(--gold-600); outline-offset: 2px; }
.nav-cta { margin-left: -18px; }

@media (max-width: 780px) {
  /* Logo + Log in + Start free already fill the bar here, so the section links
     would collide. All three live in the footer, which is the fallback. */
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  .nav-in { padding: 0 20px; }
}