diff --git a/frontend/src/components/Logo/index.tsx b/frontend/src/components/Logo/index.tsx
index a582e29..30747d0 100644
--- a/frontend/src/components/Logo/index.tsx
+++ b/frontend/src/components/Logo/index.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image'
 import React from 'react'
 
 type Props = {
@@ -6,10 +7,12 @@ type Props = {
 
 export default function Logo({ className = '' }: Props) {
   return (
-    <img
-      src={"https://flatlogic.com/logo.svg"}
+    <Image
+      src="https://flatlogic.com/logo.svg"
       className={className}
-      alt={'Flatlogic logo'}>
-    </img>
+      alt="Flatlogic logo"
+      width={160}
+      height={32}
+    />
   )
 }
diff --git a/frontend/src/pages/profile.tsx b/frontend/src/pages/profile.tsx
index f5eb7cf..000ed48 100644
--- a/frontend/src/pages/profile.tsx
+++ b/frontend/src/pages/profile.tsx
@@ -3,6 +3,7 @@ import {
     mdiUpload,
 } from '@mdi/js';
 import Head from 'next/head';
+import Image from 'next/image';
 import React, { ReactElement, useEffect, useState } from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 import DatePicker from 'react-datepicker';
@@ -84,7 +85,13 @@ const EditUsers = () => {
                 <CardBox>
                     {currentUser?.avatar[0]?.publicUrl && <div className={'grid grid-cols-6 gap-4 mb-4'}>
                         <div className="col-span-1 w-80 h-80 overflow-hidden border-2 rounded-full inline-flex items-center justify-center mb-8">
-                            <img className="w-80 h-80 max-w-full max-h-full object-cover object-center"  src={`${currentUser?.avatar[0]?.publicUrl}`} alt="Avatar" />
+                            <Image
+                                className="w-80 h-80 max-w-full max-h-full object-cover object-center"
+                                src={`${currentUser?.avatar[0]?.publicUrl}`}
+                                alt="Avatar"
+                                width={320}
+                                height={320}
+                            />
                         </div>
                     </div>}
                     <Formik
diff --git a/frontend/src/pages/sites/analyzer.tsx b/frontend/src/pages/sites/analyzer.tsx
index 4656773..0ac7350 100644
--- a/frontend/src/pages/sites/analyzer.tsx
+++ b/frontend/src/pages/sites/analyzer.tsx
@@ -135,10 +135,13 @@ type ReportResponse = {
 
 type SetupSectionId = 'targeting' | 'options' | 'limits';
 type ResultsTabId = 'overview' | 'pages' | 'recommendations' | 'delivery';
+type PageResultsFilterId = 'all' | 'withSchema' | 'missingSchema' | 'failed';
+type RecommendationQuickFilterId = 'all' | 'fixFirst' | 'codeReady' | 'needsCode';
 
 type SetupAccordionSectionProps = {
   title: string;
   description: string;
+  iconPath: string;
   badge?: React.ReactNode;
   isOpen: boolean;
   onToggle: () => void;
@@ -147,11 +150,36 @@ type SetupAccordionSectionProps = {
 
 type ResultsTabButtonProps = {
   label: string;
+  iconPath: string;
   count?: number | string;
   isActive: boolean;
   onClick: () => void;
 };
 
+type PageFilterChipProps = {
+  label: string;
+  count: number;
+  iconPath: string;
+  isActive: boolean;
+  onClick: () => void;
+};
+
+type DeliverySummaryCardProps = {
+  label: string;
+  value: string | number;
+  helper: string;
+  iconPath: string;
+  toneClassName?: string;
+};
+
+type DeliveryActionCardProps = {
+  title: string;
+  description: string;
+  iconPath: string;
+  badge?: React.ReactNode;
+  children: React.ReactNode;
+};
+
 const PLATFORM_OPTIONS = [
   { value: 'wordpress', label: 'WordPress' },
   { value: 'shopify', label: 'Shopify' },
@@ -166,31 +194,163 @@ const parseTargetLines = (value: string) => value
   .map((entry) => entry.trim())
   .filter(Boolean);
 
+const recommendationPriorityOrder = ['critical', 'high', 'medium', 'low', 'other'] as const;
+type RecommendationPriorityId = (typeof recommendationPriorityOrder)[number];
+
+type RecommendationPriorityMeta = {
+  id: RecommendationPriorityId;
+  label: string;
+  sortOrder: number;
+  iconPath: string;
+  badgeClassName: string;
+  sectionTitle: string;
+  sectionDescription: string;
+  accentClassName: string;
+};
+
+const recommendationPriorityMetaMap: Record<RecommendationPriorityId, RecommendationPriorityMeta> = {
+  critical: {
+    id: 'critical',
+    label: 'Critical',
+    sortOrder: 0,
+    iconPath: icon.mdiAlertCircleOutline,
+    badgeClassName: 'bg-rose-600 text-white dark:bg-rose-500 dark:text-white',
+    sectionTitle: 'Critical fixes first',
+    sectionDescription: 'Resolve these before anything else because they are the most urgent structured data gaps.',
+    accentClassName: 'border-rose-200 bg-rose-50/80 dark:border-rose-500/30 dark:bg-rose-500/10',
+  },
+  high: {
+    id: 'high',
+    label: 'High',
+    sortOrder: 1,
+    iconPath: icon.mdiAlertOutline,
+    badgeClassName: 'bg-amber-500 text-white dark:bg-amber-400 dark:text-slate-950',
+    sectionTitle: 'High priority',
+    sectionDescription: 'These recommendations should be tackled early because they likely affect key pages or important schema coverage.',
+    accentClassName: 'border-amber-200 bg-amber-50/80 dark:border-amber-500/30 dark:bg-amber-500/10',
+  },
+  medium: {
+    id: 'medium',
+    label: 'Medium',
+    sortOrder: 2,
+    iconPath: icon.mdiArrowDownCircleOutline,
+    badgeClassName: 'bg-sky-600 text-white dark:bg-sky-500 dark:text-white',
+    sectionTitle: 'Next up',
+    sectionDescription: 'Address these after the urgent items to improve broader coverage and quality.',
+    accentClassName: 'border-sky-200 bg-sky-50/80 dark:border-sky-500/30 dark:bg-sky-500/10',
+  },
+  low: {
+    id: 'low',
+    label: 'Low',
+    sortOrder: 3,
+    iconPath: icon.mdiCheckCircleOutline,
+    badgeClassName: 'bg-emerald-600 text-white dark:bg-emerald-500 dark:text-white',
+    sectionTitle: 'Quick wins',
+    sectionDescription: 'Useful polish items that can be handled once higher-impact fixes are moving.',
+    accentClassName: 'border-emerald-200 bg-emerald-50/80 dark:border-emerald-500/30 dark:bg-emerald-500/10',
+  },
+  other: {
+    id: 'other',
+    label: 'Unprioritized',
+    sortOrder: 4,
+    iconPath: icon.mdiLightbulbOutline,
+    badgeClassName: 'bg-slate-800 text-white dark:bg-slate-200 dark:text-slate-950',
+    sectionTitle: 'More opportunities',
+    sectionDescription: 'These are useful follow-up ideas that were not assigned a stronger priority label.',
+    accentClassName: 'border-slate-200 bg-slate-50/80 dark:border-slate-700 dark:bg-slate-900/40',
+  },
+};
+
+const normalizeRecommendationPriority = (priority?: string): RecommendationPriorityId => {
+  const normalizedPriority = priority?.trim().toLowerCase();
+
+  if (!normalizedPriority) {
+    return 'other';
+  }
+
+  if (normalizedPriority.includes('critical') || normalizedPriority === 'p0') {
+    return 'critical';
+  }
+
+  if (normalizedPriority.includes('high') || normalizedPriority === 'p1') {
+    return 'high';
+  }
+
+  if (normalizedPriority.includes('medium') || normalizedPriority.includes('med') || normalizedPriority === 'p2') {
+    return 'medium';
+  }
+
+  if (normalizedPriority.includes('low') || normalizedPriority === 'p3') {
+    return 'low';
+  }
+
+  return 'other';
+};
+
+const getRecommendationPriorityMeta = (priority?: string) => recommendationPriorityMetaMap[normalizeRecommendationPriority(priority)];
+
+const isFixFirstRecommendation = (recommendation: Recommendation) => {
+  const priorityId = normalizeRecommendationPriority(recommendation.priority);
+  return priorityId === 'critical' || priorityId === 'high';
+};
+
+const getRecommendationScopeSortOrder = (pageScope?: string) => {
+  const normalizedScope = pageScope?.trim().toLowerCase() || '';
+
+  if (!normalizedScope) {
+    return 4;
+  }
+
+  if (normalizedScope.includes('site') || normalizedScope.includes('global') || normalizedScope.includes('all')) {
+    return 0;
+  }
+
+  if (normalizedScope.includes('home')) {
+    return 1;
+  }
+
+  if (normalizedScope.includes('template') || normalizedScope.includes('category') || normalizedScope.includes('collection') || normalizedScope.includes('product')) {
+    return 2;
+  }
+
+  if (normalizedScope.includes('page')) {
+    return 3;
+  }
+
+  return 4;
+};
+
 const SetupAccordionSection = ({
   title,
   description,
+  iconPath,
   badge,
   isOpen,
   onToggle,
   children,
 }: SetupAccordionSectionProps) => (
-  <div className='overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-900/40'>
+  <div className='overflow-hidden rounded-2xl border border-slate-200 bg-slate-50/90 shadow-sm dark:border-slate-700 dark:bg-slate-900/40'>
     <button
       type='button'
-      className='flex w-full items-start justify-between gap-4 px-5 py-4 text-left'
+      className='flex w-full items-start justify-between gap-3 px-4 py-4 text-left sm:gap-4 sm:px-5'
       onClick={onToggle}
       aria-expanded={isOpen}
     >
-      <div>
-        <div className='flex flex-wrap items-center gap-3'>
-          <h3 className='text-base font-semibold text-slate-900 dark:text-white'>{title}</h3>
-          {badge && (
-            <span className='rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-600 dark:bg-slate-950/50 dark:text-slate-200'>
-              {badge}
-            </span>
-          )}
+      <div className='flex items-start gap-3'>
+        <span className='mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white text-slate-600 shadow-sm dark:bg-slate-950/60 dark:text-slate-200 sm:h-10 sm:w-10 sm:rounded-2xl'>
+          <BaseIcon path={iconPath} size={18} />
+        </span>
+        <div>
+          <div className='flex flex-wrap items-center gap-3'>
+            <h3 className='text-base font-semibold text-slate-900 dark:text-white'>{title}</h3>
+            {badge && (
+              <span className='rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-600 dark:bg-slate-950/50 dark:text-slate-200'>
+                {badge}
+              </span>
+            )}
+          </div>
+          <p className='mt-1.5 pr-2 text-sm leading-6 text-slate-500 dark:text-slate-300 sm:pr-6'>{description}</p>
         </div>
-        <p className='mt-2 pr-6 text-sm leading-6 text-slate-500 dark:text-slate-300'>{description}</p>
       </div>
       <BaseIcon
         path={isOpen ? icon.mdiChevronUp : icon.mdiChevronDown}
@@ -199,21 +359,22 @@ const SetupAccordionSection = ({
     </button>
 
     {isOpen && (
-      <div className='border-t border-slate-200 px-5 py-5 dark:border-slate-700'>
+      <div className='border-t border-slate-200 px-4 py-4 dark:border-slate-700 sm:px-5 sm:py-5'>
         {children}
       </div>
     )}
   </div>
 );
 
-const ResultsTabButton = ({ label, count, isActive, onClick }: ResultsTabButtonProps) => (
+const ResultsTabButton = ({ label, iconPath, count, isActive, onClick }: ResultsTabButtonProps) => (
   <button
     type='button'
     onClick={onClick}
-    className={`inline-flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-semibold transition-colors ${isActive
+    className={`inline-flex min-w-[108px] shrink-0 flex-col items-center justify-center gap-1.5 rounded-2xl px-3 py-3.5 text-xs font-semibold transition-colors sm:min-w-0 sm:flex-row sm:gap-2 sm:px-4 sm:text-sm ${isActive
       ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-950 dark:text-white'
       : 'text-slate-500 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'}`}
   >
+    <BaseIcon path={iconPath} size={16} className='shrink-0' />
     <span>{label}</span>
     {count !== undefined && count !== null && (
       <span className={`rounded-full px-2 py-0.5 text-xs ${isActive
@@ -226,6 +387,63 @@ const ResultsTabButton = ({ label, count, isActive, onClick }: ResultsTabButtonP
   </button>
 );
 
+const PageFilterChip = ({ label, count, iconPath, isActive, onClick }: PageFilterChipProps) => (
+  <button
+    type='button'
+    onClick={onClick}
+    className={`inline-flex min-w-max shrink-0 items-center gap-2 rounded-full border px-3 py-2 text-xs font-semibold transition-colors sm:text-sm ${isActive
+      ? 'border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-500/40 dark:bg-sky-500/10 dark:text-sky-200'
+      : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:text-slate-900 dark:border-slate-700 dark:bg-slate-950/40 dark:text-slate-300 dark:hover:text-white'}`}
+  >
+    <BaseIcon path={iconPath} size={16} className='shrink-0' />
+    <span>{label}</span>
+    <span className={`rounded-full px-2 py-0.5 text-[11px] ${isActive
+      ? 'bg-white/80 text-sky-700 dark:bg-slate-950/60 dark:text-sky-100'
+      : 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-200'}`}>
+      {count}
+    </span>
+  </button>
+);
+
+const DeliverySummaryCard = ({
+  label,
+  value,
+  helper,
+  iconPath,
+  toneClassName = 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-950/40',
+}: DeliverySummaryCardProps) => (
+  <div className={`rounded-2xl border p-4 ${toneClassName}`}>
+    <div className='flex items-start justify-between gap-3'>
+      <div>
+        <div className='text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400'>{label}</div>
+        <div className='mt-2 text-lg font-semibold text-slate-900 dark:text-white'>{value}</div>
+      </div>
+      <span className='inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-slate-100 text-slate-600 dark:bg-slate-900 dark:text-slate-200'>
+        <BaseIcon path={iconPath} size={20} />
+      </span>
+    </div>
+    <p className='mt-3 text-sm leading-6 text-slate-500 dark:text-slate-300'>{helper}</p>
+  </div>
+);
+
+const DeliveryActionCard = ({ title, description, iconPath, badge, children }: DeliveryActionCardProps) => (
+  <div className='rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-950/30 sm:p-5'>
+    <div className='flex flex-wrap items-start justify-between gap-3'>
+      <div className='flex items-start gap-3'>
+        <span className='inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-slate-100 text-slate-600 dark:bg-slate-900 dark:text-slate-200'>
+          <BaseIcon path={iconPath} size={20} />
+        </span>
+        <div>
+          <h5 className='text-sm font-semibold text-slate-900 dark:text-white sm:text-base'>{title}</h5>
+          <p className='mt-1 text-sm leading-6 text-slate-500 dark:text-slate-300'>{description}</p>
+        </div>
+      </div>
+      {badge}
+    </div>
+    <div className='mt-4'>{children}</div>
+  </div>
+);
+
 const SchemaAnalyzerPage = () => {
   const { currentUser } = useAppSelector((state) => state.auth);
   const [url, setUrl] = React.useState('');
@@ -241,11 +459,20 @@ const SchemaAnalyzerPage = () => {
   const [exportingId, setExportingId] = React.useState<string | null>(null);
   const [isCheckingPlatformOutput, setIsCheckingPlatformOutput] = React.useState(false);
   const [openSections, setOpenSections] = React.useState<Record<SetupSectionId, boolean>>({
-    targeting: true,
+    targeting: false,
     options: false,
     limits: false,
   });
   const [activeResultsTab, setActiveResultsTab] = React.useState<ResultsTabId>('overview');
+  const [activePageFilter, setActivePageFilter] = React.useState<PageResultsFilterId>('all');
+  const [activeRecommendationFilter, setActiveRecommendationFilter] = React.useState<RecommendationQuickFilterId>('all');
+  const [isFailedPagesExpanded, setIsFailedPagesExpanded] = React.useState(false);
+  const [expandedRecommendationIds, setExpandedRecommendationIds] = React.useState<Record<string, boolean>>({});
+  const resultsRef = React.useRef<HTMLDivElement | null>(null);
+
+  const scrollToResults = React.useCallback(() => {
+    resultsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }, []);
 
   React.useEffect(() => {
     if (currentUser?.email) {
@@ -254,10 +481,22 @@ const SchemaAnalyzerPage = () => {
   }, [currentUser?.email]);
 
   React.useEffect(() => {
-    if (report?.analysis) {
-      setActiveResultsTab('overview');
+    if (!report?.analysis) {
+      return undefined;
     }
-  }, [report?.analysis?.analyzedUrl, report?.analysis?.fetchedAt]);
+
+    setActiveResultsTab('overview');
+    setActivePageFilter('all');
+    setActiveRecommendationFilter('all');
+    setIsFailedPagesExpanded(false);
+    setExpandedRecommendationIds({});
+
+    const timeoutId = window.setTimeout(() => {
+      scrollToResults();
+    }, 150);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [report?.analysis?.analyzedUrl, report?.analysis?.fetchedAt, scrollToResults]);
 
   const notify = React.useCallback((type: 'success' | 'error' | 'info', message: string) => {
     toast(message, { type, position: 'bottom-center' });
@@ -273,6 +512,30 @@ const SchemaAnalyzerPage = () => {
   const exportableRecommendations = recommendations.filter(
     (recommendation) => recommendation.suggested_schema,
   );
+  const sortedRecommendations = React.useMemo(() => (
+    [...recommendations].sort((leftRecommendation, rightRecommendation) => {
+      const leftPriority = getRecommendationPriorityMeta(leftRecommendation.priority);
+      const rightPriority = getRecommendationPriorityMeta(rightRecommendation.priority);
+
+      if (leftPriority.sortOrder !== rightPriority.sortOrder) {
+        return leftPriority.sortOrder - rightPriority.sortOrder;
+      }
+
+      const leftScopeOrder = getRecommendationScopeSortOrder(leftRecommendation.page_scope);
+      const rightScopeOrder = getRecommendationScopeSortOrder(rightRecommendation.page_scope);
+      if (leftScopeOrder !== rightScopeOrder) {
+        return leftScopeOrder - rightScopeOrder;
+      }
+
+      const leftHasCode = Number(Boolean(leftRecommendation.suggested_schema));
+      const rightHasCode = Number(Boolean(rightRecommendation.suggested_schema));
+      if (leftHasCode !== rightHasCode) {
+        return rightHasCode - leftHasCode;
+      }
+
+      return leftRecommendation.title.localeCompare(rightRecommendation.title);
+    })
+  ), [recommendations]);
   const crawlPlan = report?.analysis?.crawlPlan;
   const isRequestedPagesOverLimit = requestedPages > maxPagesPerCrawl;
   const draftIncludeTargets = React.useMemo(() => parseTargetLines(includeTargets), [includeTargets]);
@@ -290,6 +553,230 @@ const SchemaAnalyzerPage = () => {
   const analyzedTimestamp = report?.analysis?.fetchedAt
     ? new Date(report.analysis.fetchedAt).toLocaleString()
     : null;
+  const hasEmailRecipient = emailTo.trim().length > 0;
+  const hasUrl = url.trim().length > 0;
+  const targetingSummary = hasTargetingRules
+    ? `${appliedIncludeTargets.length} include · ${appliedExcludeTargets.length} exclude`
+    : 'No targeting rules';
+  const recommendationQuickFilters = [
+    {
+      id: 'all' as const,
+      label: 'All',
+      count: recommendations.length,
+      iconPath: icon.mdiViewListOutline,
+    },
+    {
+      id: 'fixFirst' as const,
+      label: 'Fix first',
+      count: sortedRecommendations.filter((recommendation) => isFixFirstRecommendation(recommendation)).length,
+      iconPath: icon.mdiAlertCircleOutline,
+    },
+    {
+      id: 'codeReady' as const,
+      label: 'Code ready',
+      count: sortedRecommendations.filter((recommendation) => recommendation.suggested_schema).length,
+      iconPath: icon.mdiCodeBraces,
+    },
+    {
+      id: 'needsCode' as const,
+      label: 'Needs code',
+      count: sortedRecommendations.filter((recommendation) => !recommendation.suggested_schema).length,
+      iconPath: icon.mdiLightbulbOutline,
+    },
+  ];
+  const pageFilterOptions = [
+    {
+      id: 'all' as const,
+      label: 'All',
+      count: analyzedPages.length + failedPages.length,
+      iconPath: icon.mdiViewListOutline,
+    },
+    {
+      id: 'withSchema' as const,
+      label: 'With schema',
+      count: analyzedPages.filter((page) => page.hasStructuredData).length,
+      iconPath: icon.mdiCheckCircleOutline,
+    },
+    {
+      id: 'missingSchema' as const,
+      label: 'Missing schema',
+      count: analyzedPages.filter((page) => !page.hasStructuredData).length,
+      iconPath: icon.mdiAlertCircleOutline,
+    },
+    {
+      id: 'failed' as const,
+      label: 'Failed',
+      count: failedPages.length,
+      iconPath: icon.mdiCloseCircleOutline,
+    },
+  ];
+  const filteredRecommendations = React.useMemo(() => {
+    if (activeRecommendationFilter === 'fixFirst') {
+      return sortedRecommendations.filter((recommendation) => isFixFirstRecommendation(recommendation));
+    }
+
+    if (activeRecommendationFilter === 'codeReady') {
+      return sortedRecommendations.filter((recommendation) => recommendation.suggested_schema);
+    }
+
+    if (activeRecommendationFilter === 'needsCode') {
+      return sortedRecommendations.filter((recommendation) => !recommendation.suggested_schema);
+    }
+
+    return sortedRecommendations;
+  }, [activeRecommendationFilter, sortedRecommendations]);
+  const recommendationGroups = React.useMemo(() => recommendationPriorityOrder
+    .map((priorityId) => ({
+      meta: recommendationPriorityMetaMap[priorityId],
+      recommendations: filteredRecommendations.filter(
+        (recommendation) => normalizeRecommendationPriority(recommendation.priority) === priorityId,
+      ),
+    }))
+    .filter((group) => group.recommendations.length > 0), [filteredRecommendations]);
+  const activeRecommendationFilterLabel = recommendationQuickFilters.find(
+    (filterOption) => filterOption.id === activeRecommendationFilter,
+  )?.label || 'All';
+  const recommendationEmptyStateMessage = activeRecommendationFilter === 'fixFirst'
+    ? 'No high-priority recommendations are waiting in this report.'
+    : activeRecommendationFilter === 'codeReady'
+      ? 'No recommendations with generated code are available yet.'
+      : activeRecommendationFilter === 'needsCode'
+        ? 'Every visible recommendation already has a code snippet attached.'
+        : 'No recommendations were generated for this page yet.';
+
+  const filteredAnalyzedPages = React.useMemo(() => {
+    if (activePageFilter === 'withSchema') {
+      return analyzedPages.filter((page) => page.hasStructuredData);
+    }
+
+    if (activePageFilter === 'missingSchema') {
+      return analyzedPages.filter((page) => !page.hasStructuredData);
+    }
+
+    if (activePageFilter === 'failed') {
+      return [];
+    }
+
+    return analyzedPages;
+  }, [activePageFilter, analyzedPages]);
+  const shouldShowFailedSection = failedPages.length > 0 && (activePageFilter === 'all' || activePageFilter === 'failed');
+  const emptyPagesStateMessage = activePageFilter === 'failed'
+    ? 'No failed internal pages were recorded for this analysis run.'
+    : activePageFilter === 'withSchema'
+      ? 'No analyzed pages with structured data match this filter yet.'
+      : activePageFilter === 'missingSchema'
+        ? 'No analyzed pages are missing structured data for this run.'
+        : 'No page-level results are available yet for this analysis run.';
+  const deliverySummaryCards = [
+    {
+      label: 'Code-ready fixes',
+      value: exportableRecommendations.length,
+      helper: exportableRecommendations.length > 0
+        ? `${exportableRecommendations.length} recommendation${exportableRecommendations.length === 1 ? '' : 's'} can be exported right now.`
+        : 'No code-ready recommendations yet. Use the Recommendations tab to refine the handoff.',
+      iconPath: icon.mdiCodeBraces,
+      toneClassName: exportableRecommendations.length > 0
+        ? 'border-emerald-200 bg-emerald-50/80 dark:border-emerald-500/30 dark:bg-emerald-500/10'
+        : 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-950/40',
+    },
+    {
+      label: 'Email recipient',
+      value: hasEmailRecipient ? 'Ready' : 'Missing',
+      helper: hasEmailRecipient ? emailTo.trim() : 'Add a developer email before sending the handoff.',
+      iconPath: hasEmailRecipient ? icon.mdiEmailOutline : icon.mdiAlertCircleOutline,
+      toneClassName: hasEmailRecipient
+        ? 'border-sky-200 bg-sky-50/80 dark:border-sky-500/30 dark:bg-sky-500/10'
+        : 'border-amber-200 bg-amber-50/80 dark:border-amber-500/30 dark:bg-amber-500/10',
+    },
+    {
+      label: 'Platform output',
+      value: entitlements?.canPlatformOutput ? 'Unlocked' : 'Premium',
+      helper: entitlements?.canPlatformOutput
+        ? `${selectedPlatformLabel} output can be checked in Step 4.`
+        : 'Premium is required for Step 4 platform-specific output.',
+      iconPath: entitlements?.canPlatformOutput ? icon.mdiCheckCircleOutline : icon.mdiLockOutline,
+      toneClassName: entitlements?.canPlatformOutput
+        ? 'border-violet-200 bg-violet-50/80 dark:border-violet-500/30 dark:bg-violet-500/10'
+        : 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-950/40',
+    },
+  ];
+  const deliveryChecklist = [
+    {
+      id: 'recipient',
+      label: 'Recipient email',
+      value: hasEmailRecipient ? emailTo.trim() : 'Add an email to send the handoff.',
+      isReady: hasEmailRecipient,
+    },
+    {
+      id: 'export',
+      label: 'Export package',
+      value: exportableRecommendations.length > 0
+        ? `${exportableRecommendations.length} code-ready recommendation${exportableRecommendations.length === 1 ? '' : 's'} available.`
+        : 'Export all still works, but no generated code is attached yet.',
+      isReady: Boolean(report?.site?.id),
+    },
+    {
+      id: 'platform',
+      label: 'Step 4 output',
+      value: entitlements?.canPlatformOutput
+        ? `${selectedPlatformLabel} output is available for this workspace.`
+        : `${selectedPlatformLabel} output requires Premium access.`,
+      isReady: Boolean(entitlements?.canPlatformOutput),
+    },
+  ];
+  const overviewStats = [
+    {
+      label: 'Pages analyzed',
+      value: crawlPlan?.actualPagesAnalyzed || analyzedPages.length || 0,
+      helper: 'Crawl total',
+      iconPath: icon.mdiFileDocumentOutline,
+    },
+    {
+      label: 'Recommendations',
+      value: recommendations.length,
+      helper: 'Next actions',
+      iconPath: icon.mdiLightbulbOutline,
+    },
+    {
+      label: 'Structured data',
+      value: report?.analysis?.crawlSummary?.pagesWithStructuredData ?? (report?.analysis?.schema?.hasStructuredData ? 1 : 0),
+      helper: 'Pages with schema',
+      iconPath: icon.mdiCheckCircleOutline,
+    },
+    {
+      label: 'JSON-LD blocks',
+      value: report?.analysis?.schema?.jsonLd?.count || 0,
+      helper: 'Detected snippets',
+      iconPath: icon.mdiCodeJson,
+    },
+    {
+      label: 'Failed fetches',
+      value: report?.analysis?.crawlSummary?.failedPages ?? failedPages.length,
+      helper: 'Needs follow-up',
+      iconPath: icon.mdiAlertCircleOutline,
+    },
+    {
+      label: 'Invalid blocks',
+      value: invalidJsonLdBlocks.length,
+      helper: 'Needs cleanup',
+      iconPath: icon.mdiAlertOutline,
+    },
+  ];
+
+  React.useEffect(() => {
+    if ((draftIncludeTargets.length > 0 || draftExcludeTargets.length > 0) && !openSections.targeting) {
+      setOpenSections((currentSections) => ({
+        ...currentSections,
+        targeting: true,
+      }));
+    }
+  }, [draftExcludeTargets.length, draftIncludeTargets.length, openSections.targeting]);
+
+  React.useEffect(() => {
+    if (activePageFilter === 'failed' && failedPages.length > 0) {
+      setIsFailedPagesExpanded(true);
+    }
+  }, [activePageFilter, failedPages.length]);
 
   const toggleSection = (section: SetupSectionId) => {
     setOpenSections((currentSections) => ({
@@ -298,6 +785,13 @@ const SchemaAnalyzerPage = () => {
     }));
   };
 
+  const toggleRecommendationCode = (recommendationId: string) => {
+    setExpandedRecommendationIds((currentIds) => ({
+      ...currentIds,
+      [recommendationId]: !currentIds[recommendationId],
+    }));
+  };
+
   const handleAnalyze = async () => {
     if (!url.trim()) {
       notify('error', 'Enter a website URL first.');
@@ -492,18 +986,18 @@ const SchemaAnalyzerPage = () => {
           {''}
         </SectionTitleLineWithButton>
 
-        <CardBox className='mb-6'>
-          <div className='space-y-6'>
+        <CardBox className='mb-6 pb-24 sm:pb-0'>
+          <div className='space-y-5 sm:space-y-6'>
             <div>
               <h2 className='text-xl font-semibold text-slate-900 dark:text-white'>Analyze a customer site</h2>
-              <p className='mt-2 text-sm leading-6 text-slate-500 dark:text-slate-300'>
+              <p className='mt-2 max-w-3xl text-sm leading-6 text-slate-500 dark:text-slate-300'>
                 Enter a domain or full URL, choose how many pages to review, and optionally focus the report on the
                 folders, categories, or pages that matter most. This setup keeps the page cleaner on mobile while still
                 supporting up to {maxPagesPerCrawl} pages per crawl.
               </p>
             </div>
 
-            <div className='grid gap-4 lg:grid-cols-[minmax(0,1.35fr),minmax(240px,0.65fr)]'>
+            <div className='grid gap-3 sm:gap-4 lg:grid-cols-[minmax(0,1.35fr),minmax(240px,0.65fr)]'>
               <FormField
                 label='Website URL'
                 labelFor='schema-site-url'
@@ -524,7 +1018,7 @@ const SchemaAnalyzerPage = () => {
                 />
               </FormField>
 
-              <div className='flex flex-col gap-4'>
+              <div className='flex flex-col gap-3 sm:gap-4'>
                 <FormField
                   label='Pages to analyze'
                   labelFor='schema-requested-pages'
@@ -543,17 +1037,10 @@ const SchemaAnalyzerPage = () => {
                   />
                 </FormField>
 
-                <BaseButtons type='justify-start' className='mb-0' mb='mb-0'>
-                  <BaseButton
-                    color='info'
-                    icon={icon.mdiMagnify}
-                    label={isAnalyzing ? 'Analyzing…' : 'Analyze site'}
-                    disabled={isAnalyzing || isRequestedPagesOverLimit}
-                    onClick={() => {
-                      handleAnalyze().catch(() => null);
-                    }}
-                  />
-                </BaseButtons>
+                <div className='rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3.5 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-300'>
+                  <div className='font-semibold text-slate-900 dark:text-white'>Quick setup</div>
+                  <div className='mt-1 text-sm text-slate-500 dark:text-slate-300'>Pick a page count here, then use Target pages below if you want a more focused report.</div>
+                </div>
               </div>
             </div>
 
@@ -567,11 +1054,12 @@ const SchemaAnalyzerPage = () => {
               <SetupAccordionSection
                 title='Target pages'
                 description='Include only the folders or categories you want reviewed, and exclude pages you do not want reflected in the final report.'
+                iconPath={icon.mdiTarget}
                 badge={hasTargetingRules ? `${appliedIncludeTargets.length} include · ${appliedExcludeTargets.length} exclude` : 'Optional'}
                 isOpen={openSections.targeting}
                 onToggle={() => toggleSection('targeting')}
               >
-                <div className='grid gap-4 md:grid-cols-2'>
+                <div className='grid gap-3 sm:gap-4 md:grid-cols-2'>
                   <FormField
                     label='Include only these pages or folders'
                     labelFor='schema-include-targets'
@@ -609,7 +1097,7 @@ https://example.com/pricing`}
                   </FormField>
                 </div>
 
-                <div className='grid gap-3 lg:grid-cols-2'>
+                <div className='grid gap-3 sm:grid-cols-2'>
                   <div className='rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm dark:border-slate-700 dark:bg-slate-950/40'>
                     <div className='font-semibold text-slate-900 dark:text-white'>Accepted formats</div>
                     <div className='mt-1 text-slate-500 dark:text-slate-300'>Full URLs or path rules like /blog, /pricing, or /category/shoes.</div>
@@ -629,7 +1117,7 @@ https://example.com/pricing`}
                           {appliedIncludeTargets.map((target) => (
                             <span
                               key={`include-${target}`}
-                              className='rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200'
+                              className='break-all rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200'
                             >
                               {target}
                             </span>
@@ -645,7 +1133,7 @@ https://example.com/pricing`}
                           {appliedExcludeTargets.map((target) => (
                             <span
                               key={`exclude-${target}`}
-                              className='rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700 dark:bg-amber-500/10 dark:text-amber-200'
+                              className='break-all rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700 dark:bg-amber-500/10 dark:text-amber-200'
                             >
                               {target}
                             </span>
@@ -657,9 +1145,70 @@ https://example.com/pricing`}
                 )}
               </SetupAccordionSection>
 
+              <div className='rounded-3xl border border-sky-200 bg-gradient-to-br from-sky-50 to-white p-4 shadow-sm dark:border-sky-500/30 dark:from-slate-950 dark:to-slate-900/70 sm:p-5'>
+                <div className='flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between'>
+                  <div className='space-y-3'>
+                    <div>
+                      <div className='text-xs font-semibold uppercase tracking-[0.2em] text-sky-700 dark:text-sky-200'>Ready to analyze</div>
+                      <div className='mt-1 text-lg font-semibold text-slate-900 dark:text-white'>Run a focused crawl when you are ready.</div>
+                      <p className='mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300'>
+                        Review the target pages above, then launch the next crawl. You can analyze up to {maxPagesPerCrawl} pages per run.
+                      </p>
+                    </div>
+                    <div className='flex flex-wrap gap-2 text-xs font-semibold'>
+                      <span className='rounded-full bg-white px-3 py-1 text-slate-700 shadow-sm dark:bg-slate-950/70 dark:text-slate-200'>
+                        {requestedPages} requested
+                      </span>
+                      <span className='rounded-full bg-white px-3 py-1 text-slate-700 shadow-sm dark:bg-slate-950/70 dark:text-slate-200'>
+                        {targetingSummary}
+                      </span>
+                    </div>
+                  </div>
+                  <div className='w-full lg:w-auto'>
+                    <BaseButtons
+                      type='justify-start lg:justify-end'
+                      className='mb-0 w-full lg:w-auto'
+                      classAddon='w-full mb-0 sm:w-auto'
+                      mb='mb-0'
+                    >
+                      {report?.analysis && (
+                        <BaseButton
+                          color='whiteDark'
+                          outline
+                          icon={icon.mdiArrowDownCircleOutline}
+                          label='Jump to results'
+                          className='w-full justify-center px-4 py-3 text-sm sm:w-auto'
+                          onClick={scrollToResults}
+                        />
+                      )}
+                      <BaseButton
+                        color='info'
+                        icon={icon.mdiMagnify}
+                        label={isAnalyzing ? 'Analyzing…' : 'Analyze site'}
+                        className='w-full justify-center px-4 py-3 text-sm shadow-sm sm:w-auto'
+                        disabled={!hasUrl || isAnalyzing || isRequestedPagesOverLimit}
+                        onClick={() => {
+                          handleAnalyze().catch(() => null);
+                        }}
+                      />
+                    </BaseButtons>
+                    <p className='mt-2 text-xs text-slate-500 dark:text-slate-300'>
+                      {isRequestedPagesOverLimit
+                        ? `Reduce to ${maxPagesPerCrawl} pages to continue.`
+                        : report?.analysis
+                          ? 'Runs the latest crawl, then jumps you straight to the refreshed results.'
+                          : hasUrl
+                            ? 'Runs the latest crawl and opens the refreshed results below.'
+                            : 'Add a website URL above to enable the analyzer.'}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
               <SetupAccordionSection
                 title='Report options'
                 description='Choose the target platform for Step 4 output. This does not change what pages are reviewed; it only prepares the preferred output format for a later export step.'
+                iconPath={icon.mdiTuneVertical}
                 badge={selectedPlatformLabel}
                 isOpen={openSections.options}
                 onToggle={() => toggleSection('options')}
@@ -699,6 +1248,7 @@ https://example.com/pricing`}
               <SetupAccordionSection
                 title='Plan details'
                 description='A simple summary of what this analyzer includes for the current user.'
+                iconPath={icon.mdiShieldOutline}
                 badge={`${maxPagesPerCrawl} pages per crawl`}
                 isOpen={openSections.limits}
                 onToggle={() => toggleSection('limits')}
@@ -728,8 +1278,32 @@ https://example.com/pricing`}
           </div>
         </CardBox>
 
+        <div className='fixed inset-x-0 bottom-0 z-20 border-t border-slate-200 bg-white/95 px-4 py-3 shadow-[0_-8px_24px_rgba(15,23,42,0.08)] backdrop-blur sm:hidden dark:border-slate-700 dark:bg-slate-950/95'>
+          <div className='mx-auto flex max-w-md items-center gap-3'>
+            <div className='min-w-0 flex-1'>
+              <div className='truncate text-sm font-semibold text-slate-900 dark:text-white'>
+                {hasUrl ? url.trim() : 'Enter a website URL'}
+              </div>
+              <div className='mt-0.5 text-xs text-slate-500 dark:text-slate-300'>
+                {requestedPages} page{requestedPages === 1 ? '' : 's'} requested · {targetingSummary}
+              </div>
+            </div>
+            <BaseButton
+              color='info'
+              icon={icon.mdiMagnify}
+              label={isAnalyzing ? 'Analyzing…' : 'Analyze'}
+              className='shrink-0 justify-center px-4 py-3 text-sm shadow-sm'
+              disabled={!hasUrl || isAnalyzing || isRequestedPagesOverLimit}
+              onClick={() => {
+                handleAnalyze().catch(() => null);
+              }}
+            />
+          </div>
+        </div>
+
         {report?.analysis && (
-          <CardBox>
+          <div ref={resultsRef} id='schema-analysis-results'>
+            <CardBox>
             <div className='flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between'>
               <div>
                 <h3 className='text-lg font-semibold text-slate-900 dark:text-white'>Analysis results</h3>
@@ -749,27 +1323,31 @@ https://example.com/pricing`}
               </div>
             </div>
 
-            <div className='mt-5 overflow-x-auto'>
-              <div className='inline-flex min-w-full gap-2 rounded-2xl bg-slate-100 p-1 dark:bg-slate-800/70'>
+            <div className='sticky top-2 z-10 mt-5 -mx-4 border-y border-slate-200 bg-white/95 px-4 py-2 backdrop-blur sm:top-4 sm:mx-0 sm:rounded-2xl sm:border dark:border-slate-700 dark:bg-slate-950/95'>
+              <div className='flex min-w-full gap-2 overflow-x-auto pb-1 sm:inline-flex sm:min-w-max sm:pb-0'>
                 <ResultsTabButton
                   label='Overview'
+                  iconPath={icon.mdiViewDashboardOutline}
                   isActive={activeResultsTab === 'overview'}
                   onClick={() => setActiveResultsTab('overview')}
                 />
                 <ResultsTabButton
                   label='Pages'
+                  iconPath={icon.mdiFileDocumentOutline}
                   count={analyzedPages.length + failedPages.length}
                   isActive={activeResultsTab === 'pages'}
                   onClick={() => setActiveResultsTab('pages')}
                 />
                 <ResultsTabButton
                   label='Recommendations'
+                  iconPath={icon.mdiLightbulbOutline}
                   count={recommendations.length}
                   isActive={activeResultsTab === 'recommendations'}
                   onClick={() => setActiveResultsTab('recommendations')}
                 />
                 <ResultsTabButton
                   label='Delivery'
+                  iconPath={icon.mdiEmailOutline}
                   isActive={activeResultsTab === 'delivery'}
                   onClick={() => setActiveResultsTab('delivery')}
                 />
@@ -779,70 +1357,104 @@ https://example.com/pricing`}
             <div className='mt-6'>
               {activeResultsTab === 'overview' && (
                 <div className='space-y-5'>
-                  <div className='grid gap-4 md:grid-cols-2 xl:grid-cols-3'>
-                    <div className='rounded-2xl border border-slate-200 p-4 dark:border-slate-700'>
-                      <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Analyzed URL</div>
-                      <div className='mt-2 break-all text-sm text-slate-900 dark:text-white'>
-                        {report.analysis.analyzedUrl || report.site?.base_url || '—'}
+                  <div className='grid gap-4 xl:grid-cols-[minmax(0,1.15fr),minmax(0,1fr)]'>
+                    <div className='rounded-3xl border border-slate-200 bg-slate-50/80 p-4 dark:border-slate-700 dark:bg-slate-900/40 sm:p-5'>
+                      <div className='flex items-start gap-3'>
+                        <span className='inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-white text-slate-600 shadow-sm dark:bg-slate-950/70 dark:text-slate-100'>
+                          <BaseIcon path={icon.mdiWeb} size={20} />
+                        </span>
+                        <div className='min-w-0'>
+                          <div className='text-xs font-semibold uppercase tracking-[0.2em] text-slate-500'>Site snapshot</div>
+                          <div className='mt-2 break-all text-sm font-semibold text-slate-900 dark:text-white'>
+                            {report.analysis.analyzedUrl || report.site?.base_url || '—'}
+                          </div>
+                          <div className='mt-2 text-sm text-slate-500 dark:text-slate-300'>
+                            {report.analysis.pageTitle || 'No page title found for the analyzed page yet.'}
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className='mt-4 grid gap-3 sm:grid-cols-2'>
+                        <div className='rounded-2xl bg-white px-4 py-3 shadow-sm dark:bg-slate-950/70'>
+                          <div className='text-[11px] font-semibold uppercase tracking-wide text-slate-500'>Platform</div>
+                          <div className='mt-1 text-sm font-semibold text-slate-900 dark:text-white'>
+                            {report.analysis.platform?.label || 'Unknown platform'}
+                          </div>
+                        </div>
+                        <div className='rounded-2xl bg-white px-4 py-3 shadow-sm dark:bg-slate-950/70'>
+                          <div className='text-[11px] font-semibold uppercase tracking-wide text-slate-500'>Last updated</div>
+                          <div className='mt-1 text-sm font-semibold text-slate-900 dark:text-white'>
+                            {analyzedTimestamp || 'Just now'}
+                          </div>
+                        </div>
                       </div>
                     </div>
-                    <div className='rounded-2xl border border-slate-200 p-4 dark:border-slate-700'>
-                      <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Page title</div>
-                      <div className='mt-2 text-sm text-slate-900 dark:text-white'>
-                        {report.analysis.pageTitle || 'No title found'}
-                      </div>
-                    </div>
-                    <div className='rounded-2xl border border-slate-200 p-4 dark:border-slate-700'>
-                      <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Recommendations</div>
-                      <div className='mt-2 text-sm text-slate-900 dark:text-white'>
-                        {recommendations.length} total
-                      </div>
-                    </div>
-                    <div className='rounded-2xl border border-slate-200 p-4 dark:border-slate-700'>
-                      <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Pages analyzed</div>
-                      <div className='mt-2 text-sm text-slate-900 dark:text-white'>
-                        {crawlPlan?.actualPagesAnalyzed || analyzedPages.length || 0}
-                      </div>
-                    </div>
-                    <div className='rounded-2xl border border-slate-200 p-4 dark:border-slate-700'>
-                      <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Pages with structured data</div>
-                      <div className='mt-2 text-sm text-slate-900 dark:text-white'>
-                        {report.analysis.crawlSummary?.pagesWithStructuredData ?? (report.analysis.schema?.hasStructuredData ? 1 : 0)}
-                      </div>
-                    </div>
-                    <div className='rounded-2xl border border-slate-200 p-4 dark:border-slate-700'>
-                      <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>JSON-LD blocks found</div>
-                      <div className='mt-2 text-sm text-slate-900 dark:text-white'>
-                        {report.analysis.schema?.jsonLd?.count || 0}
-                      </div>
+
+                    <div className='grid grid-cols-2 gap-3 sm:gap-4'>
+                      {overviewStats.map((stat) => (
+                        <div
+                          key={stat.label}
+                          className='rounded-2xl border border-slate-200 bg-white p-3.5 shadow-sm dark:border-slate-700 dark:bg-slate-950/40 sm:p-4'
+                        >
+                          <div className='flex items-start justify-between gap-3'>
+                            <div>
+                              <div className='text-[11px] font-semibold uppercase tracking-wide text-slate-500'>{stat.label}</div>
+                              <div className='mt-1.5 text-xl font-semibold leading-none text-slate-900 dark:text-white sm:text-2xl'>
+                                {stat.value}
+                              </div>
+                              <div className='mt-1.5 text-xs text-slate-500 dark:text-slate-300'>{stat.helper}</div>
+                            </div>
+                            <span className='inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl bg-slate-100 text-slate-600 dark:bg-slate-900 dark:text-slate-200'>
+                              <BaseIcon path={stat.iconPath} size={18} />
+                            </span>
+                          </div>
+                        </div>
+                      ))}
                     </div>
                   </div>
 
                   {crawlPlan && (
                     <div className='rounded-2xl border border-sky-200 bg-sky-50 p-4 text-sm text-sky-900 dark:border-sky-500/30 dark:bg-sky-500/10 dark:text-sky-100'>
-                      <div className='font-semibold'>Crawl summary</div>
-                      <div className='mt-2 grid gap-2 md:grid-cols-2'>
-                        <span>Requested pages: {crawlPlan.requestedPages || 1}</span>
-                        <span>Plan limit: {crawlPlan.allowedPages || maxPagesPerCrawl}</span>
-                        <span>Pages analyzed: {crawlPlan.actualPagesAnalyzed || 0}</span>
-                        <span>Failed page fetches: {report.analysis.crawlSummary?.failedPages ?? failedPages.length}</span>
+                      <div className='flex flex-wrap items-center justify-between gap-2'>
+                        <div className='font-semibold'>Crawl summary</div>
+                        <div className='text-xs font-semibold uppercase tracking-wide text-sky-700 dark:text-sky-100'>
+                          Focused for mobile review
+                        </div>
                       </div>
-                      {report.analysis.notice && <div className='mt-3'>{report.analysis.notice}</div>}
+                      <div className='mt-3 grid grid-cols-2 gap-3 md:grid-cols-4'>
+                        <div className='rounded-xl bg-white/70 px-3 py-2 dark:bg-slate-950/30'>
+                          <div className='text-[11px] font-semibold uppercase tracking-wide'>Requested</div>
+                          <div className='mt-1 text-base font-semibold'>{crawlPlan.requestedPages || 1}</div>
+                        </div>
+                        <div className='rounded-xl bg-white/70 px-3 py-2 dark:bg-slate-950/30'>
+                          <div className='text-[11px] font-semibold uppercase tracking-wide'>Plan limit</div>
+                          <div className='mt-1 text-base font-semibold'>{crawlPlan.allowedPages || maxPagesPerCrawl}</div>
+                        </div>
+                        <div className='rounded-xl bg-white/70 px-3 py-2 dark:bg-slate-950/30'>
+                          <div className='text-[11px] font-semibold uppercase tracking-wide'>Analyzed</div>
+                          <div className='mt-1 text-base font-semibold'>{crawlPlan.actualPagesAnalyzed || 0}</div>
+                        </div>
+                        <div className='rounded-xl bg-white/70 px-3 py-2 dark:bg-slate-950/30'>
+                          <div className='text-[11px] font-semibold uppercase tracking-wide'>Failed</div>
+                          <div className='mt-1 text-base font-semibold'>{report.analysis.crawlSummary?.failedPages ?? failedPages.length}</div>
+                        </div>
+                      </div>
+                      {report.analysis.notice && <div className='mt-3 text-sm'>{report.analysis.notice}</div>}
                     </div>
                   )}
 
                   {report.analysis.crawlSummary && (
-                    <div className='grid gap-4 md:grid-cols-2'>
+                    <div className='grid gap-3 sm:grid-cols-2 sm:gap-4'>
                       <div className='rounded-2xl border border-slate-200 p-4 dark:border-slate-700'>
                         <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Pages without structured data</div>
-                        <div className='mt-2 text-sm text-slate-900 dark:text-white'>
+                        <div className='mt-2 text-sm font-semibold text-slate-900 dark:text-white'>
                           {report.analysis.crawlSummary.pagesWithoutStructuredData ?? 0}
                         </div>
                       </div>
                       <div className='rounded-2xl border border-slate-200 p-4 dark:border-slate-700'>
-                        <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Invalid JSON-LD blocks</div>
-                        <div className='mt-2 text-sm text-slate-900 dark:text-white'>
-                          {invalidJsonLdBlocks.length}
+                        <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Discovered internal pages</div>
+                        <div className='mt-2 text-sm font-semibold text-slate-900 dark:text-white'>
+                          {report.analysis.crawlSummary.discoveredInternalPages ?? analyzedPages.length}
                         </div>
                       </div>
                     </div>
@@ -925,42 +1537,114 @@ https://example.com/pricing`}
 
               {activeResultsTab === 'pages' && (
                 <div className='space-y-5'>
-                  {analyzedPages.length === 0 && failedPages.length === 0 && (
+                  <div className='rounded-2xl border border-slate-200 bg-slate-50/80 p-3 dark:border-slate-700 dark:bg-slate-950/30 sm:p-4'>
+                    <div className='flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between'>
+                      <div>
+                        <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Quick filters</div>
+                        <p className='mt-1 text-sm text-slate-500 dark:text-slate-300'>
+                          Narrow the page list to the pages that need attention most on mobile.
+                        </p>
+                      </div>
+                      <div className='grid grid-cols-2 gap-2 sm:hidden'>
+                        {pageFilterOptions.map((filterOption) => (
+                          <PageFilterChip
+                            key={filterOption.id}
+                            label={filterOption.label}
+                            count={filterOption.count}
+                            iconPath={filterOption.iconPath}
+                            isActive={activePageFilter === filterOption.id}
+                            onClick={() => setActivePageFilter(filterOption.id)}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                    <div className='-mx-1 mt-3 hidden gap-2 overflow-x-auto px-1 pb-1 sm:flex'>
+                      {pageFilterOptions.map((filterOption) => (
+                        <PageFilterChip
+                          key={filterOption.id}
+                          label={filterOption.label}
+                          count={filterOption.count}
+                          iconPath={filterOption.iconPath}
+                          isActive={activePageFilter === filterOption.id}
+                          onClick={() => setActivePageFilter(filterOption.id)}
+                        />
+                      ))}
+                    </div>
+                  </div>
+
+                  {filteredAnalyzedPages.length === 0 && !shouldShowFailedSection && (
                     <div className='rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500 dark:border-slate-700 dark:text-slate-300'>
-                      No page-level results are available yet for this analysis run.
+                      {emptyPagesStateMessage}
                     </div>
                   )}
 
-                  {analyzedPages.length > 0 && (
+                  {filteredAnalyzedPages.length > 0 && (
                     <div>
-                      <div className='mb-3 text-xs font-semibold uppercase tracking-wide text-slate-500'>Analyzed pages</div>
+                      <div className='mb-3 flex items-center justify-between gap-3'>
+                        <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>
+                          {activePageFilter === 'withSchema'
+                            ? 'Pages with structured data'
+                            : activePageFilter === 'missingSchema'
+                              ? 'Pages missing structured data'
+                              : 'Analyzed pages'}
+                        </div>
+                        <div className='text-xs text-slate-500 dark:text-slate-300'>
+                          {filteredAnalyzedPages.length} result{filteredAnalyzedPages.length === 1 ? '' : 's'}
+                        </div>
+                      </div>
                       <div className='space-y-3'>
-                        {analyzedPages.map((page) => (
+                        {filteredAnalyzedPages.map((page) => (
                           <div
                             key={page.url}
-                            className='rounded-2xl border border-slate-200 p-4 dark:border-slate-700'
+                            className='rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-950/20 sm:p-5'
                           >
-                            <div className='break-all text-sm font-medium text-slate-900 dark:text-white'>{page.url}</div>
-                            <div className='mt-1 text-sm text-slate-500 dark:text-slate-300'>
-                              {page.title || 'Untitled page'}
-                            </div>
-                            <div className='mt-2 flex flex-wrap gap-2 text-xs'>
-                              <span className='rounded-full bg-slate-100 px-3 py-1 font-semibold text-slate-700 dark:bg-slate-800 dark:text-slate-200'>
-                                Status {page.statusCode || '—'}
-                              </span>
-                              <span className={`rounded-full px-3 py-1 font-semibold ${page.hasStructuredData
-                                ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200'
-                                : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-200'}`}>
-                                {page.hasStructuredData ? 'Structured data found' : 'No structured data'}
-                              </span>
-                              {(page.jsonLdTypes || []).slice(0, 3).map((typeName) => (
-                                <span
-                                  key={`${page.url}-${typeName}`}
-                                  className='rounded-full bg-sky-100 px-3 py-1 font-semibold text-sky-700 dark:bg-sky-500/10 dark:text-sky-200'
-                                >
-                                  {typeName}
+                            <div className='flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between'>
+                              <div className='min-w-0 flex-1'>
+                                <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>
+                                  {page.title || 'Untitled page'}
+                                </div>
+                                <div className='mt-1 break-all text-sm font-medium leading-6 text-slate-900 dark:text-white'>
+                                  {page.url}
+                                </div>
+                              </div>
+                              <div className='flex flex-wrap gap-2 text-xs'>
+                                <span className='rounded-full bg-slate-100 px-3 py-1 font-semibold text-slate-700 dark:bg-slate-800 dark:text-slate-200'>
+                                  Status {page.statusCode || '—'}
                                 </span>
-                              ))}
+                                <span className={`rounded-full px-3 py-1 font-semibold ${page.hasStructuredData
+                                  ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200'
+                                  : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-200'}`}>
+                                  {page.hasStructuredData ? 'Structured data found' : 'Needs schema'}
+                                </span>
+                              </div>
+                            </div>
+
+                            <div className='mt-4 grid gap-3 sm:grid-cols-2'>
+                              <div className='rounded-2xl bg-slate-50 px-3 py-3 text-sm text-slate-600 dark:bg-slate-900/60 dark:text-slate-300'>
+                                <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Page status</div>
+                                <div className='mt-1'>
+                                  {page.hasStructuredData
+                                    ? 'Structured data was detected on this page.'
+                                    : 'No structured data was detected yet for this page.'}
+                                </div>
+                              </div>
+                              <div className='rounded-2xl bg-slate-50 px-3 py-3 text-sm text-slate-600 dark:bg-slate-900/60 dark:text-slate-300'>
+                                <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Schema types</div>
+                                {(page.jsonLdTypes || []).length > 0 ? (
+                                  <div className='mt-2 flex flex-wrap gap-2'>
+                                    {(page.jsonLdTypes || []).slice(0, 4).map((typeName) => (
+                                      <span
+                                        key={`${page.url}-${typeName}`}
+                                        className='rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700 dark:bg-sky-500/10 dark:text-sky-200'
+                                      >
+                                        {typeName}
+                                      </span>
+                                    ))}
+                                  </div>
+                                ) : (
+                                  <div className='mt-1'>No JSON-LD types were detected on this page.</div>
+                                )}
+                              </div>
                             </div>
                           </div>
                         ))}
@@ -968,16 +1652,42 @@ https://example.com/pricing`}
                     </div>
                   )}
 
-                  {failedPages.length > 0 && (
-                    <div className='rounded-2xl border border-amber-300 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-100'>
-                      <div className='font-semibold'>Some internal pages could not be fetched</div>
-                      <ul className='mt-2 list-disc space-y-1 pl-5'>
-                        {failedPages.map((page) => (
-                          <li key={`${page.url}-${page.error}`}>
-                            <span className='font-medium'>{page.url}</span>: {page.error}
-                          </li>
-                        ))}
-                      </ul>
+                  {shouldShowFailedSection && (
+                    <div className='rounded-3xl border border-amber-300 bg-amber-50/90 p-4 text-amber-950 shadow-sm dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-100 sm:p-5'>
+                      <button
+                        type='button'
+                        className='flex w-full items-center justify-between gap-3 text-left'
+                        onClick={() => setIsFailedPagesExpanded((currentValue) => !currentValue)}
+                        aria-expanded={isFailedPagesExpanded}
+                      >
+                        <div>
+                          <div className='text-xs font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-200'>Failed page fetches</div>
+                          <div className='mt-1 text-base font-semibold'>
+                            {failedPages.length} internal page{failedPages.length === 1 ? '' : 's'} could not be fetched
+                          </div>
+                          <p className='mt-1 text-sm text-amber-800/90 dark:text-amber-100/80'>
+                            Keep this section collapsed until you need the troubleshooting details.
+                          </p>
+                        </div>
+                        <BaseIcon
+                          path={isFailedPagesExpanded ? icon.mdiChevronUp : icon.mdiChevronDown}
+                          className='shrink-0 text-amber-700 dark:text-amber-200'
+                        />
+                      </button>
+
+                      {isFailedPagesExpanded && (
+                        <div className='mt-4 space-y-3'>
+                          {failedPages.map((page) => (
+                            <div
+                              key={`${page.url}-${page.error}`}
+                              className='rounded-2xl border border-amber-200 bg-white/80 p-4 text-sm dark:border-amber-500/20 dark:bg-slate-950/40'
+                            >
+                              <div className='break-all font-medium text-slate-900 dark:text-white'>{page.url}</div>
+                              <div className='mt-2 text-amber-900 dark:text-amber-100'>{page.error}</div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>
@@ -986,15 +1696,21 @@ https://example.com/pricing`}
               {activeResultsTab === 'recommendations' && (
                 <div className='space-y-5'>
                   <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
-                    <div className='text-sm text-slate-500 dark:text-slate-300'>
-                      {recommendations.length} recommendation{recommendations.length === 1 ? '' : 's'} generated from the latest analysis.
+                    <div className='space-y-1'>
+                      <div className='text-sm text-slate-500 dark:text-slate-300'>
+                        {recommendations.length} recommendation{recommendations.length === 1 ? '' : 's'} generated from the latest analysis.
+                      </div>
+                      <div className='text-xs font-semibold uppercase tracking-wide text-slate-400 dark:text-slate-500'>
+                        Fix-first order puts higher priority and broader-scope recommendations at the top.
+                      </div>
                     </div>
-                    <BaseButtons type='justify-start sm:justify-end' className='mb-0' mb='mb-0'>
+                    <BaseButtons type='justify-start sm:justify-end' className='mb-0 w-full sm:w-auto' classAddon='w-full mb-2 sm:w-auto sm:mr-3 sm:mb-3' mb='mb-0'>
                       <BaseButton
                         color='whiteDark'
                         outline
                         icon={icon.mdiContentCopy}
                         label='Copy all code'
+                        className='w-full justify-center sm:w-auto'
                         disabled={exportableRecommendations.length === 0}
                         onClick={() => {
                           const combined = exportableRecommendations
@@ -1013,87 +1729,186 @@ https://example.com/pricing`}
                     </BaseButtons>
                   </div>
 
-                  {recommendations.length === 0 && (
-                    <div className='rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500 dark:border-slate-700 dark:text-slate-300'>
-                      No recommendations were generated for this page yet.
+                  {recommendations.length > 0 && (
+                    <div className='sticky top-[72px] z-[5] -mx-4 border-y border-slate-200 bg-white/95 px-4 py-3 backdrop-blur sm:top-[92px] sm:mx-0 sm:rounded-2xl sm:border dark:border-slate-700 dark:bg-slate-950/95'>
+                      <div className='flex min-w-full gap-2 overflow-x-auto pb-1 sm:inline-flex sm:min-w-max sm:pb-0'>
+                        {recommendationQuickFilters.map((filterOption) => (
+                          <PageFilterChip
+                            key={filterOption.id}
+                            label={filterOption.label}
+                            count={filterOption.count}
+                            iconPath={filterOption.iconPath}
+                            isActive={activeRecommendationFilter === filterOption.id}
+                            onClick={() => setActiveRecommendationFilter(filterOption.id)}
+                          />
+                        ))}
+                      </div>
+                      <div className='mt-2 text-xs text-slate-500 dark:text-slate-300'>
+                        Showing <span className='font-semibold text-slate-900 dark:text-white'>{filteredRecommendations.length}</span> item{filteredRecommendations.length === 1 ? '' : 's'} in the <span className='font-semibold text-slate-900 dark:text-white'>{activeRecommendationFilterLabel}</span> view.
+                      </div>
                     </div>
                   )}
 
-                  {recommendations.map((recommendation) => (
-                    <div
-                      key={recommendation.id}
-                      className='rounded-2xl border border-slate-200 p-4 dark:border-slate-700'
-                    >
-                      <div className='flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between'>
-                        <div>
-                          <div className='flex flex-wrap items-center gap-2'>
-                            <span className='rounded-full bg-slate-900 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white dark:bg-slate-100 dark:text-slate-900'>
-                              {recommendation.priority || 'priority'}
-                            </span>
-                            {recommendation.schema_type && (
-                              <span className='rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700 dark:bg-sky-500/10 dark:text-sky-200'>
-                                {recommendation.schema_type}
-                              </span>
-                            )}
-                            {recommendation.page_scope && (
-                              <span className='rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200'>
-                                {recommendation.page_scope}
-                              </span>
-                            )}
-                          </div>
-                          <h4 className='mt-3 text-base font-semibold text-slate-900 dark:text-white'>
-                            {recommendation.title}
-                          </h4>
-                          <p className='mt-2 text-sm leading-6 text-slate-500 dark:text-slate-300'>
-                            {recommendation.reason}
-                          </p>
-                          {recommendation.expected_impact && (
-                            <p className='mt-2 text-sm leading-6 text-slate-600 dark:text-slate-200'>
-                              <span className='font-semibold text-slate-900 dark:text-white'>Expected impact:</span>{' '}
-                              {recommendation.expected_impact}
-                            </p>
-                          )}
-                        </div>
+                  {filteredRecommendations.length === 0 && (
+                    <div className='rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500 dark:border-slate-700 dark:text-slate-300'>
+                      {recommendationEmptyStateMessage}
+                    </div>
+                  )}
 
-                        <BaseButtons type='justify-start lg:justify-end' noWrap>
-                          <BaseButton
-                            color='info'
-                            small
-                            icon={icon.mdiContentCopy}
-                            label='Copy'
-                            disabled={!recommendation.suggested_schema}
-                            onClick={() => {
-                              handleCopyCode(recommendation).catch(() => null);
-                            }}
-                          />
-                          <BaseButton
-                            color='success'
-                            small
-                            icon={icon.mdiDownload}
-                            label={exportingId === recommendation.id ? 'Exporting…' : 'Export'}
-                            disabled={!recommendation.suggested_schema || exportingId === recommendation.id}
-                            onClick={() => {
-                              handleExportRecommendation(recommendation).catch(() => null);
-                            }}
-                          />
-                          <BaseButton
-                            color='warning'
-                            small
-                            icon={icon.mdiEmailOutline}
-                            label={emailingId === recommendation.id ? 'Emailing…' : 'Email'}
-                            disabled={emailingId === recommendation.id}
-                            onClick={() => {
-                              handleEmailCode(recommendation.id).catch(() => null);
-                            }}
-                          />
-                        </BaseButtons>
+                  {recommendationGroups.map((recommendationGroup) => (
+                    <div key={recommendationGroup.meta.id} className='space-y-4'>
+                      <div className={`rounded-3xl border p-4 shadow-sm sm:p-5 ${recommendationGroup.meta.accentClassName}`}>
+                        <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+                          <div>
+                            <div className='flex flex-wrap items-center gap-3'>
+                              <span className='inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white text-slate-700 shadow-sm dark:bg-slate-950/70 dark:text-slate-100'>
+                                <BaseIcon path={recommendationGroup.meta.iconPath} size={18} />
+                              </span>
+                              <div>
+                                <h4 className='text-base font-semibold text-slate-900 dark:text-white'>{recommendationGroup.meta.sectionTitle}</h4>
+                                <p className='mt-1 text-sm leading-6 text-slate-600 dark:text-slate-200'>{recommendationGroup.meta.sectionDescription}</p>
+                              </div>
+                            </div>
+                          </div>
+                          <span className='rounded-full bg-white px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700 shadow-sm dark:bg-slate-950/70 dark:text-slate-100'>
+                            {recommendationGroup.recommendations.length} item{recommendationGroup.recommendations.length === 1 ? '' : 's'}
+                          </span>
+                        </div>
                       </div>
 
-                      <div className='mt-4'>
-                        <div className='mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500'>Suggested code</div>
-                        <pre className='overflow-x-auto rounded-2xl bg-slate-950 p-4 text-xs leading-6 text-slate-100'>
-                          <code>{recommendation.suggested_schema || 'No code snippet generated for this recommendation.'}</code>
-                        </pre>
+                      <div className='space-y-4'>
+                        {recommendationGroup.recommendations.map((recommendation) => {
+                          const isCodeExpanded = !!expandedRecommendationIds[recommendation.id];
+                          const suggestedSchema = recommendation.suggested_schema || '';
+                          const codePreview = suggestedSchema.split('\n').slice(0, 4).join('\n');
+                          const codeLineCount = suggestedSchema ? suggestedSchema.split('\n').length : 0;
+                          const priorityMeta = getRecommendationPriorityMeta(recommendation.priority);
+
+                          return (
+                            <div
+                              key={recommendation.id}
+                              className='rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-950/30 sm:p-5'
+                            >
+                              <div className='flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between'>
+                                <div>
+                                  <div className='flex flex-wrap items-center gap-2'>
+                                    <span className={`rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide ${priorityMeta.badgeClassName}`}>
+                                      {priorityMeta.label}
+                                    </span>
+                                    {recommendation.schema_type && (
+                                      <span className='rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700 dark:bg-sky-500/10 dark:text-sky-200'>
+                                        {recommendation.schema_type}
+                                      </span>
+                                    )}
+                                    {recommendation.page_scope && (
+                                      <span className='rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200'>
+                                        {recommendation.page_scope}
+                                      </span>
+                                    )}
+                                    <span className={`rounded-full px-3 py-1 text-xs font-semibold ${recommendation.suggested_schema
+                                      ? 'bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900'
+                                      : 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-200'}`}>
+                                      {recommendation.suggested_schema ? 'Code ready' : 'Needs code'}
+                                    </span>
+                                  </div>
+                                  <h4 className='mt-3 text-base font-semibold text-slate-900 dark:text-white'>
+                                    {recommendation.title}
+                                  </h4>
+                                  <p className='mt-2 text-sm leading-6 text-slate-500 dark:text-slate-300'>
+                                    {recommendation.reason}
+                                  </p>
+                                  {recommendation.expected_impact && (
+                                    <p className='mt-2 text-sm leading-6 text-slate-600 dark:text-slate-200'>
+                                      <span className='font-semibold text-slate-900 dark:text-white'>Expected impact:</span>{' '}
+                                      {recommendation.expected_impact}
+                                    </p>
+                                  )}
+                                </div>
+
+                                <BaseButtons type='justify-start lg:justify-end' className='w-full lg:w-auto' classAddon='w-full mb-2 sm:w-auto sm:mr-3 sm:mb-3'>
+                                  <BaseButton
+                                    color='info'
+                                    small
+                                    icon={icon.mdiContentCopy}
+                                    label='Copy'
+                                    className='w-full justify-center sm:w-auto'
+                                    disabled={!recommendation.suggested_schema}
+                                    onClick={() => {
+                                      handleCopyCode(recommendation).catch(() => null);
+                                    }}
+                                  />
+                                  <BaseButton
+                                    color='success'
+                                    small
+                                    icon={icon.mdiDownload}
+                                    label={exportingId === recommendation.id ? 'Exporting…' : 'Export'}
+                                    className='w-full justify-center sm:w-auto'
+                                    disabled={!recommendation.suggested_schema || exportingId === recommendation.id}
+                                    onClick={() => {
+                                      handleExportRecommendation(recommendation).catch(() => null);
+                                    }}
+                                  />
+                                  <BaseButton
+                                    color='warning'
+                                    small
+                                    icon={icon.mdiEmailOutline}
+                                    label={emailingId === recommendation.id ? 'Emailing…' : 'Email'}
+                                    className='w-full justify-center sm:w-auto'
+                                    disabled={emailingId === recommendation.id}
+                                    onClick={() => {
+                                      handleEmailCode(recommendation.id).catch(() => null);
+                                    }}
+                                  />
+                                </BaseButtons>
+                              </div>
+
+                              <div className='mt-4 rounded-2xl border border-slate-200 bg-slate-50/80 p-3 dark:border-slate-700 dark:bg-slate-900/40 sm:p-4'>
+                                <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+                                  <div>
+                                    <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Suggested code</div>
+                                    <div className='mt-1 text-xs text-slate-500 dark:text-slate-300'>
+                                      {suggestedSchema
+                                        ? isCodeExpanded
+                                          ? 'Expanded for review and copy/paste.'
+                                          : `Collapsed for mobile reading${codeLineCount > 4 ? ` · ${codeLineCount} lines available` : ''}.`
+                                        : 'No code snippet generated for this recommendation yet.'}
+                                    </div>
+                                  </div>
+                                  {suggestedSchema && (
+                                    <BaseButton
+                                      color='whiteDark'
+                                      outline
+                                      small
+                                      icon={isCodeExpanded ? icon.mdiChevronUp : icon.mdiChevronDown}
+                                      label={isCodeExpanded ? 'Hide code' : 'Show code'}
+                                      className='w-full justify-center sm:w-auto'
+                                      onClick={() => toggleRecommendationCode(recommendation.id)}
+                                    />
+                                  )}
+                                </div>
+
+                                {suggestedSchema ? (
+                                  isCodeExpanded ? (
+                                    <pre className='mt-3 overflow-x-auto rounded-2xl bg-slate-950 p-3 text-xs leading-6 text-slate-100 sm:p-4'>
+                                      <code>{suggestedSchema}</code>
+                                    </pre>
+                                  ) : (
+                                    <div className='mt-3 overflow-hidden rounded-2xl bg-slate-950 p-3 text-xs leading-6 text-slate-100 sm:p-4'>
+                                      <code className='whitespace-pre-wrap break-words'>{codePreview}</code>
+                                      <div className='mt-3 border-t border-slate-800 pt-2 text-[11px] font-semibold uppercase tracking-wide text-slate-400'>
+                                        {codeLineCount > 4 ? `Show code to view ${codeLineCount - 4} more line${codeLineCount - 4 === 1 ? '' : 's'}.` : 'Show code to expand this snippet.'}
+                                      </div>
+                                    </div>
+                                  )
+                                ) : (
+                                  <div className='mt-3 rounded-2xl border border-dashed border-slate-300 bg-white px-4 py-3 text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-950/50 dark:text-slate-300'>
+                                    No code snippet generated for this recommendation.
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          );
+                        })}
                       </div>
                     </div>
                   ))}
@@ -1102,74 +1917,186 @@ https://example.com/pricing`}
 
               {activeResultsTab === 'delivery' && (
                 <div className='space-y-5'>
-                  <div className='rounded-2xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-700 dark:bg-slate-900/40'>
-                    <h4 className='text-base font-semibold text-slate-900 dark:text-white'>Delivery actions</h4>
-                    <p className='mt-2 text-sm leading-6 text-slate-500 dark:text-slate-300'>
-                      Export a developer handoff file, email the latest recommendations, or check Step 4 output for the selected platform.
-                    </p>
-                    <div className='mt-4'>
-                      <FormField label='Developer email' labelFor='schema-email-recipient'>
-                        <input
-                          id='schema-email-recipient'
-                          name='schema-email-recipient'
-                          placeholder='developer@example.com'
-                          value={emailTo}
-                          onChange={(event) => setEmailTo(event.target.value)}
-                        />
-                      </FormField>
+                  <div className='rounded-2xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-900/40 sm:p-5'>
+                    <div className='flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between'>
+                      <div>
+                        <h4 className='text-base font-semibold text-slate-900 dark:text-white'>Delivery actions</h4>
+                        <p className='mt-2 text-sm leading-6 text-slate-500 dark:text-slate-300'>
+                          Package the latest recommendations for your developer, email a handoff, or verify Step 4 output for the selected platform.
+                        </p>
+                      </div>
+                      <div className='inline-flex items-center gap-2 self-start rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-600 shadow-sm dark:bg-slate-950/70 dark:text-slate-200'>
+                        <BaseIcon path={icon.mdiCellphoneText} size={16} />
+                        <span>Mobile handoff</span>
+                      </div>
+                    </div>
+
+                    <div className='mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-3'>
+                      {deliverySummaryCards.map((card) => (
+                        <DeliverySummaryCard
+                          key={card.label}
+                          label={card.label}
+                          value={card.value}
+                          helper={card.helper}
+                          iconPath={card.iconPath}
+                          toneClassName={card.toneClassName}
+                        />
+                      ))}
                     </div>
-                    <BaseButtons type='justify-start'>
-                      <BaseButton
-                        color='success'
-                        icon={icon.mdiDownload}
-                        label={isExportingAll ? 'Exporting…' : 'Export all'}
-                        disabled={!report?.site?.id || isExportingAll}
-                        onClick={() => {
-                          handleExportAll().catch(() => null);
-                        }}
-                      />
-                      <BaseButton
-                        color='warning'
-                        icon={icon.mdiEmailOutline}
-                        label={emailingId === 'all' ? 'Emailing…' : 'Email all'}
-                        disabled={!report?.site?.id || emailingId === 'all'}
-                        onClick={() => {
-                          handleEmailCode().catch(() => null);
-                        }}
-                      />
-                      <BaseButton
-                        color={entitlements?.canPlatformOutput ? 'info' : 'whiteDark'}
-                        outline={!entitlements?.canPlatformOutput}
-                        icon={entitlements?.canPlatformOutput ? icon.mdiCodeBraces : icon.mdiLockOutline}
-                        label={isCheckingPlatformOutput
-                          ? 'Checking…'
-                          : entitlements?.canPlatformOutput
-                            ? 'Check Step 4 output'
-                            : 'Premium Step 4'}
-                        disabled={!report?.site?.id || isCheckingPlatformOutput}
-                        onClick={() => {
-                          handlePlatformOutputCheck().catch(() => null);
-                        }}
-                      />
-                    </BaseButtons>
                   </div>
 
-                  <div className='grid gap-4 md:grid-cols-2'>
-                    <div className='rounded-2xl border border-slate-200 p-4 dark:border-slate-700'>
-                      <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Selected Step 4 platform</div>
-                      <div className='mt-2 text-sm font-semibold text-slate-900 dark:text-white'>{selectedPlatformLabel}</div>
+                  <div className='grid gap-4 xl:grid-cols-[minmax(0,1.4fr)_minmax(280px,0.9fr)]'>
+                    <div className='space-y-4'>
+                      <DeliveryActionCard
+                        title='Export developer handoff'
+                        description='Download a single package with the latest recommendations so it is easy to forward or attach in your workflow.'
+                        iconPath={icon.mdiDownload}
+                        badge={(
+                          <span className='rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200'>
+                            {exportableRecommendations.length} code ready
+                          </span>
+                        )}
+                      >
+                        <div className='space-y-3'>
+                          <div className='rounded-2xl bg-slate-50 px-4 py-3 text-sm leading-6 text-slate-600 dark:bg-slate-900/60 dark:text-slate-300'>
+                            Best for quick sharing when you want one downloadable file instead of opening each recommendation card.
+                          </div>
+                          <BaseButton
+                            color='success'
+                            icon={icon.mdiDownload}
+                            label={isExportingAll ? 'Exporting…' : 'Export all'}
+                            className='w-full justify-center'
+                            disabled={!report?.site?.id || isExportingAll}
+                            onClick={() => {
+                              handleExportAll().catch(() => null);
+                            }}
+                          />
+                        </div>
+                      </DeliveryActionCard>
+
+                      <DeliveryActionCard
+                        title='Email the handoff'
+                        description='Send the current recommendations directly to a developer or implementation partner without leaving the analyzer.'
+                        iconPath={icon.mdiEmailOutline}
+                        badge={(
+                          <span className={`rounded-full px-3 py-1 text-xs font-semibold ${hasEmailRecipient
+                            ? 'bg-sky-50 text-sky-700 dark:bg-sky-500/10 dark:text-sky-200'
+                            : 'bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-200'}`}>
+                            {hasEmailRecipient ? 'Recipient ready' : 'Recipient needed'}
+                          </span>
+                        )}
+                      >
+                        <div className='space-y-3'>
+                          <FormField label='Developer email' labelFor='schema-email-recipient'>
+                            <input
+                              id='schema-email-recipient'
+                              name='schema-email-recipient'
+                              placeholder='developer@example.com'
+                              value={emailTo}
+                              onChange={(event) => setEmailTo(event.target.value)}
+                            />
+                          </FormField>
+                          <div className='rounded-2xl bg-slate-50 px-4 py-3 text-sm leading-6 text-slate-600 dark:bg-slate-900/60 dark:text-slate-300'>
+                            Use this when you want to send the full recommendation set straight from your phone.
+                          </div>
+                          <BaseButton
+                            color='warning'
+                            icon={icon.mdiEmailOutline}
+                            label={emailingId === 'all' ? 'Emailing…' : 'Email all'}
+                            className='w-full justify-center'
+                            disabled={!report?.site?.id || emailingId === 'all'}
+                            onClick={() => {
+                              handleEmailCode().catch(() => null);
+                            }}
+                          />
+                        </div>
+                      </DeliveryActionCard>
+
+                      <DeliveryActionCard
+                        title='Check Step 4 output'
+                        description='Verify whether platform-specific implementation output is available for the platform selected in setup.'
+                        iconPath={entitlements?.canPlatformOutput ? icon.mdiCodeBraces : icon.mdiLockOutline}
+                        badge={(
+                          <span className={`rounded-full px-3 py-1 text-xs font-semibold ${entitlements?.canPlatformOutput
+                            ? 'bg-violet-50 text-violet-700 dark:bg-violet-500/10 dark:text-violet-200'
+                            : 'bg-slate-100 text-slate-600 dark:bg-slate-900 dark:text-slate-200'}`}>
+                            {entitlements?.canPlatformOutput ? 'Premium unlocked' : 'Premium feature'}
+                          </span>
+                        )}
+                      >
+                        <div className='space-y-3'>
+                          <div className='grid gap-3 sm:grid-cols-2'>
+                            <div className='rounded-2xl border border-slate-200 px-4 py-3 dark:border-slate-700'>
+                              <div className='text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400'>Selected platform</div>
+                              <div className='mt-2 text-sm font-semibold text-slate-900 dark:text-white'>{selectedPlatformLabel}</div>
+                            </div>
+                            <div className='rounded-2xl border border-slate-200 px-4 py-3 dark:border-slate-700'>
+                              <div className='text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400'>Access</div>
+                              <div className='mt-2 text-sm font-semibold text-slate-900 dark:text-white'>
+                                {entitlements?.canPlatformOutput ? 'Premium access detected' : 'Premium required for Step 4 output'}
+                              </div>
+                            </div>
+                          </div>
+                          <BaseButton
+                            color={entitlements?.canPlatformOutput ? 'info' : 'whiteDark'}
+                            outline={!entitlements?.canPlatformOutput}
+                            icon={entitlements?.canPlatformOutput ? icon.mdiCodeBraces : icon.mdiLockOutline}
+                            label={isCheckingPlatformOutput
+                              ? 'Checking…'
+                              : entitlements?.canPlatformOutput
+                                ? 'Check Step 4 output'
+                                : 'Premium Step 4'}
+                            className='w-full justify-center'
+                            disabled={!report?.site?.id || isCheckingPlatformOutput}
+                            onClick={() => {
+                              handlePlatformOutputCheck().catch(() => null);
+                            }}
+                          />
+                        </div>
+                      </DeliveryActionCard>
                     </div>
-                    <div className='rounded-2xl border border-slate-200 p-4 dark:border-slate-700'>
-                      <div className='text-xs font-semibold uppercase tracking-wide text-slate-500'>Access</div>
-                      <div className='mt-2 text-sm font-semibold text-slate-900 dark:text-white'>
-                        {entitlements?.canPlatformOutput ? 'Premium access detected' : 'Premium required for Step 4 output'}
+
+                    <div className='rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-950/30 sm:p-5'>
+                      <div className='flex items-center gap-3'>
+                        <span className='inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-slate-100 text-slate-600 dark:bg-slate-900 dark:text-slate-200'>
+                          <BaseIcon path={icon.mdiChecklist} size={20} />
+                        </span>
+                        <div>
+                          <h5 className='text-sm font-semibold text-slate-900 dark:text-white sm:text-base'>Handoff checklist</h5>
+                          <p className='mt-1 text-sm leading-6 text-slate-500 dark:text-slate-300'>
+                            A quick mobile-friendly checklist before you export or email the report.
+                          </p>
+                        </div>
+                      </div>
+
+                      <div className='mt-4 space-y-3'>
+                        {deliveryChecklist.map((item) => (
+                          <div
+                            key={item.id}
+                            className='rounded-2xl border border-slate-200 px-4 py-3 dark:border-slate-700'
+                          >
+                            <div className='flex items-start justify-between gap-3'>
+                              <div>
+                                <div className='text-sm font-semibold text-slate-900 dark:text-white'>{item.label}</div>
+                                <div className='mt-1 text-sm leading-6 text-slate-500 dark:text-slate-300'>{item.value}</div>
+                              </div>
+                              <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-semibold ${item.isReady
+                                ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200'
+                                : 'bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-200'}`}>
+                                <BaseIcon path={item.isReady ? icon.mdiCheckCircleOutline : icon.mdiAlertCircleOutline} size={14} />
+                                <span>{item.isReady ? 'Ready' : 'Needs attention'}</span>
+                              </span>
+                            </div>
+                          </div>
+                        ))}
                       </div>
                     </div>
                   </div>
                 </div>
               )}
             </div>
-          </CardBox>
+            </CardBox>
+          </div>
         )}
 
         <ToastContainer />