/* =====================================================================
   NOTFIT V2 — elevation pass (2026-06-23).
   Old-app-UI stills replaced with current-design clips/CSS, hero 3D,
   kinetic type and richer scroll choreography. Loaded LAST so it wins.
   ===================================================================== */

/* ---- Sticky header: permanent blurred glass (V2 doesn't load the
       scroll-class script, so the nav was transparent and overlapped) ---- */
.nfx-page .nf-nav {
  /* Solid (no backdrop-filter): a blurred sticky bar re-samples the whole
     page behind it on every scroll frame - the single biggest cause of
     "laggy everywhere" scrolling. A near-opaque fill costs nothing. */
  background: #0a0a0a;
  border-bottom: 1px solid var(--nfx-line);
}

/* ---- Nutrition feature ("Personalized Meal Planning") — was spilling
       outside the card. Use a grid that GROWS to fit content, top-align the
       copy (no vertical centring overflow), and clip nothing. ---- */
.nfx-nutrition-card--feature {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: stretch;
  gap: clamp(1rem, 0.5rem + 1.6vw, 2rem);
  overflow: hidden;          /* card now equals content height, so nothing clips */
  min-height: 0;             /* let it size to content, not a fixed 380 */
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
}
.nfx-nutrition-feature-copy { justify-content: flex-start; }   /* top-aligned */
.nfx-nutrition-card--feature h3 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);            /* wraps to ~2 lines, not 3 */
  line-height: 1.12;
}
.nfx-nutrition-card--feature .nfx-nutrition-feature-copy p { font-size: 0.98rem; }
.nfx-nutrition-photo { width: 100%; height: 100%; min-height: 220px; object-fit: cover; align-self: stretch; }
@media (max-width: 860px) {
  .nfx-nutrition-card--feature { grid-template-columns: 1fr; }
}

/* ============================================================
   Professional graph redesign (donut + weekly bar chart + eco ring)
   ============================================================ */

/* Macro donut — proper thin ring with segment gaps (was a flat disc).
   The ring lives on ::before so the centre kcal label (a child of the ring)
   is NOT clipped by the ring mask. */
.nfx-nutrition-ring {
  width: 116px;
  height: 116px;
  background: none;
  filter: drop-shadow(0 6px 16px rgba(209, 187, 154, 0.18));
}
.nfx-nutrition-ring::after { display: none; } /* old centre disc no longer needed */
.nfx-nutrition-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -90deg,
    var(--nfx-gold)         0    44%,
    transparent             44%  45.4%,
    var(--nfx-amber)        45.4% 74%,
    transparent             74%  75.4%,
    var(--nfx-gold-bright)  75.4% 100%);
  -webkit-mask: radial-gradient(farthest-side, #0000 62%, #000 64%);
  mask: radial-gradient(farthest-side, #0000 62%, #000 64%);
}
.nfx-nutrition-ring-val strong { font-size: 1.25rem; }
.nfx-nutrition-ring-val span { font-size: 0.6rem; }
.nfx-nutrition-legend li { font-size: 0.84rem; gap: 0.55rem; }
.nfx-nutrition-legend i { width: 10px; height: 10px; border-radius: 50%; }

/* Weekly consistency — a real mini bar chart with baseline + day labels
   + a highlighted peak day */
.nfx-chart {
  margin-top: auto;
  padding-top: 1.25rem;
}
.nfx-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 88px;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--nfx-line);
}
.nfx-chart__bars span {
  flex: 1;
  height: calc(var(--h) * 1%);
  min-height: 6px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, rgba(209, 187, 154, 0.55), rgba(209, 187, 154, 0.12));
  transition: filter 0.3s var(--nfx-ease);
}
.nfx-chart__bars span.is-peak {
  background: linear-gradient(180deg, var(--nfx-gold-bright), var(--nfx-gold));
  box-shadow: 0 0 20px -5px rgba(209, 187, 154, 0.9);
}
.nfx-nutrition-card--reports:hover .nfx-chart__bars span { filter: brightness(1.12); }
.nfx-chart__days {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.nfx-chart__days b {
  flex: 1;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--nfx-muted);
}

