/* ============================================================
   b2b.css — B2B Database use-case page
   Loads AFTER outmate.css + vid.css + vid2.css + sales.css
   Only holds the signature NLP-search Deep Dive visual.
   ============================================================ */

/* ── Hero search mock (top bar of hero-right feed) ── */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.search-bar .sb-ico { color: var(--accent); font-size: 14px; line-height: 1; }
.search-bar .sb-q {
  font-family: var(--mono);
  font-size: 11px;
  color: #e7e7ef;
  line-height: 1.35;
  flex: 1;
}
.search-bar .sb-q .ph { color: #6e6e7a; }
.search-bar .sb-t {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--accent);
  white-space: nowrap;
}

/* ── Deep Dive — NLP SEARCH DEMO ── */
.nlp {
  padding: clamp(22px,3vw,44px) clamp(24px,3.8vw,72px) clamp(30px,4vw,60px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px,2vw,24px);
}

/* the search input */
.nlp-search {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: clamp(14px,1.6vw,20px) clamp(16px,1.8vw,24px);
  box-shadow: 0 0 0 1px rgba(80,70,230,.0), 0 24px 50px -28px rgba(0,0,0,.8);
  transition: box-shadow .3s, border-color .3s;
}
.nlp-search.live {
  border-color: rgba(80,70,230,.5);
  box-shadow: 0 0 0 4px rgba(80,70,230,.12), 0 24px 50px -28px rgba(0,0,0,.8);
}
.nlp-search .nlp-ico {
  color: var(--accent);
  font-size: clamp(18px,1.8vw,24px);
  line-height: 1;
  flex-shrink: 0;
}
.nlp-search .nlp-field {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: clamp(13px,1.45vw,19px);
  color: #fff;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.nlp-search .nlp-field .ph { color: #6a6a76; }
.nlp-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: -2px;
  animation: nlpblink 1s steps(1) infinite;
}
@keyframes nlpblink { 50% { opacity: 0; } }
.nlp-search .nlp-go {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border-radius: 8px;
  padding: 9px 16px;
}

/* parsed chips */
.nlp-parse {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 30px;
}
.nlp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .03em;
  color: #d8d8e2;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius: 30px;
  padding: 6px 13px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.nlp-chip.in { opacity: 1; transform: none; }
