:root { color: #173d32; background: #f5faf7; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; }
a { color: #087a63; }
.top { background: #073e34; color: #fff; padding: 18px max(24px, calc((100% - 1060px) / 2)); display: flex; justify-content: space-between; align-items: center; }
.top a { color: #fff; text-decoration: none; font-weight: 800; }
.wrap { max-width: 1060px; padding: 50px 24px 80px; margin: auto; }
.eyebrow { color: #0b8b70; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 900; }
h1 { max-width: 800px; color: #123b31; font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.055em; margin: 12px 0 20px; }
h2 { color: #173d32; margin-top: 42px; font-size: 1.55rem; letter-spacing: -.025em; }
.lead { max-width: 760px; color: #537067; font-size: 1.16rem; }
.cta { display: inline-block; margin: 22px 0 12px; padding: 14px 20px; border-radius: 12px; color: #fff; background: #087a63; font-weight: 850; text-decoration: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.card { padding: 22px; border: 1px solid #d8e7e0; border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(12, 71, 55, .05); }
.card h3 { margin-top: 0; color: #0d765f; }
.notice { padding: 17px 19px; border-left: 4px solid #f2b83f; border-radius: 8px; color: #4d5e58; background: #fff9eb; }
footer { margin-top: 55px; padding-top: 24px; border-top: 1px solid #d8e7e0; color: #60786f; font-size: .9rem; }
@media (max-width: 600px) { .top { padding: 15px 18px; } .wrap { padding: 34px 18px 60px; } }