/* How It Works page only. Shared tokens and components live in base.css.
   Page hero, timeline, role map and CTA copied from home.css so the look matches; home.css is home-only. */

/* ---------- Page hero (no photo) ---------- */
.page-hero { padding-block: var(--s5) var(--section); }
.page-hero__grid { display: grid; gap: var(--s4); }
.page-hero__text h1 { margin-top: 0; }
.page-hero__body { display: grid; gap: var(--s4); align-content: end; }
.page-hero__meta {
  display: grid; gap: var(--s2);
  padding-top: var(--s4); margin-top: var(--s2); border-top: 1px solid var(--line);
}
.page-hero__meta li { display: grid; gap: 2px; }
.page-hero__meta .eyebrow { margin-bottom: 0; }
.page-hero__meta a:hover { color: var(--brass); }
@media (min-width: 1024px) {
  .page-hero { padding-block: var(--s7) var(--section); }
  .page-hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--s7); row-gap: var(--s5); align-items: end; }
  .page-hero__meta { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: 0; }
}

/* ---------- Steps (cards + progress rail; the shared .steps component lives in motion.css). Ivory section, so the sticky phone bar matches. ---------- */
.timeline .steps { --steps-bg: var(--ivory); }

/* ---------- Role map: shared .lanes component in motion.css ---------- */
.role__steps { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--muted); }
.role__steps strong { font-weight: 500; color: var(--ink); }

/* ---------- How you'll hear from Kristen ---------- */
.hear__grid { display: grid; gap: var(--s2); grid-auto-rows: 1fr; }
.hear { background: var(--ink-2); border-color: var(--line-light); transition: border-color 300ms var(--ease); }
.hear:hover { border-color: var(--brass-2); }
.hear .card__body { color: var(--muted-light); }
.hear__label { font-size: var(--eyebrow); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-2); margin-bottom: var(--s3); }
.hear__big { font-family: var(--font-display); font-size: var(--h3); line-height: 1.15; word-break: break-word; margin-bottom: var(--s2); }
.hear .card__foot { border-top: 1px solid var(--line-light); }
.hear .text-link { color: var(--ivory); }
.hear__line { margin-top: var(--s4); color: var(--muted-light); max-width: 62ch; }
@media (min-width: 700px) { .hear__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s3); } }
@media (min-width: 1200px) { .hear__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Final CTA (same as home) ---------- */
.cta__inner { display: grid; gap: var(--s4); justify-items: center; text-align: center; }
.cta__inner .eyebrow { margin-bottom: 0; }
.cta__inner .btn-row { width: 100%; }
.cta__title { max-width: 18ch; }
.cta__contact a { color: var(--ivory); border-bottom: 1px solid var(--brass-2); }
.cta--light .cta__contact a { color: var(--ink); border-bottom-color: var(--brass); }