/* --- v3 custom refinements --- */
      .logo-mark {
        width: 30px;
        height: 30px;
        object-fit: contain;
        filter: none;
        display: block;
      }
      .nav__logo {
        gap: 12px;
      }
      #pain .sec-head {
        position: relative;
        z-index: 3;
        background: transparent;
        padding-bottom: 16px;
      }
      #pain .sec-head .sec-desc {
        margin-bottom: 8px;
      }
      .pain-roller-wrap {
        max-width: 860px;
        margin: 12px auto 0;
        display: flex;
        justify-content: center;
      }
      .pain-board {
        width: 100%;
        padding: 12px 0 6px;
        position: relative;
      }
      .pain-board__viewport {
        position: relative;
        height: 198px;
        overflow: hidden;
        border-radius: 28px;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.96),
          rgba(245, 248, 255, 0.98)
        );
        box-shadow:
          0 16px 42px rgba(12, 30, 69, 0.1),
          inset 0 0 0 1px rgba(43, 126, 245, 0.12);
      }
      .pain-board__viewport::before,
      .pain-board__viewport::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 62px;
        z-index: 2;
        pointer-events: none;
      }
      .pain-board__viewport::before {
        top: 0;
        background: linear-gradient(
          180deg,
          rgba(245, 248, 255, 0.98) 5%,
          rgba(245, 248, 255, 0.72) 46%,
          rgba(245, 248, 255, 0) 100%
        );
      }
      .pain-board__viewport::after {
        bottom: 0;
        background: linear-gradient(
          0deg,
          rgba(245, 248, 255, 0.98) 5%,
          rgba(245, 248, 255, 0.72) 46%,
          rgba(245, 248, 255, 0) 100%
        );
      }
      .pain-board__focus {
        position: absolute;
        left: 18px;
        right: 18px;
        top: 50%;
        height: 66px;
        transform: translateY(-50%);
        border-radius: 20px;
        border: 1.5px solid rgba(43, 126, 245, 0.42);
        background: linear-gradient(
          180deg,
          rgba(126, 184, 255, 0.18),
          rgba(126, 184, 255, 0.1)
        );
        box-shadow:
          0 10px 28px rgba(43, 126, 245, 0.1),
          inset 0 0 0 1px rgba(255, 255, 255, 0.32);
        z-index: 1;
        pointer-events: none;
      }
      .pain-track {
        position: relative;
        z-index: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        will-change: transform;
        transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
      }
      .pain-item {
        height: 66px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 42px;
        font-size: 24px;
        font-weight: 800;
        line-height: 1.35;
        letter-spacing: -0.6px;
        color: rgba(10, 22, 40, 0.24);
        text-align: center;
        flex-shrink: 0;
        transition:
          opacity 0.45s ease,
          color 0.45s ease,
          transform 0.45s ease,
          filter 0.45s ease;
        transform: scale(0.94);
        filter: blur(0.2px);
      }
      .pain-item.is-near {
        color: rgba(10, 22, 40, 0.5);
        transform: scale(0.975);
        filter: none;
      }
      .pain-item.is-active {
        color: var(--text-dark);
        transform: scale(1);
        filter: none;
      }
      @media (max-width: 640px) {
        #pain .sec-head {
          padding-bottom: 12px;
        }
        #pain .sec-head .sec-desc {
          margin-bottom: 8px;
        }
        .pain-roller-wrap {
          margin-top: 8px;
        }
        .pain-board__viewport {
          height: 174px;
          border-radius: 22px;
        }
        .pain-board__focus {
          left: 12px;
          right: 12px;
          height: 58px;
          border-radius: 18px;
        }
        .pain-item {
          height: 58px;
          font-size: 18px;
          padding: 0 18px;
          letter-spacing: -0.3px;
        }
      }

      /* Demo Banner Tone */
      #demo {
        position: relative;
        overflow: hidden;
        background: linear-gradient(
          90deg,
          #e7f1f5 0%,
          #d4e3ed 26%,
          #bfd4e8 52%,
          #c9dcec 78%,
          #dae8f2 100%
        );
      }
      #demo::before,
      #demo::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }
      #demo::before {
        inset: -24% -8% auto auto;
        width: 66vw;
        height: 66vw;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(120, 171, 235, 0.34) 0%,
          rgba(120, 171, 235, 0.16) 34%,
          rgba(120, 171, 235, 0) 70%
        );
      }
      #demo::after {
        inset: auto -12% -32% auto;
        width: 62vw;
        height: 62vw;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.42) 0%,
          rgba(255, 255, 255, 0.2) 36%,
          rgba(255, 255, 255, 0) 72%
        );
      }
      #demo .wrap {
        position: relative;
        z-index: 1;
      }
      #demo .sec-title.white {
        color: #14243b;
      }
      #demo .eyebrow.teal {
        color: #2f6fbf;
      }
      .demo-cta.demo-cta--control {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px 22px 20px;
      }
      .demo-progress-wrap {
        flex: 1;
        min-width: 0;
        margin-bottom: 0;
      }
      .demo-progress {
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
        height: 6px;
        border-radius: 999px;
        background: linear-gradient(
          90deg,
          var(--accent) 0%,
          var(--accent) var(--progress, 0%),
          #dce8f8 var(--progress, 0%),
          #dce8f8 100%
        );
        outline: none;
        cursor: pointer;
      }
      .demo-progress::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--accent);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      }
      .demo-progress::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--accent);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      }
      .demo-progress::-moz-range-track {
        height: 6px;
        border-radius: 999px;
        background: transparent;
      }
      .demo-progress__time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
        font-size: 12px;
        color: #6a7f9d;
      }
      .demo-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(243, 248, 255, 0.46);
        backdrop-filter: blur(1px);
        z-index: 8;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.28s ease,
          visibility 0.28s ease;
      }
      .chat-win.is-idle .demo-overlay {
        opacity: 1;
        visibility: visible;
      }
      .demo-overlay__btn {
        width: 108px;
        height: 108px;
        border-radius: 50%;
        border: 1.5px solid #c6daf6;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 16px 34px rgba(32, 86, 161, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition:
          transform 0.2s ease,
          background 0.2s ease,
          border-color 0.2s ease;
      }
      .demo-overlay__btn:hover {
        transform: scale(1.04);
        background: #ffffff;
        border-color: #9ec2f2;
      }
      .demo-overlay__btn svg {
        width: 40px;
        height: 40px;
        color: #2b7ef5;
        margin-left: 4px;
      }