Frequency capping

<div class="cap"><div class="header">WEEKLY LIMIT <b>3</b></div><div class="slots"><span>SEND 1</span><span>SEND 2</span><span>SEND 3</span><span>SEND 4</span></div><div class="gate" id="gate">1 / 3 SENT</div></div>

.cap{width:min(92%,630px);font:800 clamp(10px,3.2vmin,15px)/1.2 var(--font-sans)}.header{display:flex;justify-content:space-between;border-bottom:2px solid var(--fg);padding-bottom:clamp(8px,2vmin,15px)}.header b{color:var(--accent)}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(4px,1.3vmin,10px);margin-top:clamp(12px,3vmin,24px)}.slots span{min-height:clamp(50px,13vmin,95px);display:grid;place-items:center;text-align:center;padding:2px;border:2px solid var(--line);color:var(--muted);transition:.3s}.slots span.sent{background:var(--accent);border-color:var(--accent);color:white}.slots span.blocked{border-color:var(--fg);color:var(--fg);text-decoration:line-through}.gate{margin-top:clamp(12px,3vmin,24px);background:var(--fg);color:var(--bg);padding:clamp(7px,2vmin,14px);text-align:center}.gate.blocked{background:var(--accent);color:white}

let request=0;function show(){const count=Math.min(request+1,3);document.querySelectorAll('.slots span').forEach((el,i)=>{el.classList.toggle('sent',i<=request&&i<3);el.classList.toggle('blocked',request===3&&i===3)});const gate=document.querySelector('#gate');gate.textContent=request===3?'SEND 4 BLOCKED':count+' / 3 SENT';gate.classList.toggle('blocked',request===3);const wait=request===3?2300:450;request=(request+1)%4;setTimeout(show,wait)}show();