/* ============================================================================
   SHARED NAV + LOGO — the single source of truth for the marketing header.

   Loaded by BOTH the landing page (which has its own inline stylesheet) and
   every page that uses site.css. It exists because these rules used to be
   duplicated in the two places, and duplicates drift: on 2026-08-01 the
   site.css copy had its base rules declared AFTER the media queries, so the
   entire mobile shrink was dead code and the nav overflowed 18px past the
   viewport — mobile Safari zoomed out to fit, and the "Start free" CTA pressed
   against the screen edge on every profession page, /partners and /setup. The
   landing page's copy had the same rules in the correct order and looked fine,
   which is exactly why the bug went unnoticed. One file, one behaviour.

   LOAD ORDER MATTERS: link this AFTER site.css (and after the landing page's
   inline <style>). `.nav-cta` and `.btn` are both single-class selectors, so
   .nav-cta's height:44px only beats .btn's height:50px by coming later. Load
   this first and the CTA silently grows to 50px.

   Base rules stay ABOVE the media queries below, for the same source-order
   reason that caused the original bug.
   ========================================================================== */

nav{position:sticky;top:0;z-index:30;background:rgba(246,241,233,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:14px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.logo .mark{width:34px;height:34px;display:block;flex:none}
.logo .wo{color:var(--warm)}
footer .logo{font-size:24px}
footer .logo .mark{width:26px;height:26px}
.navlinks{display:flex;gap:6px;align-items:center}
.navlink{font-size:14px;color:var(--muted);padding:0 10px;white-space:nowrap}
.nav-cta{height:44px;padding:0 18px;font-size:14px}

/* .navlink.hide-sm drops the lowest-priority link ("How it works") on phones.
   It must live HERE, not in site.css: the landing page doesn't load site.css,
   and without this its nav is one link too wide on mobile. site.css also hides
   .hide-sm generally at 760px; this narrower rule is harmless there. */
@media(max-width:640px){.logo{font-size:24px;gap:9px}.logo .mark{width:30px;height:30px}.navlinks{gap:4px}.nav-in{gap:8px}.navlink{padding:0 7px;font-size:13px}.nav-cta{padding:0 13px;font-size:13px}.navlink.hide-sm{display:none}}
/* Smaller phones: shrink the nav so the "Start free" CTA can never clip off the
   right. Measured at 375px: logo 116 + gap 6 + links 202 = 324 inside 331, which
   keeps the 22px gutter symmetric on both edges.
   Heights deliberately stay at the base 44px — the minimum comfortable tap
   target. The dead rules this replaced shrank them to 38/36px. */
@media(max-width:430px){.logo{font-size:18px;gap:6px}.logo .mark{width:24px;height:24px}.navlinks{gap:2px}.nav-in{gap:6px}.navlink{padding:0 5px;font-size:12.5px}.nav-cta{padding:0 12px;font-size:12.5px}}
/* 320px phones (iPhone SE 1st gen). The rules above still leave the nav 9px
   over there — 306 needed inside 276 — so trim once more. Measured at 320px:
   269 inside 276, i.e. 7px of slack on top of the 22px gutters, so a font
   metric shifting slightly can't tip it back into overflow. Bounded at 340px
   so 360px phones keep the roomier sizing above. Heights stay 44px. */
@media(max-width:340px){.logo{font-size:15px;gap:5px}.logo .mark{width:20px;height:20px}.navlinks{gap:1px}.navlink{padding:0 2px;font-size:11.5px}.nav-cta{padding:0 9px;font-size:11.5px}}