/* =========================================================
   CUSTOM CRM DEVELOPMENT — HERO
   ========================================================= */

.wn-crm-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 66px;
    background:
        radial-gradient(circle at 78% 42%, rgba(75, 123, 236, .10), transparent 31%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.wn-crm-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(rgba(23, 48, 84, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 48, 84, .025) 1px, transparent 1px);
    background-size: 54px 54px;
}

.wn-crm-hero .wn-wrap {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.wn-crm-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(360px, .82fr)
        minmax(600px, 1.18fr);
    gap: clamp(52px, 5vw, 82px);
    align-items: center;
}


/* =========================================================
   COPY
   ========================================================= */

.wn-crm-hero-content {
    position: relative;
    z-index: 3;
}

.wn-crm-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 23px;

    color: #4f78dd;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.wn-crm-hero-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #4f78dd;
    box-shadow: 0 0 0 5px rgba(79, 120, 221, .09);
}

.wn-crm-hero h1 {
    max-width: 650px;
    margin: 0;

    color: #0d1727;

    font-size: clamp(58px, 5.1vw, 82px);
    font-weight: 750;
    line-height: .94;
    letter-spacing: -.055em;
}

.wn-crm-hero h1 span {
    color: #5279da;
}

.wn-crm-hero-lead {
    max-width: 585px;
    margin: 25px 0 0;

    color: #5f6d7e;

    font-size: 16px;
    line-height: 1.75;
}

.wn-crm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;

    margin-top: 23px;
}

.wn-crm-hero-primary,
.wn-crm-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    min-height: 52px;
    padding: 0 19px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.wn-crm-hero-primary {
    min-width: 184px;

    color: #fff;
    border: 1px solid #17263b;
    background: #101c2d;
}

.wn-crm-hero-primary:hover {
    color: #fff;
    transform: translateY(-2px);
    background: #17263b;
}

.wn-crm-hero-secondary {
    min-width: 190px;

    color: #172235;
    border: 1px solid #d9e0e9;
    background: rgba(255, 255, 255, .72);
}

.wn-crm-hero-secondary:hover {
    color: #172235;
    transform: translateY(-2px);
    border-color: #bdc9d8;
    background: #fff;
}


/* =========================================================
   CAPABILITIES
   ========================================================= */

.wn-crm-hero-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 20px;

    margin-top: 29px;
}

.wn-crm-hero-capabilities span {
    position: relative;

    padding-left: 13px;

    color: #738092;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .045em;
}

.wn-crm-hero-capabilities span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;

    width: 4px;
    height: 4px;

    border-radius: 50%;
    background: #5b83e7;

    transform: translateY(-50%);
}


/* =========================================================
   VISUAL
   ========================================================= */

.wn-crm-hero-visual {
    position: relative;

    width: 100%;
    max-width: 730px;

    margin-left: auto;
    padding: 24px 22px 24px;
}

.wn-crm-hero-visual::before {
    content: "";
    position: absolute;
    z-index: -1;

    top: 4%;
    right: -5%;
    bottom: 0;
    left: 8%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(80, 125, 228, .13),
            rgba(80, 125, 228, .035) 43%,
            transparent 70%
        );

    filter: blur(6px);
}


/* =========================================================
   CRM APP
   ========================================================= */

.wn-crm-hero-app {
    position: relative;
    overflow: hidden;

    border: 1px solid #ccd7e5;
    border-radius: 18px;

    background: rgba(255, 255, 255, .96);

    box-shadow:
        0 28px 68px rgba(23, 43, 76, .13),
        0 8px 24px rgba(23, 43, 76, .065);
}

.wn-crm-hero-appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 68px;
    padding: 0 22px;

    border-bottom: 1px solid #e8edf3;
}

.wn-crm-hero-app-id {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wn-crm-hero-app-mark {
    width: 29px;
    height: 29px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #4778e6,
            #78a0ff
        );

    box-shadow: 0 7px 16px rgba(71, 120, 230, .22);
}

.wn-crm-hero-app-id div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-hero-app-id small,
.wn-crm-hero-main-top small,
.wn-crm-hero-contact-copy small,
.wn-crm-hero-owner small,
.wn-crm-hero-metrics small,
.wn-crm-hero-float small {
    color: #8a96a6;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

.wn-crm-hero-app-id strong {
    color: #182538;

    font-size: 12px;
    font-weight: 750;
}

.wn-crm-hero-app-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #4e7a67;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.wn-crm-hero-app-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: #52d99b;

    box-shadow: 0 0 0 5px rgba(82, 217, 155, .10);
}


/* =========================================================
   APP BODY
   ========================================================= */

.wn-crm-hero-workspace {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
}

.wn-crm-hero-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;

    padding-top: 24px;

    border-right: 1px solid #edf1f5;
    background: #fbfcfe;
}

.wn-crm-hero-sidebar span {
    position: relative;

    width: 8px;
    height: 8px;

    border: 1px solid #bac6d5;
    border-radius: 2px;
}

.wn-crm-hero-sidebar span.is-active {
    border-color: #507de7;
    background: #507de7;
}

.wn-crm-hero-sidebar span.is-active::after {
    content: "";
    position: absolute;

    top: 50%;
    left: -21px;

    width: 3px;
    height: 19px;

    border-radius: 0 3px 3px 0;
    background: #507de7;

    transform: translateY(-50%);
}

.wn-crm-hero-main {
    min-width: 0;
    padding: 24px;
}

.wn-crm-hero-main-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.wn-crm-hero-main-top > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wn-crm-hero-main-top strong {
    color: #152238;

    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.025em;
}

.wn-crm-hero-account-state {
    padding: 6px 9px;

    color: #47816a;

    border: 1px solid #d7ebe2;
    border-radius: 20px;

    background: #f5fbf8;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
}


/* =========================================================
   CONTACT
   ========================================================= */

.wn-crm-hero-contact {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;

    margin-top: 22px;
    padding: 16px;

    border: 1px solid #e6ebf2;
    border-radius: 11px;

    background: #fbfcfe;
}

.wn-crm-hero-avatar {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    color: #4d77db;

    border: 1px solid #d6e0f4;
    border-radius: 10px;

    background: #edf3ff;

    font-size: 13px;
    font-weight: 800;
}

.wn-crm-hero-contact-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-hero-contact-copy strong {
    color: #182538;

    font-size: 13px;
}

.wn-crm-hero-contact-copy span {
    overflow: hidden;

    color: #7a8798;

    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-crm-hero-owner {
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding-left: 17px;

    border-left: 1px solid #e3e8ef;
}

.wn-crm-hero-owner strong {
    color: #344154;

    font-size: 10px;
}


/* =========================================================
   METRICS
   ========================================================= */

.wn-crm-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: 13px;

    border: 1px solid #e6ebf2;
    border-radius: 10px;

    background: #fff;
}

.wn-crm-hero-metrics > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;

    padding: 13px 14px;
}

.wn-crm-hero-metrics > div + div {
    border-left: 1px solid #e6ebf2;
}

.wn-crm-hero-metrics strong {
    overflow: hidden;

    color: #29374a;

    font-size: 10px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   CUSTOMER FLOW
   ========================================================= */

.wn-crm-hero-flow {
    margin-top: 13px;
    padding: 15px;

    border: 1px solid #e6ebf2;
    border-radius: 10px;

    background: #fbfcfe;
}

.wn-crm-hero-flow-head,
.wn-crm-hero-activity-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 15px;
}

.wn-crm-hero-flow-head span,
.wn-crm-hero-activity-head span {
    color: #68778a;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-hero-flow-head small,
.wn-crm-hero-activity-head small {
    color: #a1aab6;

    font-size: 9px;
}

.wn-crm-hero-flow-track {
    display: grid;
    grid-template-columns:
        auto minmax(18px, 1fr)
        auto minmax(18px, 1fr)
        auto minmax(18px, 1fr)
        auto;
    align-items: start;
}

.wn-crm-hero-flow-track > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    color: #9aa4b1;

    font-size: 9px;
    font-weight: 700;
}

.wn-crm-hero-flow-track i {
    display: grid;
    place-items: center;

    width: 25px;
    height: 25px;

    border: 1px solid #d8e0e9;
    border-radius: 50%;

    background: #fff;

    font-size: 9px;
    font-style: normal;
}

.wn-crm-hero-flow-track b {
    height: 1px;
    margin-top: 12px;

    background: #dfe5ed;
}

.wn-crm-hero-flow-track .is-complete {
    color: #63768f;
}

.wn-crm-hero-flow-track .is-complete i {
    color: #fff;
    border-color: #6b8ee6;
    background: #6b8ee6;
}

.wn-crm-hero-flow-track .is-current {
    color: #315fca;
}

.wn-crm-hero-flow-track .is-current i {
    color: #416fd8;
    border-color: #7b9bed;
    background: #eef3ff;

    box-shadow: 0 0 0 4px rgba(79, 123, 228, .08);
}


/* =========================================================
   ACTIVITY
   ========================================================= */

.wn-crm-hero-activity {
    margin-top: 13px;
    padding: 15px;

    border: 1px solid #e6ebf2;
    border-radius: 10px;

    background: #fff;
}

.wn-crm-hero-event {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;

    padding: 9px 0;
}

.wn-crm-hero-event + .wn-crm-hero-event {
    border-top: 1px solid #eef1f5;
}

.wn-crm-hero-event > i {
    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: #668be5;
}

.wn-crm-hero-event div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.wn-crm-hero-event strong {
    color: #2c394c;

    font-size: 9px;
}

.wn-crm-hero-event span,
.wn-crm-hero-event time {
    color: #929daa;

    font-size: 9px;
}


/* =========================================================
   FLOATING EVENTS
   ========================================================= */

.wn-crm-hero-float {
    position: absolute;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 12px 14px;

    border: 1px solid #dde5ee;
    border-radius: 11px;

    background: rgba(255, 255, 255, .97);

    box-shadow: 0 16px 35px rgba(23, 43, 76, .11);
}

.wn-crm-hero-float > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-hero-float strong {
    color: #233146;

    font-size: 10px;
}

.wn-crm-hero-float--lead {
    top: 9px;
    right: 0;
}

.wn-crm-hero-float--action {
    right: -8px;
    bottom: 80px;
}

.wn-crm-hero-float-icon {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    color: #fff;

    border-radius: 8px;
    background: #527ee4;

    font-size: 16px;
}

.wn-crm-hero-float-check {
    display: grid;
    place-items: center;

    width: 18px;
    height: 18px;

    color: #3f936e;

    border-radius: 50%;
    background: #eaf8f1;

    font-size: 9px;
}

.wn-crm-hero-float-pulse {
    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #5bd39b;

    box-shadow: 0 0 0 6px rgba(91, 211, 155, .11);
}


/* =========================================================
   VISUAL FOOT
   ========================================================= */

.wn-crm-hero-visual-foot {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 20px;
}

.wn-crm-hero-visual-foot span {
    color: #8592a3;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-hero-visual-foot i {
    width: 36px;
    height: 1px;
    margin: 0 9px;

    background: #d4dce7;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .wn-crm-hero .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-crm-hero {
        padding: 92px 0 88px;
    }

    .wn-crm-hero-grid {
        grid-template-columns:
            minmax(310px, .8fr)
            minmax(500px, 1.2fr);

        gap: 42px;
    }

    .wn-crm-hero h1 {
        font-size: clamp(52px, 5.5vw, 66px);
    }

    .wn-crm-hero-visual {
        padding-right: 0;
        padding-left: 0;
    }

}


/* =========================================================
   STACKED
   ========================================================= */

@media (max-width: 900px) {

    .wn-crm-hero .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-crm-hero {
        padding: 72px 0 68px;
    }

    .wn-crm-hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .wn-crm-hero-content {
        max-width: 700px;
    }

    .wn-crm-hero h1 {
        max-width: 700px;
        font-size: clamp(52px, 8vw, 68px);
    }

    .wn-crm-hero-visual {
        width: min(100%, 720px);
        margin: 0 auto;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .wn-crm-hero .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-crm-hero {
        padding: 52px 0 48px;
    }

    .wn-crm-hero::before {
        background-size: 34px 34px;
    }

    .wn-crm-hero-grid {
        gap: 30px;
    }

    .wn-crm-hero-kicker {
        margin-bottom: 16px;

        font-size: 9px;
        letter-spacing: .15em;
    }

    .wn-crm-hero h1 {
        font-size: clamp(40px, 12.5vw, 54px);
        line-height: .96;
        letter-spacing: -.05em;
    }

    .wn-crm-hero h1 br {
        display: none;
    }

    .wn-crm-hero-lead {
        margin-top: 18px;

        font-size: 14px;
        line-height: 1.62;
    }

    .wn-crm-hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;

        margin-top: 23px;
    }

    .wn-crm-hero-primary,
    .wn-crm-hero-secondary {
        min-width: 0;
        min-height: 47px;
        gap: 10px;

        padding: 0 13px;

        font-size: 11px;
    }

    .wn-crm-hero-capabilities {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 14px;

        margin-top: 20px;
    }

    .wn-crm-hero-capabilities span {
        font-size: 9px;
    }


    /* VISUAL */

    .wn-crm-hero-visual {
        width: 100%;
        padding: 16px 0 28px;
    }

    .wn-crm-hero-app {
        border-radius: 13px;
    }

    .wn-crm-hero-appbar {
        min-height: 54px;
        padding: 0 13px;
    }

    .wn-crm-hero-app-mark {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }

    .wn-crm-hero-app-id strong {
        font-size: 10px;
    }

    .wn-crm-hero-workspace {
        grid-template-columns: 31px minmax(0, 1fr);
    }

    .wn-crm-hero-sidebar {
        gap: 13px;
        padding-top: 18px;
    }

    .wn-crm-hero-sidebar span {
        width: 6px;
        height: 6px;
    }

    .wn-crm-hero-sidebar span.is-active::after {
        left: -13px;
        height: 15px;
    }

    .wn-crm-hero-main {
        padding: 14px 11px 13px;
    }

    .wn-crm-hero-main-top strong {
        font-size: 16px;
    }

    .wn-crm-hero-contact {
        grid-template-columns: 39px minmax(0, 1fr);
        gap: 10px;

        margin-top: 14px;
        padding: 11px;
    }

    .wn-crm-hero-avatar {
        width: 39px;
        height: 39px;
    }

    .wn-crm-hero-owner {
        grid-column: 2;

        padding: 8px 0 0;

        border-top: 1px solid #e5eaf0;
        border-left: 0;
    }

    .wn-crm-hero-metrics > div {
        padding: 10px 7px;
    }

    .wn-crm-hero-metrics small {
        font-size: 9px;
    }

    .wn-crm-hero-metrics strong {
        font-size: 9px;
    }

    .wn-crm-hero-flow {
        padding: 12px 9px;
    }

    .wn-crm-hero-flow-head {
        margin-bottom: 12px;
    }

    .wn-crm-hero-flow-track > div {
        font-size: 9px;
    }

    .wn-crm-hero-flow-track i {
        width: 21px;
        height: 21px;

        font-size: 9px;
    }

    .wn-crm-hero-flow-track b {
        margin-top: 10px;
    }

    .wn-crm-hero-activity {
        padding: 12px 10px;
    }

    .wn-crm-hero-event time {
        display: none;
    }

    .wn-crm-hero-float--lead {
        top: 0;
        right: 8px;

        transform: scale(.82);
        transform-origin: right top;
    }

    .wn-crm-hero-float--action {
        display: none;
    }

    .wn-crm-hero-visual-foot {
        margin-top: 15px;
    }

    .wn-crm-hero-visual-foot i {
        width: 13px;
        margin: 0 5px;
    }

    .wn-crm-hero-visual-foot span {
        font-size: 9px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .wn-crm-hero .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-crm-hero {
        padding-top: 44px;
    }

    .wn-crm-hero h1 {
        font-size: 39px;
    }

    .wn-crm-hero-actions {
        grid-template-columns: 1fr;
    }

    .wn-crm-hero-primary,
    .wn-crm-hero-secondary {
        width: 100%;
    }

    .wn-crm-hero-float--lead {
        display: none;
    }

    .wn-crm-hero-visual {
        padding-top: 0;
    }

}
/* =========================================================
   CUSTOM CRM DEVELOPMENT
   01 — BUSINESS FIT
   ========================================================= */

.wn-crm-fit {
    position: relative;
    overflow: hidden;

    padding: 112px 0 104px;

    color: #fff;
    background:
        radial-gradient(
            circle at 77% 44%,
            rgba(75, 123, 236, .12),
            transparent 32%
        ),
        #071521;
}

.wn-crm-fit::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 18%,
            #000 82%,
            transparent
        );
}

.wn-crm-fit .wn-wrap {
    position: relative;
    z-index: 2;

    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   HEAD
   ========================================================= */

.wn-crm-fit-head {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
    gap: clamp(70px, 9vw, 140px);
    align-items: end;
}

.wn-crm-section-kicker--dark {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 0 0 23px;

    color: #7898e8;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.wn-crm-section-kicker--dark span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    color: #9db6f3;

    border: 1px solid rgba(126, 158, 235, .28);
    border-radius: 50%;

    font-size: 9px;
    letter-spacing: .06em;
}

.wn-crm-fit h2 {
    max-width: 790px;
    margin: 0;

    color: #f4f7fb;

    font-size: clamp(48px, 4.5vw, 68px);
    font-weight: 720;
    line-height: 1;
    letter-spacing: -.048em;
}

.wn-crm-fit h2 span {
    color: #668ce8;
}

.wn-crm-fit-intro {
    max-width: 470px;
    padding-bottom: 5px;
}

.wn-crm-fit-intro p {
    margin: 0;

    color: #8fa0b2;

    font-size: 14px;
    line-height: 1.75;
}

.wn-crm-fit-intro p + p {
    margin-top: 15px;
}

.wn-crm-fit-intro strong {
    color: #dfe8f3;
    font-weight: 650;
}


/* =========================================================
   COMPARISON STAGE
   ========================================================= */

.wn-crm-fit-stage {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        100px
        minmax(0, 1fr);
    gap: 27px;
    align-items: stretch;

    margin-top: 75px;
}

.wn-crm-fit-side {
    position: relative;
    min-width: 0;

    padding: 30px;

    border: 1px solid rgba(154, 176, 202, .13);
    border-radius: 15px;

    background: rgba(10, 28, 43, .76);
}

.wn-crm-fit-side--generic {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .022),
            rgba(255, 255, 255, .006)
        ),
        #0a1926;
}

.wn-crm-fit-side--custom {
    border-color: rgba(100, 139, 231, .25);

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(84, 126, 226, .12),
            transparent 36%
        ),
        #0a1928;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

.wn-crm-fit-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding-bottom: 21px;

    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.wn-crm-fit-side-head span {
    color: #dce6f2;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

.wn-crm-fit-side-head small {
    color: #60758a;

    font-size: 9px;
}


/* =========================================================
   GENERIC / RIGID FLOW
   ========================================================= */

.wn-crm-fit-rigid {
    display: grid;
    grid-template-columns:
        auto minmax(15px, 1fr)
        auto minmax(15px, 1fr)
        auto minmax(15px, 1fr)
        auto;
    align-items: center;

    margin-top: 29px;
    padding: 22px 17px;

    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 9px;

    background: rgba(255, 255, 255, .018);
}

.wn-crm-fit-rigid-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.wn-crm-fit-rigid-step span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    color: #718398;

    border: 1px solid #304153;
    border-radius: 50%;

    background: #0d1c2a;

    font-size: 9px;
    font-weight: 800;
}

.wn-crm-fit-rigid-step strong {
    color: #7e90a3;

    font-size: 9px;
    font-weight: 700;
}

.wn-crm-fit-rigid > i {
    height: 1px;

    background: #26394b;
}


/* =========================================================
   FRICTION
   ========================================================= */

.wn-crm-fit-friction {
    margin-top: 20px;
}

.wn-crm-fit-friction-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 13px;

    padding: 14px 0;
}

