:root {
    --cp-bg: #0f1012;
    --cp-surface: #131313;
    --cp-surface-2: #171717;
    --cp-line: #1f1f1f;
    --cp-line-2: rgba(255,255,255,0.12);
    --cp-line-3: #2e2e2e;
    --cp-ink: #fff;
    --cp-ink-2: #b9b9b9;
    --cp-ink-3: #8a8d95;
    --cp-ink-4: #6a6a6a;
    --cp-blue: #2b55f7;
    --cp-blue-hover: #1f45de;
    --cp-email: #519ff7;
    --cp-sms: #feea85;
    --cp-whatsapp: #3fd6a3;
    --cp-voice: #d05e64;
    --cp-purple: #9b6cf5;
    --cp-radius-shell: 44px;
    --cp-radius-card: 20px;
    --cp-radius-note: 12px;
    --cp-radius-btn: 6px;
    --cp-font: var(--zf-primary-regular),Arial,Helvetica,sans-serif;
    --cp-font-medium: var(--zf-primary-medium),Arial,Helvetica,sans-serif;
    --cp-font-semibold: var(--zf-primary-semibold),Arial,Helvetica,sans-serif;
    --cp-font-bold: var(--zf-primary-bold),Arial,Helvetica,sans-serif;
    --cp-font-price: "Zoho_Puvi_Serif","Times New Roman",Times,Georgia,serif;
    --cp-display: clamp(34px,4.9vw,78px);
    --cp-display-lh: 1.2
}

.zwc-shell,.zwc-shell *,.zwc_banner .content-wrap,.zwc_banner .content-wrap *,.zwc-bottom .content-wrap,.zwc-bottom .content-wrap * {
    box-sizing: border-box
}
.zw-product-header {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
}
.zw-template-inner {
    background: transparent;
    margin: 0;
    overflow: hidden;
    background: var(--cp-bg);
    color: var(--cp-ink);
    font-family: var(--cp-font)
}

.zw-template-inner .zw-page-inner-wrap {
    position: relative;
    padding-top: 150px;
}

.zwc-currency-switch {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap
}

.zw-template-inner h1,.zw-template-inner h2,.zw-template-inner h3,.zw-template-inner h4 {
    font-family: var(--cp-font-medium);
    color: var(--cp-ink)
}

.zw-template-inner a:focus-visible,.zw-template-inner button:focus-visible {
    outline: 2px solid var(--cp-email);
    outline-offset: 3px
}

.zwc_banner,.zwc-bottom {
    position: relative;
    isolation: isolate
}

.zwc_banner::before,.zwc-bottom::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
   //
    background-image: radial-gradient(circle,rgba(255,255,255,0.5) .7px,transparent .8px),radial-gradient(circle,rgba(255,255,255,0.32) .7px,transparent .8px),radial-gradient(circle,rgba(255,255,255,0.22) .6px,transparent .7px);
    background-position: 0 0,61px 43px,29px 91px;
    pointer-events: none;
    background:url(/sites/zweb/images/cpaas/sms-api/hero-decoration-starfield.svg);
}

.zwc_banner::after {
  content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin-inline:auto;top: -420px;
    width: 1180px;
    height: 860px;
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%,rgba(140,173,255,0.15) 0,rgba(140,173,255,0) 100%);
}
.zwc-bottom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  margin-inline:auto;
  top: 30%;
  width: 1180px;
  height: 420px;
  pointer-events: none;
  border-radius: 1100px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 71, 255, 0.06) 0%, rgba(0, 71, 255, 0.00) 100%);
}

.zwc-eyebrow {
    display: block;
    margin: 0 0 22px;
    color: #3fd6a3;
    font-family: var(--cp-font-semibold);
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: .96px
}

