.demos-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-8) var(--space-12);
}

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

.demos-h1 { margin: 0 0 var(--space-2); }

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

.demos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-8) var(--space-6);
  margin-bottom: var(--space-12);
}

/* A bordered card with the image as its top edge, so the eye can move from
   one demo to the next. Every text block reserves its full line count, so
   the cards are all one height whatever their titles and descriptions. */
.demo-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.demo-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--rule)); }

.demo-card-img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 6%, var(--bg));
}

.demo-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.demo-card-title {
  margin-top: var(--space-2);
  padding: 0 var(--space-4);
  font-weight: var(--weight-medium);
  color: var(--ink);
  line-height: 1.35;
  /* Two lines reserved and two shown; the full title is in the tooltip. */
  min-height: calc(2em * 1.35);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.demo-card:hover .demo-card-title { color: var(--accent); }

.demo-card-desc {
  padding: 0 var(--space-4);
  min-height: calc(3em * 1.5);
  font-size: var(--text-sm);
  color: var(--ink-dim);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

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

/* Same button as /feed and /learn. */
.button-new {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  /* Brand blue — same var(--accent) as the home-page install CTA + is-primary,
     so every primary action matches. Blue in both themes, white --accent-ink. */
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.6875rem 1.25rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.button-new:hover { background: var(--accent-deep); }
.button-new-plus { display: inline-block; }
/* Optical centering — Inter's hhea ascent is larger than its descent;
   the label sits above the line-box midpoint while the SVG plus is
   geometrically centered. Nudge the label down 1px so they share the
   same horizontal mid-line. Same fix as on /feed. */
.button-new > span { margin-top: 1px; }

/* The build line: what a run from the prompt took. Spec data, so it sits a
   step below the description in size and weight and never competes with
   the title. The sentence form ("Built in 14 min for $6.64") is what keeps
   the numbers from reading as a video length or a price. */
.demo-card-build {
  display: block;
  min-height: 1.5em;
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  /* One line always, so a long model name cannot make one card taller. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}