npm - @rubytech/create-maxy-code - Versions diffs - 0.1.60 → 0.1.62 - Mend

@rubytech/create-maxy-code 0.1.60 → 0.1.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/payload/premium-plugins/real-agent/plugins/preval/skills/property-preval/references/template.html CHANGED Viewed

@@ -2,22 +2,22 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
-<title>Pre-valuation · <!-- REPLACE: address --> · <!-- REPLACE: generated --></title>
+<title>Pre-valuation · <!-- REPLACE: address --> · <!-- REPLACE: generated --> · <!-- 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:#064444;
-    --teal-950:#042D2D;
-    --gold-500:#B8945F;
+    --teal-900:<!-- REPLACE: brand_primary -->;
+    --teal-950:<!-- REPLACE: brand_primary_dark -->;
+    --gold-500:<!-- REPLACE: brand_accent -->;
     --paper-0:#FFFFFF;
-    --paper-25:#FAF7F2;
+    --paper-25:<!-- REPLACE: brand_paper -->;
     --paper-50:#FBF8F8;
-    --paper-75:#F2EDE3;
+    --paper-75:<!-- REPLACE: brand_paper_banded -->;
     --slate-500:#56605F; --slate-600:#6E6E6E;
-    --rule-300:#E3DCCE;
+    --rule-300:<!-- REPLACE: brand_rule -->;
     --text-default:var(--teal-900);
     --text-muted:var(--slate-600);
@@ -35,218 +35,277 @@
   }
   *{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-family:var(--display);font-style:italic;font-weight:400;font-size:38pt;letter-spacing:-.6pt;line-height:1.05}
-  h2{font-size:24pt;font-style:italic;font-weight:400;margin-bottom:5mm;letter-spacing:-.3pt}
+  h1{font-size:48pt;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}
-  .cover-frame{position:absolute;inset:0;padding:24mm 18mm;display:flex;flex-direction:column;justify-content:space-between;z-index:1;background:linear-gradient(180deg,var(--teal-900) 0%,var(--teal-950) 100%);color:var(--text-on-dark)}
-  .cover-eyebrow{font-family:var(--sans);font-weight:600;font-size:9pt;letter-spacing:3.5pt;text-transform:uppercase;color:var(--gold-500)}
-  .cover-rule{height:1px;background:var(--gold-500);width:30mm}
-  .pc-chip{display:inline-flex;align-items:center;padding:2.5mm 6mm;border:1px solid var(--gold-500);border-radius:50px;color:var(--gold-500);font-family:var(--sans);font-weight:600;font-size:10pt;letter-spacing:2.5pt}
-  .cover-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8mm;border-top:1px solid rgba(255,255,255,.22);padding-top:8mm}
+  /* --- COVER --- */
+  .cover-bg{position:absolute;inset:0;background:url(<!-- REPLACE: subject_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:14pt;color:var(--text-on-dark)}
+  .cover-rule{height:1px;background:var(--gold-500);width:30mm}
+  .pc-chip{display:inline-flex;align-items:center;padding:2.5mm 6mm;border:1px solid var(--gold-500);border-radius:50px;color:var(--gold-500);font-family:var(--sans);font-weight:600;font-size:10pt;letter-spacing:2.5pt}
-  .doc-head{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:6mm;border-bottom:1px solid var(--rule-300);margin-bottom:7mm}
-  .doc-head .wm{font-family:var(--display);font-style:normal;font-weight:600;font-size:18pt;color:var(--teal-900);letter-spacing:-.4pt}
-  .doc-head .breadcrumb{font-family:var(--sans);font-weight:500;font-size:8pt;letter-spacing:2pt;text-transform:uppercase;color:var(--text-muted);text-align:right}
+  /* --- BODY HEAD/FOOT --- */
+  .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)}
+  .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}
-  .kpis-4{display:grid;grid-template-columns:repeat(4,1fr);gap:4mm;margin-bottom:6mm}
+  /* --- KPI TILES --- */
+  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:4mm;margin-bottom:6mm}
+  .kpis.three{grid-template-columns:repeat(3,1fr)}
+  .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);position:relative;overflow:hidden}
-  .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1.4mm;background:var(--gold-500)}
+  .kpi.subject::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1.4mm;background:var(--gold-500)}
   .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:20pt;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);font-size:22pt}
+  .kpi.gold .sub{color:#B7C8C8}
-  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:6mm;align-items:start}
+  /* --- LAYOUTS --- */
+  .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)}
   .panel h4{margin-bottom:3mm}
