/* Foundation role ownership. Layout, component states and specimen proportions
   remain in general.css until their migration stages. Loaded after general.css. */
body {
  font: var(--marketing-body);
  letter-spacing: normal;
}
h1, h2, h3, h4 {font-family:var(--font-family-website);letter-spacing:normal}
.brand-word {font-family:var(--font-family-brand);letter-spacing:normal}
/* Audiowide has a single regular weight; browsers synthesise bold, so request the real face. */
.brand-word {font-weight:var(--font-weight-regular)}
h1.hero-h {font:var(--marketing-heading-3);letter-spacing:normal}
.head :is(h1,h2), .products-head h2, .person h2, .k-grid h2, .process-static>h2,
.legal-content h1, .missing h1 {font:var(--marketing-heading-3);letter-spacing:normal}
.stage-copy h2 {font:var(--type-heading-3);letter-spacing:normal}
.card :is(h2,h3), .process-phases h3 {font:var(--type-heading-3);letter-spacing:normal}
.portrait strong {font:var(--type-title);letter-spacing:normal}
/* Eigene Produkte: product names in the display family (34px live on wide layouts, 28px otherwise). */
.product :is(h3,h4) {font:var(--marketing-heading-3-weight) var(--type-heading-2-size)/1.2 var(--font-family-display);letter-spacing:normal}
.products-progress>h3, .career-intro h3 {font:var(--type-heading-3);letter-spacing:normal}
.career-intro p {font:var(--marketing-body)}
.cert-link {font:var(--font-weight-medium) var(--type-body-size)/var(--type-body-line-height) var(--font-family-website)}
.career-time, .career-employer {font:var(--type-body-small)}
.career-axis {font:var(--type-caption)}
.career-line strong {font:var(--font-weight-semibold) var(--type-body-size)/var(--type-body-line-height) var(--font-family-website)}
.product p {font:var(--marketing-body)}
.product .product-platform, .product .product-address {font:var(--font-weight-medium) var(--type-body-size)/var(--type-body-line-height) var(--font-family-website)}
/* On 1x screens Chrome snaps each glyph to a whole pixel, so the space-free address
   gets uneven gaps ("ke" touching, "al" wide). Fractional glyph positions keep its rhythm even. */
.product .product-address {text-rendering:geometricPrecision}
/* Scrum Poker's BetaFlag type, carried over from the app with its product family. */
.beta-flag {font:var(--font-weight-semibold) 11px/14px var(--font-family-product);letter-spacing:1.32px}
.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, .products-head p, .person .p-lead, .k-lead, .missing p {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-website)}
.pill, .theme-option, .theme-menu, .nav-menu-toggle, .development-steps button {font-family:var(--font-family-website);font-weight:var(--font-weight-label)}
.mailto {font-family:var(--font-family-website);letter-spacing:normal}
/* In-app units (App-Mockups) carry the appInterface role (Hubot Sans), never the website or display family. */
.story-board, .app-scene, .app-artboard, .screen {font-family:var(--font-family-product);letter-spacing:normal}
.story-board h3, .app-heading h3, .app-artboard h4 {font-family:var(--font-family-product);font-weight:var(--font-weight-strong);letter-spacing:normal}
.app-scene h4, .plan-simple-row h4 {font-family:var(--font-family-product);font-weight:var(--font-weight-semibold);letter-spacing:normal}
.usage-kpis b {font-family:var(--font-family-product);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 :is(h1,h2), .products-head h2, .person h2, .k-grid h2, .process-static>h2,
  .legal-content h1, .missing h1 {font:var(--marketing-heading-2)}
  .hero-sub, .head p, .products-head p, .person .p-lead, .k-lead {font:var(--marketing-body-large)}
  .stage-copy p {font:var(--type-body)}
  .product-live h3 {font:var(--marketing-heading-3)}
  .career-intro h3 {font:var(--marketing-heading-3)}
}
@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 :is(h1,h2), .products-head 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)}
}