.zwc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.zwc-oneauth-inner section {
    padding: clamp(60px, 8vw, 120px) 0;
    text-wrap: pretty;
}

.zwc-verify-push {
    margin-bottom: -10px;
}

.zwc-oneauth-inner section.zwc-banner-wrapper {
    padding-bottom: 0;
    padding-top: 55px
}
.zwc-oneauth-inner section.zwc-trust-wrapper{
    padding-bottom: 0px;
}
.zwc-oneauth-inner section.zwc-mfa-wrapper,
.zwc-oneauth-inner section.zwc-features-wrapper {
    padding-bottom: 0
}

.zwc-banner-wrapper h1 {
    font-size: clamp(30px, 5vw, 72px);
    font-family: var(--zf-secondary-semibold)
}

.zwc-banner-wrapper {
    text-align: center;
    background: url("/sites/zweb/images/accounts/one-auth/zwc-banner.jpg") center center / cover no-repeat;
    margin: 0;
    border-radius: 40px
}

@supports (animation-timeline: view()) {
    .zwc-banner-wrapper {
        animation: zwc-banner-tuck cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-timeline: view();
        animation-range: exit 40% exit 100%
    }

    @keyframes zwc-banner-tuck {
        from {
            margin: 0;
            border-radius: 0
        }

        to {
            margin: 0 20px;
            border-radius: 40px
        }
    }

    @media (max-height: 900px) {
        .zwc-banner-wrapper {
            animation-range: exit 50% exit 100%
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .zwc-banner-wrapper {
        animation: none;
        margin: 0 20px
    }
}

.zwc-banner-wrapper p {
    max-width: 1019px;
    margin: 0 auto 50px
}

.zwc-gradient-text {
    background: linear-gradient(270deg, #1d3be3 19.11%, #905df7 54.76%, #227ddf 88.79%) text;
    -webkit-text-fill-color: transparent;
    display: block
}

.zwc-cta-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: clamp(32px, 5vw, 64px)
}

.zwc-qr-download {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left
}

.zwc-qr-download::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 96px;
    width: 30px;
    height: 35px;
    background: url("/sites/zweb/images/accounts/one-auth/banner-icons.png") -48px -297px / 600px no-repeat;
    transform: rotate(269deg)
}

.zwc-qr-thumb {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    display: block
}

.zwc-qr-download p {
    margin: 0;
    max-width: none;
    font-size: 16px;
    font-family: var(--zf-secondary-semibold);
    padding-top: 28px
}

.zwc-banner-stage {
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: end;
    min-height: clamp(500px, 60vw, 950px)
}

.zwc-banner-phone {
    position: relative;
    width: clamp(280px, 36vw, 625px);
    margin-left: 20%
}

.zwc-banner-phone img,
.zwc-pop-right,
.zwc-pop-tfa,
.zwc-pop-multidevice,
.zwc-pop-passwordless {
    width: 100%;
    height: auto;
    display: block
}

.zwc-pop {
    position: absolute;
    z-index: 1
}

.zwc-pop-multidevice {
    top: 29%;
    left: 2%;
    width: clamp(220px, 25vw, 360px)
}

.zwc-pop-tfa {
    left: 2%;
    bottom: 18%;
    width: clamp(200px, 22vw, 312px);
    height: auto;
}

.zwc-pop-right {
    top: 12%;
    right: -3%;
    width: clamp(240px, 30vw, 430px);
    height: auto;
}

.zwc-pop-passwordless {
    right: -3%;
    bottom: 26%;
    width: clamp(220px, 26vw, 375px)
}

.zwc-pop {
    transform-origin: center center
}

.zwc-pop-multidevice {
    --zwc-parallax: -180px
}

.zwc-pop-tfa {
    --zwc-parallax: -90px
}

.zwc-pop-right {
    --zwc-parallax: -140px;
}

.zwc-pop-passwordless {
    --zwc-parallax: -120px
}

@supports (animation-timeline: scroll()) {
    .zwc-pop {
        animation: zwc-pop-parallax linear both;
        animation-timeline: scroll(root);
        animation-range: 0 100vh
    }

    @keyframes zwc-pop-parallax {
        from {
            translate: 0 0
        }

        to {
            translate: 0 var(--zwc-parallax, -150px)
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .zwc-pop {
        animation: none
    }
}

.zwc-testimonial-wrapper {
    color: black;
    background: #deebfc;
    color: black
}

.zwc-testimonial-card {
    display: flex;
    gap: clamp(32px, 6vw, 96px);
    text-align: left;
    max-width: 80%;
    margin: auto;
}

.zwc-testimonial-head {
    flex-shrink: 0;
       width: clamp(200px, 33%, 490px);
}

.zwc-testimonial-head h2 {
    margin: 0;
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(32px, 3.4vw, 52px);
    line-height: 1.1;
    letter-spacing: -1px
}

.zwc-testimonial-body {
    position: relative;
    flex: 1 1 0%;
    min-width: 0
}

.zwc-testimonial-slide {
    height: auto
}

.zwc-testimonial-quote {
    margin: 0 0 clamp(24px, 3vw, 36px);
    font-size: clamp(18px, 1.6vw, 25px);
    line-height: 1.5
}

.zwc-testimonial-name {
    margin: 0;
    font-family: var(--zf-secondary-semibold);
    font-weight: 700;
    font-size: clamp(16px, 1.3vw, 20px)
}

.zwc-testimonial-nav {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 12px
}

.zwc-testimonial-prev,
.zwc-testimonial-next {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
    border: 1px solid #171248;
    background: transparent;
    cursor: pointer;
    transition: background .25s, border-color .25s
}

/* Dark fill only while hovered or pressed (active) */
.zwc-testimonial-prev:hover,
.zwc-testimonial-next:hover,
.zwc-testimonial-prev:active,
.zwc-testimonial-next:active {
    background: #171248;
    border-color: #171248
}

.zwc-testimonial-prev::before,
.zwc-testimonial-next::before {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid #171248;
    border-right: 2px solid #171248;
    transition: border-color .25s
}

/* Flip the chevron to white so it stays visible on the dark fill */
.zwc-testimonial-prev:hover::before,
.zwc-testimonial-next:hover::before,
.zwc-testimonial-prev:active::before,
.zwc-testimonial-next:active::before {
    border-color: #fff
}

.zwc-testimonial-prev::before {
    transform: rotate(-135deg);
    margin-left: 4px
}

.zwc-testimonial-next::before {
    transform: rotate(45deg);
    margin-right: 4px
}

.zwc-mfa-card {
    border: 1px solid #d4dbff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.04) 0 20px 40px
}

.zwc-mfa-intro {
    display: flex;
    gap: clamp(32px, 5vw, 80px);
    padding: clamp(32px, 5vw, 72px);
}

.zwc-mfa-intro h2 {
    flex: 1 1 0%;
    margin: 0;
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(28px, 3.5vw, 56px);
    line-height: 1.15;
    letter-spacing: -1px
}

.zwc-mfa-copy {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 1em;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.5
}

.zwc-mfa-copy p {
    margin: 0
}

.zwc-strong {
    font-family: var(--zf-secondary-semibold)
}

.zwc-mfa-tabs-panel {
    background: url("/sites/zweb/images/accounts/one-auth/zwc-oneauth-tab-bg.png") center center / cover no-repeat;
    padding: clamp(22px, 5vw, 64px) clamp(32px, 5vw, 64px) 0;
    border-radius: 20px;
    margin: 0px 10px 10px;
    overflow: hidden;
}

.zwc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 clamp(30px, 5vw, 72px);
    padding: 0;
    list-style: none;
    justify-content: center
}

.zwc-tab {
    padding: 12px 28px;
    border-radius: 40px;
    backdrop-filter: blur(5px);
    box-shadow: rgba(255, 255, 255, 0.1) 0 8px 32px, rgba(255, 255, 255, 0.5) 0 1px 0 inset, rgba(10, 10, 10, 0.1) 0 -1px 0 inset;
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(16px, 1.4vw, 22px);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    transition: box-shadow .3s, background .3s
}

.zwc-tab-active {
    box-shadow: rgba(0, 0, 0, 0.25) 0 0 16px -6px inset, rgba(255, 255, 255, 0.5) 0 1px 0 inset;
    background: rgba(31, 75, 207, 0.2)
}

.zwc-mfa-tab-content {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
    width: 90%;
    margin: auto;
}

.zwc-fade-in {
    animation: .4s ease 0s 1 normal none running zwc-tab-fade
}

@keyframes zwc-tab-fade {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.zwc-mfa-tab-text {
    flex: 1 1 0%;
    min-width: 40%;
}

.zwc-mfa-tab-text h3 {
    margin: 0 0 16px;
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(26px, 3vw, 40px);
    letter-spacing: -0.8px
}

.zwc-mfa-tab-text p {
    margin: 0;
    max-width: 420px;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.5
}

.zwc-mfa-tab-image {
    flex: 0 0 auto;
    width: clamp(260px, 44vw, 614px);
    display: grid;
    margin-bottom: -27px;
    grid-template-areas: "stack";
    align-items: end;
    justify-items: center
}

.zwc-mfa-tab-image video,
.zwc-mfa-tab-image img {
    grid-area: stack;
    max-width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none
}

.zwc-mfa-tab-image video.active,
.zwc-mfa-tab-image img.active {
    opacity: 1;
    pointer-events: auto
}

#zwc-visual1 {
    width: 524px
}

#zwc-visual3 {
    width: 614px
}

#zwc-visual4 {
    width: 420px;
    border: 10px solid #2F0078;
    border-radius: 53px 54px 0 0
}

