From a7b40cba8ebf02693d9cb193db0bb5b1e18ca54b Mon Sep 17 00:00:00 2001
From: Sam <sameer+bot@dembrane.com>
Date: Mon, 13 Jul 2026 17:02:30 +0200
Subject: [PATCH 1/2] style: differentiate coming-soon tiers and add contact
 form line

---
 .../components/workspace/TierPricingCards.tsx | 56 ++++++++++++-------
 .../workspace/tier-pricing-cards.module.css   | 12 ++++
 2 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/echo/frontend/src/components/workspace/TierPricingCards.tsx b/echo/frontend/src/components/workspace/TierPricingCards.tsx
index 17d57253..714557e3 100644
--- a/echo/frontend/src/components/workspace/TierPricingCards.tsx
+++ b/echo/frontend/src/components/workspace/TierPricingCards.tsx
@@ -144,7 +144,8 @@ function TierCard({
 	const wrapClasses = [
 		isWide ? classes.wideWrap : classes.wrap,
 		selected ? classes.selected : "",
-		highlighted ? classes.highlighted : "",
+		highlighted && !comingSoon ? classes.highlighted : "",
+		comingSoon ? classes.comingSoonCard : "",
 	]
 		.filter(Boolean)
 		.join(" ");
@@ -189,7 +190,6 @@ function TierCard({
 				aria-checked={selected}
 				aria-disabled={comingSoon}
 				tabIndex={comingSoon ? -1 : 0}
-				style={comingSoon ? { opacity: 0.6 } : undefined}
 			>
 				<Stack gap={0} className={classes.wideInner}>
 					<Group gap={8} wrap="nowrap">
@@ -247,7 +247,6 @@ function TierCard({
 			aria-checked={selected}
 			aria-disabled={comingSoon}
 			tabIndex={comingSoon ? -1 : 0}
-			style={comingSoon ? { opacity: 0.6 } : undefined}
 		>
 			<Stack gap={0} className={classes.mobileInner}>
 				<Group
@@ -352,23 +351,38 @@ export const TierPricingCards = ({
 	const badgePopularTier = PURCHASABLE_TIERS.length >= 2 ? highlightTier : null;
 
 	return (
-		<div
-			className={useWideLayout ? classes.groupWide : classes.group}
-			role="radiogroup"
-		>
-			{cards.map((card) => (
-				<TierCard
-					key={card.tier}
-					card={card}
-					layout={useWideLayout ? "wide" : "mobile"}
-					selected={value === card.tier}
-					highlighted={card.tier === highlightTier}
-					highlightTier={badgePopularTier}
-					highlightLabel={resolvedHighlightLabel}
-					comingSoon={isComingSoon(card.tier)}
-					onSelect={() => onChange(card.tier)}
-				/>
-			))}
-		</div>
+		<Stack gap={16}>
+			<div
+				className={useWideLayout ? classes.groupWide : classes.group}
+				role="radiogroup"
+			>
+				{cards.map((card) => (
+					<TierCard
+						key={card.tier}
+						card={card}
+						layout={useWideLayout ? "wide" : "mobile"}
+						selected={value === card.tier}
+						highlighted={card.tier === highlightTier}
+						highlightTier={badgePopularTier}
+						highlightLabel={resolvedHighlightLabel}
+						comingSoon={isComingSoon(card.tier)}
+						onSelect={() => onChange(card.tier)}
+					/>
+				))}
+			</div>
+			<Text size="xs" c="dimmed" ta="center">
+				<Trans>
+					Interested in innovator or guardian? Let us know via{" "}
+					<a
+						href="http://forms.dembrane.com/contact"
+						target="_blank"
+						rel="noopener noreferrer"
+						style={{ color: "inherit", textDecoration: "underline" }}
+					>
+						forms.dembrane.com/contact
+					</a>
+				</Trans>
+			</Text>
+		</Stack>
 	);
 };
diff --git a/echo/frontend/src/components/workspace/tier-pricing-cards.module.css b/echo/frontend/src/components/workspace/tier-pricing-cards.module.css
index 92c513a7..b9f849d6 100644
--- a/echo/frontend/src/components/workspace/tier-pricing-cards.module.css
+++ b/echo/frontend/src/components/workspace/tier-pricing-cards.module.css
@@ -9,6 +9,13 @@
 		transform 0.15s ease;
 }
 
+.comingSoonCard {
+	opacity: 0.5;
+	border-style: dashed;
+	background: var(--mantine-color-gray-0);
+	cursor: default;
+}
+
 .wrap:not(.selected):hover {
 	border-color: var(--mantine-color-primary-4);
 	background: rgba(65, 105, 225, 0.02);
@@ -19,6 +26,11 @@
 	box-shadow: 0 0 0 1px var(--mantine-color-primary-6);
 }
 
+.comingSoonCard.selected {
+	border-color: var(--mantine-color-gray-4);
+	box-shadow: 0 0 0 1px var(--mantine-color-gray-4);
+}
+
 .highlighted {
 	border-color: rgba(65, 105, 225, 0.22);
 	box-shadow:

From 40a95109cf281297e1bc253909d9fdf0f45bca9a Mon Sep 17 00:00:00 2001
From: Sameer Pashikanti <63326129+spashii@users.noreply.github.com>
Date: Mon, 13 Jul 2026 18:29:25 +0200
Subject: [PATCH 2/2] style: keep coming-soon badge at full contrast on muted
 tier cards

The card-level opacity fade capped the badge's contrast (child opacity
can't exceed the parent's), so the one label explaining why the card is
disabled was the least legible thing on it. Mute content per element
instead and render the badge as a filled graphite pill. Also exclude
coming-soon cards from the hover treatment.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/workspace/TierPricingCards.tsx   | 17 ++++++++++++-----
 .../components/workspace/TierStatusBadge.tsx    |  2 +-
 .../workspace/tier-pricing-cards.module.css     |  5 +++--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/echo/frontend/src/components/workspace/TierPricingCards.tsx b/echo/frontend/src/components/workspace/TierPricingCards.tsx
index 714557e3..2150a3a3 100644
--- a/echo/frontend/src/components/workspace/TierPricingCards.tsx
+++ b/echo/frontend/src/components/workspace/TierPricingCards.tsx
@@ -166,12 +166,19 @@ function TierCard({
 			popularLabel={highlightLabel}
 		/>
 	);
+	// Coming-soon cards mute content per element instead of fading the card,
+	// so the "Coming soon" badge keeps full contrast.
+	const mutedText = comingSoon ? "gray.6" : undefined;
 	const specRows = card.specs.map((spec) => (
 		<Group key={spec} gap={7} wrap="nowrap" className={classes.specRow}>
 			<IconCheck
 				size={isWide ? 13 : 14}
 				stroke={1.5}
-				color="var(--mantine-color-primary-6)"
+				color={
+					comingSoon
+						? "var(--mantine-color-gray-5)"
+						: "var(--mantine-color-primary-6)"
+				}
 			/>
 			<Text size={isWide ? "xs" : "sm"} c="dimmed">
 				{spec}
@@ -193,7 +200,7 @@ function TierCard({
 			>
 				<Stack gap={0} className={classes.wideInner}>
 					<Group gap={8} wrap="nowrap">
-						<Text size="lg" className={classes.tierName}>
+						<Text size="lg" className={classes.tierName} c={mutedText}>
 							{card.tier}
 						</Text>
 						{badge}
@@ -216,7 +223,7 @@ function TierCard({
 							<Text
 								size="xl"
 								className={classes.priceAmount}
-								c="var(--app-text)"
+								c={mutedText ?? "var(--app-text)"}
 							>
 								{card.priceAmount}
 							</Text>
@@ -256,7 +263,7 @@ function TierCard({
 					gap={12}
 				>
 					<Group gap={8} wrap="nowrap">
-						<Text size="md" fw={500} className={classes.tierName}>
+						<Text size="md" fw={500} className={classes.tierName} c={mutedText}>
 							{card.tier}
 						</Text>
 						{badge}
@@ -266,7 +273,7 @@ function TierCard({
 							<Text
 								size="lg"
 								className={classes.priceAmount}
-								c="var(--app-text)"
+								c={mutedText ?? "var(--app-text)"}
 							>
 								{card.priceAmount}
 							</Text>
diff --git a/echo/frontend/src/components/workspace/TierStatusBadge.tsx b/echo/frontend/src/components/workspace/TierStatusBadge.tsx
index 2a8719c7..7ae4f7d9 100644
--- a/echo/frontend/src/components/workspace/TierStatusBadge.tsx
+++ b/echo/frontend/src/components/workspace/TierStatusBadge.tsx
@@ -25,7 +25,7 @@ export const TierStatusBadge = ({
 
 	if (kind === "coming-soon") {
 		return (
-			<Badge variant="light" color="gray" size="xs">
+			<Badge variant="filled" color="graphite" size="xs">
 				<Trans>Coming soon</Trans>
 			</Badge>
 		);
diff --git a/echo/frontend/src/components/workspace/tier-pricing-cards.module.css b/echo/frontend/src/components/workspace/tier-pricing-cards.module.css
index b9f849d6..d24ab916 100644
--- a/echo/frontend/src/components/workspace/tier-pricing-cards.module.css
+++ b/echo/frontend/src/components/workspace/tier-pricing-cards.module.css
@@ -9,14 +9,15 @@
 		transform 0.15s ease;
 }
 
+/* Content is muted via per-element colors (not opacity) so the coming-soon
+   badge can stay at full contrast — child opacity can't exceed the parent's. */
 .comingSoonCard {
-	opacity: 0.5;
 	border-style: dashed;
 	background: var(--mantine-color-gray-0);
 	cursor: default;
 }
 
-.wrap:not(.selected):hover {
+.wrap:not(.selected):not(.comingSoonCard):hover {
 	border-color: var(--mantine-color-primary-4);
 	background: rgba(65, 105, 225, 0.02);
 }