.zwc-grad-head {
    margin: 0;
    font-size: var(--cp-display);
    line-height: var(--cp-display-lh);
    letter-spacing: -0.015em;
    background: linear-gradient(180deg,#aeaeae 0,#FFF 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-wrap: balance
}

.zwc-banner-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px
}
.zwc-chan-name em:last-child {
    display: block;
    width: 100%;
}
.zw-template-inner .act-btn.cta-btn,.zwc-ghost-btn {
    display: inline-block;
    min-width: 166px;
    padding: 15px 30px;
    border-radius: var(--cp-radius-btn);
    text-align: center;
    font-family: var(--cp-font-semibold);
    font-size: 16px;
    line-height: 20px;
    text-transform: none;
    text-decoration: none;
    transition: background .2s ease,border-color .2s ease,color .2s ease
}

.zw-template-inner .act-btn.cta-btn {
    background: var(--cp-blue);
    border: 1px solid var(--cp-blue);
    color: #fff
}

.zwc-ghost-btn {
    background: transparent;
    border: 1px solid var(--cp-line-3);
    color: var(--cp-ink)
}

.zwc_banner {
    padding: 0px 0 92px;
    text-align: center
}

.zwc_banner .zwc-banner-lead {
    max-width: 820px;
    margin: 26px auto 34px;
    color: var(--cp-ink-2);
    font-size: 18px;
    line-height: 1.65
}

.zwc-chan-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 52px 0 0;
    padding: 0;
    list-style: none;
}

.zwc-chan-legend li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 30px;
    font-size: 15px;
    line-height: 1.5;
    border-left: 1px solid var(--cp-line-2)
}

.zwc-chan-legend li:first-child {
    border-left: 0
}

.zwc-legend-name {
    color: var(--ch,var(--cp-ink));
    font-family: var(--cp-font-semibold)
}

.zwc-legend-val {
    color: var(--cp-ink-3)
}

.zwc-chan-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ch,var(--cp-ink-3));
    align-self: center;
    transform: translateY(-1px)
}

[data-channel="email"] {
    --ch: var(--cp-email)
}

[data-channel="sms"] {
    --ch: var(--cp-sms)
}

[data-channel="whatsapp"] {
    --ch: var(--cp-whatsapp)
}

[data-channel="voice"] {
    --ch: var(--cp-voice)
}

.zwc-shell {
    position: relative;
    width: 92%;
    max-width: 1368px;
    margin: 0 auto;
    padding: 84px 64px 84px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--cp-radius-shell)
}

.zwc-shell .content-wrap {
    width: 100%;
    max-width: 1240px
}

.zwc-shell-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cp-blue);
    box-shadow: 0 0 12px 3px rgba(43,85,247,0.55);
    pointer-events: none
}

/* The two edge markers circulate in opposite directions — the left one runs
   top to bottom while the right one runs bottom to top, so the pair always
   sits on opposite ends of the shell and reads as one continuous rotation.
   They fade at the corners so the loop's restart never shows as a jump. */
@keyframes zwc-dot-down {
    0% {
        top: 0;
        opacity: 0
    }

    10%,90% {
        opacity: 1
    }

    100% {
        top: 100%;
        opacity: 0
    }
}

@keyframes zwc-dot-up {
    0% {
        top: 100%;
        opacity: 0
    }

    10%,90% {
        opacity: 1
    }

    100% {
        top: 0;
        opacity: 0
    }
}

.zwc-shell-dot-left {
    left: -5px;
    top: 0;
    transform: translateY(-50%);
    animation: zwc-dot-down 6s linear infinite
}

.zwc-shell-dot-right {
    right: -5px;
    top: 100%;
    transform: translateY(-50%);
    animation: zwc-dot-up 6s linear infinite
}

.zwc-shell-dot-bottom {
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
display:none;
}

.zwc-shell-dot-bottom::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 1px;
    height: 66px;
    transform: translateX(-50%);
    background: linear-gradient(0,rgba(43,85,247,0.5),rgba(43,85,247,0))
}

.zwc-chan-pricing {
    margin: 0;
    padding: 0
}

