/* Step Funnel — frontend */

/* Country flag emoji everywhere, including Chrome/Edge on Windows (Twemoji, CC-BY 4.0). Only downloaded when a flag is shown. */
@font-face {
	font-family: "SF Flags";
	font-display: swap;
	src: url(fonts/TwemojiCountryFlags.woff2) format("woff2");
	unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
}

/* Inter + Plus Jakarta Sans (SIL OFL), self-hosted variable fonts. Only loaded when selected. */
@font-face { font-family: "SF Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "SF Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "SF Jakarta"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "SF Jakarta"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Anton (SIL Open Font License), self-hosted: no external requests, GDPR-friendly. */
@font-face {
	font-family: "SF Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/anton-latin-ext-400-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "SF Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/anton-latin-400-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.sf-funnel {
	--sf-primary: #d9f05a;
	--sf-button-text: #111;
	--sf-text: #111;
	--sf-muted: #55575c;
	--sf-bg: #f6f6f4;
	--sf-card: #fff;
	--sf-border: #e2e2de;
	--sf-radius: 14px;
	--sf-max: 760px;
	--sf-field-max: 560px;
	--sf-danger: #b42318;
	--sf-ease: cubic-bezier(.2, .7, .2, 1);
	--sf-selected: color-mix(in srgb, var(--sf-primary) 55%, var(--sf-text));
	--sf-focus: color-mix(in srgb, var(--sf-primary) 60%, transparent);
	--sf-check: #fff;
	position: relative;
	background: var(--sf-bg);
	color: var(--sf-text);
	box-sizing: border-box;
}
.sf-funnel *,
.sf-funnel *::before,
.sf-funnel *::after { box-sizing: border-box; }

.sf-funnel .sf-shell {
	max-width: var(--sf-max);
	margin: 0 auto;
	padding: clamp(20px, 4vw, 48px) 20px clamp(32px, 6vw, 72px);
}

.sf-funnel .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ---------- Top bar: back + progress ---------- */
.sf-funnel .sf-topbar {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	min-height: 44px;
	margin-bottom: clamp(28px, 6vw, 56px);
}
.sf-funnel.sf-progress-none .sf-progress { visibility: hidden; }
.sf-funnel .sf-back {
	grid-column: 1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	padding: 0; margin: 0;
	border: 0; border-radius: 50%;
	background: transparent;
	color: var(--sf-muted);
	cursor: pointer;
	transition: background .2s, color .2s;
}
.sf-funnel .sf-back:hover { background: color-mix(in srgb, var(--sf-text) 7%, transparent); color: var(--sf-text); }
.sf-funnel .sf-back .sf-icon { width: 26px; height: 26px; }
.sf-funnel .sf-back[hidden] { display: none; }
.sf-funnel .sf-progress { grid-column: 2; display: flex; justify-content: center; }
.sf-funnel .sf-topbar__side { display: flex; align-items: center; min-width: 44px; }
.sf-funnel .sf-topbar.is-hidden .sf-progress { visibility: hidden; }

.sf-funnel .sf-dots { display: flex; align-items: center; width: 100%; max-width: 560px; }
.sf-funnel .sf-dot {
	flex: 0 0 auto;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sf-text) 20%, var(--sf-bg));
	transition: background .3s, transform .3s var(--sf-ease);
}
.sf-funnel .sf-dot-line {
	flex: 1 1 auto;
	height: 3px;
	background: color-mix(in srgb, var(--sf-text) 20%, var(--sf-bg));
	transition: background .3s;
}
.sf-funnel .sf-dot.is-done,
.sf-funnel .sf-dot-line.is-done { background: var(--sf-primary); }
.sf-funnel .sf-dot.is-current { background: var(--sf-primary); transform: scale(1.25); }

.sf-funnel .sf-bar {
	width: 100%; max-width: 560px; height: 8px;
	border-radius: 99px;
	background: color-mix(in srgb, var(--sf-text) 12%, var(--sf-bg));
	overflow: hidden;
}
.sf-funnel .sf-bar__fill {
	display: block; height: 100%; width: 0;
	border-radius: inherit;
	background: var(--sf-primary);
	transition: width .45s var(--sf-ease);
}

/* ---------- Steps ---------- */
.sf-funnel:not(.is-ready) .sf-steps > .sf-step:not(:first-child) { display: none; }
.sf-funnel .sf-step[hidden] { display: none !important; }

.sf-funnel .sf-step__inner {
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: clamp(18px, 3vw, 32px);
}
.sf-funnel .sf-step__inner > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.sf-funnel .sf-step__inner > :is(h1,
h2,
h3,
h4) { line-height: 1.15; text-wrap: balance; }
.sf-funnel .sf-step__inner > p { text-wrap: pretty; }
.sf-funnel .sf-step:focus { outline: none; }

.sf-funnel .sf-step.is-entering { animation: sf-in .38s var(--sf-ease) both; }
.sf-funnel .sf-step.is-entering.is-back { animation-name: sf-in-back; }
.sf-funnel .sf-step.is-leaving { animation: sf-out .16s ease-in both; }
@keyframes sf-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sf-in-back { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes sf-out { to { opacity: 0; transform: translateY(-8px); } }

/* Big poster headline for intro screens: add class "sf-hero-title" to any heading. */
.sf-funnel .sf-hero-title {
	font-family: var(--sf-display-font, "SF Anton", "Anton", Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif);
	font-size: clamp(40px, 6.6vw, 80px);
	font-weight: 400;
	line-height: .96;
	hyphens: none;
	letter-spacing: -.005em;
	text-transform: uppercase;
}
.sf-funnel .sf-proof { color: var(--sf-muted); font-size: 16px; }

/* ---------- Fields ---------- */
.sf-funnel .sf-field { width: 100%; max-width: var(--sf-field-max); margin-inline: auto; border: 0; padding: 0; min-width: 0; }
.sf-funnel .sf-field__label { display: block; font-weight: 600; margin-bottom: 8px; }
.sf-funnel .sf-field__help { margin: 8px 0 0; color: var(--sf-muted); font-size: 15px; text-align: center; }
.sf-funnel .sf-field__error { margin: 8px 0 0; color: var(--sf-danger); font-size: 15px; font-weight: 500; text-align: center; }
.sf-funnel .sf-field__error:empty { display: none; }

.sf-funnel .sf-input {
	display: block;
	width: 100%;
	min-height: 60px;
	padding: 16px 20px;
	font: inherit;
	font-size: 19px;
	line-height: 1.4;
	color: var(--sf-text);
	background: var(--sf-card);
	border: 2px solid var(--sf-border);
	border-radius: calc(var(--sf-radius) * .7);
	box-shadow: none;
	appearance: none;
	transition: border-color .2s, box-shadow .2s;
}
.sf-funnel .sf-input::placeholder { color: color-mix(in srgb, var(--sf-muted) 75%, transparent); }
.sf-funnel .sf-input:focus { outline: none; border-color: var(--sf-text); box-shadow: 0 0 0 4px var(--sf-focus); }
textarea.sf-input { min-height: 140px; resize: vertical; }
.sf-funnel .sf-field.has-error .sf-input { border-color: var(--sf-danger); }

.sf-funnel .sf-select { position: relative; }
.sf-funnel .sf-select .sf-input { padding-right: 52px; cursor: pointer; }
.sf-funnel .sf-select__chev { position: absolute; right: 18px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); pointer-events: none; color: var(--sf-muted); }

