/* Claims Saathi — Long-form page content
   -----------------------------------------------------------------------------
   Owns the body of the service, guide and legal pages: the article column, the
   content blocks inside it, and the related-service cards at the end.

   These blocks were previously nested `.section` elements, each cancelling the
   section padding with an inline style, and each heading rendered at the
   full-page `h2` size (up to 48px). Twelve consecutive blocks at hero volume
   with no separation is what made the pages read as an undifferentiated wall of
   text. Content blocks now have their own rhythm, a calmer heading scale and a
   hairline rule between them.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Article shell
   -------------------------------------------------------------------------- */

/* Sits directly under the hero, so it needs less padding on top. */
.section--article {
  padding-top: clamp(2rem, 4vw, 3rem);
}

/* Keep the article column readable; TOC rides beside it on desktop. */
.page-with-toc__main .content-block__header h2 {
  scroll-margin-top: calc(var(--header-h-scrolled) + var(--utility-h) + var(--space-4));
}

.page-with-toc__main .prose {
  max-width: 46rem;
}

.page-with-toc__main .check-list,
.page-with-toc__main .doc-list,
.page-with-toc__main .timeline {
  max-width: 46rem;
}

.container--reading {
  max-width: 46rem;
}

/* --------------------------------------------------------------------------
   Content blocks
   -------------------------------------------------------------------------- */

.content-block {
  padding-block: clamp(2rem, 3.5vw, 3rem);
}

.content-block + .content-block {
  border-top: 1px solid var(--border);
}

.content-block:first-child {
  padding-top: 0;
}

.content-block:last-child {
  padding-bottom: 0;
}

.content-block__header {
  margin-bottom: var(--space-5);
  max-width: 46rem;
}

/* Body headings sit well below the hero in the hierarchy. */
.content-block__header h2 {
  margin: 0;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.content-block__header > p {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Related-service cards
   -------------------------------------------------------------------------- */

.related-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.related-card__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

.related-services .panel:hover .related-card__title {
  color: var(--blue-700);
}

/* --------------------------------------------------------------------------
   Shared spacing helpers
   -------------------------------------------------------------------------- */

.stack-top {
  margin-top: var(--space-6);
}

.section__note--center {
  margin-inline: auto;
  max-width: 40rem;
  text-align: center;
}

.form-hint--inline {
  display: inline;
}

.journey-path {
  width: 100%;
  height: 2.5rem;
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  .content-block {
    padding-block: var(--space-8);
  }

  .content-block__header h2 {
    font-size: var(--fs-2xl);
  }
}