.mobile-nav-intro, .mobile-nav-icon, .mobile-drawer-links, .mobile-nav-backdrop, .mobile-only-header, .mobile-navigation-toast, .nav-rail-extra { display: none; }

/* Mobile keeps the desktop navigation model: brand, inline tool tabs that scroll
   sideways when they overflow, then the account action. There is no drawer. */
@media (max-width: 760px) {
  :root { --header-height: 60px; }
  html { scroll-padding-top: 76px; }
  body.has-mobile-reading-navigation:has(#legal-title), body.has-mobile-reading-navigation:has(#guide-content) { padding: 0; }
  body.has-mobile-reading-navigation > main { width: calc(100% - 24px); margin: 12px auto; }
  body.has-mobile-reading-navigation > main > .brand { display: none; }

  /* Account and reading pages build this header themselves and may not load the site stylesheet. */
  .mobile-only-header { font-family: "Clap Sans", Inter, Arial, sans-serif; color: #fff; }
  .mobile-only-header a { text-decoration: none; }
  .mobile-only-header .header-actions { display: flex; align-items: center; }
  .mobile-only-header .nav-tools > .nav-link { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; line-height: 20px; white-space: nowrap; cursor: pointer; }
  .mobile-only-header .nav-start { display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid #fff; background: #fff; color: #111; font-size: 11px; font-weight: 650; white-space: nowrap; }
  .mobile-only-header .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mobile-only-header .mobile-nav-actions { display: none; }
  .mobile-navigation-toast.is-visible { position: fixed; z-index: 80; display: block; bottom: 24px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 14px 18px; border: 1px solid #444; border-radius: 10px; background: #151515; color: #fff; font: 12px/1.5 Inter, Arial, sans-serif; }

  .site-header, .site-header.mobile-only-header { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; height: var(--header-height); min-height: var(--header-height); padding: 0 12px; border-bottom: 1px solid #202020; background: #090909; }
  .site-header > .menu-toggle, .site-header .mobile-nav-backdrop, .site-header .mobile-nav-actions { display: none !important; }
  .site-header > .brand { flex: 0 0 30px; width: 30px; height: 36px; margin: 0; }
  .site-header .brand-mark { width: 27px; height: 27px; }

  /* The tab rail fills the space between the brand and the account action. */
  .site-header > .main-nav { position: static; display: block; flex: 1 1 auto; min-width: 0; width: auto; height: auto; max-height: none; margin: 0; padding: 6px 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; }
  .site-header > .main-nav::-webkit-scrollbar { display: none; }
  .site-header > .main-nav.is-overflowing { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); }
  .site-header > .main-nav.is-overflowing.is-scrolled-end { -webkit-mask-image: none; mask-image: none; }
  .site-header .nav-tools { display: flex; flex-direction: row; align-items: center; gap: 4px; width: max-content; }
  .site-header .nav-tools > .nav-link { position: relative; flex: 0 0 auto; justify-content: center; width: auto; min-height: 36px; padding: 0 13px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #a5a5a5; font-size: 13px; font-weight: 550; letter-spacing: -.15px; scroll-snap-align: start; }
  .site-header .nav-tools > .nav-link:hover { color: #fff; background: #ffffff0d; }
  .site-header .nav-tools > .nav-link.is-current { border-color: #fff; background: #fff; color: #0a0a0a; }
  .site-header .nav-tools > .nav-creator { color: #6f6f6f; }
  .site-header .nav-tools > .nav-creator > svg { width: 12px; margin-left: 2px; }
  .site-header .nav-tools > .nav-rail-extra { display: inline-flex; }
  .site-header .nav-tools > .nav-creator + .nav-rail-extra { margin-left: 9px; }
  .site-header .nav-tools > .nav-creator + .nav-rail-extra::before { content: ""; position: absolute; left: -7px; top: 9px; bottom: 9px; width: 1px; background: #2a2a2a; }

  .site-header .header-actions { flex: 0 0 auto; margin-left: 0; gap: 8px; }
  .site-header .header-actions > .nav-assets, .site-header .header-actions > .nav-pricing, .site-header[data-session-state="authenticated"] .header-actions > .nav-pricing { display: none; }
  .site-header .header-actions > .nav-login { display: none; }
  .site-header .header-actions .nav-start { min-height: 34px; padding-inline: 13px; border-radius: 999px; font-size: 12px; }
  .site-header .header-account { padding-right: 0; }
  .site-header.billing-header { display: none; }
  .site-header.mobile-only-header .nav-start { display: inline-flex; }
  .site-header.mobile-only-header .nav-start[hidden] { display: none !important; }
  .toast { z-index: 80; }
}
