/* Shared page geometry. Component copy keeps its own reading width. */
:root {
  --page-margin-total: 32px;
  --page-container-max: calc(132rem + var(--page-margin-total) * 2);
  --page-content-inset: max(var(--page-margin-total), calc((100% - var(--page-container-max)) / 2));
}

/* Section headings begin with the headline; the small eyebrow labels are removed site-wide. */
.eyebrow {
  display: none !important;
}

.section-wrap,
.value-stories .section-wrap,
.workflow-comparison .section-wrap,
.showcase-shell,
.platform-caption,
.sprawl-steps,
.carousel-controls {
  width: calc(100% - var(--page-margin-total) * 2);
  max-width: calc(132rem + var(--page-margin-total) * 2);
  margin-inline: auto;
}

/* Keep the navigation and scrolling rail backgrounds full bleed. */
.site-nav,
.stories-track {
  padding-inline: var(--page-content-inset);
}

.stories-track {
  scroll-padding-inline: var(--page-content-inset);
}

@media (max-width: 1000px) {
  :root { --page-margin-total: 24px; }
}

@media (max-width: 680px) {
  :root { --page-margin-total: 16px; }

  /* The mobile ribbon remains a horizontal, edge-to-edge scroller. */
  .sprawl-steps {
    width: 100%;
    padding-inline: var(--page-margin-total);
    scroll-padding-inline: var(--page-margin-total);
  }
}