.zwc-sprite-icon-aft::after,.zwc-sprite-icon-bef::before {
    --zwc-sprite-img: url(/sites/zweb/images/pagesense/home/pagesense-home-sprite.png);
    background-image: var(--zwc-sprite-img);
    background-repeat: no-repeat;
    background-position: var(--zwc-bg-pos,-10% 50%);
    background-size: var(--zwc-bg-size,230%) auto;
    display: inline-block;
    content: "";
    position: absolute
}

.zwc-sprite-icon-aft,.zwc-sprite-icon-bef {
    position: relative
}

body {
    text-wrap: pretty
}

.zw-product-header {
    background: #fbf1eb
}

.zwc-panel-title,.zwc-security-title,.zwc-bottom-cta-title,.zwc-limits-title {
    font-family: var(--zf-primary-medium);
    font-size: clamp(28px,2.78vw,48px);
    line-height: 1.1667;
    letter-spacing: -0.96px
}

.zwc-panel-info-title,.zwc-zia-item-title,.zwc-security-item-title {
    font-family: var(--zf-primary-medium);
    font-size: clamp(22px,1.44vw+10.95px,24px);
    line-height: 1.25;
    letter-spacing: -0.64px
}

.zwc-banner-desc,.zwc-panel-desc,.zwc-security-desc {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.4px
}

.zwc-panel-tab,.zwc-panel-info-lead,.zwc-panel-info-desc,.zwc-panel-point,.zwc-accordian-item-desc,.zwc-zia-item-desc,.zwc-security-item-desc,.zwc-limits-item-desc {
    font-size: 18px;
    line-height: 1.5556;
    letter-spacing: -0.36px
}

.zwc-banner-desc,.zwc-accordian-item-desc,.zwc-zia-item-desc,.zwc-security-desc,.zwc-security-item-desc,.zwc-limits-item-desc {
    margin: 0
}

.zwc-banner-wrap {
    position: relative;
    overflow: hidden;
    padding: clamp(56px,6.37vw,110px) 0 clamp(140px,21.99vw,380px)
}

.zwc-banner-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.zwc-banner-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom
}

.zwc-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.zwc-banner-info {
    width: 48%;
    padding-bottom: 80px
}

.zwc-banner-wrap h1 {
    font-family: var(--zf-primary-medium);
    font-size: clamp(34px,3.7vw,64px);
    line-height: 1.125;
    letter-spacing: -1.28px;
    margin-bottom: 18px;
}

.zwc-banner-form {
    width: 38.91%
}

.zwc-banner-cta {
    display: none;

}

.umain .zwc-banner-form {
    display: none
}

.umain .zwc-banner-cta {
    display: inline-block
}

.umain .zwc-banner-info {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    max-width: 900px
}

.zwc-trust-wrap {
    background-color: #fbf1eb;
    padding: 20px 0 0
}
.umain .zwc-banner-info .zwc-cta-group {
justify-content: center;
}

/* A rule either side of the label. Measured off the comp: 132px long, 1px
   thick, 22px clear of the text. The colour is not the comp's — that strip is
   a dark band and this one is cream — so it matches the contrast instead: the
   comp's rule sits ~12% off its ground, and rgba(0,0,0,.12) is the same step
   down from #fbf1eb, and is what the tab pills already use.

   flex rather than absolutes, so the rules shrink before the text does and a
   narrow window closes them up instead of overflowing. */
.zwc-trust-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    font-family: var(--zf-primary-medium);
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: -0.32px;
    text-align: center;
    text-transform: uppercase;
    margin: 0 0 50px;
}

.zwc-trust-label::before,
.zwc-trust-label::after {
    content: "";
    flex: 0 1 132px;
    min-width: 0;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.12)
}

/* The marquee window. Keeps the derived gutter the static row used, so the
   band is still the comp's 1527px where there is room and never wider than
   the viewport. overflow clips the track; the mask fades both ends so logos
   arrive and leave instead of popping at a hard edge. */
