/* Base */
:root {
  --zwc-orange: #ff6105;
  --zwc-orange-dk: #d14d00;
  --zwc-peach: #ffeee5;
  --zwc-dark: #150c06;
  --zwc-white: #fff;
  --zwc-black: #000;
  --zwc-txt: #454545;
  --zwc-txt-2: #4f4f4f;
  --zwc-txt-3: #383838;
  --zwc-grey: #595959;
  --zwc-brdr: #ebebeb;
  --zwc-brdr-2: #d1d1d1;
  --zwc-bg-1: #f5f5f5;
  --zwc-bg-2: #fafafa;
  --zwc-bg-4: #f3f3f6;
}

.pagewrapper .content-wrap {
  max-width: 1160px;
}

/* Sprite — every icon below is a cell of images/manufacturing-landing-sprite.svg,
     drawn at its natural size and placed with background-position. */
:root {
  --sprite: url("/sites/zweb/images/creator/manufacturing/manufacturing-landing-sprite.svg");
}

.zwc-gap-pnts article::before,
.zwc-roles-list li::before,
.zwc-stack-acc button::before,
.zwc-integ-list li::before,
.zwc-sector-list li::before,
.zwc-badge,
.zwc-btm-cta .zwc-btn::before,
.zwc-tick,
.zwc-stack-acc button::after,
.zwc-gap-sync-1,
.zwc-gap-sync-2 {
  content: "";
  display: block;
  flex-shrink: 0;
  /* longhands, not the `background` shorthand: the shorthand would also reset
       background-position, and these selectors outrank the per-icon rules that
       set it */
  background-image: var(--sprite);
  background-repeat: no-repeat;
}

.pagewrapper {
  --h1-font-1: 80px;
  --h2-font-1: 48px;
  --h2-font-2: 42px;
  --h3-font-1: 36px;
  --h3-font-2: 28px;
  --h4-font-1: 20px;
  --p-font-1: 20px;
  --p-font-2: 16px;
  --p-font-3: 14px;
  --p-font-4: 14px;
  --stat-font-1: 36px;
  --zwc-nav-top: 66px;
  max-width: 1920px;
  margin: 0 auto;
  overflow-x: clip;
}

/* :where() keeps these element defaults at zero specificity, so a
     single-class component rule below always wins over them */
:where(.pagewrapper h1, .pagewrapper h2, .pagewrapper h3, .pagewrapper h4) {
  font-family: var(--primaryfont-semibold);
  color: var(--zwc-black);
}

:where(.pagewrapper p) {
  font-family: var(--primaryfont-regular);
  color: var(--zwc-txt);
  font-size: var(--p-font-2);
  line-height: 1.5;
  letter-spacing: -0.16px;
}

:where(.pagewrapper a) {
  text-decoration: none;
}

:where(.pagewrapper ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(.pagewrapper img) {
  max-width: 100%;
}

.zwc-flx-cnt {
  display: flex;
  flex-wrap: wrap;
}

.zwc-icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* Skip link — off-canvas but still focusable, so it stays out of the layout
   until a keyboard user reaches it. Not display:none, which would drop it out
   of the tab order and defeat the point. */
.zwc-skip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 0 0 6px 0;
  color: var(--zwc-white);
  background-color: var(--zwc-dark);
  font-family: var(--primaryfont-semibold);
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.zwc-skip:focus {
  transform: translateY(0);
  outline: 2px solid var(--zwc-orange);
  outline-offset: -4px;
}

.pagewrapper :focus-visible {
  outline: 2px solid var(--zwc-orange-dk);
  outline-offset: 2px;
}

/* End Base */

/* Banner */
.zwc-bnr {
  position: relative;
  padding: 55px 0 96px;
  overflow: hidden;
}

.zwc-bnr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 45% at 50% 50%, rgba(255, 223, 203, 0.4) 0%, rgba(255, 223, 203, 0) 70%);
  pointer-events: none;
  display: none;
}

.zwc-bnr-wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 519px;
  max-height: 60%;
  background-image: url("/sites/zweb/images/creator/manufacturing/banner-wave.svg");
  background-position: left bottom;
  background-size: 100% auto;
  pointer-events: none;
  display: none;
}

.zwc-bnr-cnt {
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
}

.zwc-bnr-txt {
  width: 47.2%;
}

.zwc-bnr h1 {
  font-size: var(--h1-font-1);
  line-height: 1.1;
  letter-spacing: -2.4px;
  margin: 0;
}

.zwc-bnr h1 span {
  color: var(--zwc-orange-dk);
}

.zwc-bnr-txt>p {
  max-width: 520px;
  margin: 48px 0 0;
}

.zwc-bnr p {
  font-size: var(--p-font-1);
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.zwc-bnr-cta {
  margin-top: 56px;
  align-items: center;
  gap: 12px;
}

/* painted to the Figma "Button CTA" component specs */
.zwc-bnr-cta .zwc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 54px 16px 24px;
  border: 2px solid var(--primary-btn-color);
  border-radius: 4px;
  font-family: var(--zf-primary-medium);
  font-size: var(--p-font-1);
  line-height: 1.2;
  letter-spacing: -0.2px;
  text-transform: none;
  color: var(--zwc-white);
  background-color: var(--primary-btn-color);
  position: relative;
}

.zwc-bnr-cta .zwc-btn::before {
  position: absolute;
  content: "";
  background: url(/sites/zweb/images/creator/manufacturing/arrow-right-white.svg)no-repeat;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 15px;
  right: 22px;
}



.zwc-bnr-img {
  position: relative;
  width: 53%;
  text-align: center;
  margin-right: -3.5%;
}

/* End Banner */

/* Trusted Brands */
.zwc-trusted-brands {

  border-bottom: 1px solid #EBEBEB;
}

.pagewrapper .zwc-trusted-brands .content-wrap {
  padding: 35px 0 40px;
  max-width: 1060px;
}

.zwc-trusted-brands .content-wrap h2 {
  font-size: 24px;
  text-align: center;
  margin: 0 0 32px;
  letter-spacing: inherit;
  color: #000E33;
}

.zwc-trusted-brands ul {
  justify-content: center;
}

.zwc-trusted-brands ul li {
  width: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  transition: transform .1s ease-in-out;
}

.zwc-trusted-brands ul li img {
  display: block;
}

.zwc-trusted-brands .zwc-flx-cont {
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
  margin-bottom: 40px;
  border-bottom: 1px solid #EBEBEB;
}

.zwc-trusted-brands .zwc-flx-cont li {
  flex-direction: column;
  text-transform: uppercase;
  font-size: 14px;
  font-family: var(--primaryfont-semibold);

}

.zwc-trusted-brands .zwc-flx-cont li span {
  font-family: var(--primaryfont-bold);
  font-size: 44px;
}

/* End Trusted Brands */



/* Gap */
.zwc-gap {
  padding: 80px 0;
}

.zwc-gap-head {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.zwc-gap h2,
.zwc-roles h2,
.zwc-apps h2,
.zwc-sector h2,
.zwc-testi h2 {
  font-size: var(--h2-font-1);
  line-height: 1.17;
  letter-spacing: -1.44px;
  margin: 0;
}

.zwc-gap h2 span,
.zwc-roles h2 span,
.zwc-sector h2 span,
.zwc-testi h2 span,
.zwc-apps h2 span {
  color: var(--zwc-orange-dk);
}

.zwc-gap-head p,
.zwc-roles-head p,
.zwc-apps-head p,
.zwc-sector-head p,
.zwc-stack-head p,
.zwc-integ-head p {
  font-size: var(--p-font-1);
  line-height: 1.4;
  letter-spacing: -0.2px;
  margin: 24px 0 0;
}

.zwc-gap-pnts {
  margin-top: 72px;
  justify-content: space-between;
}

.zwc-gap-pnts article {
  width: 24.7%;
  padding: 0 21px 0 0;
}

.zwc-gap-pnts article+article {
  border-left: 1px solid var(--zwc-brdr);
  padding-left: 32px;
}

.zwc-gap-pnts article:last-child {
  padding-right: 0;
}

/* the orange tile and its glyph are both baked into the sprite cell */
.zwc-gap-pnts article::before {
  width: 46px;
  height: 47px;
  margin-bottom: 23px;
}

.zwc-gap-icn-1::before {
  background-position: 0 -47px;
}

.zwc-gap-icn-2::before {
  background-position: -56px -47px;
}

.zwc-gap-icn-3::before {
  background-position: -112px -47px;
}

.zwc-gap-icn-4::before {
  background-position: -168px -47px;
}

.zwc-gap-pnts h3 {
  font-size: var(--h4-font-1);
  line-height: 1.4;
  letter-spacing: -0.2px;
  margin: 0 0 12px;
}

.zwc-gap-pnts p {
  color: var(--zwc-txt-2);
}

.zwc-gap-layers {
  margin-top: 48px;
  align-items: stretch;
  justify-content: space-between;
}

.zwc-gap-card {
  display: flex;
  flex-direction: column;
  width: 44.5%;
  padding: 40px;
  border-radius: 24px;
  background-color: var(--zwc-bg-1);
}

.zwc-gap-card:last-child p {
  margin-top: auto;
}

.zwc-gap-card:last-child {
  background-color: var(--zwc-peach);
}

.zwc-gap-card span {
  font-family: var(--primaryfont-semibold);
  font-size: var(--p-font-4);
  line-height: 2;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--zwc-grey);
  margin: 0;
  display: block;
}

