/* Acquisition funnel (includes/visuals/funnel.php): dark panel, trapezoids filling top to bottom */
.fn { --fn-col: 40%; }
.fn-body { position: relative; }
.fn-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fn-st { display: grid; grid-template-columns: var(--fn-col) minmax(0, 1fr); gap: 0 22px; min-width: 0; }
.fn-band { position: relative; min-height: 120px; background: rgba(255, 255, 255, .07); display: grid; place-items: center; overflow: hidden; }
.fn-st--1 .fn-band { clip-path: polygon(0 0, 100% 0, 89% 100%, 11% 100%); border-radius: 6px 6px 0 0; }
.fn-st--2 .fn-band { clip-path: polygon(11% 0, 89% 0, 78% 100%, 22% 100%); }
.fn-st--3 .fn-band { clip-path: polygon(22% 0, 78% 0, 67% 100%, 33% 100%); }
.fn-st--4 .fn-band { clip-path: polygon(33% 0, 67% 0, 64% 82%, 64% 100%, 36% 100%, 36% 82%); }
.fn-fill { position: absolute; inset: 0; }
.fn-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 43, 21, .16), rgba(255, 255, 255, .28) 38%, rgba(255, 255, 255, 0) 55%, rgba(12, 43, 21, .2)); }
.fn-st--1 .fn-fill { background: var(--mint); }
.fn-st--2 .fn-fill { background: var(--sage); }
.fn-st--3 .fn-fill { background: var(--green); }
.fn-st--4 .fn-fill { background: var(--green-2); }
.fn-num { position: relative; font-family: var(--font-serif); font-size: 30px; font-size: clamp(22px, 2.2vw, 34px); line-height: 1; color: var(--forest); }
.fn-st--4 .fn-num { margin-top: -14%; }

