/* =========================
   Base / Reset
   ========================= */
.zw-template-inner {
    --zwc-fs-h1: clamp(40px, calc(4.3vw + 26px), 88px);
    --zwc-fs-h2: clamp(28px, calc(2.5vw + 20px), 56px);
    --zwc-fs-h3: clamp(18px, calc(1.25vw + 14px), 32px);
    --zwc-fs-body: clamp(15px, calc(0.21vw + 15px), 16px);
    --zwc-fs-body-md: clamp(16px, calc(0.3vw + 14px), 18px);
    --zwc-fs-body-lg: clamp(17px, calc(0.4vw + 14px), 20px);

    --zwc-space-xs: clamp(6px, calc(0.2vw + 5px), 8px);
    --zwc-space-sm: clamp(11px, calc(0.5vw + 9px), 16px);
    --zwc-space-md: clamp(17px, calc(0.7vw + 14px), 24px);
    --zwc-space-lg: clamp(28px, calc(1.25vw + 22px), 40px);
    --zwc-space-xl: clamp(39px, calc(1.8vw + 31px), 56px);
    --zwc-space-2xl: clamp(56px, calc(2.5vw + 44px), 80px);
    --zwc-space-3xl: clamp(84px, calc(3.75vw + 66px), 120px);

    --zwc-color-primary: #0866FE;
    --zwc-grad-primary: linear-gradient(92deg, #0059FF 23.33%, #1E8CF9 97.86%);
    --zwc-grad-section: radial-gradient(102.12% 102.12% at 50% 4.91%, #F3F9FF 70%, #7DBAFF 100%);
    --zwc-bg-soft: #EDF6FF;
    --zwc-bg-mid: #DCEAFF;
}

/* Framework overrides */
.zw-global-header + div:not(.zw-product-header) {
    display: none;
}

.zw-template-inner p {
    margin-block-end: 0;
}

/* =========================
   Common Components
   ========================= */
.zwc-section-space {
    padding-block: 100px 120px;
}

.zwc-gradient-text {
    background: var(--zwc-grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

span.heading-text-sm {
    font-size: clamp(32px, calc(1.7vw + 24px), 48px);
    display: block;
}

/* Signup widget (markup injected by the framework) */
.zwc-signup-container .zws-signup-box {
    margin-block-start: 0;
}

.zws-signup-box #zwc-signup .sgfrm .defdomlabel {
    padding: 8px 15px;
}

/* CTA buttons — shared by the hero and the closing CTA */
.zwc-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 4px;
    padding: 16px;
    height: 50px;
    font-family: var(--primaryfont-semibold);
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.32px;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s;
}

.zwc-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #000;
    border: 2px solid #000;
    border-radius: 4px;
    padding: 16px;
    height: 50px;
    font-family: var(--primaryfont-semibold);
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.32px;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s;
}

.zwc-cta-secondary:hover,
.zwc-cta-secondary:focus-within {
    opacity: 0.8;
}

.zwc-cta-primary:focus-visible,
.zwc-cta-secondary:focus-visible {
    outline: 2px solid var(--zwc-color-primary);
    outline-offset: 2px;
}

/* Wave divider — closes both the hero and the CTA section */
div.mailcover-top-shape {
    display: grid;
    grid-template-columns: auto;
    height: 150px;
    position: sticky;
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 5px solid #fff;
    z-index: 1;
    margin-block-start: -150px;
pointer-events: none;
}

div.mailcover-top-shape:before {
    content: "";
    display: grid;
    width: 100%;
    height: 100%;
    background: #fff;
    -webkit-clip-path: polygon(0 75%,50% 85%,100% 75%,100% 100%,0 100%);
    clip-path: polygon(0 0,50% 85%,100% 0,100% 100%,0 100%);
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px
}

/* =========================
   Hero
   ========================= */
.zwc-hero-section {
    position: relative;
}

.zwc-hero-section-inner {
    background-color: #f3f9ff;
    background-image:
        url("/sites/zweb/images/mail/homepage/banner-bg.svg"),
        linear-gradient(180deg, #f7faff 0%, #eaf3ff 55%, #f3f9ff 100%);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    overflow: hidden; /* Safari < 16 fallback for overflow: clip */
    overflow: clip;
    position: relative;
    max-width: 95%;
    margin-inline: auto;
    border-radius: 16px;
    width: 95%;
}

.zwc-hero-section-inner.zwc-section-space {
    padding-block-end: 1px;
}

.zwc-hero-section-inner > .content-wrap {
    position: relative;
    z-index: 1;
}

.ztrans-hero-sticky .zwc-hero-section-inner > .content-wrap {
    min-height: var(--ztrans-hero-runway, 1450px);
}

/* Hero content */
.zwc-hero-content-box {
    display: flex;
    align-items: flex-start;
    gap: var(--zwc-space-2xl);
    min-height: 565px;
    position: relative;
}

.zwc-hero-info {
    flex: 1;
    min-width: 0;
    position: relative;
    max-width: calc(100% - 400px - var(--zwc-space-2xl));
    margin-inline: 0;
    text-align: left;
}

.zwc-hero-heading {
    font-family: var(--primaryfont-bold);
    font-size: var(--zwc-fs-h1);
    line-height: 1;
    letter-spacing: -2.64px;
    color: #161619;
    margin-block-end: 0;
}

.zwc-hero-heading .zwc-gradient-text {
    display: block;
}

.zwc-hero-heading span.zwc-text-italic {
    font-style: italic;
}

.zwc-hero-desc {
    font-family: var(--zf-secondary-medium);
    font-size: var(--zwc-fs-body-lg);
    line-height: 1.4;
    letter-spacing: -0.2px;
    /* color: #707070; */
    color: #000000;
    max-width: 550px;
    margin-block-start: var(--zwc-space-md);
}

.zwc-hero-desc strong {
    font-family: var(--primaryfont-semibold);
    color: #000;
}

.zwc-hero-buttons {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--zwc-space-md);
    margin-block-start: var(--zwc-space-lg);
    position: relative;
    z-index: 2;
}

.zwc-hero-scroll {
    display: none;
    justify-content: center;
    color: #161619;
    margin-block-start: var(--zwc-space-md);
}

.zwc-hero-scroll svg {
    overflow: visible;
}

.zwc-hero-scroll svg path {
    opacity: 0.35;
    animation: ztrans_hero_chevron 1.2s linear infinite backwards;
}

.zwc-hero-scroll svg path:nth-child(2) {
    animation-delay: 0s;
}

.zwc-hero-scroll svg path:nth-child(1) {
    animation-delay: .6s;
}

@keyframes ztrans_hero_chevron {
    0% {
        opacity: 0;
        transform: translateY(1px)
    }

    25% {
        opacity: .9;
        transform: translateY(.4px)
    }

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

    75% {
        opacity: .25;
        transform: translateY(-.4px)
    }

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

.zwc-hero-card {
    flex-shrink: 0;
    width: 100%;
    max-width: 450px;
}

.zwc-hero-card .zwc-signup-container {
    max-width: 100%;
}

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

.zwc-signup-container .zwc-hero-signup-heading {
    font-family: var(--primaryfont-bold);
    font-size: clamp(16px, calc(0.4vw + 16px), 24px);
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #262626;
}

/* Hero decorative art */
.zwc-hero-decorative {
    --zwc-deco-drop: 150px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 100px;
    position: absolute;
    left: 10px;
    right: 0;
    top: auto;
    bottom: calc(var(--zwc-deco-drop) * -1);
    max-width: 730px;
    padding-left: 4px;
    pointer-events: none;
}

.zwc-hero-deco-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.zwc-hero-pedestal {
    display: block;
    width: auto;
    height: auto;
    will-change: transform;
}

.zwc-hero-deco-left .zwc-hero-pedestal {
    max-width: 150px;
}

.zwc-hero-deco-right .zwc-hero-pedestal {
    max-width: 150px;
    transform: translateY(60px);
}

.zwc-hero-3d-obj {
    display: block;
    max-width: 145px;
    width: auto;
    height: auto;
    margin-block-end: -8px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 10px 16px rgba(0, 89, 255, 0.2));
}

.zwc-hero-3d-envelope {
    max-width: 130px;
    will-change: transform;
    animation: ztrans_float_envelope 4.5s ease-in-out infinite both;
}

.zwc-hero-3d-shield {
    max-width: 110px;
    will-change: transform;
    animation: ztrans_float_shield 5.2s ease-in-out infinite 0.6s both;
}

@keyframes ztrans_float_envelope {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: translate3d(0, -12px, 0) rotate(0deg);
    }
}

/* Carries the 50px offset that matches the right pedestal's own translateY(60px) drop */
@keyframes ztrans_float_shield {
    0%, 100% {
        transform: rotate(0deg) translateY(50px);
    }
    50% {
        transform: translate3d(0, -14px, 0) rotate(0deg) translateY(50px);
    }
}

/* Hero — body-umain layout variant (centred, no signup card) */
body.body-umain .zwc-hero-content-box {
    min-height: 450px;
}

body:not(.non-umain) .zwc-hero-buttons {
    justify-content: center;
}

body.body-umain .zwc-hero-buttons,
body.body-umain .zwc-hero-scroll {
    display: flex;
    justify-content: center;
}

body.body-umain .zwc-hero-content-box .zwc-hero-card {
    display: none;
}

body.body-umain .zwc-hero-decorative {
    left: 0;
    right: 0;
    margin-inline: auto;
    max-width: 100%;
    width: 85%;
    justify-content: space-between;
    z-index: -1;
    --zwc-deco-drop: 320px;
}

body.body-umain .zwc-hero-deco-group {
    top: -100px;
}

body.body-umain .ztrans-hero-sticky .zwc-hero-scroll {
    opacity: 0;
}

body.body-umain .zwc-hero-info {
    margin-inline: auto;
    text-align: center;
}

body.body-umain .zwc-hero-desc {
    margin-inline: auto;
    max-width: 650px;
}

/* Hero dashboard */
.zwc-hero-dashboard {
    display: flex;
    justify-content: center;
    overflow: visible;
    margin-block-start: var(--zwc-space-2xl);
    position: sticky;
    /* Keep the fallback in sync with ztrans_dash_sticky_top_default in custom-script.js */
    top: var(--ztrans-dash-sticky-top, 120px);
}

.zwc-hero-dashboard-frame {
    position: relative;
    width: 100%;
    max-width: 1291px;
    border-radius: 26.574px;
    border: 3px solid #FFF;
    background: rgba(255, 255, 255, .75);
    padding: 15px 15px 10px 15px;
}

.zwc-hero-dashboard-panel-svg {
    display: block;
    /* Safari clips the root SVG at its viewport whatever overflow says, so the viewBox carries
       25 extra units left of the 1280-unit panel to hold the shifted tab ripples. Width and
       margin cancel those 25 units out again, leaving the panel itself at 100% and in place. */
    width: calc(100% * 1305 / 1280);
    margin-left: calc(-100% * 25 / 1280);
    height: auto;
    position: relative;
    z-index: 1;
    border-radius: 16px;
    overflow: visible;
}