.wn-crm-fit-friction-item + .wn-crm-fit-friction-item {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.wn-crm-fit-friction-icon {
    display: grid;
    place-items: center;

    width: 26px;
    height: 26px;

    color: #d78080;

    border: 1px solid rgba(202, 107, 107, .18);
    border-radius: 7px;

    background: rgba(202, 107, 107, .055);

    font-size: 14px;
}

.wn-crm-fit-friction-item div {
    min-width: 0;
}

.wn-crm-fit-friction-item strong {
    display: block;

    color: #c0ccd9;

    font-size: 11px;
    font-weight: 650;
    line-height: 1.4;
}

.wn-crm-fit-friction-item p {
    margin: 4px 0 0;

    color: #65798e;

    font-size: 9px;
    line-height: 1.55;
}


/* =========================================================
   CENTRE SWITCH
   ========================================================= */

.wn-crm-fit-switch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
}

.wn-crm-fit-switch-line {
    width: 1px;
    flex: 1 1 auto;

    min-height: 55px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(105, 143, 232, .34),
            transparent
        );
}

.wn-crm-fit-switch-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;
    margin: 14px 0 12px;

    border: 1px solid rgba(104, 144, 237, .30);
    border-radius: 50%;

    background: #0c1c2c;

    box-shadow:
        0 0 0 8px rgba(77, 119, 218, .035),
        0 0 38px rgba(77, 119, 218, .10);
}

.wn-crm-fit-switch-core span {
    color: #6788d8;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

.wn-crm-fit-switch-core strong {
    margin-top: 2px;

    color: #86a4ec;

    font-size: 17px;
    font-weight: 400;
}

.wn-crm-fit-switch > small {
    margin-bottom: 12px;

    color: #50677d;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-align: center;
}


/* =========================================================
   CUSTOM FLOW
   ========================================================= */

.wn-crm-fit-custom-flow {
    margin-top: 29px;
    padding: 22px;

    border: 1px solid rgba(108, 145, 230, .14);
    border-radius: 10px;

    background: rgba(7, 21, 34, .45);
}

.wn-crm-fit-flow-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.wn-crm-fit-flow-row > b {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(102, 139, 226, .2),
            rgba(102, 139, 226, .75),
            rgba(102, 139, 226, .2)
        );
}

.wn-crm-fit-flow-node {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 11px;
    align-items: center;

    min-width: 0;
    padding: 12px;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;

    background: rgba(255, 255, 255, .025);
}

.wn-crm-fit-flow-node > span {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    color: #708398;

    border: 1px solid #33485d;
    border-radius: 7px;

    font-size: 9px;
    font-weight: 800;
}

.wn-crm-fit-flow-node > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-fit-flow-node small {
    color: #536b82;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
}

.wn-crm-fit-flow-node strong {
    overflow: hidden;

    color: #b9c8d8;

    font-size: 9px;
    font-weight: 650;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-crm-fit-flow-node.is-blue {
    border-color: rgba(89, 132, 233, .30);
    background: rgba(78, 121, 223, .07);
}

.wn-crm-fit-flow-node.is-blue > span {
    color: #9bb5f3;
    border-color: rgba(94, 138, 239, .43);
    background: rgba(79, 123, 226, .12);
}

.wn-crm-fit-flow-node.is-green {
    border-color: rgba(80, 185, 143, .20);
}

.wn-crm-fit-flow-node.is-green > span {
    color: #72c7a3;
    border-color: rgba(80, 185, 143, .27);
    background: rgba(80, 185, 143, .07);
}


/* =========================================================
   FLOW BRANCH
   ========================================================= */

.wn-crm-fit-flow-branch {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;

    min-height: 66px;
    padding-right: 14%;
}

.wn-crm-fit-flow-branch > i {
    justify-self: center;

    width: 1px;
    height: 43px;

    background:
        linear-gradient(
            #426493,
            rgba(66, 100, 147, .15)
        );
}

.wn-crm-fit-flow-branch > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.wn-crm-fit-flow-branch span {
    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: #5c84df;

    box-shadow: 0 0 0 5px rgba(92, 132, 223, .07);
}

.wn-crm-fit-flow-branch small {
    color: #58718a;

    font-size: 9px;
}


/* =========================================================
   CUSTOM META
   ========================================================= */

.wn-crm-fit-custom-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: 20px;

    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 8px;
}

.wn-crm-fit-custom-meta > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;

    padding: 13px;
}

.wn-crm-fit-custom-meta > div + div {
    border-left: 1px solid rgba(255, 255, 255, .07);
}

.wn-crm-fit-custom-meta small {
    color: #526a81;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-fit-custom-meta strong {
    color: #b6c6d7;

    font-size: 9px;
    font-weight: 650;
}


/* =========================================================
   BOTTOM STATEMENT
   ========================================================= */

.wn-crm-fit-bottom {
    display: grid;
    grid-template-columns: 70px minmax(350px, .9fr) minmax(320px, .65fr);
    gap: 30px;
    align-items: center;

    margin-top: 70px;
    padding-top: 36px;

    border-top: 1px solid rgba(255, 255, 255, .09);
}

.wn-crm-fit-bottom-number {
    color: rgba(114, 146, 218, .24);

    font-size: 48px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.06em;
}

.wn-crm-fit-bottom-copy > span {
    color: #6584ce;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

.wn-crm-fit-bottom h3 {
    margin: 7px 0 0;

    color: #d8e1eb;

    font-size: 20px;
    font-weight: 450;
    line-height: 1.35;
    letter-spacing: -.018em;
}

.wn-crm-fit-bottom h3 strong {
    color: #7195ea;
    font-weight: 650;
}

.wn-crm-fit-bottom > p {
    max-width: 470px;
    margin: 0 0 0 auto;

    color: #72869b;

    font-size: 11px;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE — 1100
   ========================================================= */

@media (max-width: 1100px) {

    .wn-crm-fit .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-crm-fit {
        padding: 94px 0 90px;
    }

    .wn-crm-fit-head {
        gap: 55px;
    }

    .wn-crm-fit-stage {
        grid-template-columns:
            minmax(0, 1fr)
            72px
            minmax(0, 1fr);

        gap: 18px;
    }

    .wn-crm-fit-side {
        padding: 23px;
    }

    .wn-crm-fit-flow-row {
        grid-template-columns: minmax(0, 1fr) 25px minmax(0, 1fr);
        gap: 7px;
    }

}


/* =========================================================
   RESPONSIVE — 900
   ========================================================= */

@media (max-width: 900px) {

    .wn-crm-fit .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-crm-fit-head {
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .wn-crm-fit-intro {
        max-width: 620px;
    }

    .wn-crm-fit-stage {
        grid-template-columns: 1fr;
        gap: 20px;

        margin-top: 55px;
    }

    .wn-crm-fit-switch {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 14px;
    }

    .wn-crm-fit-switch-line {
        width: auto;
        height: 1px;
        min-height: 0;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(105, 143, 232, .34)
            );
    }

    .wn-crm-fit-switch-line:last-child {
        background:
            linear-gradient(
                90deg,
                rgba(105, 143, 232, .34),
                transparent
            );
    }

    .wn-crm-fit-switch-core {
        margin: 0;
    }

    .wn-crm-fit-switch > small {
        display: none;
    }

    .wn-crm-fit-bottom {
        grid-template-columns: 60px 1fr;
    }

    .wn-crm-fit-bottom > p {
        grid-column: 2;

        max-width: 620px;
        margin: 0;
    }

}


/* =========================================================
   MOBILE — 640
   ========================================================= */

@media (max-width: 640px) {

    .wn-crm-fit .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-crm-fit {
        padding: 72px 0 68px;
    }

    .wn-crm-section-kicker--dark {
        margin-bottom: 17px;

        font-size: 9px;
        line-height: 1.35;
    }

    .wn-crm-section-kicker--dark span {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .wn-crm-fit h2 {
        font-size: clamp(38px, 11vw, 50px);
        line-height: 1.02;
    }

    .wn-crm-fit-intro p {
        font-size: 13px;
        line-height: 1.68;
    }

    .wn-crm-fit-stage {
        margin-top: 42px;
    }

    .wn-crm-fit-side {
        padding: 18px 15px;
        border-radius: 12px;
    }

    .wn-crm-fit-side-head {
        padding-bottom: 16px;
    }

    .wn-crm-fit-rigid {
        margin-top: 20px;
        padding: 18px 8px;
    }

    .wn-crm-fit-rigid-step strong {
        font-size: 9px;
    }

    .wn-crm-fit-friction-item {
        padding: 12px 0;
    }

    .wn-crm-fit-switch-core {
        width: 48px;
        height: 48px;
    }

    .wn-crm-fit-custom-flow {
        margin-top: 20px;
        padding: 14px 10px;
    }

    .wn-crm-fit-flow-row {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .wn-crm-fit-flow-row > b {
        justify-self: center;

        width: 1px;
        height: 16px;
    }

    .wn-crm-fit-flow-node strong {
        font-size: 9px;
    }

    .wn-crm-fit-flow-branch {
        grid-template-columns: 1fr;
        min-height: 43px;
        padding: 0;
    }

    .wn-crm-fit-flow-branch > i {
        height: 27px;
    }

    .wn-crm-fit-flow-branch > div {
        display: none;
    }

    .wn-crm-fit-custom-meta > div {
        padding: 11px 7px;
    }

    .wn-crm-fit-custom-meta strong {
        font-size: 9px;
    }

    .wn-crm-fit-bottom {
        grid-template-columns: 1fr;
        gap: 15px;

        margin-top: 48px;
        padding-top: 27px;
    }

    .wn-crm-fit-bottom-number {
        font-size: 37px;
    }

    .wn-crm-fit-bottom > p {
        grid-column: auto;

        margin-top: 4px;
    }

}


/* =========================================================
   SMALL MOBILE — 390
   ========================================================= */

@media (max-width: 390px) {

    .wn-crm-fit .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-crm-fit h2 {
        font-size: 37px;
    }

    .wn-crm-fit-rigid-step span {
        width: 25px;
        height: 25px;
    }

    .wn-crm-fit-rigid-step strong {
        font-size: 9px;
    }

}
/* =========================================================
   CUSTOM CRM DEVELOPMENT
   02 — CRM MODULES
   ========================================================= */

.wn-crm-modules {
    position: relative;
    overflow: hidden;

    padding: 112px 0 104px;

    color: #142033;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(82, 126, 229, .075),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafcff 100%
        );
}

.wn-crm-modules::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(rgba(32, 60, 96, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 60, 96, .022) 1px, transparent 1px);

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 17%,
            #000 83%,
            transparent
        );
}

.wn-crm-modules .wn-wrap {
    position: relative;
    z-index: 2;

    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   HEAD
   ========================================================= */

.wn-crm-modules-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(310px, .62fr);
    gap: clamp(70px, 9vw, 140px);
    align-items: end;
}

.wn-crm-section-kicker--light {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 0 0 23px;

    color: #547cdb;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.wn-crm-section-kicker--light span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    color: #557cda;

    border: 1px solid #d4dff5;
    border-radius: 50%;

    background: #f6f9ff;

    font-size: 9px;
    letter-spacing: .06em;
}

.wn-crm-modules h2 {
    max-width: 790px;
    margin: 0;

    color: #111d2e;

    font-size: clamp(48px, 4.45vw, 67px);
    font-weight: 720;
    line-height: 1;
    letter-spacing: -.048em;
}

.wn-crm-modules h2 span {
    color: #557dde;
}

.wn-crm-modules-intro {
    max-width: 455px;
    padding-bottom: 5px;
}

.wn-crm-modules-intro p {
    margin: 0;

    color: #69788b;

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   SYSTEM
   ========================================================= */

.wn-crm-modules-system {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(220px, .72fr)
        minmax(430px, 1.36fr)
        minmax(220px, .72fr);

    gap: 29px;
    align-items: center;

    margin-top: 76px;
}

.wn-crm-modules-system::before {
    content: "";
    position: absolute;

    top: 50%;
    left: 17%;
    right: 17%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(87, 127, 220, .22) 20%,
            rgba(87, 127, 220, .22) 80%,
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   MODULE COLUMNS
   ========================================================= */

.wn-crm-modules-column {
    position: relative;
    z-index: 2;

    display: grid;
    gap: 15px;
}

.wn-crm-module {
    position: relative;

    min-width: 0;
    padding: 20px;

    border: 1px solid #e0e6ee;
    border-radius: 12px;

    background: rgba(255, 255, 255, .91);

    box-shadow:
        0 12px 30px rgba(28, 51, 83, .035);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.wn-crm-module:hover {
    transform: translateY(-3px);

    border-color: #cad8ee;

    box-shadow:
        0 18px 40px rgba(28, 51, 83, .075);
}

.wn-crm-modules-column--left .wn-crm-module::after,
.wn-crm-modules-column--right .wn-crm-module::before {
    content: "";
    position: absolute;

    top: 50%;

    width: 30px;
    height: 1px;

    background: #ccd9ec;
}

.wn-crm-modules-column--left .wn-crm-module::after {
    right: -30px;
}

.wn-crm-modules-column--right .wn-crm-module::before {
    left: -30px;
}

.wn-crm-module-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wn-crm-module-number {
    color: #5078d6;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.wn-crm-module-state {
    color: #9ba7b5;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}


/* =========================================================
   MODULE ICONS
   ========================================================= */

.wn-crm-module-icon {
    position: relative;

    width: 39px;
    height: 39px;
    margin-top: 18px;

    border: 1px solid #dbe4f2;
    border-radius: 9px;

    background: #f6f9ff;
}

.wn-crm-module-icon i {
    position: absolute;
    display: block;

    background: #6085df;
}

.wn-crm-module-icon i:nth-child(1) {
    top: 10px;
    left: 10px;

    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.wn-crm-module-icon i:nth-child(2) {
    top: 12px;
    right: 9px;

    width: 10px;
    height: 2px;

    border-radius: 2px;
}

.wn-crm-module-icon i:nth-child(3) {
    bottom: 9px;
    left: 10px;

    width: 19px;
    height: 2px;

    border-radius: 2px;

    opacity: .55;
}


/* PEOPLE */

.wn-crm-module-icon--people i:nth-child(1),
.wn-crm-module-icon--people i:nth-child(2) {
    top: 9px;

    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.wn-crm-module-icon--people i:nth-child(1) {
    left: 9px;
}

.wn-crm-module-icon--people i:nth-child(2) {
    right: 9px;
}

.wn-crm-module-icon--people i:nth-child(3) {
    bottom: 8px;
    left: 8px;

    width: 22px;
    height: 9px;

    border-radius: 9px 9px 4px 4px;

    opacity: .3;
}


/* PIPELINE */

.wn-crm-module-icon--pipeline i:nth-child(1),
.wn-crm-module-icon--pipeline i:nth-child(2),
.wn-crm-module-icon--pipeline i:nth-child(3) {
    bottom: 9px;

    width: 5px;

    border-radius: 2px 2px 0 0;
}

.wn-crm-module-icon--pipeline i:nth-child(1) {
    left: 9px;
    height: 9px;
}

.wn-crm-module-icon--pipeline i:nth-child(2) {
    left: 17px;
    top: auto;
    right: auto;

    height: 15px;
}

.wn-crm-module-icon--pipeline i:nth-child(3) {
    left: 25px;

    height: 21px;

    opacity: 1;
}


/* TASKS */

.wn-crm-module-icon--tasks i:nth-child(1) {
    top: 10px;
    left: 9px;

    width: 5px;
    height: 5px;

    border-radius: 1px;
}

.wn-crm-module-icon--tasks i:nth-child(2) {
    top: 11px;
    right: 8px;

    width: 17px;
    height: 2px;
}

.wn-crm-module-icon--tasks i:nth-child(3) {
    bottom: 10px;
    left: 9px;

    width: 21px;
    height: 2px;
}


/* DOCUMENTS */

.wn-crm-module-icon--docs i:nth-child(1) {
    top: 8px;
    left: 11px;

    width: 17px;
    height: 22px;

    border: 1px solid #6085df;
    border-radius: 2px;

    background: transparent;
}

.wn-crm-module-icon--docs i:nth-child(2) {
    top: 14px;
    left: 15px;
    right: auto;

    width: 9px;
    height: 1px;
}

.wn-crm-module-icon--docs i:nth-child(3) {
    bottom: 11px;
    left: 15px;

    width: 7px;
    height: 1px;

    opacity: 1;
}


/* REPORT */

.wn-crm-module-icon--report i:nth-child(1),
.wn-crm-module-icon--report i:nth-child(2),
.wn-crm-module-icon--report i:nth-child(3) {
    bottom: 9px;

    width: 4px;

    border-radius: 2px 2px 0 0;
}

.wn-crm-module-icon--report i:nth-child(1) {
    left: 10px;
    height: 8px;
}

.wn-crm-module-icon--report i:nth-child(2) {
    top: auto;
    right: auto;
    left: 17px;

    height: 14px;
}

.wn-crm-module-icon--report i:nth-child(3) {
    left: 24px;

    height: 20px;

    opacity: 1;
}


/* =========================================================
   MODULE COPY
   ========================================================= */

.wn-crm-module h3 {
    margin: 15px 0 0;

    color: #1a283a;

    font-size: 15px;
    font-weight: 720;
    line-height: 1.25;
    letter-spacing: -.018em;
}

.wn-crm-module p {
    min-height: 56px;
    margin: 8px 0 0;

    color: #748295;

    font-size: 9px;
    line-height: 1.65;
}

.wn-crm-module-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 14px;
}

.wn-crm-module-meta span {
    padding: 5px 7px;

    color: #73849a;

    border: 1px solid #e3e9f1;
    border-radius: 20px;

    background: #fafcff;

    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   CORE
   ========================================================= */

.wn-crm-modules-core {
    position: relative;
    z-index: 3;

    min-width: 0;
    padding: 33px 0 25px;
}

.wn-crm-modules-core-orbit {
    position: absolute;
    z-index: -1;

    top: 0;
    right: -18px;
    bottom: 0;
    left: -18px;

    border: 1px solid rgba(88, 127, 220, .12);
    border-radius: 50%;
}

.wn-crm-modules-core-orbit::before {
    content: "";
    position: absolute;

    top: 10%;
    right: 8%;
    bottom: 10%;
    left: 8%;

    border: 1px solid rgba(88, 127, 220, .075);
    border-radius: 50%;
}

.wn-crm-modules-core-orbit span {
    position: absolute;

    width: 7px;
    height: 7px;

    border: 2px solid #fff;
    border-radius: 50%;

    background: #6a8ee5;

    box-shadow: 0 2px 7px rgba(43, 82, 170, .18);
}

.wn-crm-modules-core-orbit span:nth-child(1) {
    top: 18%;
    left: 5%;
}

.wn-crm-modules-core-orbit span:nth-child(2) {
    top: 30%;
    right: 2%;
}

.wn-crm-modules-core-orbit span:nth-child(3) {
    right: 5%;
    bottom: 21%;
}

.wn-crm-modules-core-orbit span:nth-child(4) {
    bottom: 28%;
    left: 2%;
}


/* =========================================================
   CORE CARD
   ========================================================= */

.wn-crm-modules-core-card {
    overflow: hidden;

    border: 1px solid #ccd9e9;
    border-radius: 16px;

    background: rgba(255, 255, 255, .98);

    box-shadow:
        0 28px 70px rgba(25, 49, 82, .12),
        0 8px 24px rgba(25, 49, 82, .055);
}

.wn-crm-modules-core-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 61px;
    padding: 0 19px;

    border-bottom: 1px solid #e6ebf2;
}

.wn-crm-modules-core-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.wn-crm-modules-core-brand > span {
    width: 28px;
    height: 28px;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #4c7ae4,
            #7da2f6
        );

    box-shadow:
        0 6px 14px rgba(75, 121, 226, .19);
}

.wn-crm-modules-core-brand > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-modules-core-brand small,
.wn-crm-modules-customer small,
.wn-crm-modules-owner small,
.wn-crm-modules-summary small {
    color: #94a0af;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-modules-core-brand strong {
    color: #1b293b;

    font-size: 11px;
}

.wn-crm-modules-live {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #53816e;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.wn-crm-modules-live i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #5bd29e;

    box-shadow: 0 0 0 4px rgba(91, 210, 158, .10);
}


/* =========================================================
   CUSTOMER
   ========================================================= */

.wn-crm-modules-customer {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;

    margin: 19px;
    padding: 14px;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    background: #fafcff;
}

.wn-crm-modules-avatar {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    color: #5078d9;

    border: 1px solid #d5e0f3;
    border-radius: 9px;

    background: #eef4ff;

    font-size: 11px;
    font-weight: 800;
}

.wn-crm-modules-customer-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-modules-customer-copy strong {
    color: #1b293b;

    font-size: 13px;
}

.wn-crm-modules-customer-copy span {
    color: #7c8a9c;

    font-size: 9px;
}

.wn-crm-modules-owner {
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding-left: 14px;

    border-left: 1px solid #e2e7ed;
}

.wn-crm-modules-owner strong {
    color: #465569;

    font-size: 9px;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.wn-crm-modules-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;

    margin: 0 19px;

    border: 1px solid #e2e8f0;
    border-radius: 9px;
}

.wn-crm-modules-summary > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;

    padding: 12px;
}

.wn-crm-modules-summary > div + div {
    border-left: 1px solid #e2e8f0;
}

.wn-crm-modules-summary strong {
    overflow: hidden;

    color: #354457;

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-crm-modules-summary span {
    color: #8794a5;

    font-size: 9px;
}


/* =========================================================
   TABS
   ========================================================= */

.wn-crm-modules-tabs {
    display: flex;
    gap: 20px;

    margin: 19px 19px 0;

    border-bottom: 1px solid #e5eaf0;
}

.wn-crm-modules-tabs span {
    position: relative;

    padding-bottom: 9px;

    color: #929dab;

    font-size: 9px;
    font-weight: 700;
}

.wn-crm-modules-tabs span.is-active {
    color: #3e69ca;
}

.wn-crm-modules-tabs span.is-active::after {
    content: "";
    position: absolute;

    right: 0;
    bottom: -1px;
    left: 0;

    height: 2px;

    background: #5c82dd;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.wn-crm-modules-timeline {
    margin: 15px 19px 19px;
}

.wn-crm-modules-timeline-head {
    display: flex;
    justify-content: space-between;

    margin-bottom: 7px;
}

.wn-crm-modules-timeline-head span {
    color: #78879a;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-modules-timeline-head small {
    color: #a2acb8;

    font-size: 9px;
}

.wn-crm-modules-event {
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;

    padding: 8px 0;
}

.wn-crm-modules-event + .wn-crm-modules-event {
    border-top: 1px solid #edf0f4;
}

.wn-crm-modules-event > i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #a9b3c0;
}

.wn-crm-modules-event > i.is-blue {
    background: #6489e2;
}

.wn-crm-modules-event > i.is-green {
    background: #56c494;
}

.wn-crm-modules-event > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.wn-crm-modules-event strong {
    color: #3a495c;

    font-size: 9px;
}

.wn-crm-modules-event span,
.wn-crm-modules-event time {
    color: #98a2af;

    font-size: 9px;
}


/* =========================================================
   CORE CAPTION
   ========================================================= */

.wn-crm-modules-core-caption {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 11px;
    align-items: center;

    margin-top: 18px;
}

.wn-crm-modules-core-caption > span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d5dfed
        );
}

.wn-crm-modules-core-caption > span:last-child {
    background:
        linear-gradient(
            90deg,
            #d5dfed,
            transparent
        );
}

.wn-crm-modules-core-caption p {
    margin: 0;

    color: #8996a6;

    font-size: 9px;
    text-align: center;
}

.wn-crm-modules-core-caption strong {
    color: #5879c7;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.wn-crm-modules-bottom {
    display: grid;
    grid-template-columns: 170px minmax(300px, .8fr) minmax(420px, 1fr);
    gap: 30px;
    align-items: center;

    margin-top: 70px;
    padding-top: 31px;

    border-top: 1px solid #e1e7ef;
}

.wn-crm-modules-bottom-label {
    color: #597bd0;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

.wn-crm-modules-bottom p {
    margin: 0;

    color: #6f7e90;

    font-size: 11px;
    line-height: 1.65;
}

.wn-crm-modules-bottom p strong {
    color: #334359;
    font-weight: 650;
}

.wn-crm-modules-bottom-flow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.wn-crm-modules-bottom-flow span {
    color: #718197;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
}

.wn-crm-modules-bottom-flow i {
    width: 22px;
    height: 1px;
    margin: 0 7px;

    background: #ccd7e5;
}


/* =========================================================
   RESPONSIVE — 1100
   ========================================================= */

@media (max-width: 1100px) {

    .wn-crm-modules .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-crm-modules {
        padding: 94px 0 90px;
    }

    .wn-crm-modules-head {
        gap: 55px;
    }

    .wn-crm-modules-system {
        grid-template-columns:
            minmax(190px, .7fr)
            minmax(380px, 1.3fr)
            minmax(190px, .7fr);

        gap: 21px;
    }

    .wn-crm-module {
        padding: 17px;
    }

    .wn-crm-modules-column--left .wn-crm-module::after,
    .wn-crm-modules-column--right .wn-crm-module::before {
        width: 22px;
    }

    .wn-crm-modules-column--left .wn-crm-module::after {
        right: -22px;
    }

    .wn-crm-modules-column--right .wn-crm-module::before {
        left: -22px;
    }

}


/* =========================================================
   RESPONSIVE — 900
   ========================================================= */

@media (max-width: 900px) {

    .wn-crm-modules .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-crm-modules-head {
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .wn-crm-modules-intro {
        max-width: 620px;
    }

    .wn-crm-modules-system {
        display: flex;
        flex-direction: column;

        margin-top: 55px;
    }

    .wn-crm-modules-system::before {
        display: none;
    }

    .wn-crm-modules-core {
        order: 1;

        width: min(100%, 620px);
        margin: 0 auto;
    }

    .wn-crm-modules-column {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        width: 100%;
    }

    .wn-crm-modules-column--left {
        order: 2;
    }

    .wn-crm-modules-column--right {
        order: 3;
    }

    .wn-crm-modules-column--left .wn-crm-module::after,
    .wn-crm-modules-column--right .wn-crm-module::before {
        display: none;
    }

    .wn-crm-module p {
        min-height: 72px;
    }

    .wn-crm-modules-bottom {
        grid-template-columns: 150px 1fr;
    }

    .wn-crm-modules-bottom-flow {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

}


/* =========================================================
   MOBILE — 640
   ========================================================= */

@media (max-width: 640px) {

    .wn-crm-modules .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-crm-modules {
        padding: 72px 0 68px;
    }

    .wn-crm-section-kicker--light {
        margin-bottom: 17px;

        font-size: 9px;
        line-height: 1.35;
    }

    .wn-crm-section-kicker--light span {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .wn-crm-modules h2 {
        font-size: clamp(38px, 11vw, 50px);
        line-height: 1.02;
    }

    .wn-crm-modules-intro p {
        font-size: 13px;
        line-height: 1.68;
    }

    .wn-crm-modules-system {
        gap: 13px;
        margin-top: 39px;
    }

    .wn-crm-modules-core {
        width: 100%;
        padding: 15px 0 20px;
    }

    .wn-crm-modules-core-orbit {
        display: none;
    }

    .wn-crm-modules-core-card {
        border-radius: 13px;
    }

    .wn-crm-modules-customer {
        grid-template-columns: 40px minmax(0, 1fr);

        margin: 14px;
        padding: 11px;
    }

    .wn-crm-modules-avatar {
        width: 40px;
        height: 40px;
    }

    .wn-crm-modules-owner {
        grid-column: 2;

        padding: 7px 0 0;

        border-top: 1px solid #e4e9ef;
        border-left: 0;
    }

    .wn-crm-modules-summary {
        margin: 0 14px;
    }

    .wn-crm-modules-tabs {
        gap: 14px;

        margin: 15px 14px 0;

        overflow: hidden;
    }

    .wn-crm-modules-timeline {
        margin: 13px 14px 14px;
    }

    .wn-crm-modules-column {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .wn-crm-module {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: 13px;

        padding: 16px;
    }

    .wn-crm-module-top {
        grid-column: 1 / -1;

        margin-bottom: 13px;
    }

    .wn-crm-module-icon {
        grid-column: 1;
        grid-row: 2 / span 3;

        margin-top: 0;
    }

    .wn-crm-module h3 {
        grid-column: 2;

        margin: 0;
    }

    .wn-crm-module p {
        grid-column: 2;

        min-height: 0;
        margin-top: 5px;
    }

    .wn-crm-module-meta {
        grid-column: 2;

        margin-top: 10px;
    }

    .wn-crm-modules-core-caption {
        margin-top: 13px;
    }

    .wn-crm-modules-bottom {
        grid-template-columns: 1fr;
        gap: 12px;

        margin-top: 44px;
        padding-top: 25px;
    }

    .wn-crm-modules-bottom-flow {
        grid-column: auto;

        flex-wrap: wrap;
        justify-content: flex-start;

        margin-top: 7px;
    }

}


/* =========================================================
   SMALL MOBILE — 390
   ========================================================= */

@media (max-width: 390px) {

    .wn-crm-modules .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-crm-modules h2 {
        font-size: 37px;
    }

    .wn-crm-modules-tabs {
        gap: 10px;
    }

    .wn-crm-modules-tabs span {
        font-size: 9px;
    }

    .wn-crm-modules-bottom-flow i {
        width: 12px;
        margin: 0 5px;
    }

    .wn-crm-modules-bottom-flow span {
        font-size: 9px;
    }

}
/* =========================================================
   CUSTOM CRM DEVELOPMENT
   03 — WORKFLOW & AUTOMATION
   ========================================================= */

.wn-crm-automation {
    position: relative;
    overflow: hidden;

    padding: 112px 0 100px;

    color: #dce6f1;

    background:
        radial-gradient(
            circle at 72% 46%,
            rgba(79, 124, 230, .13),
            transparent 31%
        ),
        #071521;
}

.wn-crm-automation::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(rgba(255,255,255,.021) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.021) 1px, transparent 1px);

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 18%,
            #000 88%,
            transparent
        );
}

.wn-crm-automation .wn-wrap {
    position: relative;
    z-index: 2;

    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.wn-crm-automation-layout {
    display: grid;
    grid-template-columns:
        minmax(350px, .78fr)
        minmax(560px, 1.22fr);

    gap: clamp(70px, 8vw, 120px);
    align-items: center;
}


/* =========================================================
   COPY
   ========================================================= */

.wn-crm-section-kicker--automation {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 0 0 23px;

    color: #7898e8;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.wn-crm-section-kicker--automation > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    color: #9db6f3;

    border: 1px solid rgba(126,158,235,.28);
    border-radius: 50%;

    font-size: 9px;
    letter-spacing: .06em;
}

.wn-crm-automation h2 {
    max-width: 600px;
    margin: 0;

    color: #f3f6fa;

    font-size: clamp(48px, 4.2vw, 65px);
    font-weight: 720;
    line-height: 1;
    letter-spacing: -.048em;
}

.wn-crm-automation h2 span {
    color: #668ce8;
}

.wn-crm-automation-lead {
    max-width: 535px;
    margin: 27px 0 0;

    color: #8799ac;

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   POINTS
   ========================================================= */

.wn-crm-automation-points {
    margin-top: 39px;

    border-top: 1px solid rgba(255,255,255,.08);
}

.wn-crm-automation-points article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 16px;

    padding: 18px 0;

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.wn-crm-automation-points article > span {
    padding-top: 2px;

    color: #5678c7;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.wn-crm-automation-points article > div {
    min-width: 0;
}

.wn-crm-automation-points strong {
    display: block;

    color: #ced9e5;

    font-size: 12px;
    font-weight: 650;
}

.wn-crm-automation-points p {
    max-width: 420px;
    margin: 5px 0 0;

    color: #657a8f;

    font-size: 10px;
    line-height: 1.6;
}


/* =========================================================
   NOTE
   ========================================================= */

.wn-crm-automation-note {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr);
    gap: 12px;
    align-items: center;

    margin-top: 24px;
    padding: 14px 16px;

    border: 1px solid rgba(104,144,237,.15);
    border-radius: 9px;

    background: rgba(84,126,226,.045);
}

.wn-crm-automation-note-icon {
    position: relative;

    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border: 1px solid rgba(103,143,235,.24);
    border-radius: 50%;
}

.wn-crm-automation-note-icon i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #6f94ea;

    box-shadow: 0 0 0 5px rgba(111,148,234,.08);
}

.wn-crm-automation-note p {
    margin: 0;

    color: #71869b;

    font-size: 9px;
    line-height: 1.6;
}

.wn-crm-automation-note strong {
    color: #a9bde9;
    font-weight: 650;
}


/* =========================================================
   VISUAL
   ========================================================= */

.wn-crm-automation-visual {
    position: relative;

    min-width: 0;
    padding: 35px 23px 37px;
}

.wn-crm-automation-visual::before {
    content: "";
    position: absolute;

    inset: 0;

    border: 1px solid rgba(101,140,230,.09);
    border-radius: 50%;

    transform: scale(.96, .84);

    pointer-events: none;
}

.wn-crm-automation-panel {
    position: relative;
    z-index: 2;

    overflow: hidden;

    border: 1px solid #233a50;
    border-radius: 16px;

    background: #0a1a28;

    box-shadow:
        0 35px 85px rgba(0,0,0,.28),
        0 10px 28px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.025);
}


/* =========================================================
   PANEL HEADER
   ========================================================= */

.wn-crm-automation-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 67px;
    padding: 0 21px;

    border-bottom: 1px solid rgba(255,255,255,.07);

    background: rgba(255,255,255,.012);
}

.wn-crm-automation-panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wn-crm-automation-panel-mark {
    position: relative;

    display: block;

    width: 31px;
    height: 31px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #4776df,
            #759bf1
        );

    box-shadow: 0 6px 16px rgba(71,118,223,.19);
}

.wn-crm-automation-panel-mark i {
    position: absolute;

    height: 1px;

    background: rgba(255,255,255,.72);
}

.wn-crm-automation-panel-mark i:first-child {
    top: 12px;
    left: 8px;

    width: 15px;
}

.wn-crm-automation-panel-mark i:last-child {
    top: 18px;
    left: 8px;

    width: 10px;
}

.wn-crm-automation-panel-title > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-automation-panel-title small {
    color: #657b92;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

.wn-crm-automation-panel-title strong {
    color: #d8e2ed;

    font-size: 11px;
}

.wn-crm-automation-status {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px 9px;

    color: #71c8a2;

    border: 1px solid rgba(79,190,143,.16);
    border-radius: 20px;

    background: rgba(79,190,143,.045);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.wn-crm-automation-status i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #59cf9d;

    box-shadow: 0 0 0 4px rgba(89,207,157,.08);
}


/* =========================================================
   CANVAS
   ========================================================= */

.wn-crm-automation-canvas {
    position: relative;

    padding: 22px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(78,120,217,.055),
            transparent 45%
        ),
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);

    background-size:
        auto,
        31px 31px,
        31px 31px;
}