.zwc-trust-marquee {
    --zwc-trust-row: min(1527px,100vw - 48px);
    --zwc-trust-gap: clamp(30px,3.7vw,64px);
    overflow: hidden;
    margin: 0 calc((100% - var(--zwc-trust-row)) / 2);
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    padding-bottom: 40px;
}

/* The track. The list holds the seven logos twice, so translating it exactly
   -50% lands clone n on original n and the loop is seamless.

   The spacing is margin-right on the items rather than gap on the track: gap
   sits only *between* items, so the two halves would differ by one gap and
   -50% would land a gap short, nudging on every cycle. A trailing margin on
   every item makes the halves identical. */
.zwc-trust-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    animation: zwc-trust-scroll 45s linear infinite
}

@keyframes zwc-trust-scroll {
    to {
        transform: translateX(-50%)
    }
}

/* Readable on demand — stop it while the pointer is over the row. */
.zwc-trust-marquee:hover .zwc-trust-list,
.zwc-trust-marquee:focus-within .zwc-trust-list {
    animation-play-state: paused
}

/* WCAG 2.2.2 (Pause, Stop, Hide): the row scrolls on its own for longer than
   five seconds, so it needs a control that stops it — hover and focus alone
   do not satisfy it, since neither is available to a touch or switch user.

   The button is a sibling of the marquee, not a child: the marquee clips its
   overflow and carries an edge mask, both of which would eat the control. */
/* The content box is the positioning context, not the marquee: the comp puts
   the control level with the label, above the row, rather than over the first
   logos. The marquee cannot host it anyway — it clips overflow and carries an
   edge mask. */
.zwc-trust-content {
    position: relative
}

.zwc-trust-toggle {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 0;
    width: 32px;
    height: 32px;
    margin-top: 15px;
    padding: 0;
    background-color: var(--zwc-tab-fill, #fff);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 50%;
    color: #57453f;
    cursor: pointer;
    transition: opacity 200ms ease
}

.zwc-trust-toggle:hover {
    opacity: .75
}

/* Drawn from borders rather than a sprite cell — the sheet has no play or
   pause glyph, and this is the same approach the CTA chevron uses. Pause is
   two bars from a left and right border; play is a single triangle. */
.zwc-trust-toggle::before {
    content: "";
    display: block;
    width: 10px;
    height: 12px;
    margin: 0 auto;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor
}

.zwc-trust-paused .zwc-trust-toggle::before {
    width: 0;
    height: 0;
    margin-left: 12px;
    border-left: 11px solid currentColor;
    border-right: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent
}

.zwc-trust-paused .zwc-trust-list {
    animation-play-state: paused
}

/* Stopped is the only state under reduced motion, so there is nothing to
   toggle and the control would be a dead end. */
@media(prefers-reduced-motion:reduce) {
    .zwc-trust-toggle {
        display: none
    }
}

.zwc-trust-item {
    margin-right: var(--zwc-trust-gap);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px
}

.zwc-trust-item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 168px;
    max-height: 100%;
    object-fit: contain;
    /* mix-blend-mode: multiply */
}

.zwc-section-wrap {
    padding: clamp(56px,6.37vw,110px) 0 clamp(64px,7.52vw,130px)
}

.zwc-panel-head {
    margin: 0 auto;
    text-align: center
}

.zwc-panel-title {
    margin: 0 auto 21px
}

.zwc-panel-desc {
    max-width: 803px;
    margin: 0 auto 33px
}

.zwc-panel-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.zwc-panel-tab {
    --zwc-tab-fill: #fff;
    --zwc-tab-band: #fff;
    background-color: var(--zwc-tab-fill);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 64px;
    color: #57453f;
    cursor: pointer;
    font-family: var(--zf-primary-regular);
    padding: 12px 22px
}

