/* ============================================================
   Legacy System Automation (Zoho RPA) — page-specific styles
   Colour tokens in :root, font-size tokens on .pagewrapper and
   overridden per breakpoint. Section blocks are delimited with the
   same labels used by the HTML section comments.
   ============================================================ */

:root {
  --sprite: url("/sites/zweb/images/rpa/usecases/legacy-system-auto-sprite.svg");
  --zwc-blue: #293fe9;
  --zwc-blue-dark: #1528c2;
  --zwc-blue-darker: #1d2eb8;
  --zwc-blue-line: #6576ff;
  --zwc-cyan: #00cccc;
  --zwc-neon: #00ffa2;
  --zwc-blue-body: #d7dcff;
  --zwc-lav: #eaecf9;
  --zwc-lav-border: #e3e8f1;
  --zwc-ink: #333333;
  --zwc-ink-2: #010101;
  --zwc-ink-3: #070707;
  --zwc-dark-card: #1e1e1e;
  --zwc-dark-border: #262626;
  --zwc-dark-lead: #e6e6e6;
  --zwc-dark-desc: #a2a2a2;
  --zwc-cta-desc: #c2c2c2;
  --zwc-chip-border: #ededed;
  --zwc-card-border: #e4e4e4;
  --zwc-card-border-2: #e3e3e3;
  --zwc-mock-stack: #f1f1f1;
  --zwc-mock-stack-border: #c0c0c0;
  --zwc-term: #be3d01;
  --zwc-neg-bg: #ffeded;
  --zwc-neg-border: #e9b0b0;
  --zwc-pos-bg: #f4fff1;
  --zwc-pos-border: #9fbf95;
  --zwc-shadow-card: 0 30px 40px 0 rgba(104, 112, 139, 0.15);
  --zwc-shadow-pill: 0 10px 30px 0 rgba(132, 154, 206, 0.25);
  --zwc-shadow-round: 0 5px 9px 0 rgba(39, 55, 112, 0.23);
}

.pagewrapper {
  --h1-font-1: 72px;
  --h2-font-1: 56px;
  --h3-font-1: 42px;
  --h4-font-1: 32px;
  --stat-font-1: 64px;
  --t24: 24px;
  --t20: 20px;
  --t18: 18px;
  --t14: 14px;
  max-width: 1920px;
  margin: 0 auto;
}

.zwc-btn, .zwc-p-btn {
  font-size: 17px;
  padding: 12px 30px;
}

.zwc-bnr-head .zwc-p-btn{
  color: #0A55EB;
  border-color: #0A55EB;
}

.zw-product-header {
    background: #00aeff80;
}

/* Shared base */
.pagewrapper h1,
.pagewrapper h2,
.pagewrapper h3,
.pagewrapper h4 {
  font-family: var(--zf-primary-medium), sans-serif;
  margin: 0;
}

.pagewrapper h1 {
  font-size: var(--h1-font-1);
  line-height: 1.11;
  letter-spacing: -2.88px;
}

.pagewrapper h2 {
  font-size: var(--h2-font-1);
  line-height: 1.14;
  letter-spacing: -1.68px;
}

.pagewrapper p {
  font-family: var(--primaryfont-regular), sans-serif;
  margin: 0;
}

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

.zwc-inner {
  width: 100%;
  margin: 0 auto;
}

.zwc-act-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.pagewrapper button {
  font-family: var(--primaryfont-regular), sans-serif;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.pagewrapper button:focus-visible,
.pagewrapper a:focus-visible {
  outline: 2px solid var(--zwc-blue);
  outline-offset: 3px;
}

/* Shared task pill — used by Reason and Layers */
.zwc-reason-tasks ul li,
.zwc-layers-panel ul li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 66px;
  padding: 11px 20px 11px 61px;
  border: 1px solid var(--zwc-chip-border);
  border-radius: 33px;
  background-color: #fff;
  font-family: var(--primaryfont-regular), sans-serif;
  font-size: var(--t20);
  line-height: 1.4;
  color: var(--zwc-ink);
}

/* Shared sprite declaration. Cells are used at their natural size so the
   sprite is never scaled — each rule below only sets background-position.
   The sprite already includes each icon's circular backplate. */
.zwc-btn::after,
.zwc-p-btn::after,
.zwc-bnr-alerts li::before,
.zwc-legacy-cards li::before,
.zwc-stats span::before,
.zwc-reason-tasks ul li::before,
.zwc-bridge-col ul li::before,
.zwc-bridge-mid::before,
.zwc-bridge-mid::after,
.zwc-bridge-bot::before,
.zwc-layers-nav button[aria-selected="true"]::after,
.zwc-layers-panel ul li::before,
.zwc-core-cards li::before {
  content: "";
  background: var(--sprite) no-repeat;
}

