/* GENERATED from the enfonica/www repo (npm run chrome:export). Do not edit it here: change the chrome in www and export it again.
   Sources: src/styles/00-tokens.css (@font-face), src/styles/50-chrome.css, src/chrome-mkdocs/mkdocs.css */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   SITE CHROME (shared): used by the website and the blog, and copied exactly into the
   docs and legal sites (npm run chrome:export). After changing it, see "Site chrome" in CLAUDE.md.
   Header (dark / light glass, switches with the section beneath it), products
   mega menu, mobile menu and footer. Self-contained: it relies on nothing from
   either site's own stylesheet except a box-sizing reset.
   Markup: partials/chrome-header.njk, chrome-footer.njk. Behaviour: chrome.js.
   ========================================================================== */

:root {
  --chrome-h: 72px;
  --chrome-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --chrome-ink: #0a0a0b;
  --chrome-dark: #1a1b20;
  --chrome-footer-bg: #131418;
  --chrome-muted: #6b6d74;
  --chrome-line: rgba(10, 10, 11, 0.08);
  --chrome-line-dark: rgba(255, 255, 255, 0.1);
  --chrome-blue: #175bff;
  --chrome-max: 1440px;
  --chrome-gutter: clamp(20px, 4vw, 48px);
  --chrome-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 992px) {
  :root {
    --chrome-h: 80px;
  }
}

html {
  scroll-padding-top: calc(var(--chrome-h) + 16px);
}

/* Header ------------------------------------------------------------------ */
.site-header {
  --ch-fg: #fff;
  --ch-fg-soft: rgba(255, 255, 255, 0.78);
  --ch-hover: rgba(255, 255, 255, 0.09);
  --ch-cta-bg: #fff;
  --ch-cta-fg: var(--chrome-ink);
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--chrome-h);
  border-bottom: 1px solid var(--chrome-line-dark);
  background: rgba(26, 27, 32, 0.97);
  color: var(--ch-fg);
  font-family: var(--chrome-font);
  transition: background-color 0.35s var(--chrome-ease), border-color 0.35s var(--chrome-ease), color 0.35s var(--chrome-ease);
}

.site-header[data-theme="light"] {
  --ch-fg: var(--chrome-ink);
  --ch-fg-soft: #3a3b41;
  --ch-hover: rgba(10, 10, 11, 0.06);
  --ch-cta-bg: var(--chrome-ink);
  --ch-cta-fg: #fff;
  border-bottom-color: var(--chrome-line);
  background: rgba(255, 255, 255, 0.96);
}

/* The header floats over the top of the page, like frosted glass laid on the first
   section: it takes no layout space, and the first section extends up behind it (a
   transparent top border the section's own background paints into). Its content still
   starts below the header. */
.site-header {
  margin-bottom: calc(var(--chrome-h) * -1);
}

.site-header ~ main > :first-child {
  border-top: var(--chrome-h) solid transparent;
  background-origin: border-box;
}

/* Frosted glass where the browser supports it */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(22, 23, 28, 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }

  .site-header[data-theme="light"] {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
}

.site-header__inner {
  display: flex;
  align-items: stretch;
  gap: 20px;
  height: 100%;
  max-width: calc(var(--chrome-max) + var(--chrome-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--chrome-gutter);
}

/* Logo: both versions are stacked and cross-fade with the theme */
.site-header__logo {
  position: relative;
  flex: none;
  align-self: center;
  width: 148px;
  height: 37px;
}

.site-header__logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transition: opacity 0.35s var(--chrome-ease);
}

.site-header__logo-img--light-bg,
.site-header[data-theme="light"] .site-header__logo-img--dark-bg {
  opacity: 0;
}

.site-header[data-theme="light"] .site-header__logo-img--light-bg {
  opacity: 1;
}

/* Navigation links */
.site-nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-inline: auto;
}

.site-nav__item {
  display: flex;
  align-items: center;
}

.site-nav > .site-nav__link {
  align-self: center;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ch-fg-soft);
  font: 500 15px/1.2 var(--chrome-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s;
}

.site-nav__link:hover,
.site-nav__link[aria-expanded="true"] {
  background: var(--ch-hover);
  color: var(--ch-fg);
}

