Paywall CTA Optimization

Rewrite or stress-test a paywall primary CTA with mechanism-backed alternatives, not generic copy advice.

CRITICAL: Output Behavior

This skill produces FILES, not a plan. Regardless of whether you are in plan mode or not, ALWAYS:

1. Write the HTML report to .lazyweb/paywall-cta/{topic}-{date}/report.html
2. Embed Lazyweb references directly with returned imageUrl / image_url; save only the current-state screenshot under .lazyweb/paywall-cta/{topic}-{date}/references/
3. Do NOT create report.md or any other Markdown report artifact
4. Do NOT write the CTA content into a plan file
5. After saving, summarize the top recommended CTA + 3-5 ranked alternatives and tell the user where the report is
6. Ask the user which direction looks right
7. If in plan mode, exit plan mode after the user confirms
8. Suggest next steps: "Ship the strongest candidate as an A/B test against the current CTA, or ask /lazyweb-paywall-optimization for a full paywall redesign, or /lazyweb-ab-test-research for deeper experiment mining."

When to Use This

• User wants to rewrite, evaluate, or stress-test ONE paywall CTA
• User has the paywall screenshot, the current CTA copy, and a clear conversion goal (paid start, trial start, plan select, upgrade, win-back)
• User asks "is this CTA right?" or "give me 5 better CTAs" or "what should this button say?"

When NOT to Use This

• Full paywall redesign / layout / pricing rework → route to lazyweb-paywall-optimization
• Onboarding / signup / non-paywall CTAs → route to lazyweb-design-research or lazyweb-quick-references
• "Find me A/B experiments about pricing copy" → route to lazyweb-ab-test-research

Lazyweb MCP Setup

Use hosted Lazyweb MCP tools at https://www.lazyweb.com/mcp for database-backed evidence. First list the available tools and run lazyweb_health.

Required public tools:

• lazyweb_health — verify Lazyweb MCP connectivity
• lazyweb_paywall_cta_research — paid; the core retrieval for this skill. Returns the CTA framework SOP plus the corpus slice, divergent examples, convention stats, brand-own references, and the broad pool of CTA-changed A/B observations the agent curates into "Strongest Matches."
• lazyweb_ab_test_research — paid; broader paywall A/B evidence when the user asks "what experiments have shipped on this?"
• lazyweb_search — free; visual paywall references and convention examples
• lazyweb_compare_image — free; visual similarity over the user's paywall image

Search discipline: never repeat an identical lazyweb_search query — results are deterministic; page deeper with offset and follow pagination.next_offset. On no_matches/low_coverage warnings, use the closest result or note the coverage gap — don't rephrase the same concept in a loop. On company_not_in_library, use a suggested company or drop the filter.

Pass skill: "paywall-cta" on every call. Include "skill": "paywall-cta" in the arguments of each lazyweb_* tool call — for example {"query": "pricing page", "limit": 30, "skill": "paywall-cta"}. This is optional analytics metadata Lazyweb uses to understand which skills are used; never drop or change a real argument for it.

Also pass version: "<x.y.z>" on every call. Read ~/.lazyweb/VERSION once per session at skill start (e.g. cat "$HOME/.lazyweb/VERSION" 2>/dev/null || echo 0.0.0); fall back to "0.0.0" if the file is missing or unreadable — never block on this. Include "version": "<that-value>" in the arguments of every lazyweb_* tool call alongside the existing skill arg — for example {"query": "pricing page", "limit": 30, "skill": "paywall-cta", "version": "0.4.5"}. Optional analytics metadata Lazyweb uses to track which skill-pack versions are running; never drop or change a real argument for it.

If Lazyweb MCP is not installed or auth fails, tell the user: "Lazyweb MCP is not installed. Run curl -fsSL https://www.lazyweb.com/install.sh | bash, reload this client, then rerun this skill." Continue with web research only if the user wants a degraded fallback.

