/* Fluid content gutters follow the TWOFAMUS reference as the window resizes. */
.container{width:86%;max-width:1600px;margin-inline:auto}
.hero.container{width:86%;max-width:1600px;padding-inline:0}
.hero-copy{width:100%;max-width:none}
.hero h1{font-size:clamp(42px,6.1vw,108px)}
.platform-grid{width:86%;max-width:1600px}
.section{padding-block:clamp(60px,7vw,115px)}
.section-heading h2{font-size:clamp(32px,4.5vw,72px)}
.feature-grid,.trust-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,32px)}
.screenshot-grid{width:100%;max-width:none;gap:clamp(18px,2vw,32px);padding:clamp(20px,2.5vw,40px)}
.ai-panel,.clinic-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,95px)}
.faq-section{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,95px)}
.feature,.resource-card,.clinic-overview,.ai-explanation{min-width:0;padding:clamp(24px,2.5vw,40px)}
.section-heading>p,.lead,.section-intro{max-width:680px;margin-inline:auto}
.navigation.container{width:100%;max-width:none}
@media(max-width:1000px){.container,.hero.container,.platform-grid{width:90%}}
@media(max-width:780px){.container,.hero.container,.platform-grid{width:88%}.hero h1{font-size:clamp(36px,8vw,60px)}.feature-grid,.trust-grid,.ai-panel,.clinic-layout,.faq-section{grid-template-columns:1fr}.section-heading h2{font-size:clamp(30px,5.5vw,42px)}.screenshot-grid{width:100%;max-width:none}.navigation.container{width:100%}}