/* Same width and gutters as /feed and the home page, so moving between
   them in the nav does not jump. */
.demos-shell {
  max-width: var(--container-marketing);
  margin: 0 auto;
  padding: 0 var(--space-8) var(--space-12);
}

@media (max-width: 700px) { .demos-shell { padding: 0 var(--space-5) var(--space-10); } }
@media (max-width: 640px) { .demos-shell { padding: 0 var(--space-4) var(--space-10); } }

/* The canonical page title, the same scale as /install, /learn, /feed and
   /pricing (see .page-hero-title in app/shared/styles/site.css). */
.demos-h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--page-title);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin: 2rem 0 var(--space-4);
}

@media (max-width: 640px) {
  .demos-h1 { font-size: 2.5rem; }
}

.demos-lede {
  margin: 0 0 var(--space-8);
  color: var(--ink-soft);
  max-width: 40rem;
}

.demos-grid {
  display: grid;
  /* The minimum never exceeds the column, so a narrow screen, or a zoomed
     one, gets one full-width card instead of one that runs off the right. */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--space-8) var(--space-6);
  margin-bottom: var(--space-12);
}

.demos-empty { color: var(--ink-dim); margin-bottom: var(--space-12); }

.demos-hero { display: flex; align-items: center; justify-content: space-between; }

/* + Demo is the standard primary button with a plus before its label. */
.button-new {
  gap: 0.375rem;
  /* The plus is a thin, open glyph, so even padding reads as more space
     on its side; 3px less there balances it to the eye. */
  padding-inline-start: calc(20px - 3px);
}
.button-new-plus { flex: 0 0 auto; }