.container{max-width:1120px; margin:0 auto; padding:24px}
@media (min-width:900px){.container{padding:28px}}
.container.narrow{max-width:860px}

.section{padding:72px 0}
@media (max-width:640px){.section{padding:56px 0}}

.row{display:flex; gap:16px; align-items:stretch; flex-wrap:wrap}
.col{flex:1 1 320px}

.hero{padding:34px 0 18px;}
.heroGrid{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
@media (max-width:900px){.heroGrid{grid-template-columns:1fr}}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:700px){.grid2{grid-template-columns:1fr}}

.split{display:grid; grid-template-columns: 1.4fr .8fr; gap:16px}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.appShell{max-width:1120px; margin:0 auto; padding:16px}
.appTop{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap}