:root {
  --site-bg: #f5f5f7;
  --site-text: #171717;
  --site-text-dim: #6e6e73;
  --site-nav-bg: #111111;
  --site-nav-active: #2d2d2f;
  --site-border: rgba(23, 23, 23, .11);
  --site-green: #197b42;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--site-bg); color: var(--site-text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }

/* Shared masthead: blog-linked wordmark on the left, product tabs centered. */
#site-nav { align-items: center; background: var(--site-nav-bg); display: flex; justify-content: center; min-height: 60px; padding: 0 28px; position: relative; width: 100%; }
#site-nav .site-wordmark { color: #fff; font-size: 16px; font-weight: 600; left: 28px; letter-spacing: -.02em; position: absolute; text-decoration: none; }
#site-nav .nav-inner { display: flex; gap: 4px; }
#site-nav .nav-inner a { border-radius: 999px; color: #a1a1a6; font-size: 13px; font-weight: 500; letter-spacing: -.01em; padding: 8px 14px; text-decoration: none; }
#site-nav .nav-inner a:hover, #site-nav .nav-inner a:focus-visible { color: #ffffff; }
#site-nav .nav-inner a.active { background: var(--site-nav-active); color: #ffffff; }

@media (max-width: 520px) {
  #site-nav { min-height: 56px; padding: 0 12px; }
  #site-nav .site-wordmark { font-size: 14px; left: 14px; }
  #site-nav .nav-inner { margin-left: 64px; }
  #site-nav .nav-inner a { font-size: 12px; padding: 8px 10px; }
}