/* ---------- Choice: shared ---------- */
.sf-funnel .sf-choice__opt {
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	color: var(--sf-text);
	background: var(--sf-card);
	border: 2px solid transparent;
	border-radius: var(--sf-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 26px -16px rgba(0, 0, 0, .22);
	transition: transform .2s var(--sf-ease), border-color .2s, background .2s, box-shadow .2s;
	-webkit-tap-highlight-color: transparent;
}
.sf-funnel .sf-choice__opt input {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	margin: 0; opacity: 0; cursor: pointer;
}
.sf-funnel .sf-choice__opt:hover { border-color: var(--sf-border); transform: translateY(-2px); }
.sf-funnel .sf-choice__opt:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--sf-focus); }
.sf-funnel .sf-choice__opt.is-selected {
	border-color: var(--sf-selected);
	background: color-mix(in srgb, var(--sf-primary) 16%, var(--sf-card));
}
.sf-funnel .sf-choice__media { display: inline-flex; align-items: center; justify-content: center; color: var(--sf-text); line-height: 1; }
.sf-funnel .sf-choice__media .sf-icon { width: var(--sf-icon-size, 48px); height: var(--sf-icon-size, 48px); }
.sf-funnel .sf-choice__media .sf-emoji { font-size: calc(var(--sf-icon-size, 48px) * .9); }
.sf-funnel .sf-choice__media img { width: var(--sf-icon-size, 48px); height: var(--sf-icon-size, 48px); object-fit: contain; }
.sf-funnel .sf-choice__label { font-size: 19px; line-height: 1.3; }
.sf-funnel .sf-choice__check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--sf-primary);
	color: var(--sf-check);
	opacity: 0;
	transform: scale(.4);
	transition: opacity .2s, transform .25s var(--sf-ease);
}
.sf-funnel .sf-choice__check .sf-icon { width: 16px; height: 16px; stroke-width: 3.5; }
.sf-funnel .sf-choice__opt.is-selected .sf-choice__check { opacity: 1; transform: scale(1); }

/* Cards (icon above label) */
.sf-funnel .sf-choice--cards .sf-choice__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
}
.sf-funnel .sf-choice--cards.has-cols .sf-choice__grid { grid-template-columns: repeat(var(--sf-cols), minmax(0, 1fr)); }
.sf-funnel .sf-choice--cards .sf-choice__opt {
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	min-height: 200px;
	padding: 28px 16px;
	text-align: center;
}
.sf-funnel .sf-choice--cards .sf-choice__opt:not(.has-media) { min-height: 96px; }
.sf-funnel .sf-choice--cards .sf-choice__check { position: absolute; top: 12px; right: 12px; }

/* List (icon left, check right) */
.sf-funnel .sf-choice--list .sf-choice__grid { display: grid; gap: 12px; }
.sf-funnel .sf-choice--list .sf-choice__opt { gap: 16px; min-height: 64px; padding: 14px 18px; text-align: left; }
.sf-funnel .sf-choice--list .sf-choice__label { flex: 1; }
.sf-funnel .sf-choice--list .sf-choice__media .sf-icon,
.sf-funnel .sf-choice--list .sf-choice__media img { width: min(var(--sf-icon-size, 48px), 32px); height: min(var(--sf-icon-size, 48px), 32px); }
.sf-funnel .sf-choice--list .sf-choice__media .sf-emoji { font-size: 26px; }

/* Pills */
.sf-funnel .sf-choice--pills .sf-choice__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sf-funnel .sf-choice--pills .sf-choice__opt { gap: 10px; padding: 12px 20px; border-radius: 999px; }
.sf-funnel .sf-choice--pills .sf-choice__label { font-size: 17px; }
.sf-funnel .sf-choice--pills .sf-choice__media .sf-icon,
.sf-funnel .sf-choice--pills .sf-choice__media img { width: 22px; height: 22px; }
.sf-funnel .sf-choice--pills .sf-choice__media .sf-emoji { font-size: 20px; }
.sf-funnel .sf-choice--pills .sf-choice__check { display: none; }

.sf-funnel .sf-field--choice.has-error .sf-choice__opt { border-color: color-mix(in srgb, var(--sf-danger) 45%, transparent); }

/* ---------- Consent ---------- */
.sf-funnel .sf-consent { position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 16px; line-height: 1.5; }
.sf-funnel .sf-consent input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.sf-funnel .sf-consent__box {
	flex: 0 0 24px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px;
	border: 2px solid var(--sf-border);
	border-radius: 6px;
	background: var(--sf-card);
	color: transparent;
	transition: background .2s, border-color .2s, color .2s;
}
.sf-funnel .sf-consent__box .sf-icon { width: 15px; height: 15px; }
.sf-funnel .sf-consent input:checked + .sf-consent__box { background: var(--sf-primary); border-color: var(--sf-selected); color: var(--sf-button-text); }
.sf-funnel .sf-consent input:focus-visible + .sf-consent__box { box-shadow: 0 0 0 4px var(--sf-focus); }
.sf-funnel .sf-field--consent.has-error .sf-consent__box { border-color: var(--sf-danger); }
.sf-funnel .sf-consent__text a { color: inherit; }

/* ---------- Buttons ---------- */
.sf-funnel .sf-btn-wrap { display: flex; justify-content: center; width: 100%; max-width: var(--sf-field-max); margin-inline: auto; }
.sf-funnel .sf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 64px;
	padding: 16px 32px;
	font: inherit;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.005em;
	text-decoration: none;
	color: var(--sf-button-text);
	background: var(--sf-button-bg, var(--sf-primary));
	border: 0;
	border-radius: var(--sf-radius);
	box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--sf-text) 60%, transparent);
	cursor: pointer;
	transition: transform .18s var(--sf-ease), background .25s, color .25s, box-shadow .25s;
	-webkit-tap-highlight-color: transparent;
}
.sf-funnel .sf-btn--full { width: 100%; }
.sf-funnel .sf-btn:hover { transform: translateY(-1px); color: var(--sf-button-text); }
.sf-funnel .sf-btn:active { transform: translateY(1px) scale(.99); }
.sf-funnel .sf-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--sf-focus), 0 0 0 6px var(--sf-text); }
.sf-funnel .sf-btn--ghost { background: transparent; color: var(--sf-text); box-shadow: inset 0 0 0 2px var(--sf-border); }
.sf-funnel .sf-btn--ghost:hover { color: var(--sf-text); box-shadow: inset 0 0 0 2px var(--sf-text); }
.sf-funnel .sf-btn.is-waiting {
	background: color-mix(in srgb, var(--sf-text) 18%, var(--sf-bg));
	color: color-mix(in srgb, var(--sf-text) 55%, var(--sf-bg));
	box-shadow: none;
}
.sf-funnel .sf-btn.is-busy { pointer-events: none; opacity: .75; }

