/* Page container, section rhythm and the grids shared across pages.

   One container width and one gutter, both tokens, so every page lines up down
   the same edges. Grids are declared at the widest layout and reduced at the
   breakpoints below; none of them is allowed to leave a column narrower than
   its content, which is what produces a sideways scrollbar on a phone. */

.wrap {
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.wrap--center { text-align: center }

section {
  padding: var(--space-section) 0;
  position: relative;
}

/* Section rhythm modifiers, replacing the mockup's per-section inline padding. */
.section--flush-top { padding-top: 0 }
.section--tight-top { padding-top: var(--space-5) }
.section--lead-top { padding-top: var(--space-8) }
.section--tight-bottom { padding-bottom: calc(var(--space-section) / 2) }

/* Copy beside a visual */
.split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-16);
  align-items: center;
}

.split.flip { grid-template-columns: 1.1fr 1fr }
.split.flip .copy { order: 2 }

/* Page hero: copy beside a visual, equal weight */
.ph-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

/* Stat band under the home hero */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: calc(var(--space-10) * -1);
}

/* Department tiles */
.depts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-12);
}

/* Six-up section links on the home page */
.explore {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-12);
}

/* Three-up figure callouts */
.big3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.big3--stack { grid-template-columns: 1fr }
.big3--flush { margin: 0 }

.plan,
.radar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.plan { margin-top: var(--space-12) }
.radar { margin-top: var(--space-10) }

.trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.locks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-12);
}

/* ---- Laptop: the densest grids lose a column before anything else ---- */

@media (max-width: 1024px) {
  .depts { grid-template-columns: repeat(3, minmax(0, 1fr)) }

  .split,
  .split.flip { gap: var(--space-10) }
}

/* ---- Tablet: side-by-side layouts stack ---- */

@media (max-width: 960px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }

  .split,
  .split.flip {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .split.flip .copy { order: 0 }

  .ph-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .explore,
  .locks { grid-template-columns: repeat(2, minmax(0, 1fr)) }

  /* Three-up callouts carry a large figure each, so two columns would leave an
     orphan on the second row; they go straight to one. */
  .big3,
  .plan,
  .radar,
  .trust { grid-template-columns: 1fr }
}

@media (max-width: 760px) {
  .depts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ---- Phone ---- */

@media (max-width: 620px) {
  .explore,
  .locks { grid-template-columns: 1fr }

  .stats { margin-top: calc(var(--space-6) * -1) }
}