.zwc-gap-card h3 {
  font-size: var(--h3-font-1);
  line-height: 1.2;
  letter-spacing: -0.16px;
  margin: 6px 0 24px;
}

.zwc-gap-logos {
  gap: 10px;
  align-items: center;
  margin-bottom: 24px;
}

.zwc-gap-logos li {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background-color: var(--zwc-white);
  box-shadow: 0 10px 12px rgba(20, 12, 6, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}


.zwc-gap-logos li:last-child {
  width: 40px;
  font-family: var(--primaryfont-bold);
  font-size: 22px;
  /* #919191 only reaches 3.15:1 on white; --zwc-grey clears the 4.5:1 AA floor */
  color: var(--zwc-grey);
}

.zwc-gap-card p {
  color: var(--zwc-txt-2);
}

.zwc-gap-sync {
  width: 6.7%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.zwc-gap-sync-1,
.zwc-gap-sync-2 {
  background-position: -1566px -17px;
  width: 40px;
  height: 15px;
}

.zwc-gap-sync-2 {
  transform: rotate(180deg);
}

.zwc-gap-sync p {
  font-family: var(--primaryfont-semibold);
  font-size: var(--p-font-4);
  margin: 0;
  white-space: nowrap;
  padding: 5px 0;
}

.zwc-gap-card .zwc-gap-lockup {
  width: 178px;
  height: auto;
  margin-bottom: 24px;
}

/* End Gap */

/* Operations */
.zwc-ops {
  padding: 80px 24px;
}

.zwc-ops-panel {
  max-width: 1520px;
  margin: 0 auto;
  padding: 80px 0;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--zwc-dark);
  background-image: radial-gradient(46% 70% at 16% 16%, rgba(255, 97, 5, 0.3) 0%, rgba(128, 49, 3, 0.15) 29%, rgba(0, 0, 0, 0) 58%);
}

.zwc-ops-intro {
  justify-content: space-between;
  align-items: flex-start;
}

.zwc-ops h2 {
  width: 53%;
  font-size: var(--h2-font-1);
  line-height: 1.17;
  letter-spacing: -1.44px;
  color: var(--zwc-white);
  margin: 0;
}

.zwc-ops h2 span {
  color: var(--zwc-orange);
}

.zwc-ops-intro p {
  width: 43%;
  font-size: var(--p-font-1);
  line-height: 1.4;
  letter-spacing: -0.2px;
  color: #efefef;
  margin: 0;
}

.zwc-ops-cards {
  margin-top: 72px;
  justify-content: space-between;
  align-items: stretch;
}

.zwc-ops-card {
  width: 31.94%;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--zwc-white);
  box-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.25);
}

.zwc-ops-card>img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-bottom: 1px solid var(--zwc-brdr);
  background-color: var(--zwc-bg-2);
}

.zwc-ops-info {
  padding: 32px;
}

.zwc-ops-card h3 {
  font-family: var(--primaryfont-bold);
  font-size: var(--h4-font-1);
  line-height: 1.4;
  letter-spacing: -0.2px;
  margin: 0;
}

.zwc-ops-card p {
  color: var(--zwc-txt-2);
  margin: 12px 0 0;
}

/* End Operations */

/* Roles */
.zwc-roles {
  padding: 80px 0;
}

