/* ===============================
GLOBAL
================================ */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

html{
-webkit-text-size-adjust:100%;
}

body{
font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
color:#222;
background:#fff;
line-height:1.65;
font-size:16px;
}

img{
max-width:100%;
height:auto;
display:block;
}

a{
color:#1a8f5a;
text-decoration:none;
word-break:break-word;
}

a:hover{
text-decoration:underline;
}


/* ===============================
HEADER
================================ */

.site-header{
background:#fff;
border-bottom:1px solid #e6ebf2;
position:sticky;
top:0;
z-index:1000;
}

.header-inner{
max-width:1100px;
margin:0 auto;
padding:16px 20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

.logo{
display:flex;
align-items:center;
gap:8px;
font-weight:700;
font-size:18px;
color:#1a1a1a;
text-decoration:none;
flex-shrink:0;
}

.logo:hover{
text-decoration:none;
}

.logo-icon{
width:26px;
height:26px;
object-fit:contain;
}

.main-nav{
display:flex;
gap:18px;
flex-wrap:wrap;
justify-content:flex-end;
}

.main-nav a{
font-size:15px;
font-weight:500;
color:#2c2f35;
text-decoration:none;
}

.main-nav a:hover{
color:#1a8f5a;
text-decoration:none;
}


/* ===============================
HERO
================================ */

.hero{
max-width:1100px;
margin:0 auto;
padding:28px 20px 10px 20px;
}

.hero-inner{
max-width:720px;
}

.hero .eyebrow{
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
color:#1a8f5a;
font-weight:700;
margin-bottom:8px;
display:block;
}

.hero h1{
font-size:36px;
line-height:1.2;
margin-bottom:12px;
}

.hero .lead{
font-size:18px;
color:#555;
max-width:720px;
}


/* ===============================
BREADCRUMBS
================================ */

.breadcrumbs{
font-size:13px;
margin-bottom:16px;
color:#666;
}

.breadcrumbs a{
color:#666;
}

.breadcrumbs span{
margin:0 6px;
}


/* ===============================
LAYOUT
================================ */

.content-grid{
max-width:1100px;
margin:0 auto;
padding:20px 20px 50px 20px;
display:grid;
grid-template-columns:minmax(0,1fr) 260px;
gap:40px;
align-items:start;
}

.article{
min-width:0;
max-width:720px;
}

.sidebar{
position:sticky;
top:92px;
}


/* ===============================
ARTICLE
================================ */

.article-content{
margin-top:16px;
}

.article-content > * + *{
margin-top:16px;
}

.article-content h2{
font-size:26px;
line-height:1.25;
margin-top:36px;
margin-bottom:10px;
}

.article-content h3{
font-size:20px;
line-height:1.3;
margin-top:28px;
margin-bottom:8px;
}

.article-content p{
font-size:16px;
margin-bottom:0;
}

.article-content ul,
.article-content ol{
margin:14px 0 20px 22px;
padding-left:4px;
}

.article-content li{
margin-bottom:8px;
padding-left:2px;
}

.article-content li > ul,
.article-content li > ol{
margin-top:8px;
margin-bottom:8px;
}

.article-content blockquote{
margin:24px 0;
padding:14px 16px;
border-left:4px solid #1a8f5a;
background:#f6faf7;
color:#344;
border-radius:8px;
}

.article-content hr{
border:none;
border-top:1px solid #e6ebf2;
margin:28px 0;
}

.article-content code{
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
font-size:0.92em;
background:#f4f6f8;
padding:2px 6px;
border-radius:6px;
}

.article-content pre{
overflow:auto;
background:#0f1720;
color:#e7edf3;
padding:14px;
border-radius:10px;
margin:22px 0;
}

.article-content pre code{
background:none;
padding:0;
color:inherit;
}

.article-content strong{
font-weight:700;
}


/* ===============================
IMAGES
================================ */

.article-hero-image{
margin:24px 0 18px 0;
}

.article-hero-image img{
width:100%;
max-width:720px;
border-radius:10px;
}

.article-content img{
width:100%;
max-width:720px;
margin:22px 0;
border-radius:10px;
}

/* prevents duplicate first inline image if hero image is already shown */
.article-content > p:first-child img:only-child{
display:none;
}


/* ===============================
TABLES
================================ */

.article-content table{
width:100%;
border-collapse:collapse;
margin:22px 0;
display:block;
overflow-x:auto;
white-space:nowrap;
}

.article-content thead{
background:#f3f5f7;
}

.article-content th,
.article-content td{
text-align:left;
padding:12px;
border-bottom:1px solid #e6ebf2;
}


/* ===============================
SECTIONS / CARDS
================================ */

.section{
max-width:1100px;
margin:32px auto;
padding:0 20px;
}

.section h2{
font-size:22px;
margin-bottom:16px;
}

.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:16px;
}

