/* ===== Testimonials Elodie / Content 2 (live nafas.com/id-en/testimonials-elodie, frames "Content 2":
   desktop framer-nbzk7s, tablet + phone framer-v04s2n) =====
   Desktop: three rows (heading + photo | body), (heading + body | chart), (heading | body).
   Tablet / phone: one column per group. Rich text copied from live (generated, see tools/generators/el-content-2/gen.py).
   Text boxes fade in (opacity only) at 50% visible, curve sampled on live (0.42s spring), see js/40-content-2.js.
   No links, hover, press or click states on live. */

.nf-el-content-2 {
  --nf-el-c2-ease: linear(0, 0.02 1.4%, 0.074 5.2%, 0.154 9.2%, 0.24 13.3%, 0.334 17.3%, 0.426 21.1%, 0.508 24.9%, 0.588 28.9%, 0.658 32.9%, 0.72 37%, 0.773 41%, 0.816 44.8%, 0.854 48.8%, 0.884 52.8%, 0.91 56.6%, 0.93 60.4%, 0.947 64.5%, 0.961 68.5%, 0.972 72.5%, 0.979 76.3%, 0.986 80.3%, 0.99 84.4%, 0.994 88.2%, 0.996 92.2%, 0.998 96.2%, 1);
  --nf-el-c2-medium: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", sans-serif;
  --nf-el-c2-regular: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif;
  --nf-el-c2-ot: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  display: block; position: relative; flex: 0 0 auto;
}

/* ---------- Framer rich text: the h2/p takes its values from variables, the 24px spans re-resolve them ---------- */
.nf-el-content-2__t {
  margin: 0; padding: 0; color: rgb(0, 0, 0); text-transform: none; text-decoration: none;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  font-family: var(--el-ff); font-size: var(--el-fs); font-weight: var(--el-fw); font-style: normal;
  line-height: var(--el-lh); letter-spacing: var(--el-ls); font-feature-settings: var(--el-ot); text-align: var(--el-ta);
}
.nf-el-content-2__lg { font-size: 24px; line-height: var(--el-lh); letter-spacing: var(--el-ls); }
.nf-el-content-2__t strong { font-weight: bolder; }

/* headings */
.nf-el-content-2__t--everyday, .nf-el-content-2__t--everyday-m, .nf-el-content-2__t--proof, .nf-el-content-2__t--wanted {
  --el-ff: var(--nf-el-c2-medium); --el-fs: 42px; --el-fw: 500; --el-lh: 125%; --el-ls: normal;
  --el-ot: var(--nf-el-c2-ot); --el-ta: start;
}
.nf-el-content-2__t--everyday-m { --el-lh: 120%; --el-ls: -0.01em; }
/* body texts */
.nf-el-content-2__t--healthy, .nf-el-content-2__t--healthy-t, .nf-el-content-2__t--healthy-p,
.nf-el-content-2__t--elodie, .nf-el-content-2__t--elodie-m,
.nf-el-content-2__t--habits, .nf-el-content-2__t--habits-t, .nf-el-content-2__t--habits-p {
  --el-ff: var(--nf-el-c2-regular); --el-fs: 20px; --el-fw: 400; --el-lh: 150%; --el-ls: normal;
  --el-ot: normal; --el-ta: left;
}
.nf-el-content-2__t--healthy-t, .nf-el-content-2__t--healthy-p, .nf-el-content-2__t--habits-p { --el-lh: 140%; --el-ls: 0.03em; }
.nf-el-content-2__t--habits, .nf-el-content-2__t--habits-t { --el-lh: 1.6em; }

/* text boxes (Framer RichTextContainer) */
.nf-el-content-2__box {
  display: flex; flex-direction: column; justify-content: flex-start; flex: 0 0 auto;
  width: 100%; max-width: 100%; height: auto; position: relative; will-change: transform;
}

/* images */
.nf-el-content-2__fill { display: block; position: absolute; inset: 0; border-radius: inherit; }
.nf-el-content-2__pic { display: block; width: 100%; height: 100%; border-radius: inherit; }
.nf-el-content-2__img { display: block; width: 100%; height: 100%; border-radius: inherit; object-position: center; }
.nf-el-content-2__img--cover { object-fit: cover; }
.nf-el-content-2__img--contain { object-fit: contain; }
.nf-el-content-2__chart-wrap {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0; position: relative; overflow: clip;
}
.nf-el-content-2__chart { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 1.55382 / 1; position: relative; overflow: visible; }

/* scroll appear (JS adds .is-js; without JS everything stays visible) */
.nf-el-content-2.is-js [data-el-reveal] { opacity: 0; transition: opacity 0.422s var(--nf-el-c2-ease); }
.nf-el-content-2.is-js [data-el-reveal].is-in { opacity: 1; }

/* ---------- Desktop (>= 1440, base) ---------- */
.nf-el-content-2__d {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 100px;
  width: 100%; height: min-content; padding: 80px 60px; position: relative; overflow: hidden;
}
.nf-el-content-2__row {
  display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0; position: relative; overflow: clip;
}
.nf-el-content-2__col {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center; align-self: stretch;
  flex: 0 0 auto; max-width: 100%; height: auto; padding: 0; position: relative; overflow: clip;
}
.nf-el-content-2__col--1 { gap: 48px; width: 424px; }
.nf-el-content-2__col--2 { gap: 42px; width: 425px; }
.nf-el-content-2__d .nf-el-content-2__box--healthy, .nf-el-content-2__d .nf-el-content-2__box--habits { width: 800px; }
.nf-el-content-2__d .nf-el-content-2__box--elodie { width: 425px; }
.nf-el-content-2__d .nf-el-content-2__box--wanted { width: 333px; }
.nf-el-content-2__photo { flex: 1 0 0px; width: 100%; height: 1px; border-radius: 24px; position: relative; overflow: visible; }
.nf-el-content-2__d .nf-el-content-2__chart-wrap { width: 800px; }

/* tablet / phone tree */
.nf-el-content-2__m {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 48px;
  width: 100%; height: min-content; padding: 60px 40px; position: relative; overflow: hidden;
}
.nf-el-content-2__group, .nf-el-content-2__group-inner {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 32px;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0; position: relative; overflow: clip;
}
.nf-el-content-2__group--2 { gap: 100px; }
.nf-el-content-2__group-inner { max-width: 101%; }
.nf-el-content-2__photo-m { flex: 0 0 auto; width: 100%; height: 385px; border-radius: 24px; position: relative; overflow: visible; }

/* ---------- Tablet (810 to 1439.98) ---------- */
/* (tablet values are the __m base above) */

/* ---------- Phone (<= 809.98) ---------- */
@media (max-width: 809.98px) {
  .nf-el-content-2__m { gap: 32px; padding: 32px 16px; }
  .nf-el-content-2__group--1, .nf-el-content-2__group--3, .nf-el-content-2__group-inner { gap: 16px; }
  .nf-el-content-2__photo-m { height: 358px; }
  .nf-el-content-2__t--everyday-m, .nf-el-content-2__t--proof, .nf-el-content-2__t--wanted { --el-fs: 29px; }
  .nf-el-content-2__t--elodie-m { --el-lh: 140%; }
}