/* ============================================================================
   site.css — the ONE stylesheet the pages link to.
   Cascade layers keep order predictable no matter the @import sequence:
   tokens < base < modules < utilities. A module can never accidentally
   out-specify base or another module.

   ADD A MODULE:    add one `@import "modules/<name>.css" layer(modules);` line.
   REMOVE A MODULE: delete that one line (+ its <section> and js module).

   NOTE (perf): @import creates a small request waterfall. Fine for this size on
   Cloudflare HTTP/2. If Lighthouse flags render-blocking, concatenate these into
   one file at deploy — the modular source stays the same. (see MODULES.md)
   ========================================================================== */

@layer tokens, base, modules, utilities;

@import "tokens.css"          layer(tokens);
@import "base.css"            layer(base);

@import "modules/header.css"       layer(modules);
@import "modules/hero.css"         layer(modules);
@import "modules/problem.css"      layer(modules);
@import "modules/system.css"       layer(modules);
@import "modules/outcomes.css"     layer(modules);
@import "modules/how-it-works.css" layer(modules);
@import "modules/audit-cta.css"    layer(modules);
@import "modules/testimonials.css" layer(modules);
@import "modules/sales-bridge.css" layer(modules);
@import "modules/faq.css"          layer(modules);
@import "modules/footer.css"       layer(modules);
@import "modules/legal-page.css"   layer(modules);  /* shared by /privacy, /terms, /contact, 404 */