.wn-crm-automation-canvas-label {
    display: flex;
    justify-content: space-between;

    margin-bottom: 16px;
}

.wn-crm-automation-canvas-label span {
    color: #63788e;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.wn-crm-automation-canvas-label small {
    color: #40566b;

    font-size: 9px;
}


/* =========================================================
   NODES
   ========================================================= */

.wn-crm-auto-node {
    position: relative;

    display: grid;
    grid-template-columns: 39px minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;

    width: min(100%, 420px);
    margin-inline: auto;
    padding: 12px 14px;

    border: 1px solid #263c51;
    border-radius: 9px;

    background: rgba(12,31,47,.96);

    box-shadow: 0 8px 18px rgba(0,0,0,.09);
}

.wn-crm-auto-node--trigger {
    border-color: rgba(94,138,235,.35);

    background:
        linear-gradient(
            90deg,
            rgba(79,122,221,.08),
            rgba(12,31,47,.96) 40%
        );
}

.wn-crm-auto-node-icon {
    display: grid;
    place-items: center;

    width: 37px;
    height: 37px;

    color: #9bb5f1;

    border: 1px solid rgba(94,138,235,.29);
    border-radius: 8px;

    background: rgba(75,119,220,.09);
}

.wn-crm-auto-node-icon span {
    font-size: 13px;
    font-weight: 600;
}

.wn-crm-auto-node-icon--condition {
    color: #c1a875;

    border-color: rgba(195,163,97,.22);
    background: rgba(195,163,97,.055);
}

.wn-crm-auto-node-icon--action {
    color: #91abe9;
}

.wn-crm-auto-node-icon--task {
    color: #a3b8e9;
}

.wn-crm-auto-node-icon--result {
    color: #6ed0a7;

    border-color: rgba(79,190,143,.24);
    background: rgba(79,190,143,.06);
}

.wn-crm-auto-node-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-auto-node-copy small {
    color: #5d748a;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-auto-node-copy strong {
    overflow: hidden;

    color: #c4d0dc;

    font-size: 9px;
    font-weight: 650;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-crm-auto-node-copy > span {
    color: #5f7488;

    font-size: 9px;
}

.wn-crm-auto-node-state {
    color: #5577c4;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}


/* =========================================================
   LINKS
   ========================================================= */

.wn-crm-auto-link {
    display: flex;
    flex-direction: column;
    align-items: center;

    height: 44px;
}

.wn-crm-auto-link i {
    width: 1px;
    flex: 1;

    background: #345377;
}

.wn-crm-auto-link span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #6087e0;

    box-shadow: 0 0 0 4px rgba(96,135,224,.07);
}


/* =========================================================
   SPLIT
   ========================================================= */

.wn-crm-auto-split {
    width: min(74%, 330px);
    margin: 0 auto;
}

.wn-crm-auto-split-line {
    position: relative;

    height: 32px;

    border-top: 0;
    border-right: 1px solid #345377;
    border-bottom: 1px solid #345377;
    border-left: 1px solid #345377;

    border-radius: 0 0 7px 7px;
}

.wn-crm-auto-split-line::before {
    content: "";
    position: absolute;

    top: 0;
    left: 50%;

    height: 16px;

    border-left: 1px solid #345377;
}

.wn-crm-auto-split-options {
    display: flex;
    justify-content: space-between;

    margin-top: 7px;
}

.wn-crm-auto-split-options span {
    display: flex;
    align-items: center;
    gap: 5px;

    color: #516b83;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
}

.wn-crm-auto-split-options i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #5d84dc;
}

.wn-crm-auto-split-options span:last-child i {
    background: #6b7c8d;
}


/* =========================================================
   PARALLEL ACTIONS
   ========================================================= */

.wn-crm-auto-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;

    margin-top: 10px;
}

.wn-crm-auto-node--small {
    width: 100%;
    margin: 0;

    grid-template-columns: 34px minmax(0,1fr);

    padding: 11px;
}

.wn-crm-auto-node--small .wn-crm-auto-node-icon {
    width: 32px;
    height: 32px;
}


/* =========================================================
   MERGE
   ========================================================= */

.wn-crm-auto-merge {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;

    width: 70%;
    height: 42px;
    margin: 0 auto;
}

.wn-crm-auto-merge span:first-child {
    border-top: 1px solid #345377;
    border-right: 1px solid #345377;
    border-radius: 0 7px 0 0;
}

.wn-crm-auto-merge span:last-child {
    border-top: 1px solid #345377;
    border-left: 1px solid #345377;
    border-radius: 7px 0 0 0;
}

.wn-crm-auto-merge i {
    background: #345377;
}

.wn-crm-auto-node--result {
    border-color: rgba(79,190,143,.21);

    background:
        linear-gradient(
            90deg,
            rgba(79,190,143,.055),
            rgba(12,31,47,.96) 42%
        );
}

.wn-crm-auto-node--result .wn-crm-auto-node-state {
    color: #65b995;
}


/* =========================================================
   ACTIVITY LOG
   ========================================================= */

.wn-crm-automation-log {
    padding: 17px 21px 19px;

    border-top: 1px solid rgba(255,255,255,.07);

    background: #091824;
}

.wn-crm-automation-log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wn-crm-automation-log-head > span {
    color: #60768c;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

.wn-crm-automation-log-head small {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #557064;

    font-size: 9px;
}

.wn-crm-automation-log-head small i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #57ca99;
}

.wn-crm-automation-log-flow {
    display: grid;
    grid-template-columns:
        auto 1fr auto 1fr auto 1fr auto;

    align-items: start;

    margin-top: 15px;
}

