/* CRM-specific layout and illustration styles, scoped to this page. */
.crm-page {
    --navy: #12223f;
    --ink: #20314e;
    --muted: #61708a;
    --blue: #3F72AF;
    --light: #eef4ff;
    --line: #dce5f1;
    --white: #fff;
    --green: #0b876b;
}

.crm-page {
    margin: 0;
    color: var(--ink);
    line-height: 1.6;
    background: #fff;
}

.crm-page .crm-footer {
    background: #0d1c37;
    color: #cad6e9;
    padding: 26px 0;
    font-size: .86rem;
}

.crm-page .crm-footer a {
    color: #fff;
}

    .crm-page a:focus-visible {
        outline: 3px solid #f8ad34;
        outline-offset: 4px;
    }

    .crm-page .eyebrow {
        color: var(--blue);
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        font-size: .75rem;
    }

    .crm-page .hero {
        overflow: hidden;
        background: linear-gradient(130deg,#f6f9ff 0%,#ecf3ff 55%,#f9fcff 100%);
        padding: 82px 0 90px;
    }

    .crm-page .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
        align-items: center;
        gap: 70px;
    }

    .crm-page .hero h1 {
        font-size: clamp(2.6rem,5vw,4.7rem);
        line-height: 1.1;
        letter-spacing: -.05em;
        color: var(--navy);
        margin: 17px 0 23px;
    }

        .crm-page .hero h1 span {
            color: var(--blue);
        }

    .crm-page .lead {
        font-size: 1.17rem;
        color: #4c5d77;
        max-width: 590px;
        margin: 0 0 27px;
    }

    .crm-page .actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .crm-page .micro {
        color: var(--muted);
        font-size: .87rem;
        margin: 17px 0 0;
    }

    .crm-page .preview {
        background: #fff;
        border: 1px solid #d8e4f8;
        border-radius: 20px;
        box-shadow: 0 24px 65px #1c4b9c1c;
        overflow: hidden;
        transform: rotate(1deg);
    }

    .crm-page .preview-top {
        padding: 17px 20px;
        border-bottom: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .crm-page .preview-top strong {
            color: var(--navy);
        }

    .crm-page .dots {
        display: flex;
        gap: 5px;
    }

        .crm-page .dots i {
            width: 7px;
            height: 7px;
            background: #aec2e7;
            border-radius: 50%;
        }

    .crm-page .preview-body {
        padding: 22px;
    }

    .crm-page .statrow {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 11px;
    }

    .crm-page .stat {
        background: #f4f7fd;
        border-radius: 12px;
        padding: 13px;
    }

        .crm-page .stat b {
            display: block;
            color: var(--navy);
            font-size: 1rem;
        }

        .crm-page .stat small {
            color: var(--muted);
        }

    .crm-page .kanban {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 10px;
        margin-top: 16px;
    }

    .crm-page .lane {
        background: #f4f7fd;
        border-radius: 12px;
        padding: 11px;
        min-height: 165px;
    }

        .crm-page .lane h3 {
            font-size: .75rem;
            margin: 0 0 10px;
            color: #566a8a;
        }

    .crm-page .ticket {
        background: #fff;
        border: 1px solid #e4ebf5;
        border-radius: 9px;
        padding: 10px 9px;
        margin-bottom: 8px;
        font-size: .75rem;
        line-height: 1.3;
        box-shadow: 0 3px 8px #20314e08;
    }

        .crm-page .ticket i {
            display: block;
            width: 55%;
            height: 5px;
            background: #c6d8ff;
            border-radius: 6px;
            margin-top: 9px;
        }

        .crm-page .ticket.green i {
            background: #a4dfcf;
        }

    .crm-page .ribbon {
        border-top: 1px solid #e6edfa;
        margin-top: 17px;
        padding-top: 13px;
        color: #546985;
        font-size: .75rem;
    }

        .crm-page .ribbon b {
            color: var(--blue);
        }

    .crm-page section {
        padding: 84px 0;
    }

    .crm-page .section-head {
        max-width: 760px;
        margin-bottom: 34px;
    }

        .crm-page .section-head h2 {
            font-size: clamp(2rem,3.4vw,3rem);
            line-height: 1.18;
            letter-spacing: -.035em;
            color: var(--navy);
            margin: 10px 0 14px;
        }

        .crm-page .section-head p {
            color: var(--muted);
            margin: 0;
            font-size: 1.06rem;
        }

    .crm-page .journey {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 15px;
    }

    .crm-page .step {
        padding: 24px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
    }

        .crm-page .step .num {
            display: inline-grid;
            place-items: center;
            background: var(--light);
            color: var(--blue);
            width: 34px;
            height: 34px;
            border-radius: 9px;
            font-weight: 800;
        }

        .crm-page .step h3 {
            font-size: 1.08rem;
            line-height: 1.25;
            color: var(--navy);
            margin: 17px 0 7px;
        }

        .crm-page .step p {
            color: var(--muted);
            font-size: .93rem;
            margin: 0;
        }

    .crm-page .tint {
        background: #f6f9ff;
    }

    .crm-page #features {
        background: #FDF3E8;
    }

    .crm-page .feature-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 16px;
    }

    .crm-page .feature {
        padding: 23px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
    }

        .crm-page .feature .icon {
            display: inline-grid;
            place-items: center;
            width: 42px;
            height: 42px;
            border-radius: 11px;
            background: #eaf1ff;
            color: var(--blue);
            font-size: 1.25rem;
            font-weight: 800;
        }

        .crm-page .feature h3 {
            color: var(--navy);
            margin: 17px 0 7px;
            font-size: 1.08rem;
        }

        .crm-page .feature p {
            color: var(--muted);
            margin: 0;
            font-size: .94rem;
        }

        .crm-page .feature a {
            color: var(--blue);
        }

    .crm-page .feature-note {
        margin-top: 23px;
        color: #526781;
        background: #eaf1ff;
        border-left: 4px solid var(--blue);
        padding: 16px 20px;
        border-radius: 0 9px 9px 0;
    }

    .crm-page .split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 70px;
        align-items: center;
    }

        .crm-page .split h2 {
            font-size: clamp(2rem,3.4vw,3rem);
            line-height: 1.2;
            color: var(--navy);
            letter-spacing: -.035em;
        }

        .crm-page .split p {
            color: var(--muted);
        }

    .crm-page .bullets {
        padding-left: 20px;
    }

        .crm-page .bullets li {
            margin-bottom: 10px;
        }

    .crm-page .panel {
        background: #f3f7ff;
        border-radius: 20px;
        padding: 30px;
        border: 1px solid #d9e6ff;
    }

        .crm-page .panel strong {
            color: var(--navy);
        }

        .crm-page .panel ol {
            padding-left: 21px;
            margin-bottom: 0;
        }

        .crm-page .panel li {
            padding: 9px 0;
            border-bottom: 1px solid #dbe6f7;
        }

            .crm-page .panel li:last-child {
                border: 0;
            }

    .crm-page .who {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 16px;
    }

        .crm-page .who article {
            background: #fff;
            border: 1px solid var(--line);
            padding: 25px;
            border-radius: 16px;
        }

        .crm-page .who h3 {
            color: var(--navy);
            margin: 0 0 8px;
        }

        .crm-page .who p {
            color: var(--muted);
            margin: 0;
        }

    .crm-page .final {
        background: #14284e;
        color: #fff;
        padding: 68px 0;
    }

        .crm-page .final h2 {
            color: #fff;
            margin: 0 0 9px;
            font-size: clamp(2rem,3vw,2.8rem);
            line-height: 1.2;
        }

        .crm-page .final p {
            color: #d2def3;
            margin: 0;
        }

        .crm-page .final .btn {
            background: #fff;
            color: #153e98;
            flex-shrink: 0;
        }

@media(max-width:991.98px) {
    .crm-page .hero-grid,
    .crm-page .split {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .crm-page .preview {
        transform: none;
    }

    .crm-page .journey,
    .crm-page .who {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-page .feature-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:700px) {
    .crm-page .hero {
        padding: 55px 0;
    }

    .crm-page .journey,
    .crm-page .who {
        grid-template-columns: 1fr 1fr;
    }

    .crm-page .feature-grid {
        grid-template-columns: 1fr;
    }

    .crm-page section {
        padding: 62px 0;
    }

}

@media(max-width:480px) {
    .crm-page .preview-body {
        padding: 12px;
    }

    .crm-page .statrow {
        gap: 8px;
    }

    .crm-page .journey,
    .crm-page .who {
        grid-template-columns: 1fr;
    }

    .crm-page .stat {
        padding: 8px;
    }

        .crm-page .stat b {
            font-size: .9rem;
        }

    .crm-page .kanban {
        gap: 5px;
    }

    .crm-page .lane {
        padding: 6px;
    }

    .crm-page .ticket {
        padding: 6px;
        font-size: .65rem;
    }
}