From 2134253660895076a7a5f21e1b5ee95b68ac4b69 Mon Sep 17 00:00:00 2001
From: Shane Smiskol <shane@smiskol.com>
Date: Mon, 24 Nov 2025 18:45:42 -0800
Subject: [PATCH 01/12] looks decent

---
 .../HarnessSelector/HarnessSelector.svelte    |  2 +-
 .../ProductDescriptions/CommaFour.svelte      | 23 +++++++++++++++++++
 src/lib/constants/vehicles.js                 |  2 +-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte
index 0afa38f7..53a89d8b 100644
--- a/src/lib/components/HarnessSelector/HarnessSelector.svelte
+++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte
@@ -69,7 +69,7 @@
   let inputValue = "";
   let inputRef;
 
-  $: filteredItems = $harnesses.filter(item => 
+  $: filteredItems = $harnesses.filter(item =>
     normalizeDiacritics(item.car.toLowerCase()).match(normalizeDiacritics(inputValue.toLowerCase()))
   );
 
diff --git a/src/lib/components/ProductDescriptions/CommaFour.svelte b/src/lib/components/ProductDescriptions/CommaFour.svelte
index a018338c..e4dd9fbf 100644
--- a/src/lib/components/ProductDescriptions/CommaFour.svelte
+++ b/src/lib/components/ProductDescriptions/CommaFour.svelte
@@ -116,6 +116,15 @@
       showNoHarnessOption={true}
     >
     </HarnessSelector>
+    <div class="trade-in">
+      <div class="title">
+      Trade-in
+      </div>
+      <div class="description">
+        Get $250 credit when you trade in your old comma device. Any comma device, in any condition.
+        <a href="/shop/comma-four-trade-in">Instructions and Terms.</a>
+      </div>
+    </div>
     <CheckboxCard title="$250 credit with trade-in" checked={tradeInChecked} onToggle={handleTradeInToggle}>
       Get $250 credit when you trade in your old comma device. Any comma device, in any condition.
       <a href="/shop/comma-four-trade-in">Instructions and Terms</a>
@@ -206,6 +215,20 @@
     margin: 1rem 0;
   }
 
+  .trade-in {
+    & .title {
+      margin-top: 1rem;
+      font-size: 1.5rem;
+      font-weight: 600;
+    }
+
+    & .description {
+      font-size: 1rem;
+      color: #000000A6;
+    }
+
+  }
+
   .harness-price {
     display: flex;
   }
diff --git a/src/lib/constants/vehicles.js b/src/lib/constants/vehicles.js
index 50a064b3..c515b10b 100644
--- a/src/lib/constants/vehicles.js
+++ b/src/lib/constants/vehicles.js
@@ -3,4 +3,4 @@ import vehicles from '$lib/vehicles.json'
 export const vehicleCountText = `${Math.round(Object.values(vehicles).reduce((sum, list) => sum + list.length, 0) / 25) * 25}+`;
 
 // Harness selection options
-export const NO_HARNESS_OPTION = { car: "I already have a car harness" };
+export const NO_HARNESS_OPTION = { car: "I already have a car harness (-$50)" };

From 525b803c855cbf572f97126dcbe70da743055e6b Mon Sep 17 00:00:00 2001
From: Shane Smiskol <shane@smiskol.com>
Date: Mon, 24 Nov 2025 19:07:15 -0800
Subject: [PATCH 02/12] button group

