Sales referral email: a clear paragraph to share

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

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Sales referral email: a clear paragraph to share</title><style>:root{--paper:#fff6f0;--ink:#362d31;--accent:#913e4b;--surface:#fffdfb;--border:#decac7;--wash:#f6e7e3;--muted:#665057;--title:system-ui,sans-serif;--radius:3px;--buttonText:#fff}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 system-ui,sans-serif}main{max-width:980px;margin:auto;padding:24px 26px 48px}header{margin-bottom:20px;border-bottom:2px solid var(--accent);padding-bottom:16px}h1{font:700 clamp(28px,5vw,42px)/1.18 var(--title);margin:0 0 10px;letter-spacing:-.025em}h2{font-size:23px;line-height:1.35;margin:24px 0 12px}h3{font-size:19px}p{margin:0 0 16px}.eyebrow{font-size:16px;color:var(--accent);font-weight:700;margin:0 0 5px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;min-width:0;margin-bottom:20px}label{display:block;font-weight:650;margin-bottom:14px}input,textarea,select{display:block;font:inherit;line-height:1.5;width:100%;min-width:0;color:var(--ink);background:var(--surface);border:1px solid var(--accent);border-radius:5px;padding:9px 11px;margin-top:5px}textarea{resize:vertical}button{font:650 16px/1.5 system-ui;min-height:44px;padding:9px 16px;color:var(--buttonText);background:var(--accent);border:1px solid var(--accent);border-radius:5px;cursor:pointer;margin:4px 6px 4px 0}button[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:2px}button:disabled{opacity:.55;cursor:default}:focus-visible{outline:3px solid #b86d10;outline-offset:3px}.result{border-left:4px solid var(--accent);background:var(--wash);padding:15px;margin:16px 0;white-space:pre-line;overflow-wrap:anywhere;font-weight:600}.result:empty{display:none}pre{font:16px/1.55 ui-monospace,Consolas,monospace;background:var(--wash);padding:16px;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--border);border-radius:5px}code{overflow-wrap:anywhere}.note{font-size:16px;color:var(--muted)}.row{border-bottom:1px solid var(--border);padding:12px 0}.row strong{display:block}table{width:100%;border-collapse:collapse;font-size:16px;table-layout:fixed}th,td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--border);overflow-wrap:anywhere}th{background:var(--wash)}a{color:var(--accent);overflow-wrap:anywhere}footer{border-top:1px solid var(--border);padding-top:16px;font-size:16px;color:var(--muted)}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:330px}.tile{padding:16px;text-align:center;background:var(--wash);border:1px solid var(--border);font-size:22px}svg,canvas{max-width:100%;height:auto}mark{background:#d5f525;color:#202600}ol,ul{padding-left:24px}li{margin-bottom:9px}[hidden]{display:none!important}@media(max-width:640px){main{padding:18px 16px 36px}.grid{grid-template-columns:1fr;gap:0}.panel{padding:17px}header{padding-bottom:12px;margin-bottom:16px}h1{font-size:29px}th,td{padding:8px 5px}h2{margin-top:18px}}</style></head><body><main><header><p class="eyebrow">Original worked example</p><h1>Sales referral email: a clear paragraph to share</h1><p>Fictional Drew and Morgan. Prepare a forwardable description without inventing endorsement or recipient interest.</p></header><section class="panel"><h2>B1 · Forwardable paragraph</h2><pre id="blurb" tabindex="0"></pre><label for="contact">Sender-supplied contact<input id="contact" type="text" value=""></label><button id="build" type="button">Build paragraph</button><button id="revise" type="button">Revise description</button><div class="result" id="result" role="status" aria-live="polite"></div></section><section class="panel"><h2>R1 · Request to Morgan</h2><p>Subject: Could you pass along a handbook-editing introduction?</p><p>Hi Morgan, would you be comfortable passing the short description below to someone who chooses to learn more? Please use only the version we approve. You do not need to send anyone’s private contact details. If you would rather not share it, that is fine.</p></section><section class="panel"><h2>Separate actual records</h2><p>Wording approval: pending. Name-use permission: unknown. Joint-introduction permission: unknown. Forwarding event: not recorded. Recipient reply: not recorded.</p></section><footer>Fictional drafting controls do not send mail or establish permission, forwarding or recipient interest. Changes are temporary. No data is sent or saved.</footer></main><script>
(() => {
'use strict';
const $=selector=>document.querySelector(selector);
const on=(selector,handler)=>$(selector).addEventListener('click',handler);
(function(){let version=1;function build(){const contact=$('#contact').value.trim();$('#blurb').textContent='I am Drew, a handbook editor. I help small teams '+(version===1?'clarify instructions in their own draft.':'guarantee error-free handbooks.')+' If you would like to discuss your handbook, you can contact me at '+(contact||'[SENDER-SUPPLIED CONTACT]')+'.';$('#result').textContent='B1 version '+version+'. '+(!contact?'Contact unresolved. ':'')+(version===2?'Stronger guarantee claim requires support and fresh review. ':'')+'Wording review pending; no forwarding recorded.';}on('#build',build);on('#revise',()=>{version=2;build();});$('#contact').addEventListener('input',()=>{$('#result').textContent='Contact changed. Build a new review paragraph.';});build();})();
})();
</script></body></html>