/* Origo — visual showcase rows. Monochrome only; series differ by weight/dash/opacity, never color. */

.showcase .vrows { display: flex; flex-direction: column; gap: 1px; background: var(--border-1);
  border: 1px solid var(--border-1); border-radius: var(--r-lg); overflow: hidden; margin-top: 48px; }

.vrow { display: grid; grid-template-columns: 0.82fr 1.18fr; background: var(--bg); align-items: center; }
.vrow .vtext { padding: 44px 40px; }
.vrow .vpanel { padding: 36px 40px; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.vrow.reverse { grid-template-columns: 1.18fr 0.82fr; }
.vrow.reverse .vtext { order: 2; }
.vrow.reverse .vpanel { order: 1; }

.vtext h3 { font-family: var(--font-sans); font-weight: 600; font-size: 27px; letter-spacing: -.03em;
  color: #fff; margin: 16px 0 12px; line-height: 1.1; }
.vtext h3 i { font-style: italic; font-weight: 600; }
.vtext p { font-size: 16px; color: var(--fg-muted); margin: 0; line-height: 1.6; max-width: 38ch; }
.vlink { display: inline-block; margin-top: 20px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; border-bottom: 1px solid var(--border-3); padding-bottom: 3px; }
.vlink span { transition: transform .2s var(--ease-out); display: inline-block; }
.vlink:hover span { transform: translateX(3px); }

.vlabel { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #8A8A8A; }
.vpanel-head { margin-bottom: 16px; }

/* legend */
.vlegend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 18px; }
.vlegend-item { display: flex; align-items: center; gap: 8px; }
.vname { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.vval { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: #fff; }
.vdelta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.vdelta.up { color: #3DDC97; }
.vdelta.down { color: #FF7A66; }

/* chart */
.vchart { width: 100%; height: auto; display: block; overflow: visible; }
.vgrid { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.vaxis { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; fill: #6f6f6f; }
.varea { fill: rgba(255,255,255,.06); }

/* pipeline */
.vpipe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: center; width: 100%; }
.vpipe-flow { display: flex; flex-direction: column; gap: 0; }
.vnode { display: flex; align-items: center; gap: 12px; background: #0b0b0b; border: 1px solid var(--border-2);
  border-radius: var(--r-md); padding: 13px 15px; }
.vnode-check { width: 18px; height: 18px; border-radius: 50%; background: #34D399; color: #053a28; font-size: 11px;
  display: flex; align-items: center; justify-content: center; flex: none; }
.vnode-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vnode-t { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: #fff; }
.vnode-o { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: #8A8A8A; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vnode-st { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-muted); border: 1px solid var(--border-2); border-radius: 999px; padding: 3px 8px; flex: none; }
.vnode-link { width: 1px; height: 16px; background: var(--border-3); margin: 0 0 0 24px; }

.vout { display: flex; flex-direction: column; gap: 10px; }
.vout-card { background: #0b0b0b; border: 1px solid var(--border-2); border-radius: var(--r-md); padding: 16px; }
.vout-q { font-size: 13px; color: var(--fg-muted); line-height: 1.5; padding-bottom: 10px; border-bottom: 1px solid var(--border-1); }
.vout-a { font-size: 13.5px; color: var(--ink-100); line-height: 1.6; margin-top: 10px; }
.vout-stamp { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-200); }
.vout-stamp .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.8s infinite; }

/* analytics */
.vkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.vkpi { display: flex; flex-direction: column; gap: 5px; }
.vkpi b { font-family: var(--font-sans); font-weight: 600; font-size: 24px; letter-spacing: -.02em; color: #fff; line-height: 1; }
.vkpi-s { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #8A8A8A; }
.vchart-wrap { position: relative; }
.vtip { position: absolute; top: 12%; right: 8%; width: 188px; background: rgba(10,10,10,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border-2);
  border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow-lg); }
.vtip-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: #8A8A8A; padding-bottom: 9px; border-bottom: 1px solid var(--border-1); }
.vtip-total { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0; }
.vtip-total span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.vtip-total b { font-family: var(--font-sans); font-weight: 600; font-size: 18px; color: #fff; }
.vtip-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-200); padding: 3px 0; }
.vtip-row span:last-child { color: #fff; }

/* ---- Origo dashboard mock (Answer monitoring row) ---- */
.dash { background:#0a0a0a; border:1px solid var(--border-2); border-radius:var(--r-md); overflow:hidden; }
.dash-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 15px; border-bottom:1px solid var(--border-1); }
.dash-client { display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-weight:600; font-size:13px; color:#fff; }
.dash-av { width:20px; height:20px; border-radius:6px; background:linear-gradient(#16b9f3,#00a2dd); color:#022; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.dash-active { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#3DDC97; margin-left:2px; }
.dash-active .dot { width:5px; height:5px; border-radius:50%; background:#3DDC97; }
.dash-tabs { display:flex; gap:14px; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint); }
.dash-tabs .on { color:#fff; }
.dash-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-1); }
.dash-kpi { background:#0a0a0a; padding:14px 15px; display:flex; flex-direction:column; gap:6px; }
.dash-kpi b { font-family:var(--font-sans); font-weight:600; font-size:21px; color:#fff; letter-spacing:-.02em; line-height:1; display:flex; align-items:baseline; gap:6px; }
.dash-up { font-family:var(--font-mono); font-size:9.5px; font-style:normal; color:#3DDC97; font-weight:500; }
.dash-kpi > span { font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#8A8A8A; }
.dash-body { display:grid; grid-template-columns:1.4fr 1fr; gap:1px; background:var(--border-1); border-top:1px solid var(--border-1); }
.dash-panel { background:#0a0a0a; padding:15px; min-width:0; }
.dash-phead { display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:#8A8A8A; margin-bottom:13px; }
.dash-pill { border:1px solid var(--border-2); border-radius:999px; padding:2px 8px; color:var(--fg-muted); flex:none; }
.dash-stats { display:flex; gap:20px; margin-bottom:6px; }
.dash-stats span { display:flex; flex-direction:column; gap:3px; }
.dash-stats b { font-family:var(--font-sans); font-weight:600; font-size:18px; color:#fff; line-height:1; }
.dash-stats i { font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:#8A8A8A; font-style:normal; }
.dash-spark { width:100%; height:84px; display:block; }
.dash-mix { display:flex; flex-direction:column; align-items:center; }
.dash-donut { width:116px; height:116px; }
.dash-donut-n { fill:#fff; font-family:var(--font-sans); font-weight:600; font-size:22px; }
.dash-donut-l { fill:#8A8A8A; font-family:var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; }
.dash-legend { display:flex; flex-direction:column; gap:7px; width:100%; margin-top:13px; }
.dash-legend > div { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--ink-200); text-transform:uppercase; }
.dash-legend i { margin-left:auto; color:#fff; font-style:normal; }
.dash-dot { width:8px; height:8px; border-radius:50%; flex:none; }

/* responsive: stack rows on tablet/phone, drop the dashed divider */
@media (max-width: 900px) {
  .vrow, .vrow.reverse { grid-template-columns: 1fr; }
  .vrow.reverse .vtext, .vrow.reverse .vpanel { order: initial; }
  .vrow .vpanel, .vrow.reverse .vpanel { border-left: none; border-right: none; border-top: 1px dashed var(--border-2); }
  .vtext { padding: 32px 26px !important; }
  .vpanel { padding: 28px 26px !important; }
  .vpipe { grid-template-columns: minmax(0, 1fr); }
  /* let the node labels wrap instead of overflowing the panel on phones */
  .vnode-o { white-space: normal; overflow: visible; text-overflow: clip; }
  .vout-q, .vout-a { overflow-wrap: anywhere; }
}
@media (max-width: 560px) {
  .vkpis { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .vtip { right: 4%; width: 168px; }
  .vtext h3 { font-size: 23px; }
  .dash-body { grid-template-columns: 1fr; }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-top { gap: 8px; }
  .dash-tabs { gap: 10px; }
  .dash-tabs span:nth-child(n+2) { display: none; }   /* phones: show only the active Overview tab */
}

/* citation sources table */
.vsrc { display: flex; flex-direction: column; border: 1px solid var(--border-2); border-radius: var(--r-md); overflow: hidden; background: #0b0b0b; }
.vsrc-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--border-1); }
.vsrc-head span:first-child { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8A8A8A; }
.vsrc-q { font-family: var(--font-mono); font-size: 11px; color: var(--ink-200); }
.vsrc-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border-1); }
.vsrc-row:last-of-type { border-bottom: none; }
.vsrc-row.own { background: rgba(255,255,255,.03); }
.vsrc-d { font-family: var(--font-sans); font-size: 14px; color: var(--fg-muted); }
.vsrc-row.own .vsrc-d { color: #fff; font-weight: 600; }
.vsrc-p { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-2); color: var(--fg-muted); white-space: nowrap; }
.vsrc-p.p-primary { background: #34D399; color: #053a28; border-color: #34D399; }
.vsrc-p.p-not { color: #5a5a5a; }
.vsrc-v { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; min-width: 62px; text-align: right; }
.vsrc-ok { color: #34D399; }
.vsrc-dash { color: #4a4a4a; }
.vsrc-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-1); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-200); }
.vsrc-foot .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.8s infinite; }

/* source page mock */
.vdoc { border: 1px solid var(--border-2); border-radius: var(--r-md); overflow: hidden; background: #0b0b0b; }
.vdoc-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border-1); }
.vdoc-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-3); }
.vdoc-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.vdoc-block { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: start; }
.vdoc-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #8A8A8A; border: 1px solid var(--border-2); border-radius: 6px; padding: 3px 7px; text-align: center; }
.vdoc-lines { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vdoc-line { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-200); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdoc-line.h { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: #fff; letter-spacing: -.01em; }
.vdoc-block.code .vdoc-line { color: #8A8A8A; }
.vdoc-foot { padding: 11px 16px; border-top: 1px solid var(--border-1); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8A8A8A; }

/* ---- share-of-voice bars ---- */
.sharebars .bars { display: flex; gap: 14px; align-items: flex-end; height: 360px; max-width: 760px; margin: 52px auto 0; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.bar-track { position: relative; width: 100%; flex: 1; border-radius: 22px; overflow: hidden; display: flex; align-items: flex-end;
  background-color: #0b0b0b;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px);
  border: 1px solid var(--border-1); }
.bar-fill { position: relative; width: 100%; border-radius: 22px; background: rgba(255,255,255,.16);
  transition: height .9s cubic-bezier(.16,1,.3,1); display: flex; align-items: flex-start; justify-content: center; min-height: 0; }
.bar-col.you .bar-fill { background: #fff; }
.bar-val { font-family: var(--font-sans); font-weight: 600; font-size: 18px; color: #fff; padding-top: 14px; }
.bar-col.you .bar-val { color: #000; }
.bar-tip { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); background: #fff; color: #000;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 8px; white-space: nowrap; }
.bar-tip::after { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: #fff; }
.bar-label { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8A8A8A; text-align: center; }
@media (max-width: 640px) { .sharebars .bars { height: 280px; gap: 8px; } .bar-val { font-size: 14px; } .bar-label { font-size: 9px; letter-spacing: .06em; } }

/* ---- color accent layer: live signals + citations (cyan, over the monochrome base) ---- */
.vsrc-foot .dot, .vout-stamp .dot, .live .dot, .answer .pulse i, .video-head .vdot { background: #00AEEF; }
.answer .body .cite { background: #00AEEF; color: #04222e; border-bottom: none; }
.chip.lead { color: #00AEEF; border-color: rgba(0,174,239,.5); background: rgba(0,174,239,.12); }