+  /* --- VALUATION PANEL --- */
+  .val-panel{background:var(--surface-banded);border-radius:var(--radius-lg);padding:7mm;border:1px solid var(--rule-300)}
+  .val-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4mm;padding:3mm 0;border-bottom:1px dashed var(--rule-300)}
+  .val-row:last-child{border-bottom:none}
+  .val-row .lbl{font-family:var(--sans);font-weight:500;font-size:9pt;letter-spacing:.4pt;color:var(--text-default)}
+  .val-row .lbl small{display:block;font-family:var(--body);font-style:italic;font-weight:400;color:var(--text-muted);font-size:8pt;letter-spacing:0;text-transform:none;margin-top:.8mm}
+  .val-row .num{font-family:var(--display);font-style:italic;font-weight:500;font-size:18pt;color:var(--text-default);letter-spacing:-.3pt}
+  .val-row.headline .num{font-size:22pt;color:var(--teal-900)}
+  .val-row.adj .num{font-size:14pt;color:var(--text-muted)}
+  .val-row.adj .num.pos{color:#2E7D63}
+  .val-row.adj .num.neg{color:#B0463E}
+  .val-final{margin-top:5mm;padding:5mm 6mm;background:var(--teal-900);color:var(--text-on-dark);border-radius:var(--radius-lg);display:flex;justify-content:space-between;align-items:baseline;gap:4mm}
+  .val-final .lbl{font-family:var(--sans);font-weight:600;font-size:8pt;letter-spacing:2pt;text-transform:uppercase;color:var(--gold-500)}
+  .val-final .num{font-family:var(--display);font-style:italic;font-weight:500;font-size:26pt;color:var(--text-on-dark);letter-spacing:-.4pt}
+  /* --- TABLES --- */
   table.cmp{width:100%;border-collapse:collapse;font-size:10pt;font-family:var(--body)}
-  table.cmp th,table.cmp td{padding:2.2mm 2mm;text-align:left;border-bottom:1px solid var(--rule-300)}
+  table.cmp th,table.cmp td{padding:2.4mm 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:11pt}
+  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}
-  .ask-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm}
-  .ask-tile{background:var(--surface-card);border:1px solid var(--rule-300);border-radius:var(--radius-md);padding:3mm}
-  .ask-tile .addr{font-family:var(--display);font-style:italic;font-weight:500;font-size:11pt;color:var(--text-default);line-height:1.15}
-  .ask-tile .price{font-family:var(--display);font-style:italic;font-weight:500;font-size:13pt;color:var(--teal-900);margin-top:1.5mm}
-  .ask-tile .meta{font-family:var(--sans);font-weight:500;font-size:6.5pt;letter-spacing:.5pt;color:var(--text-muted);margin-top:1.5mm;text-transform:uppercase}
+  /* --- ASKING TILES (FULL WIDTH) --- */
+  .ask-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4mm}
+  .ask-tile{background:var(--surface-card);border:1px solid var(--rule-300);border-radius:var(--radius-md);padding:4mm}
+  .ask-tile .addr{font-family:var(--display);font-style:italic;font-weight:500;font-size:12pt;color:var(--text-default);line-height:1.2}
+  .ask-tile .price{font-family:var(--display);font-style:italic;font-weight:500;font-size:16pt;color:var(--teal-900);margin-top:2mm;letter-spacing:-.2pt}
+  .ask-tile .meta{font-family:var(--sans);font-weight:500;font-size:7pt;letter-spacing:.6pt;color:var(--text-muted);margin-top:2mm;text-transform:uppercase}
-  .dist{display:flex;flex-direction:column;gap:2.5mm;margin-top:2mm}
+  /* --- DIST BARS --- */
+  .dist{display:flex;flex-direction:column;gap:3mm;margin-top:2mm}
   .dist-row{display:grid;grid-template-columns:40mm 1fr 14mm;align-items:center;gap:3mm}