---
 src/lib/components/ButtonGroup.svelte         | 62 +++++++++++++++++++
 .../ProductDescriptions/CommaFour.svelte      | 19 ++++--
 2 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/ButtonGroup.svelte

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
new file mode 100644
index 00000000..c44f5767
--- /dev/null
+++ b/src/lib/components/ButtonGroup.svelte
@@ -0,0 +1,62 @@
+<script>
+  import NoteCard from "./NoteCard.svelte";
+
+  export let options = []; // Array of two options: [{value: 'option1', label: 'Label 1'}, {value: 'option2', label: 'Label 2'}]
+  export let value = null; // Currently selected value
+  export let onSelect; // callback function when selection changes
+
+  const handleSelect = (selectedValue) => {
+    console.log("Selected value:", selectedValue);
+    value = selectedValue;
+    onSelect && onSelect(selectedValue);
+  };
+
+  $: option1 = options[0] || {};
+  $: option2 = options[1] || {};
+</script>
+
+<div class="button-group">
+  <label class="button" class:checked={value === option1.value} on:click={() => handleSelect(option1.value)}>
+    <NoteCard title={option1.label || ''}>
+      <div slot="icon"></div>
+      <slot name="option1-content"></slot>
+    </NoteCard>
+  </label>
+
+  <label class="button" class:checked={value === option2.value} on:click={() => handleSelect(option2.value)}>
+    <NoteCard title={option2.label || ''}>
+      <div slot="icon"></div>
+      <slot name="option2-content"></slot>
+    </NoteCard>
+  </label>
+</div>
+
+<style>
+  .button-group {
+    display: flex;
+    align-items: stretch;
+    gap: 1rem;
+    margin: 1rem 0 0;
+  }
+
+  .button {
+    cursor: pointer;
+    display: flex;
+    flex: 1;
+    color: green;
+  }
+
+  .button :global(.card) {
+    flex: 1;
+    display: flex;
+    margin: 0;
+  }
+
+  .button.checked :global(.card) {
+    background-color: #86ff4e;
+  }
+
+  .button.checked :global(.card hgroup span) {
+    color: black;
+  }
+</style>
diff --git a/src/lib/components/ProductDescriptions/CommaFour.svelte b/src/lib/components/ProductDescriptions/CommaFour.svelte
index e4dd9fbf..fca553fb 100644
--- a/src/lib/components/ProductDescriptions/CommaFour.svelte
+++ b/src/lib/components/ProductDescriptions/CommaFour.svelte
@@ -2,6 +2,7 @@
   import Product from "$lib/components/Product.svelte";
   import NoteCard from "$lib/components/NoteCard.svelte";
   import CheckboxCard from "$lib/components/CheckboxCard.svelte";
+  import ButtonGroup from "$lib/components/ButtonGroup.svelte";
   import Accordion from "$lib/components/Accordion.svelte";
   import Badge from "$lib/components/Badge.svelte";
   import HarnessSelector from "$lib/components/HarnessSelector/HarnessSelector.svelte";
@@ -19,6 +20,7 @@
   import { onMount } from 'svelte';
   import { getProduct } from '$lib/utils/shopify';
   import { products as productsData } from '$lib/data/products.js';
+  import Button from "$lib/components/Button.svelte";
 
   export let product;
   let additionalProductIds = [];
@@ -116,6 +118,7 @@
       showNoHarnessOption={true}
     >
     </HarnessSelector>
+<!--    <hr/>-->
     <div class="trade-in">
       <div class="title">
       Trade-in
@@ -125,10 +128,18 @@
         <a href="/shop/comma-four-trade-in">Instructions and Terms.</a>
       </div>
     </div>
-    <CheckboxCard title="$250 credit with trade-in" checked={tradeInChecked} onToggle={handleTradeInToggle}>
-      Get $250 credit when you trade in your old comma device. Any comma device, in any condition.
-      <a href="/shop/comma-four-trade-in">Instructions and Terms</a>
-    </CheckboxCard>
+
+    <ButtonGroup options={[
+      {"label": "Add trade-in ($250 credit)", "value": "trade-in"},
+      {"label": "No trade-in", "value": "no trade-in"},
+      ]} onSelect={(val) => console.log(val)}>
+    </ButtonGroup>
+<!--    <hr/>-->
+
+<!--    <CheckboxCard title="$250 credit with trade-in" checked={tradeInChecked} onToggle={handleTradeInToggle}>-->
+<!--      Get $250 credit when you trade in your old comma device. Any comma device, in any condition.-->
+<!--      <a href="/shop/comma-four-trade-in">Instructions and Terms</a>-->
+<!--    </CheckboxCard>-->
   </span>
 
   <div slot="notes">

From 0b234e6e08343b8340465866fd7119d0258e6263 Mon Sep 17 00:00:00 2001
From: Shane Smiskol <shane@smiskol.com>
Date: Mon, 24 Nov 2025 19:08:30 -0800
Subject: [PATCH 03/12] unselect

---
 src/lib/components/ButtonGroup.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
