/* =====================================================================
   content.css — client feedback, blog, article and privacy pages (20 Oct 2026)
   Uses only the shared tokens from styles.css (type scale, radius, colour).
   ===================================================================== */

/* placeholders: visible on purpose, must be replaced before go-live */
.ph { display:inline-block; padding:1px 8px; border:1px dashed var(--brand); border-radius:6px; background:rgba(249,155,49,.08); color:var(--brand-text); font-size:.92em; }
.is-ph { position:relative; border-style:dashed !important; border-color:var(--brand) !important; }
.is-ph::after { content:"Placeholder"; position:absolute; top:10px; right:10px; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--brand-text); background:var(--paper); border:1px solid var(--brand); border-radius:var(--radius-pill); padding:2px 8px; z-index:2; }

/* breadcrumbs */
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:22px; }
.crumbs a { color:var(--text-muted); }
.crumbs a:hover { color:var(--brand-text); }
.crumbs span[aria-hidden] { color:var(--line-strong); }
.crumbs [aria-current] { color:var(--ink); font-weight:500; }

/* shared page-hero */
.cf-hero h1, .blog-hero h1, .post-head h1 { font-size:var(--fs-h1); line-height:1.08; letter-spacing:-.03em; margin:14px 0 0; text-wrap:balance; }
.cf-hero .lede, .blog-hero .lede { font-size:var(--fs-lede-lg); line-height:1.6; color:var(--text-muted); margin:18px 0 0; max-width:620px; }
.cf-hero .hero-ctas { margin-top:30px; }
.cf-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:56px; align-items:end; }
.cf-stat { display:flex; flex-direction:column; gap:4px; padding:26px 30px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--wash-cream); min-width:260px; }
.cf-stat .num { font-family:var(--font-display); font-size:var(--fs-stat); font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--ink); }
.cf-stat .lbl { font-size:var(--fs-ui); font-weight:600; color:var(--ink); }
.cf-stat .sub { font-size:var(--fs-sm); color:var(--text-muted); }

/* 1. video testimonials */
.vt-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; }
.vt-side { display:flex; flex-direction:column; gap:24px; }
.vt-card { margin:0; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); overflow:hidden; display:flex; flex-direction:column; }
.vt-card .video-card { border:0; border-radius:0; box-shadow:none; }
.vt-card figcaption { display:flex; flex-direction:column; gap:4px; padding:16px 20px 18px; }
.vt-sum { font-weight:700; font-size:var(--fs-ui); color:var(--ink); line-height:1.35; }
.vt-feature .vt-sum { font-size:var(--fs-lg); }
.vt-who { font-size:var(--fs-sm); color:var(--text-muted); }
.vt-empty { aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:var(--wash-cream); color:var(--text-muted); font-size:var(--fs-sm); }
.vt-empty .icon { width:28px; height:28px; color:var(--brand); }

/* 2. spotlight */
.sp-card { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-panel); overflow:hidden; background:var(--paper); }
.sp-media { min-height:320px; background:var(--wash-cream); }
.sp-media img { width:100%; height:100%; object-fit:cover; display:block; }
.sp-photo-ph { height:100%; display:flex; align-items:center; justify-content:center; padding:24px; }
.sp-quote { margin:0; padding:48px 52px; display:flex; flex-direction:column; justify-content:center; gap:26px; position:relative; }
.sp-quote::before { content:"\201C"; position:absolute; top:18px; left:44px; font-family:Georgia, serif; font-size:96px; line-height:1; color:var(--brand); opacity:.25; }
.sp-quote p { margin:0; font-family:var(--font-display); font-size:var(--fs-2xl); line-height:1.45; font-weight:500; color:var(--ink); letter-spacing:-.01em; position:relative; }
.sp-quote footer { display:flex; flex-direction:column; gap:4px; font-size:var(--fs-md); color:var(--text-muted); }
.sp-quote footer strong { font-size:var(--fs-ui); color:var(--ink); }

/* 3. results */
.rs-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.rs-card { display:flex; flex-direction:column; gap:18px; padding:26px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); }
.rs-top { display:flex; flex-direction:column; gap:4px; }
.rs-co { font-weight:700; font-size:var(--fs-ui); color:var(--ink); }
.rs-proc { font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.rs-metric { display:flex; flex-direction:column; gap:4px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.rs-val { font-family:var(--font-display); font-size:var(--fs-4xl); font-weight:800; letter-spacing:-.02em; color:var(--brand-text); line-height:1.1; }
.rs-lbl { font-size:var(--fs-sm); color:var(--text-muted); }
.rs-story { margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 14px; font-size:var(--fs-md); line-height:1.5; }
.rs-story dt { font-weight:700; color:var(--ink); }
.rs-story dd { margin:0; color:var(--text-muted); }

/* 4. text testimonials */
.tt-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.tt-card { margin:0; display:flex; flex-direction:column; gap:16px; padding:28px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); }
.tt-topic { align-self:flex-start; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--brand-text); background:var(--brand-tint); border-radius:var(--radius-pill); padding:4px 10px; }
.tt-card blockquote { margin:0; flex:1; }
.tt-card blockquote p { margin:0; font-size:var(--fs-base); line-height:1.65; color:var(--text); }
.tt-card figcaption { display:flex; align-items:center; gap:12px; font-size:var(--fs-sm); color:var(--text-muted); }
.tt-card figcaption > span:last-child { display:flex; flex-direction:column; gap:2px; }
.tt-card figcaption strong { font-size:var(--fs-md); color:var(--ink); }
.tt-av { flex:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-sm); color:var(--brand-text); background:var(--brand-tint); }

