/* ── Shared blog stylesheet ────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=JetBrains+Mono:wght@400;500&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg:       #faf9f5;
  --bg2:      #f0eeea;
  --bg3:      #e8e6dc;
  --card:     rgba(255,255,255,0.9);
  --t1:       #141413;
  --t2:       #5c5a54;
  --t3:       #b0aea5;
  --border:   rgba(20,20,19,0.1);
  --orange:   #d97757;
  --blue:     #6a9bcc;
  --green:    #788c5d;
  --grad:     linear-gradient(135deg,#d97757,#6a9bcc);
  --r:        12px;
  --mono:     'JetBrains Mono', monospace;
  --ui:       'Poppins', Arial, sans-serif;
  --display:  'DM Serif Display', Georgia, serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--ui); background:var(--bg); color:var(--t1); line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ── Nav ── */
.nav { position:sticky; top:0; z-index:100; background:rgba(250,249,245,0.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); padding:14px 0; }
.nav-inner { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav-logo { font-weight:800; font-size:20px; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; }
.nav-logo .icon { width:28px; height:28px; background:var(--grad); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; }
.nav-links { display:flex; gap:24px; font-size:14px; font-weight:500; color:var(--t2); }
.nav-links a:hover { color:var(--t1); }
.nav-cta { background:var(--grad); color:#fff; padding:8px 18px; border-radius:8px; font-size:13px; font-weight:600; white-space:nowrap; }
.nav-cta:hover { opacity:.9; }

/* ── Layout ── */
.container { max-width:760px; margin:0 auto; padding:0 24px; }
.container-wide { max-width:1100px; margin:0 auto; padding:0 24px; }

/* ── Article hero ── */
.article-hero { padding:64px 0 48px; border-bottom:1px solid var(--border); }
.article-hero .label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--orange); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.article-hero h1 { font-family:var(--display); font-size:clamp(32px,5vw,52px); font-weight:400; line-height:1.15; letter-spacing:-.01em; margin-bottom:20px; }
.article-meta { display:flex; align-items:center; gap:16px; font-size:13px; color:var(--t3); flex-wrap:wrap; }
.article-meta .author { display:flex; align-items:center; gap:8px; }
.article-meta .av { width:28px; height:28px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0; }
.article-meta .sep { opacity:.4; }
.reading-time { background:rgba(217,119,87,.1); color:var(--orange); padding:3px 10px; border-radius:100px; font-size:11px; font-weight:600; }

/* ── Article body ── */
.article-body { padding:48px 0 80px; }
.article-body h2 { font-family:var(--display); font-size:clamp(22px,3vw,30px); font-weight:400; margin:48px 0 16px; }
.article-body h3 { font-size:18px; font-weight:700; margin:32px 0 12px; }
.article-body p { font-size:16px; color:var(--t2); line-height:1.8; margin-bottom:20px; }
.article-body ul, .article-body ol { margin:0 0 20px 24px; }
.article-body li { font-size:16px; color:var(--t2); line-height:1.75; margin-bottom:8px; }
.article-body strong { color:var(--t1); font-weight:600; }
.article-body a { color:var(--orange); border-bottom:1px solid rgba(217,119,87,.3); transition:border-color .15s; }
.article-body a:hover { border-color:var(--orange); }
.article-body code { font-family:var(--mono); font-size:.85em; background:var(--bg3); padding:2px 6px; border-radius:4px; color:var(--t1); }
.article-body blockquote { border-left:3px solid var(--orange); padding:16px 20px; background:rgba(217,119,87,.06); border-radius:0 8px 8px 0; margin:24px 0; font-style:italic; color:var(--t2); }

/* ── Callout / tip box ── */
.callout { background:var(--card); border:1px solid var(--border); border-left:4px solid var(--orange); border-radius:0 var(--r) var(--r) 0; padding:20px 24px; margin:28px 0; }
.callout.blue { border-left-color:var(--blue); }
.callout.green { border-left-color:var(--green); }
.callout strong { display:block; font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; color:var(--orange); }
.callout.blue strong { color:var(--blue); }
.callout.green strong { color:var(--green); }
.callout p { margin:0; font-size:15px; }

/* ── Comparison table ── */
.cmp-table { width:100%; border-collapse:collapse; margin:28px 0; font-size:14px; }
.cmp-table th { background:var(--bg3); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding:12px 16px; text-align:left; border-bottom:2px solid var(--border); }
.cmp-table td { padding:14px 16px; border-bottom:1px solid var(--border); color:var(--t2); vertical-align:top; }
.cmp-table tr:last-child td { border-bottom:none; }
.cmp-table .name { font-weight:600; color:var(--t1); }
.cmp-table .price { font-family:var(--mono); font-size:13px; }
.cmp-table .verdict { background:rgba(120,140,93,.1); color:var(--green); font-size:11px; font-weight:700; padding:3px 8px; border-radius:100px; white-space:nowrap; }
.cmp-table .aff { font-size:11px; color:var(--orange); font-weight:600; }
.cmp-table .top { background:rgba(217,119,87,.04); }

/* ── Affiliate card ── */
.aff-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:24px; margin:24px 0; display:flex; gap:20px; align-items:flex-start; }
.aff-card .aff-icon { width:48px; height:48px; border-radius:10px; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.aff-card .aff-body { flex:1; min-width:0; }
.aff-card .aff-name { font-size:16px; font-weight:700; margin-bottom:4px; }
.aff-card .aff-desc { font-size:14px; color:var(--t2); margin-bottom:12px; }
.aff-card .aff-btn { display:inline-flex; align-items:center; gap:6px; background:var(--grad); color:#fff; padding:9px 18px; border-radius:8px; font-size:13px; font-weight:600; }
.aff-card .aff-btn:hover { opacity:.9; }
.aff-card .aff-note { font-size:11px; color:var(--t3); margin-top:6px; }

/* ── CTA Banner ── */
.cta-banner { background:linear-gradient(135deg,rgba(217,119,87,.1),rgba(106,155,204,.1)); border:1px solid rgba(217,119,87,.25); border-radius:16px; padding:36px 32px; text-align:center; margin:48px 0; }
.cta-banner h3 { font-family:var(--display); font-size:26px; font-weight:400; margin-bottom:10px; }
.cta-banner p { color:var(--t2); margin-bottom:24px; }
.cta-banner .btn { display:inline-flex; align-items:center; gap:8px; background:var(--grad); color:#fff; padding:12px 28px; border-radius:10px; font-size:15px; font-weight:600; }
.cta-banner .btn:hover { opacity:.9; }

/* ── Disclosure ── */
.disclosure { font-size:12px; color:var(--t3); background:var(--bg2); border-radius:8px; padding:12px 16px; margin-bottom:40px; border:1px solid var(--border); }

/* ── FAQ ── */
.faq { margin:48px 0; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-q { font-size:16px; font-weight:600; padding:18px 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-q::after { content:'＋'; font-size:18px; color:var(--t3); flex-shrink:0; }
.faq-a { font-size:15px; color:var(--t2); padding-bottom:18px; line-height:1.75; display:none; }

/* ── Blog grid ── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; margin-top:40px; }
.blog-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:28px; transition:transform .25s,box-shadow .25s; }
.blog-card:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(20,20,19,.08); }
.blog-card .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); margin-bottom:12px; }
.blog-card h2 { font-size:18px; font-weight:700; line-height:1.35; margin-bottom:10px; }
.blog-card p { font-size:14px; color:var(--t2); line-height:1.65; margin-bottom:16px; }
.blog-card .read { font-size:13px; font-weight:600; color:var(--orange); display:flex; align-items:center; gap:4px; }
.blog-card .read::after { content:'→'; }

/* ── Footer ── */
.footer { border-top:1px solid var(--border); padding:40px 0; background:var(--bg2); text-align:center; }
.footer p { font-size:13px; color:var(--t3); }
.footer a { color:var(--orange); }

/* ── Responsive ── */
@media(max-width:768px) {
  .nav-links { display:none; }
  .aff-card { flex-direction:column; }
  .cmp-table { font-size:12px; }
  .cmp-table td,.cmp-table th { padding:10px 10px; }
}