/* =====================================================================
   NOTFIT — Landing copy variants (A / B / C), 2026-07.
   Narrative sections used by index-a / index-b / index-c on top of the
   V2 system (notfit-v2.css). Scoped under .nfx- like everything else.
   Champagne gold = action colour. Red = rare editorial accent only —
   and here it carries the brand's strike-through language (the Ø in the
   wordmark): red lines striking OUT the industry's rules.
   Motion: native scroll + IntersectionObserver reveals only, compositor
   friendly properties (transform/opacity), reduced-motion safe.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------- */

/* Gold text selection — tiny detail, reads premium everywhere. */
.nfx-page ::selection { background: rgba(209, 187, 154, 0.9); color: #231a09; }

/* Film grain: static SVG noise tile, very low opacity, no blend mode
   (blend modes were culled in the 2026-06 scroll-perf pass). Sits over
   heroes and closing bands to kill the "flat black div" feel. */
.nfx-grain { position: relative; isolation: isolate; }
.nfx-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.30;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* Champagne hairline between acts: a lit thread, not a border. */
.nfx-hairline {
  height: 1px;
  max-width: min(1100px, 88vw);
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, rgba(209, 187, 154, 0.38), transparent);
}

/* Reveal base — duplicated verbatim from walkthroughs.css so variant
   pages that don't load that sheet (e.g. Variant C) still animate.
   Opt-in: default fully visible; motion JS arms the hidden start. */
