/* KibiPay blog — static, SEO-first pages. Brand green #1b5e20. */
:root{
  --green:#1b5e20; --green-2:#2e7d32; --ink:#111827; --muted:#5b6470;
  --line:#e6e8eb; --bg:#ffffff; --soft:#f6f8f7; --accent:#1b5e20;
  --maxw:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* header */
.site-head{
  position:sticky; top:0; z-index:10; background:var(--green); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.site-head .wrap{display:flex; align-items:center; gap:1rem; max-width:1080px; margin:0 auto; padding:.7rem 1.1rem}
.brand{display:flex; align-items:center; gap:.55rem; color:#fff; font-weight:700; font-size:1.05rem}
.brand:hover{text-decoration:none}
.brand svg{display:block}
.site-head nav{margin-left:auto; display:flex; gap:1.1rem; font-size:.92rem}
.site-head nav a{color:rgba(255,255,255,.9)}
.site-head nav a:hover{color:#fff}
.cta{background:#fff; color:var(--green)!important; padding:.35rem .7rem; border-radius:7px; font-weight:600}
.cta:hover{text-decoration:none; filter:brightness(.96)}

/* layout */
.wrap{max-width:1080px; margin:0 auto; padding:0 1.1rem}
main.article{max-width:var(--maxw); margin:0 auto; padding:2.2rem 1.1rem 3rem}
.crumbs{font-size:.85rem; color:var(--muted); margin-bottom:1rem}
.crumbs a{color:var(--muted)}

/* article */
.article h1{font-size:2.1rem; line-height:1.2; letter-spacing:-.01em; margin:.2rem 0 .6rem}
.meta{color:var(--muted); font-size:.9rem; margin-bottom:1.4rem; display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:center}
.tags{display:flex; flex-wrap:wrap; gap:.4rem; margin:0}
.tag{display:inline-block; background:var(--soft); color:var(--green-2); border:1px solid var(--line);
  border-radius:999px; padding:.12rem .6rem; font-size:.75rem; font-weight:600}
.prose{font-size:1.06rem}
.prose h2{font-size:1.5rem; line-height:1.3; margin:2.1rem 0 .7rem; letter-spacing:-.01em}
.prose h3{font-size:1.2rem; margin:1.5rem 0 .5rem}
.prose p{margin:0 0 1.05rem}
.prose ul,.prose ol{margin:0 0 1.1rem; padding-left:1.3rem}
.prose li{margin:.3rem 0}
.prose blockquote{margin:1.2rem 0; padding:.6rem 1rem; border-left:4px solid var(--green);
  background:var(--soft); color:#374151; border-radius:0 8px 8px 0}
.prose code{background:var(--soft); border:1px solid var(--line); border-radius:5px; padding:.08rem .35rem;
  font:.88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.prose a{border-bottom:1px solid rgba(27,94,32,.25)}
.prose table{width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.95rem; display:block; overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line); padding:.5rem .7rem; text-align:left; vertical-align:top}
.prose th{background:var(--soft); font-weight:700}

/* related + cta */
.after{max-width:var(--maxw); margin:2.5rem auto 0; padding:0 1.1rem}
.related{border-top:1px solid var(--line); padding-top:1.4rem}
.related h2{font-size:1.15rem; margin:0 0 .7rem}
.related ul{list-style:none; margin:0; padding:0}
.related li{margin:.4rem 0}
.endcta{margin:2rem 0 0; background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:1.3rem 1.4rem}
.endcta h2{margin:.1rem 0 .4rem; font-size:1.2rem}
.endcta p{margin:0 0 .8rem; color:#374151}
.btn{display:inline-block; background:var(--green); color:#fff!important; padding:.5rem .9rem; border-radius:8px; font-weight:600}
.btn:hover{text-decoration:none; filter:brightness(1.06)}
.btn.ghost{background:#fff; color:var(--green)!important; border:1px solid var(--green)}

/* index */
.index-hero{background:linear-gradient(180deg,#123f16,#1b5e20); color:#fff; padding:2.6rem 0 2.2rem}
.index-hero h1{margin:0 0 .5rem; font-size:2.2rem; letter-spacing:-.01em}
.index-hero p{margin:0; max-width:640px; color:rgba(255,255,255,.9); font-size:1.05rem}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.1rem; padding:2rem 0 3rem}
.card{border:1px solid var(--line); border-radius:12px; padding:1.2rem 1.25rem; background:#fff;
  transition:box-shadow .15s,border-color .15s; display:flex; flex-direction:column}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.07); border-color:#d3d9d5}
.card a.title{color:var(--ink); font-weight:700; font-size:1.12rem; line-height:1.3; letter-spacing:-.01em}
.card a.title:hover{color:var(--green); text-decoration:none}
.card .date{color:var(--muted); font-size:.8rem; margin:.35rem 0 .55rem}
.card .excerpt{color:#374151; font-size:.94rem; margin:0 0 .9rem; flex:1}
.card .tags{margin-top:auto}

/* footer */
.site-foot{border-top:1px solid var(--line); background:var(--soft); color:var(--muted); font-size:.88rem}
.site-foot .wrap{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; padding:1.4rem 1.1rem; align-items:center}
.site-foot a{color:var(--muted)}
.site-foot .sp{margin-left:auto}

@media (max-width:640px){
  .article h1{font-size:1.7rem}
  .index-hero h1{font-size:1.8rem}
  .site-head nav a:not(.cta){display:none}
}