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

    .unlock-container {
      max-width: 1728px;
      margin: 0 auto;
    }

    .unlock-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 60px;
      margin-bottom: 80px;
    }

    .unlock-title {
      font-family: "Rajdhani", sans-serif;
      font-weight: 900;
      font-size: 64px;
      font-style: italic;
      line-height: 100%;
      max-width: 520px;
    }

    .unlock-desc {
      font-family: "Michroma", sans-serif;
      font-size: 20px;
      line-height: 26px;
      max-width: 620px;
    }

    .unlock-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }

    .unlock-box {
      width: 100%;
      min-height: 190px;
      border: 1px solid #dcdcdc;
      border-radius: 16px;
      padding: 30px 39px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .unlock-box-title {
      font-family: "Michroma", sans-serif;
      font-size: 24px;
      line-height: 100%;
    }

    .unlock-box-desc {
      font-family: "Michroma", sans-serif;
      font-size: 20px;
      line-height: 26px;
      color: #000000;
    }

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

      .unlock-header {
        flex-direction: column;
        gap: 32px;
      }

      .unlock-title {
        font-size: 48px;
      }

      .unlock-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .unlock-section {
        padding: 0px 24px;
      }

      .unlock-title {
        font-size: 36px;
      }

      .unlock-desc,
      .unlock-box-desc {
        font-size: 16px;
      }

      .unlock-box-title {
        font-size: 20px;
      }
      .unlock-header {
        margin-bottom: 30px;
      }
    }
  </style>

  <div class="unlock-container">
    <div class="unlock-header">
      <h2
        class="unlock-title"
        data-node="unlock_title"
        data-node-type="text"
        data-node-default="Unlock the Drip."
      >
        {{unlock_title}}
      </h2>

      <p
        class="unlock-desc"
        data-node="unlock_desc"
        data-node-type="text"
        data-node-default="Step into a world built for real ones, early drops, bigger perks, and premium flex only members get."
      >
        {{unlock_desc}}
      </p>
    </div>

    <div class="unlock-grid">
      <div class="unlock-box">
        <h4
          class="unlock-box-title"
          data-node="box_1_title"
          data-node-type="text"
          data-node-default="Early Drop Access"
        >
          {{box_1_title}}
        </h4>

        <p
          class="unlock-box-desc"
          data-node="box_1_desc"
          data-node-type="text"
          data-node-default="Beat the crowd every time with first picks on new releases. Stay ahead, stay exclusive."
        >
          {{box_1_desc}}
        </p>
      </div>

      <div class="unlock-box">
        <h4
          class="unlock-box-title"
          data-node="box_2_title"
          data-node-type="text"
          data-node-default="Member-Only Prices"
        >
          {{box_2_title}}
        </h4>

        <p
          class="unlock-box-desc"
          data-node="box_2_desc"
          data-node-type="text"
          data-node-default="Score limited deals on fits, collabs, and seasonal heat. More style, less spend."
        >
          {{box_2_desc}}
        </p>
      </div>

      <div class="unlock-box">
        <h4
          class="unlock-box-title"
          data-node="box_3_title"
          data-node-type="text"
          data-node-default="Priority Support"
        >
          {{box_3_title}}
        </h4>

        <p
          class="unlock-box-desc"
          data-node="box_3_desc"
          data-node-type="text"
          data-node-default="Get faster help, size swaps, and updates. Because your style shouldn’t wait."
        >
          {{box_3_desc}}
        </p>
      </div>
    </div>
  </div>
</section>
