diff --git a/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor b/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor
index de6f496f..558ae5e9 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor
+++ b/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor
@@ -153,13 +153,16 @@
         }
 
         @* Wide Layout: Apply full-width layout class for pages that opt out of the right TOC. *@
-        <main class="main-area @(IsWideLayoutPage ? "main-area-full-width" : "")">
+        <main class="main-area @(IsWideLayoutPage || IsAccessibilityPage ? "main-area-full-width" : "")">
             <article class="page-content">
                 <CascadingValue Value="CurrentChartTheme">
                     @* Cascade the TOC holder to @Body so the rendered page can publish its section list
                        into the same instance the right sidebar reads from. *@
                     <CascadingValue Value="@_tocHolder">
-                        <SfBreadcrumb />
+                        @if (!IsAccessibilityPage)
+                        {
+                            <SfBreadcrumb />
+                        }
                         @Body
                         <PageFooter />
                     </CascadingValue>
@@ -171,7 +174,7 @@
            RightToc pulls the holder via [CascadingParameter] and subscribes to its Changed event directly,
            so no wrapper component is needed. The same holder instance is shared with @Body above. *@
         @* Wide Layout: Right panel is visible only on desktop and tablet, and hidden on wide-layout pages. *@
-        @if (!IsMobile && !IsTablet && !IsWideLayoutPage)
+        @if (!IsMobile && !IsTablet && !IsWideLayoutPage && !IsAccessibilityPage)
         {
             <CascadingValue Value="@_tocHolder">
                 <aside class="right-panel">
@@ -233,6 +236,9 @@
     private DotNetObjectReference<MainLayout>? _dotNetRef;
 
     // Wide Layout: Track pages that should use full-width layout without the right TOC (e.g. Explore, Release Notes)
+    private bool IsAccessibilityPage =>
+        Nav.Uri.Contains("/common/accessibility", StringComparison.OrdinalIgnoreCase);
+
     private bool IsWideLayoutPage =>
         Nav.Uri.Contains("/explore", StringComparison.OrdinalIgnoreCase) ||
         Nav.Uri.Contains("/release-notes", StringComparison.OrdinalIgnoreCase) ||
diff --git a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor
index e72176cb..7a6db794 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor
+++ b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor
@@ -45,6 +45,12 @@
                 ============================================================ *@
                 <li class="sf-sidebar-group-label" aria-hidden="true">Common</li>
 
+                <li class="sf-nav-item sf-sub-item @(IsActive("common/accessibility") ? "is-active" : "")">
+                    <NavLink class="sf-nav-link" href="common/accessibility" Match="NavLinkMatch.All">
+                        <span class="sf-menu-icon" aria-hidden="true"><svg class="accessibility-menu-icon" viewBox="0 0 24 24" focusable="false"><circle cx="12" cy="4" r="2" fill="currentColor"/><path d="M5 8.5A1.5 1.5 0 0 1 6.5 7h11a1.5 1.5 0 0 1 0 3h-3l1.2 4.2 2.2 4a1.5 1.5 0 0 1-2.6 1.5L12 15.5l-3.3 4.2a1.5 1.5 0 1 1-2.4-1.8l3.1-4L10.5 10h-4A1.5 1.5 0 0 1 5 8.5Z" fill="currentColor"/></svg></span>
+                        <span>Accessibility</span>
+                    </NavLink>
+                </li>
                 <li class="sf-nav-item sf-sub-item @(IsActive("common/right-to-left") ? "is-active" : "")">
                     <NavLink class="sf-nav-link" href="common/right-to-left" Match="NavLinkMatch.All">
                         <span class="e-toolkit-icons e-right-left sf-menu-icon" aria-hidden="true"></span>
diff --git a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor.css b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor.css
index c9d091d1..b557e566 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor.css
+++ b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor.css
@@ -278,6 +278,7 @@
 /* ====================================================================
    ROW ICONS (col 2)
    ==================================================================== */
+.accessibility-menu-icon { display: block; width: 18px; height: 18px; }
 .sf-menu-icon {
     grid-column: 2;
     width: var(--sf-sidebar-icon-w);
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor
new file mode 100644
index 00000000..96607026
--- /dev/null
+++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor
@@ -0,0 +1,163 @@
+@page "/common/accessibility"
+
+<PageTitle>Accessibility | Syncfusion Blazor Toolkit</PageTitle>
+
+<div class="accessibility-page" aria-labelledby="accessibility-title">
+    <nav class="accessibility-breadcrumb" aria-label="Breadcrumb">
+        <a href="/">Home</a><span aria-hidden="true">/</span>
+        <span>Common</span><span aria-hidden="true">/</span>
+        <span aria-current="page">Accessibility</span>
+    </nav>
+
+    <div class="accessibility-layout">
+        <div class="accessibility-main">
+            <header class="accessibility-hero" id="overview">
+                <div class="hero-copy">
+                    <h1 id="accessibility-title">Accessibility</h1>
+                    <p class="hero-subtitle">Build inclusive, standards-compliant Blazor applications with confidence.</p>
+                    <div class="feature-badges" role="group" aria-label="Accessibility highlights">
+                        <div class="feature-badge badge-green">
+                            <span class="badge-symbol" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="m9.2 16.2-4-4 1.7-1.7 2.3 2.3 7-7 1.7 1.7z"/><path d="M12 2 3.5 5.5v6.1c0 5.1 3.6 8.7 8.5 10.4 4.9-1.7 8.5-5.3 8.5-10.4V5.5z"/></svg></span>
+                            <span><strong>WCAG 2.2 AA</strong><small>Standards compliant</small></span>
+                        </div>
+                        <div class="feature-badge badge-blue">
+                            <span class="badge-symbol" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M3 5h2v3H3zm4 0h2v3H7zm4 0h2v3h-2zm4 0h2v3h-2zm4 0h2v3h-2zM3 10h3v3H3zm5 0h3v3H8zm5 0h3v3h-3zm5 0h3v3h-3zM4 16h16v3H4z"/></svg></span>
+                            <span><strong>Keyboard Accessible</strong><small>Full navigation support</small></span>
+                        </div>
+                        <div class="feature-badge badge-purple">
+                            <span class="badge-symbol" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m-5 4v1.8h3l-1 2.2v4h2v-3l1-2 1 2v3h2v-4l-1-2.2h3v-1.8z"/></svg></span>
+                            <span><strong>Screen Reader Ready</strong><small>Validated with leading tools</small></span>
+                        </div>
+                        <div class="feature-badge badge-amber">
+                            <span class="badge-symbol sun-symbol" aria-hidden="true">☀</span>
+                            <span><strong>High Contrast Support</strong><small>Works in all contrast modes</small></span>
+                        </div>
+                    </div>
+                </div>
+                <div class="hero-art" role="img" aria-label="Illustration of an accessible application window with accessibility controls">
+                    <div class="hero-orbit orbit-one"></div><div class="hero-orbit orbit-two"></div>
+                    <div class="hero-window">
+                        <div class="window-bar"><i></i><i></i><i></i></div>
+                        <div class="accessibility-mark"><svg viewBox="0 0 64 64" aria-hidden="true"><circle cx="32" cy="32" r="30"/><circle class="person" cx="32" cy="17" r="4"/><path class="person" d="M18 25h28v4H35l-2 9 7 13h-5l-5-9-5 9h-5l7-14-2-8H18z"/></svg></div>
+                    </div>
+                    <div class="hero-leaf leaf-a"></div><div class="hero-leaf leaf-b"></div><div class="hero-leaf leaf-c"></div>
+                    <div class="hero-caption"><span aria-hidden="true">♥</span><span><strong>Accessible.</strong><small>For Everyone.</small></span></div>
+                </div>
+            </header>
+
+            <section class="why-section" aria-labelledby="why-accessibility">
+                <h2 id="why-accessibility">Why Accessibility Matters</h2>
+                <p class="section-intro">We are committed to making the web more inclusive. Syncfusion Blazor Toolkit follows modern accessibility standards to ensure our components can be used by everyone, everywhere.</p>
+                <div class="feature-grid" aria-label="Accessibility features">
+                    @foreach (var feature in Features)
+                    {
+                        <article class="feature-card">
+                            <span class="feature-icon @feature.IconClass" aria-hidden="true">@((MarkupString)feature.Icon)</span>
+                            <div><h3>@feature.Title</h3><p>@feature.Description</p></div>
+                        </article>
+                    }
+                </div>
+            </section>
+
+            <div class="detail-grid">
+                <section class="detail-card standards-card" id="standards" aria-labelledby="standards-title">
+                    <h2 id="standards-title"><span class="detail-icon" aria-hidden="true">✓</span>Standards Compliance</h2>
+                    <ul class="standards-list">
+                        <li><span class="success-check" aria-hidden="true">✓</span><span>WCAG 2.2</span><span class="standard-status">Level AA</span></li>
+                        <li><span class="success-check" aria-hidden="true">✓</span><span>ADA</span><span class="standard-status">Supported</span></li>
+                        <li><span class="success-check" aria-hidden="true">✓</span><span>Section 508</span><span class="standard-status">Supported</span></li>
+                        <li><span class="success-check" aria-hidden="true">✓</span><span>EN 301 549</span><span class="standard-status">Supported</span></li>
+                        <li><span class="success-check" aria-hidden="true">✓</span><span>WAI-ARIA</span><span class="standard-status">Supported</span></li>
+                    </ul>
+                </section>
+
+                <section class="detail-card screen-reader-card" id="screen-readers" aria-labelledby="screen-reader-title">
+                    <h2 id="screen-reader-title"><span class="detail-icon" aria-hidden="true">◖</span>Screen Reader Compatibility</h2>
+                    <div class="reader-list">
+                        <div class="reader-tile"><span class="windows-icon" aria-hidden="true">▦</span><strong>NVDA</strong></div>
+                        <div class="reader-tile"><span class="narrator-icon" aria-hidden="true">◀</span><strong>Narrator</strong></div>
+                    </div>
+                    <p class="reader-note">Validated with supported screen readers.</p>
+                </section>
+
+                <section class="detail-card shortcuts-card" id="keyboard-shortcuts" aria-labelledby="shortcuts-title">
+                    <h2 id="shortcuts-title"><span class="detail-icon keyboard-icon" aria-hidden="true">⌨</span>Keyboard Shortcuts</h2>
+                    <p class="keyboard-note">Keyboard interactions vary across components. The shortcuts below represent commonly used navigation patterns. Refer to each component’s accessibility documentation for detailed keyboard support.</p>
+                    <dl class="shortcut-list">
+                        <div><dt><kbd>Tab</kbd></dt><dd>Move to next element</dd></div>
+                        <div><dt><kbd>Shift + Tab</kbd></dt><dd>Move to previous element</dd></div>
+                        <div><dt><kbd>Enter</kbd></dt><dd>Activate focused item</dd></div>
+                        <div><dt><kbd>Space</kbd></dt><dd>Trigger action</dd></div>
+                        <div><dt><kbd>Esc</kbd></dt><dd>Close popup, dialog or menu</dd></div>
+                    </dl>
+                </section>
+            </div>
+
+            <section class="theme-showcase" id="theme-preview" aria-labelledby="theme-title">
+                <div class="theme-heading">
+                    <span class="theme-heading-icon" aria-hidden="true">◉</span>
+                    <div><h2 id="theme-title">Theme Preview</h2><p>Experience accessible UI in different themes.</p>
+                        <div class="theme-chips" role="group" aria-label="Select a theme preview">
+                            <button type="button" class="@(SelectedTheme == "Light" ? "is-selected" : null)" aria-pressed="@(SelectedTheme == "Light")" @onclick='() => SelectTheme("Light")'>Light</button>
+                            <button type="button" class="@(SelectedTheme == "Dark" ? "is-selected" : null)" aria-pressed="@(SelectedTheme == "Dark")" @onclick='() => SelectTheme("Dark")'>Dark</button>
+                            <button type="button" class="@(SelectedTheme == "High Contrast" ? "is-selected" : null)" aria-pressed="@(SelectedTheme == "High Contrast")" @onclick='() => SelectTheme("High Contrast")'>High Contrast</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="theme-previews" aria-live="polite">
+                    @if (SelectedTheme == "Light")
+                    {
+                        <div class="theme-preview preview-light" aria-label="Light theme preview">
+                            <div class="preview-window"><div class="preview-window-heading"><span class="preview-window-mark" aria-hidden="true">S</span><span><strong>Welcome back</strong><small>Your workspace is ready.</small></span></div><div class="preview-controls"><label class="visually-hidden" for="light-preview-input">Light theme sample text field</label><input id="light-preview-input" type="text" value="Search settings" readonly /><button type="button">Continue</button></div></div>
+                        </div>
+                    }
+                    else if (SelectedTheme == "Dark")
+                    {
+                        <div class="theme-preview preview-dark" aria-label="Dark theme preview">
+                            <div class="preview-window"><div class="preview-window-heading"><span class="preview-window-mark" aria-hidden="true">S</span><span><strong>Welcome back</strong><small>Your workspace is ready.</small></span></div><div class="preview-controls"><label class="visually-hidden" for="dark-preview-input">Dark theme sample text field</label><input id="dark-preview-input" type="text" value="Search settings" readonly /><button type="button">Continue</button></div></div>
+                        </div>
+                    }
+                    else
+                    {
+                        <div class="theme-preview preview-contrast" aria-label="High contrast theme preview">
+                            <div class="preview-window"><div class="preview-window-heading"><span class="preview-window-mark" aria-hidden="true">S</span><span><strong>Welcome back</strong><small>Your workspace is ready.</small></span></div><div class="preview-controls"><label class="visually-hidden" for="contrast-preview-input">High contrast theme sample text field</label><input id="contrast-preview-input" type="text" value="Search settings" readonly /><button type="button">Continue</button></div></div>
+                        </div>
+                    }
+                </div>
+            </section>
+        </div>
+
+        <aside class="verified-panel" aria-labelledby="verified-title">
+            <h2 id="verified-title">Accessibility Verified</h2>
+            <div class="progress-ring" role="img" aria-label="100 percent accessibility verified"><span>100%</span></div>
+            <p class="verified-summary">All key accessibility criteria are supported in Syncfusion Blazor Toolkit.</p>
+            <ul class="verified-list">
+                @foreach (var item in VerifiedItems)
+                {
+                    <li><span aria-hidden="true">✓</span>@item</li>
+                }
+            </ul>
+            <strong class="verified-label">100% Accessibility Verified</strong>
+        </aside>
+    </div>
+</div>
+
+@code {
+    private static readonly FeatureItem[] Features =
+    [
+        new("Keyboard Navigation", "Navigate all components using keyboard with a logical tab order.", "icon-keyboard", "<svg viewBox='0 0 24 24'><path d='M3 5h2v3H3zm4 0h2v3H7zm4 0h2v3h-2zm4 0h2v3h-2zm4 0h2v3h-2zM3 10h3v3H3zm5 0h3v3H8zm5 0h3v3h-3zm5 0h3v3h-3zM4 16h16v3H4z'/></svg>"),
+        new("Screen Reader Support", "Works with NVDA and Narrator.", "icon-speaker", "<svg viewBox='0 0 24 24'><path d='M3 9v6h4l5 4V5L7 9zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4m-2.5-9v2.1a7 7 0 0 1 0 13.8V21a9 9 0 0 0 0-18'/></svg>"),
+        new("High Contrast Theme", "Optimized for Windows high contrast modes.", "icon-contrast", "<svg viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m0 18V4a8 8 0 0 1 0 16'/></svg>"),
+        new("Semantic ARIA", "Implements ARIA roles, states and properties.", "icon-document", "<svg viewBox='0 0 24 24'><path d='M6 2h9l5 5v15H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m8 2v5h5M8 12h9v2H8zm0 4h9v2H8z'/></svg>"),
+        new("400% Zoom Support", "Maintains usability up to 400% zoom level.", "icon-zoom", "<svg viewBox='0 0 24 24'><path d='M10 2a8 8 0 1 0 5.3 14l5 5 1.4-1.4-5-5A8 8 0 0 0 10 2m0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12m-1 2v3H6v2h3v3h2v-3h3V9h-3V6z'/></svg>"),
+        new("Focus Management", "Visible focus indicators and accessible interaction patterns.", "icon-focus", "<svg viewBox='0 0 24 24'><path d='M8 2H4a2 2 0 0 0-2 2v4h2V4h4zm8 0h4a2 2 0 0 1 2 2v4h-2V4h-4zM2 16v4a2 2 0 0 0 2 2h4v-2H4v-4zm20 0v4a2 2 0 0 1-2 2h-4v-2h4v-4zM12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10m0 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4'/></svg>")
+    ];
+
+    private static readonly string[] VerifiedItems = ["WCAG 2.2", "ARIA Support", "Keyboard Navigation", "Screen Readers", "High Contrast", "Focus Management"];
+
+    private string SelectedTheme { get; set; } = "Light";
+
+    private void SelectTheme(string theme) => SelectedTheme = theme;
+
+    private sealed record FeatureItem(string Title, string Description, string IconClass, string Icon);
+}
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css
new file mode 100644
index 00000000..994665e2
--- /dev/null
+++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Common/Accessibility.razor.css
@@ -0,0 +1,90 @@
+.accessibility-page {
+    --a11y-ink: #102044;
+    --a11y-muted: #526487;
+    --a11y-blue: #0879f9;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 4px 20px 28px;
+    color: var(--a11y-ink);
+    font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;
+}
+
+.accessibility-breadcrumb { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; color: #607293; font-size: 12px; }
+.accessibility-breadcrumb a { color: #435c85; text-decoration: none; }
+.accessibility-breadcrumb a:hover { text-decoration: underline; }
+.accessibility-breadcrumb [aria-current="page"] { color: var(--a11y-ink); font-weight: 600; }
+.accessibility-layout { position: relative; display: block; }
+.accessibility-main { width: calc(100% - 280px); min-width: 0; }
+.accessibility-hero { min-height: 190px; position: relative; display: block; }
+.hero-copy { min-width: 0; width: 100%; padding-top: 0; }
+.accessibility-hero h1 { margin: 0 0 2px; color: #102044; font-size: clamp(34px, 3vw, 46px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
+.hero-subtitle { margin: 0 0 16px; color: #4c6085; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.35; }
+.feature-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 900px; }
+.feature-badge { min-width: 0; min-height: 72px; box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid transparent; border-radius: 18px; color: #102044; }
+.feature-badge > span:last-child { min-width: 0; flex: 1 1 auto; }
+.feature-badge strong,.feature-badge small { display: block; white-space: normal; overflow-wrap: anywhere; }
+.feature-badge strong { min-height: 2.25em; display: flex; align-items: center; font-size: 12px; font-weight: 700; line-height: 1.15; }
+.feature-badge small { min-height: 2.4em; margin-top: 3px; color: #4e6387; font-size: 11px; line-height: 1.2; }
+.feature-badge .badge-symbol { flex: 0 0 31px; }
+.badge-green { background: #e8f5e9; }.badge-blue { background: #e7f1ff; }.badge-purple { background: #f0eaff; }.badge-amber { background: #fff3d0; }
+.badge-symbol { flex: 0 0 31px; width: 31px; height: 31px; display: grid; place-items: center; color: white; }
+.badge-symbol svg { width: 30px; height: 30px; fill: currentColor; }.badge-green .badge-symbol { color: #138a3c; }.badge-blue .badge-symbol { color: #0879f9; }.badge-purple .badge-symbol { color: #6424e8; }
+.badge-amber .sun-symbol { color: #f0a000; font-size: 32px; line-height: 1; }
+.hero-art { width: 270px; height: 185px; position: absolute; top: -4px; right: -280px; margin: 0; }
+.hero-orbit { position: absolute; border-radius: 34px; background: #e5f1ff; }.orbit-one { top: 4px; left: 8px; width: 215px; height: 130px; border-radius: 60px 22px 38px 32px; }.orbit-two { left: 20px; bottom: 24px; width: 50px; height: 44px; opacity: .8; }
+.hero-window { position: absolute; z-index: 1; width: 150px; height: 120px; left: 65px; top: 26px; overflow: hidden; border: 1px solid #d4e5fb; border-radius: 10px; background: #fff; box-shadow: 0 8px 25px #2d67a01b; }
+.window-bar { height: 20px; display: flex; align-items: center; gap: 5px; padding-left: 10px; background: #0951d9; }.window-bar i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
+.accessibility-mark { width: 62px; height: 62px; margin: 17px auto; }.accessibility-mark svg { width: 100%; height: 100%; fill: #0879f9; }.accessibility-mark .person { fill: #fff; }
+.hero-leaf { position: absolute; z-index: 2; background: #36b8a4; border-radius: 100% 0 100% 0; transform: rotate(-32deg); }.leaf-a { top: 13px; right: 9px; width: 25px; height: 67px; }.leaf-b { top: 58px; right: 31px; width: 22px; height: 54px; transform: rotate(-54deg); }.leaf-c { top: 78px; right: -2px; width: 19px; height: 40px; transform: rotate(15deg); }
+.hero-caption { position: absolute; z-index: 3; right: 2px; bottom: 8px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: white; box-shadow: 0 5px 18px #18345918; font-size: 11px; }.hero-caption > span:first-child { color: #0865df; font-size: 22px; }.hero-caption strong,.hero-caption small { display: block; }.hero-caption small { margin-top: 2px; }
+.why-section { margin-top: 0; }.why-section h2 { margin: 0 0 3px; font-size: 21px; line-height: 1.3; font-weight: 700; }.section-intro { max-width: 820px; margin: 0 0 15px; color: var(--a11y-muted); font-size: 14px; line-height: 1.5; }
+.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
+.feature-card { min-width: 0; min-height: 96px; display: flex; align-items: flex-start; gap: 15px; padding: 17px 18px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; }
+.feature-icon,.feature-icon.icon-keyboard,.feature-icon.icon-speaker,.feature-icon.icon-contrast,.feature-icon.icon-document,.feature-icon.icon-zoom,.feature-icon.icon-focus { width: 35px; height: 35px; flex: 0 0 35px; display: inline-flex; align-items: center; justify-content: center; color: #0879f9; }.feature-icon svg { width: 34px; height: 34px; fill: currentColor; }
+.feature-card h3 { margin: 2px 0 5px; color: #14284d; font-size: 14px; font-weight: 650; line-height: 1.25; }.feature-card p { margin: 0; color: #526487; font-size: 12px; line-height: 1.5; }
+.detail-grid { display: grid; grid-template-columns: 1fr 1.04fr 1.04fr; gap: 12px; margin-top: 12px; }
+.detail-card { min-width: 0; min-height: 178px; padding: 14px 16px 12px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; }
+.detail-card h2 { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 36px; margin: 0 0 11px; font-size: 14px; line-height: 1.3; font-weight: 650; white-space: normal; overflow-wrap: anywhere; }.detail-icon { flex: 0 0 auto; color: var(--a11y-blue); font-size: 23px; font-weight: 800; }.keyboard-icon { font-size: 22px; }
+.standards-list { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; font-size: 12px; }.standards-list li { display: grid; grid-template-columns: 20px 1fr 1fr; align-items: center; gap: 7px; }.success-check,.verified-list li span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #149342; color: white; font-size: 12px; font-weight: 700; }.standard-status { color: #526487; }
+.reader-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }.reader-tile { height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid #e2e8f0; border-radius: 10px; background: linear-gradient(135deg,#fafbfe,#f3f6fb); }.reader-tile strong { font-size: 11px; font-weight: 600; }.windows-icon { color: #0879f9; font-size: 23px; line-height: 1; }.narrator-icon { color: #0879f9; font-size: 24px; line-height: 1; }.reader-note { margin: 9px 0 0; color: #526487; font-size: 11px; }
+.keyboard-note { margin: -4px 0 8px; color: #536581; font-size: 10px; line-height: 1.35; }.shortcut-list { border: 1px solid #e2e8f0; border-radius: 7px; overflow: hidden; margin: 0; font-size: 10px; }.shortcut-list div { min-height: 22px; display: grid; grid-template-columns: 39% 61%; border-bottom: 1px solid #e7ebf2; }.shortcut-list div:last-child { border-bottom: 0; }.shortcut-list dt,.shortcut-list dd { margin: 0; padding: 4px 7px; }.shortcut-list dt { background: #f3f5f9; }.shortcut-list dd { color: #526487; }.shortcut-list kbd { font: inherit; font-weight: 650; color: #1d3155; text-decoration: underline; text-underline-offset: 2px; }
+.theme-showcase { width: calc(100% + 280px); box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 300px) minmax(0,1fr); align-items: center; gap: 18px; min-height: 96px; margin-top: 14px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #192f4d08; }
+.theme-heading { display: flex; align-items: flex-start; gap: 11px; }.theme-heading-icon { color: var(--a11y-blue); font-size: 24px; line-height: 1.1; }.theme-heading h2 { margin: 0 0 3px; font-size: 14px; font-weight: 650; }.theme-heading p { margin: 0; color: #526487; font-size: 12px; }.theme-chips { display: flex; gap: 7px; margin-top: 8px; }.theme-chips button { padding: 5px 12px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; color: #263a5c; font: inherit; font-size: 10px; font-weight: 600; white-space: nowrap; cursor: pointer; }.theme-chips button.is-selected { border-color: #0879f9; color: #0879f9; background: #f4f8ff; }
+.theme-previews { display: block; min-width: 0; }.theme-preview { min-width: 0; min-height: 126px; display: flex; align-items: center; justify-content: center; padding: 14px; border: 1px solid #e2e8f0; border-radius: 9px; transition: background-color .18s ease,border-color .18s ease; }.preview-window { width: min(100%, 450px); padding: 16px 18px; border: 1px solid #dce3ed; border-radius: 10px; background: #fff; box-shadow: 0 5px 17px #1c35501c; }.preview-window-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }.preview-window-heading strong,.preview-window-heading small { display: block; }.preview-window-heading strong { font-size: 13px; line-height: 1.3; }.preview-window-heading small { margin-top: 3px; color: #61718c; font-size: 11px; }.preview-window-mark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; background: #e8f1ff; color: #0879f9; font-size: 16px; font-weight: 700; }.preview-controls { display: flex; align-items: center; gap: 9px; }.preview-controls button { height: 35px; min-width: 100px; border: 0; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }.preview-controls input { flex: 1 1 auto; min-width: 0; height: 35px; border-radius: 6px; padding: 0 10px; font: inherit; font-size: 12px; }.preview-light { background: #f4f5f8; }.preview-light .preview-window { color: #102044; }.preview-light .preview-controls button { background: #0879f9; color: #fff; }.preview-light .preview-controls input { color: #526487; border: 1px solid #dce3ed; background: #fff; }.preview-dark { background: #202a3c; border-color: #344055; }.preview-dark .preview-window { color: #f1f5fb; border-color: #43516a; background: #29354a; }.preview-dark .preview-window-heading small { color: #bcc7d9; }.preview-dark .preview-window-mark { color: #a6c9ff; background: #354d70; }.preview-dark .preview-controls button { background: #3b82f6; color: #fff; }.preview-dark .preview-controls input { color: #e4ebf5; border: 1px solid #65738a; background: #202a3c; }.preview-contrast { background: #000; border-color: #ffeb00; }.preview-contrast .preview-window { color: #ffeb00; border: 2px solid #ffeb00; background: #000; box-shadow: none; }.preview-contrast .preview-window-heading small { color: #ffeb00; }.preview-contrast .preview-window-mark { color: #000; background: #ffeb00; }.preview-contrast .preview-controls button,.preview-contrast .preview-controls input { border: 2px solid #ffeb00; color: #ffeb00; background: #000; }
+.verified-panel { position: absolute; z-index: 2; top: 169px; right: 0; width: 260px; box-sizing: border-box; padding: 17px 20px 20px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px #192f4d0b; text-align: center; }.verified-panel h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }.progress-ring { width: 116px; height: 116px; display: grid; place-items: center; margin: 0 auto 11px; border: 12px solid #45b65d; border-radius: 50%; box-shadow: inset 0 0 0 1px #e5f4e8; }.progress-ring span { color: #14284d; font-size: 22px; font-weight: 700; }.verified-summary { margin: 0 0 10px; color: #526487; font-size: 13px; line-height: 1.45; }.verified-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0 10px; text-align: left; }.verified-list li { display: flex; align-items: center; gap: 10px; font-size: 12px; }.verified-list li span { width: 18px; height: 18px; flex: 0 0 18px; }.verified-label { display: block; margin-top: 15px; color: #168640; font-size: 12px; }
+.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+.accessibility-page :focus-visible { outline: 3px solid #075ee8; outline-offset: 3px; }
+.feature-badge,.feature-card,.detail-card,.theme-showcase,.verified-panel { transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
+.feature-badge:hover,.feature-card:hover,.detail-card:hover,.theme-showcase:hover,.verified-panel:hover { transform: translateY(-3px); border-color: #9bc7ff; box-shadow: 0 9px 24px #1c35501a; }
+
+@media (prefers-reduced-motion: reduce) {
+    .feature-badge,.feature-card,.detail-card,.theme-showcase,.verified-panel { transition: none; }
+}
+
+@media (max-width: 1250px) {
+    .accessibility-layout { display: block; }
+    .hero-art { width: 220px; right: -239px; transform: scale(.88); transform-origin: top right; }
+    .verified-panel { width: 225px; }
+    .feature-badge { padding-inline: 8px; gap: 6px; }.feature-badge strong { font-size: 10px; }.feature-badge small { font-size: 9px; }
+    .verified-panel { padding-inline: 14px; }
+    .theme-showcase { grid-template-columns: 255px minmax(0,1fr); gap: 12px; }
+    .theme-previews { gap: 8px; }.theme-preview { gap: 6px; padding: 8px; }.theme-preview button { min-width: 65px; }
+}
+@media (max-width: 960px) {
+    .accessibility-main { width: 100%; }
+    .verified-panel { position: static; width: auto; max-width: none; margin-top: 16px; }.verified-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
+    .accessibility-hero { min-height: 205px; }.hero-art { display: none; }.hero-copy { padding-right: 0; }.feature-badges { max-width: none; }
+    .theme-showcase { width: 100%; grid-template-columns: 1fr; }.theme-heading { align-items: center; }.theme-previews { grid-template-columns: repeat(3,minmax(0,1fr)); }
+}
+@media (max-width: 680px) {
+    .accessibility-page { padding: 8px 10px 22px; }.accessibility-breadcrumb { margin-bottom: 14px; }.accessibility-hero { min-height: 0; margin-bottom: 22px; }.accessibility-hero h1 { font-size: 36px; }.hero-subtitle { font-size: 16px; margin: 4px 0 14px; }
+    .feature-badges { grid-template-columns: repeat(2,minmax(0,1fr)); }.feature-badge { min-height: 57px; border-radius: 13px; }.feature-badge strong { white-space: normal; font-size: 11px; }.feature-badge small { white-space: normal; font-size: 10px; }
+    .feature-grid { grid-template-columns: 1fr; gap: 9px; }.feature-card { min-height: 82px; padding: 14px; }.detail-grid { grid-template-columns: 1fr; gap: 9px; }.detail-card { min-height: 0; }
+    .reader-list { grid-template-columns: repeat(2,minmax(0,1fr)); }.theme-showcase { padding: 12px; }.theme-previews { grid-template-columns: 1fr; gap: 8px; }.theme-preview { justify-content: flex-start; padding: 10px 16px; }.theme-preview button { min-width: 85px; }.theme-preview input { max-width: 160px; }.verified-list { grid-template-columns: 1fr; }
+}
+@media (forced-colors: active) {
+    .accessibility-page,.accessibility-page * { forced-color-adjust: auto; }
+    .feature-badge,.feature-card,.detail-card,.theme-showcase,.verified-panel,.theme-preview,.reader-tile { border: 1px solid CanvasText; }
+    .progress-ring { border-color: Highlight; }.success-check,.verified-list li span { border: 1px solid CanvasText; }
+    .theme-preview button,.theme-preview input { border: 1px solid ButtonText; color: ButtonText; background: Canvas; }
+}