-  .dist-row .name{font-size:9.5pt;color:var(--text-default);font-family:var(--body)}
-  .dist-row .pct{font-family:var(--display);font-style:italic;font-weight:500;font-size:11pt;color:var(--text-default);text-align:right}
-  .bar{height:4mm;background:var(--paper-75);border-radius:var(--radius-md);overflow:hidden}
+  .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)}
-  .pill{display:inline-flex;align-items:center;gap:2.5mm;padding:1.5mm 4mm;border-radius:50px;background:var(--gold-500);color:var(--text-on-dark);font-family:var(--display);font-style:italic;font-weight:500;font-size:10pt;letter-spacing:.3pt}
-  .pill::before{content:"";width:2mm;height:2mm;border-radius:50%;background:#fff}
+  /* --- DEMAND GAUGE --- */
+  .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}
-  .spark{width:100%;height:38mm;display:block;background:var(--surface-card);border:1px solid var(--rule-300);border-radius:var(--radius-md)}
+  /* --- SPARKLINE --- */
+  .spark{width:100%;height:36mm;display:block;background:var(--surface-card);border:1px solid var(--rule-300);border-radius:var(--radius-md)}
   .spark .pl{fill:none;stroke:var(--teal-900);stroke-width:1.4}
   .spark .pl-psf{fill:none;stroke:var(--gold-500);stroke-width:1.4;stroke-dasharray:2 1.5}
   .spark .pt{fill:var(--teal-900)}
   .spark .pt-psf{fill:var(--gold-500)}
   .spark text{font-family:Inter,sans-serif;font-size:5pt;fill:#6E6E6E;letter-spacing:.4pt}
   .spark .axis{stroke:var(--rule-300);stroke-width:.4}
   .legend{display:flex;gap:6mm;font-family:var(--sans);font-weight:500;font-size:7pt;letter-spacing:1.3pt;text-transform:uppercase;color:var(--text-muted);margin-top:2mm}
   .legend .sw{display:inline-block;width:6mm;height:1mm;vertical-align:middle;margin-right:2mm;background:var(--teal-900)}
   .legend .sw.gold{background:var(--gold-500)}
-  .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}
+  /* --- AGENT LISTINGS --- */
+  .listings{display:grid;grid-template-columns:repeat(2,1fr);gap:4mm;margin-top:3mm}
+  .listing{display:grid;grid-template-columns:50mm 1fr;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:4/3;background:var(--paper-75)}
+  .listing .photo img{width:100%;height:100%;object-fit:cover;display:block}
+  .listing .photo .badge{position:absolute;left:2mm;top:2mm;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 .photo .badge.sold{background:#2E7D63}
+  .listing .photo .badge.under{background:#7C5BC4}
+  .listing .meta{padding:3mm 4mm;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:13pt;color:var(--text-default);line-height:1.15;letter-spacing:-.2pt}
+  .listing .meta .price{font-family:var(--display);font-style:italic;font-weight:500;font-size:14pt;color:var(--text-default);margin-top:1mm;line-height:1;letter-spacing:-.2pt}
+  .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}
-  .sources{margin-top:5mm;padding-top:5mm;border-top:1px solid var(--rule-300)}
+  /* --- SOURCES --- */
+  .sources{margin-top:6mm;padding-top:5mm;border-top:1px solid var(--rule-300)}
   .sources h4{margin-bottom:3mm}
   .sources p{font-size:8pt;color:var(--text-muted);line-height:1.55;font-family:var(--body);font-style:italic}
   .sources p + p{margin-top:2.5mm}
+  /* --- WORDMARK FALLBACK --- */
+  .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:34pt;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:20pt}
+  .wm.small .wm-sub{margin-top:.8mm;font-size:5.5pt;letter-spacing:1.8pt}
 </style>
 </head>
 <body>
 <!-- PAGE 1 — COVER -->
 <section class="page dark">
+  <div class="cover-bg"></div>
   <div class="cover-frame">
     <div>
-      <div class="cover-eyebrow">Real Agent · Pre-valuation</div>
-      <div class="cover-rule" style="margin-top:6mm"></div>
+      <!-- REPLACE: wordmark_light -->
     </div>
-    <div>
-      <h4 style="color:var(--gold-500);margin-bottom:6mm">Pre-valuation pack</h4>
-      <h1 style="color:var(--text-on-dark);max-width:170mm"><!-- REPLACE: address --></h1>
-      <div style="margin-top:10mm"><span class="pc-chip"><!-- REPLACE: postcode --></span></div>
+    <div class="cover-hero">
+      <div class="cover-rule"></div>
+      <h4 style="color:var(--gold-500);margin:6mm 0 4mm"><!-- REPLACE: brand_name --> · Pre-valuation</h4>
+      <h1><!-- REPLACE: address --></h1>
+      <p class="lede">A view of what this property is worth — <!-- REPLACE: generated -->.</p>
+      <div style="margin-top:8mm"><span class="pc-chip"><!-- REPLACE: postcode --></span></div>
     </div>
     <dl class="cover-meta">
       <div><dt>Report</dt><dd>Pre-valuation</dd></div>
+      <div><dt>Address</dt><dd style="font-size:11pt;line-height:1.2"><!-- REPLACE: address_short --></dd></div>
       <div><dt>Postcode</dt><dd><!-- REPLACE: postcode --></dd></div>
       <div><dt>Generated</dt><dd><!-- REPLACE: generated --></dd></div>
     </dl>
   </div>
-  <div class="doc-foot" style="z-index:2"><span>Real Agent · Property Intelligence</span><span>01</span></div>
+  <div class="doc-foot" style="z-index:2"><span><!-- REPLACE: brand_name --> · Property Intelligence</span><span>01</span></div>
 </section>
-<!-- PAGE 2 — VALUATION -->
+<!-- PAGE 2 — SUBJECT VALUATION -->
 <section class="page">
   <header class="doc-head">
-    <div class="wm">Real Agent</div>
-    <div class="breadcrumb">Valuation · <!-- REPLACE: postcode --> · <!-- REPLACE: generated --></div>
+    <!-- REPLACE: wordmark_dark -->
+    <div class="breadcrumb">Subject valuation · <!-- REPLACE: postcode --> · <!-- REPLACE: generated --></div>
   </header>
-  <div class="eyebrow">Valuation evidence</div>
+  <div class="eyebrow">Subject property</div>
   <h2 style="margin-top:3mm">What this property is worth.</h2>
-  <div class="kpis-4">
-    <div class="kpi"><div class="label">Avg asking £</div><div class="value"><!-- REPLACE: kpi_avg_asking --></div><div class="sub">Live listings — <!-- REPLACE: postcode --></div></div>
-    <div class="kpi"><div class="label">Asking £/sqft</div><div class="value"><!-- REPLACE: kpi_asking_psf --></div><div class="sub">Mean listing PSF</div></div>
-    <div class="kpi"><div class="label">Avg sold £</div><div class="value"><!-- REPLACE: kpi_avg_sold --></div><div class="sub">Completed transactions</div></div>
-    <div class="kpi"><div class="label">Sold £/sqft</div><div class="value"><!-- REPLACE: kpi_sold_psf --></div><div class="sub">Achieved PSF</div></div>
-  </div>
-  <div class="two-col" style="grid-template-columns:1.15fr .85fr">
-    <div class="panel banded">
-      <h4>Nearest sold comparables</h4>
-      <table class="cmp" style="margin-top:3mm">
-        <tr><th>Date</th><th>Address</th><th>Type</th><th style="text-align:right">Price</th></tr>
-        <!-- REPLACE: sold_comps_rows -->
-      </table>
-    </div>
-    <div class="panel">
-      <h4>Live asking comparables</h4>
-      <div class="ask-grid" style="margin-top:3mm">
-        <!-- REPLACE: asking_comps_tiles -->
-      </div>
-    </div>
+  <div class="kpis">
+    <div class="kpi subject"><div class="label">Floor area</div><div class="value"><!-- REPLACE: kpi_subject_sqft --></div><div class="sub"><!-- REPLACE: kpi_subject_sqft_sub --></div></div>
+    <div class="kpi subject"><div class="label">Bedrooms</div><div class="value"><!-- REPLACE: kpi_subject_beds --></div><div class="sub">As recorded</div></div>
+    <div class="kpi subject"><div class="label">EPC rating</div><div class="value"><!-- REPLACE: kpi_subject_epc --></div><div class="sub"><!-- REPLACE: kpi_subject_epc_sub --></div></div>
+    <div class="kpi subject"><div class="label">Type</div><div class="value" style="font-size:16pt"><!-- REPLACE: kpi_subject_type --></div><div class="sub"><!-- REPLACE: kpi_subject_tenure --></div></div>
   </div>
-  <div class="doc-foot"><span>Real Agent · Property Intelligence</span><span>02</span></div>
+  <!-- REPLACE: valuation_block -->
+  <p class="muted" style="margin-top:6mm;max-width:170mm"><!-- REPLACE: subject_narrative --></p>
+  <div class="doc-foot"><span><!-- REPLACE: brand_name --> · Property Intelligence</span><span>02</span></div>
 </section>
-<!-- PAGE 3 — AREA -->
+<!-- PAGE 3 — MARKET CONTEXT -->
 <section class="page">
   <header class="doc-head">
-    <div class="wm">Real Agent</div>
-    <div class="breadcrumb">Area · <!-- REPLACE: postcode --> · <!-- REPLACE: generated --></div>
+    <!-- REPLACE: wordmark_dark -->
+    <div class="breadcrumb">Market context · <!-- REPLACE: postcode --> · <!-- REPLACE: generated --></div>
   </header>
-  <div class="eyebrow">Area read</div>
-  <h2 style="margin-top:3mm"><!-- REPLACE: area_headline --></h2>
-  <div class="kpis-4">
-    <div class="kpi"><div class="label">Crime rating</div><div class="value"><!-- REPLACE: kpi_crime --></div><div class="sub">Area average</div></div>
-    <div class="kpi"><div class="label">Flood risk</div><div class="value"><!-- REPLACE: kpi_flood --></div><div class="sub">Postcode level</div></div>
-    <div class="kpi"><div class="label">Council tax · D</div><div class="value"><!-- REPLACE: kpi_band_d --></div><div class="sub">Annual at band D</div></div>
-    <div class="kpi"><div class="label">Population</div><div class="value"><!-- REPLACE: kpi_population --></div><div class="sub">Local area</div></div>
+  <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:5mm"></div>
+  <div class="kpis three">
+    <div class="kpi gold"><div class="label">Average asking £</div><div class="value"><!-- REPLACE: kpi_avg_asking --></div><div class="sub">Current listings · <!-- REPLACE: postcode --></div></div>
+    <div class="kpi"><div class="label">Average sold £</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">
-    <div class="panel">
-      <h4>Crime breakdown · 12-month</h4>
-      <div class="dist" style="margin-top:3mm">
-        <!-- REPLACE: crime_rows -->
+  <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:30pt;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 banded">
-      <h4>Council-tax bands</h4>
-      <table class="cmp" style="margin-top:3mm">
-        <tr><th>Band</th><th style="text-align:right">Annual £</th></tr>
-        <!-- REPLACE: band_rows -->
-      </table>
+    <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="doc-foot"><span>Real Agent · Property Intelligence</span><span>03</span></div>
+  <div class="panel" style="margin-top:5mm">
+    <h4>7-year price trend · £ and £/sqft</h4>
+    <!-- REPLACE: spark_svg -->
+    <div class="legend"><span><span class="sw"></span>Average £</span><span><span class="sw gold"></span>£/sqft</span></div>
+  </div>
+  <div class="doc-foot"><span><!-- REPLACE: brand_name --> · Property Intelligence</span><span>03</span></div>
 </section>
-<!-- PAGE 4 — DEMAND + TREND + SOURCES -->
+<!-- PAGE 4 — COMPARABLES (FULL-WIDTH, STACKED) -->
 <section class="page">
   <header class="doc-head">
-    <div class="wm">Real Agent</div>
-    <div class="breadcrumb">Demand &amp; trend · <!-- REPLACE: postcode --> · <!-- REPLACE: generated --></div>
+    <!-- REPLACE: wordmark_dark -->
+    <div class="breadcrumb">Comparables · <!-- REPLACE: postcode --> · <!-- REPLACE: generated --></div>
   </header>
-  <div class="eyebrow">Market posture</div>
-  <h2 style="margin-top:3mm">How the market is moving.</h2>
-  <div class="kpis-4">
-    <div class="kpi"><div class="label">Demand</div><div class="value" style="font-size:14pt"><!-- REPLACE: kpi_demand_rating --></div><div class="sub">Sales-side rating</div></div>
-    <div class="kpi"><div class="label">Days on market</div><div class="value"><!-- REPLACE: kpi_dom --></div><div class="sub">Average list-to-sale</div></div>
-    <div class="kpi"><div class="label">Turnover / mo</div><div class="value"><!-- REPLACE: kpi_turnover --></div><div class="sub">Stock churn</div></div>
-    <div class="kpi"><div class="label">For sale</div><div class="value"><!-- REPLACE: kpi_for_sale --></div><div class="sub">Live listings</div></div>
-  </div>
-  <div class="two-col" style="grid-template-columns:1.4fr .6fr">
-    <div class="panel">
-      <h4>7-year price trend · £ and £/sqft</h4>
-      <!-- REPLACE: spark_svg -->
-      <div class="legend"><span><span class="sw"></span>Average £</span><span><span class="sw gold"></span>£/sqft</span></div>
-    </div>
-    <div class="panel banded">
-      <h4>Rental side</h4>
-      <div style="margin-top:3mm"><span class="pill"><!-- REPLACE: rental_rating --></span></div>
-      <table class="cmp" style="margin-top:4mm">
-        <tr><td>Days on market</td><td class="num"><!-- REPLACE: rental_dom --></td></tr>
-        <tr><td>Turnover / month</td><td class="num"><!-- REPLACE: rental_turnover --></td></tr>
-        <tr><td>For rent</td><td class="num"><!-- REPLACE: rental_for_rent --></td></tr>
-      </table>
-    </div>
+  <div class="eyebrow">Evidence</div>
+  <h2 style="margin-top:3mm;margin-bottom:5mm">The comparables behind the range.</h2>
+  <div class="panel banded">
+    <h4>Nearest sold transactions · Land Registry</h4>
+    <table class="cmp" style="margin-top:3mm">
+      <tr><th>Date</th><th>Address</th><th>Type</th><th style="text-align:right">Price</th></tr>
+      <!-- REPLACE: sold_comps_rows -->
+    </table>
   </div>
   <div class="panel" style="margin-top:5mm">
-    <h4>Property-type mix</h4>
-    <div class="dist" style="margin-top:2mm">
-      <!-- REPLACE: type_dist_rows -->
+    <h4>Live asking comparables</h4>
+    <div class="ask-grid" style="margin-top:3mm">
+      <!-- REPLACE: asking_comps_tiles -->
     </div>
   </div>
+  <div class="doc-foot"><span><!-- REPLACE: brand_name --> · Property Intelligence</span><span>04</span></div>
+</section>
+<!-- PAGE 5 — AGENT LISTINGS + SOURCES -->
+<section class="page">
+  <header class="doc-head">
+    <!-- REPLACE: wordmark_dark -->
+    <div class="breadcrumb">Recently with <!-- REPLACE: brand_name --> · <!-- REPLACE: postcode --></div>
+  </header>
+  <div class="eyebrow">Recently with <!-- REPLACE: brand_name --></div>
+  <h2 style="margin-top:3mm;margin-bottom:2mm">What we have been delivering nearby.</h2>
+  <p class="muted" style="max-width:170mm">A selection of recent sales, properties under offer and live instructions handled by <!-- REPLACE: brand_name -->. If you would like the same outcome on <!-- REPLACE: address_short -->, we would welcome a conversation.</p>
+  <div class="listings"><!-- REPLACE: agent_listings_cards --></div>
   <div class="sources">
     <h4>Sources &amp; methodology</h4>
-    <p><strong>Sources.</strong> PropertyData (asking, sold, demand, growth, crime, flood, council tax, property-type mix). HM Land Registry (sold transactions). Home Office (recorded crime). Environment Agency (flood risk). Valuation Office Agency (council-tax bands).</p>
-    <p><strong>Method.</strong> Twelve PropertyData endpoints called on the postcode derived from the address. £/sqft baselines from listing &amp; transaction prices. 7-year trend from PropertyData growth series. Sample sizes vary by postcode density.</p>
+    <p><strong>Sources.</strong> PropertyData (asking, sold, demand, growth, crime, flood, council tax, property-type mix). HM Land Registry (sold transactions). Home Office (recorded crime). Environment Agency (flood risk). Valuation Office Agency (council-tax bands). Department for Levelling Up, Housing &amp; Communities — EPC register (subject floor area &amp; energy rating).</p>
+    <p><strong>Method.</strong> Twelve PropertyData endpoints called on the postcode derived from the address, plus one EPC lookup on the subject address. Valuation range = subject floor area × the Land Registry 70-percent £/sqft band, with operator-supplied adjustments applied linearly. Live and recent listings shown on the previous page were picked by <!-- REPLACE: brand_name -->.</p>
     <p><strong>Accuracy.</strong> Property data can change rapidly. Figures are estimates — obtain independent professional advice for specific decisions. This pack is not financial or investment advice.</p>
   </div>
-  <div class="doc-foot"><span>Real Agent · Generated <!-- REPLACE: generated --> · <!-- REPLACE: postcode --></span><span>04</span></div>
+  <div class="doc-foot"><span><!-- REPLACE: brand_name --> · Generated <!-- REPLACE: generated --> · <!-- REPLACE: postcode --></span><span>05</span></div>
 </section>
 </body>