/*
 * LAYOUT — page-level structure only: the container, section rhythm, the
 * section head, generic grids. Anything with a visual identity (nav, cards,
 * buttons, footer) belongs in components.css.
 *
 * Breakpoints, written literally because custom properties do not work
 * inside @media: 620px, 720px, 760px, 960px. These are MON-2's own
 * breakpoints — do not invent new ones.
 */

.ms-container {
  width: 100%;
  max-width: var(--ms-maxw);
  margin: 0 auto;
  padding: 0 var(--ms-pad);
}

.ms-container--narrow {
  max-width: var(--ms-maxw-legal);
}

/* ---------- Section rhythm ---------------------------------------------- */

.ms-section {
  padding: var(--ms-section-pt) 0 var(--ms-section-pb);
}

/* Section that divides itself from the one above with a hairline. The rule
   does the separating, so the top padding tightens. */
.ms-section--ruled {
  border-top: 1px solid var(--ms-line-soft);
  padding-top: var(--ms-section-pt-tight);
}

/* A section on the raised surface, used to alternate bands down a long page. */
.ms-section--band {
  background: var(--ms-surface-sunken);
}

.ms-section--tight {
  padding-bottom: var(--ms-section-pt-tight);
}

/* Anchored sections must clear the sticky nav when jumped to. */
.ms-section[id] {
  scroll-margin-top: var(--ms-scroll-offset);
}

@media (max-width: 620px) {
  .ms-section {
    padding: var(--ms-space-11xl) 0;
  }
}

/* ---------- Section head ------------------------------------------------ */

.ms-head {
  max-width: var(--ms-maxw-head);
  margin-bottom: var(--ms-space-10xl);
}

/* Centred variant — used where the block below it is symmetrical (card rows,
   the pricing table). Left-aligned everywhere the content below is prose. */
.ms-head--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.ms-head--center .ms-tag {
  justify-content: center;
}

.ms-head__title {
  margin-bottom: var(--ms-space-xl);
}

.ms-head__intro {
  color: var(--ms-text-muted);
  font-size: var(--ms-text-lead);
  line-height: var(--ms-leading-lead);
}

/* ---------- Prose ------------------------------------------------------- *
 * Every prose block gets a measure cap. Do not ship unbounded paragraph
 * width — it is the fastest way to stop looking like the design system.
 */

.ms-prose {
  max-width: var(--ms-measure-prose);
}

.ms-prose > * + * {
  margin-top: var(--ms-space-xl);
}

.ms-prose p {
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-lg);
  line-height: var(--ms-leading-body);
}

/* The closing line of an argument block — steps up to primary text. */
.ms-prose__close {
  color: var(--ms-text);
  font-weight: var(--ms-weight-bold);
}

.ms-prose__close,
.ms-prose p.ms-prose__close {
  color: var(--ms-text);
}

/* ---------- Grids ------------------------------------------------------- *
 * Mobile-first: one column until there is room for more.
 */

.ms-grid {
  display: grid;
  gap: var(--ms-space-2xl);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .ms-grid--2,
  .ms-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .ms-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Two-column prose/detail split — the module capability lists and the
   AI-interface argument pairs. */
.ms-grid--split {
  gap: var(--ms-space-3xl) var(--ms-space-9xl);
}

@media (min-width: 760px) {
  .ms-grid--split {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Form + sidebar: form first on mobile, form left on desktop. */
.ms-grid--sidebar {
  gap: var(--ms-space-3xl);
}

@media (min-width: 960px) {
  .ms-grid--sidebar {
    grid-template-columns: 1.35fr 1fr;
    align-items: start;
  }
}

/* ---------- Stacks and clusters ----------------------------------------- */

.ms-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-xl);
}

.ms-stack--tight {
  gap: var(--ms-space-md);
}

.ms-stack--loose {
  gap: var(--ms-space-4xl);
}

/* Horizontal group that wraps rather than overflowing. */
.ms-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-lg);
}

.ms-cluster--center {
  justify-content: center;
}