* { box-sizing: border-box; }
body { margin: 0; background: #f7f6f2; color: #25382f; font-family: Arial, sans-serif; }
#navigation, #about-navigation { display: flex; justify-content: space-between; align-items: center; padding: 24px 6%; }
#wordmark, #home-link { font-weight: 700; color: #25382f; text-decoration: none; }
#about-link { color: #48624e; }
#main, #about-main { max-width: 1000px; margin: auto; padding: 40px; }
#hero { display: flex; flex-direction: column; gap: 18px; padding: 40px 0px; }
#eyebrow { font-size: 11px; letter-spacing: 2px; margin: 0; }
#headline, #about-title { font-size: 48px; line-height: 1.1; margin: 0; }
#description, #about-copy { font-size: 17px; line-height: 1.6; max-width: 640px; }
#test-card { display: flex; flex-direction: column; gap: 16px; padding: 32px; background-color: #dbe8ff; border-radius: 16px; padding-top: 52px; padding-bottom: 52px; padding-left: 40px; padding-right: 40px; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
#card-title { font-size: 28px; margin: 0; }
#card-description { font-size: 16px; line-height: 1.6; margin: 0; }
#test-button { align-self: flex-start; padding: 12px 18px; color: #ffffff; background-color: #25382f; border-radius: 8px; text-decoration: none; }
#footer { padding: 32px 6%; font-size: 12px; color: #647466; }
@media (max-width: 600px) { #main, #about-main { padding: 24px; } #headline, #about-title { font-size: 34px; } }