/* common-styles */

.pagewrapper {
    --light-gray-bg: #f8faff;
    --dark-blue-bg: #0d1229;
    --cta-red: #e42527;
    --integrately-clr: #ef6c2e;
    --pabbly-clr: #43b97a;
    --flow-clr: #2089ec;
    --h1-size: 56px;
    --h1-size-span: 34px;
    --h2-size-1: 48px;
    --h2-size-2: 40px;
    --h2-size-3: 32px;
    --h3-size: 20px;
    --p-size-1: 24px;
    --p-size-2: 20px;
    --p-size-3: 16px;
    --p-size-4: 14px;
    --cta-size: 14px;
    max-width: 1920px;
    margin: 0 auto;
}

.pagewrapper .content-wrap {
    padding-block: 100px
}

.pagewrapper .act-btn {
    padding: 12px 30px
}

.pagewrapper :is(h2, h3, h4, p, li) {
    color: #111
}
.pagewrapper section a{
    color: var(--zwc-link-clr);
    font-family: var(--primaryfont-semibold);
    text-decoration: underline;
}
.pagewrapper h1 {
    font: var(--h1-size) / 1.5 var(--zf-primary-extrabold);
    letter-spacing: -1.12px
}
.pagewrapper h1 span{
    font: var(--h1-size-span) / 1.2 var(--zf-primary-extrabold);
    letter-spacing: -1.15px;
    line-height: 1.5;
    display: block;
    max-width: 780px;
    margin: 0 auto;
}

.pagewrapper h2 {
    font: var(--h2-size-2) / 1.2 var(--zf-primary-bold);
    letter-spacing: -1.2px
}

.pagewrapper h3 {
    font: var(--h3-size) / 1.3 var(--zf-primary-bold);
    letter-spacing: -0.2px
}

.pagewrapper li {
    font-size: var(--p-size-3)
}

.zwc-prd-name,
.zinline-block {
    display: inline-block
}

.pagewrapper .zwc-cta-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 40px
}

/* red CTA button */
.pagewrapper .cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--cta-red);
    color: #fff;
    font: var(--cta-size) / 1 var(--primaryfont-bold);
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 18px 30px;
    border-radius: 3px;
    transition: background .3s ease;
    text-decoration: unset;
}

/* .pagewrapper .cta-btn:hover {
    background: #c8151c
} */

/* .pagewrapper .cta-btn-red:hover::after {
    transform: rotate(45deg) translate(2px, -2px)
} */

/* common-styles */

/* banner-sec */
.zwc-banner-sec {
    background: #0D1229;
    color: #fff;
    position: relative;
    text-align: center;
    z-index: 1;
}
.zw-product-header {
    background: #0D1229;
}
.pagewrapper .zwc-banner-sec .content-wrap {
    padding-block: 60px 0;
    position: relative;
}

.zwc-banner-sec .zwc-banner-inner {
    position: relative;
    z-index: 1;
}

.zwc-banner-sec h1 {
    max-width: 920px;
    margin-inline: auto;
    color: #fff
}

.zwc-banner-sec p {
    max-width: 880px;
    margin: 24px auto 0;
    font-size: var(--p-size-2);
    line-height: 1.5;
    color: #d7dbe8
}

/* scattered decorative elements */
.zwc-banner-sec .zwc-banner-elements {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 0;
}

.zwc-banner-sec .zwc-banner-elements li,
.zwc-banner-sec .zwc-banner-elements span {
    position: absolute
}

.zwc-banner-sec .zwc-banner-elements li:nth-child(1) { top: 16%; left: 11%; }
.zwc-banner-sec .zwc-banner-elements li:nth-child(2) { top: 16%; right: 14%; }
.zwc-banner-sec .zwc-banner-elements li:nth-child(3) { top: 48%; left: 17%; }
.zwc-banner-sec .zwc-banner-elements li:nth-child(4) { top: 40%; right: 8%; }
.zwc-banner-sec .zwc-banner-elements li:nth-child(5) { bottom: 28%; right: 19%; }
.zwc-banner-sec .zwc-banner-elements li:nth-child(6) { bottom: 18%; left: 5%; }

.zwc-banner-sec .zwc-banner-elements .zwc-cirle-ele,
.zwc-banner-sec .zwc-banner-elements .zwc-square-ele {
    width: 14px;
    height: 14px;
    border: 4px solid #ff5454
}

