/* ── ECM section02 — VS comparison ── */
.ecm--02 {
  --ecm-02-content-max: min(1563px, 100%);
  --ecm-02-body-max: min(1253px, 100%);
  --ecm-02-panel-title-lh: 1.556;
  --ecm-02-tag-radius: clamp(0.5rem, 0.52vw, 0.625rem);
  --ecm-02-panel-radius: clamp(0.875rem, 1.042vw, 1.25rem);
  --ecm-02-panel-foot-size: clamp(0.744rem, 1.49vw, 1.913rem);
  --ecm-02-axis-top: 24.66%;
  --ecm-02-tag-group-height: 28.01%;
  --ecm-02-axis-bottom: 17.37%;
  --ecm-02-tag-inset: clamp(0.833rem, 1.737vw, 2.083rem);

  background-color: var(--color-warm);
}

.ecm--02 .ecm__inner {
  width: var(--ecm-02-content-max);
  max-width: calc(100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: clamp(3rem, 10.42vw, 12.5rem);
}

.ecm--02 .ecm__eyebrow {
  width: 100%;
  max-width: min(714px, 100%);
  white-space: nowrap;
  text-align: center;
}

.ecm--02 .ecm__title {
  color: var(--color-primary);
}

.ecm__compare {
  position: relative;
  margin-top: clamp(1rem, 3.125vw, 3.75rem);
}

.ecm__compare-panels {
  display: grid;
  grid-template-columns: 49.84% 50.16%;
}

.ecm__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--color-white);
}

.ecm__panel--collapsed {
  border: 1px solid var(--color-border);
  border-right: 0;
  border-radius: var(--ecm-02-panel-radius) var(--ecm-02-panel-radius) 0
    var(--ecm-02-panel-radius);
}

.ecm__panel--strong {
  border: 1px solid var(--color-primary);
  border-left: 0;
  border-radius: var(--ecm-02-panel-radius) var(--ecm-02-panel-radius)
    var(--ecm-02-panel-radius) 0;
}

.ecm__panel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(5rem, 10.42vw, 12.5rem);
  padding: clamp(1rem, 2.29vw, 2.75rem);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--ecm-02-panel-title-lh);
  letter-spacing: var(--letter-tight);
  text-align: center;
}

.ecm__panel--collapsed .ecm__panel-head {
  background-color: var(--color-lightgray);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--ecm-02-panel-radius) 0 0 0;
  color: var(--color-dark);
}

.ecm__panel--strong .ecm__panel-head {
  background-color: var(--color-primary);
  border-radius: 0 var(--ecm-02-panel-radius) 0 0;
  color: var(--color-white);
}

.ecm__panel-images {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4.17vw, 5rem);
  padding-block: clamp(2rem, 4.17vw, 5rem);
}

.ecm__panel--collapsed .ecm__panel-images {
  align-items: flex-start;
  overflow: visible;
}

.ecm__panel--strong .ecm__panel-images {
  align-items: flex-end;
  overflow: visible;
}

.ecm__panel-image-wrap {
  position: relative;
  width: 63.29%;
  max-width: 100%;
  flex-shrink: 0;
  overflow: visible;
}

.ecm__panel-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

.ecm__panel-anti {
  display: block;
  position: absolute;
  top: 50%;
  width: min(61%, 300px);
  height: auto;
  pointer-events: none;
}

.ecm__panel-anti--left {
  left: 0;
  transform: translate(-8%, -50%);
}

.ecm__panel-anti--right {
  right: 0;
  transform: translate(8%, -50%);
}

.ecm__panel-foot {
  margin-top: auto;
  padding: clamp(2rem, 4.17vw, 5rem) clamp(1rem, 2.5vw, 3rem)
    clamp(2.5rem, 5.21vw, 6.25rem);
  font-size: var(--ecm-02-panel-foot-size);
  font-weight: 700;
  line-height: var(--ecm-02-panel-title-lh);
  letter-spacing: var(--letter-tight);
  text-align: center;
  color: var(--color-dark);
}