.nlp-chip .ck {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* results */
.nlp-results {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
  background: #0c0c0f;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease .1s, transform .5s ease .1s;
}
.nlp-results.in { opacity: 1; transform: none; }
.nlp-rmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7a7a86;
}
.nlp-rmeta .hot { color: var(--accent); }
.nlp-rmeta .timer { color: #fff; }
.nlp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.nlp-row:last-child { border-bottom: 0; }
.nlp-id .nm {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: clamp(14px,1.4vw,17px);
  color: #f4f4f8;
  line-height: 1.15;
}
.nlp-id .ro {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .03em;
  color: #8a8a96;
  margin-top: 3px;
}
.nlp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.nlp-badge {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #b9b9c4;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  padding: 2px 6px;
}
.nlp-badge .v { color: var(--accent); }
.nlp-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.nlp-score {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: clamp(22px,2.2vw,30px);
  line-height: 1;
  color: var(--accent);
}
.nlp-score .lbl {
  display: block;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6e6e7a;
  font-weight: 400;
  margin-top: 3px;
}
.nlp-bar { width: 64px; height: 5px; background: #24242a; border-radius: 3px; overflow: hidden; }
.nlp-bar i { display: block; height: 100%; background: var(--accent); }

/* the search demo panes swap like dd-pane */
.nlp-pane { display: none; }
.nlp-pane.on { display: flex; flex-direction: column; gap: clamp(16px,2vw,24px); }

/* footer note under the demo */
.nlp-note {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.nlp-note .acc { color: var(--accent); font-size: 14px; }

@media (max-width: 640px) {
  .nlp-search { flex-wrap: wrap; }
  .nlp-search .nlp-go { width: 100%; text-align: center; }
  .nlp-row { grid-template-columns: 1fr; }
  .nlp-right { flex-direction: row; align-items: center; justify-content: flex-start; }
}

/* ============================================================
   HERO — B2B DATABASE MOCK (replaces plain feed)
   ============================================================ */

.db-mock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
}
.db-mock-head .db-title { color: #cfcfd8; }
.db-mock-head .db-live {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 9.5px;
  letter-spacing: .08em;
}

.db-query-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(80,70,230,.07);
  font-family: var(--mono);
  font-size: 10px;
  color: #a9a2ff;
}
.db-query-bar .dq-icon { font-size: 13px; flex-shrink: 0; }
.db-query-bar .dq-text { flex: 1; line-height: 1.3; }
.db-query-bar .dq-time {
  flex-shrink: 0;
  font-size: 9px;
  letter-spacing: .08em;
  background: rgba(80,70,230,.18);
  color: var(--accent);
  border-radius: 4px;
  padding: 2px 7px;
}

.db-col-heads {
  display: grid;
  grid-template-columns: 1fr 90px 52px;
  gap: 0;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.24);
}

.db-row {
  display: grid;
  grid-template-columns: 1fr 90px 52px;
  align-items: center;
  gap: 0;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.db-row:last-child { border-bottom: 0; }
.db-row.db-hot { background: rgba(80,70,230,.07); }

.db-contact .db-name {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #eeeef4;
  letter-spacing: .01em;
  line-height: 1.2;
}
.db-contact .db-role {
  font-family: var(--mono);
  font-size: 9px;
  color: #6e6e7a;
  margin-top: 3px;
  letter-spacing: .03em;
  line-height: 1.3;
}

.db-signals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 8px;
}
.db-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.5;
  width: fit-content;
}
.db-tag.v {
  border: 1px solid rgba(80,70,230,.35);
  color: #a9a2ff;
  background: rgba(80,70,230,.1);
}
.db-tag.sig {
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5);
}

.db-score-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.db-icp {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--accent);
}
.db-icp-lbl {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.24);
}
.db-icp-bar {
  width: 42px;
  height: 3px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
}
.db-icp-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}

.db-foot {
  padding: 9px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.26);
  background: rgba(0,0,0,.15);
}
.db-foot .df-acc { color: var(--accent); }


/* ============================================================
   INTEGRATIONS — dark editorial numbered rows
   ============================================================ */
.ig-rows { border-top: 1px solid rgba(255,255,255,.1); }
.ig-row {
  display: grid;
  grid-template-columns: 80px 180px 1fr;
  align-items: center;
  gap: 0;
  padding: clamp(22px,2.6vw,40px) clamp(24px,3.8vw,72px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .3s;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.ig-row::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: rgba(80,70,230,.12);
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.ig-row:hover::after { width: 100%; }
.ig-row:last-child { border-bottom: 0; }
.ig-idx {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(20px,2.2vw,32px);
  letter-spacing: -.03em;
  color: rgba(255,255,255,.12);
  transition: color .3s;
  position: relative;
  z-index: 1;
}
.ig-row:hover .ig-idx { color: var(--accent); }
.ig-cat {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(16px,1.6vw,24px);
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}
.ig-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}
.ig-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .03em;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  padding: 7px 13px;
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.03);
  transition: border-color .25s, color .25s, background .25s;
}
.ig-row:hover .ig-pill {
  border-color: rgba(80,70,230,.45);
  color: #a9a2ff;
  background: rgba(80,70,230,.1);
}
.ig-pill .gl { color: var(--accent); }
.ig-pill img { width: 14px; height: 14px; object-fit: contain; flex: 0 0 auto; }

