/* ============================================================
   a360 — Brand visualisations for the Solutions pages.

   One "stage" component per vendor page: a fake application
   window that borrows the vendor's own UI language (colours,
   corner radius, chrome, type) so the product is explained by
   showing it rather than describing it.

   Everything inside the window is driven by CSS custom props
   set on .bstage by js/brandviz.js, so the same primitives
   (app grid, kanban, list, chat, canvas, chart, flow, tiles,
   3D viewport) render as Google, SAP, Figma or Blender purely
   by swapping the kit.

   Custom props (all set inline per stage):
     --bv-a    primary brand accent
     --bv-1..6 secondary accents (icon colours)
     --bv-bg   app canvas background
     --bv-srf  card / panel surface
     --bv-side sidebar surface
     --bv-txt  primary text on the app surface
     --bv-mut  secondary text
     --bv-ln   hairlines
     --bv-r    corner radius of app chrome
     --bv-font UI type stack
   ============================================================ */

.bstage {
  --bv-r: 12px;
  --bv-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Brand-tinted glow behind the window, so each vendor page reads
   in that vendor's colour before you look at anything. */
.bstage__glow {
  position: absolute;
  inset: -6% -4% 12%;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.2;
  background:
    radial-gradient(50% 60% at 22% 40%, var(--bv-a), transparent 70%),
    radial-gradient(46% 56% at 78% 55%, var(--bv-2, var(--bv-a)), transparent 70%);
  pointer-events: none;
}
:root[data-theme="dark"] .bstage__glow { opacity: 0.3; }

.bstage__head { position: relative; z-index: 1; margin-bottom: clamp(20px, 3vh, 30px); }
.bstage__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bv-a); margin-bottom: 12px;
}
.bstage__eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--bv-a), transparent);
}
.bstage__title {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(24px, 2.5vw, 38px); line-height: 1.15; color: var(--heading);
}
:root[data-theme="dark"] .bstage__title { color: var(--ink); }
.bstage__lead {
  margin-top: 12px; max-width: 62ch;
  font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.7; color: var(--muted);
}

/* ---------- Panel switcher ---------- */
.bstage__tabs {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.bstage__tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.2s;
}
.bstage__tab:hover { color: var(--ink); border-color: color-mix(in srgb, var(--bv-a) 50%, transparent); transform: translateY(-1px); }
.bstage__tab[aria-selected="true"] {
  background: var(--bv-a); border-color: transparent; color: #fff;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--bv-a) 90%, transparent);
}
.bstage__tab i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: currentColor; opacity: 0.55;
}
.bstage__tab[aria-selected="true"] i { opacity: 1; }

/* ---------- The application window ---------- */
.bstage__win {
  position: relative; z-index: 1;
  border-radius: calc(var(--bv-r) + 8px);
  overflow: hidden;
  background: var(--bv-bg);
  color: var(--bv-txt);
  font-family: var(--bv-font);
  border: 1px solid color-mix(in srgb, var(--bv-txt) 12%, transparent);
  box-shadow: 0 40px 90px -50px rgba(11, 56, 79, 0.65), 0 2px 8px -4px rgba(0, 0, 0, 0.18);
}
:root[data-theme="dark"] .bstage__win { box-shadow: 0 40px 90px -46px rgba(0, 0, 0, 0.9); }

/* Fake title bar — the only chrome that is the same for every vendor,
   so the window reads as "an app" before the brand takes over. */
.bstage__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px; height: 38px; flex: none;
  background: color-mix(in srgb, var(--bv-txt) 5%, var(--bv-srf));
  border-bottom: 1px solid var(--bv-ln);
}
.bstage__dots { display: flex; gap: 6px; }
.bstage__dots span { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--bv-txt) 18%, transparent); }
.bstage__dots span:first-child { background: #ff5f57; }
.bstage__dots span:nth-child(2) { background: #febc2e; }
.bstage__dots span:nth-child(3) { background: #28c840; }
.bstage__url {
  flex: 1; max-width: 320px; margin-inline: auto;
  padding: 4px 12px; border-radius: 999px; text-align: center;
  background: color-mix(in srgb, var(--bv-txt) 7%, transparent);
  font-size: 11.5px; color: var(--bv-mut); letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bstage__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--bv-mut);
}
.bstage__live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bv-a);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--bv-a) 60%, transparent);
  animation: bvPulse 2.2s ease-out infinite;
}
@keyframes bvPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bv-a) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Panel viewport: fixed ratio so switching panels never jumps the page. */
.bstage__view {
  position: relative;
  aspect-ratio: 16 / 8.6;
  min-height: 340px;
}

.bvp {
  position: absolute; inset: 0;
  display: flex; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease;
}
.bvp.is-active { opacity: 1; visibility: visible; }

.bstage__cap {
  position: relative; z-index: 1;
  display: flex; gap: 10px; align-items: baseline;
  margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--muted);
}
.bstage__cap b { color: var(--bv-a); font-weight: 600; white-space: nowrap; }

/* Compact variant used on the individual-licence pages. */
.bstage--compact .bstage__view { aspect-ratio: 16 / 7; min-height: 280px; }

/* ============================================================
   Shared app furniture — sidebar, topbar, search
   ============================================================ */
.bvside {
  flex: none; width: 168px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 10px;
  background: var(--bv-side);
  border-right: 1px solid var(--bv-ln);
}
@media (max-width: 780px) { .bvside { width: 56px; padding: 12px 8px; } }
.bvside__brand {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 8px 14px;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--bv-sidetxt, var(--bv-txt));
}
.bvside__brand span { width: 22px; height: 22px; border-radius: 6px; flex: none; display: grid; place-items: center; background: var(--bv-a); color: #fff; font-size: 11px; font-weight: 800; }
.bvside__i {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 12.8px; font-weight: 500;
  color: color-mix(in srgb, var(--bv-sidetxt, var(--bv-txt)) 72%, transparent);
  white-space: nowrap;
}
.bvside__i svg { width: 15px; height: 15px; flex: none; opacity: 0.8; }
.bvside__i.is-on {
  background: color-mix(in srgb, var(--bv-a) 15%, transparent);
  color: var(--bv-a); font-weight: 600;
}
.bvside__i.is-on svg { opacity: 1; }
@media (max-width: 780px) { .bvside__brand b, .bvside__i em { display: none; } .bvside__i { justify-content: center; padding: 9px 0; } }
.bvside__i em { font-style: normal; }

.bvtop {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; flex: none;
  border-bottom: 1px solid var(--bv-ln);
  background: var(--bv-srf);
}
.bvtop__t { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--bv-txt); }
.bvtop__s {
  flex: 1; max-width: 300px; height: 30px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--bv-txt) 6%, transparent);
  font-size: 12px; color: var(--bv-mut);
}
.bvtop__s svg { width: 13px; height: 13px; opacity: 0.6; }
.bvtop__r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bvtop__btn {
  padding: 6px 13px; border-radius: 999px;
  background: var(--bv-a); color: #fff; font-size: 12px; font-weight: 600;
}
.bvtop__av { display: flex; }
.bvtop__av span {
  width: 24px; height: 24px; border-radius: 50%; margin-left: -7px;
  border: 2px solid var(--bv-srf);
  display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff;
}
.bvmain { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bvbody { flex: 1; padding: clamp(12px, 1.6vw, 22px); min-height: 0; overflow: hidden; }

/* ============================================================
   Primitive: app-launcher grid  (Google, Microsoft, Zoho, Odoo,
   Adobe CC, Canva templates)
   ============================================================ */
.bvgrid { display: flex; height: 100%; min-height: 0; }

/* Ghost content behind the launcher popover — the "app you were in". */
.bvghost { flex: 1; padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.bvghost__row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
}
.bvghost__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--bv-txt) 16%, transparent); }
.bvghost__l { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--bv-txt) 11%, transparent); }
.bvghost__l--w { width: 34%; }
.bvghost__l--m { width: 22%; }
.bvghost__l--s { width: 14%; }
.bvghost__l--f { flex: 1; }
.bvghost__tag { margin-left: auto; height: 16px; width: 46px; border-radius: 99px; background: color-mix(in srgb, var(--bv-a) 18%, transparent); flex: none; }

