/*
  Shared public-page content width system.
  The About page is the visual reference for body content width.
  Header and footer use their own canonical widths in site-shell.css.
*/
:root {
  --pc-page-content-max: 1380px;
  --pc-page-content-side: var(--pc-side, clamp(20px, 4.7vw, 72px));
  --pc-page-content-tablet-max: 720px;
}

.pc-home-page main .pc-container,
.pc-about-page main .pc-container,
.pc-pricing-page main .pc-container {
  width: min(
    calc(100% - (var(--pc-page-content-side) * 2)),
    var(--pc-page-content-max)
  );
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 980px) {
  .pc-home-page main .pc-container,
  .pc-about-page main .pc-container,
  .pc-pricing-page main .pc-container {
    width: min(calc(100% - 32px), var(--pc-page-content-tablet-max));
  }
}