:root { color-scheme: light; font-family: "Segoe UI", Arial, sans-serif; color: #202d29; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 5px; }
a:focus-visible { outline: 3px solid #b24b70; outline-offset: 5px; }
.wrap { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.masthead { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 750; font-size: 25px; }
nav { display: flex; gap: 30px; align-items: center; font-size: 15px; font-weight: 600; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 50px; padding: 13px 23px; background: #204d40; color: #fff; border-radius: 5px; font-weight: 650; }
.button:hover { background: #173d32; text-decoration: none; }
.button-small { min-height: 42px; padding: 10px 19px; }
.hero { overflow: hidden; background: #f0f5f3; border-top: 1px solid #e4ebe7; }
.hero-copy { text-align: center; padding-block: 44px 28px; }
.eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #536c61; margin: 0 0 16px; }
h1 { font-size: 76px; line-height: 1; margin: 0 0 14px; font-weight: 750; }
.hero-subtitle { font-size: 30px; line-height: 1.2; margin: 0 0 17px; font-weight: 600; }
.hero-description { font-size: 17px; line-height: 1.65; max-width: 630px; margin: 0 auto 23px; color: #52625b; }
.actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 25px; }
.text-link { font-size: 15px; font-weight: 650; }
.demo-note { font-size: 12px; color: #5b6a62; margin: 16px 0 0; }
.product-view { height: 250px; overflow: hidden; }
.product-view img { display: block; width: 100%; height: auto; border: 1px solid #d6e2db; border-bottom: 0; border-radius: 6px 6px 0 0; }
.features { padding-block: 65px 70px; scroll-margin-top: 30px; }
h2 { font-size: 35px; line-height: 1.2; font-weight: 650; margin: 0 0 18px; }
.section-intro > p:last-child { color: #607067; margin: 0; line-height: 1.6; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; margin-top: 40px; }
.feature-grid article { border-top: 3px solid #82a895; padding-top: 22px; }
.feature-grid article:nth-child(2) { border-color: #b97b93; }
.feature-grid article:nth-child(3) { border-color: #799fb6; }
.feature-number { font-size: 11px; font-weight: 700; color: #68766f; }
h3 { font-size: 21px; line-height: 1.35; margin: 14px 0 10px; font-weight: 650; }
.feature-grid p { font-size: 15px; line-height: 1.8; color: #56665d; margin: 0 0 22px; }
.feature-grid a { font-size: 14px; font-weight: 650; color: #204d40; }
.capabilities-band { background: #f4f7fa; padding-block: 60px; }
.capabilities-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; margin-top: 30px; }
.capabilities-grid article { padding-block: 22px; border-top: 1px solid #d3dee6; }
.capabilities-grid h3 { margin-top: 0; }
.capabilities-grid p { color: #52625b; font-size: 16px; line-height: 1.8; margin: 0; }
.capabilities-links { display: flex; flex-wrap: wrap; gap: 20px 38px; margin-top: 22px; }
.people-band { background: #f1edf2; padding-block: 55px; }
.people-content { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.people-content p:not(.eyebrow) { font-size: 16px; line-height: 1.8; margin-top: 0; color: #5d5862; }
.footer { display: flex; align-items: center; gap: 24px; min-height: 100px; font-size: 13px; color: #617068; }
.footer p { flex: 1; }
.footer .brand { color: #204d40; font-size: 20px; }
.skip-link { position: absolute; left: 16px; top: -100px; padding: 12px; background: white; z-index: 5; }
.skip-link:focus { top: 10px; }
.about-content { max-width: 780px; padding-block: 55px 65px; }
.about-content h1 { font-size: 44px; line-height: 1.2; }
.about-content h2 { font-size: 26px; }
.about-content p:not(.eyebrow) { font-size: 17px; line-height: 1.8; color: #52625b; }
.about-content .about-intro { font-size: 21px; }
.about-content section { margin-top: 36px; padding-top: 28px; border-top: 1px solid #d6e2db; }
.about-content p a { color: #204d40; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
    .wrap { width: calc(100% - 36px); }
    .masthead { min-height: 76px; gap: 12px; }
    .brand { font-size: 21px; gap: 7px; }
    .brand img { width: 29px; height: 29px; }
    nav { gap: 13px; font-size: 13px; }
    .features-link { display: none; }
    .button-small { padding: 9px 12px; gap: 8px; }
    .hero-copy { padding-block: 35px 25px; }
    .eyebrow { font-size: 10px; line-height: 1.6; }
    h1 { font-size: 58px; }
    .hero-subtitle { font-size: 25px; }
    .hero-description { font-size: 15px; line-height: 1.6; }
    .actions { gap: 19px; }
    .product-view { height: 125px; }
    .features { padding-block: 38px 45px; }
    h2 { font-size: 29px; }
    .feature-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
    .capabilities-band { padding-block: 38px; }
    .capabilities-grid { grid-template-columns: 1fr; }
    .people-content { grid-template-columns: 1fr; gap: 15px; }
    .people-band { padding-block: 38px; }
    .footer { flex-wrap: wrap; gap: 16px; padding-block: 24px; }
    .footer p { flex-basis: calc(100% - 100px); margin: 0; }
}