/*
 * ProSocial Agency - Outro
 * 08-outro.css
 * Deferred tier. Front page.
 *
 * The quiet section. It sits between the FAQ and the closing call to
 * action, and its job is to sound like a person rather than a page.
 *
 * Deliberately narrow and deliberately sparse. Everything above it is
 * selling. This one is not, which is the only reason it works.
 */

.outro {
  padding-block: var(--section-pad-y);
  background: var(--color-bg-base);
}

/* Sits with the rest of the page. Other sections run to 1376px, so a
   narrow column here reads as a mistake rather than a choice. The type
   is scaled up instead of the column being squeezed down. */
.outro__inner {
  max-width: 1100px;
  margin-inline: auto;
}

.outro__eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* Set in the serif, larger than body copy and lighter than a heading.
   It reads as something written rather than something laid out. */
.outro__body {
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--color-text-primary);
}

/* 02-typography.css sets max-width on p directly, which caps every
   paragraph at 50ch regardless of how wide this column is. A direct
   rule on the element beats anything set on the container, so the
   reset has to target the paragraphs themselves. */
.outro__body p {
  max-width: none;
}

.outro__body p + p { margin-top: var(--space-5); }

.outro__body strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.outro__signature {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .outro__body { font-size: var(--text-lg); line-height: var(--leading-snug); }
}

@media (max-width: 767px) {
  .outro__inner { max-width: 100%; }
  .outro__body  { font-size: var(--text-base); line-height: var(--leading-normal); }
}