.wn-crm-automation-log-flow > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.wn-crm-automation-log-flow > div span {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    color: #6381c5;

    border: 1px solid #2e4963;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.wn-crm-automation-log-flow > div span.is-done {
    color: #8ba8ea;

    border-color: rgba(92,132,223,.42);
    background: rgba(92,132,223,.07);
}

.wn-crm-automation-log-flow > div small {
    color: #536a80;

    font-size: 9px;
}

.wn-crm-automation-log-flow > i {
    height: 1px;
    margin-top: 12px;

    background:
        linear-gradient(
            90deg,
            #36587d,
            #557bc7
        );
}


/* =========================================================
   FLOATING EVENT
   ========================================================= */

.wn-crm-automation-float {
    position: absolute;
    z-index: 4;

    right: -3px;
    bottom: 88px;

    display: grid;
    grid-template-columns: 31px minmax(0,1fr) 18px;
    gap: 9px;
    align-items: center;

    min-width: 195px;
    padding: 10px 11px;

    border: 1px solid #2a4259;
    border-radius: 10px;

    background: #0d2030;

    box-shadow:
        0 16px 35px rgba(0,0,0,.26);
}

.wn-crm-automation-float > span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    border-radius: 7px;

    background: rgba(84,126,226,.10);
}

.wn-crm-automation-float > span i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #6590ee;

    box-shadow: 0 0 0 5px rgba(101,144,238,.07);
}

.wn-crm-automation-float > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-automation-float small {
    color: #5d758c;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-automation-float strong {
    color: #becbd8;

    font-size: 9px;
}

.wn-crm-automation-float b {
    display: grid;
    place-items: center;

    width: 17px;
    height: 17px;

    color: #62c99d;

    border-radius: 50%;

    background: rgba(79,190,143,.08);

    font-size: 9px;
}


/* =========================================================
   BOTTOM PROCESS
   ========================================================= */

.wn-crm-automation-bottom {
    display: grid;
    grid-template-columns:
        minmax(0,1fr) 45px
        minmax(0,1fr) 45px
        minmax(0,1fr) 45px
        minmax(0,1fr);

    align-items: center;

    margin-top: 72px;
    padding-top: 31px;

    border-top: 1px solid rgba(255,255,255,.09);
}

.wn-crm-automation-bottom > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wn-crm-automation-bottom span {
    color: #6688d7;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.wn-crm-automation-bottom strong {
    color: #788b9f;

    font-size: 9px;
    font-weight: 550;
    line-height: 1.45;
}

.wn-crm-automation-bottom > i {
    position: relative;

    height: 1px;
    margin: 0 11px;

    background: #29445e;
}

.wn-crm-automation-bottom > i::after {
    content: "";

    position: absolute;
    top: -2px;
    right: 0;

    width: 5px;
    height: 5px;

    border-top: 1px solid #5276c5;
    border-right: 1px solid #5276c5;

    transform: rotate(45deg);
}


/* =========================================================
   RESPONSIVE — 1100
   ========================================================= */

@media (max-width: 1100px) {

    .wn-crm-automation .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-crm-automation {
        padding: 94px 0 90px;
    }

    .wn-crm-automation-layout {
        grid-template-columns:
            minmax(310px,.72fr)
            minmax(500px,1.28fr);

        gap: 48px;
    }

}


/* =========================================================
   RESPONSIVE — 900
   ========================================================= */

@media (max-width: 900px) {

    .wn-crm-automation .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-crm-automation-layout {
        grid-template-columns: 1fr;
        gap: 54px;
    }

    .wn-crm-automation-copy {
        max-width: 680px;
    }

    .wn-crm-automation-lead {
        max-width: 620px;
    }

    .wn-crm-automation-points {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));

        margin-top: 35px;

        border-top: 1px solid rgba(255,255,255,.08);
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .wn-crm-automation-points article {
        display: block;

        padding: 18px;

        border-bottom: 0;
    }

    .wn-crm-automation-points article + article {
        border-left: 1px solid rgba(255,255,255,.08);
    }

    .wn-crm-automation-points article > span {
        display: block;
        margin-bottom: 13px;
    }

    .wn-crm-automation-visual {
        width: min(100%, 700px);
        margin: 0 auto;
    }

}


/* =========================================================
   MOBILE — 640
   ========================================================= */

@media (max-width: 640px) {

    .wn-crm-automation .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-crm-automation {
        padding: 72px 0 68px;
    }

    .wn-crm-section-kicker--automation {
        margin-bottom: 17px;

        font-size: 9px;
        line-height: 1.35;
    }

    .wn-crm-section-kicker--automation > span {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .wn-crm-automation h2 {
        font-size: clamp(38px,11vw,50px);
        line-height: 1.02;
    }

    .wn-crm-automation-lead {
        margin-top: 20px;

        font-size: 13px;
        line-height: 1.68;
    }

    .wn-crm-automation-points {
        display: block;

        margin-top: 29px;
    }

    .wn-crm-automation-points article {
        display: grid;
        grid-template-columns: 30px minmax(0,1fr);

        padding: 15px 0;
    }

    .wn-crm-automation-points article + article {
        border-top: 1px solid rgba(255,255,255,.08);
        border-left: 0;
    }

    .wn-crm-automation-points article > span {
        margin: 0;
    }

    .wn-crm-automation-note {
        margin-top: 19px;
    }

    .wn-crm-automation-layout {
        gap: 38px;
    }

    .wn-crm-automation-visual {
        width: 100%;
        padding: 0;
    }

    .wn-crm-automation-visual::before {
        display: none;
    }

    .wn-crm-automation-panel {
        border-radius: 12px;
    }

    .wn-crm-automation-panel-head {
        min-height: 60px;
        padding: 0 14px;
    }

    .wn-crm-automation-panel-title strong {
        font-size: 9px;
    }

    .wn-crm-automation-status {
        padding: 6px 7px;
    }

    .wn-crm-automation-canvas {
        padding: 16px 11px;
    }

    .wn-crm-auto-node {
        grid-template-columns: 34px minmax(0,1fr);

        padding: 10px;
    }

    .wn-crm-auto-node-icon {
        width: 32px;
        height: 32px;
    }

    .wn-crm-auto-node-state {
        display: none;
    }

    .wn-crm-auto-actions {
        gap: 7px;
    }

    .wn-crm-auto-node--small {
        grid-template-columns: 29px minmax(0,1fr);

        padding: 8px;
    }

    .wn-crm-auto-node--small .wn-crm-auto-node-icon {
        width: 28px;
        height: 28px;
    }

    .wn-crm-auto-node--small .wn-crm-auto-node-copy strong {
        font-size: 9px;
    }

    .wn-crm-auto-node--small .wn-crm-auto-node-copy > span {
        font-size: 9px;
    }

    .wn-crm-automation-log {
        padding: 15px 12px 17px;
    }

    .wn-crm-automation-log-flow > div small {
        font-size: 4px;
    }

    .wn-crm-automation-float {
        display: none;
    }

    .wn-crm-automation-bottom {
        grid-template-columns: 1fr;
        gap: 0;

        margin-top: 46px;
        padding-top: 23px;
    }

    .wn-crm-automation-bottom > div {
        padding: 13px 0;
    }

    .wn-crm-automation-bottom > div + div {
        border-top: 1px solid rgba(255,255,255,.07);
    }

    .wn-crm-automation-bottom > i {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE — 390
   ========================================================= */

@media (max-width: 390px) {

    .wn-crm-automation .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-crm-automation h2 {
        font-size: 37px;
    }

    .wn-crm-auto-split {
        width: 82%;
    }

    .wn-crm-automation-log-head small {
        display: none;
    }

}
/* =========================================================
   CUSTOM CRM DEVELOPMENT
   04 — INTEGRATIONS & CONNECTED SYSTEMS
   ========================================================= */

.wn-crm-connect {
    position: relative;
    overflow: hidden;

    padding: 112px 0 104px;

    color: #142033;

    background:
        radial-gradient(
            circle at 50% 47%,
            rgba(81, 125, 226, .075),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f9fbfe 100%
        );
}

.wn-crm-connect::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(rgba(32,60,96,.021) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,60,96,.021) 1px, transparent 1px);

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 17%,
            #000 83%,
            transparent
        );
}

.wn-crm-connect .wn-wrap {
    position: relative;
    z-index: 2;

    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   HEAD
   ========================================================= */

.wn-crm-connect-head {
    display: grid;
    grid-template-columns:
        minmax(0, 1.22fr)
        minmax(320px, .62fr);

    gap: clamp(70px, 9vw, 140px);
    align-items: end;
}

.wn-crm-section-kicker--connect {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 0 0 23px;

    color: #547cdb;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.wn-crm-section-kicker--connect > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    color: #557cda;

    border: 1px solid #d4dff5;
    border-radius: 50%;

    background: #f6f9ff;

    font-size: 9px;
    letter-spacing: .06em;
}

.wn-crm-connect h2 {
    max-width: 800px;
    margin: 0;

    color: #111d2e;

    font-size: clamp(48px, 4.45vw, 67px);
    font-weight: 720;
    line-height: 1;
    letter-spacing: -.048em;
}

.wn-crm-connect h2 span {
    color: #557dde;
}

.wn-crm-connect-intro {
    max-width: 465px;
    padding-bottom: 5px;
}

.wn-crm-connect-intro p {
    margin: 0;

    color: #69788b;

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   NETWORK
   ========================================================= */

.wn-crm-connect-network {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(235px, .74fr)
        minmax(440px, 1.22fr)
        minmax(235px, .74fr);

    gap: 42px;
    align-items: center;

    margin-top: 76px;
    padding: 57px 0 42px;
}

.wn-crm-connect-network-label {
    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 13px;

    border-bottom: 1px solid #e3e9f1;
}

.wn-crm-connect-network-label span {
    color: #71849b;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

.wn-crm-connect-network-label small {
    color: #a1acb9;

    font-size: 9px;
}


/* =========================================================
   NETWORK LINES
   ========================================================= */

.wn-crm-connect-lines {
    position: absolute;

    top: 58px;
    right: 0;
    bottom: 42px;
    left: 0;

    pointer-events: none;
}

.wn-crm-connect-line {
    position: absolute;

    width: 17%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #d7e0ec,
            #9fb7e8
        );
}

.wn-crm-connect-line::after {
    content: "";

    position: absolute;
    top: -2px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #7093e4;

    box-shadow:
        0 0 0 4px rgba(112,147,228,.08);
}

.wn-crm-connect-line--tl,
.wn-crm-connect-line--ml,
.wn-crm-connect-line--bl {
    left: 21%;
}

.wn-crm-connect-line--tr,
.wn-crm-connect-line--mr,
.wn-crm-connect-line--br {
    right: 21%;

    background:
        linear-gradient(
            90deg,
            #9fb7e8,
            #d7e0ec
        );
}

.wn-crm-connect-line--tl,
.wn-crm-connect-line--tr {
    top: 23%;
}

.wn-crm-connect-line--ml,
.wn-crm-connect-line--mr {
    top: 50%;
}

.wn-crm-connect-line--bl,
.wn-crm-connect-line--br {
    top: 77%;
}

.wn-crm-connect-line--tl::after,
.wn-crm-connect-line--ml::after,
.wn-crm-connect-line--bl::after {
    right: 0;
}

.wn-crm-connect-line--tr::after,
.wn-crm-connect-line--mr::after,
.wn-crm-connect-line--br::after {
    left: 0;
}


/* =========================================================
   SIDE SYSTEMS
   ========================================================= */

.wn-crm-connect-side {
    position: relative;
    z-index: 3;

    display: grid;
    gap: 17px;

    min-width: 0;
}

.wn-crm-connect-app {
    position: relative;

    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;

    min-width: 0;
    padding: 17px;

    border: 1px solid #e0e7ef;
    border-radius: 11px;

    background: rgba(255,255,255,.94);

    box-shadow:
        0 12px 28px rgba(28,51,83,.04);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.wn-crm-connect-app:hover {
    transform: translateY(-3px);

    border-color: #cad8ee;

    box-shadow:
        0 17px 36px rgba(28,51,83,.075);
}

.wn-crm-connect-side--right .wn-crm-connect-app {
    grid-template-columns: auto 43px minmax(0,1fr);
}

.wn-crm-connect-app > b {
    color: #8fa1b7;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.wn-crm-connect-side--left .wn-crm-connect-app > b {
    align-self: start;

    padding-top: 2px;
}

.wn-crm-connect-side--right .wn-crm-connect-app > b {
    align-self: start;

    padding-top: 2px;
}


/* =========================================================
   APP ICON
   ========================================================= */

.wn-crm-connect-app-icon {
    position: relative;

    width: 41px;
    height: 41px;

    border: 1px solid #d9e3f1;
    border-radius: 9px;

    background: #f5f8fe;
}

.wn-crm-connect-app-icon span,
.wn-crm-connect-app-icon i {
    position: absolute;
    display: block;
}


/* WEBSITE */

.wn-crm-connect-app-icon--web span {
    top: 9px;
    left: 9px;

    width: 21px;
    height: 18px;

    border: 1px solid #6588dd;
    border-radius: 3px;
}

.wn-crm-connect-app-icon--web span::before {
    content: "";

    position: absolute;
    top: 4px;
    right: 0;
    left: 0;

    border-top: 1px solid #b2c3e8;
}

.wn-crm-connect-app-icon--web i {
    bottom: 8px;
    left: 15px;

    width: 10px;
    height: 2px;

    background: #6588dd;
}


/* EMAIL */

.wn-crm-connect-app-icon--mail span {
    top: 11px;
    left: 8px;

    width: 23px;
    height: 17px;

    border: 1px solid #6588dd;
    border-radius: 3px;
}

.wn-crm-connect-app-icon--mail span::before,
.wn-crm-connect-app-icon--mail span::after {
    content: "";

    position: absolute;
    top: 4px;

    width: 13px;

    border-top: 1px solid #6588dd;
}

.wn-crm-connect-app-icon--mail span::before {
    left: 0;

    transform: rotate(31deg);
}

.wn-crm-connect-app-icon--mail span::after {
    right: 0;

    transform: rotate(-31deg);
}


/* SHOP */

.wn-crm-connect-app-icon--shop span {
    top: 10px;
    left: 10px;

    width: 19px;
    height: 16px;

    border: 1px solid #6588dd;
    border-radius: 2px;
}

.wn-crm-connect-app-icon--shop span::before {
    content: "";

    position: absolute;
    top: -5px;
    left: 4px;

    width: 9px;
    height: 6px;

    border: 1px solid #6588dd;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
}

.wn-crm-connect-app-icon--shop i {
    bottom: 7px;
    left: 14px;

    width: 11px;

    border-top: 1px solid #6588dd;
}


/* ERP */

.wn-crm-connect-app-icon--erp span {
    top: 8px;
    left: 8px;

    width: 9px;
    height: 9px;

    border: 1px solid #6588dd;
    border-radius: 2px;

    box-shadow:
        14px 0 0 -1px #f5f8fe,
        14px 0 0 0 #6588dd,
        0 14px 0 -1px #f5f8fe,
        0 14px 0 0 #6588dd,
        14px 14px 0 -1px #f5f8fe,
        14px 14px 0 0 #6588dd;
}


/* FINANCE */

.wn-crm-connect-app-icon--finance span {
    top: 8px;
    left: 9px;

    width: 21px;
    height: 23px;

    border: 1px solid #6588dd;
    border-radius: 3px;
}

.wn-crm-connect-app-icon--finance span::before,
.wn-crm-connect-app-icon--finance span::after {
    content: "";

    position: absolute;
    left: 5px;

    width: 10px;

    border-top: 1px solid #6588dd;
}

.wn-crm-connect-app-icon--finance span::before {
    top: 7px;
}

.wn-crm-connect-app-icon--finance span::after {
    top: 13px;
}


/* API */

.wn-crm-connect-app-icon--api span::before,
.wn-crm-connect-app-icon--api span::after {
    position: absolute;
    top: 11px;

    color: #6588dd;

    font-size: 15px;
    font-weight: 500;
}

.wn-crm-connect-app-icon--api span::before {
    content: "<";

    left: 8px;
}

.wn-crm-connect-app-icon--api span::after {
    content: ">";

    left: 23px;
}

.wn-crm-connect-app-icon--api i {
    top: 10px;
    left: 19px;

    width: 1px;
    height: 20px;

    background: #6588dd;

    transform: rotate(17deg);
}


/* =========================================================
   APP COPY
   ========================================================= */

.wn-crm-connect-app-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-connect-app-copy small {
    color: #8e9dad;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-connect-app-copy strong {
    overflow: hidden;

    color: #26364a;

    font-size: 10px;
    font-weight: 680;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-crm-connect-app-copy span {
    color: #8290a1;

    font-size: 9px;
    line-height: 1.45;
}


/* =========================================================
   CRM CORE
   ========================================================= */

.wn-crm-connect-core {
    position: relative;
    z-index: 4;

    min-width: 0;
    padding: 50px 22px;
}

.wn-crm-connect-orbit {
    position: absolute;

    pointer-events: none;

    border: 1px solid rgba(87,126,218,.12);
    border-radius: 50%;
}

.wn-crm-connect-orbit--outer {
    inset: 0;
}

.wn-crm-connect-orbit--inner {
    inset: 34px;

    border-color: rgba(87,126,218,.075);
}

.wn-crm-connect-orbit--outer > i {
    position: absolute;

    width: 7px;
    height: 7px;

    border: 2px solid #fff;
    border-radius: 50%;

    background: #6d90e3;

    box-shadow:
        0 2px 7px rgba(43,82,170,.16);
}

.wn-crm-connect-orbit--outer > i:nth-child(1) {
    top: 20%;
    left: 9%;
}

.wn-crm-connect-orbit--outer > i:nth-child(2) {
    top: 31%;
    right: 5%;
}

.wn-crm-connect-orbit--outer > i:nth-child(3) {
    right: 9%;
    bottom: 20%;
}

.wn-crm-connect-orbit--outer > i:nth-child(4) {
    bottom: 29%;
    left: 5%;
}


/* =========================================================
   CORE CARD
   ========================================================= */

.wn-crm-connect-core-card {
    position: relative;
    z-index: 2;

    overflow: hidden;

    border: 1px solid #ccd9e9;
    border-radius: 15px;

    background: rgba(255,255,255,.98);

    box-shadow:
        0 28px 70px rgba(25,49,82,.12),
        0 8px 24px rgba(25,49,82,.055);
}

.wn-crm-connect-core-top {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr) auto;
    gap: 11px;
    align-items: center;

    min-height: 61px;
    padding: 0 18px;

    border-bottom: 1px solid #e5ebf2;
}

.wn-crm-connect-core-mark {
    position: relative;

    width: 29px;
    height: 29px;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #4c7ae4,
            #7da2f6
        );

    box-shadow:
        0 6px 14px rgba(75,121,226,.18);
}

.wn-crm-connect-core-mark i {
    position: absolute;

    left: 8px;

    height: 1px;

    background: rgba(255,255,255,.75);
}

.wn-crm-connect-core-mark i:first-child {
    top: 11px;
    width: 13px;
}

.wn-crm-connect-core-mark i:last-child {
    top: 17px;
    width: 9px;
}

.wn-crm-connect-core-top > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-connect-core-top small {
    color: #93a0af;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-connect-core-top strong {
    color: #1b293b;

    font-size: 10px;
}

.wn-crm-connect-core-status {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #4f8b71;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
}

.wn-crm-connect-core-status i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #59cf9d;

    box-shadow:
        0 0 0 4px rgba(89,207,157,.09);
}


/* =========================================================
   CORE CUSTOMER
   ========================================================= */

.wn-crm-connect-core-customer {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 12px;
    align-items: center;

    margin: 18px;
    padding: 13px;

    border: 1px solid #e2e8f0;
    border-radius: 9px;

    background: #fafcff;
}

.wn-crm-connect-core-avatar {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    color: #5078d9;

    border: 1px solid #d5e0f3;
    border-radius: 9px;

    background: #eef4ff;

    font-size: 10px;
    font-weight: 800;
}

.wn-crm-connect-core-customer > div:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-connect-core-customer small {
    color: #94a0af;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
}

.wn-crm-connect-core-customer strong {
    color: #1b293b;

    font-size: 12px;
}

.wn-crm-connect-core-customer span {
    color: #8492a3;

    font-size: 9px;
}


/* =========================================================
   CORE DATA
   ========================================================= */

.wn-crm-connect-core-data {
    display: grid;
    grid-template-columns: 1fr 1fr;

    margin: 0 18px;

    border: 1px solid #e2e8f0;
    border-radius: 9px;
}

.wn-crm-connect-core-data > div {
    position: relative;

    display: grid;
    grid-template-columns: 7px minmax(0,1fr);
    column-gap: 7px;

    min-width: 0;
    padding: 11px;
}

.wn-crm-connect-core-data > div:nth-child(2n) {
    border-left: 1px solid #e6ebf1;
}

.wn-crm-connect-core-data > div:nth-child(n+3) {
    border-top: 1px solid #e6ebf1;
}

.wn-crm-connect-core-data > div > span {
    grid-row: 1 / 3;

    width: 5px;
    height: 5px;
    margin-top: 2px;

    border-radius: 50%;
}

.wn-crm-connect-core-data .is-blue {
    background: #6489e2;
}

.wn-crm-connect-core-data .is-green {
    background: #58c69a;
}

.wn-crm-connect-core-data .is-gold {
    background: #d3ad62;
}

.wn-crm-connect-core-data .is-purple {
    background: #957ed8;
}

.wn-crm-connect-core-data small {
    color: #98a4b2;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.wn-crm-connect-core-data strong {
    overflow: hidden;

    color: #425166;

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   SYNC
   ========================================================= */

.wn-crm-connect-sync {
    margin: 15px 18px 18px;
    padding-top: 13px;

    border-top: 1px solid #e8edf3;
}

.wn-crm-connect-sync-head {
    display: flex;
    justify-content: space-between;

    margin-bottom: 10px;
}

.wn-crm-connect-sync-head span {
    color: #7b899a;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-connect-sync-head small {
    color: #a3adb9;

    font-size: 9px;
}

.wn-crm-connect-sync-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.wn-crm-connect-sync-row > span {
    display: flex;
    align-items: center;
    gap: 5px;

    color: #66778b;

    font-size: 9px;
    font-weight: 650;
}

.wn-crm-connect-sync-row > span i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #6489e2;
}

.wn-crm-connect-sync-row > span:last-of-type i {
    background: #58c69a;
}

.wn-crm-connect-sync-row b {
    color: #7795d8;

    font-size: 9px;
    font-weight: 500;
}


/* =========================================================
   CORE CAPTION
   ========================================================= */

.wn-crm-connect-core-caption {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;

    margin-top: 17px;
}

.wn-crm-connect-core-caption i {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ccd9e9
        );
}

