<section data-component-type="Content" class="w-full py-[100px] px-[24px] lg:py-20 lg:px-10 md:py-[60px] md:px-5 sm:py-0 sm:px-4 bg-white" data-component-slug="clothing-template-pricing">
  <div class="max-w-[90%] mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-7 items-stretch">
    <!-- Plan 1 -->
    <div class="border border-[#dcdcdc] rounded-2xl md:rounded-[14px] p-8 md:p-7 sm:p-6 flex flex-col justify-between bg-white relative">
      <h4 class="text-xl md:text-lg mb-3" data-node="plan_1_title" data-node-type="text" data-node-default="Street Starter">
        {{plan_1_title}}
      </h4>
      <div class="text-[40px] lg:text-[36px] md:texa-[32px] sm:text-[28px] mb-2" data-node="plan_1_price" data-node-type="text" data-node-default="$120/m">
        {{plan_1_price}}
      </div>
      <p class="text-base md:text-sm text-[#7e7e7e] mb-5" data-node="plan_1_note" data-node-type="text" data-node-default="Pause or cancel anytime">
        {{plan_1_note}}
      </p>
      <a class="w-full h-[60px] md:h-[54px] sm:h-[50px] rounded-xl bg-[#010609] text-white text-xl md:text-lg sm:text-base border-none cursor-pointer mb-7" data-node="plan_1_cta_url" data-node-type="text" data-node-default="#" data-node-label="Plan 1 CTA URL" href="{{plan_1_cta_url}}">
        <span data-node="plan_1_cta" data-node-type="text" data-node-default="Get Started" data-node-label="Plan 1 CTA">{{plan_1_cta}}</span>
      </a>
      <div class="text-xl md:text-lg mb-5" data-node="plan_1_features_title" data-node-type="text" data-node-default="What's included:">
        {{plan_1_features_title}}
      </div>
      <div class="flex flex-col gap-3.5">
        <div class="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_1_feature_1_icon}}" data-node="plan_1_feature_1_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_1_feature_2_icon}}" data-node="plan_1_feature_2_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_1_feature_3_icon}}" data-node="plan_1_feature_3_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base text-[#7e7e7e]">
          <img src="{{plan_1_feature_4_icon}}" data-node="plan_1_feature_4_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766994433/seltrix/templates/clothing-template/not%20included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base text-[#7e7e7e]">
          <img src="{{plan_1_feature_5_icon}}" data-node="plan_1_feature_5_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766994433/seltrix/templates/clothing-template/not%20included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base text-[#7e7e7e]">
          <img src="{{plan_1_feature_6_icon}}" data-node="plan_1_feature_6_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766994433/seltrix/templates/clothing-template/not%20included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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>

    <!-- Plan 2 (Featured) -->
    <div class="border border-[#dcdcdc] rounded-2xl md:rounded-[14px] p-8 pt-[60px] md:p-7 sm:p-6 flex flex-col justify-between bg-black text-white relative">
      <div class="absolute -top-[35px] lg:-top-[28px] left-1/2 -translate-x-1/2 w-full bg-[#bfbfbf] text-black text-center text-xl lg:text-lg md:text-base py-2.5 lg:py-2 rounded-xl lg:rounded-[10px]" data-node="plan_2_badge" data-node-type="text" data-node-default="Most Popular">
        {{plan_2_badge}}
      </div>
      <h4 class="text-xl md:text-lg mb-3" data-node="plan_2_title" data-node-type="text" data-node-default="Street Prime">
        {{plan_2_title}}
      </h4>
      <div class="text-[40px] lg:text-[36px] md:text-[32px] sm:text-[28px] mb-2" data-node="plan_2_price" data-node-type="text" data-node-default="$250/m">
        {{plan_2_price}}
      </div>
      <p class="text-base md:text-sm text-[#bfbfbf] mb-5" data-node="plan_2_note" data-node-type="text" data-node-default="Pause or cancel anytime" data-node-label="Plan 2 Note">
        {{plan_2_note}}
      </p>
      <a class="w-full h-[60px] md:h-[54px] sm:h-[50px] rounded-xl bg-white text-black text-xl md:text-lg sm:text-base border-none cursor-pointer mb-7" data-node="plan_2_cta_url" data-node-type="text" data-node-default="#" data-node-label="Plan 2 CTA URL" href="{{plan_2_cta_url}}">
        <span data-node="plan_2_cta" data-node-type="text" data-node-default="Get Started" data-node-label="Plan 2 CTA">{{plan_2_cta}}</span>
      </a>
      <div class="text-xl md:text-lg mb-5" data-node="plan_2_features_title" data-node-type="text" data-node-default="What's included:">
        {{plan_2_features_title}}
      </div>
      <div class="flex flex-col gap-3.5">
        <div class="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_2_feature_1_icon}}" data-node="plan_2_feature_1_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_2_feature_2_icon}}" data-node="plan_2_feature_2_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_2_feature_3_icon}}" data-node="plan_2_feature_3_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_2_feature_4_icon}}" data-node="plan_2_feature_4_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_2_feature_5_icon}}" data-node="plan_2_feature_5_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base text-[#7e7e7e]">
          <img src="{{plan_2_feature_6_icon}}" data-node="plan_2_feature_6_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766994433/seltrix/templates/clothing-template/not%20included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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>

    <!-- Plan 3 -->
    <div class="border border-[#dcdcdc] rounded-2xl md:rounded-[14px] p-8 md:p-7 sm:p-6 flex flex-col justify-between bg-white relative">
      <h4 class="text-xl md:text-lg mb-3" data-node="plan_3_title" data-node-type="text" data-node-default="Urban Legend">
        {{plan_3_title}}
      </h4>
      <div class="text-[40px] lg:text-[36px] md:text-[32px] sm:text-[28px] mb-2" data-node="plan_3_price" data-node-type="text" data-node-default="$550/m">
        {{plan_3_price}}
      </div>
      <p class="text-base md:text-sm text-[#7e7e7e] mb-5" data-node="plan_3_note" data-node-type="text" data-node-default="Pause or cancel anytime">
        {{plan_3_note}}
      </p>
      <a class="w-full h-[60px] md:h-[54px] sm:h-[50px] rounded-xl bg-[#010609] text-white text-xl md:text-lg sm:text-base border-none cursor-pointer mb-7" data-node="plan_3_cta_url" data-node-type="text" data-node-default="#" data-node-label="Plan 3 CTA URL" href="{{plan_3_cta_url}}">
        <span data-node="plan_3_cta" data-node-type="text" data-node-default="Get Started" data-node-label="Plan 3 CTA">{{plan_3_cta}}</span>
      </a>
      <div class="text-xl md:text-lg mb-5" data-node="plan_3_features_title" data-node-type="text" data-node-default="What's included:">
        {{plan_3_features_title}}
      </div>
      <div class="flex flex-col gap-3.5">
        <div class="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_3_feature_1_icon}}" data-node="plan_3_feature_1_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_3_feature_2_icon}}" data-node="plan_3_feature_2_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_3_feature_3_icon}}" data-node="plan_3_feature_3_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_3_feature_4_icon}}" data-node="plan_3_feature_4_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_3_feature_5_icon}}" data-node="plan_3_feature_5_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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="flex items-center gap-3 text-xl md:text-lg sm:text-base">
          <img src="{{plan_3_feature_6_icon}}" data-node="plan_3_feature_6_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002396/seltrix/templates/clothing-template/Included.svg" class="w-5 h-5 md:w-[18px] md:h-[18px]">
          <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>