@repobit/dex-system-design 0.23.12 → 0.23.13

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.13](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.12...@repobit/dex-system-design@0.23.13) (2026-04-03)
+
+### Bug Fixes
+
+* **DEX-1014:** fix for barchart alignment
+
+
 ## [0.23.12](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.11...@repobit/dex-system-design@0.23.12) (2026-04-03)
 
 **Note:** Version bump only for package @repobit/dex-system-design

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.12",
+  "version": "0.23.13",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -89,5 +89,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "86f179bab0198a14589c7297b74c8c045120c13d"
+  "gitHead": "d009cffbbe3f294b3b3efea4834b9b25d4e7baa1"
 }

package/src/components/compare/compare.css.js

@@ -2,22 +2,17 @@ import { css } from "lit";
 
 export default css`
 
-/* ──────────────────────────────────────────────────────────────
-   Compare layout — uses design-system tokens (src/tokens/tokens.js).
-   --cs-* are local aliases where themes override bar colors.
-──────────────────────────────────────────────────────────────── */
-
 :host(bd-compare-section) {
   display: block;
 
-  --cs-bar-primary-fg:     var(--color-neutral-0);
-  --cs-bar-primary-bg:     var(--color-blue-500);
-  --cs-bar-secondary-bg:   var(--color-neutral-100);
-  --cs-bar-track-bg:       transparent;
-  --cs-bar-track-border:   var(--color-neutral-200);
-  --cs-bar-height:         var(--dimension-48px);
-  --cs-gap:                var(--spacing-32);
-  --cs-grid-max:           1228px;
+  --cs-bar-primary-fg:   var(--color-neutral-0);
+  --cs-bar-primary-bg:   var(--color-blue-500);
+  --cs-bar-secondary-bg: var(--color-neutral-100);
+  --cs-bar-track-bg:     transparent;
+  --cs-bar-track-border: var(--color-neutral-200);
+  --cs-bar-height:       var(--dimension-48px);
+  --cs-gap:              var(--spacing-32);
+  --cs-grid-max:         1228px;
 }
 
 :host(compare-card) {
@@ -30,11 +25,6 @@ export default css`
   width:   100%;
 }
 
-
-/* ──────────────────────────────────────────────────────────────
-   2. compare-section
-──────────────────────────────────────────────────────────────── */
-
 .cs-sr-only {
   position:    absolute;
   width:       1px;
@@ -59,13 +49,8 @@ export default css`
   margin:     0 auto var(--spacing-40);
 }
 
-.cs-title {
-  margin: 0 0 var(--spacing-8);
-}
-
-.cs-subtitle {
-  margin: 0;
-}
+.cs-title    { margin: 0 0 var(--spacing-8); }
+.cs-subtitle { margin: 0; }
 
 .cs-grid {
   display:               grid;
@@ -83,20 +68,16 @@ export default css`
   }
 }
 
-
-/* ──────────────────────────────────────────────────────────────
-   3. compare-card
-──────────────────────────────────────────────────────────────── */
-
 .card {
-  background:     var(--color-neutral-25);
-  border-radius:  var(--radius-3xl);
-  padding:        var(--spacing-32);
-  display:        flex;
-  flex-direction: column;
-  gap:            var(--spacing-24);
-  box-sizing:     border-box;
-  height:         100%;
+  background:      var(--color-neutral-25);
+  border-radius:   var(--radius-3xl);
+  padding:         var(--spacing-32);
+  display:         flex;
+  flex-direction:  column;
+  gap:             var(--spacing-24);
+  box-sizing:      border-box;
+  height:          100%;
+  justify-content: flex-start;
 }
 
 .card-header {
@@ -104,13 +85,13 @@ export default css`
   flex-direction: column;
   align-items:    flex-start;
   gap:            var(--spacing-8);
-  flex:           1 1 auto;
+  flex:           0 0 auto;
 }
 
 .card-icon-wrap {
   flex-shrink: 0;
-  width:       var(--icon-2xl-size);
-  height:      var(--icon-2xl-size);
+  width:       var(--icon-2xl-size, 48px);
+  height:      var(--icon-2xl-size, 48px);
 }
 
 .card-icon-wrap bd-img {
@@ -126,13 +107,8 @@ export default css`
   align-self:     stretch;
 }
 