.site-nav__link[aria-current="page"] {
  color: var(--ch-fg);
  background: var(--ch-hover);
}

.site-nav__chevron {
  opacity: 0.7;
  transition: transform 0.25s var(--chrome-ease);
}

.site-nav__link[aria-expanded="true"] .site-nav__chevron {
  transform: rotate(180deg);
}

.site-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.site-nav ~ .site-header__actions {
  margin-left: 0;
}

.site-header__cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ch-cta-bg);
  color: var(--ch-cta-fg);
  font: 500 15px/1 var(--chrome-font);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.35s var(--chrome-ease), color 0.35s var(--chrome-ease), transform 0.18s var(--chrome-ease), box-shadow 0.18s;
}

.site-header__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(10, 10, 11, 0.22);
}

.site-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ch-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .site-header__burger:hover {
    background: var(--ch-hover);
  }
}

/* Three bars that fold into a cross */
.burger {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}

.burger > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.25s, width 0.3s var(--chrome-ease);
}

.burger > span:nth-child(1) { top: 0; }
.burger > span:nth-child(2) { top: 7px; width: 70%; }
.burger > span:nth-child(3) { top: 14px; }

@media (hover: hover) {
  .site-header__burger:hover .burger > span:nth-child(2) {
    width: 100%;
  }
}

.site-header__burger[aria-expanded="true"] .burger > span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__burger[aria-expanded="true"] .burger > span:nth-child(2) {
  opacity: 0;
  transform: translateX(-6px);
}

.site-header__burger[aria-expanded="true"] .burger > span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header :focus-visible,
.mobile-menu :focus-visible,
.site-footer :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Products mega menu ---------------------------------------------------------
   Opens 10px below the header. ::before is an invisible bridge over that gap and
   the lower part of the header, so the pointer can travel from "Products" to any
   item (even diagonally, across the other links) without the menu closing. */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: min(1080px, calc(100vw - var(--chrome-gutter) * 2));
  padding: 10px;
  border: 1px solid rgba(10, 10, 11, 0.06);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(10, 10, 11, 0.18), 0 4px 14px rgba(10, 10, 11, 0.06);
  color: #45464d;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s var(--chrome-ease), transform 0.2s var(--chrome-ease), visibility 0s linear 0.2s;
}

.mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 32px;
}

.mega[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.mega__inner {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 2.2fr);
  gap: 10px;
}

.mega__intro {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(232, 87, 126, 0.12), transparent 60%),
    radial-gradient(120% 90% at 0% 0%, rgba(143, 92, 245, 0.14), transparent 60%),
    #f7f7fa;
}

.mega__heading {
  margin: 0 0 12px;
  color: var(--chrome-ink);
  font: 500 20px/1.3 var(--chrome-font);
  letter-spacing: -0.01em;
}

.mega__text {
  margin: 0 0 20px;
  font: 400 14px/1.6 var(--chrome-font);
  color: var(--chrome-muted);
}

.mega__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--chrome-blue);
  font: 500 14px/1.4 var(--chrome-font);
  text-decoration: none;
}

.mega__link svg {
  transition: transform 0.18s var(--chrome-ease);
}

.mega__link:hover svg {
  transform: translateX(3px);
}

.mega__products {
  padding: 16px 8px 8px;
}

.mega__group {
  margin: 0 0 8px 12px;
  color: var(--chrome-muted);
  font: 600 11px/1.4 var(--chrome-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega__grid li {
  margin: 0;
}

.mega__item {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.15s;
}

.mega__item:hover,
.mega__item:focus-visible,
.mega__item[aria-current="page"] {
  background: #f4f5f8;
}

.mega__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f0f2f7;
  transition: background-color 0.15s, transform 0.15s var(--chrome-ease);
}

.mega__item:hover .mega__icon {
  background: #fff;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(10, 10, 11, 0.08);
}

.mega__icon img {
  display: block;
  width: 22px;
  height: 22px;
}

.mega__item-name {
  display: block;
  color: var(--chrome-ink);
  font: 600 15px/1.35 var(--chrome-font);
}

.mega__item-text {
  display: block;
  margin-top: 2px;
  color: var(--chrome-muted);
  font: 400 13px/1.45 var(--chrome-font);
}

/* Mobile menu ------------------------------------------------------------------
   A light sheet that fills the screen under the header (the header turns light
   and borderless while it's open, so the two read as one surface). Products come first
   as rich rows, then the company pages and resources; Contact sales and Login stay
   pinned at the bottom. Opening fades the sheet in and cascades the items (each has
   --i, its position); closing is quicker. chrome.js toggles data-open and inert. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-top: var(--chrome-h);
  background: #fcfcfd;
  color: var(--chrome-ink);
  font-family: var(--chrome-font);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.mobile-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

.mobile-menu[hidden] {
  display: none;
}

/* A soft brand glow in the top corner, like the heroes */
.mobile-menu::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -140px;
  right: -160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5a142 0%, #e8577e 45%, #8f5cf5 100%);
  filter: blur(80px);
  opacity: 0.22;
  pointer-events: none;
}

