/* Live product visuals — hero dashboard + bento graphs (src/components/live).
   Colours come from the site theme (webflow.css :root): page #060910,
   brand #f66f14, peach #ffad75, stroke #f7721826. */

.lv-canvas {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.lv-canvas-inner {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.lv-dim { color: #8b8f9c; }
.lv-good { color: #3ecf8e; }
.lv-warn { color: #ff8a3d; }

/* ============================================================ Hero dashboard */

.lv-hero { border-radius: 8px; }

.lv-dash {
  width: 1672px;
  height: 941px;
  background: #07090d;
  color: #fff;
  font-family: var(--pragraph-font);
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.lv-dash *,
.lv-g * { box-sizing: border-box; }

.lv-card {
  background: linear-gradient(180deg, #11141b 0%, #0b0d12 100%);
  border: 1px solid #f7721840;
  border-radius: 14px;
  box-shadow: inset 0 -14px 32px -12px #f6701430, 0 0 0 1px #00000060;
}

.lv-topbar {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 62px;
  border-bottom: 1px solid #ffffff12;
}

.lv-logo {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: Inter, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  width: 260px;
}
.lv-logo-icon { height: 2.75em; width: auto; }
.lv-logo em { font-style: normal; color: var(--color--brand-color); }

.lv-tabs {
  display: flex;
  gap: 44px;
  font-size: 18px;
  color: #b9b4c6;
}
.lv-tabs .is-active {
  color: #fff;
  position: relative;
}
.lv-tabs .is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -28px;
  height: 2px;
  background: var(--color--brand-color);
}

.lv-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.lv-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #d8d3e2;
  padding: 7px 14px;
  border: 1px solid #ffffff1a;
  border-radius: 999px;
}

.lv-live-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3ecf8e;
}
.lv-live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #3ecf8e;
  animation: lv-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.lv-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffad75, #f66f14);
}

.lv-pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 62px 0;
}

.lv-h1 {
  font-family: var(--main-font);
  font-size: 36px;
  font-weight: 600;
}

.lv-sub {
  margin-top: 8px;
  font-size: 18px;
  color: #a9a4b6;
}

.lv-button {
  padding: 13px 22px;
  border: 1px solid #f7721866;
  border-radius: 10px;
  font-size: 18px;
  color: #fff;
  background: #f66f1414;
}

.lv-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 26px 60px 0;
}

.lv-kpi {
  position: relative;
  height: 128px;
  padding: 18px 22px;
  overflow: hidden;
}

.lv-kpi-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  color: var(--color--brand-color);
  background: #f66f141f;
}
.lv-kpi-icon.is-good {
  color: #3ecf8e;
  background: #3ecf8e1a;
}

.lv-kpi-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #c9c4d5;
}