.zwc-chan-pricing>.content-wrap {
    display: block;
    padding-bottom: 0
}
.zwc_banner .content-wrap {
    max-width: 1368px;
}
.zwc-chan-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 56px
}

.zwc-seg-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 172px;
    padding: 12px 24px;
    border: 1px solid color-mix(in srgb,var(--ch) 30%,transparent);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: var(--cp-font-medium);
    font-size: 15px;
    line-height: 1.3;
    cursor: pointer;
    transition: color .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease
}

#zwc-tab-whatsapp.zwc-seg-tab.zactive {
    color: #3fd6a3;
    border: 2px solid rgba(73,253,152,0.05);
    background: rgba(73,253,152,0.05)
}

#zwc-tab-email.zwc-seg-tab.zactive {
    border: 2px solid rgba(0,71,255,0.45);
    background: rgba(0,71,255,0.10);
    color: #4276ff
}

#zwc-tab-sms.zwc-seg-tab.zactive {
    border: 2px solid rgba(254,234,133,0.10);
    background: rgba(254,234,133,0.10);
    color: #feea85
}

#zwc-tab-voice.zwc-seg-tab.zactive {
    border: 2px solid rgba(208,94,100,0.05);
    background: rgba(208,94,100,0.05);
    color: #d05e64
}

.zwc-panel[hidden] {
    display: none
}

.zwc-chan-card {
    display: grid;
    grid-template-columns: minmax(0,0.88fr) minmax(0,1.12fr);
    border-radius: var(--cp-radius-card);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: #151619
}

@supports not(color: color-mix(in srgb,red 50%,blue)) {
    .zwc-chan-card {
        border-color:var(--cp-line-2);
        background: #101010
    }
}

.zwc-chan-main {
    padding: 62px 88px 62px 64px;
    position: relative
}

.zwc-chan-facts {
    position: relative;
    padding: 62px 64px 62px 64px
}

.zwc-chan-facts::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 42px;
    bottom: 42px;
    width: 1px;
    background: rgba(255, 255, 255, 0.07);
}

.zwc-chan-name {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    font-family: var(--cp-font-bold);
    font-size: 20px;
    line-height: 1.3
}

.zwc-chan-name em {
    color: #fff;
    font-family: var(--cp-font-semibold);
    font-size: 15px;
    font-style: normal
}

.zwc-chan-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    margin: 14px 0 0
}

.zw-template-inner .zwc-price {
color: var(--cp-ink);
    font-family: var(--zf-primary-boldserif);
    font-size: 66px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.zw-template-inner .zwc-price .z-price-text em {
    font-size: .45em;
    font-style: normal
}

.zwc-chan-unit {
    color: #e9e9e9;
    font-size: 14px;
    line-height: 1.5
}

.zwc-chan-desc {
    max-width: 470px;
    margin: 22px 0 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.6
}

.zwc-chan-points {
    margin: 34px 0 0;
    padding: 34px 0 0;
    list-style: none;
    border-top: 1px solid rgba(255,255,255,0.07)
}

.zwc-chan-points li {
    position: relative;
    margin: 0 0 14px;
    padding-inline-start:22px;color: #ebebeb;
    font-size: 14px;
    line-height: 1.55;
    font-family: var(--cp-font-medium)
}

.zwc-chan-points li:last-child {
    margin-bottom: 0
}

.zwc-chan-points li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ch)
}

.zwc-chan-facts h3 {
    margin: 0 0 14px;
    font-family: var(--cp-font-bold);
    font-size: 21px;
    line-height: 1.35
}

.zwc-chan-facts>p {
    margin: 0 0 22px;
    color: #9da0a8;
    font-size: 14.5px;
    line-height: 1.65
}

.zwc-chan-facts>p strong {
    font-family: var(--cp-font-semibold)
}

.zwc-chan-facts .zpricegroup,.zwc-chan-legend .zpricegroup {
    display: inline;
    font-size: inherit;
    font-family: inherit;
    color: inherit
}

