/*
 * Tivra — Section
 * ───────────────
 * Os contentores de página. Duas variantes:
 *
 *   .wrap   → secções de pricing/downloads. Container simples.
 *   .stage  → secções de produto (comando, telemóvel). Grid 2 col
 *             com copy+cards à esquerda e mock que sangra até ao
 *             bordo do viewport.
 *
 * O bento é a grelha 6 colunas dos cards dentro das secções.
 * `.bento.two` é uma variante de 2 colunas iguais.
 *
 * As classes `.span-2/3/4/6` dizem quantas colunas do bento um
 * card ocupa. Em mobile, todas passam a span 6.
 *
 * Tokens consumidos: --container-max, --gutter.
 */

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px 160px;
}

.wrap .h1,
.stage-copy .h1 { margin-bottom: 16px; }

.wrap > .lead,
.stage-copy > .lead { margin-bottom: 40px; }

.stage {
  display: grid;
  grid-template-columns: minmax(280px, 620px) minmax(0, 1fr);
  column-gap: 72px;
  align-items: stretch;
  padding: 0 0 160px max(28px, calc((100vw - 1180px) / 2 + 28px));
  overflow: hidden;
}

.stage-copy { min-width: 0; }

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: 10px;
}

.bento.two { grid-template-columns: 1fr 1fr; }

.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.span-2 { grid-column: span 2; }

@media (max-width: 900px) {
  .span-6, .span-4, .span-3, .span-2 { grid-column: span 6; }
  .stage {
    grid-template-columns: 1fr;
    padding-left: 28px;
    padding-right: 0;
    row-gap: 36px;
    column-gap: 0;
  }
  .bento.two { grid-template-columns: 1fr; }
  .bento.two .span-2 { grid-column: 1 / -1; }
}