@rubytech/create-maxy-code 0.1.51 → 0.1.57

package/payload/platform/plugins/brochures/skills/property-market-report/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: property-market-report
+description: Use when a user asks for an A4 print-ready property market report for a specific area, branded with an estate agent's design tokens and logos, illustrated by up to 10 property listings that hyperlink back to their source URLs. Triggers include "create a market report for <area>", "market data sheet for <postcode>", "Bishop's Stortford / CM23 / Sawbridgeworth report", or any request that names market metrics for an area and a set of property URLs to feature.
+---
+
+# Property Market Report
+
+A 4-page A4 PDF: cover (full-bleed hero with light logo), market summary + headline KPIs, activity + property-type distribution + at-a-glance table, then a featured-listings grid where every tile hyperlinks to its source URL.
+
+## Typography is fixed; only colours and logos come from the agent
+
+The report has its own typographic identity — a luxury serif stack pinned in the template:
+
+- **Display** — Cormorant Garamond (italic for headlines, KPI values, prices, addresses)
+- **Body** — Lora
+- **Sans / labels** — Inter (eyebrows, KPI labels, chips, footer meta)
+
+**Never substitute the agent's body or display fonts**, even if their `DESIGN.md` specifies different families. The market report intentionally reads as an editorial / luxury document across every brand it renders for; the agent's identity comes through the **palette and logo only**. If a brand insists on its own typography, that's a different deliverable — likely a brochure, not a market report.
+
+## Inputs (never invented)
+
+- **`design_tokens_path`** — path to a `DESIGN.md` that tokenises the agent's brand (`muvin.co.uk` → `/estate-agents/muvin/DESIGN.md`). Read the canonical hex values directly; never substitute "close" colours. **Only colour tokens are consumed** — the report imports `primary` (e.g. teal-900), `primary_dark`, `accent` (e.g. gold-500), `paper`, `paper_banded`, and `rule`. Any typography, spacing, or radius tokens in the agent's DESIGN.md are *ignored by design*.
+- **`logo_light_path`** / **`logo_dark_path`** — PNG/SVG. Light = white-on-dark version (for the teal-toned cover); dark = full-colour version (for body-page headers). When supplied, the renderer emits an `<img>` for the logo; when omitted, it falls back to a Cormorant-Garamond text wordmark using `brand.name` + `brand.tagline`. The text-wordmark fallback is acceptable for brands whose logo is essentially a serif-typeset name (e.g. *muvin*); for richer marks, supply the files.
+- **`property_urls`** — list of up to 10 source URLs (Muvin, Rightmove, Zoopla, etc.). Each must resolve to a single property listing page. Reject more than 10; the layout breaks at >10 cards.
+- **`market_data`** — flat dict of numbers (average asking, average sold, £/sqft, YoY growth, demand rating, days-on-market, property-type distribution, sample size, period). Source from a market intelligence API (PropertyData / Land Registry / ONS) or paste from an existing report. **The period is the *generated* date, not whatever appears in the URL slug** — the Market Trak `oct-2025` slug describes a snapshot from May 2026 (Oct 2025 was the trailing window). Use the report-page's stated `Generated` value.
+
+## How the skill renders
+
+`references/template.html` is the single source of truth for the layout. It carries `<!-- REPLACE: <slot> -->` comments — never edit the structure directly; edit the template once, the slot names stay stable.
+
+`references/render.py` consumes three plain-Python inputs (brand · market · properties), substitutes them into the template, then drives Chrome headless to produce the PDF and zips the HTML+images bundle. Run it with `python3 render.py inputs.json` where `inputs.json` carries:
+
+```json
+{ "out_dir": "...", "filename_stem": "...",
+  "brand":   { "name", "tagline", "primary", "primary_dark", "accent",
+               "paper", "paper_banded", "rule" },
+  "market":  { "location_name", "location_code", "period", "cover_title",
+               "cover_hero", "page2_photo",
+               "summary_headline", "summary_paragraphs",
+               "avg_asking", "avg_sold", "psf", "yoy_growth",
+               "demand_rating", "demand_gauge_position",
+               "price_growth_note", "demand_note",
+               "for_sale", "sales_per_month", "turnover_pct", "dom",
+               "n_props", "type_dist" },
+  "properties": [{ "url", "slug", "address", "price_kind", "price",
+                   "beds", "baths", "type" }, ...]   /* ≤ 10 */
+}
+```
+
+If any `<!-- REPLACE: ... -->` slot is left unfilled after substitution the renderer raises — a contract gap, not a silent default.
+
+## Outcome contract
+
+Every report ships these artefacts in a single output directory:
+
+- `index.html` — single self-contained file, no build step, opens directly. Webfonts loaded from Google Fonts.
+- `<area>-<period>.pdf` — 4–5 page A4 PDF rendered via Chrome headless `--print-to-pdf`. 4 pages when there are ≤ 5 listings, 5 pages when 6–10 listings (the listings split across pages 4 and 5). Anything beyond 5 pages means content is overflowing — tighten KPI tile padding or listing card aspect ratio until it fits.
+- `<area>-<period>-web.zip` — packaged bundle containing `index.html` + `img/`, ready to drop into a static-site host. Self-contained except for the Google Fonts CSS link, which is fetched at view time.
+- `img/<NN>-<slug>.jpg` — one image per property, 0-padded index, slug from the source URL. Produced by the **property-socials** skill in landscape format (1200×628) where possible; each report-page card uses this branded tile, not the raw hero. If a property has no local brochure scaffold, run `real-estate-brochure:property-extract` → `real-estate-brochure:property-brochure` → `property-socials` first; the report consumes the resulting `og-landscape-main.jpg`.
+
+## Visual contract
+
+The design tokens carry the contract. Two rules survive any token re-skin:
+
+1. **Cover** — full-bleed property hero behind a vertical gradient scrim (top ~55% opacity → bottom ~95% opacity in the surface-deep colour). Light logo top-left, area name in display-italic, tagline in accent colour, four-up meta strip across the foot (Report · Location · Period · Status).
+2. **Listing tiles** — every property card is a hyperlinked `<a>` wrapping a tile that pairs the property-socials landscape image with: address (display italic, 14–16pt), price (display italic, 14–16pt), spec chips (sans, pill-shaped). The `<a>` opens the source URL in a new tab. Tile borders use the rule colour from the design tokens, not arbitrary greys.
+
+## Pagination contract
+
+A4 portrait, 210×297 mm, 16 mm horizontal padding, 18 mm vertical. Each `<section class="page">` is `height:297mm; overflow:hidden; page-break-after:always`. If Chrome's `mdls -name kMDItemNumberOfPages` returns >4, content is overflowing — diagnose with `pdftoppm -png -f <n> -l <n>` to see which page bleeds, then trim that page only (smaller KPI padding, tighter photo-strip aspect ratio, fewer listing cards per page). Never reach for `min-height` to "let it grow" — the printed deliverable is the deliverable.
+
+## Listings page layout
+
+Up to 10 properties fit on **two body pages** of the report (page 4 and an optional page 5 if >5 listings):
+
+- ≤ 5 listings → one page, cards stacked at 70mm photo column × 5/3 aspect (~42mm tall photo).
+- 6–10 listings → two pages, 5 per page, same dimensions.
+- Each card: `<a href="<source_url>" target="_blank" rel="noopener">` wraps the whole card. Tile photo on the left, meta on the right (address · locality · price · chip row). Hover state is irrelevant for print but should still feel clickable in the HTML preview (subtle teal-tint background-shift, no underline on the address).
+
+## Source attribution
+
+The disclaimer block on the final page must name:
+
+- All market-data sources (Land Registry, ONS, PropertyData, Rightmove, Zoopla, local agents) by name.
+- Image attribution: `Property imagery: <agent>.co.uk via property-socials`.
+- A short "Accuracy" line and a short "Investment" line — see the existing `bishops-stortford-*` reports for canonical wording.
+
+## Failure modes seen
+
+- **Logo invisible in preview.** The IDE preview panel can't always resolve relative `img/` paths or large base64 data URIs. The deliverable PDF is the source of truth; viewing the HTML in a real browser (or via `python3 -m http.server`) is the second source of truth. Don't burn iterations chasing preview-panel artefacts.
+- **Date drift from URL slug.** A Market Trak URL like `…-oct-2025?…` does not mean the report is October 2025. Always trust the `Generated:` field on the source page.
+- **Page 3 / page 4 overflow.** The default Cormorant Garamond + Lora stack is slightly taller-set than a sans default. KPI tile padding and panel padding need to come down (~5 mm not 7 mm) for serif typography to fit alongside the photo strip on page 3 and two listing cards on page 4.
+- **Property-socials skipped.** A report that drops raw `loop-app.b-cdn.net/propertyimages/...jpg` straight into a tile breaks the brand contract — the tiles have no overlay, no scrim, no address copy. Always run the OG pipeline; if it can't run, surface the gap, don't substitute.
+- **Anchor links dead in PDF.** Chrome `--print-to-pdf` preserves `<a href>` as live PDF annotations. Verify by opening the PDF in Preview and clicking a listing — if the link is dead, the HTML wrapped a `<div>` instead of an `<a>`.
+
+## Out of scope
+
+- The market-data fetch itself (owned by whichever PropertyData / Land Registry adapter the operator uses).
+- The property-extract / property-brochure / property-socials pipeline (owned by those skills).
+- HTML emails / web embeds of the report. The deliverable is A4 PDF + the self-contained HTML preview.

