/* ── BCO brand — shared across every landing page ─────────────────────────────
   Single source of truth for the marketing nav. These rules were previously
   duplicated verbatim in index.html, terms.html, privacy-policy.html and
   sms-consent.html; edit them here only. The per-page <style> blocks no longer
   set the nav height or the logo — this file owns both.

   VARIANT: the cyan logo (cyan glyph + white wordmark) is the two-tone brand
   mark and is correct here because all four navs are #0F172A. It is a
   DARK-BACKGROUND asset — its wordmark is #FFFFFF, so it disappears on light.
   Never move it onto a light surface; use logo-navy.png there. The app surfaces
   (command Login, AdminLogin, TermsGate, admin header, sidebar) deliberately
   stay on the all-white logo and are not affected by this file.

   SIZING: `width: auto` and `flex-shrink: 0` are load-bearing, not decoration.
   Height alone leaves the logo shrinkable by the flex nav, and a bare
   max-height has a ceiling with no floor — that combination rendered the mark
   tiny on Windows while looking correct on macOS (commit 6ae01b8).

   The asset is cropped to its opaque bounding box, so the height set here is
   the actual visible mark, not a box with ~35% dead padding inside it. Sizes
   here look materially bigger than the same number did before the swap.

   THREE TIERS. The logo is 2104x1141 (1.844:1), so height drives width, and width
   is what competes with the "Request a Demo" CTA for the nav's content box
   (viewport minus 48px of nav padding). The CTA measures ~152px worst case
   ("Request a Demo" at 14px semibold plus 9px/20px padding). Each tier keeps
   the logo at ~72-75% of its nav height:

     tier      logo   nav    logo width   tightest viewport   slack
     desktop    84    112      155.2px        769px          +413.8px
     mid        68     92      125.6px        601px          +275.4px
     mobile     52     72       96.1px        320px           +23.9px

   Only the mobile tier is actually tight, and it is the binding constraint —
   see the note on that block. The mid tier exists for visual smoothness, not
   overflow: 84px would still fit at 601px (+245.8px), but dropping straight
   from 84px to 52px at one breakpoint reads as a jolt. */

nav {
  height: 112px;
}

.nav-logo {
  height: 84px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

/* Tablet — smooths the step down from desktop. Ordered before the 600px block
   so that block wins below 600px (equal specificity, later rule applies). */
@media (max-width: 768px) {
  nav {
    height: 92px;
  }

  .nav-logo {
    height: 68px;
  }
}

/* Phones — the binding constraint. At 320px the nav content box is 272px and
   the CTA takes ~152px, leaving ~120px for the logo. At 52px the logo is
   96.1px and clears by ~24px; at 68px it would be 125.6px and overflow. Do not
   raise this tier without re-checking against the CTA width.
   600px matches the breakpoint the rest of the landing page already uses. */
@media (max-width: 600px) {
  nav {
    height: 72px;
  }

  .nav-logo {
    height: 52px;
  }
}