/**
 * The site's way round: the bar every page wears, the menu it opens and the
 * footer. Read after site.css, on its tokens.
 *
 * The bar is short on purpose: Product and Solutions open a menu each, then
 * Enterprise and Pricing, the two pages a buyer decides on. One popover holds
 * both menus: under a pointer it shows the one the pointer came by, hung from
 * that word; a phone's button shows both, one under the other (`site-nav.js`).
 */
:root { --site-nav-h: 76px; --site-nav-glyph: 24px; }
@media (max-width: 620px) { :root { --site-nav-h: 60px; } }

/* ── The bar ────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--site-nav-h);
  box-sizing: border-box;
  padding: 0 max(var(--pad), calc((100% - var(--max)) / 2));
  background: var(--nav-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--ink);
  transition: box-shadow var(--motion-duration-normal) var(--ease);
}
.nav[data-scrolled] { box-shadow: 0 1px 0 var(--line), var(--soft-nav); }
.nav a, .nav button { white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: var(--space-1); }
.nav-links a, .nav-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-target); box-sizing: border-box; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-2); font-family: inherit; font-size: var(--text-base); letter-spacing: inherit; text-decoration: none; cursor: pointer; transition: color var(--motion-duration-fast), background var(--motion-duration-fast); }
.nav-links a:hover, .nav-link:hover { color: var(--ink); background: var(--panel); }
/* A word that opens a menu says so with a small caret, which turns while its menu is open. */
.nav-caret { display: inline-grid; width: var(--space-4); height: var(--space-4); margin-right: calc(var(--space-1) * -1); color: var(--ink-3); transition: transform var(--motion-duration-normal) var(--ease); }
.nav-caret svg { width: 100%; height: 100%; }
.nav-links a[aria-expanded="true"] { color: var(--ink); background: var(--panel); }
.nav-links a[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
/* Where the reader is: the bar's word for it takes full ink, over a dot in Archon's blue. */
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: calc(50% - var(--space-0)); bottom: var(--space-1); width: var(--space-1); height: var(--space-1); border-radius: 50%; background: var(--blue); opacity: 0; transform: scale(0); transition: opacity var(--motion-duration-normal) var(--ease), transform var(--motion-duration-normal) var(--ease); }
.nav-links a[aria-current] { color: var(--ink); }
.nav-links a[aria-current]::after { opacity: 1; transform: none; }
.nav-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); }
/* A phone's way to the menu: two lines that cross when it is open. */
.nav-menu-btn { display: none; position: relative; width: var(--touch-target); height: var(--touch-target); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.nav-menu-btn:hover { background: var(--panel); }
.nav-menu-btn::before, .nav-menu-btn::after { content: ""; position: absolute; left: calc(50% - var(--space-2)); top: 50%; width: var(--space-4); height: 0; border-top: var(--space-0) solid currentColor; transition: transform var(--motion-duration-normal) var(--ease); }
.nav-menu-btn::before { transform: translateY(calc(var(--space-1) * -1)); }
.nav-menu-btn::after { transform: translateY(var(--space-1)); }
.nav:has(.site-menu:popover-open) .nav-menu-btn::before { transform: rotate(45deg); }
.nav:has(.site-menu:popover-open) .nav-menu-btn::after { transform: rotate(-45deg); }

/* ── The menu: what Archon is made of, in two short lists ───────────────── */
.site-menu { position: fixed; inset: calc(var(--site-nav-h) - var(--space-2)) auto auto 50%; width: max-content; max-width: calc(100% - 2 * var(--pad)); max-height: calc(100dvh - var(--site-nav-h) - var(--space-4)); box-sizing: border-box; margin: 0; padding: var(--space-3); border: 0; border-radius: var(--site-radius-lg); background: var(--float-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--ink); box-shadow: var(--float-shadow); overflow: auto; overscroll-behavior: contain; opacity: 0; transform: translate(-50%, calc(var(--space-2) * -1)) scale(0.98); transform-origin: 50% 0; transition: opacity var(--motion-duration-normal) var(--ease), transform var(--motion-duration-normal) var(--ease), overlay var(--motion-duration-normal) allow-discrete, display var(--motion-duration-normal) allow-discrete; }
.site-menu:popover-open { opacity: 1; transform: translate(-50%, 0); }
@starting-style { .site-menu:popover-open { opacity: 0; transform: translate(-50%, calc(var(--space-2) * -1)) scale(0.98); } }
.site-menu::backdrop { background: none; }
/* Where the browser can tie one box to another, each menu hangs from its own word's edge; elsewhere it sits under the bar's middle. */
@supports (position-anchor: --site-product) {
  @media (min-width: 1021px) {
    .nav-links a[data-menu="product"] { anchor-name: --site-product; }
    .site-menu { position-anchor: --site-product; left: calc(anchor(left) - var(--space-3)); transform: translateY(calc(var(--space-2) * -1)) scale(0.98); transform-origin: 0 0; }
    /* Solutions is the wide one: it sits centred under the bar, where it fits any window the bar does. */
    .site-menu[data-menu="solutions"] { left: 0; right: 0; margin-inline: auto; transform-origin: 50% 0; }
    .site-menu:popover-open { transform: none; }
    @starting-style { .site-menu:popover-open { transform: translateY(calc(var(--space-2) * -1)) scale(0.98); } }
  }
}
/* Under a pointer, only the menu the pointer came by; opened by the button, both. */
@media (min-width: 1021px) {
  .site-menu[data-menu="product"] .site-menu-panel:not([data-panel="product"]), .site-menu[data-menu="solutions"] .site-menu-panel:not([data-panel="solutions"]) { display: none; }
  .site-menu[data-menu] .site-menu-title { display: none; }
}
.site-menu-panel + .site-menu-panel { margin-top: var(--space-5); }
.site-menu[data-menu] .site-menu-panel + .site-menu-panel { margin-top: 0; padding-top: 0; box-shadow: none; }
.site-menu-title { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: var(--touch-target); margin: 0; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--site-radius-card); background: none; color: var(--ink); font: inherit; font-size: var(--text-md); font-weight: 500; text-align: left; cursor: pointer; }
.site-menu-title:hover { background: var(--panel); }
.site-menu-title .nav-caret { margin-right: 0; }
.site-menu-title[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.site-menu-lists { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-2) var(--space-2); }
.site-menu-lists.is-two { grid-template-columns: auto auto; }
/* Eight teams read as two short columns under one name. */
.site-menu-list.is-pair { grid-template-columns: repeat(2, auto); column-gap: var(--space-2); }
.site-menu-list.is-pair .site-menu-h { grid-column: 1 / -1; }
/* A menu's last line: the few places beside its lists, quieter, a hairline above. */
.site-menu-foot { display: flex; flex-wrap: wrap; gap: 0 var(--space-1); margin-top: var(--space-3); }
.site-menu .site-menu-foot a { min-height: var(--site-space-10); padding: var(--space-1) var(--space-3); color: var(--ink-2); font-size: var(--text-sm); gap: var(--space-2); }
.site-menu .site-menu-foot a:hover { color: var(--ink); }
.site-menu-foot svg { width: var(--space-4); height: var(--space-4); color: var(--ink-3); }
.site-menu-list { display: grid; align-content: start; gap: var(--space-0); min-width: 15em; }
.site-menu-h { margin: 0; padding: var(--space-2) var(--space-3); color: var(--ink-3); font-size: var(--text-sm); font-weight: 500; transition: color var(--motion-duration-normal) var(--ease); }
.site-menu a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target); box-sizing: border-box; padding: var(--space-2) var(--space-3); border-radius: var(--site-radius-card); color: var(--ink); font-size: var(--text-base); text-decoration: none; white-space: nowrap; transition: background var(--motion-duration-fast); }
.site-menu a:hover, .site-menu a:focus-visible, .site-menu a[aria-current] { background: var(--panel); }
.site-menu a > i { display: grid; place-items: center; flex: none; width: var(--space-8); height: var(--space-8); border-radius: var(--site-radius-sm); background: var(--blue-wash); color: var(--blue); font-size: var(--text-lg); transition: background var(--motion-duration-normal) var(--ease), color var(--motion-duration-normal) var(--ease), transform var(--motion-duration-normal) var(--ease); }
/* The row under the pointer, and the one the reader is at, wear Archon's blue whole. */
.site-menu a:hover > i, .site-menu a:focus-visible > i, .site-menu a[aria-current] > i { background: var(--blue); color: var(--solid-ink); }
.site-menu a:hover > i { transform: scale(1.06); }
.site-menu a > span { display: grid; gap: var(--space-0); }
.site-menu a b { font-weight: 500; }
.site-menu a small { color: var(--ink-3); font-size: var(--text-sm); }
/* The rows arrive one after another, top to bottom, the three chapters abreast. */
.site-menu:popover-open .site-menu-lists a { animation: menu-row var(--site-slow) var(--ease) both; }
.site-menu-list a:nth-child(3) { animation-delay: 30ms; }
.site-menu-list a:nth-child(4) { animation-delay: 60ms; }
.site-menu-list a:nth-child(5) { animation-delay: 90ms; }
@keyframes menu-row { from { opacity: 0; transform: translateY(calc(var(--space-1) * -1)); } }
/* The bar's own links, for a screen too narrow to hold them. */
.site-menu-more { display: none; }

