.site-breadcrumbs {
  position: absolute;
  top: calc(100% + 4px);
  left: var(--sh-pad, 24px);
  color: var(--sh-dim, rgb(255 255 255 / 65%));
  font: 10px/1.5 var(--ax-mono, monospace);
  pointer-events: auto;
  transition: opacity 0.35s, visibility 0.35s;
}
/* phones and tablets: the trail rides in the fixed header, so once the page
   has scrolled past the hero it would sit over the text below; it fades out
   there and comes back at the top. Laptops keep it as before. */
@media (max-width: 1024px) {
  .sh.is-solid .site-breadcrumbs {
    opacity: 0;
    visibility: hidden;
  }
}

.site-breadcrumbs--document {
  position: static;
  margin-bottom: 24px;
}

.site-breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-breadcrumbs li + li::before {
  margin-right: 9px;
  color: var(--sh-accent, #7cc0ff);
  content: '/';
}

.site-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.site-breadcrumbs a:hover,
.site-breadcrumbs a:focus-visible {
  color: var(--sh-strong, #fff);
}

.site-legal-links {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 14%);
  font: 11px/1.5 var(--ax-mono, monospace);
}

.site-legal-footer {
  padding: 24px clamp(24px, 7vw, 104px);
  border-top: 1px solid rgb(255 255 255 / 14%);
  background: #0b1210;
}

.site-legal-links--document {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 0;
  border: 0;
}

.site-legal-links a {
  color: rgb(255 255 255 / 70%);
  text-decoration: none;
}

.site-legal-links a:hover,
.site-legal-links a:focus-visible {
  color: #7cc0ff;
}

.site-cookie-notice {
  position: fixed;
  z-index: 130;
  right: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  width: min(760px, calc(100% - 36px));
  padding: 16px 18px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 5px;
  background: #0b1210;
  color: #f4f7f4;
  box-shadow: 0 14px 50px rgb(0 0 0 / 35%);
  font: 13px/1.55 var(--ax-text, system-ui, sans-serif);
}

.site-cookie-notice p {
  margin: 0;
  color: rgb(255 255 255 / 75%);
}

.site-cookie-notice a {
  color: #7cc0ff;
  white-space: nowrap;
}

.site-cookie-notice button {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.site-cookie-notice button:hover,
.site-cookie-notice button:focus-visible {
  border-color: #7cc0ff;
  outline: none;
}

@media (max-width: 620px) {
  .site-cookie-notice {
    right: 12px;
    bottom: 82px;
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
    width: calc(100% - 24px);
    padding: 14px;
    font-size: 12px;
  }

  .site-cookie-notice p {
    grid-column: 1 / -1;
  }

  .site-cookie-notice a {
    justify-self: start;
  }
}
/* Before a React page renders, #root is empty and the legal footer would sit at
   the top of the screen for a moment and then jump to the bottom (a layout shift). */
#root:empty + .site-legal-footer {
  display: none;
}
/* phones: 11px, the smallest readable size (was 10px everywhere) */
@media (max-width: 600px) {
  .site-breadcrumbs {
    font-size: 11px;
  }
}