diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index 094da1f..a88d479 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -1,20 +1,20 @@
-import { useState } from 'react';
-import { OverviewDemo } from './sections/OverviewDemo';
-import { PerUnitDemo } from './sections/PerUnitDemo';
-import { TieredVolumeDemo } from './sections/TieredVolumeDemo';
-import { TieredGraduatedDemo } from './sections/TieredGraduatedDemo';
-import { TieredFlatFeeDemo } from './sections/TieredFlatFeeDemo';
-import { TaxDemo } from './sections/TaxDemo';
-import { DiscountDemo } from './sections/DiscountDemo';
+import { useState, useEffect, useCallback } from 'react';
 import { CompositePriceDemo } from './sections/CompositePriceDemo';
-import { RecurringBillingDemo } from './sections/RecurringBillingDemo';
 import { CurrencyDemo } from './sections/CurrencyDemo';
+import { DiscountDemo } from './sections/DiscountDemo';
 import { DynamicTariffDemo } from './sections/DynamicTariffDemo';
-import { GetAGDemo } from './sections/GetAGDemo';
 import { ElectricityDemo } from './sections/ElectricityDemo';
 import { GasDemo } from './sections/GasDemo';
+import { GetAGDemo } from './sections/GetAGDemo';
 import { HouseConnectionDemo } from './sections/HouseConnectionDemo';
 import { NonCommodityDemo } from './sections/NonCommodityDemo';
