{% set s = module.style %}
{% set b = module.billing %}
{% set t = module.trust %}

{# Ultra-minimal mobile CSS for fastest load #}
<style>
  /* Mobile: Simple stacked cards - using theme variables with fallbacks */
  .p-table{padding:1rem}
  .p-card{position:relative;background:var(--p-bg,var(--color-bg,#fff));border:var(--p-bw,1px) solid var(--p-bc,var(--color-border,#e5e7eb));border-radius:var(--p-r,8px);padding:var(--p-pad,1rem);color:var(--p-fg,var(--color-text,#111827))}
  .p-card--pop{border-color:var(--p-accent,var(--color-primary,#007bff));border-width:2px}
  .p-card__name{font-size:1.25rem;font-weight:700}
  .p-card__price{font-size:1.5rem;color:var(--p-accent,var(--color-primary,#007bff));font-weight:700}
  .p-btn{display:block;padding:12px;background:var(--p-accent,var(--color-primary,#007bff));color:var(--color-primary-contrast,#fff);text-decoration:none;border-radius:6px;text-align:center;margin-top:1rem}

  {# Popular ribbon — shared .card-flag design (always-on so it shows on mobile + desktop) #}
  {% include "../../includes/card-flag.css.html" %}

  /* Mobile simplifications */
  @media(max-width:640px){
    .p-card{margin-bottom:1rem}
    .p-toggle,.p-card__urgency,.p-card__users,.p-card__savings,.p-feature__category,.p-feature__info,.p-card__setup,.p-trust__logos{display:none!important}
    .p-card__features{list-style:none;padding:0;margin:1rem 0}
    .p-feature{padding:0.25rem 0;display:flex;gap:0.5rem;align-items:baseline}
    .p-feature.is-out{display:none}
    .p-feature__icon{color:#10b981;font-weight:700}
    .p-feature__content{display:flex;justify-content:space-between;align-items:baseline;gap:0.5rem;width:100%;min-width:0}
    .p-feature__value{font-weight:700;white-space:nowrap;flex-shrink:0;color:var(--p-accent,var(--color-primary,#007bff))}
    .p-feature__new{display:inline-block;margin-left:0.25rem;padding:0 0.375rem;background:var(--color-success,#10b981);color:#fff;font-size:0.625rem;font-weight:700;border-radius:9999px;text-transform:uppercase}
    .p-card__best-for{font-size:0.875rem;opacity:0.7;margin:0.25rem 0}
    .p-card__desc{display:none}
    .card-flag{font-size:0.625rem;padding:3px 8px}
    .p-header{text-align:center;margin-bottom:1rem}
    .p-header h2{font-size:1.5rem}
    .p-header p{font-size:1rem;opacity:0.8}
  }
</style>

<div class="p-wrapper">
  {# Header with trust signals #}
  {% if t.header_text or t.subheader_text %}
    <header class="p-header">
      {% if t.header_text %}
        <h2>{{ t.header_text|escape }}</h2>
      {% endif %}
      {% if t.subheader_text %}
        <p>{{ t.subheader_text|escape }}</p>
      {% endif %}
      {% if t.ratings_text %}
        <div class="p-ratings">{{ t.ratings_text|escape }}</div>
      {% endif %}
    </header>
  {% endif %}

  {# Billing toggle #}
  {% if b.show_toggle %}
    <div class="p-toggle-wrapper" style="text-align:center">
      <div class="p-toggle" role="group" aria-label="Billing cycle">
        <button type="button"
                class="p-toggle__btn {{ b.default_cycle == 'monthly' ? 'active' : '' }}"
                data-cycle="monthly"
                aria-pressed="{{ b.default_cycle == 'monthly' ? 'true' : 'false' }}">
          Monthly
        </button>
        <button type="button"
                class="p-toggle__btn {{ b.default_cycle == 'annual' ? 'active' : '' }}"
                data-cycle="annual"
                aria-pressed="{{ b.default_cycle == 'annual' ? 'true' : 'false' }}">
          Annual
          {% if b.discount_badge %}
            <span class="p-toggle__badge">{{ b.discount_badge|escape }}</span>
          {% endif %}
        </button>
      </div>
    </div>
  {% endif %}

  <section class="p-table"
  style="
    --t-gap: clamp(1rem, 3vw, {{ s.gap }});
    --p-pad: clamp(1rem, 4vw, {{ s.card_padding }});
    --p-r: {{ s.card_radius == '0' ? '0' : 'var(--radius, ' ~ s.card_radius ~ ')' }};
    --p-bw: {{ s.card_border_w }};
    {% if s.card_border_c.color %}--p-bc: rgba({{ s.card_border_c.color|convert_rgb }}, {{ s.card_border_c.opacity / 100 }});{% endif %}
    {% if s.card_bg.color %}--p-bg: rgba({{ s.card_bg.color|convert_rgb }}, {{ s.card_bg.opacity / 100 }});{% endif %}
    {% if s.card_fg.color %}--p-fg: rgba({{ s.card_fg.color|convert_rgb }}, {{ s.card_fg.opacity / 100 }});{% endif %}
    {% if s.card_accent.color %}--p-accent: rgba({{ s.card_accent.color|convert_rgb }}, {{ s.card_accent.opacity / 100 }});{% endif %}
    --p-minh: {{ s.card_min_h }};
  "
>
  {% for card in module.cards %}
    {% if card.plan_name %}
      <article class="p-card {{ card.popular and 'p-card--pop' or '' }}" role="article" aria-label="{{ card.plan_name }} pricing plan">
        {# Badges and alerts #}
        {% if card.popular and card.popular_text %}
          <div class="card-flag" style="--label-bg: {% if s.label_color.color %}rgba({{ s.label_color.color|convert_rgb }}, {{ s.label_color.opacity / 100 }}){% else %}{{ theme.core.colors.primary.color or '#007bff' }}{% endif %};">{{ card.popular_text|default('Most Popular')|escape }}</div>
        {% endif %}
        {% if card.urgency_text %}
          <div class="p-card__urgency">⚡ {{ card.urgency_text|escape }}</div>
        {% endif %}

        <header class="p-card__head">
          <h3 class="p-card__name">{{ card.plan_name }}</h3>
          {% if card.best_for %}
            <div class="p-card__best-for">{{ card.best_for|escape }}</div>
          {% endif %}

          {# Dynamic pricing #}
          <div class="p-card__price p-card__price--{{ s.price_size }}">
            {% if card.original_price %}
              <span class="p-card__price-original">{{ card.original_price|escape }}</span>
            {% endif %}
            <span class="p-card__price-value"
                  data-monthly="{{ card.price_monthly|escape }}"
                  data-annual="{{ card.price_annual|default(card.price_monthly)|escape }}">
              {{ b.default_cycle == 'annual' and card.price_annual ? card.price_annual : card.price_monthly }}
            </span>
            {% if card.price_suffix %}
              <span class="p-card__price-suffix">{{ card.price_suffix|escape }}</span>
            {% endif %}
          </div>

          {% if card.savings_text and b.show_toggle %}
            <div class="p-card__savings" data-show="annual">{{ card.savings_text|escape }}</div>
          {% endif %}

          {% if card.description %}
            <div class="p-card__desc">{{ card.description|sanitize_html }}</div>
          {% endif %}

          {% if card.users_count %}
            <div class="p-card__users">{{ card.users_count|escape }}</div>
          {% endif %}
        </header>

        {# Features - simplified for mobile, enhanced for desktop #}
        {% if card.features|length %}
          <div class="p-card__features-wrapper">
            <ul class="p-card__features" role="list">
              {% set current_category = '' %}
              {% for f in card.features %}
                {# Desktop: Show categories #}
                {% if f.category and f.category != current_category %}
                  {% set current_category = f.category %}
                  <li class="p-feature__category">{{ f.category|escape }}</li>
                {% endif %}

                {# Mobile: Show only included features, Desktop: Show all #}
                <li class="p-feature {{ f.included and 'is-in' or 'is-out' }}"
                    {% if f.tooltip %}title="{{ f.tooltip|escape }}"{% endif %}>
                  <span class="p-feature__icon" aria-hidden="true">{{ f.included ? '✓' : '✕' }}</span>
                  <span class="p-feature__content">
                    <span class="p-feature__label">
                      <span class="p-feature__text">{{ f.feature_label|escape }}</span>
                      {% if f.is_new %}<span class="p-feature__new">New</span>{% endif %}
                      {% if f.tooltip %}<span class="p-feature__info" aria-hidden="true" title="{{ f.tooltip|escape }}">i</span>{% endif %}
                    </span>
                    {% if f.value %}<strong class="p-feature__value">{{ f.value|escape }}</strong>{% endif %}
                  </span>
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}

        {# Footer with CTAs and trust signals #}
        <div class="p-card__footer">
          {% if card.trial_days and card.trial_days > 0 %}
            <div class="p-card__trial">✓ {{ card.trial_days }}-day free trial</div>
          {% endif %}

          {% if card.setup_fee %}
            <div class="p-card__setup">{{ card.setup_fee|escape }}</div>
          {% endif %}

          <div class="p-card__ctas p-card__ctas--{{ s.cta_layout }}">
            {% if card.cta_primary_text and card.cta_primary_url.href %}
              <a class="p-btn p-btn--primary" href="{{ card.cta_primary_url.href }}">
                <span>{{ card.cta_primary_text|escape }}</span>
              </a>
            {% endif %}
            {% if card.cta_secondary_text and card.cta_secondary_url.href %}
              <a class="p-btn p-btn--ghost" href="{{ card.cta_secondary_url.href }}">
                <span>{{ card.cta_secondary_text|escape }}</span>
              </a>
            {% endif %}
          </div>

          {% if card.guarantee_text %}
            <div class="p-card__guarantee">🔒 {{ card.guarantee_text|escape }}</div>
          {% endif %}
        </div>
      </article>
    {% endif %}
  {% endfor %}
</section>

  {# Trust signals footer #}
  <footer class="p-trust">
    {% if t.guarantee %}
      <div class="p-trust__guarantee">{{ t.guarantee|escape }}</div>
    {% endif %}

    {% if t.trust_badges %}
      <div class="p-trust__badges">{{ t.trust_badges|escape }}</div>
    {% endif %}

    {% if t.show_logos and t.customer_logos|length %}
      <div class="p-trust__logos">
        <p>Trusted by leading companies:</p>
        <div class="p-trust__logos-grid">
          {% for logo in t.customer_logos %}
            {% if logo.logo.src %}
              <img src="{{ logo.logo.src|resize_image_url(120) }}"
                   srcset="{{ logo.logo.src|resize_image_url(120) }} 1x,
                           {{ logo.logo.src|resize_image_url(240) }} 2x"
                   alt="{{ logo.company_name|default('Company logo')|escape }}"
                   loading="lazy"
                   decoding="async"
                   width="120"
                   height="40">
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endif %}

    {% if t.faq_link_text and t.faq_link_url.href %}
      <div class="p-trust__faq">
        <a href="{{ t.faq_link_url.href }}">{{ t.faq_link_text|escape }}</a>
      </div>
    {% endif %}
  </footer>
</div>

{# Billing toggle JavaScript - deferred and optimized #}
{% if b.show_toggle %}
<script type="module">
  // Only load if toggle exists
  if (document.querySelector('.p-toggle')) {
    // Use event delegation for better performance
    document.addEventListener('click', e => {
      if (!e.target.closest('.p-toggle__btn')) return;

      const btn = e.target.closest('.p-toggle__btn');
      const cycle = btn.dataset.cycle;

      // Batch DOM updates
      requestAnimationFrame(() => {
        // Update toggle state
        document.querySelectorAll('.p-toggle__btn').forEach(b => {
          b.classList.toggle('active', b === btn);
          b.setAttribute('aria-pressed', b === btn ? 'true' : 'false');
        });

        // Update all prices at once
        document.querySelectorAll('.p-card__price-value').forEach(el => {
          const price = el.dataset[cycle === 'annual' ? 'annual' : 'monthly'];
          if (price) el.textContent = price;
        });

        // Toggle savings visibility
        document.querySelectorAll('.p-card__savings').forEach(el => {
          el.style.display = cycle === 'annual' ? 'block' : 'none';
        });
      });
    });
  }
</script>
{% endif %}

{% require_css %}
<style>
  /* Desktop enhancements - all the fancy stuff */
  @media (min-width: 641px) {
    /* Mobile hides these (≤640px); on desktop they simply revert to their natural
       display — no !important reset needed (it broke the toggle pill flex layout and
       prevented JS from hiding .p-card__savings on monthly). */

    /* Grid layout for desktop */
    .p-table {
      display: grid;
      gap: var(--t-gap);
      grid-template-columns: repeat(2, 1fr);
      padding: 0;
      align-items: {{ s.align_rows }};
    }

    @media (min-width: 1025px) {
      .p-table {
        grid-template-columns: repeat({{ s.cols_lg }}, 1fr);
      }
    }

    /* Enhanced card styles for desktop */
    .p-card {
      background: var(--p-bg, var(--color-bg, #fff));
      color: var(--p-fg, var(--color-text, #111827));
      border: var(--p-bw) solid var(--p-bc, var(--color-border, #e5e7eb));
      border-radius: var(--p-r);
      padding: var(--p-pad);
      min-height: var(--p-minh);
      display: grid;
      gap: 1.25rem;
      position: relative;
      overflow: hidden; /* Clip ribbon to card corners */
      margin-bottom: 0;
      transition: transform 0.15s ease;
    }

    .p-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.15);
    }

    /* Header styles */
    .p-wrapper {
      padding: 2rem 1rem;
    }

    .p-header {
      text-align: center;
      margin-bottom: 2rem;
    }

    .p-header h2 {
      font-size: clamp(1.5rem, 4vw, 2.5rem);
      margin: 0 0 0.5rem;
    }

    /* Toggle for desktop */
    .p-toggle-wrapper {
      text-align: center;
    }

    .p-toggle {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      padding: 0.25rem;
      background: var(--color-bg-secondary, #f3f4f6);
      border-radius: 9999px;
      margin: 1.5rem 0;
    }

    .p-toggle__btn {
      padding: 0.5rem 1.5rem;
      border: none;
      background: transparent;
      color: var(--p-fg, var(--color-text, #374151));
      cursor: pointer;
      border-radius: 9999px;
      font-weight: 500;
      transition: all 0.2s;
    }

    .p-toggle__btn.active {
      background: var(--color-bg, #fff);
      color: var(--p-fg, var(--color-text, #111827));
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    /* Shadows for desktop */
    {% if s.card_shadow == 'sm' %}
      .p-card { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
    {% elif s.card_shadow == 'md' %}
      .p-card { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
    {% endif %}

    .p-card--pop {
      outline: 2px solid color-mix(in srgb, var(--p-accent, var(--color-primary, #007bff)) 55%, transparent);
      transform: scale(1.02);
    }

  {# Popular ribbon is now defined once in the always-on <style> block at the top
     of this module (unified corner-flag design shared across all card modules). #}

  /* Urgency banner */
  :where(.p-card__urgency) {
    background: var(--color-warning, #fbbf24);
    color: var(--color-warning-text, #78350f);
    padding: 0.5rem;
    margin: calc(-1 * var(--p-pad));
    margin-bottom: 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
  }

  :where(.p-card__head) {
    text-align: center;
  }

  /* Best for text */
  :where(.p-card__best-for) {
    font-size: clamp(0.875rem, 2vw, 1rem);
    opacity: 0.7;
    margin: 0.25rem 0 1rem;
  }

  /* Original price with strikethrough */
  :where(.p-card__price-original) {
    text-decoration: line-through;
    opacity: 0.5;
    font-size: 0.875em;
  }

  /* Savings badge */
  :where(.p-card__savings) {
    display: inline-block;
    background: var(--color-success-bg, #d1fae5);
    color: var(--color-success-text, #065f46);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.5rem;
  }

  /* Users count */
  :where(.p-card__users) {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 0.5rem;
  }

  /* Already in critical CSS, skip */

  /* Price sizes - non-critical variations */

  :where(.p-card__price--sm .p-card__price-value) {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    font-weight: 700;
  }

  :where(.p-card__price--md .p-card__price-value) {
    font-size: clamp(1.5rem, 5vw, 1.75rem);
    font-weight: 700;
  }

  :where(.p-card__price--lg .p-card__price-value) {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
    font-weight: 700;
  }

  :where(.p-card__price--xl .p-card__price-value) {
    font-size: clamp(2rem, 7vw, 2.75rem);
    font-weight: 700;
  }

  :where(.p-card__price-suffix) {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    opacity: 0.7;
  }

  :where(.p-card__desc) {
    font-size: clamp(0.875rem, 2.5vw, 0.9375rem);
    line-height: 1.5;
    opacity: 0.85;
  }

  :where(.p-card__features) {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.125rem;
  }

  /* Feature categories — accent-tinted chip band for clear hierarchy */
  :where(.p-feature__category) {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--p-accent, var(--color-primary, #007bff));
    margin: 1rem 0 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--p-accent, var(--color-primary, #007bff)) 8%, transparent);
  }

  :where(.p-feature__category:first-child) {
    margin-top: 0;
  }

  :where(.p-feature) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.625rem;
    font-size: clamp(0.875rem, 2.5vw, 0.9375rem);
    line-height: 1.4;
    padding: 0.375rem 0.25rem;
    border-radius: 6px;
  }

  /* Subtle hover highlight per row aids scanning down a column */
  @media (hover: hover) and (pointer: fine) {
    :where(.p-feature.is-in:hover) {
      background: color-mix(in srgb, var(--p-fg, var(--color-text, #111827)) 4%, transparent);
    }
  }

  :where(.p-feature__content) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
  }

  :where(.p-feature__label) {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
  }

  :where(.p-feature__text) {
    min-width: 0;
  }

  /* Values: right-aligned, bold, tabular figures so they line up across rows */
  :where(.p-feature__value) {
    font-weight: 700;
    color: var(--p-fg, var(--color-text, #111827));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
  }

  :where(.p-feature__new) {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    background: var(--color-success, #10b981);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  /* Small info hint signals a tooltip is available on hover */
  :where(.p-feature__info) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 0.5625rem;
    font-weight: 700;
    font-style: italic;
    cursor: help;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--p-fg, var(--color-text, #111827)) 12%, transparent);
    color: var(--p-fg, var(--color-text, #111827));
  }

  /* Status icon: one consistent soft-circle mark for in/out (no double glyph) */
  :where(.p-feature__icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 0.0625rem;
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
  }

  :where(.p-feature.is-in .p-feature__icon) {
    background: color-mix(in srgb, var(--color-success, #10b981) 16%, transparent);
    color: var(--color-success, #10b981);
  }

  :where(.p-feature.is-out) {
    opacity: 0.55;
  }

  :where(.p-feature.is-out .p-feature__text) {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }

  :where(.p-feature.is-out .p-feature__icon) {
    background: var(--color-bg-tertiary, #f3f4f6);
    color: var(--p-fg, var(--color-text-muted, #9ca3af));
    font-size: 0.625rem;
  }

  :where(.p-card__ctas) {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
  }

  :where(.p-card__ctas--stack) {
    flex-direction: column;
    align-items: stretch;
  }

  :where(.p-card__ctas--inline) {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Button enhancements - non-critical */
  :where(.p-btn) {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    border: 2px solid transparent;
    transition: var(--transition, all 0.15s ease);
  }

  :where(.p-btn--primary:hover) {
    opacity: 0.9;
  }

  :where(.p-btn--ghost) {
    background: transparent;
    color: var(--p-accent, var(--color-primary, #007bff));
    border-color: var(--p-accent, var(--color-primary, #007bff));
  }

  :where(.p-btn--ghost:hover) {
    background: var(--p-accent, var(--color-primary, #007bff));
    color: white;
  }

  :where(.p-btn:focus-visible) {
    outline: 2px solid var(--color-primary, var(--p-accent, var(--color-primary, #007bff)));
    outline-offset: 2px;
  }

  /* Card footer elements */
  :where(.p-card__footer) {
    margin-top: auto;
    display: grid;
    gap: 0.75rem;
  }

  :where(.p-card__trial) {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-success, #10b981);
    font-weight: 600;
  }

  :where(.p-card__setup) {
    text-align: center;
    font-size: 0.75rem;
    opacity: 0.7;
  }

  :where(.p-card__guarantee) {
    text-align: center;
    font-size: 0.75rem;
    opacity: 0.8;
    padding-top: 0.5rem;
    border-top: 1px solid var(--p-bc, var(--color-border, #e5e7eb));
  }

  /* Trust signals footer */
  :where(.p-trust) {
    text-align: center;
    padding: 2rem 1rem;
    display: grid;
    gap: 1.5rem;
  }

  :where(.p-trust__guarantee) {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-success, #10b981);
  }

  :where(.p-trust__badges) {
    font-size: 0.875rem;
    opacity: 0.8;
  }

  :where(.p-trust__logos) {
    padding-top: 1rem;
  }

  :where(.p-trust__logos p) {
    font-size: 0.875rem;
    opacity: 0.6;
    margin-bottom: 1rem;
  }

  :where(.p-trust__logos-grid) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
  }

  :where(.p-trust__logos-grid img) {
    opacity: 0.6;
    filter: grayscale(100%);
    transition: all 0.2s;
  }

  :where(.p-trust__logos-grid img:hover) {
    opacity: 1;
    filter: grayscale(0%);
  }

  :where(.p-trust__faq a) {
    color: var(--p-accent, var(--color-primary, #007bff));
    text-decoration: underline;
  }

  /* Toggle badge */
  :where(.p-toggle__badge) {
    display: inline-block;
    background: var(--color-success, #10b981);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
  }

  /* Ratings */
  :where(.p-ratings) {
    font-size: 0.875rem;
    margin-top: 0.5rem;
    opacity: 0.9;
  }

  /* Hover only for devices with hover capability */
  @media (hover: hover) and (pointer: fine) {
    :where(.p-card:hover) {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg, 0 12px 28px rgba(0,0,0,0.15));
    }
  }

  /* Mobile optimizations - already in critical CSS mostly */
  @media (max-width: 640px) {
    :where(.p-card__ctas--inline) {
      flex-direction: column;
    }

    :where(.p-btn) {
      width: 100%;
    }
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    :where(.p-card),
    :where(.p-btn) {
      transition: none !important;
    }
    :where(.p-card:hover) {
      transform: none !important;
    }
  }

  /* High contrast mode */
  @media (prefers-contrast: high) {
    :where(.p-card) {
      border-width: 2px;
    }
    :where(.p-btn) {
      border-width: 2px;
    }
  }
  {# Dark mode: no module-level block needed. Card vars fall back to --color-bg /
     --color-text / --color-border, which dark.css already flips behind the
     theme.dark_mode.enabled setting. The old ungated block referenced undefined
     --color-*-dark tokens and clobbered user-chosen card colors. #}
</style>
{% end_require_css %}