/* =========================================================
   Zyrix AI - AI Agent Testing Platform
   Page-Specific Styles (Extracted from New-Page.html)
   ========================================================= */

/* ---------------------------------------------------------
   1. Global Height & Compact Layout Optimizations
   --------------------------------------------------------- */
    #why-prompt-testing {
      padding-bottom: 0 !important;
    }

    .s-heading.mb-76,
    .s-heading.mb-96,
    .s-heading.mb-80,
    .s-heading.mb-43 {
      margin-bottom: 24px !important;
    }

    .s-heading .s-sub-title,
    .s-heading.style-2 .s-sub-title {
      margin-bottom: 10px !important;
    }

    .s-heading .s-title,
    .s-heading.style-2 .s-title {
      font-size: 32px !important;
      line-height: 1.25 !important;
      margin-bottom: 12px !important;
    }

    .s-heading .text,
    .s-heading .text.text-type-2 {
      font-size: 14.5px !important;
      line-height: 1.55 !important;
      max-width: 820px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* Compact Card Spacing */
    .agentic-flow-card {
      padding: 20px 22px !important;
    }

    .agentic-flow-card h3 {
      font-size: 18px !important;
      margin-bottom: 8px !important;
    }

    .agentic-flow-card p {
      font-size: 13.5px !important;
      line-height: 1.5 !important;
      margin-bottom: 12px !important;
    }

    .capability-card {
      padding: 22px 20px !important;
    }

    .capability-card .card-title {
      font-size: 18px !important;
      margin-bottom: 6px !important;
    }

    .capability-card .card-description {
      font-size: 13.5px !important;
      line-height: 1.5 !important;
    }

    .wg-pricing {
      padding: 24px 22px !important;
      margin-bottom: 0 !important;
    }

    .wg-pricing .type {
      font-size: 19px !important;
      margin-bottom: 4px !important;
    }

    .wg-pricing .sub {
      font-size: 13px !important;
      margin-bottom: 12px !important;
    }

    .wg-pricing .line {
      margin: 12px 0 !important;
    }

    #integrations .text-center.mt-5 {
      display: flex;
      justify-content: center;
    }

    /* Agentic Workflows sits directly under How It Works, which already carries
       its own bottom padding - 90px on top of that left a large empty band. */
    .s-indicator.s-build.impact {
      padding-top: 24px !important;
    }

    @media (max-width: 767px) {
      .s-indicator.s-build.impact {
        padding-top: 12px !important;
      }
    }

    @media (max-width: 767px) {

      .s-pricing,
      .pricing-sec-new,
      .capabilities-section,
      .category-section,
      .workflow-shell {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
      }

      .s-heading .s-title,
      .s-heading.style-2 .s-title {
        font-size: 24px !important;
      }
    }

/* ---------------------------------------------------------
   2. Hero Section Styles
   --------------------------------------------------------- */
    .hero-compact-section .s-heading {
      margin-bottom: 20px !important;
    }

    .hero-compact-section .s-sub-title {
      margin-bottom: 10px !important;
    }

    .hero-compact-section .s-title {
      font-size: 35px !important;
      line-height: 1.25 !important;
      margin-bottom: 12px !important;
    }

    .hero-compact-section .hero-text-compact {
      font-size: 14.5px !important;
      line-height: 1.55 !important;
      max-width: 840px !important;
      margin: 0 auto !important;
      color: var(--Text-2);
    }

    .hero-compact-section .hero-tags-compact {
      font-size: 13px !important;
      color: var(--Text-3);
      margin-top: 8px !important;
      font-weight: 500;
      letter-spacing: 0.5px;
    }

    .hero-compact-section .hero-btn-row {
      margin-bottom: 24px !important;
    }

    .hero-compact-section .hero-btn-row .mx-auto.mx-lg-0.d-flex.gap-4 {
      flex-wrap: wrap;
      justify-content: center;
    }

    .hero-compact-section .hero-btn-row .tf-btn {
      white-space: normal;
      text-align: center;
      min-width: 0;
    }

    @media (max-width: 991px) {
      .hero-compact-section .hero-btn-row .mx-auto.mx-lg-0.d-flex.gap-4 {
        gap: 12px !important;
      }

      .hero-compact-section .hero-btn-row .tf-btn {
        flex: 1 1 220px;
        max-width: 100%;
      }
    }

    @media (max-width: 767px) {
      .hero-compact-section {
        padding: 25px 0 15px 0 !important;
      }

      .hero-compact-section .s-title {
        font-size: 24px !important;
      }

      .hero-compact-section .hero-text-compact {
        font-size: 13.5px !important;
      }

      .hero-compact-section .hero-btn-row {
        width: 100%;
      }

      .hero-compact-section .hero-btn-row .mx-auto.mx-lg-0.d-flex.gap-4 {
        width: 100%;
        gap: 12px !important;
      }

      .hero-compact-section .hero-btn-row .tf-btn {
        flex: 1 1 100%;
        width: 100%;
      }
    }

/* ---------------------------------------------------------
   3. Workflow Stages, Showcase, Category, Integrations, PTC & FAQ
   --------------------------------------------------------- */
        :root {
          --ink: #03000f;
          --surface: #081820;
          --muted: #9da4aa;
          --white: #faf9ff;
          --violet: #743bff;
          --pink: #f14beb;
          --peach: #ffbe69;
        }
/* ==========================================================================
   Hero Section 3-Card Depth Showcase
   ========================================================================== */

.hero-showcase-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto 0;
  width: 100%;
  max-width: 1420px;
  min-height: 520px;
  padding: 0 10px;
}

.hero-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.7);
  transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
}

.hero-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Main elevated center card - clean, subtle glow */
.hero-card.main-card {
  position: relative;
  z-index: 10;
  width: 62%;
  max-width: 840px;
  border: 1px solid rgba(140, 90, 240, 0.45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75), 0 0 22px rgba(116, 59, 255, 0.18);
  border-radius: 18px;
  background: #020420;
}

/* Overlapping side cards - extended further outwards */
.hero-card.side-card {
  position: absolute;
  top: 50%;
  width: 58%;
  max-width: 760px;
  z-index: 2;
  opacity: 0.5;
  filter: brightness(0.65);
  border: 1px solid rgba(80, 60, 140, 0.35);
  border-radius: 16px;
  background: #020420;
}

.hero-card.side-card.is-left {
  left: -2%;
  transform: translateY(-50%) scale(0.93);
}

.hero-card.side-card.is-right {
  right: -2%;
  transform: translateY(-50%) scale(0.93);
}

.hero-card.side-card:hover {
  opacity: 0.88;
  filter: brightness(0.9);
  z-index: 6;
  transform: translateY(-50%) scale(0.95);
}