index c44f5767..6bbac993 100644
--- a/src/lib/components/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup.svelte
@@ -7,8 +7,12 @@
 
   const handleSelect = (selectedValue) => {
     console.log("Selected value:", selectedValue);
-    value = selectedValue;
-    onSelect && onSelect(selectedValue);
+    if (value === selectedValue) {
+      value = null;
+    } else {
+      value = selectedValue;
+    }
+    onSelect && onSelect(value);
   };
 
   $: option1 = options[0] || {};

From c16fe3d8ab3741a8b041de1257caa5d844c73a67 Mon Sep 17 00:00:00 2001
From: Shane Smiskol <shane@smiskol.com>
Date: Mon, 24 Nov 2025 19:15:27 -0800
Subject: [PATCH 04/12] style

---
 src/lib/components/ButtonGroup.svelte | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
index 6bbac993..3da65947 100644
--- a/src/lib/components/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup.svelte
@@ -20,19 +20,19 @@
 </script>
 
 <div class="button-group">
-  <label class="button" class:checked={value === option1.value} on:click={() => handleSelect(option1.value)}>
+  <button class="button" class:checked={value === option1.value} on:click={() => handleSelect(option1.value)}>
     <NoteCard title={option1.label || ''}>
       <div slot="icon"></div>
       <slot name="option1-content"></slot>
     </NoteCard>
-  </label>
+  </button>
 
-  <label class="button" class:checked={value === option2.value} on:click={() => handleSelect(option2.value)}>
+  <button class="button" class:checked={value === option2.value} on:click={() => handleSelect(option2.value)}>
     <NoteCard title={option2.label || ''}>
       <div slot="icon"></div>
       <slot name="option2-content"></slot>
     </NoteCard>
-  </label>
+  </button>
 </div>
 
 <style>
@@ -48,6 +48,11 @@
     display: flex;
     flex: 1;
     color: green;
+    border: none;
+    background: none;
+    padding: 0;
+    font: inherit;
+    text-align: inherit;
   }
 
   .button :global(.card) {
@@ -57,7 +62,7 @@
   }
 
   .button.checked :global(.card) {
-    background-color: #86ff4e;
+    background-color: var(--color-accent);
   }
 
   .button.checked :global(.card hgroup span) {

From 64300e15ab120c686c55ba425c48487069c9f83a Mon Sep 17 00:00:00 2001
From: Shane Smiskol <shane@smiskol.com>
Date: Mon, 24 Nov 2025 19:18:29 -0800
Subject: [PATCH 05/12] block

---
 src/lib/components/ButtonGroup.svelte         |  2 +-
 .../ProductDescriptions/CommaFour.svelte      | 28 +++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
index 3da65947..30aaa4cd 100644
--- a/src/lib/components/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup.svelte
@@ -6,12 +6,12 @@
   export let onSelect; // callback function when selection changes
 
   const handleSelect = (selectedValue) => {
-    console.log("Selected value:", selectedValue);
     if (value === selectedValue) {
       value = null;
     } else {
       value = selectedValue;
     }
+    console.log("Selected value:", value);
     onSelect && onSelect(value);
   };
 
diff --git a/src/lib/components/ProductDescriptions/CommaFour.svelte b/src/lib/components/ProductDescriptions/CommaFour.svelte
index fca553fb..fc955dbc 100644
--- a/src/lib/components/ProductDescriptions/CommaFour.svelte
+++ b/src/lib/components/ProductDescriptions/CommaFour.svelte
@@ -50,6 +50,7 @@
   let selectedHarness = null;
   let tradeInVariantId = null;
   let tradeInChecked = false;
+  let tradeInValue = null;
   let backordered = null;
 
   const updateAdditionalProductIds = () => {
@@ -62,20 +63,37 @@
     }
   }
 
