/* =====================================================================
   LANDING v2.1 — hub / free apps / video wall.

   Written 2026-08-28 against direct founder feedback on the previous
   pass: "big gaps", "very typical font", "looks like AI did this",
   "make that a bit smaller", and above all "what do you actually get?".

   Three deliberate corrections run through this file:

   1. RHYTHM. Sections were breathing at clamp(76px, 9vw, 136px), which
      on a laptop is a screen and a half of air between ideas. The scale
      here is roughly a third tighter, so the page reads as one argument
      instead of a slideshow of disconnected slides.

   2. TYPE. One typeface for the whole site. An earlier pass added Anton
      as a display face; it has been pulled — Space Grotesk is the brand
      face in the app, on the web and in email, and a second face on one
      page made that page look like a different product. Headlines get
      their presence from weight and negative tracking instead.

   3. HIERARCHY. Titles are smaller, body copy is not. The old page had
      enormous headings over thin grey text, which is exactly the shape
      that reads as filler.

   Loaded LAST on index-a so the rhythm block at the bottom of this file
   can normalise sections whose padding is set in earlier stylesheets.
   ===================================================================== */

:root {
  /* One rhythm for EVERY section on the landing page.
     Deliberately tight: the founder called the gaps out twice, so this is
     set below what a style guide would suggest. Sections are separated by
     background and border, not by a screen of empty black. */
  --nfx-sec-y: clamp(34px, 3.6vw, 54px);
  --nfx-stack: clamp(14px, 1.7vw, 22px);
}

/* ---------- Shared furniture ---------- */

/* ONE TYPEFACE, WHOLE SITE (founder, 2026-08-28).
   A previous pass introduced Anton as a display face for headlines. It is
   gone: the brand runs on Space Grotesk everywhere — app, web, emails — and
   a second face on one page made that page look like a different product.
   Presence now comes from weight and tracking instead of from a new font. */
.nfx-display {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.06;
  text-wrap: balance;
}

.nfx-display em {
  font-style: normal;
  background: var(--nfx-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nfx-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nfx-gold);
  margin-bottom: 10px;
}

/* ---------- HUB — "This is NotFit." ---------- */

.nfx-hub {
  padding: var(--nfx-sec-y) 0;
  background: var(--nfx-ink);
  position: relative;
}

.nfx-hub-head {
  max-width: 640px;
  margin: 0 0 var(--nfx-stack);
}

.nfx-hub-title {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  color: var(--nfx-text);
  margin: 0 0 10px;
}

.nfx-hub-sub {
  color: var(--nfx-muted);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.55;
  margin: 0;
  max-width: 54ch;
}

.nfx-hub-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}

.nfx-hub-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.nfx-hub-tile {
  background: var(--nfx-card);
  border: 1px solid var(--nfx-line);
  border-radius: 14px;
  padding: 16px 16px 15px;
  transition: border-color 0.25s var(--nfx-ease), transform 0.25s var(--nfx-ease);
}

.nfx-hub-tile:hover {
  border-color: rgba(209, 187, 154, 0.34);
  transform: translateY(-2px);
}

.nfx-hub-tile i {
  color: var(--nfx-gold);
  font-size: 1.2rem;
  display: block;
  margin-bottom: 8px;
}

.nfx-hub-tile h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--nfx-text);
  margin: 0 0 5px;
  line-height: 1.25;
}

.nfx-hub-tile p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--nfx-muted);
  margin: 0;
}

.nfx-hub-media { display: flex; justify-content: center; }
.nfx-hub-media .nfx-device { --dev-w: clamp(190px, 20vw, 260px); }

/* ---------- FREE APPS ---------- */

.nfx-apps {
  padding: var(--nfx-sec-y) 0;
  background: linear-gradient(180deg, var(--nfx-ink) 0%, #0a0a0a 100%);
  position: relative;
}

.nfx-apps-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--nfx-stack);
}

.nfx-apps-title {
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  color: var(--nfx-text);
  margin: 0 0 10px;
}

.nfx-apps-sub {
  color: var(--nfx-muted);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 58ch;
}

.nfx-apps-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  align-items: start;
}

.nfx-app {
  background: var(--nfx-card);
  border: 1px solid var(--nfx-line);
  border-radius: 18px;
  padding: clamp(16px, 1.6vw, 22px);
  text-align: center;
  transition: border-color 0.3s var(--nfx-ease), transform 0.3s var(--nfx-ease);
}

