fix pricing cards: equal height, proportionate text, responsive scaling

Author: RedGridTactical

docs/mgrs.html

@@ -244,7 +244,7 @@ <h3>SAR &amp; First Responders</h3>
   <section class="section fade-in" aria-label="Pricing" style="background: var(--bg-secondary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);">
     <div class="container">
       <h2 class="section-title text-center mb-4">Pricing</h2>
-      <div class="pricing-grid" style="max-width: 700px; margin: 0 auto;">
+      <div class="pricing-grid" style="max-width: 1000px; margin: 0 auto;">
         <div class="price-card">
           <div class="tier">Free</div>
           <div class="amount">$0</div>
@@ -274,7 +274,9 @@ <h2 class="section-title text-center mb-4">Pricing</h2>
           <div class="amount">$29.99</div>
           <div class="period">per year &mdash; save 37%</div>
           <ul>
-            <li>Everything in Pro</li>
+            <li>All 10 tools, all 6 reports</li>
+            <li>Offline maps + Meshtastic mesh</li>
+            <li>All themes, unlimited waypoints</li>
             <li>Best value</li>
             <li>Support development</li>
           </ul>
@@ -284,7 +286,9 @@ <h2 class="section-title text-center mb-4">Pricing</h2>
           <div class="amount">$149.99</div>
           <div class="period">one-time purchase</div>
           <ul>
-            <li>Everything in Pro</li>
+            <li>All 10 tools, all 6 reports</li>
+            <li>Offline maps + Meshtastic mesh</li>
+            <li>All themes, unlimited waypoints</li>
             <li>Pay once, own forever</li>
             <li>All future updates included</li>
           </ul>

docs/styles.css

@@ -567,6 +567,9 @@ ul, ol {
   border-radius: var(--radius-md);
   padding: 32px 24px;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .price-card.featured {
@@ -575,21 +578,22 @@ ul, ol {
 }
 
 .price-card .tier {
-  font-size: 0.8rem;
+  font-size: clamp(0.7rem, 2vw, 0.8rem);
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--text-secondary);
   margin-bottom: 8px;
 }
 
 .price-card .amount {
-  font-size: 2.5rem;
+  font-size: clamp(1.8rem, 5vw, 2.5rem);
   font-weight: 800;
   color: var(--text-primary);
+  white-space: nowrap;
 }
 
 .price-card .period {
-  font-size: 0.85rem;
+  font-size: clamp(0.75rem, 2vw, 0.85rem);
   color: var(--text-muted);
   margin-bottom: 16px;
 }
@@ -598,11 +602,13 @@ ul, ol {
   list-style: none;
   padding: 0;
   text-align: left;
+  flex: 1;
+  width: 100%;
 }
 
 .price-card li {
-  padding: 8px 0;
-  font-size: 0.9rem;
+  padding: 6px 0;
+  font-size: clamp(0.78rem, 2vw, 0.9rem);
   color: var(--text-secondary);
 }