/* Shared navigation for the landing, catalog and detector pages. */
:root { --header-height: 64.8px; }
html { scroll-padding-top: calc(var(--header-height) + 18px); }
.site-header { position: sticky; top: 0; z-index: 100; height: var(--header-height); background: #0b0e12; backdrop-filter: blur(16px); border-bottom: 1px solid #293139; transition: background .28s ease, border-color .28s ease, box-shadow .28s ease; }
.site-header.is-pinned { background: #0b1116eb; border-color: #49606b; box-shadow: 0 8px 28px #0002; animation: header-settle .28s ease-out both; }
.site-header::after { content: ''; position: absolute; inset: auto 0 -1px; height: 1px; background: linear-gradient(90deg,transparent,#8dd8df66,transparent); transform: scaleX(.45); opacity: 0; transition: transform .35s ease, opacity .35s ease; pointer-events: none; }
.site-header.is-pinned::after { transform: scaleX(1); opacity: 1; }
@keyframes header-settle { from { transform: translateY(-5px); } to { transform: translateY(0); } }
.mobile-demo { display: none; }
.site-nav { gap: 24px; }
.site-nav a[aria-current="page"] { color: #b8edf1; }
.menu-toggle { display: none; min-width: 58px; min-height: 44px; padding: 9px 10px; border: 1px solid #39444e; border-radius: 8px; color: #e6f1f4; background: transparent; font-size: 11px; }
main [id] { scroll-margin-top: 18px; }
@media (max-width: 960px) {
  .site-header { height: var(--header-height); }
  .header-inner { gap: 10px; }
  .header-cta { margin-left: auto; gap: 8px; padding: 9px 11px; font-size: 11px; white-space: nowrap; }
  .brand { font-size: 18px; gap: 8px; }
  .menu-toggle { display: block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 12px 20px 20px; flex-direction: column; align-items: stretch; gap: 0; background: #0e151c; border-bottom: 1px solid #34424a; box-shadow: 0 14px 25px #0003; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 14px 6px; font-size: 15px; border-bottom: 1px solid #24313a; }
}
@media (max-width: 800px) { :root { --header-height: 57.6px; } }
@media (max-width: 380px) {
  .header-inner { gap: 8px; }
  .brand-mark { display: none; }
  .header-cta { font-size: 10px; padding-inline: 8px; }
}

/* One text wordmark across the site. */
.footer-brand, .detail-footer-brand { font-size: 23px; font-weight: 700; letter-spacing: -.045em; }
.site-header .brand { font-size: 40px; line-height: 40px; font-weight: 700; letter-spacing: -.055em; }
@media (max-width: 520px) {
  .site-header .header-cta { display: none; }
  .menu-toggle { margin-left: auto; }
  .site-nav .mobile-demo { display: block; color: #a4e3ea; }
}
@media (max-width: 700px) {
  .catalog-filters button, .catalog-reset, .lightbox-controls button, .lightbox-close { min-width: 44px; min-height: 44px; }
  .catalog-search input, .demo-form input:not([type="checkbox"]), .demo-form select, .demo-form textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header::after { animation: none; transition: none; }
}