.mobile-menu__scroll {
  --fade-top: 0px;
  --fade-bottom: 0px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Scroll hints: the list fades out at the bottom while there's more below it, and at
     the top once scrolled (chrome.js sets data-more-below / data-more-above). */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
  transition: --fade-top 0.3s ease, --fade-bottom 0.3s ease;
}

.mobile-menu__scroll[data-more-above] {
  --fade-top: 28px;
}

.mobile-menu__scroll[data-more-below] {
  --fade-bottom: 88px;
}

/* Registered so the fades animate rather than snap (ignored where unsupported) */
@property --fade-top {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --fade-bottom {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.mobile-menu__nav {
  max-width: 720px;
  margin-inline: auto;
  padding: 12px var(--chrome-gutter) 28px;
}

/* Entrance: each item rises into place a moment after the one before */
.mobile-menu [style*="--i"] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.mobile-menu[data-open="true"] [style*="--i"] {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.55s var(--chrome-ease);
  transition-delay: calc(var(--i) * 28ms + 60ms);
}

.mobile-menu__label {
  margin: 26px 0 8px;
  color: var(--chrome-muted);
  font: 600 12px/1.2 var(--chrome-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mobile-menu__label:first-child {
  margin-top: 8px;
}

.mobile-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu li {
  margin: 0;
}

/* Products: icon tile, name and a one-line description */
.mobile-menu .mobile-menu__products {
  display: grid;
  gap: 2px;
  margin-inline: -10px;
}

.mobile-menu__product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 10px;
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s;
}

.mobile-menu__product:hover,
.mobile-menu__product:active {
  background: rgba(10, 10, 11, 0.045);
}

.mobile-menu__product[aria-current="page"] {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.07), 0 6px 18px -8px rgba(10, 10, 11, 0.18);
}

.mobile-menu__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 11, 0.06), 0 1px 2px rgba(10, 10, 11, 0.05), 0 6px 14px -6px rgba(10, 10, 11, 0.16);
}

.mobile-menu__icon img {
  display: block;
  width: 22px;
  height: 22px;
}

.mobile-menu__product-body {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.mobile-menu__product-name {
  font: 500 16px/1.25 var(--chrome-font);
  letter-spacing: -0.01em;
}

.mobile-menu__product-text {
  overflow: hidden;
  color: var(--chrome-muted);
  font: 400 13.5px/1.3 var(--chrome-font);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobile-menu__chevron {
  flex: none;
  color: var(--chrome-muted);
  opacity: 0.45;
  transition: transform 0.25s var(--chrome-ease), opacity 0.25s;
}

.mobile-menu__product:hover .mobile-menu__chevron,
.mobile-menu__product[aria-current="page"] .mobile-menu__chevron {
  opacity: 0.9;
  transform: translateX(2px);
}

/* Company pages: two columns of large links */
.mobile-menu .mobile-menu__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  margin-inline: -10px;
}

.mobile-menu__links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 10px;
  border-radius: 12px;
  color: inherit;
  font: 500 17px/1.2 var(--chrome-font);
  letter-spacing: -0.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s;
}

.mobile-menu__links a:hover,
.mobile-menu__links a:active {
  background: rgba(10, 10, 11, 0.045);
}

.mobile-menu__links a[aria-current="page"]::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5a142, #e8577e 50%, #8f5cf5);
}

