feat(pricing): design system alignment pass

- Replace hardcoded color values with DS CSS variables (color-mix for
  primary tints, var(--primary), var(--muted-foreground), etc.)
- Add responsive calculator layout (two-column desktop / stacked mobile)
  via CSS Grid classes in index.css
- Add collapsible overages section after feature table with correct rates
- Remove stats proof bar (hidden)
- Fix table group header backgrounds and add missing borderTop separators
- Standardize all spacing to DS multiples of 8
- Bump pricing page max-width from 1160 to 1280
- Add overflow-x: hidden to html/body to prevent mobile jiggle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: marioDamnj

src/index.css

@@ -23,6 +23,56 @@
   animation-play-state: paused;
 }
 
+/* ─── Calculator output — responsive two-column (desktop) / stacked (mobile) ── */
+.calc-output {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  row-gap: var(--spacing-2, 8px);
+  margin-bottom: var(--spacing-2, 8px);
+}
+
+.calc-output-label,
+.calc-output-switch {
+  align-self: center;
+}
+
+.calc-output-switch {
+  justify-self: end;
+}
+
+.calc-output-number {
+  grid-column: 1 / -1;
+}
+
+.calc-output-rate {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4, 16px);
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .calc-output-number {
+    grid-column: 1;
+    align-self: end;
+  }
+
+  .calc-output-rate {
+    grid-column: 2;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--spacing-1, 4px);
+    justify-self: end;
+    align-self: end;
+  }
+}
+
+html,
+body {
+  overflow-x: hidden;
+}
+
 body {
   margin: 0;
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;