@media (max-width: 1020px) {
  .nav { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-4); }
  .nav-links { display: none; }
  .nav-menu-btn { display: block; }
  .site-menu { inset-inline: var(--pad); width: auto; max-width: none; transform: translateY(calc(var(--space-2) * -1)); }
  .site-menu:popover-open { transform: none; }
  .site-menu-lists { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-menu-lists.is-two { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .site-menu-list { min-width: 0; }
  .site-menu-list.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A phone's menu reads as a list: Product and Solutions open in place, then the pages the bar names. */
  .site-menu[data-collapsible] .site-menu-panel:not([data-open]) .site-menu-body { display: none; }
  .site-menu[data-collapsible] .site-menu-panel + .site-menu-panel { margin-top: 0; padding-top: 0; box-shadow: none; }
  .site-menu-body { padding-bottom: var(--space-2); }
  .site-menu-more { display: grid; gap: 0; margin-top: var(--space-3); }
  .site-menu .site-menu-more a { min-height: var(--touch-target); padding: var(--space-2) var(--space-3); color: var(--ink); font-size: var(--text-md); font-weight: 500; }
  .site-menu .site-menu-more a:last-child { margin-top: var(--space-2); color: var(--ink-2); font-weight: 400; }
}
@media (max-width: 620px) {
  .nav { top: 0; padding-inline: var(--space-4); column-gap: var(--space-1); }
  .nav .mark { gap: var(--space-2); }
  .nav .site-mark-glyph { width: var(--site-nav-glyph); height: var(--site-nav-glyph); }
  .nav .site-wordmark { font-size: var(--text-sm); letter-spacing: 0.22em; }
  .nav .btn.is-small { min-height: var(--site-space-10); padding-inline: var(--space-3); font-size: var(--text-sm); }
  /* Sign in is in the menu: the bar keeps the mark, the way in and the menu. */
  .nav-actions .nav-link { display: none; }
  .site-menu { inset-inline: var(--space-3); }
  /* A phone reads the chapters one under another, their rows two abreast and by name alone. */
  .site-menu-lists, .site-menu-lists.is-two { grid-template-columns: minmax(0, 1fr); }
  .site-menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-1); }
  .site-menu-h { grid-column: 1 / -1; }
  .site-menu a small { display: none; }
  .site-menu a { padding-inline: var(--space-2); gap: var(--space-2); }
}

