Clarify watermark features across packages

resources/js/admin/mobile/BillingPage.tsx

@@ -33,6 +33,7 @@ import {
   formatEventUsage,
   getPackageFeatureLabel,
   getPackageLimitEntries,
+  resolveTenantWatermarkFeatureKey,
 } from './lib/packageSummary';
 import {
   PendingCheckout,
@@ -564,7 +565,7 @@ function PackageCard({
         ) : null}
         {isPartnerPackage && includedTierLabel ? <PillBadge tone="muted">{includedTierLabel}</PillBadge> : null}
         {!isPartnerPackage ? renderFeatureBadge(pkg, t, 'branding_allowed', t('billing.features.branding', 'Branding')) : null}
-        {!isPartnerPackage ? renderFeatureBadge(pkg, t, 'watermark_allowed', t('billing.features.watermark', 'Watermark')) : null}
+        {!isPartnerPackage ? renderWatermarkBadge(pkg, t) : null}
       </XStack>
       {eventUsageText ? (
         <Text fontSize="$xs" color={muted}>
@@ -632,6 +633,16 @@ function renderFeatureBadge(pkg: TenantPackageSummary, t: any, key: string, labe
   return <PillBadge tone={enabled ? 'success' : 'muted'}>{enabled ? label : `${label} off`}</PillBadge>;
 }
 
+function renderWatermarkBadge(pkg: TenantPackageSummary, t: any) {
+  const featureKey = resolveTenantWatermarkFeatureKey(pkg);
+  if (!featureKey) {
+    return null;
+  }
+
+  const tone = featureKey === 'watermark_base' ? 'muted' : 'success';
+  return <PillBadge tone={tone}>{getPackageFeatureLabel(featureKey, t)}</PillBadge>;
+}
+
 function UsageBar({ metric }: { metric: PackageUsageMetric }) {
   const { t } = useTranslation('management');
   const { muted, textStrong, border, primary, subtle, warningText, danger } = useAdminTheme();