.zwc-chan-note {
    margin: 30px 0 0;
    padding: 22px 24px 24px;
    border-radius: 12px;
    border: 1px solid rgba(0,71,255,0.28);
    background: #1b1c21
}

@supports not(color: color-mix(in srgb,red 50%,blue)) {
    .zwc-chan-note {
        border-color:var(--cp-line-3);
        background: rgba(255,255,255,0.02)
    }
}

.zwc-chan-note h4 {
    margin: 0 0 8px;
    font-family: var(--cp-font-bold);
    font-size: 18px;
    line-height: 1.4
}

.zwc-chan-note .zwc-note-price {
    margin: 0 0 16px;
    color: var(--cp-ink);
    font-family: var(--cp-font-medium);
    font-size: 17px;
    line-height: 1.45
}

.zwc-chan-note p {
    margin: 0 0 14px;
    color: #9da0a8;
    font-size: 12px;
    line-height: 1.6
}

.zwc-chan-note p:last-child {
    margin-bottom: 0
}

.zwc-chan-foot {
    margin: 20px 0 0;
    color: var(--cp-ink-4);
    font-size: 15px;
    line-height: 1.6
}

.zwc-chan-facts>.zwc-chan-foot:first-of-type {
    margin-top: 0
}

.zwc-chan-pricing .ztax-container {
    margin: 24px 0 0;
    text-align: center
}

.zwc-chan-pricing .ztax-container p {
    margin: 0;
    color: var(--cp-ink-4);
    font-size: 13px;
    line-height: 1.6
}

.zwc-value-props {
    padding: 110px 0 0;
    text-align: center
}

.zwc-value-props .zwc-grad-head {
    font-size: clamp(30px,4.2vw,64px)
}

.zwc-section-lead {
    margin: 18px 0 0;
    color: var(--cp-ink-2);
    font-size: 18px;
    line-height: 1.6
}

.zwc-value-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 25px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
    text-align: start
}

.zwc-value-grid li {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    background: #151619;
    overflow: hidden
}

.zwc-value-grid li:nth-child(4),.zwc-value-grid li:nth-child(5) {
    grid-column: span 3
}

.zwc-value-head {
    padding: 32px 30px 28px
}

.zwc-value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: var(--ac);
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.05)
}

@supports not(color: color-mix(in srgb,red 50%,blue)) {
    .zwc-value-icon {
        border-color:var(--cp-line-3);
        background: rgba(255,255,255,0.04)
    }
}

.zwc-value-grid li[data-accent="blue"] {
    --ac: var(--cp-email)
}

.zwc-value-grid li[data-accent="green"] {
    --ac: var(--cp-whatsapp)
}

.zwc-value-grid li[data-accent="yellow"] {
    --ac: var(--cp-sms)
}

.zwc-value-grid li[data-accent="red"] {
    --ac: var(--cp-voice)
}

.zwc-value-grid li[data-accent="purple"] {
    --ac: var(--cp-purple)
}

.zw-template-inner .zwc-value-grid h3 {
    margin: 30px 0 0;
    font-family: var(--cp-font-medium);
    font-size: 21px;
    line-height: 1.35;
    color: rgba(255,255,255,0.95)
}

.zwc-value-grid li>p {
    flex: 1 1 auto;
    margin: 0;
    padding: 26px 30px 34px;
    color: var(--cp-ink-3);
    font-size: 15px;
    line-height: 1.6;
    background: #1b1c21;
    letter-spacing: -0.2px
}

.zwc-bottom {
    padding: 150px 0 168px;
    text-align: center
}

.zwc-bottom .zwc-grad-head {
    max-width: 1150px;
    margin: 0 auto;
    text-wrap: pretty
}

.zwc-bottom .zwc-banner-cta {
    margin-top: 44px
}

