/* ============================================================
 * /pages/guide.css  —  shared styles for guide pages
 *
 * Used by every long-form guide (e.g. /reduce-medicare-claim-rejections,
 * /connect-to-medicare). Chrome (.container, .section-heading, .cta-section,
 * .mist, type utilities, buttons) lives in brand.css. This file holds the
 * guide hero, prose, numbered steps, and FAQ layout.
 * ============================================================ */

/* HERO */
.guide-hero {
  padding-top: var(--space-section-standard);
  padding-bottom: var(--space-section-tight);
}
.guide-hero .descriptor {
  max-width: 62ch;
  margin-top: var(--space-16);
  color: var(--color-stone-60);
}

/* SECTIONS  —  .mist alternation from brand.css */
.guide-section {
  padding-top: var(--space-section-standard);
  padding-bottom: var(--space-section-standard);
}

/* PROSE */
.prose {
  max-width: 68ch;
  margin-top: var(--space-24);
}
.prose > * + * { margin-top: var(--space-16); }
.prose .body-m { color: var(--color-stone-60); }
.cause-list {
  list-style: disc;
  margin: var(--space-4) 0 var(--space-4) var(--space-24);
  color: var(--color-stone-60);
}
.cause-list li + li { margin-top: var(--space-4); }

/* Any in-text link needs a non-colour cue (a11y: link-in-text-block) */
.prose a,
.step-body a,
.faq-a a {
  color: var(--color-royal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* NUMBERED STEPS */
.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--space-32);
  max-width: 720px;
  margin-top: var(--space-32);
}
.step {
  counter-increment: step;
  position: relative;
  padding-left: var(--space-48);
}
.step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: var(--space-32);
  height: var(--space-32);
  border-radius: var(--radius-pill);
  background: var(--color-royal);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
  display: grid;
  place-items: center;
}
.step-title { color: var(--color-midnight); margin-bottom: var(--space-8); }
.step-body { color: var(--color-stone-60); }

/* FAQ */
.faq-list {
  display: grid;
  gap: var(--space-24);
  max-width: 720px;
  margin-top: var(--space-32);
}
.faq-q { color: var(--color-midnight); margin-bottom: var(--space-8); }
.faq-a { color: var(--color-stone-60); max-width: 68ch; }