{"id":97528,"date":"2026-06-12T22:25:56","date_gmt":"2026-06-12T21:25:56","guid":{"rendered":"https:\/\/invoicefly.com\/?page_id=97528"},"modified":"2026-06-19T17:21:22","modified_gmt":"2026-06-19T16:21:22","slug":"receipt-generator-test-html","status":"publish","type":"page","link":"https:\/\/invoicefly.com\/es\/receipt-generator-test-html\/","title":{"rendered":"Receipt Generator test HTML"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"97528\" class=\"elementor elementor-97528\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70a27cf e-con-full e-flex e-con e-parent\" data-id=\"70a27cf\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b9617f elementor-widget elementor-widget-html\" data-id=\"4b9617f\" 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\/>\n\n<style>\n  \/* ===== WORDPRESS \/ ELEMENTOR COMPATIBILITY ===== *\/\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  .ifig-widget a {\n    color: inherit !important;\n    text-decoration: none !important;\n  }\n  .ifig-widget img {\n    display: block;\n    max-width: 100%;\n    height: auto;\n  }\n  .ifig-widget *,\n  .ifig-widget *::before,\n  .ifig-widget *::after {\n    box-sizing: border-box;\n  }\n\n  \/* ===== ROOT SCOPE ===== *\/\n  .ifig-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  .ifig-widget h1,\n  .ifig-widget h2,\n  .ifig-widget h3,\n  .ifig-widget h4,\n  .ifig-widget p,\n  .ifig-widget ul,\n  .ifig-widget li {\n    margin: 0;\n    padding: 0;\n  }\n  .ifig-widget ul {\n    list-style: none;\n  }\n  .ifig-widget button {\n    font-family: inherit;\n    cursor: pointer;\n    background: none;\n    border: none;\n    color: inherit;\n    padding: 0;\n  }\n  .ifig-widget a {\n    color: inherit;\n    text-decoration: none;\n  }\n  .ifig-widget svg {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  \/* ===== BUTTONS ===== *\/\n  .ifig-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: all 0.2s var(--ease);\n    white-space: nowrap;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n  }\n  .ifig-widget .btn-primary {\n    background: var(--brand);\n    color: white !important;\n    border-color: var(--brand);\n    box-shadow: var(--shadow-brand);\n  }\n  .ifig-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  .ifig-widget .btn-outline {\n    background: white;\n    color: var(--ink);\n    border-color: var(--line);\n  }\n  .ifig-widget .btn-outline:hover {\n    border-color: var(--ink);\n    background: var(--bg-soft);\n  }\n  .ifig-widget .btn-lg {\n    padding: 14px 26px;\n    font-size: 15.5px;\n  }\n\n  \/* ===== HERO ===== *\/\n  .ifig-widget .hero {\n    padding: 120px 32px 48px;\n    text-align: center;\n    position: relative;\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    isolation: isolate;\n  }\n  .ifig-widget .hero > * {\n    position: relative;\n    z-index: 1;\n  }\n  .ifig-widget .hero .crumbs {\n    color: rgba(255, 255, 255, 0.45);\n  }\n  .ifig-widget .hero .crumbs a:hover {\n    color: white;\n  }\n  .ifig-widget .hero .crumbs .current {\n    color: rgba(255, 255, 255, 0.7);\n  }\n  .ifig-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  .ifig-widget .hero .hero-badge-dot {\n    background: var(--brand-500);\n  }\n  .ifig-widget .hero .hero-h1 {\n    color: white;\n  }\n  .ifig-widget .hero .hero-h1 .hi {\n    color: #6b9fff;\n  }\n  .ifig-widget .hero .hero-lead {\n    color: rgba(255, 255, 255, 0.75);\n  }\n  .ifig-widget .hero .hero-pay {\n    max-width: 760px;\n  }\n  .ifig-widget .hero .hero-pay-label {\n    color: rgba(255, 255, 255, 0.55);\n  }\n  .ifig-widget .crumbs {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--ink-faint);\n    margin-bottom: 22px;\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: wrap;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    justify-content: center;\n  }\n  .ifig-widget .crumbs a:hover {\n    color: var(--brand);\n  }\n  .ifig-widget .crumbs .sep {\n    color: var(--ink-faint);\n    opacity: 0.5;\n  }\n  .ifig-widget .crumbs .current {\n    color: var(--ink-soft);\n    font-weight: 600;\n  }\n  .ifig-widget .hero-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 16px;\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  .ifig-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  .ifig-widget .hero-h1 {\n    font-size: clamp(44px, 6.4vw, 88px) !important;\n    line-height: 1.04;\n    letter-spacing: -0.028em;\n    font-weight: 800;\n    color: var(--ink);\n    margin-bottom: 18px;\n    max-width: none;\n    margin-left: auto;\n    margin-right: auto;\n    white-space: nowrap;\n  }\n  .ifig-widget .hero-h1 .hi {\n    color: var(--brand);\n    position: relative;\n    display: inline-block;\n  }\n  .ifig-widget .hero-lead {\n    font-size: 16px !important;\n    line-height: 1.55;\n    color: var(--ink-soft);\n    max-width: 620px;\n    margin: 0 auto 32px;\n    white-space: normal;\n    text-align: center;\n  }\n  .ifig-widget .hero-pay {\n    max-width: 760px;\n    margin: 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 16px;\n  }\n  .ifig-widget .hero-pay-label {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    color: var(--ink-soft);\n    margin: 0;\n    white-space: nowrap;\n  }\n  .ifig-widget .hero-pay-logos {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 10px;\n  }\n  .ifig-widget .hero-pay-logo {\n    display: inline-flex;\n    line-height: 0;\n  }\n  .ifig-widget .hero-pay-logo svg {\n    height: 40px;\n    width: auto;\n    display: block;\n    filter: drop-shadow(0 3px 8px rgba(10, 22, 40, 0.22));\n  }\n\n  \/* ===== TOOL CONTAINER ===== *\/\n  .ifig-widget .tool-wrap {\n    border-top: 1px solid var(--line);\n    border-bottom: 1px solid var(--line);\n  }\n  .ifig-widget .tool-inner {\n    margin: 0 auto;\n    width: 100%;\n  }\n  .ifig-widget .tool-inner > * {\n    width: 100%;\n  }\n\n  \/* ===== HOW IT WORKS ===== *\/\n  .ifig-widget .how {\n    background: #f8f9fc;\n    padding: 96px 32px;\n    width: 100%;\n    position: relative;\n    overflow: hidden;\n    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n  .ifig-widget .how-wrap {\n    max-width: 1280px;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n  }\n  .ifig-widget .how-head {\n    text-align: center;\n    max-width: 720px;\n    margin: 0 auto 56px;\n  }\n  .ifig-widget .how-tag {\n    display: inline-block;\n    font-family: var(--font-mono) !important;\n    font-size: 11px !important;\n    color: var(--brand) !important;\n    letter-spacing: 0.1em !important;\n    text-transform: uppercase !important;\n    margin-bottom: 14px !important;\n    font-weight: 600 !important;\n  }\n  .ifig-widget .how-head h2 {\n    font-size: clamp(28px, 4vw, 44px) !important;\n    line-height: 1.1 !important;\n    letter-spacing: -0.02em !important;\n    font-weight: 800 !important;\n    color: var(--ink) !important;\n    margin-bottom: 14px !important;\n  }\n  .ifig-widget .how-head p {\n    color: var(--ink-mute) !important;\n    font-size: 16.5px !important;\n    line-height: 1.55 !important;\n  }\n  \/* drifting mesh-gradient blobs behind the section *\/\n  .ifig-widget .how-mesh {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    overflow: hidden;\n    pointer-events: none;\n  }\n  .ifig-widget .how-mesh span {\n    position: absolute;\n    border-radius: 50%;\n    filter: blur(70px);\n    opacity: 0.5;\n  }\n  .ifig-widget .how-mesh .m1 {\n    width: 440px;\n    height: 440px;\n    left: -120px;\n    top: -90px;\n    background: radial-gradient(\n      circle,\n      rgba(20, 94, 233, 0.3),\n      transparent 70%\n    );\n    animation: howDrift1 22s ease-in-out infinite;\n  }\n  .ifig-widget .how-mesh .m2 {\n    width: 380px;\n    height: 380px;\n    right: -110px;\n    top: 30px;\n    background: radial-gradient(circle, rgba(0, 69, 187, 0.2), transparent 70%);\n    animation: howDrift2 27s ease-in-out infinite;\n  }\n  .ifig-widget .how-mesh .m3 {\n    width: 400px;\n    height: 400px;\n    left: 32%;\n    bottom: -180px;\n    background: radial-gradient(\n      circle,\n      rgba(18, 183, 106, 0.14),\n      transparent 70%\n    );\n    animation: howDrift3 31s ease-in-out infinite;\n  }\n  @keyframes howDrift1 {\n    0%,\n    100% {\n      transform: translate(0, 0);\n    }\n    50% {\n      transform: translate(44px, 32px);\n    }\n  }\n  @keyframes howDrift2 {\n    0%,\n    100% {\n      transform: translate(0, 0);\n    }\n    50% {\n      transform: translate(-34px, 42px);\n    }\n  }\n  @keyframes howDrift3 {\n    0%,\n    100% {\n      transform: translate(0, 0);\n    }\n    50% {\n      transform: translate(24px, -34px);\n    }\n  }\n\n  \/* two-column bento *\/\n  .ifig-widget .how-bento {\n    display: grid;\n    grid-template-columns: 1.02fr 0.98fr;\n    gap: 56px;\n    align-items: center;\n    max-width: 1080px;\n    margin: 0 auto;\n  }\n\n  \/* ---- LEFT: live receipt ---- *\/\n  .ifig-widget .rcpt-stage {\n    position: relative;\n    perspective: 1300px;\n    display: flex;\n    justify-content: center;\n  }\n  .ifig-widget .rcpt-glow {\n    position: absolute;\n    inset: 4% 8%;\n    border-radius: 40px;\n    z-index: 0;\n    filter: blur(50px);\n    opacity: 0.6;\n    background: radial-gradient(\n      circle,\n      rgba(20, 94, 233, 0.5),\n      transparent 70%\n    );\n    transition:\n      background 0.8s var(--ease),\n      opacity 0.8s var(--ease);\n  }\n  .ifig-widget .rcpt-float {\n    position: relative;\n    z-index: 1;\n    width: 100%;\n    max-width: 440px;\n    display: flex;\n    animation: rcptFloat 7s ease-in-out infinite;\n  }\n  @keyframes rcptFloat {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(-10px);\n    }\n  }\n  .ifig-widget .rcpt {\n    width: 100%;\n    background: #fff;\n    border: 1px solid var(--line);\n    border-radius: 18px;\n    overflow: hidden;\n    box-shadow: 0 26px 64px -26px rgba(10, 22, 40, 0.32);\n    transform-style: preserve-3d;\n    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));\n    transition: transform 0.3s var(--ease);\n  }\n  \/* header *\/\n  .ifig-widget .rcpt-head {\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 18px 20px;\n    background: var(--bg-soft);\n    border-bottom: 1px solid var(--line);\n    color: var(--ink);\n    transition:\n      background 0.6s var(--ease),\n      border-color 0.6s var(--ease),\n      color 0.6s var(--ease);\n  }\n  .ifig-widget .rcpt.is-branded .rcpt-head {\n    background: linear-gradient(135deg, #145ee9, #0045bb);\n    border-bottom-color: transparent;\n    color: #fff;\n  }\n  .ifig-widget .rcpt-head::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -60%;\n    width: 38%;\n    height: 100%;\n    background: linear-gradient(\n      100deg,\n      transparent,\n      rgba(255, 255, 255, 0.45),\n      transparent\n    );\n    transform: skewX(-18deg);\n    animation: rcptSheen 6s ease-in-out infinite;\n    pointer-events: none;\n  }\n  @keyframes rcptSheen {\n    0%,\n    62% {\n      left: -60%;\n    }\n    82%,\n    100% {\n      left: 135%;\n    }\n  }\n  .ifig-widget .rcpt-logo {\n    width: 40px;\n    height: 40px;\n    border-radius: 11px;\n    background: #fff;\n    border: 1px solid var(--line);\n    display: grid;\n    place-items: center;\n    font-weight: 800;\n    font-size: 13px;\n    color: var(--brand);\n    flex-shrink: 0;\n    box-shadow: var(--shadow-sm);\n  }\n  .ifig-widget .rcpt.is-branded .rcpt-logo {\n    background: rgba(255, 255, 255, 0.16);\n    border-color: rgba(255, 255, 255, 0.3);\n    color: #fff;\n  }\n  .ifig-widget .rcpt-biz {\n    line-height: 1.25;\n  }\n  .ifig-widget .rcpt-biz b {\n    display: block;\n    font-size: 15px;\n    font-weight: 800;\n    color: inherit;\n  }\n  .ifig-widget .rcpt-biz span {\n    font-size: 12px;\n    color: var(--ink-faint);\n  }\n  .ifig-widget .rcpt.is-branded .rcpt-biz span {\n    color: rgba(255, 255, 255, 0.8);\n  }\n  .ifig-widget .rcpt-status {\n    margin-left: auto;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    padding: 5px 10px;\n    border-radius: 7px;\n    background: var(--bg-tint);\n    color: var(--ink-mute);\n    transition: all 0.5s var(--ease);\n  }\n  .ifig-widget .rcpt.is-branded .rcpt-status {\n    background: rgba(255, 255, 255, 0.16);\n    color: #fff;\n  }\n  .ifig-widget .rcpt.is-paid .rcpt-status {\n    background: #fff;\n    color: #12b76a;\n  }\n  \/* body *\/\n  .ifig-widget .rcpt-body {\n    padding: 18px 20px 20px;\n  }\n  .ifig-widget .rcpt-parties {\n    display: flex;\n    justify-content: space-between;\n    gap: 16px;\n    padding-bottom: 16px;\n    border-bottom: 1px solid var(--line-soft);\n  }\n  .ifig-widget .rcpt-parties .lbl {\n    font-family: var(--font-mono);\n    font-size: 9.5px;\n    letter-spacing: 0.08em;\n    color: var(--ink-faint);\n    text-transform: uppercase;\n    margin-bottom: 5px;\n  }\n  .ifig-widget .rcpt-parties b {\n    display: block;\n    font-size: 13.5px;\n    font-weight: 700;\n    color: var(--ink);\n  }\n  .ifig-widget .rcpt-parties span {\n    font-size: 12px;\n    color: var(--ink-mute);\n  }\n  .ifig-widget .rcpt-parties .to {\n    text-align: right;\n  }\n  \/* collapsible reveal sections *\/\n  .ifig-widget .rcpt-rev {\n    opacity: 0;\n    transform: translateY(8px);\n    max-height: 0;\n    overflow: hidden;\n    transition:\n      opacity 0.55s var(--spring),\n      transform 0.55s var(--spring),\n      max-height 0.55s var(--spring);\n  }\n  .ifig-widget .rcpt-rev.show {\n    opacity: 1;\n    transform: none;\n    max-height: 420px;\n  }\n  .ifig-widget .rcpt-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--line-soft);\n  }\n  .ifig-widget .rcpt-item .nm {\n    font-size: 13.5px;\n    font-weight: 600;\n    color: var(--ink);\n  }\n  .ifig-widget .rcpt-item .qty {\n    font-size: 11.5px;\n    color: var(--ink-faint);\n    margin-top: 2px;\n  }\n  .ifig-widget .rcpt-item .amt {\n    font-size: 13.5px;\n    font-weight: 700;\n    color: var(--ink);\n    white-space: nowrap;\n  }\n  .ifig-widget .rcpt-totals {\n    padding-top: 12px;\n  }\n  .ifig-widget .rcpt-totline {\n    display: flex;\n    justify-content: space-between;\n    font-size: 12.5px;\n    color: var(--ink-mute);\n    padding: 3px 0;\n  }\n  .ifig-widget .rcpt-total {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 10px;\n    padding-top: 12px;\n    border-top: 1px solid var(--line);\n  }\n  .ifig-widget .rcpt-total .t {\n    font-size: 15px;\n    font-weight: 800;\n    color: var(--ink);\n  }\n  .ifig-widget .rcpt-total .v {\n    font-size: 20px;\n    font-weight: 800;\n    color: #145ee9;\n  }\n  .ifig-widget .rcpt-brandrow {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 16px;\n  }\n  .ifig-widget .rcpt-swatch {\n    width: 30px;\n    height: 20px;\n    border-radius: 6px;\n    background: var(--bg-tint);\n    border: 1px solid var(--line);\n  }\n  .ifig-widget .rcpt-swatch.active {\n    background: linear-gradient(135deg, #145ee9, #0045bb);\n    border-color: transparent;\n  }\n  .ifig-widget .rcpt-tplname {\n    font-size: 11.5px;\n    color: var(--ink-faint);\n    margin-left: 4px;\n  }\n  .ifig-widget .rcpt-note {\n    margin-top: 12px !important;\n    font-size: 12.5px !important;\n    font-style: italic !important;\n    color: var(--ink-mute) !important;\n  }\n  .ifig-widget .rcpt-sent {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-top: 16px;\n    padding: 12px 14px;\n    border-radius: 12px;\n    background: rgba(18, 183, 106, 0.1);\n    color: #0f7a48;\n  }\n  .ifig-widget .rcpt-sent svg {\n    color: #12b76a;\n    width: 22px;\n    height: 22px;\n    flex-shrink: 0;\n  }\n  .ifig-widget .rcpt-sent b {\n    display: block;\n    font-size: 13px;\n    font-weight: 700;\n  }\n  .ifig-widget .rcpt-sent span {\n    font-size: 11.5px;\n    opacity: 0.85;\n  }\n  .ifig-widget .rcpt-actions {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 8px;\n    margin-top: 12px;\n  }\n  .ifig-widget .rcpt-act {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    height: 40px;\n    border-radius: 10px;\n    background: var(--bg-soft);\n    border: 1px solid var(--line);\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--ink-soft);\n  }\n  .ifig-widget .rcpt-act svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  \/* ---- RIGHT: step list ---- *\/\n  .ifig-widget .steps {\n    display: flex;\n    flex-direction: column;\n  }\n  .ifig-widget .steps-progress {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 8px;\n    margin-bottom: 26px;\n  }\n  .ifig-widget .seg {\n    height: 4px;\n    border-radius: 999px;\n    background: var(--line);\n    overflow: hidden;\n  }\n  .ifig-widget .seg i {\n    display: block;\n    height: 100%;\n    width: 0;\n    border-radius: 999px;\n    background: linear-gradient(90deg, #145ee9, #0045bb);\n    transition: width 0.6s var(--ease);\n  }\n  .ifig-widget .seg.on i {\n    width: 100%;\n  }\n  .ifig-widget .step {\n    display: flex;\n    gap: 16px;\n    width: 100%;\n    text-align: left;\n    background: transparent;\n    border: 1px solid transparent;\n    border-radius: 16px;\n    padding: 14px 16px;\n    min-height: 44px;\n    cursor: pointer;\n    color: inherit;\n    font: inherit;\n    position: relative;\n    transition:\n      background 0.4s var(--ease),\n      border-color 0.4s var(--ease),\n      box-shadow 0.4s var(--ease);\n  }\n  .ifig-widget .step + .step {\n    margin-top: 6px;\n  }\n  .ifig-widget .step:hover {\n    background: rgba(255, 255, 255, 0.65);\n  }\n  .ifig-widget .step.active {\n    background: #fff;\n    border-color: var(--line);\n    box-shadow: var(--shadow-lg);\n  }\n  .ifig-widget .step.active::before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 14px;\n    bottom: 14px;\n    width: 4px;\n    border-radius: 999px;\n    background: linear-gradient(180deg, #145ee9, #0045bb);\n  }\n  .ifig-widget .step:focus-visible {\n    outline: 2px solid var(--brand-500);\n    outline-offset: 3px;\n  }\n  .ifig-widget .step-icon {\n    position: relative;\n    width: 44px;\n    height: 44px;\n    flex-shrink: 0;\n    border-radius: 12px;\n    background: var(--bg-tint);\n    display: grid;\n    place-items: center;\n    color: var(--brand);\n    transition: all 0.4s var(--ease);\n  }\n  .ifig-widget .step-icon svg {\n    width: 22px;\n    height: 22px;\n  }\n  .ifig-widget .step.active .step-icon {\n    background: linear-gradient(135deg, #145ee9, #0045bb);\n    color: #fff;\n    box-shadow: 0 8px 18px -6px rgba(0, 69, 187, 0.6);\n  }\n  .ifig-widget .step-num {\n    position: absolute;\n    top: -7px;\n    left: -7px;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: #fff;\n    border: 1px solid var(--line);\n    color: var(--ink-faint);\n    font-size: 10.5px;\n    font-weight: 700;\n    font-family: var(--font-mono);\n    display: grid;\n    place-items: center;\n  }\n  .ifig-widget .step.active .step-num {\n    background: var(--brand);\n    border-color: var(--brand);\n    color: #fff;\n  }\n  .ifig-widget .step-body {\n    flex: 1;\n    min-width: 0;\n    padding-top: 4px;\n  }\n  .ifig-widget .step-title {\n    font-size: 17px !important;\n    font-weight: 800 !important;\n    letter-spacing: -0.01em !important;\n    color: var(--ink) !important;\n  }\n  .ifig-widget .step-detail {\n    max-height: 0;\n    opacity: 0;\n    overflow: hidden;\n    transform: translateY(-4px);\n    transition:\n      max-height 0.5s var(--spring),\n      opacity 0.45s var(--ease),\n      transform 0.45s var(--ease),\n      margin 0.45s var(--ease);\n  }\n  .ifig-widget .step.active .step-detail {\n    max-height: 240px;\n    opacity: 1;\n    transform: none;\n    margin-top: 8px;\n  }\n  .ifig-widget .step-detail p {\n    font-size: 14px !important;\n    line-height: 1.6 !important;\n    color: var(--ink-mute) !important;\n  }\n  .ifig-widget .step-meta {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    margin-top: 12px;\n    font-family: var(--font-mono);\n    font-size: 10.5px;\n    font-weight: 700;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    color: var(--ink-soft);\n  }\n  .ifig-widget .step-meta::before {\n    content: \"\";\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    background: #12b76a;\n  }\n\n  @media (max-width: 900px) {\n    .ifig-widget .how-bento {\n      grid-template-columns: 1fr;\n      gap: 36px;\n      max-width: 520px;\n    }\n    .ifig-widget .rcpt-float {\n      margin: 0 auto;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ifig-widget .how-mesh span,\n    .ifig-widget .rcpt-float,\n    .ifig-widget .rcpt-head::after {\n      animation: none !important;\n    }\n    .ifig-widget .rcpt {\n      transition: none !important;\n      transform: none !important;\n    }\n  }\n\n  \/* ===== BENEFITS ===== *\/\n  .ifig-widget .benefits {\n    padding: 96px 32px 48px;\n  }\n  .ifig-widget .benefits-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n  }\n  .ifig-widget .section-head {\n    text-align: center;\n    max-width: 720px;\n    margin: 0 auto 48px;\n  }\n  .ifig-widget .section-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  .ifig-widget .section-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  .ifig-widget .section-head p {\n    color: var(--ink-mute);\n    font-size: 16.5px;\n    line-height: 1.55;\n  }\n  \/* Benefits split layout *\/\n  .ifig-widget .ben-split-wrap {\n    display: flex;\n    flex-direction: column;\n    gap: 80px;\n  }\n  .ifig-widget .ben-split {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 72px;\n    align-items: center;\n  }\n  .ifig-widget .ben-split-content .section-head {\n    text-align: left;\n    margin: 0 0 40px;\n    max-width: none;\n  }\n  .ifig-widget .ben-split-media {\n    position: relative;\n  }\n  .ifig-widget .ben-media-inner {\n    position: relative;\n  }\n  .ifig-widget .ben-media-inner.ben-media-wide .ben-media-img {\n    width: 100%;\n  }\n  .ifig-widget .ben-media-inner.ben-media-rose .ben-media-img {\n    width: 100%;\n  }\n  .ifig-widget .ben-media-img {\n    position: relative;\n    z-index: 1;\n    width: 100%;\n    border-radius: var(--radius-lg);\n    display: block;\n    margin: 0 auto;\n  }\n  .ifig-widget .ben-list {\n    display: flex;\n    flex-direction: column;\n    gap: 28px;\n  }\n  .ifig-widget .ben-item {\n    display: grid;\n    grid-template-columns: 44px 1fr;\n    gap: 16px;\n    align-items: flex-start;\n  }\n  .ifig-widget .ben-icon {\n    width: 44px;\n    height: 44px;\n    border-radius: 10px;\n    background: var(--bg-tint);\n    display: grid;\n    place-items: center;\n    flex-shrink: 0;\n    color: var(--ink-soft);\n  }\n  .ifig-widget .ben-title {\n    font-size: 16px !important;\n    font-weight: 700;\n    color: var(--ink);\n    margin-bottom: 6px;\n    letter-spacing: -0.01em;\n  }\n  .ifig-widget .ben-text {\n    font-size: 14.5px !important;\n    line-height: 1.6;\n    color: var(--ink-mute);\n    margin: 0;\n  }\n  \/* Payment logos *\/\n  \/* ===== TESTIMONIAL ===== *\/\n  .ifig-widget .testimonial {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 64px 32px;\n  }\n  .ifig-widget .testimonial-wrap {\n    position: relative;\n    overflow: hidden;\n    background:\n      radial-gradient(120% 120% at 0% 0%, #122a5c 0%, transparent 55%),\n      linear-gradient(160deg, #0b1a36 0%, #060d1c 100%);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 28px;\n    padding: 56px 56px 60px;\n    box-shadow: 0 30px 70px -30px rgba(10, 22, 40, 0.5);\n  }\n  .ifig-widget .ts-eyebrow {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    color: var(--brand-500);\n    margin-bottom: 18px;\n  }\n  .ifig-widget .ts-title {\n    font-size: clamp(30px, 4vw, 50px);\n    font-weight: 800;\n    line-height: 1.08;\n    letter-spacing: -0.02em;\n    color: #fff;\n    margin: 0 0 44px;\n    max-width: 640px;\n  }\n  .ifig-widget .ts-grid {\n    display: grid;\n    grid-template-columns: 1.25fr 1fr;\n    gap: 32px;\n    align-items: stretch;\n  }\n  \/* left quote card *\/\n  .ifig-widget .ts-quote {\n    position: relative;\n    background: rgba(255, 255, 255, 0.03);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 20px;\n    padding: 40px 44px 44px;\n    display: flex;\n    flex-direction: column;\n  }\n  .ifig-widget .ts-qmark {\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: 80px;\n    line-height: 0.7;\n    color: rgba(120, 150, 220, 0.45);\n    display: block;\n    margin-bottom: 24px;\n  }\n  .ifig-widget .ts-quote-body {\n    border-left: 2px solid var(--brand-500);\n    padding-left: 26px;\n    flex: 1;\n  }\n  .ifig-widget .ts-headline {\n    font-size: clamp(22px, 2.4vw, 30px);\n    font-weight: 800;\n    color: #fff;\n    line-height: 1.2;\n    letter-spacing: -0.015em;\n    margin: 0 0 18px;\n  }\n  .ifig-widget .ts-text {\n    font-size: 16px;\n    line-height: 1.6;\n    color: rgba(255, 255, 255, 0.62);\n    margin: 0;\n  }\n  .ifig-widget .ts-author {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    margin-top: 36px;\n  }\n  .ifig-widget .ts-source {\n    position: absolute;\n    right: 28px;\n    bottom: 28px;\n    background: #fff;\n    border-radius: 9px;\n    padding: 6px 10px;\n    display: flex;\n    align-items: center;\n    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.35);\n  }\n  .ifig-widget .ts-source img {\n    height: 20px;\n    width: auto;\n    max-width: 92px;\n    object-fit: contain;\n    display: block;\n  }\n  .ifig-widget .ts-avatar {\n    width: 52px;\n    height: 52px;\n    border-radius: 50%;\n    background: linear-gradient(140deg, var(--brand-500), var(--brand));\n    color: #fff;\n    display: grid;\n    place-items: center;\n    font-weight: 800;\n    font-size: 16px;\n    flex-shrink: 0;\n    box-shadow: 0 8px 20px -6px rgba(0, 68, 187, 0.7);\n  }\n  .ifig-widget .ts-name {\n    font-weight: 700;\n    font-size: 16px;\n    color: #fff;\n  }\n  .ifig-widget .ts-role {\n    font-size: 13.5px;\n    color: rgba(255, 255, 255, 0.5);\n    margin-top: 2px;\n  }\n  \/* right column *\/\n  .ifig-widget .ts-side {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n  }\n  .ifig-widget .ts-stat {\n    background: rgba(255, 255, 255, 0.04);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 20px;\n    padding: 30px 32px;\n  }\n  .ifig-widget .ts-stat-num {\n    font-size: clamp(40px, 5vw, 56px);\n    font-weight: 800;\n    color: #aab9e8;\n    line-height: 1;\n    letter-spacing: -0.03em;\n    margin-bottom: 10px;\n  }\n  .ifig-widget .ts-stat-num em {\n    font-style: normal;\n    color: var(--brand-500);\n  }\n  .ifig-widget .ts-stat-label {\n    font-size: 14px;\n    color: rgba(255, 255, 255, 0.55);\n  }\n  .ifig-widget .ts-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin-top: 4px;\n  }\n  .ifig-widget .ts-person {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    width: 100%;\n    text-align: left;\n    background: transparent;\n    border: 1px solid transparent;\n    border-radius: 16px;\n    padding: 12px 16px;\n    min-height: 44px;\n    cursor: pointer;\n    font: inherit;\n    color: inherit;\n    transition:\n      background 0.3s var(--ease),\n      border-color 0.3s var(--ease);\n  }\n  .ifig-widget .ts-person:hover {\n    background: rgba(255, 255, 255, 0.04);\n  }\n  .ifig-widget .ts-person.active {\n    background: rgba(255, 255, 255, 0.06);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n  .ifig-widget .ts-person:focus-visible {\n    outline: 2px solid var(--brand-500);\n    outline-offset: 2px;\n  }\n  .ifig-widget .ts-pavatar {\n    width: 44px;\n    height: 44px;\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    font-weight: 700;\n    font-size: 13px;\n    color: rgba(255, 255, 255, 0.85);\n    background: rgba(255, 255, 255, 0.06);\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    flex-shrink: 0;\n    transition: all 0.3s var(--ease);\n  }\n  .ifig-widget .ts-person.active .ts-pavatar {\n    border-color: var(--brand-500);\n    color: #fff;\n    box-shadow: 0 0 0 3px rgba(30, 94, 255, 0.18);\n  }\n  .ifig-widget .ts-pinfo {\n    flex: 1;\n    min-width: 0;\n  }\n  .ifig-widget .ts-pname {\n    font-weight: 700;\n    font-size: 15px;\n    color: #fff;\n  }\n  .ifig-widget .ts-prole {\n    font-size: 13px;\n    color: rgba(255, 255, 255, 0.5);\n    margin-top: 1px;\n  }\n  .ifig-widget .ts-arrow {\n    color: rgba(255, 255, 255, 0.4);\n    flex-shrink: 0;\n    transition:\n      transform 0.3s var(--ease),\n      color 0.3s var(--ease);\n  }\n  .ifig-widget .ts-person.active .ts-arrow,\n  .ifig-widget .ts-person:hover .ts-arrow {\n    color: #fff;\n    transform: translateX(3px);\n  }\n\n  \/* ===== WHAT TO INCLUDE ===== *\/\n  .ifig-widget .include {\n    background: var(--bg-soft);\n    padding: 96px 32px;\n  }\n  .ifig-widget .include-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n  }\n  .ifig-widget .include-head {\n    text-align: center;\n    max-width: 720px;\n    margin: 0 auto 56px;\n  }\n  .ifig-widget .include-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  .ifig-widget .include-head p {\n    color: var(--ink-mute);\n    font-size: 16.5px;\n    line-height: 1.55;\n  }\n  .ifig-widget .include-layout {\n    display: grid;\n    grid-template-columns: 1fr 460px 1fr;\n    gap: 0 40px;\n    align-items: center;\n  }\n  .ifig-widget .include-col {\n    display: flex;\n    flex-direction: column;\n    gap: 36px;\n  }\n  .ifig-widget .include-item {\n    text-align: center;\n  }\n  .ifig-widget .include-num {\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    background: var(--brand);\n    color: white;\n    display: grid;\n    place-items: center;\n    font-family: var(--font-mono);\n    font-size: 17px;\n    font-weight: 700;\n    margin: 0 auto 14px;\n    box-shadow: 0 4px 16px rgba(0, 68, 187, 0.35);\n    flex-shrink: 0;\n  }\n  .ifig-widget .include-title {\n    font-size: 16px !important;\n    font-weight: 700;\n    color: var(--ink);\n    margin-bottom: 6px;\n    letter-spacing: -0.005em;\n  }\n  .ifig-widget .include-text {\n    font-size: 14px !important;\n    line-height: 1.6;\n    color: var(--ink-mute);\n    max-width: 280px;\n    margin: 0 auto;\n  }\n  .ifig-widget .include-center {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .ifig-widget .include-image {\n    width: 100%;\n    display: block;\n    border: 1px solid var(--line);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-lg);\n  }\n\n  \/* ===== TEMPLATE PREVIEW GRID ===== *\/\n  .ifig-widget .tpl-preview-wrap {\n    border-radius: 24px;\n    padding: 28px;\n    margin-bottom: 40px;\n  }\n  .ifig-widget .tpl-preview-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n  }\n  .ifig-widget .tpl-preview-link {\n    display: block;\n    text-decoration: none;\n    cursor: pointer;\n  }\n  .ifig-widget .tpl-preview-card {\n    background-color: #eff1f4;\n    border: 1px solid #d1ddef;\n    border-radius: 16px;\n    overflow: hidden;\n    aspect-ratio: 1 \/ 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n    box-shadow: 0 1px 4px rgba(10, 22, 40, 0.08);\n  }\n  .ifig-widget .tpl-preview-card img {\n    width: 90%;\n    height: 90%;\n    object-fit: contain;\n    display: block;\n    border-radius: 4px;\n  }\n  .ifig-widget .tpl-preview-cta {\n    text-align: center;\n    margin-bottom: 56px;\n  }\n  .ifig-widget .tpl-divider {\n    text-align: center;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .ifig-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  .ifig-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\n  \/* ===== TEMPLATE ALTERNATIVES ===== *\/\n  .ifig-widget .templates {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 96px 32px;\n  }\n  .ifig-widget .templates-head {\n    text-align: center;\n    max-width: 720px;\n    margin: 0 auto 48px;\n  }\n  .ifig-widget .templates-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  .ifig-widget .templates-head p {\n    color: var(--ink-mute);\n    font-size: 16.5px;\n    line-height: 1.55;\n  }\n  \/* ===== TEMPLATE HERO (two-column) ===== *\/\n  .ifig-widget .tpl-hero {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    align-items: center;\n    margin-bottom: 64px;\n  }\n  .ifig-widget .tpl-hero-text h2 {\n    font-size: clamp(30px, 4.2vw, 50px);\n    line-height: 1.08;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    color: var(--ink);\n    margin: 0 0 20px;\n  }\n  .ifig-widget .tpl-hero-text h2 .tpl-hero-accent {\n    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-500) 100%);\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    color: var(--brand);\n  }\n  .ifig-widget .tpl-hero-text > p {\n    color: var(--ink-mute);\n    font-size: 16.5px;\n    line-height: 1.6;\n    margin: 0 0 24px;\n    max-width: 460px;\n  }\n  .ifig-widget .tpl-hero-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n  .ifig-widget .tpl-hero-list li {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-size: 15px;\n    color: var(--ink-soft);\n  }\n  .ifig-widget .tpl-hero-list li svg {\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    color: var(--brand);\n  }\n  .ifig-widget .tpl-hero-media {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n  .ifig-widget .tpl-hero-media img {\n    width: 100%;\n    max-width: 820px;\n    height: auto;\n  }\n  .ifig-widget .tpl-grid {\n    display: grid;\n    grid-template-columns: repeat(6, 1fr);\n    gap: 16px;\n  }\n  .ifig-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  .ifig-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  .ifig-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: var(--brand-50);\n    color: var(--brand);\n  }\n  .ifig-widget .tpl-card:hover .tpl-icon {\n    background: var(--brand-100);\n  }\n  .ifig-widget .tpl-name {\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--ink);\n    line-height: 1.3;\n  }\n  .ifig-widget .tpl-hint {\n    font-size: 12px;\n    color: var(--ink-faint);\n    margin-top: -6px;\n  }\n\n  \/* ===== COMPARE (Generator \/ Templates \/ Software) ===== *\/\n  .ifig-widget .compare {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 0 32px 96px;\n  }\n  .ifig-widget .compare-head {\n    text-align: center;\n    max-width: 720px;\n    margin: 0 auto 48px;\n  }\n  .ifig-widget .compare-head h2 {\n    font-size: clamp(28px, 4vw, 44px);\n    line-height: 1.15;\n    letter-spacing: -0.02em;\n    font-weight: 800;\n    color: var(--ink);\n    margin: 0 0 14px;\n  }\n  .ifig-widget .compare-head p {\n    color: var(--ink-mute);\n    font-size: 16.5px;\n    line-height: 1.55;\n    margin: 0;\n  }\n  .ifig-widget .compare-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 28px;\n  }\n  .ifig-widget .compare-card {\n    background: var(--brand-50);\n    border: 1px solid var(--brand-100);\n    border-top: 3px solid var(--brand);\n    border-radius: var(--radius-lg);\n    padding: 28px;\n  }\n  .ifig-widget .compare-card-top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 20px;\n  }\n  .ifig-widget .compare-icon {\n    width: 44px;\n    height: 44px;\n    border-radius: var(--radius);\n    background: var(--brand-100);\n    color: var(--brand);\n    display: grid;\n    place-items: center;\n    flex-shrink: 0;\n  }\n  .ifig-widget .compare-pill {\n    font-family: var(--font-mono);\n    font-size: 10px;\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    color: var(--brand);\n    background: rgba(0, 68, 187, 0.08);\n    border: 1px solid var(--brand-100);\n    border-radius: var(--radius-pill);\n    padding: 5px 12px;\n    white-space: nowrap;\n  }\n  .ifig-widget .compare-card h3 {\n    font-size: 19px;\n    font-weight: 800;\n    letter-spacing: -0.01em;\n    color: var(--brand);\n    margin: 0 0 16px;\n    padding-bottom: 16px;\n    border-bottom: 1px solid var(--brand-100);\n  }\n  .ifig-widget .compare-card p {\n    font-size: 14px;\n    line-height: 1.65;\n    color: var(--ink-mute);\n    margin: 0;\n  }\n\n  \/* ===== FAQ ===== *\/\n  .ifig-widget .faq {\n    background: var(--bg-soft);\n    padding: 96px 32px;\n  }\n  .ifig-widget .faq-inner {\n    max-width: 920px;\n    margin: 0 auto;\n  }\n  .ifig-widget .faq-head {\n    text-align: center;\n    margin-bottom: 48px;\n  }\n  .ifig-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  .ifig-widget .faq-head p {\n    color: var(--ink-mute);\n    font-size: 16px;\n  }\n  .ifig-widget .faq-list {\n    background: white;\n    border-radius: var(--radius-lg);\n    border: 1.5px solid var(--line);\n    overflow: hidden;\n  }\n  .ifig-widget .faq-item {\n    border-bottom: 1px solid var(--line);\n  }\n  .ifig-widget .faq-item:last-child {\n    border-bottom: none;\n  }\n  .ifig-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    min-height: 48px;\n  }\n  .ifig-widget .faq-q:hover {\n    color: var(--brand);\n  }\n  .ifig-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: all 0.3s;\n    color: var(--ink-mute);\n  }\n  .ifig-widget .faq-item.open .faq-icon {\n    background: var(--brand);\n    color: white;\n    border-color: var(--brand);\n    transform: rotate(45deg);\n  }\n  .ifig-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  .ifig-widget .faq-item.open .faq-a {\n    max-height: 1200px;\n    padding: 0 28px 24px;\n  }\n  .ifig-widget .faq-a strong {\n    color: var(--ink);\n    font-weight: 700;\n  }\n  .ifig-widget .faq-a a {\n    color: var(--brand) !important;\n    font-weight: 600;\n    text-decoration: underline !important;\n  }\n  .ifig-widget .faq-a a:hover {\n    color: var(--brand-dark) !important;\n  }\n  .ifig-widget .faq-sample-img {\n    width: 100%;\n    max-width: 320px;\n    height: auto;\n    margin: 16px auto 0;\n    border: 1px solid var(--line);\n    border-radius: var(--radius);\n    box-shadow: var(--shadow-md);\n  }\n\n  \/* ===== FINAL CTA ===== *\/\n  .ifig-widget .final-cta {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 96px 32px;\n  }\n  .ifig-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  .ifig-widget .final-cta-wrap::before {\n    content: \"\";\n    position: absolute;\n    top: -50%;\n    right: -10%;\n    width: 70%;\n    height: 200%;\n    background: radial-gradient(circle, var(--brand-500) 0%, transparent 60%);\n    opacity: 0.5;\n    pointer-events: none;\n  }\n  .ifig-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  .ifig-widget .final-cta-content {\n    position: relative;\n    z-index: 1;\n    max-width: 760px;\n    margin: 0 auto;\n  }\n  .ifig-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  .ifig-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  .ifig-widget .final-cta-ctas {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n  .ifig-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    transition:\n      background 0.25s ease,\n      color 0.25s ease,\n      border-color 0.25s ease;\n  }\n  .ifig-widget .final-cta .btn-primary:hover {\n    background: var(--ink);\n    color: white !important;\n    border-color: var(--ink);\n  }\n  .ifig-widget .final-cta .btn-outline {\n    background: transparent;\n    color: white;\n    border-color: rgba(255, 255, 255, 0.3);\n  }\n  .ifig-widget .final-cta .btn-outline:hover {\n    background: rgba(255, 255, 255, 0.1);\n    border-color: white;\n  }\n\n  \/* ===== RESPONSIVE \u2014 TABLET (\u22641024px) ===== *\/\n  @media (max-width: 1024px) {\n    .ifig-widget .hero {\n      padding: 40px 24px 36px;\n    }\n    .ifig-widget .tool-wrap {\n      padding: 32px 24px 40px;\n    }\n    .ifig-widget .how {\n      padding: 64px 24px;\n    }\n    .ifig-widget .benefits {\n      padding: 64px 24px;\n    }\n    .ifig-widget .ben-split {\n      gap: 40px;\n    }\n    .ifig-widget .testimonial {\n      padding: 0 24px 64px;\n    }\n    .ifig-widget .testimonial-wrap {\n      padding: 40px 36px;\n    }\n    .ifig-widget .ts-grid {\n      grid-template-columns: 1fr;\n      gap: 22px;\n    }\n    .ifig-widget .ts-title {\n      margin-bottom: 32px;\n    }\n    .ifig-widget .include {\n      padding: 64px 24px;\n    }\n    .ifig-widget .include-layout {\n      grid-template-columns: 1fr;\n      gap: 48px;\n    }\n    .ifig-widget .include-col {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 24px;\n    }\n    .ifig-widget .include-center {\n      order: -1;\n    }\n    .ifig-widget .include-image {\n      max-width: 480px;\n      margin: 0 auto;\n    }\n    .ifig-widget .templates {\n      padding: 64px 24px;\n    }\n    .ifig-widget .tpl-hero {\n      grid-template-columns: 1fr;\n      gap: 40px;\n      margin-bottom: 48px;\n    }\n    .ifig-widget .tpl-hero-media {\n      order: -1;\n    }\n    .ifig-widget .tpl-preview-wrap {\n      padding: 20px;\n    }\n    .ifig-widget .tpl-preview-grid {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 12px;\n    }\n    .ifig-widget .tpl-grid {\n      grid-template-columns: repeat(3, 1fr);\n      gap: 14px;\n    }\n    .ifig-widget .compare-grid {\n      gap: 18px;\n    }\n    .ifig-widget .compare-card {\n      padding: 22px;\n    }\n    .ifig-widget .faq {\n      padding: 64px 24px;\n    }\n    .ifig-widget .final-cta {\n      padding: 64px 24px;\n    }\n    .ifig-widget .final-cta-wrap {\n      padding: 56px 36px;\n    }\n  }\n\n  \/* ===== RESPONSIVE \u2014 MOBILE (\u2264768px) ===== *\/\n  @media (max-width: 768px) {\n    .ifig-widget .tpl-hero-text h2,\n    .ifig-widget .tpl-hero-text > p {\n      text-align: center;\n    }\n    .ifig-widget .tpl-hero-text > p {\n      max-width: none;\n    }\n    .ifig-widget .tpl-divider {\n      display: none;\n    }\n    .ifig-widget .ifig-hero-wrap {\n      background:\n        radial-gradient(\n          ellipse 120% 50% at 60% 10%,\n          rgba(30, 94, 255, 0.38) 0%,\n          transparent 65%\n        ),\n        radial-gradient(\n          ellipse 80% 40% at 10% 90%,\n          rgba(0, 68, 187, 0.25) 0%,\n          transparent 65%\n        ),\n        var(--ink);\n    }\n    .ifig-widget .hero {\n      padding: 75px 16px 28px;\n    }\n    .ifig-widget .hero-h1 {\n      font-size: clamp(28px, 8vw, 52px) !important;\n      white-space: nowrap;\n    }\n    .ifig-widget .hero-lead {\n      font-size: 13px;\n      white-space: normal;\n    }\n    .ifig-widget .hero-pay-logos {\n      gap: 8px;\n    }\n    .ifig-widget .hero-pay-logo svg {\n      height: 34px;\n    }\n    .ifig-widget .tool-wrap {\n      padding: 0;\n    }\n    .ifig-widget .how {\n      padding: 56px 16px;\n    }\n    .ifig-widget .compare {\n      padding: 0 16px 64px;\n    }\n    .ifig-widget .compare-grid {\n      grid-template-columns: 1fr;\n      gap: 18px;\n    }\n    .ifig-widget .benefits {\n      padding: 56px 16px;\n    }\n    .ifig-widget .ben-split {\n      grid-template-columns: 1fr;\n      gap: 40px;\n    }\n    .ifig-widget .ben-split:nth-child(2) .ben-split-media {\n      order: 1;\n    }\n    .ifig-widget .ben-split:nth-child(2) .ben-split-content {\n      order: 0;\n    }\n    .ifig-widget .testimonial {\n      padding: 0 16px 56px;\n    }\n    .ifig-widget .testimonial-wrap {\n      padding: 32px 22px 36px;\n    }\n    .ifig-widget .ts-quote {\n      padding: 28px 24px 30px;\n    }\n    .ifig-widget .include {\n      padding: 56px 16px;\n    }\n    .ifig-widget .include-col {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 20px;\n    }\n    .ifig-widget .templates {\n      padding: 56px 16px;\n    }\n    .ifig-widget .tpl-preview-grid {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 12px;\n    }\n    .ifig-widget .tpl-grid {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 12px;\n    }\n    .ifig-widget .faq {\n      padding: 56px 16px;\n    }\n    .ifig-widget .faq-q {\n      padding: 20px 22px;\n      font-size: 15px;\n      gap: 16px;\n    }\n    .ifig-widget .faq-item.open .faq-a {\n      padding: 0 22px 22px;\n    }\n    .ifig-widget .final-cta {\n      padding: 56px 16px;\n    }\n    .ifig-widget .final-cta-wrap {\n      padding: 48px 24px;\n    }\n    .ifig-widget .final-cta-ctas .btn {\n      flex: 1 1 100%;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .ifig-widget .tpl-grid {\n      grid-template-columns: 1fr 1fr;\n    }\n  }\n\n  \/* ===== TOOL SIDEBAR ===== *\/\n  #wib-app .wib-sidebar-sticky {\n    padding-left: 32px !important;\n    padding-right: 32px !important;\n  }\n  @media (max-width: 768px) {\n    #wib-app .wib-editor-panel {\n      padding-left: 32px !important;\n      padding-right: 32px !important;\n    }\n  }\n\n  \/* ===== NAV \/ MENU STYLES (from menu-invoice-generator.html) ===== *\/\n  :root {\n    --if-primary: #1e5eff;\n    --if-primary-hover: #1a52e0;\n    --if-primary-soft: #edf2ff;\n    --if-accent: #0044bb;\n    --if-accent-dark: #003299;\n    --if-ink: #0a1628;\n    --if-ink-soft: #4a5568;\n    --if-ink-muted: #6b7689;\n    --if-ink-faint: #9aa3b2;\n    --if-border: #e4e8f0;\n    --if-border-soft: #eff2f7;\n    --if-bg-mega: #f4f6fa;\n    --if-radius-sm: 8px;\n    --if-radius-md: 12px;\n    --if-radius-lg: 16px;\n    --if-radius-pill: 999px;\n    --if-font: \"Manrope\", -apple-system, BlinkMacSystemFont, sans-serif;\n    --if-ease: cubic-bezier(0.32, 0.72, 0, 1);\n  }\n\n  \/* UTILITY TOPBAR \u2014 top utility row above main header *\/\n  .if-topbar {\n    background: #0d1b2a !important;\n    color: rgba(255, 255, 255, 0.92) !important;\n    font-size: 13px;\n    font-weight: 600;\n  }\n  .if-topbar-row {\n    display: grid;\n    grid-template-columns: 1fr auto 1fr;\n    align-items: center;\n    gap: 16px;\n    height: 40px;\n  }\n  .if-topbar-promo {\n    grid-column: 2;\n    justify-self: center;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    color: rgba(255, 255, 255, 0.92) !important;\n    font-size: 13px;\n    font-weight: 600;\n    transition: color 0.18s var(--if-ease);\n    -webkit-tap-highlight-color: transparent;\n  }\n  .if-topbar-promo:hover {\n    color: white !important;\n  }\n  .if-topbar-promo strong {\n    color: #00d29b !important;\n    font-weight: 800;\n  }\n  .if-topbar-promo svg {\n    color: #00d29b !important;\n    transition: transform 0.2s var(--if-ease);\n  }\n  .if-topbar-promo:hover svg {\n    transform: translateX(2px);\n  }\n  .if-topbar-promo-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: #00d29b;\n    flex-shrink: 0;\n    box-shadow: 0 0 0 0 rgba(0, 210, 155, 0.6);\n    animation: if-pulse-mint 2s infinite;\n  }\n  @keyframes if-pulse-mint {\n    0% {\n      box-shadow: 0 0 0 0 rgba(0, 210, 155, 0.55);\n    }\n    70% {\n      box-shadow: 0 0 0 6px rgba(0, 210, 155, 0);\n    }\n    100% {\n      box-shadow: 0 0 0 0 rgba(0, 210, 155, 0);\n    }\n  }\n\n  .if-topbar-actions {\n    grid-column: 3;\n    justify-self: end;\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    flex-shrink: 0;\n  }\n\n  \/* Topbar lang selector \u2014 dark variant (pill button style) *\/\n  .if-topbar-actions .if-lang-trigger {\n    color: white !important;\n    font-size: 13px;\n    font-weight: 600;\n    padding: 6px 12px;\n    border-radius: var(--if-radius-pill);\n    transition: background 0.18s var(--if-ease);\n  }\n  .if-topbar-actions .if-lang-trigger:hover {\n    background: rgba(255, 255, 255, 0.2) !important;\n    color: white !important;\n  }\n  .if-topbar-actions .if-lang-trigger .globe {\n    color: white !important;\n  }\n  .if-topbar-actions .if-lang.is-open .if-lang-trigger {\n    background: rgba(255, 255, 255, 0.22) !important;\n    color: white !important;\n  }\n  .if-topbar-actions .if-lang.is-open .if-lang-trigger .globe {\n    color: white !important;\n  }\n  .if-topbar-actions .if-lang-trigger .chev {\n    color: rgba(255, 255, 255, 0.8) !important;\n  }\n\n  \/* Topbar login link *\/\n  .if-topbar-login {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    color: white !important;\n    font-size: 14.5px;\n    font-weight: 700;\n    transition: color 0.18s var(--if-ease);\n  }\n  .if-topbar-login:hover {\n    color: rgba(255, 255, 255, 0.8) !important;\n  }\n  .if-topbar-login svg {\n    color: rgba(255, 255, 255, 0.75) !important;\n    transition: color 0.18s var(--if-ease);\n  }\n  .if-topbar-login:hover svg {\n    color: white !important;\n  }\n\n  \/* Topbar primary CTA *\/\n  .if-topbar-cta {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 6px 11px;\n    background: var(--if-accent);\n    color: white;\n    font-size: 12.5px;\n    font-weight: 700;\n    border-radius: var(--if-radius-pill);\n    letter-spacing: -0.005em;\n    white-space: nowrap;\n    transition:\n      background 0.2s var(--if-ease),\n      transform 0.2s var(--if-ease);\n    -webkit-tap-highlight-color: transparent;\n  }\n  .if-topbar-cta:hover {\n    background: white;\n    color: var(--if-ink);\n    transform: translateY(-1px);\n  }\n  .if-topbar-cta svg {\n    transition: transform 0.2s var(--if-ease);\n  }\n  .if-topbar-cta:hover svg {\n    transform: translateX(2px);\n  }\n\n  \/* HEADER *\/\n  .if-header {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    background: white !important;\n    border-bottom: 1px solid var(--if-border) !important;\n    box-shadow: 0 2px 12px -2px rgba(10, 22, 40, 0.07) !important;\n    margin: 0 !important;\n    font-family: var(--if-font) !important;\n    color: var(--if-ink) !important;\n  }\n  .if-topbar {\n    margin: 0 !important;\n    padding-bottom: 0 !important;\n  }\n  .if-container {\n    max-width: 1380px;\n    margin: 0 auto;\n    padding: 0 32px;\n  }\n  .if-nav-primary {\n    display: flex;\n    align-items: center;\n    height: 72px;\n    gap: 24px;\n  }\n  .if-logo {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-shrink: 0;\n    transition: opacity 0.2s var(--if-ease);\n  }\n  .if-logo:hover {\n    opacity: 0.85;\n  }\n  .if-logo-img {\n    height: 36px !important;\n    max-height: 36px !important;\n    width: auto !important;\n    max-width: none !important;\n    display: block !important;\n  }\n  .if-nav-tabs {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex: 1;\n    margin: 0px;\n  }\n  .if-nav-tabs > li {\n    display: flex !important;\n    align-items: center !important;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n  .if-nav-tab {\n    position: relative;\n    padding: 10px 16px !important;\n    font-size: 15px !important;\n    font-weight: 600 !important;\n    font-family: var(--if-font) !important;\n    color: var(--if-ink) !important;\n    display: inline-flex !important;\n    align-items: center !important;\n    gap: 6px !important;\n    border-radius: var(--if-radius-sm) !important;\n    transition: color 0.18s var(--if-ease);\n    letter-spacing: -0.005em;\n    background: none !important;\n    background-color: transparent !important;\n    text-decoration: none !important;\n  }\n  .if-nav-tab:hover,\n  .if-nav-tabs .if-nav-tab:hover,\n  .if-header .if-nav-tab:hover,\n  button.if-nav-tab:hover {\n    color: var(--if-primary) !important;\n    background: none !important;\n    background-color: transparent !important;\n  }\n  .if-nav-tab svg.chev {\n    transition: transform 0.3s var(--if-ease);\n    margin-top: 1px;\n    opacity: 0.65;\n  }\n  .if-nav-tab.is-open,\n  .if-nav-tabs .if-nav-tab.is-open,\n  .if-header .if-nav-tab.is-open {\n    color: var(--if-primary) !important;\n    background: none !important;\n    background-color: transparent !important;\n  }\n  .if-nav-tab.is-open svg.chev {\n    transform: rotate(180deg);\n    opacity: 1;\n  }\n\n  .if-nav-actions {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-shrink: 0;\n  }\n\n  \/* Tool chips \u2014 individual, distinct visual identity per tool *\/\n  .if-tool-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 12px 6px 6px;\n    border-radius: var(--if-radius-pill);\n    font-size: 13px;\n    font-weight: 700;\n    color: var(--if-ink);\n    line-height: 1;\n    letter-spacing: -0.005em;\n    white-space: nowrap;\n    border: 1px solid transparent;\n    transition:\n      background 0.18s var(--if-ease),\n      border-color 0.18s var(--if-ease),\n      transform 0.2s var(--if-ease);\n  }\n  .if-tool-chip-icon {\n    width: 26px;\n    height: 26px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    flex-shrink: 0;\n    transition: transform 0.2s var(--if-ease);\n  }\n  .if-tool-chip:hover .if-tool-chip-icon {\n    transform: scale(1.05);\n  }\n  .if-tool-chip-text {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 2px;\n    line-height: 1;\n  }\n  .if-tool-chip-eyebrow {\n    font-size: 9.5px;\n    font-weight: 800;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    color: var(--if-ink-muted);\n    transition: color 0.18s var(--if-ease);\n  }\n\n  \/* Variant 1: doc\/template \u2014 soft blue *\/\n  .if-tool-chip-doc {\n    background: var(--if-primary-soft);\n  }\n  .if-tool-chip-doc .if-tool-chip-icon {\n    background: white;\n    color: var(--if-primary);\n    box-shadow: 0 1px 2px rgba(30, 94, 255, 0.12);\n  }\n  .if-tool-chip-doc:hover {\n    background: white;\n    border-color: var(--if-primary-soft);\n    box-shadow: 0 2px 6px rgba(30, 94, 255, 0.1);\n  }\n  .if-tool-chip-doc:hover .if-tool-chip-eyebrow {\n    color: var(--if-primary);\n  }\n\n  \/* Variant 2: bolt\/generator \u2014 orange tint *\/\n  .if-tool-chip-bolt {\n    background: #fff1db;\n  }\n  .if-tool-chip-bolt .if-tool-chip-icon {\n    background: white;\n    color: #ff9c00;\n    box-shadow: 0 1px 2px rgba(255, 156, 0, 0.18);\n  }\n  .if-tool-chip-bolt:hover {\n    background: white;\n    border-color: #ffe4b8;\n    box-shadow: 0 2px 6px rgba(255, 156, 0, 0.14);\n  }\n  .if-tool-chip-bolt:hover .if-tool-chip-eyebrow {\n    color: #ff9c00;\n  }\n\n  \/* Header primary CTA \u2014 Start for free *\/\n  .if-nav-cta {\n    display: inline-flex !important;\n    align-items: center !important;\n    gap: 6px !important;\n    padding: 9px 20px !important;\n    background: #0044bb !important;\n    background-color: #0044bb !important;\n    color: white !important;\n    font-family: var(--if-font) !important;\n    font-size: 14px !important;\n    font-weight: 700 !important;\n    border-radius: var(--if-radius-pill) !important;\n    letter-spacing: -0.005em;\n    white-space: nowrap;\n    margin-left: 4px;\n    text-decoration: none !important;\n    transition:\n      background 0.2s var(--if-ease),\n      transform 0.2s var(--if-ease),\n      box-shadow 0.2s var(--if-ease);\n    -webkit-tap-highlight-color: transparent;\n  }\n  .if-nav-cta:hover {\n    background: #003399 !important;\n    background-color: #003399 !important;\n    transform: translateY(-1px);\n    box-shadow: 0 4px 14px -4px rgba(30, 94, 255, 0.45);\n    color: white !important;\n  }\n  .if-nav-cta svg {\n    transition: transform 0.2s var(--if-ease);\n  }\n  .if-nav-cta:hover svg {\n    transform: translateX(2px);\n  }\n\n  \/* Subtle vertical divider between tool chips and login\/CTA group *\/\n  .if-nav-divider {\n    width: 1px;\n    height: 26px;\n    background: var(--if-border);\n    margin: 0 4px;\n    flex-shrink: 0;\n  }\n\n  \/* Language switcher *\/\n  .if-lang {\n    position: relative;\n  }\n  .if-lang-trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 10px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--if-ink);\n    border-radius: var(--if-radius-pill);\n    line-height: 1;\n    -webkit-tap-highlight-color: transparent;\n    transition:\n      background 0.18s var(--if-ease),\n      color 0.18s var(--if-ease);\n  }\n  .if-lang-trigger:hover {\n    background: var(--if-border-soft);\n    color: var(--if-primary);\n  }\n  .if-lang-trigger .globe {\n    color: var(--if-ink-muted);\n    transition: color 0.18s var(--if-ease);\n    flex-shrink: 0;\n  }\n  .if-lang-trigger:hover .globe,\n  .if-lang.is-open .if-lang-trigger .globe {\n    color: var(--if-primary);\n  }\n  .if-lang-trigger .chev {\n    color: var(--if-ink-faint);\n    transition: transform 0.25s var(--if-ease);\n    flex-shrink: 0;\n  }\n  .if-lang.is-open .if-lang-trigger {\n    background: var(--if-border-soft);\n    color: var(--if-primary);\n  }\n  .if-lang.is-open .if-lang-trigger .chev {\n    transform: rotate(180deg);\n  }\n\n  .if-lang-panel {\n    position: absolute;\n    top: calc(100% + 8px);\n    right: 0;\n    min-width: 180px;\n    background: white !important;\n    color: var(--if-ink) !important;\n    border: 1px solid var(--if-border);\n    border-radius: var(--if-radius-lg);\n    padding: 6px;\n    box-shadow: 0 16px 40px -8px rgba(10, 22, 40, 0.18);\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-6px);\n    transition:\n      opacity 0.2s var(--if-ease),\n      transform 0.2s var(--if-ease),\n      visibility 0.2s;\n    z-index: 9999;\n  }\n  .if-lang.is-open .if-lang-panel {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n  }\n  .if-lang-option {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n    padding: 10px 12px !important;\n    font-size: 14px !important;\n    font-weight: 600 !important;\n    color: var(--if-ink) !important;\n    border-radius: var(--if-radius-sm) !important;\n    text-align: left;\n    transition:\n      background 0.15s var(--if-ease),\n      color 0.15s var(--if-ease);\n  }\n  .if-lang-option:hover {\n    background: var(--if-border-soft);\n    color: var(--if-primary) !important;\n  }\n  .if-lang-option.is-current {\n    color: var(--if-primary) !important;\n  }\n  .if-lang-option.is-current::after {\n    content: \"\";\n    width: 14px;\n    height: 14px;\n    margin-left: auto;\n    background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231E5EFF' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-11'\/><\/svg>\");\n    background-repeat: no-repeat;\n    background-position: center;\n    flex-shrink: 0;\n  }\n  .if-lang-option-code {\n    font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n    font-size: 11px !important;\n    font-weight: 700 !important;\n    letter-spacing: 0.04em;\n    color: var(--if-ink-muted) !important;\n    background: var(--if-border-soft) !important;\n    padding: 4px 7px !important;\n    border-radius: 5px !important;\n    min-width: 30px;\n    text-align: center;\n    flex-shrink: 0;\n    transition:\n      background 0.15s var(--if-ease),\n      color 0.15s var(--if-ease);\n  }\n  .if-lang-option:hover .if-lang-option-code {\n    background: white !important;\n    color: var(--if-primary) !important;\n  }\n  .if-lang-option.is-current .if-lang-option-code {\n    background: var(--if-primary-soft) !important;\n    color: var(--if-primary) !important;\n  }\n\n  \/* Log in (text link with user icon) *\/\n  .if-login {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    padding: 8px 6px;\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--if-ink) !important;\n    transition: color 0.18s var(--if-ease);\n    -webkit-tap-highlight-color: transparent;\n  }\n  .if-login:hover {\n    color: var(--if-primary) !important;\n  }\n\n  \/* Buttons *\/\n  .if-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 11px 20px;\n    font-size: 14px;\n    font-weight: 700;\n    border-radius: 10px;\n    line-height: 1;\n    letter-spacing: -0.005em;\n    white-space: nowrap;\n    transition:\n      border-radius 0.3s var(--if-ease),\n      background 0.2s var(--if-ease),\n      color 0.2s var(--if-ease),\n      border-color 0.2s var(--if-ease),\n      transform 0.2s var(--if-ease);\n  }\n  .if-btn-outline {\n    color: var(--if-ink);\n    background: white;\n    border: 1.5px solid var(--if-ink);\n  }\n  .if-btn-outline:hover {\n    background: var(--if-ink);\n    color: white;\n    border-radius: var(--if-radius-pill);\n  }\n  .if-btn-solid {\n    background: var(--if-accent);\n    color: white;\n    border: 1.5px solid var(--if-accent);\n  }\n  .if-btn-solid:hover {\n    background: var(--if-accent-dark);\n    border-color: var(--if-accent-dark);\n    color: white;\n    border-radius: var(--if-radius-pill);\n    transform: translateY(-1px);\n  }\n\n  .if-burger {\n    display: none;\n    width: 44px;\n    height: 44px;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--if-radius-sm) !important;\n    color: var(--if-ink) !important;\n    -webkit-tap-highlight-color: transparent;\n    padding: 0 !important;\n  }\n  .if-burger:hover {\n    background: var(--if-border-soft);\n  }\n  .if-burger-icon {\n    width: 22px;\n    height: 18px;\n    position: relative;\n    pointer-events: none;\n  }\n  .if-burger-icon span {\n    position: absolute;\n    left: 0;\n    width: 100%;\n    height: 2px;\n    background: currentColor;\n    border-radius: 2px;\n    transition:\n      transform 0.3s var(--if-ease),\n      opacity 0.2s var(--if-ease),\n      top 0.3s var(--if-ease);\n  }\n  .if-burger-icon span:nth-child(1) {\n    top: 2px;\n  }\n  .if-burger-icon span:nth-child(2) {\n    top: 8px;\n  }\n  .if-burger-icon span:nth-child(3) {\n    top: 14px;\n  }\n  body.if-mobile-open .if-burger-icon span:nth-child(1) {\n    top: 8px;\n    transform: rotate(45deg);\n  }\n  body.if-mobile-open .if-burger-icon span:nth-child(2) {\n    opacity: 0;\n  }\n  body.if-mobile-open .if-burger-icon span:nth-child(3) {\n    top: 8px;\n    transform: rotate(-45deg);\n  }\n\n  \/* MEGAMENU *\/\n  .if-megamenu {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    background: var(--if-bg-mega);\n    border-bottom: 1px solid var(--if-border);\n    box-shadow: 0 4px 16px -4px rgba(10, 22, 40, 0.1);\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-4px);\n    transition:\n      opacity 0.22s var(--if-ease),\n      transform 0.22s var(--if-ease),\n      visibility 0.22s;\n    z-index: 99;\n  }\n  .if-megamenu.is-open {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n  }\n  .if-megamenu-inner {\n    display: grid;\n    gap: 32px;\n    padding: 32px 0 48px;\n  }\n  .if-megamenu-inner.layout-3 {\n    grid-template-columns: 1fr 1fr 1fr 360px;\n  }\n  .if-megamenu-inner.layout-features {\n    grid-template-columns: 1fr 1fr 360px;\n  }\n  .if-megamenu-inner.layout-4 {\n    grid-template-columns: repeat(4, 1fr) 360px;\n  }\n\n  \/* Product layout: 4 standard columns *\/\n  .if-megamenu-inner.layout-product {\n    grid-template-columns: repeat(4, 1fr);\n    gap: 32px;\n  }\n\n  \/* Industries layout: 4 columns *\/\n  .if-megamenu-inner.layout-industries {\n    grid-template-columns: repeat(4, 1fr);\n    gap: 32px;\n  }\n\n  \/* Solutions as a side column (Product menu) *\/\n  .if-mm-solutions-col {\n    background: linear-gradient(\n      180deg,\n      var(--if-primary-soft) 0%,\n      rgba(237, 242, 255, 0.4) 100%\n    );\n    border-radius: var(--if-radius-md);\n    padding: 18px 16px;\n    display: flex;\n    flex-direction: column;\n    align-self: start;\n    position: relative;\n    overflow: hidden;\n  }\n  .if-mm-solutions-col::before {\n    content: \"\";\n    position: absolute;\n    top: -30px;\n    right: -30px;\n    width: 120px;\n    height: 120px;\n    background: radial-gradient(\n      circle,\n      rgba(30, 94, 255, 0.14),\n      transparent 70%\n    );\n    border-radius: 50%;\n    pointer-events: none;\n  }\n  .if-mm-solutions-col-head {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    padding-bottom: 12px;\n    margin-bottom: 8px;\n    border-bottom: 1px solid rgba(30, 94, 255, 0.18);\n    position: relative;\n  }\n  .if-mm-solutions-col-list {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    position: relative;\n  }\n  .if-mm-solutions-label {\n    font-size: 11px;\n    font-weight: 800;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--if-primary);\n  }\n  .if-mm-solutions-sub {\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--if-ink);\n    letter-spacing: -0.005em;\n    line-height: 1.35;\n  }\n  .if-mm-solution {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 8px;\n    font-size: 13.5px;\n    font-weight: 600;\n    color: var(--if-ink);\n    border-radius: var(--if-radius-sm);\n    transition:\n      background 0.15s var(--if-ease),\n      color 0.15s var(--if-ease);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n    position: relative;\n  }\n  .if-mm-solution:hover {\n    background: white;\n    color: var(--if-primary);\n  }\n  .if-mm-solution-icon {\n    width: 26px;\n    height: 26px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 7px;\n    background: white;\n    color: var(--if-primary);\n    flex-shrink: 0;\n    transition:\n      background 0.15s var(--if-ease),\n      color 0.15s var(--if-ease);\n    box-shadow: 0 1px 2px rgba(30, 94, 255, 0.08);\n  }\n  .if-mm-solution:hover .if-mm-solution-icon {\n    background: var(--if-primary);\n    color: white;\n  }\n  .if-mm-solution-all {\n    color: var(--if-primary);\n    font-weight: 700;\n    justify-content: space-between;\n    gap: 6px;\n    padding: 10px 8px;\n    margin-top: 8px;\n    border-top: 1px solid rgba(30, 94, 255, 0.18);\n    border-radius: 0;\n    font-size: 13px;\n    position: relative;\n  }\n  .if-mm-solution-all svg {\n    flex-shrink: 0;\n    transition: transform 0.18s var(--if-ease);\n  }\n  .if-mm-solution-all:hover {\n    background: transparent;\n    color: var(--if-primary-hover);\n  }\n  .if-mm-solution-all:hover svg {\n    transform: translateX(3px);\n  }\n\n  \/* Resources Academy side column *\/\n  .if-mm-academy {\n    display: flex;\n    flex-direction: column;\n    align-self: start;\n  }\n  .if-mm-academy .if-mm-link {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 7px 0;\n  }\n  .if-mm-academy-icon {\n    width: 22px;\n    height: 22px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    background: var(--if-primary-soft);\n    color: var(--if-primary);\n    flex-shrink: 0;\n    transition:\n      background 0.15s var(--if-ease),\n      color 0.15s var(--if-ease);\n  }\n  .if-mm-academy .if-mm-link:hover .if-mm-academy-icon {\n    background: var(--if-primary);\n    color: white;\n  }\n\n  \/* Featured aside \u2014 compact variant for Product menu *\/\n  .if-mm-featured-compact {\n    padding: 18px 18px;\n    align-self: center;\n    grid-row: 1;\n    background: linear-gradient(180deg, #f4f7ff 0%, white 100%);\n    text-align: left;\n  }\n  .if-mm-featured-compact .if-mm-featured-eyebrow {\n    margin-bottom: 6px;\n    font-size: 12px;\n  }\n  .if-mm-featured-compact .if-mm-featured-title {\n    font-size: 17px;\n    line-height: 1.2;\n    margin-bottom: 12px;\n  }\n  .if-mm-featured-cta-compact {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    width: 100%;\n    padding: 10px 14px;\n    background: var(--if-ink);\n    color: white;\n    border-radius: var(--if-radius-pill);\n    font-weight: 700;\n    font-size: 13px;\n    letter-spacing: -0.005em;\n    transition:\n      background 0.2s var(--if-ease),\n      transform 0.2s var(--if-ease);\n  }\n  .if-mm-featured-cta-compact:hover {\n    background: var(--if-accent);\n    color: white;\n    transform: translateY(-1px);\n  }\n  .if-mm-featured-cta-compact .if-mm-deal-dot {\n    background: white;\n    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);\n  }\n  @keyframes if-pulse-white {\n    0% {\n      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);\n    }\n    70% {\n      box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);\n    }\n    100% {\n      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);\n    }\n  }\n  .if-mm-featured-cta-compact .if-mm-deal-dot {\n    animation: if-pulse-white 2s infinite;\n  }\n\n  .if-mm-col {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .if-mm-coltitle {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--if-primary) !important;\n    letter-spacing: -0.005em;\n    padding-bottom: 14px;\n    margin-bottom: 4px;\n    border-bottom: 1px solid var(--if-border);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: color 0.18s var(--if-ease);\n  }\n  .if-mm-coltitle:hover {\n    color: var(--if-primary-hover) !important;\n    background: none !important;\n  }\n\n  .if-mm-list {\n    display: flex;\n    flex-direction: column;\n    padding-top: 12px;\n    padding-left: 0 !important;\n    margin-bottom: 18px;\n    margin-left: 0 !important;\n    list-style: none !important;\n  }\n  .if-mm-link {\n    display: block;\n    padding: 8px 0;\n    font-size: 14.5px;\n    font-weight: 500;\n    color: var(--if-ink) !important;\n    transition:\n      color 0.18s var(--if-ease),\n      padding-left 0.2s var(--if-ease),\n      transform 0.2s var(--if-ease);\n  }\n  .if-mm-link:hover {\n    color: var(--if-primary) !important;\n    background: none !important;\n    padding-left: 4px;\n  }\n\n  .if-mm-overview {\n    margin-top: auto;\n    padding-top: 16px;\n    border-top: 1px solid var(--if-border);\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--if-ink) !important;\n    transition:\n      color 0.18s var(--if-ease),\n      gap 0.25s var(--if-ease);\n  }\n  .if-mm-overview:hover {\n    color: var(--if-primary) !important;\n    background: none !important;\n    gap: 10px;\n  }\n  .if-mm-overview svg {\n    transition: transform 0.2s var(--if-ease);\n  }\n  .if-mm-overview:hover svg {\n    transform: translateX(3px);\n  }\n\n  .if-mm-featured {\n    background: white;\n    border-radius: var(--if-radius-lg);\n    padding: 24px;\n    border: 1px solid var(--if-border);\n    align-self: start;\n    grid-column: -2 \/ -1;\n    grid-row: 1;\n    display: flex;\n    flex-direction: column;\n  }\n  .if-mm-featured-eyebrow {\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--if-primary);\n    letter-spacing: -0.005em;\n    margin-bottom: 16px;\n  }\n  .if-mm-featured-image {\n    width: 100%;\n    height: 160px;\n    border-radius: var(--if-radius-md);\n    background: linear-gradient(135deg, #edf2ff 0%, #dce6ff 100%);\n    margin-bottom: 18px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n    border: 1px solid var(--if-border-soft);\n  }\n  .if-mm-featured-image::after {\n    content: \"\";\n    position: absolute;\n    top: -40px;\n    right: -40px;\n    width: 140px;\n    height: 140px;\n    background: radial-gradient(\n      circle,\n      rgba(0, 68, 187, 0.18),\n      transparent 70%\n    );\n    border-radius: 50%;\n  }\n  .if-mm-featured-title {\n    font-size: 18px;\n    font-weight: 800;\n    color: var(--if-ink);\n    letter-spacing: -0.02em;\n    line-height: 1.25;\n    margin-bottom: 8px;\n  }\n  .if-mm-featured-desc {\n    font-size: 13.5px;\n    color: var(--if-ink-soft);\n    line-height: 1.5;\n    margin-bottom: 18px;\n  }\n  .if-mm-featured-cta {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 12px 20px;\n    background: var(--if-accent);\n    color: white;\n    border-radius: var(--if-radius-sm);\n    font-weight: 700;\n    font-size: 14px;\n    transition:\n      background 0.2s var(--if-ease),\n      transform 0.2s var(--if-ease),\n      color 0.2s var(--if-ease);\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .if-mm-featured-cta:hover {\n    background: var(--if-accent-dark);\n    color: white;\n    transform: translateY(-1px);\n  }\n\n  .if-mm-footer {\n    grid-column: 1 \/ -1;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 18px 0 4px;\n    margin-top: 16px;\n    border-top: 1px solid var(--if-border);\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--if-ink-soft);\n    flex-wrap: wrap;\n  }\n  .if-mm-footer a {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    color: var(--if-ink);\n    transition: color 0.18s var(--if-ease);\n  }\n  .if-mm-footer a:hover {\n    color: var(--if-primary);\n    background: none !important;\n  }\n  .if-mm-footer-sep {\n    color: var(--if-ink-faint);\n    user-select: none;\n  }\n  .if-mm-footer .external svg {\n    opacity: 0.5;\n  }\n\n  \/* Featured aside variant: stacked cards instead of single image *\/\n  .if-mm-featured-stack {\n    padding: 20px;\n    gap: 10px;\n  }\n  .if-mm-featured-stack .if-mm-featured-eyebrow {\n    margin-bottom: 12px;\n  }\n  .if-mm-featured-card {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 14px;\n    border: 1px solid var(--if-border);\n    border-radius: var(--if-radius-md);\n    background: white;\n    color: var(--if-ink);\n    transition:\n      border-color 0.18s var(--if-ease),\n      background 0.18s var(--if-ease),\n      transform 0.2s var(--if-ease);\n  }\n  .if-mm-featured-card:hover {\n    border-color: var(--if-primary);\n    background: var(--if-primary-soft);\n    transform: translateY(-1px);\n  }\n  .if-mm-featured-card-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .if-mm-featured-card-icon.icon-blue {\n    background: #dbe9fe;\n    color: var(--if-primary);\n  }\n  .if-mm-featured-card-icon.icon-mint {\n    background: #dbf5eb;\n    color: #00a87b;\n  }\n  .if-mm-featured-card-body {\n    flex: 1;\n    min-width: 0;\n  }\n  .if-mm-featured-card-title {\n    font-size: 14.5px;\n    font-weight: 700;\n    color: var(--if-ink);\n    margin-bottom: 2px;\n    letter-spacing: -0.005em;\n  }\n  .if-mm-featured-card-desc {\n    font-size: 12.5px;\n    color: var(--if-ink-muted);\n    line-height: 1.4;\n  }\n  .if-mm-featured-card-arrow {\n    color: var(--if-ink-faint);\n    flex-shrink: 0;\n    transition:\n      transform 0.2s var(--if-ease),\n      color 0.2s var(--if-ease);\n  }\n  .if-mm-featured-card:hover .if-mm-featured-card-arrow {\n    color: var(--if-primary);\n    transform: translateX(3px);\n  }\n  \/* Deal pill *\/\n  .if-mm-deal-pill {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    margin-top: 6px;\n    background: white;\n    border: 1px solid var(--if-border);\n    border-radius: var(--if-radius-pill);\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--if-ink-soft);\n    transition:\n      border-color 0.18s var(--if-ease),\n      background 0.18s var(--if-ease),\n      color 0.18s var(--if-ease);\n  }\n  .if-mm-deal-pill:hover {\n    border-color: var(--if-primary);\n    background: var(--if-primary-soft);\n    color: var(--if-ink);\n  }\n  .if-mm-deal-pill strong {\n    color: var(--if-ink);\n    font-weight: 800;\n  }\n  .if-mm-deal-pill svg {\n    margin-left: auto;\n    color: var(--if-ink-muted);\n    transition:\n      transform 0.2s var(--if-ease),\n      color 0.2s var(--if-ease);\n  }\n  .if-mm-deal-pill:hover svg {\n    color: var(--if-primary);\n    transform: translateX(3px);\n  }\n  .if-mm-deal-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: var(--if-primary);\n    box-shadow: 0 0 0 0 rgba(0, 68, 187, 0.6);\n    animation: if-pulse 2s infinite;\n    flex-shrink: 0;\n  }\n  @keyframes if-pulse {\n    0% {\n      box-shadow: 0 0 0 0 rgba(0, 68, 187, 0.6);\n    }\n    70% {\n      box-shadow: 0 0 0 6px rgba(0, 68, 187, 0);\n    }\n    100% {\n      box-shadow: 0 0 0 0 rgba(0, 68, 187, 0);\n    }\n  }\n\n  \/* Featured aside \u2014 Software CTA variant (Resources) \u2014 minimalist *\/\n  .if-mm-featured-software {\n    padding: 28px 24px;\n    background: linear-gradient(180deg, #f4f7ff 0%, white 70%);\n    border: 1px solid var(--if-border);\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n  .if-mm-featured-software::before {\n    content: \"\";\n    position: absolute;\n    top: -60px;\n    right: -60px;\n    width: 180px;\n    height: 180px;\n    background: radial-gradient(\n      circle,\n      rgba(30, 94, 255, 0.18),\n      transparent 70%\n    );\n    border-radius: 50%;\n    pointer-events: none;\n  }\n  .if-mm-featured-software .if-mm-featured-eyebrow {\n    margin-bottom: 12px;\n    position: relative;\n  }\n  .if-mm-featured-software .if-mm-featured-title {\n    font-size: 22px;\n    line-height: 1.15;\n    margin-bottom: 10px;\n    position: relative;\n  }\n  .if-mm-featured-software .if-mm-featured-desc {\n    margin-bottom: 20px;\n    position: relative;\n  }\n  .if-mm-featured-software .if-mm-featured-cta {\n    margin-top: auto;\n    position: relative;\n  }\n\n  \/* MOBILE *\/\n  html.if-mobile-open,\n  body.if-mobile-open,\n  body.if-no-scroll {\n    overflow: hidden !important;\n    height: 100% !important;\n  }\n  .ifig-widget .if-mobile-cta {\n    color: white !important;\n  }\n  body.if-mobile-open #wib-app,\n  body.if-mobile-open [class*=\"wib-currency\"],\n  body.if-mobile-open [class*=\"wib-due-date\"],\n  body.if-mobile-open [class*=\"wib-sidebar\"],\n  body.if-mobile-open [class*=\"wib-footer\"],\n  body.if-mobile-open [class*=\"wib-toolbar\"] {\n    visibility: hidden !important;\n    pointer-events: none !important;\n  }\n  .if-mobile-overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(10, 22, 40, 0.4);\n    backdrop-filter: blur(4px);\n    z-index: 2147483645;\n    opacity: 0;\n    visibility: hidden;\n    transition:\n      opacity 0.3s var(--if-ease),\n      visibility 0.3s;\n  }\n  body.if-mobile-open .if-mobile-overlay {\n    opacity: 1;\n    visibility: visible;\n  }\n  .if-mobile-menu {\n    position: fixed;\n    inset: 0;\n    background: white;\n    z-index: 2147483647;\n    transform: translateX(100%);\n    transition: transform 0.35s var(--if-ease);\n    display: flex;\n    flex-direction: column;\n    visibility: hidden;\n  }\n  body.if-mobile-open .if-mobile-menu {\n    transform: translateX(0);\n    visibility: visible;\n  }\n  .if-mobile-stack {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n  }\n  .if-mobile-screen {\n    position: absolute;\n    inset: 0;\n    background: white;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.32s var(--if-ease);\n    visibility: hidden;\n  }\n  .if-mobile-screen.is-active {\n    transform: translateX(0);\n    visibility: visible;\n  }\n  .if-mobile-screen.is-prev {\n    transform: translateX(-30%);\n    visibility: visible;\n  }\n  .if-mobile-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--if-border);\n    flex-shrink: 0;\n    background: white;\n    min-height: 64px;\n  }\n  .if-mobile-back {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 4px 8px 0 !important;\n    color: var(--if-ink) !important;\n    font-size: 15px !important;\n    font-weight: 700 !important;\n    -webkit-tap-highlight-color: transparent;\n  }\n  .if-mobile-close {\n    width: 40px;\n    height: 40px;\n    border-radius: var(--if-radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--if-ink) !important;\n    -webkit-tap-highlight-color: transparent;\n    padding: 0 !important;\n  }\n  .if-mobile-close:hover,\n  .if-mobile-close:active {\n    background: var(--if-border-soft);\n  }\n  .if-mobile-body {\n    flex: 1;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    padding: 8px 20px 24px;\n    -webkit-overflow-scrolling: touch;\n  }\n  .if-mobile-rootitem {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding: 18px 4px !important;\n    font-size: 17px !important;\n    font-weight: 700 !important;\n    color: var(--if-ink) !important;\n    border-bottom: 1px solid var(--if-border) !important;\n    text-align: left;\n    letter-spacing: -0.01em;\n    -webkit-tap-highlight-color: transparent;\n    transition: color 0.15s var(--if-ease);\n    background: none !important;\n    text-decoration: none !important;\n  }\n  .if-mobile-rootitem:hover,\n  .if-mobile-rootitem:active {\n    color: var(--if-primary) !important;\n    background: none !important;\n  }\n  .if-mobile-rootitem .chev {\n    color: var(--if-ink-muted);\n    flex-shrink: 0;\n  }\n  \/* Root items that are <a> (no chevron) get an arrow indicator *\/\n  a.if-mobile-rootitem::after {\n    content: \"\";\n    width: 16px;\n    height: 16px;\n    flex-shrink: 0;\n    background-color: var(--if-ink-faint);\n    -webkit-mask-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'\/><\/svg>\");\n    mask-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'\/><\/svg>\");\n    -webkit-mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n    mask-position: center;\n    -webkit-mask-size: contain;\n    mask-size: contain;\n    transition:\n      background-color 0.18s var(--if-ease),\n      transform 0.2s var(--if-ease);\n  }\n  a.if-mobile-rootitem:hover::after,\n  a.if-mobile-rootitem:active::after {\n    background-color: var(--if-primary);\n    transform: translateX(3px);\n  }\n\n  \/* Mobile quick tools (highlighted cards at top of menu) *\/\n  .if-mobile-quick-tools {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 8px;\n    padding: 12px 0 16px;\n    margin-bottom: 4px;\n    border-bottom: 1px solid var(--if-border);\n  }\n  .if-mobile-quick-tool {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 12px;\n    border-radius: var(--if-radius-md);\n    text-align: left;\n    -webkit-tap-highlight-color: transparent;\n    transition: transform 0.15s var(--if-ease);\n  }\n  .if-mobile-quick-tool:active {\n    transform: scale(0.98);\n  }\n  .if-mobile-quick-tool-icon {\n    width: 32px;\n    height: 32px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    background: white;\n    flex-shrink: 0;\n  }\n  .if-mobile-quick-tool-text {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n    min-width: 0;\n  }\n  .if-mobile-quick-tool-eyebrow {\n    font-size: 9.5px;\n    font-weight: 800;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    line-height: 1;\n  }\n  .if-mobile-quick-tool {\n    font-size: 12px;\n    font-weight: 700;\n    color: var(--if-ink) !important;\n    letter-spacing: -0.005em;\n    line-height: 1.15;\n  }\n\n  \/* Mobile variant: doc *\/\n  .if-mobile-quick-tool-doc {\n    background: var(--if-primary-soft);\n  }\n  .if-mobile-quick-tool-doc .if-mobile-quick-tool-icon {\n    color: var(--if-primary);\n    box-shadow: 0 1px 2px rgba(30, 94, 255, 0.12);\n  }\n  .if-mobile-quick-tool-doc .if-mobile-quick-tool-eyebrow {\n    color: var(--if-primary);\n  }\n\n  \/* Mobile variant: bolt *\/\n  .if-mobile-quick-tool-bolt {\n    background: #fff1db;\n  }\n  .if-mobile-quick-tool-bolt .if-mobile-quick-tool-icon {\n    color: #ff9c00;\n    box-shadow: 0 1px 2px rgba(255, 156, 0, 0.18);\n  }\n  .if-mobile-quick-tool-bolt .if-mobile-quick-tool-eyebrow {\n    color: #ff9c00;\n  }\n  .if-mobile-section-title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    font-size: 11px;\n    font-weight: 800;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--if-primary) !important;\n    padding: 22px 4px 12px;\n    margin-bottom: 4px;\n    border-bottom: 1px solid var(--if-border);\n  }\n  .if-mobile-section-title:first-child {\n    padding-top: 10px;\n  }\n  .if-mobile-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    padding: 13px 4px;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--if-ink) !important;\n    border-radius: var(--if-radius-sm);\n    transition:\n      color 0.15s var(--if-ease),\n      background 0.15s var(--if-ease),\n      padding-left 0.18s var(--if-ease);\n    -webkit-tap-highlight-color: transparent;\n    position: relative;\n    background: none !important;\n    text-decoration: none !important;\n  }\n  .if-mobile-item::after {\n    content: \"\";\n    width: 14px;\n    height: 14px;\n    flex-shrink: 0;\n    margin-left: auto;\n    background-color: var(--if-ink-faint);\n    -webkit-mask-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'\/><\/svg>\");\n    mask-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'\/><\/svg>\");\n    -webkit-mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n    mask-position: center;\n    -webkit-mask-size: contain;\n    mask-size: contain;\n    transition:\n      background-color 0.18s var(--if-ease),\n      transform 0.2s var(--if-ease);\n  }\n  .if-mobile-item:hover,\n  .if-mobile-item:active {\n    color: var(--if-primary);\n    padding-left: 8px;\n  }\n  .if-mobile-item:hover::after,\n  .if-mobile-item:active::after {\n    background-color: var(--if-primary);\n    transform: translateX(3px);\n  }\n  \/* Items WITH a format tag: switch to a grid so the tags sit in a fixed column,\n     visually aligned across all rows regardless of label length. *\/\n  .if-mobile-item-format {\n    display: grid !important;\n    grid-template-columns: 1fr 78px 14px;\n    align-items: center;\n    column-gap: 12px;\n  }\n  .if-mobile-item .if-mm-format-tag {\n    flex-shrink: 0;\n    justify-self: stretch;\n    margin: 0;\n    text-align: center;\n  }\n\n  \/* Primary section block (Software) \u2014 soft blue card like desktop *\/\n  .if-mobile-section-primary {\n    margin: 8px 0 4px;\n    padding: 6px 14px 14px;\n    background: linear-gradient(\n      180deg,\n      var(--if-primary-soft) 0%,\n      rgba(237, 242, 255, 0.4) 100%\n    );\n    border-radius: var(--if-radius-md);\n    position: relative;\n    overflow: hidden;\n  }\n  .if-mobile-section-primary::before {\n    content: \"\";\n    position: absolute;\n    top: -30px;\n    right: -30px;\n    width: 100px;\n    height: 100px;\n    background: radial-gradient(\n      circle,\n      rgba(30, 94, 255, 0.12),\n      transparent 70%\n    );\n    border-radius: 50%;\n    pointer-events: none;\n  }\n  .if-mobile-section-title-primary {\n    border-bottom-color: rgba(30, 94, 255, 0.18);\n    padding-top: 14px !important;\n  }\n  .if-mobile-section-primary .if-mobile-item {\n    padding-left: 4px;\n  }\n  .if-mobile-section-primary .if-mobile-item:hover,\n  .if-mobile-section-primary .if-mobile-item:active {\n    padding-left: 8px;\n    background: rgba(255, 255, 255, 0.6);\n  }\n\n  \/* Mobile Academy items with icon (Resources screen) *\/\n  .if-mobile-item-academy {\n    gap: 12px;\n  }\n  .if-mobile-academy-icon {\n    width: 28px;\n    height: 28px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 7px;\n    background: var(--if-primary-soft);\n    color: var(--if-primary);\n    flex-shrink: 0;\n    transition:\n      background 0.15s var(--if-ease),\n      color 0.15s var(--if-ease);\n  }\n  .if-mobile-item-academy:hover .if-mobile-academy-icon,\n  .if-mobile-item-academy:active .if-mobile-academy-icon {\n    background: var(--if-primary);\n    color: white;\n  }\n  .if-mobile-overview {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 4px;\n    margin: 6px 0 8px;\n    font-size: 14.5px;\n    font-weight: 700;\n    color: var(--if-primary);\n    border-top: 1px solid var(--if-border);\n  }\n  .if-mobile-overview svg {\n    color: var(--if-primary);\n  }\n\n  \/* \"All XXX\" link at the end of each section in Resources *\/\n  .if-mobile-seeall {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    padding: 13px 4px;\n    margin: 4px 0 2px;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--if-ink-soft) !important;\n    border-top: 1px solid var(--if-border);\n    -webkit-tap-highlight-color: transparent;\n    border-radius: 0px;\n    background: transparent;\n    transition:\n      gap 0.25s var(--if-ease),\n      color 0.18s var(--if-ease);\n  }\n  .if-mobile-seeall:hover,\n  .if-mobile-seeall:active {\n    color: var(--if-ink);\n    gap: 12px;\n  }\n  .if-mobile-seeall svg {\n    flex-shrink: 0;\n    color: var(--if-ink-soft);\n    transition:\n      transform 0.2s var(--if-ease),\n      color 0.18s var(--if-ease);\n  }\n  .if-mobile-seeall:hover svg,\n  .if-mobile-seeall:active svg {\n    transform: translateX(2px);\n    color: var(--if-ink);\n  }\n  \/* See all variant \u2014 color azul (Industries only), mantiene tama\u00f1o\/forma del resto *\/\n  .if-mobile-seeall--primary {\n    color: var(--if-primary);\n  }\n  .if-mobile-seeall--primary svg {\n    color: var(--if-primary);\n  }\n  .if-mobile-seeall--primary:hover,\n  .if-mobile-seeall--primary:active {\n    color: var(--if-primary-hover);\n  }\n  .if-mobile-seeall--primary:hover svg,\n  .if-mobile-seeall--primary:active svg {\n    color: var(--if-primary-hover);\n  }\n\n  .if-mobile-footer {\n    flex-shrink: 0;\n    padding: 16px 20px 20px;\n    background: white;\n    border-top: 1px solid var(--if-border);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n  .if-mobile-cta {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 14px 20px;\n    background: var(--if-accent);\n    color: white !important;\n    border-radius: var(--if-radius-sm);\n    font-weight: 700;\n    font-size: 15px;\n  }\n  .if-mobile-cta-secondary {\n    background: white;\n    color: var(--if-ink);\n    border: 1.5px solid var(--if-border);\n  }\n\n  \/* Mobile utilities (Sign in + Language) \u2014 placed below the menu *\/\n  .if-mobile-utilities {\n    margin-top: 16px;\n    padding: 10px 0 8px;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    position: relative;\n  }\n  .if-mobile-utility,\n  a.if-mobile-utility,\n  button.if-mobile-utility {\n    display: flex !important;\n    align-items: center !important;\n    gap: 12px !important;\n    width: 100% !important;\n    padding: 12px 4px !important;\n    padding-left: 0 !important;\n    font-size: 14.5px !important;\n    font-weight: 600 !important;\n    color: var(--if-ink) !important;\n    text-align: left !important;\n    -webkit-tap-highlight-color: transparent;\n    transition: color 0.15s var(--if-ease);\n    background: none !important;\n    background-color: transparent !important;\n    text-decoration: none !important;\n  }\n  .if-mobile-utility svg,\n  a.if-mobile-utility svg,\n  button.if-mobile-utility svg {\n    color: var(--if-ink-muted) !important;\n    flex-shrink: 0;\n  }\n  .if-mobile-utility:hover,\n  .if-mobile-utility:active,\n  a.if-mobile-utility:hover,\n  a.if-mobile-utility:active,\n  button.if-mobile-utility:hover,\n  button.if-mobile-utility:active {\n    color: var(--if-primary) !important;\n    background: none !important;\n    background-color: transparent !important;\n  }\n  .if-mobile-utility:hover svg,\n  .if-mobile-utility:active svg,\n  a.if-mobile-utility:hover svg,\n  button.if-mobile-utility:hover svg {\n    color: var(--if-primary) !important;\n  }\n  .if-mobile-utility-chev {\n    margin-left: auto;\n    color: var(--if-ink-faint) !important;\n    transition: transform 0.25s var(--if-ease);\n  }\n\n  .if-mobile-utilities.is-lang-open .if-mobile-utility-chev {\n    transform: rotate(180deg);\n  }\n\n  \/* Mobile language dropdown panel *\/\n  .if-mobile-lang-panel {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 6px;\n    max-height: 0;\n    overflow: hidden;\n    opacity: 0;\n    transition:\n      max-height 0.3s var(--if-ease),\n      opacity 0.2s var(--if-ease),\n      margin 0.3s var(--if-ease);\n    margin: 0;\n  }\n  .if-mobile-utilities.is-lang-open .if-mobile-lang-panel {\n    max-height: 500px;\n    opacity: 1;\n    margin: 6px 0 12px;\n  }\n  \/* Lang trigger turns primary blue when panel is open *\/\n  .if-mobile-utilities.is-lang-open #ifMobileLangTrigger,\n  .if-mobile-utilities.is-lang-open #ifMobileLangTrigger span {\n    color: var(--if-primary) !important;\n  }\n  .if-mobile-utilities.is-lang-open #ifMobileLangTrigger svg {\n    color: var(--if-primary) !important;\n  }\n\n  .if-mobile-lang-option {\n    display: flex !important;\n    align-items: center !important;\n    gap: 10px !important;\n    padding: 10px 12px !important;\n    font-size: 14px !important;\n    font-weight: 600 !important;\n    color: var(--if-ink) !important;\n    background: var(--if-border-soft) !important;\n    border-radius: var(--if-radius-sm) !important;\n    text-align: left !important;\n    transition:\n      background 0.15s var(--if-ease),\n      color 0.15s var(--if-ease);\n    -webkit-tap-highlight-color: transparent;\n  }\n  .if-mobile-lang-option:hover,\n  .if-mobile-lang-option:active {\n    background: var(--if-border-soft) !important;\n    color: var(--if-primary) !important;\n  }\n  .if-mobile-lang-option.is-current {\n    background: var(--if-border-soft) !important;\n    color: var(--if-primary) !important;\n  }\n  .if-mobile-lang-code {\n    font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n    font-size: 11px !important;\n    font-weight: 700 !important;\n    letter-spacing: 0.04em;\n    color: var(--if-ink-muted) !important;\n    background: white !important;\n    padding: 4px 7px !important;\n    border-radius: 5px !important;\n    min-width: 30px !important;\n    text-align: center;\n    flex-shrink: 0;\n  }\n  .if-mobile-lang-option.is-current .if-mobile-lang-code,\n  .if-mobile-lang-option:hover .if-mobile-lang-code {\n    color: var(--if-ink-muted) !important;\n    background: white !important;\n  }\n\n  \/* Mobile Solutions \u2014 banded design like desktop *\/\n  .if-mobile-solutions {\n    margin: 24px 0 8px;\n    padding: 20px 16px;\n    background: white;\n    border: 1px solid var(--if-border);\n    border-radius: var(--if-radius-md);\n  }\n  .if-mobile-solutions-head {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    padding-bottom: 14px;\n    margin-bottom: 14px;\n    border-bottom: 1px solid var(--if-border);\n  }\n  .if-mobile-solutions-label {\n    font-size: 11px;\n    font-weight: 800;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--if-primary);\n  }\n  .if-mobile-solutions-sub {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--if-ink);\n    letter-spacing: -0.005em;\n    line-height: 1.35;\n  }\n  .if-mobile-solutions-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 6px;\n  }\n  .if-mobile-solution {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 10px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--if-ink);\n    border-radius: var(--if-radius-sm);\n    transition:\n      background 0.15s var(--if-ease),\n      color 0.15s var(--if-ease);\n    -webkit-tap-highlight-color: transparent;\n  }\n  .if-mobile-solution:hover,\n  .if-mobile-solution:active {\n    background: var(--if-primary-soft);\n    color: var(--if-primary);\n  }\n  .if-mobile-solution-icon {\n    width: 28px;\n    height: 28px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    background: var(--if-primary-soft);\n    color: var(--if-primary);\n    flex-shrink: 0;\n    transition:\n      background 0.15s var(--if-ease),\n      color 0.15s var(--if-ease);\n  }\n  .if-mobile-solution:hover .if-mobile-solution-icon,\n  .if-mobile-solution:active .if-mobile-solution-icon {\n    background: var(--if-primary);\n    color: white;\n  }\n  .if-mobile-solution-all {\n    color: var(--if-primary);\n    font-weight: 700;\n    justify-content: space-between;\n  }\n  .if-mobile-solution-all svg {\n    flex-shrink: 0;\n  }\n  .if-mobile-solution-all:hover,\n  .if-mobile-solution-all:active {\n    background: var(--if-primary-soft);\n  }\n\n  \/* Mobile deal pill (Save 78% inside Product) *\/\n  .if-mobile-deal {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 16px 0 8px;\n    padding: 14px 16px;\n    background: linear-gradient(180deg, #f4f7ff 0%, white 100%);\n    border: 1px solid var(--if-border);\n    border-radius: var(--if-radius-md);\n    color: var(--if-ink);\n    -webkit-tap-highlight-color: transparent;\n    transition:\n      transform 0.18s var(--if-ease),\n      border-color 0.18s var(--if-ease);\n  }\n  .if-mobile-deal:hover,\n  .if-mobile-deal:active {\n    border-color: var(--if-primary-soft);\n    transform: translateY(-1px);\n  }\n  .if-mobile-deal-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: var(--if-primary);\n    flex-shrink: 0;\n    box-shadow: 0 0 0 0 rgba(0, 68, 187, 0.6);\n    animation: if-pulse 2s infinite;\n  }\n  .if-mobile-deal-eyebrow {\n    flex-shrink: 0;\n    font-size: 10px;\n    font-weight: 800;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    color: var(--if-primary);\n    background: white;\n    padding: 4px 8px;\n    border-radius: 999px;\n    line-height: 1;\n    border: 1px solid var(--if-primary-soft);\n  }\n  .if-mobile-deal-headline {\n    flex: 1;\n    min-width: 0;\n    font-size: 14.5px;\n    font-weight: 700;\n    color: var(--if-ink);\n    letter-spacing: -0.005em;\n    line-height: 1.2;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .if-mobile-deal strong {\n    font-weight: 800;\n    color: var(--if-primary);\n  }\n  .if-mobile-deal svg {\n    color: var(--if-ink-muted);\n    flex-shrink: 0;\n  }\n\n  \/* Mobile software CTA (inside Resources, like desktop aside) *\/\n  .if-mobile-software-cta {\n    margin: 28px 0 12px;\n    padding: 24px 20px;\n    background: linear-gradient(180deg, #f4f7ff 0%, white 70%);\n    border: 1px solid var(--if-border);\n    border-radius: var(--if-radius-md);\n    position: relative;\n    overflow: hidden;\n  }\n  .if-mobile-software-cta::before {\n    content: \"\";\n    position: absolute;\n    top: -40px;\n    right: -40px;\n    width: 120px;\n    height: 120px;\n    background: radial-gradient(\n      circle,\n      rgba(30, 94, 255, 0.18),\n      transparent 70%\n    );\n    border-radius: 50%;\n    pointer-events: none;\n  }\n  .if-mobile-software-eyebrow {\n    font-size: 11px;\n    font-weight: 800;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--if-primary);\n    margin-bottom: 10px;\n    position: relative;\n  }\n  .if-mobile-software-heading {\n    font-size: 22px;\n    font-weight: 800;\n    color: var(--if-ink);\n    letter-spacing: -0.02em;\n    line-height: 1.15;\n    margin-bottom: 10px;\n    position: relative;\n  }\n  .if-mobile-software-desc {\n    font-size: 14px;\n    color: var(--if-ink-soft);\n    line-height: 1.5;\n    margin-bottom: 18px;\n    position: relative;\n  }\n  .if-mobile-software-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    width: 100%;\n    padding: 12px 20px;\n    background: var(--if-ink);\n    color: white;\n    border-radius: var(--if-radius-sm);\n    font-weight: 700;\n    font-size: 14px;\n    position: relative;\n    transition:\n      background 0.2s var(--if-ease),\n      transform 0.2s var(--if-ease);\n  }\n  .if-mobile-software-btn:hover,\n  .if-mobile-software-btn:active {\n    background: var(--if-primary);\n    transform: translateY(-1px);\n  }\n\n  \/* RESPONSIVE *\/\n  @media (max-width: 1280px) {\n    .if-megamenu-inner.layout-3 {\n      grid-template-columns: 1fr 1fr 1fr 320px;\n    }\n    .if-megamenu-inner.layout-features {\n      grid-template-columns: 1fr 1fr 320px;\n    }\n    .if-megamenu-inner.layout-4 {\n      grid-template-columns: repeat(4, 1fr) 300px;\n      gap: 24px;\n    }\n    .if-megamenu-inner.layout-product {\n      grid-template-columns: repeat(4, 1fr);\n      gap: 24px;\n    }\n    .if-megamenu-inner.layout-resources {\n      grid-template-columns: repeat(5, 1fr);\n      gap: 24px;\n    }\n    .if-mm-solution {\n      font-size: 13px;\n      padding: 7px 8px;\n    }\n  }\n  @media (max-width: 1100px) {\n    .if-nav-tabs,\n    .if-login,\n    .if-btn-outline,\n    .if-tool-chip,\n    .if-nav-divider,\n    .if-nav-cta {\n      display: none;\n    }\n    .if-burger {\n      display: flex;\n    }\n    .if-container {\n      padding: 0 20px;\n    }\n\n    \/* Mobile header layout: logo left, burger right (utilities live in topbar) *\/\n    .if-nav-primary {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 12px;\n    }\n    .if-nav-actions {\n      display: none;\n    }\n  }\n  @media (max-width: 768px) {\n    .if-topbar-row {\n      height: 36px;\n      gap: 10px;\n    }\n    .if-topbar-promo {\n      font-size: 12px;\n      gap: 6px;\n    }\n    .if-topbar-promo-extra {\n      display: none;\n    }\n    .if-topbar-actions {\n      gap: 8px;\n    }\n    .if-topbar-login {\n      display: none;\n    }\n    .if-topbar-actions .if-lang {\n      display: none;\n    }\n    .if-topbar-cta {\n      padding: 5px 10px;\n      font-size: 12px;\n    }\n    .if-nav-primary {\n      height: 64px;\n      gap: 12px;\n    }\n    .if-logo-img {\n      height: 28px !important;\n      max-height: 28px !important;\n    }\n    .if-container {\n      padding: 0 16px;\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      transition-duration: 0.01ms !important;\n    }\n  }\n\n  \/* See all per-column (Resources) *\/\n  .if-mm-seeall {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    margin-top: auto;\n    padding-top: 16px;\n    border-top: 1px solid var(--if-border);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--if-ink) !important;\n    transition: gap 0.25s var(--if-ease);\n  }\n  .if-mm-seeall:hover {\n    gap: 12px;\n    color: var(--if-ink) !important;\n    background: none !important;\n  }\n  .if-mm-seeall svg {\n    flex-shrink: 0;\n    transition: transform 0.2s var(--if-ease);\n    color: var(--if-ink);\n  }\n  .if-mm-seeall:hover svg {\n    transform: translateX(2px);\n  }\n\n  \/* See all variant \u2014 azul\/bold (Industries only) *\/\n  .if-mm-seeall--primary {\n    color: var(--if-primary);\n    font-weight: 700;\n  }\n  .if-mm-seeall--primary svg {\n    color: var(--if-primary);\n  }\n  .if-mm-seeall--primary:hover {\n    color: var(--if-primary-hover);\n    background: none !important;\n  }\n\n  \/* Full-width See all (Product) *\/\n  .if-mm-seeall-full {\n    grid-column: 1 \/ 5;\n    grid-row: 2;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: -8px;\n    padding: 14px 28px 0;\n    border-top: 1px solid var(--if-border);\n    width: 100%;\n    justify-content: center;\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--if-primary);\n    transition: gap 0.25s var(--if-ease);\n  }\n  .if-mm-seeall-full:hover {\n    gap: 12px;\n    color: var(--if-primary-hover);\n    background: none !important;\n  }\n  .if-mm-seeall-full svg {\n    flex-shrink: 0;\n    transition: transform 0.2s var(--if-ease);\n  }\n  .if-mm-seeall-full:hover svg {\n    transform: translateX(3px);\n  }\n\n  \/* Format tags (Templates by Format column) *\/\n  .if-mm-link.has-tag {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n  }\n  .if-mm-link.has-tag:hover {\n    padding-left: 0;\n    background: none !important;\n  }\n  .if-mm-format-tag {\n    font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--if-ink-faint);\n    background: var(--if-border-soft);\n    padding: 3px 8px;\n    border-radius: 5px;\n    flex-shrink: 0;\n    transition:\n      background 0.18s var(--if-ease),\n      color 0.18s var(--if-ease);\n  }\n  .if-mm-link.has-tag:hover .if-mm-format-tag {\n    background: var(--if-primary-soft);\n    color: var(--if-primary);\n  }\n\n  \/* Primary column accent (Software) *\/\n  .if-mm-col-primary {\n    position: relative;\n    isolation: isolate;\n  }\n  .if-mm-col-primary::before {\n    content: \"\";\n    position: absolute;\n    inset: -16px -20px -16px -20px;\n    background:\n      radial-gradient(\n        ellipse at top left,\n        rgba(30, 94, 255, 0.1),\n        transparent 65%\n      ),\n      linear-gradient(180deg, rgba(30, 94, 255, 0.05), rgba(30, 94, 255, 0));\n    border-radius: 16px;\n    z-index: -1;\n  }\n  .if-mm-col-primary .if-mm-coltitle {\n    color: var(--if-primary);\n    font-weight: 700;\n  }\n  .if-mm-col-primary .if-mm-coltitle::before {\n    content: \"\";\n    width: 14px;\n    height: 14px;\n    margin-right: 4px;\n    background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='14' height='14' viewBox='0 0 24 24' fill='%231E5EFF'><path d='M12 2l2.4 7.4H22l-6.2 4.5L18.2 22 12 17.4 5.8 22l2.4-8.1L2 9.4h7.6z'\/><\/svg>\");\n    background-size: contain;\n    background-repeat: no-repeat;\n    flex-shrink: 0;\n  }\n  .if-mm-col-primary .if-mm-link {\n    font-weight: 600;\n  }\n\n  \/* Resources layout \u2014 5 equal cols *\/\n  .if-megamenu-inner.layout-resources {\n    grid-template-columns: repeat(5, 1fr);\n    gap: 32px;\n  }\n  .if-megamenu-inner.layout-resources .if-mm-link {\n    font-size: 14px;\n    padding: 7px 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .if-megamenu-inner.layout-resources .if-mm-link:hover {\n    padding-left: 0;\n    transform: translateX(2px);\n    background: none !important;\n  }\n  .if-megamenu-inner.layout-resources .if-mm-link.has-tag {\n    transform: none !important;\n  }\n  .if-megamenu-inner.layout-resources .if-mm-link.has-tag:hover {\n    padding-left: 0;\n    background: none !important;\n  }\n\n  \/* Blanket override: prevent WP\/Elementor theme from injecting hover\/focus backgrounds *\/\n  .if-megamenu a,\n  .if-megamenu a:hover,\n  .if-megamenu a:focus,\n  .if-megamenu a:active,\n  .if-megamenu button,\n  .if-megamenu button:hover,\n  .if-megamenu button:focus,\n  .if-megamenu button:active,\n  .if-header a:not(.if-nav-cta):hover,\n  .if-header a:not(.if-nav-cta):focus,\n  .if-header a:not(.if-nav-cta):active,\n  .if-header button:hover,\n  .if-header button:focus,\n  .if-header button:active,\n  .if-nav-tabs a:hover,\n  .if-nav-tabs a:focus,\n  .if-nav-tabs button:hover,\n  .if-nav-tabs button:focus,\n  .if-nav-tab:hover,\n  .if-nav-tab:focus,\n  .if-nav-tabs .if-nav-tab:hover,\n  .if-nav-tabs .if-nav-tab:focus,\n  .if-header .if-nav-tab:hover,\n  .if-header .if-nav-tab:focus,\n  button.if-nav-tab:hover,\n  button.if-nav-tab:focus,\n  .if-nav-tab.is-open,\n  .if-nav-tabs .if-nav-tab.is-open,\n  .if-header .if-nav-tab.is-open {\n    background: none !important;\n    background-color: transparent !important;\n  }\n\n  \/* CTA button \u2014 high-specificity override to beat blanket rule *\/\n  a.if-nav-cta:hover,\n  .if-header a.if-nav-cta:hover,\n  .if-nav-actions a.if-nav-cta:hover {\n    background: #003399 !important;\n    background-color: #003399 !important;\n    color: white !important;\n  }\n  a.if-nav-cta,\n  .if-header a.if-nav-cta {\n    background: #0044bb !important;\n    background-color: #0044bb !important;\n    color: white !important;\n  }\n\n  \/* Hide TranslatePress native language switcher widgets *\/\n  .trp-floatls,\n  .trp-language-switcher-shortcode,\n  .trp-language-switcher,\n  #trp-floatls,\n  .trp-ls-shortcode-container,\n  .wp-block-translatepress-language-switcher,\n  [class*=\"trp-\"] .trp-floating,\n  .trp-ls-languages-floating {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n    pointer-events: none !important;\n  }\n\n  \/* ===== NAV DARK HERO INTEGRATION ===== *\/\n  .ifig-widget .if-topbar {\n    background: transparent !important;\n  }\n  .ifig-widget .if-header {\n    background: transparent !important;\n    border-bottom: none !important;\n    box-shadow: none !important;\n    position: relative !important;\n  }\n  .ifig-widget .if-nav-tab {\n    color: rgba(255, 255, 255, 0.82) !important;\n  }\n  .ifig-widget .if-nav-tab:hover,\n  .ifig-widget .if-nav-tab.is-open {\n    color: white !important;\n  }\n  .ifig-widget .if-nav-tab svg.chev {\n    color: rgba(255, 255, 255, 0.5) !important;\n  }\n  .ifig-widget .if-login {\n    color: rgba(255, 255, 255, 0.82) !important;\n  }\n  .ifig-widget .if-login:hover {\n    color: white !important;\n  }\n  .ifig-widget .if-burger {\n    color: white !important;\n  }\n  .ifig-widget .if-nav-divider {\n    background: rgba(255, 255, 255, 0.15) !important;\n  }\n  .ifig-widget .if-tool-chip-doc {\n    background: rgba(255, 255, 255, 0.08) !important;\n    border-color: rgba(255, 255, 255, 0.12) !important;\n  }\n  .ifig-widget .if-tool-chip-doc .if-tool-chip-icon {\n    background: rgba(255, 255, 255, 0.12) !important;\n  }\n  .ifig-widget .if-tool-chip-bolt {\n    background: rgba(255, 255, 255, 0.08) !important;\n    border-color: rgba(255, 255, 255, 0.12) !important;\n  }\n  .ifig-widget .if-tool-chip-bolt .if-tool-chip-icon {\n    background: rgba(255, 255, 255, 0.12) !important;\n  }\n  .ifig-widget .if-tool-chip {\n    color: rgba(255, 255, 255, 0.88) !important;\n  }\n  .ifig-widget .if-tool-chip-eyebrow {\n    color: rgba(255, 255, 255, 0.5) !important;\n  }\n  .ifig-widget .if-tool-chip:hover {\n    background: rgba(255, 255, 255, 0.12) !important;\n    border-color: rgba(255, 255, 255, 0.18) !important;\n  }\n\n  \/* ===== HERO WRAP \u2014 shared dark background for nav + hero ===== *\/\n  .ifig-widget .ifig-hero-wrap {\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  .ifig-widget .if-topbar {\n    position: relative;\n    z-index: 2;\n  }\n  .ifig-widget .if-header {\n    position: relative;\n    z-index: 10;\n  }\n  .ifig-widget .if-megamenu {\n    background: white !important;\n    box-shadow: 0 8px 32px -4px rgba(10, 22, 40, 0.18) !important;\n    z-index: 99 !important;\n  }\n<\/style>\n\n<div class=\"ifig-widget\" id=\"ifig-root\">\n  <!-- ==================== HERO ==================== -->\n  <section class=\"hero\">\n    <nav class=\"crumbs\" aria-label=\"Breadcrumb\">\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-generators\/\"\n        >Free Generators<\/a\n      >\n      <span class=\"sep\">\/<\/span>\n      <span class=\"current\">Free Receipt Generator<\/span>\n    <\/nav>\n\n    <h1 class=\"hero-h1\">Free Receipt Generator<\/h1>\n\n    <p class=\"hero-lead\">\n      Create professional payment receipts online in minutes. Use our free\n      receipt maker to customize, download, print, or email receipts for\n      customers, payments, sales, and business transactions.\n    <\/p>\n\n    <div class=\"hero-pay\">\n      <p class=\"hero-pay-label\">Works with payments by<\/p>\n      <div class=\"hero-pay-logos\">\n        <!-- Visa -->\n        <span class=\"hero-pay-logo\">\n          <svg\n            viewBox=\"0 0 70 48\"\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n            role=\"img\"\n            aria-label=\"Visa\"\n          >\n            <rect\n              x=\"0.5\"\n              y=\"0.5\"\n              width=\"69\"\n              height=\"47\"\n              rx=\"5.5\"\n              fill=\"white\"\n              stroke=\"#D9D9D9\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M21.2505 32.5165H17.0099L13.8299 20.3847C13.679 19.8267 13.3585 19.3333 12.8871 19.1008C11.7106 18.5165 10.4142 18.0514 9 17.8169V17.3498H15.8313C16.7742 17.3498 17.4813 18.0514 17.5991 18.8663L19.2491 27.6173L23.4877 17.3498H27.6104L21.2505 32.5165ZM29.9675 32.5165H25.9626L29.2604 17.3498H33.2653L29.9675 32.5165ZM38.4467 21.5514C38.5646 20.7346 39.2717 20.2675 40.0967 20.2675C41.3931 20.1502 42.8052 20.3848 43.9838 20.9671L44.6909 17.7016C43.5123 17.2345 42.216 17 41.0395 17C37.1524 17 34.3239 19.1008 34.3239 22.0165C34.3239 24.2346 36.3274 25.3992 37.7417 26.1008C39.2717 26.8004 39.861 27.2675 39.7431 27.9671C39.7431 29.0165 38.5646 29.4836 37.3881 29.4836C35.9739 29.4836 34.5596 29.1338 33.2653 28.5494L32.5582 31.8169C33.9724 32.3992 35.5025 32.6338 36.9167 32.6338C41.2752 32.749 43.9838 30.6502 43.9838 27.5C43.9838 23.5329 38.4467 23.3004 38.4467 21.5514ZM58 32.5165L54.82 17.3498H51.4044C50.6972 17.3498 49.9901 17.8169 49.7544 18.5165L43.8659 32.5165H47.9887L48.8116 30.3004H53.8772L54.3486 32.5165H58ZM51.9936 21.4342L53.1701 27.1502H49.8723L51.9936 21.4342Z\"\n              fill=\"#172B85\"\n            \/>\n          <\/svg>\n        <\/span>\n        <!-- Mastercard -->\n        <span class=\"hero-pay-logo\">\n          <svg\n            viewBox=\"0 0 58 40\"\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n            role=\"img\"\n            aria-label=\"Mastercard\"\n          >\n            <rect\n              x=\"0.5\"\n              y=\"0.5\"\n              width=\"57\"\n              height=\"39\"\n              rx=\"3.5\"\n              fill=\"white\"\n              stroke=\"#F3F3F3\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M21.2489 30.8906V32.3674V33.8443H20.6016V33.4857C20.3963 33.7517 20.0848 33.9186 19.6614 33.9186C18.8266 33.9186 18.1722 33.27 18.1722 32.3674C18.1722 31.4656 18.8266 30.8163 19.6614 30.8163C20.0848 30.8163 20.3963 30.9832 20.6016 31.2492V30.8906H21.2489ZM19.7419 31.4218C19.1816 31.4218 18.8387 31.8483 18.8387 32.3674C18.8387 32.8866 19.1816 33.3131 19.7419 33.3131C20.2773 33.3131 20.6387 32.905 20.6387 32.3674C20.6387 31.8299 20.2773 31.4218 19.7419 31.4218ZM43.1228 32.3674C43.1228 31.8483 43.4657 31.4218 44.026 31.4218C44.5621 31.4218 44.9228 31.8299 44.9228 32.3674C44.9228 32.905 44.5621 33.3131 44.026 33.3131C43.4657 33.3131 43.1228 32.8866 43.1228 32.3674ZM45.5338 29.7044V32.3674V33.8443H44.8858V33.4857C44.6804 33.7517 44.3689 33.9186 43.9455 33.9186C43.1107 33.9186 42.4563 33.27 42.4563 32.3674C42.4563 31.4656 43.1107 30.8163 43.9455 30.8163C44.3689 30.8163 44.6804 30.9832 44.8858 31.2492V29.7044H45.5338ZM29.2838 31.3914C29.7008 31.3914 29.9688 31.6509 30.0373 32.1079H28.4925C28.5616 31.6814 28.8225 31.3914 29.2838 31.3914ZM27.8138 32.3674C27.8138 31.4465 28.424 30.8163 29.2966 30.8163C30.1307 30.8163 30.7038 31.4465 30.7102 32.3674C30.7102 32.4537 30.7038 32.5344 30.6974 32.6143H28.4868C28.5802 33.1462 28.9601 33.3379 29.3771 33.3379C29.6758 33.3379 29.9938 33.2261 30.2433 33.0288L30.5605 33.5048C30.1991 33.8075 29.7885 33.9186 29.3401 33.9186C28.449 33.9186 27.8138 33.3068 27.8138 32.3674ZM37.1126 32.3674C37.1126 31.8483 37.4555 31.4218 38.0158 31.4218C38.5511 31.4218 38.9126 31.8299 38.9126 32.3674C38.9126 32.905 38.5511 33.3131 38.0158 33.3131C37.4555 33.3131 37.1126 32.8866 37.1126 32.3674ZM39.5228 30.8906V32.3674V33.8443H38.8755V33.4857C38.6695 33.7517 38.3587 33.9186 37.9352 33.9186C37.1004 33.9186 36.446 33.27 36.446 32.3674C36.446 31.4656 37.1004 30.8163 37.9352 30.8163C38.3587 30.8163 38.6695 30.9832 38.8755 31.2492V30.8906H39.5228ZM33.4569 32.3674C33.4569 33.2636 34.0857 33.9186 35.0452 33.9186C35.4936 33.9186 35.7923 33.8196 36.116 33.5663L35.8051 33.0472C35.5621 33.2205 35.3068 33.3131 35.026 33.3131C34.5091 33.3068 34.1292 32.9361 34.1292 32.3674C34.1292 31.7988 34.5091 31.4281 35.026 31.4218C35.3068 31.4218 35.5621 31.5144 35.8051 31.6877L36.116 31.1685C35.7923 30.9153 35.4936 30.8163 35.0452 30.8163C34.0857 30.8163 33.4569 31.4713 33.4569 32.3674ZM41.0177 31.2492C41.1859 30.9896 41.429 30.8163 41.8026 30.8163C41.9337 30.8163 42.1205 30.8411 42.2638 30.8969L42.0642 31.5024C41.9273 31.4465 41.7904 31.4281 41.6593 31.4281C41.2358 31.4281 41.0241 31.6997 41.0241 32.1885V33.8443H40.3761V30.8906H41.0177V31.2492ZM24.4505 31.1254C24.1389 30.9217 23.7098 30.8163 23.2364 30.8163C22.4822 30.8163 21.9967 31.1749 21.9967 31.762C21.9967 32.2437 22.3582 32.5407 23.024 32.6334L23.3298 32.6765C23.6848 32.7261 23.8524 32.8187 23.8524 32.9856C23.8524 33.2141 23.6157 33.3442 23.1737 33.3442C22.7253 33.3442 22.4017 33.2021 22.1835 33.0351L21.8784 33.5352C22.2334 33.7948 22.6818 33.9186 23.1673 33.9186C24.027 33.9186 24.5253 33.5168 24.5253 32.9545C24.5253 32.4353 24.1332 32.1637 23.4852 32.0711L23.1801 32.0272C22.9 31.9904 22.6754 31.9353 22.6754 31.7372C22.6754 31.5208 22.8871 31.3914 23.2421 31.3914C23.6221 31.3914 23.9899 31.5335 24.1703 31.6446L24.4505 31.1254ZM32.0184 31.2492C32.1859 30.9896 32.429 30.8163 32.8025 30.8163C32.9337 30.8163 33.1205 30.8411 33.2637 30.8969L33.0641 31.5024C32.9273 31.4465 32.7904 31.4281 32.6592 31.4281C32.2358 31.4281 32.0241 31.6997 32.0241 32.1885V33.8443H31.3768V30.8906H32.0184V31.2492ZM27.2784 30.8906H26.2198V29.9944H25.5654V30.8906H24.9616V31.4776H25.5654V32.8251C25.5654 33.5105 25.8334 33.9186 26.5991 33.9186C26.8799 33.9186 27.2036 33.8323 27.4089 33.6901L27.2221 33.1398C27.0289 33.2509 26.8172 33.3068 26.649 33.3068C26.3253 33.3068 26.2198 33.1087 26.2198 32.8123V31.4776H27.2784V30.8906ZM17.5997 31.9904V33.8443H16.9453V32.2005C16.9453 31.6997 16.7336 31.4218 16.2916 31.4218C15.8617 31.4218 15.563 31.6941 15.563 32.2069V33.8443H14.9086V32.2005C14.9086 31.6997 14.6912 31.4218 14.2613 31.4218C13.8186 31.4218 13.5321 31.6941 13.5321 32.2069V33.8443H12.8784V30.8906H13.5264V31.2548C13.7695 30.909 14.0803 30.8163 14.3982 30.8163C14.853 30.8163 15.1767 31.0144 15.382 31.3418C15.6564 30.9274 16.0485 30.8099 16.4285 30.8163C17.1513 30.8227 17.5997 31.2923 17.5997 31.9904Z\"\n              fill=\"#231F20\"\n            \/>\n            <path\n              d=\"M34.0465 25.8715H24.2359V8.3783H34.0465V25.8715Z\"\n              fill=\"#FF5F00\"\n            \/>\n            <path\n              d=\"M24.8583 17.1253C24.8583 13.5767 26.5328 10.4157 29.1405 8.37867C27.2336 6.88907 24.8269 5.99998 22.2114 5.99998C16.0194 5.99998 11 10.9809 11 17.1253C11 23.2697 16.0194 28.2506 22.2114 28.2506C24.8269 28.2506 27.2336 27.3615 29.1405 25.8719C26.5328 23.8349 24.8583 20.6739 24.8583 17.1253\"\n              fill=\"#EB001B\"\n            \/>\n            <path\n              d=\"M47.2818 17.1253C47.2818 23.2697 42.2624 28.2506 36.0704 28.2506C33.4548 28.2506 31.0482 27.3615 29.1405 25.8719C31.7489 23.8349 33.4235 20.6739 33.4235 17.1253C33.4235 13.5767 31.7489 10.4157 29.1405 8.37867C31.0482 6.88907 33.4548 5.99998 36.0704 5.99998C42.2624 5.99998 47.2818 10.9809 47.2818 17.1253\"\n              fill=\"#F79E1B\"\n            \/>\n          <\/svg>\n        <\/span>\n        <!-- American Express -->\n        <span class=\"hero-pay-logo\">\n          <svg\n            viewBox=\"0 0 58 40\"\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n            role=\"img\"\n            aria-label=\"American Express\"\n          >\n            <rect\n              x=\"0.5\"\n              y=\"0.5\"\n              width=\"57\"\n              height=\"39\"\n              rx=\"3.5\"\n              fill=\"#006FCF\"\n              stroke=\"#F3F3F3\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M11.8632 28.8937V20.6592H21.1869L22.1872 21.8787L23.2206 20.6592H57.0632V28.3258C57.0632 28.3258 56.1782 28.8855 55.1546 28.8937H36.4152L35.2874 27.5957V28.8937H31.5916V26.6779C31.5916 26.6779 31.0867 26.9872 29.9953 26.9872H28.7373V28.8937H23.1415L22.1426 27.6481L21.1284 28.8937H11.8632ZM1 14.4529L3.09775 9.86914H6.7256L7.9161 12.4368V9.86914H12.4258L13.1346 11.7249L13.8216 9.86914H34.0657V10.8021C34.0657 10.8021 35.1299 9.86914 36.8789 9.86914L43.4474 9.89066L44.6173 12.4247V9.86914H48.3913L49.43 11.3247V9.86914H53.2386V18.1037H49.43L48.4346 16.6434V18.1037H42.8898L42.3321 16.8056H40.8415L40.293 18.1037H36.5327C35.0277 18.1037 34.0657 17.1897 34.0657 17.1897V18.1037H28.3961L27.2708 16.8056V18.1037H6.18816L5.63093 16.8056H4.14505L3.59176 18.1037H1V14.4529ZM1.01082 17.05L3.84023 10.8843H5.98528L8.81199 17.05H6.92932L6.40997 15.8154H3.37498L2.85291 17.05H1.01082ZM5.81217 14.4768L4.88706 12.3192L3.95925 14.4768H5.81217ZM9.00675 17.049V10.8832L11.6245 10.8924L13.147 14.8676L14.6331 10.8832H17.2299V17.049H15.5853V12.5058L13.8419 17.049H12.3996L10.6514 12.5058V17.049H9.00675ZM18.3552 17.049V10.8832H23.7219V12.2624H20.0171V13.3171H23.6353V14.6151H20.0171V15.7104H23.7219V17.049H18.3552ZM24.674 17.05V10.8843H28.3339C29.5465 10.8843 30.6331 11.5871 30.6331 12.8846C30.6331 13.9938 29.717 14.7082 28.8289 14.7784L30.9929 17.05H28.9831L27.0111 14.8596H26.3186V17.05H24.674ZM28.1986 12.2635H26.3186V13.5615H28.223C28.5526 13.5615 28.9776 13.3221 28.9776 12.9125C28.9776 12.5941 28.6496 12.2635 28.1986 12.2635ZM32.9837 17.049H31.3045V10.8832H32.9837V17.049ZM36.9655 17.049H36.603C34.8492 17.049 33.7844 15.754 33.7844 13.9915C33.7844 12.1854 34.8373 10.8832 37.052 10.8832H38.8698V12.3436H36.9856C36.0865 12.3436 35.4507 13.0012 35.4507 14.0067C35.4507 15.2008 36.1777 15.7023 37.2251 15.7023H37.6579L36.9655 17.049ZM37.7147 17.05L40.5441 10.8843H42.6892L45.5159 17.05H43.6332L43.1139 15.8154H40.0789L39.5568 17.05H37.7147ZM42.5161 14.4768L41.591 12.3192L40.6632 14.4768H42.5161ZM45.708 17.049V10.8832H47.7989L50.4687 14.7571V10.8832H52.1134V17.049H50.09L47.3526 13.0737V17.049H45.708ZM12.9885 27.8391V21.6733H18.3552V23.0525H14.6504V24.1072H18.2686V25.4052H14.6504V26.5005H18.3552V27.8391H12.9885ZM39.2853 27.8391V21.6733H44.6519V23.0525H40.9472V24.1072H44.5481V25.4052H40.9472V26.5005H44.6519V27.8391H39.2853ZM18.5635 27.8391L21.1765 24.7942L18.5012 21.6733H20.5733L22.1665 23.6026L23.7651 21.6733H25.756L23.1159 24.7562L25.7338 27.8391H23.6621L22.1151 25.9402L20.6057 27.8391H18.5635ZM25.9291 27.8401V21.6744H29.5619C31.0525 21.6744 31.9234 22.5748 31.9234 23.7482C31.9234 25.1647 30.8131 25.893 29.3482 25.893H27.617V27.8401H25.9291ZM29.4402 23.0687H27.617V24.4885H29.4348C29.9151 24.4885 30.2517 24.1901 30.2517 23.7786C30.2517 23.3406 29.9134 23.0687 29.4402 23.0687ZM32.6375 27.8391V21.6733H36.2973C37.51 21.6733 38.5966 22.3761 38.5966 23.6736C38.5966 24.7828 37.6805 25.4972 36.7923 25.5675L38.9563 27.8391H36.9465L34.9746 25.6486H34.2821V27.8391H32.6375ZM36.1621 23.0525H34.2821V24.3505H36.1864C36.5161 24.3505 36.9411 24.1112 36.9411 23.7015C36.9411 23.3831 36.6131 23.0525 36.1621 23.0525ZM45.4137 27.8391V26.5005H48.7051C49.1921 26.5005 49.403 26.2538 49.403 25.9833C49.403 25.7241 49.1928 25.462 48.7051 25.462H47.2177C45.9249 25.462 45.2048 24.7237 45.2048 23.6153C45.2048 22.6267 45.8642 21.6733 47.7854 21.6733H50.9881L50.2956 23.0606H47.5257C46.9962 23.0606 46.8332 23.321 46.8332 23.5697C46.8332 23.8253 47.0347 24.1072 47.4392 24.1072H48.9972C50.4384 24.1072 51.0638 24.8734 51.0638 25.8768C51.0638 26.9555 50.367 27.8391 48.9188 27.8391H45.4137ZM51.2088 27.8391V26.5005H54.5002C54.9873 26.5005 55.1981 26.2538 55.1981 25.9833C55.1981 25.7241 54.9879 25.462 54.5002 25.462H53.0129C51.72 25.462 51 24.7237 51 23.6153C51 22.6267 51.6594 21.6733 53.5806 21.6733H56.7833L56.0908 23.0606H53.3209C52.7914 23.0606 52.6284 23.321 52.6284 23.5697C52.6284 23.8253 52.8298 24.1072 53.2343 24.1072H54.7924C56.2336 24.1072 56.859 24.8734 56.859 25.8768C56.859 26.9555 56.1621 27.8391 54.7139 27.8391H51.2088Z\"\n              fill=\"white\"\n            \/>\n          <\/svg>\n        <\/span>\n        <!-- PayPal -->\n        <span class=\"hero-pay-logo\">\n          <svg\n            viewBox=\"0 0 58 40\"\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n            role=\"img\"\n            aria-label=\"PayPal\"\n          >\n            <rect\n              x=\"0.5\"\n              y=\"0.5\"\n              width=\"57\"\n              height=\"39\"\n              rx=\"3.5\"\n              fill=\"white\"\n              stroke=\"#F3F3F3\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M26.4388 20.2562L26.6913 18.6477L26.1288 18.6346H23.4429L25.3095 6.76505C25.3153 6.72911 25.3341 6.69575 25.3616 6.67201C25.3892 6.64827 25.4243 6.63525 25.4611 6.63525H29.9901C31.4937 6.63525 32.5313 6.94897 33.073 7.56826C33.327 7.85879 33.4887 8.16246 33.567 8.49653C33.6491 8.84713 33.6505 9.26596 33.5704 9.77689L33.5646 9.81405V10.1415L33.8186 10.2858C34.0324 10.3996 34.2024 10.5298 34.3328 10.6788C34.55 10.9273 34.6905 11.2431 34.7499 11.6173C34.8113 12.0022 34.791 12.4604 34.6905 12.979C34.5746 13.5755 34.3873 14.0951 34.1343 14.5202C33.9016 14.9119 33.6052 15.2369 33.2531 15.4886C32.9171 15.7279 32.5178 15.9095 32.0664 16.0257C31.6288 16.1399 31.1301 16.1975 30.583 16.1975H30.2305C29.9786 16.1975 29.7338 16.2886 29.5416 16.4517C29.3489 16.6183 29.2215 16.8459 29.1824 17.0947L29.1558 17.2396L28.7096 20.0747L28.6894 20.1787C28.684 20.2117 28.6748 20.2281 28.6613 20.2392C28.6493 20.2494 28.632 20.2562 28.615 20.2562H26.4388\"\n              fill=\"#28356A\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M34.0589 9.85181C34.0455 9.93848 34.03 10.027 34.0126 10.1181C33.4154 13.1934 31.372 14.2558 28.7623 14.2558H27.4335C27.1143 14.2558 26.8453 14.4881 26.7957 14.8038L25.9227 20.3573C25.8904 20.5647 26.0497 20.7514 26.2582 20.7514H28.615C28.894 20.7514 29.1311 20.5481 29.1751 20.2721L29.1982 20.1521L29.6419 17.3281L29.6705 17.1732C29.7139 16.8962 29.9515 16.6928 30.2305 16.6928H30.583C32.8663 16.6928 34.6538 15.7632 35.1763 13.0728C35.3944 11.9489 35.2815 11.0105 34.704 10.3505C34.5293 10.1516 34.3125 9.98635 34.0589 9.85181\"\n              fill=\"#298FC2\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M33.4342 9.60206C33.3429 9.57534 33.2488 9.5512 33.1522 9.52936C33.0551 9.50807 32.9557 9.48922 32.8533 9.47267C32.4951 9.41462 32.1025 9.38708 31.682 9.38708H28.1322C28.0447 9.38708 27.9617 9.40689 27.8874 9.44269C27.7236 9.52163 27.602 9.67707 27.5726 9.86736L26.8174 14.6641L26.7957 14.8039C26.8454 14.4882 27.1144 14.2558 27.4335 14.2558H28.7623C31.372 14.2558 33.4154 13.1929 34.0127 10.1181C34.0305 10.0271 34.0455 9.93856 34.0589 9.85189C33.9078 9.77146 33.7442 9.7027 33.568 9.64411C33.5244 9.62959 33.4795 9.61562 33.4342 9.60206\"\n              fill=\"#22284F\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M27.5726 9.86737C27.6021 9.67708 27.7236 9.52165 27.8874 9.44325C27.9622 9.40731 28.0447 9.38751 28.1322 9.38751H31.682C32.1025 9.38751 32.4951 9.41518 32.8534 9.47323C32.9557 9.48964 33.0551 9.50863 33.1522 9.52992C33.2488 9.55162 33.3429 9.5759 33.4342 9.60248C33.4795 9.61605 33.5244 9.63015 33.5684 9.64412C33.7446 9.70272 33.9084 9.77202 34.0595 9.85191C34.2372 8.71545 34.058 7.94168 33.4453 7.241C32.7698 6.46953 31.5507 6.1394 29.9906 6.1394H25.4615C25.1429 6.1394 24.8711 6.37174 24.8218 6.68803L22.9354 18.6796C22.8982 18.9168 23.0807 19.1309 23.3193 19.1309H26.1153L27.5726 9.86737\"\n              fill=\"#28356A\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13.0946 23.5209H9.79248C9.56648 23.5209 9.3743 23.6855 9.339 23.9093L8.00345 32.4009C7.97695 32.5686 8.10638 32.7195 8.27584 32.7195H9.85225C10.0782 32.7195 10.2704 32.555 10.3057 32.3308L10.6659 30.0404C10.7006 29.8162 10.8932 29.6516 11.1188 29.6516H12.1641C14.3393 29.6516 15.5946 28.5959 15.9226 26.5042C16.0703 25.589 15.9288 24.87 15.5014 24.3664C15.0321 23.8134 14.1997 23.5209 13.0946 23.5209ZM13.4755 26.6224C13.2949 27.8106 12.3896 27.8106 11.5143 27.8106H11.0159L11.3655 25.5914C11.3863 25.4573 11.5021 25.3585 11.6374 25.3585H11.8658C12.4621 25.3585 13.0246 25.3585 13.3152 25.6994C13.4886 25.9027 13.5416 26.2049 13.4755 26.6224Z\"\n              fill=\"#28356A\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M23.0496 26.5199H21.4683C21.3336 26.5199 21.2171 26.6187 21.1964 26.7528L21.1264 27.1963L21.0159 27.0356C20.6736 26.5373 19.9101 26.3707 19.1483 26.3707C17.4008 26.3707 15.9084 27.698 15.6177 29.5598C15.4666 30.4885 15.6814 31.3766 16.2068 31.9959C16.6887 32.5653 17.3782 32.8026 18.1985 32.8026C19.6065 32.8026 20.3871 31.8947 20.3871 31.8947L20.3167 32.3354C20.2902 32.5038 20.4196 32.6549 20.5881 32.6549H22.0124C22.2389 32.6549 22.4301 32.4903 22.4659 32.2661L23.3205 26.8385C23.3475 26.6714 23.2185 26.5199 23.0496 26.5199ZM20.8453 29.6064C20.6928 30.5122 19.9759 31.1204 19.0613 31.1204C18.6022 31.1204 18.2353 30.9727 17.9995 30.6929C17.7658 30.415 17.6771 30.0194 17.7513 29.5787C17.8939 28.6805 18.6229 28.0524 19.5235 28.0524C19.9725 28.0524 20.3375 28.2022 20.578 28.4843C20.8188 28.7695 20.9145 29.1676 20.8453 29.6064Z\"\n              fill=\"#28356A\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M31.3495 26.6556H29.7604C29.6088 26.6556 29.4664 26.7312 29.3805 26.8576L27.1888 30.095L26.2598 26.9839C26.2014 26.7892 26.0223 26.6556 25.8195 26.6556H24.2581C24.0682 26.6556 23.9365 26.8416 23.9968 27.0208L25.7471 32.1718L24.1016 34.5014C23.9722 34.6849 24.1025 34.9372 24.3261 34.9372H25.9132C26.0639 34.9372 26.2048 34.8635 26.2903 34.7397L31.5754 27.089C31.702 26.906 31.572 26.6556 31.3495 26.6556\"\n              fill=\"#28356A\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M36.6469 23.5209H33.3444C33.1189 23.5209 32.9267 23.6855 32.8914 23.9093L31.5559 32.4009C31.5294 32.5686 31.6588 32.7195 31.8273 32.7195H33.5221C33.6794 32.7195 33.8141 32.6044 33.8387 32.4475L34.2178 30.0404C34.2525 29.8162 34.4453 29.6516 34.6707 29.6516H35.7156C37.8912 29.6516 39.1461 28.5959 39.4745 26.5042C39.6227 25.589 39.4803 24.87 39.0529 24.3664C38.584 23.8134 37.7521 23.5209 36.6469 23.5209ZM37.0279 26.6224C36.8478 27.8106 35.9424 27.8106 35.0666 27.8106H34.5689L34.9189 25.5914C34.9396 25.4573 35.0545 25.3585 35.1902 25.3585H35.4186C36.0144 25.3585 36.5774 25.3585 36.868 25.6994C37.0414 25.9027 37.094 26.2049 37.0279 26.6224Z\"\n              fill=\"#298FC2\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M46.5999 26.5199H45.0195C44.8839 26.5199 44.7685 26.6187 44.7482 26.7528L44.6782 27.1963L44.5671 27.0356C44.2248 26.5373 43.4619 26.3707 42.6999 26.3707C40.9526 26.3707 39.4607 27.698 39.1701 29.5598C39.0194 30.4885 39.2332 31.3766 39.7585 31.9959C40.2415 32.5653 40.9299 32.8026 41.7503 32.8026C43.1582 32.8026 43.9389 31.8947 43.9389 31.8947L43.8685 32.3354C43.842 32.5038 43.9713 32.6549 44.1408 32.6549H45.5647C45.7902 32.6549 45.9823 32.4903 46.0176 32.2661L46.8727 26.8385C46.8988 26.6714 46.7693 26.5199 46.5999 26.5199ZM44.3958 29.6064C44.2442 30.5122 43.5262 31.1204 42.6116 31.1204C42.1534 31.1204 41.7856 30.9727 41.5498 30.6929C41.3163 30.415 41.2283 30.0194 41.3016 29.5787C41.4451 28.6805 42.1732 28.0524 43.0738 28.0524C43.5228 28.0524 43.8878 28.2022 44.1283 28.4843C44.3701 28.7695 44.4657 29.1676 44.3958 29.6064Z\"\n              fill=\"#298FC2\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M48.3324 23.7543L46.9771 32.4013C46.9506 32.569 47.0799 32.7199 47.2484 32.7199H48.611C48.8375 32.7199 49.0296 32.5554 49.0643 32.3312L50.4008 23.84C50.4275 23.6724 50.298 23.5209 50.1295 23.5209H48.6038C48.4691 23.5213 48.3532 23.6202 48.3324 23.7543\"\n              fill=\"#298FC2\"\n            \/>\n          <\/svg>\n        <\/span>\n        <!-- Google Pay -->\n        <span class=\"hero-pay-logo\">\n          <svg\n            viewBox=\"0 0 58 40\"\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n            role=\"img\"\n            aria-label=\"Google Pay\"\n          >\n            <rect\n              x=\"0.5\"\n              y=\"0.5\"\n              width=\"57\"\n              height=\"39\"\n              rx=\"3.5\"\n              fill=\"white\"\n              stroke=\"#F3F3F3\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M27.9174 24.1182V19.6071V19.6062H30.3578C31.3639 19.6068 32.2095 19.2907 32.8945 18.6578C33.5868 18.0571 33.9738 17.1935 33.9541 16.2934C33.9678 15.3982 33.5815 14.541 32.8945 13.9422C32.2155 13.3059 31.3023 12.9587 30.3578 12.9778H26.4404V24.1182H27.9174ZM27.9174 18.2382V14.3494V14.3485H30.3945C30.9466 14.3334 31.4788 14.5487 31.856 14.9396C32.2355 15.2971 32.4496 15.7881 32.4496 16.3009C32.4496 16.8137 32.2355 17.3048 31.856 17.6622C31.4741 18.0449 30.9436 18.254 30.3945 18.2382H27.9174Z\"\n              fill=\"#5F6368\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M39.9431 17.0951C39.3113 16.5297 38.4496 16.2471 37.3578 16.2471C35.9554 16.2471 34.8963 16.7448 34.1807 17.7404L35.4817 18.5342C35.9624 17.8598 36.6153 17.5226 37.4404 17.5226C37.9664 17.5167 38.4755 17.703 38.8661 18.0444C39.2555 18.3564 39.4795 18.8215 39.4762 19.3111V19.6382C38.9086 19.3271 38.1863 19.1715 37.3092 19.1715C36.2817 19.1727 35.4603 19.4062 34.845 19.872C34.2297 20.3377 33.922 20.965 33.922 21.7537C33.9086 22.4719 34.2302 23.1577 34.7973 23.6204C35.3807 24.1182 36.1058 24.3671 36.9725 24.3671C37.9878 24.3671 38.8012 23.9315 39.4129 23.0604H39.4771V24.1182H40.8899V19.4204C40.8905 18.4355 40.5749 17.6604 39.9431 17.0951ZM35.9367 22.7182C35.6273 22.5021 35.4448 22.1544 35.4468 21.7848C35.4468 21.3697 35.6477 21.024 36.0523 20.7395C36.4529 20.4592 36.9532 20.3191 37.5532 20.3191C38.3771 20.3191 39.0193 20.4968 39.4798 20.8524C39.4798 21.4533 39.2352 21.9768 38.7459 22.4231C38.3052 22.8501 37.7077 23.0905 37.0844 23.0915C36.6689 23.099 36.2634 22.9672 35.9367 22.7182Z\"\n              fill=\"#5F6368\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M49 16.496L44.0679 27.4782H42.5431L44.3734 23.6355L41.1303 16.496H42.7358L45.0798 21.9715H45.1119L47.3917 16.496H49Z\"\n              fill=\"#5F6368\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M21.9486 18.6347C21.9492 18.1986 21.9111 17.7632 21.8349 17.3334H15.6055V19.7983H19.1734C19.0259 20.5938 18.5493 21.2964 17.8541 21.7432V23.3432H19.9835C21.2303 22.2294 21.9486 20.5823 21.9486 18.6347Z\"\n              fill=\"#4285F4\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M15.6055 24.8889C17.3881 24.8889 18.889 24.3217 19.9835 23.344L17.8541 21.744C17.2615 22.1333 16.4982 22.3555 15.6055 22.3555C13.8826 22.3555 12.4202 21.2302 11.8973 19.7137H9.70367V21.3626C10.8249 23.5244 13.1085 24.8887 15.6055 24.8889Z\"\n              fill=\"#34A853\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M11.8973 19.7138C11.6208 18.9192 11.6208 18.0586 11.8973 17.264V15.6151H9.70367C8.76585 17.4232 8.76585 19.5546 9.70367 21.3627L11.8973 19.7138Z\"\n              fill=\"#FBBC04\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M15.6055 14.6223C16.5475 14.6073 17.4577 14.9522 18.1395 15.5823V15.5823L20.0248 13.7556C18.8293 12.6677 17.2455 12.0704 15.6055 12.0889C13.1085 12.089 10.8249 13.4534 9.70367 15.6151L11.8973 17.264C12.4202 15.7476 13.8826 14.6223 15.6055 14.6223Z\"\n              fill=\"#EA4335\"\n            \/>\n          <\/svg>\n        <\/span>\n        <!-- Apple Pay -->\n        <span class=\"hero-pay-logo\">\n          <svg\n            viewBox=\"0 0 58 40\"\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n            role=\"img\"\n            aria-label=\"Apple Pay\"\n          >\n            <rect\n              x=\"0.5\"\n              y=\"0.5\"\n              width=\"57\"\n              height=\"39\"\n              rx=\"3.5\"\n              fill=\"white\"\n              stroke=\"#F3F3F3\"\n            \/>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M17.5771 14.9265C17.1553 15.4313 16.4803 15.8294 15.8053 15.7725C15.7209 15.09 16.0513 14.3649 16.4381 13.9171C16.8599 13.3981 17.5982 13.0284 18.1959 13C18.2662 13.7109 17.992 14.4076 17.5771 14.9265ZM18.1888 15.9076C17.5942 15.873 17.0516 16.0884 16.6133 16.2624C16.3313 16.3744 16.0924 16.4692 15.9107 16.4692C15.7068 16.4692 15.4581 16.3693 15.1789 16.2571C14.813 16.1102 14.3947 15.9422 13.956 15.9502C12.9506 15.9645 12.0154 16.5403 11.5021 17.4573C10.4474 19.2915 11.2279 22.0071 12.2474 23.5C12.7467 24.2393 13.3443 25.0498 14.1318 25.0213C14.4783 25.0081 14.7275 24.9012 14.9854 24.7905C15.2823 24.6631 15.5908 24.5308 16.0724 24.5308C16.5374 24.5308 16.8324 24.6597 17.1155 24.7834C17.3847 24.9011 17.6433 25.014 18.0271 25.0071C18.8428 24.9929 19.356 24.2678 19.8553 23.5284C20.394 22.7349 20.6307 21.9605 20.6667 21.843L20.6709 21.8294C20.67 21.8285 20.6634 21.8254 20.6516 21.82C20.4715 21.7366 19.095 21.0995 19.0818 19.391C19.0686 17.957 20.1736 17.2304 20.3476 17.116C20.3582 17.109 20.3653 17.1043 20.3685 17.1019C19.6654 16.0498 18.5685 15.936 18.1888 15.9076ZM23.8349 24.9289V13.846H27.9482C30.0717 13.846 31.5553 15.3246 31.5553 17.4858C31.5553 19.6469 30.0435 21.1398 27.892 21.1398H25.5365V24.9289H23.8349ZM25.5365 15.2962H27.4982C28.9748 15.2962 29.8185 16.0924 29.8185 17.4929C29.8185 18.8934 28.9748 19.6967 27.4912 19.6967H25.5365V15.2962ZM37.1732 23.5995C36.7232 24.4668 35.7318 25.0142 34.6631 25.0142C33.081 25.0142 31.9771 24.0616 31.9771 22.6256C31.9771 21.2038 33.0459 20.3863 35.0217 20.2654L37.1451 20.1374V19.5261C37.1451 18.6232 36.5615 18.1327 35.5209 18.1327C34.6631 18.1327 34.0373 18.5806 33.9107 19.263H32.3779C32.4271 17.827 33.7631 16.782 35.5701 16.782C37.5177 16.782 38.7834 17.8128 38.7834 19.4123V24.9289H37.2084V23.5995H37.1732ZM35.1201 23.6991C34.2131 23.6991 33.6365 23.2583 33.6365 22.5829C33.6365 21.8863 34.192 21.481 35.2537 21.4171L37.1451 21.2962V21.9218C37.1451 22.9597 36.2732 23.6991 35.1201 23.6991ZM44.0076 25.3626C43.3256 27.3033 42.5451 27.9431 40.8857 27.9431C40.7592 27.9431 40.3373 27.9289 40.2388 27.9005V26.5711C40.3443 26.5853 40.6045 26.5995 40.7381 26.5995C41.4904 26.5995 41.9123 26.2796 42.1724 25.4479L42.3271 24.9573L39.4443 16.8886H41.2232L43.2271 23.436H43.2623L45.2662 16.8886H46.9959L44.0076 25.3626Z\"\n              fill=\"#000000\"\n            \/>\n          <\/svg>\n        <\/span>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== RECEIPT TOOL ==================== -->\n  <div class=\"tool-wrap\" id=\"receipt-generator\">\n    <div class=\"tool-inner\"><script type=\"application\/json\" id=\"wib-config-data\">{\"fields\":{\"logo\":true,\"cover_image\":true,\"bill_to\":true,\"bill_from\":true,\"invoice_num\":true,\"due_date\":true,\"currency\":true,\"tax\":true,\"notes\":true},\"defaults\":{\"company_name\":\"\",\"company_addr\":\"\",\"logo_url\":\"\",\"currency\":\"USD\",\"tax_rate\":0,\"notes\":\"Thank you for your business!\",\"invoice_prefix\":\"INV-\"},\"colorPalette\":[\"#0044BB\",\"#E5334B\",\"#7c3aed\",\"#059669\",\"#d97706\",\"#0891b2\",\"#111827\"],\"pluginUrl\":\"https:\\\/\\\/invoicefly.com\\\/wp-content\\\/plugins\\\/wp-invoice-builder\\\/\"}<\/script><div id=\"wib-app\" class=\"wib-app\">\n\n    <!-- \u2500\u2500 Sidebar \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\u2500\u2500\u2500\u2500\u2500 -->\n    <aside class=\"wib-sidebar\">\n    <div class=\"wib-sidebar-sticky\">\n        <h2 class=\"wib-sidebar-title\">Templates<\/h2>\n\n        <!-- Template selector -->\n        <div class=\"wib-sidebar-section\">\n            <div class=\"wib-tpl-selector\">\n                                    <label class=\"wib-tpl-sel-card wib-tpl-sel-card--active\">\n                        <input type=\"radio\" name=\"wib-template\" value=\"default\"\n                             checked='checked'>\n                        <span class=\"wib-tpl-sel-preview wib-tpl-sel-preview--default\" aria-hidden=\"true\">\n                            <span class=\"wib-tpl-sel-bar wib-tpl-sel-bar--header\"><\/span>\n                            <span class=\"wib-tpl-sel-bar\"><\/span>\n                            <span class=\"wib-tpl-sel-bar wib-tpl-sel-bar--short\"><\/span>\n                            <span class=\"wib-tpl-sel-bar\"><\/span>\n                            <span class=\"wib-tpl-sel-bar wib-tpl-sel-bar--short\"><\/span>\n                        <\/span>\n                        <span class=\"wib-tpl-sel-name\">Classic<\/span>\n                    <\/label>\n                                    <label class=\"wib-tpl-sel-card\">\n                        <input type=\"radio\" name=\"wib-template\" value=\"minimal\"\n                            >\n                        <span class=\"wib-tpl-sel-preview wib-tpl-sel-preview--minimal\" aria-hidden=\"true\">\n                            <span class=\"wib-tpl-sel-bar wib-tpl-sel-bar--header\"><\/span>\n                            <span class=\"wib-tpl-sel-bar\"><\/span>\n                            <span class=\"wib-tpl-sel-bar wib-tpl-sel-bar--short\"><\/span>\n                            <span class=\"wib-tpl-sel-bar\"><\/span>\n                            <span class=\"wib-tpl-sel-bar wib-tpl-sel-bar--short\"><\/span>\n                        <\/span>\n                        <span class=\"wib-tpl-sel-name\">Minimal<\/span>\n                    <\/label>\n                                    <label class=\"wib-tpl-sel-card\">\n                        <input type=\"radio\" name=\"wib-template\" value=\"modern\"\n                            >\n                        <span class=\"wib-tpl-sel-preview wib-tpl-sel-preview--modern\" aria-hidden=\"true\">\n                            <span class=\"wib-tpl-sel-bar wib-tpl-sel-bar--header\"><\/span>\n                            <span class=\"wib-tpl-sel-bar\"><\/span>\n                            <span class=\"wib-tpl-sel-bar wib-tpl-sel-bar--short\"><\/span>\n                            <span class=\"wib-tpl-sel-bar\"><\/span>\n                            <span class=\"wib-tpl-sel-bar wib-tpl-sel-bar--short\"><\/span>\n                        <\/span>\n                        <span class=\"wib-tpl-sel-name\">Modern<\/span>\n                    <\/label>\n                            <\/div>\n        <\/div>\n\n        <!-- Logo upload -->\n        <div class=\"wib-sidebar-section\" data-wib-field=\"logo\">\n            <h3 class=\"wib-sidebar-section-title\">Your logo<\/h3>\n            <div class=\"wib-logo-area\">\n\n                <!-- Estado vac\u00edo -->\n                <div id=\"wib-logo-empty\">\n                    <div class=\"wib-logo-box\" id=\"wib-logo-box\">\n                        <span class=\"wib-logo-box-icon\">\n                            <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/>\n                                <polyline points=\"21 15 16 10 5 21\"\/>\n                            <\/svg>\n                        <\/span>\n                    <\/div>\n                    <button type=\"button\" class=\"wib-sidebar-upload-btn\" id=\"wib-logo-upload-btn\">\n                        &#8593; Upload                    <\/button>\n                <\/div>\n\n                <!-- Estado con logo (oculto hasta que se sube uno) -->\n                <div id=\"wib-logo-preview\" style=\"display:none\">\n                    <img decoding=\"async\" id=\"wib-sidebar-logo\" class=\"wib-logo-preview-img\" src=\"\" alt=\"Logo\">\n                    <div class=\"wib-logo-preview-actions\">\n                        <button type=\"button\" id=\"wib-logo-delete-btn\" class=\"wib-logo-action-btn wib-logo-delete-btn\">\n                            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <polyline points=\"3 6 5 6 21 6\"\/><path d=\"M19 6l-1 14H6L5 6\"\/><path d=\"M10 11v6M14 11v6\"\/><path d=\"M9 6V4h6v2\"\/>\n                            <\/svg>\n                            Delete                        <\/button>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n            <input type=\"file\" id=\"wib-logo-file\" accept=\"image\/*\" style=\"display:none\">\n        <\/div>\n\n        <!-- Cover image -->\n        <div class=\"wib-sidebar-section\" data-wib-field=\"cover_image\">\n            <h3 class=\"wib-sidebar-section-title\">Cover Image<\/h3>\n\n            <!-- Estado vac\u00edo -->\n            <div id=\"wib-cover-empty\">\n                <div class=\"wib-cover-drop-box\" id=\"wib-cover-box\">\n                    <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/>\n                        <polyline points=\"21 15 16 10 5 21\"\/>\n                    <\/svg>\n                <\/div>\n                <button type=\"button\" class=\"wib-sidebar-upload-btn\" id=\"wib-cover-upload-btn\">\n                    &#8593; Upload                <\/button>\n            <\/div>\n\n            <!-- Estado con imagen custom (oculto hasta subir) -->\n            <div id=\"wib-cover-preview\" style=\"display:none\">\n                <img decoding=\"async\" id=\"wib-cover-preview-img\" class=\"wib-cover-preview-img\" src=\"\" alt=\"Cover\">\n                <div class=\"wib-logo-preview-actions\">\n                    <button type=\"button\" id=\"wib-cover-delete-btn\" class=\"wib-logo-action-btn wib-logo-delete-btn\">\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <polyline points=\"3 6 5 6 21 6\"\/><path d=\"M19 6l-1 14H6L5 6\"\/><path d=\"M10 11v6M14 11v6\"\/><path d=\"M9 6V4h6v2\"\/>\n                        <\/svg>\n                        Delete                    <\/button>\n                <\/div>\n            <\/div>\n\n            <input type=\"file\" id=\"wib-cover-file\" accept=\"image\/*\" style=\"display:none\">\n            <div class=\"wib-cover-grid\" id=\"wib-cover-grid\">\n                <!-- \"No Image\" siempre disponible -->\n                <div class=\"wib-cover-option wib-cover-option--none wib-cover-option--active\"\n                    data-cover=\"\" data-cover-key=\"none\" role=\"button\" tabindex=\"0\">\n                    <span class=\"wib-cover-none-label\">\n                        No Image                    <\/span>\n                <\/div>\n                                    <div class=\"wib-cover-option\"\n                        data-cover=\"linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f5576c 100%)\"\n                        data-cover-key=\"grad1\"\n                        style=\"background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f5576c 100%);\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                                    <div class=\"wib-cover-option\"\n                        data-cover=\"linear-gradient(135deg,#f093fb 0%,#f5576c 100%)\"\n                        data-cover-key=\"grad2\"\n                        style=\"background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                                    <div class=\"wib-cover-option\"\n                        data-cover=\"linear-gradient(135deg,#2d2d2d 0%,#4a4a4a 100%)\"\n                        data-cover-key=\"grad3\"\n                        style=\"background:linear-gradient(135deg,#2d2d2d 0%,#4a4a4a 100%);\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                                    <div class=\"wib-cover-option\"\n                        data-cover=\"linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)\"\n                        data-cover-key=\"grad4\"\n                        style=\"background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                                    <div class=\"wib-cover-option\"\n                        data-cover=\"linear-gradient(135deg,#1a1a2e 0%,#0f3460 100%)\"\n                        data-cover-key=\"grad5\"\n                        style=\"background:linear-gradient(135deg,#1a1a2e 0%,#0f3460 100%);\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                                    <div class=\"wib-cover-option\"\n                        data-cover=\"linear-gradient(135deg,#11998e 0%,#38ef7d 100%)\"\n                        data-cover-key=\"grad6\"\n                        style=\"background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                                                    <div class=\"wib-cover-option wib-cover-option--admin-img\"\n                        data-cover=\"url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Background-invoice-4.jpg) center\/cover no-repeat\"\n                        data-cover-key=\"admin-img\"\n                        style=\"background:url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/Background-invoice-4.jpg) center\/cover no-repeat;\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                                    <div class=\"wib-cover-option wib-cover-option--admin-img\"\n                        data-cover=\"url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-2.webp) center\/cover no-repeat\"\n                        data-cover-key=\"admin-img\"\n                        style=\"background:url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-2.webp) center\/cover no-repeat;\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                                    <div class=\"wib-cover-option wib-cover-option--admin-img\"\n                        data-cover=\"url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-3.webp) center\/cover no-repeat\"\n                        data-cover-key=\"admin-img\"\n                        style=\"background:url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-3.webp) center\/cover no-repeat;\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                                    <div class=\"wib-cover-option wib-cover-option--admin-img\"\n                        data-cover=\"url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-4.webp) center\/cover no-repeat\"\n                        data-cover-key=\"admin-img\"\n                        style=\"background:url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-4.webp) center\/cover no-repeat;\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                                    <div class=\"wib-cover-option wib-cover-option--admin-img\"\n                        data-cover=\"url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-5.webp) center\/cover no-repeat\"\n                        data-cover-key=\"admin-img\"\n                        style=\"background:url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-5.webp) center\/cover no-repeat;\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                                    <div class=\"wib-cover-option wib-cover-option--admin-img\"\n                        data-cover=\"url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-6.webp) center\/cover no-repeat\"\n                        data-cover-key=\"admin-img\"\n                        style=\"background:url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-6.webp) center\/cover no-repeat;\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                                    <div class=\"wib-cover-option wib-cover-option--admin-img\"\n                        data-cover=\"url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-7.webp) center\/cover no-repeat\"\n                        data-cover-key=\"admin-img\"\n                        style=\"background:url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-7.webp) center\/cover no-repeat;\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                                    <div class=\"wib-cover-option wib-cover-option--admin-img\"\n                        data-cover=\"url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-1.webp) center\/cover no-repeat\"\n                        data-cover-key=\"admin-img\"\n                        style=\"background:url(https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/background-template-invoice-1.webp) center\/cover no-repeat;\"\n                        role=\"button\" tabindex=\"0\">\n                    <\/div>\n                            <\/div>\n        <\/div>\n\n        <!-- Template Color -->\n        <div class=\"wib-sidebar-section\">\n            <h3 class=\"wib-sidebar-section-title\">Template Color<\/h3>\n            <div class=\"wib-accent-swatches\">\n                                    <div class=\"wib-accent-swatch wib-accent-swatch--active\"\n                        data-color=\"#0044BB\"\n                        style=\"background:#0044BB;\">\n                    <\/div>\n                                    <div class=\"wib-accent-swatch\"\n                        data-color=\"#E5334B\"\n                        style=\"background:#E5334B;\">\n                    <\/div>\n                                    <div class=\"wib-accent-swatch\"\n                        data-color=\"#7c3aed\"\n                        style=\"background:#7c3aed;\">\n                    <\/div>\n                                    <div class=\"wib-accent-swatch\"\n                        data-color=\"#059669\"\n                        style=\"background:#059669;\">\n                    <\/div>\n                                    <div class=\"wib-accent-swatch\"\n                        data-color=\"#d97706\"\n                        style=\"background:#d97706;\">\n                    <\/div>\n                                    <div class=\"wib-accent-swatch\"\n                        data-color=\"#0891b2\"\n                        style=\"background:#0891b2;\">\n                    <\/div>\n                                    <div class=\"wib-accent-swatch\"\n                        data-color=\"#111827\"\n                        style=\"background:#111827;\">\n                    <\/div>\n                                <label class=\"wib-accent-swatch wib-accent-swatch--picker\" title=\"Custom color\">\n                    <input type=\"color\" id=\"wib-accent-picker\" value=\"#0044BB\">\n                <\/label>\n            <\/div>\n        <\/div>\n\n    <\/div><!-- \/.wib-sidebar-sticky -->\n    <\/aside><!-- \/.wib-sidebar -->\n\n    <!-- \u2500\u2500 Editor panel \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    <main class=\"wib-editor-panel\">\n\n        <div class=\"wib-editor-header\">\n            <h2 class=\"wib-editor-title\" data-wib-type-tpl=\"%s details\">Invoice details<\/h2>\n            <div class=\"wib-gear-wrap\">\n                <button type=\"button\" class=\"wib-gear-btn\" id=\"wib-gear-btn\" aria-label=\"Add PO \/ VAT number\">\n                    <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n                    <span class=\"wib-gear-btn-label\">Add PO \/ VAT number<\/span>\n                <\/button>\n                <div class=\"wib-gear-drop\" id=\"wib-gear-drop\">\n                    <div class=\"wib-gear-drop-row\" id=\"wib-gear-add-po\">\n                        <span class=\"wib-gear-drop-label\">Add a PO number<\/span>\n                        <span class=\"wib-gear-drop-badge\">#<\/span>\n                    <\/div>\n                    <div class=\"wib-gear-drop-row\" id=\"wib-gear-add-vat\">\n                        <span class=\"wib-gear-drop-label\">Add a VAT number<\/span>\n                        <span class=\"wib-gear-drop-badge\">#<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Top row: currency | type | due date | invoice number -->\n        <div class=\"wib-top-row\">\n            <!-- Custom currency picker (rendered by wib-generator.js) -->\n            <div class=\"wib-currency-picker\" id=\"wib-currency-picker\" data-wib-field=\"currency\">\n                <button type=\"button\" class=\"wib-currency-trigger\" id=\"wib-currency-trigger\"\n                        aria-haspopup=\"listbox\" aria-expanded=\"false\">\n                    <span class=\"wib-currency-flag\" id=\"wib-currency-flag-display\"><\/span>\n                    <span class=\"wib-currency-name\" id=\"wib-currency-name-display\">USD<\/span>\n                    <svg class=\"wib-currency-chevron\" width=\"11\" height=\"6\" viewBox=\"0 0 11 6\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M1 1l4.5 4L10 1\" stroke=\"#bbb\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                <\/button>\n                <div class=\"wib-currency-dropdown\" id=\"wib-currency-dropdown\" role=\"listbox\" hidden>\n                    <div class=\"wib-currency-search-wrap\">\n                        <svg class=\"wib-currency-search-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\n                        <\/svg>\n                        <input type=\"text\" class=\"wib-currency-search\" id=\"wib-currency-search\"\n                               placeholder=\"Search currency\u2026\"\n                               autocomplete=\"off\" spellcheck=\"false\">\n                    <\/div>\n                    <ul class=\"wib-currency-list\" id=\"wib-currency-list\" role=\"listbox\"><\/ul>\n                <\/div>\n            <\/div>\n            <input type=\"hidden\" id=\"wib-ed-currency\" data-wib-field=\"currency\">\n\n            <select id=\"wib-ed-invoice-type\" class=\"wib-top-select\">\n                                    <option value=\"Invoice\">\n                        Invoice                    <\/option>\n                                    <option value=\"Receipt\">\n                        Receipt                    <\/option>\n                                    <option value=\"Quote\">\n                        Quote                    <\/option>\n                                    <option value=\"Bill\">\n                        Bill                    <\/option>\n                            <\/select>\n\n            <div class=\"wib-due-date-wrap\" data-wib-field=\"due_date\">\n                <span class=\"wib-due-date-label\">Due on<\/span>\n                <input type=\"date\" id=\"wib-ed-due-date\" class=\"wib-due-date-input\">\n            <\/div>\n\n            <input type=\"text\" id=\"wib-ed-invoice-num\" class=\"wib-invoice-num-input\"\n                placeholder=\"Invoice Number\" data-wib-type-ph=\"%s Number\" data-wib-field=\"invoice_num\">\n        <\/div>\n\n        <!-- PO \/ VAT row (hidden until enabled from gear menu) -->\n        <div class=\"wib-ponvat-row\" id=\"wib-ponvat-row\" style=\"display:none\">\n            <div class=\"wib-ponvat-field\" id=\"wib-po-field\" style=\"display:none\">\n                <input type=\"text\" id=\"wib-ed-po\" class=\"wib-ponvat-input\" placeholder=\"PO #\">\n                <button type=\"button\" class=\"wib-ponvat-delete\" id=\"wib-po-delete\" aria-label=\"Remove PO number\">\n                    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"\/><path d=\"M19 6l-1 14H6L5 6\"\/><path d=\"M10 11v6M14 11v6\"\/><path d=\"M9 6V4h6v2\"\/><\/svg>\n                <\/button>\n            <\/div>\n            <div class=\"wib-ponvat-field\" id=\"wib-vat-field\" style=\"display:none\">\n                <input type=\"text\" id=\"wib-ed-vat\" class=\"wib-ponvat-input\" placeholder=\"VAT #\">\n                <button type=\"button\" class=\"wib-ponvat-delete\" id=\"wib-vat-delete\" aria-label=\"Remove VAT number\">\n                    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"\/><path d=\"M19 6l-1 14H6L5 6\"\/><path d=\"M10 11v6M14 11v6\"\/><path d=\"M9 6V4h6v2\"\/><\/svg>\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Bill To \/ From side by side -->\n        <div class=\"wib-parties-row\">\n            <textarea id=\"wib-ed-bill-to\" class=\"wib-party-textarea\" rows=\"3\"\n                placeholder=\"Bill to: Enter name and address\"\n                data-wib-field=\"bill_to\"><\/textarea>\n            <textarea id=\"wib-ed-bill-from\" class=\"wib-party-textarea\" rows=\"3\"\n                placeholder=\"From: Enter your name and address\"\n                data-wib-field=\"bill_from\"><\/textarea>\n        <\/div>\n\n        <!-- Line items -->\n        <div class=\"wib-items-section\">\n            <h3 class=\"wib-items-section-title\">Line Items<\/h3>\n            <table class=\"wib-items-table\">\n                <thead>\n                    <tr>\n                        <th class=\"wib-items-th\">Items<\/th>\n                        <th class=\"wib-items-th wib-items-th--qty\">QTY<\/th>\n                        <th class=\"wib-items-th wib-items-th--rate\">Rate<\/th>\n                        <th class=\"wib-items-th wib-items-th--action\"><\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody id=\"wib-items-body\">\n                    <!-- JS renders rows -->\n                <\/tbody>\n            <\/table>\n            <button type=\"button\" id=\"wib-btn-add-item\" class=\"wib-btn-add-item\">\n                + Add Item            <\/button>\n        <\/div>\n\n        <!-- Payment methods -->\n        <div class=\"wib-section-block\">\n            <div class=\"wib-section-block-header\">\n                <h3 class=\"wib-section-block-title\" data-wib-type-tpl=\"%s payment methods\">Invoice payment methods<\/h3>\n                <div class=\"wib-options-wrap\">\n                    <button type=\"button\" class=\"wib-options-btn\" id=\"wib-options-btn\" aria-label=\"Add a Discount\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><line x1=\"19\" y1=\"5\" x2=\"5\" y2=\"19\"\/><circle cx=\"6.5\" cy=\"6.5\" r=\"2.5\"\/><circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\"\/><\/svg>\n                        Add a Discount                    <\/button>\n                <\/div>\n            <\/div>\n            <div class=\"wib-payment-grid\">\n                                    <label class=\"wib-payment-card\" data-pm=\"cash_app\">\n                        <input type=\"checkbox\" class=\"wib-payment-check\"\n                            name=\"wib-pm[]\" value=\"Cash App\">\n                        <span class=\"wib-payment-info\">\n                            <span class=\"wib-payment-name\">Cash App<\/span>\n                            <span class=\"wib-payment-status\" style=\"display:none\"><\/span>\n                                                    <\/span>\n                    <\/label>\n                                    <label class=\"wib-payment-card\" data-pm=\"venmo\">\n                        <input type=\"checkbox\" class=\"wib-payment-check\"\n                            name=\"wib-pm[]\" value=\"Venmo\">\n                        <span class=\"wib-payment-info\">\n                            <span class=\"wib-payment-name\">Venmo<\/span>\n                            <span class=\"wib-payment-status\" style=\"display:none\"><\/span>\n                                                    <\/span>\n                    <\/label>\n                                    <label class=\"wib-payment-card\" data-pm=\"paypal\">\n                        <input type=\"checkbox\" class=\"wib-payment-check\"\n                            name=\"wib-pm[]\" value=\"PayPal\">\n                        <span class=\"wib-payment-info\">\n                            <span class=\"wib-payment-name\">PayPal<\/span>\n                            <span class=\"wib-payment-status\" style=\"display:none\"><\/span>\n                                                    <\/span>\n                    <\/label>\n                                    <label class=\"wib-payment-card\" data-pm=\"zelle\">\n                        <input type=\"checkbox\" class=\"wib-payment-check\"\n                            name=\"wib-pm[]\" value=\"Zelle\">\n                        <span class=\"wib-payment-info\">\n                            <span class=\"wib-payment-name\">Zelle<\/span>\n                            <span class=\"wib-payment-status\" style=\"display:none\"><\/span>\n                                                    <\/span>\n                    <\/label>\n                                    <label class=\"wib-payment-card\" data-pm=\"wire_transfer\">\n                        <input type=\"checkbox\" class=\"wib-payment-check\"\n                            name=\"wib-pm[]\" value=\"Wire Transfer\">\n                        <span class=\"wib-payment-info\">\n                            <span class=\"wib-payment-name\">Wire Transfer<\/span>\n                            <span class=\"wib-payment-status\" style=\"display:none\"><\/span>\n                                                    <\/span>\n                    <\/label>\n                                    <label class=\"wib-payment-card\" data-pm=\"bank_transfer\">\n                        <input type=\"checkbox\" class=\"wib-payment-check\"\n                            name=\"wib-pm[]\" value=\"Bank Transfer\">\n                        <span class=\"wib-payment-info\">\n                            <span class=\"wib-payment-name\">Bank Transfer<\/span>\n                            <span class=\"wib-payment-status\" style=\"display:none\"><\/span>\n                                                    <\/span>\n                    <\/label>\n                                    <label class=\"wib-payment-card\" data-pm=\"ach\">\n                        <input type=\"checkbox\" class=\"wib-payment-check\"\n                            name=\"wib-pm[]\" value=\"ACH\">\n                        <span class=\"wib-payment-info\">\n                            <span class=\"wib-payment-name\">ACH<\/span>\n                            <span class=\"wib-payment-status\" style=\"display:none\"><\/span>\n                                                    <\/span>\n                    <\/label>\n                                    <label class=\"wib-payment-card\" data-pm=\"check\">\n                        <input type=\"checkbox\" class=\"wib-payment-check\"\n                            name=\"wib-pm[]\" value=\"Check\">\n                        <span class=\"wib-payment-info\">\n                            <span class=\"wib-payment-name\">Check<\/span>\n                            <span class=\"wib-payment-status\" style=\"display:none\"><\/span>\n                                                    <\/span>\n                    <\/label>\n                            <\/div>\n        <\/div>\n\n        <!-- Discount (hidden until enabled via Options) -->\n        <div class=\"wib-discount-section\" id=\"wib-discount-section\" style=\"display:none\">\n            <div class=\"wib-section-block-header\">\n                <h3 class=\"wib-section-block-title\">Discount<\/h3>\n            <\/div>\n            <div class=\"wib-discount-body\">\n                <div class=\"wib-discount-type-row\">\n                    <label class=\"wib-discount-radio-label\">\n                        <input type=\"radio\" name=\"wib-discount-type\" value=\"fixed\" id=\"wib-disc-fixed\">\n                        <span>Fixed ($)<\/span>\n                    <\/label>\n                    <label class=\"wib-discount-radio-label\">\n                        <input type=\"radio\" name=\"wib-discount-type\" value=\"percent\" id=\"wib-disc-percent\" checked>\n                        <span>Percent (%)<\/span>\n                    <\/label>\n                <\/div>\n                <div class=\"wib-discount-input-wrap\">\n                    <div class=\"wib-discount-input-group\">\n                        <input type=\"number\" id=\"wib-discount-value\" class=\"wib-discount-input\" min=\"0\" step=\"any\" placeholder=\"0\">\n                        <span class=\"wib-discount-suffix\" id=\"wib-discount-suffix\">%<\/span>\n                    <\/div>\n                    <button type=\"button\" class=\"wib-discount-delete-btn\" id=\"wib-discount-delete\" aria-label=\"Remove discount\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"\/><path d=\"M19 6l-1 14H6L5 6\"\/><path d=\"M10 11v6M14 11v6\"\/><path d=\"M9 6V4h6v2\"\/><\/svg>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Notes + Bank Account Details (two columns) -->\n        <div class=\"wib-notes-row\">\n            <div class=\"wib-section-block\" data-wib-field=\"notes\">\n                <h3 class=\"wib-section-block-title\">Notes and instructions<\/h3>\n                <span class=\"wib-section-label-right\">*Optional<\/span>\n                <textarea id=\"wib-ed-notes\" class=\"wib-notes-textarea\" rows=\"4\"\n                    placeholder=\"Thank you for your business!\"><\/textarea>\n            <\/div>\n            <div class=\"wib-section-block\">\n                <h3 class=\"wib-section-block-title\">Bank Account details<\/h3>\n                <span class=\"wib-section-label-right\">*Optional<\/span>\n                <textarea id=\"wib-ed-bank-details\" class=\"wib-notes-textarea\" rows=\"4\"\n                    placeholder=\"Enter your bank account details...\"><\/textarea>\n            <\/div>\n        <\/div>\n\n        <!-- Action buttons row -->\n        <div class=\"wib-action-btns\">\n            <!-- Preview (mobile only) -->\n            <button type=\"button\" id=\"wib-btn-preview-mobile\" class=\"wib-btn-preview-mobile\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/>\n                    <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n                <\/svg>\n                Preview            <\/button>\n            <!-- Download -->\n            <button type=\"button\" id=\"wib-btn-download\" class=\"wib-btn-download\">\n                Download PDF            <\/button>\n        <\/div>\n\n    <\/main><!-- \/.wib-editor-panel -->\n\n    <!-- \u2500\u2500 Preview panel \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    <aside class=\"wib-preview-panel\" id=\"wib-preview-panel\">\n        <!-- Close bar (mobile modal only) -->\n        <div class=\"wib-preview-modal-bar\">\n            <span class=\"wib-preview-modal-bar-title\">Preview<\/span>\n            <button type=\"button\" id=\"wib-preview-modal-close\" class=\"wib-preview-modal-close\" aria-label=\"Close preview\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/>\n                <\/svg>\n            <\/button>\n        <\/div>\n        <div class=\"wib-preview-panel-sticky\">\n        <div class=\"wib-preview-head\">\n            <h3 class=\"wib-preview-title\">PDF preview<\/h3>\n            <button type=\"button\" id=\"wib-btn-zoom\" class=\"wib-btn-zoom\" aria-pressed=\"false\"\n                title=\"Open a large preview of the invoice\">\n                <svg class=\"wib-btn-zoom-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <circle cx=\"11\" cy=\"11\" r=\"7\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\n                    <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/>\n                <\/svg>\n                <span class=\"wib-btn-zoom-label\">Zoom<\/span>\n            <\/button>\n        <\/div>\n        <div class=\"wib-preview-container\" id=\"wib-preview-container\">\n            <div id=\"wib-preview-scaler\">\n                <div id=\"wib-preview\">\n                    <style>\n\/* \u2500\u2500 WIB Classic template \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.wib-tpl-classic *{box-sizing:border-box;margin:0;padding:0;}\n.wib-tpl-classic{\n    --wib-accent:#0044BB;\n    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;\n    font-size:14px;color:#1a1a1a;line-height:1.5;background:#fff;\n}\n\n\/* Cover *\/\n.wib-tpl-classic .wib-tpl-cover{width:100%;height:150px;background-size:cover;background-position:center;display:none;}\n\n\/* Header *\/\n.wib-tpl-classic .wib-tpl-inner{padding:36px 40px;}\n.wib-tpl-classic .wib-tpl-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;}\n.wib-tpl-classic .wib-tpl-logo-wrap{max-width:200px;text-align:right;}\n.wib-tpl-classic #wib-tpl-logo{max-width:180px;max-height:70px;object-fit:contain;display:inline-block;}\n.wib-tpl-classic .wib-tpl-meta-block{text-align:left;}\n.wib-tpl-classic .wib-tpl-title{font-size:30px;font-weight:700;letter-spacing:3px;color:var(--wib-accent);margin-bottom:12px;}\n.wib-tpl-classic .wib-tpl-meta-row{display:flex;justify-content:flex-start;gap:10px;margin-bottom:4px;font-size:15px;}\n.wib-tpl-classic .wib-tpl-meta-key{color:#888;min-width:68px;}\n.wib-tpl-classic .wib-tpl-meta-val{font-weight:600;text-align:left;color:#1a1a1a;}\n\n\/* Divider *\/\n.wib-tpl-classic .wib-tpl-divider{border:none;border-top:1px solid #e8e8e8;margin:0 0 24px;}\n\n\/* Parties *\/\n.wib-tpl-classic .wib-tpl-parties{display:flex;gap:32px;margin-bottom:28px;}\n.wib-tpl-classic .wib-tpl-party{flex:1;}\n.wib-tpl-classic .wib-tpl-party-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#aaa;margin-bottom:7px;}\n.wib-tpl-classic .wib-tpl-party-text{color:#333;white-space:pre-wrap;line-height:1.5;font-size:15px;}\n\n\/* Items table *\/\n.wib-tpl-classic .wib-tpl-items-table{width:100%;border-collapse:collapse;margin-bottom:20px;}\n.wib-tpl-classic .wib-tpl-thead-row th{\n    background:var(--wib-accent);color:#fff;font-size:11.5px;font-weight:700;\n    letter-spacing:0.8px;text-transform:uppercase;padding:10px 12px;text-align:left;\n}\n.wib-tpl-classic .wib-tpl-th--qty{text-align:center !important;}\n.wib-tpl-classic .wib-tpl-th--amount{text-align:right !important;}\n.wib-tpl-classic .wib-tpl-item-row{break-inside:avoid;page-break-inside:avoid;}\n.wib-tpl-classic .wib-tpl-item-row:nth-child(even){background:#fafafa;}\n.wib-tpl-classic .wib-tpl-td{padding:10px 12px;border-bottom:1px solid #f0f0f0;font-size:14.5px;vertical-align:top;}\n.wib-tpl-classic .wib-tpl-td--qty{text-align:center !important;white-space:nowrap;}\n.wib-tpl-classic .wib-tpl-td--amount{text-align:right !important;white-space:nowrap;}\n.wib-tpl-classic .wib-tpl-td--desc{word-break:break-word;}\n\n\/* Totals *\/\n.wib-tpl-classic .wib-tpl-totals{display:flex;justify-content:flex-end;margin-bottom:28px;}\n.wib-tpl-classic .wib-tpl-totals-table{width:260px;border-collapse:collapse;break-inside:avoid;page-break-inside:avoid;}\n.wib-tpl-classic .wib-tpl-total-row td{padding:6px 8px;font-size:15px;}\n.wib-tpl-classic .wib-tpl-total-key{color:#666;}\n.wib-tpl-classic .wib-tpl-total-val{text-align:right;font-weight:500;min-width:90px;}\n.wib-tpl-classic .wib-tpl-total-row--grand td{\n    font-weight:700;font-size:18px;color:var(--wib-accent);\n    border-top:2px solid var(--wib-accent);padding-top:11px;\n}\n\n\/* Payment methods *\/\n.wib-tpl-classic .wib-tpl-payment{margin-bottom:20px;display:none;}\n.wib-tpl-classic .wib-tpl-payment-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#aaa;margin-bottom:6px;}\n.wib-tpl-classic .wib-tpl-payment-list{display:flex;flex-direction:column;gap:5px;}\n.wib-tpl-classic .wib-tpl-pm-item{display:flex;align-items:center;gap:8px;}\n.wib-tpl-classic .wib-tpl-pm-item--bank{flex-direction:column;align-items:flex-start;gap:3px;}\n.wib-tpl-classic .wib-tpl-pm-name{font-size:14.5px;font-weight:600;color:#333;}\n.wib-tpl-classic .wib-tpl-pm-detail{font-size:13.5px;color:#888;}\n.wib-tpl-classic .wib-tpl-pm-bank{display:flex;flex-direction:column;gap:2px;padding-left:1px;}\n.wib-tpl-classic .wib-tpl-pm-bank-row{display:flex;gap:8px;align-items:baseline;}\n.wib-tpl-classic .wib-tpl-pm-bank-key{font-size:11px;color:#aaa;min-width:95px;flex-shrink:0;}\n.wib-tpl-classic .wib-tpl-pm-bank-val{font-size:13.5px;color:#444;font-weight:500;}\n\n\/* Notes *\/\n.wib-tpl-classic .wib-tpl-footer{border-top:1px solid #e8e8e8;padding-top:18px;}\n.wib-tpl-classic .wib-tpl-notes-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#aaa;margin-bottom:6px;}\n.wib-tpl-classic .wib-tpl-notes-text{color:#555;white-space:pre-wrap;font-size:14.5px;line-height:1.5;}\n\n\/* Bank details *\/\n.wib-tpl-classic .wib-tpl-bank-details{border-top:1px solid #e8e8e8;padding-top:18px;margin-top:16px;}\n.wib-tpl-classic .wib-tpl-bank-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#aaa;margin-bottom:6px;}\n.wib-tpl-classic .wib-tpl-bank-text{color:#555;white-space:pre-wrap;font-size:14.5px;line-height:1.5;}\n<\/style>\n\n<div class=\"wib-tpl wib-tpl-classic\">\n\n    <!-- Cover image (hidden unless selected) -->\n    <div class=\"wib-tpl-cover\" id=\"wib-tpl-cover\"><\/div>\n\n    <div class=\"wib-tpl-inner\">\n\n        <!-- Header -->\n        <div class=\"wib-tpl-header\">\n            <div class=\"wib-tpl-meta-block\">\n                <div class=\"wib-tpl-title\" data-wib=\"invoice-type\">INVOICE<\/div>\n                <div class=\"wib-tpl-meta-row\" data-wib-field=\"invoice_num\">\n                    <span class=\"wib-tpl-meta-key\" data-wib=\"invoice-num-label\">Invoice&nbsp;#<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"invoice-num\"><\/span>\n                <\/div>\n                <div class=\"wib-tpl-meta-row\">\n                    <span class=\"wib-tpl-meta-key\">Date<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"invoice-date\"><\/span>\n                <\/div>\n                <div class=\"wib-tpl-meta-row\" data-wib-field=\"due_date\">\n                    <span class=\"wib-tpl-meta-key\">Due&nbsp;Date<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"due-date\"><\/span>\n                <\/div>\n                <div class=\"wib-tpl-meta-row wib-tpl-po-row\" style=\"display:none\">\n                    <span class=\"wib-tpl-meta-key\">PO&nbsp;#<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"po-num\"><\/span>\n                <\/div>\n                <div class=\"wib-tpl-meta-row wib-tpl-vat-row\" style=\"display:none\">\n                    <span class=\"wib-tpl-meta-key\">VAT&nbsp;#<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"vat-num\"><\/span>\n                <\/div>\n            <\/div>\n            <div class=\"wib-tpl-logo-wrap\" data-wib-field=\"logo\">\n                <img decoding=\"async\" id=\"wib-tpl-logo\" src=\"\" alt=\"Logo\" style=\"display:none;\">\n            <\/div>\n        <\/div>\n\n        <hr class=\"wib-tpl-divider\">\n\n        <!-- Bill From \/ Bill To -->\n        <div class=\"wib-tpl-parties\">\n            <div class=\"wib-tpl-party\" data-wib-field=\"bill_from\">\n                <div class=\"wib-tpl-party-label\">From<\/div>\n                <div class=\"wib-tpl-party-text\" data-wib=\"bill-from\"><\/div>\n            <\/div>\n            <div class=\"wib-tpl-party\" data-wib-field=\"bill_to\">\n                <div class=\"wib-tpl-party-label\">Bill To<\/div>\n                <div class=\"wib-tpl-party-text\" data-wib=\"bill-to\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Items -->\n        <table class=\"wib-tpl-items-table\">\n            <thead>\n                <tr class=\"wib-tpl-thead-row\">\n                    <th class=\"wib-tpl-th wib-tpl-th--desc\">Description<\/th>\n                    <th class=\"wib-tpl-th wib-tpl-th--qty\">Qty<\/th>\n                    <th class=\"wib-tpl-th wib-tpl-th--amount\">Amount<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody id=\"wib-tpl-items\">\n                <!-- JS renders rows -->\n            <\/tbody>\n        <\/table>\n\n        <!-- Totals -->\n        <div class=\"wib-tpl-totals\">\n            <table class=\"wib-tpl-totals-table\">\n                <tr class=\"wib-tpl-total-row\">\n                    <td class=\"wib-tpl-total-key\">Subtotal<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"subtotal\"><\/td>\n                <\/tr>\n                <tr class=\"wib-tpl-total-row\" id=\"wib-tpl-discount-row\" style=\"display:none\">\n                    <td class=\"wib-tpl-total-key\" data-wib=\"discount-label\">Discount<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"discount-amount\" style=\"color:#e53e3e;\"><\/td>\n                <\/tr>\n                <tr class=\"wib-tpl-total-row\" data-wib-field=\"tax\" id=\"wib-tpl-tax-row\">\n                    <td class=\"wib-tpl-total-key\" data-wib=\"tax-label\">Tax (0%)<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"tax-amount\"><\/td>\n                <\/tr>\n                <tr class=\"wib-tpl-total-row wib-tpl-total-row--grand\">\n                    <td class=\"wib-tpl-total-key\">Balance Due<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"total\"><\/td>\n                <\/tr>\n            <\/table>\n        <\/div>\n\n        <!-- Payment methods -->\n        <div class=\"wib-tpl-payment\" id=\"wib-tpl-payment\">\n            <div class=\"wib-tpl-payment-label\">Accepted Payment Methods<\/div>\n            <div class=\"wib-tpl-payment-list\" data-wib=\"payment-methods\"><\/div>\n        <\/div>\n\n        <!-- Notes -->\n        <div class=\"wib-tpl-footer\" data-wib-field=\"notes\">\n            <div class=\"wib-tpl-notes-label\">Notes<\/div>\n            <div class=\"wib-tpl-notes-text\" data-wib=\"notes\"><\/div>\n        <\/div>\n\n        <!-- Bank Account Details -->\n        <div class=\"wib-tpl-bank-details\" id=\"wib-tpl-bank-details\" style=\"display:none\">\n            <div class=\"wib-tpl-bank-label\">Bank Account Details<\/div>\n            <div class=\"wib-tpl-bank-text\" data-wib=\"bank-details\"><\/div>\n        <\/div>\n\n    <\/div><!-- \/.wib-tpl-inner -->\n<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <\/div>\n    <\/aside><!-- \/.wib-preview-panel -->\n\n<\/div><!-- \/#wib-app -->\n\n<template id=\"wib-tpl-store-default\"><style>\n\/* \u2500\u2500 WIB Classic template \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.wib-tpl-classic *{box-sizing:border-box;margin:0;padding:0;}\n.wib-tpl-classic{\n    --wib-accent:#0044BB;\n    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;\n    font-size:14px;color:#1a1a1a;line-height:1.5;background:#fff;\n}\n\n\/* Cover *\/\n.wib-tpl-classic .wib-tpl-cover{width:100%;height:150px;background-size:cover;background-position:center;display:none;}\n\n\/* Header *\/\n.wib-tpl-classic .wib-tpl-inner{padding:36px 40px;}\n.wib-tpl-classic .wib-tpl-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;}\n.wib-tpl-classic .wib-tpl-logo-wrap{max-width:200px;text-align:right;}\n.wib-tpl-classic #wib-tpl-logo{max-width:180px;max-height:70px;object-fit:contain;display:inline-block;}\n.wib-tpl-classic .wib-tpl-meta-block{text-align:left;}\n.wib-tpl-classic .wib-tpl-title{font-size:30px;font-weight:700;letter-spacing:3px;color:var(--wib-accent);margin-bottom:12px;}\n.wib-tpl-classic .wib-tpl-meta-row{display:flex;justify-content:flex-start;gap:10px;margin-bottom:4px;font-size:15px;}\n.wib-tpl-classic .wib-tpl-meta-key{color:#888;min-width:68px;}\n.wib-tpl-classic .wib-tpl-meta-val{font-weight:600;text-align:left;color:#1a1a1a;}\n\n\/* Divider *\/\n.wib-tpl-classic .wib-tpl-divider{border:none;border-top:1px solid #e8e8e8;margin:0 0 24px;}\n\n\/* Parties *\/\n.wib-tpl-classic .wib-tpl-parties{display:flex;gap:32px;margin-bottom:28px;}\n.wib-tpl-classic .wib-tpl-party{flex:1;}\n.wib-tpl-classic .wib-tpl-party-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#aaa;margin-bottom:7px;}\n.wib-tpl-classic .wib-tpl-party-text{color:#333;white-space:pre-wrap;line-height:1.5;font-size:15px;}\n\n\/* Items table *\/\n.wib-tpl-classic .wib-tpl-items-table{width:100%;border-collapse:collapse;margin-bottom:20px;}\n.wib-tpl-classic .wib-tpl-thead-row th{\n    background:var(--wib-accent);color:#fff;font-size:11.5px;font-weight:700;\n    letter-spacing:0.8px;text-transform:uppercase;padding:10px 12px;text-align:left;\n}\n.wib-tpl-classic .wib-tpl-th--qty{text-align:center !important;}\n.wib-tpl-classic .wib-tpl-th--amount{text-align:right !important;}\n.wib-tpl-classic .wib-tpl-item-row{break-inside:avoid;page-break-inside:avoid;}\n.wib-tpl-classic .wib-tpl-item-row:nth-child(even){background:#fafafa;}\n.wib-tpl-classic .wib-tpl-td{padding:10px 12px;border-bottom:1px solid #f0f0f0;font-size:14.5px;vertical-align:top;}\n.wib-tpl-classic .wib-tpl-td--qty{text-align:center !important;white-space:nowrap;}\n.wib-tpl-classic .wib-tpl-td--amount{text-align:right !important;white-space:nowrap;}\n.wib-tpl-classic .wib-tpl-td--desc{word-break:break-word;}\n\n\/* Totals *\/\n.wib-tpl-classic .wib-tpl-totals{display:flex;justify-content:flex-end;margin-bottom:28px;}\n.wib-tpl-classic .wib-tpl-totals-table{width:260px;border-collapse:collapse;break-inside:avoid;page-break-inside:avoid;}\n.wib-tpl-classic .wib-tpl-total-row td{padding:6px 8px;font-size:15px;}\n.wib-tpl-classic .wib-tpl-total-key{color:#666;}\n.wib-tpl-classic .wib-tpl-total-val{text-align:right;font-weight:500;min-width:90px;}\n.wib-tpl-classic .wib-tpl-total-row--grand td{\n    font-weight:700;font-size:18px;color:var(--wib-accent);\n    border-top:2px solid var(--wib-accent);padding-top:11px;\n}\n\n\/* Payment methods *\/\n.wib-tpl-classic .wib-tpl-payment{margin-bottom:20px;display:none;}\n.wib-tpl-classic .wib-tpl-payment-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#aaa;margin-bottom:6px;}\n.wib-tpl-classic .wib-tpl-payment-list{display:flex;flex-direction:column;gap:5px;}\n.wib-tpl-classic .wib-tpl-pm-item{display:flex;align-items:center;gap:8px;}\n.wib-tpl-classic .wib-tpl-pm-item--bank{flex-direction:column;align-items:flex-start;gap:3px;}\n.wib-tpl-classic .wib-tpl-pm-name{font-size:14.5px;font-weight:600;color:#333;}\n.wib-tpl-classic .wib-tpl-pm-detail{font-size:13.5px;color:#888;}\n.wib-tpl-classic .wib-tpl-pm-bank{display:flex;flex-direction:column;gap:2px;padding-left:1px;}\n.wib-tpl-classic .wib-tpl-pm-bank-row{display:flex;gap:8px;align-items:baseline;}\n.wib-tpl-classic .wib-tpl-pm-bank-key{font-size:11px;color:#aaa;min-width:95px;flex-shrink:0;}\n.wib-tpl-classic .wib-tpl-pm-bank-val{font-size:13.5px;color:#444;font-weight:500;}\n\n\/* Notes *\/\n.wib-tpl-classic .wib-tpl-footer{border-top:1px solid #e8e8e8;padding-top:18px;}\n.wib-tpl-classic .wib-tpl-notes-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#aaa;margin-bottom:6px;}\n.wib-tpl-classic .wib-tpl-notes-text{color:#555;white-space:pre-wrap;font-size:14.5px;line-height:1.5;}\n\n\/* Bank details *\/\n.wib-tpl-classic .wib-tpl-bank-details{border-top:1px solid #e8e8e8;padding-top:18px;margin-top:16px;}\n.wib-tpl-classic .wib-tpl-bank-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#aaa;margin-bottom:6px;}\n.wib-tpl-classic .wib-tpl-bank-text{color:#555;white-space:pre-wrap;font-size:14.5px;line-height:1.5;}\n<\/style>\n\n<div class=\"wib-tpl wib-tpl-classic\">\n\n    <!-- Cover image (hidden unless selected) -->\n    <div class=\"wib-tpl-cover\" id=\"wib-tpl-cover\"><\/div>\n\n    <div class=\"wib-tpl-inner\">\n\n        <!-- Header -->\n        <div class=\"wib-tpl-header\">\n            <div class=\"wib-tpl-meta-block\">\n                <div class=\"wib-tpl-title\" data-wib=\"invoice-type\">INVOICE<\/div>\n                <div class=\"wib-tpl-meta-row\" data-wib-field=\"invoice_num\">\n                    <span class=\"wib-tpl-meta-key\" data-wib=\"invoice-num-label\">Invoice&nbsp;#<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"invoice-num\"><\/span>\n                <\/div>\n                <div class=\"wib-tpl-meta-row\">\n                    <span class=\"wib-tpl-meta-key\">Date<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"invoice-date\"><\/span>\n                <\/div>\n                <div class=\"wib-tpl-meta-row\" data-wib-field=\"due_date\">\n                    <span class=\"wib-tpl-meta-key\">Due&nbsp;Date<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"due-date\"><\/span>\n                <\/div>\n                <div class=\"wib-tpl-meta-row wib-tpl-po-row\" style=\"display:none\">\n                    <span class=\"wib-tpl-meta-key\">PO&nbsp;#<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"po-num\"><\/span>\n                <\/div>\n                <div class=\"wib-tpl-meta-row wib-tpl-vat-row\" style=\"display:none\">\n                    <span class=\"wib-tpl-meta-key\">VAT&nbsp;#<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"vat-num\"><\/span>\n                <\/div>\n            <\/div>\n            <div class=\"wib-tpl-logo-wrap\" data-wib-field=\"logo\">\n                <img decoding=\"async\" id=\"wib-tpl-logo\" src=\"\" alt=\"Logo\" style=\"display:none;\">\n            <\/div>\n        <\/div>\n\n        <hr class=\"wib-tpl-divider\">\n\n        <!-- Bill From \/ Bill To -->\n        <div class=\"wib-tpl-parties\">\n            <div class=\"wib-tpl-party\" data-wib-field=\"bill_from\">\n                <div class=\"wib-tpl-party-label\">From<\/div>\n                <div class=\"wib-tpl-party-text\" data-wib=\"bill-from\"><\/div>\n            <\/div>\n            <div class=\"wib-tpl-party\" data-wib-field=\"bill_to\">\n                <div class=\"wib-tpl-party-label\">Bill To<\/div>\n                <div class=\"wib-tpl-party-text\" data-wib=\"bill-to\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Items -->\n        <table class=\"wib-tpl-items-table\">\n            <thead>\n                <tr class=\"wib-tpl-thead-row\">\n                    <th class=\"wib-tpl-th wib-tpl-th--desc\">Description<\/th>\n                    <th class=\"wib-tpl-th wib-tpl-th--qty\">Qty<\/th>\n                    <th class=\"wib-tpl-th wib-tpl-th--amount\">Amount<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody id=\"wib-tpl-items\">\n                <!-- JS renders rows -->\n            <\/tbody>\n        <\/table>\n\n        <!-- Totals -->\n        <div class=\"wib-tpl-totals\">\n            <table class=\"wib-tpl-totals-table\">\n                <tr class=\"wib-tpl-total-row\">\n                    <td class=\"wib-tpl-total-key\">Subtotal<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"subtotal\"><\/td>\n                <\/tr>\n                <tr class=\"wib-tpl-total-row\" id=\"wib-tpl-discount-row\" style=\"display:none\">\n                    <td class=\"wib-tpl-total-key\" data-wib=\"discount-label\">Discount<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"discount-amount\" style=\"color:#e53e3e;\"><\/td>\n                <\/tr>\n                <tr class=\"wib-tpl-total-row\" data-wib-field=\"tax\" id=\"wib-tpl-tax-row\">\n                    <td class=\"wib-tpl-total-key\" data-wib=\"tax-label\">Tax (0%)<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"tax-amount\"><\/td>\n                <\/tr>\n                <tr class=\"wib-tpl-total-row wib-tpl-total-row--grand\">\n                    <td class=\"wib-tpl-total-key\">Balance Due<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"total\"><\/td>\n                <\/tr>\n            <\/table>\n        <\/div>\n\n        <!-- Payment methods -->\n        <div class=\"wib-tpl-payment\" id=\"wib-tpl-payment\">\n            <div class=\"wib-tpl-payment-label\">Accepted Payment Methods<\/div>\n            <div class=\"wib-tpl-payment-list\" data-wib=\"payment-methods\"><\/div>\n        <\/div>\n\n        <!-- Notes -->\n        <div class=\"wib-tpl-footer\" data-wib-field=\"notes\">\n            <div class=\"wib-tpl-notes-label\">Notes<\/div>\n            <div class=\"wib-tpl-notes-text\" data-wib=\"notes\"><\/div>\n        <\/div>\n\n        <!-- Bank Account Details -->\n        <div class=\"wib-tpl-bank-details\" id=\"wib-tpl-bank-details\" style=\"display:none\">\n            <div class=\"wib-tpl-bank-label\">Bank Account Details<\/div>\n            <div class=\"wib-tpl-bank-text\" data-wib=\"bank-details\"><\/div>\n        <\/div>\n\n    <\/div><!-- \/.wib-tpl-inner -->\n<\/div>\n<\/template>\n<template id=\"wib-tpl-store-minimal\"><style>\n\/* \u2500\u2500 WIB Minimal template \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.wib-tpl-minimal *{box-sizing:border-box;margin:0;padding:0;}\n.wib-tpl-minimal{\n    font-family:Georgia,'Times New Roman',serif;\n    font-size:14px;color:#111;line-height:1.65;background:#fff;\n}\n\n\/* Cover *\/\n.wib-tpl-minimal .wib-tpl-cover{width:100%;height:150px;background-size:cover;background-position:center;display:none;}\n\n\/* Header *\/\n.wib-tpl-minimal .wib-tpl-inner{padding:48px 52px;}\n.wib-tpl-minimal .wib-tpl-header{\n    display:flex;justify-content:space-between;align-items:flex-start;\n    margin-bottom:32px;padding-bottom:20px;border-bottom:2px solid #111;\n}\n.wib-tpl-minimal .wib-tpl-logo-wrap{max-width:180px;}\n.wib-tpl-minimal #wib-tpl-logo{max-width:160px;max-height:60px;object-fit:contain;display:block;}\n.wib-tpl-minimal .wib-tpl-meta-block{text-align:right;}\n.wib-tpl-minimal .wib-tpl-title{\n    font-size:22px;font-weight:400;letter-spacing:5px;\n    text-transform:uppercase;color:#111;margin-bottom:14px;\n}\n.wib-tpl-minimal .wib-tpl-meta-row{display:flex;justify-content:flex-end;gap:12px;font-size:14px;margin-bottom:4px;}\n.wib-tpl-minimal .wib-tpl-meta-key{color:#777;}\n.wib-tpl-minimal .wib-tpl-meta-val{font-weight:700;min-width:110px;text-align:right;color:#111;}\n\n\/* Parties *\/\n.wib-tpl-minimal .wib-tpl-parties{display:flex;gap:36px;margin-bottom:36px;}\n.wib-tpl-minimal .wib-tpl-party{flex:1;}\n.wib-tpl-minimal .wib-tpl-party-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#999;margin-bottom:8px;}\n.wib-tpl-minimal .wib-tpl-party-text{color:#333;white-space:pre-wrap;font-size:15px;line-height:1.5;}\n\n\/* Items table *\/\n.wib-tpl-minimal .wib-tpl-items-table{width:100%;border-collapse:collapse;margin-bottom:24px;}\n.wib-tpl-minimal .wib-tpl-thead-row th{\n    font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#555;\n    padding:9px 0;text-align:left;border-bottom:1px solid #111;font-weight:400;\n    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;\n}\n.wib-tpl-minimal .wib-tpl-th--qty{text-align:center !important;}\n.wib-tpl-minimal .wib-tpl-th--amount{text-align:right !important;}\n.wib-tpl-minimal .wib-tpl-item-row{break-inside:avoid;page-break-inside:avoid;}\n.wib-tpl-minimal .wib-tpl-td{padding:11px 0;border-bottom:1px solid #e4e4e4;font-size:14.5px;vertical-align:top;}\n.wib-tpl-minimal .wib-tpl-td--qty{text-align:center !important;white-space:nowrap;}\n.wib-tpl-minimal .wib-tpl-td--amount{text-align:right !important;white-space:nowrap;}\n.wib-tpl-minimal .wib-tpl-td--desc{word-break:break-word;}\n\n\/* Totals *\/\n.wib-tpl-minimal .wib-tpl-totals{display:flex;justify-content:flex-end;margin-bottom:36px;}\n.wib-tpl-minimal .wib-tpl-totals-table{width:230px;border-collapse:collapse;break-inside:avoid;page-break-inside:avoid;}\n.wib-tpl-minimal .wib-tpl-total-row td{padding:6px 0;font-size:15px;}\n.wib-tpl-minimal .wib-tpl-total-key{color:#666;}\n.wib-tpl-minimal .wib-tpl-total-val{text-align:right;}\n.wib-tpl-minimal .wib-tpl-total-row--grand td{\n    font-weight:700;font-size:18px;\n    border-top:2px solid #111;padding-top:10px;\n}\n\n\/* Payment methods *\/\n.wib-tpl-minimal .wib-tpl-payment{margin-bottom:24px;display:none;}\n.wib-tpl-minimal .wib-tpl-payment-label{\n    font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#999;margin-bottom:6px;\n    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;\n}\n.wib-tpl-minimal .wib-tpl-payment-list{display:flex;flex-direction:column;gap:5px;}\n.wib-tpl-minimal .wib-tpl-pm-item{display:flex;align-items:center;gap:8px;}\n.wib-tpl-minimal .wib-tpl-pm-item--bank{flex-direction:column;align-items:flex-start;gap:3px;}\n.wib-tpl-minimal .wib-tpl-pm-name{font-size:14.5px;font-weight:600;color:#333;}\n.wib-tpl-minimal .wib-tpl-pm-detail{font-size:13.5px;color:#888;}\n.wib-tpl-minimal .wib-tpl-pm-bank{display:flex;flex-direction:column;gap:2px;padding-left:1px;}\n.wib-tpl-minimal .wib-tpl-pm-bank-row{display:flex;gap:8px;align-items:baseline;}\n.wib-tpl-minimal .wib-tpl-pm-bank-key{font-size:11px;color:#999;min-width:95px;flex-shrink:0;}\n.wib-tpl-minimal .wib-tpl-pm-bank-val{font-size:13.5px;color:#444;font-weight:500;}\n\n\/* Notes *\/\n.wib-tpl-minimal .wib-tpl-footer{border-top:1px solid #ddd;padding-top:22px;}\n.wib-tpl-minimal .wib-tpl-notes-label{\n    font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#999;margin-bottom:6px;\n    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;\n}\n.wib-tpl-minimal .wib-tpl-notes-text{color:#444;white-space:pre-wrap;font-size:14.5px;}\n\n\/* Bank details *\/\n.wib-tpl-minimal .wib-tpl-bank-details{border-top:1px solid #ddd;padding-top:22px;margin-top:18px;}\n.wib-tpl-minimal .wib-tpl-bank-label{\n    font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#999;margin-bottom:6px;\n    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;\n}\n.wib-tpl-minimal .wib-tpl-bank-text{color:#444;white-space:pre-wrap;font-size:14.5px;}\n<\/style>\n\n<div class=\"wib-tpl wib-tpl-minimal\">\n\n    <!-- Cover image (hidden unless selected) -->\n    <div class=\"wib-tpl-cover\" id=\"wib-tpl-cover\"><\/div>\n\n    <div class=\"wib-tpl-inner\">\n\n        <!-- Header -->\n        <div class=\"wib-tpl-header\">\n            <div class=\"wib-tpl-logo-wrap\" data-wib-field=\"logo\">\n                <img decoding=\"async\" id=\"wib-tpl-logo\" src=\"\" alt=\"Logo\" style=\"display:none;\">\n            <\/div>\n            <div class=\"wib-tpl-meta-block\">\n                <div class=\"wib-tpl-title\" data-wib=\"invoice-type\">Invoice<\/div>\n                <div class=\"wib-tpl-meta-row\" data-wib-field=\"invoice_num\">\n                    <span class=\"wib-tpl-meta-key\" data-wib=\"invoice-num-label\">Invoice&nbsp;#<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"invoice-num\"><\/span>\n                <\/div>\n                <div class=\"wib-tpl-meta-row\">\n                    <span class=\"wib-tpl-meta-key\">Date<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"invoice-date\"><\/span>\n                <\/div>\n                <div class=\"wib-tpl-meta-row\" data-wib-field=\"due_date\">\n                    <span class=\"wib-tpl-meta-key\">Due&nbsp;Date<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"due-date\"><\/span>\n                <\/div>\n                <div class=\"wib-tpl-meta-row wib-tpl-po-row\" style=\"display:none\">\n                    <span class=\"wib-tpl-meta-key\">PO&nbsp;#<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"po-num\"><\/span>\n                <\/div>\n                <div class=\"wib-tpl-meta-row wib-tpl-vat-row\" style=\"display:none\">\n                    <span class=\"wib-tpl-meta-key\">VAT&nbsp;#<\/span>\n                    <span class=\"wib-tpl-meta-val\" data-wib=\"vat-num\"><\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Bill From \/ Bill To -->\n        <div class=\"wib-tpl-parties\">\n            <div class=\"wib-tpl-party\" data-wib-field=\"bill_from\">\n                <div class=\"wib-tpl-party-label\">From<\/div>\n                <div class=\"wib-tpl-party-text\" data-wib=\"bill-from\"><\/div>\n            <\/div>\n            <div class=\"wib-tpl-party\" data-wib-field=\"bill_to\">\n                <div class=\"wib-tpl-party-label\">Bill To<\/div>\n                <div class=\"wib-tpl-party-text\" data-wib=\"bill-to\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Items -->\n        <table class=\"wib-tpl-items-table\">\n            <thead>\n                <tr class=\"wib-tpl-thead-row\">\n                    <th class=\"wib-tpl-th wib-tpl-th--desc\">Description<\/th>\n                    <th class=\"wib-tpl-th wib-tpl-th--qty\">Qty<\/th>\n                    <th class=\"wib-tpl-th wib-tpl-th--amount\">Amount<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody id=\"wib-tpl-items\">\n                <!-- JS renders rows -->\n            <\/tbody>\n        <\/table>\n\n        <!-- Totals -->\n        <div class=\"wib-tpl-totals\">\n            <table class=\"wib-tpl-totals-table\">\n                <tr class=\"wib-tpl-total-row\">\n                    <td class=\"wib-tpl-total-key\">Subtotal<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"subtotal\"><\/td>\n                <\/tr>\n                <tr class=\"wib-tpl-total-row\" id=\"wib-tpl-discount-row\" style=\"display:none\">\n                    <td class=\"wib-tpl-total-key\" data-wib=\"discount-label\">Discount<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"discount-amount\" style=\"color:#e53e3e;\"><\/td>\n                <\/tr>\n                <tr class=\"wib-tpl-total-row\" data-wib-field=\"tax\" id=\"wib-tpl-tax-row\">\n                    <td class=\"wib-tpl-total-key\" data-wib=\"tax-label\">Tax (0%)<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"tax-amount\"><\/td>\n                <\/tr>\n                <tr class=\"wib-tpl-total-row wib-tpl-total-row--grand\">\n                    <td class=\"wib-tpl-total-key\">Balance Due<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"total\"><\/td>\n                <\/tr>\n            <\/table>\n        <\/div>\n\n        <!-- Payment methods -->\n        <div class=\"wib-tpl-payment\" id=\"wib-tpl-payment\">\n            <div class=\"wib-tpl-payment-label\">Accepted Payment Methods<\/div>\n            <div class=\"wib-tpl-payment-list\" data-wib=\"payment-methods\"><\/div>\n        <\/div>\n\n        <!-- Notes -->\n        <div class=\"wib-tpl-footer\" data-wib-field=\"notes\">\n            <div class=\"wib-tpl-notes-label\">Notes<\/div>\n            <div class=\"wib-tpl-notes-text\" data-wib=\"notes\"><\/div>\n        <\/div>\n\n        <!-- Bank Account Details -->\n        <div class=\"wib-tpl-bank-details\" id=\"wib-tpl-bank-details\" style=\"display:none\">\n            <div class=\"wib-tpl-bank-label\">Bank Account Details<\/div>\n            <div class=\"wib-tpl-bank-text\" data-wib=\"bank-details\"><\/div>\n        <\/div>\n\n    <\/div><!-- \/.wib-tpl-inner -->\n<\/div>\n<\/template>\n<template id=\"wib-tpl-store-modern\"><style>\n\/* \u2500\u2500 WIB Modern template \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.wib-tpl-modern *{box-sizing:border-box;margin:0;padding:0;}\n.wib-tpl-modern{\n    --wib-accent:#0044BB;\n    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;\n    font-size:14px;color:#1a1a1a;line-height:1.55;background:#fff;\n}\n\n\/* Cover (shown instead of, or above, the accent header) *\/\n.wib-tpl-modern .wib-tpl-cover{width:100%;height:110px;display:none;}\n\n\/* Header \u2014 full-bleed accent background.\n   La altura se adapta al contenido (min-height como base): si se a\u00f1aden filas\n   como PO # \/ VAT #, el header crece en lugar de recortar el texto. *\/\n.wib-tpl-modern .wib-tpl-header{\n    background:var(--wib-accent);padding:32px 40px;min-height:150px;box-sizing:border-box;\n    background-size:cover;background-position:center;\n    display:flex;justify-content:space-between;align-items:center;gap:24px;\n}\n.wib-tpl-modern .wib-tpl-logo-wrap{flex-shrink:0;max-width:180px;}\n.wib-tpl-modern #wib-tpl-logo{max-width:160px;max-height:64px;object-fit:contain;display:block;}\n.wib-tpl-modern .wib-tpl-meta-block{text-align:right;}\n.wib-tpl-modern .wib-tpl-title{font-size:32px;font-weight:800;letter-spacing:4px;color:#fff;margin-bottom:12px;}\n.wib-tpl-modern .wib-tpl-meta-row{display:flex;justify-content:flex-end;gap:10px;font-size:14px;margin-bottom:4px;}\n.wib-tpl-modern .wib-tpl-meta-key{color:rgba(255,255,255,.65);}\n.wib-tpl-modern .wib-tpl-meta-val{color:#fff;font-weight:600;min-width:120px;text-align:right;}\n\n\/* Body *\/\n.wib-tpl-modern .wib-tpl-body{padding:36px 40px;}\n\n\/* Parties *\/\n.wib-tpl-modern .wib-tpl-parties{display:flex;gap:32px;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid #eee;}\n.wib-tpl-modern .wib-tpl-party{flex:1;}\n.wib-tpl-modern .wib-tpl-party-label{\n    font-size:11px;font-weight:700;letter-spacing:1.5px;\n    text-transform:uppercase;color:var(--wib-accent);margin-bottom:7px;\n}\n.wib-tpl-modern .wib-tpl-party-text{color:#333;white-space:pre-wrap;font-size:15px;line-height:1.5;}\n\n\/* Items table *\/\n.wib-tpl-modern .wib-tpl-items-table{width:100%;border-collapse:collapse;margin-bottom:24px;}\n.wib-tpl-modern .wib-tpl-thead-row th{\n    background:var(--wib-accent);color:#fff;\n    font-size:11.5px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;\n    padding:11px 12px;text-align:left;\n}\n.wib-tpl-modern .wib-tpl-th--qty{text-align:center !important;}\n.wib-tpl-modern .wib-tpl-th--amount{text-align:right !important;}\n.wib-tpl-modern .wib-tpl-item-row{break-inside:avoid;page-break-inside:avoid;}\n.wib-tpl-modern .wib-tpl-item-row:nth-child(even){background:#f0f4ff;}\n.wib-tpl-modern .wib-tpl-td{padding:11px 12px;border-bottom:1px solid #f0f0f0;font-size:14.5px;vertical-align:top;}\n.wib-tpl-modern .wib-tpl-td--qty{text-align:center !important;white-space:nowrap;}\n.wib-tpl-modern .wib-tpl-td--amount{text-align:right !important;white-space:nowrap;}\n.wib-tpl-modern .wib-tpl-td--desc{word-break:break-word;}\n\n\/* Totals *\/\n.wib-tpl-modern .wib-tpl-totals{display:flex;justify-content:flex-end;margin-bottom:28px;}\n.wib-tpl-modern .wib-tpl-totals-table{width:260px;border-collapse:collapse;break-inside:avoid;page-break-inside:avoid;}\n.wib-tpl-modern .wib-tpl-total-row td{padding:7px 8px;font-size:15px;}\n.wib-tpl-modern .wib-tpl-total-key{color:#666;}\n.wib-tpl-modern .wib-tpl-total-val{text-align:right;font-weight:500;min-width:90px;}\n.wib-tpl-modern .wib-tpl-total-row--grand td{\n    font-weight:800;font-size:19px;color:var(--wib-accent);\n    border-top:3px solid var(--wib-accent);padding-top:13px;\n}\n\n\/* Payment methods *\/\n.wib-tpl-modern .wib-tpl-payment{margin-bottom:24px;display:none;}\n.wib-tpl-modern .wib-tpl-payment-label{\n    font-size:11px;font-weight:700;letter-spacing:1.5px;\n    text-transform:uppercase;color:var(--wib-accent);margin-bottom:6px;\n}\n.wib-tpl-modern .wib-tpl-payment-list{display:flex;flex-direction:column;gap:5px;}\n.wib-tpl-modern .wib-tpl-pm-item{display:flex;align-items:center;gap:8px;}\n.wib-tpl-modern .wib-tpl-pm-item--bank{flex-direction:column;align-items:flex-start;gap:3px;}\n.wib-tpl-modern .wib-tpl-pm-name{font-size:14.5px;font-weight:600;color:#333;}\n.wib-tpl-modern .wib-tpl-pm-detail{font-size:13.5px;color:#888;}\n.wib-tpl-modern .wib-tpl-pm-bank{display:flex;flex-direction:column;gap:2px;padding-left:1px;}\n.wib-tpl-modern .wib-tpl-pm-bank-row{display:flex;gap:8px;align-items:baseline;}\n.wib-tpl-modern .wib-tpl-pm-bank-key{font-size:11px;color:#888;min-width:95px;flex-shrink:0;}\n.wib-tpl-modern .wib-tpl-pm-bank-val{font-size:13.5px;color:#333;font-weight:500;}\n\n\/* Notes *\/\n.wib-tpl-modern .wib-tpl-footer{background:#f0f4ff;border-left:3px solid var(--wib-accent);padding:14px 16px;}\n.wib-tpl-modern .wib-tpl-notes-label{\n    font-size:11px;font-weight:700;letter-spacing:1.5px;\n    text-transform:uppercase;color:var(--wib-accent);margin-bottom:6px;\n}\n.wib-tpl-modern .wib-tpl-notes-text{color:#444;white-space:pre-wrap;font-size:14.5px;}\n\n\/* Bank details *\/\n.wib-tpl-modern .wib-tpl-bank-details{background:#f0f4ff;border-left:3px solid var(--wib-accent);padding:14px 16px;margin-top:16px;}\n.wib-tpl-modern .wib-tpl-bank-label{\n    font-size:11px;font-weight:700;letter-spacing:1.5px;\n    text-transform:uppercase;color:var(--wib-accent);margin-bottom:6px;\n}\n.wib-tpl-modern .wib-tpl-bank-text{color:#444;white-space:pre-wrap;font-size:14.5px;}\n<\/style>\n\n<div class=\"wib-tpl wib-tpl-modern\">\n\n    <!-- Cover image (hidden unless selected) -->\n    <div class=\"wib-tpl-cover\" id=\"wib-tpl-cover\"><\/div>\n\n    <!-- Header \u2014 accent background -->\n    <div class=\"wib-tpl-header\">\n        <div class=\"wib-tpl-logo-wrap\" data-wib-field=\"logo\">\n            <img decoding=\"async\" id=\"wib-tpl-logo\" src=\"\" alt=\"Logo\" style=\"display:none;\">\n        <\/div>\n        <div class=\"wib-tpl-meta-block\">\n            <div class=\"wib-tpl-title\" data-wib=\"invoice-type\">INVOICE<\/div>\n            <div class=\"wib-tpl-meta-row\" data-wib-field=\"invoice_num\">\n                <span class=\"wib-tpl-meta-key\" data-wib=\"invoice-num-label\">Invoice&nbsp;#<\/span>\n                <span class=\"wib-tpl-meta-val\" data-wib=\"invoice-num\"><\/span>\n            <\/div>\n            <div class=\"wib-tpl-meta-row\">\n                <span class=\"wib-tpl-meta-key\">Date<\/span>\n                <span class=\"wib-tpl-meta-val\" data-wib=\"invoice-date\"><\/span>\n            <\/div>\n            <div class=\"wib-tpl-meta-row\" data-wib-field=\"due_date\">\n                <span class=\"wib-tpl-meta-key\">Due&nbsp;Date<\/span>\n                <span class=\"wib-tpl-meta-val\" data-wib=\"due-date\"><\/span>\n            <\/div>\n            <div class=\"wib-tpl-meta-row wib-tpl-po-row\" style=\"display:none\">\n                <span class=\"wib-tpl-meta-key\">PO&nbsp;#<\/span>\n                <span class=\"wib-tpl-meta-val\" data-wib=\"po-num\"><\/span>\n            <\/div>\n            <div class=\"wib-tpl-meta-row wib-tpl-vat-row\" style=\"display:none\">\n                <span class=\"wib-tpl-meta-key\">VAT&nbsp;#<\/span>\n                <span class=\"wib-tpl-meta-val\" data-wib=\"vat-num\"><\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Body -->\n    <div class=\"wib-tpl-body\">\n\n        <!-- Bill From \/ Bill To -->\n        <div class=\"wib-tpl-parties\">\n            <div class=\"wib-tpl-party\" data-wib-field=\"bill_from\">\n                <div class=\"wib-tpl-party-label\">From<\/div>\n                <div class=\"wib-tpl-party-text\" data-wib=\"bill-from\"><\/div>\n            <\/div>\n            <div class=\"wib-tpl-party\" data-wib-field=\"bill_to\">\n                <div class=\"wib-tpl-party-label\">Bill To<\/div>\n                <div class=\"wib-tpl-party-text\" data-wib=\"bill-to\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Items -->\n        <table class=\"wib-tpl-items-table\">\n            <thead>\n                <tr class=\"wib-tpl-thead-row\">\n                    <th class=\"wib-tpl-th wib-tpl-th--desc\">Description<\/th>\n                    <th class=\"wib-tpl-th wib-tpl-th--qty\">Qty<\/th>\n                    <th class=\"wib-tpl-th wib-tpl-th--amount\">Amount<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody id=\"wib-tpl-items\">\n                <!-- JS renders rows -->\n            <\/tbody>\n        <\/table>\n\n        <!-- Totals -->\n        <div class=\"wib-tpl-totals\">\n            <table class=\"wib-tpl-totals-table\">\n                <tr class=\"wib-tpl-total-row\">\n                    <td class=\"wib-tpl-total-key\">Subtotal<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"subtotal\"><\/td>\n                <\/tr>\n                <tr class=\"wib-tpl-total-row\" id=\"wib-tpl-discount-row\" style=\"display:none\">\n                    <td class=\"wib-tpl-total-key\" data-wib=\"discount-label\">Discount<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"discount-amount\" style=\"color:#e53e3e;\"><\/td>\n                <\/tr>\n                <tr class=\"wib-tpl-total-row\" data-wib-field=\"tax\" id=\"wib-tpl-tax-row\">\n                    <td class=\"wib-tpl-total-key\" data-wib=\"tax-label\">Tax (0%)<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"tax-amount\"><\/td>\n                <\/tr>\n                <tr class=\"wib-tpl-total-row wib-tpl-total-row--grand\">\n                    <td class=\"wib-tpl-total-key\">Balance Due<\/td>\n                    <td class=\"wib-tpl-total-val\" data-wib=\"total\"><\/td>\n                <\/tr>\n            <\/table>\n        <\/div>\n\n        <!-- Payment methods -->\n        <div class=\"wib-tpl-payment\" id=\"wib-tpl-payment\">\n            <div class=\"wib-tpl-payment-label\">Accepted Payment Methods<\/div>\n            <div class=\"wib-tpl-payment-list\" data-wib=\"payment-methods\"><\/div>\n        <\/div>\n\n        <!-- Notes -->\n        <div class=\"wib-tpl-footer\" data-wib-field=\"notes\">\n            <div class=\"wib-tpl-notes-label\">Notes<\/div>\n            <div class=\"wib-tpl-notes-text\" data-wib=\"notes\"><\/div>\n        <\/div>\n\n        <!-- Bank Account Details -->\n        <div class=\"wib-tpl-bank-details\" id=\"wib-tpl-bank-details\" style=\"display:none\">\n            <div class=\"wib-tpl-bank-label\">Bank Account Details<\/div>\n            <div class=\"wib-tpl-bank-text\" data-wib=\"bank-details\"><\/div>\n        <\/div>\n\n    <\/div><!-- \/.wib-tpl-body -->\n<\/div>\n<\/template>\n<\/div>\n  <\/div>\n\n  <!-- ==================== HOW IT WORKS ==================== -->\n  <section class=\"how\">\n    <div class=\"how-mesh\" aria-hidden=\"true\">\n      <span class=\"m1\"><\/span>\n      <span class=\"m2\"><\/span>\n      <span class=\"m3\"><\/span>\n    <\/div>\n    <div class=\"how-wrap\">\n      <div class=\"how-head\">\n        <div class=\"how-tag\">\u2014 How to make a receipt<\/div>\n        <h2>Create a free receipt in 4 simple steps<\/h2>\n        <p>\n          Generate professional receipts for payments, sales, food orders,\n          retail purchases, and business transactions in minutes. No accounting\n          experience required.\n        <\/p>\n      <\/div>\n\n      <div class=\"how-bento\" id=\"howFx\">\n        <!-- LEFT: live receipt that builds up step by step -->\n        <div class=\"rcpt-stage\" id=\"howStage\">\n          <div class=\"rcpt-glow\" id=\"howGlow\"><\/div>\n          <div class=\"rcpt-float\">\n            <div class=\"rcpt\" id=\"howRcpt\" data-step=\"1\">\n              <!-- header -->\n              <div class=\"rcpt-head\">\n                <div class=\"rcpt-logo\">BS<\/div>\n                <div class=\"rcpt-biz\">\n                  <b>Bright Spark<\/b>\n                  <span>Receipt #RC-2048<\/span>\n                <\/div>\n                <div class=\"rcpt-status\" id=\"howStatus\">DRAFT<\/div>\n              <\/div>\n              <!-- body -->\n              <div class=\"rcpt-body\">\n                <div class=\"rcpt-parties\">\n                  <div class=\"from\">\n                    <div class=\"lbl\">From<\/div>\n                    <b>Bright Spark Electrical<\/b>\n                    <span>742 Birchwood Ave, Austin<\/span>\n                  <\/div>\n                  <div class=\"to\">\n                    <div class=\"lbl\">Billed to<\/div>\n                    <b>Maya Chen<\/b>\n                    <span>+1 (512) 555&ndash;0142<\/span>\n                  <\/div>\n                <\/div>\n\n                <!-- line items + totals (step 2+) -->\n                <div class=\"rcpt-rev\" data-from=\"2\">\n                  <div class=\"rcpt-items\">\n                    <div class=\"rcpt-item\">\n                      <div>\n                        <div class=\"nm\">Service call &amp; diagnostics<\/div>\n                        <div class=\"qty\">Qty 1<\/div>\n                      <\/div>\n                      <div class=\"amt\">$90.00<\/div>\n                    <\/div>\n                    <div class=\"rcpt-item\">\n                      <div>\n                        <div class=\"nm\">Panel upgrade (200A)<\/div>\n                        <div class=\"qty\">Qty 1<\/div>\n                      <\/div>\n                      <div class=\"amt\">$1,250.00<\/div>\n                    <\/div>\n                    <div class=\"rcpt-item\">\n                      <div>\n                        <div class=\"nm\">Materials &amp; parts<\/div>\n                        <div class=\"qty\">Qty 1<\/div>\n                      <\/div>\n                      <div class=\"amt\">$340.00<\/div>\n                    <\/div>\n                  <\/div>\n                  <div class=\"rcpt-totals\">\n                    <div class=\"rcpt-totline\">\n                      <span>Subtotal<\/span><span>$1,680.00<\/span>\n                    <\/div>\n                    <div class=\"rcpt-totline\">\n                      <span>Tax (8%)<\/span><span>$134.40<\/span>\n                    <\/div>\n                    <div class=\"rcpt-total\">\n                      <span class=\"t\">Total<\/span><span class=\"v\">$1,814.40<\/span>\n                    <\/div>\n                  <\/div>\n                <\/div>\n\n                <!-- branding (step 3+) -->\n                <div class=\"rcpt-rev\" data-from=\"3\">\n                  <div class=\"rcpt-brandrow\">\n                    <span class=\"rcpt-swatch active\"><\/span>\n                    <span class=\"rcpt-swatch\"><\/span>\n                    <span class=\"rcpt-swatch\"><\/span>\n                    <span class=\"rcpt-tplname\">Template &middot; Modern<\/span>\n                  <\/div>\n                  <p class=\"rcpt-note\">\n                    &ldquo;Thank you for your business &mdash; we truly\n                    appreciate you.&rdquo;\n                  <\/p>\n                <\/div>\n\n                <!-- delivery (step 4) -->\n                <div class=\"rcpt-rev\" data-from=\"4\">\n                  <div class=\"rcpt-sent\">\n                    <svg\n                      width=\"22\"\n                      height=\"22\"\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 d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" \/>\n                      <polyline points=\"22 4 12 14.01 9 11.01\" \/>\n                    <\/svg>\n                    <div>\n                      <b>Sent to Maya Chen<\/b>\n                      <span>Delivered just now &middot; via email<\/span>\n                    <\/div>\n                  <\/div>\n                  <div class=\"rcpt-actions\">\n                    <div class=\"rcpt-act\">\n                      <svg\n                        width=\"18\"\n                        height=\"18\"\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 d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" \/>\n                        <polyline points=\"7 10 12 15 17 10\" \/>\n                        <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\" \/>\n                      <\/svg>PDF\n                    <\/div>\n                    <div class=\"rcpt-act\">\n                      <svg\n                        width=\"18\"\n                        height=\"18\"\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>Print\n                    <\/div>\n                    <div class=\"rcpt-act\">\n                      <svg\n                        width=\"18\"\n                        height=\"18\"\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=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\" \/>\n                        <path d=\"m22 7-10 5L2 7\" \/>\n                      <\/svg>Email\n                    <\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- RIGHT: interactive step list -->\n        <div class=\"steps\" id=\"howSteps\">\n          <div class=\"steps-progress\" aria-hidden=\"true\">\n            <div class=\"seg\"><i><\/i><\/div>\n            <div class=\"seg\"><i><\/i><\/div>\n            <div class=\"seg\"><i><\/i><\/div>\n            <div class=\"seg\"><i><\/i><\/div>\n          <\/div>\n\n          <button class=\"step\" type=\"button\" data-index=\"0\" aria-pressed=\"true\">\n            <div class=\"step-icon\">\n              <span class=\"step-num\">1<\/span>\n              <svg\n                width=\"22\"\n                height=\"22\"\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 d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" \/>\n                <circle cx=\"12\" cy=\"7\" r=\"4\" \/>\n              <\/svg>\n            <\/div>\n            <div class=\"step-body\">\n              <h3 class=\"step-title\">Enter your business details<\/h3>\n              <div class=\"step-detail\">\n                <p>\n                  Add your business name, logo, address, and contact info\n                  &mdash; then your customer's details. Invoice Fly remembers\n                  everything for next time, saving you time on every\n                  transaction.\n                <\/p>\n                <div class=\"step-meta\">Takes under 30 seconds<\/div>\n              <\/div>\n            <\/div>\n          <\/button>\n\n          <button class=\"step\" type=\"button\" data-index=\"1\" aria-pressed=\"false\">\n            <div class=\"step-icon\">\n              <span class=\"step-num\">2<\/span>\n              <svg\n                width=\"22\"\n                height=\"22\"\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=\"M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z\"\n                \/>\n                <path d=\"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8\" \/>\n                <path d=\"M12 17.5v-11\" \/>\n              <\/svg>\n            <\/div>\n            <div class=\"step-body\">\n              <h3 class=\"step-title\">Add products &amp; payment details<\/h3>\n              <div class=\"step-detail\">\n                <p>\n                  List the products or services, quantities, prices, taxes,\n                  discounts, and payment method. Totals are calculated\n                  automatically, so every receipt is accurate and professional.\n                <\/p>\n                <div class=\"step-meta\">Instant auto-calculations<\/div>\n              <\/div>\n            <\/div>\n          <\/button>\n\n          <button class=\"step\" type=\"button\" data-index=\"2\" aria-pressed=\"false\">\n            <div class=\"step-icon\">\n              <span class=\"step-num\">3<\/span>\n              <svg\n                width=\"22\"\n                height=\"22\"\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=\"13.5\" cy=\"6.5\" r=\".7\" fill=\"currentColor\" \/>\n                <circle cx=\"17.5\" cy=\"10.5\" r=\".7\" fill=\"currentColor\" \/>\n                <circle cx=\"8.5\" cy=\"7.5\" r=\".7\" fill=\"currentColor\" \/>\n                <circle cx=\"6.5\" cy=\"12.5\" r=\".7\" fill=\"currentColor\" \/>\n                <path\n                  d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.9 0 1.6-.7 1.6-1.7 0-.4-.2-.8-.4-1.1-.3-.3-.4-.7-.4-1.1a1.6 1.6 0 0 1 1.6-1.7H16c3 0 5.5-2.5 5.5-5.6C21.5 6 17 2 12 2Z\"\n                \/>\n              <\/svg>\n            <\/div>\n            <div class=\"step-body\">\n              <h3 class=\"step-title\">Customize your receipt<\/h3>\n              <div class=\"step-detail\">\n                <p>\n                  Choose a template, add your branding, and include notes,\n                  payment details, or transaction info. Every receipt is clean,\n                  professional, and ready to share.\n                <\/p>\n                <div class=\"step-meta\">Multiple templates available<\/div>\n              <\/div>\n            <\/div>\n          <\/button>\n\n          <button class=\"step\" type=\"button\" data-index=\"3\" aria-pressed=\"false\">\n            <div class=\"step-icon\">\n              <span class=\"step-num\">4<\/span>\n              <svg\n                width=\"22\"\n                height=\"22\"\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            <div class=\"step-body\">\n              <h3 class=\"step-title\">Download, print, or send<\/h3>\n              <div class=\"step-detail\">\n                <p>\n                  Download your receipt as a PDF, print it, or send it directly\n                  by email &mdash; all in one click. Your customer receives a\n                  professional receipt immediately.\n                <\/p>\n                <div class=\"step-meta\">Instant delivery<\/div>\n              <\/div>\n            <\/div>\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n    <!-- \/.how-wrap -->\n  <\/section>\n\n  <!-- ==================== BENEFITS ==================== -->\n  <section class=\"benefits\">\n    <div class=\"benefits-inner\">\n      <div class=\"ben-split-wrap\">\n        <!-- Row 1: content left, image right -->\n        <div class=\"ben-split\">\n          <div class=\"ben-split-content\">\n            <div class=\"section-head\">\n              <div class=\"section-tag\">\u2014 Receipt maker features<\/div>\n              <h2>Everything you need in a receipt maker<\/h2>\n            <\/div>\n            <div class=\"ben-list\">\n              <div class=\"ben-item\">\n                <div class=\"ben-icon\">\n                  <svg\n                    width=\"20\"\n                    height=\"20\"\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                    <polyline points=\"12 6 12 12 16 14\" \/>\n                  <\/svg>\n                <\/div>\n                <div class=\"ben-item-text\">\n                  <h3 class=\"ben-title\">Create proof of payment instantly<\/h3>\n                  <p class=\"ben-text\">\n                    Generate professional payment receipts that clearly document\n                    completed transactions \u2014 no awkward \"I swear I paid\"\n                    conversations required.\n                  <\/p>\n                <\/div>\n              <\/div>\n              <div class=\"ben-item\">\n                <div class=\"ben-icon\">\n                  <svg\n                    width=\"20\"\n                    height=\"20\"\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=\"17 1 21 5 17 9\" \/>\n                    <path d=\"M3 11V9a4 4 0 0 1 4-4h14\" \/>\n                    <polyline points=\"7 23 3 19 7 15\" \/>\n                    <path d=\"M21 13v2a4 4 0 0 1-4 4H3\" \/>\n                  <\/svg>\n                <\/div>\n                <div class=\"ben-item-text\">\n                  <h3 class=\"ben-title\">\n                    Perfect for sales and business receipts\n                  <\/h3>\n                  <p class=\"ben-text\">\n                    Create receipts for retail sales, services, consulting work,\n                    and customer payments without fighting spreadsheets.\n                  <\/p>\n                <\/div>\n              <\/div>\n              <div class=\"ben-item\">\n                <div class=\"ben-icon\">\n                  <svg\n                    width=\"20\"\n                    height=\"20\"\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                <div class=\"ben-item-text\">\n                  <h3 class=\"ben-title\">\n                    Works for restaurants and food businesses\n                  <\/h3>\n                  <p class=\"ben-text\">\n                    Create restaurant receipts, food receipts, and catering\n                    payment records fast.\n                  <\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"ben-split-media\">\n            <div class=\"ben-media-inner ben-media-wide\">\n              <img\n                src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/receipt-generator-maker-2.webp\"\n                alt=\"Receipt maker preview\"\n                class=\"ben-media-img\"\n                loading=\"lazy\"\n                decoding=\"async\"\n              \/>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Row 2: image left, content right -->\n        <div class=\"ben-split\">\n          <div class=\"ben-split-media\">\n            <div class=\"ben-media-inner ben-media-rose\">\n              <img\n                src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/receipt-generator-maker-1.webp\"\n                alt=\"Invoice Fly receipt maker on all devices\"\n                class=\"ben-media-img\"\n                loading=\"lazy\"\n                decoding=\"async\"\n              \/>\n            <\/div>\n          <\/div>\n          <div class=\"ben-split-content\">\n            <div class=\"ben-list\">\n              <div class=\"ben-item\">\n                <div class=\"ben-icon\">\n                  <svg\n                    width=\"20\"\n                    height=\"20\"\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=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\" \/>\n                    <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\" \/>\n                    <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\" \/>\n                  <\/svg>\n                <\/div>\n                <div class=\"ben-item-text\">\n                  <h3 class=\"ben-title\">Download in multiple formats<\/h3>\n                  <p class=\"ben-text\">\n                    PDF, Word, Excel, or Google Sheets \u2014 because everyone has\n                    that one client who asks for \"just one more format.\"\n                  <\/p>\n                <\/div>\n              <\/div>\n              <div class=\"ben-item\">\n                <div class=\"ben-icon\">\n                  <svg\n                    width=\"20\"\n                    height=\"20\"\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=\"1\" y=\"4\" width=\"22\" height=\"16\" rx=\"2\" ry=\"2\" \/>\n                    <line x1=\"1\" y1=\"10\" x2=\"23\" y2=\"10\" \/>\n                  <\/svg>\n                <\/div>\n                <div class=\"ben-item-text\">\n                  <h3 class=\"ben-title\">Send receipts directly to customers<\/h3>\n                  <p class=\"ben-text\">\n                    Email it, share it, or download it. No more \"Did you get my\n                    receipt?\" follow-up circus.\n                  <\/p>\n                <\/div>\n              <\/div>\n              <div class=\"ben-item\">\n                <div class=\"ben-icon\">\n                  <svg\n                    width=\"20\"\n                    height=\"20\"\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=\"3\" y=\"14\" width=\"7\" height=\"7\" \/>\n                    <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" \/>\n                  <\/svg>\n                <\/div>\n                <div class=\"ben-item-text\">\n                  <h3 class=\"ben-title\">Works for any payment method<\/h3>\n                  <p class=\"ben-text\">\n                    Cash, card, bank transfer, and digital payments \u2014 if money\n                    moved, Invoice Fly can help you prove it.\n                  <\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== TESTIMONIAL ==================== -->\n  <section class=\"testimonial\">\n    <div class=\"testimonial-wrap\">\n      <div class=\"ts-eyebrow\">\u2014 What our customers say<\/div>\n      <h2 class=\"ts-title\">Real businesses. Real time saved.<\/h2>\n\n      <div class=\"ts-grid\">\n        <!-- LEFT: active review -->\n        <a\n          class=\"ts-quote\"\n          id=\"ifig-ts-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          <span class=\"ts-qmark\" aria-hidden=\"true\">&rdquo;<\/span>\n          <div class=\"ts-quote-body\">\n            <h3 class=\"ts-headline\">Headline<\/h3>\n            <p class=\"ts-text\">Review body<\/p>\n          <\/div>\n          <div class=\"ts-author\">\n            <div class=\"ts-avatar\">SJ<\/div>\n            <div>\n              <div class=\"ts-name\">Sarah Johnson<\/div>\n              <div class=\"ts-role\">Owner @ Johnson Catering<\/div>\n            <\/div>\n          <\/div>\n          <span class=\"ts-source\">\n            <img\n              id=\"ifig-ts-source-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        <\/a>\n\n        <!-- RIGHT: stat + clickable people -->\n        <div class=\"ts-side\">\n          <div class=\"ts-stat\">\n            <div class=\"ts-stat-num\">0<\/div>\n            <div class=\"ts-stat-label\">Stat<\/div>\n          <\/div>\n\n          <div class=\"ts-list\">\n            <button\n              class=\"ts-person active\"\n              type=\"button\"\n              aria-pressed=\"true\"\n              data-initials=\"SJ\"\n              data-name=\"Sarah Johnson\"\n              data-review-url=\"https:\/\/www.g2.com\/products\/invoice-fly\/reviews\"\n              data-review-logo=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/g2-logo-scaled.webp\"\n              data-review-name=\"G2\"\n              data-role=\"Owner @ Johnson Catering\"\n              data-headline=\"Invoicing went from a chore to an afterthought.\"\n              data-text=\"The recurring billing runs on its own and every invoice goes out automatically. I can see exactly what I'm owed in seconds instead of digging through spreadsheets.\"\n              data-statnum=\"12<em>h<\/em>\"\n              data-statlabel=\"Saved every month\"\n            >\n              <span class=\"ts-pavatar\">SJ<\/span>\n              <span class=\"ts-pinfo\">\n                <span class=\"ts-pname\">Sarah Johnson<\/span>\n                <span class=\"ts-prole\">Owner @ Johnson Catering<\/span>\n              <\/span>\n              <svg\n                class=\"ts-arrow\"\n                width=\"18\"\n                height=\"18\"\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=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" \/>\n                <polyline points=\"12 5 19 12 12 19\" \/>\n              <\/svg>\n            <\/button>\n\n            <button\n              class=\"ts-person\"\n              type=\"button\"\n              aria-pressed=\"false\"\n              data-initials=\"MR\"\n              data-name=\"Marcus Reed\"\n              data-review-url=\"https:\/\/www.capterra.com\/p\/10002692\/Invoice-Fly\/\"\n              data-review-logo=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/capterra-logo-scaled.webp\"\n              data-review-name=\"Capterra\"\n              data-role=\"Independent Electrician\"\n              data-headline=\"I send the invoice before I've even packed up my tools.\"\n              data-text=\"On-site, on my phone, done. Clients pay faster because the receipt lands in their inbox the second the job is finished \u2014 no more end-of-week paperwork.\"\n              data-statnum=\"3<em>x<\/em>\"\n              data-statlabel=\"Faster payments collected\"\n            >\n              <span class=\"ts-pavatar\">MR<\/span>\n              <span class=\"ts-pinfo\">\n                <span class=\"ts-pname\">Marcus Reed<\/span>\n                <span class=\"ts-prole\">Independent Electrician<\/span>\n              <\/span>\n              <svg\n                class=\"ts-arrow\"\n                width=\"18\"\n                height=\"18\"\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=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" \/>\n                <polyline points=\"12 5 19 12 12 19\" \/>\n              <\/svg>\n            <\/button>\n\n            <button\n              class=\"ts-person\"\n              type=\"button\"\n              aria-pressed=\"false\"\n              data-initials=\"EO\"\n              data-name=\"Elena Ortiz\"\n              data-review-url=\"https:\/\/www.getapp.com\/sales-software\/a\/invoice-fly-1\/\"\n              data-review-logo=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/getapp-logo.webp\"\n              data-review-name=\"GetApp\"\n              data-role=\"Freelance Designer\"\n              data-headline=\"Set up and sending in under an hour.\"\n              data-text=\"I created my template, added my services, and sent my first invoice the same day. It feels built specifically for people who need something simple and reliable.\"\n              data-statnum=\"1<em>hr<\/em>\"\n              data-statlabel=\"To get fully set up\"\n            >\n              <span class=\"ts-pavatar\">EO<\/span>\n              <span class=\"ts-pinfo\">\n                <span class=\"ts-pname\">Elena Ortiz<\/span>\n                <span class=\"ts-prole\">Freelance Designer<\/span>\n              <\/span>\n              <svg\n                class=\"ts-arrow\"\n                width=\"18\"\n                height=\"18\"\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=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" \/>\n                <polyline points=\"12 5 19 12 12 19\" \/>\n              <\/svg>\n            <\/button>\n\n            <button\n              class=\"ts-person\"\n              type=\"button\"\n              aria-pressed=\"false\"\n              data-initials=\"DC\"\n              data-name=\"Devon Clarke\"\n              data-review-url=\"https:\/\/www.g2.com\/products\/invoice-fly\/reviews\"\n              data-review-logo=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/g2-logo-scaled.webp\"\n              data-review-name=\"G2\"\n              data-role=\"Owner @ Clarke Detailing\"\n              data-headline=\"Not a single payment slips through the cracks anymore.\"\n              data-text=\"Recurring invoices go out on their own and I can see who has paid at a glance. I have stopped chasing money I already earned.\"\n              data-statnum=\"<em>$0<\/em>\"\n              data-statlabel=\"Revenue left on the table\"\n            >\n              <span class=\"ts-pavatar\">DC<\/span>\n              <span class=\"ts-pinfo\">\n                <span class=\"ts-pname\">Devon Clarke<\/span>\n                <span class=\"ts-prole\">Owner @ Clarke Detailing<\/span>\n              <\/span>\n              <svg\n                class=\"ts-arrow\"\n                width=\"18\"\n                height=\"18\"\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=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" \/>\n                <polyline points=\"12 5 19 12 12 19\" \/>\n              <\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== WHAT TO INCLUDE ==================== -->\n  <section class=\"include\">\n    <div class=\"include-inner\">\n      <div class=\"include-head\">\n        <div class=\"section-tag\">\u2014 Receipt structure guide<\/div>\n        <h2>What to Include in a Payment Receipt<\/h2>\n        <p>\n          A professional payment receipt should clearly document the transaction\n          and provide proof of payment for both the business and the customer.\n          Our receipt maker includes all the essential details needed to create\n          accurate and professional receipts.\n        <\/p>\n      <\/div>\n\n      <div class=\"include-layout\">\n        <!-- Left column: items 1\u20134 -->\n        <div class=\"include-col\">\n          <div class=\"include-item\">\n            <div class=\"include-num\">1<\/div>\n            <h3 class=\"include-title\">Receipt Header<\/h3>\n            <p class=\"include-text\">\n              A clear receipt title at the top. Our builder makes it instantly\n              easy to understand.\n            <\/p>\n          <\/div>\n\n          <div class=\"include-item\">\n            <div class=\"include-num\">2<\/div>\n            <h3 class=\"include-title\">Receipt Number &amp; Issue Date<\/h3>\n            <p class=\"include-text\">\n              Include a unique receipt number and clear issue date so you and\n              your client can track it easily.\n            <\/p>\n          <\/div>\n\n          <div class=\"include-item\">\n            <div class=\"include-num\">3<\/div>\n            <h3 class=\"include-title\">Customer Details<\/h3>\n            <p class=\"include-text\">\n              Display your business, billing, and shipping details clearly in\n              one place.\n            <\/p>\n          <\/div>\n\n          <div class=\"include-item\">\n            <div class=\"include-num\">4<\/div>\n            <h3 class=\"include-title\">Items &amp; Services Table<\/h3>\n            <p class=\"include-text\">\n              List your products or services with quantity, price, and total for\n              complete transparency.\n            <\/p>\n          <\/div>\n        <\/div>\n\n        <!-- Center: receipt image -->\n        <div class=\"include-center\">\n          <img\n            class=\"include-image\"\n            src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/receipt-included-parts.webp\"\n            alt=\"Key sections of a professional payment receipt \u2014 Invoice Fly\"\n            loading=\"lazy\"\n            decoding=\"async\"\n          \/>\n        <\/div>\n\n        <!-- Right column: items 5\u20138 -->\n        <div class=\"include-col\">\n          <div class=\"include-item\">\n            <div class=\"include-num\">5<\/div>\n            <h3 class=\"include-title\">Prices &amp; Totals<\/h3>\n            <p class=\"include-text\">\n              Automatically calculates subtotals, taxes, and the final amount.\n            <\/p>\n          <\/div>\n\n          <div class=\"include-item\">\n            <div class=\"include-num\">6<\/div>\n            <h3 class=\"include-title\">Taxes, Discounts &amp; Fees<\/h3>\n            <p class=\"include-text\">\n              Add taxes, discounts, or additional fees and keep amounts\n              accurate.\n            <\/p>\n          <\/div>\n\n          <div class=\"include-item\">\n            <div class=\"include-num\">7<\/div>\n            <h3 class=\"include-title\">Receipt Total<\/h3>\n            <p class=\"include-text\">\n              Show the final amount clearly with the currency you choose.\n            <\/p>\n          <\/div>\n\n          <div class=\"include-item\">\n            <div class=\"include-num\">8<\/div>\n            <h3 class=\"include-title\">Payment Terms &amp; Details<\/h3>\n            <p class=\"include-text\">\n              Set payment terms, due dates, and notes upfront for faster\n              payments.\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== TEMPLATE ALTERNATIVES ==================== -->\n  <section class=\"templates\">\n    <div class=\"tpl-hero\">\n      <div class=\"tpl-hero-text\">\n        <h2>\n          Prefer to edit a<br \/>\n          <span class=\"tpl-hero-accent\">Receipt Template instead?<\/span>\n        <\/h2>\n        <p>\n          While our receipt maker lets you create receipts online in minutes,\n          you can also browse our professionally designed receipt templates.\n          Download them in Word, Excel, Google Sheets, or PDF format and\n          customize them to fit your business needs.\n        <\/p>\n        <ul class=\"tpl-hero-list\">\n          <li>\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <polyline points=\"20 6 9 17 4 12\" \/>\n            <\/svg>\n            Professional receipts for every industry\n          <\/li>\n          <li>\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <polyline points=\"20 6 9 17 4 12\" \/>\n            <\/svg>\n            Edit in Word, Excel, Google Docs, or Google Sheets\n          <\/li>\n          <li>\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <polyline points=\"20 6 9 17 4 12\" \/>\n            <\/svg>\n            Available in PDF, Word, Excel, Google Docs &amp; Sheets\n          <\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"tpl-hero-media\">\n        <img\n          src=\"https:\/\/invoicefly.com\/wp-content\/uploads\/2026\/06\/receipt-templates-1.webp\"\n          alt=\"Ready-made receipt templates\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        \/>\n        <a\n          href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/receipt-templates\/\"\n          class=\"btn btn-primary btn-lg\"\n        >\n          Browse Free Templates \u2192\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <div class=\"tpl-divider\">\n      <span>Or download a free receipt template by industry<\/span>\n    <\/div>\n\n    <div class=\"tpl-grid\">\n      <a\n        href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/receipt-templates\/cash-receipt-template\/\"\n        class=\"tpl-card\"\n      >\n        <div class=\"tpl-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"26\" height=\"26\">\n            <rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"2\"\/><circle cx=\"12\" cy=\"12\" r=\"2.5\"\/><path d=\"M6 12h.01M18 12h.01\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"tpl-name\">Cash Receipt<\/div>\n        <div class=\"tpl-hint\">Cash payments<\/div>\n      <\/a>\n\n      <a\n        href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/receipt-templates\/cleaning-receipt-template\/\"\n        class=\"tpl-card\"\n      >\n        <div class=\"tpl-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"26\" height=\"26\">\n            <path d=\"m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"tpl-name\">Cleaning Receipt<\/div>\n        <div class=\"tpl-hint\">Cleaning services<\/div>\n      <\/a>\n\n      <a\n        href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/receipt-templates\/contractor-receipt-template\/\"\n        class=\"tpl-card\"\n      >\n        <div class=\"tpl-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"26\" height=\"26\">\n            <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"tpl-name\">Contractor Receipt<\/div>\n        <div class=\"tpl-hint\">Trades & contractors<\/div>\n      <\/a>\n\n      <a\n        href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/receipt-templates\/donation-receipt-template\/\"\n        class=\"tpl-card\"\n      >\n        <div class=\"tpl-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"26\" height=\"26\">\n            <path d=\"M12 21s-7-4.6-9.5-9A4.5 4.5 0 0 1 12 6.5 4.5 4.5 0 0 1 21.5 12C19 16.4 12 21 12 21z\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"tpl-name\">Donation Receipt<\/div>\n        <div class=\"tpl-hint\">Nonprofits & charity<\/div>\n      <\/a>\n\n      <a\n        href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/receipt-templates\/hotel-receipt-template\/\"\n        class=\"tpl-card\"\n      >\n        <div class=\"tpl-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"26\" height=\"26\">\n            <path d=\"M2 20v-8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8\"\/><path d=\"M2 17h20\"\/><path d=\"M6 10V7a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"tpl-name\">Hotel Receipt<\/div>\n        <div class=\"tpl-hint\">Hospitality & lodging<\/div>\n      <\/a>\n\n      <a\n        href=\"https:\/\/invoicefly.com\/free-resources\/free-templates\/receipt-templates\/medical-receipt-template\/\"\n        class=\"tpl-card\"\n      >\n        <div class=\"tpl-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"26\" height=\"26\">\n            <path d=\"M11 2a2 2 0 0 0-2 2v5H4a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h5v5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-5h5a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2z\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"tpl-name\">Medical Receipt<\/div>\n        <div class=\"tpl-hint\">Healthcare & clinics<\/div>\n      <\/a>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== FAQ ==================== -->\n  <section class=\"faq\">\n    <div class=\"faq-inner\">\n      <div class=\"faq-head\">\n        <h2>FAQs About Our Online Receipt Maker<\/h2>\n        <p>\n          Got questions about creating receipts online? Here's everything you\n          need to know about using Invoice Fly's receipt maker to create, send,\n          and manage professional payment receipts.\n        <\/p>\n      <\/div>\n      <div class=\"faq-list\">\n        <div class=\"faq-item open\">\n          <div class=\"faq-q\">\n            What is a receipt maker?\n            <span class=\"faq-icon\">\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.8\"\n                stroke-linecap=\"round\"\n              >\n                <line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/>\n                <line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/>\n              <\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Invoice Fly's receipt maker helps you create professional receipts\n            online in minutes. Simply enter your transaction details, customer\n            information, and payment amount, and the tool automatically\n            generates a polished receipt ready to download or send to your\n            customer.\n          <\/div>\n        <\/div>\n\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Is this receipt generator free to use?\n            <span class=\"faq-icon\">\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.8\"\n                stroke-linecap=\"round\"\n              >\n                <line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/>\n                <line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/>\n              <\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Yes. Invoice Fly's free receipt maker lets you create professional\n            payment receipts online, customize them to your needs, and download\n            them in multiple formats. It's a quick and easy way to document\n            payments without starting from scratch.\n          <\/div>\n        <\/div>\n\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Can I create a payment receipt online?\n            <span class=\"faq-icon\">\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.8\"\n                stroke-linecap=\"round\"\n              >\n                <line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/>\n                <line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/>\n              <\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Absolutely. Invoice Fly's receipt maker allows you to create payment\n            receipts online by adding customer information, products or\n            services, payment details, and transaction amounts. Once complete,\n            you can download or send the receipt instantly.\n          <\/div>\n        <\/div>\n\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Can I download receipts as PDF files?\n            <span class=\"faq-icon\">\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.8\"\n                stroke-linecap=\"round\"\n              >\n                <line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/>\n                <line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/>\n              <\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Yes. Invoice Fly allows you to download receipts as PDF files,\n            making them easy to print, email, and store for your records. You\n            can also export receipts in other popular formats when needed.\n          <\/div>\n        <\/div>\n\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Can I create sales receipts for my business?\n            <span class=\"faq-icon\">\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.8\"\n                stroke-linecap=\"round\"\n              >\n                <line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/>\n                <line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/>\n              <\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Yes. Whether you're running a retail store, service business,\n            consulting company, or freelance operation, Invoice Fly makes it\n            easy to create professional sales receipts and provide customers\n            with proof of payment.\n          <\/div>\n        <\/div>\n\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            How do I send receipts directly to clients?\n            <span class=\"faq-icon\">\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.8\"\n                stroke-linecap=\"round\"\n              >\n                <line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/>\n                <line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/>\n              <\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Invoice Fly makes it easy to create and send professional receipts\n            in just a few clicks. Generate receipts online using our web-based\n            receipt maker, then email them directly to customers or download\n            them as PDF files for sharing. For even greater flexibility,\n            download the\n            <a\n              class=\"download_app\"\n              href=\"https:\/\/invoicefly.onelink.me\/AeUs\/qohijf8g\/\"\n              >Invoice Fly App<\/a\n            >\n            to create, manage, and send receipts from anywhere, at any time.\n          <\/div>\n        <\/div>\n\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Can restaurants and food businesses use this receipt maker?\n            <span class=\"faq-icon\">\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.8\"\n                stroke-linecap=\"round\"\n              >\n                <line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/>\n                <line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/>\n              <\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Absolutely. Restaurants, caf\u00e9s, food trucks, catering companies, and\n            other food businesses can use Invoice Fly's receipt maker to create\n            professional food receipts and payment receipts in just a few\n            clicks.\n          <\/div>\n        <\/div>\n\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Why use Invoice Fly's receipt maker?\n            <span class=\"faq-icon\">\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.8\"\n                stroke-linecap=\"round\"\n              >\n                <line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/>\n                <line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/>\n              <\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Invoice Fly helps businesses create professional receipts faster and\n            more efficiently. Instead of editing templates manually, you can\n            generate receipts online, customize them to match your business,\n            download them instantly, and send them directly to customers. It's\n            designed to save time, keep records organized, and simplify everyday\n            transactions.\n          <\/div>\n        <\/div>\n\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            Is a receipt proof of payment?\n            <span class=\"faq-icon\">\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.8\"\n                stroke-linecap=\"round\"\n              >\n                <line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"11\" \/>\n                <line x1=\"1\" y1=\"6\" x2=\"11\" y2=\"6\" \/>\n              <\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"faq-a\">\n            Yes. A receipt serves as proof that payment has been received for\n            products or services. With Invoice Fly, you can create professional\n            payment receipts that clearly document transactions and provide\n            customers with accurate records.\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================== FINAL CTA ==================== -->\n  <section class=\"final-cta\">\n    <div class=\"final-cta-wrap\">\n      <div class=\"final-cta-content\">\n        <h2>Ready to create your first free receipt?<\/h2>\n        <p>\n          Join 125,000+ American business owners who use Invoice Fly to create\n          professional receipts and keep every transaction documented. Free to\n          start, no credit card required.\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\"\n            target=\"_blank\"\n            rel=\"noopener\"\n          >\n            Start Creating Receipts Free\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\/pricing\/\"\n            class=\"btn btn-outline btn-lg\"\n            >View pricing<\/a\n          >\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/div>\n<!-- \/.ifig-widget -->\n\n<script>\n  (function () {\n    \"use strict\";\n\n    function setupFAQ() {\n      var items = document.querySelectorAll(\"#ifig-root .faq-q\");\n      items.forEach(function (q) {\n        if (q.dataset.ifigWired === \"1\") return;\n        q.dataset.ifigWired = \"1\";\n        q.addEventListener(\"click\", function () {\n          q.parentElement.classList.toggle(\"open\");\n        });\n      });\n    }\n\n    function init() {\n      var root = document.getElementById(\"ifig-root\");\n      if (!root) return false;\n      setupFAQ();\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(5);\n      });\n    } else {\n      tryInit(5);\n    }\n    window.addEventListener(\"load\", function () {\n      tryInit(2);\n    });\n  })();\n<\/script>\n\n<script>\n  \/* Interactive \"How to make a receipt\" \u2014 autoplaying step builder.\n     The 4 steps progressively assemble a live receipt on the left. *\/\n  (function () {\n    \"use strict\";\n\n    function setup() {\n      var root = document.getElementById(\"ifig-root\");\n      if (!root) return false;\n      var fx = root.querySelector(\"#howFx\");\n      if (!fx) return false;\n      if (fx.dataset.wired === \"1\") return true;\n\n      var rcpt = root.querySelector(\"#howRcpt\");\n      var stage = root.querySelector(\"#howStage\");\n      var glow = root.querySelector(\"#howGlow\");\n      var statusEl = root.querySelector(\"#howStatus\");\n      var steps = [].slice.call(root.querySelectorAll(\"#howSteps .step\"));\n      var segs = [].slice.call(root.querySelectorAll(\"#howSteps .seg\"));\n      var revs = [].slice.call(root.querySelectorAll(\"#howRcpt .rcpt-rev\"));\n      if (!rcpt || !steps.length) return true;\n      fx.dataset.wired = \"1\";\n\n      var reduce =\n        window.matchMedia &&\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n      var BLUE = \"radial-gradient(circle, rgba(20,94,233,.5), transparent 70%)\";\n      var GREEN = \"radial-gradient(circle, rgba(18,183,106,.5), transparent 70%)\";\n      var active = -1;\n\n      function render(i) {\n        if (i === active) return;\n        active = i;\n        var step = i + 1;\n        rcpt.setAttribute(\"data-step\", String(step));\n        rcpt.classList.toggle(\"is-branded\", step >= 3);\n        rcpt.classList.toggle(\"is-paid\", step >= 4);\n        statusEl.textContent = step >= 4 ? \"PAID\" : \"DRAFT\";\n        glow.style.background = step >= 4 ? GREEN : BLUE;\n        revs.forEach(function (r) {\n          var from = parseInt(r.getAttribute(\"data-from\"), 10);\n          r.classList.toggle(\"show\", step >= from);\n        });\n        steps.forEach(function (s, idx) {\n          s.classList.toggle(\"active\", idx === i);\n          s.setAttribute(\"aria-pressed\", idx === i ? \"true\" : \"false\");\n        });\n        segs.forEach(function (s, idx) {\n          s.classList.toggle(\"on\", idx <= i);\n        });\n      }\n\n      \/\/ click selects\/expands a step (Enter\/Space on the button fire click too)\n      steps.forEach(function (s, idx) {\n        s.addEventListener(\"click\", function () {\n          render(idx);\n        });\n      });\n\n      \/\/ 3D tilt parallax following the cursor\n      if (!reduce && stage) {\n        stage.addEventListener(\"mousemove\", function (e) {\n          var r = stage.getBoundingClientRect();\n          var px = (e.clientX - r.left) \/ r.width - 0.5;\n          var py = (e.clientY - r.top) \/ r.height - 0.5;\n          rcpt.style.setProperty(\"--ry\", (px * 6).toFixed(2) + \"deg\");\n          rcpt.style.setProperty(\"--rx\", (-py * 6).toFixed(2) + \"deg\");\n        });\n        stage.addEventListener(\"mouseleave\", function () {\n          rcpt.style.setProperty(\"--rx\", \"0deg\");\n          rcpt.style.setProperty(\"--ry\", \"0deg\");\n        });\n      }\n\n      render(0);\n      return true;\n    }\n\n    function tryInit(n) {\n      if (setup()) return;\n      if (n > 0)\n        setTimeout(function () {\n          tryInit(n - 1);\n        }, 200);\n    }\n\n    if (document.readyState === \"loading\") {\n      document.addEventListener(\"DOMContentLoaded\", function () {\n        tryInit(8);\n      });\n    } else {\n      tryInit(8);\n    }\n    window.addEventListener(\"load\", function () {\n      tryInit(2);\n    });\n  })();\n<\/script>\n\n<script>\n  \/* Testimonials \u2014 click a person on the right to swap the active review\n     (quote, author and the stat box) on the left. *\/\n  (function () {\n    \"use strict\";\n\n    function setup() {\n      var root = document.getElementById(\"ifig-root\");\n      if (!root) return false;\n      var sec = root.querySelector(\".testimonial\");\n      if (!sec) return false;\n      if (sec.dataset.tsWired === \"1\") return true;\n      var people = [].slice.call(sec.querySelectorAll(\".ts-person\"));\n      if (!people.length) return true;\n\n      var elHead = sec.querySelector(\".ts-headline\");\n      var elText = sec.querySelector(\".ts-text\");\n      var elAvatar = sec.querySelector(\".ts-avatar\");\n      var elName = sec.querySelector(\".ts-name\");\n      var elRole = sec.querySelector(\".ts-role\");\n      var elNum = sec.querySelector(\".ts-stat-num\");\n      var elLabel = sec.querySelector(\".ts-stat-label\");\n      var elQuote = sec.querySelector(\".ts-quote\");\n      var elSourceImg = sec.querySelector(\"#ifig-ts-source-img\");\n      sec.dataset.tsWired = \"1\";\n\n      function select(btn) {\n        people.forEach(function (p) {\n          var on = p === btn;\n          p.classList.toggle(\"active\", on);\n          p.setAttribute(\"aria-pressed\", on ? \"true\" : \"false\");\n        });\n        elHead.textContent = btn.getAttribute(\"data-headline\");\n        elText.textContent = btn.getAttribute(\"data-text\");\n        elName.textContent = btn.getAttribute(\"data-name\");\n        elRole.textContent = btn.getAttribute(\"data-role\");\n        elAvatar.textContent = btn.getAttribute(\"data-initials\");\n        elNum.innerHTML = btn.getAttribute(\"data-statnum\");\n        elLabel.textContent = btn.getAttribute(\"data-statlabel\");\n\n        \/\/ Each review has its own fixed review-platform logo + link\n        var url = btn.getAttribute(\"data-review-url\");\n        var logo = btn.getAttribute(\"data-review-logo\");\n        var name = btn.getAttribute(\"data-review-name\");\n        if (elQuote && url) {\n          elQuote.href = url;\n          elQuote.setAttribute(\n            \"aria-label\",\n            \"Read Invoice Fly reviews on \" + name,\n          );\n        }\n        if (elSourceImg && logo) {\n          elSourceImg.src = logo;\n          elSourceImg.alt = name;\n        }\n      }\n\n      people.forEach(function (p) {\n        p.addEventListener(\"click\", function () {\n          select(p);\n        });\n      });\n\n      \/\/ sync the left card with whichever person starts active\n      select(sec.querySelector(\".ts-person.active\") || people[0]);\n      return true;\n    }\n\n    function tryInit(n) {\n      if (setup()) return;\n      if (n > 0)\n        setTimeout(function () {\n          tryInit(n - 1);\n        }, 200);\n    }\n\n    if (document.readyState === \"loading\") {\n      document.addEventListener(\"DOMContentLoaded\", function () {\n        tryInit(8);\n      });\n    } else {\n      tryInit(8);\n    }\n    window.addEventListener(\"load\", function () {\n      tryInit(2);\n    });\n  })();\n<\/script>\n\n<script>\n  \/* Default the wib document-type selects to Receipt (the widget renders\n     duplicate ids, so target every match, not just the first). *\/\n  (function () {\n    function apply() {\n      var sels = document.querySelectorAll(\n        \"#wib-ed-invoice-type, .wib-ed-invoice-type, select.wib-top-select\",\n      );\n      var did = false;\n      for (var k = 0; k < sels.length; k++) {\n        var sel = sels[k];\n        if (!sel.options || !sel.options.length) continue;\n        for (var i = 0; i < sel.options.length; i++) {\n          if (sel.options[i].value === \"Receipt\") {\n            if (sel.selectedIndex !== i) {\n              sel.selectedIndex = i;\n              sel.dispatchEvent(\n                new Event(\"input\", { bubbles: true, composed: true }),\n              );\n              sel.dispatchEvent(\n                new Event(\"change\", { bubbles: true, composed: true }),\n              );\n            }\n            did = true;\n            break;\n          }\n        }\n      }\n      if (did && window.console) console.info(\"[receipt-default] applied\");\n      return did;\n    }\n    var n = 0;\n    var t = setInterval(function () {\n      n++;\n      if ((apply() && n > 6) || n > 50) clearInterval(t);\n    }, 250);\n  })();\n<\/script>\n\n<script>\n  (function () {\n    \"use strict\";\n\n    try {\n      var tabs = document.querySelectorAll(\".if-nav-tab[data-menu]\");\n      var panels = document.querySelectorAll(\".if-megamenu\");\n      var openPanel = null;\n      var closeTimeout = null;\n      var isTouchDevice = window.matchMedia(\"(hover: none)\").matches;\n\n      function openMenu(name) {\n        clearTimeout(closeTimeout);\n        panels.forEach(function (p) {\n          p.classList.toggle(\"is-open\", p.dataset.panel === name);\n        });\n        tabs.forEach(function (t) {\n          var isThis = t.dataset.menu === name;\n          t.classList.toggle(\"is-open\", isThis);\n          t.setAttribute(\"aria-expanded\", isThis ? \"true\" : \"false\");\n        });\n        openPanel = name;\n      }\n      function closeMenu(immediate) {\n        var doClose = function () {\n          panels.forEach(function (p) {\n            p.classList.remove(\"is-open\");\n          });\n          tabs.forEach(function (t) {\n            t.classList.remove(\"is-open\");\n            t.setAttribute(\"aria-expanded\", \"false\");\n          });\n          openPanel = null;\n        };\n        if (immediate) {\n          clearTimeout(closeTimeout);\n          doClose();\n        } else {\n          closeTimeout = setTimeout(doClose, 150);\n        }\n      }\n\n      tabs.forEach(function (tab) {\n        if (!isTouchDevice) {\n          tab.addEventListener(\"mouseenter\", function () {\n            openMenu(tab.dataset.menu);\n          });\n          tab.addEventListener(\"mouseleave\", function () {\n            closeMenu();\n          });\n        }\n        tab.addEventListener(\"click\", function (e) {\n          e.preventDefault();\n          if (openPanel === tab.dataset.menu) closeMenu(true);\n          else openMenu(tab.dataset.menu);\n        });\n        tab.addEventListener(\"keydown\", function (e) {\n          if (e.key === \"ArrowDown\" || e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            openMenu(tab.dataset.menu);\n          }\n        });\n      });\n      panels.forEach(function (panel) {\n        if (!isTouchDevice) {\n          panel.addEventListener(\"mouseenter\", function () {\n            clearTimeout(closeTimeout);\n          });\n          panel.addEventListener(\"mouseleave\", function () {\n            closeMenu();\n          });\n        }\n        panel.addEventListener(\"keydown\", function (e) {\n          if (e.key === \"Escape\") {\n            var tabName = panel.dataset.panel;\n            var tab = document.querySelector(\n              '.if-nav-tab[data-menu=\"' + tabName + '\"]',\n            );\n            closeMenu(true);\n            if (tab) tab.focus();\n          }\n        });\n        panel.addEventListener(\"click\", function (e) {\n          if (e.target.closest(\"a[href]\")) closeMenu(true);\n        });\n      });\n      document.addEventListener(\"click\", function (e) {\n        if (\n          openPanel &&\n          !e.target.closest(\".if-nav-tab\") &&\n          !e.target.closest(\".if-megamenu\")\n        ) {\n          closeMenu(true);\n        }\n      });\n      var scrollCloseTimer = null;\n      window.addEventListener(\n        \"scroll\",\n        function () {\n          if (!openPanel) return;\n          clearTimeout(scrollCloseTimer);\n          scrollCloseTimer = setTimeout(function () {\n            closeMenu(true);\n          }, 100);\n        },\n        { passive: true },\n      );\n    } catch (e) {\n      console.error(\"megamenu err\", e);\n    }\n\n    \/* ---- Language switching (TranslatePress URL structure) ---- *\/\n    try {\n      var IF_LANG_MAP = {\n        EN: \"\",\n        ES: \"es\",\n        FR: \"fr\",\n        DE: \"de\",\n        PT: \"pt\",\n        IT: \"it\",\n      };\n\n      function ifDetectLang() {\n        var pathname = window.location.pathname;\n        var codes = Object.keys(IF_LANG_MAP);\n        for (var i = 0; i < codes.length; i++) {\n          var prefix = IF_LANG_MAP[codes[i]];\n          if (\n            prefix &&\n            (pathname === \"\/\" + prefix ||\n              pathname.startsWith(\"\/\" + prefix + \"\/\"))\n          ) {\n            return codes[i];\n          }\n        }\n        return \"EN\";\n      }\n\n      function ifLangUrl(code) {\n        var prefix = IF_LANG_MAP[code] || \"\";\n        var pathname = window.location.pathname;\n        var allPrefixes = Object.values(IF_LANG_MAP).filter(Boolean);\n        for (var i = 0; i < allPrefixes.length; i++) {\n          var p = \"\/\" + allPrefixes[i];\n          if (pathname === p) {\n            pathname = \"\/\";\n            break;\n          } else if (pathname.startsWith(p + \"\/\")) {\n            pathname = pathname.substring(p.length);\n            break;\n          }\n        }\n        var newPath = prefix ? \"\/\" + prefix + pathname : pathname;\n        return (\n          window.location.origin +\n          newPath +\n          window.location.search +\n          window.location.hash\n        );\n      }\n\n      var activeLang = ifDetectLang();\n\n      var langWrap = document.getElementById(\"ifLang\");\n      var langTrigger = document.getElementById(\"ifLangTrigger\");\n      var langCurrent = document.getElementById(\"ifLangCurrent\");\n      if (langWrap && langTrigger) {\n        var langOptions = langWrap.querySelectorAll(\".if-lang-option\");\n\n        langOptions.forEach(function (opt) {\n          var code = opt.getAttribute(\"data-lang\");\n          opt.classList.toggle(\"is-current\", code === activeLang);\n        });\n        if (langCurrent) langCurrent.textContent = activeLang;\n\n        function closeLang() {\n          langWrap.classList.remove(\"is-open\");\n          langTrigger.setAttribute(\"aria-expanded\", \"false\");\n        }\n        function openLang() {\n          langWrap.classList.add(\"is-open\");\n          langTrigger.setAttribute(\"aria-expanded\", \"true\");\n        }\n\n        langTrigger.addEventListener(\"click\", function (e) {\n          e.preventDefault();\n          e.stopPropagation();\n          if (langWrap.classList.contains(\"is-open\")) closeLang();\n          else openLang();\n        });\n\n        langOptions.forEach(function (opt) {\n          opt.addEventListener(\"click\", function (e) {\n            e.preventDefault();\n            var code = opt.getAttribute(\"data-lang\");\n            window.location.href = ifLangUrl(code);\n          });\n        });\n\n        document.addEventListener(\"click\", function (e) {\n          if (!langWrap.contains(e.target)) closeLang();\n        });\n\n        document.addEventListener(\"keydown\", function (e) {\n          if (e.key === \"Escape\" && langWrap.classList.contains(\"is-open\")) {\n            closeLang();\n            langTrigger.focus();\n          }\n        });\n      }\n    } catch (e) {\n      console.error(\"lang err\", e);\n    }\n\n    try {\n      var mobileLangTrigger = document.getElementById(\"ifMobileLangTrigger\");\n      var mobileLangCurrent = document.getElementById(\"ifMobileLangCurrent\");\n      var mobileLangPanel = document.getElementById(\"ifMobileLangPanel\");\n      if (mobileLangTrigger && mobileLangPanel) {\n        var mobileLangWrap = mobileLangTrigger.closest(\".if-mobile-utilities\");\n        var mobileLangOptions = mobileLangPanel.querySelectorAll(\n          \".if-mobile-lang-option\",\n        );\n\n        var mActiveLang = typeof activeLang !== \"undefined\" ? activeLang : \"EN\";\n        mobileLangOptions.forEach(function (opt) {\n          var code = opt.getAttribute(\"data-lang\");\n          opt.classList.toggle(\"is-current\", code === mActiveLang);\n        });\n        if (mobileLangCurrent) {\n          var IF_LANG_NAMES = {\n            EN: \"English\",\n            ES: \"Espa\u00f1ol\",\n            FR: \"Fran\u00e7ais\",\n            DE: \"Deutsch\",\n            PT: \"Portugu\u00eas\",\n            IT: \"Italiano\",\n          };\n          mobileLangCurrent.textContent =\n            IF_LANG_NAMES[mActiveLang] || \"English\";\n        }\n\n        mobileLangTrigger.addEventListener(\"click\", function (e) {\n          e.preventDefault();\n          var isOpen = mobileLangWrap.classList.toggle(\"is-lang-open\");\n          mobileLangTrigger.setAttribute(\n            \"aria-expanded\",\n            isOpen ? \"true\" : \"false\",\n          );\n        });\n\n        mobileLangOptions.forEach(function (opt) {\n          opt.addEventListener(\"click\", function (e) {\n            e.preventDefault();\n            var code = opt.getAttribute(\"data-lang\");\n            window.location.href = ifLangUrl(code);\n          });\n        });\n      }\n    } catch (e) {\n      console.error(\"mobile lang err\", e);\n    }\n\n    try {\n      var burger = document.getElementById(\"ifBurger\");\n      var overlay = document.getElementById(\"ifMobileOverlay\");\n      var stack = document.getElementById(\"ifMobileStack\");\n      if (!burger || !stack) return;\n\n      var screens = stack.querySelectorAll(\".if-mobile-screen\");\n      var history = [\"root\"];\n\n      function openMobile() {\n        document.body.classList.add(\"if-mobile-open\", \"if-no-scroll\");\n        document.documentElement.classList.add(\"if-mobile-open\");\n      }\n      function closeMobile() {\n        document.body.classList.remove(\"if-mobile-open\", \"if-no-scroll\");\n        document.documentElement.classList.remove(\"if-mobile-open\");\n        setTimeout(function () {\n          history = [\"root\"];\n          render();\n        }, 350);\n      }\n      function render() {\n        var current = history[history.length - 1];\n        var prev = history.length > 1 ? history[history.length - 2] : null;\n        screens.forEach(function (s) {\n          s.classList.remove(\"is-active\", \"is-prev\");\n          if (s.dataset.screen === current) s.classList.add(\"is-active\");\n          else if (s.dataset.screen === prev) s.classList.add(\"is-prev\");\n        });\n        var body = stack.querySelector(\n          \".if-mobile-screen.is-active .if-mobile-body\",\n        );\n        if (body) body.scrollTop = 0;\n      }\n      function gotoScreen(name) {\n        if (!name) return;\n        history.push(name);\n        render();\n      }\n      function back() {\n        if (history.length <= 1) return;\n        history.pop();\n        render();\n      }\n\n      burger.addEventListener(\"click\", function (e) {\n        e.preventDefault();\n        e.stopPropagation();\n        openMobile();\n      });\n      if (overlay) overlay.addEventListener(\"click\", closeMobile);\n\n      var menu = document.getElementById(\"ifMobileMenu\");\n      if (menu) {\n        menu.addEventListener(\"click\", function (e) {\n          var closeBtn = e.target.closest(\"[data-mobile-close]\");\n          if (closeBtn) {\n            e.preventDefault();\n            closeMobile();\n            return;\n          }\n          var backBtn = e.target.closest(\"[data-back]\");\n          if (backBtn) {\n            e.preventDefault();\n            back();\n            return;\n          }\n          var gotoBtn = e.target.closest(\"[data-goto]\");\n          if (gotoBtn) {\n            e.preventDefault();\n            gotoScreen(gotoBtn.getAttribute(\"data-goto\"));\n            return;\n          }\n          var link = e.target.closest(\"a[href]\");\n          if (link) setTimeout(closeMobile, 150);\n        });\n      }\n      window.addEventListener(\"resize\", function () {\n        if (window.innerWidth > 1100) closeMobile();\n      });\n      document.addEventListener(\"keydown\", function (e) {\n        if (\n          e.key === \"Escape\" &&\n          document.body.classList.contains(\"if-mobile-open\")\n        ) {\n          if (history.length > 1) back();\n          else closeMobile();\n        }\n      });\n    } catch (e) {\n      console.error(\"mobile err\", e);\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 \/ Free Generators \/ Free Receipt Generator Free Receipt Generator Create professional payment receipts online in minutes. Use our free receipt maker to customize, download, print, or email receipts for customers, payments, sales, and business transactions. Works with payments by \u2014 How to make a receipt Create a free receipt in [&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-97528","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 Generator 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 Generator test HTML\" \/>\n<meta property=\"og:description\" content=\"Home \/ Free Resources \/ Free Generators \/ Free Receipt Generator Free Receipt Generator Create professional payment receipts online in minutes. Use our free receipt maker to customize, download, print, or email receipts for customers, payments, sales, and business transactions. Works with payments by \u2014 How to make a receipt Create a free receipt in [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/invoicefly.com\/es\/receipt-generator-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-19T16:21:22+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=\"58 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/invoicefly.com\/receipt-generator-test-html\/\",\"url\":\"https:\/\/invoicefly.com\/receipt-generator-test-html\/\",\"name\":\"Receipt Generator test HTML &#8211; Invoice Fly\",\"isPartOf\":{\"@id\":\"https:\/\/invoicefly.com\/#website\"},\"datePublished\":\"2026-06-12T21:25:56+00:00\",\"dateModified\":\"2026-06-19T16:21:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/invoicefly.com\/receipt-generator-test-html\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/invoicefly.com\/receipt-generator-test-html\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/invoicefly.com\/receipt-generator-test-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Invoice Fly\",\"item\":\"https:\/\/invoicefly.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Receipt Generator 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 Generator test HTML &#8211; Invoice Fly","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"es_ES","og_type":"article","og_title":"Receipt Generator test HTML","og_description":"Home \/ Free Resources \/ Free Generators \/ Free Receipt Generator Free Receipt Generator Create professional payment receipts online in minutes. Use our free receipt maker to customize, download, print, or email receipts for customers, payments, sales, and business transactions. Works with payments by \u2014 How to make a receipt Create a free receipt in [&hellip;]","og_url":"https:\/\/invoicefly.com\/es\/receipt-generator-test-html\/","og_site_name":"Invoice Fly","article_publisher":"https:\/\/www.facebook.com\/invoiceflyapp\/","article_modified_time":"2026-06-19T16:21:22+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":"58 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/invoicefly.com\/receipt-generator-test-html\/","url":"https:\/\/invoicefly.com\/receipt-generator-test-html\/","name":"Receipt Generator test HTML &#8211; Invoice Fly","isPartOf":{"@id":"https:\/\/invoicefly.com\/#website"},"datePublished":"2026-06-12T21:25:56+00:00","dateModified":"2026-06-19T16:21:22+00:00","breadcrumb":{"@id":"https:\/\/invoicefly.com\/receipt-generator-test-html\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/invoicefly.com\/receipt-generator-test-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/invoicefly.com\/receipt-generator-test-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Invoice Fly","item":"https:\/\/invoicefly.com\/"},{"@type":"ListItem","position":2,"name":"Receipt Generator 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":"Professional Invoice Templates by Invoice Fly","descripcion_invoice_template_seo":"<p>A great invoice doesn\u2019t just list numbers, it reflects your brand and makes it easy for clients to pay.<\/p>\n<p>With Invoice Fly\u2019s free invoice templates, you can customize and download professional invoices in Word, Excel, PDF, Google Docs, or Google Sheets in minutes. Add your logo, edit your details, and create a polished invoice template ready to send to your clients.<\/p>\n<p>Whether you\u2019re a contractor, freelancer, consultant, agency, or growing business, Invoice Fly helps you invoice confidently across industries. \u2028\u2028And when you need more flexibility, the Invoice Fly app lets you generate invoices on the go, track payments, save client details, and manage your invoicing workflow in one place &#8211; wherever your work takes you.<\/p>\n<p>From editable invoice templates to a full invoice generator, everything is designed to help you bill professionally and get paid faster.<\/p>\n<p>Get the Invoice Fly app for free and manage your invoicing from anywhere.<\/p>\n","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\/97528","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=97528"}],"version-history":[{"count":85,"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/pages\/97528\/revisions"}],"predecessor-version":[{"id":98159,"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/pages\/97528\/revisions\/98159"}],"wp:attachment":[{"href":"https:\/\/invoicefly.com\/es\/wp-json\/wp\/v2\/media?parent=97528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}