/* Self-hosted fonts — no third-party requests, no visitor IPs leaked. */
@font-face{font-family:"Nunito";src:url("/fonts/nunito-latin.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("/fonts/caveat-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --cream:#FFFDF0; --paper:#FFFBE2; --postit:#FFF59D; --postit-deep:#F9E04B;
  --leaf:#148A3C; --leaf-dark:#0B5223; --ink:#3E3A20; --olive:#5C5530;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Nunito",system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.65}
.hand{font-family:"Caveat",cursive}
.wrap{max-width:960px;margin:0 auto;padding:0 1.25rem}
header{padding:2.2rem 0 1rem}
header .brand{font-size:2rem;color:var(--leaf-dark);text-decoration:none;font-weight:700}
h1{font-size:clamp(2.4rem,6vw,4rem);color:var(--leaf-dark)}
h2{font-size:2rem;color:var(--leaf);margin-bottom:.6rem}
p.lead{font-size:1.2rem;color:var(--olive);max-width:38rem}
.note{background:var(--postit);border-radius:2px 14px 3px 10px;padding:1.6rem;position:relative;
  box-shadow:0 6px 14px rgba(62,58,32,.14);margin:2.2rem 0}
.note::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:88px;height:20px;background:rgba(20,138,60,.35);border-radius:3px}
.tilt-l{transform:rotate(-.8deg)} .tilt-r{transform:rotate(.9deg)}
.note.green{background:#A9E8B8}
.grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.btn{display:inline-block;background:var(--leaf);color:#fff;text-decoration:none;font-weight:700;
  padding:.85rem 1.6rem;border-radius:999px;margin-top:1rem}
.btn.ghost{background:transparent;color:var(--leaf-dark);border:2px solid var(--leaf)}
img.shot{width:100%;border-radius:12px;box-shadow:0 8px 18px rgba(62,58,32,.18)}
img.mark{max-width:340px;width:70%}
ul.checks{list-style:none;margin-top:.6rem}
ul.checks li{padding-left:1.7rem;position:relative;margin:.45rem 0}
ul.checks li::before{content:"✓";color:var(--leaf);font-weight:800;position:absolute;left:0}
footer{padding:3rem 0 2.2rem;color:var(--olive);font-size:.95rem}
footer a{color:var(--leaf-dark)}
.pill{display:inline-block;background:var(--postit-deep);color:var(--ink);border-radius:999px;
  padding:.25rem .9rem;font-weight:700;font-size:.85rem}
@media (prefers-reduced-motion:no-preference){.note{transition:transform .2s}.note:hover{transform:rotate(0) scale(1.01)}}