*,*::before,*::after {box-sizing:border-box}
:root {--bg:#f7f3ec; --surface:#ffffff; --text:#2b2b2b; --muted:#6f665b; --green:#2f5d3a; --green-soft:#eaf1ea; --accent:#b8562a; --accent-dark:#8c3f1c; --line:#e8ddc9; --radius:14px; --shadow:0 1px 3px rgba(60,40,20,.08),0 6px 18px rgba(60,40,20,.06)}
html {scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body {margin:0; background:var(--bg); color:var(--text); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased}
img {max-width:100%; height:auto; display:block}
a {color:#660099; text-decoration:none; transition:color .15s ease}
a:hover {text-decoration:underline}
.visually-hidden {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.site-header {background:var(--surface); border-bottom:1px solid var(--line)}
.header-inner {max-width:1040px; margin:0 auto; padding:12px 16px; min-height:168px; display:flex; align-items:center; justify-content:space-between; gap:20px}
.logo {display:block; flex:0 0 auto; width:400px; height:160px; max-width:100%; background:url('/img/lg.webp') no-repeat left center; background-size:contain}
.page {max-width:1040px; margin:0 auto; padding:22px 16px 40px}
h1 {margin:0 0 12px; font-size:clamp(22px,3.2vw,32px); line-height:1.25; font-weight:700; color:var(--green); text-align:center}
h2 {margin:0 0 18px; padding-bottom:10px; font-size:clamp(19px,2.4vw,25px); line-height:1.3; font-weight:700; color:var(--green); border-bottom:2px solid var(--line)}
h3 {margin:24px 0 8px; font-size:17px; line-height:1.35; font-weight:700; color:var(--green)}
h3:first-child {margin-top:0}
p {margin:0 0 14px}
p:last-child {margin-bottom:0}
strong,b {color:var(--accent-dark); font-weight:700}
.hero,.section {background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 26px 24px; margin-bottom:20px}
.hero p {color:#3a3a3a}
.toc {display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
.toc a {display:inline-block; padding:6px 14px; font-size:14px; line-height:1.4; color:var(--green); background:var(--green-soft); border-radius:999px; transition:background .15s ease,color .15s ease}
.toc a:hover {background:var(--green); color:#fff; text-decoration:none}
figure {margin:0 0 22px}
figure img {border-radius:12px; box-shadow:var(--shadow)}
.fig-center {max-width:360px; margin-inline:auto}
.list {list-style:none; margin:0; padding:0}
.list > li {position:relative; padding-left:20px; margin-bottom:12px}
.list > li:last-child {margin-bottom:0}
.list > li::before {content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.6}
.steps {margin:0 0 8px; padding-left:22px}
.steps > li {margin-bottom:12px}
.steps > li:last-child {margin-bottom:0}
.steps ul {margin:8px 0 0; padding-left:20px; list-style:none}
.steps ul li {position:relative; padding-left:16px; margin-bottom:4px}
.steps ul li::before {content:"–"; position:absolute; left:0; color:var(--accent)}
.callout {margin:20px 0 0; padding:16px 20px; background:#fdf3e3; border-left:4px solid var(--accent); border-radius:8px}
.callout h3 {margin-top:0; color:var(--accent)}
.cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:22px}
.card {padding:18px 20px; background:#fdfaf4; border:1px solid var(--line); border-radius:12px; transition:box-shadow .18s ease,transform .18s ease}
.card:hover {box-shadow:var(--shadow); transform:translateY(-2px)}
.card h3 {margin:0 0 8px}
.card p {margin:0; font-size:15px}
.compare {width:100%; border-collapse:collapse; margin:18px 0 6px; font-size:15px}
.compare th,.compare td {padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.compare th {background:var(--green-soft); color:var(--green); font-weight:700}
.compare tr:last-child td {border-bottom:0}
.site-footer {margin-top:0; background:var(--surface); border-top:1px solid var(--line)}
.footer-inner {max-width:1040px; margin:0 auto; padding:4px; font-size:13px; line-height:1.5; text-align:center; color:var(--muted)}
.footer-inner a {color:var(--muted); text-decoration:none}
.footer-inner a:hover {color:var(--accent-dark); text-decoration:underline}
.footer-copy {margin:7px; font-size:16px; color:var(--muted)}
@media (max-width:768px) {.header-inner {min-height:96px; padding:8px 14px}
 .logo {max-width:100%}
 .page {padding:16px 12px 32px}
 .hero,.section {padding:20px 18px; border-radius:12px; margin-bottom:14px}
 .cards {grid-template-columns:1fr; gap:12px}
 .compare th,.compare td {padding:8px 8px; font-size:14px}
 .footer-inner {padding:18px 14px}
}