/* ── A chapter opens: its place in the page, its name, and what is in it ──── */
.chapter { display: block; height: 0; scroll-margin-top: calc(var(--site-space-10) * -1); }

/* ── Footer: the same lists, laid open ──────────────────────────────────── */
.foot { max-width: var(--max); margin: 0 auto; padding: var(--site-space-16) var(--pad) var(--site-space-10); box-sizing: content-box; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--site-space-10); }
.foot-cols { display: grid; grid-template-columns: repeat(4, auto); gap: var(--space-6) var(--site-space-16); }
.foot-col { display: grid; align-content: start; }
.foot-h { margin: 0 0 var(--space-1); color: var(--ink-3); font-size: var(--text-sm); font-weight: 500; }
.foot-col a, .foot-legal a { display: inline-flex; align-items: center; min-height: var(--space-8); color: var(--ink-2); font-size: var(--text-base); text-decoration: none; transition: color var(--motion-duration-fast); }
.foot-col a:hover, .foot-legal a:hover { color: var(--ink); }
/* The page signs off with its name, set as wide and light as the lockup. */
.foot-word { overflow: hidden; margin: var(--site-space-12) 0 0; padding-left: 0.38em; color: color-mix(in oklab, var(--ink) 7%, transparent); font-family: var(--font-wordmark); font-size: var(--site-foot-word); font-weight: 300; letter-spacing: 0.38em; line-height: 0.9; text-align: center; white-space: nowrap; user-select: none; -webkit-user-select: none; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-6); }
.foot-row.is-legal { margin-top: var(--space-6); color: var(--ink-3); font-size: var(--text-sm); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.foot-legal a { min-height: var(--touch-target); }
@media (max-width: 760px) {
  .foot-top { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
  .foot-col a { min-height: var(--touch-target); }
}
@media (prefers-reduced-motion: reduce) { .site-menu, .nav-caret, .nav-menu-btn::before, .nav-menu-btn::after, .nav-links a::after, .site-menu a > i, .site-menu-h { transition: none; } .site-menu:popover-open .site-menu-lists a { animation: none; } }