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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

.zw-template-inner {
  letter-spacing: -0.02em;

  /* Icon glyphs taken from the design, inlined so no image files are needed */
  --zwc-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M10.2929 0.292893C10.6834 -0.0976311 11.3164 -0.0976311 11.707 0.292893C12.0975 0.683418 12.0975 1.31643 11.707 1.70696L6.70696 6.70696C6.31643 7.09748 5.68342 7.09748 5.29289 6.70696L0.292893 1.70696C-0.0976311 1.31643 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31643 -0.0976311 1.70696 0.292893L5.99992 4.58586L10.2929 0.292893Z'/%3E%3C/svg%3E");
  --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-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(3.04 4.54)' d='M17.9136 1.35817L6.00864 14.9638L0 8.95518L1.45841 7.49677L5.90818 11.9465L16.3614 0L17.9136 1.35817Z'/%3E%3C/svg%3E");
  --zwc-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(2 2)' d='M18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10ZM20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10Z'/%3E%3Cpath transform='translate(8 9)' d='M6.29289 0.292893C6.68342 -0.0976311 7.31643 -0.0976311 7.70696 0.292893C8.09748 0.683418 8.09748 1.31643 7.70696 1.70696L3.70696 5.70696C3.31643 6.09748 2.68342 6.09748 2.29289 5.70696L0.292893 3.70696C-0.0976311 3.31643 -0.0976311 2.68342 0.292893 2.29289C0.683418 1.90237 1.31643 1.90237 1.70696 2.29289L2.99992 3.58586L6.29289 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-chevron-down-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='%23000' d='M10.2929 0.292893C10.6834 -0.0976311 11.3164 -0.0976311 11.707 0.292893C12.0975 0.683418 12.0975 1.31643 11.707 1.70696L6.70696 6.70696C6.31643 7.09748 5.68342 7.09748 5.29289 6.70696L0.292893 1.70696C-0.0976311 1.31643 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31643 -0.0976311 1.70696 0.292893L5.99992 4.58586L10.2929 0.292893Z'/%3E%3C/svg%3E");
  --zwc-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.146 0.146a0.5 0.5 0 0 1 0.708 0l3 3a0.5 0.5 0 0 1 0 0.708l-10 10a0.5 0.5 0 0 1-0.168 0.11l-5 2a0.5 0.5 0 0 1-0.65-0.65l2-5a0.5 0.5 0 0 1 0.11-0.168l10-10z'/%3E%3C/svg%3E");
  --zwc-download-circle-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23fff'/%3E%3Cpath fill='%23131313' d='M15 8.5h2v6.67l2.59-2.58L21 14l-5 5-5-5 1.41-1.41L15 15.17V8.5z'/%3E%3Cpath fill='%23131313' d='M10.5 20.5h11v2h-11z'/%3E%3C/svg%3E");

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

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

  h3 {
    line-height: 1.25;
  }
}

.cta-btn,
.cta-btn-sec {
  display: inline-block;
  font-family: var(--zf-primary-semibold), sans-serif;
  padding: 12px 32px;
  margin: 0;
  border: 1px solid transparent;
  cursor: pointer;
  z-index: 1;
  font-size: 15px;
  text-transform: uppercase;
  position: relative;
  text-align: center;
}

.cta-btn-sec {
  border: 1px solid #fff;
  color: #fff;
}

/* Shared icon shell — each rule below supplies its own --zwc-icon and colour */
.zwc-hero__actions .cta-btn::after,
.zwc-glance__toggle::before,
.zwc-glance__features li::before,
.zwc-calculator__edit::before,
.zwc-calculator__disclaimer .cta-btn::after,
.zwc-testimonials__arrow::before {
  content: "";
  flex-shrink: 0;
  -webkit-mask: var(--zwc-icon) no-repeat center / contain;
  mask: var(--zwc-icon) no-repeat center / contain;
}

