/* Heading scale - pages only
 *
 * The owner's fixed scale for h1-h6. Linked from the root pages and deliberately NOT from
 * blog/*.html: style.css and responsive.css are shared with the 702 blog pages and must keep
 * their own heading sizes there.
 *
 * WHY THE :not(#...) GUARDS. A bare `h2 { font-size: 38px !important }` is not enough. The
 * stylesheets and the pages' own inline <style> blocks contain class-based rules that already use
 * !important and outrank an element selector:
 *
 *     .faq-title                        15px !important   (mobile, 20 FAQ headings per page)
 *     h2:not(.invest-title)             !important        on 57 pages
 *     .invest-section h2.invest-title   !important        on 57 pages
 *     .hero-text2 h3                    36px !important
 *     .call-to-action .section-title h3 28px !important
 *
 * Each :not(#id) adds an id's worth of specificity while still matching every element, because
 * those ids do not exist. Three of them put this file above any class-based rule, so the scale
 * applies everywhere instead of silently losing on the pages that need it most.
 *
 * Load this LAST in the head.
 */
h1:not(#s1):not(#s2):not(#s3) { font-size: 46px !important; }
h2:not(#s1):not(#s2):not(#s3) { font-size: 38px !important; }
h3:not(#s1):not(#s2):not(#s3) { font-size: 30px !important; }
h4:not(#s1):not(#s2):not(#s3) { font-size: 24px !important; }
h5:not(#s1):not(#s2):not(#s3) { font-size: 20px !important; }
h6:not(#s1):not(#s2):not(#s3) { font-size: 18px !important; }

@media only screen and (max-width: 767px) {
  h1:not(#s1):not(#s2):not(#s3) { font-size: 32px !important; }
  h2:not(#s1):not(#s2):not(#s3) { font-size: 28px !important; }
  h3:not(#s1):not(#s2):not(#s3) { font-size: 24px !important; }
  h4:not(#s1):not(#s2):not(#s3) { font-size: 21px !important; }
  h5:not(#s1):not(#s2):not(#s3) { font-size: 18px !important; }
  h6:not(#s1):not(#s2):not(#s3) { font-size: 16px !important; }
}

/* Exception: the hero eyebrow pill.
 *
 * On index.html that label is marked up as <h2 style="font-size:small"> - a decorative badge in a
 * heading tag. The scale's !important beat its inline size and blew it up from ~13px to 38px, so
 * it is restored here. The selector carries one more class than the base rule, which is what lets
 * it win. Only index.html is affected: the other six .hero-pill pages use a non-heading tag for
 * the same badge.
 *
 * Worth noting separately: a decorative badge does not belong in an <h2> at all - it adds a stray
 * heading to the page outline. Changing the tag is a markup decision, so only the size is fixed.
 */
.hero-pill h2:not(#s1):not(#s2):not(#s3) { font-size: small !important; }