diff --git a/CODEOWNERS b/CODEOWNERS
index f90a03e88..9cfcd06d5 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -30,9 +30,9 @@ guides/security/passkey-reauthentication/ @agektmr
 guides/security/passkey-registration/ @agektmr
 guides/security/passkeys/ @agektmr
 # Owned via feature "container-scroll-state-queries"
-guides/ui-atoms/context-sensitive-sticky-headers/ @bramus
 guides/ui-atoms/scroll-position-aware-elements/ @bramus
 guides/ui-atoms/scrollability-affordance-hints/ @bramus
+guides/ui-atoms/state-aware-sticky-headers/ @bramus
 # Owned via group "scrolling"
 guides/ui-atoms/carousel-slide-effects/ @bramus
 guides/ui-atoms/pull-to-reveal/ @bramus
diff --git a/README.md b/README.md
index 46054f2d5..051a8bf9f 100644
--- a/README.md
+++ b/README.md
@@ -142,7 +142,7 @@ _View an example:_ [the `navigation-drawer` guide](https://github.com/GoogleChro
 </details>
 
 <details>
-<summary><strong>130 real-world developer use cases</strong></summary>
+<summary><strong>131 real-world developer use cases</strong></summary>
 
 <h3>accessibility</h3>
 
@@ -252,6 +252,7 @@ _View an example:_ [the `navigation-drawer` guide](https://github.com/GoogleChro
 - **[scroll-progress-indicator](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-guidance/guides/ui-atoms/scroll-progress-indicator.md)**: Create a scroll progress bar, stepped progress tracker, or any visual affordance that communicates how far through a page or section the user has scrolled.
 - **[scrollability-affordance-hints](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-guidance/guides/ui-atoms/scrollability-affordance-hints.md)**: Build scroll-shadow overlays, gradient fades, or directional arrow indicators that appear only when there's actually more content to scroll to in that direction.
 - **[shrinking-header-on-scroll](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-guidance/guides/ui-atoms/shrinking-header-on-scroll.md)**: Smoothly animate a fixed header or full-page cover on scroll to dynamically shrink, gain shadows, and transform its layout over a predefined scroll distance.
+- **[state-aware-sticky-headers](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-guidance/guides/ui-atoms/state-aware-sticky-headers.md)**: Build sticky section headers or navbars that visually transform when they're actually "stuck" at the top, changing their color scheme or gaining a shadow.
 
 <h3>ui-behaviors</h3>
 
diff --git a/guides/features-and-use-cases.md b/guides/features-and-use-cases.md
index 4a6076495..e541f9eb3 100644
--- a/guides/features-and-use-cases.md
+++ b/guides/features-and-use-cases.md
@@ -45,7 +45,7 @@
 │   └── size-aware-styling
 ├── container-scroll-state-queries
 │   ├── carousel-snap-highlights
-│   ├── context-sensitive-sticky-headers
+│   ├── state-aware-sticky-headers
 │   ├── scroll-position-aware-elements
 │   └── scrollability-affordance-hints
 ├── container-style-queries
diff --git a/guides/ui-atoms/context-sensitive-sticky-headers/expectations.md b/guides/ui-atoms/context-sensitive-sticky-headers/expectations.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/guides/ui-atoms/context-sensitive-sticky-headers/guide.md b/guides/ui-atoms/context-sensitive-sticky-headers/guide.md
deleted file mode 100644
index 0a3fa09e8..000000000
--- a/guides/ui-atoms/context-sensitive-sticky-headers/guide.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-name: context-sensitive-sticky-headers
-description: Build sticky section headers or navbars that visually transform when they're actually "stuck" at the top, collapsing, changing their color scheme, gaining a shadow, or switching to a more compact layout.
-web-feature-ids:
-  - container-scroll-state-queries
----
diff --git a/guides/ui-atoms/context-sensitive-sticky-headers/demo.html b/guides/ui-atoms/state-aware-sticky-headers/demo.html
similarity index 58%
rename from guides/ui-atoms/context-sensitive-sticky-headers/demo.html
rename to guides/ui-atoms/state-aware-sticky-headers/demo.html
index d5a4acb8b..2341c9220 100644
--- a/guides/ui-atoms/context-sensitive-sticky-headers/demo.html
+++ b/guides/ui-atoms/state-aware-sticky-headers/demo.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Context-Sensitive Sticky Headers</title>
+  <title>State-Aware Sticky Headers</title>
   <style>
     body {
       font-family: system-ui, sans-serif;
@@ -13,15 +13,6 @@
       color: #333;
     }
 
-    .scroller {
-      height: 400px;
-      overflow-y: auto;
-      border: 1px solid #ccc;
-      margin: 20px;
-      background: #fff;
-      border-radius: 8px;
-    }
-
     .section {
       padding-bottom: 50px;
     }
@@ -31,6 +22,7 @@
       position: sticky;
       top: 0;
       container-type: scroll-state;
+      container-name: section-header;
       z-index: 10;
     }
 
@@ -40,19 +32,25 @@
       padding: 20px;
       font-size: 1.5rem;
       font-weight: bold;
-      transition: background-color 0.3s, box-shadow 0.3s, padding 0.3s, color 0.3s;
+      transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
     }
 
     /* Target the inner header when the container is stuck */