/* ================= Hero banner ================= */
.zwc-hero {
  position: relative;
  margin: 0 24px;
  padding: 110px 0 110px 0;
  background: #150c20;
  border-radius: 44px;
  color: #fff;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -260px;
    width: 640px;
    height: 600px;
    border-radius: 50%;
    background: #643056;
    opacity: 0.55;
    filter: blur(130px);
  }

  .content-wrap {
    position: relative;
  }

  h1 {
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 36px;
    font-size: 42px;
  }
}

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

.zwc-hero__content {
  flex-basis: 50%;

  >p {
    max-width: 505px;
    line-height: 1.6;
    margin-bottom: 40px;
  }
}

.zwc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;

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

  .act-btn:not(.cta-btn) {
    background: transparent;
    border-color: #fff;
    color: #fff;
  }
}

/* Negative margins let the illustration overlap the text column and bleed
   past the banner edges; the border-radius clips the bottom glow */
.zwc-hero__media {
  flex-basis: 45%;
  position: relative;
  transform: translateY(21%);

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ================= Brand logos ================= */
.zwc-trust {
  text-align: center;

  p {
    font-family: var(--primaryfont-semibold);
    text-transform: uppercase;
    margin-bottom: 40px;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  img {
    display: block;
    width: 120px;
    max-width: 100%;
    height: auto;
  }
}

/* ================= Feature highlights ================= */
.zwc-features__grid {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.zwc-features__card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: #f5f5f5;
  border-radius: 16px;
flex-basis: 33%;
  h3 {
    line-height: 1.34;
    margin-bottom: 18px;
  }

  p {
    line-height: 1.625;
    margin-bottom: 32px;
  }
}

.zwc-features__media {
  display: block;
  margin-top: auto;
  width: 100%;
  height: auto;
}

/* ================= Plans at a glance ================= */
.zwc-glance {
  /* One duration and curve for every moving part of a card, so they stay in step */
  --zwc-glance-motion: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  h2 {
    margin-bottom: 56px;
  }
}

/* The card height is driven from script.js as an explicit pixel value. Leaving it
   to the layout makes it resolve to max(info column, feature list), so the card
   holds still until the list outgrows the info column and then lurches. */
.zwc-glance__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 60px;
  padding: 60px 130px 60px 80px;
  border-radius: 36px;
  background: linear-gradient(160deg, #4c0202 19.7%, #0b0447 98.8%);
  color: #fff;
  overflow: hidden;
  transition: height var(--zwc-glance-motion), padding var(--zwc-glance-motion);

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

  h3+p {
    font-family: var(--zf-primary-medium);
    line-height: 1.5;
    margin-top: 10px;
  }

  &.is-open {
    padding-top: 82px;
    padding-bottom: 82px;

    .zwc-glance__info {
      margin-top: 44px;
    }

    .zwc-glance__features {
      height: auto;
      visibility: visible;
      transition: height var(--zwc-glance-motion), margin var(--zwc-glance-motion), visibility 0s;
    }

    .zwc-glance__toggle::before {
      transform: rotateX(180deg);
    }
  }

  /* Held for the single frame in which script.js measures the target layout */
  &.is-measuring,
  &.is-measuring .zwc-glance__info,
  &.is-measuring .zwc-glance__features,
  &.is-measuring .zwc-glance__toggle::before {
    transition: none;
  }
}

.zwc-glance__info {
  flex: 0 0 40%;
  transition: margin-top var(--zwc-glance-motion);
}

.zwc-glance__toggle {
  position: absolute;
  top: 34px;
  right: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #581d6e;
  perspective: 300px;
  cursor: pointer;

  &::before {
    width: 15px;
    height: 9px;
    background: #fff;
    --zwc-icon: var(--zwc-chevron-down);
    transition: transform var(--zwc-glance-motion);
  }
}

/* flex-basis stays auto so the pixel height applies in the stacked layout too */
.zwc-glance__features {
  flex: 1 1 auto;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  visibility: hidden;
  /* the visibility delay matches --zwc-glance-motion so the list stays readable while it closes */
  transition: height var(--zwc-glance-motion), margin var(--zwc-glance-motion), visibility 0s linear 0.4s;

  li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-family: var(--zf-primary-medium);
    line-height: 1.55;

    +li {
      margin-top: 24px;
    }

    &::before {
      width: 24px;
      height: 24px;
      margin-top: 2px;
      background: #ffbf00;
      --zwc-icon: var(--zwc-check-circle);
    }
  }
}

/* ================= Plan calculator ================= */
.zwc-calculator {
  margin: 0 21px;
  background: #f5f5f5;
  border-radius: 14px;
}

.zwc-calculator__inner {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 36px;
}

/* Estimation view: download card and estimation card share a baseline.
   Kept flat — the file ships as native CSS, where &-- concatenation
   isn't valid nesting. */
.zwc-calculator__inner--result {
  align-items: flex-end;
}

.zwc-calculator__intro {
  flex: 1;
  max-width: 560px;

  h2 {
    font-family: var(--primaryfont-bold);
  }
}

.zwc-calculator__card {
  flex-shrink: 0;
  width: 580px;
  padding: 40px;
  background: #fff;
  border-radius: 20px;

  h3 {
    line-height: 1.35;
  }

  .cta-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    box-sizing: border-box;
    text-align: center;
  }
}