/* The popover itself — the shape from the reference screenshot. */
.bvlaunch {
  align-self: flex-start;
  margin: 10px 14px 10px -70px;
  position: relative; z-index: 2;
  width: min(58%, 330px); flex: none;
  padding: 18px 10px;
  border-radius: calc(var(--bv-r) + 10px);
  background: var(--bv-srf);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--bv-ln);
}
@media (max-width: 780px) { .bvlaunch { margin: 10px; width: auto; flex: 1; } .bvgrid .bvghost { display: none; } }
.bvlaunch__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.bvapp {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 4px 10px; border-radius: 12px;
  transition: background-color 0.2s;
  cursor: default;
}
.bvapp:hover { background: color-mix(in srgb, var(--bv-txt) 6%, transparent); }
.bvapp__ic {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bvapp:hover .bvapp__ic { transform: translateY(-3px) scale(1.08); }
.bvapp__ic svg { width: 22px; height: 22px; }
.bvapp__ic b { font-size: 12px; font-weight: 800; letter-spacing: -0.02em; }
.bvapp__n { font-size: 10.5px; font-weight: 500; color: var(--bv-mut); text-align: center; line-height: 1.2; }

/* Full-bleed app grid (no ghost shell) — Adobe CC, Zoho One, Odoo. */
.bvapps {
  display: grid; gap: clamp(6px, 0.8vw, 12px);
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  align-content: start;
}
@media (max-width: 780px) { .bvapps { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); } }
.bvapps .bvapp {
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
  padding: 14px 6px 11px;
}
.bvapps .bvapp:hover { border-color: color-mix(in srgb, var(--bv-a) 55%, transparent); }
.bvapps .bvapp__n { font-size: 11px; }

/* ============================================================
   Primitive: kanban / pipeline
   ============================================================ */
.bvkan { display: grid; gap: 10px; height: 100%; align-items: start; grid-auto-flow: column; grid-auto-columns: 1fr; min-height: 0; }
.bvkan__col {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 10px; border-radius: var(--bv-r);
  background: color-mix(in srgb, var(--bv-txt) 4%, transparent);
}
.bvkan__h { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--bv-mut); text-transform: uppercase; }
.bvkan__h i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bvkan__h b { margin-left: auto; font-weight: 600; opacity: 0.7; }
.bvkan__card {
  padding: 10px 11px; border-radius: 10px;
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s, box-shadow 0.25s;
}
.bvkan__card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.4); }
.bvkan__card b { display: block; font-size: 12.3px; font-weight: 600; color: var(--bv-txt); line-height: 1.35; }
.bvkan__meta { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.bvkan__amt { font-size: 11.5px; font-weight: 700; color: var(--bv-a); }
.bvkan__av { width: 19px; height: 19px; border-radius: 50%; margin-left: auto; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; }
.bvkan__bar { height: 4px; border-radius: 99px; margin-top: 8px; background: color-mix(in srgb, var(--bv-txt) 10%, transparent); overflow: hidden; }
.bvkan__bar i { display: block; height: 100%; border-radius: 99px; background: var(--bv-a); }
.bvkan__card--fly { position: relative; z-index: 3; }

/* ============================================================
   Primitive: record list / board rows (monday, ClickUp, Bitrix)
   ============================================================ */
.bvlist { display: flex; flex-direction: column; gap: 0; height: 100%; min-height: 0; }
.bvlist__group {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 700; color: var(--bv-grp, var(--bv-a));
  margin: 0 0 8px;
}
.bvlist__group::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: currentColor; }
.bvlist__group span { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--bv-mut); }
.bvrow {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 1.9fr 92px 84px 1fr;
  padding: 9px 11px; border-radius: 8px;
  border-left: 3px solid var(--bv-grp, var(--bv-a));
  background: var(--bv-srf);
  border-block: 1px solid var(--bv-ln); border-right: 1px solid var(--bv-ln);
  margin-bottom: 5px;
  transition: transform 0.22s, box-shadow 0.22s;
}
.bvrow:hover { transform: translateX(3px); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.45); }
@media (max-width: 780px) { .bvrow { grid-template-columns: 1fr 84px; } .bvrow > :nth-child(n+3) { display: none; } }
.bvrow__n { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; color: var(--bv-txt); min-width: 0; }
.bvrow__n span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bvcheck {
  width: 15px; height: 15px; border-radius: 5px; flex: none;
  border: 1.6px solid color-mix(in srgb, var(--bv-txt) 28%, transparent);
  display: grid; place-items: center; color: transparent;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.bvcheck svg { width: 9px; height: 9px; }
.bvcheck.is-on { background: var(--bv-ok, #00c875); border-color: var(--bv-ok, #00c875); color: #fff; }
.bvpill {
  display: grid; place-items: center; height: 26px; border-radius: 6px;
  font-size: 10.8px; font-weight: 700; color: #fff; letter-spacing: 0.01em;
  padding-inline: 8px; white-space: nowrap;
  transition: background-color 0.4s ease;
}
.bvdate { font-size: 11px; color: var(--bv-mut); text-align: center; }
.bvtl { height: 20px; border-radius: 99px; background: color-mix(in srgb, var(--bv-txt) 8%, transparent); position: relative; overflow: hidden; }
.bvtl i { position: absolute; top: 0; bottom: 0; border-radius: 99px; }

/* ============================================================
   Primitive: KPI tiles (SAP Fiori, Azure, dashboards)
   ============================================================ */
.bvtiles {
  display: grid; gap: clamp(8px, 1vw, 13px);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-content: start; height: 100%;
}
@media (max-width: 780px) { .bvtiles { grid-template-columns: repeat(2, 1fr); } }
.bvtile {
  display: flex; flex-direction: column; gap: 5px;
  padding: 13px 14px; min-height: 96px;
  border-radius: var(--bv-r);
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s, box-shadow 0.25s;
}
.bvtile:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.45); }
.bvtile__k { font-size: 11.5px; font-weight: 600; color: var(--bv-txt); line-height: 1.3; }
.bvtile__s { font-size: 10.5px; color: var(--bv-mut); }
.bvtile__v { margin-top: auto; font-size: clamp(20px, 2.2vw, 28px); font-weight: 300; letter-spacing: -0.02em; line-height: 1; color: var(--bv-tint, var(--bv-a)); }
.bvtile__v u { text-decoration: none; font-size: 0.5em; margin-left: 2px; opacity: 0.75; }
.bvtile__spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 6px; }
.bvtile__spark i { flex: 1; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--bv-tint, var(--bv-a)) 45%, transparent); transform-origin: bottom; }
.bvtile--wide { grid-column: span 2; }
.bvtile__ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: var(--bv-tint, var(--bv-a)); }
.bvtile__ic svg { width: 15px; height: 15px; }

/* ============================================================
   Primitive: chart panel
   ============================================================ */