/* dark scrolling marquee */
.ig-mq {
  border-top: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  padding: 14px 0;
  background: rgba(0,0,0,.18);
}
.ig-mq-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: scrollx 34s linear infinite;
}
.ig-mq:hover .ig-mq-track { animation-play-state: paused; }
.ig-mq-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: clamp(12px,1.2vw,14px);
  color: rgba(255,255,255,.4);
  padding: 0 22px;
  border-right: 1px solid rgba(255,255,255,.06);
}
.ig-mq-item .gl { color: var(--accent); }
.ig-mq-item img { width: 15px; height: 15px; object-fit: contain; flex: 0 0 auto; }
.ig-mq-item.sub {
  color: rgba(255,255,255,.2);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ============================================================
   OUTCOMES — dark, giant metrics + animated bars + before/after
   ============================================================ */
.oc-metrics {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid rgba(255,255,255,.1);
}
.oc-metric {
  padding: clamp(28px,3.2vw,52px) clamp(20px,2.4vw,38px);
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.oc-metric:last-child { border-right: 0; }
.oc-metric::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(80,70,230,.14) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.oc-metric:hover::before { opacity: 1; }

.oc-n {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .86;
  font-size: clamp(38px,5.5vw,80px);
  color: var(--accent);
  /* slide-up entrance */
  transform: translateY(18px);
  opacity: 0;
  transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}
.oc-metric.animated .oc-n {
  transform: none;
  opacity: 1;
}
.oc-metric:nth-child(2) .oc-n { transition-delay: .1s; }
.oc-metric:nth-child(3) .oc-n { transition-delay: .2s; }
.oc-metric:nth-child(4) .oc-n { transition-delay: .3s; }

.oc-l {
  font-family: var(--body);
  font-size: clamp(12px,1.1vw,14.5px);
  color: rgba(255,255,255,.42);
  line-height: 1.5;
  text-wrap: pretty;
  max-width: 22ch;
  flex: 1;
}

/* animated progress bar */
.oc-bar {
  height: 2px;
  background: rgba(255,255,255,.08);
  border-radius: 1px;
  overflow: hidden;
  margin-top: auto;
}
.oc-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 1px;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1) .5s;
}
.oc-metric.animated .oc-bar i {
  transform: scaleX(var(--bar-scale, 1));
}

/* before / after on dark */
.oc-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.1);
}
.oc-before, .oc-after {
  padding: clamp(28px,3.4vw,56px) clamp(24px,3.8vw,72px);
}
.oc-before { border-right: 1px solid rgba(255,255,255,.1); }
.oc-ba-hdr {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.oc-before .oc-ba-hdr { color: rgba(255,255,255,.28); }
.oc-after .oc-ba-hdr { color: var(--accent); }
.oc-ba ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.oc-ba li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--body);
  font-size: clamp(13px,1.2vw,16px);
  line-height: 1.5;
  text-wrap: pretty;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .55s ease, transform .55s ease;
}
.oc-after li { transform: translateX(14px); }
.oc-ba li.in { opacity: 1; transform: none; }
.oc-before li { color: rgba(255,255,255,.38); }
.oc-after li { color: rgba(255,255,255,.75); }
.oc-ba .mk {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 13px;
  margin-top: 1px;
}
.oc-before .mk { color: rgba(255,255,255,.22); }
.oc-after .mk { color: var(--accent); }

/* ============================================================
   PROOF — editorial magazine split layout
   ============================================================ */
.pf-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  border-top: 1px solid var(--line);
}

