CSS helpers & Fluid

Defined in assets/theme.css, all driven by the design-token CSS variables(so theme settings, dark mode, and section style overrides apply):

• page-section / page-section--alt — Use: Section outer band (alt = tinted surface)
• container — Use: Max-width content column (--container-width)
• grid grid--cols-2/3/4 — Use: Responsive card grids
• text-center mb-1 + page-subtitle — Use: The standard section heading pair
• feature-card, testimonial-card — Use: General card skins
• btn-primary, btn-outline — Use: Buttons (honour --button-* overrides)
• space-card, location-card markup — Use: Copy from the snippets, don't re-invent — their data-*/class contracts feed the listing JS
• empty-state — Use: Friendly "nothing here" block

• Empty lists are truthy — test {% if Things.size > 0 %}, never  {% if Things %}.
• .size, not .length on lists.
• Membership tests on arrays: use the loop-with-flag pattern (see Recipe 4)  — it works everywhere and survives Fluid/Liquid dialect differences.
• {% assign %} inside a {% for %} persists after the loop within the  same file — that's what makes the loop-with-flag pattern work.
• Filters that return markup (attr_icon, attr_icon_key) must be piped  through | raw.