.bvchart { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 0; }
.bvchart__head { display: flex; align-items: baseline; gap: 12px; }
.bvchart__head h4 { font-size: 13.5px; font-weight: 700; color: var(--bv-txt); }
.bvchart__head span { font-size: 11.5px; color: var(--bv-mut); }
.bvchart__legend { margin-left: auto; display: flex; gap: 12px; }
.bvchart__legend b { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--bv-mut); }
.bvchart__legend i { width: 9px; height: 9px; border-radius: 3px; }
.bvbars { flex: 1; display: flex; align-items: flex-end; gap: clamp(6px, 1.2vw, 16px); padding-bottom: 22px; position: relative; min-height: 0; }
.bvbars::after { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: var(--bv-ln); }
.bvbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; position: relative; }
.bvbar__stack { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.bvbar__seg { border-radius: 4px 4px 0 0; transform-origin: bottom; }
.bvbar__seg:not(:first-child) { border-radius: 0; }
.bvbar__l { position: absolute; bottom: -20px; font-size: 10.5px; color: var(--bv-mut); }
.bvline { flex: 1; min-height: 0; }
.bvline svg { width: 100%; height: 100%; overflow: visible; }

/* ============================================================
   Primitive: AI / chat panel (Copilot, Gemini, Brain, Magic Studio)
   ============================================================ */
.bvchat { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; padding-inline: clamp(0px, 4vw, 60px); justify-content: center; }
.bvchat__hi {
  font-size: clamp(19px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25;
  background: linear-gradient(92deg, var(--bv-a), var(--bv-2, var(--bv-a)) 55%, var(--bv-3, var(--bv-a)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bvchat__ask {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; border-radius: 999px;
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.5);
}
.bvchat__ask svg { width: 18px; height: 18px; flex: none; color: var(--bv-a); }
.bvchat__q { font-size: 13.5px; color: var(--bv-txt); min-height: 1.2em; }
.bvchat__q::after {
  content: ""; display: inline-block; width: 2px; height: 1em; vertical-align: -2px;
  margin-left: 2px; background: var(--bv-a); animation: bvCaret 1s steps(1) infinite;
}
@keyframes bvCaret { 50% { opacity: 0; } }
.bvchat__send { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--bv-a); color: #fff; }
.bvchat__send svg { width: 14px; height: 14px; color: #fff; }
.bvchat__ans {
  display: flex; flex-direction: column; gap: 9px;
  padding: 15px 17px; border-radius: var(--bv-r);
  background: color-mix(in srgb, var(--bv-a) 7%, var(--bv-srf));
  border: 1px solid color-mix(in srgb, var(--bv-a) 18%, transparent);
}
.bvchat__ans i { display: block; height: 9px; border-radius: 99px; background: color-mix(in srgb, var(--bv-txt) 14%, transparent); transform-origin: left; }
.bvchat__src { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 3px; }
.bvchat__src span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
  font-size: 10.5px; font-weight: 600; color: var(--bv-mut);
}
.bvchat__src em { width: 7px; height: 7px; border-radius: 2px; }
.bvchat__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bvchat__chips b {
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--bv-ln); background: var(--bv-srf);
  font-size: 11.5px; font-weight: 500; color: var(--bv-mut);
  transition: border-color 0.2s, color 0.2s;
}
.bvchat__chips b:hover { border-color: var(--bv-a); color: var(--bv-a); }

/* ============================================================
   Primitive: design canvas (Figma, Canva, whiteboards)
   ============================================================ */
.bvcanvas { flex: 1; position: relative; overflow: hidden; background: var(--bv-canvas, var(--bv-bg)); }
.bvcanvas__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--bv-txt) 16%, transparent) 1px, transparent 1px);
  background-size: 22px 22px; opacity: 0.5;
}
.bvshape { position: absolute; border-radius: 10px; }
.bvshape--sel { box-shadow: 0 0 0 1.5px var(--bv-a); }
.bvshape--sel::after {
  content: ""; position: absolute; inset: -4px;
  background:
    linear-gradient(var(--bv-a), var(--bv-a)) 0 0 / 6px 6px no-repeat,
    linear-gradient(var(--bv-a), var(--bv-a)) 100% 0 / 6px 6px no-repeat,
    linear-gradient(var(--bv-a), var(--bv-a)) 0 100% / 6px 6px no-repeat,
    linear-gradient(var(--bv-a), var(--bv-a)) 100% 100% / 6px 6px no-repeat;
}
.bvcursor { position: absolute; display: flex; align-items: flex-start; gap: 3px; pointer-events: none; z-index: 4; }
.bvcursor svg { width: 15px; height: 15px; flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.bvcursor b { padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 600; color: #fff; white-space: nowrap; }
.bvlayers {
  flex: none; width: 148px; padding: 12px 10px;
  background: var(--bv-side); border-right: 1px solid var(--bv-ln);
  display: flex; flex-direction: column; gap: 2px;
}
@media (max-width: 780px) { .bvlayers { display: none; } }
.bvlayers__h { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bv-mut); padding: 0 6px 8px; }
.bvlayer {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  font-size: 11.5px; color: color-mix(in srgb, var(--bv-sidetxt, var(--bv-txt)) 75%, transparent);
  white-space: nowrap; overflow: hidden;
}
.bvlayer svg { width: 12px; height: 12px; flex: none; opacity: 0.7; }
.bvlayer.is-on { background: color-mix(in srgb, var(--bv-a) 18%, transparent); color: var(--bv-a); font-weight: 600; }
.bvtoolbar {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 3px; padding: 5px; border-radius: 12px; z-index: 5;
  background: var(--bv-side); border: 1px solid var(--bv-ln);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.6);
}
.bvtoolbar b {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: color-mix(in srgb, var(--bv-sidetxt, var(--bv-txt)) 65%, transparent);
}
.bvtoolbar b svg { width: 15px; height: 15px; }
.bvtoolbar b.is-on { background: var(--bv-a); color: #fff; }

/* ============================================================
   Primitive: automation flow (Power Platform, HR automation, BTP)
   ============================================================ */
.bvflow { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 6px 0; }
.bvnode {
  position: relative; z-index: 2;
  width: min(78%, 330px);
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: var(--bv-r);
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
  box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.4);
}
.bvnode__ic { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; color: #fff; }
.bvnode__ic svg { width: 16px; height: 16px; }
.bvnode b { display: block; font-size: 12.5px; font-weight: 600; color: var(--bv-txt); }
.bvnode em { display: block; font-style: normal; font-size: 10.8px; color: var(--bv-mut); margin-top: 2px; }
.bvconn { width: 2px; height: 22px; background: var(--bv-ln); position: relative; }
.bvconn i { position: absolute; inset: 0; background: var(--bv-a); transform-origin: top; transform: scaleY(0); }
.bvconn__pk { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--bv-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bv-a) 25%, transparent); }

/* ============================================================
   Primitive: 3D viewport (Blender, Substance 3D)
   ============================================================ */
.bvview { flex: 1; position: relative; overflow: hidden; perspective: 900px; background: var(--bv-canvas, var(--bv-bg)); }
.bvview__grid {
  position: absolute; left: -25%; right: -25%; bottom: -10%; height: 78%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--bv-txt) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--bv-txt) 14%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: rotateX(74deg);
  mask-image: linear-gradient(to top, #000 5%, transparent 78%);
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 78%);
}
.bvcube {
  position: absolute; left: 50%; top: 46%; width: 110px; height: 110px;
  margin: -55px 0 0 -55px;
  transform-style: preserve-3d;
}
.bvcube span {
  position: absolute; inset: 0;
  border: 1px solid color-mix(in srgb, var(--bv-a) 70%, transparent);
  background: color-mix(in srgb, var(--bv-a) 12%, transparent);
}
.bvcube span:nth-child(1) { transform: translateZ(55px); }
.bvcube span:nth-child(2) { transform: rotateY(180deg) translateZ(55px); }
.bvcube span:nth-child(3) { transform: rotateY(90deg) translateZ(55px); }
.bvcube span:nth-child(4) { transform: rotateY(-90deg) translateZ(55px); }
.bvcube span:nth-child(5) { transform: rotateX(90deg) translateZ(55px); }
.bvcube span:nth-child(6) { transform: rotateX(-90deg) translateZ(55px); }
.bvorb {
  position: absolute; left: 50%; top: 46%; width: 132px; height: 132px; margin: -66px 0 0 -66px;
  border-radius: 50%;
  background:
    radial-gradient(38% 34% at 33% 28%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(90% 90% at 62% 70%, var(--bv-2, var(--bv-a)), var(--bv-a) 60%, #16121a 100%);
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.7);
}
.bvview__hud {
  position: absolute; top: 10px; left: 12px; display: flex; gap: 6px;
}
.bvview__hud b {
  padding: 4px 9px; border-radius: 5px; font-size: 10.5px; font-weight: 600;
  background: color-mix(in srgb, var(--bv-txt) 9%, transparent); color: var(--bv-mut);
}
.bvview__hud b.is-on { background: var(--bv-a); color: #fff; }
.bvswatches { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 7px; }
.bvswatches i {
  width: 30px; height: 30px; border-radius: 8px;
  border: 2px solid transparent;
  transition: transform 0.25s, border-color 0.25s;
}
.bvswatches i.is-on { border-color: var(--bv-a); transform: scale(1.1); }
.bvtimeline {
  flex: none; height: 34px; display: flex; align-items: center; gap: 10px;
  padding: 0 14px; border-top: 1px solid var(--bv-ln); background: var(--bv-side);
}
.bvtimeline__track { flex: 1; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--bv-txt) 12%, transparent); position: relative; }
.bvtimeline__pl { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--bv-a); }
.bvtimeline__pl::after { content: ""; position: absolute; top: -3px; left: -4px; width: 10px; height: 7px; border-radius: 2px; background: var(--bv-a); }
.bvtimeline b { font-size: 10.5px; font-weight: 600; color: var(--bv-mut); font-variant-numeric: tabular-nums; }

/* ============================================================
   Primitive: document / reader (Acrobat, Docs)
   ============================================================ */
