/* ================================================================
   Kwamle Media — SaaS Upgrade Layer (v5)
   Premium SaaS sections built on top of style-bold.css tokens.
   Scoped under body.bold-v4 for consistency with the dark theme.
   ================================================================ */

/* ---------- Shared helpers ---------- */
body.bold-v4 .sec-pad { padding: 90px 0; }
body.bold-v4 .muted { color: var(--bold-text-soft); }

/* ===================================================================
   1) Trust logos strip
   =================================================================== */
body.bold-v4 .logos {
  padding: 38px 0 8px;
  border-top: 1px solid var(--bold-line);
}
body.bold-v4 .logos-label {
  text-align: center;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bold-text-mute);
  margin-bottom: 22px;
}
body.bold-v4 .logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 44px;
}
body.bold-v4 .logo-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--bold-text-soft);
  font-weight: 800;
  font-size: 1.12rem;
  opacity: .72;
  filter: grayscale(1);
  transition: opacity .25s, filter .25s, transform .25s;
}
body.bold-v4 .logo-item svg { width: 24px; height: 24px; }
body.bold-v4 .logo-item:hover {
  opacity: 1; filter: grayscale(0); transform: translateY(-2px);
}

/* ===================================================================
   2) Stats bar
   =================================================================== */
body.bold-v4 .statsbar { padding: 56px 0; }
body.bold-v4 .stats-card {
  background: linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border: 1px solid var(--bold-line);
  border-radius: var(--bold-radius-l);
  padding: 40px 28px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 24px;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.7);
}
body.bold-v4 .stat-box { text-align: center; position: relative; }
body.bold-v4 .stat-box + .stat-box::before {
  content: ""; position: absolute; inset-inline-start: -12px; top: 50%;
  transform: translateY(-50%); height: 46px; width: 1px;
  background: var(--bold-line);
}
body.bold-v4 .stat-num {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800; line-height: 1;
  background: var(--bold-grad-1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.bold-v4 .stat-label { margin-top: 10px; color: var(--bold-text-soft); font-weight: 600; font-size: .95rem; }

/* ===================================================================
   3) Supported platforms
   =================================================================== */
body.bold-v4 .platforms { padding: 70px 0; }
body.bold-v4 .platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 18px;
  margin-top: 40px;
}
body.bold-v4 .platform-card {
  background: var(--bold-surface);
  border: 1px solid var(--bold-line);
  border-radius: var(--bold-radius);
  padding: 26px 22px;
  text-align: center;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
body.bold-v4 .platform-card:hover {
  transform: translateY(-4px);
  border-color: var(--bold-line-strong);
  box-shadow: 0 22px 50px -28px rgba(0,0,0,.8);
}
body.bold-v4 .platform-ic {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 16px;
}
body.bold-v4 .platform-ic svg { width: 30px; height: 30px; }
body.bold-v4 .pf-fb   { background: rgba(24,119,242,.16); color:#3b82f6; }
body.bold-v4 .pf-ig   { background: rgba(225,48,108,.16); color:#ec4899; }
body.bold-v4 .pf-wa   { background: rgba(37,211,102,.16); color:#22c55e; }
body.bold-v4 .pf-tg   { background: rgba(0,136,204,.16); color:#0ea5e9; }
body.bold-v4 .pf-mail { background: rgba(168,85,247,.16); color:#a855f7; }
body.bold-v4 .pf-sms  { background: rgba(250,204,21,.16); color:#eab308; }
body.bold-v4 .platform-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
body.bold-v4 .platform-card p { color: var(--bold-text-mute); font-size: .86rem; margin: 0; }
body.bold-v4 .platform-tag {
  display: inline-block; margin-top: 10px; font-size: .72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(34,197,94,.14); color:#22c55e;
}
body.bold-v4 .platform-tag.soon { background: rgba(250,204,21,.14); color:#eab308; }

/* ===================================================================
   4) Feature deep-dive rows
   =================================================================== */
body.bold-v4 .frows { padding: 30px 0 70px; }
body.bold-v4 .frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 46px 0;
}
body.bold-v4 .frow + .frow { border-top: 1px solid var(--bold-line); }
body.bold-v4 .frow.rev .frow-text { order: 2; }
body.bold-v4 .frow-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .8rem; letter-spacing: .04em;
  color: #c4b5fd; text-transform: uppercase; margin-bottom: 14px;
}
body.bold-v4 .frow-text h3 { font-size: clamp(1.5rem,2.6vw,2rem); margin: 0 0 14px; line-height: 1.2; }
body.bold-v4 .frow-text p { color: var(--bold-text-soft); font-size: 1.02rem; line-height: 1.7; margin: 0 0 18px; }
body.bold-v4 .frow-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
body.bold-v4 .frow-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--bold-text-soft); }
body.bold-v4 .frow-list svg { width: 20px; height: 20px; color: #22c55e; flex: 0 0 auto; margin-top: 2px; }

/* Mock visual panel */
body.bold-v4 .frow-visual {
  background: linear-gradient(160deg,var(--bold-surface),var(--bold-bg-1));
  border: 1px solid var(--bold-line);
  border-radius: var(--bold-radius-l);
  padding: 22px;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.85);
  position: relative; overflow: hidden;
}
body.bold-v4 .frow-visual::before {
  content:""; position:absolute; inset:0;
  background: var(--bold-grad-soft); opacity:.5; pointer-events:none;
}
body.bold-v4 .mock { position: relative; z-index: 1; }
body.bold-v4 .mock-bar {
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
body.bold-v4 .mock-dot { width:10px; height:10px; border-radius:50%; background:var(--bold-line-strong); }
body.bold-v4 .mock-row {
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(255,255,255,.04); border:1px solid var(--bold-line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
  font-size:.9rem; color: var(--bold-text-soft);
}
body.bold-v4 .mock-row b { color: var(--bold-text); }
body.bold-v4 .mock-pill { font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px; }
body.bold-v4 .mock-pill.ok { background:rgba(34,197,94,.16); color:#22c55e; }
body.bold-v4 .mock-pill.ai { background:rgba(168,85,247,.16); color:#c4b5fd; }
body.bold-v4 .mock-pill.wait { background:rgba(250,204,21,.16); color:#eab308; }
/* analytics mock bars */
body.bold-v4 .mock-chart { display:flex; align-items:flex-end; gap:10px; height:130px; padding:8px 4px 0; }
body.bold-v4 .mock-chart span {
  flex:1; border-radius:8px 8px 0 0; background: var(--bold-grad-3); opacity:.85;
}
body.bold-v4 .mock-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
body.bold-v4 .mock-kpi { background:rgba(255,255,255,.04); border:1px solid var(--bold-line); border-radius:12px; padding:12px; text-align:center; }
body.bold-v4 .mock-kpi b { display:block; font-size:1.2rem; color:#fff; }
body.bold-v4 .mock-kpi span { font-size:.72rem; color:var(--bold-text-mute); }

/* ===================================================================
   5) Pricing: 4 cols + comparison table
   =================================================================== */
body.bold-v4 .plans.cols-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
body.bold-v4 .plan .plan-cur { font-size: 1.1rem; vertical-align: super; opacity:.8; }
body.bold-v4 .compare-wrap { margin-top: 70px; overflow-x: auto; }
body.bold-v4 .compare {
  width: 100%; border-collapse: collapse; min-width: 720px;
  background: var(--bold-surface); border: 1px solid var(--bold-line);
  border-radius: var(--bold-radius); overflow: hidden;
}
body.bold-v4 .compare th, body.bold-v4 .compare td {
  padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--bold-line);
  font-size: .92rem;
}
body.bold-v4 .compare thead th { background: rgba(255,255,255,.04); color:#fff; font-weight:800; }
body.bold-v4 .compare th:first-child, body.bold-v4 .compare td:first-child {
  text-align: start; color: var(--bold-text-soft); font-weight:600;
}
body.bold-v4 .compare tbody tr:last-child td { border-bottom: 0; }
body.bold-v4 .compare .yes { color:#22c55e; font-weight:800; }
body.bold-v4 .compare .no { color: var(--bold-text-mute); }
body.bold-v4 .compare .pop-col { background: rgba(168,85,247,.08); color:#c4b5fd; }

/* ===================================================================
   6) FAQ accordion
   =================================================================== */
body.bold-v4 .faq { padding: 80px 0; }
body.bold-v4 .faq-list { max-width: 820px; margin: 40px auto 0; display: grid; gap: 12px; }
body.bold-v4 .faq-item {
  background: var(--bold-surface);
  border: 1px solid var(--bold-line);
  border-radius: 14px; overflow: hidden;
}
body.bold-v4 .faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 22px;
  font-weight: 700; color: #fff; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; font-size: 1rem;
}
body.bold-v4 .faq-item summary::-webkit-details-marker { display: none; }
body.bold-v4 .faq-item summary::after {
  content: "+"; font-size: 1.5rem; color: var(--bold-text-mute); transition: transform .25s; line-height:1;
}
body.bold-v4 .faq-item[open] summary::after { transform: rotate(45deg); }
body.bold-v4 .faq-item .faq-a {
  padding: 0 22px 20px; color: var(--bold-text-soft); line-height: 1.75; font-size: .95rem;
}

/* ===================================================================
   7) Security & privacy
   =================================================================== */
body.bold-v4 .security { padding: 70px 0; }
body.bold-v4 .sec-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 18px; margin-top: 40px;
}
body.bold-v4 .sec-card {
  background: var(--bold-surface); border: 1px solid var(--bold-line);
  border-radius: var(--bold-radius); padding: 24px;
  transition: transform .25s, border-color .25s;
}
body.bold-v4 .sec-card:hover { transform: translateY(-3px); border-color: var(--bold-line-strong); }
body.bold-v4 .sec-ic {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(34,197,94,.14); color:#22c55e; margin-bottom: 14px;
}
body.bold-v4 .sec-ic svg { width: 24px; height: 24px; }
body.bold-v4 .sec-card h3 { font-size: 1.05rem; margin: 0 0 8px; }
body.bold-v4 .sec-card p { color: var(--bold-text-mute); font-size: .9rem; margin: 0; line-height: 1.6; }
body.bold-v4 .sec-badges {
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px;
}
body.bold-v4 .sec-badge {
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  border:1px solid var(--bold-line); border-radius:999px;
  color:var(--bold-text-soft); font-weight:700; font-size:.85rem;
  background: rgba(255,255,255,.03);
}

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 920px) {
  body.bold-v4 .frow { grid-template-columns: 1fr; gap: 30px; padding: 34px 0; }
  body.bold-v4 .frow.rev .frow-text { order: 0; }
  body.bold-v4 .plans.cols-4 { grid-template-columns: repeat(2,1fr); }
  body.bold-v4 .stats-card { grid-template-columns: repeat(2,1fr); gap: 30px 16px; }
  body.bold-v4 .stat-box:nth-child(3)::before,
  body.bold-v4 .stat-box:nth-child(2)::before { display:none; }
}
@media (max-width: 560px) {
  body.bold-v4 .plans.cols-4 { grid-template-columns: 1fr; }
  body.bold-v4 .stats-card { grid-template-columns: 1fr 1fr; }
  body.bold-v4 .sec-pad, body.bold-v4 .platforms, body.bold-v4 .faq, body.bold-v4 .security { padding: 50px 0; }
  body.bold-v4 .logos-row { gap: 14px 26px; }
  body.bold-v4 .logo-item { font-size: .98rem; }
}

/* ===================================================================
   8) Big Dashboard mockup (demo)
   =================================================================== */
body.bold-v4 .demo { padding: 40px 0 80px; }
body.bold-v4 .trusted {
  text-align: center; margin: 8px 0 30px;
  font-size: .85rem; letter-spacing: .04em; color: var(--bold-text-mute); font-weight: 700;
}
body.bold-v4 .dash {
  background: linear-gradient(160deg,#11141c,#0b0d12);
  border: 1px solid var(--bold-line-strong);
  border-radius: var(--bold-radius-l);
  box-shadow: 0 60px 140px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.02);
  overflow: hidden;
  max-width: 1120px; margin: 0 auto;
}
body.bold-v4 .dash-top {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--bold-line);
  background: rgba(255,255,255,.02);
}
body.bold-v4 .dash-dots { display: flex; gap: 7px; }
body.bold-v4 .dash-dots span { width: 11px; height: 11px; border-radius: 50%; }
body.bold-v4 .dash-dots span:nth-child(1){ background:#ff5f57; }
body.bold-v4 .dash-dots span:nth-child(2){ background:#febc2e; }
body.bold-v4 .dash-dots span:nth-child(3){ background:#28c840; }
body.bold-v4 .dash-url {
  flex: 1; max-width: 340px; margin: 0 auto;
  background: var(--bold-bg-2); border: 1px solid var(--bold-line);
  border-radius: 8px; padding: 5px 14px; text-align: center;
  font-size: .78rem; color: var(--bold-text-mute);
}
body.bold-v4 .dash-body { display: grid; grid-template-columns: 210px 1fr; min-height: 460px; }
body.bold-v4 .dash-side {
  border-inline-end: 1px solid var(--bold-line);
  padding: 16px 12px; background: rgba(255,255,255,.015);
}
body.bold-v4 .dash-brand {
  display: flex; align-items: center; gap: 9px; padding: 6px 10px 16px;
  font-weight: 800; color: #fff; font-size: .95rem;
}
body.bold-v4 .dash-brand .db-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--bold-grad-1); display:grid; place-items:center; }
body.bold-v4 .dash-nav { display: grid; gap: 4px; }
body.bold-v4 .dash-nav button, body.bold-v4 .dash-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px; border: 0; background: transparent;
  color: var(--bold-text-soft); font: inherit; font-size: .86rem; font-weight: 600;
  cursor: pointer; text-align: start; width: 100%; transition: background .15s, color .15s;
}
body.bold-v4 .dash-nav svg { width: 18px; height: 18px; flex: 0 0 auto; }
body.bold-v4 .dash-nav button:hover { background: rgba(255,255,255,.05); color: #fff; }
body.bold-v4 .dash-nav button.active {
  background: var(--bold-grad-soft); color: #fff;
  box-shadow: inset 0 0 0 1px var(--bold-line-strong);
}
body.bold-v4 .dash-side-foot {
  margin-top: 18px; padding: 12px; border-radius: 12px;
  background: var(--bold-grad-soft); border: 1px solid var(--bold-line);
  font-size: .78rem; color: var(--bold-text-soft);
}
body.bold-v4 .dash-main { padding: 20px 22px; position: relative; }
body.bold-v4 .dash-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; gap: 12px;
}
body.bold-v4 .dash-h h4 { margin: 0; font-size: 1.15rem; color: #fff; }
body.bold-v4 .dash-h .dash-live {
  display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700;
  color: #22c55e; background: rgba(34,197,94,.12); padding: 5px 12px; border-radius: 999px;
}
body.bold-v4 .dash-h .dash-live::before { content:""; width:7px; height:7px; border-radius:50%; background:#22c55e; animation: dash-pulse 1.6s infinite; }
@keyframes dash-pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
body.bold-v4 .dash-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 18px; }
body.bold-v4 .dash-kpi {
  background: rgba(255,255,255,.03); border: 1px solid var(--bold-line);
  border-radius: 12px; padding: 13px 14px;
}
body.bold-v4 .dash-kpi .k-num { font-size: 1.35rem; font-weight: 800; color: #fff; }
body.bold-v4 .dash-kpi .k-lab { font-size: .72rem; color: var(--bold-text-mute); margin-top: 3px; }
body.bold-v4 .dash-kpi .k-up { color: #22c55e; font-size: .72rem; font-weight: 700; }
/* views */
body.bold-v4 .dash-view { display: none; }
body.bold-v4 .dash-view.active { display: block; animation: dash-fade .35s ease; }
@keyframes dash-fade { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform:none;} }
body.bold-v4 .dash-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
body.bold-v4 .dash-card {
  background: rgba(255,255,255,.03); border: 1px solid var(--bold-line);
  border-radius: 12px; padding: 14px;
}
body.bold-v4 .dash-card h5 { margin: 0 0 12px; font-size: .9rem; color: var(--bold-text-soft); }
/* inbox list */
body.bold-v4 .ib-row { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-radius: 9px; }
body.bold-v4 .ib-row + .ib-row { border-top: 1px solid var(--bold-line); }
body.bold-v4 .ib-row.sel { background: rgba(255,255,255,.04); }
body.bold-v4 .ib-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .8rem; flex: 0 0 auto; }
body.bold-v4 .ib-meta { flex: 1; min-width: 0; }
body.bold-v4 .ib-meta .ib-name { color: #fff; font-weight: 700; font-size: .84rem; }
body.bold-v4 .ib-meta .ib-msg { color: var(--bold-text-mute); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.bold-v4 .ib-ch { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
body.bold-v4 .ch-fb { background: rgba(59,130,246,.16); color:#3b82f6; }
body.bold-v4 .ch-ig { background: rgba(236,72,153,.16); color:#ec4899; }
body.bold-v4 .ch-wa { background: rgba(34,197,94,.16); color:#22c55e; }
/* builder nodes */
body.bold-v4 .bd-flow { display: grid; gap: 10px; }
body.bold-v4 .bd-node {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--bold-line);
  background: rgba(255,255,255,.03); color: var(--bold-text-soft); font-size: .85rem;
}
body.bold-v4 .bd-node b { color: #fff; }
body.bold-v4 .bd-conn { width: 2px; height: 12px; background: var(--bold-line-strong); margin: -4px auto; }
body.bold-v4 .bd-tag { font-size:.68rem; font-weight:700; padding:2px 9px; border-radius:999px; background:rgba(168,85,247,.16); color:#c4b5fd; }
/* analytics chart */
body.bold-v4 .dash-chart { display:flex; align-items:flex-end; gap:8px; height:150px; padding-top:8px; }
body.bold-v4 .dash-chart span { flex:1; border-radius:7px 7px 0 0; background:var(--bold-grad-3); opacity:.85; }
/* scheduled posts */
body.bold-v4 .sp-row { display:flex; align-items:center; gap:11px; padding:9px 6px; }
body.bold-v4 .sp-row + .sp-row { border-top:1px solid var(--bold-line); }
body.bold-v4 .sp-date { width:46px; text-align:center; flex:0 0 auto; }
body.bold-v4 .sp-date b { display:block; font-size:1.05rem; color:#fff; }
body.bold-v4 .sp-date span { font-size:.66rem; color:var(--bold-text-mute); }
body.bold-v4 .sp-body { flex:1; min-width:0; }
body.bold-v4 .sp-body .sp-t { color:#fff; font-size:.82rem; font-weight:600; }
body.bold-v4 .sp-body .sp-time { color:var(--bold-text-mute); font-size:.72rem; }
/* AI replies */
body.bold-v4 .ai-card { display:grid; gap:10px; }
body.bold-v4 .ai-msg { padding:10px 13px; border-radius:12px; font-size:.85rem; max-width:85%; }
body.bold-v4 .ai-msg.in { background:rgba(255,255,255,.05); color:var(--bold-text-soft); border-end-start-radius:4px; }
body.bold-v4 .ai-msg.out { background:var(--bold-grad-1); color:#fff; margin-inline-start:auto; border-end-end-radius:4px; }
body.bold-v4 .ai-foot { display:flex; align-items:center; gap:8px; font-size:.72rem; color:var(--bold-text-mute); }
body.bold-v4 .ai-foot .ai-badge { background:rgba(168,85,247,.16); color:#c4b5fd; padding:2px 9px; border-radius:999px; font-weight:700; }
/* live demo enhancements */
body.bold-v4 .dash-ticker { display:flex; align-items:center; gap:9px; margin:-2px 0 14px; padding:8px 12px; border-radius:10px; font-size:.76rem; background:rgba(255,255,255,.03); border:1px solid var(--bold-line); color:var(--bold-text-soft); overflow:hidden; white-space:nowrap; }
body.bold-v4 .dash-ticker .tk-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; flex:0 0 auto; animation:dash-pulse 1.6s infinite; }
body.bold-v4 .dash-ticker .tk-txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
body.bold-v4 .dash-ticker .tk-txt b { color:#fff; font-weight:700; }
body.bold-v4 .dash-ticker .tk-time { color:var(--bold-text-mute); flex:0 0 auto; font-variant-numeric:tabular-nums; }
body.bold-v4 .dash-kpi .k-num { transition:color .25s ease; font-variant-numeric:tabular-nums; }
body.bold-v4 .dash-kpi .k-num.k-bump { animation:k-bump .5s ease; }
@keyframes k-bump { 0% { color:#22c55e; transform:translateY(-1px); } 100% { color:#fff; transform:none; } }
body.bold-v4 .ib-row.row-new { animation:row-in .5s ease; }
@keyframes row-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
body.bold-v4 .dash-chart span { transition:height .7s cubic-bezier(.4,0,.2,1); }
body.bold-v4 .dash-chart span.bar-now { opacity:1; box-shadow:0 0 14px rgba(168,85,247,.45); }

@media (max-width: 860px) {
  body.bold-v4 .dash-body { grid-template-columns: 1fr; }
  body.bold-v4 .dash-side {
    border-inline-end: 0; border-bottom: 1px solid var(--bold-line);
    display: flex; gap: 6px; overflow-x: auto; padding: 10px;
  }
  body.bold-v4 .dash-brand { display: none; }
  body.bold-v4 .dash-nav { display: flex; gap: 6px; }
  body.bold-v4 .dash-nav button { white-space: nowrap; padding: 8px 12px; }
  body.bold-v4 .dash-nav button span { display: none; }
  body.bold-v4 .dash-side-foot { display: none; }
  body.bold-v4 .dash-kpis { grid-template-columns: repeat(2,1fr); }
  body.bold-v4 .dash-split { grid-template-columns: 1fr; }
}