/**
 * compare — MyHealthPrac-inspired design system (structure reference)
 * Colors: #f1f1f1 / #010101 + tri-site brand locks
 * Source: myhealthprac.com (Awwwards SOTD) — adapted for affiliate review matrix
 */

.compare-mhp {
  --mhp-bg: #f1f1f1;
  --mhp-surface: #ffffff;
  --mhp-ink: #010101;
  --mhp-ink-2: #52525b;
  --mhp-ink-3: #71717a;
  --mhp-border: #e4e4e7;
  --mhp-section: 3rem;
  --mhp-accent: #1e4d48;
  --mhp-accent-soft: rgb(30 77 72 / 0.12);
  --mhp-sleep: #4338ca;
  --mhp-sleep-soft: #eef2ff;
  --mhp-stress: #b45309;
  --mhp-stress-soft: #fffbeb;
  --mhp-green: #16a34a;
  --mhp-green-soft: #f0fdf4;
  --mhp-font: var(--matrix-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --mhp-mono: ui-monospace, 'JetBrains Mono', monospace;
  --mhp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--mhp-font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--mhp-ink-2);
  background: var(--mhp-bg);
  margin: 0;
  min-height: 100vh;
}

.compare-mhp__page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

.compare-mhp__page--wide {
  max-width: 1280px;
}

/* Header */
.compare-mhp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  max-width: 1280px;
  margin: 0 auto;
  border-bottom: 1px solid var(--mhp-border);
  background: rgb(241 241 241 / 0.92);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.compare-mhp-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--mhp-ink);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.compare-mhp-header__mark {
  width: 32px;
  height: 32px;
}

.compare-mhp-header nav {
  display: flex;
  gap: 28px;
}

.compare-mhp-header nav a {
  color: var(--mhp-ink-3);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}

.compare-mhp-header nav a:hover {
  color: var(--mhp-ink);
}

/* Home hero — Tier 0 / Stitch v1 centered short stage */
.compare-mhp-hero-wrap {
  position: relative;
  margin: 0 -24px 1.25rem;
  padding: 0 24px;
  overflow: hidden;
}

/* Content-height hero — never 88vh (COMPARE-MHP-PITFALLS #6) */
.compare-mhp-hero-wrap--v1 {
  display: flex;
  align-items: center;
  min-height: min(48vh, 360px);
  margin-bottom: 0.5rem;
  border-radius: 0 0 16px 16px;
  background: var(--mhp-bg);
}

.compare-mhp-hero__stage {
  position: relative;
  z-index: 1;
  padding: 36px 0 28px;
  width: 100%;
}

.compare-mhp-hero-wrap--v1 .compare-mhp-hero__stage {
  display: block;
  text-align: center;
}

.compare-mhp-hero__copy {
  max-width: 40rem;
}

.compare-mhp-hero-wrap--v1 .compare-mhp-hero__copy {
  max-width: 42rem;
  margin: 0 auto;
}

.compare-mhp-hero-wrap--v1 .compare-mhp-hero__lead {
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}

.compare-mhp-hero-wrap--v1 .compare-mhp-hero__actions {
  justify-content: center;
}

.compare-mhp-home-metrics {
  margin: 0 0 2rem;
}

.compare-mhp-home-metrics .metric-strip {
  margin-bottom: 0;
}

.compare-mhp-hero__metrics .metric-strip {
  margin-bottom: 0;
}

.compare-mhp-hero__mesh {
  position: absolute;
  inset: -20% -10% auto;
  width: 120%;
  height: 70%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 40%, rgb(67 56 202 / 0.22), transparent 55%),
    radial-gradient(ellipse 50% 45% at 85% 25%, rgb(30 77 72 / 0.26), transparent 50%),
    radial-gradient(ellipse 40% 35% at 55% 80%, rgb(22 163 74 / 0.14), transparent 45%);
  animation: compare-mhp-mesh-drift 18s ease-in-out infinite alternate;
}

