:root {
  --haron-font-ui: "Manrope", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --haron-font-display: "Manrope", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --haron-title-glow: none;
  --haron-button-glow: 0 0 14px rgba(91, 140, 255, .10);
}

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

h1,
h2,
h3,
.hero-title,
.section-title,
.big-title,
.brand-title b,
.brand-title,
.label,
.panel-title,
.plan-title,
.profile-title,
.profile-panel-title,
.config-toolbar .label,
.summary-value,
.meta-value,
.value {
  font-family: var(--haron-font-display) !important;
  font-weight: 780 !important;
  letter-spacing: -.025em;
  text-rendering: optimizeLegibility;
}

h1,
.hero-title,
.big-title,
.profile-title,
.config-toolbar .label {
  text-shadow: var(--haron-title-glow);
}

h2,
h3,
.section-title,
.panel-title,
.plan-title,
.label {
  letter-spacing: -.02em;
}

button,
.btn,
.button,
.cta,
.nav-link,
.link-btn,
.download-link,
.menu-link,
.pay-method,
.payment-method,
.profile-actions a,
.profile-actions button,
.switch a,
.tab-btn {
  font-family: var(--haron-font-display) !important;
  font-weight: 780 !important;
  letter-spacing: -.01em;
  text-rendering: optimizeLegibility;
}

.btn.primary,
button.primary,
.cta.primary,
.pay-method.primary,
.payment-method.primary,
.switch a.active {
  text-shadow: none;
  box-shadow: var(--haron-button-glow), inset 0 0 0 1px rgba(255, 255, 255, .06);
}

input,
select,
textarea {
  font-weight: 560;
  letter-spacing: 0;
}

small,
.muted,
.panel-muted,
.plan-sub,
.brand-title small {
  font-family: var(--haron-font-ui) !important;
  letter-spacing: 0;
}

#profilePanelTitle {
  font-family: var(--haron-font-ui) !important;
  font-weight: 650 !important;
  letter-spacing: -.035em;
  text-shadow: none !important;
}