/* Animated icon */
.sf-funnel .sf-btn__iconwrap { position: relative; display: inline-flex; width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.sf-funnel .sf-btn__icon { width: 100%; height: 100%; stroke-width: 2.5; }

/* Nudge: arrow pushes forward, a small dot trails behind it. */
.sf-funnel.sf-anim-nudge .sf-btn:not([class*="sf-btn--anim-"]) .sf-btn__icon,
.sf-funnel .sf-btn--anim-nudge .sf-btn__icon { animation: sf-nudge 1.5s var(--sf-ease) infinite; }
.sf-funnel.sf-anim-nudge .sf-btn--icon-end:not([class*="sf-btn--anim-"]) .sf-btn__iconwrap::before,
.sf-funnel .sf-btn--anim-nudge.sf-btn--icon-end .sf-btn__iconwrap::before {
	content: "";
	position: absolute;
	left: -9px; top: 50%;
	width: 5px; height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: currentColor;
	animation: sf-trail 1.5s var(--sf-ease) infinite;
}
@keyframes sf-nudge {
	0%, 100% { transform: translateX(-2px); }
	45% { transform: translateX(6px); }
	60% { transform: translateX(6px); }
}
@keyframes sf-trail {
	0%, 20% { opacity: 0; transform: translateX(6px) scale(.4); }
	45% { opacity: 1; transform: translateX(0) scale(1); }
	75%, 100% { opacity: 0; transform: translateX(-4px) scale(.4); }
}

/* Slide: arrow exits right and re-enters from the left. */
.sf-funnel.sf-anim-slide .sf-btn:not([class*="sf-btn--anim-"]) .sf-btn__iconwrap,
.sf-funnel .sf-btn--anim-slide .sf-btn__iconwrap { overflow: hidden; }
.sf-funnel.sf-anim-slide .sf-btn:not([class*="sf-btn--anim-"]) .sf-btn__icon,
.sf-funnel .sf-btn--anim-slide .sf-btn__icon { animation: sf-slide 2.2s var(--sf-ease) infinite; }
@keyframes sf-slide {
	0%, 35% { transform: translateX(0); opacity: 1; }
	50% { transform: translateX(120%); opacity: 0; }
	51% { transform: translateX(-120%); opacity: 0; }
	68%, 100% { transform: translateX(0); opacity: 1; }
}

/* Hover only */
.sf-funnel.sf-anim-hover .sf-btn:not([class*="sf-btn--anim-"]):hover .sf-btn__icon,
.sf-funnel.sf-anim-hover .sf-btn:not([class*="sf-btn--anim-"]):focus-visible .sf-btn__icon,
.sf-funnel .sf-btn--anim-hover:hover .sf-btn__icon,
.sf-funnel .sf-btn--anim-hover:focus-visible .sf-btn__icon { animation: sf-nudge 1s var(--sf-ease) infinite; }

.sf-funnel .sf-btn.is-waiting .sf-btn__icon,
.sf-funnel .sf-btn.is-waiting .sf-btn__iconwrap::before { animation-play-state: paused; }

/* ---------- Interstitial loader ---------- */
.sf-funnel .sf-loader {
	width: 100%; max-width: 420px; height: 10px;
	margin-inline: auto;
	border-radius: 99px;
	background: color-mix(in srgb, var(--sf-text) 12%, var(--sf-bg));
	overflow: hidden;
}
.sf-funnel .sf-loader__bar { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--sf-primary); }
.sf-funnel .sf-step--interstitial.is-active .sf-loader__bar { animation: sf-load var(--sf-wait, 1.8s) var(--sf-ease) forwards; }
@keyframes sf-load { 0% { width: 0; } 70% { width: 82%; } 100% { width: 100%; } }

/* ---------- Misc ---------- */
.sf-funnel .sf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sf-funnel .sf-status { margin: 16px 0 0; text-align: center; color: var(--sf-danger); font-weight: 500; }
.sf-funnel .sf-status:empty { display: none; }
.sf-funnel .sf-merge:empty { display: none; }
.sf-funnel .sf-noscript { text-align: center; color: var(--sf-muted); }

@media (max-width: 600px) {
	.sf-funnel .sf-input { font-size: 17px; min-height: 56px; }
	.sf-funnel .sf-btn { font-size: 19px; min-height: 58px; }
	.sf-funnel .sf-choice--cards .sf-choice__opt { min-height: 160px; padding: 22px 12px; }
	.sf-funnel .sf-choice__label { font-size: 17px; }
	.sf-funnel .sf-dot { width: 11px; height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.sf-funnel *,
.sf-funnel *::before { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.sf-funnel .sf-btn__iconwrap::before { display: none; }
}

.sf-funnel .sf-emoji-lg { font-size: clamp(40px, 6vw, 64px); line-height: 1; }

/* ---------- Landing page template ---------- */
body.sf-canvas { margin: 0; background: #fff; }
.sf-canvas__main > .sf-funnel,
.sf-canvas__main > .alignfull { margin: 0; max-width: none; }
.sf-canvas .sf-funnel { min-height: 100vh; min-height: 100dvh; }
.admin-bar.sf-canvas .sf-funnel { min-height: calc(100dvh - 32px); }

/* ---------- Header bar: back arrow left, logo centred ---------- */
.sf-funnel .sf-header {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 64px 1fr 64px;
	align-items: center;
	min-height: 76px;
	padding: 8px clamp(10px, 3vw, 32px);
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 8px 18px -14px rgba(0, 0, 0, .28);
}
.sf-funnel .sf-header__side { display: flex; align-items: center; }
.sf-funnel .sf-header__brand { display: flex; align-items: center; justify-content: center; min-width: 0; }
.sf-funnel .sf-header__logo { display: block; width: auto; max-width: 100%; object-fit: contain; }
.sf-funnel .sf-header__name { font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: var(--sf-text); }
.sf-funnel .sf-header .sf-back { width: 48px; height: 48px; }
.sf-funnel .sf-header .sf-back .sf-icon { width: 34px; height: 34px; stroke-width: 1.75; }
.sf-funnel.has-header .sf-shell { padding-top: clamp(28px, 6vw, 72px); }

/* ---------- Choice: icon circles (icon in a round button, label below) ---------- */
.sf-funnel .sf-choice--icons { --sf-field-max: 840px; --sf-circle: calc(var(--sf-icon-size, 48px) + 46px); }
.sf-funnel .sf-choice--icons .sf-choice__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 12px; }
.sf-funnel .sf-choice--icons.has-cols .sf-choice__grid { grid-template-columns: repeat(var(--sf-cols), minmax(0, 1fr)); }
.sf-funnel .sf-choice--icons .sf-choice__opt,
.sf-funnel .sf-choice--icons .sf-choice__opt:hover,
.sf-funnel .sf-choice--icons .sf-choice__opt.is-selected {
	flex-direction: column;
	gap: 14px;
	padding: 6px 4px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}
.sf-funnel .sf-choice--icons .sf-choice__media {
	width: var(--sf-circle);
	height: var(--sf-circle);
	border-radius: 50%;
	background: var(--sf-card);
	box-shadow: 0 0 0 0 var(--sf-primary), 0 2px 4px rgba(0, 0, 0, .04), 0 12px 26px -16px rgba(0, 0, 0, .3);
	transition: box-shadow .2s var(--sf-ease), transform .2s var(--sf-ease);
}
.sf-funnel .sf-choice--icons .sf-choice__opt:hover .sf-choice__media { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sf-primary) 75%, transparent), 0 2px 4px rgba(0, 0, 0, .04), 0 12px 26px -16px rgba(0, 0, 0, .3); }
.sf-funnel .sf-choice--icons .sf-choice__opt.is-selected .sf-choice__media { box-shadow: 0 0 0 6px var(--sf-primary), 0 2px 4px rgba(0, 0, 0, .04), 0 12px 26px -16px rgba(0, 0, 0, .3); }
.sf-funnel .sf-choice--icons .sf-choice__opt:has(input:focus-visible) .sf-choice__media { box-shadow: 0 0 0 6px var(--sf-focus); }
.sf-funnel .sf-choice--icons .sf-choice__check {
	position: absolute;
	top: 0;
	left: calc(50% + var(--sf-circle) / 2 - 24px);
	width: 32px;
	height: 32px;
	box-shadow: 0 0 0 3px var(--sf-bg);
}
.sf-funnel .sf-choice--icons .sf-choice__opt:hover .sf-choice__check { opacity: .45; transform: scale(.85); }
.sf-funnel .sf-choice--icons .sf-choice__opt.is-selected .sf-choice__check { opacity: 1; transform: scale(1); }
.sf-funnel .sf-choice--icons .sf-choice__label { font-size: 20px; color: var(--sf-muted); }
.sf-funnel .sf-choice--icons .sf-choice__opt.is-selected .sf-choice__label { color: var(--sf-text); }