/* Resources: small pills */
.mobile-menu .mobile-menu__resources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--chrome-line);
}

.mobile-menu__resources a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(10, 10, 11, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: #3a3b41;
  font: 500 14px/1 var(--chrome-font);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.mobile-menu__resources a:hover {
  border-color: rgba(10, 10, 11, 0.25);
  color: var(--chrome-ink);
}

.mobile-menu__resources svg {
  opacity: 0.6;
}

/* The actions, pinned to the bottom (above the home indicator on iPhones) */
.mobile-menu__bar {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
  padding: 12px var(--chrome-gutter) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--chrome-line);
  background: rgba(255, 255, 255, 0.72);
  transform: translateY(100%);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

/* Lifted while the list continues underneath it */
.mobile-menu__scroll[data-more-below] + .mobile-menu__bar {
  box-shadow: 0 -12px 28px -18px rgba(10, 10, 11, 0.28);
}

.mobile-menu[data-open="true"] .mobile-menu__bar {
  transform: none;
  transition: transform 0.55s var(--chrome-ease) 0.12s, box-shadow 0.3s ease;
}

.mobile-menu__cta,
.mobile-menu__login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 52px;
  border-radius: 999px;
  font: 500 16px/1 var(--chrome-font);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s var(--chrome-ease), box-shadow 0.18s;
}

.mobile-menu__cta {
  background: var(--chrome-ink);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(10, 10, 11, 0.45);
}

.mobile-menu__cta:active,
.mobile-menu__login:active {
  transform: scale(0.98);
}

.mobile-menu__login {
  border: 1px solid rgba(10, 10, 11, 0.14);
  background: #fff;
  color: var(--chrome-ink);
}

.mobile-menu__login svg {
  opacity: 0.55;
}

/* While the menu is open the header joins the sheet: light, no border, no glass */
body.menu-open .site-header {
  border-bottom-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.menu-open .site-header__cta {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 600px) {
  .mobile-menu .mobile-menu__products {
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
  }

  .mobile-menu .mobile-menu__links {
    grid-template-columns: repeat(3, 1fr);
  }

  .mobile-menu__bar {
    grid-template-columns: 1fr 1fr;
    padding-inline: max(var(--chrome-gutter), calc((100% - 720px) / 2 + var(--chrome-gutter)));
  }
}

body.menu-open {
  overflow: hidden;
}

/* Header responsiveness */
@media (max-width: 1180px) {
  .site-nav__link {
    padding-inline: 10px;
    font-size: 14px;
  }
}

@media (max-width: 991px) {
  .site-nav,
  .site-header__login {
    display: none;
  }

  .site-header__actions,
  .site-nav ~ .site-header__actions {
    margin-left: auto;
  }

  .site-header__burger {
    display: inline-flex;
  }
}

@media (max-width: 479px) {
  .site-header__inner {
    gap: 8px;
  }

  .site-header__cta {
    display: none;
  }

  .site-header--minimal .site-header__cta {
    display: inline-flex;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
  }

  .site-header__logo {
    width: 128px;
    height: 32px;
  }
}

/* Footer ------------------------------------------------------------------------ */
.site-footer {
  position: relative;
  padding: clamp(56px, 7vw, 88px) 0 28px;
  background: var(--chrome-footer-bg);
  color: rgba(255, 255, 255, 0.62);
  font: 400 15px/1.5 var(--chrome-font);
}

/* Brand-gradient hairline across the top */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, #8f5cf5 30%, #e8577e 55%, #f5a142 75%, transparent 95%);
  opacity: 0.7;
}

.site-footer__inner {
  max-width: calc(var(--chrome-max) + var(--chrome-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--chrome-gutter);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px 64px;
}

.site-footer__logo {
  display: inline-block;
}

.site-footer__logo img {
  display: block;
  width: 148px;
  height: auto;
}

.site-footer__tagline {
  max-width: 300px;
  margin: 18px 0 24px;
  font-size: 14px;
  line-height: 1.6;
}

.site-footer__social {
  display: flex;
  gap: 10px;
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}

.site-footer__social a:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 40px clamp(40px, 6vw, 96px);
}