.wn-crm-connect-core-caption i:last-child {
    background:
        linear-gradient(
            90deg,
            #ccd9e9,
            transparent
        );
}

.wn-crm-connect-core-caption span {
    color: #7187b6;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}


/* =========================================================
   CONNECTED WORKFLOW
   ========================================================= */

.wn-crm-connect-flow {
    margin-top: 46px;
    padding: 28px;

    border: 1px solid #e0e7ef;
    border-radius: 13px;

    background: rgba(255,255,255,.77);
}

.wn-crm-connect-flow-head {
    display: grid;
    grid-template-columns: minmax(300px,.85fr) minmax(300px,.6fr);
    gap: 70px;
    align-items: end;
}

.wn-crm-connect-flow-head > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.wn-crm-connect-flow-head span {
    color: #557bd1;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.wn-crm-connect-flow-head strong {
    color: #26364a;

    font-size: 15px;
    font-weight: 650;
}

.wn-crm-connect-flow-head p {
    max-width: 420px;
    margin: 0 0 0 auto;

    color: #8290a0;

    font-size: 9px;
    line-height: 1.6;
}

.wn-crm-connect-flow-track {
    display: grid;
    grid-template-columns:
        auto 1fr
        auto 1fr
        auto 1fr
        auto 1fr
        auto;

    align-items: center;

    margin-top: 27px;
}

.wn-crm-connect-flow-step {
    display: flex;
    align-items: center;
    gap: 9px;
}

.wn-crm-connect-flow-step > span {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    color: #6284d3;

    border: 1px solid #cfdbef;
    border-radius: 50%;

    background: #f5f8fe;

    font-size: 9px;
    font-weight: 800;
}

.wn-crm-connect-flow-step.is-first > span {
    color: #fff;

    border-color: #6086df;
    background: #6086df;
}

.wn-crm-connect-flow-step.is-last > span {
    color: #4b9c79;

    border-color: #cfe8dd;
    background: #f3fbf7;
}

.wn-crm-connect-flow-step > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-connect-flow-step small {
    color: #9aa6b4;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.wn-crm-connect-flow-step strong {
    color: #506075;

    font-size: 9px;
    font-weight: 650;
    white-space: nowrap;
}

.wn-crm-connect-flow-track > i {
    position: relative;

    height: 1px;
    margin: 0 11px;

    background:
        linear-gradient(
            90deg,
            #cdd9e8,
            #8ca8e3
        );
}

.wn-crm-connect-flow-track > i::after {
    content: "";

    position: absolute;
    top: -2px;
    right: 0;

    width: 5px;
    height: 5px;

    border-top: 1px solid #6d8ed7;
    border-right: 1px solid #6d8ed7;

    transform: rotate(45deg);
}


/* =========================================================
   BOTTOM
   ========================================================= */

.wn-crm-connect-bottom {
    display: grid;
    grid-template-columns:
        70px
        minmax(380px,.9fr)
        minmax(320px,.65fr);

    gap: 30px;
    align-items: center;

    margin-top: 69px;
    padding-top: 35px;

    border-top: 1px solid #e1e7ef;
}

.wn-crm-connect-bottom-number {
    color: rgba(83,122,211,.17);

    font-size: 48px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.06em;
}

.wn-crm-connect-bottom-copy > span {
    color: #587bd0;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

.wn-crm-connect-bottom h3 {
    margin: 7px 0 0;

    color: #344459;

    font-size: 20px;
    font-weight: 450;
    line-height: 1.35;
    letter-spacing: -.018em;
}

.wn-crm-connect-bottom h3 strong {
    color: #5d82dd;
    font-weight: 650;
}

.wn-crm-connect-bottom > p {
    max-width: 470px;
    margin: 0 0 0 auto;

    color: #7c8a9b;

    font-size: 11px;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE — 1100
   ========================================================= */

@media (max-width: 1100px) {

    .wn-crm-connect .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-crm-connect {
        padding: 94px 0 90px;
    }

    .wn-crm-connect-head {
        gap: 55px;
    }

    .wn-crm-connect-network {
        grid-template-columns:
            minmax(200px,.7fr)
            minmax(390px,1.2fr)
            minmax(200px,.7fr);

        gap: 27px;
    }

    .wn-crm-connect-app {
        padding: 14px;
    }

    .wn-crm-connect-lines {
        display: none;
    }

    .wn-crm-connect-flow {
        padding: 23px;
    }

    .wn-crm-connect-flow-step strong {
        font-size: 9px;
    }

}


/* =========================================================
   RESPONSIVE — 900
   ========================================================= */

@media (max-width: 900px) {

    .wn-crm-connect .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-crm-connect-head {
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .wn-crm-connect-intro {
        max-width: 620px;
    }

    .wn-crm-connect-network {
        display: flex;
        flex-direction: column;

        margin-top: 56px;
        padding-top: 55px;
    }

    .wn-crm-connect-core {
        order: 1;

        width: min(100%, 610px);
        margin-inline: auto;
    }

    .wn-crm-connect-side {
        grid-template-columns: repeat(3,minmax(0,1fr));

        width: 100%;
    }

    .wn-crm-connect-side--left {
        order: 2;
    }

    .wn-crm-connect-side--right {
        order: 3;
    }

    .wn-crm-connect-side--right .wn-crm-connect-app,
    .wn-crm-connect-app {
        grid-template-columns: 43px minmax(0,1fr);
    }

    .wn-crm-connect-app > b {
        position: absolute;

        top: 11px;
        right: 11px;
    }

    .wn-crm-connect-flow-head {
        gap: 40px;
    }

    .wn-crm-connect-flow-track {
        grid-template-columns:
            auto 1fr
            auto 1fr
            auto;
        row-gap: 22px;
    }

    .wn-crm-connect-flow-track > i:nth-of-type(3) {
        display: none;
    }

    .wn-crm-connect-flow-step:nth-of-type(4),
    .wn-crm-connect-flow-step:nth-of-type(5) {
        margin-top: 4px;
    }

    .wn-crm-connect-bottom {
        grid-template-columns: 60px 1fr;
    }

    .wn-crm-connect-bottom > p {
        grid-column: 2;

        max-width: 620px;
        margin: 0;
    }

}


/* =========================================================
   MOBILE — 640
   ========================================================= */

@media (max-width: 640px) {

    .wn-crm-connect .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-crm-connect {
        padding: 72px 0 68px;
    }

    .wn-crm-section-kicker--connect {
        margin-bottom: 17px;

        font-size: 9px;
        line-height: 1.35;
    }

    .wn-crm-section-kicker--connect > span {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .wn-crm-connect h2 {
        font-size: clamp(38px,11vw,50px);
        line-height: 1.02;
    }

    .wn-crm-connect-intro p {
        font-size: 13px;
        line-height: 1.68;
    }

    .wn-crm-connect-network {
        gap: 11px;

        margin-top: 40px;
        padding: 48px 0 20px;
    }

    .wn-crm-connect-network-label {
        align-items: flex-start;
    }

    .wn-crm-connect-network-label small {
        max-width: 100px;

        text-align: right;
        line-height: 1.35;
    }

    .wn-crm-connect-core {
        width: 100%;
        padding: 14px 0 20px;
    }

    .wn-crm-connect-orbit {
        display: none;
    }

    .wn-crm-connect-core-card {
        border-radius: 12px;
    }

    .wn-crm-connect-core-top {
        padding: 0 14px;
    }

    .wn-crm-connect-core-customer {
        margin: 14px;
    }

    .wn-crm-connect-core-data {
        margin: 0 14px;
    }

    .wn-crm-connect-sync {
        margin: 13px 14px 14px;
    }

    .wn-crm-connect-sync-row {
        gap: 4px;
    }

    .wn-crm-connect-sync-row > span {
        font-size: 9px;
    }

    .wn-crm-connect-side {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .wn-crm-connect-app,
    .wn-crm-connect-side--right .wn-crm-connect-app {
        grid-template-columns: 41px minmax(0,1fr);

        padding: 14px;
    }

    .wn-crm-connect-app-copy strong {
        font-size: 10px;
    }

    .wn-crm-connect-flow {
        margin-top: 30px;
        padding: 18px 15px;
    }

    .wn-crm-connect-flow-head {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wn-crm-connect-flow-head p {
        margin: 0;
    }

    .wn-crm-connect-flow-track {
        display: block;

        margin-top: 23px;
    }

    .wn-crm-connect-flow-step {
        position: relative;

        min-height: 46px;
    }

    .wn-crm-connect-flow-track > i {
        width: 1px;
        height: 20px;
        margin: 3px 0 3px 14px;

        background:
            linear-gradient(
                #cdd9e8,
                #8ca8e3
            );
    }

    .wn-crm-connect-flow-track > i::after {
        top: auto;
        right: -2px;
        bottom: 0;

        transform: rotate(135deg);
    }

    .wn-crm-connect-flow-track > i:nth-of-type(3) {
        display: block;
    }

    .wn-crm-connect-flow-step:nth-of-type(4),
    .wn-crm-connect-flow-step:nth-of-type(5) {
        margin-top: 0;
    }

    .wn-crm-connect-bottom {
        grid-template-columns: 1fr;
        gap: 15px;

        margin-top: 46px;
        padding-top: 27px;
    }

    .wn-crm-connect-bottom-number {
        font-size: 37px;
    }

    .wn-crm-connect-bottom > p {
        grid-column: auto;

        margin-top: 3px;
    }

}


/* =========================================================
   SMALL MOBILE — 390
   ========================================================= */

@media (max-width: 390px) {

    .wn-crm-connect .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-crm-connect h2 {
        font-size: 37px;
    }

    .wn-crm-connect-core-data > div {
        padding: 9px 7px;
    }

    .wn-crm-connect-sync-row b {
        font-size: 9px;
    }

}
/* =========================================================
   CUSTOM CRM DEVELOPMENT
   05 — ROLES, ACCESS & RESPONSIBILITIES
   ========================================================= */

.wn-crm-roles {
    position: relative;
    overflow: hidden;

    padding: 112px 0 102px;

    color: #dce6f1;

    background:
        radial-gradient(
            circle at 56% 49%,
            rgba(78, 121, 220, .11),
            transparent 30%
        ),
        #071521;
}

.wn-crm-roles::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(rgba(255,255,255,.021) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.021) 1px, transparent 1px);

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 17%,
            #000 87%,
            transparent
        );
}

.wn-crm-roles .wn-wrap {
    position: relative;
    z-index: 2;

    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   HEAD
   ========================================================= */

.wn-crm-roles-head {
    display: grid;
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(320px, .62fr);

    gap: clamp(70px, 9vw, 140px);
    align-items: end;
}

.wn-crm-section-kicker--roles {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 0 0 23px;

    color: #7898e8;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.wn-crm-section-kicker--roles > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    color: #9db6f3;

    border: 1px solid rgba(126,158,235,.28);
    border-radius: 50%;

    font-size: 9px;
}

.wn-crm-roles h2 {
    max-width: 790px;
    margin: 0;

    color: #f3f6fa;

    font-size: clamp(48px, 4.4vw, 66px);
    font-weight: 720;
    line-height: 1;
    letter-spacing: -.048em;
}

.wn-crm-roles h2 span {
    color: #668ce8;
}

.wn-crm-roles-intro {
    max-width: 470px;
    padding-bottom: 4px;
}

.wn-crm-roles-intro p {
    margin: 0;

    color: #8799ac;

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   INTERNAL LINK
   ========================================================= */

.wn-crm-roles-text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 20px;
    padding-bottom: 4px;

    color: #9ab3ed;

    border-bottom: 1px solid rgba(122,157,236,.28);

    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .025em;

    text-decoration: none;

    transition:
        color .2s ease,
        border-color .2s ease;
}

.wn-crm-roles-text-link span {
    font-size: 10px;

    transition: transform .2s ease;
}

.wn-crm-roles-text-link:hover {
    color: #c1d0f3;
    border-color: rgba(154,179,237,.62);
}

.wn-crm-roles-text-link:hover span {
    transform: translate(2px,-2px);
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.wn-crm-roles-workspace {
    display: grid;
    grid-template-columns:
        210px
        minmax(500px,1fr)
        220px;

    gap: 18px;

    margin-top: 72px;
}


/* =========================================================
   ROLE SWITCHER
   ========================================================= */

.wn-crm-roles-switcher {
    overflow: hidden;

    border: 1px solid #20374b;
    border-radius: 13px;

    background: #091a28;
}

.wn-crm-roles-switcher-head {
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 18px;

    border-bottom: 1px solid rgba(255,255,255,.065);
}

.wn-crm-roles-switcher-head span {
    color: #748ba2;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.wn-crm-roles-switcher-head small {
    color: #455d72;

    font-size: 9px;
}

.wn-crm-role {
    position: relative;

    display: grid;
    grid-template-columns: 18px 31px minmax(0,1fr) auto;
    gap: 9px;
    align-items: center;

    min-height: 68px;
    padding: 10px 13px;

    border-bottom: 1px solid rgba(255,255,255,.055);
}

.wn-crm-role.is-active {
    background:
        linear-gradient(
            90deg,
            rgba(84,128,229,.13),
            rgba(84,128,229,.025)
        );
}

.wn-crm-role.is-active::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 2px;

    background: #638bec;
}

.wn-crm-role-number {
    color: #45627d;

    font-size: 9px;
    font-weight: 800;
}

.wn-crm-role.is-active .wn-crm-role-number {
    color: #7899e7;
}

.wn-crm-role-icon {
    position: relative;

    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border: 1px solid #28435c;
    border-radius: 7px;

    background: #0c2132;
}

.wn-crm-role-icon i {
    position: relative;

    width: 8px;
    height: 8px;

    border: 1px solid #7089a4;
    border-radius: 50%;
}

.wn-crm-role-icon i::after {
    content: "";

    position: absolute;

    top: 10px;
    left: -3px;

    width: 12px;
    height: 5px;

    border: 1px solid #7089a4;
    border-radius: 7px 7px 3px 3px;
}

.wn-crm-role.is-active .wn-crm-role-icon {
    border-color: rgba(103,143,235,.34);

    background: rgba(83,128,230,.09);
}

.wn-crm-role.is-active .wn-crm-role-icon i,
.wn-crm-role.is-active .wn-crm-role-icon i::after {
    border-color: #83a2e9;
}

.wn-crm-role > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-role small {
    color: #506a81;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.wn-crm-role strong {
    color: #aebdcb;

    font-size: 9px;
    font-weight: 650;
}

.wn-crm-role.is-active strong {
    color: #d4dfeb;
}

.wn-crm-role > b {
    color: #3d5d79;

    font-size: 9px;
    font-weight: 400;
}

.wn-crm-role.is-active > b {
    color: #7193df;
}


/* =========================================================
   SWITCHER NOTE
   ========================================================= */

.wn-crm-roles-switcher-note {
    display: grid;
    grid-template-columns: 27px minmax(0,1fr);
    gap: 9px;
    align-items: start;

    margin: 14px;
    padding: 12px;

    border: 1px solid rgba(102,142,232,.12);
    border-radius: 8px;

    background: rgba(78,121,220,.035);
}

.wn-crm-roles-switcher-note > span {
    display: grid;
    place-items: center;

    width: 26px;
    height: 26px;

    border: 1px solid rgba(102,142,232,.19);
    border-radius: 50%;
}

.wn-crm-roles-switcher-note i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #6589dd;
}

.wn-crm-roles-switcher-note p {
    margin: 0;

    color: #5f758b;

    font-size: 9px;
    line-height: 1.55;
}


/* =========================================================
   MAIN CRM
   ========================================================= */

.wn-crm-roles-main {
    min-width: 0;
    overflow: hidden;

    border: 1px solid #284057;
    border-radius: 14px;

    background: #0a1b29;

    box-shadow:
        0 28px 65px rgba(0,0,0,.2);
}

.wn-crm-roles-main-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    min-height: 62px;
    padding: 0 18px;

    border-bottom: 1px solid rgba(255,255,255,.07);
}

.wn-crm-roles-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wn-crm-roles-brand-mark {
    position: relative;

    width: 30px;
    height: 30px;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #4776df,
            #789df1
        );
}

.wn-crm-roles-brand-mark i {
    position: absolute;
    left: 8px;

    height: 1px;

    background: rgba(255,255,255,.75);
}

.wn-crm-roles-brand-mark i:first-child {
    top: 11px;
    width: 14px;
}

.wn-crm-roles-brand-mark i:last-child {
    top: 17px;
    width: 9px;
}

.wn-crm-roles-brand > div,
.wn-crm-roles-user > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-roles-brand small,
.wn-crm-roles-user small {
    color: #5e748a;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-roles-brand strong,
.wn-crm-roles-user strong {
    color: #c4d0dc;

    font-size: 9px;
}

.wn-crm-roles-user {
    display: flex;
    align-items: center;
    gap: 9px;

    text-align: right;
}

.wn-crm-roles-user > span {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    color: #86a3e6;

    border: 1px solid #29445d;
    border-radius: 50%;

    background: #0e2335;

    font-size: 9px;
    font-weight: 800;
}


/* =========================================================
   DASHBOARD HEAD
   ========================================================= */

.wn-crm-roles-dashboard-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;

    padding: 20px 20px 17px;
}

.wn-crm-roles-dashboard-head > div {
    display: flex;
    flex-direction: column;
}

.wn-crm-roles-dashboard-head small {
    margin-bottom: 5px;

    color: #6482c8;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-roles-dashboard-head strong {
    color: #e0e7ef;

    font-size: 16px;
    font-weight: 650;
}

.wn-crm-roles-dashboard-head p {
    margin: 5px 0 0;

    color: #61778c;

    font-size: 9px;
}

.wn-crm-roles-dashboard-head button {
    flex: 0 0 auto;

    padding: 10px 12px;

    color: #b9c9ed;

    border: 1px solid rgba(94,136,231,.27);
    border-radius: 7px;

    background: rgba(75,119,220,.07);

    font: inherit;
    font-size: 9px;
    font-weight: 650;

    cursor: default;
}


/* =========================================================
   METRICS
   ========================================================= */

.wn-crm-roles-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    margin: 0 20px;

    border: 1px solid #20394f;
    border-radius: 9px;

    background: #091925;
}

.wn-crm-roles-metrics article {
    min-width: 0;
    padding: 12px 13px;
}

.wn-crm-roles-metrics article + article {
    border-left: 1px solid #20394f;
}

.wn-crm-roles-metrics article > small {
    color: #546d83;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.wn-crm-roles-metrics article > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;

    margin-top: 6px;
}

.wn-crm-roles-metrics strong {
    color: #d3dde7;

    font-size: 15px;
    font-weight: 650;
}

.wn-crm-roles-metrics span {
    color: #587460;

    font-size: 9px;
}


/* =========================================================
   DASHBOARD PANELS
   ========================================================= */

.wn-crm-roles-dashboard {
    display: grid;
    grid-template-columns: 1.35fr .85fr;
    gap: 11px;

    padding: 11px 20px 18px;
}

.wn-crm-roles-pipeline,
.wn-crm-roles-today {
    min-width: 0;
    overflow: hidden;

    border: 1px solid #20394f;
    border-radius: 9px;

    background: #091925;
}

.wn-crm-roles-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    min-height: 48px;
    padding: 0 12px;

    border-bottom: 1px solid #20394f;
}