.zwc-org-card {
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.08) 0 20px 40px;
    min-height: 408px
}

.zwc-org-content {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(16px, 2vw, 24px);
    padding: clamp(32px, 5vw, 72px)
}

.zwc-org-content h2 {
    margin: 0;
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
    letter-spacing: -0.8px
}

.zwc-org-content p {
    margin: 0;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.5
}

.zwc-org-image {
    flex: 1 1 0%;
    min-width: 0;
    align-self: stretch;
    object-fit: cover;
    object-position: right center
}

.zwc-2fa-wrapper {
    background: url("/sites/zweb/images/accounts/one-auth/zwc-2fa-bg.png") center center / cover no-repeat #1f2b94;
    color: #fff;
    overflow: hidden
}

.zwc-2fa-wrapper .content-wrap {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 64px)
}

.zwc-2fa-content {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2vw, 28px);
    max-width: 580px
}

.zwc-2fa-content h2 {
    margin: 0;
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.2;
    letter-spacing: -0.96px
}

.zwc-2fa-content p {
    margin: 0;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.5
}

.zwc-2fa-image {
    flex: 1 1 0%;
    display: flex;
    justify-content: end;
}

.zwc-2fa-image img {
    width: 100%;
    max-width: clamp(280px, 32vw, 450px);
    height: auto;
    display: block
}

