:root {
    --home-sprite: url("/sites/zweb/images/dap/home/zwc-home-sprite.svg") no-repeat;
}
.zw-template-inner *{
    text-wrap: pretty;
}
.zw-template-inner .content-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
a.act-btn.cta-btn {
    border-radius: 5px;
    padding: 15px 30px;
}
.content-wrap.zwc-banner-top {
    padding-bottom: 130px;
}
.zwc-icon {
    display: inline-block;
    flex-shrink: 0;
    background: var(--home-sprite);
    background-size: 139px 24px;
}

.zwc-icon-1 {
    width: 18px;
    height: 18px;
    background-position: 0 0;
}

.zwc-icon-2 {
    width: 16px;
    height: 16px;
    background-position: -23px 0;
}

.zwc-icon-3 {
    width: 16px;
    height: 16px;
    background-position: -44px 0;
}

.zwc-icon-4 {
    width: 16px;
    height: 16px;
    background-position: -65px 0;
}

.zwc-icon-toggle {
    width: 24px;
    height: 24px;
    background-position: -115px 0;
}

/* ============================ banner ============================ */

.zwc-banner-wrap {
    background-color: #d6edfd;
    background: linear-gradient(180deg, #39AFFF 0%, #FFF 48%);
    padding: 170px 0 70px;
    overflow: hidden;
    margin-top: -70px;
}
/* the embed cannot lay out below its own minimum width, so it renders at
   full size and is scaled down to fit, keeping the desktop composition */
.zwc-banner-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.zwc-banner-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1600px;
    height: 900px;
    border: 0;
    transform: scale(var(--zwc-embed-scale, 1));
    transform-origin: 0 0;
}
.zwc-banner-main .zwc-banner-embed {
    border-radius: 20px;
    border: 10px solid #fff;
    border-radius: 24px;
    background: #FFF;
    box-shadow: 0 20px 40px 0 rgba(118, 146, 165, 0.17);
}
.zwc-banner-wrap .content-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.zwc-banner-info {
    width: 40%;
    flex: 0 0 auto;
}

.zwc-banner-info h1 {
    color: #001f34;
    font-family: var(--zf-primary-medium);
    font-size: clamp(36px, 3.7vw, 64px);
    line-height: 1.1;
    letter-spacing: clamp(-3.2px, -0.185vw, -1.4px);
    margin: 0 0 16px;
}

.zwc-banner-info p {
    color: #000000;
    font-family: var(--primaryfont-regular);
    font-size: clamp(16px, 1.16vw, 20px);
    line-height: 1.4;
    margin: 0 0 clamp(24px, 1.85vw, 32px);
}

.zwc-banner-visual {
    width: 53%;
    position: relative;
}
.zwc-banner-visual img {
    display: block;
}

.zwc-banner-user {
    width: 55%;
    z-index: 1;
    position: relative;
}
.zwc-banner-nav {
    position: absolute;
    left: 43%;
    bottom: 0;
    width: 40%;
    border-radius: 8px 8px 0 0;
}
.zwc-banner-nav img {
    width: 40%;
}
img.zwc-banner-tip {
    position: absolute;
    right: -120px;
    top: 65px;
    width: 50%;
}
/* =============== ways zoho dap helps your users =============== */

.zwc-ways-wrap {
    background-color: #ffffff;
    position: relative;
    height: 400vh;
}

.zwc-ways-sticky {
    position: sticky;
    /* on tall screens the block stays centred instead of stretching edge to edge */
    top: max(0.1px, calc((100vh - 900px) / 2));
    height: min(100vh, 900px);
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.zwc-ways-sticky .content-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(24px, 2.31vw, 40px);
    padding-bottom: clamp(24px, 2.31vw, 40px);
}

.zwc-ways-wrap h2 {
    color: #302923;
    font-family: var(--zf-primary-medium);
    font-size: clamp(36px, 2.78vw, 48px);
    line-height: 1.17;
    letter-spacing: clamp(-1.44px, -0.083vw, -0.6px);
    text-align: center;
    margin: 0 0 clamp(20px, 1.85vw, 32px);
    max-width: 510px;
}

.zwc-ways-tab ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zwc-ways-tab li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 48px;
    padding: 0 17px;
    border: 1px solid #e3e8f1;
    border-radius: 36px;
    color: #000000;
    font-family: var(--primaryfont-regular);
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.32px;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.zwc-ways-tab li.zwc-active {
    background-color: #003297;
    border-color: #003297;
    color: #ffffff;
}