.zwc-calculator__form {
  h3 {
    margin-bottom: 30px;
  }

  &.is-hidden {
    display: none;
  }
}

.zwc-calculator__hint {
  margin-bottom: 24px;
  padding: 16px 24px;
  background: #e7e7e7;
  border: 1px solid #000;
  border-radius: 10px;
  font-family: var(--primaryfont-semibold);
  line-height: 1.5;
}

/* Monthly / annually switch */
.zwc-calculator__cycle {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 30px;
  padding: 6px;
  background: #f5f5f5;
  border-radius: 160px;
  --zwc-pill-inset: 6px;
}

.zwc-calculator__cycle-btn {
  position: relative;
  min-width: 110px;
  padding: 12px 20px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  font-family: var(--zf-primary-medium);
  letter-spacing: -0.01em;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.35s ease;

  &.is-active {
    color: #fff;
  }
}

.zwc-calculator__row {
  display: flex;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: 24px;
}

.zwc-calculator__row--disabled {
  opacity: 0.2;
  pointer-events: none;
}

.zwc-calculator__field {
  flex: 1;
  min-width: 0;
}

.zwc-calculator__select,
.zwc-calculator__users {
  box-sizing: border-box;
  width: 100%;
  height: 66px;
  padding: 0 24px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  font-family: var(--primaryfont-semibold);
  color: inherit;

  &.is-error {
    border-color: #e42527;
  }
}

/* A native <select> can't host a pseudo-element, so the chevron is a background */
.zwc-calculator__select {
  appearance: none;
  padding-right: 52px;
  background-image: var(--zwc-chevron-down-img);
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 12px 7px;
  cursor: pointer;
}

.zwc-calculator__users {
  flex: 0 0 174px;
  width: 174px;

  &::placeholder {
    color: #6d6d6d;
    opacity: 1;
  }
}

.zwc-calculator__error {
  display: none;
  margin-bottom: 16px;
  color: #e42527;
  font-family: var(--zf-primary-medium);
  line-height: 1.5;

  &.is-visible {
    display: block;
  }
}

/* Estimation result */
.zwc-calculator__result {
  &.is-hidden {
    display: none;
  }
}

.zwc-calculator__result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.zwc-calculator__edit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--primaryfont-semibold);
  color: #8e8e8e;
  cursor: pointer;

  &::before {
    width: 15px;
    height: 15px;
    background: #8e8e8e;
    --zwc-icon: var(--zwc-pencil);
  }
}

.zwc-calculator__table-wrap {
  overflow-x: auto;
}

