/* ================= Shared ================= */
* {
    text-wrap-style: pretty;
}
.zwc-secpad {
  padding: 120px 0;
}

.zwc-secmar {
  margin: 120px 0;
}

.zwc-wrapper {
  letter-spacing: -0.02em;

  /* Icon glyphs inlined so no extra image files are needed */
  --zwc-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M0.292893 0.292893C0.683418 -0.0976311 1.31643 -0.0976311 1.70696 0.292893L6.70696 5.29289C7.09748 5.68342 7.09748 6.31643 6.70696 6.70696L1.70696 11.707C1.31643 12.0975 0.683418 12.0975 0.292893 11.707C-0.0976311 11.3164 -0.0976311 10.6834 0.292893 10.2929L4.58586 5.99992L0.292893 1.70696C-0.0976311 1.31643 -0.0976311 0.683418 0.292893 0.292893Z'/%3E%3C/svg%3E");
  --zwc-tail-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(4 11)' d='M15 0C15.5523 0 16 0.447715 16 1C16 1.55228 15.5523 2 15 2H1C0.447715 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0H15Z'/%3E%3Cpath transform='translate(14 7)' d='M0.292893 0.292893C0.683418 -0.0976311 1.31643 -0.0976311 1.70696 0.292893L5.70696 4.29289C6.09748 4.68342 6.09748 5.31643 5.70696 5.70696L1.70696 9.70696C1.31643 10.0975 0.683418 10.0975 0.292893 9.70696C-0.0976311 9.31643 -0.0976311 8.68342 0.292893 8.29289L3.58586 4.99992L0.292893 1.70696C-0.0976311 1.31643 -0.0976311 0.683418 0.292893 0.292893Z'/%3E%3C/svg%3E");
  --zwc-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0ZM12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM9.5 7.5L17 12L9.5 16.5V7.5Z'/%3E%3C/svg%3E");
  /* Feature-icon strip for the governance and developer tracks */
  --zwc-sprite: url("/sites/zweb/images/cliq/uninterrupted-work-with-cliq/sprite.svg");

  h1,
  h2,
  h3 {
    font-family: var(--primaryfont-semibold);
  }

  h2 {
    line-height: 1.14;
    font-size: 36px;
  }

  h3 {
    line-height: 1.3;
  }
}

/* .act-btn and .cta-btn come from zohocustom.css; this only lifts the box to the size
   the design uses. Every other call to action is a secondary, outlined button, so they
   share one shell and differ only in colour. */
.cta-btn,
.act-btn,
.zwc-banner__video,
.zwc-cta__support,
.zwc-pricing__link {
  display: inline-block;
  font-family: var(--zf-primary-semibold), sans-serif;
  padding: 14px 34px;
  margin: 0;
  border: 1px solid transparent;
  cursor: pointer;
  z-index: 1;
  font-size: 15px;
  text-transform: uppercase;
  position: relative;
  text-align: center;
}

/* Shared icon shell — each rule below supplies its own --zwc-icon and colour */
.zwc-banner .cta-btn::after,
.zwc-banner__video::after,
.zwc-cta .cta-btn::after,
.zwc-pricing__link::after,
.zwc-testimonials__arrow::before {
  content: "";
  flex-shrink: 0;
  display: inline-block;
  -webkit-mask: var(--zwc-icon) no-repeat center / contain;
  mask: var(--zwc-icon) no-repeat center / contain;
}