.nfx-app:hover {
  border-color: rgba(209, 187, 154, 0.34);
  transform: translateY(-4px);
}

.nfx-app-shot {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.nfx-app-shot .nfx-device { --dev-w: clamp(140px, 14vw, 186px); }

/* Numbered badge. The founder's note was that three cards side by side read
   as "some apps" rather than as three distinct things you are being given, so
   each one is now explicitly benefit 1, 2 and 3. */
.nfx-app-num {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(209, 187, 154, 0.12);
  border: 1px solid rgba(209, 187, 154, 0.4);
  color: var(--nfx-gold-bright);
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.nfx-app { position: relative; }

.nfx-app-free {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nfx-gold);
  background: rgba(209, 187, 154, 0.09);
  border: 1px solid rgba(209, 187, 154, 0.26);
  border-radius: 999px;
  padding: 5px 11px;
  margin-bottom: 10px;
}

.nfx-app-name {
  font-weight: 700;
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  color: var(--nfx-gold-bright);
  margin: 0 0 4px;
  letter-spacing: -0.015em;
}

.nfx-app-tagline {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--nfx-text);
  margin: 0 0 8px;
  line-height: 1.3;
}

.nfx-app-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--nfx-muted);
  margin: 0;
}

/* ---------- Price ---------- */

.nfx-price {
  margin-top: clamp(22px, 3vw, 38px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  border: 1px solid rgba(209, 187, 154, 0.24);
  border-radius: 18px;
  background: linear-gradient(115deg, rgba(209, 187, 154, 0.08) 0%, var(--nfx-card) 60%);
  padding: clamp(20px, 2.6vw, 32px) clamp(20px, 3vw, 38px);
}

.nfx-price-kicker {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nfx-gold);
  margin-bottom: 6px;
}

.nfx-price-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
}

.nfx-price-amount {
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  background: var(--nfx-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.nfx-price-per {
  font-size: 1rem;
  font-weight: 700;
  color: var(--nfx-muted);
}

.nfx-price-alt {
  margin: 4px 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.76);
}

.nfx-price-note {
  margin: 10px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--nfx-muted);
  max-width: 46ch;
}

.nfx-price-act { text-align: center; }

.nfx-price-micro {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--nfx-muted);
}

/* ---------- VIDEO WALL ---------- */

.nfx-wall {
  padding: var(--nfx-sec-y) 0;
  background: var(--nfx-ink);
}

.nfx-wall-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--nfx-stack);
}

.nfx-wall-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--nfx-text);
  margin: 0 0 10px;
}

.nfx-wall-sub {
  color: var(--nfx-muted);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  margin: 0;
}

/* PHONE + RAIL.

   The films were shot on phones and they play in one: the same titanium
   .nfx-device frame used elsewhere on this site (walkthroughs.css).

   All six films are 9:16 and nothing is cropped. The phone aperture is
   384:848, slightly taller than 9:16, so each film fits the screen edge to
   edge and leaves a shallow strip top and bottom that the app chrome sits
   in. See the header comment in videowall.ejs for why four earlier passes
   thought these clips were three different shapes; the short version is
   that most of them are anamorphic and their coded size is not their real
   one.

   Still exactly one <video> on the page. It swaps its source, so the rail
   costs six small lazy avatars and nothing else. */
.nfx-wall-layout {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  /* Capped well inside the container: a phone is narrow, and without this
     the quote beside it would run at newspaper-column width. */
  max-width: 1040px;
  margin-inline: auto;
  /* Top-aligned, not centred. Centring is what left the short right-hand
     column floating in the middle of a tall left-hand one. */
  align-items: start;
}

/* The container lives on the WRAPPER, not on the screen. An element cannot
   query itself: with container-type on .nfx-wall-app its own cqw font-size
   resolved against the viewport instead, and the phone UI rendered at
   57px. */
.nfx-wall-stage { container-type: inline-size; }

.nfx-wall-phone { --dev-w: 100%; cursor: pointer; }

/* ---- the screen, running a player ---- */

