Small pricing page fixes

PlotLine/Views/Pricing/Index.cshtml

@@ -1,4 +1,5 @@
 @model PricingViewModel
+@using Microsoft.AspNetCore.Html
 @{
     ViewData["Title"] = "Pricing";
     ViewData["ShellClass"] = "marketing-shell";
@@ -60,11 +61,11 @@
                             <div class="pricing-price">
                                 @if (plan.RequiresStripeSubscription)
                                 {
-                                    <strong>@FormatMoney(plan.MonthlyPricePence, plan.CurrencyCode)</strong>
+                                    @PriceMarkup(plan.MonthlyPricePence, plan.CurrencyCode)
                                     <span>per month</span>
                                     @if (plan.AnnualPricePence.HasValue)
                                     {
-                                        <small>@FormatMoney(plan.AnnualPricePence, plan.CurrencyCode) billed annually</small>
+                                        <small>@FormatAnnualPrice(plan.AnnualPricePence, plan.CurrencyCode) billed annually</small>
                                     }
                                 }
                                 else
@@ -192,16 +193,28 @@
             ? "Unlimited"
             : StorageUsage.FormatBytes(megabytes * 1024L * 1024L);
 
-    private static string FormatMoney(int? pence, string? currencyCode)
+    private static IHtmlContent PriceMarkup(int? pence, string? currencyCode)
+    {
+        if (!pence.HasValue)
+        {
+            return new HtmlString("<strong>Contact us</strong>");
+        }
+
+        var code = string.IsNullOrWhiteSpace(currencyCode) ? "GBP" : currencyCode.ToUpperInvariant();
+        var symbol = string.Equals(code, "GBP", StringComparison.OrdinalIgnoreCase) ? "£" : string.Empty;
+        return new HtmlString($"<strong><span class=\"pricing-price__value\">{symbol}{pence.Value / 100m:0.00}</span> <small>{code}</small></strong>");
+    }
+
+    private static string FormatAnnualPrice(int? pence, string? currencyCode)
     {
         if (!pence.HasValue)
         {
             return "Contact us";
         }
 
-        return string.Equals(currencyCode, "GBP", StringComparison.OrdinalIgnoreCase)
+        var code = string.IsNullOrWhiteSpace(currencyCode) ? "GBP" : currencyCode.ToUpperInvariant();
-            ? $"GBP {pence.Value / 100m:0.00}"
+        var symbol = string.Equals(code, "GBP", StringComparison.OrdinalIgnoreCase) ? "£" : string.Empty;
-            : $"{pence.Value / 100m:0.00} {(string.IsNullOrWhiteSpace(currencyCode) ? "GBP" : currencyCode.ToUpperInvariant())}";
+        return $"{symbol}{pence.Value / 100m:0.00}";
     }
 
     private static string PlanTagline(SubscriptionLevel plan) =>

PlotLine/wwwroot/css/plotline-theme.css

@@ -2913,7 +2913,7 @@ a:focus-visible {
 }
 
 .pricing-hero {
-  padding: clamp(4rem, 8vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem);
+  padding: clamp(2rem, 5vw, 3.75rem) 0 clamp(2.5rem, 6vw, 4.5rem);
   background:
     radial-gradient(circle at 18% 20%, rgba(212, 165, 116, 0.2), transparent 24rem),
     linear-gradient(180deg, var(--marketing-cream), var(--marketing-offwhite));
@@ -3003,12 +3003,21 @@ a:focus-visible {
   box-shadow: 0 18px 42px rgba(31, 42, 68, 0.08);
 }
 
+.pricing-card::before {
+  content: "";
+  display: block;
+  height: 1.9rem;
+}
+
 .pricing-card--featured {
   border-color: rgba(212, 165, 116, 0.7);
   box-shadow: 0 26px 58px rgba(31, 42, 68, 0.13);
 }
 
 .pricing-badge {
+  position: absolute;
+  top: clamp(1.2rem, 2.4vw, 1.65rem);
+  right: clamp(1.2rem, 2.4vw, 1.65rem);
   width: fit-content;
   margin: 0;
   border: 1px solid rgba(212, 165, 116, 0.55);
@@ -3025,6 +3034,8 @@ a:focus-visible {
 .pricing-card__heading {
   display: grid;
   gap: 0.5rem;
+  min-height: 6.85rem;
+  align-content: start;
 }
 
 .pricing-card h3,
@@ -3052,10 +3063,15 @@ a:focus-visible {
 }
 
 .pricing-price strong {
+  display: inline-flex;
+  gap: 0.35rem;
+  align-items: baseline;
+  width: fit-content;
   color: var(--marketing-navy);
   font-family: Georgia, "Times New Roman", serif;
   font-size: clamp(2.15rem, 4vw, 3rem);
   line-height: 1;
+  white-space: nowrap;
 }
 
 .pricing-price span,
@@ -3068,6 +3084,24 @@ a:focus-visible {
   font-size: 0.88rem;
 }
 
+.pricing-price strong small {
+  color: var(--marketing-muted);
+  font-family: "Segoe UI", "Aptos", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 0.88rem;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.pricing-price .pricing-price__value {
+  color: var(--marketing-navy);
+  white-space: nowrap;
+}
+
+.pricing-price > small {
+  white-space: nowrap;
+}
+
 .pricing-feature-list {
   display: grid;
   gap: 0.65rem;
@@ -3312,7 +3346,7 @@ a:focus-visible {
   }
 
   .pricing-hero {
-    padding-top: 3rem;
+    padding-top: 1.8rem;
   }
 
   .pricing-card-grid {