/* Mama Bloom comparison page (/compare, /de/vergleich).
   Loads after world.css + guides.css and reuses their six-colour system and reading type.
   One wide, plain table: the first column stays put, the table scrolls inside its own region,
   the key sits above that region so it never scrolls away. */

.compare-hero { min-height: 540px; }
.compare-hero h1 { max-width: 14ch; }

.compare-article { padding-bottom: clamp(74px, 9vw, 118px); }

.compare-column {
  width: min(760px, calc(100vw - 48px));
  margin: 0 auto;
}

.compare-what { padding-top: clamp(64px, 8vw, 104px); }
.compare-what h2,
.compare-notfor h2,
.compare-faq h2 { margin-top: 0; }

/* The table band is wider than the reading column, never wider than the viewport. */
.compare-table-section {
  width: min(1180px, calc(100vw - 48px));
  margin: clamp(40px, 6vw, 72px) auto 0;
}

.compare-table-section h2 {
  margin: 0;
  font-family: var(--letter);
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 480;
  letter-spacing: -.015em;
  line-height: 1.16;
}

.compare-key {
  margin: 14px 0 18px;
  color: var(--ink-canopy);
  font-size: .95rem;
  font-weight: 560;
  line-height: 1.5;
}

.compare-scroll {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 4px 22px 4px 22px;
  background: #fff;
}
.compare-scroll:focus-visible { outline: 3px solid var(--pollen-gold); outline-offset: 4px; }

.compare-table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink-canopy);
  font-size: .9rem;
  line-height: 1.4;
}

.compare-table th,
.compare-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}

.compare-table thead th {
  font-family: var(--letter);
  font-size: .98rem;
  font-weight: 520;
  line-height: 1.25;
  background: var(--milk-glass);
}

/* First column: row labels stay visible while the app columns scroll. */
.compare-table th[scope="row"],
.compare-table .compare-corner {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 190px;
  max-width: 250px;
  background: #fff;
  box-shadow: 1px 0 0 var(--line);
  text-align: left;
}
.compare-table th[scope="row"] { font-weight: 560; }
.compare-table .compare-corner { background: var(--milk-glass); }

/* Group rows span the table; their label sticks inside the scroll region. */
.compare-group th {
  padding: 18px 0 10px;
  text-align: left;
  background: var(--paper-rose);
}
.compare-group th span {
  position: sticky;
  left: 0;
  display: inline-block;
  padding: 0 14px;
  color: var(--ink-soft);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.compare-mark {
  color: var(--leaf-glass);
  font-size: 1.05rem;
  font-weight: 700;
}
.compare-mark--none { color: var(--ink-soft); font-weight: 400; }

.compare-table td.compare-text {
  min-width: 118px;
  font-size: .82rem;
  line-height: 1.45;
}

.compare-legend {
  max-width: 82ch;
  margin: 18px 0 0;
  font-size: .92rem;
  line-height: 1.62;
}

.compare-note {
  max-width: 82ch;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: .8rem;
  line-height: 1.55;
}

.compare-strengths { margin-top: clamp(48px, 6vw, 72px); }
.compare-notfor,
.compare-faq { margin-top: clamp(48px, 6vw, 72px); }

.compare-faq h3 {
  margin: 1.7em 0 .45em;
  font-family: var(--letter);
  font-size: 1.22rem;
  font-weight: 520;
  line-height: 1.3;
}

.compare-sources { margin-top: clamp(48px, 6vw, 72px); }
.compare-sources__lead { margin: 0; font-size: .95rem; }
.compare-sources ul { margin: 16px 0 0; padding: 0; list-style: none; }
.compare-sources li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  line-height: 1.6;
}
.compare-sources li:last-child { border-bottom: 1px solid var(--line); }
.compare-sources li a { text-decoration: underline; text-decoration-color: var(--ribbon-coral); text-underline-offset: 3px; }

.compare-trademark {
  margin: 34px 0 0;
  color: var(--ink-soft);
  font-size: .8rem;
  line-height: 1.6;
}

.compare-cta { margin-top: 56px; }

@media (max-width: 760px) {
  .compare-column,
  .compare-table-section { width: calc(100vw - 32px); }
  .compare-table { min-width: 760px; font-size: .84rem; }
  .compare-table th,
  .compare-table td { padding: 10px 11px; }
  .compare-table th[scope="row"],
  .compare-table .compare-corner { min-width: 136px; max-width: 150px; font-size: .8rem; }
}

@media (forced-colors: active) {
  .compare-scroll { border: 1px solid CanvasText; }
  .compare-table th[scope="row"],
  .compare-table .compare-corner { box-shadow: none; border-right: 1px solid CanvasText; }
}

@media print {
  .compare-scroll { overflow: visible; border: 0; }
  .compare-table { min-width: 0; font-size: 9pt; }
  .compare-table th[scope="row"],
  .compare-table .compare-corner { position: static; }
}