.nfx-wall-app {
  position: relative;
  z-index: 1;
  /* The 16 Pro Max aperture the rest of the site's devices use. */
  aspect-ratio: 384 / 848;
  overflow: hidden;
  background: #0b0c0c;
  /* Sized against the phone's own width, so the whole UI scales with the
     device instead of needing a breakpoint per screen size. */
  font-size: 4.4cqw;
}

/* Blurred still of the frame behind, so the space around a square clip
   reads as depth rather than a black void. Costs no extra request: it is
   the poster the player is already loading. */
.nfx-wall-appbg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(26px) brightness(0.4) saturate(0.8);
  transform: scale(1.25);
  opacity: 0.85;
  pointer-events: none;
}

/* The chrome floats OVER the film rather than taking a slice of the screen
   away from it. That way every clip gets the whole aperture to fit into and
   the two 9:16 films come within a whisker of full bleed. */
.nfx-wall-appbar,
.nfx-wall-appfoot {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  padding: 1em 1.15em;
  pointer-events: none;
}

.nfx-wall-appbar { top: 0; }
.nfx-wall-appfoot { bottom: 0; }

/* Scrims. Invisible against the dark screen, and the reason the name stays
   readable on the two films that fill the screen edge to edge. */
.nfx-wall-appbar { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent); }
.nfx-wall-appfoot {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.72), transparent);
  padding-bottom: 1.6em;
}

.nfx-wall-appmark {
  font-size: 0.92em;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--nfx-gold);
}

.nfx-wall-appkicker {
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.62);
}

/* The film gets the entire aperture. Poster and video occupy the identical
   box, so starting playback never moves anything by a pixel. */
.nfx-wall-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.nfx-wall-poster,
.nfx-wall-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, not cover. The films are 9:16 and the aperture is a little
     taller, so cover would trim about a tenth off the top and bottom of
     every one of them, which is enough to clip hair and chins. */
  object-fit: contain;
  display: block;
}

.nfx-wall-video {
  opacity: 0;
  transition: opacity 0.4s var(--nfx-ease);
}

.nfx-wall-video.is-live { opacity: 1; }

.nfx-wall-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4em;
  height: 4em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(6px);
  transition: opacity 0.3s var(--nfx-ease);
}

/* Sibling selector, so the badge disappears the instant the film is live
   without a line of JavaScript knowing this element exists. */
.nfx-wall-video.is-live ~ .nfx-wall-play { opacity: 0; }

.nfx-wall-appwho { min-width: 0; }

.nfx-wall-appwho b {
  display: block;
  font-size: 1.05em;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nfx-wall-appwho small {
  font-size: 0.68em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nfx-gold);
  font-weight: 700;
}

.nfx-wall-sound {
  flex: 0 0 auto;
  width: 2.6em;
  height: 2.6em;
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

.nfx-wall-sound:hover { border-color: var(--nfx-gold); }
.nfx-wall-sound:focus-visible { outline: 2px solid var(--nfx-gold); outline-offset: 2px; }
.nfx-wall-sound.is-on { border-color: var(--nfx-gold); color: var(--nfx-gold); }

/* Transport line along the very bottom of the screen. Driven by timeupdate,
   so it doubles as the signal that the film is actually running. */
.nfx-wall-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 0.32em;
  background: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.nfx-wall-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--nfx-gold);
}

/* ---- what they actually said ---- */

/* The reason to press play. A face alone asks for a minute of someone's
   life on trust; the member's own sentence earns it. */
.nfx-wall-quote {
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  padding: 0 0 clamp(14px, 1.6vw, 18px);
  border-bottom: 1px solid var(--nfx-line);
}

.nfx-wall-mark {
  display: block;
  font-size: 1.5rem;
  color: var(--nfx-gold);
  opacity: 0.7;
  margin-bottom: 10px;
}

.nfx-wall-quote blockquote {
  margin: 0;
  font-size: clamp(1.02rem, 1.35vw, 1.28rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--nfx-text);
  /* Holds the height of the longest quote so switching member does not
     shunt the rail up and down under the reader's cursor. */
  min-height: 4em;
}

/* Read aloud, never drawn. */
.nfx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- the rail ---- */

.nfx-wall-sidelabel {
  margin: 0 0 14px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--nfx-muted);
}

.nfx-wall-note {
  margin: 16px 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--nfx-muted);
  opacity: 0.8;
}