.compare-mhp-hero__webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

.compare-mhp-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mhp-accent);
  margin: 0 0 20px;
}

.compare-mhp-hero__title {
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #1e4d48;
  text-wrap: balance;
  margin: 0 0 18px;
}

.compare-mhp-reveal {
  display: block;
  overflow: hidden;
  line-height: 1.05;
}

.compare-mhp-reveal + .compare-mhp-reveal {
  margin-top: 0.06em;
}

.compare-mhp-reveal__inner {
  display: block;
  transform: none;
}

html.js .compare-mhp-reveal__inner {
  transform: translateY(110%);
}

html.js .compare-mhp-hero-wrap.is-animated .compare-mhp-reveal__inner {
  animation: compare-mhp-rise 1.05s var(--mhp-ease-out) forwards;
}

.compare-mhp-hero__lead {
  font-size: 1.0625rem;
  max-width: 42ch;
  margin: 0 0 28px;
  color: var(--mhp-ink-2);
}

.compare-mhp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-bottom: 0;
}

.compare-mhp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

.compare-mhp-btn--ink {
  background: var(--mhp-ink);
  color: #fff;
  transition: transform 0.2s var(--mhp-ease-out), background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 24px rgb(1 1 1 / 0.12);
}

.compare-mhp-btn--ink:hover {
  background: #27272a;
  transform: scale(1.03);
  box-shadow: 0 12px 32px rgb(1 1 1 / 0.16);
}

/* Stitch v1 primary — teal container, not black pill */
.compare-mhp-btn--teal {
  background: #1e4d48;
  color: #fff;
  transition: transform 0.2s var(--mhp-ease-out), background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 24px rgb(30 77 72 / 0.22);
}

.compare-mhp-btn--teal:hover {
  background: #163b37;
  transform: scale(1.02);
}

.compare-mhp-btn--outline {
  background: var(--mhp-surface);
  color: #1e4d48;
  border: 1px solid var(--mhp-border);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.compare-mhp-btn--outline:hover {
  background: var(--mhp-bg);
  border-color: #1e4d48;
}

.compare-mhp-btn--ghost {
  background: transparent;
  color: var(--mhp-ink-3);
  padding: 0;
  min-height: auto;
}

.compare-mhp-btn--orange {
  background: var(--www-cta, #e67e22);
  color: #fff;
}

.compare-mhp-btn--orange:hover {
  background: #cf711d;
}

/* Metric strip — all tiers */
.metric-strip {
  margin: 0 0 var(--mhp-section);
}

.metric-strip__head {
  margin-bottom: 20px;
}

.metric-strip__title {
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--mhp-ink);
  margin: 0 0 6px;
}

.metric-strip__sub {
  margin: 0;
  font-size: 0.9rem;
  color: var(--mhp-ink-3);
}

.metric-strip__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
  padding-bottom: 0;
  scrollbar-width: none;
  will-change: transform;
}

.metric-strip__track::-webkit-scrollbar {
  display: none;
}

.metric-tile {
  min-width: 0;
  background: var(--mhp-surface);
  border: 1px solid var(--mhp-border);
  border-radius: 12px;
  padding: 18px 16px;
  transition: transform 0.25s var(--mhp-ease-out), box-shadow 0.25s ease, border-color 0.25s ease;
}

.metric-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.06);
}

.metric-tile.metric-tile--teal {
  border-color: var(--mhp-border);
  border-style: solid;
  border-width: 1px;
  border-top-width: 3px;
  border-top-color: #1e4d48;
  background: linear-gradient(180deg, rgb(30 77 72 / 0.12) 0%, var(--mhp-surface) 42%);
}