.zwc-panel-tab-current {
    background-color: transparent;
    background-image: linear-gradient(var(--zwc-tab-band),var(--zwc-tab-band)),linear-gradient(90deg,#e42527,#f9b21d,#089949,#226db4);
    background-origin: border-box;
    background-clip: padding-box,border-box;
    border-color: transparent;
    color: #ff633b;
    font-family: var(--zf-primary-semibold)
}

.zwc-accordian-panel,.zwc-panel-info {
    transition: opacity 240ms ease,visibility 0s
}

.zwc-accordian-panel[hidden],.zwc-panel-info[hidden] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease,visibility 0s linear 240ms
}

.zwc-panel-body {
    display: grid;
    margin-top: clamp(56px,6.13vw,106px)
}

.zwc-panel-info {
    grid-area: 1 / 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.zwc-panel-copy {
    width: 38.52%
}

.zwc-panel-info-title {
    color: #211a11;
    margin-bottom: 11px
}

.zwc-panel-info-lead {
    margin: 0 0 11px
}

.zwc-panel-info-desc {
    margin: 0 0 30px
}

.zwc-panel-point {
    padding-left: 30px
}

.zwc-panel-point:not(:last-child) {
    margin-bottom: 26px
}

/* The glyph centres itself on the first line instead of sitting at a fixed
   8px. The box is one line tall and the sprite is positioned at 50% down it,
   so the icon tracks the line-height: at 767px, where the line-height drops
   to normal, it rides up with the text rather than hanging low.

   1lh with an em fallback — the em value is this rule's own 1.5556 ratio, so
   a browser without lh lands in the same place at the default line-height. */
.zwc-panel-point::before {
    width: 18px;
    height: 1.5556em;
    height: 1lh;
    top: 0;
    left: 0;
    --zwc-bg-size: 1500%;
    --zwc-bg-pos: 14.2857% 50%
}

.zwc-accordian-wrap {
    background-color: #fbf1eb;
    padding: clamp(48px,5.5vw,95px) 0 clamp(56px,6.37vw,110px)
}

.zwc-accordian-wrap .zwc-panel-tab {
    --zwc-tab-fill: #fdf5f2;
    --zwc-tab-band: #fbf1eb
}

.zwc-accordian-title,.zwc-testing-title {
    max-width: 793px;
}

.zwc-accordian-body {
    display: grid;
    margin-top: clamp(60px,6.94vw,120px)
}

.zwc-accordian-panel {
    grid-area: 1 / 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* Load-bearing: makes the panel the containing block for the absolutely
       positioned media. Without it the media resolves against .content-wrap. */
    position: relative
}

.zwc-accordian-panel::after {
    content: "";
    width: 53.91%;
    aspect-ratio: 729 / 537
}

.zwc-accordian-list {
    width: 41.41%
}

.zwc-accordian-item {
    border-bottom: 1px solid #f3ded6;
    padding-bottom: 34px
}

/* No rule under the last row that renders. :last-child alone does not cover
   the Full-Stack panel: the parked MCP row is display: none but is still the
   structural last child, so the row above it would keep its border. The
   :has() arm catches whichever row a hidden one follows. */


/* Last row of the last panel: no rule and no trailing pad. Lives at the top
   level, not in the 991 block, so it applies in both layouts — the MCP row it
   used to trip over is commented out of the markup now, so :last-child lands
   on the row that actually renders. */
#zpanel-capability-fullstack .zwc-accordian-list:last-child .zwc-accordian-item:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

/* Hung off the top of each following row: :not(:last-child) counts the
   parked MCP row, so the last row that renders kept a trailing 24px. */
.zwc-accordian-item + .zwc-accordian-item {
    margin-top: 24px;
}

/* h3 qualifier so the page's own type scale outranks the common sheet's
   heading rule, which was winning and rendering these at 27px. The middle
   value follows this sheet's convention — comp px / 1728 * 100 — so 24px at
   the comp width: 24 / 1728 * 100 = 1.39vw. */
h3.zwc-accordian-item-title {
    font-family: var(--zf-primary-medium);
    font-size: clamp(22px, 1.39vw, 24px);
    line-height: 1.4286;
    letter-spacing: -0.84px;
    margin-bottom: 0
}

.zwc-accordian-item-btn {
    width: 100%;
    background: 0;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: left;
    padding: 0 54px 0 0
}

.zwc-accordian-item-btn::after {
    width: 24px;
    height: 24px;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto 0;
    --zwc-bg-size: 1500%;
    --zwc-bg-pos: 7.1429% 50%
}

.zwc-accordian-item-flag {
    color: #ff633b;
    font-family: var(--zf-primary-semibold);
    font-size: 13px;
    letter-spacing: normal
}

.zwc-accordian-item-desc {
    display: none
}

.zwc-accordian-group {
    display: none;
    font-family: var(--zf-primary-semibold);
    font-size: 16px;
    text-transform: uppercase;
    color: #ff633b;
    margin: 0 0 20px
}

.zwc-accordian-item-open {
    border-image: linear-gradient(90deg,#e42527,#f9b21d,#089949,#226db4) 1
}

.zwc-accordian-item-open .zwc-accordian-item-btn {
    padding-right: 66px
}

.zwc-accordian-item-open .zwc-accordian-item-btn::after {
    width: 32px;
    height: 32px;
    --zwc-bg-pos: 0 50%
}

.zwc-accordian-item-open .zwc-accordian-item-title {
    line-height: 1.1429;
    margin-bottom: 22px
}

.zwc-accordian-item-open .zwc-accordian-item-desc {
    display: block
}

.zwc-accordian-media {
    /* Every row's media sits in the same absolute slot and only the open one
       is painted. Hidden by opacity rather than display, so the swap can
       cross-fade instead of popping; visibility carries a delay equal to the
       fade when hiding, so the outgoing screen stays painted long enough to
       fade out. Same pattern the tab panels use. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease, visibility 0s linear 240ms;
    position: absolute;
    top: 0;
    right: 0;
    width: 53.91%;
    box-sizing: border-box;
    max-height: 100%;
    object-fit: contain;
    padding: 2%;
    border-radius: 20px;
    /* 100% 100%, not cover. The rows set their own height, so cover scaled
       the backdrop off whichever height it landed in — 0.947 on the short
       rows up to 1.228 on heatmap, a 30% swing, and the taller the row the
       more of the art got cropped. Mapping it to the box instead pins the
       horizontal scale at 690/729 for every row and keeps the whole
       illustration in frame; only the vertical follows the box. */
    background: url(/sites/zweb/images/pagesense/home/ps-mediabg.jpg) center / 100% 100% no-repeat
}

.zwc-accordian-item-open .zwc-accordian-media {
    opacity: 1;
    visibility: visible;
    transition: opacity 240ms ease, visibility 0s
}

#zacc-testing-ab+.zwc-accordian-media,#zacc-personalization-behavioral+.zwc-accordian-media,#zacc-fullstack-api+.zwc-accordian-media {
    aspect-ratio: 729 / 537
}

#zacc-testing-ab+.zwc-accordian-media{
    padding-bottom: 0
}