-.card-title {
-  margin: 0;
-}
-
-.card-description {
-  margin: 0;
-}
+.card-title       { margin: 0; }
+.card-description { margin: 0; }
 
 .card-bars {
   display:        flex;
@@ -148,11 +124,6 @@ export default css`
   flex:   0 0 auto;
 }
 
-
-/* ──────────────────────────────────────────────────────────────
-   4. compare-bar
-──────────────────────────────────────────────────────────────── */
-
 .bar-track {
   position:      relative;
   height:        var(--cs-bar-height);
@@ -180,14 +151,10 @@ export default css`
   min-width:       0;
 }
 
-:host(compare-bar.compare-no-motion) .bar-fill {
-  transition: none;
-}
+:host(compare-bar.compare-no-motion) .bar-fill { transition: none; }
 
 @media (prefers-reduced-motion: reduce) {
-  .bar-fill {
-    transition: none;
-  }
+  .bar-fill { transition: none; }
 }
 
 .bar-label {
@@ -198,9 +165,7 @@ export default css`
   white-space:   nowrap;
 }
 
-.bar-score {
-  flex: 0 0 auto;
-}
+.bar-score { flex: 0 0 auto; }
 
 .bar-label,
 .bar-score {
@@ -210,11 +175,8 @@ export default css`
   letter-spacing: var(--typography-body-regular-letterSpacing);
 }
 
-.bar-score {
-  font-variant-numeric: tabular-nums;
-}
+.bar-score { font-variant-numeric: tabular-nums; }
 
-/* ── primary (Bitdefender) ── */
 :host(compare-bar[variant="primary"]) .bar-fill {
   background: var(--cs-bar-primary-bg);
 }
@@ -224,7 +186,6 @@ export default css`
   font-weight: var(--typography-fontWeight-semibold);
 }
 
-/* ── secondary ── */
 :host(compare-bar[variant="secondary"]) .bar-fill,
 :host(compare-bar:not([variant]))       .bar-fill {
   background: var(--cs-bar-secondary-bg);
@@ -237,32 +198,24 @@ export default css`
   font-weight: var(--typography-body-regular-fontWeight);
 }
 
-
-/* ══════════════════════════════════════════════════════════════
-   5. THEME OVERRIDES (DS palette)
-══════════════════════════════════════════════════════════════ */
-
 :host(bd-compare-section.theme-green) {
   --cs-bar-primary-bg: var(--color-green-500);
   --cs-bar-primary-fg: var(--color-neutral-0);
   --cs-icon-color:     var(--color-green-500);
   --cs-icon-filter: invert(35%) sepia(72%) saturate(500%) hue-rotate(100deg) brightness(95%) contrast(95%);
 }
-
 :host(bd-compare-section.theme-red) {
   --cs-bar-primary-bg: var(--color-red-500);
   --cs-bar-primary-fg: var(--color-neutral-0);
   --cs-icon-color:     var(--color-red-500);
   --cs-icon-filter: invert(22%) sepia(90%) saturate(700%) hue-rotate(345deg) brightness(95%) contrast(95%);
 }
-
 :host(bd-compare-section.theme-purple) {
   --cs-bar-primary-bg: #7c3aed;
   --cs-bar-primary-fg: var(--color-neutral-0);
   --cs-icon-color:     #7c3aed;
   --cs-icon-filter: invert(25%) sepia(80%) saturate(800%) hue-rotate(255deg) brightness(90%) contrast(95%);
 }