.nfx-reveal { opacity: 1; transform: none; }
body.nfx-motion .nfx-reveal {
  opacity: 0;
  transform: translateY(34px) scale(0.986);
  filter: blur(5px);
  transition: opacity 0.8s var(--nfx-ease), transform 0.8s var(--nfx-ease), filter 0.8s var(--nfx-ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
body.nfx-motion .nfx-reveal.is-in { opacity: 1; transform: none; filter: none; }
@media (max-width: 860px) {
  body.nfx-motion .nfx-reveal { filter: none; transform: translateY(24px); }
}
@media (prefers-reduced-motion: reduce) {
  body.nfx-motion .nfx-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------
   Hero apply CTA hooks — used by the V2 hero markup but never given
   styles of their own; defined here so the variant heroes are deliberate:
   button on its own line, quiet microcopy underneath.
   --------------------------------------------------------------------- */
/* Long-copy hero headlines (variants A/B run 25-40 chars per segment vs
   index-v2's short punch). Calmer ceiling than the base 5.7rem so lines
   fill out instead of breaking one word at a time, and text-wrap:balance
   evens out whatever soft wraps remain. */
.nfx-hero__title--long {
  /* 3.8rem cap: the widest segment ("WHAT IF THE FITNESS INDUSTRY")
     measures ~936px at 4.1rem but the hero column is 880px - this cap
     lands it at ~867px so each <br> segment holds a single line on
     desktop. Balance evens out whatever still wraps on smaller screens. */
  font-size: clamp(2.2rem, 1rem + 3.4vw, 3.8rem);
  text-wrap: balance;
}

.nfx-hero__cta--apply {
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.nfx-hero__microcopy {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.85rem;
  line-height: 1.55;
  max-width: 34em;
  margin: 0;
}

/* ---------------------------------------------------------------------
   MANIFESTO (Variant A) — the industry's rules, read like commandments,
   then struck out one by one in brand red. The signature moment of A.
   --------------------------------------------------------------------- */
.nfx-manifesto {
  position: relative;
  padding: clamp(5rem, 10vw, 9.5rem) 0;
  background: var(--nfx-ink);
  text-align: center;
  overflow: hidden;
}
.nfx-manifesto::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: radial-gradient(60% 90% at 50% 100%, rgba(209, 187, 154, 0.08), transparent 70%);
  pointer-events: none;
}
.nfx-manifesto__kicker { margin-bottom: 2.4rem; }
.nfx-manifesto__lead {
  color: var(--nfx-muted);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  letter-spacing: 0.02em;
  margin: 0 0 2.8rem;
}
.nfx-manifesto__rules {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  margin: 0 0 3.4rem;
  padding: 0;
  list-style: none;
}
.nfx-manifesto__rule {
  position: relative;
  display: inline-block;
  margin-inline: auto;
  font-weight: 700;
  font-size: clamp(2rem, 5.8vw, 4.2rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
/* The strike: draws left→right in brand red, then the rule itself dims —
   crossed out, spent. Red used editorially, never as UI. */
.nfx-manifesto__rule::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: 52%;
  height: 0.085em;
  background: var(--nfx-red);
  border-radius: 999px;
  transform-origin: left center;
  transition: transform 650ms var(--nfx-ease) 300ms;
}
.nfx-motion .nfx-manifesto__rule.nfx-reveal { transition-property: opacity, transform, filter, color; }
.nfx-motion .nfx-manifesto__rule.nfx-reveal::after { transform: scaleX(0); }
.nfx-motion .nfx-manifesto__rule.nfx-reveal.is-in::after { transform: scaleX(1); }
.nfx-motion .nfx-manifesto__rule.nfx-reveal.is-in {
  color: rgba(255, 255, 255, 0.34);
  transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 1000ms;
}
.nfx-manifesto__somehow {
  color: var(--nfx-muted);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.55;
  max-width: 34em;
  margin: 0 auto 1.3rem;
}
.nfx-manifesto__punch {
  text-wrap: balance;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.22;
  max-width: 20em;
  margin: 0 auto;
}
.nfx-manifesto__punch em {
  font-style: normal;
  color: var(--nfx-gold);
  text-shadow: 0 0 34px rgba(209, 187, 154, 0.45);
}

/* ---------------------------------------------------------------------
   SMALLER (Variant A) — "getting healthier shouldn't make your life
   smaller": heading left, the "shouldn't mean" list right.
   --------------------------------------------------------------------- */
.nfx-smaller {
  padding: clamp(4rem, 8vw, 7.5rem) 0;
  background: var(--nfx-ink);
}
.nfx-smaller__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.nfx-smaller__title {
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 1.2rem;
}
.nfx-smaller__title em {
  font-style: normal;
  color: var(--nfx-gold);
}
.nfx-smaller__goal {
  color: var(--nfx-muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  max-width: 30em;
  margin: 0;
}
.nfx-smaller__goal b { color: var(--nfx-text); font-weight: 700; }
.nfx-smaller__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nfx-smaller__item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 19px;
  border: 1px solid var(--nfx-line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--nfx-card) 0%, #0e0f0f 100%);
  font-weight: 600;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.88);
  transition: border-color 220ms var(--nfx-ease), transform 220ms var(--nfx-ease), box-shadow 220ms var(--nfx-ease);
}
.nfx-smaller__item:hover {
  border-color: rgba(209, 187, 154, 0.32);
  transform: translateX(6px);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.8);
}
.nfx-smaller__item i {
  flex: 0 0 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(209, 187, 154, 0.10);
  border: 1px solid rgba(209, 187, 154, 0.22);
  font-size: 1.2rem;
  color: var(--nfx-gold);
}
@media (max-width: 900px) {
  .nfx-smaller__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   DIFFERENT (Variants A + B) — "so we built something different" bridge
   into the product-proof sections.
   --------------------------------------------------------------------- */
.nfx-different {
  position: relative;
  padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--nfx-ink);
  text-align: center;
  overflow: hidden;
}
.nfx-different::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(880px, 92vw);
  height: 100%;
  background: radial-gradient(52% 52% at 50% 30%, rgba(209, 187, 154, 0.09), transparent 70%);
  pointer-events: none;
}
.nfx-different > .nfx-container { position: relative; }
.nfx-different__title {
  text-wrap: balance;
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  max-width: 22em;
  margin: 0 auto 1.2rem;
}
.nfx-different__title .nfx-redmark { color: var(--nfx-red); }
.nfx-different__sub {
  color: var(--nfx-muted);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  max-width: 38em;
  margin: 0 auto 2.2rem;
}
.nfx-different__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.nfx-different__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--nfx-line-2);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 0.94rem;
  transition: border-color 220ms var(--nfx-ease), background 220ms var(--nfx-ease), transform 220ms var(--nfx-ease);
}
.nfx-different__chip:hover {
  border-color: rgba(209, 187, 154, 0.35);
  background: rgba(209, 187, 154, 0.08);
  transform: translateY(-2px);
}
.nfx-different__chip i { color: var(--nfx-gold); font-size: 1.05em; }