.metric-tile.metric-tile--accent {
  border-color: var(--mhp-border);
  border-style: solid;
  border-width: 1px;
  border-top-width: 3px;
  border-top-color: #16a34a;
  background: linear-gradient(180deg, #f0fdf4 0%, var(--mhp-surface) 42%);
}

.metric-tile.metric-tile--sleep {
  border-color: var(--mhp-border);
  border-style: solid;
  border-width: 1px;
  border-top-width: 3px;
  border-top-color: #4338ca;
  background: linear-gradient(180deg, #eef2ff 0%, var(--mhp-surface) 42%);
}

.metric-tile.metric-tile--stress {
  border-color: var(--mhp-border);
  border-style: solid;
  border-width: 1px;
  border-top-width: 3px;
  border-top-color: #b45309;
  background: linear-gradient(180deg, #fffbeb 0%, var(--mhp-surface) 42%);
}

.metric-tile__value {
  font-family: var(--mhp-mono);
  font-size: 2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--mhp-ink);
  line-height: 1;
  letter-spacing: -0.03em;
}

.metric-tile__unit {
  font-family: var(--mhp-mono);
  font-size: 0.7rem;
  color: var(--mhp-ink-3);
  margin-top: 4px;
}

.metric-tile__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mhp-ink);
  margin-top: 14px;
  line-height: 1.3;
}

.metric-tile__desc {
  font-size: 0.72rem;
  color: var(--mhp-ink-3);
  margin-top: 6px;
  line-height: 1.4;
}

.metric-tile__thumb {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-top: 10px;
  border-radius: 8px;
  background: var(--mhp-bg);
  border: 1px solid var(--mhp-border);
}