.site-footer__heading {
  margin: 0 0 18px;
  color: #fff;
  font: 600 14px/1.4 var(--chrome-font);
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li {
  margin: 0;
}

.site-footer__list li + li {
  margin-top: 11px;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer__list a:hover,
.site-footer__legal a:hover {
  color: #fff;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--chrome-line-dark);
  font-size: 13px;
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal li {
  margin: 0;
}

.site-footer--minimal {
  padding-top: 8px;
}

.site-footer--minimal .site-footer__bottom {
  margin-top: 0;
  border-top: 0;
}

@media (max-width: 900px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header *,
  .mega,
  .mobile-menu,
  .mobile-menu * {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .site-header,
  .mobile-menu {
    display: none !important;
  }
}

/* ==========================================================================
   The site chrome inside an MkDocs site (Material for MkDocs 8): the enfonica.com
   docs (/docs) and legal (/terms) sites. Appended to chrome.css by the chrome export.

   - The header and footer must look exactly as they do on enfonica.com, so the base
     styles they inherit there (www src/styles/10-base.css) are restated for them here,
     at element specificity: Material's own resets lose, the chrome's classes still win.
   - Material's header is replaced by .enf-top: the enfonica.com header, with the docs'
     own buttons in its slots (.enf-button: the navigation drawer and search), and
     Material's search beside it (.enf-search), opening as a panel over the page.
   - .enf-top--wide (extra: chrome_full_width) lets the header span the whole window.
   - Sidebars, anchors and the drawer are moved to sit below or above the header.
   ========================================================================== */

:root {
  --enf-top-h: var(--chrome-h);
}

/* What the chrome inherits on enfonica.com ------------------------------------- */
:where(.site-header, .mobile-menu, .site-footer) {
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: normal;
}

:where(.site-header, .mobile-menu, .site-footer) :is(img, svg) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.site-header, .mobile-menu, .site-footer) a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
  -webkit-tap-highlight-color: initial;
}

:where(.site-header, .mobile-menu, .site-footer) button {
  font: inherit;
  color: inherit;
}

:where(.site-header, .mobile-menu, .site-footer) p {
  margin: 0 0 1.1em;
}

:where(.site-header, .mobile-menu, .site-footer) ul {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
}

:where(.site-header, .mobile-menu, .site-footer) li + li {
  margin-top: 0.35em;
}

/* The header block ------------------------------------------------------------- */
html {
  scroll-padding-top: calc(var(--enf-top-h) + 16px);
}

.md-header.enf-top,
.md-header.enf-top.md-header--shadow {
  position: sticky;
  top: 0;
  z-index: 100;
  height: auto;
  background: none;
  box-shadow: none;
  color: var(--chrome-ink);
  transition: none;
}

/* On enfonica.com the header floats over the first section; here it takes its space. */
.enf-top .site-header {
  margin-bottom: 0;
}

/* Full width: logo at the far left, the actions at the far right */
.enf-top--wide .site-header__inner {
  max-width: none;
}

@media (min-width: 992px) {
  .enf-top--wide .site-header__inner {
    padding-inline: 24px;
  }
}

/* The docs' buttons in the header (drawer, search), styled like its burger */
.enf-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--ch-fg);
  font: 500 15px/1 var(--chrome-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s, opacity 0.2s;
}

.enf-button:hover {
  background: var(--ch-hover);
}

.enf-button--drawer {
  margin-left: -10px;
}

@media (min-width: 76.25em) {
  .enf-button--drawer {
    display: none;
  }
}

.enf-button__label,
.enf-button__key {
  display: none;
}

/* Wide enough: search becomes a labelled field-like button with its shortcut */
@media (min-width: 1280px) {
  .enf-button--search {
    justify-content: flex-start;
    width: 196px;
    height: 40px;
    margin-right: 6px;
    padding: 0 8px 0 14px;
    border: 1px solid var(--chrome-line);
    border-radius: 999px;
    background: rgba(10, 10, 11, 0.03);
    color: var(--chrome-muted);
  }

  .enf-button--search:hover {
    border-color: rgba(10, 10, 11, 0.16);
    background: rgba(10, 10, 11, 0.05);
    color: var(--chrome-ink);
  }

  .enf-button__label {
    display: inline;
    flex: 1;
  }

  .enf-button__key {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid var(--chrome-line);
    border-radius: 6px;
    background: #fff;
    color: var(--chrome-muted);
    font: 500 12px/1 var(--chrome-font);
  }
}

/* The open mobile menu locks scrolling. The website does it on <body>, but Material sets
   overflow on <html>, which turns <body> into its own scroller: the page would stay
   scrolled and the sticky header with it, out of sight. Lock <html> instead. */
body.menu-open {
  overflow: visible;
}

html:has(> body.menu-open) {
  overflow: hidden;
}

/* While the mobile menu is open the header joins it: the docs' buttons step aside */
body.menu-open .enf-button {
  opacity: 0;
  pointer-events: none;
}

.site-header :focus-visible.enf-button,
.enf-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Search -------------------------------------------------------------------------
   Material's search, beside the header (not in it: the header's glass would trap the
   full-screen search on phones). Phones keep Material's full-screen search; wider screens
   get a panel in the middle of the page. */