.zwc-banner-sec .zwc-banner-elements .zwc-square-ele.purple {
    border-color: #973eff;
    transform: rotate(45deg)
}

.zwc-banner-sec .zwc-banner-elements .zwc-cirle-ele {
    border-radius: 50%
}

.zwc-banner-sec .zwc-banner-elements span.green {
    border-color: #00b25a
}

.zwc-banner-sec .zwc-banner-elements .zwc-square-ele.green {
    transform: rotate(45deg)
}

.zwc-banner-sec .zwc-banner-elements .zwc-plus-ele {
    width: 16px;
    height: 16px
}

.zwc-banner-sec .zwc-banner-elements .zwc-plus-ele::before,
.zwc-banner-sec .zwc-banner-elements .zwc-plus-ele::after {
    content: "";
    position: absolute;
    border-radius: 2px;
    background: #ff7600
}

.zwc-banner-sec .zwc-banner-elements .zwc-plus-ele::before {
    width: 100%;
    height: 4px;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.zwc-banner-sec .zwc-banner-elements .zwc-plus-ele::after {
    width: 4px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%)
}

/* X / cross element */
.zwc-banner-sec .zwc-banner-elements .zwc-cross-ele {
    width: 16px;
    height: 16px
}

.zwc-banner-sec .zwc-banner-elements .zwc-cross-ele::before,
.zwc-banner-sec .zwc-banner-elements .zwc-cross-ele::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    top: 50%;
    left: 0;
    background: #007bd5
}

.zwc-banner-sec .zwc-banner-elements .zwc-cross-ele::before {
    transform: translateY(-50%) rotate(45deg)
}

.zwc-banner-sec .zwc-banner-elements .zwc-cross-ele::after {
    transform: translateY(-50%) rotate(-45deg)
}

/* product logo cards */
.zwc-banner-sec .zwc-banner-logos {
    --card-w: 200px;
    --card-h: 208px;
    --card-radius: 36px;
    --ring-size: 168px;
    --circle-size: 132px;
    --logo-size: 72px;
    --vs-size: 44px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
}
.zwc-banner-sec .zwc-banner-logos::before{
    content: "";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
}

.zwc-banner-sec .zwc-banner-logo-card {
    position: relative;
    flex: none;
    width: var(--card-w);
    height: var(--card-h);
    border-radius: var(--card-radius);
    display: flex;
    align-items: center;
    justify-content: center
}

.zwc-banner-sec .zwc-banner-logo-card.integrately { background: var(--integrately-clr) }
.zwc-banner-sec .zwc-banner-logo-card.pabbly { background: var(--pabbly-clr) }
.zwc-banner-sec .zwc-banner-logo-card.flow { background: var(--flow-clr) }

.zwc-banner-sec .zwc-banner-logo-ring {
    position: absolute;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;
    background: rgba(255, 255, 255, .16)
}

.zwc-banner-sec .zwc-banner-logo-circle {
    position: relative;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.zwc-banner-sec .zwc-banner-logo-circle img {
    width: var(--logo-size);
    height: var(--logo-size);
    object-fit: contain
}

.zwc-banner-sec .zwc-banner-vs {
    position: relative;
    z-index: 2;
    flex: none;
    width: var(--vs-size);
    height: var(--vs-size);
    margin-inline: -14px;
    border-radius: 50%;
    background: #0d1229;
    color: #fff;
    font: 700 13px/1 var(--primaryfont-bold);
    letter-spacing: .5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center
}

/* banner-sec */

/* intro-sec */
.zwc-intro-sec .zwc-intro-inner {
    padding: clamp(40px, 4vw, 90px) clamp(20px, 4vw, 100px);
    background: #cce8fd;
    border: 1px solid #e8ecf7;
    text-align: center
}

.zwc-intro-sec .zwc-intro-wrap {
    max-width: 880px;
    margin: 0 auto
}

.zwc-intro-sec .zwc-intro-wrap h2 {
    margin-bottom: 40px
}

.zwc-intro-sec .zwc-intro-wrap p {
    margin-bottom: 20px;
    line-height: 1.6
}

.zwc-intro-sec .zwc-intro-wrap p:last-child {
    margin-bottom: 0
}

.zwc-intro-sec .zwc-cta-wrap {
    margin-top: 40px
}

/* intro-sec */

/* platforms-sec */
.zwc-platforms-sec {
    background: var(--light-gray-bg)
}

.zwc-platforms-sec .zwc-platforms-inner > h2 {
    max-width: 600px;
    margin-inline: auto;
    text-align: center
}

.zwc-platforms-sec .zwc-platform-item {
    position: relative;
    margin-block-start: clamp(40px, 4vw, 60px);
    padding: clamp(40px, 4vw, 70px) clamp(20px, 4vw, 80px);
    border: 1px solid #e8ecf7;
    background: #fff;
    border-top: 4px solid var(--flow-clr)
}

.zwc-platforms-sec #integrately { border-top-color: var(--integrately-clr) }
.zwc-platforms-sec #pabbly-connect { border-top-color: var(--pabbly-clr) }
.zwc-platforms-sec #zoho-flow { border-top-color: var(--flow-clr) }

.zwc-platforms-sec .zwc-platform-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px
}

