<!--
=====================================================================
CLIENT BUDGET PLANNER TEMPLATE
A bonus for À La Carte Made Easy students, by Janelle Thomson
HOW TO USE IT
Paste this whole file into a Code block on your website
(Squarespace, Showit, WordPress, Wix "embed code", and so on).
You only edit the SETTINGS block right below this note.
Anything in [BRACKETS] is yours to replace. Keep the quote marks.
THE FIVE THINGS TO CUSTOMIZE
1. Your business details (name, intro, booking link)
2. Your look (colors, fonts, logo, photo, shape)
3. Your menu and prices (your pieces, your prices)
4. Your budget ranges (and your order minimum)
5. Your Formspree link (so answers land in your inbox)
Until every [BRACKET] is filled in, a small reminder shows at the
top of the planner. It disappears on its own once you're done.
=====================================================================
-->
<script>
window.PLANNER_SETTINGS = {
/* ---------- 1. YOUR BUSINESS DETAILS ---------- */
businessName: "[LAUREL CREEK FLORALS]",
plannerTitle: "Floral Budget Planner",
tagline: "Add you floral wish-list and see estimated prices",
yourFirstName: "[YOUR FIRST NAME]",
intro: "[A SENTENCE OR TWO ABOUT YOUR À LA CARTE SERVICE. Example: A few quick questions before our call, so I can come with ideas made just for you.]",
quickFacts: "About 5 to 10 minutes · No flower names needed · \"Not sure yet\" is always a perfect answer",
bookingLink: "[https://laurelcreekflorals.hbportal.co/schedule/5f748af029ffc8005d97d703]", // your Calendly, Acuity or HoneyBook scheduler link
bookingButtonText: "Book your discovery call",
signOff: "[With love, Kendra and team]",
/* ---------- 2. YOUR LOOK: COLORS, FONTS, LOGO, PHOTO ---------- */
// Swap in your brand hex codes. Keep the # and the quote marks.
colors: {
background: "#FBF6EF", // [YOUR BACKGROUND COLOR] the page behind everything
card: "#FFFFFF", // [YOUR CARD COLOR] the boxes each step sits in
text: "#2F2A26", // [YOUR TEXT COLOR] a dark, easy-to-read color
accent: "#B4532A", // [YOUR MAIN BRAND COLOR] the arch, buttons and selected items
pop: "#E9B949", // [YOUR FUN POP COLOR] step stickers and little sparkles
highlight: "#F6DCD0" // [YOUR SOFT BRAND COLOR] a light tint behind cards and selections
},
// Any Google Font name works. Browse them at fonts.google.com
headingFont: "Fraunces", // [YOUR HEADING FONT] big titles
bodyFont: "Work Sans", // [YOUR BODY FONT] everything else. Pick one that's easy to read.
// Optional: paste a link to your logo or a favorite photo (from your website's image library).
// Leave as "" to skip.
logoImage: "", // [OPTIONAL: YOUR LOGO LINK] shows at the top of the arch
heroImage: "", // [OPTIONAL: A PHOTO LINK] fills the arch at the top
shape: "arch", // "arch", "rounded" or "square". Try each one and see what feels like you.
sparkles: true, // little star doodles. true = on, false = off
/* ---------- 3. YOUR MENU AND PRICES ---------- */
// Prices are plain numbers, no $ sign. Example: 148 or 1198
// Each step can hold a few questions. Three kinds of questions:
// "pickOne" = couples choose one option (a bouquet size, a ceremony level)
// "pickMany" = couples can choose several (help on the day)
// "count" = couples choose how many (boutonnieres, corsages)
// Optional extras on any option:
// image: "https://..." a photo link from your website
// percent: 15 instead of a price, adds a % of the flower total
// Add "perTable: true" to a pickOne question to price it per guest table.
// To add an option, copy a whole line inside { } and paste it below.
// To remove one, delete its whole line.
menu: [
{
title: "Personal flowers",
intro: "The flowers you carry and wear, the ones in every close-up.",
questions: [
{ type: "pickOne", label: "Your bouquet", noneLabel: "No bouquet needed", options: [
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", image: "" },
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", image: "" },
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", image: "" }
]},
{ type: "count", label: "Your wedding party", options: [
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", unit: "each" },
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", unit: "each" },
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", unit: "each" }
]}
]
},
{
title: "Your ceremony",
intro: "[A SENTENCE ABOUT HOW YOU PRICE CEREMONY FLOWERS]",
questions: [
{ type: "pickOne", label: "Ceremony flowers", noneLabel: "No ceremony flowers", options: [
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", image: "" },
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", image: "" },
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", image: "" },
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", image: "" }
]},
{ type: "count", label: "Along the aisle", options: [
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", unit: "each" },
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", unit: "each" }
]}
]
},
{
title: "Reception tables",
intro: "This is what your guests will be looking at all evening, so pick the look you love.",
questions: [
{ type: "pickOne", label: "Your table design", perTable: true, noneLabel: "No table flowers", options: [
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", image: "" },
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", image: "" },
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", image: "" }
]}
]
},
{
title: "A few extras",
intro: "Finishing touches, completely optional.",
questions: [
{ type: "count", label: "Extras", options: [
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", unit: "each" },
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", unit: "each" },
{ name: "[YOUR MENU ITEM]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]", unit: "each" }
]}
]
},
{
title: "Getting flowers to you",
intro: "How you'd like your flowers to get to you, and the help you'd love on the day.",
questions: [
{ type: "pickOne", label: "Pickup or delivery?", noneLabel: "", options: [
{ name: "[YOUR PICKUP OPTION]", desc: "[SHORT DESCRIPTION]", price: "[YOUR PRICE]" },
{ name: "[YOUR DELIVERY OPTION]", desc: "[SHORT DESCRIPTION]", percent: "[YOUR %]" }
]},
{ type: "pickMany", label: "Help on the day", options: [
{ name: "Setup", desc: "[SHORT DESCRIPTION]", percent: "[YOUR %]" },
{ name: "Clean up", desc: "[SHORT DESCRIPTION]", percent: "[YOUR %]" }
]}
]
}
],
guestsPerTable: 8, // used to suggest a table count from the guest count
/* ---------- 4. YOUR BUDGET RANGES AND MINIMUM ---------- */
budgetRanges: [
"[YOUR BUDGET RANGE 1]", // Example: "Under $2,000"
"[YOUR BUDGET RANGE 2]", // Example: "$2,000 to $4,000"
"[YOUR BUDGET RANGE 3]",
"[YOUR BUDGET RANGE 4]",
"[YOUR BUDGET RANGE 5]"
],
orderMinimum: "[YOUR MINIMUM]", // a plain number, like 1000. Use 0 if you don't have one.
estimateWiggle: 15, // the estimate shows a range of this many % above and below
estimateNote: "A rough starting point, not a quote. Your final design depends on the season and the details we shape together. Sales tax is added based on your venue's location.",
currency: "$",
/* ---------- 5. YOUR FORMSPREE LINK ---------- */
// Make a free form at formspree.io, then paste its link here.
// It looks like: https://formspree.io/f/abcdwxyz
formspreeLink: "[YOUR FORMSPREE LINK]"
};
</script>
<!-- ===== You don't need to edit anything below this line ===== -->
<style>
#bp-planner{--bg:#FBF6EF;--card:#FFFFFF;--ink:#2F2A26;--accent:#B4532A;--pop:#E9B949;--hi:#F6DCD0;
--soft:color-mix(in srgb,var(--ink) 70%,transparent);--line:color-mix(in srgb,var(--ink) 14%,transparent);
--head:Georgia,"Times New Roman",serif;--body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--r:28px;--r-sm:18px;--arch:999px 999px 0 0;--img:999px 999px 14px 14px;
background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;letter-spacing:0;
padding:28px 16px 140px;-webkit-font-smoothing:antialiased;box-sizing:border-box;max-width:100%;overflow-x:clip;position:relative}
#bp-planner.bp-rounded{--r:22px;--r-sm:14px;--arch:28px 28px 28px 28px;--img:14px}
#bp-planner.bp-square{--r:4px;--r-sm:3px;--arch:4px;--img:3px}
#bp-planner *,#bp-planner *::before,#bp-planner *::after{box-sizing:border-box}
#bp-planner h1,#bp-planner h2,#bp-planner p{margin:0}
/* keep the website's own theme styles from leaking into the planner */
#bp-planner h1,#bp-planner h2,#bp-planner h3,#bp-planner p,#bp-planner label,#bp-planner span,#bp-planner small,#bp-planner b,#bp-planner a,#bp-planner li,#bp-planner output{color:inherit;font-family:inherit;letter-spacing:inherit;text-transform:none;line-height:inherit;text-shadow:none}
#bp-planner h1,#bp-planner h2,#bp-planner h3,#bp-planner p,#bp-planner label,#bp-planner span,#bp-planner output{font-size:inherit}
#bp-planner button,#bp-planner input,#bp-planner textarea{letter-spacing:normal;text-transform:none;font-family:inherit;line-height:1.3}
#bp-planner .bp-eyebrow,#bp-planner .bp-q,#bp-planner .bp-field label,#bp-planner .bp-sticker{text-transform:uppercase}
#bp-planner [hidden]{display:none!important}
#bp-planner .bp-wrap{max-width:720px;margin:0 auto;position:relative}
#bp-planner .bp-setup{background:#FFF4D6;border:1.5px dashed #D9AE3C;color:#5A4A12;border-radius:14px;padding:14px 16px;margin:0 0 24px;font-size:15.5px}
#bp-planner .bp-setup b{display:block}
/* --- the arch at the top --- */
#bp-planner .bp-top{position:relative;text-align:center;padding:6px 0 0}
#bp-planner .bp-arch{position:relative;margin:0 auto;width:min(100%,520px);border-radius:var(--arch);background:var(--accent);color:#fff;
padding:64px 28px 46px;overflow:hidden;box-shadow:14px 14px 0 var(--hi)}
#bp-planner .bp-arch.bp-photo{background:#000 center/cover no-repeat}
#bp-planner .bp-arch.bp-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.55))}
#bp-planner .bp-arch > *{position:relative}
#bp-planner .bp-logo{max-width:150px;max-height:80px;object-fit:contain;margin:0 auto 18px;display:block}
#bp-planner .bp-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1.5}
#bp-planner .bp-arch .bp-eyebrow{opacity:.92;margin-bottom:14px}
#bp-planner .bp-arch h1{font-family:var(--head);font-weight:600;font-size:clamp(38px,9vw,60px);line-height:1.05;letter-spacing:-.01em}
#bp-planner .bp-arch .bp-tag{font-family:var(--body);font-style:italic;font-size:20px;line-height:1.45;margin:14px auto 0;max-width:20em;opacity:.95}
#bp-planner .bp-wave{display:block;width:120px;height:14px;margin:30px auto 22px;color:var(--accent)}
#bp-planner .bp-hero .bp-lead{font-size:19px;line-height:1.65;max-width:31em;margin:0 auto}
#bp-planner .bp-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px auto 0}
#bp-planner .bp-facts span{background:var(--hi);border-radius:999px;padding:5px 14px;font-size:14.5px}
/* --- sparkles --- */
#bp-planner .bp-spark{position:absolute;color:var(--pop);pointer-events:none;width:30px;height:30px}
#bp-planner .bp-spark.s1{top:20px;left:4%;transform:rotate(-12deg)}
#bp-planner .bp-spark.s2{top:120px;right:3%;width:22px;height:22px}
#bp-planner .bp-spark.s3{top:240px;left:8%;width:16px;height:16px;color:var(--accent)}
#bp-planner.bp-nospark .bp-spark{display:none}
/* --- progress dots --- */
#bp-planner .bp-prog{display:flex;justify-content:center;align-items:center;gap:8px;margin:40px 0 30px;flex-wrap:wrap}
#bp-planner .bp-prog i{width:12px;height:12px;border-radius:50%;border:2px solid var(--accent);background:transparent;transition:all .25s}
#bp-planner .bp-prog i.on{background:var(--accent)}
#bp-planner .bp-prog i.now{width:30px;border-radius:999px;background:var(--pop);border-color:var(--pop)}
/* --- step cards --- */
#bp-planner .bp-step{position:relative;background:var(--card);border-radius:var(--r);padding:52px 24px 30px;box-shadow:10px 10px 0 var(--hi);margin:0 10px 0 0;animation:bpIn .4s ease}
@keyframes bpIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#bp-planner .bp-sticker{position:absolute;top:-16px;left:22px;background:var(--pop);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
padding:8px 16px;border-radius:999px;transform:rotate(-3deg);box-shadow:0 4px 10px -4px rgba(0,0,0,.25)}
#bp-planner .bp-step h2{font-family:var(--head);font-size:clamp(30px,6vw,38px);line-height:1.12;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
#bp-planner .bp-why{color:var(--soft);font-size:17.5px;line-height:1.6}
#bp-planner .bp-q{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:38px 0 14px;color:var(--accent)}
#bp-planner .bp-q::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
#bp-planner .bp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px;margin-top:26px}
@media(max-width:560px){#bp-planner .bp-grid{grid-template-columns:minmax(0,1fr)}}
#bp-planner .bp-field label{display:block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
#bp-planner .bp-field input,#bp-planner .bp-field textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--bg);font:inherit;color:var(--ink);padding:11px 14px;min-height:50px}
#bp-planner .bp-field input:focus,#bp-planner .bp-field textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px var(--hi)}
#bp-planner .bp-field textarea{min-height:110px;resize:vertical}
#bp-planner .bp-field.bp-full{grid-column:1/-1}
/* --- option cards --- */
#bp-planner .bp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
@media(max-width:560px){#bp-planner .bp-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
#bp-planner .bp-opt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;width:100%;background:var(--bg);border:2px solid transparent;border-radius:var(--r-sm);
padding:16px 12px 16px;font:inherit;color:inherit;cursor:pointer;min-height:48px;position:relative;transition:transform .18s,border-color .18s,background .18s}
#bp-planner .bp-opt:hover{transform:translateY(-3px) rotate(-.6deg);border-color:var(--hi)}
#bp-planner .bp-opt:focus-visible,#bp-planner .bp-chip:focus-visible,#bp-planner .bp-btn:focus-visible,#bp-planner .bp-ctr button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#bp-planner .bp-opt[aria-pressed="true"]{background:var(--hi);border-color:var(--accent)}
#bp-planner .bp-opt[aria-pressed="true"]::after{content:"✓";position:absolute;top:-10px;right:-8px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font:700 15px/30px var(--body);text-align:center;box-shadow:0 4px 10px -4px rgba(0,0,0,.35);animation:bpPop .3s ease}
@keyframes bpPop{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
#bp-planner .bp-opt img{width:100%;aspect-ratio:4/5;height:auto;max-height:190px;object-fit:cover;border-radius:var(--img);margin-bottom:8px}
#bp-planner .bp-opt .bp-noimg{width:46px;height:46px;border-radius:var(--img);background:var(--hi);display:grid;place-items:center;margin-bottom:6px;color:var(--accent)}
#bp-planner .bp-opt[aria-pressed="true"] .bp-noimg{background:var(--card)}
#bp-planner .bp-opt b{font-family:var(--head);font-weight:600;font-size:19px;line-height:1.25}
#bp-planner .bp-opt span{font-size:15px;line-height:1.45;color:var(--soft)}
#bp-planner .bp-price{display:inline-block;margin-top:auto!important;padding:3px 12px;border-radius:999px;background:var(--card);color:var(--ink)!important;font-weight:600;font-size:15px!important}
#bp-planner .bp-opt .bp-price{margin-top:8px!important}
#bp-planner .bp-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
#bp-planner .bp-chip{border:1.5px dashed color-mix(in srgb,var(--ink) 30%,transparent);background:transparent;border-radius:999px;padding:9px 18px;min-height:44px;font:inherit;font-size:16px;color:var(--ink);cursor:pointer}
#bp-planner .bp-chip[aria-pressed="true"]{background:var(--hi);border:1.5px solid var(--accent)}
/* --- how many rows --- */
#bp-planner .bp-rows{background:var(--bg);border-radius:var(--r-sm);padding:4px 14px}
#bp-planner .bp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1.5px dotted var(--line)}
#bp-planner .bp-row:last-child{border-bottom:0}
#bp-planner .bp-row .bp-lbl{display:flex;align-items:center;gap:12px;min-width:0}
#bp-planner .bp-row .bp-lbl img{width:58px;height:58px;object-fit:cover;border-radius:var(--img);flex:none}
#bp-planner .bp-row .bp-lbl b{display:block;font-family:var(--head);font-weight:600;font-size:19px;line-height:1.3}
#bp-planner .bp-row .bp-lbl small{display:block;font-size:15px;color:var(--soft);line-height:1.45}
#bp-planner .bp-ctr{display:flex;align-items:center;gap:6px;flex:none}
#bp-planner .bp-ctr button{width:42px;height:42px;border-radius:50%;border:0;background:var(--accent);color:#fff;font:600 22px/1 var(--body);cursor:pointer;padding:0;transition:transform .12s}
#bp-planner .bp-ctr button:active{transform:scale(.9)}
#bp-planner .bp-ctr button[data-d="-1"],#bp-planner .bp-ctr button[data-tables="-1"]{background:var(--card);color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
#bp-planner .bp-ctr output{min-width:32px;text-align:center;font-family:var(--head);font-weight:600;font-size:22px}
#bp-planner .bp-note{font-size:15.5px;color:var(--soft);margin-top:12px;line-height:1.55}
#bp-planner .bp-warn{color:#9A3412;background:#FFF1E8;border-radius:12px;padding:10px 14px;font-size:15.5px;margin-top:16px}
/* --- buttons --- */
#bp-planner .bp-pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:34px;flex-wrap:wrap}
#bp-planner .bp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-size:16px;font-weight:600;
padding:14px 28px;min-height:52px;border-radius:999px;cursor:pointer;text-decoration:none;box-shadow:4px 4px 0 var(--pop);transition:transform .15s,box-shadow .15s}
#bp-planner .bp-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--pop)}
#bp-planner .bp-btn.bp-ghost{background:transparent;color:var(--accent);box-shadow:none}
#bp-planner .bp-btn[disabled]{opacity:.55;cursor:wait}
/* --- review --- */
#bp-planner .bp-result{position:relative;text-align:center;background:var(--accent);color:#fff;border-radius:var(--arch);padding:56px 18px 34px;margin:24px auto 24px;max-width:440px;overflow:hidden}
#bp-planner .bp-result .bp-amt{font-family:var(--head);font-size:clamp(46px,12vw,64px);line-height:1.05;font-weight:600;margin:8px 0 6px}
#bp-planner .bp-result .bp-rng{font-family:var(--body);font-style:italic;font-size:18px;opacity:.95}
#bp-planner .bp-sum{background:var(--bg);border-radius:var(--r-sm);padding:6px 16px}
#bp-planner .bp-sum div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1.5px dotted var(--line);font-size:16.5px}
#bp-planner .bp-sum div:last-child{border-bottom:0}
#bp-planner .bp-sum div span:last-child{white-space:nowrap;font-weight:700}
#bp-planner .bp-sum .bp-empty{display:block;padding:10px 0;color:var(--soft);font-style:italic}
#bp-planner .bp-gentle{background:var(--hi);border-radius:var(--r-sm);padding:14px 16px;margin-top:16px;font-size:16.5px}
/* --- thank you --- */
#bp-planner .bp-done{text-align:center;overflow:hidden}
#bp-planner .bp-done .bp-pager{justify-content:center}
#bp-planner .bp-done h2{font-size:clamp(34px,8vw,46px)}
#bp-planner .bp-petal{position:absolute;top:-20px;width:12px;height:16px;border-radius:50% 50% 50% 0;opacity:0;animation:bpFall 2.6s ease-in forwards;pointer-events:none}
@keyframes bpFall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(520px) rotate(540deg)}}
/* --- floating estimate --- */
#bp-planner .bp-est{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9999;width:min(92vw,460px);
background:var(--ink);color:#fff;border-radius:999px;padding:10px 12px 10px 26px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
#bp-planner .bp-est .bp-eyebrow{font-size:10.5px;opacity:.8;white-space:nowrap}
#bp-planner .bp-est .bp-estamt{font-family:var(--head);font-size:26px;font-weight:600;line-height:1.1}
#bp-planner .bp-est .bp-estamt.bump{animation:bpBump .35s ease}
@keyframes bpBump{50%{transform:scale(1.12);color:var(--pop)}}
#bp-planner .bp-est small{background:var(--pop);color:var(--ink);font-weight:700;font-size:13px;border-radius:999px;padding:9px 14px;white-space:nowrap}
@media(max-width:420px){#bp-planner .bp-est small{display:none}#bp-planner .bp-step{padding:48px 16px 24px;margin-right:6px;box-shadow:6px 6px 0 var(--hi)}#bp-planner .bp-ctr button{width:38px;height:38px}#bp-planner .bp-arch{padding:54px 20px 38px}}
@media(prefers-reduced-motion:reduce){#bp-planner *{animation:none!important;transition:none!important}}
</style>
<div id="bp-planner">
<svg class="bp-spark s1" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 0c.8 6.4 4.6 10.6 12 12-7.4 1.4-11.2 5.6-12 12-.8-6.4-4.6-10.6-12-12C7.4 10.6 11.2 6.4 12 0z"/></svg>
<svg class="bp-spark s2" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 0c.8 6.4 4.6 10.6 12 12-7.4 1.4-11.2 5.6-12 12-.8-6.4-4.6-10.6-12-12C7.4 10.6 11.2 6.4 12 0z"/></svg>
<svg class="bp-spark s3" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 0c.8 6.4 4.6 10.6 12 12-7.4 1.4-11.2 5.6-12 12-.8-6.4-4.6-10.6-12-12C7.4 10.6 11.2 6.4 12 0z"/></svg>
<div class="bp-wrap">
<div class="bp-setup" id="bpSetup" hidden role="note"></div>
<div class="bp-top">
<div class="bp-arch" id="bpArch">
<img class="bp-logo" id="bpLogo" alt="" hidden>
<p class="bp-eyebrow" id="bpBiz"></p>
<h1 id="bpTitle"></h1>
<p class="bp-tag" id="bpTag"></p>
</div>
</div>
<header class="bp-hero" style="text-align:center">
<svg class="bp-wave" viewBox="0 0 120 14" aria-hidden="true"><path d="M2 7c9-8 17-8 26 0s17 8 26 0 17-8 26 0 17 8 26 0 9-5 12-3" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
<p class="bp-lead" id="bpIntro"></p>
<div class="bp-facts" id="bpFacts"></div>
</header>
<div class="bp-prog" id="bpProg" aria-hidden="true"></div>
<div id="bpSteps"></div>
</div>
<div class="bp-est" id="bpEst" aria-live="polite">
<div><p class="bp-eyebrow">Your estimate so far</p><p class="bp-estamt" id="bpEstAmt">$0</p></div>
<small>updates as you go</small>
</div>
</div>
<script>
(function(){
var S = window.PLANNER_SETTINGS || {};
var root = document.getElementById("bp-planner");
var stepsBox = document.getElementById("bpSteps");
var CUR = S.currency || "$";
var FLOWER = '<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"><g fill="currentColor"><circle cx="12" cy="6" r="4"/><circle cx="18" cy="11" r="4"/><circle cx="15.5" cy="18" r="4"/><circle cx="8.5" cy="18" r="4"/><circle cx="6" cy="11" r="4"/></g><circle cx="12" cy="13" r="3" fill="#fff"/></svg>';
/* ---------- helpers ---------- */
function isBlank(v){ return v === undefined || v === null || String(v).trim() === "" || /\[[^\]]*\]/.test(String(v)); }
function num(v){ if (typeof v === "number") return v; if (isBlank(v)) return 0; return parseFloat(String(v).replace(/[^0-9.]/g,"")) || 0; }
function money(n){ return CUR + Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }
function esc(s){ return String(s == null ? "" : s).replace(/[&<>"]/g, function(c){ return {"&":"&","<":"<",">":">",'"':"""}[c]; }); }
function el(tag, cls, html){ var e = document.createElement(tag); if (cls) e.className = cls; if (html != null) e.innerHTML = html; return e; }
function priceText(o, perTable){
if (o.percent !== undefined) return isBlank(o.percent) ? esc(o.percent) + " of your flowers" : "about " + num(o.percent) + "% of your flowers";
var p = isBlank(o.price) ? esc(o.price) : money(num(o.price));
if (perTable) p += " per table";
else if (o.unit) p += " " + esc(o.unit);
return p;
}
/* ---------- your look ---------- */
var C = S.colors || {};
var map = {background:"--bg", card:"--card", text:"--ink", accent:"--accent", pop:"--pop", highlight:"--hi"};
Object.keys(map).forEach(function(k){ if (C[k] && /^#|^rgb|^hsl/i.test(C[k])) root.style.setProperty(map[k], C[k]); });
var fams = [S.headingFont, S.bodyFont].filter(function(f){ return f && !isBlank(f); });
if (fams.length) {
var lk = document.createElement("link"); lk.rel = "stylesheet";
lk.href = "https://fonts.googleapis.com/css2?" + fams.map(function(f){ return "family=" + encodeURIComponent(f).replace(/%20/g,"+") + ":ital,wght@0,400;0,600;0,700;1,400"; }).join("&") + "&display=swap";
document.head.appendChild(lk);
if (S.headingFont && !isBlank(S.headingFont)) root.style.setProperty("--head", "'" + S.headingFont + "',Georgia,serif");
if (S.bodyFont && !isBlank(S.bodyFont)) root.style.setProperty("--body", "'" + S.bodyFont + "',system-ui,-apple-system,'Segoe UI',sans-serif");
}
if (S.shape === "rounded") root.classList.add("bp-rounded");
if (S.shape === "square") root.classList.add("bp-square");
if (S.sparkles === false) root.classList.add("bp-nospark");
if (S.logoImage && !isBlank(S.logoImage)) { var lg = document.getElementById("bpLogo"); lg.src = S.logoImage; lg.alt = S.businessName || ""; lg.hidden = false; }
if (S.heroImage && !isBlank(S.heroImage)) { var ar = document.getElementById("bpArch"); ar.classList.add("bp-photo"); ar.style.backgroundImage = "url('" + String(S.heroImage).replace(/'/g,"%27") + "')"; }
document.getElementById("bpBiz").textContent = S.businessName || "";
document.getElementById("bpTitle").textContent = S.plannerTitle || "Floral Budget Planner";
document.getElementById("bpTag").textContent = S.tagline || "";
document.getElementById("bpIntro").textContent = S.intro || "";
document.getElementById("bpFacts").innerHTML = String(S.quickFacts || "").split("·").filter(function(x){ return x.trim(); }).map(function(x){ return "<span>" + esc(x.trim()) + "</span>"; }).join("");
/* ---------- setup reminder (only while [BRACKETS] remain) ---------- */
var left = (JSON.stringify(S).match(/\[[A-Z][^\]]*\]/g) || []).length;
if (left) {
var sb = document.getElementById("bpSetup");
sb.innerHTML = "<b>Setup reminder for you, the florist</b>" + left + " spot" + (left === 1 ? " still says" : "s still say") +
" [SOMETHING IN BRACKETS] in your settings. Fill them in and this note disappears.";
sb.hidden = false;
}
/* ---------- state ---------- */
var state = { pick:{}, many:{}, count:{}, tables:0, budget:"" };
var QS = [], stepEls = [], at = 0;
/* ---------- step 1: about you ---------- */
function aboutStep(){
var s = el("section","bp-step");
s.innerHTML = '<span class="bp-sticker" data-num></span><h2>The two of you</h2><p class="bp-why">The basics, so I know whose day I\'m dreaming about.</p>' +
'<div class="bp-grid">' +
'<div class="bp-field"><label for="bp-names">Your first names</label><input id="bp-names" autocomplete="name"></div>' +
'<div class="bp-field"><label for="bp-email">Email</label><input id="bp-email" type="email" autocomplete="email" inputmode="email"></div>' +
'<div class="bp-field"><label for="bp-date">Wedding date</label><input id="bp-date" type="date"></div>' +
'<div class="bp-field"><label for="bp-venue">Venue and city</label><input id="bp-venue"></div>' +
'<div class="bp-field"><label for="bp-guests">Guest count (best guess)</label><input id="bp-guests" type="number" inputmode="numeric" min="0"></div>' +
'</div><p class="bp-warn" id="bpAboutWarn" role="alert" hidden></p>';
return s;
}
/* ---------- menu steps ---------- */
function questionBlock(q, qi){
var id = "q" + qi;
q._id = id; QS.push(q);
var box = el("div");
box.appendChild(el("p","bp-q", esc(q.label || "")));
if (q.perTable) {
var tw = el("div","bp-rows"); tw.style.marginBottom = "14px";
tw.innerHTML = '<div class="bp-row"><div class="bp-lbl"><span><b>Number of guest tables</b><small id="bpTblHint">Add your guest count on step 1 and I\'ll suggest a number.</small></span></div>' +
'<div class="bp-ctr"><button type="button" data-tables="-1" aria-label="Fewer tables">−</button><output id="bpTables">0</output><button type="button" data-tables="1" aria-label="More tables">+</button></div></div>';
box.appendChild(tw);
}
if (q.type === "count") {
var rows = el("div","bp-rows");
(q.options || []).forEach(function(o, oi){
var k = id + "_" + oi;
state.count[k] = 0;
var r = el("div","bp-row");
r.innerHTML = '<div class="bp-lbl">' + (o.image && !isBlank(o.image) ? '<img src="' + esc(o.image) + '" alt="">' : "") +
'<span><b>' + esc(o.name) + '</b><small>' + (o.desc ? esc(o.desc) + " · " : "") + priceText(o) + '</small></span></div>' +
'<div class="bp-ctr"><button type="button" data-count="' + k + '" data-d="-1" aria-label="Fewer ' + esc(o.name) + '">−</button><output id="o-' + k + '">0</output>' +
'<button type="button" data-count="' + k + '" data-d="1" aria-label="More ' + esc(o.name) + '">+</button></div>';
rows.appendChild(r);
});
box.appendChild(rows);
return box;
}
var cards = el("div","bp-cards");
(q.options || []).forEach(function(o, oi){
var b = el("button","bp-opt");
b.type = "button";
b.setAttribute("aria-pressed","false");
b.dataset.q = id; b.dataset.v = String(oi); b.dataset.kind = q.type;
b.innerHTML = (o.image && !isBlank(o.image) ? '<img src="' + esc(o.image) + '" alt="">' : '<span class="bp-noimg">' + FLOWER + '</span>') +
'<b>' + esc(o.name) + '</b>' + (o.desc ? '<span>' + esc(o.desc) + '</span>' : "") +
'<span class="bp-price">' + priceText(o, q.perTable) + '</span>';
cards.appendChild(b);
});
box.appendChild(cards);
if (q.type === "pickOne") {
var chips = el("div","bp-chips");
if (q.noneLabel) chips.innerHTML += '<button type="button" class="bp-chip" aria-pressed="false" data-q="' + id + '" data-v="none" data-kind="pickOne">' + esc(q.noneLabel) + '</button>';
if (q.allowNotSure !== false) chips.innerHTML += '<button type="button" class="bp-chip" aria-pressed="false" data-q="' + id + '" data-v="unsure" data-kind="pickOne">Not sure yet</button>';
if (chips.innerHTML) box.appendChild(chips);
} else {
state.many[id] = {};
}
return box;
}
function menuStep(st){
var s = el("section","bp-step");
s.innerHTML = '<span class="bp-sticker" data-num></span><h2>' + esc(st.title) + '</h2>' + (st.intro ? '<p class="bp-why">' + esc(st.intro) + '</p>' : "");
(st.questions || []).forEach(function(q){ s.appendChild(questionBlock(q, QS.length)); });
return s;
}
/* ---------- budget step ---------- */
function budgetStep(){
var s = el("section","bp-step");
var chips = (S.budgetRanges || []).concat(["Not sure yet"]).map(function(r){
return '<button type="button" class="bp-chip" aria-pressed="false" data-budget="' + esc(r) + '">' + esc(r) + '</button>';
}).join("");
s.innerHTML = '<span class="bp-sticker" data-num></span><h2>Your floral budget</h2><p class="bp-why">Knowing your budget lets me put your flowers where they\'ll make the biggest impact. There\'s no wrong answer.</p>' +
'<div class="bp-chips" style="margin-top:22px">' + chips + '</div>' +
'<div class="bp-grid">' +
'<div class="bp-field bp-full"><label for="bp-pin">Pinterest board or inspiration link (optional)</label><input id="bp-pin" type="url" inputmode="url"></div>' +
'<div class="bp-field bp-full"><label for="bp-more">Anything else you\'d love me to know?</label><textarea id="bp-more" placeholder="Colors, the feeling you want, a flower you adore"></textarea></div>' +
'</div>';
return s;
}
/* ---------- review + thank you ---------- */
function reviewStep(){
var s = el("section","bp-step");
s.innerHTML = '<span class="bp-sticker">Your starting point</span><h2>Here\'s what you\'ve dreamed up</h2>' +
'<div class="bp-result"><p class="bp-eyebrow">Most likely around</p><p class="bp-amt" id="bpAmt">$0</p><p class="bp-rng" id="bpRng"></p></div>' +
'<p class="bp-q">Your pieces</p><div class="bp-sum" id="bpSum"></div>' +
'<p class="bp-note" id="bpEstNote"></p>' +
'<div class="bp-gentle" id="bpGentle" hidden></div>' +
'<div class="bp-pager"><button type="button" class="bp-btn" id="bpSend"></button><button type="button" class="bp-btn bp-ghost" id="bpCopy">Copy my answers</button></div>' +
'<p class="bp-note" id="bpSendNote" role="status"></p>';
return s;
}
function thanksStep(){
var s = el("section","bp-step bp-done");
var hasLink = !isBlank(S.bookingLink);
s.innerHTML = '<span class="bp-sticker">Sent!</span><h2>I can\'t wait to hear more!</h2>' +
'<p class="bp-why" style="margin-top:6px">I\'ll look through everything before we talk.' + (hasLink ? " If you haven't booked a time to chat yet, grab one here." : "") + '</p>' +
(hasLink ? '<div class="bp-pager"><a class="bp-btn" href="' + esc(S.bookingLink) + '" target="_blank" rel="noopener">' + esc(S.bookingButtonText || "Book a call") + '</a></div>' : "") +
(S.signOff ? '<p class="bp-note" style="font-family:var(--body);font-style:italic;font-size:19px;margin-top:26px">' + esc(S.signOff) + '</p>' : "");
return s;
}
function petals(box){
var cols = ["var(--accent)","var(--pop)","var(--hi)"];
for (var i = 0; i < 22; i++) {
var p = el("span","bp-petal");
p.style.left = (Math.random() * 96) + "%";
p.style.background = cols[i % 3];
p.style.animationDelay = (Math.random() * .9) + "s";
box.appendChild(p);
}
}
/* ---------- build ---------- */
stepEls.push(aboutStep());
(S.menu || []).forEach(function(st){ stepEls.push(menuStep(st)); });
stepEls.push(budgetStep());
var review = reviewStep(); stepEls.push(review);
var thanks = thanksStep(); stepEls.push(thanks);
var numbered = stepEls.length - 2;
var prog = document.getElementById("bpProg");
for (var d = 0; d <= numbered; d++) prog.appendChild(document.createElement("i"));
stepEls.forEach(function(s, i){
var n = s.querySelector("[data-num]");
if (n) n.textContent = "Step " + (i + 1) + " of " + numbered;
if (i < stepEls.length - 1) {
var pg = el("div","bp-pager");
pg.innerHTML += i > 0 ? '<button type="button" class="bp-btn bp-ghost" data-go="-1">Back</button>' : '<span></span>';
if (i < stepEls.length - 2) pg.innerHTML += '<button type="button" class="bp-btn" data-go="1">' + (i === stepEls.length - 3 ? "See my estimate ✨" : "Continue →") + '</button>';
s.appendChild(pg);
}
s.hidden = i !== 0;
stepsBox.appendChild(s);
});
document.getElementById("bpEstNote").textContent = S.estimateNote || "";
var formReady = /^https:\/\/formspree\.io\/f\/\w+/.test(String(S.formspreeLink || ""));
document.getElementById("bpSend").textContent = "Send to " + (isBlank(S.yourFirstName) ? "us" : S.yourFirstName) + " ♡";
/* ---------- the math ---------- */
function guests(){ return num(document.getElementById("bp-guests").value); }
function calc(){
var flowers = 0, pct = 0, lines = [];
QS.forEach(function(q){
var opts = q.options || [];
if (q.type === "count") {
opts.forEach(function(o, oi){
var n = state.count[q._id + "_" + oi] || 0;
if (!n) return;
var amt = num(o.price) * n; flowers += amt;
lines.push([n + " × " + o.name, money(amt)]);
});
} else if (q.type === "pickOne") {
var v = state.pick[q._id];
if (v === undefined) return;
if (v === "none") { lines.push([q.label, q.noneLabel || "None"]); return; }
if (v === "unsure") { lines.push([q.label, "Not sure yet"]); return; }
var o = opts[+v];
if (o.percent !== undefined) { pct += num(o.percent); lines.push([o.name, "about " + num(o.percent) + "%"]); return; }
var mult = q.perTable ? state.tables : 1;
var a = num(o.price) * mult; flowers += a;
lines.push([q.perTable ? o.name + " × " + state.tables + " tables" : q.label + ": " + o.name, money(a)]);
} else {
Object.keys(state.many[q._id] || {}).forEach(function(oi){
var o = opts[+oi];
if (o.percent !== undefined) { pct += num(o.percent); lines.push([o.name, "about " + num(o.percent) + "%"]); }
else { flowers += num(o.price); lines.push([o.name, money(num(o.price))]); }
});
}
});
var labor = flowers * pct / 100;
if (labor) lines.push(["Delivery and labor (estimated)", money(labor)]);
return { total: flowers + labor, lines: lines };
}
var lastTotal = 0;
function refresh(){
var r = calc();
var ea = document.getElementById("bpEstAmt");
ea.textContent = money(r.total);
if (r.total !== lastTotal) { ea.classList.remove("bump"); void ea.offsetWidth; ea.classList.add("bump"); lastTotal = r.total; }
document.getElementById("bpAmt").textContent = money(r.total);
var w = num(S.estimateWiggle) / 100;
document.getElementById("bpRng").textContent = r.total ? "somewhere between " + money(r.total * (1 - w)) + " and " + money(r.total * (1 + w)) : "Choose a few pieces to see your estimate.";
var sum = document.getElementById("bpSum");
sum.innerHTML = r.lines.length ? r.lines.map(function(l){ return "<div><span>" + esc(l[0]) + "</span><span>" + esc(l[1]) + "</span></div>"; }).join("") : '<span class="bp-empty">Nothing chosen yet. Tap Back to add a few pieces.</span>';
var g = document.getElementById("bpGentle"), min = num(S.orderMinimum);
if (min && r.total && r.total < min) { g.textContent = "Just so you know, orders start at " + money(min) + ". We can talk through the best way to get there on our call."; g.hidden = false; }
else g.hidden = true;
var hint = document.getElementById("bpTblHint");
if (hint && guests()) hint.textContent = "For " + guests() + " guests, about " + Math.ceil(guests() / (num(S.guestsPerTable) || 8)) + " tables";
}
/* ---------- navigation ---------- */
function show(i, quiet){
stepEls[at].hidden = true; at = i; stepEls[at].hidden = false;
var dots = prog.children;
for (var k = 0; k < dots.length; k++) dots[k].className = k < at ? "on" : (k === at ? "now" : "");
prog.hidden = stepEls[at] === thanks;
document.getElementById("bpEst").hidden = (stepEls[at] === review || stepEls[at] === thanks);
if (stepEls[at] === review) refresh();
if (stepEls[at] === thanks) petals(thanks);
if (quiet) return;
var top = prog.getBoundingClientRect().top + window.pageYOffset - 20;
window.scrollTo({ top: top, behavior: "smooth" });
}
function aboutOk(){
var n = document.getElementById("bp-names").value.trim(), e = document.getElementById("bp-email").value.trim();
var w = document.getElementById("bpAboutWarn");
if (!n || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)) { w.textContent = "Please add your names and a good email so I can send your ideas back to you."; w.hidden = false; return false; }
w.hidden = true; return true;
}
/* ---------- clicks ---------- */
root.addEventListener("click", function(ev){
var t = ev.target.closest("button"); if (!t || !root.contains(t)) return;
if (t.dataset.go) { var d = +t.dataset.go; if (d > 0 && at === 0 && !aboutOk()) return; show(at + d); return; }
if (t.dataset.tables) {
state.tables = Math.max(0, state.tables + +t.dataset.tables);
document.getElementById("bpTables").textContent = state.tables; refresh(); return;
}
if (t.dataset.count) {
var k = t.dataset.count; state.count[k] = Math.max(0, (state.count[k] || 0) + +t.dataset.d);
document.getElementById("o-" + k).textContent = state.count[k]; refresh(); return;
}
if (t.dataset.budget !== undefined) {
state.budget = t.dataset.budget;
root.querySelectorAll("[data-budget]").forEach(function(b){ b.setAttribute("aria-pressed", b === t ? "true" : "false"); });
return;
}
if (t.dataset.q) {
var q = t.dataset.q, v = t.dataset.v;
if (t.dataset.kind === "pickMany") {
var on = t.getAttribute("aria-pressed") !== "true";
t.setAttribute("aria-pressed", on ? "true" : "false");
if (on) state.many[q][v] = 1; else delete state.many[q][v];
} else {
var same = state.pick[q] === v;
root.querySelectorAll('[data-q="' + q + '"]').forEach(function(b){ b.setAttribute("aria-pressed","false"); });
if (same) delete state.pick[q]; else { state.pick[q] = v; t.setAttribute("aria-pressed","true"); }
var qq = QS.filter(function(x){ return x._id === q; })[0];
if (qq && qq.perTable && !same && v !== "none" && v !== "unsure" && !state.tables && guests()) {
state.tables = Math.ceil(guests() / (num(S.guestsPerTable) || 8));
document.getElementById("bpTables").textContent = state.tables;
}
}
refresh(); return;
}
if (t.id === "bpCopy") { copyAnswers(); return; }
if (t.id === "bpSend") { send(t); return; }
});
document.getElementById("bp-guests").addEventListener("input", refresh);
/* ---------- answers as text ---------- */
function val(id){ var e = document.getElementById(id); return e ? e.value.trim() : ""; }
function answersText(){
var r = calc(), out = [];
out.push("Names: " + val("bp-names"), "Email: " + val("bp-email"), "Wedding date: " + val("bp-date"), "Venue: " + val("bp-venue"), "Guests: " + val("bp-guests"), "");
out.push("Selections:");
r.lines.forEach(function(l){ out.push(" " + l[0] + ": " + l[1]); });
out.push("", "Estimate: " + money(r.total), "Budget: " + (state.budget || "Not answered"), "Inspiration: " + val("bp-pin"), "Notes: " + val("bp-more"));
return out.join("\n");
}
function copyAnswers(){
var txt = answersText(), note = document.getElementById("bpSendNote");
function done(){ note.textContent = "Copied! You can paste your answers into an email."; }
function fallback(){ var ta = document.createElement("textarea"); ta.value = txt; document.body.appendChild(ta); ta.select(); try { document.execCommand("copy"); done(); } catch(e) { note.textContent = "Couldn't copy automatically. Please take a screenshot instead."; } ta.remove(); }
if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(txt).then(done, fallback); else fallback();
}
/* ---------- send through Formspree ---------- */
function send(btn){
var note = document.getElementById("bpSendNote");
if (!formReady) { note.textContent = "This planner isn't connected to an inbox yet. Tap \"Copy my answers\" and email them over instead."; return; }
var r = calc();
var data = {
_subject: "New budget planner from " + (val("bp-names") || "a couple"),
name: val("bp-names"), email: val("bp-email"), wedding_date: val("bp-date"), venue: val("bp-venue"), guest_count: val("bp-guests"),
estimate: money(r.total), budget: state.budget || "Not answered", inspiration: val("bp-pin"), notes: val("bp-more"),
selections: r.lines.map(function(l){ return l[0] + ": " + l[1]; }).join("\n"),
full_summary: answersText()
};
btn.disabled = true; note.textContent = "Sending...";
fetch(S.formspreeLink, { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json" }, body: JSON.stringify(data) })
.then(function(res){ if (!res.ok) throw new Error(res.status); show(stepEls.indexOf(thanks)); })
.catch(function(){ btn.disabled = false; note.textContent = "Something went wrong sending. Tap \"Copy my answers\" and email them over, and I'll take it from there."; });
}
show(0, true);
refresh();
})();
</script>
