Inspect a same-factor poster-service comparison and the unanswered positioning question

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"><title>Poster offers · compare the same factors</title><style>*{box-sizing:border-box}body{margin:0;background:#eff2f6;color:#35485a;font:16px/1.55 system-ui,sans-serif}main{max-width:1040px;margin:auto;padding:24px}h1{font-size:34px;line-height:1.16}h2{font-size:24px}h3{font-size:19px}.eyebrow{letter-spacing:.06em;color:#687d93}.card{padding:20px;margin:18px 0;background:white;border:1px solid #c8d1df;border-radius:6px}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;background:white;border:1px solid #7187a2;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#486681;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #b7782a;outline-offset:3px}.matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.matrix>section{padding:16px;background:#f0f5f7;border-top:6px solid #77969e}.matrix>section:first-child{background:#fff8e8;border-color:#b79246}.source{font-size:16px;border-top:1px solid #bdcdd8;padding-top:12px}.question{background:#eef5ef;border-left:6px solid #7a9980}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px}.comparison>div{padding:16px;background:#f2f4f7}label{display:block;font-weight:650;margin:14px 0 6px}textarea{width:100%;min-width:0;max-width:100%;min-height:95px;padding:10px;border:1px solid #96a8bc;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7b541d}footer{margin:24px 0;color:#667d92}[hidden]{display:none!important}@media(max-width:650px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.matrix,.comparison{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">FICTIONAL OFFER CARDS · SMALL CLUBS PREPARING POSTERS FROM SUPPLIED COPY</p><h1>Keep your own gaps in the comparison</h1><p>These are authored specimens, not real business observations or market-demand evidence. Dates and all prices are unsupplied.</p><button id="indirect" type="button" aria-pressed="false">Include indirect alternative</button><p id="coverage" role="status">Coverage: A own offer and B direct alternative.</p><div id="factors" class="tabs" aria-label="Common comparison factor"></div><section class="card"><h2 id="factor-title">Who does the formatting?</h2><div class="matrix"><section><h3>A · own draft offer</h3><p id="value-a">Service provider.</p><p class="source">Source A: custom event-poster formatting from supplied copy, including one revision. No price or output format supplied. Date not supplied.</p></section><section><h3>B · direct layout service</h3><p id="value-b">Layout-service provider.</p><p class="source">Source B: two revisions and print-ready PDF. Turnaround and price not supplied. Date not supplied.</p></section><section id="c" hidden><h3>C · indirect DIY template pack</h3><p id="value-c">The club using editable layouts.</p><p class="source">Source C: editable layouts without bespoke editing. Actual user effort and price not supplied. Date not supplied.</p></section></div><p id="factor-question">Ask prospective clubs which formatting work they want to keep or hand off. No preference is supplied.</p></section><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare ranking claim and strategic question</button><section id="comparison" class="card" hidden><h2>What can these source cards support?</h2><div class="comparison"><div><h3>Unsupported ranking</h3><p>Our offer is fastest and cheapest.</p><p>All prices are unknown; service turnaround times are not stated. A missing fact is not an alternative's weakness.</p></div><div><h3>Bounded strategic question</h3><p>Could the own offer serve clubs that want layout help from copy they already have, once its output format, preparation work, time and price are defined?</p></div></div></section><section class="card question"><h2>Research the gaps before positioning</h2><ol><li>Clarify A's own output format, scope, preparation work, time and price.</li><li>Obtain current comparable references for direct and indirect alternatives.</li><li>Ask clubs about the work they want to do themselves or hand off.</li></ol><p>C may suit a club willing to customize a poster. Actual effort and preference remain unknown; it is not automatically inferior. Adding a fact differs from interpreting its importance to a customer.</p></section><section class="card"><h2>Your same-factor comparison and research notes</h2><div id="fields"></div><div class="tabs"><button id="build" type="button">Build recommendation review</button><button id="reset" type="button">Reset typed work</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all ten comparison fields?</h3><div class="tabs"><button id="keep" type="button">Keep my comparison</button><button id="clear" type="button">Clear typed comparison</button></div></section><section id="review" class="card copy" hidden><h3>Your supplied comparison note</h3><div id="copy"></div><p>Supplied facts and interpretation for review. No winner, market share, live market data or customer demand has been established.</p></section></section><footer>Temporary notes only; no saved research record. Apply the same factors to your own offer and the alternatives, and keep unknowns visible.</footer></main><script>'use strict';const $=id=>document.getElementById(id),factors=[['formatting','Who does the formatting?','Service provider.','Layout-service provider.','The club using editable layouts.','Ask prospective clubs which formatting work they want to keep or hand off. No preference is supplied.'],['revisions','Revision scope','One revision.','Two revisions.','No bespoke editing described.','Clarify what each revision covers before treating the counts as comparable.'],['output','Output format','Not supplied.','Print-ready PDF.','Editable layouts; final output conditions not supplied.','Clarify A’s missing output format as well as C’s final output conditions.'],['work','Required club work','Supply the copy; other preparation unknown.','Preparation requirements not supplied.','Customize the layouts; actual effort unknown.','Do not invent effort estimates or infer that the DIY alternative is inferior.'],['turnaround','Turnaround','Unknown.','Unknown.','Depends on work not measured in this record.','Obtain comparable conditions before making any fastest claim.'],['price','Price and basis','Unknown.','Unknown.','Unknown.','No cheapest claim is supported. Ask for the same pricing basis and scope.'],['currency','Source currency','Date not supplied.','Date not supplied.','Date not supplied.','Obtain dated current references before making real public comparisons.']];for(const[id,title,a,b,c,question]of factors){const button=document.createElement('button');button.type='button';button.id=id;button.textContent=title;button.setAttribute('aria-pressed',String(id==='formatting'));button.addEventListener('click',()=>{for(const[key]of factors)$(key).setAttribute('aria-pressed',String(id===key));$('factor-title').textContent=title;$('value-a').textContent=a;$('value-b').textContent=b;$('value-c').textContent=c;$('factor-question').textContent=question;});$('factors').append(button);}$('indirect').addEventListener('click',()=>{const include=$('c').hidden;$('c').hidden=!include;$('indirect').setAttribute('aria-pressed',String(include));$('coverage').textContent=include?'Coverage: A own offer, B direct alternative and C indirect DIY substitute.':'Coverage: A own offer and B direct alternative.';});$('compare').addEventListener('click',()=>{const open=$('comparison').hidden;$('comparison').hidden=!open;$('compare').setAttribute('aria-expanded',String(open));});const fields=[['segment','Customer segment'],['task','Specific customer task · required'],['own','Own offer and factual gaps'],['direct','Direct alternatives'],['substitute','Indirect substitutes'],['common','Common factors'],['source','Source references and dates or known absence · required'],['unknown','Unknowns and limits'],['rationale','Interpretation / recommendation rationale · required'],['next','Next research questions']];for(const[id,label]of fields){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label;t.id=id;t.addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Comparison notes changed. Build again to review current wording.';});$('fields').append(l,t);}$('build').addEventListener('click',()=>{const missing=['task','source','rationale'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>({task:'customer task',source:'source references',rationale:'rationale'})[id]).join(', ')+'.';return;}$('copy').replaceChildren();for(const[id,title]of fields){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=title;p.textContent=$(id).value.trim()||'Not supplied.';$('copy').append(h,p);}$('review').hidden=false;$('status').textContent='Comparison review assembled from supplied words.';});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('reset').focus();});$('clear').addEventListener('click',()=>{for(const[id]of fields)$(id).value='';$('review').hidden=true;$('confirm').hidden=true;$('status').textContent='Ten comparison fields cleared. Source cards, factor and coverage unchanged.';$('task').focus();});</script></body></html>