/* Shared geometry. Page modules own their content, not the site container. */
:root{--app-content-width:1320px;--app-content-gutter:40px;--app-screen-height:100vh;--app-section-space:clamp(48px,7vh,88px);--app-section-title-size:clamp(28px,2.5vw,40px);--app-section-heading-gap:clamp(28px,3vw,40px);--app-hero-title-size:clamp(40px,4.5vw,64px);--site-header-height:140px}
@supports(height:100svh){:root{--app-screen-height:100svh;--app-section-space:clamp(48px,7svh,88px)}}
.store-body{--app-content-width:1440px;--app-content-gutter:32px}
.shell{width:100%;max-width:var(--app-content-width);padding-inline:var(--app-content-gutter);margin-inline:auto}
/* Public listings/details end on app-bg, while the footer uses app-surface.
   Keep breathing room inside that background, not as a margin on every footer.
   Full-width content sections already own their padding and meet the footer directly. */
main.public{padding-bottom:clamp(24px,3vw,48px)}
.category-description{margin:16px 0 0;font-size:16px;line-height:1.7;color:var(--app-muted);white-space:pre-line;overflow-wrap:anywhere}
.screen-main,.content-main{width:100%;min-width:0}
.content-page{--app-section-space:clamp(28px,2.8vw,40px);--app-section-heading-gap:28px}
.content-section{padding-block:var(--app-section-space)}
.content-main .hero:not(.hero--first-screen){min-height:0}
.content-main .hero__copy{padding-bottom:0}
.screen-section{min-height:var(--app-screen-height);padding-block:var(--app-section-space);display:grid;align-content:center}
.screen-section--start{align-content:start}
.screen-section>.shell{min-width:0}
.screen-page .site-header{scroll-snap-align:start}
.screen-page .screen-section{scroll-snap-align:start}
.screen-page .site-footer{scroll-snap-align:end}
@media(min-width:992px) and (prefers-reduced-motion:no-preference){
 html.screen-page{scroll-snap-type:y proximity;scroll-behavior:smooth}
 /* Focused forms and native dialogs should keep their requested scroll position. */
 html.screen-page:has(dialog[open],input:focus,textarea:focus,select:focus){scroll-snap-type:none}
}
@media(max-width:991px){.screen-section{min-height:0}}
@media(max-width:900px){.store-body{--app-content-gutter:20px}}
@media(max-width:767px){:root{--app-content-gutter:20px;--app-section-space:44px;--app-hero-title-size:clamp(34px,5vw,40px);--site-header-height:128px}}
@media(max-width:767px){.content-page{--app-section-space:24px;--app-section-heading-gap:24px}}
@media(max-width:600px){.store-body{--app-content-gutter:16px}}