/* comparison — section CSS, written by its BUILD-SECTION subagent (2026-09-15).
   Source: brief/comparison.md (§2/§5/§6/§11 D-C1…D-C14) re-grounded on cache/comparison.{desktop,mobile}.json.
   Every rule is scoped under .comparison. Section-local tokens are --cmp-* (formulas: brief-page §4.1/§7.1).
   Bands: 0–767 mobile (anchor 390) · 768–1023 mobile structure, pseudo-tablet values · 1024+ desktop (--vw-base 1619).
   Template: pipeline/templates/code/comparison-table.md — one <table> on both layers (never flex/grid columns).
   Table lines use border-collapse: collapse, so the tbody frame, the row rules and the MEDEX left rule are REAL
   borders on the elements Figma draws them on (tbody 3271:1120, rows 3271:1121…, MEDEX cells 3271:1125…). */

/* ---------------------------------------------------------------------------
   SECTION TOKENS — moved out of the page's tokens.css.

   Read by THIS block and nothing else on the site, so they belong here rather
   than in a site-wide :root. In Shopify a section can be dropped onto any
   template from the theme editor, so a section that reads a token from a
   page-level scope breaks the moment it is moved; scoped to the block's own
   class, it travels with it.

   EVERY band is carried verbatim from the old tokens.css, in that file's own
   order — so the cascade is unchanged whether the page was written
   desktop-first (base + max-width overrides) or mobile-first (base +
   min-width overrides). Verified by computed-style diff at
   375/768/1024/1440/1920.
--------------------------------------------------------------------------- */

.comparison {
  --font-serif:    'Roboto Serif', Georgia, 'Times New Roman', serif;
  --font-mono:     'Roboto Mono', ui-monospace, 'Courier New', monospace;
  --c-accent:      #e63329;
  --c-eyebrow:     #b3aeae;
  --text-h2:       clamp(18px, calc(22px + (var(--max-vw) - 390px) * 0.015), 43px);
  --lh-h2:         1.2;
  --ls-h2:         -0.025em;
  --text-eyebrow:  clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lh-eyebrow:    1.5;
  --ls-eyebrow:    0.2em;
  --ls-lead:       0;
  --text-subnote:  clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lh-subnote:    1.5;
  --ls-subnote:    0;
  --section-pad-y: clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 63px);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .comparison {
    --text-h2:       clamp(22px, calc(22px + (var(--max-vw) - 768px) * 0.025), 46.425px);
    --text-eyebrow:  clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 21.493px);
    --text-subnote:  clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 13.639px);
    --section-pad-y: clamp(32px, calc(32px + (var(--max-vw) - 768px) * 0.025), 75px);
  }
}

@media (min-width: 1024px) {
  .comparison {
    --text-h2:       clamp(29px, calc(46.425px * (var(--max-vw) / var(--vw-base))), 55px);
    --lh-h2:         1.16;
    --ls-h2:         -0.012em;
    --text-eyebrow:  clamp(14px, calc(21.493px * (var(--max-vw) / var(--vw-base))), 25px);
    --lh-eyebrow:    normal;
    --ls-eyebrow:    0.1em;
    --ls-lead:       0;
    --text-subnote:  clamp(9px, calc(13.639px * (var(--max-vw) / var(--vw-base))), 16px);
    --lh-subnote:    normal;
    --ls-subnote:    -0.03em;
    --section-pad-y: clamp(47px, calc(75px * (var(--max-vw) / var(--vw-base))), 89px);
  }
}

