Three buyer concerns, supported responses and open verification checks

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>A fair answer, a useful next question</title><style>
:root{font:16px/1.6 system-ui,sans-serif;color:#20352d;background:#f3f2e9}*{box-sizing:border-box}body{margin:0}main{max-width:1000px;margin:auto;padding:24px}h1{font:700 2.4rem/1.15 Georgia,serif;margin:12px 0 18px;max-width:19ch}h2{font:700 1.65rem/1.25 Georgia,serif}h3{font-size:1.12rem}p{margin:12px 0}.eyebrow{font-weight:700;letter-spacing:.06em}.boundary{padding:16px;border-left:5px solid #b36d27;background:#fff5df}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}button,textarea{font:inherit}button{padding:11px 14px;border:1px solid #426752;border-radius:5px;background:#fff;color:#20352d;cursor:pointer;min-height:46px;white-space:normal;text-align:left}button[aria-pressed=true]{background:#203f30;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #b35412;outline-offset:3px}section{margin:24px 0}.cue{border:1px solid #9bafa0;background:#fff}.cue-head{background:#203f30;color:white;padding:20px}.cue-head h2{margin:0}.cue-grid{display:grid;grid-template-columns:1fr 1fr}.response{padding:22px;grid-column:1/-1;background:#eaf1e8;border-bottom:1px solid #bdcbbf}.response p{font:1.25rem/1.65 Georgia,serif}.question,.internal{padding:22px}.internal{background:#f6f3e7;border-left:1px solid #bdcbbf}.label{font-weight:700;margin-top:0}.sources{background:#e7ece9;padding:20px;border:1px solid #b2c0b6}.source-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.source-card{padding:18px;background:white;border-top:4px solid #426752}.comparison{padding:20px;background:#fff5df;margin-top:16px}.comparison blockquote{margin:12px 0;padding-left:16px;border-left:3px solid #b36d27}.scaffold{padding:22px;background:#fff;border:1px solid #b2c0b6}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:block;font-weight:650}textarea{display:block;width:100%;min-height:105px;margin-top:7px;padding:10px;border:1px solid #668773;border-radius:3px;resize:vertical;background:white;color:#20352d;overflow-wrap:anywhere}.wide{grid-column:1/-1}.confirm{padding:16px;background:#fff5df;margin:16px 0}footer{padding:20px 0;border-top:1px solid #aab9ae}#status{min-height:3em}[hidden]{display:none!important}@media(max-width:520px){main{padding:18px}h1{font-size:2rem}.cue-grid,.fields,.source-grid{grid-template-columns:1fr}.response,.wide{grid-column:auto}.internal{border-left:0;border-top:1px solid #bdcbbf}.toolbar>button{flex:1 1 100%}}
</style></head><body><main>
<header><p class="eyebrow">INTERNAL PRACTICE · ORIGINAL FICTIONAL TOOLS</p><h1>A fair answer, a useful next question.</h1><p>CedarDesk compared with MapleSlot. Start with what the buyer asks, then keep your words and your verification notes separate.</p><p class="boundary">Teaching fixture only. Prices, plan versions and observation dates are TO CONFIRM. These descriptions have not been tested. No real vendors, calls or sales results are represented.</p></header>
<nav class="toolbar" aria-label="Buyer concerns"><button id="approval" aria-pressed="true">Does it handle approval?</button><button id="price" aria-pressed="false">Is MapleSlot cheaper?</button><button id="link" aria-pressed="false">We only need a booking link.</button></nav>
<section class="cue" aria-labelledby="concern"><div class="cue-head"><p class="eyebrow">BUYER CONCERN</p><h2 id="concern">Does MapleSlot handle approval?</h2></div><div class="cue-grid"><div class="response"><h3>Words you can say</h3><p id="response">The CedarDesk brief includes an approval step. The MapleSlot listing we have does not specify approval behavior, so we need to check that before comparing the two.</p></div><div class="question"><h3>Ask next</h3><p id="question">Who needs to approve a booking, and when should that happen?</p></div><div class="internal"><h3>Check before making this claim</h3><p id="check">Verify the actual MapleSlot plan and its approval behavior. Confirm that CedarDesk's documented step fits the buyer's required sequence.</p><p id="evidence">Sources: S1 and S2. Unlisted approval behavior remains unknown.</p></div></div></section>
<section><button id="source-toggle" aria-expanded="false" aria-controls="sources">Read the two source cards</button><div id="sources" class="sources" hidden><h2>The entire evidence set</h2><div class="source-grid"><article class="source-card"><h3>S1 · CedarDesk package brief</h3><p>One team calendar and an approval step.</p><p>Price, plan version and observation date: TO CONFIRM. Booking-link behavior is not specified.</p></article><article class="source-card"><h3>S2 · MapleSlot listing</h3><p>One calendar and a shareable booking link.</p><p>Approval behavior, price, plan version and observation date: TO CONFIRM.</p></article></div><p>Original fictional source notes. A listed feature has not been tested; an omitted feature is not proved absent.</p></div></section>
<section><button id="compare" aria-expanded="false" aria-controls="comparison">Revise an unsupported claim</button><div id="comparison" class="comparison" hidden><h2>Keep the distinction. Remove the guess.</h2><h3>Unsupported draft</h3><blockquote>MapleSlot cannot handle approvals. CedarDesk is the better choice.</blockquote><h3>Fair revision</h3><blockquote>The CedarDesk brief includes an approval step. MapleSlot's listing does not specify its approval behavior. What approval sequence do you need?</blockquote><p>The revision removes an unsupported absence claim and an overall verdict. It does not answer the unknown price question or test either tool.</p></div></section>
<section class="scaffold"><h2>Your blank call-reference notes</h2><p>These temporary fields are separate from the worked card. Use permitted facts and your actual approved sales wording. No verification, approval or customer message is generated.</p><div class="fields">
<label>Our actual offering and plan<textarea id="own-offering"></textarea></label><label>Actual alternative and plan<textarea id="own-alternative"></textarea></label>
<label>The buyer's concern<textarea id="own-concern"></textarea></label><label>Supported customer response<textarea id="own-response"></textarea></label>
<label>Next question<textarea id="own-question"></textarea></label><label>Source IDs, supported facts, dates and versions<textarea id="own-evidence"></textarea></label>
<label>Internal unknowns, check owner and claims to avoid<textarea id="own-check"></textarea></label><label>Card owner, actual last check and next review trigger<textarea id="own-review"></textarea></label>
</div><div class="toolbar"><button id="reset" aria-expanded="false" aria-controls="confirmation">Clear my notes</button></div><div id="confirmation" class="confirm" hidden><p>Clear all eight temporary fields? The fictional card and selected concern will stay as they are.</p><div class="toolbar"><button id="keep">Keep my notes</button><button id="clear">Clear all eight fields</button></div></div><p id="status" role="status" aria-live="polite">All eight fields are blank. No claim has been checked here.</p></section>
<footer>Typing lasts in this open page and disappears on reload. Nothing is sent, stored or synchronized with a CRM. Keep approved sources and sales material in your team's maintained workflow.</footer>
</main><script>
'use strict';
const byId=id=>document.getElementById(id);
const concerns={approval:{title:'Does MapleSlot handle approval?',response:'The CedarDesk brief includes an approval step. The MapleSlot listing we have does not specify approval behavior, so we need to check that before comparing the two.',question:'Who needs to approve a booking, and when should that happen?',check:"Verify the actual MapleSlot plan and its approval behavior. Confirm that CedarDesk's documented step fits the buyer's required sequence.",evidence:'Sources: S1 and S2. Unlisted approval behavior remains unknown.'},price:{title:'Is MapleSlot cheaper?',response:"We do not have comparable prices yet. Let's compare the actual plans that cover your required booking and approval steps.",question:'Which plan are you considering, and what must be included?',check:'Obtain current pricing for both relevant plans and confirm the same scope and pricing basis. Do not fill the gap with an estimate.',evidence:'Sources: S1 and S2. Neither source supplies a price.'},link:{title:'We only need a simple booking link.',response:'The MapleSlot listing includes a shareable booking link. If that is the full requirement, let\'s check whether it covers the workflow you need before adding an approval step you may not use.',question:'Can people book directly, or does anyone need to review the booking first?',check:"Confirm the actual link behavior and requirements. S1 does not specify CedarDesk's booking-link behavior; leave that unknown too.",evidence:'Source: S2 for the listed link. No overall winner is established.'}};
for(const [id,data]of Object.entries(concerns))byId(id).addEventListener('click',()=>{for(const key of Object.keys(concerns))byId(key).setAttribute('aria-pressed',String(key===id));byId('concern').textContent=data.title;for(const key of ['response','question','check','evidence'])byId(key).textContent=data[key];});
function disclosure(button,panel,openLabel,closeLabel){byId(button).addEventListener('click',()=>{const open=byId(button).getAttribute('aria-expanded')!=='true';byId(button).setAttribute('aria-expanded',String(open));byId(panel).hidden=!open;byId(button).textContent=open?closeLabel:openLabel;});}
disclosure('source-toggle','sources','Read the two source cards','Hide the source cards');disclosure('compare','comparison','Revise an unsupported claim','Hide the revision');
const fields=['own-offering','own-alternative','own-concern','own-response','own-question','own-evidence','own-check','own-review'];
function closeConfirmation(){byId('confirmation').hidden=true;byId('reset').setAttribute('aria-expanded','false');}
for(const id of fields)byId(id).addEventListener('input',()=>{byId('status').textContent="Draft changed. Review your current claim notes and verification needs.";});byId('reset').addEventListener('click',()=>{byId('confirmation').hidden=false;byId('reset').setAttribute('aria-expanded','true');byId('keep').focus();});
byId('keep').addEventListener('click',()=>{closeConfirmation();byId('status').textContent='Kept all eight fields. No claim has been checked here.';byId('reset').focus();});
byId('clear').addEventListener('click',()=>{for(const id of fields)byId(id).value='';closeConfirmation();byId('status').textContent='All eight fields were cleared. Worked card and selected concern are unchanged.';byId('own-offering').focus();});
</script></body></html>