/* CTA arrow. The white chevron suits the red primary and the dark section's
   outline button; the banner's outline button is blue, so it takes the blue
   cell. Hung off the page's own button classes, not .act-btn. */
.zwc-btn::after,
.zwc-p-btn::after {
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-left: 20px;
  vertical-align: 0px;
  background-position: -464px -127px;
}

.zwc-bnr-head .zwc-p-btn::after {
  background-position: -479px -127px;
}

.zwc-reason-tasks ul li::before,
.zwc-layers-panel ul li::before {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
}

/* Banner */
.zwc-banner {
  background-color: #fff;
  background: linear-gradient(180deg, rgba(0, 174, 255, 0.5) 0%, #ffffff 200px);
  padding-top: 80px;
}

.zwc-banner .zwc-inner {
  width: 89.375%;
}

.zwc-bnr-head {
  width: 77.53%;
  margin: 0 auto;
  text-align: center;
}

.zwc-bnr-head h1{
  max-width: 700px;
  margin: 0 auto;
}

.zwc-bnr-head p {
  font-size: var(--t24);
  line-height: 1.34;
  letter-spacing: -0.48px;
  margin-top: 16px;
}

.zwc-bnr-head .zwc-act-btn {
  margin-top: 40px;
}

.zwc-bnr-visual {
  position: relative;
  width: 80.77%;
  margin: 26px auto 0;
  padding-bottom: 20px;
}

/* The export is cropped tight left/right/bottom, with ~8.9% of its height as
   blur padding above the window face — the offsets below account for it. */
.zwc-bnr-visual picture img {
  display: block;
  height: auto;
}

.zwc-bnr-alerts {
  position: absolute;
  right: 0;
  top: 13px;
  width: 100%;
  max-width: 320px;
display:none;
}

.zwc-bnr-alerts li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 77px;
  padding: 12px 24px 12px 73px;
  border: 1px solid var(--zwc-card-border);
  border-radius: 49.5px;
  background-color: #fff;
  box-shadow: var(--zwc-shadow-pill);
  font-family: var(--zf-primary-regularslab), serif;
  font-size: var(--t18);
  line-height: 1.5;
  letter-spacing: -0.36px;
  color: var(--zwc-term);
}

.zwc-bnr-alerts li+li {
  margin-top: 8px;
}

.zwc-bnr-alerts li::before {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  background-position: -4px -4px;
}

/* End Banner */

/* Legacy */
.zwc-legacy {
  background-color: #000;
  padding: 120px 0;
}

.zwc-legacy-head {
  width: 68.2%;
  margin: 0 auto 40px;
  text-align: center;
}

.zwc-legacy-head h2 {
  color: #fff;
}

.zwc-legacy-head p {
  margin-top: 12px;
  font-size: var(--t20);
  line-height: 1.4;
  color: var(--zwc-dark-lead);
}

.zwc-legacy-cards {
  gap: 8px;
  justify-content: center;
}

.zwc-legacy-cards li {
  width: calc((100% - 16px) / 3);
  padding: 38px 40px 46px 36px;
  border: 1px solid var(--zwc-dark-border);
  border-radius: 16px;
  background-color: var(--zwc-dark-card);
}

.zwc-legacy-cards li::before,
.zwc-core-cards li::before {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
}

.zwc-legacy-cards .zwc-icon-1::before {
  background-position: -56px -4px;
}

.zwc-legacy-cards .zwc-icon-2::before {
  background-position: -132px -5px;
}

.zwc-legacy-cards .zwc-icon-3::before {
  background-position: -208px -6px;
}

.zwc-legacy-cards .zwc-icon-4::before {
  background-position: -284px -4px;
}

.zwc-legacy-cards .zwc-icon-5::before {
  background-position: -360px -4px;
}

.zwc-legacy-cards h3 {
  font-size: var(--h4-font-1);
  line-height: 1;
  letter-spacing: -0.96px;
  color: #fff;
}

.zwc-legacy-cards p {
  margin-top: 12px;
  font-size: var(--t18);
  line-height: 1.56;
  color: var(--zwc-dark-desc);
}

/* End Legacy */

/* Reason */
.zwc-reason {
  background-color: #fff;
  padding: 120px 0;
}

.zwc-reason .zwc-inner {
  justify-content: space-between;
  align-items: flex-start;
}

.zwc-reason-head {
  width: 31.8%;
}

.zwc-reason-head h2 {
  color: var(--zwc-ink-2);
}

.zwc-reason-head p {
  margin-top: 18px;
  font-size: var(--t20);
  line-height: 1.4;
  color: var(--zwc-ink);
}

.zwc-reason-body {
  width: 62.2%;
}

.zwc-stats {
  justify-content: space-between;
  gap: 30px;
  display: none;
}

.zwc-stats li {
  width: calc((100% - 60px) / 3);
}

