/* Blog grid */
.blog-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr)}}

.blog-card{display:block;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s;text-decoration:none;color:inherit}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.06);border-color:var(--color-accent)}
.blog-card-body{padding:var(--space-5)}

/* Blog TOC */
.blog-toc ul{margin:0;padding:0}
.blog-toc a:hover{text-decoration:underline}

/* Blog content styling
 * Note: site-wide reset zeros list-style on all <ul>/<ol>. Blog prose needs
 * markers back, so we re-enable disc/decimal here scoped to .blog-content.
 * Paragraph color/line-height was previously baked into inline styles on every
 * <p>; now centralized here so the markdown processor can emit clean <p> tags.
 */
.blog-content p{color:var(--color-gray-600);margin-bottom:var(--space-4);line-height:var(--line-height-relaxed)}
.blog-content h2{margin-top:var(--space-8);margin-bottom:var(--space-4);scroll-margin-top:80px}
.blog-content h3{margin-top:var(--space-6);margin-bottom:var(--space-3);scroll-margin-top:80px}
.blog-content img{border-radius:var(--radius-lg);margin:var(--space-4) 0}
.blog-content ul{list-style:disc;padding-left:var(--space-6);margin-bottom:var(--space-4)}
.blog-content ol{list-style:decimal;padding-left:var(--space-6);margin-bottom:var(--space-4)}
.blog-content li{margin-bottom:var(--space-2);color:var(--color-gray-600);line-height:var(--line-height-relaxed)}
.blog-content ul ul,.blog-content ol ol,.blog-content ul ol,.blog-content ol ul{margin-top:var(--space-2);margin-bottom:0}
.blog-content strong{color:var(--text-primary)}
/* Tables — for GFM-style markdown comparison tables in blog posts.
 * Mobile: horizontal scroll wrapper so cells don't squish below readability. */
.blog-content .table-wrap{margin:var(--space-5) 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);border:1px solid var(--border)}
.blog-content table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.blog-content thead{background:var(--bg-cream)}
.blog-content th,.blog-content td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--border);vertical-align:top;line-height:var(--line-height-relaxed)}
.blog-content th{font-weight:600;color:var(--text-primary);font-size:var(--text-sm);text-transform:none;letter-spacing:0}
.blog-content td{color:var(--color-gray-600)}
.blog-content tbody tr:last-child td{border-bottom:0}
.blog-content tbody tr:nth-child(even){background:rgba(0,0,0,0.015)}

/* ── Compare & Switch widget ── */
.compare-switch .cmp-head,.compare-switch .cmp-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:center;gap:8px;padding:11px clamp(1rem,3vw,1.5rem)}
.compare-switch .cmp-head{background:#f7f9fc;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.compare-switch .cmp-brand{color:var(--color-accent);text-align:center}
.compare-switch .cmp-rival{color:var(--text-faint);text-align:center}
.compare-switch .cmp-row{border-bottom:1px solid var(--border);font-size:14px}
.compare-switch .cmp-row:nth-child(even){background:rgba(0,0,0,.012)}
.compare-switch .cmp-lab{font-weight:600;color:var(--text-primary);line-height:1.35}
.compare-switch .cmp-h,.compare-switch .cmp-o{display:flex;gap:6px;align-items:flex-start;line-height:1.4}
.compare-switch .cmp-h{color:var(--text-body)}
.compare-switch .cmp-o{color:var(--text-faint)}
.compare-switch .cmp-h svg,.compare-switch .cmp-o svg{flex-shrink:0;margin-top:1px}
.compare-switch .cmp-why{border-bottom:1px solid var(--border)}
.compare-switch .cmp-why summary{cursor:pointer;padding:13px clamp(1rem,3vw,1.5rem);font-weight:600;color:var(--color-accent);font-size:14px;list-style:none}
.compare-switch .cmp-why summary::-webkit-details-marker{display:none}
.compare-switch .cmp-why p{margin:0;padding:0 clamp(1rem,3vw,1.5rem) 16px;color:var(--text-body);line-height:1.65;font-size:14px}
.compare-switch .cmp-rec{padding:clamp(1rem,3vw,1.4rem) clamp(1rem,3vw,1.5rem);background:linear-gradient(135deg,rgba(22,163,74,0.05),rgba(22,163,74,0.09));color:var(--text-body);line-height:1.6;font-size:14.5px}
.compare-switch .cmp-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.compare-switch .cmp-cta{background:var(--color-accent);color:#fff;font-weight:700;padding:11px 20px;border-radius:var(--radius-full);text-decoration:none;font-size:14px}
.compare-switch .cmp-cta2{border:2px solid var(--color-accent);color:var(--color-accent);font-weight:700;padding:9px 18px;border-radius:var(--radius-full);text-decoration:none;font-size:14px}
@media(max-width:560px){
  .compare-switch .cmp-head,.compare-switch .cmp-row{grid-template-columns:1.35fr .9fr .9fr;gap:6px;padding:10px 12px;font-size:12.5px}
  .compare-switch .cmp-h span,.compare-switch .cmp-o span{font-size:12.5px}
  .compare-switch .cmp-cta,.compare-switch .cmp-cta2{flex:1;text-align:center}
}

/* Compare widget — interactive goal toggle + FAQ */
.compare-switch .cmp-goal{padding:14px clamp(1rem,3vw,1.5rem);border-bottom:1px solid var(--border)}
.compare-switch .cmp-goal-q{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);margin-bottom:8px}
.compare-switch .cmp-goal input{position:absolute;opacity:0;pointer-events:none}
.compare-switch .cmp-goal-tabs{display:inline-flex;background:#eef1f6;border-radius:var(--radius-full);padding:3px;gap:2px}
.compare-switch .cmp-goal-tabs label{cursor:pointer;padding:7px 15px;border-radius:var(--radius-full);font-size:13px;font-weight:600;color:var(--text-muted);transition:.15s}
.compare-switch .cmp-goal input:checked+label{background:#fff;color:var(--color-accent);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.compare-switch .cmp-v{margin:12px 0 0;line-height:1.6;font-size:14px;color:var(--text-body);display:none}
.compare-switch .cmp-goal input#\34 :checked{}/* no-op guard */
.compare-switch .cmp-goal :is(input[id$="-now"]:checked)~.cmp-v-now{display:block}
.compare-switch .cmp-goal :is(input[id$="-gone"]:checked)~.cmp-v-gone{display:block}
.compare-switch .cmp-faq{padding:clamp(1rem,3vw,1.4rem) clamp(1rem,3vw,1.5rem);border-top:1px solid var(--border)}
.compare-switch .cmp-faq h4{margin:0 0 10px;font-size:15px}
.compare-switch .cmp-faq details{border-bottom:1px solid var(--border)}
.compare-switch .cmp-faq summary{cursor:pointer;padding:10px 0;font-weight:600;font-size:14px;color:var(--text-primary);list-style:none}
.compare-switch .cmp-faq summary::-webkit-details-marker{display:none}
.compare-switch .cmp-faq summary::after{content:"+";float:right;color:var(--color-accent);font-weight:700}
.compare-switch .cmp-faq details[open] summary::after{content:"–"}
.compare-switch .cmp-faq p{margin:0 0 12px;color:var(--text-body);line-height:1.6;font-size:14px}

/* A11y: blog body links must not rely on color alone */
.blog-content a{text-decoration:underline;text-underline-offset:2px}
.blog-content h1 a,.blog-content h2 a,.blog-content h3 a{text-decoration:none}