.cf-funnel-shell {
  --cf-page-bg: #f6f3f8;
  --cf-card-bg: #fff;
  --cf-card-border: #ece7f1;
  --cf-title: #101828;
  --cf-text: #667085;
  --cf-progress-bg: #ebe6f0;
  --cf-progress-fill: #7c3aed;
  --cf-button-bg: #fff;
  --cf-button-text: #101828;
  --cf-button-border: #d8cfe3;
  --cf-button-hover-bg: #f8f5fc;
  --cf-button-hover-text: #101828;
  --cf-button-hover-border: #7c3aed;
  --cf-button-active-bg: #7c3aed;
  --cf-button-active-text: #fff;
  --cf-button-active-border: #7c3aed;
  --cf-input-bg: #fff;
  --cf-input-text: #101828;
  --cf-input-border: #d0d5dd;
  --cf-success-bg: #f8f5fc;
  --cf-success-text: #101828;
  background: var(--cf-page-bg);
  padding: 56px 16px;
}

.cf-funnel-stage {
  max-width: 980px;
  margin: 0 auto;
  min-height: 66vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cf-funnel-card {
  width: min(100%, 760px);
  background: var(--cf-card-bg);
  border: 1px solid var(--cf-card-border);
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(16, 24, 40, .08);
}

.cf-funnel-mini-progress { height: 7px; background: var(--cf-progress-bg); }
.cf-funnel-progress-bar { display:block; height:100%; width:0; background:var(--cf-progress-fill); transition: width .25s ease; }

.cf-funnel-step,
.cf-funnel-success { padding: 64px 56px; }
.cf-funnel-success { background: var(--cf-success-bg); color: var(--cf-success-text); }
.cf-funnel-back { appearance:none; border:0; background:none; color:var(--cf-text); font-size:14px; cursor:pointer; margin-bottom:26px; }
.cf-funnel-step h2,
.cf-funnel-success h2 { margin:0 0 16px; color:var(--cf-title); font-size:clamp(44px, 5vw, 64px); line-height:1.02; letter-spacing:-0.04em; }
.cf-funnel-description { margin:0 0 34px; color:var(--cf-text); font-size:18px; line-height:1.6; max-width: 54ch; }

.cf-funnel-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.cf-funnel-option,
.cf-funnel-submit {
  appearance:none; border-radius:22px; border:1px solid var(--cf-button-border); background:var(--cf-button-bg); color:var(--cf-button-text);
  padding:28px 24px; min-height:110px; font-size:20px; line-height:1.35; font-weight:600; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.cf-funnel-option:hover,
.cf-funnel-option:focus-visible,
.cf-funnel-submit:hover,
.cf-funnel-submit:focus-visible {
  transform:translateY(-2px); background:var(--cf-button-hover-bg); color:var(--cf-button-hover-text); border-color:var(--cf-button-hover-border); box-shadow:0 18px 30px rgba(16,24,40,.08);
}
.cf-funnel-option.is-selected,
.cf-funnel-submit { background:var(--cf-button-active-bg); color:var(--cf-button-active-text); border-color:var(--cf-button-active-border); }
.cf-funnel-option.is-wide { grid-column:1 / -1; }
.cf-funnel-submit { min-height:auto; padding:18px 22px; }

.cf-funnel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }

.cf-funnel-grid--text { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cf-funnel-input-wrap { position:relative; }
.cf-funnel-input-wrap.has-suffix input { padding-right:58px; }
.cf-funnel-input-suffix { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--cf-title); font-weight:600; pointer-events:none; }

.cf-funnel-grid label, .cf-funnel-checkbox { display:block; }
.cf-funnel-grid span, .cf-funnel-checkbox span { display:block; font-size:14px; font-weight:700; margin-bottom:9px; color:var(--cf-title); }
.cf-funnel-grid input {
  width:100%; border:1px solid var(--cf-input-border); background:var(--cf-input-bg); color:var(--cf-input-text); border-radius:16px; padding:16px 18px; font-size:16px;
}
.cf-funnel-grid input:focus { outline:none; border-color:var(--cf-button-hover-border); box-shadow:0 0 0 4px rgba(124,58,237,.12); }
.cf-funnel-checkbox { display:flex; gap:12px; align-items:flex-start; margin-top:18px; }
.cf-funnel-checkbox input { margin-top:5px; }
.cf-funnel-actions { margin-top:24px; }
.cf-funnel-feedback { margin-top:12px; color:var(--cf-text); }

@media (max-width: 820px) {
  .cf-funnel-shell { padding: 28px 14px; }
  .cf-funnel-card { border-radius: 24px; }
  .cf-funnel-step, .cf-funnel-success { padding: 34px 22px; }
  .cf-funnel-options, .cf-funnel-grid { grid-template-columns:1fr; }
  .cf-funnel-option, .cf-funnel-submit { min-height:90px; font-size:18px; border-radius:18px; }
}


/* Stronger frontend state rules to resist theme overrides */
.cf-funnel-shell .cf-funnel-option,
.cf-funnel-shell .cf-funnel-submit {
  background-image:none !important;
}
.cf-funnel-shell .cf-funnel-option:hover,
.cf-funnel-shell .cf-funnel-option:focus,
.cf-funnel-shell .cf-funnel-option:focus-visible,
.cf-funnel-shell .cf-funnel-submit:hover,
.cf-funnel-shell .cf-funnel-submit:focus,
.cf-funnel-shell .cf-funnel-submit:focus-visible {
  background:var(--cf-button-hover-bg) !important;
  color:var(--cf-button-hover-text) !important;
  border-color:var(--cf-button-hover-border) !important;
  box-shadow:0 18px 30px rgba(16,24,40,.08) !important;
}
.cf-funnel-shell .cf-funnel-option.is-selected,
.cf-funnel-shell .cf-funnel-submit {
  background:var(--cf-button-active-bg) !important;
  color:var(--cf-button-active-text) !important;
  border-color:var(--cf-button-active-border) !important;
}
.cf-funnel-shell .cf-funnel-grid input:focus,
.cf-funnel-shell .cf-funnel-grid input:focus-visible {
  border-color:var(--cf-button-hover-border) !important;
  box-shadow:0 0 0 4px rgba(124,58,237,.12) !important;
}


/* Harden all frontend colors against theme/page overrides */
.cf-funnel-shell,
.cf-funnel-shell .cf-funnel-card,
.cf-funnel-shell .cf-funnel-mini-progress,
.cf-funnel-shell .cf-funnel-progress-bar,
.cf-funnel-shell .cf-funnel-step,
.cf-funnel-shell .cf-funnel-success,
.cf-funnel-shell .cf-funnel-back,
.cf-funnel-shell .cf-funnel-step h2,
.cf-funnel-shell .cf-funnel-success h2,
.cf-funnel-shell .cf-funnel-description,
.cf-funnel-shell .cf-funnel-input-suffix,
.cf-funnel-shell .cf-funnel-grid span,
.cf-funnel-shell .cf-funnel-checkbox span,
.cf-funnel-shell .cf-funnel-feedback {
  color: inherit;
}
.cf-funnel-shell {
  background: var(--cf-page-bg) !important;
}
.cf-funnel-shell .cf-funnel-card {
  background: var(--cf-card-bg) !important;
  border-color: var(--cf-card-border) !important;
}
.cf-funnel-shell .cf-funnel-mini-progress {
  background: var(--cf-progress-bg) !important;
}
.cf-funnel-shell .cf-funnel-progress-bar {
  background: var(--cf-progress-fill) !important;
}
.cf-funnel-shell .cf-funnel-success {
  background: var(--cf-success-bg) !important;
  color: var(--cf-success-text) !important;
}
.cf-funnel-shell .cf-funnel-back,
.cf-funnel-shell .cf-funnel-description,
.cf-funnel-shell .cf-funnel-feedback {
  color: var(--cf-text) !important;
}
.cf-funnel-shell .cf-funnel-step h2,
.cf-funnel-shell .cf-funnel-success h2,
.cf-funnel-shell .cf-funnel-grid span,
.cf-funnel-shell .cf-funnel-checkbox span,
.cf-funnel-shell .cf-funnel-input-suffix {
  color: var(--cf-title) !important;
}
.cf-funnel-shell .cf-funnel-option,
.cf-funnel-shell .cf-funnel-submit {
  background: var(--cf-button-bg) !important;
  color: var(--cf-button-text) !important;
  border-color: var(--cf-button-border) !important;
}
.cf-funnel-shell .cf-funnel-grid input {
  background: var(--cf-input-bg) !important;
  color: var(--cf-input-text) !important;
  border-color: var(--cf-input-border) !important;
  -webkit-text-fill-color: var(--cf-input-text) !important;
}
.cf-funnel-shell .cf-funnel-grid input::placeholder {
  color: color-mix(in srgb, var(--cf-input-text) 55%, white) !important;
  opacity: 1 !important;
}
.cf-funnel-shell .cf-funnel-checkbox input {
  accent-color: var(--cf-button-active-bg) !important;
}


/* Extra hardening against theme/page-builder overrides */
.cf-funnel-shell,
.cf-funnel-shell *,
.cf-funnel-shell *::before,
.cf-funnel-shell *::after {
  box-sizing: border-box;
}
.cf-funnel-shell .cf-funnel-card,
.cf-funnel-shell .cf-funnel-step,
.cf-funnel-shell .cf-funnel-success {
  background-color: var(--cf-card-bg) !important;
}
.cf-funnel-shell .cf-funnel-success {
  background-color: var(--cf-success-bg) !important;
}
.cf-funnel-shell .cf-funnel-option,
.cf-funnel-shell button.cf-funnel-option,
.cf-funnel-shell .cf-funnel-submit,
.cf-funnel-shell button.cf-funnel-submit {
  background-color: var(--cf-button-bg) !important;
  color: var(--cf-button-text) !important;
  border-color: var(--cf-button-border) !important;
}
.cf-funnel-shell .cf-funnel-option:hover,
.cf-funnel-shell .cf-funnel-option:focus,
.cf-funnel-shell .cf-funnel-option:focus-visible,
.cf-funnel-shell button.cf-funnel-option:hover,
.cf-funnel-shell button.cf-funnel-option:focus,
.cf-funnel-shell button.cf-funnel-option:focus-visible,
.cf-funnel-shell .cf-funnel-submit:hover,
.cf-funnel-shell .cf-funnel-submit:focus,
.cf-funnel-shell .cf-funnel-submit:focus-visible,
.cf-funnel-shell button.cf-funnel-submit:hover,
.cf-funnel-shell button.cf-funnel-submit:focus,
.cf-funnel-shell button.cf-funnel-submit:focus-visible {
  background-color: var(--cf-button-hover-bg) !important;
  color: var(--cf-button-hover-text) !important;
  border-color: var(--cf-button-hover-border) !important;
}
.cf-funnel-shell .cf-funnel-option.is-selected,
.cf-funnel-shell button.cf-funnel-option.is-selected,
.cf-funnel-shell .cf-funnel-submit,
.cf-funnel-shell button.cf-funnel-submit {
  background-color: var(--cf-button-active-bg) !important;
  color: var(--cf-button-active-text) !important;
  border-color: var(--cf-button-active-border) !important;
}
.cf-funnel-shell .cf-funnel-grid input,
.cf-funnel-shell .cf-funnel-grid textarea,
.cf-funnel-shell .cf-funnel-grid select {
  background-color: var(--cf-input-bg) !important;
  color: var(--cf-input-text) !important;
  border-color: var(--cf-input-border) !important;
  -webkit-text-fill-color: var(--cf-input-text) !important;
}
.cf-funnel-shell .cf-funnel-grid input::placeholder,
.cf-funnel-shell .cf-funnel-grid textarea::placeholder {
  color: color-mix(in srgb, var(--cf-input-text) 55%, white) !important;
  opacity: 1 !important;
}