{
  "html": "<!DOCTYPE html>\n<!--\n  Synthetic example invoice for the Ironfang Render guide.\n  Northwind Studio Ltd, Harbour Lane Retail Ltd and every name, address,\n  VAT number and bank detail here are fictional.\n  This file demonstrates HTML to PDF rendering only. It is not tax advice\n  and it is not a compliant e-invoice (for that, see Peppol BIS Billing 3).\n-->\n<html lang=\"en-GB\">\n<head>\n<meta charset=\"utf-8\">\n<title>Invoice INV-1042 - Northwind Studio Ltd</title>\n<style>\n@page { size: A4; }\n* { box-sizing: border-box; }\nhtml, body { margin: 0; padding: 0; }\nbody {\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 10pt;\n  line-height: 1.4;\n  color: #1f2937;\n  background: #fff;\n  -webkit-print-color-adjust: exact;\n  print-color-adjust: exact;\n}\n.band {\n  background: #1e3a5f;\n  color: #fff;\n  padding: 18pt 22pt;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 4pt;\n}\n.brand { display: flex; align-items: center; gap: 10pt; }\n.brand svg { width: 34pt; height: 34pt; flex: none; }\n.brand-name { font-size: 15pt; font-weight: 700; letter-spacing: 0.2pt; }\n.brand-tag { font-size: 8.5pt; opacity: 0.8; }\n.doc-title { text-align: right; }\n.doc-title h1 { margin: 0; font-size: 22pt; letter-spacing: 3pt; font-weight: 700; }\n.doc-title p { margin: 2pt 0 0; font-size: 9pt; opacity: 0.85; }\n.parties {\n  display: flex;\n  justify-content: space-between;\n  gap: 18pt;\n  margin: 18pt 0 14pt;\n}\n.parties > div { flex: 1; }\n.label {\n  font-size: 7.5pt;\n  text-transform: uppercase;\n  letter-spacing: 1pt;\n  color: #6b7280;\n  margin: 0 0 3pt;\n  font-weight: 600;\n}\n.parties p { margin: 0; }\n.meta { border-collapse: collapse; margin-left: auto; }\n.meta td { padding: 1.5pt 0 1.5pt 12pt; }\n.meta td:first-child { color: #6b7280; padding-left: 0; }\n.meta td:last-child { text-align: right; font-weight: 600; }\ntable.items { width: 100%; border-collapse: collapse; }\ntable.items thead { display: table-header-group; }\ntable.items tfoot { display: table-footer-group; }\ntable.items th {\n  text-align: left;\n  font-size: 7.5pt;\n  text-transform: uppercase;\n  letter-spacing: 0.8pt;\n  color: #1e3a5f;\n  border-bottom: 1.5pt solid #1e3a5f;\n  padding: 6pt 6pt;\n}\ntable.items td {\n  padding: 7pt 6pt;\n  border-bottom: 0.75pt solid #e5e7eb;\n  vertical-align: top;\n}\ntable.items tr { break-inside: avoid; page-break-inside: avoid; }\n.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }\nth.num { text-align: right; }\n.desc strong { display: block; font-weight: 600; }\n.desc span { display: block; color: #6b7280; font-size: 8.5pt; margin-top: 1pt; }\n.col-n { width: 5%; color: #9ca3af; }\n.col-qty { width: 9%; }\n.col-unit { width: 15%; }\n.col-amt { width: 16%; }\n.end {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 18pt;\n  margin-top: 16pt;\n  break-inside: avoid;\n  page-break-inside: avoid;\n}\n.pay { flex: 1; font-size: 9pt; }\n.pay p { margin: 0 0 2pt; }\n.pay .note { margin-top: 8pt; color: #6b7280; }\n.totals {\n  width: 44%;\n  background: #eef3f9;\n  border: 0.75pt solid #c7d5e6;\n  border-radius: 4pt;\n  padding: 8pt 12pt;\n  break-inside: avoid;\n  page-break-inside: avoid;\n}\n.totals table { width: 100%; border-collapse: collapse; }\n.totals td { padding: 3pt 0; }\n.totals .grand td {\n  border-top: 1.5pt solid #1e3a5f;\n  padding-top: 6pt;\n  font-size: 12pt;\n  font-weight: 700;\n  color: #1e3a5f;\n}\n.fine {\n  margin-top: 16pt;\n  padding-top: 8pt;\n  border-top: 0.75pt solid #e5e7eb;\n  font-size: 7.5pt;\n  color: #9ca3af;\n  break-inside: avoid;\n}\n</style>\n</head>\n<body>\n<header class=\"band\">\n  <div class=\"brand\">\n    <svg viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect width=\"40\" height=\"40\" rx=\"8\" fill=\"#f5b942\"/><path d=\"M11 29V11h4l10 12V11h4v18h-4L15 17v12z\" fill=\"#1e3a5f\"/></svg>\n    <div>\n      <div class=\"brand-name\">Northwind Studio Ltd</div>\n      <div class=\"brand-tag\">Design and web development</div>\n    </div>\n  </div>\n  <div class=\"doc-title\">\n    <h1>INVOICE</h1>\n    <p>INV-1042</p>\n  </div>\n</header>\n\n<section class=\"parties\">\n  <div>\n    <p class=\"label\">From</p>\n    <p><strong>Northwind Studio Ltd</strong></p>\n    <p>Unit 4, 12 Example Street</p>\n    <p>Manchester M1 0AA</p>\n    <p>accounts@northwind.example.com</p>\n    <p>VAT No. GB000 0000 00 (example)</p>\n  </div>\n  <div>\n    <p class=\"label\">Bill to</p>\n    <p><strong>Harbour Lane Retail Ltd</strong></p>\n    <p>Attn: Accounts Payable</p>\n    <p>88 Sample Road</p>\n    <p>Bristol BS1 0ZZ</p>\n    <p>ap@harbourlane.example.com</p>\n  </div>\n  <div>\n    <p class=\"label\">Details</p>\n    <table class=\"meta\">\n      <tr><td>Invoice no.</td><td>INV-1042</td></tr>\n      <tr><td>Issue date</td><td>14 Sep 2026</td></tr>\n      <tr><td>Supply date</td><td>31 Aug 2026</td></tr>\n      <tr><td>Due date</td><td>14 Oct 2026</td></tr>\n      <tr><td>PO ref.</td><td>HL-PO-7781</td></tr>\n    </table>\n  </div>\n</section>\n\n<table class=\"items\">\n  <thead>\n    <tr>\n      <th class=\"col-n\">#</th>\n      <th>Description</th>\n      <th class=\"num col-qty\">Qty</th>\n      <th class=\"num col-unit\">Unit price</th>\n      <th class=\"num col-amt\">Amount</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr><td class=\"col-n\">1</td><td class=\"desc\"><strong>Discovery workshop</strong><span>Half-day session with stakeholders, notes and summary report</span></td><td class=\"num\">1</td><td class=\"num\">&pound;1,200.00</td><td class=\"num\">&pound;1,200.00</td></tr>\n    <tr><td class=\"col-n\">2</td><td class=\"desc\"><strong>Logo system and usage guidelines</strong><span>Primary mark, secondary lock-ups and a 24-page guidelines PDF</span></td><td class=\"num\">1</td><td class=\"num\">&pound;2,450.00</td><td class=\"num\">&pound;2,450.00</td></tr>\n    <tr><td class=\"col-n\">3</td><td class=\"desc\"><strong>Website page templates</strong><span>Home, listing, product, basket, account and content templates</span></td><td class=\"num\">6</td><td class=\"num\">&pound;375.00</td><td class=\"num\">&pound;2,250.00</td></tr>\n    <tr><td class=\"col-n\">4</td><td class=\"desc\"><strong>Front-end build</strong><span>Day rate, 18 Aug to 28 Aug 2026</span></td><td class=\"num\">8</td><td class=\"num\">&pound;520.00</td><td class=\"num\">&pound;4,160.00</td></tr>\n    <tr><td class=\"col-n\">5</td><td class=\"desc\"><strong>Accessibility review</strong><span>WCAG 2.2 AA audit of the templates with a remediation list</span></td><td class=\"num\">1</td><td class=\"num\">&pound;680.00</td><td class=\"num\">&pound;680.00</td></tr>\n    <tr><td class=\"col-n\">6</td><td class=\"desc\"><strong>Hosting and support</strong><span>Managed hosting and support, Jun to Aug 2026, per month</span></td><td class=\"num\">3</td><td class=\"num\">&pound;145.00</td><td class=\"num\">&pound;435.00</td></tr>\n  </tbody>\n</table>\n\n<section class=\"end\">\n  <div class=\"pay\">\n    <p class=\"label\">Payment details</p>\n    <p>Bank: Example Bank plc</p>\n    <p>Account name: Northwind Studio Ltd</p>\n    <p>Sort code: 00-00-00 &nbsp; Account no.: 00000000</p>\n    <p>Reference: INV-1042</p>\n    <p class=\"note\">Payment terms: 30 days from the issue date.</p>\n  </div>\n  <div class=\"totals\">\n    <table>\n      <tr><td>Net</td><td class=\"num\">&pound;11,175.00</td></tr>\n      <tr><td>VAT at 20%</td><td class=\"num\">&pound;2,235.00</td></tr>\n      <tr class=\"grand\"><td>Total due</td><td class=\"num\">&pound;13,410.00</td></tr>\n    </table>\n  </div>\n</section>\n\n<p class=\"fine\">Synthetic example produced for the Ironfang Render invoice PDF guide. Northwind Studio Ltd is fictional; the VAT number and bank details are placeholders. Not a tax document.</p>\n</body>\n</html>\n",
  "paper_format": "a4",
  "print_background": true,
  "margin": {
    "top": 0.6,
    "right": 0.5,
    "bottom": 0.8,
    "left": 0.5
  },
  "header_html": "<span></span>",
  "footer_html": "<div style=\"font-size:9px;width:100%;text-align:center;color:#666;font-family:sans-serif\">Page <span class=\"pageNumber\"></span> of <span class=\"totalPages\"></span></div>"
}