/* ---------------- tokens: mobile band (base) ---------------- */
.comparison {
  --cmp-gap-eyebrow: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --cmp-gap-title: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --cmp-gap-table: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 39px);
  --cmp-head-gap: clamp(3px, calc(4px + (var(--max-vw) - 390px) * 0.015), 8px);
  --cmp-head-pad-y: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --cmp-other-head-gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --cmp-cell-pad-y: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --cmp-feature-pad: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --cmp-medex-pad-x: clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --cmp-other-pad-l: clamp(21px, calc(26px + (var(--max-vw) - 390px) * 0.015), 51px);
  --cmp-other-pad-r: clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --cmp-medex-gap: clamp(5px, calc(6px + (var(--max-vw) - 390px) * 0.015), 12px);
  --cmp-other-gap: clamp(5px, calc(6px + (var(--max-vw) - 390px) * 0.015), 12px);
  --cmp-check-w: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --cmp-check-h: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --cmp-tick-w: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --cmp-tick-h: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --cmp-circle-w: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --cmp-circle-h: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --cmp-icon-top: clamp(2px, calc(2px + (var(--max-vw) - 390px) * 0.015), 4px);
  --cmp-fs-feature: clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --cmp-fs-brand: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --cmp-fs-brand-sub: clamp(7px, calc(9px + (var(--max-vw) - 390px) * 0.015), 18px);
  --cmp-fs-other-name: clamp(9px, calc(11px + (var(--max-vw) - 390px) * 0.015), 22px);
  --cmp-fs-other-sub: clamp(7px, calc(9px + (var(--max-vw) - 390px) * 0.015), 18px);
  --cmp-fs-medex-val: clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --cmp-fs-other-val: clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  /* line-heights: drawn px on 390 as ratios (12.5/10, 18/12, 13.5/9, 16.5/11, 14.5/10) */
  --cmp-lh-feature: 1.25;
  --cmp-lh-head: 1.5;
  --cmp-lh-val: 1.45;
  /* section-local colours (brief-page §4.3 list — not promoted to tokens) */
  --cmp-line: #e2edf3;
  --cmp-other-ink: #55687d;
  --cmp-feature-ink: #0a192f;
  --cmp-val-ink: #6b747b;
  --cmp-brand-sub-ink: #ffffffcc;
  --cmp-medex-red: #de3e33;
  --cmp-medex-rule: #de3e334d;
}

