/* section 04-comparison — template "Comparison" section (framer-2u1ppt), values copied from the template CSS and measured live.
   desktop: two cards side by side (gap 12, padding 40) · tablet 810–1199: padding 24 · phone < 810: stacked, padding 24. */

/* title block: full width, max 480 (framer-cxqtxv) */
.cmp .cmp__title { position: relative; width: 100%; max-width: 480px; }

/* container: row, gap 12 (framer-l4f1m5). The template centres the cards on the cross axis, but its rows never wrap
   while side by side, so both cards are always the same height. Our longer rows wrap between 810 and ~880 px, so the
   cards stretch to keep that equal-height pair (identical to centring whenever the heights already match). */
.cmp .cmp__grid {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}

/* card: #0f151b, radius 16, 0.8px border #ffffff0d (data-border="soft"), padding 40, gap 24 */
.cmp .cmp__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  flex: 1 0 0;
  width: 1px;
  padding: 40px;
  border-radius: var(--r-16);
  background-color: var(--surface);
  overflow: visible;
}
.cmp .cmp__card--with { overflow: hidden; }

/* card title: Host Grotesk 500 20/24, -0.02em, white (preset 19n25u9) */
.cmp .cmp__head {
  position: relative;
  width: 100%;
  font-family: var(--f-brand);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--t-100);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* list: column, gap 12, clipped (framer-5qrak1 / ombzmx) */
.cmp .cmp__list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.cmp .cmp__row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  overflow: hidden;
}
/* 24-unit Framer icons drawn at 16px, stroke 1.6 units (≈1.07px), white, round caps */
.cmp .cmp__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: hidden;
}
/* row label: Inter 400 16/22.4, -0.02em, white (preset 1jyfdru, colour overridden to #fff) */
.cmp .cmp__label {
  position: relative;
  flex: 1 0 0;
  width: 1px;
  margin: 0;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--t-100);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ---- right card background stack (framer-zrxaa): image → grass canvas → fade overlay */
.cmp .cmp__bg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow: clip;
  border-radius: inherit;
}
/* image + overlay sit at top: -0.140056 % like the template's layers */
.cmp .cmp__img,
.cmp .cmp__overlay {
  position: absolute;
  top: -0.140056%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.cmp .cmp__img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
}
/* surface-coloured fade from the left: transparent at the right edge → #0f151b at 80 % */
.cmp .cmp__overlay {
  background: linear-gradient(-90deg, rgba(16, 20, 28, 0) 0%, var(--surface) 80%);
  pointer-events: none;
}
/* grass field (js/fx/grass.js, transparent canvas): bottom 45 %, under the fade overlay and the text so the rows stay legible
   and a blank canvas leaves the card exactly as the template. Pointer input is read on the card ([data-fx-host]). */
.cmp .cmp__fx {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 45%;
  max-width: none;
  pointer-events: none;
}

/* ---------------------------------------------------------------- tablet */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .cmp .cmp__card { padding: 24px; }
}

/* ----------------------------------------------------------------- phone */
@media (max-width: 809.98px) {
  .cmp .cmp__grid { flex-direction: column; }
  .cmp .cmp__card { flex: none; width: 100%; padding: 24px; }
}