/* Tokens and shared primitives from build/00-head.html, scoped to the three
   verbatim section roots. The rest of that file is deliberately absent: the
   `.btn-primary` block would repaint every button on moonfort.ai, and the page
   already has its own reset, its fonts and exactly one Lenis.

   LINK THIS BEFORE faq.css / cta.css / foot.css. The reset below and the
   section rules carry equal specificity, so order is what decides. */
.pg-faq,.pg-cta,.pg-foot{
  --bg:#011614;
  --deep-space:#051415;
  --surface:#0b292d;
  --white:#eef3e4;
  --neon:#7aff9b;
  --turquoise:#84ffda;
  --yellow:#d8ff85;
  --light-blue:#b4cdd1;
  --muted:rgba(238,243,228,.62);
  --hairline:rgba(238,243,228,.14);
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --container:1200px;
  --pad:40px;
  --sec-pad:120px;
  --r-sm:8px; --r-md:16px; --r-lg:20px; --r-pill:100px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.36,.42,1);

  color:var(--white);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  text-transform:none;
  letter-spacing:normal;
}

/* The reset, scoped. Note what is NOT here: a blanket `padding:0`. The demo
   relies on the document reset only for margins and list padding, and zeroing
   padding on everything would flatten the site's own .btn-primary, which these
   sections borrow rather than redefine. */
:where(.pg-faq,.pg-cta,.pg-foot) *,:where(.pg-faq,.pg-cta,.pg-foot) *::before,:where(.pg-faq,.pg-cta,.pg-foot) *::after{box-sizing:border-box}
:where(.pg-faq,.pg-cta,.pg-foot) img,:where(.pg-faq,.pg-cta,.pg-foot) svg,:where(.pg-faq,.pg-cta,.pg-foot) video,:where(.pg-faq,.pg-cta,.pg-foot) canvas{display:block;max-width:100%}
:where(.pg-faq,.pg-cta,.pg-foot) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(.pg-faq,.pg-cta,.pg-foot) a{color:inherit;text-decoration:none}
:where(.pg-faq,.pg-cta,.pg-foot) h1,:where(.pg-faq,.pg-cta,.pg-foot) h2,:where(.pg-faq,.pg-cta,.pg-foot) h3,:where(.pg-faq,.pg-cta,.pg-foot) h4,:where(.pg-faq,.pg-cta,.pg-foot) p,:where(.pg-faq,.pg-cta,.pg-foot) ul,:where(.pg-faq,.pg-cta,.pg-foot) figure{margin:0}
/* The one rule that deliberately carries weight. Everything above is a floor
   for the DEMO's rules, so :where() is right. This one fights the HOST site,
   whose h1-h4 are `text-transform: capitalize` - that would title-case the
   demo's sentence-case headings. h1-h4 only: `p` is excluded because the
   eyebrow is a <p> and its uppercase is wanted. */
.pg-faq h1,.pg-cta h1,.pg-foot h1,.pg-faq h2,.pg-cta h2,.pg-foot h2,.pg-faq h3,.pg-cta h3,.pg-foot h3,.pg-faq h4,.pg-cta h4,.pg-foot h4{text-transform:none}
:where(.pg-faq,.pg-cta,.pg-foot) ul{padding:0;list-style:none}

/* shared primitives */
:where(.pg-faq,.pg-cta,.pg-foot) .pg-wrap{width:min(var(--container),100% - var(--pad)*2);margin-inline:auto}
:where(.pg-faq,.pg-cta,.pg-foot) .pg-h2{font-size:clamp(30px,3.2vw,46px);line-height:1.12;font-weight:500;letter-spacing:-.015em}
:where(.pg-faq,.pg-cta,.pg-foot) .pg-h1{font-size:clamp(34px,4.6vw,64px);line-height:1.08;font-weight:500;letter-spacing:-.02em}
:where(.pg-faq,.pg-cta,.pg-foot) .pg-lede{color:var(--muted);font-size:clamp(15px,1.15vw,17px);line-height:1.6}
:where(.pg-faq,.pg-cta,.pg-foot) em.pg-hl{font-style:normal;color:var(--neon)}
:where(.pg-faq,.pg-cta,.pg-foot) .pg-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--neon)}