From 4de23cd82c3e62a4479fefcafab882d8c9d07940 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Fri, 6 Mar 2026 10:43:06 -0500
Subject: [PATCH] 4-tier pricing (14/28/42% off yearly plans), fix word
 wrapping

Pricing: Monthly $14, 1yr $144 (14% off), 2yr $242 (28% off),
3yr $292 (42% off best value). Fixes incorrect "two months free"
claim. Responsive 1-col mobile, 2x2 tablet, 4-col wide.

Anti-wrap: white-space nowrap on nav links, buttons, footer links,
pricing banners/amounts/descriptions. nbsp on multi-word link text
like "My Account" and "Open a Shop".
---
 common.css  |  3 +++
 index.html  | 30 ++++++++++++++++++++----------
 landing.css | 27 +++++++++++++++++++++++----
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/common.css b/common.css
index 2b00cf6..1f0128d 100644
--- a/common.css
+++ b/common.css
@@ -237,6 +237,7 @@ a.mps-button {
     padding-bottom: 14px;
     margin-top: 4px;
     margin-bottom: 4px;
+    white-space: nowrap;
 }
 
 a.product-edit-button {
@@ -728,6 +729,7 @@ textarea.markup-editor-textarea {
     color: #0b0b0b;
     text-transform: uppercase;
     letter-spacing: 0.05em;
+    white-space: nowrap;
 }
 
 .mps-footer-links {
@@ -741,6 +743,7 @@ textarea.markup-editor-textarea {
     font-size: 14px;
     font-weight: 400;
     text-decoration: none;
+    white-space: nowrap;
 }
 
 .mps-footer-links a:hover {
diff --git a/index.html b/index.html
index 35a9031..463aef7 100644
--- a/index.html
+++ b/index.html
@@ -40,8 +40,8 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
       <section class="middle"></section>
       <section class="log-in">
         <a href="https://blog.makepostsell.com/">Blog</a>
-        <a href="https://my.makepostsell.com/u/settings">My Account</a>
-        <a href="https://my.makepostsell.com/s/new" target="_blank" class="nav-cta">Open a Shop</a>
+        <a href="https://my.makepostsell.com/u/settings" class="avoid-wrap">My&nbsp;Account</a>
+        <a href="https://my.makepostsell.com/s/new" target="_blank" class="nav-cta avoid-wrap">Open&nbsp;a&nbsp;Shop</a>
       </section>
     </section>
   </section>
@@ -65,7 +65,7 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
 
     <!-- ======== PRICING ======== -->
     <section class="landing-section landing-section-alt">
-      <div class="one-column">
+      <div class="one-column landing-pricing-container">
         <h2 class="landing-section-title">Simple pricing</h2>
 
         <div class="landing-pricing">
@@ -74,10 +74,20 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
             <span class="landing-pricing-amount">$14<span class="landing-pricing-period">/month</span></span>
             <span class="landing-pricing-desc">Pay as you go. Cancel anytime.</span>
           </div>
+          <div class="landing-pricing-card">
+            <div class="landing-pricing-banner">1 Year &#8212; Save 14%</div>
+            <span class="landing-pricing-amount">$144<span class="landing-pricing-period">/year</span></span>
+            <span class="landing-pricing-desc">$12/month billed annually.</span>
+          </div>
+          <div class="landing-pricing-card">
+            <div class="landing-pricing-banner">2 Year &#8212; Save 28%</div>
+            <span class="landing-pricing-amount">$242<span class="landing-pricing-period">/2 years</span></span>
+            <span class="landing-pricing-desc">~$10/month billed every 2 years.</span>
+          </div>
           <div class="landing-pricing-card landing-pricing-featured">
-            <div class="landing-pricing-banner landing-pricing-banner-featured">Best value &#8212; save 42%</div>
-            <span class="landing-pricing-amount">$97<span class="landing-pricing-period">/year</span></span>
-            <span class="landing-pricing-desc">Two months free. Same features.</span>
+            <div class="landing-pricing-banner landing-pricing-banner-featured">Best Value &#8212; Save 42%</div>
+            <span class="landing-pricing-amount">$292<span class="landing-pricing-period">/3 years</span></span>
+            <span class="landing-pricing-desc">~$8/month billed every 3 years.</span>
           </div>
         </div>
 
@@ -429,16 +439,16 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
     <div class="mps-footer-group">
       <span class="mps-footer-group-title">Account</span>
       <nav class="mps-footer-links">
-        <a href="https://my.makepostsell.com/u/settings">My Account</a>
-        <a href="https://my.makepostsell.com/s/new">Open a Shop</a>
+        <a href="https://my.makepostsell.com/u/settings">My&nbsp;Account</a>
+        <a href="https://my.makepostsell.com/s/new">Open&nbsp;a&nbsp;Shop</a>
       </nav>
     </div>
 
   </div>
 
   <div class="mps-footer-ctas">
-    <a href="https://my.makepostsell.com/s/new" class="shop-new-button mps-button">+ Open a Shop</a>
-    <a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="source-button mps-button">&#x2710; Contribute Code</a>
+    <a href="https://my.makepostsell.com/s/new" class="shop-new-button mps-button avoid-wrap">+&nbsp;Open&nbsp;a&nbsp;Shop</a>
+    <a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="source-button mps-button avoid-wrap">&#x2710;&nbsp;Contribute&nbsp;Code</a>
   </div>
 
   <div class="mps-footer-bottom">
diff --git a/landing.css b/landing.css
index f895dad..8268ad8 100644
--- a/landing.css
+++ b/landing.css
@@ -41,6 +41,7 @@
     color: #515151;
     font-weight: 500;
     font-size: 15px;
+    white-space: nowrap;
     transition: color 0.2s ease;
 }
 
@@ -191,10 +192,8 @@ a.mps-button.landing-cta-large {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
-    margin: 32px 0;
-    max-width: 600px;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 32px auto;
+    max-width: 900px;
 }
 
 .landing-pricing-card {
@@ -221,6 +220,7 @@ a.mps-button.landing-cta-large {
     text-transform: uppercase;
     letter-spacing: 0.06em;
     padding: 10px 24px;
+    white-space: nowrap;
     border-bottom: 1px solid #e0e0e0;
 }
 
@@ -242,6 +242,7 @@ a.mps-button.landing-cta-large {
     display: block;
     line-height: 1;
     margin: 28px 0 8px;
+    white-space: nowrap;
 }
 
 .landing-pricing-period {
@@ -255,6 +256,7 @@ a.mps-button.landing-cta-large {
     color: #666;
     display: block;
     padding: 0 24px 28px;
+    white-space: nowrap;
 }
 
 /* ---- Cards (override common.css for landing) ---- */
@@ -432,6 +434,10 @@ a.mps-button.landing-cta-large {
         grid-template-columns: 1fr 1fr;
     }
 
+    .landing-pricing-amount {
+        font-size: 2.4em;
+    }
+
     .landing-two-lists {
         grid-template-columns: 1fr 1fr;
     }
@@ -449,4 +455,17 @@ a.mps-button.landing-cta-large {
     .landing-section {
         padding: 100px 40px;
     }
+
+    .landing-pricing-container {
+        max-width: 1100px;
+    }
+
+    .landing-pricing {
+        grid-template-columns: repeat(4, 1fr);
+        max-width: 1100px;
+    }
+
+    .landing-pricing-amount {
+        font-size: 2.4em;
+    }
 }