/* =========================================================
   XFSPL CALCULATORS - COMPLETE PAGE
   Scoped: .xfspl-calculators
   ========================================================= */

.xfspl-calculators {
    --navy: #0B1F3A;
    --dark: #06172C;
    --blue: #1557B0;
    --blue-light: #EAF2FC;
    --gold: #D4A72C;
    --bg: #F7F9FC;
    --text: #172033;
    --muted: #667085;
    --border: #E1E7EF;
    background: var(--bg);
    color: var(--text);
    font-family: Inter,sans-serif;
}

    .xfspl-calculators * {
        box-sizing: border-box
    }

    .xfspl-calculators .container {
        width: 100%;
        max-width: 1180px;
        margin: auto;
        padding: 0 20px
    }

    .xfspl-calculators a {
        text-decoration: none
    }

    .xfspl-calculators .section-pad {
        padding: 78px 0
    }

    /* HERO */
    .xfspl-calculators .calc-hero {
        position: relative;
        overflow: hidden;
        color: #fff;
        padding: 82px 0;
        background: radial-gradient(circle at 85% 40%,rgba(21,87,176,.32),transparent 30%), linear-gradient(115deg,#06172C,#0B1F3A 62%,#0A2A52);
    }

        .xfspl-calculators .calc-hero:after {
            content: "";
            position: absolute;
            width: 520px;
            height: 520px;
            right: -260px;
            bottom: -330px;
            border: 1px solid rgba(212,167,44,.22);
            border-radius: 50%;
        }

    .xfspl-calculators .calc-hero-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        gap: 65px;
        align-items: center;
    }

    .xfspl-calculators .calc-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--gold);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1.5px;
    }

    .xfspl-calculators .calc-hero h1 {
        margin: 14px 0 16px;
        color: #fff;
        font: 800 clamp(40px,5vw,64px)/1.08 Manrope,sans-serif;
        letter-spacing: -1.8px;
    }

    .xfspl-calculators .calc-hero p {
        max-width: 650px;
        margin: 0;
        color: rgba(255,255,255,.76);
        font-size: 18px;
        line-height: 1.8;
    }

    .xfspl-calculators .calc-hero-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 28px
    }

    .xfspl-calculators .calc-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 48px;
        padding: 0 21px;
        border-radius: 8px;
        font-weight: 800;
        transition: .2s ease;
    }

    .xfspl-calculators .calc-btn-gold {
        background: var(--gold);
        color: #172033
    }

        .xfspl-calculators .calc-btn-gold:hover {
            color: #172033;
            transform: translateY(-2px)
        }

    .xfspl-calculators .calc-btn-outline {
        border: 1px solid rgba(255,255,255,.35);
        color: #fff
    }

        .xfspl-calculators .calc-btn-outline:hover {
            background: #fff;
            color: var(--navy)
        }

    .xfspl-calculators .calc-hero-visual {
        padding: 26px;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 20px;
        background: rgba(255,255,255,.07);
        backdrop-filter: blur(10px);
        box-shadow: 0 25px 60px rgba(0,0,0,.18);
    }

    .xfspl-calculators .calc-visual-header {
        display: flex;
        justify-content: space-between;
        font-weight: 750
    }

        .xfspl-calculators .calc-visual-header i {
            color: var(--gold);
            font-size: 22px
        }

    .xfspl-calculators .calc-chart {
        height: 175px;
        display: flex;
        align-items: flex-end;
        gap: 11px;
        margin: 25px 0 20px;
        padding: 15px 12px 0;
        border-bottom: 1px solid rgba(255,255,255,.18);
        background: repeating-linear-gradient(to top,transparent 0 39px,rgba(255,255,255,.05) 40px);
    }

        .xfspl-calculators .calc-chart span {
            flex: 1;
            max-width: 45px;
            border-radius: 5px 5px 0 0;
            background: linear-gradient(to top,#D4A72C,#F0D77B);
        }

    .xfspl-calculators .calc-metrics {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 10px
    }

        .xfspl-calculators .calc-metrics div {
            padding: 12px;
            background: rgba(0,0,0,.14);
            border-radius: 9px
        }

        .xfspl-calculators .calc-metrics strong {
            display: block;
            font-size: 20px
        }

        .xfspl-calculators .calc-metrics small {
            color: rgba(255,255,255,.62)
        }

    /* TRUST */
    .xfspl-calculators .calc-trust {
        background: #fff;
        border-bottom: 1px solid var(--border)
    }

    .xfspl-calculators .calc-trust-grid {
        display: grid;
        grid-template-columns: repeat(4,1fr)
    }

        .xfspl-calculators .calc-trust-grid div {
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border-right: 1px solid var(--border);
            font-size: 13px;
            font-weight: 750;
            color: #344054;
        }

            .xfspl-calculators .calc-trust-grid div:last-child {
                border-right: 0
            }

        .xfspl-calculators .calc-trust-grid i {
            color: var(--blue)
        }

    /* SECTION TITLE */
    .xfspl-calculators .calc-section-title {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 34px
    }

        .xfspl-calculators .calc-section-title > span {
            color: var(--gold);
            font-size: 11px;
            font-weight: 850;
            letter-spacing: 1.5px
        }

        .xfspl-calculators .calc-section-title h2 {
            margin: 9px 0 9px;
            color: var(--navy);
            font: 800 clamp(28px,3vw,40px)/1.15 Manrope,sans-serif;
        }

        .xfspl-calculators .calc-section-title p {
            margin: 0;
            color: var(--muted);
            font-size: 15px
        }

    /* TOOLBAR */
    .xfspl-calculators .calc-toolbar {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 28px
    }

    .xfspl-calculators .calc-search {
        position: relative;
        width: 360px;
        flex: 0 0 360px
    }

        .xfspl-calculators .calc-search i {
            position: absolute;
            left: 15px;
            top: 16px;
            color: #98A2B3
        }

        .xfspl-calculators .calc-search input {
            width: 100%;
            height: 48px;
            padding: 0 15px 0 43px;
            border: 1px solid var(--border);
            border-radius: 9px;
            background: #fff;
            outline: none;
            font-size: 14px;
            color: var(--text)
        }

            .xfspl-calculators .calc-search input:focus {
                border-color: var(--blue);
                box-shadow: 0 0 0 3px rgba(21,87,176,.08)
            }

    .xfspl-calculators .calc-filters {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 7px
    }

        .xfspl-calculators .calc-filters button {
            min-height: 38px;
            padding: 0 13px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: #fff;
            color: #475467;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer
        }

            .xfspl-calculators .calc-filters button.active,
            .xfspl-calculators .calc-filters button:hover {
                background: var(--navy);
                border-color: var(--navy);
                color: #fff
            }

    /* CARDS */
    .xfspl-calculators .calculator-grid {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 17px
    }

    .xfspl-calculators .calculator-card {
        min-width: 0;
        min-height: 190px;
        display: flex;
        flex-direction: column;
        padding: 20px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: #fff;
        cursor: pointer;
        box-shadow: 0 5px 18px rgba(11,31,58,.035);
        transition: .2s ease;
        outline: none
    }

        .xfspl-calculators .calculator-card:hover,
        .xfspl-calculators .calculator-card:focus {
            transform: translateY(-4px);
            border-color: #B8C7DA;
            box-shadow: 0 15px 32px rgba(11,31,58,.09)
        }

    .xfspl-calculators .calc-card-icon {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        margin-bottom: 15px;
        border-radius: 11px;
        background: var(--blue-light);
        color: var(--blue);
        font-size: 18px
    }

    .xfspl-calculators .calculator-card h3 {
        margin: 0 0 7px;
        color: var(--navy);
        font: 800 17px/1.25 Manrope,sans-serif
    }

    .xfspl-calculators .calculator-card p {
        margin: 0 0 16px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.6
    }

    .xfspl-calculators .calc-card-bottom {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 7px
    }

    .xfspl-calculators .calc-category {
        padding: 5px 8px;
        border-radius: 5px;
        background: #F4F6F8;
        color: #667085;
        font-size: 9px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .4px
    }

    .xfspl-calculators .calc-open {
        color: var(--blue);
        font-size: 12px;
        font-weight: 850
    }

    .xfspl-calculators .no-calculator {
        text-align: center;
        padding: 60px 20px;
        color: var(--muted)
    }

        .xfspl-calculators .no-calculator i {
            font-size: 34px;
            color: #98A2B3
        }

        .xfspl-calculators .no-calculator h3 {
            margin: 13px 0 5px;
            color: var(--navy)
        }

    /* WORKSPACE */
    .xfspl-calculators .calc-workspace {
        background: #fff;
        border-top: 1px solid var(--border)
    }

    .xfspl-calculators .calculator-panel {
        max-width: 980px;
        margin: auto;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 15px 45px rgba(11,31,58,.07)
    }

    .xfspl-calculators .calculator-placeholder {
        text-align: center;
        padding: 75px 20px
    }

    .xfspl-calculators .placeholder-icon {
        width: 70px;
        height: 70px;
        display: grid;
        place-items: center;
        margin: 0 auto 18px;
        border-radius: 18px;
        background: var(--blue-light);
        color: var(--blue);
        font-size: 27px
    }

    .xfspl-calculators .calculator-placeholder h3 {
        margin: 0 0 7px;
        color: var(--navy);
        font: 800 24px Manrope,sans-serif
    }

    .xfspl-calculators .calculator-placeholder p {
        margin: 0;
        color: var(--muted)
    }

    .xfspl-calculators .calc-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 22px 27px;
        background: var(--navy);
        color: #fff
    }

    .xfspl-calculators .calc-panel-title {
        display: flex;
        align-items: center;
        gap: 13px;
        min-width: 0
    }

        .xfspl-calculators .calc-panel-title .calc-card-icon {
            flex: 0 0 auto;
            margin: 0;
            background: rgba(255,255,255,.1);
            color: var(--gold)
        }

        .xfspl-calculators .calc-panel-title h3 {
            margin: 0 0 4px;
            color: #fff;
            font: 800 21px Manrope,sans-serif
        }

        .xfspl-calculators .calc-panel-title p {
            margin: 0;
            color: rgba(255,255,255,.66);
            font-size: 11px
        }

    .xfspl-calculators .calc-close {
        border: 0;
        background: none;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        min-width: 44px;
        min-height: 44px
    }

    .xfspl-calculators .calc-panel-body {
        padding: 28px
    }

    .xfspl-calculators .calc-form-grid {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 18px
    }

    .xfspl-calculators .calc-field label {
        display: block;
        margin-bottom: 7px;
        color: #344054;
        font-size: 12px;
        font-weight: 800
    }

    .xfspl-calculators .calc-field input,
    .xfspl-calculators .calc-field select {
        width: 100%;
        height: 46px;
        padding: 0 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #fff;
        color: var(--text);
        font-size: 14px;
        outline: none
    }

        .xfspl-calculators .calc-field input:focus,
        .xfspl-calculators .calc-field select:focus {
            border-color: var(--blue);
            box-shadow: 0 0 0 3px rgba(21,87,176,.08)
        }

    .xfspl-calculators .calc-field small {
        display: block;
        margin-top: 5px;
        color: #98A2B3;
        font-size: 10px
    }

    .xfspl-calculators .calc-full {
        grid-column: 1/-1
    }

    .xfspl-calculators .calc-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 23px
    }

    .xfspl-calculators .calc-run-btn,
    .xfspl-calculators .calc-reset-btn {
        min-height: 46px;
        padding: 0 20px;
        border-radius: 8px;
        font-weight: 850;
        cursor: pointer
    }

    .xfspl-calculators .calc-run-btn {
        border: 0;
        background: var(--gold);
        color: #172033
    }

    .xfspl-calculators .calc-reset-btn {
        border: 1px solid var(--border);
        background: #fff;
        color: #475467
    }

    .xfspl-calculators .calc-result {
        margin-top: 24px;
        padding: 21px;
        border: 1px solid var(--border);
        border-radius: 13px;
        background: #F7F9FC
    }

    .xfspl-calculators .calc-result-main span {
        display: block;
        color: #667085;
        font-size: 11px;
        font-weight: 750
    }

    .xfspl-calculators .calc-result-main strong {
        display: block;
        margin-top: 4px;
        color: var(--navy);
        font: 850 30px Manrope,sans-serif
    }

    .xfspl-calculators .calc-result-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 10px;
        margin-top: 16px
    }

    .xfspl-calculators .calc-result-item {
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: #fff
    }

        .xfspl-calculators .calc-result-item span {
            display: block;
            margin-bottom: 4px;
            color: #667085;
            font-size: 10px
        }

        .xfspl-calculators .calc-result-item strong {
            font-size: 14px;
            color: var(--text)
        }

    .xfspl-calculators .calc-result-note {
        margin-top: 12px;
        color: #667085;
        font-size: 11px;
        line-height: 1.6
    }

    /* CTA + DISCLAIMER */
    .xfspl-calculators .calc-cta {
        padding: 0 0 65px;
        background: #fff
    }

    .xfspl-calculators .calc-cta-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        padding: 32px;
        border-radius: 17px;
        background: var(--navy);
        color: #fff
    }

        .xfspl-calculators .calc-cta-box > div {
            min-width: 0
        }

        .xfspl-calculators .calc-cta-box span {
            color: var(--gold);
            font-size: 11px;
            font-weight: 850;
            letter-spacing: 1.4px
        }

        .xfspl-calculators .calc-cta-box h2 {
            margin: 7px 0 7px;
            color: #fff;
            font: 800 25px/1.25 Manrope,sans-serif
        }

        .xfspl-calculators .calc-cta-box p {
            max-width: 680px;
            margin: 0;
            color: rgba(255,255,255,.68);
            font-size: 13px;
            line-height: 1.6
        }

    .xfspl-calculators .disclaimer-box {
        display: flex;
        gap: 12px;
        padding: 18px 20px;
        border: 1px solid #E7EAF0;
        border-radius: 11px;
        background: #FBFCFE;
        color: #667085;
        font-size: 11px;
        line-height: 1.65
    }

        .xfspl-calculators .disclaimer-box i {
            flex: 0 0 auto;
            color: var(--blue);
            font-size: 16px;
            margin-top: 2px
        }

        .xfspl-calculators .disclaimer-box p {
            margin: 0
        }

        .xfspl-calculators .disclaimer-box strong {
            color: #344054
        }