/* ---------------------------------------------------------------------
   STORY (Variant B) — "it wasn't always this complicated": three
   editorial beats joined by a champagne thread, oversized ghost numbers.
   --------------------------------------------------------------------- */
.nfx-story {
  padding: clamp(4.5rem, 9vw, 8.5rem) 0;
  background: var(--nfx-ink);
}
.nfx-story__title {
  text-wrap: balance;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  letter-spacing: -0.02em;
  margin: 0 0 clamp(2.8rem, 5vw, 4.2rem);
}
.nfx-story__beats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
/* the thread that joins the three beats */
.nfx-story__beats::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: -14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(209, 187, 154, 0.35) 20%, rgba(209, 187, 154, 0.35) 80%, transparent);
}
.nfx-story__beat {
  position: relative;
  padding: clamp(1.7rem, 3vw, 2.3rem);
  border: 1px solid var(--nfx-line);
  border-radius: var(--nfx-radius);
  background: linear-gradient(180deg, var(--nfx-card) 0%, #0d0e0e 100%);
  overflow: hidden;
  transition: border-color 240ms var(--nfx-ease), transform 240ms var(--nfx-ease), box-shadow 240ms var(--nfx-ease);
}
.nfx-story__beat:hover {
  border-color: rgba(209, 187, 154, 0.28);
  transform: translateY(-5px);
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.9);
}
/* the dot that pins each beat to the thread */
.nfx-story__beat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nfx-gold);
  box-shadow: 0 0 0 4px rgba(209, 187, 154, 0.15);
}
.nfx-story__num {
  position: absolute;
  top: -0.26em;
  right: 0.04em;
  font-weight: 700;
  font-size: clamp(5.5rem, 9.5vw, 8rem);
  line-height: 1;
  color: rgba(209, 187, 154, 0.10);
  pointer-events: none;
}
.nfx-story__beathead {
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.01em;
  margin: 0.4rem 0 0.7rem;
  color: var(--nfx-gold);
}
.nfx-story__beattext {
  color: var(--nfx-muted);
  font-size: 0.99rem;
  line-height: 1.65;
  margin: 0;
}
.nfx-story__somehow {
  text-wrap: balance;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  letter-spacing: -0.015em;
  line-height: 1.28;
  max-width: 26em;
  margin: clamp(2.6rem, 5vw, 4.2rem) auto 0;
}
.nfx-story__somehow em {
  font-style: normal;
  color: var(--nfx-gold);
  text-shadow: 0 0 30px rgba(209, 187, 154, 0.4);
}
@media (max-width: 900px) {
  .nfx-story__beats { grid-template-columns: 1fr; }
  .nfx-story__beats::before {
    left: 50%;
    right: auto;
    top: 2%;
    bottom: 2%;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, rgba(209, 187, 154, 0.3) 15%, rgba(209, 187, 154, 0.3) 85%, transparent);
  }
}

/* ---------------------------------------------------------------------
   NOISE (Variant B) — "less noise, not more discipline".
   --------------------------------------------------------------------- */
