/* Sales funnel - same look as the BARF planner (fd-planner) */
.fd-funnel { max-width: 776px; margin: 0 auto 3rem; padding: 0 8px; } /* 8px gutter like the theme (px-2) */
.fd-funnel__hero { margin-bottom: 1.5rem; }

.fd-funnel__progress { display: flex; justify-content: center; gap: .75rem; margin: 1rem 0 2rem; }
.fd-funnel__paw { width: 34px; height: 34px; padding: 0; border: 0; background: none; }
.fd-funnel__paw span {
    display: block; width: 100%; height: 100%;
    background: #e9e1d4;
    -webkit-mask: url("../../img/paw.svg") center / contain no-repeat;
    mask: url("../../img/paw.svg") center / contain no-repeat;
}
.fd-funnel__paw.is-done span { background: #79aaaf; }
.fd-funnel__paw.is-current span { background: #4f3429; }
.fd-funnel__paw:not([disabled]) { cursor: pointer; }

.fd-funnel__heading { text-align: center; color: #4f3429; font-family: Rounded-Bold, Arial, Helvetica, sans-serif; font-size: 1.6rem; margin-bottom: 1.25rem; }
.fd-funnel__hint { text-align: center; color: #cfbea6; margin-top: -.75rem; }

.fd-funnel__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.fd-funnel__tiles--two { grid-template-columns: repeat(2, 1fr); }
.fd-funnel__tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    min-height: 150px; padding: 1rem; border-radius: 20px;
    font-family: Rounded-Bold, Arial, Helvetica, sans-serif; font-size: 1rem; white-space: normal;
}
.fd-funnel__icon { width: 64px; height: 64px; object-fit: contain; }
.fd-funnel__tile.btn-primary .fd-funnel__icon,
.fd-funnel__tile:hover .fd-funnel__icon,
.fd-funnel__tile:focus-visible .fd-funnel__icon { filter: brightness(0) invert(1); }

[v-cloak] { display: none; }

.fd-funnel__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }
.fd-funnel__redirecting { text-align: center; color: #79aaaf; margin-top: 2rem; }

@media (max-width: 575px) {
    .fd-funnel__tiles { grid-template-columns: repeat(2, 1fr); }
    .fd-funnel__tile { min-height: 120px; }
    .fd-funnel__heading { font-size: 1.3rem; }
}

/* Info texts below the tiles (CMS snippets fd_sf_info_*) */
.fd-funnel__title { text-align: center; color: #79aaaf; font-family: Rounded-Bold, Arial, Helvetica, sans-serif; font-size: 1rem; margin: 2rem 0 .5rem; }

.fd-funnel-info { max-width: 776px; margin: -1.5rem auto 3rem; padding: 0 8px; }
.fd-funnel-info__step[hidden] { display: none; }
.fd-funnel-info__block { padding: 1.25rem 0; border-top: 1px solid #e9e1d4; }
.fd-funnel-info__block--intro { border-top: 0; }
.fd-funnel-info__question { color: #4f3429; font-family: Rounded-Bold, Arial, Helvetica, sans-serif; font-size: 1.15rem; margin: 0 0 .5rem; }
.fd-funnel-info__block--intro .fd-funnel-info__question { font-size: 1.3rem; }
.fd-funnel-info__answer p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
    /* the mobile search field hangs over the top of the content */
    .fd-funnel__title { margin-top: 3rem; }
}

@media (max-width: 575px) {
    .fd-funnel-info { margin-top: -1rem; }
    .fd-funnel-info__question { font-size: 1.05rem; }
    .fd-funnel-info__block--intro .fd-funnel-info__question { font-size: 1.15rem; }
}
