added mac support

src/styles/components/buttons.css

@@ -26,7 +26,7 @@
 
 .hero-cta-row {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
     gap: 1rem;
     margin-top: 1.5rem;
@@ -85,9 +85,91 @@
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
+.hero-cta-unsure {
+    position: relative;
+    background: transparent;
+    color: var(--color-fg);
+    border-radius: 50px !important;
+    padding: 0.75rem 1.75rem !important;
+    font-weight: 500;
+    font-size: 0.875rem;
+    text-decoration: none;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
 @media (hover: none) and (pointer: coarse) {
     .btn {
         min-height: 48px;
         min-width: 48px;
     }
+}
+
+.download-expandable {
+    position: relative;
+    display: inline-block;
+    background: #000;
+    border-radius: var(--radius-pill);
+    overflow: hidden;
+}
+
+.download-expandable[aria-expanded="true"] {
+    border-radius: 10px;
+}
+
+.download-expandable .hero-cta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding-right: 1rem;
+    background: transparent !important;
+    border: none;
+    margin: 0;
+    color: #fff;
+}
+
+.download-btn-text {
+    flex: 1;
+}
+
+.dropdown-arrow {
+    transition: transform 0.3s ease;
+    flex-shrink: 0;
+}
+
+.download-expandable[aria-expanded="true"] .dropdown-arrow {
+    transform: rotate(180deg);
+}
+
+.download-options {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    opacity: 0;
+    background: #000;
+}
+
+.download-options.show {
+    max-height: 200px;
+    opacity: 1;
+}
+
+.download-option {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    color: #fff;
+    text-decoration: none;
+    transition: background 0.2s ease;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.download-option:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.download-option svg {
+    flex-shrink: 0;
 }

src/styles/components/pills.css

@@ -97,4 +97,28 @@
         width: 28px;
         height: 28px;
     }
+}
+
+.platform-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-pill);
+    font-size: 0.8125rem;
+    color: var(--color-fg-dim);
+}
+
+.platform-pill svg {
+    flex-shrink: 0;
+}
+
+.platform-divider {
+    color: var(--color-fg-dim);
+    opacity: 0.5;
+}
+
+.mac-icon {
+    display: block;
 }

src/styles/sections/cta-banner.css

@@ -58,4 +58,28 @@
     font-size: 0.9375rem;
     color: var(--color-fg-dim);
     margin-bottom: 0.5rem;
+}
+
+.cta-banner-content .download-expandable {
+    background: #fff;
+}
+
+.cta-banner-content .download-expandable .hero-cta {
+    color: #000;
+}
+
+.cta-banner-content .download-options {
+    background: #fff;
+}
+
+.cta-banner-content .download-option {
+    color: #000;
+}
+
+.cta-banner-content .download-option:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.cta-banner-content .download-option svg {
+    color: #000;
 }

src/styles/sections/features.css

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     gap: clamp(3.5rem, 8vw, 6rem);
-    width: 70%;
+    width: 60%;
 }
 
 .feature-block {