/* ═══════════════════════════════════════════════════════════
   PAGE GRID — shared wrapper for new pages (cost-calculator,
   credibility-scorecard, testimonial pages)
   ═══════════════════════════════════════════════════════════ */

.page-section {
  padding: clamp(48px, 6vw, 96px) 0;
  position: relative;
  overflow: clip;
}

.page-inner {
  width: min(var(--grid-max, 2000px), 100% - clamp(32px, 4vw, 96px) * 2);
  margin-inline: auto;
}

.page-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 1.5vw, 28px);
}

/* span helpers */
.span-12 { grid-column: span 12; }
.span-10 { grid-column: span 10; }
.span-8  { grid-column: span 8; }
.span-6  { grid-column: span 6; }
.span-4  { grid-column: span 4; }

/* narrow content column (for prose) */
.page-inner--narrow {
  width: min(900px, 100% - clamp(32px, 4vw, 96px) * 2);
  margin-inline: auto;
}

/* medium content column (for calculators + forms) */
.page-inner--medium {
  width: min(1100px, 100% - clamp(32px, 4vw, 96px) * 2);
  margin-inline: auto;
}

@media (max-width: 900px) {
  .page-grid-12 { grid-template-columns: 1fr; }
  .span-12, .span-10, .span-8, .span-6, .span-4 { grid-column: span 1; }
}