.bvdoc { flex: 1; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px; min-height: 0; }
.bvpage {
  position: relative; height: 100%; aspect-ratio: 1 / 1.29;
  background: #fff; border-radius: 4px; padding: 16px 18px;
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column; gap: 7px;
  overflow: hidden;
}
.bvpage i { display: block; height: 6px; border-radius: 99px; background: #dfe2e8; }
.bvpage i.h { height: 11px; width: 52%; background: #c3c8d2; margin-bottom: 5px; }
.bvpage i.s { width: 72%; }
.bvpage i.m { width: 88%; }
.bvsign {
  margin-top: auto; padding: 9px 11px; border-radius: 6px;
  border: 1.5px dashed var(--bv-a);
  background: color-mix(in srgb, var(--bv-a) 8%, transparent);
  font-size: 10.5px; font-weight: 700; color: var(--bv-a);
  display: flex; align-items: center; gap: 7px;
}
.bvsign svg { width: 13px; height: 13px; }
.bvsign path { stroke-linecap: round; stroke-linejoin: round; }
.bvdoc__side { flex: none; width: 168px; display: flex; flex-direction: column; gap: 7px; }
@media (max-width: 780px) { .bvdoc__side { display: none; } }
.bvdoc__act {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 9px;
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
  font-size: 11.5px; font-weight: 600; color: var(--bv-txt);
}
.bvdoc__act span { width: 22px; height: 22px; border-radius: 6px; flex: none; display: grid; place-items: center; color: #fff; }
.bvdoc__act span svg { width: 13px; height: 13px; }

/* ============================================================
   Brand figures — the smaller illustrations

   The .bstage above is one big window per page. A .bfig is the
   opposite: a single idea, drawn small enough that three of them
   sit side by side next to a paragraph. Six kinds, each answering
   one question a buyer actually asks —

     suite   what is actually in the bundle
     seats   how many licences do we really need
     stack   what sits under the apps
     wire    do these systems talk to each other
     path    what does a rollout look like
     guard   what happens after go-live

   They take the same --bv-* kit as the stage, so the same figure
   renders in Google's, SAP's or Blender's colours. Everything
   here reacts to the pointer: the frame tilts toward the cursor
   and a per-kind GSAP timeline plays forward on enter and
   reverses on leave (js/brandviz.js).
   ============================================================ */

/* ---------- Layout wrappers ---------- */

/* Copy on one side, one large figure on the other. */
.bfigrow {
  display: grid;
  grid-template-columns: minmax(260px, 400px) 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
/* Flipping moves the copy to the right, so the column widths have to swap with
   it — otherwise the figure inherits the narrow copy column and every flipped
   row on the page renders its illustration at half the size of the others. */
.bfigrow--flip { grid-template-columns: 1fr minmax(260px, 400px); }
.bfigrow--flip .bfigrow__copy { order: 2; }
@media (max-width: 900px) {
  .bfigrow, .bfigrow--flip { grid-template-columns: 1fr; }
  .bfigrow--flip .bfigrow__copy { order: 0; }
}
.bfigrow__copy h3 {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(23px, 2.2vw, 32px); line-height: 1.15; color: var(--heading);
}
:root[data-theme="dark"] .bfigrow__copy h3 { color: var(--ink); }
.bfigrow__copy p { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--muted); max-width: 44ch; }
.bfigrow__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bv-a, var(--brand)); margin-bottom: 12px;
}
.bfigrow__eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, currentColor, transparent);
}

/* Two or three figures across, each with its own caption. */
.bfiggrid {
  display: grid; gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.bfiggrid__cell { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Three different primitives are three different natural heights, which lands
   the captions on three different baselines. Sharing the parent's rows puts
   every figure in one track and every caption in the next, so both line up
   however tall the illustrations happen to be. */
.bfiggrid__cell > .bfig { flex: 1; }
.bfiggrid__cell > .bfig > .bfig__frame { height: 100%; }
@supports (grid-template-rows: subgrid) {
  .bfiggrid { grid-template-rows: auto auto; }
  .bfiggrid__cell { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
}
.bfiggrid__cell h3 {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.015em;
  font-size: 18.5px; line-height: 1.25; color: var(--heading);
}
:root[data-theme="dark"] .bfiggrid__cell h3 { color: var(--ink); }
.bfiggrid__cell p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

/* ---------- The figure itself ---------- */
.bfig {
  --bv-r: 12px;
  --bv-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  position: relative;
  perspective: 1100px;
}
.bfig__glow {
  /* Kept inside the figure horizontally. The old -3% bleed pushed the layout
     box past the viewport on a phone, where the page gutter is narrower than
     the bleed, and gave every figure page 3px of horizontal scroll. The blur
     still spreads well past the edge, so nothing looks different. */
  position: absolute; inset: 4% 0 6%;
  z-index: 0; border-radius: 50%;
  filter: blur(56px); opacity: 0.16;
  background:
    radial-gradient(52% 62% at 26% 42%, var(--bv-a), transparent 70%),
    radial-gradient(46% 56% at 76% 58%, var(--bv-2, var(--bv-a)), transparent 70%);
  pointer-events: none;
  transition: opacity 0.5s;
}
:root[data-theme="dark"] .bfig__glow { opacity: 0.26; }
.bfig:hover .bfig__glow { opacity: 0.3; }
:root[data-theme="dark"] .bfig:hover .bfig__glow { opacity: 0.44; }

.bfig__frame {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  padding: clamp(16px, 2vw, 24px);
  min-height: 268px;
  border-radius: calc(var(--bv-r) + 8px);
  background: var(--bv-bg);
  color: var(--bv-txt);
  font-family: var(--bv-font);
  border: 1px solid color-mix(in srgb, var(--bv-txt) 12%, transparent);
  box-shadow: 0 26px 60px -40px rgba(11, 56, 79, 0.6), 0 2px 6px -4px rgba(0, 0, 0, 0.14);
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}
:root[data-theme="dark"] .bfig__frame { box-shadow: 0 30px 66px -40px rgba(0, 0, 0, 0.9); }
.bfigrow .bfig__frame { min-height: 330px; }

/* Small label strip at the top of every figure — the app name, so the
   illustration reads as a piece of that product rather than an abstract chart. */
.bfig__tag {
  display: flex; align-items: center; gap: 8px; flex: none;
  margin-bottom: 16px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--bv-mut);
}
.bfig__tag span {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  display: grid; place-items: center;
  background: var(--bv-a); color: #fff; font-size: 10px; font-weight: 800;
}
.bfig__tag b { color: var(--bv-txt); font-weight: 600; }
.bfig__tag i {
  margin-left: auto; font-style: normal; font-weight: 500;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--bv-a) 12%, transparent);
  color: var(--bv-a); font-size: 10.5px;
}
.bfig__body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }

/* ---------- suite: what is in the bundle ----------
   The reference shape at small size — the app launcher lifting off the
   application it was opened from. */
