/* ── App-screen mockups · lifted verbatim from the design source of truth
   (trackeat-flow.html) so the landing's phone screenshots match the app 1:1.
   Loaded after styles.css. Tabler Icons (ti) provide the glyphs. ────────── */
:root {
  --color-bg: #F2F2F7;
  --color-surface: #FFFFFF;
  --color-label: #000000;
  --color-secondary: #8E8E93;
  --color-tertiary: #C7C7CC;
  --color-fill-gray: #E5E5EA;
  --color-separator: #F2F2F7;
  --color-green: #34C759;
  --color-green-soft: #E8F5E9;
  --color-green-text: #1F5C2E;
  --color-blue: #007AFF;
  --color-blue-soft: #E3F2FD;
  --color-orange: #FF9500;
  --color-orange-soft: #FFF4E5;
  --color-pink: #FF2D55;
  --color-pink-soft: #FCE4EC;
  --color-red: #FF3B30;
  --color-meat-soft: #FFE8D6;
  --color-meat-text: #BF6516;
  --device-w: 393px;
  --device-h: 852px;
  --type-caption2: 11px;
  --type-caption: 12px;
  --type-footnote: 13px;
  --type-subhead: 14px;
  --type-body: 15px;
  --type-callout: 16px;
  --type-headline: 17px;
  --type-title2: 22px;
}

/* Scaler — the design device is a fixed 393×852; shrink it to fit the page. */
.device-frame {
  --s: 0.62;
  width: calc(var(--device-w) * var(--s));
  height: calc(var(--device-h) * var(--s));
  flex-shrink: 0;
}
.device-frame .device { transform: scale(var(--s)); transform-origin: top left; }

.device {
  width: var(--device-w); height: var(--device-h);
  background: var(--color-bg); border-radius: 48px; border: 8px solid #1C1C1E;
  overflow: hidden; position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.1);
  font-family: var(--font);
  color: var(--color-label); text-align: left; line-height: 1.4;
}