.zwc-hero-dashboard-mobile {
    display: none;
}

.zwc-hero-dashboard-screen {
    opacity: 0;
    /* Not opacity alone: each screen is a role="tabpanel", so an inactive one would
       otherwise stay in the a11y tree and be announced alongside the visible panel */
    visibility: hidden;
    pointer-events: none;
    /* 3px top inset = viewBox min-y (3) less this image's y (0) */
    clip-path: inset(3px 0 0 round 16px);
}

.zwc-hero-dashboard-screen.zwc-is-active {
    opacity: 1;
    visibility: visible;
}

/* Insets map this image's box (0 0 1291x806) onto the panel area (5 3 1280x806) */
.zwc-dash-frame-img {
    clip-path: inset(3px 6px 0 5px round 16px);
}

/* Hero dashboard tabs */
.zwc-tab-indicator {
    transition: transform 0.3s ease;
}

.zwc-dash-tab-hotspot {
    fill: #fff;
    fill-opacity: 0;
    transition: fill-opacity 0.2s ease;
}

.zwc-hero-dashboard-panel-svg .zwc-hero-dashboard-tab {
    cursor: pointer;
    pointer-events: bounding-box;
}

.zwc-hero-dashboard-panel-svg .zwc-hero-dashboard-tab:hover .zwc-dash-tab-hotspot {
    fill-opacity: 0.12;
    animation: none;
}

.zwc-hero-dashboard-panel-svg .zwc-hero-dashboard-tab:focus {
    outline: none;
}

/* On the hotspot, not the tab <g>: the group's bbox includes the ripple, so the ring inflates it */
.zwc-hero-dashboard-panel-svg .zwc-hero-dashboard-tab:focus-visible .zwc-dash-tab-hotspot {
    outline: 2px solid var(--zwc-color-primary);
    outline-offset: 2px;
}

/* :focus-visible only, so pointer users keep the ripple and it never sweeps the focus ring */
.zwc-hero-dashboard-panel-svg .zwc-hero-dashboard-tab:focus-visible .zwc-dash-tab-ripple {
    opacity: 0;
}

/* Hero dashboard tab ripples */
.zwc-dash-tab-ripple {
    pointer-events: none;
    transform: translate(-15px, 2px);
    opacity: 0;
    transition: opacity 0.45s ease;
}

.zwc-dash-ripple-dot {
    fill: #fd5556;
    stroke: #fff;
    stroke-width: 4px;
}

.zwc-dash-ripple-halo {
    fill: #FFB3B5;
    opacity: 0.5;
    transform-box: fill-box;
    transform-origin: center;
}

.zwc-dash-ripple-ring {
    fill: none;
    stroke: #fd5556;
    stroke-width: 4;
    transform-box: fill-box;
    transform-origin: center;
    animation: ztrans_dash_ripple 1.8s ease-out infinite;
}

@keyframes ztrans_dash_ripple {
    0% {
        transform: scale(0.6);
        stroke-opacity: 0.8;
    }
    100% {
        transform: scale(2.4);
        stroke-opacity: 0;
    }
}

.zwc-hero-dashboard-tab.zwc-hero-dashboard-tab-calendar .zwc-dash-ripple-ring {
    animation-delay: 0.3s;
}

.zwc-hero-dashboard-tab.zwc-hero-dashboard-tab-todo .zwc-dash-ripple-ring {
    animation-delay: 0.6s;
}

.zwc-hero-dashboard-tab-calendar .zwc-dash-tab-ripple,
.zwc-hero-dashboard-tab-calendar:not(.zwc-is-active) .zwc-dash-tab-ripple {
    transition-delay: 0.2s;
}

.zwc-hero-dashboard-tab-todo .zwc-dash-tab-ripple {
    transition-delay: 0.3s;
}

.zwc-hero-dashboard-tab-todo:not(.zwc-is-active) .zwc-dash-tab-ripple {
    transition-delay: 0.2s;
}

.zwc-hero-dashboard-tab-todo:nth-child(3):not(.zwc-is-active) .zwc-dash-tab-ripple {
    transition-delay: 0.4s;
}

/* Must follow the transition-delay rules above: transition: none also zeroes the delay */
.ztrans-dash-icons-init .zwc-dash-tab-ripple {
    transition: none;
}

/* Hero wave divider */
.zwc-hero-section .mailcover-top-shape {
    filter: drop-shadow(0 -30px 18px rgba(8, 102, 254, 0.1));
}

/* =========================
   Problems
   ========================= */
.zwc-problems-section {
    background: #fff;
    position: relative;
}

.zwc-problems-content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--zwc-space-xl);
    width: 100%;
}

.zwc-problems-heading {
    text-align: center;
    max-width: 850px;
    display: flex;
    flex-direction: column;
    gap: var(--zwc-space-lg);
}

.zwc-problems-title {
    font-family: var(--primaryfont-semibold);
    font-size: var(--zwc-fs-h2);
    line-height: 1.17;
    letter-spacing: -1.44px;
    color: #161619;
    margin: 0;
}

.zwc-problems-cards-top {
    display: flex;
    gap: var(--zwc-space-lg);
    width: 100%;
    justify-content: space-between;
    padding: 15px;
    margin-block-start: var(--zwc-space-md);
}

.zwc-problem-card-wrap {
    border-radius: 12px;
    max-width: 410px;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 0.4s ease;
}

.zwc-problem-card-toggle {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 0;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    border: none;
}

.zwc-problem-card-toggle:focus-visible {
    outline: 2px solid var(--zwc-color-primary);
    outline-offset: -2px;
}

/* Rotating conic border */
.zwc-problem-card-border {
    position: absolute;
    inset: -12px;
    border-radius: 23px;
    padding: 2px;
    overflow: hidden;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; /* WebKit's spelling of mask-composite: exclude */
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.zwc-problem-card-border::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%) rotate(0deg);
    background: conic-gradient(from 0deg,
        rgba(0, 89, 255, 0) 0deg,
        rgba(0, 89, 255, 0.9) 50deg,
        #1E8CF9 165deg,
        rgba(0, 89, 255, 0.9) 280deg,
        rgba(0, 89, 255, 0) 340deg);
}

.zwc-problem-card-wrap:hover .zwc-problem-card-border::before,
.zwc-problem-card-wrap.ztrans-card-open .zwc-problem-card-border::before {
    will-change: transform;
    animation: ztrans_card_ripple 3.2s linear infinite;
}

@keyframes ztrans_card_ripple {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.zwc-problems-cards-top .zwc-problem-card-wrap:nth-child(2) .zwc-problem-card-border::before {
    animation-delay: -1.4s;
}

.zwc-problems-cards-top .zwc-problem-card-wrap:nth-child(3) .zwc-problem-card-border::before {
    animation-delay: -2.8s;
}

/* Card faces */
.zwc-problem-card-flip {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
}

.zwc-problem-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 89, 255, 0.08), 0 1px 2px rgba(0, 89, 255, 0.05);
    padding: var(--zwc-space-lg);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--zwc-space-md);
}

.zwc-problem-card-front {
    position: relative;
    z-index: 1;
}

.zwc-problem-card-back {
    position: absolute;
    inset: 0;
    z-index: 2;
    height: 100%;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #3A66E0 0%, #1B3FC4 100%);
    box-shadow: none;
    justify-content: center;
}

/* Pointer devices reveal on hover; touch and keyboard come through ztrans-card-open,
   so a tap that leaves the button focused can never pin the card open on its own. */
@media (hover: hover) {
    .zwc-problem-card-wrap:hover .zwc-problem-card-back {
        opacity: 1;
        transform: scale(1);
    }
}

.zwc-problem-card-wrap.ztrans-card-open .zwc-problem-card-back {
    opacity: 1;
    transform: scale(1);
}

/* Visual-only hint on scroll-in — carries no ARIA, since the user did not open it */
.zwc-problem-card-wrap.ztrans-card-teased .zwc-problem-card-back {
    opacity: 1;
    transform: scale(1);
}

.zwc-problem-card-back .zwc-problem-label {
    color: #EDF3FF;
}

.zwc-problem-card-back .zwc-problem-title,
.zwc-problem-card-back .zwc-problem-desc {
    color: #fff;
}

.zwc-problem-label {
    font-family: var(--primaryfont-bold);
    font-size: 12px;
    line-height: 1;
    color: var(--zwc-color-primary);
    text-transform: uppercase;
}

.zwc-problem-title-row {
    display: flex;
    align-items: center;
    gap: var(--zwc-space-sm);
}

.zwc-problem-icon-wrap {
    --zwc-problem-icon: clamp(24px, calc(1.2vw + 18px), 36px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--zwc-problem-icon);
    height: var(--zwc-problem-icon);
    border-radius: 8px;
    flex-shrink: 0;
}

.zwc-problem-icon {
    width: var(--zwc-problem-icon);
    height: var(--zwc-problem-icon);
    background: url("/sites/zweb/images/mail/homepage/site-sprite.svg") no-repeat;
    /* Sprite sheet is 394x36 in 36px cells */
    background-size: calc(var(--zwc-problem-icon) * 394 / 36) var(--zwc-problem-icon);
}

.zwc-problem-icon-data {
    background-position: calc(var(--zwc-problem-icon) * -95 / 36) 0;
}

.zwc-problem-icon-support {
    background-position: calc(var(--zwc-problem-icon) * -132 / 36) 0;
}

.zwc-problem-icon-cost {
    background-position: calc(var(--zwc-problem-icon) * -169 / 36) 0;
}

.zwc-problem-title {
    font-family: var(--primaryfont-semibold);
    font-size: clamp(16px, calc(1.8vw + 12px), 24px);
    line-height: 1.33;
    letter-spacing: -0.24px;
    color: #000;
    margin-block-end: 0;
}

.zwc-problem-desc {
    font-family: var(--primaryfont-regular);
    font-size: var(--zwc-fs-body);
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #000;
    margin-block-end: 0;
}


/* Trusted logos strip (rendered at the foot of the Problems section) */
.zwc-trusted-logos-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--zwc-space-md);
    padding-block-start: var(--zwc-space-3xl);
    /* Containing block for the marquee toggle only — no offsets, so nothing moves */
    position: relative;
}

.zwc-trusted-logos-label {
    font-family: var(--primaryfont-semibold);
    font-size: var(--zwc-fs-body-lg);
    line-height: 1.4;
    letter-spacing: -0.2px;
    color: #000;
    text-align: center;
}

.zwc-trusted-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--zwc-space-sm);
}

.zwc-logo-item {
    background: #f6f6f6;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 23px;
    min-height: 65px;
}

.zwc-logo-item img {
    display: block;
    max-height: 45px;
}