The CTA wrapper is paid. If lazyweb_paywall_cta_research returns ab_test_subscription_required (the same paid-gate the A/B research tool uses), DO NOT abort. Include the returned paid-access details, then proceed into the locked-evidence rendering path below — the user still gets the full HTML report with intact hypotheses, ranked CTA candidates, and the "Current" UI screenshot; only the evidence/reference imagery is replaced with locked tiles.

Locked-evidence rendering (when paid access is missing)

When lazyweb_paywall_cta_research returns ab_test_subscription_required — OR when no Pro entitlement is available — still emit the full HTML report. Render a locked placeholder (.locked-ref, defined in HTML / styling below) in EVERY image slot except the user's Current paywall screenshot:

• Unblurred (1 image only): the Current/target paywall under "Read the paywall" — this is the user's own screen, never gate it.
• Locked (every other image): every CTA reference deck figure, every example brand-own card, every divergent/outlier example, every Strongest Match before/after pair, every recommendation card proof. Replace the <img> with a <a class="locked-ref" href="..."> tile (see markup below for the full href with UTMs). The .locked-ref rules in <style> already make it fill any deck figure / flip card / rec-proof frame.
• The locked tile shows a centered lock icon + a per-slot caption + a "Get access" button, and links to lazyweb.com/monetization with UTM attribution. Pick the caption that matches the slot:
  • .ba-col / .flip Strongest Matches BEFORE/AFTER → "Unlock this A/B test evidence"
  • .deck references, .divergent-imgwrap / .divergent-card → "Unlock this reference"
• Captions, deck navigation, prevalence chips (.prev), verdict badges (.verdict), and evidence badges (.ebadge) all still render underneath the locked tile. Hypotheses, ranked CTAs, convention tables, and prose render in full — only the evidence VISUALS are blurred-locked.
• Prepend the report (right after Agent Instructions) with a .lock-banner strip carrying the aspirational lead ("Your paywall, redesigned by 20k+ A/B tests.") and a "Get access" CTA linking to the same UTM-attributed upgrade URL.

Read the paywall first

Before searching, establish the target:

1. Run lazyweb-context-detect when available to infer project, platform, and stack.
2. Capture or read the target paywall. Prefer an actual screenshot. Always capture / record the verbatim current primary CTA copy — paraphrasing it loses information the corpus needs.
3. Identify:
   • Primary goal: first paid conversion vs trial start vs plan select vs win-back
   • User state: cold (first session) vs warm (engaged, gated) vs upgrade moment
   • Offer: trial vs no-trial, single vs multi-tier, intro price vs flat
   • What's actually being sold: is the paid TIER named on the screen (Premium, Plus, Pro, Go+)? Is a paid benefit named (ad-free, offline, unlimited)? If neither, the CTA must reference a generic paid-tier word, never the brand name when the brand is already free.
4. Ask ONE concise question only when the screen goal, plan structure, or user state is missing and cannot be inferred.

Evidence Workflow

Call lazyweb_paywall_cta_research ONCE with the full context. It returns all evidence the skill needs in a single payload:

• process_sop — the encoded CTA framework
• evidence_examples — Jaccard-ranked corpus rows (text-similar to current CTA)
• divergent_examples — creative outliers (most UNlike the current CTA)
• creative_long_tail_phrases — compact singleton list for mechanism scan
• cta_experiments — broad pool of real before/after CTA A/B observations
• brand_own_examples — CTAs from the user's OWN brand (voice reference, NOT to recommend)
• conventions — top phrases, bigrams, per-flow top phrases
• images — signed-URL gallery

Use the corpus as a mechanism library, not a text catalog:

• top_exact_phrases / top_bigrams — median copy the LLM already knows. Sanity check only; never recommend as discoveries.
• divergent_examples / creative_long_tail_phrases — departures that encode hypotheses. Identify the mechanism, decide if it transfers, reformulate in this product's voice.
• cta_experiments — curate ~10 Strongest Matches by IDEA (not lexical overlap). AFTER must be interesting. The 10 picks must be DIVERGENT from each other.

