/*-------------------------------------
    Marketing landing pages
    All rules are scoped under .lp so they do not collide with Bootstrap or the site theme.
-------------------------------------*/
.lp {
    --lp-bg: #f5f6f8;
    --lp-surface: #ffffff;
    --lp-ink: #171514;
    --lp-ink-soft: #4c5663;
    --lp-line: #dddddd;
    --lp-brand: #274060;
    --lp-brand-deep: #18234B;
    --lp-brand-tint: #e7ebf1;
    --lp-accent: #3d6aa6;
    --lp-good: #2e7d5b;
    --lp-font-display: "Archivo", "Archivo Narrow", system-ui, sans-serif;
    --lp-font-body: "Inter", system-ui, -apple-system, sans-serif;
    background: var(--lp-bg);
    color: var(--lp-ink);
    font-family: var(--lp-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

    .lp *, .lp *::before, .lp *::after {
        box-sizing: border-box;
    }

    .lp h1, .lp h2, .lp h3 {
        font-family: var(--lp-font-display);
        text-wrap: balance;
        line-height: 1.12;
        margin: 0;
        letter-spacing: -0.01em;
        color: inherit;
        text-transform: none;
    }

    .lp p {
        margin: 0;
    }

    .lp a:not(.lp-btn) {
        color: inherit;
    }

    .lp ul, .lp ol {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .lp ul li::before {
            content: none;
        }

    .lp .lp-band {
        width: 100%;
        padding-block: 72px;
    }

    .lp .lp-eyebrow {
        font-size: 0.72em;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--lp-brand);
        margin-bottom: 14px;
    }

    .lp .lp-section-title {
        font-size: clamp(1.6em, 4vw, 2.3em);
        font-weight: 800;
    }

    .lp .lp-section-lede {
        margin-top: 14px;
        color: var(--lp-ink-soft);
        font-size: 1.08em;
        max-width: 56ch;
    }

    /* Buttons */
    .lp .lp-btn {
        display: inline-block;
        font-family: var(--lp-font-body);
        font-weight: 700;
        font-size: 1em;
        line-height: 1.4;
        text-decoration: none;
        padding: 14px 26px;
        border-radius: 8px;
        border: 2px solid transparent;
        cursor: pointer;
    }

    .lp .lp-btn-primary {
        background: var(--lp-accent);
        color: #ffffff;
        border-color: var(--lp-accent);
    }

        .lp .lp-btn-primary:hover, .lp .lp-btn-primary:focus {
            background: var(--lp-brand);
            border-color: var(--lp-brand);
            color: #ffffff;
        }

    .lp .lp-btn-ghost {
        background: transparent;
        color: #eef1f6;
        border-color: #3b4a66;
    }

        .lp .lp-btn-ghost:hover, .lp .lp-btn-ghost:focus {
            border-color: #eef1f6;
            color: #ffffff;
        }

    /* Hero */
    .lp .lp-hero {
        background: var(--lp-brand-deep);
        color: #eef1f6;
        padding-block: 84px;
    }

        .lp .lp-hero .lp-eyebrow {
            color: #9db4d4;
        }

        .lp .lp-hero h1 {
            font-size: clamp(2.1em, 6vw, 3.5em);
            color: #ffffff;
            font-weight: 800;
            max-width: 22ch;
        }

    .lp .lp-hero-sub {
        font-size: clamp(1.05em, 2.2vw, 1.3em);
        color: #c3ccdb;
        margin-top: 20px;
        max-width: 52ch;
    }

    .lp .lp-hero-cta {
        margin-top: 32px;
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        align-items: center;
    }

    .lp .lp-hero-note {
        font-size: 0.85em;
        color: #95a3ba;
        margin-top: 18px;
    }

    /* Proof strip */
    .lp .lp-proof {
        background: var(--lp-surface);
        border-bottom: 1px solid var(--lp-line);
        padding-block: 44px;
    }

    .lp .lp-proof-head {
        text-align: center;
        color: var(--lp-ink-soft);
        font-size: 0.9em;
        font-weight: 600;
        letter-spacing: 0.04em;
        margin-bottom: 26px;
    }

    .lp .lp-logo-wall {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        max-width: 860px;
        margin: 0 auto;
    }

    .lp .lp-logo-slot {
        min-height: 72px;
        border: 1px solid var(--lp-line);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--lp-brand);
        font-family: var(--lp-font-display);
        font-weight: 700;
        font-size: 1em;
        text-align: center;
        text-decoration: none;
        padding: 10px;
        background: var(--lp-bg);
    }

    .lp a.lp-logo-slot:hover {
        border-color: var(--lp-brand);
        color: var(--lp-brand-deep);
    }

    .lp .lp-logo-slot img {
        max-height: 44px;
        max-width: 100%;
        width: auto;
        object-fit: contain;
    }

    /* Stats */
    .lp .lp-stats {
        background: var(--lp-bg);
    }

    .lp .lp-stat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 30px;
    }

    .lp .lp-stat {
        background: var(--lp-surface);
        border: 1px solid var(--lp-line);
        border-radius: 14px;
        padding: 24px;
    }

    .lp .lp-stat-num {
        font-family: var(--lp-font-display);
        font-size: 2.3em;
        font-weight: 800;
        color: var(--lp-brand);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

        .lp .lp-stat-num.lp-stat-num-sm {
            font-size: 1.9em;
        }

    .lp .lp-stat-label {
        margin-top: 10px;
        color: var(--lp-ink-soft);
        font-size: 0.92em;
    }

    .lp .lp-stats-link {
        margin-top: 22px;
        font-size: 0.95em;
        font-weight: 600;
    }

        .lp .lp-stats-link a {
            color: var(--lp-accent);
        }

    /* Comparison */
    .lp .lp-compare {
        background: var(--lp-surface);
    }

    .lp .lp-cmp-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-top: 34px;
    }

    .lp .lp-cmp-col {
        border-radius: 14px;
        padding: 26px;
        border: 1px solid var(--lp-line);
    }

    .lp .lp-cmp-them {
        background: var(--lp-bg);
    }

    .lp .lp-cmp-us {
        background: var(--lp-brand-tint);
        border-color: var(--lp-brand);
    }

    .lp .lp-cmp-col h3 {
        font-size: 1.15em;
        margin-bottom: 4px;
    }

    .lp .lp-cmp-tag {
        font-size: 0.72em;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .lp .lp-cmp-them .lp-cmp-tag {
        color: var(--lp-ink-soft);
    }

    .lp .lp-cmp-us .lp-cmp-tag {
        color: var(--lp-brand);
    }

    .lp .lp-cmp-list {
        margin-top: 18px;
        display: flex;
        flex-direction: column;
        gap: 13px;
    }

        .lp .lp-cmp-list li {
            display: flex;
            gap: 10px;
            font-size: 0.96em;
            align-items: flex-start;
        }

    .lp .lp-mark {
        flex: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 0.8em;
        font-weight: 800;
        margin-top: 2px;
    }

    .lp .lp-mark-x {
        background: #e6d2cc;
        color: #8a3a22;
    }

    .lp .lp-mark-v {
        background: var(--lp-good);
        color: #ffffff;
    }

    /* Capabilities */
    .lp .lp-caps {
        background: var(--lp-bg);
    }

    .lp .lp-cap-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 16px;
        margin-top: 34px;
    }

    .lp .lp-cap {
        background: var(--lp-surface);
        border: 1px solid var(--lp-line);
        border-radius: 12px;
        padding: 20px;
        border-top: 3px solid var(--lp-brand);
    }

        .lp .lp-cap h3 {
            font-size: 1.02em;
            margin-bottom: 7px;
            color: var(--lp-ink);
        }

            .lp .lp-cap h3 a {
                text-decoration: none;
            }

                .lp .lp-cap h3 a:hover {
                    color: var(--lp-accent);
                }

        .lp .lp-cap p {
            font-size: 0.9em;
            color: var(--lp-ink-soft);
        }

    /* Who we serve */
    .lp .lp-serve {
        background: var(--lp-surface);
    }

    .lp .lp-serve-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 18px;
        margin-top: 30px;
    }

    .lp .lp-serve-card {
        border: 1px solid var(--lp-line);
        border-radius: 14px;
        padding: 24px;
        background: var(--lp-bg);
    }

        .lp .lp-serve-card h3 {
            font-size: 1.1em;
            color: var(--lp-brand);
            margin-bottom: 8px;
        }

            .lp .lp-serve-card h3 a {
                text-decoration: none;
            }

                .lp .lp-serve-card h3 a:hover {
                    color: var(--lp-accent);
                }

        .lp .lp-serve-card p {
            font-size: 0.93em;
            color: var(--lp-ink-soft);
        }

    /* Quotes */
    .lp .lp-quote {
        background: var(--lp-brand-deep);
        color: #eef1f6;
        padding-block: 64px;
    }

        .lp .lp-quote h2 {
            font-size: clamp(1.6em, 4vw, 2.3em);
            font-weight: 800;
            color: #ffffff;
            margin-bottom: 32px;
        }

        .lp .lp-quote .lp-eyebrow {
            color: #9db4d4;
        }

    .lp .lp-quote-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 20px;
    }

    .lp .lp-qcard {
        background: rgba(255,255,255,0.05);
        border: 1px solid #34415e;
        border-radius: 14px;
        padding: 24px;
        display: flex;
        flex-direction: column;
    }

        .lp .lp-qcard blockquote {
            margin: 0;
            padding: 0;
            border: 0;
            font-family: var(--lp-font-body);
            font-size: 1em;
            font-style: normal;
            font-weight: 500;
            line-height: 1.5;
            color: #d4dae6;
            background: none;
        }

            .lp .lp-qcard blockquote::before, .lp .lp-qcard blockquote::after {
                content: none;
            }

        .lp .lp-qcard cite {
            display: block;
            margin-top: 18px;
            font-style: normal;
            font-size: 0.88em;
            color: #a6b2c8;
            font-family: var(--lp-font-body);
        }

            .lp .lp-qcard cite strong {
                color: #ffffff;
                font-weight: 700;
                display: block;
            }

    .lp .lp-retention {
        margin-top: 40px;
        padding-top: 32px;
        border-top: 1px solid #34415e;
        display: flex;
        align-items: baseline;
        gap: 18px;
        flex-wrap: wrap;
    }

    .lp .lp-retention-num {
        font-family: var(--lp-font-display);
        font-weight: 800;
        font-size: clamp(2.4em, 7vw, 3.4em);
        color: #ffffff;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .lp .lp-retention-label {
        font-size: 1.05em;
        color: #c3ccdb;
        max-width: 34ch;
    }

    /* Onboarding */
    .lp .lp-onboard {
        background: var(--lp-bg);
    }

    .lp .lp-onboard-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 40px;
        align-items: center;
    }

    .lp .lp-onboard-steps {
        margin-top: 24px;
        counter-reset: lp-step;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

        .lp .lp-onboard-steps li {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

            .lp .lp-onboard-steps li::before {
                counter-increment: lp-step;
                content: counter(lp-step);
                flex: none;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: var(--lp-brand);
                color: #ffffff;
                font-family: var(--lp-font-display);
                font-weight: 800;
                display: grid;
                place-items: center;
                font-size: 0.95em;
            }

        .lp .lp-onboard-steps strong {
            display: block;
        }

        .lp .lp-onboard-steps span {
            color: var(--lp-ink-soft);
            font-size: 0.92em;
        }

    .lp .lp-included {
        background: var(--lp-brand-tint);
        border: 1px solid var(--lp-brand);
        border-radius: 16px;
        padding: 30px;
    }

    .lp .lp-included-big {
        font-family: var(--lp-font-display);
        font-weight: 800;
        font-size: 3.2em;
        color: var(--lp-brand);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .lp .lp-included-sub {
        margin-top: 10px;
        color: var(--lp-ink);
        font-size: 1em;
        font-weight: 600;
    }

    .lp .lp-included-list {
        margin-top: 22px;
        display: flex;
        flex-direction: column;
        gap: 11px;
    }

        .lp .lp-included-list li {
            position: relative;
            padding-left: 26px;
            font-size: 0.93em;
            color: var(--lp-ink-soft);
        }

            .lp .lp-included-list li::before {
                content: "\2713";
                position: absolute;
                left: 0;
                color: var(--lp-good);
                font-weight: 800;
            }

    /* Final CTA */
    .lp .lp-final {
        background: var(--lp-brand);
        color: #ffffff;
        padding-block: 70px;
        text-align: center;
    }

        .lp .lp-final h2 {
            font-size: clamp(1.7em, 4vw, 2.5em);
            font-weight: 800;
            color: #ffffff;
        }

        .lp .lp-final p {
            margin: 16px auto 0;
            max-width: 46ch;
            font-size: 1.08em;
            color: #dfe5ee;
        }

        .lp .lp-final .lp-btn-primary {
            background: #ffffff;
            color: var(--lp-brand-deep);
            border-color: #ffffff;
            margin-top: 30px;
        }

            .lp .lp-final .lp-btn-primary:hover, .lp .lp-final .lp-btn-primary:focus {
                background: var(--lp-brand-tint);
                border-color: var(--lp-brand-tint);
            }

        .lp .lp-final .lp-contact {
            margin-top: 18px;
            font-size: 0.95em;
            font-weight: 600;
            color: #eef1f6;
        }

            .lp .lp-final .lp-contact a {
                color: #ffffff;
                text-decoration: underline;
            }

@media only screen and (max-width:767px) {
    .lp .lp-band {
        padding-block: 54px;
    }

    .lp .lp-cmp-grid, .lp .lp-onboard-grid {
        grid-template-columns: 1fr;
    }

    .lp .lp-logo-wall {
        grid-template-columns: repeat(2, 1fr);
    }
}