diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index e58f96c83..1f5e21128 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -94,8 +94,8 @@
           </wa-button>
 
           <a href="/" aria-label="Web Awesome">
-            <span class="only-desktop">{% include "logo.njk" %}</span>
-            <span class="only-mobile">{% include "logo-simple.njk" %}</span>
+            <span class="wa-desktop-only">{% include "logo.njk" %}</span>
+            <span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
           </a>
           <small id="version-number" class="only-desktop">{{ package.version }}</small>
           <wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
@@ -120,7 +120,7 @@
       {# Sidebar #}
       {% if hasSidebar %}
         {# Mobile selectors #}
-        <div class="only-mobile" slot="navigation-header">
+        <div class="wa-mobile-only" slot="navigation-header">
           <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
             {% include "preset-theme-selector.njk" %}
             {% include "color-scheme-selector.njk" %}
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index ed0f587ba..44efd0cda 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -483,11 +483,6 @@ wa-page > main:has(> .index-grid) {
 
 /** desktop */
 @media screen and not (max-width: 768px) {
-  wa-page [data-toggle-nav],
-  wa-page .only-mobile {
-    display: none;
-  }
-
   /* Navigation sidebar */
   wa-page::part(navigation) {
     border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
diff --git a/docs/docs/components/page.md b/docs/docs/components/page.md
index 21afd37b5..279de1c71 100644
--- a/docs/docs/components/page.md
+++ b/docs/docs/components/page.md
@@ -40,6 +40,10 @@ body {
 }
 ```
 
+::info
+If you use [native styles](/docs/native/), this is already taken care of.
+:::
+
 ## Examples
 
 :::warning
@@ -64,7 +68,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
   <header slot="header" class="wa-split">
     <div class="wa-cluster">
       <wa-icon name="feather-pointed" style="color: var(--wa-color-brand-fill-loud); font-size: 1.5em;"></wa-icon>
-      <span id="brand-name" class="wa-heading-s">Audubon Worldwide</span>
+      <span id="brand-name" class="wa-heading-s wa-desktop-only">Audubon Worldwide</span>
       <a href="#">Our Work</a>
       <a href="#">About Us</a>
       <a href="#">Discover</a>
@@ -84,7 +88,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
         <wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
       </wa-breadcrumb>
     </div>
-    <wa-input id="search" placeholder="Search" size="small" style="max-inline-size: 12rem;">
+    <wa-input id="search" class="wa-desktop-only" placeholder="Search" size="small" style="max-inline-size: 12rem;">
       <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
     </wa-input>
   </nav>
@@ -161,7 +165,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
       </ul>
     </section>
   </footer>
-  <aside slot="aside">
+  <aside slot="aside" class="wa-desktop-only">
     <h2 class="wa-heading-m">Discover More Birds</h2>
     <wa-card with-image>
       <div slot="image" class="wa-frame">
@@ -229,10 +233,6 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
     --aside-width: 15rem;
   }
   wa-page[view='desktop'] {
-    [data-toggle-nav] {
-      display: none;
-    }
-
     [slot*='navigation'] {
       border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
     }
@@ -240,12 +240,6 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
   wa-page[view='mobile'] {
     --menu-width: auto;
     --aside-width: auto;
-
-    [slot='aside'],
-    #brand-name,
-    #search {
-      display: none;
-    }
   }
 
   [slot='banner'] {
@@ -272,9 +266,10 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
   }
   [slot='navigation-footer'] {
     border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot='navigation-footer'] .wa-flank {
-    --flank-size: 1.25em;
+
+    .wa-flank {
+      --flank-size: 1.25em;
+    }
   }
   [slot='main-header'],
   main,
@@ -310,7 +305,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
       <wa-icon name="record-vinyl"></wa-icon>
       <span class="wa-heading-m">radiogaga</span>
     </div>
-    <wa-input id="search-header" placeholder="Search" style="max-inline-size: 100%;">
+    <wa-input id="search-header" placeholder="Search" class="wa-desktop-only" style="max-inline-size: 100%;">
       <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
     </wa-input>
     <div class="wa-cluster">
@@ -319,7 +314,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
     </div>
   </header>
   <div slot="navigation-header" class="wa-split">
-    <wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%;">
+    <wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%;" class="wa-mobile-only">
       <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
     </wa-input>
     <div class="wa-split">
@@ -609,17 +604,10 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
     --wa-tooltip-arrow-size: 0;
     background-color: var(--wa-color-surface-lowered);
   }
-  wa-page[view='desktop'] {
-    :is([data-toggle-nav], #search-nav-drawer) {
-      display: none;
-    }
-  }
+
   wa-page[view='mobile'] {
     --menu-width: auto;
 
-    #search-header {
-      display: none;
-    }
     [slot*='main'], main {
       padding: var(--wa-space-xl);
     }
@@ -846,6 +834,10 @@ wa-page[view='desktop'] [data-toggle-nav] {
 }
 ```
 
+::info
+If you use [native styles](/docs/native/), this is already taken care for you, and the `data-toggle-nav` button is already hidden on wider screens.
+:::
+
 #### Custom Widths
 
 You specify widths for some slots on your page with [CSS custom properties](#css-custom-properties) for `--menu-width`, `--main-width`, and `--aside-width`.
@@ -880,3 +872,16 @@ You can override the default spacing for each slot with your own CSS. In this ex
 }
 ```
 
+## Utility classes
+
+[Native styles](/docs/native/) define a few useful defaults for `<wa-page>`, as well as
+two utility classes you can use for common responsive design tasks:
+- `.wa-mobile-only` hides an element on the desktop view
+- `.wa-desktop-only` hides an element on the mobile view
+
+
+If you don’t want to use [native styles](/docs/native/), you can include this stylesheet in your project to use these:
+
+```html
+<link rel="stylesheet" href="{% cdnUrl 'styles/components/page.css' %}" />
+```
diff --git a/docs/docs/native/index.md b/docs/docs/native/index.md
index 6c63e0d95..077ba2a0b 100644
--- a/docs/docs/native/index.md
+++ b/docs/docs/native/index.md
@@ -11,7 +11,7 @@ We also provide styles that make native HTML elements look good so you can conti
 To use all Web Awesome Native Styles, include the following stylesheet in your project:
 
 ```html
-<link rel="stylesheet" href="{% cdnUrl 'styles/themes/applied.css' %}" />
+<link rel="stylesheet" href="{% cdnUrl 'styles/applied.css' %}" />
 ```
 
 Here’s what we have so far:
@@ -34,7 +34,7 @@ Instead of including Native Styles with a `<link>` element, you can include it l
 
 ```html
 <style>
-@import url('{% cdnUrl 'styles/themes/applied.css' %}') layer(wa);
+@import url('{% cdnUrl 'styles/applied.css' %}') layer(wa);
 
 @layer wa {
   .wa-off,
diff --git a/src/styles/applied.css b/src/styles/applied.css
index 75870f55d..1049f4e63 100644
--- a/src/styles/applied.css
+++ b/src/styles/applied.css
@@ -15,7 +15,7 @@
 @import url('native/slider.css');
 
 /* Web Awesome components */
-@import url('components/wa-page.css');
+@import url('components/page.css');
 
 /* CSS Utilities */
 @import url('utilities.css');
diff --git a/src/styles/components/wa-page.css b/src/styles/components/page.css
similarity index 95%
rename from src/styles/components/wa-page.css
rename to src/styles/components/page.css
index c43cabd8d..c777ef798 100644
--- a/src/styles/components/wa-page.css
+++ b/src/styles/components/page.css
@@ -21,5 +21,5 @@ wa-page[view='desktop'] [data-toggle-nav] {
 /* Utilities */
 wa-page[view='mobile'] .wa-desktop-only,
 wa-page[view='desktop'] .wa-mobile-only {
-  display: none;
+  display: none !important;
 }
diff --git a/src/styles/utilities/button-group.css b/src/styles/utilities/button-group.css
index 9d7c04edd..29189885a 100644
--- a/src/styles/utilities/button-group.css
+++ b/src/styles/utilities/button-group.css
@@ -13,8 +13,8 @@
   > :focus,
   &::slotted(:focus),
   > [aria-checked='true'],
-  > [checked],
   &::slotted([aria-checked='true']),
+  > [checked],
   &::slotted([checked]) {
     z-index: 2 !important;
   }