:root {
  --hmip-brand-ink: #1a1714;
  --hmip-brand-paper: #f6f2ec;
  --hmip-brand-ink-bg: #14110e;
  --hmip-brand-paper-soft: #ece5d7;
  --hmip-brand-violet: #8b6dff;
  --hmip-brand-violet-deep: #5d3fe0;
  --hmip-brand-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hmip-brand-serif: "Instrument Serif", Georgia, serif;
  --hmip-nav-wordmark-size: 23px;
  --hmip-nav-wordmark-size-mobile: 20px;
  --hmip-nav-wordmark-size-compact: 17px;
}

.brand-mark,
.nav-logo {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: linear-gradient(160deg, var(--hmip-brand-violet) 0%, var(--hmip-brand-violet-deep) 100%) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  box-shadow:
    0 8px 18px -10px rgba(124, 92, 255, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  overflow: hidden !important;
  font-size: 0 !important;
}

.brand-mark-svg,
.nav-logo .brand-mark-svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.brand-mark-svg .hmip-h {
  fill: currentColor;
}

.brand-mark-svg .hmip-dot {
  fill: rgba(255, 255, 255, 0.7);
}

.brand-words .b1,
.wordmark {
  font-family: var(--hmip-brand-sans) !important;
  font-size: var(--hmip-nav-wordmark-size) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: lowercase !important;
  color: var(--ink, var(--text, #eceef2)) !important;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
}

footer.hmip-foot .tagline {
  margin: 16px 0 0 !important;
  max-width: 32ch !important;
  color: var(--ink-3, #6f6991) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

@media (max-width: 760px) {
  .wordmark {
    font-size: var(--hmip-nav-wordmark-size-mobile) !important;
  }
}

@media (max-width: 480px) {
  .wordmark {
    font-size: var(--hmip-nav-wordmark-size-compact) !important;
  }
}

.brand-help {
  font-family: var(--hmip-brand-sans) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: inherit !important;
  letter-spacing: 0 !important;
  margin-right: 0.18em;
}

.brand-dot {
  color: var(--hmip-brand-violet) !important;
  margin-left: 0.02em;
}

.brand-words .b2 {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace) !important;
}