/* Shared header for the homepage, FAQ, support and privacy pages. */
html { scroll-padding-top:96px; }
.top { position:sticky; top:0; z-index:50; background:#090b0f; border-bottom:1px solid #303b43; }
.top-inner { width:min(1280px,100%); margin-inline:auto; padding-inline:max(32px,env(safe-area-inset-left)) max(32px,env(safe-area-inset-right)); min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; color:#eef2f4; text-decoration:none; font:700 25px/1 "Barlow Condensed","Arial Narrow",sans-serif; letter-spacing:.035em; text-transform:uppercase; }
.brand-mark { width:32px; height:32px; flex:none; }
.status { font:400 12px/1.4 "IBM Plex Mono",monospace; color:#adb8c0; }
.site-nav { display:flex; align-items:center; gap:24px; margin-left:auto; }
.site-nav a { display:inline-block; padding:12px 0; color:#eef2f4; font:500 14px/1.4 "IBM Plex Sans",sans-serif; text-underline-offset:5px; }
.site-nav a:hover, .site-nav a[aria-current="page"], .brand:hover { color:#6ecfde; }
.top a:active { transform:none; }
.skip-link { z-index:100; }
.faq-page .intro { top:96px; }
@media(max-width:767px) {
  html { scroll-padding-top:120px; }
  .top-inner { padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right)); min-height:68px; flex-wrap:wrap; column-gap:16px; row-gap:0; padding-block:12px 4px; }
  .brand { font-size:22px; gap:9px; }
  .brand-mark { width:27px; height:27px; }
  .status { margin-left:auto; font-size:10px; max-width:15ch; text-align:right; }
  .site-nav { order:3; width:100%; margin-left:0; gap:28px; }
}