/* Subpage frames share the site's content limit and retain their inner gutters. */
.subpage-layout {
  --layout-limit: var(--site-content-limit);
  --layout-gutter: 24px;
  --layout-inner: calc(var(--layout-limit) - var(--layout-gutter) - var(--layout-gutter));
}

.subpage-layout .page-width {
  width: 100%;
  max-width: var(--layout-limit);
  margin-inline: auto;
}

.subpage-layout .page-width:not(.meet-surface) {
  padding-inline: var(--layout-gutter);
}

/* Remove narrower inner frames on service pages and article detail pages. */
.subpage-layout :is(.solution-hero-copy, .solution-hero-visual, .centered-heading, .showcase-benefits, .feature-copy, .pricing-grid, .both-plans):not(.page-width) {
  width: 100%;
  max-width: none;
}

.subpage-layout .article-body {
  width: 100%;
  max-width: var(--layout-limit);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.subpage-layout :is(.hero-lead, .solution-hero-copy > p, .listing-hero > p, .argument-copy > p, .argument-footnote, .question-section blockquote, .question-caption, .proof-header > p, .platform-note, .industry-note):not(.page-width) {
  max-width: none;
}

.subpage-layout :is(.hero-stage, .showcase-visual, .feature-gallery, .usage-caption) {
  width: calc(100% - var(--layout-gutter) - var(--layout-gutter));
  max-width: var(--layout-inner);
  margin-inline: auto;
}

.subpage-layout .showcase-photo {
  width: 100%;
  margin-inline: 0;
}

/* Slides, controls and horizontal industry examples align with the same content edges. */
.subpage-layout .feature-gallery { scroll-padding-inline: 0; }
.subpage-layout .gallery-track { padding-inline: 0; }
.subpage-layout .feature-card { flex-basis: 100%; }
.subpage-layout .photo-art img { max-width: none; }

.subpage-layout :is(.gallery-controls, .industry-rail) {
  width: 100%;
  max-width: var(--layout-limit);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.subpage-layout .industry-rail { scroll-padding-inline: var(--layout-gutter); }
.subpage-layout .price-card { max-width: none; }

.subpage-layout .meet-surface {
  width: calc(100% - var(--layout-gutter) - var(--layout-gutter));
  max-width: var(--layout-inner);
  margin-inline: auto;
}

@media (max-width: 575.98px) {
  .subpage-layout { --layout-gutter: 20px; }
}