<section class="bm-pricing bm-pricing--matrix" style="
  background-color:var(--bm-bg);
  background-image:var(--bm-bg-gradient, none);
  color:var(--bm-text);
  padding-top:var(--bm-padding-top, var(--bm-padding-y));
  padding-right:var(--bm-padding-right, var(--bm-padding-x));
  padding-bottom:var(--bm-padding-bottom, var(--bm-padding-y));
  padding-left:var(--bm-padding-left, var(--bm-padding-x));
">
  <div class="bm-pricing__grid" style="
    display:grid;
    grid-template-columns:repeat(var(--bm-card-columns, 4), minmax(0, 1fr));
    grid-auto-rows:minmax(min-content, auto);
    align-items:stretch;
    gap:var(--bm-gap);
  ">
    {{#plans}}
      <article class="bm-pricing__card bm-card" data-bm-card-index="{{@index}}" style="
        display:var(--bm-card-display, flex);
        flex-direction:column;
        align-self:stretch;
        height:var(--bm-card-height, auto);
        padding:var(--bm-card-padding, 0);
        border-top-left-radius:var(--bm-card-border-top-left-radius, var(--bm-card-border-radius, 12px));
        border-top-right-radius:var(--bm-card-border-top-right-radius, var(--bm-card-border-radius, 12px));
        border-bottom-right-radius:var(--bm-card-border-bottom-right-radius, var(--bm-card-border-radius, 12px));
        border-bottom-left-radius:var(--bm-card-border-bottom-left-radius, var(--bm-card-border-radius, 12px));
        border-style:var(--bm-card-border-style, solid);
        border-color:var(--bm-card-border-color, rgba(0, 0, 0, 0.08));
        border-top-width:var(--bm-card-border-top-width, var(--bm-card-border-width, 1px));
        border-right-width:var(--bm-card-border-right-width, var(--bm-card-border-width, 1px));
        border-bottom-width:var(--bm-card-border-bottom-width, var(--bm-card-border-width, 1px));
        border-left-width:var(--bm-card-border-left-width, var(--bm-card-border-width, 1px));
        box-shadow:var(--bm-card-shadow, none);
        box-sizing:border-box;
        background:var(--bm-card-bg, var(--bm-bg));
      ">
        <div class="bm-card__body" style="
          display:var(--bm-card-body-display, flex);
          flex-direction:column;
          flex:var(--bm-card-body-flex, 1 1 auto);
          min-height:auto;
          align-items:stretch;
          gap:var(--bm-card-body-gap, 1rem);
          order:1;
          padding:var(--bm-card-body-padding, 1.75rem);
          text-align:var(--bm-text-align, left);
          box-sizing:border-box;
        ">
          <span class="bm-pricing__tag" data-bm-el="tag" style="
            display:inline-block;
            align-self:var(--bm-align-items, flex-start);
            box-sizing:border-box;
            margin-top:var(--bm-tag-margin-top, 0);
            margin-right:var(--bm-tag-margin-right, 0);
            margin-bottom:var(--bm-tag-margin-bottom, 0);
            margin-left:var(--bm-tag-margin-left, 0);
            font-family:var(--bm-tag-font-family, inherit);
            font-size:var(--bm-tag-font-size, 0.75rem);
            font-weight:var(--bm-tag-font-weight, 700);
            line-height:var(--bm-tag-line-height, 1.2);
            letter-spacing:var(--bm-tag-letter-spacing, normal);
            color:var(--bm-tag-color, #3525cd);
            background:var(--bm-tag-bg, rgba(53, 37, 205, 0.1));
            padding-top:var(--bm-tag-padding-top, 0.35rem);
            padding-right:var(--bm-tag-padding-right, 0.65rem);
            padding-bottom:var(--bm-tag-padding-bottom, 0.35rem);
            padding-left:var(--bm-tag-padding-left, 0.65rem);
            border-style:var(--bm-tag-border-style, none);
            border-color:var(--bm-tag-border-color, transparent);
            border-top-width:var(--bm-tag-border-top-width, var(--bm-tag-border-width, 0));
            border-right-width:var(--bm-tag-border-right-width, var(--bm-tag-border-width, 0));
            border-bottom-width:var(--bm-tag-border-bottom-width, var(--bm-tag-border-width, 0));
            border-left-width:var(--bm-tag-border-left-width, var(--bm-tag-border-width, 0));
            border-top-left-radius:var(--bm-tag-border-top-left-radius, var(--bm-tag-border-radius, 999px));
            border-top-right-radius:var(--bm-tag-border-top-right-radius, var(--bm-tag-border-radius, 999px));
            border-bottom-right-radius:var(--bm-tag-border-bottom-right-radius, var(--bm-tag-border-radius, 999px));
            border-bottom-left-radius:var(--bm-tag-border-bottom-left-radius, var(--bm-tag-border-radius, 999px));
            box-shadow:var(--bm-tag-shadow, none);
          ">{{tag}}</span>
          <div class="bm-pricing__price" data-bm-el="price" style="
            margin-top:var(--bm-price-margin-top, 0);
            margin-right:0;
            margin-bottom:var(--bm-price-margin-bottom, 0);
            margin-left:0;
            color:var(--bm-price-color, var(--bm-text));
            font-family:var(--bm-price-font-family, inherit);
            font-size:var(--bm-price-font-size, 2.25rem);
            font-weight:var(--bm-price-font-weight, 700);
            line-height:var(--bm-price-line-height, 1.1);
            letter-spacing:var(--bm-price-letter-spacing, normal);
            box-sizing:border-box;
          ">{{price}}</div>
          <div class="bm-pricing__description" data-bm-el="description" style="
            margin-top:var(--bm-description-margin-top, 0);
            margin-right:0;
            margin-bottom:var(--bm-description-margin-bottom, 0);
            margin-left:0;
            color:var(--bm-description-color, #64748b);
            font-family:var(--bm-description-font-family, inherit);
            font-size:var(--bm-description-font-size, 1rem);
            font-weight:var(--bm-description-font-weight, 400);
            line-height:var(--bm-description-line-height, 1.5);
            letter-spacing:var(--bm-description-letter-spacing, normal);
            box-sizing:border-box;
          ">{{description}}</div>
          <ul class="bm-pricing__features" data-bm-el="features" style="
            list-style:none;
            margin-top:var(--bm-features-margin-top, 0);
            margin-right:0;
            margin-bottom:var(--bm-features-margin-bottom, 0);
            margin-left:0;
            padding:0;
            display:flex;
            flex-direction:column;
            align-items:var(--bm-align-items, flex-start);
            gap:var(--bm-features-gap, var(--bm-feature-gap, 0.5rem));
            flex:1 1 auto;
            width:100%;
            text-align:var(--bm-text-align, left);
            color:var(--bm-features-color, var(--bm-feature-color, var(--bm-text)));
            font-family:var(--bm-features-font-family, inherit);
            font-size:var(--bm-features-font-size, var(--bm-feature-font-size, 0.9375rem));
            font-weight:var(--bm-features-font-weight, var(--bm-feature-font-weight, 400));
            line-height:var(--bm-features-line-height, var(--bm-feature-line-height, 1.5));
            letter-spacing:var(--bm-features-letter-spacing, normal);
            box-sizing:border-box;
          ">{{features}}</ul>
          <a class="bm-pricing__button" data-bm-el="button" href="{{button.url}}"{{button.targetAttr}} style="
            display:inline-flex;
            align-self:var(--bm-align-items, flex-start);
            justify-content:center;
            align-items:center;
            gap:0.45em;
            text-decoration:none;
            box-sizing:border-box;
            width:fit-content;
            max-width:100%;
            order:var(--bm-buttons-flex-order);
            margin-top:var(--bm-buttons-pin-top, var(--bm-button-margin-top, 0));
            margin-bottom:var(--bm-button-margin-bottom, 0);
            background:var(--bm-button-bg, #3525cd);
            color:var(--bm-button-color, #ffffff);
            font-family:var(--bm-button-font-family, inherit);
            font-size:var(--bm-button-font-size, 1rem);
            font-weight:var(--bm-button-font-weight, 600);
            line-height:var(--bm-button-line-height, 1.2);
            letter-spacing:var(--bm-button-letter-spacing, normal);
            padding:var(--bm-button-pad-y, var(--bm-button-padding-top, 0.75rem)) var(--bm-button-pad-x, var(--bm-button-padding-right, 1.25rem));
            border-style:var(--bm-button-border-style, none);
            border-color:var(--bm-button-border-color, transparent);
            border-top-width:var(--bm-button-border-top-width, var(--bm-button-border-width, 0));
            border-right-width:var(--bm-button-border-right-width, var(--bm-button-border-width, 0));
            border-bottom-width:var(--bm-button-border-bottom-width, var(--bm-button-border-width, 0));
            border-left-width:var(--bm-button-border-left-width, var(--bm-button-border-width, 0));
            border-top-left-radius:var(--bm-button-border-top-left-radius, var(--bm-button-border-radius, 8px));
            border-top-right-radius:var(--bm-button-border-top-right-radius, var(--bm-button-border-radius, 8px));
            border-bottom-right-radius:var(--bm-button-border-bottom-right-radius, var(--bm-button-border-radius, 8px));
            border-bottom-left-radius:var(--bm-button-border-bottom-left-radius, var(--bm-button-border-radius, 8px));
            box-shadow:var(--bm-button-shadow, none);
            transition:background 0.2s, color 0.2s;
          " onmouseover="this.style.background='var(--bm-button-bg-hover, var(--bm-button-bg))';this.style.color='var(--bm-button-color-hover, var(--bm-button-color))'" onmouseout="this.style.background='var(--bm-button-bg)';this.style.color='var(--bm-button-color)'">{{button.title}}</a>
        </div>
      </article>
    {{/plans}}
  </div>
</section>