/* TeraiFarms — shared styles for SEO / learn article pages */
:root{
  --canvas:#E9EDE3; --canvas-alt:#F4F1E7; --card:#FBFAF6;
  --ink:#382820; --body:#4A423A; --muted:#6B6259;
  --action:#2F6B41; --action-hi:#255536; --accent:#B8862F; --accent-text:#7E5A18;
  --hairline:#C0C9B2; --deep:#1E3126;
  --f-display:'Newsreader',Georgia,'Times New Roman',serif;
  --f-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:4px; --nav-h:72px; --gutter:20px;
}
*{box-sizing:border-box}
html{background:var(--deep); -webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--f-text); font-size:17px; line-height:1.72; color:var(--body); background:var(--canvas)}
img{max-width:100%; height:auto; display:block}

/* ── nav ── */
.nav{position:sticky; top:0; z-index:40; height:var(--nav-h); background:var(--canvas); border-bottom:1px solid var(--hairline); display:flex; align-items:center}
.nav .wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; gap:22px}
.logo{display:flex; align-items:center; text-decoration:none; flex-shrink:0}
.logo img{height:27px; width:auto; display:block}
.nav-links{display:none; gap:22px; font-size:14px; font-weight:500}
.nav-links a{color:var(--body); text-decoration:none}
.nav-links a:hover{color:var(--action)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.nav-buy{display:inline-flex; align-items:center; min-height:40px; padding:0 16px; background:var(--action); color:#fff; border-radius:var(--radius); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap}
.nav-buy:hover{background:var(--action-hi)}

/* ── article ── */
.article{max-width:720px; margin:0 auto; padding:36px var(--gutter) 60px}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:22px}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--accent-text)}
.article h1{font-family:var(--f-display); font-weight:600; color:var(--ink); font-size:clamp(30px,26px+1.7vw,45px); line-height:1.08; letter-spacing:-.01em; margin:0 0 16px}
.lede{font-size:19px; line-height:1.6; color:var(--body); margin:0 0 30px}
.article h2{font-family:var(--f-display); font-weight:600; color:var(--ink); font-size:clamp(23px,21px+0.6vw,27px); line-height:1.2; margin:40px 0 12px}
.article h3{font-family:var(--f-text); font-weight:600; color:var(--ink); font-size:18px; margin:26px 0 8px}
.article p{margin:0 0 16px; max-width:66ch}
.article ul,.article ol{margin:0 0 18px; padding-left:22px; max-width:66ch}
.article li{margin-bottom:7px}
.article strong{color:var(--ink); font-weight:600}
.article mark{background:#E9DEC6; color:inherit; padding:0 4px; border-radius:2px; font-weight:500}
.article a{color:var(--accent-text); font-weight:500}

.tbl-wrap{overflow-x:auto; margin:0 0 22px}
.article table{width:100%; border-collapse:collapse; font-size:14px; background:var(--card); border:1px solid var(--hairline); border-radius:8px; overflow:hidden}
.article th,.article td{text-align:left; padding:9px 13px; border-bottom:1px solid var(--hairline); vertical-align:top}
.article th{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700}
.article td:nth-child(2){background:#EDF1EA; font-weight:600; color:var(--ink)}
.article th:nth-child(2){background:#EDF1EA; color:var(--accent-text)}
.article tr:last-child td{border-bottom:none}

.note{background:var(--canvas-alt); border:1px solid var(--hairline); border-left:3px solid var(--accent); border-radius:var(--radius); padding:14px 16px; font-size:14.5px; line-height:1.6; color:var(--muted); margin:22px 0}
.note strong{color:var(--ink)}

.faq-q{font-weight:600; color:var(--ink); margin:22px 0 6px; font-size:17px}

.cta{background:var(--deep) linear-gradient(160deg,#294036,#17281E); border-radius:8px; padding:28px 24px; margin:40px 0 0; text-align:center}
.cta h2{color:#F1ECDD; font-family:var(--f-display); font-weight:600; font-size:25px; margin:0 0 8px}
.cta p{color:#C7D2BE; font-size:15px; max-width:none; margin:0 auto 18px}
.cta .btn{display:inline-flex; align-items:center; min-height:48px; padding:0 28px; background:var(--action); color:#fff; border-radius:var(--radius); font-weight:600; text-decoration:none; font-size:15px}
.cta .btn:hover{background:var(--action-hi)}

.related{margin-top:40px; border-top:1px solid var(--hairline); padding-top:22px}
.related h2{font-size:15px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-family:var(--f-text); font-weight:700; margin:0 0 12px}
.related a{display:block; color:var(--accent-text); text-decoration:none; padding:6px 0; font-weight:500; border-bottom:1px solid var(--hairline)}
.related a:hover{color:var(--action)}

.src{font-size:13px; color:var(--muted); margin-top:26px; line-height:1.6}

/* ── footer ── */
.foot{background:var(--deep) linear-gradient(160deg,#223528,#16241B); color:#C7D2BE; font-size:14px; padding:34px var(--gutter) 28px}
.foot .wrap{max-width:1120px; margin:0 auto}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:16px}
.foot-links a{color:#EAE3D2; text-decoration:none}
.foot-links a:hover{color:#fff}
.foot .fine{font-size:12px; color:#8AA090; line-height:1.55; border-top:1px solid rgba(255,255,255,.12); padding-top:14px}

@media(min-width:768px){
  .nav-links{display:flex}
  .article{padding-top:48px}
}