{% extends 'base.html' %}

{% block main %}

        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Cards</h1>
              <p class="ax-page-head__subtitle">The glass surface in every dress — stat, chart, media, accent-edge, interactive and collapsible.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--secondary ax-btn--pill" href="/ui/list-group/">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l11 0"/><path d="M9 12l11 0"/><path d="M9 18l11 0"/><path d="M5 6l0 .01"/><path d="M5 12l0 .01"/><path d="M5 18l0 .01"/></svg>
                <span class="ax-btn__label">List groups</span>
              </a>
              <button type="button" class="ax-btn ax-btn--primary">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
                <span class="ax-btn__label">New card</span>
              </button>
            </div>
          </div>
        </div>

        <!-- ════════════════ PAGE CONTENT ════════════════ -->
        <div class="ax-dash-grid">

          <!-- ═══════ SECTION: STAT CARDS ═══════ -->
          <div class="ax-col--12" style="margin-block-start:var(--ax-space-2);">
            <span class="ax-card__eyebrow" style="display:block;margin-bottom:var(--ax-space-1);">Variant 01</span>
            <h2 style="margin:0;font-family:var(--ax-font-display);font-size:var(--ax-text-xl);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Stat cards</h2>
            <p style="margin:4px 0 0;color:var(--ax-text-muted);font-size:var(--ax-text-sm);">KPI tiles with a coloured glyph, signed delta and an inline sparkline.</p>
          </div>

          <!-- 1 · Revenue -->
          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Total Revenue $748.2K, up 12.4%">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c1">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2"/><path d="M12 3v3m0 12v3"/></svg>
                </span>
                <span class="ax-kpi__delta ax-kpi__delta--up">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 15l6 -6l6 6"/></svg>12.4%
                </span>
              </div>
              <div class="ax-kpi__label">Total Revenue</div>
              <div class="ax-kpi__meta" style="justify-content:space-between;width:100%;">
                <div class="ax-kpi__value ax-num">$748.2K</div>
                <div class="ax-kpi__spark" data-ax-chart="apex" data-ax-chart-type="line" data-ax-chart-sparkline="true" data-ax-chart-tooltip="false" data-ax-chart-height="40" data-ax-chart-color="--ax-accent" data-ax-chart-series='[{"name":"Trend","data":[6,9,8,16,19,23,28,30]}]' style="min-height:40px" aria-hidden="true"></div>
              </div>
            </div>
          </div>

          <!-- 2 · Orders -->
          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Orders 1,248, up 8.1%">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c2">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M15 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M17 17h-11v-14h-2"/><path d="M6 5l14 1l-1 7h-13"/></svg>
                </span>
                <span class="ax-kpi__delta ax-kpi__delta--up">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 15l6 -6l6 6"/></svg>8.1%
                </span>
              </div>
              <div class="ax-kpi__label">Orders</div>
              <div class="ax-kpi__meta" style="justify-content:space-between;width:100%;">
                <div class="ax-kpi__value ax-num">1,248</div>
                <div class="ax-kpi__spark" data-ax-chart="apex" data-ax-chart-type="line" data-ax-chart-sparkline="true" data-ax-chart-tooltip="false" data-ax-chart-height="40" data-ax-chart-color="--ax-viz-cyan" data-ax-chart-series='[{"name":"Trend","data":[8,12,11,17,16,22,25,29]}]' style="min-height:40px" aria-hidden="true"></div>
              </div>
            </div>
          </div>

          <!-- 3 · Avg. order value -->
          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Average order value $59.95, up 2.6%">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c3">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"/><path d="M3 10l18 0"/><path d="M7 15l.01 0"/><path d="M11 15l2 0"/></svg>
                </span>
                <span class="ax-kpi__delta ax-kpi__delta--up">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 15l6 -6l6 6"/></svg>2.6%
                </span>
              </div>
              <div class="ax-kpi__label">Avg. order value</div>
              <div class="ax-kpi__meta" style="justify-content:space-between;width:100%;">
                <div class="ax-kpi__value ax-num">$59.95</div>
                <div class="ax-kpi__spark" data-ax-chart="apex" data-ax-chart-type="line" data-ax-chart-sparkline="true" data-ax-chart-tooltip="false" data-ax-chart-height="40" data-ax-chart-color="--ax-viz-violet" data-ax-chart-series='[{"name":"Trend","data":[12,13,15,14,18,20,22,25]}]' style="min-height:40px" aria-hidden="true"></div>
              </div>
            </div>
          </div>

          <!-- 4 · Customers -->
          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Customers 3,920, down 3.1%">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c4">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M21 21v-2a4 4 0 0 0 -3 -3.85"/></svg>
                </span>
                <span class="ax-kpi__delta ax-kpi__delta--down">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>3.1%
                </span>
              </div>
              <div class="ax-kpi__label">Customers</div>
              <div class="ax-kpi__meta" style="justify-content:space-between;width:100%;">
                <div class="ax-kpi__value ax-num">3,920</div>
                <div class="ax-kpi__spark" data-ax-chart="apex" data-ax-chart-type="line" data-ax-chart-sparkline="true" data-ax-chart-tooltip="false" data-ax-chart-height="40" data-ax-chart-color="--ax-viz-amber" data-ax-chart-series='[{"name":"Trend","data":[26,23,22,18,16,13,10,7]}]' style="min-height:40px" aria-hidden="true"></div>
              </div>
            </div>
          </div>

          <!-- ═══════ SECTION: CHART CARD + ACCENT-EDGE ═══════ -->
          <div class="ax-col--12" style="margin-block-start:var(--ax-space-4);">
            <span class="ax-card__eyebrow" style="display:block;margin-bottom:var(--ax-space-1);">Variant 02 &amp; 03</span>
            <h2 style="margin:0;font-family:var(--ax-font-display);font-size:var(--ax-text-xl);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Chart card &amp; accent-edge card</h2>
            <p style="margin:4px 0 0;color:var(--ax-text-muted);font-size:var(--ax-text-sm);">A card built around a chart, beside a card flagged with the accent rail for emphasis.</p>
          </div>

          <!-- Chart card -->
          <section class="ax-card ax-card--chart ax-col--8" role="region" aria-label="Revenue trend chart card">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Performance</span>
                <h2 class="ax-card__title">Revenue Trend</h2>
                <p class="ax-card__subtitle">Net revenue, last 12 months</p>
              </div>
              <div class="ax-card__actions">
                <div class="ax-btn-group ax-btn-group--segmented" role="radiogroup" aria-label="Date range" x-data="{ r:'12m' }">
                  <button type="button" class="ax-btn ax-btn--sm" role="radio" :aria-checked="r==='3m'" :class="{'is-selected':r==='3m'}" @click="r='3m'">3M</button>
                  <button type="button" class="ax-btn ax-btn--sm" role="radio" :aria-checked="r==='6m'" :class="{'is-selected':r==='6m'}" @click="r='6m'">6M</button>
                  <button type="button" class="ax-btn ax-btn--sm is-selected" role="radio" :aria-checked="r==='12m'" :class="{'is-selected':r==='12m'}" @click="r='12m'">12M</button>
                </div>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div
                data-ax-chart="apex"
                data-ax-chart-type="area"
                data-ax-chart-height="280"
                data-ax-chart-legend="none"
                data-ax-chart-accent="true"
                data-ax-chart-series='[{"name":"Revenue","data":[42100,48300,45200,53400,57100,55600,62400,60200,68900,72300,70100,74820]}]'
                aria-label="Area chart of monthly revenue over the last 12 months, headline $748.2K">
              </div>
            </div>
            <div class="ax-card__footer">
              <span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Peak month: <b style="color:var(--ax-text-strong);">June</b> at <span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">$74.8K</span></span>
              <a class="ax-link" href="#" style="margin-inline-start:auto;">Full report →</a>
            </div>
          </section>

          <!-- Accent-edge card -->
          <section class="ax-card ax-card--accent-edge ax-col--4" role="region" aria-label="Plan usage">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Plan</span>
                <h2 class="ax-card__title">Scale — usage</h2>
                <p class="ax-card__subtitle">Renews Jul 1, 2026</p>
              </div>
              <span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--pill">Active</span>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-5);">
              <div>
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:6px;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">API calls</span><b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);font-size:var(--ax-text-sm);">812K / 1M</b></div>
                <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:81%;"></div></div></div>
              </div>
              <div>
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:6px;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Seats</span><b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);font-size:var(--ax-text-sm);">18 / 25</b></div>
                <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:72%;background:var(--ax-viz-cyan);"></div></div></div>
              </div>
              <div>
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:6px;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Storage</span><b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);font-size:var(--ax-text-sm);">44 / 50 GB</b></div>
                <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:88%;background:var(--ax-warning-500);"></div></div></div>
              </div>
            </div>
            <div class="ax-card__footer">
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm ax-btn--block">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 8l0 4l2 2"/></svg>
                <span class="ax-btn__label">Manage subscription</span>
              </button>
            </div>
          </section>

          <!-- ═══════ SECTION: MEDIA CARDS ═══════ -->
          <div class="ax-col--12" style="margin-block-start:var(--ax-space-4);">
            <span class="ax-card__eyebrow" style="display:block;margin-bottom:var(--ax-space-1);">Variant 04</span>
            <h2 style="margin:0;font-family:var(--ax-font-display);font-size:var(--ax-text-xl);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Media cards</h2>
            <p style="margin:4px 0 0;color:var(--ax-text-muted);font-size:var(--ax-text-sm);">A visual banner above the body — product, article and profile flavours.</p>
          </div>

          <!-- Product media card -->
          <section class="ax-card ax-card--media ax-col--4" role="region" aria-label="Brass Task Light product card">
            <div class="ax-card__media">
              <div class="ax-ratio" style="--ax-ratio:16/10;border-radius:0;background:linear-gradient(135deg,color-mix(in oklab,var(--ax-viz-amber) 26%,var(--ax-surface)),color-mix(in oklab,var(--ax-viz-pink) 22%,var(--ax-surface)));display:grid;place-items:center;">
                <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="var(--ax-text-strong)" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="opacity:.85;"><path d="M8 9h8v10a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z"/><path d="M9 6a3 3 0 0 1 6 0"/><path d="M8 9l8 0"/></svg>
              </div>
              <span class="ax-badge ax-badge--solid ax-badge--accent ax-badge--pill" style="position:absolute;top:var(--ax-space-3);inset-inline-start:var(--ax-space-3);">Bestseller</span>
            </div>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-2);">
              <div class="ax-cluster" style="justify-content:space-between;">
                <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Lighting · APG-0008</span>
                <span class="ax-cluster" style="gap:3px;color:var(--ax-viz-amber);font-size:var(--ax-text-xs);"><svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" stroke="none" aria-hidden="true"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><b class="ax-num" style="color:var(--ax-text-strong);">4.9</b></span>
              </div>
              <h3 style="margin:0;font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Brass Task Light</h3>
              <p style="margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Warm dimmable desk lamp with a machined brass arm and weighted base.</p>
              <div class="ax-cluster" style="justify-content:space-between;margin-top:var(--ax-space-2);">
                <span class="ax-num" style="font-family:var(--ax-font-display);font-size:var(--ax-text-xl);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">$182.00</span>
                <button type="button" class="ax-btn ax-btn--primary ax-btn--sm">
                  <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M15 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M17 17h-11v-14h-2"/><path d="M6 5l14 1l-1 7h-13"/></svg>
                  <span class="ax-btn__label">Add</span>
                </button>
              </div>
            </div>
          </section>

          <!-- Article media card -->
          <section class="ax-card ax-card--media ax-col--4" role="region" aria-label="Article — designing for dark mode">
            <div class="ax-card__media">
              <div class="ax-ratio" style="--ax-ratio:16/10;border-radius:0;background:linear-gradient(135deg,color-mix(in oklab,var(--ax-viz-violet) 30%,var(--ax-surface)),color-mix(in oklab,var(--ax-viz-cyan) 22%,var(--ax-surface)));display:grid;place-items:center;">
                <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="var(--ax-text-strong)" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="opacity:.85;"><path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"/><path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"/><path d="M3 6l0 13"/><path d="M12 6l0 13"/><path d="M21 6l0 13"/></svg>
              </div>
            </div>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-2);">
              <div class="ax-cluster" style="gap:var(--ax-space-2);">
                <span class="ax-badge ax-badge--soft ax-badge--info">Design</span>
                <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">6 min read</span>
              </div>
              <h3 style="margin:0;font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Designing trustworthy dark interfaces</h3>
              <p style="margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Contrast, elevation and the quiet art of making a glass surface readable after dark.</p>
              <div class="ax-cluster" style="gap:var(--ax-space-3);margin-top:var(--ax-space-3);flex-wrap:nowrap;">
                <span class="ax-avatar ax-avatar--sm" style="background:var(--ax-accent-wash);color:var(--ax-accent);">LB</span>
                <div style="flex:1 1 auto;min-width:0;">
                  <div style="font-size:var(--ax-text-sm);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Lena Brandt</div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Jun 9, 2026</div>
                </div>
                <a class="ax-link" href="#">Read →</a>
              </div>
            </div>
          </section>

          <!-- Profile media card -->
          <section class="ax-card ax-card--media ax-col--4" role="region" aria-label="Team member profile card">
            <div class="ax-card__media">
              <div class="ax-ratio" style="--ax-ratio:16/7;border-radius:0;background:var(--ax-gradient-plate);"></div>
              <span class="ax-avatar ax-avatar--xl ax-avatar--ringed" style="position:absolute;inset-block-end:-28px;inset-inline-start:var(--ax-space-6);background:var(--ax-surface-solid);color:var(--ax-viz-cyan);font-weight:var(--ax-weight-semibold);">MR</span>
            </div>
            <div class="ax-card__body" style="padding-top:36px;display:flex;flex-direction:column;gap:var(--ax-space-1);">
              <div class="ax-cluster" style="justify-content:space-between;">
                <h3 style="margin:0;font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Marcus Reyes</h3>
                <span class="ax-badge ax-badge--soft ax-badge--success"><span class="ax-badge__dot"></span>Online</span>
              </div>
              <p style="margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Engineering Manager · Northwind Labs</p>
              <div class="ax-cluster" style="gap:var(--ax-space-5);margin-top:var(--ax-space-4);">
                <div><div class="ax-num" style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">142</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Reviews</div></div>
                <div><div class="ax-num" style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">38</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Projects</div></div>
                <div><div class="ax-num" style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">4.9</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Rating</div></div>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-3);margin-top:var(--ax-space-4);">
                <button type="button" class="ax-btn ax-btn--primary ax-btn--sm" style="flex:1;">Message</button>
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm" style="flex:1;">Profile</button>
              </div>
            </div>
          </section>

          <!-- ═══════ SECTION: INTERACTIVE + COLLAPSIBLE ═══════ -->
          <div class="ax-col--12" style="margin-block-start:var(--ax-space-4);">
            <span class="ax-card__eyebrow" style="display:block;margin-bottom:var(--ax-space-1);">Variant 05 &amp; 06</span>
            <h2 style="margin:0;font-family:var(--ax-font-display);font-size:var(--ax-text-xl);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Interactive &amp; collapsible cards</h2>
            <p style="margin:4px 0 0;color:var(--ax-text-muted);font-size:var(--ax-text-sm);">Selectable tiles that lift on hover, and a card whose body folds away.</p>
          </div>

          <!-- Interactive selectable plan tiles -->
          <div class="ax-col--8" x-data="{ plan:'scale' }">
            <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ax-space-5);">
              <button type="button" class="ax-card ax-card--interactive" :class="{'is-selected':plan==='starter'}" @click="plan='starter'" :aria-pressed="plan==='starter'" style="text-align:start;align-items:stretch;">
                <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-2);">
                  <div class="ax-cluster" style="justify-content:space-between;">
                    <span class="ax-kpi__icon ax-kpi__icon--c2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 11l3 3l8 -8"/><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"/></svg></span>
                    <svg x-show="plan==='starter'" x-cloak viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="var(--ax-accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>
                  </div>
                  <h3 style="margin:var(--ax-space-2) 0 0;font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Starter</h3>
                  <div class="ax-num" style="font-family:var(--ax-font-display);font-size:var(--ax-text-2xl);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">$0<span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);font-family:var(--ax-font-sans);font-weight:var(--ax-weight-regular);">/mo</span></div>
                  <p style="margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Up to 3 seats and 10K API calls. Community support.</p>
                </div>
              </button>
              <button type="button" class="ax-card ax-card--interactive is-selected" :class="{'is-selected':plan==='scale'}" @click="plan='scale'" :aria-pressed="plan==='scale'" style="text-align:start;align-items:stretch;">
                <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-2);">
                  <div class="ax-cluster" style="justify-content:space-between;">
                    <span class="ax-kpi__icon ax-kpi__icon--c1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"/></svg></span>
                    <svg x-show="plan==='scale'" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="var(--ax-accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>
                  </div>
                  <div class="ax-cluster" style="gap:var(--ax-space-2);margin-top:var(--ax-space-2);"><h3 style="margin:0;font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Scale</h3><span class="ax-badge ax-badge--soft ax-badge--accent">Popular</span></div>
                  <div class="ax-num" style="font-family:var(--ax-font-display);font-size:var(--ax-text-2xl);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">$49<span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);font-family:var(--ax-font-sans);font-weight:var(--ax-weight-regular);">/mo</span></div>
                  <p style="margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Up to 25 seats and 1M API calls. Priority support &amp; SSO.</p>
                </div>
              </button>
            </div>
            <p style="margin:var(--ax-space-3) 0 0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Selected plan: <b style="color:var(--ax-text-strong);text-transform:capitalize;" x-text="plan"></b></p>
          </div>

          <!-- Collapsible card -->
          <section class="ax-card ax-col--4" role="region" aria-label="Order summary, collapsible" x-data="{ open:true }">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Order #10482</span>
                <h2 class="ax-card__title">Order summary</h2>
              </div>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" @click="open=!open" :aria-expanded="open" aria-controls="card-collapse-body" :aria-label="open ? 'Collapse order summary' : 'Expand order summary'">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" :style="open ? '' : 'transform:rotate(-90deg);'" style="transition:transform var(--ax-motion-base) var(--ax-ease-standard);"><path d="M6 9l6 6l6 -6"/></svg>
              </button>
            </div>
            <div class="ax-card__body ax-flex" id="card-collapse-body" x-show="open" x-collapse style="padding-top:0;flex-direction:column;gap:var(--ax-space-3);">
              <div class="ax-cluster" style="justify-content:space-between;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Matte Ceramic Mug × 2</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);">$48.00</span></div>
              <div class="ax-cluster" style="justify-content:space-between;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Aperture Desk Lamp × 1</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);">$129.00</span></div>
              <div class="ax-cluster" style="justify-content:space-between;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Grid Notebook A5 × 1</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);">$16.00</span></div>
              <hr class="ax-divider">
              <div class="ax-cluster" style="justify-content:space-between;"><span style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Total</span><span class="ax-num" style="font-family:var(--ax-font-display);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">$193.00</span></div>
            </div>
          </section>

        </div>
{% endblock %}