/* ---------------- tokens: pseudo-tablet band ---------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .comparison {
    --cmp-gap-eyebrow: clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 6px);
    --cmp-gap-title: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 11px);
    --cmp-gap-table: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 50px);
    --cmp-head-gap: clamp(4px, calc(4px + (var(--max-vw) - 768px) * 0.025), 8px);
    --cmp-head-pad-y: clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 16px);
    --cmp-other-head-gap: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 31px);
    --cmp-cell-pad-y: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 24px);
    --cmp-feature-pad: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 36.02px);
    --cmp-medex-pad-x: clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 37.57px);
    --cmp-other-pad-l: clamp(26px, calc(26px + (var(--max-vw) - 768px) * 0.025), 30.24px);
    --cmp-other-pad-r: clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 36.02px);
    --cmp-medex-gap: clamp(6px, calc(6px + (var(--max-vw) - 768px) * 0.025), 18.79px);
    --cmp-other-gap: clamp(6px, calc(6px + (var(--max-vw) - 768px) * 0.025), 18.01px);
    --cmp-check-w: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 32.873px);
    --cmp-check-h: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 33.164px);
    --cmp-tick-w: clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 16.437px);
    --cmp-tick-h: clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 16.582px);
    --cmp-circle-w: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 31.513px);
    --cmp-circle-h: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 32.699px);
    --cmp-icon-top: clamp(2px, calc(2px + (var(--max-vw) - 768px) * 0.025), 4px);
    --cmp-fs-feature: clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 15.756px);
    --cmp-fs-brand: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 25.829px);
    --cmp-fs-brand-sub: clamp(9px, calc(9px + (var(--max-vw) - 768px) * 0.025), 15.263px);
    --cmp-fs-other-name: clamp(11px, calc(11px + (var(--max-vw) - 768px) * 0.025), 18.007px);
    --cmp-fs-other-sub: clamp(9px, calc(9px + (var(--max-vw) - 768px) * 0.025), 14.631px);
    --cmp-fs-medex-val: clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 16.437px);
    --cmp-fs-other-val: clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 15.756px);
  }
}

/* ---------------- tokens: desktop band ---------------- */
@media (min-width: 1024px) {
  .comparison {
    --cmp-gap-eyebrow: clamp(4px, calc(6px * (var(--max-vw) / var(--vw-base))), 7px);
    --cmp-gap-title: clamp(7px, calc(11px * (var(--max-vw) / var(--vw-base))), 13px);
    --cmp-gap-table: clamp(32px, calc(50px * (var(--max-vw) / var(--vw-base))), 59px);
    --cmp-feature-pad: clamp(23px, calc(36.02px * (var(--max-vw) / var(--vw-base))), 43px);
    --cmp-medex-pad-x: clamp(24px, calc(37.57px * (var(--max-vw) / var(--vw-base))), 45px);
    --cmp-other-pad-l: clamp(19px, calc(30.24px * (var(--max-vw) / var(--vw-base))), 36px);
    --cmp-other-pad-r: clamp(23px, calc(36.02px * (var(--max-vw) / var(--vw-base))), 43px);
    --cmp-medex-gap: clamp(12px, calc(18.79px * (var(--max-vw) / var(--vw-base))), 22px);
    --cmp-other-gap: clamp(11px, calc(18.01px * (var(--max-vw) / var(--vw-base))), 21px);
    --cmp-check-w: clamp(21px, calc(32.873px * (var(--max-vw) / var(--vw-base))), 39px);
    --cmp-check-h: clamp(21px, calc(33.164px * (var(--max-vw) / var(--vw-base))), 39px);
    --cmp-tick-w: clamp(10px, calc(16.437px * (var(--max-vw) / var(--vw-base))), 19px);
    --cmp-tick-h: clamp(10px, calc(16.582px * (var(--max-vw) / var(--vw-base))), 20px);
    --cmp-circle-w: clamp(20px, calc(31.513px * (var(--max-vw) / var(--vw-base))), 37px);
    --cmp-circle-h: clamp(21px, calc(32.699px * (var(--max-vw) / var(--vw-base))), 39px);
    --cmp-fs-feature: clamp(10px, calc(15.756px * (var(--max-vw) / var(--vw-base))), 19px);
    --cmp-fs-brand: clamp(16px, calc(25.829px * (var(--max-vw) / var(--vw-base))), 31px);
    --cmp-fs-brand-sub: clamp(10px, calc(15.263px * (var(--max-vw) / var(--vw-base))), 18px);
    --cmp-fs-other-name: clamp(11px, calc(18.007px * (var(--max-vw) / var(--vw-base))), 21px);
    --cmp-fs-other-sub: clamp(9px, calc(14.631px * (var(--max-vw) / var(--vw-base))), 17px);
    --cmp-fs-medex-val: clamp(10px, calc(16.437px * (var(--max-vw) / var(--vw-base))), 19px);
    --cmp-fs-other-val: clamp(10px, calc(15.756px * (var(--max-vw) / var(--vw-base))), 19px);
    --cmp-fs-th-feature: clamp(9px, calc(13.506px * (var(--max-vw) / var(--vw-base))), 16px);
    --cmp-title-max: clamp(506px, calc(800px * (var(--max-vw) / var(--vw-base))), 949px);
    --cmp-lead-max: clamp(596px, calc(942px * (var(--max-vw) / var(--vw-base))), 1117px);
    --cmp-gap-cta: clamp(24px, calc(37.23px * (var(--max-vw) / var(--vw-base))), 44px);
    --cmp-gap-subnote: clamp(8px, calc(11.91px * (var(--max-vw) / var(--vw-base))), 14px);
    --cmp-shadow-y: clamp(9px, calc(14.089px * (var(--max-vw) / var(--vw-base))), 17px);
    --cmp-shadow-blur: clamp(18px, calc(28.177px * (var(--max-vw) / var(--vw-base))), 33px);
    --cmp-row-h-head: clamp(74px, calc(117.4px * (var(--max-vw) / var(--vw-base))), 139px);
    --cmp-row-h: clamp(56px, calc(88.84px * (var(--max-vw) / var(--vw-base))), 105px);
    --cmp-th-label-max: clamp(88px, calc(138.43px * (var(--max-vw) / var(--vw-base))), 164px);
    --cmp-brand-gap: clamp(3px, calc(5.4px * (var(--max-vw) / var(--vw-base))), 6px);
    --cmp-other-head-pad-l: clamp(26px, calc(40.37px * (var(--max-vw) / var(--vw-base))), 48px);
    --cmp-other-name-gap: clamp(3px, calc(4.67px * (var(--max-vw) / var(--vw-base))), 6px);
    --cmp-lh-feature: normal;
    --cmp-lh-head: normal;
    --cmp-lh-val: normal;
  }
}

/* ================= MOBILE STRUCTURE (base, also 768–1023) ================= */
.comparison {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

/* per-layer copy (D-C2): mobile strings below 1024, desktop strings from 1024 */
.comparison .comparison__copy--d { display: none; }

/* ---- heading block (C1) ---- */
.comparison__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.comparison__eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-eyebrow);
  white-space: nowrap;
}
.comparison__title {
  margin-top: var(--cmp-gap-eyebrow);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--c-ink);
}
.comparison__lead {
  margin-top: var(--cmp-gap-title);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--c-text);
}

/* ---- table (C2) ---- */
.comparison__table-wrap {
  position: relative;
  margin-top: var(--cmp-gap-table);
  container-type: inline-size;  /* cqw = the table width, so the column math below is a pure length */
}
.comparison__medex-card { display: none; }   /* desktop only (D-C3) */

.comparison__table {
  position: relative;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--font-sans);
  letter-spacing: 0;
}
/* feature column = 104px at 390 (100 + the drawn 4px gap), tied to its label size (10.4 x font) so the nowrap labels
   keep their drawn fit at every width below 1024 — a fixed-coefficient px token let COORDINATION cross into the
   MEDEX column by 32px at 767 and 1023 (measured) */
.comparison { --cmp-col-feature: calc(var(--cmp-fs-feature) * 10.4); }
.comparison__col-feature { width: var(--cmp-col-feature); }
/* MEDEX and Other share the rest; Other also carries the drawn 16px spacer as left padding (D-C12).
   cqw, not %: a fixed-layout <col> ignores calc() that mixes % with lengths (measured: both columns fell back to 122.5) */
.comparison__col-medex { width: calc((100cqw - var(--cmp-col-feature) - var(--cmp-other-head-gap)) / 2); }
.comparison__col-other { width: auto; }

.comparison__table th,
.comparison__table td {
  font-weight: inherit;
  text-align: left;
}

/* header row: separate rounded tabs over the MEDEX / Other columns; the feature header is an empty spacer on mobile */
.comparison__head-row > th {
  padding: 0 0 var(--cmp-head-gap);
  vertical-align: bottom;
}
.comparison__th-label {
  position: absolute;           /* visually hidden < 1024 (kept for screen readers) */
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.comparison__head-row > .comparison__th-other { padding-left: var(--cmp-other-head-gap); }
.comparison__head-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--cmp-head-pad-y) 0;
  border-radius: 12px 12px 0 0;
  text-align: center;
  /* drawn nowrap (D-C13), but at 320 "One connected journey" is wider than its 82px tab and was clipped:
     wrapping is allowed so the narrowest phones re-flow instead of overflowing (fits one line from ~350) */
}
.comparison__head-box--medex { background: var(--c-accent); }
.comparison__head-box--other {
  align-items: stretch;         /* drawn: full-width Paragraph rows, each centring its text */
  background: var(--c-page);
  border: 1px solid var(--cmp-line);
}
.comparison__brand {
  font-weight: 800;
  font-size: var(--cmp-fs-brand);
  line-height: var(--cmp-lh-head);
  color: #fff;
}
.comparison__brand-sub {
  font-weight: 400;
  font-size: var(--cmp-fs-brand-sub);
  line-height: var(--cmp-lh-head);
  color: var(--cmp-brand-sub-ink);
}
.comparison__other-name {
  font-weight: 700;
  font-size: var(--cmp-fs-other-name);
  line-height: var(--cmp-lh-head);
  color: var(--cmp-other-ink);
}
.comparison__other-sub {
  font-weight: 400;
  font-size: var(--cmp-fs-other-sub);
  line-height: var(--cmp-lh-head);
  color: var(--cmp-other-ink);
}