-    @container scroll-state(stuck: top) {
+    @container section-header scroll-state(stuck: top) {
       .sticky-header {
         background: #0056b3;
         color: white;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.15);
-        padding: 10px 20px; /* Switch to a more compact layout */
+        box-shadow: 0 4px 6px rgb(0 0 0 / 0.15);
       }
     }
 
+    /* Fallback styles for browsers without scroll-state support */
+    .sticky-container.is-stuck .sticky-header {
+      background: #0056b3;
+      color: white;
+      box-shadow: 0 4px 6px rgb(0 0 0 / 0.15);
+    }
+
     .content {
       padding: 20px;
       line-height: 1.6;
@@ -61,8 +59,11 @@
 </head>
 <body>
 
-  <div class="scroller">
-    <div class="section">
+  <nav>
+    <div class="logo">Logo</div>
+  </nav>
+
+  <div class="section">
       <div class="sticky-container">
         <div class="sticky-header">
           Section 1
@@ -97,7 +98,43 @@
         <p>Suspendisse dictum feugiat nisl ut dapibus.</p>
       </div>
     </div>
-  </div>
 
+  <script>
+    // JS Fallback for browsers that don't support scroll-state queries
+    if (!CSS.supports('container-type', 'scroll-state')) {
+      function getScrollParent(node) {
+        if (node == null || node === document.body || node === document.documentElement) {
+          return null; // default to viewport
+        }
+        if (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth) {
+          const overflow = getComputedStyle(node).overflow;
+          if (overflow !== 'visible' && overflow !== 'clip') {
+            return node;
+          }
+        }
+        return getScrollParent(node.parentNode);
+      }
+
+      document.querySelectorAll('.sticky-container').forEach(container => {
+        const root = getScrollParent(container);
+        
+        const topOffset = parseFloat(getComputedStyle(container).top) || 0;
+        
+        const observer = new IntersectionObserver(
+          ([e]) => {
+            // Toggle class when element moves above the top edge
+            e.target.classList.toggle('is-stuck', e.intersectionRatio < 1);
+          },
+          { 
+            root: root,
+            threshold: [1],
+            rootMargin: `-${topOffset + 1}px 0px 0px 0px`
+          }
+        );
+        
+        observer.observe(container);
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/guides/ui-atoms/state-aware-sticky-headers/expectations.md b/guides/ui-atoms/state-aware-sticky-headers/expectations.md
new file mode 100644
index 000000000..965a8d9f4
--- /dev/null
+++ b/guides/ui-atoms/state-aware-sticky-headers/expectations.md
@@ -0,0 +1,7 @@
+- The header container uses `position: sticky` to remain at the top of the scroller.
+- If any of the stuck styles change layout, `overflow-anchor: none` is applied to the parent of the header container.
+- If none of the stuck styles change layout, `overflow-anchor: none` should NOT be applied to the parent of the header container.
+- The header container defines `container-type: scroll-state` to enable scroll state queries.
+- The header container defines `container-name: section-header` to avoid collisions.
+- The header visual style changes (e.g., background color or box-shadow) when it is stuck at the top.
+- The visual style changes are implemented using the `@container scroll-state(stuck: top)` query.
diff --git a/guides/ui-atoms/state-aware-sticky-headers/grader.ts b/guides/ui-atoms/state-aware-sticky-headers/grader.ts
new file mode 100644
index 000000000..891586efd
--- /dev/null
+++ b/guides/ui-atoms/state-aware-sticky-headers/grader.ts
@@ -0,0 +1,355 @@
+import { test, expect } from '../../test-fixture.ts';
+import * as fs from 'fs';
+import * as path from 'path';
+
+// Setup
+const targetFile = process.env.TARGET_FILE;
+if (!targetFile) {
+  throw new Error('TARGET_FILE environment variable not set.');
+}
+
+const filePath = path.resolve(targetFile);
+const targetDir = path.dirname(filePath);
+const demoName = path.basename(filePath);
+
+test.use({
+  launchOptions: {
+    args: ['--enable-experimental-web-platform-features'],
+  },
+});
+
+test.describe(`State-Aware Sticky Headers Expectations: ${demoName}`, () => {
+
+  test.beforeEach(async ({ page, TARGET_URL }) => {
+    if (TARGET_URL.startsWith('http://localhost/')) {
+      await page.route('http://localhost/**', async (route) => {
+        const requestPath = new URL(route.request().url()).pathname;
+        const localFilePath = path.join(targetDir, requestPath === '/' ? demoName : requestPath);
+
+        if (fs.existsSync(localFilePath)) {
+          await route.fulfill({ path: localFilePath });
+        } else {
+          await route.continue();
+        }
+      });
+    }
+    await page.goto(TARGET_URL);
+  });
+
+  test('Header container should use position: sticky', async ({ page }) => {
+    const elements = page.locator('.sticky-container');
+    const count = await elements.count();
+    expect(count).toBeGreaterThan(0);
+    for (let i = 0; i < count; i++) {
+      const position = await elements.nth(i).evaluate(el => getComputedStyle(el).position);
+      expect(position).toBe('sticky');
+    }
+  });
+
+  test('Header container should define container-type: scroll-state', async ({ page }) => {
+    const elements = page.locator('.sticky-container');
+    const count = await elements.count();
+    expect(count).toBeGreaterThan(0);
+    for (let i = 0; i < count; i++) {
+      const containerType = await elements.nth(i).evaluate(el => {
+        // @ts-ignore
+        return getComputedStyle(el).containerType || getComputedStyle(el).getPropertyValue('container-type');
+      });
+      expect(containerType).toContain('scroll-state');
+    }
+  });
+
+  test('Header container should define a container-name', async ({ page }) => {
+    const elements = page.locator('.sticky-container');
+    const count = await elements.count();
+    expect(count).toBeGreaterThan(0);
+    for (let i = 0; i < count; i++) {
+      const containerName = await elements.nth(i).evaluate(el => {
+        // @ts-ignore
+        return getComputedStyle(el).containerName || getComputedStyle(el).getPropertyValue('container-name');
+      });
+      expect(containerName).toBeTruthy();
+      expect(containerName).not.toBe('none');
+    }
+  });
+
+  test('Header visual style should change when stuck at the top', async ({ page }) => {
+    const header = page.locator('.sticky-header').first();
+    
+    // Ensure we start at the top (unstuck)
+    await page.evaluate(() => window.scrollTo(0, 0));
+    
+    // Wait for header to be at its natural position (top > 0)
+    await page.waitForFunction(() => {
+      const el = document.querySelector('.sticky-header');
+      if (!el) return false;
+      return el.getBoundingClientRect().top > 0;
+    }, { timeout: 5000 });
+
+    const headerRect = await header.evaluate(el => {
+      const r = el.getBoundingClientRect();
+      return { top: r.top + window.scrollY, height: r.height };
+    });
+
+    const initialStyles = await header.evaluate(el => {
+      const style = getComputedStyle(el);
+      return {
+        backgroundColor: style.backgroundColor,
+      };
+    });
+
+    // Assert header is actually unstuck
+    expect(headerRect.top).toBeGreaterThan(0);
+
+    // Scroll to make it stick (past its natural position)
+    await page.evaluate((args) => {
+      window.scrollTo(0, args.top + args.height + 50);
+    }, headerRect);
+
+    // Wait for style change (polling)
+    await page.waitForFunction((args) => {
+      const el = document.querySelector(args.selector);
+      if (!el) return false;
+      const style = getComputedStyle(el);
+      
+      // Check for blue-ish color (high blue channel)
+      const rgb = style.backgroundColor.match(/\d+/g);
+      const isBlue = rgb ? (Number(rgb[2]) > Number(rgb[0]) && Number(rgb[2]) > Number(rgb[1]) && Number(rgb[2]) > 100) : false;
+      
+      // Check that background changed AND it is blue
+      return style.backgroundColor !== args.initialBg && isBlue;
+    }, { 
+      selector: '.sticky-header', 
+      initialBg: initialStyles.backgroundColor
+    }, { timeout: 5000 });
+
+    const stuckStyles = await header.evaluate(el => {
+      const style = getComputedStyle(el);
+      return {
+        backgroundColor: style.backgroundColor,
+      };
+    });
+
+    // Assert specific changes
+    expect(stuckStyles.backgroundColor).not.toBe(initialStyles.backgroundColor);
+    
+    const rgb = stuckStyles.backgroundColor.match(/\d+/g);
+    const isBlue = rgb ? (Number(rgb[2]) > Number(rgb[0]) && Number(rgb[2]) > Number(rgb[1]) && Number(rgb[2]) > 100) : false;
+    expect(isBlue).toBe(true);
+
+    // Scroll back to 0 and assert revert
+    await page.evaluate(() => window.scrollTo(0, 0));
+
+    // Wait for style to revert
+    await page.waitForFunction((args) => {
+      const el = document.querySelector(args.selector);
+      if (!el) return false;
+      const style = getComputedStyle(el);
+      return style.backgroundColor === args.initialBg;
+    }, { 
+      selector: '.sticky-header', 
+      initialBg: initialStyles.backgroundColor
+    }, { timeout: 5000 });
+  });
+
+  test('Layout-affecting stuck styles require overflow-anchor: none on the sticky parent', async ({ page }) => {
+    const container = page.locator('.sticky-container').first();
+
+    // Ensure we start unstuck
+    await page.evaluate(() => window.scrollTo(0, 0));
+    await page.waitForFunction(() => {
+      const el = document.querySelector('.sticky-container');
+      if (!el) return false;
+      return el.getBoundingClientRect().top > 0;
+    }, { timeout: 5000 });
+
+    // Deliberately conservative: some of these only cause anchoring
+    // oscillation in some layouts, but a binary check cannot cheaply
+    // test actual flicker, so any layout-affecting change counts.
+    const LAYOUT_PROPS = [
+      'height', 'minHeight', 'lineHeight',
+      'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight',
+      'marginTop', 'marginBottom', 'fontSize',
+      'borderTopWidth', 'borderBottomWidth',
+    ];
+
+    const readLayout = () => page.evaluate((props) => {
+      const pick = (el: Element) => {
+        const style = getComputedStyle(el);
+        return props.map((prop) => String(style[prop as keyof CSSStyleDeclaration])).join('|');
+      };
+      const containerEl = document.querySelector('.sticky-container');
+      if (!containerEl) return '';
+      const headerEl = containerEl.querySelector('.sticky-header') || containerEl;
+      return pick(containerEl) + '||' + pick(headerEl);
+    }, LAYOUT_PROPS);
+
+    const unstuck = await readLayout();
+
+    const containerRect = await container.evaluate(el => {
+      const r = el.getBoundingClientRect();
+      return { top: r.top + window.scrollY, height: r.height };
+    });
+
+    // Scroll halfway into the container so it is unambiguously stuck
+    await page.evaluate((args) => {
+      window.scrollTo(0, args.top + args.height / 2);
+    }, containerRect);
+
+    // Give the two-pass scroll-state update a moment to settle
+    await page.waitForTimeout(500);
+
+    const stuck = await readLayout();
+    const layoutChanged = stuck !== unstuck;
+
+    const parentOverflowAnchor = await container.evaluate(el =>
+      getComputedStyle(el.parentElement!).overflowAnchor
+    );
+
+    if (layoutChanged) {
+      // The guide requires disabling scroll anchoring on the parent when
+      // stuck styles change layout, otherwise the header oscillates.
+      expect(parentOverflowAnchor).toBe('none');
+    } else {
+      // No layout change means scroll anchoring must stay enabled.
+      expect(parentOverflowAnchor).not.toBe('none');
+    }
+  });
+
+  test('Visual style changes should be implemented using @container scroll-state(...)', async ({ page }) => {
+    const hasScrollStateQuery = await page.evaluate(() => {
+      const sheets = Array.from(document.styleSheets);
+      return sheets.some(sheet => {
+        try {
+          const rules = Array.from(sheet.cssRules);
+          return rules.some(rule => {
+            // @ts-ignore - conditionText might not be on all rules
+            const condition = rule.conditionText || '';
+            const normalized = condition.replace(/\s+/g, '');
+            const hasScrollState = normalized.includes('scroll-state');
+            const hasValidStuck = normalized.includes('stuck:top') || 
+                                  normalized.includes('stuck:inset-block-start') || 
+                                  normalized.includes('stuck:inset-inline-start');
+            
+            if (hasScrollState && hasValidStuck) {
+              return true;
+            }
+            
+            // Some browsers might not put it in conditionText but we can check the constructor name or other props
+            if (rule.constructor.name === 'CSSContainerRule') {
+               const cssText = rule.cssText.replace(/\s+/g, '');
+               const hasCssScrollState = cssText.includes('scroll-state');
+               const hasCssValidStuck = cssText.includes('stuck:top') || 
+                                        cssText.includes('stuck:inset-block-start') || 
+                                        cssText.includes('stuck:inset-inline-start');
+               return hasCssScrollState && hasCssValidStuck;
+            }
+            return false;
+          });
+        } catch (e) {
+          return false;
+        }
+      });
+    });
+    expect(hasScrollStateQuery).toBe(true);
+  });
+
+  test('Stuck styles must come from the container query, not JS', async ({ page }) => {
+    const header = page.locator('.sticky-header').first();
+    
+    const headerRect = await header.evaluate(el => {
+      const r = el.getBoundingClientRect();
+      return { top: r.top + window.scrollY, height: r.height };
+    });
+
+    const initialStyles = await header.evaluate(el => {
+      const style = getComputedStyle(el);
+      return {
+        backgroundColor: style.backgroundColor,
+      };
+    });
+
+    // Scroll to stick (past its natural position)
+    await page.evaluate((args) => {
+      window.scrollTo(0, args.top + args.height + 50);
+    }, headerRect);
+
+    // Wait for style change
+    await page.waitForFunction((args) => {
+      const el = document.querySelector(args.selector);
+      if (!el) return false;
+      const style = getComputedStyle(el);
+      return style.backgroundColor !== args.initialBg;
+    }, { selector: '.sticky-header', initialBg: initialStyles.backgroundColor }, { timeout: 5000 });
+
+    // Delete the container query rule (recursively)
+    await page.evaluate(() => {
+      function deleteRuleRecursive(ruleList: any, sheetOrParent: any) {
+        for (let i = ruleList.length - 1; i >= 0; i--) {
+          const r = ruleList[i];
+          // @ts-ignore
+          const condition = r.conditionText || '';
+          const normalized = condition.replace(/\s+/g, '');
+          
+          const hasValidStuck = normalized.includes('stuck:top') || 
+                                normalized.includes('stuck:inset-block-start') || 
+                                normalized.includes('stuck:inset-inline-start');
+          
+          if (normalized.includes('scroll-state') && hasValidStuck) {
+            // Delete the rule from its parent list
+            // @ts-ignore
+            sheetOrParent.deleteRule(i);
+          } else if (r.cssRules) {
+            deleteRuleRecursive(r.cssRules, r);
+          }
+        }
+      }
+
+      for (const sheet of Array.from(document.styleSheets)) {
+        try {
+          deleteRuleRecursive(sheet.cssRules, sheet);
+        } catch {}
+      }
+    });
+
+    // Assert styles revert to initial
+    await page.waitForFunction((args) => {
+      const el = document.querySelector(args.selector);
+      if (!el) return false;
+      const style = getComputedStyle(el);
+      return style.backgroundColor === args.initialBg;
+    }, { 
+      selector: '.sticky-header', 
+      initialBg: initialStyles.backgroundColor
+    }, { timeout: 5000 });
+
+    // Second arm: scroll away and back and verify it DOES NOT re-acquire stuck styles
+    await page.evaluate(() => window.scrollTo(0, 0));
+    await page.waitForTimeout(300); // let any scroll handler run
+    
+    await page.evaluate((args) => {
+      window.scrollTo(0, args.top + args.height + 50);
+    }, headerRect);
+    await page.waitForTimeout(300);
+
+    const stillHasStuckLook = await header.evaluate((el, args) => {
+      const style = getComputedStyle(el);
+      return style.backgroundColor !== args.initialBg;
+    }, { initialBg: initialStyles.backgroundColor });
+
+    expect(stillHasStuckLook).toBe(false);
+  });  test('Existing navigation bar should remain intact', async ({ page }) => {
+    const nav = page.locator('nav').first();
+    await expect(nav).toBeVisible();
+    
+    const logo = page.locator('nav .logo');
+    await expect(logo).toBeVisible();
+    
+    const containerType = await nav.evaluate(el => {
+      // @ts-ignore
+      return getComputedStyle(el).containerType || getComputedStyle(el).getPropertyValue('container-type');
+    });
+    expect(containerType).not.toContain('scroll-state');
+  });
+
+});
diff --git a/guides/ui-atoms/state-aware-sticky-headers/guide.md b/guides/ui-atoms/state-aware-sticky-headers/guide.md
new file mode 100644
index 000000000..0f820169d
--- /dev/null
+++ b/guides/ui-atoms/state-aware-sticky-headers/guide.md
@@ -0,0 +1,146 @@
+---
+name: state-aware-sticky-headers
+description: Build sticky section headers or navbars that visually transform when they're actually "stuck" at the top, changing their color scheme or gaining a shadow.
+web-feature-ids:
+  - container-scroll-state-queries
+sources:
+  - https://webstatus.dev/features/container-scroll-state-queries
+---
+
+# State-Aware Sticky Headers
+
+Sticky headers are a common UI pattern, but they often need to change their appearance when they become "stuck" to maintain readability or save space. Traditional solutions required JavaScript scroll listeners, which can cause performance issues. Modern CSS allows you to handle this natively using **Scroll State Queries**.
+
+## Implementation Steps
+
+### 1. Create the Sticky Container
+You need a container that will act as the sticky element and the container for the scroll state query.
+
+```html
+<!-- Wrap in a section to define the containment area for the sticky element -->
+<div class="section">
+  <div class="sticky-container">
+    <div class="sticky-header">
+      Section Header
+    </div>
+  </div>
+  <div class="content">
+    <!-- Content goes here -->
+  </div>
+</div>
+```
+
+### 2. Apply CSS for Sticky Behavior and Container Type
+Set `container-type: scroll-state` on the `position: sticky` element, not on its scrollable ancestor. Always specify a `container-name`, since these queries may be nested and unnamed containers will collide. You can also combine it with size queries, e.g., `container-type: scroll-state inline-size`.
+
+```css
+.sticky-container {
+  position: sticky;
+  top: 0;
+  /* MANDATORY: Always specify a container name to avoid collisions if CQs are nested */
+  container-type: scroll-state;
+  container-name: section-header;
+  z-index: 10;
+}
+
+.sticky-header {
+  /* Base styles for the header */
+  background: #f0f0f0;
+  padding: 20px;
+  transition: background-color 0.3s, box-shadow 0.3s;
+}
+```
+
+**Important:** The scroll state is queried by **descendants** of the scroll-state container. The styles in the `@container` query will not apply to the `.sticky-container` itself, but to its children (like `.sticky-header`). You cannot style the container element itself with its own scroll-state query.
+
+
+### 3. Target the Stuck State
+Use the `@container scroll-state(...)` query to apply styles when the header is stuck.
+
+```css
+/* Apply styles when the named container is stuck at the top */
+@container section-header scroll-state(stuck: top) {
+  .sticky-header {
+    background: #0056b3;
+    color: white;
+    box-shadow: 0 4px 6px rgb(0 0 0 / 0.15);
+  }
+}
+```
+
+**Tip:** You can also use logical properties like `stuck: inset-block-start` or `stuck: inset-inline-start` to better support internationalization (i18n) and right-to-left (RTL) layouts by querying flow-relative edges rather than physical ones.
+
+### Notes on Dimension Changes
+
+Without scroll anchoring disabled, changing layout-affecting properties (height, padding, font-size) when stuck can cause visual flickering. Scroll anchoring on the in-flow content below the sticky element adjusts the scroll offset to compensate for the layout change, which pushes the element back out of its stuck position and triggers an oscillation.
+
+Disable scroll anchoring on the parent of the sticky element to avoid this:
+
+```css
+.section {
+  overflow-anchor: none;
+}
+```
+
+Apply `overflow-anchor: none` to the direct parent of the `position: sticky` element, not to `:root` or `body`, which would disable scroll anchoring for the entire page. With this in place, you can freely change any property in the stuck state, including box-model properties and transforms.
+
+DO NOT: Rely on `overflow-anchor: none` for elements stuck to the **bottom**. Scroll anchoring only compensates for layout shifts above the current scroll position, so it has no effect on bottom-stuck elements. Avoid changing box-model properties in the stuck state for bottom-stuck headers.
+
+### Fallback strategies
+{{ BASELINE_STATUS("container-scroll-state-queries") }}
+
+Scroll state queries are a progressive enhancement. In browsers that do not support `container-type: scroll-state`, the header will still stick to the top (due to `position: sticky`), but it will not visually transform. For most use cases, this is the recommended approach.
+
+If stickiness is not essential, but `position: sticky` without different styling would be a worse experience than no stickiness at all, you can wrap the `position: sticky` and related declaration in an `@supports` query as well:
+
+```css
+.sticky-container {
+  @supports (container-type: scroll-state) {
+	  position: sticky;
+	  top: 0;
+	  container-type: scroll-state;
+	  container-name: section-header;
+	  z-index: 10;
+	}
+}
+```
+**Tip:** If your "stuck" styling requires a different background color for readability, consider setting your layout up so that the default styling works everywhere (Progressive Enhancement). If you must use a fallback, you can gate the `position: sticky` behaviour itself inside an `@supports (container-type: scroll-state)` query.
+
+If the visual transformation is absolutely critical to the design (e.g., the stuck state introduces a background or compaction without which the content is unreadable), you can implement a robust JavaScript fallback using `IntersectionObserver`. You must duplicate your CSS styles under an `.is-stuck` class. The following generic polyfill checks `getComputedStyle` to traverse up and find the correct scroll container (defaulting to the viewport), matching the behavior of `@container scroll-state(stuck: top)`:
+
+```javascript
+function getScrollParent(node) {
+  if (node == null || node === document.body || node === document.documentElement) {
+    return null; // default to viewport
+  }
+  if (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth) {
+    const overflow = getComputedStyle(node).overflow;
+    if (overflow !== 'visible' && overflow !== 'clip') {
+      return node;
+    }
+  }
+  return getScrollParent(node.parentNode);
+}
+
+document.querySelectorAll('.sticky-container').forEach(container => {
+  const root = getScrollParent(container);
+  
+  const topOffset = parseFloat(getComputedStyle(container).top) || 0;
+  
+  const observer = new IntersectionObserver(
+    ([e]) => {
+      // Toggle the fallback class on the sticky header container
+      e.target.classList.toggle('is-stuck', e.intersectionRatio < 1);
+    },
+    { 
+      root: root,
+      threshold: [1],
+      rootMargin: `-${topOffset + 1}px 0px 0px 0px` 
+    }
+  );
+  
+  observer.observe(container);
+});
+```
+
+*Note: This generic IntersectionObserver pattern can also be used as a polyfill for the `scroll-state(scrollable)` query.*
diff --git a/guides/ui-atoms/state-aware-sticky-headers/negative-demo.html b/guides/ui-atoms/state-aware-sticky-headers/negative-demo.html
new file mode 100644
index 000000000..1ad9da93c
--- /dev/null
+++ b/guides/ui-atoms/state-aware-sticky-headers/negative-demo.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Legacy Header Implementation</title>
+  <style>
+    body {
+      font-family: serif;
+      margin: 0;
+      padding: 0;
+      background: #fff;
+      color: #000;
+    }
+
+    .header-wrapper {
+      width: 100%;
+      z-index: 9999;
+    }
+
+    .header-content {
+      background: #ccc;
+      padding: 40px;
+      font-size: 32px;
+      text-align: center;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .fixed {
+      position: fixed;
+      top: 0;
+      left: 0;
+      padding: 10px;
+      font-size: 18px;
+      background: #222;
+      color: #fff;
+    }
+
+    .spacer {
+      height: 120px;
+      display: none;
+    }
+
+    .show-spacer {
+      display: block;
+    }
+
+    .content-area {
+      padding: 50px;
+      background: #eee;
+    }
+
+    .block {
+      height: 400px;
+      margin-bottom: 20px;
+      border: 5px solid red;
+    }
+  </style>
+</head>
+<body>
+
+  <div id="header" class="header-wrapper">
+    <div class="header-content">
+      Old School Header
+    </div>
+  </div>
+  <div id="spacer" class="spacer"></div>
+
+  <div class="content-area">
+    <div class="block">Content Block 1</div>
+    <div class="block">Content Block 2</div>
+    <div class="block">Content Block 3</div>
+    <div class="block">Content Block 4</div>
+    <div class="block">Content Block 5</div>
+  </div>
+
+  <script>
+    window.onscroll = function() {
+      var header = document.getElementById("header");
+      var spacer = document.getElementById("spacer");
+      if (window.pageYOffset > 50) {
+        header.classList.add("fixed");
+        spacer.classList.add("show-spacer");
+        document.body.style.paddingTop = "10px";
+      } else {
+        header.classList.remove("fixed");
+        spacer.classList.remove("show-spacer");
+        document.body.style.paddingTop = "0px";
+      }
+    };
+  </script>
+</body>
+</html>
diff --git a/guides/ui-atoms/state-aware-sticky-headers/tasks/task.md b/guides/ui-atoms/state-aware-sticky-headers/tasks/task.md
new file mode 100644
index 000000000..4f52d2c3e
--- /dev/null
+++ b/guides/ui-atoms/state-aware-sticky-headers/tasks/task.md
@@ -0,0 +1,5 @@
+---
+base_app: daily-grind
+---
+- Add new section headers inside the main content area of the page (e.g., within the cards or sections). These headers should stick to the top when scrolling. Use the class `sticky-container` for the container and `sticky-header` for the header. To avoid collisions with the existing site navigation, use a named container. When the headers are stuck at the top, change their background color to blue, add a shadow, and reduce their padding so they take up less room. Ensure there is enough scrollable content *above* the first sticky header so that it is not stuck on initial page load. The implementation should assume the document/viewport is the scroll root.
+- Add sticky headers to the main sections of the page that stick to the top of the viewport as I scroll down. I want them to look compact and distinct when they are stuck, maybe a blue background with a shadow. Please use modern CSS container queries instead of Javascript so it's performant. Ensure there is enough scrollable content *above* the first sticky header so that it is not stuck on initial page load.