/* ============================================================
 * /css/guide.css  —  shared styles for guide pages
 *
 * Used by every long-form guide (e.g. /guides/reduce-medicare-claim-rejections,
 * /guides/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 */
.breadcrumb + .guide-hero { padding-top: var(--space-24); }
.guide-hero {
  padding-top: var(--space-section-standard);
  padding-bottom: var(--space-section-tight);
}
.guide-hero .guide-meta {
  margin-top: var(--space-16);
  font-family: var(--font-mono);
  font-size: var(--type-body-s);
  color: var(--color-stone-60);
  letter-spacing: 0.01em;
}
.guide-hero .descriptor {
  max-width: 62ch;
  margin-top: var(--space-20);
  color: var(--color-stone-60);
}

/* GUIDE BRIEF  —  "In short" key takeaways + "On this page" jump nav.
   Answer-first summary (lift-out-able for AI answers + human skimming) beside
   a table of contents. One Mist panel; two columns from md up. */
.guide-intro {
  padding-top: var(--space-section-tight);
  padding-bottom: var(--space-section-tight);
}
.guide-brief {
  max-width: 720px;
  background: var(--color-mist);
  border-radius: var(--radius-default);
  padding: var(--space-32);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}
@media (min-width: 768px) {
  .guide-brief {
    grid-template-columns: 1.7fr 1fr;
    gap: var(--space-48);
    padding: var(--space-48);
  }
  .brief-toc {
    border-inline-start: 1px solid var(--color-stone-20);
    padding-inline-start: var(--space-48);
  }
}
.brief-takeaways .label-s,
.brief-toc .label-s { display: block; margin-bottom: var(--space-16); }
.brief-takeaways .bullet-list { gap: var(--space-12); }
.brief-takeaways .bullet-list li { color: var(--color-stone-90); }
.brief-toc ol {
  list-style: none;
  display: grid;
  gap: var(--space-12);
  counter-reset: toc;
}
.brief-toc li { counter-increment: toc; }
.brief-toc a {
  color: var(--color-royal);
  font-weight: 500;
  font-size: var(--type-body-s);
  line-height: var(--lh-title-s);
}
.brief-toc a::before {
  content: counter(toc) ".";
  margin-inline-end: var(--space-8);
  color: var(--color-stone-60);
  font-family: var(--font-mono);
  font-size: var(--type-label-m);
}
.brief-toc a:hover { color: var(--color-navy); }

/* SECTIONS  —  .mist alternation from brand.css */
.guide-section {
  padding-top: var(--space-section-standard);
  padding-bottom: var(--space-section-standard);
}
/* Clear the sticky header when a jump link lands on a section */
.guide-section[id] { scroll-margin-top: var(--space-96); }

/* 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; }

/* INLINE CTA  —  quiet, contextual, single link. Sits after a prose block
   (not inside .prose, so the prose underline rule never touches it). */
.guide-inline-cta { margin-top: var(--space-24); }

/* RELATED  —  "keep reading" section padding. The .related-grid / .related-card
   cross-link cards are shared (site-chrome.css); the glossary reuses them. */
.guide-related {
  padding-top: var(--space-section-standard);
  padding-bottom: var(--space-section-standard);
}

/* END CTA  —  centered, with generous vertical breathing room.
   Matches the .cta-section treatment on the homepage and pricing; the
   content pages never received it, so the heading sat flush on the lede. */
.cta-section { text-align: center; padding-block: var(--space-section-generous); }
.cta-section h2 { max-inline-size: 22ch; margin-inline: auto; }
.cta-section .cta-lede { margin-top: var(--space-20); }