@flamingo-stack/openframe-frontend-core 0.0.703 → 0.0.704-snapshot.20261006133653

package/src/components/help-center-pages/trust-center-sections.tsx

@@ -72,9 +72,9 @@ const BODY_TEXT = 'text-h6 text-ods-text-secondary';
  * beside the section rail.
  */
 export const TRUST_STATUS_ROW_CLASS =
-  'flex flex-col gap-[var(--spacing-system-xs)] md:flex-row md:items-center md:justify-between';
+  'flex flex-col gap-[var(--spacing-system-xs)] content-md:flex-row content-md:items-center content-md:justify-between';
 export const TRUST_BODY_GRID_CLASS =
-  'grid grid-cols-1 gap-[var(--spacing-system-xl)] lg:grid-cols-[minmax(0,1fr)_12rem]';
+  'grid grid-cols-1 gap-[var(--spacing-system-xl)] content-lg:grid-cols-[minmax(0,1fr)_12rem]';
 export const TRUST_SECTIONS_COLUMN_CLASS = 'flex min-w-0 flex-col gap-[var(--spacing-system-xxl)]';
 
 /** Each section's one-line lead under its heading (the page and its skeleton read the same copy). */
@@ -89,7 +89,7 @@ export const TRUST_SECTION_LEADS: Partial<Record<TrustCenterSectionId, string>>
  * The right-hand action / status column: ONE width from tablet up, so every
  * panel's rows line up; on phones it hugs its content so the title keeps the room.
  */
-const ACTION_COLUMN = 'shrink-0 md:w-36';
+const ACTION_COLUMN = 'shrink-0 content-md:w-36';
 
 // ---------------------------------------------------------------------------
 // Section frame
