.app-shell {
  min-height: 100vh;
}

.page-wrap {
  width: min(100%, var(--page-max-width));
  margin: 0 auto;
  padding: var(--content-pad-y) var(--content-pad-x) var(--space-40);
}

.page-stack {
  display: grid;
  gap: var(--space-24);
}

.page-header {
  display: grid;
  gap: var(--space-8);
  padding-top: var(--space-8);
}

.page-eyebrow {
  color: var(--accent);
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-title {
  margin: 0;
  font-size: clamp(2rem, 2.5vw, 2.5rem);
  line-height: var(--lh-tight);
  font-weight: var(--fw-700);
  letter-spacing: -0.02em;
}

.page-subtitle {
  max-width: 80ch;
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
}

.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  color: var(--text-muted);
  font-size: var(--fs-12);
}

.section-stack {
  display: grid;
  gap: var(--space-20);
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-16);
}

.section-title {
  margin: 0;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: var(--fw-700);
  letter-spacing: -0.02em;
}

.section-subtitle {
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
}

.grid {
  display: grid;
  gap: var(--grid-gap);
}

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

.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.stack-8,
.stack-12,
.stack-16,
.stack-20 {
  display: grid;
  align-content: start;
}

.stack-8 { gap: var(--space-8); }
.stack-12 { gap: var(--space-12); }
.stack-16 { gap: var(--space-16); }
.stack-20 { gap: var(--space-20); }

.split {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
}

.split-start {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
}

.hidden {
  display: none !important;
}

.m-0 { margin: 0; }
.muted { color: var(--text-muted); }
.soft { color: var(--text-soft); }
.right { text-align: right; }
.center { text-align: center; }
.mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

@media (max-width: 1100px) {
  .span-8,
  .span-7,
  .span-6,
  .span-5,
  .span-4,
  .span-3 {
    grid-column: span 12;
  }
}

@media (max-width: 768px) {
  :root {
    --content-pad-x: 16px;
    --content-pad-y: 16px;
    --grid-gap: 16px;
    --card-pad: 16px;
  }

  .page-subtitle {
    font-size: var(--fs-14);
  }

  .section-header,
  .split,
  .split-start {
    flex-direction: column;
    align-items: stretch;
  }
}