@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Geist+Mono:wght@400;500;600&family=Geist:wght@400;500;600;700&family=Inter:opsz,wght@14..32,400..800&family=Manrope:wght@400;500;600;700;800&family=PT+Sans:wght@400;700&display=swap");

:root {
  --font-interface: "Inter", Arial, sans-serif;
  --font-display: "Manrope", Arial, sans-serif;
  --font-editorial: "PT Sans", Arial, sans-serif;
  --font-action: "Geist", Arial, sans-serif;
  --font-mono: "Geist Mono", monospace;
  --font-numeric: "Fira Sans", Arial, sans-serif;
}

body { font-family: var(--font-interface) !important; }

body :is(h1, h2, h3, h4, h5, h6, .font-display, .font-h1, .font-h2, .font-h3) {
  font-family: var(--font-display) !important;
}

body :is(p, li, dd, td, th, blockquote, figcaption) {
  font-family: var(--font-editorial) !important;
}

body :is(button, input, textarea, select, .nav-cta, .apps-button, .apps-text-link, .seo-menu-button, .font-body-lg, .font-body-md) {
  font-family: var(--font-action) !important;
}

body :is(.apps-kicker, .apps-price, .apps-hero__device figcaption, .site-footer, .font-label-caps, [class*="kicker"], [class*="meta"], [class*="label"], [class*="tag"], [class*="eyebrow"], [class*="number"]) {
  font-family: var(--font-mono) !important;
}

body :is(.apps-price-block h2, .pricing-amount, .price-amount, [data-price]) {
  font-family: var(--font-numeric) !important;
  font-variant-numeric: tabular-nums;
}
