/* Anyponics — shared stylesheet for the guide hub and articles */

:root{
  --green:#2D7A4B; --green-dark:#1B4F30; --green-deep:#10271A;
  --accent:#7EC384; --surface:#F4F8F3; --paper:#FFFFFF;
  --ink:#15211B; --ink-soft:#4F5D54; --line:#E2EAE0;
  --maxw:1120px; --readw:760px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.7; font-size:18px;
  -webkit-font-smoothing:antialiased;}
a{color:var(--green); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block; height:auto;}

/* nav — matches the main site */
header.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav-in{display:flex; align-items:center; justify-content:space-between;
  height:68px; max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.brand{display:flex; align-items:center; gap:11px; font-weight:800;
  font-size:23px; color:var(--ink); letter-spacing:-.02em;}
.brand:hover{text-decoration:none;}
.brand img{width:52px; height:52px;}
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a{color:var(--ink-soft); font-size:15px; font-weight:600;}
.nav-links a:hover{color:var(--green); text-decoration:none;}
.nav-links a.current{color:var(--green);}
.nav-cta{background:var(--green); color:#fff!important; padding:9px 18px;
  border-radius:999px; font-size:14px;}
.nav-cta:hover{text-decoration:none;}
@media(max-width:720px){ .nav-links a:not(.nav-cta){display:none;} }

/* breadcrumbs */
.crumbs{max-width:var(--readw); margin:0 auto; padding:24px 24px 0;
  font-size:14px; color:var(--ink-soft);}
.crumbs a{color:var(--ink-soft);}
.crumbs a:hover{color:var(--green);}
.crumbs .sep{margin:0 8px; color:#b9c7bd;}

/* article shell */
main.article{max-width:var(--readw); margin:0 auto; padding:0 24px 30px;}
.art-head{padding:22px 0 18px; border-bottom:1px solid var(--line); margin-bottom:32px;}
.kicker{color:var(--green); font-weight:800; font-size:13px; letter-spacing:.07em;
  text-transform:uppercase; margin-bottom:13px;}
.art-head h1{font-size:42px; line-height:1.14; letter-spacing:-.03em;
  font-weight:850; margin-bottom:18px;}
.art-meta{color:var(--ink-soft); font-size:14.5px;}
.art-lead{font-size:21px; line-height:1.55; color:#27332b; margin:26px 0 6px;}

/* prose */
.prose h2{font-size:28px; letter-spacing:-.02em; font-weight:840; line-height:1.2;
  margin:44px 0 14px;}
.prose h3{font-size:20px; letter-spacing:-.01em; font-weight:800; margin:30px 0 9px;}
.prose p{margin-bottom:18px; color:#27332b;}
.prose ul,.prose ol{margin:0 0 18px 22px;}
.prose li{margin-bottom:9px; color:#27332b;}
.prose li::marker{color:var(--green);}
.prose strong{color:var(--ink); font-weight:700;}
.prose a{font-weight:600;}

/* comparison table */
.tbl-wrap{overflow-x:auto; margin:8px 0 22px; border:1px solid var(--line);
  border-radius:12px;}
table{border-collapse:collapse; width:100%; font-size:15.5px;}
th,td{text-align:left; padding:12px 15px; border-bottom:1px solid var(--line);
  vertical-align:top;}
thead th{background:var(--surface); font-weight:800; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.03em; color:var(--green-dark);}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:none;}
th[scope=row]{font-weight:700; color:var(--ink); white-space:nowrap;}

/* callout */
.callout{background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--green); border-radius:12px; padding:17px 20px;
  margin:24px 0; font-size:16.5px;}
.callout p{margin-bottom:8px; color:#27332b;}
.callout p:last-child{margin-bottom:0;}
.callout strong{color:var(--green-dark);}
.callout.warn{border-left-color:#C7791B;}
.callout.warn strong{color:#9A5B12;}

/* in-app CTA box */
.cta-box{background-color:#10271A;
  background-image:linear-gradient(165deg,rgba(36,107,65,.93),rgba(16,39,26,.97));
  color:#fff; border-radius:20px; padding:36px 30px; margin:46px 0 8px;
  text-align:center;}
.cta-box h2{color:#fff; font-size:25px; margin:0 0 9px; letter-spacing:-.02em;
  line-height:1.2;}
.cta-box p{color:#cfe3d5; font-size:16.5px; margin:0 auto 21px; max-width:440px;}
.cta-box .btn{display:inline-block; background:#fff; color:var(--green-dark);
  font-weight:700; font-size:15.5px; border-radius:999px; padding:13px 27px;}
.cta-box .btn:hover{text-decoration:none;}

/* related links */
.related{margin:46px 0 0; border-top:1px solid var(--line); padding-top:26px;}
.related h2{font-size:14px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); margin-bottom:15px;}
.related ul{list-style:none;}
.related li{margin-bottom:11px;}
.related a{font-weight:700; font-size:17px;}

/* FAQ */
.faq{margin:48px 0 0; border-top:1px solid var(--line); padding-top:30px;}
.faq h2{font-size:27px; letter-spacing:-.02em; font-weight:840; margin-bottom:6px;}
.faq .qa{padding:19px 0; border-bottom:1px solid var(--line);}
.faq .qa:last-child{border-bottom:none; padding-bottom:0;}
.faq .qa h3{font-size:18.5px; font-weight:800; margin:0 0 7px; color:var(--ink);
  letter-spacing:-.01em;}
.faq .qa p{margin:0; color:#27332b; font-size:16.5px;}

/* guide hub */
.hub-hero{background-color:#16321F;
  background-image:linear-gradient(165deg,rgba(27,79,48,.95),rgba(16,39,26,.97));
  color:#fff;}
.hub-hero-in{max-width:var(--readw); margin:0 auto; padding:62px 24px 58px;}
.hub-hero .kicker{color:var(--accent);}
.hub-hero h1{font-size:44px; line-height:1.1; letter-spacing:-.03em;
  font-weight:850; margin-bottom:15px;}
.hub-hero p{font-size:19px; color:#d8e8dd; max-width:33em;}
.hub-list{max-width:var(--readw); margin:0 auto; padding:46px 24px 8px;}
.post{display:block; border:1px solid var(--line); border-radius:16px;
  padding:26px 26px 22px; margin-bottom:18px; background:var(--paper);}
.post:hover{border-color:var(--accent); text-decoration:none;
  box-shadow:0 16px 30px -22px rgba(20,40,28,.4);}
.post .pk{color:var(--green); font-weight:800; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase;}
.post h2{font-size:23px; letter-spacing:-.02em; margin:9px 0 7px; color:var(--ink);
  line-height:1.25;}
.post p{color:var(--ink-soft); font-size:16px;}
.post .more{color:var(--green); font-weight:700; font-size:14.5px;
  margin-top:12px; display:inline-block;}
.hub-foot-cta{max-width:var(--readw); margin:0 auto; padding:14px 24px 0;}

/* footer — matches the main site */
footer{background:var(--green-deep); color:#9fb8a7; padding:48px 0 38px;
  margin-top:62px;}
.foot-in{max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.foot-brand{display:flex; align-items:center; gap:11px; color:#fff;
  font-weight:800; font-size:20px;}
.foot-brand img{width:42px; height:42px;}
.foot-links{display:flex; gap:22px; flex-wrap:wrap; font-size:15px;}
.foot-links a{color:#bdd3c4;}
.foot-links a:hover{color:#fff;}
.foot-legal{max-width:var(--maxw); margin:28px auto 0; padding:0 24px;
  font-size:13.5px; color:#6f8a78;}

@media(max-width:560px){
  body{font-size:17px;}
  .art-head h1{font-size:32px;}
  .hub-hero h1{font-size:33px;}
  .prose h2{font-size:24px;}
  .art-lead{font-size:19px;}
}