/* ---------- Choice: radio pills (round radio left, two columns) ---------- */
.sf-funnel .sf-choice--radio { --sf-field-max: 840px; }
.sf-funnel .sf-choice--radio .sf-choice__grid { display: grid; grid-template-columns: repeat(var(--sf-cols, 2), minmax(0, 1fr)); gap: 14px 16px; }
.sf-funnel .sf-choice--radio .sf-choice__opt { gap: 18px; min-height: 64px; padding: 12px 24px 12px 12px; border-radius: 999px; text-align: left; }
.sf-funnel .sf-choice--radio .sf-choice__opt:hover { transform: none; }
.sf-funnel .sf-choice--radio .sf-choice__label { flex: 1; font-size: 20px; }
.sf-funnel .sf-choice--radio .sf-choice__media { order: 0; }
.sf-funnel .sf-choice--radio .sf-choice__media .sf-icon,
.sf-funnel .sf-choice--radio .sf-choice__media img { width: min(var(--sf-icon-size, 48px), 30px); height: min(var(--sf-icon-size, 48px), 30px); }
.sf-funnel .sf-choice--radio .sf-choice__check {
	order: -1;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	opacity: 1;
	transform: none;
	background: color-mix(in srgb, var(--sf-text) 9%, var(--sf-card));
	color: transparent;
	transition: background .2s, color .2s;
}
.sf-funnel .sf-choice--radio .sf-choice__opt:hover .sf-choice__check { background: color-mix(in srgb, var(--sf-primary) 45%, var(--sf-card)); }
.sf-funnel .sf-choice--radio .sf-choice__opt.is-selected .sf-choice__check { background: var(--sf-primary); color: var(--sf-check); }
.sf-funnel .sf-choice--radio .sf-choice__check .sf-icon { width: 18px; height: 18px; }

/* Optional brand colour per icon */
.sf-funnel .sf-tint { display: inline-flex; }

/* ---------- Slider ---------- */
.sf-funnel .sf-range { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.sf-funnel .sf-range__value {
	display: inline-flex;
	justify-content: center;
	min-width: 120px;
	padding: 14px 28px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--sf-text) 8%, var(--sf-bg));
	font-size: clamp(26px, 4vw, 36px);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}
.sf-funnel .sf-range__input {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: linear-gradient(to right, var(--sf-primary) 0 var(--sf-pct, 0%), color-mix(in srgb, var(--sf-text) 50%, var(--sf-bg)) var(--sf-pct, 0%) 100%);
	cursor: pointer;
	outline: none;
}
.sf-funnel .sf-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 38px; height: 38px;
	border: 0; border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3), inset 0 0 0 10px #fff, inset 0 0 0 19px #e6e6e6;
}
.sf-funnel .sf-range__input::-moz-range-thumb {
	width: 38px; height: 38px;
	border: 0; border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.sf-funnel .sf-range__input::-moz-range-track { background: transparent; border: 0; }
.sf-funnel .sf-range__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--sf-focus), 0 2px 8px rgba(0, 0, 0, .3); }

/* ---------- Country select / flags ---------- */
.sf-funnel .sf-flag-font,
.sf-funnel .sf-merge[data-sf-merge="geo_flag"] { font-family: "SF Flags", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.sf-funnel .sf-merge[data-sf-merge="geo_flag"] { font-size: 1.25em; vertical-align: -.1em; }

@media (max-width: 600px) {
	.sf-funnel .sf-choice--radio .sf-choice__grid { grid-template-columns: 1fr; }
	.sf-funnel .sf-choice--icons .sf-choice__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sf-funnel .sf-choice--icons .sf-choice__label { font-size: 17px; }
	.sf-funnel .sf-header { min-height: 64px; }
}

/* Keep funnel buttons on their own colours in every theme state */
.sf-funnel .sf-btn:hover,
.sf-funnel .sf-btn:focus,
.sf-funnel .sf-btn:active { background: var(--sf-button-bg, var(--sf-primary)); color: var(--sf-button-text); border: 0; text-decoration: none; }
.sf-funnel .sf-btn.sf-btn--ghost:hover,
.sf-funnel .sf-btn.sf-btn--ghost:focus { background: transparent; color: var(--sf-text); }
.sf-funnel .sf-btn.is-waiting,
.sf-funnel .sf-btn.is-waiting:hover,
.sf-funnel .sf-btn.is-waiting:focus {
	background: color-mix(in srgb, var(--sf-text) 18%, var(--sf-bg));
	color: color-mix(in srgb, var(--sf-text) 55%, var(--sf-bg));
	box-shadow: none;
}
.sf-funnel .sf-btn { text-transform: none; text-shadow: none; min-width: 0; width: auto; }
.sf-funnel .sf-btn.sf-btn--full { width: 100%; }
.sf-funnel .sf-back,
.sf-funnel .sf-back:hover,
.sf-funnel .sf-back:focus { border: 0; box-shadow: none; padding: 0; min-height: 0; text-transform: none; }
.sf-funnel .sf-back:not(:hover):not(:focus-visible) { background: transparent; }
.sf-funnel .sf-input { max-width: none; margin: 0; }

/* Theme-proof text: themes often style every <label> bold or coloured. */
.sf-funnel .sf-choice__opt,
.sf-funnel .sf-consent { font-weight: 400; color: var(--sf-text); text-transform: none; letter-spacing: normal; }
.sf-funnel .sf-choice--icons .sf-choice__opt { color: var(--sf-muted); }

/* Question headings: big and bold by default (a font size picked in the editor still wins). */
.sf-funnel .sf-step__inner > :is(h1, h2, h3):not(.sf-hero-title) {
	font-size: clamp(26px, 3.8vw, 42px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.012em;
	color: var(--sf-text);
}
.sf-funnel .sf-step__inner > p:not(.sf-proof):not(.sf-emoji-lg):not(.sf-eyebrow):not(.sf-fineprint) { font-size: clamp(17px, 2vw, 20px); color: var(--sf-muted); max-width: 64ch; margin-inline: auto !important; }

/* ---------- v0.3: option descriptions, eyebrow, King Kong slider ---------- */
.sf-funnel .sf-choice__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sf-funnel .sf-choice--list .sf-choice__text,
.sf-funnel .sf-choice--radio .sf-choice__text { flex: 1; }
.sf-funnel .sf-choice--cards .sf-choice__text { align-items: center; }
.sf-funnel .sf-choice__desc { font-size: 15px; line-height: 1.5; color: var(--sf-muted); }
.sf-funnel .sf-choice--cards .sf-choice__opt:has(.sf-choice__desc) { justify-content: flex-start; padding: 28px 22px; }
.sf-funnel .sf-choice--cards .sf-choice__opt:has(.sf-choice__desc) .sf-choice__label { font-size: 22px; font-weight: 800; }

.sf-funnel .sf-eyebrow { font-size: clamp(15px, 2vw, 22px); letter-spacing: .02em; text-transform: uppercase; color: var(--sf-muted); }
.sf-funnel .sf-step__inner > p.sf-eyebrow { font-size: clamp(15px, 2vw, 22px); }

.sf-funnel .sf-field--range { --sf-field-max: 720px; }
.sf-funnel .sf-range--plain .sf-range__input { background: color-mix(in srgb, var(--sf-text) 45%, var(--sf-bg)); }
.sf-funnel .sf-choice--pills .sf-choice__opt { min-width: 52px; justify-content: center; }

.sf-funnel .sf-choice--pills { --sf-field-max: 760px; }
.sf-funnel .sf-choice--cards { --sf-field-max: 620px; }
.sf-funnel .sf-choice--cards .sf-choice__opt { min-height: 230px; }

/* Dots row grows with the number of questions (about 56px per dot), up to the full width. */
.sf-funnel .sf-dots { max-width: min(100%, calc(var(--sf-dot-count, 10) * 56px)); }
@media (max-width: 600px) {
	.sf-funnel .sf-dot { width: 10px; height: 10px; }
	.sf-funnel .sf-dot-line { height: 2px; }
}

/* ---------- v0.5: header block, back block, notice, checklist, highlight ---------- */
.sf-funnel .sf-header-block {
	position: relative;
	z-index: 2;
	width: 100%;
	background: #fff;
}
.sf-funnel .sf-header-block.has-shadow { box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 8px 18px -14px rgba(0, 0, 0, .28); }
.sf-funnel .sf-header-block__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 12px;
}
/* Every child gets its own full row (e.g. a notice bar)... */
.sf-funnel .sf-header-block__inner > * { grid-column: 1 / -1; margin: 0; }
/* ...except the back button (left) and the logo (centre), which share a row. */
.sf-funnel .sf-header-block__inner > .sf-back-block { grid-column: 1; justify-self: start; padding: 10px 0 10px clamp(10px, 3vw, 32px); }
.sf-funnel .sf-header-block__inner > :is(.wp-block-site-logo, .wp-block-image, .sf-header-logo) { grid-column: 2; justify-self: center; padding: 12px 0; }
.sf-funnel .sf-header-block__inner > .sf-progress--block { padding: 14px 20px; }
.sf-funnel .sf-header-block__inner > .sf-notice--bar { justify-self: stretch; }
.sf-funnel .sf-header-block .wp-block-site-logo img,
.sf-funnel .sf-header-block .wp-block-image img { display: block; height: auto; }

.sf-funnel .sf-back-block { display: flex; }
.sf-funnel .sf-back-btn,
.sf-funnel .sf-back-btn:hover,
.sf-funnel .sf-back-btn:focus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px;
	min-height: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: inherit;
	color: var(--sf-muted);
	font: inherit;
	text-transform: none;
	cursor: pointer;
	transition: color .2s, background .2s, opacity .2s;
}
.sf-funnel .sf-back-btn:hover { color: var(--sf-text); background: color-mix(in srgb, var(--sf-text) 7%, transparent); }
.sf-funnel .sf-back-btn .sf-icon { width: var(--sf-back-size, 34px); height: var(--sf-back-size, 34px); }
.sf-funnel .sf-back-btn__text { font-size: 16px; padding-right: 8px; }
.sf-funnel:not(.sf-can-back) .sf-back-block { visibility: hidden; pointer-events: none; }
.sf-funnel.sf-hide-progress .sf-progress { visibility: hidden; }
.sf-funnel.sf-hide-progress .sf-progress--block { display: none; }
.sf-funnel .sf-topbar.is-collapsed { display: none; }

