Original export fixture: $480 Essential or $720 Extended. Confirmation stays on this page and is not an order.

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="nos-demo-layout" content="responsive-lab"><title>Standalone package estimate fixture</title><style>*{box-sizing:border-box}body{margin:0;background:#eeeae1;color:#292b27;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:940px;margin:32px auto;background:#fffdf7;padding:34px clamp(18px,5vw,48px);border-top:5px solid #a94e28}h1{font:500 clamp(34px,5vw,51px)/1.12 Georgia,serif;max-width:720px;margin:17px 0}h2{font:500 25px/1.3 Georgia,serif;margin:24px 0 12px}p{margin:12px 0}.eyebrow{font-size:13px;letter-spacing:.13em;font-weight:750;color:#6d5040}.intro{max-width:650px;color:#595b52}.stamp{border-top:1px solid #d9d6ca;margin-top:28px;padding-top:17px;color:#686a5e;font-size:14px}.panel{padding:23px;background:#f0eee4;border:1px solid #d9d5c6;margin-top:22px}.result{font:500 49px/1.2 Georgia,serif;color:#864021;margin:12px 0}.note{padding:14px 17px;border-left:3px solid #a94e28;background:#f7ebda;color:#514535}button,select{font:inherit;max-width:100%}button{padding:10px 17px;border:1px solid #bab9ac;background:white;color:#30392d;cursor:pointer;border-radius:3px}button[aria-pressed=true],button.active{color:white;background:#314939;border-color:#314939}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #c9652b;outline-offset:4px}.controls{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}select{padding:11px;background:white;color:#293128;border:1px solid #9c9d90;width:100%;margin-top:8px}.label{font-weight:650}small{font-size:14px}table{width:100%;border-collapse:collapse;margin:20px 0}th,td{padding:12px 7px;border-bottom:1px solid #d9d5c6;text-align:left;font-variant-numeric:tabular-nums}th:last-child,td:last-child{text-align:right}svg{max-width:100%;height:auto}.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}.hide{display:none}@media(max-width:600px){main{margin:0;padding:24px 18px 30px}h1{font-size:37px}.two{grid-template-columns:1fr}.panel{padding:18px}.result{font-size:43px}}@media print{body{background:white}main{margin:0;border-top:3px solid #a94e28}}</style></head><body><main><p class="eyebrow">NORTH STUDIO / REVIEW COPY</p><h1>Pick the scope.<br>See the difference.</h1><p class="intro">An original fictional estimate for a small site refresh. Both variants run inside this HTML file. No AI service, external image, or database is connected.</p><div class="controls" role="group" aria-label="Package"><button type="button" data-plan="essential" aria-pressed="true">Essential</button><button type="button" data-plan="extended" aria-pressed="false">Extended</button></div><section class="panel"><p class="eyebrow" id="package">ESSENTIAL / FIXED SCOPE</p><div class="result" id="price">$480</div><p id="scope">One landing page, supplied copy, and one revision round.</p><button type="button" id="confirm">Review this choice</button><p id="feedback" aria-live="polite">No choice confirmed.</p></section><h2>What this copy preserves</h2><p>Changing variants updates the price and scope. The confirmation button displays the selected package on this page only.</p><p class="note">This does not place an order or save a record. Reloading starts again with Essential.</p><footer class="stamp">Fictional example · Browser-only behavior · No network requests</footer></main><script>let selected='essential';const plans={essential:['ESSENTIAL / FIXED SCOPE','$480','One landing page, supplied copy, and one revision round.'],extended:['EXTENDED / FIXED SCOPE','$720','One landing page, supplied copy, and three revision rounds.']};const buttons=[...document.querySelectorAll('[data-plan]')];buttons.forEach(b=>b.addEventListener('click',()=>{selected=b.dataset.plan;['package','price','scope'].forEach((id,i)=>document.getElementById(id).textContent=plans[selected][i]);buttons.forEach(x=>x.setAttribute('aria-pressed',String(x===b)));document.querySelector('#feedback').textContent='No choice confirmed.';}));document.querySelector('#confirm').addEventListener('click',()=>{document.querySelector('#feedback').textContent='Reviewing '+(selected==='essential'?'Essential':'Extended')+' at '+plans[selected][1]+'. Nothing was sent or saved.';});</script></body></html>