/* Hero headings (Day 2 SEO pack).
   Each hero's big design line used to be the page <h1>. It is now
   <div class="… hero-display">, and the keyword <h1 class="seo-h1"> sits
   right below it. The rules below reproduce exactly what the old h1
   selectors gave the design line, so it looks the same as before. */

/* Browser h1 defaults + the site's global "h1, h2, h3, h4" rule, at zero
   specificity so any class rule (e.g. .deck-title, .ls-words) still wins. */
:where(.hero-display) {
  display: block; font-size: 2em; margin-block: .67em;
  font-weight: 800; line-height: 1.15; letter-spacing: -0.02em;
}

/* Copies of the old context rules (".x-hero h1 …") */
.cap-hero :where(.hero-display) { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; font-size: clamp(40px, 6.8vw, 100px); line-height: 1.02; margin: 26px 0 28px; max-width: 14ch; }
.cap-hero :where(.hero-display) em { font-style: italic; color: transparent; background: linear-gradient(100deg, var(--mint), var(--blue)); -webkit-background-clip: text; background-clip: text; }
.pd-hero :where(.hero-display) { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; font-size: clamp(40px, 6.6vw, 96px); line-height: 1.02; margin: 26px 0 28px; max-width: 13ch; }
.pd-hero :where(.hero-display) em { font-style: italic; color: transparent; background: linear-gradient(100deg, var(--mint), var(--blue)); -webkit-background-clip: text; background-clip: text; }
.pdp-hero :where(.hero-display) { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; font-size: clamp(40px, 5.6vw, 78px); line-height: 1; margin: 14px 0 6px; }
.pdp-hero :where(.hero-display) sup { font-size: .32em; vertical-align: super; font-weight: 600; }
.cx-hero :where(.hero-display) { font-family: var(--serif); font-weight: 500; font-size: clamp(38px,6vw,76px); line-height: 1.05; margin: 18px 0 18px; max-width: 16ch; }
.ls-hero :where(.hero-display) { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; font-size: clamp(42px, 7.4vw, 112px); line-height: 1.0; margin: 26px 0 30px; max-width: 13ch; }
.ls-hero :where(.hero-display) .glow { font-style: italic; color: transparent; background: linear-gradient(100deg, var(--ls-mint), var(--blue)); -webkit-background-clip: text; background-clip: text; }

/* The keyword H1: a clear, readable line under the design line.
   Doubled class beats the ".x-hero h1" rules above it in the cascade. */
h1.seo-h1.seo-h1 {
  display: block; font-family: inherit; font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none;
  max-width: 46ch; margin: 0 0 20px; color: inherit; opacity: .9;
  background: none; -webkit-text-fill-color: currentColor;
}
.pdp-hero h1.seo-h1.seo-h1 { margin: 10px 0 14px; }