.sf-funnel .sf-notice { text-align: center; }
.sf-funnel .sf-notice--bar { display: block; width: 100%; padding: 10px 16px; background: #0d0f1f; color: #fff; font-size: 15px; font-weight: 500; }
.sf-funnel .sf-notice--bar .sf-notice__inner { display: inline-flex; align-items: center; gap: 10px; }
.sf-funnel .sf-notice__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--sf-primary); flex: 0 0 auto; }
.sf-funnel .sf-notice__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: sf-pulse 1.8s ease-out infinite; }
@keyframes sf-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
.sf-funnel .sf-notice--pill { display: flex; justify-content: center; }
.sf-funnel .sf-notice--pill .sf-notice__inner {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 10px;
	padding: 7px 16px;
	border: 1.5px solid color-mix(in srgb, var(--sf-primary) 45%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--sf-primary) 8%, var(--sf-card));
	font-size: 16px;
	line-height: 1.4;
}
.sf-funnel .sf-notice.has-background .sf-notice__inner { background: transparent; border-color: transparent; }
.sf-funnel .sf-notice__label { color: color-mix(in srgb, var(--sf-primary) 70%, #c2410c); font-weight: 700; }

.sf-funnel .sf-checklist { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 0; padding: 0; list-style: none; font-size: 16px; }
.sf-funnel .sf-checklist--stacked { flex-direction: column; align-items: center; }
.sf-funnel .sf-checklist li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.sf-funnel .sf-checklist__icon { display: inline-flex; color: #22a33a; }
.sf-funnel .sf-checklist__icon .sf-icon { width: 22px; height: 22px; }

/* Gradient highlight for words in any heading or paragraph (toolbar: "Highlight") */
.sf-funnel .sf-hl {
	background: var(--sf-highlight, var(--sf-button-bg, var(--sf-primary)));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Intro styles from the landing-page template */
.sf-funnel .sf-step__inner > h1.sf-intro-title,
.sf-funnel .sf-step__inner > h2.sf-intro-title {
	font-size: clamp(32px, 5.4vw, 58px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.035em;
}
.sf-funnel .sf-step__inner > p.sf-fineprint { font-size: 15px; color: var(--sf-muted); }
.sf-funnel .sf-step__inner > :is(.wp-block-video, .wp-block-embed, .wp-block-image) { width: 100%; max-width: 100%; }
.sf-funnel .wp-block-video video,
.sf-funnel .wp-block-embed iframe,
.sf-funnel .sf-step .wp-block-image img { display: block; width: 100%; border-radius: calc(var(--sf-radius) + 2px); overflow: hidden; }
.sf-funnel .wp-block-video video { background: #000; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .55); }
.sf-funnel .sf-btn-wrap--auto { max-width: none; }
.sf-funnel .sf-btn--auto { padding-inline: 44px; }

.sf-funnel .sf-step__inner > p.sf-fineprint { font-size: 15px; color: var(--sf-muted); max-width: 72ch; margin-inline: auto !important; }
.sf-funnel .sf-fineprint strong { font-weight: 700; color: color-mix(in srgb, var(--sf-text) 70%, var(--sf-muted)); }

/* Icon circles: hover looks the same as selected (same thick ring, full opacity, check badge). */
.sf-funnel .sf-choice--icons .sf-choice__opt:hover .sf-choice__media { box-shadow: 0 0 0 6px var(--sf-primary), 0 2px 4px rgba(0, 0, 0, .04), 0 12px 26px -16px rgba(0, 0, 0, .3); }
.sf-funnel .sf-choice--icons .sf-choice__opt:hover .sf-choice__check { opacity: 1; transform: scale(1); }
.sf-funnel .sf-choice--icons .sf-choice__opt:hover .sf-choice__label { color: var(--sf-text); }
@media (hover: none) {
	/* Touch screens keep "hover" after a tap; only the real selection should show there. */
	.sf-funnel .sf-choice--icons .sf-choice__opt:not(.is-selected):hover .sf-choice__media { box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 12px 26px -16px rgba(0, 0, 0, .3); }
	.sf-funnel .sf-choice--icons .sf-choice__opt:not(.is-selected):hover .sf-choice__check { opacity: 0; transform: scale(.4); }
	.sf-funnel .sf-choice--icons .sf-choice__opt:not(.is-selected):hover .sf-choice__label { color: var(--sf-muted); }
}

/* ---------- Slider: King Kong look (colours come from your design settings) ---------- */
.sf-funnel .sf-range { --sf-thumb: 40px; --sf-track-h: 20px; --sf-track: #808a8a; gap: 30px; }
.sf-funnel .sf-range__value {
	min-width: 0;
	padding: 14px 30px;
	font-size: 36px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--sf-text);
	background: color-mix(in srgb, var(--sf-text) 8%, #fff);
}
/* The fill ends exactly under the centre of the handle, also at both ends of the track. */
.sf-funnel .sf-range__input,
.sf-funnel .sf-range--plain .sf-range__input {
	height: var(--sf-track-h);
	border-radius: 999px;
	background:
		linear-gradient(var(--sf-primary), var(--sf-primary)) no-repeat left center / calc(var(--sf-thumb) / 2 + (100% - var(--sf-thumb)) * var(--sf-p, 0)) 100%,
		var(--sf-track);
}
.sf-funnel .sf-range--plain .sf-range__input { background: var(--sf-track); }
.sf-funnel .sf-range__input::-webkit-slider-thumb {
	width: var(--sf-thumb);
	height: var(--sf-thumb);
	border: 1px solid #d9d9d9;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, #dadada 0, #d2d2d2 7px, rgba(210, 210, 210, 0) 8px),
		linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2), 0 1px 1px rgba(0, 0, 0, .06);
	cursor: grab;
}
.sf-funnel .sf-range__input::-moz-range-thumb {
	width: var(--sf-thumb);
	height: var(--sf-thumb);
	box-sizing: border-box;
	border: 1px solid #d9d9d9;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, #dadada 0, #d2d2d2 7px, rgba(210, 210, 210, 0) 8px),
		linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2), 0 1px 1px rgba(0, 0, 0, .06);
	cursor: grab;
}
.sf-funnel .sf-range__input:active::-webkit-slider-thumb { cursor: grabbing; }
.sf-funnel .sf-range__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--sf-focus), 0 2px 5px rgba(0, 0, 0, .2); }
.sf-funnel .sf-range__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px var(--sf-focus), 0 2px 5px rgba(0, 0, 0, .2); }
@media (max-width: 600px) {
	.sf-funnel .sf-range { --sf-thumb: 36px; --sf-track-h: 18px; }
	.sf-funnel .sf-range__value { font-size: 30px; padding: 12px 26px; }
}

/* ======================================================================
   v0.6 — fonts, step entrance, waving hand, KK arrow, hover shine,
   verifying loader, confetti, responsive type
   ====================================================================== */

/* Fonts (Funnel settings > Layout and motion > Font) */
.sf-funnel.sf-font-inter { --sf-font: "SF Flags", "SF Inter", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sf-funnel.sf-font-jakarta { --sf-font: "SF Flags", "SF Jakarta", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sf-funnel:is(.sf-font-inter, .sf-font-jakarta),
.sf-funnel:is(.sf-font-inter, .sf-font-jakarta) :is(h1, h2, h3, h4, h5, h6, p, li, label, legend, button, input, select, textarea, span, strong, a) { font-family: var(--sf-font); }
.sf-funnel.sf-font-inter .sf-step__inner > :is(h1, h2, h3):not(.sf-hero-title) { letter-spacing: -.022em; }
.sf-funnel :is(h1, h2, h3, h4, p, span).sf-hero-title,
.sf-funnel:is(.sf-font-inter, .sf-font-jakarta) :is(h1, h2, h3, h4, p).sf-hero-title { font-family: var(--sf-display-font, "SF Anton", "Anton", Impact, "Arial Narrow Bold", sans-serif); }

/* Step entrance. "stagger": each block fades up a moment after the previous one. */
.sf-funnel.sf-enter-stagger .sf-step.is-entering,
.sf-funnel.sf-enter-fade .sf-step.is-entering,
.sf-funnel.sf-enter-none .sf-step.is-entering { animation: none; }
.sf-funnel.sf-enter-stagger .sf-step.is-entering .sf-step__inner > * {
	animation: sf-rise .6s cubic-bezier(.16, .8, .3, 1) both;
	animation-delay: calc(140ms + var(--sf-i, 0) * 90ms);
}
.sf-funnel.sf-enter-fade .sf-step.is-entering .sf-step__inner { animation: sf-fade .55s ease-out both; animation-delay: 120ms; }
@keyframes sf-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sf-fade { from { opacity: 0; } to { opacity: 1; } }

/* Waving hand: add class "sf-wave" to the paragraph with the emoji. */
.sf-funnel .sf-step__inner > .sf-wave { align-self: center; width: fit-content; }
.sf-funnel .sf-wave { display: inline-block; transform-origin: 70% 75%; animation: sf-wave 2.6s ease-in-out infinite; animation-delay: .5s; }
@keyframes sf-wave {
	0% { transform: rotate(0deg); }
	8% { transform: rotate(16deg); }
	16% { transform: rotate(-8deg); }
	24% { transform: rotate(16deg); }
	32% { transform: rotate(-4deg); }
	40% { transform: rotate(12deg); }
	50%, 100% { transform: rotate(0deg); }
}

/* Arrow "dash": a short motion line runs through the arrow while the arrow pushes forward. */
.sf-funnel.sf-anim-dash .sf-btn:not([class*="sf-btn--anim-"]) .sf-btn__icon,
.sf-funnel .sf-btn--anim-dash .sf-btn__icon { animation: sf-dash-arrow 1.6s cubic-bezier(.45, 0, .2, 1) infinite; }
.sf-funnel.sf-anim-dash .sf-btn--icon-end:not([class*="sf-btn--anim-"]) .sf-btn__iconwrap::before,
.sf-funnel .sf-btn--anim-dash.sf-btn--icon-end .sf-btn__iconwrap::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 50%;
	width: 8px;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 3px;
	background: currentColor;
	animation: sf-dash-line 1.6s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes sf-dash-arrow {
	0%, 30% { transform: translateX(0); }
	52% { transform: translateX(5px); }
	70%, 100% { transform: translateX(0); }
}
@keyframes sf-dash-line {
	0% { transform: translateX(-4px) scaleX(.4); opacity: 0; }
	18% { opacity: 1; transform: translateX(0) scaleX(1); }
	52% { transform: translateX(22px) scaleX(1); opacity: 1; }
	68% { transform: translateX(32px) scaleX(.4); opacity: 0; }
	100% { opacity: 0; transform: translateX(32px) scaleX(.4); }
}
.sf-funnel .sf-btn.is-waiting .sf-btn__iconwrap::before { animation-play-state: paused; opacity: 0; }

/* Button hover: "shine" sweeps a soft light band across the button. */
.sf-funnel.sf-hover-shine .sf-btn:not([class*="sf-btn--hover-"]),
.sf-funnel.sf-hover-shine-loop .sf-btn:not([class*="sf-btn--hover-"]),
.sf-funnel .sf-btn--hover-shine,
.sf-funnel .sf-btn--hover-shine-loop { position: relative; overflow: hidden; isolation: isolate; }
.sf-funnel.sf-hover-shine .sf-btn:not([class*="sf-btn--hover-"])::after,
.sf-funnel.sf-hover-shine-loop .sf-btn:not([class*="sf-btn--hover-"])::after,
.sf-funnel .sf-btn--hover-shine::after,
.sf-funnel .sf-btn--hover-shine-loop::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -10%;
	left: -70%;
	width: 55%;
	height: 120%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	pointer-events: none;
}
.sf-funnel.sf-hover-shine .sf-btn:not([class*="sf-btn--hover-"]):hover::after,
.sf-funnel.sf-hover-shine-loop .sf-btn:not([class*="sf-btn--hover-"]):hover::after,
.sf-funnel .sf-btn--hover-shine:hover::after,
.sf-funnel .sf-btn--hover-shine-loop:hover::after { animation: sf-shine 1s ease-out; }
.sf-funnel.sf-hover-shine-loop .sf-btn:not([class*="sf-btn--hover-"]):not(.is-waiting)::after,
.sf-funnel .sf-btn--hover-shine-loop:not(.is-waiting)::after { animation: sf-shine 3.2s ease-in-out infinite; }
@keyframes sf-shine { 0% { left: -70%; } 60%, 100% { left: 130%; } }
.sf-funnel.sf-hover-none .sf-btn:not([class*="sf-btn--hover-"]):hover,
.sf-funnel .sf-btn--hover-none:hover { transform: none; }
.sf-funnel .sf-btn--hover-lift:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--sf-text) 60%, transparent); }