/* ---- Testimonials: story tiles are now live current-design recordings ---- */
.nfx-testimonials-story-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ---- What's-in-app: "Holistic Ecosystem" — 2x2 pillar grid (replaces the
       donut; fills the card so there's no big empty gap) ---- */
.nfx-eco2 {
  margin-top: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  flex: 1;                                  /* fill the rest of the card height */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: clamp(0.7rem, 0.4rem + 0.8vw, 1.1rem);
}
.nfx-eco2__tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  padding: clamp(0.9rem, 0.6rem + 0.8vw, 1.35rem);
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%),
    var(--nfx-card-2);
  border: 1px solid var(--nfx-line);
}
.nfx-eco2__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  color: var(--c);
  font-size: 1.25rem;
}
.nfx-eco2__tile b { font-size: 1.02rem; font-weight: 700; color: #fff; line-height: 1; }
.nfx-eco2__tile small { font-size: 0.76rem; color: var(--nfx-muted); }

/* ---- Platform CTAs (Use on web / Download iOS / Download Android) ---- */
.nfx-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}
.nfx-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid var(--nfx-line-2);
  color: #fff;
  background: rgba(18, 20, 20, 0.55);
  backdrop-filter: blur(14px);
  transition: transform 220ms var(--nfx-ease), border-color 220ms, background 220ms;
}
.nfx-platform i { font-size: 1.25em; }
.nfx-platform:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.45); }
.nfx-platform--web {
  color: #1a1407;
  border: none;
  background: linear-gradient(180deg, var(--nfx-gold-bright), var(--nfx-gold));
  box-shadow: 0 18px 40px -22px rgba(209, 187, 154, 0.85);
}
.nfx-platform--web:hover { box-shadow: 0 26px 56px -22px rgba(209, 187, 154, 0.95); }

/* ---- Remove scroll-jacking artefacts: bands no longer stick ---- */
.nfx-band__media { position: static; top: auto; }

/* ---- Feature bands: fully responsive stack (fixes the CTA that used to
       sit inline beside the bullet list, and the cramped 861-980 range).
       Bullets become a centred block, the button drops to its own line. ---- */
@media (max-width: 980px) {
  .nfx-band,
  .nfx-band--rev {
    grid-template-columns: 1fr;
    gap: 2rem;
    justify-items: center;
    text-align: center;
  }
  .nfx-band__media { order: -1; perspective: none; }
  .nfx-band__copy {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nfx-band__tag { justify-content: center; }
  .nfx-band__points {
    display: flex;            /* NOT inline-flex — keep it on its own line */
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }
  .nfx-walk-cta { margin-top: 1.6rem; align-self: center; }
  .nfx-band__media .nfx-device { --dev-w: clamp(220px, 52vw, 300px); }
}

/* ---- Devices dropped into existing stages (cta / whatsinapp) ---- */
.nfx-cta-stage { display: flex; justify-content: center; }
.nfx-cta-stage .nfx-device { width: min(300px, 80%); }

/* Routine stacks: phone floats free, no box behind it; copy is text-led. */
.nfx-whatsinapp-wide { grid-template-columns: 1.15fr 0.85fr; }
.nfx-whatsinapp-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  min-height: 0;
}
.nfx-whatsinapp-visual .nfx-device { width: min(252px, 78%); }
.nfx-whatsinapp-wide-copy { max-width: none; }
.nfx-whatsinapp-wide-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 0.9rem;
  color: var(--nfx-gold);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nfx-whatsinapp-points {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.nfx-whatsinapp-points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.98rem;
}
.nfx-whatsinapp-points i { color: var(--nfx-gold); font-size: 1.15rem; }

@media (max-width: 860px) {
  .nfx-whatsinapp-wide { grid-template-columns: 1fr; }
  .nfx-whatsinapp-points li { font-size: 0.95rem; }
}

/* =====================================================================
   Persistent nav "Apply" CTA — champagne gold (the action colour).
   ===================================================================== */
.nfx-page .nf-nav__cta .nf-btn--gold,
.nfx-page .nf-nav__cta .nf-btn {
  background: var(--nfx-gold-grad);
  color: var(--nfx-gold-ink);
  border: none;
  box-shadow:
    0 14px 34px -18px var(--nfx-gold-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 200ms var(--nfx-ease), filter 200ms var(--nfx-ease), box-shadow 200ms var(--nfx-ease);
}
.nfx-page .nf-nav__cta .nf-btn--gold:hover,
.nfx-page .nf-nav__cta .nf-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-2px);
  box-shadow:
    0 22px 48px -20px var(--nfx-gold-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Consistent keyboard focus ring across the whole V2 surface (a11y). */
.nfx-page a:focus-visible,
.nfx-page button:focus-visible,
.nfx-page summary:focus-visible,
.nfx-page input:focus-visible {
  outline: 2px solid var(--nfx-gold);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Red is the rare editorial accent: the negation in "not·fit" and the odd
   emphasis word in a heading. Never a button fill. */
.nfx-cta-tagline-mark .nfx-cta-strike,
.nfx-redmark {
  color: var(--nfx-red);
}

/* =====================================================================
   SCROLL PERFORMANCE PASS (2026-06-30).
   The page felt laggy on scroll. Causes: too many backdrop-filter blur
   layers compositing as content scrolled behind them, and will-change:
   transform sprayed across dozens of static-until-hover cards (each forced
   onto its own GPU layer). Fixes below — visually near-identical, far cheaper.
   ===================================================================== */

/* 1. Drop will-change from cards that only move on hover. The browser
      promotes them on hover anyway; keeping it permanent wastes layer memory
      and is a known scroll-jank source. */
.nfx-pricing-card,
.nfx-nutrition-card,
.nfx-testimonials-card,
.nfx-testimonials-story,
.nfx-whatsinapp-card,
.nfx-gcard,
.nfx-testimonials-viewall,
.nfx-pricing-cta,
.nfx-cta-btn {
  will-change: auto;
}

/* 2. Replace expensive backdrop-filter on small floating overlays with a
      solid translucent fill. backdrop-filter must re-sample everything behind
      it on every scroll frame; a flat rgba does not. */
.nfx-fcard,
.nfx-whatsinapp-checklist,
.nfx-testimonials-story-tag,
.nfx-testimonials-viewall,
.nfx-cta-stores {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.nfx-fcard { background: rgba(20, 22, 22, 0.82); }
.nfx-whatsinapp-checklist { background: rgba(16, 18, 18, 0.9); }
.nfx-testimonials-story-tag { background: rgba(12, 13, 13, 0.74); }

/* 3. No backdrop-filter anywhere on scroll: the nav is now a solid fill
      (set above). Belt-and-braces in case a base rule re-adds blur. */
.nfx-page .nf-nav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 4. Skip rendering + layout for heavy below-the-fold sections until they
      approach the viewport. Big scroll win; intrinsic sizes prevent jump. */
.nfx-noequipment,
.nfx-pricing,
.nfx-nutrition,
.nfx-testimonials,
.nfx-cta,
.nfx-faq,
.nfx-footer {
  content-visibility: auto;
  /* `auto` caches the real height after first paint; the fallback is a
     generous estimate so the first reveal doesn't under-allocate and jump. */
  contain-intrinsic-size: auto 1200px;
}
/* Walkthroughs is the heaviest section (12 device clips). Skipping its
   off-screen render is the single biggest win; the large intrinsic height
   keeps first-reveal scroll shift small. */
.nfx-walk {
  content-visibility: auto;
  contain-intrinsic-size: auto 2800px;
}

/* 5. The small gallery phones don't need the blurred glow + contact-shadow
      halos (18 blur layers across the 9 thumbnails), nor the huge 120px-blur
      body shadow. Drop/shrink them. */
.nfx-device--sm .nfx-device__glow,
.nfx-device--sm .nfx-device__contact {
  display: none;
}
.nfx-device--sm .nfx-device__body {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 16px 36px -26px rgba(0, 0, 0, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .nfx-mtrack { animation: none; }
}