+  const updateDisableBuyButtonText = () => {
+    if (!selectedHarness) {
+      disableBuyButtonText = "SELECT YOUR CAR";
+    } else if (tradeInValue === null) {
+      disableBuyButtonText = "SELECT TRADE IN";
+    } else if (selectedHarness === NO_HARNESS_OPTION) {
+      disableBuyButtonText = null;
+    } else {
+      disableBuyButtonText = null;
+    }
+  }
+
   const handleHarnessSelection = (value) => {
     selectedHarness = value;
     updateAdditionalProductIds();
     if (value === NO_HARNESS_OPTION) {
       backordered = null;
-      disableBuyButtonText = null;
     } else if (value) {
       backordered = value.currentlyNotInStock ? `ships in ${(value.backordered || '1-12 weeks')}` : null;
-      disableBuyButtonText = null;
     } else {
       backordered = null;
-      disableBuyButtonText = "SELECT YOUR CAR";
     }
     backordered = '1-12 weeks';
+    updateDisableBuyButtonText();
+  }
+
+  const handleTradeInSelection = (value) => {
+    tradeInValue = value;
+    tradeInChecked = value === 'trade-in';
+    updateAdditionalProductIds();
+    updateDisableBuyButtonText();
   }
 
   const handleTradeInToggle = () => {
@@ -131,8 +149,8 @@
 
     <ButtonGroup options={[
       {"label": "Add trade-in ($250 credit)", "value": "trade-in"},
-      {"label": "No trade-in", "value": "no trade-in"},
-      ]} onSelect={(val) => console.log(val)}>
+      {"label": "No trade-in", "value": "no-trade-in"},
+      ]} value={tradeInValue} onSelect={handleTradeInSelection}>
     </ButtonGroup>
 <!--    <hr/>-->
 

From 4f0354c14ea90d025891c6352efecf8a1ca0fba5 Mon Sep 17 00:00:00 2001
From: Shane Smiskol <shane@smiskol.com>
Date: Mon, 24 Nov 2025 19:24:57 -0800
Subject: [PATCH 06/12] make link work

---
 src/lib/components/ProductDescriptions/CommaFour.svelte | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/lib/components/ProductDescriptions/CommaFour.svelte b/src/lib/components/ProductDescriptions/CommaFour.svelte
index 62b2c78e..de24cc40 100644
--- a/src/lib/components/ProductDescriptions/CommaFour.svelte
+++ b/src/lib/components/ProductDescriptions/CommaFour.svelte
@@ -96,15 +96,11 @@
     updateDisableBuyButtonText();
   }
 
-  const handleTradeInToggle = () => {
-    tradeInChecked = !tradeInChecked;
-    updateAdditionalProductIds();
-  }
-
   onMount(async () => {
     // Autofill trade-in checkbox
     const urlParams = new URLSearchParams(window.location.search);
     if (urlParams.get('trade-in') === '1') {
+      tradeInValue = 'trade-in';
       tradeInChecked = true;
     }
 

From da349e16d33ab25c53d08bd0af821a9193851cca Mon Sep 17 00:00:00 2001
From: Shane Smiskol <shane@smiskol.com>
Date: Mon, 24 Nov 2025 19:58:55 -0800
Subject: [PATCH 07/12] yes

---
 src/lib/components/ButtonGroup.svelte                | 12 ++++++++++++
 .../components/ProductDescriptions/CommaFour.svelte  |  6 ++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
index 30aaa4cd..9d757c95 100644
--- a/src/lib/components/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup.svelte
@@ -55,12 +55,24 @@
     text-align: inherit;
   }
 
+  .button:first-child {
+    flex: 2;
+  }
+
+  .button:last-child {
+    flex: 1;
+  }
+
   .button :global(.card) {
     flex: 1;
     display: flex;
     margin: 0;
   }
 
+  .button :global(.card hgroup) {
+    margin-left: 0;
+  }
+
   .button.checked :global(.card) {
     background-color: var(--color-accent);
   }
diff --git a/src/lib/components/ProductDescriptions/CommaFour.svelte b/src/lib/components/ProductDescriptions/CommaFour.svelte
index de24cc40..04e33333 100644
--- a/src/lib/components/ProductDescriptions/CommaFour.svelte
+++ b/src/lib/components/ProductDescriptions/CommaFour.svelte
@@ -150,9 +150,12 @@
     </div>
 
     <ButtonGroup options={[
-      {"label": "Add trade-in ($250 credit)", "value": "trade-in"},
+      {"label": "Add trade-in", "value": "trade-in"},
       {"label": "No trade-in", "value": "no-trade-in"},
       ]} value={tradeInValue} onSelect={handleTradeInSelection}>
+      <div slot="option1-content">
+        $250 credit
+      </div>
     </ButtonGroup>
 <!--    <hr/>-->
 
@@ -257,7 +260,6 @@
       font-size: 1rem;
       color: #000000A6;
     }
