/* Site navigation: the announcement bar, the header with full-width panels, the mobile sheet and
   the footer groups. The marketing pages and the help site share this file. Both load it after
   their own sheet. The markup is in site/src/components/SiteHeader.astro. The links are in
   site/src/lib/siteNav.json. marketing.js opens and closes the panels (bindNavMenus).

   Wide screens (1300px and up): plain text items sit next to the logo. A panel opens under the
   header, from edge to edge, with two columns of titles and one-line notes, and one featured
   card. Below 1300px the menu button opens a full-height sheet, and each group is an accordion.
   Without JavaScript the noscript block in SiteHeader.astro lists every link in the open. */

.site-header {
  --nav-green:#075b45;
  --nav-ink:var(--ink,#111916);
  --nav-muted:var(--muted,#5b6263);
  --nav-edge:rgba(17,25,22,.10);
  --nav-ease:cubic-bezier(.22,1,.36,1);
  --nav-gutter:40px;
}
@media(min-width:1440px) {
  .site-header {
    --nav-gutter:5.2%;
  }
}
body:not(.brand-v2) .site-header {
  --nav-gutter:5.2%;
}

/* The announcement bar. It scrolls away; the header stays. A visitor can close it for the
   session (marketing.js keeps the choice in sessionStorage, and an inline script in the bar
   adds .announce-off before the first paint). */
.announce {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:6px 52px;
  background:#111916;
  color:#fff;
  font-size:13.5px;
  line-height:1.4;
  text-align:center;
}
.announce p {
  margin:0;
  color:#fff;
}
.announce a {
  margin-left:6px;
  color:#fff;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}
.announce a:hover {
  text-decoration-thickness:2px;
}
.announce-close {
  position:absolute;
  right:6px;
  top:50%;
  width:44px;
  height:44px;
  margin-top:-22px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#fff;
  font:inherit;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.announce-close:hover {
  background:rgba(255,255,255,.14);
}
.announce a:focus-visible,
.announce-close:focus-visible {
  outline:2px solid #fff;
  outline-offset:2px;
}
.announce-close[hidden] {
  display:none;
}
.announce[hidden],
html.announce-off .announce {
  display:none;
}
/* A button or note that shows only where signup is on. The class rules above would beat the hidden attribute. */
[data-signup-only][hidden] {
  display:none !important;
}

/* The glass of the page header moves to a pseudo-element, so no ancestor of a panel is a
   backdrop root. */
.brand-v2 .site-header {
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.brand-v2 .site-header::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(250,249,247,.78);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  pointer-events:none;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .brand-v2 .site-header,
  .brand-v2 .site-header.is-scrolled {
    background:transparent;
  }
  .brand-v2 .site-header::before {
    background:rgba(250,249,247,.97);
  }
}
@media(prefers-reduced-transparency:reduce) {
  .brand-v2 .site-header::before {
    background:var(--paper,#faf9f6);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

/* The items sit next to the logo, left-aligned, as plain text. */
.site-header .nav-links {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
}
.site-header .nav-item {
  margin:0;
  padding:0;
}
.site-header .nav-trigger,
.site-header .nav-link {
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:40px;
  margin:0;
  padding:8px 14px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--nav-ink);
  font:inherit;
  font-size:15px;
  font-weight:400;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  transition:color 160ms var(--nav-ease);
}
.site-header .nav-trigger:hover,
.site-header .nav-link:hover,
.site-header .nav-trigger[aria-expanded="true"] {
  background:transparent;
  color:var(--nav-green);
}
.site-header .nav-trigger:focus-visible,
.site-header .nav-link:focus-visible,
.site-header .nav-entry:focus-visible,
.site-header .nav-panel-footer:focus-visible,
.site-header .nav-card:focus-visible,
.site-header .nav-actions a:focus-visible {
  outline:2px solid var(--nav-green);
  outline-offset:3px;
}
/* A bridge under the open button keeps the hover alive while the pointer moves down to the panel. */
.site-header .nav-trigger::before {
  content:"";
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:calc(var(--header-h,86px) / 2 + 2px);
}
.site-header .nav-item.is-open .nav-trigger::before {
  display:block;
}

/* The current page. The word is underlined, so the mark never depends on colour alone. */
.site-header .nav-links a[aria-current],
.site-header .nav-links a.is-section {
  text-decoration:none;
}
.site-header .nav-link[aria-current] .nav-label,
.site-header .nav-link.is-section .nav-label,
.site-header .nav-trigger[aria-current] .nav-label {
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:7px;
}

/* The panel: white, from edge to edge, directly under the header, with a hairline above and
   below. It fades in 180ms. Moving from one item to the next switches with no fade
   (.is-switching). Hidden, it has visibility:hidden, so its links leave the tab order. */
.site-header .nav-panel {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:60;
  background:#fff;
  border-top:1px solid var(--nav-edge);
  border-bottom:1px solid var(--nav-edge);
  box-shadow:0 28px 48px -32px rgba(17,25,22,.28);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity 180ms var(--nav-ease),transform 180ms var(--nav-ease),visibility 0s linear 180ms;
}
.site-header .nav-item.is-open > .nav-panel {
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition-delay:0s;
}
.site-header.is-switching .nav-panel {
  transition:none;
}
.site-header .nav-panel-inner {
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,360px);
  gap:72px;
  align-items:start;
  max-width:1440px;
  margin:0 auto;
  padding:40px var(--nav-gutter) 48px;
}
.site-header .nav-menu {
  display:grid;
  gap:32px;
  align-content:start;
}
.site-header .nav-columns {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:56px;
}
.site-header .nav-columns.is-flat {
  grid-template-columns:minmax(0,1fr);
}
.site-header .nav-column ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:26px;
}
.site-header .nav-columns.is-flat .nav-column ul {
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:56px;
  row-gap:30px;
}
.site-header .nav-heading {
  margin:0 0 22px;
  color:var(--nav-muted);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* One entry: a title and one muted line. No icon. */
.site-header .nav-entry {
  display:block;
  padding:0;
  border-radius:6px;
  color:var(--nav-ink);
  white-space:normal;
  text-decoration:none;
}
.site-header .nav-entry-title {
  display:block;
  font-size:15px;
  font-weight:500;
  line-height:1.35;
  transition:color 160ms var(--nav-ease);
}
.site-header .nav-entry-desc {
  display:block;
  margin-top:3px;
  color:var(--nav-muted);
  font-size:13px;
  font-weight:400;
  line-height:1.4;
}
.site-header .nav-entry:hover .nav-entry-title,
.site-header .nav-entry[aria-current] .nav-entry-title {
  color:var(--nav-green);
}
.site-header .nav-entry[aria-current] .nav-entry-title {
  font-weight:600;
}
.site-header .nav-panel-footer {
  justify-self:start;
  color:var(--nav-ink);
  font-size:14px;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.site-header .nav-panel-footer:hover {
  color:var(--nav-green);
}

/* The featured card: a picture, a headline and an underlined link. The picture loads when the
   panel first opens (the img is display:none while the group is closed). */
.site-header .nav-card {
  display:block;
  border-radius:16px;
  color:var(--nav-ink);
  white-space:normal;
  text-decoration:none;
}
.site-header .nav-card-media {
  display:grid;
  place-items:center;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:16px;
  background:#f1f0ec;
}
.site-header .nav-card-media img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.site-header .nav-card-media.is-contain img {
  width:46%;
  height:auto;
  object-fit:contain;
}
.site-header .nav-item:not(.is-open) .nav-card-media img {
  display:none;
}
.site-header .nav-card-title {
  display:block;
  margin-top:16px;
  font-size:16px;
  font-weight:600;
  line-height:1.35;
}
.site-header .nav-card-link {
  display:inline-block;
  margin-top:8px;
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.site-header .nav-card:hover .nav-card-link {
  color:var(--nav-green);
}

/* The right side: Sign in is an outlined pill and Book a demo is a filled pill in the brand green. */
.site-header .nav-actions {
  gap:10px;
}
.site-header .nav-actions .button,
.site-header .nav-actions .button-outline {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:15px;
  font-weight:500;
  line-height:1.3;
  white-space:nowrap;
  text-decoration:none;
}
.site-header .nav-actions .button {
  padding:10px 20px;
  background:var(--nav-green);
  border:1px solid var(--nav-green);
  color:#fff;
}
.site-header .nav-actions .button:hover {
  background:#034331;
  border-color:#034331;
  color:#fff;
}
.site-header .nav-actions .button-outline {
  padding:10px 20px;
  border:1px solid rgba(17,25,22,.45);
  background:transparent;
  color:var(--nav-ink);
  transition:border-color 160ms var(--nav-ease),color 160ms var(--nav-ease);
}
.site-header .nav-actions .button-outline:hover {
  border-color:var(--nav-green);
  color:var(--nav-green);
}
@media(min-width:1300px) {
  .brand-v2 .nav-wrap {
    gap:40px;
  }
  .brand-v2 .site-header.is-scrolled .nav-actions .button,
  .brand-v2 .site-header.is-scrolled .nav-actions .button-outline {
    padding:7px 16px;
  }
}

/* Reduced motion: panels show and hide with no movement and no fade. */
@media(prefers-reduced-motion:reduce) {
  .site-header .nav-panel,
  .site-header .nav-trigger,
  .site-header .nav-link,
  .site-header .nav-entry-title,
  .site-header .nav-actions .button-outline {
    transition:none;
  }
  .site-header .nav-panel {
    transform:none;
  }
}

/* The sheet. The menu button opens it below 1300px. It fills the screen under the header.
   The ID selector beats the older menu rules in marketing.css and tokens.css. */
@media(max-width:1299px) {
  html.nav-open {
    overflow:hidden;
  }
  /* The help site used to switch at 1100px. It now switches here too, so the two sites match. */
  .site-header .menu-toggle {
    display:grid;
    place-items:center;
    flex:0 0 44px;
    width:44px;
    height:44px;
    padding:10px;
    border:1px solid var(--line,#d6d9d2);
    border-radius:999px;
    background:transparent;
    color:var(--nav-ink);
    font:inherit;
    font-size:14px;
    cursor:pointer;
  }
  .site-header .menu-toggle .menu-icon-close,
  .site-header .menu-toggle[aria-expanded="true"] .menu-icon-open {
    display:none;
  }
  .site-header .menu-toggle[aria-expanded="true"] .menu-icon-close {
    display:block;
  }
  .site-header .nav-wrap {
    justify-content:space-between;
  }
  .site-header #site-menu .help-search {
    width:100%;
  }
  .site-header #site-menu .help-search button > span,
  .site-header #site-menu .help-search button kbd {
    display:revert;
  }
  .site-header #site-menu {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:var(--header-h,var(--sl-nav-height,86px));
    box-sizing:border-box;
    height:calc(100vh - var(--header-h,var(--sl-nav-height,86px)) - var(--announce-h,0px));
    height:calc(100dvh - var(--header-h,var(--sl-nav-height,86px)) - var(--announce-h,0px));
    max-height:none;
    padding:8px max(20px,calc((100% - 720px) / 2)) calc(24px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;
    overscroll-behavior:contain;
    background:#fff;
    border-top:1px solid var(--nav-edge);
    border-bottom:0;
    box-shadow:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    font-size:16px;
  }
  .site-header #site-menu.open {
    display:flex;
  }
  .site-header #site-menu .nav-links {
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .site-header #site-menu .nav-item {
    border-bottom:1px solid var(--nav-edge);
  }
  .site-header #site-menu .nav-trigger,
  .site-header #site-menu .nav-link {
    display:flex;
    width:100%;
    min-height:64px;
    padding:0 4px;
    justify-content:space-between;
    border-radius:0;
    background:transparent;
    color:var(--nav-ink);
    font-size:24px;
    font-weight:500;
    letter-spacing:-.01em;
  }
  /* No icon: a plus and a minus, drawn as text, show that a group opens. */
  .site-header #site-menu .nav-trigger::after {
    content:"+";
    content:"+" / "";
    color:var(--nav-muted);
    font-size:28px;
    font-weight:300;
  }
  .site-header #site-menu .nav-trigger[aria-expanded="true"]::after {
    content:"\2212";
    content:"\2212" / "";
  }
  .site-header #site-menu .nav-trigger::before {
    display:none !important;
  }
  .site-header #site-menu .nav-trigger:hover,
  .site-header #site-menu .nav-link:hover,
  .site-header #site-menu .nav-trigger[aria-expanded="true"] {
    color:var(--nav-green);
  }
  .site-header #site-menu .nav-trigger:focus-visible,
  .site-header #site-menu .nav-link:focus-visible {
    outline-offset:-2px;
    border-radius:8px;
  }
  .site-header #site-menu .nav-panel {
    position:static;
    display:none;
    border:0;
    background:transparent;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
  }
  .site-header #site-menu .nav-item.is-open > .nav-panel {
    display:block;
    animation:nav-sheet-in 180ms var(--nav-ease);
  }
  .site-header #site-menu .nav-panel-inner {
    display:block;
    max-width:none;
    padding:0 4px 18px;
  }
  .site-header #site-menu .nav-card {
    display:none;
  }
  .site-header #site-menu .nav-menu {
    gap:4px;
  }
  .site-header #site-menu .nav-columns {
    display:block;
  }
  .site-header #site-menu .nav-column + .nav-column {
    margin-top:16px;
  }
  .site-header #site-menu .nav-heading {
    margin:4px 0 8px;
  }
  .site-header #site-menu .nav-column ul,
  .site-header #site-menu .nav-columns.is-flat .nav-column ul {
    display:block;
  }
  .site-header #site-menu .nav-entry {
    display:block;
    min-height:48px;
    padding:8px 0;
  }
  .site-header #site-menu .nav-entry-title {
    font-size:18px;
  }
  .site-header #site-menu .nav-entry-desc {
    font-size:14px;
  }
  .site-header #site-menu .nav-panel-footer {
    display:inline-flex;
    align-items:center;
    min-height:48px;
    font-size:16px;
  }
  .site-header #site-menu .nav-actions {
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-top:auto;
    padding-top:28px;
  }
  .site-header #site-menu .nav-actions > a {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:12px 20px;
    font-size:17px;
    align-self:stretch;
  }
}
@keyframes nav-sheet-in {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@media(prefers-reduced-motion:reduce) {
  .site-header #site-menu .nav-item.is-open > .nav-panel {
    animation:none;
  }
}

/* The footer groups. The same groups as the header panels. */
.footer-groups {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:28px 28px;
  align-content:start;
  font-size:15px;
}
.footer-groups ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.footer-groups .footer-heading {
  margin:0 0 12px;
  color:var(--ink,#111916);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
}
.footer-groups a:hover {
  color:var(--green,#075b45);
  text-decoration:underline;
  text-underline-offset:4px;
}
.footer-main {
  grid-template-columns:minmax(180px,.7fr) 3.3fr;
}
/* .footer-main nav in marketing.css has gap:12px. This rule is more specific. */
.footer-main .footer-groups {
  gap:28px 28px;
}
@media(max-width:1100px) {
  .footer-groups {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:900px) {
  .footer-main {
    grid-template-columns:1fr;
  }
  .footer-groups {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
/* The help footer is a flex row. A group keeps its own width. */
.help-footer-nav.footer-groups {
  display:flex;
  flex-wrap:wrap;
  gap:24px 32px;
}
.help-footer .footer-groups a {
  text-decoration:none;
}
.help-footer .footer-groups a:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}
.help-footer .footer-heading {
  color:var(--ink,#111916);
}