:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #17241f; background: #fff; letter-spacing: 0; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible { outline: 2px solid #0069ed; outline-offset: 6px; }
.wrap { width: min(1080px, calc(100% - 48px)); margin-inline: auto; }
header { border-bottom: 1px solid #e3e9e6; }
.masthead { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 23px; font-weight: 700; text-decoration: none; }
.brand img { display: block; border-radius: 8px; }
.nav-link { font-size: 14px; }
.intro { padding-block: 62px 64px; }
.eyebrow { margin: 0 0 22px; color: #47715c; font-size: 12px; font-weight: 700; line-height: 1.5; }
h1 { font-size: 48px; line-height: 1.1; margin: 0 0 26px; }
.lead { margin: 0 0 22px; font-size: 30px; line-height: 1.3; }
.summary { max-width: 550px; margin: 0; color: #59675f; font-size: 17px; line-height: 1.7; }
.about { padding-block: 42px 52px; background: #f5f8f6; border-block: 1px solid #e3e9e6; }
.section-heading .eyebrow { margin-bottom: 12px; }
h2 { margin: 0 0 32px; font-size: 24px; line-height: 1.3; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; }
article { min-width: 0; }
.number { color: #47715c; font-size: 13px; }
h3 { font-size: 17px; line-height: 1.4; margin: 16px 0 10px; }
article p { color: #59675f; font-size: 15px; line-height: 1.7; margin: 0; }
.footer-content { min-height: 92px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; color: #59675f; font-size: 13px; padding-block: 24px; }
.hostname { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .wrap { width: calc(100% - 36px); }
  .masthead { min-height: 76px; gap: 16px; }
  .nav-link { max-width: 90px; line-height: 1.5; text-align: right; }
  .intro { padding-block: 38px 40px; }
  .eyebrow { margin-bottom: 16px; }
  h1 { margin-bottom: 20px; }
  .lead { margin-bottom: 18px; }
  .about { padding-block: 32px 38px; }
  .principles { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  h3 { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }