/*
 * Marketing content below the application.
 * Every value is a token from brand.css or app.css. No new palette, no new
 * font, no new asset: this block must not move the first paint of the tool
 * above it.
 */
.mkt {
  border-top: 1px solid var(--border);
  margin-top: 48px;
  padding: 56px 0 8px;
}

.mkt-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* The section title is an h2 because the page h1 lives above the tool. It is
   still the visual anchor of this block, so it is styled larger than the h2s
   below it. .mkt .mkt-title outranks .mkt h2 on specificity. */
.mkt .mkt-title {
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}

/* The one Glow accent in this block. A short rule, not a background wash. */
.mkt .mkt-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 18px;
  border-radius: 2px;
  background: var(--sf-glow);
}

.mkt h2 {
  font-family: var(--sf-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 40px 0 12px;
}

.mkt h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 24px 0 8px;
}

.mkt p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 14px;
}

.mkt-lead {
  font-size: 18px;
  color: var(--text);
}

/* Links out to the content pages. Underlined in Glow rather than coloured in
   it, so the accent stays a thin line and the reading colour does not change. */
.mkt a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--sf-glow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.mkt a:hover { color: var(--sf-glow); }

@media (max-width: 760px) {
  .mkt { margin-top: 32px; padding-top: 40px; }
  .mkt .mkt-title { font-size: 27px; }
  .mkt h2 { font-size: 20px; margin-top: 32px; }
  .mkt p { font-size: 15px; }
}