@media (max-width: 991px) {
  .hero-showcase-wrapper {
    min-height: 360px;
  }
  .hero-card.main-card {
    width: 78%;
  }
  .hero-card.side-card {
    width: 55%;
    opacity: 0.4;
  }
  .hero-card.side-card.is-left { left: 0; }
  .hero-card.side-card.is-right { right: 0; }
}
        .workflow-shell {
          min-height: 100vh;
          background-color: #03000f;
          padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4.5vw, 7.5rem);
        }

        .workflow-list {
          display: flex;
          flex-direction: column;
          gap: 8px;
          height: auto;
          justify-content: flex-start;
        }

        .workflow-card {
          position: relative;
          width: 100%;
          flex: 0 0 auto;
          min-height: 52px;
          padding: 12px 18px;
          border: 0;
          border-radius: 1.2rem;
          color: #ffffff;
          background: #0B161F;
          text-align: left;
          display: flex;
          align-items: center;
          justify-content: space-between;
          overflow: hidden;
          cursor: pointer;
          transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
        }

        .workflow-card::before {
          content: "";
          position: absolute;
          z-index: -1;
          inset: -1.4rem 0 0;
          border-radius: 1.7rem;
          background: linear-gradient(110deg, rgba(100, 53, 255, .18), rgba(237, 67, 225, .12), rgba(255, 183, 98, .12));
          opacity: 0;
          filter: blur(1px);
          transition: opacity .35s ease;
        }

        .workflow-card:hover,
        .workflow-card:focus-visible {
          transform: translateY(-2px);
          outline: none;
          box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, .2);
        }

        .workflow-card:focus-visible {
          box-shadow: 0 0 0 .2rem rgba(241, 75, 235, .6), 0 0.8rem 1.8rem rgba(0, 0, 0, .2);
        }

        .workflow-card.is-active {
          flex: 0 0 auto !important;
          min-height: 0 !important;
          height: auto !important;
          padding: 14px 18px !important;
          align-items: flex-start;
          background: linear-gradient(105deg, #6540ff 0%, #c64eea 48%, #ffbf68 100%) !important;
          box-shadow: 0 10px 30px rgba(101, 64, 255, 0.18);
        }

        .workflow-card.is-active::before {
          opacity: 1;
        }

        .workflow-card:not(.is-active) .card-copy {
          gap: 2px !important;
        }

        .card-copy {
          display: flex;
          flex-direction: column;
          gap: .45rem;
          max-width: 85%;
        }

        .card-copy strong {
          font: 500 clamp(1.4rem, 2.5vw, 1.8rem)/1.1 "Inter", sans-serif;
          letter-spacing: -.04em;
        }

        .card-copy span {
          color: var(--muted);
          font-size: clamp(.95rem, 1.4vw, 1.25rem);
          font-size: 16px;
        }

        .card-copy small {
          max-width: 62rem;
          color: rgba(255, 255, 255, .88);
          font-size: clamp(.9rem, 1.2vw, 1.05rem);
          line-height: 1.4;
        }

        .a2a-howworks .card-description {
          display: none;
          font-family: "Inter", sans-serif;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0;
          margin-bottom:0;
        }

        /* description sits back from the two title lines above it */
        .a2a-howworks .workflow-card .card-description {
          margin-top: 2px;
          color: rgba(255, 255, 255, 0.72);
          font-size: 14px;
          line-height: 1.6;
        }


        .is-active .card-description {
          display: block;
        }

        /* ---- per-stage checklist: visible only on the open card ---- */
        .a2a-howworks .stage-checks {
          display: none;
          margin: 10px 0 0;
          padding: 0;
          list-style: none;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 6px 18px;
        }

        .a2a-howworks .is-active .stage-checks {
          display: grid;
        }

        .a2a-howworks .stage-checks li {
          display: flex;
          align-items: flex-start;
          gap: 7px;
          color: rgba(255, 255, 255, 0.92);
          font-family: "Inter", sans-serif;
          font-size: 13.5px;
          font-weight: 400;
          line-height: 1.45;
          letter-spacing: 0;
          text-align: left;
        }

        .a2a-howworks .stage-checks li i {
          flex: 0 0 auto;
          margin-top: 2px;
          font-size: 13px;
          font-weight: 700;
          color: #ffffff;
        }

        @media (max-width: 575.98px) {
          .a2a-howworks .stage-checks {
            grid-template-columns: minmax(0, 1fr);
          }
        }

        .is-active .card-copy strong {
          color: #ffffff;
        }

        .is-active .card-copy span {
          color: rgba(255, 255, 255, 0.95);
        }

        .stage-number {
          align-self: flex-start;
          color: #f88ad8;
          font: italic 400 clamp(2.2rem, 4vw, 3.2rem)/1 "Inter", sans-serif;
          letter-spacing: -.08em;
        }

        .is-active .stage-number {
          color: rgba(255, 255, 255, .9);
        }

        /* ---- readability on the open card ---- */
        .a2a-howworks .workflow-card.is-active::after {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 0;
          border-radius: inherit;
          pointer-events: none;
          background: linear-gradient(105deg,
              rgba(6, 2, 24, 0.34) 0%,
              rgba(6, 2, 24, 0.40) 45%,
              rgba(6, 2, 24, 0.52) 100%);
        }

        .a2a-howworks .workflow-card .card-copy,
        .a2a-howworks .workflow-card .stage-number {
          position: relative;
          z-index: 1;
        }

        /* description: brighter, roomier, and no longer capped at 85% width */
        .a2a-howworks .workflow-card.is-active .card-copy {
          max-width: 88%;
        }

        .a2a-howworks .workflow-card .card-description {
          margin-top: 6px;
          color: rgba(255, 255, 255, 0.96);
          font-size: 14px;
          line-height: 1.65;
        }

        .a2a-howworks .is-active .card-copy strong {
          text-shadow: 0 1px 10px rgba(6, 2, 24, 0.45);
        }

        /* checklist: full-strength white with a tinted check chip */
        .a2a-howworks .stage-checks {
          margin-top: 4px;
          padding-top: 10px;
          border-top: 1px solid rgba(255, 255, 255, 0.22);
          gap: 8px 20px;
        }

        .a2a-howworks .stage-checks li {
          color: #ffffff;
          font-size: 13.5px;
          font-weight: 500;
          line-height: 1.5;
        }

        .a2a-howworks .stage-checks li i {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 16px;
          height: 16px;
          margin-top: 3px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.22);
          color: #ffffff;
          font-size: 10px;
          font-weight: 700;
        }

        .stage-panel,
        #stage-panel {
          width: 100%;
          height: 100%;
          min-height: 0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 0 !important;
          background: transparent;
          box-shadow: none;
        }

        .stage-visual-box,
        #stage-panel .stage-visual-box {
          width: 100%;
          max-height: 100%;
          display: none !important;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5), 0 8px 25px rgba(0, 0, 0, 0.4);
        }
        .stage-visual-box.is-active,
        #stage-panel .stage-visual-box.is-active {
          display: flex !important;
        }

        .stage-visual-box img,
        #stage-panel .stage-visual-box img {
          display: block;
          width: 100%;
          max-width: 100%;
          height: auto;
          object-fit: contain;
        }

        @media (min-width: 1200px) {
          .workflow-card.is-active .card-description {
            line-height: 1.65 !important;
          }
        }

        @media (max-width: 1199.98px) {
          .workflow-list {
            gap: 8px !important;
          }
        }

        @media (max-width: 767.98px) {
          .workflow-list {
            gap: 8px !important;
          }

          .workflow-card {
            min-height: 48px !important;
            padding: 10px 14px !important;
          }

          .workflow-card.is-active {
            padding: 12px 14px !important;
          }
        }

        .panel-content {
          width: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-top: 1.2rem;
        }

        .panel-kicker,
        .panel-status {
          color: #c269f8;
          font-size: .75rem;
          letter-spacing: .18em;
          text-transform: uppercase;
        }

        .panel-content h2 {
          margin: .4rem 0 .8rem;
          font: 700 clamp(2rem, 4.5vw, 3.8rem)/1 "Inter", sans-serif;
          letter-spacing: -.05em;
        }

        .panel-supporting {
          color: #ffffff !important;
          font-size: clamp(1rem, 1.6vw, 1.35rem) !important;
          line-height: 1.35 !important;
        }

        .panel-description {
          color: var(--muted);
          font-size: 1rem;
          line-height: 1.5;
        }

        .panel-line {
          width: 3.5rem;
          height: .2rem;
          margin: 1.2rem 0;
          background: linear-gradient(90deg, var(--violet), var(--pink), var(--peach));
        }

        @media (max-width: 991.98px) {
          .workflow-list {
            height: auto;
            min-height: auto;
          }

          .workflow-card {
            flex: none;
            min-height: 70px;
          }

          .workflow-card.is-active {
            flex: none;
            min-height: 140px;
          }

          .stage-panel {
            min-height: 500px;
            height: auto;
          }
        }

        @media (max-width: 575.98px) {
          .workflow-shell {
            padding: 1.25rem .85rem 2rem;
          }

          .stage-panel {
            min-height: 450px;
            padding: 1rem;
            border-radius: 1.2rem;
          }

          .stage-visual-box {
            height: 190px;
            min-height: 190px;
            flex-basis: 190px;
          }

          .panel-content p:not(.panel-kicker) {
            font-size: 1rem;
          }
        }

        /* ---------------- FAQ / agent chat ---------------- */
        .faq-layout {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
          gap: 24px;
          align-items: stretch;
        }

        /* the column height comes from the question list; the panel fills it
   absolutely so new messages scroll inside instead of growing the layout */
        .faq-chat-col {
          position: relative;
          min-height: 0;
        }

        /* --- chat panel: theme card idiom --- */
        .faq-chat {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          border-radius: 24px;
          border: 1px solid #272140;
          background-image: radial-gradient(circle farthest-corner at 50% 140%, var(--purple-dark) 25%, var(--Black) 75%);
        }

        .chat-head {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 18px 22px;
          border-bottom: 1px solid #272140;
        }

        .chat-avatar {
          flex: 0 0 auto;
          width: 40px;
          height: 40px;
          display: grid;
          place-items: center;
          border-radius: 50%;
          color: var(--White);
          font-size: 18px;
          background-color: var(--Bg-6);
        }

        .chat-id {
          display: flex;
          flex-direction: column;
          gap: 2px;
          margin-right: auto;
        }

        .chat-id strong {
          font-size: 16px;
          font-weight: 600;
          line-height: 1.2;
          color: var(--Text-3);
        }

        .chat-id>span {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 12px;
          color: var(--Text-2);
        }

        .chat-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background-color: #4ade80;
          box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
        }

        .chat-reset {
          padding: 6px;
          border: 0;
          border-radius: 8px;
          background-color: transparent;
          color: var(--Text-2);
          font-size: 16px;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .chat-reset:hover {
          color: var(--White);
          background-color: rgba(255, 255, 255, 0.06);
        }

        .chat-body {
          flex: 1;
          min-height: 0;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          gap: 14px;
          padding: 22px;
          scroll-behavior: smooth;
        }

        .chat-body::-webkit-scrollbar {
          width: 5px;
        }

        .chat-body::-webkit-scrollbar-thumb {
          background-color: var(--Border);
          border-radius: 100px;
        }

        .chat-msg {
          display: flex;
          align-items: flex-end;
          gap: 10px;
          margin-bottom: 16px;
          width: 100%;
          animation: chat-in 0.35s ease both;
        }

        .chat-msg.is-user {
          justify-content: flex-end;
        }

        .chat-msg.is-agent {
          justify-content: flex-start;
        }

        .chat-msg-avatar {
          flex-shrink: 0;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 15px;
          color: #ffffff;
        }

        .chat-msg-avatar.agent-avatar {
          background: linear-gradient(135deg, #6540ff, #ee42e5);
          box-shadow: 0 0 10px rgba(101, 64, 255, 0.4);
        }

        .chat-msg-avatar.user-avatar {
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #d2cbfa;
        }

        .chat-msg-bubble {
          max-width: 82%;
          padding: 12px 16px;
          border-radius: 16px;
          font-size: 14.5px;
          line-height: 1.6;
        }

        .chat-msg.is-user .chat-msg-bubble {
          border-bottom-right-radius: 4px;
          color: var(--White);
          background-color: var(--Bg-6);
          border: 1px solid var(--Bg-6);
        }

        .chat-msg.is-agent .chat-msg-bubble {
          border-bottom-left-radius: 4px;
          color: var(--Text-2);
          background-color: rgba(255, 255, 255, 0.04);
          border: 1px solid #272140;
        }

        .chat-msg-bubble p {
          margin: 0;
        }

        @keyframes chat-in {
          from {
            opacity: 0;
            transform: translateY(8px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .chat-typing {
          display: flex;
          align-items: flex-end;
          gap: 9px;
        }

        .chat-typing .chat-msg-bubble {
          display: flex;
          align-items: center;
          gap: 5px;
          padding: 12px 15px;
        }

        .chat-typing i {
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background-color: var(--Bg-2);
          animation: chat-bounce 1s infinite ease-in-out;
        }

        .chat-typing i:nth-child(2) {
          animation-delay: 0.15s;
        }

        .chat-typing i:nth-child(3) {
          animation-delay: 0.3s;
        }

        @keyframes chat-bounce {

          0%,
          60%,
          100% {
            transform: translateY(0);
            opacity: 0.45;
          }

          30% {
            transform: translateY(-4px);
            opacity: 1;
          }
        }

        .chat-cards {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
          gap: 8px;
          margin-top: 14px;
        }

        .chat-card {
          padding: 11px 13px;
          border-radius: 13.6px;
          background-color: rgba(255, 255, 255, 0.04);
          border: 1px solid #272140;
          animation: chat-in 0.35s ease both;
        }

        .chat-card strong {
          display: block;
          font-size: 13px;
          font-weight: 600;
          line-height: 1.3;
          color: var(--Text-3);
        }

        .chat-card span {
          display: block;
          margin-top: 3px;
          font-size: 12px;
          color: var(--Text-2);
        }

        .chat-card b {
          display: inline-block;
          margin-top: 7px;
          padding: 2px 7px;
          border-radius: 6px;
          font-size: 10px;
          font-weight: 600;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--Border-4);
          background-color: rgba(166, 140, 240, 0.14);
        }

        .chat-foot {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 14px 18px;
          border-top: 1px solid #272140;
        }

        .chat-fake-input {
          flex: 1;
          padding: 10px 15px;
          border-radius: 100px;
          background-color: rgba(255, 255, 255, 0.04);
          border: 1px solid #272140;
          color: var(--Text-2);
          font-size: 13px;
        }

        .chat-send {
          flex: 0 0 auto;
          width: 36px;
          height: 36px;
          display: grid;
          place-items: center;
          border-radius: 50%;
          color: var(--White);
          font-size: 14px;
          background-color: var(--Bg-6);
        }

        /* --- question list --- */
        .faq-ask-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .faq-ask {
          display: flex;
          align-items: center;
          gap: 14px;
          width: 100%;
          padding: 18px 24px;
          border-radius: 13.6px;
          border: 1px solid #272140;
          background-image: radial-gradient(circle farthest-corner at 50% 140%, var(--purple-dark) 25%, var(--Black) 75%);
          color: var(--Text-3);
          font-size: 16px;
          font-weight: 500;
          line-height: 1.45;
          text-align: left;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .faq-ask i {
          flex: 0 0 auto;
          color: var(--Bg-2);
          font-size: 16px;
          transition: all 0.3s ease;
        }

        .faq-ask:hover:not(:disabled) {
          transform: translateX(4px);
          border-color: var(--Border-4);
        }

        .faq-ask:hover:not(:disabled) i {
          transform: translateX(3px);
        }

        .faq-ask:focus-visible {
          outline: none;
          border-color: var(--Border-4);
          box-shadow: 0px 0px 16px 0px rgba(57, 115, 233, 0.2509803922);
        }

        .faq-ask:disabled {
          cursor: not-allowed;
        }

        /* answered: shaded out immediately, matching the disabled nodes elsewhere on the page */
        .faq-ask.is-asked {
          color: var(--Text);
          border-color: rgba(39, 33, 64, 0.6);
          background-image: none;
          background-color: rgba(255, 255, 255, 0.02);
          opacity: 0.55;
          filter: saturate(0.5);
          transform: none;
        }

        .faq-ask.is-asked i {
          color: #4ade80;
        }

        .a2a-cta .s-heading {
          min-height: 100px;
        }


        @media (max-width: 1199.98px) {
          .faq-layout {
            grid-template-columns: 1fr;
          }

          .faq-chat-col {
            height: clamp(28rem, 60vh, 34rem);
          }
        }

        @media (max-width: 767.98px) {
          .chat-body {
            padding: 16px;
          }

          .chat-msg {
            max-width: 92%;
            font-size: 14px;
          }

          .faq-ask {
            padding: 15px 18px;
            gap: 10px;
            font-size: 15px;
          }
        }

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

          .chat-msg,
          .chat-card {
            animation: none;
          }

          .chat-body {
            scroll-behavior: auto;
          }

          .faq-ask:hover:not(:disabled) {
            transform: none;
          }
        }

        /* ---------------- Prompt testing vs agent-to-agent ---------------- */
        /* ---------------- Prompt testing vs agent-to-agent ---------------- */
        .ptc-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
        }

        .ptc-label {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 12px;
          margin-bottom: 10px;
          padding: 0 8px;
          font-size: 13px;
          color: var(--Text);
        }

        .ptc-label em {
          font-style: normal;
          text-align: right;
        }

        .ptc-label.is-lit {
          color: var(--Text-2);
        }

        .ptc-card {
          padding: 16px 20px;
          border-radius: 13.6px;
          font-size: 18px;
          font-weight: 600;
          letter-spacing: 0.06em;
          text-transform: uppercase;
        }

        .ptc-card.is-problem {
          color: var(--Text-2);
          border: 1px solid #272140;
          background-image: radial-gradient(circle farthest-corner at 50% 140%, var(--purple-dark) 25%, var(--Black) 75%);
        }

        .ptc-card.is-solution {
          color: var(--White);
          font-weight: 700;
          border: 1px solid transparent;
          background-image: linear-gradient(90deg, #7f64e9, #9c83ff 25%, #d671ef 50%, #f5cb36);
          box-shadow: 0 0 30px rgba(140, 100, 233, 0.3);
        }

        /* ---- comparison tree ---- */
        .ptc-compare {
          position: relative;
          margin-top: 10px;
          padding: 15px 0 96px;
        }

        /* central divider */
        .ptc-line {
          position: absolute;
          top: 15px;
          bottom: 0;
          left: 50%;
          z-index: 0;
          width: 1px;
          transform: translateX(-50%);
          background-image: linear-gradient(180deg, rgba(166, 140, 240, 0.75) 0%, rgba(140, 100, 233, 0.45) 55%, rgba(89, 53, 233, 0.08) 100%);
        }

        /* purple bloom hugging the LEFT of the line only, so the right edge stays a clean straight rule */
        .ptc-glow {
          position: absolute;
          top: 20%;
          right: 50%;
          z-index: 0;
          width: 160px;
          height: 340px;
          border-radius: 50%;
          pointer-events: none;
          filter: blur(24px);
          background-image: radial-gradient(closest-side at 100% 50%, rgba(89, 53, 233, 0.5) 0%, rgba(89, 53, 233, 0.18) 45%, rgba(89, 53, 233, 0) 100%);
        }

        /* light beam rising from the base of the divider */
        .ptc-beam {
          position: absolute;
          left: 50%;
          bottom: 0;
          z-index: 0;
          width: 120px;
          height: 380px;
          max-height: 100%;
          transform: translateX(-50%);
          border-radius: 20px;
          opacity: 0.12;
          pointer-events: none;
          filter: blur(30px);
          background: radial-gradient(80.15% 300.26% at 50.41% 132.18%, #FFFFFF 17.79%, rgba(254, 188, 95, 0) 43.75%);
        }

        .ptc-notes {
          position: relative;
          z-index: 10;
          display: flex;
          justify-content: space-between;
          max-width: 900px;
          margin: 0 auto 32px;
        }

        .ptc-notes span {
          width: 50%;
          font-size: 15px;
          color: var(--Text-2);
        }

        .ptc-notes span:first-child {
          padding-right: 16px;
          text-align: left;
        }

        .ptc-notes span:last-child {
          padding-left: 16px;
          text-align: right;
          color: var(--Text-3);
        }

        .ptc-brand {
          position: absolute;
          top: 15px;
          left: 50%;
          z-index: 20;
          transform: translate(-50%, -50%);
          width:20px;
          height:20px;
          border-radius:50%;
          border: 1px solid rgba(166, 140, 240, 0.35);
          background-color: var(--Bg-8);
          color: var(--White);
          font-size: 15px;
          font-weight: 600;
          white-space: nowrap;
          box-shadow: 0 0 15px rgba(140, 100, 233, 0.25);
        }

        /* ---- nodes ---- */
        .ptc-rows {
          position: relative;
          z-index: 10;
          display: flex;
          flex-direction: column;
          gap: 20px;
          max-width: 1120px;
          margin: 0 auto;
        }

        /* hard split on the centre line: dim always stays left of it, lit always right */
        .ptc-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0 28px;
          align-items: center;
        }

        .ptc-half {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
        }

        .ptc-half.is-left {
          justify-content: flex-end;
        }

        .ptc-half.is-right {
          justify-content: flex-start;
        }

        .ptc-node {
          position: relative;
          overflow: hidden;
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 24px;
          border-radius: 100px;
          border: 1px solid;
          font-size: 14px;
          line-height: 1.4;
          transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease;
        }

        /* Light sweep energy beam travelling through the text pill */
        .ptc-node::after {
          content: "";
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg,
              transparent 0%,
              rgba(255, 255, 255, 0.1) 20%,
              rgba(205, 170, 255, 0.85) 50%,
              rgba(255, 255, 255, 0.95) 70%,
              transparent 100%);
          pointer-events: none;
          opacity: 0;
          z-index: 2;
        }

        /* left of the divider: shaded problem state with high contrast readability */
        .ptc-node.is-dim {
          color: #d8d2f2;
          border-color: rgba(135, 110, 205, 0.45);
          background-color: rgba(26, 20, 52, 0.65);
          opacity: 0.9;
          text-align: right;
          box-shadow: none;
        }

        .ptc-node.is-dim:hover {
          opacity: 1;
          color: #ffffff;
          border-color: rgba(185, 155, 255, 0.8);
          background-color: rgba(35, 28, 68, 0.85);
        }

        .ptc-node.is-faint {
          opacity: 0.75;
          color: #c4beea;
        }

        /* right of the divider: normal readable un-highlighted state before conversion */
        .ptc-node.is-lit {
          color: #d8d2f2;
          border-color: rgba(135, 110, 205, 0.45);
          background-color: rgba(26, 20, 52, 0.65);
          box-shadow: none;
          font-weight: 400;
          opacity: 0.9;
          transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, opacity 0.5s ease, transform 0.3s ease;
        }

        /* Checkmark tick icon starts hidden & scaled down */
        .ptc-node.is-lit i {
          display: inline-block;
          opacity: 0;
          transform: scale(0);
          width: 0;
          margin-right: 0;
          overflow: hidden;
          color: #4ade80;
          font-size: 15px;
          filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.8));
          transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease, width 0.3s ease, margin-right 0.3s ease;
        }

        /* Active / Lit state once highlighted after conversion */
        .ptc-node.is-lit.is-lit-active,
        .ptc-node.is-lit.is-sweeping-right {
          color: #ffffff;
          border-color: rgba(175, 135, 255, 0.85);
          background: linear-gradient(135deg, rgba(65, 45, 135, 0.95), rgba(110, 70, 200, 0.9));
          box-shadow: 0 0 20px rgba(140, 75, 255, 0.45), inset 0 0 12px rgba(175, 135, 255, 0.25);
          font-weight: 500;
          opacity: 0.9;
        }

        /* Reveal checkmark tick icon on activation */
        .ptc-node.is-lit.is-lit-active i,
        .ptc-node.is-lit.is-sweeping-right i {
          opacity: 1;
          transform: scale(1);
          width: auto;
          margin-right: 6px;
        }

        .ptc-node.is-lit.is-lit-active:hover {
          border-color: rgba(205, 170, 255, 0.95);
          box-shadow: 0 0 32px rgba(160, 95, 255, 0.6), inset 0 0 16px rgba(190, 150, 255, 0.35);
          color: #ffffff;
        }

        /* =========================================================
           Single-Node Light Sweep Animation System
           ========================================================= */
        /* Left node sweeping state */
        /* =========================================================
           Single-Node Light Sweep Animation System
           ========================================================= */
        /* Left node sweeping state */
        .ptc-node.is-dim.is-sweeping-left {
          animation: ptc-node-left-glow 1.4s ease-in-out forwards;
        }

        .ptc-node.is-dim.is-sweeping-left::after {
          animation: ptc-beam-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .ptc-node.is-dim.is-dim-done {
          opacity: 0.85;
          color: #c4beea;
          border-color: rgba(105, 85, 175, 0.35);
        }

        /* Right node sweeping state */
        .ptc-node.is-lit.is-sweeping-right {
          animation: ptc-node-right-ignite 1.4s ease-in-out forwards;
        }

        .ptc-node.is-lit.is-sweeping-right::after {
          animation: ptc-beam-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        /* Settled glowing state */
        .ptc-node.is-lit.is-lit-active {
          animation: ptc-final-glow 3.5s ease-in-out infinite;
        }

        @keyframes ptc-beam-sweep {
          0% {
            left: -100%;
            opacity: 0;
          }

          20% {
            opacity: 1;
          }

          80% {
            opacity: 1;
          }

          100% {
            left: 200%;
            opacity: 0;
          }
        }

        @keyframes ptc-node-left-glow {
          0% {
            opacity: 0.55;
            color: rgba(200, 195, 230, 0.5);
            border-color: rgba(95, 75, 155, 0.25);
          }

          40% {
            opacity: 1;
            color: #ffffff;
            border-color: rgba(205, 170, 255, 0.9);
            box-shadow: 0 0 24px rgba(175, 120, 255, 0.6), inset 0 0 10px rgba(220, 190, 255, 0.4);
          }

          100% {
            opacity: 0.4;
            color: rgba(180, 175, 210, 0.45);
            border-color: rgba(75, 60, 125, 0.2);
            box-shadow: none;
          }
        }

        @keyframes ptc-node-right-ignite {
          0% {
            opacity: 0.45;
            transform: scale(0.98);
          }

          50% {
            opacity: 1;
            transform: scale(1.02);
            border-color: rgba(225, 190, 255, 1);
            box-shadow: 0 0 36px rgba(170, 90, 255, 0.85), inset 0 0 16px rgba(220, 180, 255, 0.5);
          }

          100% {
            opacity: 1;
            transform: scale(1);
            border-color: rgba(175, 135, 255, 0.85);
            box-shadow: 0 0 24px rgba(140, 75, 255, 0.45), inset 0 0 12px rgba(175, 135, 255, 0.25);
          }
        }

        @keyframes ptc-final-glow {

          0%,
          100% {
            filter: brightness(1);
            box-shadow: 0 0 24px rgba(140, 75, 255, 0.45), inset 0 0 12px rgba(175, 135, 255, 0.25);
          }

          50% {
            filter: brightness(1.12);
            box-shadow: 0 0 32px rgba(160, 95, 255, 0.6), inset 0 0 16px rgba(190, 150, 255, 0.35);
          }
        }

        /* staggered offsets, so rows read as a flow rather than a table */
        .ptc-row.r2 .ptc-half.is-left {
          padding-right: 40px;
        }

        .ptc-row.r2 .ptc-half.is-right {
          padding-left: 40px;
        }

        .ptc-row.r4 {
          padding-top: 12px;
        }

        .ptc-row.r4 .ptc-half.is-left {
          padding-right: 56px;
        }

        .ptc-row.r4 .ptc-half.is-right {
          padding-left: 16px;
        }

        /* ---- column headers: size to their text instead of filling the half ----
           They mirror the rows below, which converge on the centre divider. */
        .ptc-grid>div {
          display: flex;
        }

        .ptc-grid>div:first-child {
          justify-content: flex-end;
        }

        .ptc-grid>div:last-child {
          justify-content: flex-start;
        }

        .ptc-card {
          width: -moz-fit-content;
          width: fit-content;
          /* a comfortable bar, not a full-column stretch and not shrink-wrapped */
          min-width: min(100%, 400px);
          max-width: 100%;
          padding: 14px 28px;
          font-size: 15px;
          letter-spacing: 0.08em;
          text-align: center;
        }

        @media (max-width: 991.98px) {

          .ptc-grid>div:first-child,
          .ptc-grid>div:last-child {
            justify-content: center;
          }
        }

        @media (max-width: 575.98px) {
          .ptc-card {
            padding: 11px 18px;
            font-size: 13px;
          }
        }

        /* clear the centred brand badge that sits on the divider.
           Only on desktop: below 992px the badge goes static and needs no offset. */
        @media (min-width: 992px) {
          .ptc-rows {
            margin-top: 52px;
          }
        }

        /* ---- two-line nodes: headline + parenthetical detail ---- */
        .ptc-node {
          padding: 12px 22px;
          border-radius: 20px;
          align-items: center;
        }

        .ptc-node-text {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .ptc-node-text b {
          font-size: 14.5px;
          font-weight: 600;
          line-height: 1.3;
        }

        .ptc-node-text em {
          font-style: normal;
          font-size: 12.5px;
          line-height: 1.3;
          opacity: 0.7;
        }

        .ptc-half.is-left .ptc-node-text {
          text-align: right;
        }

        .ptc-half.is-right .ptc-node-text {
          text-align: left;
        }

        .ptc-node.is-lit i {
          flex: 0 0 auto;
          align-self: center;
        }

        .ptc-source {
          color: var(--White);
          text-decoration: underline;
          text-underline-offset: 3px;
          text-decoration-color: rgba(166, 140, 240, 0.6);
          transition: color 0.3s ease, text-decoration-color 0.3s ease;
        }

        .ptc-source:hover {
          color: #c9b3ff;
          text-decoration-color: #c9b3ff;
        }

        @media (max-width: 767.98px) {

          .ptc-half.is-left .ptc-node-text,
          .ptc-half.is-right .ptc-node-text {
            text-align: left;
          }
        }

        @media (max-width: 1199.98px) {
          .ptc-rows {
            max-width: 100%;
          }

          .ptc-row {
            gap: 0 16px;
          }

          .ptc-row.r2 .ptc-half.is-left,
          .ptc-row.r2 .ptc-half.is-right,
          .ptc-row.r4 .ptc-half.is-left,
          .ptc-row.r4 .ptc-half.is-right {
            padding: 0;
          }
        }

        @media (max-width: 991.98px) {
          .ptc-grid {
            grid-template-columns: 1fr;
            gap: 28px;
          }

          .ptc-compare {
            margin-top: 44px;
            padding: 0 0 64px;
          }

          .ptc-line,
          .ptc-glow {
            display: none;
          }

          .ptc-beam {
            height: 320px;
          }

          .ptc-notes {
            flex-direction: column;
            gap: 8px;
            margin-bottom: 24px;
          }

          .ptc-notes span {
            width: 100%;
            padding: 0;
            text-align: left;
          }

          .ptc-notes span:last-child {
            text-align: left;
          }

          .ptc-brand {
            position: static;
            display: block;
            width: max-content;
            margin: 0 auto 28px;
            transform: none;
          }

          .ptc-row,
          .ptc-row.r4 {
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 0;
          }

          .ptc-half,
          .ptc-half.is-left,
          .ptc-half.is-right {
            flex-direction: column;
            justify-content: flex-start;
            gap: 10px;
          }

          .ptc-node {
            width: 100%;
            justify-content: center;
            text-align: center;
          }

          .ptc-node.is-dim {
            text-align: center;
          }
        }

        @media (max-width: 575.98px) {
          .ptc-card {
            padding: 20px 22px;
            font-size: 16px;
          }

          .ptc-node {
            padding: 11px 18px;
            font-size: 13px;
          }
        }


        /* ============================================================
           MOBILE: left-side rail with branching Problem/Solution pills
           ============================================================ */
        @media (max-width: 991.98px) {

          .ptc-line,
          .ptc-glow,
          .ptc-beam {
            display: none !important;
          }

          .ptc-compare::before,
          .ptc-compare::after {
            display: none;
          }

          .ptc-compare {
            padding: 0 clamp(12px, 4vw, 48px) 40px;
            text-align: left;
          }

          .ptc-notes {
            margin-bottom: 20px;
          }

          .ptc-brand {
            position: static;
            display: inline-block;
            width: auto;
            margin: 0 0 14px 42px;
            transform: translateX(-50%);
            padding: 8px 16px;
            font-size: 13px;
          }

          .ptc-rows {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 34px;
            max-width: 100%;
            margin: 0;
            padding: 0 0 0 62px;
            align-items: stretch;
            text-align: left;
          }

          /* the vertical rail itself */
          .ptc-rows::before {
            content: '';
            position: absolute;
            top: -14px;
            bottom: 6px;
            left: 42px;
            width: 2px;
            border-radius: 2px;
            background-image: linear-gradient(180deg,
                rgba(160, 90, 255, 0.95) 0%,
                rgba(130, 60, 255, 0.6) 55%,
                rgba(74, 222, 128, 0.45) 100%);
            box-shadow: 0 0 10px rgba(150, 70, 255, 0.55);
            pointer-events: none;
          }

          .ptc-row,
          .ptc-row.r2,
          .ptc-row.r3,
          .ptc-row.r4 {
            display: flex;
            flex-direction: column;
            grid-template-columns: none;
            align-items: stretch;
            gap: 10px;
            padding: 0;
          }

          .ptc-row.r2 .ptc-half.is-left,
          .ptc-row.r2 .ptc-half.is-right,
          .ptc-row.r4 .ptc-half.is-left,
          .ptc-row.r4 .ptc-half.is-right {
            padding: 0;
          }

          .ptc-half,
          .ptc-half.is-left,
          .ptc-half.is-right {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            align-self: stretch;
            justify-content: flex-start;
            gap: 0;
            flex-wrap: nowrap;
            width: 100%;
          }

          /* tiny Problem / Solution caption above each pill */
          .ptc-half::before {
            display: block;
            margin-bottom: 6px;
            font-size: 9.5px;
            font-weight: 600;
            letter-spacing: 0.09em;
            line-height: 1;
          }

          .ptc-half.is-left::before {
            content: 'Problem';
            color: rgba(178, 168, 214, 0.75);
          }

          .ptc-half.is-right::before {
            content: 'Solution';
            color: rgba(190, 160, 255, 0.95);
          }

          .ptc-node,
          .ptc-node.is-dim,
          .ptc-node.is-lit {
            position: relative;
            overflow: visible;
            width: 100%;
            justify-content: flex-start;
            align-items: center;
            text-align: left;
            white-space: normal;
            padding: 11px 18px;
            font-size: 13px;
            line-height: 1.45;
            border-radius: 22px;
          }

          /* connector stub from the rail to each pill */
          .ptc-node::before {
            content: '';
            position: absolute;
            right: 100%;
            top: 50%;
            width: 20px;
            height: 1px;
            background-image: linear-gradient(90deg,
                rgba(166, 140, 240, 0.15) 0%,
                rgba(166, 140, 240, 0.7) 100%);
            pointer-events: none;
          }

          .ptc-node.is-lit::before {
            background-image: linear-gradient(90deg,
                rgba(120, 90, 230, 0.2) 0%,
                rgba(74, 222, 128, 0.65) 100%);
          }

          .ptc-node::after,
          .ptc-node.is-dim.is-sweeping-left::after,
          .ptc-node.is-lit.is-sweeping-right::after {
            display: none !important;
          }

          .ptc-node.is-lit i {
            align-self: flex-start;
            margin-top: 2px;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          .ptc-node {
            transition: none;
          }
        }

        .dashboard-showcase-section {
          position: relative;
          overflow: hidden;
          padding: 0px 0 96px;
        }

        .dashboard-showcase-section::before {
          position: absolute;
          inset: 12% 8% auto;
          height: 55%;
          content: "";
          pointer-events: none;
          opacity: 0.4;
          filter: blur(70px);
          background: radial-gradient(ellipse at center, rgba(116, 59, 255, 0.28), transparent 70%);
        }

        .dashboard-showcase-copy {
          position: relative;
          z-index: 1;
          max-width: 760px;
          margin: 0 auto 32px;
        }

        .dashboard-showcase-frame {
          position: relative;
          z-index: 1;
          overflow: hidden;
          border: 1px solid rgba(166, 140, 240, 0.34);
          border-radius: 14px;
          background-color: #08101f;
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38), 0 0 45px rgba(116, 59, 255, 0.12);
        }

        .dashboard-showcase-frame::after {
          position: absolute;
          inset: 0;
          content: "";
          pointer-events: none;
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: inherit;
        }

        .dashboard-showcase-image {
          display: block;
          width: 100%;
          height: auto;
        }

        @media (max-width: 767px) {
          .dashboard-showcase-section {
            padding: 42px 0 56px;
          }

          .dashboard-showcase-copy {
            margin-bottom: 22px;
          }

          .dashboard-showcase-frame {
            border-radius: 9px;
          }
        }

        /* Category tabs: horizontal scroller that stays reachable on small screens */
        .category-section {
          --cat-inset: 25px;
        }

        .category-tabs {
          /* fallback first: if "safe" is unsupported the whole line is dropped.
         plain "center" makes the overflowing left edge unscrollable */
          justify-content: flex-start !important;
          justify-content: safe center !important;
          width: auto !important;
          margin-inline: calc(var(--cat-inset) * -1) !important;
          padding: 8px var(--cat-inset) 10px !important;
          scroll-padding-inline: var(--cat-inset);
          scroll-snap-type: x proximity;
          overscroll-behavior-x: contain;
          -webkit-overflow-scrolling: touch;
        }

        .category-tab {
          scroll-snap-align: center;
          font-family: "Inter", sans-serif !important;
        }

        @media (max-width: 767.98px) {
          .category-section {
            --cat-inset: 16px;
            padding-left: var(--cat-inset);
            padding-right: var(--cat-inset);
          }

          .category-tab {
            min-height: 0 !important;
            padding: 0.6rem 0.95rem !important;
            font-size: 12.5px !important;
          }

          /* the -2px lift would be clipped by the scroller's overflow box */
          .category-tab:hover,
          .category-tab.is-selected {
            transform: none !important;
          }
        }

        /* Integration cards: theme pricing spacing (47px + 38px margins) is built
       for a price + 6 bullets, far too tall for a title and 2 bullets */
        /* ============ integrations rail (horizontal carousel) ============ */
        .stack-rail {
          position: relative;
          display: flex;
          align-items: center;
          gap: 12px;
          /* break out of the container so the rail runs wider than the copy above it */
          width: min(calc(100vw - 48px), 1560px);
          max-width: none;
          margin-left: 50%;
          transform: translateX(-50%);
        }

        .stack-track {
          display: flex;
          gap: 14px;
          flex: 1 1 auto;
          min-width: 0;
          margin: 0;
          padding: 4px 2px;
          list-style: none;
          overflow-x: auto;
          scroll-behavior: smooth;
          scroll-snap-type: x proximity;
          scrollbar-width: none;
          -ms-overflow-style: none;
        }

        .stack-track::-webkit-scrollbar {
          display: none;
        }

        .stack-chip {
          flex: 0 0 auto;
          scroll-snap-align: start;
          display: flex;
          align-items: center;
          gap: 12px;
          width: clamp(250px, 20vw, 300px);
          padding: 14px 16px;
          border-radius: 14px;
          border: 1px solid rgba(135, 110, 205, 0.28);
          background: linear-gradient(135deg, rgba(26, 20, 52, 0.85), rgba(14, 10, 32, 0.85));
          transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
        }

        .stack-chip:hover {
          transform: translateY(-3px);
          border-color: rgba(185, 155, 255, 0.7);
          box-shadow: 0 10px 26px rgba(101, 64, 255, 0.22);
        }

        .stack-chip-icon {
          flex: 0 0 auto;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 42px;
          height: 42px;
          border-radius: 11px;
          border: 1px solid rgba(166, 140, 240, 0.32);
          background: rgba(10, 6, 26, 0.75);
          color: #c9b3ff;
          font-size: 19px;
        }

        .stack-chip-copy {
          display: flex;
          flex-direction: column;
          gap: 3px;
          min-width: 0;
        }

        .stack-chip-copy strong {
          color: #ffffff;
          font-size: 15px;
          font-weight: 600;
          line-height: 1.25;
        }

        .stack-chip-copy span {
          color: rgba(255, 255, 255, 0.62);
          font-size: 12.5px;
          line-height: 1.35;
        }

        .stack-arrow {
          flex: 0 0 auto;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          padding: 0;
          border-radius: 50%;
          border: 1px solid rgba(166, 140, 240, 0.4);
          background: rgba(14, 10, 32, 0.9);
          color: #ffffff;
          font-size: 17px;
          cursor: pointer;
          transition: background .3s ease, border-color .3s ease, opacity .3s ease;
        }

        .stack-arrow:hover:not(:disabled) {
          background: linear-gradient(135deg, #6540ff, #c64eea);
          border-color: transparent;
        }

        .stack-arrow:disabled {
          opacity: 0.3;
          cursor: default;
        }

        @media (max-width: 1199.98px) {
          .stack-rail {
            width: min(calc(100vw - 32px), 100vw);
          }
        }

        @media (max-width: 767.98px) {
          .stack-rail {
            gap: 8px;
          }

          /* a partial next card peeking in signals the rail is swipeable */
          .stack-chip {
            width: min(74vw, 272px);
          }

          .stack-arrow {
            width: 34px;
            height: 34px;
            font-size: 15px;
          }
        }

        @media (max-width: 479.98px) {
          .stack-rail {
            gap: 6px;
          }

          .stack-chip {
            width: min(80vw, 250px);
            gap: 10px;
            padding: 12px 13px;
          }

          .stack-chip-icon {
            width: 38px;
            height: 38px;
            font-size: 17px;
          }

          .stack-arrow {
            width: 30px;
            height: 30px;
            font-size: 13px;
          }
        }

        /* ---- category panel: align with the rest of the page ---- */
        .category-tab,
        .category-copy h2,
        .category-link {
          /* font-family: "Inter", sans-serif; */
          font-weight: 300;
        }

        /* the panel copy read small against the diagram beside it */
        .category-kicker {
          font-size: 10px;
          letter-spacing: 0.18em;
        }

        .category-copy h2 {
          font-size: clamp(1.6rem, 2.2vw, 2.1rem);
          line-height: 1.32;
        }

        .category-link {
          font-size: 1.18rem;
        }

        /* The section carries .impact, and custom.css centres every <p> inside*/
        .impact .category-copy,
        .impact .category-copy p,
        .impact .category-copy .category-kicker,
        .impact .category-copy h2,
        .impact .category-copy .category-link {
          text-align: left;
        }
        
        /* =========================================================
   AI AGENT CATEGORY SECTION
   - Layout
   - Tabs
   - Content panel
   - Directional slide transition
   - Responsive behavior
   - Reduced-motion accessibility
   ========================================================= */

.category-section {
  padding: 35px 25px 45px;
  background: var(--ink);
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 20px;
  padding: 4px;
}

.category-tabs::-webkit-scrollbar {
  display: none;
}

.category-tab {
  flex: 0 1 auto;
  min-width: max-content;
  padding: 11px 24px;
  border: 1.5px solid rgba(120, 95, 200, 0.5);
  border-radius: 100px;
  color: #fff;
  background: rgba(18, 22, 42, 0.95);
  font: 600 14px/1.3 "Plus Jakarta Sans", sans-serif;
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.category-tab:hover {
  color: #fff;
  border-color: rgba(175, 135, 255, 0.8);
  background: rgba(30, 36, 68, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(116, 59, 255, 0.25);
}

.category-tab.is-selected {
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(85, 45, 210, 0.95),
    rgba(150, 65, 230, 0.95)
  );
  border-color: #c8a2ff;
  box-shadow:
    0 6px 24px rgba(130, 60, 255, 0.45),
    0 0 15px rgba(200, 160, 255, 0.3);
  transform: translateY(-2px);
}

.category-panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: stretch;
  height: 470px;
  min-height: 470px;
  max-height: 470px;
  margin: 0;
  overflow: hidden;
  border: 1.5px solid rgba(140, 90, 240, 0.45);
  border-radius: 20px;
  background: #081820;
  box-shadow:
    0 16px 50px rgba(0, 0, 0, 0.65),
    0 0 25px rgba(116, 59, 255, 0.15);
}

.category-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: 52rem;
  padding: 3rem 3.5rem;
}

.category-kicker {
  margin: 0 0 1rem;
  color: #d98cff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.category-copy h2 {
  margin: 0;
  color: #fff;
  font: 400 clamp(1.4rem, 2vw, 1.9rem)/1.3 "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.02em;
}

.category-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2rem;
  color: #fff;
  font: 700 1.1rem/1 "Plus Jakarta Sans", sans-serif;
  text-decoration: none;
}

.category-link span {
  display: inline-block;
  font-size: 1.2em;
  transition: transform 0.25s ease;
}

.category-link:hover span {
  transform: translateX(0.35rem);
}

/* The visual fills its half of the panel edge to edge. Its background is
   the same near-black the sec5 diagrams are exported on (#000112), so the
   contain letterbox is invisible and the artwork reads as full-bleed while
   nothing gets cropped. */
.category-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: #000112;
  border-left: 1px solid rgba(140, 90, 240, 0.22);
  border-radius: 0 18px 18px 0;
}

.category-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0 18px 18px 0;
  box-shadow: none;
  mix-blend-mode: normal !important;
  filter: none !important;
  will-change: transform, opacity;
}


/* =========================================================
   PAGE-LEVEL CATEGORY COMPACT OVERRIDES
   Kept separate so shared category styles remain reusable.
   ========================================================= */

.category-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  align-items: stretch !important;
  margin-bottom: 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.category-tabs::-webkit-scrollbar {
  display: none !important;
}

.category-tab {
  flex: 1 0 auto !important;
  min-width: max-content !important;
  min-height: 3.2rem !important;
  padding: 0.65rem 0.85rem !important;
  border-radius: 1.1rem !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.category-tab.is-selected {
  bottom: -1px !important;
}

.category-panel,
.category-visual {
  min-height: 29.5rem !important;
}

@media (max-width: 767px) {
  .s-pricing,
  .pricing-sec-new,
  .capabilities-section,
  .category-section,
  .workflow-shell {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .s-heading .s-title,
  .s-heading.style-2 .s-title {
    font-size: 24px !important;
  }
}

/* =========================================================
   CATEGORY SLIDE TRANSITION
   Content enters from LEFT (-45px -> 0).
   Image enters from RIGHT (45px -> 0).
   Total Duration: 900ms
   - Exit: 420ms cubic-bezier(0.4, 0, 0.6, 1)
   - Enter: 650ms cubic-bezier(0.22, 1, 0.36, 1)
   ========================================================= */

.category-copy,
.category-visual {
  will-change: transform, opacity;
}

.category-copy.slide-content-out {
  animation: categoryContentOut 420ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.category-visual.slide-image-out {
  animation: categoryImageOut 420ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.category-copy.slide-content-in {
  animation: categoryContentIn 650ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.category-visual.slide-image-in {
  animation: categoryImageIn 650ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes categoryContentOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(-32px, 0, 0);
  }
}

@keyframes categoryImageOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(-32px, 0, 0);
  }
}

@keyframes categoryContentIn {
  from {
    opacity: 0;
    transform: translate3d(-45px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes categoryImageIn {
  from {
    opacity: 0;
    transform: translate3d(45px, 0, 0) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}


/* =========================================================
   CATEGORY RESPONSIVE STYLES
   ========================================================= */

@media (max-width: 991px) {
  .category-panel {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto !important;
    max-height: none;
  }

  .category-copy {
    padding: 2rem;
  }

  /* stacked: the divider moves to the top edge and the corners follow suit */
  .category-visual {
    min-height: 24rem !important;
    padding: 0;
    border-left: 0;
    border-top: 1px solid rgba(140, 90, 240, 0.22);
    border-radius: 0 0 18px 18px;
  }

  .category-visual img {
    border-radius: 0 0 18px 18px;
  }
}

@media (max-width: 767.98px) {
  .category-copy.slide-content-in,
  .category-visual.slide-image-in {
    animation-duration: 450ms;
  }

  @keyframes categoryContentIn {
    from {
      opacity: 0;
      transform: translate3d(-40px, 0, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes categoryImageIn {
    from {
      opacity: 0;
      transform: translate3d(40px, 0, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}

@media (max-width: 575.98px) {
  .category-section {
    padding: 2rem 0.85rem 4rem;
  }

  .category-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
  }

  .category-tab {
    min-height: 5.5rem;
    padding: 1rem;
    border-radius: 1rem;
  }

  .category-panel {
    min-height: 34rem !important;
    margin: 1rem 0 0;
    border-radius: 1.4rem;
  }

  .category-copy {
    padding: 2rem 1.35rem 1.25rem;
  }

  .category-visual {
    min-height: 17rem !important;
    padding: 0;
    border-radius: 0 0 1.3rem 1.3rem;
  }

  .category-visual img {
    border-radius: 0 0 1.3rem 1.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-copy,
  .category-visual {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .category-tab {
    transition: none;
  }
}