.enf-search .md-search {
  position: absolute;
  top: 50%;
  right: var(--chrome-gutter);
  z-index: 200;
  width: 0;
  height: 0;
  padding: 0;
  font-family: var(--chrome-font);
}

@media (min-width: 60em) {
  .enf-search .md-search__overlay {
    background: rgba(10, 10, 11, 0.32);
  }

  .enf-search .md-search__inner {
    position: fixed;
    z-index: 2;
    top: max(10vh, 96px);
    left: 50%;
    float: none;
    width: min(640px, calc(100vw - 48px));
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.06), 0 28px 70px rgba(10, 10, 11, 0.22), 0 4px 14px rgba(10, 10, 11, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity 0.18s ease, transform 0.22s var(--chrome-ease), visibility 0s linear 0.22s;
  }

  [data-md-toggle="search"]:checked ~ .enf-top .md-search__inner {
    width: min(640px, calc(100vw - 48px));
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.18s ease, transform 0.22s var(--chrome-ease), visibility 0s;
  }

  .enf-search .md-search__form,
  .enf-search .md-search__form:hover,
  [data-md-toggle="search"]:checked ~ .enf-top .md-search__form {
    height: 56px;
    border-radius: 0;
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--chrome-line);
  }

  .enf-search .md-search__input {
    padding-left: 52px;
    color: var(--chrome-ink);
    font: 400 17px/1 var(--chrome-font);
  }

  .enf-search .md-search__input::placeholder,
  [data-md-toggle="search"]:checked ~ .enf-top .md-search__input::placeholder,
  .enf-search .md-search__input + .md-search__icon,
  [data-md-toggle="search"]:checked ~ .enf-top .md-search__input + .md-search__icon {
    color: var(--chrome-muted);
  }

  .enf-search .md-search__icon[for="__search"] {
    top: 16px;
    left: 18px;
  }

  .enf-search .md-search__options {
    top: 16px;
    right: 16px;
  }

  .enf-search .md-search__output,
  [data-md-toggle="search"]:checked ~ .enf-top .md-search__output {
    position: relative;
    top: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
  }

  .enf-search .md-search__scrollwrap,
  [data-md-toggle="search"]:checked ~ .enf-top .md-search__scrollwrap {
    width: auto;
    max-height: min(60vh, 560px);
  }
}

/* The drawer (below 1220px) and its dimmed overlay open over the header */
@media (max-width: 76.1875em) {
  .md-overlay {
    z-index: 110;
  }

  .md-sidebar--primary {
    z-index: 120;
  }
}

/* Sidebars stick below the header (on phones and tablets the navigation is a drawer that
   opens over everything, so it keeps Material's top: 0) */
@media (min-width: 60em) {
  .md-sidebar--secondary {
    top: var(--enf-top-h);
  }
}

@media (min-width: 76.25em) {
  .md-sidebar {
    top: var(--enf-top-h);
  }
}

/* Linked headings land below the header: html's scroll-padding-top (above) does it, so
   Material's own scroll margin would only add to it. */
.md-typeset :target {
  scroll-margin-top: 0;
}

@media print {
  .site-footer {
    display: none !important;
  }
}