.metric-tile.metric-tile--teal .metric-tile__value { color: #1e4d48; }
.metric-tile.metric-tile--accent .metric-tile__value { color: #16a34a; }
.metric-tile.metric-tile--sleep .metric-tile__value { color: #4338ca; }
.metric-tile.metric-tile--stress .metric-tile__value { color: #b45309; }

@media (max-width: 720px) {
  .metric-strip__track {
    display: flex;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .metric-tile {
    flex: 0 0 min(78vw, 220px);
    scroll-snap-align: start;
  }
}

/* Hub panel — flat, no gradient slop */
.compare-mhp-hub {
  background: var(--mhp-surface);
  border: 1px solid var(--mhp-border);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 24px;
}

.compare-mhp-hub--sleep {
  border-left: 4px solid #4338ca;
  background: linear-gradient(135deg, #eef2ff 0%, var(--mhp-surface) 55%);
}

.compare-mhp-hub--stress {
  border-left: 4px solid #b45309;
  background: linear-gradient(135deg, #fffbeb 0%, var(--mhp-surface) 55%);
}

.compare-mhp-hub h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mhp-ink);
}

.compare-mhp-hub p {
  margin: 0 0 16px;
  font-size: 0.92rem;
  color: var(--mhp-ink-3);
}

.compare-mhp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.compare-mhp-pill {
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--mhp-border);
  background: var(--mhp-bg);
  color: var(--mhp-ink);
}

.compare-mhp-pill--sleep {
  color: #4338ca;
  background: #eef2ff;
  border-color: rgb(67 56 202 / 0.2);
}

.compare-mhp-pill--stress {
  color: #b45309;
  background: #fffbeb;
  border-color: rgb(180 83 9 / 0.2);
}

.compare-mhp-hub__link {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: #1e4d48;
}

.compare-mhp-hub__link--sleep {
  color: #4338ca;
}

.compare-mhp-hub__link--stress {
  color: #b45309;
}

/* Review / guide list — Wave 2.5 density */
.compare-mhp-list-section {
  margin-bottom: 2.5rem;
}

.compare-mhp-list-section__head {
  margin-bottom: 18px;
}

.compare-mhp-list-section__intro {
  margin: 0;
  max-width: 52ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--mhp-ink-3);
}

.compare-mhp-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.compare-mhp-review-grid--guides {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .compare-mhp-review-grid--guides {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.compare-mhp-review-card {
  display: block;
  padding: 18px 18px 16px;
  background: var(--mhp-surface);
  border: 1px solid var(--mhp-border);
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.2s var(--mhp-ease-out), box-shadow 0.2s ease;
  min-height: 100%;
}

.compare-mhp-review-card:focus-visible {
  outline: 2px solid #1e4d48;
  outline-offset: 2px;
}

.compare-mhp-review-card--sleep {
  border-left: 3px solid #4338ca;
  background: linear-gradient(135deg, rgb(238 242 255 / 0.55) 0%, var(--mhp-surface) 48%);
}

.compare-mhp-review-card--stress {
  border-left: 3px solid #b45309;
  background: linear-gradient(135deg, rgb(255 251 235 / 0.65) 0%, var(--mhp-surface) 48%);
}

.compare-mhp-review-card--guide {
  border-left: 3px solid #1e4d48;
  background: linear-gradient(135deg, rgb(30 77 72 / 0.08) 0%, var(--mhp-surface) 50%);
}

.compare-mhp-review-card:hover {
  border-color: #d4d4d8;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.06);
}

.compare-mhp-review-card__layout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.compare-mhp-review-card__media {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--mhp-border);
  background: #fff;
  overflow: hidden;
}

.compare-mhp-review-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.compare-mhp-review-card__body {
  flex: 1;
  min-width: 0;
}

.compare-mhp-review-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  width: 100%;
}

.compare-mhp-review-card__cluster {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
}

.compare-mhp-review-card__cluster--sleep {
  color: #4338ca;
  background: #eef2ff;
}

.compare-mhp-review-card__cluster--stress {
  color: #b45309;
  background: #fffbeb;
}

.compare-mhp-review-card__cluster--guide {
  color: #1e4d48;
  background: rgb(30 77 72 / 0.1);
}

.compare-mhp-review-card__score {
  margin-left: auto;
  font-family: var(--mhp-mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--mhp-ink);
  line-height: 1;
}

.compare-mhp-review-card__score-unit {
  font-size: 0.72rem;
  color: var(--mhp-ink-3);
  font-weight: 500;
}

.compare-mhp-review-card__name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--mhp-ink);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.compare-mhp-review-card__tagline {
  margin: 0 0 10px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--mhp-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.compare-mhp-review-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.compare-mhp-review-card__chip {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mhp-ink-3);
  background: var(--mhp-bg);
  border: 1px solid var(--mhp-border);
  border-radius: 999px;
  padding: 4px 10px;
}

.compare-mhp-review-card__chip--price {
  color: #1e4d48;
  background: rgb(30 77 72 / 0.08);
  border-color: rgb(30 77 72 / 0.15);
}

.compare-mhp-review-card__chip--social {
  color: #4338ca;
  background: #eef2ff;
  border-color: rgb(67 56 202 / 0.18);
  max-width: 100%;
}

.compare-mhp-review-card__chip--external {
  color: #1e4d48;
  background: rgb(30 77 72 / 0.06);
  border-color: rgb(30 77 72 / 0.12);
}

.compare-mhp-review-card__cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e4d48;
}

@media (max-width: 720px) {
  .compare-mhp-review-grid {
    grid-template-columns: 1fr;
  }

  .compare-mhp-review-grid--guides {
    grid-template-columns: 1fr;
  }
}

/* Scroll / load motion */
.compare-mhp-motion-fade {
  opacity: 1;
  transform: none;
}

html.js .compare-mhp-motion-fade {
  opacity: 0;
  transform: translateY(16px);
}

html.js .compare-mhp-hero-wrap.is-animated .compare-mhp-motion-fade {
  animation: compare-mhp-fade-up 0.9s var(--mhp-ease-out) forwards;
}

html.js .compare-mhp-hero-wrap.is-animated .compare-mhp-hero__lead {
  animation-delay: 0.35s;
}

html.js .compare-mhp-hero-wrap.is-animated .compare-mhp-hero__actions {
  animation-delay: 0.5s;
}

.compare-mhp-motion-in {
  opacity: 1;
  transform: none;
}

/* Never hide sections — tall #reviews was invisible until 12% IO (blank scroll gap) */

@keyframes compare-mhp-rise {
  to { transform: translateY(0); }
}

@keyframes compare-mhp-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes compare-mhp-mesh-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(2%, -3%) scale(1.04); }
}