.zwc-stats strong {
  display: block;
  font-family: var(--primaryfont-regular), sans-serif;
  font-size: var(--stat-font-1);
  line-height: 1;
  letter-spacing: -1.28px;
  text-align: center;
  font-weight: normal;
}

.zwc-stats span {
  position: relative;
  display: block;
  margin-top: 20px;
  padding-left: 42px;
  font-size: var(--t18);
  line-height: 1.56;
  letter-spacing: -0.36px;
}

.zwc-stats span::before {
  position: absolute;
  left: 0;
  top: 5px;
  width: 35px;
  height: 19px;
  background-position: -493px -125px;
}

.zwc-reason-tasks {
  margin: 0 0 55px;
}

.zwc-reason-tasks>p {
  margin-bottom: 34px;
  font-family: var(--zf-primary-medium), sans-serif;
  font-size: var(--t20);
  line-height: 1.4;
  letter-spacing: -0.2px;
  color: var(--zwc-ink);
}

.zwc-reason-tasks ul {
  gap: 10px;
}

.zwc-reason-tasks .zwc-icon-1::before {
  background-position: -436px -20px;
}

.zwc-reason-tasks .zwc-icon-2::before {
  background-position: -484px -20px;
}

.zwc-reason-tasks .zwc-icon-3::before {
  background-position: -532px -20px;
}

.zwc-reason-tasks .zwc-icon-4::before {
  background-position: -580px -20px;
}

.zwc-reason-tasks .zwc-icon-5::before {
  background-position: -628px -20px;
}

.zwc-reason-tasks .zwc-icon-6::before {
  background-position: -676px -20px;
}

.zwc-reason-tasks .zwc-icon-7::before {
  background-position: -724px -20px;
}

/* End Reason */

/* Bridge */
.zwc-bridge {
  background-color: var(--zwc-blue);
  padding: 120px 0 20px;
}

.zwc-bridge .zwc-inner {
  width: 75.47%;
}

.zwc-bridge-head {
  width: 87.6%;
  margin: 0 auto 50px;
  text-align: center;
}

.zwc-bridge-head h2 {
  color: #fff;
  max-width: 700px;
  margin: 0 auto;
}

.zwc-bridge-head p {
  margin-top: 20px;
  font-size: var(--t20);
  line-height: 1.4;
  color: #d8ddff;
}

.zwc-bridge-flow {
  justify-content: space-between;
  align-items: center;
}

.zwc-bridge-col {
  width: 33.75%;
  text-align: center;
}

.zwc-bridge-col>p {
  display: inline-flex;
  align-items: center;
  margin-bottom: 25px;
  padding: 8px 16px;
  border: 2px solid var(--zwc-cyan);
  border-radius: 25px;
  background-color: var(--zwc-blue-dark);
  font-family: var(--primaryfont-semibold), sans-serif;
  font-size: var(--t14);
  line-height: 1.43;
  letter-spacing: -0.28px;
  text-transform: uppercase;
  color: var(--zwc-neon);
}

.zwc-bridge-col ul li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 75px;
  padding: 12px 20px 12px 60px;
  border: 1px solid var(--zwc-blue-line);
  border-radius: 10px;
  background-color: var(--zwc-blue-dark);
  font-size: var(--t18);
  line-height: 1.56;
  text-align: left;
  color: var(--zwc-blue-body);
}

.zwc-bridge-col ul li+li {
  margin-top: 6px;
}

.zwc-bridge-col ul li::before {
  position: absolute;
  left: 29px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background-position: -803px -33px;
}

.zwc-bridge-modern ul li::before {
  background-position: -775px -33px;
}

.zwc-bridge-mid {
  position: relative;
  width: 24.6%;
  height: 178px;
}

.zwc-bridge-mid::before,
.zwc-bridge-mid::after {
  position: absolute;
  top: 65%;
  width: 49px;
  height: 12px;
  margin-top: -6px;
  background-position: -535px -128px;
}

.zwc-bridge-mid::before {
  left: 0;
}

/* The sprite holds one arrow, pointing left — mirror it for the right side. */
.zwc-bridge-mid::after {
  right: 0;
  transform: scaleX(-1);
}

.zwc-bridge-bot {
  position: absolute;
  right: 49px;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 144px;
  height: 130px;
  border: 2px solid var(--zwc-cyan);
  border-radius: 10px;
  background-color: var(--zwc-blue-dark);
}

.zwc-bridge-bot::before {
  position: absolute;
  left: 50%;
  bottom: 51px;
  width: 88px;
  height: 118px;
  transform: translateX(-50%);
  background-position: -7px -88px;
}

.zwc-bridge-bot p {
  position: relative;
  margin-bottom: 18px;
  font-family: var(--primaryfont-semibold), sans-serif;
  font-size: var(--t14);
  line-height: 1.43;
  letter-spacing: -0.28px;
  text-transform: uppercase;
  color: var(--zwc-neon);
}

