/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:21 Unexpected "("
Line 23:31 Expected identifier but found "%"
Line 24:2 Unexpected "-"
Line 26:1 Expected identifier but found "%"
Line 28:0 Unexpected "{"
Line 28:1 Expected identifier but found "%"
Line 29:0 Unexpected "{"
Line 29:1 Expected identifier but found "%"
... and 534 more hidden warnings

**/
{% comment %}
  NG Pricing Builder (Avatar-first, App-like)
  File: sections/ng-pricing-builder.liquid

  PASS 4 (verified cleanup):
  - keeps sticky MOBILE CTA bar with selected plan + billing price
  - keeps Compare/Focus toggle + badges + per-plan billing meta
  - removes invalid CSS after {% schema %}
  - folds cohesion patch into scoped section CSS
  - preserves Shopify-safe schema defaults
{% endcomment %}

{%- assign strong_main = section.settings.title_strong | split: ' ' | first -%}
{%- assign strong_tag  = section.settings.title_strong | replace_first: strong_main, '' | strip -%}
{%- if strong_tag == blank -%}{%- assign strong_tag = 'GYM' -%}{%- endif -%}

<section
  id="NgPricingBuilder-{{ section.id }}"
  class="ngpb"
  data-section-id="{{ section.id }}"
  data-show-monthly-meta="{% if section.settings.show_monthly_meta %}true{% else %}false{% endif %}"
  data-per-plan-meta="{% if section.settings.per_plan_billing_meta %}true{% else %}false{% endif %}"
  data-meta-monthly="{{ section.settings.billing_meta_monthly | escape }}"
  data-meta-six="{{ section.settings.billing_meta_six | escape }}"
  data-meta-twelve="{{ section.settings.billing_meta_twelve | escape }}"
  data-mobile-default-view="{{ section.settings.mobile_default_view }}"
  data-compare-label-off="{{ section.settings.mobile_compare_label | escape }}"
  data-compare-label-on="{{ section.settings.mobile_focus_label | escape }}"
  data-sticky-enabled="{% if section.settings.enable_sticky_mobile_cta %}true{% else %}false{% endif %}"
  data-sticky-show-price="{% if section.settings.sticky_show_price %}true{% else %}false{% endif %}"
  data-sticky-hide-on-scroll="{% if section.settings.sticky_hide_on_scroll %}true{% else %}false{% endif %}"