/* A playlist, not a second grid. Six square tiles beside a square stage left
   a short right column floating against a tall left one, which is the sort
   of imbalance that makes a section look unfinished. Six rows fill the
   column to the stage's own height, and carry a name and a running time,
   so choosing a member is an informed click rather than a guess. */
.nfx-wall-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nfx-wall-thumb {
  position: relative;
  appearance: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--nfx-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
  transition: border-color 0.3s var(--nfx-ease), background 0.3s var(--nfx-ease);
}

.nfx-wall-face {
  flex: 0 0 auto;
  width: clamp(46px, 3.9vw, 54px);
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a0a;
  display: block;
}

.nfx-wall-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Held back so the stage stays the subject; restored on hover and when
     this member is the one playing. */
  filter: grayscale(0.55) brightness(0.72);
  transition: filter 0.35s var(--nfx-ease);
}

.nfx-wall-meta { min-width: 0; flex: 1 1 auto; }

.nfx-wall-meta b,
.nfx-wall-meta small {
  display: block;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nfx-wall-meta b {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--nfx-text);
}

/* The row's whole job: say what this person talks about, so choosing one is
   an informed click rather than a coin toss on a thumbnail. */
.nfx-wall-meta small {
  font-size: 0.78rem;
  color: var(--nfx-muted);
}

/* Only rendered when the member speaks a different language to the page. */
.nfx-wall-lang {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--nfx-line);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--nfx-muted);
}

.nfx-wall-len {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--nfx-muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--nfx-ease);
}

.nfx-wall-thumb:hover {
  border-color: rgba(209, 187, 154, 0.45);
  background: rgba(255, 255, 255, 0.05);
}

.nfx-wall-thumb:hover img { filter: none; }
.nfx-wall-thumb:hover .nfx-wall-len { color: var(--nfx-gold); }
.nfx-wall-thumb:focus-visible { outline: 2px solid var(--nfx-gold); outline-offset: 3px; }

.nfx-wall-thumb.is-active {
  border-color: var(--nfx-gold);
  background: rgba(209, 187, 154, 0.09);
}

.nfx-wall-thumb.is-active img { filter: none; }
.nfx-wall-thumb.is-active .nfx-wall-meta b { color: var(--nfx-gold); }
.nfx-wall-thumb.is-active .nfx-wall-len { color: var(--nfx-gold); }
/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .nfx-hub-body { grid-template-columns: 1fr; }
  .nfx-hub-media { order: -1; }
  .nfx-apps-row { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .nfx-price { grid-template-columns: 1fr; text-align: center; }
  .nfx-price-line { justify-content: center; }
  .nfx-price-note { margin-left: auto; margin-right: auto; }
  /* Stage over rail, and the stage stops short of full width so a square
     does not eat an entire tablet screen before the rail is reachable. */
  /* Phone over playlist. Stacked, six full-width rows would run a long way
     down the page, so the rows pair up into two columns instead. */
  .nfx-wall-layout { grid-template-columns: 1fr; gap: 26px; }
  .nfx-wall-stage { max-width: 300px; margin: 0 auto; width: 100%; }
  .nfx-wall-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .nfx-hub-grid { grid-template-columns: 1fr; }
  .nfx-wall-rail { grid-template-columns: 1fr; }
  .nfx-wall-sound { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .nfx-hub-tile,
  .nfx-app,
  .nfx-wall-thumb,
  .nfx-wall-face img,
  .nfx-wall-len,
  .nfx-wall-play,
  .nfx-wall-video { transition: none; }
  .nfx-hub-tile:hover,
  .nfx-app:hover { transform: none; }
}


/* =====================================================================
   ONE VERTICAL RHYTHM FOR THE WHOLE PAGE

   Founder note, 2026-08-28: "too much gaps between sections".

   Every section on this page had its own idea of breathing room, set in
   its own stylesheet, and the worst offenders ran to 152px top AND
   bottom (.nfx-manifesto, .nfx-applyband) — over 300px of dead space
   between two consecutive thoughts. Stacked down the page that is what
   made it feel like a slideshow of unrelated slides rather than one
   argument.

   Rather than hunt the value through eight files, every section is
   normalised here to --nfx-sec-y. This file loads last precisely so
   these win. Sections that deliberately hug the one above them keep the
   asymmetry — a tight top with a normal bottom — because that pairing
   is intentional, not an accident.
   ===================================================================== */

.nfx-manifesto,
.nfx-smaller,
.nfx-whatsinapp,
.nfx-testimonials,
.nfx-applyband,
.nfx-faq {
  padding-top: var(--nfx-sec-y);
  padding-bottom: var(--nfx-sec-y);
}

/* Heading into a section that reads as its continuation: keep the pairing
   close, but no longer cavernous underneath. */
.nfx-different {
  padding-top: var(--nfx-sec-y);
  padding-bottom: calc(var(--nfx-sec-y) * 0.55);
}

.nfx-walk {
  padding-top: var(--nfx-sec-y);
  padding-bottom: calc(var(--nfx-sec-y) * 0.8);
}

/* These two already opened tight against the section above them on
   purpose. That stays; only the bottom is brought into the new scale. */
.nfx-noequipment,
.nfx-nutrition {
  padding-top: clamp(14px, 1.6vw, 30px);
  padding-bottom: var(--nfx-sec-y);
}

.nfx-footer { padding-top: var(--nfx-sec-y); }

/* The bands themselves also carried generous internal padding. */
.nfx-walk-bands .nfx-band { padding: clamp(18px, 2.6vh, 34px) 0; }
/* =====================================================================
   PROOF AT THE APPLY MOMENT

   Founder note: "where it had a testimonial on this, why don't we add one
   of the best videos as well". Proof was living three sections away from
   the decision, so a member on camera and two written quotes now sit
   directly above the apply button.

   Same loading contract as the video wall: no src on the element, the
   source is attached only once the section is in view.
   ===================================================================== */

.nfx-applyband__proof {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
  align-items: center;
  text-align: left;
  max-width: 860px;
  margin: clamp(20px, 3vw, 34px) auto clamp(22px, 3vw, 34px);
}

.nfx-applyband__film {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(209, 187, 154, 0.3);
  background: #0a0a0a;
  cursor: pointer;
}

.nfx-applyband__film img,
.nfx-applyband__film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nfx-applyband__filmshade {
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
  z-index: 2;
}

.nfx-applyband__film figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 3;
}