.zwc-chan-main::before {
    content: '';
    position: absolute;
    border-radius: 463px;
    opacity: .2;
    width: 463px;
    height: 418px;
    background: #0047ff;
    filter: blur(102px);
    display: block;
    top: -10%;
    left: -10%;
pointer-events: none;
}

#zwc-panel-sms .zwc-chan-main::before {
    background: #feea85
}

#zwc-panel-whatsapp .zwc-chan-main::before {
    background: #3fd6a3
}

#zwc-panel-voice .zwc-chan-main::before {
    background: #d05e64
}

#zwc-panel-sms .zwc-chan-facts:after,#zwc-panel-whatsapp .zwc-chan-facts:after {
    content: '';
    position: absolute;
    border-radius: 463px;
    opacity: .05;
    width: 463px;
    height: 418px;
    background: #feea85;
    filter: blur(102px);
    display: block;
    top: -10%;
    left: -10%
}

#zwc-panel-whatsapp .zwc-chan-facts:after {
    background: #3fd6a3
}

#zwc-panel-whatsapp .zwc-chan-note {
    border: 1px solid rgba(63,214,163,0.28);
    background: #1b1c21
}

#zwc-panel-whatsapp .zwc-chan-note p {
    font-size: 12px
}

.zwc-chan-facts>p.zwc-chan-foot {
    margin: 16px 0 0;
    color: #6b6e76;
    font-size: 12px
}

#zwc-panel-whatsapp .zwc-chan-note {
    margin: 12px 0 0
}

#zwc-panel-voice .zwc-chan-note {
    border: 1px solid rgba(208,94,100,0.28);
    background: #1b1c21
}

.zw-product-header {
    /* background:var(--cp-bg); */
    /* position:relative; */
}

.zw-product-header:before {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--cp-bg);
    z-index: -1;
    pointer-events: none
}

.zw-product-header:after {
    position: absolute;
    z-index: 101;
    width: 1180px;
    height: 200px;
    border-radius: 1180px;
    background: radial-gradient(50% 50% at 50% 50%,rgba(140,173,255,0.15) 0,rgba(140,173,255,0.00) 100%);
    pointer-events: none;
    opacity: .5;
    left: 0;
    right: 0;
    top: -190%;
    margin: auto;
    bottom: auto
}

em.zwc-beta-tag {
    font-size: 10px;
    color: #FEEA85;
    letter-spacing: 0.8px;
    border-radius: 4px;
    background: rgba(254, 234, 133, 0.16);
    padding: 4px 7px 3px 7px;
}

#zwc-panel-whatsapp em.zwc-beta-tag {
    background: rgba(63, 214, 163, 0.16);
color:#3FD6A3;
}
#zwc-panel-voice em.zwc-beta-tag {
background: rgba(208, 94, 100, 0.16);
color:#D05E64;
}
#zwc-tab-voice {
    border: 1px solid rgba(255, 87, 87, 0.10);
}

#zwc-tab-whatsapp {
    border: 1px solid rgba(73, 253, 152, 0.10);
}

#zwc-tab-sms {
    border: 1px solid rgba(254, 234, 133, 0.10);
}

#zwc-tab-email {
    border: 1px solid rgba(94, 138, 255, 0.20);
}

#zwc-tab-email .zwc-chan-dot {
    background: #0047FF;
}
#zwc-tab-sms .zwc-chan-dot {
    background: #FEEA85;
}
#zwc-tab-whatsapp .zwc-chan-dot {
    background: #3FD6A3;
}
#zwc-tab-voice .zwc-chan-dot {
    background: #D05E64;
}
#zwc-panel-whatsapp .zwc-chan-facts>p.zwc-chan-foot,#zwc-panel-sms .zwc-chan-facts>p.zwc-chan-foot {
    font-size: 14px;
    margin-top: 20px;
}
#zwc-panel-whatsapp .zwc-chan-facts>p.zwc-chat-foot-notes,#zwc-panel-sms .zwc-chan-facts>p.zwc-chat-foot-notes {
    font-size: 12px;
    color: #6b6e76;
    margin: 10px 0 10px;
    padding-left: 20px;
    position: relative;
}
#zwc-panel-whatsapp .zwc-chan-facts>p.zwc-chat-foot-notes:before,#zwc-panel-sms .zwc-chan-facts>p.zwc-chat-foot-notes:before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ch);
    left: 3px;
}