.zwc-link-arrow {
    position: relative;
    align-self: flex-start;
    padding: 4px 22px 4px 0;
    color: #fff;
    font-family: var(--zf-secondary-semibold);
    font-size: 16px;
    letter-spacing: -0.32px;
    text-decoration: underline
}

.zwc-link-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 6px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: translateY(-50%) rotate(-45deg)
}

.zwc-security-title {
    text-align: center;
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(28px, 4vw, 56px);
    margin: 0 auto clamp(40px, 5vw, 64px)
}

.zwc-security-layout {
    display: flex;
    gap: 24px;
    align-items: stretch
}

.zwc-security-col {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.zwc-security-col-main {
    flex: 2 1 0%
}

.zwc-security-col-side {
    flex: 1 1 0%
}

.zwc-security-card {
    display: flex;
    background: #ebf0fb;
    border-radius: 24px;
    padding: clamp(24px, 2.7vw, 40px);
    gap: 20px;
    height: 100%
}

.zwc-security-card-row {
    flex-direction: row;
    align-items: center
}

.zwc-security-card-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 0
}

.zwc-security-icon {
    position: relative;
    flex-shrink: 0;
    width: clamp(100px, 10vw, 150px);
    height: clamp(100px, 10vw, 160px)
}

.zwc-security-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/sites/zweb/images/accounts/one-auth/zwc-oneauth-spriteicon.png");
    background-repeat: no-repeat;
    background-size: 314% auto
}

