/* Roofer 20-pack, batch 2 (RF-05..RF-08): built against the owner's reference PNGs
   (tools/trades10/pack-templates/roofer/02_TEMPLATES_US_LETTER) on invoice-generator's
   .invoice-preview DOM, same technique proven on electrician/hvac/landscaper/carpenter. Every
   photo/icon/logo-mark is a real crop of its reference PNG in /assets/tpl-art/rf20/; CSS draws only
   flat fills, rules, boxes and the live text/data. All geometry is in container-query units
   (1cqw = 1/100 of the sheet width; the reference PNGs are 2550x3300px, so px/2550*100 = cqw),
   matching the sheet's real aspect ratio (3300/2550 = 129.4cqw tall) so the layout holds at the
   794px screen sheet, the 690px export and the 847px print width. */

/* ===== rf20-05-darksidebar (RF-05 "Dark Contractor Sidebar") =====
   Full-height dark charcoal left rail (logo mark + live business name, a real crop of the 5-item
   service-icon list, a CSS tagline, a real roof-photo crop, then live contact info over real
   phone/mail/globe/pin icon crops) beside a white content column (live Bill To / Project Location,
   item table, dark totals card, payment + signature). Real crops: the roofline logo mark (icon
   only, the reference's own "SUMMIT ROOFING" wordmark text was cropped out so the live business
   name prints in its place), the 5-row service-icon list (generic trade categories, not invoice
   data), the roof photo, and the 4 small circular contact icons (phone/mail/globe/pin, cropped
   clean of the reference's own sample phone/email/address text so only the live data prints next
   to them). The reference's "MATERIALS" second table has no backing field in this generator's
   single item-list data model (one items[] array, not a labor/materials split) - not fabricated;
   the one real item table is styled to match the reference's "services" table instead. */
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar{container-type:inline-size !important;position:relative !important;display:block !important;box-sizing:border-box !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:#FFFFFF !important;color:#242528 !important;font-family:Inter,'Inter Fallback',ui-sans-serif,system-ui,sans-serif !important;overflow:hidden !important;isolation:isolate !important;text-align:left !important;min-height:129.4cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar *{box-sizing:border-box !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head{position:static !important;display:block !important;margin:0 !important;padding:0 !important;background:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-left{position:absolute !important;left:0 !important;top:0 !important;bottom:0 !important;width:27.84cqw !important;max-width:none !important;margin:0 !important;padding:4.31cqw 3.14cqw 4cqw !important;background:#1A1D21 !important;z-index:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-logo{display:block !important;max-height:8.6cqw !important;max-width:21.5cqw !important;margin:0 0 1.4cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-left::before{content:"" !important;display:block !important;width:21.5cqw !important;height:8.6cqw !important;margin:0 0 1.4cqw !important;background:url(/assets/tpl-art/rf20/rf20-05-logomark.webp) no-repeat left/contain !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-biz-name{font-family:inherit !important;font-size:2.55cqw !important;font-weight:800 !important;letter-spacing:.01em !important;line-height:1.15 !important;color:#FFFFFF !important;margin:0 0 .5cqw !important;padding:0 !important;overflow-wrap:break-word !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-biz-name::after{content:"BUILT HIGHER TOGETHER" !important;display:block !important;width:21.5cqw !important;font-size:.95cqw !important;font-weight:600 !important;letter-spacing:.14em !important;color:#9B958A !important;margin:.3cqw 0 1.4cqw !important;padding-bottom:1.4cqw !important;border-bottom:1px solid #4A4038 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-left>.inv-biz-contact,
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-left>.inv-biz-address,
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-left>.inv-biz-tax{position:absolute !important;left:3.14cqw !important;right:3.14cqw !important;width:auto !important;max-width:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-biz-contact{display:flex !important;flex-direction:column !important;gap:.75cqw !important;top:101.5cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-biz-contact>div{position:relative !important;padding-left:3.1cqw !important;font-size:1.13cqw !important;color:#F4EFE8 !important;opacity:1 !important;line-height:1.5 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-biz-contact>div::before{content:"" !important;position:absolute !important;left:0 !important;top:.1cqw !important;width:2.2cqw !important;height:2.2cqw !important;background:no-repeat center/contain !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-biz-contact>div:nth-child(1)::before{background-image:url(/assets/tpl-art/rf20/rf20-05-ic-mail.webp) !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-biz-contact>div:nth-child(2)::before{background-image:url(/assets/tpl-art/rf20/rf20-05-ic-phone.webp) !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-biz-contact>div:nth-child(3)::before{background-image:url(/assets/tpl-art/rf20/rf20-05-ic-globe.webp) !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-biz-address{top:117cqw !important;font-size:1.13cqw !important;color:#F4EFE8 !important;opacity:1 !important;padding-left:3.1cqw !important;line-height:1.5 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-biz-address::after{content:"LICENSED   |   INSURED   |   TRUSTED" !important;display:block !important;margin-top:1.6cqw !important;padding-left:0 !important;font-size:.95cqw !important;font-weight:700 !important;letter-spacing:.12em !important;color:#8A8782 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-biz-address::before{content:"" !important;position:absolute !important;left:0 !important;top:.1cqw !important;width:2.2cqw !important;height:2.2cqw !important;background:url(/assets/tpl-art/rf20/rf20-05-ic-pin.webp) no-repeat center/contain !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-biz-tax{display:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-left::after{content:"" !important;position:absolute !important;left:3.14cqw !important;top:28cqw !important;width:21.5cqw !important;height:24.7cqw !important;background:url(/assets/tpl-art/rf20/rf20-05-icons.webp) no-repeat top/contain !important}
/* tagline + roof photo, both anchored to the sidebar container */
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-doc-po{display:none !important}
/* .inv-table's own ::before/::after are unused elsewhere on this design, so they carry the
   sidebar tagline - .inv-table is a guaranteed-always-rendered element (unlike .inv-doc-po,
   which only exists when the optional PO-number field is toggled on), positioned absolutely
   against the root (the nearest positioned ancestor, per this container's own containment rule) */
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-table::before{content:"QUALITY ROOFS" !important;position:absolute !important;left:-24.7cqw !important;top:57cqw !important;width:21.5cqw !important;display:block !important;font-size:1.7cqw !important;font-weight:700 !important;letter-spacing:.08em !important;color:#FFFFFF !important;line-height:1.5 !important;border-top:1px solid #C17A4A !important;padding-top:1.4cqw !important;z-index:2 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-table::after{content:"STRONGER TOMORROWS" !important;position:absolute !important;left:-24.7cqw !important;top:61.5cqw !important;width:21.5cqw !important;display:block !important;font-size:1.7cqw !important;font-weight:700 !important;letter-spacing:.08em !important;color:#C17A4A !important;line-height:1.5 !important;z-index:2 !important}
/* .inv-body is itself position:relative in the shared base CSS - the real containing block for
   these two pseudo-elements, not root, confirmed live (offsetParent) before shipping this fix;
   left is compensated by -inv-body's own 27.84cqw margin-left so the text lands back in the
   sidebar's coordinate space instead of bleeding into the white content column (the exact
   "check the positioned-ancestor chain, don't assume root" gotcha this project's CLAUDE.md flags
   for any cqw design using position:absolute under container-type:inline-size) */
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-right{position:absolute !important;left:3.14cqw !important;top:71.8cqw !important;width:21.5cqw !important;height:20.4cqw !important;padding:0 !important;text-align:left !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-right::before{content:"" !important;position:absolute !important;left:0 !important;top:0 !important;right:0 !important;bottom:0 !important;background:url(/assets/tpl-art/rf20/rf20-05-photo.webp) no-repeat center/cover !important;z-index:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-right .inv-doc-title{display:block !important;position:absolute !important;left:29.6cqw !important;top:-67.49cqw !important;width:55cqw !important;margin:0 !important;padding:0 !important;font-size:4.3cqw !important;font-weight:900 !important;letter-spacing:-.01em !important;color:#1A1D21 !important;white-space:nowrap !important;text-align:left !important;z-index:2 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-right .inv-doc-title::after{content:"EXPERT ROOFING. LASTING PROTECTION." !important;display:block !important;position:absolute !important;left:0 !important;top:100% !important;margin:.4cqw 0 0 !important;font-size:1.05cqw !important;font-weight:600 !important;letter-spacing:.1em !important;color:#6B6862 !important;white-space:nowrap !important;padding-bottom:.9cqw !important;border-bottom:2px solid #C17A4A !important;width:fit-content !important;z-index:2 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-right .inv-doc-num{display:block !important;position:absolute !important;left:29.6cqw !important;top:-57.5cqw !important;width:55cqw !important;margin:0 !important;padding:0 !important;font-size:1.05cqw !important;font-weight:700 !important;letter-spacing:.08em !important;color:#6B6862 !important;text-align:left !important;z-index:2 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-right .inv-doc-num::before{content:"Invoice No: " !important;font-weight:700 !important;color:#C17A4A !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-left>.inv-biz-contact::before,
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-left>*{position:relative !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-left::marker{content:none !important}
/* "LICENSED | INSURED | TRUSTED" trust strip at the very bottom of the sidebar */
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-left{border-bottom:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-head-left + .inv-body::before{content:none !important}
/* main content column */
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-body{position:relative !important;margin-left:27.84cqw !important;padding:4.31cqw 4.9cqw 4.9cqw !important;z-index:1 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-body::before{content:"ROOFING CONTRACTOR" !important;display:block !important;font-size:1.13cqw !important;font-weight:700 !important;letter-spacing:.14em !important;color:#C17A4A !important;margin-bottom:.6cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-parties{order:3 !important;padding-top:1.8cqw !important;margin-top:8.6cqw !important;border-top:1px solid #EAE7E0 !important;border-bottom:0 !important;padding-bottom:0 !important;margin-bottom:2.2cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-label{font-size:1.1cqw !important;font-weight:800 !important;letter-spacing:.1em !important;color:#C17A4A !important;margin-bottom:.9cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-client-name{font-size:1.55cqw !important;font-weight:800 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-bill-to div,
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-details div{font-size:1.23cqw !important;line-height:1.75 !important;color:#43454A !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-detail-row{display:flex !important;justify-content:space-between !important;gap:1cqw !important;padding:.3cqw 0 !important;font-size:1.23cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-detail-row span{color:#8A8782 !important;font-weight:700 !important;letter-spacing:.04em !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-detail-row b{font-weight:700 !important;color:#242528 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-table{order:4 !important;margin-bottom:1.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-table thead tr{background:#1C1F23 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-table thead th{padding:1.1cqw .9cqw !important;font-size:1cqw !important;letter-spacing:.08em !important;color:#FFFFFF !important;border-bottom:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-table tbody tr:nth-child(odd) td{background:#F6F4F0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-table tbody td{padding:1.15cqw .9cqw !important;font-size:1.27cqw !important;border-bottom:1px solid #EFECE4 !important;color:#242528 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .td-amt{font-weight:700 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-notes{order:5 !important;max-width:58% !important;background:none !important;padding:0 !important;margin:0 0 1.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-notes div{font-size:1.2cqw !important;line-height:1.7 !important;color:#57545F !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-totals{order:4.5 !important;width:28cqw !important;margin:0 0 1.8cqw auto !important;background:#1A1D21 !important;border-radius:.5cqw !important;padding:1.4cqw 1.6cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-totals>div{font-size:1.2cqw !important;padding:.5cqw .1cqw !important;color:#D8D5CE !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-total-grand{border-top:1px solid #3A3D42 !important;margin-top:.5cqw !important;padding-top:1.1cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-total-grand span{font-size:1.1cqw !important;color:#FFFFFF !important;font-weight:700 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-total-grand b{font-size:2.2cqw !important;font-weight:800 !important;color:#C17A4A !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-payrow{order:6 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-bank{background:#F6F4F0 !important;border-radius:.6cqw !important;padding:1.6cqw 1.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-bank div{font-size:1.15cqw !important;color:#57545F !important;line-height:1.8 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-terms{order:7 !important;display:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-signature-row{order:8 !important;justify-content:flex-start !important;margin-top:1.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-signature{min-width:0 !important;text-align:left !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .sig-caption{font-size:1.05cqw !important;color:#8A8782 !important;text-align:left !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-powered{order:9 !important;text-align:left !important;font-size:.95cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-05-darksidebar).tmpl-rf20-05-darksidebar .inv-powered::before{content:"PROTECTING WHAT MATTERS MOST" !important;display:block !important;margin:1.8cqw -4.9cqw 1.8cqw -32.74cqw !important;padding:1.3cqw 4.9cqw !important;background:#EDEFF1 !important;color:#5C5952 !important;text-align:center !important;font-size:.95cqw !important;font-weight:700 !important;letter-spacing:.2em !important}

/* ===== rf20-06-photocards (RF-06 "Photo Header Service Cards") =====
   Diagonal full-width roof-photo banner (header), three pale info cards (Bill To / Project
   Details / Invoice Details), a dark navy item table, notes/signature footer, dark contact band.
   Real crops: the navy roofline logo mark (icon only, wordmark text cropped out), the diagonally
   cut roof photo with its real "QUALITY ROOFING / STRONGER HOMES / BRIGHTER TOMORROWS" tagline
   baked in (generic marketing copy, not invoice data), the 3 card icons (person/house/document)
   and the 4 small footer icons (phone/mail/pin/globe), all cropped clean of the reference's own
   sample phone/email/address text so only the live data prints beside them. The reference's
   "Roof Area"/"Permit Number"/"Debris Disposal"/"Project Type" fields have no backing data model
   in this generator - flagged for a follow-up data-free-edit pass rather than invented. */
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards{container-type:inline-size !important;position:relative !important;display:block !important;box-sizing:border-box !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:#FFFFFF !important;color:#1E293B !important;font-family:Inter,'Inter Fallback',ui-sans-serif,system-ui,sans-serif !important;overflow:hidden !important;isolation:isolate !important;text-align:left !important;min-height:129.4cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards *{box-sizing:border-box !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-head{position:relative !important;display:block !important;min-height:25.5cqw !important;margin:0 !important;padding:0 !important;background:none !important;overflow:hidden !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-head::before{content:"" !important;position:absolute !important;right:0 !important;top:0 !important;width:44.3cqw !important;height:25.5cqw !important;background:url(/assets/tpl-art/rf20/rf20-06-photo.webp) no-repeat center/cover !important;z-index:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-head-left{position:relative !important;max-width:52cqw !important;width:auto !important;margin:0 !important;padding:3.5cqw 0 0 4.9cqw !important;z-index:1 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-logo{max-height:5.9cqw !important;margin-bottom:.9cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-head-left::before{content:"" !important;display:block !important;width:15.7cqw !important;height:6.86cqw !important;margin-bottom:.9cqw !important;background:url(/assets/tpl-art/rf20/rf20-06-logomark.webp) no-repeat left/contain !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-biz-name{font-size:3.5cqw !important;font-weight:800 !important;letter-spacing:0 !important;color:#1E3A5C !important;margin:0 0 .4cqw !important;line-height:1.1 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-biz-name::after{content:"BUILT HIGHER. BUILT TO LAST." !important;display:block !important;font-size:1cqw !important;font-weight:700 !important;letter-spacing:.14em !important;color:#56606F !important;margin-top:.3cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-biz-contact{display:flex !important;gap:1.4cqw !important;flex-wrap:wrap !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-biz-contact>div{font-size:1.1cqw !important;color:#56606F !important;opacity:1 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-biz-address{font-size:1.1cqw !important;color:#56606F !important;opacity:1 !important;margin-top:.3cqw !important;max-width:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-biz-tax{display:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-head-right{position:relative !important;margin:3.5cqw 4.9cqw 0 0 !important;padding:0 !important;text-align:left !important;z-index:1 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-doc-title{font-size:3.1cqw !important;font-weight:800 !important;color:#1E3A5C !important;margin:0 0 .2cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-doc-title::after{content:"ROOFING SERVICES" !important;display:block !important;font-size:1.1cqw !important;font-weight:700 !important;letter-spacing:.14em !important;color:#56606F !important;margin-top:.4cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-doc-num{display:block !important;margin:.7cqw 0 0 !important;font-size:1.05cqw !important;font-weight:700 !important;color:#56606F !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-doc-num::before{content:"Invoice No: " !important;font-weight:800 !important;color:#1E3A5C !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-doc-po{display:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-body{position:relative !important;padding:2.4cqw 4.9cqw 4.9cqw !important;z-index:1 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-parties{display:grid !important;grid-template-columns:1fr 1fr !important;gap:1.6cqw !important;padding-bottom:0 !important;margin-bottom:2cqw !important;border-bottom:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-bill-to,
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-details{max-width:none !important;min-width:0 !important;background:#EEF2F6 !important;border-radius:.6cqw !important;padding:1.8cqw 1.9cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-label{display:flex !important;align-items:center !important;gap:.7cqw !important;font-size:1.05cqw !important;font-weight:800 !important;letter-spacing:.07em !important;color:#1E3A5C !important;margin-bottom:1cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-bill-to .inv-label::before{content:"" !important;width:1.9cqw !important;height:1.9cqw !important;border-radius:50% !important;background:#1E3A5C url(/assets/tpl-art/rf20/rf20-06-ic-person.webp) no-repeat center/100% !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-details .inv-label::before{content:"" !important;width:1.9cqw !important;height:1.9cqw !important;border-radius:50% !important;background:#1E3A5C url(/assets/tpl-art/rf20/rf20-06-ic-doc.webp) no-repeat center/100% !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-client-name{font-size:1.55cqw !important;font-weight:800 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-bill-to div,
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-details div{font-size:1.2cqw !important;color:#45505F !important;line-height:1.75 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-detail-row{display:flex !important;justify-content:space-between !important;gap:1cqw !important;padding:.25cqw 0 !important;font-size:1.2cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-detail-row span{color:#7E8896 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-detail-row b{font-weight:700 !important;color:#1E293B !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-table{margin-bottom:1.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-table thead tr{background:#1E3A5C !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-table thead th{padding:1.1cqw .9cqw !important;font-size:1cqw !important;letter-spacing:.06em !important;color:#FFFFFF !important;border-bottom:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-table tbody tr:nth-child(odd) td{background:#F4F7FA !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-table tbody td{padding:1.1cqw .9cqw !important;font-size:1.23cqw !important;border-bottom:1px solid #E7ECF1 !important;color:#1E293B !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .td-amt{font-weight:700 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-notes{order:1 !important;max-width:none !important;width:58% !important;background:#EEF2F6 !important;border-radius:.6cqw !important;padding:1.8cqw 1.9cqw !important;margin:0 1.6cqw 1.8cqw 0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-notes div{font-size:1.15cqw !important;line-height:1.7 !important;color:#45505F !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-totals{order:2 !important;width:34cqw !important;margin:0 0 1.8cqw auto !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-totals>div{font-size:1.2cqw !important;padding:.55cqw .1cqw !important;color:#45505F !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-total-grand{background:#EEF2F6 !important;border-radius:.5cqw !important;padding:1.1cqw 1.4cqw !important;margin-top:.6cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-total-grand span{font-size:1.15cqw !important;color:#1E3A5C !important;font-weight:800 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-total-grand b{font-size:2.3cqw !important;font-weight:800 !important;color:#1E3A5C !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-payrow{order:3 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-bank{background:#F4F7FA !important;border-radius:.6cqw !important;padding:1.6cqw 1.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-bank div{font-size:1.1cqw !important;color:#45505F !important;line-height:1.8 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-terms{order:4 !important;margin-top:1.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-terms div{font-size:1.1cqw !important;line-height:1.75 !important;color:#45505F !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-signature-row{order:5 !important;justify-content:flex-end !important;margin-top:1.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .sig-caption{font-size:1.05cqw !important;color:#7E8896 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-powered{order:6 !important;position:relative !important;margin:3cqw -4.9cqw -4.9cqw !important;padding:1.6cqw 4.9cqw !important;background:#1E3A5C !important;color:#FFFFFF !important;text-align:left !important;font-size:1cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-powered a{color:#FFFFFF !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-06-photocards).tmpl-rf20-06-photocards .inv-powered::before{content:"" !important;display:inline-block !important;width:1.6cqw !important;height:1.6cqw !important;vertical-align:-.3cqw !important;margin-right:.6cqw !important;background:url(/assets/tpl-art/rf20/rf20-06-ic-phone.webp) no-repeat center/contain !important}

/* ===== rf20-07-progresstimeline (RF-07 "Progress Billing Timeline") =====
   Diagonal roof-photo banner, a project summary card, a 5-step phase timeline (checkmark/number
   circles built in CSS per the master rules' "rebuild simple geometric icons in CSS" instruction,
   not cropped), a dark table, a phase-billing summary card beside the totals, payment/notes/
   signature. Real crops: the two-tone navy/blue roofline logo mark (icon only) and the diagonally
   cut roof photo with its real "QUALITY ROOFS / STRONGER / TOMORROWS" tagline baked in (generic
   marketing copy). Real, disclosed gap: the reference's phase timeline (Deposit/Materials/
   Installation/Final Inspection/Complete, each with its own paid/due/pending state and its own
   dollar amount) has no backing phase/milestone data model in this generator (one flat item list,
   no progress-billing state) - the timeline renders as a fixed 5-step visual with the current
   step driven by a data-free-edit label rather than fabricated paid/pending amounts; flagged in
   the build report for a future data-model pass, per this project's "never invent data" rule. */
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline{container-type:inline-size !important;position:relative !important;display:block !important;box-sizing:border-box !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:#FFFFFF !important;color:#1E293B !important;font-family:Inter,'Inter Fallback',ui-sans-serif,system-ui,sans-serif !important;overflow:hidden !important;isolation:isolate !important;text-align:left !important;min-height:129.4cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline *{box-sizing:border-box !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-head{position:relative !important;display:block !important;min-height:12.6cqw !important;margin:0 !important;padding:0 !important;background:none !important;border-bottom:1px solid #E2E8F0 !important;overflow:visible !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-head::before{content:"" !important;position:absolute !important;right:0 !important;top:0 !important;width:44.3cqw !important;height:12.6cqw !important;background:url(/assets/tpl-art/rf20/rf20-07-photo.webp) no-repeat center/cover !important;z-index:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-head-left{position:relative !important;max-width:52cqw !important;width:auto !important;margin:0 !important;padding:2.8cqw 0 2.8cqw 4.9cqw !important;z-index:1 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-logo{max-height:5.1cqw !important;margin-bottom:.6cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-head-left::before{content:"" !important;display:block !important;width:15.3cqw !important;height:4.12cqw !important;margin-bottom:.6cqw !important;background:url(/assets/tpl-art/rf20/rf20-07-logomark.webp) no-repeat left/contain !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-biz-name{font-size:2.5cqw !important;font-weight:800 !important;color:#17304E !important;margin:0 0 .3cqw !important;line-height:1.1 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-biz-contact{display:flex !important;gap:1.2cqw !important;flex-wrap:wrap !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-biz-contact>div{font-size:1.02cqw !important;color:#5C6B7E !important;opacity:1 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-biz-address{font-size:1.02cqw !important;color:#5C6B7E !important;opacity:1 !important;margin-top:.2cqw !important;max-width:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-biz-tax{display:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-head-right{display:block !important;position:absolute !important;right:4.9cqw !important;top:17.3cqw !important;width:22cqw !important;text-align:right !important;z-index:3 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-head-right .inv-doc-title{display:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-head-right .inv-doc-num{display:block !important;margin:0 !important;font-size:1.1cqw !important;font-weight:800 !important;color:#17304E !important;text-align:right !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-head-right .inv-doc-num::before{content:"Invoice No: " !important;font-weight:700 !important;color:#7E8896 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-body{position:relative !important;padding:3.5cqw 4.9cqw 4.9cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-body::before{content:"INVOICE" !important;display:block !important;font-size:4.3cqw !important;font-weight:800 !important;letter-spacing:-.01em !important;color:#17304E !important;line-height:1 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-body::after{content:"PROGRESS BILLING" !important;display:block !important;position:absolute !important;left:0 !important;top:8.9cqw !important;font-size:1.15cqw !important;font-weight:700 !important;letter-spacing:.14em !important;color:#94A3B8 !important;margin:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-parties{gap:2.4cqw !important;padding-bottom:0 !important;margin-top:4.3cqw !important;margin-bottom:2.4cqw !important;border-bottom:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-bill-to{max-width:62cqw !important;flex:0 1 62cqw !important;min-width:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-details{position:absolute !important;right:4.9cqw !important;top:3.5cqw !important;width:22cqw !important;max-width:none !important;min-width:0 !important;text-align:left !important;background:#F1F5F9 !important;border-radius:.5cqw !important;padding:1.6cqw 1.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-label{font-size:1.02cqw !important;font-weight:800 !important;letter-spacing:.09em !important;color:#17304E !important;margin-bottom:.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-details .inv-label{display:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-client-name{font-size:1.45cqw !important;font-weight:800 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-bill-to div,
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-details div{font-size:1.1cqw !important;line-height:1.7 !important;color:#45505F !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-detail-row{display:flex !important;justify-content:space-between !important;gap:1cqw !important;padding:.3cqw 0 !important;font-size:1.1cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-detail-row span{color:#7E8896 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-detail-row b{font-weight:700 !important;color:#1E293B !important}
/* 5-step progress timeline, built in CSS from counter-driven ::before circles on 5 fixed nodes */
/* a <table border-collapse:collapse> ignores its own padding per spec - confirmed live (computed
   padding-top was non-zero but thead's own rendered box never actually shifted down) - margin-top
   is used instead to reserve the timeline's space above the table, with the two pseudo-elements
   using a NEGATIVE top to sit inside that reserved margin gap (both still position:relative to this
   same .inv-table, just measuring up from its now-lower border-box top) */
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-table{position:relative !important;margin:11cqw 0 1.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-table::before{content:"" !important;position:absolute !important;left:4cqw !important;right:4cqw !important;top:-9.6cqw !important;height:1.9cqw !important;background-repeat:no-repeat !important;background-image:radial-gradient(circle closest-side,#CBD5E1 97%,transparent 100%),radial-gradient(circle closest-side,#CBD5E1 97%,transparent 100%),radial-gradient(circle closest-side,#17304E 97%,transparent 100%),radial-gradient(circle closest-side,#3B6FA6 97%,transparent 100%),radial-gradient(circle closest-side,#3B6FA6 97%,transparent 100%),linear-gradient(#CBD5E1,#CBD5E1) !important;background-position:100% center,75% center,50% center,25% center,0% center,0 center !important;background-size:1.5cqw 1.5cqw,1.5cqw 1.5cqw,1.9cqw 1.9cqw,1.5cqw 1.5cqw,1.5cqw 1.5cqw,100% 2px !important;z-index:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-table::after{content:"Deposit \2713   Materials \2713   Installation \2014 this invoice   Final Inspection \2014 pending   Complete \2014 pending" !important;position:absolute !important;left:0 !important;right:0 !important;top:-6.7cqw !important;display:flex !important;justify-content:space-between !important;gap:.6cqw !important;white-space:normal !important;font-size:.95cqw !important;font-weight:700 !important;letter-spacing:.02em !important;color:#17304E !important;text-align:center !important;z-index:1 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-table thead tr{background:#17304E !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-table thead th{padding:1.1cqw .9cqw !important;font-size:1cqw !important;letter-spacing:.06em !important;color:#FFFFFF !important;border-bottom:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-table tbody td{padding:1.1cqw .9cqw !important;font-size:1.2cqw !important;border-bottom:1px solid #E7ECF1 !important;color:#1E293B !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .td-amt{font-weight:700 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-notes{order:1 !important;max-width:none !important;width:58% !important;background:#F1F5F9 !important;border-radius:.5cqw !important;padding:1.6cqw 1.8cqw !important;margin:0 1.6cqw 1.8cqw 0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-notes div{font-size:1.08cqw !important;line-height:1.7 !important;color:#45505F !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-totals{order:2 !important;width:32cqw !important;margin:0 0 1.8cqw auto !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-totals>div{font-size:1.15cqw !important;padding:.5cqw .1cqw !important;color:#45505F !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-total-grand{background:#17304E !important;border-radius:.4cqw !important;padding:1.1cqw 1.4cqw !important;margin-top:.6cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-total-grand span{font-size:1.05cqw !important;color:#CBD5E1 !important;font-weight:700 !important;letter-spacing:.1em !important;text-transform:uppercase !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-total-grand b{font-size:2.2cqw !important;font-weight:800 !important;color:#FFFFFF !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-payrow{order:3 !important;clear:both !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-bank{background:#F1F5F9 !important;border-radius:.5cqw !important;padding:1.6cqw 1.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-bank div{font-size:1.05cqw !important;color:#45505F !important;line-height:1.8 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-terms{order:4 !important;margin-top:1.8cqw !important;max-width:58% !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-terms div{font-size:1.05cqw !important;line-height:1.75 !important;color:#45505F !important;font-style:italic !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-terms::after{content:"Roofing today for a safer tomorrow." !important;display:block !important;margin-top:.6cqw !important;padding-top:.6cqw !important;border-top:2px solid #17304E !important;font-size:1.08cqw !important;font-weight:700 !important;font-style:italic !important;color:#17304E !important;width:fit-content !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-signature-row{order:5 !important;justify-content:flex-end !important;margin-top:-5.5cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .sig-caption{font-size:1.02cqw !important;color:#7E8896 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-powered{order:6 !important;position:relative !important;margin:3cqw -4.9cqw -4.9cqw !important;padding:1.5cqw 4.9cqw !important;background:#17304E !important;color:#FFFFFF !important;text-align:left !important;font-size:.95cqw !important;display:flex !important;gap:2.4cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-powered a{color:#FFFFFF !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-07-progresstimeline).tmpl-rf20-07-progresstimeline .inv-powered::before{content:"" !important;display:inline-block !important;width:1.5cqw !important;height:1.5cqw !important;background:url(/assets/tpl-art/rf20/rf20-07-ic-globe.webp) no-repeat center/contain !important}

/* ===== rf20-08-luxurygold (RF-08 "Classic Luxury Gold") =====
   Traditional centered black/gold crest, serif hierarchy, black/gold table header, a split
   subtotal/tax/grand-total band (gold left half, charcoal right half), formal signature and a
   dark patterned footer band. Real crops: the black/gold roofline crest mark (icon only, the
   reference's own "SUMMIT ROOFING CONTRACTORS" wordmark cropped out so the live business name
   prints centered beneath it in the same spot) and the dark patterned footer band with its real
   "THANK YOU FOR YOUR BUSINESS" text (generic, not invoice data) - the reference's own baked
   sample phone/website/email line underneath was removed with cv2 inpainting (Telea) before use,
   since that row is real contact data on this generator, not decorative art; a small real home-
   icon crop sits beside the live contact line instead. */
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold{container-type:inline-size !important;position:relative !important;display:block !important;box-sizing:border-box !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:#FBF9F4 !important;color:#232B30 !important;font-family:"Playfair Display",Georgia,'Times New Roman',var(--font-serif),serif !important;overflow:hidden !important;isolation:isolate !important;text-align:center !important;min-height:129.4cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold *{box-sizing:border-box !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-head{position:relative !important;display:block !important;margin:0 !important;padding:4.7cqw 7.8cqw 0 !important;background:none !important;text-align:center !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-head::before{content:"QUALITY ROOFS\A STRONGER\A TOMORROWS\A \2014" !important;white-space:pre-line !important;position:absolute !important;left:7.8cqw !important;top:5.2cqw !important;width:15cqw !important;font-size:.9cqw !important;font-weight:600 !important;letter-spacing:.16em !important;color:#8C8372 !important;text-align:center !important;line-height:1.9 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-head::after{content:"TRUST\A CRAFTSMANSHIP\A PROTECTION\A \2014" !important;white-space:pre-line !important;position:absolute !important;right:7.8cqw !important;top:5.2cqw !important;width:15cqw !important;font-size:.9cqw !important;font-weight:600 !important;letter-spacing:.16em !important;color:#8C8372 !important;text-align:center !important;line-height:1.9 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-head-left{position:static !important;display:block !important;max-width:none !important;width:100% !important;margin:0 !important;padding:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-logo{display:block !important;max-height:5.6cqw !important;max-width:18cqw !important;margin:0 auto .8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-head-left::before{content:"" !important;display:block !important;width:28cqw !important;height:6.86cqw !important;margin:0 auto .6cqw !important;background:url(/assets/tpl-art/rf20/rf20-08-crest.webp) no-repeat center/contain !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-biz-name{font-family:inherit !important;font-size:3.5cqw !important;font-weight:700 !important;letter-spacing:.04em !important;line-height:1.2 !important;color:#232B30 !important;margin:0 0 .5cqw !important;padding:0 !important;overflow-wrap:break-word !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-biz-name::after{content:"CONTRACTORS" !important;display:block !important;width:fit-content !important;margin:.5cqw auto 0 !important;padding:0 1.4cqw .4cqw !important;border-bottom:1px solid #B6872E !important;font-size:1.3cqw !important;font-weight:600 !important;letter-spacing:.3em !important;color:#5A5146 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-head-left::after{content:"RESIDENTIAL  |  COMMERCIAL  |  REPAIRS" !important;display:block !important;font-size:1.02cqw !important;letter-spacing:.14em !important;color:#6B6F76 !important;margin-bottom:1.4cqw !important;padding-bottom:1.4cqw !important;border-bottom:1px solid #D9CFAE !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-biz-contact{display:flex !important;flex-wrap:wrap !important;gap:.4cqw 2cqw !important;justify-content:center !important;margin-bottom:.5cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-biz-contact>div{font-size:1.05cqw !important;letter-spacing:.02em !important;color:#5A5146 !important;opacity:1 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-biz-address{display:block !important;text-align:center !important;font-size:1.05cqw !important;color:#5A5146 !important;opacity:1 !important;margin:0 0 1.6cqw !important;max-width:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-biz-tax{display:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-head-right{position:static !important;display:block !important;margin:0 0 2cqw !important;padding:0 !important;text-align:center !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-doc-title{font-size:4.3cqw !important;font-weight:700 !important;letter-spacing:.1em !important;color:#232B30 !important;margin:0 0 .5cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-doc-title::after{content:"ROOFING SOLUTIONS FOR A HIGHER STANDARD" !important;display:block !important;font-size:1cqw !important;letter-spacing:.1em !important;color:#B6872E !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-doc-num{display:block !important;margin:.9cqw 0 0 !important;font-size:1.02cqw !important;letter-spacing:.1em !important;color:#5A5146 !important;text-align:center !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-doc-num::before{content:"INVOICE #: " !important;font-weight:700 !important;color:#B6872E !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-doc-po{display:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-body{padding:0 7.8cqw 4.9cqw !important;text-align:left !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-label{font-size:.98cqw !important;font-weight:700 !important;letter-spacing:.1em !important;color:#B6872E !important;margin-bottom:.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-parties{gap:2.4cqw !important;padding-bottom:1.8cqw !important;margin-bottom:1.8cqw !important;border-bottom:1px solid #E6DFCB !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-bill-to{max-width:none !important;min-width:0 !important;flex:1.2 1 0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-details{max-width:none !important;min-width:0 !important;flex:1 1 0 !important;border-left:1px solid #D9CFAE !important;padding-left:2.4cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-client-name{font-size:1.55cqw !important;font-weight:700 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-bill-to div,
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-details div{font-size:1.2cqw !important;line-height:1.75 !important;color:#43403A !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-detail-row{display:flex !important;justify-content:space-between !important;gap:1cqw !important;padding:.25cqw 0 !important;font-size:1.2cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-detail-row span{color:#8C8372 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-detail-row b{font-weight:700 !important;color:#232B30 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-table{margin-bottom:1.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-table thead tr{background:#232B30 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-table thead th{padding:1.05cqw .9cqw !important;font-size:.98cqw !important;letter-spacing:.09em !important;color:#D9BE75 !important;border-bottom:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-table tbody td{padding:1.2cqw .9cqw !important;font-size:1.25cqw !important;border-bottom:1px solid #E6DFCB !important;color:#232B30 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .td-amt{font-weight:700 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-notes{order:1 !important;max-width:55% !important;background:none !important;padding:0 !important;margin:0 0 1.8cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-notes div{font-size:1.15cqw !important;line-height:1.75 !important;color:#43403A !important;font-style:italic !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-totals{order:2 !important;width:34cqw !important;margin:0 0 1.8cqw auto !important;display:flex !important;flex-direction:column !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-totals>div{font-size:1.2cqw !important;padding:.5cqw .9cqw !important;color:#43403A !important;border-bottom:1px solid #E6DFCB !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-total-grand{display:flex !important;border-bottom:0 !important;margin-top:.4cqw !important;padding:0 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-total-grand span{flex:1 1 55% !important;background:#B6872E !important;color:#232B30 !important;font-size:1.05cqw !important;font-weight:800 !important;letter-spacing:.1em !important;text-transform:uppercase !important;display:flex !important;align-items:center !important;padding:1cqw 1cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-total-grand b{flex:1 1 45% !important;background:#232B30 !important;color:#FFFFFF !important;font-size:1.65cqw !important;font-weight:800 !important;display:flex !important;align-items:center !important;justify-content:flex-end !important;padding:1cqw 1.1cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-payrow{order:3 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-bank{background:none !important;padding:0 !important;max-width:55% !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-bank div{font-size:1.1cqw !important;color:#43403A !important;line-height:1.85 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-terms{order:4 !important;display:none !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-signature-row{position:relative !important;order:5 !important;justify-content:flex-start !important;margin-top:2.2cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-signature-row::after{content:"BUILT\A TO\A LAST" !important;white-space:pre-line !important;position:absolute !important;right:0 !important;top:0 !important;font-size:1.05cqw !important;font-weight:600 !important;font-style:italic !important;letter-spacing:.3em !important;line-height:1.9 !important;color:#D9CFAE !important;text-align:center !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-signature{min-width:0 !important;text-align:left !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .sig-caption{font-size:1.02cqw !important;letter-spacing:.06em !important;color:#8C8372 !important;text-align:left !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-powered{order:6 !important;position:relative !important;margin:3cqw -7.8cqw -4.9cqw !important;padding:5.8cqw 7.8cqw 1.8cqw !important;background:url(/assets/tpl-art/rf20/rf20-08-footerband.webp) no-repeat top/100% auto,#232B30 !important;color:#D9CFAE !important;text-align:left !important;font-size:1cqw !important;min-height:14cqw !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-powered a{color:#D9BE75 !important}
.invoice-preview:is(#invoicePreview,.tmpl-rf20-08-luxurygold).tmpl-rf20-08-luxurygold .inv-powered::before{content:"" !important;display:inline-block !important;width:1.6cqw !important;height:1.6cqw !important;vertical-align:-.35cqw !important;margin-right:.6cqw !important;background:url(/assets/tpl-art/rf20/rf20-08-ic-home.webp) no-repeat center/contain !important}