.zwc-platforms-sec .zwc-platform-head img {
    width: 42px;
    height: 42px;
    object-fit: contain
}

.zwc-platforms-sec .zwc-platform-head span {
    font-size: var(--p-size-1);
    font-family: var(--primaryfont-bold);
    letter-spacing: -0.5px
}

.zwc-platforms-sec .zwc-platform-desc p {
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.6;
    margin: 0 0 18px;
    letter-spacing: -0.18px
}

.zwc-platforms-sec .zwc-platform-desc p:last-child {
    margin-bottom: 0
}

.zwc-platforms-sec .zwc-platform-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 30px
}

.zwc-platforms-sec .zwc-strengths,
.zwc-platforms-sec .zwc-limitations {
    padding: 36px 30px
}

.zwc-platforms-sec .zwc-strengths {
    background: #e6faf0
}

.zwc-platforms-sec .zwc-limitations {
    background: #fdeeea
}

.zwc-platforms-sec .zwc-platform-cols h3 {
    font-size: var(--h3-size);
    margin-bottom: 20px
}

.zwc-platforms-sec .zwc-platform-cols ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.zwc-platforms-sec .zwc-platform-cols li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 14px;
    font-size: var(--p-size-3);
    line-height: 1.5
}

.zwc-platforms-sec .zwc-platform-cols li:last-child {
    margin-bottom: 0
}

.zwc-platforms-sec .zwc-platform-cols li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #111
}

.zwc-platforms-sec .zwc-platform-pricing {
    margin-top: 36px
}

.zwc-platforms-sec .zwc-platform-pricing h3 {
    margin-bottom: 16px
}

.zwc-platforms-sec .zwc-platform-pricing p {
    margin: 0;
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.6
}

.zwc-platforms-sec .zwc-platform-pricing strong {
    font-family: var(--primaryfont-semibold)
}

/* platforms-sec */

/* comparison-sec */
.zwc-comparison-sec {
    background: var(--light-gray-bg)
}
.zwc-comparison-sec .content-wrap,
.zwc-platforms-sec .content-wrap{
    border-bottom: 1px solid #ccc;
}
.zwc-comparison-sec .zwc-comparison-inner {
    text-align: center
}

.zwc-comparison-sec .zwc-comparison-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-bottom: 40px
}

.zwc-comparison-sec .zwc-comparison-logo {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #000;
    box-shadow: 0 6px 18px rgba(13, 18, 41, 0.06);
    display: flex;
    align-items: center;
    justify-content: center
}

.zwc-comparison-sec .zwc-comparison-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain
}

.zwc-comparison-sec .zwc-vs {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0d1229;
    color: #fff;
    font-family: var(--primaryfont-bold);
    font-size: 11px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 -12px;
    position: relative;
    z-index: 1
}

.zwc-comparison-sec h2 {
    margin-bottom: 20px
}

.zwc-comparison-sec .zwc-comparison-inner > p {
    max-width: 620px;
    margin: 0 auto;
    font-size: var(--p-size-3);
    line-height: 1.6
}

.zwc-comparison-sec .zwc-compare-actions {
    display: flex;
    justify-content: flex-end;
    margin: 50px 0 18px
}

.zwc-comparison-sec .zwc-expand-all {
    font-family: var(--primaryfont-bold);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #111;
    background: #fff;
    border: 1px solid #c4cbdc;
    border-radius: 4px;
    padding: 12px 18px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05)
}

