button { font-family: inherit; cursor: pointer; }
.resource-page-note { font-size: 16px; line-height: 1.95; color: #64736a; margin: 0; }
.circle-panel { border: 1px solid #dce4da; border-radius: 18px; background: #fff; padding: 35px; margin-bottom: 40px; }
.circle-benefit { font-size: 20px; font-weight: 700; color: #237348; margin: 23px 0; }
.circle-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; gap: 12px; padding: 0; margin: 0 0 30px; }
.circle-grid li { padding: 17px 12px; border: 1px solid #dce7de; border-radius: 9px; text-align: center; color: #35503e; background: #f8faf6; line-height: 1.7; }
.resource-button { display: inline-flex; justify-content: center; align-items: center; gap: 20px; padding: 13px 20px; border: 1px solid #237348; border-radius: 8px; background: #237348; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.6; text-decoration: none; }
.resource-button:hover { background: #195d38; }
.resource-button:focus-visible, .dialog-close:focus-visible { outline: 3px solid #237348; outline-offset: 3px; }
.resource-history { margin: 12px 0 24px; font-size: 13px; line-height: 1.8; color: #737c70; }
.resource-categories { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.resource-categories a { border: 1px solid #c6d7c8; border-radius: 20px; color: #237348; padding: 9px 16px; font-size: 14px; }
.resource-group { margin: 36px 0; scroll-margin-top: 24px; }
.resource-group>h2 { font-size: 23px; margin: 0 0 18px; }
.resource-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.supply-card { display: flex; flex-direction: column; padding: 27px; border: 1px solid #dce4da; border-radius: 14px; background: #fff; }
.supply-card h3 { font-size: 20px; line-height: 1.5; margin: 0 0 12px; }
.supply-card>p { font-size: 15px; line-height: 1.9; color: #64736a; margin: 0 0 18px; }
.supply-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.7; color: #64736a; margin-bottom: 22px; }
.supply-card .resource-button { align-self: flex-start; margin-top: auto; }
#resource-contact { width: min(420px,calc(100% - 32px)); padding: 32px 25px; border: 1px solid #dce4da; border-radius: 18px; color: #20392f; text-align: center; max-height: 90vh; overflow: auto; }
#resource-contact::backdrop { background: rgba(20,35,28,.55); }
#resource-contact h2 { margin: 4px 0 12px; font-size: 24px; }
#resource-contact p { font-size: 14px; line-height: 1.8; color: #64736a; }
#resource-contact img { display: block; max-width: 100%; width: 260px; height: auto; margin: 20px auto; }
.dialog-close { position: absolute; top: 7px; right: 9px; width: 34px; height: 34px; border: 0; background: transparent; color: #64736a; font-size: 26px; }
@media(max-width:760px) { .circle-panel { padding: 24px; } .circle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .circle-grid li { font-size: 14px; padding: 13px 8px; } .resource-card-grid { grid-template-columns: 1fr; } .resource-page-note { font-size: 15px; } }

#resource-contact.assistant-contact { width: min(520px,calc(100% - 32px)); }
#resource-contact.assistant-contact img { width: 420px; }