/* ============================================================
   HiveMind Landing Page — §3 Problem (HM-436 / LP-04; reworked HM-496)
   "Case-file ledger": three ICP call-outs as records in a precise ledger.
   A left rail carries the role (sage — the one signal colour), so
   "three different people" is structural, not just stated. Each
   pain is a large statement (the emotional anchor); hairline rules
   frame the records (no cards); the turn lands as a display-scale
   payoff with the insight in sage. Colours/type/space from tokens.

   Hierarchy is the whole game here: small muted lead -> BIG bright
   pains -> muted consequences -> BIGGEST bright turn. Scale climbs
   to the payoff. Content is fully visible by default; problem.js
   applies the pre-reveal state itself (no-JS / reduced-motion show all).
   ============================================================ */

.problem {
  /* Section-scoped composition tokens. Rail is the left column that
     carries the three sage roles; it collapses to a stack on mobile. */
  --rail: 11rem;
  --rail-gap: var(--space-xl);
  --rail-indent: calc(var(--rail) + var(--rail-gap));
  /* Focal scale — dramatic jumps the global steps don't provide between
     h3 and h2. The pains are the anchors; the turn is the climax. */
  --fs-pain: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  --fs-turn: clamp(2rem, 1rem + 3.2vw, 3.5rem);
}

.problem__inner {
  position: relative;      /* anchor for the convergence spine overlay */
  max-width: 62rem;
  margin-inline: auto;
}

/* ---- Intro: the section header, full-width, two tiers ---- */
.problem__title {
  margin-bottom: var(--space-xl);
}

.problem__title-lead,
.problem__title-rest {
  display: block;
  text-wrap: balance;
  letter-spacing: var(--tracking-display);
}

/* "Claude forgets," — blown up, the header's headline.
   margin-bottom is set in the big line's own em so the gap to the second tier
   scales with it and always clears the descenders (comma + "g"); line-height
   0.94 alone left them colliding with the line below at large sizes. */
.problem__title-lead {
  font-size: clamp(3rem, 1.5rem + 7vw, 5.25rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.22em;
}

/* "and your team pays for it." — fitted full width underneath */
.problem__title-rest {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.05;
  color: var(--offwhite);
}

.problem__lead {
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--muted-dark);        /* recedes so the pains own the brightness */
  max-width: 44ch;
  margin-bottom: var(--space-4xl);
}

/* ---- The three records ---- */
.problem__list {
  margin: 0;
}

.problem__item {
  display: grid;
  grid-template-columns: 1fr;      /* mobile: role stacks above the body */
  gap: var(--space-md);
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--line-dark);
}

.problem__item:last-child {
  border-bottom: 1px solid var(--line-dark);
}

/* The role — sage, the section's single signal colour. Not mono, not an
   eyebrow: it is the record's identity, sitting in the rail beside its pain. */
.problem__role {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.25;
  color: var(--hive-300);          /* sage — sanctioned accent text on dark (~6.8:1) */
}

/* The moving pain — the large statement, the anchor of the record. */
.problem__pain {
  font-size: var(--fs-pain);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--offwhite);
  text-wrap: balance;
}

/* The consequence — secondary text, tight measure. */
.problem__consequence {
  margin-top: var(--space-md);
  max-width: 50ch;
  color: var(--muted-dark);
  text-wrap: pretty;
}

/* ---- The turn: the display-scale payoff, aligned to the record column ---- */
.problem__turn {
  margin-top: var(--space-5xl);    /* a long, deliberate pause before the pivot */
  max-width: 26ch;
  font-size: var(--fs-turn);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--tracking-display);
  color: var(--offwhite);
  text-wrap: balance;
}

/* The insight, in sage — the single chromatic climax of the section. */
.problem__turn em {
  font-style: normal;
  color: var(--hive-300);
}

/* ---- Convergence spine (decorative, desktop) ----
   A hairline in the gutter threads the three problems onto one axis and
   resolves them into a single filled node at the reframe: three open problems,
   one root cause. Built + measured by JS (absent without it); aria-hidden. */
.problem__spine {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* Content sits above the spine overlay. */
.problem__title,
.problem__lead,
.problem__list,
.problem__turn {
  position: relative;
  z-index: 1;
}

.problem__spine-line {
  fill: none;
  stroke: var(--line-dark);
  stroke-width: 1;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);         /* undrawn until .is-drawn */
  transition: stroke-dashoffset 1.15s cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
}

.problem__spine.is-drawn .problem__spine-line {
  stroke-dashoffset: 0;
}

/* Open problems: hollow sage rings (ink fill masks the line inside them). */
.problem__spine-node {
  fill: var(--ink);
  stroke: var(--hive-300);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.45s ease-out;
  transition-delay: calc(var(--i) * 0.22s + 0.25s);
}

/* The root cause: one filled sage node, where the three resolve. */
.problem__spine-node--end {
  fill: var(--hive-300);
  stroke: none;
}

.problem__spine.is-drawn .problem__spine-node {
  opacity: 1;
}

/* Reduced motion: no draw — show the schematic fully resolved. */
@media (prefers-reduced-motion: reduce) {
  .problem__spine-line {
    transition: none;
    stroke-dashoffset: 0;
  }
  .problem__spine-node {
    transition: none;
    opacity: 1;
  }
}

/* The spine is a desktop enhancement; the mobile stack stays clean. */
@media (max-width: 767px) {
  .problem__spine { display: none; }

  /* On phones the big line wraps to two lines ("Claude" / "forgets,"), so the
     line-height:1 + 0.22em gap tuned for the single-line desktop case is too
     tight — the comma/"g" descenders of "forgets," crowd the second tier. Give
     the wrapped line a hair more leading and a larger gap so it always clears. */
  .problem__title-lead {
    line-height: 1.05;
    margin-bottom: 0.34em;
  }
}

/* ---- Desktop: engage the rail. Roles sit left of the big pains; the
   intro and payoff align to the record (content) column. ---- */
@media (min-width: 768px) {
  .problem__item {
    grid-template-columns: var(--rail) 1fr;
    column-gap: var(--rail-gap);
    padding-block: var(--space-3xl);   /* generous vertical drama */
  }

  /* Optically drop the sage role to meet the big pain's cap height. */
  .problem__role {
    padding-top: 0.35em;
  }

  /* The header and its lead span full width (they title the fold). The payoff
     indents to the content column so it resolves in the same column the pains
     were stated in — problem and reframe share one spine. */
  .problem__turn {
    padding-left: var(--rail-indent);
  }
}

/* No static hidden/pre-reveal state lives here on purpose: content is fully
   visible by default (DESIGN.md: content visible by default; motion enhances;
   never gate visibility). problem.js applies the pre-reveal state itself,
   only when GSAP + IntersectionObserver are present and motion is allowed. */