{"id":98026,"date":"2026-06-19T13:06:41","date_gmt":"2026-06-19T12:06:41","guid":{"rendered":"https:\/\/invoicefly.com\/?page_id=98026"},"modified":"2026-06-19T16:18:58","modified_gmt":"2026-06-19T15:18:58","slug":"invoice-templates-html-test","status":"publish","type":"page","link":"https:\/\/invoicefly.com\/es\/invoice-templates-html-test\/","title":{"rendered":"Invoice Templates HTML Test"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"98026\" class=\"elementor elementor-98026\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-484c044 e-con-full e-flex e-con e-parent\" data-id=\"484c044\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b4238f elementor-widget elementor-widget-html\" data-id=\"3b4238f\" data-element_type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n<link\n  rel=\"stylesheet\"\n  href=\"https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@500;600&display=swap\"\n  media=\"print\"\n  onload=\"this.media = 'all'\"\n\/>\n<noscript\n  ><link\n    rel=\"stylesheet\"\n    href=\"https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@500;600&display=swap\"\n\/><\/noscript>\n\n<style>\n  html,\n  body {\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n  .elementor-section,\n  .elementor-column,\n  .elementor-widget-wrap,\n  .elementor-widget-html,\n  .elementor-widget-container,\n  .e-container,\n  .e-con,\n  .e-con-inner,\n  .e-flex,\n  .e-child {\n    overflow: visible !important;\n  }\n\n  \/* 3. WP themes sometimes add underlines \/ colours to every <a> or\n        max-width:100% to every <img>. Reinforce our own resets so those\n        global rules can't leak inside the widget. *\/\n  .iftpl-widget a {\n    color: inherit !important;\n    text-decoration: none !important;\n  }\n  .iftpl-widget img {\n    display: block;\n    max-width: 100%;\n    height: auto;\n  }\n  .iftpl-widget *,\n  .iftpl-widget *::before,\n  .iftpl-widget *::after {\n    box-sizing: border-box;\n  }\n\n  \/* ===== ROOT SCOPE ===== *\/\n  .iftpl-widget {\n    --brand: #0044bb;\n    --brand-dark: #003299;\n    --brand-700: #0036a6;\n    --brand-600: #0044bb;\n    --brand-500: #1e5eff;\n    --brand-100: #d9e4ff;\n    --brand-50: #edf2ff;\n    --ink: #0a1628;\n    --ink-soft: #2a3a52;\n    --ink-mute: #4a5568;\n    --ink-faint: #6b7689;\n    --bg: #ffffff;\n    --bg-soft: #f6f8fb;\n    --bg-tint: #eef2f8;\n    --line: #e4e8f0;\n    --line-soft: #eff2f7;\n    --safety: #ff8c00;\n    --green: #16a34a;\n    --radius: 12px;\n    --radius-lg: 16px;\n    --radius-pill: 999px;\n    --shadow-sm:\n      0 1px 2px rgba(10, 22, 40, 0.04), 0 1px 1px rgba(10, 22, 40, 0.06);\n    --shadow-md:\n      0 4px 12px -2px rgba(10, 22, 40, 0.08),\n      0 2px 4px -1px rgba(10, 22, 40, 0.04);\n    --shadow-lg:\n      0 16px 32px -8px rgba(10, 22, 40, 0.12),\n      0 4px 8px -2px rgba(10, 22, 40, 0.06);\n    --shadow-brand: 0 8px 20px -4px rgba(0, 68, 187, 0.32);\n    --ease: cubic-bezier(0.32, 0.72, 0, 1);\n    --font:\n      \"Manrope\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    --font-mono: \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace;\n\n    font-family: var(--font);\n    color: var(--ink);\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n    background: var(--bg);\n    width: 100%;\n    box-sizing: border-box;\n    position: relative;\n  }\n  .iftpl-widget *,\n  .iftpl-widget *::before,\n  .iftpl-widget *::after {\n    box-sizing: border-box;\n  }\n  .iftpl-widget h1,\n  .iftpl-widget h2,\n  .iftpl-widget h3,\n  .iftpl-widget h4,\n  .iftpl-widget p,\n  .iftpl-widget ul,\n  .iftpl-widget li {\n    margin: 0;\n    padding: 0;\n  }\n  .iftpl-widget ul {\n    list-style: none;\n  }\n  .iftpl-widget button {\n    font-family: inherit;\n    cursor: pointer;\n    background: none;\n    border: none;\n    color: inherit;\n    padding: 0;\n  }\n  .iftpl-widget a {\n    color: inherit;\n    text-decoration: none;\n  }\n  .iftpl-widget input {\n    font-family: inherit;\n    color: inherit;\n  }\n  .iftpl-widget img {\n    display: block;\n    max-width: 100%;\n    height: auto;\n  }\n  .iftpl-widget svg {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  \/* ===== BUTTONS ===== *\/\n  .iftpl-widget .btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 12px 22px;\n    border-radius: var(--radius-pill);\n    font-size: 14.5px;\n    font-weight: 700;\n    border: 1.5px solid transparent;\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      background-color 0.2s var(--ease),\n      border-color 0.2s var(--ease),\n      box-shadow 0.2s var(--ease),\n      transform 0.2s var(--ease),\n      color 0.2s var(--ease);\n    white-space: nowrap;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n  }\n  .iftpl-widget .btn-primary {\n    background: var(--brand);\n    color: white !important;\n    border-color: var(--brand);\n    box-shadow: var(--shadow-brand);\n  }\n  .iftpl-widget .btn-primary:hover {\n    background: var(--brand-dark);\n    border-color: var(--brand-dark);\n    transform: translateY(-1px);\n    box-shadow: 0 12px 28px -4px rgba(0, 68, 187, 0.42);\n  }\n  .iftpl-widget .btn-outline {\n    background: white;\n    color: var(--ink);\n    border-color: var(--line);\n  }\n  .iftpl-widget .btn-outline:hover {\n    border-color: var(--ink);\n    background: var(--bg-soft);\n  }\n  .iftpl-widget .btn-ghost {\n    background: transparent;\n    color: var(--ink-soft);\n    padding: 8px 14px;\n    font-weight: 600;\n  }\n  .iftpl-widget .btn-ghost:hover {\n    color: var(--ink);\n    background: var(--bg-soft);\n  }\n  .iftpl-widget .btn-lg {\n    padding: 10px 20px;\n    font-size: 14px;\n  }\n\n  \/* ===== HERO ===== *\/\n  .iftpl-widget .hero {\n    width: 100%;\n    padding: 72px 0 24px;\n    background:\n      radial-gradient(\n        ellipse 70% 80% at 85% 20%,\n        rgba(30, 94, 255, 0.45) 0%,\n        transparent 70%\n      ),\n      radial-gradient(\n        ellipse 60% 60% at 0% 100%,\n        rgba(0, 68, 187, 0.32) 0%,\n        transparent 70%\n      ),\n      var(--ink);\n    position: relative;\n    isolation: isolate;\n  }\n  .iftpl-widget .hero-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 32px 32px 40px;\n  }\n\n  \/* \u2500\u2500 Hero: dark-background text & UI overrides \u2500\u2500 *\/\n  .iftpl-widget .hero .crumbs {\n    color: rgba(255, 255, 255, 0.45);\n  }\n  .iftpl-widget .hero .crumbs a:hover {\n    color: white;\n  }\n  .iftpl-widget .hero .crumbs .sep {\n    color: rgba(255, 255, 255, 0.25);\n    opacity: 1;\n  }\n  .iftpl-widget .hero .crumbs .current {\n    color: rgba(255, 255, 255, 0.7);\n  }\n  .iftpl-widget .hero .hero-badge {\n    background: rgba(255, 255, 255, 0.1);\n    border-color: rgba(255, 255, 255, 0.2);\n    color: white;\n  }\n  .iftpl-widget .hero .hero-badge-dot {\n    background: var(--brand-500);\n  }\n  .iftpl-widget .hero .hero-h1 {\n    color: white;\n  }\n  .iftpl-widget .hero .hero-h1 .hi {\n    color: var(--brand);\n  }\n  .iftpl-widget .hero .hero-lead {\n    color: rgba(255, 255, 255, 0.75);\n  }\n  .iftpl-widget .hero .hero-proof-text {\n    color: rgba(255, 255, 255, 0.75);\n  }\n  .iftpl-widget .hero .hero-proof-text strong {\n    color: white;\n    margin-left: 1px;\n  }\n  .iftpl-widget .hero .hero-proof-sep {\n    background: rgba(255, 255, 255, 0.2);\n  }\n  .iftpl-widget .hero .btn-outline {\n    background: transparent;\n    color: white !important;\n    border-color: rgba(255, 255, 255, 0.35);\n  }\n  .iftpl-widget .hero .btn-outline:hover {\n    background: rgba(255, 255, 255, 0.1);\n    border-color: white;\n    color: white !important;\n  }\n  .iftpl-widget .hero .hero-doc {\n    box-shadow:\n      0 24px 48px -8px rgba(0, 0, 0, 0.5),\n      0 4px 12px -2px rgba(0, 0, 0, 0.35);\n  }\n  .iftpl-widget .hero-grid {\n    display: grid;\n    grid-template-columns: 1.4fr 1fr;\n    gap: 56px;\n    align-items: center;\n  }\n  .iftpl-widget .crumbs {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--ink-faint);\n    margin-bottom: 18px;\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: wrap;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n  }\n  .iftpl-widget .crumbs a:hover {\n    color: var(--brand);\n  }\n  .iftpl-widget .crumbs .sep {\n    color: var(--ink-faint);\n    opacity: 0.5;\n  }\n  .iftpl-widget .crumbs .current {\n    color: var(--ink-soft);\n    font-weight: 600;\n  }\n\n  .iftpl-widget .hero-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 14px;\n    background: var(--brand-50);\n    border: 1px solid var(--brand-100);\n    border-radius: var(--radius-pill);\n    font-size: 12px;\n    font-weight: 700;\n    color: var(--brand);\n    letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  }\n  .iftpl-widget .hero-badge-dot {\n    width: 18px;\n    height: 18px;\n    background: var(--brand);\n    color: white;\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    font-size: 10px;\n  }\n  .iftpl-widget .hero-h1 {\n    font-family: var(--font);\n    font-size: clamp(38px, 5.4vw, 50px) !important;\n    line-height: 1.04;\n    letter-spacing: -0.025em;\n    font-weight: 800;\n    color: var(--ink);\n    margin-bottom: 18px;\n  }\n  .iftpl-widget .hero-h1 .hi {\n    color: var(--brand);\n    position: relative;\n    display: inline-block;\n  }\n  .iftpl-widget .hero-lead {\n    font-size: 18px;\n    line-height: 1.55;\n    color: var(--ink-soft);\n    max-width: 560px;\n    margin-bottom: 28px;\n  }\n  .iftpl-widget .hero-ctas {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n    margin-bottom: 32px;\n  }\n  .iftpl-widget .hero-proof {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\n  }\n  .iftpl-widget .hero-proof-stars {\n    display: inline-flex;\n    gap: 1px;\n    color: #ffb800;\n  }\n  .iftpl-widget .hero-proof-text {\n    font-size: 13.5px;\n    color: var(--ink-soft);\n  }\n  .iftpl-widget .hero-proof-text strong {\n    color: var(--ink);\n    font-weight: 700;\n  }\n  .iftpl-widget .hero-proof-sep {\n    width: 1px;\n    height: 16px;\n    background: var(--line);\n  }\n\n  \/* Hero visual: stack of invoices with timer *\/\n  .iftpl-widget .hero-visual {\n    position: relative;\n    aspect-ratio: 1.05 \/ 1;\n    perspective: 1200px;\n    max-width: 410px;\n    width: 100%;\n    margin-left: auto;\n  }\n  .iftpl-widget .hero-stack {\n    position: absolute;\n    inset: 0;\n  }\n  .iftpl-widget .hero-doc {\n    position: absolute;\n    width: 70%;\n    aspect-ratio: 3\/4;\n    background: white;\n    border: 1px solid var(--line);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-lg);\n    overflow: hidden;\n    transition: transform 0.5s var(--ease);\n  }\n  .iftpl-widget .hero-doc img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    image-rendering: auto;\n  }\n  .iftpl-widget .hero-doc-1 {\n    top: 4%;\n    left: 0;\n    transform: rotate(-6deg);\n    z-index: 1;\n  }\n  .iftpl-widget .hero-doc-2 {\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%) rotate(2deg);\n    z-index: 2;\n  }\n  .iftpl-widget .hero-doc-3 {\n    top: 8%;\n    right: 0;\n    transform: rotate(7deg);\n    z-index: 1;\n  }\n  .iftpl-widget .hero-doc-head {\n    background: var(--ink);\n    color: white;\n    padding: 10% 8% 8%;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n  .iftpl-widget .hero-doc-head .ti {\n    font-family: var(--font);\n    font-size: 12px;\n    font-weight: 800;\n    letter-spacing: 0.05em;\n    text-transform: uppercase;\n  }\n  .iftpl-widget .hero-doc-head .num {\n    font-family: var(--font-mono);\n    font-size: 9px;\n    opacity: 0.7;\n  }\n  .iftpl-widget .hero-doc-body {\n    padding: 8%;\n    display: flex;\n    flex-direction: column;\n    gap: 6%;\n  }\n  .iftpl-widget .hero-doc-line {\n    height: 6px;\n    background: var(--bg-tint);\n    border-radius: 3px;\n  }\n  .iftpl-widget .hero-doc-line.short {\n    width: 50%;\n  }\n  .iftpl-widget .hero-doc-line.med {\n    width: 75%;\n  }\n  .iftpl-widget .hero-doc-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 4% 0;\n    border-bottom: 1px dashed var(--line-soft);\n  }\n  .iftpl-widget .hero-doc-row .lbl {\n    height: 5px;\n    width: 50%;\n    background: var(--bg-tint);\n    border-radius: 2px;\n  }\n  .iftpl-widget .hero-doc-row .val {\n    height: 5px;\n    width: 22%;\n    background: var(--ink);\n    border-radius: 2px;\n  }\n  .iftpl-widget .hero-doc-total {\n    background: var(--brand);\n    color: white;\n    padding: 6%;\n    border-radius: 8px;\n    margin-top: 4%;\n  }\n  .iftpl-widget .hero-doc-total .lbl {\n    font-family: var(--font-mono);\n    font-size: 8px;\n    opacity: 0.7;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n  }\n  .iftpl-widget .hero-doc-total .amt {\n    font-size: 14px;\n    font-weight: 800;\n    margin-top: 2%;\n  }\n  .iftpl-widget .hero-doc img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: top center;\n    display: block;\n    border-radius: inherit;\n  }\n\n  \/* ===== TRADE BAND (industry pills) ===== *\/\n  .iftpl-widget .trades {\n    max-width: 1330px;\n    margin: 0 auto;\n    padding: 20px 0px;\n  }\n  .iftpl-widget .trades-carousel {\n    position: relative;\n    padding: 0 60px;\n  }\n  .iftpl-widget .trades-grid {\n    display: flex;\n    gap: 12px;\n    overflow-x: auto;\n    scroll-behavior: smooth;\n    scroll-snap-type: x proximity;\n    padding: 6px 2px;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n  .iftpl-widget .trades-grid::-webkit-scrollbar {\n    display: none;\n  }\n  .iftpl-widget .trade {\n    flex: 0 0 auto;\n    scroll-snap-align: start;\n    background: var(--bg-soft);\n    border: 1.5px solid transparent;\n    border-radius: var(--radius-pill);\n    padding: 10px 18px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    white-space: nowrap;\n    transition:\n      border-color 0.2s var(--ease),\n      background-color 0.2s var(--ease),\n      transform 0.2s var(--ease),\n      box-shadow 0.2s var(--ease),\n      color 0.2s var(--ease);\n    cursor: pointer;\n  }\n  .iftpl-widget .trade:hover {\n    border-color: var(--brand);\n    background: var(--brand-50);\n    transform: translateY(-2px);\n    box-shadow: var(--shadow-md);\n  }\n  .iftpl-widget .trade.active {\n    border-color: var(--brand);\n    background: var(--brand);\n    color: white;\n  }\n  .iftpl-widget .trade-label {\n    font-size: 13.5px;\n    font-weight: 700;\n    letter-spacing: -0.01em;\n    color: var(--ink);\n  }\n  .iftpl-widget .trade.active .trade-label {\n    color: white;\n  }\n  \/* Carousel nav arrows *\/\n  .iftpl-widget .trades-nav {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 44px;\n    height: 44px;\n    border-radius: 50%;\n    background: #fff;\n    border: 1.5px solid var(--line);\n    box-shadow: var(--shadow-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--ink);\n    cursor: pointer;\n    z-index: 3;\n    transition:\n      border-color 0.2s var(--ease),\n      color 0.2s var(--ease),\n      box-shadow 0.2s var(--ease),\n      transform 0.2s var(--ease);\n  }\n  .iftpl-widget .trades-nav:hover {\n    border-color: var(--brand);\n    color: var(--brand);\n    box-shadow: var(--shadow-lg);\n    transform: translateY(-50%) scale(1.05);\n  }\n  .iftpl-widget .trades-nav.prev {\n    left: 4px;\n  }\n  .iftpl-widget .trades-nav.next {\n    right: 4px;\n  }\n  .iftpl-widget .trades-nav[hidden] {\n    display: none !important;\n  }\n\n  \/* ===== TAB PILLS (document type switcher) ===== *\/\n  .iftpl-widget .tab-pills-wrap {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 0 32px 20px;\n    transition: padding 0.25s var(--ease);\n  }\n  .iftpl-widget .tab-pills {\n    display: flex;\n    gap: 4px;\n    padding: 5px;\n    background: var(--bg-soft);\n    border: 1px solid var(--line);\n    border-radius: var(--radius-pill);\n    width: fit-content;\n    max-width: 100%;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n  }\n  .iftpl-widget .tab-pills::-webkit-scrollbar {\n    display: none;\n  }\n  .iftpl-widget .tab-pill {\n    padding: 9px 18px;\n    border-radius: var(--radius-pill);\n    background: transparent;\n    color: var(--ink-mute);\n    font-size: 13.5px;\n    font-weight: 600;\n    transition:\n      color 0.2s var(--ease),\n      background-color 0.2s var(--ease),\n      box-shadow 0.2s var(--ease);\n    white-space: nowrap;\n    text-decoration: none;\n    display: inline-block;\n    flex-shrink: 0;\n  }\n  .iftpl-widget .tab-pill:hover {\n    color: var(--ink);\n  }\n  .iftpl-widget .tab-pill.active {\n    background: white;\n    color: var(--ink);\n    box-shadow: var(--shadow-sm);\n  }\n\n  \/* ===== TOOLBAR ===== *\/\n  .iftpl-widget .toolbar-wrap {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 0 32px 20px;\n    position: relative;\n    transition: padding 0.25s var(--ease);\n  }\n  .iftpl-widget .toolbar {\n    background: white;\n    border: 1.5px solid var(--line);\n    border-radius: var(--radius-lg);\n    padding: 12px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-wrap: wrap;\n    box-shadow: var(--shadow-sm);\n  }\n  .iftpl-widget .tb-search {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    background: var(--bg-soft);\n    border: 1.5px solid transparent;\n    border-radius: var(--radius-pill);\n    padding: 0 16px;\n    flex: 1 1 240px;\n    min-width: 0;\n    height: 40px;\n    transition:\n      background-color 0.2s,\n      border-color 0.2s;\n  }\n  .iftpl-widget .tb-search:focus-within {\n    background: white;\n    border-color: var(--brand);\n  }\n  .iftpl-widget .tb-search svg {\n    color: var(--ink-faint);\n    flex-shrink: 0;\n  }\n  .iftpl-widget .tb-search input {\n    background: transparent;\n    border: none;\n    outline: none;\n    color: var(--ink);\n    font-size: 14px;\n    font-weight: 500;\n    flex: 1;\n    min-width: 0;\n    padding: 0 !important;\n    height: auto !important;\n    min-height: 0 !important;\n    line-height: 1.4;\n  }\n  .iftpl-widget .tb-search input::placeholder {\n    color: var(--ink-faint);\n    font-weight: 500;\n  }\n\n  .iftpl-widget .tb-filter {\n    position: relative;\n  }\n  .iftpl-widget .tb-filter-btn {\n    background: white;\n    border: 1.5px solid var(--line);\n    color: var(--ink);\n    padding: 9px 14px;\n    border-radius: var(--radius-pill);\n    font-size: 13px;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition:\n      background-color 0.2s var(--ease),\n      border-color 0.2s var(--ease),\n      color 0.2s var(--ease);\n    min-height: 40px;\n    line-height: 1;\n    cursor: pointer;\n  }\n  .iftpl-widget .tb-filter-btn:hover {\n    border-color: var(--ink);\n  }\n  .iftpl-widget .tb-filter-btn.has-selection {\n    background: var(--brand);\n    color: white;\n    border-color: var(--brand);\n  }\n  .iftpl-widget .tb-filter-btn .count {\n    background: white;\n    color: var(--brand);\n    font-family: var(--font-mono);\n    font-size: 10px;\n    padding: 1px 6px;\n    border-radius: var(--radius-pill);\n    font-weight: 700;\n    line-height: 1.4;\n  }\n  .iftpl-widget .tb-filter-btn:not(.has-selection) .count {\n    background: var(--brand);\n    color: white;\n  }\n  .iftpl-widget .tb-filter-btn .caret {\n    transition: transform 0.2s;\n    opacity: 0.7;\n  }\n  .iftpl-widget .tb-filter.open .tb-filter-btn .caret {\n    transform: rotate(180deg);\n  }\n\n  \/* Dropdown \u2014 desktop default *\/\n  .iftpl-widget .tb-dropdown {\n    position: absolute;\n    top: calc(100% + 8px);\n    left: 0;\n    background: white;\n    color: var(--ink);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-lg);\n    border: 1px solid var(--line);\n    padding: 14px;\n    min-width: 260px;\n    max-width: 320px;\n    z-index: 1000;\n    display: none;\n    pointer-events: auto;\n  }\n  .iftpl-widget .tb-filter.open .tb-dropdown {\n    display: block;\n  }\n  .iftpl-widget .tb-filter[data-filter=\"industry\"] .tb-dropdown {\n    left: auto;\n    right: 0;\n  }\n\n  .iftpl-widget .tb-mobile-backdrop {\n    display: none;\n    position: fixed;\n    inset: 0;\n    background: rgba(10, 22, 40, 0.5);\n    z-index: 9990;\n    opacity: 0;\n    transition: opacity 0.25s ease;\n    pointer-events: none;\n  }\n  .iftpl-widget .tb-mobile-backdrop.show {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .iftpl-widget .tb-dropdown-title {\n    font-family: var(--font-mono);\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: var(--ink-faint);\n    margin-bottom: 10px;\n    padding: 2px 8px;\n  }\n  .iftpl-widget .tb-mobile-head {\n    display: none;\n    align-items: center;\n    justify-content: space-between;\n    padding-bottom: 14px;\n    margin-bottom: 14px;\n    border-bottom: 1px solid var(--line);\n  }\n  .iftpl-widget .tb-mobile-head h4 {\n    font-size: 17px;\n    font-weight: 700;\n    letter-spacing: -0.01em;\n  }\n  .iftpl-widget .tb-mobile-close {\n    width: 34px;\n    height: 34px;\n    border-radius: 50%;\n    background: var(--bg-soft);\n    display: grid;\n    place-items: center;\n    color: var(--ink);\n  }\n  .iftpl-widget .tb-options {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    max-height: 320px;\n    overflow-y: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n  .iftpl-widget .tb-option {\n    padding: 10px 10px;\n    background: transparent;\n    border-radius: 8px;\n    text-align: left;\n    font-size: 13.5px;\n    font-weight: 600;\n    color: var(--ink);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    transition: background 0.15s;\n    width: 100%;\n    cursor: pointer;\n  }\n  .iftpl-widget .tb-option:hover {\n    background: var(--bg-soft);\n  }\n  .iftpl-widget .tb-option.on {\n    background: var(--brand-50);\n    color: var(--brand);\n  }\n  .iftpl-widget .tb-option .checkbox {\n    width: 18px;\n    height: 18px;\n    border: 1.5px solid var(--line);\n    border-radius: 5px;\n    display: grid;\n    place-items: center;\n    flex-shrink: 0;\n    transition:\n      background-color 0.15s,\n      border-color 0.15s,\n      color 0.15s;\n    color: white;\n    font-size: 11px;\n    background: white;\n  }\n  .iftpl-widget .tb-option.on .checkbox {\n    background: var(--brand);\n    border-color: var(--brand);\n  }\n  .iftpl-widget .tb-option .swatch {\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    border: 1px solid var(--line);\n  }\n  .iftpl-widget .tb-dropdown-foot {\n    display: flex;\n    justify-content: space-between;\n    padding-top: 12px;\n    margin-top: 12px;\n    border-top: 1px solid var(--line);\n  }\n  .iftpl-widget .tb-clear,\n  .iftpl-widget .tb-apply {\n    background: transparent;\n    font-size: 12.5px;\n    font-weight: 700;\n    padding: 6px 12px;\n    border-radius: 6px;\n    cursor: pointer;\n  }\n  .iftpl-widget .tb-clear {\n    color: var(--ink-faint);\n  }\n  .iftpl-widget .tb-clear:hover {\n    color: var(--ink);\n    background: var(--bg-soft);\n  }\n  .iftpl-widget .tb-apply {\n    color: var(--brand);\n  }\n  .iftpl-widget .tb-apply:hover {\n    background: var(--brand-50);\n  }\n\n  \/* ===== GALLERY ===== *\/\n  .iftpl-widget .gallery {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 0 32px 96px;\n  }\n  .iftpl-widget .gallery-head {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-top: 28px;\n    gap: 14px;\n    flex-wrap: wrap;\n  }\n  .iftpl-widget .gallery-count {\n    font-family: var(--font-mono);\n    font-size: 12.5px;\n    color: var(--ink-faint);\n    font-weight: 500;\n  }\n  .iftpl-widget .gallery-count strong {\n    color: var(--ink);\n    font-weight: 700;\n  }\n  .iftpl-widget .active-filters {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .iftpl-widget .active-filter-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 5px 8px 5px 12px;\n    background: white;\n    border: 1px solid var(--line);\n    border-radius: var(--radius-pill);\n    font-size: 12px;\n    color: var(--ink-soft);\n    font-weight: 600;\n  }\n  .iftpl-widget .active-filter-chip .x {\n    width: 18px;\n    height: 18px;\n    border-radius: 50%;\n    background: var(--bg-soft);\n    display: grid;\n    place-items: center;\n    font-size: 11px;\n    color: var(--ink-faint);\n    cursor: pointer;\n    transition:\n      background-color 0.15s,\n      color 0.15s;\n    border: none;\n  }\n  .iftpl-widget .active-filter-chip .x:hover {\n    background: var(--ink);\n    color: white;\n  }\n  .iftpl-widget .clear-all-btn {\n    background: transparent;\n    border: 1px dashed var(--line);\n    border-radius: var(--radius-pill);\n    padding: 5px 12px;\n    font-size: 12px;\n    color: var(--ink-faint);\n    font-weight: 600;\n    cursor: pointer;\n    transition:\n      border-color 0.2s,\n      color 0.2s;\n  }\n  .iftpl-widget .clear-all-btn:hover {\n    border-color: var(--ink);\n    color: var(--ink);\n    border-style: solid;\n  }\n\n  .iftpl-widget .template-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));\n    gap: 16px;\n    \/* align-items defaults to stretch \u2014 cards in the same row share the same height *\/\n  }\n  .iftpl-widget .template-card {\n    position: relative;\n    background: white;\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n    border: 1.5px solid var(--line);\n    cursor: pointer;\n    transition:\n      transform 0.3s var(--ease),\n      box-shadow 0.3s,\n      border-color 0.3s;\n    text-align: left;\n    padding: 0;\n    width: 100%;\n    font-family: inherit;\n    \/* Flex column so the thumb stays at its aspect-ratio and the info\n       section absorbs any extra height \u2014 no whitespace above the thumb *\/\n    display: flex;\n    flex-direction: column;\n  }\n  .iftpl-widget .template-card:hover {\n    transform: translateY(-3px);\n    box-shadow: var(--shadow-lg);\n    border-color: var(--brand);\n  }\n  .iftpl-widget .tc-thumb {\n    aspect-ratio: 3 \/ 4;\n    background: var(--bg-soft);\n    padding: 14px;\n    overflow: hidden;\n    position: relative;\n  }\n  .iftpl-widget .tc-img-clip {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: 8px;\n    box-shadow: var(--shadow-sm);\n    position: relative;\n  }\n  .iftpl-widget .tc-thumb img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: top center;\n    background: white;\n    display: block;\n    transition: transform 0.35s var(--ease);\n  }\n  .iftpl-widget .template-card:hover .tc-thumb img {\n    transform: scale(1.02);\n  }\n  .iftpl-widget .tc-badge {\n    position: absolute;\n    top: 22px;\n    left: 22px;\n    background: var(--brand);\n    color: white;\n    font-family: var(--font-mono);\n    font-size: 9.5px;\n    font-weight: 700;\n    padding: 4px 8px;\n    border-radius: 4px;\n    letter-spacing: 0.05em;\n    text-transform: uppercase;\n    z-index: 1;\n    box-shadow: var(--shadow-sm);\n  }\n  .iftpl-widget .tc-overlay {\n    position: absolute;\n    inset: 14px;\n    background: rgba(10, 22, 40, 0.7);\n    border-radius: 8px;\n    display: grid;\n    place-items: center;\n    opacity: 0;\n    transition: opacity 0.25s;\n    pointer-events: none;\n  }\n  .iftpl-widget .template-card:hover .tc-overlay {\n    opacity: 1;\n  }\n  .iftpl-widget .tc-overlay-btn {\n    background: white;\n    color: var(--ink);\n    padding: 10px 18px;\n    border-radius: var(--radius-pill);\n    font-size: 13px;\n    font-weight: 700;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    transform: translateY(8px);\n    transition: transform 0.3s;\n  }\n  .iftpl-widget .template-card:hover .tc-overlay-btn {\n    transform: translateY(0);\n  }\n  .iftpl-widget .tc-info {\n    padding: 14px 16px 16px;\n    display: flex;\n    justify-content: space-between;\n    align-items: start;\n    gap: 12px;\n    flex: 1; \/* grow to fill remaining card height so all cards in a row align *\/\n  }\n  .iftpl-widget .tc-name {\n    font-weight: 700;\n    font-size: 14px;\n    line-height: 1.3;\n    letter-spacing: -0.01em;\n    color: var(--ink);\n  }\n  .iftpl-widget .tc-meta {\n    font-family: var(--font-mono);\n    font-size: 10.5px;\n    color: var(--ink-faint);\n    margin-top: 4px;\n    font-weight: 500;\n    letter-spacing: 0.02em;\n    text-transform: uppercase;\n  }\n  .iftpl-widget .tc-meta .dot {\n    display: inline-block;\n    padding: 0 4px;\n    opacity: 0.5;\n  }\n  .iftpl-widget .tc-formats {\n    display: flex;\n    gap: 3px;\n    margin-top: 8px;\n    align-items: center;\n  }\n  .iftpl-widget .tc-fmt {\n    font-family: var(--font-mono);\n    font-size: 8.5px;\n    font-weight: 700;\n    padding: 2px 5px;\n    border-radius: 3px;\n    color: var(--ink-faint);\n    background: var(--bg-soft);\n    letter-spacing: 0.04em;\n  }\n  .iftpl-widget .tc-arrow {\n    width: 30px;\n    height: 30px;\n    background: var(--bg-soft);\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    color: var(--ink-soft);\n    flex-shrink: 0;\n    transition:\n      background-color 0.25s var(--ease),\n      color 0.25s var(--ease),\n      transform 0.25s var(--ease);\n  }\n  .iftpl-widget .template-card:hover .tc-arrow {\n    background: var(--brand);\n    color: white;\n    transform: rotate(-45deg);\n  }\n\n  .iftpl-widget .empty-state {\n    grid-column: 1 \/ -1;\n    padding: 80px 40px;\n    text-align: center;\n    background: var(--bg-soft);\n    border-radius: var(--radius-lg);\n    border: 1.5px dashed var(--line);\n  }\n  .iftpl-widget .empty-state-title {\n    font-size: 22px;\n    font-weight: 700;\n    margin-bottom: 8px;\n    color: var(--ink);\n  }\n  .iftpl-widget .empty-state-text {\n    color: var(--ink-mute);\n    margin-bottom: 24px;\n    font-size: 14.5px;\n  }\n  .iftpl-widget .empty-suggest-header {\n    grid-column: 1 \/ -1;\n    padding: 8px 0 20px;\n    text-align: center;\n  }\n  .iftpl-widget .empty-suggest-header .empty-state-title {\n    font-size: 18px;\n    font-weight: 700;\n    margin-bottom: 6px;\n    color: var(--ink);\n  }\n  .iftpl-widget .empty-suggest-header .empty-state-text {\n    margin-bottom: 0;\n    color: var(--ink-mute);\n    font-size: 14.5px;\n  }\n\n  \/* ===== TRADE LINKS (invoice templates by trade) ===== *\/\n  .iftpl-widget .tlinks {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 96px 32px 110px;\n  }\n  .iftpl-widget .tlinks-layout {\n    display: grid;\n    grid-template-columns: 380px 1fr;\n    gap: 72px;\n    align-items: start;\n  }\n  .iftpl-widget .tlinks-head {\n    position: sticky;\n    top: 130px;\n  }\n  .iftpl-widget .tlinks-num {\n    display: block;\n    font-family: var(--font-mono);\n    font-size: clamp(64px, 8vw, 96px);\n    font-weight: 600;\n    line-height: 0.9;\n    color: transparent;\n    -webkit-text-stroke: 1.5px var(--brand-100);\n    margin-bottom: 20px;\n    user-select: none;\n  }\n  .iftpl-widget .tlinks-tag {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--brand);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    font-weight: 600;\n    margin-bottom: 12px;\n  }\n  .iftpl-widget .tlinks-head h2 {\n    font-size: clamp(30px, 4vw, 46px);\n    line-height: 1.05;\n    letter-spacing: -0.025em;\n    font-weight: 800;\n    color: var(--ink);\n    margin-bottom: 14px;\n  }\n  .iftpl-widget .tlinks-head h2 .hi {\n    color: var(--brand);\n  }\n  .iftpl-widget .tlinks-head p {\n    font-size: 15.5px;\n    line-height: 1.6;\n    color: var(--ink-mute);\n    margin-bottom: 26px;\n    max-width: 420px;\n  }\n  .iftpl-widget .tlinks-count {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    color: var(--ink-faint);\n    padding: 8px 14px;\n    border: 1.5px dashed var(--line);\n    border-radius: var(--radius-pill);\n  }\n  .iftpl-widget .tlinks-count .dot {\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    background: var(--green);\n    flex-shrink: 0;\n  }\n\n  .iftpl-widget .tlinks-list {\n    border-top: 2px solid var(--ink);\n  }\n  .iftpl-widget .tlink {\n    position: relative;\n    display: grid;\n    grid-template-columns: 52px 1fr auto 40px;\n    align-items: center;\n    gap: 18px;\n    padding: 21px 16px 21px 10px;\n    border-bottom: 1.5px solid var(--line);\n    text-decoration: none;\n    overflow: hidden;\n    isolation: isolate;\n    transition: border-color 0.45s var(--ease);\n  }\n  \/* Wipe enters from the left on hover and exits to the right on mouse-out\n     (origin swap is invisible at scaleX(0)), so sweeping the cursor down the\n     list reads as one continuous flow instead of bars bouncing back. *\/\n  .iftpl-widget .tlink::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      100deg,\n      var(--brand-dark),\n      var(--brand) 55%,\n      var(--brand-500)\n    );\n    transform: scaleX(0);\n    transform-origin: right;\n    transition: transform 0.5s var(--ease);\n    z-index: -1;\n    will-change: transform;\n  }\n  .iftpl-widget .tlink:hover::before,\n  .iftpl-widget .tlink:focus-visible::before {\n    transform: scaleX(1);\n    transform-origin: left;\n  }\n  .iftpl-widget .tlink:hover,\n  .iftpl-widget .tlink:focus-visible {\n    border-color: var(--brand);\n  }\n  .iftpl-widget .tlink-idx {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--brand);\n    letter-spacing: 0.05em;\n    transition:\n      color 0.35s var(--ease),\n      transform 0.45s var(--ease);\n  }\n  .iftpl-widget .tlink:hover .tlink-idx {\n    color: rgba(255, 255, 255, 0.65);\n    transform: translateX(10px);\n  }\n  .iftpl-widget .tlink-name {\n    font-size: clamp(17px, 2vw, 23px);\n    font-weight: 800;\n    letter-spacing: -0.015em;\n    line-height: 1.15;\n    color: var(--ink);\n    transition:\n      color 0.35s var(--ease),\n      transform 0.45s var(--ease);\n  }\n  .iftpl-widget .tlink:hover .tlink-name {\n    color: white;\n    transform: translateX(10px);\n  }\n  .iftpl-widget .tlink-meta {\n    font-family: var(--font-mono);\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: var(--ink-faint);\n    padding: 5px 11px;\n    border: 1px solid var(--line);\n    border-radius: var(--radius-pill);\n    white-space: nowrap;\n    transition:\n      color 0.35s var(--ease),\n      border-color 0.35s var(--ease);\n  }\n  .iftpl-widget .tlink:hover .tlink-meta {\n    color: white;\n    border-color: rgba(255, 255, 255, 0.45);\n  }\n  .iftpl-widget .tlink-arrow {\n    width: 38px;\n    height: 38px;\n    background: var(--bg-soft);\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    color: var(--ink-soft);\n    flex-shrink: 0;\n    transition:\n      background-color 0.35s var(--ease),\n      color 0.35s var(--ease),\n      transform 0.45s var(--ease);\n  }\n  .iftpl-widget .tlink:hover .tlink-arrow {\n    background: white;\n    color: var(--brand);\n    transform: rotate(-45deg) scale(1.05);\n  }\n\n  @media (max-width: 1024px) {\n    .iftpl-widget .tlinks-layout {\n      grid-template-columns: 1fr;\n      gap: 40px;\n    }\n    .iftpl-widget .tlinks-head {\n      position: static;\n    }\n    .iftpl-widget .tlinks-num {\n      display: none;\n    }\n  }\n  @media (max-width: 768px) {\n    .iftpl-widget .tlinks {\n      padding: 64px 20px 72px;\n    }\n    .iftpl-widget .tlink {\n      grid-template-columns: 34px 1fr 34px;\n      gap: 12px;\n      padding: 16px 8px 16px 4px;\n    }\n    .iftpl-widget .tlink:hover .tlink-idx,\n    .iftpl-widget .tlink:hover .tlink-name {\n      transform: none;\n    }\n    .iftpl-widget .tlink-meta {\n      display: none;\n    }\n    .iftpl-widget .tlink-arrow {\n      width: 34px;\n      height: 34px;\n    }\n  }\n\n  \/* ===== TEMPLATES BY FORMAT ===== *\/\n  .iftpl-widget .tplfmt {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 0 32px 32px;\n  }\n  .iftpl-widget .tpl-divider {\n    text-align: center;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .iftpl-widget .tpl-divider::before {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 0;\n    right: 0;\n    height: 1px;\n    background: var(--line);\n  }\n  .iftpl-widget .tpl-divider span {\n    position: relative;\n    background: var(--bg);\n    padding: 0 16px;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--ink-faint);\n    font-family: var(--font-mono);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n  }\n  .iftpl-widget .tpl-grid {\n    display: grid;\n    grid-template-columns: repeat(5, 1fr);\n    gap: 16px;\n  }\n  .iftpl-widget .tpl-card {\n    background: white;\n    border: 1.5px solid var(--line);\n    border-radius: var(--radius-lg);\n    padding: 28px 20px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 14px;\n    text-align: center;\n    transition: all 0.25s var(--ease);\n    cursor: pointer;\n    min-height: 48px;\n  }\n  .iftpl-widget .tpl-card:hover {\n    border-color: var(--brand);\n    background: var(--brand-50);\n    transform: translateY(-3px);\n    box-shadow: var(--shadow-md);\n  }\n  .iftpl-widget .tpl-icon {\n    width: 52px;\n    height: 52px;\n    border-radius: var(--radius);\n    display: grid;\n    place-items: center;\n    flex-shrink: 0;\n    background: none;\n  }\n  .iftpl-widget .tpl-name {\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--ink);\n    line-height: 1.3;\n  }\n  .iftpl-widget .tpl-hint {\n    font-size: 12px;\n    color: var(--ink-faint);\n    margin-top: -6px;\n  }\n  @media (max-width: 1024px) {\n    .iftpl-widget .tpl-grid {\n      grid-template-columns: repeat(3, 1fr);\n      gap: 14px;\n    }\n  }\n  @media (max-width: 768px) {\n    .iftpl-widget .tplfmt {\n      padding: 0 20px 72px;\n    }\n    .iftpl-widget .tpl-grid {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 12px;\n    }\n    .iftpl-widget .tpl-grid > .tpl-card:last-child {\n      grid-column: 1 \/ -1;\n    }\n  }\n  @media (max-width: 480px) {\n    .iftpl-widget .tpl-grid {\n      grid-template-columns: 1fr 1fr;\n    }\n    .iftpl-widget .tpl-grid > .tpl-card:last-child {\n      grid-column: 1 \/ -1;\n    }\n  }\n\n  \/* ===== MODAL ===== *\/\n  .iftpl-widget .modal-backdrop {\n    position: fixed;\n    inset: 0;\n    background: rgba(10, 22, 40, 0.7);\n    backdrop-filter: blur(6px);\n    -webkit-backdrop-filter: blur(6px);\n    z-index: 99999;\n    display: none;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    overflow-y: auto;\n    animation: iftpl-fadeIn 0.25s ease;\n  }\n  .iftpl-widget .modal-backdrop.open {\n    display: flex;\n  }\n  @keyframes iftpl-fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  @keyframes iftpl-slideUp {\n    from {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  .iftpl-widget .modal {\n    background: white;\n    border-radius: 20px;\n    max-width: 920px;\n    width: 100%;\n    max-height: calc(100vh - 48px);\n    overflow-y: auto;\n    position: relative;\n    box-shadow: 0 40px 80px -20px rgba(10, 22, 40, 0.4);\n    animation: iftpl-slideUp 0.35s var(--ease);\n  }\n  .iftpl-widget .modal-close {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n    background: white;\n    border: 1px solid var(--line);\n    display: grid;\n    place-items: center;\n    color: var(--ink);\n    z-index: 5;\n    transition:\n      background-color 0.2s,\n      color 0.2s,\n      border-color 0.2s;\n    box-shadow: var(--shadow-md);\n    cursor: pointer;\n  }\n  .iftpl-widget .modal-close:hover {\n    background: var(--ink);\n    color: white;\n    border-color: var(--ink);\n  }\n  .iftpl-widget .modal-grid {\n    display: grid;\n    grid-template-columns: 1fr 1.05fr;\n    gap: 0;\n  }\n  .iftpl-widget .modal-preview {\n    background: var(--bg-soft);\n    padding: 48px 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 20px 0 0 20px;\n  }\n  .iftpl-widget .modal-preview img {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 8px;\n    box-shadow: var(--shadow-lg);\n    background: white;\n  }\n  .iftpl-widget .modal-body {\n    padding: 44px 40px;\n    display: flex;\n    flex-direction: column;\n  }\n  .iftpl-widget .modal-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: var(--brand-50);\n    border: 1px solid var(--brand-100);\n    border-radius: var(--radius-pill);\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--brand);\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    width: fit-content;\n    margin-bottom: 16px;\n    font-family: var(--font-mono);\n  }\n  .iftpl-widget .modal-title {\n    font-size: clamp(24px, 3vw, 32px);\n    line-height: 1.15;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    margin-bottom: 12px;\n    color: var(--ink);\n  }\n  .iftpl-widget .modal-desc {\n    font-size: 14.5px;\n    color: var(--ink-mute);\n    line-height: 1.55;\n    margin-bottom: 24px;\n  }\n  .iftpl-widget .modal-section-title {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: var(--ink-faint);\n    margin-bottom: 12px;\n    font-weight: 600;\n  }\n  .iftpl-widget .modal-formats {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 8px;\n    margin-bottom: 24px;\n  }\n  .iftpl-widget .modal-format {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 14px;\n    background: white;\n    border: 1.5px solid var(--line);\n    border-radius: var(--radius);\n    color: var(--ink);\n    transition:\n      border-color 0.2s var(--ease),\n      background-color 0.2s var(--ease),\n      transform 0.2s var(--ease),\n      box-shadow 0.2s var(--ease);\n    text-decoration: none;\n  }\n  .iftpl-widget .modal-format:hover {\n    border-color: var(--brand);\n    background: var(--brand-50);\n    transform: translateY(-1px);\n    box-shadow: var(--shadow-md);\n  }\n  .iftpl-widget .modal-format-icon {\n    width: 28px;\n    height: 28px;\n    display: grid;\n    place-items: center;\n    flex-shrink: 0;\n  }\n  .iftpl-widget .modal-format-text {\n    flex: 1;\n    min-width: 0;\n  }\n  .iftpl-widget .modal-format-name {\n    font-weight: 700;\n    font-size: 13.5px;\n  }\n  .iftpl-widget .modal-format-hint {\n    font-size: 11px;\n    color: var(--ink-faint);\n    margin-top: 2px;\n  }\n  .iftpl-widget .modal-format-arrow {\n    color: var(--ink-faint);\n    transition:\n      color 0.2s,\n      transform 0.2s;\n  }\n  .iftpl-widget .modal-format:hover .modal-format-arrow {\n    color: var(--brand);\n    transform: translateX(3px);\n  }\n  .iftpl-widget .modal-format:last-child:nth-child(odd) {\n    grid-column: 1 \/ -1;\n    justify-content: center;\n    gap: 20px;\n  }\n  .iftpl-widget .modal-format:last-child:nth-child(odd) .modal-format-text {\n    flex: 0 0 auto;\n  }\n  .iftpl-widget .modal-cta-stack {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    margin-top: auto;\n    padding-top: 20px;\n    border-top: 1px solid var(--line);\n  }\n  .iftpl-widget .modal-cta-stack .btn {\n    width: 100%;\n  }\n\n  \/* ===== STATS BAND ===== *\/\n  .iftpl-widget .stats {\n    background:\n      radial-gradient(\n        ellipse 70% 80% at 85% 15%,\n        rgba(30, 94, 255, 0.45) 0%,\n        transparent 70%\n      ),\n      radial-gradient(\n        ellipse 60% 60% at 0% 100%,\n        rgba(0, 68, 187, 0.32) 0%,\n        transparent 70%\n      ),\n      var(--ink);\n    color: white;\n    padding: 64px 32px;\n    position: relative;\n    overflow: hidden;\n  }\n  .iftpl-widget .stats-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n  }\n  .iftpl-widget .stats-head {\n    text-align: center;\n    max-width: 720px;\n    margin: 0 auto 40px;\n  }\n  .iftpl-widget .stats-tag {\n    display: inline-block;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--brand-100);\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    margin-bottom: 12px;\n    font-weight: 600;\n  }\n  .iftpl-widget .stats-head h2 {\n    font-size: clamp(28px, 4vw, 44px) !important;\n    line-height: 1.1;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    color: white;\n  }\n  .iftpl-widget .stats-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 24px;\n  }\n  .iftpl-widget .stat {\n    text-align: center;\n    padding: 24px 16px;\n    border-radius: var(--radius-lg);\n    background: rgba(255, 255, 255, 0.04);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    transition:\n      background-color 0.3s var(--ease),\n      border-color 0.3s var(--ease),\n      transform 0.3s var(--ease);\n  }\n  .iftpl-widget .stat:hover {\n    background: rgba(255, 255, 255, 0.07);\n    border-color: rgba(255, 255, 255, 0.15);\n    transform: translateY(-3px);\n  }\n  .iftpl-widget .stat-num {\n    font-size: clamp(36px, 5vw, 52px);\n    font-weight: 800;\n    color: white;\n    line-height: 1;\n    letter-spacing: -0.03em;\n    margin-bottom: 8px;\n  }\n  .iftpl-widget .stat-num .plus {\n    color: var(--brand-500);\n  }\n  .iftpl-widget .stat-label {\n    font-size: 13.5px;\n    color: rgba(255, 255, 255, 0.7);\n    font-weight: 600;\n  }\n\n  \/* ===== BEST PRACTICES ===== *\/\n  .iftpl-widget .bp {\n    background: var(--bg-soft);\n    border-top: 1px solid var(--line);\n    border-bottom: 1px solid var(--line);\n  }\n  .iftpl-widget .bp-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 96px 32px;\n    display: grid;\n    grid-template-columns: 0.92fr 1.08fr;\n    gap: 56px;\n    align-items: start;\n  }\n  \/* --- Left intro panel (dark) --- *\/\n  .iftpl-widget .bp-intro {\n    position: sticky;\n    top: 28px;\n    background:\n      radial-gradient(\n        ellipse 80% 70% at 90% 0%,\n        rgba(30, 94, 255, 0.5) 0%,\n        transparent 60%\n      ),\n      radial-gradient(\n        ellipse 70% 60% at 0% 100%,\n        rgba(0, 68, 187, 0.4) 0%,\n        transparent 60%\n      ),\n      var(--ink);\n    border-radius: 24px;\n    padding: 46px 40px;\n    overflow: hidden;\n    isolation: isolate;\n  }\n  .iftpl-widget .bp-intro::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background-image:\n      linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);\n    background-size: 40px 40px;\n    mask-image: radial-gradient(\n      ellipse 70% 70% at 70% 30%,\n      #000 0%,\n      transparent 75%\n    );\n    z-index: -1;\n  }\n  .iftpl-widget .bp-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: #bcd0ff;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    font-weight: 600;\n    background: rgba(255, 255, 255, 0.08);\n    border: 1px solid rgba(255, 255, 255, 0.14);\n    padding: 7px 14px;\n    border-radius: var(--radius-pill);\n    margin-bottom: 22px;\n  }\n  .iftpl-widget .bp-intro h2 {\n    font-size: clamp(28px, 3.4vw, 40px);\n    line-height: 1.12;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    color: #fff;\n    margin: 0 0 18px;\n  }\n  .iftpl-widget .bp-intro p {\n    color: rgba(255, 255, 255, 0.74);\n    font-size: 16px;\n    line-height: 1.65;\n    margin: 0;\n  }\n  \/* --- Right editorial index --- *\/\n  .iftpl-widget .bp-list {\n    position: relative;\n    counter-reset: bp;\n  }\n  .iftpl-widget .bp-item {\n    counter-increment: bp;\n    position: relative;\n    display: grid;\n    grid-template-columns: 68px 1fr;\n    gap: 26px;\n    align-items: start;\n    padding: 26px 24px 26px 20px;\n    border-radius: 16px;\n    transition: background 0.4s var(--ease);\n  }\n  \/* hairline divider under each entry (aligned with text column) *\/\n  .iftpl-widget .bp-item:not(:last-child)::after {\n    content: \"\";\n    position: absolute;\n    left: 114px;\n    right: 24px;\n    bottom: 0;\n    height: 1px;\n    background: var(--line);\n    transition: opacity 0.3s var(--ease);\n  }\n  \/* growing accent bar on the left edge *\/\n  .iftpl-widget .bp-item::before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%) scaleY(0);\n    width: 3px;\n    height: 56%;\n    border-radius: 3px;\n    background: linear-gradient(180deg, var(--brand-500), var(--brand));\n    transition: transform 0.35s var(--ease);\n  }\n  \/* oversized outlined numeral *\/\n  .iftpl-widget .bp-num {\n    font-family: var(--font-mono);\n    font-size: 46px;\n    line-height: 0.9;\n    font-weight: 600;\n    letter-spacing: -0.03em;\n    color: transparent;\n    -webkit-text-stroke: 1.5px var(--brand-100);\n    transition:\n      -webkit-text-stroke 0.35s var(--ease),\n      transform 0.35s var(--ease);\n  }\n  .iftpl-widget .bp-num::before {\n    content: counter(bp, decimal-leading-zero);\n  }\n  .iftpl-widget .bp-kicker {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    font-family: var(--font-mono);\n    font-size: 10.5px;\n    font-weight: 600;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n    color: var(--brand);\n    margin-bottom: 9px;\n  }\n  .iftpl-widget .bp-kicker::before {\n    content: \"\";\n    width: 5px;\n    height: 5px;\n    border-radius: 50%;\n    background: var(--brand);\n  }\n  .iftpl-widget .bp-item h3 {\n    font-size: 17.5px;\n    font-weight: 700;\n    letter-spacing: -0.01em;\n    color: var(--ink);\n    margin: 0 0 8px;\n    transition: color 0.25s var(--ease);\n  }\n  .iftpl-widget .bp-item p {\n    font-size: 14.5px;\n    line-height: 1.6;\n    color: var(--ink-mute);\n    margin: 0;\n  }\n  \/* --- hover state --- *\/\n  .iftpl-widget .bp-item:hover {\n    background: var(--bg);\n    box-shadow: var(--shadow-md);\n  }\n  .iftpl-widget .bp-item:hover::before {\n    transform: translateY(-50%) scaleY(1);\n  }\n  .iftpl-widget .bp-item:hover::after {\n    opacity: 0;\n  }\n  .iftpl-widget .bp-item:hover .bp-num {\n    -webkit-text-stroke: 0 transparent;\n    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand) 100%);\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    transform: translateY(-1px);\n  }\n  .iftpl-widget .bp-item:hover h3 {\n    color: var(--brand);\n  }\n\n  \/* ===== HOW IT WORKS \u2014 3 steps ===== *\/\n  .iftpl-widget .how {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 96px 32px;\n  }\n  .iftpl-widget .how-head {\n    text-align: center;\n    max-width: 720px;\n    margin: 0 auto 56px;\n  }\n  .iftpl-widget .how-tag {\n    display: inline-block;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--brand);\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    margin-bottom: 14px;\n    font-weight: 600;\n  }\n  .iftpl-widget .how-head h2 {\n    font-size: clamp(28px, 4vw, 44px);\n    line-height: 1.1;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    color: var(--ink);\n    margin-bottom: 14px;\n  }\n  .iftpl-widget .how-head p {\n    color: var(--ink-mute);\n    font-size: 16.5px;\n    line-height: 1.55;\n  }\n  .iftpl-widget .how-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 60px;\n    position: relative;\n  }\n  \/* connector rail threading the steps, vertically centered (desktop) *\/\n  .iftpl-widget .how-grid::before {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 7%;\n    right: 7%;\n    height: 2px;\n    background: repeating-linear-gradient(\n      90deg,\n      var(--brand-100) 0,\n      var(--brand-100) 7px,\n      transparent 7px,\n      transparent 14px\n    );\n    transform: translateY(-50%) scaleX(1);\n    transform-origin: left center;\n    z-index: 0;\n  }\n  .iftpl-widget .how-step {\n    background: linear-gradient(180deg, #ffffff 0%, #fafbfe 100%);\n    border: 1.5px solid var(--line);\n    border-radius: var(--radius-lg);\n    padding: 30px 30px 26px;\n    position: relative;\n    z-index: 1;\n    box-shadow: var(--shadow-sm);\n    transition:\n      border-color 0.3s var(--ease),\n      box-shadow 0.3s var(--ease),\n      transform 0.3s var(--ease);\n  }\n  \/* top accent that wipes in on hover *\/\n  .iftpl-widget .how-step::before {\n    content: \"\";\n    position: absolute;\n    top: -1.5px;\n    left: 26px;\n    right: 26px;\n    height: 3px;\n    border-radius: 0 0 3px 3px;\n    background: linear-gradient(90deg, var(--brand-500), var(--brand));\n    transform: scaleX(0);\n    transform-origin: left;\n    transition: transform 0.35s var(--ease);\n  }\n  \/* circular connector node pointing to the next step (desktop) *\/\n  .iftpl-widget .how-step:not(:last-child)::after {\n    content: \"\\203A\";\n    position: absolute;\n    top: 50%;\n    right: -46px;\n    transform: translateY(-50%);\n    width: 30px;\n    height: 30px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-bottom: 2px;\n    background: linear-gradient(140deg, var(--brand-500), var(--brand));\n    color: #fff;\n    font-size: 18px;\n    font-weight: 800;\n    line-height: 1;\n    box-shadow:\n      0 6px 14px -4px rgba(0, 68, 187, 0.55),\n      inset 0 1px 0 rgba(255, 255, 255, 0.3);\n    z-index: 3;\n  }\n  .iftpl-widget .how-step:hover {\n    border-color: var(--brand);\n    box-shadow: var(--shadow-lg);\n    transform: translateY(-5px);\n  }\n  .iftpl-widget .how-step:hover::before {\n    transform: scaleX(1);\n  }\n  .iftpl-widget .how-step-top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 14px;\n    margin-bottom: 22px;\n  }\n  .iftpl-widget .how-step-num {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    font-weight: 700;\n    color: var(--brand);\n    background: var(--brand-50);\n    border: 1px solid var(--brand-100);\n    padding: 4px 11px;\n    border-radius: var(--radius-pill);\n    letter-spacing: 0.04em;\n  }\n  .iftpl-widget .how-step-icon {\n    width: 56px;\n    height: 56px;\n    background: linear-gradient(140deg, var(--brand-500) 0%, var(--brand) 100%);\n    color: white;\n    border-radius: var(--radius);\n    display: grid;\n    place-items: center;\n    box-shadow:\n      0 8px 18px -6px rgba(0, 68, 187, 0.5),\n      inset 0 1px 0 rgba(255, 255, 255, 0.25);\n    transition:\n      transform 0.3s var(--ease),\n      box-shadow 0.3s var(--ease);\n  }\n  .iftpl-widget .how-step:hover .how-step-icon {\n    transform: scale(1.07) rotate(-4deg);\n    box-shadow:\n      0 14px 28px -6px rgba(0, 68, 187, 0.7),\n      0 0 26px -2px rgba(30, 94, 255, 0.55),\n      inset 0 1px 0 rgba(255, 255, 255, 0.4);\n  }\n  .iftpl-widget .how-step-title {\n    font-size: 22px;\n    font-weight: 700;\n    letter-spacing: -0.01em;\n    margin-bottom: 10px;\n    color: var(--ink);\n  }\n  .iftpl-widget .how-step-text {\n    font-size: 14.5px;\n    line-height: 1.55;\n    color: var(--ink-mute);\n    min-height: 100px;\n  }\n  .iftpl-widget .how-step-time {\n    margin-top: 16px;\n    padding-top: 16px;\n    border-top: 1px solid var(--line-soft);\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--ink-faint);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .iftpl-widget .how-step-time::before {\n    content: \"\";\n    width: 8px;\n    height: 8px;\n    background: var(--green);\n    border-radius: 50%;\n  }\n  \/* rail draws itself in as the section scrolls into view *\/\n  @supports (animation-timeline: view()) {\n    @media (prefers-reduced-motion: no-preference) {\n      .iftpl-widget .how-grid::before {\n        animation: iftpl-how-draw linear both;\n        animation-timeline: view();\n        animation-range: entry 10% cover 38%;\n      }\n    }\n  }\n  @keyframes iftpl-how-draw {\n    from {\n      transform: translateY(-50%) scaleX(0);\n    }\n    to {\n      transform: translateY(-50%) scaleX(1);\n    }\n  }\n  \/* connector nodes emit a soft radar pulse *\/\n  @media (prefers-reduced-motion: no-preference) {\n    .iftpl-widget .how-step:not(:last-child)::after {\n      animation: iftpl-how-node 2.6s ease-out infinite;\n    }\n    .iftpl-widget .how-step:nth-child(2)::after {\n      animation-delay: 1.3s;\n    }\n  }\n  @keyframes iftpl-how-node {\n    0% {\n      box-shadow:\n        0 6px 14px -4px rgba(0, 68, 187, 0.55),\n        0 0 0 0 rgba(30, 94, 255, 0.5),\n        inset 0 1px 0 rgba(255, 255, 255, 0.3);\n    }\n    70% {\n      box-shadow:\n        0 6px 14px -4px rgba(0, 68, 187, 0.55),\n        0 0 0 13px rgba(30, 94, 255, 0),\n        inset 0 1px 0 rgba(255, 255, 255, 0.3);\n    }\n    100% {\n      box-shadow:\n        0 6px 14px -4px rgba(0, 68, 187, 0.55),\n        0 0 0 0 rgba(30, 94, 255, 0),\n        inset 0 1px 0 rgba(255, 255, 255, 0.3);\n    }\n  }\n\n  \/* ===== KEY SECTIONS ===== *\/\n  .iftpl-widget .key-sections {\n    padding: 0 24px 96px;\n    background: var(--bg);\n  }\n  .iftpl-widget .key-sections-inner {\n    max-width: 1100px;\n    margin: 0 auto;\n  }\n  .iftpl-widget .key-sections-head {\n    text-align: center;\n    margin-bottom: 56px;\n  }\n  .iftpl-widget .key-sections-head h2 {\n    font-size: clamp(32px, 5vw, 52px);\n    line-height: 1.1;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    color: var(--ink);\n    margin-bottom: 20px;\n  }\n  .iftpl-widget .key-sections-head h2 .hi {\n    color: var(--brand);\n  }\n  .iftpl-widget .key-sections-head p {\n    font-size: 17px;\n    line-height: 1.65;\n    color: var(--ink-mute);\n    max-width: 680px;\n    margin: 0 auto;\n  }\n  .iftpl-widget .key-sections-layout {\n    background: var(--bg-soft);\n    border-radius: 20px;\n    padding: 48px 32px;\n    display: grid;\n    grid-template-columns: 1fr 420px 1fr;\n    gap: 40px;\n    align-items: center;\n  }\n  .iftpl-widget .ks-items {\n    display: flex;\n    flex-direction: column;\n    gap: 28px;\n  }\n  .iftpl-widget .ks-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: 8px;\n  }\n  .iftpl-widget .ks-num {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: var(--brand);\n    color: white;\n    font-size: 14px;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .iftpl-widget .ks-item strong {\n    display: block;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--ink);\n    line-height: 1.3;\n  }\n  .iftpl-widget .ks-item span {\n    font-size: 13px;\n    line-height: 1.55;\n    color: var(--ink-mute);\n  }\n  .iftpl-widget .ks-doc {\n    border-radius: 12px;\n    overflow: hidden;\n  }\n  .iftpl-widget .ks-doc img {\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  \/* ===== APP FEATURES ===== *\/\n  .iftpl-widget .features {\n    background: var(--bg-soft);\n    padding: 96px 32px;\n  }\n  .iftpl-widget .features-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1fr 1.1fr;\n    gap: 80px;\n    align-items: center;\n  }\n  .iftpl-widget .features-content {\n    max-width: 540px;\n  }\n  .iftpl-widget .features-content > .btn {\n    display: block;\n    width: fit-content;\n    margin: 0 auto;\n  }\n  .iftpl-widget .features-tag {\n    display: inline-block;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--brand);\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    margin-bottom: 14px;\n    font-weight: 600;\n  }\n  .iftpl-widget .features-h2 {\n    font-size: clamp(28px, 4vw, 44px);\n    line-height: 1.1;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    color: var(--ink);\n    margin-bottom: 16px;\n  }\n  .iftpl-widget .features-lead {\n    font-size: 16.5px;\n    color: var(--ink-mute);\n    line-height: 1.55;\n    margin-bottom: 28px;\n  }\n  .iftpl-widget .features-list {\n    margin-bottom: 28px;\n  }\n  .iftpl-widget .feature-item {\n    display: flex;\n    gap: 14px;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--line);\n  }\n  .iftpl-widget .feature-item:last-child {\n    border-bottom: none;\n  }\n  .iftpl-widget .feature-icon {\n    width: 32px;\n    height: 32px;\n    background: var(--brand);\n    color: white;\n    border-radius: 8px;\n    display: grid;\n    place-items: center;\n    flex-shrink: 0;\n  }\n  .iftpl-widget .feature-text {\n    padding-top: 4px;\n  }\n  .iftpl-widget .feature-text strong {\n    display: block;\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--ink);\n    margin-bottom: 3px;\n  }\n  .iftpl-widget .feature-text span {\n    font-size: 13.5px;\n    color: var(--ink-mute);\n    line-height: 1.5;\n  }\n\n  \/* App visual: device frame *\/\n  .iftpl-widget .features-visual {\n    position: relative;\n    height: 540px;\n  }\n  .iftpl-widget .phone {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) rotate(0deg);\n    width: 420px;\n    transition: transform 0.5s var(--ease);\n    line-height: 0;\n  }\n  .iftpl-widget .phone img {\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n  .iftpl-widget .phone:hover {\n    transform: translate(-50%, -50%) rotate(-2deg);\n  }\n  .iftpl-widget .phone-screen {\n    width: 100%;\n    height: 100%;\n    background: white;\n    border-radius: 28px;\n    padding: 22px 18px;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n  .iftpl-widget .phone-bar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-bottom: 12px;\n    border-bottom: 1px solid var(--line-soft);\n  }\n  .iftpl-widget .phone-bar-title {\n    font-size: 13px;\n    font-weight: 800;\n  }\n  .iftpl-widget .phone-bar-dot {\n    width: 22px;\n    height: 22px;\n    background: var(--brand);\n    border-radius: 6px;\n  }\n  .iftpl-widget .phone-card {\n    padding: 12px;\n    background: var(--bg-soft);\n    border-radius: 10px;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  .iftpl-widget .phone-line {\n    height: 6px;\n    background: var(--bg-tint);\n    border-radius: 3px;\n  }\n  .iftpl-widget .phone-line.w60 {\n    width: 60%;\n  }\n  .iftpl-widget .phone-line.w80 {\n    width: 80%;\n  }\n  .iftpl-widget .phone-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 7px 0;\n    font-size: 10px;\n    color: var(--ink-mute);\n  }\n  .iftpl-widget .phone-row strong {\n    font-weight: 700;\n    color: var(--ink);\n  }\n  .iftpl-widget .phone-total {\n    background: var(--brand);\n    color: white;\n    padding: 14px;\n    border-radius: 10px;\n    margin-top: auto;\n  }\n  .iftpl-widget .phone-total-lbl {\n    font-family: var(--font-mono);\n    font-size: 9px;\n    opacity: 0.7;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n  }\n  .iftpl-widget .phone-total-amt {\n    font-size: 22px;\n    font-weight: 800;\n    margin-top: 2px;\n  }\n  .iftpl-widget .phone-cta {\n    text-align: center;\n    background: var(--ink);\n    color: white;\n    border-radius: 8px;\n    padding: 10px;\n    font-size: 11px;\n    font-weight: 700;\n  }\n  \/* Floating badges over the phone *\/\n  .iftpl-widget .phone-badge {\n    position: absolute;\n    background: white;\n    border-radius: var(--radius-pill);\n    padding: 10px 14px;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    box-shadow: var(--shadow-lg);\n    font-size: 12.5px;\n    font-weight: 700;\n    z-index: 2;\n    border: 1px solid var(--line);\n  }\n  .iftpl-widget .phone-badge .ic {\n    width: 22px;\n    height: 22px;\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    color: white;\n    flex-shrink: 0;\n  }\n  .iftpl-widget .phone-badge-1 {\n    top: 14%;\n    left: 8%;\n    animation: iftpl-float 4s ease-in-out infinite;\n  }\n  .iftpl-widget .phone-badge-1 .ic {\n    background: var(--green);\n  }\n  .iftpl-widget .phone-badge-2 {\n    bottom: 18%;\n    right: 4%;\n    animation: iftpl-float 4s ease-in-out infinite reverse;\n    animation-delay: -1s;\n  }\n  .iftpl-widget .phone-badge-2 .ic {\n    background: var(--brand);\n  }\n  @keyframes iftpl-float {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(-8px);\n    }\n  }\n\n  \/* ===== TEMPLATE VS SOFTWARE ===== *\/\n  .iftpl-widget .vs {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 0 32px 96px;\n  }\n  .iftpl-widget .vs-head {\n    max-width: 760px;\n    margin: 0 auto 56px;\n    text-align: center;\n  }\n  .iftpl-widget .vs-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--brand);\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    font-weight: 600;\n    background: var(--brand-50);\n    border: 1px solid var(--brand-100);\n    padding: 7px 14px;\n    border-radius: var(--radius-pill);\n    margin-bottom: 20px;\n  }\n  .iftpl-widget .vs-head h2 {\n    font-size: clamp(28px, 4vw, 44px);\n    line-height: 1.12;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    color: var(--ink);\n    margin: 0 0 18px;\n  }\n  .iftpl-widget .vs-head p {\n    color: var(--ink-mute);\n    font-size: 16.5px;\n    line-height: 1.65;\n    margin: 0 0 12px;\n  }\n  .iftpl-widget .vs-head p:last-child {\n    margin-bottom: 0;\n  }\n  .iftpl-widget .vs-head strong {\n    color: var(--ink);\n    font-weight: 700;\n  }\n  \/* dark \"software showcase\" panel holding glass cards *\/\n  .iftpl-widget .vs-grid {\n    position: relative;\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 18px;\n    counter-reset: vs;\n    padding: 26px;\n    border-radius: 28px;\n    overflow: hidden;\n    isolation: isolate;\n    background:\n      radial-gradient(\n        ellipse 60% 60% at 88% 0%,\n        rgba(30, 94, 255, 0.45) 0%,\n        transparent 60%\n      ),\n      radial-gradient(\n        ellipse 55% 55% at 5% 100%,\n        rgba(0, 68, 187, 0.4) 0%,\n        transparent 60%\n      ),\n      var(--ink);\n    box-shadow: var(--shadow-lg);\n  }\n  \/* faint grid texture, masked toward the top-right glow *\/\n  .iftpl-widget .vs-grid::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background-image:\n      linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);\n    background-size: 46px 46px;\n    mask-image: radial-gradient(\n      ellipse 80% 80% at 75% 15%,\n      #000 0%,\n      transparent 70%\n    );\n    -webkit-mask-image: radial-gradient(\n      ellipse 80% 80% at 75% 15%,\n      #000 0%,\n      transparent 70%\n    );\n    z-index: -1;\n    pointer-events: none;\n  }\n  .iftpl-widget .vs-card {\n    counter-increment: vs;\n    position: relative;\n    overflow: hidden;\n    background: rgba(255, 255, 255, 0.045);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 18px;\n    padding: 32px 30px;\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n    transition:\n      transform 0.35s var(--ease),\n      background 0.35s var(--ease),\n      border-color 0.35s var(--ease),\n      box-shadow 0.35s var(--ease);\n  }\n  \/* large monospace index watermark *\/\n  .iftpl-widget .vs-card::before {\n    content: counter(vs, decimal-leading-zero);\n    position: absolute;\n    top: 20px;\n    right: 24px;\n    font-family: var(--font-mono);\n    font-size: 34px;\n    font-weight: 600;\n    line-height: 1;\n    letter-spacing: -0.02em;\n    color: rgba(255, 255, 255, 0.07);\n    transition: color 0.35s var(--ease);\n  }\n  \/* top sheen line + focused spotlight that bloom on hover *\/\n  .iftpl-widget .vs-card::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n    background:\n      linear-gradient(\n          90deg,\n          transparent 0%,\n          rgba(140, 175, 255, 0.95) 50%,\n          transparent 100%\n        )\n        top \/ 100% 2px no-repeat,\n      radial-gradient(\n        130% 90% at 50% -25%,\n        rgba(120, 160, 255, 0.2) 0%,\n        transparent 58%\n      );\n    opacity: 0;\n    transition: opacity 0.4s var(--ease);\n  }\n  .iftpl-widget .vs-card:hover {\n    transform: translateY(-6px);\n    background: rgba(255, 255, 255, 0.08);\n    border-color: rgba(120, 160, 255, 0.45);\n    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6);\n  }\n  .iftpl-widget .vs-card:hover::before {\n    color: rgba(140, 175, 255, 0.22);\n  }\n  .iftpl-widget .vs-card:hover::after {\n    opacity: 1;\n  }\n  .iftpl-widget .vs-icon {\n    position: relative;\n    width: 54px;\n    height: 54px;\n    display: grid;\n    place-items: center;\n    border-radius: 15px;\n    background: linear-gradient(140deg, var(--brand-500) 0%, var(--brand) 100%);\n    color: #fff;\n    box-shadow:\n      0 10px 24px -6px rgba(0, 68, 187, 0.7),\n      inset 0 1px 0 rgba(255, 255, 255, 0.3);\n    margin-bottom: 22px;\n    transition:\n      transform 0.35s var(--ease),\n      box-shadow 0.35s var(--ease);\n  }\n  .iftpl-widget .vs-card:hover .vs-icon {\n    transform: scale(1.08) rotate(-5deg);\n    box-shadow:\n      0 14px 30px -6px rgba(0, 68, 187, 0.85),\n      0 0 28px -2px rgba(30, 94, 255, 0.65),\n      inset 0 1px 0 rgba(255, 255, 255, 0.4);\n  }\n  .iftpl-widget .vs-card h3 {\n    font-size: 18.5px;\n    font-weight: 700;\n    letter-spacing: -0.01em;\n    color: #fff;\n    margin: 0 0 10px;\n    padding-right: 40px;\n  }\n  .iftpl-widget .vs-card p {\n    font-size: 14.5px;\n    line-height: 1.65;\n    color: rgba(255, 255, 255, 0.72);\n    margin: 0;\n  }\n  \/* app-window chrome bar across the top of the panel *\/\n  .iftpl-widget .vs-bar {\n    grid-column: 1 \/ -1;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 2px 6px 18px;\n    margin-bottom: 6px;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  }\n  .iftpl-widget .vs-dots {\n    display: inline-flex;\n    gap: 7px;\n  }\n  .iftpl-widget .vs-dots i {\n    width: 11px;\n    height: 11px;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0.16);\n  }\n  .iftpl-widget .vs-dots i:first-child {\n    background: rgba(140, 175, 255, 0.55);\n  }\n  .iftpl-widget .vs-bar-title {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    letter-spacing: 0.02em;\n    color: rgba(255, 255, 255, 0.45);\n  }\n  .iftpl-widget .vs-live {\n    margin-left: auto;\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    font-weight: 600;\n    letter-spacing: 0.16em;\n    text-transform: uppercase;\n    color: #6ee7a8;\n  }\n  .iftpl-widget .vs-live::before {\n    content: \"\";\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    background: #34d27e;\n    box-shadow: 0 0 0 0 rgba(52, 210, 126, 0.6);\n    animation: iftpl-vs-pulse 2s ease-out infinite;\n  }\n  @keyframes iftpl-vs-pulse {\n    0% {\n      box-shadow: 0 0 0 0 rgba(52, 210, 126, 0.55);\n    }\n    70% {\n      box-shadow: 0 0 0 7px rgba(52, 210, 126, 0);\n    }\n    100% {\n      box-shadow: 0 0 0 0 rgba(52, 210, 126, 0);\n    }\n  }\n  \/* scroll-driven staggered reveal (progressive enhancement, CSS-only) *\/\n  .iftpl-widget .vs-cell {\n    display: flex;\n  }\n  .iftpl-widget .vs-cell > .vs-card {\n    flex: 1;\n  }\n  @supports (animation-timeline: view()) {\n    @media (prefers-reduced-motion: no-preference) {\n      .iftpl-widget .vs-cell {\n        animation: iftpl-vs-rise linear both;\n        animation-timeline: view();\n        animation-range: entry 0% cover 26%;\n      }\n    }\n  }\n  @keyframes iftpl-vs-rise {\n    from {\n      opacity: 0;\n      transform: translateY(28px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  \/* ===== AI INVOICE GENERATOR ===== *\/\n  .iftpl-widget .aigen {\n    position: relative;\n    overflow: hidden;\n    background:\n      radial-gradient(\n        ellipse 50% 60% at 88% 12%,\n        rgba(30, 94, 255, 0.1) 0%,\n        transparent 60%\n      ),\n      var(--bg-soft);\n    border-top: 1px solid var(--line);\n    border-bottom: 1px solid var(--line);\n  }\n  .iftpl-widget .aigen-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 96px 32px;\n    display: grid;\n    grid-template-columns: 1.04fr 0.96fr;\n    gap: 64px;\n    align-items: center;\n  }\n  .iftpl-widget .aigen-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--brand);\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    font-weight: 600;\n    background: var(--brand-50);\n    border: 1px solid var(--brand-100);\n    padding: 7px 14px;\n    border-radius: var(--radius-pill);\n    margin-bottom: 22px;\n  }\n  .iftpl-widget .aigen-tag svg {\n    width: 13px;\n    height: 13px;\n  }\n  .iftpl-widget .aigen-text h2 {\n    font-size: clamp(28px, 4vw, 44px);\n    line-height: 1.12;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    color: var(--ink);\n    margin: 0 0 18px;\n  }\n  .iftpl-widget .aigen-text > p {\n    color: var(--ink-mute);\n    font-size: 16px;\n    line-height: 1.65;\n    margin: 0 0 14px;\n    max-width: 520px;\n  }\n  .iftpl-widget .aigen-list {\n    list-style: none;\n    margin: 26px 0 32px;\n    padding: 0;\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 14px 22px;\n  }\n  .iftpl-widget .aigen-list li {\n    display: flex;\n    align-items: center;\n    gap: 11px;\n    font-size: 14.5px;\n    font-weight: 600;\n    color: var(--ink-soft);\n  }\n  .iftpl-widget .aigen-list li span {\n    flex-shrink: 0;\n    width: 24px;\n    height: 24px;\n    display: grid;\n    place-items: center;\n    border-radius: 7px;\n    background: var(--brand-50);\n    color: var(--brand);\n  }\n  .iftpl-widget .aigen-list li span svg {\n    width: 13px;\n    height: 13px;\n  }\n  \/* --- the \"AI autofilling\" invoice mock --- *\/\n  .iftpl-widget .aigen-visual {\n    position: relative;\n    display: flex;\n    justify-content: center;\n  }\n  .iftpl-widget .aigen-visual::before {\n    content: \"\";\n    position: absolute;\n    width: 380px;\n    height: 380px;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    background: radial-gradient(\n      circle,\n      rgba(30, 94, 255, 0.22) 0%,\n      transparent 65%\n    );\n    filter: blur(10px);\n    z-index: 0;\n    pointer-events: none;\n  }\n  .iftpl-widget .aigen-mock {\n    position: relative;\n    z-index: 1;\n    width: 100%;\n    max-width: 400px;\n    background: var(--bg);\n    border: 1px solid var(--line);\n    border-radius: 22px;\n    box-shadow: var(--shadow-lg);\n    padding: 26px 26px 28px;\n  }\n  .iftpl-widget .aigen-mock-head {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding-bottom: 18px;\n    border-bottom: 1px solid var(--line-soft);\n    margin-bottom: 20px;\n  }\n  .iftpl-widget .aigen-logo {\n    width: 34px;\n    height: 34px;\n    border-radius: 9px;\n    background: linear-gradient(140deg, var(--brand-500), var(--brand));\n    box-shadow: 0 6px 14px -4px rgba(0, 68, 187, 0.5);\n  }\n  .iftpl-widget .aigen-docid {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--ink-faint);\n    letter-spacing: 0.02em;\n  }\n  .iftpl-widget .aigen-docid b {\n    display: block;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--ink);\n    letter-spacing: -0.01em;\n  }\n  .iftpl-widget .aigen-status {\n    margin-left: auto;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-family: var(--font-mono);\n    font-size: 9.5px;\n    font-weight: 600;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    color: var(--brand);\n    background: var(--brand-50);\n    border: 1px solid var(--brand-100);\n    border-radius: var(--radius-pill);\n    padding: 5px 9px;\n  }\n  .iftpl-widget .aigen-status svg {\n    width: 11px;\n    height: 11px;\n  }\n  .iftpl-widget .aigen-field {\n    margin-bottom: 16px;\n  }\n  .iftpl-widget .aigen-field-label {\n    font-family: var(--font-mono);\n    font-size: 9.5px;\n    font-weight: 600;\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    color: var(--ink-faint);\n    margin-bottom: 8px;\n  }\n  .iftpl-widget .aigen-bar {\n    height: 11px;\n    border-radius: 6px;\n    background: var(--bg-tint);\n  }\n  .iftpl-widget .aigen-bar + .aigen-bar {\n    margin-top: 8px;\n    width: 72%;\n  }\n  \/* shimmering bars = AI writing the values *\/\n  .iftpl-widget .aigen-bar.is-ai {\n    background: linear-gradient(\n      90deg,\n      var(--brand-100) 0%,\n      var(--brand-500) 35%,\n      var(--brand-100) 70%\n    );\n    background-size: 220% 100%;\n    animation: iftpl-aigen-shimmer 2.2s linear infinite;\n  }\n  @keyframes iftpl-aigen-shimmer {\n    from {\n      background-position: 140% 0;\n    }\n    to {\n      background-position: -80% 0;\n    }\n  }\n  .iftpl-widget .aigen-total {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    margin-top: 22px;\n    padding-top: 18px;\n    border-top: 1px dashed var(--line);\n  }\n  .iftpl-widget .aigen-total span {\n    font-family: var(--font-mono);\n    font-size: 10.5px;\n    font-weight: 600;\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    color: var(--ink-faint);\n  }\n  .iftpl-widget .aigen-total b {\n    font-size: 26px;\n    font-weight: 800;\n    letter-spacing: -0.02em;\n    color: var(--ink);\n  }\n  \/* floating AI chip overlapping the card corner *\/\n  .iftpl-widget .aigen-chip {\n    position: absolute;\n    top: -16px;\n    right: -10px;\n    z-index: 2;\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    font-size: 12px;\n    font-weight: 700;\n    color: #fff;\n    background: linear-gradient(135deg, var(--brand-500), var(--brand));\n    border-radius: var(--radius-pill);\n    padding: 9px 14px;\n    box-shadow: 0 12px 26px -6px rgba(0, 68, 187, 0.6);\n    animation: iftpl-aigen-float 3.4s ease-in-out infinite;\n  }\n  .iftpl-widget .aigen-chip svg {\n    width: 14px;\n    height: 14px;\n  }\n  @keyframes iftpl-aigen-float {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(-7px);\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .iftpl-widget .aigen-bar.is-ai {\n      animation: none;\n    }\n    .iftpl-widget .aigen-chip {\n      animation: none;\n    }\n  }\n\n  \/* ===== TESTIMONIALS ===== *\/\n  .iftpl-widget .quotes {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 96px 32px;\n  }\n  .iftpl-widget .quotes-head {\n    text-align: center;\n    max-width: 720px;\n    margin: 0 auto 56px;\n  }\n  .iftpl-widget .quotes-head h2 {\n    font-size: clamp(28px, 4vw, 44px);\n    line-height: 1.1;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    color: var(--ink);\n    margin-bottom: 16px;\n  }\n  .iftpl-widget .quotes-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 20px;\n  }\n  .iftpl-widget .quote {\n    background: white;\n    border: 1.5px solid var(--line);\n    border-radius: var(--radius-lg);\n    padding: 28px;\n    display: flex;\n    flex-direction: column;\n    transition:\n      border-color 0.3s var(--ease),\n      box-shadow 0.3s var(--ease),\n      transform 0.3s var(--ease);\n  }\n  .iftpl-widget .quote:hover {\n    border-color: var(--brand);\n    box-shadow: var(--shadow-lg);\n    transform: translateY(-4px);\n  }\n  .iftpl-widget .quote-stars {\n    color: #ffb800;\n    display: flex;\n    gap: 1px;\n    margin-bottom: 16px;\n  }\n  .iftpl-widget .quote-text {\n    font-size: 15.5px;\n    line-height: 1.55;\n    color: var(--ink);\n    margin-bottom: 20px;\n    font-weight: 500;\n    flex: 1;\n  }\n  .iftpl-widget .quote-author {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding-top: 18px;\n    border-top: 1px solid var(--line);\n  }\n  .iftpl-widget .quote-avatar {\n    width: 44px;\n    height: 44px;\n    border-radius: 50%;\n    background: var(--brand);\n    color: white;\n    display: grid;\n    place-items: center;\n    font-weight: 800;\n    font-size: 16px;\n    flex-shrink: 0;\n  }\n  .iftpl-widget .quote-name {\n    font-weight: 700;\n    font-size: 14px;\n    color: var(--ink);\n  }\n  .iftpl-widget .quote-role {\n    font-size: 12.5px;\n    color: var(--ink-faint);\n    margin-top: 2px;\n  }\n  .iftpl-widget .quote-source {\n    margin-left: auto;\n    align-self: center;\n    flex-shrink: 0;\n    display: block;\n    opacity: 0.85;\n    transition: opacity 0.3s var(--ease);\n  }\n  .iftpl-widget .quote-source:hover {\n    opacity: 1;\n  }\n  .iftpl-widget .quote-source img {\n    height: 24px;\n    width: auto;\n    max-width: 96px;\n    object-fit: contain;\n  }\n\n  \/* ===== FAQ ===== *\/\n  .iftpl-widget .faq {\n    background: var(--bg-soft);\n    padding: 96px 32px;\n  }\n  .iftpl-widget .faq-inner {\n    max-width: 920px;\n    margin: 0 auto;\n  }\n  .iftpl-widget .faq-head {\n    text-align: center;\n    margin-bottom: 48px;\n  }\n  .iftpl-widget .faq-head h2 {\n    font-size: clamp(28px, 4vw, 44px);\n    line-height: 1.1;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    color: var(--ink);\n    margin-bottom: 12px;\n  }\n  .iftpl-widget .faq-head p {\n    color: var(--ink-mute);\n    font-size: 16px;\n  }\n  .iftpl-widget .faq-list {\n    background: white;\n    border-radius: var(--radius-lg);\n    border: 1.5px solid var(--line);\n    overflow: hidden;\n  }\n  .iftpl-widget .faq-item {\n    border-bottom: 1px solid var(--line);\n  }\n  .iftpl-widget .faq-item:last-child {\n    border-bottom: none;\n  }\n  .iftpl-widget .faq-q {\n    padding: 22px 28px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    font-size: 16px;\n    font-weight: 700;\n    letter-spacing: -0.005em;\n    transition: color 0.2s;\n    user-select: none;\n    color: var(--ink);\n    gap: 24px;\n  }\n  .iftpl-widget .faq-q:hover {\n    color: var(--brand);\n  }\n  .iftpl-widget .faq-icon {\n    width: 28px;\n    height: 28px;\n    border: 1.5px solid var(--line);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition:\n      background-color 0.3s,\n      border-color 0.3s,\n      color 0.3s,\n      transform 0.3s;\n    color: var(--ink-mute);\n  }\n  .iftpl-widget .faq-item.open .faq-icon {\n    background: var(--brand);\n    color: white;\n    border-color: var(--brand);\n    transform: rotate(45deg);\n  }\n  .iftpl-widget .faq-a {\n    max-height: 0;\n    overflow: hidden;\n    transition:\n      max-height 0.4s ease,\n      padding 0.4s ease;\n    color: var(--ink-mute);\n    font-size: 14.5px;\n    line-height: 1.65;\n    padding: 0 28px;\n  }\n  .iftpl-widget .faq-item.open .faq-a {\n    max-height: 600px;\n    padding: 0 28px 24px;\n  }\n  .iftpl-widget .faq-a strong {\n    color: var(--ink);\n    font-weight: 700;\n  }\n  .iftpl-widget .faq-item.open.faq-item-media .faq-a {\n    max-height: 1100px;\n  }\n  .iftpl-widget .faq-a-img {\n    margin: 18px auto 0;\n    border-radius: 12px;\n    border: 1px solid var(--line);\n    max-width: 300px;\n    width: 100%;\n    box-shadow: var(--shadow-md);\n  }\n\n  \/* ===== FINAL CTA ===== *\/\n  .iftpl-widget .final-cta {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 96px 32px;\n  }\n  .iftpl-widget .final-cta-wrap {\n    background: var(--brand);\n    color: white;\n    border-radius: 24px;\n    padding: 72px 56px;\n    position: relative;\n    overflow: hidden;\n    text-align: center;\n  }\n  .iftpl-widget .final-cta-wrap::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: radial-gradient(\n      ellipse 80% 120% at 90% 0%,\n      var(--brand-500) 0%,\n      transparent 60%\n    );\n    opacity: 0.5;\n    pointer-events: none;\n  }\n  .iftpl-widget .final-cta-wrap::after {\n    content: \"\";\n    position: absolute;\n    bottom: -60px;\n    left: -60px;\n    width: 320px;\n    height: 320px;\n    background: radial-gradient(circle, var(--safety) 0%, transparent 70%);\n    opacity: 0.2;\n    pointer-events: none;\n  }\n  .iftpl-widget .final-cta-content {\n    position: relative;\n    z-index: 1;\n    max-width: 760px;\n    margin: 0 auto;\n  }\n  .iftpl-widget .final-cta-content h2 {\n    font-size: clamp(32px, 4.8vw, 56px) !important;\n    color: white;\n    line-height: 1.05;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    margin-bottom: 20px;\n  }\n  .iftpl-widget .final-cta-content p {\n    font-size: 17px;\n    line-height: 1.5;\n    color: rgba(255, 255, 255, 0.9);\n    margin-bottom: 32px;\n  }\n  .iftpl-widget .final-cta-ctas {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n  .iftpl-widget .final-cta .btn-primary {\n    background: white;\n    color: var(--brand) !important;\n    border-color: white;\n    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.3);\n  }\n  .iftpl-widget .final-cta .btn-primary:hover {\n    background: var(--ink);\n    color: white !important;\n    border-color: var(--ink);\n  }\n  .iftpl-widget .final-cta .btn-outline {\n    background: transparent;\n    color: white;\n    border-color: rgba(255, 255, 255, 0.3);\n  }\n  .iftpl-widget .final-cta .btn-outline:hover {\n    background: rgba(255, 255, 255, 0.1);\n    border-color: white;\n  }\n\n  \/* ===== STICKY BAR ===== *\/\n  \/* The global menu sets `html,body { overflow-x: hidden }` which breaks sticky\n     positioning because body becomes a scroll container. We use clip on both\n     html and body \u2014 it prevents horizontal overflow without creating a scroll\n     context that would break position:sticky. *\/\n  html {\n    overflow-x: clip;\n  }\n  body {\n    overflow-x: clip;\n    overflow-y: visible;\n  }\n\n  .iftpl-widget .sticky-bar {\n    position: sticky;\n    top: var(--iftpl-sticky-offset, 0px);\n    z-index: 90;\n    background: transparent;\n    transition:\n      background 0.25s var(--ease),\n      box-shadow 0.25s var(--ease);\n  }\n  .iftpl-widget .sticky-bar-inner {\n    transition: padding 0.25s var(--ease);\n  }\n  .iftpl-widget .sticky-bar.is-stuck {\n    background: rgba(255, 255, 255, 0.92);\n    backdrop-filter: saturate(180%) blur(14px);\n    -webkit-backdrop-filter: saturate(180%) blur(14px);\n    box-shadow:\n      0 1px 0 var(--line),\n      0 6px 20px -8px rgba(10, 22, 40, 0.08);\n  }\n  .iftpl-widget .sticky-bar.is-stuck .tab-pills-wrap {\n    padding-top: 10px;\n    padding-bottom: 8px;\n  }\n  .iftpl-widget .sticky-bar.is-stuck .tab-pills {\n    padding: 3px;\n  }\n  .iftpl-widget .sticky-bar.is-stuck .tab-pill {\n    padding: 6px 14px;\n    font-size: 12.5px;\n  }\n  .iftpl-widget .sticky-bar.is-stuck .toolbar-wrap {\n    padding-bottom: 10px;\n  }\n  .iftpl-widget .sticky-bar.is-stuck .toolbar {\n    padding: 8px;\n    border-color: transparent;\n    box-shadow: none;\n    background: rgba(255, 255, 255, 0.6);\n  }\n  .iftpl-widget .sticky-bar.is-stuck .tb-search {\n    padding: 7px 14px;\n    min-height: 36px;\n  }\n  .iftpl-widget .sticky-bar.is-stuck .tb-search input {\n    font-size: 13.5px;\n  }\n  .iftpl-widget .sticky-bar.is-stuck .tb-filter-btn {\n    padding: 7px 12px;\n    font-size: 12.5px;\n    min-height: 36px;\n  }\n  .iftpl-widget .sticky-chips-wrap.has-chips {\n    padding-bottom: 14px;\n  }\n  .iftpl-widget .sticky-bar.is-stuck .sticky-chips-wrap.has-chips {\n    padding-bottom: 10px;\n  }\n\n  \/* Active filter chips inside sticky bar *\/\n  .iftpl-widget .sticky-chips-wrap {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 0 32px;\n    max-height: 0;\n    overflow: hidden;\n    transition:\n      max-height 0.3s var(--ease),\n      padding-bottom 0.3s var(--ease);\n  }\n  .iftpl-widget .sticky-chips-wrap.has-chips {\n    max-height: 80px;\n    padding-bottom: 14px;\n  }\n\n  \/* Auto-hide global if-header on scroll-down *\/\n  .if-header {\n    transition: transform 0.3s var(--ease);\n    z-index: 200 !important;\n  }\n  .if-header.iftpl-hidden {\n    transform: translateY(-100%);\n    will-change: transform;\n  }\n  \/* When the if-header is hidden, the announcement banner above also slides up *\/\n  .if-announce {\n    transition: transform 0.3s var(--ease);\n  }\n  .if-header.iftpl-hidden ~ * .if-announce,\n  body.iftpl-header-hidden .if-announce {\n    transform: translateY(-100%);\n  }\n\n  \/* ===== RESPONSIVE \u2014 TABLET (\u22641024px) ===== *\/\n  @media (max-width: 1024px) {\n    .iftpl-widget .hero-inner {\n      padding: 40px 24px 48px;\n    }\n    .iftpl-widget .hero-grid {\n      grid-template-columns: 1fr;\n      gap: 32px;\n    }\n    .iftpl-widget .hero-visual {\n      max-width: 440px;\n      margin: 0 auto;\n    }\n    .iftpl-widget .trades {\n      padding: 0 24px 32px;\n    }\n    .iftpl-widget .trades-grid {\n      gap: 10px;\n    }\n    .iftpl-widget .tab-pills-wrap {\n      padding: 0 24px 16px;\n    }\n    .iftpl-widget .sticky-chips-wrap {\n      padding: 0 24px;\n    }\n    .iftpl-widget .sticky-bar.is-stuck .tab-pills-wrap {\n      padding-top: 8px;\n      padding-bottom: 6px;\n    }\n    .iftpl-widget .sticky-bar.is-stuck .toolbar-wrap {\n      padding-bottom: 8px;\n    }\n    .iftpl-widget .toolbar-wrap {\n      padding: 0 24px 16px;\n    }\n    .iftpl-widget .gallery {\n      padding: 0 24px 64px;\n    }\n    .iftpl-widget .stats {\n      padding: 56px 24px;\n    }\n    .iftpl-widget .stats-grid {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 16px;\n    }\n    .iftpl-widget .how {\n      padding: 64px 24px;\n    }\n    .iftpl-widget .how-grid {\n      grid-template-columns: 1fr;\n      gap: 14px;\n    }\n    \/* hide horizontal flow connectors once the steps stack *\/\n    .iftpl-widget .how-grid::before,\n    .iftpl-widget .how-step:not(:last-child)::after {\n      display: none;\n    }\n    .iftpl-widget .how-step {\n      padding: 28px;\n    }\n    .iftpl-widget .bp-inner {\n      grid-template-columns: 1fr;\n      gap: 36px;\n      padding: 64px 24px;\n    }\n    .iftpl-widget .bp-intro {\n      \/* Use relative (not static) so the decorative `::after` (position:absolute;\n         inset:0) stays contained inside this panel. With `static`, the ::after\n         loses its containing block, stretches across the whole document and \u2014\n         despite z-index:-1 \u2014 forms a phantom layer that swallows taps on the\n         gallery cards and FAQ on mobile\/tablet. *\/\n      position: relative;\n      top: auto;\n      padding: 38px 32px;\n    }\n    .iftpl-widget .features {\n      padding: 64px 24px;\n    }\n    .iftpl-widget .features-inner {\n      grid-template-columns: 1fr;\n      gap: 48px;\n    }\n    .iftpl-widget .features-content {\n      max-width: 100%;\n    }\n    .iftpl-widget .features-visual {\n      height: 480px;\n    }\n    .iftpl-widget .vs {\n      padding: 64px 24px;\n    }\n    .iftpl-widget .aigen-inner {\n      grid-template-columns: 1fr;\n      gap: 48px;\n      padding: 64px 24px;\n    }\n    .iftpl-widget .aigen-visual {\n      order: -1;\n    }\n    .iftpl-widget .quotes {\n      padding: 64px 24px;\n    }\n    .iftpl-widget .quotes-grid {\n      grid-template-columns: 1fr;\n      gap: 14px;\n    }\n    .iftpl-widget .faq {\n      padding: 64px 24px;\n    }\n    .iftpl-widget .final-cta {\n      padding: 64px 24px;\n    }\n    .iftpl-widget .final-cta-wrap {\n      padding: 56px 36px;\n    }\n    .iftpl-widget .modal-grid {\n      grid-template-columns: 1fr;\n    }\n    .iftpl-widget .modal-preview {\n      border-radius: 20px 20px 0 0;\n      padding: 36px 28px;\n    }\n    .iftpl-widget .modal-preview img {\n      max-width: 240px;\n    }\n    .iftpl-widget .modal-body {\n      padding: 32px 28px;\n    }\n    .iftpl-widget .key-sections-layout {\n      grid-template-columns: 1fr 320px 1fr;\n      gap: 24px;\n      padding: 36px 24px;\n    }\n  }\n\n  \/* ===== RESPONSIVE \u2014 MOBILE (\u2264768px) ===== *\/\n  @media (max-width: 768px) {\n    .iftpl-widget .hero {\n      padding: 75px 16px 32px;\n    }\n    .iftpl-widget .hero-inner {\n      padding: 20px 16px 20px;\n    }\n    .iftpl-widget .hero-h1 {\n      font-size: clamp(30px, 8.5vw, 40px);\n    }\n    .iftpl-widget .hero-lead {\n      font-size: 16px;\n    }\n    .iftpl-widget .hero-ctas {\n      gap: 8px;\n    }\n    .iftpl-widget .hero-ctas .btn {\n      flex: 1 1 100%;\n    }\n    .iftpl-widget .hero-proof {\n      justify-content: center;\n      text-align: center;\n      gap: 5px;\n    }\n    .iftpl-widget .hero-proof-sep {\n      display: none;\n    }\n    .iftpl-widget .hero-visual {\n      display: none;\n    }\n    .iftpl-widget .trades {\n      padding: 20px 16px 20px;\n    }\n    .iftpl-widget .trades-carousel {\n      padding: 0;\n    }\n    .iftpl-widget .trades-grid {\n      gap: 10px;\n      padding: 4px 0;\n      scroll-padding-left: 0;\n    }\n    .iftpl-widget .trade {\n      padding: 13px 20px;\n    }\n    .iftpl-widget .trade-label {\n      font-size: 13px;\n    }\n    .iftpl-widget .trades-nav {\n      display: none !important;\n    }\n    \/* Sticky bar: normal flow on mobile *\/\n    .iftpl-widget .sticky-bar {\n      position: relative !important;\n      top: auto !important;\n    }\n    .iftpl-widget .sticky-bar.is-stuck {\n      background: transparent !important;\n      backdrop-filter: none !important;\n      -webkit-backdrop-filter: none !important;\n      box-shadow: none !important;\n    }\n    .iftpl-widget .tab-pills-wrap {\n      padding: 0 16px 12px;\n    }\n    .iftpl-widget .sticky-chips-wrap {\n      padding: 0 16px;\n    }\n    .iftpl-widget .sticky-bar.is-stuck .tab-pills-wrap {\n      padding-top: 6px;\n      padding-bottom: 6px;\n    }\n    .iftpl-widget .sticky-bar.is-stuck .tab-pill {\n      padding: 6px 12px;\n      font-size: 12px;\n    }\n    .iftpl-widget .sticky-bar.is-stuck .toolbar {\n      padding: 6px;\n    }\n    .iftpl-widget .sticky-bar.is-stuck .toolbar-wrap {\n      padding-bottom: 8px;\n    }\n    .iftpl-widget .sticky-bar.is-stuck .tb-filter-btn {\n      padding: 7px 10px;\n      font-size: 12px;\n      min-height: 36px;\n    }\n    .iftpl-widget .tab-pills {\n      padding: 4px;\n    }\n    .iftpl-widget .tab-pill {\n      padding: 8px 14px;\n      font-size: 12.5px;\n    }\n    .iftpl-widget .toolbar-wrap {\n      padding: 0 16px 22px;\n    }\n    .iftpl-widget .toolbar {\n      padding: 12px;\n      gap: 10px;\n    }\n    .iftpl-widget .tb-search {\n      flex: 1 1 100%;\n      order: -1;\n      padding: 5px 10px;\n      gap: 6px;\n    }\n    .iftpl-widget .tb-search svg {\n      width: 13px;\n      height: 13px;\n      flex-shrink: 0;\n    }\n    .iftpl-widget .tb-search input {\n      font-size: 13px;\n    }\n    .iftpl-widget .tb-filter {\n      flex: 0 0 auto;\n    }\n    .iftpl-widget .tb-filter-btn {\n      padding: 6px 10px;\n      font-size: 12px;\n      min-height: 32px;\n    }\n\n    .iftpl-widget .tb-dropdown {\n      position: fixed !important;\n      top: auto !important;\n      left: 0 !important;\n      right: 0 !important;\n      bottom: 0 !important;\n      width: 100%;\n      max-width: 100%;\n      max-height: 75vh;\n      border-radius: 24px 24px 0 0;\n      padding: 20px;\n      z-index: 99998;\n      box-shadow: 0 -10px 50px rgba(10, 22, 40, 0.25);\n      animation: iftpl-sheetUp 0.3s var(--ease);\n      overflow-y: auto;\n    }\n    .iftpl-widget .tb-mobile-backdrop {\n      display: block;\n    }\n    .iftpl-widget .tb-mobile-head {\n      display: flex;\n    }\n    .iftpl-widget .tb-dropdown-title {\n      display: none;\n    }\n    .iftpl-widget .tb-options {\n      max-height: calc(75vh - 160px);\n    }\n    .iftpl-widget .tb-option {\n      padding: 14px 12px;\n      font-size: 14.5px;\n      min-height: 44px;\n    }\n    @keyframes iftpl-sheetUp {\n      from {\n        transform: translateY(100%);\n      }\n      to {\n        transform: translateY(0);\n      }\n    }\n\n    .iftpl-widget .gallery {\n      padding: 0 16px 56px;\n    }\n    .iftpl-widget .gallery-head {\n      gap: 10px;\n    }\n    .iftpl-widget .template-grid {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 12px;\n    }\n    .iftpl-widget .tc-info {\n      padding: 12px 12px 14px;\n      gap: 8px;\n    }\n    .iftpl-widget .tc-name {\n      font-size: 13px;\n    }\n    .iftpl-widget .tc-meta {\n      font-size: 9.5px;\n    }\n    .iftpl-widget .tc-arrow {\n      width: 26px;\n      height: 26px;\n    }\n    .iftpl-widget .tc-overlay {\n      display: none;\n    }\n    .iftpl-widget .tc-badge {\n      top: 18px;\n      left: 18px;\n      font-size: 9px;\n      padding: 3px 6px;\n    }\n    .iftpl-widget .tc-formats {\n      gap: 2px;\n      margin-top: 6px;\n    }\n    .iftpl-widget .tc-fmt {\n      font-size: 8px;\n      padding: 2px 4px;\n    }\n\n    .iftpl-widget .stats {\n      padding: 48px 16px;\n    }\n    .iftpl-widget .stats-head {\n      margin-bottom: 28px;\n    }\n    .iftpl-widget .stats-grid {\n      gap: 10px;\n    }\n    .iftpl-widget .stat {\n      padding: 20px 12px;\n    }\n    .iftpl-widget .stat-num {\n      font-size: 34px;\n    }\n    .iftpl-widget .stat-label {\n      font-size: 12px;\n    }\n\n    .iftpl-widget .how {\n      padding: 56px 16px;\n    }\n    .iftpl-widget .how-head {\n      margin-bottom: 36px;\n    }\n    .iftpl-widget .how-step {\n      padding: 24px;\n    }\n    .iftpl-widget .bp-inner {\n      padding: 56px 16px;\n    }\n    .iftpl-widget .bp-intro {\n      padding: 32px 24px;\n    }\n    .iftpl-widget .bp-item {\n      grid-template-columns: 52px 1fr;\n      gap: 18px;\n      padding: 22px 16px 22px 16px;\n    }\n    .iftpl-widget .bp-num {\n      font-size: 38px;\n    }\n    .iftpl-widget .bp-item:not(:last-child)::after {\n      left: 86px;\n      right: 16px;\n    }\n\n    .iftpl-widget .features {\n      padding: 56px 16px;\n    }\n    .iftpl-widget .features-inner {\n      gap: 36px;\n    }\n    .iftpl-widget .features-visual {\n      height: 440px;\n    }\n    .iftpl-widget .vs {\n      padding: 56px 16px;\n    }\n    .iftpl-widget .vs-grid {\n      grid-template-columns: 1fr;\n      gap: 14px;\n      padding: 16px;\n      border-radius: 22px;\n    }\n    .iftpl-widget .vs-card {\n      padding: 26px 22px;\n    }\n    .iftpl-widget .aigen-inner {\n      padding: 56px 16px;\n    }\n    .iftpl-widget .aigen-list {\n      grid-template-columns: 1fr;\n      gap: 12px;\n    }\n    .iftpl-widget .aigen-text > .btn {\n      display: flex;\n      width: fit-content;\n      margin-left: auto;\n      margin-right: auto;\n    }\n    .iftpl-widget .phone {\n      width: 240px;\n    }\n    .iftpl-widget .phone-badge {\n      font-size: 11.5px;\n      padding: 8px 12px;\n    }\n\n    .iftpl-widget .quotes {\n      padding: 56px 16px;\n    }\n    .iftpl-widget .quote {\n      padding: 24px;\n    }\n\n    .iftpl-widget .faq {\n      padding: 56px 16px;\n    }\n    .iftpl-widget .faq-q {\n      padding: 20px 22px;\n      font-size: 15px;\n      gap: 16px;\n    }\n    .iftpl-widget .faq-item.open .faq-a {\n      padding: 0 22px 22px;\n    }\n\n    .iftpl-widget .final-cta {\n      padding: 56px 16px;\n    }\n    .iftpl-widget .final-cta-wrap {\n      padding: 48px 24px;\n    }\n    .iftpl-widget .final-cta-ctas .btn {\n      flex: 1 1 100%;\n    }\n\n    .iftpl-widget .modal-backdrop {\n      padding: 0;\n      align-items: flex-end;\n    }\n    .iftpl-widget .modal {\n      border-radius: 24px 24px 0 0;\n      max-height: 92vh;\n      animation: iftpl-sheetUp 0.35s var(--ease);\n    }\n    .iftpl-widget .modal-close {\n      top: 12px;\n      right: 12px;\n      width: 34px;\n      height: 34px;\n    }\n    .iftpl-widget .modal-preview {\n      padding: 28px 20px 12px;\n      border-radius: 24px 24px 0 0;\n    }\n    .iftpl-widget .modal-preview img {\n      max-width: 190px;\n    }\n    .iftpl-widget .modal-body {\n      padding: 22px 20px 28px;\n    }\n    .iftpl-widget .modal-formats {\n      grid-template-columns: 1fr;\n      gap: 6px;\n    }\n    .iftpl-widget .key-sections {\n      padding: 0 16px 64px;\n    }\n    .iftpl-widget .key-sections-layout {\n      grid-template-columns: 1fr;\n      padding: 28px 20px;\n    }\n    .iftpl-widget .ks-doc {\n      order: -1;\n      max-width: 280px;\n      margin: 0 auto;\n    }\n    .iftpl-widget .ks-items {\n      gap: 20px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .iftpl-widget .trades-carousel {\n      padding: 0;\n    }\n    .iftpl-widget .trade {\n      padding: 12px 18px;\n    }\n    .iftpl-widget .trade-label {\n      font-size: 12.5px;\n    }\n    .iftpl-widget .stats-grid {\n      grid-template-columns: 1fr;\n    }\n  }\n  @media (max-width: 360px) {\n    .iftpl-widget .template-grid {\n      grid-template-columns: 1fr;\n    }\n  }\n\n  \/* ===== MORE TEMPLATE TYPES ===== *\/\n  .iftpl-widget .more-tpl {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 96px 32px;\n  }\n  .iftpl-widget .more-tpl-head {\n    text-align: center;\n    max-width: 720px;\n    margin: 0 auto 48px;\n  }\n  .iftpl-widget .more-tpl-head h2 {\n    font-size: clamp(28px, 4vw, 44px);\n    line-height: 1.1;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    color: var(--ink);\n    margin-bottom: 16px;\n  }\n  .iftpl-widget .more-tpl-head p {\n    font-size: 16.5px;\n    line-height: 1.6;\n    color: var(--ink-soft);\n    margin: 0;\n  }\n  .iftpl-widget .more-tpl-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 20px;\n  }\n  .iftpl-widget .more-tpl-card {\n    background: var(--bg-soft);\n    border: 1.5px solid var(--line);\n    border-radius: var(--radius-lg);\n    padding: 28px;\n    display: flex;\n    flex-direction: column;\n    transition:\n      border-color 0.3s var(--ease),\n      box-shadow 0.3s var(--ease),\n      transform 0.3s var(--ease);\n  }\n  .iftpl-widget .more-tpl-card:hover {\n    border-color: var(--brand);\n    box-shadow: var(--shadow-lg);\n    transform: translateY(-4px);\n  }\n  .iftpl-widget .more-tpl-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    background: var(--brand);\n    color: white;\n    display: grid;\n    place-items: center;\n    margin-bottom: 20px;\n  }\n  .iftpl-widget .more-tpl-card h3 {\n    font-size: 19px;\n    font-weight: 800;\n    letter-spacing: -0.01em;\n    color: var(--ink);\n    margin: 0 0 10px;\n  }\n  .iftpl-widget .more-tpl-card p {\n    font-size: 14.5px;\n    line-height: 1.6;\n    color: var(--ink-mute);\n    margin: 0 0 20px;\n    flex: 1;\n  }\n  .iftpl-widget .more-tpl-cta {\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--brand) !important;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    transition: gap 0.2s var(--ease);\n  }\n  .iftpl-widget .more-tpl-card:hover .more-tpl-cta {\n    gap: 10px;\n  }\n\n  \/* ===== ABOUT TEMPLATES (dark) ===== *\/\n  .iftpl-widget .about-tpl {\n    background:\n      radial-gradient(\n        ellipse 70% 80% at 90% 10%,\n        rgba(30, 94, 255, 0.4) 0%,\n        transparent 65%\n      ),\n      radial-gradient(\n        ellipse 60% 60% at 0% 100%,\n        rgba(0, 68, 187, 0.28) 0%,\n        transparent 70%\n      ),\n      var(--ink);\n    color: white;\n    padding: 96px 32px;\n    overflow: hidden;\n  }\n  .iftpl-widget .about-tpl-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1.1fr 0.9fr;\n    gap: 64px;\n    align-items: center;\n  }\n  .iftpl-widget .about-tpl-tag {\n    display: inline-block;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    color: var(--brand-100);\n    background: rgba(255, 255, 255, 0.08);\n    border: 1px solid rgba(255, 255, 255, 0.18);\n    border-radius: var(--radius-pill);\n    padding: 6px 14px;\n    margin-bottom: 22px;\n  }\n  .iftpl-widget .about-tpl-content h2 {\n    font-size: clamp(30px, 4.4vw, 46px);\n    line-height: 1.08;\n    letter-spacing: -0.025em;\n    font-weight: 800;\n    color: white;\n    margin: 0 0 22px;\n  }\n  .iftpl-widget .about-tpl-content p {\n    font-size: 15.5px !important;\n    line-height: 1.65;\n    color: rgba(255, 255, 255, 0.75);\n    margin: 0 0 16px;\n  }\n  .iftpl-widget .about-tpl-list {\n    list-style: none;\n    margin: 26px 0 32px;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n  }\n  .iftpl-widget .about-tpl-list li {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    font-size: 15px;\n    font-weight: 500;\n    color: rgba(255, 255, 255, 0.9);\n  }\n  .iftpl-widget .about-tpl-list li svg {\n    flex-shrink: 0;\n    width: 22px;\n    height: 22px;\n    padding: 4px;\n    border-radius: 50%;\n    background: var(--brand);\n    color: white;\n    margin-top: 1px;\n  }\n  .iftpl-widget .about-tpl-content .btn-primary {\n    background: var(--brand);\n    color: white !important;\n  }\n  \/* Invoice mock card *\/\n  .iftpl-widget .inv-mock {\n    background: white;\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-lg);\n    padding: 32px;\n    color: var(--ink);\n    max-width: 420px;\n    margin-left: auto;\n    width: 100%;\n  }\n  .iftpl-widget .inv-mock-head {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 28px;\n  }\n  .iftpl-widget .inv-mock-logo {\n    width: 38px;\n    height: 38px;\n    border-radius: 9px;\n    background: var(--brand);\n  }\n  .iftpl-widget .inv-mock-id {\n    text-align: right;\n  }\n  .iftpl-widget .inv-mock-id .lbl {\n    font-family: var(--font-mono);\n    font-size: 10px;\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    color: var(--ink-faint);\n  }\n  .iftpl-widget .inv-mock-id .num {\n    font-family: var(--font-mono);\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--ink);\n    margin-top: 3px;\n  }\n  .iftpl-widget .inv-mock-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 11px 0;\n    border-bottom: 1px solid var(--line-soft);\n    font-size: 13.5px;\n  }\n  .iftpl-widget .inv-mock-row .k {\n    color: var(--ink-faint);\n  }\n  .iftpl-widget .inv-mock-row .v {\n    font-weight: 700;\n    color: var(--ink);\n  }\n  .iftpl-widget .inv-mock-total {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 18px;\n  }\n  .iftpl-widget .inv-mock-total .k {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--ink-faint);\n  }\n  .iftpl-widget .inv-mock-total .v {\n    font-size: 26px;\n    font-weight: 800;\n    letter-spacing: -0.02em;\n    color: var(--ink);\n  }\n\n  @media (max-width: 768px) {\n    .iftpl-widget .more-tpl {\n      padding: 56px 16px;\n    }\n    .iftpl-widget .more-tpl-grid {\n      grid-template-columns: 1fr;\n    }\n    .iftpl-widget .about-tpl {\n      padding: 56px 16px;\n    }\n    .iftpl-widget .about-tpl-inner {\n      grid-template-columns: 1fr;\n      gap: 40px;\n    }\n    .iftpl-widget .inv-mock {\n      margin: 0 auto;\n    }\n  }\n\n  \/* ===== TEMPLATE GRID CTA BANNER ===== *\/\n  .iftpl-widget .tpl-cta {\n    grid-column: span 3;\n    position: relative;\n    overflow: hidden;\n    border: 1.5px solid var(--line);\n    border-radius: var(--radius-lg);\n    padding: 33px 48px 37px;\n    background:\n      radial-gradient(\n        ellipse 50% 80% at 0% 0%,\n        rgba(107, 70, 193, 0.12) 0%,\n        transparent 60%\n      ),\n      radial-gradient(\n        ellipse 60% 90% at 100% 100%,\n        rgba(255, 140, 0, 0.1) 0%,\n        transparent 60%\n      ),\n      var(--bg-soft);\n    display: grid;\n    grid-template-columns: 1.15fr 0.85fr;\n    gap: 40px;\n    align-items: center;\n  }\n  .iftpl-widget .tpl-cta-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: rgba(255, 255, 255, 0.8);\n    border: 1px solid var(--line);\n    border-radius: var(--radius-pill);\n    padding: 6px 14px;\n    font-size: 13px;\n    font-weight: 700;\n    color: var(--brand);\n    margin-bottom: 20px;\n  }\n  .iftpl-widget .tpl-cta-badge::before {\n    content: \"\";\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: var(--green);\n  }\n  .iftpl-widget .tpl-cta-title {\n    font-size: clamp(28px, 3.6vw, 42px);\n    line-height: 1.06;\n    letter-spacing: -0.025em;\n    font-weight: 800;\n    color: var(--ink);\n    margin: 0 0 18px;\n  }\n  .iftpl-widget .tpl-cta-title .hi {\n    color: var(--brand);\n  }\n  .iftpl-widget .tpl-cta-text {\n    font-size: 16px;\n    line-height: 1.6;\n    color: var(--ink-soft);\n    max-width: 520px;\n    margin: 0 0 28px;\n  }\n  .iftpl-widget .tpl-cta-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--brand);\n    color: white !important;\n    border-radius: var(--radius-pill);\n    padding: 14px 28px;\n    font-size: 15px;\n    font-weight: 700;\n    box-shadow: var(--shadow-brand);\n    transition:\n      background-color 0.2s var(--ease),\n      transform 0.2s var(--ease);\n  }\n  .iftpl-widget .tpl-cta-btn:hover {\n    background: var(--brand-dark);\n    transform: translateY(-2px);\n  }\n  .iftpl-widget .tpl-cta-stats {\n    margin-top: 22px;\n    font-size: 13.5px;\n    font-weight: 600;\n    color: var(--ink-faint);\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 10px;\n  }\n  .iftpl-widget .tpl-cta-stats .sep {\n    opacity: 0.4;\n  }\n  .iftpl-widget .tpl-cta-sent {\n    position: absolute;\n    top: 24px;\n    right: 24px;\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    background: white;\n    border-radius: var(--radius-pill);\n    padding: 8px 16px;\n    font-size: 13px;\n    font-weight: 700;\n    color: var(--ink);\n    box-shadow: var(--shadow-md);\n  }\n  .iftpl-widget .tpl-cta-sent svg {\n    color: var(--green);\n  }\n  \/* Invoice mock inside CTA *\/\n  .iftpl-widget .tpl-cta-inv {\n    background: white;\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-lg);\n    padding: 24px 24px 0;\n    max-width: 360px;\n    margin-left: auto;\n    width: 100%;\n    overflow: hidden;\n  }\n  .iftpl-widget .tpl-cta-inv-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding-bottom: 18px;\n    border-bottom: 1px solid var(--line-soft);\n  }\n  .iftpl-widget .tpl-cta-inv-head .id {\n    font-size: 15px;\n    font-weight: 800;\n    color: var(--ink);\n  }\n  .iftpl-widget .tpl-cta-inv-head .logo {\n    width: 30px;\n    height: 30px;\n    border-radius: 8px;\n    background: var(--brand);\n  }\n  .iftpl-widget .tpl-cta-inv-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 13px 0;\n    border-bottom: 1px solid var(--line-soft);\n    font-size: 14px;\n  }\n  .iftpl-widget .tpl-cta-inv-row .k {\n    color: var(--ink-mute);\n  }\n  .iftpl-widget .tpl-cta-inv-row .v {\n    font-weight: 700;\n    color: var(--ink);\n  }\n  .iftpl-widget .tpl-cta-inv-total {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background: var(--brand);\n    color: white;\n    margin: 14px -24px 0;\n    padding: 18px 24px;\n  }\n  .iftpl-widget .tpl-cta-inv-total .k {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: rgba(255, 255, 255, 0.8);\n  }\n  .iftpl-widget .tpl-cta-inv-total .v {\n    font-size: 24px;\n    font-weight: 800;\n    letter-spacing: -0.02em;\n  }\n  @media (max-width: 768px) {\n    .iftpl-widget .tpl-cta {\n      grid-column: 1 \/ -1;\n      padding: 32px 22px 36px;\n      grid-template-columns: 1fr;\n      gap: 28px;\n    }\n    .iftpl-widget .tpl-cta-sent {\n      display: none;\n    }\n    .iftpl-widget .tpl-cta-inv {\n      margin: 0 auto;\n    }\n  }\n\n  \/* ===== INDUSTRY TEMPLATES GRID ===== *\/\n  .iftpl-widget .indgrid {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 96px 32px;\n  }\n  .iftpl-widget .indgrid-head {\n    text-align: center;\n    max-width: 760px;\n    margin: 0 auto 48px;\n  }\n  .iftpl-widget .indgrid-head h2 {\n    font-size: clamp(28px, 4vw, 44px);\n    line-height: 1.1;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    color: var(--ink);\n    margin-bottom: 16px;\n  }\n  .iftpl-widget .indgrid-head p {\n    font-size: 16.5px;\n    line-height: 1.6;\n    color: var(--ink-soft);\n    margin: 0;\n  }\n  .iftpl-widget .indgrid-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n  }\n  .iftpl-widget .indcard {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    background: white;\n    border: 1.5px solid var(--line);\n    border-radius: var(--radius-lg);\n    padding: 17px 20px;\n    transition:\n      border-color 0.2s var(--ease),\n      box-shadow 0.2s var(--ease),\n      transform 0.2s var(--ease);\n  }\n  .iftpl-widget .indcard:hover {\n    border-color: var(--brand);\n    box-shadow: var(--shadow-md);\n    transform: translateY(-2px);\n  }\n  .iftpl-widget .indcard-icon {\n    width: 38px;\n    height: 38px;\n    border-radius: 10px;\n    background: var(--brand-50);\n    color: var(--brand);\n    display: grid;\n    place-items: center;\n    flex-shrink: 0;\n  }\n  .iftpl-widget .indcard-icon svg {\n    width: 20px;\n    height: 20px;\n  }\n  .iftpl-widget .indcard-label {\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--ink);\n    letter-spacing: -0.01em;\n  }\n  .iftpl-widget .indcard-app {\n    grid-column: span 2;\n    background: var(--brand);\n    border-color: var(--brand);\n    box-shadow: var(--shadow-brand);\n  }\n  .iftpl-widget .indcard-app:hover {\n    background: var(--brand-dark);\n    border-color: var(--brand-dark);\n  }\n  .iftpl-widget .indcard-app .indcard-icon {\n    background: rgba(255, 255, 255, 0.16);\n    color: white;\n  }\n  .iftpl-widget .indcard-app .at {\n    display: block;\n    font-size: 15px;\n    font-weight: 800;\n    color: white;\n  }\n  .iftpl-widget .indcard-app .as {\n    display: block;\n    font-size: 13px;\n    color: rgba(255, 255, 255, 0.82);\n    margin-top: 2px;\n  }\n  .iftpl-widget .indcard-app .indcard-arrow {\n    margin-left: auto;\n    color: white;\n    flex-shrink: 0;\n  }\n  @media (max-width: 1024px) {\n    .iftpl-widget .indgrid-grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n    .iftpl-widget .indcard-app {\n      grid-column: span 2;\n    }\n  }\n  @media (max-width: 768px) {\n    .iftpl-widget .indgrid {\n      padding: 56px 16px;\n    }\n  }\n  @media (max-width: 480px) {\n    .iftpl-widget .indgrid-grid {\n      grid-template-columns: 1fr;\n    }\n    .iftpl-widget .indcard-app {\n      grid-column: span 1;\n    }\n  }\n<\/style>\n\n<div class=\"iftpl-widget\" id=\"iftpl-root\">\n  <section class=\"hero\">\n    <div class=\"hero-inner\">\n      <div class=\"hero-grid\">\n        <div>\n          <div class=\"crumbs\">\n            <a href=\"https:\/\/invoicefly.com\/\">Home<\/a>\n            <span class=\"sep\">\/<\/span>\n            <a href=\"https:\/\/invoicefly.com\/free-resources\/\">Free Resources<\/a>\n            <span class=\"sep\">\/<\/span>\n            <a href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/\"\n              >Templates<\/a\n            >\n            <span class=\"sep\">\/<\/span>\n            <span class=\"current\">Invoice Templates<\/span>\n          <\/div>\n          <h1 class=\"hero-h1\">\n            Professional Invoice Templates for\n            <span class=\"hi\">Every Industry<\/span>\n          <\/h1>\n          <p class=\"hero-lead\">\n            Download a free invoice template in PDF, Word, Excel, Google Docs,\n            or Google Sheets. Customize your bill format, add your logo and\n            payment terms, and send professional invoices in minutes.\n          <\/p>\n          <div class=\"hero-ctas\">\n            <a\n              href=\"https:\/\/invoicefly.onelink.me\/AeUs\/qohijf8g\"\n              class=\"btn btn-primary btn-lg download_app\"\n              target=\"_blank\"\n              rel=\"noopener\"\n            >\n              Create Invoice with Invoice Fly App\n              <svg\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n              >\n                <path d=\"M5 12h14M13 5l7 7-7 7\" \/>\n              <\/svg>\n            <\/a>\n            <a href=\"#templates\" class=\"btn btn-outline btn-lg\"\n              >Browse Templates Online<\/a\n            >\n          <\/div>\n          <div class=\"hero-proof\">\n            <div class=\"hero-proof-stars\">\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n              >\n                <path\n                  d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n                \/>\n              <\/svg>\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n              >\n                <path\n                  d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n                \/>\n              <\/svg>\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n              >\n                <path\n                  d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n                \/>\n              <\/svg>\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n              >\n                <path\n                  d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n                \/>\n              <\/svg>\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n              >\n                <path\n                  d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n                \/>\n              <\/svg>\n            <\/div>\n            <div class=\"hero-proof-text\">\n              <strong>4.8<\/strong> from <strong>2,400+<\/strong> contractors\n            <\/div>\n            <div class=\"hero-proof-sep\"><\/div>\n            <div class=\"hero-proof-text\">\n              <strong>12,000+<\/strong> contractors trust Invoice Fly\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"hero-visual\">\n          <div class=\"hero-stack\">\n            <div class=\"hero-doc hero-doc-1\">\n              <img\n                src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Beige-Invoice-Template-.png\"\n                alt=\"Minimal Beige Invoice Template\"\n                loading=\"lazy\"\n                decoding=\"async\"\n              \/>\n            <\/div>\n            <div class=\"hero-doc hero-doc-2\">\n              <img\n                src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Blue-Geometric-Invoice-Template.png\"\n                alt=\"Minimal Blue Geometric Invoice Template\"\n                fetchpriority=\"high\"\n                decoding=\"async\"\n              \/>\n            <\/div>\n            <div class=\"hero-doc hero-doc-3\">\n              <img\n                src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Forest-Green-Invoice-Template.png\"\n                alt=\"Classic Forest Green Invoice Template\"\n                loading=\"lazy\"\n                decoding=\"async\"\n              \/>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"trades\" id=\"trades\">\n    <div class=\"trades-carousel\">\n      <button\n        type=\"button\"\n        class=\"trades-nav prev\"\n        aria-label=\"Scroll left\"\n        hidden\n      >\n        <svg\n          width=\"22\"\n          height=\"22\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.4\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <polyline points=\"15 18 9 12 15 6\" \/>\n        <\/svg>\n      <\/button>\n      <div class=\"trades-grid\" id=\"iftpl-trades\"><\/div>\n      <button type=\"button\" class=\"trades-nav next\" aria-label=\"Scroll right\">\n        <svg\n          width=\"22\"\n          height=\"22\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.4\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <polyline points=\"9 18 15 12 9 6\" \/>\n        <\/svg>\n      <\/button>\n    <\/div>\n  <\/section>\n\n  <div class=\"gallery-section\">\n    <div class=\"sticky-bar\" id=\"iftpl-sticky-bar\">\n      <div class=\"sticky-bar-inner\">\n        <div class=\"toolbar-wrap\" id=\"templates\">\n          <div class=\"toolbar\">\n            <div class=\"tb-filter tb-filter-type\" data-filter=\"doctype\">\n              <button type=\"button\" class=\"tb-filter-btn\">\n                <span>Invoice Templates<\/span>\n                <svg\n                  class=\"caret\"\n                  width=\"10\"\n                  height=\"10\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2.5\"\n                >\n                  <polyline points=\"6 9 12 15 18 9\" \/>\n                <\/svg>\n              <\/button>\n              <div class=\"tb-dropdown\">\n                <div class=\"tb-mobile-head\">\n                  <h4>Templates<\/h4>\n                  <button\n                    type=\"button\"\n                    class=\"tb-mobile-close\"\n                    aria-label=\"Close\"\n                  >\n                    \u2715\n                  <\/button>\n                <\/div>\n                <div class=\"tb-dropdown-title\">Template type<\/div>\n                <div class=\"tb-options\">\n                  <a\n                    href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/invoice-templates\/\"\n                    class=\"tb-option on\"\n                    >Invoice Templates<\/a\n                  >\n                  <a\n                    href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/estimate-templates\/\"\n                    class=\"tb-option\"\n                    >Estimate Templates<\/a\n                  >\n                  <a\n                    href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/quote-templates\/\"\n                    class=\"tb-option\"\n                    >Quote Templates<\/a\n                  >\n                  <a\n                    href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/receipt-templates\/\"\n                    class=\"tb-option\"\n                    >Receipt Templates<\/a\n                  >\n                  <a\n                    href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/bill-templates\/\"\n                    class=\"tb-option\"\n                    >Bill Templates<\/a\n                  >\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"tb-search\">\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              >\n                <circle cx=\"11\" cy=\"11\" r=\"8\" \/>\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" \/>\n              <\/svg>\n              <input\n                type=\"text\"\n                id=\"iftpl-search\"\n                placeholder=\"Search 33 free invoice templates...\"\n              \/>\n            <\/div>\n            <div class=\"tb-filter\" data-filter=\"style\">\n              <button type=\"button\" class=\"tb-filter-btn\">\n                <span>Style<\/span>\n                <span class=\"count\" style=\"display: none\">0<\/span>\n                <svg\n                  class=\"caret\"\n                  width=\"10\"\n                  height=\"10\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2.5\"\n                >\n                  <polyline points=\"6 9 12 15 18 9\" \/>\n                <\/svg>\n              <\/button>\n              <div class=\"tb-dropdown\">\n                <div class=\"tb-mobile-head\">\n                  <h4>Style<\/h4>\n                  <button\n                    type=\"button\"\n                    class=\"tb-mobile-close\"\n                    aria-label=\"Close\"\n                  >\n                    \u2715\n                  <\/button>\n                <\/div>\n                <div class=\"tb-dropdown-title\">Style<\/div>\n                <div class=\"tb-options\" data-options=\"style\"><\/div>\n                <div class=\"tb-dropdown-foot\">\n                  <button type=\"button\" class=\"tb-clear\">Clear<\/button>\n                  <button type=\"button\" class=\"tb-apply\">Done<\/button>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"tb-filter\" data-filter=\"color\">\n              <button type=\"button\" class=\"tb-filter-btn\">\n                <span>Color<\/span>\n                <span class=\"count\" style=\"display: none\">0<\/span>\n                <svg\n                  class=\"caret\"\n                  width=\"10\"\n                  height=\"10\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2.5\"\n                >\n                  <polyline points=\"6 9 12 15 18 9\" \/>\n                <\/svg>\n              <\/button>\n              <div class=\"tb-dropdown\">\n                <div class=\"tb-mobile-head\">\n                  <h4>Color<\/h4>\n                  <button\n                    type=\"button\"\n                    class=\"tb-mobile-close\"\n                    aria-label=\"Close\"\n                  >\n                    \u2715\n                  <\/button>\n                <\/div>\n                <div class=\"tb-dropdown-title\">Color<\/div>\n                <div class=\"tb-options\" data-options=\"color\"><\/div>\n                <div class=\"tb-dropdown-foot\">\n                  <button type=\"button\" class=\"tb-clear\">Clear<\/button>\n                  <button type=\"button\" class=\"tb-apply\">Done<\/button>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"tb-filter\" data-filter=\"format\">\n              <button type=\"button\" class=\"tb-filter-btn\">\n                <span>Format<\/span>\n                <span class=\"count\" style=\"display: none\">0<\/span>\n                <svg\n                  class=\"caret\"\n                  width=\"10\"\n                  height=\"10\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2.5\"\n                >\n                  <polyline points=\"6 9 12 15 18 9\" \/>\n                <\/svg>\n              <\/button>\n              <div class=\"tb-dropdown\">\n                <div class=\"tb-mobile-head\">\n                  <h4>Format<\/h4>\n                  <button\n                    type=\"button\"\n                    class=\"tb-mobile-close\"\n                    aria-label=\"Close\"\n                  >\n                    \u2715\n                  <\/button>\n                <\/div>\n                <div class=\"tb-dropdown-title\">Format<\/div>\n                <div class=\"tb-options\" data-options=\"format\"><\/div>\n                <div class=\"tb-dropdown-foot\">\n                  <button type=\"button\" class=\"tb-clear\">Clear<\/button>\n                  <button type=\"button\" class=\"tb-apply\">Done<\/button>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"tb-filter\" data-filter=\"industry\">\n              <button type=\"button\" class=\"tb-filter-btn\">\n                <span>Industry<\/span>\n                <span class=\"count\" style=\"display: none\">0<\/span>\n                <svg\n                  class=\"caret\"\n                  width=\"10\"\n                  height=\"10\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2.5\"\n                >\n                  <polyline points=\"6 9 12 15 18 9\" \/>\n                <\/svg>\n              <\/button>\n              <div class=\"tb-dropdown\">\n                <div class=\"tb-mobile-head\">\n                  <h4>Industry<\/h4>\n                  <button\n                    type=\"button\"\n                    class=\"tb-mobile-close\"\n                    aria-label=\"Close\"\n                  >\n                    \u2715\n                  <\/button>\n                <\/div>\n                <div class=\"tb-dropdown-title\">Industry<\/div>\n                <div class=\"tb-options\" data-options=\"industry\"><\/div>\n                <div class=\"tb-dropdown-foot\">\n                  <button type=\"button\" class=\"tb-clear\">Clear<\/button>\n                  <button type=\"button\" class=\"tb-apply\">Done<\/button>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"sticky-chips-wrap\" id=\"iftpl-sticky-chips-wrap\">\n          <div class=\"active-filters\" id=\"iftpl-active-filters\"><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"tb-mobile-backdrop\" id=\"iftpl-tb-backdrop\"><\/div>\n\n    <section class=\"gallery\">\n      <div class=\"template-grid\" id=\"iftpl-grid\"><\/div>\n      <div class=\"gallery-head\">\n        <div class=\"gallery-count\">\n          Showing <strong id=\"iftpl-shown\">33<\/strong> of\n          <strong id=\"iftpl-total\">33<\/strong> templates\n        <\/div>\n      <\/div>\n    <\/section>\n  <\/div>\n\n  <section class=\"stats\">\n    <div class=\"stats-inner\">\n      <div class=\"stats-head\">\n        <div class=\"stats-tag\">\u2014 Trusted by the industries<\/div>\n        <h2>Free Invoice Templates Trusted by 125,000+ Businesses<\/h2>\n      <\/div>\n      <div class=\"stats-grid\">\n        <div class=\"stat\">\n          <div class=\"stat-num\">12,000<span class=\"plus\">+<\/span><\/div>\n          <div class=\"stat-label\">Active contractors<\/div>\n        <\/div>\n        <div class=\"stat\">\n          <div class=\"stat-num\">$2.4<span class=\"plus\">B+<\/span><\/div>\n          <div class=\"stat-label\">Invoiced last year<\/div>\n        <\/div>\n        <div class=\"stat\">\n          <div class=\"stat-num\">4.8<span class=\"plus\">\u2605<\/span><\/div>\n          <div class=\"stat-label\">App Store rating<\/div>\n        <\/div>\n        <div class=\"stat\">\n          <div class=\"stat-num\">22<span class=\"plus\">+<\/span><\/div>\n          <div class=\"stat-label\">Industries covered<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== INVOICE TEMPLATES BY INDUSTRY ==================== -->\n\n\n  <!-- ==================== TEMPLATES BY FORMAT ==================== -->\n\n\n  <section class=\"how\">\n    <div class=\"how-head\">\n      <div class=\"how-tag\">\u2014 How it works<\/div>\n      <h2>Create an Invoice, Send It, Get Paid<\/h2>\n      <p>\n        Download a free invoice template, add your logo, services, and pricing,\n        then send it to your client. Choose from Excel, Microsoft Word, PDF,\n        Google Docs, or Google Sheets and customize the bill format to match\n        your business.\n      <\/p>\n    <\/div>\n    <div class=\"how-grid\">\n      <div class=\"how-step\">\n        <div class=\"how-step-top\">\n          <div class=\"how-step-icon\">\n            <svg\n              width=\"28\"\n              height=\"28\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\n              \/>\n              <polyline points=\"14 2 14 8 20 8\" \/>\n              <line x1=\"9\" y1=\"13\" x2=\"15\" y2=\"13\" \/>\n              <line x1=\"9\" y1=\"17\" x2=\"15\" y2=\"17\" \/>\n            <\/svg>\n          <\/div>\n          <div class=\"how-step-num\">Step 01<\/div>\n        <\/div>\n        <h3 class=\"how-step-title\">Pick a template<\/h3>\n        <p class=\"how-step-text\">\n          Browse free invoice templates by industry, style, or format. Whether\n          you need a construction invoice template, printable bill template, or\n          professional billing template, you'll find a design that fits your\n          business.\n        <\/p>\n        <div class=\"how-step-time\">Takes 15 seconds<\/div>\n      <\/div>\n      <div class=\"how-step\">\n        <div class=\"how-step-top\">\n          <div class=\"how-step-icon\">\n            <svg\n              width=\"28\"\n              height=\"28\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"\n              \/>\n              <path\n                d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"\n              \/>\n            <\/svg>\n          <\/div>\n          <div class=\"how-step-num\">Step 02<\/div>\n        <\/div>\n        <h3 class=\"how-step-title\">Bill the job<\/h3>\n        <p class=\"how-step-text\">\n          Add your business details, client information, services, pricing, and\n          payment terms. Every invoice template can be customized in Excel,\n          Microsoft Word, Google Docs, or Google Sheets to match your preferred\n          bill format.\n        <\/p>\n        <div class=\"how-step-time\">Takes 30 seconds<\/div>\n      <\/div>\n      <div class=\"how-step\">\n        <div class=\"how-step-top\">\n          <div class=\"how-step-icon\">\n            <svg\n              width=\"28\"\n              height=\"28\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\" \/>\n              <polygon points=\"22 2 15 22 11 13 2 9 22 2\" \/>\n            <\/svg>\n          <\/div>\n          <div class=\"how-step-num\">Step 03<\/div>\n        <\/div>\n        <h3 class=\"how-step-title\">Download, Send &amp; Get Paid<\/h3>\n        <p class=\"how-step-text\">\n          Download your completed invoice as a printable PDF, Excel spreadsheet,\n          or Word document. Send it digitally or print it out and get paid\n          faster with a professional invoice.\n        <\/p>\n        <div class=\"how-step-time\">Takes 15 seconds<\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"key-sections\">\n    <div class=\"key-sections-inner\">\n      <div class=\"key-sections-head\">\n        <h2>8 Must-Have Sections in Every Invoice Template<\/h2>\n        <p>\n          Whether you're creating invoices for construction projects, freelance\n          work, or service jobs, the right invoice template helps prevent\n          confusion and speeds up payment. No matter if you're working in\n          Microsoft Excel, Microsoft Word, Google Docs, or PDF format, these are\n          the essential sections every professional billing template should\n          include.\n        <\/p>\n      <\/div>\n      <div class=\"key-sections-layout\">\n        <div class=\"ks-items\">\n          <div class=\"ks-item\">\n            <div class=\"ks-num\">1<\/div>\n            <strong>Invoice Header<\/strong>\n            <span\n              >Start with a clear invoice title at the top of your document.\n              This instantly tells the client it is an invoice, not an invoice\n              or receipt.<\/span\n            >\n          <\/div>\n          <div class=\"ks-item\">\n            <div class=\"ks-num\">2<\/div>\n            <strong>Invoice number and dates<\/strong>\n            <span\n              >Include a unique invoice number, issue date, and validity or due\n              date so both you and your client can track the invoice\n              easily.<\/span\n            >\n          <\/div>\n          <div class=\"ks-item\">\n            <div class=\"ks-num\">3<\/div>\n            <strong>Client and project details<\/strong>\n            <span\n              >Add the bill-to and ship-to details, plus the client's name,\n              address, and contact information so the invoice is properly\n              assigned.<\/span\n            >\n          <\/div>\n          <div class=\"ks-item\">\n            <div class=\"ks-num\">4<\/div>\n            <strong>Description of services or products<\/strong>\n            <span\n              >List the items, services, or scope of work with clear\n              descriptions so the client understands exactly what is being\n              invoiced.<\/span\n            >\n          <\/div>\n        <\/div>\n        <div class=\"ks-doc\">\n          <img\n            src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/key-section-invoice-e1772206084159.png\"\n            alt=\"Invoice template example\"\n            loading=\"lazy\"\n            decoding=\"async\"\n          \/>\n        <\/div>\n        <div class=\"ks-items\">\n          <div class=\"ks-item\">\n            <div class=\"ks-num\">5<\/div>\n            <strong>Quantities, unit prices, and amounts<\/strong>\n            <span\n              >Show quantities, unit prices, and line totals for each item so\n              pricing is transparent and easy to review.<\/span\n            >\n          <\/div>\n          <div class=\"ks-item\">\n            <div class=\"ks-num\">6<\/div>\n            <strong>Subtotal, taxes, discounts, and shipping<\/strong>\n            <span\n              >Include the cost breakdown clearly. The invoice should show\n              subtotal, tax, discount, shipping, and the total invoice\n              amount.<\/span\n            >\n          <\/div>\n          <div class=\"ks-item\">\n            <div class=\"ks-num\">7<\/div>\n            <strong>Terms and conditions<\/strong>\n            <span\n              >Use this section for notes, scope limitations, invoice validity,\n              and any important assumptions before the client approves the\n              work.<\/span\n            >\n          <\/div>\n          <div class=\"ks-item\">\n            <div class=\"ks-num\">8<\/div>\n            <strong>Payment terms and total invoice<\/strong>\n            <span\n              >Add payment terms such as deposit requirements, milestones, or\n              completion terms, and clearly highlight the final total\n              invoice.<\/span\n            >\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"features\">\n    <div class=\"features-inner\">\n      <div class=\"features-content\">\n        <div class=\"features-tag\">\u2014 Made for the field<\/div>\n        <h2 class=\"features-h2\">\n          More Than a Free Invoice Template, A Real Billing App\n        <\/h2>\n        <p class=\"features-lead\">\n          A free invoice template gets you started. Invoice Fly's billing app\n          helps you save time, get paid faster, and stay organized as your\n          business grows. With Invoice Fly, you get both.\n        <\/p>\n        <div class=\"features-list\">\n          <div class=\"feature-item\">\n            <div class=\"feature-icon\">\n              <svg\n                width=\"18\"\n                height=\"18\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n              >\n                <polyline points=\"20 6 9 17 4 12\" \/>\n              <\/svg>\n            <\/div>\n            <div class=\"feature-text\">\n              <strong>Get Paid 3x Faster<\/strong>\n              <span\n                >Accept card, ACH, and online payments directly from your\n                invoice so clients can pay as soon as they receive it with no\n                third party apps involved.<\/span\n              >\n            <\/div>\n          <\/div>\n          <div class=\"feature-item\">\n            <div class=\"feature-icon\">\n              <svg\n                width=\"18\"\n                height=\"18\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n              >\n                <polyline points=\"20 6 9 17 4 12\" \/>\n              <\/svg>\n            <\/div>\n            <div class=\"feature-text\">\n              <strong>Automatic Payment Reminders<\/strong>\n              <span\n                >Reduce late payments with friendly reminders sent automatically\n                before and after the due date.<\/span\n              >\n            <\/div>\n          <\/div>\n          <div class=\"feature-item\">\n            <div class=\"feature-icon\">\n              <svg\n                width=\"18\"\n                height=\"18\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n              >\n                <polyline points=\"20 6 9 17 4 12\" \/>\n              <\/svg>\n            <\/div>\n            <div class=\"feature-text\">\n              <strong>Eliminate Costly Tax Mistakes<\/strong>\n              <span\n                >Automatically calculate taxes and totals so every invoice stays\n                accurate and professional.<\/span\n              >\n            <\/div>\n          <\/div>\n          <div class=\"feature-item\">\n            <div class=\"feature-icon\">\n              <svg\n                width=\"18\"\n                height=\"18\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n              >\n                <polyline points=\"20 6 9 17 4 12\" \/>\n              <\/svg>\n            <\/div>\n            <div class=\"feature-text\">\n              <strong>QuickBooks-Ready<\/strong>\n              <span\n                >Sync invoices and payments with QuickBooks or export your\n                records when it's time for bookkeeping, reporting, or tax\n                season.<\/span\n              >\n            <\/div>\n          <\/div>\n        <\/div>\n        <a\n          href=\"https:\/\/invoicefly.onelink.me\/AeUs\/qohijf8g\"\n          class=\"btn btn-primary btn-lg download_app\"\n          target=\"_blank\"\n          rel=\"noopener\"\n        >\n          Download Free Invoice Fly App\n          <svg\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n          >\n            <path d=\"M5 12h14M13 5l7 7-7 7\" \/>\n          <\/svg>\n        <\/a>\n      <\/div>\n      <div class=\"features-visual\">\n        <div class=\"phone-badge phone-badge-1\">\n          <span class=\"ic\"\n            ><svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"3\"\n            >\n              <polyline points=\"20 6 9 17 4 12\" \/><\/svg\n          ><\/span>\n          <span>Signed<\/span>\n        <\/div>\n        <div class=\"phone-badge phone-badge-2\">\n          <span class=\"ic\"\n            ><svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n            >\n              <path\n                d=\"M21 4H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4l-9 5-9-5V6l9 5 9-5v2z\"\n              \/><\/svg\n          ><\/span>\n          <span>Paid<\/span>\n        <\/div>\n        <div class=\"phone\">\n          <img\n            src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2025\/08\/invoice-management-mobile-image.png\"\n            alt=\"InvoiceFly app mockup\"\n            loading=\"lazy\"\n            decoding=\"async\"\n          \/>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"quotes\">\n    <div class=\"quotes-head\">\n      <h2>Real stories from the field.<\/h2>\n      <p>\n        Thousands of contractors use Invoice Fly every day to create\n        professional invoices and manage their work from anywhere.\n      <\/p>\n    <\/div>\n    <div class=\"quotes-grid\">\n      <a\n        class=\"quote\"\n        href=\"https:\/\/www.g2.com\/products\/invoice-fly\/reviews\"\n        target=\"_blank\"\n        rel=\"noopener nofollow\"\n        aria-label=\"Read Invoice Fly reviews on G2\"\n      >\n        <div class=\"quote-stars\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n        <\/div>\n        <p class=\"quote-text\">\n          \"Was using a beat-up Excel template my dad gave me. Switched to\n          Invoice Fly and won three more bids in the first week because my\n          invoices actually looked professional.\"\n        <\/p>\n        <div class=\"quote-author\">\n          <div class=\"quote-avatar\">MR<\/div>\n          <div>\n            <div class=\"quote-name\">Mike R.<\/div>\n            <div class=\"quote-role\">Roofing contractor \u00b7 Dallas, TX<\/div>\n          <\/div>\n          <span class=\"quote-source\">\n            <img\n              src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/g2-logo-scaled.webp\"\n              alt=\"G2\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            \/>\n          <\/span>\n        <\/div>\n      <\/a>\n      <a\n        class=\"quote\"\n        href=\"https:\/\/www.capterra.com\/p\/10002692\/Invoice-Fly\/\"\n        target=\"_blank\"\n        rel=\"noopener nofollow\"\n        aria-label=\"Read Invoice Fly reviews on Capterra\"\n      >\n        <div class=\"quote-stars\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n        <\/div>\n        <p class=\"quote-text\">\n          \"Cuts my paperwork time by an hour every day. I write the invoice from\n          the basement, customer signs from their kitchen, I'm on to the next\n          job before lunch.\"\n        <\/p>\n        <div class=\"quote-author\">\n          <div class=\"quote-avatar\">DK<\/div>\n          <div>\n            <div class=\"quote-name\">Dave K.<\/div>\n            <div class=\"quote-role\">Master plumber \u00b7 Cleveland, OH<\/div>\n          <\/div>\n          <span class=\"quote-source\">\n            <img\n              src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/capterra-logo-scaled.webp\"\n              alt=\"Capterra\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            \/>\n          <\/span>\n        <\/div>\n      <\/a>\n      <a\n        class=\"quote\"\n        href=\"https:\/\/www.getapp.com\/sales-software\/a\/invoice-fly-1\/\"\n        target=\"_blank\"\n        rel=\"noopener nofollow\"\n        aria-label=\"Read Invoice Fly reviews on GetApp\"\n      >\n        <div class=\"quote-stars\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            \/>\n          <\/svg>\n        <\/div>\n        <p class=\"quote-text\">\n          \"Sales tax was always a nightmare across counties. Now it just figures\n          it out. My QuickBooks lady actually thanked me for switching.\"\n        <\/p>\n        <div class=\"quote-author\">\n          <div class=\"quote-avatar\">JT<\/div>\n          <div>\n            <div class=\"quote-name\">Jenna T.<\/div>\n            <div class=\"quote-role\">HVAC company owner \u00b7 Phoenix, AZ<\/div>\n          <\/div>\n          <span class=\"quote-source\">\n            <img\n              src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/getapp-logo.webp\"\n              alt=\"GetApp\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            \/>\n          <\/span>\n        <\/div>\n      <\/a>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== TEMPLATE VS SOFTWARE ==================== -->\n  <section class=\"vs\">\n    <div class=\"vs-head\">\n      <span class=\"vs-tag\">Template vs App<\/span>\n      <h2>Free Invoice Template vs. Invoice Fly Billing App<\/h2>\n      <p>\n        A free invoice template gets the job done. Pick a template, add your\n        details, customize the bill format, and send it off. Whether you're\n        working in an Excel spreadsheet, Word document, Google Docs, Google\n        Sheets, or a printable PDF, you'll have a professional invoice ready in\n        minutes.\n      <\/p>\n      <p>\n        The challenge comes later. More clients. More invoices. More payments to\n        track. More time spent chasing money.\n      <\/p>\n      <p>\n        The <strong>Invoice Fly Billing App<\/strong> takes the same familiar\n        invoice workflow and adds online payments, automatic reminders,\n        recurring billing, and live invoice tracking, so you spend less time on\n        admin and more time running your business.\n      <\/p>\n    <\/div>\n\n    <div class=\"vs-grid\">\n      <div class=\"vs-cell\">\n        <div class=\"vs-card\">\n          <div class=\"vs-icon\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\" \/>\n            <\/svg>\n          <\/div>\n          <h3>Create custom invoices faster<\/h3>\n          <p>\n            Templates require you to manually enter customer information,\n            services, pricing, and taxes every time you create a new invoice.\n            With Invoice Fly, you can save customer details, service\n            descriptions, rates, and tax settings to generate professional\n            invoices in minutes.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"vs-cell\">\n        <div class=\"vs-card\">\n          <div class=\"vs-icon\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\" \/>\n              <polygon points=\"22 2 15 22 11 13 2 9 22 2\" \/>\n            <\/svg>\n          <\/div>\n          <h3>Send and track invoices in one place<\/h3>\n          <p>\n            Instead of downloading PDFs and manually following up with\n            customers, Invoice Fly allows you to send invoices directly to\n            clients and track their status. See when invoices are sent, viewed,\n            paid, or overdue so you always know where each payment stands.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"vs-cell\">\n        <div class=\"vs-card\">\n          <div class=\"vs-icon\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <polyline points=\"23 4 23 10 17 10\" \/>\n              <polyline points=\"1 20 1 14 7 14\" \/>\n              <path\n                d=\"M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15\"\n              \/>\n            <\/svg>\n          <\/div>\n          <h3>Accept payments and recurring billing<\/h3>\n          <p>\n            No need to chase money manually. Invoice Fly lets clients pay online\n            straight from the invoice, and you can set up recurring billing in a\n            single click, saving time and getting you paid faster.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"vs-cell\">\n        <div class=\"vs-card\">\n          <div class=\"vs-icon\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" \/>\n              <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" \/>\n              <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" \/>\n              <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" \/>\n            <\/svg>\n          <\/div>\n          <h3>Manage your entire workflow from one platform<\/h3>\n          <p>\n            Keep invoices, quotes, customers, payments, and business records\n            organized in one place. By centralizing your workflow, Invoice Fly\n            helps you stay productive, improve visibility across projects, and\n            spend less time on administrative tasks.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== AI INVOICE GENERATOR ==================== -->\n  <section class=\"aigen\">\n    <div class=\"aigen-inner\">\n      <div class=\"aigen-text\">\n        <span class=\"aigen-tag\">\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 2l1.6 5.2L19 9l-5.4 1.8L12 16l-1.6-5.2L5 9l5.4-1.8L12 2z\"\n            \/>\n          <\/svg>\n          AI-Powered\n        <\/span>\n        <h2>Try Our Free Invoice Generator. No Template Needed<\/h2>\n        <p>\n          Skip the Excel sheet and Word document entirely. The Invoice Fly\n          invoice generator turns \"I need an invoice template\" into a finished,\n          professional invoice in under 60 seconds.\n        <\/p>\n        <p>\n          Just enter your client details, scope of work, pricing, and payment\n          terms. Our generator automatically handles sales tax, totals,\n          discounts, and Net 30 due dates, then creates a clean, branded PDF\n          that's ready to send, print, or download.\n        <\/p>\n        <p>\n          The Invoice Fly Billing App takes the same familiar invoice workflow\n          and adds online payments, automatic reminders, recurring billing, and\n          live invoice tracking, so you spend less time on admin and more time\n          running your business.\n        <\/p>\n        <ul class=\"aigen-list\">\n          <li>\n            <span\n              ><svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"20 6 9 17 4 12\" \/><\/svg\n            ><\/span>\n            Create invoices online instantly\n          <\/li>\n          <li>\n            <span\n              ><svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"20 6 9 17 4 12\" \/><\/svg\n            ><\/span>\n            Autofill invoice details with AI\n          <\/li>\n          <li>\n            <span\n              ><svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"20 6 9 17 4 12\" \/><\/svg\n            ><\/span>\n            Add your logo and branding\n          <\/li>\n          <li>\n            <span\n              ><svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"20 6 9 17 4 12\" \/><\/svg\n            ><\/span>\n            Automatically calculate taxes and totals\n          <\/li>\n          <li>\n            <span\n              ><svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"20 6 9 17 4 12\" \/><\/svg\n            ><\/span>\n            Download professional PDF invoices\n          <\/li>\n          <li>\n            <span\n              ><svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"20 6 9 17 4 12\" \/><\/svg\n            ><\/span>\n            Send invoices directly to customers\n          <\/li>\n        <\/ul>\n        <a\n          href=\"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/\"\n          class=\"btn btn-primary btn-lg\"\n        >\n          Try the Free Invoice Generator \u2192\n        <\/a>\n      <\/div>\n\n      <div class=\"aigen-visual\">\n        <div class=\"aigen-mock\">\n          <div class=\"aigen-mock-head\">\n            <div class=\"aigen-logo\"><\/div>\n            <div class=\"aigen-docid\">\n              Invoice\n              <b>#EST-0042<\/b>\n            <\/div>\n          <\/div>\n\n          <div class=\"aigen-field\">\n            <div class=\"aigen-field-label\">Bill to<\/div>\n            <div class=\"aigen-bar\" style=\"width: 64%\"><\/div>\n          <\/div>\n          <div class=\"aigen-field\">\n            <div class=\"aigen-field-label\">Services<\/div>\n            <div class=\"aigen-bar is-ai\"><\/div>\n            <div class=\"aigen-bar is-ai\"><\/div>\n          <\/div>\n          <div class=\"aigen-field\">\n            <div class=\"aigen-field-label\">Tax &amp; totals<\/div>\n            <div class=\"aigen-bar\" style=\"width: 46%\"><\/div>\n          <\/div>\n\n          <div class=\"aigen-total\">\n            <span>Total<\/span>\n            <b>$4,280.00<\/b>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== BEST PRACTICES ==================== -->\n  <!-- ==================== INVOICE TEMPLATES BY INDUSTRY ==================== -->\n  <section class=\"indgrid\">\n    <div class=\"indgrid-head\">\n      <h2>Free Invoice Templates by Industry<\/h2>\n      <p>\n        Every template below comes pre-loaded with the right line items and\n        payment terms for your trade. No starting from scratch - just open, fill\n        in your details, and send.\n      <\/p>\n    <\/div>\n    <div class=\"indgrid-grid\">\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/auto-repair-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2\"\/><circle cx=\"7\" cy=\"17\" r=\"2\"\/><path d=\"M9 17h6\"\/><circle cx=\"17\" cy=\"17\" r=\"2\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Auto Repair Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/business-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"20\" height=\"14\" x=\"2\" y=\"7\" rx=\"2\"\/><path d=\"M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Business Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/catering-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 11h18\"\/><path d=\"M12 11a8 8 0 0 1 8 8H4a8 8 0 0 1 8-8z\"\/><path d=\"M12 4v3\"\/><path d=\"M4 19h16\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Catering Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/cleaner-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Cleaning Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/construction-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5\"\/><path d=\"M14 6a6 6 0 0 1 6 6v3\"\/><path d=\"M4 15v-3a6 6 0 0 1 6-6\"\/><path d=\"M2 15h20a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Construction Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/consulting-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Consulting Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/contractor-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 6a2 2 0 0 1 1.414.586l4 4A2 2 0 0 1 22 12v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 .586-1.414l4-4A2 2 0 0 1 8 6z\"\/><path d=\"M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2\"\/><path d=\"M2 14h20\"\/><path d=\"M16 12v4M8 12v4\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Contractor Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/electrical-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Electrical Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/freelance-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Freelance Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/handyman-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Handyman Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/landscaping-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 20h10\"\/><path d=\"M10 20c5.5-2.5.8-6.4 3-10\"\/><path d=\"M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z\"\/><path d=\"M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Landscaping Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/lawn-care-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"\/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Lawn Care Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/mechanic-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Mechanic Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/painting-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"16\" height=\"6\" x=\"2\" y=\"2\" rx=\"2\"\/><path d=\"M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V5\"\/><rect width=\"4\" height=\"6\" x=\"8\" y=\"16\" rx=\"1\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Painting Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/photography-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z\"\/><circle cx=\"12\" cy=\"13\" r=\"3\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Photography Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/plumbing-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Plumbing Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/property-management-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"\/><path d=\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Property Management<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/roofing-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"\/><path d=\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Roofing Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/self-employed-cleaner-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"\/><line x1=\"9\" x2=\"9.01\" y1=\"9\" y2=\"9\"\/><line x1=\"15\" x2=\"15.01\" y1=\"9\" y2=\"9\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Self-Employed Cleaner<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/therapy-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Therapy Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/tree-removal-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z\"\/><path d=\"M12 22v-3\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Tree Removal Invoice<\/span>\n      <\/a>\n      <a class=\"indcard\" href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/trucking-invoice-template\/\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2\"\/><path d=\"M15 18H9\"\/><path d=\"M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14\"\/><circle cx=\"7\" cy=\"18\" r=\"2\"\/><circle cx=\"17\" cy=\"18\" r=\"2\"\/><\/svg><\/span>\n        <span class=\"indcard-label\">Trucking Invoice<\/span>\n      <\/a>\n      <a class=\"indcard indcard-app download_app\" href=\"https:\/\/invoicefly.onelink.me\/AeUs\/qohijf8g\" target=\"_blank\" rel=\"noopener\">\n        <span class=\"indcard-icon\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\"><polygon points=\"6 4 20 12 6 20 6 4\"\/><\/svg><\/span>\n        <span>\n          <span class=\"at\">Get the free app<\/span>\n          <span class=\"as\">Create, send &amp; track invoices in the app \u00b7 125,000+ pros<\/span>\n        <\/span>\n        <span class=\"indcard-arrow\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\n      <\/a>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== MORE TEMPLATE TYPES ==================== -->\n  <section class=\"tplfmt\">\n    <div class=\"tpl-divider\">\n      <span>Or download a free template by format<\/span>\n    <\/div>\n\n    <div class=\"tpl-grid\">\n      <a\n        href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/free-invoice-template-pdf\/\"\n        class=\"tpl-card\"\n      >\n        <div class=\"tpl-icon tpl-pdf\">\n          <svg\n            viewBox=\"0 0 56 54\"\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n            width=\"32\"\n            height=\"32\"\n          >\n            <path\n              d=\"M9.9 0h36.2C51.6 0 56 4.4 56 9.9v34.2c0 5.5-4.4 9.9-9.9 9.9H9.9C4.4 54 0 49.6 0 44.1V9.9C0 4.4 4.4 0 9.9 0z\"\n              fill=\"#fa0f00\"\n            \/>\n            <path\n              d=\"M45 31.2c-2.6-2.7-9.7-1.6-11.4-1.4-2.5-2.4-4.2-5.3-4.8-6.3.9-2.7 1.5-5.4 1.6-8.3 0-2.5-1-5.2-3.8-5.2-1 0-1.9.6-2.4 1.4-1.2 2.1-.7 6.3 1.2 10.6-1.1 3.1-2.1 6.1-4.9 11.4-2.9 1.2-9 4-9.5 7-.2.9.1 1.8.8 2.5.7.6 1.6.9 2.5.9 3.7 0 7.3-5.1 9.8-9.4 2.1-.7 5.4-1.7 8.7-2.3 3.9 3.4 7.3 3.9 9.1 3.9 2.4 0 3.3-1 3.6-1.9.5-1 .2-2.1-.5-2.9zm-2.5 1.7c-.1.7-1 1.4-2.6 1-1.9-.5-3.6-1.4-5.1-2.6 1.3-.2 4.2-.5 6.3-.1.8.2 1.6.7 1.4 1.7zM25.8 12.3c.2-.3.5-.5.8-.5.9 0 1.1 1.1 1.1 2-.1 2.1-.5 4.2-1.2 6.2-1.5-4-1.2-6.8-.7-7.7zm-.2 19.4c.8-1.6 1.9-4.4 2.3-5.6.9 1.5 2.4 3.3 3.2 4.1 0 .1-3.1.7-5.5 1.5zm-5.9 4c-2.3 3.8-4.7 6.2-6 6.2-.2 0-.4-.1-.6-.2-.3-.2-.4-.5-.3-.9.3-1.4 2.9-3.3 6.9-5.1z\"\n              fill=\"#fff\"\n            \/>\n          <\/svg>\n        <\/div>\n        <div class=\"tpl-name\">PDF Invoice Template<\/div>\n        <div class=\"tpl-hint\">Print-ready \u00b7 Free download<\/div>\n      <\/a>\n\n      <a\n        href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/invoice-template-microsoft-word\/\"\n        class=\"tpl-card\"\n      >\n        <div class=\"tpl-icon tpl-word\">\n          <svg\n            viewBox=\"-0.12979372698077785 0 32.12979372698078 32\"\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n            width=\"32\"\n            height=\"32\"\n          >\n            <path\n              d=\"M30.667 2H9.333A1.333 1.333 0 0 0 8 3.333V9l12 3.5L32 9V3.333A1.333 1.333 0 0 0 30.667 2z\"\n              fill=\"#41a5ee\"\n            \/>\n            <path d=\"M32 9H8v7l12 3.5L32 16z\" fill=\"#2b7cd3\" \/>\n            <path d=\"M32 16H8v7l12 3.5L32 23z\" fill=\"#185abd\" \/>\n            <path\n              d=\"M32 23H8v5.667A1.333 1.333 0 0 0 9.333 30h21.334A1.333 1.333 0 0 0 32 28.667z\"\n              fill=\"#103f91\"\n            \/>\n            <path\n              d=\"M16.667 7H8v19h8.667A1.337 1.337 0 0 0 18 24.667V8.333A1.337 1.337 0 0 0 16.667 7z\"\n              opacity=\".1\"\n            \/>\n            <path\n              d=\"M15.667 8H8v19h7.667A1.337 1.337 0 0 0 17 25.667V9.333A1.337 1.337 0 0 0 15.667 8z\"\n              opacity=\".2\"\n            \/>\n            <path\n              d=\"M15.667 8H8v17h7.667A1.337 1.337 0 0 0 17 23.667V9.333A1.337 1.337 0 0 0 15.667 8z\"\n              opacity=\".2\"\n            \/>\n            <path\n              d=\"M14.667 8H8v17h6.667A1.337 1.337 0 0 0 16 23.667V9.333A1.337 1.337 0 0 0 14.667 8z\"\n              opacity=\".2\"\n            \/>\n            <path\n              d=\"M1.333 8h13.334A1.333 1.333 0 0 1 16 9.333v13.334A1.333 1.333 0 0 1 14.667 24H1.333A1.333 1.333 0 0 1 0 22.667V9.333A1.333 1.333 0 0 1 1.333 8z\"\n              fill=\"#185abd\"\n            \/>\n            <path\n              d=\"M11.95 21h-1.8l-2.1-6.9-2.2 6.9h-1.8l-2-10h1.8l1.4 7 2.1-6.8h1.5l2 6.8 1.4-7h1.7z\"\n              fill=\"#fff\"\n            \/>\n            <path d=\"M0 0h32v32H0z\" fill=\"none\" \/>\n          <\/svg>\n        <\/div>\n        <div class=\"tpl-name\">Word Invoice Template<\/div>\n        <div class=\"tpl-hint\">Fully editable \u00b7 .docx format<\/div>\n      <\/a>\n\n      <a\n        href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/excel-invoice-template\/\"\n        class=\"tpl-card\"\n      >\n        <div class=\"tpl-icon tpl-excel\">\n          <svg\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n            width=\"32\"\n            height=\"32\"\n            viewBox=\"0 0 110.037 107.5\"\n          >\n            <path\n              d=\"M57.55 0h7.425v10c12.513 0 25.025.025 37.537-.038 2.113.087 4.438-.062 6.275 1.2 1.287 1.85 1.138 4.2 1.225 6.325-.062 21.7-.037 43.388-.024 65.075-.062 3.638.337 7.35-.425 10.938-.5 2.6-3.625 2.662-5.713 2.75-12.95.037-25.912-.025-38.875 0v11.25h-7.763c-19.05-3.463-38.138-6.662-57.212-10V10.013C19.188 6.675 38.375 3.388 57.55 0z\"\n              fill=\"#207245\"\n            \/>\n            <path\n              d=\"M64.975 13.75h41.25V92.5h-41.25V85h10v-8.75h-10v-5h10V62.5h-10v-5h10v-8.75h-10v-5h10V35h-10v-5h10v-8.75h-10v-7.5z\"\n              fill=\"#fff\"\n            \/>\n            <path d=\"M79.975 21.25h17.5V30h-17.5v-8.75z\" fill=\"#207245\" \/>\n            <path\n              d=\"M37.025 32.962c2.825-.2 5.663-.375 8.5-.512a2607.344 2607.344 0 0 1-10.087 20.487c3.438 7 6.949 13.95 10.399 20.95a716.28 716.28 0 0 1-9.024-.575c-2.125-5.213-4.713-10.25-6.238-15.7-1.699 5.075-4.125 9.862-6.074 14.838-2.738-.038-5.476-.15-8.213-.263C19.5 65.9 22.6 59.562 25.912 53.312c-2.812-6.438-5.9-12.75-8.8-19.15 2.75-.163 5.5-.325 8.25-.475 1.862 4.888 3.899 9.712 5.438 14.725 1.649-5.312 4.112-10.312 6.225-15.45z\"\n              fill=\"#fff\"\n            \/>\n            <path\n              d=\"M79.975 35h17.5v8.75h-17.5V35zM79.975 48.75h17.5v8.75h-17.5v-8.75zM79.975 62.5h17.5v8.75h-17.5V62.5zM79.975 76.25h17.5V85h-17.5v-8.75z\"\n              fill=\"#207245\"\n            \/>\n          <\/svg>\n        <\/div>\n        <div class=\"tpl-name\">Excel Invoice Template<\/div>\n        <div class=\"tpl-hint\">Auto-totals included<\/div>\n      <\/a>\n\n      <a\n        href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/google-sheets-invoice-template\/\"\n        class=\"tpl-card\"\n      >\n        <div class=\"tpl-icon tpl-sheets\">\n          <svg\n            viewBox=\"0 0 314.7 428\"\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n            width=\"32\"\n            height=\"32\"\n          >\n            <path d=\"M206 108.7h108.7L206 0z\" fill=\"#188038\" \/>\n            <path\n              d=\"M206 108.7V0H24C10.7 0 0 10.7 0 24v380c0 13.3 10.7 24 24 24h266.7c13.3 0 24-10.7 24-24V108.7z\"\n              fill=\"#34a853\"\n            \/>\n            <path\n              d=\"M60 167.9V315h194.7V167.9zM145.3 291H84v-37.6h61.3zm0-61.5H84v-37.6h61.3zm85.4 61.5h-61.3v-37.6h61.3zm0-61.5h-61.3v-37.6h61.3z\"\n              fill=\"#fff\"\n            \/>\n          <\/svg>\n        <\/div>\n        <div class=\"tpl-name\">Google Sheets Template<\/div>\n        <div class=\"tpl-hint\">Works in your browser<\/div>\n      <\/a>\n\n      <a\n        href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/google-docs-invoice-template\/\"\n        class=\"tpl-card\"\n      >\n        <div class=\"tpl-icon tpl-docs\">\n          <svg\n            version=\"1.1\"\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n            xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"\n            viewBox=\"0 0 1818.2 2500\"\n            width=\"32\"\n            height=\"32\"\n            xml:space=\"preserve\"\n          >\n            <path\n              fill=\"#4285F4\"\n              d=\"M1136.4,0H170.4C79.6,0,0,79.5,0,170.5v2159.1c0,90.9,79.5,170.5,170.5,170.5h1477.3c90.9,0,170.5-79.5,170.5-170.5V681.8l-397.7-284.1L1136.4,0z\"\n            \/>\n            <path\n              fill=\"#F1F1F1\"\n              d=\"M454.5,1818.2h909.1v-113.6H454.6L454.5,1818.2L454.5,1818.2z M454.5,2045.5h681.8v-113.6H454.5V2045.5z M454.5,1250v113.6h909.1V1250H454.5z M454.5,1590.9h909.1v-113.6H454.6L454.5,1590.9L454.5,1590.9z\"\n            \/>\n            <path\n              fill=\"#A1C2FA\"\n              d=\"M1136.4,0v511.4c0,90.9,79.5,170.4,170.4,170.4h511.4L1136.4,0z\"\n            \/>\n          <\/svg>\n        <\/div>\n        <div class=\"tpl-name\">Google Docs Template<\/div>\n        <div class=\"tpl-hint\">Easy to share &amp; edit<\/div>\n      <\/a>\n    <\/div>\n  <\/section>\n\n  <section class=\"more-tpl\">\n    <div class=\"more-tpl-head\">\n      <h2>Specialized Invoice Templates for Every Billing Need<\/h2>\n      <p>\n        Not every business uses the same invoice format. Whether you need a\n        printable invoice template, a blank billing template, or a\n        country-specific invoice format, you'll find ready-to-use templates that\n        can be customized in minutes and downloaded in Word, Excel, Google Docs,\n        or PDF.\n      <\/p>\n    <\/div>\n    <div class=\"more-tpl-grid\">\n      <div class=\"more-tpl-card\">\n        <div class=\"more-tpl-icon\">\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path\n              d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\n            \/>\n            <polyline points=\"14 2 14 8 20 8\" \/>\n          <\/svg>\n        <\/div>\n        <h3>Blank Invoice Template<\/h3>\n        <p>\n          Start with a clean, flexible invoice template and build your own bill\n          format from scratch. Perfect for businesses that want complete control\n          over line items, branding, payment terms, and layout.\n        <\/p>\n        <a\n          class=\"more-tpl-cta\"\n          href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/blank-invoice-template\/\"\n        >\n          Get Blank Invoice Template\n          <svg\n            width=\"15\"\n            height=\"15\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n          >\n            <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" \/>\n            <polyline points=\"12 5 19 12 12 19\" \/>\n          <\/svg>\n        <\/a>\n      <\/div>\n      <div class=\"more-tpl-card\">\n        <div class=\"more-tpl-icon\">\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <polyline points=\"6 9 6 2 18 2 18 9\" \/>\n            <path\n              d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\n            \/>\n            <rect x=\"6\" y=\"14\" width=\"12\" height=\"8\" \/>\n          <\/svg>\n        <\/div>\n        <h3>Printable Invoice Template<\/h3>\n        <p>\n          A printable invoice template designed for clean, professional billing\n          on paper or screen. Download the PDF, fill it out, and email, print,\n          or hand it directly to your customer.\n        <\/p>\n        <a\n          class=\"more-tpl-cta\"\n          href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/printable-invoice-template\/\"\n        >\n          Get Printable Invoice Template\n          <svg\n            width=\"15\"\n            height=\"15\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n          >\n            <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" \/>\n            <polyline points=\"12 5 19 12 12 19\" \/>\n          <\/svg>\n        <\/a>\n      <\/div>\n      <div class=\"more-tpl-card\">\n        <div class=\"more-tpl-icon\">\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" \/>\n            <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\" \/>\n            <path\n              d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\n            \/>\n          <\/svg>\n        <\/div>\n        <h3>Australian Invoice Template<\/h3>\n        <p>\n          A professional invoice template built for Australian businesses.\n          Includes fields for ABN, GST, tax breakdowns, and the information\n          required for compliant business invoicing.\n        <\/p>\n        <a\n          class=\"more-tpl-cta\"\n          href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/free-invoice-templates\/invoice-template-for-australia\/\"\n        >\n          Get Australian Invoice Template\n          <svg\n            width=\"15\"\n            height=\"15\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n          >\n            <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" \/>\n            <polyline points=\"12 5 19 12 12 19\" \/>\n          <\/svg>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== ABOUT INVOICE TEMPLATES ==================== -->\n  <section class=\"about-tpl\">\n    <div class=\"about-tpl-inner\">\n      <div class=\"about-tpl-content\">\n        <span class=\"about-tpl-tag\">- About Invoice Templates<\/span>\n        <h2>Invoice With Confidence with Invoice Fly<\/h2>\n        <p>\n          An invoice is more than a request for payment. It's often the final\n          impression you leave before a customer decides to pay.\n        <\/p>\n        <p>\n          A clear, professional invoice shows clients that every detail matters.\n          It communicates trust, reinforces your brand, and turns completed work\n          into revenue without confusion, delays, or endless back-and-forth\n          emails.\n        <\/p>\n        <p>\n          That's why we created a collection of free invoice templates designed\n          to look professional from the start. Simply add your business details,\n          services, pricing, taxes, and payment terms, then customize the\n          invoice to match your brand and the way you work.\n        <\/p>\n        <p>\n          Whether you prefer Microsoft Excel, Microsoft Word, Google Docs,\n          Google Sheets, or a printable PDF, every invoice template is built to\n          help you spend less time formatting documents and more time running\n          your business.\n        <\/p>\n        <p>\n          <strong\n            >Use a Invoice Fly Invoice template today and see how incredibly\n            easy it is to look stunning on-brand invoices.<\/strong\n          >\n        <\/p>\n        <a\n          href=\"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/\"\n          class=\"btn btn-primary btn-lg\"\n        >\n          Create Free Invoice\n          <svg\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n          >\n            <path d=\"M5 12h14M13 5l7 7-7 7\" \/>\n          <\/svg>\n        <\/a>\n      <\/div>\n      <div class=\"about-tpl-visual\">\n        <div class=\"inv-mock\">\n          <div class=\"inv-mock-head\">\n            <div class=\"inv-mock-logo\"><\/div>\n            <div class=\"inv-mock-id\">\n              <div class=\"lbl\">Invoice<\/div>\n              <div class=\"num\">#INV-2026-014<\/div>\n            <\/div>\n          <\/div>\n          <div class=\"inv-mock-row\">\n            <span class=\"k\">Bill to<\/span>\n            <span class=\"v\">Acme Corp.<\/span>\n          <\/div>\n          <div class=\"inv-mock-row\">\n            <span class=\"k\">Issue date<\/span>\n            <span class=\"v\">Jun 11, 2026<\/span>\n          <\/div>\n          <div class=\"inv-mock-row\">\n            <span class=\"k\">Due date<\/span>\n            <span class=\"v\">Jul 11, 2026<\/span>\n          <\/div>\n          <div class=\"inv-mock-row\">\n            <span class=\"k\">Subtotal<\/span>\n            <span class=\"v\">$3,920.00<\/span>\n          <\/div>\n          <div class=\"inv-mock-row\">\n            <span class=\"k\">Sales tax (8.25%)<\/span>\n            <span class=\"v\">$323.40<\/span>\n          <\/div>\n          <div class=\"inv-mock-total\">\n            <span class=\"k\">Total Due<\/span>\n            <span class=\"v\">$4,243.40<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"faq\">\n    <div class=\"faq-inner\">\n      <div class=\"faq-head\">\n        <h2>Invoice Template FAQs<\/h2>\n        <p>Everything you need to know before you download and send.<\/p>\n      <\/div>\n      <div class=\"faq-list\">\n        <div class=\"faq-item open faq-item-media\">\n          <div class=\"faq-q\">\n            What is an invoice template?<span class=\"faq-icon\"\n              ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/><line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/><\/svg\n            ><\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            An invoice template is a ready-made bill format used to request\n            payment for products or services. Instead of creating an invoice\n            from scratch every time, simply add your business details, pricing,\n            taxes, and payment terms. Invoice Fly offers free invoice templates\n            in Excel, Microsoft Word, Google Docs, Google Sheets, and PDF\n            formats so you can create professional invoices faster.\n            <img\n              class=\"faq-a-img\"\n              src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Light-Sky-blue-Invoice-Template-.png\"\n              alt=\"Minimal Sky Blue Invoice Template example\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            \/>\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Do I need to download software to use these invoice templates?<span class=\"faq-icon\"\n              ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/><line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/><\/svg\n            ><\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            No. You can browse, customize, and download free invoice templates\n            directly from your browser. Templates are available in PDF, Microsoft\n            Word, Excel, Google Docs, and Google Sheets formats, making it easy\n            to work with the tools you already know.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Can I create invoices for freelance work?<span class=\"faq-icon\"\n              ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/><line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/><\/svg\n            ><\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Absolutely. Our free invoice templates are designed for freelancers,\n            consultants, contractors, agencies, and small businesses. Simply\n            customize the template with your services, pricing, branding, and\n            payment terms before sending it to your client.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Can I save my invoice templates for future use?<span class=\"faq-icon\"\n              ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/><line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/><\/svg\n            ><\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Yes. Once you've customized an invoice template, you can save it,\n            reuse it, and update it whenever needed. This helps keep your bill\n            format consistent and makes invoice creation much faster for repeat\n            clients.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Are the invoice templates really free?<span class=\"faq-icon\"\n              ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/><line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/><\/svg\n            ><\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Yes. Every Invoice Fly invoice template is free to download and\n            customize. Choose from Excel spreadsheets, Word documents, Google\n            Docs, Google Sheets, and printable PDF templates at no cost.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Which invoice format should I use?<span class=\"faq-icon\"\n              ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/><line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/><\/svg\n            ><\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            The best invoice format depends on how you work. Excel spreadsheets\n            are ideal for calculations, Word documents are easy to customize,\n            Google Docs and Google Sheets make collaboration simple, and PDF\n            invoices are perfect for sending professional, printable invoices to\n            clients.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Can I customize the invoice template with my logo and branding?<span class=\"faq-icon\"\n              ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/><line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/><\/svg\n            ><\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Absolutely. Add your logo, business name, contact details, colors,\n            payment terms, and other branding elements to create professional\n            invoices that reflect your business and build trust with clients.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Can I use these invoice templates for construction projects?<span class=\"faq-icon\"\n              ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/><line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/><\/svg\n            ><\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Yes. We offer invoice templates designed for construction\n            businesses, contractors, tradespeople, and service professionals.\n            Easily add labor, materials, taxes, project details, and payment\n            schedules to match the way you work.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Can I use these invoice templates for freelance work?<span class=\"faq-icon\"\n              ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/><line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/><\/svg\n            ><\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Absolutely. Whether you're a designer, writer, marketer, developer,\n            photographer, or consultant, our free invoice templates make it easy\n            to bill clients professionally. Customize your invoice with services,\n            project details, pricing, and payment terms, then download or send\n            it in minutes.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            What's the difference between an invoice template and the Invoice Fly app?<span class=\"faq-icon\"\n              ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/><line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/><\/svg\n            ><\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            An invoice template helps you create and download invoices manually.\n            The Invoice Fly app takes things a step further by helping you create\n            invoices, accept payments, send reminders, track invoice status, and\n            manage clients, all from one place.\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"final-cta\">\n    <div class=\"final-cta-wrap\">\n      <div class=\"final-cta-content\">\n        <h2>Stop losing jobs to better-looking invoices.<\/h2>\n        <p>\n          Download Invoice Fly \u2014 free for the first 5 invoices a month, no card\n          required. 12,000+ contractors use it daily.\n        <\/p>\n        <div class=\"final-cta-ctas\">\n          <a\n            href=\"https:\/\/invoicefly.onelink.me\/AeUs\/qohijf8g\"\n            class=\"btn btn-primary btn-lg download_app\"\n            target=\"_blank\"\n            rel=\"noopener\"\n          >\n            Get the free app\n            <svg\n              width=\"14\"\n              height=\"14\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2.5\"\n            >\n              <path d=\"M5 12h14M13 5l7 7-7 7\" \/>\n            <\/svg>\n          <\/a>\n          <a\n            href=\"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/\"\n            class=\"btn btn-outline btn-lg\"\n            >Try the free generator<\/a\n          >\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <div\n    class=\"modal-backdrop\"\n    id=\"iftpl-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-hidden=\"true\"\n  >\n    <div class=\"modal\">\n      <button\n        type=\"button\"\n        class=\"modal-close\"\n        id=\"iftpl-modal-close\"\n        aria-label=\"Close\"\n      >\n        <svg\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\"\n        >\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" \/>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" \/>\n        <\/svg>\n      <\/button>\n      <div class=\"modal-grid\">\n        <div class=\"modal-preview\">\n          <img decoding=\"async\" id=\"iftpl-modal-img\" src=\"\" alt=\"\" loading=\"lazy\" \/>\n        <\/div>\n        <div class=\"modal-body\">\n          <div class=\"modal-tag\">Free download<\/div>\n          <h3 class=\"modal-title\" id=\"iftpl-modal-title\"><\/h3>\n          <p class=\"modal-desc\" id=\"iftpl-modal-desc\"><\/p>\n          <div class=\"modal-section-title\">Pick your format<\/div>\n          <div class=\"modal-formats\" id=\"iftpl-modal-formats\"><\/div>\n          <div class=\"modal-cta-stack\">\n            <a\n              href=\"\"\n              class=\"btn btn-primary\"\n              id=\"iftpl-modal-app\"\n              target=\"_blank\"\n              rel=\"noopener\"\n            >\n              Get the free app\n              <svg\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n              >\n                <path d=\"M5 12h14M13 5l7 7-7 7\" \/>\n              <\/svg>\n            <\/a>\n            <a\n              href=\"\"\n              class=\"btn btn-outline\"\n              id=\"iftpl-modal-generator\"\n              target=\"_blank\"\n              rel=\"noopener\"\n              >Edit online for free \u2192<\/a\n            >\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  (function () {\n    \"use strict\";\n\n    \/\/ ============================================\n    \/\/ INVOICE FLY \u2014 INVOICE TEMPLATES WIDGET v3\n    \/\/ Contractor-focused redesign.\n    \/\/ ============================================\n\n    const TEMPLATES = [\n      {\n        name: \"Minimal Blue Geometric Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"blue\",\n        style: \"minimalist\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Blue-Geometric-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Blue-Geometric-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Blue-Geometric-Invoice-Template-1.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Blue-Geometric-Invoice-Template-1.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1rYSmJhRX3eVNGJmwINzD3kg2kxUnFoB4Lmh2EssUG-U\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1ZUpXC3KlNZ6lEPXIMiVCVFrbEkjTw_rIRL3iZpaXeBk\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=geometricBlue\",\n        industries:\n          \"autorepair business carpentry cleaning concrete construction consulting contractor electrical freelance handyman hvac landscaping\",\n      },\n      {\n        name: \"Classic Black Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"black\",\n        style: \"classic\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Black-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Black-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Black-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Black-Invoice-Template-1.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1ZwbCk5w-aRvsNNum2E5Miak8MKvhKVTj\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1DBQB7FSpSsH_23OSIf8kUCpqc1Opmbrr\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=classicV2Black\",\n        industries:\n          \"business catering cleaning concrete consulting contractor freelance lawncare mechanic painting photography\",\n      },\n      {\n        name: \"Classic Forest Green Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"green\",\n        style: \"classic\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Forest-Green-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Forest-Green-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Forest-Green-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Forest-Green-Invoice-Template-1.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1l0RZFa0Xd23v3eWTrp-dNRyk5KaSqfjP\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/19pmiU6W9BHemIqmwdfAQ20aAjXPumtqZzvuohP4BOZI\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=classicGreen\",\n        industries:\n          \"autorepair carpentry concrete construction electrical handyman hvac landscaping lawncare mechanic plumbing roofing trucking\",\n      },\n      {\n        name: \"Classic Olive Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"green\",\n        style: \"classic\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Olive-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Olive-Invoice-Template-2.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Olive-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Olive-Invoice-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1LNRUcj2eAyUC98pq6nF11oq8EO0BIUnR0XiAgdDnzGw\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1FyxvDzDxaNBUA0BBmVPW_ouMrZpynPxsH-QnrM8c3KI\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=classicV3Olive\",\n        industries:\n          \"catering cleaning concrete consulting contractor freelance painting photography plumbing therapy treeremoval\",\n      },\n      {\n        name: \"Classic Purple Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"purple\",\n        style: \"classic\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Purple-Invoice-Template-3.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Purple-Invoice-Template-3-1.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Purple-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Purple-Invoice-Template-.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1D_7y0ksCpuylBCf93KNpMiKqSuKsVV7xmjN52q3Z4GY\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1WQplDgyRMf7VqaZ1DFPNHBzrQhiysPWde9oi61k3QJk\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=classicPurple\",\n        industries:\n          \"autorepair business carpentry concrete construction electrical freelance handyman hvac mechanic roofing selfemployedcleaner trucking\",\n      },\n      {\n        name: \"Minimal Beige Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"beige\",\n        style: \"minimalist\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Beige-Invoice-Template-.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Beige-Invoice-Template-1.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Beige-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Beige-Invoice-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1vz81uo05N3v6cWWusuH7ApnnyiSUjJcMMZQF1qSzLcQ\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1-LnlCvJrRcBfEZ1n-1FxkB8orc_oeMLDr2mZDIcKJ6w\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=beigeMinimal\",\n        industries:\n          \"business catering consulting lawncare painting photography plumbing propertymanagement therapy treeremoval\",\n      },\n      {\n        name: \"Modern Blue Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"blue\",\n        style: \"modern\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Blue-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Blue-Invoice-Template-1.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Blue-invoice-Template-II.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Blue-Invoice-Template.pdf-2.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1uoWLvXjgm7yZDDUNRS_Al7t5Qngbitmh\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1q-jaPCYoLLoGDEPy7VSucLtoXEuGzwy91mqnLJ7DCOw\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=blueOutline\",\n        industries:\n          \"autorepair carpentry cleaning concrete construction contractor electrical hvac landscaping mechanic roofing selfemployedcleaner trucking\",\n      },\n      {\n        name: \"Classic Red Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"red\",\n        style: \"classic\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Red-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Red-Invoice-Template-1.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Red-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Red-Invoice-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1AbTl8afwexc73Rf9hsffPenMCeOz2KT48ObN8OuSdSI\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1i1E0eUb2-aR4ajq-52Nzb5bSTeS7b9UStyAwWK-Zc10\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=classicV3Red\",\n        industries:\n          \"business carpentry catering freelance handyman hvac lawncare painting photography propertymanagement therapy treeremoval\",\n      },\n      {\n        name: \"Classic Blue Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"blue\",\n        style: \"classic\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Blue-Invoice-Template-2.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Blue-Invoice-Template-2.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Blue-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Blue-Invoice-Template-Sheet.xltx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/15ow8rdA6HIZIFd_6zzpLuH1Epkrs222fSxW_MsQEO9E\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1sEWxB2wDziqq3JSmslt0kWIJRf3XnN47Vxv05cjBTns\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=classicV2Blue\",\n        industries:\n          \"autorepair carpentry concrete construction consulting electrical hvac landscaping mechanic plumbing roofing selfemployedcleaner trucking\",\n      },\n      {\n        name: \"Minimal Azure Geometric Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"blue\",\n        style: \"minimalist\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Azure-Geometric-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Azure-Geometric-Invoice-Template-1.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Azure-Geometric-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Azure-Geometric-Invoice-Template-1.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1rnnTK4r8PHhpJG-UlAfFeJRC8avxheFW\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/11JvYvtNazf2pZY1Id6TFJPR5yTryyRKZ\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=geometricAzure\",\n        industries:\n          \"business carpentry catering cleaning concrete contractor freelance handyman hvac painting photography propertymanagement therapy\",\n      },\n      {\n        name: \"Classic Green & Beige Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"green\",\n        style: \"classic\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Green-Beige-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Green-Beige-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Green-Beige-Invoice-Template-2.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Green-and-Beige-Invoice-Template-.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1btc0hxwsHAJQ9ZoKuoLOZjwampnX6NEo6BSI3lcllts\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1s9GrB2LO7kSSaAg4y35FA9rQiMvIAk9YjGG4dXW2qnA\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=classicV2Green\",\n        industries:\n          \"autorepair carpentry concrete construction consulting electrical freelance hvac lawncare mechanic roofing treeremoval trucking\",\n      },\n      {\n        name: \"Minimal Sky Blue Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"blue\",\n        style: \"minimalist\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Light-Sky-blue-Invoice-Template-.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Light-Sky-blue-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Light-Sky-blue-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Light-Blue-Sky-Invoice-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1dM--h8-j7R0e1GRcSZQimvoR2mVakYO3kdYNtGG7suI\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1W1oUEjoUxQ56-2sl9RpG3wN61T0AaC5BliWRvF0Q_RE\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=lightblueMinimal\",\n        industries:\n          \"business carpentry catering cleaning handyman hvac landscaping painting photography plumbing propertymanagement selfemployedcleaner\",\n      },\n      {\n        name: \"Classic Beige Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"beige\",\n        style: \"classic\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Beige-Brown-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Beige-Brown-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Beige-Brown-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Beige-Brown-Invoice-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/159YT-zFD6I9N9NYKxtb3m_YsZhcVc9lQFqBiE7UAPK8\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/16i_wzN1GAmKoWv7aAnJyIX0v7e7x7dcU5GbgpW2W4qI\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=classicBeige\",\n        industries:\n          \"autorepair concrete consulting contractor electrical freelance hvac mechanic roofing therapy treeremoval trucking\",\n      },\n      {\n        name: \"Modern Black Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"black\",\n        style: \"modern\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Black-Invoice-Template-II-.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Black-Invoice-Template-II-2.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Black-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Black-II-Invoice-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1Nyc4hFGJBx7Y_xxGexjtTlH7powsc02jmTu2IbVGfZc\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1dUwOULWJEG6wln9AWhMyhA1zraBkJDUk8Bn0r870Cdk\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=blackOutline\",\n        industries:\n          \"business carpentry catering cleaning concrete construction handyman hvac landscaping lawncare photography plumbing selfemployedcleaner\",\n      },\n      {\n        name: \"Classic Purplish Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"purple\",\n        style: \"classic\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Purplish-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Purplish-Invoice-Template-1.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Purplish-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Purplish-Invoice-Template-1.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1O2gsEMttOGey1-Iu0Xd6rAB-5yN-1V5F\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1niTMOuDB44Ors8RET4y7HyAie0hh1khx\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=classicV3Purple\",\n        industries:\n          \"autorepair concrete consulting contractor electrical freelance hvac painting propertymanagement roofing therapy trucking\",\n      },\n      {\n        name: \"Minimal Lime Green Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"green\",\n        style: \"minimalist\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Lime-Green-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Lime-Green-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Lime-Green-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-lime-Green-Invoice-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/10qQ45BtIl_g2htFxcSdgyKJRZJqWCe-GCFdlQBQPuXM\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/191qLv3TN36Za9HtWw9yp_gvCcYhLBrt8gUe4jClDB4s\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=limeMinimal\",\n        industries:\n          \"business carpentry catering cleaning concrete construction landscaping lawncare mechanic photography selfemployedcleaner treeremoval\",\n      },\n      {\n        name: \"Minimal Brown Geometric Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"brown\",\n        style: \"minimalist\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Brown-Geometric-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Brown-Geometric-Invoice-Template-1.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Brown-Geometric-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Minimal-Brown-Geometric-Invoice-Sheet.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1utyV0wQqosGzEKtzm66UmGahShjgLRNL9E39f3Mgx5s\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1rJbJpZOwOo4OQBnBl4iY-3Bej9kuriFXM0b51XwJpi4\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=geometricBrown\",\n        industries:\n          \"autorepair carpentry concrete consulting contractor electrical handyman hvac painting plumbing roofing therapy trucking\",\n      },\n      {\n        name: \"Sky Blue Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"blue\",\n        style: \"modern\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Sky-Blue-Invoice-Template-5.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Sky-Blue-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Sky-Blue-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Sky-Blue-invoice-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1-AxFNNnnDslrFE8-ugB9mCISvdvgDWCnXe7abi1p0MM\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1rcsoMsXwa71rT24egdXphwy5cMHCJCOsi2-MFCmn_KU\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"business catering cleaning freelance landscaping lawncare mechanic propertymanagement selfemployedcleaner treeremoval\",\n      },\n      {\n        name: \"Classic Modern Light Lemon Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"yellow\",\n        style: \"classic\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Light-Lemon-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Light-Lemon-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Light-Lemon-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Light-Lemon-Invoice-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1mrI9J4vwvBQDZzu2M58omY7bmmrwSZvDpsI5dYQxBMc\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1792qrZlCq9JW65rz35vjfABi10DSS3Y2bNATYs_Z5wk\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"autorepair carpentry concrete construction consulting contractor electrical handyman hvac photography roofing therapy trucking\",\n      },\n      {\n        name: \"Clean Gradient Blue Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"blue\",\n        style: \"modern\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Gradient-Blue-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Gradient-Blue-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Gradient-Blue-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Gradient-Blue-Invoice-Template-Sheet.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1ASd6d4aBzjaPi2CpfC63l9ihTcW2QpyK\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1J--u2QB_78nqCt8k9n5MjNYsa9mVjHp2CwzvvdNTb-o\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"business catering cleaning freelance landscaping painting plumbing propertymanagement selfemployedcleaner treeremoval\",\n      },\n      {\n        name: \"Blue and Yellow Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"blue\",\n        style: \"minimalist\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Blue-and-Yellow-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Blue-and-Yellow-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Blue-and-Yellow-Invoice-Template-I.docx\",\n        excel: \"\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1fFiX8ht8MAhFv50JaYI9h6WR3ahysRjX\/copy\",\n        sheet: \"\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"autorepair carpentry concrete construction contractor electrical handyman hvac lawncare mechanic painting roofing trucking\",\n      },\n      {\n        name: \"Azure Dark Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"blue\",\n        style: \"modern\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Azure-Dark-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Azure-Dark-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Azure-Dark-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Azure-Dark-Invoice-Template-1.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1gRcPdDJ05kWMF_ae6wK0iNsRrt3V3IaZ\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/19yGOyarLyHMm_Xaw5jTeToXDhqM4K0Ea\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"business catering cleaning consulting freelance photography plumbing propertymanagement therapy treeremoval\",\n      },\n      {\n        name: \"Teal and Yellow Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"teal\",\n        style: \"modern\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/01\/Teal-and-Yellow-Invoice-Template.jpg\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Teal-Yellow-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Teal-Yellow-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Teal-Yellow-Invoice-Template-Sheet.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1wGrDemU2MG2r3DC54_VF_x5HzfqE2fwE37arvvqWr10\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1eR6gBcjdJoCpHndZAytr0yRu2lv6xpf18bMvebgdOUc\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"autorepair carpentry concrete construction electrical handyman hvac landscaping lawncare painting roofing selfemployedcleaner trucking\",\n      },\n      {\n        name: \"Floral Purple Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"purple\",\n        style: \"simple\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Floral-Purple-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Floral-Purple-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Floral-Purple-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Floral-Purple-Invoice-Template-Sheet.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1ooLIoAB_PWqTudYMa5kcq14taCUeYVCnnE-dpTYieWk\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1sWLpzuQp5Y8EhvXEqvyZIW5OzUthvAorOS32LSU2QJE\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"business catering cleaning concrete consulting contractor mechanic photography plumbing propertymanagement therapy\",\n      },\n      {\n        name: \"Modern Soft Peach Invoice template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"orange\",\n        style: \"modern\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Soft-Peach-Invoice-template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Soft-Peach-Invoice-template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Soft-Peach-Invoice-template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Soft-Peach-Invoice-template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1rnxGLDQckCxzk695-BJl5wXuSEBcnd0nWRtT-3EH-ME\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1TUmlhLyfrKwnOWFmtVn4HjMk4tPCx5R7DtrQIjmwlQg\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=modernFrameBeige\",\n        industries:\n          \"autorepair carpentry concrete construction electrical freelance handyman hvac landscaping painting roofing treeremoval trucking\",\n      },\n      {\n        name: \"Artistic Purple Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"purple\",\n        style: \"modern\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Artistic-Purple-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Gradient-Purple-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Artistic-Purple-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Artistic-Purple-Invoice-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1ekOnTO8l1TIsNpMJQj8gHZPT9z0t8fhpvjYgbYwpXJQ\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1qc9aATEdKlOrdESiRVy9NGt4mgE1pBeBGdA_nVH3baA\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"business catering cleaning concrete consulting contractor lawncare mechanic photography propertymanagement selfemployedcleaner\",\n      },\n      {\n        name: \"Clean Red & Pink Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"red\",\n        style: \"modern\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Red-Pink-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Red-Pink-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Red-Pink-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Red-Pink-Invoice-Template-.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1RdH-_AOWk5IN9negJRSqnKCzhpsjSsVLVf9xdra-m9w\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1J1J2diFUXrJcPt8ZHsiwaI_8gj1sfF_Zb82U2HWh1RU\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"autorepair carpentry concrete construction electrical freelance hvac landscaping lawncare painting plumbing therapy trucking\",\n      },\n      {\n        name: \"Modern Teal Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"teal\",\n        style: \"modern\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Teal-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Teal-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Teal-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Teal-Invoice-template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1Uz_oZG6gEWr0nldrCfsKzCL2vKhspgGbMiZkx8eMehQ\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1XzM1b_nLtJM2K599oceBNj7jVIz5SX8ogAxgWcTV0rk\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=modernFrameBlue\",\n        industries:\n          \"business carpentry catering cleaning concrete consulting contractor handyman hvac mechanic roofing selfemployedcleaner treeremoval\",\n      },\n      {\n        name: \"Classic Modern Black Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"black\",\n        style: \"classic\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Modern-Black-Invocie-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Modern-Black-Invocie-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Modern-Black-Invocie-Template-2.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Classic-Modern-Black-Invoice-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1gB5E61Q86HLiLKl4oiJ2HXYVLJOYSaKbXC_mlZtzAHY\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/11Wgvm-Ge3_RztwB3-CN5dp1ySIB3cghlaq5jEVXJrPE\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"autorepair carpentry concrete construction electrical freelance hvac landscaping painting photography plumbing therapy trucking\",\n      },\n      {\n        name: \"Floral Green Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"green\",\n        style: \"simple\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Floral-Green-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Floral-Green-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Floral-Green-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Floral-Green-Invoice-Template-.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1ZIGgP-iKPXUEwVFobDkzsRCWKrdK4--1axf-uFc0juA\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1lsaA0ldKL27izafi7qSOR2ONpOrP2IWH_z-QsMnGBtg\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"business carpentry catering cleaning concrete consulting contractor handyman hvac lawncare mechanic selfemployedcleaner treeremoval\",\n      },\n      {\n        name: \"Blue and Red Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"blue\",\n        style: \"minimalist\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Blue-and-Red-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Blue-and-Red-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Blue-and-Red-Invoice-Template-2.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Blue-and-Red-Invoice-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1o6NDR7lE1B2PATAQHEZ7iHo2fuyTZcpmrZ1-hY3ekjM\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1Vm2jUaX6WRv6MQNeHmay2lGBT5N2x4jTH0b6h_B81zk\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"autorepair carpentry concrete construction electrical freelance handyman hvac lawncare photography plumbing roofing trucking\",\n      },\n      {\n        name: \"Modern Black Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"black\",\n        style: \"modern\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Black-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Black-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Azure-Invoice-Template-1.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Modern-Black-Invoice-Template-Sheet.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1aHdrL2MZHG7INKNl22Ixttgb6bhNLsBM\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1--3Ewvl5vInRZQ8ob6JQHM05HvnBQKr_\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/?theme=modernFrameBlack\",\n        industries:\n          \"business catering cleaning concrete consulting contractor landscaping mechanic painting selfemployedcleaner treeremoval\",\n      },\n      {\n        name: \"Clean Gradient Purple Invoice Template\",\n        desc: \"This classic invoice template allows you to calculate the total price for each item based on its quantity. You can customize the logo and information to your brand.\",\n        color: \"purple\",\n        style: \"modern\",\n        image:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Gradient-Purple-Invoice-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Gradient-Purple-Invoice-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Gradient-Purple-Invoice-Template-I.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/02\/Clean-Gradient-Purple-Invoice-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1f2nkCe00q0eTaGdwnCHPLnK7ubk5ZPaldgXIL9lf-90\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1cze5QIjuuHKvHEnzfmePmAQrKWcpMqPFGgs5hkpvSa0\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"autorepair carpentry concrete construction electrical freelance handyman hvac landscaping lawncare plumbing therapy treeremoval\",\n      },\n    ];\n\n    \/\/ Featured trades highlighted in the band at top\n    const FEATURED_TRADES = [\n      { value: \"roofing\", label: \"Roofing\", icon: \"roof\" },\n      { value: \"hvac\", label: \"HVAC\", icon: \"hvac\" },\n      { value: \"electrical\", label: \"Electrical\", icon: \"electrical\" },\n      { value: \"plumbing\", label: \"Plumbing\", icon: \"plumbing\" },\n      { value: \"concrete\", label: \"Concrete\", icon: \"concrete\" },\n      { value: \"carpentry\", label: \"Carpentry\", icon: \"carpentry\" },\n      { value: \"construction\", label: \"Construction\", icon: \"construction\" },\n      { value: \"contractor\", label: \"Contractor\", icon: \"contractor\" },\n    ];\n\n    \/\/ Icons by name \u2014 sourced from Lucide (lucide.dev), stroke-width adjusted to 1.8\n    const TRADE_ICONS = {\n      \/\/ Lucide \"house\" \u2014 peaked roof + door cutout, unmistakably roofing\n      roof: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"\/><path d=\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><\/svg>',\n      \/\/ Lucide \"wind\" \u2014 three flowing air curves, universal HVAC \/ climate symbol\n      hvac: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.8 19.6A2 2 0 1 0 14 16H2\"\/><path d=\"M17.5 8a2.5 2.5 0 1 1 2 4H2\"\/><path d=\"M9.8 4.4A2 2 0 1 1 11 8H2\"\/><\/svg>',\n      \/\/ Lucide \"zap\" \u2014 sharp lightning bolt, the #1 electrical symbol worldwide\n      electrical:\n        '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\"\/><\/svg>',\n      \/\/ Lucide \"droplet\" \u2014 water drop, instantly readable as plumbing \/ water work\n      plumbing:\n        '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z\"\/><\/svg>',\n      \/\/ Lucide \"brick-wall\" \u2014 staggered masonry grid, concrete \/ block work\n      concrete:\n        '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M12 9v6M16 15v6M16 3v6M3 15h18M3 9h18M8 15v6M8 3v6\"\/><\/svg>',\n      \/\/ Lucide \"hammer\" \u2014 carpenter's claw hammer, clean and unmistakable\n      carpentry:\n        '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9\"\/><path d=\"m18 15 4-4\"\/><path d=\"m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5\"\/><\/svg>',\n      \/\/ Lucide \"hard-hat\" \u2014 safety helmet, the universal construction symbol\n      construction:\n        '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5\"\/><path d=\"M14 6a6 6 0 0 1 6 6v3\"\/><path d=\"M4 15v-3a6 6 0 0 1 6-6\"\/><path d=\"M2 15h20a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1\"\/><\/svg>',\n      \/\/ Lucide \"toolbox\" \u2014 tool case with handle, perfect for a general contractor\n      contractor:\n        '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 6a2 2 0 0 1 1.414.586l4 4A2 2 0 0 1 22 12v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 .586-1.414l4-4A2 2 0 0 1 8 6z\"\/><path d=\"M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2\"\/><path d=\"M2 14h20\"\/><path d=\"M16 12v4M8 12v4\"\/><\/svg>',\n    };\n\n    const STYLES = [\n      { value: \"classic\", label: \"Classic\" },\n      { value: \"minimalist\", label: \"Minimalist\" },\n      { value: \"modern\", label: \"Modern\" },\n      { value: \"simple\", label: \"Simple\" },\n    ];\n    const COLORS = [\n      { value: \"beige\", label: \"Beige\", hex: \"#d9c7a3\" },\n      { value: \"black\", label: \"Black\", hex: \"#0a1628\" },\n      { value: \"blue\", label: \"Blue\", hex: \"#0044bb\" },\n      { value: \"brown\", label: \"Brown\", hex: \"#8b6f47\" },\n      { value: \"green\", label: \"Green\", hex: \"#16a34a\" },\n      { value: \"orange\", label: \"Orange\", hex: \"#ff8c00\" },\n      { value: \"purple\", label: \"Purple\", hex: \"#6b46c1\" },\n      { value: \"red\", label: \"Red\", hex: \"#c40000\" },\n      { value: \"teal\", label: \"Teal\", hex: \"#0d9488\" },\n      { value: \"yellow\", label: \"Yellow\", hex: \"#eab308\" },\n    ];\n    const FORMATS = [\n      { value: \"pdf\", label: \"PDF\" },\n      { value: \"word\", label: \"Word\" },\n      { value: \"excel\", label: \"Excel\" },\n      { value: \"gdoc\", label: \"Google Docs\" },\n      { value: \"sheet\", label: \"Google Sheets\" },\n    ];\n    const INDUSTRIES = [\n      { value: \"autorepair\", label: \"Auto Repair\" },\n      { value: \"business\", label: \"Business\" },\n      { value: \"carpentry\", label: \"Carpentry\" },\n      { value: \"catering\", label: \"Catering\" },\n      { value: \"cleaning\", label: \"Cleaning\" },\n      { value: \"concrete\", label: \"Concrete\" },\n      { value: \"construction\", label: \"Construction\" },\n      { value: \"consulting\", label: \"Consulting\" },\n      { value: \"contractor\", label: \"Contractor\" },\n      { value: \"electrical\", label: \"Electrical\" },\n      { value: \"freelance\", label: \"Freelance\" },\n      { value: \"handyman\", label: \"Handyman\" },\n      { value: \"hvac\", label: \"HVAC\" },\n      { value: \"landscaping\", label: \"Landscaping\" },\n      { value: \"lawncare\", label: \"Lawn Care\" },\n      { value: \"mechanic\", label: \"Mechanic\" },\n      { value: \"painting\", label: \"Painting\" },\n      { value: \"photography\", label: \"Photography\" },\n      { value: \"plumbing\", label: \"Plumbing\" },\n      { value: \"propertymanagement\", label: \"Property Management\" },\n      { value: \"roofing\", label: \"Roofing\" },\n      { value: \"selfemployedcleaner\", label: \"Self-Employed Cleaner\" },\n      { value: \"therapy\", label: \"Therapy\" },\n      { value: \"treeremoval\", label: \"Tree Removal\" },\n      { value: \"trucking\", label: \"Trucking\" },\n    ];\n\n    const FILTER_MAP = {\n      style: STYLES,\n      color: COLORS,\n      format: FORMATS,\n      industry: INDUSTRIES,\n    };\n\n    const state = {\n      search: \"\",\n      style: new Set(),\n      color: new Set(),\n      format: new Set(),\n      industry: new Set(),\n    };\n\n    let root = null;\n    let initialized = false;\n\n    function $(sel) {\n      return root ? root.querySelector(sel) : null;\n    }\n    function $$(sel) {\n      return root ? Array.from(root.querySelectorAll(sel)) : [];\n    }\n\n    function esc(s) {\n      return String(s == null ? \"\" : s).replace(\/[&<>\"']\/g, function (c) {\n        return {\n          \"&\": \"&amp;\",\n          \"<\": \"&lt;\",\n          \">\": \"&gt;\",\n          '\"': \"&quot;\",\n          \"'\": \"&#39;\",\n        }[c];\n      });\n    }\n\n    function styleLabel(v) {\n      const f = STYLES.find(function (s) {\n        return s.value === v;\n      });\n      return f ? f.label : v;\n    }\n    function colorLabel(v) {\n      const f = COLORS.find(function (c) {\n        return c.value === v;\n      });\n      return f ? f.label : v;\n    }\n    function formatLabel(v) {\n      const f = FORMATS.find(function (c) {\n        return c.value === v;\n      });\n      return f ? f.label : v;\n    }\n    function industryLabel(v) {\n      const f = INDUSTRIES.find(function (c) {\n        return c.value === v;\n      });\n      return f ? f.label : v;\n    }\n\n    \/\/ ============================================\n    \/\/ BUILD TRADE BAND\n    \/\/ ============================================\n    function buildTrades() {\n      const container = $(\"#iftpl-trades\");\n      if (!container || container.dataset.built === \"true\") return;\n\n      container.innerHTML = INDUSTRIES.map(function (t) {\n        return (\n          '<button type=\"button\" class=\"trade\" data-trade=\"' +\n          esc(t.value) +\n          '\">' +\n          '<span class=\"trade-label\">' +\n          esc(t.label) +\n          \"<\/span>\" +\n          \"<\/button>\"\n        );\n      }).join(\"\");\n      container.dataset.built = \"true\";\n\n      \/\/ Wire up clicks: toggle industry filter\n      container.querySelectorAll(\".trade\").forEach(function (btn) {\n        btn.addEventListener(\"click\", function () {\n          const v = btn.dataset.trade;\n          if (state.industry.has(v)) {\n            state.industry.delete(v);\n            btn.classList.remove(\"active\");\n          } else {\n            \/\/ Clear other trades, set this one\n            container.querySelectorAll(\".trade.active\").forEach(function (b) {\n              b.classList.remove(\"active\");\n              state.industry.delete(b.dataset.trade);\n            });\n            state.industry.add(v);\n            btn.classList.add(\"active\");\n          }\n          syncOptionStates();\n          renderGrid();\n          renderActiveFilters();\n          updateFilterButtons();\n        });\n      });\n\n      setupTradesNav();\n    }\n\n    \/\/ Wire up the carousel arrows + toggle their visibility on scroll\n    function setupTradesNav() {\n      const container = $(\"#iftpl-trades\");\n      const prev = $(\".trades-nav.prev\");\n      const next = $(\".trades-nav.next\");\n      if (!container) return;\n\n      function update() {\n        const max = container.scrollWidth - container.clientWidth;\n        if (prev) prev.hidden = container.scrollLeft <= 2;\n        if (next) next.hidden = container.scrollLeft >= max - 2;\n      }\n      function step(dir) {\n        const amt = Math.max(240, container.clientWidth * 0.8);\n        container.scrollBy({ left: dir * amt, behavior: \"smooth\" });\n      }\n      if (prev)\n        prev.addEventListener(\"click\", function () {\n          step(-1);\n        });\n      if (next)\n        next.addEventListener(\"click\", function () {\n          step(1);\n        });\n      container.addEventListener(\"scroll\", update, { passive: true });\n      window.addEventListener(\"resize\", update);\n      update();\n    }\n\n    function syncTradeBand() {\n      const container = $(\"#iftpl-trades\");\n      if (!container) return;\n      container.querySelectorAll(\".trade\").forEach(function (b) {\n        b.classList.toggle(\"active\", state.industry.has(b.dataset.trade));\n      });\n    }\n\n    \/\/ ============================================\n    \/\/ BUILD FILTER OPTIONS ONCE\n    \/\/ ============================================\n    function buildFilterOptions() {\n      Object.keys(FILTER_MAP).forEach(function (key) {\n        const container = root.querySelector(\n          '.tb-options[data-options=\"' + key + '\"]',\n        );\n        if (!container || container.dataset.built === \"true\") return;\n        const opts = FILTER_MAP[key];\n        const html = opts\n          .map(function (opt) {\n            const swatch =\n              key === \"color\"\n                ? '<span class=\"swatch\" style=\"background:' +\n                  opt.hex +\n                  '\"><\/span>'\n                : \"\";\n            return (\n              '<button type=\"button\" class=\"tb-option\" data-value=\"' +\n              esc(opt.value) +\n              '\">' +\n              '<span class=\"checkbox\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>' +\n              swatch +\n              \"<span>\" +\n              esc(opt.label) +\n              \"<\/span>\" +\n              \"<\/button>\"\n            );\n          })\n          .join(\"\");\n        container.innerHTML = html;\n        container.dataset.built = \"true\";\n\n        const options = container.querySelectorAll(\".tb-option\");\n        options.forEach(function (opt) {\n          opt.addEventListener(\"click\", function (e) {\n            e.preventDefault();\n            e.stopPropagation();\n            const value = opt.dataset.value;\n            if (state[key].has(value)) {\n              state[key].delete(value);\n              opt.classList.remove(\"on\");\n            } else {\n              state[key].add(value);\n              opt.classList.add(\"on\");\n            }\n            if (key === \"industry\") syncTradeBand();\n            renderGrid();\n            renderActiveFilters();\n            updateFilterButtons();\n          });\n        });\n      });\n    }\n\n    function syncOptionStates() {\n      Object.keys(FILTER_MAP).forEach(function (key) {\n        const container = root.querySelector(\n          '.tb-options[data-options=\"' + key + '\"]',\n        );\n        if (!container) return;\n        container.querySelectorAll(\".tb-option\").forEach(function (opt) {\n          opt.classList.toggle(\"on\", state[key].has(opt.dataset.value));\n        });\n      });\n    }\n\n    \/\/ ============================================\n    \/\/ FILTER LOGIC\n    \/\/ ============================================\n    function templateMatches(t) {\n      if (state.search) {\n        const q = state.search.toLowerCase();\n        if (t.name.toLowerCase().indexOf(q) === -1) return false;\n      }\n      if (state.style.size && !state.style.has(t.style)) return false;\n      if (state.color.size && !state.color.has(t.color)) return false;\n      if (state.format.size) {\n        let any = false;\n        state.format.forEach(function (fmt) {\n          if (t[fmt]) any = true;\n        });\n        if (!any) return false;\n      }\n      if (state.industry.size) {\n        const tInd = (t.industries || \"\").split(\/\\s+\/);\n        let allMatch = true;\n        state.industry.forEach(function (ind) {\n          if (tInd.indexOf(ind) === -1) allMatch = false;\n        });\n        if (!allMatch) return false;\n      }\n      return true;\n    }\n\n    \/\/ ============================================\n    \/\/ RENDER GRID\n    \/\/ ============================================\n    function renderGrid() {\n      const grid = $(\"#iftpl-grid\");\n      if (!grid) return;\n      \/\/ one delegated click listener (instead of re-binding every card on each render)\n      if (!grid.dataset.delegated) {\n        grid.dataset.delegated = \"1\";\n        grid.addEventListener(\"click\", function (e) {\n          const card = e.target.closest(\".template-card\");\n          if (!card || !grid.contains(card)) return;\n          const idx = parseInt(card.dataset.idx, 10);\n          if (!isNaN(idx)) openModal(idx);\n        });\n      }\n      const CTA_BANNER =\n        '<div class=\"tpl-cta\">' +\n        '<span class=\"tpl-cta-sent\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg> Invoice sent<\/span>' +\n        '<div class=\"tpl-cta-content\">' +\n        '<span class=\"tpl-cta-badge\">Free \u00b7 No sign-up needed<\/span>' +\n        '<div class=\"tpl-cta-title\">From Free Invoice Templates to <span class=\"hi\">Faster Payments<\/span><\/div>' +\n        '<p class=\"tpl-cta-text\">Start with a free invoice template, then create, send, and track invoices from your phone. Accept payments online, automate reminders, and keep every invoice organized in one place. No spreadsheet, no desktop required.<\/p>' +\n        '<a class=\"tpl-cta-btn download_app\" href=\"https:\/\/invoicefly.onelink.me\/AeUs\/qohijf8g\" target=\"_blank\" rel=\"noopener\">Get the Free Invoice App <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg><\/a>' +\n        '<div class=\"tpl-cta-stats\">\u2605 4.8 App Store <span class=\"sep\">\u00b7<\/span> 125,000+ users <span class=\"sep\">\u00b7<\/span> iOS &amp; Android<\/div>' +\n        \"<\/div>\" +\n        '<div class=\"tpl-cta-visual\"><div class=\"tpl-cta-inv\">' +\n        '<div class=\"tpl-cta-inv-head\"><span class=\"id\">Invoice #INV-084<\/span><span class=\"logo\"><\/span><\/div>' +\n        '<div class=\"tpl-cta-inv-row\"><span class=\"k\">Labor (8h)<\/span><span class=\"v\">$960<\/span><\/div>' +\n        '<div class=\"tpl-cta-inv-row\"><span class=\"k\">Materials<\/span><span class=\"v\">$340<\/span><\/div>' +\n        '<div class=\"tpl-cta-inv-row\"><span class=\"k\">Sales tax 8.25%<\/span><span class=\"v\">$107<\/span><\/div>' +\n        '<div class=\"tpl-cta-inv-total\"><span class=\"k\">Total Due<\/span><span class=\"v\">$1,407<\/span><\/div>' +\n        \"<\/div><\/div>\" +\n        \"<\/div>\";\n\n      const filtered = TEMPLATES.filter(templateMatches);\n      const shown = $(\"#iftpl-shown\"),\n        total = $(\"#iftpl-total\");\n      if (shown) shown.textContent = filtered.length;\n      if (total) total.textContent = TEMPLATES.length;\n\n      if (filtered.length === 0) {\n        const shuffled = TEMPLATES.slice().sort(function () {\n          return Math.random() - 0.5;\n        });\n        const random10 = shuffled.slice(0, 10);\n        grid.innerHTML =\n          '<div class=\"empty-suggest-header\">' +\n          '<div class=\"empty-state-title\">No templates found for that search.<\/div>' +\n          '<div class=\"empty-state-text\">Here are some templates you might like:<\/div>' +\n          \"<\/div>\" +\n          random10\n            .map(function (t) {\n              const realIdx = TEMPLATES.indexOf(t);\n              const fmts = [\"pdf\", \"word\", \"excel\", \"gdoc\", \"sheet\"]\n                .filter(function (f) {\n                  return t[f];\n                })\n                .map(function (f) {\n                  const label = {\n                    pdf: \"PDF\",\n                    word: \"DOC\",\n                    excel: \"XLS\",\n                    gdoc: \"GDC\",\n                    sheet: \"GSH\",\n                  }[f];\n                  return '<span class=\"tc-fmt\">' + label + \"<\/span>\";\n                })\n                .join(\"\");\n              return (\n                '<button type=\"button\" class=\"template-card\" data-idx=\"' +\n                realIdx +\n                '\" aria-label=\"Open ' +\n                esc(t.name) +\n                '\">' +\n                '<div class=\"tc-thumb\">' +\n                '<span class=\"tc-badge\">Free<\/span>' +\n                '<div class=\"tc-img-clip\">' +\n                '<img src=\"' +\n                esc(t.image) +\n                '\" alt=\"' +\n                esc(t.name) +\n                '\" loading=\"lazy\" decoding=\"async\">' +\n                \"<\/div>\" +\n                '<div class=\"tc-overlay\"><span class=\"tc-overlay-btn\">View &amp; download <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg><\/span><\/div>' +\n                \"<\/div>\" +\n                '<div class=\"tc-info\">' +\n                '<div style=\"flex:1;min-width:0\">' +\n                '<div class=\"tc-name\">' +\n                esc(t.name) +\n                \"<\/div>\" +\n                '<div class=\"tc-meta\">' +\n                esc(styleLabel(t.style)) +\n                '<span class=\"dot\">\u00b7<\/span>' +\n                esc(colorLabel(t.color)) +\n                \"<\/div>\" +\n                '<div class=\"tc-formats\">' +\n                fmts +\n                \"<\/div>\" +\n                \"<\/div>\" +\n                '<div class=\"tc-arrow\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg><\/div>' +\n                \"<\/div>\" +\n                \"<\/button>\"\n              );\n            })\n            .join(\"\");\n        grid.insertAdjacentHTML(\"beforeend\", CTA_BANNER);\n        return;\n      }\n\n      grid.innerHTML = filtered\n        .map(function (t) {\n          const realIdx = TEMPLATES.indexOf(t);\n          \/\/ Build formats indicator\n          const fmts = [\"pdf\", \"word\", \"excel\", \"gdoc\", \"sheet\"]\n            .filter(function (f) {\n              return t[f];\n            })\n            .map(function (f) {\n              const label = {\n                pdf: \"PDF\",\n                word: \"DOC\",\n                excel: \"XLS\",\n                gdoc: \"GDC\",\n                sheet: \"GSH\",\n              }[f];\n              return '<span class=\"tc-fmt\">' + label + \"<\/span>\";\n            })\n            .join(\"\");\n          return (\n            '<button type=\"button\" class=\"template-card\" data-idx=\"' +\n            realIdx +\n            '\" aria-label=\"Open ' +\n            esc(t.name) +\n            '\">' +\n            '<div class=\"tc-thumb\">' +\n            '<span class=\"tc-badge\">Free<\/span>' +\n            '<div class=\"tc-img-clip\">' +\n            '<img src=\"' +\n            esc(t.image) +\n            '\" alt=\"' +\n            esc(t.name) +\n            '\" loading=\"lazy\" decoding=\"async\">' +\n            \"<\/div>\" +\n            '<div class=\"tc-overlay\"><span class=\"tc-overlay-btn\">View &amp; download <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg><\/span><\/div>' +\n            \"<\/div>\" +\n            '<div class=\"tc-info\">' +\n            '<div style=\"flex:1;min-width:0\">' +\n            '<div class=\"tc-name\">' +\n            esc(t.name) +\n            \"<\/div>\" +\n            '<div class=\"tc-meta\">' +\n            esc(styleLabel(t.style)) +\n            '<span class=\"dot\">\u00b7<\/span>' +\n            esc(colorLabel(t.color)) +\n            \"<\/div>\" +\n            '<div class=\"tc-formats\">' +\n            fmts +\n            \"<\/div>\" +\n            \"<\/div>\" +\n            '<div class=\"tc-arrow\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg><\/div>' +\n            \"<\/div>\" +\n            \"<\/button>\"\n          );\n        })\n        .join(\"\");\n      grid.insertAdjacentHTML(\"beforeend\", CTA_BANNER);\n    }\n\n    \/\/ ============================================\n    \/\/ ACTIVE FILTER CHIPS\n    \/\/ ============================================\n    function renderActiveFilters() {\n      const container = $(\"#iftpl-active-filters\");\n      const wrap = $(\"#iftpl-sticky-chips-wrap\");\n      if (!container) return;\n      const chips = [];\n      state.style.forEach(function (v) {\n        chips.push({ type: \"style\", value: v, label: styleLabel(v) });\n      });\n      state.color.forEach(function (v) {\n        chips.push({ type: \"color\", value: v, label: colorLabel(v) });\n      });\n      state.format.forEach(function (v) {\n        chips.push({ type: \"format\", value: v, label: formatLabel(v) });\n      });\n      state.industry.forEach(function (v) {\n        chips.push({ type: \"industry\", value: v, label: industryLabel(v) });\n      });\n\n      if (chips.length === 0) {\n        container.innerHTML = \"\";\n        if (wrap) wrap.classList.remove(\"has-chips\");\n        return;\n      }\n      if (wrap) wrap.classList.add(\"has-chips\");\n\n      container.innerHTML =\n        chips\n          .map(function (c) {\n            return (\n              '<span class=\"active-filter-chip\" data-type=\"' +\n              c.type +\n              '\" data-value=\"' +\n              esc(c.value) +\n              '\">' +\n              esc(c.label) +\n              '<button type=\"button\" class=\"x\" aria-label=\"Remove\">\u2715<\/button>' +\n              \"<\/span>\"\n            );\n          })\n          .join(\"\") +\n        '<button type=\"button\" class=\"clear-all-btn\" data-iftpl-action=\"clear-all\">Clear all<\/button>';\n\n      container\n        .querySelectorAll(\".active-filter-chip .x\")\n        .forEach(function (xb) {\n          xb.addEventListener(\"click\", function (e) {\n            e.stopPropagation();\n            const chip = xb.closest(\".active-filter-chip\");\n            const type = chip.dataset.type,\n              value = chip.dataset.value;\n            state[type].delete(value);\n            syncOptionStates();\n            if (type === \"industry\") syncTradeBand();\n            renderGrid();\n            renderActiveFilters();\n            updateFilterButtons();\n          });\n        });\n      const ca = container.querySelector('[data-iftpl-action=\"clear-all\"]');\n      if (ca) ca.addEventListener(\"click\", clearAllFilters);\n    }\n\n    function clearAllFilters() {\n      state.search = \"\";\n      state.style.clear();\n      state.color.clear();\n      state.format.clear();\n      state.industry.clear();\n      const si = $(\"#iftpl-search\");\n      if (si) si.value = \"\";\n      syncOptionStates();\n      syncTradeBand();\n      renderGrid();\n      renderActiveFilters();\n      updateFilterButtons();\n    }\n\n    function updateFilterButtons() {\n      [\"style\", \"color\", \"format\", \"industry\"].forEach(function (key) {\n        const filter = root.querySelector(\n          '.tb-filter[data-filter=\"' + key + '\"]',\n        );\n        if (!filter) return;\n        const countEl = filter.querySelector(\".count\");\n        const btn = filter.querySelector(\".tb-filter-btn\");\n        const n = state[key].size;\n        if (n > 0) {\n          countEl.textContent = n;\n          countEl.style.display = \"\";\n          btn.classList.add(\"has-selection\");\n        } else {\n          countEl.style.display = \"none\";\n          btn.classList.remove(\"has-selection\");\n        }\n      });\n    }\n\n    \/\/ ============================================\n    \/\/ FILTER DROPDOWN OPEN\/CLOSE\n    \/\/ ============================================\n    let outsideHandlerInstalled = false;\n\n    function isMobile() {\n      return window.matchMedia(\"(max-width: 768px)\").matches;\n    }\n\n    function closeAllDropdowns() {\n      $$(\".tb-filter\").forEach(function (f) {\n        f.classList.remove(\"open\");\n      });\n      const backdrop = $(\"#iftpl-tb-backdrop\");\n      if (backdrop) backdrop.classList.remove(\"show\");\n    }\n\n    function openDropdown(filter) {\n      closeAllDropdowns();\n      filter.classList.add(\"open\");\n      if (isMobile()) {\n        const backdrop = $(\"#iftpl-tb-backdrop\");\n        if (backdrop) backdrop.classList.add(\"show\");\n      }\n    }\n\n    function setupFilterDropdowns() {\n      $$(\".tb-filter\").forEach(function (filter) {\n        const btn = filter.querySelector(\".tb-filter-btn\");\n        const dropdown = filter.querySelector(\".tb-dropdown\");\n        const filterKey = filter.dataset.filter;\n        const clearBtn = filter.querySelector(\".tb-clear\");\n        const applyBtn = filter.querySelector(\".tb-apply\");\n        const mobileClose = filter.querySelector(\".tb-mobile-close\");\n\n        if (!btn || btn.dataset.iftplWired === \"1\") return;\n        btn.dataset.iftplWired = \"1\";\n\n        btn.addEventListener(\"click\", function (e) {\n          e.preventDefault();\n          e.stopPropagation();\n          if (filter.classList.contains(\"open\")) {\n            closeAllDropdowns();\n          } else {\n            openDropdown(filter);\n          }\n        });\n\n        dropdown.addEventListener(\"click\", function (e) {\n          e.stopPropagation();\n        });\n\n        if (clearBtn)\n          clearBtn.addEventListener(\"click\", function (e) {\n            e.stopPropagation();\n            state[filterKey].clear();\n            syncOptionStates();\n            if (filterKey === \"industry\") syncTradeBand();\n            renderGrid();\n            renderActiveFilters();\n            updateFilterButtons();\n          });\n        if (applyBtn)\n          applyBtn.addEventListener(\"click\", function (e) {\n            e.stopPropagation();\n            closeAllDropdowns();\n          });\n        if (mobileClose)\n          mobileClose.addEventListener(\"click\", function (e) {\n            e.stopPropagation();\n            closeAllDropdowns();\n          });\n      });\n\n      if (!outsideHandlerInstalled) {\n        outsideHandlerInstalled = true;\n        document.addEventListener(\n          \"click\",\n          function (e) {\n            if (!root || !root.contains(e.target)) {\n              closeAllDropdowns();\n              return;\n            }\n            if (\n              !e.target.closest(\".tb-filter\") &&\n              !e.target.closest(\".tb-mobile-backdrop\")\n            ) {\n              closeAllDropdowns();\n            }\n          },\n          false,\n        );\n\n        document.addEventListener(\"keydown\", function (e) {\n          if (e.key === \"Escape\") {\n            closeAllDropdowns();\n            closeModal();\n          }\n        });\n\n        const backdrop = root.querySelector(\"#iftpl-tb-backdrop\");\n        if (backdrop) backdrop.addEventListener(\"click\", closeAllDropdowns);\n      }\n    }\n\n    function setupSearch() {\n      const input = $(\"#iftpl-search\");\n      if (!input || input.dataset.iftplWired === \"1\") return;\n      input.dataset.iftplWired = \"1\";\n      let t;\n      input.addEventListener(\"input\", function (e) {\n        clearTimeout(t);\n        t = setTimeout(function () {\n          state.search = e.target.value.trim();\n          renderGrid();\n        }, 120);\n      });\n    }\n\n    \/\/ ============================================\n    \/\/ MODAL\n    \/\/ ============================================\n    function openModal(idx) {\n      const t = TEMPLATES[idx];\n      if (!t) return;\n      const m = $(\"#iftpl-modal\");\n      const img = $(\"#iftpl-modal-img\");\n      const title = $(\"#iftpl-modal-title\");\n      const desc = $(\"#iftpl-modal-desc\");\n      const appBtn = $(\"#iftpl-modal-app\");\n      const genBtn = $(\"#iftpl-modal-generator\");\n      const fmts = $(\"#iftpl-modal-formats\");\n      if (!m || !img || !title || !fmts) return;\n\n      img.src = t.image;\n      img.alt = t.name;\n      title.textContent = t.name;\n      desc.textContent = t.desc;\n      appBtn.href = t.app || \"https:\/\/invoicefly.onelink.me\/AeUs\/qohijf8g\";\n      genBtn.href =\n        t.generator ||\n        \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-invoice-generator\/\";\n\n      var SVG_PDF =\n        '<svg viewBox=\"0 0 56 54\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\"><path d=\"M9.9 0h36.2C51.6 0 56 4.4 56 9.9v34.2c0 5.5-4.4 9.9-9.9 9.9H9.9C4.4 54 0 49.6 0 44.1V9.9C0 4.4 4.4 0 9.9 0z\" fill=\"#fa0f00\"\/><path d=\"M45 31.2c-2.6-2.7-9.7-1.6-11.4-1.4-2.5-2.4-4.2-5.3-4.8-6.3.9-2.7 1.5-5.4 1.6-8.3 0-2.5-1-5.2-3.8-5.2-1 0-1.9.6-2.4 1.4-1.2 2.1-.7 6.3 1.2 10.6-1.1 3.1-2.1 6.1-4.9 11.4-2.9 1.2-9 4-9.5 7-.2.9.1 1.8.8 2.5.7.6 1.6.9 2.5.9 3.7 0 7.3-5.1 9.8-9.4 2.1-.7 5.4-1.7 8.7-2.3 3.9 3.4 7.3 3.9 9.1 3.9 2.4 0 3.3-1 3.6-1.9.5-1 .2-2.1-.5-2.9zm-2.5 1.7c-.1.7-1 1.4-2.6 1-1.9-.5-3.6-1.4-5.1-2.6 1.3-.2 4.2-.5 6.3-.1.8.2 1.6.7 1.4 1.7zM25.8 12.3c.2-.3.5-.5.8-.5.9 0 1.1 1.1 1.1 2-.1 2.1-.5 4.2-1.2 6.2-1.5-4-1.2-6.8-.7-7.7zm-.2 19.4c.8-1.6 1.9-4.4 2.3-5.6.9 1.5 2.4 3.3 3.2 4.1 0 .1-3.1.7-5.5 1.5zm-5.9 4c-2.3 3.8-4.7 6.2-6 6.2-.2 0-.4-.1-.6-.2-.3-.2-.4-.5-.3-.9.3-1.4 2.9-3.3 6.9-5.1z\" fill=\"#fff\"\/><\/svg>';\n      var SVG_WORD =\n        '<svg viewBox=\"-0.13 0 32.13 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\"><path d=\"M30.667 2H9.333A1.333 1.333 0 0 0 8 3.333V9l12 3.5L32 9V3.333A1.333 1.333 0 0 0 30.667 2z\" fill=\"#41a5ee\"\/><path d=\"M32 9H8v7l12 3.5L32 16z\" fill=\"#2b7cd3\"\/><path d=\"M32 16H8v7l12 3.5L32 23z\" fill=\"#185abd\"\/><path d=\"M32 23H8v5.667A1.333 1.333 0 0 0 9.333 30h21.334A1.333 1.333 0 0 0 32 28.667z\" fill=\"#103f91\"\/><path d=\"M16.667 7H8v19h8.667A1.337 1.337 0 0 0 18 24.667V8.333A1.337 1.337 0 0 0 16.667 7z\" opacity=\".1\"\/><path d=\"M15.667 8H8v19h7.667A1.337 1.337 0 0 0 17 25.667V9.333A1.337 1.337 0 0 0 15.667 8z\" opacity=\".2\"\/><path d=\"M15.667 8H8v17h7.667A1.337 1.337 0 0 0 17 23.667V9.333A1.337 1.337 0 0 0 15.667 8z\" opacity=\".2\"\/><path d=\"M14.667 8H8v17h6.667A1.337 1.337 0 0 0 16 23.667V9.333A1.337 1.337 0 0 0 14.667 8z\" opacity=\".2\"\/><path d=\"M1.333 8h13.334A1.333 1.333 0 0 1 16 9.333v13.334A1.333 1.333 0 0 1 14.667 24H1.333A1.333 1.333 0 0 1 0 22.667V9.333A1.333 1.333 0 0 1 1.333 8z\" fill=\"#185abd\"\/><path d=\"M11.95 21h-1.8l-2.1-6.9-2.2 6.9h-1.8l-2-10h1.8l1.4 7 2.1-6.8h1.5l2 6.8 1.4-7h1.7z\" fill=\"#fff\"\/><\/svg>';\n      var SVG_EXCEL =\n        '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 110.037 107.5\"><path d=\"M57.55 0h7.425v10c12.513 0 25.025.025 37.537-.038 2.113.087 4.438-.062 6.275 1.2 1.287 1.85 1.138 4.2 1.225 6.325-.062 21.7-.037 43.388-.024 65.075-.062 3.638.337 7.35-.425 10.938-.5 2.6-3.625 2.662-5.713 2.75-12.95.037-25.912-.025-38.875 0v11.25h-7.763c-19.05-3.463-38.138-6.662-57.212-10V10.013C19.188 6.675 38.375 3.388 57.55 0z\" fill=\"#207245\"\/><path d=\"M64.975 13.75h41.25V92.5h-41.25V85h10v-8.75h-10v-5h10V62.5h-10v-5h10v-8.75h-10v-5h10V35h-10v-5h10v-8.75h-10v-7.5z\" fill=\"#fff\"\/><path d=\"M79.975 21.25h17.5V30h-17.5v-8.75z\" fill=\"#207245\"\/><path d=\"M37.025 32.962c2.825-.2 5.663-.375 8.5-.512a2607.344 2607.344 0 0 1-10.087 20.487c3.438 7 6.949 13.95 10.399 20.95a716.28 716.28 0 0 1-9.024-.575c-2.125-5.213-4.713-10.25-6.238-15.7-1.699 5.075-4.125 9.862-6.074 14.838-2.738-.038-5.476-.15-8.213-.263C19.5 65.9 22.6 59.562 25.912 53.312c-2.812-6.438-5.9-12.75-8.8-19.15 2.75-.163 5.5-.325 8.25-.475 1.862 4.888 3.899 9.712 5.438 14.725 1.649-5.312 4.112-10.312 6.225-15.45z\" fill=\"#fff\"\/><path d=\"M79.975 35h17.5v8.75h-17.5V35zM79.975 48.75h17.5v8.75h-17.5v-8.75zM79.975 62.5h17.5v8.75h-17.5V62.5zM79.975 76.25h17.5V85h-17.5v-8.75z\" fill=\"#207245\"\/><\/svg>';\n      var SVG_GDOC =\n        '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1818.2 2500\" width=\"28\" height=\"28\"><path fill=\"#4285F4\" d=\"M1136.4,0H170.4C79.6,0,0,79.5,0,170.5v2159.1c0,90.9,79.5,170.5,170.5,170.5h1477.3c90.9,0,170.5-79.5,170.5-170.5V681.8l-397.7-284.1L1136.4,0z\"\/><path fill=\"#F1F1F1\" d=\"M454.5,1818.2h909.1v-113.6H454.6L454.5,1818.2z M454.5,2045.5h681.8v-113.6H454.5V2045.5z M454.5,1250v113.6h909.1V1250H454.5z M454.5,1590.9h909.1v-113.6H454.6L454.5,1590.9z\"\/><path fill=\"#A1C2FA\" d=\"M1136.4,0v511.4c0,90.9,79.5,170.4,170.4,170.4h511.4L1136.4,0z\"\/><\/svg>';\n      var SVG_SHEET =\n        '<svg viewBox=\"0 0 314.7 428\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\"><path d=\"M206 108.7h108.7L206 0z\" fill=\"#188038\"\/><path d=\"M206 108.7V0H24C10.7 0 0 10.7 0 24v380c0 13.3 10.7 24 24 24h266.7c13.3 0 24-10.7 24-24V108.7z\" fill=\"#34a853\"\/><path d=\"M60 167.9V315h194.7V167.9zM145.3 291H84v-37.6h61.3zm0-61.5H84v-37.6h61.3zm85.4 61.5h-61.3v-37.6h61.3zm0-61.5h-61.3v-37.6h61.3z\" fill=\"#fff\"\/><\/svg>';\n      const fmtMeta = [\n        { key: \"pdf\", label: \"PDF\", hint: \"Print or email\", svg: SVG_PDF },\n        {\n          key: \"word\",\n          label: \"Word (.docx)\",\n          hint: \"Edit text freely\",\n          svg: SVG_WORD,\n        },\n        {\n          key: \"excel\",\n          label: \"Excel (.xlsx)\",\n          hint: \"Auto totals\",\n          svg: SVG_EXCEL,\n        },\n        {\n          key: \"gdoc\",\n          label: \"Google Docs\",\n          hint: \"Edit online \u00b7 free\",\n          svg: SVG_GDOC,\n        },\n        {\n          key: \"sheet\",\n          label: \"Google Sheets\",\n          hint: \"Edit online \u00b7 free\",\n          svg: SVG_SHEET,\n        },\n      ];\n      fmts.innerHTML = fmtMeta\n        .filter(function (f) {\n          return t[f.key];\n        })\n        .map(function (f) {\n          return (\n            '<a href=\"' +\n            esc(t[f.key]) +\n            '\" class=\"modal-format\" target=\"_blank\" rel=\"noopener\" download>' +\n            '<div class=\"modal-format-icon\">' +\n            f.svg +\n            \"<\/div>\" +\n            '<div class=\"modal-format-text\"><div class=\"modal-format-name\">' +\n            f.label +\n            '<\/div><div class=\"modal-format-hint\">' +\n            f.hint +\n            \"<\/div><\/div>\" +\n            '<svg class=\"modal-format-arrow\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>' +\n            \"<\/a>\"\n          );\n        })\n        .join(\"\");\n\n      m.classList.add(\"open\");\n      m.setAttribute(\"aria-hidden\", \"false\");\n      document.body.style.overflow = \"hidden\";\n    }\n\n    function closeModal() {\n      const m = $(\"#iftpl-modal\");\n      if (!m) return;\n      m.classList.remove(\"open\");\n      m.setAttribute(\"aria-hidden\", \"true\");\n      document.body.style.overflow = \"\";\n    }\n\n    function setupModal() {\n      const m = $(\"#iftpl-modal\");\n      if (!m || m.dataset.iftplWired === \"1\") return;\n      m.dataset.iftplWired = \"1\";\n      const cb = $(\"#iftpl-modal-close\");\n      if (cb) cb.addEventListener(\"click\", closeModal);\n      m.addEventListener(\"click\", function (e) {\n        if (e.target === m) closeModal();\n      });\n    }\n\n    function setupFAQ() {\n      $$(\".faq-q\").forEach(function (q) {\n        if (q.dataset.iftplWired === \"1\") return;\n        q.dataset.iftplWired = \"1\";\n        q.addEventListener(\"click\", function () {\n          q.parentElement.classList.toggle(\"open\");\n        });\n      });\n    }\n\n    \/\/ ============================================\n    \/\/ STICKY BAR + HEADER AUTO-HIDE\n    \/\/ ============================================\n    function setupStickyBar() {\n      const stickyBar = $(\"#iftpl-sticky-bar\");\n      if (!stickyBar || stickyBar.dataset.iftplWired === \"1\") return;\n      stickyBar.dataset.iftplWired = \"1\";\n\n      \/\/ Position-based detection: when the bar IS stuck, getBoundingClientRect().top\n      \/\/ equals the CSS `top` value (i.e. stickyOffset). When it's in normal document\n      \/\/ flow, rect.top is greater than stickyOffset. This approach is immune to\n      \/\/ race conditions and works correctly even when --iftpl-sticky-offset changes\n      \/\/ dynamically (e.g. the global header auto-hiding mid-scroll).\n      let ticking = false;\n      let cooldown = false; \/\/ blocks re-toggle during CSS transition to prevent oscillation\n      function checkSticky() {\n        if (ticking) return;\n        ticking = true;\n        requestAnimationFrame(function () {\n          \/\/ On mobile the bar is position:relative \u2014 remove is-stuck if present and bail out.\n          if (window.innerWidth <= 768) {\n            stickyBar.classList.remove(\"is-stuck\");\n            ticking = false;\n            return;\n          }\n          const rect = stickyBar.getBoundingClientRect();\n          \/\/ Read the bar's own computed `top` value (resolves the CSS var and\n          \/\/ reflects any ongoing transition). When the bar IS stuck, rect.top \u2248 cssTop.\n          \/\/ When it's in normal document flow, rect.top is significantly larger than cssTop.\n          const cssTop = parseFloat(getComputedStyle(stickyBar).top) || 0;\n          const wasStuck = stickyBar.classList.contains(\"is-stuck\");\n          \/\/ Asymmetric hysteresis: snap on quickly (\u22642 px) but release slowly (>20 px).\n          \/\/ This prevents tiny scrolls near the threshold from toggling the class,\n          \/\/ e.g. after a smooth-scroll click that lands right at the sticky boundary.\n          const tolerance = wasStuck ? 20 : 2;\n          const stuck = rect.top <= cssTop + tolerance;\n          if (!cooldown && stuck !== wasStuck) {\n            stickyBar.classList.toggle(\"is-stuck\", stuck);\n            \/\/ Lock out further toggles for 300ms (matches padding transition duration)\n            \/\/ so the height-change from compact styles can't create a feedback loop.\n            cooldown = true;\n            setTimeout(function () {\n              cooldown = false;\n            }, 300);\n          }\n          ticking = false;\n        });\n      }\n\n      window.addEventListener(\"scroll\", checkSticky, { passive: true });\n      window.addEventListener(\"resize\", checkSticky, { passive: true });\n\n      \/\/ Initial check (slight delay so layout is settled)\n      setTimeout(checkSticky, 50);\n\n      \/\/ \u2500\u2500 Anchor-click interception \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n      \/\/ id=\"templates\" lives INSIDE the sticky bar (.tab-pills-wrap).\n      \/\/ Native browser scroll-to-anchor positions that element's natural\n      \/\/ document-flow top exactly at the sticky threshold \u2192 rect.top \u2248 cssTop\n      \/\/ on every scroll event \u2192 is-stuck flickers add\/remove\/add.\n      \/\/\n      \/\/ Fix: intercept any a[href=\"#templates\"] click, prevent the browser's\n      \/\/ default scroll, and instead scroll to the .gallery element (which is\n      \/\/ below the sticky bar), offset so the bar is already firmly stuck when\n      \/\/ the scroll settles.  This guarantees rect.top < cssTop by > 20 px and\n      \/\/ the hysteresis logic never releases is-stuck.\n      document\n        .querySelectorAll('a[href=\"#templates\"]')\n        .forEach(function (link) {\n          link.addEventListener(\"click\", function (e) {\n            e.preventDefault();\n            var gallery = document.querySelector(\".gallery\");\n            if (!gallery) return;\n            var barH = stickyBar.offsetHeight;\n            var cssT = parseFloat(getComputedStyle(stickyBar).top) || 0;\n            \/\/ Target: gallery's document-flow top, minus sticky bar height & offset,\n            \/\/ minus a small extra gap (16 px) so the bar is firmly past threshold.\n            var targetY =\n              gallery.getBoundingClientRect().top +\n              window.scrollY -\n              cssT -\n              barH -\n              16;\n            window.scrollTo({ top: Math.max(0, targetY), behavior: \"smooth\" });\n          });\n        });\n    }\n\n    function setupHeaderAutoHide() {\n      \/\/ \u2500\u2500 WordPress admin bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n      \/\/ When a WP user is logged in, #wpadminbar is 32 px tall (46 px on\n      \/\/ mobile). We must include it in the sticky offset so the bar doesn't\n      \/\/ hide behind it. We observe resize because WP collapses the admin bar\n      \/\/ from 32\u219246 px at the 600 px breakpoint.\n      function getAdminBarHeight() {\n        var ab = document.getElementById(\"wpadminbar\");\n        return ab ? ab.getBoundingClientRect().height : 0;\n      }\n\n      \/\/ Detect the page's fixed\/sticky header using multiple common selectors.\n      \/\/ Falls back gracefully if none is found.\n      function findPageHeader() {\n        var candidates = [\n          \".if-header\",\n          \"#site-header\",\n          \".site-header\",\n          \"#masthead\",\n          \".elementor-location-header\",\n          '.elementor-section[data-element_type=\"section\"].elementor-sticky',\n          \"header\",\n        ];\n        for (var i = 0; i < candidates.length; i++) {\n          var el = document.querySelector(candidates[i]);\n          if (el) {\n            var pos = getComputedStyle(el).position;\n            if (pos === \"fixed\" || pos === \"sticky\") return el;\n          }\n        }\n        return null;\n      }\n      const header = findPageHeader();\n\n      \/\/ Set initial sticky offset = actual visible bottom edge of the header.\n      \/\/ We use getBoundingClientRect().bottom (NOT .height) so the value\n      \/\/ accounts for the CSS transform: translateY(-100%) used to hide\/show the\n      \/\/ header.  During the 0.3 s slide animation .bottom interpolates smoothly\n      \/\/ between 0 (fully hidden) and headerHeight (fully visible), which lets us\n      \/\/ keep the sticky bar perfectly flush with the header at every frame with\n      \/\/ no jump and no gap.\n      function updateOffset() {\n        var abH = getAdminBarHeight();\n        var hH = 0;\n        if (header) {\n          \/\/ rect.bottom reflects the transformed position, giving us the real\n          \/\/ visible bottom edge of the header in viewport coordinates.\n          var rect = header.getBoundingClientRect();\n          hH = Math.max(0, rect.bottom - abH);\n        }\n        if (root)\n          root.style.setProperty(\"--iftpl-sticky-offset\", abH + hH + \"px\");\n      }\n      updateOffset();\n      window.addEventListener(\"resize\", updateOffset, { passive: true });\n\n      if (!header || header.dataset.iftplWired === \"1\") return;\n      header.dataset.iftplWired = \"1\";\n\n      let lastY = window.scrollY;\n      let ticking = false;\n      const threshold = 80; \/\/ Don't hide until scrolled past this much\n      const delta = 6; \/\/ Minimum scroll delta to trigger\n\n      \/\/ During the header CSS transition we pump updateOffset() every rAF frame\n      \/\/ so the sticky-bar top tracks the animated header position continuously,\n      \/\/ not just on scroll events (which stop firing when the user lifts their\n      \/\/ finger but the header animation is still running).\n      let transitionRaf = null;\n      function trackHeaderTransition() {\n        cancelAnimationFrame(transitionRaf);\n        var deadline = performance.now() + 360; \/\/ slightly longer than the 0.3 s CSS transition\n        function frame() {\n          updateOffset();\n          if (performance.now() < deadline) {\n            transitionRaf = requestAnimationFrame(frame);\n          } else {\n            updateOffset(); \/\/ one final update once the transition has settled\n          }\n        }\n        transitionRaf = requestAnimationFrame(frame);\n      }\n\n      function onScroll() {\n        if (ticking) return;\n        ticking = true;\n        requestAnimationFrame(function () {\n          const y = window.scrollY;\n          const diff = y - lastY;\n\n          \/\/ Ignore tiny movements\n          if (Math.abs(diff) < delta) {\n            ticking = false;\n            return;\n          }\n          \/\/ Always show when near the top\n          if (y < threshold) {\n            header.classList.remove(\"iftpl-hidden\");\n            document.body.classList.remove(\"iftpl-header-hidden\");\n            trackHeaderTransition();\n          } else if (diff > 0) {\n            \/\/ Scrolling down \u2192 hide\n            header.classList.add(\"iftpl-hidden\");\n            document.body.classList.add(\"iftpl-header-hidden\");\n            trackHeaderTransition();\n            \/\/ Only close dropdowns if user is actively scrolling far (not on render)\n            if (Math.abs(diff) > 40) closeAllDropdowns();\n          } else if (diff < 0) {\n            \/\/ Scrolling up \u2192 show\n            header.classList.remove(\"iftpl-hidden\");\n            document.body.classList.remove(\"iftpl-header-hidden\");\n            trackHeaderTransition();\n          }\n          updateOffset();\n          lastY = y;\n          ticking = false;\n        });\n      }\n\n      window.addEventListener(\"scroll\", onScroll, { passive: true });\n    }\n\n    \/\/ ============================================\n    \/\/ INIT\n    \/\/ ============================================\n    function init() {\n      root = document.getElementById(\"iftpl-root\");\n      if (!root) return false;\n      if (initialized && root.dataset.iftplInit === \"1\") return true;\n\n      initialized = true;\n      root.dataset.iftplInit = \"1\";\n\n      buildTrades();\n      buildFilterOptions();\n      setupFilterDropdowns();\n      setupSearch();\n      setupModal();\n      setupFAQ();\n      setupStickyBar();\n      setupHeaderAutoHide();\n      \/\/ The 71-card gallery is below the fold \u2014 build it after first paint so it\n      \/\/ doesn't block the critical render (helps LCP\/TBT). Filters call\n      \/\/ renderGrid() directly on interaction, so this only defers the first paint.\n      if (\"requestIdleCallback\" in window) {\n        requestIdleCallback(renderGrid, { timeout: 1800 });\n      } else {\n        setTimeout(renderGrid, 1);\n      }\n      renderActiveFilters();\n      updateFilterButtons();\n      return true;\n    }\n\n    function tryInit(retries) {\n      if (init()) return;\n      if (retries > 0)\n        setTimeout(function () {\n          tryInit(retries - 1);\n        }, 200);\n    }\n\n    if (document.readyState === \"loading\") {\n      document.addEventListener(\"DOMContentLoaded\", function () {\n        tryInit(10);\n      });\n    } else {\n      tryInit(10);\n    }\n    window.addEventListener(\"load\", function () {\n      tryInit(3);\n    });\n\n    if (typeof MutationObserver !== \"undefined\") {\n      let mo;\n      const start = function () {\n        if (mo || initialized) return;\n        mo = new MutationObserver(function () {\n          if (!initialized && document.getElementById(\"iftpl-root\")) {\n            init();\n            if (initialized) {\n              mo.disconnect();\n              mo = null;\n            }\n          }\n        });\n        mo.observe(document.body, { childList: true, subtree: true });\n        setTimeout(function () {\n          if (mo) {\n            mo.disconnect();\n            mo = null;\n          }\n        }, 10000);\n      };\n      if (document.body) start();\n      else document.addEventListener(\"DOMContentLoaded\", start);\n    }\n  })();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Home \/ Free Resources \/ Templates \/ Invoice Templates Professional Invoice Templates for Every Industry Download a free invoice template in PDF, Word, Excel, Google Docs, or Google Sheets. Customize your bill format, add your logo and payment terms, and send professional invoices in minutes. Create Invoice with Invoice Fly App Browse Templates Online 4.8 [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_yoast_wpseo_focuskw":"","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"class_list":["post-98026","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.8 (Yoast SEO v25.8) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Invoice Templates HTML Test &#8211; Invoice Fly<\/title>\n<meta name=\"robots\" content=\"noindex, nofollow\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Invoice Templates HTML Test\" \/>\n<meta property=\"og:description\" content=\"Home \/ Free Resources \/ Templates \/ Invoice Templates Professional Invoice Templates for Every Industry Download a free invoice template in PDF, Word, Excel, Google Docs, or Google Sheets. Customize your bill format, add your logo and payment terms, and send professional invoices in minutes. Create Invoice with Invoice Fly App Browse Templates Online 4.8 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/invoicefly.com\/es\/invoice-templates-html-test\/\" \/>\n<meta property=\"og:site_name\" content=\"Invoice Fly\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/invoiceflyapp\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-19T15:18:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2023\/09\/invoice-fly-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"524\" \/>\n\t<meta property=\"og:image:height\" content=\"113\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/invoicefly.com\/invoice-templates-html-test\/\",\"url\":\"https:\/\/invoicefly.com\/invoice-templates-html-test\/\",\"name\":\"Invoice Templates HTML Test &#8211; Invoice Fly\",\"isPartOf\":{\"@id\":\"https:\/\/invoicefly.com\/#website\"},\"datePublished\":\"2026-06-19T12:06:41+00:00\",\"dateModified\":\"2026-06-19T15:18:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/invoicefly.com\/invoice-templates-html-test\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/invoicefly.com\/invoice-templates-html-test\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/invoicefly.com\/invoice-templates-html-test\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Invoice Fly\",\"item\":\"https:\/\/invoicefly.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Invoice Templates HTML Test\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/invoicefly.com\/#website\",\"url\":\"https:\/\/invoicefly.com\/\",\"name\":\"Invoice Fly\",\"description\":\"The Best Invoice App\",\"publisher\":{\"@id\":\"https:\/\/invoicefly.com\/#organization\"},\"alternateName\":\"Invoice Fly\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/invoicefly.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/invoicefly.com\/#organization\",\"name\":\"Invoice Fly\",\"alternateName\":\"Invoice Fly\",\"url\":\"https:\/\/invoicefly.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/invoicefly.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/invoicefly.com\/wp-content\/uploads\/2023\/09\/invoice-fly-logo.png\",\"contentUrl\":\"https:\/\/invoicefly.com\/wp-content\/uploads\/2023\/09\/invoice-fly-logo.png\",\"width\":524,\"height\":113,\"caption\":\"Invoice Fly\"},\"image\":{\"@id\":\"https:\/\/invoicefly.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/invoiceflyapp\/\",\"https:\/\/www.instagram.com\/invoiceflyapp\/\",\"https:\/\/www.tiktok.com\/@invoicefly\",\"https:\/\/www.youtube.com\/channel\/UCS20FuF4lzTotiD3cOHKYTg\"],\"description\":\"Invoice Fly helps you send estimates & invoices, collect credit card and online payments fast, build reports, track expenses, organize your clients and items and run your home service business with ease.\\u2028\",\"legalName\":\"Invoice Fly\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Invoice Templates HTML Test &#8211; Invoice Fly","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"es_ES","og_type":"article","og_title":"Invoice Templates HTML Test","og_description":"Home \/ Free Resources \/ Templates \/ Invoice Templates Professional Invoice Templates for Every Industry Download a free invoice template in PDF, Word, Excel, Google Docs, or Google Sheets. Customize your bill format, add your logo and payment terms, and send professional invoices in minutes. Create Invoice with Invoice Fly App Browse Templates Online 4.8 [&hellip;]","og_url":"https:\/\/invoicefly.com\/es\/invoice-templates-html-test\/","og_site_name":"Invoice Fly","article_publisher":"https:\/\/www.facebook.com\/invoiceflyapp\/","article_modified_time":"2026-06-19T15:18:58+00:00","og_image":[{"width":524,"height":113,"url":"https:\/\/invoicefly.com\/wp-content\/uploads\/2023\/09\/invoice-fly-logo.png","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/invoicefly.com\/invoice-templates-html-test\/","url":"https:\/\/invoicefly.com\/invoice-templates-html-test\/","name":"Invoice Templates HTML Test &#8211; Invoice Fly","isPartOf":{"@id":"https:\/\/invoicefly.com\/#website"},"datePublished":"2026-06-19T12:06:41+00:00","dateModified":"2026-06-19T15:18:58+00:00","breadcrumb":{"@id":"https:\/\/invoicefly.com\/invoice-templates-html-test\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/invoicefly.com\/invoice-templates-html-test\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/invoicefly.com\/invoice-templates-html-test\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Invoice Fly","item":"https:\/\/invoicefly.com\/"},{"@type":"ListItem","position":2,"name":"Invoice Templates HTML Test"}]},{"@type":"WebSite","@id":"https:\/\/invoicefly.com\/#website","url":"https:\/\/invoicefly.com\/","name":"Invoice Fly","description":"La Mejor App de Facturaci\u00f3n","publisher":{"@id":"https:\/\/invoicefly.com\/#organization"},"alternateName":"Invoice Fly","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/invoicefly.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/invoicefly.com\/#organization","name":"Invoice Fly","alternateName":"Invoice Fly","url":"https:\/\/invoicefly.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/invoicefly.com\/#\/schema\/logo\/image\/","url":"https:\/\/invoicefly.com\/wp-content\/uploads\/2023\/09\/invoice-fly-logo.png","contentUrl":"https:\/\/invoicefly.com\/wp-content\/uploads\/2023\/09\/invoice-fly-logo.png","width":524,"height":113,"caption":"Invoice Fly"},"image":{"@id":"https:\/\/invoicefly.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/invoiceflyapp\/","https:\/\/www.instagram.com\/invoiceflyapp\/","https:\/\/www.tiktok.com\/@invoicefly","https:\/\/www.youtube.com\/channel\/UCS20FuF4lzTotiD3cOHKYTg"],"description":"Invoice Fly te ayuda a enviar presupuestos y facturas, cobrar tarjetas de cr\u00e9dito y pagos en l\u00ednea r\u00e1pidamente, generar informes, rastrear gastos, organizar tus clientes y art\u00edculos y administrar tu negocio de servicios del hogar con facilidad.","legalName":"Invoice Fly"}]}},"hero_title":"","hero_text":"","how_to_title":null,"how_to_content_1":null,"how_to_content_2":null,"how_to_content_3":null,"how_to_content_4":null,"key_section_title":null,"bill_confidently_title":null,"icon_title_1":null,"icon_text_1":null,"icon_title_2":null,"icon_text_2":null,"icon_title_3":null,"icon_text_3":null,"icon_title_4":null,"icon_text_4":null,"icon_title_5":null,"icon_text_5":null,"icon_title_6":null,"icon_text_6":null,"icon_title_7":null,"icon_text_7":null,"faq_header":null,"faq_text":null,"faq_title_1":null,"faq_content_1":"","faq_title_2":null,"faq_content_2":"","faq_title_3":null,"faq_content_3":"","faq_title_4":null,"faq_content_4":"","faq_title_5":null,"faq_content_5":"","faq_title_6":null,"faq_content_6":null,"faq_title_7":null,"faq_content_7":null,"faq_title_8":null,"faq_content_8":null,"faq_title_9":null,"faq_content_9":null,"faq_title_10":null,"faq_content_10":null,"get_paid_title":null,"get_paid_text":null,"stay_on_top_title":null,"stay_on_top_text":null,"icon_2_title_1":null,"icon_2_text_1":null,"icon_2_title_2":null,"icon_2_text_2":null,"icon_2_title_3":null,"icon_2_text_3":null,"icon_2_title_4":null,"icon_2_text_4":null,"invoicing_that_title":null,"invoicing_that_text":null,"icon_3_title_1":null,"icon_3_text_1":null,"icon_3_title_2":null,"icon_3_text_2":null,"icon_3_title_3":null,"icon_3_text_3":null,"icon_3_title_4":null,"icon_3_text_4":null,"faq_title_header":null,"faq_text_header":null,"hero_image":null,"invoice_template_title_seo":"","descripcion_invoice_template_seo":"","whats_included_title":"","whats_included_text":"","whats_included_image":false,"faqs_title":"","faq_1":"","faq_2":"","faq_3":"","faq_4":"","faq_5":"","_links":{"self":[{"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/pages\/98026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/comments?post=98026"}],"version-history":[{"count":79,"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/pages\/98026\/revisions"}],"predecessor-version":[{"id":98129,"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/pages\/98026\/revisions\/98129"}],"wp:attachment":[{"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/media?parent=98026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}