:root {
  --color-ink: #333333;
  --color-ink-muted: #5f5f5f;
  --color-surface: #ffffff;
  --color-border: #dcdcdc;
  --color-accent: #478ac9;
  --color-accent-muted: #a7cd80;
  --section-max-width: 75.5rem;
  --section-padding: 1.5rem;
}

.section-offset-small {
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.section-offset-medium {
  margin-top: 4rem;
  padding-top: 2.5rem;
}

.section-offset-large {
  margin-top: 6rem;
  padding-top: 4rem;
}

.content-frame {
  max-width: var(--section-max-width);
  margin: 0 auto;
  padding-left: var(--section-padding);
  padding-right: var(--section-padding);
}

.flow-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-ink-muted);
}

.surface-card {
  background-color: var(--color-surface);
  border-radius: 0.75rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  padding: 2rem;
}

.utility-grid {
  display: grid;
  gap: 1.5rem;
}

.utility-grid.two-column {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}