/* Shared first-fold cleanup for the premium public pages. */

:root {
  --nz-page-max: 1600px;
  --nz-content-max: 1520px;
  --nz-wide-gutter: 64px;
  --nz-home-section-title: clamp(2rem, 2.9vw, 2.875rem);
  --nz-home-hero-lede: clamp(15px, 1vw, 19px);
}

/* Homepage-led type scale for both production-program sales pages. */
html body .temp-experience.tp-hardstyle main.temp-program .tp-hero h1,
html body .temp-experience.tp-uptempo main.temp-program .tp-hero h1 {
  font-size: clamp(55px, 4.3vw, 83px) !important;
  line-height: .93 !important;
}

html body .temp-experience.tp-hardstyle main.temp-program .tp-hero .tp-lede,
html body .temp-experience.tp-uptempo main.temp-program .tp-hero .tp-lede {
  font-size: var(--nz-home-hero-lede) !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

html body .temp-experience.tp-hardstyle main.temp-program .tp-section h2,
html body .temp-experience.tp-uptempo main.temp-program .tp-section h2 {
  font-size: var(--nz-home-section-title) !important;
  line-height: 1 !important;
}

@media (min-width: 901px) and (max-width: 1200px) {
  html body .temp-experience.tp-hardstyle main.temp-program .tp-hero h1,
  html body .temp-experience.tp-uptempo main.temp-program .tp-hero h1 {
    font-size: clamp(48px, 5vw, 60px) !important;
  }
}

@media (min-width: 621px) and (max-width: 900px) {
  html body .temp-experience.tp-hardstyle main.temp-program .tp-hero h1,
  html body .temp-experience.tp-uptempo main.temp-program .tp-hero h1 {
    font-size: clamp(42px, 5.47vw, 48px) !important;
  }
}

@media (max-width: 620px) {
  :root {
    --nz-home-section-title: clamp(1.6rem, 6.6vw, 2rem);
  }

  html body .temp-experience.tp-hardstyle main.temp-program .tp-hero h1,
  html body .temp-experience.tp-uptempo main.temp-program .tp-hero h1 {
    font-size: clamp(42px, 13vw, 58px) !important;
  }
}

/* Keep the About page on the same compact desktop rhythm as the homepage. */
@media (min-width: 981px) {
  html body main.about-premium .about-section {
    padding-block: clamp(52px, 5vw, 72px) !important;
  }

  html body main.about-premium h1 {
    font-size: clamp(48px, 4.3vw, 72px) !important;
    line-height: .95 !important;
  }

  html body main.about-premium h2 {
    font-size: var(--nz-home-section-title) !important;
    line-height: 1 !important;
  }

  html body main.about-premium h3,
  html body main.about-premium .about-team-card h3 {
    font-size: clamp(20px, 1.8vw, 28px) !important;
    line-height: 1.08 !important;
  }

  html body main.about-premium .about-lede {
    max-width: 54ch !important;
    font-size: var(--nz-home-hero-lede) !important;
    line-height: 1.55 !important;
  }

  html body main.about-premium .about-section-heading {
    gap: 28px 48px !important;
    margin-bottom: 32px !important;
  }

  html body main.about-premium :is(
    .about-section-heading > p:last-child,
    .about-story p,
    .about-long-copy p,
    .about-founder-copy p,
    .about-feedback > div:first-child > p,
    .about-team-card p,
    .about-community-copy p,
    .about-contact > div:last-child p,
    .about-final p
  ) {
    font-size: 16px !important;
  }

  html body main.about-premium :is(.about-origin-grid,.about-founder,.about-personal,.about-feedback,.about-contact) {
    column-gap: clamp(36px, 4vw, 64px) !important;
  }

  html body main.about-premium .about-origin blockquote {
    padding: clamp(24px, 2.4vw, 34px) !important;
    font-size: clamp(22px, 2vw, 30px) !important;
  }

  html body main.about-premium .about-card-grid article {
    min-height: 220px !important;
    padding: 22px !important;
  }

  html body main.about-premium .about-card-grid article span {
    margin-bottom: 32px !important;
  }

  html body main.about-premium .about-founder-photo {
    width: min(100%, 400px) !important;
  }

  html body main.about-premium .about-team-card {
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: clamp(28px, 4vw, 56px) !important;
    padding: clamp(24px, 3vw, 38px) !important;
  }

  html body main.about-premium .about-path-card {
    min-height: 240px !important;
    padding: 24px !important;
  }

  html body main.about-premium .about-contact {
    margin-block: clamp(48px, 5vw, 72px) !important;
    padding: clamp(30px, 4vw, 48px) !important;
  }

  html body main.about-premium .about-final {
    padding-block: clamp(60px, 6vw, 88px) !important;
  }
}

/* One wide-screen frame for every current public template. Backgrounds remain
   full-width inside the page frame; the connected content uses the inner frame. */
@media (min-width: 1601px) {
  html {
    zoom: 1 !important;
    --page-zoom: 1 !important;
  }

  :is(
    main.homepage,
    main.temp-program,
    main.temp-adp,
    main.about-premium,
    main.store-shell,
    main.np-page,
    main.sales-page,
    main.forge-premium,
    main.roaster-v2
  ) {
    width: 100% !important;
    max-width: var(--nz-page-max) !important;
    margin-inline: auto !important;
  }

  html body :is(
    .temp-experience.temp-home main.homepage .shell,
    .temp-experience main.temp-program .tp-shell,
    main.temp-adp .shell,
    main.about-premium .about-shell,
    main.store-shell .np-container,
    main.np-page .np-shell,
    main.np-page .adp-shell,
    main.sales-page .sales-shell,
    main.forge-premium .forge-shell,
    main.roaster-v2 .roaster-shell
  ) {
    width: min(var(--nz-content-max), calc(100% - var(--nz-wide-gutter))) !important;
    max-width: var(--nz-content-max) !important;
    margin-inline: auto !important;
  }
}

/* The body offset belongs to the fixed header. Remove only the empty space
   inside the first section so content starts directly below the navigation. */
html body .temp-experience.temp-home main.homepage.home-refined.school-home .hero.shell {
  min-height: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 34px !important;
}

html body .temp-experience.tp-hardstyle main.temp-program .tp-hero.hs-tone-hero,
html body .temp-experience.tp-uptempo main.temp-program .tp-hero.ut-tone-hero {
  min-height: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 38px !important;
}

body.temp-adp .temp-adp .hero.shell {
  min-height: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 44px !important;
}

body .about-premium .about-hero.about-shell {
  min-height: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 58px !important;
  align-items: center !important;
}

body .store-shell-b .store-hero-b {
  padding-top: 18px !important;
}

/* Keep the two homepage choices balanced at laptop widths. */
@media (min-width: 901px) and (max-width: 1450px) {
  html body .temp-experience.temp-home main.homepage.home-refined.school-home .hero-cta-row {
    grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr) !important;
    gap: 10px !important;
  }
  html body .temp-experience.temp-home main.homepage.home-refined.school-home .hero-cta-row > a.school-home-action {
    padding: 12px 13px 12px 17px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 900px) {
  html body .temp-experience.temp-home main.homepage.home-refined.school-home .hero.shell,
  html body .temp-experience.tp-hardstyle main.temp-program .tp-hero.hs-tone-hero,
  html body .temp-experience.tp-uptempo main.temp-program .tp-hero.ut-tone-hero,
  body.temp-adp .temp-adp .hero.shell,
  body .about-premium .about-hero.about-shell {
    padding-top: 16px !important;
  }
}

@media (max-width: 620px) {
  html body .temp-experience.temp-home main.homepage.home-refined.school-home .hero.shell,
  html body .temp-experience.tp-hardstyle main.temp-program .tp-hero.hs-tone-hero,
  html body .temp-experience.tp-uptempo main.temp-program .tp-hero.ut-tone-hero,
  body.temp-adp .temp-adp .hero.shell,
  body .about-premium .about-hero.about-shell {
    padding-top: 12px !important;
  }
}

/* The proof intro and rating should be one compact line above the stories. */
.tp-hardstyle #proof > .hs-proof-intro,
.tp-uptempo #proof > .ut-proof-intro {
  max-width: 820px;
  margin: 20px 0 8px !important;
}

