Decoy effect

<div class="decoy"><div class="decoyTitle">COMPARE REAL PLANS <button id="decoyToggle">REMOVE C</button></div><div class="plans"><div><b>A</b><span>$12</span><small>2 TOOLS</small></div><div class="best"><b>B</b><span>$18</span><small>5 TOOLS</small></div><div class="third" id="third"><b>C</b><span>$18</span><small>3 TOOLS</small></div></div><div class="decoyNote" id="decoyNote">C MAKES B EASIER TO COMPARE</div></div>

@media(min-width:700px){body>div{transform:scale(1.45)}}.decoy{width:min(90%,560px);font:800 clamp(10px,max(1.7vmin,1vw),13px)/1.1 sans-serif}.decoyTitle{display:flex;justify-content:space-between;align-items:center;gap:5px}.decoyTitle button{border:1px solid var(--fg);background:var(--surface);color:var(--fg);padding:clamp(4px,1vmin,8px);font:inherit;cursor:pointer}.plans{display:flex;gap:clamp(4px,1.5vmin,10px);margin:clamp(9px,3vmin,21px) 0}.plans>div{flex:1;min-width:0;padding:clamp(6px,2vmin,16px);background:var(--surface);border:2px solid var(--line);transition:.4s}.plans>div.best{border-color:var(--accent)}.plans>div.third{border-style:dashed}.plans>div.hidden{visibility:hidden;opacity:0;transform:scale(.8)}.plans b,.plans span,.plans small{display:block}.plans b{color:var(--accent)}.plans span{font-size:clamp(17px,5vmin,38px);margin:clamp(4px,1vmin,10px) 0}.plans small{font-size:clamp(10px,max(1.5vmin,1vw),12px)}.decoyNote{color:var(--accent);letter-spacing:.04em}

const third=document.querySelector('#third');const button=document.querySelector('#decoyToggle');const note=document.querySelector('#decoyNote');let has=true;function show(){third.classList.toggle('hidden',!has);button.textContent=has?'REMOVE C':'ADD C';note.textContent=has?'C MAKES B EASIER TO COMPARE':'A AND B STAY THE SAME'}let manual=false;setTimeout(()=>{if(!manual){has=false;show()}},500);const timer=setInterval(()=>{has=!has;show()},2500);button.addEventListener('click',()=>{manual=true;clearInterval(timer);has=!has;show()});