.zwc-panel a {
    color: var(--zwc-link-clr-dark);
}
#zwc-panel-voice .zwc-callrates p {
display:none;
}
.ccode-in #zwc-panel-voice .zwc-chan-note p.zwc-for-in,.ccode-eucountries #zwc-panel-voice .zwc-chan-note p.zwc-for-eu,.ccode-au #zwc-panel-voice .zwc-chan-note p.zwc-for-au, .ccode-in #zwc-panel-voice .zwc-callrates p.zwc-for-in,.ccode-eucountries #zwc-panel-voice .zwc-callrates p.zwc-for-eu,.ccode-au #zwc-panel-voice .zwc-callrates p.zwc-for-au{
display:block;
}
body:not(.ccode-in):not(.ccode-eucountries):not(.ccode-au) #zwc-panel-voice .zwc-chan-note p.zwc-default,body:not(.ccode-in):not(.ccode-eucountries):not(.ccode-au) #zwc-panel-voice .zwc-callrates p.zwc-default {
    display: block;
}
.zwc-callrates .zwc-chan-desc>span {
    display: block;
}
.zwc-callrates .zwc-chan-desc>span:first-child{
    margin-bottom:5px
} 
@media only screen and (max-width: 1480px) {
.zwc-chan-legend li {
    width: 50%;
}
.zwc-chan-legend {
    max-width: 800px;
row-gap: 15px;
    margin-inline: auto;
}
.zwc-chan-legend li:nth-child(3){
    border-left:0;
}
}
@media only screen and (max-width: 1200px) {
    .zwc-shell {
        padding:56px 40px 64px
    }

    .zwc-chan-main {
        padding: 48px 40px 48px 44px
    }

    .zwc-chan-facts {
        padding: 48px 44px
    }

    .zw-template-inner .zwc-price {
        font-size: 68px
    }

    .zwc-chan-legend li {
        padding: 0 22px
    }
}

@media only screen and (max-width: 991px) {
    .zwc_banner {
        padding:0px 0 60px
    }

    .zwc-shell {
        width: 94%;
        padding: 44px 28px 56px;
        border-radius: 24px
    }

    .zwc-chan-card {
        grid-template-columns: minmax(0,1fr)
    }

    .zwc-chan-main {
        padding: 40px 32px 36px
    }

    .zwc-chan-facts {
        padding: 36px 32px 40px
    }

    .zwc-chan-facts::before {
        inset-inline: 32px;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px
    }

    .zwc-chan-desc {
        max-width: none
    }

    .zwc-value-props {
        padding-top: 76px
    }

    .zwc-value-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 20px;
        margin-top: 44px
    }

    .zwc-value-grid li,.zwc-value-grid li:nth-child(4),.zwc-value-grid li:nth-child(5) {
        grid-column: span 1
    }

    .zwc-value-grid li:last-child {
        grid-column: span 2
    }

    .zwc-bottom {
        padding: 108px 0 118px
    }

    .zwc-shell-dot-left,.zwc-shell-dot-right {
        display: none
    }

    .zwc-chan-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 10px;
        margin: 0 0 36px;
        padding: 2px 0;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none
    }

    .zwc-chan-tabs::-webkit-scrollbar {
        display: none
    }

    .zwc-seg-tab {
        flex: none;
        min-width: 0;
        padding: 12px 22px;
        scroll-snap-align: center
    }
}

