/* LimbBot — utilities (layout + spacing helpers) */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--space-20); }
.section--tight { padding-block: var(--space-12); }
.section--sand { background: var(--color-surface-warm); }
.section--ink { background: var(--color-ink); color: #fff; }
.section--blue { background: var(--color-primary); color: #fff; }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink p,
.section--blue h1, .section--blue h2, .section--blue h3, .section--blue p { color: #fff; }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; gap: var(--space-4); }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.measure { max-width: 60ch; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding-block: var(--space-12); }
}

/* Width + spacing helpers (replace former inline styles) */
.mt-8 { margin-top: var(--space-8); }
.measure-720 { max-width: 720px; }
.measure-820 { max-width: 820px; }
.measure-narrow { max-width: 52ch; margin-inline: auto; }