.zwc-roles-head {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.zwc-roles-cnt {
  margin-top: 72px;
  align-items: center;
  justify-content: space-between;
}

.zwc-roles-pics {
  width: 42%;
  justify-content: space-between;
  gap: 12px 0;
}

.zwc-roles-pics img {
  display: block;
  width: 48.7%;
  height: auto;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 20px 44px -24px rgba(20, 12, 6, 0.3);
}

.zwc-roles-pics img:nth-child(1) {
  border-top-left-radius: 34px;
}

.zwc-roles-pics img:nth-child(2) {
  border-top-right-radius: 34px;
}

.zwc-roles-pics img:nth-child(3) {
  border-bottom-left-radius: 34px;
}

.zwc-roles-pics img:nth-child(4) {
  border-bottom-right-radius: 34px;
}

.zwc-roles-list {
  width: 51.5%;
}

.zwc-roles-list li {
  display: flex;
  gap: 16px;
  padding-bottom: 24px;
}

.zwc-roles-list li+li {
  border-top: 1px solid var(--zwc-brdr);
  padding-top: 25px;
}

.zwc-roles-list li:last-child {
  padding-bottom: 0;
}

/* each pseudo is sized to its own sprite cell; the margins reproduce the
     padding the old fixed 32x32 icon box provided, so nothing shifts */
.zwc-role-icn-1::before {
  width: 24px;
  height: 20px;
  margin: 6px 4px 0;
  background-position: -228px -54px;
}

.zwc-role-icn-2::before {
  width: 19px;
  height: 21px;
  margin: 5.5px 6.5px 0;
  background-position: -263px -53px;
}

.zwc-role-icn-3::before {
  width: 21px;
  height: 21px;
  margin: 5.5px 5.5px 0;
  background-position: -294px -53px;
}

.zwc-role-icn-4::before {
  width: 21px;
  height: 15px;
  margin: 8.5px 5.5px 0;
  background-position: -326px -57px;
}

.zwc-roles-list h3 {
  font-size: var(--h3-font-2);
  line-height: 1.28;
  letter-spacing: -0.28px;
  margin: 0;
}

.zwc-roles-list p {
  color: var(--zwc-txt-2);
  margin: 6px 0 0;
}

/* End Roles */

/* Apps */
.zwc-apps {
  padding: 80px 0;
}

.pagewrapper .zwc-apps .content-wrap {
  max-width: 1280px;
}

.zwc-apps-head {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}

.zwc-apps-nav {
  position: sticky;
  top: var(--zwc-nav-top);
  z-index: 6;
  margin-top: 32px;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 7px;
  border-radius: 24px;
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.zwc-apps-nav.zwc-stuck {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 7px 24px;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px -14px rgba(20, 12, 6, 0.32);
}

.zwc-apps-nav.zwc-stuck a {
  padding: 9px 14px;
}

.zwc-apps-nav a {
  display: block;
  padding: 9px 15px;
  border-radius: 999px;
  font-family: var(--primaryfont-semibold);
  font-size: var(--p-font-3);
  line-height: 1.71;
  letter-spacing: -0.16px;
  color: var(--zwc-txt);
  background-color: var(--zwc-bg-1);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.zwc-apps-nav a:hover,
.zwc-apps-nav a.zwc-active {
  color: var(--zwc-white);
  background-color: var(--zwc-dark);
}

.zwc-apps-list {
  margin: 56px auto 0;
  max-width: 1160px;
}

.zwc-apps-row {
  align-items: center;
  justify-content: space-between;
  gap: 64px 0;
}

.zwc-apps-row+.zwc-apps-row {
  margin-top: 96px;
}

.zwc-apps-row:nth-child(even) {
  flex-direction: row-reverse;
}

.zwc-apps-txt {
  width: 47.2%;
}

.zwc-apps-txt h3 {
  font-size: var(--h3-font-1);
  line-height: 1.39;
  letter-spacing: -0.84px;
  margin: 0;
}

/* the heading doubles as the accordion trigger below 767px, so it carries a
   button that has to read as plain heading text everywhere else */
.zwc-apps-txt h3 button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: default;
}

.zwc-apps-body>p {
  font-size: var(--p-font-1);
  line-height: 1.4;
  letter-spacing: -0.16px;
  margin: 16px 0 0;
}

.zwc-apps-txt ul {
  margin-top: 32px;
}

.zwc-apps-txt li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.zwc-apps-txt li+li {
  margin-top: 12px;
}

.zwc-apps-txt li p {
  margin: 0;
}

.zwc-tick {
  width: 14px;
  height: 10px;
  margin-top: 8px;
  background-position: -1616px -19px;
}

.zwc-visual {
  position: relative;
  width: 47.2%;
  max-width: 500px;
  min-height: 359px;
  border-radius: 30px;
}


.zwc-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* the sprite cell already carries the tile gradient, its corner radius and
     the glyph, so the -a / -b gradient variants are no longer needed */
.zwc-badge {
  position: absolute;
  right: 1.5%;
  top: -14px;
  width: 69px;
  height: 69px;
  transform: rotate(-6deg);
}

.zwc-icn-badge-safety {
  background-position: -365px -30px;
}

.zwc-icn-badge-budget {
  background-position: -443px -29px;
}

.zwc-icn-badge-handover {
  background-position: -521px -29px;
}

.zwc-icn-badge-permit {
  background-position: -599px -29px;
}

.zwc-icn-badge-change {
  background-position: -677px -29px;
}

.zwc-icn-badge-vendor {
  background-position: -755px -25px;
}

.zwc-icn-badge-quality {
  background-position: -836px -22px;
}

.zwc-icn-badge-maint {
  background-position: -917px -21px;
}

/* End Apps */

/* Stack */
.zwc-stack {
  padding: 80px 0;
}

.zwc-stack-head {
  padding: 0 40px;
  text-align: center;
}

.zwc-stack h2,
.zwc-integ h2 {
  font-size: var(--h2-font-2);
  line-height: 1.33;
  letter-spacing: -1.26px;
  margin: 0;
}

.zwc-stack h2 span,
.zwc-integ h2 span {
  color: var(--zwc-orange-dk);
}

.zwc-stack-cnt {
  position: relative;
  max-width: 1400px;
  margin: 72px auto 0;
  align-items: stretch;
  justify-content: space-between;
}

.zwc-stack-cnt::before,
.zwc-stack-cnt::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
}

.zwc-stack-cnt::before {
  right: 58.5%;
  background-color: var(--zwc-bg-4);
}

.zwc-stack-cnt::after {
  left: 41.5%;
  background-image: linear-gradient(159deg, #fff1e5 33%, #efedf7 66%, #fff8f6 88%);
}

.zwc-stack-acc {
  position: relative;
  z-index: 1;
  width: 41.5%;
  padding: 48px 56px 48px 40px;
}

.zwc-stack-acc li+li {
  border-top: 1px solid var(--zwc-brdr-2);
}

.zwc-stack-acc li:last-child {
  border-bottom: 1px solid var(--zwc-brdr-2);
}

.zwc-stack-acc button {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 15px 16px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  position: relative;
}

.zwc-stack-acc button::after {
  background-position: -1653px -20px;
  width: 12px;
  height: 7px;
  position: absolute;
  right: 0;
  transform: rotate(180deg);
  filter: grayscale(1);
  transition: 0.5s ease;
}

.zwc-stack-acc .zwc-active button::after {
  transform: rotate(0deg);
  filter: grayscale(0);
}

/* button is align-items:center, so only horizontal margins are needed */
.zwc-stk-icn-1::before {
  width: 16px;
  height: 17px;
  margin: 0 4px;
  background-position: -999px -25px;
}

.zwc-stk-icn-2::before {
  width: 18px;
  height: 10px;
  margin: 0 3px;
  background-position: -1020px -29px;
}

.zwc-stk-icn-3::before {
  width: 18px;
  height: 19px;
  margin: 0 3px;
  background-position: -1041px -24px;
}

.zwc-stk-icn-4::before {
  width: 20px;
  height: 14px;
  margin: 0 2px;
  background-position: -1063px -26px;
}

.zwc-stk-icn-5::before {
  width: 20px;
  height: 16px;
  margin: 0 2px;
  background-position: -1086px -25px;
}

.zwc-stk-icn-6::before {
  width: 16px;
  height: 15px;
  margin: 0 4px;
  background-position: -1110px -23px;
}

.zwc-stk-icn-7::before {
  width: 17px;
  height: 13px;
  margin: 0 3.5px;
  background-position: -1129px -26px;
}

.zwc-stk-icn-8::before {
  width: 18px;
  height: 10px;
  margin: 0 3px;
  background-position: -1150px -30px;
}

.zwc-stack-acc button span {
  font-family: var(--primaryfont-semibold);
  font-size: var(--h4-font-1);
  line-height: 1.2;
  letter-spacing: -0.16px;
  color: var(--zwc-txt-3);
}

.zwc-stack-acc .zwc-active button span {
  color: var(--zwc-black);
}

.zwc-stack-body {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  padding-left: 40px;
  transition: height 0.32s ease, visibility 0.32s ease;
}

.zwc-stack-acc .zwc-active .zwc-stack-body {
  height: auto;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .zwc-stack-body {
    transition: none;
  }
}

.zwc-stack-body p {
  color: var(--zwc-txt-2);
  line-height: 1.65;
  max-width: 419px;
  margin: 0 0 20px;
}

.zwc-stack-pnl {
  position: relative;
  z-index: 1;
  width: 58.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 40px 56px 56px;
}

.zwc-stack-box {
  position: relative;
  display: none;
  width: 100%;
  /* the export is the 560px design frame plus 7px of shadow at the bottom */
  max-width: 560px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 22px 54px -30px rgba(20, 12, 6, 0.28);
}

.zwc-stack-box.zwc-active {
  display: block;
}

.zwc-stack-pnl img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 10px 30px -18px rgba(20, 12, 6, 0.2);
  border-radius: 18px;
  border: 1px solid #EBEBEB;

}

/* The sprite carries each tag complete, text included. The panel export starts
   at the design frame origin, so each tag pins to the corner it belongs to
   (nodes 1:1247 / 1:1253) — top-right and bottom-left of the frame. */
.zwc-stack-tag {
  position: absolute;
  height: 41px;
  background-image: var(--sprite);
  background-repeat: no-repeat;
}

.zwc-tag-top {
  right: 3px;
  top: 0;
  border-radius: 12px;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.09), 0 24px 40px rgba(0, 0, 0, 0.1), 0 50px 80px rgba(0, 0, 0, 0.1);
}

.zwc-tag-btm {
  left: 3px;
  bottom: 0;
  border-radius: 12px;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.04), 0 24px 40px rgba(0, 0, 0, 0.08), 0 50px 80px rgba(0, 0, 0, 0.10);
}

.zwc-tag-1 {
  width: 117px;
  background-position: -0px -165px;
}

.zwc-tag-2 {
  width: 159px;
  background-position: -141px -165px;
}

.zwc-tag-3 {
  width: 138px;
  background-position: -326px -165px;
}

.zwc-tag-4 {
  width: 138px;
  background-position: -488px -165px;
}

.zwc-tag-5 {
  width: 173px;
  background-position: -641px -165px;
}

.zwc-tag-6 {
  width: 166px;
  background-position: -838px -165px;
}

.zwc-tag-7 {
  width: 166px;
  background-position: -1030px -165px;
}

.zwc-tag-8 {
  width: 138px;
  background-position: -1215px -166px;
}

.zwc-tag-9 {
  width: 145px;
  background-position: -1360px -165px;
}

.zwc-tag-10 {
  width: 187px;
  background-position: -1520px -165px;
}

.zwc-tag-11 {
  width: 145px;
  background-position: -0px -274px;
}

.zwc-tag-12 {
  width: 166px;
  background-position: -158px -274px;
}

.zwc-tag-13 {
  width: 159px;
  background-position: -339px -273px;
}

