Agent-readable total offer price

<div class="offer"><div class="brief">SHOPPING AGENT <b>BUDGET $60</b></div><div class="compare"><div class="card"><small>MERCHANT OFFER</small><strong>$50</strong><span id="fees">+ $8 DELIVERY</span></div><div class="arrow">→</div><div class="decision"><small>FULL COST</small><strong id="total">$58</strong><span id="decision">WITHIN BUDGET</span></div></div><button id="reveal">HIDE DELIVERY</button></div>

.offer{width:min(92%,560px);font:800 clamp(10px,2.5vmin,14px)/1.2 sans-serif}.brief{display:flex;justify-content:space-between;gap:6px;padding-bottom:10px;border-bottom:2px solid var(--fg)}.brief b{color:var(--accent)}.compare{display:flex;align-items:center;gap:7px;margin-top:11px}.card,.decision{flex:1;min-width:0;border:2px solid var(--line);background:var(--surface);padding:clamp(9px,2.5vmin,17px)}.decision{border-color:var(--accent)}.compare small,.compare span,.compare strong{display:block}.compare small{font-size:10px}.compare strong{font-size:clamp(25px,7vmin,50px);margin:5px 0}.decision strong{color:var(--accent)}.arrow{font-size:clamp(20px,6vmin,40px);color:var(--accent)}button{display:block;margin:10px auto 0;border:0;background:var(--fg);color:var(--bg);padding:7px 11px;font:inherit;cursor:pointer}@media(min-width:700px){.offer{font-size:13px}.compare small{font-size:12px}}@media(min-width:700px){body>:first-child{transform:scale(1.25);transform-origin:center}}

let clear=true;function draw(){document.querySelector('#fees').textContent=clear?'+ $8 DELIVERY':'DELIVERY UNKNOWN';document.querySelector('#total').textContent=clear?'$58':'?';document.querySelector('#decision').textContent=clear?'WITHIN BUDGET':'WAIT FOR FULL PRICE';document.querySelector('#reveal').textContent=clear?'HIDE DELIVERY':'REVEAL DELIVERY'}document.querySelector('#reveal').onclick=()=>{clear=!clear;draw()};draw();setTimeout(()=>{clear=false;draw()},650);setTimeout(()=>{clear=true;draw()},1450);