/* 5. whatsapp */
.wa-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.wa-shot { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:24px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); font-size:var(--fs-md); color:var(--ink); }
.wa-shot .icon { width:34px; height:34px; color:#25D366; }
.wa-shot small { font-size:var(--fs-xs); color:var(--text-muted); }

/* 6. logo wall */
.logo-wall { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.logo-wall li { height:84px; display:flex; align-items:center; justify-content:center; padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); text-align:center; font-weight:600; font-size:var(--fs-sm); color:var(--text-muted); }
.logo-wall img { width:auto; height:auto; max-width:100%; max-height:52px; object-fit:contain; filter:grayscale(1); opacity:.8; transition:filter .2s, opacity .2s; }
.logo-wall li:hover img { filter:none; opacity:1; }

/* closing CTA band */
.cf-cta { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:56px; row-gap:24px; align-items:center; padding:44px 48px; border-radius:var(--radius-panel); background:var(--ink); color:#fff; }
.cf-cta h2 { color:#fff; font-size:var(--fs-h2-sm); line-height:1.2; margin:0; text-wrap:balance; }
.cf-cta p { color:rgba(255,255,255,.7); font-size:var(--fs-ui); line-height:1.6; margin:10px 0 0; max-width:560px; }
.cf-cta-btns { display:flex; flex-wrap:wrap; gap:12px; justify-self:end; }
.cf-cta .btn-outline { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.cf-cta .btn-outline:hover { border-color:var(--brand); color:var(--brand-light); }

/* blog index */
.blog-list { padding-top:0; }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.post-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.post-card { border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); transition:border-color .2s, box-shadow .2s, transform .2s; }
.post-card:hover { border-color:var(--brand); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.post-card-link { display:flex; flex-direction:column; gap:12px; height:100%; padding:26px; color:inherit; }
.post-card-link:hover { color:inherit; }
.post-card h2, .post-card h3 { margin:0; font-size:var(--fs-xl); line-height:1.3; color:var(--ink); letter-spacing:-.01em; }
.post-card p { margin:0; flex:1; font-size:var(--fs-md); line-height:1.6; color:var(--text-muted); }
.post-cat { align-self:flex-start; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--brand-text); }
.post-meta { display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-sm); color:var(--text-muted); padding-top:14px; border-top:1px solid var(--line); }
.post-meta .arrow .icon { width:16px; height:16px; color:var(--brand-text); }

/* article */
.post-wrap { max-width:780px; }
.post-head { margin-bottom:34px; }
.post-byline { margin-top:16px; font-size:var(--fs-sm); color:var(--text-muted); }
.prose { font-size:var(--fs-ui); line-height:1.75; color:var(--text); }
.prose > * + * { margin-top:18px; }
.prose p, .prose ul, .prose ol { margin-bottom:0; }
.prose h2 { font-size:var(--fs-3xl); line-height:1.25; letter-spacing:-.02em; margin:48px 0 0; color:var(--ink); }
.prose h3 { font-size:var(--fs-xl); line-height:1.35; margin:32px 0 0; color:var(--ink); }
.prose ul, .prose ol { padding-left:22px; }
.prose ul { list-style:disc; }
.prose ol { list-style:decimal; }
.prose li::marker { color:var(--brand); }
.prose li + li { margin-top:8px; }
.prose a { color:var(--brand-text); text-decoration:underline; text-underline-offset:3px; }
.formula { padding:18px 22px; border-left:4px solid var(--brand); background:var(--wash-cream); border-radius:0 var(--radius) var(--radius) 0; font-family:var(--font-mono); font-size:var(--fs-md); line-height:1.6; color:var(--ink); }
.post-table { width:100%; border-collapse:collapse; font-size:var(--fs-md); line-height:1.5; }
.post-table th, .post-table td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.post-table thead th { font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); border-bottom:2px solid var(--line-strong); white-space:nowrap; }
.post-note { font-size:var(--fs-sm); color:var(--text-muted); font-style:italic; }
.post-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:52px; padding:26px 28px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--wash-cream); }
.post-cta > div { display:flex; flex-direction:column; gap:4px; }
.post-cta strong { font-size:var(--fs-lg); color:var(--ink); }
.post-cta span { font-size:var(--fs-md); color:var(--text-muted); }

@media (max-width:980px) {
  .rs-grid, .post-grid { grid-template-columns:minmax(0,1fr); }
  .vt-grid, .sp-card, .cf-hero-grid { grid-template-columns:minmax(0,1fr); }
  .vt-side { flex-direction:row; flex-wrap:wrap; }
  .vt-side .vt-card { flex:1 1 240px; }
  .cf-stat { min-width:0; align-self:start; }
}
@media (max-width:720px) {
  .tt-grid, .wa-grid, .post-grid.two { grid-template-columns:minmax(0,1fr); }
  .wa-shot { min-height:180px; }
  .post-table { display:block; overflow-x:auto; }
  .sp-quote { padding:40px 24px 28px; }
  .sp-quote::before { left:20px; top:8px; }
  .sp-media { min-height:200px; }
  .cf-cta { grid-template-columns:minmax(0,1fr); padding:32px 24px; }
  .cf-cta-btns { justify-self:start; }
  .cf-cta-btns .btn { width:100%; }
  .post-cta { flex-direction:column; align-items:flex-start; }
}