.zwc-comparison-sec .zwc-compare-scroll {
    overflow-x: auto
}

.zwc-comparison-sec .zwc-compare-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    text-align: left;
    border: 1px solid #e3e8f1
}

.zwc-comparison-sec .zwc-compare-table thead th {
    background: #0d1019;
    color: #fff;
    font-family: var(--primaryfont-bold);
    font-size: var(--p-size-2);
    padding: 26px 28px;
    letter-spacing: -0.4px;
    width: 22%;
    border-right: 1px solid rgba(255, 255, 255, .12)
}

.zwc-comparison-sec .zwc-compare-table thead th:first-child {
    width: 34%
}

.zwc-comparison-sec .zwc-compare-table thead th:last-child {
    border-right: 0
}

.zwc-comparison-sec .zwc-cat-row td {
    padding: 0;
    background: #e3e8f1;
    border-bottom: 1px solid #d6dde9
}

.zwc-comparison-sec .zwc-cat-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 28px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--primaryfont-bold);
    font-size: var(--p-size-2);
    color: #21294a;
    letter-spacing: -0.3px;
    text-align: left;
    transition: background .25s ease
}

.zwc-comparison-sec .zwc-cat-toggle:hover {
    background: #dce2ed
}

.zwc-comparison-sec .zwc-cat-icon {
    position: relative;
    width: 26px;
    height: 26px;
    border: 2px solid #21294a;
    border-radius: 50%;
    flex-shrink: 0
}

.zwc-comparison-sec .zwc-cat-icon::before,
.zwc-comparison-sec .zwc-cat-icon::after {
    content: "";
    position: absolute;
    background: #21294a;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2px;
    transition: transform .3s ease
}

.zwc-comparison-sec .zwc-cat-icon::before {
    width: 10px;
    height: 2px
}

.zwc-comparison-sec .zwc-cat-icon::after {
    width: 2px;
    height: 10px
}

/* + morphs to − by collapsing the vertical bar */
.zwc-comparison-sec .zwc-cat-row.zwc-open .zwc-cat-icon::after {
    transform: translate(-50%, -50%) scaleY(0)
}

.zwc-comparison-sec .zwc-feat-row {
    background: #fff
}

.zwc-comparison-sec .zwc-feat-row td {
    padding: 0 28px;
    font-size: var(--p-size-3);
    vertical-align: middle;
    font-family: var(--primaryfont-semibold);
    border: 0
}

.zwc-comparison-sec .zwc-feat-row td:first-child {
    color: #2a3356;
    font-family: var(--primaryfont-regular)
}

/* animatable cell wrapper (added by JS) — collapsed rows take zero height */
.zwc-comparison-sec .zwc-feat-row .zwc-cell {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin: 0
}

/* dividers exist only on shown rows, so collapsed categories merge with no gap */
.zwc-comparison-sec .zwc-feat-row.zwc-show td {
    border-right: 1px solid #e8ecf3;
    border-bottom: 1px solid #e8ecf3
}

.zwc-comparison-sec .zwc-feat-row.zwc-show td:last-child {
    border-right: 0
}

.zwc-comparison-sec .zwc-feat-row.zwc-show .zwc-cell {
    max-height: 160px;
    opacity: 1;
    margin: 22px 0
}

/* enable transitions only after initial state is set (avoids load flash) */
.zwc-comparison-sec .zwc-compare-table.zwc-ready .zwc-feat-row .zwc-cell {
    transition: max-height .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease, margin .45s cubic-bezier(.4, 0, .2, 1)
}

/* tick / cross marks */
.zwc-comparison-sec .zwc-tick,
.zwc-comparison-sec .zwc-cross {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px
}

.zwc-comparison-sec .zwc-tick {
    background: #e4faf0
}

.zwc-comparison-sec .zwc-cross {
    background: #fdeaea
}

.zwc-comparison-sec .zwc-tick::before {
    content: "";
    width: 6px;
    height: 11px;
    border-right: 2px solid #00a05a;
    border-bottom: 2px solid #00a05a;
    transform: rotate(45deg) translate(-1px, -1px)
}

.zwc-comparison-sec .zwc-cross::before,
.zwc-comparison-sec .zwc-cross::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 2px;
    background: #e6403f;
    border-radius: 2px
}

