.ml-container,
.ml-container-narrow,
.content-shell {
  width: min(100% - (var(--ml-container-padding) * 2), var(--ml-container));
  margin-inline: auto;
}

.ml-container-narrow,
.content-shell {
  max-width: var(--ml-container-narrow);
}

.section-shell,
.ml-section {
  padding-block: clamp(var(--space-xl), 6vw, var(--space-3xl));
}

.ml-stack,
.stack-md {
  display: flex;
  flex-direction: column;
  gap: var(--ml-stack-gap, var(--space-lg));
}

.stack-sm,
.stack-lg {
  display: flex;
  flex-direction: column;
}

.stack-sm {
  gap: var(--space-sm);
}

.stack-lg {
  gap: var(--space-xl);
}

.ml-grid,
.ml-grid-2,
.ml-grid-auto,
.grid-2,
.grid-3,
.grid-auto {
  display: grid;
  gap: var(--ml-grid-gap, var(--space-lg));
  min-width: 0;
}

.ml-grid,
.grid-auto {
  grid-template-columns: 1fr;
}

.ml-grid-2,
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ml-grid-auto,
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.tool-shell--compact {
  --tool-shell-max: var(--container-compact);
}

.tool-shell--default {
  --tool-shell-max: var(--container-default);
}

.tool-shell--wide {
  --tool-shell-max: var(--container-wide);
}

.heading-xl,
.heading-lg,
.heading-md {
  color: var(--ml-text);
  font-weight: var(--weight-extrabold, 800);
  letter-spacing: var(--tracking-tight, -0.03em);
  text-wrap: balance;
}

.heading-xl {
  font-size: var(--text-2xl);
  line-height: var(--line-tight);
}

.heading-lg {
  font-size: var(--text-xl);
  line-height: var(--line-snug);
}

.heading-md {
  font-size: var(--text-lg);
  line-height: var(--line-snug);
}

.text-muted {
  color: var(--ml-text-muted);
}

.text-soft {
  color: var(--ml-text-soft);
}

.text-micro {
  color: var(--ml-text-muted);
  font-size: var(--text-xs);
  line-height: var(--line-normal);
}

@media (max-width: 720px) {
  .section-shell,
  .ml-section {
    padding-block: var(--mobile-section-gap, clamp(var(--space-lg), 10vw, var(--space-2xl)));
  }

  .stack-sm,
  .stack-md,
  .stack-lg,
  .ml-stack {
    gap: var(--mobile-stack-gap, var(--space-md));
  }

  .ml-grid,
  .ml-grid-2,
  .ml-grid-auto,
  .grid-2,
  .grid-3,
  .grid-auto {
    gap: var(--mobile-card-gap, var(--space-md));
  }

  .ml-grid-2,
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}