/* Verifying loader */
.sf-funnel .sf-loader-block { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 460px; margin-inline: auto; }
.sf-funnel .sf-loader-block__pct { font-size: clamp(56px, 11vw, 96px); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--sf-text); }
.sf-funnel .sf-loader-block__bar { width: 100%; height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--sf-text) 10%, var(--sf-bg)); overflow: hidden; }
.sf-funnel .sf-loader-block__bar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--sf-button-bg, var(--sf-primary)); }
.sf-funnel .sf-loader-block__list { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; text-align: left; }
.sf-funnel .sf-loader-block__list li { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; color: var(--sf-muted); transition: color .3s; }
.sf-funnel .sf-loader-block__tick { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--sf-text) 10%, var(--sf-bg)); color: transparent; transition: background .3s, color .3s, transform .3s; }
.sf-funnel .sf-loader-block__tick .sf-icon { width: 14px; height: 14px; }
.sf-funnel .sf-loader-block__list li.is-done { color: var(--sf-text); }
.sf-funnel .sf-loader-block__list li.is-done .sf-loader-block__tick { background: var(--sf-primary); color: #fff; transform: scale(1.08); }
/* A loading step that uses the loader block doesn't need the default thin bar. */
.sf-funnel .sf-step__inner:has(.sf-loader-block) > .sf-loader { display: none; }
.sf-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99999; }