-
 :host(bd-compare-section.theme-dark) {
   --cs-bar-primary-bg: var(--color-blue-400);
   --cs-bar-primary-fg: var(--color-neutral-0);
@@ -270,17 +223,6 @@ export default css`
   --cs-icon-filter: invert(65%) sepia(50%) saturate(500%) hue-rotate(195deg) brightness(105%) contrast(95%);
 }
 
-
-/* ══════════════════════════════════════════════════════════════
-   6. BAR SIZE VARIANTS
-══════════════════════════════════════════════════════════════ */
-
-:host(bd-compare-section.bars-tall) {
-  --cs-bar-height: var(--dimension-55px);
-}
-
-:host(bd-compare-section.bars-compact) {
-  --cs-bar-height: var(--dimension-40px);
-  --cs-gap:        var(--spacing-24);
-}
+:host(bd-compare-section.bars-tall)    { --cs-bar-height: var(--dimension-55px); }
+:host(bd-compare-section.bars-compact) { --cs-bar-height: var(--dimension-40px); --cs-gap: var(--spacing-24); }
 `;

package/src/components/compare/compare.js

@@ -1,18 +1,6 @@
 import { LitElement, html, nothing } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import compareCSS from "./compare.css.js";
-// ═══════════════════════════════════════════════════════════════
-//  compare-bar
-//  Attributes / Properties:
-//    label       {String}  – Brand or product name
-//    score       {Number}  – Numeric score
-//    max-score   {Number}  – Max possible score (default: 6)
-//    variant     {String}  – "primary" | "secondary"
-//    score-label {String}  – Optional override text for the score
-//    reference-score {Number} – Baseline score (e.g. Bitdefender). With stretch
-//                               (set by compare-card), width maps [r_min,1] → [fill_min,100%].
-//    scale           {Number} – Only used when reference-score is unset (× max-score %)
-// ═══════════════════════════════════════════════════════════════
 
 function readStretchVars(el) {
   const styles = getComputedStyle(el);
@@ -24,32 +12,25 @@ function readStretchVars(el) {
   };
 }
 
-const SCORE_ANIM_MS = 800;
+const SCORE_ANIM_MS     = 800;
 const SCORE_ANIM_EASING = (t) => 1 - (1 - t) ** 3;
 
-/** After first paint of this document, intro is “consumed” (scroll-back won’t replay). */
-let compareIntroDone = false;
-/** @type {ReturnType<typeof setTimeout> | 0} */
+let compareIntroDone  = false;
 let compareIntroTimer = 0;
 
-function shouldPlayCompareIntro() {
-  return !compareIntroDone;
-}
+function shouldPlayCompareIntro() { return !compareIntroDone; }
 
 function scheduleCompareIntroDone() {
   if (compareIntroDone || compareIntroTimer) return;
   compareIntroTimer = setTimeout(() => {
     compareIntroTimer = 0;
-    compareIntroDone = true;
+    compareIntroDone  = true;
   }, SCORE_ANIM_MS + 120);
 }
 
 function prefersReducedMotion() {
-  try {
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  } catch {
-    return false;
-  }
+  try { return window.matchMedia("(prefers-reduced-motion: reduce)").matches; }
+  catch { return false; }
 }
 
 if (typeof globalThis !== "undefined" && prefersReducedMotion()) {
@@ -72,16 +53,15 @@ class CompareBar extends LitElement {
 
   constructor() {
     super();
-    this.label = "";
-    this.score = 0;
-    this.maxScore = 6;
-    this.variant = "secondary";
-    this.scoreLabel = "";
+    this.label          = "";
+    this.score          = 0;
+    this.maxScore       = 6;
+    this.variant        = "secondary";
+    this.scoreLabel     = "";
     this.referenceScore = 0;
-    this.scale = 1;
+    this.scale          = 1;
     this._animatedScore = NaN;
-    /** @type {number} */
-    this._scoreAnimRaf = 0;
+    this._scoreAnimRaf  = 0;
   }
 
   connectedCallback() {
@@ -105,15 +85,7 @@ class CompareBar extends LitElement {
   updated(changed) {
     super.updated(changed);
     this.setAttribute("aria-label", this._barAriaLabel());
-    const deps = [
-      "score",
-      "referenceScore",
-      "scoreLabel",
-      "variant",
-      "maxScore",
-      "label"
-
-    ];
+    const deps = ["score", "referenceScore", "scoreLabel", "variant", "maxScore", "label"];
     if (!deps.some((k) => changed.has(k))) return;
 
     this._cancelScoreAnim();
@@ -132,15 +104,14 @@ class CompareBar extends LitElement {
 
   _shouldAnimateCompetitorScore() {
     if (this.variant === "primary" || this.scoreLabel) return false;
-    const t = parseFloat(this.score);
-    return Number.isFinite(t);
+    return Number.isFinite(parseFloat(this.score));
   }
 
   _scoreAnimStart() {
     const target = parseFloat(this.score);
-    const ref = parseFloat(this.referenceScore);
-    const maxM = parseFloat(this.maxScore) || 6;
-    let start = ref > 0 ? ref : maxM;
+    const ref    = parseFloat(this.referenceScore);
+    const maxM   = parseFloat(this.maxScore) || 6;
+    let start    = ref > 0 ? ref : maxM;
     if (start <= target) start = Math.min(maxM, target + 0.2);
     return start;
   }
@@ -154,26 +125,22 @@ class CompareBar extends LitElement {
 
   _runScoreAnim() {
     const target = parseFloat(this.score);
-    const start = this._animatedScore;
+    const start  = this._animatedScore;
     if (!Number.isFinite(target) || !Number.isFinite(start)) return;
 
     const t0 = performance.now();
-
     const tick = (now) => {
-      const elapsed = now - t0;
-      const u = Math.min(1, elapsed / SCORE_ANIM_MS);
+      const u = Math.min(1, (now - t0) / SCORE_ANIM_MS);
       const e = SCORE_ANIM_EASING(u);
-      const v = start + (target - start) * e;
-      this._animatedScore = v;
+      this._animatedScore = start + (target - start) * e;
       if (u < 1) {
         this._scoreAnimRaf = requestAnimationFrame(tick);
       } else {
-        this._scoreAnimRaf = 0;
+        this._scoreAnimRaf  = 0;
         this._animatedScore = NaN;
         this.requestUpdate();
       }
     };
-
     this._scoreAnimRaf = requestAnimationFrame(tick);
   }
 
@@ -183,7 +150,7 @@ class CompareBar extends LitElement {
 
     const ref = parseFloat(this.referenceScore);
     if (ref > 0) {
-      const r = Math.min(1, Math.max(0, s / ref));
+      const r         = Math.min(1, Math.max(0, s / ref));
       const linearPct = r * 100;
       const { stretch, rMinStr, fillMin, gamma } = readStretchVars(this);
 
@@ -196,12 +163,12 @@ class CompareBar extends LitElement {
         return Math.min(100, Math.max(0, linearPct));
       }
 
-      const denom = 1 - rMin;
-      const wMin = Number.isFinite(fillMin) ? fillMin : 50;
-      const g = Number.isFinite(gamma) && gamma > 0 ? gamma : 1;
-      const u = (r - rMin) / denom;
-      const t = Math.min(1, Math.max(0, u));
-      const shaped = Math.pow(t, g);
+      const denom     = 1 - rMin;
+      const wMin      = Number.isFinite(fillMin) ? fillMin : 50;
+      const g         = Number.isFinite(gamma) && gamma > 0 ? gamma : 1;
+      const u         = (r - rMin) / denom;
+      const t         = Math.min(1, Math.max(0, u));
+      const shaped    = Math.pow(t, g);
       const stretched = wMin + shaped * (100 - wMin);
       return Math.min(100, Math.max(0, stretched));
     }
@@ -212,26 +179,20 @@ class CompareBar extends LitElement {
     return rawPct * (this.scale || 1);
   }
 
-  get _displayScore() {
-    return this.scoreLabel || this.score;
-  }
+  get _displayScore() { return this.scoreLabel || this.score; }
 
   _renderScoreText() {
-    if (this.variant === "primary" || this.scoreLabel) {
-      return this._displayScore;
-    }
+    if (this.variant === "primary" || this.scoreLabel) return this._displayScore;
     if (Number.isFinite(this._animatedScore)) {
       return CompareBar._formatScoreTick(this._animatedScore);
     }
     return this._displayScore;
   }
 
-  /** @param {number} v */
   static _formatScoreTick(v) {
     return (Math.round(v * 100) / 100).toFixed(2);
   }
 
-  /** Accessible name uses final numeric score (not the intro animation value). */
   _barAriaLabel() {
     const max = this.maxScore ?? 6;
     const val = this.scoreLabel || this.score;
@@ -252,9 +213,6 @@ class CompareBar extends LitElement {
 
 customElements.define("compare-bar", CompareBar);
 
-// ═══════════════════════════════════════════════════════════════
-//  compare-card
-// ═══════════════════════════════════════════════════════════════
 
 class CompareCard extends LitElement {
   static _idSeq = 0;
@@ -265,35 +223,28 @@ class CompareCard extends LitElement {
     footnote       : { type: String },
     footnoteHref   : { type: String, attribute: "footnote-href" },
     iconSrc        : { type: String, attribute: "icon-src" },
-    /** When true, competitor bar widths use stretched mapping so small score gaps read clearly. */
     barStretch     : { type: Boolean, attribute: "bar-stretch" },
-    /** Visual floor % for the weakest competitor (rest of span goes to 100% / Bitdefender). */
-    barFillMin     : { type: Number, attribute: "bar-fill-min" },
-    /**
-     * Curve on normalized rank within [r_min, 1]. >1 pulls stronger competitors down vs Bitdefender
-     * (bigger BD gap); =1 is pure linear spread.
-     */
-    barStretchGamma: { type: Number, attribute: "bar-stretch-gamma" },
-    /** Shown only in the screen-reader chart hint (scores are “out of” this scale). */
-    chartScale     : { type: Number, attribute: "chart-scale" }
+    barFillMin     : { type: Number,  attribute: "bar-fill-min" },
+    barStretchGamma: { type: Number,  attribute: "bar-stretch-gamma" },
+    chartScale     : { type: Number,  attribute: "chart-scale" }
   };
 
   static styles = [tokens, compareCSS];
 
   constructor() {
     super();
-    const n = ++CompareCard._idSeq;
-    this._headingId = `compare-card-title-${n}`;
-    this._chartHelpId = `compare-card-chart-${n}`;
-    this.title = "";
-    this.description = "";
-    this.footnote = "";
-    this.footnoteHref = "";
-    this.iconSrc = "";
-    this.barStretch = true;
-    this.barFillMin = 50;
+    const n              = ++CompareCard._idSeq;
+    this._headingId      = `compare-card-title-${n}`;
+    this._chartHelpId    = `compare-card-chart-${n}`;
+    this.title           = "";
+    this.description     = "";
+    this.footnote        = "";
+    this.footnoteHref    = "";
+    this.iconSrc         = "";
+    this.barStretch      = true;
+    this.barFillMin      = 50;
     this.barStretchGamma = 1;
-    this.chartScale = 6;
+    this.chartScale      = 6;
   }
 
   firstUpdated() {
@@ -316,10 +267,9 @@ class CompareCard extends LitElement {
     if (!slot) return;
 
     const apply = () => {
-      const nodes = slot.assignedElements({ flatten: true });
-      const bars = nodes.filter(
-        (el) => el.localName === "compare-bar"
-      );
+      const bars = slot
+        .assignedElements({ flatten: true })
+        .filter((el) => el.localName === "compare-bar");
 
       if (!this.barStretch) {
         this.style.setProperty("--cs-bar-stretch", "0");
@@ -328,7 +278,7 @@ class CompareCard extends LitElement {
       }
 
       const primary = bars.find((b) => b.variant === "primary");
-      const ref = primary ? parseFloat(primary.score) : 0;
+      const ref     = primary ? parseFloat(primary.score) : 0;
 
       if (!ref || ref <= 0) {
         this.style.setProperty("--cs-bar-stretch", "0");
@@ -356,10 +306,7 @@ class CompareCard extends LitElement {
         this.style.setProperty("--cs-bar-stretch", "1");
         this.style.setProperty("--cs-stretch-r-min", String(rMin));
         this.style.setProperty("--cs-bar-fill-min", String(this.barFillMin));
-        this.style.setProperty(
-          "--cs-bar-stretch-gamma",
-          String(this.barStretchGamma)
-        );
+        this.style.setProperty("--cs-bar-stretch-gamma", String(this.barStretchGamma));
       }
 
       this._refreshBars(bars);
@@ -374,6 +321,20 @@ class CompareCard extends LitElement {
     });
   }
 
+  /**
+   * Called by CompareSection to set a fixed min-height on .card-header
+   * so all headers in the same row are the same height.
+   */
+  setHeaderMinHeight(px) {
+    const header = this.shadowRoot?.querySelector(".card-header");
+    if (header) header.style.minHeight = px != null ? `${px}px` : "";
+  }
+
+  getHeaderHeight() {
+    const header = this.shadowRoot?.querySelector(".card-header");
+    return header ? header.getBoundingClientRect().height : 0;
+  }
+
   _renderFootnote() {
     if (!this.footnote) return "";
 
@@ -381,8 +342,8 @@ class CompareCard extends LitElement {
       return html`<bd-p kind="xsmall" class="card-footnote">${this.footnote}</bd-p>`;
     }
 
-    const splitOn = "Source ";
-    const idx = this.footnote.indexOf(splitOn);
+    const splitOn    = "Source ";
+    const idx        = this.footnote.indexOf(splitOn);
 
     if (idx === -1) {
       return html`
@@ -394,7 +355,7 @@ class CompareCard extends LitElement {
       `;
     }
 
-    const before = this.footnote.slice(0, idx + splitOn.length);
+    const before     = this.footnote.slice(0, idx + splitOn.length);
     const linkedText = this.footnote.slice(idx + splitOn.length);
 
     return html`
@@ -417,34 +378,34 @@ class CompareCard extends LitElement {
         <p class="cs-sr-only" id="${this._chartHelpId}">
           Bar lengths are scaled for visibility between brands. Use the announced scores for exact values; scale is out of ${this.chartScale}.
         </p>
+
         <div class="card-header">
           ${this.iconSrc
             ? html`
-            <div class="card-icon-wrap" aria-hidden="true">
-              <bd-img
-                src="${this.iconSrc}"
-                alt=""
-                width="48"
-                height="48"
-                fit="contain"
-                radius="none"
-                shadow="none"
-                loading="eager"
-              ></bd-img>
-            </div>
-          `
+              <div class="card-icon-wrap" aria-hidden="true">
+                <bd-img
+                  src="${this.iconSrc}"
+                  alt=""
+                  width="48"
+                  height="48"
+                  fit="contain"
+                  radius="none"
+                  shadow="none"
+                  loading="eager"
+                ></bd-img>
+              </div>
+            `
             : ""}
-
           <div class="card-text-wrap">
             ${isMobile
               ? html`<bd-h as="h5" class="card-title" heading-id="${this._headingId}">${this.title}</bd-h>`
               : html`<bd-h as="h4" class="card-title" heading-id="${this._headingId}">${this.title}</bd-h>`}
             ${this.description
               ? html`
-              <bd-p kind="${isMobile ? "small" : "regular"}" class="card-description">
-                ${this.description}
-              </bd-p>
-            `
+                <bd-p kind="${isMobile ? "small" : "regular"}" class="card-description">
+                  ${this.description}
+                </bd-p>
+              `
               : ""}
           </div>
         </div>
@@ -461,9 +422,6 @@ class CompareCard extends LitElement {
 
 customElements.define("compare-card", CompareCard);
 
-// ═══════════════════════════════════════════════════════════════
-//  compare-section
-// ═══════════════════════════════════════════════════════════════
 
 class CompareSection extends LitElement {
   static _idSeq = 0;
@@ -480,14 +438,74 @@ class CompareSection extends LitElement {
   constructor() {
     super();
     this._sectionTitleId = `bd-compare-section-title-${++CompareSection._idSeq}`;
-    this.title = "";
-    this.subtitle = "";
-    this.columns = 2;
-    this.gap = "";
+    this.title           = "";
+    this.subtitle        = "";
+    this.columns         = 2;
+    this.gap             = "";
+    this._syncRaf        = 0;
+    this._ro             = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // ResizeObserver — re-sync whenever any card changes size
+    this._ro = new ResizeObserver(() => this._syncHeaderHeights());
+    this._ro.observe(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._ro?.disconnect();
+    this._ro = null;
+    if (this._syncRaf) cancelAnimationFrame(this._syncRaf);
   }
 
   firstUpdated() {
     scheduleCompareIntroDone();
+    // Initial sync after first paint
+    requestAnimationFrame(() => this._syncHeaderHeights());
+  }
+
+  /**
+   * Reads all compare-card children, finds the tallest .card-header
+   * across all of them, then sets that height as minHeight on every card.
+   * Runs in a rAF to batch DOM reads before writes.
+   */
+  _syncHeaderHeights() {
+    if (this._syncRaf) cancelAnimationFrame(this._syncRaf);
+    this._syncRaf = requestAnimationFrame(() => {
+      this._syncRaf = 0;
+
+      const isMobile = window.matchMedia("(max-width: 767px)").matches;
+
+      // Get all slotted compare-card elements
+      const slot = this.shadowRoot?.querySelector("slot");
+      if (!slot) return;
+
+      const cards = slot
+        .assignedElements({ flatten: true })
+        .filter((el) => el.localName === "compare-card");
+
+      if (!cards.length) return;
+
+      // On mobile reset all — no alignment needed
+      if (isMobile) {
+        cards.forEach((c) => c.setHeaderMinHeight?.(null));
+        return;
+      }
+
+      // Reset first so we get natural heights
+      cards.forEach((c) => c.setHeaderMinHeight?.(null));
+
+      // Read heights after reset
+      requestAnimationFrame(() => {
+        const heights = cards.map((c) => c.getHeaderHeight?.() ?? 0);
+        const maxH    = Math.max(...heights);
+
+        // Write — set all to tallest
+        cards.forEach((c) => c.setHeaderMinHeight?.(maxH));
+      });
+    });
   }
 
   render() {
@@ -503,27 +521,25 @@ class CompareSection extends LitElement {
       >
         ${this.title || this.subtitle
           ? html`
-          <div class="cs-heading">
-            ${this.title
-              ? html`
-              ${isMobile
-                ? html`<bd-h as="h4" class="cs-title" heading-id="${this._sectionTitleId}">${this.title}</bd-h>`
-                : html`<bd-h as="h3" class="cs-title" heading-id="${this._sectionTitleId}">${this.title}</bd-h>`}
-            `
-              : ""}
-            ${this.subtitle
-              ? html`
-              <bd-p kind="${isMobile ? "small" : "regular"}" class="cs-subtitle">
-                ${this.subtitle}
-              </bd-p>
-            `
-              : ""}
-          </div>
-        `
+            <div class="cs-heading">
+              ${this.title
+                ? isMobile
+                  ? html`<bd-h as="h4" class="cs-title" heading-id="${this._sectionTitleId}">${this.title}</bd-h>`
+                  : html`<bd-h as="h3" class="cs-title" heading-id="${this._sectionTitleId}">${this.title}</bd-h>`
+                : ""}
+              ${this.subtitle
+                ? html`
+                  <bd-p kind="${isMobile ? "small" : "regular"}" class="cs-subtitle">
+                    ${this.subtitle}
+                  </bd-p>
+                `
+                : ""}
+            </div>
+          `
           : ""}
 
         <div class="cs-grid" style="${gapStyle}">
-          <slot></slot>
+          <slot @slotchange=${this._syncHeaderHeights}></slot>
         </div>
       </section>
     `;