.zwc-icon-applock::before {
    background-position: 17% -22%
}

.zwc-icon-remote::before {
    background-position: 80% -22%
}

.zwc-icon-restrict::before {
    background-position: 20% 108%
}

.zwc-security-content h3 {
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(22px, 2.2vw, 32px);
    margin: 0 0 12px
}

.zwc-security-content p {
    margin: 0;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.55;
    max-width: 445px
}

.zwc-features-grid {
    display: flex;
    gap: clamp(16px, 2vw, 24px);
    align-items: stretch
}

.zwc-feature-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #95a7fb;
    border-radius: 24px;
    background: linear-gradient(180deg, #d8dfff 34.04%, #FFF 68.65%)
}

.zwc-feature-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 48px)
}

.zwc-feature-visual img {
    max-width: 100%;
    height: auto;
    display: block
}

.zwc-feature-visual-passphrase {
    align-items: stretch
}

.zwc-passphrase-mock {
    width: 100%;
    border-radius: 24px;
    padding: clamp(20px, 2.4vw, 36px);
    background: rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 -1px 2px rgba(255, 255, 255, 0.3),
        inset 1px 0 2px rgba(255, 255, 255, 0.3),
        inset -1px 0 2px rgba(255, 255, 255, 0.3);
    display: flex
}

.zwc-passphrase-input>span {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: -3px;
    font-family: var(--zf-secondary-semibold);
    vertical-align: middle
}

.zwc-passphrase-input::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: 1em;
    margin-left: 3px;
    vertical-align: middle;
    background: currentColor;
    opacity: 0
}

.zwc-features-wrapper .content-wrap.middle-animated .zwc-passphrase-input>span {
    animation: zwc-pass-type .9s steps(16, end) .3s forwards
}

.zwc-features-wrapper .content-wrap.middle-animated .zwc-passphrase-input-mask>span {
    animation: zwc-pass-type 1.1s steps(25, end) 1.5s forwards
}

.zwc-features-wrapper .content-wrap.middle-animated .zwc-passphrase-input::after {
    animation: zwc-pass-cursor .5s steps(2, end) .3s 3 forwards
}

.zwc-features-wrapper .content-wrap.middle-animated .zwc-passphrase-input-mask::after {
    animation: zwc-pass-cursor .5s steps(2, end) 1.5s 3 forwards
}

@keyframes zwc-pass-type {
    to {
        max-width: 100%
    }
}

@keyframes zwc-pass-cursor {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

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

    .zwc-passphrase-input>span,
    .zwc-passphrase-input::after {
        max-width: 100%;
        animation: none;
        opacity: 0
    }

    .zwc-passphrase-input>span {
        opacity: 1
    }
}

.zwc-passphrase-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vw, 20px);
    color: #7350D3;
}

.zwc-passphrase-title {
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.2
}