.zwc-comparison-sec .zwc-cross::before { transform: rotate(45deg) }
.zwc-comparison-sec .zwc-cross::after { transform: rotate(-45deg) }

/* comparison-sec */

/* pick-sec */
.zwc-pick-sec {
    background: var(--light-gray-bg);
    position: relative
}

.zwc-pick-sec .zwc-pick-inner > h2 {
    text-align: center
}

.zwc-pick-sec .zwc-pick-inner > p {
    max-width: 690px;
    margin: 20px auto 0;
    text-align: center;
    font-size: var(--p-size-3);
    line-height: 1.6
}

.zwc-pick-sec .zwc-pick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 60px
}

.zwc-pick-sec .zwc-pick-card {
    padding: 40px 34px;
    border-top: 4px solid var(--flow-clr)
}

.zwc-pick-sec .zwc-pick-flow {
    background: #e6f3ff;
    border-top-color: var(--flow-clr)
}

.zwc-pick-sec .zwc-pick-integrately {
    background: #fdeee5;
    border-top-color: var(--integrately-clr)
}

.zwc-pick-sec .zwc-pick-pabbly {
    background: #e6f8ee;
    border-top-color: var(--pabbly-clr)
}

.zwc-pick-sec .zwc-pick-card h3 {
    font-size: var(--p-size-1);
    margin-bottom: 18px
}

.zwc-pick-sec .zwc-pick-card > p {
    margin: 0 0 24px;
    font-size: var(--p-size-3);
    line-height: 1.5
}

.zwc-pick-sec .zwc-pick-card ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.zwc-pick-sec .zwc-pick-card li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 14px;
    line-height: 1.5
}

.zwc-pick-sec .zwc-pick-card li:last-child {
    margin-bottom: 0
}

.zwc-pick-sec .zwc-pick-card li::before {
    content: "•";
    position: absolute;
    left: 6px;
    top: 0;
    color: #111
}

.zwc-pick-sec .zwc-pick-outro {
    max-width: 760px;
    margin: 50px auto 0;
    text-align: center;
    font-size: var(--p-size-3);
    line-height: 1.6
}

/* topographic wave divider */
.zwc-pick-sec .zwc-wave-divider {
    height: 72px;
    background-image: url("/sites/zweb/images/flow/comparison/zwc-element-wrapper.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

/* pick-sec */

/* realcase-sec */
.zwc-realcase-sec {
    background: var(--light-gray-bg)
}

.zwc-realcase-sec .zwc-realcase-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 371px;
    gap: 31px;
    align-items: start
}

.zwc-realcase-sec .zwc-realcase-main {
    max-width: 760px
}

.zwc-realcase-sec .zwc-realcase-main h2 {
    font-size: var(--h2-size-1)
}

.zwc-realcase-sec .zwc-realcase-intro {
    margin: 24px 0 0;
    font-size: var(--p-size-3);
    line-height: 1.6
}

.zwc-realcase-sec .zwc-realcase-card {
    margin-top: 40px;
    padding: clamp(30px, 3vw, 50px);
    background: #fff;
    border: 1px solid #e2e8f3
}

.zwc-realcase-sec .zwc-realcase-block {
    margin-top: 50px;
    padding-top: 50px;
    border-top: 1px solid #e2e8f3
}

.zwc-realcase-sec .zwc-realcase-block:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0
}

.zwc-realcase-sec .zwc-realcase-block a,
.zwc-realcase-sec .zwc-realcase-verdict a {
    color: var(--zwc-link-clr);
    font-family: var(--primaryfont-bold);
    text-decoration: underline
}

.zwc-realcase-sec .zwc-realcase-block h3 {
    font-size: var(--h2-size-3);
    margin-bottom: 22px
}

.zwc-realcase-sec .zwc-realcase-block p {
    font-size: var(--p-size-3);
    line-height: 1.7;
    margin: 0 0 18px
}

.zwc-realcase-sec .zwc-realcase-block ul {
    margin: 0 0 18px;
    padding-left: 22px
}

.zwc-realcase-sec .zwc-realcase-block li {
    line-height: 1.6;
    margin-bottom: 12px
}

.zwc-realcase-sec .zwc-realcase-block strong {
    font-family: var(--primaryfont-semibold)
}

.zwc-realcase-sec .zwc-realcase-verdict {
    margin-top: 50px
}