.lv-kpi-value {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.lv-kpi-delta {
  margin-top: 8px;
  font-size: 15px;
  color: #a9a4b6;
}

.lv-spark {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 104px;
  height: 40px;
  fill: none;
  stroke: var(--color--brand-color);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px #f66f1466);
}
.lv-spark.is-good {
  stroke: #3ecf8e;
  filter: drop-shadow(0 0 6px #3ecf8e55);
}

.lv-panels {
  display: grid;
  grid-template-columns: 745px 1fr;
  gap: 22px;
  padding: 22px 60px 0;
}

.lv-panel {
  height: 548px;
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
}

.lv-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.lv-panel-title {
  font-family: var(--main-font);
  font-size: 22px;
  font-weight: 600;
}

.lv-panel-sub {
  margin-top: 6px;
  font-size: 16px;
  color: #a9a4b6;
}

.lv-pill {
  font-size: 15px;
  color: #d8d3e2;
  padding: 8px 14px;
  border: 1px solid #ffffff1a;
  border-radius: 10px;
}

/* Live stream */
.lv-rows {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  height: 372px;
  overflow: hidden;
}

.lv-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
  padding: 0 6px;
  border-bottom: 1px solid #ffffff0d;
  transition: opacity 0.5s;
}
.lv-row.is-fading { opacity: 0.35; }
.lv-row.is-new { animation: lv-row-in 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.lv-row.is-new .lv-tag { animation: lv-pop 0.5s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

.lv-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.lv-dot.is-employee { background: #f66f14; }
.lv-dot.is-customer { background: #3987e5; }

.lv-row-main { flex: 1; min-width: 0; }
.lv-row-tool { font-size: 18px; }
.lv-row-who { font-size: 14px; color: #8b8f9c; margin-top: 2px; }

.lv-tag {
  font-size: 14px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid;
}
.lv-tag.is-employee { color: #ffad75; border-color: #f66f1455; background: #f66f1414; }
.lv-tag.is-customer { color: #8ab8f2; border-color: #3987e555; background: #3987e514; }

.lv-row-cost {
  width: 76px;
  text-align: right;
  font-size: 17px;
  color: #d8d3e2;
}

.lv-split { margin-top: auto; }

.lv-split-labels {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #c9c4d5;
}
.lv-split-labels span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lv-split-bar {
  display: flex;
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #ffffff10;
}
.lv-split-bar .is-employee { background: #f66f14; transition: width 0.7s ease-out; }
.lv-split-bar .is-customer { flex: 1; background: #3987e5; }

/* Team budgets */
.lv-teams {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 30px;
}

.lv-team-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
}

.lv-team-amount {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lv-badge {
  font-size: 13px;
  font-weight: 600;
  color: #060910;
  background: #ffad75;
  border-radius: 6px;
  padding: 2px 7px;
  animation: lv-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lv-track {
  position: relative;
  height: 12px;
  margin-top: 10px;
  border-radius: 999px;
  background: #ffffff0f;
}

.lv-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #a8460a, #f66f14);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.lv-fill.is-hot {
  background: linear-gradient(90deg, #f66f14, #ffad75);
  box-shadow: 0 0 14px #f66f1466;
}

.lv-alert-mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: #ffffffaa;
  border-radius: 2px;
}

.lv-insight {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid #f7721833;
  border-radius: 12px;
  background: #f66f140d;
}
.lv-insight.is-new { animation: lv-row-in 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

.lv-insight-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--color--brand-color);
  background: #f66f141f;
}

.lv-insight-body { flex: 1; }
.lv-insight-text { font-size: 17px; line-height: 1.35; }
.lv-insight-meta { margin-top: 4px; font-size: 14px; color: #8b8f9c; }

.lv-insight-tag {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffad75;
  background: #f66f1426;
  vertical-align: 2px;
}

.lv-insight-arrow {
  font-size: 22px;
  color: var(--color--brand-color);
}

/* ============================================================ Bento graphs */

.lv-graph { margin-top: auto; }

.lv-g {
  position: relative;
  width: 420px;
  color: #fff;
  font-family: var(--pragraph-font);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.3s;
}

.lv-g-eyebrow {
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #a9a4b6;
}

/* 1. Spend donut */
.lv-g-spend {
  height: 250px;
  padding: 6px 28px 0;
}

.lv-g-chiprow {
  height: 34px;
  display: flex;
  justify-content: center;
}

.lv-g-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid #f7721855;
  background: #f66f1414;
  color: #ffad75;
  white-space: nowrap;
}
.lv-g-chip.is-new { animation: lv-chip-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }

.lv-g-spend-body {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 8px;
}

.lv-donut {
  width: 150px;
  height: 150px;
  flex: none;
  transform: rotate(-90deg);
}

.lv-donut-track {
  fill: none;
  stroke: #ffffff0d;
  stroke-width: 18;
}

.lv-donut-seg {
  fill: none;
  stroke-width: 18;
  transition: stroke-dasharray 0.8s cubic-bezier(0.16, 1, 0.3, 1), stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 0 4px #f66f1440);
}

.lv-donut text {
  transform: rotate(90deg);
  transform-origin: 80px 80px;
  text-anchor: middle;
  fill: #fff;
}
.lv-donut-label { font-size: 11px; fill: #a9a4b6 !important; }
.lv-donut-value { font-size: 19px; font-weight: 600; }

.lv-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.lv-legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
}
.lv-legend-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.lv-legend-name { flex: 1; color: #d8d3e2; }
.lv-legend-value { color: #fff; }

/* 2. Budget meter */
.lv-g-budget {
  height: 250px;
  padding: 18px 30px 0;
}

.lv-g-budget-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.lv-g-big {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 600;
}
.lv-g-big .lv-dim { font-size: 16px; font-weight: 400; }

.lv-g-state {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  color: #3ecf8e;
  background: #3ecf8e1a;
  transition: color 0.3s, background 0.3s;
}
.lv-g-state.is-alert { color: #ffad75; background: #f66f1426; }
.lv-g-state.is-capped { color: #060910; background: #f66f14; }

.lv-g-meter {
  position: relative;
  height: 14px;
  margin-top: 22px;
  border-radius: 999px;
  background: #ffffff0f;
}

.lv-g-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #a8460a, #f66f14);
}
.lv-g-meter-fill.is-hot {
  background: linear-gradient(90deg, #f66f14, #ffad75);
  box-shadow: 0 0 16px #f66f1477;
}

.lv-g-meter-mark {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: #ffffffcc;
}
.lv-g-meter-mark span {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #a9a4b6;
  white-space: nowrap;
}

.lv-g-events {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 44px;
}

.lv-g-event {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #5f6270;
  transition: color 0.3s;
}
.lv-g-event.is-on { color: #fff; animation: lv-chip-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

.lv-g-event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a3d47;
  transition: background 0.3s, box-shadow 0.3s;
}
.lv-g-event.is-on .lv-g-event-dot { background: #ffad75; box-shadow: 0 0 10px #ffad75; }
.lv-g-event.is-capped .lv-g-event-dot { background: #f66f14; box-shadow: 0 0 10px #f66f14; }

/* 3. Compact flow */
.lv-g-compact {
  height: 540px;
  padding: 26px 30px 0;
}

.lv-g-sources {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.lv-g-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #ffffff1f;
  background: #ffffff08;
}

.lv-g-term {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #ffad75;
}

.lv-g-lane {
  position: relative;
  margin: 0 auto;
  width: 200px;
}
.lv-g-lane-in { height: 150px; }
.lv-g-lane-out { height: 90px; }

.lv-g-tok {
  position: absolute;
  left: 50%;
  top: 0;
  height: 12px;
  border-radius: 4px;
  opacity: 0;
  animation: lv-tok-in 3s linear infinite;
}
.lv-g-tok.is-keep { background: #d8d3e2; }
.lv-g-tok.is-repeat { background: #ffad75; animation-name: lv-tok-merge; }
.lv-g-tok.is-prune { background: #5f6270; animation-name: lv-tok-prune; }
.lv-g-tok.is-out {
  background: linear-gradient(90deg, #f66f14, #ffad75);
  animation-name: lv-tok-out;
}

.lv-g-gate {
  position: relative;
  margin: 0 auto;
  width: 300px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid #f7721888;
  background: linear-gradient(180deg, #1a120c, #0d0b0a);
  box-shadow: 0 0 40px -6px #f66f1466, inset 0 -10px 24px -10px #f6701466;
  text-align: center;
}

.lv-g-gate-title {
  font-family: var(--main-font);
  font-size: 18px;
  font-weight: 600;
}

.lv-g-gate-tags {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.lv-g-gate-tag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #f7721866;
  color: #ffad75;
  animation: lv-tag-pulse 3s ease-in-out infinite;
}
.lv-g-gate-tag.is-b { animation-delay: 1.5s; }

.lv-g-model {
  margin: 0 auto;
  width: max-content;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid #ffffff1f;
  background: #ffffff08;
}

.lv-g-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}

.lv-g-stat {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #ffffff14;
  background: #ffffff06;
}

.lv-g-stat-value {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 600;
}
.lv-g-stat-value.is-good { color: #3ecf8e; }

.lv-g-compact.is-paused .lv-g-tok,
.lv-g-compact.is-paused .lv-g-gate-tag { animation-play-state: paused; }

.lv-g-compact.is-still .lv-g-tok {
  animation: none;
  opacity: 1;
  transform: translate(-50%, 0);
}

.lv-fit { width: 100%; }

/* Phones: cards with a live graph grow to fit it instead of the fixed 310 px */
@media screen and (max-width: 767px) {
  #readmore .home-grid-box-wrapper.bento-live {
    height: auto;
    min-height: 0;
  }

  #readmore .bento-live .home-grid-image-holder {
    flex: 0 0 auto;
    overflow: visible;
    padding-bottom: 12px;
  }
}

/* ============================================================ Feature visuals (FeatureGraphs.jsx) */

/* Card frame drawn inside the canvas — matches .home-grid-box */
.lv-frame {
  position: relative;
  width: 460px;
  height: 546px;
  padding: 24px 24px 0;
  border-radius: 24px;
  border: 1px solid #d1aad726;
  background: linear-gradient(180deg, #13151b 0%, #0b0d11 100%);
  box-shadow: inset 0 -12px 32px 0 #f670142e;
  color: #fff;
  font-family: var(--pragraph-font);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

.lv-f-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lv-f-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #d8d3e2;
  padding: 5px 11px;
  border: 1px solid #ffffff1a;
  border-radius: 999px;
}

/* Connect */
.lv-f-wires {
  position: absolute;
  inset: 0;
  width: 460px;
  height: 546px;
  pointer-events: none;
}

.lv-f-wire {
  fill: none;
  stroke: #f7721866;
  stroke-width: 1.5;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.lv-f-connect.is-on .lv-f-wire { stroke-dashoffset: 0; }

.lv-f-packet { fill: #ffad75; filter: drop-shadow(0 0 5px #f66f14); }
.lv-f-packet.is-sdk { fill: #8ab8f2; filter: drop-shadow(0 0 5px #3987e5); }
.lv-f-packet.is-proxy { fill: #3ecf8e; filter: drop-shadow(0 0 5px #3ecf8e); }

.lv-f-source {
  position: absolute;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid #ffffff17;
  background: #ffffff07;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.6s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.lv-f-connect.is-on .lv-f-source { opacity: 1; transform: none; }

.lv-f-source-name { font-size: 15px; }

.lv-f-source-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
}

.lv-f-method {
  padding: 1px 7px;
  border-radius: 5px;
  font-weight: 600;
  color: #ffad75;
  background: #f66f1424;
}
.lv-f-method.is-sdk { color: #8ab8f2; background: #3987e524; }
.lv-f-method.is-proxy { color: #3ecf8e; background: #3ecf8e1f; }

.lv-f-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a9a4b6;
}
.lv-f-ok-dot { width: 6px; height: 6px; border-radius: 50%; background: #3ecf8e; }

.lv-f-code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #a9a4b6;
}

.lv-f-hub {
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid #f7721899;
  background: linear-gradient(180deg, #2a160a, #120c08);
  box-shadow: 0 0 46px -4px #f66f1477, inset 0 -10px 24px -8px #f6701488;
  animation: lv-hub-glow 2.6s ease-in-out infinite;
}

.lv-f-hub-icon { height: 52px; width: auto; }

.lv-f-hub-label {
  position: absolute;
  width: 120px;
  text-align: center;
  font-family: var(--main-font);
  font-size: 16px;
  font-weight: 600;
}

.lv-f-foot {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 16px;
  border-top: 1px solid #ffffff12;
}

.lv-f-foot-value {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 600;
}

.lv-f-foot-note { font-size: 13px; color: #a9a4b6; }

/* Ask */
.lv-f-ask-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--main-font);
  font-size: 17px;
  font-weight: 600;
}
.lv-f-spark { color: var(--color--brand-color); }

.lv-f-chat {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 0.3s;
}

.lv-f-bubble {
  align-self: flex-end;
  max-width: 330px;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  font-size: 14px;
  line-height: 1.4;
  background: #f66f14;
  color: #fff;
  opacity: 0;
}
.lv-f-bubble.is-on { opacity: 1; }

.lv-f-caret {
  display: inline-block;
  width: 2px;
  height: 15px;
  margin-left: 2px;
  vertical-align: -2px;
  background: #fff;
  animation: lv-blink 0.9s steps(1) infinite;
}

.lv-f-thinking {
  display: flex;
  gap: 5px;
  padding: 10px 2px;
}
.lv-f-thinking span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a9a4b6;
  animation: lv-dots 1s ease-in-out infinite;
}
.lv-f-thinking span:nth-child(2) { animation-delay: 0.15s; }
.lv-f-thinking span:nth-child(3) { animation-delay: 0.3s; }

.lv-f-answer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: lv-chip-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.lv-f-tool {
  align-self: flex-start;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #a9a4b6;
  border: 1px solid #ffffff1a;
}

.lv-f-chart {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #ffffff14;
  background: #ffffff06;
}

.lv-f-chart-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

.lv-f-bar-row {
  display: grid;
  grid-template-columns: 86px 1fr 62px;
  align-items: center;
  gap: 10px;
  height: 24px;
  font-size: 12px;
}
.lv-f-bar-name { color: #c9c4d5; }
.lv-f-bar-value { text-align: right; color: #d8d3e2; }

.lv-f-bar-track {
  height: 10px;
  border-radius: 999px;
  background: #ffffff0d;
}

.lv-f-bar {
  height: 100%;
  border-radius: 999px;
  background: #a8460a;
}
.lv-f-bar.is-top {
  background: linear-gradient(90deg, #f66f14, #ffad75);
  box-shadow: 0 0 12px #f66f1466;
}

.lv-f-insight,
.lv-f-actions {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.lv-f-insight.is-on,
.lv-f-actions.is-on { opacity: 1; transform: none; }

.lv-f-insight {
  font-size: 14px;
  line-height: 1.45;
  color: #d8d3e2;
}
.lv-f-insight b { color: #ffad75; font-weight: 600; }

.lv-f-actions {
  display: flex;
  gap: 8px;
}

.lv-f-action {
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid #ffffff1f;
  color: #d8d3e2;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.lv-f-action.is-done {
  color: #3ecf8e;
  border-color: #3ecf8e55;
  background: #3ecf8e14;
}

.lv-f-mcp {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #ffffff12;
  font-size: 13px;
  color: #a9a4b6;
}

.lv-f-mcp-plug {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 6px;
  color: #060910;
  background: #ffad75;
}

/* Value (wide bento card) */
.lv-v {
  height: 290px;
  padding: 10px 12px 0;
}

.lv-v-legend { font-size: 11px; color: #8b8f9c; }

.lv-v-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.lv-v-row-head {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.lv-v-share { font-size: 12px; color: #3ecf8e; }
.lv-v-share.is-risky { color: #ffad75; }

.lv-v-track {
  position: relative;
  height: 10px;
  margin-top: 7px;
  border-radius: 999px;
  background: #ffffff0d;
}

.lv-v-cost {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1f8f5f, #3ecf8e);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.lv-v-cost.is-risky {
  background: linear-gradient(90deg, #f66f14, #ffad75);
  box-shadow: 0 0 12px #f66f1466;
}

.lv-v-mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: #ffffff99;
}

.lv-v-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.lv-v .lv-g-stat { padding: 11px 14px; }
.lv-v .lv-g-stat-value { margin-top: 4px; font-size: 20px; }

@keyframes lv-hub-glow {
  0%, 100% { box-shadow: 0 0 36px -6px #f66f1466, inset 0 -10px 24px -8px #f6701488; }
  50% { box-shadow: 0 0 56px -2px #f66f1499, inset 0 -10px 24px -8px #f67014aa; }
}

@keyframes lv-blink {
  50% { opacity: 0; }
}

@keyframes lv-dots {
  0%, 100% { opacity: 0.3; transform: none; }
  50% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .lv-f-hub,
  .lv-f-thinking span { animation: none; }
}

/* ============================================================ Use case cards (UseCaseGraphs.jsx) */

.blog-grid-3x .uc-live .blog-item-holder {
  background: linear-gradient(180deg, #13151b 0%, #0b0d11 100%);
  border: 1px solid #d1aad726;
  box-shadow: inset 0 -12px 32px 0 #f670142e;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.blog-grid-3x .uc-live:hover .blog-item-holder {
  border-color: #f7721866;
  box-shadow: inset 0 -12px 40px 0 #f6701455, 0 0 40px -12px #f6701466;
}

/* text always visible on these cards (was hover-only) */
.blog-grid-3x .uc-live .blog-text-content,
.blog-grid-3x .uc-live:hover .blog-text-content {
  transform: none;
}

.lv-uc-fit,
.lv-uc-canvas { height: 100% !important; }

.lv-uc {
  position: relative;
  width: 370px;
  height: 420px;
  padding: 20px 22px 0;
  color: #fff;
  font-family: var(--pragraph-font);
  font-variant-numeric: tabular-nums;
}

.lv-uc-num {
  font-size: 12px;
  color: #8b8f9c;
}

/* 1. Bills gather into one total */
.lv-uc-bill {
  position: absolute;
  top: 20px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #ffffff1f;
  background: #171a21;
  box-shadow: 0 8px 20px -10px #000;
  font-size: 12px;
  color: #a9a4b6;
  white-space: nowrap;
  will-change: transform, opacity;
}
.lv-uc-bill b { font-size: 15px; font-weight: 600; color: #fff; }

.lv-uc-sum {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 40px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid #f7721888;
  background: linear-gradient(180deg, #2a160a, #120c08);
  box-shadow: 0 0 40px -8px #f66f1477;
  text-align: center;
  transform-origin: 50% 50%;
}

.lv-uc-sum-value {
  margin-top: 6px;
  font-size: 34px;
  font-weight: 600;
}

.lv-uc-sum-split {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  font-size: 12px;
  color: #c9c4d5;
}
.lv-uc-sum-split span { display: inline-flex; align-items: center; gap: 6px; }
.lv-uc-sum-split i { width: 8px; height: 8px; border-radius: 50%; }
.lv-uc-sum-split i.is-employee { background: #f66f14; }
.lv-uc-sum-split i.is-customer { background: #3987e5; }

/* 2. Claude Code cost vs output */
.lv-uc-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}

.lv-uc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #ffffff1f;
  background: #ffffff08;
}

.lv-uc-outputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.lv-uc-output { text-align: center; }

.lv-uc-output-bar {
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid #ffffff1a;
}
.lv-uc-output-bar div {
  width: 34px;
  border-radius: 6px 6px 0 0;
  background: #a8460a;
}
.lv-uc-output-bar div.is-key {
  background: linear-gradient(180deg, #ffad75, #f66f14);
  box-shadow: 0 0 16px #f66f1466;
}

.lv-uc-output-value { margin-top: 6px; font-size: 15px; font-weight: 600; }
.lv-uc-output-label { font-size: 11px; color: #8b8f9c; }

.lv-uc-verdict {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid #ffffff14;
  background: #ffffff06;
  transition: border-color 0.4s, background 0.4s;
}
.lv-uc-verdict b { font-size: 20px; font-weight: 600; }
.lv-uc-verdict.is-on { border-color: #3ecf8e55; background: #3ecf8e12; }
.lv-uc-verdict.is-on b { color: #3ecf8e; }

/* 3. Customers losing money */
.lv-uc-table-head,
.lv-uc-tr {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  align-items: center;
  padding: 0 10px;
}

.lv-uc-table-head {
  height: 26px;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8b8f9c;
}

.lv-uc-tr {
  height: 46px;
  margin-top: 4px;
  border-radius: 10px;
  font-size: 14px;
  color: #d8d3e2;
  border: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.lv-uc-tr span:not(.lv-uc-name):not(.lv-uc-flag) { text-align: right; }
.lv-uc-name { color: #fff; }

.lv-uc-tr.is-scan { background: #ffffff0a; border-color: #ffffff1a; }
.lv-uc-tr.is-loss {
  background: #f66f141a;
  border-color: #f7721877;
  box-shadow: 0 0 22px -8px #f66f1488;
}
.lv-uc-tr.is-loss span:nth-child(3) { color: #ffad75; }

.lv-uc-flag {
  position: absolute;
  right: 10px;
  top: -11px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  color: #060910;
  background: #f66f14;
  animation: lv-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================ Keyframes */

@keyframes lv-ping {
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

@keyframes lv-row-in {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}

@keyframes lv-pop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: none; }
}

@keyframes lv-chip-in {
  from { opacity: 0; transform: translateY(6px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* token blocks travel down into the gate */
@keyframes lv-tok-in {
  0% { opacity: 0; transform: translate(-50%, 0); }
  10% { opacity: 1; }
  85% { opacity: 1; transform: translate(-50%, 132px); }
  100% { opacity: 0; transform: translate(-50%, 140px); }
}

/* repeated context collapses as it nears the gate */
@keyframes lv-tok-merge {
  0% { opacity: 0; transform: translate(-50%, 0) scaleX(1); }
  10% { opacity: 1; }
  60% { opacity: 1; transform: translate(-50%, 90px) scaleX(1); }
  85% { opacity: 0.9; transform: translate(-50%, 132px) scaleX(0.3); }
  100% { opacity: 0; transform: translate(-50%, 140px) scaleX(0.2); }
}

/* irrelevant blocks drop out sideways */
@keyframes lv-tok-prune {
  0% { opacity: 0; transform: translate(-50%, 0); }
  10% { opacity: 0.9; }
  55% { opacity: 0.9; transform: translate(-50%, 80px); }
  80% { opacity: 0; transform: translate(40%, 104px) rotate(14deg); }
  100% { opacity: 0; transform: translate(40%, 104px) rotate(14deg); }
}

/* fewer, smaller blocks continue to the model */
@keyframes lv-tok-out {
  0% { opacity: 0; transform: translate(-50%, 0); }
  12% { opacity: 1; }
  80% { opacity: 1; transform: translate(-50%, 66px); }
  100% { opacity: 0; transform: translate(-50%, 74px); }
}

@keyframes lv-tag-pulse {
  0%, 100% { background: transparent; box-shadow: none; }
  40% { background: #f66f1433; box-shadow: 0 0 14px #f66f1455; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-live-dot::after,
  .lv-g-gate-tag { animation: none; }
}