/* The company bar for a standalone product page that keeps its own look and system fonts.
   It carries the company mark, the shared navigation and nothing else, and it styles only
   its own subtree, so the product page below it keeps every one of its bytes and rules. */
.cn-bar { background: #151518; color: #e8e9e7; border-bottom: 1px solid #3c3d45; font: 500 1rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.cn-bar-inner { align-items: center; display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0 auto; min-height: 56px; padding-block: 4px; width: min(1120px, calc(100% - 32px)); }
.cn-bar a { align-items: center; color: inherit; display: inline-flex; min-height: 48px; overflow-wrap: normal; text-decoration: none; }
.cn-bar a:focus-visible { outline: 3px solid #b2c8f0; outline-offset: 2px; }
.cn-bar-brand { flex: 0 0 auto; font-size: 1.125rem; font-weight: 700; gap: 8px; letter-spacing: -0.01em; text-transform: lowercase; }
.cn-bar-brand img { display: block; height: 24px; width: 24px; }
.cn-bar .site-nav { display: flex; margin-left: auto; margin-right: -8px; }
.cn-bar .site-nav a { padding-inline: 8px; position: relative; }
.cn-bar .site-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cn-bar .site-nav a[aria-current="page"]::after { background: currentColor; bottom: 6px; content: ""; height: 2px; left: 8px; position: absolute; right: 8px; }
@media (max-width: 360px) { .cn-bar-inner { gap: 0 8px; } .cn-bar .site-nav a { padding-inline: 6px; } }