/*
  Predictable Innovation, v2: the Selling With Fire page, /selling-with-fire (ours, not part of the home package).
  Loaded on that page only, after styles.css (the package file, never edited) and site.css (src/rebrand/v2/swf/render.ts).

  The page is built from the home's own components: the #fire section (embers video, shade, badge, promise, outcomes,
  program line, weeks), the client results slider and quotes, the coach block, the apply section, and site.css's
  .fit pair and .faq. This file adds only what a page whose H1 is the program's name needs, with the values styles.css
  already uses:
    - the hero is the home's .fire section at the top of the page, so its .wrap clears the fixed header as .hero-body
      and site.css's .page-head .wrap do;
    - its H1 takes the size of the home's display heading of that section (.fire h2: styles.css sizes it by tag);
    - the four week names are h3 under the section's h2 (the home has them as h4 under an h3), with .week h4's values.

  The rules of site.css hold here too (src/rebrand/v2/swf/__tests__/swf.test.ts checks them): only the :root tokens of
  styles.css, no color literal, no new font family, breakpoint or easing, never a selector styles.css or site.css
  defines, dark surfaces only, and every rule scoped to the page's own sections (.swf-...).
*/

/* hero: the home's #fire section as the page's title area */
.swf-hero .wrap{padding-top:calc(88px + clamp(48px,5vw,72px))}
.swf-hero h1{margin-top:24px;font-size:clamp(76px,2rem + 7.4vw,156px);line-height:.94}

/* the four weeks, named by h3 under the section's h2 */
.swf-program .week h3{font-family:var(--display);font-weight:400;font-size:34px;line-height:1;text-transform:uppercase}