@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-grotesk-400.ttf') format('truetype')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/space-grotesk-500.ttf') format('truetype')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/space-grotesk-600.ttf') format('truetype')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/space-grotesk-700.ttf') format('truetype')}


/* One hierarchy for both pages. Section styles own layout, not heading type. */
:root {
  --font-sans: 'Space Grotesk', Arial, sans-serif;
  --font-editorial: Georgia, serif;
  --type-hero: clamp(2.75rem, 8.2vw, 7rem);
  --type-section: clamp(2rem, 4.4vw, 4rem);
  --type-card: 1.5rem;
  --type-body: 1.125rem;
  --type-action: 1rem;
  --type-note: .875rem;
  --type-label: .75rem;
  --type-quote: clamp(1.5rem, 2vw, 1.75rem);
  --leading-copy: 1.65;
  --leading-card: 1.3;
  --leading-quote: 1.5;
  --tracking-card: -.025em;
}

h1, h2, h3 {
  font-family: var(--font-sans);
  font-style: normal;
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 {
  font-size: var(--type-hero);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.05em;
}
h2 {
  font-size: var(--type-section);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.04em;
}
h3 {
  font-size: var(--type-card);
  font-weight: 500;
  line-height: var(--leading-card);
  letter-spacing: var(--tracking-card);
}
h1 em, h2 em, h3 em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.principles article > span,
.capabilities article > span,
.product-workflow li > span {
  font-size: var(--type-label);
  line-height: 1.5;
  letter-spacing: .1em;
}