/* ------------------------------------------------------------------
   BlackVertex — "Where this fits, and where it doesn't."
   Objection handler before the fit CTA. A cinematic focus reel: a
   stack of answer-first stances, the one nearest the viewport centre
   becomes most legible while the rest fade back.
   Stance-first (the answer is the headline, not the doubt). Dark ink
   band, on the home tokens, feeding straight into .closing-cta.
   ------------------------------------------------------------------ */

.where-fits {
  --where-fits-pad-start: clamp(40px, 6vw, 96px);
  position: relative;
  width: 100%;
  background: var(--ink);
  color: var(--paper-raised);
  padding: var(--where-fits-pad-start) 0 clamp(20px, 4vw, 60px);
}

.where-fits__inner {
  width: var(--site-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 0.66fr) minmax(0, 1.4fr);
  gap: clamp(36px, 6vw, 110px);
  align-items: start;
}

/* head (sticky frame) */
.where-fits__head {
  position: sticky;
  top: 0;
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  margin-top: calc(0px - var(--where-fits-pad-start));
  padding-block: clamp(28px, 4vh, 56px);
}
.where-fits__label {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(248, 247, 242, 0.5);
}
.where-fits__title {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(38px, 4.8vw, 72px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.05em;
  color: var(--paper-raised);
  text-wrap: balance;
}
.where-fits__title em { font-style: normal; color: rgba(248, 247, 242, 0.44); }
.where-fits__lede {
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  max-width: 38ch;
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(248, 247, 242, 0.66);
  text-wrap: pretty;
}
.where-fits__dots {
  display: flex;
  gap: 10px;
  margin-top: clamp(28px, 3.4vw, 44px);
}
.where-fits__dots span {
  width: 7px;
  height: 7px;
  background: rgba(248, 247, 242, 0.26);
  transition: width 320ms var(--ease-out), background-color 320ms var(--ease-out);
}
.where-fits__dots span.is-centered { width: 30px; background: var(--paper-raised); }

/* reel */
.where-fits__reel { min-width: 0; }
.wf-spacer { height: clamp(26vh, 36vh, 44vh); }

.wf-entry {
  --focus: 0;
  --offset: 0;
  margin-block: clamp(58px, 10vh, 142px);
  opacity: calc(0.32 + (var(--focus) * 0.68));
  transition: opacity 180ms var(--ease-out);
}

.wf-entry__topic {
  margin: 0 0 clamp(10px, 1vw, 14px);
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 247, 242, 0.55);
}
.wf-entry__question {
  max-width: 42ch;
  margin: 0 0 clamp(14px, 1.6vh, 22px);
  color: rgba(248, 247, 242, 0.52);
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 500;
  line-height: 1.38;
}
.wf-entry__stance {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(30px, 4vw, 60px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--paper-raised);
}
.wf-entry__line {
  max-width: 50ch;
  margin: clamp(16px, 2vh, 26px) 0 0;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(248, 247, 242, 0.74);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}
.wf-entry.is-centered .wf-entry__line { opacity: 1; transform: none; transition-delay: 80ms; }

/* responsive */
@media (max-width: 900px) {
  .where-fits { padding-top: clamp(80px, 12vw, 120px); }
  .where-fits__inner { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 48px); }
  .where-fits__head {
    position: static;
    display: block;
    min-height: 0;
    margin-top: 0;
    padding-block: 0;
  }
  .where-fits__title { max-width: 18ch; }
  .where-fits__dots { display: none; }
  .wf-entry {
    margin-block: clamp(54px, 11vh, 96px);
  }
  .wf-entry__stance { max-width: none; font-size: clamp(28px, 7.4vw, 40px); }
  .wf-spacer { height: 20vh; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-entry {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none;
  }
  .wf-entry__line { opacity: 1; transform: none; transition: none; }
  .where-fits__dots span { transition: none; }
}