/* Marketing funnel (widgets/funnel/funnel.js) */
.fn { display: flex; flex-direction: column; padding: 16px 18px 10px; background: #d5dfd2; }
[data-theme=dark] .fn { background: #26302a; }
.fn__eyebrow { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #5b6a5d; }
[data-theme=dark] .fn__eyebrow { color: #a3b3a5; }
.fn svg { flex: 1; min-height: 0; width: 100%; }
.fn__tab path { fill: #6b6d6b; stroke: #6b6d6b; stroke-width: 6; stroke-linejoin: round; opacity: .85; transition: fill .25s ease, stroke .25s ease, opacity .25s ease; }
.fn__how path { fill: #6b6d6b; stroke: #6b6d6b; stroke-width: 6; stroke-linejoin: round; opacity: .85; }
.fn__how text { font: 500 11px var(--font); fill: #fff; letter-spacing: .01em; }
.fn__num { font: 600 12px var(--font); fill: rgba(255,255,255,.75); letter-spacing: .05em; }
.fn__band { transition: opacity .25s ease; }
.fn__band text { font: 600 11px var(--font); fill: rgba(255,255,255,.92); text-transform: uppercase; letter-spacing: .05em; pointer-events: none; }
.fn__band--sale text { fill: #7a4b00; font-size: 15px; }
.fn__side { font: 800 italic 20px var(--font); fill: #4f5450; text-transform: uppercase; letter-spacing: .02em; }
.fn__sub { font: italic 12px var(--font); fill: #6f7670; }
[data-theme=dark] .fn__side { fill: #e6ece6; }
[data-theme=dark] .fn__sub { fill: #a3b3a5; }
.fn svg.is-lit .fn__band { opacity: .62; }
.fn svg.is-lit .fn__band.is-on { opacity: 1; }
.fn__tab.is-on path { fill: var(--mark); stroke: var(--mark); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fn__band, .fn__tab path { transition: none; } }
/* On Great Dane's dark red page the funnel sits on dark grey. */
[data-theme=dark] .p-great-dane .fn { background: #2a2b30; }
[data-theme=dark] .p-great-dane .fn__eyebrow, [data-theme=dark] .p-great-dane .fn__sub { color: #b9babf; fill: #b9babf; }