.zwc-ways-tab li.zwc-active .zwc-icon {
    filter: brightness(0) invert(1);
}

.zwc-ways-panel {
    position: relative;
    width: 100%;
    max-width: 946px;
    height: clamp(360px, 27.37vw, 473px);
    margin: clamp(24px, 2.31vw, 40px) 0;
    border-radius: 24px;
    overflow: hidden;
    /* border-radius: 24px; */
    background: radial-gradient(76.33% 60.73% at 35.1% 41.13%, #FFF 0%, #C3E4FF 100%);
}

.zwc-ways-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 4.22vw, 73px);
    padding: clamp(24px, 5.79vw, 100px) clamp(24px, 6.25vw, 108px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility .45s ease;
}

.zwc-ways-item.zwc-active {
    opacity: 1;
    visibility: visible;
}
.zwc-ways-media {
    width: 50%;
}
.zwc-ways-media img {
    display: block;
    width: auto;
    height: auto;
    border: 1px solid #ecf0f3;
    border-radius: 8px;
    width: 90%;
    margin: 0 auto;
}
.zwc-ways-info {
    width: 50%;
}

/* the tab pill repeated inside each item, mobile only */
.zwc-ways-label {
    display: none;
}
.zwc-ways-info h3 {
    color: #302923;
    font-family: var(--zf-primary-medium);
    font-size: clamp(24px, 2.31vw, 40px);
    line-height: 1.2;
    letter-spacing: clamp(-1.2px, -0.069vw, -0.5px);
    margin: 0 0 12px;
}
.zwc-ways-info p {
    color: #3e322c;
    font-family: var(--primaryfont-regular);
    font-size: clamp(15px, 1.04vw, 18px);
    line-height: 1.45;
    margin: 0;
}
/* ============ make your processes easier to learn ============ */

.zwc-processes-wrap {
    background-color: #ffffff;
    padding: clamp(50px, 4.63vw, 80px) 0;
}
.zwc-processes-head {
    max-width: 623px;
    margin: 0 auto clamp(32px, 3.47vw, 60px);
    text-align: center;
}
.zwc-processes-head h2 {
    color: #302923;
    font-family: var(--zf-primary-medium);
    font-size: clamp(36px, 2.78vw, 48px);
    line-height: 1.17;
    letter-spacing: clamp(-1.44px, -0.083vw, -0.6px);
    margin: 0 auto 8px;
    max-width: 500px;
}
.zwc-processes-head p {
    color: #3e322c;
    font-family: var(--primaryfont-regular);
    font-size: clamp(16px, 1.16vw, 20px);
    line-height: 1.4;
    margin: 0;
}
.zwc-processes-hold {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3.24vw, 56px);
}
.zwc-processes-list {
    flex: 0 0 auto;
    width: clamp(230px, 18.58vw, 321px);
}
.zwc-processes-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.zwc-processes-list li {
    position: relative;
    margin-bottom: 8px;
    border-radius: 8px;
    background: linear-gradient(90deg, #C2E4FF 0%, #FFF 100%);
}
.zwc-processes-list li:last-child {
    margin-bottom: 0;
}
.zwc-processes-list button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 24px;
    padding-left: clamp(20px, 1.85vw, 32px);
    border: 0;
    background: none;
    color: #302923;
    font-family: var(--zf-primary-medium);
    font-size: clamp(17px, 1.16vw, 20px);
    line-height: 1.2;
    letter-spacing: -0.6px;
    text-align: left;
    cursor: pointer;
    transition: padding .35s ease;
}
.zwc-processes-list li.zwc-active button {
    padding-top: 46px;
    padding-bottom: 0;
}
/* the panel image repeated inside each accordion item, mobile only */
.zwc-processes-thumb {
    display: none;
}
.zwc-processes-desc {
    position: relative;
    z-index: 1;
    max-height: 0;
    overflow: hidden;
    padding: 0 24px 0 clamp(20px, 1.85vw, 32px);
    transition: max-height .4s ease, padding .35s ease;
}
.zwc-processes-list li.zwc-active .zwc-processes-desc {
    max-height: 300px;
    padding-top: 16px;
    padding-bottom: 42px;
}
.zwc-processes-desc p {
    color: #3e322c;
    font-family: var(--primaryfont-regular);
    font-size: clamp(14px, 0.93vw, 16px);
    line-height: 1.25;
    margin: 0;
    max-width: 247px;
}
.zwc-processes-list li.zwc-active .zwc-icon-toggle {
    background-position: -86px 0;
}
/* active outline + progress trace */

