Pricing fairness signal

<div class="fair"><div class="ticket"><div class="head">TODAY'S OFFER <strong>$58</strong></div><div class="was">REFERENCE PRICE <s>$50</s></div><div class="reason" id="reason">WHY $8 MORE? <b>PEAK DELIVERY WINDOW</b></div></div><button id="explain">HIDE REASON</button><div class="status" id="status">RULE VISIBLE · BUYER CAN COMPARE</div></div>

.fair{width:min(90%,510px);font:800 clamp(10px,2.5vmin,14px)/1.25 sans-serif}.ticket{background:var(--surface);border:2px solid var(--fg);padding:clamp(9px,3vmin,18px)}.head,.was,.reason{display:flex;align-items:center;justify-content:space-between;gap:8px}.head strong{font-size:clamp(28px,8vmin,55px);color:var(--accent)}.was{padding:8px 0;border-top:1px solid var(--line);color:var(--muted)}.reason{padding:9px 0 0;border-top:1px dashed var(--line)}.reason b{color:var(--accent)}.reason.hidden{visibility:hidden}button{margin-top:10px;border:0;background:var(--fg);color:var(--bg);padding:7px 12px;font:inherit;cursor:pointer}.status{margin-top:7px;color:var(--muted)}@media(min-width:700px){.fair{font-size:13px}}@media(min-width:700px){body>:first-child{transform:scale(1.25);transform-origin:center}}

let shown=true;function draw(){document.querySelector('#reason').classList.toggle('hidden',!shown);document.querySelector('#explain').textContent=shown?'HIDE REASON':'SHOW REASON';document.querySelector('#status').textContent=shown?'RULE VISIBLE · BUYER CAN COMPARE':'RULE HIDDEN · PRICE HARDER TO JUDGE'}document.querySelector('#explain').onclick=()=>{shown=!shown;draw()};draw();setTimeout(()=>{shown=false;draw()},650);setTimeout(()=>{shown=true;draw()},1450);