@font-face {
  font-family: 'ChargeGo Brand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat-medium.ttf') format('truetype');
}
@font-face {
  font-family: 'ChargeGo Brand';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/montserrat-black.ttf') format('truetype');
}

/* One lockup for public pages, admin and the archived static pages. */
:root { --brand-go-start: #23edaa; --brand-go-mid: #00dcb3; --brand-go-end: #009c9e; }
:root[data-theme="light"] { --brand-go-start: #0575c5; --brand-go-mid: #009fbe; --brand-go-end: #00b9ba; }
html body :is(.brand, .cg-redesign .header-inner .brand, .cg-redesign .footer-main .brand) {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .08em;
  width: max-content;
  max-width: 100%;
  font-family: 'ChargeGo Brand', sans-serif;
  font-size: var(--brand-size, 34px);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
html body :is(.brand, .cg-redesign .header-inner .brand, .cg-redesign .footer-main .brand) .brand-mark {
  display: block;
  position: relative;
  flex: 0 0 1.4em;
  width: 1.4em;
  height: 1.57em;
  overflow: hidden;
}
html body :is(.brand, .cg-redesign .header-inner .brand, .cg-redesign .footer-main .brand) .brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  clip-path: inset(0 0 1px 0);
}
html body :is(.brand, .cg-redesign .header-inner .brand, .cg-redesign .footer-main .brand) .brand-mark .brand-logo-dark { display: none; }
html[data-theme="light"] body :is(.brand, .cg-redesign .header-inner .brand, .cg-redesign .footer-main .brand) .brand-mark .brand-logo-light { display: none; }
html[data-theme="light"] body :is(.brand, .cg-redesign .header-inner .brand, .cg-redesign .footer-main .brand) .brand-mark .brand-logo-dark { display: block; }
html body :is(.brand, .cg-redesign .header-inner .brand, .cg-redesign .footer-main .brand) .brand-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .17em;
  padding-top: .09em;
}
html body :is(.brand, .cg-redesign .header-inner .brand, .cg-redesign .footer-main .brand) .brand-name {
  display: block;
  color: #f6faff;
  font-family: inherit;
  font-size: 1em;
  font-weight: 900;
  letter-spacing: .048em;
  line-height: 1;
}
html body :is(.brand, .cg-redesign .header-inner .brand, .cg-redesign .footer-main .brand) .brand-name .green {
  background: linear-gradient(110deg, var(--brand-go-start) 5%, var(--brand-go-mid) 48%, var(--brand-go-end) 95%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
html body :is(.brand, .cg-redesign .header-inner .brand, .cg-redesign .footer-main .brand) .brand-tagline {
  display: block;
  padding-left: .2em;
  color: #f6faff;
  font-family: inherit;
  font-size: .345em;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.2;
  text-transform: uppercase;
}
html[data-theme="light"] body :is(.brand, .cg-redesign .header-inner .brand, .cg-redesign .footer-main .brand) .brand-name,
html[data-theme="light"] body :is(.brand, .cg-redesign .header-inner .brand, .cg-redesign .footer-main .brand) .brand-tagline { color: #082c60; }
html body .side .brand { --brand-size: 29px; }
@media (max-width: 800px) {
  html body .header-inner .brand { --brand-size: 32px; }
}
@media (max-width: 400px) {
  html body .header-inner .brand,
  html body .login-brand .brand { --brand-size: 28px; }
}
@media (max-width: 360px) {
  html body .header-inner .brand { --brand-size: 24px; }
}