Make email receipt sections more compact

Carbon Offset Distribution section:
- Remove "Carbon Offset" subheader from each project
- Remove colored dots next to project names
- Reduce padding from 30px to 20px
- Reduce title margin from 24px to 16px
- Reduce item padding from 14px to 10px
- Reduce spacing between items from 12px to 8px

Your Impact section:
- Reduce padding from 32px to 20px
- Reduce title font size from 26px to 22px
- Reduce subtitle margin from 28px to 16px
- Reduce card padding from 20px to 14px
- Reduce icon size from 36px to 30px
- Reduce value font size from 28px to 24px
- Reduce grid gap from 16px to 12px
- Reduce footer note margin from 20px to 12px

Overall more compact layout while maintaining readability.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

server/templates/receipt.hbs

@@ -218,85 +218,79 @@
     }
     .comparisons {
       background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
-      border-radius: 16px;
-      padding: 32px;
-      margin: 30px 0;
+      border-radius: 12px;
+      padding: 20px;
+      margin: 24px 0;
       color: white;
     }
     .comparisons-title {
-      font-size: 26px;
+      font-size: 22px;
       font-weight: bold;
       text-align: center;
-      margin: 0 0 10px 0;
+      margin: 0 0 6px 0;
       color: #ffffff !important;
     }
     .comparisons-subtitle {
       text-align: center;
       color: rgba(255, 255, 255, 0.8);
-      font-size: 14px;
-      margin-bottom: 28px;
+      font-size: 13px;
+      margin-bottom: 16px;
     }
     .comparisons-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      gap: 16px;
+      gap: 12px;
     }
     .comparison-card {
       background: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 12px;
-      padding: 20px;
+      border-radius: 10px;
+      padding: 14px;
       text-align: center;
     }
     .comparison-icon {
-      font-size: 36px;
-      margin-bottom: 12px;
+      font-size: 30px;
+      margin-bottom: 8px;
     }
     .comparison-value {
-      font-size: 28px;
+      font-size: 24px;
       font-weight: bold;
       color: #ffffff;
-      margin-bottom: 4px;
+      margin-bottom: 3px;
     }
     .comparison-unit {
-      font-size: 12px;
+      font-size: 11px;
       color: #a7f3d0;
-      margin-bottom: 12px;
+      margin-bottom: 8px;
     }
     .comparison-label {
-      font-size: 13px;
+      font-size: 12px;
       color: rgba(255, 255, 255, 0.9);
-      line-height: 1.4;
+      line-height: 1.3;
     }
     .portfolio-section {
-      margin: 30px 0;
-      padding: 30px;
+      margin: 24px 0;
+      padding: 20px;
       background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
-      border-radius: 16px;
+      border-radius: 12px;
     }
     .portfolio-title {
-      font-size: 22px;
+      font-size: 20px;
       font-weight: bold;
       color: #065f46;
       text-align: center;
-      margin: 0 0 24px 0;
+      margin: 0 0 16px 0;
     }
     .project-item {
       display: flex;
       align-items: center;
-      padding: 14px;
+      padding: 10px 12px;
       background-color: white;
-      border-radius: 10px;
-      margin-bottom: 12px;
+      border-radius: 8px;
+      margin-bottom: 8px;
       border-left: 4px solid;
     }
-    .project-color {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      margin-right: 12px;
-    }
     .project-info {
       flex: 1;
     }
@@ -304,16 +298,11 @@
       font-weight: 600;
       color: #1e293b;
       font-size: 14px;
-      margin-bottom: 4px;
-    }
-    .project-type {
-      font-size: 12px;
-      color: #64748b;
     }
     .project-percentage {
       font-weight: bold;
       color: #047857;
-      font-size: 16px;
+      font-size: 15px;
     }
     .footer {
       background-color: #f8fafc;
@@ -419,15 +408,13 @@
       {{#if projects}}
       <div class="portfolio-section">
         <h3 class="portfolio-title">Your Carbon Offset Distribution</h3>
-        <p style="text-align: center; color: #065f46; margin-bottom: 20px; font-size: 14px;">
+        <p style="text-align: center; color: #065f46; margin-bottom: 12px; font-size: 13px;">
           Your {{tons}} tons of CO₂ offsets are distributed across these verified projects:
         </p>
         {{#each projects}}
         <div class="project-item" style="border-left-color: {{this.color}}">
-          <div class="project-color" style="background-color: {{this.color}}"></div>
           <div class="project-info">
             <div class="project-name">{{this.name}}</div>
-            <div class="project-type">{{this.type}}</div>
           </div>
           <div class="project-percentage">{{this.percentage}}%</div>
         </div>
@@ -450,7 +437,7 @@
           </div>
           {{/each}}
         </div>
-        <p style="text-align: center; font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 20px; margin-bottom: 0;">
+        <p style="text-align: center; font-size: 10px; color: rgba(255,255,255,0.6); margin-top: 12px; margin-bottom: 0;">
           Equivalencies calculated using EPA 2024, DEFRA 2024, and IMO 2024 verified conversion factors.
         </p>
       </div>