:root {
  --font-ui: 'Manrope', 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Manrope', 'Segoe UI', sans-serif;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
body *,
button,
input,
select,
textarea {
  font-family: var(--font-ui) !important;
}

body {
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.012em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand,
.brand-mark,
.login-brand,
.login-card-mark {
  font-family: var(--font-display) !important;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.brand {
  font-weight: 700;
  letter-spacing: -.04em;
}

.brand small,
.login-brand small,
.eyebrow,
.nav-label,
.metrics p,
.login-badge {
  font-family: var(--font-ui) !important;
  font-weight: 700;
  letter-spacing: .12em;
}

.page-heading h1,
.simple-page h1 {
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -.045em;
}

.modal h2,
.login-card h1,
.automation-heading h2 {
  letter-spacing: -.04em;
}

.login-card-head {
  display: block;
  margin: 0 0 2px;
}

.login-card h1 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(29px, 3vw, 34px);
  line-height: 1.08;
  white-space: nowrap;
}

.login-card > p:not(.login-security) {
  max-width: 32ch;
  margin-top: -2px;
  line-height: 1.55;
}

.metrics h2,
.revenue-panel h2,
.clock-card strong,
time,
.price,
.week-day-header b {
  font-family: var(--font-display) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

button,
.add-button,
.outline,
.nav-link,
.text-button,
.event-actions button,
.client-edit-button {
  font-weight: 650;
  letter-spacing: -.01em;
}

input,
select,
textarea {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.subheading,
.panel-title span,
.appointment span,
.weekly-event span,
.client-name small {
  line-height: 1.55;
}

@media (max-width: 520px) {
  .page-heading h1,
  .simple-page h1 {
    font-size: 28px;
  }

  .modal h2,
  .login-card h1 {
    font-size: 27px;
  }
}