.zwc-testing-media {
    width: 57.03%;
    box-sizing: border-box;
    object-fit: contain;
    padding: 2%;
    border-radius: 20px;
    background: url(/sites/zweb/images/pagesense/home/ps-mediabg.jpg) center / cover no-repeat
}

.zwc-testing-info-title {
    max-width: 376px
}

.zwc-zia-wrap {
    background-color: #fff3ee;
    padding: clamp(60px,6.94vw,120px) 0
}

.zwc-zia-head {
    max-width: 1050px
}

.zwc-zia-title {
    max-width: 740px;
    margin-bottom: 16px
}

.zwc-zia-desc {
    max-width: 1050px;
    margin-bottom: 0
}

.zwc-zia-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    margin-top: clamp(50px,5.79vw,100px)
}

.zwc-zia-list {
    width: 49%
}

.zwc-zia-item {
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 40px;
    isolation: isolate
}

.zwc-zia-item:not(:last-child) {
    margin-bottom: clamp(48px,5.21vw,90px)
}

.zwc-zia-item::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border: 1px solid transparent;
    border-radius: 20px;
    background-image: linear-gradient(#fff,#fff),linear-gradient(135deg,#e42527,#f9b21d,#089949,#226db4);
    background-origin: border-box;
    background-clip: padding-box,border-box;
    opacity: 0;
    transition: opacity 250ms ease;
    pointer-events: none
}