/* .zwe-op comes from the framework's data-onscroll pass */
.zwc-trusted-logos-block .zwc-logo-item {
    opacity: 0;
    /* transform: translateY(14px); */
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.zwc-trusted-logos-block.zwe-op .zwc-logo-item {
    opacity: 1;
    transform: none;
}

/* Sequential entry. nth-child resolves inside each cloned group, so every copy staggers alike. */
.zwc-trusted-logos-block .zwc-logo-item:nth-child(2) { transition-delay: 0.08s; }
.zwc-trusted-logos-block .zwc-logo-item:nth-child(3) { transition-delay: 0.16s; }
.zwc-trusted-logos-block .zwc-logo-item:nth-child(4) { transition-delay: 0.24s; }
.zwc-trusted-logos-block .zwc-logo-item:nth-child(5) { transition-delay: 0.32s; }
.zwc-trusted-logos-block .zwc-logo-item:nth-child(6) { transition-delay: 0.40s; }
.zwc-trusted-logos-block .zwc-logo-item:nth-child(7) { transition-delay: 0.48s; }
.zwc-trusted-logos-block .zwc-logo-item:nth-child(8) { transition-delay: 0.56s; }
.zwc-trusted-logos-block .zwc-logo-item:nth-child(9) { transition-delay: 0.64s; }
.zwc-trusted-logos-block .zwc-logo-item:nth-child(10) { transition-delay: 0.72s; }
.zwc-trusted-logos-block .zwc-logo-item:nth-child(11) { transition-delay: 0.80s; }
.zwc-trusted-logos-block .zwc-logo-item:nth-child(12) { transition-delay: 0.88s; }
.zwc-trusted-logos-block .zwc-logo-item:nth-child(13) { transition-delay: 0.96s; }
.zwc-trusted-logos-block .zwc-logo-item:nth-child(14) { transition-delay: 1.04s; }


/* .ztrans-logos-marquee and the track/group wrappers are added in custom-script.js */
.zwc-trusted-logos.ztrans-logos-marquee {
    display: block;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.zwc-trusted-logos-track {
    display: flex;
    width: max-content;
    /* animation: ztrans_logos_marquee var(--ztrans-marquee-duration, 28s) linear infinite; */
    /* will-change: transform; */
}

.zwe-om .zwc-trusted-logos-track{
    animation: ztrans_logos_marquee var(--ztrans-marquee-duration, 28s) linear infinite;
    will-change: transform;
}

.zwc-trusted-logos-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--zwc-space-sm);
    padding-inline-end: var(--zwc-space-sm);
}

.zwc-trusted-logos.ztrans-logos-marquee:hover .zwc-trusted-logos-track {
    animation-play-state: paused;
}

/* Toggled by the button below. Pauses the running animation in place — never restarts it. */
.zwc-trusted-logos.ztrans-marquee-paused .zwc-trusted-logos-track {
    animation-play-state: paused;
}

/* Appended by custom-script.js. Parked on the label's line, which is empty, so it never covers a
   logo; `top` tracks the block's own padding token so it holds that line at every breakpoint. */
.zwc-marquee-toggle {
    position: absolute;
    right: 0;
    top: calc(var(--zwc-space-3xl) - 3px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #d0d0d0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    z-index: 2;
    transition: border-color 0.2s ease;
}

.zwc-marquee-toggle:hover,
.zwc-marquee-toggle:focus-within {
    border-color: var(--zwc-color-primary);
}

.zwc-marquee-toggle:focus-visible {
    outline: 2px solid var(--zwc-color-primary);
    outline-offset: 2px;
}

.zwc-marquee-ic {
    position: relative;
    display: block;
    width: 10px;
    height: 12px;
}

/* Running: two pause bars */
.zwc-marquee-ic::before,
.zwc-marquee-ic::after {
    content: "";
    position: absolute;
    top: 0;
    width: 3px;
    height: 12px;
    background: #161619;
}

.zwc-marquee-ic::before { left: 0; }
.zwc-marquee-ic::after { right: 0; }

/* Paused: one play triangle, mirrored automatically in RTL by the logical borders */
.zwc-marquee-toggle[aria-pressed="true"] .zwc-marquee-ic::after {
    display: none;
}

.zwc-marquee-toggle[aria-pressed="true"] .zwc-marquee-ic::before {
    left: 1px;
    width: 0;
    height: 0;
    background: none;
    border-block: 6px solid transparent;
    border-inline-start: 10px solid #161619;
}

@keyframes ztrans_logos_marquee {
    to {
        transform: translateX(-50%);
    }
}

/* =========================
   Trusted
   ========================= */
.zwc-trusted-section {
    position: relative;
    z-index: 1;
}

.zwc-trusted-section-inner {
    background: var(--zwc-grad-section);
    max-width: 95%;
    margin-inline: auto;
    border-radius: 16px;
    width: 95%;
}

.zwc-trusted-content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--zwc-space-md);
    margin-inline: auto;
}

/* Stats and badges */
.zwc-trusted-stats {
    display: flex;
    align-items: center;
    gap: var(--zwc-space-3xl);
}

.zwc-trusted-stats-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--zwc-space-sm);
}

.zwc-trusted-heading {
    font-family: var(--primaryfont-semibold);
    font-size: var(--zwc-fs-h2);
    line-height: 1.17;
    letter-spacing: -1.44px;
    color: #161619;
    margin-block-end: 0;
}

.zwc-trusted-desc {
    font-family: var(--primaryfont-regular);
    font-size: var(--zwc-fs-body);
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: #5a5a5a;
}

.zwc-trusted-stories-link {
    font-family: var(--zf-secondary-medium);
    font-size: var(--zwc-fs-body);
    line-height: 1.6;
    color: var(--zwc-color-primary);
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    min-height: 24px;
    text-decoration: none;
    position: relative;
    transition: color 0.25s ease;
}

/* same reason as .zwc-testimonial-source::after — an inline-flex box skips the gap and the <svg> */
.zwc-trusted-stories-link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 2px;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.zwc-trusted-stories-link:hover::after,
.zwc-trusted-stories-link:focus-visible::after {
    opacity: 1;
}

.zwc-trusted-stories-link:focus-visible {
    outline: 2px solid var(--zwc-color-primary);
    outline-offset: 3px;
    border-radius: 2px;
}

.zwc-trusted-stories-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.zwc-trusted-stories-link:hover .zwc-trusted-stories-icon {
    transform: translateX(3px);
}

.zwc-trusted-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zwc-space-xs);
    max-width: 534px;
    align-content: center;
}

.zwc-badge-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--zwc-space-sm);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
}

.zwc-badge-info {
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    /* Pulls back most of the flex gap — the glyph reads as part of the label, not a third item */
    margin-inline-start: -6px;
    /* color: #6B7688; */
    transition: color 0.2s ease;
}

.zwc-badge-info svg {
    display: block;
    width: 100%;
    height: 100%;
}

.zwc-badge-item:hover .zwc-badge-info,
.zwc-badge-item:focus-visible .zwc-badge-info,
.zwc-badge-item:focus-within .zwc-badge-info {
    color: var(--zwc-color-primary);
}

.zwc-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--zwc-color-primary);
    border-radius: 8px;
    flex-shrink: 0;
}

.zwc-badge-ic {
    width: 18px;
    height: 18px;
    background: url("/sites/zweb/images/mail/homepage/site-sprite.svg") no-repeat;
    background-size: 394px 36px;
}

.zwc-badge-ic-uptime { background-position: 0 -9px; }
.zwc-badge-ic-residency { background-position: -19px -9px; }
.zwc-badge-ic-limits { background-position: -38px -9px; }
.zwc-badge-ic-official { background-position: -57px -9px; }
.zwc-badge-ic-award { background-position: -76px -9px; }

.zwc-badge-text {
    font-family: var(--zf-secondary-medium);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: #1e2939;
    white-space: nowrap;
}

.zwc-badge-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    max-width: min(260px, calc(100vw - 32px));
    width: max-content;
    padding: 8px 12px;
    border-radius: 8px;
    background: #1e2939;
    font-family: var(--primaryfont-semibold);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: -0.13px;
    color: #fff;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    /* Hidden so it is announced once, via the badge's aria-describedby, rather than twice */
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 5;
}

.zwc-badge-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #1e2939;
    transform: translateX(-50%);
}

/* :focus-visible so a mouse click does not leave a tooltip stuck open */
.zwc-badge-item:hover .zwc-badge-tooltip,
.zwc-badge-item:focus-visible .zwc-badge-tooltip,
.zwc-badge-item:focus-within .zwc-badge-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    /* WCAG 1.4.13 hoverable: a descendant, so resting on it keeps the badge's :hover */
    pointer-events: auto;
}

.zwc-badge-item:focus-visible {
    outline: 2px solid var(--zwc-color-primary);
    outline-offset: 2px;
}

/* Bridges the 10px gap so the pointer reaches the tooltip without leaving the badge */
.zwc-badge-tooltip::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
}

/* WCAG 1.4.13 dismissible: these overlap neighbouring labels, so Esc must hide them.
   Toggled from custom-script.js. Must follow the :hover rule. */
