/* ==========================================================================
   FamilyBeats — The Little Moments (editorial articles)
   Loaded after familybeats.css, only on article pages, so the homepage and
   legal pages are unaffected. Uses the tokens and type roles defined there.
   Every class here is prefixed "lm-" except reused homepage patterns
   (.cta, .btn, .eyebrow, .highlight, .site-header, .site-footer).
   ========================================================================== */

/* ---------- Hero ---------- */

.lm-hero { padding: 40px 0 48px; overflow: hidden; }
.lm-hero__grid { display: grid; gap: 36px; align-items: center; }
.lm-collection { display: inline-flex; align-items: center; gap: 10px; }
.lm-collection__mark { width: 12px; height: 12px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px var(--coral-wash); }
.lm-hero__title {
  margin-bottom: 20px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -0.035em;
  text-wrap: balance;
}
.lm-hero__lede { max-width: 520px; font-size: clamp(19px, 2vw, 23px); line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }

/* The opening exchange, drawn as message bubbles. Real text, read in order. */
.lm-chat {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 420px; margin: 0 auto; padding: 28px 22px;
  border-radius: 36px; background: var(--card);
  box-shadow: 0 30px 60px -36px rgba(27, 35, 64, 0.45);
}
.lm-chat__halo {
  position: absolute; z-index: -1; right: -40px; top: -40px;
  width: 180px; height: 180px; border-radius: 50%; background: var(--sunshine); opacity: 0.55;
}
.lm-bubble {
  max-width: 82%; padding: 12px 18px; border-radius: 22px;
  font-family: var(--font-display); font-size: 21px; line-height: 1.25;
}
.lm-bubble--parent { align-self: flex-end; background: var(--coral); color: var(--navy); border-bottom-right-radius: 8px; }
.lm-bubble--teen { align-self: flex-start; background: var(--muted); color: var(--navy); border-bottom-left-radius: 8px; }
.lm-bubble--teen + .lm-bubble--parent { margin-top: 6px; }

@media (min-width: 640px) {
  .lm-hero { padding: 64px 0 64px; }
  .lm-chat { padding: 36px 30px; }
  .lm-bubble { font-size: 23px; }
}
@media (min-width: 1024px) {
  .lm-hero { padding: 88px 0 80px; }
  .lm-hero__grid { grid-template-columns: 1.2fr 0.8fr; gap: 72px; }
  .lm-chat { margin: 0 0 0 auto; }
}

/* ---------- Article body ---------- */

.lm-body { max-width: 720px; margin: 0 auto; color: var(--ink-soft); font-size: 18px; line-height: 1.7; }
@media (min-width: 640px) { .lm-body { font-size: 19px; } }
.lm-body p + p, .lm-body p + ul, .lm-body ul + p { margin-top: 16px; }

.lm-intro__hook { margin-bottom: 20px; color: var(--navy); font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 36px); line-height: 1.15; letter-spacing: -0.02em; }

.lm-pull {
  color: var(--navy); font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 26px); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance;
}
.lm-body p + .lm-pull, .lm-body ul + .lm-pull { margin-top: 24px; }

/* Each way sits on a rounded card with a colored number, like the homepage features. */
.lm-step {
  --accent: var(--coral); --wash: var(--coral-wash);
  margin-top: 28px; padding: 28px 22px 32px; border-radius: 32px; background: var(--card);
  scroll-margin-top: 80px;
}
.lm-intro + .lm-step { margin-top: 48px; }
.lm-step--coral { --accent: var(--coral); --wash: var(--coral-wash); }
.lm-step--sun { --accent: var(--sunshine); --wash: var(--sunshine-soft); }
.lm-step--mint { --accent: var(--mint); --wash: var(--mint-soft); }
.lm-step--lilac { --accent: var(--lilac); --wash: var(--lilac-soft); }
.lm-step--sky { --accent: var(--sky); --wash: var(--sky-wash); }
.lm-step__title {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px;
  color: var(--navy); font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance;
}
.lm-step__num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.6em; height: 1.6em; margin-top: -0.12em; border-radius: 50%;
  background: var(--accent); color: var(--navy); font-size: 0.82em; letter-spacing: 0;
}
@media (min-width: 640px) { .lm-step { padding: 40px 44px 44px; } }

/* Question prompts: speech-style pills. */
.lm-prompts { display: grid; gap: 10px; margin: 20px 0 24px; }
.lm-prompts li {
  padding: 14px 18px; border-radius: 20px 20px 20px 6px; background: var(--wash);
  color: var(--navy); font-family: var(--font-display); font-size: 20px; line-height: 1.3;
}

/* Small idea cards (rituals, play). */
.lm-cards { display: grid; gap: 10px; margin: 20px 0 24px; }
.lm-cards li {
  position: relative; padding: 14px 18px 14px 44px; border-radius: 18px; background: var(--wash);
  color: var(--navy); font-weight: 600; line-height: 1.5;
}
.lm-cards li::before {
  content: ""; position: absolute; left: 18px; top: 1.15em;
  width: 12px; height: 12px; border-radius: 4px; background: var(--accent);
  box-shadow: 0 0 0 2px var(--card);
}

/* Something to say, set apart as a quiet speech card. */
.lm-say {
  padding: 16px 20px; border-left: 5px solid var(--accent); border-radius: 6px 20px 20px 6px;
  background: var(--wash); color: var(--navy); font-family: var(--font-display); font-size: 21px; line-height: 1.35;
}

/* Reflection: a raised band without a card. */
.lm-reflect { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--hairline); }
.lm-reflect__title {
  margin-bottom: 18px; color: var(--navy); font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 4.2vw, 44px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance;
}
.lm-moments { display: grid; gap: 2px; margin: 28px 0; overflow: hidden; border-radius: 24px; }
.lm-moments li {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--navy); color: var(--cream);
  font-weight: 700; line-height: 1.45;
}
.lm-moments__mark { width: 12px; height: 12px; flex-shrink: 0; }
.lm-moments__mark--square { border-radius: 3px; background: var(--sunshine); }
.lm-moments__mark--circle { border-radius: 50%; background: var(--coral); }
.lm-moments__mark--diamond { transform: rotate(45deg); background: var(--mint); }

/* ---------- Waitlist link card (reuses .cta from the homepage) ---------- */

.lm-cta { max-width: 1000px; margin: 64px auto 0; font-size: 18px; line-height: 1.55; }
.lm-cta .cta__inner p + p { margin-top: 12px; }
.lm-cta__title {
  margin-bottom: 20px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.6vw, 54px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance;
}
.lm-cta__not { font-weight: 800; }
.lm-cta .cta__inner .cta__notice { margin: 24px 0 24px; }
.lm-cta .cta__inner .cta__privacy { margin-top: 14px; }
.lm-cta__btn { margin-top: 0; }
@media (min-width: 640px) { .lm-cta { margin-top: 88px; } }

.lm-disclaimer {
  max-width: 720px; margin: 32px auto 64px; padding: 18px 22px; border-radius: 22px;
  border: 1.5px solid var(--hairline); color: var(--muted-ink); font-size: 14px; line-height: 1.6;
}
@media (min-width: 640px) { .lm-disclaimer { margin-bottom: 96px; } }