.zwc-tag-14 {
  width: 173px;
  background-position: -513px -270px;
}

.zwc-tag-15 {
  width: 110px;
  background-position: -707px -273px;
}

.zwc-tag-16 {
  width: 145px;
  background-position: -832px -271px;
}

/* End Stack */

/* Integrations */
.zwc-integ {
  padding: 56px 0 80px;
}

.zwc-integ-head {
  text-align: center;
}

.zwc-integ-cnt {
  margin-top: 72px;
  align-items: center;
  justify-content: space-between;
}

.zwc-integ-orbit {
  position: relative;
  width: 47.2%;
  max-width: 520px;
  aspect-ratio: 1;
}

.zwc-integ-orbit::before,
.zwc-integ-orbit::after {
  content: "";
  position: absolute;
  border: 1.5px solid var(--zwc-brdr);
  border-radius: 50%;
}

.zwc-integ-orbit::before {
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
}

.zwc-integ-orbit::after {
  left: 28%;
  top: 28%;
  width: 44%;
  height: 44%;
}

.zwc-integ-orbit li {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16.92%;
  height: 16.92%;
  border: 1px solid var(--zwc-brdr);
  border-radius: 50%;
  background-color: var(--zwc-white);
  box-shadow: 0 14px 15px rgba(0, 0, 0, 0.18);
  z-index: 1;
}

.zwc-integ-orbit li img {
  width: 80%;
  height: auto;
  object-fit: contain;
}

.zwc-integ-orbit .zwc-orb-2 img,
.zwc-integ-orbit .zwc-orb-3 img,
.zwc-integ-orbit .zwc-orb-hub img {
  width: 50%;
}

.zwc-orb-1 {
  left: 51.3%;
  top: 0.68%;
}

.zwc-orb-2 {
  left: 83.37%;
  top: 38.16%;
}

.zwc-orb-3 {
  left: 57.67%;
  top: 80.35%;
}

.zwc-orb-4 {
  left: 9.61%;
  top: 68.87%;
}

.zwc-orb-5 {
  left: 5.75%;
  top: 19.62%;
}

.zwc-integ-orbit .zwc-orb-6 {
  left: 49.46%;
  top: 63.63%;
  width: 14.62%;
  height: 14.62%;
}

.zwc-integ-orbit .zwc-orb-7 {
  left: 57.39%;
  top: 26.38%;
  width: 14.62%;
  height: 14.62%;
}

.zwc-integ-orbit .zwc-orb-8 {
  left: 21.23%;
  top: 38.07%;
  width: 14.62%;
  height: 14.62%;
}

.zwc-orb-8 .zwc-icon {
  width: 90%;
  height: 30px;
  background-image: url("/sites/zweb/images/otherbrandlogos/intuit-quickbooks.svg");
}

.zwc-integ-orbit .zwc-orb-hub {
  left: 39.305%;
  top: 39.305%;
  width: 21.39%;
  height: 21.39%;
  box-shadow: 0 23px 62px rgba(255, 97, 5, 0.18), 0 6px 19px rgba(0, 0, 0, 0.08);
}

.zwc-integ-list {
  width: 47.2%;
}

.zwc-integ-list li {
  display: flex;
  gap: 16px;
  padding-bottom: 32px;
}

.zwc-integ-list li+li {
  border-top: 1px solid var(--zwc-brdr);
  padding-top: 33px;
}

.zwc-integ-list li:last-child {
  padding-bottom: 0;
}

.zwc-int-icn-1::before {
  width: 18px;
  height: 23px;
  margin: 4.5px 7px 0;
  background-position: -1197px -25px;
}

.zwc-int-icn-2::before {
  width: 22px;
  height: 17px;
  margin: 7.5px 5px 0;
  background-position: -1226px -27px;
}

.zwc-int-icn-3::before {
  width: 20px;
  height: 22px;
  margin: 5px 6px 0;
  background-position: -1253px -24px;
}

.zwc-int-icn-4::before {
  width: 22px;
  height: 19px;
  margin: 6.5px 5px 0;
  background-position: -1278px -26px;
}

.zwc-integ-list h3 {
  font-size: var(--h4-font-1);
  line-height: 1.4;
  letter-spacing: -0.2px;
  margin: 0;
}

.zwc-integ-list p {
  color: var(--zwc-txt-2);
  margin: 8px 0 0;
}

/* End Integrations */

/* Sectors */
.zwc-sector {
  padding: 80px 0;
  background-color: var(--zwc-bg-4);
}

.zwc-sector-head {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.zwc-sector-list {
  max-width: 820px;
  margin: 72px auto 0;
  justify-content: space-between;
  gap: 12px 0;
}

.zwc-sector-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 32.35%;
  min-height: 66px;
  padding: 20px 24px;
  border: 1px solid var(--zwc-brdr-2);
  border-radius: 16px;
  background-color: var(--zwc-white);
}

/* li is align-items:center, so the cell centres on its own */
.zwc-sec-icn-1::before {
  width: 18px;
  height: 14px;
  margin: 0 3px;
  background-position: -1305px -26px;
}

.zwc-sec-icn-2::before {
  width: 20px;
  height: 17px;
  margin: 0 2px;
  background-position: -1330px -21px;
}

.zwc-sec-icn-3::before {
  width: 18px;
  height: 19px;
  margin: 0 3px;
  background-position: -1357px -22px;
}

.zwc-sec-icn-4::before {
  width: 14px;
  height: 21px;
  margin: 0 5px;
  background-position: -1385px -21px;
}

.zwc-sec-icn-5::before {
  width: 18px;
  height: 19px;
  margin: 0 3px;
  background-position: -1409px -22px;
}

.zwc-sec-icn-6::before {
  width: 15px;
  height: 21px;
  margin: 0 4.5px;
  background-position: -1439px -21px;
}

.zwc-sector-list p {
  font-family: var(--primaryfont-semibold);
  font-size: var(--h4-font-1);
  line-height: 1.2;
  letter-spacing: -0.16px;
  white-space: nowrap;
  color: var(--zwc-black);
  margin: 0;
}

/* End Sectors */

/* Testimonials */
.zwc-testi {
  padding: 80px 0;
}

.zwc-testi h2 {
  text-align: center;
}

.zwc-testi-list {
  margin-top: 72px;
  justify-content: space-between;
  align-items: stretch;
  gap: 24px 0;
}

.zwc-testi-card {
  display: flex;
  flex-direction: column;
  width: 31.94%;
  padding: 40px;
  border: 1px solid var(--zwc-brdr);
  border-radius: 24px;
  background-color: var(--zwc-white);
  box-shadow: 0 14px 17px rgba(0, 0, 0, 0.07);
}

.zwc-testi-logo {
  height: 52px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 40px;
}

.zwc-testi-card h3,
.zwc-testi-feat h3 {
  font-family: var(--primaryfont-bold);
  font-size: var(--stat-font-1);
  line-height: 1;
  letter-spacing: -0.16px;
  margin: 0;
}

.zwc-testi-card h4,
.zwc-testi-feat h4 {
  font-family: var(--primaryfont-semibold);
  font-size: var(--h4-font-1);
  line-height: 1.2;
  letter-spacing: -0.16px;
  color: var(--zwc-txt-2);
  margin: 4px 0 32px;
}

.zwc-testi-card>p,
.zwc-testi-feat>div:first-child>p {
  margin: 0 0 32px;
}

.zwc-testi-card>p span,
.zwc-testi-feat>div:first-child>p span {
  font-family: var(--zf-primary-medium);
}

.zwc-testi-by {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: auto;
  padding-top: 25px;
  border-top: 1px solid var(--zwc-brdr);
}

.zwc-testi-by img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--zwc-peach);
}

.zwc-testi-by p {
  font-family: var(--primaryfont-bold);
  font-size: var(--h4-font-1);
  line-height: 1.2;
  color: var(--zwc-black);
  margin: 0;
}

.zwc-testi-by p+p {
  font-family: var(--primaryfont-regular);
  font-size: var(--p-font-2);
  color: var(--zwc-grey);
  margin-top: 3px;
}

.zwc-testi-feat {
  width: 65.97%;
  border: 1px solid var(--zwc-brdr);
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--zwc-white);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.22);
  align-items: stretch;
}