/* body: 1px frame on tbody, a rule on top of every row, rounded bottom corners (drawn r 0 0 12 12) */
.comparison__table tbody { border: 1px solid var(--cmp-line); }
.comparison__row { border-top: 1px solid var(--cmp-line); }
.comparison__row:nth-child(odd) { background: #fff; }
.comparison__row:nth-child(even) { background: var(--c-page); }

.comparison__feature-cell {
  padding: var(--cmp-cell-pad-y) calc(var(--cmp-feature-pad) + var(--cmp-head-gap)) var(--cmp-cell-pad-y) var(--cmp-feature-pad);
  vertical-align: middle;
}
.comparison__feature {
  display: inline-block;        /* the label box is the text (3271:1124 44x13), not the cell */
  font-weight: 800;
  font-size: var(--cmp-fs-feature);
  line-height: var(--cmp-lh-feature);
  text-transform: uppercase;
  color: var(--cmp-feature-ink);
  white-space: nowrap;          /* D-C13: COORDINATION overflows into its padding, as drawn */
}
.comparison__medex {
  padding: var(--cmp-cell-pad-y) var(--cmp-medex-pad-x);
  border-left: 1px solid var(--cmp-medex-rule);
  vertical-align: top;
}
.comparison__other {
  padding: var(--cmp-cell-pad-y) var(--cmp-other-pad-r) var(--cmp-cell-pad-y) var(--cmp-other-pad-l);
  vertical-align: top;
}
.comparison__cell {
  display: flex;
  align-items: flex-start;
}
.comparison__medex .comparison__cell { gap: var(--cmp-medex-gap); }
.comparison__other .comparison__cell { gap: var(--cmp-other-gap); }

.comparison__check,
.comparison__circle {
  flex: none;
  margin-top: var(--cmp-icon-top);
  border-radius: 50%;
}
.comparison__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cmp-check-w);
  height: var(--cmp-check-h);
  background: var(--cmp-medex-red);
}
.comparison .comparison__tick {
  width: var(--cmp-tick-w);
  height: var(--cmp-tick-h);
}
.comparison__circle {
  display: block;
  width: var(--cmp-circle-w);
  height: var(--cmp-circle-h);
  border: 1px solid var(--cmp-other-ink);
}
.comparison__value {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  line-height: var(--cmp-lh-val);
}
.comparison__value > span { display: block; }
.comparison__medex .comparison__value {
  font-weight: 500;
  font-size: var(--cmp-fs-medex-val);
  color: var(--cmp-val-ink);
}
.comparison__other .comparison__value {
  font-weight: 400;
  font-size: var(--cmp-fs-other-val);
  color: var(--cmp-other-ink);
}

/* rounded bottom corners of the body frame: the collapsed tbody border cannot take a radius, so the wrap
   clips the square corner and a bottom-only overlay re-draws the curved 1px stroke on the same lines */
.comparison__table-wrap {
  border-radius: 0 0 12px 12px;
  overflow: clip;
}
.comparison__table-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  border: 1px solid var(--cmp-line);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  pointer-events: none;
}

/* ---- CTA (C3) — desktop only (D-C7) ---- */
.comparison__cta { display: none; }