.tp-hardstyle #proof > .tp-trust,
.tp-uptempo #proof > .tp-trust {
  display: inline-flex !important;
  margin: 0 0 18px !important;
}

/* A previously cached proof block can contain repeated intro/rating pairs.
   Keep the first pair and suppress any later direct-child copies. */
.tp-hardstyle #proof > .hs-proof-intro ~ .hs-proof-intro,
.tp-uptempo #proof > .ut-proof-intro ~ .ut-proof-intro,
.tp-hardstyle #proof > .tp-trust ~ .tp-trust,
.tp-uptempo #proof > .tp-trust ~ .tp-trust {
  display: none !important;
}

/* Keep comparison headings together. Some wide-screen section rules turn the
   eyebrow, title and introduction into separate grid columns. */
.temp-home .home-simple-compare > .shell > .section-intro {
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 0 32px !important;
  text-align: left !important;
}

.temp-home .home-simple-compare > .shell > .section-intro > *,
.tp-hardstyle .hs-compare > .tp-eyebrow,
.tp-hardstyle .hs-compare > h2,
.tp-hardstyle .hs-compare > .compare-intro,
.tp-uptempo .ut-compare > .tp-eyebrow,
.tp-uptempo .ut-compare > h2,
.tp-uptempo .ut-compare > .compare-intro {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

.temp-home .home-simple-compare > .shell > .section-intro > p:last-child {
  margin-top: 0 !important;
}

.temp-home .home-simple-compare > .shell > .section-intro .eyebrow,
.tp-hardstyle .hs-compare > .tp-eyebrow,
.tp-uptempo .ut-compare > .tp-eyebrow {
  margin-bottom: 12px !important;
}

.temp-home .home-simple-compare > .shell > .section-intro h2,
.tp-hardstyle .hs-compare > h2,
.tp-uptempo .ut-compare > h2 {
  max-width: 18ch !important;
  margin-bottom: 14px !important;
}

.temp-home .home-simple-compare > .shell > .section-intro > p:last-child,
.tp-hardstyle .hs-compare > .compare-intro,
.tp-uptempo .ut-compare > .compare-intro {
  max-width: 680px !important;
  margin-bottom: 0 !important;
}