.zwc-processes-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}
.zwc-processes-list li.zwc-active .zwc-processes-bar {
    opacity: 1;
}
.zwc-processes-bar rect {
    x: 1px;
    y: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    fill: none;
    vector-effect: non-scaling-stroke;
}
.zwc-processes-bar rect:first-child {
    stroke: #b9d4f6;
    stroke-width: 1;
}
.zwc-processes-bar rect:last-child {
    stroke: #2f6fe4;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}
.zwc-processes-list li.zwc-active .zwc-processes-bar rect:last-child {
    animation: zwc-trace var(--zwc-duration, 6s) linear forwards;
}
@keyframes zwc-trace {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}
.zwc-processes-visual {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: radial-gradient(71.43% 55.88% at 29% 48.21%, #FFF 0%, #C3E4FF 100%);
    display: grid;
}

.zwc-processes-visual div {
    /* position: absolute; */
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility .5s ease;
    position: relative;
    grid-area: 1 / 2 / 1 / 2;
}

.zwc-processes-visual div.zwc-active {
    opacity: 1;
    visibility: visible;
}

.zwc-processes-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* =========== works in the apps your team is already in =========== */

.zwc-apps-wrap {
    background-color: #ffffff;
    padding: clamp(50px, 6.94vw, 70px) 0 clamp(30px, 4.63vw, 30px);
}

.zwc-apps-head {
    max-width: 622px;
    margin: 0 auto clamp(28px, 2.31vw, 40px);
    text-align: center;
}

.zwc-apps-head h2 {
    color: #302923;
    font-family: var(--zf-primary-medium);
    font-size: clamp(28px, 2.78vw, 48px);
    line-height: 1.17;
    letter-spacing: clamp(-1.44px, -0.083vw, -0.6px);
    margin: 0 auto 8px;
    max-width: 500px;
}

.zwc-apps-head p {
    color: #3e322c;
    font-family: var(--primaryfont-regular);
    font-size: clamp(16px, 1.16vw, 20px);
    line-height: 1.4;
    margin: 0;
}

/* five columns, dividers between cells only, nothing on the outer edges */
.zwc-apps-list ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.zwc-apps-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(90px, 7.35vw, 127px);
    padding: 12px;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
}

/* last column and last row close the block */
.zwc-apps-list li:nth-child(5n),
.zwc-apps-list li:last-child {
    border-right: 0;
}

.zwc-apps-list li:nth-child(n+6) {
    border-bottom: 0;
}

.zwc-apps-list img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: clamp(26px, 2.2vw, 38px);
}

/* ============== start guiding your users today ============== */

