/* Shared page headings, reading width, cards, bands and document rhythm. */

.site-page:not(#home) {
  padding-block: 54px 64px;
}

.page-heading {
  max-width: 940px;
  margin-bottom: 32px;
}

.page-heading h1 {
  max-width: 850px;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.page-heading > p:not(.eyebrow) {
  max-width: 760px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 18px;
}

.page-heading .actions {
  margin-top: 24px;
}

.page-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 28px;
  padding-block: 14px;
  border-block: 1px solid var(--line);
  font-size: 14px;
}

.page-index a {
  padding-block: 8px;
}

.content-card h2,
.page-band h2,
.page-block h2,
.solution-row h2,
.setup-guide h2,
.release-entry h2,
.contact-panel h2 {
  font-size: clamp(24px, 2.3vw, 30px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.content-card p:not(.eyebrow),
.content-card ul,
.page-block p:not(.eyebrow),
.page-block ul,
.solution-row p:not(.eyebrow),
.release-entry p:not(.eyebrow),
.guide-content > p,
.setup-steps p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
}

.content-card ul,
.page-block ul {
  padding-left: 20px;
}

.content-card li + li,
.page-block li + li {
  margin-top: 8px;
}

.content-card > a,
.solution-row a {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
}

.content-note {
  margin-top: 20px;
  color: var(--muted);
  font-size: 14px;
}

/* These notes sit inside cards/guides; override their broader paragraph rule intentionally. */
.content-card p.content-note,
.guide-content > p.content-note {
  margin-top: 20px;
  font-size: 14px;
}

.page-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
  padding: 32px;
  border-radius: 14px;
  background: var(--cool);
}

.page-band p {
  max-width: 760px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 16px;
}

.page-block {
  margin-top: 36px;
}

/* Long setup and offer paragraphs must not stretch across the whole desktop canvas. */
.page-block > p,
.page-block > ul,
.guide-content > p,
.setup-steps p {
  max-width: 72ch;
}

.page-block > a:not(.button) {
  display: inline-block;
  margin-top: 16px;
  padding-block: 8px;
  font-size: 14px;
  font-weight: 600;
}

.page-block > .button {
  margin-top: 20px;
}

.section-followup {
  margin-top: 24px;
  font-size: 15px;
}

.section-followup a {
  display: inline-block;
  padding-block: 8px;
  font-weight: 600;
}

.notice {
  padding: 18px 22px;
  border-left: 3px solid var(--indigo);
  border-radius: 0 8px 8px 0;
  background: var(--tint);
  font-size: 15px;
}

.definition-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.definition-list > div {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.definition-list dt {
  font-size: 16px;
  font-weight: 600;
}

.definition-list dd {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.site-page [id] {
  scroll-margin-top: 24px;
}

@media (max-width: 850px) {
  .definition-list,
  .page-band {
    grid-template-columns: 1fr;
  }

  .page-band .button {
    justify-self: start;
  }
}

@media (max-width: 480px) {
  .site-page:not(#home) {
    padding-block: 32px 44px;
  }

  .page-heading > p:not(.eyebrow) {
    font-size: 16px;
  }

  .page-band {
    padding: 24px 20px;
  }

  .page-index a,
  .section-followup a {
    min-height: 44px;
  }
}