/* ========================================================================== /getting-started — "The Index" -------------------------------------------------------------------------- An editorial/archive treatment for the anonymous visitor's tour of the product. The page argues from the depth of the catalogue, so the figures are set as evidence and everything around them is kept quiet. Rules this file follows, each with a defect behind it: - Every class is prefixed `.gs-`, INCLUDING states (`.gs-is-active`, not `.gs-active`). Single-word state classes in a page stylesheet are the exact latent shape of the modal.css collision (CLAUDE.md #31). - No global `* { margin: 0 }` reset. The previous inline block carried one, which leaked out of the page and stripped margins from the shared nav, footer, FAB and any Modal/Toast mounted here. - No `:root` declarations. `desktop-navigation.ftlh` re-links design-tokens.css inside , so a page-level `:root` override is dead on arrival (CLAUDE.md #74). Locals are scoped to `.gs-page`. - No `nth-child`-keyed accents. Inserting or reordering a step silently recoloured everything after it; accent is an explicit class instead. - Hero spacing derives from `--chrome-bottom`, which the nav measures at runtime (CLAUDE.md #85). Never a hardcoded nav height. - One property per line, always (project convention). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Local scale Scoped to the page root so nothing here can escape into shared chrome. -------------------------------------------------------------------------- */ /* ⚠ The body rule is NOT optional and NOT boilerplate. No shared stylesheet in this project sets a body background — every page has always set its own, and the page this replaced did it inside the same inline