/* Blog & comparison articles (layered on legal.css) */
/* Header buttons: same look as the home page nav (legal-nav's link colour must not override .btn) */
.legal-nav .links { align-items: center; }
.legal-nav .links a.btn { color: #fff; font-weight: 550; }
.legal-nav .links a.btn-primary { background: var(--accent); }
.legal-nav .links a.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.article { max-width: 820px; }
.article h1 { font-size: 38px; line-height: 1.12; }
.article .lede { font-size: 18px; color: var(--ink-2); margin-top: 14px; line-height: 1.55; }
.article h2 { font-size: 24px; margin: 44px 0 12px; scroll-margin-top: 80px; }
.article h3 { font-size: 18px; margin: 26px 0 8px; }
.crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { color: var(--ink-2); }
.crumbs span { margin: 0 6px; }
.tldr { background: var(--accent-tint); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 26px 0 8px; }
.tldr h2 { margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); }
.tldr p { margin: 0 0 8px; color: var(--ink); }
.tldr p:last-child { margin-bottom: 0; }
.verdict { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; margin: 22px 0; }
.verdict h3 { margin-top: 0; }
.wrapx { overflow-x: auto; margin: 18px 0 22px; border: 1px solid var(--line); border-radius: 12px; }
table.compare { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
table.compare th { text-align: left; background: var(--surface); padding: 11px 14px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); border-bottom: 1px solid var(--line); }
table.compare td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); line-height: 1.5; }
table.compare tr:last-child td { border-bottom: none; }
table.compare td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
table.compare .yes { color: var(--accent-ink); font-weight: 600; }
table.compare .no { color: var(--danger); font-weight: 600; }
table.compare .part { color: var(--amber); font-weight: 600; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.two .card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.two h3 { margin: 0 0 10px; font-size: 16px; }
.two ul { margin: 0; padding-left: 20px; }
.two li { font-size: 14.5px; margin-bottom: 6px; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; }
.cta-box { background: var(--ink); color: #F3F1EA; border-radius: 16px; padding: 28px 30px; margin: 40px 0 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.cta-box h3 { margin: 0 0 6px; color: #fff; font-size: 20px; }
.cta-box p { margin: 0; color: #C9D3CC; font-size: 14.5px; }
.cta-box .btn-primary { background: var(--clay, #9C5334); border-color: var(--clay, #9C5334); }
.disclaimer { font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 30px; }
.note { background: var(--amber-tint); border-radius: 10px; padding: 12px 16px; font-size: 14.5px; color: var(--ink); margin: 14px 0 18px; }
.related { margin-top: 36px; }
.related h2 { font-size: 18px; margin-bottom: 10px; }
.related ul { padding-left: 0; list-style: none; }
.related li { margin-bottom: 6px; }
.related a { color: var(--accent-ink); text-decoration: underline; }
/* index */
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 28px; }
.post { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.post .kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.post h2 { font-size: 18px; margin: 0; }
.post h2 a { color: var(--ink); }
.post p { font-size: 14.5px; margin: 0; flex: 1; }
.post .meta { margin-top: 4px; }
.site-foot { border-top: 1px solid var(--line); padding: 26px 24px; font-size: 13px; color: var(--ink-3); text-align: center; }
.site-foot a { color: var(--ink-2); margin: 0 8px; }
@media (max-width: 720px) { .two { grid-template-columns: 1fr; } .article h1 { font-size: 30px; } }

/* EEAT: author, sources, templates, tables */
.author-box .who b a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2, var(--line)); }
.author-box .who b a:hover { color: var(--accent-ink); }
.author-box { margin-top: 36px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; font-size: 14px; line-height: 1.6; }
.author-box .who { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.author-box .who b { display: block; font-size: 15px; }
.author-box .who span { display: block; font-size: 13px; color: var(--ink-2); }
.author-box .who .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-tint-2); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.author-box p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.sources { margin-top: 28px; }
.sources h2 { font-size: 15px; }
.sources ol { padding-left: 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.sources li { margin-top: 6px; }
.sources a { color: var(--accent-ink); text-decoration: underline; }
pre.tpl { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; margin: 10px 0 18px; }
.article table { width: 100%; border-collapse: collapse; font-size: 14px; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }