/* Standalone editorial pages share the existing app-main shell.
   Load after page styles so the outer layout has one source of truth. */
.app-main.public-page-shell {
    --public-page-max-width: 1680px;
    --public-page-gutter: 24px;
    --public-reading-width: 760px;
    width: calc(100% - var(--public-page-gutter) * 2);
    max-width: var(--public-page-max-width);
    margin-inline: auto;
    padding-inline: 0;
    min-width: 0;
}

.public-page-shell > .panel.guides-page,
.public-page-shell > .panel.legal-document-page {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

.public-page-shell > .panel::before,
.public-page-shell > .panel::after { display: none; }

/* Reading measure is independent of the space available to cards and charts. */
.public-page-shell .panel :is(
    .guides-page-intro,
    .gi-hero-intro,
    .faq-page-intro,
    .guide-article-body > p,
    .guide-article-body > ul,
    .guide-article-body > ol,
    .gi-section-copy > p,
    .gb-section-copy > p,
    .bt-section-copy > p,
    .guide-fees-section-content > p,
    .guide-risk-section-content > p,
    .guide-spacing-section-content > p,
    .guide-local-section-content > p,
    .bot-product-copy > p,
    .faq-answer > p
) { max-width: min(70ch, var(--public-reading-width)); }

@media (max-width: 767px) {
    .app-main.public-page-shell { --public-page-gutter: 16px; }
}