.ecm__panel--strong .ecm__panel-foot {
  color: var(--color-primary);
}

.ecm__panel-foot-line {
  white-space: nowrap;
}

.ecm__compare-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.ecm__compare-tag-group {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: var(--ecm-02-axis-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: min(472px, 90%);
  height: var(--ecm-02-tag-group-height);
  transform: translateX(-50%);
}

.ecm__compare-line {
  flex-shrink: 0;
  width: 0;
  border-left: 2px dashed var(--color-primary);
}

.ecm__compare-line--mid {
  flex: 1 1 auto;
  min-height: clamp(3rem, 8vw, 9rem);
}

.ecm__compare-line--tail {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: calc(var(--ecm-02-axis-top) + var(--ecm-02-tag-group-height));
  bottom: var(--ecm-02-axis-bottom);
  transform: translateX(-50%);
}

.ecm__compare-line--tail::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: translate(-50%, 50%) rotate(45deg);
}

.ecm__compare-anti {
  display: none;
}

.ecm__compare-tag {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.625rem, 0.78vw, 0.9375rem) clamp(0.875rem, 1.25vw, 1.5rem);
  border: 2px dashed var(--color-primary);
  border-radius: var(--ecm-02-tag-radius);
  background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-warm));
  font-size: var(--text-subtitle);
  font-weight: 700;
  line-height: var(--text-subtitle-lh);
  letter-spacing: var(--letter-tight);
  color: var(--color-dark);
  white-space: nowrap;
}

.ecm__compare-tag--panel {
  display: none;
}

.ecm--02 .ecm__body {
  max-width: var(--ecm-02-body-max);
  margin-top: clamp(1rem, 3.125vw, 3.75rem);
}

