/* Our values: six items, three across and two down, each behind an accent rule.
   Scoped per CLAUDE.md. Square corners, per --radius: 0.

   Deliberately not .grid-3 from components.css. That gives bordered cards on a
   surface fill, and this slide is rules on the page background, which is a
   different shape entirely. */

[data-slide="values"] .values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.6vh, 2rem) clamp(1.4rem, 3vw, 2.6rem);
}

/* The rule is the only chrome. Padding, not margin, so the text sits off it by a
   fixed amount however the column resizes. */
[data-slide="values"] .value {
  border-left: 2px solid var(--accent);
  padding-left: clamp(0.7rem, 1.2vw, 1rem);
}

[data-slide="values"] .value h3 {
  margin: 0 0 0.3rem;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem); font-weight: 600; color: var(--fg);
}
/* max-width off the shared 46ch measure: the column is already the measure here,
   and capping it again wraps the text well short of the rule beside it. */
[data-slide="values"] .value p {
  margin: 0; max-width: none;
  font-size: clamp(0.82rem, 1.1vw, 0.95rem); line-height: 1.5; color: var(--fg-muted);
}


@media (max-width: 900px) {
  [data-slide="values"] .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  [data-slide="values"] .values-grid { grid-template-columns: 1fr; }
}