/* =========================================================
   01 — HERO
   ========================================================= */

.wn-cpp-hero {
    position: relative;
    overflow: hidden;
    padding: 118px 0 92px;
    background: #07111f;
    color: #ffffff;
}

.wn-cpp-hero::before {
    content: "";
    position: absolute;
    top: -440px;
    right: -330px;
    width: 940px;
    height: 940px;
    border: 1px solid rgba(35, 116, 255, .055);
    border-radius: 50%;
    box-shadow:
        0 0 0 130px rgba(35, 116, 255, .012),
        0 0 0 260px rgba(35, 116, 255, .006);
    pointer-events: none;
}

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

.wn-cpp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(570px, 1.12fr);
    gap: 72px;
    align-items: center;
}


/* =========================================================
   HERO — CONTENT
   ========================================================= */

.wn-cpp-hero-content {
    min-width: 0;
}

.wn-cpp-hero-kicker {
    display: block;
    margin-bottom: 25px;
    color: #70b8ff;
    font-size: 9px;
    line-height: 1.3;
    font-weight: 750;
    letter-spacing: .14em;
}

.wn-cpp-hero-content h1 {
    max-width: 650px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(54px, 5.2vw, 76px);
    line-height: .99;
    letter-spacing: -.055em;
    font-weight: 650;
}

.wn-cpp-hero-content h1 > span {
    display: block;
    margin-top: 8px;
    color: #70b8ff;
    font-weight: 500;
}

.wn-cpp-hero-lead {
    max-width: 610px;
    margin: 31px 0 0;
    color: rgba(255, 255, 255, .6);
    font-size: 17px;
    line-height: 1.72;
}


/* =========================================================
   HERO — ACTIONS
   ========================================================= */

.wn-cpp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 38px;
}

.wn-cpp-hero-primary {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 38px;
    padding: 0 19px 0 23px;
    border: 1px solid #2374ff;
    border-radius: 3px;
    background: #2374ff;
    color: #ffffff;
    text-decoration: none;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.wn-cpp-hero-primary:hover {
    border-color: #438cff;
    background: #438cff;
    color: #ffffff;
    transform: translateY(-2px);
}

.wn-cpp-hero-primary > span:first-child {
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}

.wn-cpp-hero-primary > span:last-child {
    font-size: 19px;
    line-height: 1;
}

.wn-cpp-hero-secondary {
    position: relative;
    display: inline-block;
    padding: 8px 0;
    color: rgba(255, 255, 255, .68);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 650;
    text-decoration: none;
    transition: color .2s ease;
}

.wn-cpp-hero-secondary::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    height: 1px;
    background: rgba(112, 184, 255, .3);
    transition: background-color .2s ease;
}

.wn-cpp-hero-secondary:hover {
    color: #ffffff;
}

.wn-cpp-hero-secondary:hover::after {
    background: #70b8ff;
}


/* =========================================================
   HERO — POINTS
   ========================================================= */

.wn-cpp-hero-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 58px;
    padding-top: 25px;
    border-top: 1px solid rgba(112, 184, 255, .17);
}

.wn-cpp-hero-points > div {
    min-width: 0;
    padding-right: 17px;
}

.wn-cpp-hero-points > div + div {
    padding-left: 17px;
    border-left: 1px solid rgba(255, 255, 255, .08);
}

.wn-cpp-hero-points span,
.wn-cpp-hero-points strong,
.wn-cpp-hero-points small {
    display: block;
}

.wn-cpp-hero-points span {
    margin-bottom: 11px;
    color: #70b8ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-hero-points strong {
    color: rgba(255, 255, 255, .82);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 650;
}

.wn-cpp-hero-points small {
    margin-top: 6px;
    color: rgba(255, 255, 255, .34);
    font-size: 7px;
    line-height: 1.45;
}


/* =========================================================
   HERO — PORTAL VISUAL
   ========================================================= */

.wn-cpp-hero-visual {
    position: relative;
    min-width: 0;
}

.wn-cpp-hero-visual::before {
    content: "";
    position: absolute;
    top: 12%;
    right: -8%;
    bottom: 5%;
    left: 18%;
    background: radial-gradient(
        circle at center,
        rgba(35, 116, 255, .13),
        rgba(35, 116, 255, 0) 68%
    );
    filter: blur(18px);
    pointer-events: none;
}

.wn-cpp-portal {
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    border: 1px solid rgba(112, 184, 255, .18);
    border-radius: 6px;
    background: #0b1726;
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .25),
        0 0 0 1px rgba(255, 255, 255, .015) inset;
}


/* =========================================================
   PORTAL — TOPBAR
   ========================================================= */

.wn-cpp-portal-topbar {
    display: flex;
    min-height: 67px;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
    background: rgba(255, 255, 255, .012);
}

.wn-cpp-portal-brand,
.wn-cpp-portal-user {
    display: flex;
    align-items: center;
}

.wn-cpp-portal-brand {
    gap: 11px;
}

.wn-cpp-portal-mark {
    display: block;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(112, 184, 255, .4);
    border-radius: 4px;
    background:
        linear-gradient(135deg, rgba(35, 116, 255, .45), rgba(35, 116, 255, .08));
    box-shadow: inset 0 0 18px rgba(35, 116, 255, .18);
}

.wn-cpp-portal-brand strong,
.wn-cpp-portal-brand small,
.wn-cpp-portal-user strong,
.wn-cpp-portal-user small {
    display: block;
}

.wn-cpp-portal-brand strong {
    color: rgba(255, 255, 255, .82);
    font-size: 9px;
    line-height: 1.25;
    font-weight: 650;
}

.wn-cpp-portal-brand small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .28);
    font-size: 6px;
    line-height: 1.2;
}

.wn-cpp-portal-user {
    gap: 9px;
}

.wn-cpp-portal-user > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(112, 184, 255, .22);
    border-radius: 50%;
    background: rgba(35, 116, 255, .09);
    color: #70b8ff;
    font-size: 7px;
    font-weight: 750;
}

.wn-cpp-portal-user strong {
    color: rgba(255, 255, 255, .62);
    font-size: 7px;
    line-height: 1.2;
    font-weight: 650;
}

.wn-cpp-portal-user small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .25);
    font-size: 5px;
    line-height: 1.2;
}


/* =========================================================
   PORTAL — BODY / NAV
   ========================================================= */

.wn-cpp-portal-body {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 410px;
}

.wn-cpp-portal-nav {
    padding: 18px 10px;
    border-right: 1px solid rgba(255, 255, 255, .065);
    background: rgba(0, 0, 0, .07);
}

.wn-cpp-portal-nav > span {
    display: flex;
    min-height: 32px;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    padding: 0 9px;
    border-radius: 3px;
    color: rgba(255, 255, 255, .31);
    font-size: 6px;
    line-height: 1;
    font-weight: 650;
}

.wn-cpp-portal-nav > span > i {
    display: block;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 1px;
}

.wn-cpp-portal-nav > span.is-active {
    background: rgba(35, 116, 255, .1);
    color: #70b8ff;
}

.wn-cpp-portal-nav > span.is-active > i {
    border-color: #2374ff;
    background: #2374ff;
}


/* =========================================================
   PORTAL — MAIN
   ========================================================= */

.wn-cpp-portal-main {
    min-width: 0;
    padding: 22px;
}

.wn-cpp-portal-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.wn-cpp-portal-welcome small,
.wn-cpp-portal-welcome strong {
    display: block;
}

.wn-cpp-portal-welcome small {
    margin-bottom: 6px;
    color: rgba(112, 184, 255, .62);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-portal-welcome strong {
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 650;
}

.wn-cpp-portal-welcome > span {
    padding: 6px 8px;
    border: 1px solid rgba(75, 210, 151, .2);
    border-radius: 2px;
    background: rgba(75, 210, 151, .055);
    color: rgba(111, 224, 171, .72);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}


/* =========================================================
   PORTAL — STATS
   ========================================================= */

.wn-cpp-portal-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 21px;
}

.wn-cpp-portal-stats > div {
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(112, 184, 255, .1);
    background: rgba(255, 255, 255, .018);
}

.wn-cpp-portal-stats small,
.wn-cpp-portal-stats strong,
.wn-cpp-portal-stats span {
    display: block;
}

.wn-cpp-portal-stats small {
    color: rgba(255, 255, 255, .27);
    font-size: 5px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: .07em;
}

.wn-cpp-portal-stats strong {
    margin-top: 9px;
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -.03em;
    font-weight: 600;
}

.wn-cpp-portal-stats span {
    margin-top: 7px;
    color: rgba(112, 184, 255, .48);
    font-size: 5px;
    line-height: 1.3;
}


/* =========================================================
   PORTAL — WORKSPACE
   ========================================================= */

.wn-cpp-portal-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(150px, .55fr);
    gap: 9px;
    margin-top: 9px;
}

.wn-cpp-portal-requests,
.wn-cpp-portal-activity {
    min-width: 0;
    border: 1px solid rgba(112, 184, 255, .1);
    background: rgba(255, 255, 255, .012);
}

.wn-cpp-portal-panel-head {
    display: flex;
    min-height: 39px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.wn-cpp-portal-panel-head strong {
    color: rgba(255, 255, 255, .65);
    font-size: 7px;
    line-height: 1;
    font-weight: 650;
}

.wn-cpp-portal-panel-head span {
    color: rgba(112, 184, 255, .56);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
}


/* =========================================================
   PORTAL — REQUESTS
   ========================================================= */

.wn-cpp-request {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 59px;
    padding: 8px 12px;
}

.wn-cpp-request + .wn-cpp-request {
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.wn-cpp-request-id {
    color: rgba(112, 184, 255, .55);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-request strong,
.wn-cpp-request small {
    display: block;
}

.wn-cpp-request strong {
    overflow: hidden;
    color: rgba(255, 255, 255, .63);
    font-size: 6px;
    line-height: 1.3;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-cpp-request small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .22);
    font-size: 5px;
    line-height: 1.2;
}

.wn-cpp-status {
    padding: 5px 6px;
    border: 1px solid rgba(112, 184, 255, .15);
    border-radius: 2px;
    font-size: 4px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .04em;
    white-space: nowrap;
}

.wn-cpp-status-progress {
    border-color: rgba(35, 116, 255, .25);
    background: rgba(35, 116, 255, .08);
    color: #70b8ff;
}

.wn-cpp-status-review {
    border-color: rgba(238, 177, 71, .22);
    background: rgba(238, 177, 71, .055);
    color: rgba(245, 194, 104, .8);
}

.wn-cpp-status-complete {
    border-color: rgba(75, 210, 151, .2);
    background: rgba(75, 210, 151, .05);
    color: rgba(111, 224, 171, .72);
}


/* =========================================================
   PORTAL — ACTIVITY
   ========================================================= */

.wn-cpp-activity-item {
    position: relative;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 8px;
    min-height: 59px;
    padding: 11px 9px;
}

.wn-cpp-activity-item + .wn-cpp-activity-item {
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.wn-cpp-activity-item > i {
    width: 5px;
    height: 5px;
    margin-top: 3px;
    border-radius: 50%;
    background: #2374ff;
    box-shadow: 0 0 0 3px rgba(35, 116, 255, .08);
}

.wn-cpp-activity-item strong,
.wn-cpp-activity-item small {
    display: block;
}

.wn-cpp-activity-item strong {
    color: rgba(255, 255, 255, .55);
    font-size: 5px;
    line-height: 1.25;
    font-weight: 650;
}

.wn-cpp-activity-item small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .21);
    font-size: 4px;
    line-height: 1.25;
}

.wn-cpp-activity-item > span {
    position: absolute;
    right: 8px;
    bottom: 7px;
    color: rgba(255, 255, 255, .18);
    font-size: 4px;
    line-height: 1;
}


/* =========================================================
   PORTAL — CONNECTION
   ========================================================= */

.wn-cpp-portal-connection {
    display: grid;
    grid-template-columns: auto minmax(30px, 1fr) auto minmax(30px, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 53px;
    padding: 0 19px;
    border-top: 1px solid rgba(112, 184, 255, .11);
    background: #091421;
}

.wn-cpp-portal-connection > span {
    color: rgba(255, 255, 255, .27);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .06em;
}

.wn-cpp-portal-connection > strong {
    color: #70b8ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .04em;
    text-align: center;
}

.wn-cpp-portal-connection > i {
    position: relative;
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(112, 184, 255, .08),
        #2374ff,
        rgba(112, 184, 255, .08)
    );
}

.wn-cpp-portal-connection > i::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 4px;
    height: 4px;
    border-top: 1px solid #2374ff;
    border-right: 1px solid #2374ff;
    transform: translateY(-50%) rotate(45deg);
}


/* =========================================================
   01 — HERO RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

    .wn-cpp-hero-grid {
        grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
        gap: 50px;
    }

    .wn-cpp-hero-content h1 {
        font-size: clamp(50px, 5vw, 66px);
    }

}


@media (max-width: 1100px) {

    .wn-cpp-hero .wn-wrap {
        width: calc(100% - 70px);
    }

    .wn-cpp-hero {
        padding-top: 105px;
    }

    .wn-cpp-hero-grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .wn-cpp-hero-content {
        max-width: 790px;
    }

    .wn-cpp-hero-content h1 {
        max-width: 720px;
        font-size: clamp(54px, 7vw, 74px);
    }

    .wn-cpp-hero-lead {
        max-width: 680px;
    }

    .wn-cpp-hero-points {
        max-width: 680px;
    }

    .wn-cpp-hero-visual {
        width: 100%;
        max-width: 820px;
    }

}


@media (max-width: 760px) {

    .wn-cpp-hero {
        padding: 88px 0 75px;
    }

    .wn-cpp-hero .wn-wrap {
        width: calc(100% - 40px);
    }

    .wn-cpp-hero-grid {
        gap: 55px;
    }

    .wn-cpp-hero-content h1 {
        font-size: clamp(44px, 12vw, 58px);
    }

    .wn-cpp-hero-lead {
        margin-top: 25px;
        font-size: 16px;
    }

    .wn-cpp-hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
        margin-top: 31px;
    }

    .wn-cpp-hero-primary {
        width: 100%;
    }

    .wn-cpp-hero-points {
        grid-template-columns: 1fr;
        margin-top: 45px;
        padding-top: 0;
        border-top: 1px solid rgba(112, 184, 255, .17);
    }

    .wn-cpp-hero-points > div,
    .wn-cpp-hero-points > div + div {
        padding: 17px 0;
        border-left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .wn-cpp-portal-body {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .wn-cpp-portal-nav {
        padding-inline: 7px;
    }

    .wn-cpp-portal-nav > span {
        padding-inline: 6px;
    }

    .wn-cpp-portal-main {
        padding: 16px;
    }

    .wn-cpp-portal-workspace {
        grid-template-columns: 1fr;
    }

    .wn-cpp-portal-activity {
        display: none;
    }

}


@media (max-width: 580px) {

    .wn-cpp-portal-topbar {
        min-height: 58px;
        padding: 0 13px;
    }

    .wn-cpp-portal-user > div {
        display: none;
    }

    .wn-cpp-portal-body {
        display: block;
        min-height: 0;
    }

    .wn-cpp-portal-nav {
        display: flex;
        overflow: hidden;
        padding: 8px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .065);
    }

    .wn-cpp-portal-nav > span {
        flex: 1 1 auto;
        justify-content: center;
        margin: 0;
    }

    .wn-cpp-portal-nav > span > i {
        display: none;
    }

    .wn-cpp-portal-nav > span:nth-child(n+4) {
        display: none;
    }

    .wn-cpp-portal-stats {
        grid-template-columns: 1fr 1fr;
    }

    .wn-cpp-portal-stats > div:last-child {
        display: none;
    }

    .wn-cpp-request {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .wn-cpp-request .wn-cpp-status {
        display: none;
    }

    .wn-cpp-portal-connection {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 13px;
        text-align: center;
    }

    .wn-cpp-portal-connection > i {
        display: none;
    }

}


@media (max-width: 380px) {

    .wn-cpp-hero-content h1 {
        font-size: 40px;
    }

    .wn-cpp-portal-main {
        padding: 12px;
    }

    .wn-cpp-portal-welcome > span {
        display: none;
    }

}
/* =========================================================
   02 — THE FRAGMENTED EXPERIENCE
   ========================================================= */

.wn-cpp-fragmented {
    position: relative;
    overflow: hidden;
    padding: 125px 0 115px;
    background: #f4f7fa;
    color: #101d2d;
}

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


/* =========================================================
   FRAGMENTED — INTRO
   ========================================================= */

.wn-cpp-fragmented-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 100px;
    align-items: start;
}

