/* ============================================================
   Layout — Mobile First Grid
   ============================================================ */

.page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 64px);
}

/* Em mobile, o form-side estica pra preencher o espaço sobrando
   abaixo do hero — evita "gap" entre o conteúdo e o footer. */
.page > .form-side { flex: 1; }

/* Tablet (≥720px) — mantém empilhado, só ajusta paddings */
@media (min-width: 720px) {
  /* gerenciado nos módulos individuais */
}

/* Desktop (≥1024px) — split 50/50 */
@media (min-width: 1024px) {
  .page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 64px);
  }
}