/* DX3 ecommerce typography: only enqueued on the named modern pages. */
:is(main.dxm, main.dxw, main.dm-redesign, main.pc-redesign, main.woo-redesign, main.info-redesign, main.dxa-page-main) {
  --dx3-type-display: "HK Grotesk", Arial, sans-serif;
  --dx3-type-body: "HK Grotesk", Arial, sans-serif;
  --dx3-type-italic: Georgia, "Times New Roman", serif;
  --dx3-type-hero: clamp(2.5rem, 5.3vw, 4.5rem);
  --dx3-type-section: clamp(2.25rem, 4.2vw, 3.375rem);
  --dx3-type-card: 1.5rem;
  --dx3-type-body-size: 1.0625rem;
  --dx3-type-kicker: .75rem;
  --dx3-type-button: .9375rem;
  --dx3-type-display-weight: 800;
  --dx3-type-card-weight: 700;
  --dx3-type-body-weight: 400;
  --dx3-type-display-leading: 1.04;
  --dx3-type-section-leading: 1.1;
  --dx3-type-body-leading: 1.65;
  --dx3-type-display-tracking: -.035em;
  --dx3-type-section-tracking: -.03em;
  --dx3-type-card-tracking: -.025em;
  --dx3-type-kicker-tracking: .15em;
  font-family: var(--dx3-type-body);
  font-size: var(--dx3-type-body-size);
  font-weight: var(--dx3-type-body-weight);
  line-height: var(--dx3-type-body-leading);
}

:is(main.dxm, main.dxw, main.dm-redesign, main.pc-redesign, main.woo-redesign, main.info-redesign, main.dxa-page-main) :is(h1, h2, h3) {
  font-family: var(--dx3-type-display);
}

:is(main.dxm, main.dxw, main.dm-redesign, main.pc-redesign, main.woo-redesign, main.info-redesign) h1 {
  font-size: var(--dx3-type-hero);
  font-weight: var(--dx3-type-display-weight);
  line-height: var(--dx3-type-display-leading);
  letter-spacing: var(--dx3-type-display-tracking);
}

main.dxm h2:not(.dxm-pci h2),
main.dxw h2:not(.dxw-pci h2),
main.dm-redesign h2,
main.pc-redesign h2,
main.woo-redesign h2:not(.woo-tier-summary h2),
main.info-redesign h2:not(.in-form-card h2) {
  font-size: var(--dx3-type-section);
}

:is(main.dxm, main.dxw, main.dm-redesign, main.pc-redesign, main.woo-redesign, main.info-redesign) h2 {
  font-weight: var(--dx3-type-display-weight);
  line-height: var(--dx3-type-section-leading);
  letter-spacing: var(--dx3-type-section-tracking);
}

:is(main.dxm, main.dxw, main.dm-redesign, main.pc-redesign, main.woo-redesign, main.info-redesign) h3 {
  font-weight: var(--dx3-type-card-weight);
  line-height: 1.2;
  letter-spacing: var(--dx3-type-card-tracking);
}

:is(main.dxm, main.dxw, main.dm-redesign, main.pc-redesign, main.woo-redesign, main.info-redesign) :is(h1, h2) em,
main.dxa-page-main .dxa-landing-hero h1 em {
  font-family: var(--dx3-type-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.035em;
}

:is(main.dxm, main.dxw, main.dm-redesign, main.pc-redesign, main.woo-redesign, main.info-redesign) p {
  font-family: var(--dx3-type-body);
  line-height: var(--dx3-type-body-leading);
}

:is(main.dxm, main.dxw, main.dm-redesign, main.pc-redesign, main.woo-redesign, main.info-redesign, main.dxa-page-main) :is([class*="kicker"], [class*="eyebrow"]) {
  font-family: var(--dx3-type-body);
  font-size: var(--dx3-type-kicker);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: var(--dx3-type-kicker-tracking);
}

:is(main.dxm, main.dxw, main.dm-redesign, main.pc-redesign, main.woo-redesign, main.info-redesign, main.dxa-page-main) :is(a, button, input[type="submit"]):is([class*="btn"], [class*="button"], .dxa-primary) {
  font-family: var(--dx3-type-body);
  font-size: var(--dx3-type-button);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
}

main.info-redesign button.btn {
  font-size: var(--dx3-type-button) !important;
}

/* The Architect has a narrower two-column hero and small control headings. */
main.dxa-page-main .dx3-hosting-architect {
  font-family: var(--dx3-type-body);
  font-size: var(--dx3-type-body-size);
  line-height: var(--dx3-type-body-leading);
}

main.dxa-page-main .dxa-landing-hero h1 {
  font-size: clamp(2.5rem, 4.7vw, 4rem);
  font-weight: var(--dx3-type-display-weight);
  line-height: var(--dx3-type-display-leading);
  letter-spacing: var(--dx3-type-display-tracking);
}

main.dxa-page-main .dx3-hosting-architect :is(h2, h3, h4) {
  font-family: var(--dx3-type-display);
  line-height: var(--dx3-type-section-leading);
  letter-spacing: var(--dx3-type-section-tracking);
}

main.dxa-page-main .dx3-hosting-architect h2 {
  font-weight: var(--dx3-type-display-weight);
}

main.dxa-page-main .dx3-hosting-architect h3 {
  font-weight: var(--dx3-type-card-weight);
  letter-spacing: var(--dx3-type-card-tracking);
}

main.dxa-page-main .dxa-landing-section > h2,
main.dxa-page-main .dxa-landing-section .dxa-header h2 {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
}

main.dxa-page-main .dx3-hosting-architect p {
  font-family: var(--dx3-type-body);
  line-height: var(--dx3-type-body-leading);
}