/* ===========================================================================
   site-chrome.css — the ONE style for the website's top navigation, footer
   and the Terms | Privacy tabs (Chris, 2026-09-29: "the nav should have the
   same origin in terms of links and styling").

   Markup comes from website-i18n/scripts/site-chrome.cjs, which writes it
   into every page. Classes are site-nav__* / site-foot__* on purpose: the old
   per-page rules (.nav-links, .brand, .nav-cta …) no longer match anything,
   so a page's leftover inline CSS cannot make one page's nav look different.
   Values are fixed here, not taken from each page's :root, for the same
   reason — pages had drifted to different widths and greys.
   =========================================================================== */

.site-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(3,3,4,.84); border-bottom: 1px solid #27272a; }
.site-nav__inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em;
  font-size: 17px; color: #f4f4f5; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.site-nav__brand small, .site-foot__brand small { color: #8b8b94; font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: .16em; }
.site-nav__dot, .site-foot__dot { width: 22px; height: 22px; border-radius: 7px; display: inline-block; flex-shrink: 0;
  background: linear-gradient(135deg, #f59e0b, #d97706); }
.site-nav__links { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 500; }
.site-nav__links a { color: rgba(244,244,245,.64); text-decoration: none; white-space: nowrap; }
.site-nav__links a:hover { color: #f4f4f5; }
.site-nav__links a[aria-current="page"] { color: #f4f4f5; }
.site-nav__end { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.site-nav__cta { font-size: 14px; font-weight: 800; padding: 9px 16px; border-radius: 10px; background: #f59e0b;
  color: #111; text-decoration: none; white-space: nowrap; }
.site-nav__cta:hover { background: #ffb21a; }

/* The Tour page keeps its own sticky top bar (its stage is sized from
   --topbar), so the nav sits inside it without its own bar styling. */
.topbar > .site-nav { position: static; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.topbar { display: flex; align-items: center; }
.topbar > .site-nav { width: 100%; }

@media (max-width: 1080px) { .site-nav__links { display: none; } }
@media (max-width: 480px) {
  .site-nav__inner { gap: 8px; padding: 0 14px; }
  .site-nav__brand small { display: none; }
  .site-nav__cta { padding: 8px 10px; }
}

/* Terms | Privacy — one legal section, two documents. */
.site-legal-tabs { max-width: 1180px; margin: 24px auto 0; padding: 0 24px; display: flex; gap: 6px; }
.site-legal-tabs a { font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; text-decoration: none;
  color: rgba(244,244,245,.64); border: 1px solid #27272a; }
.site-legal-tabs a[aria-current="page"] { color: #111; background: #f59e0b; border-color: #f59e0b; }

.site-foot { border-top: 1px solid rgba(244,244,245,.08); padding: 34px 0; color: #8b8b94; background: #030304; font-size: 13px; }
.site-foot__inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px; }
.site-foot__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; font-size: 15px; color: #f4f4f5; }
.site-foot__brand .site-foot__dot { width: 20px; height: 20px; border-radius: 6px; }
.site-foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.site-foot__links a { color: #8b8b94; text-decoration: none; }
.site-foot__links a:hover { color: #f4f4f5; }