/* ===== BrandWorks Guides — shared article styles ===== */
.art{max-width:760px}
.art p,.art li{color:var(--bone-dim);font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.72}
.art p{margin-bottom:18px}
.art p b,.art li b,.art td b{color:var(--bone);font-weight:600}
.art h2{font-weight:800;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.03em;line-height:1.08;color:var(--bone);margin:clamp(44px,6vw,72px) 0 18px}
.art h2 .it,.g-h2 .it{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--accent)}
.art h3{font-weight:700;font-size:1.2rem;color:var(--bone);margin:28px 0 10px}
.art ul,.art ol{list-style:none;display:grid;gap:12px;margin:0 0 18px;padding:0}
.art ul li{position:relative;padding-left:24px}
.art ul li::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:1px;background:var(--accent)}
.art ol{counter-reset:s}
.art ol li{position:relative;padding-left:44px;counter-increment:s}
.art ol li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.1em;font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--accent);line-height:1.2}
.art a{color:var(--accent);text-decoration:none}
.art a:hover{text-decoration:underline}
.art code{font-family:var(--mono);font-size:.86em;background:rgba(236,231,221,.06);border:1px solid var(--line-soft);border-radius:6px;padding:1px 6px;color:var(--bone)}

.g-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.g-meta a{color:var(--bone-dim);text-decoration:none}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);margin:26px 0 10px}
.st{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(18px,2vw,24px)}
.st .n{font-weight:800;font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.04em;line-height:1;color:var(--bone)}
.st .n span{color:var(--accent)}
.st p{margin:10px 0 0;font-size:.88rem;line-height:1.5;color:var(--bone-dim)}
.src{font-family:var(--mono);font-size:.66rem;color:var(--muted);line-height:1.7;margin:6px 0 26px}
.src a{color:var(--bone-dim)}

.callout{border:1px solid rgba(255,90,31,.35);background:var(--accent-soft);border-radius:18px;padding:clamp(20px,2.6vw,30px);margin:26px 0}
.callout p{color:var(--bone);margin-bottom:10px}
.callout p:last-child{margin-bottom:0}
.callout .big{font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:-.04em;line-height:1;color:var(--accent);margin-bottom:12px}

.cmp{width:100%;border-collapse:collapse;margin:20px 0 10px;font-size:.92rem}
.cmp th{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:400;padding:10px 12px;border-bottom:1px solid var(--line)}
.cmp th:last-child{color:var(--accent)}
.cmp td{padding:14px 12px;border-bottom:1px solid var(--line);color:var(--bone-dim);vertical-align:top;line-height:1.5}
.cmp td:first-child{color:var(--bone);font-weight:600;white-space:nowrap}
.cmp td:last-child{color:var(--bone)}

.faq{border-top:1px solid var(--line);margin-top:10px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem;color:var(--bone);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:400;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:12px 0 0}

.cta-row2{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.btn-wa{background:#25D366;color:#0A0A0C;padding:16px 26px}
.btn-wa:hover{transform:translateY(-2px)}

.next{display:block;margin-top:clamp(40px,6vw,64px);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,2.6vw,28px);text-decoration:none;color:inherit;transition:border-color .3s,transform .3s}
.next:hover{border-color:rgba(255,90,31,.45);transform:translateY(-3px)}
.next .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.next h3{font-weight:700;font-size:clamp(1.2rem,2vw,1.5rem);margin:8px 0 6px;color:var(--bone)}
.next p{color:var(--bone-dim);font-size:.92rem;line-height:1.55;margin:0}

@media(max-width:760px){.stats{grid-template-columns:1fr}.cmp{font-size:.84rem}.cmp td:first-child{white-space:normal}}

/* buttons and cards inside articles keep their own colors (not the inline-link accent) */
.art a.btn,.art a.btn:hover,.art a.next,.art a.next:hover{text-decoration:none}
.art a.btn-p{color:#fff}
.art a.btn-wa{color:#0A0A0C}
.art a.next{color:inherit}
/* comparison table wraps on phones instead of clipping */
.cmp{table-layout:fixed}
.cmp th:first-child,.cmp td:first-child{width:31%}
.cmp td,.cmp th{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
@media(max-width:760px){.cmp{font-size:.8rem}.cmp td,.cmp th{padding:12px 6px}}