.ps-sav {
padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
min-height: 480px;
background:
radial-gradient(60% 60% at 50% 0%, rgba(34,107,72,0.2), transparent 60%),
#07140e;
color: #e7f5ee;
font-family: 'Inter', system-ui, sans-serif;
}
.ps-sav-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-sav-head h2 {
font-size: clamp(24px, 3.6vw, 36px); font-weight: 700;
letter-spacing: -0.02em; margin: 0 0 8px;
color: #fff;
}
.ps-sav-head p { color: #94b5a3; margin: 0; font-size: 14px; }
.ps-sav-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px; max-width: 980px; margin: 0 auto;
align-items: center;
}
.ps-sav-card {
position: relative;
background: #0d2018;
border: 1px solid rgba(52,153,108,0.22);
border-radius: 14px;
padding: 24px 22px 20px;
display: flex; flex-direction: column;
}
.ps-sav-rec {
background: linear-gradient(180deg, #14301f, #0d2018);
border-color: #34996c;
box-shadow: 0 0 0 1px #34996c inset, 0 14px 36px rgba(52,153,108,0.2);
transform: scale(1.04);
}
.ps-sav-pill {
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: #34996c; color: #07140e;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; padding: 4px 11px;
border-radius: 999px;
}
.ps-sav-card h3 {
font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; margin: 0 0 14px;
color: #6ee7b7;
}
.ps-sav-prices {
display: flex; flex-direction: column; gap: 4px;
margin-bottom: 8px;
}
.ps-sav-was {
font-size: 14px; color: #94b5a3;
text-decoration: line-through;
text-decoration-color: #f97316;
text-decoration-thickness: 2px;
}
.ps-sav-was em { font-style: normal; font-size: 12px; opacity: 0.8; }
.ps-sav-now {
display: flex; align-items: baseline; gap: 6px;
}
.ps-sav-now strong {
font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
color: #fff;
}
.ps-sav-now em { font-style: normal; font-size: 12px; color: #94b5a3; }
.ps-sav-bag {
display: inline-block; align-self: flex-start;
background: #f97316; color: #07140e;
font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
padding: 3px 10px;
border-radius: 4px;
margin-bottom: 18px;
}
.ps-sav-card ul {
list-style: none; padding: 0; margin: 0 0 20px; flex: 1;
font-size: 13.5px; line-height: 1.95; color: #c8e0d3;
}
.ps-sav-card ul li::before { content: '✓'; color: #34d399; display: inline-block; width: 20px; font-weight: 700; }
.ps-sav-cta {
display: block; text-align: center;
padding: 11px 16px; border-radius: 8px;
background: rgba(52,153,108,0.14); color: #6ee7b7;
text-decoration: none; font-size: 13.5px; font-weight: 600;
border: 1px solid rgba(52,153,108,0.32);
transition: background 0.18s, color 0.18s;
}
.ps-sav-cta-pri { background: #34996c; color: #07140e; border-color: #34996c; }
.ps-sav-cta:hover { background: #34996c; color: #07140e; }
.ps-sav-cta:focus-visible { outline: 2px solid #34996c; outline-offset: 3px; }
@media (max-width: 820px) {
.ps-sav-grid { grid-template-columns: 1fr; max-width: 380px; }
.ps-sav-rec { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.ps-sav-cta { transition: none; }
} <section class="ps-sav" aria-label="Pricing">
<header class="ps-sav-head">
<h2>Pay yearly, save real money.</h2>
<p>Same product, two months free when you commit to a year.</p>
</header>
<div class="ps-sav-grid">
<article class="ps-sav-card">
<h3>Seedling</h3>
<div class="ps-sav-prices">
<span class="ps-sav-was" aria-label="Monthly price, was">$15<em>/mo</em></span>
<span class="ps-sav-now"><strong>$12</strong><em>/mo billed yearly</em></span>
</div>
<span class="ps-sav-bag" aria-label="Yearly savings">Save $36/yr</span>
<ul>
<li>1 garden</li>
<li>30 plant slots</li>
<li>Care reminders</li>
</ul>
<a class="ps-sav-cta" href="#seedling">Choose Seedling</a>
</article>
<article class="ps-sav-card ps-sav-rec">
<span class="ps-sav-pill">Recommended</span>
<h3>Greenhouse</h3>
<div class="ps-sav-prices">
<span class="ps-sav-was" aria-label="Monthly price, was">$36<em>/mo</em></span>
<span class="ps-sav-now"><strong>$29</strong><em>/mo billed yearly</em></span>
</div>
<span class="ps-sav-bag" aria-label="Yearly savings">Save $84/yr</span>
<ul>
<li>10 gardens</li>
<li>Unlimited slots</li>
<li>Disease alerts</li>
<li>Soil data sync</li>
</ul>
<a class="ps-sav-cta ps-sav-cta-pri" href="#greenhouse">Choose Greenhouse</a>
</article>
<article class="ps-sav-card">
<h3>Estate</h3>
<div class="ps-sav-prices">
<span class="ps-sav-was" aria-label="Monthly price, was">$96<em>/mo</em></span>
<span class="ps-sav-now"><strong>$79</strong><em>/mo billed yearly</em></span>
</div>
<span class="ps-sav-bag" aria-label="Yearly savings">Save $204/yr</span>
<ul>
<li>Multi-property</li>
<li>Pro APIs</li>
<li>Phone support</li>
</ul>
<a class="ps-sav-cta" href="#estate">Choose Estate</a>
</article>
</div>
</section> Live preview Edit any tab — preview updates live Ready