{{- $c := site.Data.content -}}
<section class="sec tight" id="plans" aria-labelledby="plans-h">
    <div class="wrap">
      <div class="sec-head">
        <div data-r>
          <span class="pill">{{ $c.plans.span_1 }}</span>
          <h2 id="plans-h">{{ $c.plans.h2_2_html | safeHTML }}</h2>
          <p class="lead">{{ $c.plans.p_3 }}</p>
        </div>
        <div class="toggle" role="group" aria-label="Billing" data-r style="--d:1">
          <button type="button" aria-pressed="true" data-bill="m">{{ $c.plans.button_4 }}</button>
          <button type="button" aria-pressed="false" data-bill="y">{{ $c.plans.button_5_html | safeHTML }}</button>
        </div>
      </div>
      <div class="plans">
        <article class="card plan" data-r>
          <div class="pname"><h3>{{ $c.plans.h3_6 }}</h3></div>
          <p class="for">{{ $c.plans.p_7 }}</p>
          <div class="price"><b>{{ $c.plans.b_8 }}</b><span>{{ $c.plans.span_9 }}</span></div>
          <p class="price-note">{{ $c.plans.p_10 }}</p>
          <ul>
            <li>{{ $c.plans.li_11 }}</li>
            <li>{{ $c.plans.li_12 }}</li>
            <li>{{ $c.plans.li_13 }}</li>
            <li>{{ $c.plans.li_14 }}</li>
          </ul>
          <a class="btn out" href="#book" data-service="Baseline check-up">{{ $c.plans.a_15 }}</a>
        </article>
        <article class="card plan feat" data-r style="--d:1">
          <div class="pname"><h3>{{ $c.plans.h3_16 }}</h3><span class="badge">{{ $c.plans.span_17 }}</span></div>
          <p class="for">{{ $c.plans.p_18 }}</p>
          <div class="price"><b data-m="$119" data-y="$1,190">{{ $c.plans.b_19 }}</b><span data-m="a month" data-y="a year">{{ $c.plans.span_20 }}</span></div>
          <p class="price-note" data-m="Cancel with 30 days' notice" data-y="That's $99 a month">{{ $c.plans.p_21 }}</p>
          <ul>
            <li>{{ $c.plans.li_22 }}</li>
            <li>{{ $c.plans.li_23 }}</li>
            <li>{{ $c.plans.li_24 }}</li>
            <li>{{ $c.plans.li_25 }}</li>
            <li>{{ $c.plans.li_26 }}</li>
          </ul>
          <a class="btn" href="#book" data-service="Membership">{{ $c.plans.a_27_html | safeHTML }}</a>
        </article>
        <article class="card plan" data-r style="--d:2">
          <div class="pname"><h3>{{ $c.plans.h3_28 }}</h3></div>
          <p class="for">{{ $c.plans.p_29 }}</p>
          <div class="price"><b data-m="$199" data-y="$1,990">{{ $c.plans.b_30 }}</b><span data-m="a month" data-y="a year">{{ $c.plans.span_31 }}</span></div>
          <p class="price-note" data-m="Cancel with 30 days' notice" data-y="That's $166 a month">{{ $c.plans.p_32 }}</p>
          <ul>
            <li>{{ $c.plans.li_33 }}</li>
            <li>{{ $c.plans.li_34 }}</li>
            <li>{{ $c.plans.li_35 }}</li>
            <li>{{ $c.plans.li_36 }}</li>
            <li>{{ $c.plans.li_37 }}</li>
          </ul>
          <a class="btn ink" href="#book" data-service="Membership">{{ $c.plans.a_38 }}</a>
        </article>
      </div>
      <p class="fine" data-r>{{ $c.plans.p_39 }}</p>
    </div>
  </section>