/* ==========================================================================
   Split Test Layout — bespoke styling only.
   Layout / flex / spacing / text utilities are handled by Bootstrap classes
   (vendor.css) in the markup. Only design-specific rules live here.
   ========================================================================== */

:root {
    --st-page-bg: #000914;
    --st-header-bg: linear-gradient(180deg, #16263f 0%, #101d31 100%);
    --st-stage-bg-grad: linear-gradient(to bottom, #003c7e 0, #003c7e 28%, #001f4f 60%, #000914 100%);
    --st-text-muted: #aab7c9;
    --fsva-green: #3DDC73;
    /* Muted body-text colour for content on the white card (e.g. trust badges). */
    --emap-text: #5C7280;
}

body.split-test-body {
    min-height: 100vh;
    background-color: var(--st-page-bg);
    font-family: "General Sans", "Helvetica Neue", Arial, sans-serif;
}

.st-wrapper {
    flex: 1 0 auto;
    width: 100%;
    /* Column layout so the content stage can grow and push the footer to the
       bottom of the viewport even on short pages (e.g. verification). */
    display: flex;
    flex-direction: column;
}

/* ---------- Header (centered pill) ---------- */
.st-header__inner {
    gap: 48px;
    max-width: 100%;
    background: #78afe62e;
    border: 1px solid rgba(170,205,240,.45);
    border-radius: 8px;
    margin-top: 0.5rem;
    padding:8px 26px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.st-header__logo img {
    height: 40px;
    width: auto;
    display: block;
}

.st-header__support {
    gap: 16px;
    font-size: 14px;
}

.st-header__support .st-label {
    --tw-text-opacity: 1;
    color: rgb(164 185 211 / var(--tw-text-opacity, 1));
}

.st-header__support a {
    --tw-text-opacity: 1;
    color: rgb(164 185 211 / var(--tw-text-opacity, 1));
    text-decoration: none;
}

.st-header__support a:hover {
    text-decoration: underline;
}

.st-header__support .st-email {
    --tw-text-opacity: 1;
    color: rgb(164 185 211 / var(--tw-text-opacity, 1));
}

/* ---------- Stage (full-width content background) ---------- */
.st-stage {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin: 0.5rem 1.6rem 0px;
    background: var(--st-stage-bg-grad);
    /* Grow to fill the wrapper so the footer sticks to the viewport bottom on
       short pages (verification, expired, etc.). */
    flex: 1 0 auto;
}

/* Decorative diamonds — desktop (hidden by default, shown on lg+) */
.st-stage__decor {
    display: none;
    position: absolute;
    top: 60px;
    right: -120px;
    width: 709.4px;
    height: 1063.48px;
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}

/* Decorative diamonds — mobile (top-right corner) */
.st-stage__decor--mobile {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.st-stage__decor img {
    display: block;
    width: 100%;
    height: 100%;
}

.st-stage__decor--mobile img {
    object-fit: cover;
}

/* Keep the form content above the decoration */
.st-stage__inner {
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .st-stage__decor {
        display: block;
    }

    .st-stage__decor--mobile {
        display: none;
    }
}

/* ---------- Footer ---------- */

.st-footer__copy,
.st-footer__copy a {
    --tw-text-opacity: 1;
    color: rgb(164 185 211 / var(--tw-text-opacity, 1));
    font-size: 13px;
    margin: 0;
    text-decoration: none;
}

.st-footer__copy a:hover {
    text-decoration: underline;
}

.st-footer__link {
    --tw-text-opacity: 1;
    color: rgb(164 185 211 / var(--tw-text-opacity, 1));
    font-size: 13px;
    text-decoration: none;
}

.st-footer__link:hover {
    color: #fff;
    text-decoration: underline;
}

.st-footer__signout {
    margin-left: 16px;
    padding: 6px 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.st-footer__signout:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    /* Mobile header: compact pill — logo LEFT, phone RIGHT on one row (web view
       keeps its centered pill from the base rules — untouched). The pill fills the
       width so the two items sit at opposite edges; space-between needs !important
       to beat Bootstrap's .justify-content-center utility on the element. */
    .st-header__inner {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between !important;
        gap: 12px;
        flex: 1;
        margin: 0.5rem 0.6rem;
        box-sizing: border-box;
        padding: 12px 16px;
    }

    .st-header__support {
        flex-direction: row;
        gap: 12px;
    }

    /* Mobile shows only the phone — drop the label + email. */
    .st-header__support .st-label,
    .st-header__support .st-email {
        display: none;
    }

    .st-stage {
        padding: 0px 15px 0px;
        margin: 22px 0.6rem 0px;
    }

    .st-footer__inner {
        justify-content: center;
        text-align: center;
    }
}

/* Small screens: the stage's inner container drops its left/right padding so the
   card uses the full width. Scoped to the stage container so the footer's
   .container is unaffected; !important overrides Bootstrap's px-3 utility. */
@media (max-width: 767.98px) {
    .st-stage__inner > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Remove card padding on small screens for better mobile fit.
       !important because the base `.fs-card .card-body { padding: 2.5rem }` rule
       appears LATER in this file and would otherwise win by source order. */
    .fs-card .card-body {
        padding: 1rem !important;
    }

    .fs-trust-sep {
        display: none;
    }

    .st-footer__inner {
        gap: 12px;
        text-align: left;
        width: 100%;
    }
}

/* ==========================================================================
   Floating-label input field (.st-field)
   Label sits vertically centered at rest; on focus or when filled it lifts
   to sit on the top border (notched), turning green on focus.
   Pure CSS — the input must carry a placeholder=" " (single space).
   ========================================================================== */
.st-field {
    position: relative;
    margin-bottom: 20px;
}

.st-input {
    width: 100%;
    height: 48px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.2;
    color: #1f2937;
    background: #fff;
    border: 1px solid #d8dee6;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Label — resting position: vertically centered on the 56px input
   (fixed offset, not 50%, so an optional hint below doesn't shift it) */
.st-field__label {
    position: absolute;
    left: 14px;
    top: 24px;
    transform: translateY(-50%);
    margin: 0;
    padding: 0 5px;
    /* Keep long labels on a single line, truncating with an ellipsis instead of
       wrapping to two lines on narrow (mobile) fields. */
    max-width: calc(100% - 28px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #6b7280;
    background: none;
    pointer-events: none;
    transition: top 0.15s ease, transform 0.15s ease, color 0.15s ease, font-size 0.15s ease;
}

/* Floating labels normally pass mouse events through to the input, but a label that
   carries a tooltip (e.g. EIN in step 2, SSN in step 4 — the tooltip is on the LABEL,
   not the input) must be hoverable or the tooltip never triggers. Higher specificity
   (class+attribute) so it wins over both .st-field__label blocks regardless of order. */
.st-field__label[data-toggle="tooltip"] {
    pointer-events: auto;
    cursor: help;
}

/* Floated position: filled or focused -> sit on the top border.
   Inputs use :placeholder-shown; selects (always "filled") use :valid,
   which is only satisfied once a non-empty, required option is chosen. */
input.st-input:not(:placeholder-shown) + .st-field__label,
textarea.st-input:not(:placeholder-shown) + .st-field__label,
select.st-input:valid + .st-field__label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12.5px;
    background: #fff;
    color: #6b7280;
}

input.st-input:focus + .st-field__label,
textarea.st-input:focus + .st-field__label,
select.st-input:focus + .st-field__label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12.5px;
    background: #fff;
    color: #2faa63;
}

/* Focus state — green border + green floated label */
.st-input:focus {
    border-color: #4cca7e;
    box-shadow: 0 0 0 1px #4cca7e;
}

.st-input:focus + .st-field__label {
    color: #2faa63;
}

.st-required {
    color: #e5484d;
}

/* Disabled — greyed background + muted text, no pointer */
.st-input:disabled,
.st-input[disabled] {
    background-color: #f1f3f5;
    color: #9aa3af;
    border-color: #e4e7eb;
    cursor: not-allowed;
    opacity: 1;
}

/* Select — custom chevron, no native arrow */
select.st-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 42px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

/* Static-label field (label sits above the box, e.g. currency) */
.st-static-label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
}

/* Currency input with a "$" prefix */
.st-currency {
    position: relative;
}

.st-currency__prefix {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3af;
    font-size: 16px;
    pointer-events: none;
}

.st-input--currency {
    padding-left: 34px;
}

/* Date input — keep the label floated (a date field always shows a format) */
input[type="date"].st-input + .st-field__label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12.5px;
}

/* Field hint text under an input */
.st-field__hint {
    display: block;
    margin: 6px 0 0 2px;
    font-size: 12.5px;
    color: #9aa3af;
}

/* Group label (above radio sections) */
.st-group-label {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
}

/* Radio option cards */
.st-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    margin-bottom: 10px;
    border: 1px solid #d8dee6;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    color: #1f2937;
    transition: border-color 0.15s ease;
}

.st-radio:hover {
    border-color: #b9c2cf;
}

.st-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #16a34a;
    cursor: pointer;
}

/* Radio group — display radio options side-by-side (not checkboxes) */
.st-radio-group:has(input[type="radio"]) {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.st-radio-group:has(input[type="radio"]) .st-radio {
    margin-bottom: 0;
}

/* Checkbox group (like Revenue model) — keep vertical stacking at full width */
.st-radio-group:has(input[type="checkbox"]) {
    display: block;
    width: 100%;
}

.st-radio-group:has(input[type="checkbox"]) .st-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

/* Continue / primary button */
.st-btn-primary {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    height: 48px;
    padding: 0 28px;
    font-family: "DM Mono", monospace;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #000;
    background: #3ddc73;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.st-btn-primary:hover:not(:disabled) {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px #3ddc73;
    color: #21b654;
}

.st-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Conditional sections toggled by JS */
.st-hidden {
    display: none;
}

/* ---------- Textarea (floating label) ---------- */
textarea.st-input {
    height: auto;
    min-height: 92px;
    padding: 16px 18px;
    line-height: 1.4;
    resize: vertical;
}

/* Textarea label rests near the top (first line), not vertically centered */
textarea.st-input + .st-field__label {
    top: 18px;
}

/* intl-tel-input wrapper — force full width inside .st-field */
.st-field .iti {
    display: block;
    width: 100%;
}

/* Floating-label support for intl-tel-input (input gets wrapped in .iti,
   breaking the simple `input + label` adjacency). Labels live as siblings
   of .iti, so we drive their state via :has() on the wrapped input. */
.st-field--tel .iti + .st-field__label {
    left: 50px;
}
.st-field--tel .iti:has(input.st-input:focus) + .st-field__label,
.st-field--tel .iti:has(input.st-input:not(:placeholder-shown)) + .st-field__label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12.5px;
    background-color: #fff;
    padding: 0 6px;
    left: 14px;
}
.st-field--tel .iti:has(input.st-input:focus) + .st-field__label {
    color: #2faa63;
}

/* Suppress browser default focus ring on intl-tel-input flag dropdown button */
.st-field--tel .iti__selected-country,
.st-field--tel .iti__selected-country:focus,
.st-field--tel .iti__selected-country:focus-visible,
.st-field--tel .iti__selected-country-primary,
.st-field--tel .iti__selected-flag,
.st-field--tel .iti__selected-flag:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* bootstrap-select — style rendered button/wrapper to match .st-input,
   and float the sibling .st-field__label using :has() on placeholder state. */
.st-field--select .bootstrap-select {
    width: 100% !important;
}
.st-field--select .bootstrap-select > .dropdown-toggle {
    position: relative;
    width: 100%;
    height: 48px;
    padding: 0 42px 0 18px;
    font-family: inherit;
    font-size: 16px;
    line-height: 46px;
    color: #1f2937;
    background: #fff;
    border: 1px solid #d8dee6;
    border-radius: 10px;
    outline: none;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.st-field--select .bootstrap-select > .dropdown-toggle.bs-placeholder,
.st-field--select .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.st-field--select .bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.st-field--select .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
    color: transparent;
}
.st-field--select .bootstrap-select > .dropdown-toggle:focus,
.st-field--select .bootstrap-select.show > .dropdown-toggle {
    border-color: #4cca7e;
    box-shadow: 0 0 0 1px #4cca7e !important;
    outline: none !important;
}
/* Disabled — same muted look as .st-input:disabled (bootstrap-select toggles
   a .disabled class rather than the :disabled pseudo-class) */
.st-field--select .bootstrap-select > .dropdown-toggle.disabled {
    background-color: #f1f3f5;
    color: #9aa3af;
    border-color: #e4e7eb;
    cursor: not-allowed;
    opacity: 1;
}
.st-field--select .bootstrap-select > .dropdown-toggle::after {
    border: 0;
    width: 14px;
    height: 14px;
    margin: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.st-field--select .bootstrap-select > .dropdown-toggle .filter-option {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 18px;
    right: 42px;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    padding: 0 !important;
    margin: 0;
}
.st-field--select .bootstrap-select .filter-option-inner,
.st-field--select .bootstrap-select .filter-option-inner-inner {
    display: block;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Ensure open selectpicker stacks above accordion cards / sibling steps */
.st-field--select .bootstrap-select {
    position: relative;
}
/* IMPORTANT: keep the open select WITHOUT a z-index. A z-index here makes it a stacking
   context that traps its dropdown menu — the floated field labels (z-index:9999) would
   then poke through an upward-opening menu. Cross-card/step stacking is handled by
   `.fs-step-card:has(.bootstrap-select.show){ z-index:20 }`; the menu below lifts itself
   above the labels. (The button stays below the label so the label's notch still shows.) */
.st-field--select .bootstrap-select.show,
.st-field--select .bootstrap-select.show-menu-arrow.show {
    z-index: auto;
}
/* Menu — align to button, keep rounded aesthetic */
.st-field--select .bootstrap-select > .dropdown-menu {
    margin-top: 4px;
    border: 1px solid #d8dee6;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    overflow: visible;
    /* Above the floated field labels (z-index:9999) so an upward-opening menu covers the
       fields above it. The open select itself has NO z-index (see note above), so this
       resolves in the card's stacking context and isn't trapped below the labels. */
    z-index: 10000;
}
/* Cap the scrollable list height so the whole menu (sticky search box + list)
   stays within the viewport instead of overflowing past the header and
   cutting off the search box. */
.st-field--select .bootstrap-select .dropdown-menu.inner,
.st-field--select .bootstrap-select > .dropdown-menu > .inner {
    padding: 0;
    overflow-x: hidden;
    max-height: 240px !important;
}
.st-field--select .bootstrap-select > .dropdown-menu > .inner {
    overflow-y: auto;
}
/* Search box inside the dropdown (data-live-search="true") */
.st-field--select .bootstrap-select .bs-searchbox {
    display: block !important;
    padding: 0 0 6px;
    margin-bottom: 4px;
    background: #fff;
    border-bottom: 1px solid #eef1f4;
    position: sticky;
    top: 0;
    z-index: 2;
}
.st-field--select .bootstrap-select .bs-searchbox .form-control {
    display: block !important;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 34px;
    color: #1f2937;
    background: #f5f7fa;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
    box-shadow: none;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.st-field--select .bootstrap-select .bs-searchbox .form-control:focus {
    border-color: #cbd2da;
    box-shadow: none;
    color: #1f2937;
    background: #fff;
}
.st-field--select .bootstrap-select .bs-searchbox .form-control::placeholder {
    color: #9aa3af;
    opacity: 1;
}
/* Dropdown items */
.st-field--select .bootstrap-select .dropdown-menu li > a,
.st-field--select .bootstrap-select .dropdown-menu li > a.dropdown-item {
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.35;
    color: #1f2937;
    border-radius: 6px;
    background: transparent;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.st-field--select .bootstrap-select .dropdown-menu li > a:hover,
.st-field--select .bootstrap-select .dropdown-menu li > a:focus,
.st-field--select .bootstrap-select .dropdown-menu li > a.dropdown-item:hover,
.st-field--select .bootstrap-select .dropdown-menu li > a.dropdown-item:focus {
    background-color: #f5f7fa;
    color: #1f2937;
}
.st-field--select .bootstrap-select .dropdown-menu li.selected > a,
.st-field--select .bootstrap-select .dropdown-menu li.active > a,
.st-field--select .bootstrap-select .dropdown-menu li > a.active,
.st-field--select .bootstrap-select .dropdown-menu li > a.selected {
    background-color: transparent;
    color: #1f2937;
    font-weight: 600;
}
.st-field--select .bootstrap-select .dropdown-menu li.selected > a:hover,
.st-field--select .bootstrap-select .dropdown-menu li.active > a:hover,
.st-field--select .bootstrap-select .dropdown-menu li > a.active:hover,
.st-field--select .bootstrap-select .dropdown-menu li > a.selected:hover {
    background-color: #f5f7fa;
}
.st-field--select .bootstrap-select .dropdown-menu li.disabled > a {
    color: #9aa3af;
    background: transparent;
    cursor: not-allowed;
}
.st-field--select .bootstrap-select .dropdown-menu .no-results {
    padding: 10px 12px;
    font-size: 14px;
    color: #6b7280;
    background: transparent;
}
/* Floating label: rest position matches .st-field__label default; float when
   an option is selected (no .bs-placeholder) or when dropdown is open. */
.st-field--select:has(.bootstrap-select > .dropdown-toggle:not(.bs-placeholder)) .st-field__label,
.st-field--select:has(.bootstrap-select.show) .st-field__label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12.5px;
    color: #6b7280;
    background: #fff;
    z-index: 9999;
}
.st-field--select:has(.bootstrap-select.show) .st-field__label,
.st-field--select:has(.bootstrap-select > .dropdown-toggle:focus) .st-field__label {
    color: #2faa63;
}

/* Error state: label turns red only when dropdown has an error AND is open or focused */
.st-field--select:has(select.is-invalid):has(.bootstrap-select.show) .st-field__label,
.st-field--select:has(select.is-invalid):has(.bootstrap-select > .dropdown-toggle:focus) .st-field__label {
    color: #dc3545 !important;
}

/* Resting label vertical-center for the shorter (44px) dropdown fields.
   (The base .st-field__label top:24px centers a 48px input; selects are 44px.)
   The floated rules above are more specific, so they still win when active. */
.st-field--select .st-field__label {
    top: 23px;
}

/* ==========================================================================
   Range sliders (.st-slider) — three channels that always total 100%.
   The green fill is painted via an inline background gradient set in JS.
   ========================================================================== */
.st-slider-hint {
    margin: 0 0 20px;
    font-size: 13px;
    color: #9aa3af;
}

.st-slider-row {
    margin-bottom: 20px;
}

.st-slider-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}

.st-slider-track-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.st-slider-value {
    min-width: 42px;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

input[type="range"].st-slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #222b38;
    outline: none;
    cursor: pointer;
}

input[type="range"].st-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3ddc73;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

input[type="range"].st-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3ddc73;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

/* ==========================================================================
   Form-Split — shared across all variants  (fs-*)
   ========================================================================== */

.fs-card { border-radius: 12px; }
.fs-card .card-body { padding: 2.5rem; }

/* Application switcher bar (multi-application users) — full-bleed strip at the
   top of the card. Bleeds out by the card-body padding (2.5rem) to reach the edges. */
.fs-app-switch {
    margin: -2.5rem -2.5rem 1.75rem;
    padding: 12px 2.5rem;
    background: #f6f8fa;
    border-bottom: 1px solid #eaedf1;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    gap: 12px;
    flex-wrap: wrap;
}
.fs-app-switch__label {
    font-size: 13px;
    color: #6b7280;
    margin-right: 10px;
    white-space: nowrap;
}
.fs-app-switch__select {
    max-width: 320px;
    border-radius: 50px;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: #16233a;
    padding: 2px 24px 2px 10px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
}
.fs-app-switch__select:focus { outline: none; }
.fs-app-switch__status {
    font-size: 12px;
    font-weight: 600;
    color: #17a24a;
    background: rgba(61, 220, 115, 0.12);
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.fs-title {
    color: #111827;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
}
.fs-subtitle { color: #6b7280; }

.fs-email-link {
    color: var(--fsva-green);
    font-size: .875rem;
    text-decoration: underline;
    white-space: nowrap;
}
.fs-email-link:hover { color: var(--fsva-green); opacity: .8; text-decoration: underline; }

.fs-finish-later {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f5f7f9;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
/* Keep it hidden until the trigger is clicked — .fs-finish-later's own display
   would otherwise beat the earlier .st-hidden rule on source order. */
.fs-finish-later.st-hidden { display: none; }
.fs-finish-later__form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.fs-finish-later__field {
    flex: 1 1 260px;
    margin-bottom: 0;
}
.fs-finish-later__field .st-input {
    background: #fff;
}
.fs-finish-later__btn {
    margin-top: 0;
    flex: 0 0 auto;
}
.fs-finish-later__cancel {
    flex: 0 0 auto;
}
.fs-finish-later__msg {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    min-height: 0;
}
.fs-finish-later__msg:empty { display: none; }
.fs-finish-later__msg.is-error   { color: #b42318; }
.fs-finish-later__msg.is-success { color: var(--fsva-green); }

@media (max-width: 575.98px) {
    .fs-finish-later__form { gap: 8px; }
    .fs-finish-later__btn { width: 100%; justify-content: center; }
    .fs-finish-later__cancel { width: 100%; text-align: center; }

    /* Stack the card header full width so the title isn't squeezed by the
       "finish later" link sitting beside it. */
    .fs-card-head { flex-direction: column; }
    .fs-card-head > div { width: 100%; }
    .fs-card-head .fs-email-link {
        width: 100%;
        margin-left: 0 !important;
        margin-top: 8px;
    }
}

.fs-progress {
    font-family: DM Mono, monospace;
    font-size: 13px;
    color: #5C7280;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.fs-progress strong{
    color: #000 !important;
    letter-spacing: 0em;
}

.fs-step-card {
    border-radius: 8px !important;
    overflow: hidden;
    margin-bottom: 8px;
    border: 1px solid #dee2e6 !important;
    transition: border-color .2s;
    cursor: pointer;
    position: relative;
}
/* Let selectpicker dropdown escape card bounds when open */
.fs-step-card:has(.bootstrap-select.show) {
    overflow: visible;
    z-index: 20;
}
/* Completed step: green border. Current step: dark highlighted border. */
.fs-step-card.is-complete { border-color: var(--fsva-green) !important; }
.fs-step-card.is-active   { border-color: 1px solid rgba(0, 0, 0, 0.125) !important; }
.fs-step-card.is-disabled { cursor: not-allowed; opacity: .55; }
.fs-step-card.is-disabled .fs-step-toggle { pointer-events: none; }

.fs-step-header { background: #fff; padding: 0; }

.fs-step-toggle {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    text-decoration: none !important;
    color: inherit !important;
}
.fs-step-toggle:hover { text-decoration: none !important; color: inherit !important; }

.fs-step-badge {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #D7DEE5;
    color: #000;
    background: #D7DEE5;
    transition: background .2s, border-color .2s, color .2s;
}
/* Completed: green badge with a white check icon. */
.fs-step-badge.is-done {
    background: var(--fsva-green);
    border-color: var(--fsva-green);
    color: #fff;
}
.fs-step-badge.is-done svg { display: block; }
/* Current: highlighted grey (not green). */
.fs-step-badge.is-active {
    background: #c3ccd6;
    border-color: #c3ccd6;
    color: #1f2937;
}

.fs-step-label {
    flex: 1;
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
}
.fs-step-dot {
    color: #5C7280;
    font-size: 16px;
    display: inline-block;
    transition: transform .2s;
}
.fs-step-toggle:not(.collapsed) .fs-step-dot { transform: rotate(180deg); }

/* Collapsible step body — toggled client-side (no Bootstrap collapse JS needed) */
.fs-step-collapse { display: none; }
.fs-step-collapse.show { display: block; }

/* Read-only lock wrapper (e.g. step 1 once submitted). fieldset[disabled] disables
   native inputs/buttons + drops them from submission; pointer-events:none also blocks
   the custom bootstrap-select button, which fieldset[disabled] doesn't reach. */
.st-lock-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.st-lock-fieldset[disabled] { pointer-events: none; }
/* Match the greyed disabled look of native inputs on the bootstrap-select button
   (Country) so a locked step doesn't have one white field among grey ones. */
.st-lock-fieldset[disabled] .bootstrap-select > .dropdown-toggle {
    background-color: #f1f3f5;
    color: #9aa3af;
    border-color: #e4e7eb;
    cursor: not-allowed;
}
.st-lock-fieldset[disabled] .bootstrap-select > .dropdown-toggle::after {
    opacity: 0.5;
}

.fs-step-body { padding: 4px 20px 20px; }

.fs-card .btn-success,
.fs-card .btn-success:hover,
.fs-card .btn-success:focus {
    background-color: var(--fsva-green);
    border-color: var(--fsva-green);
    color: #fff;
}

.fs-submit-btn {
    display: block;
    margin-top: 16px;
    padding: 0 28px;
    background: var(--fsva-green);
    color: #fff;
    letter-spacing: .1em;
    font-weight: 700;
    font-size: .8rem;
    height: 48px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    transition: background .15s, box-shadow .15s;
    font-family: DM Mono, monospace;

}
.fs-submit-btn:not([disabled]) {
    background: var(--fsva-green);
    color: #fff;
    border-color: var(--fsva-green);
    cursor: pointer;
}

/* Disabled until every section is complete — light green with gray text */
.fs-submit-btn[disabled],
.fs-submit-btn:disabled {
    background: #a7e7c1 !important;
    color: #6d8683 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* ---------- Submit button loading state (spinner while saving a step) ----------
   Added via .is-loading in each step's showLoader(); removed in hideLoader().
   Hides the label (transparent) and centers a spinning ring on top; forces full
   opacity so the button stays its normal colour (not the greyed :disabled look). */
.st-btn-primary.is-loading,
.fs-submit-btn.is-loading {
    color: transparent !important;
    opacity: 1 !important;
    pointer-events: none;
    position: relative;
}
/* Keep the "Submit Application" button full green while loading (its disabled
   state is a faded green, which would otherwise read as inactive). */
.fs-submit-btn.is-loading {
    background: var(--fsva-green) !important;
}
.st-btn-primary.is-loading::after,
.fs-submit-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid transparent;
    border-radius: 50%;
    animation: st-btn-spin 0.6s linear infinite;
}
/* Dark ring on the light-green step button (dark text); white ring on the
   green "Submit Application" button (white text). */
.st-btn-primary.is-loading::after {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: #000;
}
.fs-submit-btn.is-loading::after {
    border-color: rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
}
@keyframes st-btn-spin {
    to { transform: rotate(360deg); }
}

.fs-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--emap-text, #5C7280);
}
.fs-trust .fs-trust-item svg{
    color: var(--fsva-green);
}
.fs-trust-sep { color: #d1d5db; margin: 0 8px; }
.fs-trust-item { 
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
 }

/* Terms & Conditions scrollable box */
.st-terms-box {
    border: 1px solid #d8dee6;
    border-radius: 8px;
    padding: 16px 18px;
    height: 160px;
    overflow-y: auto;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.6;
    width: 100%;
    resize: none;
    display: block;
    background: #fff;
    font-family: inherit;
}
.st-terms-box p { margin-bottom: 10px; }
.st-terms-box p:last-child { margin-bottom: 0; }
.st-terms-box a { color: #2faa63; }

/* --- Plaid connect row --- */
/* ==========================================================================
   Plaid connect box (Banking step)
   ========================================================================== */
.st-plaid {
    margin-bottom: 18px;
    padding: 16px;
    background: #f6f8fb;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
}

.st-plaid__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: #fff;
    border: 1px solid #d8dee6;
    border-radius: 8px;
    font-family: "DM Mono", monospace;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1f2937;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.st-plaid__btn:hover {
    border-color: #b9c2cf;
    background: #fbfcfe;
}

.st-plaid__hint {
    margin: 10px 0 0 2px;
    font-size: 13px;
    color: #9aa3af;
}

/* --- Plaid connect row (matches variant-A prototype: .emap-plaid-row / .emap-btn-outline / .emap-help-text) --- */
.st-plaid-row {
    padding: 16px;
    border: 1px dashed #D7DEE5;
    border-radius: 8px;
    margin-bottom: 24px;
    background: #fbfcfd;
}
.st-btn-outline {
    width: 100%;
    background: transparent;
    color: #0A2540;
    border: 1.5px solid #D7DEE5;
    padding: 0 20px;
    height: 48px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-family: 'DM Mono', monospace;
}
.st-btn-outline:hover {
    border-color: #3DDC73;
    color: #21B654;
}
.st-btn-outline.is-connected,
.st-btn-outline:disabled {
    cursor: default;
}
.st-btn-outline.is-connected {
    border-color: #21B654;
    color: #21B654;
}
.st-help-text {
    color: #5C7280;
    font-size: 13px;
    margin: 6px 0 0;
}

/* --- Step intro line (matches prototype .emap-step-intro) --- */
.st-step-intro {
    color: #5C7280;
    font-size: 14px;
    margin: 8px 0 16px;
}

/* --- Section sub-header within a step (matches prototype .emap-section-header) --- */
.st-section-header {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5C7280;
    margin: 24px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #D7DEE5;
    font-family: "DM Mono", monospace;
    font-weight: 500;
}

/* --- Reassurance note, green accent (matches prototype .emap-trust-line) --- */
.st-trust-line {
    background: #3ddc7314;
    border-left: 3px solid #3DDC73;
    padding: 8px 12px;
    font-size: 13px;
    margin: 8px 0 0;
    border-radius: 4px;
    color: #0A2540;
}

/* ==========================================================================
   Checkbox styling — green check (accent) + bordered card, per design
   ========================================================================== */
/* Green checkbox inside the radio/checkbox option cards (revenue model, terms) */
.st-radio input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #16a34a;
    cursor: pointer;
    flex-shrink: 0;
}

/* Bordered checkbox card — checkbox + label wrapped in an outlined box
   (e.g. "What would help your company grow?" and dynamic-field checkboxes) */
.st-checkbox-plain {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #d8dee6;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    color: #1f2937;
    transition: border-color 0.15s ease;
}

.st-checkbox-plain:hover {
    border-color: #b9c2cf;
}

.st-checkbox-plain input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #16a34a;
    cursor: pointer;
    flex-shrink: 0;
}

/* Dynamic-fields "Additional Information" modal — labelled section divider
   (centred label with a rule on each side). Ported from signup.css so the new
   variant renders processor dividers like the other variants. */
.processor-dynamic-fields-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 10px 0;
}
.processor-dynamic-fields-divider::before,
.processor-dynamic-fields-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #d8dee6;
}
.processor-dynamic-fields-divider span {
    white-space: nowrap;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #5C7280;
}


/* ==========================================================================
   Step 7 — Signature ("Great News!") intro copy + HelloSign container
   ========================================================================== */
.fs-signature__intro {
    margin: 0 0 24px;
    color: #374151;
    font-size: 15px;
    line-height: 1.6;
}

.fs-signature__intro p {
    margin-bottom: 14px;
}

#hs-container {
    min-height: 800px;
    width: 100%;
}

/* Selects always show a visible "Select" placeholder option, so their label
   always sits floated on the border (never centered over the placeholder). */
select.st-input + .st-field__label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12.5px;
    color: #6b7280;
    background: #fff;
}

/* ---------------------------------------------------------------------
   Persona / Plaid auto-populated fields — green accent + "Auto-populated"
   caption (mirrors the mos variantA behaviour).
   --------------------------------------------------------------------- */
.st-field .st-input.auto-populated,
.st-input.auto-populated,
select.st-input.auto-populated,
textarea.st-input.auto-populated {
    border-left: 4px solid #3DDC73 !important;
    background-color: rgba(61, 220, 115, 0.07) !important;
}
/* bootstrap-select dropdowns (e.g. Country): .auto-populated lands on the hidden
   native <select>, so paint the green accent on the visible toggle button. */
.st-field--select:has(select.auto-populated) .bootstrap-select > .dropdown-toggle {
    border-left: 4px solid #3DDC73 !important;
    background-color: rgba(61, 220, 115, 0.07) !important;
}
.st-field .st-autofill-note {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #17a24a;
}
.st-field .st-autofill-note i { margin-right: 4px; color: #3DDC73; }

/* Persona / Plaid "connected" success banner (button is hidden once connected) */
.st-verify-success {
    display: block;
    margin: 6px 0 14px;
    padding: 12px 16px;
    border: 1px solid #3DDC73;
    border-radius: 10px;
    background: rgba(61, 220, 115, 0.10);
    color: #17a24a;
    font-size: 13px;
    font-weight: 500;
}
.st-verify-success i { margin-right: 7px; color: #3DDC73; }

/* Validation error state — red field border + red message (mirrors variantA) */
.st-input.is-invalid {
    border-color: #dc3545 !important;
}
.st-input.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px #dc3545 !important;
}

/* Label turns red when input/textarea/select is invalid and focused */
input.st-input.is-invalid:focus + .st-field__label,
textarea.st-input.is-invalid:focus + .st-field__label,
select.st-input.is-invalid + .st-field__label {
    color: #dc3545 !important;
}

.st-field .invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 5px;
    font-size: 12px;
    color: #dc3545;
}

/* Prevent a flash-of-unstyled-content overlap on load:
   bootstrap-select's CSS hides the native <select> immediately, but its
   replacement button only renders after its JS runs. During that gap the
   .st-field--select collapses to ~0px and its floating label paints over the
   next field. Reserve the input height so the field never collapses. */
.st-field--select,
.st-field--select .bootstrap-select {
    min-height: 48px;
}

/* Compact height for dropdown fields (country/state, etc.) */
.st-field--select .bootstrap-select > .dropdown-toggle,
.st-field--select select.st-input {
    height: 48px;
}
.st-field--select .bootstrap-select > .dropdown-toggle {
    line-height: 46px;
    border: 1px solid #d8dee6 !important;
    border-radius: 10px;
    background-color: #fff;
}

/* Validation error state on a dropdown: jQuery Validate adds .is-invalid to the
   hidden native <select>, so paint the red border on the visible bootstrap-select
   button (and on a plain native select when it is the visible control). */
.st-field--select:has(select.is-invalid) .bootstrap-select > .dropdown-toggle,
.st-field--select select.st-input.is-invalid {
    border-color: #dc3545 !important;
}

/* Focus state on invalid dropdown — show only red, not green */
.st-field--select:has(select.is-invalid) .bootstrap-select > .dropdown-toggle:focus,
.st-field--select:has(select.is-invalid) .bootstrap-select.show > .dropdown-toggle {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px #dc3545 !important;
}

/* Focus state on invalid intl-tel-input — show only red when focused */
.st-field--tel .iti:has(input.st-input.is-invalid:focus) + .st-field__label {
    color: #dc3545 !important;
}

/* Step 1: Estimated yearly sales and promo code side-by-side */
.st-field.estimated-yearly-sales-field,
.st-field.promo-code-field {
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
}

.st-field.estimated-yearly-sales-field {
    margin-right: 16px;
}

/* Two-column inline layout for fields marked with col-md-6-inline */
@media (min-width: 768px) {
    .col-md-6-inline {
        display: inline-block;
        width: calc(50% - 8px);
        vertical-align: top;
    }

    .col-md-6-inline:first-child {
        margin-right: 16px;
    }
}

/* First-step "Already have an account?" login link under the card */

.fs-login-link, .fs-login-link a, .fs-login-link a:hover  {
    font-size: 14px;
    color: rgb(164 185 211 / var(--tw-text-opacity, 1))
}
.fa-green,
.fa-green:hover,
.fa-green:active,
.fa-green:focus {
    color: #21b654;
}
.bg-green {
    background: #3ddc73;
}