/* ============================================================================
   Shared marketing-site header — the status ribbon + sticky nav. The markup lives
   once in _partials/site-header.html and is injected into every page at build time
   (see build-marketing.mjs); this is the single source of truth for its styling.
   Built on the design-system tokens (ds/styles.css), loaded by every page.
   ============================================================================ */
:root { --hdr-edge: clamp(20px, 5vw, 72px); --hdr-maxw: 1280px; }

/* ---- status ribbon ---- */
.ribbon { background: var(--neutral-900); color: var(--neutral-400); }
.ribbon__in { max-width: var(--hdr-maxw); margin-inline: auto; display: flex; align-items: center; gap: var(--space-6); height: 34px; padding-inline: var(--hdr-edge); }
.ribbon span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; }
.ribbon .hot { color: var(--accent-bright); }
.ribbon__sp { flex: 1; }
.ribbon__wave { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.ribbon__wave i { width: 2px; background: var(--neutral-600); border-radius: 1px; }
.ribbon__wave i.on { background: var(--accent); }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--canvas) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--border-subtle); }
.nav__in { max-width: var(--hdr-maxw); margin-inline: auto; display: flex; align-items: center; gap: var(--space-8); height: 66px; padding-inline: var(--hdr-edge); }
.brand { display: flex; align-items: center; gap: var(--space-4); flex: none; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__name { font-family: var(--font-display); font-weight: var(--weight-heavy); font-size: 19px; letter-spacing: -0.025em; color: var(--text-strong); }
.brand__name b { color: var(--brand); }
.nav__links { display: flex; gap: var(--space-7); margin-left: var(--space-8); }
.nav__links a { color: var(--text-body); font-weight: var(--weight-medium); font-size: var(--size-body); text-decoration: none; }
.nav__links a:hover { color: var(--text-strong); text-decoration: none; }
.soon { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.nav__cta { margin-left: auto; display: flex; align-items: center; gap: var(--space-5); }
/* the plain "Sign in" link; the trial button keeps its own .bg-btn styling */
.nav__cta a:not(.bg-btn) { color: var(--text-body); font-weight: var(--weight-semibold); font-size: var(--size-body); text-decoration: none; }
.nav__cta a:not(.bg-btn):hover { color: var(--text-strong); text-decoration: none; }

@media (max-width: 900px) { .nav__links { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ribbon__wave i.on { animation: ribbon-bob 1.3s var(--ease-inout) infinite; }
  @keyframes ribbon-bob { 0%,100% { transform: scaleY(1); transform-origin: bottom; } 50% { transform: scaleY(.5); transform-origin: bottom; } }
}