:root { --ink:#1f2a1f; --muted:#5b6457; --cream:#fbf6e9; --card:#fff; --green:#1f4d2e; --green2:#2e6b40;
        --gold:#e3a72f; --gold2:#f4d58a; --blue:#2f63b5; --purple:#6a44b8; --orange:#d9692a; --red:#c23a3a; --teal:#17877b; }
* { box-sizing:border-box; }
body { margin:0; font:18px/1.6 Georgia, "Noto Serif", serif; color:var(--ink); background:var(--cream); }
h1, h2, h3, .sans, nav, .btn, table, .tag { font-family:system-ui, -apple-system, "Segoe UI", sans-serif; }
img { max-width:100%; height:auto; }
.draft { background:#fff3c4; border-bottom:2px solid var(--gold); text-align:center; padding:8px 12px; font:600 15px system-ui, sans-serif; }
header.hero { position:relative; color:#fff; text-align:center; padding:46px 18px 40px;
  background:linear-gradient(rgba(20,45,28,.72),rgba(20,45,28,.82)), url(img/hero.jpg) center/cover; }
header.hero .bee { font-size:44px; }
header.hero h1 { margin:6px 0 8px; font-size:34px; line-height:1.2; }
header.hero p { margin:0 auto; max-width:640px; font-size:19px; opacity:.95; }
.strip { height:8px; background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold)); }
main { max-width:1000px; margin:0 auto; padding:16px 14px 60px; }
nav.top { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px 0 6px; }
nav.top a { background:#fff; border:2px solid #e2d8bd; border-radius:999px; padding:6px 14px; color:var(--green); text-decoration:none; font-weight:700; font-size:15px; }
nav.top a:hover { border-color:var(--gold); }
section { background:var(--card); border-radius:16px; padding:22px 22px; margin:22px 0; box-shadow:0 4px 14px rgba(60,45,10,.10); border-top:8px solid var(--c,var(--green)); }
h2 { margin:0 0 6px; font-size:27px; color:var(--c,var(--green)); line-height:1.25; }
h2 .num { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--c,var(--green)); color:#fff; font-size:22px; margin-right:8px; vertical-align:middle; }
h3 { margin:20px 0 6px; font-size:21px; color:var(--ink); }
.lead { font-size:19px; color:var(--muted); margin-top:0; }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start; }
.split.wide-pic { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.shot { margin:0; }
.shot img { display:block; width:100%; border-radius:12px; border:1px solid #e3dcc8; box-shadow:0 6px 16px rgba(0,0,0,.14); background:#fff; }
.shot.phone img { max-width:340px; margin:0 auto; border:8px solid #22262b; border-radius:26px; }
.shot figcaption { font:14px/1.4 system-ui, sans-serif; color:var(--muted); text-align:center; margin-top:8px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:12px; }
.tile { border-radius:14px; padding:14px 16px; color:#fff; font-family:system-ui, sans-serif; }
.tile b { display:block; font-size:19px; margin-bottom:3px; }
.tile span { font-size:16px; opacity:.95; }
ol.steps { counter-reset:s; list-style:none; padding:0; margin:12px 0; }
ol.steps > li { counter-increment:s; position:relative; padding:4px 0 14px 54px; }
ol.steps > li::before { content:counter(s); position:absolute; left:0; top:0; width:38px; height:38px; border-radius:50%;
   background:var(--c,var(--green)); color:#fff; font:800 19px system-ui, sans-serif; display:flex; align-items:center; justify-content:center; }
.tip  { background:#eaf6ef; border-left:6px solid var(--green2); padding:12px 16px; border-radius:10px; margin:14px 0; }
.note { background:#fff4df; border-left:6px solid var(--gold); padding:12px 16px; border-radius:10px; margin:14px 0; }
.btn { display:inline-block; background:var(--green); color:#fff; text-decoration:none; font-weight:700; border-radius:10px; padding:10px 18px; margin:4px 6px 4px 0; }
.btn.gold { background:var(--gold); color:#2a1d00; }
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:14px; }
.gallery figure { margin:0; background:#faf7ef; border-radius:12px; padding:10px; }
.gallery img { border-radius:8px; border:1px solid #e3dcc8; display:block; width:100%; }
.gallery figcaption { font:15px/1.45 system-ui, sans-serif; margin-top:8px; }
.gallery figcaption b { display:block; font-size:17px; color:var(--green); }
.page { border:1px solid #eadfc4; border-radius:14px; padding:16px; margin:18px 0; background:#fffdf7; }
.page .tag { display:inline-block; background:var(--c,var(--green)); color:#fff; border-radius:999px; padding:2px 12px; font-size:14px; font-weight:700; }
.page h3 { margin-top:8px; }
.dl { margin:8px 0; }
.dl b { color:var(--c,var(--green)); font-family:system-ui, sans-serif; }
table { width:100%; border-collapse:collapse; margin:10px 0; font-size:16px; }
th, td { text-align:left; padding:10px; border-bottom:1px solid #eadfc4; vertical-align:top; }
th { background:#f6efda; }
footer { text-align:center; color:var(--muted); font:14px/1.5 system-ui, sans-serif; padding:10px; }
@media (max-width:720px) {
  body { font-size:17px; }
  .split, .split.wide-pic { grid-template-columns:1fr; }
  header.hero h1 { font-size:27px; }
  h2 { font-size:23px; }
  section { padding:18px 15px; }
}