{{- $c := site.Data.content -}}
<section class="plans" id="plans" aria-labelledby="plans-h">
    <div class="wrap">
      <div class="sec-head">
        <div data-reveal><p class="eyebrow">{{ $c.plans.p_1 }}</p><h2 id="plans-h">{{ $c.plans.h2_2 }}</h2></div>
        <p class="lead" data-reveal style="--d:.1s">{{ $c.plans.p_3 }}</p>
      </div>
      <div class="plan-grid">
        <article class="plan" data-reveal>
          <p class="tag">{{ $c.plans.p_4 }}</p>
          <h3>{{ $c.plans.h3_5 }}</h3>
          <p class="price">{{ $c.plans.p_6_html | safeHTML }}</p>
          <p>{{ $c.plans.p_7 }}</p>
          <ul>
            <li><svg aria-hidden="true"><use href="#i-check" /></svg>{{ $c.plans.text_8 }}</li>
            <li><svg aria-hidden="true"><use href="#i-check" /></svg>{{ $c.plans.text_9 }}</li>
            <li><svg aria-hidden="true"><use href="#i-check" /></svg>{{ $c.plans.text_10 }}</li>
          </ul>
          <a class="pill ink" href="#book" data-service="Check-up">{{ $c.plans.text_11 }}<span class="arr"><svg aria-hidden="true"><use href="#i-arrow" /></svg></span></a>
        </article>
        <article class="plan family" data-reveal style="--d:.12s">
          <span class="sticker" aria-hidden="true">{{ $c.plans.span_12 }}</span>
          <p class="tag">{{ $c.plans.p_13 }}</p>
          <h3>{{ $c.plans.h3_14 }}</h3>
          <p class="price">{{ $c.plans.p_15_html | safeHTML }}</p>
          <p>{{ $c.plans.p_16 }}</p>
          <ul>
            <li><svg aria-hidden="true"><use href="#i-check" /></svg>{{ $c.plans.text_17 }}</li>
            <li><svg aria-hidden="true"><use href="#i-check" /></svg>{{ $c.plans.text_18 }}</li>
            <li><svg aria-hidden="true"><use href="#i-check" /></svg>{{ $c.plans.text_19 }}</li>
          </ul>
          <a class="pill" href="#book" data-service="Family Plan">{{ $c.plans.text_20 }}<span class="arr"><svg aria-hidden="true"><use href="#i-arrow" /></svg></span></a>
        </article>
      </div>

      <div class="prices" data-reveal>
        <div>
          <h3>{{ $c.plans.h3_21 }}</h3>
          <p class="note">{{ $c.plans.p_22 }}</p>
        </div>
        <div>
          <div class="tablist-wrap"><div class="tabs" role="tablist" aria-label="Price list">
            <button type="button" role="tab" id="t-1" aria-controls="p-1" aria-selected="true">{{ $c.plans.button_23 }}</button>
            <button type="button" role="tab" id="t-2" aria-controls="p-2" aria-selected="false" tabindex="-1">{{ $c.plans.button_24 }}</button>
            <button type="button" role="tab" id="t-3" aria-controls="p-3" aria-selected="false" tabindex="-1">{{ $c.plans.button_25 }}</button>
            <button type="button" role="tab" id="t-4" aria-controls="p-4" aria-selected="false" tabindex="-1">{{ $c.plans.button_26 }}</button>
          </div></div>
          <div class="panel" id="p-1" role="tabpanel" aria-labelledby="t-1">
            <p class="no-js-label">{{ $c.plans.p_27 }}</p>
            <ul class="rows">
              <li>{{ $c.plans.li_28_html | safeHTML }}</li>
              <li>{{ $c.plans.li_29_html | safeHTML }}</li>
              <li>{{ $c.plans.li_30_html | safeHTML }}</li>
              <li>{{ $c.plans.li_31_html | safeHTML }}</li>
              <li>{{ $c.plans.li_32_html | safeHTML }}</li>
            </ul>
          </div>
          <div class="panel" id="p-2" role="tabpanel" aria-labelledby="t-2" hidden>
            <p class="no-js-label">{{ $c.plans.p_33 }}</p>
            <ul class="rows">
              <li>{{ $c.plans.li_34_html | safeHTML }}</li>
              <li>{{ $c.plans.li_35_html | safeHTML }}</li>
              <li>{{ $c.plans.li_36_html | safeHTML }}</li>
              <li>{{ $c.plans.li_37_html | safeHTML }}</li>
              <li>{{ $c.plans.li_38_html | safeHTML }}</li>
            </ul>
          </div>
          <div class="panel" id="p-3" role="tabpanel" aria-labelledby="t-3" hidden>
            <p class="no-js-label">{{ $c.plans.p_39 }}</p>
            <ul class="rows">
              <li>{{ $c.plans.li_40_html | safeHTML }}</li>
              <li>{{ $c.plans.li_41_html | safeHTML }}</li>
              <li>{{ $c.plans.li_42_html | safeHTML }}</li>
              <li>{{ $c.plans.li_43_html | safeHTML }}</li>
              <li>{{ $c.plans.li_44_html | safeHTML }}</li>
            </ul>
          </div>
          <div class="panel" id="p-4" role="tabpanel" aria-labelledby="t-4" hidden>
            <p class="no-js-label">{{ $c.plans.p_45 }}</p>
            <ul class="rows">
              <li>{{ $c.plans.li_46_html | safeHTML }}</li>
              <li>{{ $c.plans.li_47_html | safeHTML }}</li>
              <li>{{ $c.plans.li_48_html | safeHTML }}</li>
              <li>{{ $c.plans.li_49_html | safeHTML }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>