:root {
  --nmh-base: oklch(24% .028 264);
  --nmh-base2: oklch(17% .022 264);
  --nmh-on: #fff;
}

.sfpage-hero {
  background:
    radial-gradient(120% 150% at 100% 0%, color-mix(in oklab, var(--pl-primary, var(--green)) 38%, transparent), transparent 64%),
    linear-gradient(120deg,
      color-mix(in oklab, var(--nmh-base) 92%, var(--pl-primary, var(--green))),
      color-mix(in oklab, var(--pl-primary, var(--green)) 30%, var(--nmh-base2)));
  color: var(--nmh-on);
  border: 1px solid color-mix(in oklab, #fff 12%, transparent);
  box-shadow: var(--sf-shadow-2);
}
.sfpage-hero h1,
.sfpage-hero p,
.sfpage-hero .meta,
.sfpage-hero .eyebrow { color: var(--nmh-on) }
.sfpage-hero p { opacity: .9 }
.sfpage-hero .meta { opacity: .84 }
.sfpage-hero .eyebrow {
  background: rgba(255, 255, 255, .17);
  border: 1px solid rgba(255, 255, 255, .26);
  color: var(--nmh-on);
}
.sfpage-hero a { color: var(--nmh-on) }
.sfpage-hero.has-img::before {
  background:
    linear-gradient(120deg,
      color-mix(in oklab, var(--nmh-base) 88%, transparent),
      color-mix(in oklab, var(--nmh-base2) 72%, transparent));
  opacity: .9;
}

.ct-hero {
  background-image:
    radial-gradient(120% 150% at 100% 0%, color-mix(in oklab, var(--pl-primary, var(--green)) 42%, transparent), transparent 62%),
    linear-gradient(140deg,
      color-mix(in oklab, var(--nmh-base) 90%, var(--pl-primary, var(--green))) 0%,
      color-mix(in oklab, var(--pl-primary, var(--green)) 34%, var(--nmh-base2)) 100%);
  color: var(--nmh-on);
  border: 1px solid color-mix(in oklab, #fff 12%, transparent);
}
.ct-hero-txt,
.ct-hero h1,
.ct-hero p,
.ct-eyebrow { color: var(--nmh-on) }
.ct-hero p { opacity: .9 }
.ct-hero-btns .sfbtn {
  background: var(--nmh-on);
  background-image: none;
  color: #101826;
  border: 1px solid transparent;
}
.ct-hero-btns .sfbtn:hover { background: color-mix(in oklab, var(--nmh-on) 88%, var(--pl-primary, var(--green))) }
.ct-hero-btns .sfbtn.ghost {
  background: rgba(255, 255, 255, .13);
  color: var(--nmh-on);
  border: 1px solid rgba(255, 255, 255, .32);
}
.ct-hero-btns .sfbtn.ghost:hover { background: rgba(255, 255, 255, .22) }

html[data-theme="dark"] .sfpage-hero {
  background:
    radial-gradient(120% 150% at 100% 0%, color-mix(in oklab, var(--pl-primary, var(--green)) 26%, transparent), transparent 62%),
    linear-gradient(120deg,
      color-mix(in oklab, var(--bg) 62%, oklch(12% .02 264)),
      color-mix(in oklab, var(--pl-primary, var(--green)) 17%, oklch(14% .02 264)));
  border-color: color-mix(in oklab, var(--line) 82%, transparent);
  box-shadow: 0 22px 54px -30px rgba(0, 0, 0, .8);
}
html[data-theme="dark"] .sfpage-hero.has-img::before {
  background: linear-gradient(120deg, rgba(10, 12, 16, .9), rgba(10, 12, 16, .68));
  opacity: 1;
}
html[data-theme="dark"] .ct-hero {
  background-image:
    radial-gradient(120% 150% at 100% 0%, color-mix(in oklab, var(--pl-primary, var(--green)) 28%, transparent), transparent 62%),
    linear-gradient(140deg,
      color-mix(in oklab, var(--bg) 60%, oklch(12% .02 264)),
      color-mix(in oklab, var(--pl-primary, var(--green)) 18%, oklch(14% .02 264)));
  border-color: color-mix(in oklab, var(--line) 82%, transparent);
}
html[data-theme="dark"] .ct-hero-btns .sfbtn {
  background: var(--pl-primary, var(--green));
  color: var(--pl-on-primary, #08101c);
}
html[data-theme="dark"] .ct-hero-btns .sfbtn:hover {
  background: var(--pl-primary-hover, var(--green2));
}
html[data-theme="dark"] .ct-hero-art .b {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .16);
}
html[data-theme="dark"] .sfpage-hero .eyebrow,
html[data-theme="dark"] .ct-eyebrow {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
}

.sfpage-cta {
  background: linear-gradient(120deg, color-mix(in oklab, var(--green) 10%, transparent), transparent 70%), var(--surface);
}
html[data-theme="dark"] .sfpage-cta {
  background: linear-gradient(120deg, color-mix(in oklab, var(--green) 14%, transparent), transparent 72%), var(--surface2);
}
html[data-theme="dark"] .sf-faq details { background: color-mix(in oklab, var(--surface2) 72%, var(--surface)) }
html[data-theme="dark"] .sf-faq summary::before { background: var(--surface) }
html[data-theme="dark"] .sfpage-toc { background: color-mix(in oklab, var(--surface2) 70%, var(--surface)) }
html[data-theme="dark"] .ct-card,
html[data-theme="dark"] .ct-box { background: color-mix(in oklab, var(--surface) 96%, var(--bg)) }