@@ -202,7 +202,7 @@ export function ComplianceSection({ frameworks }: { frameworks: TrustCenterFrame
  * so the list box shows exactly 5 of them and scrolls for
  * the rest.
  */
-const CONTROL_ROW_CLASS = 'h-14 md:h-20 overflow-hidden';
+const CONTROL_ROW_CLASS = 'h-14 content-md:h-20 overflow-hidden';
 
 /** ONE row renderer for the controls list: fixed-height rows, one line each for name and description. */
 function controlRows(controls: TrustCenterControl[]): PanelRow[] {
@@ -229,7 +229,7 @@ function countLabel(n: number, noun: string): string {
  * md) plus their 1px separators and the panel's border. Controls, loading,
  * empty and error all fill this same box, so nothing below it moves.
  */
-const CONTROLS_LIST_HEIGHT = 'h-[calc(5*3.5rem+7px)] md:h-[calc(5*5rem+7px)]';
+const CONTROLS_LIST_HEIGHT = 'h-[calc(5*3.5rem+7px)] content-md:h-[calc(5*5rem+7px)]';
 
 /** Skeleton rows shown in the list box while the server's answer is on its way: exactly the box's visible rows. */
 const CONTROLS_SKELETON_ROWS = 5;
@@ -332,11 +332,11 @@ export function ControlsSection({ endpoint, seed }: { endpoint: string; seed: Tr
           setDomain(categories.find(category => controlsTabId(category.domain) === tabId)?.domain ?? null)
         }
       />
-      <div className="flex flex-col gap-[var(--spacing-system-s)] md:flex-row md:items-center md:justify-between">
+      <div className="flex flex-col gap-[var(--spacing-system-s)] content-md:flex-row content-md:items-center content-md:justify-between">
         <p className={BODY_TEXT} aria-live="polite">
           {summary}
         </p>
-        <div className="w-full md:w-80">
+        <div className="w-full content-md:w-80">
           <SearchInput
             placeholder="Search controls"
             value={typed}
@@ -598,7 +598,7 @@ function skeletonRows(count: number, shape: { mark: 'logo' | 'glyph'; action: 'b
               className={shape.mark === 'logo' ? 'size-10 shrink-0 rounded-full' : 'size-6 shrink-0 rounded'}
             />
             <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
-              <UnifiedSkeleton variant="text" className="h-5 w-1/3 md:h-6" />
+              <UnifiedSkeleton variant="text" className="h-5 w-1/3 content-md:h-6" />
               <TextSkeleton.Body className="w-1/2" />
             </div>
           </div>
@@ -612,7 +612,7 @@ function skeletonRows(count: number, shape: { mark: 'logo' | 'glyph'; action: 'b
           shape.action === 'badge' ? (
             <UnifiedSkeleton className="h-4 w-28 rounded" />
           ) : (
-            <UnifiedSkeleton className="h-6 w-16 rounded md:h-8" />
+            <UnifiedSkeleton className="h-6 w-16 rounded content-md:h-8" />
           ),
       },
     ],
@@ -626,13 +626,13 @@ function ControlsSectionSkeleton() {
       <div className="flex items-center gap-[var(--spacing-system-xxs)] overflow-hidden">
         {[0, 1, 2, 3].map(index => (
           <div key={index} className="shrink-0 p-[var(--spacing-system-m)]">
-            <UnifiedSkeleton variant="text" className="h-5 w-36 md:h-6" />
+            <UnifiedSkeleton variant="text" className="h-5 w-36 content-md:h-6" />
           </div>
         ))}
       </div>
-      <div className="flex flex-col gap-[var(--spacing-system-s)] md:flex-row md:items-center md:justify-between">
+      <div className="flex flex-col gap-[var(--spacing-system-s)] content-md:flex-row content-md:items-center content-md:justify-between">
         <TextSkeleton.Body className="w-48" />
-        <UnifiedSkeleton className="h-11 w-full rounded-[6px] md:h-12 md:w-80" />
+        <UnifiedSkeleton className="h-11 w-full rounded-[6px] content-md:h-12 content-md:w-80" />
       </div>
       <div className={CONTROLS_LIST_HEIGHT}>
         <ControlsListSkeleton />
@@ -675,7 +675,7 @@ export function TrustCenterSkeleton() {
           <TextSkeleton.Body className="w-44" />
         </div>
         {/* `DataAttribution`'s own layout: two lines below `sm`, one row above it. */}
-        <div className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] sm:flex-row sm:items-center sm:gap-[var(--spacing-system-sf)]">
+        <div className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]">
           <div className="flex items-center gap-[var(--spacing-system-xsf)]">
             <UnifiedSkeleton className="size-4 rounded" />
             <TextSkeleton.Body className="w-36" />
@@ -695,7 +695,7 @@ export function TrustCenterSkeleton() {
             <StackedRowsPanel rows={skeletonRows(2, { mark: 'glyph', action: 'button' })} />
           </SkeletonSection>
         </div>
-        <aside className="hidden lg:block" aria-hidden="true">
+        <aside className="hidden content-lg:block" aria-hidden="true">
           <SectionRailSkeleton />
         </aside>
       </div>

package/src/components/icon-display.tsx

@@ -52,7 +52,7 @@ export function EntityIcon({
   }
   if (icon?.name && BRAND_MARK_NAMES.has(icon.name)) {
     // Size via `className` when provided (so responsive Tailwind sizing like
-    // `w-6 md:w-8` works); fall back to a fixed `size` px box ONLY when no
+    // `w-6 content-md:w-8` works); fall back to a fixed `size` px box ONLY when no
     // className is given — an inline `style` would otherwise override the class.
     return (
       <span

package/src/components/layout/article-detail-layout.tsx

@@ -52,7 +52,7 @@ export function PageShell({ children, schemas, contentClassName }: LayoutProps)
 /**
  * Constrained layout for article/detail pages (max-w-[1280px]) — readable
  * content width for blog posts, release notes, case studies, investor updates.
- * Fixed hub padding (`px-6 md:px-20 py-6 md:py-10`); pass `contentClassName` to
+ * Fixed hub padding (`px-6 content-md:px-20 py-6 content-md:py-10`); pass `contentClassName` to
  * override per instance. (PageShell's `--page-shell-*` var system does NOT apply
  * here — this layout keeps its own fixed spacing.)
  */
@@ -60,7 +60,9 @@ export function ArticleDetailLayout({ children, schemas, contentClassName }: Lay
   return (
     <main className="bg-ods-bg">
       {schemas}
-      <div className={cn('mx-auto max-w-[1280px] px-6 py-6 md:px-20 md:py-10', contentClassName)}>{children}</div>
+      <div className={cn('mx-auto max-w-[1280px] px-6 py-6 content-md:px-20 content-md:py-10', contentClassName)}>
+        {children}
+      </div>
     </main>
   );
 }

package/src/components/layout/list-page-layout.tsx

@@ -165,7 +165,7 @@ export function ListPageLayout({
             onChange={e => setLocalSearchValue(e.target.value)}
             value={localSearchValue}
             className="flex-1"
-            startAdornment={<SearchIcon className="h-4 w-4 md:h-6 md:w-6" />}
+            startAdornment={<SearchIcon className="h-4 w-4 content-md:h-6 content-md:w-6" />}
           />
 
           {/* Mobile Filter Button - only visible on mobile when filter is enabled */}
@@ -173,7 +173,7 @@ export function ListPageLayout({
             <Button
               variant="outline"
               size="icon"
-              className="md:hidden"
+              className="content-md:hidden"
               onClick={() => setMobileFilterOpen(true)}
               aria-label="Open filters"
             >

package/src/components/layout/page-container.tsx

@@ -232,11 +232,15 @@ function renderAdvancedPageContainer({
 
     if (variant === 'detail') {
       return (
-        <div className="flex items-end justify-between gap-4 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-end lg:justify-between">
+        <div className="flex items-end justify-between gap-4 content-md:flex-col content-md:items-start content-md:justify-start content-lg:flex-row content-lg:items-end content-lg:justify-between">
           <div className="flex min-w-0 flex-1 flex-col gap-2">
             {/* Back Button */}
             {backButton && (
-              <BackButton onClick={backButton.onClick} label={backButton.label} className="hidden md:inline-flex" />
+              <BackButton
+                onClick={backButton.onClick}
+                label={backButton.label}
+                className="hidden content-md:inline-flex"
+              />
             )}
 
             {/* Title */}
@@ -259,11 +263,15 @@ function renderAdvancedPageContainer({
 
     if (variant === 'list') {
       return (
-        <div className="flex items-center justify-between gap-4 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex items-center justify-between gap-4 content-md:flex-col content-md:items-start content-md:justify-start content-lg:flex-row content-lg:items-center content-lg:justify-between">
           <div className="flex min-w-0 flex-1 flex-col gap-1">
             {/* Back Button */}
             {backButton && (
-              <BackButton onClick={backButton.onClick} label={backButton.label} className="hidden md:inline-flex" />
+              <BackButton
+                onClick={backButton.onClick}
+                label={backButton.label}
+                className="hidden content-md:inline-flex"
+              />
             )}
 
             {title && <h1 className="text-ods-text-primary text-h2">{accentSentenceMarks(title)}</h1>}
@@ -283,11 +291,15 @@ function renderAdvancedPageContainer({
 
     if (variant === 'form') {
       return (
-        <div className="flex items-end justify-between gap-4 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-end lg:justify-between">
+        <div className="flex items-end justify-between gap-4 content-md:flex-col content-md:items-start content-md:justify-start content-lg:flex-row content-lg:items-end content-lg:justify-between">
           <div className="flex min-w-0 flex-1 flex-col gap-2">
             {/* Back Button */}
             {backButton && (
-              <BackButton onClick={backButton.onClick} label={backButton.label} className="hidden md:inline-flex" />
+              <BackButton
+                onClick={backButton.onClick}
+                label={backButton.label}
+                className="hidden content-md:inline-flex"
+              />
             )}
 
             {title && <h1 className="text-ods-text-primary text-h2">{accentSentenceMarks(title)}</h1>}
@@ -306,7 +318,7 @@ function renderAdvancedPageContainer({
 
     // Default content header
     return (
-      <div className="flex items-center justify-between gap-4 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-center lg:justify-between">
+      <div className="flex items-center justify-between gap-4 content-md:flex-col content-md:items-start content-md:justify-start content-lg:flex-row content-lg:items-center content-lg:justify-between">
         {(title || subtitle) && (
           <div className="flex min-w-0 flex-1 flex-col gap-1">
             {title && <h1 className="text-ods-text-primary text-h2">{accentSentenceMarks(title)}</h1>}
@@ -329,28 +341,28 @@ function renderAdvancedPageContainer({
 
     switch (variant) {
       case 'list':
-        return cn(baseClasses, 'gap-4 md:gap-6', className);
+        return cn(baseClasses, 'gap-4 content-md:gap-6', className);
       case 'detail':
-        return cn(baseClasses, 'gap-4 md:gap-6', className);
+        return cn(baseClasses, 'gap-4 content-md:gap-6', className);
       case 'form':
-        return cn(baseClasses, 'gap-6 md:gap-10', className);
+        return cn(baseClasses, 'gap-6 content-md:gap-10', className);
       case 'content':
       default:
-        return cn(baseClasses, 'gap-4 md:gap-6', className);
+        return cn(baseClasses, 'gap-4 content-md:gap-6', className);
     }
   };
 
   const getContentClasses = () => {
     // Add bottom padding on mobile when using primary-buttons variant (fixed bottom bar)
-    const mobilePadding = needsBottomPadding ? 'pb-28 md:pb-0' : '';
+    const mobilePadding = needsBottomPadding ? 'pb-28 content-md:pb-0' : '';
 
     switch (variant) {
       case 'detail':
         return cn('flex-1 overflow-auto', mobilePadding, contentClassName);
       case 'list':
-        return cn('flex flex-col gap-4 md:gap-6', mobilePadding, contentClassName);
+        return cn('flex flex-col gap-4 content-md:gap-6', mobilePadding, contentClassName);
       case 'form':
-        return cn('flex flex-col gap-4 md:gap-10', mobilePadding, contentClassName);
+        return cn('flex flex-col gap-4 content-md:gap-10', mobilePadding, contentClassName);
       case 'content':
       default:
         return cn('flex-1', mobilePadding, contentClassName);

package/src/components/layout/page-heading.tsx

@@ -23,7 +23,7 @@ export const PAGE_HEADING_CLASS = 'text-h1 text-ods-text-primary';
 export const SECTION_HEADING_CLASS = 'text-h2 text-ods-text-primary';
 
 const DESCRIPTION_CLASS =
-  'mt-6 max-w-[640px] font-body text-[16px] md:text-[18px] leading-[24px] md:leading-[28px] text-ods-text-secondary';
+  'mt-6 max-w-[640px] font-body text-[16px] content-md:text-[18px] leading-[24px] content-md:leading-[28px] text-ods-text-secondary';
 
 export interface PageHeadingProps {
   /** Heading content — plain text or nodes (e.g. an accent <span>). */

package/src/components/layout/page-layout.tsx

@@ -141,7 +141,7 @@ export function PageLayout({
       <div
         className={cn(
           'flex flex-1 flex-col gap-[var(--spacing-system-l)]',
-          needsBottomPadding && 'pb-28 md:pb-0',
+          needsBottomPadding && 'pb-28 content-md:pb-0',
           contentClassName,
         )}
       >

package/src/components/layout/title-block.tsx

@@ -59,10 +59,10 @@
  * responsive action layout on md+. This one intentionally CHANGES the baseline
  * for every caller, per the approved design (Figma open-design-system node
  * 2200-7452): instead of tablet always stacking actions below the title
- * (`md:flex-col`) and desktop always keeping one row (long titles clipped),
+ * (`content-md:flex-col`) and desktop always keeping one row (long titles clipped),
  * md+ is a single `flex-wrap` row — actions stay inline with a short title on
  * BOTH tablet and desktop, and wrap to a second row only when the title is
- * long enough to overflow. The title column is `md:flex-none md:max-w-full`
+ * long enough to overflow. The title column is `content-md:flex-none content-md:max-w-full`
  * so its natural width drives the wrap while `truncate` still clamps a title
  * that alone exceeds the container. The mobile (base) layout is untouched.
  * This is the new frozen baseline; do NOT re-introduce breakpoint stacking.
@@ -93,13 +93,13 @@ import { BackButton } from './back-button';
 /**
  * Minimum height of the title block's content column, matched to the action
  * button height: the icon button on mobile (`h-11` → 44px) and the default
- * button on desktop (`md:h-12` → 48px). Applied to the inner title column (which
+ * button on desktop (`content-md:h-12` → 48px). Applied to the inner title column (which
  * has no padding) rather than the root — the root's `pt`/`mb` are box-sizing
  * border-box and would otherwise absorb the floor. Keeps the header a consistent
  * height across pages whether or not they render action buttons, so the content
  * below starts at the same baseline. Exported so other page chrome can reuse it.
  */
-export const TITLE_BLOCK_MIN_HEIGHT = 'min-h-11 md:min-h-12';
+export const TITLE_BLOCK_MIN_HEIGHT = 'min-h-11 content-md:min-h-12';
 
 export interface TitleBlockProps {
   title?: string;
@@ -186,8 +186,8 @@ function TitleTextSkeleton({ widthClass, heightClass }: { widthClass: string; he
  * see `TitleTextSkeleton` for why that is what keeps the header height honest.
  */
 const TITLE_SKELETON_SIZE = {
-  h1: { width: 'w-56 md:w-80 lg:w-96', height: 'h-7 md:h-8 lg:h-9' },
-  h2: { width: 'w-48 md:w-72', height: 'h-4 md:h-6' },
+  h1: { width: 'w-56 content-md:w-80 content-lg:w-96', height: 'h-7 content-md:h-8 content-lg:h-9' },
+  h2: { width: 'w-48 content-md:w-72', height: 'h-4 content-md:h-6' },
 } as const;
 
 export function TitleBlock({
@@ -236,15 +236,15 @@ export function TitleBlock({
         'flex items-end justify-between gap-[var(--spacing-system-m)]',
         // md+: one wrapping row — actions stay inline with a short title and
         // wrap to a second row only when the title overflows (ClickUp 86ahd6uy5).
-        'md:flex-wrap md:content-end',
+        'content-md:flex-wrap content-md:content-end',
         'pt-[var(--spacing-system-l)]',
         variant === 'card'
           ? cn(
               'border-b border-ods-border bg-ods-card',
               'px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]',
-              'md:border-b-0 md:bg-transparent',
-              'md:px-0 md:pb-0',
-              'md:mb-[var(--spacing-system-l)]',
+              'content-md:border-b-0 content-md:bg-transparent',
+              'content-md:px-0 content-md:pb-0',
+              'content-md:mb-[var(--spacing-system-l)]',
             )
           : 'mb-[var(--spacing-system-l)]',
         className,
@@ -255,12 +255,12 @@ export function TitleBlock({
           wrap line; a short title leaves them inline. Base (mobile) keeps flex-1. */}
       <div
         className={cn(
-          'flex min-w-0 flex-1 flex-col justify-center gap-[var(--spacing-system-xs)] md:max-w-full md:flex-none',
+          'flex min-w-0 flex-1 flex-col justify-center gap-[var(--spacing-system-xs)] content-md:max-w-full content-md:flex-none',
           TITLE_BLOCK_MIN_HEIGHT,
         )}
       >
         {backButton && (
-          <BackButton onClick={backButton.onClick} label={backButton.label} className="hidden md:inline-flex" />
+          <BackButton onClick={backButton.onClick} label={backButton.label} className="hidden content-md:inline-flex" />
         )}
         {image || hasSubtitleRow || loading ? (
           <div className="flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]">
@@ -306,7 +306,7 @@ export function TitleBlock({
                     aria-hidden={!loading && !subtitle ? true : undefined}
                   >
                     {loading ? (
-                      <TitleTextSkeleton widthClass="w-28 md:w-36" heightClass="h-2.5 md:h-3" />
+                      <TitleTextSkeleton widthClass="w-28 content-md:w-36" heightClass="h-2.5 content-md:h-3" />
                     ) : (
                       subtitle || '\u00A0'
                     )}

package/src/components/loading/card-skeleton.tsx

@@ -96,7 +96,7 @@ function VendorCardContent({ showMetadata }: { showMetadata: boolean }) {
       {showMetadata && (
         <div className="flex w-full min-w-0 items-center justify-between gap-2">
           {/* Stats Container - Flexible width, no overflow */}
-          <div className="flex min-w-0 flex-shrink items-center gap-3 md:gap-4">
+          <div className="flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4">
             {/* OpenMSP Score skeleton */}
             <div className="flex flex-shrink-0 items-center gap-1">
               <MediaSkeleton.Icon size="sm" className="h-5 w-5" />
@@ -139,7 +139,7 @@ function BlogCardContent({ showActions, showMetadata }: { showActions: boolean;
       {/* Content - Fixed height structure to match BlogCard */}
       <div className="flex flex-grow flex-col p-4">
         {/* Title Section - Fixed 2 lines with vertical centering */}
-        <div className="mb-3 flex min-h-[50.4px] items-center md:min-h-[56px] lg:min-h-[61.6px]">
+        <div className="mb-3 flex min-h-[50.4px] items-center content-md:min-h-[56px] content-lg:min-h-[61.6px]">
           <div className="w-full space-y-1">
             <TextSkeleton.Subheading className="w-full" />
             <TextSkeleton.Subheading className="w-3/4" />
@@ -153,7 +153,7 @@ function BlogCardContent({ showActions, showMetadata }: { showActions: boolean;
         </div>
 
         {/* Description Section - Fixed 2 lines with vertical centering */}
-        <div className="mb-3 flex min-h-[42px] items-center md:min-h-[45px] lg:min-h-[48px]">
+        <div className="mb-3 flex min-h-[42px] items-center content-md:min-h-[45px] content-lg:min-h-[48px]">
           <div className="w-full space-y-1">
             <TextSkeleton.Body className="w-full" />
             <TextSkeleton.Body className="w-1/2" />
@@ -197,9 +197,9 @@ function BlogCardContent({ showActions, showMetadata }: { showActions: boolean;
  */
 function CategoryCardContent() {
   return (
-    <div className="space-y-4 p-4 md:p-6">
+    <div className="space-y-4 p-4 content-md:p-6">
       {/* Icon grid */}
-      <div className="flex gap-2 md:gap-3">
+      <div className="flex gap-2 content-md:gap-3">
         {Array.from({ length: 6 }).map((_, index) => (
           <MediaSkeleton.Icon key={index} size="lg" className="flex-shrink-0" />
         ))}
@@ -212,13 +212,13 @@ function CategoryCardContent() {
           <TextSkeleton.Caption className="w-1/2" />
         </div>
 
-        <div className="flex items-start justify-between gap-4 md:items-end md:gap-6">
+        <div className="flex items-start justify-between gap-4 content-md:items-end content-md:gap-6">
           <div className="flex-1 space-y-2">
             <TextSkeleton.Body className="w-full" />
             <TextSkeleton.Body className="w-2/3" />
           </div>
 
-          <InteractiveSkeleton.Button className="h-10 w-10 flex-shrink-0 md:h-12 md:w-12" />
+          <InteractiveSkeleton.Button className="h-10 w-10 flex-shrink-0 content-md:h-12 content-md:w-12" />
         </div>
       </div>
     </div>
@@ -272,11 +272,11 @@ export function CardSkeletonGrid({
   return (
     <div
       className={cn(
-        'grid gap-4 md:gap-6',
+        'grid gap-4 content-md:gap-6',
         // Responsive grid based on card type
-        variant === 'vendor' && 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-        variant === 'blog' && 'grid-cols-1 md:grid-cols-2',
-        variant === 'category' && 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+        variant === 'vendor' && 'grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-3',
+        variant === 'blog' && 'grid-cols-1 content-md:grid-cols-2',
+        variant === 'category' && 'grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-4',
         variant === 'alternative' && 'grid-cols-1',
         className,
       )}

package/src/components/loading/category-vendor-selector-skeleton.tsx

@@ -27,7 +27,7 @@ export function CategoryVendorSelectorSkeleton({ subcategories = 3, className }:
             {/* Subcategory title */}
             <TextSkeleton.Subheading className="w-1/3" />
             {/* Vendor slots container */}
-            <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
+            <div className="grid grid-cols-2 gap-4 content-md:grid-cols-3">
               {Array.from({ length: 2 }).map((__, j) => (
                 <UnifiedSkeleton key={j} className="h-20 rounded-lg" />
               ))}

package/src/components/loading/content-skeleton.tsx

@@ -39,7 +39,7 @@ export function ListSkeleton({
         <div key={index} className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             {showIcons && <MediaSkeleton.Icon size="sm" />}
-            <TextSkeleton.Body className="w-32 md:w-48" />
+            <TextSkeleton.Body className="w-32 content-md:w-48" />
           </div>
           {showActions && (
             <div className="flex items-center gap-2">
@@ -126,12 +126,12 @@ export function NavigationSkeleton({
 }) {
   return (
     <nav
-      className={cn('flex gap-4 md:gap-6', !horizontal && 'flex-col', className)}
+      className={cn('flex gap-4 content-md:gap-6', !horizontal && 'flex-col', className)}
       role="status"
       aria-label="Loading navigation"
     >
       {Array.from({ length: items }).map((_, index) => (
-        <TextSkeleton.Body key={index} className="w-16 md:w-20" />
+        <TextSkeleton.Body key={index} className="w-16 content-md:w-20" />
       ))}
     </nav>
   );
@@ -336,9 +336,9 @@ export function PricingSkeleton({ className, plans = 3 }: ContentSkeletonProps &
     <div
       className={cn(
         'grid gap-6',
-        plans === 2 && 'grid-cols-1 md:grid-cols-2',
-        plans === 3 && 'grid-cols-1 md:grid-cols-3',
-        plans === 4 && 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+        plans === 2 && 'grid-cols-1 content-md:grid-cols-2',
+        plans === 3 && 'grid-cols-1 content-md:grid-cols-3',
+        plans === 4 && 'grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-4',
         className,
       )}
     >

package/src/components/loading/device-card-skeleton.tsx

@@ -81,7 +81,7 @@ export function DeviceCardSkeleton({ className }: DeviceCardSkeletonProps) {
 export function DeviceCardSkeletonGrid({ count = 12, className }: { count?: number; className?: string }) {
   return (
     <div
-      className={cn('grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4', className)}
+      className={cn('grid grid-cols-1 gap-4 content-md:grid-cols-2 content-lg:grid-cols-4', className)}
       role="status"
       aria-label={`Loading ${count} device cards`}
     >

package/src/components/loading/margin-report-skeleton.tsx

@@ -12,7 +12,7 @@ interface MarginReportSkeletonProps {
 export function MarginReportSkeleton({ animate = true, description, overlayContent }: MarginReportSkeletonProps) {
   return (
     <main className={`bg-ods-bg ${animate ? 'animate-pulse' : ''} relative min-h-screen`}>
-      <div className="mx-auto max-w-[1920px] space-y-10 px-6 py-6 md:px-20 md:py-10">
+      <div className="mx-auto max-w-[1920px] space-y-10 px-6 py-6 content-md:px-20 content-md:py-10">
         {/* Header */}
         <div className="space-y-3">
           <div className="h-10 w-72 rounded bg-ods-skeleton" />
@@ -20,14 +20,14 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
         </div>
 
         {/* Summary cards */}
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+        <div className="grid grid-cols-1 gap-6 content-md:grid-cols-3">
           {Array.from({ length: 3 }).map((_, i) => (
             <div key={i} className="h-32 rounded border border-ods-border bg-ods-card" />
           ))}
         </div>
 
         {/* MSP Profile & Report Info cards */}
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <div className="grid grid-cols-1 gap-6 content-md:grid-cols-2">
           {/* MSP profile skeleton */}
           <div className="flex animate-pulse items-center gap-4 rounded-lg border border-ods-border bg-ods-card p-6">
             <div className="h-14 w-14 rounded-lg bg-ods-skeleton" />
@@ -54,7 +54,7 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
         </div>
 
         {/* Vendor solution lists (Commercial & Open-Source) */}
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <div className="grid grid-cols-1 gap-6 content-md:grid-cols-2">
           {['Commercial Stack', 'Open-Source Stack'].map((label, idx) => (
             <div
               key={idx}
@@ -81,7 +81,7 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
                       <div className="h-12 w-12 flex-shrink-0 rounded-lg bg-ods-skeleton" />
                       <div className="flex min-w-0 flex-col">
                         <div className="h-4 w-32 rounded bg-ods-skeleton" />
-                        <div className="mt-1 hidden h-3 w-24 rounded bg-ods-skeleton md:block" />
+                        <div className="mt-1 hidden h-3 w-24 rounded bg-ods-skeleton content-md:block" />
                       </div>
                     </div>
                     {/* right addon: cost text */}
@@ -100,7 +100,7 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
         <div className="h-6 w-60 rounded bg-ods-skeleton" />
 
         {/* Recommendations grid */}
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3">
           {Array.from({ length: 3 }).map((_, i) => (
             <div key={i} className="h-48 rounded border border-ods-border bg-ods-card" />
           ))}
@@ -119,7 +119,7 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
           </div>
 
           {/* Value cards grid */}
-          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <div className="grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3">
             {Array.from({ length: 3 }).map((_, i) => (
               <div key={i} className="h-32 rounded border border-ods-border bg-ods-card" />
             ))}

package/src/components/loading/msp-profile-form-skeleton.tsx

@@ -26,7 +26,7 @@ interface SkeletonProps {
 export function MspProfileFormSkeleton({ className, fields = 4 }: SkeletonProps) {
   return (
     <div
-      className={cn('grid grid-cols-1 items-stretch gap-6 md:grid-cols-2', className)}
+      className={cn('grid grid-cols-1 items-stretch gap-6 content-md:grid-cols-2', className)}
       role="status"
       aria-label="Loading MSP profile form"
     >
@@ -34,13 +34,13 @@ export function MspProfileFormSkeleton({ className, fields = 4 }: SkeletonProps)
       <div className="flex h-full flex-col space-y-2">
         {/* Label skeleton */}
         <TextSkeleton.Body className="w-28" />
-        <div className="min-h-[180px] flex-1 md:min-h-full">
+        <div className="min-h-[180px] flex-1 content-md:min-h-full">
           <UnifiedSkeleton className="h-full w-full rounded-lg" aria-label="Loading company logo" />
         </div>
       </div>
 
       {/* Right – Input fields grid (mirrors form) */}
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <div className="grid grid-cols-1 gap-4 content-md:grid-cols-2">
         {Array.from({ length: fields }).map((_, idx) => (
           <div key={idx} className="flex flex-col space-y-2">
             <TextSkeleton.Body className="w-40" />

package/src/components/loading/organization-card-skeleton.tsx

@@ -84,7 +84,7 @@ export function OrganizationCardSkeleton({
         {showFooter && (
           <div className="flex w-full min-w-0 items-center justify-between gap-2">
             {/* Stats Container */}
-            <div className="flex min-w-0 flex-shrink items-center gap-3 md:gap-4">
+            <div className="flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4">
               {/* Stat 1 */}
               <div className="flex flex-shrink-0 items-center gap-1">
                 <MediaSkeleton.Icon size="sm" className="h-5 w-5" />
@@ -137,7 +137,7 @@ export function OrganizationCardSkeletonGrid({
 }) {
   return (
     <div
-      className={cn('grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3', className)}
+      className={cn('grid grid-cols-1 gap-4 content-md:grid-cols-2 content-md:gap-6 content-lg:grid-cols-3', className)}
       role="status"
       aria-label={`Loading ${count} organization cards`}
     >