.page-foundation .foundation-main { padding: 36px 0 60px; }
.page-foundation .hero-panel { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; padding: 30px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.page-foundation .hero-panel p { max-width: 800px; color: var(--text-muted); margin-bottom: 0; }
.page-foundation .hero-actions, .page-foundation .component-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.page-foundation .foundation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.page-foundation .foundation-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px; min-height: 150px; }
.page-foundation .foundation-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.page-foundation .foundation-card p { color: var(--text-muted); font-size: .92rem; margin-bottom: 0; }
.page-foundation .component-lab { margin-top: 18px; padding: 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); }
.page-foundation .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 18px 0; }
.page-foundation .section-heading h2 { font-size: 1.35rem; margin-bottom: 0; }
@media (max-width: 850px) { .page-foundation .hero-panel { grid-template-columns: 1fr; align-items: start; } .page-foundation .foundation-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .page-foundation .foundation-grid, .page-foundation .form-grid { grid-template-columns: 1fr; } .page-foundation .hero-panel, .page-foundation .component-lab { padding: 20px; } }