:root {
  --brand-ink: #302d41;
  --brand-paper: #fcfbf8;
  --brand-mark-width: 18px;
  --brand-mark-height: 20px;
}

.brand-mark {
  display: inline-block;
  width: var(--brand-mark-width);
  height: var(--brand-mark-height);
  flex: 0 0 var(--brand-mark-width);
  background-color: currentColor;
  -webkit-mask: url("assets/issuegate-symbol.png") center / contain no-repeat;
  mask: url("assets/issuegate-symbol.png") center / contain no-repeat;
  vertical-align: middle;
}

.brand-logo-image {
  display: block;
  width: 132px;
  height: auto;
  max-width: 100%;
}

.nav .logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--brand-ink);
}

.nav .logo .brand-logo-image {
  width: 146px;
}

.brand-lockup,
.footer-brand,
#about .about-footer-brand,
#about .workbench-brand,
.pricing-sidebar-brand {
  display: inline-flex;
  align-items: center;
  color: var(--brand-ink);
}

.brand-lockup .brand-logo-image,
.footer-brand .brand-logo-image,
#about .about-footer-brand .brand-logo-image {
  width: 132px;
}

#about .workbench-brand .brand-logo-image {
  width: 124px;
}

.home-preflight-card .gate-mark {
  --brand-mark-width: 18px;
  --brand-mark-height: 20px;
}

.process-gate-icon .brand-mark {
  --brand-mark-width: 17px;
  --brand-mark-height: 19px;
}

.footer-brand {
  gap: 7px;
  color: var(--brand-ink);
}

.footer-brand i {
  width: 3px;
  height: 3px;
  flex: 0 0 3px;
  border-radius: 50%;
  background: #aeb5c1;
}

.footer-brand > span:last-child,
#about .about-footer-brand > span:last-child {
  margin-left: 6px;
  color: #7b8495;
  font-size: 12px;
}

#about .about-footer-brand {
  gap: 7px;
}

.pricing-sidebar-brand {
  gap: 5px;
  color: var(--brand-paper);
}

.pricing-sidebar-brand .brand-logo-image {
  width: 84px;
  filter: brightness(0) invert(1);
}

@media (max-width: 620px) {
  .nav .logo .brand-logo-image {
    width: 130px;
  }

  .brand-lockup .brand-logo-image,
  .footer-brand .brand-logo-image,
  #about .about-footer-brand .brand-logo-image {
    width: 118px;
  }

  #about .workbench-brand .brand-logo-image {
    width: 112px;
  }

  .footer-brand > span:last-child,
  #about .about-footer-brand > span:last-child {
    font-size: 11px;
  }
}