.shell {
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
}

.hero {
  padding: var(--space-7) 0 var(--space-6);
}

.section {
  padding: var(--space-5) 0 var(--space-7);
}

.hero-grid,
.card-grid,
.two-col {
  display: grid;
  gap: var(--space-4);
}

.stack > * + * {
  margin-top: var(--space-3);
}

.stack-lg > * + * {
  margin-top: var(--space-4);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

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

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

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