/* ── Compare axis — in-view reveal (tablet / desktop overlay) ── */
@media (min-width: 768px) {
  .ecm--02 .ecm__compare {
    --ecm-02-axis-tag-duration: 0.55s;
    --ecm-02-axis-line-duration: 0.65s;
    --ecm-02-axis-delay-ecm: 0s;
    --ecm-02-axis-delay-mid: 0.4s;
    --ecm-02-axis-delay-anti: 1.05s;
    --ecm-02-axis-delay-tail: 1.65s;
    --ecm-02-axis-delay-arrow: 2.4s;
  }

  .ecm--02 .ecm__compare:not(.is-axis-revealed) .ecm__compare-tag-group--overlay .ecm__compare-tag {
    opacity: 0;
    transform: translateY(-0.75rem);
  }

  .ecm--02 .ecm__compare:not(.is-axis-revealed) .ecm__compare-line--mid {
    transform: scaleY(0);
  }

  .ecm--02 .ecm__compare:not(.is-axis-revealed) .ecm__compare-line--tail {
    transform: translateX(-50%) scaleY(0);
  }

  .ecm--02 .ecm__compare:not(.is-axis-revealed) .ecm__compare-line--tail::after {
    opacity: 0;
  }

  .ecm--02 .ecm__compare-line--mid {
    transform-origin: top center;
  }

  .ecm--02 .ecm__compare-line--tail {
    transform-origin: top center;
  }

  .ecm--02 .ecm__compare.is-axis-revealed
    .ecm__compare-tag-group--overlay
    .ecm__compare-tag--ecm {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--ecm-02-axis-tag-duration) var(--motion-reveal-ease)
        var(--ecm-02-axis-delay-ecm),
      transform var(--ecm-02-axis-tag-duration) var(--motion-reveal-ease)
        var(--ecm-02-axis-delay-ecm);
  }

  .ecm--02 .ecm__compare.is-axis-revealed .ecm__compare-line--mid {
    transform: scaleY(1);
    transition: transform var(--ecm-02-axis-line-duration) var(--motion-reveal-ease)
      var(--ecm-02-axis-delay-mid);
  }

  .ecm--02 .ecm__compare.is-axis-revealed
    .ecm__compare-tag-group--overlay
    .ecm__compare-tag--anti {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--ecm-02-axis-tag-duration) var(--motion-reveal-ease)
        var(--ecm-02-axis-delay-anti),
      transform var(--ecm-02-axis-tag-duration) var(--motion-reveal-ease)
        var(--ecm-02-axis-delay-anti);
  }

  .ecm--02 .ecm__compare.is-axis-revealed .ecm__compare-line--tail {
    transform: translateX(-50%) scaleY(1);
    transition: transform var(--ecm-02-axis-line-duration) var(--motion-reveal-ease)
      var(--ecm-02-axis-delay-tail);
  }

  .ecm--02 .ecm__compare.is-axis-revealed .ecm__compare-line--tail::after {
    opacity: 1;
    transition: opacity 0.35s var(--motion-reveal-ease) var(--ecm-02-axis-delay-arrow);
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .ecm--02 .ecm__compare:not(.is-axis-revealed) .ecm__compare-tag-group--overlay .ecm__compare-tag,
  .ecm--02 .ecm__compare.is-axis-revealed .ecm__compare-tag-group--overlay .ecm__compare-tag {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ecm--02 .ecm__compare:not(.is-axis-revealed) .ecm__compare-line--mid,
  .ecm--02 .ecm__compare.is-axis-revealed .ecm__compare-line--mid {
    transform: none;
    transition: none;
  }

  .ecm--02 .ecm__compare:not(.is-axis-revealed) .ecm__compare-line--tail,
  .ecm--02 .ecm__compare.is-axis-revealed .ecm__compare-line--tail {
    transform: translateX(-50%);
    transition: none;
  }

  .ecm--02 .ecm__compare:not(.is-axis-revealed) .ecm__compare-line--tail::after,
  .ecm--02 .ecm__compare.is-axis-revealed .ecm__compare-line--tail::after {
    opacity: 1;
    transition: none;
  }
}

@media (max-width: 767px) {
  .ecm--02 {
    overflow-x: clip;
  }

  .ecm--02 .ecm__inner {
    padding-block: clamp(2.5rem, 12vw, 3.5rem);
  }

  .ecm__compare-panels {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 6vw, 2rem);
  }

  .ecm__panel--collapsed,
  .ecm__panel--strong {
    border: 1px solid var(--color-border);
    border-radius: var(--ecm-02-panel-radius);
    overflow: visible;
  }

  .ecm__panel--strong {
    border-color: var(--color-primary);
  }

  .ecm__panel--collapsed .ecm__panel-head {
    border-radius: var(--ecm-02-panel-radius) var(--ecm-02-panel-radius) 0 0;
  }

  .ecm__panel--strong .ecm__panel-head {
    border-radius: var(--ecm-02-panel-radius) var(--ecm-02-panel-radius) 0 0;
  }

  .ecm--02 .ecm__eyebrow,
  .ecm__panel-foot-line {
    white-space: normal;
  }

  .ecm__panel-foot {
    font-size: clamp(0.956rem, 3.83vw, 1.488rem);
  }

  .ecm--02 .ecm__eyebrow {
    max-width: 100%;
  }

  .ecm__panel--collapsed .ecm__panel-images {
    align-items: flex-start;
    container-type: inline-size;
  }

  .ecm__panel--strong .ecm__panel-images {
    align-items: flex-end;
    container-type: inline-size;
  }

  .ecm__panel-image-wrap {
    overflow: visible;
    width: min(88%, 493px);
  }

  .ecm__panel-image-wrap img {
    width: 100%;
  }

  .ecm__compare-tag--panel {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    text-align: center;
    font-size: clamp(0.934rem, 4.08vw, 1.53rem);
    transform: translateY(-50%);
  }

  .ecm__panel--collapsed .ecm__compare-tag--panel {
    left: auto;
    right: calc(var(--ecm-02-tag-inset) - (100cqw - 100%));
  }

  .ecm__panel--strong .ecm__compare-tag--panel {
    right: auto;
    left: calc(var(--ecm-02-tag-inset) - (100cqw - 100%));
  }

  .ecm__compare-overlay {
    display: none;
  }
}