/* ==========================================================================
   Zoho Vault — Encrypted backups for disaster recovery
   ========================================================================== */

/* All eight section icons come from one 427x57 sprite, so swapping that single
   file changes every icon on the page. */
:root {
    /* --sprite-img: url("/sites/zweb/images/vault/data-backup/data-backup-icons.svg"); */
    --sprite-img: url("/sites/zweb/images/vault/data-backup/data-backup-icons.svg");
}

/* Painted once for every icon heading; the slice classes in each section below
   only pick their size and their offset into the strip. */
.zwc-why-list h3::before,
.zwc-feat-cont h3::before {
    content: "";
    display: block;
    margin-bottom: 32px;
    background-image: var(--sprite-img);
    background-repeat: no-repeat;
}

/* Feature cards share one 56px icon box, so every card starts its text on the
   same line however tall its own icon is. */
.zwc-feat-cont h3::before {
    height: 56px;
    margin-bottom: 48px;
}

/* ========== Banner section ========== */
.zwc-banner-wrap {
    padding: 100px 0 140px;
    background: radial-gradient(55% 56% at 21% 113%, #d4bdff 0%, rgba(255, 205, 197, 0) 100%),
        radial-gradient(121% 70% at 89% 119%, #8ecaff 0%, rgba(206, 238, 255, 0.5) 49.5%, rgba(254, 255, 224, 0) 100%),
        #fff;
    overflow: hidden;
}

.zwc-banner-inwrap {
    display: flex;
    align-items: flex-start;
    gap: 55px;
}

.zwc-banner-cont {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 50%;
    flex-shrink: 0;
}

.zwc-banner-cont h1 {
    font-family: var(--primaryfont-semibold);
    font-size: 80px;
    line-height: 1.1;
    letter-spacing: -3.2px;
    color: #000;
    margin: 0;
}

.zwc-banner-cont h1 span {
    color: #2b1ec6;
}

.zwc-banner-cont p {
    font-family: var(--primaryfont-regular);
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: #000;
    margin: 0;
}

.zwc-banner-img {
    width: 45%;
    max-width: 560px;
    margin-top: -80px;
    flex-shrink: 0;
}

.zwc-banner-img img {
    display: block;
    width: 100%;
    height: auto;
}

/* ========== Shared CTA buttons ========== */
.zwc-btn-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* .zwc-btn-wrap .act-btn {
    font-size: 20px;
    padding: 20px 33px;
    border-radius: 2px;
    text-transform: none;
} */

.zwc-banner-wrap .zwc-btn-wrap a:not(.cta-btn) {
    color: #000;
    border-color: #000;
}

/* ========== Why backup section ========== */
.zwc-why-wrap {
    padding: 140px 0;
    background: #000;
}

.zwc-why-inwrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 115px;
}

.zwc-why-heading {
    width: 635px;
    position: sticky;
    top: 100px;
}

.zwc-why-heading h2 {
    font-family: var(--primaryfont-semibold);
    font-size: 64px;
    line-height: 1.125;
    letter-spacing: -2.56px;
    color: #fff;
    max-width: 535px;
    margin: 0;
}

.zwc-why-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 530px;
    flex-shrink: 0;
}

.zwc-why-list li {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px;
    border-radius: 16px;
    background: #191919;
}

h3.zwc-icon-continuity::before {
    width: 57px;
    height: 50px;
    background-position: 0 0;
}

h3.zwc-icon-data-loss::before {
    width: 51px;
    height: 53px;
    background-position: -58px 0;
}

h3.zwc-icon-downtime::before {
    width: 54px;
    height: 51px;
    background-position: -110px 0;
}

h3.zwc-icon-compliance::before {
    width: 50px;
    height: 57px;
    background-position: -164px 0;
}

.zwc-why-list h3 {
    width: 100%;
    max-width: 380px;
    font-family: var(--primaryfont-semibold);
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -1.28px;
    color: #fff;
    margin: 0;
    transition: color 0.3s ease;
}