.bvsuite { position: relative; flex: 1; display: flex; min-height: 0; }
.bvsuite__ghost {
  flex: 1; display: flex; flex-direction: column; gap: 7px; padding-top: 4px; min-width: 0;
}
.bvsuite__ghost span {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 9px;
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
}
.bvsuite__ghost i { height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--bv-txt) 12%, transparent); }
.bvsuite__ghost i:first-child { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bvsuite__ghost i:nth-child(2) { flex: 1; }
.bvsuite__ghost i:last-child { width: 30px; flex: none; background: color-mix(in srgb, var(--bv-a) 22%, transparent); }
.bvsuite__pop {
  position: relative; z-index: 2; flex: none;
  width: min(72%, 260px); margin-left: -34px; align-self: flex-start;
  padding: 12px 8px 8px;
  border-radius: calc(var(--bv-r) + 8px);
  background: var(--bv-srf);
  box-shadow: 0 22px 48px -20px rgba(0, 0, 0, 0.32), 0 0 0 1px var(--bv-ln);
}
.bvsuite__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.bvsuite .bvapp { padding: 9px 2px 8px; }
.bvsuite .bvapp__ic { width: 30px; height: 30px; }
.bvsuite .bvapp__ic svg { width: 19px; height: 19px; }
.bvsuite .bvapp__n { font-size: 9.5px; }
@media (max-width: 520px) {
  .bvsuite__ghost { display: none; }
  .bvsuite__pop { width: 100%; margin-left: 0; }
}

/* ---------- seats: licence right-sizing ---------- */
.bvseats { display: flex; flex-direction: column; gap: 14px; }
.bvseats__grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px;
}
@media (max-width: 520px) { .bvseats__grid { grid-template-columns: repeat(8, 1fr); } }
.bvseats__grid i {
  aspect-ratio: 1; border-radius: 5px;
  background: color-mix(in srgb, var(--bv-a) 78%, transparent);
}
.bvseats__grid i.is-idle {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bv-txt) 22%, transparent);
}
.bvseats__bar {
  position: relative; height: 9px; border-radius: 99px;
  background: color-mix(in srgb, var(--bv-txt) 9%, transparent); overflow: hidden;
}
.bvseats__bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--bv-a); }
.bvseats__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--bv-mut); }
.bvseats__foot b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.bvseats__foot b::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--bv-a); }
.bvseats__foot b.is-idle::before { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bv-txt) 26%, transparent); }
.bvseats__save {
  margin-left: auto; padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--bv-ok, #17a673) 14%, transparent);
  color: var(--bv-ok, #17a673); font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}

/* ---------- stack: what sits under the apps ----------
   Four planes seen slightly from above. Hovering pulls them apart so the
   layer names become readable — the illustration explains itself on contact. */
/* Rotating a wide flat plane swings its left end well below the element's own
   box, so the planes are positioned above the box (a negative top, set with the
   stagger in js/brandviz.js) and this height is what the tilted deck actually
   occupies on screen — not what the layout boxes add up to. */
.bvstack { position: relative; height: 232px; transform-style: preserve-3d; }
.bvstack__pl {
  position: absolute; left: 6%; right: 6%; height: 54px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  border-radius: var(--bv-r);
  background: var(--bv-srf);
  border: 1px solid var(--bv-ln);
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.5);
  transform: rotateX(52deg) rotateZ(-38deg) scaleY(0.86);
  transform-style: preserve-3d;
}
.bvstack__pl em {
  font-style: normal; font-size: 12px; font-weight: 600; color: var(--bv-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bvstack__pl u { text-decoration: none; font-size: 10.5px; color: var(--bv-mut); margin-left: auto; white-space: nowrap; }
.bvstack__ic { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; color: #fff; }
.bvstack__ic svg { width: 14px; height: 14px; }

/* ---------- wire: two systems, one flow ---------- */
.bvwire { display: flex; flex-direction: column; gap: 18px; }
.bvwire__row { display: flex; align-items: center; gap: 10px; }
.bvwire__node {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 13px 14px; border-radius: var(--bv-r);
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
  box-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.45);
}
.bvwire__node span { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.bvwire__node span svg { width: 15px; height: 15px; }
.bvwire__node b { font-size: 12.5px; font-weight: 600; color: var(--bv-txt); }
.bvwire__node em { font-style: normal; font-size: 10.8px; color: var(--bv-mut); }
.bvwire__pipe {
  position: relative; flex: none; width: clamp(48px, 9vw, 88px); height: 4px;
  border-radius: 99px; background: color-mix(in srgb, var(--bv-txt) 11%, transparent);
}
/* Full width at rest and scaled down, so the hover can grow it with a transform
   rather than by animating width — the pipe fills on every figure hover and a
   composited scale is the cheaper of the two. */
.bvwire__pipe > i {
  position: absolute; inset: 0 auto 0 0; width: 100%;
  transform: scaleX(0); transform-origin: left;
  border-radius: 99px; background: var(--bv-a);
}
.bvwire__pk {
  position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--bv-a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bv-a) 22%, transparent);
}
.bvwire__log { display: flex; flex-direction: column; gap: 6px; }
.bvwire__log span {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 11px; border-radius: 8px;
  background: color-mix(in srgb, var(--bv-a) 7%, var(--bv-srf));
  border: 1px solid color-mix(in srgb, var(--bv-a) 16%, transparent);
  font-size: 11px; color: var(--bv-mut);
}
.bvwire__log span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--bv-a);
}
.bvwire__log b { color: var(--bv-txt); font-weight: 600; }

/* ---------- path: the rollout ---------- */
.bvpath { position: relative; display: flex; flex-direction: column; gap: 0; padding-left: 6px; }
.bvpath__step { position: relative; display: flex; gap: 13px; padding-bottom: 18px; }
.bvpath__step:last-child { padding-bottom: 0; }
/* The rail behind the markers, and the coloured line that draws down it. */
.bvpath__step::before {
  content: ""; position: absolute; left: 12px; top: 24px; bottom: 0; width: 2px;
  background: var(--bv-ln);
}
.bvpath__step:last-child::before { display: none; }
.bvpath__n {
  position: relative; z-index: 1; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bv-srf);
  box-shadow: inset 0 0 0 1.5px var(--bv-ln);
  font-size: 10.5px; font-weight: 800; color: var(--bv-mut);
  font-variant-numeric: tabular-nums;
}
.bvpath__step.is-on .bvpath__n { background: var(--bv-a); box-shadow: none; color: #fff; }
.bvpath__t { min-width: 0; }
.bvpath__t b { display: block; font-size: 12.8px; font-weight: 600; color: var(--bv-txt); line-height: 1.35; }
.bvpath__t em { display: block; font-style: normal; font-size: 11px; color: var(--bv-mut); margin-top: 3px; line-height: 1.5; }
.bvpath__fill {
  position: absolute; left: 12px; top: 24px; width: 2px;
  background: var(--bv-a); transform-origin: top; height: 0;
}

/* ---------- guard: what happens after go-live ---------- */
.bvguard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.bvguard__badge {
  position: relative; width: 62px; height: 62px; flex: none;
  display: grid; place-items: center; border-radius: 20px;
  background: linear-gradient(150deg, var(--bv-a), var(--bv-2, var(--bv-a)));
  color: #fff;
  box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--bv-a) 90%, transparent);
}
.bvguard__badge svg { width: 30px; height: 30px; }
.bvguard__ring {
  position: absolute; left: 50%; top: 31px; width: 62px; height: 62px;
  margin-left: -31px; margin-top: -31px;
  border-radius: 24px; border: 1.5px solid color-mix(in srgb, var(--bv-a) 45%, transparent);
  pointer-events: none;
}
.bvguard__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; width: 100%; }
.bvguard__chips b {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
  font-size: 11.5px; font-weight: 600; color: var(--bv-txt);
  box-shadow: 0 6px 14px -12px rgba(0, 0, 0, 0.5);
}
.bvguard__chips b i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bvguard__meter { display: flex; gap: 4px; width: 100%; }
.bvguard__meter i {
  flex: 1; height: 26px; border-radius: 4px;
  background: color-mix(in srgb, var(--bv-a) 20%, transparent);
  transform-origin: bottom;
}
.bvguard__meter i.is-hi { background: var(--bv-a); }

/* ============================================================
   The eight kinds below exist so that two vendors never make
   their case with the same picture. Which page gets which is
   decided by the plans in js/brandviz.js, not here.
   ============================================================ */

/* ---------- tenant: one directory, everything hanging off it ----------
   The satellites are placed by the JS in percentages, and the connector
   SVG stretches to the same box so its endpoints land on them exactly. */
.bvten { position: relative; flex: 1; min-height: 210px; }
.bvten__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bvten__links line {
  stroke: color-mix(in srgb, var(--bv-a) 55%, transparent);
  stroke-width: 0.4; vector-effect: non-scaling-stroke;
  opacity: 0.3;
}
.bvten__core {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 132px; padding: 12px 10px; text-align: center;
  border-radius: calc(var(--bv-r) + 2px);
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.55);
}
.bvten__core i {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--bv-a), var(--bv-2, var(--bv-a))); color: #fff;
}
.bvten__core i svg { width: 16px; height: 16px; }
.bvten__core b { font-size: 11.5px; font-weight: 600; color: var(--bv-txt); line-height: 1.3; }
.bvten__core em { font-style: normal; font-size: 9.8px; color: var(--bv-mut); line-height: 1.4; }
.bvten__sat {
  position: absolute; z-index: 3;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 10px 5px 5px; border-radius: 999px;
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
  font-size: 10.5px; font-weight: 600; color: var(--bv-txt);
  box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.5);
}
.bvten__sat i { width: 18px; height: 18px; border-radius: 6px; flex: none; display: grid; place-items: center; color: #fff; }
.bvten__sat i svg { width: 11px; height: 11px; }

/* ---------- pipeline: a process, drawn as a funnel ---------- */
.bvpipe { display: flex; flex-direction: column; gap: 12px; }
.bvpipe__sub { font-size: 10.8px; color: var(--bv-mut); }
.bvpipe__rows { display: flex; flex-direction: column; gap: 8px; }
.bvpipe__stage { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 10px; }
.bvpipe__stage b { font-size: 11px; font-weight: 600; color: var(--bv-txt); }
.bvpipe__track {
  height: 15px; border-radius: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--bv-txt) 6%, transparent);
}
.bvpipe__track i { display: block; height: 100%; border-radius: 5px; transform-origin: left; }
.bvpipe__stage em {
  font-style: normal; font-size: 10.8px; font-weight: 600; color: var(--bv-mut);
  min-width: 46px; text-align: right; opacity: 0.55;
}
.bvpipe__foot {
  font-size: 10.5px; line-height: 1.5; color: var(--bv-mut);
  padding-top: 10px; border-top: 1px solid var(--bv-ln);
}