package/payload/platform/plugins/brochures/skills/property-market-report/references/render.py

@@ -0,0 +1,267 @@
+"""property-market-report renderer.
+
+Substitutes <!-- REPLACE: <slot> --> placeholders in template.html with values
+derived from three inputs: brand tokens, market data, and a list of properties.
+
+Public entry: render(brand, market, properties, out_dir, template_path=None)
+    brand:      dict — see BRAND_KEYS below
+    market:     dict — see MARKET_KEYS below
+    properties: list[dict] — each property dict has the keys listed in
+                PROPERTY_KEYS below; up to 10 properties supported.
+    out_dir:    pathlib.Path — directory to write index.html into (must already
+                contain an img/ subdirectory with the per-property hero JPGs
+                named <NN>-<slug>.jpg where NN is the 0-padded index).
+    template_path: pathlib.Path | None — override the bundled template.html.
+
+Produces:
+    out_dir/index.html
+
+PDF generation and web-zip packaging live in this module's main() — call:
+    python3 render.py inputs.json
+where inputs.json is { "brand": {...}, "market": {...}, "properties": [...] }.
+"""
+from __future__ import annotations
+import json, html, re, sys, subprocess, shutil, zipfile
+from pathlib import Path
+
+BRAND_KEYS = (
+    "name", "tagline", "primary", "primary_dark", "accent",
+    "paper", "paper_banded", "rule",
+)
+# Optional brand keys (not required):
+#   "logo_light"  — path to white-on-transparent logo (used on dark cover)
+#   "logo_dark"   — path to full-colour logo (used on body-page headers)
+# When omitted, the renderer falls back to a Cormorant-Garamond text wordmark
+# using brand.name + brand.tagline.
+MARKET_KEYS = (
+    "location_name", "location_code", "period",
+    "summary_headline", "summary_paragraphs",
+    "avg_asking", "avg_sold", "psf", "yoy_growth",
+    "demand_rating", "demand_gauge_position",
+    "price_growth_note", "demand_note",
+    "for_sale", "sales_per_month", "turnover_pct", "dom",
+    "n_props", "type_dist",
+    "cover_hero", "page2_photo",
+)
+PROPERTY_KEYS = (
+    "url", "slug", "address", "price_kind", "price",
+    "beds", "baths", "type",
+)
+
+
+def _listing_card(p: dict, index: int) -> str:
+    addr_parts = [x.strip() for x in p["address"].split(",")]
+    addr = html.escape(addr_parts[0])
+    locality = html.escape(", ".join(addr_parts[1:]))
+    chips = []
+    if p.get("beds"):  chips.append(f"{p['beds']} bed")
+    if p.get("baths"): chips.append(f"{p['baths']} bath")
+    if p.get("type"):  chips.append(html.escape(p["type"]))
+    chips_html = "".join(f"<span>{c}</span>" for c in chips)
+    img_path = f"img/{index:02d}-{p['slug']}.jpg"
+    return (
+        f'<a class="listing" href="{html.escape(p["url"])}" target="_blank" rel="noopener">'
+        f'<div class="photo"><img src="{img_path}" alt="{addr}"><div class="badge">For sale</div></div>'
+        f'<div class="meta">'
+        f'<div class="addr">{addr}</div>'
+        f'<div class="spec">{locality}</div>'
+        f'<div class="price"><small>{html.escape(p.get("price_kind") or "Guide price")}</small>'
+        f'{html.escape(p["price"])}</div>'
+        f'<div class="kfs">{chips_html}</div>'
+        f"</div></a>"
+    )
+
+
+def _type_dist_rows(dist: list[tuple[str, float]]) -> str:
+    return "".join(
+        f'<div class="dist-row"><div class="name">{html.escape(name)}</div>'
+        f'<div class="bar"><span{" class=gold" if i == 0 else ""} '
+        f'style="width:{pct}%"></span></div>'
+        f'<div class="pct">{pct}%</div></div>'
+        for i, (name, pct) in enumerate(dist)
+    )
+
+
+def _at_a_glance_rows(market: dict) -> str:
+    gap = market["avg_asking"] - market["avg_sold"]
+    rows = [
+        ("Average asking price", f"£{market['avg_asking']:,}"),
+        ("Average sold price",   f"£{market['avg_sold']:,}"),
+        ("Asking-to-sold gap",   f"−£{gap:,}"),
+        ("Price per sq ft",      f"£{market['psf']}"),
+        ("YoY growth",           f"{market['yoy_growth']*100:+.1f}%"),
+        ("Properties analysed",  f"{market['n_props']}"),
+        ("Live listings",        f"{market['for_sale']}"),
+        ("Sales per month",      f"{market['sales_per_month']}"),
+        ("Days on market",       f"{market['dom']}"),
+    ]
+    return "".join(
+        f'<tr><td>{html.escape(k)}</td><td class="num">{html.escape(v)}</td></tr>'
+        for k, v in rows
+    )
+
+
+def _summary_paragraphs(paras: list[str]) -> str:
+    if not paras:
+        return ""
+    out = [f'<p class="dropcap">{paras[0]}</p>']
+    for p in paras[1:]:
+        out.append(f"<p>{p}</p>")
+    return "".join(out)
+
+
+def _wordmark(brand: dict, variant: str, out_dir: Path) -> str:
+    """variant ∈ {'light', 'dark'}.
+
+    'light' = cover (large, white over dark teal scrim).
+    'dark'  = body-page header (small, full-colour over light paper).
+
+    When brand['logo_light'] / brand['logo_dark'] is supplied as a filesystem
+    path, the file is copied into out_dir/img/ and referenced via a relative
+    path so the web zip stays self-contained. When omitted, falls back to a
+    Cormorant-Garamond text wordmark using brand.name + brand.tagline.
+    """
+    key = "logo_light" if variant == "light" else "logo_dark"
+    logo_path = brand.get(key)
+    if logo_path:
+        src = Path(logo_path)
+        dest_dir = out_dir / "img"
+        dest_dir.mkdir(parents=True, exist_ok=True)
+        dest = dest_dir / src.name
+        if src.resolve() != dest.resolve():
+            shutil.copy2(src, dest)
+        rel = f"img/{src.name}"
+        if variant == "light":
+            return f'<img src="{html.escape(rel)}" alt="{html.escape(brand["name"])}" style="height:14mm;width:auto;display:block">'
+        return f'<img src="{html.escape(rel)}" alt="{html.escape(brand["name"])}" style="height:9mm;width:auto;display:block">'
+    # Text-wordmark fallback
+    cls = "wm light" if variant == "light" else "wm small"
+    return (
+        f'<div class="{cls}">'
+        f'<span class="wm-name">{html.escape(brand["name"])}</span>'
+        f'<span class="wm-sub">{html.escape(brand["tagline"])}</span>'
+        f"</div>"
+    )
+
+
+def render(brand: dict, market: dict, properties: list[dict], out_dir: Path,
+           template_path: Path | None = None) -> Path:
+    template_path = template_path or (Path(__file__).parent / "template.html")
+    tmpl = template_path.read_text()
+
+    if len(properties) > 10:
+        raise ValueError("property-market-report supports up to 10 properties.")
+
+    out_dir.mkdir(parents=True, exist_ok=True)
+
+    listings_a = "".join(_listing_card(p, i) for i, p in enumerate(properties[:5]))
+    listings_b = "".join(_listing_card(p, i + 5) for i, p in enumerate(properties[5:]))
+
+    slots = {
+        "brand_name":        brand["name"],
+        "brand_tagline":     brand["tagline"],
+        "wordmark_light":    _wordmark(brand, "light", out_dir),
+        "wordmark_dark":     _wordmark(brand, "dark", out_dir),
+        "brand_primary":     brand["primary"],
+        "brand_primary_dark":brand["primary_dark"],
+        "brand_accent":      brand["accent"],
+        "brand_paper":       brand["paper"],
+        "brand_paper_banded":brand["paper_banded"],
+        "brand_rule":        brand["rule"],
+
+        "location_name":     market["location_name"],
+        "location_code":     market["location_code"],
+        "period":            market["period"],
+        "cover_title":       market.get("cover_title", market["location_name"].split(",")[0] + "."),
+        "cover_hero_path":   market["cover_hero"],
+        "page2_photo":       market["page2_photo"],
+
+        "summary_headline":  market["summary_headline"],
+        "summary_paragraphs":_summary_paragraphs(market["summary_paragraphs"]),
+
+        "kpi_avg_asking":    f"£{market['avg_asking']:,}",
+        "kpi_avg_sold":      f"£{market['avg_sold']:,}",
+        "kpi_psf":           f"£{market['psf']}",
+        "kpi_yoy":           f"{market['yoy_growth']*100:+.1f}%",
+        "kpi_for_sale":      str(market["for_sale"]),
+        "kpi_sales_per_month":str(market["sales_per_month"]),
+        "kpi_turnover":      f"{int(market['turnover_pct']*100)}%",
+        "kpi_dom":           str(market["dom"]),
+
+        "demand_rating":     market["demand_rating"],
+        "gauge_position":    market.get("demand_gauge_position", "50%"),
+        "price_growth_note": market["price_growth_note"],
+        "demand_note":       market["demand_note"],
+        "n_props":           str(market["n_props"]),
+
+        "at_a_glance_rows":  _at_a_glance_rows(market),
+        "type_dist_rows":    _type_dist_rows(market["type_dist"]),
+        "listing_cards_page_4": listings_a,
+        "listing_cards_page_5": listings_b,
+    }
+
+    out = tmpl
+    for k, v in slots.items():
+        out = out.replace(f"<!-- REPLACE: {k} -->", v)
+
+    # Anything still unfilled is a contract gap — fail loud
+    leftovers = re.findall(r"<!-- REPLACE: (\w+) -->", out)
+    if leftovers:
+        raise RuntimeError(
+            "template has unfilled placeholders: " + ", ".join(sorted(set(leftovers)))
+        )
+
+    out_path = out_dir / "index.html"
+    out_path.write_text(out)
+    return out_path
+
+
+def render_pdf(out_dir: Path, pdf_name: str) -> Path:
+    chrome = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+    if not Path(chrome).exists():
+        raise FileNotFoundError(
+            "Chrome not found at " + chrome + " — install Chrome or override the path."
+        )
+    pdf_path = out_dir / pdf_name
+    subprocess.run([
+        chrome, "--headless", "--disable-gpu", "--no-pdf-header-footer",
+        f"--print-to-pdf={pdf_path}", "--virtual-time-budget=30000",
+        f"file://{(out_dir / 'index.html').resolve()}",
+    ], check=True, capture_output=True)
+    return pdf_path
+
+
+def pack_web_zip(out_dir: Path, zip_name: str) -> Path:
+    """Bundle index.html + img/ into a self-contained web zip."""
+    zip_path = out_dir / zip_name
+    if zip_path.exists():
+        zip_path.unlink()
+    with zipfile.ZipFile(zip_path, "w", zipfile.ZIP_DEFLATED) as z:
+        z.write(out_dir / "index.html", "index.html")
+        img_dir = out_dir / "img"
+        if img_dir.exists():
+            for p in sorted(img_dir.iterdir()):
+                if p.is_file():
+                    z.write(p, f"img/{p.name}")
+    return zip_path
+
+
+def main():
+    if len(sys.argv) < 2:
+        print("Usage: render.py <inputs.json>", file=sys.stderr)
+        sys.exit(2)
+    inputs = json.loads(Path(sys.argv[1]).read_text())
+    out_dir = Path(inputs.get("out_dir", "."))
+    base = inputs.get("filename_stem",
+                      f"{inputs['market']['location_name'].split(',')[0].lower().replace(' ', '-')}"
+                      f"-{inputs['market']['period'].lower().replace(' ', '-')}")
+    render(inputs["brand"], inputs["market"], inputs["properties"], out_dir)
+    pdf = render_pdf(out_dir, f"{base}.pdf")
+    web = pack_web_zip(out_dir, f"{base}-web.zip")
+    print(f"HTML  → {out_dir/'index.html'}")
+    print(f"PDF   → {pdf}")
+    print(f"WEB   → {web}")
+
+
+if __name__ == "__main__":
+    main()

