FOOTER SECTION RULES:
- Dark background (var(--color-dark)) for visual closure
- Structure: logo + tagline (left) | nav links (center) | contact/social (right) — or a simpler single-row layout for minimal pages

FOOTER COLUMN LAYOUT — SIDE BY SIDE WHEN THEY FIT, STACK ONLY WHEN THEY DON'T — NON-NEGOTIABLE: When the footer has multiple link columns (e.g. a "Quick Links" column, a "Legal" column, a brand/logo column, a contact column), lay them out using `display:flex; flex-wrap:wrap; justify-content:space-between; gap: var(--space-lg)` on the footer's column container (or an equivalent grid using `grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))`), so that columns sit side by side whenever there is enough horizontal space for them, and only wrap to a new row once the viewport becomes too narrow to fit them comfortably. A confirmed real-world failure: footer columns ("Quick Links" and "Legal") rendered stacked full-width on a desktop/tablet-sized viewport where there was clearly enough room for them to sit side by side — wasting most of the available horizontal space and forcing the user to scroll through two separate full-width blocks instead of scanning a compact row. Do NOT default to a single-column stacked layout (`grid-template-columns: 1fr` or `flex-direction: column`) on desktop or tablet. Each column's own width should be content-sized or proportionally flexible (e.g. `flex: 1 1 160px`), not stretched to 100% of the row — only collapse to a stacked single-column layout once the mobile breakpoint (max-width:767px) is reached and there genuinely isn't room for them side by side.
- Logo: <img> with max-width: 180px. ALWAYS use the real logo URL from the BRANDING ASSETS block provided in the prompt. NEVER use a text-based logo, placeholder image, or wordmark in the footer. Reminder: this logo URL is only valid in nav/header, hero, and footer — never reuse it elsewhere on the page.
- Nav links: Privacy Policy, Terms of Service, Contact, Disclaimer — all as <a> tags
- Social media icons: Font Awesome brand icons as <a> tags

FOOTER TEXT WEIGHT RULES — NON-NEGOTIABLE:
- footer p, footer span, footer li, footer small: font-weight: 400; font-size: 16px
- footer a: font-weight: 500; font-size: 16px
- footer h1–h6, footer [class*="heading"], footer [class*="col-title"]: font-weight: 700
- NEVER bold footer body text — only headings and links
- No text in the footer may be bold (font-weight 600+) EXCEPT links and column headings.

FOOTER FONT SIZE — NON-NEGOTIABLE:
All footer body text — paragraphs, links, list items, disclaimers, copyright — must be no larger than 16px. Only footer column headings may exceed 16px.

FOOTER COPYRIGHT — NON-NEGOTIABLE:
The copyright line MUST always be placed at the very bottom of the footer, outside and below any column layout, spanning the full footer width with text-align:center.
NEVER nest the copyright inside a column div.
Structure: footer columns grid/flex first, then a full-width copyright div below it:
<div style="width:100%;text-align:center;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.1);margin-top:var(--space-lg);">
  <p class="text-center" style="font-size:var(--text-xs);color:rgba(255,255,255,0.4);margin:0;">© [YEAR] [Company Name]. All Rights Reserved.</p>
</div>

MOBILE & TABLET — COPYRIGHT AND EVERYTHING BELOW IT MUST BE CENTERED — NON-NEGOTIABLE:
On mobile and tablet (max-width:1024px), the copyright line and any content that follows it (the earnings disclaimer paragraph, additional legal text, anything placed after the copyright div) must be: text-align:center, with no exceptions, and must carry the "text-center" class per CLASS NAME REQUIRED ON CENTERED TEXT in non_negotiable_rules.md. This applies even if the desktop version of the copyright is already centered per the rule above — re-declare text-align:center explicitly inside your max-width:1024px media query rather than assuming the desktop rule carries through unchanged. A confirmed real-world failure: the copyright line rendered left-aligned on a narrower viewport even though the base rule specifies center alignment — write the centering directly into your mobile/tablet CSS rule for the copyright and disclaimer elements, do not rely on inheritance from a desktop-only declaration.

FOOTER PADDING — NON-NEGOTIABLE:
The footer must have padding-top: 50px and padding-bottom: 10px. NEVER use the general 100px/75px section padding on the footer, and never leave the footer with zero top padding (content jammed against the top edge looks broken).

FOOTER FULL WIDTH — NON-NEGOTIABLE:
The footer, .site-footer, and #footer MUST ALWAYS have width: 100%; min-width: 100%; max-width: 100%. No inner container width constraint should ever bleed out to the footer element itself.

EARNINGS DISCLAIMER:
If applicable, include a separate disclaimer paragraph:
- Style: italic; font-size: var(--text-xs); color: rgba(255,255,255,0.3); max-width: 700px; margin: var(--space-sm) auto 0; text-align: center. Add class "text-center" to this element.
- Text: "Results are not typical. Individual results may vary. This site is not affiliated with or endorsed by Facebook, Google, or any other platform. This is not a guarantee of income or specific results."
- See MOBILE & TABLET — COPYRIGHT AND EVERYTHING BELOW IT MUST BE CENTERED above: re-declare text-align:center explicitly inside your max-width:1024px media query for this element too, do not rely on the base style alone.

Separator line above footer: 1px solid rgba(255,255,255,0.1)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
GRAPESJS MOBILE CHECKS — FOOTER
[GRAPESJS BUILDER ONLY — page generator: ignore this section]
Run these checks after adding or modifying the footer in GrapesJS.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1. FOOTER full viewport width (never constrained):
   editor.Css.setRule('.site-footer, footer', {'width':'100%','min-width':'100%','max-width':'100%'}, {atRuleType:'media',atRuleParams:'(max-width:767px)'});

2. COLUMNS STACK to single column on mobile:
   editor.addStyle('@media (max-width:767px) { .footer__inner, .footer-columns, .footer-grid { display: flex; flex-direction: column; align-items: center; gap: 2rem; } }');

3. COPYRIGHT full width, centered on mobile (re-declare explicitly — never rely on desktop rule):
   editor.addStyle('@media (max-width:767px) { .footer__copyright, [class*="copyright"] { text-align: center !important; width: 100%; } }');

4. DISCLAIMER text centered on mobile:
   editor.addStyle('@media (max-width:767px) { .footer__disclaimer, [class*="disclaimer"] { text-align: center; max-width: 100%; margin-left: auto; margin-right: auto; } }');

5. FOOTER LINKS readable tap targets (min 48px height):
   editor.addStyle('@media (max-width:767px) { .site-footer a { display: inline-block; padding: 0.5rem 0; min-height: 48px; line-height: 48px; } }');

6. INNER CONTENT 10px horizontal padding:
   editor.addStyle('@media (max-width:767px) { .footer__inner, .footer-inner { padding-left: 10px; padding-right: 10px; } }');