/* ================= Hero banner ================= */
.zwc-banner {
  position: relative;
  padding: 94px 0 120px;
  /* Flat ground: all of the banner's light comes from the single gradient below */
  background: #08081f;
  color: #fff;
  overflow: hidden;
  text-align: center;

  .content-wrap {
    position: relative;
    z-index: 1;
  }

  h1 {
    font-size: 32px;
    line-height: 1.2;

    img {
      display: block;
      margin: 14px auto 0;
      max-width: 130px;
      height: auto;
    }
  }

  .cta-btn::after {
    width: 7px;
    height: 12px;
    margin-left: 12px;
    vertical-align: -1px;
    background: #fff;
    --zwc-icon: var(--zwc-chevron-right);
  }

  /* The banner's only light source. It rests here (script.js measures the same 50%/34%
     when it works out the pointer offset) and flows to the cursor from there.
     Every value below the resting position is written per frame by script.js: the
     translate lags the pointer so the gradient drifts rather than snaps, and the two
     out-of-step scales plus the slow rotation keep it swelling and slackening like
     water instead of sliding as a rigid disc. No transition — the easing is the
     per-frame lerp, so a change of direction is picked up smoothly mid-flow. */
  &::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 34%;
    width: 1180px;
    height: 980px;
    margin: -490px 0 0 -590px;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(158, 92, 246, 0.58) 0%,
        rgba(112, 58, 200, 0.34) 38%,
        rgba(58, 34, 140, 0.14) 62%,
        rgba(30, 20, 90, 0) 82%);
    transform: translate3d(var(--zwc-glow-x, 0px), var(--zwc-glow-y, 0px), 0)
      rotate(var(--zwc-glow-rot, 0deg))
      scale(var(--zwc-glow-sx, 1), var(--zwc-glow-sy, 1));
    will-change: transform;
    pointer-events: none;
  }
}

.zwc-banner__inner {
  max-width: 800px;
  margin: 0 auto;

  > p {
    line-height: 1.5;
    margin-top: 40px;
  }
}

.zwc-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 48px;
}

.zwc-banner__video {
  border-color: #fff;
  color: #fff;
  background: transparent;

  &::after {
    width: 20px;
    height: 20px;
    margin-left: 12px;
    vertical-align: -5px;
    background: #fff;
    --zwc-icon: var(--zwc-play);
  }
}

/* Decorative mockups keyed out of their backgrounds so they sit on the moving gradient.
   They pop in two at a time, mirrored pairs together, working down the banner —
   --zwc-float-delay is set alongside each one's position. Hidden below 1200px, where the
   centred copy takes the full width. */
@keyframes zwc-float-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

.zwc-banner__float {
  position: absolute;
  height: auto;
  display: none;
  /* Long and unhurried, with no overshoot — they should settle into the banner
     rather than snap into it */
  animation: zwc-float-in 1.4s cubic-bezier(0.16, 0.72, 0.24, 1) var(--zwc-float-delay, 0s) both;
}

/* ================= Release highlights ================= */
.zwc-highlights {
  background: linear-gradient(180deg, #f8ece9 0%, #fdf8f6 25%, #fff 55%);
}

.zwc-highlights__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: 40px;
  margin-bottom: 100px;
}

.zwc-highlights__title {
  line-height: 1;
}

.zwc-highlights__count {
  display: block;
  font-family: var(--zf-primary-extrabold);
  font-size: 90px;
  line-height: 1;
}

/* The rolling number script.js builds in place of the plain figure. The columns are laid
   out as one block-level row so the count keeps the height of the single line of text it
   replaces, and each window is exactly one digit tall — the strip behind it is moved, and
   the window crops everything but the digit that is due. Widths come from the glyphs
   themselves: a strip carries all ten digits, so every column is as wide as the widest of
   them and the figure never shifts as it turns. */
.zwc-highlights__roll {
  display: flex;
  /* the figures Puvi cuts to one width — a column is as wide as the widest digit it can
     land on, so without them the narrow digits would sit in a pocket of air and the
     number would read looser than the one the design draws */
  font-variant-numeric: tabular-nums;
}

.zwc-highlights__digit {
  height: 1em;
  overflow: hidden;

  > span {
    display: block;
    will-change: transform;

    span {
      display: block;
      height: 1em;
    }
  }
}

.zwc-highlights__caption {
  display: block;
  margin-top: 10px;
  font-size: 22px;
  text-align: right;
}

.zwc-highlights__intro {
  max-width: 580px;
  line-height: 1.55;
}

.zwc-highlights__row {
  display: flex;
  gap: 20px;

  + .zwc-highlights__row {
    margin-top: 20px;
  }
}

.zwc-highlights__card {
  position: relative;
  flex: 1 1 38.6%;
  background: #060606;
  border-radius: 20px;
  color: #fff;
  overflow: hidden;

  /* The design uses a serif display face for these card titles only */
  h3 {
    font-size: 28px;
  }

  p {
    margin-top: 14px;
    line-height: 1.55;
    color: #fff;
  }
}

/* Revealed once zohocustom.js flags the row it sits in — [data-onscroll] rows pick up
   .zwe-om as they cross the middle of the viewport. The second card in a row trails
   the first so a row arrives as a pair, not in lockstep. */
