/* The site nav, one for every page: a fixed pill with the wordmark left, the three
   sections centred, and on the right the theme switch, the one call to action and,
   on phones, the menu. Self-contained so every page draws exactly the same bar. */
.snav { font-size: 14px; line-height: 1.4; letter-spacing: -0.003em; position: fixed; top: 12px; left: 0; right: 0; z-index: 60; padding: 0 12px; font-family: 'Inter', ui-sans-serif, -apple-system, system-ui, sans-serif;
  --sn-ink: #0d0d0d; --sn-ink2: #5d5d5d; --sn-bg: rgba(249,249,249,.8); --sn-pop: #fff; --sn-line: rgba(13,13,13,.10); --sn-hov: rgba(13,13,13,.05); --sn-sel: rgba(13,13,13,.075); --sn-fill: #0d0d0d; --sn-on: #fff; }
:root[data-theme="dark"] .snav { --sn-ink: #f3f3f3; --sn-ink2: #b4b4b4; --sn-bg: rgba(24,24,24,.8); --sn-pop: #2a2a2a; --sn-line: rgba(255,255,255,.12); --sn-hov: rgba(255,255,255,.06); --sn-sel: rgba(255,255,255,.09); --sn-fill: #f3f3f3; --sn-on: #0d0d0d; }
.snav-space { height: 64px; }
.snav-in { width: min(1100px, 100%); margin: 0 auto; height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 8px 0 18px;
  border-radius: 999px; background: var(--sn-bg); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--sn-line), 0 4px 12px -4px rgba(0,0,0,.10); color: var(--sn-ink); }
.snav a { color: inherit; text-decoration: none; }
.snav-wm { justify-self: start; font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: -0.025em; }
.snav-links { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.snav-links > li > a, .snav-dd summary { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; color: var(--sn-ink2); font-weight: 500; font-size: 14px; line-height: 1; cursor: pointer; list-style: none; transition: background-color 120ms ease, color 120ms ease; }
.snav-dd summary::-webkit-details-marker { display: none; }
.snav-links a[aria-current="page"], .snav-dd summary[aria-current="page"] { background: var(--sn-sel); color: var(--sn-ink); }
.snav-dd { position: relative; }
.snav-dd summary svg { transition: transform 200ms cubic-bezier(.23,1,.32,1); }
.snav-dd[open] summary svg { transform: rotate(180deg); }
.snav-pop { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); min-width: 240px; display: flex; flex-direction: column; gap: 2px; padding: 8px;
  border-radius: 18px; background: var(--sn-pop); box-shadow: inset 0 0 0 1px var(--sn-line), 0 12px 32px -8px rgba(0,0,0,.18); }
.snav-pop a { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 12px; color: var(--sn-ink2); font-weight: 500; font-size: 14px; line-height: 1; white-space: nowrap; }
.snav-pop a:hover, .snav-pop a[aria-current="page"] { background: var(--sn-hov); color: var(--sn-ink); }
.snav-end { justify-self: end; display: flex; align-items: center; gap: 6px; position: relative; }
.snav-icb { padding: 0; font: inherit; width: 36px; height: 36px; border-radius: 999px; border: 0; background: none; color: var(--sn-ink2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; list-style: none; transition: background-color 120ms ease, color 120ms ease; }
.snav-icb::-webkit-details-marker { display: none; }
.snav-icb .sun { display: none; }
:root[data-theme="dark"] .snav-icb .sun { display: block; } :root[data-theme="dark"] .snav-icb .moon { display: none; }
.snav-cta { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--sn-fill); color: var(--sn-on) !important; font-weight: 500; font-size: 14px; line-height: 1; white-space: nowrap; transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.snav-cta:active { transform: scale(.97); }
.snav-menu { display: none; position: relative; }
.snav-menu .snav-pop { left: auto; right: -8px; transform: none; top: calc(100% + 14px); }
.snav :focus-visible { outline: 2px solid #0169cc; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .snav-links > li > a:hover, .snav-dd summary:hover, .snav-icb:hover { background: var(--sn-hov); color: var(--sn-ink); }
}
@media (max-width: 760px) {
  .snav-in { display: flex; justify-content: space-between; }
  .snav-links { display: none; }
  .snav-menu { display: block; }
}

/* On touch the controls keep their size and gain a 44px hit area around them. */
@media (pointer: coarse) {
  .snav-icb, .snav-cta { position: relative; }
  .snav-icb::after, .snav-cta::after { content: ""; position: absolute; inset: -4px; }
}

/* the phone menu: Company, and Use cases as a row that opens the four pages under it */
.snav-pop .snav-sub { display: flex; flex-direction: column; gap: 2px; }
.snav-pop .snav-sub summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; padding: 0 12px; border-radius: 12px; cursor: pointer;
  list-style: none; color: var(--sn-ink2); font-weight: 500; font-size: 14px; line-height: 1; -webkit-tap-highlight-color: transparent; }
.snav-pop .snav-sub summary::-webkit-details-marker { display: none; }
.snav-pop .snav-sub summary svg { flex: none; transition: transform 200ms cubic-bezier(.23,1,.32,1); }
.snav-pop .snav-sub[open] summary svg { transform: rotate(180deg); }
.snav-pop .snav-sub summary:hover, .snav-pop .snav-sub[open] summary, .snav-pop .snav-sub summary[aria-current="page"] { background: var(--sn-hov); color: var(--sn-ink); }
.snav-pop .snav-sub a { height: 38px; padding-left: 24px; }
.snav-pop .snav-sub[open] a { animation: sn-in 200ms cubic-bezier(.23,1,.32,1) both; }
.snav-pop .snav-sub[open] a:nth-of-type(2) { animation-delay: 30ms; } .snav-pop .snav-sub[open] a:nth-of-type(3) { animation-delay: 60ms; } .snav-pop .snav-sub[open] a:nth-of-type(4) { animation-delay: 90ms; }
@keyframes sn-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .snav-pop .snav-sub[open] a { animation: none; } .snav-pop .snav-sub summary svg { transition: none; } }