diff --git a/blocks/footer-legal/footer-legal.css b/blocks/footer-legal/footer-legal.css
index 8800473..b71e4d1 100644
--- a/blocks/footer-legal/footer-legal.css
+++ b/blocks/footer-legal/footer-legal.css
@@ -4,12 +4,23 @@
    directly from fortinet.com's own .footer-row.copyrights.
 
    This block's own .section wrapper inherits the generic "footer .footer >
-   div" rule from footer.css (1240px max-width, centered, 48/24/32px
-   padding) — right for the black footer's columns, but this section is
-   full-bleed light gray on the source, not centered on white. Overridden
-   below via the auto-generated {blockname}-container class, with the same
-   1240px centering re-applied one level in on .footer-legal itself instead. */
-footer .footer-legal-container {
+   div > .section" rule from footer.css (1240px max-width, centered,
+   48/24/32px padding) — right for the black footer's columns, but this
+   section is full-bleed light gray on the source, not centered on white.
+   Overridden below via the auto-generated {blockname}-container class,
+   with the same 1240px centering re-applied one level in on .footer-legal
+   itself instead.
+
+   Selector repeats footer.css's own "footer .footer > div > .section"
+   shape (rather than just ".footer-legal-container" alone) so this wins on
+   specificity regardless of which stylesheet happens to load second —
+   .footer-legal-container is a strict subset of what .section already
+   matches on this element, so a shorter selector naming just that class
+   would tie footer.css's own rule on specificity and then depend on load
+   order, which isn't guaranteed here (each block's CSS loads when that
+   block is decorated, and footer-legal decorates as a nested block inside
+   footer's own fragment, not necessarily strictly after footer.css settles). */
+footer .footer > div > .section.footer-legal-container {
   max-width: none;
   margin: 0;
   padding: 0;
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
index bc8b702..da89ffb 100644
--- a/blocks/footer/footer.css
+++ b/blocks/footer/footer.css
@@ -6,7 +6,17 @@ footer {
   font-family: var(--body-font-family);
 }
 
-footer .footer > div {
+/* Targets each section within the footer fragment individually (.section,
+   not the shared wrapper div itself) — footer.js flattens the fragment's
+   own sections into one plain wrapper div with no width constraint of its
+   own, so an earlier revision that put this rule on that wrapper instead
+   constrained every section inside it to the same 1240px/centered/padded
+   box as one unit. That's right for the black footer's columns, but wrong
+   for footer-legal's own full-bleed gray band below it — the two sections
+   need to size independently, the same way main > .section > div lets
+   individual page sections (e.g. cards-panel's own full-bleed override)
+   differ from each other instead of all sharing one box. */
+footer .footer > div > .section {
   margin: auto;
   max-width: var(--content-max-width, 1240px);
   padding: 48px 24px 32px;
@@ -117,7 +127,7 @@ footer .default-content-wrapper > p:last-child a + a::before {
 }
 
 @media (width >= 900px) {
-  footer .footer > div {
+  footer .footer > div > .section {
     padding: 56px 32px 32px;
   }