/* =========================================================
   LAYOUT.CSS — DENSITY / RHYTHM REFINEMENT
   ========================================================= */

.container {
  width: min(100% - 2.25rem, var(--container-max));
  /*margin-inline: auto;*/
  margin-inline-start: 30px;
  margin-inline-end: 30px;
  width: auto;
}

.section {
  padding: 5.75rem 0;
}

.section--light {
  background: var(--color-mist);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.25rem;
}

.hero {
  padding: 6.4rem 0 5.4rem;
}

.card-grid {
  gap: 1.4rem;
}

.flow-block {
  padding: 2.2rem;
}

.cta-form {
  gap: 2rem;
}

.site-footer {
  padding: 3.75rem 0;
}

@media (max-width: 900px) {
  .section {
    padding: 4.8rem 0;
  }

  .grid-2 {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .hero {
    padding: 5.2rem 0 4.2rem;
  }
}

@media (max-width: 760px) {
  .container {
    margin-inline: auto;
    width: min(100% - 1.4rem, var(--container-max));
  }

  .section {
    padding: 4rem 0;
  }

  .hero {
    padding: 4.25rem 0 3.5rem;
  }

  .flow-block {
    padding: 1.4rem;
  }

  .cta-form {
    gap: 1.35rem;
  }
}