/* The landing-page wordmark is the shared identity on every product surface. */
.keylective-brand.keylective-brand.keylective-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .5em;
  color: inherit;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 680;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
/* The Circle Line Key sits to the right of the name. It takes the text color, and the
   top-left piece of its ring is gold: whoever holds the client's key right now. */
.keylective-brand.keylective-brand::after {
  content: "";
  display: block;
  position: static;
  flex: 0 0 1.36em;
  width: 1.36em;
  height: 1.36em;
  margin: 0;
  border: 0;
  background: currentColor;
  -webkit-mask: url('/keylective-key.svg') center / contain no-repeat;
  mask: url('/keylective-key.svg') center / contain no-repeat;
}
/* The ring is centered 21 of 64 units in and breaks at nine and twelve o'clock, so a
   quarter turn of gold paints only the gold piece. */
@supports (background: conic-gradient(from 0deg, red 0 1deg, blue 0)) {
  .keylective-brand.keylective-brand::after {
    background: conic-gradient(from 270deg at 32.8125% 32.8125%, var(--keylective-key-gold, var(--pi-key, #a77a29)) 0 90deg, currentColor 0);
  }
}
@media (max-width: 760px) {
  .keylective-brand.keylective-brand.keylective-brand { font-size: 15px; }
}
@media (forced-colors: active) {
  .keylective-brand.keylective-brand::after { forced-color-adjust: none; background: currentColor; }
}
@media print {
  .keylective-brand::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}