/* funnelzi page templates: color themes, sections and icons (used by the ready-made pages). */
.fz-ico{--ico:none}
.fz-ico.bolt{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M13 2L4 14h7l-1 8 9-12h-7z%22 fill=%22black%22/%3E%3C/svg%3E")}
.fz-ico.shield{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5z%22 fill=%22black%22/%3E%3Cpath d=%22M8.5 12l2.5 2.5 4.5-5%22 stroke=%22white%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.fz-ico.heart{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 21s-7-4.6-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.4-9 9-9 9z%22 fill=%22black%22/%3E%3C/svg%3E")}
.fz-ico.clock{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22 fill=%22black%22/%3E%3Cpath d=%22M12 7v5l3 2%22 stroke=%22white%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3C/svg%3E")}
.fz-ico.star{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z%22 fill=%22black%22/%3E%3C/svg%3E")}
.fz-ico.check{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M5 12.5l4.5 4.5L19 7%22 stroke=%22black%22 stroke-width=%223%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.fz-ico.lock{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%225%22 y=%2211%22 width=%2214%22 height=%2210%22 rx=%222.5%22 fill=%22black%22/%3E%3Cpath d=%22M8 11V8a4 4 0 0 1 8 0v3%22 stroke=%22black%22 stroke-width=%222.4%22 fill=%22none%22/%3E%3C/svg%3E")}
.fz-ico.refund{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 5v5h5M20 19v-5h-5%22 stroke=%22black%22 stroke-width=%222.4%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M5.5 14a7.5 7.5 0 0 0 13 2.5M18.5 10A7.5 7.5 0 0 0 5.5 7.5%22 stroke=%22black%22 stroke-width=%222.4%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3C/svg%3E")}
.fz-ico.users{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%229%22 cy=%228%22 r=%223.6%22 fill=%22black%22/%3E%3Cpath d=%22M2.5 20a6.5 6.5 0 0 1 13 0z%22 fill=%22black%22/%3E%3Ccircle cx=%2217%22 cy=%229%22 r=%222.8%22 fill=%22black%22/%3E%3Cpath d=%22M16 14.2a5.5 5.5 0 0 1 5.5 5.8H18%22 fill=%22black%22/%3E%3C/svg%3E")}
.fz-ico.gift{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%223%22 y=%229%22 width=%2218%22 height=%2212%22 rx=%222%22 fill=%22black%22/%3E%3Crect x=%222%22 y=%226%22 width=%2220%22 height=%224.5%22 rx=%221.5%22 fill=%22black%22/%3E%3Cpath d=%22M12 6v15%22 stroke=%22white%22 stroke-width=%222%22/%3E%3Cpath d=%22M12 6c-1-3-5-3-5-1s3 1 5 1zm0 0c1-3 5-3 5-1s-3 1-5 1z%22 stroke=%22black%22 stroke-width=%222%22 fill=%22none%22/%3E%3C/svg%3E")}
.fz-ico.chart{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%224%22 y=%2212%22 width=%224%22 height=%228%22 rx=%221%22 fill=%22black%22/%3E%3Crect x=%2210%22 y=%227%22 width=%224%22 height=%2213%22 rx=%221%22 fill=%22black%22/%3E%3Crect x=%2216%22 y=%223%22 width=%224%22 height=%2217%22 rx=%221%22 fill=%22black%22/%3E%3C/svg%3E")}
.fz-ico.mail{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%223%22 fill=%22black%22/%3E%3Cpath d=%22M4 7.5l8 6 8-6%22 stroke=%22white%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.fz-ico.play{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 4.5l13 7.5-13 7.5z%22 fill=%22black%22/%3E%3C/svg%3E")}

/* ---------- Funnel style. One class on the page wrapper (fz-style-<preset>) plus an optional accent override. Every tint,
   background, icon and illustration is derived from the accent color, so changing it recolors the whole funnel. ---------- */
.fz-theme { background: var(--t-bg, #fff); color: var(--fz-text); }
.fz-style-violet, .fz-style-ocean, .fz-style-sunset, .fz-style-forest, .fz-style-midnight {
	--fz-accent-soft: color-mix(in srgb, var(--fz-accent) 13%, transparent);
	--t-hero: linear-gradient(135deg, color-mix(in srgb, var(--fz-accent) 14%, #fff) 0%, #fff 62%);
	--t-band: var(--fz-accent);
}
.fz-style-violet { --fz-accent: var(--fz-user-accent, #6b4dff); }
.fz-style-ocean { --fz-accent: var(--fz-user-accent, #0b8bd9); }
.fz-style-sunset { --fz-accent: var(--fz-user-accent, #ee6c12); }
.fz-style-forest { --fz-accent: var(--fz-user-accent, #0f9d6b); }
.fz-style-midnight {
	--fz-accent: var(--fz-user-accent, #8b6bff);
	--fz-accent-soft: color-mix(in srgb, var(--fz-accent) 22%, transparent);
	--fz-surface: #15152e; --fz-text: #f3f3ff; --fz-muted: #a7a7cb; --fz-border: rgba(255, 255, 255, .1);
	--t-bg: #0b0b1c;
	--t-hero: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--fz-accent) 36%, #0b0b1c) 0%, #0b0b1c 62%);
	--t-band: linear-gradient(135deg, var(--fz-accent), color-mix(in srgb, var(--fz-accent) 55%, #4361ee));
}
/* The illustrations are drawn in violet; they are turned to the accent's hue (--fz-hue is computed from the accent). */
.fz-img { filter: hue-rotate(var(--fz-hue, 0deg)); }
body.funnelzi-canvas.fz-style-midnight { background: #0b0b1c; color: #f3f3ff; }

/* ---------- Sections ---------- */
.funnelzi-page .fz-theme { width: 100%; }
.funnelzi-page .fz-sec { margin: 0; padding: 72px 24px; max-width: none; }
.funnelzi-page .fz-sec > * { max-width: 1040px; margin-left: auto; margin-right: auto; }
.funnelzi-page .fz-sec.fz-narrow > * { max-width: 640px; }
.funnelzi-page .fz-sec.tight { padding-top: 32px; padding-bottom: 32px; }
.funnelzi-page .fz-hero { background: var(--t-hero); padding: 84px 24px 64px; }
.funnelzi-page .fz-hero.small { padding: 48px 24px 24px; }
.funnelzi-page .fz-hero.center { text-align: center; }
.funnelzi-page .fz-hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 .45em; font-weight: 800; }
.funnelzi-page .fz-hero.center h1 { max-width: 820px; margin-left: auto; margin-right: auto; }
.funnelzi-page .fz-hero .fz-sub { margin-left: 0; font-size: 1.2em; }
.funnelzi-page .fz-hero.center .fz-sub { margin-left: auto; }
/* Pages built with older templates carry the alignment as Gutenberg classes: honour them here, so titles do not depend on the theme's block stylesheet. */
.funnelzi-page .has-text-align-center { text-align: center; }
.funnelzi-page .has-text-align-left { text-align: left; }
.funnelzi-page .has-text-align-right { text-align: right; }
.funnelzi-page .fz-hero h1.has-text-align-center { max-width: 820px; margin-left: auto; margin-right: auto; }
.funnelzi-page .fz-hero .fz-sub.has-text-align-center { margin-left: auto; margin-right: auto; }
.funnelzi-page .fz-eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--fz-accent-soft); color: color-mix(in srgb, var(--fz-accent) 70%, var(--fz-text)); font-weight: 800; font-size: .74em; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 18px !important; }
.funnelzi-page .fz-sub { color: var(--fz-muted); font-size: 1.15em; line-height: 1.55; max-width: 620px; }
.funnelzi-page h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.02em; line-height: 1.15; font-weight: 800; }
.funnelzi-page .fz-hero .funnelzi-cta { text-align: left; margin-left: 0; }
.funnelzi-page .fz-hero.center .funnelzi-cta { text-align: center; }
.funnelzi-page .fz-img { margin: 0; }
.funnelzi-page .fz-img img { width: 100%; height: auto; display: block; }
.funnelzi-page .wp-block-columns { gap: 40px; align-items: center; margin-bottom: 0; }
.funnelzi-page .wp-block-columns.top { align-items: flex-start; }
.funnelzi-page .fz-hero .funnelzi-btn { font-size: 1.1em; padding: 1em 1.9em; }

/* Logo / trust strip */
.funnelzi-page .fz-strip { padding: 22px 24px; border-top: 1px solid var(--fz-border); border-bottom: 1px solid var(--fz-border); background: var(--fz-surface); }
.funnelzi-page .fz-strip p { text-align: center; margin: 0; color: var(--fz-muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .78em; max-width: none; }
.funnelzi-page .fz-strip p span { margin: 0 14px; opacity: .8; }

/* Cards with icons */
.funnelzi-page .fz-card { background: var(--fz-surface); border: 1px solid var(--fz-border); border-radius: 18px; padding: 26px; box-sizing: border-box; box-shadow: 0 18px 40px -30px rgba(20, 20, 60, .45); }
.funnelzi-page .fz-card h3 { margin: 14px 0 6px; font-size: 1.15em; }
.funnelzi-page .fz-card p { margin: 0; color: var(--fz-muted); }
.funnelzi-page .fz-ico { width: 52px; height: 52px; border-radius: 16px; background: var(--fz-accent-soft); position: relative; flex: none; }
.funnelzi-page .fz-ico::before { content: ""; position: absolute; inset: 14px; background: color-mix(in srgb, var(--fz-accent) 82%, var(--fz-text)); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.funnelzi-page .fz-card .fz-ico { margin-bottom: 4px; }
.funnelzi-page .fz-num, .funnelzi-page .fz-card p.fz-num { width: 44px; height: 44px; border-radius: 50%; background: var(--fz-accent); color: var(--fz-accent-ink); font-weight: 800; display: grid; place-items: center; margin: 0 0 6px !important; }

/* Cards that are alone in their column stretch to the same height as their neighbours; cards stacked with others keep their own height. */
.funnelzi-page .wp-block-column > .fz-card:only-child { height: 100%; }

/* Quotes */
.funnelzi-page .fz-quote-text { font-size: 1.05em; line-height: 1.55; margin: 0 0 16px !important; color: var(--fz-text) !important; }
.funnelzi-page .fz-stars { color: #f5a524 !important; letter-spacing: 3px; margin: 0 0 8px !important; font-size: 1.05em; }
.funnelzi-page .fz-quote-who { display: flex; align-items: center; gap: 12px; color: var(--fz-muted) !important; font-size: .9em; font-weight: 600; }
.funnelzi-page .fz-quote-who::before { content: ""; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--fz-accent), #4361ee); flex: none; }

/* Checklists, price, guarantee, trust row */
.funnelzi-page .fz-checks { list-style: none; padding: 0; margin: 1.2em 0; display: grid; gap: .7em; }
.funnelzi-page .fz-checks li { padding-left: 2.1em; position: relative; line-height: 1.45; }
.funnelzi-page .fz-sec > .fz-checks { margin-left: auto; margin-right: auto; }   /* a check list straight in a section stays in the column, centered like the other blocks */
.funnelzi-page .fz-checks li::before { content: ""; position: absolute; left: 0; top: .12em; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--fz-accent); -webkit-mask: none; }
.funnelzi-page .fz-checks li::after { content: ""; position: absolute; left: .42em; top: .36em; width: .5em; height: .27em; border-left: 2.4px solid var(--fz-accent-ink); border-bottom: 2.4px solid var(--fz-accent-ink); transform: rotate(-45deg); }
.funnelzi-page .fz-price { text-align: center; margin: 1em 0 !important; }
.funnelzi-page .fz-price del { color: var(--fz-muted); font-size: .55em; margin-right: .5em; }
.funnelzi-page .fz-price { font-size: 3rem; font-weight: 800; letter-spacing: -.03em; color: var(--fz-text); }
.funnelzi-page .fz-guarantee { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 20px; border: 1.5px dashed var(--fz-accent); border-radius: 18px; background: var(--fz-accent-soft); }
.funnelzi-page .fz-guarantee h3 { margin: 0 0 2px; font-size: 1.05em; }
.funnelzi-page .fz-guarantee p { margin: 0; color: var(--fz-muted); font-size: .94em; }
.funnelzi-page .fz-trust-row { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 18px; }
.funnelzi-page .fz-trust-row > * { display: flex; align-items: center; gap: 8px; color: var(--fz-muted); font-weight: 600; font-size: .88em; margin: 0; }
.funnelzi-page .fz-trust-row .fz-ico { width: 30px; height: 30px; border-radius: 10px; }
.funnelzi-page .fz-trust-row .fz-ico::before { inset: 7px; }

/* Final call-to-action band */
.funnelzi-page .fz-band { background: var(--t-band); color: var(--fz-accent-ink); text-align: center; padding: 72px 24px; }
.funnelzi-page .fz-band h2, .funnelzi-page .fz-band p { color: var(--fz-accent-ink); }
.funnelzi-page .fz-band .funnelzi-btn { background: var(--fz-accent-ink); color: var(--fz-accent) !important; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); }

/* Banners (upsell / downsell) */
.funnelzi-page .fz-banner { background: var(--t-band); color: var(--fz-accent-ink); text-align: center; padding: 12px 16px; font-weight: 800; letter-spacing: .02em; border-radius: 0; margin: 0; max-width: none; }
.funnelzi-page .fz-banner.warm { background: #f59e0b; color: #1a1a2e; }
.funnelzi-page .fz-banner p { margin: 0; color: inherit; }
.funnelzi-page .fz-offer-card { background: var(--fz-surface); border: 1px solid var(--fz-border); border-radius: 22px; padding: 30px; box-shadow: 0 26px 60px -36px rgba(20, 20, 60, .5); }

/* FAQ (core/details) */
.funnelzi-page .wp-block-details { background: var(--fz-surface); border: 1px solid var(--fz-border); border-radius: 14px; padding: 16px 20px; margin: 0 auto 10px; max-width: 760px; }
.funnelzi-page .wp-block-details summary { font-weight: 700; cursor: pointer; }
.funnelzi-page .wp-block-details p { color: var(--fz-muted); margin: 10px 0 0; }

/* Thank-you */
.funnelzi-page .fz-bigcheck { width: 72px; height: 72px; line-height: 72px; margin: 0 auto 14px !important; border-radius: 50%; background: var(--fz-accent); color: var(--fz-accent-ink); font-size: 36px; font-weight: 800; text-align: center; }
.funnelzi-page .fz-hero.center .fz-bigcheck { display: block; }
.funnelzi-page .fz-support { text-align: center; color: var(--fz-muted); }

@media (max-width: 782px) {
	.funnelzi-page .fz-sec { padding: 48px 20px; }
	.funnelzi-page .fz-hero { padding: 56px 20px 40px; }
	.funnelzi-page .wp-block-columns { gap: 24px; }
	.funnelzi-page .fz-hero .funnelzi-cta { text-align: center; }
}

/* Download gate: visitors who arrive without a sign-up get the email form */
.funnelzi-page .funnelzi-gate .fz-gate-text { text-align: center; font-weight: 700; margin: 0 0 6px; }
.funnelzi-page .funnelzi-gate .funnelzi-optin { box-shadow: none; border: 0; padding: 8px 0 0; max-width: none; background: transparent; }

/* A form placed inside a template card does not need a second card around it */
.funnelzi-page .fz-offer-card .funnelzi-optin,
.funnelzi-page .fz-offer-card .funnelzi-multistep { border: 0; box-shadow: none; padding: 8px 0 0; background: transparent; max-width: none; margin: 0; }
.funnelzi-page .fz-offer-card .funnelzi-checkout { max-width: none; }
.funnelzi-page .fz-offer-card .fz-img { margin-bottom: 14px; }