/* featured quote (left) */
.pf-featured {
  padding: clamp(36px,4.5vw,72px) clamp(28px,3.8vw,64px);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  overflow: hidden;
  min-height: clamp(300px,28vw,460px);
}
.pf-qmark {
  position: absolute;
  top: 12px;
  left: 20px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(100px,14vw,220px);
  line-height: .7;
  letter-spacing: -.04em;
  color: var(--accent);
  opacity: .1;
  pointer-events: none;
  user-select: none;
}
.pf-quote {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(20px,2.4vw,34px);
  letter-spacing: -.025em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
  position: relative;
  padding-top: clamp(28px,3.5vw,52px);
}
.pf-stars {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: .18em;
  position: relative;
}
.pf-who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  position: relative;
}
.pf-who::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--line);
  flex-shrink: 0;
}
.pf-nm {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(14px,1.3vw,17px);
  letter-spacing: -.01em;
  color: var(--ink);
}
.pf-ro {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* stacked mini quotes (right) */
.pf-stack { display: flex; flex-direction: column; }
.pf-mini {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(28px,3.2vw,52px) clamp(24px,2.8vw,44px);
  flex: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.pf-mini.in { opacity: 1; transform: none; }
.pf-mini:first-child {
  border-bottom: 1px solid var(--line);
  transition-delay: .1s;
}
.pf-mini:last-child { transition-delay: .25s; }
.pf-mini-stars {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .14em;
}
.pf-mini-q {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 40px;
  line-height: .6;
  color: var(--accent);
  opacity: .3;
}
.pf-mini-text {
  font-family: var(--body);
  font-size: clamp(14px,1.3vw,16.5px);
  color: var(--ink-soft);
  line-height: 1.6;
  text-wrap: pretty;
  flex: 1;
}
.pf-mini-who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
}
.pf-mini-nm {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(13px,1.2vw,16px);
  letter-spacing: -.01em;
  color: var(--ink);
}
.pf-mini-ro {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 900px) {
  .ig-row { grid-template-columns: 56px 140px 1fr; }
  .oc-metrics { grid-template-columns: 1fr 1fr; }
  .oc-metric:nth-child(2) { border-right: 0; }
  .oc-metric:nth-child(1), .oc-metric:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.08); }
  .pf-grid { grid-template-columns: 1fr; }
  .pf-featured { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .ig-row { grid-template-columns: 1fr; gap: 12px; }
  .ig-pills-wrap { justify-content: flex-start; }
  .oc-metrics { grid-template-columns: 1fr; }
  .oc-metric { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08); }
  .oc-metric:last-child { border-bottom: 0; }
  .oc-ba { grid-template-columns: 1fr; }
  .oc-before { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
}

/* ============================================================
   LIGHT-THEME OVERRIDES — Integrations + Outcomes on white card
   ============================================================ */

/* Integrations (light) */
.ig-rows.ig-light { border-top-color: var(--line); }
.ig-light .ig-row { border-bottom-color: var(--line); }
.ig-light .ig-row::after { background: rgba(80,70,230,.07); }
.ig-light .ig-idx { color: rgba(0,0,0,.14); }
.ig-light .ig-row:hover .ig-idx { color: var(--accent); }
.ig-light .ig-cat { color: var(--ink); }
.ig-light .ig-pill {
  border-color: var(--line);
  color: var(--ink-soft);
  background: var(--paper);
}
.ig-light .ig-row:hover .ig-pill {
  border-color: rgba(80,70,230,.4);
  color: var(--accent);
  background: rgba(80,70,230,.06);
}
/* light marquee directly follows the .ig-light rows */
.ig-light + .ig-mq {
  border-top-color: var(--line);
  background: var(--paper-2);
}
.ig-light + .ig-mq .ig-mq-item {
  color: var(--ink-soft);
  border-right-color: var(--line);
  opacity: .75;
}
.ig-light + .ig-mq .ig-mq-item.sub { color: var(--muted); opacity: .6; }

/* Outcomes (light) */
.oc-metrics.oc-light { border-top-color: var(--line); }
.oc-light .oc-metric { border-right-color: var(--line); }
.oc-light .oc-metric::before {
  background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(80,70,230,.1) 0%, transparent 70%);
}
.oc-light .oc-l { color: var(--muted); }
.oc-light .oc-bar { background: rgba(0,0,0,.08); }

.oc-ba.oc-ba-light { border-top-color: var(--line); }
.oc-ba-light .oc-before { border-right-color: var(--line); }
.oc-ba-light .oc-ba-hdr { }
.oc-ba-light .oc-before .oc-ba-hdr { color: var(--muted); }
.oc-ba-light .oc-after .oc-ba-hdr { color: var(--accent); }
.oc-ba-light .oc-before li { color: var(--muted); }
.oc-ba-light .oc-after li { color: var(--ink); }
.oc-ba-light .oc-before .mk { color: var(--muted-2); }
.oc-ba-light .oc-after .mk { color: var(--accent); }

@media (max-width: 640px) {
  .oc-light .oc-metric { border-bottom: 1px solid var(--line); }
  .oc-light .oc-metric:last-child { border-bottom: 0; }
  .oc-ba-light .oc-before { border-bottom: 1px solid var(--line); }
}