.design-page .hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--space-4);
  align-items:center;
}
.hero-text{max-width:60ch;display:flex;flex-direction:column;gap:var(--space-2)}
.hero-image img{border-radius:var(--radius-lg);width:100%;height:auto}

.principles-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-3);
  margin-top:var(--space-4);
}
.principle-card{min-width:0;text-align:center}

.visual-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
  align-items:center;
}
.visual-text{max-width:65ch}
.visual-image img{width:100%;border-radius:var(--radius-lg)}

.narrow-text{max-width:720px;margin-inline:auto}
.highlight-panel{margin-top:var(--space-3)}

.ux-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-3);
  margin-top:var(--space-4);
}
.ux-card{text-align:center}

.modes-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
}
.mode-col{max-width:65ch}

.accessibility-section .narrow-text{max-width:700px}

.disclaimer-panel{text-align:center;max-width:800px;margin-inline:auto}

.cta-container{
  max-width:600px;
  margin-inline:auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}

@media (max-width:1100px){
  .design-page .hero-grid{grid-template-columns:1fr}
}

@media (max-width:900px){
  .principles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ux-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .visual-grid{grid-template-columns:1fr}
  .modes-grid{grid-template-columns:1fr}
}

@media (max-width:600px){
  .principles-grid,.ux-grid{grid-template-columns:1fr}
}