/* ================= DESKTOP STRUCTURE (1024+) ================= */
@media (min-width: 1024px) {
  .comparison .comparison__copy--m { display: none; }
  .comparison span.comparison__copy--d { display: inline; }
  .comparison .comparison__value > span.comparison__copy--d,
  .comparison .comparison__other-name > span.comparison__copy--d,
  .comparison .comparison__other-sub > span.comparison__copy--d { display: block; }
  .comparison img.comparison__copy--d { display: block; }

  /* heading: centred stack (D-C9) */
  .comparison__head {
    align-items: center;
    text-align: center;
  }
  .comparison__eyebrow { max-width: var(--cmp-title-max); }
  .comparison__title { max-width: var(--cmp-title-max); }
  .comparison__lead {
    max-width: var(--cmp-lead-max);
    white-space: nowrap;
  }

  /* table frame + raised MEDEX column (D-C3) */
  .comparison__table-wrap {
    overflow: visible;
    background: var(--c-page);
    border: 1px solid var(--cmp-line);
    border-radius: 18.007px;
  }
  .comparison__table-wrap::after { display: none; }
  .comparison__medex-card {
    display: block;
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 23.155%;
    width: 40.418%;
    background: #fff;
    border: 1px solid var(--cmp-medex-red);
    border-radius: 18.785px;
    box-shadow: 0 var(--cmp-shadow-y) var(--cmp-shadow-blur) 0 rgba(17, 35, 61, 0.10);
  }
  .comparison__col-feature { width: 23.155%; }
  .comparison__col-medex { width: 40.418%; }
  .comparison__col-other { width: 36.427%; }

  .comparison__head-row { height: var(--cmp-row-h-head); }
  .comparison__head-row > th {
    padding: 0;
    vertical-align: middle;
  }
  .comparison__head-row > .comparison__th-feature { padding-left: var(--cmp-feature-pad); }
  .comparison__th-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: block;
    max-width: var(--cmp-th-label-max);
    width: var(--cmp-th-label-max);
    font-weight: 700;
    font-size: var(--cmp-fs-th-feature);
    line-height: normal;
    text-transform: uppercase;
    color: var(--cmp-other-ink);
  }
  .comparison__th-label > span { display: block; }   /* the render breaks "WHAT WE / COMPARE" (D-C10) */
  .comparison__head-box {
    border-radius: 0;
    padding: 0;
  }
  .comparison__head-box--medex {
    justify-content: center;
    gap: var(--cmp-brand-gap);
    min-height: var(--cmp-row-h-head);
    padding-inline: var(--cmp-medex-pad-x);
    background: none;
  }
  .comparison__brand { color: var(--c-ink); }
  .comparison__brand-sub { color: #94a3b8; }
  .comparison__head-row > .comparison__th-other { padding-left: var(--cmp-other-head-pad-l); }
  .comparison__head-box--other {
    display: inline-flex;
    align-items: stretch;
    gap: var(--cmp-other-name-gap);
    border: 0;
    background: none;
    text-align: left;
  }

  .comparison__table tbody { border: 0; }
  .comparison__row:nth-child(n) {
    height: var(--cmp-row-h);
    border-top: 0;
    background: none;
  }
  .comparison__row > th,
  .comparison__row > td {
    vertical-align: middle;
    border-top: 1px solid var(--cmp-line);
  }
  .comparison__feature-cell { padding: 0 0 0 var(--cmp-feature-pad); }
  .comparison__feature {
    display: block;
    white-space: nowrap;
  }
  /* the drawn MEDEX row (3271:467…) is a padding-less group whose content sits 37.57 in: inset the content, not the cell */
  .comparison__row > .comparison__medex {
    padding: 0;
    border-left: 0;
    border-top-color: var(--cmp-medex-red);
  }
  .comparison__medex .comparison__cell { margin-inline: var(--cmp-medex-pad-x); }
  .comparison__other { padding: 0 var(--cmp-other-pad-r) 0 var(--cmp-other-pad-l); }
  .comparison__cell { align-items: center; }
  .comparison__check,
  .comparison__circle { margin-top: 0; }
  .comparison__circle { border-width: 1.688px; }

  /* CTA + sub-note */
  .comparison__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--cmp-gap-cta);
  }
  .comparison__subnote {
    margin-top: var(--cmp-gap-subnote);
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--text-subnote);
    line-height: var(--lh-subnote);
    letter-spacing: var(--ls-subnote);
    color: var(--c-text);
    text-align: center;
  }
}