.nfx-noise {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--nfx-ink);
  text-align: center;
}
.nfx-noise__title {
  text-wrap: balance;
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height: 1.14;
  max-width: 20em;
  margin: 0 auto 2.4rem;
}
.nfx-noise__title em { font-style: normal; color: var(--nfx-gold); }
.nfx-noise__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1020px;
  margin: 0 auto 2.2rem;
}
.nfx-noise__cell {
  padding: 1.7rem 1.2rem 1.5rem;
  border: 1px solid var(--nfx-line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--nfx-card) 0%, #0e0f0f 100%);
  transition: border-color 220ms var(--nfx-ease), transform 220ms var(--nfx-ease), box-shadow 220ms var(--nfx-ease);
}
.nfx-noise__cell:hover {
  border-color: rgba(209, 187, 154, 0.32);
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.9);
}
.nfx-noise__cell i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 0.8rem;
  border-radius: 14px;
  background: rgba(209, 187, 154, 0.10);
  border: 1px solid rgba(209, 187, 154, 0.22);
  font-size: 1.45rem;
  color: var(--nfx-gold);
}
.nfx-noise__cell b {
  display: block;
  font-weight: 700;
  font-size: 1.04rem;
  margin-bottom: 0.35rem;
}
.nfx-noise__cell span {
  color: var(--nfx-muted);
  font-size: 0.89rem;
  line-height: 1.55;
}
.nfx-noise__closer {
  color: var(--nfx-muted);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin: 0;
}
.nfx-noise__closer b { color: var(--nfx-text); }
@media (max-width: 900px) {
  .nfx-noise__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .nfx-noise__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   APPLY BAND (shared) — the application-only close. The word "perfect"
   gets the brand strike: we are not looking for ~perfect~ people.
   --------------------------------------------------------------------- */
.nfx-applyband {
  position: relative;
  padding: clamp(5rem, 10vw, 9.5rem) 0;
  background: var(--nfx-ink);
  text-align: center;
  overflow: hidden;
}
.nfx-applyband::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(980px, 94vw);
  height: 100%;
  background: radial-gradient(55% 55% at 50% 42%, rgba(209, 187, 154, 0.12), transparent 72%);
  pointer-events: none;
}
.nfx-applyband > .nfx-container { position: relative; z-index: 4; }
.nfx-applyband__kicker { margin-bottom: 1.7rem; }
.nfx-applyband__title {
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.7rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 17em;
  margin: 0 auto 1.4rem;
  text-wrap: balance;
}
.nfx-applyband__title em {
  font-style: normal;
  color: var(--nfx-gold);
  text-shadow: 0 0 36px rgba(209, 187, 154, 0.4);
}
/* the struck word — brand red line, same language as the wordmark's Ø */
.nfx-applyband__strike {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.nfx-applyband__strike::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: 52%;
  height: 0.08em;
  background: var(--nfx-red);
  border-radius: 999px;
  transform-origin: left center;
  transition: transform 600ms var(--nfx-ease) 500ms;
}
.nfx-motion .nfx-applyband__title.nfx-reveal .nfx-applyband__strike::after { transform: scaleX(0); }
.nfx-motion .nfx-applyband__title.nfx-reveal.is-in .nfx-applyband__strike::after { transform: scaleX(1); }
.nfx-applyband__body {
  color: var(--nfx-muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.65;
  max-width: 36em;
  margin: 0 auto 1.2rem;
}
.nfx-applyband__familiar {
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  margin: 2.1rem auto 2rem;
  max-width: 26em;
}
/* trust row under the CTA — the deal, spelled out in three quiet chips */
.nfx-applyband__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.nfx-applyband__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--nfx-line);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.85rem;
  font-weight: 600;
}
.nfx-applyband__trust i { color: var(--nfx-gold); font-size: 1.05em; }

/* ---------------------------------------------------------------------
   HERO C (Variant C) — one giant statement. "WORST" carries the brand
   strike, drawn in red a beat after the type lands: the whole pitch in
   one gesture. Slow push-in on the athlete for cinema.
   --------------------------------------------------------------------- */
