/* Shared text alignment for the LP sections; embedded website previews stay independent. */
:root{--page-frame:1240px;--page-gutter:40px;--section-heading-gap:16px}
.sec:where(:not(#price)) .frame,.final .frame,.footer .frame{max-width:var(--page-frame);padding-inline:var(--page-gutter)}
.shop-hero{padding-inline:max(var(--page-gutter),calc((100% - var(--page-frame))/2 + var(--page-gutter)))}
.nav,.nav.scrolled{padding-inline:max(var(--page-gutter),calc((100% - var(--page-frame))/2 + var(--page-gutter)))}
:is(#wordpress,#problem,#works,#how,#qa,#final) .section-heading-group{min-width:0;text-align:left}
:is(#wordpress,#problem,#works,#how,#qa,#final) .section-heading-group>:is(.section-num,.label){display:flex;align-items:center;justify-content:flex-start;width:fit-content;margin:0;font-size:14px;line-height:1.8;letter-spacing:.13em}
:is(#wordpress,#problem,#works,#how,#qa,#final) .section-heading-group>:is(h2,h3){margin-top:var(--section-heading-gap);margin-bottom:0;text-align:left}
:is(#wordpress,#problem,#works,#how,#qa,#final) .section-heading-group>:is(h2,h3)+p{margin-top:20px;text-align:left}
#start .start-heading{display:block;margin-bottom:44px}
#start .start-heading .h-sec br{display:inline}
/* Within the capability panel, align its heading with the three scene selectors. */
#architecture .php-free-heading{padding-inline:32px}
@media(max-width:980px){:root{--page-gutter:28px}}
@media(max-width:760px){
 :root{--page-gutter:24px}
 #problem{--problem-mobile-gutter:var(--page-gutter)}
 #problem .problem-layout{padding-inline:0}
 #start .start-heading{margin-bottom:30px}
 #architecture .php-free-heading{padding-inline:16px}
}
@media(max-width:620px){#architecture .php-free-heading{padding-inline:10px}}
@media(max-width:359px){#architecture .php-free-heading{padding-inline:8px}}