.ps-cur {
padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
min-height: 480px;
background: #faf6ee;
color: #2a0a14;
font-family: 'Inter', system-ui, sans-serif;
}
.ps-cur-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-cur-head h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(26px, 4vw, 38px); font-weight: 700;
letter-spacing: -0.015em; margin: 0 0 8px; color: #6b1224;
}
.ps-cur-head p { color: #8a4555; margin: 0 0 20px; font-size: 14px; }
.ps-cur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.ps-cur-tabs {
position: relative; display: inline-grid;
grid-template-columns: repeat(3, 1fr); gap: 0;
border: 1.5px solid #6b1224; border-radius: 999px;
padding: 3px; background: #fff;
margin: 0;
}
.ps-cur-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ps-cur-tabs label {
padding: 7px 22px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
color: #8a4555; cursor: pointer; border-radius: 999px;
transition: color 0.18s, background 0.18s;
}
.ps-cur-tabs input:checked + label { background: #6b1224; color: #faf6ee; }
.ps-cur-tabs input:focus-visible + label { outline: 2px solid #6b1224; outline-offset: 3px; }
.ps-cur-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px; max-width: 1000px; margin: 0 auto;
align-items: center;
}
.ps-cur-card {
position: relative;
background: #fff;
border: 1px solid #e7d8c8;
border-radius: 8px;
padding: 26px 22px 22px;
display: flex; flex-direction: column;
}
.ps-cur-best {
background: #6b1224; color: #faf6ee;
border: 0;
transform: scale(1.04);
box-shadow: 0 18px 44px rgba(107,18,36,0.3);
}
.ps-cur-pill {
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: #faf6ee; color: #6b1224;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; padding: 4px 11px;
border: 1.5px solid #6b1224;
border-radius: 999px;
}
.ps-cur-card h3 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px; font-weight: 700; margin: 0 0 12px;
color: #6b1224; font-style: italic;
}
.ps-cur-best h3 { color: #faf6ee; }
.ps-cur-price {
display: flex; align-items: baseline; gap: 4px;
margin-bottom: 18px; padding-bottom: 18px;
border-bottom: 1px dashed #e7d8c8;
font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
}
.ps-cur-best .ps-cur-price { border-bottom-color: rgba(250,246,238,0.25); }
.ps-cur-price em { font-size: 13px; font-weight: 500; color: #8a4555; font-style: normal; margin-left: 6px; }
.ps-cur-best .ps-cur-price em { color: rgba(250,246,238,0.7); }
.ps-cur-price > span { display: none; }
.ps-cur:has(#ps-cur-usd:checked) .ps-cur-usd,
.ps-cur:has(#ps-cur-eur:checked) .ps-cur-eur,
.ps-cur:has(#ps-cur-gbp:checked) .ps-cur-gbp { display: inline; }
.ps-cur-card ul {
list-style: none; padding: 0; margin: 0 0 20px; flex: 1;
font-size: 13.5px; line-height: 1.95; color: #4a2030;
}
.ps-cur-best ul { color: rgba(250,246,238,0.85); }
.ps-cur-card ul li::before { content: '◆'; color: #6b1224; display: inline-block; width: 20px; font-size: 9px; }
.ps-cur-best ul li::before { color: #faf6ee; }
.ps-cur-cta {
display: block; text-align: center;
padding: 11px 16px; border-radius: 6px;
text-decoration: none; font-size: 13px; font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase;
border: 1.5px solid currentColor; color: #6b1224;
background: transparent;
transition: background 0.18s, color 0.18s;
}
.ps-cur-best .ps-cur-cta { color: #faf6ee; }
.ps-cur-cta-pri { background: #faf6ee; color: #6b1224 !important; border-color: #faf6ee; }
.ps-cur-cta:hover { background: #6b1224; color: #faf6ee; border-color: #6b1224; }
.ps-cur-cta-pri:hover { background: transparent; color: #faf6ee !important; border-color: #faf6ee; }
.ps-cur-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 820px) {
.ps-cur-grid { grid-template-columns: 1fr; max-width: 380px; }
.ps-cur-best { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.ps-cur-tabs label, .ps-cur-cta { transition: none; }
} <section class="ps-cur" aria-label="Pricing">
<header class="ps-cur-head">
<h2>Pricing in your currency.</h2>
<p>Pay where you live, with the rate fixed at billing time.</p>
<fieldset class="ps-cur-tabs">
<legend class="ps-cur-sr">Currency</legend>
<input type="radio" name="ps-cur-c" id="ps-cur-usd" checked />
<label for="ps-cur-usd">USD</label>
<input type="radio" name="ps-cur-c" id="ps-cur-eur" />
<label for="ps-cur-eur">EUR</label>
<input type="radio" name="ps-cur-c" id="ps-cur-gbp" />
<label for="ps-cur-gbp">GBP</label>
</fieldset>
</header>
<div class="ps-cur-grid">
<article class="ps-cur-card">
<h3>Petit</h3>
<div class="ps-cur-price">
<span class="ps-cur-usd">$12</span><span class="ps-cur-eur">€11</span
><span class="ps-cur-gbp">£10</span>
<em>/month</em>
</div>
<ul>
<li>Solo cellar</li>
<li>3 bottles tracked</li>
<li>Email reminders</li>
</ul>
<a class="ps-cur-cta" href="#petit">Choose Petit</a>
</article>
<article class="ps-cur-card ps-cur-best">
<span class="ps-cur-pill">Sommelier’s pick</span>
<h3>Reserve</h3>
<div class="ps-cur-price">
<span class="ps-cur-usd">$36</span><span class="ps-cur-eur">€33</span
><span class="ps-cur-gbp">£28</span>
<em>/month</em>
</div>
<ul>
<li>Full cellar</li>
<li>Unlimited bottles</li>
<li>Tasting notes</li>
<li>Pairing engine</li>
</ul>
<a class="ps-cur-cta ps-cur-cta-pri" href="#reserve">Choose Reserve</a>
</article>
<article class="ps-cur-card">
<h3>Grand Cru</h3>
<div class="ps-cur-price">
<span class="ps-cur-usd">$96</span><span class="ps-cur-eur">€88</span
><span class="ps-cur-gbp">£76</span>
<em>/month</em>
</div>
<ul>
<li>Multi-cellar</li>
<li>Insurance valuation</li>
<li>White-glove setup</li>
</ul>
<a class="ps-cur-cta" href="#grand">Talk to us</a>
</article>
</div>
</section> Live preview Edit any tab — preview updates live Ready