.nfx-heroC {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(6rem, 12vh, 9rem) 0 clamp(3rem, 7vh, 5rem);
  background: var(--nfx-ink);
  overflow: hidden;
}
.nfx-heroC__athlete {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  opacity: 0.38;
  pointer-events: none;
  animation: nfx-heroC-push 26s var(--nfx-ease) both alternate infinite;
}
@keyframes nfx-heroC-push {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
.nfx-heroC__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(6, 6, 6, 0.08) 0%, rgba(6, 6, 6, 0.74) 68%, var(--nfx-ink) 100%),
    linear-gradient(180deg, rgba(6, 6, 6, 0.5) 0%, transparent 30%, transparent 60%, var(--nfx-ink) 98%);
  pointer-events: none;
}
.nfx-heroC__inner {
  position: relative;
  z-index: 4;
  width: min(1080px, 92vw);
}
/* staggered entrance — same nfx-rise the V2 hero uses */
.nfx-heroC__kicker { margin-bottom: 1.9rem; animation: nfx-rise 800ms var(--nfx-ease) both; }
.nfx-heroC__title { animation: nfx-rise 900ms var(--nfx-ease) 120ms both; }
.nfx-heroC__quit { animation: nfx-rise 900ms var(--nfx-ease) 260ms both; }
.nfx-heroC__sub { animation: nfx-rise 900ms var(--nfx-ease) 380ms both; }
.nfx-heroC__actions { animation: nfx-rise 900ms var(--nfx-ease) 500ms both; }
.nfx-heroC__title {
  font-weight: 700;
  font-size: clamp(2.9rem, 9.5vw, 7.4rem);
  letter-spacing: -0.03em;
  line-height: 0.97;
  text-transform: uppercase;
  margin: 0 0 1.7rem;
}
.nfx-heroC__title em {
  position: relative;
  font-style: normal;
  display: inline-block;
  background: linear-gradient(180deg, #e7d2ad 0%, #d1bb9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* the strike through WORST — draws after the entrance settles */
.nfx-heroC__title em::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: 51%;
  height: 0.075em;
  background: var(--nfx-red);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: nfx-heroC-strike 700ms var(--nfx-ease) 1250ms both;
  box-shadow: 0 0 22px rgba(226, 59, 46, 0.45);
}
@keyframes nfx-heroC-strike { to { transform: scaleX(1); } }
.nfx-heroC__quit {
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  line-height: 1.4;
  margin: 0 0 0.9rem;
}
.nfx-heroC__quit em {
  font-style: normal;
  color: var(--nfx-gold);
  text-shadow: 0 0 28px rgba(209, 187, 154, 0.4);
}
.nfx-heroC__sub {
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(1rem, 1.8vw, 1.22rem);
  line-height: 1.6;
  max-width: 30em;
  margin: 0 auto 2.5rem;
}
.nfx-heroC__micro {
  margin-top: 1.15rem;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.85rem;
}
@media (prefers-reduced-motion: reduce) {
  .nfx-heroC__athlete { animation: none; }
  .nfx-heroC__kicker, .nfx-heroC__title, .nfx-heroC__quit, .nfx-heroC__sub, .nfx-heroC__actions { animation: none; }
  .nfx-heroC__title em::after { animation: none; transform: scaleX(1); }
}

/* ---------------------------------------------------------------------
   C VISUAL BAND — the app, shown not described.
   --------------------------------------------------------------------- */
.nfx-cband {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 7rem);
  background: var(--nfx-ink);
  /* The marquee track and device glow are wider than the viewport; on
     index-v2 the intro section clips them - do the same here. */
  overflow: hidden;
}
.nfx-cband__stage {
  display: flex;
  justify-content: center;
}
.nfx-cband__caption {
  text-align: center;
  color: var(--nfx-muted);
  font-size: 0.95rem;
  margin: 1.7rem auto 0;
  max-width: 30em;
}

/* ---------------------------------------------------------------------
   C QUOTE — one voice, one line of proof, nothing else.
   --------------------------------------------------------------------- */
.nfx-cquote {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--nfx-ink);
  text-align: center;
}
.nfx-cquote__mark {
  display: block;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 0.6;
  color: rgba(209, 187, 154, 0.4);
  font-family: Georgia, serif;
  margin-bottom: 1.1rem;
}
.nfx-cquote__text {
  font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  letter-spacing: -0.01em;
  line-height: 1.4;
  max-width: 26em;
  margin: 0 auto 1.3rem;
  color: rgba(255, 255, 255, 0.92);
}
.nfx-cquote__who {
  color: var(--nfx-muted);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nfx-cquote__who b { color: var(--nfx-gold); font-weight: 700; }