.kpi-bf { width: 100%; max-width: 44rem; margin: 0 auto; padding: 1rem; box-sizing: border-box; font-family: 'Manrope', sans-serif; }
@media (min-width: 640px) { .kpi-bf { padding: 1.5rem; } }
.kpi-bf *, .kpi-bf *::before, .kpi-bf *::after { box-sizing: border-box; }
.kpi-bf-panel { background: #fff; border: 1px solid #e5e5e5; border-radius: 1.5rem; padding: 1.75rem; box-shadow: 0 4px 24px rgba(0,0,0,.06); margin: 0; }
@media (min-width: 640px) { .kpi-bf-panel { padding: 2.5rem 3rem; } }
.kpi-bf fieldset { border: none; padding: 0; margin: 0; min-inline-size: auto; }
.kpi-bf-step { min-height: 280px; }
.kpi-bf-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.kpi-bf-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #ad539b; }
.kpi-bf-stepcount { font-size: .75rem; color: #9ca3af; }
.kpi-bf-progress { height: 6px; width: 100%; background: #f3f3f3; border-radius: 9999px; overflow: hidden; margin-bottom: 1.75rem; }
.kpi-bf-progress-bar { height: 100%; border-radius: 9999px; transition: width .5s ease; background: #ad539b; }
.kpi-bf-h2 { font-size: 1.5rem; font-weight: 600; color: #171717; margin: 0 0 .75rem; }
.kpi-bf-h3 { font-size: 1.25rem; font-weight: 600; color: #171717; margin: 0 0 .25rem; }
.kpi-bf-sub { font-size: .875rem; color: #6b7280; margin: 0 0 1.5rem; }
.kpi-bf-lead { color: #4b5563; line-height: 1.6; margin: 0 0 1.25rem; }
.kpi-bf-stack { display: flex; flex-direction: column; gap: .875rem; }
.kpi-bf-stack-md { display: flex; flex-direction: column; gap: 1.125rem; } .kpi-bf-card { position: relative; width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.125rem 1.25rem; border: 1px solid #d1d5db; border-radius: 1rem; text-align: left; cursor: pointer; transition: all .2s; background: #fff; }
.kpi-bf-card:hover { box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.kpi-bf-card input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kpi-bf-card-slim { padding: .875rem 1.125rem; }
.kpi-bf-card-ico { width: 2.75rem; height: 2.75rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; background: #f4f4f4; color: #9ca3af; }
.kpi-bf-card-txt { flex: 1; display: flex; flex-direction: column; }
.kpi-bf-card-title { font-size: .9375rem; font-weight: 600; color: #171717; }
.kpi-bf-card-sub { font-size: .8125rem; color: #6b7280; margin-top: .125rem; line-height: 1.45; }
.kpi-bf-price { font-size: 1rem; font-weight: 700; color: #171717; flex-shrink: 0; padding-right: .25rem; }
.kpi-bf-radio { width: 1.25rem; height: 1.25rem; border-radius: 9999px; border: 1px solid #d4d4d4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; transition: all .2s; } .kpi-bf-card:has(input:checked) { border-color: #ad539b; background-color: rgba(173,83,155,.04); box-shadow: 0 0 0 3px rgba(173,83,155,.10); }
.kpi-bf-card:has(input:checked) .kpi-bf-card-ico { background: #ad539b; color: #fff; }
.kpi-bf-card:has(input:checked) .kpi-bf-radio { border-color: #ad539b; background: #ad539b; box-shadow: inset 0 0 0 4px #ad539b; }
.kpi-bf-card:has(input:checked) .kpi-bf-radio::after { content: ""; width: .45rem; height: .45rem; border-radius: 9999px; background: #fff; }
.kpi-bf-card:focus-within { outline: 2px solid rgba(173,83,155,.4); outline-offset: 2px; } .kpi-bf-label { display: block; font-size: .875rem; font-weight: 500; color: #262626; margin-bottom: .5rem; }
.kpi-bf-optional { font-weight: 400; color: #9ca3af; }
.kpi-bf-inp { width: 100%; padding: .8125rem 1rem; font-size: 15px; border-radius: .75rem; border: 1px solid #d1d5db; background: #fff; transition: all .2s; outline: none; font-family: inherit; color: #171717; }
.kpi-bf-inp:focus { border-color: #ad539b; box-shadow: 0 0 0 3px rgba(173,83,155,.1); }
.kpi-bf-textarea { resize: vertical; min-height: 6rem; }
select.kpi-bf-inp { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; }
.kpi-bf-grid2 { display: grid; grid-template-columns: 1fr; gap: 1.125rem; }
@media (min-width: 560px) { .kpi-bf-grid2 { grid-template-columns: 1fr 1fr; gap: .75rem; } } .kpi-bf-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; max-width: 18rem; }
.kpi-bf-chip { position: relative; display: block; cursor: pointer; }
.kpi-bf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kpi-bf-chip span { display: block; text-align: center; padding: .75rem 0; border-radius: .75rem; border: 1px solid #d1d5db; font-size: .875rem; font-weight: 500; color: #525252; transition: all .2s; background: #fff; }
.kpi-bf-chip:has(input:checked) span { border-color: #ad539b; background: #ad539b; color: #fff; }
.kpi-bf-chip:focus-within span { outline: 2px solid rgba(173,83,155,.4); outline-offset: 2px; } .kpi-bf-consent { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.kpi-bf-consent input[type="checkbox"] { margin-top: 3px; width: 1.15rem; height: 1.15rem; flex-shrink: 0; accent-color: #ad539b; }
.kpi-bf-consent span { font-size: .8125rem; color: #4b5563; line-height: 1.55; }
.kpi-bf-privacy { font-size: .8125rem; color: #6b7280; line-height: 1.55; margin: 0; }
.kpi-bf-privacy a { color: #ad539b; font-weight: 600; text-decoration: underline; }
.kpi-bf-note-inline { font-size: .8125rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: .75rem; padding: .75rem 1rem; line-height: 1.5; margin: .75rem 0 0; }
.kpi-bf-err { font-size: .75rem; color: #ef4444; margin: .375rem 0 0; min-height: 0; }
.kpi-bf-err:empty { display: none; } .kpi-bf-pricing-details { margin-top: 1.5rem; }
.kpi-bf-pricing-details summary { font-size: .8125rem; font-weight: 600; color: #ad539b; cursor: pointer; }
.kpi-bf-tables { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
@media (min-width: 560px) { .kpi-bf-tables { grid-template-columns: 1fr 1fr; } }
.kpi-bf-table { width: 100%; border-collapse: collapse; font-size: .8125rem; background: #fafafa; border-radius: .75rem; overflow: hidden; }
.kpi-bf-table caption { caption-side: top; text-align: left; font-weight: 600; font-size: .8125rem; color: #171717; padding: 0 0 .5rem; }
.kpi-bf-table th, .kpi-bf-table td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid #eee; color: #4b5563; }
.kpi-bf-table th { font-weight: 600; color: #171717; background: #f4f4f4; }
.kpi-bf-table td:last-child, .kpi-bf-table th:last-child { text-align: right; white-space: nowrap; font-weight: 600; color: #171717; }
.kpi-bf-table tr:last-child td { border-bottom: none; } .kpi-bf-nav { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; }
.kpi-bf-back { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-radius: .75rem; font-size: .875rem; font-weight: 500; color: #4b5563; background: transparent; border: none; cursor: pointer; transition: background .2s; font-family: inherit; }
.kpi-bf-back:hover { background: #fafafa; }
.kpi-bf-cta { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .875rem 1.25rem; border-radius: .75rem; font-size: .875rem; font-weight: 600; color: #fff; border: none; cursor: pointer; transition: opacity .2s; font-family: inherit; background: #ad539b; }
.kpi-bf-cta:hover { opacity: .9; }
.kpi-bf-cta:disabled { opacity: .7; cursor: default; } .kpi-bf-success { text-align: center; padding: 1rem 0; }
.kpi-bf-success-ico { width: 4rem; height: 4rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; background: rgba(173,83,155,.08); color: #ad539b; } .kpi-bf-trust { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; }
.kpi-bf-trust p { text-align: center; font-size: .75rem; color: #9ca3af; margin: 0; } .no-js .kpi-bf-step[hidden] { display: block !important; } .kpi-bf [hidden] { display: none !important; }
.no-js .kpi-bf-step[hidden] { display: block !important; }
.no-js .kpi-bf [data-bf-submit][hidden] { display: flex !important; }