/* The card sitting at the reading line highlights its heading, as per design.
   The first card carries the class in the markup so it holds without JS. */
.zwc-why-list li.zwc-active h3 {
    color: #6691ff;
}

.zwc-why-list p {
    font-family: var(--primaryfont-regular);
    font-size: 18px;
    line-height: 1.556;
    color: #cecece;
    margin: 0;
}

/* ========== Feature section ========== */
.zwc-feature-wrap {
    padding: 140px 0;
    background: linear-gradient(180deg, #fff 0%, #fff 32%, #efecfd 100%);
    overflow: hidden;
}

.zwc-feat-heading {
    display: flex;
    justify-content: center;
}

.zwc-feat-heading h2 {
    font-family: var(--primaryfont-semibold);
    font-size: 64px;
    line-height: 1.09;
    letter-spacing: -1.92px;
    color: #000;
    text-align: center;
    max-width: 645px;
    margin: 0;
}

.zwc-feat-media {
    margin: 72px 0;
}

.zwc-feat-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Feature slider */
/* Pre-init / no-JS fallback: cards sit in a clipped row like the slider viewport */
.zwc-feat-slidewrap:not(.zc-slider-initialized) {
    display: flex;
    gap: 24px;
    overflow: hidden;
    padding-bottom: 20px;
    margin-bottom: -20px;
}

/* zc-slider clips its viewport, which shears the card's drop shadow flat.
   Padding makes room for it; the negative margin keeps the designed spacing.
   Bottom only — side padding would let the next slide peek in. */
.zwc-feat-slidewrap .zc-slider-viewport {
    padding-bottom: 20px;
    margin-bottom: -20px;
}

.zwc-feat-slidewrap:not(.zc-slider-initialized) .zwc-feat-slidecard {
    flex: 0 0 calc((100% - 48px) / 3);
}

.zwc-feat-slidecard {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 48px;
    border: 0.5px solid #cdcdea;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 24px -7px rgba(145, 155, 205, 0.45);
    box-sizing: border-box;
}

/* Each width is trimmed to its own slice so no neighbouring icon bleeds in. */
h3.zwc-icon-prepared::before {
    width: 50px;
    background-position: -216px 3px;
}

h3.zwc-icon-storage::before {
    width: 54px;
    background-position: -268px 6px;
}

h3.zwc-icon-access::before {
    width: 50px;
    background-position: -323px 4px;
}

h3.zwc-icon-encryption::before {
    width: 49px;
    background-position: -378px 4px;
}

.zwc-feat-cont {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.zwc-feat-cont h3 {
    font-family: var(--primaryfont-semibold);
    font-size: 24px;
    line-height: 1.33;
    letter-spacing: -0.48px;
    color: #000;
    margin: 0;
}

.zwc-feat-cont p {
    font-family: var(--primaryfont-regular);
    font-size: 17px;
    line-height: 1.588;
    color: #000;
    margin: 0;
}

.zwc-feat-slidewrap .zc-slider-track {
    align-items: stretch;
}

.zwc-feat-slidewrap .zc-slide {
    height: auto;
}

/* Slider arrows — 24x24 icons set 32px apart, per the design's 80px block */
.zwc-feat-arrow {
    display: flex;
    justify-content: flex-end;
    gap: 32px;
    margin-top: 72px;
}

.zwc-feat-prev,
.zwc-feat-next {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000;
    cursor: pointer;
}

/* The 3px round caps overflow the 24px box by 1.5px, as they do in the design */
.zwc-feat-prev svg,
.zwc-feat-next svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.zwc-feat-prev:disabled,
.zwc-feat-next:disabled {
    color: #6b6b6b;
    cursor: default;
}

/* ========== FAQ section ========== */
.zwc-faq-wrap {
    padding: 120px 0;
    background: #f8f8f8;
}

/* Heading sits beside the list, so each column gets its own share of the row */
.faq-section {
    display: flex;
    justify-content: space-between;
}

.faq-section h2 {
    width: 40%;
    font-family: var(--primaryfont-semibold);
    font-size: 56px;
    line-height: 1.25;
    letter-spacing: -1.68px;
    color: #000;
    margin: 0;
}

.faq-list {
    width: 50%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq-list > li {
    border-top: 1px solid #dfdfdf;
}

.faq-list > li:first-child {
    border-top: 0;
}

.faq-list > li h3 {
    position: relative;
    font-family: var(--primaryfont-semibold);
    font-size: 24px;
    line-height: 1.42;
    letter-spacing: -0.48px;
    color: #000;
    margin: 0;
    cursor: pointer;
}

.faq-list > li h3 button {
    display: block;
    width: 100%;
    padding: 20px 40px 20px 0;
    margin: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* Plus / minus indicator — the vertical bar hides when the item is open */
.faq-list > li h3 .arrow {
    position: absolute;
    top: 50%;
    right: 0;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    pointer-events: none;
}

.faq-list > li h3 .arrow::before,
.faq-list > li h3 .arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #000;
    border-radius: 2px;
    transition: transform 0.25s linear, opacity 0.25s linear;
}

.faq-list > li h3 .arrow::before {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq-list > li h3 .arrow::after {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.faq-list > li.zactive h3 .arrow::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-list p {
    display: none;
    width: 95%;
    font-family: var(--primaryfont-regular);
    font-size: 18px;
    line-height: 1.76;
    letter-spacing: -0.34px;
    color: #000;
    margin: 0 0 24px;
    cursor: pointer;
}

.faq-list p.active {
    display: block;
}

.faq-list p a {
    color: var(--zwc-link-clr);
    border-bottom: 1px solid;
}

/* ========== Bottom CTA section ========== */
.zwc-bottom-wrap {
    padding: 140px 0;
    background: radial-gradient(68.5% 68.6% at 50% 100%, #283d90 0%, #141e48 50%, #000 100%);
}

.zwc-bottom-inwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.zwc-bottom-inwrap h2 {
    font-family: var(--primaryfont-semibold);
    font-size: 80px;
    line-height: 1.11;
    letter-spacing: -2.4px;
    color: #fff;
    text-align: center;
    max-width: 883px;
    margin: 0;
}

.zwc-bottom-inwrap h2 span {
    color: #6691ff;
}

.zwc-bottom-wrap .zwc-btn-wrap {
    gap: 10px;
}

/* .zwc-bottom-wrap .zwc-btn-wrap .act-btn {
    padding: 24px 40px;
    border-radius: 4px;
} */

.zwc-bottom-wrap .zwc-btn-wrap a:not(.cta-btn) {
    color: #fff;
    border-color: #fff;
}

.zwc-feature-video {
    margin: auto;
    background: url("/sites/zweb/images/vault/workplace-video-bg.jpg") no-repeat;
    background-size: cover;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    padding: 50px;
    position: relative
}

.zwc-feature-video video {
    border-radius: 8px
}

.zwc-video-pause span {
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    border-radius: 50px;
    background: #076cba;
    top: 15px;
    right: 15px
}

.video-play::before,.img-play::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid #fff;
    left: 11px;
    top: 7px
}

.video-pause::before,.video-pause::after,.img-pause::before,.img-pause::after {
    content: '';
    position: absolute;
    top: 9px;
    width: 3px;
    height: 12px;
    background: #fff
}

.img-pause::after {
    right: 11px
}

.img-pause::before {
    right: 17px
}

.video-pause::before {
    left: 10px
}

.video-pause::after {
    right: 10px
}

.video-pause {
    display: none
}

.zwc-video-pause {
    display: flex;
    align-items: center;
    position: absolute;
    right: 15px;
    bottom: 15px
}

/* padding:0 matters: browsers ship different UA padding on <button> (Chrome
   6px, Firefox 4px), and a relatively-positioned ::before starts at the
   content box — so any `left` offset lands 2px apart between the two. The
   glyph is centred with flex instead, which needs no offset at all. */
.zwc-video-pause>button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50px;
    background: #000000;
    cursor: pointer;
    transition: all .3s ease
}

.zwc-video-pause>button:focus {
    outline: 2px solid #fff;
    outline-offset: 2px
}

.zwc-video-pause>button:before {
    content: "";
    width: 8px;
    height: 10px;
    background: #fff;
    clip-path: polygon(0 0,0 100%,25% 100%,25% 0,66.66% 0,100% 0,100% 100%,75% 100%,75% 0)
}

.zwc-video-pause>button.is-played:before {
    width: 12px;
    height: 12px;
    clip-path: polygon(20% 0,20% 100%,90% 50%,90% 50%,90% 50%,90% 50%,90% 50%,90% 50%,90% 50%)
}


/* ========== Responsive ========== */
@media only screen and (max-width: 1440px) {
    .zwc-banner-cont h1,
    .zwc-bottom-inwrap h2 {
        font-size: 74px;
    }

    /* .zwc-banner-img {
        width: 620px;
        margin-top: -160px;
    } */

    .zwc-why-inwrap {
        gap: 80px;
    }
}

@media only screen and (max-width: 1280px) {
    .faq-section h2 {
        width: 45%;
    }

    .faq-list {
        width: 48%;
    }

    .zwc-banner-wrap {
        padding: 160px 0 140px;
    }

    .zwc-banner-cont h1,
    .zwc-bottom-inwrap h2 {
        font-size: 64px;
        letter-spacing: -2.4px;
    }

    .zwc-banner-cont,
    .zwc-why-heading {
        width: 52%;
    }

    .zwc-why-list {
        width: 45%;
    }

    /* .zwc-banner-img {
        width: 48%;
        margin-top: -120px;
    } */

    .zwc-why-heading h2,
    .zwc-feat-heading h2 {
        font-size: 56px;
    }

}

@media only screen and (max-width: 1199px) {
    .zwc-banner-cont h1,
    .zwc-bottom-inwrap h2 {
        font-size: 56px;
        letter-spacing: -2px;
    }

    .zwc-why-heading h2,
    .zwc-feat-heading h2 {
        font-size: 48px;
        letter-spacing: -1.6px;
    }

    .faq-section h2 {
        font-size: 44px;
        letter-spacing: -1.32px;
    }

    .zwc-why-wrap,
    .zwc-feature-wrap,
    .zwc-bottom-wrap {
        padding: 100px 0;
    }

    .zwc-faq-wrap {
        padding: 100px 0;
    }

    .zwc-why-list li {
        padding: 40px;
    }

    .zwc-why-list h3 {
        font-size: 28px;
        letter-spacing: -1px;
    }

    .zwc-feat-slidecard {
        padding: 40px;
    }

    .zwc-feat-media {
        margin: 56px 0;
    }
    .zwc-bottom-inwrap h2{
        max-width: 650px;
    }
}

@media only screen and (max-width: 991px) {
    .zwc-banner-wrap {
        padding: 100px 0;
    }

    .zwc-banner-inwrap {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .zwc-banner-cont {
        width: 100%;
        max-width: 650px;
        text-align: center;
        gap: 30px;
    }
    .zwc-btn-wrap{
        justify-content: center;
        flex-wrap: wrap;
    }
    .zwc-banner-img {
        width: 100%;
        max-width: 480px;
        margin-top: 0;
    }

    .zwc-banner-cont h1,
    .zwc-bottom-inwrap h2 {
        font-size: 48px;
        letter-spacing: -1.6px;
    }

    .zwc-why-inwrap {
        flex-direction: column;
        gap: 48px;
    }

    .zwc-why-heading,
    .zwc-why-list {
        width: 100%;
    }

    .zwc-why-heading {
        position: static;
    }

    .zwc-why-heading h2,
    .zwc-feat-heading h2 {
        font-size: 40px;
        letter-spacing: -1.28px;
        max-width: 650px;
        margin: 0 auto;
        text-align: center;
    }
    .zwc-why-list li, .faq-section h2 {   
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    .faq-section h2 {
        text-align: center;
    }
    .zwc-feat-heading h2{
        max-width: 500px;
    }

    /* Columns stack, so the list takes the full measure below the heading */
    .faq-section {
        flex-direction: column;
    }

    .faq-section h2,
    .faq-list {
        width: 100%;
    }

    .faq-section h2 {
        font-size: 40px;
        letter-spacing: -1.2px;
        margin-bottom: 40px;
    }

    .zwc-why-list h3::before {
        margin-bottom: 16px;
    }

    .zwc-feat-arrow {
        gap: 24px;
        margin-top: 48px;
    }

    .zwc-feat-prev,
    .zwc-feat-next {
        width: 20px;
        height: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .zwc-banner-wrap,
    .zwc-why-wrap,
    .zwc-feature-wrap,
    .zwc-faq-wrap,
    .zwc-bottom-wrap {
        padding: 70px 0;
    }
    .zwc-banner-cont{
        max-width: 580px;
        gap: 25px;
    }
    .zwc-banner-cont h1,
    .zwc-bottom-inwrap h2 {
        font-size: 38px;
        letter-spacing: -1.14px;
    }
    .zwc-banner-cont h1{
        max-width: 500px;
        margin: 0 auto;
    }

    .zwc-banner-cont p {
        font-size: 18px;
    }

    .zwc-why-heading h2,
    .zwc-feat-heading h2,
    .faq-section h2 {
        font-size: 30px;
        letter-spacing: -0.9px;
    }
    .zwc-feat-heading h2 {
        max-width: 380px;
    }
    .faq-section h2 {
        margin-bottom: 32px;
    }

    .zwc-why-list li {
        padding: 30px;
    }

    .zwc-why-list h3 {
        font-size: 24px;
        letter-spacing: -0.72px;
    }

    .zwc-why-list p {
        font-size: 17px;
    }

    .zwc-btn-wrap {
        flex-direction: row;
        align-items: stretch;
        gap: 12px;
    }

    /* .zwc-btn-wrap .act-btn {
        font-size: 18px;
        padding: 16px 28px;
    } */

    /* .zwc-bottom-wrap .zwc-btn-wrap .act-btn {
        padding: 18px 32px;
    } */

    .zwc-feat-media {
        margin: 40px 0;
    }

    .zwc-feat-slidecard {
        padding: 30px;
    }

    .zwc-feat-cont h3::before {
        margin-bottom: 32px;
    }

    .zwc-feat-arrow {
        gap: 20px;
        margin-top: 40px;
    }

    .zwc-feat-prev,
    .zwc-feat-next {
        width: 18px;
        height: 18px;
    }

    .faq-list > li h3 {
        font-size: 20px;
        letter-spacing: -0.4px;
    }

    .faq-list > li h3 button {
        padding: 18px 32px 18px 0;
    }

    .faq-list p {
        width: 100%;
        font-size: 17px;
        line-height: 1.625;
        letter-spacing: -0.32px;
        margin-bottom: 20px;
    }
    .zwc-bottom-inwrap h2{
        max-width: 450px;
    }
    .zwc-feature-video{
        padding: 30px;
    }
    .zwc-video-pause{
        right: 5px;
        bottom: 5px;
    }
}

@media only screen and (max-width: 480px) {
    .zwc-banner-cont h1,
    .zwc-bottom-inwrap h2 {
        font-size: 32px;
        letter-spacing: -0.96px;
    }

    .zwc-why-heading h2,
    .zwc-feat-heading h2,
    .faq-section h2 {
        font-size: 26px;
        letter-spacing: -0.78px;
    }

    .zwc-why-list li {
        padding: 24px;
    }

    .zwc-feat-slidecard {
        padding: 24px;
    }

    .zwc-feat-arrow {
        gap: 18px;
        margin-top: 32px;
    }

    .zwc-feat-prev,
    .zwc-feat-next {
        width: 16px;
        height: 16px;
    }
}