.zwc-realcase-sec .zwc-realcase-verdict h2 {
    font-size: var(--h2-size-1);
    margin-bottom: 22px
}

.zwc-realcase-sec .zwc-realcase-verdict p {
    font-size: var(--p-size-3);
    line-height: 1.7;
    margin: 0 0 18px
}

.zwc-realcase-sec .zwc-realcase-verdict p:last-child {
    margin-bottom: 0
}

/* sticky deep-dive nav (TOC) */
.zwc-realcase-sec .zwc-realcase-block[id],
.zwc-realcase-sec .zwc-realcase-verdict[id] {
    scroll-margin-top: 100px

}
/* .zwc-realcase-sec .zwc-realcase-block[id]{
    padding: 0;
} */
.zwc-doc-nav {
    position: sticky;
    top: 90px;
    align-self: flex-start;
    background: #f8faff
}

.zwc-doc-nav .zwc-nav-label {
    font-family: var(--primaryfont-semibold);
    color: #111;
    font-size: 11px;
    text-transform: uppercase;
    margin: 0 0 41px
}

.zwc-doc-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-left: 1px solid #d8dde7;
    position: relative
}

.zwc-doc-nav ul::before {
    content: "";
    position: absolute;
    left: -1.5px;
    top: var(--indicator-top, 0);
    height: var(--indicator-height, 0);
    width: 2px;
    background: var(--zwc-link-clr);
    transition: top .45s cubic-bezier(0.4, 0, 0.2, 1), height .45s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none
}

.zwc-doc-nav ul li {
    padding-left: 20px;
    position: relative
}

.zwc-doc-nav ul li a {
    font-family: var(--zf-primary-medium);
    color: #111;
    font-size: 15px;
    line-height: 1.47;
    text-decoration: none;
    display: block;
    transition: color .2s ease
}

.zwc-doc-nav ul li a:hover {
    color: var(--zwc-link-clr)
}

.zwc-doc-nav ul li.zwc-active > a {
    color: var(--zwc-link-clr)
}

.zwc-doc-nav .zwc-sub-nav {
    margin: 16px 0 4px;
    padding: 0;
    gap: 14px;
    border-left: 0
}

.zwc-doc-nav .zwc-sub-nav::before {
    display: none
}

.zwc-doc-nav .zwc-sub-nav li {
    padding-left: 14px;
    border-left: 1px solid #d8dde7
}

.zwc-doc-nav .zwc-sub-nav li a {
    font-size: 13px;
    line-height: 1.4;
    color: #555
}

.zwc-doc-nav .zwc-sub-nav li a:hover {
    color: var(--zwc-link-clr)
}

.zwc-doc-nav .zwc-sub-nav li.zwc-active {
    border-left-color: var(--zwc-link-clr)
}

.zwc-doc-nav .zwc-sub-nav li.zwc-active a {
    color: var(--zwc-link-clr)
}

/* realcase-sec */

/* bottom-cta-sec */
.pagewrapper .zwc-bottom-cta-sec {
    background: var(--dark-blue-bg);
    text-align: center
}

.zwc-bottom-cta-sec .zwc-bottom-cta-inner h2 {
    font-size: var(--h2-size-1);
    color: #fff;
    margin-bottom: 24px;
    max-width: 760px;
    margin-inline: auto
}

.zwc-bottom-cta-sec .zwc-bottom-cta-inner p {
    color: #c7ccdc;
    font-size: var(--p-size-2);
    line-height: 1.5;
    max-width: 760px;
    margin: 0 auto 40px
}

/* bottom-cta-sec */


/* ===== responsive ===== */
@media only screen and (max-width: 1280px) {
    .pagewrapper {
        --h1-size: 52px;
        --h1-size-spna: 42px;
        --h2-size-1: 44px;
        --h2-size-2: 38px;
        --h2-size-3: 28px;
    }
}

@media only screen and (max-width: 1199px) {
    .pagewrapper {
        --h1-size: 48px;
        --h1-size-span: 32px;
        --h2-size-1: 40px;
        --h2-size-2: 32px;
        --p-size-1: 22px;
        --p-size-2: 18px
    }

    .pagewrapper .content-wrap {
        padding-block: 80px
    }

    .zwc-banner-sec .zwc-banner-elements {
        display: none
    }

    .zwc-realcase-sec .zwc-realcase-inner {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 30px
    }

    .zwc-realcase-sec .zwc-realcase-main {
        max-width: 100%
    }
}