/* End Bridge */

/* Layers */
.zwc-layers {
  background-color: var(--zwc-blue);
  padding: 120px 0 160px;
}

.zwc-layers .zwc-inner {
  width: 95.625%;
  justify-content: space-between;
  align-items: center;
}

.zwc-layers-nav {
  width: 31.9%;
}

.zwc-layers-nav li+li {
  margin-top: 36px;
}

.zwc-layers-nav button {
  font-family: var(--zf-primary-medium), sans-serif;
  font-size: var(--t20);
  line-height: 1.4;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
}

.zwc-layers-nav li:first-child {
  margin-top: 0;
}

.zwc-layers-nav button[aria-selected="true"] {
  position: relative;
  display: block;
  width: 100%;
  padding: 21px 32px 21px 19px;
  border-radius: 8px;
  background-color: var(--zwc-blue-darker);
  text-align: left;
}

.zwc-layers-nav button[aria-selected="true"]::after {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 7px;
  height: 12px;
  margin-top: -6px;
  background-position: -464px -127px;
}

/* script.js pins this to the tallest panel, so the box never resizes between
   tabs and the panels can share it. Driven through a custom property rather
   than an inline height so the stacked branch below can override it. */
.zwc-layers-panels {
  position: relative;
  width: 57.8%;
  height: var(--zwc-panel-h, auto);
}

/* Measurement pass: panels go back into normal flow so their natural heights
   can be read, since stacked they just inherit the box's height. */
.zwc-layers-panels.zwc-is-measuring {
  height: auto;
}

.zwc-layers-panels.zwc-is-measuring .zwc-layers-panel {
  position: static;
  min-height: 0;
}

.zwc-layers-panels::before,
.zwc-layers-panels::after {
  content: "";
  position: absolute;
  bottom: 0;
  border: 1px solid var(--zwc-mock-stack-border);
  border-radius: 24px;
  background-color: var(--zwc-mock-stack);
  box-shadow: var(--zwc-shadow-card);
}

.zwc-layers-panels::before {
  left: 12.1%;
  width: 75.8%;
  height: 148px;
  margin-bottom: -64px;
}

.zwc-layers-panels::after {
  left: 5.4%;
  width: 89.3%;
  height: 120px;
  margin-bottom: -31px;
}

.zwc-layers-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  min-height: 100%;
  padding: 74px 8.5%;
  border: 1px solid var(--zwc-mock-stack-border);
  border-radius: 24px;
  background-color: #fff;
  box-shadow: var(--zwc-shadow-card);
}

.zwc-layers-panel h3 {
  font-size: var(--h4-font-1);
  line-height: 1.5;
  letter-spacing: -1.28px;
}

.zwc-layers-panel p:first-of-type {
  margin-top: 10px;
  font-size: var(--t20);
  line-height: 1.6;
  letter-spacing: -0.4px;
}

.zwc-layers-panel p:last-of-type {
  margin-top: 24px;
  font-size: var(--t20);
  line-height: 1.6;
  letter-spacing: -0.4px;
}

.zwc-layers-panel ul {
  gap: 10px;
  margin-top: 16px;
}

/* Sized by content, not two-up, so a long label claims its own row rather
   than wrapping to a second line. */
.zwc-layers-panel ul li {
  max-width: 100%;
}

.zwc-layers-panel ul li::before {
  background-position: -108px -104px;
}

/* Panel swap. The design draws two cards stacked behind the panel, so the
   incoming panel lifts out of that deck while the two cards settle back
   down. Classes are added by script.js and removed when the run ends. */
/* The incoming card slides up into place and reaches full opacity early (38% of
   the run), so it *covers* the outgoing one instead of blending with it — a
   cross-fade in a fixed box just reads as a blink. The travel is what sells the
   swap, so it is a distance the eye can follow rather than a few pixels. */
