:root{
  --bg:#f6f5f2; --ink:#33312e; --sage:#3a4a40; --sage2:#5b6b5f;
  --line:#e3e0d8; --card:#ffffff; --muted:#8a857c; --dark:#2f3a34; --dark2:#cfcabe;
  --accent:#7c8a6e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--sage2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1000px; margin:0 auto; padding:0 18px}
/* nav */
.nav{background:var(--dark); color:var(--dark2); border-bottom:3px solid var(--accent)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:14px 18px}
.brand{color:#fff; font-weight:700; font-size:20px; letter-spacing:1px}
.navlinks{display:flex; gap:16px; flex-wrap:wrap}
.navlinks a{color:var(--dark2); font-size:15px}
.navlinks a:hover{color:#fff}
/* breadcrumb */
.crumb{font-size:13px; color:var(--muted); padding:14px 18px 0}
.crumb a{color:var(--sage2)}
.crumb .cur{color:var(--ink)}
/* main */
main.wrap{padding-top:18px; padding-bottom:40px}
h1{font-size:28px; color:var(--sage); border-left:5px solid var(--accent); padding-left:14px; margin:18px 0 10px; line-height:1.35}
h2{font-size:21px; color:var(--sage); margin:26px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line)}
h3{font-size:17px; color:var(--ink); margin:0 0 8px}
.intro{background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px 18px; color:#46433d; font-size:15.5px}
.block{margin:18px 0}
/* grids */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px}
.card{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px 18px; box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card p{margin:6px 0 0; color:#55524b; font-size:14.5px}
.tips{background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px 22px; margin:0}
.tips li{margin:10px 0}
.faq{background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px 18px; margin:12px 0}
.faq h3{color:var(--sage); font-size:16px}
.faq p{margin:6px 0 0; color:#55524b}
/* footer */
.foot{background:var(--dark); color:var(--dark2); margin-top:36px; padding:24px 0; font-size:14px}
.foot a{color:var(--dark2); text-decoration:underline}
.foot p{margin:6px 0}
/* responsive */
@media (max-width:768px){
  body{font-size:15px}
  h1{font-size:23px}
  h2{font-size:19px}
  .grid2,.grid3{grid-template-columns:1fr}
  .nav .wrap{flex-direction:column; align-items:flex-start; gap:8px}
  .navlinks{gap:12px}
  .wrap{padding:0 14px}
}