* { box-sizing: border-box; }
body { margin: 0; background: #f7f5ef; color: #22302b; font: 17px/1.6 Georgia, 'Times New Roman', serif; }
.top { background: #2f5d50; color: #f3efe2; }
.top .in { max-width: 820px; margin: 0 auto; padding: 26px 20px 18px; }
.brand { font: 600 13px/1 Verdana, Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #b9d3c6; }
.title { font-size: 30px; margin: 8px 0 4px; }
.title a { color: #f3efe2; text-decoration: none; }
.lead { color: #cfe0d6; font-size: 16px; margin: 0; }
.menu { background: #26493f; }
.menu .in { max-width: 820px; margin: 0 auto; padding: 0 12px; font: 15px/1 Verdana, Arial, sans-serif; }
.menu a, .menu span { display: inline-block; padding: 12px 10px; color: #dce9e2; text-decoration: none; }
.menu span { color: #fff; border-bottom: 3px solid #e2b85a; }
.page { max-width: 820px; margin: 0 auto; padding: 24px 20px 40px; }
h1 { font-size: 27px; font-weight: normal; margin: 4px 0 16px; color: #2f5d50; }
h2 { font: 600 17px/1.3 Verdana, Arial, sans-serif; margin: 28px 0 8px; color: #2f5d50; }
p { margin: 0 0 12px; }
a { color: #8a5a12; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 16px 0; }
.card { background: #fff; border: 1px solid #e3dccb; border-radius: 4px; padding: 14px 16px; font-size: 16px; }
.card b { display: block; font-family: Verdana, Arial, sans-serif; font-size: 14px; color: #2f5d50; margin-bottom: 4px; }
.tip { border-left: 4px solid #e2b85a; background: #fffaf0; padding: 10px 14px; margin: 16px 0; font-size: 16px; }
ul { padding-left: 22px; }
li { margin-bottom: 6px; }
.foot { border-top: 1px solid #e3dccb; max-width: 820px; margin: 0 auto; padding: 14px 20px 30px; font: 13px/1.5 Verdana, Arial, sans-serif; color: #7b8780; }
@media (max-width: 560px) { .title { font-size: 24px; } .menu a, .menu span { padding: 10px 6px; } }