@media only screen and (max-width: 767px) {
    .zwc_banner {
        padding:0px 0 48px
    }
.zw-template-inner .zw-page-inner-wrap {
    padding-top: 100px;
}
    .zwc-eyebrow {
        margin-bottom: 16px;
        font-size: 14px
    }

    .zwc_banner .zwc-banner-lead {
        margin: 20px auto 28px;
        font-size: 16px
    }

    .zw-template-inner .act-btn.cta-btn,.zwc-ghost-btn {
        min-width: 0;
        flex: 1 1 auto;
        max-width: 260px;
        font-size: 15px
    }

    .zwc-chan-legend {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 38px;
        max-width: 320px;
        margin-inline:auto}

    .zwc-chan-legend li {
        width: 100%;
        padding: 0;
        border-left: 0
    }

    .zwc-shell {
        width: 100%;
        padding: 36px 0 44px;
        border-left: 0;
        border-right: 0;
        border-radius: 0
    }

    .zwc-shell .content-wrap {
        width: 90%
    }

    .zwc-shell-dot-bottom {
        display: none
    }

    .zwc-chan-tabs {
        margin: 0 -5.55% 32px;
        padding: 2px 5.55%
    }

    .zwc-seg-tab {
        padding: 12px 20px;
        font-size: 15px
    }

    .zwc-chan-card {
        border-radius: 16px
    }

    .zwc-chan-main {
        padding: 32px 22px 28px
    }

    .zwc-chan-facts {
        padding: 28px 22px 32px
    }

    .zwc-chan-name {
        font-size: 20px;
        gap: 8px
    }

    .zwc-chan-name em {
        font-size: 14px
    }

    .zw-template-inner .zwc-price {
        font-size: 54px
    }

    .zwc-chan-price {
        gap: 10px
    }

    .zwc-chan-desc,.zwc-chan-points li,.zwc-chan-facts>p {
        font-size: 15px
    }

    .zwc-chan-points {
        margin-top: 26px;
        padding-top: 26px
    }

    .zwc-chan-facts h3 {
        font-size: 19px
    }

    .zwc-chan-note {
        padding: 18px 18px 20px
    }

    .zwc-value-props {
        padding: 56px 0 0
    }

    .zwc-section-lead {
        font-size: 16px
    }

    .zwc-value-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 16px;
        margin-top: 34px
    }

    .zwc-value-grid li,.zwc-value-grid li:nth-child(4),.zwc-value-grid li:nth-child(5),.zwc-value-grid li:last-child {
        grid-column: span 1
    }

    .zwc-value-head {
        padding: 26px 24px 22px
    }

    .zwc-value-grid h3 {
        margin-top: 22px;
        font-size: 19px
    }

    .zwc-value-grid li>p {
        padding: 20px 24px 26px;
        font-size: 15px
    }

    .zwc-bottom {
        padding: 84px 0 92px
    }

    .zwc-bottom .zwc-banner-cta {
        margin-top: 32px
    }
}

@media only screen and (max-width: 480px) {
    .zwc-chan-price {
        flex-direction:column;
        gap: 2px
    }

    .zw-template-inner .zwc-price {
        font-size: 48px
    }

    .zwc-banner-cta {
        gap: 12px
    }

    .zw-template-inner .act-btn.cta-btn,.zwc-ghost-btn {
        flex: 1 1 100%;
        max-width: 200px;
    }
    .zwc-chan-tabs {
        overflow: hidden;
        flex-wrap: wrap;
    }
.zwc-seg-tab {
    width: 48%;
}
}

@media(prefers-reduced-motion:reduce) {
    .zw-template-inner .act-btn.cta-btn,.zwc-ghost-btn,.zwc-seg-tab {
        transition: none
    }

    /* The markers fall back to the resting positions they held before. */
    .zwc-shell-dot-left,.zwc-shell-dot-right {
        animation: none;
        opacity: 1
    }

    .zwc-shell-dot-left {
        top: 74%
    }

    .zwc-shell-dot-right {
        top: 76%
    }
}