.zwc-trusted-badges.ztrans-tooltips-dismissed .zwc-badge-tooltip {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Testimonials */
.zwc-testimonials {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.zwc-testimonials-track {
    width: 100%;
}

/* Pre-Slick fallback so the layout does not jump when Slick initialises */
.zwc-testimonials-track:not(.slick-initialized) {
    display: flex;
    margin-block-start: var(--zwc-space-xl);
    margin-inline: calc(var(--zwc-space-md) / -2);
}

.zwc-testimonials-track:not(.slick-initialized) .zwc-testimonial-card:not(:nth-child(1)):not(:nth-child(2)):not(:last-child) {
    display: none;
}

.zwc-testimonials-track:not(.slick-initialized) .zwc-testimonial-card:last-child { order: 0; }
.zwc-testimonials-track:not(.slick-initialized) .zwc-testimonial-card:nth-child(1) { order: 1; }
.zwc-testimonials-track:not(.slick-initialized) .zwc-testimonial-card:nth-child(2) { order: 2; }

.zwc-testimonials-track .slick-list {
    margin: 0 calc(var(--zwc-space-md) / -2);
}

.zwc-testimonials-track .slick-slide {
    height: inherit;
    padding: 65px calc(var(--zwc-space-md) / 2);
}

.zwc-testimonials-track .slick-slide > * {
    height: 100%;
}

/* Slick makes slides focusable. The slide is as tall as .slick-list, whose overflow:hidden clips
   the ring into two vertical lines, so draw it on the card instead — 58px inside the slide. */
.zwc-testimonials-track .slick-slide:focus-visible {
    outline: none;
}

.zwc-testimonials-track .slick-slide:focus-visible .zwc-testimonial-card-inner {
    outline: 2px solid var(--zwc-color-primary);
    outline-offset: 2px;
}

.zwc-testimonials-track .slick-track {
    display: flex;
}

.zwc-testimonials-track .slick-track::before,
.zwc-testimonials-track .slick-track::after {
    display: none;
}

.zwc-testimonial-card {
    height: 100%;
    box-sizing: border-box;
    display: flex;
}

.zwc-testimonials-track:not(.slick-initialized) .zwc-testimonial-card {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    min-width: 0;
    padding: 65px calc(var(--zwc-space-md) / 2);
}

.zwc-testimonial-card-inner {
    background: #fff;
    background-position: center 120px;
    border-radius: 24px;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);
    padding: var(--zwc-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--zwc-space-md);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.3s linear, box-shadow 0.3s linear, background-position .65s linear;
}

.zwc-testimonials-track .slick-center .zwc-testimonial-card-inner,
.zwc-testimonials-track .slick-current .zwc-testimonial-card-inner,
.zwc-testimonials-track:not(.slick-initialized) .zwc-testimonial-card:nth-child(1) .zwc-testimonial-card-inner {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center 40px;
    background-size: cover;
    border-color: rgba(0, 89, 255, 0.18);
    box-shadow: 0 18px 40px rgba(33, 107, 255, 0.32);
    transform: scale(1.04);
}

/* Deferred: a CSS background loads on the first style pass regardless of viewport, and this is
   146KB. .data-loaded is the framework's imgLazy pass, two viewports ahead. Gated on the wrapper
   because the target follows Slick's .slick-current. Must follow the shorthand above. */
.zwc-testimonials.data-loaded .zwc-testimonials-track .slick-center .zwc-testimonial-card-inner,
.zwc-testimonials.data-loaded .zwc-testimonials-track .slick-current .zwc-testimonial-card-inner,
.zwc-testimonials.data-loaded .zwc-testimonials-track:not(.slick-initialized) .zwc-testimonial-card:nth-child(1) .zwc-testimonial-card-inner {
    background-image: url('/sites/zweb/images/mail/homepage/testimonial-active-bg.svg');
}

.zwc-testimonials-track:not(.slick-initialized) .zwc-testimonial-card-inner {
    min-height: 350px;
}

/* flex:1 sits here, not on the quote: the quote absorbing card slack is what opened the gap below it */
.zwc-testimonial-body {
    display: flex;
    flex-direction: column;
    gap: var(--zwc-space-xs);
    flex: 1 0 auto;
}

.zwc-testimonial-quote {
    font-family: var(--zf-secondary-medium);
    font-size: var(--zwc-fs-body);
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: #3b3b3b;
    margin: 0;
}

/* align-self keeps the hit area on the text, not the full column width the flex parent would stretch it to */
.zwc-testimonial-source {
    font-family: var(--zf-secondary-medium);
    font-size: 15px;
    line-height: 1.6;
    color: var(--zwc-color-primary);
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    min-height: 24px;
    text-decoration: none;
    position: relative;
    transition: color 0.25s ease, opacity 0.25s ease;
}

/* text-decoration on an inline-flex box underlines only the text item, skipping the gap and the
   replaced <svg>, so the rule is drawn as one box spanning label + icon instead */
.zwc-testimonial-source::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 4px;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.zwc-testimonial-source:hover::after,
.zwc-testimonial-source:focus-visible::after {
    opacity: 1;
}

.zwc-testimonial-source:focus-visible {
    outline: 2px solid var(--zwc-color-primary);
    outline-offset: 3px;
    border-radius: 2px;
}

.zwc-testimonial-source-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.zwc-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--zwc-space-sm);
}

.zwc-testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.zwc-testimonial-info {
    display: flex;
    flex-direction: column;
}

.zwc-testimonial-name {
    font-family: var(--primaryfont-semibold);
    font-size: 16px;
    line-height: 1.5;
    color: #000;
}

.zwc-testimonial-role {
    font-family: var(--primaryfont-regular);
    font-size: 14px;
    line-height: 1.5;
}

.zwc-testimonials-nav {
    display: none;
    gap: var(--zwc-space-md);
    justify-content: flex-end;
    margin-block-start: -20px;
    position: relative;
    z-index: 1;
}

.slick-slider + .zwc-testimonials-nav {
    display: flex;
}

.zwc-testimonial-prev,
.zwc-testimonial-next {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #d0d0d0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.zwc-testimonial-prev img,
.zwc-testimonial-next img {
    pointer-events: none;
}

.zwc-testimonial-prev:hover,
.zwc-testimonial-next:hover,
.zwc-testimonial-prev:focus-within,
.zwc-testimonial-next:focus-within {
    border-color: var(--zwc-color-primary);
}

.zwc-testimonial-prev img {
    transform: rotate(180deg);
}

/* Compliance badges */
.zwc-compliance-block {
    display: flex;
    flex-direction: row;
    gap: var(--zwc-space-lg);
    margin-block-start: var(--zwc-space-xl);
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    width: 100%;
}

/* .zwe-op comes from the framework's data-onscroll pass. The children carry the transition, not
   the card, so nothing double-fades. */
.zwc-compliance-block .zwc-compliance-badges > li {
    opacity: 0;
    /* visibility: hidden; */
    /* transform: scale(.85); */
    transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

.zwc-compliance-block.zwe-op .zwc-compliance-badges > li {
    opacity: 1;
    /* visibility: visible; */
    /* transform: scale(1); */
}

/* 0.06s apart — shorter than the fade, so items overlap into one wave */
.zwc-compliance-block .zwc-compliance-badges > li:nth-child(1) { transition-delay: 0.08s; }
.zwc-compliance-block .zwc-compliance-badges > li:nth-child(2) { transition-delay: 0.16s; }
.zwc-compliance-block .zwc-compliance-badges > li:nth-child(3) { transition-delay: 0.24s; }
.zwc-compliance-block .zwc-compliance-badges > li:nth-child(4) { transition-delay: 0.32s; }
.zwc-compliance-block .zwc-compliance-badges > li:nth-child(5) { transition-delay: 0.40s; }
.zwc-compliance-block .zwc-compliance-badges > li:nth-child(6) { transition-delay: 0.48s; }
.zwc-compliance-block .zwc-compliance-badges > li:nth-child(7) { transition-delay: 0.56s; }
.zwc-compliance-block .zwc-compliance-badges > li:nth-child(8) { transition-delay: 0.64s; }
.zwc-compliance-block .zwc-compliance-badges > li:nth-child(9) { transition-delay: 0.72s; }
.zwc-compliance-block .zwc-compliance-badges > li:nth-child(10) { transition-delay: 0.80s; }
.zwc-compliance-block .zwc-compliance-badges > li:nth-child(11) { transition-delay: 0.88s; }
.zwc-compliance-block .zwc-compliance-badges > li:nth-child(12) { transition-delay: 0.96s; }
.zwc-compliance-block .zwc-compliance-badges > li:nth-child(13) { transition-delay: 1.04s; }


.zwc-compliance-intro {
    display: flex;
    flex-direction: column;
    gap: var(--zwc-space-xs);
    max-width: 640px;
    text-align: left;
}

.zwc-compliance-eyebrow {
    color: var(--zwc-color-primary);
    font-family: var(--primaryfont-semibold);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
}

.zwc-compliance-heading {
    font-family: var(--primaryfont-semibold);
    font-size: var(--zwc-fs-h3);
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: #161619;
    margin: 0;
}

.zwc-compliance-desc {
    font-family: var(--primaryfont-regular);
    font-size: var(--zwc-fs-body);
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: #5a5a5a;
}

.zwc-compliance-badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--zwc-space-sm);
}

.zwc-compliance-badges > li > .zwc-badge-ic-label {
    display: block;
    width: 100%;
    height: 100%;
}

.zwc-compliance-badges [class^="zsb-iso-"] {
    display: inline-block;
    width: 130px;
    height: 66px;
    /* Longhands: the image itself is attached on reveal below */
    background-position: 0 0;
    background-size: 936px auto;
    background-repeat: no-repeat;
}

.zwc-compliance-badges .zsb-iso-soc2,
.zwc-compliance-badges .zsb-iso-hippa,
.zwc-compliance-badges .zsb-iso-gdpr {
    background-size: 702px auto;
}

.zwc-compliance-badges .zsb-iso-ism { background-position: 1px 0; }
.zwc-compliance-badges .zsb-iso-pim { background-position: -129px 0; }
.zwc-compliance-badges .zsb-iso-csm { background-position: -258px 0; }
.zwc-compliance-badges .zsb-iso-pdc { background-position: -389px 0; }
.zwc-compliance-badges .zsb-iso-qms { background-position: -518px 0; }
.zwc-compliance-badges .zsb-iso-bcm { background-position: -503px -199px; }
.zwc-compliance-badges .zsb-iso-soc2 { background-position: -487px 0; width: 72px; height: 72px; }
.zwc-compliance-badges .zsb-iso-hippa { background-position: 0 -71px; width: 81px; height: 69px; }
.zwc-compliance-badges .zsb-iso-gdpr { background-position: -285px -71px; width: 72px; height: 72px; }
.zwc-compliance-badges .zsb-iso-ens-spain { background-position: -380px -210px; width: 121px; height: 55px;}

.zwc-compliance-badges .zwc-badge-vb-spam {
    display: inline-block;
    width: 52px;
    height: 78px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.zwc-compliance-badges .zwc-badge-se-labs {
    display: inline-block;
    width: 76px;
    height: 78px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.zwc-compliance-badges .zwc-badge-ncs-sa {
    display: inline-block;
    width: 70px;
    height: 75px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.zwc-compliance-block.data-loaded .zwc-compliance-badges [class^="zsb-iso-"] {
    background-image: var(--compliance-badges);
}

.zwc-compliance-block.data-loaded .zwc-compliance-badges .zwc-badge-vb-spam {
    background-image: url("/sites/zweb/images/otherbrandlogos/virus-btn-verified-spam.png");
}

.zwc-compliance-block.data-loaded .zwc-compliance-badges .zwc-badge-se-labs {
    background-image: url("/sites/zweb/images/otherbrandlogos/se-labs-awards-enterprise-email-security-services-winner-2026.png");
}

.zwc-compliance-block.data-loaded .zwc-compliance-badges .zwc-badge-ncs-sa {
    background-image: url("/sites/zweb/images/otherbrandlogos/national-cybersecurity-authority.png");
}

/* =========================
   Features
   ========================= */
.zwc-features-section {
    background: #fff;
}

.zwc-features-content-box {
    background: transparent;
    border-radius: 32px;
    max-width: 1472px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--zwc-space-2xl);
}

.zwc-features-heading {
    font-family: var(--primaryfont-semibold);
    font-size: var(--zwc-fs-h2);
    line-height: 1.17;
    letter-spacing: -1.44px;
    color: #161619;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.zwc-features-heading span {
    display: block;
    font-size: 0.825em;
}

.zwc-features-heading span > span {
    display: inline;
}

.zwc-features-heading .zwc-features-heart {
    display: inline-block;
    transform-origin: center;
    animation: ztrans_heartbeat 3s ease-in-out infinite;
    vertical-align: -8px;
}

.zwc-features-heading .zwc-features-heart img {
    display: block;
    width: clamp(22px, calc(2vw + 16px), 45px);
    height: clamp(22px, calc(2vw + 16px), 45px);
}

@keyframes ztrans_heartbeat {
    0%, 100% { transform: scale(.85); }
    50% { transform: scale(1); }
}

/* Features grid */
.zwc-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, minmax(260px, auto)) auto;
    grid-template-areas:
        "custom     encryption"
        "custom     admin"
        "offline    admin"
        "award      retention"
        "ai         ai";
    gap: var(--zwc-space-md);
}

