.ocf-roofing-content { background: var(--ocf-bg-alt); }
.ocf-roofing-content--guide { background: var(--ocf-bg); }
.ocf-roofing-content__body { width: 100%; max-width: 1020px; color: var(--ocf-body); text-align: left; }
.ocf-roofing-content__body > * + * { margin-top: 1rem; }
.ocf-roofing-content__body h2 { margin: 3rem 0 1rem; color: var(--ocf-heading); font-family: var(--ocf-font-heading), system-ui, sans-serif; font-size: var(--font-h2-size); line-height: 1.14; }
.ocf-roofing-content--intro .ocf-roofing-content__body h2:first-child, .ocf-roofing-content__body h2:first-child { margin-top: 0; }
.ocf-roofing-content__body h3 { margin: 1.75rem 0 0.5rem; color: var(--ocf-heading); font-family: var(--ocf-font-heading), system-ui, sans-serif; font-size: var(--font-h3-size); }
.ocf-roofing-content__body p, .ocf-roofing-content__body li { line-height: 1.7; }
.ocf-roofing-content__body ul, .ocf-roofing-content__body ol { padding-left: 1.25rem; }
.ocf-roofing-content__body li + li { margin-top: 0.45rem; }
.ocf-roofing-content__body strong { color: var(--ocf-heading); }
@media (max-width: 640px) { .ocf-roofing-content__body h2 { margin-top: 2.4rem; } }