commacare with prime & prime lite

src/lib/components/Grid.svelte

@@ -24,7 +24,7 @@
     --align-items: {alignItems};
     --column-gap: {columnGap};
     --row-gap: {rowGap};
-    --wrapped-columns: {wrapMode === 'single' ? 1 : (wrapMode === 'half' ? Math.floor(columns / 2) : columns)};
+    --wrapped-columns: {wrapMode === 'single' ? 1 : (wrapMode === 'double' ? 2 : (wrapMode === 'half' ? Math.floor(columns / 2) : columns))};
     --template-columns: {templateColumns};
 
     --lg-column-gap: {lgColumnGap ?? columnGap};

src/lib/constants/faq.svelte

@@ -308,7 +308,7 @@
               With prime ($24/mo), domestic data is included.
             </p>
             <p>
-              With prime lite ($10/mo), no SIM card or cellular service is provided. You can choose to bring your own SIM card for the full prime experience.
+              With prime lite ($14/mo), no SIM card or cellular service is provided. You can choose to bring your own SIM card for the full prime experience.
             </p>
             <p>
               Note: your own SIM may require configuration to work with your comma device. We do not offer troubleshooting for third party data service.
@@ -344,6 +344,22 @@
               <li>You can sign back up at any time.</li>
             </ul>
           `
+        }, {
+          question: 'What is commacare?',
+          answer: `
+            <p>
+              commacare extends your comma four's warranty for an additional year beyond the standard one-year warranty, giving you two years of total coverage.
+            </p>
+            <p>
+              We've made commacare simple and straightforward:
+            </p>
+            <ul>
+              <li>commacare is included automatically with your comma prime ($24/mo) or prime lite ($14/mo) subscription.</li>
+              <li>You must start your prime subscription within the first 30 days of receiving your comma four to be eligible for commacare.</li>
+              <li>If you cancel your prime subscription, your commacare warranty ends immediately and cannot be resumed. The standard warranty terms will continue to apply for any remaining time in the first year.</li>
+              <li>commacare provides the same coverage as the standard one-year warranty. It does not cover theft, loss, or accidental damage.</li>
+            </ul>
+          `
         }, {
           question: 'I installed my own SIM card, but it\'s not working.',
           answer: `

src/routes/connect/+page.svelte

@@ -14,6 +14,7 @@
   import MarkerIcon from "$lib/icons/features/marker.png";
   import SnapshotIcon from "$lib/icons/features/snapshot.png";
   import CommandLineIcon from "$lib/icons/features/command-line.svg?raw";
+  import CommacareIcon from "$lib/icons/features/commacare.svg?raw";
   import CheckmarkIcon from "$lib/icons/ui/checkmark.svg?raw";
   import CloseIcon from "$lib/icons/ui/close.svg?raw";
 </script>
@@ -37,12 +38,13 @@
     </div>
 
     <div class="features-banner">
-      <Grid columns={5} columnGap="2rem" size="medium">
+      <Grid columns={6} wrapMode="double" columnGap="2rem" size="medium">
         <div class="icon">{@html RecordingsIcon}</div>
         <div class="icon"><img src={TwentyFourSevenIcon} loading="lazy" alt=""></div>
         <div class="icon"><img src={MarkerIcon} loading="lazy" alt=""></div>
         <div class="icon"><img src={SnapshotIcon} loading="lazy" alt=""></div>
         <div class="icon">{@html CommandLineIcon}</div>
+        <div class="icon">{@html CommacareIcon}</div>
       </Grid>
     </div>
 
@@ -142,6 +144,23 @@
           <div class="cross">{@html CloseIcon}</div>
         </div>
       </div>
+      <div class="row">
+        <div class="feature-overview">
+          <div class="icon">{@html CommacareIcon}</div>
+          <div>
+            <hgroup>
+              <div>commacare</div>
+              <span class="muted">Extend your comma four's standard one year warranty for an additional year. <a class="muted-link" href="#what-is-commacare">See Terms</a></span>
+            </hgroup>
+          </div>
+        </div>
+        <div class="content">
+          <div class="check">{@html CheckmarkIcon}</div>
+        </div>
+        <div class="content">
+          <div class="cross">{@html CloseIcon}</div>
+        </div>
+      </div>
     </div>
   </div>
 </section>
@@ -168,7 +187,7 @@
       </div>
       <div class="price-card">
         <div><Badge style="light" display="inline">Subscription</Badge><Badge style="dark" display="inline">Lite</Badge></div>
-        <span>$10/mo.</span>
+        <span>$14/mo.</span>
         <div class="muted">supply your own SIM card<br>(no data included)</div>
         <div class="muted">*works internationally</div>
       </div>