:root {
  --font-inter: "Source Sans 3", "Noto Sans", Inter, "Helvetica Neue", Arial, sans-serif;
  --f-sans: "Source Sans 3", "Noto Sans", Inter, "Helvetica Neue", Arial, sans-serif;
  --blue-50: #e7f6ee;
  --blue-100: #c6ebd6;
  --blue-300: #3dbe78;
  --blue-400: #2aaa62;
  --blue-500: #1f9d55;
  --blue-600: #178447;
  --blue-900: #0d4f2b;
  --accent: #1f9d55;
  --accent-hover: #178447;
  --accent-soft: #e7f6ee;
}

h1,
h2,
h3 {
  font-family: "Outfit", "Source Sans 3", Inter, sans-serif;
  font-optical-sizing: auto;
}

[data-site-nav] a[aria-label="OnBusiness home"] {
  padding: 4px 10px 4px 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper, #fffefa) 92%, transparent);
  box-shadow: 0 0 0 1px rgba(11, 15, 28, 0.06);
}

[data-site-nav][data-theme="dark"] a[aria-label="OnBusiness home"] {
  background: transparent;
  box-shadow: none;
}

[data-site-nav] .ob-light,
[data-site-nav] .ob-dark {
  display: block;
}

[data-site-nav][data-theme="dark"] .ob-light,
[data-site-nav]:not([data-theme="dark"]) .ob-dark {
  display: none !important;
}

[aria-label="Integrations"] {
  height: auto !important;
}

[aria-label="Integrations"] > [role="tab"] {
  min-height: 220px;
}

.gem-card {
  background: #fffefa;
}

.gem-frame {
  margin: 16px;
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(31, 157, 85, 0.1), transparent 32%),
    #f7f6f2;
  border: 1px solid rgba(11, 15, 28, 0.08);
}

.gem-frame img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateZ(0);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gem-card:hover .gem-frame img {
  transform: translateY(-6px) scale(1.012);
}

@media (prefers-reduced-motion: reduce) {
  .gem-frame img,
  .gem-card:hover .gem-frame img {
    transform: none;
    transition: none;
  }
}

@media (max-width: 480px) {
  [data-site-nav] > div > .flex {
    gap: 8px;
  }

  [data-site-nav] a[aria-label="OnBusiness home"] {
    padding: 2px 6px 2px 2px;
  }

  [data-site-nav] a[data-variant="primary"] {
    padding-left: 12px;
    padding-right: 12px;
  }
}