/* ============ COMMON ============ */
      .zw-template-inner h1,
      .zw-template-inner h2,
      .zw-template-inner h3,
      .zw-template-inner p {
        margin-bottom: 0;
      }
      .zw-template-inner .content-wrap {
        max-width: 1400px;
      }
      .zw-product-header { background: #fff; }

      /* ============ BANNER ============ */
      .zwc-banner-wrap {
        background: #fff;
        color: #000;
        padding: 90px 0 30px;
      }
      .zwc-banner-wrap .zwc-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
      }
      .zwc-banner-wrap h1 {
        font-family: var(--primaryfont-bold);
        font-size: 64px;
        line-height: 1.1;
        letter-spacing: -1.28px;
        color: #000;
      }
      .zwc-banner-wrap .zwc-grad-blue {
        background: linear-gradient(180deg, #5575ea 20%, #1ca0ae 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }
      .zwc-banner-wrap p {
        font-size: 20px;
        line-height: 1.5;
        letter-spacing: -0.4px;
        color: #000;
        max-width: 640px;
      }

      /* ============ SLIDER ============ */
      .zwc-slider-wrap {
        background: #fff;
        padding: 40px 0 60px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
      }
      .zwc-slider-track {
        display: flex;
        align-items: center;
        gap: 90px;
        width: max-content;
        animation: zwc-marquee 40s linear infinite;
      }
      .zwc-slider-wrap:hover .zwc-slider-track { animation-play-state: paused; }
      @keyframes zwc-marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
      }
      .zwc-slide-ic {
        flex-shrink: 0;
        font-size: 0;
        background: var(--product-icons) no-repeat;
        background-size: var(--zp-i-bs);
        width: var(--zp-i-w);
        height: var(--zp-i-h);
        display: inline-block;
        transform: scale(1.3);
      }
      .zwc-slider-wrap .zwc-slide-ic.zp-crm { background-position: var(--zp-crm-bp); }
      .zwc-slider-wrap .zwc-slide-ic.zp-campaigns { background-position: var(--zp-campaigns-bp); }
      .zwc-slider-wrap .zwc-slide-ic.zp-commerce { background-position: var(--zp-commerce-bp); }
      .zwc-slider-wrap .zwc-slide-ic.zp-catalyst { background-position: var(--zp-catalyst-bp); }
      .zwc-slider-wrap .zwc-slide-ic.zp-books { background-position: var(--zp-books-bp); }
      .zwc-slider-wrap .zwc-slide-ic.zp-sign { background-position: var(--zp-sign-bp); }
      .zwc-slider-wrap .zwc-slide-ic.zp-creator { background-position: var(--zp-creator-bp); }
      .zwc-slider-wrap .zwc-slide-ic.zp-desk { background-position: var(--zp-desk-bp); }
      .zwc-slider-wrap .zwc-slide-ic.zp-analytics { background-position: var(--zp-analytics-bp); }
      .zwc-slider-wrap .zwc-slide-ic.zp-projects { background-position: var(--zp-projects-bp); }
      .zwc-slider-wrap .zwc-slide-ic.zp-salesiq { background-position: var(--zp-salesiq-bp); }
      .zwc-slider-wrap .zwc-slide-ic.zp-cliq { background-position: var(--zp-cliq-bp); }
      .zwc-slider-wrap .zwc-slide-ic.zp-sprints { background-position: var(--zp-sprints-bp); }
      .zwc-slider-wrap .zwc-slide-ic.zp-zeptomail { background-position: var(--zp-zeptomail-bp); }

      /* ============ EXPLORE ============ */
      .zwc-explore-wrap {
        background: rgba(26, 184, 255, 0.07);
        padding: 140px 0;
      }
      .zwc-explore-wrap .zwc-explore-inner {
        display: flex;
        gap: 60px;
        align-items: flex-start;
      }

      /* -- Sidebar -- */
      .zwc-explore-wrap .zwc-sidebar {
        width: 280px;
        flex-shrink: 0;
        position: sticky;
        top: 110px;
      }
      .zwc-explore-wrap .zwc-search {
        display: flex;
        align-items: center;
        gap: 5px;
        border: 1px solid #022f435c;
        border-radius: 12px;
        padding: 10px 16px;
      }
      .zwc-explore-wrap .zwc-search svg { flex-shrink: 0; }
      .zwc-explore-wrap .zwc-search input {
        border: 0;
        outline: 0;
        width: 100%;
        background: transparent;
        font-size: 14px;
        color: #555;
      }
      .zwc-explore-wrap .zwc-search input::placeholder { color: #555; }
      .zwc-explore-wrap .zwc-cat-list {
        list-style: none;
        margin: 26px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .zwc-explore-wrap .zwc-cat-list li {
        position: relative;
        font-size: 16px;
        line-height: 1.4;
        color: #505050;
        cursor: pointer;
        padding: 10px 0 10px 0;
        transition: color 0.2s, .3s ease-in-out;
      }
      .zwc-explore-wrap .zwc-cat-list li:hover { color: #022f43; }
      .zwc-explore-wrap .zwc-cat-list li.zwc-active {
        font-family: var(--primaryfont-semibold);
        color: #022f43;
            padding-left: 10px;
      }
      .zwc-explore-wrap .zwc-cat-list li:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 22px;
        background: #022f43;
        border-radius: 2px;
        opacity: 0;
        transition: .3s ease-in-out;
      }

      .zwc-explore-wrap .zwc-cat-list li.zwc-active:before {
   opacity: 1;
}

      /* -- Directory -- */
      .zwc-explore-wrap .zwc-directory { flex: 1; min-width: 0; }
      .zwc-explore-wrap .zwc-cat-group + .zwc-cat-group { margin-top: 70px; }
      .zwc-explore-wrap .zwc-cat-group h2 {
        font-family: var(--primaryfont-bold);
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -0.64px;
        color: #000;
        margin-bottom: 28px;
      }
      .zwc-explore-wrap .zwc-app-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      .zwc-explore-wrap .zwc-app-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: #fff;
        border: 1px solid #cfe0f2;
        border-radius: 16px;
        padding: 30px;
        text-decoration: none;
        box-shadow: 0 10px 30px rgba(2, 47, 67, 0.06);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      }
      .zwc-explore-wrap .zwc-app-card:hover {
        transform: translateY(-4px);
        border-color: #33D0FD;
        box-shadow: 0 16px 34px rgba(2, 47, 67, 0.12);
      }
      .zwc-explore-wrap .zwc-card-more {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: auto;
        padding-top: 22px;
        font-family: var(--primaryfont-semibold);
        font-size: 15px;
        letter-spacing: 0.5px;
        color: #0a55eb;
        text-decoration: none;
      }
      .zwc-explore-wrap .zwc-card-more svg { display: block; transition: .3s ease-in-out; }
      /* App icons — Zoho product sprite (vars from Zoho build env) */
      .zwc-explore-wrap .zwc-app-ic {
        font-size: 0;
        background: var(--product-icons) no-repeat;
        background-size: var(--zp-i-bs);
        width: var(--zp-i-w);
        height: var(--zp-i-h);
        display: inline-block;
        margin-bottom: 22px;
        transform: scale(1.2);
        transform-origin: left center;
      }
      .zwc-app-card:hover .zwc-card-more svg {
    transform: translate(5px, 0px);
}
      .zwc-explore-wrap .zwc-app-ic.zp-analytics { background-position: var(--zp-analytics-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-apptics { background-position: var(--zp-apptics-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-one { background-position: var(--zp-one-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-assist { background-position: var(--zp-assist-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-backstage { background-position: var(--zp-backstage-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-bigin { background-position: var(--zp-bigin-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-bookings { background-position: var(--zp-bookings-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-books { background-position: var(--zp-books-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-bugtracker { background-position: var(--zp-bugtracker-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-calendar { background-position: var(--zp-calendar-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-campaigns { background-position: var(--zp-campaigns-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-catalyst { background-position: var(--zp-catalyst-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-cliq { background-position: var(--zp-cliq-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-commerce { background-position: var(--zp-commerce-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-connect { background-position: var(--zp-connect-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-contacts { background-position: var(--zp-contacts-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-contracts { background-position: var(--zp-contracts-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-creator { background-position: var(--zp-creator-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-crm { background-position: var(--zp-crm-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-dataprep { background-position: var(--zp-dataprep-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-desk { background-position: var(--zp-desk-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-directory { background-position: var(--zp-directory-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-expense { background-position: var(--zp-expense-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-fsm { background-position: var(--zp-fsm-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-inventory { background-position: var(--zp-inventory-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-invoice { background-position: var(--zp-invoice-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-iot { background-position: var(--zp-iot-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-learn { background-position: var(--zp-learn-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-lens { background-position: var(--zp-lens-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-mail { background-position: var(--zp-mail-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-marketingautomation { background-position: var(--zp-marketingautomation-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-meeting { background-position: var(--zp-meeting-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-officeintegrator { background-position: var(--zp-officeintegrator-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-pagesense { background-position: var(--zp-pagesense-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-pdfeditor { background-position: var(--zp-pdfeditor-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-people { background-position: var(--zp-people-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-pos { background-position: var(--zp-pos-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-projects { background-position: var(--zp-projects-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-recruit { background-position: var(--zp-recruit-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-salesiq { background-position: var(--zp-salesiq-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-sheet { background-position: var(--zp-sheet-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-shifts { background-position: var(--zp-shifts-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-sign { background-position: var(--zp-sign-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-sprints { background-position: var(--zp-sprints-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-subscriptions { background-position: var(--zp-subscriptions-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-tables { background-position: var(--zp-tables-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-thrive { background-position: var(--zp-thrive-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-vault { background-position: var(--zp-vault-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-verticalstudio { background-position: var(--zp-verticalstudio-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-webinar { background-position: var(--zp-webinar-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-workdrive { background-position: var(--zp-workdrive-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-workerly { background-position: var(--zp-workerly-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-writer { background-position: var(--zp-writer-bp); }
      .zwc-explore-wrap .zwc-app-ic.zp-zeptomail { background-position: var(--zp-zeptomail-bp); }
      .zwc-explore-wrap .zwc-app-card h3 {
        font-family: var(--primaryfont-bold);
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: -0.4px;
        color: #000;
        margin-bottom: 16px;
      }
      .zwc-explore-wrap .zwc-app-card p {
        font-family: var(--zf-primary-regular);
        font-size: 16px;
        line-height: 1.6;
        color: #272727;
      }
      .zwc-explore-wrap .zwc-no-result {
        font-family: var(--primaryfont-semibold);
        font-size: 18px;
        color: #555;
        padding: 20px 0;
      }
      .zwc-search {
  position: relative;
}
/* .zwc-search input {
  padding-right: 40px;
} */
.zwc-search-clear {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.zwc-search-clear.zwc-visible {
  display: flex;
}
.zwc-search-clear:hover,
.zwc-search-clear:focus-visible {
  opacity: 1;
}
.zwc-search-clear svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.zwc-explore-wrap .zwc-app-ic.zp-vani {
    background-position: var(--zp-vani-bp);
}
.zwc-explore-wrap .zwc-app-ic.zp-show {
    background-position: var(--zp-show-bp);
}


      /* ============ RESPONSIVE ============ */

      /* --- 1199px --- */
      @media (max-width: 1199px) {
        .zwc-banner-wrap { padding: 90px 0 50px; }
        .zwc-banner-wrap h1 { font-size: 56px; }
        .zwc-explore-wrap .zwc-explore-inner { gap: 40px; }
        .zwc-explore-wrap .zwc-sidebar { width: 240px; }
        .zwc-explore-wrap .zwc-app-grid { grid-template-columns: repeat(2, 1fr); }
        .zwc-explore-wrap .zwc-cat-group h2 { font-size: 28px; }
      }

      /* --- 991px --- */
      @media (max-width: 991px) {
        .zwc-explore-wrap .zwc-search {
    max-width: 600px;
    margin: 0 auto;
}
    .zwc-explore-wrap .zwc-cat-group h2 {
        text-align: center;
    }
        .zwc-explore-wrap .zwc-app-grid {
        max-width: 798px;
        margin: 0 auto;
    }
    .zwc-explore-wrap {
    padding: 100px 0 100px;
}
        .zwc-banner-wrap { padding: 70px 0 30px; }
        .zwc-banner-wrap h1 { font-size: 44px; line-height: 1.2; }
        /* Sidebar on top, horizontal scroll of categories */
        .zwc-explore-wrap .zwc-explore-inner { flex-direction: column; gap: 40px; }
        .zwc-explore-wrap .zwc-sidebar { width: 100%; position: static; }
        .zwc-explore-wrap .zwc-cat-list {
          flex-direction: row;
          flex-wrap: wrap;
          gap: 8px 10px;
          margin-top: 18px;
          display: none;
        }
        .zwc-explore-wrap .zwc-cat-list li {
          padding: 8px 16px;
          border: 1px solid #d7e2ea;
          border-left: 1px solid #d7e2ea;
          border-radius: 30px;
        }
        .zwc-explore-wrap .zwc-cat-list li.zwc-active {
          border-color: #022f43;
          background: #022f43;
          color: #fff;
        }
        .zwc-explore-wrap .zwc-cat-list li.zwc-active:before { display: none; }
        .zwc-explore-wrap .zwc-directory { width: 100%; }
      }

      /* --- 767px --- */
      @media (max-width: 767px) {
        .zwc-banner-wrap h1 { font-size: 33px; letter-spacing: normal; line-height: normal; }
        .zwc-banner-wrap p { font-size: 18px; }
        .zwc-explore-wrap { padding: 50px 0 70px; }
        .zwc-explore-wrap .zwc-app-grid { grid-template-columns: 1fr; }
        .zwc-explore-wrap .zwc-cat-group h2 { font-size: 26px; letter-spacing: normal; }
        .zwc-explore-wrap .zwc-cat-group + .zwc-cat-group { margin-top: 50px; }
        .zwc-slide-ic { width: 40px; height: 40px; }
        .zwc-slider-track { gap: 60px; }
        .zwc-explore-wrap .zwc-app-ic {
    margin: 0 auto 15px;
}
.zwc-explore-wrap .zwc-app-card h3 {
    margin: 0 auto 15px;
}
.zwc-explore-wrap .zwc-card-more {
    margin: 0 auto;
}
.zwc-app-card {
    text-align: center;
    max-width: 460px;
    margin: 0 auto;
}
.zwc-explore-wrap .zwc-search {
    max-width: 450px;
}
      }

      /* --- 480px --- */
      @media (max-width: 480px) {
        .zwc-banner-wrap { padding: 56px 0; }
        .zwc-explore-wrap .zwc-app-card { padding: 24px; }
      }