.zwc-layers-panel.zwc-is-in {
  z-index: 3;
  animation: zwc-panel-in 0.45s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

/* The outgoing card is pulled off the top of the deck and is gone quickly,
   before the incoming one has finished arriving. */
.zwc-layers-panel.zwc-is-out {
  z-index: 2;
  pointer-events: none;
  animation: zwc-panel-out 0.26s cubic-bezier(0.3, 0, 0.7, 1) both;
}

.zwc-layers-panels.zwc-is-swapping::before {
  animation: zwc-deck-back 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.zwc-layers-panels.zwc-is-swapping::after {
  animation: zwc-deck-front 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

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

  38% {
    opacity: 1;
  }

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

@keyframes zwc-panel-out {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: translateY(-38px) scale(0.99);
  }
}

@keyframes zwc-deck-back {
  from {
    transform: translateY(-22px) scaleX(1.04);
  }

  to {
    transform: none;
  }
}

@keyframes zwc-deck-front {
  from {
    transform: translateY(-12px) scaleX(1.02);
  }

  to {
    transform: none;
  }
}

/* End Layers */

/* Cases */
.zwc-cases {
  background-color: var(--zwc-lav);
  padding: 96px 0 20px;
}

.zwc-cases .zwc-inner {
  width: 68.44%;
}

.zwc-cases h2 {
  margin-bottom: 32px;
  text-align: center;
  color: var(--zwc-ink-2);
}

.zwc-cases h2 span{
  display: inline-block;
}

.zwc-cases-nav {
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}

.zwc-cases-nav button {
  padding: 15px 25px;
  border: 1px solid var(--zwc-lav-border);
  border-radius: 90px;
  background-color: #fff;
  font-size: var(--t20);
  line-height: 1.6;
  letter-spacing: -0.4px;
  text-align: center;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.zwc-cases-nav button[aria-selected="true"] {
  border-color: var(--zwc-ink-3);
  background-color: var(--zwc-ink-3);
  color: #fff;
}

.zwc-cases-intro {
  width: 87.9%;
  margin: 0 auto 30px;
  text-align: center;
}

.zwc-cases-intro h3 {
  font-size: var(--h3-font-1);
  line-height: 1.15;
  letter-spacing: -1.68px;
}

.zwc-cases-intro p {
  margin-top: 10px;
  font-size: var(--t18);
  line-height: 1.78;
  letter-spacing: -0.36px;
}

.zwc-cases-compare {
  justify-content: space-between;
  align-items: stretch;
}

.zwc-cases-before,
.zwc-cases-after {
  border: 1px solid var(--zwc-card-border-2);
  border-radius: 12px;
  background-color: #fff;
}

.zwc-cases-before {
  width: 45.7%;
  padding: 0 40px 26px;
}

.zwc-cases-after {
  position: relative;
  width: 49.1%;
  padding: 0 29px 26px;
}

.zwc-cases-after::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  width: 45px;
  height: 45px;
  margin: -22px 0 0 -45px;
  border-radius: 50%;
  background-color: var(--zwc-blue);
  background: var(--zwc-blue) url("/sites/zweb/images/rpa/usecases/icon-arrow-right-rpa.svg") center no-repeat;
  background-size: 24px 24px;
  box-shadow: var(--zwc-shadow-round);
}

.zwc-cases-before h4,
.zwc-cases-after h4 {
  position: relative;
  margin: 0 -40px 26px;
  padding: 26px 40px 26px 62px;
  border-bottom: 1px solid var(--zwc-neg-border);
  border-radius: 12px 12px 0 0;
  background-color: var(--zwc-neg-bg);
  font-size: var(--t20);
  line-height: 1.6;
  letter-spacing: -0.4px;
}

.zwc-cases-after h4 {
  margin: 0 -29px 26px;
  padding: 26px 29px 26px 51px;
  border-bottom-color: var(--zwc-pos-border);
  background-color: var(--zwc-pos-bg);
}

.zwc-cases-before h4::before,
.zwc-cases-after h4::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background-color: #E64444;
  border-radius: 100%;
}

.zwc-cases-after h4::before {
  left: 29px;
  background-color: #397B27;
}

.zwc-cases-before>p,
.zwc-cases-after>p {
  font-size: var(--t18);
  line-height: 1.78;
  letter-spacing: -0.36px;
}

.zwc-cases-before>p:last-child,
.zwc-cases-after>p:last-child{
  margin-top: 15px;
}

.zwc-cases-before ul {
  margin-top: 12px;
  padding-left: 16px;
}

.zwc-cases-before ul li {
  position: relative;
  padding-left: 24px;
  font-family: var(--primaryfont-regular), sans-serif;
  font-size: var(--t18);
  line-height: 1.78;
  letter-spacing: -0.36px;
}

.zwc-cases-before ul li+li {
  margin-top: 8px;
}

.zwc-cases-before ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 12px;
  background-color: #E64444;
  border-radius: 100%;
}

/* End Cases */

/* Core */
.zwc-core {
  background-color: var(--zwc-lav);
  padding: 100px 0;
}

.zwc-core-head {
  margin: 0 auto 40px;
  text-align: center;
  max-width: 720px;
}

.zwc-core-cards {
  gap: 8px;
}

.zwc-core-cards li {
  width: calc((100% - 8px) / 2);
  padding: 47px 8% 44px 46px;
  border: 1px solid var(--zwc-card-border);
  border-radius: 16px;
  background-color: #fff;
}

.zwc-core-cards .zwc-icon-1::before {
  background-position: -156px -92px;
}

.zwc-core-cards .zwc-icon-2::before {
  background-position: -232px -94px;
}

.zwc-core-cards .zwc-icon-3::before {
  background-position: -308px -96px;
}

.zwc-core-cards .zwc-icon-4::before {
  background-position: -384px -96px;
}

