diff --git a/app/RSpade/CodeQuality/Rules/Manifest/ScssClassScope_CodeQualityRule.php b/app/RSpade/CodeQuality/Rules/Manifest/ScssClassScope_CodeQualityRule.php
index 5ffc96a75..fc448e35f 100644
--- a/app/RSpade/CodeQuality/Rules/Manifest/ScssClassScope_CodeQualityRule.php
+++ b/app/RSpade/CodeQuality/Rules/Manifest/ScssClassScope_CodeQualityRule.php
@@ -346,24 +346,42 @@ class ScssClassScope_CodeQualityRule extends CodeQualityRule_Abstract
      */
     private function build_no_match_suggestion(string $file, string $wrapper_class): string
     {
+        // Convert wrapper class to a plausible BEM element name (lowercase with underscores)
+        $bem_element = strtolower($wrapper_class);
+
         $lines = [];
         $lines[] = "The wrapper class '{$wrapper_class}' does not match any known";
         $lines[] = "action, layout, component, or Blade view.";
         $lines[] = "";
-        $lines[] = "VALID ASSOCIATIONS:";
-        $lines[] = "  - Spa_Action class (e.g., Frontend_Dashboard extends Spa_Action)";
-        $lines[] = "  - Spa_Layout class (e.g., Frontend_Layout extends Spa_Layout)";
-        $lines[] = "  - Component class (e.g., Sidebar_Nav extends Component)";
-        $lines[] = "  - Blade @rsx_id (e.g., @rsx_id('Login_Index'))";
+        $lines[] = "OPTION 1 - STANDALONE COMPONENT:";
+        $lines[] = "  If this is a reusable component, create the matching class:";
+        $lines[] = "  - Spa_Action: class {$wrapper_class} extends Spa_Action";
+        $lines[] = "  - Spa_Layout: class {$wrapper_class} extends Spa_Layout";
+        $lines[] = "  - Component: class {$wrapper_class} extends Component";
+        $lines[] = "  - Blade view: @rsx_id('{$wrapper_class}')";
         $lines[] = "";
-        $lines[] = "TO FIX:";
-        $lines[] = "  1. Rename the wrapper class to match your action/layout/component/view";
-        $lines[] = "  2. Or create the missing .js or .blade.php file with this class/id";
+        $lines[] = "OPTION 2 - BEM CHILD ELEMENT (most common):";
+        $lines[] = "  If this is part of a parent component (action, layout, or component),";
+        $lines[] = "  use BEM naming in the PARENT's SCSS file instead of creating a";
+        $lines[] = "  separate file:";
         $lines[] = "";
-        $lines[] = "NO EXEMPTIONS are allowed. If this file provides shared styles that";
-        $lines[] = "cannot be scoped to a single element, it may need to be moved to";
-        $lines[] = "rsx/theme/ (outside components/) - but this is rare and requires";
-        $lines[] = "explicit developer approval.";
+        $lines[] = "    Parent: Frontend_Layout";
+        $lines[] = "    Element: {$bem_element}";
+        $lines[] = "";
+        $lines[] = "    SCSS (in Frontend_Layout.scss):";
+        $lines[] = "      .Frontend_Layout {";
+        $lines[] = "          &__{$bem_element} { ... }";
+        $lines[] = "      }";
+        $lines[] = "";
+        $lines[] = "    HTML:";
+        $lines[] = "      <nav class=\"Frontend_Layout__{$bem_element}\">";
+        $lines[] = "";
+        $lines[] = "  Then DELETE this orphaned SCSS file.";
+        $lines[] = "";
+        $lines[] = "OPTION 3 - GLOBAL STYLES (rare):";
+        $lines[] = "  If this provides truly shared styles that cannot be scoped to any";
+        $lines[] = "  component, move to rsx/theme/ (outside components/). This requires";
+        $lines[] = "  explicit developer approval.";
         $lines[] = "";
         $lines[] = "See: php artisan rsx:man scss";
 
diff --git a/app/RSpade/upstream_changes/phone_breakpoints_12_30.txt b/app/RSpade/upstream_changes/phone_breakpoints_12_30.txt
new file mode 100755
index 000000000..48866011a
--- /dev/null
+++ b/app/RSpade/upstream_changes/phone_breakpoints_12_30.txt
@@ -0,0 +1,172 @@
+PHONE-SM AND PHONE-LG BREAKPOINTS - MIGRATION GUIDE
+Date: 2024-12-30
+
+SUMMARY
+    New granular phone breakpoints added to the responsive system. The existing
+    `phone` breakpoint (0-799px) remains as a composite covering all phones,
+    similar to how `mobile` covers all non-desktop sizes. Two new breakpoints
+    provide finer control:
+
+        phone-sm    0 - 399px       Small phones, compact screens
+        phone-lg    400 - 799px     Large phones, phablets
+
+    This mirrors the desktop pattern where `desktop` is the composite and
+    `desktop-sm`, `desktop-md`, `desktop-lg`, `desktop-xl` provide granularity.
+
+BREAKPOINT SUMMARY (UPDATED)
+
+    Tier 1 - Semantic:
+        mobile      0 - 1023px      Phone + tablet combined
+        desktop     1024px+         All desktop sizes
+
+    Tier 2 - Granular:
+        phone       0 - 799px       All phones (composite)
+        phone-sm    0 - 399px       Small phones, compact screens
+        phone-lg    400 - 799px     Large phones, phablets
+        tablet      800 - 1023px    Tablets portrait
+        desktop-sm  1024 - 1199px   Laptops, small monitors
+        desktop-md  1200 - 1639px   Standard monitors (1080p)
+        desktop-lg  1640 - 2199px   Large monitors (1440p)
+        desktop-xl  2200px+         Ultra-wide monitors, 4K
+
+    Breakpoints: 400, 800, 1024, 1200, 1640, 2200
+
+AFFECTED FILES
+
+    Framework files (already updated):
+        rsx/theme/variables.scss    New $bp-phone-lg variable, updated $grid-breakpoints
+        rsx/theme/responsive.scss   New mixins: phone-sm, phone-lg, phone-lg-up
+
+    Application files requiring migration:
+        rsx/theme/variables.scss    Add $bp-phone-lg, update $grid-breakpoints
+        rsx/theme/responsive.scss   Add new mixins
+
+CHANGES REQUIRED
+
+    1. Update variables.scss
+       -------------------------------------------------------------------------
+       Add the new breakpoint variable and update $grid-breakpoints.
+
+       Add after existing breakpoint comments:
+
+       $bp-phone-lg: 400px;
+       $bp-tablet: 800px;
+       $bp-desktop: 1024px;
+       $bp-desktop-md: 1200px;
+       $bp-desktop-lg: 1640px;
+       $bp-desktop-xl: 2200px;
+
+       Update $grid-breakpoints to include phone-sm and phone-lg:
+
+       $grid-breakpoints: (
+           xs: 0,
+           mobile: 0,
+           phone: 0,
+           phone-sm: 0,
+           phone-lg: 400px,
+           tablet: 800px,
+           desktop: 1024px,
+           desktop-sm: 1024px,
+           desktop-md: 1200px,
+           desktop-lg: 1640px,
+           desktop-xl: 2200px
+       );
+
+    2. Update responsive.scss
+       -------------------------------------------------------------------------
+       Add the new mixins after the existing @mixin phone definition:
+
+       @mixin phone-sm {
+           @media (max-width: #{$bp-phone-lg - 0.02px}) {
+               @content;
+           }
+       }
+
+       @mixin phone-lg {
+           @media (min-width: $bp-phone-lg) and (max-width: #{$bp-tablet - 0.02px}) {
+               @content;
+           }
+       }
+
+       Add in the "and up" mixins section:
+
+       @mixin phone-lg-up {
+           @media (min-width: $bp-phone-lg) {
+               @content;
+           }
+       }
+
+       Update CSS custom properties in :root:
+
+       :root {
+           --bp-phone-lg: #{$bp-phone-lg};     // 400px
+           --bp-tablet: #{$bp-tablet};         // 800px
+           --bp-desktop: #{$bp-desktop};       // 1024px
+           --bp-desktop-md: #{$bp-desktop-md}; // 1200px
+           --bp-desktop-lg: #{$bp-desktop-lg}; // 1640px
+           --bp-desktop-xl: #{$bp-desktop-xl}; // 2200px
+       }
+
+NEW CLASSES AVAILABLE
+
+    Bootstrap utility classes are auto-generated from $grid-breakpoints:
+
+        .col-phone-sm-12        Full width on small phones
+        .col-phone-lg-6         Half width on large phones
+        .d-phone-sm-none        Hide on small phones
+        .d-phone-lg-block       Show as block on large phones
+        .p-phone-sm-2           Padding 2 on small phones
+        .m-phone-lg-3           Margin 3 on large phones
+
+USAGE EXAMPLES
+
+    Different layouts for small vs large phones:
+
+        .my-component {
+            // Default (all sizes)
+            font-size: 16px;
+
+            @include phone-sm {
+                // Compact layout for small phones
+                font-size: 14px;
+                padding: 8px;
+            }
+
+            @include phone-lg {
+                // More spacious for larger phones
+                font-size: 15px;
+                padding: 12px;
+            }
+        }
+
+    Responsive grid with phone granularity:
+
+        <div class="row">
+            <div class="col-phone-sm-12 col-phone-lg-6 col-tablet-4 col-desktop-3">
+                Card
+            </div>
+        </div>
+
+    Hide element on small phones only:
+
+        <div class="d-phone-sm-none">
+            This content is hidden on small phones (< 400px)
+        </div>
+
+VERIFICATION
+
+    1. Compile bundles and verify no SCSS errors:
+       php artisan rsx:bundle:compile Frontend_Bundle
+
+    2. Test the new breakpoints:
+       - Resize browser to < 400px, verify phone-sm styles apply
+       - Resize browser to 400-799px, verify phone-lg styles apply
+       - Verify phone (composite) still works for 0-799px range
+
+    3. Test Bootstrap classes:
+       - Add class="col-phone-sm-12 col-phone-lg-6" to element
+       - Verify layout changes at 400px breakpoint
+
+REFERENCE
+
+    php artisan rsx:man responsive   - Full responsive system documentation
diff --git a/docs/CLAUDE.dist.md b/docs/CLAUDE.dist.md
index 6d086a822..b1e52c0e3 100644
--- a/docs/CLAUDE.dist.md
+++ b/docs/CLAUDE.dist.md
@@ -431,9 +431,9 @@ Pattern recognition:
 
 **Responsive breakpoints** (Bootstrap defaults do NOT work):
 - Tier 1: `mobile` (0-1023px), `desktop` (1024px+)
-- Tier 2: `phone`, `tablet`, `desktop-sm`, `desktop-md`, `desktop-lg`, `desktop-xl`
-- SCSS: `@include mobile { }`, `@include desktop-xl { }`
-- Classes: `.col-mobile-12`, `.d-tablet-none`, `.mobile-only`
+- Tier 2: `phone`, `phone-sm`, `phone-lg`, `tablet`, `desktop-sm`, `desktop-md`, `desktop-lg`, `desktop-xl`
+- SCSS: `@include mobile { }`, `@include phone-sm { }`, `@include phone-lg { }`, `@include desktop-xl { }`
+- Classes: `.col-mobile-12`, `.d-tablet-none`, `.mobile-only`, `.col-phone-sm-12`, `.col-phone-lg-6`
 - Fifth-width columns: `.col-5ths`, `.col-mobile-5ths`, `.col-desktop-5ths`, etc.
 - JS: `Responsive.is_mobile()`, `Responsive.is_phone()`