.zwc-highlights__media {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.zwc-highlights__row.zwe-om .zwc-highlights__media {
  opacity: 1;
  transform: none;
}

.zwc-highlights__row.zwe-om .zwc-highlights__card:nth-child(2) .zwc-highlights__media {
  transition-delay: 0.15s;
}

.zwc-highlights__card--meetings .zwc-highlights__body {
  padding: 40px 50px 44px;

  p {
    max-width: 360px;
  }
}

.zwc-highlights__card--collab {
  flex-basis: 59.8%;
  display: flex;
  align-items: center;
  background: #060606 url("/sites/zweb/images/cliq/uninterrupted-work-with-cliq/collab-bg.jpg") no-repeat center / cover;

  .zwc-highlights__body {
    flex-basis: 52%;
    padding: 40px 0 40px 54px;
  }

  .zwc-highlights__media {
    position: absolute;
    top: 43px;
    right: 46px;
    width: 40.2%;
  }
}

.zwc-highlights__card--ai {
  flex-basis: 59.8%;
  text-align: center;

  /* fade the baked glow into the card so the crop lines never show */
  .zwc-highlights__media {
    -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 78%, transparent);
    mask-image: linear-gradient(transparent, #000 12%, #000 78%, transparent);
  }

  .zwc-highlights__body {
    margin-top: 25px;
    padding: 0 40px 56px;

    p {
      max-width: 470px;
      margin-inline: auto;
    }
  }
}

.zwc-highlights__card--gov {
  padding: 54px 32px 44px 56px;
  background: #050505;

  .zwc-highlights__media {
    border-radius: 12px;
  }

  .zwc-highlights__body {
    margin-top: 56px;
    padding-right: 24px;
  }
}

/* ================= Feature tracks (tabs) ================= */
.zwc-tracks {
  text-align: center;
margin-top: 0;
  h2 {
    margin-bottom: 24px;
  }
}

.zwc-tracks__sub {
  max-width: 640px;
  margin: 0 auto 56px;
  line-height: 1.55;
}

.zwc-tracks__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 0 90px;
  padding: 0;
  list-style: none;

  /* The icons differ in height, so the buttons are stretched to the tallest one in
     their row instead of each sizing to its own contents */
  li {
    display: flex;
  }
}

.zwc-tracks__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: #fff;
  border: 1.5px solid #0a0a0a;
  border-radius: 10px;
  font-family: var(--primaryfont-semibold);
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background-color 0.25s, box-shadow 0.25s, transform 0.25s;

  img {
    display: block;
  }

  &.is-active {
    background: #bff009;
    box-shadow: 5px 8px 0 #000;
    transform: translateY(-3px);
  }
}

/* The card itself, and the only thing that stays put while tracks change. Panels are
   stacked inside it so they cross-fade; its height is animated from the outgoing
   panel's to the incoming one's by script.js, so the card glides instead of jumping. */
.zwc-tracks__panels {
  position: relative;
  background: radial-gradient(46% 60% at 60% 28%, rgba(196, 42, 60, 0.4), transparent 72%),
    radial-gradient(50% 64% at 86% 78%, rgba(56, 110, 245, 0.38), transparent 72%),
    #0a0a23;
  border-radius: 30px;
  overflow: hidden;
  transition: height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.zwc-tracks__panel {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 48px;
  width: 100%;
  /* named so the marker and the mockups can sit against the same edges */
  --zwc-pad-y: 90px;
  --zwc-pad-l: 120px;
  --zwc-pad-r: 100px;
  padding: var(--zwc-pad-y) var(--zwc-pad-r) var(--zwc-pad-y) var(--zwc-pad-l);
  color: #fff;
  text-align: left;
  /* the mockups are out of the flow, so the card needs room for the tallest one */
  min-height: 640px;
  /* Inactive panels are taken out of the flow so the active one sets the card height,
     and hidden from assistive tech; the visibility delay keeps them readable while
     they fade out. */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 0.4s;

  &.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.45s ease 0.05s, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s,
      visibility 0s;
  }
}

/* Features double as the picker for the mockup beside them, so each one carries a
   selected state. Contrast is carried by colour rather than opacity, so the inactive
   items still clear AA. */