+import { OverviewDemo } from './sections/OverviewDemo';
+import { PerUnitDemo } from './sections/PerUnitDemo';
+import { RecurringBillingDemo } from './sections/RecurringBillingDemo';
+import { TaxDemo } from './sections/TaxDemo';
+import { TieredFlatFeeDemo } from './sections/TieredFlatFeeDemo';
+import { TieredGraduatedDemo } from './sections/TieredGraduatedDemo';
+import { TieredVolumeDemo } from './sections/TieredVolumeDemo';
 
 type SectionItem = {
   id: string;
@@ -35,30 +35,30 @@ function isGroup(s: Section): s is SectionGroup {
 }
 
 const sections: Section[] = [
-  { id: 'overview', label: 'Overview', icon: '\uD83C\uDFE0', component: OverviewDemo },
+  { id: 'overview', label: 'Overview', icon: '🏠', component: OverviewDemo },
   {
-    group: 'Energy & Utility Use Cases',
+    group: 'Energy Products',
     items: [
-      { id: 'electricity', label: 'Electricity', icon: '\u26A1', component: ElectricityDemo },
-      { id: 'gas', label: 'Gas', icon: '\uD83D\uDD25', component: GasDemo },
-      { id: 'house-connection', label: 'House Connection', icon: '\uD83C\uDFE1', component: HouseConnectionDemo },
-      { id: 'non-commodity', label: 'Non-Commodity', icon: '\uD83D\uDCCB', component: NonCommodityDemo },
+      { id: 'electricity', label: 'Electricity', icon: '⚡', component: ElectricityDemo },
+      { id: 'gas', label: 'Gas', icon: '🔥', component: GasDemo },
+      { id: 'house-connection', label: 'House Connection', icon: '🏡', component: HouseConnectionDemo },
+      { id: 'non-commodity', label: 'Products & Add-ons', icon: '☀️', component: NonCommodityDemo },
     ],
   },
   {
-    group: 'Capabilities',
+    group: 'Pricing Models',
     items: [
-      { id: 'per-unit', label: 'Per Unit', icon: '\uD83D\uDCE6', component: PerUnitDemo },
-      { id: 'tiered-volume', label: 'Tiered Volume', icon: '\uD83D\uDCCA', component: TieredVolumeDemo },
-      { id: 'tiered-graduated', label: 'Tiered Graduated', icon: '\uD83D\uDCC8', component: TieredGraduatedDemo },
-      { id: 'tiered-flatfee', label: 'Tiered Flat Fee', icon: '\uD83C\uDFF7\uFE0F', component: TieredFlatFeeDemo },
-      { id: 'tax', label: 'Tax Handling', icon: '\uD83E\uDDFE', component: TaxDemo },
-      { id: 'discounts', label: 'Discounts & Coupons', icon: '\uD83C\uDF9F\uFE0F', component: DiscountDemo },
-      { id: 'composite', label: 'Composite Pricing', icon: '\uD83E\uDDE9', component: CompositePriceDemo },
-      { id: 'recurring', label: 'Recurring Billing', icon: '\uD83D\uDD04', component: RecurringBillingDemo },
-      { id: 'currency', label: 'Currency & Formatting', icon: '\uD83D\uDCB1', component: CurrencyDemo },
-      { id: 'dynamic-tariff', label: 'Dynamic Tariff', icon: '\u26A1', component: DynamicTariffDemo },
-      { id: 'getag', label: 'GetAG Energy', icon: '\uD83D\uDD0C', component: GetAGDemo },
+      { id: 'per-unit', label: 'Per Unit', icon: '📦', component: PerUnitDemo },
+      { id: 'tiered-volume', label: 'Tiered Volume', icon: '📊', component: TieredVolumeDemo },
+      { id: 'tiered-graduated', label: 'Tiered Graduated', icon: '📈', component: TieredGraduatedDemo },
+      { id: 'tiered-flatfee', label: 'Tiered Flat Fee', icon: '🏷️', component: TieredFlatFeeDemo },
+      { id: 'tax', label: 'Tax Handling', icon: '🧾', component: TaxDemo },
+      { id: 'discounts', label: 'Discounts & Coupons', icon: '🎟️', component: DiscountDemo },
+      { id: 'composite', label: 'Composite Pricing', icon: '🧩', component: CompositePriceDemo },
+      { id: 'recurring', label: 'Recurring Billing', icon: '🔄', component: RecurringBillingDemo },
+      { id: 'currency', label: 'Currency & Formatting', icon: '💱', component: CurrencyDemo },
+      { id: 'dynamic-tariff', label: 'Dynamic Tariff', icon: '⚡', component: DynamicTariffDemo },
+      { id: 'getag', label: 'GetAG Energy', icon: '🔌', component: GetAGDemo },
     ],
   },
 ];
@@ -77,47 +77,75 @@ function getAllSections(): SectionItem[] {
 
 const allSections = getAllSections();
 
+const isMobile = () => window.matchMedia('(max-width: 767px)').matches;
+
 export default function App() {
   const [activeSection, setActiveSection] = useState('overview');
-  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useState(() => !isMobile());
+
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 767px)');
+    const handler = (e: MediaQueryListEvent) => {
+      if (e.matches) setSidebarOpen(false);
+    };
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  const navigate = useCallback((id: string) => {
+    setActiveSection(id);
+    if (isMobile()) setSidebarOpen(false);
+  }, []);
 
   const ActiveComponent = allSections.find((s) => s.id === activeSection)?.component ?? OverviewDemo;
   const activeItem = allSections.find((s) => s.id === activeSection);
 
   return (
-    <div className="flex h-screen overflow-hidden">
+    <div className="flex h-screen overflow-hidden bg-gray-50">
       {/* Sidebar */}
       <aside
-        className={`${sidebarOpen ? 'w-64' : 'w-0 overflow-hidden'} flex-shrink-0 bg-white border-r border-gray-200 flex flex-col transition-all duration-200`}
+        className={`${sidebarOpen ? 'w-72' : 'w-0 overflow-hidden'} flex-shrink-0 bg-white border-r border-gray-100 flex flex-col transition-all duration-300`}
       >
-        <div className="p-4 border-b border-gray-200">
-          <h1 className="text-lg font-bold text-gray-900">epilot Pricing</h1>
-          <p className="text-xs text-gray-500 mt-0.5">Pricing Playground</p>
+        {/* Brand */}
+        <div className="p-5 border-b border-gray-100">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl gradient-primary flex items-center justify-center">
+              <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+            </div>
+            <div>
+              <h1 className="text-base font-extrabold text-gray-900 tracking-tight">epilot Pricing</h1>
+              <p className="text-[10px] font-medium text-gray-400 uppercase tracking-widest">Interactive Playground</p>
+            </div>
+          </div>
         </div>
-        <nav className="flex-1 overflow-y-auto py-2">
+
+        {/* Nav */}
+        <nav className="flex-1 overflow-y-auto py-3 px-3">
           {sections.map((section) => {
             if (isGroup(section)) {
               return (
-                <div key={section.group}>
-                  <div className="px-4 pt-4 pb-1">
-                    <p className="text-[10px] font-bold uppercase tracking-wider text-gray-400">
-                      {section.group}
-                    </p>
+                <div key={section.group} className="mt-5 first:mt-0">
+                  <p className="px-3 pb-2 text-[10px] font-bold uppercase tracking-widest text-gray-300">
+                    {section.group}
+                  </p>
+                  <div className="space-y-0.5">
+                    {section.items.map((item) => (
+                      <button
+                        key={item.id}
+                        onClick={() => navigate(item.id)}
+                        className={`w-full text-left px-3 py-2.5 rounded-xl text-sm flex items-center gap-3 transition-all duration-200 ${
+                          activeSection === item.id
+                            ? 'bg-primary-50 text-primary-700 font-semibold shadow-sm'
+                            : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700'
+                        }`}
+                      >
+                        <span className="text-base w-6 text-center">{item.icon}</span>
+                        <span>{item.label}</span>
+                      </button>
+                    ))}
                   </div>
-                  {section.items.map((item) => (
-                    <button
-                      key={item.id}
-                      onClick={() => setActiveSection(item.id)}
-                      className={`w-full text-left px-4 pl-6 py-2.5 text-sm flex items-center gap-3 transition-colors ${
-                        activeSection === item.id
-                          ? 'bg-primary-50 text-primary-700 font-medium border-r-2 border-primary-600'
-                          : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
-                      }`}
-                    >
-                      <span className="text-base">{item.icon}</span>
-                      {item.label}
-                    </button>
-                  ))}
                 </div>
               );
             }
@@ -125,42 +153,58 @@ export default function App() {
             return (
               <button
                 key={section.id}
-                onClick={() => setActiveSection(section.id)}
-                className={`w-full text-left px-4 py-2.5 text-sm flex items-center gap-3 transition-colors ${
+                onClick={() => navigate(section.id)}
+                className={`w-full text-left px-3 py-2.5 rounded-xl text-sm flex items-center gap-3 transition-all duration-200 ${
                   activeSection === section.id
-                    ? 'bg-primary-50 text-primary-700 font-medium border-r-2 border-primary-600'
-                    : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+                    ? 'bg-primary-50 text-primary-700 font-semibold shadow-sm'
+                    : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700'
                 }`}
               >
-                <span className="text-base">{section.icon}</span>
-                {section.label}
+                <span className="text-base w-6 text-center">{section.icon}</span>
+                <span>{section.label}</span>
               </button>
             );
           })}
         </nav>
-        <div className="p-4 border-t border-gray-200 text-xs text-gray-400">
-          <p>@epilot/pricing v5.4.0</p>
-          <p className="mt-1">Made with love by <a href="https://github.com/jpinho" target="_blank" rel="noopener noreferrer" className="text-primary-600 hover:underline">@jpinho</a></p>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-gray-100">
+          <div className="flex items-center gap-2 text-xs text-gray-400">
+            <div className="w-2 h-2 rounded-full bg-emerald-400"></div>
+            <span className="font-mono">v5.4.0</span>
+          </div>
+          <p className="text-[10px] text-gray-300 mt-1.5">
+            Made with care by{' '}
+            <a
+              href="https://github.com/jpinho"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary-500 hover:text-primary-600 font-medium"
+            >
+              @jpinho
+            </a>
+          </p>
         </div>
       </aside>
 
       {/* Main content */}
       <main className="flex-1 overflow-y-auto">
-        <div className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b border-gray-200 px-6 py-3 flex items-center gap-3">
+        <div className="sticky top-0 z-10 bg-white/70 backdrop-blur-xl border-b border-gray-100 px-6 py-3 flex items-center gap-4">
           <button
             onClick={() => setSidebarOpen(!sidebarOpen)}
-            className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500"
+            className="p-2 rounded-xl hover:bg-gray-100 text-gray-400 transition-colors"
           >
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
             </svg>
           </button>
-          <h2 className="text-sm font-semibold text-gray-700">
-            {activeItem?.icon} {activeItem?.label}
-          </h2>
+          <div className="flex items-center gap-2">
+            <span className="text-lg">{activeItem?.icon}</span>
+            <h2 className="text-sm font-bold text-gray-700">{activeItem?.label}</h2>
+          </div>
         </div>
-        <div className="p-6 max-w-6xl mx-auto">
-          <ActiveComponent onNavigate={setActiveSection} />
+        <div className="p-8 max-w-7xl mx-auto">
+          <ActiveComponent onNavigate={navigate} />
         </div>
       </main>
     </div>
diff --git a/demo/src/components/CodeBlock.tsx b/demo/src/components/CodeBlock.tsx
index d50dc38..6b8bf20 100644
--- a/demo/src/components/CodeBlock.tsx
+++ b/demo/src/components/CodeBlock.tsx
@@ -12,16 +12,63 @@ interface Token {
 }
 
 const JS_KEYWORDS = new Set([
-  'import', 'from', 'export', 'default', 'const', 'let', 'var', 'function',
-  'return', 'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'break',
-  'continue', 'new', 'this', 'class', 'extends', 'async', 'await', 'try',
-  'catch', 'throw', 'typeof', 'instanceof', 'in', 'of', 'true', 'false',
-  'null', 'undefined', 'void', 'type', 'interface', 'enum', 'as',
+  'import',
+  'from',
+  'export',
+  'default',
+  'const',
+  'let',
+  'var',
+  'function',
+  'return',
+  'if',
+  'else',
+  'for',
+  'while',
+  'do',
+  'switch',
+  'case',
+  'break',
+  'continue',
+  'new',
+  'this',
+  'class',
+  'extends',
+  'async',
+  'await',
+  'try',
+  'catch',
+  'throw',
+  'typeof',
+  'instanceof',
+  'in',
+  'of',
+  'true',
+  'false',
+  'null',
+  'undefined',
+  'void',
+  'type',
+  'interface',
+  'enum',
+  'as',
 ]);
 
 const BUILTIN = new Set([
-  'console', 'Math', 'JSON', 'Array', 'Object', 'String', 'Number',
-  'Boolean', 'Promise', 'Map', 'Set', 'Date', 'Error', 'RegExp',
+  'console',
+  'Math',
+  'JSON',
+  'Array',
+  'Object',
+  'String',
+  'Number',
+  'Boolean',
+  'Promise',
+  'Map',
+  'Set',
+  'Date',
+  'Error',
+  'RegExp',
 ]);
 
 function tokenize(code: string): Token[] {
@@ -137,7 +184,11 @@ export function CodeBlock({ code, title, language = 'typescript' }: CodeBlockPro
       // Simple bash highlighting: just color comments and strings
       return code.split('\n').map((line, i) => {
         if (line.trimStart().startsWith('#')) {
-          return <div key={i}><span className="text-gray-500 italic">{line}</span></div>;
+          return (
+            <div key={i}>
+              <span className="text-gray-500 italic">{line}</span>
+            </div>
+          );
         }
         return <div key={i}>{line}</div>;
       });
@@ -145,7 +196,9 @@ export function CodeBlock({ code, title, language = 'typescript' }: CodeBlockPro
 
     const tokens = tokenize(code);
     return tokens.map((token, i) => (
-      <span key={i} className={tokenColors[token.type]}>{token.value}</span>
+      <span key={i} className={tokenColors[token.type]}>
+        {token.value}
+      </span>
     ));
   }, [code, language]);
 
diff --git a/demo/src/components/ProductShowcase.tsx b/demo/src/components/ProductShowcase.tsx
new file mode 100644
index 0000000..232fac5
--- /dev/null
+++ b/demo/src/components/ProductShowcase.tsx
@@ -0,0 +1,274 @@
+interface ProductShowcaseProps {
+  icon: React.ReactNode;
+  gradient: string;
+  title: string;
+  description: string;
+  price: string;
+  priceLabel: string;
+  features: string[];
+  tag?: string;
+  tagColor?: string;
+  selected?: boolean;
+  onToggle?: () => void;
+}
+
+// SVG illustrations for product categories
+export function SolarIllustration() {
+  return (
+    <svg viewBox="0 0 200 120" className="w-full h-full" fill="none" xmlns="http://www.w3.org/2000/svg">
+      {/* Sky */}
+      <rect width="200" height="120" fill="url(#solar-sky)" rx="0" />
+      {/* Sun */}
+      <circle cx="160" cy="30" r="18" fill="#FCD34D" />
+      <circle cx="160" cy="30" r="14" fill="#FBBF24" />
+      {/* Sun rays */}
+      {[0, 45, 90, 135, 180, 225, 270, 315].map((angle) => (
+        <line
+          key={angle}
+          x1={160 + Math.cos((angle * Math.PI) / 180) * 22}
+          y1={30 + Math.sin((angle * Math.PI) / 180) * 22}
+          x2={160 + Math.cos((angle * Math.PI) / 180) * 28}
+          y2={30 + Math.sin((angle * Math.PI) / 180) * 28}
+          stroke="#FBBF24"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+      ))}
+      {/* House */}
+      <rect x="55" y="60" width="50" height="40" rx="2" fill="#94A3B8" />
+      <polygon points="40,62 80,38 120,62" fill="#64748B" />
+      {/* Solar panels on roof */}
+      <rect x="58" y="44" width="18" height="12" rx="1" fill="#1E3A5F" stroke="#3B82F6" strokeWidth="0.5" />
+      <rect x="78" y="44" width="18" height="12" rx="1" fill="#1E3A5F" stroke="#3B82F6" strokeWidth="0.5" />
+      <line x1="67" y1="44" x2="67" y2="56" stroke="#3B82F6" strokeWidth="0.3" />
+      <line x1="58" y1="50" x2="76" y2="50" stroke="#3B82F6" strokeWidth="0.3" />
+      <line x1="87" y1="44" x2="87" y2="56" stroke="#3B82F6" strokeWidth="0.3" />
+      <line x1="78" y1="50" x2="96" y2="50" stroke="#3B82F6" strokeWidth="0.3" />
+      {/* Battery */}
+      <rect x="125" y="82" width="22" height="16" rx="3" fill="#059669" />
+      <rect x="127" y="84" width="5" height="12" rx="1" fill="#34D399" opacity="0.8" />
+      <rect x="133" y="84" width="5" height="12" rx="1" fill="#34D399" opacity="0.6" />
+      <rect x="139" y="87" width="5" height="9" rx="1" fill="#34D399" opacity="0.3" />
+      {/* Lightning bolt */}
+      <path d="M136 76 L132 82 L136 82 L134 88 L140 80 L136 80 Z" fill="#FBBF24" />
+      {/* Ground */}
+      <rect x="0" y="100" width="200" height="20" fill="#86EFAC" opacity="0.3" />
+      <defs>
+        <linearGradient id="solar-sky" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="#DBEAFE" />
+          <stop offset="100%" stopColor="#EFF6FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
+export function WallboxIllustration() {
+  return (
+    <svg viewBox="0 0 200 120" className="w-full h-full" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="200" height="120" fill="url(#wb-bg)" rx="0" />
+      {/* Garage wall */}
+      <rect x="20" y="20" width="160" height="80" rx="4" fill="#E2E8F0" />
+      <rect x="20" y="20" width="160" height="8" rx="2" fill="#CBD5E1" />
+      {/* Wallbox unit */}
+      <rect x="130" y="40" width="30" height="45" rx="4" fill="#1E40AF" />
+      <rect x="133" y="43" width="24" height="10" rx="2" fill="#3B82F6" />
+      <circle cx="145" cy="58" r="3" fill="#60A5FA" />
+      <circle cx="145" cy="58" r="1.5" fill="#93C5FD" />
+      {/* Charging cable */}
+      <path
+        d="M145 70 C145 78 140 82 130 85 C120 88 100 88 90 85"
+        stroke="#374151"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        fill="none"
+      />
+      {/* Car */}
+      <rect x="30" y="72" width="70" height="22" rx="4" fill="#3B82F6" />
+      <rect x="38" y="64" width="48" height="12" rx="3" fill="#60A5FA" />
+      {/* Windows */}
+      <rect x="42" y="66" width="18" height="8" rx="1.5" fill="#BFDBFE" />
+      <rect x="63" y="66" width="18" height="8" rx="1.5" fill="#BFDBFE" />
+      {/* Wheels */}
+      <circle cx="48" cy="94" r="7" fill="#374151" />
+      <circle cx="48" cy="94" r="4" fill="#6B7280" />
+      <circle cx="82" cy="94" r="7" fill="#374151" />
+      <circle cx="82" cy="94" r="4" fill="#6B7280" />
+      {/* Charging plug connector */}
+      <circle cx="90" cy="85" r="3" fill="#60A5FA" />
+      {/* LED indicator */}
+      <circle cx="145" cy="66" r="1.5" fill="#34D399" />
+      <circle cx="145" cy="66" r="3" fill="#34D399" opacity="0.3" />
+      <defs>
+        <linearGradient id="wb-bg" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="#EFF6FF" />
+          <stop offset="100%" stopColor="#DBEAFE" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
+export function HeatPumpIllustration() {
+  return (
+    <svg viewBox="0 0 200 120" className="w-full h-full" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="200" height="120" fill="url(#hp-bg)" rx="0" />
+      {/* House silhouette */}
+      <rect x="90" y="35" width="60" height="50" rx="2" fill="#F1F5F9" stroke="#CBD5E1" strokeWidth="1" />
+      <polygon points="80,37 120,15 160,37" fill="#E2E8F0" stroke="#CBD5E1" strokeWidth="1" />
+      {/* Window */}
+      <rect x="105" y="50" width="14" height="14" rx="1" fill="#BFDBFE" />
+      <line x1="112" y1="50" x2="112" y2="64" stroke="#93C5FD" strokeWidth="0.5" />
+      <line x1="105" y1="57" x2="119" y2="57" stroke="#93C5FD" strokeWidth="0.5" />
+      {/* Door */}
+      <rect x="125" y="60" width="12" height="25" rx="1" fill="#94A3B8" />
+      {/* Heat pump outdoor unit */}
+      <rect x="25" y="55" width="40" height="35" rx="4" fill="#DC2626" />
+      <rect x="28" y="58" width="34" height="18" rx="2" fill="#991B1B" />
+      {/* Fan grille */}
+      <circle cx="45" cy="67" r="7" stroke="#FCA5A5" strokeWidth="1" fill="none" />
+      <circle cx="45" cy="67" r="4" stroke="#FCA5A5" strokeWidth="0.5" fill="none" />
+      <line x1="45" y1="60" x2="45" y2="74" stroke="#FCA5A5" strokeWidth="0.5" />
+      <line x1="38" y1="67" x2="52" y2="67" stroke="#FCA5A5" strokeWidth="0.5" />
+      {/* Connection pipes */}
+      <path d="M65 65 L90 65" stroke="#EF4444" strokeWidth="2" strokeDasharray="4 2" />
+      <path d="M65 75 L90 75" stroke="#3B82F6" strokeWidth="2" strokeDasharray="4 2" />
+      {/* Heat waves */}
+      <path d="M110 42 Q113 38 110 34" stroke="#FCA5A5" strokeWidth="1" fill="none" opacity="0.6" />
+      <path d="M116 42 Q119 38 116 34" stroke="#FCA5A5" strokeWidth="1" fill="none" opacity="0.4" />
+      <path d="M122 42 Q125 38 122 34" stroke="#FCA5A5" strokeWidth="1" fill="none" opacity="0.2" />
+      {/* Temperature indicator */}
+      <rect x="30" y="80" width="8" height="3" rx="1" fill="#FCA5A5" />
+      <rect x="40" y="80" width="8" height="3" rx="1" fill="#34D399" />
+      {/* Ground */}
+      <rect x="0" y="100" width="200" height="20" fill="#86EFAC" opacity="0.2" />
+      <defs>
+        <linearGradient id="hp-bg" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="#FEF2F2" />
+          <stop offset="100%" stopColor="#FFF7ED" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
+export function SmartHomeIllustration() {
+  return (
+    <svg viewBox="0 0 200 120" className="w-full h-full" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="200" height="120" fill="url(#sh-bg)" rx="0" />
+      {/* House */}
+      <rect x="60" y="45" width="80" height="50" rx="3" fill="#F1F5F9" stroke="#CBD5E1" strokeWidth="1" />
+      <polygon points="50,47 100,20 150,47" fill="#E2E8F0" stroke="#CBD5E1" strokeWidth="1" />
+      {/* Smart windows with glow */}
+      <rect x="70" y="55" width="16" height="16" rx="2" fill="#DBEAFE" stroke="#3B82F6" strokeWidth="1" />
+      <rect x="115" y="55" width="16" height="16" rx="2" fill="#DBEAFE" stroke="#3B82F6" strokeWidth="1" />
+      {/* Door */}
+      <rect x="93" y="68" width="14" height="27" rx="1.5" fill="#94A3B8" />
+      <circle cx="104" cy="82" r="1.5" fill="#34D399" />
+      {/* WiFi symbol above house */}
+      <path d="M92 28 Q100 22 108 28" stroke="#10B981" strokeWidth="1.5" fill="none" strokeLinecap="round" />
+      <path d="M95 24 Q100 20 105 24" stroke="#10B981" strokeWidth="1.5" fill="none" strokeLinecap="round" />
+      <circle cx="100" cy="30" r="1.5" fill="#10B981" />
+      {/* Thermostat icon */}
+      <circle cx="30" cy="55" r="12" fill="white" stroke="#10B981" strokeWidth="1.5" />
+      <path d="M30 48 L30 55 L35 55" stroke="#10B981" strokeWidth="1.5" strokeLinecap="round" />
+      <text x="25" y="66" fontSize="5" fill="#6B7280">
+        22°
+      </text>
+      {/* Energy meter */}
+      <rect x="160" y="45" width="24" height="30" rx="3" fill="white" stroke="#10B981" strokeWidth="1" />
+      <rect x="163" y="48" width="18" height="8" rx="1" fill="#D1FAE5" />
+      <text x="165" y="55" fontSize="5" fill="#059669" fontFamily="monospace">
+        3.2kW
+      </text>
+      {/* Connection lines */}
+      <path d="M42 55 L60 55" stroke="#10B981" strokeWidth="0.8" strokeDasharray="3 2" opacity="0.5" />
+      <path d="M140 60 L160 60" stroke="#10B981" strokeWidth="0.8" strokeDasharray="3 2" opacity="0.5" />
+      {/* Ground */}
+      <rect x="0" y="100" width="200" height="20" fill="#86EFAC" opacity="0.15" />
+      <defs>
+        <linearGradient id="sh-bg" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="#ECFDF5" />
+          <stop offset="100%" stopColor="#F0FDF4" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
+const illustrations: Record<string, React.ComponentType> = {
+  solar: SolarIllustration,
+  emobility: WallboxIllustration,
+  heating: HeatPumpIllustration,
+  smarthome: SmartHomeIllustration,
+};
+
+export function ProductShowcase({
+  icon,
+  gradient,
+  title,
+  description,
+  price,
+  priceLabel,
+  features,
+  tag,
+  tagColor = 'bg-primary-100 text-primary-700',
+  selected,
+  onToggle,
+}: ProductShowcaseProps) {
+  const Illustration = illustrations[gradient] || SolarIllustration;
+
+  return (
+    <div
+      className={`showcase-card cursor-pointer ${selected ? 'ring-2 ring-primary-500 ring-offset-2' : ''}`}
+      onClick={onToggle}
+    >
+      <div className="showcase-card-image relative">
+        <Illustration />
+        {tag && (
+          <span
+            className={`absolute top-3 right-3 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider ${tagColor}`}
+          >
+            {tag}
+          </span>
+        )}
+        {selected !== undefined && (
+          <div
+            className={`absolute top-3 left-3 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold transition-colors ${
+              selected
+                ? 'bg-primary-600 text-white'
+                : 'bg-white/80 backdrop-blur-sm text-gray-400 border border-gray-200'
+            }`}
+          >
+            {selected ? '✓' : ''}
+          </div>
+        )}
+      </div>
+      <div className="showcase-card-body">
+        <div className="flex items-center gap-2 mb-2">
+          <span className="text-xl">{icon}</span>
+          <h3 className="font-bold text-gray-900">{title}</h3>
+        </div>
+        <p className="text-sm text-gray-500 mb-3 line-clamp-2">{description}</p>
+        <div className="flex items-baseline gap-1 mb-3">
+          <span className="showcase-card-price">{price}</span>
+          <span className="text-sm text-gray-400">{priceLabel}</span>
+        </div>
+        <div className="space-y-1.5">
+          {features.map((f, i) => (
+            <div key={i} className="flex items-center gap-2 text-xs text-gray-600">
+              <svg className="w-3.5 h-3.5 text-emerald-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              {f}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/demo/src/components/ResultCard.tsx b/demo/src/components/ResultCard.tsx
index bd4781a..0c54f20 100644
--- a/demo/src/components/ResultCard.tsx
+++ b/demo/src/components/ResultCard.tsx
@@ -4,24 +4,36 @@ interface ResultCardProps {
   sublabel?: string;
   highlight?: boolean;
   color?: 'default' | 'green' | 'red' | 'blue' | 'amber';
+  icon?: React.ReactNode;
+  large?: boolean;
 }
 
 const colorMap = {
-  default: 'text-gray-900',
-  green: 'text-green-600',
-  red: 'text-red-600',
-  blue: 'text-primary-600',
-  amber: 'text-amber-600',
+  default: { text: 'text-gray-900', bg: 'bg-gray-50', border: 'border-gray-100' },
+  green: { text: 'text-emerald-600', bg: 'bg-emerald-50', border: 'border-emerald-100' },
+  red: { text: 'text-red-600', bg: 'bg-red-50', border: 'border-red-100' },
+  blue: { text: 'text-primary-600', bg: 'bg-blue-50', border: 'border-blue-100' },
+  amber: { text: 'text-amber-600', bg: 'bg-amber-50', border: 'border-amber-100' },
 };
 
-export function ResultCard({ label, value, sublabel, highlight, color = 'default' }: ResultCardProps) {
+export function ResultCard({ label, value, sublabel, highlight, color = 'default', icon, large }: ResultCardProps) {
+  const colors = colorMap[color];
   return (
     <div
-      className={`rounded-lg p-4 ${highlight ? 'bg-primary-50 border border-primary-200' : 'bg-gray-50 border border-gray-100'}`}
+      className={`rounded-xl p-4 border transition-all ${
+        highlight ? `${colors.bg} ${colors.border} shadow-sm` : `bg-gray-50/50 border-gray-100`
+      }`}
     >
-      <p className="result-label">{label}</p>
-      <p className={`text-xl font-bold mt-1 ${colorMap[color]}`}>{value}</p>
-      {sublabel && <p className="text-xs text-gray-400 mt-0.5">{sublabel}</p>}
+      <div className="flex items-center gap-2">
+        {icon && <span className="text-sm">{icon}</span>}
+        <p className="result-label">{label}</p>
+      </div>
+      <p
+        className={`${large ? 'text-3xl' : 'text-xl'} font-extrabold mt-1.5 tracking-tight tabular-nums ${highlight ? colors.text : 'text-gray-900'}`}
+      >
+        {value}
+      </p>
+      {sublabel && <p className="text-xs text-gray-400 mt-1">{sublabel}</p>}
     </div>
   );
 }
diff --git a/demo/src/components/TariffCard.tsx b/demo/src/components/TariffCard.tsx
new file mode 100644
index 0000000..27c1619
--- /dev/null
+++ b/demo/src/components/TariffCard.tsx
@@ -0,0 +1,57 @@
+interface TariffCardProps {
+  gradient: string;
+  icon: React.ReactNode;
+  title: string;
+  subtitle?: string;
+  badge?: string;
+  price: string;
+  priceUnit: string;
+  priceLabel?: string;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+}
+
+export function TariffCard({
+  gradient,
+  icon,
+  title,
+  subtitle,
+  badge,
+  price,
+  priceUnit,
+  priceLabel,
+  children,
+  footer,
+}: TariffCardProps) {
+  return (
+    <div className="tariff-card">
+      <div className={`tariff-card-header ${gradient}`}>
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center text-xl">
+              {icon}
+            </div>
+            <div>
+              <h3 className="font-bold text-lg">{title}</h3>
+              {subtitle && <p className="text-sm opacity-80">{subtitle}</p>}
+            </div>
+          </div>
+          {badge && (
+            <span className="px-3 py-1 rounded-full bg-white/20 backdrop-blur-sm text-xs font-bold uppercase tracking-wider">
+              {badge}
+            </span>
+          )}
+        </div>
+        <div className="mt-4">
+          {priceLabel && <p className="tariff-card-label mb-1">{priceLabel}</p>}
+          <div className="flex items-baseline">
+            <span className="tariff-card-price">{price}</span>
+            <span className="tariff-card-price-unit">{priceUnit}</span>
+          </div>
+        </div>
+      </div>
+      {children && <div className="tariff-card-body">{children}</div>}
+      {footer && <div className="tariff-card-footer">{footer}</div>}
+    </div>
+  );
+}
diff --git a/demo/src/components/TierChart.tsx b/demo/src/components/TierChart.tsx
index f8aa109..25f52a0 100644
--- a/demo/src/components/TierChart.tsx
+++ b/demo/src/components/TierChart.tsx
@@ -25,16 +25,12 @@ export function TierChart({ bars, title, valueFormatter = (v) => v.toFixed(2) }:
               <span className="text-xs font-medium text-gray-600">{valueFormatter(bar.value)}</span>
               <div
                 className={`w-full rounded-t-md transition-all duration-300 ${
-                  bar.active
-                    ? 'bg-primary-500 shadow-md shadow-primary-200'
-                    : 'bg-gray-200'
+                  bar.active ? 'bg-primary-500 shadow-md shadow-primary-200' : 'bg-gray-200'
                 }`}
                 style={{ height: `${height}%` }}
               />
               <span className="text-xs text-gray-500 text-center leading-tight">{bar.label}</span>
-              {bar.sublabel && (
-                <span className="text-[10px] text-gray-400 text-center">{bar.sublabel}</span>
-              )}
+              {bar.sublabel && <span className="text-[10px] text-gray-400 text-center">{bar.sublabel}</span>}
             </div>
           );
         })}
diff --git a/demo/src/index.css b/demo/src/index.css
index 86b5ad9..20e379f 100644
--- a/demo/src/index.css
+++ b/demo/src/index.css
@@ -5,50 +5,162 @@
 @layer base {
   html {
     scroll-behavior: smooth;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  body {
+    @apply bg-gray-50 text-gray-900;
   }
 }
 
 @layer components {
+  /* ── Cards ── */
   .card {
-    @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6;
+    @apply bg-white rounded-2xl shadow-sm border border-gray-100 p-6;
+  }
+
+  /* ── Tariff Card (utility bill style) ── */
+  .tariff-card {
+    @apply bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100;
+  }
+  .tariff-card-header {
+    @apply px-6 py-5 text-white;
+  }
+  .tariff-card-body {
+    @apply px-6 py-5;
+  }
+  .tariff-card-footer {
+    @apply px-6 py-4 bg-gray-50 border-t border-gray-100;
+  }
+  .tariff-card-price {
+    @apply text-4xl font-extrabold tracking-tight;
+  }
+  .tariff-card-price-unit {
+    @apply text-lg font-normal opacity-80 ml-1;
+  }
+  .tariff-card-label {
+    @apply text-xs font-semibold uppercase tracking-widest opacity-70;
   }
+
+  /* ── Product Showcase Card ── */
+  .showcase-card {
+    @apply bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
+  }
+  .showcase-card-image {
+    @apply w-full h-48 object-cover flex items-center justify-center;
+  }
+  .showcase-card-body {
+    @apply p-5;
+  }
+  .showcase-card-price {
+    @apply text-2xl font-extrabold text-gray-900;
+  }
+
+  /* ── Forms ── */
   .input-field {
-    @apply w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors;
+    @apply w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-all;
   }
   .select-field {
-    @apply w-full px-3 py-2 border border-gray-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors;
+    @apply w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-all;
   }
+
+  /* ── Buttons ── */
   .btn-primary {
-    @apply px-4 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors;
+    @apply px-5 py-2.5 bg-primary-600 text-white rounded-xl text-sm font-semibold hover:bg-primary-700 active:bg-primary-800 transition-all shadow-sm hover:shadow-md;
   }
   .btn-secondary {
-    @apply px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors;
+    @apply px-5 py-2.5 bg-white text-gray-700 rounded-xl text-sm font-semibold hover:bg-gray-50 transition-all border border-gray-200 shadow-sm;
   }
+
+  /* ── Result Values ── */
   .result-value {
-    @apply text-2xl font-bold text-gray-900;
+    @apply text-2xl font-extrabold text-gray-900;
   }
   .result-label {
-    @apply text-xs font-medium text-gray-500 uppercase tracking-wider;
+    @apply text-[11px] font-bold text-gray-400 uppercase tracking-widest;
   }
+
+  /* ── Badges ── */
   .badge {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+    @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold;
   }
   .badge-blue {
-    @apply badge bg-blue-100 text-blue-800;
+    @apply badge bg-blue-50 text-blue-700;
   }
   .badge-green {
-    @apply badge bg-green-100 text-green-800;
+    @apply badge bg-emerald-50 text-emerald-700;
   }
   .badge-amber {
-    @apply badge bg-amber-100 text-amber-800;
+    @apply badge bg-amber-50 text-amber-700;
   }
   .badge-red {
-    @apply badge bg-red-100 text-red-800;
+    @apply badge bg-red-50 text-red-700;
   }
+
+  /* ── Section Typography ── */
   .section-title {
-    @apply text-2xl font-bold text-gray-900 mb-2;
+    @apply text-3xl font-extrabold text-gray-900 mb-2 tracking-tight;
   }
   .section-desc {
-    @apply text-gray-500 mb-6;
+    @apply text-gray-500 mb-8 text-base leading-relaxed max-w-2xl;
+  }
+
+  /* ── Cost Line Item ── */
+  .cost-line {
+    @apply flex items-center justify-between py-3 border-b border-gray-100 last:border-0;
+  }
+  .cost-line-label {
+    @apply text-sm text-gray-600;
+  }
+  .cost-line-value {
+    @apply text-sm font-bold text-gray-900 tabular-nums;
+  }
+
+  /* ── Gradient backgrounds for tariff headers ── */
+  .gradient-electricity {
+    background: linear-gradient(135deg, #f59e0b 0%, #eab308 50%, #d97706 100%);
+  }
+  .gradient-gas {
+    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #dc2626 100%);
+  }
+  .gradient-solar {
+    background: linear-gradient(135deg, #eab308 0%, #f59e0b 50%, #f97316 100%);
+  }
+  .gradient-emobility {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
+  }
+  .gradient-heating {
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
+  }
+  .gradient-smarthome {
+    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
+  }
+  .gradient-primary {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
+  }
+  .gradient-house {
+    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
+  }
+
+  /* ── Animated shimmer for loading states ── */
+  @keyframes shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+  }
+  .shimmer {
+    background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.15) 50%, transparent 75%);
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite;
+  }
+
+  /* ── Slider styling ── */
+  input[type="range"] {
+    @apply h-2 cursor-pointer;
+  }
+
+  /* ── Stat pill ── */
+  .stat-pill {
+    @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold;
   }
 }
diff --git a/demo/src/sections/CompositePriceDemo.tsx b/demo/src/sections/CompositePriceDemo.tsx
index d23b925..bad660d 100644
--- a/demo/src/sections/CompositePriceDemo.tsx
+++ b/demo/src/sections/CompositePriceDemo.tsx
@@ -1,7 +1,7 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
+import { ResultCard } from '../components/ResultCard';
 import { fmtCents, makeTax } from '../helpers';
 
 interface Component {
@@ -106,7 +106,8 @@ export function CompositePriceDemo() {
     if (components.length > 1) setComponents((prev) => prev.filter((_, i) => i !== idx));
   };
 
-  const oneTimeItems = result.items?.filter((item: any) => item._price?.type === 'one_time' || !item._price?.billing_period) ?? [];
+  const oneTimeItems =
+    result.items?.filter((item: any) => item._price?.type === 'one_time' || !item._price?.billing_period) ?? [];
   const recurringItems = result.items?.filter((item: any) => item._price?.type === 'recurring') ?? [];
 
   return (
@@ -122,7 +123,9 @@ export function CompositePriceDemo() {
           <div className="card">
             <div className="flex items-center justify-between mb-3">
               <h3 className="font-semibold text-gray-900">Price Components</h3>
-              <button onClick={addComponent} className="btn-primary text-xs">+ Add</button>
+              <button onClick={addComponent} className="btn-primary text-xs">
+                + Add
+              </button>
             </div>
             <div className="space-y-3">
               {components.map((comp, idx) => (
@@ -231,9 +234,7 @@ export function CompositePriceDemo() {
                 return (
                   <div key={idx} className="flex items-center gap-3 p-2 rounded bg-gray-50">
                     <div
-                      className={`w-2 h-8 rounded-full ${
-                        comp.type === 'one_time' ? 'bg-blue-400' : 'bg-green-400'
-                      }`}
+                      className={`w-2 h-8 rounded-full ${comp.type === 'one_time' ? 'bg-blue-400' : 'bg-green-400'}`}
                     />
                     <div className="flex-1">
                       <p className="text-sm font-medium text-gray-700">{comp.name}</p>
@@ -302,13 +303,17 @@ const compositeItem = {
     unit_amount_currency: 'EUR',
     tax: [{ rate: ${taxRate}, type: 'VAT' }],
     price_components: [
-${components.map((c) => `      {
+${components
+  .map(
+    (c) => `      {
         unit_amount_decimal: '${c.unitAmountDecimal}',
         pricing_model: 'per_unit',
         is_tax_inclusive: true,
         type: '${c.type}',${c.billingPeriod ? `\n        billing_period: '${c.billingPeriod}',` : ''}
         description: '${c.name}',
-      },`).join('\n')}
+      },`,
+  )
+  .join('\n')}
     ],
   },
   price_components: [
diff --git a/demo/src/sections/CurrencyDemo.tsx b/demo/src/sections/CurrencyDemo.tsx
index 25f664f..420a961 100644
--- a/demo/src/sections/CurrencyDemo.tsx
+++ b/demo/src/sections/CurrencyDemo.tsx
@@ -1,6 +1,5 @@
-import { useState, useMemo } from 'react';
 import { formatAmount, formatAmountFromString, getCurrencySymbol, toIntegerAmount } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
 
 const currencies = [
@@ -78,8 +77,8 @@ export function CurrencyDemo() {
     <div>
       <h1 className="section-title">Currency & Formatting</h1>
       <p className="section-desc">
-        Multi-currency support with locale-aware formatting. Uses Dinero.js for precise decimal arithmetic
-        and provides utilities for converting between string/integer representations.
+        Multi-currency support with locale-aware formatting. Uses Dinero.js for precise decimal arithmetic and provides
+        utilities for converting between string/integer representations.
       </p>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -109,7 +108,9 @@ export function CurrencyDemo() {
                   className="select-field mt-1"
                 >
                   {currencies.map((c) => (
-                    <option key={c.code} value={c.code}>{c.code} - {c.name}</option>
+                    <option key={c.code} value={c.code}>
+                      {c.code} - {c.name}
+                    </option>
                   ))}
                 </select>
               </div>
@@ -130,20 +131,29 @@ export function CurrencyDemo() {
             <h3 className="font-semibold text-gray-900 mb-3">Function Results</h3>
             <div className="space-y-3">
               <div className="p-3 bg-gray-50 rounded-lg">
-                <p className="text-xs text-gray-500 font-mono">formatAmount({'{'} amount: {intAmount}, currency: '{selectedCurrency}', locale: '{locale}' {'}'})</p>
+                <p className="text-xs text-gray-500 font-mono">
+                  formatAmount({'{'} amount: {intAmount}, currency: '{selectedCurrency}', locale: '{locale}' {'}'})
+                </p>
                 <p className="text-lg font-bold text-gray-900 mt-1">{formattedAmount}</p>
               </div>
               <div className="p-3 bg-gray-50 rounded-lg">
-                <p className="text-xs text-gray-500 font-mono">formatAmountFromString({'{'} decimalAmount: '{amount}', currency: '{selectedCurrency}', locale: '{locale}' {'}'})</p>
+                <p className="text-xs text-gray-500 font-mono">
+                  formatAmountFromString({'{'} decimalAmount: '{amount}', currency: '{selectedCurrency}', locale: '
+                  {locale}' {'}'})
+                </p>
                 <p className="text-lg font-bold text-gray-900 mt-1">{formattedFromString}</p>
               </div>
               <div className="p-3 bg-gray-50 rounded-lg">
-                <p className="text-xs text-gray-500 font-mono">getCurrencySymbol('{selectedCurrency}', '{locale}')</p>
+                <p className="text-xs text-gray-500 font-mono">
+                  getCurrencySymbol('{selectedCurrency}', '{locale}')
+                </p>
                 <p className="text-lg font-bold text-gray-900 mt-1">{symbol}</p>
               </div>
               <div className="p-3 bg-gray-50 rounded-lg">
                 <p className="text-xs text-gray-500 font-mono">toIntegerAmount('{amount}')</p>
-                <p className="text-lg font-bold text-gray-900 mt-1">{integerAmount} <span className="text-sm text-gray-400">(cents)</span></p>
+                <p className="text-lg font-bold text-gray-900 mt-1">
+                  {integerAmount} <span className="text-sm text-gray-400">(cents)</span>
+                </p>
               </div>
             </div>
           </div>
@@ -159,9 +169,7 @@ export function CurrencyDemo() {
                 <div
                   key={c.code}
                   className={`flex items-center justify-between p-3 rounded-lg transition-colors ${
-                    c.code === selectedCurrency
-                      ? 'bg-primary-50 border border-primary-200'
-                      : 'bg-gray-50'
+                    c.code === selectedCurrency ? 'bg-primary-50 border border-primary-200' : 'bg-gray-50'
                   }`}
                 >
                   <div className="flex items-center gap-3">
@@ -170,7 +178,9 @@ export function CurrencyDemo() {
                     </span>
                     <div>
                       <p className="text-sm font-medium text-gray-700">{c.name}</p>
-                      <p className="text-xs text-gray-400">{c.code} ({c.locale})</p>
+                      <p className="text-xs text-gray-400">
+                        {c.code} ({c.locale})
+                      </p>
                     </div>
                   </div>
                   <span className="text-lg font-bold text-gray-900">{c.formatted}</span>
diff --git a/demo/src/sections/DiscountDemo.tsx b/demo/src/sections/DiscountDemo.tsx
index 39711d7..e0ea6ce 100644
--- a/demo/src/sections/DiscountDemo.tsx
+++ b/demo/src/sections/DiscountDemo.tsx
@@ -1,7 +1,7 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
+import { ResultCard } from '../components/ResultCard';
 import { buildPriceItemDto, fmtCents, makeCoupon } from '../helpers';
 
 type CouponConfig = {
@@ -13,7 +13,7 @@ type CouponConfig = {
 export function DiscountDemo() {
   const [unitPrice, setUnitPrice] = useState('100.00');
   const [quantity, setQuantity] = useState(5);
-  const [taxRate, setTaxRate] = useState(19);
+  const [taxRate] = useState(19);
   const [isTaxInclusive, setIsTaxInclusive] = useState(true);
   const [couponConfig, setCouponConfig] = useState<CouponConfig>({
     type: 'percentage',
@@ -32,22 +32,23 @@ export function DiscountDemo() {
   }, [unitPrice, quantity, taxRate, isTaxInclusive]);
 
   const discountResult = useMemo(() => {
-    const coupon = couponConfig.type === 'percentage'
-      ? makeCoupon({
-          type: 'percentage',
-          category: couponConfig.category,
-          percentageValue: couponConfig.value,
-          name: `${couponConfig.value}% ${couponConfig.category}`,
-          ...(couponConfig.category === 'cashback' && { cashbackPeriod: 12 }),
-        })
-      : makeCoupon({
-          type: 'fixed',
-          category: couponConfig.category,
-          fixedValueDecimal: couponConfig.value,
-          fixedValue: Math.round(parseFloat(couponConfig.value) * 100),
-          name: `€${couponConfig.value} ${couponConfig.category}`,
-          ...(couponConfig.category === 'cashback' && { cashbackPeriod: 12 }),
-        });
+    const coupon =
+      couponConfig.type === 'percentage'
+        ? makeCoupon({
+            type: 'percentage',
+            category: couponConfig.category,
+            percentageValue: couponConfig.value,
+            name: `${couponConfig.value}% ${couponConfig.category}`,
+            ...(couponConfig.category === 'cashback' && { cashbackPeriod: 12 }),
+          })
+        : makeCoupon({
+            type: 'fixed',
+            category: couponConfig.category,
+            fixedValueDecimal: couponConfig.value,
+            fixedValue: Math.round(parseFloat(couponConfig.value) * 100),
+            name: `€${couponConfig.value} ${couponConfig.category}`,
+            ...(couponConfig.category === 'cashback' && { cashbackPeriod: 12 }),
+          });
 
     const item = buildPriceItemDto({
       unitAmountDecimal: unitPrice,
@@ -74,8 +75,8 @@ export function DiscountDemo() {
     <div>
       <h1 className="section-title">Discounts & Coupons</h1>
       <p className="section-desc">
-        Apply fixed-value, percentage discounts, and cashback coupons. Coupons are prioritized:
-        cashback &gt; discounts, percentage &gt; fixed, highest value first.
+        Apply fixed-value, percentage discounts, and cashback coupons. Coupons are prioritized: cashback &gt; discounts,
+        percentage &gt; fixed, highest value first.
       </p>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -142,9 +143,7 @@ export function DiscountDemo() {
                 <label className="text-sm font-medium text-gray-700">Type</label>
                 <select
                   value={couponConfig.type}
-                  onChange={(e) =>
-                    setCouponConfig((c) => ({ ...c, type: e.target.value as 'fixed' | 'percentage' }))
-                  }
+                  onChange={(e) => setCouponConfig((c) => ({ ...c, type: e.target.value as 'fixed' | 'percentage' }))}
                   className="select-field mt-1"
                 >
                   <option value="percentage">Percentage</option>
@@ -188,18 +187,19 @@ export function DiscountDemo() {
             <div className="flex items-center gap-4 mb-4">
               <div className="flex-1 text-center p-4 bg-gray-50 rounded-lg">
                 <p className="text-xs text-gray-500 uppercase font-medium">Before</p>
-                <p className="text-xl font-bold text-gray-400 line-through mt-1">
-                  {fmtCents(baseResult.amount_total)}
-                </p>
+                <p className="text-xl font-bold text-gray-400 line-through mt-1">{fmtCents(baseResult.amount_total)}</p>
               </div>
-              <svg className="w-6 h-6 text-gray-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg
+                className="w-6 h-6 text-gray-300 flex-shrink-0"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
               </svg>
               <div className="flex-1 text-center p-4 bg-green-50 rounded-lg border border-green-200">
                 <p className="text-xs text-green-600 uppercase font-medium">After</p>
-                <p className="text-xl font-bold text-green-600 mt-1">
-                  {fmtCents(discountResult.amount_total)}
-                </p>
+                <p className="text-xl font-bold text-green-600 mt-1">{fmtCents(discountResult.amount_total)}</p>
               </div>
             </div>
 
@@ -207,9 +207,7 @@ export function DiscountDemo() {
               <div className="text-center p-3 bg-red-50 rounded-lg">
                 <span className="text-sm font-semibold text-red-600">
                   You save {fmtCents(savings)}
-                  {discountItem?.discount_percentage
-                    ? ` (${discountItem.discount_percentage}%)`
-                    : ''}
+                  {discountItem?.discount_percentage ? ` (${discountItem.discount_percentage}%)` : ''}
                 </span>
               </div>
             )}
@@ -223,32 +221,12 @@ export function DiscountDemo() {
                 label="Before Discount (Total)"
                 value={fmtCents(discountItem?.before_discount_amount_total)}
               />
-              <ResultCard
-                label="Discount Amount"
-                value={fmtCents(discountItem?.discount_amount)}
-                color="red"
-              />
-              <ResultCard
-                label="Amount Subtotal"
-                value={fmtCents(discountResult.amount_subtotal)}
-              />
-              <ResultCard
-                label="Amount Tax"
-                value={fmtCents(discountResult.amount_tax)}
-                color="amber"
-              />
-              <ResultCard
-                label="Final Total"
-                value={fmtCents(discountResult.amount_total)}
-                highlight
-                color="green"
-              />
+              <ResultCard label="Discount Amount" value={fmtCents(discountItem?.discount_amount)} color="red" />
+              <ResultCard label="Amount Subtotal" value={fmtCents(discountResult.amount_subtotal)} />
+              <ResultCard label="Amount Tax" value={fmtCents(discountResult.amount_tax)} color="amber" />
+              <ResultCard label="Final Total" value={fmtCents(discountResult.amount_total)} highlight color="green" />
               {couponConfig.category === 'cashback' && (
-                <ResultCard
-                  label="Cashback Amount"
-                  value={fmtCents(discountItem?.cashback_amount)}
-                  color="blue"
-                />
+                <ResultCard label="Cashback Amount" value={fmtCents(discountItem?.cashback_amount)} color="blue" />
               )}
             </div>
           </div>
@@ -277,11 +255,15 @@ const priceItem = {
   _coupons: [
     {
       type: '${couponConfig.type}',
-      category: '${couponConfig.category}',${couponConfig.type === 'percentage' ? `
-      percentage_value: '${couponConfig.value}',` : `
+      category: '${couponConfig.category}',${
+        couponConfig.type === 'percentage'
+          ? `
+      percentage_value: '${couponConfig.value}',`
+          : `
       fixed_value: ${Math.round(parseFloat(couponConfig.value) * 100)},
       fixed_value_decimal: '${couponConfig.value}',
-      fixed_value_currency: 'EUR',`}
+      fixed_value_currency: 'EUR',`
+      }
     },
   ],
 };
diff --git a/demo/src/sections/DynamicTariffDemo.tsx b/demo/src/sections/DynamicTariffDemo.tsx
index 94d3715..902d4bc 100644
--- a/demo/src/sections/DynamicTariffDemo.tsx
+++ b/demo/src/sections/DynamicTariffDemo.tsx
@@ -1,14 +1,14 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
+import { ResultCard } from '../components/ResultCard';
 import { buildPriceItemDto, fmtCents } from '../helpers';
 
 export function DynamicTariffDemo() {
   const [marketPrice, setMarketPrice] = useState('8.50');
   const [markup, setMarkup] = useState('2.00');
   const [quantity, setQuantity] = useState(1000); // kWh
-  const [taxRate, setTaxRate] = useState(19);
+  const [taxRate] = useState(19);
   const [isTaxInclusive, setIsTaxInclusive] = useState(false);
 
   const result = useMemo(() => {
@@ -40,7 +40,7 @@ export function DynamicTariffDemo() {
     const base = parseFloat(marketPrice);
     return Array.from({ length: 24 }, (_, i) => ({
       hour: `${String(i).padStart(2, '0')}:00`,
-      price: Math.max(0, base + (Math.sin(i / 4) * 3) + (Math.random() - 0.5) * 2),
+      price: Math.max(0, base + Math.sin(i / 4) * 3 + (Math.random() - 0.5) * 2),
     }));
   }, [marketPrice]);
 
@@ -51,8 +51,8 @@ export function DynamicTariffDemo() {
     <div>
       <h1 className="section-title">Dynamic Tariff</h1>
       <p className="section-desc">
-        Market-based pricing for energy products. Combines a day-ahead market price with a configurable markup.
-        Supports both automatic (day_ahead_market) and manual modes.
+        Market-based pricing for energy products. Combines a day-ahead market price with a configurable markup. Supports
+        both automatic (day_ahead_market) and manual modes.
       </p>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -162,24 +162,12 @@ export function DynamicTariffDemo() {
           <div className="card">
             <h3 className="font-semibold text-gray-900 mb-3">Computed Result</h3>
             <div className="grid grid-cols-2 gap-3">
-              <ResultCard
-                label="Unit Price"
-                value={`${totalPerUnit.toFixed(2)} ct/kWh`}
-              />
+              <ResultCard label="Unit Price" value={`${totalPerUnit.toFixed(2)} ct/kWh`} />
               <ResultCard label="Consumption" value={`${quantity} kWh`} />
               <ResultCard label="Subtotal (Net)" value={fmtCents(result.amount_subtotal)} />
               <ResultCard label="Tax" value={fmtCents(result.amount_tax)} color="amber" />
-              <ResultCard
-                label="Monthly Total"
-                value={fmtCents(result.amount_total)}
-                highlight
-                color="green"
-              />
-              <ResultCard
-                label="Annual Estimate"
-                value={fmtCents((result.amount_total ?? 0) * 12)}
-                color="blue"
-              />
+              <ResultCard label="Monthly Total" value={fmtCents(result.amount_total)} highlight color="green" />
+              <ResultCard label="Annual Estimate" value={fmtCents((result.amount_total ?? 0) * 12)} color="blue" />
             </div>
           </div>
         </div>
diff --git a/demo/src/sections/ElectricityDemo.tsx b/demo/src/sections/ElectricityDemo.tsx
index ddc0fe1..d613973 100644
--- a/demo/src/sections/ElectricityDemo.tsx
+++ b/demo/src/sections/ElectricityDemo.tsx
@@ -1,7 +1,8 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
+import { ResultCard } from '../components/ResultCard';
+import { TariffCard } from '../components/TariffCard';
 import { buildPriceItemDto, fmtCents } from '../helpers';
 
 export function ElectricityDemo() {
@@ -13,12 +14,11 @@ export function ElectricityDemo() {
   const [markupNT, setMarkupNT] = useState('2.10');
   const [consumptionHT, setConsumptionHT] = useState(2800);
   const [consumptionNT, setConsumptionNT] = useState(1200);
-  const [taxRate, setTaxRate] = useState(19);
+  const [taxRate] = useState(19);
 
   const result = useMemo(() => {
     const items: any[] = [];
 
-    // Base price (Grundpreis)
     items.push(
       buildPriceItemDto({
         unitAmountDecimal: basePrice,
@@ -31,7 +31,6 @@ export function ElectricityDemo() {
       }),
     );
 
-    // HT work price
     const totalHT = (parseFloat(workPriceHT) + parseFloat(markupHT)).toFixed(4);
     items.push(
       buildPriceItemDto({
@@ -45,7 +44,6 @@ export function ElectricityDemo() {
       }),
     );
 
-    // NT work price (dual tariff only)
     if (tariffType === 'dual') {
       const totalNT = (parseFloat(workPriceNT) + parseFloat(markupNT)).toFixed(4);
       items.push(
@@ -64,39 +62,42 @@ export function ElectricityDemo() {
     return computeAggregatedAndPriceTotals(items);
   }, [tariffType, basePrice, workPriceHT, workPriceNT, markupHT, markupNT, consumptionHT, consumptionNT, taxRate]);
 
-  const totalConsumption = tariffType === 'dual' ? consumptionHT + consumptionNT : consumptionHT + consumptionNT;
+  const totalConsumption = consumptionHT + consumptionNT;
   const baseCost = parseFloat(basePrice);
   const htRate = parseFloat(workPriceHT) + parseFloat(markupHT);
   const ntRate = parseFloat(workPriceNT) + parseFloat(markupNT);
   const htCost = htRate * (tariffType === 'dual' ? consumptionHT : totalConsumption);
   const ntCost = tariffType === 'dual' ? ntRate * consumptionNT : 0;
   const totalNet = baseCost + htCost + ntCost;
+  const totalGross = totalNet * (1 + taxRate / 100);
+  const monthlyGross = totalGross / 12;
 
   return (
     <div>
       <h1 className="section-title">Electricity Tariff</h1>
       <p className="section-desc">
-        Standard German electricity pricing with Grundpreis (base fee) and Arbeitspreis (work price per kWh).
-        Supports single-tariff and dual-tariff (HT/NT) meters for peak and off-peak consumption.
+        Configure a German electricity tariff with Grundpreis and Arbeitspreis. Toggle between single and dual-tariff
+        meters to see real-time pricing.
       </p>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="space-y-4">
-          {/* Tariff type toggle */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left column — Controls */}
+        <div className="lg:col-span-1 space-y-4">
+          {/* Meter type */}
           <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Meter Type</h3>
+            <p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3">Meter Type</p>
             <div className="flex gap-2">
               {(['single', 'dual'] as const).map((t) => (
                 <button
                   key={t}
                   onClick={() => setTariffType(t)}
-                  className={`flex-1 py-2 px-3 rounded-lg text-sm font-medium transition-colors ${
+                  className={`flex-1 py-2.5 px-3 rounded-xl text-sm font-semibold transition-all ${
                     tariffType === t
-                      ? 'bg-primary-600 text-white'
-                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                      ? 'gradient-electricity text-white shadow-md'
+                      : 'bg-gray-50 text-gray-500 hover:bg-gray-100'
                   }`}
                 >
-                  {t === 'single' ? 'Single Tariff (ET)' : 'Dual Tariff (HT/NT)'}
+                  {t === 'single' ? 'Single (ET)' : 'Dual (HT/NT)'}
                 </button>
               ))}
             </div>
@@ -104,10 +105,10 @@ export function ElectricityDemo() {
 
           {/* Base price */}
           <div className="card">
-            <div className="p-3 bg-blue-50 rounded-lg">
-              <h4 className="text-sm font-medium text-blue-800 mb-2">Grundpreis (Base Price)</h4>
+            <div className="p-4 bg-blue-50 rounded-xl">
+              <p className="text-xs font-bold text-blue-400 uppercase tracking-widest mb-2">Grundpreis</p>
               <div>
-                <label className="text-xs text-blue-600">Annual base fee (EUR/year)</label>
+                <label className="text-xs text-blue-600 font-medium">Annual base fee (EUR/year)</label>
                 <input
                   type="number"
                   step="0.01"
@@ -120,14 +121,14 @@ export function ElectricityDemo() {
           </div>
 
           {/* Work prices */}
-          <div className="card">
-            <div className="p-3 bg-yellow-50 rounded-lg mb-3">
-              <h4 className="text-sm font-medium text-yellow-800 mb-2">
-                {tariffType === 'dual' ? 'Arbeitspreis HT (Peak)' : 'Arbeitspreis (Work Price)'}
-              </h4>
+          <div className="card space-y-3">
+            <div className="p-4 bg-amber-50 rounded-xl">
+              <p className="text-xs font-bold text-amber-500 uppercase tracking-widest mb-2">
+                {tariffType === 'dual' ? 'Arbeitspreis HT' : 'Arbeitspreis'}
+              </p>
               <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <label className="text-xs text-yellow-600">Base price (ct/kWh)</label>
+                  <label className="text-xs text-amber-600 font-medium">Base (ct/kWh)</label>
                   <input
                     type="number"
                     step="0.01"
@@ -137,7 +138,7 @@ export function ElectricityDemo() {
                   />
                 </div>
                 <div>
-                  <label className="text-xs text-yellow-600">Markup (ct/kWh)</label>
+                  <label className="text-xs text-amber-600 font-medium">Markup (ct/kWh)</label>
                   <input
                     type="number"
                     step="0.01"
@@ -150,11 +151,11 @@ export function ElectricityDemo() {
             </div>
 
             {tariffType === 'dual' && (
-              <div className="p-3 bg-indigo-50 rounded-lg">
-                <h4 className="text-sm font-medium text-indigo-800 mb-2">Arbeitspreis NT (Off-Peak)</h4>
+              <div className="p-4 bg-indigo-50 rounded-xl">
+                <p className="text-xs font-bold text-indigo-400 uppercase tracking-widest mb-2">Arbeitspreis NT</p>
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <label className="text-xs text-indigo-600">Base price (ct/kWh)</label>
+                    <label className="text-xs text-indigo-600 font-medium">Base (ct/kWh)</label>
                     <input
                       type="number"
                       step="0.01"
@@ -164,7 +165,7 @@ export function ElectricityDemo() {
                     />
                   </div>
                   <div>
-                    <label className="text-xs text-indigo-600">Markup (ct/kWh)</label>
+                    <label className="text-xs text-indigo-600 font-medium">Markup (ct/kWh)</label>
                     <input
                       type="number"
                       step="0.01"
@@ -181,11 +182,12 @@ export function ElectricityDemo() {
           {/* Consumption */}
           <div className="card">
             {tariffType === 'dual' ? (
-              <div className="space-y-3">
+              <div className="space-y-4">
                 <div>
-                  <label className="text-sm font-medium text-gray-700">
-                    HT Consumption: <span className="text-yellow-600 font-bold">{consumptionHT.toLocaleString()} kWh</span>
-                  </label>
+                  <div className="flex items-center justify-between mb-1">
+                    <label className="text-xs font-bold text-gray-400 uppercase tracking-widest">HT Consumption</label>
+                    <span className="text-sm font-extrabold text-amber-600">{consumptionHT.toLocaleString()} kWh</span>
+                  </div>
                   <input
                     type="range"
                     min="500"
@@ -193,13 +195,14 @@ export function ElectricityDemo() {
                     step="100"
                     value={consumptionHT}
                     onChange={(e) => setConsumptionHT(Number(e.target.value))}
-                    className="w-full mt-1 accent-yellow-500"
+                    className="w-full accent-amber-500"
                   />
                 </div>
                 <div>
-                  <label className="text-sm font-medium text-gray-700">
-                    NT Consumption: <span className="text-indigo-600 font-bold">{consumptionNT.toLocaleString()} kWh</span>
-                  </label>
+                  <div className="flex items-center justify-between mb-1">
+                    <label className="text-xs font-bold text-gray-400 uppercase tracking-widest">NT Consumption</label>
+                    <span className="text-sm font-extrabold text-indigo-600">{consumptionNT.toLocaleString()} kWh</span>
+                  </div>
                   <input
                     type="range"
                     min="200"
@@ -207,18 +210,28 @@ export function ElectricityDemo() {
                     step="100"
                     value={consumptionNT}
                     onChange={(e) => setConsumptionNT(Number(e.target.value))}
-                    className="w-full mt-1 accent-indigo-500"
+                    className="w-full accent-indigo-500"
                   />
                 </div>
-                <p className="text-xs text-gray-400">
-                  Total: {totalConsumption.toLocaleString()} kWh/year
-                </p>
+                <div className="pt-2 border-t border-gray-100">
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs text-gray-400">Total consumption</span>
+                    <span className="text-sm font-bold text-gray-700">
+                      {totalConsumption.toLocaleString()} kWh/year
+                    </span>
+                  </div>
+                </div>
               </div>
             ) : (
               <div>
-                <label className="text-sm font-medium text-gray-700">
-                  Annual Consumption: <span className="text-primary-600 font-bold">{totalConsumption.toLocaleString()} kWh</span>
-                </label>
+                <div className="flex items-center justify-between mb-2">
+                  <label className="text-xs font-bold text-gray-400 uppercase tracking-widest">
+                    Annual Consumption
+                  </label>
+                  <span className="text-sm font-extrabold text-primary-600">
+                    {totalConsumption.toLocaleString()} kWh
+                  </span>
+                </div>
                 <input
                   type="range"
                   min="1000"
@@ -230,9 +243,9 @@ export function ElectricityDemo() {
                     setConsumptionHT(Math.round(val * 0.7));
                     setConsumptionNT(Math.round(val * 0.3));
                   }}
-                  className="w-full mt-1 accent-primary-600"
+                  className="w-full accent-primary-600"
                 />
-                <div className="flex justify-between text-xs text-gray-400">
+                <div className="flex justify-between text-[10px] text-gray-300 mt-1">
                   <span>1,000 kWh</span>
                   <span>10,000 kWh</span>
                 </div>
@@ -241,110 +254,137 @@ export function ElectricityDemo() {
           </div>
         </div>
 
-        <div className="space-y-4">
-          {/* Cost breakdown */}
-          <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Annual Cost Breakdown</h3>
-            <div className="h-10 flex rounded-lg overflow-hidden mb-4">
-              {[
-                { value: baseCost, color: 'bg-blue-400', label: 'Base' },
-                { value: htCost, color: 'bg-yellow-400', label: tariffType === 'dual' ? 'HT' : 'Work' },
-                ...(tariffType === 'dual' ? [{ value: ntCost, color: 'bg-indigo-400', label: 'NT' }] : []),
-              ].map((seg) => (
+        {/* Right column — Tariff card + results */}
+        <div className="lg:col-span-2 space-y-5">
+          {/* Main tariff card */}
+          <TariffCard
+            gradient="gradient-electricity"
+            icon={<span>⚡</span>}
+            title={tariffType === 'dual' ? 'Doppeltarif (HT/NT)' : 'Einfachtarif (ET)'}
+            subtitle={`${totalConsumption.toLocaleString()} kWh/year`}
+            badge={tariffType === 'dual' ? 'HT/NT' : 'SINGLE'}
+            price={`EUR ${monthlyGross.toFixed(2)}`}
+            priceUnit="/month"
+            priceLabel="Estimated monthly cost (gross)"
+            footer={
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-gray-500">Annual total (gross)</span>
+                <span className="font-extrabold text-gray-900 text-lg">EUR {totalGross.toFixed(2)}</span>
+              </div>
+            }
+          >
+            {/* Cost breakdown inside card */}
+            <div className="space-y-0">
+              {/* Stacked bar */}
+              <div className="h-3 flex rounded-full overflow-hidden mb-4">
                 <div
-                  key={seg.label}
-                  className={`${seg.color} flex items-center justify-center text-white text-xs font-medium transition-all duration-300`}
-                  style={{ width: `${(seg.value / totalNet) * 100}%` }}
-                  title={`${seg.label}: EUR ${seg.value.toFixed(2)}`}
-                >
-                  {(seg.value / totalNet) * 100 > 10 ? seg.label : ''}
-                </div>
-              ))}
-            </div>
+                  className="bg-blue-400 transition-all duration-300"
+                  style={{ width: `${(baseCost / totalNet) * 100}%` }}
+                  title="Grundpreis"
+                />
+                <div
+                  className="bg-amber-400 transition-all duration-300"
+                  style={{ width: `${(htCost / totalNet) * 100}%` }}
+                  title="HT"
+                />
+                {tariffType === 'dual' && (
+                  <div
+                    className="bg-indigo-400 transition-all duration-300"
+                    style={{ width: `${(ntCost / totalNet) * 100}%` }}
+                    title="NT"
+                  />
+                )}
+              </div>
 
-            <div className="space-y-2">
-              <div className="flex items-center gap-3 p-2 bg-gray-50 rounded">
-                <div className="w-3 h-3 rounded-sm bg-blue-400" />
-                <div className="flex-1">
-                  <p className="text-sm font-medium text-gray-700">Grundpreis</p>
-                  <p className="text-xs text-gray-400">EUR {parseFloat(basePrice).toFixed(2)}/year</p>
+              <div className="cost-line">
+                <div className="flex items-center gap-2">
+                  <div className="w-2.5 h-2.5 rounded-full bg-blue-400" />
+                  <div>
+                    <span className="cost-line-label">Grundpreis</span>
+                    <p className="text-[10px] text-gray-400">EUR {parseFloat(basePrice).toFixed(2)}/year</p>
+                  </div>
                 </div>
-                <span className="font-bold text-sm">EUR {baseCost.toFixed(2)}</span>
+                <span className="cost-line-value">EUR {baseCost.toFixed(2)}</span>
               </div>
-              <div className="flex items-center gap-3 p-2 bg-gray-50 rounded">
-                <div className="w-3 h-3 rounded-sm bg-yellow-400" />
-                <div className="flex-1">
-                  <p className="text-sm font-medium text-gray-700">
-                    {tariffType === 'dual' ? 'Arbeitspreis HT' : 'Arbeitspreis'}
-                  </p>
-                  <p className="text-xs text-gray-400">
-                    {htRate.toFixed(2)} ct/kWh x {(tariffType === 'dual' ? consumptionHT : totalConsumption).toLocaleString()} kWh
-                  </p>
+
+              <div className="cost-line">
+                <div className="flex items-center gap-2">
+                  <div className="w-2.5 h-2.5 rounded-full bg-amber-400" />
+                  <div>
+                    <span className="cost-line-label">
+                      {tariffType === 'dual' ? 'Arbeitspreis HT' : 'Arbeitspreis'}
+                    </span>
+                    <p className="text-[10px] text-gray-400">
+                      {htRate.toFixed(2)} ct/kWh x{' '}
+                      {(tariffType === 'dual' ? consumptionHT : totalConsumption).toLocaleString()} kWh
+                    </p>
+                  </div>
                 </div>
-                <span className="font-bold text-sm">EUR {htCost.toFixed(2)}</span>
+                <span className="cost-line-value">EUR {htCost.toFixed(2)}</span>
               </div>
+
               {tariffType === 'dual' && (
-                <div className="flex items-center gap-3 p-2 bg-gray-50 rounded">
-                  <div className="w-3 h-3 rounded-sm bg-indigo-400" />
-                  <div className="flex-1">
-                    <p className="text-sm font-medium text-gray-700">Arbeitspreis NT</p>
-                    <p className="text-xs text-gray-400">
-                      {ntRate.toFixed(2)} ct/kWh x {consumptionNT.toLocaleString()} kWh
-                    </p>
+                <div className="cost-line">
+                  <div className="flex items-center gap-2">
+                    <div className="w-2.5 h-2.5 rounded-full bg-indigo-400" />
+                    <div>
+                      <span className="cost-line-label">Arbeitspreis NT</span>
+                      <p className="text-[10px] text-gray-400">
+                        {ntRate.toFixed(2)} ct/kWh x {consumptionNT.toLocaleString()} kWh
+                      </p>
+                    </div>
                   </div>
-                  <span className="font-bold text-sm">EUR {ntCost.toFixed(2)}</span>
+                  <span className="cost-line-value">EUR {ntCost.toFixed(2)}</span>
                 </div>
               )}
-              <div className="border-t border-gray-200 pt-2 mt-2">
-                <div className="flex items-center justify-between">
-                  <span className="text-sm font-semibold text-gray-700">Net Total (annual)</span>
-                  <span className="text-lg font-bold text-gray-900">EUR {totalNet.toFixed(2)}</span>
-                </div>
+
+              <div className="flex items-center justify-between pt-3 mt-1 border-t border-gray-200">
+                <span className="text-sm font-bold text-gray-600">Net Total (annual)</span>
+                <span className="text-lg font-extrabold text-gray-900">EUR {totalNet.toFixed(2)}</span>
               </div>
             </div>
-          </div>
+          </TariffCard>
+
+          {/* Rate comparison for dual tariff */}
+          {tariffType === 'dual' && (
+            <div className="grid grid-cols-2 gap-4">
+              <div className="card text-center p-5">
+                <p className="text-[10px] font-bold text-amber-500 uppercase tracking-widest">HT (Peak)</p>
+                <p className="text-3xl font-extrabold text-amber-600 mt-1">{htRate.toFixed(2)}</p>
+                <p className="text-xs text-gray-400">ct/kWh</p>
+                <p className="text-xs text-amber-500 font-medium mt-1">{consumptionHT.toLocaleString()} kWh</p>
+              </div>
+              <div className="card text-center p-5">
+                <p className="text-[10px] font-bold text-indigo-400 uppercase tracking-widest">NT (Off-Peak)</p>
+                <p className="text-3xl font-extrabold text-indigo-600 mt-1">{ntRate.toFixed(2)}</p>
+                <p className="text-xs text-gray-400">ct/kWh</p>
+                <p className="text-xs text-indigo-500 font-medium mt-1">{consumptionNT.toLocaleString()} kWh</p>
+              </div>
+            </div>
+          )}
 
           {/* Computed results */}
           <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Computed via Library</h3>
-            <div className="grid grid-cols-2 gap-3">
+            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest mb-4">
+              Computed via @epilot/pricing
+            </p>
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
               <ResultCard label="Annual Net" value={fmtCents(result.amount_subtotal)} />
-              <ResultCard label={`Tax (${taxRate}%)`} value={fmtCents(result.amount_tax)} color="amber" />
+              <ResultCard label={`Tax (${taxRate}%)`} value={fmtCents(result.amount_tax)} color="amber" highlight />
               <ResultCard label="Annual Gross" value={fmtCents(result.amount_total)} highlight color="green" />
               <ResultCard
                 label="Monthly Gross"
                 value={fmtCents(Math.round((result.amount_total ?? 0) / 12))}
                 color="blue"
+                highlight
               />
             </div>
           </div>
-
-          {/* Rate comparison for dual tariff */}
-          {tariffType === 'dual' && (
-            <div className="card">
-              <h3 className="font-semibold text-gray-900 mb-3">HT vs NT Rate Comparison</h3>
-              <div className="flex gap-3">
-                <div className="flex-1 text-center p-3 bg-yellow-50 rounded-lg">
-                  <p className="text-xs text-yellow-600">HT (Peak)</p>
-                  <p className="text-lg font-bold text-yellow-700">{htRate.toFixed(2)} ct</p>
-                  <p className="text-xs text-yellow-500">{consumptionHT.toLocaleString()} kWh</p>
-                </div>
-                <div className="flex-1 text-center p-3 bg-indigo-50 rounded-lg">
-                  <p className="text-xs text-indigo-600">NT (Off-Peak)</p>
-                  <p className="text-lg font-bold text-indigo-700">{ntRate.toFixed(2)} ct</p>
-                  <p className="text-xs text-indigo-500">{consumptionNT.toLocaleString()} kWh</p>
-                </div>
-              </div>
-              <p className="text-xs text-gray-400 mt-2 text-center">
-                Savings vs. all-HT: EUR {((htRate - ntRate) * consumptionNT).toFixed(2)}/year
-              </p>
-            </div>
-          )}
         </div>
       </div>
 
-      {/* Usage */}
-      <div className="mt-6">
+      {/* Code block */}
+      <div className="mt-8">
         <CodeBlock
           title="Usage"
           code={`import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
@@ -375,10 +415,11 @@ const items = [
       type: 'recurring',
       billing_period: 'yearly',
       tax: [{ rate: ${taxRate}, type: 'VAT' }],
-      description: '${tariffType === 'dual' ? 'Arbeitspreis HT (Peak)' : 'Arbeitspreis (Work Price)'}',
     },
     taxes: [{ tax: { rate: ${taxRate} } }],
-  },${tariffType === 'dual' ? `
+  },${
+    tariffType === 'dual'
+      ? `
   {
     quantity: ${consumptionNT},  // NT kWh
     _price: {
@@ -389,10 +430,11 @@ const items = [
       type: 'recurring',
       billing_period: 'yearly',
       tax: [{ rate: ${taxRate}, type: 'VAT' }],
-      description: 'Arbeitspreis NT (Off-Peak)',
     },
     taxes: [{ tax: { rate: ${taxRate} } }],
-  },` : ''}
+  },`
+      : ''
+  }
 ];
 
 const result = computeAggregatedAndPriceTotals(items);
diff --git a/demo/src/sections/GasDemo.tsx b/demo/src/sections/GasDemo.tsx
index 0af9ce0..e610d48 100644
--- a/demo/src/sections/GasDemo.tsx
+++ b/demo/src/sections/GasDemo.tsx
@@ -1,7 +1,8 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
+import { ResultCard } from '../components/ResultCard';
+import { TariffCard } from '../components/TariffCard';
 import { buildPriceItemDto, fmtCents } from '../helpers';
 
 export function GasDemo() {
@@ -11,12 +12,11 @@ export function GasDemo() {
   const [consumption, setConsumption] = useState(15000);
   const [co2Levy, setCo2Levy] = useState('0.546');
   const [gasStorageLevy, setGasStorageLevy] = useState('0.059');
-  const [taxRate, setTaxRate] = useState(19);
+  const [taxRate] = useState(19);
 
   const result = useMemo(() => {
     const items: any[] = [];
 
-    // Base price
     items.push(
       buildPriceItemDto({
         unitAmountDecimal: basePrice,
@@ -29,9 +29,7 @@ export function GasDemo() {
       }),
     );
 
-    // Work price + markup + levies per kWh
-    const totalPerKwh =
-      parseFloat(workPrice) + parseFloat(markup) + parseFloat(co2Levy) + parseFloat(gasStorageLevy);
+    const totalPerKwh = parseFloat(workPrice) + parseFloat(markup) + parseFloat(co2Levy) + parseFloat(gasStorageLevy);
     items.push(
       buildPriceItemDto({
         unitAmountDecimal: totalPerKwh.toFixed(4),
@@ -53,41 +51,43 @@ export function GasDemo() {
   const workCost = workRate * consumption;
   const levyCost = levyRate * consumption;
   const totalNet = baseCost + workCost + levyCost;
+  const totalGross = totalNet * (1 + taxRate / 100);
+  const monthlyGross = totalGross / 12;
+  const totalKwhRate = workRate + levyRate;
 
   return (
     <div>
       <h1 className="section-title">Gas Tariff</h1>
       <p className="section-desc">
-        German gas supply pricing with Grundpreis, Arbeitspreis, and gas-specific levies
-        including CO2 tax and gas storage levy. Typical household consumption: 10,000 - 25,000 kWh/year.
+        Configure a German gas supply tariff with Grundpreis, Arbeitspreis, and gas-specific levies including CO2 tax
+        and gas storage levy.
       </p>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="space-y-4">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left column — Controls */}
+        <div className="lg:col-span-1 space-y-4">
           {/* Base price */}
           <div className="card">
-            <div className="p-3 bg-blue-50 rounded-lg">
-              <h4 className="text-sm font-medium text-blue-800 mb-2">Grundpreis (Base Price)</h4>
-              <div>
-                <label className="text-xs text-blue-600">Annual base fee (EUR/year)</label>
-                <input
-                  type="number"
-                  step="0.01"
-                  value={basePrice}
-                  onChange={(e) => setBasePrice(e.target.value)}
-                  className="input-field mt-1"
-                />
-              </div>
+            <div className="p-4 bg-blue-50 rounded-xl">
+              <p className="text-xs font-bold text-blue-400 uppercase tracking-widest mb-2">Grundpreis</p>
+              <label className="text-xs text-blue-600 font-medium">Annual base fee (EUR/year)</label>
+              <input
+                type="number"
+                step="0.01"
+                value={basePrice}
+                onChange={(e) => setBasePrice(e.target.value)}
+                className="input-field mt-1"
+              />
             </div>
           </div>
 
           {/* Work price */}
-          <div className="card">
-            <div className="p-3 bg-orange-50 rounded-lg mb-3">
-              <h4 className="text-sm font-medium text-orange-800 mb-2">Arbeitspreis (Work Price)</h4>
+          <div className="card space-y-3">
+            <div className="p-4 bg-orange-50 rounded-xl">
+              <p className="text-xs font-bold text-orange-400 uppercase tracking-widest mb-2">Arbeitspreis</p>
               <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <label className="text-xs text-orange-600">Base price (ct/kWh)</label>
+                  <label className="text-xs text-orange-600 font-medium">Base (ct/kWh)</label>
                   <input
                     type="number"
                     step="0.01"
@@ -97,7 +97,7 @@ export function GasDemo() {
                   />
                 </div>
                 <div>
-                  <label className="text-xs text-orange-600">Markup (ct/kWh)</label>
+                  <label className="text-xs text-orange-600 font-medium">Markup (ct/kWh)</label>
                   <input
                     type="number"
                     step="0.01"
@@ -109,12 +109,11 @@ export function GasDemo() {
               </div>
             </div>
 
-            {/* Gas-specific levies */}
-            <div className="p-3 bg-red-50 rounded-lg">
-              <h4 className="text-sm font-medium text-red-800 mb-2">Gas Levies</h4>
+            <div className="p-4 bg-red-50 rounded-xl">
+              <p className="text-xs font-bold text-red-400 uppercase tracking-widest mb-2">Gas Levies</p>
               <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <label className="text-xs text-red-600">CO2 levy (ct/kWh)</label>
+                  <label className="text-xs text-red-600 font-medium">CO2 (ct/kWh)</label>
                   <input
                     type="number"
                     step="0.001"
@@ -124,7 +123,7 @@ export function GasDemo() {
                   />
                 </div>
                 <div>
-                  <label className="text-xs text-red-600">Gas storage levy (ct/kWh)</label>
+                  <label className="text-xs text-red-600 font-medium">Storage (ct/kWh)</label>
                   <input
                     type="number"
                     step="0.001"
@@ -139,9 +138,10 @@ export function GasDemo() {
 
           {/* Consumption */}
           <div className="card">
-            <label className="text-sm font-medium text-gray-700">
-              Annual Consumption: <span className="text-primary-600 font-bold">{consumption.toLocaleString()} kWh</span>
-            </label>
+            <div className="flex items-center justify-between mb-2">
+              <label className="text-xs font-bold text-gray-400 uppercase tracking-widest">Annual Consumption</label>
+              <span className="text-sm font-extrabold text-primary-600">{consumption.toLocaleString()} kWh</span>
+            </div>
             <input
               type="range"
               min="5000"
@@ -149,125 +149,140 @@ export function GasDemo() {
               step="500"
               value={consumption}
               onChange={(e) => setConsumption(Number(e.target.value))}
-              className="w-full mt-2 accent-primary-600"
+              className="w-full accent-primary-600"
             />
-            <div className="flex justify-between text-xs text-gray-400">
+            <div className="flex justify-between text-[10px] text-gray-300 mt-1">
               <span>5,000 kWh</span>
               <span>50,000 kWh</span>
             </div>
           </div>
         </div>
 
-        <div className="space-y-4">
-          {/* Cost breakdown */}
-          <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Annual Cost Breakdown</h3>
-            <div className="h-10 flex rounded-lg overflow-hidden mb-4">
-              {[
-                { value: baseCost, color: 'bg-blue-400', label: 'Base' },
-                { value: workCost, color: 'bg-orange-400', label: 'Work' },
-                { value: levyCost, color: 'bg-red-400', label: 'Levies' },
-              ].map((seg) => (
-                <div
-                  key={seg.label}
-                  className={`${seg.color} flex items-center justify-center text-white text-xs font-medium transition-all duration-300`}
-                  style={{ width: `${Math.max((seg.value / totalNet) * 100, 1)}%` }}
-                  title={`${seg.label}: EUR ${seg.value.toFixed(2)}`}
-                >
-                  {(seg.value / totalNet) * 100 > 10 ? seg.label : ''}
-                </div>
-              ))}
+        {/* Right column — Tariff card + results */}
+        <div className="lg:col-span-2 space-y-5">
+          {/* Main tariff card */}
+          <TariffCard
+            gradient="gradient-gas"
+            icon={<span>🔥</span>}
+            title="Erdgas Tarif"
+            subtitle={`${consumption.toLocaleString()} kWh/year`}
+            badge="GAS"
+            price={`EUR ${monthlyGross.toFixed(2)}`}
+            priceUnit="/month"
+            priceLabel="Estimated monthly cost (gross)"
+            footer={
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-gray-500">Annual total (gross)</span>
+                <span className="font-extrabold text-gray-900 text-lg">EUR {totalGross.toFixed(2)}</span>
+              </div>
+            }
+          >
+            {/* Stacked bar */}
+            <div className="h-3 flex rounded-full overflow-hidden mb-4">
+              <div
+                className="bg-blue-400 transition-all duration-300"
+                style={{ width: `${(baseCost / totalNet) * 100}%` }}
+              />
+              <div
+                className="bg-orange-400 transition-all duration-300"
+                style={{ width: `${(workCost / totalNet) * 100}%` }}
+              />
+              <div
+                className="bg-red-400 transition-all duration-300"
+                style={{ width: `${(levyCost / totalNet) * 100}%` }}
+              />
             </div>
 
-            <div className="space-y-2">
-              <div className="flex items-center gap-3 p-2 bg-gray-50 rounded">
-                <div className="w-3 h-3 rounded-sm bg-blue-400" />
-                <div className="flex-1">
-                  <p className="text-sm font-medium text-gray-700">Grundpreis</p>
-                  <p className="text-xs text-gray-400">EUR {parseFloat(basePrice).toFixed(2)}/year</p>
+            <div className="cost-line">
+              <div className="flex items-center gap-2">
+                <div className="w-2.5 h-2.5 rounded-full bg-blue-400" />
+                <div>
+                  <span className="cost-line-label">Grundpreis</span>
+                  <p className="text-[10px] text-gray-400">EUR {parseFloat(basePrice).toFixed(2)}/year</p>
                 </div>
-                <span className="font-bold text-sm">EUR {baseCost.toFixed(2)}</span>
               </div>
-              <div className="flex items-center gap-3 p-2 bg-gray-50 rounded">
-                <div className="w-3 h-3 rounded-sm bg-orange-400" />
-                <div className="flex-1">
-                  <p className="text-sm font-medium text-gray-700">Arbeitspreis + Markup</p>
-                  <p className="text-xs text-gray-400">
+              <span className="cost-line-value">EUR {baseCost.toFixed(2)}</span>
+            </div>
+
+            <div className="cost-line">
+              <div className="flex items-center gap-2">
+                <div className="w-2.5 h-2.5 rounded-full bg-orange-400" />
+                <div>
+                  <span className="cost-line-label">Arbeitspreis + Markup</span>
+                  <p className="text-[10px] text-gray-400">
                     {workRate.toFixed(2)} ct/kWh x {consumption.toLocaleString()} kWh
                   </p>
                 </div>
-                <span className="font-bold text-sm">EUR {workCost.toFixed(2)}</span>
               </div>
-              <div className="flex items-center gap-3 p-2 bg-gray-50 rounded">
-                <div className="w-3 h-3 rounded-sm bg-red-400" />
-                <div className="flex-1">
-                  <p className="text-sm font-medium text-gray-700">Gas Levies</p>
-                  <p className="text-xs text-gray-400">
-                    {levyRate.toFixed(3)} ct/kWh x {consumption.toLocaleString()} kWh (CO2 + storage)
-                  </p>
+              <span className="cost-line-value">EUR {workCost.toFixed(2)}</span>
+            </div>
+
+            <div className="cost-line">
+              <div className="flex items-center gap-2">
+                <div className="w-2.5 h-2.5 rounded-full bg-red-400" />
+                <div>
+                  <span className="cost-line-label">Gas Levies</span>
+                  <p className="text-[10px] text-gray-400">{levyRate.toFixed(3)} ct/kWh (CO2 + storage)</p>
                 </div>
-                <span className="font-bold text-sm">EUR {levyCost.toFixed(2)}</span>
               </div>
-              <div className="border-t border-gray-200 pt-2 mt-2">
-                <div className="flex items-center justify-between">
-                  <span className="text-sm font-semibold text-gray-700">Net Total (annual)</span>
-                  <span className="text-lg font-bold text-gray-900">EUR {totalNet.toFixed(2)}</span>
+              <span className="cost-line-value">EUR {levyCost.toFixed(2)}</span>
+            </div>
+
+            <div className="flex items-center justify-between pt-3 mt-1 border-t border-gray-200">
+              <span className="text-sm font-bold text-gray-600">Net Total (annual)</span>
+              <span className="text-lg font-extrabold text-gray-900">EUR {totalNet.toFixed(2)}</span>
+            </div>
+          </TariffCard>
+
+          {/* Per-kWh composition */}
+          <div className="card">
+            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest mb-4">Price per kWh Composition</p>
+            <div className="space-y-2.5">
+              {[
+                { label: 'Work Price', value: parseFloat(workPrice), color: 'bg-orange-200', bar: 'bg-orange-400' },
+                { label: 'Markup', value: parseFloat(markup), color: 'bg-orange-100', bar: 'bg-orange-300' },
+                { label: 'CO2 Levy', value: parseFloat(co2Levy), color: 'bg-red-100', bar: 'bg-red-400' },
+                { label: 'Gas Storage', value: parseFloat(gasStorageLevy), color: 'bg-red-50', bar: 'bg-red-300' },
+              ].map((item) => (
+                <div key={item.label} className="flex items-center gap-3">
+                  <span className="text-xs text-gray-500 w-24 font-medium">{item.label}</span>
+                  <div className="flex-1 bg-gray-100 rounded-full h-2.5 overflow-hidden">
+                    <div
+                      className={`${item.bar} h-full rounded-full transition-all duration-300`}
+                      style={{ width: `${(item.value / totalKwhRate) * 100}%` }}
+                    />
+                  </div>
+                  <span className="text-xs font-bold w-16 text-right tabular-nums">{item.value.toFixed(3)} ct</span>
                 </div>
+              ))}
+              <div className="border-t border-gray-100 pt-2 text-right">
+                <span className="text-sm font-extrabold text-gray-900">Total: {totalKwhRate.toFixed(3)} ct/kWh</span>
               </div>
             </div>
           </div>
 
           {/* Computed results */}
           <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Computed via Library</h3>
-            <div className="grid grid-cols-2 gap-3">
+            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest mb-4">
+              Computed via @epilot/pricing
+            </p>
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
               <ResultCard label="Annual Net" value={fmtCents(result.amount_subtotal)} />
-              <ResultCard label={`Tax (${taxRate}%)`} value={fmtCents(result.amount_tax)} color="amber" />
+              <ResultCard label={`Tax (${taxRate}%)`} value={fmtCents(result.amount_tax)} color="amber" highlight />
               <ResultCard label="Annual Gross" value={fmtCents(result.amount_total)} highlight color="green" />
               <ResultCard
                 label="Monthly Gross"
                 value={fmtCents(Math.round((result.amount_total ?? 0) / 12))}
                 color="blue"
+                highlight
               />
             </div>
           </div>
-
-          {/* Per-kWh breakdown */}
-          <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Per-kWh Price Composition</h3>
-            <div className="space-y-2">
-              {[
-                { label: 'Work Price', value: parseFloat(workPrice), color: 'bg-orange-200' },
-                { label: 'Markup', value: parseFloat(markup), color: 'bg-orange-400' },
-                { label: 'CO2 Levy', value: parseFloat(co2Levy), color: 'bg-red-300' },
-                { label: 'Gas Storage', value: parseFloat(gasStorageLevy), color: 'bg-red-200' },
-              ].map((item) => {
-                const totalKwh = parseFloat(workPrice) + parseFloat(markup) + parseFloat(co2Levy) + parseFloat(gasStorageLevy);
-                return (
-                  <div key={item.label} className="flex items-center gap-2">
-                    <span className="text-xs text-gray-500 w-24">{item.label}</span>
-                    <div className="flex-1 bg-gray-100 rounded-full h-4 overflow-hidden">
-                      <div
-                        className={`${item.color} h-full rounded-full`}
-                        style={{ width: `${(item.value / totalKwh) * 100}%` }}
-                      />
-                    </div>
-                    <span className="text-xs font-medium w-16 text-right">{item.value.toFixed(3)} ct</span>
-                  </div>
-                );
-              })}
-              <div className="border-t border-gray-200 pt-2 text-right">
-                <span className="text-sm font-bold text-gray-900">
-                  Total: {(parseFloat(workPrice) + parseFloat(markup) + parseFloat(co2Levy) + parseFloat(gasStorageLevy)).toFixed(3)} ct/kWh
-                </span>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
 
-      {/* Usage */}
-      <div className="mt-6">
+      {/* Code block */}
+      <div className="mt-8">
         <CodeBlock
           title="Usage"
           code={`import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
@@ -289,17 +304,15 @@ const items = [
     taxes: [{ tax: { rate: ${taxRate} } }],
   },
   {
-    quantity: ${consumption},  // kWh consumption
+    quantity: ${consumption},
     _price: {
-      // Work price + markup + CO2 levy + gas storage levy
-      unit_amount_decimal: '${(parseFloat(workPrice) + parseFloat(markup) + parseFloat(co2Levy) + parseFloat(gasStorageLevy)).toFixed(4)}',
+      unit_amount_decimal: '${totalKwhRate.toFixed(4)}',
       unit_amount_currency: 'EUR',
       pricing_model: 'per_unit',
       is_tax_inclusive: false,
       type: 'recurring',
       billing_period: 'yearly',
       tax: [{ rate: ${taxRate}, type: 'VAT' }],
-      description: 'Arbeitspreis (Work Price)',
     },
     taxes: [{ tax: { rate: ${taxRate} } }],
   },
diff --git a/demo/src/sections/GetAGDemo.tsx b/demo/src/sections/GetAGDemo.tsx
index 490c415..59b84f8 100644
--- a/demo/src/sections/GetAGDemo.tsx
+++ b/demo/src/sections/GetAGDemo.tsx
@@ -1,7 +1,7 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
+import { ResultCard } from '../components/ResultCard';
 import { buildPriceItemDto, fmtCents } from '../helpers';
 
 export function GetAGDemo() {
@@ -10,7 +10,7 @@ export function GetAGDemo() {
   const [consumption, setConsumption] = useState(3500);
   const [markupPerUnit, setMarkupPerUnit] = useState('1.50');
   const [additionalMarkup, setAdditionalMarkup] = useState('24.00');
-  const [taxRate, setTaxRate] = useState(19);
+  const [taxRate] = useState(19);
 
   // Compute a simplified GetAG-like calculation
   const result = useMemo(() => {
@@ -61,8 +61,8 @@ export function GetAGDemo() {
     <div>
       <h1 className="section-title">GetAG Energy Pricing</h1>
       <p className="section-desc">
-        German energy operator (GetAG) integration supporting base price + work price models
-        with tiered markups and additional fees. Used for electricity and gas tariffs.
+        German energy operator (GetAG) integration supporting base price + work price models with tiered markups and
+        additional fees. Used for electricity and gas tariffs.
       </p>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -173,14 +173,24 @@ export function GetAGDemo() {
 
             <div className="space-y-2">
               {[
-                { label: 'Grundpreis (Base)', value: baseCost, color: 'bg-blue-400', detail: `€${parseFloat(basePrice).toFixed(2)}/year` },
+                {
+                  label: 'Grundpreis (Base)',
+                  value: baseCost,
+                  color: 'bg-blue-400',
+                  detail: `€${parseFloat(basePrice).toFixed(2)}/year`,
+                },
                 {
                   label: 'Arbeitspreis (Work)',
                   value: workCost,
                   color: 'bg-green-400',
                   detail: `${(parseFloat(workPrice) + parseFloat(markupPerUnit)).toFixed(2)} ct/kWh x ${consumption.toLocaleString()} kWh`,
                 },
-                { label: 'Additional Markup', value: addCost, color: 'bg-amber-400', detail: `€${parseFloat(additionalMarkup).toFixed(2)}/year` },
+                {
+                  label: 'Additional Markup',
+                  value: addCost,
+                  color: 'bg-amber-400',
+                  detail: `€${parseFloat(additionalMarkup).toFixed(2)}/year`,
+                },
               ].map((item) => (
                 <div key={item.label} className="flex items-center gap-3 p-2 bg-gray-50 rounded">
                   <div className={`w-3 h-3 rounded-sm ${item.color}`} />
@@ -205,7 +215,7 @@ export function GetAGDemo() {
             <h3 className="font-semibold text-gray-900 mb-3">Computed via Library</h3>
             <div className="grid grid-cols-2 gap-3">
               <ResultCard label="Annual Net" value={fmtCents(result.amount_subtotal)} />
-              <ResultCard label="Tax ({taxRate}%)" value={fmtCents(result.amount_tax)} color="amber" />
+              <ResultCard label={`Tax (${taxRate}%)`} value={fmtCents(result.amount_tax)} color="amber" />
               <ResultCard label="Annual Gross" value={fmtCents(result.amount_total)} highlight color="green" />
               <ResultCard
                 label="Monthly Gross"
diff --git a/demo/src/sections/HouseConnectionDemo.tsx b/demo/src/sections/HouseConnectionDemo.tsx
index dfde1a4..f892ea2 100644
--- a/demo/src/sections/HouseConnectionDemo.tsx
+++ b/demo/src/sections/HouseConnectionDemo.tsx
@@ -1,7 +1,8 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
+import { ResultCard } from '../components/ResultCard';
+import { TariffCard } from '../components/TariffCard';
 import { buildPriceItemDto, fmtCents } from '../helpers';
 
 interface ConnectionItem {
@@ -10,23 +11,30 @@ interface ConnectionItem {
   quantity: number;
   type: 'one_time' | 'recurring';
   billingPeriod?: string;
+  icon: string;
 }
 
 const defaultItems: ConnectionItem[] = [
-  { name: 'Electricity Connection', unitAmountDecimal: '1850.00', quantity: 1, type: 'one_time' },
-  { name: 'Gas Connection', unitAmountDecimal: '1450.00', quantity: 1, type: 'one_time' },
-  { name: 'Water Connection', unitAmountDecimal: '2200.00', quantity: 1, type: 'one_time' },
-  { name: 'Construction Power Supply', unitAmountDecimal: '350.00', quantity: 1, type: 'one_time' },
-  { name: 'Meter Installation Fee', unitAmountDecimal: '12.50', quantity: 1, type: 'recurring', billingPeriod: 'monthly' },
+  { name: 'Electricity Connection', unitAmountDecimal: '1850.00', quantity: 1, type: 'one_time', icon: '⚡' },
+  { name: 'Gas Connection', unitAmountDecimal: '1450.00', quantity: 1, type: 'one_time', icon: '🔥' },
+  { name: 'Water Connection', unitAmountDecimal: '2200.00', quantity: 1, type: 'one_time', icon: '💧' },
+  { name: 'Construction Power Supply', unitAmountDecimal: '350.00', quantity: 1, type: 'one_time', icon: '🚧' },
+  {
+    name: 'Meter Installation Fee',
+    unitAmountDecimal: '12.50',
+    quantity: 1,
+    type: 'recurring',
+    billingPeriod: 'monthly',
+    icon: '📋',
+  },
 ];
 
 export function HouseConnectionDemo() {
   const [items, setItems] = useState<ConnectionItem[]>(defaultItems);
-  const [taxRate, setTaxRate] = useState(19);
+  const [taxRate] = useState(19);
   const [distance, setDistance] = useState(15);
   const [perMeterRate, setPerMeterRate] = useState('85.00');
 
-  // Trench cost based on distance
   const trenchCost = distance * parseFloat(perMeterRate);
 
   const result = useMemo(() => {
@@ -42,7 +50,6 @@ export function HouseConnectionDemo() {
       }),
     );
 
-    // Add trench/distance-based cost
     priceItems.push(
       buildPriceItemDto({
         unitAmountDecimal: trenchCost.toFixed(2),
@@ -62,9 +69,7 @@ export function HouseConnectionDemo() {
   };
 
   const toggleItem = (idx: number) => {
-    setItems((prev) =>
-      prev.map((item, i) => (i === idx ? { ...item, quantity: item.quantity > 0 ? 0 : 1 } : item)),
-    );
+    setItems((prev) => prev.map((item, i) => (i === idx ? { ...item, quantity: item.quantity > 0 ? 0 : 1 } : item)));
   };
 
   const oneTimeCosts = items
@@ -79,58 +84,54 @@ export function HouseConnectionDemo() {
     <div>
       <h1 className="section-title">House Connection</h1>
       <p className="section-desc">
-        Hausanschluss (house connection) pricing for new builds and renovations.
-        Combines one-time connection fees, distance-based trench work, and recurring meter costs.
+        Configure Hausanschluss (house connection) pricing for new builds. Combines connection fees, distance-based
+        trench work, and recurring meter costs.
       </p>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="space-y-4">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left column — Controls */}
+        <div className="lg:col-span-1 space-y-4">
           {/* Connection items */}
           <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Connection Services</h3>
-            <div className="space-y-2">
+            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest mb-3">Connection Services</p>
+            <div className="space-y-1.5">
               {items.map((item, idx) => (
                 <div
                   key={idx}
-                  className={`p-3 rounded-lg border transition-colors ${
+                  className={`p-3 rounded-xl transition-all ${
                     item.quantity > 0
-                      ? 'bg-white border-primary-200'
-                      : 'bg-gray-50 border-gray-100 opacity-60'
+                      ? 'bg-white border border-primary-100 shadow-sm'
+                      : 'bg-gray-50 border border-transparent opacity-50'
                   }`}
                 >
                   <div className="flex items-center gap-3">
                     <button
                       onClick={() => toggleItem(idx)}
-                      className={`w-5 h-5 rounded border-2 flex items-center justify-center text-xs transition-colors ${
-                        item.quantity > 0
-                          ? 'bg-primary-600 border-primary-600 text-white'
-                          : 'border-gray-300'
+                      className={`w-5 h-5 rounded-lg border-2 flex items-center justify-center text-[10px] transition-colors ${
+                        item.quantity > 0 ? 'bg-primary-600 border-primary-600 text-white' : 'border-gray-300 bg-white'
                       }`}
                     >
-                      {item.quantity > 0 ? '\u2713' : ''}
+                      {item.quantity > 0 ? '✓' : ''}
                     </button>
-                    <div className="flex-1">
-                      <p className="text-sm font-medium text-gray-700">{item.name}</p>
+                    <span className="text-base">{item.icon}</span>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-xs font-semibold text-gray-700">{item.name}</p>
                       <span
-                        className={`text-[10px] px-1.5 py-0.5 rounded ${
-                          item.type === 'one_time'
-                            ? 'bg-blue-100 text-blue-700'
-                            : 'bg-green-100 text-green-700'
+                        className={`text-[10px] px-1.5 py-0.5 rounded-full font-semibold ${
+                          item.type === 'one_time' ? 'bg-blue-100 text-blue-600' : 'bg-emerald-100 text-emerald-600'
                         }`}
                       >
                         {item.type === 'one_time' ? 'One-time' : `${item.billingPeriod}`}
                       </span>
                     </div>
-                    <div className="w-28">
-                      <input
-                        type="number"
-                        step="0.01"
-                        value={item.unitAmountDecimal}
-                        onChange={(e) => updateItem(idx, 'unitAmountDecimal', e.target.value)}
-                        className="input-field text-xs text-right"
-                        disabled={item.quantity === 0}
-                      />
-                    </div>
+                    <input
+                      type="number"
+                      step="0.01"
+                      value={item.unitAmountDecimal}
+                      onChange={(e) => updateItem(idx, 'unitAmountDecimal', e.target.value)}
+                      className="input-field w-24 text-xs text-right"
+                      disabled={item.quantity === 0}
+                    />
                   </div>
                 </div>
               ))}
@@ -139,12 +140,13 @@ export function HouseConnectionDemo() {
 
           {/* Distance-based pricing */}
           <div className="card">
-            <div className="p-3 bg-amber-50 rounded-lg">
-              <h4 className="text-sm font-medium text-amber-800 mb-2">Trench Work (Tiefbau)</h4>
-              <div>
-                <label className="text-sm font-medium text-gray-700">
-                  Distance to grid: <span className="text-amber-600 font-bold">{distance} m</span>
-                </label>
+            <div className="p-4 bg-amber-50 rounded-xl">
+              <p className="text-xs font-bold text-amber-500 uppercase tracking-widest mb-3">Trench Work (Tiefbau)</p>
+              <div className="mb-3">
+                <div className="flex items-center justify-between mb-1">
+                  <label className="text-xs font-bold text-gray-400 uppercase tracking-widest">Distance to Grid</label>
+                  <span className="text-sm font-extrabold text-amber-600">{distance} m</span>
+                </div>
                 <input
                   type="range"
                   min="5"
@@ -152,16 +154,16 @@ export function HouseConnectionDemo() {
                   step="1"
                   value={distance}
                   onChange={(e) => setDistance(Number(e.target.value))}
-                  className="w-full mt-1 accent-amber-500"
+                  className="w-full accent-amber-500"
                 />
-                <div className="flex justify-between text-xs text-gray-400">
+                <div className="flex justify-between text-[10px] text-gray-300 mt-1">
                   <span>5 m</span>
                   <span>100 m</span>
                 </div>
               </div>
-              <div className="grid grid-cols-2 gap-3 mt-3">
+              <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <label className="text-xs text-amber-600">Rate per meter (EUR/m)</label>
+                  <label className="text-xs text-amber-600 font-medium">EUR/m rate</label>
                   <input
                     type="number"
                     step="0.01"
@@ -171,9 +173,9 @@ export function HouseConnectionDemo() {
                   />
                 </div>
                 <div className="flex items-end">
-                  <div className="p-2 bg-amber-100 rounded text-center w-full">
-                    <p className="text-xs text-amber-600">Total Trench Cost</p>
-                    <p className="font-bold text-amber-800">EUR {trenchCost.toFixed(2)}</p>
+                  <div className="p-3 bg-amber-100 rounded-xl text-center w-full">
+                    <p className="text-[10px] text-amber-600 font-bold uppercase tracking-wider">Total</p>
+                    <p className="font-extrabold text-amber-800">EUR {trenchCost.toFixed(2)}</p>
                   </div>
                 </div>
               </div>
@@ -181,91 +183,116 @@ export function HouseConnectionDemo() {
           </div>
         </div>
 
-        <div className="space-y-4">
-          {/* Visual overview */}
-          <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Cost Overview</h3>
-
-            {/* Connection type breakdown */}
-            <div className="space-y-3 mb-4">
-              {items
-                .filter((i) => i.quantity > 0 && i.type === 'one_time')
-                .map((item, idx) => {
-                  const cost = parseFloat(item.unitAmountDecimal) * item.quantity;
-                  return (
-                    <div key={idx} className="flex items-center justify-between p-2 bg-blue-50 rounded">
-                      <span className="text-sm text-gray-700">{item.name}</span>
-                      <span className="font-semibold text-sm">EUR {cost.toFixed(2)}</span>
+        {/* Right column — Tariff card + results */}
+        <div className="lg:col-span-2 space-y-5">
+          <TariffCard
+            gradient="gradient-house"
+            icon={<span>🏡</span>}
+            title="Hausanschluss"
+            subtitle="New build connection package"
+            badge="CONNECTION"
+            price={`EUR ${totalOneTime.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
+            priceUnit=""
+            priceLabel="Total one-time costs (net)"
+            footer={
+              recurringCosts > 0 ? (
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-gray-500">Recurring costs</span>
+                  <span className="font-extrabold text-emerald-600">EUR {recurringCosts.toFixed(2)}/month</span>
+                </div>
+              ) : undefined
+            }
+          >
+            {/* Line items */}
+            {items
+              .filter((i) => i.quantity > 0 && i.type === 'one_time')
+              .map((item, idx) => {
+                const cost = parseFloat(item.unitAmountDecimal) * item.quantity;
+                return (
+                  <div key={idx} className="cost-line">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm">{item.icon}</span>
+                      <span className="cost-line-label">{item.name}</span>
                     </div>
-                  );
-                })}
-              <div className="flex items-center justify-between p-2 bg-amber-50 rounded">
-                <span className="text-sm text-gray-700">Trench Work ({distance}m x EUR {parseFloat(perMeterRate).toFixed(2)})</span>
-                <span className="font-semibold text-sm">EUR {trenchCost.toFixed(2)}</span>
+                    <span className="cost-line-value">EUR {cost.toFixed(2)}</span>
+                  </div>
+                );
+              })}
+
+            <div className="cost-line">
+              <div className="flex items-center gap-2">
+                <span className="text-sm">🛠️</span>
+                <div>
+                  <span className="cost-line-label">Trench Work</span>
+                  <p className="text-[10px] text-gray-400">
+                    {distance}m x EUR {parseFloat(perMeterRate).toFixed(2)}/m
+                  </p>
+                </div>
               </div>
-              {items
-                .filter((i) => i.quantity > 0 && i.type === 'recurring')
-                .map((item, idx) => (
-                  <div key={idx} className="flex items-center justify-between p-2 bg-green-50 rounded">
+              <span className="cost-line-value">EUR {trenchCost.toFixed(2)}</span>
+            </div>
+
+            {items
+              .filter((i) => i.quantity > 0 && i.type === 'recurring')
+              .map((item, idx) => (
+                <div key={idx} className="cost-line">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm">{item.icon}</span>
                     <div>
-                      <span className="text-sm text-gray-700">{item.name}</span>
-                      <span className="text-xs text-green-600 ml-2">/{item.billingPeriod}</span>
+                      <span className="cost-line-label">{item.name}</span>
+                      <p className="text-[10px] text-emerald-500 font-medium">/{item.billingPeriod}</p>
                     </div>
-                    <span className="font-semibold text-sm">EUR {parseFloat(item.unitAmountDecimal).toFixed(2)}</span>
                   </div>
-                ))}
-            </div>
-
-            <div className="border-t border-gray-200 pt-3 space-y-2">
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-gray-600">One-time costs (net)</span>
-                <span className="font-bold text-gray-900">EUR {totalOneTime.toFixed(2)}</span>
-              </div>
-              {recurringCosts > 0 && (
-                <div className="flex items-center justify-between">
-                  <span className="text-sm text-gray-600">Recurring costs (net)</span>
-                  <span className="font-bold text-gray-900">EUR {recurringCosts.toFixed(2)}/month</span>
+                  <span className="cost-line-value text-emerald-600">
+                    EUR {parseFloat(item.unitAmountDecimal).toFixed(2)}
+                  </span>
                 </div>
-              )}
-            </div>
-          </div>
+              ))}
+          </TariffCard>
 
           {/* Computed results */}
           <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Computed via Library</h3>
-            <div className="grid grid-cols-2 gap-3">
+            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest mb-4">
+              Computed via @epilot/pricing
+            </p>
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
               <ResultCard label="Total Net" value={fmtCents(result.amount_subtotal)} />
-              <ResultCard label={`Tax (${taxRate}%)`} value={fmtCents(result.amount_tax)} color="amber" />
+              <ResultCard label={`Tax (${taxRate}%)`} value={fmtCents(result.amount_tax)} color="amber" highlight />
               <ResultCard label="Total Gross" value={fmtCents(result.amount_total)} highlight color="green" />
-              <ResultCard label="Items" value={result.items?.length ?? 0} />
+              <ResultCard label="Items" value={result.items?.length ?? 0} color="blue" highlight />
             </div>
 
             {(result.total_details?.breakdown?.recurrences?.length ?? 0) > 0 && (
-              <div className="mt-4">
-                <p className="text-sm font-medium text-gray-700 mb-2">By Recurrence:</p>
-                {result.total_details?.breakdown?.recurrences?.map((r: any, i: number) => (
-                  <div key={i} className="flex items-center justify-between py-1.5 border-b border-gray-100 text-sm">
-                    <span className={r.type === 'one_time' ? 'badge-blue' : 'badge-green'}>
-                      {r.type === 'one_time' ? 'One-time' : r.billing_period}
-                    </span>
-                    <span className="font-medium">{fmtCents(r.amount_total)}</span>
-                  </div>
-                ))}
+              <div className="mt-4 pt-4 border-t border-gray-100">
+                <p className="text-xs font-bold text-gray-300 uppercase tracking-widest mb-3">By Recurrence</p>
+                <div className="space-y-2">
+                  {result.total_details?.breakdown?.recurrences?.map((r: any, i: number) => (
+                    <div key={i} className="flex items-center justify-between py-2">
+                      <span className={r.type === 'one_time' ? 'badge-blue' : 'badge-green'}>
+                        {r.type === 'one_time' ? 'One-time' : r.billing_period}
+                      </span>
+                      <span className="font-extrabold text-sm tabular-nums">{fmtCents(r.amount_total)}</span>
+                    </div>
+                  ))}
+                </div>
               </div>
             )}
           </div>
         </div>
       </div>
 
-      {/* Usage */}
-      <div className="mt-6">
+      {/* Code block */}
+      <div className="mt-8">
         <CodeBlock
           title="Usage"
           code={`import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
 
 // House connection: mix of one-time and recurring items
 const items = [
-${items.filter((i) => i.quantity > 0).map((i) => `  {
+${items
+  .filter((i) => i.quantity > 0)
+  .map(
+    (i) => `  {
     quantity: ${i.quantity},
     _price: {
       unit_amount_decimal: '${i.unitAmountDecimal}',
@@ -277,7 +304,9 @@ ${items.filter((i) => i.quantity > 0).map((i) => `  {
       description: '${i.name}',
     },
     taxes: [{ tax: { rate: ${taxRate} } }],
-  },`).join('\n')}
+  },`,
+  )
+  .join('\n')}
   {
     quantity: 1,
     _price: {
@@ -287,7 +316,7 @@ ${items.filter((i) => i.quantity > 0).map((i) => `  {
       is_tax_inclusive: false,
       type: 'one_time',
       tax: [{ rate: ${taxRate}, type: 'VAT' }],
-      description: 'Trench Work (${distance}m x EUR ${parseFloat(perMeterRate).toFixed(2)}/m)',
+      description: 'Trench Work (${distance}m)',
     },
     taxes: [{ tax: { rate: ${taxRate} } }],
   },
diff --git a/demo/src/sections/NonCommodityDemo.tsx b/demo/src/sections/NonCommodityDemo.tsx
index 7d4567f..0b39413 100644
--- a/demo/src/sections/NonCommodityDemo.tsx
+++ b/demo/src/sections/NonCommodityDemo.tsx
@@ -1,7 +1,14 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
+import {
+  ProductShowcase,
+  SolarIllustration,
+  WallboxIllustration,
+  HeatPumpIllustration,
+  SmartHomeIllustration,
+} from '../components/ProductShowcase';
+import { ResultCard } from '../components/ResultCard';
 import { buildPriceItemDto, fmtCents } from '../helpers';
 
 interface Product {
@@ -15,43 +22,128 @@ interface Product {
 }
 
 const defaultProducts: Product[] = [
-  // Solar
-  { name: 'Solar Panel System (10 kWp)', category: 'solar', price: '12500.00', quantity: 1, type: 'one_time', enabled: true },
-  { name: 'Battery Storage (10 kWh)', category: 'solar', price: '6800.00', quantity: 1, type: 'one_time', enabled: true },
+  {
+    name: 'Solar Panel System (10 kWp)',
+    category: 'solar',
+    price: '12500.00',
+    quantity: 1,
+    type: 'one_time',
+    enabled: true,
+  },
+  {
+    name: 'Battery Storage (10 kWh)',
+    category: 'solar',
+    price: '6800.00',
+    quantity: 1,
+    type: 'one_time',
+    enabled: true,
+  },
   { name: 'Solar Installation', category: 'solar', price: '3200.00', quantity: 1, type: 'one_time', enabled: true },
-  { name: 'Solar Maintenance Contract', category: 'solar', price: '29.90', quantity: 1, type: 'recurring', billingPeriod: 'monthly', enabled: true },
-  // E-Mobility
+  {
+    name: 'Solar Maintenance Contract',
+    category: 'solar',
+    price: '29.90',
+    quantity: 1,
+    type: 'recurring',
+    billingPeriod: 'monthly',
+    enabled: true,
+  },
   { name: 'Wallbox (11 kW)', category: 'emobility', price: '899.00', quantity: 1, type: 'one_time', enabled: false },
-  { name: 'Wallbox Installation', category: 'emobility', price: '450.00', quantity: 1, type: 'one_time', enabled: false },
-  { name: 'Charging Flat Rate', category: 'emobility', price: '59.00', quantity: 1, type: 'recurring', billingPeriod: 'monthly', enabled: false },
-  // Heating
+  {
+    name: 'Wallbox Installation',
+    category: 'emobility',
+    price: '450.00',
+    quantity: 1,
+    type: 'one_time',
+    enabled: false,
+  },
+  {
+    name: 'Charging Flat Rate',
+    category: 'emobility',
+    price: '59.00',
+    quantity: 1,
+    type: 'recurring',
+    billingPeriod: 'monthly',
+    enabled: false,
+  },
   { name: 'Heat Pump System', category: 'heating', price: '15800.00', quantity: 1, type: 'one_time', enabled: false },
-  { name: 'Heat Pump Installation', category: 'heating', price: '4500.00', quantity: 1, type: 'one_time', enabled: false },
-  { name: 'Heating Maintenance', category: 'heating', price: '39.90', quantity: 1, type: 'recurring', billingPeriod: 'monthly', enabled: false },
-  // Smart Home
+  {
+    name: 'Heat Pump Installation',
+    category: 'heating',
+    price: '4500.00',
+    quantity: 1,
+    type: 'one_time',
+    enabled: false,
+  },
+  {
+    name: 'Heating Maintenance',
+    category: 'heating',
+    price: '39.90',
+    quantity: 1,
+    type: 'recurring',
+    billingPeriod: 'monthly',
+    enabled: false,
+  },
   { name: 'Smart Thermostat', category: 'smarthome', price: '249.00', quantity: 1, type: 'one_time', enabled: false },
   { name: 'Energy Manager', category: 'smarthome', price: '499.00', quantity: 1, type: 'one_time', enabled: false },
 ];
 
-const categoryMeta: Record<string, { label: string; color: string; bg: string; text: string; icon: string }> = {
-  solar: { label: 'Solar & Storage', color: 'bg-yellow-400', bg: 'bg-yellow-50', text: 'text-yellow-700', icon: '\u2600\uFE0F' },
-  emobility: { label: 'E-Mobility', color: 'bg-blue-400', bg: 'bg-blue-50', text: 'text-blue-700', icon: '\uD83D\uDE97' },
-  heating: { label: 'Heating', color: 'bg-red-400', bg: 'bg-red-50', text: 'text-red-700', icon: '\uD83C\uDF21\uFE0F' },
-  smarthome: { label: 'Smart Home', color: 'bg-green-400', bg: 'bg-green-50', text: 'text-green-700', icon: '\uD83C\uDFE0' },
+const categoryMeta: Record<
+  string,
+  {
+    label: string;
+    gradient: string;
+    bg: string;
+    text: string;
+    icon: string;
+    illustration: React.ComponentType;
+    features: string[];
+  }
+> = {
+  solar: {
+    label: 'Solar & Storage',
+    gradient: 'gradient-solar',
+    bg: 'bg-amber-50',
+    text: 'text-amber-700',
+    icon: '☀️',
+    illustration: SolarIllustration,
+    features: ['10 kWp PV system', 'Battery storage', 'Professional installation', 'Maintenance included'],
+  },
+  emobility: {
+    label: 'E-Mobility',
+    gradient: 'gradient-emobility',
+    bg: 'bg-blue-50',
+    text: 'text-blue-700',
+    icon: '🚗',
+    illustration: WallboxIllustration,
+    features: ['11 kW wallbox', 'Installation included', 'Smart charging', 'Monthly flat rate'],
+  },
+  heating: {
+    label: 'Heating',
+    gradient: 'gradient-heating',
+    bg: 'bg-red-50',
+    text: 'text-red-700',
+    icon: '🌡️',
+    illustration: HeatPumpIllustration,
+    features: ['Air-to-water system', 'Full installation', 'Smart controls', 'Service contract'],
+  },
+  smarthome: {
+    label: 'Smart Home',
+    gradient: 'gradient-smarthome',
+    bg: 'bg-emerald-50',
+    text: 'text-emerald-700',
+    icon: '🏠',
+    illustration: SmartHomeIllustration,
+    features: ['Smart thermostat', 'Energy monitoring', 'App control', 'Consumption insights'],
+  },
 };
 
+const categories = ['solar', 'emobility', 'heating', 'smarthome'] as const;
+
 export function NonCommodityDemo() {
   const [products, setProducts] = useState<Product[]>(defaultProducts);
   const [taxRate, setTaxRate] = useState(19);
 
-  const toggleProduct = (idx: number) => {
-    setProducts((prev) => prev.map((p, i) => (i === idx ? { ...p, enabled: !p.enabled } : p)));
-  };
-
-  const updateProduct = (idx: number, field: keyof Product, value: any) => {
-    setProducts((prev) => prev.map((p, i) => (i === idx ? { ...p, [field]: value } : p)));
-  };
-
   const toggleCategory = (category: string) => {
     setProducts((prev) => {
       const catProducts = prev.filter((p) => p.category === category);
@@ -60,6 +152,10 @@ export function NonCommodityDemo() {
     });
   };
 
+  const updateProduct = (idx: number, field: keyof Product, value: any) => {
+    setProducts((prev) => prev.map((p, i) => (i === idx ? { ...p, [field]: value } : p)));
+  };
+
   const result = useMemo(() => {
     const items = products
       .filter((p) => p.enabled)
@@ -76,7 +172,13 @@ export function NonCommodityDemo() {
       );
 
     if (items.length === 0) {
-      return { amount_subtotal: 0, amount_tax: 0, amount_total: 0, items: [], total_details: { breakdown: { recurrences: [] } } };
+      return {
+        amount_subtotal: 0,
+        amount_tax: 0,
+        amount_total: 0,
+        items: [],
+        total_details: { breakdown: { recurrences: [] } },
+      };
     }
 
     return computeAggregatedAndPriceTotals(items);
@@ -90,114 +192,111 @@ export function NonCommodityDemo() {
     .filter((p) => p.type === 'recurring')
     .reduce((sum, p) => sum + parseFloat(p.price) * p.quantity, 0);
 
-  const categories = ['solar', 'emobility', 'heating', 'smarthome'];
   const categoryTotals = categories.map((cat) => {
     const catProducts = enabledProducts.filter((p) => p.category === cat);
+    const meta = categoryMeta[cat];
     return {
       category: cat,
-      ...categoryMeta[cat],
-      oneTime: catProducts.filter((p) => p.type === 'one_time').reduce((s, p) => s + parseFloat(p.price) * p.quantity, 0),
-      recurring: catProducts.filter((p) => p.type === 'recurring').reduce((s, p) => s + parseFloat(p.price) * p.quantity, 0),
+      ...meta,
+      oneTime: catProducts
+        .filter((p) => p.type === 'one_time')
+        .reduce((s, p) => s + parseFloat(p.price) * p.quantity, 0),
+      recurring: catProducts
+        .filter((p) => p.type === 'recurring')
+        .reduce((s, p) => s + parseFloat(p.price) * p.quantity, 0),
       count: catProducts.length,
     };
-  }).filter((c) => c.count > 0);
+  });
+
+  const isCategoryEnabled = (cat: string) => products.filter((p) => p.category === cat).some((p) => p.enabled);
 
   return (
     <div>
-      <h1 className="section-title">Non-Commodity Products</h1>
+      <h1 className="section-title">Products & Add-ons</h1>
       <p className="section-desc">
-        Products and services beyond the energy supply itself — solar panels, battery storage,
-        wallboxes, heat pumps, and smart home devices. Combines one-time hardware and installation
-        costs with recurring service and maintenance contracts.
+        Build product bundles for your customers — solar panels, wallboxes, heat pumps, and smart home devices. Select
+        categories to configure complete packages with one-time and recurring pricing.
       </p>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="space-y-4">
-          {/* Category toggles */}
-          <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Product Categories</h3>
-            <div className="grid grid-cols-2 gap-2">
-              {categories.map((cat) => {
-                const meta = categoryMeta[cat];
-                const catProducts = products.filter((p) => p.category === cat);
-                const enabledCount = catProducts.filter((p) => p.enabled).length;
-                return (
-                  <button
-                    key={cat}
-                    onClick={() => toggleCategory(cat)}
-                    className={`p-3 rounded-lg border text-left transition-colors ${
-                      enabledCount > 0
-                        ? `${meta.bg} border-current ${meta.text}`
-                        : 'bg-gray-50 border-gray-200 text-gray-400'
-                    }`}
-                  >
-                    <span className="text-lg">{meta.icon}</span>
-                    <p className="text-sm font-medium mt-1">{meta.label}</p>
-                    <p className="text-[10px] opacity-70">
-                      {enabledCount}/{catProducts.length} selected
-                    </p>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
+      {/* Product showcase grid — the "journey" visual */}
+      <p className="text-xs font-bold text-gray-300 uppercase tracking-widest mb-4">Select Product Categories</p>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
+        {categories.map((cat) => {
+          const meta = categoryMeta[cat];
+          const catProducts = products.filter((p) => p.category === cat);
+          const catOneTime = catProducts
+            .filter((p) => p.type === 'one_time')
+            .reduce((s, p) => s + parseFloat(p.price), 0);
+          const catRecurring = catProducts
+            .filter((p) => p.type === 'recurring')
+            .reduce((s, p) => s + parseFloat(p.price), 0);
+          const enabled = isCategoryEnabled(cat);
 
-          {/* Product list */}
+          return (
+            <ProductShowcase
+              key={cat}
+              icon={meta.icon}
+              gradient={cat}
+              title={meta.label}
+              description={`${catProducts.length} products available`}
+              price={`EUR ${catOneTime.toLocaleString('de-DE', { minimumFractionDigits: 0 })}`}
+              priceLabel={catRecurring > 0 ? `+ EUR ${catRecurring.toFixed(2)}/mo` : 'one-time'}
+              features={meta.features}
+              tag={enabled ? 'Selected' : undefined}
+              tagColor={enabled ? 'bg-emerald-100 text-emerald-700' : undefined}
+              selected={enabled}
+              onToggle={() => toggleCategory(cat)}
+            />
+          );
+        })}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Product details */}
+        <div className="lg:col-span-1 space-y-4">
           <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Products & Services</h3>
-            <div className="space-y-2 max-h-[400px] overflow-y-auto">
+            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest mb-3">Products in Bundle</p>
+            <div className="space-y-1.5 max-h-[420px] overflow-y-auto">
               {products.map((product, idx) => {
                 const meta = categoryMeta[product.category];
                 return (
                   <div
                     key={idx}
-                    className={`flex items-center gap-3 p-2.5 rounded-lg border transition-colors ${
-                      product.enabled ? `${meta.bg} border-transparent` : 'bg-gray-50 border-gray-100 opacity-50'
+                    className={`flex items-center gap-3 p-2.5 rounded-xl transition-all ${
+                      product.enabled ? `${meta.bg} border border-transparent` : 'bg-gray-50 opacity-40'
                     }`}
                   >
                     <button
-                      onClick={() => toggleProduct(idx)}
-                      className={`w-4 h-4 rounded border-2 flex-shrink-0 flex items-center justify-center text-[10px] ${
-                        product.enabled
-                          ? 'bg-primary-600 border-primary-600 text-white'
-                          : 'border-gray-300'
+                      onClick={() => updateProduct(idx, 'enabled', !product.enabled)}
+                      className={`w-5 h-5 rounded-lg border-2 flex-shrink-0 flex items-center justify-center text-[10px] transition-colors ${
+                        product.enabled ? 'bg-primary-600 border-primary-600 text-white' : 'border-gray-300 bg-white'
                       }`}
                     >
-                      {product.enabled ? '\u2713' : ''}
+                      {product.enabled ? '✓' : ''}
                     </button>
                     <div className="flex-1 min-w-0">
-                      <p className="text-xs font-medium text-gray-700 truncate">{product.name}</p>
-                      <div className="flex items-center gap-2">
-                        <span className={`text-[10px] ${meta.text}`}>{meta.label}</span>
+                      <p className="text-xs font-semibold text-gray-700 truncate">{product.name}</p>
+                      <div className="flex items-center gap-1.5 mt-0.5">
+                        <span className={`text-[10px] font-medium ${meta.text}`}>{meta.icon}</span>
                         <span
-                          className={`text-[10px] px-1 py-0.5 rounded ${
+                          className={`text-[10px] px-1.5 py-0.5 rounded-full font-semibold ${
                             product.type === 'one_time'
                               ? 'bg-blue-100 text-blue-600'
-                              : 'bg-green-100 text-green-600'
+                              : 'bg-emerald-100 text-emerald-600'
                           }`}
                         >
                           {product.type === 'one_time' ? 'One-time' : product.billingPeriod}
                         </span>
                       </div>
                     </div>
-                    <div className="flex items-center gap-2">
-                      <input
-                        type="number"
-                        min="1"
-                        value={product.quantity}
-                        onChange={(e) => updateProduct(idx, 'quantity', Math.max(1, Number(e.target.value)))}
-                        className="input-field w-12 text-xs text-center"
-                        disabled={!product.enabled}
-                      />
-                      <input
-                        type="number"
-                        step="0.01"
-                        value={product.price}
-                        onChange={(e) => updateProduct(idx, 'price', e.target.value)}
-                        className="input-field w-24 text-xs text-right"
-                        disabled={!product.enabled}
-                      />
-                    </div>
+                    <input
+                      type="number"
+                      step="0.01"
+                      value={product.price}
+                      onChange={(e) => updateProduct(idx, 'price', e.target.value)}
+                      className="input-field w-24 text-xs text-right"
+                      disabled={!product.enabled}
+                    />
                   </div>
                 );
               })}
@@ -205,12 +304,8 @@ export function NonCommodityDemo() {
           </div>
 
           <div className="card">
-            <label className="text-sm font-medium text-gray-700">Tax Rate</label>
-            <select
-              value={taxRate}
-              onChange={(e) => setTaxRate(Number(e.target.value))}
-              className="select-field mt-1"
-            >
+            <label className="text-xs font-bold text-gray-400 uppercase tracking-widest">Tax Rate</label>
+            <select value={taxRate} onChange={(e) => setTaxRate(Number(e.target.value))} className="select-field mt-2">
               <option value={0}>0% (Solar tax exemption)</option>
               <option value={7}>7%</option>
               <option value={19}>19%</option>
@@ -218,130 +313,152 @@ export function NonCommodityDemo() {
           </div>
         </div>
 
-        <div className="space-y-4">
-          {/* Category cost breakdown */}
-          <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Cost by Category</h3>
-
-            {categoryTotals.length === 0 ? (
-              <p className="text-sm text-gray-400 text-center py-4">No products selected</p>
-            ) : (
-              <>
-                {/* Stacked bar for one-time costs */}
-                {oneTimeCosts > 0 && (
-                  <div className="mb-4">
-                    <p className="text-xs text-gray-500 mb-1">One-time costs</p>
-                    <div className="h-8 flex rounded-lg overflow-hidden">
-                      {categoryTotals
-                        .filter((c) => c.oneTime > 0)
-                        .map((cat) => (
+        {/* Right column — Bundle summary + results */}
+        <div className="lg:col-span-2 space-y-5">
+          {/* Bundle order summary — tariff card style */}
+          <div className="tariff-card">
+            <div className="tariff-card-header gradient-primary">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="tariff-card-label mb-1">Your Bundle</p>
+                  <div className="flex items-baseline gap-1">
+                    <span className="tariff-card-price">
+                      EUR {oneTimeCosts.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                    </span>
+                  </div>
+                  {monthlyCosts > 0 && (
+                    <p className="text-sm opacity-80 mt-1">+ EUR {monthlyCosts.toFixed(2)}/month service</p>
+                  )}
+                </div>
+                <div className="text-right">
+                  <p className="text-3xl font-extrabold">{enabledProducts.length}</p>
+                  <p className="text-xs opacity-70">items selected</p>
+                </div>
+              </div>
+            </div>
+            <div className="tariff-card-body">
+              {/* Category cost stacked bar */}
+              {oneTimeCosts > 0 && (
+                <div className="mb-5">
+                  <p className="text-[10px] font-bold text-gray-300 uppercase tracking-widest mb-2">
+                    Cost Distribution
+                  </p>
+                  <div className="h-3 flex rounded-full overflow-hidden">
+                    {categoryTotals
+                      .filter((c) => c.oneTime > 0)
+                      .map((cat) => {
+                        const colors: Record<string, string> = {
+                          solar: 'bg-amber-400',
+                          emobility: 'bg-blue-400',
+                          heating: 'bg-red-400',
+                          smarthome: 'bg-emerald-400',
+                        };
+                        return (
                           <div
                             key={cat.category}
-                            className={`${cat.color} flex items-center justify-center text-white text-xs font-medium transition-all duration-300`}
+                            className={`${colors[cat.category]} transition-all duration-300`}
                             style={{ width: `${(cat.oneTime / oneTimeCosts) * 100}%` }}
                             title={`${cat.label}: EUR ${cat.oneTime.toFixed(2)}`}
-                          >
-                            {(cat.oneTime / oneTimeCosts) * 100 > 15 ? cat.icon : ''}
-                          </div>
-                        ))}
-                    </div>
-                  </div>
-                )}
-
-                <div className="space-y-2">
-                  {categoryTotals.map((cat) => (
-                    <div key={cat.category} className="flex items-center gap-3 p-2 bg-gray-50 rounded">
-                      <div className={`w-3 h-3 rounded-sm ${cat.color}`} />
-                      <div className="flex-1">
-                        <p className="text-sm font-medium text-gray-700">{cat.icon} {cat.label}</p>
-                        <p className="text-xs text-gray-400">{cat.count} item(s)</p>
-                      </div>
-                      <div className="text-right">
-                        {cat.oneTime > 0 && (
-                          <p className="text-sm font-bold">EUR {cat.oneTime.toFixed(2)}</p>
-                        )}
-                        {cat.recurring > 0 && (
-                          <p className="text-xs text-green-600">+ EUR {cat.recurring.toFixed(2)}/mo</p>
-                        )}
-                      </div>
-                    </div>
-                  ))}
-
-                  <div className="border-t border-gray-200 pt-2 mt-2 space-y-1">
-                    <div className="flex items-center justify-between">
-                      <span className="text-sm text-gray-600">One-time total (net)</span>
-                      <span className="font-bold text-gray-900">EUR {oneTimeCosts.toFixed(2)}</span>
-                    </div>
-                    {monthlyCosts > 0 && (
-                      <div className="flex items-center justify-between">
-                        <span className="text-sm text-gray-600">Monthly total (net)</span>
-                        <span className="font-bold text-green-600">EUR {monthlyCosts.toFixed(2)}/mo</span>
-                      </div>
-                    )}
+                          />
+                        );
+                      })}
                   </div>
                 </div>
-              </>
-            )}
-          </div>
+              )}
 
-          {/* Bundle summary */}
-          <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Selected Bundle</h3>
-            <div className="space-y-1.5">
-              {enabledProducts.map((p, idx) => (
-                <div key={idx} className="flex items-center justify-between text-sm py-1 border-b border-gray-50">
-                  <span className="text-gray-600 truncate flex-1 mr-2">
-                    {categoryMeta[p.category].icon} {p.name}
-                    {p.quantity > 1 && <span className="text-gray-400"> x{p.quantity}</span>}
-                  </span>
-                  <span className="font-medium whitespace-nowrap">
-                    EUR {(parseFloat(p.price) * p.quantity).toFixed(2)}
-                    {p.type === 'recurring' && <span className="text-green-600 text-xs">/mo</span>}
-                  </span>
+              {/* Line items */}
+              {enabledProducts.length === 0 ? (
+                <p className="text-sm text-gray-400 text-center py-8">Select products above to build your bundle</p>
+              ) : (
+                <div>
+                  {categoryTotals
+                    .filter((c) => c.count > 0)
+                    .map((cat) => (
+                      <div key={cat.category} className="mb-4 last:mb-0">
+                        <div className="flex items-center gap-2 mb-2">
+                          <span className="text-sm">{cat.icon}</span>
+                          <span className="text-xs font-bold text-gray-600">{cat.label}</span>
+                        </div>
+                        {enabledProducts
+                          .filter((p) => p.category === cat.category)
+                          .map((p, idx) => (
+                            <div key={idx} className="cost-line">
+                              <span className="cost-line-label">
+                                {p.name}
+                                {p.quantity > 1 && <span className="text-gray-400"> x{p.quantity}</span>}
+                              </span>
+                              <span className="cost-line-value">
+                                EUR {(parseFloat(p.price) * p.quantity).toFixed(2)}
+                                {p.type === 'recurring' && (
+                                  <span className="text-emerald-600 text-xs font-semibold ml-1">/mo</span>
+                                )}
+                              </span>
+                            </div>
+                          ))}
+                      </div>
+                    ))}
                 </div>
-              ))}
-              {enabledProducts.length === 0 && (
-                <p className="text-sm text-gray-400 text-center py-2">No products selected</p>
               )}
             </div>
+            {enabledProducts.length > 0 && (
+              <div className="tariff-card-footer">
+                <div className="flex items-center justify-between mb-1">
+                  <span className="text-sm text-gray-500">One-time total (net)</span>
+                  <span className="font-extrabold text-gray-900">EUR {oneTimeCosts.toFixed(2)}</span>
+                </div>
+                {monthlyCosts > 0 && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-gray-500">Monthly total (net)</span>
+                    <span className="font-extrabold text-emerald-600">EUR {monthlyCosts.toFixed(2)}/mo</span>
+                  </div>
+                )}
+              </div>
+            )}
           </div>
 
           {/* Computed results */}
           <div className="card">
-            <h3 className="font-semibold text-gray-900 mb-3">Computed via Library</h3>
-            <div className="grid grid-cols-2 gap-3">
+            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest mb-4">
+              Computed via @epilot/pricing
+            </p>
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
               <ResultCard label="Total Net" value={fmtCents(result.amount_subtotal)} />
-              <ResultCard label={`Tax (${taxRate}%)`} value={fmtCents(result.amount_tax)} color="amber" />
+              <ResultCard label={`Tax (${taxRate}%)`} value={fmtCents(result.amount_tax)} color="amber" highlight />
               <ResultCard label="Total Gross" value={fmtCents(result.amount_total)} highlight color="green" />
-              <ResultCard label="Items" value={enabledProducts.length} />
+              <ResultCard label="Items" value={enabledProducts.length} color="blue" highlight />
             </div>
 
             {(result.total_details?.breakdown?.recurrences?.length ?? 0) > 0 && (
-              <div className="mt-4">
-                <p className="text-sm font-medium text-gray-700 mb-2">By Recurrence:</p>
-                {result.total_details?.breakdown?.recurrences?.map((r: any, i: number) => (
-                  <div key={i} className="flex items-center justify-between py-1.5 border-b border-gray-100 text-sm">
-                    <span className={r.type === 'one_time' ? 'badge-blue' : 'badge-green'}>
-                      {r.type === 'one_time' ? 'One-time' : r.billing_period}
-                    </span>
-                    <span className="font-medium">{fmtCents(r.amount_total)}</span>
-                  </div>
-                ))}
+              <div className="mt-4 pt-4 border-t border-gray-100">
+                <p className="text-xs font-bold text-gray-300 uppercase tracking-widest mb-3">By Recurrence</p>
+                <div className="space-y-2">
+                  {result.total_details?.breakdown?.recurrences?.map((r: any, i: number) => (
+                    <div key={i} className="flex items-center justify-between py-2">
+                      <span className={r.type === 'one_time' ? 'badge-blue' : 'badge-green'}>
+                        {r.type === 'one_time' ? 'One-time' : r.billing_period}
+                      </span>
+                      <span className="font-extrabold text-sm tabular-nums">{fmtCents(r.amount_total)}</span>
+                    </div>
+                  ))}
+                </div>
               </div>
             )}
           </div>
         </div>
       </div>
 
-      {/* Usage */}
-      <div className="mt-6">
+      {/* Code block */}
+      <div className="mt-8">
         <CodeBlock
           title="Usage"
           code={`import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
 
 // Non-commodity bundle: hardware + services + maintenance
 const items = [
-${enabledProducts.slice(0, 4).map((p) => `  {
+${enabledProducts
+  .slice(0, 4)
+  .map(
+    (p) => `  {
     quantity: ${p.quantity},
     _price: {
       unit_amount_decimal: '${p.price}',
@@ -353,12 +470,13 @@ ${enabledProducts.slice(0, 4).map((p) => `  {
       description: '${p.name}',
     },
     taxes: [{ tax: { rate: ${taxRate} } }],
-  },`).join('\n')}${enabledProducts.length > 4 ? `\n  // ... ${enabledProducts.length - 4} more items` : ''}
+  },`,
+  )
+  .join('\n')}${enabledProducts.length > 4 ? `\n  // ... ${enabledProducts.length - 4} more items` : ''}
 ];
 
 const result = computeAggregatedAndPriceTotals(items);
-// result.amount_total = ${fmtCents(result.amount_total)}
-// Recurrence breakdown available via result.total_details.breakdown.recurrences`}
+// result.amount_total = ${fmtCents(result.amount_total)}`}
         />
       </div>
     </div>
diff --git a/demo/src/sections/OverviewDemo.tsx b/demo/src/sections/OverviewDemo.tsx
index 7846cfd..2e79e2d 100644
--- a/demo/src/sections/OverviewDemo.tsx
+++ b/demo/src/sections/OverviewDemo.tsx
@@ -1,194 +1,276 @@
 import { CodeBlock } from '../components/CodeBlock';
+import {
+  SolarIllustration,
+  WallboxIllustration,
+  HeatPumpIllustration,
+  SmartHomeIllustration,
+} from '../components/ProductShowcase';
 
 interface OverviewDemoProps {
   onNavigate: (id: string) => void;
 }
 
-const features = [
+const energyProducts = [
   {
-    id: 'per-unit',
-    title: 'Per Unit Pricing',
-    desc: 'Simple price x quantity calculations with tax support',
-    icon: '📦',
-    color: 'bg-blue-50 border-blue-200',
-  },
-  {
-    id: 'tiered-volume',
-    title: 'Tiered Volume',
-    desc: 'Single tier selected based on total quantity',
-    icon: '📊',
-    color: 'bg-indigo-50 border-indigo-200',
-  },
-  {
-    id: 'tiered-graduated',
-    title: 'Tiered Graduated',
-    desc: 'Different rates apply to different quantity ranges',
-    icon: '📈',
-    color: 'bg-purple-50 border-purple-200',
-  },
-  {
-    id: 'tiered-flatfee',
-    title: 'Tiered Flat Fee',
-    desc: 'Fixed fee based on quantity range',
-    icon: '🏷️',
-    color: 'bg-pink-50 border-pink-200',
-  },
-  {
-    id: 'tax',
-    title: 'Tax Handling',
-    desc: 'Inclusive/exclusive tax with multi-rate breakdown',
-    icon: '🧾',
-    color: 'bg-green-50 border-green-200',
-  },
-  {
-    id: 'discounts',
-    title: 'Discounts & Coupons',
-    desc: 'Fixed, percentage, and cashback coupon types',
-    icon: '🎟️',
-    color: 'bg-amber-50 border-amber-200',
-  },
-  {
-    id: 'composite',
-    title: 'Composite Pricing',
-    desc: 'Multi-component bundled price items',
-    icon: '🧩',
-    color: 'bg-cyan-50 border-cyan-200',
-  },
-  {
-    id: 'recurring',
-    title: 'Recurring Billing',
-    desc: 'Billing periods and frequency normalization',
-    icon: '🔄',
-    color: 'bg-teal-50 border-teal-200',
+    id: 'electricity',
+    title: 'Electricity Tariffs',
+    desc: 'Single & dual-tariff pricing with Grundpreis, Arbeitspreis, and smart meter support.',
+    icon: '⚡',
+    gradient: 'gradient-electricity',
+    price: 'from 28.5 ct/kWh',
   },
   {
-    id: 'currency',
-    title: 'Currency & Formatting',
-    desc: 'Multi-currency support with locale-aware formatting',
-    icon: '💱',
-    color: 'bg-emerald-50 border-emerald-200',
+    id: 'gas',
+    title: 'Gas Supply',
+    desc: 'Gas tariffs with CO2 levy, storage levy, and per-kWh work price breakdowns',
+    icon: '🔥',
+    gradient: 'gradient-gas',
+    price: 'from 8.9 ct/kWh',
   },
   {
-    id: 'dynamic-tariff',
-    title: 'Dynamic Tariff',
-    desc: 'Market-based pricing with configurable markup',
-    icon: '⚡',
-    color: 'bg-yellow-50 border-yellow-200',
+    id: 'house-connection',
+    title: 'House Connection',
+    desc: 'Hausanschluss fees with distance-based trench work and multi-utility connections',
+    icon: '🏡',
+    gradient: 'gradient-house',
+    price: 'from EUR 1,850',
   },
   {
-    id: 'getag',
-    title: 'GetAG Energy Pricing',
-    desc: 'German energy operator integration with tiered markups',
-    icon: '🔌',
-    color: 'bg-orange-50 border-orange-200',
+    id: 'non-commodity',
+    title: 'Products & Add-ons',
+    desc: 'Solar, wallboxes, heat pumps, and smart home bundles with service contracts',
+    icon: '☀️',
+    gradient: 'gradient-solar',
+    price: 'Bundles from EUR 899',
   },
 ];
 
-const useCases = [
+const addOnShowcase = [
   {
-    id: 'electricity',
-    title: 'Electricity',
-    desc: 'Single & dual-tariff (HT/NT) electricity pricing with Grundpreis and Arbeitspreis',
-    icon: '⚡',
-    color: 'bg-yellow-50 border-yellow-200',
+    title: 'Solar & Battery',
+    desc: 'Complete PV systems with battery storage and installation',
+    illustration: SolarIllustration,
+    price: 'EUR 12,500',
+    sub: '+ EUR 29.90/mo maintenance',
+    features: ['10 kWp solar system', '10 kWh battery storage', 'Professional installation', 'Maintenance contract'],
   },
   {
-    id: 'gas',
-    title: 'Gas',
-    desc: 'Gas supply tariffs with CO2 levy, gas storage levy, and per-kWh work price',
-    icon: '🔥',
-    color: 'bg-orange-50 border-orange-200',
+    title: 'E-Mobility',
+    desc: 'Wallbox charging solutions for home and fleet',
+    illustration: WallboxIllustration,
+    price: 'EUR 899',
+    sub: '+ EUR 59/mo charging flat rate',
+    features: ['11 kW wallbox', 'Professional installation', 'Smart charging', 'Monthly flat rate'],
   },
   {
-    id: 'house-connection',
-    title: 'House Connection',
-    desc: 'Hausanschluss fees with distance-based trench work and connection services',
-    icon: '🏡',
-    color: 'bg-emerald-50 border-emerald-200',
+    title: 'Heat Pumps',
+    desc: 'Modern heating solutions with smart controls',
+    illustration: HeatPumpIllustration,
+    price: 'EUR 15,800',
+    sub: '+ EUR 39.90/mo service',
+    features: ['Air-to-water system', 'Installation included', 'Smart thermostat', 'Service contract'],
   },
   {
-    id: 'non-commodity',
-    title: 'Non-Commodity',
-    desc: 'Solar panels, wallboxes, heat pumps, and smart home products with service contracts',
-    icon: '📋',
-    color: 'bg-purple-50 border-purple-200',
+    title: 'Smart Home',
+    desc: 'Intelligent energy management and automation',
+    illustration: SmartHomeIllustration,
+    price: 'EUR 249',
+    sub: 'Energy manager from EUR 499',
+    features: ['Smart thermostat', 'Energy monitoring', 'App control', 'Consumption insights'],
   },
 ];
 
+const capabilities = [
+  { id: 'per-unit', title: 'Per Unit', icon: '📦' },
+  { id: 'tiered-volume', title: 'Tiered Volume', icon: '📊' },
+  { id: 'tiered-graduated', title: 'Graduated', icon: '📈' },
+  { id: 'tiered-flatfee', title: 'Flat Fee', icon: '🏷️' },
+  { id: 'tax', title: 'Tax', icon: '🧾' },
+  { id: 'discounts', title: 'Discounts', icon: '🎟️' },
+  { id: 'composite', title: 'Composite', icon: '🧩' },
+  { id: 'recurring', title: 'Recurring', icon: '🔄' },
+  { id: 'currency', title: 'Currency', icon: '💱' },
+  { id: 'dynamic-tariff', title: 'Dynamic', icon: '⚡' },
+  { id: 'getag', title: 'GetAG', icon: '🔌' },
+];
+
 export function OverviewDemo({ onNavigate }: OverviewDemoProps) {
   return (
     <div>
       {/* Hero */}
-      <div className="mb-10">
-        <h1 className="text-4xl font-extrabold text-gray-900 mb-3">
-          epilot Pricing Playground
+      <div className="mb-12">
+        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary-50 text-primary-700 text-xs font-semibold mb-4">
+          <div className="w-1.5 h-1.5 rounded-full bg-primary-500"></div>
+          Interactive Playground
+        </div>
+        <h1 className="text-5xl font-extrabold text-gray-900 mb-4 tracking-tight leading-tight">
+          Energy Pricing,
+          <br />
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-blue-400">
+            Made Simple.
+          </span>
         </h1>
-        <p className="text-lg text-gray-500 max-w-2xl">
-          Interactive playground for <code className="text-sm bg-gray-100 px-1.5 py-0.5 rounded font-mono">@epilot/pricing</code> — a comprehensive
-          pricing calculation engine supporting 6 pricing models, tax handling,
-          discounts, composite pricing, recurring billing, multi-currency formatting, and
-          energy-market integrations. Explore each capability below.
+        <p className="text-lg text-gray-500 max-w-xl leading-relaxed">
+          Configure tariffs, bundle products, and compute prices in real-time. From electricity and gas to solar panels
+          and wallboxes — everything your sales team needs.
         </p>
       </div>
 
-      {/* Stats */}
-      <div className="grid grid-cols-4 gap-4 mb-10">
+      {/* Stats row */}
+      <div className="flex gap-3 mb-12 flex-wrap">
         {[
-          { label: 'Pricing Models', value: '6' },
-          { label: 'Exported Functions', value: '40+' },
-          { label: 'Billing Periods', value: '6' },
-          { label: 'Decimal Precision', value: '12 digits' },
+          { label: 'Pricing Models', value: '6', color: 'bg-blue-50 text-blue-700' },
+          { label: 'Billing Periods', value: '6', color: 'bg-emerald-50 text-emerald-700' },
+          { label: 'Functions', value: '40+', color: 'bg-amber-50 text-amber-700' },
+          { label: 'Decimal Precision', value: '12 digits', color: 'bg-purple-50 text-purple-700' },
         ].map((stat) => (
-          <div key={stat.label} className="card text-center">
-            <p className="text-2xl font-bold text-primary-600">{stat.value}</p>
-            <p className="text-xs text-gray-500 mt-1">{stat.label}</p>
+          <div key={stat.label} className={`stat-pill ${stat.color}`}>
+            <span className="font-extrabold">{stat.value}</span>
+            <span className="opacity-70">{stat.label}</span>
           </div>
         ))}
       </div>
 
-      {/* Use Cases */}
-      <h2 className="text-xl font-bold text-gray-900 mb-4">Energy & Utility Use Cases</h2>
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-        {useCases.map((f) => (
-          <button
-            key={f.id}
-            onClick={() => onNavigate(f.id)}
-            className={`text-left p-5 rounded-xl border ${f.color} hover:shadow-md transition-shadow group`}
-          >
-            <span className="text-2xl">{f.icon}</span>
-            <h3 className="font-semibold text-gray-900 mt-2 group-hover:text-primary-600 transition-colors">
-              {f.title}
-            </h3>
-            <p className="text-sm text-gray-500 mt-1">{f.desc}</p>
+      {/* Energy Products — tariff card grid */}
+      <h2 className="text-2xl font-extrabold text-gray-900 mb-1 tracking-tight">Energy Products</h2>
+      <p className="text-sm text-gray-400 mb-6">Click any card to explore the interactive tariff configurator</p>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-14">
+        {energyProducts.map((p) => (
+          <button key={p.id} onClick={() => onNavigate(p.id)} className="text-left group">
+            <div className="tariff-card hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full flex flex-col">
+              <div className={`${p.gradient} px-5 py-4 text-white`}>
+                <span className="text-2xl">{p.icon}</span>
+                <h3 className="font-bold mt-2 text-base">{p.title}</h3>
+              </div>
+              <div className="p-5 flex-1 flex flex-col">
+                <p className="text-sm text-gray-500 mb-3 leading-relaxed line-clamp-2 min-h-[2.5rem]">{p.desc}</p>
+                <div className="mt-auto">
+                  <p className="text-sm font-extrabold text-gray-900">{p.price}</p>
+                  <p className="text-xs text-primary-600 font-semibold mt-2 group-hover:text-primary-700 transition-colors">
+                    Explore tariff &rarr;
+                  </p>
+                </div>
+              </div>
+            </div>
           </button>
         ))}
       </div>
 
-      {/* Capabilities */}
-      <h2 className="text-xl font-bold text-gray-900 mb-4 mt-10">Capabilities</h2>
-      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
-        {features.map((f) => (
+      {/* Add-on Showcase with illustrations */}
+      <h2 className="text-2xl font-extrabold text-gray-900 mb-1 tracking-tight">Products & Add-ons</h2>
+      <p className="text-sm text-gray-400 mb-6">Complete product bundles your customers can visualize and configure</p>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-14">
+        {addOnShowcase.map((product) => {
+          const Illustration = product.illustration;
+          return (
+            <button key={product.title} onClick={() => onNavigate('non-commodity')} className="text-left group">
+              <div className="showcase-card h-full flex flex-col pt-3">
+                <div className="h-40 overflow-hidden">
+                  <Illustration />
+                </div>
+                <div className="p-5 flex-1 flex flex-col">
+                  <h3 className="font-bold text-gray-900 mb-1">{product.title}</h3>
+                  <p className="text-xs text-gray-400 mb-3 line-clamp-2 min-h-[2rem]">{product.desc}</p>
+                  <p className="text-xl font-extrabold text-gray-900">{product.price}</p>
+                  <p className="text-xs text-emerald-600 font-medium mt-0.5">{product.sub}</p>
+                  <div className="mt-3 space-y-1">
+                    {product.features.slice(0, 3).map((f, i) => (
+                      <div key={i} className="flex items-center gap-1.5 text-[11px] text-gray-500">
+                        <svg className="w-3 h-3 text-emerald-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                        {f}
+                      </div>
+                    ))}
+                  </div>
+                  <p className="text-xs text-primary-600 font-semibold mt-3 group-hover:text-primary-700">
+                    Configure bundle &rarr;
+                  </p>
+                </div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Capabilities strip */}
+      <h2 className="text-2xl font-extrabold text-gray-900 mb-1 tracking-tight">Pricing Capabilities</h2>
+      <p className="text-sm text-gray-400 mb-6">Explore individual pricing models and features</p>
+      <div className="flex flex-wrap gap-2 mb-14">
+        {capabilities.map((c) => (
           <button
-            key={f.id}
-            onClick={() => onNavigate(f.id)}
-            className={`text-left p-5 rounded-xl border ${f.color} hover:shadow-md transition-shadow group`}
+            key={c.id}
+            onClick={() => onNavigate(c.id)}
+            className="flex items-center gap-2 px-4 py-2.5 bg-white rounded-xl border border-gray-100 text-sm font-medium text-gray-600 hover:text-primary-700 hover:border-primary-200 hover:bg-primary-50 transition-all shadow-sm hover:shadow-md"
           >
-            <span className="text-2xl">{f.icon}</span>
-            <h3 className="font-semibold text-gray-900 mt-2 group-hover:text-primary-600 transition-colors">
-              {f.title}
-            </h3>
-            <p className="text-sm text-gray-500 mt-1">{f.desc}</p>
+            <span>{c.icon}</span>
+            {c.title}
           </button>
         ))}
       </div>
 
+      {/* Customer journey visualization */}
+      <div className="card mb-10">
+        <h2 className="text-xl font-extrabold text-gray-900 mb-6 tracking-tight">Customer Journey</h2>
+        <div className="flex items-stretch gap-0 overflow-x-auto pb-2">
+          {[
+            {
+              step: '1',
+              label: 'Browse Products',
+              desc: 'Customer selects tariff or product bundle',
+              icon: '🛒',
+              color: 'bg-blue-50 text-blue-700',
+            },
+            {
+              step: '2',
+              label: 'Configure',
+              desc: 'Adjust consumption, select add-ons, set preferences',
+              icon: '⚙️',
+              color: 'bg-amber-50 text-amber-700',
+            },
+            {
+              step: '3',
+              label: 'Price Calculation',
+              desc: 'Real-time pricing with tax, discounts, recurrences',
+              icon: '💰',
+              color: 'bg-emerald-50 text-emerald-700',
+            },
+            {
+              step: '4',
+              label: 'Order Summary',
+              desc: 'Clear breakdown for customer and sales team',
+              icon: '✅',
+              color: 'bg-purple-50 text-purple-700',
+            },
+          ].map((s, i) => (
+            <div key={s.step} className="flex items-stretch">
+              {i > 0 && (
+                <div className="flex items-center px-2">
+                  <svg className="w-6 h-6 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                </div>
+              )}
+              <div className={`${s.color} rounded-2xl p-5 min-w-[200px] flex-1`}>
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-xl">{s.icon}</span>
+                  <span className="text-[10px] font-bold uppercase tracking-widest opacity-50">Step {s.step}</span>
+                </div>
+                <p className="font-bold text-sm">{s.label}</p>
+                <p className="text-xs opacity-70 mt-1">{s.desc}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
       {/* Quick Start */}
-      <div className="mt-10 grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <CodeBlock
-          title="Install"
-          language="bash"
-          code={`npm install @epilot/pricing`}
-        />
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <CodeBlock title="Install" language="bash" code={`npm install @epilot/pricing`} />
         <CodeBlock
           title="Quick Start"
           code={`import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
@@ -208,36 +290,9 @@ const priceItem = {
 };
 
 const result = computeAggregatedAndPriceTotals([priceItem]);
-// result.amount_total → 24995 (€249.95)`}
+// result.amount_total → 24995 (EUR 249.95)`}
         />
       </div>
-
-      {/* Architecture */}
-      <div className="mt-10 card">
-        <h2 className="text-xl font-bold text-gray-900 mb-4">How It Works</h2>
-        <div className="flex items-center gap-4 text-sm overflow-x-auto pb-2">
-          {[
-            { step: '1', label: 'Price Items', desc: 'Define price, quantity, tax, coupons' },
-            { step: '2', label: 'Compute', desc: 'computeAggregatedAndPriceTotals()' },
-            { step: '3', label: 'Results', desc: 'Subtotals, tax, discounts, recurrences' },
-          ].map((s, i) => (
-            <div key={s.step} className="flex items-center gap-4">
-              {i > 0 && (
-                <svg className="w-6 h-6 text-gray-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                </svg>
-              )}
-              <div className="bg-gray-50 rounded-lg p-4 min-w-[180px]">
-                <div className="w-7 h-7 rounded-full bg-primary-100 text-primary-700 text-xs font-bold flex items-center justify-center mb-2">
-                  {s.step}
-                </div>
-                <p className="font-semibold text-gray-900">{s.label}</p>
-                <p className="text-xs text-gray-500 mt-0.5">{s.desc}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
     </div>
   );
 }
diff --git a/demo/src/sections/PerUnitDemo.tsx b/demo/src/sections/PerUnitDemo.tsx
index d4ee7a0..77c31bb 100644
--- a/demo/src/sections/PerUnitDemo.tsx
+++ b/demo/src/sections/PerUnitDemo.tsx
@@ -1,7 +1,7 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
+import { ResultCard } from '../components/ResultCard';
 import { buildPriceItemDto, fmtCents } from '../helpers';
 
 export function PerUnitDemo() {
@@ -84,11 +84,7 @@ export function PerUnitDemo() {
             </div>
             <div>
               <label className="text-sm font-medium text-gray-700">Currency</label>
-              <select
-                value={currency}
-                onChange={(e) => setCurrency(e.target.value)}
-                className="select-field mt-1"
-              >
+              <select value={currency} onChange={(e) => setCurrency(e.target.value)} className="select-field mt-1">
                 <option value="EUR">EUR</option>
                 <option value="USD">USD</option>
                 <option value="GBP">GBP</option>
@@ -123,38 +119,18 @@ export function PerUnitDemo() {
           <div className="card">
             <h3 className="font-semibold text-gray-900 mb-4">Computed Result</h3>
             <div className="grid grid-cols-2 gap-3">
-              <ResultCard
-                label="Unit Amount (Net)"
-                value={fmtCents(lineItem?.unit_amount, currency)}
-              />
-              <ResultCard
-                label="Unit Amount (Gross)"
-                value={fmtCents(lineItem?.unit_amount_gross, currency)}
-              />
-              <ResultCard
-                label="Subtotal (Net)"
-                value={fmtCents(lineItem?.amount_subtotal, currency)}
-              />
-              <ResultCard
-                label="Total (Gross)"
-                value={fmtCents(lineItem?.amount_total, currency)}
-                highlight
-              />
+              <ResultCard label="Unit Amount (Net)" value={fmtCents(lineItem?.unit_amount, currency)} />
+              <ResultCard label="Unit Amount (Gross)" value={fmtCents(lineItem?.unit_amount_gross, currency)} />
+              <ResultCard label="Subtotal (Net)" value={fmtCents(lineItem?.amount_subtotal, currency)} />
+              <ResultCard label="Total (Gross)" value={fmtCents(lineItem?.amount_total, currency)} highlight />
             </div>
           </div>
 
           <div className="card">
             <h3 className="font-semibold text-gray-900 mb-4">Aggregated Totals</h3>
             <div className="grid grid-cols-3 gap-3">
-              <ResultCard
-                label="Amount Subtotal"
-                value={fmtCents(result.amount_subtotal, currency)}
-              />
-              <ResultCard
-                label="Amount Tax"
-                value={fmtCents(result.amount_tax, currency)}
-                color="amber"
-              />
+              <ResultCard label="Amount Subtotal" value={fmtCents(result.amount_subtotal, currency)} />
+              <ResultCard label="Amount Tax" value={fmtCents(result.amount_tax, currency)} color="amber" />
               <ResultCard
                 label="Amount Total"
                 value={fmtCents(result.amount_total, currency)}
diff --git a/demo/src/sections/RecurringBillingDemo.tsx b/demo/src/sections/RecurringBillingDemo.tsx
index 929041f..3575573 100644
--- a/demo/src/sections/RecurringBillingDemo.tsx
+++ b/demo/src/sections/RecurringBillingDemo.tsx
@@ -1,7 +1,7 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals, normalizeValueToFrequencyUnit } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
+import { ResultCard } from '../components/ResultCard';
 import { buildPriceItemDto, fmtCents } from '../helpers';
 
 const periods = [
@@ -23,8 +23,8 @@ const normFactors: Record<string, Record<string, number>> = {
 export function RecurringBillingDemo() {
   const [unitPrice, setUnitPrice] = useState('29.99');
   const [basePeriod, setBasePeriod] = useState('monthly');
-  const [quantity, setQuantity] = useState(1);
-  const [taxRate, setTaxRate] = useState(19);
+  const [quantity] = useState(1);
+  const [taxRate] = useState(19);
   const [isTaxInclusive, setIsTaxInclusive] = useState(true);
 
   const result = useMemo(() => {
@@ -48,11 +48,7 @@ export function RecurringBillingDemo() {
 
     return periods.map((p) => {
       try {
-        const normalized = normalizeValueToFrequencyUnit(
-          unitPrice,
-          basePeriod as any,
-          p.value as any,
-        );
+        const normalized = normalizeValueToFrequencyUnit(unitPrice, basePeriod as any, p.value as any);
         return {
           period: p.label,
           periodValue: p.value,
@@ -109,8 +105,8 @@ export function RecurringBillingDemo() {
     <div>
       <h1 className="section-title">Recurring Billing</h1>
       <p className="section-desc">
-        Support for one-time and recurring prices with frequency normalization.
-        Convert prices between billing periods automatically.
+        Support for one-time and recurring prices with frequency normalization. Convert prices between billing periods
+        automatically.
       </p>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -136,7 +132,9 @@ export function RecurringBillingDemo() {
                   className="select-field mt-1"
                 >
                   {periods.map((p) => (
-                    <option key={p.value} value={p.value}>{p.label}</option>
+                    <option key={p.value} value={p.value}>
+                      {p.label}
+                    </option>
                   ))}
                 </select>
               </div>
@@ -180,9 +178,7 @@ export function RecurringBillingDemo() {
                 <div
                   key={np.period}
                   className={`flex items-center justify-between p-3 rounded-lg ${
-                    np.isBase
-                      ? 'bg-primary-50 border border-primary-200'
-                      : 'bg-gray-50'
+                    np.isBase ? 'bg-primary-50 border border-primary-200' : 'bg-gray-50'
                   }`}
                 >
                   <span className="text-sm font-medium text-gray-700">
@@ -210,8 +206,8 @@ export function RecurringBillingDemo() {
         {showMixed && (
           <div>
             <p className="text-sm text-gray-500 mb-4">
-              Three items: a one-time setup fee, a monthly subscription, and an annual license.
-              The library groups totals by recurrence type.
+              Three items: a one-time setup fee, a monthly subscription, and an annual license. The library groups
+              totals by recurrence type.
             </p>
 
             <div className="grid grid-cols-3 gap-4 mb-4">
@@ -219,9 +215,7 @@ export function RecurringBillingDemo() {
                 (label, i) => (
                   <div key={i} className="p-3 bg-gray-50 rounded-lg text-center">
                     <p className="text-xs text-gray-500">{label}</p>
-                    <p className="font-bold mt-1">
-                      {fmtCents(mixedResult.items?.[i]?.amount_total)}
-                    </p>
+                    <p className="font-bold mt-1">{fmtCents(mixedResult.items?.[i]?.amount_total)}</p>
                   </div>
                 ),
               )}
diff --git a/demo/src/sections/TaxDemo.tsx b/demo/src/sections/TaxDemo.tsx
index afc65cc..3fb6c9d 100644
--- a/demo/src/sections/TaxDemo.tsx
+++ b/demo/src/sections/TaxDemo.tsx
@@ -1,7 +1,7 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
+import { ResultCard } from '../components/ResultCard';
 import { buildPriceItemDto, fmtCents } from '../helpers';
 
 export function TaxDemo() {
@@ -57,8 +57,8 @@ export function TaxDemo() {
     <div>
       <h1 className="section-title">Tax Handling</h1>
       <p className="section-desc">
-        Compare tax-inclusive vs tax-exclusive pricing side by side. The library handles tax calculations
-        precisely using Dinero.js for decimal arithmetic.
+        Compare tax-inclusive vs tax-exclusive pricing side by side. The library handles tax calculations precisely
+        using Dinero.js for decimal arithmetic.
       </p>
 
       {/* Controls */}
@@ -89,11 +89,7 @@ export function TaxDemo() {
           </div>
           <div>
             <label className="text-sm font-medium text-gray-700">Tax Rate (%)</label>
-            <select
-              value={taxRate}
-              onChange={(e) => setTaxRate(Number(e.target.value))}
-              className="select-field mt-1"
-            >
+            <select value={taxRate} onChange={(e) => setTaxRate(Number(e.target.value))} className="select-field mt-1">
               <option value={0}>0%</option>
               <option value={6}>6%</option>
               <option value={7}>7%</option>
@@ -118,11 +114,16 @@ export function TaxDemo() {
             <ResultCard label="Net per unit (excluding tax)" value={fmtCents(incItem?.unit_amount)} />
             <ResultCard label="Line Subtotal (Net)" value={fmtCents(inclusiveResult.amount_subtotal)} />
             <ResultCard label="Tax Amount" value={fmtCents(inclusiveResult.amount_tax)} color="amber" />
-            <ResultCard label="Line Total (Gross)" value={fmtCents(inclusiveResult.amount_total)} highlight color="green" />
+            <ResultCard
+              label="Line Total (Gross)"
+              value={fmtCents(inclusiveResult.amount_total)}
+              highlight
+              color="green"
+            />
           </div>
           <div className="mt-3 p-3 bg-blue-50 rounded text-xs text-blue-700">
-            The €{unitPrice} price already contains {taxRate}% tax.
-            Net = €{unitPrice} / 1.{String(taxRate).padStart(2, '0')} per unit.
+            The €{unitPrice} price already contains {taxRate}% tax. Net = €{unitPrice} / 1.
+            {String(taxRate).padStart(2, '0')} per unit.
           </div>
         </div>
 
@@ -137,11 +138,16 @@ export function TaxDemo() {
             <ResultCard label="Gross per unit (including tax)" value={fmtCents(excItem?.unit_amount_gross)} />
             <ResultCard label="Line Subtotal (Net)" value={fmtCents(exclusiveResult.amount_subtotal)} />
             <ResultCard label="Tax Amount" value={fmtCents(exclusiveResult.amount_tax)} color="amber" />
-            <ResultCard label="Line Total (Gross)" value={fmtCents(exclusiveResult.amount_total)} highlight color="green" />
+            <ResultCard
+              label="Line Total (Gross)"
+              value={fmtCents(exclusiveResult.amount_total)}
+              highlight
+              color="green"
+            />
           </div>
           <div className="mt-3 p-3 bg-amber-50 rounded text-xs text-amber-700">
-            €{unitPrice} is the net price. {taxRate}% tax is added on top.
-            Gross = €{unitPrice} * 1.{String(taxRate).padStart(2, '0')} per unit.
+            €{unitPrice} is the net price. {taxRate}% tax is added on top. Gross = €{unitPrice} * 1.
+            {String(taxRate).padStart(2, '0')} per unit.
           </div>
         </div>
       </div>
@@ -157,8 +163,7 @@ export function TaxDemo() {
         {showMultiTax && (
           <div>
             <p className="text-sm text-gray-500 mb-4">
-              Two items with different tax rates (19% standard, 7% reduced). The library tracks
-              tax breakdown by rate.
+              Two items with different tax rates (19% standard, 7% reduced). The library tracks tax breakdown by rate.
             </p>
             <div className="grid grid-cols-4 gap-3 mb-4">
               <ResultCard label="Subtotal" value={fmtCents(multiTaxResult.amount_subtotal)} />
@@ -174,7 +179,9 @@ export function TaxDemo() {
                 return (
                   <div key={i} className="flex items-center gap-3 py-1.5 border-b border-gray-100">
                     <span className="badge-amber">{rate}%</span>
-                    <span className="text-gray-600 flex-1">{type} {rate}%</span>
+                    <span className="text-gray-600 flex-1">
+                      {type} {rate}%
+                    </span>
                     <span className="font-medium">{fmtCents(t.amount)}</span>
                   </div>
                 );
diff --git a/demo/src/sections/TieredFlatFeeDemo.tsx b/demo/src/sections/TieredFlatFeeDemo.tsx
index 685b499..43c6c38 100644
--- a/demo/src/sections/TieredFlatFeeDemo.tsx
+++ b/demo/src/sections/TieredFlatFeeDemo.tsx
@@ -1,7 +1,7 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
+import { ResultCard } from '../components/ResultCard';
 import { buildPriceItemDto, fmtCents } from '../helpers';
 
 const defaultTiers = [
@@ -14,7 +14,7 @@ const defaultTiers = [
 export function TieredFlatFeeDemo() {
   const [quantity, setQuantity] = useState(30);
   const [tiers, setTiers] = useState(defaultTiers);
-  const [taxRate, setTaxRate] = useState(19);
+  const [taxRate] = useState(19);
   const [isTaxInclusive, setIsTaxInclusive] = useState(true);
 
   const result = useMemo(() => {
@@ -46,8 +46,8 @@ export function TieredFlatFeeDemo() {
     <div>
       <h1 className="section-title">Tiered Flat Fee</h1>
       <p className="section-desc">
-        A single fixed fee is charged based on the quantity range. Unlike volume pricing,
-        the fee does <strong>not</strong> multiply by quantity.
+        A single fixed fee is charged based on the quantity range. Unlike volume pricing, the fee does{' '}
+        <strong>not</strong> multiply by quantity.
       </p>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -85,9 +85,7 @@ export function TieredFlatFeeDemo() {
                         className="input-field w-28"
                       />
                     </td>
-                    <td className="py-2">
-                      {idx === activeTierIdx && <span className="badge-green">Selected</span>}
-                    </td>
+                    <td className="py-2">{idx === activeTierIdx && <span className="badge-green">Selected</span>}</td>
                   </tr>
                 ))}
               </tbody>
@@ -140,9 +138,7 @@ export function TieredFlatFeeDemo() {
                     <span className={`text-lg font-bold ${isActive ? 'text-green-600' : 'text-gray-400'}`}>
                       €{tier.flat_fee_amount_decimal}
                     </span>
-                    {isActive && (
-                      <span className="ml-2 text-xs text-green-600 font-medium">← Your plan</span>
-                    )}
+                    {isActive && <span className="ml-2 text-xs text-green-600 font-medium">← Your plan</span>}
                   </div>
                 );
               })}
diff --git a/demo/src/sections/TieredGraduatedDemo.tsx b/demo/src/sections/TieredGraduatedDemo.tsx
index c6c26b9..ad4fb66 100644
--- a/demo/src/sections/TieredGraduatedDemo.tsx
+++ b/demo/src/sections/TieredGraduatedDemo.tsx
@@ -1,7 +1,7 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
-import { ResultCard } from '../components/ResultCard';
+import { useState, useMemo } from 'react';
 import { CodeBlock } from '../components/CodeBlock';
+import { ResultCard } from '../components/ResultCard';
 import { buildPriceItemDto, fmtCents } from '../helpers';
 
 const defaultTiers = [
@@ -76,8 +76,8 @@ export function TieredGraduatedDemo() {
     <div>
       <h1 className="section-title">Tiered Graduated Pricing</h1>
       <p className="section-desc">
-        Units are spread across tiers. Each tier charges its own rate for the units within its range.
-        This is the "graduated" model used by many SaaS platforms.
+        Units are spread across tiers. Each tier charges its own rate for the units within its range. This is the
+        "graduated" model used by many SaaS platforms.
       </p>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -184,19 +184,10 @@ export function TieredGraduatedDemo() {
             <div className="grid grid-cols-2 gap-3">
               <ResultCard label="Subtotal (Net)" value={fmtCents(result.amount_subtotal)} />
               <ResultCard label="Tax" value={fmtCents(result.amount_tax)} color="amber" />
-              <ResultCard
-                label="Total (Gross)"
-                value={fmtCents(result.amount_total)}
-                highlight
-                color="green"
-              />
+              <ResultCard label="Total (Gross)" value={fmtCents(result.amount_total)} highlight color="green" />
               <ResultCard
                 label="Avg Price/Unit"
-                value={
-                  quantity > 0
-                    ? fmtCents(Math.round((result.amount_total ?? 0) / quantity))
-                    : '-'
-                }
+                value={quantity > 0 ? fmtCents(Math.round((result.amount_total ?? 0) / quantity)) : '-'}
                 color="blue"
               />
             </div>
diff --git a/demo/src/sections/TieredVolumeDemo.tsx b/demo/src/sections/TieredVolumeDemo.tsx
index 7605d64..0660a6e 100644
--- a/demo/src/sections/TieredVolumeDemo.tsx
+++ b/demo/src/sections/TieredVolumeDemo.tsx
@@ -1,8 +1,8 @@
-import { useState, useMemo } from 'react';
 import { computeAggregatedAndPriceTotals } from '@epilot/pricing';
+import { useState, useMemo } from 'react';
+import { CodeBlock } from '../components/CodeBlock';
 import { ResultCard } from '../components/ResultCard';
 import { TierChart } from '../components/TierChart';
-import { CodeBlock } from '../components/CodeBlock';
 import { buildPriceItemDto, fmtCents } from '../helpers';
 
 const defaultTiers = [
@@ -15,7 +15,7 @@ const defaultTiers = [
 export function TieredVolumeDemo() {
   const [quantity, setQuantity] = useState(25);
   const [tiers, setTiers] = useState(defaultTiers);
-  const [taxRate, setTaxRate] = useState(19);
+  const [taxRate] = useState(19);
   const [isTaxInclusive, setIsTaxInclusive] = useState(true);
 
   const result = useMemo(() => {
@@ -65,7 +65,8 @@ export function TieredVolumeDemo() {
     <div>
       <h1 className="section-title">Tiered Volume Pricing</h1>
       <p className="section-desc">
-        A single tier is selected based on total quantity. The selected tier's unit price applies to <strong>all</strong> units.
+        A single tier is selected based on total quantity. The selected tier's unit price applies to{' '}
+        <strong>all</strong> units.
       </p>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -104,9 +105,7 @@ export function TieredVolumeDemo() {
                         className="input-field w-24"
                       />
                     </td>
-                    <td className="py-2">
-                      {idx === activeTierIdx && <span className="badge-blue">Active</span>}
-                    </td>
+                    <td className="py-2">{idx === activeTierIdx && <span className="badge-blue">Active</span>}</td>
                   </tr>
                 ))}
               </tbody>
@@ -158,17 +157,14 @@ export function TieredVolumeDemo() {
           <div className="card">
             <h3 className="font-semibold text-gray-900 mb-3">Computed Result</h3>
             <div className="grid grid-cols-2 gap-3">
-              <ResultCard
-                label="Unit Price (selected tier)"
-                value={fmtCents(lineItem?.unit_amount)}
-              />
+              <ResultCard label="Unit Price (selected tier)" value={fmtCents(lineItem?.unit_amount)} />
               <ResultCard label="Quantity" value={quantity} />
               <ResultCard label="Subtotal (Net)" value={fmtCents(result.amount_subtotal)} />
               <ResultCard label="Total (Gross)" value={fmtCents(result.amount_total)} highlight color="green" />
             </div>
             <div className="mt-3 p-3 bg-gray-50 rounded-lg text-xs text-gray-500">
-              <strong>How it works:</strong> With quantity {quantity}, tier {activeTierIdx + 1} is selected
-              ({tiers[activeTierIdx]?.unit_amount_decimal}/unit). All {quantity} units use this price.
+              <strong>How it works:</strong> With quantity {quantity}, tier {activeTierIdx + 1} is selected (
+              {tiers[activeTierIdx]?.unit_amount_decimal}/unit). All {quantity} units use this price.
             </div>
           </div>
         </div>
diff --git a/demo/tsconfig.tsbuildinfo b/demo/tsconfig.tsbuildinfo
new file mode 100644
index 0000000..328de2a
--- /dev/null
+++ b/demo/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/helpers.ts","./src/main.tsx","./src/components/codeblock.tsx","./src/components/resultcard.tsx","./src/components/tierchart.tsx","./src/sections/compositepricedemo.tsx","./src/sections/currencydemo.tsx","./src/sections/discountdemo.tsx","./src/sections/dynamictariffdemo.tsx","./src/sections/electricitydemo.tsx","./src/sections/gasdemo.tsx","./src/sections/getagdemo.tsx","./src/sections/houseconnectiondemo.tsx","./src/sections/noncommoditydemo.tsx","./src/sections/overviewdemo.tsx","./src/sections/perunitdemo.tsx","./src/sections/recurringbillingdemo.tsx","./src/sections/taxdemo.tsx","./src/sections/tieredflatfeedemo.tsx","./src/sections/tieredgraduateddemo.tsx","./src/sections/tieredvolumedemo.tsx"],"version":"5.9.3"}
\ No newline at end of file