/**
 * Single centered mobile-first column for all Beller-facing pages.
 *
 * - Primary column: max-width 1100px, centered (never full-bleed on desktop).
 * - Full-bleed background on .beller-page-shell only.
 */

.beller-page-shell {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #f5f3ff;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: #4c1d95; /* violet-950 */
}

@media (min-width: 768px) {
  .beller-page-shell {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/**
 * Centered content wrapper: width 100%, max-width ~1100px, margin auto,
 * responsive horizontal padding (no edge-to-edge text on large screens).
 */
.beller-content-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .beller-content-container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (min-width: 768px) {
  .beller-content-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .beller-content-container {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

/** Optional alternate background (e.g. job timeline page). */
.beller-page-shell.beller-page-shell--job-timeline {
  background-color: #f3effa;
}