:root{
  --bg:#f6f7f2;
  --surface:#ffffff;
  --text:#0f1a14;
  --muted:#5b6b62;
  --primary:#1f7a5c;
  --primary2:#2a9d8f;
  --accent:#e07a5f;
  --border:#e7eee8;
  --shadow:0 12px 30px rgba(15,26,20,.08);
  --radius:18px;
  --max:1120px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(900px 600px at 20% 10%, rgba(42,157,143,.14), transparent 60%),
              radial-gradient(900px 600px at 80% 0%, rgba(224,122,95,.10), transparent 55%),
              var(--bg);
  line-height:1.6;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:18px; top:18px; width:auto; height:auto; background:#fff; padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); z-index:9999}

.topbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px); background:rgba(246,247,242,.74); border-bottom:1px solid var(--border)}
.navwrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:12px}
.brand{display:flex; align-items:center; gap:10px; min-width:200px}
.brand svg{width:34px; height:34px}
.brand .name{font-weight:800; letter-spacing:.2px}
.brand .tag{font-size:12px; color:var(--muted); margin-top:2px}

.nav{display:flex; align-items:center; justify-content:center; flex:1}
.nav a{padding:9px 12px; border-radius:999px; font-weight:650; color:var(--text)}
.nav a:hover{background:rgba(31,122,92,.10); text-decoration:none}
.nav a.active{background:rgba(31,122,92,.14); color:var(--primary)}

.actions{display:flex; align-items:center; gap:10px; min-width:200px; justify-content:flex-end}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text); box-shadow:0 1px 0 rgba(15,26,20,.03)}
.btn:hover{text-decoration:none; border-color:rgba(31,122,92,.35)}
.btn.primary{background:linear-gradient(135deg, var(--primary), var(--primary2)); color:#fff; border-color:transparent}
.btn.primary:hover{filter:saturate(1.05) brightness(1.02)}
.iconbtn{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:var(--surface)}

.mobilemenu{display:none; position:fixed; inset:0; background:rgba(15,26,20,.35); z-index:60}
.mobilepanel{position:absolute; right:14px; top:74px; width:min(380px, calc(100% - 28px)); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px}
.mobilepanel a{display:block; padding:12px 12px; border-radius:14px; color:var(--text); font-weight:650}
.mobilepanel a:hover{background:rgba(31,122,92,.10); text-decoration:none}
.mobilepanel .grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}

.hero{padding:46px 0 22px}
.hero .card{background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75)); border:1px solid var(--border); border-radius:calc(var(--radius) + 10px); box-shadow:var(--shadow); padding:28px}
.kicker{display:inline-flex; align-items:center; gap:8px; font-weight:750; font-size:12px; letter-spacing:.24px; text-transform:uppercase; color:var(--primary); background:rgba(31,122,92,.10); padding:6px 10px; border-radius:999px}
.h1{font-size:44px; line-height:1.08; margin:14px 0 10px; letter-spacing:-.6px}
.lede{font-size:18px; color:var(--muted); margin:0; max-width:70ch}
.herogrid{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; margin-top:18px}
@media (max-width: 920px){ .h1{font-size:36px} .herogrid{grid-template-columns:1fr} }

.card{background:rgba(255,255,255,.82); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 10px 26px rgba(15,26,20,.06)}
.card.pad{padding:18px}
.section{padding:18px 0 34px}
.section h2{font-size:22px; margin:0 0 12px}
.muted{color:var(--muted)}

.featured{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.postcard{grid-column:span 4; padding:16px}
.postcard h3{margin:8px 0 6px; font-size:16px; line-height:1.25}
.postcard .meta{font-size:12px; color:var(--muted)}
.postcard .excerpt{margin:10px 0 0; color:var(--muted); font-size:14px}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 10px; border-radius:999px; background:rgba(42,157,143,.12); color:var(--primary)}
@media (max-width: 920px){ .postcard{grid-column:span 6} }
@media (max-width: 640px){ .postcard{grid-column:span 12} }

.footer{border-top:1px solid var(--border); padding:24px 0 38px; color:var(--muted)}
.footergrid{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--text)}

.articlewrap{max-width:820px; margin:0 auto}
.articlewrap h1{font-size:36px; line-height:1.12; margin:0 0 12px; letter-spacing:-.4px}
.articlemeta{display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:13px; margin-bottom:18px}
.articlewrap p{font-size:16px}
.articlewrap ul, .articlewrap ol{padding-left:22px}
.articlewrap li{margin:6px 0}
.hr{height:1px; background:var(--border); margin:22px 0}

.searchrow{display:flex; gap:10px; align-items:center; margin:10px 0 0}
.searchrow input{flex:1; padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.92); font-size:15px}
.searchrow input:focus{outline:3px solid rgba(42,157,143,.20); border-color:rgba(31,122,92,.40)}
.small{font-size:12px; color:var(--muted)}

.toolgrid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.tool{grid-column:span 4; padding:16px}
.tool h3{margin:0 0 8px}
.tool label{display:block; font-size:13px; color:var(--muted); margin-top:10px}
.tool input, .tool textarea, .tool select{width:100%; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.92); font-size:14px}
.tool textarea{min-height:110px; resize:vertical}
.tool .out{margin-top:10px; padding:12px; border-radius:14px; background:rgba(31,122,92,.06); border:1px dashed rgba(31,122,92,.30)}
@media (max-width: 920px){ .tool{grid-column:span 6} }
@media (max-width: 640px){ .tool{grid-column:span 12} }

.cookiebar{position:fixed; left:16px; right:16px; bottom:16px; z-index:80; display:none}
.cookiecard{max-width:var(--max); margin:0 auto; background:rgba(255,255,255,.92); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); padding:14px 14px; display:flex; gap:12px; align-items:flex-start; justify-content:space-between}
.cookiecard p{margin:0; color:var(--muted); font-size:13px}
.cookiecard .btnrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
@media (max-width: 720px){ .cookiecard{flex-direction:column; align-items:stretch} .cookiecard .btnrow{justify-content:flex-start} }

@media (max-width: 920px){
  .nav{display:none}
  .iconbtn{display:inline-flex; align-items:center; justify-content:center}
  .actions{min-width:auto}
  .brand{min-width:auto}
}


/* Tools form readability */
.tools-grid label{display:block;margin:.35rem 0;}
.tools-grid input[type="checkbox"]{margin-right:.5rem;}
.tools-grid .tool-card button{margin-top:.6rem;}



/* Tools page: keep inputs and checklist readable */
.tool label{display:block;margin:.35rem 0;}
.tool input[type="checkbox"]{margin-right:.5rem;}