package/payload/platform/plugins/brochures/skills/property-market-report/references/template.html

@@ -0,0 +1,266 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Market Data Sheet — <!-- REPLACE: location_name --> · <!-- REPLACE: period --> · <!-- REPLACE: brand_name --></title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  :root{
+    --teal-900:<!-- REPLACE: brand_primary -->;
+    --teal-950:<!-- REPLACE: brand_primary_dark -->;
+    --gold-500:<!-- REPLACE: brand_accent -->;
+    --paper-0:#FFFFFF;
+    --paper-25:<!-- REPLACE: brand_paper -->;
+    --paper-50:#FBF8F8;
+    --paper-75:<!-- REPLACE: brand_paper_banded -->;
+    --slate-500:#56605F; --slate-600:#6E6E6E;
+    --rule-300:<!-- REPLACE: brand_rule -->;
+
+    --text-default:var(--teal-900);
+    --text-muted:var(--slate-600);
+    --text-accent:var(--gold-500);
+    --text-on-dark:var(--paper-0);
+    --surface-page:var(--paper-25);
+    --surface-card:var(--paper-0);
+    --surface-banded:var(--paper-75);
+    --surface-deep:var(--teal-900);
+    --radius-md:4px; --radius-lg:8px; --radius-xl:16px;
+
+    --display:"Cormorant Garamond",Garamond,Georgia,serif;
+    --body:"Lora",Georgia,serif;
+    --sans:"Inter",system-ui,sans-serif;
+  }
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{background:var(--rule-300);font-family:var(--body);color:var(--text-default);font-weight:400;-webkit-font-smoothing:antialiased}
+  a{color:inherit;text-decoration:none}
+  .page{width:210mm;min-height:297mm;height:297mm;margin:8mm auto;background:var(--surface-page);position:relative;overflow:hidden;padding:18mm 16mm;page-break-after:always}
+  .page.dark{background:var(--surface-deep);color:var(--text-on-dark)}
+  .page.dark .muted{color:#B7C8C8}
+  @page{size:A4 portrait;margin:0}
+  @media print{html,body{background:transparent} .page{margin:0;box-shadow:none;page-break-after:always}}
+
+  h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.15;color:inherit}
+  h1{font-size:54pt;letter-spacing:-1pt;font-style:italic;font-weight:400}
+  h2{font-size:26pt;font-style:italic;font-weight:400;margin-bottom:6mm;letter-spacing:-.3pt}
+  h3{font-size:14pt;font-weight:500}
+  h4{font-family:var(--sans);font-size:8.5pt;font-weight:600;letter-spacing:2.2pt;text-transform:uppercase;color:var(--text-accent)}
+  p{font-size:11pt;line-height:1.65;color:inherit;font-family:var(--body)}
+  .muted{color:var(--text-muted);font-size:9.5pt;line-height:1.55;font-family:var(--body)}
+  .eyebrow{font-family:var(--sans);font-weight:600;font-size:9pt;letter-spacing:3pt;text-transform:uppercase;color:var(--text-accent)}
+  .dropcap::first-letter{font-family:var(--display);font-weight:400;font-style:italic;font-size:5em;line-height:.82;float:left;margin:.05em .12em -.08em 0;color:var(--teal-900);letter-spacing:-.04em}
+  .page.dark .dropcap::first-letter{color:var(--gold-500)}
+
+  .cover-bg{position:absolute;inset:0;background:url(<!-- REPLACE: cover_hero_path -->) center/cover no-repeat}
+  .cover-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,68,68,.55) 0%,rgba(6,68,68,.78) 55%,rgba(4,45,45,.94) 100%)}
+  .cover-frame{position:absolute;inset:0;padding:18mm 16mm;display:flex;flex-direction:column;justify-content:space-between;z-index:1}
+  .cover-hero h1{color:var(--text-on-dark);max-width:170mm}
+  .cover-hero .lede{color:var(--gold-500);font-family:var(--display);font-style:italic;font-weight:400;font-size:16pt;letter-spacing:.2pt;margin-top:6mm}
+  .cover-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8mm;border-top:1px solid rgba(255,255,255,.22);padding-top:8mm}
+  .cover-meta dt{font-family:var(--sans);font-weight:600;font-size:8pt;letter-spacing:2pt;text-transform:uppercase;color:var(--gold-500);margin-bottom:3mm}
+  .cover-meta dd{font-family:var(--display);font-style:italic;font-weight:500;font-size:15pt;color:var(--text-on-dark)}
+  .cover-rule{height:1px;background:var(--gold-500);width:30mm}
+
+  .doc-head{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:6mm;border-bottom:1px solid var(--rule-300);margin-bottom:8mm}
+  .doc-head .breadcrumb{font-family:var(--sans);font-weight:500;font-size:8pt;letter-spacing:2pt;text-transform:uppercase;color:var(--text-muted)}
+
+  .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm;margin-bottom:6mm}
+  .kpis.cube{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4mm;margin-bottom:0;height:100%}
+  .kpis.cube .kpi{padding:5mm;display:flex;flex-direction:column;justify-content:space-between}
+  .kpi{background:var(--surface-card);border-radius:var(--radius-lg);padding:5mm;border:1px solid var(--rule-300)}
+  .kpi .label{font-family:var(--sans);font-weight:600;font-size:7pt;letter-spacing:1.7pt;text-transform:uppercase;color:var(--text-muted);margin-bottom:2mm}
+  .kpi .value{font-family:var(--display);font-style:italic;font-weight:500;font-size:22pt;color:var(--text-default);line-height:1;letter-spacing:-.3pt}
+  .kpi .sub{font-size:8pt;color:var(--text-muted);margin-top:2mm;font-family:var(--body);font-style:italic}
+  .kpi.gold{background:var(--teal-900);color:var(--text-on-dark);border:none}
+  .kpi.gold .label{color:var(--gold-500)}
+  .kpi.gold .value{color:var(--text-on-dark)}
+  .kpi.gold .sub{color:#B7C8C8}
+
+  .two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:8mm;align-items:start}
+  .panel{background:var(--surface-card);border-radius:var(--radius-lg);padding:5.5mm;border:1px solid var(--rule-300)}
+  .panel.banded{background:var(--surface-banded)}
+
+  .dist{display:flex;flex-direction:column;gap:4mm;margin-top:3mm}
+  .dist-row{display:grid;grid-template-columns:40mm 1fr 14mm;align-items:center;gap:3mm}
+  .dist-row .name{font-size:10pt;color:var(--text-default);font-family:var(--body)}
+  .dist-row .pct{font-family:var(--display);font-style:italic;font-weight:500;font-size:12pt;color:var(--text-default);text-align:right}
+  .bar{height:5mm;background:var(--paper-75);border-radius:var(--radius-md);overflow:hidden}
+  .bar > span{display:block;height:100%;background:var(--teal-900);border-radius:var(--radius-md)}
+  .bar > span.gold{background:var(--gold-500)}
+
+  .summary p{font-size:11pt;line-height:1.7}
+  .summary p + p{margin-top:3mm}
+
+  table.cmp{width:100%;border-collapse:collapse;font-size:10pt;font-family:var(--body)}
+  table.cmp th,table.cmp td{padding:2.8mm 2mm;text-align:left;border-bottom:1px solid var(--rule-300)}
+  table.cmp th{font-family:var(--sans);font-weight:600;font-size:7.5pt;letter-spacing:1.8pt;text-transform:uppercase;color:var(--text-muted)}
+  table.cmp td.num{font-family:var(--display);font-style:italic;font-weight:500;text-align:right;font-size:11.5pt}
+  table.cmp tr:last-child td{border-bottom:none}
+
+  .doc-foot{position:absolute;bottom:9mm;left:16mm;right:16mm;display:flex;justify-content:space-between;font-family:var(--sans);font-weight:500;font-size:8pt;letter-spacing:1.5pt;text-transform:uppercase;color:var(--text-muted)}
+  .page.dark .doc-foot{color:#7FA0A0}
+
+  .pill{display:inline-flex;align-items:center;gap:2.5mm;padding:2mm 5mm;border-radius:50px;background:var(--gold-500);color:var(--text-on-dark);font-family:var(--display);font-style:italic;font-weight:500;font-size:11pt;letter-spacing:.3pt}
+  .pill::before{content:"";width:2.2mm;height:2.2mm;border-radius:50%;background:#fff}
+  .gauge{display:flex;align-items:center;gap:6mm;margin-top:4mm}
+  .gauge-track{flex:1;height:5mm;background:var(--paper-75);border-radius:50px;position:relative;overflow:hidden}
+  .gauge-fill{position:absolute;inset:0 50% 0 0;background:linear-gradient(90deg,var(--teal-900),var(--gold-500))}
+  .gauge-marker{position:absolute;top:-2mm;width:1.2mm;height:9mm;background:var(--text-default);border-radius:2px}
+  .gauge-ends{display:flex;justify-content:space-between;font-family:var(--sans);font-weight:500;font-size:7.5pt;letter-spacing:1.5pt;text-transform:uppercase;color:var(--text-muted);margin-top:2mm}
+
+  .disclaimer{margin-top:5mm;padding-top:5mm;border-top:1px solid var(--rule-300)}
+  .disclaimer h4{margin-bottom:3mm}
+  .disclaimer p{font-size:8pt;color:var(--text-muted);line-height:1.55;font-family:var(--body);font-style:italic}
+  .disclaimer p + p{margin-top:2.5mm}
+
+  .wm{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;color:var(--teal-900)}
+  .wm.light{color:var(--paper-0)}
+  .wm-name{font-family:var(--display);font-weight:600;font-style:normal;font-size:36pt;letter-spacing:-1pt;line-height:.9}
+  .wm-sub{font-family:var(--sans);font-weight:600;font-size:7pt;letter-spacing:2pt;text-transform:uppercase;margin-top:2mm}
+  .wm.small .wm-name{font-size:22pt}
+  .wm.small .wm-sub{margin-top:.8mm;font-size:5.5pt;letter-spacing:1.8pt}
+
+  .full-photo{position:relative;width:calc(100% + 32mm);margin:0 -16mm;height:78mm;overflow:hidden}
+  .full-photo img{width:100%;height:100%;object-fit:cover;display:block}
+
+  .listings{display:flex;flex-direction:column;gap:2.5mm;margin-top:2.5mm}
+  .listing{display:grid;grid-template-columns:58mm 1fr;gap:5mm;border:1px solid var(--rule-300);border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-card);transition:background 200ms,border-color 200ms}
+  .listing:hover{background:var(--paper-50);border-color:var(--gold-500)}
+  .listing .photo{position:relative;aspect-ratio:16/9;background:var(--paper-75)}
+  .listing .photo img{width:100%;height:100%;object-fit:cover;display:block}
+  .listing .photo .badge{position:absolute;left:2.5mm;top:2.5mm;background:var(--gold-500);color:#fff;font-family:var(--sans);font-weight:600;font-size:6pt;letter-spacing:1.2pt;text-transform:uppercase;padding:.9mm 2.2mm;border-radius:50px}
+  .listing .meta{padding:2.5mm 5mm 2.5mm 0;display:flex;flex-direction:column;justify-content:center;gap:.5mm}
+  .listing .meta .addr{font-family:var(--display);font-style:italic;font-weight:500;font-size:15pt;color:var(--text-default);line-height:1.1;letter-spacing:-.2pt}
+  .listing .meta .spec{font-size:8.5pt;color:var(--text-muted);font-style:italic;line-height:1.3}
+  .listing .meta .price{font-family:var(--display);font-style:italic;font-weight:500;font-size:16pt;color:var(--text-default);margin-top:1mm;line-height:1;letter-spacing:-.3pt}
+  .listing .meta .price small{font-family:var(--sans);font-weight:600;font-style:normal;font-size:6pt;letter-spacing:1.5pt;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:.6mm}
+  .listing .meta .kfs{display:flex;flex-wrap:wrap;gap:1.2mm;margin-top:1.5mm}
+  .listing .meta .kfs span{font-family:var(--sans);font-weight:500;font-size:6.5pt;letter-spacing:.4pt;color:var(--text-default);background:var(--paper-75);padding:.8mm 2mm;border-radius:50px}
+</style>
+</head>
+<body>
+
+<!-- PAGE 1 — COVER -->
+<section class="page dark">
+  <div class="cover-bg"></div>
+  <div class="cover-frame">
+    <div>
+      <!-- REPLACE: wordmark_light -->
+    </div>
+    <div class="cover-hero">
+      <div class="cover-rule"></div>
+      <h4 style="color:var(--gold-500);margin:6mm 0 4mm">Market Data Sheet</h4>
+      <h1><!-- REPLACE: cover_title --></h1>
+      <p class="lede">A view of the <!-- REPLACE: location_code --> housing market — <!-- REPLACE: period -->.</p>
+    </div>
+    <dl class="cover-meta">
+      <div><dt>Report</dt><dd>Market Data</dd></div>
+      <div><dt>Location</dt><dd><!-- REPLACE: location_code --></dd></div>
+      <div><dt>Period</dt><dd><!-- REPLACE: period --></dd></div>
+      <div><dt>Status</dt><dd style="color:var(--gold-500)">Live data</dd></div>
+    </dl>
+  </div>
+  <div class="doc-foot" style="z-index:2"><span><!-- REPLACE: brand_name --> · Property Intelligence</span><span>01</span></div>
+</section>
+
+<!-- PAGE 2 — SUMMARY + HEADLINE KPIs -->
+<section class="page">
+  <header class="doc-head">
+    <!-- REPLACE: wordmark_dark -->
+    <div class="breadcrumb"><!-- REPLACE: location_name --> · <!-- REPLACE: location_code --> · <!-- REPLACE: period --></div>
+  </header>
+  <div class="eyebrow">Market summary</div>
+  <h2 style="margin-top:3mm"><!-- REPLACE: summary_headline --></h2>
+  <div class="summary" style="max-width:170mm"><!-- REPLACE: summary_paragraphs --></div>
+  <div style="height:6mm"></div>
+  <div class="kpis">
+    <div class="kpi gold"><div class="label">Average Asking Price</div><div class="value"><!-- REPLACE: kpi_avg_asking --></div><div class="sub">Current listings — <!-- REPLACE: location_code --></div></div>
+    <div class="kpi"><div class="label">Average Sold Price</div><div class="value"><!-- REPLACE: kpi_avg_sold --></div><div class="sub">Completed transactions</div></div>
+    <div class="kpi"><div class="label">Price per sq ft</div><div class="value"><!-- REPLACE: kpi_psf --></div><div class="sub">Asking-price basis</div></div>
+  </div>
+  <div class="two-col" style="align-items:stretch">
+    <div class="panel banded" style="display:flex;flex-direction:column">
+      <h4>Price growth</h4>
+      <div style="display:flex;align-items:baseline;gap:4mm;margin-top:3mm">
+        <span style="font-family:var(--display);font-style:italic;font-weight:500;font-size:34pt;color:var(--teal-900);line-height:1;letter-spacing:-.5pt"><!-- REPLACE: kpi_yoy --></span>
+        <span class="muted" style="font-style:italic">year on year</span>
+      </div>
+      <p class="muted" style="margin-top:3mm"><!-- REPLACE: price_growth_note --></p>
+    </div>
+    <div class="panel" style="display:flex;flex-direction:column">
+      <h4>Demand rating</h4>
+      <div style="margin-top:3mm"><span class="pill"><!-- REPLACE: demand_rating --></span></div>
+      <div class="gauge"><div class="gauge-track"><div class="gauge-fill"></div><div class="gauge-marker" style="left:<!-- REPLACE: gauge_position -->"></div></div></div>
+      <div class="gauge-ends"><span>Buyer's market</span><span>Seller's market</span></div>
+      <p class="muted" style="margin-top:4mm"><!-- REPLACE: demand_note --></p>
+    </div>
+  </div>
+  <div class="full-photo" style="margin-top:8mm"><img src="<!-- REPLACE: page2_photo -->" alt=""></div>
+  <div class="doc-foot"><span><!-- REPLACE: brand_name --> · Property Intelligence</span><span>02</span></div>
+</section>
+
+<!-- PAGE 3 — ACTIVITY (2×2 KPI cube + at-a-glance + distribution full-width below) -->
+<section class="page">
+  <header class="doc-head">
+    <!-- REPLACE: wordmark_dark -->
+    <div class="breadcrumb"><!-- REPLACE: location_name --> · <!-- REPLACE: location_code --> · <!-- REPLACE: period --></div>
+  </header>
+  <div class="eyebrow">Sales volume &amp; activity</div>
+  <h2 style="margin-top:3mm;margin-bottom:5mm">How the market is moving.</h2>
+  <div class="two-col" style="grid-template-columns:1fr 1fr;gap:6mm;margin-bottom:6mm">
+    <div class="kpis cube">
+      <div class="kpi"><div class="label">Total for sale</div><div class="value"><!-- REPLACE: kpi_for_sale --></div><div class="sub">Live listings</div></div>
+      <div class="kpi"><div class="label">Avg sales / month</div><div class="value"><!-- REPLACE: kpi_sales_per_month --></div><div class="sub">Completions</div></div>
+      <div class="kpi"><div class="label">Turnover / month</div><div class="value"><!-- REPLACE: kpi_turnover --></div><div class="sub">Stock churn</div></div>
+      <div class="kpi gold"><div class="label">Days on market</div><div class="value"><!-- REPLACE: kpi_dom --></div><div class="sub">Average list-to-sale</div></div>
+    </div>
+    <div class="panel banded">
+      <h4>At a glance</h4>
+      <table class="cmp" style="margin-top:3mm">
+        <tr><th>Metric</th><th style="text-align:right">Value</th></tr>
+        <!-- REPLACE: at_a_glance_rows -->
+      </table>
+    </div>
+  </div>
+  <div class="panel">
+    <h4>Property type — share of market</h4>
+    <p class="muted" style="margin-top:2mm">Distribution across the <!-- REPLACE: n_props -->-property sample.</p>
+    <div class="dist"><!-- REPLACE: type_dist_rows --></div>
+  </div>
+  <div class="doc-foot"><span><!-- REPLACE: brand_name --> · Property Intelligence</span><span>03</span></div>
+</section>
+
+<!-- PAGE 4 — LISTINGS (1–5) -->
+<section class="page">
+  <header class="doc-head">
+    <!-- REPLACE: wordmark_dark -->
+    <div class="breadcrumb"><!-- REPLACE: location_name --> · <!-- REPLACE: location_code --> · <!-- REPLACE: period --></div>
+  </header>
+  <div class="eyebrow">Featured listings · <!-- REPLACE: location_code --></div>
+  <h2 style="margin-top:2mm;margin-bottom:4mm">On the market with <!-- REPLACE: brand_name -->.</h2>
+  <div class="listings"><!-- REPLACE: listing_cards_page_4 --></div>
+  <div class="doc-foot"><span><!-- REPLACE: brand_name --> · Property Intelligence</span><span>04</span></div>
+</section>
+
+<!-- PAGE 5 — LISTINGS (6–10) + DISCLAIMER -->
+<section class="page">
+  <header class="doc-head">
+    <!-- REPLACE: wordmark_dark -->
+    <div class="breadcrumb"><!-- REPLACE: location_name --> · <!-- REPLACE: location_code --> · <!-- REPLACE: period --></div>
+  </header>
+  <div class="eyebrow">Featured listings · <!-- REPLACE: location_code --> — continued</div>
+  <h2 style="margin-top:2mm;margin-bottom:4mm">More homes for sale.</h2>
+  <div class="listings"><!-- REPLACE: listing_cards_page_5 --></div>
+  <div class="disclaimer">
+    <h4>Important disclaimer</h4>
+    <p><strong>Sources.</strong> ONS House Price Index, HM Land Registry, Rightmove, Zoopla, local estate agents and market research providers, with supporting analysis via the PropertyData API. Property imagery: <!-- REPLACE: brand_name --> via property-socials.</p>
+    <p><strong>Accuracy.</strong> Property data can vary and change rapidly. Figures are estimates — obtain independent professional advice for specific decisions.</p>
+    <p><strong>Investment.</strong> This report is not financial or investment advice. Past performance does not guarantee future results.</p>
+  </div>
+  <div class="doc-foot"><span><!-- REPLACE: brand_name --> · Generated <!-- REPLACE: period --> · <!-- REPLACE: location_name --> <!-- REPLACE: location_code --></span><span>05</span></div>
+</section>
+
+</body>
+</html>