.compare-mhp-section-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mhp-ink);
  margin: 0 0 16px;
}

.compare-mhp-breadcrumb {
  font-size: 0.85rem;
  color: var(--mhp-ink-3);
  margin-bottom: 16px;
}

.compare-mhp-breadcrumb a {
  color: var(--matrix-brand-teal, #1e4d48);
  text-decoration: none;
}

.compare-mhp-page-title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--mhp-ink);
  margin: 0 0 20px;
  line-height: 1.15;
}

@media (min-width: 1024px) {
  /* Legacy two-column stage (product pages may still embed metrics in hero) */
  .compare-mhp-hero-wrap:not(.compare-mhp-hero-wrap--v1) .compare-mhp-hero__stage {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    gap: 28px 40px;
    align-items: end;
    padding: 40px 0 20px;
  }

  .compare-mhp-hero-wrap--v1 {
    min-height: min(42vh, 320px);
  }

  .compare-mhp-hero-wrap--v1 .compare-mhp-hero__stage {
    display: block;
    padding: 48px 0 36px;
  }

  .compare-mhp-hero__metrics {
    padding-bottom: 4px;
  }

  .compare-mhp-hubs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .compare-mhp-hubs .compare-mhp-hub {
    margin-bottom: 0;
    height: 100%;
  }
}

/* Wave 3-lite narrative — fills scroll gap without GSAP */
.compare-mhp-narrative {
  margin: 0 0 2rem;
  padding: 28px 32px;
  border-radius: 14px;
  border: 1px solid var(--mhp-border);
  background: linear-gradient(135deg, rgb(30 77 72 / 0.08) 0%, var(--mhp-surface) 62%);
}

.compare-mhp-narrative__title {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--mhp-ink);
  max-width: 28ch;
  line-height: 1.15;
}

.compare-mhp-narrative__text {
  margin: 0;
  max-width: 52ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--mhp-ink-2);
}

.compare-mhp-hubs {
  margin-bottom: 0.5rem;
}

/* Decision Framework — dimension rows, not SaaS feature cards */
.compare-mhp-framework {
  margin: 0 0 var(--mhp-section);
  padding: 28px 24px;
  background: var(--mhp-surface);
  border: 1px solid var(--mhp-border);
  border-radius: 12px;
  border-left: 3px solid #1e4d48;
}

.compare-mhp-framework__eyebrow {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mhp-ink-3);
}

.compare-mhp-framework__lead {
  margin: 8px 0 20px;
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--mhp-ink-2);
}

.compare-mhp-framework__lead a {
  color: #1e4d48;
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.35em;
}

.compare-mhp-framework__lead a:hover {
  text-decoration: underline;
}

.compare-mhp-framework__dims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.compare-mhp-framework__dim {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9rem) 1fr;
  gap: 12px 20px;
  padding: 12px 0;
  border-top: 1px solid var(--mhp-border);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--mhp-ink-2);
}

