/* Keep the supplied mockup independent of the surrounding site's typography. */
#purpose {
  background: #F6F2EA;
  color: #1F2430;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  scroll-margin-top: 100px;
}

#purpose *,
#purpose *::before,
#purpose *::after { box-sizing: content-box; }
#purpose :where(h2, h3, p, nav, section, div, span, article, a, button) { margin: 0; padding: 0; }
#purpose :where(h2, h3) { color: inherit; line-height: normal; text-wrap: wrap; }
#purpose .purpose__content { width: 100%; margin-inline: auto; }
#purpose .purpose__heading { padding: 48px 24px 0; }
#purpose .purpose__heading .section-label { margin-bottom: var(--space-12); }
#purpose .purpose__heading h2 { color: var(--color-navy); font-family: var(--font-sans); font-size: var(--text-26); line-height: var(--leading-heading); }
#purpose .purpose__slider-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#purpose .purpose__slider-tools > p { font-size: 13px; line-height: 1.7; color: #5A5F6A; }
#purpose .purpose__arrows { display: flex; gap: 8px; flex-shrink: 0; }
#purpose .purpose__arrow { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #B4432F; border-radius: 50%; background: #fff; color: #B4432F; cursor: pointer; }
#purpose .purpose__arrow:hover:not(:disabled) { background: #B4432F; color: #fff; }
#purpose .purpose__arrow:disabled { opacity: .3; cursor: default; }
#purpose svg { display: inline; max-width: 100%; height: auto; }
#purpose a { color: #B4432F; }
#purpose a:hover { color: #8E3223; }
#purpose .purpose__track { scrollbar-width: none; }
#purpose .purpose__track::-webkit-scrollbar { display: none; }
#purpose [id] { scroll-margin-top: 100px; }
#purpose :focus-visible { outline: 2px solid #B4432F; outline-offset: 3px; }