/* ─── layout primitives ─────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--gap-2xl); transition: border-color 200ms var(--ease-out); }
.section + .section { border-top: var(--divider-dashed); }
.section-head { max-width: 44ch; }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap-md); }
.stack-loose { gap: 40px; }
.row { display: flex; align-items: center; gap: var(--gap-md); }
.row-sm { gap: var(--gap-sm); }
.row-lg { gap: var(--gap-lg); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
.wrap { flex-wrap: wrap; }
.text-accent { color: var(--accent); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 920px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { gap: var(--gap-md); }
}
@media (max-width: 720px) {
  .section { padding-block: var(--gap-xl); }
}
@media (max-width: 540px) { .grid-4 { grid-template-columns: 1fr; } }