[{"data":1,"prerenderedAt":105},["ShallowReactive",2],{"feature-product-order-form":3},{"head":4,"jsonld":59,"components":60},{"title":5,"link":6,"meta":7},"Online Order Form Builder with Payments and Inventory",[],[8,11,14,16,19,22,24,26,29,32,34,37,39,41,43,45,48,51,53],{"property":9,"content":10},"article:modified_time","2026-05-27T14:49:00.459Z",{"hid":12,"name":12,"content":13},"description","Build an online order form in minutes. Add products with variants, stock limits, and payments. Free plan, no Shopify store required.",{"hid":15,"name":15,"content":5},"og:site_name",{"hid":17,"property":17,"content":18},"og:type","website",{"hid":20,"property":20,"content":21},"og:url","https://formester.com/features/product-order-form/",{"hid":23,"property":23,"content":5},"og:title",{"hid":25,"property":25,"content":13},"og:description",{"hid":27,"property":27,"content":28},"og:image","https://formester.com/formester-logo-meta-image.png",{"hid":30,"name":30,"content":31},"og:image:alt","Formester Logo",{"hid":33,"name":33,"content":21},"twitter:url",{"name":35,"content":36},"twitter:site","@_formester_",{"hid":38,"name":38,"content":5},"twitter:title",{"hid":40,"name":40,"content":13},"twitter:description",{"hid":42,"name":42,"content":28},"twitter:image",{"hid":44,"name":44,"content":31},"twitter:image:alt",{"hid":46,"name":46,"content":47},"twitter:card","summary_large_image",{"hid":49,"name":49,"content":50},"apple-mobile-web-app-title","Formester",{"hid":52,"name":52,"property":27,"content":28},"image",{"hid":54,"name":54,"content":55},"keywords",[56,57,58],"order form template","product order form","ecommerce form builder",[],[61,66,75,78,81,84,87,90,93,96,99,102],{"id":62,"__component":63,"markup":64,"useContainer":65},233,"micro-components.raw-html","\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-pof-hero-v2 a { text-decoration: none !important; }\n\n.fmstr-cmp-pof-hero-v2 {\n--c-bg: #ffffff;\n--c-soft: #f9fafb;\n--c-tint: #f7f3ff;\n--c-tint-deep: #ede4ff;\n--c-edge: #e4d7ff;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-100: #ede4ff;\n--c-violet-300: #c4b1ee;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-success: #12b76a;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.03);\n--c-shadow-lg: 0 20px 50px -12px rgba(16,24,40,.18), 0 8px 20px -8px rgba(16,24,40,.08);\n\nbackground: radial-gradient(ellipse at top left, var(--c-tint) 0%, #ffffff 55%);\npadding: 88px 24px 80px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\nposition: relative;\noverflow: hidden;\n}\n.fmstr-cmp-pof-hero-v2 *, .fmstr-cmp-pof-hero-v2 *::before, .fmstr-cmp-pof-hero-v2 *::after { box-sizing: border-box; }\n.fmstr-cmp-pof-hero-v2 > *, .fmstr-cmp-pof-hero-v2 > * > * { min-width: 0; }\n\n.fmstr-cmp-pof-hero-v2__container {\nmax-width: 1180px;\nmargin: 0 auto;\ndisplay: grid;\ngrid-template-columns: 1.05fr 1fr;\ngap: 64px;\nalign-items: center;\n}\n\n.fmstr-cmp-pof-hero-v2__badge {\ndisplay: inline-flex;\nalign-items: center;\ngap: 8px;\npadding: 6px 14px;\nborder-radius: 999px;\nbackground: #ffffff;\nborder: 1px solid var(--c-edge);\ncolor: var(--c-violet-700);\nfont-size: 13px;\nfont-weight: 600;\nmargin-bottom: 22px;\nbox-shadow: var(--c-shadow-sm);\n}\n.fmstr-cmp-pof-hero-v2__badge-dot {\nwidth: 8px; height: 8px; border-radius: 50%;\nbackground: var(--c-violet-500);\n}\n\n.fmstr-cmp-pof-hero-v2__h1 {\nmargin: 0 0 18px;\nfont-size: clamp(36px, 4.6vw, 54px);\nline-height: 1.07;\nletter-spacing: -0.028em;\nfont-weight: 700;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-hero-v2__h1-accent {\ncolor: var(--c-violet-600);\nbackground: linear-gradient(135deg, var(--c-violet-500), var(--c-violet-700));\n-webkit-background-clip: text;\nbackground-clip: text;\n-webkit-text-fill-color: transparent;\n}\n\n.fmstr-cmp-pof-hero-v2__sub {\nmargin: 0 0 32px;\nmax-width: 540px;\nfont-size: 18px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n\n.fmstr-cmp-pof-hero-v2__ctas {\ndisplay: inline-flex;\nflex-wrap: wrap;\ngap: 12px;\nmargin-bottom: 28px;\n}\n\n.fmstr-cmp-pof-hero-v2__cta-primary {\ndisplay: inline-flex;\nalign-items: center;\ngap: 8px;\npadding: 14px 26px;\nborder-radius: 10px;\nbackground: var(--c-violet-500) !important;\ncolor: #ffffff !important;\nfont-weight: 600;\nfont-size: 15.5px;\ntext-decoration: none !important;\nborder: 1px solid var(--c-violet-500);\nbox-shadow: 0 6px 16px rgba(127, 86, 217, .25);\ntransition: background .15s ease, transform .15s ease, box-shadow .15s ease;\n}\n.fmstr-cmp-pof-hero-v2__cta-primary:hover {\nbackground: var(--c-violet-600) !important;\ntransform: translateY(-1px);\nbox-shadow: 0 10px 22px rgba(127, 86, 217, .3);\n}\n\n.fmstr-cmp-pof-hero-v2__cta-secondary {\ndisplay: inline-flex;\nalign-items: center;\ngap: 8px;\npadding: 14px 22px;\nborder-radius: 10px;\nbackground: #ffffff !important;\ncolor: var(--c-fg-1) !important;\nfont-weight: 600;\nfont-size: 15.5px;\ntext-decoration: none !important;\nborder: 1px solid var(--c-border);\ntransition: border-color .15s ease, transform .15s ease;\n}\n.fmstr-cmp-pof-hero-v2__cta-secondary:hover {\nborder-color: var(--c-violet-500);\ncolor: var(--c-violet-600) !important;\ntransform: translateY(-1px);\n}\n\n.fmstr-cmp-pof-hero-v2__trust {\ndisplay: flex;\nflex-wrap: wrap;\ngap: 16px 28px;\nfont-size: 13px;\ncolor: var(--c-fg-3);\n}\n.fmstr-cmp-pof-hero-v2__trust-item {\ndisplay: inline-flex;\nalign-items: center;\ngap: 6px;\n}\n.fmstr-cmp-pof-hero-v2__trust-check {\ncolor: var(--c-success);\nflex-shrink: 0;\n}\n\n/* Right side: order-form mockup */\n.fmstr-cmp-pof-hero-v2__visual {\nposition: relative;\n}\n\n.fmstr-cmp-pof-hero-v2__form {\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nborder-radius: 20px;\nbox-shadow: var(--c-shadow-lg);\npadding: 24px;\nposition: relative;\n}\n\n.fmstr-cmp-pof-hero-v2__form-header {\ndisplay: flex;\nalign-items: center;\njustify-content: space-between;\nmargin-bottom: 18px;\npadding-bottom: 16px;\nborder-bottom: 1px solid var(--c-border);\n}\n.fmstr-cmp-pof-hero-v2__form-brand { font-size: 13px; color: var(--c-fg-3); font-weight: 600; }\n.fmstr-cmp-pof-hero-v2__form-step { font-size: 12px; color: var(--c-violet-700); font-weight: 600; background: var(--c-violet-100); padding: 3px 10px; border-radius: 999px; }\n\n.fmstr-cmp-pof-hero-v2__product {\ndisplay: grid;\ngrid-template-columns: 80px 1fr;\ngap: 16px;\nalign-items: center;\npadding: 14px;\nbackground: var(--c-soft);\nborder-radius: 12px;\nmargin-bottom: 16px;\n}\n.fmstr-cmp-pof-hero-v2__product-img {\nwidth: 80px;\nheight: 80px;\nborder-radius: 10px;\nbackground: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nfont-size: 36px;\n}\n.fmstr-cmp-pof-hero-v2__product-name { font-size: 15px; font-weight: 700; color: var(--c-fg-1); margin: 0 0 4px; }\n.fmstr-cmp-pof-hero-v2__product-meta { font-size: 13px; color: var(--c-fg-3); margin: 0; }\n.fmstr-cmp-pof-hero-v2__product-price { font-size: 16px; font-weight: 700; color: var(--c-violet-700); margin: 6px 0 0; }\n\n.fmstr-cmp-pof-hero-v2__field { margin-bottom: 14px; }\n.fmstr-cmp-pof-hero-v2__field-label { font-size: 12px; font-weight: 600; color: var(--c-fg-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; display: block; }\n.fmstr-cmp-pof-hero-v2__pills {\ndisplay: flex;\nflex-wrap: wrap;\ngap: 6px;\n}\n.fmstr-cmp-pof-hero-v2__pill {\npadding: 7px 14px;\nborder-radius: 999px;\nborder: 1px solid var(--c-border);\nfont-size: 13px;\nfont-weight: 600;\ncolor: var(--c-fg-2);\nbackground: #ffffff;\n}\n.fmstr-cmp-pof-hero-v2__pill--active {\nbackground: var(--c-violet-600);\ncolor: #ffffff;\nborder-color: var(--c-violet-600);\n}\n\n.fmstr-cmp-pof-hero-v2__qty {\ndisplay: inline-flex;\nalign-items: center;\ngap: 12px;\npadding: 6px 8px;\nborder: 1px solid var(--c-border);\nborder-radius: 10px;\nbackground: #ffffff;\n}\n.fmstr-cmp-pof-hero-v2__qty-btn {\nwidth: 26px; height: 26px;\nborder-radius: 6px;\nbackground: var(--c-soft);\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\nfont-size: 16px;\ncolor: var(--c-fg-2);\nfont-weight: 600;\n}\n.fmstr-cmp-pof-hero-v2__qty-val { font-size: 15px; font-weight: 700; min-width: 16px; text-align: center; }\n\n.fmstr-cmp-pof-hero-v2__total {\ndisplay: flex;\nalign-items: baseline;\njustify-content: space-between;\npadding: 14px 0;\nborder-top: 1px solid var(--c-border);\nmargin-top: 4px;\n}\n.fmstr-cmp-pof-hero-v2__total-label { font-size: 13px; color: var(--c-fg-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }\n.fmstr-cmp-pof-hero-v2__total-amt { font-size: 24px; font-weight: 700; color: var(--c-fg-1); letter-spacing: -0.02em; }\n\n.fmstr-cmp-pof-hero-v2__pay-btn {\nmargin-top: 14px;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\ngap: 8px;\npadding: 13px;\nborder-radius: 10px;\nbackground: linear-gradient(135deg, #635BFF, #4a3ee8);\ncolor: #ffffff;\nfont-size: 14.5px;\nfont-weight: 600;\n}\n\n/* Floating accents */\n.fmstr-cmp-pof-hero-v2__chip {\nposition: absolute;\nbackground: #ffffff;\nborder: 1px solid var(--c-edge);\nbox-shadow: var(--c-shadow-lg);\nborder-radius: 12px;\npadding: 10px 14px;\ndisplay: flex;\nalign-items: center;\ngap: 10px;\nfont-size: 13px;\nfont-weight: 600;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-hero-v2__chip-icon {\nwidth: 28px; height: 28px;\nborder-radius: 8px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\n}\n.fmstr-cmp-pof-hero-v2__chip--stock {\nbottom: -16px; left: -16px;\n}\n\n@media (max-width: 980px) {\n.fmstr-cmp-pof-hero-v2__container { grid-template-columns: 1fr; gap: 48px; }\n.fmstr-cmp-pof-hero-v2__visual { max-width: 460px; margin: 0 auto; width: 100%; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-pof-hero-v2 { padding: 80px 16px 56px; }\n.fmstr-cmp-pof-hero-v2__badge { margin-bottom: 28px; padding: 6px 12px; font-size: 12.5px; }\n.fmstr-cmp-pof-hero-v2__sub { font-size: 16px; }\n.fmstr-cmp-pof-hero-v2__cta-primary, .fmstr-cmp-pof-hero-v2__cta-secondary { padding: 13px 20px; min-height: 44px; }\n.fmstr-cmp-pof-hero-v2__trust { flex-direction: column; gap: 10px; }\n.fmstr-cmp-pof-hero-v2__trust-item { font-size: 13.5px; }\n}\n@media (max-width: 540px) {\n.fmstr-cmp-pof-hero-v2__ctas { flex-direction: column; align-items: stretch; width: 100%; }\n.fmstr-cmp-pof-hero-v2__cta-primary, .fmstr-cmp-pof-hero-v2__cta-secondary { justify-content: center; }\n.fmstr-cmp-pof-hero-v2__chip { display: none; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-pof-hero-v2\" aria-labelledby=\"fmstr-cmp-pof-hero-v2-h1\">\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__container\">\n\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__content\">\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__badge\">\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__badge-dot\" aria-hidden=\"true\">\u003C/span>\nFree plan. No credit card.\n\u003C/span>\n\n\u003Ch1 class=\"fmstr-cmp-pof-hero-v2__h1\" id=\"fmstr-cmp-pof-hero-v2-h1\">Build an online order form with \u003Cspan class=\"fmstr-cmp-pof-hero-v2__h1-accent\">payments and inventory\u003C/span> in five minutes\u003C/h1>\n\n\u003Cp class=\"fmstr-cmp-pof-hero-v2__sub\">Drag in the Product Catalogue element, add your products, set stock, and start collecting payments. No Shopify store, no developer, no monthly minimum.\u003C/p>\n\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__ctas\">\n\u003Ca class=\"fmstr-cmp-pof-hero-v2__cta-primary\" href=\"https://app.formester.com/users/sign_up\">Start for free\u003C/a>\n\u003Ca class=\"fmstr-cmp-pof-hero-v2__cta-secondary\" href=\"https://formester.com/templates/product-order-form-33229/\">See a live example\u003C/a>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__trust\">\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__trust-item\">\n\u003Csvg class=\"fmstr-cmp-pof-hero-v2__trust-check\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"20 6 9 17 4 12\">\u003C/polyline>\u003C/svg>\n10 forms + 100 responses free\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__trust-item\">\n\u003Csvg class=\"fmstr-cmp-pof-hero-v2__trust-check\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"20 6 9 17 4 12\">\u003C/polyline>\u003C/svg>\nStripe, PayPal, Authorize.Net\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__trust-item\">\n\u003Csvg class=\"fmstr-cmp-pof-hero-v2__trust-check\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"20 6 9 17 4 12\">\u003C/polyline>\u003C/svg>\nCancel anytime\n\u003C/span>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__visual\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__form\">\n\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__form-header\">\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__form-brand\">order.yourbakery.com\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__form-step\">Step 1 of 2\u003C/span>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__product\">\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__product-img\">🥐\u003C/div>\n\u003Cdiv>\n\u003Cp class=\"fmstr-cmp-pof-hero-v2__product-name\">Almond Croissant\u003C/p>\n\u003Cp class=\"fmstr-cmp-pof-hero-v2__product-meta\">Made fresh daily\u003C/p>\n\u003Cp class=\"fmstr-cmp-pof-hero-v2__product-price\">$4.50\u003C/p>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__field\">\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__field-label\">Size\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__pills\">\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__pill\">Small\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__pill fmstr-cmp-pof-hero-v2__pill--active\">Medium\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__pill\">Large\u003C/span>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__field\">\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__field-label\">Quantity\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__qty\">\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__qty-btn\">−\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__qty-val\">2\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__qty-btn\">+\u003C/span>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__total\">\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__total-label\">Total\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__total-amt\">$9.00\u003C/span>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__pay-btn\">\n\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Crect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\">\u003C/rect>\u003Cline x1=\"2\" y1=\"10\" x2=\"22\" y2=\"10\">\u003C/line>\u003C/svg>\nPay $9.00\n\u003C/div>\n\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-hero-v2__chip fmstr-cmp-pof-hero-v2__chip--stock\">\n\u003Cspan class=\"fmstr-cmp-pof-hero-v2__chip-icon\">\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M3 7l9-4 9 4M3 7v10l9 4 9-4V7M3 7l9 4 9-4M12 11v10\">\u003C/path>\u003C/svg>\n\u003C/span>\n5 left in stock\n\u003C/div>\n\n\u003C/div>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",false,{"id":67,"__component":68,"label":69,"heading":70,"description":70,"showTrustBadges":65,"rawHtml":70,"title":71,"logos":72},436,"macro-components.trust-seals","Trusted by leading organisations",null,[],[73],{"id":74,"imageAlt":70,"imageUrl":70,"width":70,"height":70,"image":70},4017,{"id":76,"__component":63,"markup":77,"useContainer":65},234,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-pof-uc-v2 a { text-decoration: none !important; }\n\n.fmstr-cmp-pof-uc-v2 {\n--c-bg: #ffffff;\n--c-soft: #f9fafb;\n--c-tint: #f7f3ff;\n--c-edge: #e4d7ff;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-100: #ede4ff;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-success: #12b76a;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n--c-shadow-md: 0 8px 24px rgba(16,24,40,.08);\n\nbackground: #ffffff;\npadding: 88px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-uc-v2 *, .fmstr-cmp-pof-uc-v2 *::before, .fmstr-cmp-pof-uc-v2 *::after { box-sizing: border-box; }\n.fmstr-cmp-pof-uc-v2 > *, .fmstr-cmp-pof-uc-v2 > * > * { min-width: 0; }\n\n.fmstr-cmp-pof-uc-v2__container { max-width: 1180px; margin: 0 auto; }\n\n.fmstr-cmp-pof-uc-v2__header {\nmax-width: 760px;\nmargin: 0 auto 48px;\ntext-align: center;\n}\n.fmstr-cmp-pof-uc-v2__eyebrow {\ndisplay: inline-block;\nmargin: 0 0 14px;\npadding: 4px 12px;\nborder-radius: 999px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\nfont-size: 12px;\nfont-weight: 700;\ntext-transform: uppercase;\nletter-spacing: 0.08em;\n}\n.fmstr-cmp-pof-uc-v2__h2 {\nmargin: 0 0 14px;\nfont-size: clamp(28px, 3.5vw, 40px);\nline-height: 1.15;\nletter-spacing: -0.02em;\nfont-weight: 700;\n}\n.fmstr-cmp-pof-uc-v2__sub {\nmargin: 0;\nfont-size: 17px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n\n.fmstr-cmp-pof-uc-v2__grid {\ndisplay: grid;\ngrid-template-columns: repeat(3, 1fr);\ngap: 20px;\n}\n\n.fmstr-cmp-pof-uc-v2__card {\ndisplay: flex;\nflex-direction: column;\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 16px;\nbox-shadow: var(--c-shadow-sm);\noverflow: hidden;\ntext-decoration: none !important;\ncolor: inherit !important;\ntransition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;\n}\n.fmstr-cmp-pof-uc-v2__card:hover {\nborder-color: var(--c-edge);\nbox-shadow: var(--c-shadow-md);\ntransform: translateY(-2px);\ntext-decoration: none !important;\n}\n\n.fmstr-cmp-pof-uc-v2__visual {\nheight: 110px;\npadding: 16px 18px;\ndisplay: flex;\nalign-items: center;\ngap: 12px;\nposition: relative;\n}\n.fmstr-cmp-pof-uc-v2__visual--bakery { background: linear-gradient(135deg, #fde68a, #fb923c); }\n.fmstr-cmp-pof-uc-v2__visual--apparel { background: linear-gradient(135deg, #c4b5fd, #7c3aed); }\n.fmstr-cmp-pof-uc-v2__visual--b2b { background: linear-gradient(135deg, #67e8f9, #0891b2); }\n.fmstr-cmp-pof-uc-v2__visual--fundraiser { background: linear-gradient(135deg, #86efac, #16a34a); }\n.fmstr-cmp-pof-uc-v2__visual--school { background: linear-gradient(135deg, #93c5fd, #1d4ed8); }\n.fmstr-cmp-pof-uc-v2__visual--custom { background: linear-gradient(135deg, #fda4af, #be123c); }\n\n.fmstr-cmp-pof-uc-v2__emoji {\nfont-size: 36px;\nfilter: drop-shadow(0 4px 8px rgba(0,0,0,.2));\n}\n.fmstr-cmp-pof-uc-v2__hint {\ndisplay: flex;\nflex-direction: column;\ngap: 5px;\nflex: 1;\n}\n.fmstr-cmp-pof-uc-v2__chip {\ndisplay: inline-flex;\nalign-items: center;\ngap: 4px;\nalign-self: flex-start;\npadding: 4px 8px;\nborder-radius: 6px;\nbackground: rgba(255,255,255,.85);\ncolor: var(--c-fg-1);\nfont-size: 11px;\nfont-weight: 700;\n}\n.fmstr-cmp-pof-uc-v2__chip-light {\nbackground: rgba(255,255,255,.55);\ncolor: rgba(16,24,40,.85);\nfont-weight: 600;\n}\n\n.fmstr-cmp-pof-uc-v2__meta {\npadding: 18px 20px 22px;\ndisplay: flex;\nflex-direction: column;\ngap: 8px;\nflex: 1;\n}\n.fmstr-cmp-pof-uc-v2__name {\nmargin: 0;\nfont-size: 17px;\nfont-weight: 700;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-uc-v2__desc {\nmargin: 0;\nfont-size: 14.5px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\nflex: 1;\n}\n.fmstr-cmp-pof-uc-v2__cta {\ndisplay: inline-flex;\nalign-items: center;\ngap: 4px;\nmargin-top: 6px;\nfont-size: 13.5px;\nfont-weight: 600;\ncolor: var(--c-violet-600);\n}\n.fmstr-cmp-pof-uc-v2__card:hover .fmstr-cmp-pof-uc-v2__cta {\ngap: 8px;\n}\n\n@media (max-width: 980px) {\n.fmstr-cmp-pof-uc-v2__grid { grid-template-columns: repeat(2, 1fr); }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-pof-uc-v2 { padding: 64px 16px; }\n}\n@media (max-width: 540px) {\n.fmstr-cmp-pof-uc-v2__grid { grid-template-columns: 1fr; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-pof-uc-v2\" aria-labelledby=\"fmstr-cmp-pof-uc-v2-h2\">\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__container\">\n\n\u003Cheader class=\"fmstr-cmp-pof-uc-v2__header\">\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__eyebrow\">Use cases\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-pof-uc-v2__h2\" id=\"fmstr-cmp-pof-uc-v2-h2\">Built for small teams who sell, not full-stack ecommerce stores\u003C/h2>\n\u003Cp class=\"fmstr-cmp-pof-uc-v2__sub\">If a Shopify store is too much overhead for what you actually sell, this is the lighter path.\u003C/p>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__grid\">\n\n\u003Ca class=\"fmstr-cmp-pof-uc-v2__card\" href=\"https://formester.com/templates/bakery-order-form-33214/\">\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__visual fmstr-cmp-pof-uc-v2__visual--bakery\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__emoji\">🥐\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__hint\">\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__chip\">$4.50\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__chip fmstr-cmp-pof-uc-v2__chip-light\">Pickup window\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__meta\">\n\u003Ch3 class=\"fmstr-cmp-pof-uc-v2__name\">Bakery and food orders\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-uc-v2__desc\">Cake, catering, and bake-sale orders with pickup windows and per-flavor stock. Customers pick size, frosting, and quantity, then pay before the oven goes on.\u003C/p>\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__cta\">Open template →\u003C/span>\n\u003C/div>\n\u003C/a>\n\n\u003Ca class=\"fmstr-cmp-pof-uc-v2__card\" href=\"https://formester.com/templates/apparel-order-form-32860/\">\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__visual fmstr-cmp-pof-uc-v2__visual--apparel\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__emoji\">👕\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__hint\">\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__chip\">S · M · L\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__chip fmstr-cmp-pof-uc-v2__chip-light\">3 colors\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__meta\">\n\u003Ch3 class=\"fmstr-cmp-pof-uc-v2__name\">Apparel and merch\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-uc-v2__desc\">Sell t-shirts, hoodies, and merch with size and color variants. Cap stock per size so you do not oversell mediums when only smalls are left.\u003C/p>\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__cta\">Open template →\u003C/span>\n\u003C/div>\n\u003C/a>\n\n\u003Ca class=\"fmstr-cmp-pof-uc-v2__card\" href=\"https://formester.com/templates/supplier-order-form-33233/\">\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__visual fmstr-cmp-pof-uc-v2__visual--b2b\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__emoji\">📋\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__hint\">\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__chip\">PO #45821\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__chip fmstr-cmp-pof-uc-v2__chip-light\">Net 30\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__meta\">\n\u003Ch3 class=\"fmstr-cmp-pof-uc-v2__name\">B2B wholesale and reorders\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-uc-v2__desc\">Let recurring buyers reorder a fixed catalog with set prices, payment terms, and a PO number field. Faster than emailing a price sheet back and forth.\u003C/p>\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__cta\">Open template →\u003C/span>\n\u003C/div>\n\u003C/a>\n\n\u003Ca class=\"fmstr-cmp-pof-uc-v2__card\" href=\"https://formester.com/templates/fundraiser-order-form-32857/\">\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__visual fmstr-cmp-pof-uc-v2__visual--fundraiser\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__emoji\">🎗️\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__hint\">\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__chip\">$25 · $50 · $100\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__chip fmstr-cmp-pof-uc-v2__chip-light\">12 left\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__meta\">\n\u003Ch3 class=\"fmstr-cmp-pof-uc-v2__name\">Fundraisers and donations with rewards\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-uc-v2__desc\">Run a tiered fundraiser where each pledge level ships a different reward. Set a stock cap per tier so limited-edition rewards close on their own.\u003C/p>\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__cta\">Open template →\u003C/span>\n\u003C/div>\n\u003C/a>\n\n\u003Ca class=\"fmstr-cmp-pof-uc-v2__card\" href=\"https://formester.com/templates/school-picture-day-order-form-32854/\">\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__visual fmstr-cmp-pof-uc-v2__visual--school\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__emoji\">🎓\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__hint\">\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__chip\">Pkg A · B · C\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__chip fmstr-cmp-pof-uc-v2__chip-light\">Sibling discount\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__meta\">\n\u003Ch3 class=\"fmstr-cmp-pof-uc-v2__name\">School spirit-wear and yearbook orders\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-uc-v2__desc\">Collect spirit-wear or picture-day orders from parents with one shareable link. Variant sizing, deadline cutoffs, and one CSV export for the school office.\u003C/p>\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__cta\">Open template →\u003C/span>\n\u003C/div>\n\u003C/a>\n\n\u003Ca class=\"fmstr-cmp-pof-uc-v2__card\" href=\"https://formester.com/templates/custom-sweatshirt-order-form-32862/\">\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__visual fmstr-cmp-pof-uc-v2__visual--custom\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__emoji\">🧵\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__hint\">\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__chip\">Logo upload\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__chip fmstr-cmp-pof-uc-v2__chip-light\">$30 deposit\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-uc-v2__meta\">\n\u003Ch3 class=\"fmstr-cmp-pof-uc-v2__name\">Custom commissions and made-to-order\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-uc-v2__desc\">For custom cakes, embroidered hoodies, framed prints, or any made-to-order work. Customers describe the request, upload a reference image, pick a base price, and pay a deposit.\u003C/p>\n\u003Cspan class=\"fmstr-cmp-pof-uc-v2__cta\">Open template →\u003C/span>\n\u003C/div>\n\u003C/a>\n\n\u003C/div>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":79,"__component":63,"markup":80,"useContainer":65},235,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-pof-hiw a { text-decoration: none !important; }\n\n.fmstr-cmp-pof-hiw {\n--c-bg: #ffffff;\n--c-soft: #f9fafb;\n--c-tint: #f7f3ff;\n--c-edge: #e4d7ff;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-100: #ede4ff;\n--c-violet-300: #c4b1ee;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-border: #eaecf0;\n--c-border-soft: #f2f4f7;\n--c-success: #12b76a;\n--c-warning: #f79009;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.03);\n--c-shadow-md: 0 8px 24px rgba(16,24,40,.06);\n\nbackground: var(--c-soft);\npadding: 88px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\noverflow-x: hidden;\n}\n.fmstr-cmp-pof-hiw *, .fmstr-cmp-pof-hiw *::before, .fmstr-cmp-pof-hiw *::after { box-sizing: border-box; }\n.fmstr-cmp-pof-hiw__step, .fmstr-cmp-pof-hiw__content, .fmstr-cmp-pof-hiw__visual { min-width: 0; }\n.fmstr-cmp-pof-hiw__visual { max-width: 100%; overflow: hidden; }\n\n.fmstr-cmp-pof-hiw__container { max-width: 1100px; margin: 0 auto; }\n\n.fmstr-cmp-pof-hiw__header {\nmax-width: 760px;\nmargin: 0 auto 56px;\ntext-align: center;\n}\n\n.fmstr-cmp-pof-hiw__eyebrow {\ndisplay: inline-block;\nmargin: 0 0 14px;\npadding: 4px 12px;\nborder-radius: 999px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\nfont-size: 12px;\nfont-weight: 700;\ntext-transform: uppercase;\nletter-spacing: 0.08em;\n}\n\n.fmstr-cmp-pof-hiw__h2 {\nmargin: 0 0 14px;\nfont-size: clamp(28px, 3.5vw, 40px);\nline-height: 1.15;\nletter-spacing: -0.02em;\nfont-weight: 700;\ncolor: var(--c-fg-1);\n}\n\n.fmstr-cmp-pof-hiw__sub {\nmargin: 0;\nfont-size: 17px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n\n.fmstr-cmp-pof-hiw__timeline {\nlist-style: none;\nmargin: 0;\npadding: 0;\n}\n\n.fmstr-cmp-pof-hiw__step {\nposition: relative;\ndisplay: grid;\ngrid-template-columns: 72px 1fr 380px;\ngap: 24px;\npadding-bottom: 56px;\nalign-items: start;\n}\n.fmstr-cmp-pof-hiw__step:last-child { padding-bottom: 0; }\n\n.fmstr-cmp-pof-hiw__step::before {\ncontent: \"\";\nposition: absolute;\nleft: 35px;\ntop: 56px;\nbottom: 0;\nwidth: 2px;\nbackground: repeating-linear-gradient(to bottom, var(--c-violet-300) 0 6px, transparent 6px 12px);\n}\n.fmstr-cmp-pof-hiw__step:last-child::before { display: none; }\n\n.fmstr-cmp-pof-hiw__marker {\nwidth: 72px;\ndisplay: flex;\njustify-content: center;\nalign-items: flex-start;\n}\n\n.fmstr-cmp-pof-hiw__num {\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\nwidth: 56px;\nheight: 56px;\nborder-radius: 16px;\nbackground: linear-gradient(135deg, var(--c-violet-500) 0%, var(--c-violet-700) 100%);\ncolor: #ffffff;\nfont-size: 20px;\nfont-weight: 700;\nflex-shrink: 0;\nbox-shadow: 0 6px 16px rgba(127, 86, 217, .28), 0 0 0 6px var(--c-violet-100);\n}\n\n.fmstr-cmp-pof-hiw__content { padding-top: 8px; }\n\n.fmstr-cmp-pof-hiw__h3 {\nmargin: 0 0 10px;\nfont-size: 22px;\nline-height: 1.3;\nletter-spacing: -0.01em;\nfont-weight: 700;\ncolor: var(--c-fg-1);\n}\n\n.fmstr-cmp-pof-hiw__body {\nmargin: 0;\nfont-size: 15.5px;\nline-height: 1.65;\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-pof-hiw__body strong { color: var(--c-fg-1); font-weight: 600; }\n\n.fmstr-cmp-pof-hiw__visual {\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 16px;\nbox-shadow: var(--c-shadow-md);\npadding: 18px;\ndisplay: flex;\nflex-direction: column;\ngap: 12px;\n}\n\n/* Mockup primitives */\n.fmstr-cmp-pof-hiw__mock-label {\nfont-size: 11px;\nfont-weight: 700;\ncolor: var(--c-fg-3);\ntext-transform: uppercase;\nletter-spacing: 0.06em;\nmargin: 0;\n}\n\n/* Step 1: Drag element */\n.fmstr-cmp-pof-hiw__palette {\ndisplay: flex;\nflex-direction: column;\ngap: 6px;\npadding: 10px;\nbackground: var(--c-soft);\nborder-radius: 10px;\n}\n.fmstr-cmp-pof-hiw__field {\ndisplay: flex;\nalign-items: center;\ngap: 8px;\npadding: 8px 10px;\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nborder-radius: 8px;\nfont-size: 13px;\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-pof-hiw__field--active {\nborder-color: var(--c-violet-500);\nbackground: var(--c-tint);\ncolor: var(--c-violet-700);\nfont-weight: 600;\nbox-shadow: 0 4px 12px rgba(127, 86, 217, .15);\ntransform: translateX(4px);\n}\n.fmstr-cmp-pof-hiw__field-icon {\nwidth: 18px;\nheight: 18px;\nborder-radius: 5px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\nflex-shrink: 0;\n}\n.fmstr-cmp-pof-hiw__dropzone {\nborder: 2px dashed var(--c-violet-300);\nborder-radius: 10px;\npadding: 14px;\nbackground: rgba(247, 243, 255, .5);\nfont-size: 12px;\ncolor: var(--c-violet-700);\nfont-weight: 600;\ntext-align: center;\n}\n\n/* Step 2: Product with variants */\n.fmstr-cmp-pof-hiw__product {\ndisplay: grid;\ngrid-template-columns: 64px 1fr;\ngap: 12px;\nalign-items: center;\n}\n.fmstr-cmp-pof-hiw__product-img {\nwidth: 64px;\nheight: 64px;\nborder-radius: 10px;\nbackground: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nfont-size: 28px;\nflex-shrink: 0;\n}\n.fmstr-cmp-pof-hiw__product-name { font-size: 14px; font-weight: 700; color: var(--c-fg-1); margin: 0 0 2px; }\n.fmstr-cmp-pof-hiw__product-price { font-size: 13px; color: var(--c-fg-2); margin: 0; }\n.fmstr-cmp-pof-hiw__pills {\ndisplay: flex;\nflex-wrap: wrap;\ngap: 6px;\nmargin-top: 6px;\n}\n.fmstr-cmp-pof-hiw__pill {\ndisplay: inline-flex;\nalign-items: center;\ngap: 6px;\npadding: 5px 10px;\nborder-radius: 8px;\nborder: 1px solid var(--c-border);\nfont-size: 12px;\nfont-weight: 600;\ncolor: var(--c-fg-2);\nbackground: #ffffff;\n}\n.fmstr-cmp-pof-hiw__pill--active {\nbackground: var(--c-violet-600);\ncolor: #ffffff;\nborder-color: var(--c-violet-600);\n}\n.fmstr-cmp-pof-hiw__color {\ndisplay: inline-block;\nwidth: 12px;\nheight: 12px;\nborder-radius: 50%;\nborder: 1px solid rgba(0,0,0,.08);\n}\n\n/* Step 3: Stock per variant table */\n.fmstr-cmp-pof-hiw__table {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr auto;\nborder: 1px solid var(--c-border);\nborder-radius: 10px;\noverflow: hidden;\n}\n.fmstr-cmp-pof-hiw__th, .fmstr-cmp-pof-hiw__td {\npadding: 9px 12px;\nfont-size: 13px;\nborder-bottom: 1px solid var(--c-border);\n}\n.fmstr-cmp-pof-hiw__th {\nbackground: var(--c-soft);\ncolor: var(--c-fg-3);\nfont-size: 11px;\nfont-weight: 700;\ntext-transform: uppercase;\nletter-spacing: 0.06em;\n}\n.fmstr-cmp-pof-hiw__td { color: var(--c-fg-1); font-weight: 600; }\n.fmstr-cmp-pof-hiw__table > div:nth-last-child(-n+3) { border-bottom: 0; }\n.fmstr-cmp-pof-hiw__td--muted { color: var(--c-fg-3); font-weight: 400; }\n.fmstr-cmp-pof-hiw__badge {\ndisplay: inline-flex;\nalign-items: center;\ngap: 5px;\npadding: 3px 8px;\nborder-radius: 999px;\nfont-size: 11px;\nfont-weight: 600;\n}\n.fmstr-cmp-pof-hiw__badge--ok { background: #d1fadf; color: #027a48; }\n.fmstr-cmp-pof-hiw__badge--out { background: #fef0c7; color: #b54708; }\n.fmstr-cmp-pof-hiw__dot { width: 6px; height: 6px; border-radius: 50%; }\n.fmstr-cmp-pof-hiw__dot--ok { background: var(--c-success); }\n\n/* Step 4: Submissions */\n.fmstr-cmp-pof-hiw__order {\ndisplay: grid;\ngrid-template-columns: auto 1fr auto;\ngap: 12px;\npadding: 12px;\nbackground: var(--c-soft);\nborder-radius: 10px;\nalign-items: center;\n}\n.fmstr-cmp-pof-hiw__avatar {\nwidth: 32px;\nheight: 32px;\nborder-radius: 50%;\nbackground: linear-gradient(135deg, var(--c-violet-300), var(--c-violet-600));\ncolor: #ffffff;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nfont-size: 13px;\nfont-weight: 700;\n}\n.fmstr-cmp-pof-hiw__order-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n.fmstr-cmp-pof-hiw__order-name { font-size: 13px; font-weight: 600; color: var(--c-fg-1); margin: 0; }\n.fmstr-cmp-pof-hiw__order-sub { font-size: 12px; color: var(--c-fg-3); margin: 0; }\n.fmstr-cmp-pof-hiw__order-total {\ndisplay: flex;\nflex-direction: column;\nalign-items: flex-end;\ngap: 4px;\n}\n.fmstr-cmp-pof-hiw__order-amt { font-size: 13px; font-weight: 700; color: var(--c-fg-1); }\n\n/* Responsive */\n@media (max-width: 880px) {\n.fmstr-cmp-pof-hiw__step { grid-template-columns: 56px 1fr; gap: 16px; row-gap: 16px; padding-bottom: 48px; }\n.fmstr-cmp-pof-hiw__step::before { left: 27px; top: 48px; }\n.fmstr-cmp-pof-hiw__marker { width: 56px; }\n.fmstr-cmp-pof-hiw__num { width: 48px; height: 48px; font-size: 17px; box-shadow: 0 6px 16px rgba(127, 86, 217, .28), 0 0 0 5px var(--c-violet-100); }\n.fmstr-cmp-pof-hiw__visual { grid-column: 1 / -1; margin-left: 0; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-pof-hiw { padding: 64px 16px; }\n.fmstr-cmp-pof-hiw__h3 { font-size: 19px; }\n.fmstr-cmp-pof-hiw__visual { padding: 14px; }\n}\n@media (max-width: 540px) {\n.fmstr-cmp-pof-hiw__step { grid-template-columns: 44px 1fr; gap: 12px; }\n.fmstr-cmp-pof-hiw__step::before { left: 21px; top: 42px; }\n.fmstr-cmp-pof-hiw__marker { width: 44px; }\n.fmstr-cmp-pof-hiw__num { width: 40px; height: 40px; font-size: 14px; border-radius: 11px; box-shadow: 0 4px 12px rgba(127, 86, 217, .28), 0 0 0 4px var(--c-violet-100); }\n.fmstr-cmp-pof-hiw__visual { padding: 12px; }\n.fmstr-cmp-pof-hiw__product { grid-template-columns: 56px 1fr; gap: 10px; }\n.fmstr-cmp-pof-hiw__product-img { width: 56px; height: 56px; font-size: 26px; }\n.fmstr-cmp-pof-hiw__th, .fmstr-cmp-pof-hiw__td { padding: 7px 9px; font-size: 12px; }\n.fmstr-cmp-pof-hiw__order { padding: 10px; gap: 8px; }\n.fmstr-cmp-pof-hiw__h3 { font-size: 18px; }\n.fmstr-cmp-pof-hiw__body { font-size: 14.5px; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-pof-hiw\" aria-labelledby=\"fmstr-cmp-pof-hiw-h2\">\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__container\">\n\n\u003Cheader class=\"fmstr-cmp-pof-hiw__header\">\n\u003Cspan class=\"fmstr-cmp-pof-hiw__eyebrow\">How it works\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-pof-hiw__h2\" id=\"fmstr-cmp-pof-hiw-h2\">Four steps from blank form to live order page\u003C/h2>\n\u003Cp class=\"fmstr-cmp-pof-hiw__sub\">Everything runs inside the Formester builder. No code, no plugins, no third-party store to maintain.\u003C/p>\n\u003C/header>\n\n\u003Col class=\"fmstr-cmp-pof-hiw__timeline\">\n\n\u003Cli class=\"fmstr-cmp-pof-hiw__step\">\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__marker\">\u003Cspan class=\"fmstr-cmp-pof-hiw__num\" aria-hidden=\"true\">1\u003C/span>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__content\">\n\u003Ch3 class=\"fmstr-cmp-pof-hiw__h3\">Drag in the Product Catalogue element\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-hiw__body\">Open the builder, find \u003Cstrong>Product Catalogue\u003C/strong> in the field list, drop it onto your form. That single element holds your full lineup, however many products you sell.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__visual\" aria-hidden=\"true\">\n\u003Cp class=\"fmstr-cmp-pof-hiw__mock-label\">Field palette\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__palette\">\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__field\">\u003Cspan class=\"fmstr-cmp-pof-hiw__field-icon\">\u003Csvg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\">\u003Cpath d=\"M4 7h16M4 12h16M4 17h10\">\u003C/path>\u003C/svg>\u003C/span>Short text\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__field fmstr-cmp-pof-hiw__field--active\">\u003Cspan class=\"fmstr-cmp-pof-hiw__field-icon\">\u003Csvg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\">\u003Crect x=\"3\" y=\"6\" width=\"18\" height=\"13\" rx=\"2\">\u003C/rect>\u003Cpath d=\"M3 10h18\">\u003C/path>\u003C/svg>\u003C/span>Product Catalogue\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__field\">\u003Cspan class=\"fmstr-cmp-pof-hiw__field-icon\">\u003Csvg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\">\u003Crect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\">\u003C/rect>\u003Cpath d=\"M16 3v4M8 3v4M3 11h18\">\u003C/path>\u003C/svg>\u003C/span>Date\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__dropzone\">Drop on your form\u003C/div>\n\u003C/div>\n\u003C/li>\n\n\u003Cli class=\"fmstr-cmp-pof-hiw__step\">\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__marker\">\u003Cspan class=\"fmstr-cmp-pof-hiw__num\" aria-hidden=\"true\">2\u003C/span>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__content\">\n\u003Ch3 class=\"fmstr-cmp-pof-hiw__h3\">Add products with variants and images\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-hiw__body\">For each product, set a name, description, image, and price. Add \u003Cstrong>size variants\u003C/strong> (XS, S, M, L, XL) and \u003Cstrong>color variants\u003C/strong> where they apply. Variants are not separate products. They are options inside one product card.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__visual\" aria-hidden=\"true\">\n\u003Cp class=\"fmstr-cmp-pof-hiw__mock-label\">Product card\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__product\">\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__product-img\">🥐\u003C/div>\n\u003Cdiv>\n\u003Cp class=\"fmstr-cmp-pof-hiw__product-name\">Almond Croissant\u003C/p>\n\u003Cp class=\"fmstr-cmp-pof-hiw__product-price\">$4.50 each\u003C/p>\n\u003C/div>\n\u003C/div>\n\u003Cdiv>\n\u003Cp class=\"fmstr-cmp-pof-hiw__mock-label\" style=\"margin-bottom:6px;\">Size\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__pills\">\n\u003Cspan class=\"fmstr-cmp-pof-hiw__pill\">Small\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-hiw__pill fmstr-cmp-pof-hiw__pill--active\">Medium\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-hiw__pill\">Large\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv>\n\u003Cp class=\"fmstr-cmp-pof-hiw__mock-label\" style=\"margin-bottom:6px;\">Glaze\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__pills\">\n\u003Cspan class=\"fmstr-cmp-pof-hiw__pill\">\u003Cspan class=\"fmstr-cmp-pof-hiw__color\" style=\"background:#fef3c7;\">\u003C/span> Honey\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-hiw__pill\">\u003Cspan class=\"fmstr-cmp-pof-hiw__color\" style=\"background:#7c2d12;\">\u003C/span> Chocolate\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/li>\n\n\u003Cli class=\"fmstr-cmp-pof-hiw__step\">\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__marker\">\u003Cspan class=\"fmstr-cmp-pof-hiw__num\" aria-hidden=\"true\">3\u003C/span>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__content\">\n\u003Ch3 class=\"fmstr-cmp-pof-hiw__h3\">Set stock per variant\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-hiw__body\">Edit stock on the product or on a specific variant (for example, 10 of size S, 5 of size M, unlimited of size L). Toggle \u003Cstrong>\"disable when sold out\"\u003C/strong> and the option greys out the moment the last one is reserved.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__visual\" aria-hidden=\"true\">\n\u003Cp class=\"fmstr-cmp-pof-hiw__mock-label\">Inventory\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__table\">\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__th\">Variant\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__th\">Stock\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__th\">Status\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__td\">Small\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__td\">10\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__td\">\u003Cspan class=\"fmstr-cmp-pof-hiw__badge fmstr-cmp-pof-hiw__badge--ok\">\u003Cspan class=\"fmstr-cmp-pof-hiw__dot fmstr-cmp-pof-hiw__dot--ok\">\u003C/span>Live\u003C/span>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__td\">Medium\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__td\">5\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__td\">\u003Cspan class=\"fmstr-cmp-pof-hiw__badge fmstr-cmp-pof-hiw__badge--ok\">\u003Cspan class=\"fmstr-cmp-pof-hiw__dot fmstr-cmp-pof-hiw__dot--ok\">\u003C/span>Live\u003C/span>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__td\">Large\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__td fmstr-cmp-pof-hiw__td--muted\">0\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__td\">\u003Cspan class=\"fmstr-cmp-pof-hiw__badge fmstr-cmp-pof-hiw__badge--out\">Sold out\u003C/span>\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/li>\n\n\u003Cli class=\"fmstr-cmp-pof-hiw__step\">\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__marker\">\u003Cspan class=\"fmstr-cmp-pof-hiw__num\" aria-hidden=\"true\">4\u003C/span>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__content\">\n\u003Ch3 class=\"fmstr-cmp-pof-hiw__h3\">Collect payment and track orders\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-hiw__body\">Connect a payment processor, publish the form, and watch orders land in the \u003Cstrong>Submissions tab\u003C/strong>. Each order shows the variant picked, quantity, customer details, and payment status. Export to CSV when you need it elsewhere.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__visual\" aria-hidden=\"true\">\n\u003Cp class=\"fmstr-cmp-pof-hiw__mock-label\">Submissions\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__order\">\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__avatar\">AS\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__order-meta\">\n\u003Cp class=\"fmstr-cmp-pof-hiw__order-name\">Anita Sharma\u003C/p>\n\u003Cp class=\"fmstr-cmp-pof-hiw__order-sub\">2 × Almond Croissant (M)\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__order-total\">\n\u003Cspan class=\"fmstr-cmp-pof-hiw__order-amt\">$9.00\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-hiw__badge fmstr-cmp-pof-hiw__badge--ok\">\u003Cspan class=\"fmstr-cmp-pof-hiw__dot fmstr-cmp-pof-hiw__dot--ok\">\u003C/span>Paid\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__order\">\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__avatar\" style=\"background:linear-gradient(135deg,#fde68a,#f59e0b);\">RT\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__order-meta\">\n\u003Cp class=\"fmstr-cmp-pof-hiw__order-name\">Rohit Tewari\u003C/p>\n\u003Cp class=\"fmstr-cmp-pof-hiw__order-sub\">1 × Plain (S)\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-hiw__order-total\">\n\u003Cspan class=\"fmstr-cmp-pof-hiw__order-amt\">$3.50\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-hiw__badge fmstr-cmp-pof-hiw__badge--ok\">\u003Cspan class=\"fmstr-cmp-pof-hiw__dot fmstr-cmp-pof-hiw__dot--ok\">\u003C/span>Paid\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/li>\n\n\u003C/ol>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":82,"__component":63,"markup":83,"useContainer":65},236,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-pof-pay a { text-decoration: none !important; }\n\n.fmstr-cmp-pof-pay {\n--c-bg: #ffffff;\n--c-tint: #f7f3ff;\n--c-edge: #e4d7ff;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.03);\n--c-shadow-md: 0 4px 20px rgba(16,24,40,.06);\n\nbackground: #ffffff;\npadding: 80px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-pay *, .fmstr-cmp-pof-pay *::before, .fmstr-cmp-pof-pay *::after { box-sizing: border-box; }\n\n.fmstr-cmp-pof-pay__container { max-width: 980px; margin: 0 auto; }\n\n.fmstr-cmp-pof-pay__header {\nmax-width: 760px;\nmargin: 0 auto 48px;\ntext-align: center;\n}\n\n.fmstr-cmp-pof-pay__h2 {\nmargin: 0 0 14px;\nfont-size: clamp(28px, 3.5vw, 40px);\nline-height: 1.15;\nletter-spacing: -0.02em;\nfont-weight: 700;\ncolor: var(--c-fg-1);\n}\n\n.fmstr-cmp-pof-pay__sub {\nmargin: 0;\nfont-size: 17px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n\n.fmstr-cmp-pof-pay__grid {\ndisplay: grid;\ngrid-template-columns: repeat(3, 1fr);\ngap: 20px;\n}\n\n.fmstr-cmp-pof-pay__card {\ndisplay: flex;\nflex-direction: column;\ngap: 14px;\npadding: 32px;\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 16px;\nbox-shadow: var(--c-shadow-sm);\ntransition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;\n}\n.fmstr-cmp-pof-pay__card:hover {\nborder-color: var(--c-edge);\nbox-shadow: var(--c-shadow-md);\ntransform: translateY(-2px);\n}\n\n.fmstr-cmp-pof-pay__logo {\nheight: 40px;\nmin-width: 80px;\npadding: 0 14px;\nborder-radius: 10px;\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\nflex-shrink: 0;\nalign-self: flex-start;\nfont-weight: 700;\nfont-size: 17px;\nline-height: 1;\nletter-spacing: -0.02em;\n}\n.fmstr-cmp-pof-pay__logo--stripe { color: #635BFF; }\n.fmstr-cmp-pof-pay__logo--stripe svg { display: block; height: 22px; width: auto; }\n.fmstr-cmp-pof-pay__logo--paypal { color: #003087; font-style: italic; letter-spacing: -0.04em; }\n.fmstr-cmp-pof-pay__logo--paypal .fmstr-cmp-pof-pay__brand-light { color: #009CDE; }\n.fmstr-cmp-pof-pay__logo--authnet { color: #1B5E9F; font-size: 14px; letter-spacing: -0.01em; }\n\n.fmstr-cmp-pof-pay__sr-only {\nposition: absolute;\nwidth: 1px;\nheight: 1px;\npadding: 0;\nmargin: -1px;\noverflow: hidden;\nclip: rect(0, 0, 0, 0);\nwhite-space: nowrap;\nborder: 0;\n}\n\n.fmstr-cmp-pof-pay__body {\nmargin: 0;\nfont-size: 15px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n\n.fmstr-cmp-pof-pay__note {\nmargin: 28px auto 0;\nmax-width: 760px;\npadding: 18px 22px;\nbackground: var(--c-tint);\nborder: 1px solid var(--c-edge);\nborder-radius: 12px;\nfont-size: 14.5px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\ntext-align: center;\n}\n.fmstr-cmp-pof-pay__note strong { color: var(--c-violet-700); font-weight: 600; }\n\n@media (max-width: 1000px) {\n.fmstr-cmp-pof-pay__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-pof-pay { padding: 56px 16px; }\n.fmstr-cmp-pof-pay__card { padding: 24px; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-pof-pay\" aria-labelledby=\"fmstr-cmp-pof-pay-h2\">\n\u003Cdiv class=\"fmstr-cmp-pof-pay__container\">\n\n\u003Cheader class=\"fmstr-cmp-pof-pay__header\">\n\u003Ch2 class=\"fmstr-cmp-pof-pay__h2\" id=\"fmstr-cmp-pof-pay-h2\">Get paid the moment a customer clicks Submit\u003C/h2>\n\u003Cp class=\"fmstr-cmp-pof-pay__sub\">Stripe, PayPal, and Authorize.Net charge the card or wallet on form submission. The order, the variant, and the payment land together so you never reconcile two systems.\u003C/p>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-pof-pay__grid\">\n\n\u003Carticle class=\"fmstr-cmp-pof-pay__card\">\n\u003Cspan class=\"fmstr-cmp-pof-pay__logo fmstr-cmp-pof-pay__logo--stripe\" aria-label=\"Stripe\">\n\u003Csvg viewBox=\"0 0 60 25\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\u003Cpath fill=\"currentColor\" d=\"M59.64 14.28h-8.06c.19 1.93 1.6 2.55 3.2 2.55 1.64 0 2.96-.37 4.05-.95v3.32a8.33 8.33 0 0 1-4.56 1.1c-4.01 0-6.83-2.5-6.83-7.48 0-4.19 2.39-7.52 6.3-7.52 3.92 0 5.96 3.28 5.96 7.5 0 .4-.04 1.26-.06 1.48zm-5.92-5.62c-1.03 0-2.17.73-2.17 2.58h4.25c0-1.85-1.07-2.58-2.08-2.58zM40.95 20.3c-1.44 0-2.32-.6-2.91-1.04l-.02 4.63-4.12.87V5.57h3.76l.08 1.02a4.7 4.7 0 0 1 3.23-1.29c2.9 0 5.62 2.6 5.62 7.4 0 5.23-2.7 7.6-5.64 7.6zM40 9.05c-.95 0-1.54.34-1.97.81l.02 6.12c.4.44.98.78 1.95.78 1.52 0 2.54-1.65 2.54-3.87 0-2.15-1.04-3.84-2.54-3.84zM28.24 5.57h4.13v14.44h-4.13V5.57zm0-4.7L32.37 0v3.36l-4.13.88V.88zm-4.32 9.35v9.79H19.8V5.57h3.7l.12 1.22c1-1.77 3.07-1.41 3.62-1.22v3.79c-.52-.17-2.29-.43-3.32.86zm-8.55 4.72c0 2.43 2.6 1.68 3.12 1.46v3.36c-.55.3-1.54.54-2.89.54a4.15 4.15 0 0 1-4.27-4.24l.01-13.17 4.02-.86v3.54h3.14V9.1h-3.13v5.85zm-4.91.7c0 2.97-2.31 4.66-5.73 4.66a11.2 11.2 0 0 1-4.46-.93v-3.93c1.38.75 3.1 1.31 4.46 1.31.92 0 1.58-.24 1.58-1C6.32 13.84 0 14.84 0 10.2 0 7.29 2.28 5.55 5.62 5.55c1.36 0 2.72.2 4.09.75v3.88a9.23 9.23 0 0 0-4.1-1.06c-.86 0-1.4.25-1.4.93 0 1.74 6.34.78 6.34 5.6\">\u003C/path>\u003C/svg>\n\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-pay__sr-only\">Stripe\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-pay__body\">Card payments with AES-256 encryption on the payment data layer. Connect your Stripe account once, and every form you publish can charge through it. Refunds and customer records live in your Stripe dashboard.\u003C/p>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-pof-pay__card\">\n\u003Cspan class=\"fmstr-cmp-pof-pay__logo fmstr-cmp-pof-pay__logo--paypal\" aria-label=\"PayPal\">Pay\u003Cspan class=\"fmstr-cmp-pof-pay__brand-light\">Pal\u003C/span>\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-pay__sr-only\">PayPal\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-pay__body\">PayPal balance, linked card, or PayPal Credit at checkout. Helpful for buyers who prefer PayPal over typing a card, and for international orders where PayPal handles the currency conversion.\u003C/p>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-pof-pay__card\">\n\u003Cspan class=\"fmstr-cmp-pof-pay__logo fmstr-cmp-pof-pay__logo--authnet\" aria-label=\"Authorize.Net\">Authorize.Net\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-pay__sr-only\">Authorize.Net\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-pay__body\">Card payments through Authorize.Net's merchant gateway. Useful for businesses already running on Authorize.Net for in-store or recurring billing. Connect once, charge on every submission.\u003C/p>\n\u003C/article>\n\n\u003C/div>\n\n\u003Cp class=\"fmstr-cmp-pof-pay__note\">\u003Cstrong>More processors are on the way.\u003C/strong> If you need a regional gateway today, capture the order through Formester and bill manually while we ship the next batch.\u003C/p>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":85,"__component":63,"markup":86,"useContainer":65},237,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-pof-var-v2 a { text-decoration: none !important; }\n\n.fmstr-cmp-pof-var-v2 {\n--c-bg: #ffffff;\n--c-soft: #f9fafb;\n--c-tint: #f7f3ff;\n--c-edge: #e4d7ff;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-100: #ede4ff;\n--c-violet-300: #c4b1ee;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-success: #12b76a;\n--c-warning: #f79009;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n--c-shadow-lg: 0 20px 50px -12px rgba(16,24,40,.16), 0 8px 20px -8px rgba(16,24,40,.08);\n\nbackground: #ffffff;\npadding: 88px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-var-v2 *, .fmstr-cmp-pof-var-v2 *::before, .fmstr-cmp-pof-var-v2 *::after { box-sizing: border-box; }\n.fmstr-cmp-pof-var-v2 > *, .fmstr-cmp-pof-var-v2 > * > * { min-width: 0; }\n\n.fmstr-cmp-pof-var-v2__container { max-width: 1100px; margin: 0 auto; }\n\n.fmstr-cmp-pof-var-v2__header {\nmax-width: 760px;\nmargin: 0 auto 56px;\ntext-align: center;\n}\n.fmstr-cmp-pof-var-v2__eyebrow {\ndisplay: inline-block;\nmargin: 0 0 14px;\npadding: 4px 12px;\nborder-radius: 999px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\nfont-size: 12px;\nfont-weight: 700;\ntext-transform: uppercase;\nletter-spacing: 0.08em;\n}\n.fmstr-cmp-pof-var-v2__h2 {\nmargin: 0 0 14px;\nfont-size: clamp(28px, 3.5vw, 40px);\nline-height: 1.15;\nletter-spacing: -0.02em;\nfont-weight: 700;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-var-v2__sub {\nmargin: 0;\nfont-size: 17px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n\n.fmstr-cmp-pof-var-v2__stage {\nposition: relative;\ndisplay: grid;\ngrid-template-columns: 1fr 380px 1fr;\ngap: 32px;\nalign-items: center;\n}\n\n.fmstr-cmp-pof-var-v2__callouts {\ndisplay: flex;\nflex-direction: column;\ngap: 20px;\n}\n.fmstr-cmp-pof-var-v2__callouts--left { padding-top: 24px; }\n.fmstr-cmp-pof-var-v2__callouts--right { padding-bottom: 24px; }\n\n.fmstr-cmp-pof-var-v2__callout {\ndisplay: flex;\ngap: 14px;\nalign-items: flex-start;\npadding: 16px;\nbackground: var(--c-soft);\nborder: 1px solid var(--c-border);\nborder-radius: 14px;\nposition: relative;\n}\n.fmstr-cmp-pof-var-v2__callout-icon {\nwidth: 36px;\nheight: 36px;\nborder-radius: 10px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nflex-shrink: 0;\n}\n.fmstr-cmp-pof-var-v2__callout-title {\nmargin: 0 0 4px;\nfont-size: 14px;\nfont-weight: 700;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-var-v2__callout-body {\nmargin: 0;\nfont-size: 13.5px;\nline-height: 1.55;\ncolor: var(--c-fg-2);\n}\n\n/* Center product card */\n.fmstr-cmp-pof-var-v2__card {\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 20px;\npadding: 24px;\nbox-shadow: var(--c-shadow-lg);\n}\n.fmstr-cmp-pof-var-v2__img {\nheight: 180px;\nborder-radius: 14px;\nbackground: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nfont-size: 80px;\nmargin-bottom: 18px;\n}\n.fmstr-cmp-pof-var-v2__name { margin: 0 0 4px; font-size: 18px; font-weight: 700; }\n.fmstr-cmp-pof-var-v2__price { margin: 0 0 20px; font-size: 15px; color: var(--c-fg-3); font-weight: 600; }\n.fmstr-cmp-pof-var-v2__price strong { color: var(--c-violet-700); font-weight: 700; }\n\n.fmstr-cmp-pof-var-v2__row { margin-bottom: 16px; }\n.fmstr-cmp-pof-var-v2__row-label {\ndisplay: flex;\njustify-content: space-between;\nalign-items: baseline;\nmargin-bottom: 8px;\n}\n.fmstr-cmp-pof-var-v2__row-label-text {\nfont-size: 12px;\nfont-weight: 600;\ncolor: var(--c-fg-3);\ntext-transform: uppercase;\nletter-spacing: 0.06em;\n}\n.fmstr-cmp-pof-var-v2__row-label-stock { font-size: 11.5px; color: var(--c-fg-3); }\n\n.fmstr-cmp-pof-var-v2__pills {\ndisplay: flex;\nflex-wrap: wrap;\ngap: 6px;\n}\n.fmstr-cmp-pof-var-v2__pill {\nposition: relative;\ndisplay: inline-flex;\nalign-items: center;\ngap: 6px;\npadding: 8px 14px;\nborder-radius: 10px;\nborder: 1.5px solid var(--c-border);\nfont-size: 13px;\nfont-weight: 600;\ncolor: var(--c-fg-2);\nbackground: #ffffff;\n}\n.fmstr-cmp-pof-var-v2__pill--active {\nbackground: var(--c-violet-600);\ncolor: #ffffff;\nborder-color: var(--c-violet-600);\n}\n.fmstr-cmp-pof-var-v2__pill--soldout {\nbackground: var(--c-soft);\ncolor: var(--c-fg-3);\ntext-decoration: line-through;\nopacity: 0.65;\n}\n.fmstr-cmp-pof-var-v2__pill--soldout::after {\ncontent: \"Sold out\";\nposition: absolute;\ntop: -8px;\nright: -8px;\nbackground: #fef0c7;\ncolor: #b54708;\nfont-size: 9.5px;\nfont-weight: 700;\npadding: 2px 6px;\nborder-radius: 999px;\ntext-decoration: none;\ntext-transform: uppercase;\nletter-spacing: 0.04em;\n}\n.fmstr-cmp-pof-var-v2__color {\ndisplay: inline-block;\nwidth: 14px;\nheight: 14px;\nborder-radius: 50%;\nborder: 1px solid rgba(0,0,0,.08);\n}\n\n.fmstr-cmp-pof-var-v2__stock-bar {\nmargin-top: 16px;\npadding: 12px;\nbackground: rgba(247, 243, 255, .6);\nborder: 1px solid var(--c-edge);\nborder-radius: 10px;\nfont-size: 12.5px;\ncolor: var(--c-violet-700);\nfont-weight: 600;\ndisplay: flex;\nalign-items: center;\ngap: 8px;\n}\n.fmstr-cmp-pof-var-v2__stock-dot {\nwidth: 6px; height: 6px; border-radius: 50%;\nbackground: var(--c-violet-500);\nanimation: vsPulse 2s ease-in-out infinite;\n}\n@keyframes vsPulse {\n0%, 100% { opacity: 1; transform: scale(1); }\n50% { opacity: 0.5; transform: scale(1.4); }\n}\n\n@media (max-width: 980px) {\n.fmstr-cmp-pof-var-v2__stage { grid-template-columns: 1fr; gap: 24px; }\n.fmstr-cmp-pof-var-v2__callouts--left, .fmstr-cmp-pof-var-v2__callouts--right { padding: 0; }\n.fmstr-cmp-pof-var-v2__card { order: -1; max-width: 460px; margin: 0 auto; width: 100%; }\n.fmstr-cmp-pof-var-v2__callouts { flex-direction: row; flex-wrap: wrap; }\n.fmstr-cmp-pof-var-v2__callout { flex: 1 1 280px; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-pof-var-v2 { padding: 64px 16px; }\n.fmstr-cmp-pof-var-v2__callouts { flex-direction: column; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-pof-var-v2\" aria-labelledby=\"fmstr-cmp-pof-var-v2-h2\">\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__container\">\n\n\u003Cheader class=\"fmstr-cmp-pof-var-v2__header\">\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__eyebrow\">Inventory built in\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-pof-var-v2__h2\" id=\"fmstr-cmp-pof-var-v2-h2\">Variants and stock the way you actually run inventory\u003C/h2>\n\u003Cp class=\"fmstr-cmp-pof-var-v2__sub\">Most order-form tools force one product, one price, one stock count. The Product Catalogue handles real-world inventory: per-size stock, per-color stock, and a switch that closes the option the moment the last unit is gone.\u003C/p>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__stage\">\n\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__callouts fmstr-cmp-pof-var-v2__callouts--left\">\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__callout\">\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__callout-icon\" aria-hidden=\"true\">\n\u003Csvg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M3 6h18M3 12h18M3 18h18\">\u003C/path>\u003C/svg>\n\u003C/span>\n\u003Cdiv>\n\u003Ch3 class=\"fmstr-cmp-pof-var-v2__callout-title\">Size variants\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-var-v2__callout-body\">Add XS, S, M, L, XL (or any sizes you stock) as options inside one product card. The buyer picks size on the live form. You see exactly which size was ordered in the submission.\u003C/p>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__callout\">\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__callout-icon\" aria-hidden=\"true\">\n\u003Csvg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Ccircle cx=\"13.5\" cy=\"6.5\" r=\"2.5\">\u003C/circle>\u003Ccircle cx=\"19\" cy=\"11.5\" r=\"2.5\">\u003C/circle>\u003Ccircle cx=\"6\" cy=\"13\" r=\"2.5\">\u003C/circle>\u003Ccircle cx=\"10\" cy=\"20\" r=\"2.5\">\u003C/circle>\u003C/svg>\n\u003C/span>\n\u003Cdiv>\n\u003Ch3 class=\"fmstr-cmp-pof-var-v2__callout-title\">Color variants\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-var-v2__callout-body\">Same pattern for color, finish, or any second axis. Combine with size for a full size-color matrix on a single product card.\u003C/p>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__card\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__img\">👕\u003C/div>\n\u003Ch3 class=\"fmstr-cmp-pof-var-v2__name\">Studio Tee\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-var-v2__price\">From \u003Cstrong>$24.00\u003C/strong>\u003C/p>\n\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__row\">\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__row-label\">\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__row-label-text\">Size\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__row-label-stock\">3 sizes, 1 sold out\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__pills\">\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__pill\">Small\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__pill fmstr-cmp-pof-var-v2__pill--active\">Medium\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__pill fmstr-cmp-pof-var-v2__pill--soldout\">Large\u003C/span>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__row\">\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__row-label\">\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__row-label-text\">Color\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__pills\">\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__pill fmstr-cmp-pof-var-v2__pill--active\">\u003Cspan class=\"fmstr-cmp-pof-var-v2__color\" style=\"background:#1f2937;border-color:#fff;\">\u003C/span> Charcoal\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__pill\">\u003Cspan class=\"fmstr-cmp-pof-var-v2__color\" style=\"background:#fef3c7;\">\u003C/span> Cream\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__pill\">\u003Cspan class=\"fmstr-cmp-pof-var-v2__color\" style=\"background:#dc2626;\">\u003C/span> Brick\u003C/span>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__stock-bar\">\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__stock-dot\" aria-hidden=\"true\">\u003C/span>\n5 left in stock — Medium, Charcoal\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__callouts fmstr-cmp-pof-var-v2__callouts--right\">\n\u003Cdiv class=\"fmstr-cmp-pof-var-v2__callout\">\n\u003Cspan class=\"fmstr-cmp-pof-var-v2__callout-icon\" aria-hidden=\"true\">\n\u003Csvg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M3 7l9-4 9 4M3 7v10l9 4 9-4V7M3 7l9 4 9-4M12 11v10\">\u003C/path>\u003C/svg>\n\u003C/span>\n\u003Cdiv>\n\u003Ch3 class=\"fmstr-cmp-pof-var-v2__callout-title\">Per-variant stock and the sold-out toggle\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-var-v2__callout-body\">Set stock on a specific variant: 10 of size S, 5 of size M, unlimited on size L. Flip \"disable when sold out\" and the option goes grey when the count hits zero. No oversold mediums, no awkward refund emails.\u003C/p>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\u003C/div>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":88,"__component":63,"markup":89,"useContainer":65},238,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-pof-calc-v2 a { text-decoration: none !important; }\n\n.fmstr-cmp-pof-calc-v2 {\n--c-bg: #ffffff;\n--c-soft: #f9fafb;\n--c-tint: #f7f3ff;\n--c-edge: #e4d7ff;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-100: #ede4ff;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-success: #12b76a;\n--c-border: #eaecf0;\n--c-shadow-lg: 0 20px 50px -12px rgba(16,24,40,.16), 0 8px 20px -8px rgba(16,24,40,.08);\n\nbackground: var(--c-soft);\npadding: 88px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-calc-v2 *, .fmstr-cmp-pof-calc-v2 *::before, .fmstr-cmp-pof-calc-v2 *::after { box-sizing: border-box; }\n.fmstr-cmp-pof-calc-v2 > *, .fmstr-cmp-pof-calc-v2 > * > * { min-width: 0; }\n\n.fmstr-cmp-pof-calc-v2__container { max-width: 1100px; margin: 0 auto; }\n\n.fmstr-cmp-pof-calc-v2__header {\nmax-width: 760px;\nmargin: 0 auto 56px;\ntext-align: center;\n}\n.fmstr-cmp-pof-calc-v2__eyebrow {\ndisplay: inline-block;\nmargin: 0 0 14px;\npadding: 4px 12px;\nborder-radius: 999px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\nfont-size: 12px;\nfont-weight: 700;\ntext-transform: uppercase;\nletter-spacing: 0.08em;\n}\n.fmstr-cmp-pof-calc-v2__h2 {\nmargin: 0 0 14px;\nfont-size: clamp(28px, 3.5vw, 40px);\nline-height: 1.15;\nletter-spacing: -0.02em;\nfont-weight: 700;\n}\n.fmstr-cmp-pof-calc-v2__sub {\nmargin: 0;\nfont-size: 17px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n\n.fmstr-cmp-pof-calc-v2__split {\ndisplay: grid;\ngrid-template-columns: 380px 1fr;\ngap: 40px;\nalign-items: start;\n}\n\n/* Receipt mock */\n.fmstr-cmp-pof-calc-v2__receipt {\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 18px;\nbox-shadow: var(--c-shadow-lg);\npadding: 28px;\n}\n.fmstr-cmp-pof-calc-v2__receipt-head {\ndisplay: flex;\njustify-content: space-between;\nalign-items: baseline;\npadding-bottom: 18px;\nborder-bottom: 1px solid var(--c-border);\nmargin-bottom: 18px;\n}\n.fmstr-cmp-pof-calc-v2__receipt-title { font-size: 13px; color: var(--c-fg-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }\n.fmstr-cmp-pof-calc-v2__receipt-id { font-size: 12px; color: var(--c-fg-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }\n\n.fmstr-cmp-pof-calc-v2__line {\ndisplay: flex;\njustify-content: space-between;\nalign-items: center;\npadding: 10px 0;\nfont-size: 14.5px;\n}\n.fmstr-cmp-pof-calc-v2__line-label { color: var(--c-fg-1); font-weight: 500; }\n.fmstr-cmp-pof-calc-v2__line-meta { color: var(--c-fg-3); font-size: 12.5px; margin-top: 2px; }\n.fmstr-cmp-pof-calc-v2__line-val { color: var(--c-fg-1); font-weight: 600; font-variant-numeric: tabular-nums; }\n\n.fmstr-cmp-pof-calc-v2__sep {\nborder: 0;\nborder-top: 1px dashed var(--c-border);\nmargin: 8px 0;\n}\n\n.fmstr-cmp-pof-calc-v2__line--sub { font-size: 13.5px; color: var(--c-fg-2); }\n.fmstr-cmp-pof-calc-v2__line--sub .fmstr-cmp-pof-calc-v2__line-label { font-weight: 500; }\n.fmstr-cmp-pof-calc-v2__line--sub .fmstr-cmp-pof-calc-v2__line-val { font-weight: 500; color: var(--c-fg-2); }\n\n.fmstr-cmp-pof-calc-v2__line--discount .fmstr-cmp-pof-calc-v2__line-val { color: var(--c-success); }\n\n.fmstr-cmp-pof-calc-v2__coupon-tag {\ndisplay: inline-flex;\nalign-items: center;\ngap: 5px;\npadding: 2px 8px;\nborder-radius: 6px;\nbackground: #d1fadf;\ncolor: #027a48;\nfont-size: 11px;\nfont-weight: 700;\nmargin-left: 8px;\nfont-family: ui-monospace, SFMono-Regular, Menlo, monospace;\nletter-spacing: 0.04em;\n}\n\n.fmstr-cmp-pof-calc-v2__total {\ndisplay: flex;\njustify-content: space-between;\nalign-items: baseline;\npadding-top: 14px;\nmargin-top: 8px;\nborder-top: 2px solid var(--c-fg-1);\n}\n.fmstr-cmp-pof-calc-v2__total-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }\n.fmstr-cmp-pof-calc-v2__total-amt {\nfont-size: 30px;\nfont-weight: 700;\nletter-spacing: -0.02em;\nfont-variant-numeric: tabular-nums;\n}\n.fmstr-cmp-pof-calc-v2__total-amt-curr { font-size: 18px; color: var(--c-fg-3); font-weight: 600; margin-right: 2px; }\n\n.fmstr-cmp-pof-calc-v2__paid {\nmargin-top: 14px;\ndisplay: flex;\nalign-items: center;\ngap: 8px;\npadding: 10px 14px;\nbackground: #d1fadf;\nborder-radius: 10px;\nfont-size: 13px;\nfont-weight: 600;\ncolor: #027a48;\n}\n\n/* Right side: feature blocks */\n.fmstr-cmp-pof-calc-v2__features {\ndisplay: flex;\nflex-direction: column;\ngap: 16px;\npadding-top: 12px;\n}\n\n.fmstr-cmp-pof-calc-v2__feature {\ndisplay: grid;\ngrid-template-columns: 48px 1fr;\ngap: 18px;\npadding: 22px;\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 14px;\n}\n.fmstr-cmp-pof-calc-v2__feature-icon {\nwidth: 48px;\nheight: 48px;\nborder-radius: 12px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n}\n.fmstr-cmp-pof-calc-v2__feature-title {\nmargin: 0 0 6px;\nfont-size: 17px;\nfont-weight: 700;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-calc-v2__feature-body {\nmargin: 0;\nfont-size: 14.5px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-pof-calc-v2__feature-link {\ndisplay: inline-flex;\nalign-items: center;\ngap: 5px;\nmargin-top: 8px;\ncolor: var(--c-violet-600) !important;\nfont-size: 13.5px;\nfont-weight: 600;\ntext-decoration: none !important;\n}\n.fmstr-cmp-pof-calc-v2__feature-link:hover { text-decoration: underline !important; }\n\n@media (max-width: 980px) {\n.fmstr-cmp-pof-calc-v2__split { grid-template-columns: 1fr; gap: 32px; }\n.fmstr-cmp-pof-calc-v2__receipt { max-width: 460px; margin: 0 auto; width: 100%; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-pof-calc-v2 { padding: 64px 16px; }\n.fmstr-cmp-pof-calc-v2__feature { padding: 18px; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-pof-calc-v2\" aria-labelledby=\"fmstr-cmp-pof-calc-v2-h2\">\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__container\">\n\n\u003Cheader class=\"fmstr-cmp-pof-calc-v2__header\">\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__eyebrow\">Math handled\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-pof-calc-v2__h2\" id=\"fmstr-cmp-pof-calc-v2-h2\">Auto-totals, quantity rules, and the math you would otherwise do in a spreadsheet\u003C/h2>\n\u003Cp class=\"fmstr-cmp-pof-calc-v2__sub\">The order form computes line totals and a grand total as the customer adds items. For discount codes and tax, pair the Product Catalogue with Formester's Calculating Fields element.\u003C/p>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__split\">\n\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__receipt\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__receipt-head\">\n\u003Cp class=\"fmstr-cmp-pof-calc-v2__receipt-title\">Order summary\u003C/p>\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__receipt-id\">#ORD-1834\u003C/span>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__line\">\n\u003Cdiv>\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__line-label\">Almond Croissant\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__line-meta\">2 × $4.50, Medium\u003C/div>\n\u003C/div>\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__line-val\">$9.00\u003C/span>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__line\">\n\u003Cdiv>\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__line-label\">Chocolate Babka\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__line-meta\">1 × $12.00, Large\u003C/div>\n\u003C/div>\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__line-val\">$12.00\u003C/span>\n\u003C/div>\n\n\u003Chr class=\"fmstr-cmp-pof-calc-v2__sep\">\n\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__line fmstr-cmp-pof-calc-v2__line--sub\">\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__line-label\">Subtotal\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__line-val\">$21.00\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__line fmstr-cmp-pof-calc-v2__line--sub fmstr-cmp-pof-calc-v2__line--discount\">\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__line-label\">Coupon \u003Cspan class=\"fmstr-cmp-pof-calc-v2__coupon-tag\">BAKER10\u003C/span>\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__line-val\">−$2.10\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__line fmstr-cmp-pof-calc-v2__line--sub\">\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__line-label\">Tax (9%)\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__line-val\">+$1.70\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__line fmstr-cmp-pof-calc-v2__line--sub\">\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__line-label\">Pickup\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__line-val\">Free\u003C/span>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__total\">\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__total-label\">Total\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__total-amt\">\u003Cspan class=\"fmstr-cmp-pof-calc-v2__total-amt-curr\">$\u003C/span>20.60\u003C/span>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__paid\">\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"20 6 9 17 4 12\">\u003C/polyline>\u003C/svg>\nPaid by card via Stripe\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__features\">\n\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__feature\">\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__feature-icon\" aria-hidden=\"true\">\n\u003Csvg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cline x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\">\u003C/line>\u003Cpath d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\">\u003C/path>\u003C/svg>\n\u003C/span>\n\u003Cdiv>\n\u003Ch3 class=\"fmstr-cmp-pof-calc-v2__feature-title\">Automatic line and order totals\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-calc-v2__feature-body\">Quantity times unit price for each product, summed across the order. The grand total updates live while the customer fills the form, so they see exactly what their card will be charged.\u003C/p>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-calc-v2__feature\">\n\u003Cspan class=\"fmstr-cmp-pof-calc-v2__feature-icon\" aria-hidden=\"true\">\n\u003Csvg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z\">\u003C/path>\u003Cline x1=\"7\" y1=\"7\" x2=\"7.01\" y2=\"7\">\u003C/line>\u003C/svg>\n\u003C/span>\n\u003Cdiv>\n\u003Ch3 class=\"fmstr-cmp-pof-calc-v2__feature-title\">Discount codes and tax (via Calculating Fields)\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-calc-v2__feature-body\">Add a Calculating Fields block to apply a percentage discount, a flat coupon amount, or a tax rate on top of the subtotal. Hide or show the discount field with conditional logic. If you charge through Stripe, Stripe-native coupon codes also flow through on top of the calculated total.\u003C/p>\n\u003Ca class=\"fmstr-cmp-pof-calc-v2__feature-link\" href=\"https://formester.com/features/calculating-fields/\">See Calculating Fields →\u003C/a>\n\u003C/div>\n\u003C/div>\n\n\u003C/div>\n\n\u003C/div>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":91,"__component":63,"markup":92,"useContainer":65},239,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-pof-log-v2 a { text-decoration: none !important; }\n\n.fmstr-cmp-pof-log-v2 {\n--c-bg: #ffffff;\n--c-soft: #f9fafb;\n--c-tint: #f7f3ff;\n--c-edge: #e4d7ff;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-100: #ede4ff;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n--c-shadow-lg: 0 20px 50px -12px rgba(16,24,40,.16), 0 8px 20px -8px rgba(16,24,40,.08);\n\nbackground: var(--c-soft);\npadding: 88px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-log-v2 *, .fmstr-cmp-pof-log-v2 *::before, .fmstr-cmp-pof-log-v2 *::after { box-sizing: border-box; }\n.fmstr-cmp-pof-log-v2 > *, .fmstr-cmp-pof-log-v2 > * > * { min-width: 0; }\n\n.fmstr-cmp-pof-log-v2__container { max-width: 1100px; margin: 0 auto; }\n\n.fmstr-cmp-pof-log-v2__header {\nmax-width: 760px;\nmargin: 0 auto 48px;\ntext-align: center;\n}\n.fmstr-cmp-pof-log-v2__eyebrow {\ndisplay: inline-block;\nmargin: 0 0 14px;\npadding: 4px 12px;\nborder-radius: 999px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\nfont-size: 12px;\nfont-weight: 700;\ntext-transform: uppercase;\nletter-spacing: 0.08em;\n}\n.fmstr-cmp-pof-log-v2__h2 {\nmargin: 0 0 14px;\nfont-size: clamp(28px, 3.5vw, 40px);\nline-height: 1.15;\nletter-spacing: -0.02em;\nfont-weight: 700;\n}\n.fmstr-cmp-pof-log-v2__sub {\nmargin: 0;\nfont-size: 17px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n\n.fmstr-cmp-pof-log-v2__split {\ndisplay: grid;\ngrid-template-columns: 1fr 400px;\ngap: 48px;\nalign-items: start;\n}\n\n/* Left: feature blocks */\n.fmstr-cmp-pof-log-v2__features {\ndisplay: flex;\nflex-direction: column;\ngap: 14px;\n}\n.fmstr-cmp-pof-log-v2__feature {\ndisplay: grid;\ngrid-template-columns: 44px 1fr;\ngap: 16px;\npadding: 20px;\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 14px;\ntransition: border-color .15s ease;\n}\n.fmstr-cmp-pof-log-v2__feature--active {\nborder-color: var(--c-violet-500);\nbox-shadow: 0 0 0 4px rgba(127, 86, 217, .08);\n}\n.fmstr-cmp-pof-log-v2__feature-icon {\nwidth: 44px;\nheight: 44px;\nborder-radius: 11px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n}\n.fmstr-cmp-pof-log-v2__feature--active .fmstr-cmp-pof-log-v2__feature-icon {\nbackground: var(--c-violet-600);\ncolor: #ffffff;\n}\n.fmstr-cmp-pof-log-v2__feature-title {\nmargin: 0 0 6px;\nfont-size: 16px;\nfont-weight: 700;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-log-v2__feature-body {\nmargin: 0;\nfont-size: 14px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-pof-log-v2__feature-link {\ndisplay: inline-flex;\nalign-items: center;\ngap: 4px;\nmargin-top: 8px;\ncolor: var(--c-violet-600) !important;\nfont-size: 13px;\nfont-weight: 600;\ntext-decoration: none !important;\n}\n.fmstr-cmp-pof-log-v2__feature-link:hover { text-decoration: underline !important; }\n\n/* Right: form mock */\n.fmstr-cmp-pof-log-v2__mock {\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 18px;\npadding: 24px;\nbox-shadow: var(--c-shadow-lg);\nposition: sticky;\ntop: 24px;\n}\n.fmstr-cmp-pof-log-v2__mock-head {\nfont-size: 12px;\nfont-weight: 700;\ncolor: var(--c-fg-3);\ntext-transform: uppercase;\nletter-spacing: 0.06em;\nmargin: 0 0 14px;\n}\n\n.fmstr-cmp-pof-log-v2__toggle {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\ngap: 6px;\npadding: 4px;\nbackground: var(--c-soft);\nborder-radius: 10px;\nmargin-bottom: 16px;\n}\n.fmstr-cmp-pof-log-v2__toggle-opt {\npadding: 9px 12px;\nborder-radius: 8px;\ntext-align: center;\nfont-size: 13.5px;\nfont-weight: 600;\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-pof-log-v2__toggle-opt--active {\nbackground: #ffffff;\ncolor: var(--c-violet-700);\nbox-shadow: 0 1px 3px rgba(16,24,40,.08);\n}\n\n.fmstr-cmp-pof-log-v2__field { margin-bottom: 12px; }\n.fmstr-cmp-pof-log-v2__field-label {\ndisplay: block;\nfont-size: 12px;\nfont-weight: 600;\ncolor: var(--c-fg-3);\ntext-transform: uppercase;\nletter-spacing: 0.06em;\nmargin-bottom: 6px;\n}\n.fmstr-cmp-pof-log-v2__input {\npadding: 10px 12px;\nbackground: var(--c-soft);\nborder: 1px solid var(--c-border);\nborder-radius: 8px;\nfont-size: 13.5px;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-log-v2__input--placeholder { color: var(--c-fg-3); }\n.fmstr-cmp-pof-log-v2__row {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\ngap: 8px;\n}\n.fmstr-cmp-pof-log-v2__upload {\npadding: 14px;\nbackground: var(--c-soft);\nborder: 1.5px dashed var(--c-violet-300, var(--c-edge));\nborder-radius: 10px;\ntext-align: center;\nfont-size: 13px;\ncolor: var(--c-violet-700);\nfont-weight: 600;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\ngap: 8px;\n}\n\n@media (max-width: 980px) {\n.fmstr-cmp-pof-log-v2__split { grid-template-columns: 1fr; }\n.fmstr-cmp-pof-log-v2__mock { position: static; max-width: 460px; margin: 0 auto; width: 100%; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-pof-log-v2 { padding: 64px 16px; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-pof-log-v2\" aria-labelledby=\"fmstr-cmp-pof-log-v2-h2\">\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__container\">\n\n\u003Cheader class=\"fmstr-cmp-pof-log-v2__header\">\n\u003Cspan class=\"fmstr-cmp-pof-log-v2__eyebrow\">Fulfillment\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-pof-log-v2__h2\" id=\"fmstr-cmp-pof-log-v2-h2\">Shipping, pickup, and made-to-order requests on the same form\u003C/h2>\n\u003Cp class=\"fmstr-cmp-pof-log-v2__sub\">Add the fields you need for fulfillment without bolting on a second tool. Address blocks, pickup-versus-ship toggles, and file uploads for custom work all live inside the same form.\u003C/p>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__split\">\n\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__features\">\n\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__feature\">\n\u003Cspan class=\"fmstr-cmp-pof-log-v2__feature-icon\" aria-hidden=\"true\">\n\u003Csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\">\u003C/path>\u003Cpolyline points=\"9 22 9 12 15 12 15 22\">\u003C/polyline>\u003C/svg>\n\u003C/span>\n\u003Cdiv>\n\u003Ch3 class=\"fmstr-cmp-pof-log-v2__feature-title\">Delivery address\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-log-v2__feature-body\">Drop in an Address field and Formester collects street, city, state or region, postal code, and country in one block. Use conditional logic to show it only when the customer picks \"Ship to me\" over \"Pickup.\"\u003C/p>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__feature\">\n\u003Cspan class=\"fmstr-cmp-pof-log-v2__feature-icon\" aria-hidden=\"true\">\n\u003Csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M16 3h5v5\">\u003C/path>\u003Cpath d=\"M8 3H3v5\">\u003C/path>\u003Cpath d=\"M16 21h5v-5\">\u003C/path>\u003Cpath d=\"M8 21H3v-5\">\u003C/path>\u003Cline x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\">\u003C/line>\u003Cline x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\">\u003C/line>\u003Cline x1=\"14\" y1=\"14\" x2=\"21\" y2=\"21\">\u003C/line>\u003Cline x1=\"3\" y1=\"3\" x2=\"10\" y2=\"10\">\u003C/line>\u003C/svg>\n\u003C/span>\n\u003Cdiv>\n\u003Ch3 class=\"fmstr-cmp-pof-log-v2__feature-title\">Pickup or ship toggle\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-log-v2__feature-body\">A single-choice field with two options (Pickup, Ship). Conditional logic reveals or hides the address block, a delivery date, or pickup-window selector based on the answer.\u003C/p>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__feature\">\n\u003Cspan class=\"fmstr-cmp-pof-log-v2__feature-icon\" aria-hidden=\"true\">\n\u003Csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\">\u003C/path>\u003Cpolyline points=\"17 8 12 3 7 8\">\u003C/polyline>\u003Cline x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\">\u003C/line>\u003C/svg>\n\u003C/span>\n\u003Cdiv>\n\u003Ch3 class=\"fmstr-cmp-pof-log-v2__feature-title\">File upload for custom orders\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-log-v2__feature-body\">Add a File Upload field so customers can attach a reference image, a logo for embroidery, or a spec sheet. Admin-configurable allowed types, max file size, multiple uploads, and camera capture for direct-from-phone images.\u003C/p>\n\u003Ca class=\"fmstr-cmp-pof-log-v2__feature-link\" href=\"https://formester.com/features/file-upload-forms/\">See file upload →\u003C/a>\n\u003C/div>\n\u003C/div>\n\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__mock\" aria-hidden=\"true\">\n\u003Cp class=\"fmstr-cmp-pof-log-v2__mock-head\">Customer view\u003C/p>\n\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__toggle\">\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__toggle-opt\">Pickup\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__toggle-opt fmstr-cmp-pof-log-v2__toggle-opt--active\">Ship to me\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__field\">\n\u003Cspan class=\"fmstr-cmp-pof-log-v2__field-label\">Street address\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__input\">42 Linden Avenue\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__field\">\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__row\">\n\u003Cdiv>\n\u003Cspan class=\"fmstr-cmp-pof-log-v2__field-label\">City\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__input\">Brooklyn\u003C/div>\n\u003C/div>\n\u003Cdiv>\n\u003Cspan class=\"fmstr-cmp-pof-log-v2__field-label\">ZIP\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__input\">11215\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__field\">\n\u003Cspan class=\"fmstr-cmp-pof-log-v2__field-label\">Reference image (optional)\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-log-v2__upload\">\n\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\">\u003C/path>\u003Cpolyline points=\"17 8 12 3 7 8\">\u003C/polyline>\u003Cline x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\">\u003C/line>\u003C/svg>\nClick to upload or drag here\n\u003C/div>\n\u003C/div>\n\n\u003C/div>\n\n\u003C/div>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":94,"__component":63,"markup":95,"useContainer":65},240,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-pof-brand-v2 a { text-decoration: none !important; }\n\n.fmstr-cmp-pof-brand-v2 {\n--c-bg: #ffffff;\n--c-soft: #f9fafb;\n--c-tint: #f7f3ff;\n--c-edge: #e4d7ff;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-100: #ede4ff;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-success: #12b76a;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n--c-shadow-md: 0 8px 24px rgba(16,24,40,.08);\n\nbackground: #ffffff;\npadding: 88px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-brand-v2 *, .fmstr-cmp-pof-brand-v2 *::before, .fmstr-cmp-pof-brand-v2 *::after { box-sizing: border-box; }\n.fmstr-cmp-pof-brand-v2 > *, .fmstr-cmp-pof-brand-v2 > * > * { min-width: 0; }\n\n.fmstr-cmp-pof-brand-v2__container { max-width: 1180px; margin: 0 auto; }\n\n.fmstr-cmp-pof-brand-v2__header {\nmax-width: 760px;\nmargin: 0 auto 48px;\ntext-align: center;\n}\n.fmstr-cmp-pof-brand-v2__eyebrow {\ndisplay: inline-block;\nmargin: 0 0 14px;\npadding: 4px 12px;\nborder-radius: 999px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\nfont-size: 12px;\nfont-weight: 700;\ntext-transform: uppercase;\nletter-spacing: 0.08em;\n}\n.fmstr-cmp-pof-brand-v2__h2 {\nmargin: 0 0 14px;\nfont-size: clamp(28px, 3.5vw, 40px);\nline-height: 1.15;\nletter-spacing: -0.02em;\nfont-weight: 700;\n}\n.fmstr-cmp-pof-brand-v2__sub {\nmargin: 0;\nfont-size: 17px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n\n.fmstr-cmp-pof-brand-v2__grid {\ndisplay: grid;\ngrid-template-columns: repeat(2, 1fr);\ngap: 20px;\n}\n\n.fmstr-cmp-pof-brand-v2__card {\ndisplay: flex;\nflex-direction: column;\ngap: 16px;\npadding: 28px;\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 18px;\nbox-shadow: var(--c-shadow-sm);\ntransition: border-color .2s ease, box-shadow .2s ease;\n}\n.fmstr-cmp-pof-brand-v2__card:hover {\nborder-color: var(--c-edge);\nbox-shadow: var(--c-shadow-md);\n}\n\n.fmstr-cmp-pof-brand-v2__copy {\ndisplay: flex;\nflex-direction: column;\ngap: 8px;\n}\n.fmstr-cmp-pof-brand-v2__icon {\nwidth: 40px;\nheight: 40px;\nborder-radius: 10px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n}\n.fmstr-cmp-pof-brand-v2__title {\nmargin: 0;\nfont-size: 17px;\nfont-weight: 700;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-brand-v2__body {\nmargin: 0;\nfont-size: 14.5px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-pof-brand-v2__body code {\nfont-family: ui-monospace, SFMono-Regular, Menlo, monospace;\nfont-size: 13px;\npadding: 1px 6px;\nborder-radius: 4px;\nbackground: var(--c-tint);\ncolor: var(--c-violet-700);\n}\n\n.fmstr-cmp-pof-brand-v2__proof {\nmargin-top: 4px;\npadding: 16px;\nbackground: var(--c-soft);\nborder-radius: 12px;\nborder: 1px solid var(--c-border);\n}\n\n/* Proof 1: browser URL bar */\n.fmstr-cmp-pof-brand-v2__browser {\ndisplay: flex;\nalign-items: center;\ngap: 8px;\npadding: 8px 12px;\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nborder-radius: 10px;\nfont-size: 13px;\n}\n.fmstr-cmp-pof-brand-v2__browser-dots {\ndisplay: inline-flex;\ngap: 4px;\n}\n.fmstr-cmp-pof-brand-v2__browser-dot {\nwidth: 8px; height: 8px; border-radius: 50%;\n}\n.fmstr-cmp-pof-brand-v2__browser-bar {\nflex: 1;\npadding: 6px 10px;\nbackground: var(--c-soft);\nborder-radius: 6px;\nfont-family: ui-monospace, SFMono-Regular, Menlo, monospace;\nfont-size: 12.5px;\ncolor: var(--c-fg-1);\ndisplay: flex;\nalign-items: center;\ngap: 6px;\n}\n.fmstr-cmp-pof-brand-v2__browser-lock { color: var(--c-success); }\n.fmstr-cmp-pof-brand-v2__browser-url-highlight {\ncolor: var(--c-violet-700);\nfont-weight: 700;\n}\n\n/* Proof 2: fonts + color swatches */\n.fmstr-cmp-pof-brand-v2__theme {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\ngap: 12px;\n}\n.fmstr-cmp-pof-brand-v2__theme-row {\ndisplay: flex;\nalign-items: center;\ngap: 8px;\nfont-size: 13px;\n}\n.fmstr-cmp-pof-brand-v2__swatch {\nwidth: 24px; height: 24px;\nborder-radius: 6px;\nborder: 1px solid rgba(0,0,0,.08);\nflex-shrink: 0;\n}\n.fmstr-cmp-pof-brand-v2__font-sample {\npadding: 4px 10px;\nborder-radius: 6px;\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nfont-size: 13px;\nfont-weight: 600;\n}\n.fmstr-cmp-pof-brand-v2__font-sample--serif { font-family: Georgia, 'Times New Roman', serif; }\n.fmstr-cmp-pof-brand-v2__font-sample--display { font-family: Georgia, serif; font-style: italic; }\n\n/* Proof 3: CSS snippet */\n.fmstr-cmp-pof-brand-v2__snippet {\nfont-family: ui-monospace, SFMono-Regular, Menlo, monospace;\nfont-size: 12px;\nline-height: 1.6;\ncolor: var(--c-fg-1);\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nborder-radius: 8px;\npadding: 12px;\noverflow-x: auto;\n}\n.fmstr-cmp-pof-brand-v2__snippet-prop { color: #6941c6; }\n.fmstr-cmp-pof-brand-v2__snippet-val { color: #027a48; }\n.fmstr-cmp-pof-brand-v2__snippet-comment { color: var(--c-fg-3); font-style: italic; }\n\n/* Proof 4: badge before/after */\n.fmstr-cmp-pof-brand-v2__compare {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\ngap: 12px;\n}\n.fmstr-cmp-pof-brand-v2__compare-tile {\npadding: 14px;\nborder-radius: 10px;\ntext-align: center;\nfont-size: 13.5px;\n}\n.fmstr-cmp-pof-brand-v2__compare-tile--off {\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\n}\n.fmstr-cmp-pof-brand-v2__compare-tile--on {\nbackground: var(--c-violet-100);\nborder: 1px solid var(--c-edge);\n}\n.fmstr-cmp-pof-brand-v2__compare-label {\ndisplay: block;\nfont-size: 11px;\nfont-weight: 700;\ncolor: var(--c-fg-3);\ntext-transform: uppercase;\nletter-spacing: 0.06em;\nmargin-bottom: 8px;\n}\n.fmstr-cmp-pof-brand-v2__compare-tile--on .fmstr-cmp-pof-brand-v2__compare-label { color: var(--c-violet-700); }\n.fmstr-cmp-pof-brand-v2__compare-badge {\ndisplay: inline-block;\npadding: 4px 10px;\nborder-radius: 999px;\nbackground: var(--c-soft);\ncolor: var(--c-fg-3);\nfont-size: 11px;\nfont-weight: 600;\n}\n.fmstr-cmp-pof-brand-v2__compare-badge--strike { text-decoration: line-through; opacity: 0.55; }\n.fmstr-cmp-pof-brand-v2__compare-tile--on .fmstr-cmp-pof-brand-v2__compare-badge { background: var(--c-violet-600); color: #ffffff; }\n\n@media (max-width: 880px) {\n.fmstr-cmp-pof-brand-v2__grid { grid-template-columns: 1fr; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-pof-brand-v2 { padding: 64px 16px; }\n.fmstr-cmp-pof-brand-v2__card { padding: 22px; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-pof-brand-v2\" aria-labelledby=\"fmstr-cmp-pof-brand-v2-h2\">\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__container\">\n\n\u003Cheader class=\"fmstr-cmp-pof-brand-v2__header\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__eyebrow\">White-label\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-pof-brand-v2__h2\" id=\"fmstr-cmp-pof-brand-v2-h2\">Looks like your store, not like a form\u003C/h2>\n\u003Cp class=\"fmstr-cmp-pof-brand-v2__sub\">Customers buying from you should never feel like they left your site. Every visible piece of the order form is yours to brand.\u003C/p>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__grid\">\n\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__card\">\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__copy\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__icon\" aria-hidden=\"true\">\n\u003Csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\">\u003C/circle>\u003Cline x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\">\u003C/line>\u003Cpath d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\">\u003C/path>\u003C/svg>\n\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-brand-v2__title\">Custom domain\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-brand-v2__body\">Serve the form from \u003Ccode>order.yourdomain.com\u003C/code> or \u003Ccode>shop.yourdomain.com\u003C/code>. No \u003Ccode>formester.com\u003C/code> in the URL, no shared subdomain.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__proof\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__browser\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__browser-dots\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__browser-dot\" style=\"background:#fda4af;\">\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__browser-dot\" style=\"background:#fde68a;\">\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__browser-dot\" style=\"background:#86efac;\">\u003C/span>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__browser-bar\">\n\u003Csvg class=\"fmstr-cmp-pof-brand-v2__browser-lock\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Crect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\">\u003C/rect>\u003Cpath d=\"M7 11V7a5 5 0 0 1 10 0v4\">\u003C/path>\u003C/svg>\n\u003Cspan>\u003Cspan class=\"fmstr-cmp-pof-brand-v2__browser-url-highlight\">order.yourbakery.com\u003C/span>/cake\u003C/span>\n\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__card\">\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__copy\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__icon\" aria-hidden=\"true\">\n\u003Csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Ccircle cx=\"13.5\" cy=\"6.5\" r=\"2.5\">\u003C/circle>\u003Ccircle cx=\"19\" cy=\"11.5\" r=\"2.5\">\u003C/circle>\u003Ccircle cx=\"6\" cy=\"13\" r=\"2.5\">\u003C/circle>\u003Ccircle cx=\"10\" cy=\"20\" r=\"2.5\">\u003C/circle>\u003Cpath d=\"M12 2a10 10 0 0 0 0 20\">\u003C/path>\u003C/svg>\n\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-brand-v2__title\">Fonts, colors, and theme\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-brand-v2__body\">Match your site's typeface, brand palette, button shapes, and corner radii. The form picks up the same visual language your homepage uses.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__proof\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__theme\">\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__theme-row\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__swatch\" style=\"background:#6941c6;\">\u003C/span>\n\u003Cspan style=\"color:var(--c-fg-3);\">#6941C6\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__theme-row\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__swatch\" style=\"background:#f59e0b;\">\u003C/span>\n\u003Cspan style=\"color:var(--c-fg-3);\">#F59E0B\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__theme-row\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__font-sample\">Sans\u003C/span>\n\u003Cspan style=\"color:var(--c-fg-3);font-size:12px;\">Inter\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__theme-row\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__font-sample fmstr-cmp-pof-brand-v2__font-sample--display\">Serif\u003C/span>\n\u003Cspan style=\"color:var(--c-fg-3);font-size:12px;\">Playfair\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__card\">\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__copy\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__icon\" aria-hidden=\"true\">\n\u003Csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"16 18 22 12 16 6\">\u003C/polyline>\u003Cpolyline points=\"8 6 2 12 8 18\">\u003C/polyline>\u003C/svg>\n\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-brand-v2__title\">Custom CSS\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-brand-v2__body\">Tweak anything the theme editor does not cover. Brand-specific spacing, animations, hover states, the lot.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__proof\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__snippet\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__snippet-comment\">/* your form */\u003C/span>\u003Cbr>\n.fmstr-form {\u003Cbr>\n  \u003Cspan class=\"fmstr-cmp-pof-brand-v2__snippet-prop\">--brand\u003C/span>: \u003Cspan class=\"fmstr-cmp-pof-brand-v2__snippet-val\">#6941c6\u003C/span>;\u003Cbr>\n  \u003Cspan class=\"fmstr-cmp-pof-brand-v2__snippet-prop\">border-radius\u003C/span>: \u003Cspan class=\"fmstr-cmp-pof-brand-v2__snippet-val\">14px\u003C/span>;\u003Cbr>\n}\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__card\">\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__copy\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__icon\" aria-hidden=\"true\">\n\u003Csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\">\u003C/path>\u003Cline x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\">\u003C/line>\u003C/svg>\n\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-brand-v2__title\">No Formester branding on paid plans\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-brand-v2__body\">Personal plan ($13/mo) and above strip the Formester badge entirely. To the customer, the order form is yours top to bottom.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__proof\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__compare\">\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__compare-tile fmstr-cmp-pof-brand-v2__compare-tile--off\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__compare-label\">Free\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__compare-badge\">Made with Formester\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-brand-v2__compare-tile fmstr-cmp-pof-brand-v2__compare-tile--on\">\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__compare-label\">Personal+\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-brand-v2__compare-badge\">Your brand only\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\u003C/div>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":97,"__component":63,"markup":98,"useContainer":65},241,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-pof-tpl-v2 a { text-decoration: none !important; }\n\n.fmstr-cmp-pof-tpl-v2 {\n--c-bg: #ffffff;\n--c-soft: #f9fafb;\n--c-tint: #f7f3ff;\n--c-edge: #e4d7ff;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-100: #ede4ff;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n--c-shadow-md: 0 8px 24px rgba(16,24,40,.08);\n\nbackground: var(--c-soft);\npadding: 88px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-tpl-v2 *, .fmstr-cmp-pof-tpl-v2 *::before, .fmstr-cmp-pof-tpl-v2 *::after { box-sizing: border-box; }\n.fmstr-cmp-pof-tpl-v2 > *, .fmstr-cmp-pof-tpl-v2 > * > * { min-width: 0; }\n\n.fmstr-cmp-pof-tpl-v2__container { max-width: 1180px; margin: 0 auto; }\n\n.fmstr-cmp-pof-tpl-v2__header {\nmax-width: 760px;\nmargin: 0 auto 36px;\ntext-align: center;\n}\n.fmstr-cmp-pof-tpl-v2__eyebrow {\ndisplay: inline-block;\nmargin: 0 0 14px;\npadding: 4px 12px;\nborder-radius: 999px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\nfont-size: 12px;\nfont-weight: 700;\ntext-transform: uppercase;\nletter-spacing: 0.08em;\n}\n.fmstr-cmp-pof-tpl-v2__h2 {\nmargin: 0 0 14px;\nfont-size: clamp(28px, 3.5vw, 40px);\nline-height: 1.15;\nletter-spacing: -0.02em;\nfont-weight: 700;\n}\n.fmstr-cmp-pof-tpl-v2__sub {\nmargin: 0;\nfont-size: 17px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n\n/* Filter chips */\n.fmstr-cmp-pof-tpl-v2__filters {\ndisplay: flex;\nflex-wrap: wrap;\ngap: 8px;\njustify-content: center;\nmargin: 0 0 40px;\n}\n.fmstr-cmp-pof-tpl-v2__chip {\npadding: 8px 16px;\nborder-radius: 999px;\nborder: 1px solid var(--c-border);\nbackground: var(--c-bg);\ncolor: var(--c-fg-2);\nfont-size: 13.5px;\nfont-weight: 600;\ncursor: pointer;\ntransition: all .15s ease;\n}\n.fmstr-cmp-pof-tpl-v2__chip:hover {\nborder-color: var(--c-violet-500);\ncolor: var(--c-violet-700);\n}\n.fmstr-cmp-pof-tpl-v2__chip--active {\nbackground: var(--c-violet-600);\ncolor: #ffffff;\nborder-color: var(--c-violet-600);\n}\n\n/* Template grid */\n.fmstr-cmp-pof-tpl-v2__grid {\ndisplay: grid;\ngrid-template-columns: repeat(4, 1fr);\ngap: 20px;\n}\n\n.fmstr-cmp-pof-tpl-v2__card {\ndisplay: flex;\nflex-direction: column;\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 14px;\nbox-shadow: var(--c-shadow-sm);\noverflow: hidden;\ntext-decoration: none !important;\ncolor: inherit !important;\ntransition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;\n}\n.fmstr-cmp-pof-tpl-v2__card:hover {\nborder-color: var(--c-edge);\nbox-shadow: var(--c-shadow-md);\ntransform: translateY(-2px);\ntext-decoration: none !important;\n}\n\n/* Form-preview thumbnail */\n.fmstr-cmp-pof-tpl-v2__thumb {\nheight: 152px;\npadding: 16px;\ndisplay: flex;\nflex-direction: column;\ngap: 7px;\njustify-content: center;\nposition: relative;\noverflow: hidden;\n}\n.fmstr-cmp-pof-tpl-v2__thumb-bar {\nheight: 9px;\nborder-radius: 999px;\nbackground: rgba(255, 255, 255, 0.55);\n}\n.fmstr-cmp-pof-tpl-v2__thumb-bar--short { width: 60%; }\n.fmstr-cmp-pof-tpl-v2__thumb-bar--mid { width: 80%; }\n.fmstr-cmp-pof-tpl-v2__thumb-btn {\nmargin-top: 6px;\nalign-self: flex-start;\npadding: 6px 12px;\nborder-radius: 6px;\nbackground: rgba(255, 255, 255, 0.92);\ncolor: var(--c-fg-1);\nfont-size: 11px;\nfont-weight: 700;\n}\n.fmstr-cmp-pof-tpl-v2__thumb-emoji {\nposition: absolute;\ntop: 12px;\nright: 14px;\nfont-size: 30px;\nopacity: 0.92;\nfilter: drop-shadow(0 4px 8px rgba(0,0,0,0.18));\n}\n\n.fmstr-cmp-pof-tpl-v2__thumb--bakery { background: linear-gradient(135deg, #fde68a, #f59e0b); }\n.fmstr-cmp-pof-tpl-v2__thumb--tshirt { background: linear-gradient(135deg, #c4b5fd, #7c3aed); }\n.fmstr-cmp-pof-tpl-v2__thumb--apparel { background: linear-gradient(135deg, #fda4af, #be123c); }\n.fmstr-cmp-pof-tpl-v2__thumb--fundraiser { background: linear-gradient(135deg, #86efac, #16a34a); }\n.fmstr-cmp-pof-tpl-v2__thumb--school { background: linear-gradient(135deg, #93c5fd, #1d4ed8); }\n.fmstr-cmp-pof-tpl-v2__thumb--sweatshirt { background: linear-gradient(135deg, #fdba74, #c2410c); }\n.fmstr-cmp-pof-tpl-v2__thumb--product { background: linear-gradient(135deg, #67e8f9, #0e7490); }\n.fmstr-cmp-pof-tpl-v2__thumb--catering { background: linear-gradient(135deg, #fcd34d, #b45309); }\n\n.fmstr-cmp-pof-tpl-v2__meta {\npadding: 16px 18px 18px;\ndisplay: flex;\nflex-direction: column;\ngap: 8px;\n}\n.fmstr-cmp-pof-tpl-v2__name {\nmargin: 0;\nfont-size: 15px;\nline-height: 1.3;\nfont-weight: 700;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-tpl-v2__desc {\nmargin: 0;\nfont-size: 13.5px;\nline-height: 1.55;\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-pof-tpl-v2__tag {\ndisplay: inline-flex;\nalign-items: center;\ngap: 4px;\nfont-size: 11.5px;\nfont-weight: 600;\ncolor: var(--c-violet-700);\nbackground: var(--c-violet-100);\npadding: 3px 8px;\nborder-radius: 6px;\nalign-self: flex-start;\nmargin-top: 2px;\n}\n\n.fmstr-cmp-pof-tpl-v2__browse {\ndisplay: flex;\njustify-content: center;\nmargin-top: 32px;\n}\n.fmstr-cmp-pof-tpl-v2__browse a {\ndisplay: inline-flex;\nalign-items: center;\ngap: 8px;\npadding: 11px 22px;\nborder-radius: 10px;\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\ncolor: var(--c-fg-1) !important;\nfont-size: 14.5px;\nfont-weight: 600;\ntext-decoration: none !important;\ntransition: all .15s ease;\n}\n.fmstr-cmp-pof-tpl-v2__browse a:hover {\nborder-color: var(--c-violet-500);\ncolor: var(--c-violet-700) !important;\n}\n\n@media (max-width: 1000px) {\n.fmstr-cmp-pof-tpl-v2__grid { grid-template-columns: repeat(3, 1fr); }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-pof-tpl-v2 { padding: 64px 16px; }\n.fmstr-cmp-pof-tpl-v2__grid { grid-template-columns: repeat(2, 1fr); }\n}\n@media (max-width: 540px) {\n.fmstr-cmp-pof-tpl-v2__grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-pof-tpl-v2\" aria-labelledby=\"fmstr-cmp-pof-tpl-v2-h2\">\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__container\">\n\n\u003Cheader class=\"fmstr-cmp-pof-tpl-v2__header\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__eyebrow\">Templates\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-pof-tpl-v2__h2\" id=\"fmstr-cmp-pof-tpl-v2-h2\">Start from a template instead of a blank form\u003C/h2>\n\u003Cp class=\"fmstr-cmp-pof-tpl-v2__sub\">Eight order-form templates ready to fork. Each one ships with the Product Catalogue element pre-loaded so you can swap in your own products and publish.\u003C/p>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__filters\" role=\"tablist\" aria-label=\"Template categories\">\n\u003Cbutton class=\"fmstr-cmp-pof-tpl-v2__chip fmstr-cmp-pof-tpl-v2__chip--active\" type=\"button\" data-filter=\"all\">All\u003C/button>\n\u003Cbutton class=\"fmstr-cmp-pof-tpl-v2__chip\" type=\"button\" data-filter=\"food\">Food\u003C/button>\n\u003Cbutton class=\"fmstr-cmp-pof-tpl-v2__chip\" type=\"button\" data-filter=\"apparel\">Apparel\u003C/button>\n\u003Cbutton class=\"fmstr-cmp-pof-tpl-v2__chip\" type=\"button\" data-filter=\"fundraiser\">Fundraiser\u003C/button>\n\u003Cbutton class=\"fmstr-cmp-pof-tpl-v2__chip\" type=\"button\" data-filter=\"school\">School\u003C/button>\n\u003Cbutton class=\"fmstr-cmp-pof-tpl-v2__chip\" type=\"button\" data-filter=\"made-to-order\">Made-to-order\u003C/button>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__grid\">\n\n\u003Ca class=\"fmstr-cmp-pof-tpl-v2__card\" data-category=\"food\" href=\"https://formester.com/templates/bakery-order-form-33214/\">\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb fmstr-cmp-pof-tpl-v2__thumb--bakery\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-emoji\">🥐\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--short\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-btn\">Order now\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__meta\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__tag\">Food\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-tpl-v2__name\">Bakery order form\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-tpl-v2__desc\">Sized for cakes, cupcakes, and made-fresh-daily inventory.\u003C/p>\n\u003C/div>\n\u003C/a>\n\n\u003Ca class=\"fmstr-cmp-pof-tpl-v2__card\" data-category=\"apparel\" href=\"https://formester.com/templates/tshirt-order-form-2901/\">\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb fmstr-cmp-pof-tpl-v2__thumb--tshirt\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-emoji\">👕\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--short\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-btn\">Pick size\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__meta\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__tag\">Apparel\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-tpl-v2__name\">T-shirt order form\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-tpl-v2__desc\">Size and color variants, per-size stock, group-order friendly.\u003C/p>\n\u003C/div>\n\u003C/a>\n\n\u003Ca class=\"fmstr-cmp-pof-tpl-v2__card\" data-category=\"apparel\" href=\"https://formester.com/templates/apparel-order-form-32860/\">\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb fmstr-cmp-pof-tpl-v2__thumb--apparel\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-emoji\">🧥\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--short\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-btn\">Shop now\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__meta\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__tag\">Apparel\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-tpl-v2__name\">Apparel order form\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-tpl-v2__desc\">Broader apparel template with hoodies, tees, and accessory options.\u003C/p>\n\u003C/div>\n\u003C/a>\n\n\u003Ca class=\"fmstr-cmp-pof-tpl-v2__card\" data-category=\"fundraiser\" href=\"https://formester.com/templates/fundraiser-order-form-32857/\">\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb fmstr-cmp-pof-tpl-v2__thumb--fundraiser\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-emoji\">🎗️\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--short\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-btn\">Pledge\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__meta\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__tag\">Fundraiser\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-tpl-v2__name\">Fundraiser order form\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-tpl-v2__desc\">Tiered pledges, reward stock caps, donor info on one form.\u003C/p>\n\u003C/div>\n\u003C/a>\n\n\u003Ca class=\"fmstr-cmp-pof-tpl-v2__card\" data-category=\"school\" href=\"https://formester.com/templates/school-picture-day-order-form-32854/\">\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb fmstr-cmp-pof-tpl-v2__thumb--school\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-emoji\">🎓\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--short\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-btn\">Order packages\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__meta\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__tag\">School\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-tpl-v2__name\">School picture day order form\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-tpl-v2__desc\">Package tiers, sibling discount field, parent contact, school code.\u003C/p>\n\u003C/div>\n\u003C/a>\n\n\u003Ca class=\"fmstr-cmp-pof-tpl-v2__card\" data-category=\"made-to-order\" href=\"https://formester.com/templates/custom-sweatshirt-order-form-32862/\">\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb fmstr-cmp-pof-tpl-v2__thumb--sweatshirt\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-emoji\">🧵\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--short\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-btn\">Customize\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__meta\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__tag\">Made-to-order\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-tpl-v2__name\">Custom sweatshirt order form\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-tpl-v2__desc\">Made-to-order template with logo upload and embroidery options.\u003C/p>\n\u003C/div>\n\u003C/a>\n\n\u003Ca class=\"fmstr-cmp-pof-tpl-v2__card\" data-category=\"all-purpose\" href=\"https://formester.com/templates/product-order-form-33229/\">\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb fmstr-cmp-pof-tpl-v2__thumb--product\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-emoji\">📦\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--short\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-btn\">Place order\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__meta\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__tag\">All-purpose\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-tpl-v2__name\">Product order form\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-tpl-v2__desc\">Generic catalog template, ideal starting point for any small storefront.\u003C/p>\n\u003C/div>\n\u003C/a>\n\n\u003Ca class=\"fmstr-cmp-pof-tpl-v2__card\" data-category=\"food\" href=\"https://formester.com/templates/catering-order-form-12964/\">\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb fmstr-cmp-pof-tpl-v2__thumb--catering\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-emoji\">🍽️\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--short\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__thumb-bar fmstr-cmp-pof-tpl-v2__thumb-bar--mid\">\u003C/div>\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__thumb-btn\">Reserve\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__meta\">\n\u003Cspan class=\"fmstr-cmp-pof-tpl-v2__tag\">Food\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-pof-tpl-v2__name\">Catering order form\u003C/h3>\n\u003Cp class=\"fmstr-cmp-pof-tpl-v2__desc\">Headcount, per-dish quantity, delivery window, deposit collection.\u003C/p>\n\u003C/div>\n\u003C/a>\n\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-pof-tpl-v2__browse\">\n\u003Ca href=\"https://formester.com/templates/categories/order-forms/\">Browse all order-form templates →\u003C/a>\n\u003C/div>\n\n\u003C/div>\n\n\u003Cscript>\n(function () {\n  var root = document.currentScript.closest('.fmstr-cmp-pof-tpl-v2');\n  if (!root) return;\n  var chips = root.querySelectorAll('[data-filter]');\n  var cards = root.querySelectorAll('[data-category]');\n  var ACTIVE = 'fmstr-cmp-pof-tpl-v2__chip--active';\n  chips.forEach(function (chip) {\n    chip.addEventListener('click', function () {\n      var filter = chip.getAttribute('data-filter');\n      chips.forEach(function (c) { c.classList.remove(ACTIVE); });\n      chip.classList.add(ACTIVE);\n      cards.forEach(function (card) {\n        var cat = card.getAttribute('data-category');\n        card.style.display = (filter === 'all' || cat === filter) ? '' : 'none';\n      });\n    });\n  });\n})();\n\u003C/script>\n\n\u003C/section>\n\u003C/div>",{"id":100,"__component":63,"markup":101,"useContainer":65},242,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-pof-faq a { text-decoration: none !important; }\n\n.fmstr-cmp-pof-faq {\n--c-card: #ffffff;\n--c-soft: #f9fafb;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-600: #6941c6;\n--c-tint: #f7f3ff;\n--c-edge: #e4d7ff;\n--c-border: #eaecf0;\n--c-chip-bg: #f4f4f7;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n\nbackground: var(--c-soft);\npadding: 80px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-pof-faq *, .fmstr-cmp-pof-faq *::before, .fmstr-cmp-pof-faq *::after { box-sizing: border-box; }\n\n.fmstr-cmp-pof-faq__container { max-width: 820px; margin: 0 auto; }\n\n.fmstr-cmp-pof-faq__header {\nmax-width: 760px;\nmargin: 0 auto 40px;\ntext-align: center;\n}\n\n.fmstr-cmp-pof-faq__h2 {\nmargin: 0;\nfont-size: clamp(28px, 3.5vw, 40px);\nline-height: 1.15;\nletter-spacing: -0.02em;\nfont-weight: 700;\ncolor: var(--c-fg-1);\n}\n\n.fmstr-cmp-pof-faq__list {\ndisplay: flex;\nflex-direction: column;\ngap: 12px;\n}\n\n.fmstr-cmp-pof-faq__item {\nbackground: var(--c-card);\nborder: 1px solid var(--c-border);\nborder-radius: 14px;\nbox-shadow: var(--c-shadow-sm);\noverflow: hidden;\n}\n\n.fmstr-cmp-pof-faq__item > summary {\npadding: 18px 22px;\ncursor: pointer;\nfont-weight: 600;\nfont-size: 16.5px;\ncolor: var(--c-fg-1);\ndisplay: flex;\nalign-items: center;\ngap: 14px;\nlist-style: none;\n}\n.fmstr-cmp-pof-faq__item > summary::-webkit-details-marker { display: none; }\n.fmstr-cmp-pof-faq__item > summary::before {\ncontent: \"\";\nwidth: 28px;\nheight: 28px;\nborder-radius: 8px;\nflex-shrink: 0;\nbackground-color: var(--c-chip-bg);\nbackground-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2375747f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E\");\nbackground-repeat: no-repeat;\nbackground-position: center;\ntransition: transform .15s ease, background-color .15s ease;\n}\n.fmstr-cmp-pof-faq__item[open] > summary::before { transform: rotate(180deg); background-color: var(--c-tint); }\n.fmstr-cmp-pof-faq__item[open] > summary { color: var(--c-violet-600) !important; }\n\n.fmstr-cmp-pof-faq__h3 {\nmargin: 0;\nfont-size: inherit;\nfont-weight: inherit;\nline-height: inherit;\ncolor: inherit;\nflex: 1;\n}\n\n.fmstr-cmp-pof-faq__answer {\npadding: 0 22px 22px 64px;\ncolor: var(--c-fg-2);\nfont-size: 15.5px;\nline-height: 1.7;\n}\n.fmstr-cmp-pof-faq__answer p { margin: 0 0 10px; }\n.fmstr-cmp-pof-faq__answer p:last-child { margin-bottom: 0; }\n.fmstr-cmp-pof-faq__answer a { color: var(--c-violet-600) !important; text-decoration: none !important; }\n.fmstr-cmp-pof-faq__answer a:hover { text-decoration: underline !important; }\n\n.fmstr-cmp-pof-faq__verify {\ndisplay: inline-block;\nmargin-left: 6px;\npadding: 2px 7px;\nborder-radius: 6px;\nbackground: #fef3c7;\ncolor: #92400e;\nfont-size: 11.5px;\nfont-weight: 600;\nletter-spacing: 0.01em;\nvertical-align: middle;\n}\n\n@media (max-width: 760px) {\n.fmstr-cmp-pof-faq { padding: 56px 16px; }\n.fmstr-cmp-pof-faq__item > summary { padding: 16px; font-size: 15.5px; gap: 12px; }\n.fmstr-cmp-pof-faq__item > summary::before { width: 26px; height: 26px; }\n.fmstr-cmp-pof-faq__answer { padding: 0 16px 18px 16px; font-size: 15px; line-height: 1.65; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-pof-faq\" aria-labelledby=\"fmstr-cmp-pof-faq-h2\">\n\u003Cdiv class=\"fmstr-cmp-pof-faq__container\">\n\n\u003Cheader class=\"fmstr-cmp-pof-faq__header\">\n\u003Ch2 class=\"fmstr-cmp-pof-faq__h2\" id=\"fmstr-cmp-pof-faq-h2\">Common questions\u003C/h2>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-pof-faq__list\">\n\n\u003Cdetails class=\"fmstr-cmp-pof-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-pof-faq__h3\">Is the online order form really free?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-pof-faq__answer\">\n\u003Cp>Yes. The Product Catalogue element ships on the Free plan, which covers up to 10 forms and 100 responses per month at no cost. Formester branding shows on Free; you can remove it on the Personal plan ($13/mo).\u003C/p>\n\u003Cp>\u003Ca href=\"https://formester.com/pricing/\">See full pricing →\u003C/a>\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003Cdetails class=\"fmstr-cmp-pof-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-pof-faq__h3\">Do I need a Shopify or other e-commerce store?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-pof-faq__answer\">\n\u003Cp>No. The form is the storefront. Your products, variants, stock, and payments all live inside Formester. If you outgrow it and need a full catalog with abandoned-cart flows, account login, and a storefront homepage, you can graduate to a platform like Shopify later. For most small stores selling 5 to 50 products, the order form is the simpler tool.\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003Cdetails class=\"fmstr-cmp-pof-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-pof-faq__h3\">Which payment processors are supported?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-pof-faq__answer\">\n\u003Cp>Stripe, PayPal, and Authorize.Net natively today. Stripe handles cards with AES-256 encryption; PayPal covers wallet and card-via-PayPal checkout; Authorize.Net is the choice for teams already running on its merchant gateway. More processors are on the way.\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003Cdetails class=\"fmstr-cmp-pof-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-pof-faq__h3\">Can I limit stock per variant, not just per product?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-pof-faq__answer\">\n\u003Cp>Yes. Stock can be set on the product as a whole or on a specific size or color variant. For example, you can stock 10 mediums, 5 larges, and leave smalls unlimited. Turn on \"disable when sold out\" and each variant closes on its own when its count reaches zero.\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003Cdetails class=\"fmstr-cmp-pof-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-pof-faq__h3\">Can customers order multiple items in one submission?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-pof-faq__answer\">\n\u003Cp>Yes. The Product Catalogue element shows your full lineup on the live form. Customers add quantities across multiple products and submit one combined order. You see the full line-by-line breakdown in the Submissions tab.\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003Cdetails class=\"fmstr-cmp-pof-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-pof-faq__h3\">What about taxes and shipping?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-pof-faq__answer\">\n\u003Cp>Tax and shipping live in the \u003Ca href=\"https://formester.com/features/calculating-fields/\">Calculating Fields element\u003C/a>, which you add alongside the Product Catalogue. Set a percentage tax rate or a flat shipping fee that the form applies to the order total.\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003Cdetails class=\"fmstr-cmp-pof-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-pof-faq__h3\">Can I sell digital products or files?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-pof-faq__answer\">\n\u003Cp>Yes. The Product Catalogue collects the order and the payment, and Formester's autoresponder action delivers the file (PDF, license key, ZIP, anything you attach) the moment payment clears. No webhook or third-party tool required for the standard \"buy a digital product, get the file in your inbox\" flow.\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003C/div>\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":103,"__component":63,"markup":104,"useContainer":65},243,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-pof-cta-v2 a { text-decoration: none !important; }\n\n.fmstr-cmp-pof-cta-v2 {\n--c-violet-100: #ede4ff;\n--c-violet-300: #c4b1ee;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-violet-900: #3f1d8a;\n--c-fg-on-dark: #ffffff;\n--c-fg-on-dark-2: rgba(255,255,255,0.78);\n--c-fg-on-dark-3: rgba(255,255,255,0.6);\n\npadding: 96px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-on-dark);\nposition: relative;\noverflow: hidden;\nbackground:\nradial-gradient(ellipse at 20% 0%, rgba(127, 86, 217, 0.6) 0%, transparent 55%),\nradial-gradient(ellipse at 80% 100%, rgba(91, 52, 177, 0.6) 0%, transparent 55%),\nlinear-gradient(135deg, #2a1568 0%, #3f1d8a 50%, #5b34b1 100%);\n}\n.fmstr-cmp-pof-cta-v2 *, .fmstr-cmp-pof-cta-v2 *::before, .fmstr-cmp-pof-cta-v2 *::after { box-sizing: border-box; }\n.fmstr-cmp-pof-cta-v2 > *, .fmstr-cmp-pof-cta-v2 > * > * { min-width: 0; }\n\n/* Decorative grid pattern */\n.fmstr-cmp-pof-cta-v2::before {\ncontent: \"\";\nposition: absolute;\ninset: 0;\nbackground-image:\nlinear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),\nlinear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);\nbackground-size: 48px 48px;\npointer-events: none;\nmask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);\n-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);\n}\n\n.fmstr-cmp-pof-cta-v2__container {\nmax-width: 880px;\nmargin: 0 auto;\ntext-align: center;\nposition: relative;\nz-index: 1;\n}\n\n.fmstr-cmp-pof-cta-v2__eyebrow {\ndisplay: inline-flex;\nalign-items: center;\ngap: 8px;\nmargin: 0 0 22px;\npadding: 6px 14px;\nborder-radius: 999px;\nbackground: rgba(255,255,255,0.1);\nborder: 1px solid rgba(255,255,255,0.18);\nbackdrop-filter: blur(8px);\n-webkit-backdrop-filter: blur(8px);\ncolor: var(--c-fg-on-dark);\nfont-size: 13px;\nfont-weight: 600;\n}\n.fmstr-cmp-pof-cta-v2__eyebrow-dot {\nwidth: 8px; height: 8px; border-radius: 50%;\nbackground: #86efac;\nbox-shadow: 0 0 0 4px rgba(134, 239, 172, 0.25);\nanimation: ctaPulse 2s ease-in-out infinite;\n}\n@keyframes ctaPulse {\n0%, 100% { box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.25); }\n50% { box-shadow: 0 0 0 8px rgba(134, 239, 172, 0.1); }\n}\n\n.fmstr-cmp-pof-cta-v2__h2 {\nmargin: 0 0 18px;\nfont-size: clamp(34px, 5vw, 52px);\nline-height: 1.08;\nletter-spacing: -0.025em;\nfont-weight: 700;\ncolor: var(--c-fg-on-dark);\n}\n\n.fmstr-cmp-pof-cta-v2__sub {\nmargin: 0 auto 36px;\nmax-width: 580px;\nfont-size: 18px;\nline-height: 1.6;\ncolor: var(--c-fg-on-dark-2);\n}\n\n.fmstr-cmp-pof-cta-v2__ctas {\ndisplay: inline-flex;\nflex-wrap: wrap;\ngap: 12px;\njustify-content: center;\n}\n\n.fmstr-cmp-pof-cta-v2__cta-primary {\ndisplay: inline-flex;\nalign-items: center;\ngap: 8px;\npadding: 16px 32px;\nborder-radius: 12px;\nbackground: #ffffff !important;\ncolor: var(--c-violet-900) !important;\nfont-weight: 700;\nfont-size: 16px;\ntext-decoration: none !important;\nborder: 1px solid #ffffff;\nbox-shadow: 0 12px 32px rgba(0,0,0,0.2);\ntransition: transform .15s ease, box-shadow .15s ease;\n}\n.fmstr-cmp-pof-cta-v2__cta-primary:hover {\ntransform: translateY(-2px);\nbox-shadow: 0 16px 36px rgba(0,0,0,0.28);\ntext-decoration: none !important;\n}\n.fmstr-cmp-pof-cta-v2__cta-arrow {\ntransition: transform .15s ease;\n}\n.fmstr-cmp-pof-cta-v2__cta-primary:hover .fmstr-cmp-pof-cta-v2__cta-arrow {\ntransform: translateX(2px);\n}\n\n.fmstr-cmp-pof-cta-v2__cta-secondary {\ndisplay: inline-flex;\nalign-items: center;\ngap: 8px;\npadding: 16px 28px;\nborder-radius: 12px;\nbackground: rgba(255,255,255,0.08) !important;\ncolor: var(--c-fg-on-dark) !important;\nfont-weight: 600;\nfont-size: 16px;\ntext-decoration: none !important;\nborder: 1px solid rgba(255,255,255,0.2);\nbackdrop-filter: blur(8px);\n-webkit-backdrop-filter: blur(8px);\ntransition: background .15s ease, border-color .15s ease;\n}\n.fmstr-cmp-pof-cta-v2__cta-secondary:hover {\nbackground: rgba(255,255,255,0.16) !important;\nborder-color: rgba(255,255,255,0.32);\ntext-decoration: none !important;\n}\n\n.fmstr-cmp-pof-cta-v2__meta {\nmargin: 32px 0 0;\nfont-size: 13.5px;\ncolor: var(--c-fg-on-dark-3);\n}\n\n.fmstr-cmp-pof-cta-v2__stats {\ndisplay: flex;\njustify-content: center;\ngap: 48px;\nmargin-top: 56px;\npadding-top: 36px;\nborder-top: 1px solid rgba(255,255,255,0.12);\nflex-wrap: wrap;\n}\n.fmstr-cmp-pof-cta-v2__stat {\ndisplay: flex;\nflex-direction: column;\nalign-items: center;\ngap: 4px;\n}\n.fmstr-cmp-pof-cta-v2__stat-value {\nfont-size: 28px;\nfont-weight: 700;\nletter-spacing: -0.02em;\ncolor: var(--c-fg-on-dark);\nfont-variant-numeric: tabular-nums;\n}\n.fmstr-cmp-pof-cta-v2__stat-label {\nfont-size: 12.5px;\ncolor: var(--c-fg-on-dark-3);\ntext-transform: uppercase;\nletter-spacing: 0.08em;\nfont-weight: 600;\n}\n\n@media (max-width: 760px) {\n.fmstr-cmp-pof-cta-v2 { padding: 72px 16px; }\n.fmstr-cmp-pof-cta-v2__cta-primary, .fmstr-cmp-pof-cta-v2__cta-secondary { padding: 14px 24px; font-size: 15px; }\n.fmstr-cmp-pof-cta-v2__stats { gap: 32px; }\n.fmstr-cmp-pof-cta-v2__stat-value { font-size: 24px; }\n}\n@media (max-width: 540px) {\n.fmstr-cmp-pof-cta-v2__ctas { flex-direction: column; align-items: stretch; width: 100%; }\n.fmstr-cmp-pof-cta-v2__cta-primary, .fmstr-cmp-pof-cta-v2__cta-secondary { justify-content: center; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-pof-cta-v2\" aria-labelledby=\"fmstr-cmp-pof-cta-v2-h2\">\n\u003Cdiv class=\"fmstr-cmp-pof-cta-v2__container\">\n\n\u003Cspan class=\"fmstr-cmp-pof-cta-v2__eyebrow\">\n\u003Cspan class=\"fmstr-cmp-pof-cta-v2__eyebrow-dot\" aria-hidden=\"true\">\u003C/span>\nFree plan, no credit card\n\u003C/span>\n\n\u003Ch2 class=\"fmstr-cmp-pof-cta-v2__h2\" id=\"fmstr-cmp-pof-cta-v2-h2\">Take your first order this week, not next quarter\u003C/h2>\n\n\u003Cp class=\"fmstr-cmp-pof-cta-v2__sub\">Drag in the Product Catalogue element, add five products, connect Stripe, and share the link. That is the whole setup.\u003C/p>\n\n\u003Cdiv class=\"fmstr-cmp-pof-cta-v2__ctas\">\n\u003Ca class=\"fmstr-cmp-pof-cta-v2__cta-primary\" href=\"https://app.formester.com/users/sign_up\">\nStart for free\n\u003Csvg class=\"fmstr-cmp-pof-cta-v2__cta-arrow\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\u003Cline x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\">\u003C/line>\u003Cpolyline points=\"12 5 19 12 12 19\">\u003C/polyline>\u003C/svg>\n\u003C/a>\n\u003Ca class=\"fmstr-cmp-pof-cta-v2__cta-secondary\" href=\"https://formester.com/pricing/\">See pricing\u003C/a>\n\u003C/div>\n\n\u003Cp class=\"fmstr-cmp-pof-cta-v2__meta\">10 forms + 100 responses on the Free plan. Stripe, PayPal, and Authorize.Net included.\u003C/p>\n\n\u003Cdiv class=\"fmstr-cmp-pof-cta-v2__stats\">\n\u003Cdiv class=\"fmstr-cmp-pof-cta-v2__stat\">\n\u003Cspan class=\"fmstr-cmp-pof-cta-v2__stat-value\">5 min\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-cta-v2__stat-label\">First order live\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-cta-v2__stat\">\n\u003Cspan class=\"fmstr-cmp-pof-cta-v2__stat-value\">$0\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-cta-v2__stat-label\">To start\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-pof-cta-v2__stat\">\n\u003Cspan class=\"fmstr-cmp-pof-cta-v2__stat-value\">3\u003C/span>\n\u003Cspan class=\"fmstr-cmp-pof-cta-v2__stat-label\">Payment gateways\u003C/span>\n\u003C/div>\n\u003C/div>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",1779893490804]