/* ---------- modules: what you switch on, and what you could ---------- */
.bvmods { display: flex; flex-direction: column; gap: 14px; }
.bvmods__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bvmod {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 3px; border-radius: 9px; text-align: center;
  border: 1px dashed color-mix(in srgb, var(--bv-txt) 16%, transparent);
  opacity: 0.42; transform: scale(0.94);
}
.bvmod.is-on {
  opacity: 1; transform: none;
  border-style: solid; border-color: transparent;
  background: var(--bv-srf);
  box-shadow: 0 8px 18px -16px rgba(0, 0, 0, 0.5);
}
.bvmod i {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: transparent; color: var(--bv-mut);
}
.bvmod.is-on i { background: var(--bv-m); color: #fff; }
.bvmod i svg { width: 14px; height: 14px; }
.bvmod em { font-style: normal; font-size: 9px; font-weight: 600; line-height: 1.2; color: var(--bv-txt); }
.bvmods__foot { display: flex; flex-direction: column; gap: 4px; }
.bvmods__foot b {
  font-size: 11.5px; font-weight: 600; color: var(--bv-a);
}
.bvmods__foot span { font-size: 10.5px; line-height: 1.5; color: var(--bv-mut); }

/* ---------- brandkit: colour, type, and where they land ---------- */
.bvkit { display: flex; flex-direction: column; gap: 14px; }
.bvkit__sw { display: flex; gap: 6px; }
.bvkit__chip { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bvkit__chip i { display: block; height: 22px; border-radius: 6px; background: var(--bv-c); }
.bvkit__chip u {
  display: block; text-decoration: none; overflow: hidden;
  font-size: 8.6px; font-family: ui-monospace, "JetBrains Mono", monospace;
  color: var(--bv-mut); white-space: nowrap; opacity: 0.45;
}
.bvkit__type {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: var(--bv-r);
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
}
.bvkit__type > b { font-size: 30px; line-height: 1; font-weight: 700; color: var(--bv-txt); }
.bvkit__type span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bvkit__type em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--bv-a); }
.bvkit__type u { text-decoration: none; font-size: 10px; color: var(--bv-mut); }
.bvkit__uses { display: flex; gap: 6px; }
.bvkit__uses span {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 4px; border-radius: 9px; text-align: center;
  font-size: 9.4px; font-weight: 600; color: var(--bv-txt);
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
}
.bvkit__uses i {
  width: 100%; height: 14px; border-radius: 4px;
  background: linear-gradient(120deg, var(--bv-a), var(--bv-2, var(--bv-a)));
  opacity: 0.28; transform: scale(0.9, 0.7);
}

/* ---------- handoff: the design, and the spec generated from it ---------- */
.bvhand { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
.bvhand__art {
  position: relative; padding: 26px 22px;
  border-radius: var(--bv-r);
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
}
.bvhand__box {
  display: grid; place-items: center; height: 42px; border-radius: 8px;
  background: var(--bv-a);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bv-a) 40%, transparent),
              0 0 0 4px color-mix(in srgb, var(--bv-a) 14%, transparent);
}
.bvhand__box i { width: 46%; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.85); }
.bvhand__mz {
  position: absolute; opacity: 0; transform: scale(0.85);
  padding: 1px 5px; border-radius: 4px;
  background: var(--bv-a); color: #fff;
  font-size: 8.6px; font-weight: 700; font-family: ui-monospace, "JetBrains Mono", monospace;
}
.bvhand__mz--w { left: 50%; top: 9px; translate: -50% 0; }
.bvhand__mz--h { right: 7px; top: 50%; translate: 0 -50%; }
.bvhand__name { display: block; margin-top: 10px; font-size: 9.4px; color: var(--bv-mut); text-align: center; }
.bvhand__spec { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bvhand__spec span {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 6px 9px; border-radius: 7px;
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
}
.bvhand__spec b {
  font-size: 9.6px; font-weight: 500; color: var(--bv-mut);
  font-family: ui-monospace, "JetBrains Mono", monospace;
}
.bvhand__spec em {
  font-style: normal; font-size: 9.8px; font-weight: 600; color: var(--bv-txt);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bvhand__spec code {
  display: block; margin-top: 3px; padding: 7px 9px; border-radius: 7px;
  background: color-mix(in srgb, var(--bv-a) 12%, transparent);
  color: var(--bv-a); font-size: 9.4px; line-height: 1.4;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  opacity: 0.55; transform: translateY(4px);
  overflow: hidden; text-overflow: ellipsis;
}

/* ---------- views: one dataset, a deck of ways to read it ----------
   The cards rest stacked and fan apart on hover, which is the claim. */
.bvviews { display: flex; flex-direction: column; gap: 16px; }
.bvviews__deck { position: relative; height: 148px; }
.bvviews__card {
  position: absolute; left: 0; top: 0; width: 66%; height: 132px;
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 11px; border-radius: var(--bv-r);
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.6);
  transform: translate(calc(var(--i) * 9px), calc(var(--i) * -4px));
}
.bvviews__card b { font-size: 10px; font-weight: 600; color: var(--bv-v); opacity: 0.55; }
.bvviews__mini { flex: 1; display: flex; gap: 4px; min-height: 0; }
.bvviews__card--table .bvviews__mini,
.bvviews__card--gantt .bvviews__mini { flex-direction: column; justify-content: center; }
.bvviews__card--cal .bvviews__mini { display: grid; grid-template-columns: repeat(4, 1fr); align-content: center; }
.bvviews__mini i { display: block; border-radius: 3px; background: color-mix(in srgb, var(--bv-v) 34%, transparent); }
.bvviews__mini i.r { height: 8px; }
.bvviews__mini i.r:nth-child(even) { width: 72%; }
.bvviews__mini i.c { flex: 1; border-radius: 5px; }
.bvviews__mini i.c:nth-child(2) { opacity: 0.65; }
.bvviews__mini i.c:nth-child(3) { opacity: 0.4; }
.bvviews__mini i.g { height: 7px; }
.bvviews__mini i.d { height: 14px; }
.bvviews__mini i.d:nth-child(3n) { background: var(--bv-v); }
.bvviews__base {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; color: var(--bv-mut);
  padding-top: 11px; border-top: 1px solid var(--bv-ln);
}
.bvviews__base i { width: 22px; height: 4px; border-radius: 99px; background: var(--bv-a); flex: none; }

/* ---------- channels: many in, one queue ---------- */
.bvchan { display: grid; grid-template-columns: 1fr 42px 1fr; gap: 0; align-items: center; }
.bvchan__in { display: flex; flex-direction: column; gap: 5px; }
.bvchan__src {
  display: grid; grid-template-columns: 20px 1fr; grid-template-rows: auto auto;
  column-gap: 7px; align-items: center;
  padding: 5px 8px; border-radius: 8px;
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
}
.bvchan__src i { grid-row: span 2; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: #fff; }
.bvchan__src i svg { width: 12px; height: 12px; }
.bvchan__src b { font-size: 10px; font-weight: 600; color: var(--bv-txt); line-height: 1.2; }
.bvchan__src em { font-style: normal; font-size: 8.8px; color: var(--bv-mut); }
.bvchan__fan { width: 100%; height: 150px; overflow: visible; }
.bvchan__fan path {
  fill: none; stroke: color-mix(in srgb, var(--bv-a) 65%, transparent);
  stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0.35;
}
.bvchan__out {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 12px; border-radius: var(--bv-r);
  background: var(--bv-srf);
  border: 1px solid color-mix(in srgb, var(--bv-a) 40%, transparent);
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.6);
}
.bvchan__out > b { font-size: 11.5px; font-weight: 600; color: var(--bv-txt); }
.bvchan__out > em { font-style: normal; font-size: 9.6px; line-height: 1.45; color: var(--bv-mut); }
.bvchan__q { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.bvchan__q u {
  text-decoration: none; padding: 5px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--bv-a) 9%, transparent);
  font-size: 9.2px; color: var(--bv-txt); opacity: 0.62;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- render: one scene, several deliverables ---------- */
.bvrend { display: flex; flex-direction: column; gap: 12px; }
.bvrend__view {
  position: relative; height: 92px; border-radius: var(--bv-r); overflow: hidden;
  background: var(--bv-canvas, color-mix(in srgb, var(--bv-txt) 8%, var(--bv-srf)));
  border: 1px solid var(--bv-ln);
  display: grid; place-items: center;
}
.bvrend__grid {
  position: absolute; inset: 0; opacity: 0.28;
  background-image: linear-gradient(color-mix(in srgb, var(--bv-txt) 22%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--bv-txt) 22%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(70% 70% at 50% 55%, #000, transparent);
}
.bvrend__orb {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  background:
    radial-gradient(38% 34% at 34% 28%, rgba(255, 255, 255, 0.9), transparent 60%),
    linear-gradient(150deg, var(--bv-a), var(--bv-2, var(--bv-a)));
  box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--bv-a) 90%, transparent);
}
.bvrend__sub {
  position: absolute; left: 10px; bottom: 8px;
  font-size: 9.2px; color: var(--bv-mut);
}
.bvrend__out { display: flex; flex-direction: column; gap: 7px; }
.bvrend__pass {
  display: grid; grid-template-columns: 8px 1fr; column-gap: 9px;
  grid-template-areas: "dot name" "dot desc" "dot bar";
  align-items: center;
}
.bvrend__pass > i { grid-area: dot; width: 8px; height: 8px; border-radius: 50%; }
.bvrend__pass b { grid-area: name; font-size: 10.8px; font-weight: 600; color: var(--bv-txt); }
.bvrend__pass em { grid-area: desc; font-style: normal; font-size: 9.2px; color: var(--bv-mut); }
.bvrend__pass u {
  grid-area: bar; text-decoration: none; display: block;
  height: 4px; margin-top: 4px; border-radius: 99px;
  background: color-mix(in srgb, var(--bv-txt) 8%, transparent);
}
.bvrend__pass u s { display: block; height: 100%; border-radius: 99px; transform-origin: left; }

/* ============================================================
   Not interfaces.

   Everything above this point draws a piece of software, and a
   page built only from those reads as one long screenshot tour.
   The six below argue in other registers — a comparison, a set
   of steps, a time axis, an invoice, a dial, a curve — so that
   moving between a vendor's pages doesn't feel like paging
   through the same window. Same brand kit, no window chrome.
   ============================================================ */

/* ---------- compare: today vs after ---------- */
.bvcmp { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 0; align-items: center; }
.bvcmp__col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bvcmp__h {
  font-size: 9.6px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--bv-mut); margin-bottom: 3px;
}
.bvcmp__col--now .bvcmp__h { color: var(--bv-a); }
.bvcmp__i {
  padding: 8px 10px; border-radius: 8px;
  font-size: 10.6px; line-height: 1.4; color: var(--bv-txt);
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
}
.bvcmp__col--was .bvcmp__i {
  background: transparent;
  border-style: dashed;
  color: var(--bv-mut);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--bv-mut) 50%, transparent);
}
.bvcmp__arrow { position: relative; display: grid; place-items: center; height: 100%; }
.bvcmp__arrow i {
  position: absolute; left: 4px; right: 4px; height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--bv-a) 45%, transparent);
  transform: scaleX(0.2); transform-origin: left;
}
.bvcmp__arrow b {
  position: relative; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bv-a); opacity: 0.5;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bv-a) 16%, transparent);
}

