.survey-section { max-width: 76rem; margin: auto; padding: 0 2rem var(--section-space, 5rem); }
.survey-section > h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 700; margin-bottom: 1.5rem; }
.survey-content { padding-bottom: 2.5rem; }
.survey-intro { max-width: 44rem; font-size: 1.125rem; line-height: 1.6; }
.survey-scale { margin: 1rem 0 2.5rem; color: #bfbfbf; line-height: 1.5; }
.survey-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 4rem; }
.survey-result { border-top: 1px solid rgb(255 255 255 / 20%); padding-top: 1.5rem; }
.survey-result h3 { font-size: 1.125rem; line-height: 1.5; margin-bottom: 1rem; }
.survey-average { display: flex; align-items: baseline; gap: .4rem; }
.survey-average > span { font-size: 2.5rem; font-weight: 700; }
.survey-average small { margin-left: .4rem; font-size: .9rem; color: #bfbfbf; }
.survey-count { color: #bfbfbf; margin: .25rem 0 1.25rem; }
.survey-distribution { list-style: none; padding: 0; margin: 0; }
.survey-distribution li { display: grid; grid-template-columns: 1rem 1fr 2.5rem; gap: .75rem; align-items: center; margin: .45rem 0; font-variant-numeric: tabular-nums; }
.survey-distribution li > span:last-child { text-align: right; }
.survey-bar { height: 5px; background: #333; }
.survey-bar > span { display: block; height: 100%; background: #fff; }
.survey-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) { .survey-results { grid-template-columns: 1fr; gap: 2rem; } }

.survey-full-link { margin: 0; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 25%); font-size: 1.125rem; }
.survey-full-link a { text-decoration: underline; text-underline-offset: .3em; }
.survey-full-link a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.survey-page { max-width: 76rem; margin: auto; padding: 3rem 2rem 5rem; }
.survey-page h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.2; margin-bottom: 2rem; }
.survey-page .survey-results { margin-bottom: 4rem; }
.survey-page .survey-responses { max-width: 46rem; }
.survey-page .survey-responses h2 { font-size: 1.75rem; margin: 3rem 0 1.5rem; }
.survey-page .survey-responses blockquote { border-top: 1px solid #444; margin: 0; padding: 1.25rem 0; overflow-wrap: anywhere; }
.survey-page .survey-responses blockquote p { margin: 0; }

.survey-page-header, .survey-page-footer { max-width: 76rem; }