.wn-crm-roles-panel-head > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-roles-panel-head small {
    color: #536b81;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
}

.wn-crm-roles-panel-head strong {
    color: #b6c4d1;

    font-size: 9px;
}

.wn-crm-roles-panel-head a {
    color: #6f8fd8;

    font-size: 9px;
    text-decoration: none;
}

.wn-crm-roles-panel-head a span {
    margin-left: 4px;
}


/* =========================================================
   DEALS
   ========================================================= */

.wn-crm-roles-deal {
    display: grid;
    grid-template-columns: 7px minmax(0,1fr) auto auto;
    gap: 9px;
    align-items: center;

    min-height: 49px;
    padding: 0 12px;
}

.wn-crm-roles-deal + .wn-crm-roles-deal {
    border-top: 1px solid rgba(255,255,255,.045);
}

.wn-crm-roles-deal-mark {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #668de8;
}

.wn-crm-roles-deal-mark.is-green {
    background: #57c797;
}

.wn-crm-roles-deal > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.wn-crm-roles-deal strong {
    overflow: hidden;

    color: #aebdca;

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-crm-roles-deal small {
    color: #536a80;

    font-size: 9px;
}

.wn-crm-roles-deal-stage {
    padding: 4px 6px;

    color: #718fda;

    border: 1px solid rgba(95,134,223,.15);
    border-radius: 10px;

    font-size: 4px;
    font-weight: 800;
    letter-spacing: .06em;
}

.wn-crm-roles-deal-stage.is-green {
    color: #62b894;

    border-color: rgba(79,190,143,.15);
}

.wn-crm-roles-deal > b {
    min-width: 32px;

    color: #899bab;

    font-size: 9px;
    font-weight: 650;
    text-align: right;
}


/* =========================================================
   TASKS
   ========================================================= */

.wn-crm-roles-today-count {
    display: grid;
    place-items: center;

    width: 23px;
    height: 23px;

    color: #7d9be2;

    border: 1px solid #2c4761;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.wn-crm-roles-task {
    display: grid;
    grid-template-columns: 17px minmax(0,1fr);
    gap: 8px;
    align-items: center;

    min-height: 49px;
    padding: 0 11px;
}

.wn-crm-roles-task + .wn-crm-roles-task {
    border-top: 1px solid rgba(255,255,255,.045);
}

.wn-crm-roles-task-check {
    width: 14px;
    height: 14px;

    border: 1px solid #35516a;
    border-radius: 4px;

    background: #0c1f2f;
}

.wn-crm-roles-task > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.wn-crm-roles-task strong {
    overflow: hidden;

    color: #aebdca;

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-crm-roles-task small {
    color: #536a80;

    font-size: 9px;
}


/* =========================================================
   CONTEXT BAR
   ========================================================= */

.wn-crm-roles-context {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    min-height: 45px;
    padding: 0 20px;

    border-top: 1px solid rgba(255,255,255,.065);

    background: #081722;
}

.wn-crm-roles-context > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.wn-crm-roles-context > div > span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #5f88e5;

    box-shadow: 0 0 0 4px rgba(95,136,229,.07);
}

.wn-crm-roles-context p {
    margin: 0;

    color: #61788d;

    font-size: 9px;
}

.wn-crm-roles-context p strong {
    color: #94abe0;
}

.wn-crm-roles-context > small {
    color: #465f75;

    font-size: 9px;
}


/* =========================================================
   ACCESS PANEL
   ========================================================= */

.wn-crm-roles-access {
    overflow: hidden;

    border: 1px solid #20374b;
    border-radius: 13px;

    background: #091a28;
}

.wn-crm-roles-access-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    min-height: 65px;
    padding: 0 14px;

    border-bottom: 1px solid rgba(255,255,255,.065);
}

.wn-crm-roles-access-head > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wn-crm-roles-access-head > div span {
    color: #597188;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
}

.wn-crm-roles-access-head strong {
    color: #c1ceda;

    font-size: 9px;
}

.wn-crm-roles-access-status {
    padding: 5px 6px;

    color: #65bd98;

    border: 1px solid rgba(79,190,143,.14);
    border-radius: 10px;

    background: rgba(79,190,143,.04);

    font-size: 4px;
    font-weight: 800;
    letter-spacing: .07em;
}


/* =========================================================
   ACCESS GROUPS
   ========================================================= */

.wn-crm-roles-access-group {
    padding: 15px 14px;

    border-bottom: 1px solid rgba(255,255,255,.055);
}

.wn-crm-roles-access-label {
    display: block;

    margin-bottom: 11px;

    color: #536c83;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-roles-access-item {
    display: grid;
    grid-template-columns: 18px minmax(0,1fr);
    gap: 7px;
    align-items: center;

    min-height: 29px;
}

.wn-crm-roles-access-item > span {
    display: grid;
    place-items: center;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.wn-crm-roles-access-item > span.is-on {
    color: #62c99d;

    border: 1px solid rgba(79,190,143,.16);
    background: rgba(79,190,143,.055);
}

.wn-crm-roles-access-item > span.is-off {
    color: #627487;

    border: 1px solid #2a4054;
    background: #0c1e2c;
}

.wn-crm-roles-access-item p {
    margin: 0;

    color: #8496a7;

    font-size: 9px;
}


/* =========================================================
   ACCESS SCOPE
   ========================================================= */

.wn-crm-roles-access-scope {
    display: flex;
    flex-direction: column;
    gap: 13px;

    margin: 14px;
    padding: 13px;

    border: 1px solid rgba(96,136,227,.12);
    border-radius: 8px;

    background: rgba(78,121,220,.035);
}

.wn-crm-roles-access-scope > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wn-crm-roles-access-scope small {
    color: #536d85;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.wn-crm-roles-access-scope strong {
    color: #9cadbd;

    font-size: 9px;
}

.wn-crm-roles-access-scope > span {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #6887cd;

    font-size: 4px;
    font-weight: 800;
    letter-spacing: .08em;
}

.wn-crm-roles-access-scope > span i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #668de8;
}


/* =========================================================
   ROLE LOGIC
   ========================================================= */

