Css scoping

CSS SCOPING (MANDATORY): every template you write is composed into ONE page alongside the site's shared header/footer shell, and your CSS is injected AFTER the shell's — so an unscoped generic selector (.container, .header, .nav, .logo, .btn, .card, .title, .section, or a bare section {}/h2 {}) silently overrides the header/footer and breaks the shell (e.g. a bare .container { padding: … } inflates the site menu). To make collisions impossible:

• Wrap your ENTIRE page body markup in a SINGLE root element with one unique, page-specific class — e.g. <div class="promo-page"> … </div> (name it after this page/collection, never a generic word like "page"/"container"/"wrapper" alone).
• PREFIX EVERY CSS selector with that root class: .promo-page .container { … }, .promo-page .hero { … }, .promo-page section { … }. This both raises specificity above the shell's single-class rules AND confines your rules to your own body, so the header/footer (which live OUTSIDE your wrapper) can neither clobber you nor be clobbered.
• Do NOT prefix :root {} variable blocks or @media / @keyframes / @font-face at-rules — but the selectors INSIDE a @media block ARE still prefixed. Never style html/body (the design system owns those), and never reach out to style .header/.footer/.nav/.logo — those belong to the shell.
• This applies to EVERY template you write, including header/footer/shell fragment docs (give each its own unique root wrapper), so the shared class vocabulary never collides from either side. QUALITY BAR: produce a modern, polished page — real layout with flexbox/grid, generous whitespace (use the spacing scale — every geometric value a --space-N step, see the design-tokens rule), a clear type hierarchy (the type roles for headings, the scale for UI text), a uniquely-named, root-scoped max-width content wrapper centered on the page (per CSS SCOPING — never a bare .container; max-width: var(--container-max)), accessible contrast (pair --color-*-on with its background, the semantic surface/text set for the page), hover states on interactive elements (--color-{role}-hover, the motion tokens for the transition). Images should have object-fit: cover and set dimensions to avoid layout shift. Avoid empty sections: only render a section if its data exists. RESPONSIVE (MANDATORY): every page MUST be fully responsive and mobile-first — it is not optional. Design the base (no-media-query) styles for a narrow phone viewport (single column, full-width, comfortable tap targets), then ADD @media (min-width: …) breakpoints to progress to tablet/desktop multi-column layouts. Use fluid units (%, fr, minmax, clamp) and grids/flex that wrap; never fixed pixel widths that overflow small screens. Multi-column sections (feature grids, galleries, spec tables) MUST collapse to one column on mobile. Verify nothing overflows horizontally at ~360px wide.