/* Site header (founder, 2026-10-06: the main menu on every page). The same bar as home, pricing
   and the examples, for the pages that had their own slim header. Scoped to header.site-header, and
   sticky, so it sits above the content as those headers did. Menu sizes on tablets and phones, the
   Pricing menu and the buttons come from brand-v2.css. */
header.site-header { position: sticky; top: 0; left: 0; right: 0; z-index: 1000; display: block; margin: 0; padding: 0;
  height: auto; background: rgba(255, 255, 255, .96); border-bottom: 1px solid rgba(23, 24, 28, .08); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
header.site-header .hdr-wrap { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
header.site-header nav { display: flex; justify-content: space-between; align-items: center; gap: 0; position: relative;
  margin: 0; padding: 12px 0; max-width: none; height: auto; background: none; border: 0; }
header.site-header .nav-border { position: absolute; top: 6px; bottom: 6px; left: 0; right: 0; border: 1.5px solid #000;
  border-radius: 300px; pointer-events: none; background: rgba(255, 255, 255, .5); box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
header.site-header .logo { display: inline-flex; align-items: center; position: relative; z-index: 2; margin: 0 0 0 16px;
  padding: 0; text-decoration: none; white-space: nowrap; }
header.site-header .logo:hover { opacity: .7; }
header.site-header .nav-left { display: flex; gap: 8px; align-items: center; }
header.site-header .nav-center { display: flex; gap: 4px; align-items: center; list-style: none; margin: 0 0 0 32px; padding: 0;
  position: relative; z-index: 2; }
header.site-header .nav-center li { list-style: none; margin: 0; padding: 0; }
header.site-header .nav-center > li > a { display: inline-block; padding: 8px 16px; border-radius: 300px; color: #17181C;
  text-decoration: none; font-weight: 500; font-size: 15px; background: none; transition: background .2s ease; }
header.site-header .nav-center > li > a:hover { background: #EDEEF2; }
header.site-header .nav-right { display: flex; gap: 12px; align-items: center; position: relative; z-index: 2; margin: 0 16px 0 0; }
header.site-header .nav-login { font-size: 15px; font-weight: 500; color: #4A4E5A; text-decoration: none; padding: 8px 10px;
  border-radius: 300px; white-space: nowrap; transition: color .15s ease, background .15s ease; }
header.site-header .nav-login:hover { color: #17181C; background: #EDEEF2; }
header.site-header .nav-btn { padding: 8px 16px; font-size: 15px; font-weight: 650; text-decoration: none; border-radius: 300px;
  white-space: nowrap; }
header.site-header .nav-cta-short { display: none; }
@media (max-width: 1024px) {
  header.site-header .nav-cta-long { display: none; }
  header.site-header .nav-cta-short { display: inline; }
}
@media (max-width: 1024px) and (min-width: 769px) {
  header.site-header .hdr-wrap { padding: 0 24px; }
  header.site-header nav { gap: 8px; }
  header.site-header .nav-left { gap: 10px; flex: 0 0 auto; }
  header.site-header .nav-center { gap: 6px; margin-left: 10px; }
  header.site-header .nav-center > li > a { padding: 8px 10px; white-space: nowrap; }
  header.site-header .nav-right { gap: 6px; margin-left: auto; margin-right: 12px; }
  header.site-header .logo { margin-left: 12px; }
}
@media (max-width: 768px) {
  header.site-header .hdr-wrap { padding: 0 20px; }
  header.site-header nav { flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 10px 0; }
  header.site-header .nav-border { display: none; }
  header.site-header .nav-left { display: contents; }
  header.site-header nav > .nav-left .logo { order: 1; flex: 0 0 auto; margin: 0 auto 0 0; }
  header.site-header .nav-right { order: 2; flex: 0 0 auto; gap: 6px; margin: 0 0 0 auto; }
  header.site-header nav .nav-center { order: 3; width: 100%; margin: 0; gap: 6px; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; border: 1.5px solid #000; border-radius: 300px; padding: 6px 4px; background: rgba(255, 255, 255, .5);
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  header.site-header .nav-center::-webkit-scrollbar { display: none; }
  header.site-header .nav-center li { flex-shrink: 0; }
  header.site-header .nav-center > li > a { padding: 6px 10px; white-space: nowrap; }
}

/* The page's own links (its sections, or its neighbors): a quiet row inside the hero, right
   under its buttons, on the hero's own left edge. It used to be a band between the hero and the
   next section, where the cards that some pages pull up over the hero covered it (founder,
   2026-10-06: "looks bad placed or overlapped"). Links the hero's buttons already carry are left out. */
.page-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; margin: 26px 0 0; padding: 0;
  background: none; border: 0; }
.page-links .pl-label { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6E7382; margin-right: 6px; }
/* (!important: some pages color every link in their hero violet) */
main nav.page-links a { font-size: 14.5px; font-weight: 550 !important; line-height: 1.3; color: #33363F !important; text-decoration: none !important; padding: 6px 13px;
  border-radius: 999px; border: 1px solid #D9DBE3; background: rgba(255, 255, 255, .72); transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
main nav.page-links a:hover { border-color: #17181C; color: #17181C !important; background: #FFFFFF; }
main nav.page-links a:focus-visible { outline: 2px solid #6A4BFF; outline-offset: 2px; }
@media (max-width: 640px) { .page-links { margin-top: 22px; } .page-links .pl-label { flex-basis: 100%; margin: 0 0 2px; } }