.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
} :where(.flowform-container) *,
:where(.flowform-container) *::before,
:where(.flowform-container) *::after { box-sizing: border-box; }
:where(.flowform-container p,
.flowform-container h1, .flowform-container h2, .flowform-container h3,
.flowform-container h4, .flowform-container h5, .flowform-container h6) {
margin: 0; padding: 0; font-size: inherit; font-weight: inherit;
line-height: inherit; color: inherit; border: none; background: transparent;
}
:where(.flowform-container ul, .flowform-container ol) { margin: 0; padding: 0; list-style: none; }
:where(.flowform-container a) { color: inherit; text-decoration: none; background: transparent; }
:where(.flowform-container button) {
margin: 0; padding: 0; border: none; background: transparent;
font-family: inherit; font-size: inherit; line-height: normal;
color: inherit; cursor: pointer; text-transform: none; letter-spacing: normal;
text-shadow: none; box-shadow: none; -webkit-appearance: none; appearance: none;
}
:where(.flowform-container input,
.flowform-container textarea,
.flowform-container select) {
margin: 0; padding: 0; border: none; background: transparent;
font-family: inherit; font-size: inherit; line-height: normal; color: inherit;
outline: none; box-shadow: none; text-shadow: none; letter-spacing: normal;
-webkit-appearance: none; appearance: none;
}
:where(.flowform-container img, .flowform-container svg) { display: block; max-width: 100%; border: none; } .flowform-container button:focus-visible,
.flowform-container input:focus-visible,
.flowform-container textarea:focus-visible,
.flowform-container select:focus-visible,
.flowform-container a:focus-visible { outline: auto; } .flowform-container {
position:       relative;
overflow:       hidden;
width:          100%;
box-sizing:     border-box;
display:        flex;
align-items:    center;
container-type: inline-size;
}
.flowform-container.ff-fullpage {
position:      fixed;
inset:         0;
min-height:    unset;
border-radius: 0;
z-index:       9999999999999;
}
body:has(#wpadminbar) .flowform-container.ff-fullpage {
top: 32px;
z-index: 9999;
}
@media screen and (max-width: 782px) {
body:has(#wpadminbar) .flowform-container.ff-fullpage {
top: 46px;
}
} .flowform-container .ff-bg-layer {
position:       absolute;
inset:          0;
z-index:        0;
pointer-events: none;
overflow:       hidden;
} .flowform-container .ff-bg-layer-inner {
position:            absolute;
inset:               0;
background-size:     cover;
background-position: center;
} .flowform-container .ff-bg-layer--split {
display: flex;
} .flowform-container .ff-bg-global-wallpaper {
position:            absolute;
inset:               0;
background-size:     cover;
background-position: center;
} .flowform-container .ff-bg-split-panel {
width:               50%;
flex-shrink:         0;
background-size:     cover;
background-position: center;
position:            relative;
z-index:             1;
}
.flowform-container .ff-bg-split-panel--right {
order:       1;
margin-left: auto;
} .flowform-container .ff-content-wrapper {
position:       absolute;
inset:          0;
z-index:        10;
overflow:       hidden;
display:        flex;
flex-direction: column;
} .flowform-container .ff-content-wrapper--split-left  { left:  50%; } .flowform-container .ff-content-wrapper--split-right { right: 50%; } .flowform-container .ff-progress-fixed {
position:        absolute;
top:             0;
left:            0;
right:           0;
z-index:         100;
padding:         10px 16px 6px;
display:         flex;
flex-direction:  column;
gap:             4px;
pointer-events:  none;
}
.flowform-container .ff-progress-track {
width:         100%;
height:        3px;
background:    rgba(0, 0, 0, 0.08);
border-radius: 100px;
overflow:      hidden;
}
.flowform-container .ff-progress-bar {
height:        100%;
background:    var(--btn-color, #111827);
border-radius: 100px;
transition:    width 0.35s ease;
opacity:       0.7;
}
.flowform-container .ff-progress-label {
font-size:   var(--fs-hint, 0.75rem);
color:       var(--hint-color, #9ca3af);
text-align:  right;
line-height: 1;
} .flowform-container .ff-nav-bar {
position:        absolute;
bottom:          0;
right:           0;
height:          64px;
z-index:         50;
display:         flex;
align-items:     center;
justify-content: end;
gap:             4px;
padding:         0 24px; background:      transparent;
box-sizing:      border-box;
} .flowform-container .ff-btn-nav {
display:         inline-flex;
align-items:     center;
justify-content: center;
width:           32px;
height:          32px;
padding:         4px;
background:      var(--btn-color, #111827);
color:           var(--btn-text-color, #ffffff);
border:          none;
border-radius:   var(--corner-radius, 8px);
font-size:       var(--fs-hint, 0.875rem);
font-family:     inherit;
font-weight:     500;
cursor:          pointer;
transition:      border-color 0.15s, color 0.15s, background-color 0.15s, opacity 0.15s, scale 0.15s;
}
.flowform-container .ff-btn-nav:hover:not(:disabled) {
background-color: var(--btn-hover-color, #374151);
scale: 1.05;
}
.flowform-container .ff-btn-nav:active:not(:disabled) {
scale: 0.97;
} .flowform-container .ff-btn-nav:disabled,
.flowform-container .ff-btn-nav.ff-btn-nav--disabled {
opacity: 0.35;
cursor:  not-allowed; }
.flowform-container .ff-btn-nav:focus {
outline: none;
border: none
}
.flowform-container .ff-btn-nav:focus-visible {
outline: var(--btn-color, #111827) solid 2px;
outline-offset: 2px;
z-index: 500;
} .flowform-container .ff-screen {
position:       relative;
width:          100%;
height:         100%; flex-direction: column;
overflow-y:     auto;
overflow-x:     hidden;
}
.flowform-container .ff-screen-inner {
position:        relative;
z-index:         1;
display:         flex;
flex-direction:  column;
align-items:     center;
justify-content: center;
min-height:      100%;
max-width:       48rem;
width:           100%;
margin:          0 auto;
padding:         72px 80px;
gap:             24px;
box-sizing:      border-box;
}
.flowform-container .ff-screen-inner.ff-align-left   { align-items: flex-start; }
.flowform-container .ff-screen-inner.ff-align-center { align-items: center; text-align: center; } @keyframes ff-enter-up {
from {
opacity:   0;
transform: translateY(22px);
}
to {
opacity:   1;
transform: translateY(0);
}
}
@keyframes ff-enter-down {
from {
opacity:   0;
transform: translateY(-22px);
}
to {
opacity:   1;
transform: translateY(0);
}
}
.flowform-container .ff-entry--up {
animation: ff-enter-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.flowform-container .ff-entry--down {
animation: ff-enter-down 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
} @keyframes ff-exit-up {
from {
opacity:   1;
transform: translateY(0);
}
to {
opacity:   0;
transform: translateY(-22px);
}
}
@keyframes ff-exit-down {
from {
opacity:   1;
transform: translateY(0);
}
to {
opacity:   0;
transform: translateY(22px);
}
}
.flowform-container .ff-exit--up {
animation: ff-exit-up 0.26s cubic-bezier(0.4, 0, 1, 1) both;
}
.flowform-container .ff-exit--down {
animation: ff-exit-down 0.26s cubic-bezier(0.4, 0, 1, 1) both;
} .flowform-container .ff-title {
font-family:    inherit;
font-size:      var(--fs-title, 2.25rem);
font-weight:    700;
color:          var(--title-color, #111827);
margin:         0;
line-height:    1.25;
letter-spacing: -0.02em;
}
.flowform-container .ff-desc {
font-size:   var(--fs-body, 1rem);
color:       var(--desc-color, #6b7280);
margin:      0;
line-height: 1.625;
}
.flowform-container .ff-hint {
font-size: var(--fs-hint, 0.875rem);
color:     var(--hint-color, #9ca3af);
} .flowform-container .ff-question {
width:          100%;
display:        flex;
flex-direction: column;
gap:            20px;
}
.flowform-container .ff-question-header {
display:        flex;
flex-direction: column;
gap:            8px;
}
.flowform-container .ff-question-title {
font-family: inherit;
font-size:   var(--fs-subtitle, 1.5rem);
font-weight: 600;
color:       var(--title-color, #111827);
margin:      0;
line-height: 1.375;
}
.flowform-container .ff-question-desc {
font-size:   var(--fs-body, 1rem);
color:       var(--desc-color, #6b7280);
margin:      0;
line-height: 1.625;
}
.flowform-container .ff-question-input { width: 100%; }
.flowform-container .ff-question-error {
font-size:   var(--fs-hint, 0.875rem);
color:       #ef4444;
margin:      0;
font-weight: 500;
} .flowform-container .ff-input {
width:          100%;
background:     transparent;
border:         none;
border-bottom:  1.5px solid var(--answer-color, #111827);
border-radius:  0;
padding:        10px 0;
font-size:      var(--fs-body, 1rem);
color:          var(--answer-color, #111827);
outline:        none;
font-family:    inherit;
box-sizing:     border-box;
transition:     border-color 0.15s;
}
.flowform-container .ff-input::placeholder { color: var(--answer-color, #111827); opacity: 0.4; }
.flowform-container .ff-input:focus,
.flowform-container .ff-input:focus-visible { 
border-bottom-color: var(--btn-color, #111827);
outline: none; 
background: transparent;
color: var(--answer-color, #111827);
}
.flowform-container .ff-textarea-input { resize: vertical; }
.flowform-container .ff-textarea-hint {
margin-top:  0.5rem;
font-size:   var(--fs-hint, 0.875rem);
color:       var(--hint-color, #9ca3af);
line-height: 1.4;
}
@media (hover: none) and (pointer: coarse) {
.flowform-container .ff-hint,
.flowform-container .ff-textarea-hint { display: none; }
}
.flowform-container .ff-number-wrap {
display:        flex;
align-items:    center;
gap:            8px;
border-bottom:  1.5px solid var(--answer-color, #111827);
padding-bottom: 10px;
}
.flowform-container .ff-number-wrap .ff-number-input { border: none; padding: 0; flex: 1; }
.flowform-container .ff-number-prefix,
.flowform-container .ff-number-suffix { font-size: var(--fs-body, 1rem); color: var(--answer-color, #111827); } .flowform-container .ff-choices {
display:   flex;
gap:       10px;
width:     max-content;
}
.flowform-container .ff-choices.ff-choices--horizontal {
width: 100%;
} .flowform-container .ff-choices--vertical {
flex-direction: column;
margin: 0 auto;
}
.flowform-container .ff-choices--vertical.ff-choices--left {
margin: 0;
} .flowform-container .ff-choices--horizontal {
flex-wrap:       wrap;
justify-content: center;
}
.flowform-container .ff-choices--horizontal.ff-choices--left {
justify-content: flex-start;
} .flowform-container .ff-choices--grid_2 {
display:               grid;
grid-template-columns: 1fr 1fr;
margin: 0 auto;
}
.flowform-container .ff-choices--grid_2.ff-choices--left {
margin: 0;
}
.flowform-container .ff-choices--vertical .ff-choice-item {
width: 100%;
}
.flowform-container .ff-choice-item {
display:       flex;
align-items:   center;
gap:           10px;
padding:       10px 16px 10px 12px;
border:        1.5px solid var(--answer-color, #111827);
border-radius: var(--corner-radius, 8px);
cursor:        pointer;
font-size:     var(--fs-body, 1rem);
color:         var(--answer-color, #111827);
font-family:   inherit;
background:    transparent;
transition:    background-color 0.12s, border-color 0.12s;
user-select:   none;
box-sizing: border-box;
}
.flowform-container .ff-choice-item:hover {
background-color: color-mix(in srgb, var(--answer-color, #111827) 8%, transparent);
}
.flowform-container .ff-choice-item.is-selected {
background-color: color-mix(in srgb, var(--answer-color, #111827) 12%, transparent);
border-color:     var(--btn-color, #111827);
}
.flowform-container .ff-choice-item:focus,
.flowform-container .ff-choice-item:focus-visible {
outline: none;
border: 1.5px solid var(--answer-color, #111827);
}
.flowform-container .ff-choice-radio,
.flowform-container .ff-choice-checkbox {
display:         flex;
align-items:     center;
justify-content: center;
width:           16px;
height:          16px;
border:          2px solid var(--answer-color, #111827);
border-radius:   var(--corner-radius, 8px);
flex-shrink:     0;
transition:      background-color 0.12s;
}
.flowform-container .ff-choice-item.is-selected .ff-choice-radio,
.flowform-container .ff-choice-item.is-selected .ff-choice-checkbox {
background-color: var(--btn-color, #111827);
border-color:     var(--btn-color, #111827);
}
.flowform-container .ff-choice-item.is-selected .ff-choice-radio::after,
.flowform-container .ff-choice-item.is-selected .ff-choice-checkbox::after {
content:       '';
display:       block;
width:         6px;
height:        6px;
border-radius: 50%;
background:    var(--btn-text-color, #ffffff);
}
.flowform-container .ff-choice-label { line-height: 1.4; } .flowform-container .ff-yes-no { display: flex; gap: 12px; }
.flowform-container .ff-align-center .ff-yes-no { justify-content: center; } 
.flowform-container .ff-yes-no-btn { min-width: 80px; justify-content: center; } .flowform-container .ff-rating { display: flex; flex-wrap: wrap; gap: 8px; }
.flowform-container .ff-align-center .ff-rating { justify-content: center; }
.flowform-container .ff-rating-star {
background:  transparent;
border:      none;
padding:     0;
cursor:      pointer;
color:       var(--star-color, #f59e0b);
line-height: 1;
transition:  transform 0.1s;
}
.flowform-container .ff-rating-star:hover { transform: scale(1.15); }
.flowform-container .ff-rating-star.is-active svg,
.flowform-container .ff-rating-star svg[fill="currentColor"] { fill: var(--star-color, #f59e0b); }
.flowform-container .ff-rating-star:focus,
.flowform-container .ff-rating-star:focus-visible { outline: none; border: none; } .flowform-container .ff-btn-primary {
display:         inline-flex;
align-items:     center;
justify-content: center;
padding:         10px 24px;
background:      var(--btn-color, #111827);
color:           var(--btn-text-color, #ffffff);
border:          none;
border-radius:   var(--corner-radius, 8px);
font-size:       var(--fs-body, 1rem);
font-family:     inherit;
font-weight:     500;
cursor:          pointer;
transition:      background-color 0.15s, transform 0.1s, scale 0.15s;
text-decoration: none;
}
.flowform-container .ff-btn-primary:hover  { background-color: var(--btn-hover-color, #374151); scale: 1.03; }
.flowform-container .ff-btn-primary:active { scale: 0.98; }
.flowform-container .ff-btn-primary:focus { border: none; outline: none; }
.flowform-container .ff-btn-primary:focus-visible {
outline: var(--btn-color, #111827) solid 2px;
outline-offset: 2px;
z-index: 500;
} .flowform-container .ff-actions { display: flex; align-items: center; gap: 16px; } .flowform-container .ff-thankyou-icon {
width:           56px;
height:          56px;
border-radius:   50%;
background:      #d1fae5;
display:         flex;
align-items:     center;
justify-content: center;
color:           #059669;
flex-shrink:     0;
}
.flowform-container .ff-submission-error-icon {
width:           56px;
height:          56px;
border-radius:   50%;
background:      #fee2e2;
display:         flex;
align-items:     center;
justify-content: center;
color:           #dc2626;
flex-shrink:     0;
} .flowform-container .ff-submitting-spinner {
width:        40px;
height:       40px;
border:       3px solid rgba(0, 0, 0, 0.1);
border-top:   3px solid var(--btn-color, #111827);
border-radius: 50%;
animation:    ff-spin 0.7s linear infinite;
flex-shrink:  0;
} .flowform-container .ff-redirect-countdown {
font-size:  var(--fs-hint, 0.875rem);
color:      var(--hint-color, #9ca3af);
margin:     0;
} .flowform-container .ff-social-share {
display:        flex;
flex-direction: column;
align-items:    inherit;
gap:            10px;
margin-top:     8px;
}
.flowform-container .ff-social-share-label {
font-size:  var(--fs-hint, 0.875rem);
color:      var(--hint-color, #9ca3af);
margin:     0;
}
.flowform-container .ff-social-share-btns {
display: flex;
gap:     10px;
}
.flowform-container .ff-social-btn {
display:         inline-flex;
align-items:     center;
justify-content: center;
width:           40px;
height:          40px;
border-radius:   var(--corner-radius, 8px);
border:          1.5px solid var(--answer-color, #d1d5db);
color:           var(--answer-color, #6b7280);
text-decoration: none;
transition:      border-color 0.15s, color 0.15s, background-color 0.15s;
}
.flowform-container .ff-social-btn:hover {
border-color:     var(--btn-color, #111827);
color:            var(--btn-color, #111827);
background-color: color-mix(in srgb, var(--btn-color, #111827) 6%, transparent);
}
.flowform-container .ff-social-btn:focus { outline: none; }
.flowform-container .ff-social-btn:focus-visible {
outline:        var(--btn-color, #111827) solid 2px;
outline-offset: 2px;
} .flowform-container .ff-email-confirm-wrap {
display:        flex;
flex-direction: column;
gap:            16px;
width:          100%;
}
.flowform-container .ff-confirm-label {
font-size:   var(--fs-hint, 0.875rem);
color:       var(--hint-color, #9ca3af);
margin:      0 0 -8px;
} .flowform-container .ff-other-wrap {
display: contents;
}
.flowform-container .ff-other-idle,
.flowform-container .ff-other-confirmed {
cursor: pointer;
}
.flowform-container .ff-other-editing {
display:     flex;
align-items: center;
gap:         8px;
cursor:      default;
}
.flowform-container .ff-other-inline-input {
flex:          1;
min-width:     0;
background:    transparent;
border:        none;
outline:       none;
font-size:     var(--fs-body, 1rem);
color:         var(--answer-color, #111827);
font-family:   inherit;
padding:       0;
}
.flowform-container .ff-other-inline-input:focus,
.flowform-container .ff-other-inline-input:focus-visible {
background: transparent;
outline: none;
border: none;
color: var(--answer-color, #111827);
}
.flowform-container .ff-other-inline-input::placeholder {
color:   var(--answer-color, #111827);
opacity: 0.4;
}
.flowform-container .ff-other-tick {
display:         flex;
align-items:     center;
justify-content: center;
flex-shrink:     0;
width:           28px;
height:          28px;
border-radius:   50%;
border:          1.5px solid var(--answer-color, #111827);
background:      transparent;
color:           var(--answer-color, #111827);
cursor:          pointer;
padding:         0;
transition:      background-color 0.12s, color 0.12s, border-color 0.12s;
}
.flowform-container .ff-other-tick:hover {
background-color: var(--btn-color, #111827);
border-color:     var(--btn-color, #111827);
color:            var(--btn-text-color, #ffffff);
}
.flowform-container .ff-other-tick:focus { outline: none; }
.flowform-container .ff-other-tick:focus-visible {
outline:        var(--btn-color, #111827) solid 2px;
outline-offset: 2px;
} .flowform-container .ff-bg-overlay { position: absolute; inset: 0; pointer-events: none; } .flowform-container .ff-loading {
display:         flex;
flex-direction:  column;
align-items:     center;
justify-content: center;
gap:             12px;
min-height:      200px;
padding:         32px;
width: 100%;
}
.flowform-container .ff-loading-spinner {
width:            32px;
height:           32px;
border:           3px solid rgba(0, 0, 0, 0.1);
border-top-color: var(--btn-color, #111827);
border-radius:    50%;
animation:        ff-spin 0.7s linear infinite;
}
.flowform-container .ff-loading-text { font-size: 0.875rem; color: var(--hint-color, #9ca3af); }
.flowform-container .ff-error { width: 100%; padding: 32px; text-align: center; color: #ef4444; font-size: 0.875rem; } @keyframes ff-spin { to { transform: rotate(360deg); } } @container (max-width: 1024px) {
.flowform-container .ff-screen-inner { padding: 56px 32px 24px; max-width: 36rem; }
.flowform-container .ff-title { font-size: clamp(2rem, 6cqw, var(--fs-title, 2.25rem)); }
}
@container (max-width: 640px) {
.flowform-container { border-radius: 0; min-height: 480px; }
.flowform-container .ff-choices--grid_2 { grid-template-columns: 1fr; }
.flowform-container .ff-nav-bar { padding: 0 16px; } .flowform-container .ff-bg-layer--split { display: block; }
.flowform-container .ff-bg-split-panel {
position: absolute;
inset:    0;
width:    100%;
opacity:  0.2;
}
.flowform-container .ff-content-wrapper--split-left,
.flowform-container .ff-content-wrapper--split-right { left: 0; right: 0; }
} .flowform-container .ff-draft-alert {
position:        absolute;
bottom:          0;
left:            0;
right:           0;
z-index:         70;
display:         flex;
align-items:     center;
justify-content: space-between;
gap:             12px;
padding:         10px 16px;
background:      #fefce8;
border-top:   1px solid #fde68a;
font-size:       0.8125rem;
color:           #92400e;
line-height:     1.4;
}
.flowform-container .ff-draft-alert__msg { flex: 1; min-width: 0; }
.flowform-container .ff-draft-alert__link {
color:           #92400e;
font-weight:     600;
text-decoration: underline;
}
.flowform-container .ff-draft-alert__link:hover { opacity: 0.75; }
.flowform-container .ff-draft-alert__dismiss {
flex-shrink:     0;
display:         flex;
align-items:     center;
justify-content: center;
width:           24px;
height:          24px;
padding:         0;
background:      transparent;
border:          none;
border-radius:   4px;
color:           #92400e;
cursor:          pointer;
opacity:         0.7;
}
.flowform-container .ff-draft-alert__dismiss:hover { opacity: 1; } .flowform-container .ff-powered-by {
position:       absolute;
bottom:         16px;
left:           50%;
transform:      translateX(-50%);
z-index:        60;
pointer-events: auto;
will-change:    opacity;
display:        flex;
}
.flowform-container .ff-powered-by-link {
display:         inline-flex;
align-items:     center;
gap:             5px;
font-size:       0.6875rem;
font-family:     inherit;
background:      var(--btn-color, #111827);
color:           var(--btn-text-color, #ffffff);
border:          6px;
padding:         4px 8px;
border-radius:   6px;
text-decoration: none;
opacity:         0.75;
white-space:     nowrap;
transition:      opacity 0.15s, color 0.15s;
}
.ff-powered-by-link:hover {
opacity: 1;
}
.flowform-container .ff-powered-by-link:focus { outline: none; }
.flowform-container .ff-powered-by-link:focus-visible {
outline:        var(--btn-color, #111827) solid 2px;
outline-offset: 2px;
border-radius:  2px;
}
.flowform-container .ff-powered-by-icon {
flex-shrink: 0;
color:       inherit;
}