/* Progress dots placed inside a step or above the steps */
.sf-funnel .sf-progress--block { display: flex; justify-content: center; width: 100%; }
.sf-funnel > .sf-progress--block { max-width: var(--sf-max); margin: clamp(24px, 4vw, 44px) auto 0; padding: 0 20px; }

/* Responsive type */
@media (max-width: 782px) {
	.sf-funnel .sf-step__inner > :is(h1, h2, h3):not(.sf-hero-title):not(.sf-intro-title) { font-size: clamp(24px, 6.4vw, 32px); }
	.sf-funnel .sf-hero-title { font-size: clamp(38px, 11vw, 60px); }
	.sf-funnel .sf-step__inner > p:not(.sf-proof):not(.sf-emoji-lg):not(.sf-eyebrow):not(.sf-fineprint) { font-size: 17px; }
	.sf-funnel .sf-shell { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 420px) {
	.sf-funnel .sf-btn { font-size: 18px; padding-inline: 20px; }
	.sf-funnel .sf-eyebrow { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.sf-funnel .sf-wave, .sf-funnel .sf-btn::after { animation: none !important; }
}

/* First screen: same entrance, driven by CSS so it starts while the page is still loading. */
.sf-funnel.sf-enter-stagger .sf-steps > .sf-step:first-child .sf-step__inner > * { animation: sf-rise .6s cubic-bezier(.16, .8, .3, 1) both; }
.sf-funnel.sf-enter-stagger .sf-steps > .sf-step:first-child .sf-step__inner > :nth-child(1) { animation-delay: 140ms; }
.sf-funnel.sf-enter-stagger .sf-steps > .sf-step:first-child .sf-step__inner > :nth-child(2) { animation-delay: 230ms; }
.sf-funnel.sf-enter-stagger .sf-steps > .sf-step:first-child .sf-step__inner > :nth-child(3) { animation-delay: 320ms; }
.sf-funnel.sf-enter-stagger .sf-steps > .sf-step:first-child .sf-step__inner > :nth-child(4) { animation-delay: 410ms; }
.sf-funnel.sf-enter-stagger .sf-steps > .sf-step:first-child .sf-step__inner > :nth-child(5) { animation-delay: 500ms; }
.sf-funnel.sf-enter-stagger .sf-steps > .sf-step:first-child .sf-step__inner > :nth-child(6) { animation-delay: 590ms; }
.sf-funnel.sf-enter-stagger .sf-steps > .sf-step:first-child .sf-step__inner > :nth-child(7) { animation-delay: 680ms; }
.sf-funnel.sf-enter-stagger .sf-steps > .sf-step:first-child .sf-step__inner > :nth-child(8) { animation-delay: 770ms; }
.sf-funnel.sf-enter-stagger .sf-steps > .sf-step:first-child .sf-step__inner > :nth-child(9) { animation-delay: 860ms; }
.sf-funnel.sf-enter-stagger .sf-steps > .sf-step:first-child .sf-step__inner > :nth-child(10) { animation-delay: 950ms; }
.sf-funnel.sf-enter-fade .sf-steps > .sf-step:first-child .sf-step__inner { animation: sf-fade .55s ease-out both; animation-delay: 120ms; }
.sf-funnel.is-editor .sf-step .sf-step__inner > *,
.sf-funnel.is-editor .sf-step .sf-step__inner { animation: none !important; }

/* ======================================================================
   v0.6.1 — measured from the King Kong screen recording (60fps)
   ====================================================================== */

/* King Kong arrow. One loop = 1.5s:
   0–18%  the arrow shortens (head pulls back towards the tail)
   18–38% short arrow drifts right
   36%    a small dash appears on the left (the next arrow)
   38–55% old arrow slides right, squeezes into a dot and fades out;
          the dash grows into a short arrow
   55–65% the new arrow stretches back to full length
   65–100% long arrow rests                                            */
.sf-funnel .sf-kk { display: none; }
.sf-funnel.sf-anim-kk .sf-btn:not([class*="sf-btn--anim-"]) .sf-btn__icon,
.sf-funnel .sf-btn--anim-kk .sf-btn__icon { display: none; }
.sf-funnel.sf-anim-kk .sf-btn:not([class*="sf-btn--anim-"]) .sf-kk,
.sf-funnel .sf-btn--anim-kk .sf-kk { display: block; }
.sf-funnel.sf-anim-kk .sf-btn:not([class*="sf-btn--anim-"]) .sf-btn__iconwrap,
.sf-funnel .sf-btn--anim-kk .sf-btn__iconwrap { width: 1.7em; height: .76em; overflow: visible; }
.sf-funnel .sf-kk { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sf-funnel .sf-kk g, .sf-funnel .sf-kk line, .sf-funnel .sf-kk polyline { transform-box: view-box; }
.sf-funnel .sf-kk__shaft { transform-origin: 2px 8px; }
.sf-funnel .sf-kk__head { transform-origin: 32px 8px; }
.sf-funnel .sf-kk__a { animation: sf-kk-a-move 1.5s linear infinite; }
.sf-funnel .sf-kk__a .sf-kk__shaft { animation: sf-kk-a-shaft 1.5s linear infinite; }
.sf-funnel .sf-kk__a .sf-kk__head { animation: sf-kk-a-head 1.5s linear infinite; }
.sf-funnel .sf-kk__b { animation: sf-kk-b-show 1.5s linear infinite; }
.sf-funnel .sf-kk__b .sf-kk__shaft { animation: sf-kk-b-shaft 1.5s linear infinite; }
.sf-funnel .sf-kk__b .sf-kk__head { animation: sf-kk-b-head 1.5s linear infinite; }
@keyframes sf-kk-a-move {
	0%, 27% { transform: translateX(0); opacity: 1; animation-timing-function: ease-in; }
	33% { transform: translateX(7px); opacity: 1; }
	36% { transform: translateX(9px); opacity: 1; }
	38% { transform: translateX(16px); opacity: 1; }
	40% { transform: translateX(26px); opacity: 1; }
	46% { transform: translateX(28px); opacity: 1; }
	53% { transform: translateX(29px); opacity: 0; }
	99.9% { transform: translateX(29px); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}
@keyframes sf-kk-a-shaft {
	0% { transform: scaleX(1); animation-timing-function: ease-in-out; }
	20%, 29% { transform: scaleX(.53); }
	36% { transform: scaleX(.5); }
	38% { transform: scaleX(.45); }
	40% { transform: scaleX(.15); }
	53%, 99.9% { transform: scaleX(.08); }
	100% { transform: scaleX(1); }
}
@keyframes sf-kk-a-head {
	0% { transform: translateX(0) scale(1); animation-timing-function: ease-in-out; }
	20%, 29% { transform: translateX(-14px) scale(1); }
	36% { transform: translateX(-15px) scale(.9); }
	38% { transform: translateX(-16.5px) scale(.8); }
	40% { transform: translateX(-25.5px) scale(.55); }
	53%, 99.9% { transform: translateX(-27.6px) scale(.3); }
	100% { transform: translateX(0) scale(1); }
}
@keyframes sf-kk-b-show {
	0%, 35.9% { opacity: 0; }
	36%, 99.9% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes sf-kk-b-shaft {
	0%, 36% { transform: scaleX(.15); }
	42% { transform: scaleX(.3); }
	44% { transform: scaleX(.4); }
	46% { transform: scaleX(.53); }
	50% { transform: scaleX(.56); }
	55% { transform: scaleX(.8); animation-timing-function: ease-out; }
	65%, 100% { transform: scaleX(1); }
}
@keyframes sf-kk-b-head {
	0%, 36% { transform: translateX(-25.5px) scale(0); opacity: 0; }
	42% { transform: translateX(-21px) scale(.5); opacity: 1; }
	44% { transform: translateX(-18px) scale(.75); opacity: 1; }
	46% { transform: translateX(-14.1px) scale(1); opacity: 1; }
	50% { transform: translateX(-13.2px) scale(1); }
	55% { transform: translateX(-6px) scale(1); animation-timing-function: ease-out; }
	65%, 100% { transform: translateX(0) scale(1); opacity: 1; }
}
.sf-funnel .sf-btn.is-waiting .sf-kk * { animation-play-state: paused; }

/* Light sweep, as recorded: a slanted band ~22% wide crosses left → right in about 0.2s,
   over the text, each time the pointer enters the button. */
.sf-funnel.sf-hover-shine .sf-btn:not([class*="sf-btn--hover-"])::after,
.sf-funnel.sf-hover-shine-loop .sf-btn:not([class*="sf-btn--hover-"])::after,
.sf-funnel .sf-btn--hover-shine::after,
.sf-funnel .sf-btn--hover-shine-loop::after {
	z-index: 2;
	top: 0;
	left: -40%;
	width: 22%;
	height: 100%;
	background: rgba(255, 255, 255, .45);
	transform: skewX(-20deg);
}
.sf-funnel.sf-hover-shine .sf-btn:not([class*="sf-btn--hover-"]):hover::after,
.sf-funnel.sf-hover-shine-loop .sf-btn:not([class*="sf-btn--hover-"]):hover::after,
.sf-funnel .sf-btn--hover-shine:hover::after,
.sf-funnel .sf-btn--hover-shine-loop:hover::after { animation: sf-shine .22s linear; }
.sf-funnel.sf-hover-shine-loop .sf-btn:not([class*="sf-btn--hover-"]):not(.is-waiting)::after,
.sf-funnel .sf-btn--hover-shine-loop:not(.is-waiting)::after { animation: sf-shine-loop 3s linear infinite; }
@keyframes sf-shine { from { left: -40%; } to { left: 120%; } }
@keyframes sf-shine-loop { 0%, 85% { left: -40%; } 92%, 100% { left: 120%; } }

/* Waving hand, as recorded: a steady rock around the wrist, no pause. */
.sf-funnel .sf-wave { transform-origin: 75% 85%; animation: sf-wave-rock 1.2s ease-in-out infinite; animation-delay: 0s; }
@keyframes sf-wave-rock { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg); } }

/* Fix (0.6.2): the entrance animation must not replace the wave. The hand fades up with the
   rest of the screen (opacity) and keeps rocking (transform) — both animations run together. */
.sf-funnel.sf-enter-stagger .sf-steps > .sf-step:first-child .sf-step__inner > .sf-wave,
.sf-funnel.sf-enter-stagger .sf-step.is-entering .sf-step__inner > .sf-wave {
	animation-name: sf-fade-in-only, sf-wave-rock;
	animation-duration: .6s, 1.2s;
	animation-timing-function: ease-out, ease-in-out;
	animation-iteration-count: 1, infinite;
	animation-fill-mode: both, none;
}
@keyframes sf-fade-in-only { from { opacity: 0; } to { opacity: 1; } }

/* ======================================================================
   v0.7 — button width, subtext measure, whole-screen intro fade
   ====================================================================== */

/* Subtext: comfortable line height and a max width you can set (Funnel settings > Sizes). */
.sf-funnel .sf-step__inner > p:not(.sf-emoji-lg) { line-height: 1.5; }
.sf-funnel .sf-step__inner > p:not(.sf-proof):not(.sf-emoji-lg):not(.sf-eyebrow):not(.sf-fineprint) { max-width: var(--sf-text-max, 64ch); }

/* Buttons: one max width for the whole funnel, or a custom width per button. */
.sf-funnel .sf-btn-wrap { max-width: var(--sf-btn-max, var(--sf-field-max)); }
.sf-funnel .sf-btn-wrap--custom { max-width: 100%; }
.sf-funnel .sf-btn.sf-btn--custom { width: var(--sf-btn-w, 420px); max-width: 100%; }

/* Intro: the whole funnel fades in as one piece (no block-by-block entrance on the first screen). */
.sf-funnel.sf-intro-fade { animation: sf-fade .8s ease-out both; animation-delay: .05s; }
.sf-funnel.sf-intro-fade .sf-steps > .sf-step:first-child .sf-step__inner > :not(.sf-wave) { animation: none; }
.sf-funnel.sf-intro-fade .sf-steps > .sf-step:first-child .sf-step__inner > .sf-wave { animation: sf-wave-rock 1.2s ease-in-out infinite; }
/* Coming back to the intro later: the screen fades as a whole too. */
.sf-funnel .sf-step.is-entering.sf-fade-in .sf-step__inner { animation: sf-fade .6s ease-out both; }
.sf-funnel .sf-step.is-entering.sf-fade-in .sf-step__inner > :not(.sf-wave) { animation: none; }
.sf-funnel .sf-step.is-entering.sf-fade-in .sf-step__inner > .sf-wave { animation: sf-wave-rock 1.2s ease-in-out infinite; }
.sf-funnel.is-editor.sf-intro-fade { animation: none; }
@media (prefers-reduced-motion: reduce) { .sf-funnel.sf-intro-fade { animation: none; } }