.zwc-core-cards h3 {
  font-size: var(--h4-font-1);
  line-height: 1;
  letter-spacing: -0.96px;
}

.zwc-core-cards p {
  margin-top: 12px;
  font-size: var(--t18);
  line-height: 1.56;
  color: var(--zwc-ink);
}

/* End Core */

/* Bottom CTA */
.zwc-cta {
  background-color: #000;
  padding: 114px 0;
  text-align: center;
}

.zwc-cta .zwc-inner {
  width: 80.56%;
}

.zwc-cta h2 {
  font-size: var(--h1-font-1);
  line-height: 1.11;
  letter-spacing: -2.88px;
  color: #fff;
}

.zwc-cta-head p {
  width: 83.6%;
  margin: 15px auto 0;
  font-size: var(--t20);
  line-height: 1.6;
  letter-spacing: -0.4px;
  color: var(--zwc-cta-desc);
}

.zwc-cta .zwc-act-btn {
  margin-top: 40px;
}

/* Framework override: the outline button needs the dark-background variant. */
.zwc-cta .zwc-act-btn .act-btn:not(.cta-btn) {
  border-color: #fff;
  color: #fff;
}

/* End Bottom CTA */

/* FAQ */
.zwc-faq {
  background-color: var(--zwc-lav);
  padding: 112px 0;
}

.zwc-faq h2 span{
  display: block;
}

.zwc-faq .zwc-inner {
  width: 67.19%;
}

.zwc-faq-heading {
  width: 100%;
  margin-bottom: 32px;
  text-align: center;
}

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

.zwc-faq-item+.zwc-faq-item {
  margin-top: 8px;
}

.zwc-faq-item h3 {
  position: relative;
  font-size: var(--t20);
  line-height: 1.5;
}

.zwc-faq-item h3 button {
  display: block;
  width: 100%;
  padding: 26px 78px 26px 32px;
  border-radius: 8px;
  background-color: #fff;
  font-family: var(--zf-primary-medium), sans-serif;
  font-size: var(--t20);
  line-height: 1.5;
  letter-spacing: -0.4px;
  text-align: left;
}

.zwc-faq-item.active h3 button {
  border-radius: 8px 8px 0 0;
}

/* The toggle. It sits outside the button so the row stays one clickable
   target, and passes pointer events through to the button beneath it. */
.zwc-faq-item h3>span {
  position: absolute;
  right: 25px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  background-color: #D9D9D9;
  border-radius: 100%;
  pointer-events: none;
}

.zwc-faq-item h3>span::before,
.zwc-faq-item h3>span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #000;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.zwc-faq-item h3>span::before {
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
}

.zwc-faq-item h3>span::after {
  width: 2px;
  height: 12px;
  margin: -6px 0 0 -1px;
}

.zwc-faq-item.active h3>span::after {
  opacity: 0;
  transform: rotate(90deg);
}

/* The slide animates this element's height, so its padding lives on the
   paragraph instead — that keeps scrollHeight equal to the full open height
   and stops the padding showing while collapsed. */
