@font-face {
  font-family: "Tope Familjen";
  src: url("/static/accounts/FamiljenGrotesk-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.logo-tope {
  display: inline-flex;
  align-items: center;
  gap: .055em;
  width: fit-content;
  color: #101210;
  font-family: "Tope Familjen", "Familjen Grotesk", sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.055em;
  text-decoration: none;
  white-space: nowrap;
}

.logo-tope .logo-points {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: .105em;
  margin-bottom: .17em;
  letter-spacing: 0;
}

.logo-tope .logo-points span {
  display: block;
  flex: none;
  aspect-ratio: 1;
  border-radius: 50%;
}

.logo-tope .logo-points span:nth-child(1) { width: .19em; background: #5E7C43; }
.logo-tope .logo-points span:nth-child(2) { width: .15em; background: #8FB36A; }
.logo-tope .logo-points span:nth-child(3) { width: .105em; background: #C6DCA6; }

.logo-tope.logo-inverse { color: #FAF7F0; }
.logo-tope.logo-inverse .logo-points span:nth-child(1) { background: #FAF7F0; }
.logo-tope.logo-inverse .logo-points span:nth-child(2) { background: #8FB36A; }
.logo-tope.logo-inverse .logo-points span:nth-child(3) { background: #5E7C43; }

.marque.logo-tope { color: var(--texte, #101210); }
.marque.logo-tope .logo-points span:nth-child(1) { background: var(--texte, #5E7C43); }