.zwc-testi-feat>div:first-child {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 40px;
}

.zwc-testi-feat h3 {
  margin-bottom: 0;
}

.zwc-testi-media {
  position: relative;
  width: 50%;
}

.zwc-testi-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zwc-testi-media .video-icon {
  position: absolute;
  right: 32px;
  top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--zwc-white);
  cursor: pointer;
}

.zwc-testi-media .video-icon::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #000;
  z-index: 1;
}

.zwc-testi-shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

.waves-prt {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 95px;
  height: 95px;
  z-index: 0;
  background: rgba(255, 255, 255, 0.584);
  border-radius: 100%;
  animation: 1s linear 0s infinite normal none running waves;
}

@keyframes waves {
  0% {
    transform: scale(0.5, 0.5);
    opacity: 0;
  }

  50% {
    opacity: 0.9;
  }

  100% {
    transform: scale(0.9, 0.9);
    opacity: 0;
  }
}

/* End Testimonials */

/* Bottom CTA */
.zwc-btm-cta {
  padding: 80px 0;
  text-align: center;
  background: url(/sites/zweb/images/creator/manufacturing/manufacturing-bottom-bg.png)no-repeat;
}

.zwc-btm-cta .zwc-btn::before {
  position: absolute;
  background-position: -1539px -17px;
  width: 20px;
  height: 15px;
  right: 30px;

}

.zwc-btm-cta h2 {
  font-size: var(--h2-font-1);
  line-height: 1.17;
  letter-spacing: -1.44px;
  color: var(--zwc-white);
  margin: 0;
}

.zwc-btm-cta h2 .zcr-prd-name {
  color: var(--zwc-orange-dk);
}

.zwc-btm-cta p {
  max-width: 560px;
  margin: 24px auto 0;
  font-size: var(--p-font-1);
  line-height: 1.4;
  color: #b5b5b5;
}

.zwc-btm-cta .zwc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 48px;
  padding: 14px 62px 14px 32px;
  border: 2px solid var(--primary-btn-color);
  border-radius: 8px;
  font-family: var(--primaryfont-semibold);
  font-size: var(--p-font-1);
  line-height: 1.2;
  letter-spacing: -0.24px;
  text-transform: none;
  color: var(--zwc-white);
  background-color: var(--primary-btn-color);
  position: relative;
}

.zwc-btm-cta .zwc-btn::before {
  background: url(/sites/zweb/images/creator/manufacturing/arrow-right-white.svg) no-repeat center / cover;
  top: 50%;
  transform: translateY(-50%);
}


/* End Bottom CTA */


/* FAQ */

.pagewrapper .zwc-faq .content-wrap {
  padding: 120px 0;
}

.zwc-faq-heading,
.zwc-faq-item,
.zwc-faq-cnt h3,
.zwc-faq-cnt h3 button {
  position: relative;
}

.zwc-faq-heading {
  width: 40%;
}

.zwc-faq-heading h2 {
  font-size: 40px;
  letter-spacing: -0.96px;
  max-width: 420px;
}

.zwc-faq-cnt {
  width: 60%;
}

.zwc-faq-item {
  margin-bottom: 16px;
  background: #f5f5f5;
}

.zwc-faq-item:last-child {
  margin-bottom: 0;
}

.zwc-faq-item.active h3 span:after {
  display: none;
}

.zwc-faq-cnt h3 {
  margin-bottom: 0;
  z-index: 2;
  color: #000;
}

.zwc-faq-cnt h3 button {
  font-size: 20px;
  letter-spacing: -0.4px;
  margin-bottom: 0;
  cursor: pointer;
  padding: 24px 65px 24px 24px;
  background: transparent;
  border: inherit;
  width: 100%;
  text-align: left;
  font-family: var(--primaryfont-semibold);
  z-index: 2;
  color: #000;
}

.zwc-faq-cnt h3 span,
.zwc-faq-cnt h3 span:before,
.zwc-faq-cnt h3 span:after {
  content: "";
  position: absolute;
  cursor: pointer;
}

.zwc-faq-cnt h3 span {
  right: 26px;
  top: 26px;
  z-index: 1;
  width: 24px;
  height: 24px;
  background-color: #000;
  border-radius: 100px;
}

.zwc-faq-cnt h3 span:before,
.zwc-faq-cnt h3 span:after {
  background: #fff;
  z-index: 2;
  border-radius: 8px;
}

