:root{
  --paper:#f7f4ec; --ink:#26221c; --muted:#9a917f; --line:#e2dccd;
  --accent:#1f6f5c; --dark:#26221c; --pro:#7a5a2e;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Noto Sans TC",system-ui,sans-serif;line-height:1.7}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:"Noto Serif TC",serif;line-height:1.3}
a{color:var(--accent);text-decoration:none}
.muted{color:var(--muted)} .small{font-size:.85rem}

.hero{padding:72px 0 48px;border-bottom:1px solid var(--line)}
.kicker{letter-spacing:.18em;font-size:.78rem;color:var(--muted);margin:0 0 10px}
.hero h1{font-size:2.6rem;margin:0 0 14px}
.lead{font-size:1.12rem;color:#5a5347;margin:0 0 24px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.stat{color:var(--muted);font-size:.95rem}

.btn{display:inline-block;padding:11px 20px;border-radius:10px;font-weight:700;
  border:1.5px solid var(--ink);cursor:pointer;font-size:.95rem;text-align:center}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.dark{background:var(--dark);border-color:var(--dark);color:#fff}
.btn.line{background:transparent;color:var(--ink)}
.btn.block{display:block;width:100%}
.btn.sm{padding:9px 14px;font-size:.9rem}
.btn:disabled{opacity:.5;cursor:default}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:44px 0}
.feat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.feat h3{margin:0 0 8px}

.section-title{font-size:1.6rem;margin:28px 0 18px;padding-top:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.tool{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column}
.tool .no{font-size:.72rem;letter-spacing:.1em;color:var(--muted)}
.tool h3{margin:6px 0 8px;font-size:1.18rem}
.tool .desc{color:#5a5347;font-size:.92rem;flex:1}
.badge{align-self:flex-start;font-size:.72rem;padding:3px 9px;border-radius:999px;margin:6px 0;font-weight:700}
.badge.pub{background:#e7f1ec;color:var(--accent)}
.badge.mem{background:#f3ead7;color:var(--pro)}
.badge.pro{background:#efe4d2;color:var(--pro)}
.upsell{font-size:.8rem;color:var(--muted);margin-top:10px}

.tiers{padding-bottom:20px}
.tier-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tier{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px}
.tier.pro{border-color:var(--pro)}
.tier .price{color:var(--muted);margin:2px 0 14px}
.tier ul{padding-left:18px;margin:0 0 18px;color:#5a5347}
.tier li{margin:6px 0}

.faq details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:10px 0}
.faq summary{font-weight:700;cursor:pointer}
.faq p{color:#5a5347;margin:10px 0 2px}

footer{padding:40px 0;border-top:1px solid var(--line);margin-top:40px}

/* unlock page */
.center{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:20px}
.unlock-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px;max-width:420px;width:100%;text-align:center}
.unlock-card h1{font-size:1.8rem;margin:6px 0 12px}
.unlock-card input{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:1rem;margin:18px 0 12px;text-align:center}
.unlock-card input:focus{outline:none;border-color:var(--accent)}
.msg{min-height:1.4em;font-size:.9rem;margin:10px 0}
.msg.err{color:#b4452f} .msg.ok{color:var(--accent)}

@media(max-width:760px){
  .features,.tier-grid{grid-template-columns:1fr}
  .hero h1{font-size:2.1rem}
}