.modes-page .hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);align-items:center}
.hero-text{max-width:520px;display:flex;flex-direction:column;gap:var(--space-3)}
.hero-image img{width:100%;border:2px solid var(--accent-neon-violet)}

.overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.mode-tile{min-height:160px;display:flex;flex-direction:column;gap:var(--space-2)}

.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);align-items:center}
.split .text{max-width:600px}
.split .image img,.split .image .tile{width:100%}

.alt .split{direction:rtl}
.alt .split > *{direction:ltr}

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

.progress-inner{max-width:700px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-3)}

.cta-inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center}

@media(max-width:1000px){
.overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.split{grid-template-columns:1fr}
.alt .split{direction:ltr}
}

@media(max-width:600px){
.overview-grid{grid-template-columns:1fr}
.rec-grid{grid-template-columns:1fr}
.modes-page .hero-grid,
.hero-grid{grid-template-columns:1fr}
.hero-text{text-align:center;margin-inline:auto;width:100%;max-width:none;min-width:0}
}