.zwc-faq-cnt h3 span:before,
.zwc-faq-cnt h3 span:after {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.zwc-faq-cnt h3 span:before {
  height: 2px;
  width: 14px;
}

.zwc-faq-cnt h3 span:after {
  width: 2px;
  height: 14px;
}

.zwc-faq-ans {
  display: none;
  padding: 0 24px 24px;
}

.zwc-faq-item:first-child .zwc-faq-ans {
  display: block;
}

.zwc-faq-ans p {
  font-size: var(--p-font-2);
  margin-bottom: 0;
  max-width: 660px;
}

/* End FAQ */

/* Animations */
.content-wrap:not(.middle-animated) .zwc-ops-cards article,
.content-wrap:not(.middle-animated) .zwc-testi-card,
.content-wrap:not(.middle-animated) .zwc-testi-feat {
  opacity: 0;
  transform: translateY(16px);
}

/* the feature panel is not one of the hover surfaces, so it needs its own
   transition — the cards inherit theirs from the hover declaration */
.zwc-testi-feat {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* End Animations — Operations + Testimonials */

/* Animations — Gap */
/* Gap layers — the two systems and the sync arrows arrive as a sequence: first
   card, arrow out, second card, arrow back. Each arrow slides in along the
   direction it points — the top one left to right, the lower one right to
   left. The translate is written before the rotate so it is applied in the
   unrotated frame; the other order would send .zwc-gap-sync-2 the wrong way. */
.zwc-gap-card {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.zwc-gap-sync-1,
.zwc-gap-sync-2 {
  transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.content-wrap:not(.middle-animated) .zwc-gap-card {
  opacity: 0;
  transform: translateY(16px);
}

.content-wrap:not(.middle-animated) .zwc-gap-sync-1 {
  opacity: 0;
  transform: translateX(-28px);
}

.content-wrap:not(.middle-animated) .zwc-gap-sync-2 {
  opacity: 0;
  transform: translateX(28px) rotate(180deg);
}

.content-wrap .zwc-gap-card:first-child {
  transition-delay: 0.1s;
}

.content-wrap .zwc-gap-sync-1 {
  transition-delay: 0.7s;
}

.content-wrap .zwc-gap-card:last-child {
  transition-delay: 1.3s;
}

.content-wrap .zwc-gap-sync-2 {
  transition-delay: 1.9s;
}

/* End Animations — Gap */

/* Animations — Testimonials */
/* the cards arrive one after another. The feature panel is
   nth-child(2) and is not a .zwc-testi-card, so the four cards sit at child
   positions 1, 3, 4 and 5. */
.content-wrap .zwc-testi-card:nth-child(1) {
  transition-delay: 0.3s;
}

.content-wrap .zwc-testi-feat {
  transition-delay: 0.55s;
}

.content-wrap .zwc-testi-card:nth-child(3) {
  transition-delay: 0.8s;
}

.content-wrap .zwc-testi-card:nth-child(4) {
  transition-delay: 1s;
}

.content-wrap .zwc-testi-card:nth-child(5) {
  transition-delay: 1.2s;
}

/* End Animations — Testimonials */

/* Animations — Operations */
/* the three cards stagger by a frame each rather than by a beat, so the row
   settles as one block */
.content-wrap .zwc-ops-cards article:nth-child(1) {
  transition-delay: 0.00s;
}

.content-wrap .zwc-ops-cards article:nth-child(2) {
  transition-delay: 0.06s;
}

.content-wrap .zwc-ops-cards article:nth-child(3) {
  transition-delay: 0.12s;
}

/* End Animations — Operations */

/* Animations — Apps */
.zwc-visual .zwc-badge {
  opacity: 0;
}

.zwc-visual.zwc-in .zwc-badge {
  animation: zwc-badge-in 1s linear both;
}

/* The easing sits on the keyframes rather than the shorthand, because a timing
   function applies per segment: the rise decelerates to a standstill and the
   tilt starts from one, so the hand-off carries no velocity jump. `transform`
   is deliberately absent from the 25% stop — restating it there would split the
   rise into two segments and reset its speed mid-flight. */
@keyframes zwc-badge-in {
  0% {
    opacity: 0;
    transform: translateY(300px) rotate(0deg);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }

  25% {
    opacity: 1;
  }

  70% {
    transform: translateY(0) rotate(0deg);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(-6deg);
  }
}

/* End Animations — Apps */

/* Animations — Roles */
.zwc-roles-pics img {
  opacity: 0;
  transform: scale(0.85);
}

.middle-animated .zwc-roles-pics img {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.middle-animated .zwc-roles-pics img:nth-child(1) {
  transition-delay: 0s;
}

.middle-animated .zwc-roles-pics img:nth-child(2) {
  transition-delay: 0.14s;
}

.middle-animated .zwc-roles-pics img:nth-child(3) {
  transition-delay: 0.28s;
}

.middle-animated .zwc-roles-pics img:nth-child(4) {
  transition-delay: 0.42s;
}

/* End Animations — Roles */

/* Animations — Stack */
/* the panel and its two tags animate in whenever the open row changes,
   because .zwc-active moves between the boxes */
.zwc-stack-box.zwc-active {
  animation: zwc-panel-in 0.45s ease both;
}

@keyframes zwc-panel-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.zwc-stack-box.zwc-active .zwc-tag-top {
  animation: zwc-tag-top-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

.zwc-stack-box.zwc-active .zwc-tag-btm {
  animation: zwc-tag-btm-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}

@keyframes zwc-tag-top-in {
  from {
    opacity: 0;
    transform: translate(22px, -18px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes zwc-tag-btm-in {
  from {
    opacity: 0;
    transform: translate(-26px, 18px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* End Animations — Stack */

/* Animations — Integrations */
/* the ring turns and every logo counter-turns at the same rate,
   so they orbit without spinning. The two ring pseudo-elements are concentric
   circles, so their rotation is invisible. */
.zwc-integ-orbit {
  animation: zwc-orbit 46s linear infinite;
}

.zwc-integ-orbit li {
  animation: zwc-orbit-counter 46s linear infinite;
}

@keyframes zwc-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes zwc-orbit-counter {
  to {
    transform: rotate(-360deg);
  }
}

/* The inner ring turns against the outer one. It sits inside the container, so
   it already inherits that +360deg; -720deg of its own leaves it at a net
   -360deg — same speed, opposite direction. (-360deg would merely cancel the
   container and hold the ring still.) */
.zwc-integ-orbit::after {
  animation: zwc-orbit-inner 46s linear infinite;
}

@keyframes zwc-orbit-inner {
  to {
    transform: rotate(-720deg);
  }
}

/* Inner ring — orbs 6, 7 and 8 travel against the outer five. Rotating an orb
   about its own centre would only spin it in place, so transform-origin is moved
   to the container's centre, expressed in each orb's own box: the boxes are
   14.62% of the container, so the origin is (50% - left) / 14.62 * 100. Their own
   -720deg plus the container's +360deg nets to -360deg of travel. */
.zwc-integ-orbit .zwc-orb-6,
.zwc-integ-orbit .zwc-orb-7,
.zwc-integ-orbit .zwc-orb-8 {
  animation: zwc-orbit-inner 46s linear infinite;
}

.zwc-integ-orbit .zwc-orb-6 {
  transform-origin: 3.69% -93.23%;
}

.zwc-integ-orbit .zwc-orb-7 {
  transform-origin: -50.55% 161.56%;
}

.zwc-integ-orbit .zwc-orb-8 {
  transform-origin: 196.79% 81.6%;
}

/* that leaves each of the three tipped by -360deg, so the logo inside turns the
   other way to stay upright */
.zwc-orb-6 img,
.zwc-orb-7 img,
.zwc-orb-8 .zwc-icon {
  animation: zwc-orbit 46s linear infinite;
}

/* the hub sits on the centre so it only counter-turns; its logo still breathes */
.zwc-orb-hub img {
  animation: zwc-breathe 6s ease-in-out 1s infinite;
}

@keyframes zwc-breathe {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* End Animations — Integrations */

/* Animations — Operations + Testimonials + Sectors + Integrations */
/* hover lifts on the card surfaces */
/* these four are both reveal targets and hover surfaces, so a single
   declaration covers the fade, the lift and the shadow */
.zwc-ops-card,
.zwc-testi-card,
.zwc-sector-list li,
.zwc-integ-list li {
  transition: opacity 0.5s ease, transform 0.35s ease, box-shadow 0.3s ease;
}

/* End Animations — Operations + Testimonials + Sectors + Integrations */

/* Animations — reduced motion and small screens */
/* Motion stays desktop-only and always yields to a reduced-motion preference */
@media (max-width: 1199px),
(prefers-reduced-motion: reduce) {

  /* Stack + Integrations */
  .zwc-stack-box.zwc-active,
  .zwc-stack-box.zwc-active .zwc-tag-top,
  .zwc-stack-box.zwc-active .zwc-tag-btm,
  .zwc-integ-orbit,
  .zwc-integ-orbit::after,
  .zwc-integ-orbit li,
  .zwc-integ-orbit .zwc-orb-6,
  .zwc-integ-orbit .zwc-orb-7,
  .zwc-integ-orbit .zwc-orb-8,
  .zwc-orb-6 img,
  .zwc-orb-7 img,
  .zwc-orb-8 .zwc-icon,
  .zwc-orb-hub img {
    animation: none;
  }

  /* End Stack + Integrations */

  /* Operations + Testimonials + Gap */
  /* the reveals above are :not() rules, so resetting the hidden state is enough */
  .content-wrap:not(.middle-animated) .zwc-ops-cards article,
  .content-wrap:not(.middle-animated) .zwc-testi-card,
  .content-wrap:not(.middle-animated) .zwc-testi-feat,
  .content-wrap:not(.middle-animated) .zwc-gap-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .content-wrap:not(.middle-animated) .zwc-gap-sync-1 {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* keeps the 180deg flip that points this arrow back. Below 991px the Gap
     block turns both arrows a quarter turn instead, and that rule is written
     with the same specificity later in the file so it wins there. */
  .content-wrap:not(.middle-animated) .zwc-gap-sync-2 {
    opacity: 1;
    transform: rotate(180deg);
    transition: none;
  }

  /* End Operations + Testimonials + Gap */

  /* Apps */
  /* no animation to reveal it, so the badge simply sits at its resting tilt */
  .zwc-visual .zwc-badge {
    opacity: 1;
  }

  .zwc-visual.zwc-in .zwc-badge {
    animation: none;
  }

  /* End Apps */

  /* Roles */
  .zwc-roles-pics img,
  .top-animated .zwc-roles-pics img {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* End Roles */

  /* Operations + Testimonials + Sectors + Integrations */
  .zwc-ops-card:hover,
  .zwc-testi-card:hover,
  .zwc-sector-list li:hover,
  .zwc-integ-list li:hover {
    transform: none;
  }

  /* End Operations + Testimonials + Sectors + Integrations */
}

/* End Animations — reduced motion and small screens */

/* End Animations */

@media (max-width: 1440px) {
  /* Banner */
  .zwc-bnr h1 {
    letter-spacing: -1.8px;
  }

  /* End Banner */
  /* Stack */
  .zwc-stack-acc {
    padding: 40px 32px;
  }

  .zwc-stack-pnl {
    padding: 40px 32px 40px 0;
  }

  /* End Stack */
  /* Apps */
  .zwc-visual {
    max-width: 460px;
  }

  .zwc-apps-nav.zwc-stuck a {
    padding: 9px 13px;
    font-size: 13px;
  }

  /* End Apps */
}

@media (max-width: 1280px) {
  /* Base */
  .pagewrapper {
    --h1-font-1: 64px;
    --h2-font-1: 40px;
    --h2-font-2: 36px;
    --h3-font-1: 32px;
    --h3-font-2: 24px;
    --stat-font-1: 32px;
  }

  /* End Base */

  /* Trusted Brands */
  .pagewrapper .zwc-trusted-brands .content-wrap {
    max-width: 944px;
  }

  /* End Trusted Brands */

  /* Gap */
  .zwc-gap-pnts article {
    width: 48.5%;
    padding-bottom: 32px;
  }

  .zwc-gap-pnts article:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  /* End Gap */

  /* FAQ */
  .zwc-faq-heading,
  .zwc-faq-cnt {
    width: 100%;
  }

  .zwc-faq-heading h2 {
    margin-bottom: 40px;
    max-width: inherit;
  }

  /* End FAQ */
}

@media (max-width: 1199px) {
  /* Base */
  .pagewrapper {
    --h2-font-1: 36px;
    --h2-font-2: 32px;
  }

  /* End Base */

  /* Trusted Brands */
  .pagewrapper .zwc-trusted-brands .content-wrap {
    max-width: 848px;
  }

  /* End Trusted Brands */

  /* Banner */
  .zwc-bnr {
    padding: 55px 0 64px;
  }

  /* End Banner */
  /* Operations */
  .zwc-ops-panel {
    padding: 56px 0;
  }

  .zwc-ops h2,
  .zwc-ops-intro p {
    width: 100%;
  }

  .zwc-ops-intro p {
    margin-top: 24px;
  }

  /* End Operations */
  /* Apps */
  .zwc-apps-nav a {
    font-size: var(--p-font-4);
    padding: 8px 12px;
  }

  /* End Apps */
  /* Stack */
  .zwc-stack-cnt::before {
    right: 50%;
  }

  .zwc-stack-cnt::after {
    left: 44.5%;
  }

  .zwc-stack-pnl {
    width: 53%;
  }

  .zwc-stack-tag {
    display: none;
  }

  .zwc-stack-acc {
    padding: 40px 24px;
    width: 43%;
  }

  .zwc-stack-pnl {
    padding: 40px 24px 40px 0;
  }

  /* End Stack */
  /* Testimonials */
  .zwc-testi-card,
  .zwc-testi-feat {
    padding: 32px;
  }

  .zwc-testi-feat {
    padding: 0;
  }

  .zwc-testi-feat>div:first-child {
    padding: 32px;
  }

  /* End Testimonials */

  /* Apps */
  /* the pill rail gives way to the section headings from here down */
  .zwc-apps-nav {
    display: none;
  }

  /* End Apps */

  /* FAQ */
  .pagewrapper .zwc-faq .content-wrap {
    padding: 80px 0;
  }

  /* End FAQ */
}

@media (max-width: 991px) {
  /* Base */
  .pagewrapper {
    --h1-font-1: 56px;
    --h3-font-1: 28px;
    --p-font-1: 18px;
    --h3-font-2: 24px;
  }

  /* End Base */

  /* Banner */
  .zwc-bnr-txt,
  .zwc-bnr-img {
    width: 100%;
    text-align: center;
  }

  .zwc-bnr-img {
    margin: 40px auto 0;
    max-width: 460px;
    align-self: center;
  }

  .zwc-bnr-txt>p {
    margin: 24px auto 0;
    max-width: 650px;
  }

  .zwc-bnr-cta {
    margin-top: 32px;
    justify-content: center;
  }

  .zwc-bnr{
    padding: 50px 0 35px;
  }

  /* End Banner */
  /* Trusted Brands */
  .zwc-trusted-brands ul {
    gap: 32px;
  }

  .zwc-trusted-brands ul li {
    width: 29.3%;
  }

  /* End Trusted Brands */
  /* Gap */
  .zwc-gap-layers {
    gap: 24px 0;
  }

  .zwc-gap {
    padding-bottom: 30px;
  }

  .zwc-gap-card {
    width: 100%;
  }

  /* The two cards stack from here down, so the sync pair turns with them:
     the row reads arrow-down, label, arrow-up instead of left/right. */
  .zwc-gap-sync {
    width: 100%;
    flex-direction: row;
    gap: 12px;
  }

  /* Rotating a 40x15 sprite cell leaves a 40x15 layout box behind, so the
     margins trade 25px of width for 25px of height and the upright arrow
     reserves the space it actually occupies. */
  .zwc-gap-sync-1,
  .zwc-gap-sync-2 {
    margin: 12.5px -12.5px;
  }

  .zwc-gap-sync-1,
  .content-wrap:not(.middle-animated) .zwc-gap-sync-1 {
    transform: rotate(90deg);
  }

  .zwc-gap-sync-2,
  .content-wrap:not(.middle-animated) .zwc-gap-sync-2 {
    transform: rotate(-90deg);
  }

  /* End Gap */
  /* Operations */
  .zwc-ops-cards {
    gap: 24px;
  }

  .zwc-ops-card {
    width: calc(50% - 12px);
  }

  /* End Operations */
  /* Roles */
  .zwc-roles-pics,
  .zwc-roles-list {
    width: 100%;
  }

  .zwc-roles-pics {
    max-width: 480px;
    margin: 0 auto 40px;
  }

  /* End Roles */
  /* Apps */
  .zwc-apps-nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-radius: 12px;
  }

  .zwc-apps-nav a {
    white-space: nowrap;
  }




  .zwc-apps-row+.zwc-apps-row {
    margin-top: 64px;
  }

  .zwc-badge {
    transform: rotate(-6deg) scale(0.8);
    right: 0;
  }

  /* End Apps */
  /* Stack */
  .zwc-stack-cnt {
    min-height: 0;
  }

  .zwc-stack-cnt::before,
  .zwc-stack-cnt::after {
    display: none;
  }

  .zwc-stack-acc,
  .zwc-stack-pnl {
    width: 100%;
  }

  .zwc-stack-acc {
    background-color: var(--zwc-bg-4);
  }

  .zwc-stack-pnl {
    padding: 40px 24px;
    background-image: linear-gradient(159deg, #fff1e5 33%, #efedf7 66%, #fff8f6 88%);
    display: none;
  }

  .zwc-stack-body p {
    max-width: 100%;
  }

  /* End Stack */
  /* Integrations */
  .zwc-integ-orbit,
  .zwc-integ-list {
    width: 100%;
  }

  .zwc-integ-orbit {
    margin: 0 auto 48px;
  }

  /* End Integrations */
  /* Sectors */
  .zwc-sector-list li {
    width: 49%;
  }

  /* End Sectors */
  /* Testimonials */
  .zwc-testi-card,
  .zwc-testi-feat {
    width: 100%;
  }

  .zwc-testi-list {
    max-width: 500px;
    margin: 60px auto 0;
  }

  .zwc-testi-feat>div:first-child,
  .zwc-testi-media {
    width: 100%;
  }

  .zwc-testi-media {
    min-height: 320px;
  }

  /* End Testimonials */
}

@media (max-width: 767px) {
  /* Base */
  .pagewrapper {
    --h1-font-1: 40px;
    --h2-font-1: 34px;
    --h2-font-2: 30px;
    --h3-font-1: 24px;
    --h3-font-2: 22px;
    --p-font-1: 16px;
    --stat-font-1: 28px;
  }

  .pagewrapper p {
    letter-spacing: normal;
    line-height: normal;
  }

  /* End Base */

  /* Banner */
  .zwc-bnr {
    padding: 40px 0 0;
  }

  .zwc-bnr h1 {
    letter-spacing: normal;
    line-height: normal;
  }

  .zwc-bnr p,
  .zwc-bnr-cta .zwc-btn {
    letter-spacing: normal;
    line-height: normal;
  }

  .zwc-bnr-cta {
    gap: 12px;
  }

  /* End Banner */
  /* Trusted Brands */
  .pagewrapper .zwc-trusted-brands .content-wrap {
    padding: 28px 0 32px;
  }

  .zwc-trusted-brands ul {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .zwc-trusted-brands h2 {
    margin: 0 0 24px;
  }

  /* the stats row is divided from the logos by a rule, so the desktop 70px of
     clearance around it is far more than the strip needs here */
  .zwc-trusted-brands .zwc-flx-cont {
    padding-bottom: 20px;
    margin-bottom: 24px;
  }

  /* End Trusted Brands */
  /* Gap */
  .zwc-gap {
    padding: 32px 0 25px;
  }

  .zwc-gap h2,
  .zwc-roles h2,
  .zwc-apps h2,
  .zwc-sector h2,
  .zwc-testi h2,
  .zwc-ops h2,
  .zwc-stack h2,
  .zwc-integ h2,
  .zwc-btm-cta h2 {
    letter-spacing: normal;
    line-height: normal;
  }

  .zwc-gap-pnts {
    margin-top: 28px;
  }

  /* the last point already carries 24px of its own padding, so the desktop
     48px on top of it reads as a second section break */
  .zwc-gap-layers {
    margin-top: 12px;
  }

  .zwc-gap-pnts article {
    width: 100%;
    border-left: 0;
    padding: 0 0 24px;
  }

  .zwc-gap-pnts article+article {
    border-left: 0;
    padding-left: 0;
  }

  .zwc-gap-card {
    padding: 24px;
  }

  .zwc-gap-logos li {
    width: 48px;
    height: 48px;
  }

  /* End Gap */
  /* Operations */
  .zwc-ops {
    padding: 32px 16px;
  }

  /* the panel carries its own background, so its inset stays larger than the
     section padding it sits inside */
  .zwc-ops-panel {
    padding: 32px 0;
    border-radius: 16px;
  }

  .zwc-ops-cards {
     max-width: 400px;
     margin: 28px auto 0;
  }

  .zwc-ops-info{
    padding: 25px;
  }

  /* End Operations */
  /* Roles */
  .zwc-roles {
    padding: 32px 0;
  }

  .zwc-roles-cnt {
    margin-top: 28px;
  }

  .zwc-roles-pics{
    display: none;
  }

  .zwc-roles-list h3,
  .zwc-roles-list p {
    letter-spacing: normal;
    line-height: normal;
  }

  .zwc-ops-card {
    width: 100%;
  }

  /* End Roles */
  /* Apps */
  .zwc-apps {
    padding: 32px 0;
  }

  /* From here down the eight rows are an accordion: the heading turns into
     the trigger and the copy and the screenshot collapse together as one
     unit, so only the row being read takes up any height. script.js keeps a
     single row open and drives the two heights over the same duration. */
  .zwc-apps-list {
    margin-top: 24px;
    border-top: 1px solid var(--zwc-brdr);
  }

  .zwc-apps-row {
    border-bottom: 1px solid var(--zwc-brdr);
    gap: 0;
  }

  .zwc-apps-row+.zwc-apps-row {
    margin-top: 0;
  }

  .zwc-apps-txt h3 {
    letter-spacing: normal;
    line-height: normal;
    font-size: 20px;
  }

  .zwc-apps-txt h3 button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    cursor: pointer;
  }

  .zwc-apps-txt h3 button::after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 12px;
    height: 7px;
    background-image: var(--sprite);
    background-repeat: no-repeat;
    background-position: -1653px -20px;
    filter: grayscale(1);
    transform: rotate(180deg);
    transition: transform 0.35s ease, filter 0.35s ease;
  }

  .zwc-apps-row.zwc-active h3 button::after {
    transform: rotate(0deg);
    filter: grayscale(0);
  }

  /* the collapsing pair. Their spacing lives on the children so a closed row
     measures exactly zero instead of the row gap plus two margins. */
  .zwc-apps-body,
  .zwc-apps-row .zwc-visual {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: height 0.35s ease, visibility 0.35s ease;
  }

  .zwc-apps-row.zwc-active .zwc-apps-body,
  .zwc-apps-row.zwc-active .zwc-visual {
    height: auto;
    visibility: visible;
  }

  .zwc-apps-txt ul {
    margin: 20px 0 24px;
  }

  .zwc-visual {
    min-height: 0;
    margin-right: auto;
  }

  .zwc-visual img {
    margin-bottom: 24px;
  }

  .zwc-apps-row,
  .zwc-apps-row:nth-child(even) {
    flex-direction: column;
  }

  .zwc-apps-txt,
  .zwc-visual {
    width: 100%;
  }

  /* 54/69 — scaled rather than resized, since the sprite cell is fixed */
  .zwc-badge {
    transform: rotate(-6deg) scale(0.783);
    transform-origin: 100% 0;
  }

  /* End Apps */
  /* Stack */
  .zwc-stack {
    padding: 32px 0;
  }

  .zwc-stack-head {
    padding: 0;
    width: 90%;
    margin: 0 auto;
  }

  .zwc-stack-cnt {
    margin-top: 28px;
  }

  .zwc-stack-acc {
    padding: 24px 16px;
  }

  .zwc-stack-acc button span,
  .zwc-stack-body p {
    letter-spacing: normal;
    line-height: normal;
  }

  .zwc-stack-acc button {
    gap: 12px;
  }

  /* End Stack */
  /* Integrations */
  .zwc-integ {
    padding: 24px 0 32px;
  }

  .zwc-integ-cnt {
    margin-top: 28px;
  }

  .zwc-integ-list li {
    padding-bottom: 24px;
  }

  .zwc-integ-list li+li {
    padding-top: 24px;
  }

  .zwc-integ-list h3,
  .zwc-integ-list p {
    letter-spacing: normal;
    line-height: normal;
  }

  /* End Integrations */
  /* Sectors */
  .zwc-sector {
    padding: 40px 0;
  }

  .zwc-sector-list {
    margin-top: 28px;
  }

  .zwc-sector-list li {
    width: 100%;
    min-height: 0;
    padding: 16px 20px;
  }

  .zwc-sector-list p {
    letter-spacing: normal;
    line-height: normal;
    white-space: normal;
  }

  /* End Sectors */
  /* Testimonials */
  .zwc-testi {
    padding: 32px 0;
  }

  .zwc-testi-list {
    margin-top: 28px;
  }

  .zwc-testi-card,
  .zwc-testi-feat>div:first-child {
    padding: 24px;
  }

  .zwc-testi-logo {
    height: 40px;
    margin-bottom: 24px;
  }

  .zwc-testi-card h4 {
    margin-bottom: 20px;
  }

  .zwc-testi-card>p,
  .zwc-testi-feat>div:first-child>p {
    margin-bottom: 24px;
  }

  .zwc-testi-card h3,
  .zwc-testi-card h4,
  .zwc-testi-by p,
  .zwc-testi-feat h3,
  .zwc-testi-feat h4 {
    letter-spacing: normal;
    line-height: normal;
  }

  .zwc-testi-media {
    min-height: 240px;
  }

  /* End Testimonials */
  /* Bottom CTA */
  .zwc-btm-cta {
    padding: 40px 0;
  }

  .zwc-btm-cta .zwc-btn {
    margin-top: 32px;
    letter-spacing: normal;
    line-height: normal;
  }

  /* End Bottom CTA */

  /* FAQ */
  .pagewrapper .zwc-faq .content-wrap {
    padding: 32px 0;
  }

  .zwc-faq-heading h2 {
    font-size: 32px;
  }

  /* End FAQ */
}

@media (max-width: 480px) {
  /* Base */
  .pagewrapper {
    --h1-font-1: 34px;
    --h2-font-1: 30px;
    --h2-font-2: 30px;
    --stat-font-1: 26px;
  }

  /* every section head goes left-aligned together, so the rule is shared
     rather than repeated inside each section block below */
  .zwc-gap-head,
  .zwc-roles-head,
  .zwc-apps-head,
  .zwc-stack-head,
  .zwc-integ-head,
  .zwc-sector-head,
  .zwc-testi h2,
  .zwc-btm-cta {
    text-align: left;
  }

  /* End Base */

  /* Banner */
  .zwc-bnr-cta .zwc-btn {
    justify-content: center;
    padding: 14px 54px 14px 24px;
  }

  /* End Banner */

  /* Trusted Brands */
  .zwc-trusted-brands .content-wrap h2 {
    font-size: 23px;
  }

  .zwc-trusted-brands .zwc-flx-cont li span {
    font-size: 28px;
  }

  /* End Trusted Brands */

  /* Testimonials */
  .zwc-testi-by img {
    width: 44px;
    height: 44px;
  }

  .zwc-testi-media .video-icon {
    width: 50px;
    height: 50px;
  }

  .zwc-testi-media .video-icon::before {
    border-width: 7px 0 7px 12px;
  }

  /* the pulse ring around the play button */
  .waves-prt {
    top: -18px;
    left: -18px;
    width: 85px;
    height: 85px;
  }

  /* End Testimonials */
}