/* ============================================================
   HiveMind Landing Page — §5 ≈30 min to better output (HM-497 / LP-16)
   Owns the #setup section (the ease / time-to-value beat). Repurposed from
   the old §4 How-it-works (HM-437) — the mechanism moved into §4 Everything's
   Connected; this fold now answers "how hard is it to start?".

   Ground arc (unchanged by the re-sequence): §3 Problem + §4 Connected hold
   solid --ink; this section carries the slow descent --ink -> --hive-900
   (Abyss), which §6 Pillars then holds. Keeping the descent here preserves the
   invisible seams above (Connected, pinned, stays on flat --ink) and below.
   Colors/type from css/tokens.css.
   ============================================================ */

.setup {
  /* Slow vertical descent into the product: starts on the page ground so the
     seam with §4 Connected (--ink) is invisible, settles into Abyss and holds
     it to the bottom so §6 Pillars inherits a resolved ground. */
  background-image: linear-gradient(
    to bottom,
    var(--ink) 0%,
    var(--hive-900) 62%,
    var(--hive-900) 100%
  );
}

.setup__inner {
  max-width: 64rem;
  margin-inline: auto;
}

/* ---- Intro ---- */
.setup__title {
  /* base h2 (Inter 800, --fs-h2, balance, display tracking) */
  max-width: 20ch;
  margin-bottom: var(--space-lg);
}

.setup__lead {
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--muted-dark);
  max-width: 52ch;
  margin-bottom: var(--space-4xl);
}

/* ---- Ease beats — no numbering (the numbered mechanism lives in §4) ---- */
.setup__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

/* A short sage tick above each beat — ties to §4's sage signal without
   re-using §3's ledger hairlines. */
.setup__point::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--hive-300);
  margin-bottom: var(--space-md);
}

.setup__point-lead {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.25;
  color: var(--offwhite);
  text-wrap: balance;
  margin-bottom: var(--space-xs);
}

.setup__point-body {
  color: var(--muted-dark);
  max-width: 46ch;
}

/* ---- Desktop: two columns of beats ---- */
@media (min-width: 768px) {
  .setup__points {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4xl);
    row-gap: var(--space-3xl);
  }
}

/* No static hidden/pre-reveal state here: content is visible by default;
   js/sections/motion.js applies the pre-reveal state only when GSAP +
   IntersectionObserver are present and motion is allowed. */