/* ---------- ladder: tiers, drawn as rising steps ---------- */
.bvlad { display: flex; flex-direction: column; gap: 14px; }
.bvlad__row { display: flex; align-items: flex-end; gap: 8px; min-height: 128px; }
.bvlad__step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
}
.bvlad__step u {
  text-decoration: none; font-size: 9.6px; font-weight: 700; color: var(--bv-a);
  opacity: 0.4; transform: translateY(4px);
}
.bvlad__step i {
  display: block; width: 100%; height: var(--h); border-radius: 7px 7px 0 0;
  background: color-mix(in srgb, var(--bv-a) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--bv-a) 30%, transparent);
  border-bottom: 0;
}
.bvlad__step.is-pick i {
  background: linear-gradient(180deg, var(--bv-a), color-mix(in srgb, var(--bv-a) 55%, transparent));
  border-color: transparent;
  box-shadow: 0 14px 26px -18px color-mix(in srgb, var(--bv-a) 90%, transparent);
}
.bvlad__step b {
  font-size: 9.8px; font-weight: 600; color: var(--bv-txt); text-align: center;
  line-height: 1.25; padding-top: 7px; border-top: 1px solid var(--bv-ln); width: 100%;
}
.bvlad__step.is-pick b { color: var(--bv-a); }
.bvlad__note { font-size: 10.5px; line-height: 1.5; color: var(--bv-mut); }

/* ---------- timeline: how long, not just what ---------- */
.bvtml { position: relative; height: 168px; margin-inline: 6px; }
.bvtml__axis {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--bv-txt) 10%, transparent);
}
.bvtml__axis i {
  display: block; height: 100%; border-radius: 2px; background: var(--bv-a);
  transform: scaleX(0.06); transform-origin: left;
}
.bvtml__pt { position: absolute; top: 50%; width: 92px; margin-left: -46px; text-align: center; }
.bvtml__pt s {
  position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin: -4px 0 0 -4.5px;
  border-radius: 50%; text-decoration: none;
  background: var(--bv-srf); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bv-txt) 26%, transparent);
}
.bvtml__pt b { display: block; font-size: 10.4px; font-weight: 700; color: var(--bv-a); }
.bvtml__pt em { display: block; font-style: normal; font-size: 9.6px; line-height: 1.4; color: var(--bv-mut); margin-top: 2px; }
.bvtml__pt:not(.is-down) { transform: translateY(-100%); padding-bottom: 16px; }
.bvtml__pt.is-down { padding-top: 16px; }
.bvtml__pt:not(.is-down) s { top: auto; bottom: -4.5px; }
.bvtml__pt:first-child { margin-left: -14px; text-align: left; }
.bvtml__pt:first-child s { left: 4.5px; }
.bvtml__pt:last-child { margin-left: -78px; text-align: right; }
.bvtml__pt:last-child s { left: auto; right: 0; }

/* ---------- ledger: what the invoice says ---------- */
.bvledg {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 15px; border-radius: var(--bv-r);
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
}
.bvledg__row {
  display: grid; grid-template-columns: 1fr auto; column-gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed color-mix(in srgb, var(--bv-txt) 12%, transparent);
}
.bvledg__row b { font-size: 11px; font-weight: 600; color: var(--bv-txt); }
.bvledg__row em {
  grid-column: 1; font-style: normal; font-size: 9.4px; color: var(--bv-mut); margin-top: 2px;
}
.bvledg__row u {
  grid-row: span 2; text-decoration: none; align-self: center;
  font-size: 11px; font-weight: 600; color: var(--bv-mut);
  font-family: ui-monospace, "JetBrains Mono", monospace; white-space: nowrap;
}
.bvledg__tot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding: 10px 11px; border-radius: 9px;
  border: 1px solid var(--bv-ln);
  background: color-mix(in srgb, var(--bv-a) 8%, transparent);
}
.bvledg__tot b { font-size: 11px; font-weight: 600; color: var(--bv-txt); }
.bvledg__tot u {
  text-decoration: none; font-size: 15px; font-weight: 700; color: var(--bv-a);
  font-family: ui-monospace, "JetBrains Mono", monospace;
}
.bvledg__stamp {
  position: absolute; right: 14px; bottom: 62px;
  padding: 4px 10px; border-radius: 5px;
  border: 1.5px solid color-mix(in srgb, var(--bv-a) 55%, transparent);
  color: var(--bv-a); font-size: 9.4px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0; transform: rotate(-3deg) scale(0.9);
}