@media(max-width:1199px) {
    .xfspl-calculators .calculator-grid {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width:991px) {
    .xfspl-calculators .calc-hero {
        padding: 65px 0
    }

    .xfspl-calculators .calc-hero-grid {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .xfspl-calculators .calc-hero-visual {
        max-width: 650px
    }

    .xfspl-calculators .calc-toolbar {
        flex-direction: column
    }

    .xfspl-calculators .calc-search {
        width: 100%;
        flex-basis: auto
    }

    .xfspl-calculators .calc-filters {
        justify-content: flex-start
    }

    .xfspl-calculators .calculator-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .xfspl-calculators .calc-trust-grid {
        grid-template-columns: repeat(2,1fr)
    }

        .xfspl-calculators .calc-trust-grid div:nth-child(2) {
            border-right: 0
        }

        .xfspl-calculators .calc-trust-grid div:nth-child(-n+2) {
            border-bottom: 1px solid var(--border)
        }
}

@media(max-width:767px) {
    .xfspl-calculators .container {
        padding: 0 15px
    }

    .xfspl-calculators .section-pad {
        padding: 55px 0
    }

    .xfspl-calculators .calc-hero {
        padding: 52px 0 58px
    }

        .xfspl-calculators .calc-hero h1 {
            font-size: 40px
        }

        .xfspl-calculators .calc-hero p {
            font-size: 15px;
            line-height: 1.7
        }

    .xfspl-calculators .calc-hero-actions {
        flex-direction: column
    }

    .xfspl-calculators .calc-btn {
        width: 100%
    }

    .xfspl-calculators .calc-hero-visual {
        display: none
    }

    .xfspl-calculators .calculator-grid {
        grid-template-columns: 1fr
    }

    .xfspl-calculators .calc-form-grid {
        grid-template-columns: 1fr
    }

    .xfspl-calculators .calc-panel-head {
        padding: 17px 15px
    }

    .xfspl-calculators .calc-panel-body {
        padding: 18px 15px
    }

    .xfspl-calculators .calc-result-grid {
        grid-template-columns: 1fr 1fr
    }

    .xfspl-calculators .calc-cta-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px
    }

        .xfspl-calculators .calc-cta-box .calc-btn {
            width: auto
        }
}

@media(max-width:480px) {
    .xfspl-calculators .calc-hero h1 {
        font-size: 34px
    }

    .xfspl-calculators .calc-trust-grid div {
        min-height: 54px;
        padding: 10px 5px;
        font-size: 10px;
        text-align: center
    }

    .xfspl-calculators .calc-filters {
        gap: 6px
    }

        .xfspl-calculators .calc-filters button {
            font-size: 10px;
            padding: 0 10px
        }

    .xfspl-calculators .calc-result-grid {
        grid-template-columns: 1fr
    }

    .xfspl-calculators .calc-result-main strong {
        font-size: 26px
    }

    .xfspl-calculators .calc-cta-box h2 {
        font-size: 21px
    }
}


.xfspl-calculators .calculator-panel {
    scroll-margin-top: 100px;
}

.xfspl-calculators #calculator-library {
    scroll-margin-top: 100px;
}