.zwc-tracks__features {
  flex: 0 0 34%;
  margin: 0;
  padding: 0;
  list-style: none;

  /* One marker for the whole column rather than a bar per item: script.js writes the
     active feature's edges, so it travels down the list. The two edges are given
     different durations with the leading one shorter, so the marker stretches as it
     sets off and draws itself back together as it lands. */
  &::before {
    content: "";
    position: absolute;
    left: var(--zwc-pad-l);
    top: var(--zwc-mark-top, 0);
    bottom: var(--zwc-mark-bottom, 100%);
    width: 3px;
    border-radius: 3px;
    background: #bff009;
    transition: top var(--zwc-mark-top-dur, 0s) cubic-bezier(0.65, 0, 0.35, 1),
      bottom var(--zwc-mark-bottom-dur, 0s) cubic-bezier(0.65, 0, 0.35, 1);
  }

  li {
    padding-left: 22px;
    cursor: pointer;

    &:focus-visible {
      outline: 2px solid #bff009;
      outline-offset: 8px;
    }
  }

  li + li {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  h3 {
    line-height: 1.4;
    color: #c9c9d6;
    transition: color 0.3s ease;
  }

  li.is-active h3,
  li:hover h3 {
    color: #fff;
  }

  p {
    margin-top: 10px;
    line-height: 1.6;
    color: #fff;
  }
}

/* Opening a feature in the stacked layout, where its mockup sits in the flow */
@keyframes zwc-media-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Each mockup lives inside the feature it illustrates. Above 1200px they are lifted out
   of the flow and stacked in the panel's right half so they cross-fade in one place; the
   stacked layout further down leaves them where they are, under their own copy. */
.zwc-tracks__features img {
  position: absolute;
  right: var(--zwc-pad-r);
  top: 50%;
  transform: translateY(-50%);
  max-width: 50%;
  max-height: 460px;
  width: auto;
  height: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;

  &.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease, visibility 0s;
  }
}

/* Tracks with no mockup of their own read as a grid of features instead of a column
   beside an image, so the copy uses the full width of the card. */
.zwc-tracks__panel--grid {
  min-height: 0;

  .zwc-tracks__features {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 44px 60px;

    /* nothing to pick, so no marker and no separators — the gaps do the work */
    &::before {
      content: none;
    }

    li {
      flex: 1 1 calc(50% - 30px);
      padding-left: 0;
      cursor: auto;
    }

    li + li {
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }

    h3 {
      color: #fff;

      /* One 282x30 sprite carries all seven glyphs on a 42px pitch. The strip is laid
         over a 30px window and each item slides it to its own glyph with
         --zwc-sprite-x; masked rather than drawn, so the icon takes the title's colour. */
      &::before {
        content: "";
        display: block;
        width: 30px;
        height: 30px;
        margin-bottom: 12px;
        background: currentColor;
        -webkit-mask: var(--zwc-sprite) no-repeat var(--zwc-sprite-x, 0px) 0 / 282px 30px;
        mask: var(--zwc-sprite) no-repeat var(--zwc-sprite-x, 0px) 0 / 282px 30px;
      }
    }
  }
}

/* Glyph order in the sprite: report, AI controls, external access, WCAG, flow builder,
   chat actions, MCP. The first governance item takes the strip's own origin. */
#zwc-track-governance {
  li:nth-child(2) h3 {
    --zwc-sprite-x: -42px;
  }

  li:nth-child(3) h3 {
    --zwc-sprite-x: -84px;
  }

  li:nth-child(4) h3 {
    --zwc-sprite-x: -126px;
  }
}

#zwc-track-developer {
  li:nth-child(1) h3 {
    --zwc-sprite-x: -168px;
  }

  li:nth-child(2) h3 {
    --zwc-sprite-x: -210px;
  }

  li:nth-child(3) h3 {
    --zwc-sprite-x: -252px;
  }
}

/* ================= Flexi subscription pricing ================= */
.zwc-pricing {
  text-align: center;
}

.zwc-pricing__sub {
  max-width: 660px;
  margin: 24px auto 0;
  line-height: 1.55;
}

.zwc-pricing__link {
  margin-top: 46px;
  border-color: #0a0a0a;
  color: #000;

  &::after {
    width: 17px;
    height: 17px;
    margin-left: 12px;
    vertical-align: -4px;
    background: #000;
    --zwc-icon: var(--zwc-tail-arrow);
  }
}