.zwc-calculator__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: center;

  th,
  td {
    padding: 16px 10px;
    line-height: 1.5;
    white-space: nowrap;

    &:first-child {
      padding-left: 20px;
      text-align: left;
      white-space: normal;
    }

    /* The price cell carries the bundle qualifier, so let it wrap */
    &:nth-child(3) {
      white-space: normal;
    }

    &:last-child {
      padding-right: 20px;
    }
  }

  th {
    background: #e4edff;
    font-family: var(--primaryfont-semibold);

    &:first-child {
      border-radius: 12px 0 0 12px;
    }

    &:last-child {
      border-radius: 0 12px 12px 0;
    }
  }

  td {
    padding-top: 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid #e7e7e7;

    &:first-child {
      font-family: var(--primaryfont-semibold);
    }
  }
}

.zwc-calculator__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0 28px;
  border-bottom: 1px solid #e7e7e7;

  >p {
    font-family: var(--primaryfont-semibold);
  }

  p {
    margin: 0;
  }

  >div {
    text-align: right;
  }
}

.zwc-calculator__total-price {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zwc-calculator__total-value {
  font-family: var(--primaryfont-bold);
  line-height: 1.1;
}

.zwc-calculator__total-note {
  margin-top: 6px;
  line-height: 1.45;
}

/* Download-as-PDF card in the intro column */
.zwc-calculator__download {
  margin-top: 56px;
  padding: 48px 32px;
  background: #fff;
  border-radius: 24px;
  text-align: center;

  &.is-hidden {
    display: none;
  }

  >p:first-child {
    max-width: 340px;
    margin: 0 auto;
    font-family: var(--primaryfont-semibold);
    line-height: 1.4;
  }
}

.zwc-calculator__download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  max-width: 382px;
  margin: 32px auto 0;
  padding: 15px 24px;
  border: 0;
  border-radius: 14px;
  background: #000;
  font-family: var(--primaryfont-semibold);
  line-height: 1.45;
  color: #fff;
  cursor: pointer;

  &::before {
    content: "";
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--zwc-download-circle-img) no-repeat center / contain;
  }

  &.is-loading {
    opacity: 0.5;
    pointer-events: none;
  }
}

.zwc-calculator__download-error {
  display: none;
  margin-top: 16px;
  color: #e42527;

  &.is-visible {
    display: block;
  }
}

/* ---- PDF sheet ----
   html2pdf renders this clone off-screen; it never appears in the page. */

/* zohocustom.css resets font-variant-ligatures to none on every element, and it
   does so with element selectors, so inheriting a value onto the sheet cannot
   reach them. Canvas text always paints ligatures, so html2canvas lays the words
   out on ligature-free metrics and then paints them collapsed into each other.
   The Workplace estimate restores this the same way. */
.zwc-calculator__sheet,
.zwc-calculator__sheet div,
.zwc-calculator__sheet p,
.zwc-calculator__sheet h3,
.zwc-calculator__sheet table,
.zwc-calculator__sheet thead,
.zwc-calculator__sheet tbody,
.zwc-calculator__sheet tr,
.zwc-calculator__sheet th,
.zwc-calculator__sheet td {
  font-variant-ligatures: normal;
}

.zwc-calculator__sheet {
  width: 700px;
  padding: 24px 40px;
  background: #fff;
  letter-spacing: normal;

  .zwc-calculator__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 64px;
  }

  .zwc-calculator__result-head {
    display: block;
    margin-bottom: 20px;
  }

  h3 {
    font-family: var(--primaryfont-bold);
    font-size: 32px;
    line-height: 1.25;
  }

  .zwc-calculator__sheet-period {
    margin-top: 6px;
    font-family: var(--zf-primary-medium);
    font-size: 14px;
    color: #6d6d6d;
  }

  .zwc-calculator__table-wrap {
    overflow: visible;
  }

  /* Scoped through the table class so these beat the desktop font-size block */
  .zwc-calculator__table {
    /* Fixed columns keep the table from re-flowing if html2canvas measures text
       even slightly differently than the page does */
    table-layout: fixed;

    thead th {
      &:nth-child(1) {
        width: 30%;
      }

      &:nth-child(2) {
        width: 16%;
      }

      &:nth-child(3) {
        width: 28%;
      }

      &:nth-child(4) {
        width: 26%;
      }
    }

    th,
    td {
      padding: 18px 10px;
      border: 0;
      font-size: 15px;
      line-height: 1.5;
      text-align: center;
      white-space: normal;

      &:first-child {
        padding-left: 24px;
        text-align: left;
      }

      &:last-child {
        padding-right: 24px;
        text-align: center;
      }
    }

    th {
      color: #18181b;
    }

    tbody tr:nth-child(even) {
      background: #f5f5f5;
    }

    /* Matches the zebra rule's specificity so the total row stays unshaded */
    tbody tr.zwc-calculator__quote {
      background: none;

      td {
        padding-top: 26px;
        font-family: var(--zf-primary-medium);
      }
    }
  }

  .zwc-calculator__sheet-note {
    margin: 56px auto 0;
    max-width: 560px;
    font-family: var(--primaryfont-regular);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;

    p+p {
      margin-top: 10px;
    }
  }
}

