/* Three benefits: open typography, shared rules, and generous reading space. */
.benefits-overview { background: #fff; border-bottom: 1px solid #e4edf1; }
.benefits-inner { max-width: 1160px; margin: 0 auto; padding: 3.25rem 0 3.75rem; }
.benefits-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin: 0; padding: 0; list-style: none; }
.benefits-index li { text-align: center; padding-bottom: 1.75rem; border-bottom: 1px solid var(--benefit-rule); }
.benefits-index li:nth-child(1), #benefits-money { --benefit-ink: #245e80; --benefit-rule: #9fbfd2; }
.benefits-index li:nth-child(2), #benefits-support { --benefit-ink: #286a68; --benefit-rule: #a2c7c4; }
.benefits-index li:nth-child(3), #benefits-clean { --benefit-ink: #4d6e52; --benefit-rule: #b5c9b4; }
.benefits-index a { display: inline-block; color: var(--benefit-ink); font-size: clamp(1.375rem, 2.1vw, 1.75rem); font-weight: 600; line-height: 1.6; letter-spacing: .035em; text-decoration: none; text-underline-offset: .3em; }
.benefits-index a span { display: inline-block; }
.benefits-index a:hover { text-decoration: underline; }
.benefits-index a:focus-visible { outline: 2px solid #187ca8; outline-offset: 8px; }
.benefits-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; padding-top: 2.25rem; }
.benefits-detail { min-width: 0; scroll-margin-top: 6rem; }
.benefits-category { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.benefits-points { margin: 0; }
.benefits-point + .benefits-point { margin-top: 1.75rem; }
.benefits-point dt { margin: 0 0 .55rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.75; letter-spacing: .01em; color: #173b4c; text-wrap: pretty; }
.benefits-point dd { margin: 0; font-size: .9375rem; line-height: 1.95; color: #445760; overflow-wrap: anywhere; text-wrap: pretty; }
.benefits-note { margin: 1.75rem 0 0; padding-top: 1rem; border-top: 1px solid #e4edf1; color: #61717a; font-size: .78125rem; line-height: 1.85; }
@media (max-width: 1240px) { .benefits-inner { margin: 0 2.5rem; } .benefits-index, .benefits-details { gap: 2rem; } }
@media (max-width: 800px) {
  .benefits-inner { margin: 0 1.5rem; padding: 2.25rem 0 2.75rem; }
  .benefits-index { gap: 1rem; }
  .benefits-index li { padding-bottom: 1.25rem; }
  .benefits-index a { font-size: 1.1875rem; }
  .benefits-index a span { display: block; }
  .benefits-details { display: block; padding-top: .25rem; }
  .benefits-detail { display: block; padding: 1.75rem 0; }
  .benefits-detail + .benefits-detail { border-top: 1px solid var(--benefit-rule); }
  .benefits-detail:last-child { padding-bottom: 0; }
  .benefits-category { position: static; clip-path: none; overflow: visible; white-space: normal; width: auto; height: auto; font-size: 1.1875rem; color: var(--benefit-ink); font-weight: 600; line-height: 1.75; margin: 0 0 1.25rem; letter-spacing: .035em; }
  .benefits-note { margin-top: 1.25rem; padding-top: .75rem; }
  .benefits-point + .benefits-point { margin-top: 1.5rem; }
}
@media (max-width: 420px) {
  .benefits-inner { margin: 0 1.25rem; }
  .benefits-point dt { font-size: 1rem; }
  .benefits-point dd { font-size: .875rem; }
  .benefits-note { font-size: .75rem; }
}