/* ================= Testimonials (flexi-plan-comparison pattern) ================= */
.zwc-testimonials {

  h2 {
    max-width: 870px;
    margin-bottom: 35px;
  }
}

.zwc-testimonials__eyebrow {
  margin-bottom: 16px;
  font-family: var(--primaryfont-semibold);
  line-height: 1.5;
  color: #0a55eb;
  text-transform: uppercase;
}

.zwc-testimonials__nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 24px;
}

.zwc-testimonials__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid #888;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;

  &::before {
    width: 7px;
    height: 12px;
    background: #18181b;
    --zwc-icon: var(--zwc-chevron-right);
    transition: background-color 0.3s;
  }

  &[data-dir="prev"]::before {
    transform: scaleX(-1);
  }

  &:hover,
  &:focus-visible {
    background: #000;
    border-color: #000;

    &::before {
      background: #fff;
    }
  }
}

.zwc-testimonials__card {
  display: flex;
  border: 1px solid #d1d1d1;
}

.zwc-testimonials__profile {
  flex-shrink: 0;
  width: 380px;
}

.zwc-testimonials__photo {
  padding: 31px;
  border-bottom: 1px solid #d1d1d1;

  img {
    display: block;
    width: 100%;
    height: 264px;
    object-fit: cover;
  }
}

.zwc-testimonials__meta {
  margin: 0;
  padding: 40px 56px;

  div + div {
    margin-top: 32px;
  }

  dt {
    font-family: var(--zf-primary-medium);
    line-height: 1.6;
    color: #888;
  }

  dd {
    margin: 0;
    line-height: 1.55;
  }
}

.zwc-testimonials__quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  margin: 0;
  padding: 56px;
  background: #f6f6f6;

  &::before {
    content: "";
    width: 26px;
    height: 20px;
    margin-bottom: 24px;
    background: url("/sites/zweb/images/cliq/flexi-plan-comparison/quote.svg") no-repeat center / contain;
  }

  > p {
    max-width: 746px;
    font-family: var(--primaryfont-regular);
    line-height: 1.3;
    margin-bottom: 48px;
  }
}

.zwc-testimonials__author {
  font-style: normal;

  p:first-child {
    font-family: var(--primaryfont-semibold);
    line-height: 1.35;
  }

  p + p {
    line-height: 1.55;
    margin-top: 2px;
  }
}

/* ================= Closing CTA ================= */
.zwc-cta {
  background: radial-gradient(56% 70% at 50% 108%, rgba(104, 51, 168, 0.6), transparent 74%),
    #0a0930;
  color: #fff;
  text-align: center;

  h2 {
    margin-bottom: 26px;
  }

  .cta-btn::after {
    width: 7px;
    height: 12px;
    margin-left: 12px;
    vertical-align: -1px;
    background: #fff;
    --zwc-icon: var(--zwc-chevron-right);
  }
}

.zwc-cta__sub {
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.55;
  color: #c6c6dd;
}

.zwc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 52px 0 96px;
}

