/* ===== Calife: AI Calorie Tracker — landing page ===== */
/* Base: Figma frame 1440×4910 → 1px = 0.01rem (÷100). Root font-size set by inline scale script. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-y: scroll; overflow-x: hidden; }

body {
  font-family: 'Poppins', 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #ffffff;
  color: #1D2129;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

.page {
  position: relative;
  width: 14.4rem;
  height: 49.1rem;
  margin: 0 auto;
  overflow: hidden;
  background: #ffffff;
}

/* ---------- Section backgrounds (full width) ---------- */
.section { position: absolute; left: 0; width: 14.4rem; }

.header-bg   { top: 0;      height: 1.0rem;  background: #ffffff; border-bottom: 1px solid #ECF1F7; backdrop-filter: blur(0.2rem); -webkit-backdrop-filter: blur(0.2rem); }
.hero-bg     { top: 1.0rem; height: 7.6rem;  background: linear-gradient(180deg, #EAF7E3 0%, #FFFFFF 100%); }
.feat1-bg    { top: 8.6rem; height: 7.4rem;  background: #F7F7F7; }
.feat2-bg    { top: 16.0rem;height: 7.4rem;  background: #FFFFFF; }
.feat4-bg    { top: 23.4rem;height: 7.4rem;  background: #F7F7F7; }
.feat5-bg    { top: 30.8rem;height: 7.4rem;  background: #FFFFFF; }
.feat6-bg    { top: 38.2rem;height: 7.4rem;  background: #F7F7F7; }
.footer-bg   { top: 45.6rem;height: 3.5rem;  background: #FFFFFF; }

/* ---------- Generic absolute element ---------- */
.el { position: absolute; }

/* ---------- Text primitives ---------- */
.txt-dark    { color: #1D2129; }

/* ---------- Header ---------- */
.logo-icon { left: 1.2rem; top: 0.32rem; width: 0.36rem; height: 0.36rem; }
.logo-icon img { width: 100%; height: 100%; }

.wordmark {
  left: 1.2rem; top: 0.32rem; height: 0.36rem;
  display: flex; align-items: center;
  font-weight: 800; font-size: 0.24rem; line-height: normal;
  color: #7BAC28; white-space: nowrap; text-decoration: none;
}

.nav-link {
  height: 0.24rem;
  display: flex; align-items: center;
  font-weight: 600; font-size: 0.16rem; line-height: normal;
  color: #1D2129; opacity: 0.6; text-decoration: none; white-space: nowrap;
}
.nav-privacy { left: 10.38rem; top: 0.38rem; }
.nav-terms   { left: 12.09rem; top: 0.38rem; }

/* ---------- Badges (pill) ---------- */
.badge {
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #DDF6B3;
  font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 0.14rem;
  line-height: normal; white-space: nowrap;
}
.badge-hero { color: #5C841B; }
.badge-feat { color: #85AD31; text-transform: uppercase; }

/* ---------- Hero ---------- */
.hero-badge { left: 1.2rem; top: 2.705rem; width: 1.83rem; height: 0.29rem; }

.hero-h1 {
  left: 1.2rem; top: 3.235rem; width: 5.2rem; height: 1.24rem;
  font-weight: 800; font-size: 0.54rem; line-height: 1.15; color: #1D2129;
}
.hero-sub {
  left: 1.2rem; top: 4.715rem; width: 5.2rem; height: 0.9rem;
  font-family: 'Figtree', sans-serif; font-weight: 400; font-size: 0.2rem;
  line-height: 1.5; color: #1D2129; opacity: 0.6;
}
.hero-appstore { left: 1.2rem; top: 5.975rem; width: 1.8rem; height: 0.52rem; display: block; }
.hero-appstore img { width: 100%; height: 100%; }

.hero-food { left: 7.89rem; top: 1.7469rem; width: 5.17rem; height: 5.485rem; }
.hero-food img { width: 100%; height: 100%; }

/* ---------- Feature blocks ---------- */
.feat-title {
  width: 5.6rem;
  font-weight: 700; font-size: 0.42rem; line-height: 0.52rem; color: #1D2129;
}
.feat-desc {
  width: 5.6rem;
  font-weight: 400; font-size: 0.22rem; line-height: 0.38rem; color: #1D2129; opacity: 0.55;
}
.mockup { width: 5.6rem; height: 5.0rem; }
.mockup img { width: 100%; height: 100%; }

/* Feature One */
.f1-badge { left: 1.2rem; top: 11.065rem; width: 1.5rem; height: 0.33rem; }
.f1-title { left: 1.2rem; top: 11.635rem; }
.f1-desc  { left: 1.2rem; top: 12.395rem; }
.f1-mockup{ left: 7.6rem; top: 9.8rem; }

/* Feature Two */
.f2-mockup{ left: 1.2rem; top: 17.2rem; }
.f2-badge { left: 7.6rem; top: 18.465rem; width: 1.91rem; height: 0.33rem; }
.f2-title { left: 7.6rem; top: 19.035rem; }
.f2-desc  { left: 7.6rem; top: 19.795rem; }

/* Feature Four */
.f4-badge { left: 1.2rem; top: 25.865rem; width: 2.02rem; height: 0.33rem; }
.f4-title { left: 1.2rem; top: 26.435rem; }
.f4-desc  { left: 1.2rem; top: 27.195rem; }
.f4-mockup{ left: 7.6rem; top: 24.6rem; }

/* Feature Five */
.f5-mockup{ left: 1.2rem; top: 32.0rem; }
.f5-badge { left: 7.6rem; top: 33.265rem; width: 1.8rem; height: 0.33rem; }
.f5-title { left: 7.6rem; top: 33.835rem; }
.f5-desc  { left: 7.6rem; top: 34.595rem; }

/* Feature Six */
.f6-badge { left: 1.2rem; top: 40.595rem; width: 1.94rem; height: 0.33rem; }
.f6-title { left: 1.2rem; top: 41.165rem; width: 5.6rem; height: 1.04rem; }
.f6-desc  { left: 1.2rem; top: 42.445rem; width: 5.6rem; height: 0.76rem; }
.f6-mockup{ left: 7.6rem; top: 39.4rem; }

/* ---------- Footer ---------- */
.footer-divider { left: 0; top: 45.6rem; width: 14.4rem; height: 1px; background: #D9D9D9; }

.footer-brand {
  left: 1.2rem; top: 46.4rem; width: 1.1rem; height: 0.54rem;
  display: flex; align-items: center;
  font-weight: 800; font-size: 0.36rem; line-height: normal; color: #1D2129;
}
.footer-copy {
  left: 1.2rem; top: 47.18rem; width: 4.5rem;
  font-weight: 500; font-size: 0.16rem; line-height: 0.24rem; color: #1D2129; opacity: 0.55;
}
.footer-copy2 { top: 47.5rem; }
.footer-col-head {
  height: 0.24rem; display: flex; align-items: center;
  font-weight: 700; font-size: 0.16rem; line-height: normal; color: #1D2129; white-space: nowrap;
}
.footer-link {
  height: 0.24rem; display: flex; align-items: center;
  font-weight: 500; font-size: 0.16rem; line-height: normal; color: #1D2129; opacity: 0.55;
  text-decoration: none; white-space: nowrap;
}

.foot-core-head { left: 7.2rem; top: 46.4rem; }
.foot-core-1 { left: 7.2rem; top: 46.84rem; }
.foot-core-2 { left: 7.2rem; top: 47.2rem; }
.foot-core-3 { left: 7.2rem; top: 47.56rem; }

.foot-corp-head { left: 10.5rem; top: 46.4rem; }
.foot-corp-1 { left: 10.5rem; top: 46.84rem; width: 2.58rem; }
.foot-corp-2 { left: 10.5rem; top: 47.2rem; width: 2.13rem; }