>
  <div class="ngpb__shell">

    <header class="ngpb__head">
      {% if section.settings.kicker != blank %}
        <div class="ngpb__kicker">{{ section.settings.kicker }}</div>
      {% endif %}

      <div class="ngpb__titleWrap">
        {% if section.settings.show_mark_slot %}
          {% if section.settings.mark_is_decorative %}
            <div class="ngpb__markSlot" aria-hidden="true">
              {% if section.settings.mark_image != blank %}
                <img
                  src="{{ section.settings.mark_image | image_url: width: 1200 }}"
                  alt=""
                  loading="eager"
                  decoding="async"
                >
              {% else %}
                <div class="ngpb__markFallback"></div>
              {% endif %}
            </div>
          {% else %}
            <div class="ngpb__markSlot">
              {% if section.settings.mark_image != blank %}
                <img
                  src="{{ section.settings.mark_image | image_url: width: 1200 }}"
                  alt="{{ section.settings.mark_image_alt | escape }}"
                  loading="eager"
                  decoding="async"
                >
              {% else %}
                <div class="ngpb__markFallback" aria-hidden="true"></div>
              {% endif %}
            </div>
          {% endif %}
        {% endif %}

        <h2 class="ngpb__title">
          <span class="ngpb__lockup" aria-label="{{ section.settings.title_strong | escape }}">
            <span class="ngpb__lockupStrong">{{ strong_main }}</span>
            <span class="ngpb__lockupTag">{{ strong_tag }}</span>
          </span>

          <span class="ngpb__headline">{{ section.settings.title_light }}</span>
        </h2>

        {% if section.settings.subcopy != blank %}
          <p class="ngpb__subcopy">{{ section.settings.subcopy }}</p>
        {% endif %}
      </div>

      <div class="ngpb__toggleWrap" aria-label="Billing options">
        <div class="ngpb__toggle" role="group" aria-label="Billing options">
          <button class="ngpb__tab is-active" type="button" data-billing="monthly" aria-pressed="true">
            {{ section.settings.billing_label_monthly }}
          </button>
          <button class="ngpb__tab" type="button" data-billing="six" aria-pressed="false">
            {{ section.settings.billing_label_six }}
          </button>
          <button class="ngpb__tab" type="button" data-billing="twelve" aria-pressed="false">
            {{ section.settings.billing_label_twelve }}
          </button>
        </div>

        {% if section.settings.toggle_hint != blank %}
          <div class="ngpb__toggleHint">{{ section.settings.toggle_hint }}</div>
        {% endif %}
      </div>

      <div class="ngpb__ctaRowHead">
        {%- assign primary_href  = section.settings.primary_cta_link | default: '/pages/start' -%}
        {%- assign primary_label = section.settings.primary_cta_label | default: 'Book a Free Class' -%}
        <a
          class="ngpb__cta ngpb__cta--primary"
          href="{{ primary_href }}"
          {% if section.settings.primary_cta_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}
        >
          <span class="ngpb__ctaSheen" aria-hidden="true"></span>
          <span class="ngpb__ctaText">{{ primary_label }}</span>
          <span class="ngpb__ctaArrow" aria-hidden="true">→</span>
        </a>

        {% if section.settings.cta_microcopy != blank %}
          <div class="ngpb__ctaMicro">{{ section.settings.cta_microcopy }}</div>
        {% endif %}
      </div>
    </header>

    {% if section.settings.show_visual %}
      <div class="ngpb__visual" aria-label="Pricing visual">
        <div class="ngpb__visualFrame">
          <span class="ngpb__visualSheen" aria-hidden="true"></span>

          {% if section.settings.visual_image != blank %}
            <img
              class="ngpb__visualImg"
              src="{{ section.settings.visual_image | image_url: width: 1800 }}"
              alt="{{ section.settings.visual_alt | escape }}"
              loading="lazy"
              decoding="async"
            >
          {% else %}
            <div class="ngpb__visualPlaceholder" aria-hidden="true">
              <div class="ngpb__visualPHLine"></div>
              <div class="ngpb__visualPHLine is-short"></div>
            </div>
          {% endif %}
        </div>

        {% if section.settings.visual_note != blank %}
          <div class="ngpb__visualNote">{{ section.settings.visual_note }}</div>
        {% endif %}
      </div>
    {% endif %}

    <div class="ngpb__avatars" aria-label="Choose your build">
      <div class="ngpb__avatarsTopRow">
        <div class="ngpb__avatarsRail" role="radiogroup" aria-label="Pick your build">
          {% assign plan_count = 0 %}
          {% for block in section.blocks %}
            {% if block.type == "plan" %}
              {% assign plan_count = plan_count | plus: 1 %}
              {%- assign avatar_key = block.settings.avatar_key | default: block.id -%}
              <button
                class="ngpb__avatar{% if plan_count == 1 %} is-active{% endif %}"
                type="button"
                role="radio"
                aria-checked="{% if plan_count == 1 %}true{% else %}false{% endif %}"
                tabindex="{% if plan_count == 1 %}0{% else %}-1{% endif %}"
                aria-controls="ngpb-card-{{ block.id }}"
                data-avatar="{{ avatar_key }}"
                data-block-id="{{ block.id }}"
                {{ block.shopify_attributes }}
              >
                <span class="ngpb__avatarName">{{ block.settings.avatar_name }}</span>
              </button>
            {% endif %}
          {% endfor %}
        </div>

        {% if section.settings.show_mobile_compare_toggle %}
          <button class="ngpb__compareBtn" type="button" aria-pressed="false" data-action="toggle-compare">
            {{ section.settings.mobile_compare_label }}
          </button>
        {% endif %}
      </div>

      {% if section.settings.avatar_hint != blank %}
        <div class="ngpb__avatarsHint">{{ section.settings.avatar_hint }}</div>
      {% endif %}
    </div>

    <div class="ngpb__grid" style="--cols: {{ section.settings.columns_desktop }};">
      {% for block in section.blocks %}
        {% if block.type == "plan" %}
          {%- assign avatar_key2 = block.settings.avatar_key | default: block.id -%}
          <article
            id="ngpb-card-{{ block.id }}"
            class="ngpb__card"
            data-avatar="{{ avatar_key2 }}"
            data-block-id="{{ block.id }}"
            data-title="{{ block.settings.plan_title | escape }}"
            data-price-monthly="{{ block.settings.price_monthly }}"
            data-price-six="{{ block.settings.price_six }}"
            data-price-twelve="{{ block.settings.price_twelve }}"
            data-meta-monthly="{{ block.settings.meta_monthly | escape }}"
            data-meta-six="{{ block.settings.meta_six | escape }}"
            data-meta-twelve="{{ block.settings.meta_twelve | escape }}"
            {{ block.shopify_attributes }}
          >
            {% if block.settings.show_badge and block.settings.badge_text != blank %}
              <div class="ngpb__badge" aria-label="{{ block.settings.badge_text | escape }}">{{ block.settings.badge_text }}</div>
            {% endif %}

            {% if section.settings.show_plan_images %}
              <div class="ngpb__planArt" aria-hidden="true">
                {% if block.settings.card_image != blank %}
                  <img
                    class="ngpb__planArtImg"
                    src="{{ block.settings.card_image | image_url: width: 1200 }}"
                    alt=""
                    loading="lazy"
                    decoding="async"
                  >
                {% elsif section.settings.debug_use_default_card_asset and section.settings.default_card_asset_filename != blank %}
                  <img
                    class="ngpb__planArtImg"
                    src="{{ section.settings.default_card_asset_filename | asset_url }}"
                    alt=""
                    loading="lazy"
                    decoding="async"
                  >
                {% else %}
                  <div class="ngpb__planArtPH"></div>
                {% endif %}
              </div>
            {% endif %}

            <div class="ngpb__cardTop">
              <div class="ngpb__cardTitleRow">
                <h3 class="ngpb__cardTitle">{{ block.settings.plan_title }}</h3>
              </div>

              {% if block.settings.plan_desc != blank %}
                <p class="ngpb__cardDesc">{{ block.settings.plan_desc }}</p>
              {% endif %}
            </div>

            <div class="ngpb__priceRow">
              <div class="ngpb__price">
                <span class="ngpb__priceValue">{{ block.settings.price_monthly }}</span>
                <span class="ngpb__pricePeriod">/mo</span>
              </div>

              {% if block.settings.price_note != blank %}
                <div class="ngpb__priceNote">{{ block.settings.price_note }}</div>
              {% endif %}
            </div>

            <div class="ngpb__priceMeta" hidden></div>

            {% if block.settings.bullets != blank %}
              <div class="ngpb__divider" aria-hidden="true"></div>
              <div class="ngpb__bullets">{{ block.settings.bullets }}</div>
            {% endif %}

            {% if block.settings.enable_buy %}
              {%- assign buy_href  = block.settings.buy_link | default: '/pages/start' -%}
              {%- assign buy_label = block.settings.buy_text | default: 'Buy membership' -%}
              <div class="ngpb__ctaRowCard">
                <a class="ngpb__ctaSecondary" href="{{ buy_href }}">{{ buy_label }}</a>
              </div>
            {% endif %}
          </article>
        {% endif %}
      {% endfor %}
    </div>

    {% if section.settings.footnote != blank %}
      <div class="ngpb__foot">{{ section.settings.footnote }}</div>
    {% endif %}
  </div>

  {% if section.settings.enable_sticky_mobile_cta %}
    {%- assign sticky_href  = section.settings.sticky_cta_link | default: '/pages/start' -%}
    {%- assign sticky_label = section.settings.sticky_cta_label | default: 'Book a Free Class' -%}
    <div class="ngpb__sticky" role="region" aria-label="Quick action">
      <div class="ngpb__stickyInner">
        <div class="ngpb__stickyMeta" aria-live="polite">
          <div class="ngpb__stickyPlan" data-sticky-plan>Plan</div>
          <div class="ngpb__stickyPrice" data-sticky-price></div>
        </div>

        <a class="ngpb__stickyBtn" href="{{ sticky_href }}">
          <span class="ngpb__stickyBtnText">{{ sticky_label }}</span>
          <span class="ngpb__stickyBtnArrow" aria-hidden="true">→</span>
        </a>
      </div>

      {% if section.settings.sticky_hint != blank %}
        <div class="ngpb__stickyHint">{{ section.settings.sticky_hint }}</div>
      {% endif %}
    </div>
  {% endif %}

  <script>
    (function() {
      const root = document.getElementById('NgPricingBuilder-{{ section.id }}');
      if (!root) return;

      const tabs = Array.from(root.querySelectorAll('.ngpb__tab'));
      const cards = Array.from(root.querySelectorAll('.ngpb__card'));
      const avatars = Array.from(root.querySelectorAll('.ngpb__avatar'));
      const compareBtn = root.querySelector('[data-action="toggle-compare"]');

      const sticky = root.querySelector('.ngpb__sticky');
      const stickyPlanEl = root.querySelector('[data-sticky-plan]');
      const stickyPriceEl = root.querySelector('[data-sticky-price]');

      const isMobile = () => window.matchMedia('(max-width: 749px)').matches;

      const prefersReducedMotion = () =>
        window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

      const state = {
        billing: 'monthly',
        avatar: avatars[0] ? avatars[0].dataset.avatar : '',
        compare: false
      };

      const perPlanMeta = root.dataset.perPlanMeta === 'true';

      const readGlobalMeta = (mode) => {
        const showMonthly = root.dataset.showMonthlyMeta === 'true';
        const monthly = root.dataset.metaMonthly || '';
        const six = root.dataset.metaSix || '';
        const twelve = root.dataset.metaTwelve || '';

        if (mode === 'monthly') return showMonthly ? monthly : '';
        if (mode === 'six') return six;
        return twelve;
      };

      const readCardMeta = (card, mode) => {
        if (!card) return '';
        if (mode === 'monthly') return card.dataset.metaMonthly || '';
        if (mode === 'six') return card.dataset.metaSix || '';
        return card.dataset.metaTwelve || '';
      };

      const setBilling = (mode) => {
        state.billing = mode;

        tabs.forEach((t) => {
          const active = t.dataset.billing === mode;
          t.classList.toggle('is-active', active);
          t.setAttribute('aria-pressed', active ? 'true' : 'false');
        });

        cards.forEach((card) => {
          const value = card.getAttribute('data-price-' + mode) || '';
          const priceEl = card.querySelector('.ngpb__priceValue');
          const periodEl = card.querySelector('.ngpb__pricePeriod');
          const metaEl = card.querySelector('.ngpb__priceMeta');

          if (priceEl) priceEl.textContent = value;
          if (periodEl) periodEl.textContent = '/mo';

          if (metaEl) {
            const meta = perPlanMeta ? readCardMeta(card, mode) : readGlobalMeta(mode);
            if (meta && meta.trim().length) {
              metaEl.textContent = meta;
              metaEl.hidden = false;
            } else {
              metaEl.textContent = '';
              metaEl.hidden = true;
            }
          }

          card.classList.remove('is-ticking');
          void card.offsetWidth;
          card.classList.add('is-ticking');
        });

        updateSticky();
      };

      const applyVisibility = () => {
        const mobile = isMobile();
        cards.forEach((c) => {
          const picked = c.dataset.avatar === state.avatar;
          c.classList.toggle('is-picked', picked);

          if (!mobile) {
            c.hidden = false;
            return;
          }
          c.hidden = state.compare ? false : !picked;
        });
      };

      const setAvatar = (avatarKey, opts) => {
        const options = opts || {};
        const fromKeyboard = options.fromKeyboard === true;

        state.avatar = avatarKey;

        avatars.forEach((a) => {
          const on = a.dataset.avatar === avatarKey;
          a.classList.toggle('is-active', on);
          a.setAttribute('aria-checked', on ? 'true' : 'false');
          a.tabIndex = on ? 0 : -1;
          if (on && fromKeyboard) a.focus({ preventScroll: true });
        });

        applyVisibility();
        updateSticky();

        const picked = cards.find((c) => c.dataset.avatar === avatarKey);
        if (picked && isMobile() && !state.compare) {
          const behavior = prefersReducedMotion() ? 'auto' : 'smooth';
          picked.scrollIntoView({ block: 'start', behavior });
        }
      };

      const indexOfActiveAvatar = () => avatars.findIndex((a) => a.classList.contains('is-active'));

      const moveAvatarBy = (delta) => {
        if (!avatars.length) return;
        const current = indexOfActiveAvatar();
        const start = current >= 0 ? current : 0;
        let next = start + delta;
        if (next < 0) next = avatars.length - 1;
        if (next >= avatars.length) next = 0;
        const key = avatars[next].dataset.avatar;
        if (key) setAvatar(key, { fromKeyboard: true });
      };

      const toggleCompare = () => {
        state.compare = !state.compare;
        root.classList.toggle('is-compare', state.compare);

        if (compareBtn) {
          compareBtn.setAttribute('aria-pressed', state.compare ? 'true' : 'false');
          compareBtn.textContent = state.compare
            ? (root.dataset.compareLabelOn || 'Focus view')
            : (root.dataset.compareLabelOff || 'Compare all');
        }

        applyVisibility();
      };

      const initCompareDefault = () => {
        const def = (root.dataset.mobileDefaultView || 'focus').toLowerCase();
        state.compare = def === 'compare';
        root.classList.toggle('is-compare', state.compare);

        if (compareBtn) {
          compareBtn.setAttribute('aria-pressed', state.compare ? 'true' : 'false');
          compareBtn.textContent = state.compare
            ? (root.dataset.compareLabelOn || 'Focus view')
            : (root.dataset.compareLabelOff || 'Compare all');
        }
      };

      const getPickedCard = () => cards.find((c) => c.dataset.avatar === state.avatar);

      const updateSticky = () => {
        if (!sticky) return;
        const enabled = root.dataset.stickyEnabled === 'true';
        if (!enabled) return;

        const mobile = isMobile();
        sticky.hidden = !mobile;

        const picked = getPickedCard();
        const showPrice = root.dataset.stickyShowPrice === 'true';

        const title = picked ? (picked.dataset.title || '') : '';
        const price = picked ? (picked.getAttribute('data-price-' + state.billing) || '') : '';

        if (stickyPlanEl) stickyPlanEl.textContent = title && title.length ? title : 'Plan';
        if (stickyPriceEl) {
          if (showPrice && price && price.length) stickyPriceEl.textContent = price + ' /mo';
          else stickyPriceEl.textContent = '';
        }
      };

      const setupStickyHideOnScroll = () => {
        if (!sticky) return;
        const hideOnScroll = root.dataset.stickyHideOnScroll === 'true';
        if (!hideOnScroll) return;

        let lastY = window.scrollY || 0;
        let ticking = false;

        const onScroll = () => {
          if (ticking) return;
          ticking = true;

          window.requestAnimationFrame(() => {
            const y = window.scrollY || 0;
            const down = y > lastY;
            const beyond = y > 80;

            if (isMobile()) {
              sticky.classList.toggle('is-hidden', down && beyond);
            } else {
              sticky.classList.remove('is-hidden');
            }

            lastY = y;
            ticking = false;
          });
        };

        window.addEventListener('scroll', onScroll, { passive: true });
      };

      tabs.forEach((btn) => btn.addEventListener('click', () => setBilling(btn.dataset.billing)));
      avatars.forEach((btn) => btn.addEventListener('click', () => setAvatar(btn.dataset.avatar)));
      if (compareBtn) compareBtn.addEventListener('click', toggleCompare);

      root.addEventListener('keydown', (e) => {
        const target = e.target;
        const isAvatar = target && target.classList && target.classList.contains('ngpb__avatar');
        if (!isAvatar) return;

        if (e.key === 'ArrowRight' || e.key === 'Right') {
          e.preventDefault();
          moveAvatarBy(1);
        } else if (e.key === 'ArrowLeft' || e.key === 'Left') {
          e.preventDefault();
          moveAvatarBy(-1);
        } else if (e.key === 'Home') {
          e.preventDefault();
          const key = avatars[0] && avatars[0].dataset.avatar;
          if (key) setAvatar(key, { fromKeyboard: true });
        } else if (e.key === 'End') {
          e.preventDefault();
          const key = avatars[avatars.length - 1] && avatars[avatars.length - 1].dataset.avatar;
          if (key) setAvatar(key, { fromKeyboard: true });
        } else if (e.key === ' ' || e.key === 'Enter') {
          e.preventDefault();
          const key = target.dataset.avatar;
          if (key) setAvatar(key, { fromKeyboard: true });
        }
      });

      const setArtRatios = () => {
        const imgs = Array.from(root.querySelectorAll('.ngpb__planArtImg'));
        imgs.forEach((img) => {
          const apply = () => {
            const w = img.naturalWidth || 0;
            const h = img.naturalHeight || 0;
            if (!w || !h) return;
            const frame = img.closest('.ngpb__planArt');
            if (!frame) return;
            frame.style.setProperty('--ngpb-art-ratio', w + ' / ' + h);
          };
          if (img.complete) apply();
          else img.addEventListener('load', apply, { once: true });
        });
      };

      initCompareDefault();
      setBilling('monthly');

      const firstAvatar = avatars[0] && avatars[0].dataset.avatar;
      if (firstAvatar) setAvatar(firstAvatar);

      updateSticky();
      setupStickyHideOnScroll();

      window.addEventListener('resize', () => {
        applyVisibility();
        updateSticky();
      }, { passive: true });

      setArtRatios();
    })();
  </script>

  <style>
    #NgPricingBuilder-{{ section.id }}{
      --bg: {{ section.settings.bg_color }};
      --ink: #0B0B0C;
      --muted: rgba(11,11,12,.70);
      --soft: rgba(11,11,12,.52);
      --line: rgba(11,11,12,.12);
      --line2: rgba(11,11,12,.18);

      --steelA: #ffffff;
      --steelB: #f4f2ec;
      --steelC: #e6e2d9;

      --tx: {{ section.settings.texture_strength | default: 20 | divided_by: 100.0 }};

      background: var(--bg);
      color: var(--ink);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__shell{
      max-width: {{ section.settings.max_width }}px;
      margin: 0 auto;
      padding: {{ section.settings.pad_y }}px {{ section.settings.pad_x }}px;
    }

    /* cohesion patch */
    #NgPricingBuilder-{{ section.id }} .ngpb__kicker{
      letter-spacing: .10em;
      text-transform: uppercase;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__headline,
    #NgPricingBuilder-{{ section.id }} .ngpb__cardTitle{
      text-transform: none;
      letter-spacing: -0.02em;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__subcopy,
    #NgPricingBuilder-{{ section.id }} .ngpb__cardDesc,
    #NgPricingBuilder-{{ section.id }} .ngpb__priceMeta,
    #NgPricingBuilder-{{ section.id }} .ngpb__foot,
    #NgPricingBuilder-{{ section.id }} .ngpb__visualNote{
      letter-spacing: 0;
      line-height: 1.55;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__cta,
    #NgPricingBuilder-{{ section.id }} .ngpb__ctaSecondary,
    #NgPricingBuilder-{{ section.id }} .ngpb__stickyBtn{
      letter-spacing: .02em;
      text-transform: none;
    }

    /* Header */
    #NgPricingBuilder-{{ section.id }} .ngpb__head{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px 14px;
      align-items: end;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__kicker{
      grid-column: 1 / -1;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 11px;
      color: var(--soft);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__titleWrap{
      grid-column: 1 / 2;
      max-width: 72ch;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__markSlot{
      width: 100%;
      max-width: 240px;
      margin-bottom: 8px;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__markSlot img{
      width: 100%;
      height: auto;
      display: block;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__markFallback{
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background:
        radial-gradient(120% 160% at 18% 0%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.58) 55%, rgba(255,255,255,0.20) 100%),
        linear-gradient(180deg, var(--steelA), var(--steelB));
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__title{
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__lockup{
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
      line-height: 1;
      white-space: nowrap;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__lockupStrong{
      font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
      font-weight: 900;
      letter-spacing: -0.02em;
      font-size: clamp(30px, 3.6vw, 52px);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__lockupTag{
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial;
      font-weight: 650;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-size: clamp(12px, 1.3vw, 16px);
      color: rgba(11,11,12,.72);
      transform: translateY(-2px);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__headline{
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial;
      font-weight: 650;
      line-height: 0.95;
      font-size: clamp(36px, 4.9vw, 70px);
      color: rgba(11,11,12,.94);
      text-wrap: balance;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__subcopy{
      margin: 8px 0 0 0;
      color: var(--muted);
      font-size: 15.5px;
      max-width: 42ch;
      text-wrap: balance;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__toggleWrap{
      grid-column: 2 / 3;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__toggle{
      display: inline-flex;
      gap: 6px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,255,255,0.72);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__toggleHint{
      font-size: 12px;
      color: rgba(11,11,12,.58);
      text-align: right;
      max-width: 32ch;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__tab{
      appearance: none;
      border: 0;
      background: transparent;
      color: rgba(11,11,12,.72);
      padding: 10px 12px;
      border-radius: 14px;
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial;
      font-size: 13px;
      font-weight: 650;
      letter-spacing: -0.01em;
      cursor: pointer;
      transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__tab:hover{ transform: translateY(-1px); color: rgba(11,11,12,.88); }
    #NgPricingBuilder-{{ section.id }} .ngpb__tab.is-active{ background: rgba(11,11,12,0.92); color: #fff; transform: none; }

    #NgPricingBuilder-{{ section.id }} .ngpb__ctaRowHead{
      grid-column: 1 / -1;
      margin-top: 8px;
      display: grid;
      gap: 8px;
      justify-items: start;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__cta{
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid var(--line2);
      text-decoration: none;
      color: rgba(11,11,12,.92);
      overflow: hidden;
      background:
        radial-gradient(120% 170% at 18% 0%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.60) 55%, rgba(255,255,255,0.20) 100%),
        linear-gradient(180deg, var(--steelA), var(--steelC));
      transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__cta:hover{
      transform: translateY(-1px);
      border-color: rgba(11,11,12,.26);
      box-shadow: 0 10px 30px rgba(11,11,12,.08);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__ctaSheen{
      position:absolute; left:-45%; top:-90%;
      width:58%; height:320%;
      transform: rotate(16deg);
      border-radius:999px;
      pointer-events:none;
      opacity:0;
      background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__cta:hover .ngpb__ctaSheen{ opacity:1; animation: ngpbSheen-{{ section.id }} 900ms ease forwards; }
    @keyframes ngpbSheen-{{ section.id }}{
      0% { transform: translateX(0) rotate(16deg); opacity:0; }
      18% { opacity:1; }
      100% { transform: translateX(260%) rotate(16deg); opacity:0; }
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__ctaText{
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 800;
      font-size: 12px;
      line-height: 1;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__ctaArrow{ font-size: 18px; line-height: 1; }
    #NgPricingBuilder-{{ section.id }} .ngpb__ctaMicro{ font-size: 12px; color: rgba(11,11,12,.58); line-height: 1.35; }

    #NgPricingBuilder-{{ section.id }} .ngpb__visual{ padding-top: 14px; padding-bottom: 8px; }
    #NgPricingBuilder-{{ section.id }} .ngpb__visualFrame{
      position: relative;
      border: 1px solid var(--line);
      border-radius: 22px;
      overflow: hidden;
      background:
        radial-gradient(120% 170% at 18% 0%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.62) 55%, rgba(255,255,255,0.18) 100%),
        linear-gradient(180deg, var(--steelA), var(--steelB));
      min-height: {{ section.settings.visual_min_height }}px;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__visualSheen{
      position:absolute; left:-45%; top:-95%;
      width: 58%; height: 340%;
      transform: rotate(16deg);
      border-radius: 999px;
      pointer-events:none;
      opacity: 0;
      background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__visualFrame:hover .ngpb__visualSheen{ opacity: 1; animation: ngpbSheenVisual-{{ section.id }} 1050ms ease forwards; }
    @keyframes ngpbSheenVisual-{{ section.id }}{
      0% { transform: translateX(0) rotate(16deg); opacity: 0; }
      16% { opacity: 1; }
      100% { transform: translateX(265%) rotate(16deg); opacity: 0; }
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__visualImg{
      width: 100%;
      height: 100%;
      min-height: {{ section.settings.visual_min_height }}px;
      object-fit: cover;
      display: block;
      filter: contrast(1.02) saturate(0.98);
      position: relative;
      z-index: 1;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__visualPlaceholder{
      height: 100%;
      min-height: {{ section.settings.visual_min_height }}px;
      display: grid;
      place-content: center;
      gap: 10px;
      padding: 22px;
      position: relative;
      z-index: 1;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__visualPHLine{
      height: 10px;
      width: min(520px, 75vw);
      border-radius: 999px;
      border: 1px solid rgba(11,11,12,0.10);
      background: rgba(255,255,255,0.65);
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__visualPHLine.is-short{
      width: min(300px, 58vw);
      opacity: 0.75;
      justify-self: center;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__visualNote{
      margin-top: 8px;
      font-size: 12px;
      color: rgba(11,11,12,.58);
      max-width: 70ch;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__avatars{ padding-top: 12px; padding-bottom: 10px; }
    #NgPricingBuilder-{{ section.id }} .ngpb__avatarsTopRow{
      display: flex;
      align-items: center;
      gap: 10px;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__avatarsRail{
      display: flex;
      gap: 10px;
      align-items: center;
      overflow-x: auto;
      padding: 8px 0 4px 0;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      flex: 1 1 auto;
      min-width: 0;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__avatarsRail::-webkit-scrollbar{ display:none; }

    #NgPricingBuilder-{{ section.id }} .ngpb__compareBtn{
      appearance: none;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.78);
      border-radius: 18px;
      padding: 10px 12px;
      cursor: pointer;
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      color: rgba(11,11,12,.78);
      white-space: nowrap;
      transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__compareBtn:hover{
      transform: translateY(-1px);
      border-color: rgba(11,11,12,.18);
      background: rgba(255,255,255,0.92);
      color: rgba(11,11,12,.88);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__avatar{
      appearance: none;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.78);
      border-radius: 18px;
      padding: 10px 12px;
      cursor: pointer;
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial;
      font-size: 13px;
      font-weight: 650;
      letter-spacing: -0.01em;
      color: rgba(11,11,12,.82);
      white-space: nowrap;
      transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
      outline: none;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__avatar:hover{ transform: translateY(-1px); border-color: rgba(11,11,12,.18); background: rgba(255,255,255,0.92); }
    #NgPricingBuilder-{{ section.id }} .ngpb__avatar.is-active{ border-color: rgba(11,11,12,.22); background: rgba(255,255,255,0.96); }
    #NgPricingBuilder-{{ section.id }} .ngpb__avatar:focus-visible{
      box-shadow: 0 0 0 3px rgba(11,11,12,.16);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__avatarsHint{
      margin-top: 6px;
      font-size: 12px;
      color: rgba(11,11,12,.52);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__grid{
      display: grid;
      grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
      gap: 14px;
      padding-top: 10px;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__card{
      position: relative;
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 16px 16px 14px;
      background: rgba(255,255,255,0.82);
      overflow: hidden;
      scroll-margin-top: 96px;
      transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__card:hover{
      transform: translateY(-1px);
      border-color: rgba(11,11,12,.18);
      box-shadow: 0 12px 34px rgba(11,11,12,.08);
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__card::before{
      content:"";
      position:absolute; inset:0;
      pointer-events:none;
      opacity: calc(var(--tx) * 0.35);
      background:
        repeating-linear-gradient(
          90deg,
          rgba(11,11,12,0.06) 0px,
          rgba(11,11,12,0.00) 14px,
          rgba(11,11,12,0.04) 28px
        );
      mix-blend-mode: multiply;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__card.is-picked{
      border-color: rgba(11,11,12,.24);
      background:
        radial-gradient(120% 170% at 18% 0%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.60) 55%, rgba(255,255,255,0.18) 100%),
        linear-gradient(180deg, var(--steelA), var(--steelB));
      box-shadow: 0 16px 46px rgba(11,11,12,.10);
      transform: translateY(-1px);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__badge{
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(11,11,12,.14);
      background: rgba(255,255,255,0.88);
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 900;
      font-size: 11px;
      text-transform: uppercase;
      color: rgba(11,11,12,.78);
      backdrop-filter: blur(6px);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__card.is-ticking .ngpb__priceValue{ animation: ngpbTick-{{ section.id }} 180ms ease; }
    @keyframes ngpbTick-{{ section.id }}{ 0%{transform:translateY(0)} 40%{transform:translateY(-1px)} 100%{transform:translateY(0)} }

    #NgPricingBuilder-{{ section.id }} .ngpb__planArt{
      position: relative;
      z-index: 1;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(11,11,12,.10);
      background: rgba(255,255,255,0.75);
      margin-bottom: 12px;
      aspect-ratio: var(--ngpb-art-ratio, 3 / 4);
      padding: 10px;
      box-sizing: border-box;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__planArtImg{ width:100%; height:100%; object-fit:contain; display:block; }
    #NgPricingBuilder-{{ section.id }} .ngpb__planArtPH{
      width: 100%; height: 100%;
      border-radius: 14px;
      background:
        radial-gradient(120% 170% at 18% 0%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.62) 55%, rgba(255,255,255,0.18) 100%),
        linear-gradient(180deg, var(--steelA), var(--steelB));
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__cardTitle{
      margin: 0;
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial;
      font-size: 18px;
      font-weight: 750;
      color: rgba(11,11,12,.92);
      position: relative;
      z-index: 1;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__cardDesc{
      margin: 10px 0 0;
      color: rgba(11,11,12,.70);
      font-size: 14px;
      position: relative;
      z-index: 1;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__priceRow{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap: 10px;
      padding-top: 14px;
      padding-bottom: 8px;
      position: relative;
      z-index: 1;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__price{ display:flex; align-items:baseline; gap: 8px; }
    #NgPricingBuilder-{{ section.id }} .ngpb__priceValue{
      display:inline-block;
      font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
      font-weight: 800;
      font-size: 44px;
      letter-spacing: -0.03em;
      line-height: 1;
      position: relative;
      z-index: 1;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__pricePeriod{
      font-size: 13px;
      color: rgba(11,11,12,.66);
      font-weight: 650;
      position: relative;
      z-index: 1;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__priceNote{
      font-size: 12px;
      color: rgba(11,11,12,.58);
      text-align: right;
      max-width: 26ch;
      line-height: 1.35;
      position: relative;
      z-index: 1;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__priceMeta{
      font-size: 12px;
      color: rgba(11,11,12,.58);
      padding-bottom: 10px;
      position: relative;
      z-index: 1;
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__divider{ height:1px; background: var(--line); margin: 10px 0; position: relative; z-index: 1; }
    #NgPricingBuilder-{{ section.id }} .ngpb__bullets{ font-size: 13px; color: rgba(11,11,12,.72); position: relative; z-index: 1; }
    #NgPricingBuilder-{{ section.id }} .ngpb__bullets ul{ margin:0; padding-left: 18px; }

    #NgPricingBuilder-{{ section.id }} .ngpb__ctaSecondary{
      display: inline-flex;
      align-items:center;
      justify-content:center;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.70);
      color: rgba(11,11,12,.84);
      text-decoration: none;
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 750;
      font-size: 12px;
      position: relative;
      z-index: 1;
      transition: transform 160ms ease, border-color 160ms ease;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__ctaSecondary:hover{
      transform: translateY(-1px);
      border-color: rgba(11,11,12,.18);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__foot{
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
      font-size: 12px;
      color: rgba(11,11,12,.58);
    }

    #NgPricingBuilder-{{ section.id }} .ngpb__sticky{
      position: sticky;
      bottom: 0;
      z-index: 30;
      padding: 10px 0 12px 0;
      background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.86) 60%, rgba(255,255,255,0) 100%);
      border-top: 1px solid rgba(11,11,12,.10);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      transform: translateY(0);
      transition: transform 180ms ease;
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__sticky.is-hidden{
      transform: translateY(110%);
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__stickyInner{
      max-width: {{ section.settings.max_width }}px;
      margin: 0 auto;
      padding: 0 {{ section.settings.pad_x }}px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__stickyMeta{
      min-width: 0;
      display: grid;
      gap: 2px;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__stickyPlan{
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 850;
      color: rgba(11,11,12,.90);
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 52vw;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__stickyPrice{
      font-size: 12px;
      color: rgba(11,11,12,.62);
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__stickyBtn{
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(11,11,12,.18);
      text-decoration: none;
      color: rgba(11,11,12,.92);
      background:
        radial-gradient(120% 170% at 18% 0%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.60) 55%, rgba(255,255,255,0.20) 100%),
        linear-gradient(180deg, var(--steelA), var(--steelC));
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__stickyBtnText{
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 900;
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
    }
    #NgPricingBuilder-{{ section.id }} .ngpb__stickyBtnArrow{ font-size: 18px; line-height: 1; }
    #NgPricingBuilder-{{ section.id }} .ngpb__stickyHint{
      max-width: {{ section.settings.max_width }}px;
      margin: 0 auto;
      padding: 6px {{ section.settings.pad_x }}px 0;
      font-size: 12px;
      color: rgba(11,11,12,.58);
      line-height: 1.35;
    }

    @media (max-width: 989px){
      #NgPricingBuilder-{{ section.id }} .ngpb__head{ grid-template-columns: 1fr; }
      #NgPricingBuilder-{{ section.id }} .ngpb__toggleWrap{ align-items: flex-start; }
      #NgPricingBuilder-{{ section.id }} .ngpb__toggleHint{ text-align: left; }
      #NgPricingBuilder-{{ section.id }} .ngpb__grid{ grid-template-columns: 1fr; }
      #NgPricingBuilder-{{ section.id }} .ngpb__lockup{ white-space: normal; flex-wrap: wrap; }
    }

    @media (min-width: 750px){
      #NgPricingBuilder-{{ section.id }} .ngpb__compareBtn{ display:none; }
      #NgPricingBuilder-{{ section.id }} .ngpb__sticky{ display:none; }
    }

    @media (prefers-reduced-motion: reduce){
      #NgPricingBuilder-{{ section.id }} .ngpb__cta{ transition:none !important; }
      #NgPricingBuilder-{{ section.id }} .ngpb__cta:hover{ transform:none !important; }
      #NgPricingBuilder-{{ section.id }} .ngpb__cta:hover .ngpb__ctaSheen{ animation:none !important; opacity:0 !important; }
      #NgPricingBuilder-{{ section.id }} .ngpb__visualFrame:hover .ngpb__visualSheen{ animation:none !important; opacity:0 !important; }
      #NgPricingBuilder-{{ section.id }} .ngpb__card.is-ticking .ngpb__priceValue{ animation:none !important; }
      #NgPricingBuilder-{{ section.id }} .ngpb__card,
      #NgPricingBuilder-{{ section.id }} .ngpb__card:hover,
      #NgPricingBuilder-{{ section.id }} .ngpb__cta:hover,
      #NgPricingBuilder-{{ section.id }} .ngpb__avatar:hover,
      #NgPricingBuilder-{{ section.id }} .ngpb__compareBtn:hover{ transform:none !important; }
      #NgPricingBuilder-{{ section.id }} .ngpb__sticky{ transition:none !important; }
    }
  </style>
</section>

{% schema %}
{
  "name": "NG Pricing Builder",
  "settings": [
    { "type": "color", "id": "bg_color", "label": "Background", "default": "#FFFFFF" },
    { "type": "text", "id": "kicker", "label": "Kicker", "default": "MEMBERSHIP" },

    { "type": "text", "id": "title_strong", "label": "Title (bold)", "default": "NBHD GYM" },
    { "type": "text", "id": "title_light", "label": "Title (light)", "default": "Pick your lane." },
    { "type": "textarea", "id": "subcopy", "label": "Subcopy", "default": "Choose a plan. Start with a free class." },

    { "type": "checkbox", "id": "show_mark_slot", "label": "Show mark slot above title", "default": false },
    { "type": "checkbox", "id": "mark_is_decorative", "label": "Mark is decorative (recommended)", "default": true },
    { "type": "image_picker", "id": "mark_image", "label": "Mark/PNG (optional)" },
    { "type": "text", "id": "mark_image_alt", "label": "Mark alt text (only used if not decorative)", "default": "Neighborhood Gym brand mark" },

    { "type": "header", "content": "Primary CTA (global)" },
    { "type": "text", "id": "primary_cta_label", "label": "Primary CTA label", "default": "Book a Free Class" },
    { "type": "text", "id": "primary_cta_link", "label": "Primary CTA link (text)", "default": "/pages/start" },
    { "type": "checkbox", "id": "primary_cta_new_tab", "label": "Open primary CTA in new tab", "default": false },
    { "type": "text", "id": "cta_microcopy", "label": "CTA microcopy (small)", "default": "Takes 60 seconds. No pressure." },

    { "type": "header", "content": "Billing toggle" },
    { "type": "text", "id": "billing_label_monthly", "label": "Tab label: monthly", "default": "Monthly" },
    { "type": "text", "id": "billing_label_six", "label": "Tab label: 6-month", "default": "6 mo" },
    { "type": "text", "id": "billing_label_twelve", "label": "Tab label: 12-month", "default": "12 mo" },
    { "type": "text", "id": "toggle_hint", "label": "Billing hint", "default": "Longer term lowers your monthly rate." },

    { "type": "header", "content": "Billing meta (under price)" },
    { "type": "checkbox", "id": "per_plan_billing_meta", "label": "Use per-plan billing meta (from each plan block)", "default": false },
    { "type": "checkbox", "id": "show_monthly_meta", "label": "Show monthly meta line (global mode only)", "default": false },
    { "type": "text", "id": "billing_meta_monthly", "label": "Monthly meta (global)", "default": "Billed monthly" },
    { "type": "text", "id": "billing_meta_six", "label": "6-month meta (global)", "default": "Billed every 6 months" },
    { "type": "text", "id": "billing_meta_twelve", "label": "12-month meta (global)", "default": "Billed yearly" },

    { "type": "header", "content": "Mobile view controls" },
    {
      "type": "select",
      "id": "mobile_default_view",
      "label": "Mobile default view",
      "default": "focus",
      "options": [
        { "value": "focus", "label": "Focus (one plan at a time)" },
        { "value": "compare", "label": "Compare (show all plans)" }
      ]
    },
    { "type": "checkbox", "id": "show_mobile_compare_toggle", "label": "Show Compare/Focus toggle on mobile", "default": true },
    { "type": "text", "id": "mobile_compare_label", "label": "Mobile button label (off state)", "default": "Compare all" },
    { "type": "text", "id": "mobile_focus_label", "label": "Mobile button label (on state)", "default": "Focus view" },

    { "type": "header", "content": "Sticky mobile CTA" },
    { "type": "checkbox", "id": "enable_sticky_mobile_cta", "label": "Enable sticky mobile CTA", "default": true },
    { "type": "text", "id": "sticky_cta_label", "label": "Sticky CTA label", "default": "Book a Free Class" },
    { "type": "text", "id": "sticky_cta_link", "label": "Sticky CTA link (text)", "default": "/pages/start" },
    { "type": "checkbox", "id": "sticky_show_price", "label": "Show price in sticky bar", "default": true },
    { "type": "checkbox", "id": "sticky_hide_on_scroll", "label": "Hide sticky bar when scrolling down", "default": true },
    { "type": "text", "id": "sticky_hint", "label": "Sticky hint (small, optional)", "default": "Pick a plan now. Lock in the free class next." },

    { "type": "header", "content": "Visual slot (optional)" },
    { "type": "checkbox", "id": "show_visual", "label": "Show visual slot", "default": true },
    { "type": "image_picker", "id": "visual_image", "label": "Visual image / PNG / still" },
    { "type": "text", "id": "visual_alt", "label": "Visual alt text", "default": "NBHD visual" },
    { "type": "text", "id": "visual_note", "label": "Visual note (optional)", "default": "Drop in a still/graphic here to set the tone." },
    { "type": "range", "id": "visual_min_height", "label": "Visual height (min)", "min": 220, "max": 620, "step": 20, "default": 360, "unit": "px" },

    { "type": "header", "content": "Plan images" },
    { "type": "checkbox", "id": "show_plan_images", "label": "Show plan images in cards", "default": true },

    { "type": "header", "content": "Debug (temporary)" },
    { "type": "checkbox", "id": "debug_use_default_card_asset", "label": "Debug: use default card asset when plan image is empty", "default": true },
    { "type": "text", "id": "default_card_asset_filename", "label": "Default card asset filename (in Assets)", "default": "rookie-card.png" },

    { "type": "text", "id": "avatar_hint", "label": "Avatar hint", "default": "Tap a plan to focus." },

    { "type": "range", "id": "max_width", "label": "Max width", "min": 920, "max": 1400, "step": 20, "default": 1200, "unit": "px" },
    { "type": "range", "id": "pad_x", "label": "Side padding", "min": 0, "max": 40, "step": 2, "default": 0, "unit": "px" },
    { "type": "range", "id": "pad_y", "label": "Top/bottom padding", "min": 16, "max": 72, "step": 4, "default": 28, "unit": "px" },

    { "type": "range", "id": "columns_desktop", "label": "Columns (desktop)", "min": 2, "max": 4, "step": 1, "default": 2 },

    { "type": "range", "id": "texture_strength", "label": "Texture strength", "min": 0, "max": 100, "step": 5, "default": 20, "unit": "%" },

    { "type": "textarea", "id": "footnote", "label": "Footnote", "default": "Month-to-month. 15 days’ notice required to cancel. If you pause a discounted plan, pricing returns to standard." }
  ],
  "blocks": [
    {
      "type": "plan",
      "name": "Plan",
      "settings": [
        { "type": "text", "id": "avatar_key", "label": "Avatar key (internal)", "default": "solo" },
        { "type": "text", "id": "avatar_name", "label": "Avatar name (UI)", "default": "Solo Builder" },

        { "type": "checkbox", "id": "show_badge", "label": "Show badge", "default": false },
        { "type": "text", "id": "badge_text", "label": "Badge text", "default": "Most Popular" },

        { "type": "image_picker", "id": "card_image", "label": "Plan card image (PNG/WebP)" },
        { "type": "text", "id": "card_image_alt", "label": "Card alt text", "default": "Membership card" },

        { "type": "text", "id": "plan_title", "label": "Plan title", "default": "Open Floor" },
        { "type": "textarea", "id": "plan_desc", "label": "Short description", "default": "Train on your schedule. No classes." },

        { "type": "text", "id": "price_monthly", "label": "Monthly price", "default": "$99" },
        { "type": "text", "id": "price_six", "label": "6-month (monthly equivalent)", "default": "$89" },
        { "type": "text", "id": "price_twelve", "label": "12-month (monthly equivalent)", "default": "$79" },

        { "type": "header", "content": "Per-plan billing meta (used only if enabled in section settings)" },
        { "type": "text", "id": "meta_monthly", "label": "Monthly meta", "default": "Billed monthly" },
        { "type": "text", "id": "meta_six", "label": "6-month meta", "default": "Billed every 6 months" },
        { "type": "text", "id": "meta_twelve", "label": "12-month meta", "default": "Billed yearly" },

        { "type": "textarea", "id": "price_note", "label": "Price note (right side)", "default": "Month-to-month. Cancel with notice." },

        { "type": "richtext", "id": "bullets", "label": "Bullets", "default": "<ul><li>Open gym access</li><li>Train your own plan</li><li>Community vibe</li></ul>" },

        { "type": "header", "content": "Secondary CTA (optional)" },
        { "type": "checkbox", "id": "enable_buy", "label": "Enable secondary CTA", "default": false },
        { "type": "text", "id": "buy_text", "label": "Buy label", "default": "Buy membership" },
        { "type": "text", "id": "buy_link", "label": "Buy link (text)", "default": "/pages/start" }
      ]
    }
  ],
  "presets": [
    {
      "name": "NG Pricing Builder",
      "blocks": [
        { "type": "plan" },
        { "type": "plan" },
        { "type": "plan" },
        { "type": "plan" }
      ]
    }
  ]
}
{% endschema %}