/* Kräm-sektion (rytm: vit benefits -> kräm compare) */
.ecmp { background: #FEFAF8; font-family: var(--env-font-body); color: var(--env-text-body); padding: 96px 0; }

.ecmp__inner {
  display: grid;
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  column-gap: clamp(40px, 6vw, 88px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.ecmp__eyebrow {
  margin: 0 0 12px;
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--env-text-link);
}

.ecmp__heading {
  margin: 0 0 14px;
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 45px;
  letter-spacing: -0.03em;
  color: var(--env-text-heading);
  max-width: 17ch;
}

.ecmp__intro { margin: 0 0 26px; font-size: 18px; line-height: 26px; letter-spacing: -0.01em; max-width: 50ch; }

/* Accordions: PDP-receptet (Bagoss 16/20 caps, hairlines, plus i ink) */
.ecmp__accordions { border-top: 1px solid var(--env-border-subtle); }
.ecmp__acc { border-bottom: 1px solid var(--env-border-subtle); }
.ecmp__acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--env-text-heading);
  padding: 16px 0;
}
.ecmp__acc summary::-webkit-details-marker { display: none; }
.ecmp__acc-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.ecmp__acc-icon::before, .ecmp__acc-icon::after { content: ""; position: absolute; background: var(--env-text-heading); }
.ecmp__acc-icon::before { top: 6px; left: 0; width: 14px; height: 2px; }
.ecmp__acc-icon::after { top: 0; left: 6px; width: 2px; height: 14px; transition: transform 0.2s; }
.ecmp__acc[open] .ecmp__acc-icon::after { transform: scaleY(0); }
.ecmp__acc-body { padding: 0 0 18px; font-size: 16px; line-height: 24px; letter-spacing: -0.01em; color: var(--env-text-body); max-width: 54ch; }
.ecmp__acc-body p { margin: 0; }

/* Punchline: botens kicker som avslutande Bagoss-rad */
.ecmp__punchline {
  margin: 26px 0 0;
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--env-text-heading);
  max-width: 26ch;
}

/* Grafen: vitt kort med staplar som växer vid reveal */
.ecmp__chart {
  margin: 0;
  background: var(--env-bg-base);
  border: 1px solid var(--env-border-subtle);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(50, 13, 1, 0.08);
  padding: 28px 28px 22px;
}
.ecmp__chart-title {
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--env-text-heading);
  margin-bottom: 22px;
}
.ecmp__plot { position: relative; height: 320px; }

/* Tröskellinjen: streckad ink vid 10 000 mg */
.ecmp__threshold {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--y);
  border-top: 2px dashed var(--env-border-strong);
  z-index: 1;
}
.ecmp__threshold-label {
  position: absolute;
  right: 0;
  bottom: 6px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: #4E4E4E;
  background: var(--env-bg-base);
  padding-left: 8px;
}

.ecmp__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-around; gap: 18px; padding: 0 6px; }
.ecmp__bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 1; max-width: 120px; }
.ecmp__bar {
  position: relative;
  width: 100%;
  height: calc(var(--h) - 26px);
  background: var(--env-border-subtle);
  border-radius: 10px 10px 4px 4px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.ecmp__bar--envana { background: var(--env-action-primary); }
.ecmp.is-in .ecmp__bar { transform: scaleY(1); }
.ecmp.is-in .ecmp__bar:nth-child(1) { transition-delay: 150ms; }
.ecmp__bar-value {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: var(--env-text-heading);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease 0.7s;
}
.ecmp.is-in .ecmp__bar-value { opacity: 1; }
.ecmp__bar--envana .ecmp__bar-value { font-weight: 500; }
.ecmp__bar-label {
  margin-top: 10px;
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--env-text-heading);
}
.ecmp__chart-note { margin: 18px 0 0; font-size: 12px; line-height: 17px; letter-spacing: -0.01em; color: #4E4E4E; }

/* Reveal */
.ecmp__reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0ms); }
.ecmp.is-in .ecmp__reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ecmp__reveal, .ecmp__bar, .ecmp__bar-value { opacity: 1; transform: none; transition: none; }
}

@media screen and (max-width: 989px) {
  .ecmp { padding: 56px 0; }
  .ecmp__inner { grid-template-columns: 1fr; row-gap: 28px; }
  .ecmp__heading { font-size: 32px; line-height: 36px; }
  .ecmp__intro { font-size: 16px; line-height: 24px; margin-bottom: 0; }
  /* Mobilordning: rubrik+intro -> graf -> accordions -> punchline */
  .ecmp__content { display: contents; }
  .ecmp__eyebrow { order: 1; margin-bottom: 0; }
  .ecmp__heading { order: 2; }
  .ecmp__intro { order: 3; }
  .ecmp__chart-wrap { order: 4; }
  .ecmp__accordions { order: 5; }
  .ecmp__punchline { order: 6; margin-top: 0; }
  .ecmp__inner { display: flex; flex-direction: column; align-items: stretch; }
  .ecmp__plot { height: 260px; }
  .ecmp__chart { padding: 22px 18px 16px; }
  .ecmp__threshold-label { font-size: 11px; }
  .ecmp__bar-value { font-size: 13px; top: -22px; }
}