.fn-info { min-width: 0; padding: 4px 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.fn-st--4 .fn-info { border-bottom: 0; padding-bottom: 4px; }
.fn-name { margin: 0 0 10px; font-family: var(--font-serif); font-size: 24px; font-size: clamp(21px, 1.8vw, 27px); font-weight: 400; line-height: 1.1; color: var(--white); }
.fn-name span { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: 14px; line-height: 1.35; color: var(--sage); }
.fn-l { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.fn-src { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.fn-src li { padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(184, 225, 205, .35); font-size: 12.5px; line-height: 1.35; color: var(--white); }
.fn-kpi { margin: 0; display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--white); }
.fn-kpi .fn-l { margin-bottom: 2px; }
.fn-gauge { flex: none; width: 26px; height: 26px; margin-top: 2px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; }
.fn-needle { stroke: var(--white); transform-origin: 12px 17px; }

/* leads dropping through the funnel; some stop early (they leave the funnel) */
.fn-drops { position: absolute; top: 0; bottom: 0; left: 0; width: var(--fn-col); pointer-events: none; z-index: 1; }
.fn-drop { position: absolute; top: 0; left: 50%; width: 0; height: 100%; opacity: 0; }
.fn-drop::before { content: ""; position: absolute; top: -5px; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.fn-drop--1 { --x: -70px; } .fn-drop--2 { --x: 40px; } .fn-drop--3 { --x: -20px; } .fn-drop--4 { --x: 75px; }
.fn-drop--5 { --x: -50px; } .fn-drop--6 { --x: 15px; } .fn-drop--7 { --x: 60px; } .fn-drop--8 { --x: -80px; }

.fn-foot { display: grid; gap: 10px; margin-top: 22px; }
.fn-loop { margin: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px dashed rgba(184, 225, 205, .5); border-radius: var(--radius-sm); font-size: 14.5px; line-height: 1.4; color: var(--white); }
.fn-loop svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fn-value { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--green); color: var(--forest); font-size: 14.5px; font-weight: 600; line-height: 1.4; }

@media (max-width: 560px) {
  .fn { --fn-col: 34%; }
  .fn-st { gap: 0 14px; }
  .fn-src li { font-size: 12px; padding: 2px 8px; }
  .fn-drop--1, .fn-drop--4, .fn-drop--8 { --x: -30px; }
  .fn-drop--7 { --x: 30px; }
}

/* animation: each level fills from the top, one after the other; then leads start dropping */
.js .vz-figure .fn-fill { transform: scaleY(0); transform-origin: top; transition: transform .55s cubic-bezier(.5, 0, .6, 1); }
.js .vz-figure .fn-st--1 .fn-fill { transition-delay: .4s; }
.js .vz-figure .fn-st--2 .fn-fill { transition-delay: .95s; }
.js .vz-figure .fn-st--3 .fn-fill { transition-delay: 1.5s; }
.js .vz-figure .fn-st--4 .fn-fill { transition-delay: 2.05s; }
.js .vz-figure .fn-num { opacity: 0; transition: opacity .4s ease; }
.js .vz-figure .fn-st--1 .fn-num { transition-delay: .8s; } .js .vz-figure .fn-st--2 .fn-num { transition-delay: 1.35s; }
.js .vz-figure .fn-st--3 .fn-num { transition-delay: 1.9s; } .js .vz-figure .fn-st--4 .fn-num { transition-delay: 2.45s; }
.js .vz-figure .fn-info { opacity: 0; transform: translateX(12px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .fn-st--1 .fn-info { transition-delay: .5s; } .js .vz-figure .fn-st--2 .fn-info { transition-delay: 1.05s; }
.js .vz-figure .fn-st--3 .fn-info { transition-delay: 1.6s; } .js .vz-figure .fn-st--4 .fn-info { transition-delay: 2.15s; }
.js .vz-figure .fn-needle { transform: rotate(-80deg); transition: transform .8s cubic-bezier(.3, 1.4, .5, 1) 2.4s; }
.js .vz-figure .fn-foot { opacity: 0; transition: opacity .6s ease 2.6s; }
.js .vz-figure.is-visible .fn-fill, .js .vz-figure.is-visible .fn-info, .js .vz-figure.is-visible .fn-needle { transform: none; }
.js .vz-figure.is-visible .fn-num, .js .vz-figure.is-visible .fn-info, .js .vz-figure.is-visible .fn-foot { opacity: 1; }

.vz-figure.is-visible .fn-drop { animation: fn-fall 4.8s cubic-bezier(.4, 0, .7, 1) infinite; }
.vz-figure.is-visible .fn-drop--1, .vz-figure.is-visible .fn-drop--4, .vz-figure.is-visible .fn-drop--8 { animation-name: fn-out-1; }
.vz-figure.is-visible .fn-drop--2, .vz-figure.is-visible .fn-drop--5 { animation-name: fn-out-2; }
.vz-figure.is-visible .fn-drop--7 { animation-name: fn-out-3; }
.vz-figure.is-visible .fn-drop--1 { animation-delay: 2.8s; } .vz-figure.is-visible .fn-drop--2 { animation-delay: 3.4s; }
.vz-figure.is-visible .fn-drop--3 { animation-delay: 4s; } .vz-figure.is-visible .fn-drop--4 { animation-delay: 4.6s; }
.vz-figure.is-visible .fn-drop--5 { animation-delay: 5.2s; } .vz-figure.is-visible .fn-drop--6 { animation-delay: 5.8s; }
.vz-figure.is-visible .fn-drop--7 { animation-delay: 6.4s; } .vz-figure.is-visible .fn-drop--8 { animation-delay: 7s; }
@keyframes fn-fall {
  0% { opacity: 0; transform: translate(var(--x), 2%); }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(0, 98%); }
}
@keyframes fn-out-1 { 0% { opacity: 0; transform: translate(var(--x), 2%); } 8% { opacity: 1; } 22% { opacity: 1; } 30%, 100% { opacity: 0; transform: translate(calc(var(--x) * 1.2), 24%); } }
@keyframes fn-out-2 { 0% { opacity: 0; transform: translate(var(--x), 2%); } 8% { opacity: 1; } 42% { opacity: 1; } 52%, 100% { opacity: 0; transform: translate(calc(var(--x) * .9), 50%); } }
@keyframes fn-out-3 { 0% { opacity: 0; transform: translate(var(--x), 2%); } 8% { opacity: 1; } 64% { opacity: 1; } 74%, 100% { opacity: 0; transform: translate(calc(var(--x) * .5), 74%); } }