:root {
  --fos-container-default: 1180px;
  --fos-space-1: 4px;
  --fos-space-2: 8px;
  --fos-space-3: 12px;
  --fos-space-4: 16px;
  --fos-space-5: 24px;
  --fos-space-6: 32px;
  --fos-space-7: 48px;
  --fos-space-8: 64px;
  --fos-space-9: 96px;
  --fos-space-10: 128px;
}
.fos-container { width: min(100% - 32px, var(--fos-container-default)); margin-inline: auto; }
.fos-platform { min-height: calc(100vh - 72px); }
.fos-grid { display: grid; gap: var(--fos-space-5); }
.fos-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fos-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fos-stack { display: flex; flex-direction: column; gap: var(--fos-space-5); }
.fos-shell-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: var(--fos-space-7);
  align-items: stretch;
}
@media (max-width: 980px) {
  .fos-shell-grid { grid-template-columns: 1fr; gap: var(--fos-space-5); }
}
@media (max-width: 768px) {
  .fos-container { width: min(100% - 24px, var(--fos-container-default)); }
  .fos-grid--2, .fos-grid--3 { grid-template-columns: 1fr; }
}