.ps-slr {
padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
min-height: 480px;
background: #1a0a18;
color: #fde7f4;
font-family: 'Inter', system-ui, sans-serif;
}
.ps-slr-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-slr-eye {
display: inline-block; font-size: 11px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: #f472b6; padding: 5px 12px;
background: rgba(244,114,182,0.12);
border: 1px solid rgba(244,114,182,0.25);
border-radius: 999px; margin-bottom: 14px;
}
.ps-slr-head h2 {
font-size: clamp(22px, 3.4vw, 32px); font-weight: 700;
letter-spacing: -0.02em; margin: 0 0 10px;
color: #fff;
}
.ps-slr-head p { color: #c2a0b6; margin: 0 auto; max-width: 520px; font-size: 14px; line-height: 1.6; }
.ps-slr-card {
max-width: 580px; margin: 0 auto;
background: linear-gradient(180deg, #2a1227, #1a0a18);
border: 1px solid rgba(244,114,182,0.2);
border-radius: 18px;
padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 32px);
box-shadow: 0 22px 60px rgba(244,114,182,0.12);
}
.ps-slr-display {
text-align: center; padding-bottom: 22px; margin-bottom: 22px;
border-bottom: 1px dashed rgba(244,114,182,0.2);
}
.ps-slr-label {
display: block; font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase; color: #c2a0b6;
}
.ps-slr-amount {
display: flex; justify-content: center; align-items: baseline; gap: 4px;
font-size: 64px; font-weight: 800; letter-spacing: -0.04em;
margin: 8px 0 6px;
background: linear-gradient(180deg, #f472b6, #be185d);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-slr-amount em { font-size: 28px; font-style: normal; align-self: flex-start; padding-top: 12px; opacity: 0.7; }
.ps-slr-detail { font-size: 13px; color: #c2a0b6; }
.ps-slr-detail strong { color: #f472b6; font-weight: 700; }
.ps-slr-track-wrap { padding: 0 4px 22px; }
.ps-slr-sr {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ps-slr-range {
-webkit-appearance: none; appearance: none;
width: 100%; height: 6px; background: transparent; cursor: pointer;
margin: 8px 0 12px;
}
.ps-slr-range::-webkit-slider-runnable-track {
height: 6px; border-radius: 999px;
background: linear-gradient(90deg, #f472b6 0%, #f472b6 var(--ps-slr-fill, 10%), #3a1a30 var(--ps-slr-fill, 10%), #3a1a30 100%);
}
.ps-slr-range::-moz-range-track {
height: 6px; border-radius: 999px; background: #3a1a30;
}
.ps-slr-range::-moz-range-progress {
height: 6px; border-radius: 999px; background: #f472b6;
}
.ps-slr-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 22px; height: 22px; margin-top: -8px;
border-radius: 50%; background: #fff;
border: 3px solid #f472b6;
box-shadow: 0 4px 12px rgba(244,114,182,0.4);
cursor: grab;
}
.ps-slr-range::-moz-range-thumb {
width: 22px; height: 22px; border-radius: 50%; background: #fff;
border: 3px solid #f472b6; box-shadow: 0 4px 12px rgba(244,114,182,0.4);
cursor: grab;
}
.ps-slr-range:focus-visible::-webkit-slider-thumb { outline: 3px solid #f9a8d4; outline-offset: 2px; }
.ps-slr-range:focus-visible::-moz-range-thumb { outline: 3px solid #f9a8d4; outline-offset: 2px; }
.ps-slr-ticks {
display: flex; justify-content: space-between;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px; color: #8a647a;
}
.ps-slr-feats {
list-style: none; padding: 0; margin: 0 0 22px;
font-size: 13px; line-height: 1.9; color: #d8b8cc;
}
.ps-slr-feats li::before {
content: '✦'; color: #f472b6; display: inline-block; width: 20px;
}
.ps-slr-cta {
display: block; text-align: center;
padding: 13px 18px; border-radius: 10px;
background: linear-gradient(135deg, #f472b6, #be185d);
color: #fff; text-decoration: none;
font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
box-shadow: 0 8px 22px rgba(190,24,93,0.35);
transition: transform 0.18s;
}
.ps-slr-cta:hover { transform: translateY(-1px); }
.ps-slr-cta:focus-visible { outline: 2px solid #f9a8d4; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.ps-slr-cta { transition: none; }
} <section class="ps-slr" aria-label="Usage-based pricing">
<header class="ps-slr-head">
<span class="ps-slr-eye">Pay-as-you-go</span>
<h2>Only pay for what you actually send.</h2>
<p>
Slide to estimate your monthly bill — we round up to the nearest tier so you’re never
surprised.
</p>
</header>
<div class="ps-slr-card">
<div class="ps-slr-stage">
<div class="ps-slr-display">
<span class="ps-slr-label" id="ps-slr-lbl">Estimated monthly cost</span>
<span class="ps-slr-amount"><em>$</em><span id="ps-slr-price">12</span></span>
<span class="ps-slr-detail"
><span id="ps-slr-units">10,000</span> requests on the
<strong id="ps-slr-tier">Starter</strong> tier</span
>
</div>
<div class="ps-slr-track-wrap">
<label class="ps-slr-sr" for="ps-slr-range">Monthly request volume</label>
<input
type="range"
id="ps-slr-range"
class="ps-slr-range"
min="0"
max="100"
step="1"
value="10"
aria-labelledby="ps-slr-lbl"
aria-valuetext="10,000 requests, Starter tier, 12 dollars per month"
/>
<div class="ps-slr-ticks" aria-hidden="true">
<span>10K</span><span>100K</span><span>500K</span><span>1M</span><span>5M+</span>
</div>
</div>
<ul class="ps-slr-feats">
<li>No setup fee, no minimum spend</li>
<li>Auto-tier switching at every milestone</li>
<li>Usage cap option to prevent surprises</li>
</ul>
<a class="ps-slr-cta" href="#start">Start with this plan →</a>
</div>
</div>
</section> (function () {
var range = document.getElementById('ps-slr-range');
var priceEl = document.getElementById('ps-slr-price');
var unitsEl = document.getElementById('ps-slr-units');
var tierEl = document.getElementById('ps-slr-tier');
if (!range || !priceEl) return;
// 5 tiers — index → { units (k), price ($), tier name }
var tiers = [
{ units: 10, price: 12, name: 'Starter' },
{ units: 100, price: 49, name: 'Starter' },
{ units: 500, price: 149, name: 'Growth' },
{ units: 1000, price: 249, name: 'Growth' },
{ units: 5000, price: 749, name: 'Scale' }
];
function fmtUnits(k) { return k >= 1000 ? (k / 1000).toFixed(k % 1000 ? 1 : 0) + 'M' : k.toLocaleString() + 'K'; }
function update() {
var v = parseInt(range.value, 10);
// map 0..100 → 0..4 with stops at 10/30/55/80/100
var idx = v < 25 ? 0 : v < 50 ? 1 : v < 75 ? 2 : v < 95 ? 3 : 4;
var t = tiers[idx];
priceEl.textContent = t.price.toLocaleString();
unitsEl.textContent = fmtUnits(t.units) + ' requests';
// strip the trailing " requests" when re-using textContent below — show only the formatted number
unitsEl.textContent = fmtUnits(t.units);
tierEl.textContent = t.name;
range.style.setProperty('--ps-slr-fill', v + '%');
range.setAttribute('aria-valuetext',
fmtUnits(t.units) + ' requests, ' + t.name + ' tier, ' + t.price + ' dollars per month');
}
range.addEventListener('input', update);
update();
})();