.wpb{--c-marketing:#d97706;--c-utility:#0891b2;--c-authentication:#7c3aed;grid-template-columns:minmax(0,1fr);gap:16px;display:grid}.wpb-bill,.wpb-controls{box-sizing:border-box;border:1px solid var(--border);background:var(--surface);min-width:0;box-shadow:0 30px 60px -40px color-mix(in srgb, var(--tl) 45%, transparent);border-radius:24px;grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;padding:20px 16px;display:grid}[data-cat=marketing]{--c:var(--c-marketing)}[data-cat=utility]{--c:var(--c-utility)}[data-cat=authentication]{--c:var(--c-authentication)}.wpb-bill{text-align:center;justify-items:center}.wpb-caption{color:var(--muted,#64748b);font-size:13px;font-weight:700}.wpb-total{letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--heading);font-size:clamp(42px,12vw,64px);line-height:1}.wpb-bar{background:var(--surface-alt,#f1f5f9);border-radius:999px;width:100%;height:22px;position:relative;overflow:hidden}.wpb-seg{background:var(--c);transform-origin:0;transition:transform .5s cubic-bezier(.77,0,.175,1);position:absolute;inset:0}.wpb-legend{color:var(--text);flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:0;padding:0;font-size:13px;list-style:none;display:flex}.wpb-legend li{align-items:center;gap:6px;display:inline-flex}.wpb-legend i{background:var(--c);border-radius:3px;width:10px;height:10px}.wpb-legend b{font-variant-numeric:tabular-nums;color:var(--heading)}.wpb-free{box-sizing:border-box;background:color-mix(in srgb, #16a34a 10%, var(--surface));text-align:left;width:100%;min-height:48px;color:var(--heading);border-radius:14px;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin:0;padding:0 14px;font-size:14px;display:grid}.wpb-free svg,.wpb-free b{color:#15803d}.wpb-row{border-top:1px solid var(--border);grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:12px 0;display:grid}.wpb-icon{background:color-mix(in srgb, var(--c) 14%, var(--surface));width:40px;height:40px;color:var(--c);border-radius:12px;place-items:center;display:grid}.wpb-label{min-width:0;color:var(--heading);font-size:14px;display:grid}.wpb-label small{font-variant-numeric:tabular-nums;color:var(--muted,#64748b);font-size:12px}.wpb-cost{font-variant-numeric:tabular-nums;color:var(--heading);font-size:16px}.wpb-row input[type=range]{cursor:pointer;appearance:none;background:0 0;grid-column:1/3;width:100%;height:44px;margin:0}.wpb-row input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--c) var(--fill), var(--surface-alt,#e2e8f0) var(--fill));border-radius:999px;height:8px}.wpb-row input[type=range]::-moz-range-track{background:var(--surface-alt,#e2e8f0);border-radius:999px;height:8px}.wpb-row input[type=range]::-moz-range-progress{background:var(--c);border-radius:999px;height:8px}.wpb-row input[type=range]::-webkit-slider-thumb{border:4px solid var(--surface);background:var(--c);width:26px;height:26px;box-shadow:0 6px 14px -6px var(--c);appearance:none;border-radius:50%;margin-top:-9px;transition:transform .16s ease-out}.wpb-row input[type=range]::-moz-range-thumb{border:4px solid var(--surface);background:var(--c);border-radius:50%;width:20px;height:20px}.wpb-row input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}.wpb-row input[type=range]:focus-visible{outline:2px solid var(--c);outline-offset:4px;border-radius:8px}.wpb-num{box-sizing:border-box;border:1px solid var(--border);background:var(--surface);width:104px;min-height:40px;font:inherit;font-variant-numeric:tabular-nums;text-align:right;color:var(--heading);border-radius:12px;padding:0 10px;font-size:15px;font-weight:700}@media (min-width:960px){.wpb{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px}.wpb-bill,.wpb-controls{padding:28px}.wpb-bill{align-self:start;position:sticky;top:96px}}@media (prefers-reduced-motion:reduce){.wpb-seg{transition:none}}