.zwc-zia-item-current::after {
    opacity: 1
}

.zwc-zia-item-next .zwc-zia-item-title {
    color: #66615f
}

.zwc-zia-item-next .zwc-zia-item-desc {
    color: #404040
}

.zwc-zia-item-last {
    color: #e5dbd6
}

.zwc-zia-item,.zwc-zia-item-title,.zwc-zia-item-desc {
    transition: color 250ms ease
}

.zwc-zia-media {
    --zwc-zia-stick: 70px;
    position: sticky;
    top: var(--zwc-zia-stick);
    width: 44.5%;
    /* 560px is the frame's intended width; the viewport term only pulls it
       under that on a window too short to show it. Loosened by dropping the
       24px tail — the stick offset is the only reservation now — so 560 is
       reached from roughly 890px of viewport height upward instead of 890+24. */
    max-width: min(560px, calc((100vh - var(--zwc-zia-stick)) * 553 / 810));
    box-sizing: border-box;
    aspect-ratio: 553 / 810;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 40px;
    background-image: url(/sites/zweb/images/pagesense/home/zia-panelbg.png),linear-gradient(135deg,#e42527,#f9b21d,#089949,#226db4);
    background-size: cover,auto;
    background-position: center,0 0;
    background-repeat: no-repeat,repeat;
    background-origin: border-box;
    background-clip: padding-box,border-box
}

.zwc-zia-card {
    display: block;
    flex: none;
    width: 122%;
    max-width: none;
    height: auto;
    transform: translateY(3.63%)
}

.zwc-persona-title {
    max-width: 700px
}

.zwc-persona-desc {
    max-width: 896px
}

.zwc-persona-info-title {
    font-family: var(--zf-primary-semibold)
}

.zwc-persona-media {
    width: 52.73%;
    object-fit: contain
}

.zwc-security-wrap {
    background: url(/sites/zweb/images/pagesense/home/security-wrapbg.png) no-repeat center / cover;
    color: #fff;
    padding: clamp(64px,7.52vw,130px) 0 clamp(80px,9.26vw,160px)
}

.zwc-security-head,.zwc-limits-head {
    max-width: 906px;
    text-align: center;
    margin: 0 auto clamp(32px,3.36vw,58px)
}

.zwc-security-title {
    margin-bottom: 32px
}

.zwc-security-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.zwc-security-item {
    width: calc(50% - 10px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 40px;
    background: #241210
}

.zwc-security-item::before {
    width: 58px;
    height: 58px;
    top: 50px;
    left: 50px;
    --zwc-bg-size: 1500%
}

.zwc-security-item-secure::before {
    --zwc-bg-pos: 42.8571% 50%
}

.zwc-security-item-privacy::before {
    --zwc-bg-pos: 50% 50%
}

.zwc-security-item-compliance::before {
    --zwc-bg-pos: 57.1429% 50%
}

.zwc-security-item-performance::before {
    --zwc-bg-pos: 64.2857% 50%
}

.zwc-security-item-title {
    margin: 98px 0 20px
}

.zwc-limits-wrap {
    background-color: #fff;
    background-image: url(/sites/zweb/images/pagesense/home/limits-wrapbg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding: clamp(64px,7.52vw,130px) 0 clamp(70px,8.1vw,140px)
}

.zwc-limits-list {
    display: flex;
    gap: 23px;
    width: 1246px;
    max-width: 100%;
    margin: 0 auto
}

.zwc-limits-list-trio {
    margin-bottom: 20px
}

.zwc-limits-item {
    flex: 1;
    min-width: 0;
    background-color: #fff;
    border: 1px solid #ede0db;
    border-radius: 20px;
    box-shadow: 0 3px 1px rgba(0,0,0,0.04);
    padding: 48px
}

.zwc-limits-item-metrics {
    padding: 40px 65px
}

.zwc-limits-item::before {
    width: 58px;
    height: 58px;
    top: 52px;
    left: 52px;
    --zwc-bg-size: 1500%
}

.zwc-limits-item-users::before {
    --zwc-bg-pos: 71.4286% 50%
}

.zwc-limits-item-tests::before {
    --zwc-bg-pos: 78.5714% 50%
}

.zwc-limits-item-recordings::before {
    --zwc-bg-pos: 85.7143% 50%
}

.zwc-limits-item-integrations::before {
    --zwc-bg-pos: 92.8571% 50%
}

.zwc-limits-item-metrics::before {
    top: 42px;
    --zwc-bg-pos: 100% 50%
}

/* The two wide cards are 612px, leaving a 514px measure — wide enough that
   "Custom metrics" fits on one line, where the comp breaks it after
   "micro-conversions,". Capping the measure at 490 reproduces the comp's
   break (its first line measures 487) and is inert on the 400px cards, whose
   measure is already 302. */
.zwc-limits-item-desc {
    max-width: 490px
}

.zwc-limits-item-title {
    font-family: var(--zf-primary-medium);
    font-size: clamp(22px,1.62vw,28px);
    line-height: 1.4286;
    letter-spacing: -0.56px;
    color: #01070b;
    margin: 110px 0 24px
}

.zwc-limits-item-users .zwc-limits-item-title {
    margin-top: 116px
}

.zwc-bottom-cta-wrap {
    /* 100% 100%, not cover. The art is 2048x477 (4.3 wide) and the band is
       only that shape at desktop — at 500px it is 1.6, so cover scaled to the
       height and cropped ~848px off the sides, throwing away the warm glows
       that are the whole point of the image. Stretching keeps them at every
       width down to 320. */
    background: url(/sites/zweb/images/pagesense/home/bottom-cta-backdrop.jpg) no-repeat center / 100% 100%;
    color: #fff;
    padding: clamp(50px,5.79vw,100px) 0 clamp(56px,6.37vw,110px)
}

/* Flex with gap rather than margins on the buttons: the gap applies between
   the two buttons and again between the rows when they wrap, so one value
   covers both and nothing trails. The title and the copy each take a whole
   line, which leaves the buttons alone on the last one.

   Their margin-bottom is dropped to 0 — equal on both — so the rhythm comes
   from the single gap and not from a margin plus a gap stacking up. */
.zwc-bottom-cta-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center
}

.zwc-bottom-cta-title,
.zwc-bottom-cta-desc {
    flex: 0 0 100%;
    margin-bottom: 0
}

.zwc-bottom-cta-desc {
    font-size: clamp(18px,1.39vw,24px);
    line-height: 1.5;
    letter-spacing: -0.48px;
    margin: 0
}

.zwc-banner-info .act-btn,.zwc-bottom-cta-content .act-btn {
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.625;
    letter-spacing: -0.32px;
    padding: 16px 60px 16px 32px
}

/* Secondary CTA: outline, no fill. It appears on two opposite grounds — the
   cream banner and the dark bottom band — so the border and the text are
   currentColor and it simply inherits. Measured black in the banner and white
   in the CTA band, which is exactly what the comp shows, so no per-context
   override is needed.

   Box metrics track the primary so the two sit on one line: 15px padding plus
   the 2px border makes 60px, the same height the filled button computes to. */
.zwc-banner-cta-demo {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-radius: 4px;
    color: inherit;
    font-family: var(--zf-primary-semibold);
    font-size: 16px;
    line-height: 1.625;
    letter-spacing: -0.32px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    transition: opacity 200ms ease
}

/* Both CTA pairs share this wrapper, so the spacing between the buttons is
   one gap in one place rather than a margin per context. It also handles the
   banner's hidden primary for free: .zwc-banner-cta is display: none unless
   .umain, and a display: none flex item contributes no gap — where a
   margin-left had to be cancelled by hand. */
.zwc-cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px
}

.zwc-banner-info .zwc-cta-group {
    margin-top: 32px
}

.zwc-bottom-cta-content .zwc-cta-group {
    justify-content: center
}

.zwc-banner-cta-demo:hover,
.zwc-banner-cta-demo:focus-visible {
    opacity: .75
}

.zwc-banner-info .act-btn::after,.zwc-bottom-cta-content .act-btn::after {
    content: "";
    position: absolute;
    top: 0;
    right: 30px;
    bottom: 0;
    width: 8px;
    height: 8px;
    margin: auto 0;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg)
}

