/* The generic content wrapper most sections use: a bordered band with a padded .wrap,
   and the flex-wrap column grid for tile groups. the approved mockup. */
.band { border-bottom: 1px solid var(--hairline); }
/* A CTA strip right after a band draws its own full-width top rule; the band's inset hairline would double it. */
.band:has(+ :is(.mid-cta, .cta-band)) { border-bottom: 0; }
.band-in { padding-block: 5rem; }
.cols { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.cols > * { flex: 1 1 22rem; min-width: 0; }

@media (max-width: 48rem) {
  .band-in { padding-block: 4rem; }
}

/* Added for Check-up. A section id is a link target under the sticky header (the mockups carry
   scroll-margin-top: 5rem inline on every id'd section; a block page cannot). A tighter heading
   with a lede paragraph under it. A two-column split (copy beside a card), centred. */
.band[id] { scroll-margin-top: 5rem; }
.heading-snug { margin: 1rem 0 1.5rem; }
.lede { max-width: 44rem; margin: 0 0 3rem; }
.split { display: flex; flex-wrap: wrap; gap: 4rem; align-items: center; }
.split-col { flex: 1 1 28rem; min-width: 0; }
.split-copy .body-lg { margin-bottom: 1.5rem; }

/* Spacing classes for a tile or step heading and its text: a block heading and paragraph carry their own default margins, so a
   pattern that needs tighter spacing adds these classes (opt in, nothing is changed by default). */
.title-tile { margin: 1rem 0 0.5rem; }
.title-step { margin: 0 0 0.5rem; }
.text-flush { margin: 0; }