/* industries + integrations pages (21 Oct 2026) */
.cf-hero .ind-mini-grid { margin-top:34px; }
.proc-list { display:grid; gap:20px; }
.proc-row { display:grid; grid-template-columns:120px minmax(0,1fr); gap:28px; padding:28px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); scroll-margin-top:120px; }
.proc-ill { width:120px; height:120px; border-radius:var(--radius-card); background:var(--brand-tint); display:flex; align-items:center; justify-content:center; }
.proc-ill svg { width:72px; height:72px; }
.proc-copy h3 { margin:0; font-size:var(--fs-2xl); }
.proc-copy p { margin:10px 0 0; font-size:var(--fs-base); line-height:1.65; color:var(--text-muted); max-width:720px; }
.proc-copy ul { list-style:none; margin:16px 0 18px; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; }
.proc-copy li { display:flex; gap:8px; font-size:var(--fs-md); line-height:1.45; }
.proc-copy li .icon { width:16px; height:16px; color:var(--brand); flex:none; margin-top:2px; }
.metal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.metal-card { padding:22px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); scroll-margin-top:120px; }
.metal-card h3 { margin:0 0 8px; font-size:var(--fs-lg); }
.metal-card p { margin:0; font-size:var(--fs-md); line-height:1.6; color:var(--text-muted); }
.ind-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 20px; }
.ind-list li { display:flex; gap:10px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); font-size:var(--fs-md); font-weight:500; }
.ind-list li .icon { width:16px; height:16px; color:var(--brand); flex:none; }
.why-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.why-card { padding:24px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); }
.why-card h3 { margin:0 0 8px; font-size:var(--fs-lg); }
.why-card p { margin:0; font-size:var(--fs-md); line-height:1.6; color:var(--text-muted); }
@media (max-width:900px){ .metal-grid, .ind-list, .why-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .proc-copy ul { grid-template-columns:minmax(0,1fr); } }
@media (max-width:620px){ .metal-grid, .ind-list, .why-grid { grid-template-columns:minmax(0,1fr); } .proc-row { grid-template-columns:minmax(0,1fr); padding:22px; } .proc-ill { width:88px; height:88px; } .proc-ill svg { width:52px; height:52px; } }