@media(max-width: 1280px) {
    .zwc-trust-marquee {
        margin: 0
    }

    .zwc-trust-item {
        height: 48px
    }

    .zwc-security-item::before {
        top: 40px;
        left: 40px
    }

    .zwc-security-item-title {
        margin-top: 88px
    }
}

@media(max-width: 1199px) {
    .zwc-banner-info {
        width:100%;
        max-width: 900px;
        margin: 0 auto;
        text-align: center
    }

    .zwc-banner-content {
        display: block
    }

    .zwc-accordian-panel {
        align-items: flex-start
    }

    .zwc-testing-media {
        width: 50%
    }

    body.body-signupform a.zwc-banner-cta.act-btn.cta-btn,.zwc-banner-cta {
        display: inline-block
    }
        .zwc-banner-cta {margin-top: 0;}
.zwc-banner-info .zwc-cta-group{justify-content: center;}
}



@media(max-width: 991px) {
    .zwc-banner-content,.zwc-accordian-panel,.zwc-panel-info,.zwc-zia-body {
        flex-direction:column;
        align-items: center;
        gap: 20px
    }

    .zwc-persona-wrap .zwc-panel-info {
        flex-direction: column-reverse
    }

    .zwc-banner-content,.zwc-accordian-body,.zwc-panel-body {
        text-align: center
    }

    .zwc-banner-info,.zwc-banner-form,.zwc-accordian-list,.zwc-panel-copy,.zwc-testing-media,.zwc-persona-media,.zwc-zia-list,.zwc-zia-media {
        width: 100%;
        max-width: 560px;
        margin-bottom: 30px
    }

    .zwc-banner-desc,.zwc-panel-info-desc {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto
    }

    .zwc-accordian-list,.zwc-panel-points {
        text-align: left
    }

    .zwc-zia-media {
        position: static
    }

    .zwc-limits-list {
        flex-wrap: wrap;
        width: 100%;
        max-width: 840px
    }

    .zwc-limits-item {
        flex: 1 1 calc(50% - 12px)
    }

    .zwc-panel-tabs {
        display: none
    }

    .zwc-accordian-panel[hidden],.zwc-panel-info[hidden] {
        display: flex
    }

    .zwc-accordian-body,.zwc-panel-body {
        display: block
    }

    .zwc-accordian-panel,.zwc-accordian-panel[hidden],.zwc-panel-info,.zwc-panel-info[hidden] {
        grid-area: auto;
        visibility: visible;
        opacity: 1;
        transition: none
    }

    .zwc-accordian-panel {
        flex-direction: column
    }

    .zwc-accordian-panel::after {
        content: none
    }

    .zwc-accordian-group {
        order: 1;
        display: block;
        font-size: 22px;
        color: #000;
        margin-bottom: 0
    }

    .zwc-accordian-list {
        order: 2
    }

    .zwc-accordian-media,.zwc-accordian-item-open .zwc-accordian-media {
        /* In flow down here and every row shows its own, so nothing fades. */
        opacity: 1;
        visibility: visible;
        transition: none;
        display: block;
        position: static;
        transform: none;
        width: 100%;
        max-width: 560px;
        margin-top: 24px
    }

    #zacc-testing-ab+.zwc-accordian-media,#zacc-personalization-behavioral+.zwc-accordian-media,#zacc-fullstack-api+.zwc-accordian-media {
        aspect-ratio: auto
    }

    .zwc-accordian-panel+.zwc-accordian-panel,.zwc-panel-info+.zwc-panel-info {
        margin-top: 15px
    }

    .zwc-accordian-item-desc,.zwc-accordian-item-open .zwc-accordian-item-desc {
        display: block
    }

    .zwc-accordian-item-btn,.zwc-accordian-item-open .zwc-accordian-item-btn {
        cursor: default;
        padding-right: 0
    }

    .zwc-accordian-item-btn::after,.zwc-accordian-item-open .zwc-accordian-item-btn::after {
        display: none
    }

    h3.zwc-accordian-item-title,.zwc-accordian-item-open .zwc-accordian-item-title {
        letter-spacing: normal;
        line-height: normal;
        margin-bottom: 12px
    }

    .zwc-accordian-item-open {
        border-image: none
    }

    .zwc-testing-info-title {
        margin: 0 auto 20px
    }
}

