
:root{--ink:#17262e;--muted:#637078;--navy:#183647;--green:#496d5a;--cream:#fbfaf6;--line:#dfe6e8;--white:#fff;--accent:#c78141}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--cream);line-height:1.66}
a{color:#245d75}img{max-width:100%;display:block}.topbar{background:var(--navy);color:#fff;text-align:center;padding:9px 16px;font-size:.9rem}
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.nav{max-width:1180px;margin:auto;padding:16px 24px;display:flex;gap:24px;align-items:center}
.brand{font-weight:850;color:var(--navy);text-decoration:none}.navlinks{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}.navlinks a{text-decoration:none;color:var(--ink);font-weight:700;font-size:.94rem}
.container{max-width:1180px;margin:auto;padding:0 24px}.hero{padding:50px 0 34px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.kicker{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:850;color:var(--green)}h1{font-size:clamp(2.1rem,4.5vw,4.3rem);line-height:1.03;margin:.25em 0;color:var(--navy)}
h2{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.16;color:var(--navy);margin-top:1.6em}h3{color:var(--navy)}
.lead{font-size:1.12rem;color:var(--muted)}.hero img{border-radius:20px;box-shadow:0 18px 50px rgba(17,39,52,.14)}
.btn{display:inline-block;padding:12px 16px;border-radius:10px;background:var(--navy);color:#fff;text-decoration:none;font-weight:800}.btn.alt{background:var(--green)}.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 50px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:21px;box-shadow:0 6px 20px rgba(30,50,60,.05)}
.pill{display:inline-block;padding:6px 10px;background:#edf4f6;border-radius:999px;font-size:.78rem;font-weight:800;color:var(--navy)}
.article-wrap{display:grid;grid-template-columns:minmax(0,760px) 290px;gap:42px;align-items:start;padding:36px 24px 70px}.article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px}
.article h1{font-size:clamp(2rem,4vw,3.4rem)}.meta{display:flex;gap:14px;flex-wrap:wrap;color:#748087;font-size:.88rem;margin:10px 0 18px}
.sidebar{position:sticky;top:92px}.toc a{display:block;padding:7px 0;text-decoration:none;border-bottom:1px solid #edf1f2}
.callout{background:#eef5f1;border-left:4px solid var(--green);padding:16px 18px;border-radius:10px;margin:22px 0}.warn{background:#fff5ea;border-left-color:var(--accent)}
.specs{width:100%;border-collapse:collapse;margin:20px 0}.specs th,.specs td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.specs th{width:34%;color:var(--navy)}
.shop-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0}.shop-card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fafcfc}
.source-note{font-size:.9rem;color:#65727a;background:#f7f9fa;padding:14px 16px;border-radius:10px}
footer{background:var(--navy);color:#e8eff2;margin-top:40px}.footer{padding:30px 24px;max-width:1180px;margin:auto}.footer a{color:#fff}.disclosure{font-size:.88rem;color:#c7d2d8}
@media(max-width:860px){.hero-grid,.article-wrap{grid-template-columns:1fr}.card-grid{grid-template-columns:1fr 1fr}.sidebar{position:static}}
@media(max-width:580px){.card-grid,.shop-row{grid-template-columns:1fr}.article{padding:22px}.navlinks{display:none}}
