body {
  font: var(--marketing-body);
  letter-spacing: normal;
}
h1, h2, h3, h4 {font-family:var(--font-family-product);letter-spacing:normal}
.logo, .brand-word {font-family:var(--font-family-brand);letter-spacing:normal}
.logo {font:var(--font-weight-regular) var(--type-title-size)/var(--type-title-line-height) var(--font-family-brand)}

.brand-word {font-weight:var(--font-weight-regular)}
h1.hero-h {font:var(--marketing-heading-3);letter-spacing:normal}
.head h2, .feature-panel h2, .person h2, .k-grid h2, .process-static>h2,
.legal-content h1 {font:var(--marketing-heading-3);letter-spacing:normal}
.stage-copy h2 {font:var(--type-heading-3);letter-spacing:normal}
.card h3, .process-phases h3 {font:var(--type-heading-3);letter-spacing:normal}
.fact h3, .portrait strong {font:var(--type-title);letter-spacing:normal}
.card .tag {font:var(--type-label);letter-spacing:normal}
.portrait figcaption span {font:var(--type-body-small)}
.legal-content h2 {font:var(--type-heading-2);letter-spacing:normal}
.hero-sub, .head p, .feature-panel .lead, .person .p-lead, .k-lead {font:var(--marketing-body)}
.stage-copy p {font:var(--type-body-small)}
.label, .settings-label, .feld label,
.process-phases .stage-num, .stage-copy .stage-num {font:var(--type-label);letter-spacing:normal;text-transform:none}
.nav-links a {font:var(--font-weight-medium) var(--type-body-size)/var(--type-body-line-height) var(--font-family-product)}
.pill, .theme-option, .theme-menu, .nav-menu-toggle, .development-steps button {font-family:var(--font-family-product);font-weight:var(--font-weight-label)}
.mailto {font-family:var(--font-family-product);letter-spacing:normal}

.story-board, .app-scene, .app-artboard, .screen {font-family:var(--font-family-inapp);letter-spacing:normal}
.story-board h3, .app-heading h3, .app-artboard h4 {font-family:var(--font-family-inapp);font-weight:var(--font-weight-strong);letter-spacing:normal}
.app-scene h4, .plan-simple-row h4 {font-family:var(--font-family-inapp);font-weight:var(--font-weight-semibold);letter-spacing:normal}
.usage-kpis b {font-family:var(--font-family-inapp);letter-spacing:normal}
@media (min-width:390px) {
  h1.hero-h {font:var(--marketing-heading-2)}
  .stage-copy h2 {font:var(--type-heading-2)}
}
@media (min-width:768px) {
  h1.hero-h {font:var(--marketing-heading-1)}
  .head h2, .feature-panel h2, .person h2, .k-grid h2, .process-static>h2,
  .legal-content h1 {font:var(--marketing-heading-2)}
  .hero-sub, .head p, .feature-panel .lead, .person .p-lead, .k-lead {font:var(--marketing-body-large)}
  .stage-copy p {font:var(--type-body)}
}
@media (min-width:1024px) {
  h1.hero-h {font:var(--marketing-display)}
  .stage-copy h2 {font:var(--marketing-heading-3)}
  .stage-copy p {font:var(--marketing-body)}
}
@media (min-width:1280px) {
  h1.hero-h {font:var(--marketing-hero)}
  .head h2, .feature-panel h2, .person h2, .k-grid h2, .process-static>h2,
  .legal-content h1 {font:var(--marketing-heading-1)}
  .stage-copy h2 {font:var(--marketing-heading-2)}
}