/* Use the exact display face and optical settings from the hero statement. */

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-copy
  h3:not(#ff-hero-card-a):not(#ff-hero-card-b):not(#ff-hero-card-c):not(#ff-hero-card-d):not(#ff-hero-card-e):not(#ff-hero-card-f):not(#ff-hero-card-g),
html[data-site-theme] body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-copy
  h3:not(#ff-hero-card-a):not(#ff-hero-card-b):not(#ff-hero-card-c):not(#ff-hero-card-d):not(#ff-hero-card-e):not(#ff-hero-card-f):not(#ff-hero-card-g) {
  font-family: var(--ff-hero-expanded-black) !important;
  font-style: normal !important;
  font-weight: 1000 !important;
  font-stretch: 132% !important;
  font-variation-settings: "wdth" 132, "wght" 1000 !important;
  font-optical-sizing: auto !important;
  font-synthesis: none !important;
  line-height: 0.86 !important;
  letter-spacing: -0.045em !important;
}

/* Keep the supporting copy in the same SF Pro family, with a quieter weight. */
html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-step:not(#ff-hero-step-a):not(#ff-hero-step-b):not(#ff-hero-step-c):not(#ff-hero-step-d):not(#ff-hero-step-e):not(#ff-hero-step-f):not(#ff-hero-step-g),
html[data-site-theme] body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-step:not(#ff-hero-step-a):not(#ff-hero-step-b):not(#ff-hero-step-c):not(#ff-hero-step-d):not(#ff-hero-step-e):not(#ff-hero-step-f):not(#ff-hero-step-g) {
  font-family: var(--ff-hero-expanded-black) !important;
  font-style: normal !important;
  font-weight: 750 !important;
  font-stretch: 132% !important;
  font-variation-settings: "wdth" 132, "wght" 750 !important;
  font-optical-sizing: auto !important;
  font-synthesis: none !important;
  letter-spacing: -0.025em !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-copy
  p:not(#ff-hero-copy-a):not(#ff-hero-copy-b):not(#ff-hero-copy-c):not(#ff-hero-copy-d):not(#ff-hero-copy-e):not(#ff-hero-copy-f):not(#ff-hero-copy-g),
html[data-site-theme] body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-copy
  p:not(#ff-hero-copy-a):not(#ff-hero-copy-b):not(#ff-hero-copy-c):not(#ff-hero-copy-d):not(#ff-hero-copy-e):not(#ff-hero-copy-f):not(#ff-hero-copy-g) {
  font-family: var(--ff-hero-expanded-black) !important;
  font-style: normal !important;
  font-weight: 650 !important;
  font-stretch: 132% !important;
  font-variation-settings: "wdth" 132, "wght" 650 !important;
  font-optical-sizing: auto !important;
  font-synthesis: none !important;
  letter-spacing: -0.02em !important;
}