.wn-cpp-fragmented-title {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.wn-cpp-section-number {
    padding-top: 8px;
    color: #2374ff;
    font-size: 9px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-section-kicker {
    display: block;
    margin-bottom: 20px;
    color: #2374ff;
    font-size: 8px;
    line-height: 1.3;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-cpp-fragmented-title h2 {
    width: 100%;
    max-width: 790px;
    margin: 0;
    color: #101d2d;
    font-size: clamp(44px, 4.25vw, 62px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 650;
}

.wn-cpp-fragmented-title h2 > span {
    display: block;
    margin-top: 8px;
    color: #667383;
    font-weight: 500;
}

.wn-cpp-fragmented-intro {
    padding-top: 42px;
}

.wn-cpp-fragmented-intro p {
    width: 100%;
    max-width: 500px;
    margin: 0;
    color: #596675;
    font-size: 16px;
    line-height: 1.75;
}

.wn-cpp-fragmented-intro p + p {
    margin-top: 20px;
}


/* =========================================================
   FRAGMENTED — MAP
   ========================================================= */

.wn-cpp-fragmented-map {
    margin-top: 85px;
    border-top: 1px solid #cdd8e3;
    border-bottom: 1px solid #cdd8e3;
}

.wn-cpp-fragmented-map-head {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 17px 0;
    border-bottom: 1px solid #dbe3eb;
}

.wn-cpp-fragmented-map-head > span {
    color: #2374ff;
    font-size: 8px;
    line-height: 1.3;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-cpp-fragmented-map-head > p {
    margin: 0;
    color: #8b97a4;
    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   FRAGMENTED — FLOW
   ========================================================= */

.wn-cpp-fragmented-flow {
    display: grid;
    grid-template-columns:
        minmax(190px, .7fr)
        minmax(310px, 1.15fr)
        100px
        minmax(330px, 1.15fr);
    gap: 30px;
    align-items: center;
    min-height: 330px;
    padding: 45px 0;
}

.wn-cpp-fragmented-party-label {
    display: block;
    margin-bottom: 16px;
    color: #8b98a5;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .11em;
}


/* =========================================================
   FRAGMENTED — EXTERNAL PARTY
   ========================================================= */

.wn-cpp-fragmented-person {
    display: flex;
    min-height: 92px;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border: 1px solid #d3dee8;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(20, 40, 65, .035);
}

.wn-cpp-fragmented-person > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(35, 116, 255, .22);
    border-radius: 50%;
    background: #edf5ff;
    color: #2374ff;
    font-size: 9px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-fragmented-person strong,
.wn-cpp-fragmented-person small {
    display: block;
}

.wn-cpp-fragmented-person strong {
    color: #253548;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 650;
}

.wn-cpp-fragmented-person small {
    margin-top: 5px;
    color: #8996a3;
    font-size: 7px;
    line-height: 1.35;
}


/* =========================================================
   FRAGMENTED — CHANNELS
   ========================================================= */

.wn-cpp-fragmented-channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.wn-cpp-fragmented-channel {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 76px;
    padding: 13px;
    border: 1px solid #d5e0e9;
    background: rgba(255, 255, 255, .65);
}

.wn-cpp-fragmented-channel > span {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid #d8e2eb;
    color: #2374ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-fragmented-channel strong,
.wn-cpp-fragmented-channel small {
    display: block;
}

.wn-cpp-fragmented-channel strong {
    color: #354557;
    font-size: 9px;
    line-height: 1.25;
    font-weight: 650;
}

.wn-cpp-fragmented-channel small {
    margin-top: 4px;
    color: #8a97a4;
    font-size: 6px;
    line-height: 1.3;
}


/* =========================================================
   FRAGMENTED — GAP
   ========================================================= */

.wn-cpp-fragmented-bridge {
    display: grid;
    grid-template-columns: 1fr 36px 1fr;
    gap: 8px;
    align-items: center;
}

.wn-cpp-fragmented-bridge > i {
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(35, 116, 255, .12),
        rgba(35, 116, 255, .55)
    );
}

.wn-cpp-fragmented-bridge > i:last-child {
    background: linear-gradient(
        90deg,
        rgba(35, 116, 255, .55),
        rgba(35, 116, 255, .12)
    );
}

.wn-cpp-fragmented-bridge > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px dashed rgba(35, 116, 255, .38);
    border-radius: 50%;
    background: #f4f7fa;
    color: #2374ff;
    font-size: 13px;
    line-height: 1;
    font-weight: 650;
}


/* =========================================================
   FRAGMENTED — INTERNAL SYSTEMS
   ========================================================= */

.wn-cpp-fragmented-systems {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.wn-cpp-fragmented-systems > div {
    min-height: 76px;
    padding: 14px;
    border: 1px solid #d3dee8;
    background: #ffffff;
}

.wn-cpp-fragmented-systems span,
.wn-cpp-fragmented-systems strong {
    display: block;
}

.wn-cpp-fragmented-systems span {
    margin-bottom: 12px;
    color: #2374ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}

.wn-cpp-fragmented-systems strong {
    color: #455568;
    font-size: 8px;
    line-height: 1.3;
    font-weight: 650;
}


/* =========================================================
   FRAGMENTED — PROBLEMS
   ========================================================= */

.wn-cpp-fragmented-problems {
    margin-top: 80px;
    border-top: 1px solid #cdd8e3;
}

.wn-cpp-fragmented-problem {
    display: grid;
    grid-template-columns: 54px minmax(260px, .85fr) minmax(350px, 1.15fr);
    gap: 25px;
    align-items: start;
    padding: 29px 0 31px;
    border-bottom: 1px solid #d6e0e9;
}

.wn-cpp-fragmented-problem > span {
    padding-top: 5px;
    color: #2374ff;
    font-size: 8px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-fragmented-problem > div {
    display: contents;
}

.wn-cpp-fragmented-problem h3 {
    max-width: 360px;
    margin: 0;
    color: #17273a;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.025em;
    font-weight: 650;
}

.wn-cpp-fragmented-problem p {
    max-width: 550px;
    margin: 0;
    color: #657382;
    font-size: 13px;
    line-height: 1.72;
}


/* =========================================================
   FRAGMENTED — OUTCOME
   ========================================================= */

.wn-cpp-fragmented-outcome {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 55px;
    margin-top: 70px;
    padding-top: 30px;
    border-top: 3px solid #2374ff;
}

.wn-cpp-fragmented-outcome > span {
    color: #2374ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-cpp-fragmented-outcome > div {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    gap: 80px;
}

.wn-cpp-fragmented-outcome h3 {
    max-width: 500px;
    margin: 0;
    color: #101d2d;
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.15;
    letter-spacing: -.035em;
    font-weight: 650;
}

.wn-cpp-fragmented-outcome h3 > span {
    display: block;
    color: #667383;
    font-weight: 500;
}

.wn-cpp-fragmented-outcome p {
    max-width: 560px;
    margin: 0;
    color: #596675;
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   02 — RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

    .wn-cpp-fragmented-flow {
        grid-template-columns:
            minmax(180px, .65fr)
            minmax(280px, 1fr)
            70px
            minmax(300px, 1fr);
        gap: 20px;
    }

}


@media (max-width: 1100px) {

    .wn-cpp-fragmented .wn-wrap {
        width: calc(100% - 70px);
    }

    .wn-cpp-fragmented-head {
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
        gap: 60px;
    }

    .wn-cpp-fragmented-flow {
        grid-template-columns: 1fr 1.45fr;
        gap: 25px 45px;
        min-height: 0;
    }

    .wn-cpp-fragmented-bridge {
        display: none;
    }

    .wn-cpp-fragmented-business {
        grid-column: 2;
    }

    .wn-cpp-fragmented-party {
        align-self: center;
    }

    .wn-cpp-fragmented-problem {
        grid-template-columns: 45px minmax(230px, .8fr) minmax(300px, 1.2fr);
    }

    .wn-cpp-fragmented-outcome > div {
        gap: 50px;
    }

}


@media (max-width: 900px) {

    .wn-cpp-fragmented-head {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-cpp-fragmented-intro {
        max-width: 720px;
        padding-top: 0;
        padding-left: 76px;
    }

    .wn-cpp-fragmented-intro p {
        max-width: 650px;
    }

    .wn-cpp-fragmented-flow {
        grid-template-columns: 1fr;
    }

    .wn-cpp-fragmented-party,
    .wn-cpp-fragmented-channels,
    .wn-cpp-fragmented-business {
        grid-column: auto;
    }

    .wn-cpp-fragmented-person {
        max-width: 420px;
    }

    .wn-cpp-fragmented-channels,
    .wn-cpp-fragmented-systems {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .wn-cpp-fragmented-problem {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 18px;
    }

    .wn-cpp-fragmented-problem > div {
        display: block;
    }

    .wn-cpp-fragmented-problem h3 {
        max-width: 100%;
    }

    .wn-cpp-fragmented-problem p {
        max-width: 680px;
        margin-top: 11px;
    }

    .wn-cpp-fragmented-outcome {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


@media (max-width: 760px) {

    .wn-cpp-fragmented {
        padding: 90px 0 85px;
    }

    .wn-cpp-fragmented .wn-wrap {
        width: calc(100% - 40px);
    }

    .wn-cpp-fragmented-title {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .wn-cpp-section-number {
        padding-top: 0;
    }

    .wn-cpp-fragmented-title h2 {
        max-width: 100%;
        font-size: clamp(38px, 10vw, 50px);
    }

    .wn-cpp-fragmented-intro {
        padding-left: 0;
    }

    .wn-cpp-fragmented-map {
        margin-top: 60px;
    }

    .wn-cpp-fragmented-map-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .wn-cpp-fragmented-flow {
        gap: 28px;
        padding: 35px 0;
    }

    .wn-cpp-fragmented-channels,
    .wn-cpp-fragmented-systems {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-cpp-fragmented-problems {
        margin-top: 60px;
    }

    .wn-cpp-fragmented-problem {
        padding: 25px 0 27px;
    }

    .wn-cpp-fragmented-problem h3 {
        font-size: 18px;
    }

    .wn-cpp-fragmented-outcome {
        margin-top: 55px;
    }

    .wn-cpp-fragmented-outcome > div {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wn-cpp-fragmented-outcome h3,
    .wn-cpp-fragmented-outcome p {
        max-width: 100%;
    }

}


@media (max-width: 520px) {

    .wn-cpp-fragmented-channels,
    .wn-cpp-fragmented-systems {
        grid-template-columns: 1fr;
    }

    .wn-cpp-fragmented-problem {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .wn-cpp-fragmented-problem > span {
        padding-top: 0;
    }

}


@media (max-width: 380px) {

    .wn-cpp-fragmented-title h2 {
        font-size: 36px;
    }

}
/* =========================================================
   03 — ONE CONNECTED PORTAL
   ========================================================= */

.wn-cpp-connected {
    position: relative;
    overflow: hidden;
    padding: 125px 0 115px;
    background: #07111f;
    color: #ffffff;
}

.wn-cpp-connected::before {
    content: "";
    position: absolute;
    top: 260px;
    left: -460px;
    width: 900px;
    height: 900px;
    border: 1px solid rgba(35, 116, 255, .045);
    border-radius: 50%;
    box-shadow:
        0 0 0 130px rgba(35, 116, 255, .011),
        0 0 0 260px rgba(35, 116, 255, .005);
    pointer-events: none;
}

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


/* =========================================================
   CONNECTED — INTRO
   ========================================================= */

.wn-cpp-connected-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 100px;
    align-items: start;
}

.wn-cpp-connected-title {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.wn-cpp-connected .wn-cpp-section-number {
    padding-top: 8px;
    color: #70b8ff;
}

.wn-cpp-connected .wn-cpp-section-kicker {
    color: #70b8ff;
}

.wn-cpp-connected-title h2 {
    width: 100%;
    max-width: 800px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 4.25vw, 62px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 650;
}

.wn-cpp-connected-title h2 > span {
    display: block;
    margin-top: 8px;
    color: #70b8ff;
    font-weight: 500;
}

.wn-cpp-connected-intro {
    padding-top: 42px;
}

.wn-cpp-connected-intro p {
    width: 100%;
    max-width: 500px;
    margin: 0;
    color: rgba(255, 255, 255, .58);
    font-size: 16px;
    line-height: 1.75;
}

.wn-cpp-connected-intro p + p {
    margin-top: 20px;
}


/* =========================================================
   CONNECTED — SYSTEM
   ========================================================= */

.wn-cpp-connected-system {
    margin-top: 85px;
    border-top: 1px solid rgba(112, 184, 255, .18);
    border-bottom: 1px solid rgba(112, 184, 255, .18);
}

.wn-cpp-connected-system-head {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.wn-cpp-connected-system-head > div > span,
.wn-cpp-connected-system-head > div > strong {
    display: block;
}

.wn-cpp-connected-system-head > div > span {
    margin-bottom: 7px;
    color: #70b8ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-cpp-connected-system-head > div > strong {
    color: rgba(255, 255, 255, .62);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
}

.wn-cpp-connected-system-head > span {
    padding: 7px 9px;
    border: 1px solid rgba(75, 210, 151, .18);
    background: rgba(75, 210, 151, .045);
    color: rgba(111, 224, 171, .68);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .09em;
}


/* =========================================================
   CONNECTED — STAGE
   ========================================================= */

.wn-cpp-connected-stage {
    display: grid;
    grid-template-columns:
        minmax(150px, .62fr)
        minmax(80px, .38fr)
        minmax(420px, 1.65fr)
        minmax(80px, .38fr)
        minmax(190px, .8fr);
    gap: 22px;
    align-items: center;
    min-height: 510px;
    padding: 55px 0;
}

.wn-cpp-connected-label {
    display: block;
    margin-bottom: 15px;
    color: rgba(112, 184, 255, .48);
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .11em;
}


/* =========================================================
   CONNECTED — EXTERNAL USERS
   ========================================================= */

.wn-cpp-connected-external {
    min-width: 0;
}

.wn-cpp-connected-user {
    display: flex;
    min-height: 68px;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border: 1px solid rgba(112, 184, 255, .12);
    background: rgba(255, 255, 255, .018);
}

.wn-cpp-connected-user + .wn-cpp-connected-user {
    margin-top: 7px;
}

.wn-cpp-connected-user > span {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border: 1px solid rgba(112, 184, 255, .18);
    border-radius: 50%;
    background: rgba(35, 116, 255, .055);
    color: #70b8ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-connected-user strong,
.wn-cpp-connected-user small {
    display: block;
}

.wn-cpp-connected-user strong {
    color: rgba(255, 255, 255, .68);
    font-size: 8px;
    line-height: 1.25;
    font-weight: 650;
}

.wn-cpp-connected-user small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .25);
    font-size: 5px;
    line-height: 1.25;
}


/* =========================================================
   CONNECTED — PATHS
   ========================================================= */

.wn-cpp-connected-path {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.wn-cpp-connected-path > i {
    display: block;
    height: 1px;
    flex: 1 1 auto;
    background: linear-gradient(
        90deg,
        rgba(112, 184, 255, .08),
        rgba(35, 116, 255, .7)
    );
}

.wn-cpp-connected-path > i:last-child {
    background: linear-gradient(
        90deg,
        rgba(35, 116, 255, .7),
        rgba(112, 184, 255, .08)
    );
}

.wn-cpp-connected-path > span {
    flex: 0 0 auto;
    color: rgba(112, 184, 255, .48);
    font-size: 4px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
    white-space: nowrap;
}


/* =========================================================
   CONNECTED — PORTAL CORE
   ========================================================= */

.wn-cpp-connected-core {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border: 1px solid rgba(35, 116, 255, .42);
    background: #0b1726;
    box-shadow:
        0 25px 65px rgba(0, 0, 0, .2),
        0 0 50px rgba(35, 116, 255, .035);
}

.wn-cpp-connected-core::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(35, 116, 255, .12),
        rgba(35, 116, 255, 0) 68%
    );
    pointer-events: none;
}

.wn-cpp-connected-core-top {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(112, 184, 255, .12);
}

.wn-cpp-connected-core-top > div > span,
.wn-cpp-connected-core-top > div > strong {
    display: block;
}

.wn-cpp-connected-core-top > div > span {
    margin-bottom: 6px;
    color: #70b8ff;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-connected-core-top > div > strong {
    color: rgba(255, 255, 255, .86);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 650;
}

.wn-cpp-connected-core-top > span {
    padding: 6px 8px;
    border: 1px solid rgba(75, 210, 151, .2);
    background: rgba(75, 210, 151, .05);
    color: rgba(111, 224, 171, .7);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}


/* =========================================================
   CONNECTED — MODULES
   ========================================================= */

.wn-cpp-connected-core-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 17px;
}

.wn-cpp-connected-module {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 67px;
    padding: 10px;
    border: 1px solid rgba(112, 184, 255, .105);
    background: rgba(255, 255, 255, .016);
}

.wn-cpp-connected-module > span {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(112, 184, 255, .15);
    color: #70b8ff;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-connected-module strong,
.wn-cpp-connected-module small {
    display: block;
}

.wn-cpp-connected-module strong {
    color: rgba(255, 255, 255, .68);
    font-size: 7px;
    line-height: 1.25;
    font-weight: 650;
}

.wn-cpp-connected-module small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .25);
    font-size: 5px;
    line-height: 1.25;
}


/* =========================================================
   CONNECTED — CORE FOOT
   ========================================================= */

.wn-cpp-connected-core-foot {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    gap: 10px;
    align-items: center;
    min-height: 52px;
    padding: 0 17px;
    border-top: 1px solid rgba(112, 184, 255, .1);
    background: rgba(0, 0, 0, .08);
}

.wn-cpp-connected-core-foot > span {
    color: rgba(112, 184, 255, .46);
    font-size: 4px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
    white-space: nowrap;
}

.wn-cpp-connected-core-foot > i {
    display: block;
    height: 1px;
    background: rgba(112, 184, 255, .13);
}


/* =========================================================
   CONNECTED — BUSINESS SYSTEMS
   ========================================================= */

.wn-cpp-connected-business {
    min-width: 0;
}

.wn-cpp-connected-business-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.wn-cpp-connected-business-grid > div {
    min-width: 0;
    min-height: 67px;
    padding: 11px;
    border: 1px solid rgba(112, 184, 255, .12);
    background: rgba(255, 255, 255, .018);
}

.wn-cpp-connected-business-grid span,
.wn-cpp-connected-business-grid strong {
    display: block;
}

.wn-cpp-connected-business-grid span {
    margin-bottom: 12px;
    color: #70b8ff;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
}

.wn-cpp-connected-business-grid strong {
    color: rgba(255, 255, 255, .46);
    font-size: 6px;
    line-height: 1.3;
    font-weight: 650;
}


/* =========================================================
   CONNECTED — PRINCIPLES
   ========================================================= */

.wn-cpp-connected-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 90px;
    border-top: 1px solid rgba(112, 184, 255, .16);
    border-bottom: 1px solid rgba(112, 184, 255, .16);
}

.wn-cpp-connected-principles > article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
    padding: 34px 32px;
}

.wn-cpp-connected-principles > article:first-child {
    padding-left: 0;
}

.wn-cpp-connected-principles > article:last-child {
    padding-right: 0;
}

.wn-cpp-connected-principles > article + article {
    border-left: 1px solid rgba(255, 255, 255, .08);
}

.wn-cpp-connected-principles > article > span {
    padding-top: 4px;
    color: #70b8ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-connected-principles small {
    display: block;
    margin-bottom: 11px;
    color: rgba(112, 184, 255, .52);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-connected-principles h3 {
    max-width: 290px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 650;
}

.wn-cpp-connected-principles p {
    max-width: 330px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, .43);
    font-size: 11px;
    line-height: 1.7;
}


/* =========================================================
   CONNECTED — OUTCOME
   ========================================================= */

.wn-cpp-connected-outcome {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 55px;
    margin-top: 70px;
    padding-top: 30px;
    border-top: 3px solid #2374ff;
}

.wn-cpp-connected-outcome > span {
    color: #70b8ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-cpp-connected-outcome > div {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    gap: 80px;
}

.wn-cpp-connected-outcome h3 {
    max-width: 520px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.15;
    letter-spacing: -.035em;
    font-weight: 650;
}

.wn-cpp-connected-outcome h3 > span {
    display: block;
    color: #70b8ff;
    font-weight: 500;
}

.wn-cpp-connected-outcome p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .56);
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   03 — RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

    .wn-cpp-connected-stage {
        grid-template-columns:
            minmax(140px, .6fr)
            55px
            minmax(390px, 1.6fr)
            55px
            minmax(180px, .75fr);
        gap: 16px;
    }

    .wn-cpp-connected-path > span {
        display: none;
    }

}


@media (max-width: 1100px) {

    .wn-cpp-connected .wn-wrap {
        width: calc(100% - 70px);
    }

    .wn-cpp-connected-head {
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
        gap: 60px;
    }

    .wn-cpp-connected-stage {
        grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr);
        gap: 35px;
        min-height: 0;
    }

    .wn-cpp-connected-external {
        grid-column: 1;
        grid-row: 1;
    }

    .wn-cpp-connected-core {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .wn-cpp-connected-business {
        grid-column: 1;
        grid-row: 2;
    }

    .wn-cpp-connected-path {
        display: none;
    }

    .wn-cpp-connected-principles > article {
        padding-inline: 24px;
    }

    .wn-cpp-connected-outcome > div {
        gap: 50px;
    }

}


@media (max-width: 900px) {

    .wn-cpp-connected-head {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-cpp-connected-intro {
        max-width: 720px;
        padding-top: 0;
        padding-left: 76px;
    }

    .wn-cpp-connected-intro p {
        max-width: 650px;
    }

    .wn-cpp-connected-stage {
        grid-template-columns: 1fr;
    }

    .wn-cpp-connected-external,
    .wn-cpp-connected-core,
    .wn-cpp-connected-business {
        grid-column: auto;
        grid-row: auto;
    }

    .wn-cpp-connected-external {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .wn-cpp-connected-external > .wn-cpp-connected-label {
        grid-column: 1 / -1;
    }

    .wn-cpp-connected-user + .wn-cpp-connected-user {
        margin-top: 0;
    }

    .wn-cpp-connected-business-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wn-cpp-connected-principles {
        grid-template-columns: 1fr;
    }

    .wn-cpp-connected-principles > article,
    .wn-cpp-connected-principles > article:first-child,
    .wn-cpp-connected-principles > article:last-child {
        padding: 30px 0;
    }

    .wn-cpp-connected-principles > article + article {
        border-top: 1px solid rgba(255, 255, 255, .08);
        border-left: 0;
    }

    .wn-cpp-connected-principles h3,
    .wn-cpp-connected-principles p {
        max-width: 650px;
    }

    .wn-cpp-connected-outcome {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


@media (max-width: 760px) {

    .wn-cpp-connected {
        padding: 90px 0 85px;
    }

    .wn-cpp-connected .wn-wrap {
        width: calc(100% - 40px);
    }

    .wn-cpp-connected-title {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .wn-cpp-connected .wn-cpp-section-number {
        padding-top: 0;
    }

    .wn-cpp-connected-title h2 {
        max-width: 100%;
        font-size: clamp(38px, 10vw, 50px);
    }

    .wn-cpp-connected-intro {
        padding-left: 0;
    }

    .wn-cpp-connected-system {
        margin-top: 60px;
    }

    .wn-cpp-connected-system-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .wn-cpp-connected-stage {
        gap: 28px;
        padding: 35px 0;
    }

    .wn-cpp-connected-core-grid {
        grid-template-columns: 1fr;
    }

    .wn-cpp-connected-core-foot {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px 17px;
    }

    .wn-cpp-connected-core-foot > i {
        display: none;
    }

    .wn-cpp-connected-principles {
        margin-top: 65px;
    }

    .wn-cpp-connected-outcome {
        margin-top: 55px;
    }

    .wn-cpp-connected-outcome > div {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wn-cpp-connected-outcome h3,
    .wn-cpp-connected-outcome p {
        max-width: 100%;
    }

}


@media (max-width: 560px) {

    .wn-cpp-connected-external {
        grid-template-columns: 1fr;
    }

    .wn-cpp-connected-business-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 380px) {

    .wn-cpp-connected-title h2 {
        font-size: 36px;
    }

    .wn-cpp-connected-business-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   04 — CUSTOMER & PARTNER WORKFLOWS
   ========================================================= */

.wn-cpp-workflows {
    position: relative;
    overflow: hidden;
    padding: 125px 0 115px;
    background: #f4f7fa;
    color: #101d2d;
}

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


/* =========================================================
   WORKFLOWS — INTRO
   ========================================================= */

.wn-cpp-workflows-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 100px;
    align-items: start;
}

.wn-cpp-workflows-title {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.wn-cpp-workflows-title .wn-cpp-section-number {
    padding-top: 8px;
    color: #2374ff;
}

.wn-cpp-workflows-title .wn-cpp-section-kicker {
    color: #2374ff;
}

.wn-cpp-workflows-title h2 {
    width: 100%;
    max-width: 790px;
    margin: 0;
    color: #101d2d;
    font-size: clamp(44px, 4.25vw, 62px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 650;
}

.wn-cpp-workflows-title h2 > span {
    display: block;
    margin-top: 8px;
    color: #667383;
    font-weight: 500;
}

.wn-cpp-workflows-intro {
    padding-top: 42px;
}

.wn-cpp-workflows-intro p {
    width: 100%;
    max-width: 500px;
    margin: 0;
    color: #596675;
    font-size: 16px;
    line-height: 1.75;
}

.wn-cpp-workflows-intro p + p {
    margin-top: 20px;
}


/* =========================================================
   WORKFLOWS — EXAMPLE
   ========================================================= */

.wn-cpp-workflows-example {
    margin-top: 85px;
    border: 1px solid #d3dee8;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(20, 40, 65, .045);
}

.wn-cpp-workflows-example-head {
    display: flex;
    min-height: 78px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 17px 22px;
    border-bottom: 1px solid #dce5ed;
}

.wn-cpp-workflows-example-head > div:first-child > span,
.wn-cpp-workflows-example-head > div:first-child > strong {
    display: block;
}

.wn-cpp-workflows-example-head > div:first-child > span {
    margin-bottom: 7px;
    color: #2374ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-cpp-workflows-example-head > div:first-child > strong {
    color: #27384b;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 650;
}

.wn-cpp-workflows-example-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wn-cpp-workflows-example-meta > span {
    color: #8996a3;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}

.wn-cpp-workflows-example-meta > strong {
    padding: 7px 9px;
    border: 1px solid rgba(35, 116, 255, .2);
    background: #edf5ff;
    color: #2374ff;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
}


/* =========================================================
   WORKFLOWS — TRACK
   ========================================================= */

.wn-cpp-workflow-track {
    display: grid;
    grid-template-columns:
        minmax(150px, 1fr)
        38px
        minmax(150px, 1fr)
        38px
        minmax(150px, 1fr)
        38px
        minmax(150px, 1fr)
        38px
        minmax(150px, 1fr);
    align-items: start;
    padding: 52px 30px 48px;
}

.wn-cpp-workflow-step {
    min-width: 0;
}

.wn-cpp-workflow-marker {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
}

.wn-cpp-workflow-marker > span {
    display: grid;
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #ccd8e3;
    border-radius: 50%;
    background: #ffffff;
    color: #9aa6b2;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-workflow-step.is-complete .wn-cpp-workflow-marker > span {
    border-color: rgba(35, 116, 255, .35);
    background: #edf5ff;
    color: #2374ff;
}

.wn-cpp-workflow-step.is-active .wn-cpp-workflow-marker > span {
    border-color: #2374ff;
    background: #2374ff;
    color: #ffffff;
    box-shadow: 0 0 0 6px rgba(35, 116, 255, .08);
}

.wn-cpp-workflow-step small {
    display: block;
    margin-top: 20px;
    color: #9aa6b2;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-workflow-step.is-complete small,
.wn-cpp-workflow-step.is-active small {
    color: #2374ff;
}

.wn-cpp-workflow-step h3 {
    max-width: 180px;
    margin: 10px 0 0;
    color: #26374a;
    font-size: 16px;
    line-height: 1.22;
    letter-spacing: -.02em;
    font-weight: 650;
}

.wn-cpp-workflow-step p {
    max-width: 180px;
    margin: 12px 0 0;
    color: #788592;
    font-size: 9px;
    line-height: 1.65;
}


/* =========================================================
   WORKFLOWS — TRACK LINES
   ========================================================= */

.wn-cpp-workflow-line {
    position: relative;
    display: block;
    height: 1px;
    margin-top: 19px;
    background: #d8e2eb;
}

.wn-cpp-workflow-line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #b5c3d0;
    border-right: 1px solid #b5c3d0;
    transform: translateY(-50%) rotate(45deg);
}

.wn-cpp-workflow-line.is-complete,
.wn-cpp-workflow-line.is-active {
    background: linear-gradient(
        90deg,
        rgba(35, 116, 255, .35),
        #2374ff
    );
}

.wn-cpp-workflow-line.is-complete::after,
.wn-cpp-workflow-line.is-active::after {
    border-color: #2374ff;
}


/* =========================================================
   WORKFLOWS — CONTEXT
   ========================================================= */

.wn-cpp-workflow-context {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #dce5ed;
    background: #f8fafc;
}

.wn-cpp-workflow-context > div {
    min-width: 0;
    padding: 18px 22px;
}

.wn-cpp-workflow-context > div + div {
    border-left: 1px solid #e0e7ee;
}

.wn-cpp-workflow-context span,
.wn-cpp-workflow-context strong {
    display: block;
}

.wn-cpp-workflow-context span {
    margin-bottom: 8px;
    color: #98a4b0;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .09em;
}

.wn-cpp-workflow-context strong {
    color: #435366;
    font-size: 8px;
    line-height: 1.3;
    font-weight: 650;
}


/* =========================================================
   WORKFLOWS — CAPABILITIES
   ========================================================= */

.wn-cpp-workflows-capabilities {
    margin-top: 90px;
    border-top: 1px solid #cdd8e3;
    border-bottom: 1px solid #cdd8e3;
}

.wn-cpp-workflows-capabilities-head {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 17px 0;
    border-bottom: 1px solid #dbe3eb;
}

.wn-cpp-workflows-capabilities-head > span {
    color: #2374ff;
    font-size: 8px;
    line-height: 1.3;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-cpp-workflows-capabilities-head > p {
    max-width: 520px;
    margin: 0;
    color: #8996a3;
    font-size: 10px;
    line-height: 1.5;
    text-align: right;
}


/* =========================================================
   WORKFLOWS — CAPABILITY GRID
   ========================================================= */

.wn-cpp-workflows-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wn-cpp-workflows-grid > article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
    min-height: 245px;
    padding: 31px 30px;
}

.wn-cpp-workflows-grid > article:nth-child(2),
.wn-cpp-workflows-grid > article:nth-child(3),
.wn-cpp-workflows-grid > article:nth-child(5),
.wn-cpp-workflows-grid > article:nth-child(6) {
    border-left: 1px solid #dce5ed;
}

.wn-cpp-workflows-grid > article:nth-child(n+4) {
    border-top: 1px solid #dce5ed;
}

.wn-cpp-workflows-grid > article:nth-child(1),
.wn-cpp-workflows-grid > article:nth-child(4) {
    padding-left: 0;
}

.wn-cpp-workflows-grid > article:nth-child(3),
.wn-cpp-workflows-grid > article:nth-child(6) {
    padding-right: 0;
}

.wn-cpp-workflows-grid > article > span {
    padding-top: 4px;
    color: #2374ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-workflows-grid small {
    display: block;
    margin-bottom: 11px;
    color: #2374ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-workflows-grid h3 {
    max-width: 290px;
    margin: 0;
    color: #17273a;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 650;
}

.wn-cpp-workflows-grid p {
    max-width: 330px;
    margin: 16px 0 0;
    color: #657382;
    font-size: 11px;
    line-height: 1.7;
}


/* =========================================================
   WORKFLOWS — OUTCOME
   ========================================================= */

.wn-cpp-workflows-outcome {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 55px;
    margin-top: 70px;
    padding-top: 30px;
    border-top: 3px solid #2374ff;
}

.wn-cpp-workflows-outcome > span {
    color: #2374ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-cpp-workflows-outcome > div {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    gap: 80px;
}

.wn-cpp-workflows-outcome h3 {
    max-width: 500px;
    margin: 0;
    color: #101d2d;
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.15;
    letter-spacing: -.035em;
    font-weight: 650;
}

.wn-cpp-workflows-outcome h3 > span {
    display: block;
    color: #667383;
    font-weight: 500;
}

.wn-cpp-workflows-outcome p {
    max-width: 560px;
    margin: 0;
    color: #596675;
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   04 — RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

    .wn-cpp-workflow-track {
        grid-template-columns:
            minmax(130px, 1fr)
            25px
            minmax(130px, 1fr)
            25px
            minmax(130px, 1fr)
            25px
            minmax(130px, 1fr)
            25px
            minmax(130px, 1fr);
        padding-inline: 24px;
    }

}


@media (max-width: 1100px) {

    .wn-cpp-workflows .wn-wrap {
        width: calc(100% - 70px);
    }

    .wn-cpp-workflows-head {
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
        gap: 60px;
    }

    .wn-cpp-workflow-track {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
    }

    .wn-cpp-workflow-line {
        display: none;
    }

    .wn-cpp-workflow-step {
        padding: 0 18px;
    }

    .wn-cpp-workflow-step + .wn-cpp-workflow-step {
        border-left: 1px solid #e0e7ee;
    }

    .wn-cpp-workflow-step:first-child {
        padding-left: 0;
    }

    .wn-cpp-workflow-step:last-child {
        padding-right: 0;
    }

    .wn-cpp-workflows-outcome > div {
        gap: 50px;
    }

}


@media (max-width: 900px) {

    .wn-cpp-workflows-head {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-cpp-workflows-intro {
        max-width: 720px;
        padding-top: 0;
        padding-left: 76px;
    }

    .wn-cpp-workflows-intro p {
        max-width: 650px;
    }

    .wn-cpp-workflow-track {
        grid-template-columns: 1fr;
        padding: 20px 25px;
    }

    .wn-cpp-workflow-step,
    .wn-cpp-workflow-step:first-child,
    .wn-cpp-workflow-step:last-child {
        display: grid;
        grid-template-columns: 55px minmax(0, 1fr);
        gap: 17px;
        padding: 25px 0;
        border-left: 0;
    }

    .wn-cpp-workflow-step + .wn-cpp-workflow-step {
        border-top: 1px solid #e0e7ee;
        border-left: 0;
    }

    .wn-cpp-workflow-marker {
        height: auto;
        align-items: flex-start;
    }

    .wn-cpp-workflow-step small {
        margin-top: 0;
    }

    .wn-cpp-workflow-step h3,
    .wn-cpp-workflow-step p {
        max-width: 600px;
    }

    .wn-cpp-workflow-context {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-cpp-workflow-context > div:nth-child(3) {
        border-top: 1px solid #e0e7ee;
        border-left: 0;
    }

    .wn-cpp-workflow-context > div:nth-child(4) {
        border-top: 1px solid #e0e7ee;
    }

    .wn-cpp-workflows-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-cpp-workflows-grid > article,
    .wn-cpp-workflows-grid > article:nth-child(1),
    .wn-cpp-workflows-grid > article:nth-child(3),
    .wn-cpp-workflows-grid > article:nth-child(4),
    .wn-cpp-workflows-grid > article:nth-child(6) {
        padding: 30px;
    }

    .wn-cpp-workflows-grid > article:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .wn-cpp-workflows-grid > article:nth-child(even) {
        padding-right: 0;
        border-left: 1px solid #dce5ed;
    }

    .wn-cpp-workflows-grid > article:nth-child(n+3) {
        border-top: 1px solid #dce5ed;
    }

    .wn-cpp-workflows-outcome {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


@media (max-width: 760px) {

    .wn-cpp-workflows {
        padding: 90px 0 85px;
    }

    .wn-cpp-workflows .wn-wrap {
        width: calc(100% - 40px);
    }

    .wn-cpp-workflows-title {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .wn-cpp-workflows-title .wn-cpp-section-number {
        padding-top: 0;
    }

    .wn-cpp-workflows-title h2 {
        max-width: 100%;
        font-size: clamp(38px, 10vw, 50px);
    }

    .wn-cpp-workflows-intro {
        padding-left: 0;
    }

    .wn-cpp-workflows-example {
        margin-top: 60px;
    }

    .wn-cpp-workflows-example-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .wn-cpp-workflows-capabilities {
        margin-top: 65px;
    }

    .wn-cpp-workflows-capabilities-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .wn-cpp-workflows-capabilities-head > p {
        max-width: 100%;
        text-align: left;
    }

    .wn-cpp-workflows-outcome {
        margin-top: 55px;
    }

    .wn-cpp-workflows-outcome > div {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wn-cpp-workflows-outcome h3,
    .wn-cpp-workflows-outcome p {
        max-width: 100%;
    }

}


@media (max-width: 560px) {

    .wn-cpp-workflow-context {
        grid-template-columns: 1fr;
    }

    .wn-cpp-workflow-context > div + div,
    .wn-cpp-workflow-context > div:nth-child(3),
    .wn-cpp-workflow-context > div:nth-child(4) {
        border-top: 1px solid #e0e7ee;
        border-left: 0;
    }

    .wn-cpp-workflows-grid {
        grid-template-columns: 1fr;
    }

    .wn-cpp-workflows-grid > article,
    .wn-cpp-workflows-grid > article:nth-child(1),
    .wn-cpp-workflows-grid > article:nth-child(2),
    .wn-cpp-workflows-grid > article:nth-child(3),
    .wn-cpp-workflows-grid > article:nth-child(4),
    .wn-cpp-workflows-grid > article:nth-child(5),
    .wn-cpp-workflows-grid > article:nth-child(6) {
        min-height: 0;
        padding: 27px 0;
        border-left: 0;
    }

    .wn-cpp-workflows-grid > article + article {
        border-top: 1px solid #dce5ed;
    }

}


@media (max-width: 380px) {

    .wn-cpp-workflows-title h2 {
        font-size: 36px;
    }

}
/* =========================================================
   05 — ROLES & ACCESS
   ========================================================= */

.wn-cpp-access {
    position: relative;
    overflow: hidden;
    padding: 125px 0 115px;
    background: #07111f;
    color: #ffffff;
}

.wn-cpp-access::before {
    content: "";
    position: absolute;
    top: 310px;
    right: -470px;
    width: 900px;
    height: 900px;
    border: 1px solid rgba(35, 116, 255, .045);
    border-radius: 50%;
    box-shadow:
        0 0 0 130px rgba(35, 116, 255, .011),
        0 0 0 260px rgba(35, 116, 255, .005);
    pointer-events: none;
}

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


/* =========================================================
   ACCESS — INTRO
   ========================================================= */

.wn-cpp-access-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 100px;
    align-items: start;
}

.wn-cpp-access-title {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.wn-cpp-access .wn-cpp-section-number {
    padding-top: 8px;
    color: #70b8ff;
}

.wn-cpp-access .wn-cpp-section-kicker {
    color: #70b8ff;
}

.wn-cpp-access-title h2 {
    width: 100%;
    max-width: 820px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 4.25vw, 62px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 650;
}

.wn-cpp-access-title h2 > span {
    display: block;
    margin-top: 8px;
    color: #70b8ff;
    font-weight: 500;
}

.wn-cpp-access-intro {
    padding-top: 42px;
}

.wn-cpp-access-intro p {
    width: 100%;
    max-width: 500px;
    margin: 0;
    color: rgba(255, 255, 255, .58);
    font-size: 16px;
    line-height: 1.75;
}

.wn-cpp-access-intro p + p {
    margin-top: 20px;
}


/* =========================================================
   ACCESS — CONSOLE
   ========================================================= */

.wn-cpp-access-console {
    margin-top: 85px;
    border: 1px solid rgba(112, 184, 255, .17);
    background: #0b1726;
    box-shadow:
        0 28px 75px rgba(0, 0, 0, .18),
        0 0 60px rgba(35, 116, 255, .025);
}

.wn-cpp-access-console-head {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 17px 21px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.wn-cpp-access-console-head > div > span,
.wn-cpp-access-console-head > div > strong {
    display: block;
}

.wn-cpp-access-console-head > div > span {
    margin-bottom: 7px;
    color: #70b8ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-cpp-access-console-head > div > strong {
    color: rgba(255, 255, 255, .65);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
}

.wn-cpp-access-console-head > span {
    padding: 7px 9px;
    border: 1px solid rgba(75, 210, 151, .18);
    background: rgba(75, 210, 151, .045);
    color: rgba(111, 224, 171, .7);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .09em;
}


/* =========================================================
   ACCESS — WORKSPACE
   ========================================================= */

.wn-cpp-access-workspace {
    display: grid;
    grid-template-columns:
        minmax(210px, .72fr)
        minmax(300px, 1fr)
        minmax(350px, 1.18fr);
    min-height: 500px;
}

.wn-cpp-access-organisations,
.wn-cpp-access-users,
.wn-cpp-access-permissions {
    min-width: 0;
}

.wn-cpp-access-organisations {
    padding: 18px;
    border-right: 1px solid rgba(255, 255, 255, .07);
    background: rgba(0, 0, 0, .08);
}

.wn-cpp-access-users {
    border-right: 1px solid rgba(255, 255, 255, .07);
}


/* =========================================================
   ACCESS — PANEL LABEL
   ========================================================= */

.wn-cpp-access-panel-label {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
}

.wn-cpp-access-panel-label > span {
    color: rgba(112, 184, 255, .55);
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-access-panel-label > small {
    color: rgba(255, 255, 255, .22);
    font-size: 5px;
    line-height: 1;
    font-weight: 700;
}


/* =========================================================
   ACCESS — ORGANISATIONS
   ========================================================= */

.wn-cpp-access-org {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    min-height: 68px;
    padding: 11px;
    border: 1px solid transparent;
}

.wn-cpp-access-org + .wn-cpp-access-org {
    margin-top: 6px;
}

.wn-cpp-access-org.is-active {
    border-color: rgba(35, 116, 255, .32);
    background: rgba(35, 116, 255, .08);
}

.wn-cpp-access-org-mark {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(112, 184, 255, .16);
    border-radius: 50%;
    background: rgba(35, 116, 255, .045);
    color: rgba(112, 184, 255, .72);
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-access-org.is-active .wn-cpp-access-org-mark {
    border-color: rgba(35, 116, 255, .38);
    background: rgba(35, 116, 255, .13);
    color: #70b8ff;
}

.wn-cpp-access-org strong,
.wn-cpp-access-org small {
    display: block;
}

.wn-cpp-access-org strong {
    overflow: hidden;
    color: rgba(255, 255, 255, .65);
    font-size: 7px;
    line-height: 1.25;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-cpp-access-org small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .23);
    font-size: 5px;
    line-height: 1.25;
}

.wn-cpp-access-org > em {
    color: rgba(255, 255, 255, .24);
    font-size: 5px;
    line-height: 1;
    font-style: normal;
    font-weight: 700;
}

.wn-cpp-access-org.is-active > em {
    color: #70b8ff;
}


/* =========================================================
   ACCESS — SCOPE
   ========================================================= */

.wn-cpp-access-scope {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.wn-cpp-access-scope > span {
    display: block;
    margin-bottom: 12px;
    color: rgba(112, 184, 255, .46);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-access-scope strong,
.wn-cpp-access-scope small {
    display: block;
}

.wn-cpp-access-scope strong {
    color: rgba(255, 255, 255, .58);
    font-size: 7px;
    line-height: 1.3;
    font-weight: 650;
}

.wn-cpp-access-scope small {
    max-width: 180px;
    margin-top: 6px;
    color: rgba(255, 255, 255, .25);
    font-size: 5px;
    line-height: 1.5;
}


/* =========================================================
   ACCESS — USERS
   ========================================================= */

.wn-cpp-access-users-head,
.wn-cpp-access-permissions-head {
    display: flex;
    min-height: 67px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.wn-cpp-access-users-head > div > span,
.wn-cpp-access-users-head > div > strong,
.wn-cpp-access-permissions-head > div > span,
.wn-cpp-access-permissions-head > div > strong {
    display: block;
}

.wn-cpp-access-users-head > div > span,
.wn-cpp-access-permissions-head > div > span {
    margin-bottom: 6px;
    color: rgba(112, 184, 255, .5);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .09em;
}

.wn-cpp-access-users-head > div > strong,
.wn-cpp-access-permissions-head > div > strong {
    color: rgba(255, 255, 255, .74);
    font-size: 9px;
    line-height: 1.25;
    font-weight: 650;
}

.wn-cpp-access-users-head > span,
.wn-cpp-access-permissions-head > span {
    color: rgba(255, 255, 255, .25);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
}


/* =========================================================
   ACCESS — USER ROWS
   ========================================================= */

.wn-cpp-access-user {
    display: flex;
    min-height: 88px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.wn-cpp-access-user.is-selected {
    background: rgba(35, 116, 255, .055);
    box-shadow: inset 2px 0 0 #2374ff;
}

.wn-cpp-access-user-person {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.wn-cpp-access-user-person > span {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border: 1px solid rgba(112, 184, 255, .14);
    border-radius: 50%;
    background: rgba(255, 255, 255, .018);
    color: rgba(112, 184, 255, .62);
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-access-user.is-selected .wn-cpp-access-user-person > span {
    border-color: rgba(35, 116, 255, .35);
    background: rgba(35, 116, 255, .11);
    color: #70b8ff;
}

.wn-cpp-access-user-person strong,
.wn-cpp-access-user-person small {
    display: block;
}

.wn-cpp-access-user-person strong {
    color: rgba(255, 255, 255, .66);
    font-size: 7px;
    line-height: 1.25;
    font-weight: 650;
}

.wn-cpp-access-user-person small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .21);
    font-size: 5px;
    line-height: 1.2;
}

.wn-cpp-access-role {
    flex: 0 0 auto;
    padding: 6px 7px;
    border: 1px solid rgba(112, 184, 255, .12);
    color: rgba(255, 255, 255, .31);
    font-size: 4px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .06em;
}

.wn-cpp-access-user.is-selected .wn-cpp-access-role {
    border-color: rgba(35, 116, 255, .3);
    background: rgba(35, 116, 255, .08);
    color: #70b8ff;
}


/* =========================================================
   ACCESS — PERMISSIONS
   ========================================================= */

.wn-cpp-access-permission {
    display: flex;
    min-height: 67px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 11px 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.wn-cpp-access-permission > div {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    align-items: center;
}

.wn-cpp-access-permission > div > span {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 1px solid rgba(112, 184, 255, .1);
    color: rgba(255, 255, 255, .22);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-access-permission strong,
.wn-cpp-access-permission small {
    display: block;
}

.wn-cpp-access-permission strong {
    color: rgba(255, 255, 255, .55);
    font-size: 7px;
    line-height: 1.25;
    font-weight: 650;
}

.wn-cpp-access-permission small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .21);
    font-size: 5px;
    line-height: 1.25;
}


/* toggle */

.wn-cpp-access-permission > i {
    position: relative;
    display: block;
    width: 29px;
    height: 15px;
    flex: 0 0 29px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background: rgba(255, 255, 255, .025);
}

.wn-cpp-access-permission > i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
}

.wn-cpp-access-permission.is-enabled > i {
    border-color: rgba(35, 116, 255, .38);
    background: rgba(35, 116, 255, .12);
}

.wn-cpp-access-permission.is-enabled > i::after {
    left: 17px;
    background: #70b8ff;
}

.wn-cpp-access-permission.is-enabled > div > span {
    border-color: rgba(35, 116, 255, .22);
    color: #70b8ff;
}

.wn-cpp-access-permission.is-enabled strong {
    color: rgba(255, 255, 255, .72);
}


/* =========================================================
   ACCESS — CONTROL RULE
   ========================================================= */

.wn-cpp-access-rule {
    display: grid;
    grid-template-columns:
        auto minmax(30px, 1fr)
        auto minmax(30px, 1fr)
        auto minmax(30px, 1fr)
        auto minmax(30px, 1fr)
        auto;
    gap: 12px;
    align-items: center;
    min-height: 61px;
    padding: 0 20px;
    border-top: 1px solid rgba(112, 184, 255, .1);
    background: #091421;
}

.wn-cpp-access-rule > span {
    color: rgba(255, 255, 255, .28);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
}

.wn-cpp-access-rule > strong {
    color: #70b8ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .06em;
    white-space: nowrap;
}

.wn-cpp-access-rule > i {
    position: relative;
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(112, 184, 255, .08),
        rgba(35, 116, 255, .65),
        rgba(112, 184, 255, .08)
    );
}

.wn-cpp-access-rule > i::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 4px;
    height: 4px;
    border-top: 1px solid #2374ff;
    border-right: 1px solid #2374ff;
    transform: translateY(-50%) rotate(45deg);
}


/* =========================================================
   ACCESS — PRINCIPLES
   ========================================================= */

.wn-cpp-access-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 90px;
    border-top: 1px solid rgba(112, 184, 255, .16);
    border-bottom: 1px solid rgba(112, 184, 255, .16);
}

.wn-cpp-access-principles > article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
    padding: 34px 32px;
}

.wn-cpp-access-principles > article:first-child {
    padding-left: 0;
}

.wn-cpp-access-principles > article:last-child {
    padding-right: 0;
}

.wn-cpp-access-principles > article + article {
    border-left: 1px solid rgba(255, 255, 255, .08);
}

.wn-cpp-access-principles > article > span {
    padding-top: 4px;
    color: #70b8ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-access-principles small {
    display: block;
    margin-bottom: 11px;
    color: rgba(112, 184, 255, .52);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-access-principles h3 {
    max-width: 300px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 650;
}

.wn-cpp-access-principles p {
    max-width: 340px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, .43);
    font-size: 11px;
    line-height: 1.7;
}


/* =========================================================
   ACCESS — OUTCOME
   ========================================================= */

.wn-cpp-access-outcome {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 55px;
    margin-top: 70px;
    padding-top: 30px;
    border-top: 3px solid #2374ff;
}

.wn-cpp-access-outcome > span {
    color: #70b8ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-cpp-access-outcome > div {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    gap: 80px;
}

.wn-cpp-access-outcome h3 {
    max-width: 520px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.15;
    letter-spacing: -.035em;
    font-weight: 650;
}

.wn-cpp-access-outcome h3 > span {
    display: block;
    color: #70b8ff;
    font-weight: 500;
}

.wn-cpp-access-outcome p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .56);
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   05 — RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .wn-cpp-access .wn-wrap {
        width: calc(100% - 70px);
    }

    .wn-cpp-access-head {
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
        gap: 60px;
    }

    .wn-cpp-access-workspace {
        grid-template-columns: 210px minmax(270px, .9fr) minmax(310px, 1.1fr);
    }

    .wn-cpp-access-outcome > div {
        gap: 50px;
    }

}


@media (max-width: 900px) {

    .wn-cpp-access-head {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-cpp-access-intro {
        max-width: 720px;
        padding-top: 0;
        padding-left: 76px;
    }

    .wn-cpp-access-intro p {
        max-width: 650px;
    }

    .wn-cpp-access-workspace {
        grid-template-columns: 1fr 1fr;
    }

    .wn-cpp-access-organisations {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .wn-cpp-access-panel-label,
    .wn-cpp-access-scope {
        grid-column: 1 / -1;
    }

    .wn-cpp-access-org + .wn-cpp-access-org {
        margin-top: 0;
    }

    .wn-cpp-access-scope {
        margin-top: 10px;
    }

    .wn-cpp-access-users {
        border-right: 1px solid rgba(255, 255, 255, .07);
    }

    .wn-cpp-access-rule {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        text-align: center;
    }

    .wn-cpp-access-rule > i {
        display: none;
    }

    .wn-cpp-access-rule > strong {
        white-space: normal;
    }

    .wn-cpp-access-principles {
        grid-template-columns: 1fr;
    }

    .wn-cpp-access-principles > article,
    .wn-cpp-access-principles > article:first-child,
    .wn-cpp-access-principles > article:last-child {
        padding: 30px 0;
    }

    .wn-cpp-access-principles > article + article {
        border-top: 1px solid rgba(255, 255, 255, .08);
        border-left: 0;
    }

    .wn-cpp-access-principles h3,
    .wn-cpp-access-principles p {
        max-width: 650px;
    }

    .wn-cpp-access-outcome {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


@media (max-width: 760px) {

    .wn-cpp-access {
        padding: 90px 0 85px;
    }

    .wn-cpp-access .wn-wrap {
        width: calc(100% - 40px);
    }

    .wn-cpp-access-title {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .wn-cpp-access .wn-cpp-section-number {
        padding-top: 0;
    }

    .wn-cpp-access-title h2 {
        max-width: 100%;
        font-size: clamp(38px, 10vw, 50px);
    }

    .wn-cpp-access-intro {
        padding-left: 0;
    }

    .wn-cpp-access-console {
        margin-top: 60px;
    }

    .wn-cpp-access-console-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .wn-cpp-access-workspace {
        grid-template-columns: 1fr;
    }

    .wn-cpp-access-organisations {
        grid-template-columns: 1fr;
    }

    .wn-cpp-access-panel-label,
    .wn-cpp-access-scope {
        grid-column: auto;
    }

    .wn-cpp-access-org + .wn-cpp-access-org {
        margin-top: 6px;
    }

    .wn-cpp-access-users {
        border-top: 1px solid rgba(255, 255, 255, .07);
        border-right: 0;
    }

    .wn-cpp-access-permissions {
        border-top: 1px solid rgba(255, 255, 255, .07);
    }

    .wn-cpp-access-rule {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 18px;
        text-align: left;
    }

    .wn-cpp-access-rule > span,
    .wn-cpp-access-rule > strong {
        padding: 3px 0;
    }

    .wn-cpp-access-principles {
        margin-top: 65px;
    }

    .wn-cpp-access-outcome {
        margin-top: 55px;
    }

    .wn-cpp-access-outcome > div {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wn-cpp-access-outcome h3,
    .wn-cpp-access-outcome p {
        max-width: 100%;
    }

}


@media (max-width: 480px) {

    .wn-cpp-access-user {
        align-items: flex-start;
        flex-direction: column;
    }

    .wn-cpp-access-role {
        margin-left: 42px;
    }

}


@media (max-width: 380px) {

    .wn-cpp-access-title h2 {
        font-size: 36px;
    }

}
/* =========================================================
   06 — CONNECTED TO THE BUSINESS
   ========================================================= */

.wn-cpp-business {
    position: relative;
    overflow: hidden;
    padding: 125px 0 115px;
    background: #f4f7fa;
    color: #101d2d;
}

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


/* =========================================================
   BUSINESS — INTRO
   ========================================================= */

.wn-cpp-business-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 100px;
    align-items: start;
}

.wn-cpp-business-title {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.wn-cpp-business-title .wn-cpp-section-number {
    padding-top: 8px;
    color: #2374ff;
}

.wn-cpp-business-title .wn-cpp-section-kicker {
    color: #2374ff;
}

.wn-cpp-business-title h2 {
    width: 100%;
    max-width: 820px;
    margin: 0;
    color: #101d2d;
    font-size: clamp(44px, 4.25vw, 62px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 650;
}

.wn-cpp-business-title h2 > span {
    display: block;
    margin-top: 8px;
    color: #667383;
    font-weight: 500;
}

.wn-cpp-business-intro {
    padding-top: 42px;
}

.wn-cpp-business-intro p {
    width: 100%;
    max-width: 500px;
    margin: 0;
    color: #596675;
    font-size: 16px;
    line-height: 1.75;
}

.wn-cpp-business-intro p + p {
    margin-top: 20px;
}


/* =========================================================
   BUSINESS — CONNECTION MAP
   ========================================================= */

.wn-cpp-business-map {
    margin-top: 85px;
    border: 1px solid #d3dee8;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(20, 40, 65, .045);
}

.wn-cpp-business-map-head {
    display: flex;
    min-height: 78px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 17px 22px;
    border-bottom: 1px solid #dce5ed;
}

.wn-cpp-business-map-head > div > span,
.wn-cpp-business-map-head > div > strong {
    display: block;
}

.wn-cpp-business-map-head > div > span {
    margin-bottom: 7px;
    color: #2374ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-cpp-business-map-head > div > strong {
    color: #27384b;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 650;
}

.wn-cpp-business-map-head > span {
    color: #94a1ad;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}


/* =========================================================
   BUSINESS — STAGE
   ========================================================= */

.wn-cpp-business-stage {
    display: grid;
    grid-template-columns:
        minmax(270px, .92fr)
        minmax(180px, .58fr)
        minmax(360px, 1.15fr);
    gap: 35px;
    align-items: center;
    min-height: 500px;
    padding: 55px 35px;
}


/* =========================================================
   BUSINESS — PORTAL
   ========================================================= */

.wn-cpp-business-portal {
    min-width: 0;
    border: 1px solid #cad8e5;
    background: #f8fafc;
}

.wn-cpp-business-portal-top {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 15px;
    border-bottom: 1px solid #dbe4ec;
}

.wn-cpp-business-portal-top > div > span,
.wn-cpp-business-portal-top > div > strong {
    display: block;
}

.wn-cpp-business-portal-top > div > span {
    margin-bottom: 6px;
    color: #2374ff;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-business-portal-top > div > strong {
    color: #26384a;
    font-size: 9px;
    line-height: 1.3;
    font-weight: 650;
}

.wn-cpp-business-portal-top > span {
    padding: 6px 8px;
    border: 1px solid rgba(54, 178, 121, .22);
    background: rgba(54, 178, 121, .055);
    color: #269966;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
}

.wn-cpp-business-portal-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 14px;
}

.wn-cpp-business-portal-view > div {
    min-width: 0;
    min-height: 92px;
    padding: 13px;
    border: 1px solid #dce5ed;
    background: #ffffff;
}

.wn-cpp-business-portal-view span,
.wn-cpp-business-portal-view strong,
.wn-cpp-business-portal-view small {
    display: block;
}

.wn-cpp-business-portal-view span {
    margin-bottom: 17px;
    color: #2374ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-business-portal-view strong {
    color: #334558;
    font-size: 8px;
    line-height: 1.25;
    font-weight: 650;
}

.wn-cpp-business-portal-view small {
    margin-top: 5px;
    color: #96a2ae;
    font-size: 5px;
    line-height: 1.35;
}


/* =========================================================
   BUSINESS — BRIDGE
   ========================================================= */

.wn-cpp-business-bridge {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 17px;
}

.wn-cpp-business-bridge-line {
    display: grid;
    grid-template-columns: 1fr 8px 1fr;
    gap: 5px;
    align-items: center;
}

.wn-cpp-business-bridge-line > i {
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(35, 116, 255, .08),
        rgba(35, 116, 255, .6)
    );
}

.wn-cpp-business-bridge-line > i:last-child {
    background: linear-gradient(
        90deg,
        rgba(35, 116, 255, .6),
        rgba(35, 116, 255, .08)
    );
}

.wn-cpp-business-bridge-line > span {
    display: block;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(35, 116, 255, .45);
    border-radius: 50%;
    background: #ffffff;
}

.wn-cpp-business-bridge-core {
    padding: 22px 17px;
    border: 1px solid rgba(35, 116, 255, .35);
    background: #edf5ff;
    text-align: center;
}

.wn-cpp-business-bridge-core > span,
.wn-cpp-business-bridge-core > strong {
    display: block;
}

.wn-cpp-business-bridge-core > span {
    color: #2374ff;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .09em;
}

.wn-cpp-business-bridge-core > strong {
    max-width: 160px;
    margin: 10px auto 0;
    color: #1c3552;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 650;
}

.wn-cpp-business-bridge-core > div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 18px;
}

.wn-cpp-business-bridge-core > div > span {
    padding: 6px 3px;
    border: 1px solid rgba(35, 116, 255, .16);
    background: rgba(255, 255, 255, .65);
    color: #5e7b9d;
    font-size: 4px;
    line-height: 1;
    font-weight: 750;
}


/* =========================================================
   BUSINESS — SYSTEMS
   ========================================================= */

.wn-cpp-business-systems {
    min-width: 0;
}

.wn-cpp-business-systems-label {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 13px;
}

.wn-cpp-business-systems-label > span {
    color: #2374ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-business-systems-label > small {
    max-width: 180px;
    color: #98a4b0;
    font-size: 5px;
    line-height: 1.35;
    text-align: right;
}

.wn-cpp-business-systems-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.wn-cpp-business-systems-grid > article {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-width: 0;
    min-height: 76px;
    padding: 11px;
    border: 1px solid #d6e1ea;
    background: #ffffff;
}

.wn-cpp-business-systems-grid > article > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #d4e0eb;
    background: #f7faff;
    color: #2374ff;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-business-systems-grid strong,
.wn-cpp-business-systems-grid small {
    display: block;
}

.wn-cpp-business-systems-grid strong {
    color: #394b5e;
    font-size: 7px;
    line-height: 1.25;
    font-weight: 650;
}

.wn-cpp-business-systems-grid small {
    margin-top: 4px;
    color: #97a3af;
    font-size: 5px;
    line-height: 1.35;
}


/* =========================================================
   BUSINESS — DIRECTION BAR
   ========================================================= */

.wn-cpp-business-direction {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    gap: 14px;
    align-items: center;
    min-height: 64px;
    padding: 0 22px;
    border-top: 1px solid #dce5ed;
    background: #f8fafc;
}

.wn-cpp-business-direction > span {
    color: #8996a3;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
    white-space: nowrap;
}

.wn-cpp-business-direction > i {
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(35, 116, 255, .08),
        #2374ff,
        rgba(35, 116, 255, .08)
    );
}

.wn-cpp-business-direction > div {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.wn-cpp-business-direction > div > span {
    padding: 5px 7px;
    border: 1px solid rgba(35, 116, 255, .16);
    background: #ffffff;
    color: #2374ff;
    font-size: 4px;
    line-height: 1;
    font-weight: 750;
}


/* =========================================================
   BUSINESS — CONNECTION PATTERNS
   ========================================================= */

.wn-cpp-business-patterns {
    margin-top: 90px;
    border-top: 1px solid #cdd8e3;
    border-bottom: 1px solid #cdd8e3;
}

.wn-cpp-business-patterns-head {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 18px 0;
    border-bottom: 1px solid #dbe3eb;
}

.wn-cpp-business-patterns-head > span {
    color: #2374ff;
    font-size: 8px;
    line-height: 1.35;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-cpp-business-patterns-head > p {
    max-width: 540px;
    margin: 0;
    color: #8996a3;
    font-size: 10px;
    line-height: 1.5;
    text-align: right;
}

.wn-cpp-business-patterns-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wn-cpp-business-patterns-grid > article {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 15px;
    min-width: 0;
    min-height: 260px;
    padding: 32px 27px;
}

.wn-cpp-business-patterns-grid > article:first-child {
    padding-left: 0;
}

.wn-cpp-business-patterns-grid > article:last-child {
    padding-right: 0;
}

.wn-cpp-business-patterns-grid > article + article {
    border-left: 1px solid #dce5ed;
}

.wn-cpp-business-patterns-grid > article > span {
    padding-top: 4px;
    color: #2374ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-business-patterns-grid small {
    display: block;
    margin-bottom: 11px;
    color: #2374ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-business-patterns-grid h3 {
    max-width: 220px;
    margin: 0;
    color: #17273a;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 650;
}

.wn-cpp-business-patterns-grid p {
    max-width: 250px;
    margin: 16px 0 0;
    color: #657382;
    font-size: 11px;
    line-height: 1.7;
}


/* =========================================================
   BUSINESS — CONTROLLED BOUNDARY
   ========================================================= */

.wn-cpp-business-boundary {
    display: grid;
    grid-template-columns: minmax(210px, .55fr) minmax(440px, 1.2fr) minmax(270px, .75fr);
    gap: 50px;
    align-items: center;
    margin-top: 90px;
    padding: 42px 0;
    border-top: 1px solid #cdd8e3;
    border-bottom: 1px solid #cdd8e3;
}

.wn-cpp-business-boundary-label > span,
.wn-cpp-business-boundary-label > strong {
    display: block;
}

.wn-cpp-business-boundary-label > span {
    margin-bottom: 11px;
    color: #2374ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-cpp-business-boundary-label > strong {
    max-width: 240px;
    color: #17273a;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 650;
}

.wn-cpp-business-boundary-flow {
    display: grid;
    grid-template-columns: 1fr 40px 1fr 40px 1fr;
    gap: 8px;
    align-items: center;
}

.wn-cpp-business-boundary-flow > div {
    min-width: 0;
    min-height: 82px;
    padding: 15px;
    border: 1px solid #d5e0e9;
    background: #ffffff;
}

.wn-cpp-business-boundary-flow > div.is-control {
    border-color: rgba(35, 116, 255, .3);
    background: #edf5ff;
}

.wn-cpp-business-boundary-flow span,
.wn-cpp-business-boundary-flow strong {
    display: block;
}

.wn-cpp-business-boundary-flow span {
    margin-bottom: 16px;
    color: #96a2ae;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}

.wn-cpp-business-boundary-flow .is-control span {
    color: #2374ff;
}

.wn-cpp-business-boundary-flow strong {
    color: #415265;
    font-size: 7px;
    line-height: 1.35;
    font-weight: 650;
}

.wn-cpp-business-boundary-flow .is-control strong {
    color: #1f426a;
}

.wn-cpp-business-boundary-flow > i {
    position: relative;
    display: block;
    height: 1px;
    background: #bcd0e2;
}

.wn-cpp-business-boundary-flow > i::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 5px;
    height: 5px;
    border-top: 1px solid #2374ff;
    border-right: 1px solid #2374ff;
    transform: translateY(-50%) rotate(45deg);
}

.wn-cpp-business-boundary > p {
    margin: 0;
    color: #657382;
    font-size: 11px;
    line-height: 1.75;
}


/* =========================================================
   BUSINESS — OUTCOME
   ========================================================= */

.wn-cpp-business-outcome {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 55px;
    margin-top: 70px;
    padding-top: 30px;
    border-top: 3px solid #2374ff;
}

.wn-cpp-business-outcome > span {
    color: #2374ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-cpp-business-outcome > div {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    gap: 80px;
}

.wn-cpp-business-outcome h3 {
    max-width: 520px;
    margin: 0;
    color: #101d2d;
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.15;
    letter-spacing: -.035em;
    font-weight: 650;
}

.wn-cpp-business-outcome h3 > span {
    display: block;
    color: #667383;
    font-weight: 500;
}

.wn-cpp-business-outcome p {
    max-width: 560px;
    margin: 0;
    color: #596675;
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   06 — RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .wn-cpp-business .wn-wrap {
        width: calc(100% - 70px);
    }

    .wn-cpp-business-head {
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
        gap: 60px;
    }

    .wn-cpp-business-stage {
        grid-template-columns: minmax(260px, .9fr) 150px minmax(330px, 1.1fr);
        gap: 25px;
        padding-inline: 25px;
    }

    .wn-cpp-business-patterns-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-cpp-business-patterns-grid > article,
    .wn-cpp-business-patterns-grid > article:first-child,
    .wn-cpp-business-patterns-grid > article:last-child {
        padding: 30px;
    }

    .wn-cpp-business-patterns-grid > article:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .wn-cpp-business-patterns-grid > article:nth-child(even) {
        padding-right: 0;
        border-left: 1px solid #dce5ed;
    }

    .wn-cpp-business-patterns-grid > article:nth-child(n+3) {
        border-top: 1px solid #dce5ed;
    }

    .wn-cpp-business-boundary {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .wn-cpp-business-boundary-label > strong {
        max-width: 600px;
    }

    .wn-cpp-business-boundary > p {
        max-width: 700px;
    }

    .wn-cpp-business-outcome > div {
        gap: 50px;
    }

}


@media (max-width: 900px) {

    .wn-cpp-business-head {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-cpp-business-intro {
        max-width: 720px;
        padding-top: 0;
        padding-left: 76px;
    }

    .wn-cpp-business-intro p {
        max-width: 650px;
    }

    .wn-cpp-business-stage {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 35px 25px;
    }

    .wn-cpp-business-portal,
    .wn-cpp-business-systems {
        width: 100%;
    }

    .wn-cpp-business-bridge {
        display: grid;
        grid-template-columns: 1fr minmax(220px, 320px) 1fr;
        gap: 15px;
        align-items: center;
    }

    .wn-cpp-business-bridge-line {
        display: flex;
        align-items: center;
    }

    .wn-cpp-business-bridge-line > i {
        flex: 1 1 auto;
    }

    .wn-cpp-business-direction {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 18px 22px;
        text-align: center;
    }

    .wn-cpp-business-direction > i {
        display: none;
    }

    .wn-cpp-business-outcome {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


@media (max-width: 760px) {

    .wn-cpp-business {
        padding: 90px 0 85px;
    }

    .wn-cpp-business .wn-wrap {
        width: calc(100% - 40px);
    }

    .wn-cpp-business-title {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .wn-cpp-business-title .wn-cpp-section-number {
        padding-top: 0;
    }

    .wn-cpp-business-title h2 {
        max-width: 100%;
        font-size: clamp(38px, 10vw, 50px);
    }

    .wn-cpp-business-intro {
        padding-left: 0;
    }

    .wn-cpp-business-map {
        margin-top: 60px;
    }

    .wn-cpp-business-map-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .wn-cpp-business-stage {
        padding: 25px 18px;
    }

    .wn-cpp-business-bridge {
        grid-template-columns: 1fr;
    }

    .wn-cpp-business-bridge-line {
        display: none;
    }

    .wn-cpp-business-bridge-core {
        width: 100%;
    }

    .wn-cpp-business-patterns {
        margin-top: 65px;
    }

    .wn-cpp-business-patterns-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .wn-cpp-business-patterns-head > p {
        max-width: 100%;
        text-align: left;
    }

    .wn-cpp-business-boundary {
        margin-top: 65px;
    }

    .wn-cpp-business-boundary-flow {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .wn-cpp-business-boundary-flow > i {
        width: 1px;
        height: 20px;
        margin-inline: auto;
        background: #bcd0e2;
    }

    .wn-cpp-business-boundary-flow > i::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

    .wn-cpp-business-outcome {
        margin-top: 55px;
    }

    .wn-cpp-business-outcome > div {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wn-cpp-business-outcome h3,
    .wn-cpp-business-outcome p {
        max-width: 100%;
    }

}


@media (max-width: 560px) {

    .wn-cpp-business-portal-view,
    .wn-cpp-business-systems-grid {
        grid-template-columns: 1fr;
    }

    .wn-cpp-business-patterns-grid {
        grid-template-columns: 1fr;
    }

    .wn-cpp-business-patterns-grid > article,
    .wn-cpp-business-patterns-grid > article:first-child,
    .wn-cpp-business-patterns-grid > article:nth-child(2),
    .wn-cpp-business-patterns-grid > article:nth-child(3),
    .wn-cpp-business-patterns-grid > article:last-child {
        min-height: 0;
        padding: 27px 0;
        border-left: 0;
    }

    .wn-cpp-business-patterns-grid > article + article {
        border-top: 1px solid #dce5ed;
    }

}


@media (max-width: 380px) {

    .wn-cpp-business-title h2 {
        font-size: 36px;
    }

}
/* =========================================================
   07 — PORTAL FEATURES / WHAT USERS CAN DO
   ========================================================= */

.wn-cpp-features {
    position: relative;
    overflow: hidden;
    padding: 125px 0 115px;
    background: #07111f;
    color: #ffffff;
}

.wn-cpp-features::before {
    content: "";
    position: absolute;
    left: -470px;
    top: 360px;
    width: 900px;
    height: 900px;
    border: 1px solid rgba(35, 116, 255, .045);
    border-radius: 50%;
    box-shadow:
        0 0 0 130px rgba(35, 116, 255, .011),
        0 0 0 260px rgba(35, 116, 255, .005);
    pointer-events: none;
}

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


/* =========================================================
   FEATURES — INTRO
   ========================================================= */

.wn-cpp-features-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 100px;
    align-items: start;
}

.wn-cpp-features-title {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.wn-cpp-features .wn-cpp-section-number {
    padding-top: 8px;
    color: #70b8ff;
}

.wn-cpp-features .wn-cpp-section-kicker {
    color: #70b8ff;
}

.wn-cpp-features-title h2 {
    width: 100%;
    max-width: 820px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 4.25vw, 62px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 650;
}

.wn-cpp-features-title h2 > span {
    display: block;
    margin-top: 8px;
    color: #70b8ff;
    font-weight: 500;
}

.wn-cpp-features-intro {
    padding-top: 42px;
}

.wn-cpp-features-intro p {
    width: 100%;
    max-width: 500px;
    margin: 0;
    color: rgba(255, 255, 255, .58);
    font-size: 16px;
    line-height: 1.75;
}

.wn-cpp-features-intro p + p {
    margin-top: 20px;
}


/* =========================================================
   FEATURES — PORTAL WORKSPACE
   ========================================================= */

.wn-cpp-features-workspace {
    margin-top: 85px;
    border: 1px solid rgba(112, 184, 255, .17);
    background: #0b1726;
    box-shadow:
        0 28px 75px rgba(0, 0, 0, .18),
        0 0 60px rgba(35, 116, 255, .025);
}

.wn-cpp-features-workspace-head {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 17px 21px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.wn-cpp-features-workspace-head > div:first-child > span,
.wn-cpp-features-workspace-head > div:first-child > strong {
    display: block;
}

.wn-cpp-features-workspace-head > div:first-child > span {
    margin-bottom: 7px;
    color: #70b8ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-cpp-features-workspace-head > div:first-child > strong {
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
}

.wn-cpp-features-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wn-cpp-features-user > span {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid rgba(35, 116, 255, .35);
    border-radius: 50%;
    background: rgba(35, 116, 255, .1);
    color: #70b8ff;
    font-size: 6px;
    font-weight: 750;
}

.wn-cpp-features-user strong,
.wn-cpp-features-user small {
    display: block;
}

.wn-cpp-features-user strong {
    color: rgba(255, 255, 255, .7);
    font-size: 7px;
    line-height: 1.2;
    font-weight: 650;
}

.wn-cpp-features-user small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .25);
    font-size: 5px;
}


/* =========================================================
   FEATURES — SHELL
   ========================================================= */

.wn-cpp-features-shell {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    min-height: 530px;
}

.wn-cpp-features-nav {
    padding: 22px 14px;
    border-right: 1px solid rgba(255, 255, 255, .07);
    background: rgba(0, 0, 0, .08);
}

.wn-cpp-features-nav-label {
    margin: 0 9px 17px;
    color: rgba(112, 184, 255, .42);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-features-nav-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 44px;
    padding: 0 9px;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, .3);
}

.wn-cpp-features-nav-item + .wn-cpp-features-nav-item {
    margin-top: 4px;
}

.wn-cpp-features-nav-item > span {
    color: rgba(112, 184, 255, .38);
    font-size: 5px;
    font-weight: 750;
}

.wn-cpp-features-nav-item > strong {
    font-size: 6px;
    line-height: 1.2;
    font-weight: 600;
}

.wn-cpp-features-nav-item.is-active {
    border-color: rgba(35, 116, 255, .22);
    background: rgba(35, 116, 255, .09);
    color: #ffffff;
}

.wn-cpp-features-nav-item.is-active > span {
    color: #70b8ff;
}


/* =========================================================
   FEATURES — MAIN
   ========================================================= */

.wn-cpp-features-main {
    min-width: 0;
    padding: 30px;
}

.wn-cpp-features-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}

.wn-cpp-features-welcome > div > span {
    display: block;
    margin-bottom: 9px;
    color: #70b8ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-features-welcome h3 {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -.025em;
    font-weight: 650;
}

.wn-cpp-features-welcome p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .3);
    font-size: 7px;
    line-height: 1.4;
}

.wn-cpp-features-welcome button {
    appearance: none;
    padding: 9px 12px;
    border: 1px solid rgba(35, 116, 255, .45);
    background: rgba(35, 116, 255, .12);
    color: #70b8ff;
    font: inherit;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .06em;
    pointer-events: none;
}


/* =========================================================
   FEATURES — SUMMARY
   ========================================================= */

.wn-cpp-features-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 28px;
}

.wn-cpp-features-summary > article {
    min-width: 0;
    min-height: 105px;
    padding: 15px;
    border: 1px solid rgba(112, 184, 255, .12);
    background: rgba(255, 255, 255, .018);
}

.wn-cpp-features-summary span,
.wn-cpp-features-summary strong,
.wn-cpp-features-summary small {
    display: block;
}

.wn-cpp-features-summary span {
    color: rgba(112, 184, 255, .45);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}

.wn-cpp-features-summary strong {
    margin-top: 15px;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -.03em;
    font-weight: 650;
}

.wn-cpp-features-summary small {
    margin-top: 9px;
    color: rgba(112, 184, 255, .45);
    font-size: 5px;
}


/* =========================================================
   FEATURES — REQUESTS / ACTIVITY
   ========================================================= */

.wn-cpp-features-content {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(220px, .75fr);
    gap: 9px;
    margin-top: 9px;
}

.wn-cpp-features-requests,
.wn-cpp-features-activity {
    min-width: 0;
    border: 1px solid rgba(112, 184, 255, .12);
    background: rgba(255, 255, 255, .015);
}

.wn-cpp-features-panel-head {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.wn-cpp-features-panel-head strong {
    color: rgba(255, 255, 255, .58);
    font-size: 7px;
    font-weight: 650;
}

.wn-cpp-features-panel-head span {
    color: #70b8ff;
    font-size: 5px;
    font-weight: 750;
    letter-spacing: .06em;
}


/* requests */

.wn-cpp-features-request {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 73px;
    padding: 10px 14px;
}

.wn-cpp-features-request + .wn-cpp-features-request {
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.wn-cpp-features-request > span {
    color: rgba(112, 184, 255, .5);
    font-size: 5px;
    font-weight: 750;
}

.wn-cpp-features-request strong,
.wn-cpp-features-request small {
    display: block;
}

.wn-cpp-features-request strong {
    color: rgba(255, 255, 255, .65);
    font-size: 7px;
    line-height: 1.25;
    font-weight: 650;
}

.wn-cpp-features-request small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .22);
    font-size: 5px;
}

.wn-cpp-features-request em {
    padding: 6px 7px;
    font-size: 4px;
    line-height: 1;
    font-style: normal;
    font-weight: 750;
    letter-spacing: .05em;
}

.wn-cpp-features-request em.is-progress {
    border: 1px solid rgba(35, 116, 255, .3);
    background: rgba(35, 116, 255, .08);
    color: #70b8ff;
}

.wn-cpp-features-request em.is-review {
    border: 1px solid rgba(226, 178, 72, .25);
    background: rgba(226, 178, 72, .055);
    color: #d9b45e;
}

.wn-cpp-features-request em.is-complete {
    border: 1px solid rgba(75, 210, 151, .22);
    background: rgba(75, 210, 151, .05);
    color: #6fdbab;
}


/* activity */

.wn-cpp-features-activity-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    min-height: 73px;
    padding: 14px;
}

.wn-cpp-features-activity-item + .wn-cpp-features-activity-item {
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.wn-cpp-features-activity-item > i {
    display: block;
    width: 6px;
    height: 6px;
    margin-top: 3px;
    border-radius: 50%;
    background: #2374ff;
    box-shadow: 0 0 0 4px rgba(35, 116, 255, .07);
}

.wn-cpp-features-activity-item strong,
.wn-cpp-features-activity-item small {
    display: block;
}

.wn-cpp-features-activity-item strong {
    color: rgba(255, 255, 255, .58);
    font-size: 6px;
    line-height: 1.25;
    font-weight: 650;
}

.wn-cpp-features-activity-item small {
    margin-top: 5px;
    color: rgba(255, 255, 255, .22);
    font-size: 5px;
    line-height: 1.3;
}

.wn-cpp-features-activity-item > span {
    color: rgba(255, 255, 255, .2);
    font-size: 4px;
    white-space: nowrap;
}


/* =========================================================
   FEATURES — WHAT USERS CAN DO
   ========================================================= */

.wn-cpp-features-list {
    margin-top: 90px;
    border-top: 1px solid rgba(112, 184, 255, .16);
    border-bottom: 1px solid rgba(112, 184, 255, .16);
}

.wn-cpp-features-list-head {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.wn-cpp-features-list-head > span {
    color: #70b8ff;
    font-size: 8px;
    line-height: 1.3;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-cpp-features-list-head > p {
    max-width: 520px;
    margin: 0;
    color: rgba(255, 255, 255, .36);
    font-size: 10px;
    line-height: 1.5;
    text-align: right;
}

.wn-cpp-features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wn-cpp-features-grid > article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
    min-height: 245px;
    padding: 31px 30px;
}

.wn-cpp-features-grid > article:nth-child(2),
.wn-cpp-features-grid > article:nth-child(3),
.wn-cpp-features-grid > article:nth-child(5),
.wn-cpp-features-grid > article:nth-child(6) {
    border-left: 1px solid rgba(255, 255, 255, .08);
}

.wn-cpp-features-grid > article:nth-child(n+4) {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.wn-cpp-features-grid > article:nth-child(1),
.wn-cpp-features-grid > article:nth-child(4) {
    padding-left: 0;
}

.wn-cpp-features-grid > article:nth-child(3),
.wn-cpp-features-grid > article:nth-child(6) {
    padding-right: 0;
}

.wn-cpp-features-grid > article > span {
    padding-top: 4px;
    color: #70b8ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-features-grid small {
    display: block;
    margin-bottom: 11px;
    color: rgba(112, 184, 255, .55);
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-features-grid h3 {
    max-width: 290px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 650;
}

.wn-cpp-features-grid p {
    max-width: 330px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, .43);
    font-size: 11px;
    line-height: 1.7;
}


/* =========================================================
   FEATURES — FOCUS
   ========================================================= */

.wn-cpp-features-focus {
    display: grid;
    grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr);
    gap: 70px;
    align-items: center;
    margin-top: 90px;
    padding: 42px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.wn-cpp-features-focus-label > span,
.wn-cpp-features-focus-label > strong {
    display: block;
}

.wn-cpp-features-focus-label > span {
    margin-bottom: 11px;
    color: #70b8ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-cpp-features-focus-label > strong {
    max-width: 280px;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 650;
}

.wn-cpp-features-focus-scale {
    display: grid;
    grid-template-columns: 1fr 50px 1fr 50px 1fr;
    gap: 9px;
    align-items: center;
}

.wn-cpp-features-focus-scale > div {
    min-width: 0;
    min-height: 95px;
    padding: 17px;
    border: 1px solid rgba(112, 184, 255, .13);
    background: #0b1726;
}

.wn-cpp-features-focus-scale > div:nth-of-type(2) {
    border-color: rgba(35, 116, 255, .45);
    background: rgba(35, 116, 255, .09);
}

.wn-cpp-features-focus-scale span,
.wn-cpp-features-focus-scale strong {
    display: block;
}

.wn-cpp-features-focus-scale span {
    margin-bottom: 18px;
    color: rgba(112, 184, 255, .5);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .09em;
}

.wn-cpp-features-focus-scale strong {
    color: rgba(255, 255, 255, .62);
    font-size: 8px;
    line-height: 1.4;
    font-weight: 650;
}

.wn-cpp-features-focus-scale > i {
    position: relative;
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(112, 184, 255, .08),
        #2374ff,
        rgba(112, 184, 255, .08)
    );
}

.wn-cpp-features-focus-scale > i::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 5px;
    height: 5px;
    border-top: 1px solid #2374ff;
    border-right: 1px solid #2374ff;
    transform: translateY(-50%) rotate(45deg);
}


/* =========================================================
   FEATURES — OUTCOME
   ========================================================= */

.wn-cpp-features-outcome {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 55px;
    margin-top: 70px;
    padding-top: 30px;
    border-top: 3px solid #2374ff;
}

.wn-cpp-features-outcome > span {
    color: #70b8ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-cpp-features-outcome > div {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    gap: 80px;
}

.wn-cpp-features-outcome h3 {
    max-width: 530px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.15;
    letter-spacing: -.035em;
    font-weight: 650;
}

.wn-cpp-features-outcome h3 > span {
    display: block;
    color: #70b8ff;
    font-weight: 500;
}

.wn-cpp-features-outcome p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .56);
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   07 — RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .wn-cpp-features .wn-wrap {
        width: calc(100% - 70px);
    }

    .wn-cpp-features-head {
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
        gap: 60px;
    }

    .wn-cpp-features-shell {
        grid-template-columns: 155px minmax(0, 1fr);
    }

    .wn-cpp-features-outcome > div {
        gap: 50px;
    }

}


@media (max-width: 900px) {

    .wn-cpp-features-head {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-cpp-features-intro {
        max-width: 720px;
        padding-top: 0;
        padding-left: 76px;
    }

    .wn-cpp-features-intro p {
        max-width: 650px;
    }

    .wn-cpp-features-shell {
        grid-template-columns: 1fr;
    }

    .wn-cpp-features-nav {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 4px;
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .wn-cpp-features-nav-label {
        display: none;
    }

    .wn-cpp-features-nav-item,
    .wn-cpp-features-nav-item + .wn-cpp-features-nav-item {
        grid-template-columns: 1fr;
        gap: 4px;
        min-height: 52px;
        margin-top: 0;
        padding: 7px;
    }

    .wn-cpp-features-content {
        grid-template-columns: 1fr;
    }

    .wn-cpp-features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-cpp-features-grid > article,
    .wn-cpp-features-grid > article:nth-child(1),
    .wn-cpp-features-grid > article:nth-child(3),
    .wn-cpp-features-grid > article:nth-child(4),
    .wn-cpp-features-grid > article:nth-child(6) {
        padding: 30px;
    }

    .wn-cpp-features-grid > article:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .wn-cpp-features-grid > article:nth-child(even) {
        padding-right: 0;
        border-left: 1px solid rgba(255, 255, 255, .08);
    }

    .wn-cpp-features-grid > article:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .wn-cpp-features-focus {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .wn-cpp-features-focus-label > strong {
        max-width: 600px;
    }

    .wn-cpp-features-outcome {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


@media (max-width: 760px) {

    .wn-cpp-features {
        padding: 90px 0 85px;
    }

    .wn-cpp-features .wn-wrap {
        width: calc(100% - 40px);
    }

    .wn-cpp-features-title {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .wn-cpp-features .wn-cpp-section-number {
        padding-top: 0;
    }

    .wn-cpp-features-title h2 {
        max-width: 100%;
        font-size: clamp(38px, 10vw, 50px);
    }

    .wn-cpp-features-intro {
        padding-left: 0;
    }

    .wn-cpp-features-workspace {
        margin-top: 60px;
    }

    .wn-cpp-features-workspace-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .wn-cpp-features-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wn-cpp-features-main {
        padding: 20px;
    }

    .wn-cpp-features-welcome {
        flex-direction: column;
    }

    .wn-cpp-features-summary {
        grid-template-columns: 1fr;
    }

    .wn-cpp-features-list {
        margin-top: 65px;
    }

    .wn-cpp-features-list-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .wn-cpp-features-list-head > p {
        max-width: 100%;
        text-align: left;
    }

    .wn-cpp-features-focus {
        margin-top: 65px;
    }

    .wn-cpp-features-focus-scale {
        grid-template-columns: 1fr;
    }

    .wn-cpp-features-focus-scale > i {
        width: 1px;
        height: 20px;
        margin-inline: auto;
    }

    .wn-cpp-features-focus-scale > i::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

    .wn-cpp-features-outcome {
        margin-top: 55px;
    }

    .wn-cpp-features-outcome > div {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


@media (max-width: 560px) {

    .wn-cpp-features-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-cpp-features-grid {
        grid-template-columns: 1fr;
    }

    .wn-cpp-features-grid > article,
    .wn-cpp-features-grid > article:nth-child(1),
    .wn-cpp-features-grid > article:nth-child(2),
    .wn-cpp-features-grid > article:nth-child(3),
    .wn-cpp-features-grid > article:nth-child(4),
    .wn-cpp-features-grid > article:nth-child(5),
    .wn-cpp-features-grid > article:nth-child(6) {
        min-height: 0;
        padding: 27px 0;
        border-left: 0;
    }

    .wn-cpp-features-grid > article + article {
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .wn-cpp-features-request {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .wn-cpp-features-request > em {
        grid-column: 2;
        justify-self: start;
    }

}


@media (max-width: 380px) {

    .wn-cpp-features-title h2 {
        font-size: 36px;
    }

}
/* =========================================================
   08 — HOW WEBNIME BUILDS YOUR PORTAL
   ========================================================= */

.wn-cpp-build {
    position: relative;
    overflow: hidden;
    padding: 125px 0 115px;
    background: #f4f7fa;
    color: #101d2d;
}

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


/* =========================================================
   BUILD — INTRO
   ========================================================= */

.wn-cpp-build-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 100px;
    align-items: start;
}

.wn-cpp-build-title {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.wn-cpp-build .wn-cpp-section-number {
    padding-top: 8px;
    color: #2374ff;
}

.wn-cpp-build .wn-cpp-section-kicker {
    color: #2374ff;
}

.wn-cpp-build-title h2 {
    width: 100%;
    max-width: 820px;
    margin: 0;
    color: #101d2d;
    font-size: clamp(44px, 4.25vw, 62px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 650;
}

.wn-cpp-build-title h2 > span {
    display: block;
    margin-top: 8px;
    color: #667383;
    font-weight: 500;
}

.wn-cpp-build-intro {
    padding-top: 42px;
}

.wn-cpp-build-intro p {
    width: 100%;
    max-width: 500px;
    margin: 0;
    color: #596675;
    font-size: 16px;
    line-height: 1.75;
}

.wn-cpp-build-intro p + p {
    margin-top: 20px;
}


/* =========================================================
   BUILD — MODEL
   ========================================================= */

.wn-cpp-build-model {
    margin-top: 85px;
    border-top: 1px solid #cdd8e3;
    border-bottom: 1px solid #cdd8e3;
}

.wn-cpp-build-model-head {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 18px 0;
    border-bottom: 1px solid #dbe3eb;
}

.wn-cpp-build-model-head > div > span,
.wn-cpp-build-model-head > div > strong {
    display: block;
}

.wn-cpp-build-model-head > div > span {
    margin-bottom: 7px;
    color: #2374ff;
    font-size: 8px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-cpp-build-model-head > div > strong {
    color: #526171;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
}

.wn-cpp-build-model-head > span {
    color: #95a1ad;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}


/* =========================================================
   BUILD — FIVE STEPS
   ========================================================= */

.wn-cpp-build-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        34px
        minmax(0, 1fr)
        34px
        minmax(0, 1fr)
        34px
        minmax(0, 1fr)
        34px
        minmax(0, 1fr);
    align-items: stretch;
}

.wn-cpp-build-step {
    display: flex;
    min-width: 0;
    min-height: 390px;
    flex-direction: column;
    padding: 31px 19px 28px;
}

.wn-cpp-build-step:first-child {
    padding-left: 0;
}

.wn-cpp-build-step:last-child {
    padding-right: 0;
}

.wn-cpp-build-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid #dfe6ed;
}

.wn-cpp-build-step-top > span {
    color: #2374ff;
    font-size: 8px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-build-step-top > small {
    color: #8996a3;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}

.wn-cpp-build-step h3 {
    min-height: 96px;
    margin: 27px 0 0;
    color: #17273a;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 650;
}

.wn-cpp-build-step > p {
    margin: 17px 0 0;
    color: #667483;
    font-size: 11px;
    line-height: 1.7;
}

.wn-cpp-build-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
    padding-top: 25px;
}

.wn-cpp-build-tags > span {
    padding: 7px 8px;
    border: 1px solid #d5e0ea;
    background: rgba(255, 255, 255, .6);
    color: #6f7d8b;
    font-size: 5px;
    line-height: 1;
    font-weight: 650;
}

.wn-cpp-build-arrow {
    position: relative;
    display: block;
    min-height: 100%;
}

.wn-cpp-build-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
    right: 5px;
    height: 1px;
    background: #cbd8e4;
}

.wn-cpp-build-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 5px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #2374ff;
    border-right: 1px solid #2374ff;
    transform: translateY(-50%) rotate(45deg);
}


/* =========================================================
   BUILD — BLUEPRINT
   ========================================================= */

.wn-cpp-build-blueprint {
    display: grid;
    grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr);
    gap: 90px;
    align-items: start;
    margin-top: 100px;
    padding: 70px 0;
    border-top: 1px solid #d5dee7;
    border-bottom: 1px solid #d5dee7;
}

.wn-cpp-build-blueprint-copy {
    max-width: 440px;
}

.wn-cpp-build-blueprint-copy > span {
    display: block;
    margin-bottom: 19px;
    color: #2374ff;
    font-size: 8px;
    line-height: 1.3;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-cpp-build-blueprint-copy h3 {
    margin: 0;
    color: #101d2d;
    font-size: clamp(31px, 3vw, 43px);
    line-height: 1.08;
    letter-spacing: -.04em;
    font-weight: 650;
}

.wn-cpp-build-blueprint-copy p {
    margin: 24px 0 0;
    color: #596675;
    font-size: 15px;
    line-height: 1.75;
}

.wn-cpp-build-blueprint-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid #d7e1ea;
    border-left: 1px solid #d7e1ea;
}

.wn-cpp-build-blueprint-grid > article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
    min-height: 190px;
    padding: 25px;
    border-right: 1px solid #d7e1ea;
    border-bottom: 1px solid #d7e1ea;
    background: #ffffff;
}

.wn-cpp-build-blueprint-grid > article > span {
    padding-top: 3px;
    color: #2374ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-build-blueprint-grid small,
.wn-cpp-build-blueprint-grid strong {
    display: block;
}

.wn-cpp-build-blueprint-grid small {
    margin-bottom: 13px;
    color: #2374ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-cpp-build-blueprint-grid strong {
    color: #26384a;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -.015em;
    font-weight: 650;
}

.wn-cpp-build-blueprint-grid p {
    margin: 14px 0 0;
    color: #758290;
    font-size: 10px;
    line-height: 1.65;
}


/* =========================================================
   BUILD — SYSTEM FLOW
   ========================================================= */

.wn-cpp-build-system {
    display: grid;
    grid-template-columns: minmax(230px, .55fr) minmax(0, 1.45fr);
    gap: 70px;
    align-items: center;
    margin-top: 90px;
    padding: 42px 0;
    border-top: 1px solid #d5dee7;
    border-bottom: 1px solid #d5dee7;
}

.wn-cpp-build-system-label > span,
.wn-cpp-build-system-label > strong {
    display: block;
}

.wn-cpp-build-system-label > span {
    margin-bottom: 11px;
    color: #2374ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-cpp-build-system-label > strong {
    max-width: 300px;
    color: #17273a;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 650;
}

.wn-cpp-build-system-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        34px
        minmax(0, 1fr)
        34px
        minmax(0, 1fr)
        34px
        minmax(0, 1.15fr);
    gap: 7px;
    align-items: center;
}

.wn-cpp-build-system-flow > div {
    min-width: 0;
    min-height: 96px;
    padding: 17px;
    border: 1px solid #d4dfe9;
    background: #ffffff;
}

.wn-cpp-build-system-flow > div.is-result {
    border-color: rgba(35, 116, 255, .38);
    background: #edf5ff;
}

.wn-cpp-build-system-flow span,
.wn-cpp-build-system-flow strong {
    display: block;
}

.wn-cpp-build-system-flow span {
    margin-bottom: 20px;
    color: #8b98a5;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .09em;
}

.wn-cpp-build-system-flow .is-result span {
    color: #2374ff;
}

.wn-cpp-build-system-flow strong {
    color: #425365;
    font-size: 8px;
    line-height: 1.35;
    font-weight: 650;
}

.wn-cpp-build-system-flow .is-result strong {
    color: #193c65;
}

.wn-cpp-build-system-flow > i {
    position: relative;
    display: block;
    height: 1px;
    background: #c5d4e2;
}

.wn-cpp-build-system-flow > i::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 5px;
    height: 5px;
    border-top: 1px solid #2374ff;
    border-right: 1px solid #2374ff;
    transform: translateY(-50%) rotate(45deg);
}


/* =========================================================
   BUILD — OUTCOME
   ========================================================= */

.wn-cpp-build-outcome {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 55px;
    margin-top: 70px;
    padding-top: 30px;
    border-top: 3px solid #2374ff;
}

.wn-cpp-build-outcome > span {
    color: #2374ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-cpp-build-outcome > div {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    gap: 80px;
}

.wn-cpp-build-outcome h3 {
    max-width: 540px;
    margin: 0;
    color: #101d2d;
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.15;
    letter-spacing: -.035em;
    font-weight: 650;
}

.wn-cpp-build-outcome h3 > span {
    display: block;
    color: #667383;
    font-weight: 500;
}

.wn-cpp-build-outcome p {
    max-width: 560px;
    margin: 0;
    color: #596675;
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   08 — RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .wn-cpp-build .wn-wrap {
        width: calc(100% - 70px);
    }

    .wn-cpp-build-head {
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
        gap: 60px;
    }

    .wn-cpp-build-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-cpp-build-arrow {
        display: none;
    }

    .wn-cpp-build-step,
    .wn-cpp-build-step:first-child,
    .wn-cpp-build-step:last-child {
        min-height: 350px;
        padding: 30px;
    }

    .wn-cpp-build-step:nth-of-type(odd) {
        padding-left: 0;
    }

    .wn-cpp-build-step:nth-of-type(even) {
        padding-right: 0;
        border-left: 1px solid #dfe6ed;
    }

    .wn-cpp-build-step:nth-of-type(n+3) {
        border-top: 1px solid #dfe6ed;
    }

    .wn-cpp-build-step:last-of-type {
        grid-column: 1 / -1;
        max-width: 50%;
        min-height: 320px;
        padding-right: 30px;
    }

    .wn-cpp-build-blueprint {
        gap: 60px;
    }

    .wn-cpp-build-system {
        gap: 50px;
    }

    .wn-cpp-build-outcome > div {
        gap: 50px;
    }

}


@media (max-width: 900px) {

    .wn-cpp-build-head {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-cpp-build-intro {
        max-width: 720px;
        padding-top: 0;
        padding-left: 76px;
    }

    .wn-cpp-build-intro p {
        max-width: 650px;
    }

    .wn-cpp-build-blueprint {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-cpp-build-blueprint-copy {
        max-width: 700px;
    }

    .wn-cpp-build-system {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .wn-cpp-build-system-label > strong {
        max-width: 600px;
    }

    .wn-cpp-build-outcome {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


@media (max-width: 760px) {

    .wn-cpp-build {
        padding: 90px 0 85px;
    }

    .wn-cpp-build .wn-wrap {
        width: calc(100% - 40px);
    }

    .wn-cpp-build-title {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .wn-cpp-build .wn-cpp-section-number {
        padding-top: 0;
    }

    .wn-cpp-build-title h2 {
        max-width: 100%;
        font-size: clamp(38px, 10vw, 50px);
    }

    .wn-cpp-build-intro {
        padding-left: 0;
    }

    .wn-cpp-build-model {
        margin-top: 60px;
    }

    .wn-cpp-build-model-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .wn-cpp-build-flow {
        grid-template-columns: 1fr;
    }

    .wn-cpp-build-step,
    .wn-cpp-build-step:first-child,
    .wn-cpp-build-step:last-child,
    .wn-cpp-build-step:nth-of-type(odd),
    .wn-cpp-build-step:nth-of-type(even) {
        grid-column: auto;
        max-width: none;
        min-height: 0;
        padding: 28px 0;
        border-left: 0;
        border-top: 1px solid #dfe6ed;
    }

    .wn-cpp-build-step:first-of-type {
        border-top: 0;
    }

    .wn-cpp-build-step h3 {
        min-height: 0;
    }

    .wn-cpp-build-tags {
        margin-top: 25px;
        padding-top: 0;
    }

    .wn-cpp-build-blueprint {
        margin-top: 70px;
        padding: 55px 0;
    }

    .wn-cpp-build-blueprint-grid {
        grid-template-columns: 1fr;
    }

    .wn-cpp-build-blueprint-grid > article {
        min-height: 0;
    }

    .wn-cpp-build-system {
        margin-top: 65px;
    }

    .wn-cpp-build-system-flow {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .wn-cpp-build-system-flow > i {
        width: 1px;
        height: 20px;
        margin-inline: auto;
    }

    .wn-cpp-build-system-flow > i::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

    .wn-cpp-build-outcome {
        margin-top: 55px;
    }

    .wn-cpp-build-outcome > div {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


@media (max-width: 520px) {

    .wn-cpp-build-blueprint-grid > article {
        grid-template-columns: 30px minmax(0, 1fr);
        padding: 22px 18px;
    }

}


@media (max-width: 380px) {

    .wn-cpp-build-title h2 {
        font-size: 36px;
    }

}
/* =========================================================
   09 — CUSTOMER & PARTNER PORTAL FAQ
   ========================================================= */

.wn-cpp-faq {
    position: relative;
    overflow: hidden;
    padding: 125px 0 115px;
    background: #07111f;
    color: #ffffff;
}

.wn-cpp-faq::before {
    content: "";
    position: absolute;
    right: -480px;
    top: 280px;
    width: 900px;
    height: 900px;
    border: 1px solid rgba(35, 116, 255, .04);
    border-radius: 50%;
    box-shadow:
        0 0 0 130px rgba(35, 116, 255, .01),
        0 0 0 260px rgba(35, 116, 255, .005);
    pointer-events: none;
}

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


/* =========================================================
   FAQ — INTRO
   ========================================================= */

.wn-cpp-faq-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 100px;
    align-items: start;
}

.wn-cpp-faq-title {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.wn-cpp-faq .wn-cpp-section-number {
    padding-top: 8px;
    color: #70b8ff;
}

.wn-cpp-faq .wn-cpp-section-kicker {
    color: #70b8ff;
}

.wn-cpp-faq-title h2 {
    width: 100%;
    max-width: 820px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 4.25vw, 62px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 650;
}

.wn-cpp-faq-title h2 > span {
    display: block;
    margin-top: 8px;
    color: #70b8ff;
    font-weight: 500;
}

.wn-cpp-faq-intro {
    padding-top: 42px;
}

.wn-cpp-faq-intro p {
    width: 100%;
    max-width: 500px;
    margin: 0;
    color: rgba(255, 255, 255, .58);
    font-size: 16px;
    line-height: 1.75;
}

.wn-cpp-faq-intro p + p {
    margin-top: 20px;
}


/* =========================================================
   FAQ — BODY
   ========================================================= */

.wn-cpp-faq-body {
    display: grid;
    grid-template-columns: minmax(280px, .65fr) minmax(0, 1.35fr);
    gap: 90px;
    align-items: start;
    margin-top: 90px;
    padding-top: 50px;
    border-top: 1px solid rgba(112, 184, 255, .16);
}


/* =========================================================
   FAQ — ASIDE
   ========================================================= */

.wn-cpp-faq-aside {
    position: sticky;
    top: 120px;
    max-width: 390px;
}

.wn-cpp-faq-aside > span {
    display: block;
    margin-bottom: 19px;
    color: #70b8ff;
    font-size: 8px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-cpp-faq-aside h3 {
    max-width: 380px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(29px, 2.8vw, 40px);
    line-height: 1.08;
    letter-spacing: -.04em;
    font-weight: 650;
}

.wn-cpp-faq-aside > p {
    max-width: 365px;
    margin: 25px 0 0;
    color: rgba(255, 255, 255, .48);
    font-size: 14px;
    line-height: 1.75;
}

.wn-cpp-faq-aside-line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    margin-top: 42px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.wn-cpp-faq-aside-line > span {
    color: rgba(255, 255, 255, .34);
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
    white-space: nowrap;
}

.wn-cpp-faq-aside-line > i {
    position: relative;
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(112, 184, 255, .08),
        #2374ff,
        rgba(112, 184, 255, .08)
    );
}

.wn-cpp-faq-aside-line > i::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 5px;
    height: 5px;
    border-top: 1px solid #70b8ff;
    border-right: 1px solid #70b8ff;
    transform: translateY(-50%) rotate(45deg);
}


/* =========================================================
   FAQ — QUESTIONS
   ========================================================= */

.wn-cpp-faq-list {
    min-width: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.wn-cpp-faq-item {
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: transparent;
}

.wn-cpp-faq-item > summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    gap: 20px;
    align-items: center;
    min-height: 104px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
}

.wn-cpp-faq-item > summary::-webkit-details-marker {
    display: none;
}

.wn-cpp-faq-item > summary::marker {
    display: none;
    content: "";
}

.wn-cpp-faq-item > summary > span {
    color: #70b8ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-faq-item > summary > strong {
    max-width: 700px;
    color: rgba(255, 255, 255, .84);
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: -.02em;
    font-weight: 600;
    transition: color .2s ease;
}

.wn-cpp-faq-item > summary:hover > strong,
.wn-cpp-faq-item[open] > summary > strong {
    color: #ffffff;
}

.wn-cpp-faq-item > summary > i {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    justify-self: end;
    border: 1px solid rgba(112, 184, 255, .18);
    background: rgba(35, 116, 255, .025);
}

.wn-cpp-faq-item > summary > i::before,
.wn-cpp-faq-item > summary > i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 1px;
    background: #70b8ff;
    transform: translate(-50%, -50%);
    transition: transform .2s ease;
}

.wn-cpp-faq-item > summary > i::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.wn-cpp-faq-item[open] > summary > i {
    border-color: rgba(35, 116, 255, .4);
    background: rgba(35, 116, 255, .08);
}

.wn-cpp-faq-item[open] > summary > i::after {
    transform: translate(-50%, -50%) rotate(0);
}

.wn-cpp-faq-answer {
    padding: 0 64px 34px;
}

.wn-cpp-faq-answer p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   FAQ — OPEN STATE DETAIL
   ========================================================= */

.wn-cpp-faq-item[open] {
    position: relative;
}

.wn-cpp-faq-item[open]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: #2374ff;
}

.wn-cpp-faq-item[open] > summary,
.wn-cpp-faq-item[open] > .wn-cpp-faq-answer {
    padding-left: 22px;
}


/* =========================================================
   FAQ — PRINCIPLE / BOTTOM
   ========================================================= */

.wn-cpp-faq-bottom {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 55px;
    margin-top: 90px;
    padding-top: 30px;
    border-top: 3px solid #2374ff;
}

.wn-cpp-faq-bottom > span {
    color: #70b8ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-cpp-faq-bottom > div {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    gap: 80px;
}

.wn-cpp-faq-bottom h3 {
    max-width: 560px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.15;
    letter-spacing: -.035em;
    font-weight: 650;
}

.wn-cpp-faq-bottom h3 > span {
    display: block;
    color: #70b8ff;
    font-weight: 500;
}

.wn-cpp-faq-bottom p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .56);
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   09 — RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .wn-cpp-faq .wn-wrap {
        width: calc(100% - 70px);
    }

    .wn-cpp-faq-head {
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
        gap: 60px;
    }

    .wn-cpp-faq-body {
        grid-template-columns: minmax(250px, .55fr) minmax(0, 1.45fr);
        gap: 60px;
    }

    .wn-cpp-faq-bottom > div {
        gap: 50px;
    }

}


@media (max-width: 900px) {

    .wn-cpp-faq-head {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-cpp-faq-intro {
        max-width: 720px;
        padding-top: 0;
        padding-left: 76px;
    }

    .wn-cpp-faq-intro p {
        max-width: 650px;
    }

    .wn-cpp-faq-body {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .wn-cpp-faq-aside {
        position: static;
        max-width: 700px;
    }

    .wn-cpp-faq-aside h3,
    .wn-cpp-faq-aside > p {
        max-width: 650px;
    }

    .wn-cpp-faq-bottom {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


@media (max-width: 760px) {

    .wn-cpp-faq {
        padding: 90px 0 85px;
    }

    .wn-cpp-faq .wn-wrap {
        width: calc(100% - 40px);
    }

    .wn-cpp-faq-title {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .wn-cpp-faq .wn-cpp-section-number {
        padding-top: 0;
    }

    .wn-cpp-faq-title h2 {
        max-width: 100%;
        font-size: clamp(38px, 10vw, 50px);
    }

    .wn-cpp-faq-intro {
        padding-left: 0;
    }

    .wn-cpp-faq-body {
        margin-top: 60px;
        padding-top: 40px;
    }

    .wn-cpp-faq-aside-line {
        margin-top: 32px;
    }

    .wn-cpp-faq-item > summary {
        grid-template-columns: 30px minmax(0, 1fr) 30px;
        gap: 12px;
        min-height: 92px;
        padding: 18px 0;
    }

    .wn-cpp-faq-item > summary > strong {
        font-size: 17px;
    }

    .wn-cpp-faq-item > summary > i {
        width: 28px;
        height: 28px;
    }

    .wn-cpp-faq-answer {
        padding: 0 42px 30px;
    }

    .wn-cpp-faq-item[open] > summary {
        padding-left: 14px;
    }

    .wn-cpp-faq-item[open] > .wn-cpp-faq-answer {
        padding-left: 44px;
    }

    .wn-cpp-faq-bottom {
        margin-top: 65px;
    }

    .wn-cpp-faq-bottom > div {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


@media (max-width: 520px) {

    .wn-cpp-faq-aside-line {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .wn-cpp-faq-aside-line > i {
        width: 100%;
    }

    .wn-cpp-faq-item > summary {
        grid-template-columns: 24px minmax(0, 1fr) 28px;
        gap: 9px;
    }

    .wn-cpp-faq-answer {
        padding-right: 15px;
        padding-left: 33px;
    }

    .wn-cpp-faq-item[open] > .wn-cpp-faq-answer {
        padding-left: 33px;
    }

}


@media (max-width: 380px) {

    .wn-cpp-faq-title h2 {
        font-size: 36px;
    }

    .wn-cpp-faq-item > summary > strong {
        font-size: 16px;
    }

}
/* =========================================================
   FINAL CTA — CUSTOMER & PARTNER PORTALS — LIGHT
   ========================================================= */

.wn-cpp-final {
    position: relative;
    overflow: hidden;
    padding: 115px 0 70px;
    background: #f4f7fa;
    color: #101d2d;
    border-top: 1px solid #d8e2eb;
}

.wn-cpp-final::before {
    content: "";
    position: absolute;
    top: -470px;
    right: -250px;
    width: 950px;
    height: 950px;
    border: 1px solid rgba(35, 116, 255, .055);
    border-radius: 50%;
    box-shadow:
        0 0 0 130px rgba(35, 116, 255, .012),
        0 0 0 260px rgba(35, 116, 255, .006);
    pointer-events: none;
}

.wn-cpp-final::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(35, 116, 255, 0),
        rgba(35, 116, 255, .035),
        rgba(35, 116, 255, 0)
    );
    pointer-events: none;
}

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


/* =========================================================
   FINAL — MAIN
   ========================================================= */

.wn-cpp-final-main {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
    gap: 110px;
    align-items: end;
}

.wn-cpp-final-kicker {
    display: block;
    margin-bottom: 23px;
    color: #2374ff;
    font-size: 8px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-cpp-final-title h2 {
    max-width: 790px;
    margin: 0;
    color: #101d2d;
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1.01;
    letter-spacing: -.05em;
    font-weight: 650;
}

.wn-cpp-final-title h2 > span {
    display: block;
    margin-top: 8px;
    color: #2374ff;
    font-weight: 500;
}


/* =========================================================
   FINAL — ACTION
   ========================================================= */

.wn-cpp-final-action {
    padding-bottom: 6px;
}

.wn-cpp-final-action > p {
    max-width: 470px;
    margin: 0;
    color: #596675;
    font-size: 16px;
    line-height: 1.75;
}

.wn-cpp-final-button {
    display: inline-flex;
    min-width: 220px;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 32px;
    padding: 0 20px;
    border: 1px solid #2374ff;
    background: #2374ff;
    color: #ffffff;
    text-decoration: none;
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.wn-cpp-final-button > span:first-child {
    font-size: 12px;
    line-height: 1;
    font-weight: 650;
}

.wn-cpp-final-button > span:last-child {
    font-size: 19px;
    line-height: 1;
    font-weight: 400;
}

.wn-cpp-final-button:hover {
    border-color: #438bff;
    background: #438bff;
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================================
   FINAL — DIVIDER
   ========================================================= */

.wn-cpp-final-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    margin-top: 85px;
}

.wn-cpp-final-divider > span {
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(35, 116, 255, .03),
        rgba(35, 116, 255, .25)
    );
}

.wn-cpp-final-divider > span:last-child {
    background: linear-gradient(
        90deg,
        rgba(35, 116, 255, .25),
        rgba(35, 116, 255, .03)
    );
}

.wn-cpp-final-divider > i {
    display: block;
    width: 7px;
    height: 7px;
    border: 1px solid #2374ff;
    background: #f4f7fa;
    transform: rotate(45deg);
}


/* =========================================================
   FINAL — FOUNDATION
   ========================================================= */

.wn-cpp-final-foundation {
    display: grid;
    grid-template-columns: minmax(250px, .55fr) minmax(0, 1.45fr);
    gap: 80px;
    align-items: start;
    margin-top: 55px;
}

.wn-cpp-final-foundation-label > span {
    display: block;
    color: #2374ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-cpp-final-foundation-label > p {
    max-width: 300px;
    margin: 17px 0 0;
    color: #6c7987;
    font-size: 11px;
    line-height: 1.65;
}

.wn-cpp-final-points {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wn-cpp-final-points > div {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    padding: 4px 20px;
}

.wn-cpp-final-points > div:first-child {
    padding-left: 0;
}

.wn-cpp-final-points > div:last-child {
    padding-right: 0;
}

.wn-cpp-final-points > div + div {
    border-left: 1px solid #d7e1ea;
}

.wn-cpp-final-points > div > span {
    padding-top: 3px;
    color: #2374ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
}

.wn-cpp-final-points strong,
.wn-cpp-final-points small {
    display: block;
}

.wn-cpp-final-points strong {
    color: #2e4053;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 650;
}

.wn-cpp-final-points small {
    margin-top: 8px;
    color: #8a97a4;
    font-size: 7px;
    line-height: 1.5;
}


/* =========================================================
   FINAL — CLOSE
   ========================================================= */

.wn-cpp-final-close {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 50px;
    align-items: center;
    margin-top: 70px;
    padding-top: 25px;
    border-top: 1px solid #d7e1ea;
}

.wn-cpp-final-close > span {
    color: #9aa6b2;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .14em;
}

.wn-cpp-final-close > div {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    gap: 15px;
    align-items: center;
}

.wn-cpp-final-close > div > span {
    color: #8d9aa7;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
    white-space: nowrap;
}

.wn-cpp-final-close > div > strong {
    color: #2374ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .09em;
    white-space: nowrap;
}

.wn-cpp-final-close > div > i {
    position: relative;
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(35, 116, 255, .08),
        #2374ff,
        rgba(35, 116, 255, .08)
    );
}

.wn-cpp-final-close > div > i::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 4px;
    height: 4px;
    border-top: 1px solid #2374ff;
    border-right: 1px solid #2374ff;
    transform: translateY(-50%) rotate(45deg);
}


/* =========================================================
   FINAL CTA — RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .wn-cpp-final .wn-wrap {
        width: calc(100% - 70px);
    }

    .wn-cpp-final-main {
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
        gap: 70px;
    }

    .wn-cpp-final-foundation {
        gap: 55px;
    }

    .wn-cpp-final-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 30px;
    }

    .wn-cpp-final-points > div:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .wn-cpp-final-points > div:nth-child(even) {
        padding-right: 0;
        border-left: 1px solid #d7e1ea;
    }

}


@media (max-width: 900px) {

    .wn-cpp-final-main {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-cpp-final-action > p {
        max-width: 650px;
    }

    .wn-cpp-final-foundation {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .wn-cpp-final-foundation-label > p {
        max-width: 600px;
    }

    .wn-cpp-final-close {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


@media (max-width: 760px) {

    .wn-cpp-final {
        padding: 85px 0 55px;
    }

    .wn-cpp-final .wn-wrap {
        width: calc(100% - 40px);
    }

    .wn-cpp-final-title h2 {
        max-width: 100%;
        font-size: clamp(42px, 11vw, 56px);
    }

    .wn-cpp-final-button {
        width: 100%;
        max-width: 330px;
    }

    .wn-cpp-final-divider {
        margin-top: 60px;
    }

    .wn-cpp-final-foundation {
        margin-top: 45px;
    }

    .wn-cpp-final-points {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .wn-cpp-final-points > div,
    .wn-cpp-final-points > div:first-child,
    .wn-cpp-final-points > div:last-child,
    .wn-cpp-final-points > div:nth-child(odd),
    .wn-cpp-final-points > div:nth-child(even) {
        padding: 20px 0;
        border-left: 0;
    }

    .wn-cpp-final-points > div + div {
        border-top: 1px solid #d7e1ea;
    }

    .wn-cpp-final-close {
        margin-top: 50px;
    }

    .wn-cpp-final-close > div {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .wn-cpp-final-close > div > i {
        width: 1px;
        height: 17px;
        margin-left: 3px;
    }

    .wn-cpp-final-close > div > i::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

}


@media (max-width: 380px) {

    .wn-cpp-final-title h2 {
        font-size: 39px;
    }

}