.zwc-calculator__disclaimer {
  margin-top: 64px;
  text-align: center;
  line-height: 1.45;

  p {
    font-size: 14px;
    margin-bottom: 0;
  }

  p+p {
    margin-top: 15px;
  }

  .cta-btn {
    position: relative;
    margin-top: 30px;

    &::after {
      display: inline-block;
      width: 7px;
      height: 12px;
      margin-left: 12px;
      vertical-align: -1px;
      background: #fff;
      --zwc-icon: var(--zwc-chevron-right);
    }
  }
}

/* ================= Testimonials ================= */
.zwc-testimonials {
  padding: 96px 0;

  h2 {
    max-width: 770px;
    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.25;
    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;
  }
}

/* Active pill slides between buttons — JS sets the two custom properties */
.zwc-calculator__cycle {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: var(--zwc-pill-inset);
    bottom: var(--zwc-pill-inset);
    left: var(--zwc-pill-left, var(--zwc-pill-inset));
    width: var(--zwc-pill-width, 0);
    border-radius: 100px;
    background: #0047ff;
    transition: left 0.35s ease, width 0.35s ease;
  }
}

/* ================= Desktop font sizes ================= */
@media screen and (min-width: 1200px) {
  .zw-template-inner {
    h1 {
      font-size: 72px;
    }

    h2 {
      font-size: 56px;
    }

    h3 {
      font-size: 32px;
    }
  }

  .zwc-glance__item h3+p,
  .zwc-testimonials__eyebrow {
    font-size: 20px;
  }

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

  .zwc-features__card p,
  .zwc-calculator__hint,
  .zwc-calculator__select,
  .zwc-calculator__users,
  .zwc-calculator__cycle-btn,
  .zwc-calculator__error,
  .zwc-calculator__edit,
  .zwc-calculator__total-note,
  .zwc-testimonials__meta dt {
    font-size: 16px;
  }

  .zwc-calculator__table th,
  .zwc-calculator__table td,
  .zwc-calculator__download-btn {
    font-size: 17px;
  }

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

  .zwc-calculator__card h3,
  .zwc-calculator__total>p,
  .zwc-calculator__download>p:first-child,
  .zwc-testimonials__author p:first-child {
    font-size: 24px;
  }

  .zwc-calculator__result-head h3 {
    font-size: 28px;
  }

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

  .zwc-calculator__total-value {
    font-size: 44px;
  }

  .zwc-hero__media {
    transform: translateY(30%);
  }
}

@media screen and (min-width: 1440px) {
  .zw-template-inner {
    h1 {
      font-size: 80px;
    }
  }

  .zwc-hero__media {
    transform: translateY(21%);
  }
}

/* ================= Narrow desktop ================= */
/* @media screen and (min-width: 1200px) and (max-width: 1365px) {
  .zwc-hero__media {
    width: 545px;
    margin: -12px 0 -120px -130px;
  }
} */