@media only screen and (max-width: 991px) {
    .zwc-realcase-sec .zwc-realcase-block:first-of-type{
        margin: 0;
    }
    .pagewrapper {
        --h1-size: 44px;
        --h1-size-span: 26px;
        --h2-size-1: 38px;
        --h2-size-2: 28px;
        --h3-size: 20px
    }

    .pagewrapper .content-wrap {
        padding-block: 70px
    }

    .pagewrapper .zwc-banner-sec .content-wrap {
        padding-block: 90px
    }

    .zwc-banner-sec .zwc-banner-logos {
        --card-w: 160px;
        --card-h: 168px;
        --card-radius: 28px;
        --ring-size: 134px;
        --circle-size: 106px;
        --logo-size: 58px;
        --vs-size: 38px;
        margin-top: 60px
    }

    .zwc-pick-sec .zwc-pick-grid,
    .zwc-platforms-sec .zwc-platform-cols {
        grid-template-columns: 1fr
    }

    .zwc-realcase-sec .zwc-realcase-inner {
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 30px
    }
}

@media only screen and (max-width: 767px) {
    .pagewrapper .zwc-banner-sec .content-wrap{
        padding-block: 20px;
    }
    .pagewrapper {
        --h1-size: 34px;
        --h1-size-span: 24px;
        --h2-size-1: 30px;
        --h2-size-2: 26px;
        --h3-size: 18px;
        --p-size-1: 20px;
        --p-size-2: 17px;
        --p-size-3: 15px
    }

    .pagewrapper .content-wrap {
        padding-block: 60px
    }

    .zwc-banner-sec p {
        font-size: 16px
    }

    .zwc-banner-sec .zwc-banner-logos {
        --card-w: 124px;
        --card-h: 130px;
        --card-radius: 22px;
        --ring-size: 104px;
        --circle-size: 82px;
        --logo-size: 46px;
        --vs-size: 32px;
        margin-top: 48px
    }

    .zwc-banner-sec .zwc-banner-vs {
        margin-inline: -10px
    }

    .zwc-realcase-sec .zwc-realcase-inner {
        grid-template-columns: 1fr;
        gap: 0
    }

    .zwc-realcase-sec .zwc-doc-nav {
        display: none
    }

    /* left-align everything that is centered on desktop */
    .zwc-banner-sec,
    .zwc-intro-sec .zwc-intro-inner,
    .zwc-platforms-sec .zwc-platforms-inner > h2,
    .zwc-comparison-sec .zwc-comparison-inner,
    .zwc-pick-sec .zwc-pick-inner > h2,
    .zwc-pick-sec .zwc-pick-inner > p,
    .zwc-pick-sec .zwc-pick-outro,
    .zwc-bottom-cta-sec,
    .zwc-faq-wrap {
        text-align: left
    }

    .pagewrapper .zwc-cta-wrap,
    .zwc-comparison-sec .zwc-comparison-logos,
    .zwc-comparison-sec .zwc-compare-actions {
        justify-content: flex-start
    }

    .zwc-banner-sec h1,
    .zwc-banner-sec p,
    .zwc-intro-sec .zwc-intro-wrap,
    .zwc-platforms-sec .zwc-platforms-inner > h2,
    .zwc-comparison-sec .zwc-comparison-inner > p,
    .zwc-pick-sec .zwc-pick-inner > p,
    .zwc-pick-sec .zwc-pick-outro,
    .zwc-bottom-cta-sec .zwc-bottom-cta-inner h2,
    .zwc-bottom-cta-sec .zwc-bottom-cta-inner p {
        margin-inline: 0;
        max-width: 100%
    }
}

@media only screen and (max-width: 480px) {
    .pagewrapper {
        --h1-size: 30px;
        --h1-size-span: 22px
    }

    .zwc-banner-sec .zwc-banner-logos {
        --card-w: 86px;
        --card-h: 92px;
        --card-radius: 18px;
        --ring-size: 80px;
        --circle-size: 64px;
        --logo-size: 36px;
        --vs-size: 28px;
        margin-top: 40px
    }

    .zwc-banner-sec .zwc-banner-vs {
        margin-inline: -8px;
        font-size: 11px
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}