:root {
    --site-section-gap: clamp(34px, 4.2vw, 72px);
    --site-section-gap-mobile: 34px;
}

/* Full-bleed sections and internal horizontal scrollers must never widen the page itself. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

/* Give every major public content block a clear visual beginning and end. */
main > section:not(.hero):not(.portal-hero-media):not(.legal-hero):not(.portal-trust-strip),
main > .layout,
main > .legal-content {
    margin-block: var(--site-section-gap);
}

/* Shared design-tail sections can also live directly outside main. */
body > :is(.decision-principle, .decision-worlds, .tools-showcase, .comparison-stage, .proof-process, .about-trust, .updates-hub, .benefit-faq, .evidence-news) {
    margin-block: var(--site-section-gap);
}

/* Keep connected modules together while retaining a calmer transition. */
.decision-principle + .decision-worlds,
.tools-showcase + .comparison-stage {
    margin-top: clamp(18px, 2vw, 30px);
}

.portal-trust-strip + :is(.decision-principle, .home-section, .legal-content),
.hero + :is(.portal-trust-strip, .proof-metrics) {
    margin-top: 0;
}

/* A little extra room before the final conversion area and footer. */
:is(.benefit-faq, .evidence-news, .updates-hub) + .premium-footer,
main + :is(.tools-showcase, .proof-process, .premium-footer) {
    margin-top: clamp(42px, 5vw, 82px);
}

@media (max-width: 700px) {
    main > section:not(.hero):not(.portal-hero-media):not(.legal-hero):not(.portal-trust-strip),
    main > .layout,
    main > .legal-content,
    body > :is(.decision-principle, .decision-worlds, .tools-showcase, .comparison-stage, .proof-process, .about-trust, .updates-hub, .benefit-faq, .evidence-news) {
        margin-block: var(--site-section-gap-mobile);
    }

    .decision-principle + .decision-worlds,
    .tools-showcase + .comparison-stage {
        margin-top: 14px;
    }
}