/* Scoped styles for the How You Can Help page. */
.helpPage { background: #faf7f2; color: #203852; font-size: 16px; line-height: 1.65; }
.helpPage * { box-sizing: border-box; }
.helpPage h1, .helpPage h2, .helpPage h3, .helpPage p, .helpPage a, .helpPage li, .helpPage summary { overflow-wrap: break-word; }
.helpPage p { font-size: 16px; line-height: 1.7; margin: 0 0 18px; }
.helpPage h2 { border: 0; color: #203852; font-size: 32px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.25; margin: 0 0 20px; padding: 0; text-transform: none; }
.helpPage h3 { color: #203852; font-size: 24px; font-weight: 700; line-height: 1.35; margin: 0 0 16px; }
.helpPage a { color: #24595c; text-decoration: underline; text-underline-offset: 3px; }
.helpPage a:hover { color: #203852; }
.helpPage a:focus-visible, .helpPage summary:focus-visible { outline: 3px solid #d6a84b; outline-offset: 4px; }
.helpPage .helpKicker { color: #24595c; font-size: 14px; font-weight: 700; letter-spacing: 1.3px; margin: 0 0 12px; text-transform: uppercase; }
.helpHero { background: #203852; color: #fff; padding: 52px 0; }
.helpHeroGrid { align-items: center; display: grid; gap: 32px 56px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.helpHeroGrid > *, .helpOptions > *, .helpCommunityHeading > *, .helpContactGrid > * { min-width: 0; }
.helpHero .helpKicker { color: #cfe0dc; }
.helpHero h1 { color: #fff; font-size: 48px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.15; margin: 0 0 22px; }
.helpHero .helpLead { font-size: 19px; margin: 0; max-width: 660px; }
.helpHeroActions { border-left: 4px solid #d6a84b; padding-left: 28px; }
.helpPage .helpButton { border: 2px solid transparent; border-radius: 5px; display: inline-block; font-size: 16px; font-weight: 700; line-height: 1.5; max-width: 100%; padding: 13px 20px; text-align: center; text-decoration: none; white-space: normal; }
.helpPage .helpButtonGold { background: #d6a84b; color: #203852; }
.helpPage .helpButtonGold:hover, .helpPage .helpButtonGold:focus { background: #eac678; color: #203852; }
.helpPage .helpButtonTeal { background: #2f6f73; color: #fff; }
.helpPage .helpButtonTeal:hover, .helpPage .helpButtonTeal:focus { background: #24595c; color: #fff; }
.helpHero .helpHeroLink { color: #fff; display: block; margin-top: 16px; padding: 10px 0; }
.helpHero .helpHeroLink:hover { color: #eac678; }
.helpOptionsSection { padding: 44px 0 48px; scroll-margin-top: 24px; }
.helpOptions { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.helpOption { background: #fff; border: 1px solid #d7e1dc; border-top: 4px solid #2f6f73; border-radius: 7px; display: flex; flex-direction: column; padding: 28px; }
.helpOption:nth-child(2) { border-top-color: #d6a84b; }
.helpOption:nth-child(3) { border-top-color: #203852; }
.helpOption > p:not(.helpKicker) { color: #52636a; }
.helpOption > a { align-self: flex-start; margin-top: auto; }
.helpTextLink { font-weight: 700; padding: 12px 0; }
.helpCommunitySection { background: #e4ece8; padding: 48px 0; }
.helpCommunityHeading { align-items: end; display: grid; gap: 20px 48px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); margin-bottom: 24px; }
.helpCommunityHeading h2, .helpCommunityHeading > p { margin: 0; }
.helpCommunityPhoto { margin: 0; }
.helpCommunityPhoto img { border-radius: 8px; display: block; height: auto; width: 100%; }
.helpCommunityPhoto figcaption { color: #394a50; font-size: 14px; line-height: 1.6; padding-top: 12px; }
.helpContactSection { padding: 48px 0; }
.helpContactGrid { align-items: start; display: grid; gap: 40px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.helpPage .helpTiming { color: #52636a; font-size: 14px; margin-bottom: 0; }
.helpContact { background: #fff; border: 1px solid #d7e1dc; border-left: 4px solid #d6a84b; border-radius: 6px; padding: 28px; }
.helpContact > a { overflow-wrap: anywhere; }
.helpContact .helpButton { margin-top: 22px; }
.helpPastSupporters { border-top: 1px solid #d7e1dc; margin-top: 36px; padding-top: 20px; }
.helpPastSupporters summary { cursor: pointer; display: list-item; font-weight: 700; padding: 12px 0; }
.helpPastSupporters summary::marker { color: #2f6f73; }
.helpPastSupporters > div { padding-top: 12px; }
.helpPastSupporters p { color: #52636a; font-size: 14px; }
.helpPastSupporters ul { display: grid; gap: 10px 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding-left: 22px; }
@media (max-width: 991px) {
    .helpHeroGrid, .helpOptions { grid-template-columns: minmax(0, 1fr); }
    .helpHeroActions { padding-left: 20px; }
    .helpOption { padding: 26px; }
    .helpContactGrid { gap: 28px; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
    .helpHero { padding: 36px 0; }
    .helpHero h1 { font-size: 36px; }
    .helpPage h2 { font-size: 28px; }
    .helpOptionsSection, .helpCommunitySection, .helpContactSection { padding: 32px 0; }
    .helpCommunityHeading { grid-template-columns: minmax(0, 1fr); }
    .helpOption, .helpContact { padding: 24px 20px; }
    .helpPastSupporters ul { grid-template-columns: minmax(0, 1fr); }
}