.zwc-passphrase-field {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.zwc-passphrase-label {
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.2
}

.zwc-passphrase-input {
    background: #fff;
    border-radius: 5px;
    padding: clamp(12px, 1.2vw, 16px) clamp(14px, 1.4vw, 18px);
    border: 3px solid rgba(255, 255, 255, 0.40);
    font-size: clamp(14px, 1.2vw, 18px);
    color: #5a2adf
}

.zwc-passphrase-input-mask {
    letter-spacing: 1px;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip
}

.zwc-feature-content {
    padding: clamp(24px, 3vw, 40px) clamp(28px, 3vw, 48px) clamp(32px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    border-radius: 24px;
    padding-top: 0
}

.zwc-feature-tag {
    font-family: var(--zf-secondary-semibold);
    font-size: 16px;
    color: #3f52d3;
    letter-spacing: .16px
}

.zwc-feature-content h3 {
    margin: 0;
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: -0.6px
}

.zwc-feature-content p {
    margin: 0;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.55
}

.zwc-feature-visual-wheel {
    position: relative;
    overflow: hidden;
    padding: 0
}

.zwc-wheel {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 1 / 1;
    container-type: size;
    margin-bottom: clamp(-280px, -38%, -530px);
    transform: scale(1.2)
}

.zwc-feature-visual-wheel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 21%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #FFF 58.33%);
    pointer-events: none;
    z-index: 1
}

.zwc-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgb(7 48 224 / 14%);
    border-radius: 50%;
    translate: -50% -50%;
    scale: 0;
    opacity: 0;
    transition: scale .8s cubic-bezier(0.22, 1, 0.36, 1), opacity .5s ease
}

.zwc-ring-1 {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(120, 135, 200, 0.04) 0, rgba(120, 135, 200, 0.10) 100%);
    transition-delay: 1.4s;
    animation: zwc-ring-ccw 28s linear .1s infinite
}

.zwc-ring-2 {
    width: 70%;
    height: 70%;
    background: radial-gradient(circle at center, rgba(120, 135, 200, 0.05) 0, rgba(120, 135, 200, 0.12) 100%);
    transition-delay: .7s;
    animation: zwc-ring-cw 22s linear .7s infinite
}

.zwc-ring-3 {
    width: 42%;
    height: 42%;
    background: radial-gradient(circle at center, rgba(144, 93, 247, 0.35) 0, rgba(144, 93, 247, 0) 70%);
    transition-delay: 0s;
    animation: zwc-ring-ccw 18s linear 1.3s infinite;
}

.zwc-features-wrapper .content-wrap.middle-animated .zwc-ring {
    scale: 1;
    opacity: 1
}

@keyframes zwc-ring-ccw {
    from {
        rotate: 0
    }

    to {
        rotate: -360deg
    }
}

@keyframes zwc-ring-cw {
    from {
        rotate: 0
    }

    to {
        rotate: 360deg
    }
}

.zwc-ring-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    opacity: 0;
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1) 2.4s, opacity .4s ease 2.4s
}

.zwc-ring-1 .zwc-ring-icon {
    transform: rotate(var(--angle)) translateY(-50cqh) rotate(calc(var(--angle) * -1)) scale(0)
}

.zwc-ring-2 .zwc-ring-icon {
    transform: rotate(var(--angle)) translateY(-35cqh) rotate(calc(var(--angle) * -1)) scale(0)
}

.zwc-ring-3 .zwc-ring-icon {
    transform: rotate(var(--angle)) translateY(-21cqh) rotate(calc(var(--angle) * -1)) scale(0)
}

.zwc-ring-1 .zwc-ring-icon:nth-child(2) {
    transition-delay: 2.55s
}

.zwc-features-wrapper .content-wrap.middle-animated .zwc-ring-1 .zwc-ring-icon {
    transform: rotate(var(--angle)) translateY(-50cqh) rotate(calc(var(--angle) * -1)) scale(1)
}

.zwc-features-wrapper .content-wrap.middle-animated .zwc-ring-2 .zwc-ring-icon {
    transform: rotate(var(--angle)) translateY(-35cqh) rotate(calc(var(--angle) * -1)) scale(1)
}

.zwc-features-wrapper .content-wrap.middle-animated .zwc-ring-3 .zwc-ring-icon {
    transform: rotate(var(--angle)) translateY(-21cqh) rotate(calc(var(--angle) * -1)) scale(1)
}

