/* ===================== MARKETING / SEO PAGES ===================== */
/* Reuses the theme tokens defined in style.css (:root + body.theme-dark) */
body.marketing-page{
  overflow-y:auto;
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 45%),
    radial-gradient(circle at 80% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%), var(--bg);
}

.mkt-header{display:flex; align-items:center; justify-content:space-between; max-width:960px; margin:0 auto; padding:1.4rem 1.2rem;}
.mkt-header .brand{justify-content:flex-start;}
.mkt-header .brand .brand-name{font-size:1.3rem;}
.mkt-nav{display:flex; gap:1.4rem; align-items:center;}
.mkt-nav a{color:var(--muted); font-size:.9rem; font-weight:600; text-decoration:none;}
.mkt-nav a:hover, .mkt-nav a.active{color:var(--text);}
.mkt-nav .btn-primary{width:auto; padding:.55rem 1.1rem; font-size:.85rem;}

.mkt-main{max-width:760px; margin:0 auto; padding:1rem 1.2rem 4rem;}
.mkt-hero{text-align:center; padding:2rem 0 2.6rem;}
.mkt-hero h1{font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.15; margin-bottom:.8rem;}
.mkt-hero p{color:var(--muted); font-size:1.05rem; max-width:560px; margin:0 auto;}

.mkt-section{margin:2.2rem 0;}
.mkt-section h2{font-family:var(--font-display); font-size:1.3rem; margin-bottom:1rem;}
.mkt-section p{color:var(--muted); line-height:1.65; margin-bottom:.8rem;}

.mkt-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem;}
.mkt-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.3rem;}
.mkt-card h3{font-family:var(--font-display); font-size:1.02rem; margin-bottom:.5rem;}
.mkt-card p{color:var(--muted); font-size:.88rem; line-height:1.55; margin:0;}

.mkt-faq-item{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.1rem 1.3rem; margin-bottom:.8rem;}
.mkt-faq-item h3{font-family:var(--font-display); font-size:1rem; margin-bottom:.5rem;}
.mkt-faq-item p{color:var(--muted); font-size:.9rem; line-height:1.6; margin:0;}

.mkt-cta{text-align:center; padding:2.4rem 1.5rem; background:var(--surface); border:1px solid var(--border); border-radius:20px; margin-top:2.6rem;}
.mkt-cta h2{font-family:var(--font-display); margin-bottom:.6rem;}
.mkt-cta p{color:var(--muted); margin-bottom:1.3rem;}
.mkt-cta .btn-primary{width:auto; padding:.85rem 1.8rem; display:inline-block;}

.mkt-footer{max-width:960px; margin:0 auto; padding:1.6rem 1.2rem 2.4rem; display:flex; flex-wrap:wrap; gap:.9rem 1.6rem; justify-content:space-between; align-items:center; border-top:1px solid var(--border); color:var(--muted); font-size:.8rem;}
.mkt-footer nav{display:flex; gap:1.2rem; flex-wrap:wrap;}
.mkt-footer a{color:var(--muted); text-decoration:none;}
.mkt-footer a:hover{color:var(--text);}

@media (max-width:600px){
  .mkt-nav{gap:.8rem;}
  .mkt-nav a:not(.btn-primary){display:none;}
}

/* ===================== ARTICLES / LEGAL ===================== */
.article{max-width:720px; margin:0 auto; padding:1rem 1.2rem 3rem;}
.article h1{font-family:var(--font-display); font-size:clamp(1.7rem,4vw,2.3rem); line-height:1.2; margin:1.2rem 0 .6rem;}
.article .meta{color:var(--muted); font-size:.82rem; margin-bottom:1.8rem;}
.article h2{font-family:var(--font-display); font-size:1.25rem; margin:2rem 0 .7rem;}
.article h3{font-family:var(--font-display); font-size:1.05rem; margin:1.4rem 0 .5rem;}
.article p, .article li{color:var(--text); opacity:.88; line-height:1.75; margin-bottom:.9rem; font-size:1rem;}
.article ul, .article ol{padding-left:1.4rem; margin-bottom:1rem;}
.article a{color:var(--accent);}
.article .lead{font-size:1.1rem; color:var(--muted); opacity:1;}
.related{margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--border);}
.related h2{margin-top:0;}
.post-list{display:grid; gap:1rem;}
.post-card{display:block; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.3rem; text-decoration:none; color:inherit;}
.post-card:hover{border-color:var(--accent);}
.post-card h2{font-family:var(--font-display); font-size:1.15rem; margin-bottom:.4rem;}
.post-card p{color:var(--muted); font-size:.92rem; line-height:1.55; margin:0;}