.compare-mhp-framework__dim strong {
  color: var(--mhp-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .compare-mhp-framework__dim {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Tradeoffs — 1–2 workbench rows */
.compare-mhp-tradeoffs {
  margin: 0 0 var(--mhp-section);
}

.compare-mhp-tradeoffs__list {
  display: grid;
  gap: 14px;
}

.compare-mhp-tradeoff {
  padding: 18px 20px;
  background: var(--mhp-surface);
  border: 1px solid var(--mhp-border);
  border-radius: 12px;
}

.compare-mhp-tradeoff__title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 600;
}

.compare-mhp-tradeoff__title a {
  color: var(--mhp-ink);
  text-decoration: none;
}

.compare-mhp-tradeoff__title a:hover {
  color: #1e4d48;
  text-decoration: underline;
}

.compare-mhp-tradeoff__fit,
.compare-mhp-tradeoff__skip {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--mhp-ink-2);
}

.compare-mhp-tradeoff__fit span,
.compare-mhp-tradeoff__skip span {
  display: inline-block;
  min-width: 7.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mhp-ink-3);
  margin-right: 8px;
}

.compare-mhp-tradeoff__skip {
  margin-bottom: 0;
}

/* Decision Record — Signature Component */
.decision-record {
  margin: 0 0 var(--mhp-section);
  padding: 28px 24px;
  background: var(--mhp-surface);
  border: 1px solid var(--mhp-border);
  border-radius: 12px;
  border-left: 3px solid #b45309;
}

.decision-record__eyebrow {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mhp-ink-3);
}

.decision-record__question {
  margin: 0 0 12px;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--mhp-ink);
  max-width: 42ch;
}

.decision-record__tension {
  margin: 0 0 20px;
  max-width: 52ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--mhp-ink-2);
  padding: 10px 12px;
  border: 1px dashed #b45309;
  border-radius: 8px;
  background: rgb(180 83 9 / 0.04);
}

.decision-record__tension span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b45309;
}

.decision-record__grid {
  margin: 0;
  padding: 0;
}

.decision-record__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9rem) 1fr;
  gap: 12px 20px;
  padding: 12px 0;
  border-top: 1px solid var(--mhp-border);
  margin: 0;
}

.decision-record__row dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mhp-ink-3);
  padding-top: 2px;
}

.decision-record__row dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--mhp-ink-2);
}

.decision-record__row--fit dd {
  border-left: 2px solid #16a34a;
  padding-left: 12px;
}

.decision-record__row--skip dd {
  border-left: 2px solid #b45309;
  padding-left: 12px;
}

.decision-record__next {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--mhp-border);
}

.decision-record__next a {
  color: #1e4d48;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.decision-record__next a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .decision-record__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Demoted SKU catalog — after framework only */
.compare-mhp-sku-vault {
  margin: var(--mhp-section) 0;
  padding: 16px 18px;
  border: 1px dashed var(--mhp-border);
  border-radius: 12px;
  background: transparent;
}

.compare-mhp-sku-vault > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--mhp-ink-2);
  font-size: 0.95rem;
  list-style-position: outside;
}

.compare-mhp-sku-vault[open] > summary {
  margin-bottom: 14px;
  color: var(--mhp-ink);
}

.compare-mhp-home-disclosure {
  margin: 1.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--mhp-ink-3);
}

.compare-mhp-home-disclosure a {
  color: #1e4d48;
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.35em;
}

@media (max-width: 768px) {
  .compare-mhp-header nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compare-mhp-hero__webgl,
  .compare-mhp-hero__mesh {
    display: none;
  }

  .compare-mhp-reveal__inner,
  .compare-mhp-motion-fade,
  .compare-mhp-motion-in {
    opacity: 1;
    transform: none;
    animation: none !important;
    transition: none !important;
  }

  .metric-tile:hover,
  .compare-mhp-review-card:hover,
  .compare-mhp-btn--ink:hover,
  .compare-mhp-btn--teal:hover {
    transform: none;
  }
}

/* FeaturedPick — align with MHP flat cards inside compare-mhp pages */
.compare-mhp .featured-pick {
  border: 1px solid var(--mhp-border);
  border-radius: 14px;
  box-shadow: none;
  background: var(--mhp-surface);
}

.compare-mhp .featured-pick__cta {
  box-shadow: none;
  border-radius: 999px;
}