.card{
border:1px solid #e6ebf2;
border-radius:10px;
padding:16px;
background:#fff;
min-width:0;
}

.card + .card{
margin-top:0;
}

.card-image{
width:100%;
border-radius:8px;
margin-bottom:10px;
}

.card h3,
.card-body h3{
font-size:16px;
line-height:1.35;
margin-bottom:6px;
}

.card p{
font-size:14px;
color:#555;
margin-bottom:10px;
}

.card a{
font-size:14px;
font-weight:600;
}


/* ===============================
RELATED / FAQ / CTA / AFFILIATE
================================ */

.related-links,
.faq-box,
.affiliate-products,
.cta-box{
margin-top:34px;
}

.related-links h2,
.faq-box h2,
.affiliate-products h2,
.cta-box h2{
font-size:22px;
margin-bottom:14px;
}

.related-links ul{
list-style:disc;
margin-left:20px;
}

.related-links li{
margin-bottom:8px;
}

.faq-item{
padding:14px 0;
border-bottom:1px solid #e6ebf2;
}

.faq-item h3{
font-size:18px;
margin-bottom:6px;
}

.cta-box{
padding:20px;
background:#f3f7f4;
border-radius:10px;
}

.cta-button{
display:inline-block;
margin-top:10px;
padding:10px 16px;
background:#1a8f5a;
color:#fff;
border-radius:6px;
font-size:14px;
font-weight:600;
}

.cta-button:hover{
background:#15784b;
text-decoration:none;
}

.affiliate-button{
display:inline-block;
padding:9px 14px;
background:#ff9900;
color:#fff;
border-radius:6px;
font-size:14px;
font-weight:600;
}

.affiliate-button:hover{
background:#e38b00;
text-decoration:none;
}


/* ===============================
SIDEBAR
================================ */

.sidebar-box{
background:#fafafa;
padding:16px;
border-radius:10px;
margin-bottom:20px;
}

.sidebar-box h3{
font-size:16px;
margin-bottom:10px;
}

.sidebar-box ul{
list-style:none;
}

.sidebar-box li{
margin-bottom:7px;
font-size:14px;
}


/* ===============================
FOOTER
================================ */

.site-footer{
margin-top:50px;
padding:24px 20px;
background:#f7f7f7;
text-align:center;
}

.footer-inner{
max-width:1100px;
margin:0 auto;
}

.footer-links{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:8px;
}

.footer-links a{
font-size:13px;
}

.footer-divider{
color:#aaa;
}

.affiliate-disclosure{
max-width:700px;
margin:18px auto 0 auto;
font-size:12px;
color:#666;
}

.copyright{
margin-top:12px;
font-size:12px;
color:#888;
}


/* ===============================
COOKIE BANNER
================================ */

#cookie-banner{
position:fixed;
bottom:0;
left:0;
right:0;
background:#111;
color:white;
padding:14px;
z-index:9999;
}

.cookie-inner{
max-width:900px;
margin:auto;
display:flex;
gap:16px;
align-items:center;
justify-content:space-between;
}

#cookie-banner button{
padding:7px 12px;
border:none;
cursor:pointer;
font-size:13px;
}

#cookie-accept{
background:#2ecc71;
color:white;
}

#cookie-decline{
background:#e74c3c;
color:white;
}


/* ===============================
MOBILE
================================ */

@media (max-width:900px){

.header-inner{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

.main-nav{
gap:12px;
justify-content:flex-start;
}

.content-grid{
grid-template-columns:1fr;
gap:24px;
padding:16px 16px 40px 16px;
}

.article{
max-width:100%;
}

.sidebar{
position:static;
}

.hero{
padding:22px 16px 8px 16px;
}

.hero h1{
font-size:28px;
}

.hero .lead{
font-size:16px;
}

.section{
padding:0 16px;
}

.features{
grid-template-columns:1fr;
}

.card{
padding:14px;
}

.article-content h2{
font-size:22px;
}

.article-content h3{
font-size:18px;
}

.article-content ul,
.article-content ol{
margin-left:18px;
}

.article-content table{
font-size:14px;
}

.cookie-inner{
flex-direction:column;
align-items:flex-start;
}

}