<section data-component-type="Pricing" class="pricing-section">
  <style>
    .pricing-section {
      width: 100%;
      padding: 100px 100px;
      background: #ffffff;
    }

    .pricing-grid {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      align-items: stretch;
    }

    .pricing-card {
      border: 1px solid #dcdcdc;
      border-radius: 16px;
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: #ffffff;
      position: relative;
    }

    .pricing-card.featured {
      background: #000000;
      color: #ffffff;
      padding-top: 60px;
    }

    .popular-badge {
      background: #bfbfbf;
      color: #000;
      text-align: center;
      font-size: 20px;
      padding: 10px 0;
      border-radius: 12px;
      position: absolute;
      top: -35px;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
    }

    .plan-title {
      font-size: 20px;
      margin-bottom: 12px;
    }
    .plan-price {
      font-size: 40px;
      margin-bottom: 8px;
    }
    .plan-note {
      font-size: 16px;
      color: #7e7e7e;
      margin-bottom: 20px;
    }
    .pricing-card.featured .plan-note {
      color: #bfbfbf;
    }

    .plan-btn {
      width: 100%;
      height: 60px;
      border-radius: 12px;
      background: #010609;
      color: #ffffff;
      font-size: 20px;
      border: none;
      cursor: pointer;
      margin-bottom: 28px;
    }

    .pricing-card.featured .plan-btn {
      background: #ffffff;
      color: #000000;
    }

    .features-title {
      font-size: 20px;
      margin-bottom: 20px;
    }

    .features-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .feature-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 20px;
    }

    .feature-item img {
      width: 20px;
      height: 20px;
    }
    .feature-item.not-included span {
      color: #7e7e7e;
    }

    @media (max-width: 1024px) {
      .pricing-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 1024px) {
      .pricing-section {
        padding: 80px 40px;
      }

      .pricing-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .pricing-card {
        padding: 32px 24px;
      }

      .popular-badge {
        top: -28px;
        font-size: 18px;
        padding: 8px 0;
      }

      .plan-price {
        font-size: 36px;
      }

      .feature-item {
        font-size: 18px;
      }
    }

    @media (max-width: 768px) {
      .pricing-section {
        padding: 60px 20px;
      }

      .pricing-card {
        border-radius: 14px;
        padding: 28px 20px;
      }

      .popular-badge {
        font-size: 16px;
        padding: 12px 0;
        border-radius: 10px;
        margin-top: 10px;
      }

      .plan-title {
        font-size: 18px;
      }

      .plan-price {
        font-size: 32px;
      }

      .plan-note {
        font-size: 14px;
      }

      .plan-btn {
        height: 54px;
        font-size: 18px;
      }

      .features-title {
        font-size: 18px;
      }

      .feature-item {
        font-size: 16px;
        gap: 10px;
      }

      .feature-item img {
        width: 18px;
        height: 18px;
      }
    }

    @media (max-width: 480px) {
      .pricing-section {
        padding: 0px 16px;
      }

      .pricing-card {
        padding: 24px 16px;
      }

      .plan-price {
        font-size: 28px;
      }

      .plan-btn {
        height: 50px;
        font-size: 16px;
      }

      .feature-item {
        font-size: 15px;
      }
    }
  </style>

  <div class="pricing-grid">
    <div class="pricing-card">
      <h4
        class="plan-title"
        data-node="plan_1_title"
        data-node-type="text"
        data-node-default="Street Starter"
      >
        {{plan_1_title}}
      </h4>

      <div
        class="plan-price"
        data-node="plan_1_price"
        data-node-type="text"
        data-node-default="$120/m"
      >
        {{plan_1_price}}
      </div>

      <p
        class="plan-note"
        data-node="plan_1_note"
        data-node-type="text"
        data-node-default="Pause or cancel anytime"
      >
        {{plan_1_note}}
      </p>

      <button
        class="plan-btn"
        data-node="plan_1_cta"
        data-node-type="text"
        data-node-default="Get Started"
      >
        {{plan_1_cta}}
      </button>

      <div
        class="features-title"
        data-node="plan_1_features_title"
        data-node-type="text"
        data-node-default="What’s included:"
      >
        {{plan_1_features_title}}
      </div>

      <div class="features-list">
        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_1_feature_1"
            data-node-type="text"
            data-node-default="Drop Alerts First"
            >{{plan_1_feature_1}}</span
          >
        </div>

        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_1_feature_2"
            data-node-type="text"
            data-node-default="Exclusive Member Deals"
            >{{plan_1_feature_2}}</span
          >
        </div>

        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_1_feature_3"
            data-node-type="text"
            data-node-default="Earn Bonus Points"
            >{{plan_1_feature_3}}</span
          >
        </div>

        <div class="feature-item not-included">
          <img
            src="{{exclude_icon}}"
            data-node="exclude_icon"
            data-node-type="file"
            data-node-default="./assets/not included.svg"
          />
          <span
            data-node="plan_1_feature_4"
            data-node-type="text"
            data-node-default="Priority Style Support"
            >{{plan_1_feature_4}}</span
          >
        </div>

        <div class="feature-item not-included">
          <img
            src="{{exclude_icon}}"
            data-node="exclude_icon"
            data-node-type="file"
            data-node-default="./assets/not included.svg"
          />
          <span
            data-node="plan_1_feature_5"
            data-node-type="text"
            data-node-default="Preview Limited Drops"
            >{{plan_1_feature_5}}</span
          >
        </div>

        <div class="feature-item not-included">
          <img
            src="{{exclude_icon}}"
            data-node="exclude_icon"
            data-node-type="file"
            data-node-default="./assets/not included.svg"
          />
          <span
            data-node="plan_1_feature_6"
            data-node-type="text"
            data-node-default="VIP Store Entry"
            >{{plan_1_feature_6}}</span
          >
        </div>
      </div>
    </div>

    <div class="pricing-card featured">
      <div
        class="popular-badge"
        data-node="plan_2_badge"
        data-node-type="text"
        data-node-default="Most Popular"
      >
        {{plan_2_badge}}
      </div>

      <h4
        class="plan-title"
        data-node="plan_2_title"
        data-node-type="text"
        data-node-default="Street Prime"
      >
        {{plan_2_title}}
      </h4>

      <div
        class="plan-price"
        data-node="plan_2_price"
        data-node-type="text"
        data-node-default="$250/m"
      >
        {{plan_2_price}}
      </div>

      <p
        class="plan-note"
        data-node="plan_2_note"
        data-node-type="text"
        data-node-default="Pause or cancel anytime"
      >
        {{plan_2_note}}
      </p>

      <button
        class="plan-btn"
        data-node="plan_2_cta"
        data-node-type="text"
        data-node-default="Get Started"
      >
        {{plan_2_cta}}
      </button>

      <div
        class="features-title"
        data-node="plan_2_features_title"
        data-node-type="text"
        data-node-default="What’s included:"
      >
        {{plan_2_features_title}}
      </div>

      <div class="features-list">
        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_2_feature_1"
            data-node-type="text"
            data-node-default="Drop Alerts First"
            >{{plan_2_feature_1}}</span
          >
        </div>

        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_2_feature_2"
            data-node-type="text"
            data-node-default="Exclusive Member Deals"
            >{{plan_2_feature_2}}</span
          >
        </div>

        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_2_feature_3"
            data-node-type="text"
            data-node-default="Earn Bonus Points"
            >{{plan_2_feature_3}}</span
          >
        </div>

        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_2_feature_4"
            data-node-type="text"
            data-node-default="Priority Style Support"
            >{{plan_2_feature_4}}</span
          >
        </div>

        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_2_feature_5"
            data-node-type="text"
            data-node-default="Preview Limited Drops"
            >{{plan_2_feature_5}}</span
          >
        </div>

        <div class="feature-item not-included">
          <img
            src="{{exclude_icon}}"
            data-node="exclude_icon"
            data-node-type="file"
            data-node-default="./assets/not included.svg"
          />
          <span
            data-node="plan_2_feature_6"
            data-node-type="text"
            data-node-default="VIP Store Entry"
            >{{plan_2_feature_6}}</span
          >
        </div>
      </div>
    </div>

    <div class="pricing-card">
      <h4
        class="plan-title"
        data-node="plan_3_title"
        data-node-type="text"
        data-node-default="Urban Legend"
      >
        {{plan_3_title}}
      </h4>

      <div
        class="plan-price"
        data-node="plan_3_price"
        data-node-type="text"
        data-node-default="$550/m"
      >
        {{plan_3_price}}
      </div>

      <p
        class="plan-note"
        data-node="plan_3_note"
        data-node-type="text"
        data-node-default="Pause or cancel anytime"
      >
        {{plan_3_note}}
      </p>

      <button
        class="plan-btn"
        data-node="plan_3_cta"
        data-node-type="text"
        data-node-default="Get Started"
      >
        {{plan_3_cta}}
      </button>

      <div
        class="features-title"
        data-node="plan_3_features_title"
        data-node-type="text"
        data-node-default="What’s included:"
      >
        {{plan_3_features_title}}
      </div>

      <div class="features-list">
        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_3_feature_1"
            data-node-type="text"
            data-node-default="Drop Alerts First"
            >{{plan_3_feature_1}}</span
          >
        </div>

        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_3_feature_2"
            data-node-type="text"
            data-node-default="Exclusive Member Deals"
            >{{plan_3_feature_2}}</span
          >
        </div>

        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_3_feature_3"
            data-node-type="text"
            data-node-default="Earn Bonus Points"
            >{{plan_3_feature_3}}</span
          >
        </div>

        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_3_feature_4"
            data-node-type="text"
            data-node-default="Priority Style Support"
            >{{plan_3_feature_4}}</span
          >
        </div>

        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_3_feature_5"
            data-node-type="text"
            data-node-default="Preview Limited Drops"
            >{{plan_3_feature_5}}</span
          >
        </div>

        <div class="feature-item">
          <img
            src="{{include_icon}}"
            data-node="include_icon"
            data-node-type="file"
            data-node-default="./assets/Included.svg"
          />
          <span
            data-node="plan_3_feature_6"
            data-node-type="text"
            data-node-default="VIP Store Entry"
            >{{plan_3_feature_6}}</span
          >
        </div>
      </div>
    </div>
  </div>
</section>