.zwc-feature-card-custom { grid-area: custom; }
.zwc-feature-card-encryption { grid-area: encryption; }
.zwc-feature-card-admin { grid-area: admin; }
.zwc-feature-card-offline { grid-area: offline; }
.zwc-feature-card-award { grid-area: award; }
.zwc-feature-card-retention { grid-area: retention; }

.zwc-feature-card {
    --zwc-feature-hover-scale: 1.012;
    --zwc-feature-art-scale: 1.04;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 89, 255, 0.08), 0 1px 2px rgba(0, 89, 255, 0.05);
    background: #F3F7FF url("/sites/zweb/images/mail/homepage/feature-card-bg.svg") center / cover no-repeat;
    position: relative;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.zwc-feature-card-img img,
.zwc-feature-card-icon img {
    transition: transform 0.45s ease;
}

.zwc-feature-card-img img {
    transform-origin: bottom center;
}

@media (hover: hover) {
    .zwc-feature-card:hover {
        z-index: 1;
        transform: scale(var(--zwc-feature-hover-scale));
        box-shadow: 0 12px 34px rgba(0, 89, 255, 0.14), 0 2px 6px rgba(0, 89, 255, 0.06);
    }

    .zwc-feature-card:hover .zwc-feature-card-img img,
    .zwc-feature-card:hover .zwc-feature-card-icon img {
        transform: scale(var(--zwc-feature-art-scale));
    }

}

.zwc-feature-link {
    position: absolute;
    inset-block-start: clamp(14px, calc(0.7vw + 12px), 20px);
    inset-inline-end: clamp(14px, calc(0.7vw + 12px), 20px);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid var(--zwc-color-primary);
    color: var(--zwc-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.zwc-feature-link::after {
    content: "";
    position: absolute;
    inset: -100vmax;
}


.zwc-feature-link:hover {
    background-color: var(--zwc-color-primary);
    color: #fff;
    transform: scale(1.08);
}

.zwc-feature-link:focus-visible {
    outline: 2px solid var(--zwc-color-primary);
    outline-offset: 3px;
}

.zwc-feature-link-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* the gradient cards carry white copy, so the ring inverts to match */
.zwc-feature-card-large .zwc-feature-link,
.zwc-feature-card-ai .zwc-feature-link {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

.zwc-feature-card-large .zwc-feature-link:hover,
.zwc-feature-card-ai .zwc-feature-link:hover {
    background-color: #fff;
    color: var(--zwc-color-primary);
}

.zwc-feature-card-large .zwc-feature-link:focus-visible,
.zwc-feature-card-ai .zwc-feature-link:focus-visible {
    outline-color: #fff;
}

.zwc-feature-card-large {
    display: flex;
    flex-direction: column;
    gap: var(--zwc-space-lg);
    padding: var(--zwc-space-xl);
    padding-inline-end: 0;
    padding-block-end: 0;
    min-height: 566px;
    background: radial-gradient(135% 125% at 20% 2%, #1065ED 0%, #3A82EA 40%, #8AA8F4 60%, #B6C5F9 83%, #747EFF 100%);
}

.zwc-feature-card-large .zwc-feature-title,
.zwc-feature-card-large .zwc-feature-desc {
    color: #fff;
}

.zwc-feature-card-large .zwc-feature-card-text {
    max-width: 460px;
    padding-inline-end: var(--zwc-space-xl);
}

.zwc-feature-card-large .zwc-feature-card-img {
    margin-block-start: auto;
    text-align: left;
}

.zwc-feature-card-large .zwc-feature-card-img img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline-start: auto;
    position: relative;
    bottom: -3px;
}

.zwc-feature-card-small {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--zwc-space-lg);
    padding: var(--zwc-space-lg);
    padding-inline-end: var(--zwc-space-xl);
    min-height: 260px;
}

.zwc-feature-card-icon {
    --zwc-feature-icon: clamp(100px, calc(5.08vw + 56.9px), 130px);
    flex-shrink: 0;
    width: var(--zwc-feature-icon);
    height: var(--zwc-feature-icon);
}

.zwc-feature-card-medium .zwc-feature-card-icon {
    width: 40%;
    height: auto;
}

.zwc-feature-card-icon img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.zwc-feature-card-encryption .zwc-feature-card-icon {
    height: calc(var(--zwc-feature-icon) * 170 / 130);
}

.zwc-encrypt-bars {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zwc-encrypt-bar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Clamps the image box to the icon wrapper; without it the box overflows by up to 48px */
.zwc-encrypt-bar-1 {
    max-height: 100%;
}

.zwc-feature-card-text {
    display: flex;
    flex-direction: column;
    gap: var(--zwc-space-sm);
}

.zwc-feature-title {
    font-family: var(--primaryfont-semibold);
    font-size: var(--zwc-fs-h3);
    line-height: 1.25;
    letter-spacing: -0.96px;
    color: #000000;
    margin-block-end: 0;
}

.zwc-feature-title span {
    display: block;
}

.zwc-feature-desc {
    font-family: var(--zf-secondary-medium);
    font-size: var(--zwc-fs-body);
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: #3b3b3b;
}

.zwc-feature-card-ai {
    grid-area: ai;
    background-image: url("/sites/zweb/images/mail/homepage/feature-card-ai-bg.svg");
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--zwc-space-lg);
    padding-block-start: var(--zwc-space-2xl);
    padding-inline-start: var(--zwc-space-xl);
    min-height: 310px;
}

/* Own layer so it fades independently; z-index keeps it above the gradient, below the copy */
.zwc-feature-card-ai::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/sites/zweb/images/mail/homepage/feature-card-ai-bg-element.png") no-repeat 36% 35% / 155px auto;
    opacity: .5;
}

.zwc-features-grid .zwc-feature-card-ai.zwe-op::before {
    transform-origin: calc(36% + 21.7px) calc(35% + 23.9px);
    will-change: transform;
    animation: ztrans_ai_bg_pulse 6s ease-in-out infinite both;
}

@keyframes ztrans_ai_bg_pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.9); }
}

.zwc-feature-card-ai .zwc-feature-card-text {
    flex: 35 1 0;
    padding-inline-start: 50px;
    /* padding-block-start: 20px; */
    padding-inline-end: var(--zwc-space-xl);
}

.zwc-feature-card-ai .zwc-feature-card-text .zwc-feature-title {
    max-width: 300px;
}

.zwc-feature-card-ai .zwc-feature-card-text .zwc-feature-desc {
    max-width: 290px;
}

.zwc-feature-card-ai .zwc-feature-title,
.zwc-feature-card-ai .zwc-feature-desc {
    color: #fff;
}

.zwc-feature-card-ai .zwc-feature-card-img {
    flex: 65 1 0;
    min-width: 0;
    align-self: flex-end;
}

.zwc-feature-card-ai .zwc-feature-card-img img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline-start: auto;
    position: relative;
    right: -2px;
    bottom: -2px;
}

/* Card art reveal — .zwe-op is added by the framework on scroll-into-view */
.zwc-features-grid .zwc-feature-card .zwc-feature-card-icon {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(3px);
    transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
                transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
                filter 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

.zwc-features-grid .zwc-feature-card .zwc-feature-card-img {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
                transform 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.zwc-features-grid .zwc-feature-card-admin .zwc-feature-card-img {
    transform: translateY(80px);
}

.zwc-features-grid .zwc-feature-card-ai .zwc-feature-card-img {
    transform: translateY(40px);
}

.zwc-features-grid .zwc-feature-card.zwe-op .zwc-feature-card-img {
    opacity: 1;
    transform: none;
}

.zwc-features-grid .zwc-feature-card.zwe-op .zwc-feature-card-icon {
    opacity: 1;
    transform: none;
    filter: none;
}

/* =========================
   Migration
   ========================= */
.zwc-migration-section {
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-height: 250vh;
    padding-block-start: 100px;
    padding-block-end: clamp(0.5px, calc(942px - 85vh), 120px);
}

.zwc-migration-section::before {
    content: "";
    display: block;
    position: sticky;
    top: 0;
    z-index: -1;
    height: 100vh;
    /* pulled up over the section's 100px top padding, then handed back below so net flow stays 0 */
    margin-block-start: -100px;
    margin-block-end: calc(100px - 100vh);
    background: radial-gradient(102.12% 102.12% at 50% 14.91%, #F3F9FF 50%, #dbecfd 70%, #7DBAFF 110%);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

.zwc-migration-section > .content-wrap {
    position: sticky;
    top: 110px;
    min-height: 85vh;
    display: flex;
    align-items: center;
}

.zwc-migration-content-box {
    --zwc-tall-air: clamp(0.5px, calc(10.15vh - 98px), 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--zwc-space-2xl) + var(--zwc-tall-air) * 1.5);
    max-width: 100%;
    width: 100%;
    margin-inline: auto;
    align-self: flex-start;
}

.zwc-migration-heading {
    font-family: var(--primaryfont-semibold);
    font-size: var(--zwc-fs-h2);
    line-height: 1.17;
    letter-spacing: -1.44px;
    color: #161619;
    text-align: center;
}

.zwc-migration-steps-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--zwc-space-xl) + var(--zwc-tall-air, 0px));
    width: 100%;
}

.zwc-migration-steps {
    display: flex;
    gap: var(--zwc-space-3xl);
    width: 100%;
    position: relative;
}

.zwc-migration-progress {
    position: absolute;
    top: 24px;
    left: 14.6667%;
    right: 14.6667%;
    height: 2px;
    background: #CACACA;
    border-radius: 999px;
    overflow: hidden;
    z-index: 0;
}

.zwc-migration-progress-fill {
    display: block;
    width: var(--ztrans-migration-fill, 0%);
    height: 100%;
    background: var(--zwc-grad-primary);
    border-radius: 999px;
}

.zwc-migration-step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

.zwc-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 5px;
    background: #fff;
    font-family: var(--primaryfont-semibold);
    font-size: 20px;
    line-height: 1;
    color: #595959;
    transition: background 0.4s ease, color 0.4s ease;
}

.zwc-step-active .zwc-step-number,
.zwc-step-number-active {
    background-color: var(--zwc-color-primary);
    color: #fff;
}

.zwc-step-title {
    font-family: var(--primaryfont-semibold);
    font-size: var(--zwc-fs-h3);
    line-height: 1.25;
    letter-spacing: -0.96px;
    color: #686868;
    transition: color 0.4s ease;
    margin: 40px 0 20px;
}

.zwc-step-active .zwc-step-title {
    color: var(--zwc-color-primary);
}

.zwc-step-desc {
    font-family: var(--primaryfont-regular);
    font-size: var(--zwc-fs-body);
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #3c3c3c;
    max-width: 280px;
}

.zwc-migration-step:last-child .zwc-step-desc {
    max-width: 336px;
}

