.roof-faq { padding: 80px 24px 88px; background: #f7f8fb; color: #08164c; scroll-margin-top: 88px; }
.roof-faq__inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: .75fr 1.25fr; gap: 88px; align-items: start; }
.roof-faq__eyebrow { display: block; color: #3c60df; font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.roof-faq h2 { margin: 0 0 20px; font-size: clamp(34px,4vw,48px); line-height: 1.12; letter-spacing: -1.5px; font-weight: 600; }
.roof-faq__header > p { max-width: 30ch; font-size: 16px; line-height: 1.7; color: #60687a; margin: 0 0 24px; }
.roof-faq a { color: #3458d9; font-size: 14px; font-weight: 600; text-decoration: none; }
.roof-faq a:hover { text-decoration: underline; }
.roof-faq__all { display: inline-flex; min-height: 44px; align-items: center; gap: 24px; }
.roof-faq__all span { font-size: 24px; }
.roof-faq__help { margin-top: 48px; padding-top: 22px; border-top: 1px solid #dce2ed; }
.roof-faq__help > span { display: block; font-size: 13px; color: #60687a; }
.roof-faq__help a { display: inline-flex; gap: 18px; align-items: center; min-height: 44px; }
.roof-faq__item { border: 1px solid transparent; border-bottom-color: #dce2ed; }
.roof-faq__item:first-child { border-top: 1px solid #dce2ed; }
.roof-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 23px 20px; list-style: none; cursor: pointer; font-size: 18px; line-height: 1.45; font-weight: 600; letter-spacing: -.25px; }
.roof-faq__item summary::-webkit-details-marker { display: none; }
.roof-faq__item[open] { background: #fff; border-color: #dce2ed; }
.roof-faq__item summary:hover { color: #3458d9; }
.roof-faq__icon { width: 26px; height: 26px; flex: 0 0 26px; position: relative; color: #3458d9; }
.roof-faq__icon::before,.roof-faq__icon::after { content: ''; position: absolute; background: currentColor; left: 6px; top: 12px; height: 2px; width: 14px; }
.roof-faq__icon::after { transform: rotate(90deg); transition: transform 180ms ease; }
.roof-faq__item[open] .roof-faq__icon::after { transform: rotate(0); }
.roof-faq__answer { padding: 0 66px 24px 20px; }
.roof-faq__answer p { margin: 0; font-size: 15px; line-height: 1.8; color: #51586b; max-width: 58ch; }
.roof-faq summary:focus-visible,.roof-faq a:focus-visible { outline: 3px solid #3458d9; outline-offset: 3px; }
@media (max-width: 850px) { .roof-faq__inner { gap: 36px; grid-template-columns: .8fr 1.2fr; } }
@media (max-width: 650px) {
 .roof-faq { padding: 46px 20px 50px; }
 .roof-faq__inner { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .roof-faq h2 { font-size: 36px; margin-bottom: 16px; }
 .roof-faq__header > p { max-width: 35ch; font-size: 15px; margin-bottom: 10px; }
 .roof-faq__help { margin-top: 12px; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
 .roof-faq__help a { font-size: 13px; }
 .roof-faq__item summary { font-size: 16px; padding: 19px 12px; gap: 12px; }
 .roof-faq__answer { padding: 0 18px 22px 12px; }
 .roof-faq__answer p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .roof-faq__icon::after { transition: none; } }