.zwc-cta__support {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.zwc-cta__cards {
  display: flex;
  gap: 60px;
  text-align: left;
}

.zwc-cta__card {
  flex: 1;
  background: #fff;
  border-radius: 18px;
  padding: 40px 40px 0;
  color: #000;
  overflow: hidden;
a{
  color: #000;
}
  p {
    margin: 0 0 18px;
    line-height: 1.55;
  }

  img {
    display: block;
    width: calc(100% + 80px);
    max-width: none;
    height: auto;
    margin: auto -41px 0;
  }
}
.zwc-cta__card:nth-child(2) img{
position: relative;
    bottom: -80px;
}
/* ================= Desktop font sizes ================= */
@media screen and (min-width: 1200px) {
  .zwc-wrapper {
    h2 {
      font-size: 56px;
    }
  }

  .zwc-banner {
    padding: 94px 0 270px;

    h1 {
      font-size: 44px;

      img {
        max-width: 178px;
      }
    }
  }

  .zwc-banner__inner > p {
    font-size: 24px;
  }

  /* Offsets and widths in % of the banner, taken from the 1760-wide design, so each
     mockup keeps its place and stays whole inside the viewport as the gutters shrink. */
  .zwc-banner__float {
    display: block;
  }

  .zwc-banner__float--toolbar {
    left: 12.4%;
    top: 228px;
    width: 21.5%;
    --zwc-float-delay: 0.9s;
  }

  /* The only one that sits level with the paragraph: below ~1520px the gutter is
     narrower than its design width, so it gives way and keeps 24px off the copy. */
  .zwc-banner__float--video {
    left: 1%;
    top: 466px;
    width: min(21.3%, calc(49% - 424px));
    --zwc-float-delay: 1.35s;
  }

  .zwc-banner__float--hashtags {
    left: 27.8%;
    top: 686px;
    width: 11.8%;
    --zwc-float-delay: 1.8s;
  }

  .zwc-banner__float--slots {
    right: 9.8%;
    top: 172px;
    width: 17.7%;
    --zwc-float-delay: 0.45s;
  }

  .zwc-banner__float--captions {
    right: 8.7%;
    bottom: 0;
    width: 36.5%;
    --zwc-float-delay: 0.9s;
  }

  .zwc-highlights__count {
    font-size: 150px;
  }

  .zwc-highlights__caption {
    font-size: 29px;
  }

  .zwc-highlights__intro {
    font-size: 20px;
  }

  .zwc-highlights__card {
    h3 {
      font-size: 40px;
    }

    p {
      font-size: 18px;
    }
  }

  .zwc-highlights__card--collab h3,
  .zwc-highlights__card--ai h3 {
    font-size: 44px;
  }

  .zwc-highlights__card--collab p {
    font-size: 20px;
  }

  .zwc-tracks__sub,
  .zwc-pricing__sub,
  .zwc-cta__sub {
    font-size: 18px;
  }

  .zwc-tracks__tab {
    font-size: 16px;
  }

  .zwc-tracks__features {
    h3 {
      font-size: 20px;
    }

    p {
      font-size: 16px;
    }
  }

  .zwc-pricing__link {
    font-size: 14px;
  }

  .zwc-testimonials__eyebrow {
    font-size: 20px;
  }

  .zwc-testimonials__meta dd,
  .zwc-testimonials__author p + p {
    font-size: 18px;
  }

  .zwc-testimonials__meta dt {
    font-size: 16px;
  }

  .zwc-testimonials__author p:first-child {
    font-size: 24px;
  }

  .zwc-testimonials__quote > p {
    font-size: 28px;
  }

  .zwc-cta__card {
    h3 {
      font-size: 24px;
    }

    p {
      font-size: 16px;
    }
  }
}
@media (max-width: 1440px) {
  .zwc-tracks__panel{
        --zwc-pad-l: 60px;
    --zwc-pad-r: 60px;
  }
}
/* ================= Large tablet ================= */
@media screen and (max-width: 1199px) {
  .zwc-secpad {
    padding: 90px 0;
  }

  .zwc-secmar {
    margin: 90px 0;
  }

  .zwc-banner {
    padding: 80px 0 90px;
  }

  .zwc-highlights__head {
    margin-bottom: 64px;
  }

  .zwc-tracks__tabs {
    margin-bottom: 56px;
  }

  .zwc-tracks__panel {
    flex-direction: column;
    --zwc-pad-y: 56px;
    --zwc-pad-l: 48px;
    --zwc-pad-r: 48px;
    gap: 40px;
    min-height: 0;
  }

  .zwc-tracks__features {
    flex-basis: auto;
  }

  /* Stacked: a mockup sits under the feature it belongs to rather than off in a column of
     its own, but only the open one is shown — all of them at once buries the copy. */
  .zwc-tracks__features img {
    position: static;
    display: none;
    max-width: 100%;
    max-height: none;
    margin: 26px auto 0;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .zwc-tracks__features li.is-active img {
    display: block;
    animation: zwc-media-in 0.45s ease both;
  }

  .zwc-cta__cards {
    gap: 24px;
  }

  .zwc-cta__card {
    padding: 28px 28px 0;

    img {
      width: calc(100% + 56px);
      margin: auto -28px 0;
    }
  }
}

/* ================= Tablet ================= */
@media screen and (max-width: 991px) {
  .zwc-banner__inner{
    max-width: 600px;
  }
  /* Single column from here down, so the whole section centres */
  .zwc-highlights {
    text-align: center;
  }
  .zwc-highlights__head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 30px;
  }

  .zwc-highlights__caption,
  .zwc-highlights__card--meetings .zwc-highlights__body p {
    text-align: center;
  }

  .zwc-highlights__intro,
  .zwc-highlights__card p {
    margin-inline: auto;
  }
.zwc-highlights__intro{
  max-width: 480px;
}
  .zwc-highlights__row {
    flex-direction: column;
max-width: 500px;
margin-inline: auto;
    + .zwc-highlights__row {
      margin-top: 24px;
    }
  }

  .zwc-highlights__row .zwc-highlights__card {
    flex-basis: auto;
  }

  .zwc-highlights__card--gov .zwc-highlights__body {
    padding-right: 0;
  }

  .zwc-highlights__card--collab {
    flex-direction: column;
    align-items: center;

    .zwc-highlights__body {
      flex-basis: auto;
      padding: 40px 32px 0;
    }

    .zwc-highlights__media {
      position: static;
      width: 60%;
      max-width: 308px;
      margin: 32px auto 0;
    }
  }

  /* the copy grid collapses to one column, so the marker has nothing to sit beside */
  .zwc-tracks__panel--grid .zwc-tracks__features li {
    flex-basis: 100%;
  }

  .zwc-testimonials h2 {
    text-align: center;
    margin-inline: auto;
  }
.zwc-cta__sub{
  max-width: 530px;
}
.zwc-cta__actions{
  margin-bottom: 60px;
}
  .zwc-testimonials__eyebrow {
    text-align: center;
  }

  .zwc-cta__cards {
    flex-direction: column;
    align-items: center;
  }

  .zwc-cta__card {
    width: 100%;
    max-width: 450px;
  }
  .zwc-tracks__panels{
    max-width: 640px;
    margin-inline: auto;
  }
}

/* ================= Mobile ================= */
@media screen and (max-width: 767px) {
  .zwc-secpad {
    padding: 60px 0;
  }

  .zwc-secmar {
    margin: 60px 0;
  }

  .zwc-banner {
    padding: 60px 0 70px;
  }

  .zwc-banner__actions {
    flex-direction: column;
    align-items: center;
  }
.zwc-tracks__tab{
      gap: 2px;
    padding: 14px 15px;
}
  .zwc-highlights__caption {
    text-align: left;
  }

  .zwc-highlights__card--meetings .zwc-highlights__body {
    padding: 28px 24px 32px;
  }

  .zwc-highlights__card--gov {
    padding: 24px 24px 32px;

    .zwc-highlights__body {
      margin-top: 32px;
      padding-right: 0;
    }
  }

  .zwc-highlights__card--ai .zwc-highlights__body {
    padding: 0 24px 36px;
  }

  .zwc-tracks__panel {
    --zwc-pad-y: 36px;
    --zwc-pad-l: 24px;
    --zwc-pad-r: 24px;
  }

  .zwc-testimonials {

    h2 {
      max-width: 320px;
    }
  }

  .zwc-testimonials__card {
    flex-direction: column;
    max-width: 450px;
    margin-inline: auto;
  }

  .zwc-testimonials__profile {
    width: 100%;
  }

  .zwc-testimonials__photo {
    padding: 20px;
  }

  .zwc-testimonials__meta {
    padding: 32px 20px;
  }

  .zwc-testimonials__quote {
    padding: 32px 24px;
  }

  .zwc-cta__actions {
    flex-direction: column;
    align-items: center;
    margin-bottom: 64px;
  }
  .zwc-cta__card:nth-child(2) img{
    bottom: -60px;
}
.zwc-pricing__link {
  padding: 14px 18px;
}
}

/* ================= Reduced motion =================
   Everything lands in its final state; nothing travels to get there. */
@media (prefers-reduced-motion: reduce) {

  .zwc-banner__float,
  .zwc-highlights__media,
  .zwc-tracks__panels,
  .zwc-tracks__panel,
  .zwc-tracks__features::before,
  .zwc-tracks__features h3,
  .zwc-tracks__features img {
    animation: none;
    transition: none;
  }

  .zwc-highlights__media {
    opacity: 1;
    transform: none;
  }

  /* The gradient is the banner's only light, so it stays — script.js opts out of the
     frame loop, which leaves it resting where the design puts it. */
  .zwc-banner::before {
    will-change: auto;
  }
}
.zw-product-header{
  background: #08081f;
}