/* Migration handbook */
.zwc-migration-handbook {
    display: flex;
    gap: var(--zwc-space-lg);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 89, 255, 0.08);
    padding: var(--zwc-space-md);
    max-width: 800px;
}

.zwc-handbook-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--zwc-space-sm);
    padding: var(--zwc-space-sm);
    padding-right: 0;
}

.zwc-handbook-title {
    font-family: var(--primaryfont-semibold);
    font-size: var(--zwc-fs-h3);
    line-height: 1.25;
    letter-spacing: -0.96px;
    color: #000000;
    margin-block-end: 0;
}

.zwc-handbook-desc {
    font-family: var(--primaryfont-regular);
    font-size: var(--zwc-fs-body);
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #000;
    max-width: 328px;
}

.zwc-handbook-banner {
    flex: 1;
    min-width: 0;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
    align-self: center;
}

.zwc-handbook-banner:before {
    content: "";
    display: flex;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    position: absolute;
    top: 0;
    left: 0;
}

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

.zwc-handbook-btn {
    position: absolute;
    right: 15px;
    bottom: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zwc-space-xs);
    background: #000;
    border: 1px solid #fff;
    border-radius: 86px;
    padding: 7px 15px;
    font-family: var(--zf-primary-medium);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.31px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 20px 12.5px rgba(49, 44, 133, 0.3), 0 8px 5px rgba(49, 44, 133, 0.3);
    transition: opacity 0.2s;
    white-space: nowrap;
}

.zwc-handbook-btn:hover,
.zwc-handbook-btn:focus-within {
    opacity: 0.9;
}

.zwc-handbook-dl-ic {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: url("/sites/zweb/images/mail/homepage/site-sprite.svg") no-repeat;
    background-size: 343px 36px;
    background-position: -181px -10px;
}

/* =========================
   Benefits
   ========================= */
.zwc-benefits-section {
    z-index: -1;
    margin-block-start: var(--zwc-space-3xl);
}

.zwc-benefits-section-inner {
    background: #f6f6f6;
    max-width: 95%;
    margin-inline: auto;
    border-radius: 16px;
    width: 95%;
}

.zwc-benefits-content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--zwc-space-xl);
    max-width: 1229px;
    margin-inline: auto;
}

.zwc-benefits-heading {
    text-align: center;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.zwc-benefits-label {
    font-family: var(--primaryfont-semibold);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
}

.zwc-benefits-title {
    font-family: var(--primaryfont-semibold);
    font-size: var(--zwc-fs-h2);
    line-height: 1.17;
    letter-spacing: -1.44px;
    color: #161619;
}

.zwc-benefits-comparison {
    display: flex;
    gap: var(--zwc-space-md);
    width: 100%;
    margin-block-end: var(--zwc-space-3xl);
    overflow: hidden;
    max-width:1160px;
}

.zwc-benefits-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--zwc-space-sm);
}

.zwc-benefits-col-header {
    display: flex;
    align-items: center;
    gap: var(--zwc-space-sm);
    padding-inline-start: var(--zwc-space-md);
    justify-content: center;
    height: 60px;
    border-radius: 10px;
}

.zwc-benefits-header-orange {
    background: var(--zwc-grad-primary);
}

.zwc-benefits-header-black {
    background: #292929;
}

.zwc-benefits-header-text {
    font-family: var(--primaryfont-semibold);
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.2px;
    color: #fff;
}

.zwc-benefits-item {
    display: flex;
    align-items: center;
    gap: var(--zwc-space-sm);
    padding: var(--zwc-space-xs) var(--zwc-space-xs);
    border-radius: 16px;
    min-height: 60px;
}

.zwc-benefits-item-orange {
    background: var(--zwc-bg-mid);
}

.zwc-benefits-item-white {
    background: #ffffff;
}

.zwc-benefits-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 8px;
    flex-shrink: 0;
}

.zwc-benefits-item-white .zwc-benefits-item-icon{
    background: #f4f4f4;
}

.zwc-benefits-item p {
    font-family: var(--primaryfont-regular);
    font-size: var(--zwc-fs-body-md);
    line-height: 1.4;
    color: #1e2939;
    margin: 0;
}

.zwc-benefit-ic {
    width: 20px;
    height: 20px;
    background: url("/sites/zweb/images/mail/homepage/site-sprite.svg") no-repeat;
    background-size: 394px 36px;
}

.zwc-benefit-ic-cost { background-position: -336px -8px; }
.zwc-benefit-ic-residency { background-position: -315px -8px; }
.zwc-benefit-ic-reinvest { background-position: -294px -8px; }
.zwc-benefit-ic-support { background-position: -273px -8px; }
.zwc-benefit-ic-privacy { background-position: -252px -8px; }
.zwc-benefit-ic-limits { background-position: -229px -8px; }
.zwc-benefit-ic-cross { background-position: -357px -8px; transform: scale(.7);}

.zwc-benefits-col .zwc-benefits-item-icon {
    opacity: 0;
    transform: scale(0.7);
    filter: blur(3px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.zwc-benefits-col .zwc-benefits-item:nth-child(2) .zwc-benefits-item-icon,
.zwc-benefits-col .zwc-benefits-item:nth-child(2) p { transition-delay: 0.18s; }
.zwc-benefits-col .zwc-benefits-item:nth-child(3) .zwc-benefits-item-icon,
.zwc-benefits-col .zwc-benefits-item:nth-child(3) p { transition-delay: 0.34s; }
.zwc-benefits-col .zwc-benefits-item:nth-child(4) .zwc-benefits-item-icon,
.zwc-benefits-col .zwc-benefits-item:nth-child(4) p { transition-delay: 0.5s; }
.zwc-benefits-col .zwc-benefits-item:nth-child(5) .zwc-benefits-item-icon,
.zwc-benefits-col .zwc-benefits-item:nth-child(5) p { transition-delay: 0.66s; }
.zwc-benefits-col .zwc-benefits-item:nth-child(6) .zwc-benefits-item-icon,
.zwc-benefits-col .zwc-benefits-item:nth-child(6) p { transition-delay: 0.82s; }
.zwc-benefits-col .zwc-benefits-item:nth-child(7) .zwc-benefits-item-icon,
.zwc-benefits-col .zwc-benefits-item:nth-child(7) p { transition-delay: 0.98s; }

.zwc-benefits-col.zwe-op .zwc-benefits-item-icon {
    opacity: 1;
    transform: none;
    filter: none;
}

/* =========================
   CTA
   ========================= */
.zwc-cta-section {
    background: var(--zwc-grad-section);
}

.zwc-cta-section .mailcover-top-shape {
    border-color: #f4f9ff;
    filter: drop-shadow(0 -30px 18px rgba(8, 102, 254, 0.1));
}

.zwc-cta-section .mailcover-top-shape::before {
    background: #f4f9ff;
    bottom: 94px;
}

.zwc-cta-content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--zwc-space-lg);
    max-width: 811px;
    margin-inline: auto;
}

.zwc-cta-heading {
    font-family: var(--primaryfont-semibold);
    font-size: var(--zwc-fs-h2);
    line-height: 1.17;
    letter-spacing: -1.44px;
    color: #161619;
    margin-block-end: 0;
}

.zwc-cta-heading .zwc-gradient-text {
    display: block;
}

.zwc-cta-desc {
    font-family: var(--primaryfont-regular);
    font-size: var(--zwc-fs-body);
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: #5a5a5a;
    max-width: 555px;
}

.zwc-cta-buttons {
    display: flex;
    gap: var(--zwc-space-md);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

/* =========================
   FAQ
   ========================= */
.zwc-faq-section {
    position: relative;
    z-index: 1;
    background: #fff;
}

.zwc-faq-content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--zwc-space-xl);
    max-width: 896px;
    margin-inline: auto;
}

.zwc-faq-heading {
    font-family: var(--primaryfont-semibold);
    font-size: var(--zwc-fs-h2);
    line-height: 1.17;
    letter-spacing: -1.44px;
    color: #161619;
    text-align: center;
    margin-block-end: 0;
}

.zwc-faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--zwc-space-xs);
    width: 100%;
}

.zwc-faq-item {
    background: #f9f9f9;
    border-radius: 16px;
    overflow: hidden;
    transition: background-color 0.28s ease;
}

.zwc-faq-item-open {
    background: var(--zwc-bg-soft);
}

.zwc-faq-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: none;
    padding-block: var(--zwc-space-md);
    padding-inline-start: var(--zwc-space-lg);
    padding-inline-end: var(--zwc-space-md);
    cursor: pointer;
    text-align: left;
    gap: 18px;
    transition: padding 0.28s ease;
}

.zwc-faq-trigger:focus-visible {
    outline: 2px solid var(--zwc-color-primary);
    outline-offset: -2px;
    border-radius: inherit;
}

.zwc-faq-question {
    font-family: var(--primaryfont-semibold);
    font-size: var(--zwc-fs-body-lg);
    line-height: 1.4;
    letter-spacing: -0.2px;
    color: #262626;
    transition: font-size 0.28s ease, line-height 0.28s ease, color 0.28s ease;
}

.zwc-faq-item-open .zwc-faq-question {
    background: var(--zwc-grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.zwc-faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--primaryfont-regular);
    font-size: 27px;
    line-height: 1;
    color: #000;
    width: 32px;
    height: 32px;
}

.zwc-faq-icon::after {
    content: "+";
}

.zwc-faq-item-open .zwc-faq-icon::after {
    content: "\2212";
}

.zwc-faq-answer {
    padding-inline: var(--zwc-space-lg);
    padding-block-end: var(--zwc-space-md);
}

.zwc-faq-answer p {
    font-family: var(--primaryfont-regular);
    font-size: var(--zwc-fs-body);
    line-height: 1.75;
    letter-spacing: -0.32px;
    color: #000;
}

/* =========================
   Responsive
   ========================= */
/* Block order below is load-bearing: these rules share specificity */