/* ================= Large tablet ================= */
@media screen and (max-width: 1199px) {
  .zwc-secpad {
    padding: 90px 0;
  }

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

  .zwc-hero {
    margin: 0 20px;
    padding: 60px 0;
    border-radius: 32px;
  }

  .zwc-glance__item {
    padding: 48px 110px 48px 48px;
  }

  .zwc-calculator__card {
    width: 55%;
    padding: 40px;
  }
}

/* ================= Tablet ================= */
@media screen and (max-width: 991px) {
  .zwc-hero {
    padding: 60px 0 0;
  }

  .zwc-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    max-width: 540px;
    text-align: center;
    margin-inline: auto;
    gap: 70px;
  }

  .zwc-hero__actions {
    justify-content: center;
  }

  .zwc-hero__content p {
    margin-inline: auto;
  }

  /* The 560px flex-basis would become a height in the stacked direction */
  .zwc-hero__content {
    flex: none;
  }

  /* Stacked layout: illustration no longer needs to bleed */
  .zwc-hero__media {
    flex: 0 1 auto;
    align-self: center;
    width: 100%;
    max-width: 410px;
    margin: 0;
    transform: translateY(0);
  }

  .zwc-trust ul {
    gap: 40px;
  }
.zwc-features__grid {
  flex-wrap: wrap;
}
.zwc-features__card{
  flex-basis: 48%;
}
  .zwc-glance h2 {
    text-align: center;
  }

  /* Stacked layout: the info sits above the list, so drop the open-state offsets */
  .zwc-glance__item.is-open {
    padding-top: 60px;
    padding-bottom: 60px;

    .zwc-glance__info {
      margin-top: 0;
    }
  }

  /* A row gap would apply even while the list is collapsed, so space it with a
     margin that animates alongside the height instead */
  .zwc-glance__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .zwc-glance__item.is-open .zwc-glance__features {
    margin-top: 32px;
  }

  .zwc-glance__info {
    flex: none;
  }

  .zwc-calculator__intro {
    text-align: center;
    margin-inline: auto;
  }

  .zwc-calculator__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .zwc-calculator__card {
    width: 100%;
  }

  .zwc-testimonials {
    h2 {
      text-align: center;
      margin-inline: auto;
    }
  }

  .zwc-testimonials__eyebrow {
    text-align: center;
  }
}

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

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

  .zwc-hero {
    margin: 0 16px;
    border-radius: 24px;
  }

  .zwc-trust ul {
    gap: 20px;
  }
.zwc-features__grid {
  flex-wrap: wrap;
}
  .zwc-features__card {
    padding: 24px;
    max-width: 450px;
    text-align: center;
    margin-inline: auto;
    flex-basis: 100%;
  }

  .zwc-glance__item {
    padding: 32px 24px;
    border-radius: 24px;

    &.is-open {
      padding-top: 32px;
      padding-bottom: 32px;
    }
  }
.zwc-calculator__disclaimer .cta-btn{
padding: 12px 16px;
}
  /* Keep the heading clear of the absolutely positioned toggle */
  .zwc-glance__info {
    padding-right: 52px;
  }

  .zwc-glance__toggle {
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;

    &::before {
      width: 12px;
      height: 7px;
    }
  }

  .zwc-calculator {
    margin: 0 16px;
  }

  .zwc-calculator__card {
    padding: 24px;
  }

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

  /* Keep cells on one line and let the table wrap scroll instead.
     Scoped to the card so the PDF sheet clone keeps its own layout. */
  .zwc-calculator__card .zwc-calculator__table {

    th,
    td {
      padding-left: 8px;
      padding-right: 8px;
    }

    td:nth-child(3) {
      white-space: nowrap;
    }
  }

  .zwc-calculator__row {
    flex-wrap: wrap;
    gap: 16px;
  }

  .zwc-calculator__users {
    flex: 1 1 100%;
    width: 100%;
  }

  .zwc-testimonials {
    padding: 60px 0;
  }

  .zwc-testimonials {
    h2 {
      max-width: 300px;
    }
  }

  .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;
  }
}