/* Family catalog: bound the actual grid tracks and images, not just the viewport.
   The original colors, layout, orbit animations and splash remain in datagram.css. */
.apps-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.apps-grid > article {
  min-width: 0;
  max-width: 100%;
}
.app-card.shift {
  --accent: #79b9ff;
  --accentGlow: rgba(67, 138, 254, .19);
}
.apps-grid .card-top {
  min-width: 0;
  gap: 12px;
  flex-wrap: wrap;
}
.apps-grid .card-icon {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  max-width: 76px;
}
.apps-grid .card-icon > img,
.apps-grid .card-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.apps-grid .product-state {
  max-width: 100%;
  min-width: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.apps-grid .app-card h3,
.apps-grid .app-card .tagline,
.apps-grid .app-card p,
.apps-grid .product-link {
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.apps-grid .product-link > span {
  min-width: 0;
}
@media (max-width: 980px) {
  .apps-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .topbar .shell { gap: 8px; }
  .brand { min-width: 0; gap: 8px; }
  .family-mark { flex: 0 0 36px; width: 36px; height: 36px; }
  .brand-copy { min-width: 0; }
  .brand-copy strong { font-size: 13px; line-height: 1.2; }
  .lang-switch { flex: none; gap: 2px; }
  .lang-switch button { padding: 6px; }
}
/* Bound the existing decorative halo too; it must not widen the body on mobile. */
.hero::after { max-width: 100%; }
.hero-grid > *, .vision-panel > * { min-width: 0; }