.zwc-signup-wrap {
    background-color: #d6edfd;
    background: linear-gradient(0deg, #39afff -50%, #ffffff 100%);
    padding: clamp(60px, 6.94vw, 100px) 0;
    text-align: center;
}

.zwc-signup-wrap .content-wrap {
    max-width: 578px;
}

.zwc-signup-wrap h2 {
    color: #001f34;
    font-family: var(--zf-primary-medium);
    font-size: clamp(40px, 3.7vw, 64px);
    line-height: 1.1;
    letter-spacing: clamp(-3.84px, -0.222vw, -1.6px);
    margin: 0 auto 12px;
    max-width: 460px;
}

.zwc-signup-wrap p {
    color: #10486f;
    font-family: var(--primaryfont-regular);
    font-size: clamp(16px, 1.16vw, 20px);
    line-height: 1.4;
    margin: 0 0 clamp(24px, 1.85vw, 32px);
}

@media (min-width: 768px){

    /* ===================== scroll in animations ===================== */
    /* reusable: add .zwc-anim plus one direction class to any element,
    stagger by setting --zwc-delay on it from here.
    The backend drops .middle-animated on a section once it scrolls in. */

    .zwc-anim {
        opacity: 0;
    }

    .middle-animated .zwc-anim {
        animation-duration: .8s;
        animation-timing-function: cubic-bezier(.22, .61, .36, 1);
        animation-delay: var(--zwc-delay, 0s);
        animation-fill-mode: both;
    }

    .middle-animated .zwc-anim-up {
        animation-name: zwc-slide-up;
    }

    .middle-animated .zwc-anim-down {
        animation-name: zwc-slide-down;
    }

    .middle-animated .zwc-anim-left {
        animation-name: zwc-slide-left;
    }

    .middle-animated .zwc-anim-right {
        animation-name: zwc-slide-right;
    }

    .middle-animated .zwc-anim-scale {
        animation-name: zwc-scale-in;
    }

    .middle-animated .zwc-anim-fade {
        animation-name: zwc-fade-in;
    }

    @keyframes zwc-slide-up {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes zwc-slide-down {
        from { opacity: 0; transform: translateY(-20px); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes zwc-slide-left {
        from { opacity: 0; transform: translateX(-20px); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes zwc-slide-right {
        from { opacity: 0; transform: translateX(20px); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes zwc-scale-in {
        from { opacity: 0; transform: scale(.7); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes zwc-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* the user image leads, the two overlays follow it in */
    .zwc-banner-nav { --zwc-delay: .25s; }
    .zwc-banner-tip { --zwc-delay: .4s; }

/* logos pop in one after another */
    .zwc-apps-list li:nth-child(1) .zwc-anim { --zwc-delay: .05s; }
    .zwc-apps-list li:nth-child(2) .zwc-anim { --zwc-delay: .1s; }
    .zwc-apps-list li:nth-child(3) .zwc-anim { --zwc-delay: .3s; }
    .zwc-apps-list li:nth-child(4) .zwc-anim { --zwc-delay: .5s; }
    .zwc-apps-list li:nth-child(5) .zwc-anim { --zwc-delay: .7s; }
    .zwc-apps-list li:nth-child(6) .zwc-anim { --zwc-delay: .9s; }
    .zwc-apps-list li:nth-child(7) .zwc-anim { --zwc-delay: 1.1s; }
    .zwc-apps-list li:nth-child(8) .zwc-anim { --zwc-delay: 1.3s; }
    .zwc-apps-list li:nth-child(9) .zwc-anim { --zwc-delay: 1.5s; }

    @media (prefers-reduced-motion: reduce) {

        .zwc-anim {
            opacity: 1;
        }

        .middle-animated .zwc-anim {
            animation: none;
        }
    }

}
/* ============================ 1280 ============================ */
@media (max-width: 1440px) {
    .zwc-banner-visual {
        transform: scale(0.85);
        transform-origin: left top;
    }
}
@media (max-width: 1280px) {
    .zwc-ways-sticky {
        min-height: 660px;
    }
    .zwc-processes-desc p {
        max-width: 100%;
    }
}

/* ======================= short viewports ======================= */
/* below 820px tall the sticky scroll drive is dropped, tabs stay clickable */

@media (min-width: 1025px) and (max-height: 819px) {

    .zwc-ways-wrap {
        height: auto;
        padding: 60px 0;
    }

    .zwc-ways-sticky {
        position: static;
        top: auto;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .zwc-ways-panel {
        height: auto;
        min-height: 420px;
        display: grid;
    }

    .zwc-ways-item {
        position: relative;
        grid-area: 1 / 2 / 1 / 2;
    }
}

/* ============================ 1024 ============================ */

@media (max-width: 1199px) {
    .content-wrap.zwc-banner-top {
        padding-bottom: 40px;
    }
    .zwc-ways-wrap {
        height: auto;
        padding: 60px 0;
    }

    .zwc-ways-sticky {
        position: static;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .zwc-ways-panel {
        height: auto;
        display: grid;
    }

    .zwc-ways-item {
        position: relative;
        padding: 40px;
        grid-area: 1 / 2 / 1 / 2;
    }
    .zwc-processes-hold {
        align-items: flex-start;
    }
    /* both rows still fit across, only the cells get tighter */
    .zwc-apps-list li {
        padding: 12px 8px;
    }
}
@media (max-width: 1023px) {
    .zwc-banner-wrap {
        padding-top: 120px;
    }
    .zwc-banner-wrap .content-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .zwc-banner-info {
        width: 100%;
    }
    .zwc-banner-visual{
        display:none;
    }
    .zwc-banner-info {
        text-align: center;
        max-width: 500px;
        margin: 0 auto;
    }
    .zwc-ways-tab li {
        font-size: 14px;
        padding: 0 14px;
    }
    .zwc-ways-tab ul {
        gap: 5px;
    }
    .zwc-ways-sticky .content-wrap {
        padding-bottom: 0;
    }
    .zwc-ways-panel {
        margin: 50px 0;
    }
    .zwc-signup-wrap .content-wrap {
        max-width: 500px;
    }

    /* the visual moves inside each item, between the button and its text */
    
    .zwc-processes-hold {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .zwc-processes-list {
        width: 100%;
    }

    .zwc-processes-list ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .zwc-processes-list li {
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .zwc-processes-visual {
        height: 56vw;
    }
    .zwc-processes-list ul {
        grid-template-columns: 1fr;
    }

    .zwc-processes-visual {
        display: none;
    }

    .zwc-processes-list li.zwc-active .zwc-processes-thumb {
        display: block;
        position: relative;
        z-index: 1;
        padding: 0 30px 30px 20px;
        order: 2;
    }

    .zwc-processes-thumb img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
    }
    .zwc-processes-list button{
        font-size: 20px;
    }
    .zwc-processes-list li.zwc-active button {
        padding-top: 24px;
    }

    .zwc-processes-list li.zwc-active .zwc-processes-desc {
        padding-top: 0;
        padding-bottom: 0;
    }

    .zwc-processes-desc p {
        max-width: 100%;
        font-size: 18px;
        margin: 20px 0;
    }

    /* no autoplay here, so the outline holds instead of running a countdown */
    .zwc-processes-list li.zwc-active .zwc-processes-bar rect:last-child {
        animation: none;
        stroke-dashoffset: 0;
    }
    .zwc-processes-list {
        max-width: 680px;
        margin: 0 auto;
    }
}
/* ============================= 767 ============================= */

@media (max-width: 767px) {
    .zwc-banner-wrap {
        padding: 100px 0 60px;
    }
    .zwc-ways-wrap,.zwc-processes-wrap  {
        padding-top: 20px;
    }
    .zwc-apps-wrap {
        padding-bottom: 10px;
    }
    .zwc-banner-info h1 br,
    .zwc-ways-wrap h2 br,
    .zwc-processes-head h2 br,
    .zwc-apps-head h2 br,
    .zwc-signup-wrap h2 br {
        display: none;
    }

    /* tabs drop out, every item stacks with its own label pill */
    .zwc-ways-tab {
        display: none;
    }
    .zwc-ways-panel span.zwc-icon {
        filter: brightness(0) invert(1);
    }
    .zwc-ways-info {
        text-align: center;
        max-width: 400px;
        margin: 0 auto 20px;
    }
    .zwc-ways-media {
        order: 2;
    }
    .zwc-processes-head {
        max-width: 460px;
        margin: 0 auto 60px;
    }
    .zwc-ways-panel {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: auto;
        min-height: 0;
        background: none;
        border-radius: 0;
        overflow: visible;
        max-width: 500px;
    }

    .zwc-ways-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 50px 20px;
        border-radius: 16px;
        opacity: 1;
        visibility: visible;
        background: radial-gradient(76.33% 60.73% at 35.1% 41.13%, #FFF 0%, #C3E4FF 100%);
    }

    .zwc-ways-media,
    .zwc-ways-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .zwc-ways-label {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        height: 36px;
        padding: 0 14px;
        margin-bottom: 12px;
        border-radius: 36px;
        font-family: var(--primaryfont-regular);
        font-size: 14px;
        line-height: 1;
        background-color: #003297;
        border-color: #003297;
        color: #ffffff;
        margin: 0 auto 20px;
    }

    .zwc-apps-list ul {
        grid-template-columns: repeat(3, 1fr);
    }

    /* three per row, so the desktop row and column ends are repeated here
       to outweigh them and give every cell its dividers back */
    .zwc-apps-list li,
    .zwc-apps-list li:nth-child(5n),
    .zwc-apps-list li:nth-child(n+6) {
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }

    /* third column and last row close the block */
    .zwc-apps-list li:nth-child(3n),
    .zwc-apps-list li:last-child {
        border-right: 0;
    }

    .zwc-apps-list li:nth-child(n+7) {
        border-bottom: 0;
    }
}

/* ============================= 375 ============================= */

@media (max-width: 375px) {

    .zwc-apps-list ul {
        grid-template-columns: repeat(2, 1fr);
    }

    /* same again for two per row, outweighing the three column ends */
    .zwc-apps-list li,
    .zwc-apps-list li:nth-child(3n),
    .zwc-apps-list li:nth-child(n+7) {
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }

    /* right hand column closes the row */
    .zwc-apps-list li:nth-child(2n) {
        border-right: 0;
    }

    /* an odd last logo takes the full width so no divider dangles */
    .zwc-apps-list li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .zwc-apps-list li:last-child {
        border-right: 0;
        border-bottom: 0;
    }
}