-
   }
 
   .harness-price {

From 7ad1206780a9b1c37360af4caeeb42828f4ef684 Mon Sep 17 00:00:00 2001
From: Shane Smiskol <shane@smiskol.com>
Date: Mon, 24 Nov 2025 20:19:53 -0800
Subject: [PATCH 08/12] yes

---
 src/lib/components/ButtonGroup.svelte         | 89 +++++++++++++++----
 .../ProductDescriptions/CommaFour.svelte      |  7 +-
 2 files changed, 75 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
index 9d757c95..8f8e233b 100644
--- a/src/lib/components/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup.svelte
@@ -1,6 +1,4 @@
 <script>
-  import NoteCard from "./NoteCard.svelte";
-
   export let options = []; // Array of two options: [{value: 'option1', label: 'Label 1'}, {value: 'option2', label: 'Label 2'}]
   export let value = null; // Currently selected value
   export let onSelect; // callback function when selection changes
@@ -21,17 +19,35 @@
 
 <div class="button-group">
   <button class="button" class:checked={value === option1.value} on:click={() => handleSelect(option1.value)}>
-    <NoteCard title={option1.label || ''}>
-      <div slot="icon"></div>
-      <slot name="option1-content"></slot>
-    </NoteCard>
+    <div class="card">
+      <hgroup>
+        <span class="title-row">
+          <span class="title">{option1.label || ''}</span>
+          {#if option1.subheader}
+            <span class="subheader">{option1.subheader}</span>
+          {/if}
+        </span>
+        <div>
+          <slot name="option1-content"></slot>
+        </div>
+      </hgroup>
+    </div>
   </button>
 
   <button class="button" class:checked={value === option2.value} on:click={() => handleSelect(option2.value)}>
-    <NoteCard title={option2.label || ''}>
-      <div slot="icon"></div>
-      <slot name="option2-content"></slot>
-    </NoteCard>
+    <div class="card">
+      <hgroup>
+        <span class="title-row">
+          <span class="title">{option2.label || ''}</span>
+          {#if option2.subheader}
+            <span class="subheader">{option2.subheader}</span>
+          {/if}
+        </span>
+        <div>
+          <slot name="option2-content"></slot>
+        </div>
+      </hgroup>
+    </div>
   </button>
 </div>
 
@@ -56,28 +72,69 @@
   }
 
   .button:first-child {
-    flex: 2;
+    flex: 3;
   }
 
   .button:last-child {
-    flex: 1;
+    flex: 2;
   }
 
-  .button :global(.card) {
+  .button .card {
     flex: 1;
     display: flex;
     margin: 0;
+    padding: 1.5rem 1rem;
+    align-items: center;
+    color: black;
+    border: 1px solid #616161;
+    width: 100%;
   }
 
-  .button :global(.card hgroup) {
+  .button .card hgroup {
     margin-left: 0;
+    display: block !important;
+    width: 100%;
+  }
+
+  .button .card hgroup .title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    gap: 0.5rem;
+  }
+
+  .button .card hgroup .title-row .title {
+    font-family: JetBrains Mono, monospace;
+    font-size: 0.875rem;
+    font-weight: 400;
+    text-transform: uppercase;
+    line-height: 1.1;
+    color: black;
+  }
+
+  .button .card hgroup .title-row .subheader {
+    font-family: 'Inter', sans-serif;
+    font-size: 0.875rem;
+    font-weight: 400;
+    text-transform: none;
+    color: #666;
+    text-align: right;
+    line-height: 1.1;
+  }
+
+  .button .card hgroup div {
+    display: block;
+    color: #000000A6;
+    font-size: 0.875rem;
+    line-height: 1.25;
   }
 
-  .button.checked :global(.card) {
+  .button.checked .card {
     background-color: var(--color-accent);
   }
 
-  .button.checked :global(.card hgroup span) {
+  .button.checked .card hgroup span {
     color: black;
   }
 </style>
diff --git a/src/lib/components/ProductDescriptions/CommaFour.svelte b/src/lib/components/ProductDescriptions/CommaFour.svelte
index 04e33333..6a2b5387 100644
--- a/src/lib/components/ProductDescriptions/CommaFour.svelte
+++ b/src/lib/components/ProductDescriptions/CommaFour.svelte
@@ -150,12 +150,9 @@
     </div>
 
     <ButtonGroup options={[
-      {"label": "Add trade-in", "value": "trade-in"},
-      {"label": "No trade-in", "value": "no-trade-in"},
+      {"label": "Add trade‑in", "value": "trade-in", "subheader": "$250 credit"},
+      {"label": "No trade‑in", "value": "no-trade-in"},
       ]} value={tradeInValue} onSelect={handleTradeInSelection}>
-      <div slot="option1-content">
-        $250 credit
-      </div>
     </ButtonGroup>
 <!--    <hr/>-->
 

From e15da66b8ca8e43d75a54bbf64bfd564c0f91081 Mon Sep 17 00:00:00 2001
From: Shane Smiskol <shane@smiskol.com>
Date: Mon, 24 Nov 2025 20:23:08 -0800
Subject: [PATCH 09/12] center second

---
 src/lib/components/ButtonGroup.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
index 8f8e233b..eedbaee6 100644
--- a/src/lib/components/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup.svelte
@@ -104,6 +104,10 @@
     gap: 0.5rem;
   }
 
+  .button:last-child .card hgroup .title-row {
+    justify-content: center;
+  }
+
   .button .card hgroup .title-row .title {
     font-family: JetBrains Mono, monospace;
     font-size: 0.875rem;

From 95cf64cd0d40fcc3b56d384979abe5748b879925 Mon Sep 17 00:00:00 2001
From: Shane Smiskol <shane@smiskol.com>
Date: Mon, 24 Nov 2025 20:28:34 -0800
Subject: [PATCH 10/12] stash

---
 src/lib/components/ButtonGroup.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
index eedbaee6..5e6cc6db 100644
--- a/src/lib/components/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup.svelte
@@ -109,10 +109,11 @@
   }
 
   .button .card hgroup .title-row .title {
-    font-family: JetBrains Mono, monospace;
-    font-size: 0.875rem;
+    /*font-family: JetBrains Mono, monospace;*/
+    /*font-size: 0.875rem;*/
+    font-size: 1rem;
     font-weight: 400;
-    text-transform: uppercase;
+    /*text-transform: uppercase;*/
     line-height: 1.1;
     color: black;
   }
@@ -122,7 +123,6 @@
     font-size: 0.875rem;
     font-weight: 400;
     text-transform: none;
-    color: #666;
     text-align: right;
     line-height: 1.1;
   }

From d13f8e8efa654ce6ba1e94343192e095cb93be9f Mon Sep 17 00:00:00 2001
From: Shane Smiskol <shane@smiskol.com>
Date: Mon, 24 Nov 2025 20:50:13 -0800
Subject: [PATCH 11/12] wrap

---
 src/lib/components/ButtonGroup.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
index 5e6cc6db..0323b276 100644
--- a/src/lib/components/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup.svelte
@@ -57,6 +57,10 @@
     align-items: stretch;
     gap: 1rem;
     margin: 1rem 0 0;
+
+    @media screen and (max-width: 1300px) {
+      flex-direction: column;
+    }
   }
 
   .button {

From 05f3da905498b2177fb0746ecb37f91180733631 Mon Sep 17 00:00:00 2001
From: Shane Smiskol <shane@smiskol.com>
Date: Mon, 24 Nov 2025 20:56:20 -0800
Subject: [PATCH 12/12] more

---
 src/lib/components/ButtonGroup.svelte | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
index 0323b276..e4b1d2b4 100644
--- a/src/lib/components/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup.svelte
@@ -138,11 +138,25 @@
     line-height: 1.25;
   }
 
-  .button.checked .card {
-    background-color: var(--color-accent);
+  .button:nth-child(1).checked .card {
+    /*background-color: var(--color-accent);*/
+    /*cool #51ff00 green gradient bottom left to top right*/
+    /*background: linear-gradient(135deg, #51ff00 0%, #00c800 100%);*/
+    background: linear-gradient(to bottom left, #51ff00 0%, #6CDA3A 100%);
+    /*border-color: var(--color-accent);*/
+    /*border: 4px solid var(--color-accent);*/
   }
 
-  .button.checked .card hgroup span {
+  .button:nth-child(2).checked .card {
+    background-color: black;
+    color: white;
+  }
+
+  .button:nth-child(1).checked .card hgroup span {
     color: black;
   }
+
+  .button:nth-child(2).checked .card hgroup span {
+    color: white;
+  }
 </style>