When the user asks for broader paywall A/B evidence (mechanism context outside CTA-only copy), call lazyweb_ab_test_research. Treat learnings as directional, not measured lift.

Critique framework

Combine the screen read with corpus evidence:

• Alignment with peer convention: conventional / adjacent / differentiated
• Clarity of action: high / medium / low — is the action obvious at a glance?
• Specificity of value: high / medium / low — does the CTA convey what the user gets?
• Offer match: matches / partial / mismatch — implying trial when there isn't one is mismatch
• Score: 0.0–1.0 overall fitness
• Strengths (1-3, specific): what the current CTA does well and why
• Weaknesses (1-3, actionable): concrete problems

Propose alternatives — hypothesis-driven

Each candidate CTA must be:

• Mechanism-led — names the mechanism it bets on (outcome framing, price anchor, pain reframe, activity-led, benefit noun, urgency, branded-tier verb)
• Tier-honest — references the paid TIER or benefit, never "Try [free brand] free"
• Falsifiable — paired with the specific weakness in the current CTA it attacks
• Distinct — no two candidates share a mechanism

Output 3-5 candidates, ranked by Confidence × Impact × Differentiation (same anchored rubric the paywall report uses) with a Total score.

Hard rules:

• Do not recommend a CTA the user is already running unless you redefine its mechanism.
• Do not propose unmotivated emoji or punctuation flourishes.
• Do not claim measured lift unless the experiment evidence explicitly provides it.
• Treat experiment learning text as directional unless the tool returns validated performance data.

HTML Report Contract

Create a polished, scannable, LIGHT-themed HTML report in this section order:

1. Agent Instructions (section #1 — see Report essentials).
2. Lock banner (only when paid access is missing).
3. Read the paywall: screenshot of the user's Current paywall (the single unblurred image), verbatim current CTA, components, user state, offer, named friction on the CTA.
4. Current CTA critique table: alignment / clarity / specificity / offer-match / score / strengths / weaknesses.
5. Ranked CTA candidates (3-5): title (the candidate copy), mechanism, expected metric, when-it-works condition, supporting evidence (mini .deck of 1-2 corpus rows OR experiment before/after pair), and a .ebadge strength label. Sort by Total score desc.
6. Strongest Matches table (~10 curated cta_experiments rows): BEFORE → AFTER, company, 1-sentence learning_summary, "why it matters to THIS CTA".
7. Best CTA Directions To Test: 5 abstracted patterns the matches converge on, each with a WHEN-IT-WORKS condition.
8. Top Recommendation: pick ONE candidate to test first, with the A/B sentence ("Replacing <current> with <candidate> should lift <metric> because <mechanism>").
9. Convention check as a 3-column table: Already uses · Missing · Unusual.
10. Evidence summary (AFTER hypotheses): the corpus rows, divergent examples, experiment cards used as evidence.

A candidate card may include an inline .mock-cta block (the candidate text rendered as a primary button) — never ASCII art.

Report essentials

A. Agent Instructions — report section #1

One plain human sentence, then a copy-pastable block written FOR A DOWNSTREAM CODING AGENT:

<section id="agent-instructions" class="agent-instructions">
  <div class="ai-head"><span class="ai-badge">FOR THE CODING AGENT</span>
    <button class="ai-copy" type="button" onclick="
      var sec=this.closest('.agent-instructions'); var txt=sec.querySelector('.ai-block').innerText;
      var done=function(ok){this.textContent=ok?'Copied':'Press Cmd/Ctrl+C';setTimeout(function(){this.textContent='Copy';}.bind(this),1500);}.bind(this);
      if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(txt).then(function(){done(true);},function(){done(false);});}
      else{var r=document.createRange();r.selectNodeContents(sec.querySelector('.ai-block'));var s=getSelection();s.removeAllRanges();s.addRange(r);try{document.execCommand('copy');done(true);}catch(e){done(false);}}">Copy</button>
  </div>
  <p class="ai-human">{one human sentence: the strongest CTA to ship first + why}</p>
  <pre class="ai-block">{COPY BLOCK — fill from this report}</pre>