.zwc-faq-item .zwc-faq-ans {
  overflow: hidden;
  height: 0;
  border-radius: 0 0 8px 8px;
  background-color: #fff;
  transition: height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.zwc-faq-item .zwc-faq-ans p {
  padding: 0 32px 26px;
  font-size: var(--t18);
  line-height: 1.78;
  letter-spacing: -0.36px;
  color: var(--zwc-ink);
}

/* End FAQ */

@media (max-width: 1440px) {
  .pagewrapper {
    --h1-font-1: 60px;
    --h2-font-1: 48px;
    --h3-font-1: 36px;
    --h4-font-1: 28px;
    --stat-font-1: 54px;
    --t24: 21px;
    --t20: 18px;
    --t18: 17px;
  }

  /* Legacy */
  .zwc-legacy-cards li {
    padding: 32px 30px 38px;
  }

  /* End Legacy */

  /* Bridge */
  .zwc-bridge-col ul li {
    padding: 12px 16px 12px 54px;
  }

  .zwc-bridge-col ul li::before {
    left: 20px;
  }

  /* End Bridge */

  /* Layers */
  .zwc-layers-panel {
    padding: 56px 7%;
  }

  /* End Layers */

  /* Core */
  .zwc-core-cards li {
    padding: 38px 6% 38px 38px;
  }

  /* End Core */
}

@media (max-width: 1280px) {
  .pagewrapper {
    --h1-font-1: 54px;
    --h2-font-1: 42px;
    --h3-font-1: 33px;
    --h4-font-1: 26px;
    --stat-font-1: 48px;
  }

  /* Banner */
  .zwc-banner .zwc-inner,
  .zwc-bridge .zwc-inner,
  .zwc-layers .zwc-inner,
  .zwc-cases .zwc-inner,
  .zwc-cta .zwc-inner,
  .zwc-faq .zwc-inner {
    width: 100%;
  }

  /* End Banner */

  /* Reason */
  .zwc-stats li {
    width: calc((100% - 40px) / 3);
  }

  .zwc-stats {
    gap: 20px;
  }

  /* End Reason */

  /* Layers */
  .zwc-layers-panel ul li {
    padding: 11px 16px 11px 58px;
  }

  /* End Layers */
}

@media (max-width: 1199px) {
  .pagewrapper {
    --h1-font-1: 48px;
    --h2-font-1: 38px;
    --h3-font-1: 30px;
    --h4-font-1: 24px;
    --stat-font-1: 44px;
    --t20: 17px;
  }

  /* Banner */
  .zwc-bnr-head {
    width: 90%;
  }

  .zwc-bnr-alerts li{
    min-height: 65px;
  }

  /* End Banner */

  /* Legacy */
  .zwc-legacy-head {
    width: 100%;
  }

  .zwc-legacy-cards li {
    width: calc((100% - 8px) / 2);
  }

  /* End Legacy */

  /* Bridge */
  .zwc-bridge-head {
    width: 100%;
  }

  /* .zwc-bridge-mid::before,
  .zwc-bridge-mid::after {
    display: none;
  } */

  .zwc-bridge-bot {
    right: auto;
    left: 50%;
    margin-left: -72px;
  }

  /* End Bridge */

  /* Cases */
  .zwc-cases-intro {
    width: 100%;
  }

  /* End Cases */

  /* Core */
  .zwc-core-head {
    width: 100%;
  }

  /* End Core */
}

@media (max-width: 991px) {
  .pagewrapper {
    --h1-font-1: 42px;
    --h2-font-1: 36px;
    --h3-font-1: 30px;
    --h4-font-1: 23px;
    --stat-font-1: 38px;
    --t24: 18px;
    --t18: 16px;
  }

  /* Banner */
  .zwc-banner {
    padding-top: 60px;
  }

  /* End Banner */

  /* Legacy */
  .zwc-legacy {
    padding: 80px 0;
  }

  /* End Legacy */

  /* Reason */
  .zwc-reason {
    padding: 80px 0;
  }

  .zwc-reason-head,
  .zwc-reason-body {
    width: 100%;
  }

  .zwc-reason-body {
    margin-top: 40px;
  }

  .zwc-reason-tasks {
    margin: 0 0 40px;
  }

  .zwc-reason-tasks>p {
    margin-bottom: 20px;
  }

  /* End Reason */

  /* Bridge */
  .zwc-bridge {
    padding: 80px 0 20px;
  }

  .zwc-bridge-flow {
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
  }

  .zwc-bridge-col {
    width: 100%;
  }

  .zwc-bridge-mid {
    width: 100%;
    margin: 30px 0;
  }

  .zwc-bridge-modern {
    margin-top: 30px;
  }

  /* End Bridge */

  /* Layers — every panel is shown stacked from here down, so the tab list and
     the card-deck backdrop are dropped and the swap animation is switched off.
     script.js reveals the panels and clears any leftover container height. */
  .zwc-layers {
    padding: 80px 0 120px;
  }

  .zwc-layers-nav {
    display: none;
  }

  .zwc-layers-panels {
    width: 100%;
    height: auto;
  }

  .zwc-layers-panel {
    position: static;
    min-height: 0;
  }

  .zwc-layers-panels::before,
  .zwc-layers-panels::after {
    display: none;
  }

  .zwc-layers-panel {
    padding: 40px 30px;
  }

  .zwc-layers-panel+.zwc-layers-panel {
    margin-top: 16px;
  }

  .zwc-layers-panel ul li {
    width: 100%;
    max-width: 380px;
  }

  /* End Layers */

  /* Cases */
  .zwc-cases {
    padding: 80px 0 20px;
  }

  .zwc-cases-nav button {
    min-height: 58px;
    padding: 14px 26px;
  }

  .zwc-cases-before,
  .zwc-cases-after {
    width: 100%;
  }

  .zwc-cases-after {
    margin-top: 40px;
  }

  .zwc-cases-after::before {
    display: none;
  }

  /* End Cases */

  /* Core */
  .zwc-core {
    padding: 80px 0;
  }

  .zwc-core-cards li {
    width: 100%;
  }

  /* End Core */

  /* Bottom CTA */
  .zwc-cta {
    padding: 80px 0;
  }

  .zwc-cta-head p {
    width: 100%;
  }

  /* End Bottom CTA */

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

  /* End FAQ */
}

@media (max-width: 767px) {
  .pagewrapper {
    --stat-font-1: 32px;
    --t20: 16px;
    --t14: 13px;
  }

  .pagewrapper h1,
  .pagewrapper h2,
  .pagewrapper h3,
  .pagewrapper h4,
  .pagewrapper p,
  .pagewrapper li,
  .pagewrapper button,
  .pagewrapper strong,
  .pagewrapper span {
    letter-spacing: normal;
    line-height: normal;
  }

  /* Banner */
  .zwc-banner {
    padding-top: 40px;
  }

  .zwc-bnr-visual {
    margin-top: 30px;
  }

  .zwc-bnr-head{
    width: 100%;
  }

  .zwc-bnr-alerts li {
    min-height: 62px;
    padding: 10px 18px 10px 70px;
  }

  .zwc-bnr-alerts li::before {
    left: 10px;
  }

  .zwc-bnr-alerts {
    position: static;
    margin: 30px auto 0;
  }

  .zwc-bnr-visual picture img {
    margin: 0 auto;
  }

  /* End Banner */

  /* Legacy */
  .zwc-legacy {
    padding: 60px 0;
  }

  .zwc-legacy-cards li {
    width: 100%;
    padding: 26px 22px 30px;
  }

  .zwc-legacy-cards li::before,
  .zwc-core-cards li::before {
    margin-bottom: 14px;
  }

  /* End Legacy */

  /* Reason */
  .zwc-reason {
    padding: 60px 0;
  }

  .zwc-stats li {
    width: 100%;
  }

  .zwc-stats strong {
    text-align: left;
  }

  .zwc-stats span {
    margin-top: 10px;
  }

  .zwc-reason-tasks ul li,
  .zwc-layers-panel ul li {
    width: 100%;
    padding: 10px 18px 10px 58px;
  }

  .zwc-reason-tasks ul li::before,
  .zwc-layers-panel ul li::before {
    left: 8px;
  }

  /* End Reason */

  /* Bridge */
  .zwc-bridge {
    padding: 60px 0 20px;
  }

  /* End Bridge */

  /* Layers */
  .zwc-layers {
    padding: 60px 0 100px;
  }

  .zwc-layers-panel {
    padding: 30px 22px;
  }

  /* End Layers */

  /* Cases — every panel is shown stacked from here down, so the tab list is
     dropped. Each panel keeps its own h3, and script.js clears the hidden
     attribute from the panels it was holding back. */
  .zwc-cases {
    padding: 60px 0 20px;
  }

  .zwc-cases-nav {
    display: none;
  }

  /* Comfortably more than the 40px between the two cards inside a panel, so a
     panel boundary reads as a bigger break than an internal one. */
  .zwc-cases-panel+.zwc-cases-panel {
    margin-top: 68px;
  }

  .zwc-cases-before {
    padding: 0 22px 22px;
  }

  .zwc-cases-after {
    padding: 0 22px 22px;
  }

  .zwc-cases-before h4,
  .zwc-cases-after h4 {
    margin: 0 -22px 20px;
    padding: 20px 22px 20px 44px;
  }

  .zwc-cases-before h4::before,
  .zwc-cases-after h4::before {
    left: 22px;
  }

  .zwc-cases-before ul {
    padding-left: 0;
  }

  /* End Cases */

  /* Core */
  .zwc-core {
    padding: 60px 0;
  }

  .zwc-core-cards li {
    padding: 30px 22px;
  }

  /* End Core */

  /* Bottom CTA */
  .zwc-cta {
    padding: 60px 0;
  }

  /* End Bottom CTA */

  /* FAQ */
  .zwc-faq {
    padding: 60px 0;
  }

  .zwc-faq-item h3 button {
    padding: 20px 56px 20px 22px;
  }

  .zwc-faq-item h3>span {
    right: 15px;
  }

  .zwc-faq-item .zwc-faq-ans p {
    padding: 0 22px 20px;
  }

  /* End FAQ */
}

@media (max-width: 480px) {
  .pagewrapper {
    --h1-font-1: 34px;
    --h2-font-1: 30px;
    --h3-font-1: 24px;
    --h4-font-1: 21px;
    --stat-font-1: 28px;
  }

  .zwc-bnr-head,
  .zwc-legacy-head,
  .zwc-bridge-head,
  .zwc-cases h2,
  .zwc-cases-intro,
  .zwc-core-head h2,
  .zwc-cta,
  .zwc-faq-heading {
    text-align: left;
  }

  /* Banner */
  .zwc-bnr-head .zwc-act-btn,
  .zwc-cta .zwc-act-btn {
    justify-content: flex-start;
  }

  .zwc-bnr-visual{
    width: 100%;
  }

  /* End Banner */
}

@media (prefers-reduced-motion: reduce) {

  /* Layers */
  .zwc-layers-panel.zwc-is-in,
  .zwc-layers-panel.zwc-is-out,
  .zwc-layers-panels.zwc-is-swapping::before,
  .zwc-layers-panels.zwc-is-swapping::after {
    animation: none;
  }

  /* End Layers */

  /* FAQ */
  .zwc-faq-item .zwc-faq-ans {
    transition: none;
  }

  /* End FAQ */
}