/* ---------- gauge: one number that matters ---------- */
.bvgau { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.bvgau__dial { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.bvgau__dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.bvgau__track {
  fill: none; stroke: color-mix(in srgb, var(--bv-txt) 9%, transparent); stroke-width: 9;
}
.bvgau__arc {
  fill: none; stroke: var(--bv-a); stroke-width: 9; stroke-linecap: round;
}
.bvgau__dial b {
  font-size: 23px; font-weight: 700; color: var(--bv-txt); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bvgau__dial i {
  position: absolute; left: 50%; bottom: 24px; translate: -50% 0;
  font-style: normal; font-size: 10px; color: var(--bv-mut);
}
.bvgau__stats { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bvgau__cap { font-size: 10.6px; line-height: 1.5; color: var(--bv-mut); }
.bvgau__st {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 9px; border-radius: 7px;
  background: var(--bv-srf); border: 1px solid var(--bv-ln);
  opacity: 0.6;
}
.bvgau__st b { font-size: 12px; font-weight: 700; color: var(--bv-a); font-variant-numeric: tabular-nums; }
.bvgau__st em { font-style: normal; font-size: 9.6px; color: var(--bv-mut); }

/* ---------- curve: the gap between two lines ---------- */
.bvcur { display: flex; flex-direction: column; gap: 12px; }
.bvcur svg { width: 100%; height: 118px; overflow: visible; }
.bvcur__area { fill: color-mix(in srgb, var(--bv-a) 14%, transparent); opacity: 0.3; }
.bvcur__a, .bvcur__b {
  fill: none; stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
}
.bvcur__a { stroke: color-mix(in srgb, var(--bv-txt) 30%, transparent); stroke-dasharray: 4 4; }
.bvcur__b { stroke: var(--bv-a); }
.bvcur__keys { display: flex; gap: 14px; flex-wrap: wrap; }
.bvcur__k { display: inline-flex; align-items: center; gap: 7px; font-size: 10.2px; color: var(--bv-mut); opacity: 0.65; }
.bvcur__k i { width: 14px; height: 2px; border-radius: 2px; flex: none; }
.bvcur__k--a i { background: color-mix(in srgb, var(--bv-txt) 30%, transparent); }
.bvcur__k--b i { background: var(--bv-a); }
.bvcur__note {
  font-size: 10.5px; line-height: 1.5; color: var(--bv-mut);
  padding-top: 10px; border-top: 1px solid var(--bv-ln);
}

/* ---------- Narrow figures ----------
   These sit in an auto-fit grid, so they go full width on a phone but only
   about 300px wide in a three-up row on a laptop. Both cases are the same
   problem: the labels are the content, so the layout gives ground first. */
@media (max-width: 560px) {
  .bvten { min-height: 236px; }
  .bvten__sat { font-size: 9.6px; padding-right: 8px; }
  .bvten__core { width: 116px; }
  .bvmods__grid { grid-template-columns: repeat(3, 1fr); }
  .bvmod:nth-child(n+10) { display: none; }
  .bvchan { grid-template-columns: 1fr 30px 1fr; }
  .bvchan__src em { display: none; }
  .bvchan__src { grid-template-rows: auto; }
  .bvchan__src i { grid-row: auto; }
  .bvkit__uses span:nth-child(n+4) { display: none; }
  .bvhand { grid-template-columns: 1fr; }
  .bvhand__spec span:nth-child(n+4) { display: none; }
  .bvpipe__stage { grid-template-columns: 66px 1fr auto; }
}

/* ---------- Reduced motion ----------
   Every figure has to be legible with no timeline having run, because these
   states are the timeline's starting point. */
@media (prefers-reduced-motion: reduce) {
  .bfig__frame { transform: none !important; }
  .bvstack__pl { box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.4); }
  .bvwire__pk { display: none; }
  /* The pipe rests empty so the hover can fill it. With no hover to run, the
     two systems have to already read as connected. */
  .bvwire__pipe > i { transform: scaleX(1); }
  .bvpath__step .bvpath__n { background: var(--bv-a); box-shadow: none; color: #fff; }
  /* The JS draws this line down to the last marker's centre; without motion it
     just sits there already drawn, so it needs a bottom rather than a height. */
  .bvpath__fill { height: auto; bottom: 26px; }
  /* The states below are only reachable through a hover timeline, so without
     motion they have to be the resting state instead. */
  .bvten__links line { opacity: 0.6; }
  .bvmod { opacity: 0.75; }
  .bvkit__chip u { opacity: 1; }
  .bvhand__mz { opacity: 1; transform: none; }
  .bvhand__spec code { opacity: 1; transform: none; }
  .bvchan__fan path { opacity: 0.6; }
  .bvviews__card { transform: translate(calc(var(--i) * 16px), calc(var(--i) * -10px)); }
  .bvviews__card b { opacity: 1; }
  .bvpipe__stage em { opacity: 1; }
  .bvcmp__arrow i { transform: scaleX(1); }
  .bvcmp__arrow b { opacity: 1; }
  .bvlad__step u { opacity: 1; transform: none; }
  .bvtml__axis i { transform: scaleX(1); }
  .bvledg__stamp { opacity: 1; transform: rotate(-8deg); }
  .bvgau__st { opacity: 1; }
  .bvcur__area { opacity: 1; }
  .bvcur__k { opacity: 1; }
  .bvgau__st { opacity: 1; }
}

/* ============================================================
   Solutions hub: brand-tinted vendor rail
   ============================================================ */
.railcard[data-brand] { position: relative; overflow: hidden; }
.railcard[data-brand]::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 90%;
  background: radial-gradient(50% 60% at 50% 0%, var(--bv-a), transparent 70%);
  opacity: 0; transition: opacity 0.35s;
  pointer-events: none;
}
.railcard[data-brand]:hover::before { opacity: 0.16; }
.railcard[data-brand]:hover { border-color: color-mix(in srgb, var(--bv-a) 55%, transparent); }
.railcard[data-brand] > * { position: relative; }
.railcard__swatch { display: flex; gap: 4px; margin-top: -4px; }
.railcard__swatch i {
  width: 14px; height: 5px; border-radius: 99px;
  transform: scaleX(0.35); transform-origin: left;
  opacity: 0.45;
  transition: transform 0.4s cubic-bezier(0.3, 0.7, 0, 1), opacity 0.4s;
}
.railcard:hover .railcard__swatch i { transform: scaleX(1); opacity: 1; }
.railcard:hover .railcard__swatch i:nth-child(2) { transition-delay: 0.05s; }
.railcard:hover .railcard__swatch i:nth-child(3) { transition-delay: 0.1s; }
.railcard:hover .railcard__swatch i:nth-child(4) { transition-delay: 0.15s; }

/* ============================================================
   Narrow screens.

   The mocks are miniature desktop interfaces, so scaling them
   down would make the labels unreadable. Instead the window
   gets a fixed, taller box and each primitive drops to the part
   of itself that still explains the product: two pipeline
   columns instead of four, three rows instead of five, the
   launcher without the app behind it.
   ============================================================ */
@media (max-width: 780px) {
  .bstage__view { aspect-ratio: auto; height: 470px; min-height: 0; }
  .bstage--compact .bstage__view { height: 400px; }

  /* Launcher: the popover is the message — drop the app behind it. */
  .bvlaunch__grid { grid-template-columns: repeat(3, 1fr); }
  .bvlaunch .bvapp:nth-child(n+10) { display: none; }

  .bvapps { grid-template-columns: repeat(3, 1fr); }
  .bvapps .bvapp:nth-child(n+10) { display: none; }
  .bvapp { padding: 10px 2px 8px; }
  .bvapp__ic { width: 30px; height: 30px; }

  /* Two stages read as a pipeline; four stack into an unreadable list. */
  .bvkan { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 7px; }
  .bvkan__col:nth-child(n+3) { display: none; }
  .bvkan__col { padding: 8px; }
  .bvkan__card b { font-size: 11.5px; }
  .bvkan__card:nth-child(n+4) { display: none; }

  .bvrow:nth-child(n+5) { display: none; }
  .bvrow { padding: 8px 9px; }

  .bvtiles { grid-template-columns: repeat(2, 1fr); }
  .bvtile:nth-child(n+5) { display: none; }
  .bvtile { min-height: 84px; padding: 11px 12px; }
  .bvtile--wide { grid-column: span 1; }

  .bvchart__legend { display: none; }
  .bvbars { gap: 8px; }

  .bvchat { padding-inline: 2px; gap: 10px; }
  .bvchat__hi { font-size: 17px; }
  .bvchat__ans i:nth-child(3) { display: none; }
  .bvchat__src span:nth-child(n+3) { display: none; }
  .bvchat__chips b:nth-child(n+3) { display: none; }

  .bvnode { width: 94%; padding: 9px 11px; }
  .bvconn { height: 16px; }

  .bvtop { padding: 9px 12px; gap: 8px; }
  .bvtop__s { display: none; }
  .bvbody { padding: 12px; }
}

/* Very small phones: the four-up tile and three-up icon grids get tight. */
@media (max-width: 420px) {
  .bstage__view { height: 430px; }
  .bvside { display: none; }
  .bvapp__n { font-size: 9.5px; }
  .bvtile__v { font-size: 19px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bstage__live::before,
  .bvchat__q::after { animation: none; }
  .bvp { transition: none; }
  .railcard__swatch i { transform: scaleX(1); opacity: 1; transition: none; }
}