.status-bar {
  height: 54px; padding: 18px 30px 0;
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--type-headline); font-weight: 600; color: var(--color-label);
}
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 16px; }
.home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; background: var(--color-label); border-radius: 3px;
}
.tab-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 83px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(0,0,0,0.1);
  display: flex; align-items: flex-start; padding-top: 12px;
}
.tab-bar .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--color-secondary); }
.tab-bar .tab i { font-size: 24px; }
.tab-bar .tab span { font-size: 10px; }
.tab-bar .tab.active { color: var(--color-green); }
.tab-bar .tab.active span { font-weight: 500; }
.tab-bar .tab.fab .fab-btn {
  width: 52px; height: 52px; background: var(--color-green); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: -12px;
  box-shadow: 0 4px 12px rgba(52,199,89,0.3);
}
.tab-bar .tab.fab i { color: #fff; font-size: 26px; }

.nav-bar { padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.nav-bar .nav-side { color: var(--color-green); font-size: var(--type-callout); display: flex; align-items: center; gap: 2px; }
.nav-bar .nav-side i { font-size: 22px; }
.nav-bar .nav-title { font-size: var(--type-callout); font-weight: 500; }
.nav-bar .nav-right { color: var(--color-green); }
.nav-bar .nav-right i { font-size: 22px; }
.row-section-label {
  margin: 18px 20px 6px; font-size: var(--type-caption2); color: var(--color-secondary);
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500;
}

.chip { background: var(--color-surface); border-radius: 14px; padding: 5px 11px; font-size: var(--type-caption); white-space: nowrap; }
.chip.success-soft { background: var(--color-green-soft); color: var(--color-green-text); font-weight: 500; }

.progress-bar { width: 100%; height: 8px; background: var(--color-bg); border-radius: 4px; overflow: hidden; }
.progress-bar .progress-fill { height: 100%; background: var(--color-green); border-radius: 4px; }
.progress-bar.thin { height: 4px; }

.meal-row { padding: 12px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 0.5px solid var(--color-separator); }
.meal-row:last-child { border-bottom: none; }
.meal-row .meal-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.meal-row .meal-icon i { font-size: 18px; }
.meal-row .meal-body { flex: 1; min-width: 0; }
.meal-row .meal-name { font-size: var(--type-subhead); color: var(--color-label); font-weight: 500; }
.meal-row .meal-cal { font-size: var(--type-subhead); font-weight: 500; }

.bg-orange-soft { background: var(--color-orange-soft); color: var(--color-orange); }
.bg-green-soft  { background: var(--color-green-soft);  color: var(--color-green); }
.bg-blue-soft   { background: var(--color-blue-soft);   color: var(--color-blue); }
.bg-pink-soft   { background: var(--color-pink-soft);   color: var(--color-pink); }
.bg-meat-soft   { background: var(--color-meat-soft);   color: var(--color-meat-text); }

.onboard-top { padding: 8px 16px; display: flex; align-items: center; gap: 12px; }
.onboard-top i { font-size: 22px; color: var(--color-green); }
.onboard-top .step-num { font-size: var(--type-caption); color: var(--color-secondary); }
.onboard-heading { padding: 16px 24px 0; }
.onboard-heading h2 { font-size: 24px; font-weight: 500; line-height: 1.2; }
.onboard-heading p { font-size: var(--type-footnote); color: var(--color-secondary); margin-top: 6px; }
.onboard-options { margin: 20px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.progress-dots { display: flex; gap: 4px; flex: 1; }
.progress-dots .dot { flex: 1; height: 4px; background: var(--color-fill-gray); border-radius: 2px; }
.progress-dots .dot.done { background: var(--color-green); }

.option-card { background: var(--color-surface); border: 2px solid var(--color-fill-gray); border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 12px; }
.option-card.selected { border-color: var(--color-green); }
.option-card .opt-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.option-card .opt-icon i { font-size: 20px; }
.option-card .opt-body { flex: 1; min-width: 0; }
.option-card .opt-title { font-size: var(--type-body); font-weight: 500; }
.option-card .opt-sub { font-size: var(--type-caption); color: var(--color-secondary); margin-top: 1px; }
.option-card .opt-radio { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-tertiary); }
.option-card.selected .opt-radio { background: var(--color-green); border: none; display: flex; align-items: center; justify-content: center; }
.option-card.selected .opt-radio i { color: #fff; font-size: 14px; }

.calorie-ring-card { margin: 0 16px; background: var(--color-surface); border-radius: 20px; padding: 20px; display: flex; align-items: center; gap: 16px; }
.ring { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-inner .ring-value { font-size: var(--type-title2); font-weight: 500; line-height: 1; }
.ring-inner .ring-sub { font-size: 11px; color: var(--color-secondary); margin-top: 2px; }
.macros { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.macro-line .macro-line-top { display: flex; justify-content: space-between; font-size: var(--type-caption); margin-bottom: 4px; }
.macro-line .macro-line-top .name { color: var(--color-secondary); }
.macro-line .macro-line-top .val { color: var(--color-label); font-weight: 500; }

.btn { border: none; cursor: pointer; padding: 14px; border-radius: 16px; font-size: var(--type-callout); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; }
.btn-primary { background: var(--color-green); color: #fff; }
.btn-ghost { background: transparent; color: var(--color-secondary); font-weight: 400; }
.btn-block { width: 100%; }
.bottom-cta { position: absolute; bottom: 24px; left: 16px; right: 16px; }
.premium-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; background: linear-gradient(90deg, var(--color-green), var(--color-blue)); border-radius: 12px; color: #fff; font-size: 9px; font-weight: 500; letter-spacing: 0.5px; }
.device input[type=range] { width: 100%; accent-color: var(--color-green); }

.week-strip { margin: 0 16px 12px; background: var(--color-surface); border-radius: 14px; padding: 8px; display: flex; gap: 4px; }
.week-strip .day { flex: 1; padding: 6px 4px; text-align: center; border-radius: 10px; }
.week-strip .day.active { background: var(--color-green); color: #fff; }
.week-strip .day .day-label { font-size: 10px; color: var(--color-secondary); }
.week-strip .day.active .day-label { color: rgba(255,255,255,0.85); }
.week-strip .day .day-num { font-size: var(--type-subhead); font-weight: 500; margin-top: 2px; }
.week-strip .day.active .day-num { color: #fff; }
.week-strip .day.future .day-num { color: var(--color-tertiary); }

/* Mockup sizing inside the feature sections. */
.fsec .device-frame { --s: 0.6; }