.nfx-applyband__film figcaption b {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.nfx-applyband__film figcaption small {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--nfx-gold);
}

.nfx-applyband__sound {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 34px;
  height: 34px;
  appearance: none;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nfx-applyband__sound:hover,
.nfx-applyband__sound.is-on { border-color: var(--nfx-gold); color: var(--nfx-gold); }
.nfx-applyband__sound:focus-visible { outline: 2px solid var(--nfx-gold); outline-offset: 2px; }

.nfx-applyband__quotes { display: grid; gap: 14px; }

.nfx-applyband__quotes blockquote {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--nfx-card);
  border: 1px solid var(--nfx-line);
}

.nfx-applyband__quotes blockquote p {
  margin: 0 0 7px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
}

.nfx-applyband__quotes cite {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--nfx-gold);
}

.nfx-applyband__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--nfx-gold);
  text-decoration: none;
}

.nfx-applyband__more:hover { color: var(--nfx-gold-bright); }
.nfx-applyband__more:focus-visible { outline: 2px solid var(--nfx-gold); outline-offset: 2px; }

@media (max-width: 760px) {
  .nfx-applyband__proof { grid-template-columns: 1fr; max-width: 420px; }
}

/* =====================================================================
   ONE DIVIDER BETWEEN EVERY SECTION

   Founder note: "Make them all look like this. So it's just black there,
   black there. So, like a line."

   Sections previously separated themselves with background changes, which
   read as inconsistent seams down the page. Every section on the landing
   page now closes with the same hairline, so the rhythm is deliberate
   rather than accidental. The last one before the footer is suppressed,
   because the footer brings its own top border.
   ===================================================================== */

.nfx-hub,
.nfx-apps,
.nfx-wall,
.nfx-manifesto,
.nfx-smaller,
.nfx-different,
.nfx-whatsinapp,
.nfx-walk,
.nfx-noequipment,
.nfx-nutrition,
.nfx-testimonials,
.nfx-applyband {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* The FAQ sits directly above the footer, which already draws its own
   top border. Two lines there would read as a mistake. */
.nfx-faq { border-bottom: 0; }