/* ---------------------------------------------------------------- build vs buy page (21 Oct 2026) */
.bvb-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; align-items:center; }
.bvb-hero .hero-ctas { margin-top:28px; }
.bvb-verdict { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; background:var(--paper); box-shadow:0 14px 34px rgba(10,10,10,.08); }
.bvb-verdict > div { padding:28px 24px; }
.bvb-verdict .b { background:#F9E4DE; } .bvb-verdict .i { background:#E6F2EB; }
.bvb-verdict small { display:block; font-family:var(--font-mono); font-size:var(--fs-2xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.bvb-verdict strong { display:block; font-family:var(--font-display); font-size:var(--fs-4xl); font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.1; margin:10px 0 6px; }
.bvb-verdict .b strong { color:#B4442C; } .bvb-verdict .i strong { color:#2E7D32; }
.bvb-verdict span { font-size:var(--fs-sm); color:var(--text-muted); line-height:1.45; }
.bvb-table { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); }
.bvb-table table { width:100%; border-collapse:collapse; font-size:var(--fs-md); line-height:1.5; }
.bvb-table th, .bvb-table td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
.bvb-table thead th { font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); background:var(--paper-alt); white-space:nowrap; }
.bvb-table .num { text-align:right; white-space:nowrap; }
.bvb-table tr.total td { font-weight:700; color:var(--ink); border-top:2px solid var(--ink); }
.bvb-table tr.icast td { background:#E6F2EB; font-weight:700; color:var(--ink); }
.bvb-table tbody th { font-weight:600; color:var(--ink); white-space:nowrap; }
.bvb-side td:last-child { background:#FBFDF9; color:var(--ink); font-weight:500; }
.bvb-note { margin:12px 0 0; font-size:var(--fs-sm); color:var(--text-muted); }
.bvb-panel { border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); padding:24px; }
.bvb-diagram { width:100%; height:auto; display:block; }
.bvb-grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.bvb-card { border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); padding:24px; }
.bvb-card h3 { margin:0 0 6px; font-size:var(--fs-lg); }
.bvb-card p { margin:0; font-size:var(--fs-md); line-height:1.6; color:var(--text-muted); }
.bvb-ico { width:44px; height:44px; border-radius:var(--radius); background:var(--brand-tint); display:grid; place-items:center; margin-bottom:14px; }
.bvb-ico svg { width:22px; height:22px; stroke:var(--brand); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bvb-pill { display:inline-block; font-size:var(--fs-xs); font-weight:600; padding:3px 10px; border-radius:var(--radius-pill); white-space:nowrap; }
.bvb-pill.ok { background:#E6F2EB; color:#2E7D32; } .bvb-pill.mid { background:#FFF1E0; color:var(--brand-text); } .bvb-pill.hard { background:#F9E4DE; color:#B4442C; }
.bvb-calc { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:24px; }
.bvb-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.bvb-fields label { display:block; font-size:var(--fs-sm); font-weight:500; color:var(--ink); margin-bottom:4px; }
.bvb-fields input, .bvb-fields select { width:100%; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper-alt); color:var(--ink); font:inherit; font-size:var(--fs-md); }
.bvb-fields input:focus, .bvb-fields select:focus { outline:2px solid var(--brand); outline-offset:1px; }
.bvb-panel > h3 { margin:0; font-size:var(--fs-xl); }
.bvb-bars { display:grid; gap:22px; margin-top:16px; }
.bvb-barrow h3 { display:flex; justify-content:space-between; gap:12px; margin:0; font-size:var(--fs-ui); }
.bvb-track { display:flex; height:34px; border-radius:8px; overflow:hidden; background:var(--paper-alt); margin-top:8px; }
.bvb-track span { height:100%; transition:width .4s ease; }
.bvb-legend { display:flex; flex-wrap:wrap; gap:10px 16px; font-size:var(--fs-xs); color:var(--text-muted); margin-top:18px; }
.bvb-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:middle; }
.bvb-result { margin:24px 0 0; padding:18px 20px; border-radius:var(--radius); background:#E6F2EB; color:var(--ink); font-weight:600; }
.bvb-grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:start; }
@media (max-width:900px){ .bvb-hero, .bvb-calc, .bvb-grid2 { grid-template-columns:minmax(0,1fr); } .bvb-grid3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .bvb-grid3, .bvb-fields, .bvb-verdict { grid-template-columns:minmax(0,1fr); } .bvb-table th, .bvb-table td { padding:12px; } .bvb-table tbody th { white-space:normal; } }
@media (prefers-reduced-motion:reduce){ .bvb-track span { transition:none; } }
/* Build vs Buy v2: tagline, plan picker, hidden-cost icons, mobile callout */
.bvb-tag { margin:10px 0 14px; font-size:var(--fs-xl,1.35rem); font-weight:600; line-height:1.35; color:var(--brand-text); }
.bvb-plan { grid-column:1/-1; padding-bottom:14px; border-bottom:1px solid var(--line); }
.bvb-plan select { font-weight:600; background:var(--brand-tint); border-color:var(--brand); }
.bvb-plan .bvb-note { margin:8px 0 0; }
.bvb-ico.warn { background:#FBE9E5; }
.bvb-ico.warn svg { stroke:#B4442C; }
.bvb-callout { display:flex; gap:18px; align-items:flex-start; margin-top:24px; border-left:4px solid var(--brand); }
.bvb-callout .bvb-ico { flex:0 0 44px; margin:0; }
.bvb-callout h3 { margin:0 0 6px; font-size:var(--fs-lg); }
.bvb-callout p { margin:0; color:var(--text-muted); line-height:1.6; }
/* Build vs Buy: compact spacing (21 Oct 2026) */
.bvb .section { padding:56px 28px; }
.bvb .section.cf-hero { padding-top:32px; padding-bottom:48px; }
.bvb + .section { padding-top:8px; padding-bottom:64px; }
.bvb .section-head { max-width:none; margin:0 0 28px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:48px; align-items:end; }
.bvb .section-head > .eyebrow, .bvb .section-head > h2 { grid-column:1; }
.bvb .section-head > h2 { margin-top:10px; text-wrap:balance; }
.bvb .section-head > p { grid-column:2; grid-row:1 / span 2; align-self:end; margin:0; font-size:var(--fs-md); }
.bvb .bvb-grid2 .section-head { display:block; margin-bottom:20px; }
.bvb .bvb-grid2 .section-head > p { margin-top:12px; }
.bvb .bvb-callout { margin-top:20px; }
@media (max-width:900px){
  .bvb .section { padding:40px 20px; }
  .bvb .section.cf-hero { padding-top:20px; padding-bottom:36px; }
  .bvb .section-head { display:block; margin-bottom:20px; }
  .bvb .section-head > p { margin-top:10px; }
}
/* Build vs Buy v3: ICAST answer line, "still won't have" list, callout pair, overrun result */
.bvb-card .bvb-icast { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); color:var(--ink); }
.bvb-card .bvb-icast strong { color:var(--green,#2E7D32); }
.bvb-card p strong { color:var(--ink); font-weight:600; }
.bvb-miss { margin-top:20px; padding:20px 24px; border:1px solid #F1C9BE; border-radius:var(--radius-card); background:#FDF3F0; }
.bvb-miss h3 { margin:0 0 12px; font-size:var(--fs-lg); }
.bvb-miss ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.bvb-miss li { padding:6px 12px 6px 28px; border-radius:var(--radius-pill); background:#fff; border:1px solid #F1C9BE; font-size:var(--fs-sm); font-weight:500; position:relative; }
.bvb-miss li::before { content:"\00D7"; position:absolute; left:11px; top:3px; color:#B4442C; font-weight:700; font-size:16px; }
.bvb-miss p { margin:12px 0 0; font-size:var(--fs-sm); color:var(--text-muted); }
.bvb-callouts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:20px; }
.bvb-callouts .bvb-callout { margin-top:0; }
.bvb-callout p strong { color:var(--ink); font-weight:600; }
.bvb-result.alt { margin-top:10px; background:#FDF3F0; font-weight:500; }
@media (max-width:900px){ .bvb-callouts { grid-template-columns:minmax(0,1fr); } }
/* Build vs Buy v4: step-by-step calculator in a dialog */
.bvb-cta-inline { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; padding:18px 22px; border-radius:var(--radius-card); background:var(--brand-tint); }
.bvb-cta-inline p { margin:0; }
.bvb-dlg { width:min(780px, calc(100vw - 32px)); max-height:calc(100vh - 32px); border:0; border-radius:var(--radius-panel); padding:0; background:var(--paper); color:var(--ink); box-shadow:0 24px 64px rgba(0,0,0,.28); }
.bvb-dlg::backdrop { background:rgba(10,10,10,.55); }
.bvb-dlg-in { position:relative; padding:28px 32px; max-height:calc(100vh - 32px); overflow:auto; }
.bvb-dlg h2 { margin:8px 0 0; font-size:var(--fs-xl); padding-right:48px; }
.bvb-x { position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; }
.bvb-stepn { margin:14px 0 6px; font-size:var(--fs-sm); color:var(--text-muted); }
.bvb-prog { height:4px; border-radius:4px; background:var(--paper-alt); margin-bottom:20px; }
.bvb-prog span { display:block; height:100%; width:0; border-radius:4px; background:var(--brand); transition:width .25s; }
.bvb-step { border:0; margin:0; padding:0; min-width:0; }
.bvb-step legend { padding:0; margin-bottom:14px; font-size:var(--fs-lg); font-weight:700; color:var(--ink); }
.bvb-chips { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.bvb-chip { position:relative; display:block; }
.bvb-chip input { position:absolute; opacity:0; width:1px; height:1px; }
.bvb-chip span { display:block; height:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:12px; background:var(--paper); cursor:pointer; transition:border-color .15s, background .15s; }
.bvb-chip span:hover { border-color:var(--brand); }
.bvb-chip b { display:block; font-size:var(--fs-md); }
.bvb-chip small { display:block; margin-top:2px; font-size:var(--fs-xs); color:var(--text-muted); }
.bvb-chip input:checked + span { border-color:var(--brand); background:var(--brand-tint); }
.bvb-chip input:focus-visible + span { outline:2px solid var(--brand); outline-offset:2px; }
.bvb-hint { margin:12px 0 0; font-size:var(--fs-sm); color:var(--text-muted); }
.bvb-nav { display:flex; justify-content:space-between; gap:12px; margin:20px 0; }
.bvb-nav button:disabled { opacity:.4; cursor:default; }
.bvb-live { padding-top:18px; border-top:1px solid var(--line); }
.bvb-live > h3 { margin:0; font-size:var(--fs-md); }
.bvb-adv { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.bvb-adv summary { cursor:pointer; font-weight:600; color:var(--brand-text); }
.bvb-adv .bvb-fields { margin-top:14px; }
@media (max-width:620px){
  .bvb-dlg { width:100vw; max-width:100vw; max-height:100vh; height:100vh; margin:0; border-radius:0; }
  .bvb-dlg-in { padding:20px 16px; max-height:100vh; }
  .bvb-chips { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.bvb-table td.bvb-in { font-weight:600; color:var(--green,#2E7D32); white-space:nowrap; }
.bvb .section-head > .eyebrow-pill { grid-column:1; justify-self:start; }

/* ===================================================================
   BLOG REDESIGN (23 Oct 2026) — Meltix-style image cards and article page
   =================================================================== */
/* listing hero: dark banner with a soft orange glow and fine diagonal lines */
.bhero { position:relative; overflow:hidden; padding:56px 28px 60px; background:radial-gradient(900px 380px at 85% 0%, rgba(249,155,49,.22), transparent 65%), #0A0A0A; color:#fff; }
.bhero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.08; background:repeating-linear-gradient(125deg, #fff 0 1px, transparent 1px 22px); }
.bhero .wrap { position:relative; }
.bhero .crumbs, .bhero .crumbs a { color:rgba(255,255,255,.65); }
.bhero h1 { color:#fff; font-size:clamp(32px,4vw,48px); line-height:1.1; margin:14px 0 0; letter-spacing:-.02em; }
.bhero p { color:rgba(255,255,255,.75); font-size:var(--fs-ui); line-height:1.6; margin:12px 0 0; max-width:640px; }
.blist { padding-top:36px; }
.bfilter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.bfilter button { font:inherit; font-size:var(--fs-sm); font-weight:600; padding:8px 16px; border-radius:var(--radius-pill); border:1px solid var(--line-strong); background:var(--paper); color:var(--text-muted); cursor:pointer; }
.bfilter button.on, .bfilter button:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
/* image card */
.bgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.bgrid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.bcard { border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s; }
.bcard:hover { transform:translateY(-3px); box-shadow:0 16px 36px rgba(10,10,10,.10); border-color:var(--brand); }
.bcard[hidden] { display:none; }
.bcard-link { display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; }
.bcard-link:hover { color:inherit; }
.bcover { position:relative; aspect-ratio:16/9; overflow:hidden; background:#1a1a1a; }
.bcover > img:first-child { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.bcard:hover .bcover > img:first-child { transform:scale(1.04); }
.bc-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.30) 45%, rgba(10,10,10,.72) 100%); }
.bc-logo { position:absolute; top:14px; left:16px; width:auto; height:22px; opacity:.95; }
.bc-tag { position:absolute; left:0; bottom:18px; max-width:88%; padding:9px 16px 9px 16px; background:#B3610B; color:#fff; font-weight:800; font-size:var(--fs-sm); letter-spacing:.04em; text-transform:uppercase; line-height:1.2; border-radius:0 8px 8px 0; }
.bcard-body { display:flex; flex-direction:column; gap:8px; padding:16px 20px 20px; flex:1; }
.bcard-cat { align-self:flex-start; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--brand-text); }
.bcard-body h2, .bcard-body h3 { margin:0; font-size:var(--fs-lg); line-height:1.35; color:var(--ink); letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(1.35em * 3); }
.bcard-meta { margin-top:auto; font-size:var(--fs-xs); color:var(--text-muted); }
@media (max-width:980px){ .bgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .bgrid, .bgrid.two { grid-template-columns:minmax(0,1fr); } .bhero { padding:40px 20px 44px; } }
/* article page */
.p2-head { padding:30px 28px 0; background:linear-gradient(180deg, var(--wash-cream), var(--paper)); }
.p2-hwrap { max-width:1120px; }
.p2-head h1 { font-size:clamp(30px,3.6vw,44px); line-height:1.12; margin:10px 0 0; letter-spacing:-.02em; max-width:900px; }
.p2-byline { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:18px; font-size:var(--fs-sm); color:var(--text-muted); }
.p2-av { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:var(--fs-sm); color:#fff; background:radial-gradient(circle at 40% 35%, var(--brand-light), var(--brand-deep)); }
.p2-auth { display:flex; flex-direction:column; line-height:1.25; } .p2-auth b { color:var(--ink); } .p2-auth small { font-size:var(--fs-xs); }
.p2-li { display:inline-flex; width:32px; height:32px; border-radius:8px; align-items:center; justify-content:center; background:#0A66C2; color:#fff; }
.p2-dates { padding-left:14px; border-left:1px solid var(--line-strong); }
.p2-cover { margin-top:22px; }
.p2-cover .bcover { border-radius:var(--radius-panel); aspect-ratio:21/9; }
.p2-cover .bc-logo { height:30px; top:20px; left:24px; }
.p2-cover .bc-tag { font-size:var(--fs-lg); bottom:28px; padding:12px 22px; }
.p2-grid { max-width:1120px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:start; padding-top:32px; padding-bottom:56px; }
.p2-main { min-width:0; max-width:740px; }
.p2-answer { border-left:4px solid var(--brand); background:var(--brand-tint); border-radius:0 var(--radius) var(--radius) 0; padding:14px 18px; margin-bottom:16px; }
.p2-answer .k { font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--brand-text); }
.p2-answer p { margin:6px 0 0; font-size:var(--fs-ui); line-height:1.6; color:var(--ink-soft); }
.p2-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 28px; }
.p2-facts > div { border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; background:var(--paper); }
.p2-facts dt { font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute3); }
.p2-facts dd { margin:4px 0 0; font-size:var(--fs-sm); font-weight:600; color:var(--ink); line-height:1.4; }
.p2-main .prose h2 { scroll-margin-top:110px; }
.p2-faq { margin-top:40px; display:flex; flex-direction:column; gap:10px; }
.p2-faq h2 { font-size:var(--fs-2xl); margin:0 0 6px; scroll-margin-top:110px; }
.p2-side { position:sticky; top:104px; display:flex; flex-direction:column; gap:14px; }
.p2-box { border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); padding:16px 18px; }
.p2-bt { font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute3); margin-bottom:10px; }
.p2-bt.sm { margin:16px 0 8px; }
.p2-toc { margin:0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:7px; font-size:var(--fs-sm); line-height:1.4; }
.p2-toc a { color:var(--ink-soft); } .p2-toc a:hover { color:var(--brand-text); }
.p2-latest { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.p2-latest a { display:grid; grid-template-columns:84px minmax(0,1fr); gap:10px; align-items:center; color:var(--ink); font-size:var(--fs-sm); font-weight:600; line-height:1.35; }
.p2-latest img { width:84px; height:52px; object-fit:cover; border-radius:8px; }
.p2-latest span { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.p2-follow { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.p2-follow a { display:flex; align-items:center; justify-content:center; gap:7px; padding:9px 10px; border-radius:var(--radius); color:#fff; font-weight:700; font-size:var(--fs-sm); }
.p2-follow .yt { background:#FF0000; } .p2-follow .li { background:#0A66C2; }
.p2-share { display:flex; gap:8px; } .p2-share a { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line-strong); color:var(--ink-soft); } .p2-share a:hover { border-color:var(--brand); color:var(--brand-text); }
.p2-demo { display:flex; flex-direction:column; gap:6px; background:radial-gradient(400px 200px at 100% 0%, rgba(249,155,49,.18), transparent 70%), var(--paper); border-color:var(--brand); }
.p2-demo b { color:var(--ink); } .p2-demo span { font-size:var(--fs-sm); color:var(--text-muted); } .p2-demo .btn { margin-top:6px; justify-content:center; }
.p2-more { padding-top:56px; padding-bottom:56px; }
/* in-article graphics */
.post-callout { border:1px solid var(--line-strong); border-left:4px solid var(--red); border-radius:0 var(--radius) var(--radius) 0; padding:12px 16px; background:var(--paper); }
.post-table.checklist td:first-child { width:36px; font-family:var(--font-mono); color:var(--brand-text); font-weight:700; }
.post-table.checklist td[rowspan] { font-weight:700; color:var(--ink); background:var(--paper-tint); vertical-align:middle; }
.score-bands { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }
.score-bands .sb { border-radius:var(--radius); padding:12px 14px; display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sm); line-height:1.45; }
.score-bands b { font-size:var(--fs-2xl); }
.sb.good { background:rgba(28,124,79,.10); color:#14583a; } .sb.mid { background:rgba(249,155,49,.16); color:#7a4307; } .sb.low { background:rgba(192,71,47,.10); color:#8a2f1d; }
.cost-bars { display:flex; flex-direction:column; gap:6px; margin:18px 0; }
.cost-bars > div { position:relative; display:flex; justify-content:space-between; padding:7px 12px; border-radius:8px; background:var(--paper-tint); font-size:var(--fs-sm); overflow:hidden; }
.cost-bars > div::before { content:""; position:absolute; left:0; top:0; bottom:0; width:var(--w); background:linear-gradient(90deg, rgba(249,155,49,.55), rgba(249,155,49,.25)); }
.cost-bars span, .cost-bars b { position:relative; }
.post-fig { margin:22px 0; } .post-fig img { width:100%; height:auto; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 28px rgba(10,10,10,.08); }
.post-fig figcaption { font-size:var(--fs-xs); color:var(--text-muted); margin-top:8px; }
@media (max-width:980px){ .p2-grid { grid-template-columns:minmax(0,1fr); gap:28px; } .p2-side { position:static; } .p2-facts, .score-bands { grid-template-columns:minmax(0,1fr); } .p2-cover .bcover { aspect-ratio:16/9; } .p2-cover .bc-tag { font-size:var(--fs-sm); bottom:16px; } }
.post-cta .btn { white-space:nowrap; flex:none; }
/* lighter, sharper cover overlay (stock photos) */
.bc-shade { background:linear-gradient(180deg, rgba(10,10,10,.42) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0) 55%, rgba(10,10,10,.55) 100%); }
/* ===== Blog listing v2 (23 Oct 2026): light animated banner, featured post, 2 columns + sidebar ===== */
.bhero { position:relative; overflow:hidden; padding:54px 28px 58px; color:var(--ink); text-align:center;
  background:radial-gradient(800px 360px at 15% 0%, rgba(249,155,49,.16), transparent 65%), radial-gradient(700px 320px at 90% 100%, rgba(249,155,49,.10), transparent 65%), linear-gradient(180deg, var(--wash-cream), var(--paper)); border-bottom:1px solid var(--line); }
.bhero::before { content:""; position:absolute; inset:0; opacity:1; pointer-events:none;
  background-image:linear-gradient(rgba(204,127,40,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(204,127,40,.10) 1px, transparent 1px); background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 75%); }
.bhero-in { position:relative; z-index:2; max-width:820px; display:flex; flex-direction:column; align-items:center; }
.bhero .crumbs { justify-content:center; }
.bhero .crumbs, .bhero .crumbs a, .bhero .crumbs [aria-current] { color:var(--text-muted); }
.bhero .crumbs [aria-current] { color:var(--ink); font-weight:600; }
.bhero .eyebrow-pill { margin-top:14px; }
.bhero h1 { color:var(--ink); font-size:clamp(32px,4.4vw,54px); line-height:1.08; margin:14px 0 0; letter-spacing:-.025em; }
.bhero p { color:var(--text-muted); font-size:var(--fs-lg); line-height:1.6; margin:14px auto 0; max-width:640px; }
.bh-anim { position:absolute; inset:0; z-index:1; pointer-events:none; }
.bh-anim .o { position:absolute; border-radius:50%; filter:blur(2px); background:radial-gradient(circle at 35% 35%, rgba(255,179,92,.55), rgba(249,155,49,.08) 70%); animation:bh-float 14s ease-in-out infinite alternate; }
.bh-anim .o1 { width:180px; height:180px; left:6%; top:18%; } .bh-anim .o2 { width:120px; height:120px; right:9%; top:12%; animation-delay:-5s; } .bh-anim .o3 { width:90px; height:90px; right:22%; bottom:8%; animation-delay:-9s; }
.bh-anim .chip { position:absolute; padding:7px 13px; border-radius:var(--radius-pill); background:rgba(255,255,255,.88); border:1px solid var(--line); box-shadow:0 8px 20px rgba(10,10,10,.06); font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); animation:bh-chip 9s ease-in-out infinite; white-space:nowrap; }
.bh-anim .c1 { left:5%; top:62%; } .bh-anim .c2 { left:12%; top:20%; animation-delay:-2s; } .bh-anim .c3 { right:6%; top:58%; animation-delay:-4s; } .bh-anim .c4 { right:13%; top:22%; animation-delay:-6s; } .bh-anim .c5 { left:24%; bottom:10%; animation-delay:-3s; }
@keyframes bh-float { from { transform:translate(0,0) scale(1); } to { transform:translate(30px,-24px) scale(1.12); } }
@keyframes bh-chip { 0%,100% { transform:translateY(0); opacity:.95; } 50% { transform:translateY(-10px); opacity:.75; } }
@media (max-width:980px){ .bh-anim .chip { display:none; } }
@media (prefers-reduced-motion: reduce){ .bh-anim * { animation:none !important; } }
/* featured post */
.bfeat { border-radius:var(--radius-panel); overflow:hidden; box-shadow:0 24px 60px rgba(10,10,10,.12); margin-bottom:40px; transition:transform .2s; }
.bfeat:hover { transform:translateY(-3px); }
.bfeat[hidden] { display:none; }
.bfeat-link { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); color:inherit; text-decoration:none; }
.bfeat-img .bcover { height:100%; aspect-ratio:auto; min-height:340px; }
.bfeat-body { position:relative; padding:34px 36px; color:#fff; background:radial-gradient(500px 260px at 100% 0%, rgba(249,155,49,.30), transparent 70%), #111; display:flex; flex-direction:column; gap:12px; }
.bfeat-k { font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:#FFC985; }
.bfeat-cat { align-self:flex-start; font-size:var(--fs-xs); font-weight:700; padding:4px 10px; border-radius:var(--radius-pill); background:rgba(255,255,255,.12); color:#fff; }
.bfeat-body h2 { color:#fff; font-size:clamp(24px,2.4vw,32px); line-height:1.2; margin:0; }
.bfeat-body p { color:rgba(255,255,255,.78); font-size:var(--fs-ui); line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.bfeat-by { display:flex; align-items:center; gap:10px; margin-top:auto; font-size:var(--fs-sm); } .bfeat-by small { display:block; color:rgba(255,255,255,.65); } .bfeat-by b { color:#fff; }
.bfeat-cta { align-self:flex-start; }
/* 2 columns + sidebar */
.blayout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:36px; align-items:start; }
.blist-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; } .blist-head h2 { font-size:var(--fs-2xl); margin:0; } .blist-head span { font-size:var(--fs-sm); color:var(--text-muted); }
.bcard-ex { margin:0; font-size:var(--fs-sm); line-height:1.6; color:var(--text-muted); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.bcard-body h2 { -webkit-line-clamp:2; min-height:calc(1.35em * 2); }
.bcard-meta { display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px solid var(--line-soft); }
.bcard-go { color:var(--brand-text); font-weight:700; }
.bside { position:sticky; top:104px; display:flex; flex-direction:column; gap:14px; }
.bsearch { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper); color:var(--text-muted); }
.bsearch input { border:0; outline:0; flex:1; min-width:0; font:inherit; font-size:var(--fs-sm); background:transparent; color:var(--ink); }
.bsearch:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px rgba(249,155,49,.18); }
.bcats { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.bcats button { width:100%; display:flex; justify-content:space-between; align-items:center; font:inherit; font-size:var(--fs-sm); text-align:left; padding:9px 12px; border:0; border-radius:var(--radius); background:transparent; color:var(--ink-soft); cursor:pointer; }
.bcats button span { font-size:var(--fs-xs); font-weight:700; min-width:24px; padding:2px 8px; border-radius:var(--radius-pill); background:var(--paper-alt); color:var(--text-muted); text-align:center; }
.bcats button:hover { background:var(--paper-tint); } .bcats button.on { background:var(--brand-tint); color:var(--brand-deep); font-weight:700; } .bcats button.on span { background:var(--brand); color:#fff; }
.bnone { padding:24px; border:1px dashed var(--line-strong); border-radius:var(--radius); color:var(--text-muted); }
@media (max-width:1100px){ .blayout { grid-template-columns:minmax(0,1fr); } .bside { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px){ .bfeat-link { grid-template-columns:minmax(0,1fr); } .bfeat-img .bcover { min-height:0; aspect-ratio:16/9; } .bfeat-body { padding:24px; } }
@media (max-width:640px){ .bside { grid-template-columns:minmax(0,1fr); } .bhero { padding:40px 20px 44px; } }

/* Blog ending (24 Oct 2026): "End of article" marker + one dark next-step band.
   The sidebar demo card fades out while this band is on screen (js/app.js), so the
   two "Book a Demo" blocks never sit side by side. */
.post-end { display:flex; align-items:center; gap:16px; margin:56px 0 0; }
.pe-line { flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line-strong)); }
.pe-line:last-child { background:linear-gradient(90deg, var(--line-strong), transparent); }
.pe-mark { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); }
.pe-mark .icon { width:16px; height:16px; color:var(--brand); }
.post-cta { position:relative; overflow:hidden; margin-top:28px; padding:32px 34px; border:0; border-radius:var(--radius-panel); background:radial-gradient(520px 260px at 100% 0%, rgba(249,155,49,.28), transparent 70%), linear-gradient(135deg, var(--ink), var(--ink-soft)); color:#fff; }
.post-cta::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(249,155,49,.22) 1.2px, transparent 1.3px); background-size:18px 18px; -webkit-mask-image:linear-gradient(110deg, transparent 45%, #000 100%); mask-image:linear-gradient(110deg, transparent 45%, #000 100%); }
.post-cta > * { position:relative; }
.post-cta .pc-copy { gap:6px; max-width:440px; }
.post-cta .pc-eyebrow { font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#FFC985; }
.post-cta strong { font-size:var(--fs-2xl); line-height:1.2; letter-spacing:-.02em; color:#fff; }
.post-cta .pc-copy > span:last-child { font-size:var(--fs-md); color:rgba(255,255,255,.72); line-height:1.55; }
.post-cta .pc-actions { display:flex; flex-direction:column; gap:10px; flex:none; }
.post-cta .pc-actions .btn { justify-content:center; }
.post-cta .pc-lite { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.post-cta .pc-lite:hover { border-color:var(--brand); color:#fff; }
.p2-demo { transition:opacity .3s ease, transform .3s ease, visibility .3s; }
.p2-demo.is-muted { opacity:0; visibility:hidden; transform:translateY(8px); }
@media (max-width:980px){ .p2-demo { display:none; } }
@media (max-width:640px){ .post-cta { padding:26px 22px; } .post-cta .pc-actions { width:100%; } .post-cta strong { font-size:var(--fs-xl); } }
@media (prefers-reduced-motion: reduce){ .p2-demo { transition:none; } }