/* =========================================================================
   dual.fit/new/nutrition — ONLY what this page adds on top of v3.

   The page links /marketing/v3/styles.css first and is built from v3's own
   components: .nav, .btn (--light / --outline), .hero__title / .hero__sub,
   .hcard (the glass product cards), .sec / .sec__head / .sec__h, the .rail
   of .rcard numbered cards, .dev (the Figma handset) and the .footer close
   with the giant wordmark. Anything restyled here is because a nutrition
   recording needs it, not to make a second visual language. Brian
   (2026-10-12): it must look like v3's custom elements, not a generic page.
   ========================================================================= */

/* ---- hero: v3's athlete-view hero, over a real meal photograph --------- */
.nhero {
  position: relative;
  overflow: hidden;
  padding: 150px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.nhero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.nhero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: saturate(0.9);
}
/* Two black fades, as v3's hero video has: under the nav, and into the page. */
.nhero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 28%),
    linear-gradient(0deg, #000 8%, rgba(0, 0, 0, 0) 55%);
}
.nhero > :not(.nhero__bg) {
  position: relative;
  z-index: 1;
}
.nhero .hero__title {
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: 1.05;
  padding-block: 0;
}
.nhero .hero__sub {
  margin-top: 16px;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.45;
  color: #e9e9e9;
}
.nhero .btnrow {
  justify-content: center;
  margin-top: 32px;
}

/* The stage: the handset, with two of the app's own cards floating either
   side of it, as v3's coach hero floats Sonata's offers around her phone. */
.nhero__stage {
  margin-top: 64px;
  position: relative;
  width: 100%;
  max-width: 980px;
  display: flex;
  justify-content: center;
  /* flex-start, never the default stretch: a stretched .dev takes the row's
     height and overrides its aspect-ratio, which squashed the handset. */
  align-items: flex-start;
}
.nhero__stage .dev {
  --dev-w: 320px;
  flex: none;
}
.nhero__stage .hcard {
  position: absolute;
  text-align: left;
}
.nhero__stage .hcard--program {
  min-width: 0;
  max-width: 330px;
}
.nhero__stage .hcard__title {
  white-space: normal;
  font-size: 16px;
}
.hcard--meal {
  right: calc(50% + 180px);
  top: 110px;
}
.hcard--targets {
  left: calc(50% + 180px);
  top: 290px;
}
.hcard__targets > span {
  gap: 6px;
}
.hcard__targets {
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--grey-chip);
}
.hcard__targets b {
  font-weight: 600;
  color: var(--white);
}
/* ---- the steps: one feature per section, alternating sides ---------------
   Each is v3's mono step chip, a section heading and one line, beside the
   recording standing on a v3 panel. One phone per screen, so each clip gets
   the attention the rail of three could not give it. */
.step {
  padding: 56px 0;
}
.step__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--col-gap);
}
.step--flip .step__copy {
  order: 2;
}
.step__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.step__copy .rcard__step {
  font-size: 15px;
}
.step__copy .sec__h {
  font-size: clamp(28px, 2.6vw, 40px);
}
.step__copy .prose {
  font-size: 18px;
  color: #d9d9d9;
}
.step__panel {
  background: var(--panel);
  border-radius: 32px;
  padding: 48px 0;
  display: flex;
  justify-content: center;
}
.step__panel .dev {
  --dev-w: 300px;
}
/* ---- the two parts: what the creator does, what the athlete gets -------
   Headed in the hero title's voice (Montserrat, capitals) at section size,
   with v3's hairline above, so the page reads as two halves. */
.part {
  padding: 112px 0 8px;
}
.part__h {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  padding-top: 40px;
  border-top: 1px solid var(--glass-15);
}

/* ---- the handset with a recording in it ----------------------------------
   The recordings are mobile-web captures with no iOS status bar, so a strip
   in the colour of each recording's top edge is painted for the island to
   sit in; without it the island covers the app's own header. */
.dev .dev__screen {
  display: flex;
  flex-direction: column;
}
.dev .dev__screen::before {
  content: '';
  flex: none;
  height: 7.2%;
  background: var(--bar, #fff);
}
.dev--dark {
  --bar: #000;
}
.dev .dev__screen video {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-position: top;
}

/* ---- phone ------------------------------------------------------------- */
@media (max-width: 900px) {
  .nhero {
    padding-top: 112px;
  }
  .nhero .hero__sub {
    font-size: 16px;
  }
  .nhero__stage {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 48px;
  }
  .nhero__stage .dev {
    --dev-w: min(280px, 72vw);
  }
  /* On a phone the meal card sits over the handset's lower edge and the
     targets card is dropped: two floating cards over one phone is clutter. */
  .nhero__stage .hcard {
    position: static;
    max-width: calc(100vw - 32px);
  }
  .nhero__stage .dev {
    order: 1;
  }
  .hcard--meal {
    order: 2;
    margin-top: -96px;
    z-index: 2;
  }
  .hcard--targets {
    display: none;
  }
  .part {
    padding: 64px 0 0;
  }
  .part__h {
    padding-top: 28px;
  }
  .step {
    padding: 32px 0;
  }
  .step__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .step--flip .step__copy {
    order: 0;
  }
  .step__panel {
    padding: 32px 0;
    border-radius: 24px;
  }
  .step__panel .dev {
    --dev-w: min(270px, 70vw);
  }
}

/* Phone: the bar is logo, audience switch and menu, as on the homepage. The
   nav's "Add your meal plan" would push the switch off the edge, and the
   hero's own button says the same thing right under it. */
@media (max-width: 760px) {
  .nav__right > .btn {
    display: none;
  }
}