:root{
  --cream:#FCFBF9; --parchment:#F5F3EA; --surface:#FFFFFF;
  --ink:#1A1D16; --muted:#8A8A7A;
  --olive:#5B6E4F; --olive-d:#4A5A40; --olive-light:#E8EBE0;
  --forest:#2E3A28; --forest-2:#374A2E;
  --gold:#C5A83D; --border:#D9D4C2; --divider:#E8E4D9;
  --shadow-sm:0 1px 2px rgba(26,29,22,.04), 0 4px 16px rgba(46,58,40,.06);
  --shadow-md:0 8px 30px rgba(46,58,40,.10), 0 2px 6px rgba(26,29,22,.05);
  --radius:18px;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.68;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:-.01em}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}

/* header */
header.nav{position:sticky;top:0;z-index:50;background:rgba(252,251,249,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--divider)}
.nav-inner{max-width:1140px;margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-size:1.22rem}
.brand img{width:34px;height:34px;border-radius:9px;box-shadow:var(--shadow-sm)}
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.92rem;padding:.7em 1.3em;border-radius:999px;background:var(--olive);color:#fff;transition:transform .18s,box-shadow .18s;box-shadow:0 6px 18px rgba(91,110,79,.3)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(91,110,79,.4)}

/* breadcrumb + hero */
.crumb{max-width:760px;margin:0 auto;padding:26px 24px 0;font-size:.86rem;color:var(--muted)}
.crumb a{color:var(--olive);font-weight:500}
.article-hero{padding:14px 0 8px}
.article-hero .eyebrow{display:block;margin-bottom:14px}
.article-hero h1{font-size:clamp(2.05rem,4.6vw,2.9rem)}
.lede{font-size:1.2rem;color:#4b4f43;margin-top:20px}

/* article body */
article{padding:26px 0 20px}
article p{margin:18px 0;font-size:1.06rem}
article h2{font-size:1.7rem;margin:44px 0 4px}
article h3{font-size:1.28rem;margin:30px 0 2px}
article ul,article ol{margin:16px 0 16px 2px;padding-left:22px;display:grid;gap:10px}
article li{font-size:1.05rem;padding-left:4px}
article strong{color:var(--ink)}
article a.link{color:var(--olive);font-weight:600;border-bottom:1.5px solid var(--olive-light)}
article a.link:hover{border-color:var(--olive)}
figure{margin:34px auto;text-align:center}
figure img{border-radius:22px;box-shadow:var(--shadow-md);max-width:300px;width:100%;margin:0 auto}
figure.green img{background:var(--forest)}
figcaption{margin-top:14px;font-size:.9rem;color:var(--muted)}
.callout{background:var(--parchment);border:1px solid var(--divider);border-left:4px solid var(--olive);border-radius:14px;padding:22px 24px;margin:30px 0}
.callout p{margin:0;font-size:1.02rem}
.steps-list{counter-reset:s;list-style:none;padding:0;margin:24px 0;display:grid;gap:16px}
.steps-list li{counter-increment:s;position:relative;padding:20px 22px 20px 62px;background:var(--surface);border:1px solid var(--divider);border-radius:14px;box-shadow:var(--shadow-sm);font-size:1.02rem}
.steps-list li::before{content:counter(s);position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:50%;background:var(--olive-light);color:var(--olive-d);font-family:var(--serif);font-weight:600;display:grid;place-items:center;font-size:1rem}
.steps-list li strong{display:block;font-family:var(--serif);font-size:1.08rem;margin-bottom:2px}

/* mini faq */
.mini-faq{margin:40px 0 8px}
.mini-faq details{border-bottom:1px solid var(--divider)}
.mini-faq summary{list-style:none;cursor:pointer;padding:18px 2px;font-family:var(--serif);font-size:1.12rem;font-weight:500;display:flex;justify-content:space-between;gap:16px}
.mini-faq summary::-webkit-details-marker{display:none}
.mini-faq summary::after{content:"+";color:var(--olive);font-size:1.3rem;line-height:1}
.mini-faq details[open] summary::after{content:"–"}
.mini-faq .a{padding:0 2px 20px;color:#4b4f43}

/* related */
.related{margin:44px 0 0}
.related h2{font-size:1.4rem;margin-bottom:16px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.related-grid a{display:block;padding:18px 20px;background:var(--surface);border:1px solid var(--divider);border-radius:14px;box-shadow:var(--shadow-sm);font-weight:600;color:var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s}
.related-grid a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--olive-light);color:var(--olive)}
.related-grid a span{display:block;font-weight:500;font-size:.86rem;color:var(--muted);margin-top:3px}

/* cta */
.cta-band{margin-top:52px;background:linear-gradient(160deg,var(--forest),var(--forest-2));color:#fff;border-radius:26px;padding:46px 34px;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 70% at 50% 0%,rgba(197,168,61,.16),transparent 70%)}
.cta-band h2{font-size:1.8rem;color:#fff;position:relative}
.cta-band p{color:rgba(255,255,255,.75);margin:12px auto 24px;max-width:40ch;position:relative}
.stores{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.store{display:inline-flex;align-items:center;gap:11px;background:#fff;color:var(--forest);padding:11px 20px;border-radius:14px;transition:transform .18s,box-shadow .18s}
.store:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.store svg{width:24px;height:24px}
.store .s-small{font-size:.62rem;letter-spacing:.04em;opacity:.6;line-height:1}
.store .s-big{font-size:1rem;font-weight:600;line-height:1.15}

/* footer */
footer{border-top:1px solid var(--divider);padding:40px 0;margin-top:56px;text-align:center;color:var(--muted);font-size:.9rem}
footer a{color:var(--olive);font-weight:500}
footer .bh{font-family:var(--serif);color:var(--olive)}
@media(max-width:560px){.related-grid{grid-template-columns:1fr}}