/* ============================================================
   minimal_ui — base / reset / typography
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--mui-font);
  font-size: var(--mui-fs-14);
  line-height: var(--mui-lh);
  color: var(--mui-ink);
  background: var(--mui-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Optional container the demo uses; not required by components. */
.mui {
  color: var(--mui-ink);
  font-family: var(--mui-font);
}

h1, h2, h3, h4, p, figure { margin: 0; }

img, svg { display: block; max-width: 100%; }

button { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

/* --- Type helpers --- */

.mui-h1 { font-size: var(--mui-fs-24); font-weight: 600; line-height: var(--mui-lh-tight); }
.mui-h2 { font-size: var(--mui-fs-20); font-weight: 600; line-height: var(--mui-lh-tight); }
.mui-title { font-size: var(--mui-fs-16); font-weight: 600; }

.mui-eyebrow {
  font-size: var(--mui-fs-11);
  font-weight: 600;
  letter-spacing: var(--mui-track-label);
  text-transform: uppercase;
  color: var(--mui-muted);
}

.mui-muted { color: var(--mui-muted); }
.mui-faint { color: var(--mui-faint); }
.mui-small { font-size: var(--mui-fs-13); }
.mui-caption { font-size: var(--mui-fs-12); color: var(--mui-muted); }

.mui-num { font-variant-numeric: tabular-nums; }

/* --- Layout helpers --- */

/* centered page container; cap width with --mui-container-max (default 1024px) */
.mui-container {
  width: 100%;
  max-width: var(--mui-container-max, 1024px);
  margin-inline: auto;
  padding-inline: var(--mui-sp-5);
}
/* stick to the top of the scroll container */
.mui-sticky { position: sticky; top: 0; z-index: 10; }

.mui-stack   { display: flex; flex-direction: column; }
.mui-stack-2 { display: flex; flex-direction: column; gap: var(--mui-sp-2); }
.mui-stack-3 { display: flex; flex-direction: column; gap: var(--mui-sp-3); }
.mui-stack-4 { display: flex; flex-direction: column; gap: var(--mui-sp-4); }
.mui-stack-6 { display: flex; flex-direction: column; gap: var(--mui-sp-6); }

.mui-row     { display: flex; align-items: center; gap: var(--mui-sp-3); }
.mui-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--mui-sp-3); }

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

@media (max-width: 720px) {
  .mui-grid-2, .mui-grid-3 { grid-template-columns: 1fr; }
}