polish: fix padding and spacing across all sections to match Pencil design

- FeatureCard: px-7 pt-8 pb-8 (design: padding [32,28]), h-full for equal heights
- HeroSection: py-20 on mobile, gap-20 between columns, screenshot 380px
- PrivacyBanner: py-14, gap-20, stat items min-w-[100px]
- SeeItLiveSection: py-24, max-w-[640px] header, block img
- FeaturesSection: gap-[72px] section, flex wrapper for equal-height cards
- ScreenshotsSection: lg:h-[340px] images, px-6 py-5 info, gap-2
- HowItWorksSection: gap-20 columns, gap-10 steps, divide-y billing items, p-10 card
- SupportSection: py-24, gap-16, flex wrappers for equal-height cards
- ContactSection: py-20, gap-20, p-9 form card, gap-5 fields
- AppFooter: pt-14 pb-7, border-b [#1E293B], pt-5 bottom bar

src/components/FeatureCard.vue

@@ -11,19 +11,18 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex flex-col gap-3.5 bg-[#F8FAFC] border border-[#E2E8F0] rounded-[14px] p-7 pt-8">
-    <!-- Icon box -->
+  <!-- Design: cornerRadius 14, padding [32, 28], gap 14 -->
+  <div class="flex flex-col gap-3.5 bg-[#F8FAFC] border border-[#E2E8F0] rounded-2xl px-7 pt-8 pb-8 h-full">
+    <!-- Icon box: 44×44, cornerRadius 10 -->
     <div
       class="w-11 h-11 rounded-[10px] flex items-center justify-center shrink-0"
       :style="{ backgroundColor: iconBg }"
     >
       <component :is="icon" :size="22" :stroke-width="1.75" :style="{ color: iconColor }" />
     </div>
-
-    <!-- Title -->
+    <!-- Title: 16px semibold -->
     <h3 class="text-[#0F172A] font-semibold text-base leading-snug">{{ title }}</h3>
-
-    <!-- Description -->
+    <!-- Description: 13px, lineHeight 1.65 -->
     <p class="text-[#64748B] text-[13px] leading-[1.65]">{{ description }}</p>
   </div>
 </template>