@media(max-width: 767px) {
    .zwc-banner-wrap h1,.zwc-trust-label,.zwc-panel-title,.zwc-panel-desc,.zwc-panel-tab,.zwc-panel-info-title,.zwc-panel-info-lead,.zwc-panel-info-desc,.zwc-panel-point,.zwc-accordian-item-title,.zwc-zia-item-title,.zwc-zia-item-desc,.zwc-security-title,.zwc-security-desc,.zwc-security-item-title,.zwc-security-item-desc,.zwc-limits-item-title,.zwc-limits-item-desc,.zwc-bottom-cta-title,.zwc-bottom-cta-desc,.zwc-banner-info .act-btn,.zwc-bottom-cta-content .act-btn,.zwc-banner-cta-demo {
        letter-spacing:normal;
        line-height: normal
    }


    .zwc-security-item,.zwc-limits-item {
        width: 100%;
        flex: 1 1 100%
    }

    .zwc-zia-item,.zwc-security-item,.zwc-limits-item,.zwc-limits-item-metrics {
        padding: 28px
    }

    .zwc-zia-item::before,.zwc-security-item::before,.zwc-limits-item::before,.zwc-limits-item-metrics::before {
        top: 28px;
        left: 28px
    }
/* 
    .zwc-zia-item-title {
        margin-top: 50px
    } */

    .zwc-security-item-title {
        margin-top: 76px
    }

    .zwc-limits-item-title,.zwc-limits-item-users .zwc-limits-item-title {
        margin-top: 76px
    }

    .zwc-banner-info {
        margin-bottom: 100px
    }

    .zwc-trust-list {
        margin-top: 30px
    }
    .zwc-banner-info .act-btn, .zwc-bottom-cta-content .act-btn {
 
    padding: 16px 50px 16px 20px;
}
.zwc-trust-toggle {
 
    top: 40px;
}
}

@media(prefers-reduced-motion:reduce) {
    .zwc-zia-item,.zwc-zia-item::after,.zwc-zia-item-title,.zwc-zia-item-desc {
        transition: none
    }

    /* No perpetual motion. The track stops and reflows to the static centred
       row it was before, and the duplicate half is dropped so the brands are
       not simply listed twice. */
    .zwc-trust-list {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center
    }

    .zwc-trust-item[aria-hidden="true"] {
        display: none
    }

    .zwc-accordian-panel,.zwc-panel-info,.zwc-accordian-panel[hidden],.zwc-panel-info[hidden] {
        transition: none
    }
}

.zwc-panel-tab[hidden] {
    display: none
}

#zpanel-method-zia {
    display: none
}