.wn-crm-roles-logic {
    display: grid;
    grid-template-columns: 300px minmax(0,1fr);
    gap: 70px;
    align-items: center;

    margin-top: 52px;
    padding: 30px 0;

    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.wn-crm-roles-logic-intro > span {
    color: #6688d7;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.wn-crm-roles-logic-intro h3 {
    margin: 7px 0 0;

    color: #8a9db0;

    font-size: 14px;
    font-weight: 450;
    line-height: 1.45;
}

.wn-crm-roles-logic-intro h3 strong {
    color: #9db5eb;
    font-weight: 650;
}

.wn-crm-roles-logic-flow {
    display: grid;
    grid-template-columns:
        auto 1fr
        auto 1fr
        auto 1fr
        auto;

    align-items: center;
}

.wn-crm-roles-logic-flow > div {
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    column-gap: 8px;

    min-width: 0;
}

.wn-crm-roles-logic-flow > div > span {
    grid-row: 1 / 3;

    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;

    color: #7595dd;

    border: 1px solid #2e4a65;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 800;
}

.wn-crm-roles-logic-flow small {
    color: #506a82;

    font-size: 4px;
    font-weight: 800;
    letter-spacing: .09em;
}

.wn-crm-roles-logic-flow strong {
    margin-top: 3px;

    color: #899bad;

    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

.wn-crm-roles-logic-flow > i {
    position: relative;

    height: 1px;
    margin: 0 8px;

    background: #29465f;
}

.wn-crm-roles-logic-flow > i::after {
    content: "";

    position: absolute;
    top: -2px;
    right: 0;

    width: 5px;
    height: 5px;

    border-top: 1px solid #5276c5;
    border-right: 1px solid #5276c5;

    transform: rotate(45deg);
}


/* =========================================================
   BOTTOM STATEMENT
   ========================================================= */

.wn-crm-roles-bottom {
    display: grid;
    grid-template-columns:
        70px
        minmax(380px,.9fr)
        minmax(320px,.65fr);

    gap: 30px;
    align-items: center;

    margin-top: 63px;
}

.wn-crm-roles-bottom-number {
    color: rgba(93,132,220,.17);

    font-size: 48px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.06em;
}

.wn-crm-roles-bottom-copy > span {
    color: #6688d7;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

.wn-crm-roles-bottom h3 {
    margin: 7px 0 0;

    color: #8598ab;

    font-size: 20px;
    font-weight: 450;
    line-height: 1.35;
    letter-spacing: -.018em;
}

.wn-crm-roles-bottom h3 strong {
    color: #9cb5ed;
    font-weight: 650;
}

.wn-crm-roles-bottom > p {
    max-width: 470px;
    margin: 0 0 0 auto;

    color: #6c8094;

    font-size: 11px;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE — 1100
   ========================================================= */

@media (max-width: 1100px) {

    .wn-crm-roles .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-crm-roles {
        padding: 94px 0 90px;
    }

    .wn-crm-roles-head {
        gap: 55px;
    }

    .wn-crm-roles-workspace {
        grid-template-columns:
            185px
            minmax(450px,1fr)
            195px;

        gap: 12px;
    }

    .wn-crm-role {
        grid-template-columns: 15px 28px minmax(0,1fr);
    }

    .wn-crm-role > b {
        display: none;
    }

}


/* =========================================================
   TABLET — 900
   ========================================================= */

@media (max-width: 900px) {

    .wn-crm-roles .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-crm-roles-head {
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .wn-crm-roles-intro {
        max-width: 620px;
    }

    .wn-crm-roles-workspace {
        grid-template-columns: 1fr;
    }

    .wn-crm-roles-main {
        order: 1;
    }

    .wn-crm-roles-switcher {
        order: 2;

        display: grid;
        grid-template-columns: repeat(4,1fr);
    }

    .wn-crm-roles-switcher-head,
    .wn-crm-roles-switcher-note {
        grid-column: 1 / -1;
    }

    .wn-crm-role {
        display: block;

        min-height: auto;
        padding: 15px;

        border-bottom: 0;
    }

    .wn-crm-role + .wn-crm-role {
        border-left: 1px solid rgba(255,255,255,.055);
    }

    .wn-crm-role-number {
        display: block;

        margin-bottom: 11px;
    }

    .wn-crm-role-icon {
        margin-bottom: 13px;
    }

    .wn-crm-role > div {
        gap: 4px;
    }

    .wn-crm-roles-access {
        order: 3;

        display: grid;
        grid-template-columns: repeat(3,1fr);
    }

    .wn-crm-roles-access-head,
    .wn-crm-roles-access-scope {
        grid-column: 1 / -1;
    }

    .wn-crm-roles-access-group {
        border-bottom: 0;
    }

    .wn-crm-roles-access-group + .wn-crm-roles-access-group {
        border-left: 1px solid rgba(255,255,255,.055);
    }

    .wn-crm-roles-logic {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .wn-crm-roles-bottom {
        grid-template-columns: 60px 1fr;
    }

    .wn-crm-roles-bottom > p {
        grid-column: 2;

        max-width: 620px;
        margin: 0;
    }

}


/* =========================================================
   MOBILE — 640
   ========================================================= */

@media (max-width: 640px) {

    .wn-crm-roles .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-crm-roles {
        padding: 72px 0 68px;
    }

    .wn-crm-section-kicker--roles {
        margin-bottom: 17px;

        font-size: 9px;
        line-height: 1.35;
    }

    .wn-crm-section-kicker--roles > span {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .wn-crm-roles h2 {
        font-size: clamp(38px,11vw,50px);
        line-height: 1.02;
    }

    .wn-crm-roles-intro p {
        font-size: 13px;
        line-height: 1.68;
    }

    .wn-crm-roles-text-link {
        margin-top: 16px;

        font-size: 9px;
    }

    .wn-crm-roles-workspace {
        margin-top: 43px;
    }

    .wn-crm-roles-main-top {
        padding: 0 13px;
    }

    .wn-crm-roles-user > div {
        display: none;
    }

    .wn-crm-roles-dashboard-head {
        align-items: start;

        padding: 16px 13px 14px;
    }

    .wn-crm-roles-dashboard-head strong {
        font-size: 14px;
    }

    .wn-crm-roles-dashboard-head p {
        max-width: 190px;
        line-height: 1.45;
    }

    .wn-crm-roles-dashboard-head button {
        padding: 8px;

        font-size: 9px;
    }

    .wn-crm-roles-metrics {
        margin: 0 13px;
    }

    .wn-crm-roles-metrics article {
        padding: 10px 8px;
    }

    .wn-crm-roles-metrics article > div {
        display: block;
    }

    .wn-crm-roles-metrics strong {
        display: block;

        font-size: 12px;
    }

    .wn-crm-roles-metrics span {
        display: block;

        margin-top: 3px;
    }

    .wn-crm-roles-dashboard {
        grid-template-columns: 1fr;

        padding: 10px 13px 14px;
    }

    .wn-crm-roles-context {
        padding: 10px 13px;
    }

    .wn-crm-roles-context > small {
        display: none;
    }

    .wn-crm-roles-switcher {
        grid-template-columns: 1fr 1fr;
    }

    .wn-crm-role:nth-of-type(4) {
        border-left: 0;
    }

    .wn-crm-role:nth-of-type(n+4) {
        border-top: 1px solid rgba(255,255,255,.055);
    }

    .wn-crm-roles-access {
        grid-template-columns: 1fr;
    }

    .wn-crm-roles-access-head,
    .wn-crm-roles-access-scope {
        grid-column: auto;
    }

    .wn-crm-roles-access-group + .wn-crm-roles-access-group {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.055);
    }

    .wn-crm-roles-logic {
        margin-top: 37px;
    }

    .wn-crm-roles-logic-flow {
        grid-template-columns: 1fr;
    }

    .wn-crm-roles-logic-flow > div {
        min-height: 40px;
    }

    .wn-crm-roles-logic-flow > i {
        width: 1px;
        height: 17px;
        margin: 3px 0 3px 13px;
    }

    .wn-crm-roles-logic-flow > i::after {
        top: auto;
        right: -2px;
        bottom: 0;

        transform: rotate(135deg);
    }

    .wn-crm-roles-bottom {
        grid-template-columns: 1fr;
        gap: 15px;

        margin-top: 45px;
    }

    .wn-crm-roles-bottom-number {
        font-size: 37px;
    }

    .wn-crm-roles-bottom > p {
        grid-column: auto;

        margin-top: 3px;
    }

}


/* =========================================================
   SMALL MOBILE — 390
   ========================================================= */

@media (max-width: 390px) {

    .wn-crm-roles .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-crm-roles h2 {
        font-size: 37px;
    }

    .wn-crm-roles-dashboard-head button {
        display: none;
    }

    .wn-crm-roles-deal {
        grid-template-columns: 7px minmax(0,1fr) auto;
    }

    .wn-crm-roles-deal-stage {
        display: none;
    }

}
/* =========================================================
   CUSTOM CRM DEVELOPMENT
   06 — FROM BUSINESS PROCESS TO WORKING CRM
   ========================================================= */

.wn-crm-build {
    position: relative;
    overflow: hidden;

    padding: 96px 0 78px;

    color: #101d2f;

    background:
        radial-gradient(
            circle at 50% 55%,
            rgba(82,126,225,.055),
            transparent 34%
        ),
        #fbfcfe;
}

.wn-crm-build::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(rgba(17,43,75,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,43,75,.024) 1px, transparent 1px);

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 15%,
            #000 85%,
            transparent
        );
}


/* =========================================================
   SITE WIDTH
   ========================================================= */

.wn-crm-build .wn-wrap {
    position: relative;
    z-index: 2;

    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   HEAD
   ========================================================= */

.wn-crm-build-head {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(310px, .58fr);

    gap: clamp(65px, 9vw, 135px);
    align-items: end;
}

.wn-crm-section-kicker--build {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 0 0 21px;

    color: #527cdf;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.wn-crm-section-kicker--build > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    color: #557ee0;

    border: 1px solid rgba(73,116,216,.2);
    border-radius: 50%;

    background: #fff;

    font-size: 9px;
}

.wn-crm-build h2 {
    max-width: 800px;
    margin: 0;

    color: #111d2e;

    font-size: clamp(46px, 4vw, 61px);
    font-weight: 720;
    line-height: 1.01;
    letter-spacing: -.048em;
}

.wn-crm-build h2 span {
    display: block;
    color: #5b82df;
}

.wn-crm-build-intro {
    max-width: 455px;
    padding-bottom: 3px;
}

.wn-crm-build-intro p {
    margin: 0;

    color: #6e7e91;

    font-size: 13px;
    line-height: 1.72;
}

.wn-crm-build-intro a,
.wn-crm-build-step p a {
    color: #365fbf;

    font-weight: 650;
    text-decoration: none;

    border-bottom: 1px solid rgba(54,95,191,.24);

    transition:
        color .2s ease,
        border-color .2s ease;
}

.wn-crm-build-intro a:hover,
.wn-crm-build-step p a:hover {
    color: #234aab;
    border-color: rgba(35,74,171,.55);
}


/* =========================================================
   PROCESS
   ========================================================= */

.wn-crm-build-process {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        34px
        minmax(0,1fr)
        34px
        minmax(0,1fr)
        34px
        minmax(0,1fr);

    align-items: stretch;

    margin-top: 58px;
}


/* =========================================================
   STEP
   ========================================================= */

.wn-crm-build-step {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 286px;
    padding: 23px 22px 20px;

    border: 1px solid #e0e6ee;
    border-radius: 12px;

    background: rgba(255,255,255,.9);

    box-shadow:
        0 13px 38px rgba(22,43,69,.045);
}

.wn-crm-build-step-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wn-crm-build-number {
    color: #567edb;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.wn-crm-build-phase {
    color: #9aa8b8;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}


/* =========================================================
   ICON
   ========================================================= */

.wn-crm-build-icon {
    position: relative;

    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    margin-top: 24px;

    border: 1px solid #dce5f3;
    border-radius: 9px;

    background: #f6f9ff;
}

.wn-crm-build-icon::before,
.wn-crm-build-icon::after,
.wn-crm-build-icon i::before,
.wn-crm-build-icon i::after {
    content: "";
    position: absolute;
}

.wn-crm-build-icon::before {
    width: 13px;
    height: 13px;

    border: 1px solid #6d8edb;
    border-radius: 50%;
}

.wn-crm-build-icon::after {
    right: 7px;
    bottom: 7px;

    width: 7px;
    height: 1px;

    background: #6d8edb;

    transform: rotate(45deg);
}


/* DEFINE ICON */

.wn-crm-build-icon--define::before {
    width: 16px;
    height: 12px;

    border: 1px solid #6d8edb;
    border-radius: 3px;
}

.wn-crm-build-icon--define::after {
    top: 12px;
    left: 14px;

    width: 8px;
    height: 1px;

    background: #6d8edb;

    box-shadow:
        0 4px 0 #6d8edb,
        0 8px 0 #6d8edb;

    transform: none;
}


/* BUILD ICON */

.wn-crm-build-icon--build::before {
    left: 10px;

    width: 7px;
    height: 7px;

    border: 1px solid #6d8edb;
    border-radius: 2px;

    box-shadow:
        11px 0 0 -1px #f6f9ff,
        11px 0 0 0 #6d8edb;
}

.wn-crm-build-icon--build::after {
    top: 18px;
    left: 17px;

    width: 12px;
    height: 1px;

    background: #6d8edb;

    transform: none;
}


/* IMPROVE ICON */

.wn-crm-build-icon--improve::before {
    width: 15px;
    height: 15px;

    border: 1px solid #6d8edb;
    border-radius: 50%;
}

.wn-crm-build-icon--improve::after {
    top: 9px;
    right: 9px;

    width: 6px;
    height: 6px;

    border-top: 1px solid #6d8edb;
    border-right: 1px solid #6d8edb;

    background: transparent;

    transform: rotate(7deg);
}


/* =========================================================
   STEP COPY
   ========================================================= */

.wn-crm-build-step h3 {
    margin: 20px 0 0;

    color: #172538;

    font-size: 17px;
    font-weight: 680;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.wn-crm-build-step p {
    margin: 10px 0 20px;

    color: #758598;

    font-size: 10px;
    line-height: 1.65;
}

.wn-crm-build-output {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: auto;
    padding-top: 13px;

    border-top: 1px solid #e7ebf1;
}

.wn-crm-build-output small {
    color: #a1adba;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-build-output strong {
    color: #536c8e;

    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   CONNECTORS
   ========================================================= */

.wn-crm-build-connector {
    position: relative;

    display: flex;
    align-items: center;
}

.wn-crm-build-connector::before {
    content: "";

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #d8e0ec,
            #9eb6ed
        );
}

.wn-crm-build-connector i {
    position: absolute;
    right: 1px;

    width: 5px;
    height: 5px;

    border-top: 1px solid #7898e1;
    border-right: 1px solid #7898e1;

    transform: rotate(45deg);
}


/* =========================================================
   BOTTOM
   ========================================================= */

.wn-crm-build-bottom {
    display: grid;
    grid-template-columns:
        255px
        minmax(390px,1fr)
        minmax(260px,.7fr);

    gap: 38px;
    align-items: center;

    margin-top: 46px;
    padding-top: 25px;

    border-top: 1px solid #e2e7ed;
}

.wn-crm-build-bottom-label {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wn-crm-build-bottom-label > span {
    color: rgba(77,118,215,.16);

    font-size: 38px;
    font-weight: 760;
    line-height: 1;
    letter-spacing: -.05em;
}

.wn-crm-build-bottom-label > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wn-crm-build-bottom-label small {
    color: #6684c9;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

.wn-crm-build-bottom-label strong {
    color: #3f5268;

    font-size: 9px;
    font-weight: 650;
}


/* =========================================================
   MINI PROCESS LINE
   ========================================================= */

.wn-crm-build-line {
    display: grid;
    grid-template-columns:
        auto 1fr
        auto 1fr
        auto 1fr
        auto;

    align-items: center;
}

.wn-crm-build-line > span {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #9aa7b5;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    white-space: nowrap;
}

.wn-crm-build-line > span i {
    display: grid;
    place-items: center;

    width: 20px;
    height: 20px;

    color: #8797aa;

    border: 1px solid #d5dde7;
    border-radius: 50%;

    background: #fff;

    font-style: normal;
    font-size: 9px;
}

.wn-crm-build-line > span.is-complete {
    color: #6480bd;
}

.wn-crm-build-line > span.is-complete i {
    color: #fff;

    border-color: #678be0;
    background: #678be0;
}

.wn-crm-build-line > span.is-active {
    color: #5277cc;
}

.wn-crm-build-line > span.is-active i {
    color: #5277cc;

    border-color: #7898df;

    box-shadow:
        0 0 0 4px rgba(93,132,220,.07);
}

.wn-crm-build-line > b {
    height: 1px;
    margin: 0 8px;

    background: #dce2ea;
}


/* =========================================================
   BOTTOM COPY
   ========================================================= */

.wn-crm-build-bottom > p {
    max-width: 400px;
    margin: 0 0 0 auto;

    color: #8390a0;

    font-size: 9px;
    line-height: 1.65;
}


/* =========================================================
   RESPONSIVE — 1050
   ========================================================= */

@media (max-width: 1050px) {

    .wn-crm-build .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-crm-build-process {
        grid-template-columns:
            1fr 24px
            1fr 24px
            1fr 24px
            1fr;
    }

    .wn-crm-build-step {
        padding: 19px 17px;
    }

    .wn-crm-build-bottom {
        grid-template-columns: 220px 1fr;
    }

    .wn-crm-build-bottom > p {
        grid-column: 2;
        margin: -10px 0 0;
    }

}


/* =========================================================
   TABLET — 820
   ========================================================= */

@media (max-width: 820px) {

    .wn-crm-build .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-crm-build-head {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .wn-crm-build-intro {
        max-width: 620px;
    }

    .wn-crm-build-process {
        grid-template-columns: 1fr 30px 1fr;
        row-gap: 24px;
    }

    .wn-crm-build-step {
        min-height: 260px;
    }

    .wn-crm-build-connector:nth-of-type(4) {
        display: none;
    }

    .wn-crm-build-step:nth-of-type(3) {
        grid-column: 1;
    }

    .wn-crm-build-step:nth-of-type(4) {
        grid-column: 3;
    }

    .wn-crm-build-bottom {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .wn-crm-build-bottom > p {
        grid-column: auto;

        max-width: 620px;
        margin: 0;
    }

}


/* =========================================================
   MOBILE — 640
   ========================================================= */

@media (max-width: 640px) {

    .wn-crm-build {
        padding: 68px 0 58px;
    }

    .wn-crm-build .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-crm-section-kicker--build {
        margin-bottom: 16px;

        font-size: 9px;
        line-height: 1.35;
    }

    .wn-crm-section-kicker--build > span {
        width: 24px;
        height: 24px;

        flex: 0 0 24px;
    }

    .wn-crm-build h2 {
        font-size: clamp(37px, 10.8vw, 48px);
    }

    .wn-crm-build-intro p {
        font-size: 13px;
    }

    .wn-crm-build-process {
        grid-template-columns: 1fr;

        margin-top: 38px;
    }

    .wn-crm-build-step,
    .wn-crm-build-step:nth-of-type(3),
    .wn-crm-build-step:nth-of-type(4) {
        grid-column: auto;

        min-height: 0;
    }

    .wn-crm-build-connector {
        width: 1px;
        height: 22px;

        margin-left: 28px;
    }

    .wn-crm-build-connector::before {
        width: 1px;
        height: 100%;

        background:
            linear-gradient(
                #d8e0ec,
                #9eb6ed
            );
    }

    .wn-crm-build-connector i {
        right: -2px;
        bottom: 0;

        transform: rotate(135deg);
    }

    .wn-crm-build-connector:nth-of-type(4) {
        display: flex;
    }

    .wn-crm-build-step {
        padding: 20px;
    }

    .wn-crm-build-icon {
        margin-top: 19px;
    }

    .wn-crm-build-step h3 {
        margin-top: 16px;
    }

    .wn-crm-build-step p {
        font-size: 11px;
    }

    .wn-crm-build-bottom {
        margin-top: 37px;
    }

    .wn-crm-build-line {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .wn-crm-build-line > b {
        width: 1px;
        height: 10px;

        margin: 0 0 0 10px;
    }

}


/* =========================================================
   SMALL MOBILE — 390
   ========================================================= */

@media (max-width: 390px) {

    .wn-crm-build .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-crm-build h2 {
        font-size: 36px;
    }

}
/* =========================================================
   CUSTOM CRM DEVELOPMENT
   07 — WHEN CUSTOM CRM MAKES SENSE
   ========================================================= */

.wn-crm-fit {
    position: relative;
    overflow: hidden;

    padding: 92px 0 76px;

    color: #dce6f1;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(78, 121, 220, .09),
            transparent 34%
        ),
        #071521;
}

.wn-crm-fit::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(rgba(255,255,255,.021) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.021) 1px, transparent 1px);

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 16%,
            #000 84%,
            transparent
        );
}


/* =========================================================
   SITE WIDTH
   ========================================================= */

.wn-crm-fit .wn-wrap {
    position: relative;
    z-index: 2;

    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   HEAD
   ========================================================= */

.wn-crm-fit-head {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(310px, .58fr);

    gap: clamp(65px, 9vw, 135px);
    align-items: end;
}

.wn-crm-section-kicker--fit {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 0 0 21px;

    color: #7898e8;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.wn-crm-section-kicker--fit > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    color: #9db6f3;

    border: 1px solid rgba(126,158,235,.28);
    border-radius: 50%;

    font-size: 9px;
}

.wn-crm-fit h2 {
    max-width: 840px;
    margin: 0;

    color: #f3f6fa;

    font-size: clamp(46px, 4vw, 61px);
    font-weight: 720;
    line-height: 1.01;
    letter-spacing: -.048em;
}

.wn-crm-fit h2 span {
    display: block;

    color: #668ce8;
}

.wn-crm-fit-intro {
    max-width: 455px;
    padding-bottom: 3px;
}

.wn-crm-fit-intro p {
    margin: 0;

    color: #8295a8;

    font-size: 13px;
    line-height: 1.72;
}


/* =========================================================
   SIGNALS
   ========================================================= */

.wn-crm-fit-signals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;

    margin-top: 54px;
}


/* =========================================================
   CARD
   ========================================================= */

.wn-crm-fit-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 305px;
    padding: 21px 20px 18px;

    border: 1px solid #20384c;
    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(15,37,54,.96),
            rgba(8,25,38,.96)
        );

    box-shadow:
        0 18px 42px rgba(0,0,0,.08);

    transition:
        border-color .2s ease,
        transform .2s ease,
        background .2s ease;
}

.wn-crm-fit-card:hover {
    border-color: #315171;

    transform: translateY(-2px);

    background:
        linear-gradient(
            145deg,
            rgba(17,42,62,.98),
            rgba(8,25,38,.98)
        );
}

.wn-crm-fit-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wn-crm-fit-card-top > span {
    color: #7596e1;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.wn-crm-fit-card-top small {
    color: #506a81;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}


/* =========================================================
   ABSTRACT SYMBOL
   ========================================================= */

.wn-crm-fit-symbol {
    position: relative;

    width: 50px;
    height: 43px;

    margin-top: 26px;
}

.wn-crm-fit-symbol i {
    position: absolute;

    display: block;

    width: 16px;
    height: 16px;

    border: 1px solid #35516a;
    border-radius: 4px;

    background: #0b2030;
}

.wn-crm-fit-symbol i:nth-child(1) {
    top: 0;
    left: 0;
}

.wn-crm-fit-symbol i:nth-child(2) {
    top: 0;
    right: 0;
}

.wn-crm-fit-symbol i:nth-child(3) {
    bottom: 0;
    left: 17px;

    border-color: rgba(99,139,232,.45);

    background: rgba(83,128,230,.08);
}

.wn-crm-fit-symbol::before,
.wn-crm-fit-symbol::after {
    content: "";
    position: absolute;

    background: #29465f;
}

.wn-crm-fit-symbol::before {
    top: 8px;
    left: 16px;

    width: 18px;
    height: 1px;
}

.wn-crm-fit-symbol::after {
    top: 16px;
    left: 25px;

    width: 1px;
    height: 12px;
}


/* PROCESS */

.wn-crm-fit-symbol--process i:nth-child(2) {
    top: 14px;
}

.wn-crm-fit-symbol--process i:nth-child(3) {
    left: 34px;
}

.wn-crm-fit-symbol--process::before {
    width: 20px;

    transform: rotate(28deg);
    transform-origin: left center;
}

.wn-crm-fit-symbol--process::after {
    top: 25px;
    left: 32px;

    width: 10px;
    height: 1px;
}


/* DATA */

.wn-crm-fit-symbol--data i:nth-child(1) {
    top: 4px;
}

.wn-crm-fit-symbol--data i:nth-child(2) {
    top: 4px;
}

.wn-crm-fit-symbol--data i:nth-child(3) {
    bottom: 1px;
}

.wn-crm-fit-symbol--data::before {
    top: 12px;
}

.wn-crm-fit-symbol--data::after {
    top: 19px;
}


/* GROWTH */

.wn-crm-fit-symbol--growth i {
    width: 9px;

    border-radius: 2px;
}

.wn-crm-fit-symbol--growth i:nth-child(1) {
    top: 26px;
    left: 2px;

    height: 13px;
}

.wn-crm-fit-symbol--growth i:nth-child(2) {
    top: 16px;
    left: 20px;

    height: 23px;
}

.wn-crm-fit-symbol--growth i:nth-child(3) {
    top: 3px;
    bottom: auto;
    left: 38px;

    height: 36px;
}

.wn-crm-fit-symbol--growth::before {
    top: 7px;
    left: 5px;

    width: 38px;
    height: 1px;

    background: #6588db;

    transform: rotate(-25deg);
}

.wn-crm-fit-symbol--growth::after {
    display: none;
}


/* =========================================================
   CARD COPY
   ========================================================= */

.wn-crm-fit-card h3 {
    margin: 18px 0 0;

    color: #d7e0e9;

    font-size: 16px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.wn-crm-fit-card p {
    margin: 10px 0 20px;

    color: #6f8498;

    font-size: 9px;
    line-height: 1.65;
}


/* =========================================================
   CARD FOOT
   ========================================================= */

.wn-crm-fit-card-foot {
    display: grid;
    grid-template-columns: 7px minmax(0,1fr);
    gap: 8px;
    align-items: center;

    margin-top: auto;
    padding-top: 13px;

    border-top: 1px solid rgba(255,255,255,.065);
}

.wn-crm-fit-card-foot > span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #6389e2;

    box-shadow:
        0 0 0 4px rgba(99,137,226,.06);
}

.wn-crm-fit-card-foot strong {
    color: #7188a0;

    font-size: 9px;
    font-weight: 650;
}


/* =========================================================
   DECISION STRIP
   ========================================================= */

.wn-crm-fit-decision {
    display: grid;
    grid-template-columns:
        70px
        minmax(360px, .95fr)
        minmax(330px, .72fr);

    gap: 30px;
    align-items: center;

    margin-top: 47px;
    padding-top: 27px;

    border-top: 1px solid rgba(255,255,255,.08);
}

.wn-crm-fit-decision-number {
    color: rgba(93,132,220,.18);

    font-size: 45px;
    font-weight: 760;
    line-height: 1;
    letter-spacing: -.06em;
}

.wn-crm-fit-decision-copy > span {
    color: #6688d7;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.wn-crm-fit-decision-copy h3 {
    max-width: 570px;
    margin: 7px 0 0;

    color: #8598ab;

    font-size: 17px;
    font-weight: 450;
    line-height: 1.4;
    letter-spacing: -.018em;
}

.wn-crm-fit-decision-copy h3 strong {
    color: #a1b8ec;

    font-weight: 650;
}


/* =========================================================
   QUESTION / CTA
   ========================================================= */

.wn-crm-fit-question {
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    gap: 13px;
    align-items: start;

    padding: 15px;

    border: 1px solid rgba(103,143,235,.15);
    border-radius: 9px;

    background: rgba(78,121,220,.035);
}

.wn-crm-fit-question-mark {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    color: #84a2e8;

    border: 1px solid rgba(103,143,235,.25);
    border-radius: 50%;

    font-size: 11px;
    font-weight: 700;
}

.wn-crm-fit-question > div {
    min-width: 0;
}

.wn-crm-fit-question small {
    display: block;

    color: #6688d7;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wn-crm-fit-question p {
    margin: 7px 0 9px;

    color: #6e8397;

    font-size: 9px;
    line-height: 1.55;
}

.wn-crm-fit-question a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #a5bbed;

    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
}

.wn-crm-fit-question a span {
    transition: transform .2s ease;
}

.wn-crm-fit-question a:hover span {
    transform: translateX(3px);
}


/* =========================================================
   RESPONSIVE — 1050
   ========================================================= */

@media (max-width: 1050px) {

    .wn-crm-fit .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-crm-fit-signals {
        grid-template-columns: 1fr 1fr;
    }

    .wn-crm-fit-card {
        min-height: 280px;
    }

    .wn-crm-fit-decision {
        grid-template-columns: 60px 1fr;
    }

    .wn-crm-fit-question {
        grid-column: 2;
    }

}


/* =========================================================
   TABLET — 820
   ========================================================= */

@media (max-width: 820px) {

    .wn-crm-fit .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-crm-fit {
        padding: 78px 0 68px;
    }

    .wn-crm-fit-head {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .wn-crm-fit-intro {
        max-width: 620px;
    }

}


/* =========================================================
   MOBILE — 640
   ========================================================= */

@media (max-width: 640px) {

    .wn-crm-fit {
        padding: 67px 0 59px;
    }

    .wn-crm-fit .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-crm-section-kicker--fit {
        margin-bottom: 16px;

        font-size: 9px;
        line-height: 1.35;
    }

    .wn-crm-section-kicker--fit > span {
        width: 24px;
        height: 24px;

        flex: 0 0 24px;
    }

    .wn-crm-fit h2 {
        font-size: clamp(37px,10.8vw,48px);
    }

    .wn-crm-fit-intro p {
        font-size: 13px;
    }

    .wn-crm-fit-signals {
        grid-template-columns: 1fr;
        gap: 10px;

        margin-top: 37px;
    }

    .wn-crm-fit-card {
        min-height: 0;
        padding: 19px;
    }

    .wn-crm-fit-symbol {
        margin-top: 20px;
    }

    .wn-crm-fit-card h3 {
        font-size: 16px;
    }

    .wn-crm-fit-card p {
        font-size: 11px;
    }

    .wn-crm-fit-decision {
        grid-template-columns: 1fr;
        gap: 14px;

        margin-top: 36px;
    }

    .wn-crm-fit-decision-number {
        font-size: 37px;
    }

    .wn-crm-fit-question {
        grid-column: auto;

        margin-top: 6px;
    }

}


/* =========================================================
   SMALL MOBILE — 390
   ========================================================= */

@media (max-width: 390px) {

    .wn-crm-fit .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-crm-fit h2 {
        font-size: 36px;
    }

}
/* =========================================================
   CUSTOM CRM DEVELOPMENT
   08 — CUSTOM CRM DEVELOPMENT FAQ
   ========================================================= */

.wn-crm-faq {
    position: relative;
    overflow: hidden;

    padding: 92px 0 76px;

    color: #132034;

    background:
        radial-gradient(
            circle at 73% 48%,
            rgba(82,126,225,.055),
            transparent 31%
        ),
        #fbfcfe;
}

.wn-crm-faq::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(rgba(17,43,75,.023) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,43,75,.023) 1px, transparent 1px);

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 15%,
            #000 85%,
            transparent
        );
}


/* =========================================================
   SITE WIDTH
   ========================================================= */

.wn-crm-faq .wn-wrap {
    position: relative;
    z-index: 2;

    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   HEAD
   ========================================================= */

.wn-crm-faq-head {
    display: grid;
    grid-template-columns:
        minmax(0,1.2fr)
        minmax(310px,.58fr);

    gap: clamp(65px,9vw,135px);
    align-items: end;
}

.wn-crm-section-kicker--faq {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 0 0 21px;

    color: #527cdf;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.wn-crm-section-kicker--faq > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    color: #557ee0;

    border: 1px solid rgba(73,116,216,.2);
    border-radius: 50%;

    background: #fff;

    font-size: 9px;
}

.wn-crm-faq h2 {
    max-width: 800px;
    margin: 0;

    color: #111d2e;

    font-size: clamp(46px,4vw,61px);
    font-weight: 720;
    line-height: 1.01;
    letter-spacing: -.048em;
}

.wn-crm-faq h2 span {
    display: block;
    color: #5b82df;
}

.wn-crm-faq-intro {
    max-width: 455px;
    padding-bottom: 3px;
}

.wn-crm-faq-intro p {
    margin: 0;

    color: #6e7e91;

    font-size: 13px;
    line-height: 1.72;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.wn-crm-faq-layout {
    display: grid;
    grid-template-columns:
        minmax(250px,.56fr)
        minmax(0,1.44fr);

    gap: clamp(55px,7vw,100px);
    align-items: start;

    margin-top: 56px;
}


/* =========================================================
   LEFT CONTEXT
   ========================================================= */

.wn-crm-faq-context {
    position: sticky;
    top: 110px;

    padding-top: 5px;
}

.wn-crm-faq-context-top {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 17px;
    align-items: start;
}

.wn-crm-faq-context-number {
    color: rgba(75,116,211,.15);

    font-size: 45px;
    font-weight: 760;
    line-height: .9;
    letter-spacing: -.06em;
}

.wn-crm-faq-context-top small {
    display: block;

    margin-bottom: 7px;

    color: #6684c9;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

.wn-crm-faq-context-top h3 {
    max-width: 260px;
    margin: 0;

    color: #27384d;

    font-size: 18px;
    font-weight: 650;
    line-height: 1.28;
    letter-spacing: -.025em;
}


/* =========================================================
   LEFT FLOW
   ========================================================= */

.wn-crm-faq-context-flow {
    margin: 35px 0 0 74px;
}

.wn-crm-faq-context-step {
    display: grid;
    grid-template-columns: 27px 1fr;
    gap: 10px;
    align-items: center;
}

.wn-crm-faq-context-step > i {
    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;

    color: #8797aa;

    border: 1px solid #d7dfe9;
    border-radius: 50%;

    background: #fff;

    font-style: normal;
    font-size: 9px;
    font-weight: 700;
}

.wn-crm-faq-context-step.is-active > i {
    color: #fff;

    border-color: #6288df;
    background: #6288df;

    box-shadow:
        0 0 0 5px rgba(98,136,223,.06);
}

.wn-crm-faq-context-step > span {
    color: #65778a;

    font-size: 9px;
    font-weight: 650;
    line-height: 1.3;
}

.wn-crm-faq-context-step small {
    display: block;

    margin-bottom: 3px;

    color: #a0abb7;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.wn-crm-faq-context-flow > b {
    display: block;

    width: 1px;
    height: 17px;

    margin-left: 13px;

    background: #dbe2ea;
}


/* =========================================================
   LEFT NOTE
   ========================================================= */

.wn-crm-faq-context-note {
    display: grid;
    grid-template-columns: 37px 1fr;
    gap: 13px;

    margin-top: 37px;
    padding: 16px;

    border: 1px solid #e0e7ef;
    border-radius: 10px;

    background: rgba(255,255,255,.75);
}

.wn-crm-faq-context-note-icon {
    display: grid;
    place-items: center;

    width: 35px;
    height: 35px;

    color: #6386d8;

    border: 1px solid #d5e0f4;
    border-radius: 50%;

    background: #f7f9fe;

    font-size: 11px;
    font-weight: 700;
}

.wn-crm-faq-context-note small {
    display: block;

    color: #6d89ca;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
}

.wn-crm-faq-context-note p {
    margin: 7px 0 10px;

    color: #8290a0;

    font-size: 9px;
    line-height: 1.55;
}

.wn-crm-faq-context-note a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #3f67c4;

    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
}

.wn-crm-faq-context-note a span {
    transition: transform .2s ease;
}

.wn-crm-faq-context-note a:hover span {
    transform: translateX(3px);
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.wn-crm-faq-list {
    border-top: 1px solid #dce3eb;
}

.wn-crm-faq-item {
    position: relative;

    border-bottom: 1px solid #dce3eb;
}

.wn-crm-faq-item summary {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 30px;
    gap: 17px;
    align-items: center;

    min-height: 76px;
    padding: 16px 4px;

    cursor: pointer;

    list-style: none;
}

.wn-crm-faq-item summary::-webkit-details-marker {
    display: none;
}

.wn-crm-faq-item-number {
    color: #8aa4df;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.wn-crm-faq-item summary strong {
    color: #25364a;

    font-size: 16px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.018em;

    transition: color .2s ease;
}

.wn-crm-faq-item summary:hover strong,
.wn-crm-faq-item[open] summary strong {
    color: #4e73cf;
}


/* =========================================================
   PLUS / MINUS
   ========================================================= */

.wn-crm-faq-item summary > i {
    position: relative;

    display: block;

    width: 28px;
    height: 28px;

    border: 1px solid #dbe3ec;
    border-radius: 50%;

    background: #fff;
}

.wn-crm-faq-item summary > i::before,
.wn-crm-faq-item summary > i::after {
    content: "";
    position: absolute;

    top: 50%;
    left: 50%;

    width: 8px;
    height: 1px;

    background: #6687d5;

    transform: translate(-50%,-50%);

    transition: transform .2s ease;
}

.wn-crm-faq-item summary > i::after {
    transform:
        translate(-50%,-50%)
        rotate(90deg);
}

.wn-crm-faq-item[open] summary > i::after {
    transform:
        translate(-50%,-50%)
        rotate(0);
}


/* =========================================================
   ANSWER
   ========================================================= */

.wn-crm-faq-answer {
    padding:
        0 62px
        23px 59px;
}

.wn-crm-faq-answer p {
    max-width: 760px;
    margin: 0;

    color: #738397;

    font-size: 11px;
    line-height: 1.75;
}

.wn-crm-faq-answer a {
    color: #4268c1;

    font-weight: 650;
    text-decoration: none;

    border-bottom: 1px solid rgba(66,104,193,.25);

    transition:
        color .2s ease,
        border-color .2s ease;
}

.wn-crm-faq-answer a:hover {
    color: #244da9;
    border-color: rgba(36,77,169,.55);
}


/* =========================================================
   OPEN STATE ACCENT
   ========================================================= */

.wn-crm-faq-item[open]::before {
    content: "";
    position: absolute;

    top: 25px;
    left: -15px;

    width: 3px;
    height: 26px;

    border-radius: 3px;

    background: #668be2;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.wn-crm-faq-bottom {
    display: grid;
    grid-template-columns:
        275px
        minmax(390px,1fr)
        minmax(260px,.68fr);

    gap: 35px;
    align-items: center;

    margin-top: 49px;
    padding-top: 25px;

    border-top: 1px solid #e1e7ee;
}

.wn-crm-faq-bottom-label {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wn-crm-faq-bottom-label > span {
    color: rgba(77,118,215,.15);

    font-size: 38px;
    font-weight: 760;
    line-height: 1;
    letter-spacing: -.05em;
}

.wn-crm-faq-bottom-label > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wn-crm-faq-bottom-label small {
    color: #6684c9;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

.wn-crm-faq-bottom-label strong {
    color: #43566c;

    font-size: 9px;
    font-weight: 650;
}


/* =========================================================
   BOTTOM PROCESS LINE
   ========================================================= */

.wn-crm-faq-bottom-line {
    display: grid;
    grid-template-columns:
        auto 1fr
        auto 1fr
        auto 1fr
        auto;

    align-items: center;
}

.wn-crm-faq-bottom-line > span {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #9aa7b5;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    white-space: nowrap;
}

.wn-crm-faq-bottom-line > span i {
    display: grid;
    place-items: center;

    width: 20px;
    height: 20px;

    color: #8797aa;

    border: 1px solid #d5dde7;
    border-radius: 50%;

    background: #fff;

    font-style: normal;
    font-size: 9px;
}

.wn-crm-faq-bottom-line > span.is-complete {
    color: #6480bd;
}

.wn-crm-faq-bottom-line > span.is-complete i {
    color: #fff;

    border-color: #678be0;
    background: #678be0;
}

.wn-crm-faq-bottom-line > span.is-active {
    color: #5277cc;
}

.wn-crm-faq-bottom-line > span.is-active i {
    color: #5277cc;

    border-color: #7898df;

    box-shadow:
        0 0 0 4px rgba(93,132,220,.07);
}

.wn-crm-faq-bottom-line > b {
    height: 1px;
    margin: 0 8px;

    background: #dce2ea;
}

.wn-crm-faq-bottom > p {
    max-width: 390px;
    margin: 0 0 0 auto;

    color: #8390a0;

    font-size: 9px;
    line-height: 1.65;
}


/* =========================================================
   RESPONSIVE — 1050
   ========================================================= */

@media (max-width: 1050px) {

    .wn-crm-faq .wn-wrap {
        width: min(100% - 64px,1280px);
    }

    .wn-crm-faq-layout {
        grid-template-columns:
            minmax(220px,.48fr)
            minmax(0,1.4fr);

        gap: 50px;
    }

    .wn-crm-faq-bottom {
        grid-template-columns: 230px 1fr;
    }

    .wn-crm-faq-bottom > p {
        grid-column: 2;

        margin: -8px 0 0;
    }

}


/* =========================================================
   TABLET — 820
   ========================================================= */

@media (max-width: 820px) {

    .wn-crm-faq {
        padding: 78px 0 67px;
    }

    .wn-crm-faq .wn-wrap {
        width: min(100% - 40px,1280px);
    }

    .wn-crm-faq-head {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .wn-crm-faq-intro {
        max-width: 620px;
    }

    .wn-crm-faq-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-crm-faq-context {
        position: relative;
        top: auto;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .wn-crm-faq-context-flow {
        margin: 30px 0 0 74px;
    }

    .wn-crm-faq-context-note {
        margin-top: 0;
    }

    .wn-crm-faq-bottom {
        grid-template-columns: 1fr;
        gap: 23px;
    }

    .wn-crm-faq-bottom > p {
        grid-column: auto;

        max-width: 620px;
        margin: 0;
    }

}


/* =========================================================
   MOBILE — 640
   ========================================================= */

@media (max-width: 640px) {

    .wn-crm-faq {
        padding: 67px 0 58px;
    }

    .wn-crm-faq .wn-wrap {
        width: min(100% - 32px,1280px);
    }

    .wn-crm-section-kicker--faq {
        margin-bottom: 16px;

        font-size: 9px;
        line-height: 1.35;
    }

    .wn-crm-section-kicker--faq > span {
        width: 24px;
        height: 24px;

        flex: 0 0 24px;
    }

    .wn-crm-faq h2 {
        font-size: clamp(37px,10.8vw,48px);
    }

    .wn-crm-faq-intro p {
        font-size: 13px;
    }

    .wn-crm-faq-layout {
        margin-top: 39px;
        gap: 34px;
    }

    .wn-crm-faq-context {
        display: block;
    }

    .wn-crm-faq-context-flow {
        margin: 28px 0 0 0;
    }

    .wn-crm-faq-context-note {
        margin-top: 27px;
    }

    .wn-crm-faq-item summary {
        grid-template-columns: 27px minmax(0,1fr) 29px;
        gap: 10px;

        min-height: 70px;
        padding: 15px 0;
    }

    .wn-crm-faq-item summary strong {
        font-size: 14px;
    }

    .wn-crm-faq-answer {
        padding:
            0 39px
            20px 37px;
    }

    .wn-crm-faq-answer p {
        font-size: 11px;
        line-height: 1.7;
    }

    .wn-crm-faq-item[open]::before {
        left: -10px;
    }

    .wn-crm-faq-bottom {
        margin-top: 38px;
    }

    .wn-crm-faq-bottom-line {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .wn-crm-faq-bottom-line > b {
        width: 1px;
        height: 10px;

        margin: 0 0 0 10px;
    }

}


/* =========================================================
   SMALL MOBILE — 390
   ========================================================= */

@media (max-width: 390px) {

    .wn-crm-faq .wn-wrap {
        width: min(100% - 28px,1280px);
    }

    .wn-crm-faq h2 {
        font-size: 36px;
    }

    .wn-crm-faq-context-top {
        grid-template-columns: 48px 1fr;
        gap: 12px;
    }

}
/* =========================================================
   CUSTOM CRM DEVELOPMENT
   FINAL CTA
   ========================================================= */

.wn-crm-final {
    position: relative;
    overflow: hidden;

    padding: 84px 0 48px;

    color: #fff;

    background:
        radial-gradient(
            circle at 72% 32%,
            rgba(80, 126, 232, .13),
            transparent 30%
        ),
        #071521;
}

.wn-crm-final::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.022) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 15%,
            #000 85%,
            transparent
        );
}


/* =========================================================
   SITE WIDTH
   ========================================================= */

.wn-crm-final .wn-wrap {
    position: relative;
    z-index: 2;

    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   MAIN
   ========================================================= */

.wn-crm-final-inner {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(330px, .56fr);

    gap: clamp(70px, 10vw, 150px);
    align-items: end;
}


/* =========================================================
   KICKER
   ========================================================= */

.wn-crm-final-kicker {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 0 0 21px;

    color: #7899e7;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.wn-crm-final-kicker > span {
    position: relative;

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border: 1px solid #7194e8;
    border-radius: 50%;
}

.wn-crm-final-kicker > span::after {
    content: "";

    position: absolute;
    inset: 2px;

    border-radius: 50%;

    background: #7194e8;
}


/* =========================================================
   HEADING
   ========================================================= */

.wn-crm-final h2 {
    max-width: 820px;
    margin: 0;

    color: #f4f7fb;

    font-size: clamp(48px, 4.35vw, 67px);
    font-weight: 720;
    line-height: .99;
    letter-spacing: -.052em;
}

.wn-crm-final h2 span {
    display: block;

    color: #668ce8;
}


/* =========================================================
   ACTION
   ========================================================= */

.wn-crm-final-action {
    max-width: 405px;
    padding-bottom: 4px;
}

.wn-crm-final-action > p {
    margin: 0 0 24px;

    color: #8295a8;

    font-size: 12px;
    line-height: 1.72;
}


/* =========================================================
   BUTTON
   ========================================================= */

.wn-crm-final-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 42px;

    min-width: 220px;
    min-height: 52px;

    padding: 0 17px 0 20px;

    color: #071521;

    background: #f4f7fb;

    border: 1px solid #f4f7fb;

    text-decoration: none;

    font-size: 10px;
    font-weight: 750;
    line-height: 1;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.wn-crm-final-button i {
    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;

    color: #fff;

    border-radius: 50%;

    background: #527cdf;

    font-style: normal;
    font-size: 11px;

    transition: transform .2s ease;
}

.wn-crm-final-button:hover {
    color: #fff;

    border-color: #5f86e2;
    background: #5f86e2;

    transform: translateY(-1px);
}

.wn-crm-final-button:hover i {
    background: rgba(7,21,33,.24);

    transform: translateX(2px);
}


/* =========================================================
   NOTE
   ========================================================= */

.wn-crm-final-note {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 15px;

    color: #61778c;

    font-size: 9px;
    line-height: 1.4;
}

.wn-crm-final-note > span {
    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: #55c89b;

    box-shadow:
        0 0 0 4px rgba(85,200,155,.06);
}


/* =========================================================
   BOTTOM SIGNAL
   ========================================================= */

.wn-crm-final-signal {
    display: grid;
    grid-template-columns:
        auto 1fr
        auto 1fr
        auto 1fr
        auto;

    align-items: center;

    max-width: 720px;

    margin-top: 60px;
    padding-top: 21px;

    border-top: 1px solid rgba(255,255,255,.075);
}

.wn-crm-final-signal > span {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #526a80;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .09em;
    white-space: nowrap;
}

.wn-crm-final-signal > span i {
    display: grid;
    place-items: center;

    width: 21px;
    height: 21px;

    color: #61788e;

    border: 1px solid #20394d;
    border-radius: 50%;

    font-style: normal;
    font-size: 9px;
}

.wn-crm-final-signal > b {
    height: 1px;

    margin: 0 11px;

    background: #193044;
}

.wn-crm-final-signal > span.is-active {
    color: #86a3e8;
}

.wn-crm-final-signal > span.is-active i {
    color: #a4baf0;

    border-color: #5479ce;

    background: rgba(82,124,223,.12);

    box-shadow:
        0 0 0 4px rgba(82,124,223,.05);
}


/* =========================================================
   TABLET — 1050
   ========================================================= */

@media (max-width: 1050px) {

    .wn-crm-final .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-crm-final-inner {
        grid-template-columns:
            minmax(0,1fr)
            minmax(300px,.55fr);

        gap: 60px;
    }

}


/* =========================================================
   TABLET — 820
   ========================================================= */

@media (max-width: 820px) {

    .wn-crm-final {
        padding: 72px 0 44px;
    }

    .wn-crm-final .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-crm-final-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .wn-crm-final-action {
        max-width: 570px;
    }

}


/* =========================================================
   MOBILE — 640
   ========================================================= */

@media (max-width: 640px) {

    .wn-crm-final {
        padding: 61px 0 39px;
    }

    .wn-crm-final .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-crm-final-kicker {
        margin-bottom: 16px;

        font-size: 9px;
        line-height: 1.35;
    }

    .wn-crm-final h2 {
        font-size: clamp(38px, 11vw, 49px);
    }

    .wn-crm-final-action {
        margin-top: 3px;
    }

    .wn-crm-final-action > p {
        margin-bottom: 21px;

        font-size: 12px;
    }

    .wn-crm-final-button {
        width: 100%;
        min-height: 54px;
    }

    .wn-crm-final-signal {
        grid-template-columns: 1fr;

        gap: 8px;

        max-width: none;

        margin-top: 42px;
    }

    .wn-crm-final-signal > b {
        width: 1px;
        height: 10px;

        margin: 0 0 0 10px;
    }

}


/* =========================================================
   SMALL MOBILE — 390
   ========================================================= */

@media (max-width: 390px) {

    .wn-crm-final .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-crm-final h2 {
        font-size: 37px;
    }

}
/* =========================================================
   08 FAQ — TYPOGRAPHY READABILITY FIX
   ========================================================= */

/* LEFT — short version */
.wn-crm-faq-context-top small {
    font-size: 8px;
}

.wn-crm-faq-context-top h3 {
    font-size: 21px;
    line-height: 1.3;
}

/* LEFT — process */
.wn-crm-faq-context-step > span {
    font-size: 10px;
    line-height: 1.4;
}

.wn-crm-faq-context-step small {
    font-size: 7px;
}

/* LEFT — question box */
.wn-crm-faq-context-note small {
    font-size: 7px;
}

.wn-crm-faq-context-note p {
    font-size: 10px;
    line-height: 1.65;
}

.wn-crm-faq-context-note a {
    font-size: 9px;
}


/* FAQ NUMBERS */
.wn-crm-faq-item-number {
    font-size: 9px;
}


/* FAQ QUESTIONS */
.wn-crm-faq-item summary strong {
    font-size: 18px;
    line-height: 1.35;
}


/* FAQ ANSWERS */
.wn-crm-faq-answer p {
    font-size: 13px;
    line-height: 1.75;
}


/* BOTTOM STRIP */
.wn-crm-faq-bottom-label small {
    font-size: 7px;
}

.wn-crm-faq-bottom-label strong {
    font-size: 11px;
}

.wn-crm-faq-bottom-line > span {
    font-size: 7px;
}

.wn-crm-faq-bottom > p {
    font-size: 11px;
    line-height: 1.65;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .wn-crm-faq-context-top small {
        font-size: 8px;
    }

    .wn-crm-faq-context-top h3 {
        font-size: 20px;
    }

    .wn-crm-faq-context-step > span {
        font-size: 11px;
    }

    .wn-crm-faq-context-step small {
        font-size: 7px;
    }

    .wn-crm-faq-context-note small {
        font-size: 7px;
    }

    .wn-crm-faq-context-note p {
        font-size: 11px;
    }

    .wn-crm-faq-context-note a {
        font-size: 10px;
    }

    .wn-crm-faq-item-number {
        font-size: 9px;
    }

    .wn-crm-faq-item summary strong {
        font-size: 16px;
    }

    .wn-crm-faq-answer p {
        font-size: 13px;
        line-height: 1.72;
    }

}