/* Reduced motion — must stay first: the width blocks below intentionally still win */
@media (prefers-reduced-motion: reduce) {
    .zwc-problem-card-wrap:hover .zwc-problem-card-border::before,
    .zwc-problem-card-wrap.ztrans-card-open .zwc-problem-card-border::before {
        animation: none;
    }

    .zwc-hero-scroll svg path {
        animation: none;
        opacity: 1
    }

    .zwc-hero-3d-shield,
    .zwc-hero-3d-envelope {
        animation: none;
    }

    .zwc-hero-deco-group {
        transform: none;
        transition: none;
    }

    .zwc-dash-ripple-ring {
        animation: none;
        stroke-opacity: 0.4;
    }

    .zwc-features-grid .zwc-feature-card-ai.zwe-op::before {
        animation: none;
    }



    .zwc-trusted-logos-track {
        animation: none;
    }

    .zwc-trusted-logos-block .zwc-logo-item {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .zwc-compliance-block,
    .zwc-compliance-block .zwc-compliance-intro,
    .zwc-compliance-block .zwc-compliance-badges > li {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }

    .zwc-features-heading .zwc-features-heart {
        animation: none;
    }

    .zwc-features-grid .zwc-feature-card .zwc-feature-card-icon,
    .zwc-features-grid .zwc-feature-card .zwc-feature-card-img {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .zwc-benefits-col .zwc-benefits-item-icon {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

@media (max-width: 991px), (max-height: 800px) {
    .zwc-hero-dashboard-tab:not(.zwc-is-active) .zwc-dash-tab-ripple {
        opacity: 1;
    }
}

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .zwc-hero-decorative,
    .zwc-hero-section .mailcover-top-shape {
        opacity: 0;
    }

    .zwc-hero-decorative {
        transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
        transition-delay: .85s;
    }

    .zwc-hero-deco-group {
        transform: translateY(48px);
        opacity: 0;
        transform-origin: bottom center;
        transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
        transition-delay: .85s;
    }

    .zwc-hero-deco-group:nth-child(2) {
        transition-delay: 1.25s;
    }

    .zwc-hero-section div.mailcover-top-shape:before {
        transform: translateY(60px);
        transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .zwc-hero-section:not(.ztrans-hero-sticky) .zwc-hero-dashboard-frame {
        transform: translateY(250px);
        opacity: 0;
        transition: transform .55s cubic-bezier(0.22,0.61,0.36,1),opacity .55s cubic-bezier(0.22,0.61,0.36,1);
        transition-delay: .35s
    }

    .ztrans-hero-ready .zwc-hero-decorative,
    .ztrans-hero-ready .zwc-hero-section .mailcover-top-shape {
        opacity: 1;
    }

    .ztrans-hero-ready .zwc-hero-deco-group {
        transform: translateY(0);
        opacity: 1;
    }

    .ztrans-hero-ready .zwc-hero-section div.mailcover-top-shape:before {
        transform: translateY(0px);
    }

    .ztrans-hero-ready .zwc-hero-section:not(.ztrans-hero-sticky) .zwc-hero-dashboard-frame {
        transform: translateY(0);
        opacity: 1
    }

}

@media (max-width: 1550px) {
    .zwc-hero-section-inner {
        background-size: cover;
    }
}

/* Desktop pin gate — matches ztrans_hero_fade_mq plus the innerHeight check in the JS */
@media (min-width: 992px) and (min-height:800px) {
    .zwc-hero-content-box {
        position: sticky;
        top: 85px;
        transform: scale(var(--ztrans-hero-content-scale, 1));
        transform-origin: 50% 20%;
        opacity: var(--ztrans-hero-content-opacity, 1);
        will-change: transform, opacity;
    }
}

/* Desktop hero layout */
@media (min-width: 992px) {
    .zwc-hero-section-inner {
        background-image: none;
    }

    /* Safari fallback: it cannot composite background-attachment: fixed behind border-radius */
    .zwc-hero-section-inner::before {
        --zwc-hero-pad-top: 100px; /* keep equal to the section's padding-block-start */
        content: "";
        display: block;
        position: sticky;
        top: 0;
        height: 100vh;
        margin-block-start: calc(-1 * var(--zwc-hero-pad-top));
        margin-block-end: calc(var(--zwc-hero-pad-top) - 100vh);
        background-image:
            url("/sites/zweb/images/mail/homepage/banner-bg.svg"),
            linear-gradient(180deg, #f7faff 0%, #eaf3ff 55%, #f3f9ff 100%);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
    }

    /* Once fully faded, drop the hero copy out of the tab order too (WCAG 2.4.7) */
    .ztrans-hero-faded .zwc-hero-content-box {
        visibility: hidden;
    }

    .ztrans-hero-sticky .zwc-hero-dashboard-frame {
        position: absolute;
    }

    .zwc-hero-dashboard {
        /*margin-block-start: var(--zwc-space-lg);*/
    }

    .zwc-hero-dashboard-tab:not(.zwc-is-active) .zwc-dash-tab-ripple.ztrans-dash-icon-revealed {
        opacity: 1;
    }

    /* Translate, not `bottom`: `bottom` on a sticky element re-lays out the page every frame */
    .zwc-hero-section .mailcover-top-shape {
        /* Keep the fallback in sync with ztrans_mailcover_start_bottom in custom-script.js */
        transform: translate3d(0, var(--ztrans-mailcover-shift, 60px), 0);
    }
}

/* Tablet portrait: the hero collapses to its natural height and drops the art */
@media (max-width: 1024px) and (max-height: 1366px) {
    body.body-umain .zwc-hero-content-box,
    .zwc-hero-content-box {
        min-height: auto;
    }

    .zwc-hero-decorative,
    .zwc-hero-scroll,
    body.body-umain .zwc-hero-scroll {
        display: none;
    }
  
}

/* Tall tablets meet the pin gate but have a collapsed content box, so un-pin here */
@media (min-width: 992px) and (max-width: 1024px) and (min-height: 801px) {
    .ztrans-hero-sticky .zwc-hero-section-inner > .content-wrap {
        min-height: 0;
    }

    .ztrans-hero-sticky .zwc-hero-dashboard-frame {
        position: relative;
    }

    /* Override transform, not the variable: the JS writes that inline and would win */
    .zwc-hero-section .mailcover-top-shape {
        transform: none;
    }

    div.mailcover-top-shape:before {
        bottom: -7px;
    }
}

/* Short laptops: tighten the hero so the dashboard still clears the fold */
@media (min-width: 1025px) and (max-width: 1550px) and (max-height: 820px) {
    .zw-template-inner {
        --zwc-hero-top: 86px;
    }

    .zwc-hero-section-inner.zwc-section-space {
        padding-block-start: var(--zwc-hero-top);
    }

    .zwc-hero-section-inner::before {
        --zwc-hero-pad-top: var(--zwc-hero-top);
    }

    .zwc-hero-content-box {
        min-height: 440px;
        /* Un-pins the hero: `inherit` resolves to the relative .content-wrap parent */
        position: inherit;
        top: auto;
        transform: unset;
        transform-origin: unset;
        opacity: 1;
    }

    body.body-umain .zwc-hero-content-box {
        min-height: 380px;
    }

    .zwc-hero-heading {
        font-size: clamp(40px, calc(3.3vw + 24px), 72px);
        letter-spacing: -2.16px;
    }

    .zwc-hero-desc {
        font-size: clamp(16px, calc(0.3vw + 14px), 18px);
        margin-block-start: var(--zwc-space-sm);
        max-width: 500px;
    }

    body.body-umain .zwc-hero-desc {
        max-width: 570px;
    }

    .zwc-signup-container .zwc-hero-signup-heading {
        font-size: clamp(16px, calc(0.3vw + 15px), 20px);
    }

    .zwc-hero-decorative {
        --zwc-deco-drop: 170px;
        transform: scale(.8);
        transform-origin: left;
    }

    body.body-umain .zwc-hero-decorative {
        transform-origin: center;
    }

    .zwc-hero-dashboard {
        margin-block-start: var(--zwc-space-md);
        position: inherit;
        top: auto;
    }
}

/* Narrow short laptops need a shorter sticky offset still */
@media (min-width: 1025px) and (max-width: 1199px) and (max-height: 900px) {
    .zw-template-inner {
        --zwc-hero-top: 60px;
    }

    .zwc-hero-dashboard {
        --ztrans-dash-sticky-top: var(--zwc-hero-top);
        margin-block-start: var(--zwc-space-sm);
    }
}

/* margin-block-start here is intentionally superseded by the max-width:1024px block below */
@media (min-width: 992px) and (max-width: 1024px) {
    .zw-template-inner {
        --zwc-hero-top: 60px;
    }

    .zwc-hero-dashboard {
        --ztrans-dash-sticky-top: var(--zwc-hero-top);
        margin-block-start: var(--zwc-space-sm);
    }
}

/* Scale from the bottom edge so the art clears the hero text */
@media (min-width: 1551px) and (max-height: 800px) {
    .zwc-hero-decorative {
        transform: scale(.7);
        transform-origin: left bottom;
    }

    body.body-umain .zwc-hero-decorative {
        transform-origin: center bottom;
    }
}

/* Short viewports of any width: no room for a full-height hero */
@media (max-height: 800px) {
    .zwc-hero-section-inner {
        background-size: cover;
    }

    .zwc-hero-content-box,
    body.body-umain .zwc-hero-content-box {
        min-height: 0;
    }

    .zwc-hero-dashboard {
        margin-block-start: 70px;
    }

    body.body-umain .zwc-hero-scroll {
        display: none;
    }

    body.body-umain .zwc-hero-decorative {
        --zwc-deco-drop: -540px;
        width: 100%;
        transform: scale(.9);
    }
}

/* Migration: too little scroll room to pin, so lay the section out normally */
@media (max-width: 1024px), (max-height: 760px) {
    .zwc-migration-section {
        min-height: 0;
    }

    .zwc-migration-section::before {
        position: absolute;
        inset: 0;
        height: auto;
        margin-block: 0;
    }

    .zwc-migration-section > .content-wrap {
        position: static;
        min-height: 0;
        display: block;
    }
}

/* Large tablet / small desktop */
@media (max-width: 1199px) {
    .zwc-trusted-stats {
        flex-direction: column;
        align-items: center;
        gap: var(--zwc-space-xl);
    }

    .zwc-trusted-stats-text {
        align-items: center;
        text-align: center;
    }

    .zwc-trusted-stories-link {
        align-self: center;
    }

    .zwc-trusted-badges {
        max-width: 850px;
        justify-content: center;
    }
    .zwc-feature-link{
        width: 30px;
        height: 30px;
        inset-block-start: clamp(14px, calc(0.7vw + 12px), 18px);
        inset-inline-end: clamp(14px, calc(0.7vw + 12px), 18px);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .zwc-section-space {
        padding-block: 80px 90px;
    }

    .zwc-feature-link{
    width: 28px;
    height: 28px;
}

.zwc-feature-link-icon {
    width: 18px;
    height: 18px;
}

    .zwc-hero-decorative,
    .zwc-hero-scroll,
    body.body-umain .zwc-hero-scroll {
        display: none;
    }

    body.body-umain .zwc-hero-content-box, .zwc-hero-content-box{
        min-height: auto;
    }

    .zwc-benefits-section{
        margin-block-start: 85px;
    }

    .zwc-hero-section-inner::before {
        --zwc-hero-pad-top: 80px;
    }

    .zwc-hero-content-box {
        flex-direction: column;
        align-items: center;
        gap: var(--zwc-space-xl);
    }

    .zwc-hero-info {
        max-width: 600px;
        text-align: center;
    }

    .zwc-hero-desc {
        margin-inline: auto;
    }

    .zwc-hero-card {
        align-self: center;
    }

    .zwc-hero-dashboard {
        margin-block-start: var(--zwc-space-xl);
    }

    div.mailcover-top-shape {
        height: 120px;
        margin-block-start: -120px;
    }

    .zwc-cta-section .mailcover-top-shape {
        margin-block-start: -90px;
        margin-block-end: -50px;
        z-index: 0;
    }


    .zwc-trusted-logos-block {
        padding-block-start: var(--zwc-space-2xl);
    }

    /* Keeps the toggle on the label's line, matching the reduced padding above */
    .zwc-marquee-toggle {
        top: calc(var(--zwc-space-2xl) - 3px);
    }

    .zwc-trusted-badges {
        max-width: 900px;
    }

    .zwc-testimonials-track .slick-center .zwc-testimonial-card-inner,
    .zwc-testimonials-track .slick-current .zwc-testimonial-card-inner,
    .zwc-testimonials-track:not(.slick-initialized) .zwc-testimonial-card:nth-child(1) .zwc-testimonial-card-inner {
        transform: scale(1);
    }

    .zwc-testimonials-track.slick-initialized {
        overflow: hidden;
    }

    .zwc-testimonials-track .slick-list {
        overflow: visible;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    }

    .zwc-compliance-block {
        max-width: 95%;
        flex-direction: column;
        align-items: center;
    }

    .zwc-compliance-intro {
        text-align: center;
        max-width: 500px;
    }

    .zwc-compliance-badges {
        justify-content: center;
    }

    .zwc-features-content-box {
        gap: var(--zwc-space-xl);
    }

    .zwc-features-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas: none;
        max-width: 640px;
        margin-inline: auto;
    }

    .zwc-feature-card-custom,
    .zwc-feature-card-encryption,
    .zwc-feature-card-admin,
    .zwc-feature-card-offline,
    .zwc-feature-card-award,
    .zwc-feature-card-retention,
    .zwc-feature-card-ai {
        grid-area: auto;
    }

    .zwc-feature-card-large,
    .zwc-feature-card-small,
    .zwc-feature-card-ai {
        min-height: auto;
    }

    .zwc-feature-card {
        border-radius: 24px;
    }

    .zwc-feature-card-ai {
        flex-direction: column;
        align-items: stretch;
    }

    /* Stacked: the copy spans the full width, so park the sparkle in the top corner */
    .zwc-feature-card-ai::before {
        background-position: right 12px top 12px;
        background-size: 130px auto;
    }

    .zwc-feature-card-ai .zwc-feature-card-text,
    .zwc-feature-card-ai .zwc-feature-card-img {
        flex: 0 1 auto;
        padding-inline-start: 0;
        padding-block-start: 0;
    }

    .zwc-feature-card-ai .zwc-feature-card-img {
        align-self: stretch;
    }

    .zwc-feature-card-ai .zwc-feature-card-text .zwc-feature-title {
        max-width: 300px;
    }

    .zwc-feature-card-ai .zwc-feature-card-text .zwc-feature-desc {
        max-width: 420px;
    }

    .zwc-features-grid .zwc-feature-card-admin .zwc-feature-card-img {
        transform: translateX(40px);
    }

    .zwc-migration-content-box {
        gap: var(--zwc-space-xl);
    }

    .zwc-migration-steps-block {
        gap: var(--zwc-space-lg);
    }

    .zwc-migration-steps {
        --zwc-arrow-gap: calc(var(--zwc-space-xl) + 10px);
        flex-direction: column;
        align-items: center;
        gap: var(--zwc-arrow-gap);
    }

    /* The stacked layout uses the per-step chevron connectors below instead */
    .zwc-migration-progress {
        display: none;
    }

    /* Centred with margin, never transform: ztrans_hero_chevron animates transform */
    .zwc-migration-step:not(:last-child)::before,
    .zwc-migration-step:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        margin-inline: auto;
        width: 40px;
        height: 14px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' fill='none'%3E%3Cpath d='M5 1l7 6 7-6' stroke='%23161619' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 40px auto;
        opacity: 0.35;
        animation: ztrans_hero_chevron 1.2s linear infinite backwards;
    }

    /* Leading chevron first, so the pulse travels downward (the hero's stagger, mirrored) */
    .zwc-migration-step:not(:last-child)::before {
        bottom: calc(var(--zwc-arrow-gap) / -2 - 1px);
        animation-delay: 0s;
    }

    .zwc-migration-step:not(:last-child)::after {
        bottom: calc(var(--zwc-arrow-gap) / -2 - 13px);
        animation-delay: .6s;
    }

    .zwc-step-title {
        margin-block-start: 20px;
    }

    .zwc-step-desc,
    .zwc-migration-step:last-child .zwc-step-desc {
        max-width: 450px;
    }

    .zwc-benefits-comparison {
        margin-block-end: var(--zwc-space-2xl);
    }
     .zwc-problems-cards-top {
        flex-direction: column;
        align-items: center;
        gap: var(--zwc-space-xl);
        margin-block-start: 0;
    }
}

/* Must follow the block above, which sets the chevron animation at equal specificity */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    .zwc-migration-step:not(:last-child)::before,
    .zwc-migration-step:not(:last-child)::after {
        animation: none;
    }
}

/* Below the desktop dashboard: swap the SVG panel for the mobile screenshot */
@media (max-width: 991px) {
    .zwc-section-space {
        padding-block: 70px 80px;
    }

    .zwc-benefits-section{
        margin-block-start: 75px;
    }

    .zwc-hero-buttons {
        justify-content: center;
        display: flex;
    }

    .zwc-hero-card {
        display: none;
    }

    .zwc-hero-dashboard-panel-svg {
        display: none;
    }

    .zwc-hero-dashboard-frame {
        border: none;
        box-shadow: none;
        background: none;
        max-height: 600px;
    }

    .zwc-hero-dashboard-mobile {
        display: block;
        height: auto;
        border-radius: 12px;
        max-width: 380px;
        margin-inline: auto;
        width: 90%;
    }

    .zwc-testimonials-track:not(.slick-initialized) {
        flex-direction: row;
        justify-content: center;
        margin-inline: 0;
    }

    .zwc-testimonials-track:not(.slick-initialized) .zwc-testimonial-card:nth-child(2),
    .zwc-testimonials-track:not(.slick-initialized) .zwc-testimonial-card:last-child {
        display: none;
    }

    .zwc-testimonials-track:not(.slick-initialized) .zwc-testimonial-card:nth-child(1) {
        flex: 0 0 auto;
        max-width: min(560px, 82%);
        padding-inline: 0;
    }

    .zwc-benefits-section {
        margin-block-start: var(--zwc-space-2xl);
        padding-top: 10px;
    }

    .zwc-benefits-comparison {
        flex-direction: column;
        margin-block-end: var(--zwc-space-xl);
        max-width: 640px;
        gap: var(--zwc-space-xl);
    }

    .zwc-features-heading .zwc-features-heart {
        vertical-align: -5px;
    }

    .zwc-badge-info{
        display: flex;
    }
}

@keyframes ztrans_mailcover_failsafe {
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .zwc-hero-section .mailcover-top-shape {
        transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
}

/* Mobile */
@media (max-width: 767px) {

    .zwc-hero-section .mailcover-top-shape {
        bottom: 50px;
        opacity: 0;
        transform: translateY(60px);
        animation: ztrans_mailcover_failsafe 0s linear 2s forwards;
    }

    .ztrans-mailcover-ready .zwc-hero-section .mailcover-top-shape {
        opacity: 1;
        transform: translateY(0);
        animation: none;
    }

    .zwc-section-space {
        padding-block: 60px 70px;
    }

    .zwc-benefits-section{
        margin-block-start: 65px;
    }

    .zwc-hero-buttons,
    .zwc-cta-buttons {
        gap: var(--zwc-space-sm);
    }

    .zwc-cta-secondary {
        border-width: 1px;
    }

    .zwc-hero-content-box {
        padding-bottom: 20px;
    }

    .zwc-hero-dashboard {
        margin-block-start: var(--zwc-space-lg);
    }

    .zwc-hero-dashboard-frame {
        border-radius: 16px;
        padding: 10px;
    }

    .zwc-hero-dashboard-panel-svg {
        border-radius: 10px;
    }

    .zwc-compliance-block {
        padding: 28px;
    }

    .zwc-feature-card-small {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .zwc-feature-card-icon {
        display: flex;
        align-items: center;
    }

    .zwc-feature-card-large .zwc-feature-card-text,
    .zwc-feature-card-ai .zwc-feature-card-text {
        text-align: center;
        margin-inline: auto;
    }

    .zwc-feature-card-ai .zwc-feature-card-text .zwc-feature-title {
        margin: 0 auto;
    }

    .zwc-migration-handbook {
        flex-direction: column;
        max-width: 440px;
        align-items: center;
    }

    .zwc-handbook-text {
        text-align: center;
    }

    .zwc-handbook-desc {
        max-width: 460px;
    }

    .zwc-handbook-banner {
        max-width: 400px;
        border-radius: 8px;
    }

    .zwc-cta-section .mailcover-top-shape {
        margin-block-start: -80px;
    }

    .zwc-problem-card-border::before{
        height: 280%;
    }

    .zwc-feature-link::after {
        /* content: none; */
    }

}

/* Small mobile */
@media (max-width: 480px) {
    .zwc-section-space {
        padding-block: 55px 65px;
    }

    .zwc-benefits-section{
        margin-block-start: 60px;
    }

    div.mailcover-top-shape {
        height: 70px;
        margin-block-start: -70px;
    }

    .zwc-hero-buttons,
    .zwc-cta-buttons {
        display: grid;
        grid-template-columns: minmax(0, max-content);
        justify-content: center;
    }

    .zwc-hero-dashboard-frame {
        max-height: 450px;
        border-width: 2px;
        border-radius: 12px;
        padding: 8px;
    }

    .zwc-hero-dashboard-mobile {
        max-width: 320px;
    }


    .zwc-marquee-toggle {
        position: static;
    }

    .zwc-trusted-badges {
        flex-direction: column;
    }

    .zwc-badge-item {
        width: 100%;
    }

    /* Full-width chips here, so the glyph sits at the trailing edge instead of hugging the label */
    .zwc-badge-info {
        margin-inline-start: auto;
    }

    .zwc-badge-text {
        white-space: normal;
    }

    .zwc-testimonials-track .slick-slide {
        padding-block-start: 45px;
        padding-block-end: 55px;
    }

    .zwc-testimonials-nav {
        justify-content: center;
        margin-block-start: 0;
    }

    .zwc-compliance-badges {
        transform: scale(.95);
    }

    .zwc-feature-card-icon,
    .zwc-feature-card-encryption .zwc-feature-card-icon {
        width: 100px;
        height: 100px;
    }

    .zwc-cta-content-box {
        gap: var(--zwc-space-md);
    }

    .zwc-cta-content-box .zwc-cta-desc {
        margin-bottom: 10px;
    }

    .zwc-cta-section .mailcover-top-shape {
        margin-block-start: -24px;
    }

    .zwc-faq-answer p {
        line-height: 1.4;
    }
    .zwc-problem-card-wrap {
        max-width: 100%;
    }

    .zwc-cta-primary,
    .zwc-cta-secondary {
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    .zwc-hero-dashboard-frame{
        max-height: 360px;
    }
}