/* Shared type scale: phone through 767px, fluid tablet, desktop from 1024px. */
:root {
  --font-family: Arial, Helvetica, sans-serif;
  --type-brand: 20px;
  --line-brand: 26px;
  --type-h1: 36px;
  --line-h1: 40px;
  --type-h2: 28px;
  --line-h2: 36px;
  --type-h3: 20px;
  --line-h3: 28px;
  --type-hero-body: 16px;
  --line-hero-body: 26px;
}

@media (min-width: 768px) {
  :root {
    --type-brand: clamp(20px, calc(1.5625vw + 8px), 24px);
    --line-brand: clamp(26px, calc(1.5625vw + 14px), 30px);
    --type-h1: clamp(36px, calc(7.8125vw - 24px), 56px);
    --line-h1: clamp(40px, calc(7.8125vw - 20px), 60px);
    --type-h2: clamp(28px, calc(3.125vw + 4px), 36px);
    --line-h2: clamp(36px, calc(3.125vw + 12px), 44px);
    --type-h3: clamp(20px, calc(1.5625vw + 8px), 24px);
    --line-h3: clamp(28px, calc(1.5625vw + 16px), 32px);
    --type-hero-body: clamp(16px, calc(.78125vw + 10px), 18px);
    --line-hero-body: clamp(26px, calc(.78125vw + 20px), 28px);
  }
}

body {
  font-family: var(--font-family);
  font-weight: 400;
  letter-spacing: normal;
}

button, input, textarea, select,
.contact-field input, .contact-field textarea {
  font-family: var(--font-family);
}

.brand {
  font-size: var(--type-brand);
  line-height: var(--line-brand);
  font-weight: 600;
  min-height: var(--line-brand);
}

/* The wordmark remains vector outlines; its box follows the text scale. */
.brand .brand-logo {
  width: auto;
  height: var(--type-brand);
}

.desktop-nav,
.mobile-nav a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: normal;
}

.eyebrow {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  margin: 0 0 24px;
}

.eyebrow, .section-label, .platform-tag, .footer-signature {
  letter-spacing: .12em;
}

h1, .hero h1 {
  font-size: var(--type-h1);
  line-height: var(--line-h1);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 24px;
}

.hero-lead, .hero-description {
  width: 100%;
  max-width: 540px;
  font-size: var(--type-hero-body);
  line-height: var(--line-hero-body);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--ink);
  margin: 0;
}

.hero-lead { margin-bottom: 16px; }

h2, .section h2, .contact-dialog h2, .privacy-heading h2 {
  font-size: var(--type-h2);
  line-height: var(--line-h2);
  font-weight: 600;
  letter-spacing: -.02em;
}

h3, .tech-item h3, .principle h3, .platforms-grid h3 {
  font-size: var(--type-h3);
  line-height: var(--line-h3);
  font-weight: 600;
  letter-spacing: normal;
}

.section-intro, .tech-item p, .principle p, .platforms-grid p,
.contact-content > p, .privacy-body p {
  font-weight: 400;
  letter-spacing: normal;
}

.button { font-weight: 600; }