.zwc-features-wrapper .content-wrap.middle-animated .zwc-ring-icon {
    opacity: 1
}

.zwc-ring-icon i {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background-image: url('/sites/zweb/images/accounts/one-auth-revamp/oneauth-sprite.png');
    background-repeat: no-repeat;
    background-size: 500% auto;
    box-shadow: 0 6px 16px rgba(60, 80, 180, 0.18)
}

.zwc-ring-1 i {
    animation: zwc-icon-cw 28s linear .1s infinite
}

.zwc-ring-2 i {
    animation: zwc-icon-ccw 22s linear .7s infinite
}

.zwc-ring-3 i {
    animation: zwc-icon-cw 18s linear 1.3s infinite
}

@keyframes zwc-icon-cw {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes zwc-icon-ccw {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(-360deg)
    }
}

/* Orbit angles moved off inline styles onto the icon classes */
.zwc-ring-icon-tablet {
    --angle: 20deg
}

.zwc-ring-icon-os {
    --angle: 140deg
}

.zwc-ring-icon-phone {
    --angle: 260deg
}

.zwc-ring-icon-monitor {
    --angle: 70deg
}

.zwc-ring-icon-watch {
    --angle: 230deg
}

.zwc-ring-icon-phone i {
    background-position: -2% 47%
}

.zwc-ring-icon-tablet i {
    background-position: 24.2% 50%
}

.zwc-ring-icon-monitor i {
    background-position: 50% 50%
}

.zwc-ring-icon-watch i {
    background-position: 75.3% 50%
}

.zwc-ring-icon-os i {
    background-position: 101% 47%
}

.zwc-trust-grid {
    display: flex;
    gap: clamp(16px, 2vw, 24px);
    align-items: stretch
}

.zwc-trust-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
    display: flex
}

.zwc-trust-main {
    width: 73%;
    min-height: clamp(320px, 36vw, 480px);
    padding: clamp(32px, 4vw, 64px);
    background-color: #0b1e4a
}

.zwc-trust-main::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/sites/zweb/images/accounts/one-auth/zwc-millions-oneauth-bg.png') no-repeat center / cover;
    opacity: 0.5;
    transition: opacity .9s ease
}

.content-wrap.middle-animated .zwc-trust-main::before {
    opacity: 1
}

.zwc-trust-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(20px, 5.4vw, 80px);
    max-width: 48%
}

.zwc-trust-heading {
    margin: 0;
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.4
}

.zwc-trust-stats {
    display: flex;
    gap: clamp(32px, 4vw, 56px)
}

.zwc-trust-stat {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.zwc-trust-number {
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(32px, 3.6vw, 52px);
    line-height: 1.1;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums
}

.zwc-trust-label {
    font-size: clamp(14px, 1.1vw, 16px);
    opacity: .9
}

.zwc-trust-promo {
    width: 25%;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(28px, 3vw, 40px);
    background: #0d0f52 url('/sites/zweb/images/accounts/one-auth/zwc-millions-gd-bg.png') no-repeat right bottom / cover;
    gap: clamp(16px, 1.6vw, 24px)
}

.zwc-trust-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 24px;
    background: linear-gradient(268deg, #1d3be3 9.34%, #905df7 29.83%, #905df7 60.38%, #227ddf 86.8%);
    font-family: var(--zf-secondary-semibold);
    font-size: 14px;
    letter-spacing: .4px
}

.zwc-trust-promo h3 {
    margin: 0;
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(18px, 1.7vw, 24px);
    line-height: 1.25;
    letter-spacing: -0.4px
}

.zwc-trust-accent {
    font-size: clamp(24px, 2.3vw, 32px);
    background: linear-gradient(270deg, #a65cf1 19.11%, #ff7de1 54.76%, #3d9bff 88.79%) text;
    -webkit-text-fill-color: transparent;
    /* paint the full gradient on each wrapped line instead of slicing one
       gradient across the whole block */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone
}

.zwc-trust-btn {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #fff;
    font-family: var(--zf-secondary-semibold);
    font-size: 14px;
    letter-spacing: .28px;
    text-decoration: none
}

.zwc-faq-wrapper {
    background: #212121;
    color: #fff
}

.zwc-faq-layout {
    display: flex;
    gap: clamp(32px, 6vw, 80px);
    align-items: flex-start
}

.zwc-faq-title {
    flex-shrink: 0;
    width: clamp(280px, 35%, 450px);
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.15;
    margin: 0
}

.zwc-accordion {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column
}

.zwc-accordion-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3)
}