</section>

Copy-block text (keep these exact labels; fill {REPORT_PATH} with the absolute path of the report.html you wrote):

LAZYWEB CTA REPORT — AGENT HANDOFF
Use the report at {REPORT_PATH} to rewrite the paywall CTA.

CURRENT CTA: "{current_cta_verbatim}"
SHIP THIS NEXT: "{top_recommended_cta}"
MECHANISM: {one-line mechanism}
WHY THIS BEATS CURRENT: {one line tying mechanism to the current CTA's weakness}

RUNNERS-UP (rank order):
1. "{candidate 2 copy}" — {mechanism}
2. "{candidate 3 copy}" — {mechanism}
3. "{candidate 4 copy}" — {mechanism}

A/B FRAMING:
Replacing "{current}" with "{top_recommended}" should lift {metric} because {mechanism}.

DO NOT OVER-INDEX ON: median corpus phrases, brand-name CTAs when the brand is already free, generic verbs without an offer/benefit referent.
DIVE FURTHER: `/lazyweb-paywall-optimization` for a full paywall redesign, `/lazyweb-ab-test-research` for deeper experiment mining.

Evidence basis: {Lazyweb paywall CTA corpus + curated A/B observations} · {DATE}

B. Conciseness & "show, don't tell"

No length target. Lead with value (Agent Instructions + the top recommended CTA). Show, don't tell — make the case with corpus screenshots, before/after A/B pairs, or a .mock-cta rendering of the candidate, not paragraphs. Index each candidate on the mechanism + specific corpus / experiment row that supports it.

C. HTML / styling (LIGHT theme)

Single HTML file, inline CSS (no external deps; the one inline onclick copy handler is allowed). White background, system fonts, max-width:900px, light borders, #f6f8fa table headers, semantic HTML. Include the shared CSS below in <style>; Agent Instructions is the first section styled as the light-blue callout. Open in the browser: open "$REPORT_DIR/report.html".

:root{--ink:#1f2328;--mut:#57606a;--line:#d0d7de;--soft:#eef4fb;--accent:#0969da}
body{font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;max-width:900px;margin:0 auto;padding:40px 22px}
table{border-collapse:collapse;width:100%;font-size:14px}th,td{border:1px solid var(--line);padding:7px 9px}th{background:#f6f8fa;text-align:left}
.agent-instructions{background:var(--soft);border-left:4px solid var(--accent);border-radius:8px;padding:14px 16px;margin:18px 0}
.ai-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.ai-badge{font-size:11px;font-weight:700;letter-spacing:.04em;color:#0a3b78}
.ai-copy{font:600 12px/1 inherit;cursor:pointer;border:1px solid var(--accent);color:var(--accent);background:#fff;border-radius:6px;padding:5px 11px}.ai-copy:hover{background:var(--accent);color:#fff}
.ai-human{margin:0 0 10px;font-size:15px}
.ai-block{white-space:pre-wrap;word-break:break-word;background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px 13px;margin:0;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);user-select:all}
/* Mock CTA button for rendering candidate copy */
.mock-cta{display:inline-block;background:var(--accent);color:#fff;font:700 14px/1.1 inherit;border-radius:8px;padding:12px 24px;margin:6px 0}
.mock-cta.secondary{background:#fff;color:var(--accent);border:1.5px solid var(--accent)}
/* Locked-evidence tile + banner — render when paid access is missing. */
.lock-banner{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#0d1117 0%,#1f2933 100%);color:#fff;border-radius:10px;padding:12px 16px;margin:14px 0;text-decoration:none}
.lock-banner .lb-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);flex:0 0 30px}
.lock-banner .lb-txt{font-size:13.5px;line-height:1.4;flex:1}.lock-banner .lb-txt b{color:#7dc4ff}
.lock-banner .lb-cta{font:700 12px/1 inherit;color:#0d1117;background:#7dc4ff;border-radius:6px;padding:9px 14px;white-space:nowrap;letter-spacing:.03em}
.lock-banner:hover .lb-cta{background:#a4d6ff}
.locked-ref{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;min-height:200px;background:#0d1117;border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:#fff;cursor:pointer;padding:24px 18px;text-align:center;box-sizing:border-box}
.locked-ref-blur{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#1f2328 0,#1f2328 8px,#2a3138 8px,#2a3138 16px,#384149 16px,#384149 24px,#2a3138 24px,#2a3138 32px);filter:blur(10px) saturate(.55);opacity:.55;z-index:0}
.locked-ref-lock{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);margin-bottom:10px;backdrop-filter:blur(6px)}
.locked-ref-cta{position:relative;z-index:1;font:700 13.5px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff;letter-spacing:.01em;text-shadow:0 1px 4px rgba(0,0,0,.4);max-width:230px;margin:0 0 8px}
.locked-ref-btn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;font:700 12.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#0d1117;background:#7dc4ff;border:1px solid #7dc4ff;border-radius:6px;padding:8px 14px;letter-spacing:.03em;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:background .12s,border-color .12s,color .12s}
.locked-ref:hover .locked-ref-cta{color:#7dc4ff}
.locked-ref:hover .locked-ref-lock{background:rgba(125,196,255,.18);border-color:rgba(125,196,255,.4)}
.locked-ref:hover .locked-ref-btn{background:#a4d6ff;border-color:#a4d6ff}
.deck>figure.locked-figure{aspect-ratio:9/16;padding:0;background:#0d1117}
.deck>figure.locked-figure .locked-ref{border:0;border-radius:0;min-height:100%}
.flip>figure.locked-figure .locked-ref{aspect-ratio:9/16}
.rec-proof.locked-proof{padding:0}
.rec-proof.locked-proof .locked-ref{min-height:100%;border:0;border-radius:0}
/* Standard evidence components reused from paywall-optimization skill: .deck, .pat, .prev, .tag, .verdict, .ebadge, .corpus, .flip — include the CSS block from lazyweb-paywall-optimization SKILL.md verbatim in <style>. */
.lw-foot{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--mut)}

Locked-evidence markup patterns

UTM convention (BAKE INTO EVERY HREF — these are how we attribute free→Pro clicks per skill). Replace <base_url> below with this string verbatim: https://www.lazyweb.com/monetization?utm_source=lazyweb-paywall-cta&utm_campaign=free-to-pro

Per-tile, append &utm_medium=locked-tile&utm_content=<slot_kind> where <slot_kind> is one of:

• variant — for variant mockups (rare in the CTA report; usually only the .mock-cta button hero, no img)
• ab_test — for every Strongest Matches .flip BEFORE/AFTER pair, every recommendation card proof
• reference — for .divergent-imgwrap / .divergent-card (corpus reference cards)
• evidence — for any other corpus image slot

For the top banner click, use &utm_medium=lock-banner&utm_content=banner.

Per-slot caption convention. Use the caption that matches the slot:

• .mockup-col (variant mockup) → "Unlock this variant"
• .ba-col / .flip BEFORE/AFTER / Strongest Matches pair → "Unlock this A/B test evidence"
• .divergent-imgwrap / .divergent-card → "Unlock this reference"
• Anything else / general → "Upgrade to Lazyweb Pro"

<!-- Lock banner — render once, right after Agent Instructions, ONLY when ab_test_subscription_required -->
<a class="lock-banner" href="https://www.lazyweb.com/monetization?utm_source=lazyweb-paywall-cta&utm_medium=lock-banner&utm_campaign=free-to-pro&utm_content=banner" target="_blank" rel="noopener">
  <span class="lb-ico" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg></span>
  <span class="lb-txt"><b>Your paywall, redesigned by 20k+ A/B tests.</b> The CTA candidates and critique below are intact; every evidence screenshot is hidden until you upgrade. Your current paywall stays visible at the top.</span>
  <span class="lb-cta">Get access</span>
</a>

<!-- Locked deck figure (reference card) — drop in place of any <img> inside a .deck -->
<figure class="locked-figure">
  <a class="locked-ref" href="https://www.lazyweb.com/monetization?utm_source=lazyweb-paywall-cta&utm_medium=locked-tile&utm_campaign=free-to-pro&utm_content=reference" target="_blank" rel="noopener" aria-label="Unlock this reference">
    <span class="locked-ref-blur" aria-hidden="true"></span>
    <span class="locked-ref-lock" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg></span>
    <p class="locked-ref-cta">Unlock this reference</p>
    <span class="locked-ref-btn">Get access</span>
  </a>
  <figcaption class="cap"><span class="src">[Lazyweb]</span> <b>CTA reference locked</b> — upgrade to view this evidence.</figcaption>
</figure>

<!-- Locked before/after pair (Strongest Matches A/B) — drop in place of an experiment .flip pair -->
<div class="flip">
  <figure class="locked-figure">
    <a class="locked-ref" href="https://www.lazyweb.com/monetization?utm_source=lazyweb-paywall-cta&utm_medium=locked-tile&utm_campaign=free-to-pro&utm_content=ab_test" target="_blank" rel="noopener" aria-label="Unlock this A/B test evidence">
      <span class="locked-ref-blur" aria-hidden="true"></span>
      <span class="locked-ref-lock" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg></span>
      <p class="locked-ref-cta">Unlock this A/B test evidence</p>
      <span class="locked-ref-btn">Get access</span>
    </a>
    <figcaption><span class="side c">BEFORE</span><span class="vd">{before_cta_text} — visual locked</span></figcaption>
  </figure>
  <figure class="locked-figure">
    <a class="locked-ref" href="https://www.lazyweb.com/monetization?utm_source=lazyweb-paywall-cta&utm_medium=locked-tile&utm_campaign=free-to-pro&utm_content=ab_test" target="_blank" rel="noopener" aria-label="Unlock this A/B test evidence">
      <span class="locked-ref-blur" aria-hidden="true"></span>
      <span class="locked-ref-lock" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg></span>
      <p class="locked-ref-cta">Unlock this A/B test evidence</p>
      <span class="locked-ref-btn">Get access</span>
    </a>
    <figcaption><span class="side v">AFTER</span><span class="vd">{after_cta_text} — visual locked</span></figcaption>
  </figure>
</div>

Rules when paid access is missing:

• Render the .lock-banner once, right after Agent Instructions.
• Every CTA reference deck figure → <figure class="locked-figure"> with a .locked-ref tile.
• Every Strongest Matches before/after pair → both figures use .locked-ref.
• Every recommendation card proof → .rec-proof.locked-proof wrapping a .locked-ref in the .frame.
• Brand-own reference cards, divergent examples, anti-pattern thumbnails → same .locked-ref substitution.
• Keep ALL captions, prevalence chips, verdict badges, evidence badges, candidate CTAs, critique tables, learning_summary text, mechanism analysis, and Top Recommendation prose EXACTLY as they would render under paid access. The BEFORE/AFTER text strings stay visible — only the visual tiles are locked.
• The user's Current paywall screenshot (the single "Read the paywall" image) is the ONLY real image — render it from the target_image_url the user supplied.
• Every locked tile must link to https://www.lazyweb.com/monetization.

Report footer (REQUIRED — the very last element of the report)

End every report with this footer:

<footer class="lw-foot">Powered by <a href="https://www.lazyweb.com">Lazyweb</a> — turn your agent into a design researcher… for free!</footer>