.introduction{max-width:1180px}.intro-hero{grid-template-columns:minmax(0,1fr) 250px;align-items:center;gap:60px;padding:70px 0 45px;display:grid}.intro-eyebrow{letter-spacing:2px;color:#657853;font-size:11px}.intro-hero h1{letter-spacing:-2.5px;margin:22px 0;font-size:clamp(40px,6vw,76px);font-weight:500;line-height:1.05}.intro-tagline{max-width:600px;font-size:24px;line-height:1.5}.intro-lead{color:#526147;max-width:620px;margin:20px 0 30px;font-size:17px;line-height:1.8}.intro-hero .pixy-avatar{justify-self:center;width:230px}.intro-hero small{color:#617153;margin-top:16px;font-size:12px;display:block}.intro-meta{color:#617153;border-bottom:1px solid #dce4d2;gap:25px;padding:18px 0;font-size:12px;display:flex}.intro-body{grid-template-columns:215px minmax(0,1fr);gap:75px;padding:50px 0;display:grid}.intro-body aside nav{flex-direction:column;gap:16px;font-size:13px;display:flex;position:sticky;top:25px}.intro-body aside a{color:#526147;text-decoration:none}.intro-body article{max-width:720px}.intro-body section{margin-bottom:55px;scroll-margin-top:30px}.intro-body h2{margin:0 0 22px;font-size:28px;font-weight:500;line-height:1.3}.intro-body p,.intro-body li{color:#45573a;font-size:16px;line-height:1.9}.intro-body li{margin-bottom:14px}.intro-body article a:not(.landing-primary){text-underline-offset:4px;color:#3b5832;text-decoration:underline}.intro-examples{border-top:1px solid #d1ddc6;margin-top:25px}.intro-examples>div{border-bottom:1px solid #d1ddc6;padding:24px 0}.intro-examples span{letter-spacing:1px;color:#617153;font-size:11px}.intro-examples blockquote{margin:12px 0 0;font-size:19px;line-height:1.7}.intro-close{background:#eaf0e1;border-radius:18px;padding:32px}.introduction a:focus-visible{outline-offset:5px;outline:2px solid #3b5832}@media (max-width:760px){.intro-hero{grid-template-columns:1fr;gap:15px;padding:35px 0}.intro-hero .pixy-avatar{grid-row:1;width:115px}.intro-hero h1{letter-spacing:-1px}.intro-tagline{font-size:21px}.intro-body{grid-template-columns:1fr;gap:30px;padding-top:28px}.intro-body aside nav{flex-flow:wrap;gap:12px;position:static}.intro-body aside strong{width:100%}.intro-body h2{font-size:25px}.intro-meta{flex-wrap:wrap;gap:10px}.intro-close{padding:24px}.intro-hero .landing-primary{display:inline-flex}.introduction .landing-header nav>a:first-child{display:inline}}