.zwc-accordion-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 24px 48px 24px 0;
    color: #fff;
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(18px, 1.6vw, 22px);
    text-align: left;
    border: 0;
    background: 0;
    line-height: 150%;
    cursor: pointer
}

.zwc-accordion-icon {
    position: absolute;
    top: 50%;
    right: 0;
    width: 20px;
    height: 20px;
    transform: translateY(-50%)
}

.zwc-accordion-icon::before,
.zwc-accordion-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    transform: translate(-50%, -50%)
}

.zwc-accordion-icon::before {
    width: 18px;
    height: 2px
}

.zwc-accordion-icon::after {
    width: 2px;
    height: 18px;
    transition: transform .3s
}

.zwc-accordion-btn[aria-expanded="true"] .zwc-accordion-icon::after {
    transform: translate(-50%, -50%) scaleY(0)
}

.zwc-accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s
}

.zwc-accordion-inner {
    overflow: hidden;
    min-height: 0
}

.zwc-accordion-inner p {
    margin: 0;
    padding: 0 0 24px;
    max-width: 710px;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.6
}

.zwc-accordion-btn[aria-expanded="true"]+.zwc-accordion-content {
    grid-template-rows: 1fr
}

.zwc-footer-cta-wrapper {
    text-align: center
}

.zwc-footer-cta-wrapper h2 {
    max-width: 1066px;
    margin: 0 auto clamp(24px, 3vw, 32px);
    font-family: var(--zf-secondary-semibold);
    font-size: clamp(28px, 4vw, 56px)
}

/* Footer download badges — center the .apps-download-links-wrap row.
   Badge sprite styling comes from the shared .apps-download-links-wrap a…
   rules below plus the external zohocustom.css base. */
.zwc-footer-cta-wrapper .apps-download-links-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0
}

.zwc-footer-cta-wrapper .apps-download-links-wrap a {
    margin: 0
}

@media screen and (min-width: 1200px) {
    .zwc-banner-wrapper h1 {
        line-height: 80px;
        letter-spacing: -1.44px
    }

    .zwc-footer-cta-wrapper h2 {
        line-height: 64px;
        letter-spacing: -1.12px
    }
}

@media screen and (max-width: 1024px) {
    .zwc-trust-main {
        width: 67%
    }

    .zwc-trust-promo {
        width: 33%
    }

    .zwc-feature-visual {
        position: relative;
        overflow: hidden
    }

    .zwc-feature-visual::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 30%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #FFF 58.33%);
        pointer-events: none;
        z-index: 1
    }

    .zwc-feature-visual-wheel::after {
        bottom: -23%;
        height: 61%
    }

    .zwc-feature-content:nth-child(2) {
        background-color: white;
        border-radius: 0
    }
}

@media screen and (max-width: 991px) {
    .zwc-banner-stage .zwc-pop {
        display: none
    }
}

@media screen and (max-width: 767px) {
    .zwc-testimonial-card {
        flex-direction: column;
        gap: 24px
    }

    .zwc-testimonial-head {
        width: 100%
    }

    .zwc-testimonial-body {
        padding-bottom: 60px
    }

    .zwc-faq-layout {
        flex-direction: column
    }

    .zwc-faq-title,
    .zwc-mfa-tab-content {
        width: 100%
    }

    .zwc-security-layout {
        flex-direction: column
    }

    .zwc-security-card-row,
    .zwc-security-card-stack {
        flex-direction: column;
        text-align: center;
        align-items: center
    }

    .zwc-security-col {
        width: 80%;
        margin: auto
    }

    .zwc-features-grid {
        width: 75%;
        margin: auto
    }

    .zwc-org-card {
        flex-direction: column
    }

    .zwc-mfa-tab-text {
        min-width: none;
    }

    .zwc-org-content {
        flex: 1 1 100%;
        text-align: center
    }

    .zwc-org-image {
        min-height: 280px
    }

    .zwc-features-grid {
        flex-direction: column
    }

    .zwc-trust-grid {
        flex-direction: column
    }

    .zwc-trust-main,
    .zwc-trust-promo {
        width: 100%
    }

    .zwc-trust-promo {
        background-color: #120952;
        background-image: none
    }

    .zwc-trust-content {
        max-width: 60%
    }
    .zwc-testimonial-card{
        max-width: 100%;
    }

    .zwc-feature-card {
        flex: 0 0 auto
    }

    .zwc-feature-visual {
        flex: 0 0 auto
    }

    .zwc-2fa-wrapper .content-wrap {
        flex-direction: column;
        text-align: center
    }

    .zwc-2fa-content {
        align-items: center
    }

    .zwc-link-arrow {
        align-self: center;
        padding-right: 0
    }

    .zwc-link-arrow::after {
        position: static;
        display: inline-block;
        vertical-align: middle;
        margin: -3px 0 0 8px;
        transform: rotate(-45deg)
    }

    .zwc-mfa-intro,
    .zwc-mfa-tab-content {
        flex-direction: column
    }

    .zwc-mfa-tab-image {
        width: 100%;
        max-width: 360px
    }

    .zwc-banner-stage {
        min-height: 0
    }

    .zwc-banner-wrapper {
        margin: 0 10px;
        animation: none
    }

    .zwc-pop-multidevice,
    .zwc-pop-tfa,
    .zwc-pop-right,
    .zwc-pop-passwordless {
        position: static;
        width: 80%;
        max-width: 320px
    }

    .zwc-feature-visual {
        min-height: 265px
    }
}

@media screen and (max-width: 480px) {

    .zwc-security-col,
    .zwc-mfa-tab-content,
    .zwc-features-grid {
        width: 100%
    }

    .zwc-security-card {
        gap: 0
    }

    .zwc-wheel {
        margin-bottom: -180px
    }

    .zwc-feature-visual {
        min-height: 215px
    }

    .zwc-ring-icon {
        width: 40px;
        height: 40px;
        margin: -20px 0 0 -20px
    }

    .zwc-qr-download p {
        line-height: 123%
    }
    .zwc-trust-content {
        max-width: 100%;
        color: black;
    }
    .zwc-trust-main::before{
        background: #deebfc;
    }
    .zwc-qr-thumb {
        height: 65px;
        width: 65px;
    }

    .zwc-qr-download p {
        font-size: 14px;
    }
}


.banner-right ul {
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px
}

li.apps-download-links-wrap,
.apps-download-links-wrap {
    margin: 0
}

.banner-right ul li a.app-store {
    margin-left: 0
}

.apps-download-links-wrap a.Window-app-store {
    width: 109px;
    height: 40px;
    background-position: -644px -36px;
    background-color: #000;
    border: 1px solid #747474;
    border-radius: 6px
}

.apps-download-links-wrap a.play-store {
    width: 134px;
    background-position: -120px -34px
}

@media screen and (max-width: 1199px) {
    .banner-right ul {
        gap: 10px
    }

    .zwc-pop-passwordless {
        right: 1%;
    }

}

@media screen and (max-width: 991px) {
    .banner-right ul {
        margin: 0 auto;
        justify-content: center
    }
}

@media screen and (max-width: 767px) {
    .banner-right ul {
        flex-flow: wrap
    }
}