/* Easy Button landing page, version 8: wordmark, font and palette. */
@font-face {
  font-family: Inter;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --eb-font: Inter, Arial, sans-serif;
  --eb-ink: #24244b;
  --eb-muted: #626477;
  --eb-indigo: #5148e8;
  --eb-indigo-hover: #4036cc;
  --eb-lime: #dcf49b;
  --eb-cream: #fbfaf7;
  --eb-line: #e5e3ec;
  --eb-lavender: #f0edff;
  --eb-focus: #8077ff;
  --eb-radius: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: fit-content;
  color: var(--eb-ink);
  font: 780 25px/1.2 var(--eb-font);
  letter-spacing: -1.2px;
  text-decoration: none;
  white-space: nowrap;
}
.brand-light { font-weight: 450; }
.brand-dot { color: var(--eb-indigo); font-weight: 800; }
.brand-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: 9px;
  border-radius: 9px;
  background: var(--eb-indigo);
  transform: rotate(-6deg);
}
.brand-icon i {
  display: block;
  box-sizing: border-box;
  width: 17px;
  height: 17px;
  border: 2px solid #fff;
  border-radius: 50%;
}
.brand:focus-visible { outline: 3px solid var(--eb-focus); outline-offset: 5px; }

@media (max-width: 760px) {
  .brand { font-size: 23px; }
  .brand-icon { width: 29px; height: 29px; }
}
@media (max-width: 360px) {
  .brand { font-size: 21px; }
}