From 91946946a6a671a8ec2eb4b5ee475f94cf7649a4 Mon Sep 17 00:00:00 2001
From: Graham McIntie <graham@mcintire.me>
Date: Mon, 16 Feb 2026 08:22:39 -0600
Subject: [PATCH] Make billing integration exclusivity more obvious

Add 'Choose one' badge with indigo border to billing category,
clarify that only one billing platform can be active at a time.
---
 .../live/org/integrations_live.html.heex          | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/lib/towerops_web/live/org/integrations_live.html.heex b/lib/towerops_web/live/org/integrations_live.html.heex
index 2f76b243..6deb7ca0 100644
--- a/lib/towerops_web/live/org/integrations_live.html.heex
+++ b/lib/towerops_web/live/org/integrations_live.html.heex
@@ -36,7 +36,16 @@
           Enum.find(category.providers, fn p ->
             @integrations[p.id] && @integrations[p.id].enabled
           end) %>
-        <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-white/10 dark:bg-white/5">
+        <div class="rounded-lg border-2 border-indigo-200 bg-white p-6 dark:border-indigo-800/50 dark:bg-white/5">
+          <div class="mb-4 flex items-center gap-2">
+            <span class="inline-flex items-center gap-1 rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300">
+              <.icon name="hero-arrow-path" class="h-3.5 w-3.5" />
+              Choose one
+            </span>
+            <span class="text-xs text-gray-500 dark:text-gray-400">
+              — only one billing platform can be active at a time
+            </span>
+          </div>
           <%= if active_billing do %>
             <%!-- Active billing provider --%>
             <% integration = @integrations[active_billing.id] %>
@@ -154,8 +163,8 @@
             </div>
           <% else %>
             <%!-- No active billing — show provider picker --%>
-            <p class="mb-4 text-sm text-gray-500 dark:text-gray-400">
-              {t("Select your billing platform to get started:")}
+            <p class="mb-4 text-sm text-gray-600 dark:text-gray-300 font-medium">
+              {t("Which billing platform does your organization use?")}
             </p>
             <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
               <button