{"id":98419,"date":"2026-06-22T17:47:23","date_gmt":"2026-06-22T16:47:23","guid":{"rendered":"https:\/\/invoicefly.com\/?page_id=98419"},"modified":"2026-06-26T16:48:53","modified_gmt":"2026-06-26T15:48:53","slug":"receipt-templates-test-html","status":"publish","type":"page","link":"https:\/\/invoicefly.com\/es\/receipt-templates-test-html\/","title":{"rendered":"Receipt Templates test HTML"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"98419\" class=\"elementor elementor-98419\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7318c55 e-con-full e-flex e-con e-parent\" data-id=\"7318c55\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aa32ba3 elementor-widget elementor-widget-html\" data-id=\"aa32ba3\" 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 receipts 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 (receipt 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  @media (min-width: 1025px) {\n    .iftpl-widget .how-step-text {\n      min-height: 135px;\n    }\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 RECEIPT 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\" receipt 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  \/* Receipt 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  \/* Receipt 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\">Receipt Templates<\/span>\n          <\/div>\n          <h1 class=\"hero-h1\">\n            Professional Receipt Templates to\n            <span class=\"hi\">Print, Edit &amp; Share<\/span>\n          <\/h1>\n          <p class=\"hero-lead\">\n            Download free printable receipt templates in PDF, Word, Excel,\n            Google Docs, and Google Sheets. Customize your receipt template with\n            your logo, payment details, and branding to create professional\n            receipts for every sale.\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 Receipt 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\/06\/Minimal-Beige-Receipt-Template.png\"\n                alt=\"Minimal Beige Receipt 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\/06\/Minimal-Blue-Geometric-Receipt-Template-copy.png\"\n                alt=\"Minimal Blue Geometric Receipt 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\/06\/Classic-Forest-Green-Receipt-Template.png\"\n                alt=\"Classic Forest Green Receipt 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>Receipt 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\"\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 on\"\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 receipt 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>Join 125,000+ Businesses That Trust Invoice Fly<\/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 Users<\/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\">Payments processed<\/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\">Average 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  <!-- ==================== RECEIPT 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 a Receipt. Send. Get Paid<\/h2>\n      <p>\n        Choose a free receipt template, customize it with your business details,\n        then download, print, or send it to your customer. Every template is\n        available in PDF, Word, Excel, Google Docs, and Google Sheets.\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\">Choose a Template<\/h3>\n        <p class=\"how-step-text\">\n          Browse free receipt templates by industry, style, or format. Whether\n          you need a restaurant receipt, contractor receipt, sales receipt, or\n          printable receipt template, there's a design ready for your 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\">Customize Your Receipt<\/h3>\n        <p class=\"how-step-text\">\n          Add your business information, customer details, products or services,\n          pricing, taxes, and payment terms. Customize your receipt template in\n          Word, Excel, PDF, Google Docs, or Google Sheets in just a few minutes.\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 receipt as a printable PDF, Excel spreadsheet,\n          or Word document. Print it, email it, or send it digitally to your\n          customer, and when you're ready, use Invoice Fly to accept payments\n          and get paid hassle-free.\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          A professional receipt is more than proof of payment\u2014it's a reflection\n          of your business. Whether you're creating a printable receipt, sales\n          receipt, or invoice receipt, these eight essential elements help you\n          create polished, accurate receipts your customers can trust.\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>Receipt Header<\/strong>\n            <span\n              >Start with a clear receipt title at the top of your document.\n              This instantly tells the customer it is a receipt, not an invoice\n              or quote.<\/span\n            >\n          <\/div>\n          <div class=\"ks-item\">\n            <div class=\"ks-num\">2<\/div>\n            <strong>Receipt number and dates<\/strong>\n            <span\n              >Include a unique receipt number, issue date, and validity or due\n              date so both you and your client can track the receipt\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 receipt 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              receiptd.<\/span\n            >\n          <\/div>\n        <\/div>\n        <div class=\"ks-doc\">\n          <img\n            src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Estimate-template-points-e1780490309916.webp\"\n            alt=\"Receipt 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 receipt should show\n              subtotal, tax, discount, shipping, and the total receipt\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, receipt 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 receipt<\/strong>\n            <span\n              >Add payment terms such as deposit requirements, milestones, or\n              completion terms, and clearly highlight the final total\n              receipt.<\/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          Your Free Receipt Template is Just the Beginning\n        <\/h2>\n        <p class=\"features-lead\">\n          Your business deserves more than editable receipt templates. Invoice\n          Fly brings together receipts, invoicing, online payments, customer\n          management, estimates, and reporting in one beautifully simple\n          platform.\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 and online payments directly from your receipts and\n                invoices.<\/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>Keep Every Customer Organized<\/strong>\n              <span\n                >Store receipts, invoices, payments, and customer history in one\n                place.<\/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>Never Chase Payments Again<\/strong>\n              <span\n                >Automatic payment reminders help you reduce late payments\n                without lifting a finger.<\/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>Run Your Business, Not Just Your Billing<\/strong>\n              <span\n                >Create estimates, invoices, receipts, and reports from one app\n                built for growing businesses.<\/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\/receipt-scsanner-step-3.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>Businesses Love Invoice Fly. Here's Why.<\/h2>\n      <p>\n        Every business has a different workflow, but they all want the same\n        thing: professional receipts, faster payments, and less admin. That's\n        why businesses choose Invoice Fly.\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          \"I started with a free receipt template and ended up switching to the\n          app. Everything looks more professional, and I spend far less time on\n          paperwork.\"\n        <\/p>\n        <div class=\"quote-author\">\n          <div class=\"quote-avatar\">OM<\/div>\n          <div>\n            <div class=\"quote-name\">Olivia M.<\/div>\n            <div class=\"quote-role\">\n              Freelance Interior Designer \u00b7 Austin, TX\n            <\/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          \"Being able to create a receipt on my phone before I leave the job has\n          completely changed how I work. Clients pay faster because everything\n          is sent instantly.\"\n        <\/p>\n        <div class=\"quote-author\">\n          <div class=\"quote-avatar\">DP<\/div>\n          <div>\n            <div class=\"quote-name\">Daniel P.<\/div>\n            <div class=\"quote-role\">Electrical Contractor \u00b7 Denver, CO<\/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          \"The templates got me started, but Invoice Fly keeps my receipts,\n          invoices, and payments organized in one place. I honestly wish I'd\n          switched sooner.\"\n        <\/p>\n        <div class=\"quote-author\">\n          <div class=\"quote-avatar\">SL<\/div>\n          <div>\n            <div class=\"quote-name\">Sophia L.<\/div>\n            <div class=\"quote-role\">Boutique Owner \u00b7 Miami, FL<\/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 Receipt Template vs. Invoice Fly Receipt Software<\/h2>\n      <p>\n        A free receipt template gives you a professional document you can\n        download, edit, and share with your customers. It's a simple way to\n        create polished receipts without starting from scratch.\n      <\/p>\n      <p>\n        <strong>Invoice Fly Receipt Software<\/strong> goes beyond editable\n        templates by helping you manage the entire payment workflow, from\n        creating and sending receipts to tracking payments, organizing\n        customers, and running your business from one place.\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>Fully Editable Templates<\/h3>\n          <p>\n            Download professional receipt templates in Word, Excel, PDF, or\n            Google Docs and customize every detail to match your business and\n            brand.\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>Save Time with Reusable Information<\/h3>\n          <p>\n            Instead of editing a new file every time, Invoice Fly securely saves\n            your business details, customers, products, and taxes for faster\n            receipt creation.\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>From Documents to Payments<\/h3>\n          <p>\n            Receipt templates help you create a receipt. Invoice Fly lets you\n            send it, accept online payments, track payment status, and automate\n            reminders\u2014all from one place.\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>Built to Grow with Your Business<\/h3>\n          <p>\n            Templates are a great starting point. As your business grows,\n            Invoice Fly helps you organize customers, receipts, invoices, and\n            payments without relying on spreadsheets or folders.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== AI RECEIPT 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>Skip the editing. Try our Free Receipt Maker<\/h2>\n        <p>\n          Skip the spreadsheet. Skip the formatting.\n          <a\n            href=\"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/\"\n            style=\"\n              color: var(--brand) !important;\n              text-decoration: underline !important;\n            \"\n            >Invoice Fly's free receipt maker<\/a\n          >\n          turns \"I need a receipt template\" into a polished, professional\n          receipt in under a minute.\n        <\/p>\n        <p>\n          Simply enter your business details, customer information, products or\n          services, pricing, and payment method. Our receipt maker automatically\n          calculates taxes, totals, and discounts, then generates a clean,\n          branded PDF that's ready to download, print, or email.\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 professional receipts online in seconds\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 receipt 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 business 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, totals, and discounts\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 polished PDF receipts\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            Email receipts directly to your customers\n          <\/li>\n        <\/ul>\n        <a\n          href=\"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/\"\n          class=\"btn btn-primary btn-lg\"\n        >\n          Try the Free Receipt 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              Receipt\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  <section class=\"more-tpl\">\n    <div class=\"more-tpl-head\">\n      <h2>Specialized Receipt Templates for Every Billing Need<\/h2>\n      <p>\n        Every business works differently, so your receipts should too. Whether\n        you're looking for a blank receipt template, a printable receipt\n        template, or a format designed for your country or industry, you'll find\n        professionally designed templates that are easy to customize and free to\n        download.\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 Receipt Template<\/h3>\n        <p>\n          Start with a clean canvas and make it your own. Add your logo,\n          business details, products or services, pricing, and payment\n          information to create a receipt that feels uniquely yours.\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 Receipt 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 Receipt Template<\/h3>\n        <p>\n          Need something ready to print? This printable receipt template is\n          designed to look great on paper or as a PDF, making it easy to hand to\n          customers or send digitally.\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 Receipt 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 Receipt Template<\/h3>\n        <p>\n          Built for Australian businesses, this receipt template includes space\n          for GST, ABN, tax details, and everything you need to create clear,\n          professional receipts with confidence.\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 Receipt 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 RECEIPT 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 Receipt Templates<\/span>\n        <h2>Make Every Receipt Count with Invoice Fly.<\/h2>\n        <p>\n          The difference between looking established and looking improvised often\n          comes down to the details. A professional receipt doesn't just confirm\n          a payment\u2014it reassures customers they've chosen a business they can\n          trust. It strengthens your brand, keeps records organized, and leaves\n          a lasting impression long after the transaction is complete.\n        <\/p>\n        <p>\n          Invoice Fly's free receipt templates help you create beautifully\n          branded receipts in minutes. Add your logo, business details, products\n          or services, taxes, and payment information to create receipts that\n          feel polished, consistent, and unmistakably yours. Then download,\n          print, or email them with confidence.\n        <\/p>\n        <p>\n          <strong\n            >Choose your favorite receipt template and create your first\n            professional receipt today.<\/strong\n          >\n        <\/p>\n        <a\n          href=\"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/\"\n          class=\"btn btn-primary btn-lg\"\n        >\n          Create Free Receipt\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\">Receipt<\/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>Receipt Template FAQs<\/h2>\n        <p>\n          Know Everything About Receipts Before You Start Editing, Customizing,\n          and Sending\n        <\/p>\n      <\/div>\n      <div class=\"faq-list\">\n        <div class=\"faq-item open faq-item-media\">\n          <div class=\"faq-q\">\n            How can I create my own receipt?<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            Creating your own receipt is simple. Start with a professional\n            receipt template, add your business name, customer details, products\n            or services, pricing, taxes, and payment information, then download\n            or print it.\n            <img\n              class=\"faq-a-img\"\n              src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Light-Sky-blue-Receipt-Template.png\"\n              alt=\"Minimal Sky Blue Receipt Template example\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            \/>\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Where can I find free receipt 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            Invoice Fly offers a collection of free receipt templates for\n            businesses, freelancers, contractors, retailers, restaurants, and\n            more. Every template is professionally designed, fully customizable,\n            and available in PDF, Word, Excel, and Google Docs formats, making it\n            easy to create receipts that match your business.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Is there a receipt template in Word?<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. Invoice Fly provides editable receipt templates for Microsoft\n            Word, along with Excel, PDF, and Google Docs formats. Simply download\n            the template, customize your business details, and save or print\n            professional receipts whenever you need them.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Is there a free receipt generator?<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. If you don't want to edit a template manually, Invoice Fly's\n            free receipt maker lets you create professional receipts online in\n            minutes. Enter your business and customer information, products or\n            services, pricing, and payment details, then instantly download or\n            email your completed receipt.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            What's the difference between a receipt template and a receipt maker?<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            A receipt template is a pre-designed document that you edit yourself\n            in Word, Excel, Google Docs, Google Sheets or PDF. A receipt maker\n            creates receipts online automatically by formatting your information\n            for you. If you prefer complete flexibility, choose a template. If\n            you want the fastest way to create receipts, use a receipt maker.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            What should a professional receipt include?<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            A professional receipt should include your business name and logo,\n            receipt number, issue date, customer information, products or\n            services provided, pricing, taxes, discounts (if applicable),\n            payment method, total amount paid, and any notes or terms relevant to\n            the transaction. Including these details helps create accurate\n            records and gives customers confidence in your business.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Can I customize a receipt 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. Every Invoice Fly receipt template is fully customizable.\n            Add your logo, business name, contact information, brand colors, and\n            payment details to create professional receipts that match your\n            business identity.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Which receipt format should I choose?<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            That depends on how you work. PDF is ideal for sharing and printing,\n            Word offers quick editing, Excel is useful for calculations, and\n            Google Docs makes collaboration easy. Invoice Fly provides every\n            format, so you can choose the one that fits your workflow.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Are Invoice Fly receipt 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 receipt template on this page is free to download and\n            customize. There are no hidden fees, subscriptions, or\n            watermarks\u2014just professionally designed templates you can start using\n            right away.\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Can I use these receipt templates for my business?<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. Our receipt templates are suitable for small businesses,\n            freelancers, contractors, consultants, restaurants, retail stores,\n            service providers, and many other industries. Simply customize the\n            template with your business details and you're ready to create\n            professional receipts.\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 receipts.<\/h2>\n        <p>\n          Download Invoice Fly \u2014 free for the first 5 receipts 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-receipt-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    \/\/ RECEIPT FLY \u2014 RECEIPT TEMPLATES WIDGET v3\n    \/\/ Contractor-focused redesign.\n    \/\/ ============================================\n\n    const TEMPLATES = [\n      {\n        name: \"Minimal Blue Geometric Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Minimal-Blue-Geometric-Receipt-Template-copy.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Blue-Geometric-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Blue-Geometric-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Blue-Geometric-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/u\/1\/d\/1gf2UgdbgvVme4HddZFyurlWNP2_ue_TNQyV48whuOSo\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/u\/1\/d\/1TKQhjD1fWhFtW51gKio_vmIQ70ISKg-B3o3sB-MFdmQ\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=geometricBlue\",\n        industries:\n          \"autorepair business carpentry cleaning concrete construction consulting contractor electrical freelance handyman hvac landscaping\",\n      },\n      {\n        name: \"Minimal Brown Geometric Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Minimal-Brown-Geometric-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Brown-Geometric-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Brown-Geometric-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Brown-Geometric-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1gf2UgdbgvVme4HddZFyurlWNP2_ue_TNQyV48whuOSo\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1ND06TqjsX706DzW4u2Ul8JGl1wHw9siZTEzszWSjET0\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=geometricBrown\",\n        industries:\n          \"autorepair carpentry concrete consulting contractor electrical handyman hvac painting plumbing roofing therapy trucking\",\n      },\n      {\n        name: \"Classic Black Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Classic-Black-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Black-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Black-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Black-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/15zmalhS8GKshGsbBEh1AXkgHMBa2a6fMGLrguQIGbjY\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1yW3ztQIUaqMCH9_Glr6KCqE59imzKoAko7V0cToWj0M\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=classicV2Black\",\n        industries:\n          \"business catering cleaning concrete consulting contractor freelance lawncare mechanic painting photography\",\n      },\n      {\n        name: \"Classic Blue Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Classic-Blue-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Blue-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Blue-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Blue-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1b8qbZoKnqJtfzYRwZBR6wmNO37Who0tWfohDA1Rz6_U\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1cJov9ROcBLaZ02rMVbDsN-v-Ig0fLbjmpBSHuVpc1Ac\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=classicV2Blue\",\n        industries:\n          \"autorepair carpentry concrete construction consulting electrical hvac landscaping mechanic plumbing roofing selfemployedcleaner trucking\",\n      },\n      {\n        name: \"Classic Green & Beige Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Classic-Green-Beige-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Green-Beige-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Green-Beige-Receipt-Template.docx\",\n        excel:\n          \"\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1c0cnrwUX_rBvUjmok7ULHjvXz02fqGDb4L_u_VoCm9w\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1-B_jxOdHFl7Cnt-oZJw5z3yMBBdoFPQ7l1lEBFPCqXM\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=classicV2Green\",\n        industries:\n          \"autorepair carpentry concrete construction consulting electrical freelance hvac lawncare mechanic roofing treeremoval trucking\",\n      },\n      {\n        name: \"Minimal Azure Geometric Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Minimal-Azure-Geometric-Receipt-Template-.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Azure-Geometric-Receipt-Template-.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Beige-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Azure-Geometric-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/17xtHvPMk4zGSzb4YNU-cEtJ6KO29-QhFOGuVJm0hm8U\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1-C3XZdEdI1zl5HhdLgnAloT-pb2qPiKLiaCQc-6DvOE\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=geometricAzure\",\n        industries:\n          \"business carpentry catering cleaning concrete contractor freelance handyman hvac painting photography propertymanagement therapy\",\n      },\n      {\n        name: \"Classic Forest Green Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Classic-Forest-Green-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Forest-Green-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Forest-Green-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Forest-Green-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1Ms2uhhyI0CqZKluKTXoCQsm267vuSJ03qAVJNaaPSdg\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1cKf3SvQyiOcNciFOIG6eWI4AGaLtShEeRg3di6UGnMo\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=classicGreen\",\n        industries:\n          \"autorepair carpentry concrete construction electrical handyman hvac landscaping lawncare mechanic plumbing roofing trucking\",\n      },\n      {\n        name: \"Classic Purple Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Classic-Purple-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Purple-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Purple-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Purple-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1ljJcU5KhsunJvHX1Lfj-dh7EnnCzDjyzjK3SigYDx9E\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1CMo9OlMkN2ja3YtkA7oP64ScLaTU4sZ0GG2HD8J2i5M\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=classicPurple\",\n        industries:\n          \"autorepair business carpentry concrete construction electrical freelance handyman hvac mechanic roofing selfemployedcleaner trucking\",\n      },\n      {\n        name: \"Classic Beige Brown Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Classic-Beige-Brown-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Beige-Brown-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Beige-Brown-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Beige-Brown-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1IQMnrvcU7lzid7y8ChMZFok4ep6hwTNofeiY0-zP76A\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1OHCHV0msqdxuUbWzr1jnaQHXmpahPQ2PDVSVbQIE2-g\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=classicBeige\",\n        industries:\n          \"autorepair concrete consulting contractor electrical freelance hvac mechanic roofing therapy treeremoval trucking\",\n      },\n      {\n        name: \"Classic Olive Green Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Classic-Olive-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Olive-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Olive-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Olive-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1IQMnrvcU7lzid7y8ChMZFok4ep6hwTNofeiY0-zP76A\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/17c5TkIWwcVKxSS8XGdKZEwSrQsNsApHMekj4YKc8r_8\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=classicV3Olive\",\n        industries:\n          \"catering cleaning concrete consulting contractor freelance painting photography plumbing therapy treeremoval\",\n      },\n      {\n        name: \"Classic Purplish Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Classic-Purplish-Receipt-Template-1.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Purplish-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Purplish-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Purplish-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1-EzM34aBmGOEllfXGVV2UMpvZtVIdtgo9MU04w8VJIg\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/14bfsvfmpbVFwizYer7qvJQJNf6sqptqAKgIIaXN3-AQ\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=classicV3Purple\",\n        industries:\n          \"autorepair concrete consulting contractor electrical freelance hvac painting propertymanagement roofing therapy trucking\",\n      },\n      {\n        name: \"Classic Red Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Classic-Red-Receipt-Template-1.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Red-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Red-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Red-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1H62ha2OE9Z-gkqnaJKknfEu8GddnxqmyDtAGWpmmS6w\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1A8eRMfIVGf1aVlBVzPwDB5OUGrg1xrp_GOIVAX2vgg8\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=classicV3Red\",\n        industries:\n          \"business carpentry catering freelance handyman hvac lawncare painting photography propertymanagement therapy treeremoval\",\n      },\n      {\n        name: \"Modern Blue Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Modern-Blue-Receipt-Template-.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Blue-Receipt-Template-.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Blue-Receipt-Template-.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Blue-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1-c5dO-8HZXvwVZEIzpborLSE5IitQsjSnoVnQo-s2cY\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/10cFxY3txQSZroab6Zkxi6bWZXCGpZAGux1qUAZLIaHY\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=blueOutline\",\n        industries:\n          \"autorepair carpentry cleaning concrete construction contractor electrical hvac landscaping mechanic roofing selfemployedcleaner trucking\",\n      },\n      {\n        name: \"Modern Black Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Modern-Black-Receipt-Template-.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Black-Receipt-Template-.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Black-Receipt-Template-.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Black-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1vD5yeUvEB89ebdmNvtwXs1EZFgAq6zgiWX7vVz9Y5aQ\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1yK-nk8gDENMHaEJ4vYuFNUs4AhLxSUlbKXDi0uq-Uq8\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=blackOutline\",\n        industries:\n          \"business carpentry catering cleaning concrete construction handyman hvac landscaping lawncare photography plumbing selfemployedcleaner\",\n      },\n      {\n        name: \"Minimal Beige Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Minimal-Beige-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Beige-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Beige-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Beige-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1c8CvW7FE4vTe8E1AYE2YvRYa6Vap7RevdmlLQZ8WqRw\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1pJIDcMFgwBT7SbJvXbMs0_M22Jwzfvt52xXxhDQlWG0\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=beigeMinimal\",\n        industries:\n          \"business catering consulting lawncare painting photography plumbing propertymanagement therapy treeremoval\",\n      },\n      {\n        name: \"Minimal Light Sky Blue Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Minimal-Light-Sky-blue-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Light-Sky-blue-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Light-Sky-blue-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Light-Sky-Blue-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1t1qcvUZkmcDi1mQe4ukZShbcntHRNPRxK34KD9iyy3A\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1rt2o5k3CoN8kPLP1tZV0s8Ab7FHNceoHUwC3GawJkR4\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=lightblueMinimal\",\n        industries:\n          \"business carpentry catering cleaning handyman hvac landscaping painting photography plumbing propertymanagement selfemployedcleaner\",\n      },\n      {\n        name: \"Minimal Lime Green Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Minimal-Lime-Green-Receipt-Template-.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Lime-Green-Receipt-Template-.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Lime-Green-Receipt-Template-.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Minimal-Lime-Green-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1sCU98zrP1g_dX0N369gr2ax6gSwceXdhnQHUdY1IwcY\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1AI2DpUJI47oly_aXXbkMm2XVAhDIgU29mRmfNPAvpx0\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=limeMinimal\",\n        industries:\n          \"business carpentry catering cleaning concrete construction landscaping lawncare mechanic photography selfemployedcleaner treeremoval\",\n      },\n      {\n        name: \"Modern Azure Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Modern-Azure-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Azure-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Azure-Receipt-Template.docx\",\n        excel:\n          \"\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1sCU98zrP1g_dX0N369gr2ax6gSwceXdhnQHUdY1IwcY\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1wH-5GCzIXUmAr6pcFuj68I1PlfpPIFcjuGtDb1aBHz4\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"business catering cleaning concrete consulting contractor landscaping mechanic painting selfemployedcleaner treeremoval\",\n      },\n      {\n        name: \"Modern Soft Peach Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Modern-Soft-Peach-Receipt-Template-.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Soft-Peach-Receipt-Template-.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Soft-Peach-Receipt-Template-.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Soft-Peach-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1GqPIOf5UsVEkWDYgyC7tOgpIkyucdcovjl-LnYrGCbc\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1gNWOE26o132dpSWO29nu5-jwYMa7qvPrHS33h1b40VA\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=modernFrameBeige\",\n        industries:\n          \"autorepair carpentry concrete construction electrical freelance handyman hvac landscaping painting roofing treeremoval trucking\",\n      },\n      {\n        name: \"Modern Teal Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Modern-Teal-Receipt-Template-.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Teal-Receipt-Template-.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Teal-Receipt-Template-.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Modern-Teal-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1wpUx0W2oeh1bsXIk5A2YodB6fjHIlmN8E7ibs5tAH5M\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1H7f82ZaqIzzkOfSU4TjEf5uhMSkrZrfPIRurDLgov-4\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        generator:\n          \"https:\/\/invoicefly.com\/free-resources\/free-generators\/free-receipt-generator\/?theme=modernFrameBlue\",\n        industries:\n          \"business carpentry catering cleaning concrete consulting contractor handyman hvac mechanic roofing selfemployedcleaner treeremoval\",\n      },\n      {\n        name: \"Sky Blue Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Sky-Blue-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Sky-Blue-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Sky-Blue-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Sky-Blue-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1OSqlHaWFkn3Di-ogNO0jdtkzv_bLzTF9MRsiXQYQ9gc\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1nTM5RgCW80-SSMm8zVnmYq0jCsbrX8-CqWB_1Ht8TAY\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"business catering cleaning freelance landscaping lawncare mechanic propertymanagement selfemployedcleaner treeremoval\",\n      },\n      {\n        name: \"Azure Dark Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Azure-Dark-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Azure-Dark-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Azure-Dark-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Azure-Dark-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1sCU98zrP1g_dX0N369gr2ax6gSwceXdhnQHUdY1IwcY\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1WDESYmTusb6i2LjOIV-WBSCI4uVSeBJ_YBz9ZGmn5-0\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"business catering cleaning consulting freelance photography plumbing propertymanagement therapy treeremoval\",\n      },\n      {\n        name: \"Clean Teal & Yellow Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Clean-Teal-Yellow-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Clean-Teal-Yellow-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Clean-Teal-Yellow-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Clean-Teal-Yellow-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1H2v8eGkRPx3eI9Z9UF9F8s6Nrgk-xqP79o2aed5ihyo\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1G9nFzFtSf0Nz1YdreWtyVr3arKKq3IC2DpN2akd8mP8\/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: \"Clean Red & Pink Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Clean-Red-Pink-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Clean-Red-Pink-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Clean-Red-Pink-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Clean-Red-Pink-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1E8M58vDkxqQA5qmUjQmc57-7A6fNpcqHfpf5qgPmKEg\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1wmxTrdCj5gz3-Sf7a1n7-KM1vjzCbiPDs5AQ8CNLlp4\/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: \"Floral Green Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Floral-Green-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Floral-Green-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Floral-Green-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Floral-Green-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1ccAh_l73vxPPZgK0E5L74VITvoSj9ugLxaKf-nkD-7c\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1vG0GU4r2y5AabJfZZYWj6debVuXXpQX_sffNvyn02qQ\/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: \"Floral Purple Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Floral-Purple-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Floral-Purple-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Floral-Purple-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Floral-Purple-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/17VdEf6VD9QjJRQYVNeNItIDSzq-dtZL4g8D0Hykz208\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/169jcrWIz-qXzbEWLSVfoCcZ9DJRcdu6DCNdoiGIZIao\/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: \"Clean Gradient Purple Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Clean-Gradient-Purple-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Clean-Gradient-Purple-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Clean-Gradient-Purple-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Clean-Gradient-Purple-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/16cgd6bXqZKAcewyqeLuC4twJGTlB8mFLS-RRR_U_378\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/18teWXTejgtIjL74czKRNTBYfIAFXd8Mx4DjJ8viogz0\/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        name: \"Clean Gradient Blue Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Clean-Gradient-Blue-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Clean-Gradient-Blue-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Clean-Gradient-Blue-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Clean-Gradient-Blue-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1br7pnmXNKdUyja9Kip0hkR6dxCxffmtWvtcfGzg8LTU\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1s8yBvIFZ85x-EIzy5H3I-KDgCyNERu-yMIuqKM449GQ\/copy\",\n        app: \"https:\/\/invoicefly.com\/appinvoicefly\/\",\n        industries:\n          \"business catering cleaning freelance landscaping painting plumbing propertymanagement selfemployedcleaner treeremoval\",\n      },\n      {\n        name: \"Artistic Purple Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Artistic-Purple-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Artistic-Purple-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Artistic-Purple-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Artistic-Purple-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1wdYtRvUsrXxE78WPz7BwkBWMaEMT5JO_897ds-Qhpq4\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1UkIWPyGhwI9Nvaw93yeR0QwxNurQ0ugyEoGntMquoCs\/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: \"Classic Modern Black Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Classic-Modern-Black-Receipt-Template-1.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Modern-Black-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Modern-Black-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Modern-Black-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1Vgd7ULIb0hmBxUu3Ez7YWMt2iTv69CTDiJ35e8jIqjo\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1GwsgywyDFvLwZkdCV-YG5ZTx9s0yI3ND7mu9qN9Of0Q\/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: \"Classic Light Lemon Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Classic-Light-Lemon-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Light-Lemon-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Light-Lemon-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Classic-Light-Lemon-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/13t_7w_2kJNOtYsw06L3cYae7vCUkkNlaRmDwp_C9dXg\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1ShcHduSrT1gAyMsE7PapjpnTCjD1cuauAc-pXn_2vKQ\/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: \"Blue and Red Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Blue-and-Red-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Blue-and-Red-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Blue-and-Red-Receipt-Template.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Blue-and-Red-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1vWLKcf6pGRtdrYtNYEDO-1r97fVyemew7_Rxq9h77XQ\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1EkUKM8k06eLH2Gi7Z8zQ1IrthRdffVqo-icbURINvDw\/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: \"Blue and Yellow Receipt Template\",\n        desc: \"This classic receipt 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\/06\/Blue-and-Yellow-Receipt-Template.png\",\n        pdf: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Blue-and-Yellow-Receipt-Template.pdf\",\n        word: \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Blue-and-Yellow-Receipt-Template-WORD.docx\",\n        excel:\n          \"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Blue-Yellow-Receipt-Template.xlsx\",\n        gdoc: \"https:\/\/docs.google.com\/document\/d\/1wX-LwNbXm0nU3VepAWbwhQmIIfL-hNbY05SPsytu_cA\/copy\",\n        sheet:\n          \"https:\/\/docs.google.com\/spreadsheets\/d\/1f2LnopX7lNYtZ2s1O_A6XaI7YAzOa3xGWt-B-m3dH7E\/copy\",\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\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> Receipt 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\">Start with Free Receipt Templates. <span class=\"hi\">Grow with Invoice Fly.<\/span><\/div>' +\n        '<p class=\"tpl-cta-text\">Every business starts somewhere. Begin with a free receipt template, then upgrade to Invoice Fly when you\\'re ready to create receipts, collect payments, and manage everything from one beautifully simple app.<\/p>' +\n        '<a class=\"tpl-cta-btn download_app\" href=\"https:\/\/invoicefly.onelink.me\/AeUs\/qohijf8g\" target=\"_blank\" rel=\"noopener\">Get the Invoice Fly 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\">Receipt #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-receipt-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 \/ Receipt Templates Professional Receipt Templates to Print, Edit &amp; Share Download free printable receipt templates in PDF, Word, Excel, Google Docs, and Google Sheets. Customize your receipt template with your logo, payment details, and branding to create professional receipts for every sale. Create Receipt with Invoice Fly App [&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-98419","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>Receipt Templates test HTML &#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=\"Receipt Templates test HTML\" \/>\n<meta property=\"og:description\" content=\"Home \/ Free Resources \/ Templates \/ Receipt Templates Professional Receipt Templates to Print, Edit &amp; Share Download free printable receipt templates in PDF, Word, Excel, Google Docs, and Google Sheets. Customize your receipt template with your logo, payment details, and branding to create professional receipts for every sale. Create Receipt with Invoice Fly App [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/invoicefly.com\/es\/receipt-templates-test-html\/\" \/>\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-26T15:48:53+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<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"92 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/invoicefly.com\/receipt-templates-test-html\/\",\"url\":\"https:\/\/invoicefly.com\/receipt-templates-test-html\/\",\"name\":\"Receipt Templates test HTML &#8211; Invoice Fly\",\"isPartOf\":{\"@id\":\"https:\/\/invoicefly.com\/#website\"},\"datePublished\":\"2026-06-22T16:47:23+00:00\",\"dateModified\":\"2026-06-26T15:48:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/invoicefly.com\/receipt-templates-test-html\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/invoicefly.com\/receipt-templates-test-html\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/invoicefly.com\/receipt-templates-test-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Invoice Fly\",\"item\":\"https:\/\/invoicefly.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Receipt Templates test HTML\"}]},{\"@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":"Receipt Templates test HTML &#8211; Invoice Fly","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"es_ES","og_type":"article","og_title":"Receipt Templates test HTML","og_description":"Home \/ Free Resources \/ Templates \/ Receipt Templates Professional Receipt Templates to Print, Edit &amp; Share Download free printable receipt templates in PDF, Word, Excel, Google Docs, and Google Sheets. Customize your receipt template with your logo, payment details, and branding to create professional receipts for every sale. Create Receipt with Invoice Fly App [&hellip;]","og_url":"https:\/\/invoicefly.com\/es\/receipt-templates-test-html\/","og_site_name":"Invoice Fly","article_publisher":"https:\/\/www.facebook.com\/invoiceflyapp\/","article_modified_time":"2026-06-26T15:48:53+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","twitter_misc":{"Tiempo de lectura":"92 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/invoicefly.com\/receipt-templates-test-html\/","url":"https:\/\/invoicefly.com\/receipt-templates-test-html\/","name":"Receipt Templates test HTML &#8211; Invoice Fly","isPartOf":{"@id":"https:\/\/invoicefly.com\/#website"},"datePublished":"2026-06-22T16:47:23+00:00","dateModified":"2026-06-26T15:48:53+00:00","breadcrumb":{"@id":"https:\/\/invoicefly.com\/receipt-templates-test-html\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/invoicefly.com\/receipt-templates-test-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/invoicefly.com\/receipt-templates-test-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Invoice Fly","item":"https:\/\/invoicefly.com\/"},{"@type":"ListItem","position":2,"name":"Receipt Templates test HTML"}]},{"@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\/98419","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=98419"}],"version-history":[{"count":13,"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/pages\/98419\/revisions"}],"predecessor-version":[{"id":98635,"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/pages\/98419\/revisions\/98635"}],"wp:attachment":[{"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/media?parent=98419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}