/* Canonical typography for public pages. Checkout login opts out via body class. */
body:not(.typography-exempt) main:not(.home-test) h1 {
  font-family: var(--font-ma-clayton);
  font-size: var(--type-display-xl);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--color-gray-100);
}

body:not(.typography-exempt) main.home-test h1 {
  font-family: var(--font-ma-clayton);
  font-size: var(--type-display-lg);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
}

body:not(.typography-exempt) main h2 {
  font-family: var(--font-manrope);
  font-size: var(--type-heading-sm);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
}

body:not(.typography-exempt) main h3,
body:not(.typography-exempt) main .subhead {
  font-family: var(--font-manrope);
  font-size: var(--type-subhead);
  font-weight: 600;
  line-height: 1.4;
}

/* Blog cards use a compact title below the image, not the page H2 scale. */
body:not(.typography-exempt) main .blog-list-card h2 {
  margin-top: 20px;
  font-family: var(--font-manrope);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

body:not(.typography-exempt) main p,
body:not(.typography-exempt) main li,
body:not(.typography-exempt) main dd {
  font-family: var(--font-manrope);
  font-size: max(16px, 1em);
  font-weight: 500;
}

body:not(.typography-exempt) main header h1 + p,
body:not(.typography-exempt) main .page-lead,
body:not(.typography-exempt) main .detail-lead,
body:not(.typography-exempt) main .product-intro-lede,
body:not(.typography-exempt) main .news-intro-lede,
body:not(.typography-exempt) main .about-intro-lede {
  font-family: var(--font-manrope);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}

body:not(.typography-exempt) main .eyebrow,
body:not(.typography-exempt) main .information,
body:not(.typography-exempt) main time,
body:not(.typography-exempt) main figcaption {
  font-family: var(--font-google-sans-code);
  font-size: var(--type-information);
  font-weight: 500;
  line-height: 1.4;
}

body:not(.typography-exempt) main .caption,
body:not(.typography-exempt) main .caption--small {
  font-family: var(--font-google-sans-code);
  font-size: var(--type-caption);
  font-weight: 400;
  line-height: 1.4;
}

body:not(.typography-exempt) button,
body:not(.typography-exempt) .btn,
body:not(.typography-exempt) input[type="button"],
body:not(.typography-exempt) input[type="submit"] {
  font-family: var(--font-manrope);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

body:not(.typography-exempt) a { text-decoration: none; }

@media (max-width: 768px) {
  body:not(.typography-exempt) main header h1 + p,
  body:not(.typography-exempt) main .page-lead,
  body:not(.typography-exempt) main .detail-lead,
  body:not(.typography-exempt) main .product-intro-lede,
  body:not(.typography-exempt) main .news-intro-lede,
  body:not(.typography-exempt) main .about-intro-lede {
    font-size: 20px;
  }
}