/* Content pages under /use-cases.
   These load legal.css first and this second. legal.css already carries the
   header, footer, h1, h2, paragraph, list, link and card styling, and it is
   already on brand, so this file adds only what a content page needs on top of
   it. Nothing here invents a colour: every value comes from brand.css or from
   the legal-page tokens. */

/* legal.css resets every margin, so h3 would otherwise arrive with no spacing
   and a browser default size. Content pages break a section into questions, so
   they need it. */
main h3 {
  margin: 26px 0 10px;
  color: var(--legal-text);
  font-family: var(--sf-font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

/* The sentence under the h1 that says what the page answers. It replaces the
   .updated line that the legal pages put in the same position. */
.page-lead {
  margin-bottom: 40px;
  color: var(--legal-copy);
  font-size: 19px;
  line-height: 1.6;
}

/* One call to action per page, at the point where the reader has the answer
   and the next step is to use the tool. Glow is the accent and it is already
   spent on the header button, so this is an outline rather than a fill. */
.page-cta {
  margin: 36px 0;
  padding: 22px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--legal-border);
  border-radius: var(--sf-radius-card);
  background: var(--legal-surface);
}

.page-cta p { margin: 0; }

.page-cta .cta-button {
  min-height: 44px;
  padding: 0 20px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid rgba(247, 167, 83, 0.58);
  border-radius: var(--sf-radius-button);
  color: var(--sf-ink);
  background: var(--sf-glow);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.page-cta .cta-button:hover {
  color: var(--sf-ink);
  background: var(--sf-glow-hover);
  transform: translateY(-1px);
}

/* The sibling links at the end of every page. Without these each page is an
   orphan that search engines reach once and never crawl back to. */
.page-related {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--legal-border);
}

.page-related h2 {
  margin-top: 0;
  font-size: 19px;
}

.page-related ul {
  margin: 0;
  list-style: none;
}

.page-related li { margin-bottom: 12px; padding-left: 0; }
.page-related span { display: block; color: var(--legal-muted); font-size: 14px; }

@media (max-width: 600px) {
  .page-lead { margin-bottom: 32px; font-size: 17px; }
  .page-cta { padding: 20px; }
  .page-cta .cta-button { width: 100%; justify-content: center; }
}