:root { --ink:#17211c; --muted:#5c6b63; --paper:#f7f8f3; --green:#236a4b; --green-dark:#174b35; --lime:#d9f27a; --line:#e2e8e0; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:17px/1.7 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--green); }
.wrap { width:min(780px, calc(100% - 40px)); margin:0 auto; }
header { border-bottom:1px solid var(--line); background:#fff; }
.nav { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:10px; font-weight:850; letter-spacing:-.04em; font-size:19px; }
.logo { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--lime); color:var(--green-dark); }
nav { display:flex; gap:18px; } nav a { text-decoration:none; color:var(--muted); font-size:14px; font-weight:650; }
main { padding:44px 0 20px; }
.kicker { color:var(--green); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:850; }
h1 { font-size:clamp(34px,5vw,50px); line-height:1.05; letter-spacing:-.05em; margin:10px 0 16px; }
h2 { font-size:26px; letter-spacing:-.03em; line-height:1.2; margin:38px 0 10px; }
h3 { font-size:19px; margin:24px 0 6px; }
.lead { color:var(--muted); font-size:19px; }
.disclosure { border-left:4px solid var(--green); padding:12px 16px; background:#edf4e9; border-radius:0 12px 12px 0; font-size:14px; color:#294b39; margin:22px 0; }
.pick { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px 20px; margin:16px 0; }
.pick h3 { margin-top:0; }
.pick p { margin:0 0 10px; color:var(--muted); font-size:16px; }
.btn { display:inline-block; background:var(--green); color:#fff; text-decoration:none; font-weight:750; font-size:14px; padding:10px 15px; border-radius:11px; }
.btn:hover { background:var(--green-dark); }
.cards { display:grid; gap:16px; margin-top:24px; }
.card { display:block; background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 22px; text-decoration:none; color:var(--ink); }
.card strong { display:block; font-size:20px; letter-spacing:-.02em; } .card span { color:var(--muted); font-size:15px; }
.share { margin-top:36px; padding-top:20px; border-top:1px solid var(--line); font-size:15px; }
.share a { margin-right:14px; }
footer { margin-top:40px; background:#edf1e9; padding:26px 0; font-size:13px; color:var(--muted); }
footer a { color:var(--muted); margin-right:14px; }
.promo { display:flex; align-items:center; gap:18px; background:var(--lime); border-radius:20px; padding:20px 22px; margin:32px 0 8px; text-decoration:none; color:var(--ink); position:relative; overflow:hidden; }
.promo::after { content:""; position:absolute; width:150px; height:150px; border-radius:50%; background:#fff4d8; right:-50px; top:-70px; }
.promo > * { position:relative; z-index:1; }
.promo-icon { flex:none; width:50px; height:50px; border-radius:15px; background:#fff; display:grid; place-items:center; font-size:24px; color:var(--green-dark); }
.promo-text { flex:1; } .promo-label { font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:850; color:var(--green-dark); }
.promo strong { display:block; font-size:20px; letter-spacing:-.03em; line-height:1.2; margin:2px 0; } .promo small { color:#3c5145; font-size:14px; line-height:1.4; display:block; }
@media (max-width:600px) { .promo { flex-direction:column; align-items:flex-start; } }
.updated { color:var(--muted); font-size:13px; margin:-6px 0 0; }
.best-for { font-size:15px !important; color:var(--green-dark) !important; }
.pc { display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:14px; margin:0 0 12px; }
.pc ul { margin:4px 0 0; padding-left:18px; color:var(--muted); }
.quick li { margin:4px 0; }
.table-wrap { overflow-x:auto; margin:16px 0; }
.compare { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:14px; font-size:15px; }
.compare th, .compare td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.compare th { background:#edf4e9; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--green-dark); }
@media (max-width:600px) { .pc { grid-template-columns:1fr; } }