@flamingo-stack/openframe-frontend-core 0.0.702 → 0.0.703-snapshot.20261006080901

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

@@ -62,7 +62,7 @@ export function ContentLoadingContainer({
   children,
   skeletonComponent,
   className,
-  minHeight = 'min-h-[300px] md:min-h-[800px]',
+  minHeight = 'min-h-[300px] content-md:min-h-[800px]',
   loadingOpacity = 1,
   transitionDuration = 300,
 }: ContentLoadingContainerProps) {
@@ -120,7 +120,9 @@ export function useContentLoading(isLoading: boolean) {
 
   const getMinHeight = (contentType: 'vendor' | 'blog') => {
     // Vendor cards are typically taller, need more space
-    return contentType === 'vendor' ? 'min-h-[400px] md:min-h-[900px]' : 'min-h-[300px] md:min-h-[800px]';
+    return contentType === 'vendor'
+      ? 'min-h-[400px] content-md:min-h-[900px]'
+      : 'min-h-[300px] content-md:min-h-[800px]';
   };
 
   return {

package/src/components/docs/doc-viewer.tsx

@@ -292,9 +292,9 @@ function DocViewerContent({
           )}
 
           {!error && (
-            <div className="flex flex-1 flex-col items-start gap-6 lg:flex-row lg:gap-10">
-              <div className="w-full lg:w-[320px] lg:shrink-0">
-                <div className="lg:sticky lg:top-20">
+            <div className="flex flex-1 flex-col items-start gap-6 content-lg:flex-row content-lg:gap-10">
+              <div className="w-full content-lg:w-[320px] content-lg:shrink-0">
+                <div className="content-lg:sticky content-lg:top-20">
                   {isLoadingStructure ? (
                     <CategorySidebarSkeleton />
                   ) : (
@@ -312,7 +312,7 @@ function DocViewerContent({
                       </PersistentMobileDropdown>
 
                       <PersistentSidebar isLoading={false}>
-                        <div className="hidden lg:block">
+                        <div className="hidden content-lg:block">
                           <div className="space-y-4">
                             <h3 className="font-semibold text-ods-text-secondary text-h5">{sidebarLabel}</h3>
                             <MultiLevelNavigation
@@ -343,7 +343,7 @@ function DocViewerContent({
                     // shouldn't be on file pages" bug.
                     isMarkdownContent &&
                     ((showStickyNav && stickyNavSections.length > 0) || isLoadingContent || isLoadingStructure)
-                      ? 'lg:grid-cols-[1fr_280px]'
+                      ? 'content-lg:grid-cols-[1fr_280px]'
                       : ''
                   } gap-8`}
                 >
@@ -366,7 +366,7 @@ function DocViewerContent({
                   </div>
 
                   {isMarkdownContent && (isLoadingContent || isLoadingStructure) && (
-                    <div className="hidden lg:block">
+                    <div className="hidden content-lg:block">
                       <div className="sticky top-24">
                         <div className="mb-5 h-[14px] w-28 animate-pulse rounded bg-ods-border" />
                         <div className="space-y-0">
@@ -386,7 +386,7 @@ function DocViewerContent({
                   )}
 
                   {showStickyNav && content && stickyNavSections.length > 0 && !isLoadingContent && (
-                    <div className="hidden lg:block">
+                    <div className="hidden content-lg:block">
                       <div className="sticky top-24">
                         <h3 className="mb-4 font-semibold text-ods-text-secondary text-h5">ON THIS PAGE</h3>
                         <StickySectionNav

package/src/components/docs/skeletons.tsx

@@ -107,18 +107,21 @@ export function EmbedSkeleton({ documentType }: EmbedSkeletonProps = {}) {
   return (
     <div className="space-y-4">
       {/* Header — matches the actual viewer's
-       *  `flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between`
+       *  `flex flex-col gap-3 content-sm:flex-row content-sm:items-center content-sm:justify-between`
        *  (mobile-stacked, desktop-row). */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex flex-col gap-3 content-sm:flex-row content-sm:items-center content-sm:justify-between">
         {/* Left: icon + title */}
         <div className="flex min-w-0 flex-1 items-center gap-2">
           <div className="h-5 w-5 shrink-0 animate-pulse rounded bg-ods-border" />
           <div className="h-6 w-2/3 animate-pulse rounded bg-ods-border" />
         </div>
         {/* Right: 1 or 2 buttons. Mobile = full-width; desktop = auto. */}
-        <div className="flex w-full items-center gap-2 sm:w-auto">
+        <div className="flex w-full items-center gap-2 content-sm:w-auto">
           {Array.from({ length: buttonCount }).map((_, i) => (
-            <div key={i} className="h-10 w-full flex-1 animate-pulse rounded bg-ods-border sm:w-32 sm:flex-initial" />
+            <div
+              key={i}
+              className="h-10 w-full flex-1 animate-pulse rounded bg-ods-border content-sm:w-32 content-sm:flex-initial"
+            />
           ))}
         </div>
       </div>

package/src/components/dynamic-skeleton.tsx

@@ -246,7 +246,7 @@ export const SkeletonPresets = {
    * Vendor grid skeleton (specific to the app)
    */
   VendorGrid: ({ items = 6 }: { items?: number }) => (
-    <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: items }, (_, index) => (
         <div key={index} className="space-y-3 rounded-lg border border-ods-border bg-ods-card p-4">
           <div className="flex items-center gap-3">

package/src/components/embeds/claude-embed.tsx

@@ -79,7 +79,7 @@ export function ClaudeEmbed({ url, kind = 'artifact', title, height, loading = '
           openInNewTab
           leftIcon={<ClaudeIcon className="h-4 w-4" />}
           rightIcon={<ExternalLink className="h-4 w-4" />}
-          className="w-full sm:w-auto"
+          className="w-full content-sm:w-auto"
         >
           Open in Claude
         </Button>

package/src/components/embeds/embed-viewer-frame.tsx

@@ -121,7 +121,7 @@ export function EmbedViewerFrame({
         isFullscreen && 'overflow-auto bg-ods-bg p-[var(--spacing-system-mf)]',
       )}
     >
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex flex-col gap-3 content-sm:flex-row content-sm:items-center content-sm:justify-between">
         <div className="flex min-w-0 items-center gap-2">
           {icon}
           {titleVariant === 'h3' ? (
@@ -133,12 +133,12 @@ export function EmbedViewerFrame({
         {/* Same responsive action-row idiom as the PDF viewer's button pair
             and every viewer's own action: full-width stacked on mobile,
             inline row from `sm:` up, SAME Button idiom (outline /
-            small-legacy / w-4 icon / w-full sm:w-auto). Without the
+            small-legacy / w-4 icon / w-full content-sm:w-auto). Without the
             fullscreen toggle, `actions` renders EXACTLY as before — the
             wrapper exists only when the toggle joins it, so pre-existing
             viewers (figma/pdf/sheets) are byte-identical. */}
         {fullscreenControl && src ? (
-          <div className="flex flex-col gap-[var(--spacing-system-xsf)] sm:flex-row sm:items-center">
+          <div className="flex flex-col gap-[var(--spacing-system-xsf)] content-sm:flex-row content-sm:items-center">
             {actions}
             <Button
               variant="outline"
@@ -146,7 +146,7 @@ export function EmbedViewerFrame({
               onClick={toggleFullscreen}
               aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
               leftIcon={isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
-              className="w-full sm:w-auto"
+              className="w-full content-sm:w-auto"
             >
               {isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
             </Button>

package/src/components/embeds/figma-embed.tsx

@@ -105,7 +105,7 @@ export function FigmaEmbed({ url, title, height, loading = 'lazy' }: FigmaEmbedP
       title={heading}
       titleVariant="h6"
       actions={
-        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+        <div className="flex flex-col gap-2 content-sm:flex-row content-sm:items-center">
           {isSlides && embedSrc && <SlidesViewToggle view={view} onChange={setView} />}
           {originalUrl && (
             <Button
@@ -115,7 +115,7 @@ export function FigmaEmbed({ url, title, height, loading = 'lazy' }: FigmaEmbedP
               openInNewTab
               leftIcon={<FigmaIcon className="h-4 w-4" />}
               rightIcon={<ExternalLink className="h-4 w-4" />}
-              className="w-full sm:w-auto"
+              className="w-full content-sm:w-auto"
             >
               Open in Figma
             </Button>

package/src/components/embeds/google-sheets-viewer.tsx

@@ -38,7 +38,7 @@ export function GoogleSheetsViewer({ externalUrl, fileName, height }: GoogleShee
           openInNewTab
           leftIcon={<GoogleSheetsIcon className="h-4 w-4" />}
           rightIcon={<ExternalLink className="h-4 w-4" />}
-          className="w-full sm:w-auto"
+          className="w-full content-sm:w-auto"
         >
           Open in Google Sheets
         </Button>

package/src/components/embeds/pdf-viewer.tsx

@@ -31,7 +31,7 @@ export function PdfViewer({ src, fileName, onPreview, onDownload, height }: PdfV
       icon={<AdobePdfIcon className="h-5 w-5 shrink-0" />}
       title={displayName}
       actions={
-        <div className="flex w-full items-center gap-2 sm:w-auto">
+        <div className="flex w-full items-center gap-2 content-sm:w-auto">
           <Button
             variant="outline"
             size="small-legacy"
@@ -39,7 +39,7 @@ export function PdfViewer({ src, fileName, onPreview, onDownload, height }: PdfV
             openInNewTab={!onPreview}
             onClick={onPreview}
             leftIcon={<Eye className="h-4 w-4" />}
-            className="flex-1 sm:flex-initial"
+            className="flex-1 content-sm:flex-initial"
           >
             Preview
           </Button>
@@ -50,7 +50,7 @@ export function PdfViewer({ src, fileName, onPreview, onDownload, height }: PdfV
             openInNewTab={!onDownload}
             onClick={onDownload}
             leftIcon={<Download className="h-4 w-4" />}
-            className="flex-1 sm:flex-initial"
+            className="flex-1 content-sm:flex-initial"
           >
             Download
           </Button>

package/src/components/empty-state.tsx

@@ -164,21 +164,21 @@ export function EmptyState({
   const ctaButtonVariant = ctaVariant === 'primary' ? 'accent' : 'outline';
 
   return (
-    <div className="flex flex-col items-center justify-center px-6 py-6 text-center md:py-16">
+    <div className="flex flex-col items-center justify-center px-6 py-6 text-center content-md:py-16">
       {/* Icon */}
-      <div className="mb-3 flex items-center justify-center md:mb-6">
-        <div className="rounded-full border border-ods-border bg-ods-card p-3 md:p-6">
-          <div className="flex h-8 w-8 items-center justify-center text-ods-text-secondary md:h-16 md:w-16">
+      <div className="mb-3 flex items-center justify-center content-md:mb-6">
+        <div className="rounded-full border border-ods-border bg-ods-card p-3 content-md:p-6">
+          <div className="flex h-8 w-8 items-center justify-center text-ods-text-secondary content-md:h-16 content-md:w-16">
             {defaultContent.icon}
           </div>
         </div>
       </div>
 
       {/* Title */}
-      <h2 className="mb-2 text-ods-text-primary text-h3 md:mb-3">{displayTitle}</h2>
+      <h2 className="mb-2 text-ods-text-primary text-h3 content-md:mb-3">{displayTitle}</h2>
 
       {/* Description */}
-      <p className="mb-4 max-w-md text-ods-text-secondary text-h6 md:mb-8">{displayDescription}</p>
+      <p className="mb-4 max-w-md text-ods-text-secondary text-h6 content-md:mb-8">{displayDescription}</p>
 
       {/* Link CTA (ctaHref) — SSR-safe, no path sniffing */}
       {showCTA && ctaHref && (

package/src/components/faq/faq-section.tsx

@@ -315,10 +315,10 @@ function GroupedFaqList({
 function FaqSkeleton() {
   return (
     <div className="animate-pulse space-y-8">
-      <div className="h-12 w-2/3 rounded bg-ods-border md:h-14" />
+      <div className="h-12 w-2/3 rounded bg-ods-border content-md:h-14" />
       <div className="w-full divide-y divide-ods-border overflow-hidden rounded-md border border-ods-border bg-transparent">
         {Array.from({ length: 8 }).map((_, idx) => (
-          <div key={idx} className="flex items-center justify-between gap-6 px-6 py-4 md:gap-10">
+          <div key={idx} className="flex items-center justify-between gap-6 px-6 py-4 content-md:gap-10">
             <div className="h-6 w-5/6 rounded bg-ods-border" />
             <div className="size-6 rounded bg-ods-border" />
           </div>

package/src/components/faq-accordion.tsx

@@ -56,7 +56,7 @@ export function FaqAccordion({ items, defaultOpenIds = [] }: FaqAccordionProps)
                 }
               }}
               aria-expanded={isOpen}
-              className="flex w-full cursor-pointer items-center gap-6 px-6 py-4 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus md:gap-10"
+              className="flex w-full cursor-pointer items-center gap-6 px-6 py-4 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus content-md:gap-10"
             >
               <h3 className="min-w-0 flex-1 break-words">{item.question}</h3>
               <Chevron02DownIcon

package/src/components/features/board/board-column-header.tsx

@@ -29,7 +29,7 @@ export function BoardColumnHeader({
   const useStatusVariant = resolveTicketStatus(tagStatus) !== null;
   // The dense header size on every input mode — the mobile mock keeps the
   // lane's info/collapse buttons small, same as desktop.
-  const actionClass = 'h-8 w-8 p-0 md:h-8 md:w-8';
+  const actionClass = 'h-8 w-8 p-0 content-md:h-8 content-md:w-8';
 
   if (collapsed) {
     return (

package/src/components/features/command-box.tsx

@@ -164,7 +164,7 @@ export function CommandBox({
           commandText
         )}
         {(primaryAction || secondaryAction) && (
-          <div className="mt-4 flex flex-col gap-3 md:flex-row md:justify-end">
+          <div className="mt-4 flex flex-col gap-3 content-md:flex-row content-md:justify-end">
             {secondaryAction && (
               <Button
                 variant={secondaryAction.variant || 'outline'}
@@ -172,7 +172,7 @@ export function CommandBox({
                 onClick={secondaryAction.onClick}
                 disabled={secondaryAction.disabled}
                 loading={secondaryAction.loading}
-                className="w-full md:w-auto"
+                className="w-full content-md:w-auto"
               >
                 {secondaryAction.label}
               </Button>
@@ -184,7 +184,7 @@ export function CommandBox({
                 onClick={primaryAction.onClick}
                 disabled={primaryAction.disabled}
                 loading={primaryAction.loading}
-                className="w-full md:w-auto"
+                className="w-full content-md:w-auto"
               >
                 {primaryAction.label}
               </Button>

package/src/components/features/entity-video-section.tsx

@@ -143,13 +143,13 @@ export function EntityVideoSection({
             <TabsList className="inline-flex h-auto justify-start gap-0 rounded-none bg-transparent p-0">
               <TabsTrigger
                 value="full-video"
-                className="rounded-none border-b-2 border-transparent px-4 py-3 text-ods-text-secondary data-[state=active]:border-ods-accent data-[state=active]:bg-transparent data-[state=active]:text-ods-text-primary data-[state=active]:shadow-none md:px-6"
+                className="rounded-none border-b-2 border-transparent px-4 py-3 text-ods-text-secondary data-[state=active]:border-ods-accent data-[state=active]:bg-transparent data-[state=active]:text-ods-text-primary data-[state=active]:shadow-none content-md:px-6"
               >
                 Full Video
               </TabsTrigger>
               <TabsTrigger
                 value="highlights"
-                className="rounded-none border-b-2 border-transparent px-4 py-3 text-ods-text-secondary data-[state=active]:border-ods-accent data-[state=active]:bg-transparent data-[state=active]:text-ods-text-primary data-[state=active]:shadow-none md:px-6"
+                className="rounded-none border-b-2 border-transparent px-4 py-3 text-ods-text-secondary data-[state=active]:border-ods-accent data-[state=active]:bg-transparent data-[state=active]:text-ods-text-primary data-[state=active]:shadow-none content-md:px-6"
               >
                 Highlights
               </TabsTrigger>

package/src/components/features/figma-prototype-viewer.tsx

@@ -370,7 +370,10 @@ function UnifiedUI({ state, handlers, config, iframeRef }: UnifiedUIProps) {
 
   return (
     <div
-      className={cn(config.hideControls ? '' : 'grid grid-cols-1 gap-10 lg:grid-cols-[296px_1fr]', config.className)}
+      className={cn(
+        config.hideControls ? '' : 'grid grid-cols-1 gap-10 content-lg:grid-cols-[296px_1fr]',
+        config.className,
+      )}
     >
       {/* Section Controls */}
       {showSectionSelector && !config.hideControls && (

package/src/components/features/media-gallery-manager.tsx

@@ -328,7 +328,9 @@ export function MediaGalleryManager({
             <h3 className="text-ods-text-primary text-h3">Media Gallery ({media.length})</h3>
             <p className="text-ods-text-secondary text-h6">Drag to reorder</p>
           </div>
-          <div className={cn('grid grid-cols-1 gap-4 md:grid-cols-2', columns === 3 && 'lg:grid-cols-3')}>
+          <div
+            className={cn('grid grid-cols-1 gap-4 content-md:grid-cols-2', columns === 3 && 'content-lg:grid-cols-3')}
+          >
             {media.map((item, index) => (
               <Card
                 key={item.id ?? `${item.media_url}-${index}`}

package/src/components/features/parallax-image-showcase.tsx

@@ -127,7 +127,7 @@ export const ParallaxImageShowcase: React.FC<ParallaxImageShowcaseProps> = ({
   if (layout === 'grid') {
     return (
       <div ref={componentRef} className={`relative flex h-full w-full items-center ${className}`}>
-        <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-3">
+        <div className="grid w-full grid-cols-1 gap-4 content-md:grid-cols-3">
           {/* Image #1 - Left */}
           {leftImage && (
             <motion.div
@@ -206,7 +206,10 @@ export const ParallaxImageShowcase: React.FC<ParallaxImageShowcaseProps> = ({
         <div className="absolute inset-x-0 top-32 h-80">
           {/* Left half: Image overlaps to the left */}
           {leftImage && (
-            <motion.div className="absolute left-20 z-10 h-full w-full lg:w-1/2" style={{ x: x, y: y, rotate: rotate }}>
+            <motion.div
+              className="absolute left-20 z-10 h-full w-full content-lg:w-1/2"
+              style={{ x: x, y: y, rotate: rotate }}
+            >
               <Image
                 src={leftImage.src}
                 alt={leftImage.alt}
@@ -221,7 +224,7 @@ export const ParallaxImageShowcase: React.FC<ParallaxImageShowcaseProps> = ({
           {/* Right half: Image overlaps to the right */}
           {centerImage && (
             <motion.div
-              className="absolute right-20 top-20 z-20 h-full w-full lg:w-1/2"
+              className="absolute right-20 top-20 z-20 h-full w-full content-lg:w-1/2"
               style={{ x: x, y: y, rotate: rotate }}
             >
               <Image
@@ -245,7 +248,7 @@ export const ParallaxImageShowcase: React.FC<ParallaxImageShowcaseProps> = ({
       {/* Image #3 - Behind all - z-index 1 */}
       {rightImage && (
         <motion.div
-          className="absolute right-[5%] top-[5%] z-[1] h-[60%] w-[80%] lg:right-[-15%] lg:top-[-10%] lg:h-[85%] lg:w-[120%]"
+          className="absolute right-[5%] top-[5%] z-[1] h-[60%] w-[80%] content-lg:right-[-15%] content-lg:top-[-10%] content-lg:h-[85%] content-lg:w-[120%]"
           style={{
             x: x,
             y: y,
@@ -265,7 +268,7 @@ export const ParallaxImageShowcase: React.FC<ParallaxImageShowcaseProps> = ({
       {/* Image #2 - Middle layer - z-index 2 */}
       {centerImage && (
         <motion.div
-          className="absolute bottom-[10%] right-[0%] z-[2] h-[55%] w-[75%] lg:bottom-[-15%] lg:right-[-20%] lg:h-[80%] lg:w-[100%]"
+          className="absolute bottom-[10%] right-[0%] z-[2] h-[55%] w-[75%] content-lg:bottom-[-15%] content-lg:right-[-20%] content-lg:h-[80%] content-lg:w-[100%]"
           style={{
             x: x,
             y: y,
@@ -285,7 +288,7 @@ export const ParallaxImageShowcase: React.FC<ParallaxImageShowcaseProps> = ({
       {/* Image #1 - On top - z-index 3 */}
       {leftImage && (
         <motion.div
-          className="absolute left-[-5%] top-[10%] z-[3] h-[65%] w-[85%] lg:left-[-25%] lg:top-[0%] lg:h-[90%] lg:w-[110%]"
+          className="absolute left-[-5%] top-[10%] z-[3] h-[65%] w-[85%] content-lg:left-[-25%] content-lg:top-[0%] content-lg:h-[90%] content-lg:w-[110%]"
           style={{
             x: x,
             y: y,

package/src/components/features/policy-configuration-panel.tsx

@@ -80,7 +80,7 @@ const PolicyRow: FC<{
   };
 
   return (
-    <div className="flex items-start gap-[var(--spacing-system-m)] border-b border-ods-border bg-ods-bg px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] last:border-b-0 md:items-center">
+    <div className="flex items-start gap-[var(--spacing-system-m)] border-b border-ods-border bg-ods-bg px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] last:border-b-0 content-md:items-center">
       {/* Tool Icon */}
       <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-bg">
         <ToolIcon toolType={policy.toolName} size={16} />
@@ -93,7 +93,7 @@ const PolicyRow: FC<{
         </p>
         <p className="break-all text-ods-text-secondary text-h6">{policy.commandPattern}</p>
         {editMode ? (
-          <div className="mt-[var(--spacing-system-xsf)] md:hidden">
+          <div className="mt-[var(--spacing-system-xsf)] content-md:hidden">
             <ApprovalLevelDropdown
               value={policy.approvalLevel}
               onChange={handleChange}
@@ -102,12 +102,14 @@ const PolicyRow: FC<{
             />
           </div>
         ) : policy.approvalLevel ? (
-          <span className="text-ods-text-primary text-h4 md:hidden">{getApprovalLevelLabel(policy.approvalLevel)}</span>
+          <span className="text-ods-text-primary text-h4 content-md:hidden">
+            {getApprovalLevelLabel(policy.approvalLevel)}
+          </span>
         ) : null}
       </div>
 
       {/* Approval Level column (desktop only) */}
-      <div className="hidden shrink-0 md:block">
+      <div className="hidden shrink-0 content-md:block">
         {editMode ? (
           <ApprovalLevelDropdown
             value={policy.approvalLevel}
@@ -159,7 +161,7 @@ const CategorySection: FC<{
           </p>
           <p className="text-ods-text-secondary text-h6">{category.policies.length} Configurations</p>
           {editMode && (
-            <div className="mt-[var(--spacing-system-xsf)] md:hidden" onClick={e => e.stopPropagation()}>
+            <div className="mt-[var(--spacing-system-xsf)] content-md:hidden" onClick={e => e.stopPropagation()}>
               <ApprovalLevelDropdown
                 value={bulkLevel}
                 onChange={handleBulkChange}
@@ -173,7 +175,7 @@ const CategorySection: FC<{
 
         {/* Global Permission column (desktop only) */}
         {editMode ? (
-          <div className="hidden shrink-0 md:block" onClick={e => e.stopPropagation()}>
+          <div className="hidden shrink-0 content-md:block" onClick={e => e.stopPropagation()}>
             <ApprovalLevelDropdown
               value={bulkLevel}
               onChange={handleBulkChange}
@@ -185,7 +187,7 @@ const CategorySection: FC<{
         ) : (
           <div
             className={cn(
-              'hidden shrink-0 px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] md:block',
+              'hidden shrink-0 px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] content-md:block',
               CATEGORY_LEVEL_WIDTH,
             )}
           />

package/src/components/features/provider-button.tsx

@@ -75,7 +75,7 @@ export function ProviderButton({ provider, onClick, disabled = false, loading =
       variant="outline"
       size="default"
       leftIcon={isLoading ? null : <IconComponent className="h-5 w-5" />}
-      className={`h-[56px] w-full !font-bold !text-h6 hover:bg-ods-bg-hover md:!w-full ${isLoading ? 'cursor-wait' : 'cursor-pointer'} `}
+      className={`h-[56px] w-full !font-bold !text-h6 hover:bg-ods-bg-hover content-md:!w-full ${isLoading ? 'cursor-wait' : 'cursor-pointer'} `}
       aria-label={config.displayName}
     >
       {isLoading ? 'Signing in...' : config.displayName}

package/src/components/features/section-selector.tsx

@@ -102,7 +102,7 @@ const SectionButton: React.FC<{
         isActive && activeButtonClassName,
         layout === 'vertical'
           ? // Strip below lg: a compact, non-shrinking tab. Side list from lg: the full card.
-            '!h-auto !min-h-12 shrink-0 !px-[var(--spacing-system-mf)] !py-[var(--spacing-system-sf)] lg:!min-h-[var(--section-min-height)] lg:shrink lg:!py-[var(--spacing-system-mf)]'
+            '!h-auto !min-h-12 shrink-0 !px-[var(--spacing-system-mf)] !py-[var(--spacing-system-sf)] content-lg:!min-h-[var(--section-min-height)] content-lg:shrink content-lg:!py-[var(--spacing-system-mf)]'
           : '!h-auto !min-h-[76px] !whitespace-normal !text-left',
       )}
       style={{
@@ -125,7 +125,12 @@ const SectionButton: React.FC<{
           {section.number && <span className={cn(numberClasses, 'shrink-0 text-h3')}>{section.number}</span>}
           <div className="min-w-0 flex-1 text-left">
             <div className="flex flex-wrap items-center gap-2">
-              <p className={cn(titleClasses, 'whitespace-nowrap text-h4 lg:whitespace-normal lg:break-words')}>
+              <p
+                className={cn(
+                  titleClasses,
+                  'whitespace-nowrap text-h4 content-lg:whitespace-normal content-lg:break-words',
+                )}
+              >
                 {section.title}
               </p>
               {section.badge && (
@@ -137,7 +142,7 @@ const SectionButton: React.FC<{
               )}
             </div>
             {section.description && showDescription && (
-              <p className={cn(subtitleClasses, 'mt-1 hidden whitespace-normal break-words text-h6 lg:block')}>
+              <p className={cn(subtitleClasses, 'mt-1 hidden whitespace-normal break-words text-h6 content-lg:block')}>
                 {section.description}
               </p>
             )}
@@ -189,8 +194,8 @@ export const SectionSelector: React.FC<SectionSelectorProps> = ({
 }) => {
   const containerClasses = cn(
     layout === 'wrap'
-      ? 'flex flex-wrap gap-2 md:gap-4 lg:gap-6'
-      : 'flex flex-row gap-[var(--spacing-system-xsf)] overflow-x-auto [scrollbar-width:none] lg:flex-col lg:overflow-visible [&::-webkit-scrollbar]:hidden',
+      ? 'flex flex-wrap gap-2 content-md:gap-4 content-lg:gap-6'
+      : 'flex flex-row gap-[var(--spacing-system-xsf)] overflow-x-auto [scrollbar-width:none] content-lg:flex-col content-lg:overflow-visible [&::-webkit-scrollbar]:hidden',
     className,
   );
 
@@ -242,7 +247,7 @@ export const SectionSelector: React.FC<SectionSelectorProps> = ({
       case 'full':
         return 'w-full';
       case 'responsive':
-        return 'w-full md:w-[calc(50%-8px)] lg:w-auto';
+        return 'w-full content-md:w-[calc(50%-8px)] content-lg:w-auto';
       default:
         return '';
     }

package/src/components/features/select-button.tsx

@@ -47,7 +47,7 @@ export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProp
         disabled={disabled}
         onClick={onClick}
         className={cn(
-          'group flex h-11 items-center gap-1 rounded-[6px] border px-3 py-3 transition-colors duration-200 md:h-16 md:gap-2 md:px-4',
+          'group flex h-11 items-center gap-1 rounded-[6px] border px-3 py-3 transition-colors duration-200 content-md:h-16 content-md:gap-2 content-md:px-4',
           'w-full text-left font-body',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
           'disabled:pointer-events-none disabled:opacity-50',
@@ -63,7 +63,7 @@ export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProp
         {icon && (
           <span
             className={cn(
-              'flex size-4 shrink-0 items-center justify-center md:size-6',
+              'flex size-4 shrink-0 items-center justify-center content-md:size-6',
               selected ? 'text-ods-accent' : 'text-ods-text-secondary',
             )}
           >
@@ -91,7 +91,7 @@ export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProp
           {description && (
             <span
               className={cn(
-                'hidden truncate text-h6 md:flex',
+                'hidden truncate text-h6 content-md:flex',
                 selected ? 'text-ods-accent' : 'text-ods-text-secondary',
               )}
               title={description}
@@ -103,7 +103,7 @@ export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProp
 
         {tag && <Tag variant={tagVariant} className="shrink-0" label={tag} />}
 
-        {selected && <CheckCircleIcon className="size-4 shrink-0 text-ods-accent md:size-6" />}
+        {selected && <CheckCircleIcon className="size-4 shrink-0 text-ods-accent content-md:size-6" />}
       </button>
     );
   },

package/src/components/features/seo-editor-preview.tsx

@@ -121,7 +121,7 @@ export function SEOEditorPreview({
           both columns share one label-row geometry; badges + the char counter
           ride the label row (labelExtras / labelEnd) instead of adding stray
           rows that misalign siblings. */}
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+      <div className="grid grid-cols-1 gap-4 content-lg:grid-cols-2">
         <div className="space-y-2">
           <Field
             label="SEO Title"
@@ -195,7 +195,7 @@ export function SEOEditorPreview({
       </div>
 
       {/* SEO Description & OG Image - Same Row */}
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+      <div className="grid grid-cols-1 gap-4 content-lg:grid-cols-2">
         <div className="space-y-2">
           <Field
             label="SEO Description"

package/src/components/features/video-ratio-tabs.tsx

@@ -42,9 +42,9 @@ const TAB_TRIGGER_CLASS =
 
 /** Grid class for each aspect ratio (admin editors — narrower columns). */
 export const RATIO_GRID_CLASS: Record<RatioCategory, string> = {
-  portrait: 'grid grid-cols-2 md:grid-cols-3 gap-4',
-  square: 'grid grid-cols-2 md:grid-cols-3 gap-4',
-  landscape: 'grid grid-cols-1 md:grid-cols-2 gap-4',
+  portrait: 'grid grid-cols-2 content-md:grid-cols-3 gap-4',
+  square: 'grid grid-cols-2 content-md:grid-cols-3 gap-4',
+  landscape: 'grid grid-cols-1 content-md:grid-cols-2 gap-4',
 };
 
 /** CSS `aspect-ratio` value per category — sizing for strip cards + placeholders. */

package/src/components/features/waitlist-form.tsx

@@ -305,7 +305,7 @@ export function WaitlistForm({
           disabled={isSubmitting}
           leftIcon={<OpenFrameLogo />}
           onClick={handleSubmit}
-          className="w-full md:w-auto"
+          className="w-full content-md:w-auto"
         >
           {isSuccess ? successLabel : submitLabel}
         </Button>

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

@@ -277,7 +277,7 @@ export function TrustCenterPage({
             })}
           </div>
 
-          <aside className="hidden lg:block" aria-label="Trust center sections">
+          <aside className="hidden content-lg:block" aria-label="Trust center sections">
             <div className="sticky" style={{ top: STICKY_HEADER_OFFSET_PX }}>
               <StickySectionNav
                 sections={sections.map(section => ({ id: section.id, label: section.label }))}