/* ==========================================================================
   TRACING AND BENEFICIARY RESOLUTION PLATFORM  —  page stylesheet
   Page: /debt-collection-software/tracing-and-beneficiary-resolution-software/

   Namespace:  every class is prefixed `tbr-`.
   Scope:      everything is scoped under `.bv-page` so nothing leaks.
   Tokens:     consumed from css-new/beveron-common.css. No literal colours
               where a token exists. Typography is inherited (Inter).
   Shared:     .sec-pad .section-alt-bg .wrap .reveal .why-grid .why-card
               .tab-nav .tab-btn .tab-panel .tab-cards-grid .tab-card
               .cta-banner .faq-item .bk-dd-* come from the common sheets and
               are NOT restyled here, only wrapped.
   ========================================================================== */

/* --- local aliases + soft surfaces (additive custom properties only) ----- */
.bv-page {
  --tbr-ink: var(--text-primary);
  --tbr-ink-2: var(--text-secondary);
  --tbr-ink-3: var(--text-tertiary);
  --tbr-line: var(--border-subtle);
  --tbr-ground: var(--bg-hero);
  --tbr-alt: var(--bg-alt);
  --tbr-blue: var(--accent-cyan);
  --tbr-blue-dark: var(--accent-cyan-dark);
  --tbr-blue-soft: var(--accent-cyan-light);
  --tbr-green: #16a34a;
  --tbr-green-soft: #dcfce7;
  --tbr-amber: #b45309;
  --tbr-amber-soft: #fef3c7;
  --tbr-shadow-sm: 0 2px 10px rgba(17, 24, 39, 0.05);
  --tbr-shadow-md: 0 12px 34px rgba(17, 24, 39, 0.09);
  --tbr-shadow-lg: 0 26px 64px rgba(17, 24, 39, 0.14);
  /* house dark. Identical to the Automation panel on the
     entity-and-governance page, which is the reference. */
  --tbr-navy: #0b1f33;
  --tbr-navy-2: #102941;
  /* headings and body copy on a dark ground. The house does not use pure
     white here: only button labels stay #ffffff. */
  --tbr-on-dark: #f1f7fc;
  --tbr-on-dark-muted: #b9cadb;
  --tbr-dark-bg:
    radial-gradient(900px 460px at 88% -10%, rgba(0, 132, 200, 0.2), transparent 60%),
    radial-gradient(760px 420px at -8% 108%, rgba(0, 132, 200, 0.12), transparent 55%),
    linear-gradient(165deg, var(--tbr-navy) 0%, var(--tbr-navy-2) 55%, var(--tbr-navy) 100%);
}

/* --- shared page furniture ---------------------------------------------- */
.bv-page .tbr-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.bv-page .tbr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tbr-blue-dark);
  margin: 0 0 14px;
}
.bv-page .tbr-eyebrow i { font-size: 0.8rem; }
.bv-page .tbr-eyebrow--on-dark { color: var(--tbr-blue-soft); }

.bv-page .tbr-h2 {
  font-size: clamp(1.42rem, 1.02rem + 1.5vw, 2.05rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--tbr-ink);
  margin: 0 0 14px;
}
.bv-page .tbr-h2--on-dark { color: var(--tbr-on-dark); }

.bv-page .tbr-h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tbr-ink);
  margin: 0 0 8px;
}
.bv-page .tbr-h3--on-dark { color: var(--tbr-on-dark); }

.bv-page .tbr-lead {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--tbr-ink-2);
  margin: 0 0 6px;
  max-width: 78ch;
}
.bv-page .tbr-lead--on-dark { color: var(--tbr-on-dark-muted); }

.bv-page .tbr-body {
  font-size: 0.94rem;
  line-height: 1.78;
  color: var(--tbr-ink-2);
  margin: 0 0 16px;
}
.bv-page .tbr-body strong { color: var(--tbr-ink); font-weight: 700; }
.bv-page .tbr-body:last-child { margin-bottom: 0; }

.bv-page .tbr-sec-head { margin-bottom: 42px; }
.bv-page .tbr-sec-head--center { text-align: center; }
/* head used as one column of a two-column media block: no trailing gap */
.bv-page .tbr-sec-head--flush { margin-bottom: 0; }
.bv-page .tbr-sec-head--center .tbr-lead { margin-left: auto; margin-right: auto; }

.bv-page .tbr-link {
  color: var(--tbr-blue-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bv-page .tbr-link:hover { color: var(--tbr-blue); }

.bv-page .tbr-sec { padding: 90px 0; }
.bv-page .tbr-sec--alt { background: var(--tbr-alt); }

/* --- chips, pills and rails (the enumerated-set workhorses) -------------- */
.bv-page .tbr-chipset { margin: 0 0 26px; }
.bv-page .tbr-chipset:last-child { margin-bottom: 0; }
.bv-page .tbr-chipset-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tbr-ink-3);
  margin: 0 0 10px;
}
.bv-page .tbr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bv-page .tbr-chips li,
.bv-page .tbr-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tbr-ink);
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: 999px;
  padding: 6px 13px;
  line-height: 1.35;
}
.bv-page .tbr-chips--soft li {
  background: var(--tbr-blue-soft);
  border-color: rgba(0, 132, 200, 0.24);
  color: var(--tbr-blue-dark);
}
.bv-page .tbr-chips--warn li {
  background: var(--tbr-amber-soft);
  border-color: rgba(180, 83, 9, 0.22);
  color: var(--tbr-amber);
}
.bv-page .tbr-chips li i { color: var(--tbr-blue); font-size: 0.72rem; }

/* --- buttons ------------------------------------------------------------- */
.bv-page .tbr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 13px 26px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.bv-page .tbr-btn--primary {
  background: var(--tbr-blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 132, 200, 0.26);
}
.bv-page .tbr-btn--primary:hover {
  background: var(--tbr-blue-dark);
  color: #fff;
  transform: translateY(-2px);
}
.bv-page .tbr-btn--outline {
  background: #fff;
  color: var(--tbr-ink);
  border-color: var(--tbr-line);
}
.bv-page .tbr-btn--outline:hover {
  border-color: var(--tbr-blue);
  color: var(--tbr-blue-dark);
  transform: translateY(-2px);
}
.bv-page .tbr-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--tbr-on-dark);
  border-color: rgba(255, 255, 255, 0.28);
}
.bv-page .tbr-btn--ghost:hover {
  background: #fff;
  color: var(--tbr-ink);
  transform: translateY(-2px);
}
.bv-page .tbr-btn:focus-visible,
.bv-page .tbr-tab-scroll .tab-btn:focus-visible,
.bv-page .tbr-link:focus-visible {
  outline: 3px solid var(--tbr-blue);
  outline-offset: 3px;
}

/* ==========================================================================
   1. HERO  —  capped at 90vh, live CSS artefact, artefact hidden on mobile
   ========================================================================== */
.bv-page .tbr-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  max-height: 90vh;
  padding: 92px 0 46px;
  background:
    radial-gradient(1100px 520px at 84% -12%, rgba(0, 132, 200, 0.1), transparent 60%),
    radial-gradient(880px 460px at -8% 108%, rgba(0, 132, 200, 0.06), transparent 55%),
    linear-gradient(180deg, #fbfdfe 0%, var(--tbr-ground) 100%);
}
.bv-page .tbr-hero > .tbr-wrap { width: 100%; }
@media (max-height: 720px) {
  .bv-page .tbr-hero { max-height: none; }
}

.bv-page .tbr-hero-atmo { position: absolute; inset: 0; pointer-events: none; }
.bv-page .tbr-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.55;
}
.bv-page .tbr-glow--1 {
  width: 440px; height: 440px; top: -150px; right: -70px;
  background: radial-gradient(circle, rgba(0, 132, 200, 0.18), transparent 65%);
}
.bv-page .tbr-glow--2 {
  width: 400px; height: 400px; bottom: -170px; left: -110px;
  background: radial-gradient(circle, rgba(0, 132, 200, 0.1), transparent 65%);
}

.bv-page .tbr-hero-grid {
  position: relative;
  display: grid;
  /* the copy column carries the three proof pills on one line, so it takes
     the larger share of the hero. The artefact column still clears the
     410px the scene needs. */
  grid-template-columns: minmax(0, 1.26fr) minmax(0, 0.74fr);
  gap: 40px;
  align-items: center;
}

/* breadcrumb */
.bv-page .tbr-bc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 0.78rem;
  color: var(--tbr-ink-3);
  margin: 0 0 20px;
}
.bv-page .tbr-bc a { color: var(--tbr-ink-3); text-decoration: none; transition: color 0.2s ease; }
.bv-page .tbr-bc a:hover { color: var(--tbr-blue-dark); }
.bv-page .tbr-bc .tbr-bc-sp { color: #b8c4d2; font-size: 0.5rem; display: inline-flex; }
.bv-page .tbr-bc .tbr-bc-cur { color: var(--tbr-ink); font-weight: 600; }

/* The audience line is held to a narrow measure so it wraps to two tidy
   lines under the breadcrumb instead of running the width of the hero copy
   column. 38em on its own 0.73rem size is about 444px. Block level, so it
   stays left aligned with the H1 below it, and on a narrow viewport the
   column caps it well before the max-width does. */
.bv-page .tbr-kicker {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 38em;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tbr-blue-dark);
  margin: 0 0 16px;
  line-height: 1.5;
}
.bv-page .tbr-kicker-dot {
  flex: none;
  /* centred on the first line rather than on the whole wrapped block */
  margin-top: 5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tbr-blue);
  animation: tbrPulse 2.4s ease-out infinite;
}
@keyframes tbrPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 132, 200, 0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(0, 132, 200, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 132, 200, 0); }
}

/* display line: a styled paragraph, not a heading */
.bv-page .tbr-display {
  font-size: clamp(1.85rem, 1.2rem + 2.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--tbr-ink);
  margin: 0 0 12px;
}
.bv-page .tbr-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: tbrWordIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--w) * 0.09s);
}
.bv-page .tbr-display-hl { color: var(--tbr-blue); }
@keyframes tbrWordIn {
  to { opacity: 1; transform: translateY(0); }
}

.bv-page .tbr-h1 {
  font-size: clamp(1rem, 0.86rem + 0.5vw, 1.16rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--tbr-ink-2);
  margin: 0 0 10px;
}
.bv-page .tbr-hero-sub {
  font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.1rem);
  font-weight: 700;
  color: var(--tbr-blue-dark);
  margin: 0 0 14px;
}
.bv-page .tbr-hero-lead {
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--tbr-ink-2);
  margin: 0 0 24px;
  max-width: 60ch;
}
.bv-page .tbr-hero-lead strong { color: var(--tbr-ink); font-weight: 700; }

.bv-page .tbr-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

/* Three proof pills on one line at desktop, wide enough to read as pills
   rather than as squeezed text. They wrap again below the tablet
   breakpoint, and the hero clips its own overflow, so no width can put a
   horizontal scrollbar on the page. */
.bv-page .tbr-hero-proof {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bv-page .tbr-hero-proof li {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tbr-ink-2);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--tbr-line);
  border-radius: 999px;
  padding: 9px 17px;
  box-shadow: var(--tbr-shadow-sm);
}
.bv-page .tbr-hero-proof li i { flex: none; }
@media (max-width: 1180px) {
  .bv-page .tbr-hero-proof { gap: 8px; }
  .bv-page .tbr-hero-proof li { font-size: 0.7rem; padding: 8px 14px; gap: 7px; }
}
/* below the tablet breakpoint the rail wraps and the pills go back to full
   size: one line is a desktop requirement, not a mobile one */
@media (max-width: 1080px) {
  .bv-page .tbr-hero-proof { flex-wrap: wrap; gap: 10px; }
  .bv-page .tbr-hero-proof li { font-size: 0.74rem; padding: 9px 16px; white-space: normal; }
}
.bv-page .tbr-hero-proof li i { color: var(--tbr-blue); }
.bv-page .tbr-hero-proof li strong { color: var(--tbr-ink); font-weight: 700; }

/* ==========================================================================
   HERO ARTEFACT  —  the six-card trace-case scene
   --------------------------------------------------------------------------
   Layout rule: the scene is a two-column CSS grid with a real gap, and each
   card owns a cell inside one of the two column stacks. Nothing here is
   absolutely positioned except the two floating chips, so no card can land
   on top of another card's title or figures at any width.
   The layered, designed-scene feel comes from three things that do NOT
   affect layout: per-card translate nudges (main column splays left, side
   column splays right and sits lower), a z-index order, and three depths of
   shadow. Every nudge moves a card AWAY from its neighbour, so the gap
   between any two cards can only ever grow.
   ========================================================================== */
.bv-page .tbr-stage { position: relative; z-index: 1; }
@keyframes tbrFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* --- the grid ------------------------------------------------------------ */
.bv-page .tbr-scene { position: relative; padding: 22px 26px 38px 6px; }
.bv-page .tbr-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.bv-page .tbr-card-title {
  font-family: var(--font-mono);
  font-size: 0.57rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.2;
  color: var(--tbr-ink-3);
  white-space: nowrap;
}
.bv-page .tbr-card-meta {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--tbr-blue-dark);
  background: var(--tbr-blue-soft);
  border-radius: 999px;
  padding: 3px 7px;
}

/* depth order + the splay. Nothing below changes layout. */
.bv-page .tbr-dashcard {
  position: relative;
  z-index: 1;
  margin: 26px 0 0 0;
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--tbr-shadow-lg);
  padding: 0 0 16px;
  overflow: hidden;
}
.bv-page .tbr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1;
  color: var(--tbr-ink-2);
  background: var(--tbr-ground);
  border: 1px solid var(--tbr-line);
  border-radius: 999px;
  padding: 5px 8px;
}
.bv-page .tbr-chip i { color: var(--tbr-blue); font-size: 0.54rem; }
.bv-page .tbr-figure { display: block; }
.bv-page .tbr-figure b {
  display: block;
  font-size: clamp(0.95rem, 0.4rem + 0.72vw, 1.16rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--tbr-ink);
}
.bv-page .tbr-figure em {
  display: block;
  font-style: normal;
  font-size: 0.58rem;
  line-height: 1.3;
  color: var(--tbr-ink-3);
  margin-top: 2px;
}
.bv-page .tbr-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--tbr-ground);
}
.bv-page .tbr-progress i {
  display: block;
  height: 100%;
  width: 84%;
  background: linear-gradient(90deg, var(--tbr-blue), var(--tbr-blue-dark));
  transform-origin: left;
  transform: scaleX(1);
  animation: tbrFill 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
}
@keyframes tbrFill { from { transform: scaleX(0.5); } }

/* --- 2. trace case rail --------------------------------------------------- */
.bv-page .tbr-rc-nodes {
  position: relative;
  display: grid;
  gap: 6px;
}
/* the connector line behind the stage dots */
.bv-page .tbr-rc-nodes::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    var(--tbr-blue) 0%, var(--tbr-blue) 34%,
    var(--tbr-line) 46%, var(--tbr-line) 100%);
}
@keyframes tbrDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 132, 200, 0.4); }
  70%  { box-shadow: 0 0 0 7px rgba(0, 132, 200, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 132, 200, 0); }
}

/* --- 3. tracing dashboard  (the largest card) ----------------------------- */
.bv-page .tbr-dashcard {
  padding: 0 0 8px;
  border-radius: var(--radius-lg);
  box-shadow: var(--tbr-shadow-lg);
  overflow: hidden;
}
/* the entrance starts from a readable height, never from nothing, so a
   throttled or frozen animation can never empty the chart */
@keyframes tbrBar { from { transform: scaleY(0.55); } }

/* --- 4. contact intelligence  (the distinctive card) ---------------------- */
.bv-page .tbr-contactcard {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 12px;
  width: 54%;
  min-width: 0;max-width: 272px;
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-md);
  box-shadow: var(--tbr-shadow-lg);
  padding: 12px 13px;
}
/* one tinted row travels down the stack: the agent working the contact
   points in order. Only the background moves, so every value and chip
   stays fully legible at every frame. */
.bv-page .tbr-cc-row {
  border-radius: 5px;
  animation: tbrScan 12s ease-in-out infinite;
  animation-delay: calc(var(--d) * 1s);
}
/* the classification chip is the whole point of this card, so it is never
   animated: it is drawn at full strength at all times. The life in the card
   comes from the scan tint travelling down the four rows instead. */
.bv-page .tbr-cc-state {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  border-radius: 999px;
  padding: 3px 7px;
  background: #eef2f7;
  border: 1px solid #dfe6ee;
  color: var(--tbr-ink-2);
}
@keyframes tbrScan {
  0%, 6%   { background-color: rgba(0, 132, 200, 0); }
  12%, 20% { background-color: rgba(0, 132, 200, 0.07); }
  30%, 100% { background-color: rgba(0, 132, 200, 0); }
}

/* --- 5. verification ------------------------------------------------------ */
.bv-page .tbr-vf-rows { display: grid; gap: 6px; }
.bv-page .tbr-vf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
  font-size: 0.68rem;
  color: var(--tbr-ink-2);
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
}
.bv-page .tbr-vf-row > span { min-width: 0; }

/* --- 6. agent queue ------------------------------------------------------- */
.bv-page .tbr-ag-rows { display: grid; gap: 9px; }
.bv-page .tbr-ag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.bv-page .tbr-ag-av {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  font-style: normal;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tbr-blue-dark);
  background: var(--tbr-blue-soft);
  border: 1px solid rgba(0, 132, 200, 0.22);
}
.bv-page .tbr-ag-av--2 { color: var(--tbr-green); background: var(--tbr-green-soft); border-color: rgba(22, 163, 74, 0.22); }
.bv-page .tbr-ag-av--3 { color: var(--tbr-ink-2); background: var(--tbr-ground); border-color: var(--tbr-line); }
.bv-page .tbr-ag-bar {
  flex: 1;
  min-width: 20px;
  height: 5px;
  border-radius: 999px;
  background: var(--tbr-ground);
  border: 1px solid var(--tbr-line);
  overflow: hidden;
}
.bv-page .tbr-ag-bar i {
  display: block;
  height: 100%;
  width: var(--f);
  background: var(--tbr-blue);
  transform-origin: left;
  transform: scaleX(1);
  animation: tbrFill 2.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i) * 0.16s + 0.4s);
}
.bv-page .tbr-ag-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--tbr-ink);
}

/* ==========================================================================
   2. DEFINE BAND
   ========================================================================== */
.bv-page .tbr-define { padding: 74px 0; background: var(--bg-main); }
.bv-page .tbr-define-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 54px;
  align-items: start;
}
/* right column of the define band: carries the same weight as the left,
   a lifecycle strip plus three points rather than two loose lines */
.bv-page .tbr-define-side {
  background: linear-gradient(180deg, #fbfdfe, var(--tbr-ground));
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  box-shadow: var(--tbr-shadow-sm);
}
.bv-page .tbr-define-side .tbr-body { font-size: 0.9rem; margin-bottom: 14px; }
.bv-page .tbr-define-side .tbr-body:last-child { margin-bottom: 0; }
.bv-page .tbr-flowline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.bv-page .tbr-flowline li {
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--tbr-blue-dark);
  background: var(--tbr-blue-soft);
  border: 1px solid rgba(0, 132, 200, 0.24);
  border-radius: 999px;
  padding: 6px 12px;
}
.bv-page .tbr-flowline li::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.46rem;
  color: #a9bccd;
  margin-left: 9px;
}
.bv-page .tbr-flowline li:last-child { background: var(--tbr-green-soft); border-color: rgba(22, 163, 74, 0.26); color: var(--tbr-green); }
.bv-page .tbr-flowline--plain li:last-child { background: #fff; border-color: var(--tbr-line); color: var(--tbr-ink); }
.bv-page .tbr-flowline li:last-child::after { content: none; }
.bv-page .tbr-define-quote {
  position: relative;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--tbr-ink);
  background: linear-gradient(180deg, #fbfdfe, var(--tbr-ground));
  border: 1px solid var(--tbr-line);
  border-left: 4px solid var(--tbr-blue);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin: 0;
}
.bv-page .tbr-define-quote strong { font-weight: 700; }

.bv-page .tbr-triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 46px;
  list-style: none;
  padding: 0;
}
.bv-page .tbr-triad li {
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  box-shadow: var(--tbr-shadow-sm);
  position: relative;
  overflow: hidden;
}
.bv-page .tbr-triad li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tbr-blue), rgba(0, 132, 200, 0.15));
}
.bv-page .tbr-triad-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--tbr-blue-soft);
  color: var(--tbr-blue);
  font-size: 0.95rem;
  margin-bottom: 12px;
}
.bv-page .tbr-triad li strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--tbr-ink);
  margin-bottom: 6px;
}
.bv-page .tbr-triad li p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--tbr-ink-2);
  margin: 0;
}

/* ==========================================================================
   4. LIFECYCLE RAIL  —  serpentine around a spine
   ========================================================================== */
.bv-page .tbr-rail {
  position: relative;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.bv-page .tbr-rail::before {
  content: "";
  position: absolute;
  top: 12px; bottom: 12px;
  left: 21px;
  width: 2px;
  background: linear-gradient(180deg, var(--tbr-blue), rgba(0, 132, 200, 0.14));
}
.bv-page .tbr-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.bv-page .tbr-step-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--tbr-blue);
  color: var(--tbr-blue-dark);
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 0 0 6px rgba(0, 132, 200, 0.07);
}
.bv-page .tbr-step-card {
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  /* every card carries the same internal alignment, on both sides of the spine */
  text-align: left;
  box-shadow: var(--tbr-shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.bv-page .tbr-step-card:hover { box-shadow: var(--tbr-shadow-md); transform: translateY(-2px); }
.bv-page .tbr-step-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--tbr-ink-2);
  margin: 0 0 12px;
}
.bv-page .tbr-step-card .tbr-chips { margin-top: 0; }

@media (min-width: 900px) {
  /* A tight zigzag threaded on a central spine, laid out in normal flow
     rather than on grid rows. Each card is just under half the rail wide
     and is pushed to one side by an auto margin, and every card after the
     first is pulled up so it overlaps its diagonal neighbour. Nothing
     reserves an empty half-row, so six short cards no longer fill several
     screens. The 76px channel down the middle belongs to the spine and the
     numbered nodes: no card ever enters it, so every node from 01 to 06 is
     drawn in clear space and none can be painted over. */
  .bv-page .tbr-rail {
    display: block;
    margin-top: 48px;
  }
  .bv-page .tbr-rail::before { left: 50%; transform: translateX(-1px); }
  .bv-page .tbr-step {
    display: block;
    width: calc(50% - 38px);
    margin: 0;
  }
  /* the vertical overlap between a card and its diagonal neighbour */
  .bv-page .tbr-step + .tbr-step { margin-top: -52px; }
  .bv-page .tbr-step:nth-child(odd) { margin-left: 0; margin-right: auto; }
  .bv-page .tbr-step:nth-child(even) { margin-left: auto; margin-right: 0; }
  /* 60px = the 44px node plus half the 76px channel minus half the node,
     which lands the node centre exactly on the spine from either side */
  .bv-page .tbr-step .tbr-step-node { position: absolute; top: 22px; }
  .bv-page .tbr-step:nth-child(odd) .tbr-step-node { right: -60px; left: auto; }
  .bv-page .tbr-step:nth-child(even) .tbr-step-node { left: -60px; right: auto; }
  .bv-page .tbr-step .tbr-step-card,
  .bv-page .tbr-step:nth-child(even) .tbr-step-card { text-align: left; }
  .bv-page .tbr-step .tbr-step-card .tbr-chips { justify-content: flex-start; }
  .bv-page .tbr-step-card { padding: 22px 24px; }
}

/* ==========================================================================
   SPLIT SECTIONS  (profile, workspace, dashboards)
   ========================================================================== */
.bv-page .tbr-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}
.bv-page .tbr-split-grid--wide-media { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.bv-page .tbr-split-media--first { order: -1; }

/* two-column media block: copy on one side, a small side-placed image on
   the other. Never a full-bleed band, never a tall centred square. */
/* the image column takes roughly 44% of the section: a substantial
   exhibit beside the copy, not a thumbnail and not a full-bleed band */
.bv-page .tbr-split-grid.tbr-media-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}
.bv-page .tbr-split-grid.tbr-media-grid--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.bv-page .tbr-media-col {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
/* an even pair: the image takes half the section and fills its side, so a
   tall copy column and its exhibit read as a deliberate pair rather than a
   column of text next to a thumbnail */
.bv-page .tbr-split-grid.tbr-media-grid--even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* the image is large and centred on the vertical axis of the copy
     column beside it, never hanging at the top over dead space */
  align-items: center;
  gap: 44px;
}
.bv-page .tbr-media-col--stretch { align-items: center; }
.bv-page .tbr-img-slot--fill { max-width: 100%; width: 100%; }
.bv-page .tbr-media-grid + .tbr-media-grid,
.bv-page .tbr-media-grid.tbr-hier-detail { margin-top: 54px; }

/* ==========================================================================
   IMAGE SLOTS  +  designed pending placeholder
   ========================================================================== */
.bv-page .tbr-img-slot {
  position: relative;
  /* the image column governs the rendered size. The width/height attributes
     on the <img> stay at the true file size so nothing reflows and the
     pending placeholder keeps the right box. */
  max-width: 100%;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--tbr-line);
  background: #fff;
  box-shadow: var(--tbr-shadow-md);
}
.bv-page .tbr-img-slot img {
  display: block;
  width: 100%;
  height: auto;
}
/* wide exhibits fill their column; square ones are capped so they never
   become a tall block */
.bv-page .tbr-img-slot--md { max-width: 100%; }
.bv-page .tbr-img-slot--sq { max-width: 400px; }
/* The placeholder shows only when JS marks the figure .tbr-is-pending
   (the image 404s). The box keeps the reserved aspect ratio, so nothing
   reflows when the artwork lands. */
.bv-page .tbr-ph { display: none; }
.bv-page .tbr-is-pending img { display: none; }
.bv-page .tbr-is-pending .tbr-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  aspect-ratio: var(--ar, 2 / 1);
  min-height: 176px;
  padding: 24px 20px;
  text-align: center;
  background:
    repeating-linear-gradient(-45deg, rgba(0, 132, 200, 0.03) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, #fbfdfe, var(--tbr-ground));
}
.bv-page .tbr-ph-badge {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--tbr-blue-dark);
  background: var(--tbr-blue-soft);
  border: 1px solid rgba(0, 132, 200, 0.28);
  border-radius: 999px;
  padding: 4px 11px;
}
.bv-page .tbr-ph-ic { font-size: 1.7rem; color: rgba(0, 132, 200, 0.5); }
.bv-page .tbr-ph-t { font-size: 0.92rem; font-weight: 700; color: var(--tbr-ink); }
.bv-page .tbr-ph-f {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--tbr-ink-3);
  word-break: break-all;
}

/* ==========================================================================
   6. WORKFLOW  —  14-stage chain (scrolls inside its own container)
   ========================================================================== */
.bv-page .tbr-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.bv-page .tbr-scroll-x::-webkit-scrollbar { height: 7px; }
.bv-page .tbr-scroll-x::-webkit-scrollbar-track { background: var(--tbr-line); border-radius: 999px; }
.bv-page .tbr-scroll-x::-webkit-scrollbar-thumb { background: rgba(0, 132, 200, 0.45); border-radius: 999px; }
.bv-page .tbr-scroll-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--tbr-ink-3);
  margin: 8px 0 0;
}

/* --------------------------------------------------------------------------
   The fourteen-stage workflow, as a snake. Seven cards across the top row
   reading left to right, then seven on the second row reading right to
   left, with a curved turn arc at the right-hand end. Two equal rows, no
   ragged tail. It wraps by dropping columns, never by scrolling sideways,
   at any width.
   The arc radius is always at or below half the row gap, otherwise the turn
   would overshoot the row below it.
   -------------------------------------------------------------------------- */
.bv-page .tbr-snake {
  --tbr-snake-gap-x: 14px;
  --tbr-snake-gap-y: 34px;
  --tbr-snake-arc: 17px;
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--tbr-snake-gap-x);
  row-gap: var(--tbr-snake-gap-y);
  margin: 0;
  /* the side padding is what keeps the turn arc inside the wrap */
  padding: 4px 22px;
}
.bv-page .tbr-snake-i {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  box-shadow: var(--tbr-shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.bv-page .tbr-snake-i:hover {
  box-shadow: var(--tbr-shadow-md);
  border-color: rgba(0, 132, 200, 0.42);
  transform: translateY(-2px);
}
.bv-page .tbr-snake-n {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--tbr-blue-dark);
}
.bv-page .tbr-snake-t {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tbr-ink);
  hyphens: auto;
}
.bv-page .tbr-snake-i--end { background: var(--tbr-green-soft); border-color: rgba(22, 163, 74, 0.3); }
.bv-page .tbr-snake-i--end .tbr-snake-n,
.bv-page .tbr-snake-i--end .tbr-snake-t { color: var(--tbr-green); }
/* straight connector, drawn in the column gap to the right of a card */
.bv-page .tbr-snake-i::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: calc(var(--tbr-snake-gap-x) * -1);
  left: auto;
  width: var(--tbr-snake-gap-x);
  height: 2px;
  margin-top: -1px;
  background: rgba(0, 132, 200, 0.34);
}
/* the curved turn at a row end: out, down past the row gap, back in */
.bv-page .tbr-snake-i::after {
  content: "";
  display: none;
  position: absolute;
  top: 50%;
  width: var(--tbr-snake-arc);
  height: calc(100% + var(--tbr-snake-gap-y));
  margin-top: -1px;
  border: 2px solid rgba(0, 132, 200, 0.34);
}
/* 7 columns: 7 then 7 */
.bv-page .tbr-snake-i:nth-child(1) { grid-column: 1; grid-row: 1; }
.bv-page .tbr-snake-i:nth-child(2) { grid-column: 2; grid-row: 1; }
.bv-page .tbr-snake-i:nth-child(3) { grid-column: 3; grid-row: 1; }
.bv-page .tbr-snake-i:nth-child(4) { grid-column: 4; grid-row: 1; }
.bv-page .tbr-snake-i:nth-child(5) { grid-column: 5; grid-row: 1; }
.bv-page .tbr-snake-i:nth-child(6) { grid-column: 6; grid-row: 1; }
.bv-page .tbr-snake-i:nth-child(7) { grid-column: 7; grid-row: 1; }
.bv-page .tbr-snake-i:nth-child(8) { grid-column: 7; grid-row: 2; }
.bv-page .tbr-snake-i:nth-child(9) { grid-column: 6; grid-row: 2; }
.bv-page .tbr-snake-i:nth-child(10) { grid-column: 5; grid-row: 2; }
.bv-page .tbr-snake-i:nth-child(11) { grid-column: 4; grid-row: 2; }
.bv-page .tbr-snake-i:nth-child(12) { grid-column: 3; grid-row: 2; }
.bv-page .tbr-snake-i:nth-child(13) { grid-column: 2; grid-row: 2; }
.bv-page .tbr-snake-i:nth-child(14) { grid-column: 1; grid-row: 2; }
.bv-page .tbr-snake-i::before { display: block; }
.bv-page .tbr-snake-i::after { display: none; }
.bv-page .tbr-snake-i:nth-child(7)::before,
.bv-page .tbr-snake-i:nth-child(8)::before { display: none; }
.bv-page .tbr-snake-i:nth-child(7)::after {
  display: block;
  right: calc(var(--tbr-snake-arc) * -1);
  left: auto;
  border-left: 0;
  border-right-width: 2px;
  border-radius: 0 var(--tbr-snake-arc) var(--tbr-snake-arc) 0;
}

/* ==========================================================================
   7. ACTION VERB RAIL
   ========================================================================== */
/* shared grids used on this page, wrapped under a tbr- ancestor so the
   shared stylesheets are never touched */
.bv-page .tbr-sec .why-grid { gap: 28px; margin-top: 54px; }
.bv-page .tbr-sec .why-card { padding: 30px 28px; }
.bv-page .tbr-faq-list { gap: 12px; }

.bv-page .tbr-verbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.bv-page .tbr-verbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tbr-ink);
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: 999px;
  padding: 8px 15px;
  box-shadow: var(--tbr-shadow-sm);
}
.bv-page .tbr-verbs li i { color: var(--tbr-blue); font-size: 0.8rem; }
.bv-page .tbr-verbs li::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.5rem;
  color: #c3cedb;
  margin-left: 4px;
}
.bv-page .tbr-verbs li:last-child::after { content: none; }

/* ==========================================================================
   8 / 11 / 17. TWO-PANEL BANDS
   ========================================================================== */
.bv-page .tbr-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
.bv-page .tbr-panels--flow { margin-top: 46px; }
.bv-page .tbr-panel--wide { margin-top: 34px; }
.bv-page .tbr-panel {
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  box-shadow: var(--tbr-shadow-sm);
}
.bv-page .tbr-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--tbr-ink);
  margin: 0 0 10px;
}
.bv-page .tbr-panel-title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--tbr-blue-soft);
  color: var(--tbr-blue);
  font-size: 0.85rem;
}
.bv-page .tbr-panel-intro {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--tbr-ink-2);
  margin: 0 0 16px;
}
.bv-page .tbr-panel-close {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--tbr-ink-2);
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--tbr-line);
}
.bv-page .tbr-panel-close strong { color: var(--tbr-ink); font-weight: 700; }

.bv-page .tbr-deflist {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 16px;
}
.bv-page .tbr-deflist:last-child { margin-bottom: 0; }
.bv-page .tbr-deflist li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--tbr-ink-2);
}
.bv-page .tbr-deflist li i {
  margin-top: 3px;
  color: var(--tbr-blue);
  font-size: 0.82rem;
}
.bv-page .tbr-deflist li strong { color: var(--tbr-ink); font-weight: 700; }

/* numbered factor list (traceability score) */
.bv-page .tbr-factors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  counter-reset: tbrfact;
}
.bv-page .tbr-factors li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tbr-ink);
  background: var(--tbr-ground);
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}
.bv-page .tbr-factors li::before {
  counter-increment: tbrfact;
  content: counter(tbrfact, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--tbr-blue);
  flex: none;
}

/* ==========================================================================
   10. DARK AI PANEL  +  animated artefact
   ========================================================================== */
.bv-page .tbr-ai {
  position: relative;
  overflow: hidden;
  padding: 94px 0;
  background: var(--tbr-dark-bg);
}
.bv-page .tbr-ai-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%);
}

/* the animated artefact: a case being read, then answered */
.bv-page .tbr-ai-scene {
  position: relative;
  /* a share of the dark panel comparable to the rest of its content, so the
     result rows and their status chips are not crowded together */
  max-width: 880px;
  margin: 0 auto 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  backdrop-filter: blur(4px);
}
.bv-page .tbr-ai-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--tbr-on-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.bv-page .tbr-ai-prompt i { color: var(--tbr-blue-soft); }
.bv-page .tbr-ai-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--tbr-blue-soft);
  animation: tbrCaret 1.1s steps(2) infinite;
}
@keyframes tbrCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.bv-page .tbr-ai-lines { display: grid; gap: 12px; }
.bv-page .tbr-ai-line {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.82rem;
  color: var(--tbr-on-dark-muted);
  opacity: 0;
  transform: translateY(6px);
  animation: tbrAiLine 9s ease-in-out infinite;
  animation-delay: calc(var(--l) * 0.8s);
}
.bv-page .tbr-ai-line i { color: var(--tbr-blue-soft); font-size: 0.72rem; }
.bv-page .tbr-ai-line b {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--tbr-blue-soft);
  border: 1px solid rgba(224, 242, 254, 0.3);
  border-radius: 999px;
  padding: 4px 12px;
  flex: none;
  margin-left: auto;
}
@keyframes tbrAiLine {
  0%, 6%   { opacity: 0; transform: translateY(6px); }
  16%, 88% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(6px); }
}

/* five cards: 3 in the first row, 2 centred in the second */
.bv-page .tbr-ai-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.bv-page .tbr-ai-grid > .tbr-ai-card {
  flex: 0 1 calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
  min-width: 240px;
}
.bv-page .tbr-ai-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.bv-page .tbr-ai-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 132, 200, 0.5);
  background: rgba(255, 255, 255, 0.08);
}
.bv-page .tbr-ai-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(0, 132, 200, 0.22);
  color: var(--tbr-blue-soft);
  font-size: 1rem;
  margin-bottom: 13px;
}
.bv-page .tbr-ai-card h3 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--tbr-on-dark);
  margin: 0 0 8px;
}
.bv-page .tbr-ai-card p {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--tbr-on-dark-muted);
  margin: 0;
}

.bv-page .tbr-trust-line {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  /* a contained closing note, centred under the panel heading. Wide
     enough to read as a deliberate block, short of the full panel. */
  max-width: 780px;
  margin: 34px auto 0;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--tbr-on-dark-muted);
}
.bv-page .tbr-trust-line > i { color: var(--tbr-blue-soft); margin-top: 3px; }
.bv-page .tbr-trust-line strong { color: var(--tbr-on-dark); font-weight: 700; }
.bv-page .tbr-trust-line a { color: var(--tbr-blue-soft); text-decoration: underline; text-underline-offset: 3px; }
.bv-page .tbr-trust-line a:hover { color: #fff; }

.bv-page .tbr-cta-row { text-align: center; margin-top: 28px; }

/* ==========================================================================
   12. TABBED CAPABILITY DECK  (shared tab classes, wrapper only)
   ========================================================================== */
.bv-page .tbr-tabs .tab-nav { flex-wrap: nowrap; min-width: max-content; }
.bv-page .tbr-tab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 34px; }
/* The eight capability cards in the Workflow and Allocation and the
   Intelligence, Integration and Reporting panels render two per row,
   centred. The two three-card panels keep the shared three-up grid. */
.bv-page #tbr-tab-flow .tab-cards-grid,
.bv-page #tbr-tab-intel .tab-cards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}
.bv-page #tbr-tab-flow .tab-cards-grid > .tab-card,
.bv-page #tbr-tab-intel .tab-cards-grid > .tab-card {
  flex: 0 1 calc((100% - 30px) / 2);
  max-width: calc((100% - 30px) / 2);
  min-width: 260px;
}
.bv-page .tbr-tab-intro {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--tbr-ink-2);
  margin: 0 0 20px;
  max-width: 78ch;
}

/* ==========================================================================
   13. MEASURE GRID
   ========================================================================== */
.bv-page .tbr-measures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bv-page .tbr-measures li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tbr-ink);
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-left: 3px solid var(--tbr-blue);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

/* ==========================================================================
   14. HIERARCHY LADDER
   ========================================================================== */
/* all seven levels on one compact centred row, chained by chevrons */
.bv-page .tbr-hier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tbrlvl;
}
.bv-page .tbr-hier > li {
  flex: 0 1 calc((100% - 84px) / 7);
  max-width: calc((100% - 84px) / 7);
  min-width: 0;
}
.bv-page .tbr-hier li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tbr-ink);
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  margin: 0;
  box-shadow: var(--tbr-shadow-sm);
  border-top: 3px solid rgba(0, 132, 200, calc(0.18 + var(--lv) * 0.12));
}
/* the chevron that keeps the row reading as a chain */
.bv-page .tbr-hier li::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: -14px;
  width: 14px;
  text-align: center;
  transform: translateY(-50%);
  font-size: 0.42rem;
  color: #a9bccd;
}
.bv-page .tbr-hier li:nth-child(7)::after { content: none; }
.bv-page .tbr-hier li::before {
  counter-increment: tbrlvl;
  content: "LEVEL " counter(tbrlvl);
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--tbr-ink-3);
}
.bv-page .tbr-hier li:last-child {
  background: var(--tbr-blue-soft);
  border-color: rgba(0, 132, 200, 0.28);
  color: var(--tbr-blue-dark);
}

/* ==========================================================================
   15. AUDIENCE CARDS
   ========================================================================== */
/* eight cards: 3 / 3 / 2, and the short final row is centred */
.bv-page .tbr-aud-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  margin-top: 54px;
}
.bv-page .tbr-aud-grid > .tbr-aud-card {
  flex: 0 1 calc((100% - 52px) / 3);
  max-width: calc((100% - 52px) / 3);
  min-width: 260px;
}
.bv-page .tbr-aud-card {
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  box-shadow: var(--tbr-shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bv-page .tbr-aud-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tbr-shadow-md);
  border-color: rgba(0, 132, 200, 0.35);
}
.bv-page .tbr-aud-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--tbr-blue-soft);
  color: var(--tbr-blue);
  font-size: 0.98rem;
  margin-bottom: 13px;
}
.bv-page .tbr-aud-card h3 {
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--tbr-ink);
  margin: 0 0 8px;
}
.bv-page .tbr-aud-card p {
  font-size: 0.86rem;
  line-height: 1.68;
  color: var(--tbr-ink-2);
  margin: 0;
}


/* ==========================================================================
   16. COMPARISON TABLE
   ========================================================================== */
.bv-page .tbr-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 0.86rem;
}
.bv-page .tbr-table th,
.bv-page .tbr-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--tbr-line);
  line-height: 1.6;
  vertical-align: top;
}
.bv-page .tbr-table thead th {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tbr-ink);
  background: var(--tbr-ground);
}
.bv-page .tbr-table thead th:last-child {
  background: var(--tbr-blue-soft);
  color: var(--tbr-blue-dark);
}
.bv-page .tbr-table tbody th {
  font-weight: 600;
  color: var(--tbr-ink);
  background: #fbfdfe;
  width: 20%;
}
.bv-page .tbr-table tbody td { color: var(--tbr-ink-2); }
.bv-page .tbr-table tbody td:last-child {
  color: var(--tbr-ink);
  background: rgba(224, 242, 254, 0.32);
}
.bv-page .tbr-table tbody tr:last-child th,
.bv-page .tbr-table tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   18. STAT RAIL
   ========================================================================== */
.bv-page .tbr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}
.bv-page .tbr-stats li {
  text-align: center;
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-md);
  padding: 28px 18px;
  box-shadow: var(--tbr-shadow-sm);
}
.bv-page .tbr-stats b {
  display: block;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  color: var(--tbr-blue);
  margin-bottom: 7px;
}
.bv-page .tbr-stats span {
  display: block;
  font-size: 0.8rem;
  color: var(--tbr-ink-2);
}

/* ==========================================================================
   19. WHY BEVERON
   ========================================================================== */
.bv-page .tbr-three {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}
.bv-page .tbr-three-card {
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-md);
  padding: 30px 28px;
  box-shadow: var(--tbr-shadow-sm);
}
.bv-page .tbr-three-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--tbr-blue-soft);
  color: var(--tbr-blue);
  font-size: 0.98rem;
  margin-bottom: 13px;
}
.bv-page .tbr-three-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tbr-ink);
  margin: 0 0 8px;
}
.bv-page .tbr-three-card p {
  font-size: 0.87rem;
  line-height: 1.7;
  color: var(--tbr-ink-2);
  margin: 0;
}
.bv-page .tbr-eeat {
  margin: 24px 0 0;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--tbr-line);
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--tbr-ink-2);
}

/* ==========================================================================
   20. FAQ  (shared .faq-item; wrapper only)
   ========================================================================== */
.bv-page .tbr-faq-list { display: grid; gap: 10px; max-width: 900px; margin: 0 auto; }

/* ==========================================================================
   21. FINAL CTA + LEAD FORM
   ========================================================================== */
/* same ground and the same two-column shape as the entity-and-governance
   final section: a populated copy column beside the form card. */
.bv-page .tbr-final {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background: var(--tbr-dark-bg);
}
.bv-page .tbr-final-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 52px;
  align-items: center;
}
.bv-page .tbr-final-copy p {
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--tbr-on-dark-muted);
  margin: 0 0 20px;
}
.bv-page .tbr-final-copy p strong { color: var(--tbr-on-dark); font-weight: 700; }
.bv-page .tbr-final-trust {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.bv-page .tbr-final-trust li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--tbr-on-dark-muted);
}
.bv-page .tbr-final-trust li i { color: var(--tbr-blue-soft); width: 18px; text-align: center; }
.bv-page .tbr-final-trust li strong { color: var(--tbr-on-dark); font-weight: 700; }

/* form card (scoped to this section so no shared class is restyled) */
.bv-page .tbr-final .form-card {
  margin: 0;
  background: rgba(0, 132, 200, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 24px 60px -26px rgba(0, 0, 0, 0.55);
}
.bv-page .tbr-final .form-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f1f7fc;
  margin: 0 0 20px;
}
.bv-page .tbr-final .f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.bv-page .tbr-final .f-field { margin-bottom: 14px; position: relative; }
.bv-page .tbr-final .f-row .f-field { margin-bottom: 0; }
.bv-page .tbr-final .f-field input[type="text"],
.bv-page .tbr-final .f-field input[type="email"],
.bv-page .tbr-final .f-field input[type="tel"],
.bv-page .tbr-final .f-field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bv-page .tbr-final .f-field textarea { min-height: 108px; resize: vertical; }
.bv-page .tbr-final .f-field input:focus,
.bv-page .tbr-final .f-field textarea:focus {
  outline: none;
  border-color: var(--tbr-blue);
  box-shadow: 0 0 0 3px rgba(0, 132, 200, 0.14);
}
.bv-page .tbr-final .f-field ::placeholder { color: rgba(241, 245, 249, 0.6); }
/* the country control is a shared component, wrapped here only so it reads
   on the navy card. Its popup panel stays light. */
.bv-page .tbr-final .bk-dd-toggle {
  background: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.bv-page .tbr-final .bk-dd-toggle .bk-dd-placeholder { color: rgba(241, 245, 249, 0.6); }
.bv-page .tbr-final .bk-dd-toggle:focus,
.bv-page .tbr-final .bk-dd-toggle.bk-dd-open {
  border-color: var(--tbr-blue);
  box-shadow: 0 0 0 3px rgba(0, 132, 200, 0.25);
}
.bv-page .tbr-final .bk-dd-panel { background: #ffffff; color: var(--tbr-ink); }
.bv-page .tbr-final .bk-dd-search input[type="text"] {
  background: #ffffff;
  color: var(--tbr-ink);
  border: 1px solid var(--tbr-line);
}
.bv-page .tbr-final .bk-dd-search input[type="text"]::placeholder { color: var(--tbr-ink-3); }
.bv-page .tbr-final .bk-dd-opt { color: var(--tbr-ink); }
.bv-page .tbr-final .f-err {
  display: block;
  font-size: 0.74rem;
  color: #ef4444;
  margin-top: 5px;
  min-height: 1em;
}
.bv-page .tbr-final .f-msg {
  font-size: 0.86rem;
  color: var(--tbr-on-dark);
  margin-top: 12px;
  min-height: 1.2em;
}
.bv-page .tbr-final .hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}
.bv-page .tbr-final .form-card .btn-primary {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.bv-page .tbr-form-note {
  font-size: 0.82rem;
  color: rgba(241, 245, 249, 0.72);
  text-align: center;
  margin: 16px 0 0;
}
.bv-page .tbr-form-note a { color: #9fd6f3; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bv-page .tbr-form-note a:hover { color: #ffffff; }

/* mid-content CTA banner. Same house dark as the AI panel, and it is placed
   between two light sections so a dark band never meets another. */
.bv-page .cta-banner.tbr-ctab { background: var(--tbr-dark-bg); }
.bv-page .cta-banner.tbr-ctab h2 { color: #f1f7fc; }
.bv-page .cta-banner.tbr-ctab p { color: #b9cadb; }
.bv-page .cta-banner.tbr-ctab .cta-banner-btn { background: var(--tbr-blue); color: #ffffff; }
.bv-page .cta-banner.tbr-ctab .cta-banner-btn:hover { background: var(--tbr-blue-dark); color: #ffffff; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* the serpentine steps down 8 -> 4 -> 2 -> 1 column. It never scrolls
   sideways: the grid simply carries fewer cards per row, and the turn arcs
   are recomputed for each column count. */
@media (max-width: 1080px) {
  .bv-page .tbr-snake {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    --tbr-snake-gap-x: 22px;
    --tbr-snake-gap-y: 30px;
    --tbr-snake-arc: 15px;
    padding: 4px 20px;
  }
  .bv-page .tbr-snake-t { font-size: 0.76rem; }
  .bv-page .tbr-snake-i:nth-child(1) { grid-column: 1; grid-row: 1; }
  .bv-page .tbr-snake-i:nth-child(2) { grid-column: 2; grid-row: 1; }
  .bv-page .tbr-snake-i:nth-child(3) { grid-column: 3; grid-row: 1; }
  .bv-page .tbr-snake-i:nth-child(4) { grid-column: 4; grid-row: 1; }
  .bv-page .tbr-snake-i:nth-child(5) { grid-column: 4; grid-row: 2; }
  .bv-page .tbr-snake-i:nth-child(6) { grid-column: 3; grid-row: 2; }
  .bv-page .tbr-snake-i:nth-child(7) { grid-column: 2; grid-row: 2; }
  .bv-page .tbr-snake-i:nth-child(8) { grid-column: 1; grid-row: 2; }
  .bv-page .tbr-snake-i:nth-child(9) { grid-column: 1; grid-row: 3; }
  .bv-page .tbr-snake-i:nth-child(10) { grid-column: 2; grid-row: 3; }
  .bv-page .tbr-snake-i:nth-child(11) { grid-column: 3; grid-row: 3; }
  .bv-page .tbr-snake-i:nth-child(12) { grid-column: 4; grid-row: 3; }
  .bv-page .tbr-snake-i:nth-child(13) { grid-column: 4; grid-row: 4; }
  .bv-page .tbr-snake-i:nth-child(14) { grid-column: 3; grid-row: 4; }
  .bv-page .tbr-snake-i::before { display: block; }
  .bv-page .tbr-snake-i::after { display: none; }
  .bv-page .tbr-snake-i:nth-child(4)::before,
  .bv-page .tbr-snake-i:nth-child(5)::before,
  .bv-page .tbr-snake-i:nth-child(12)::before,
  .bv-page .tbr-snake-i:nth-child(13)::before { display: none; }
  .bv-page .tbr-snake-i:nth-child(4)::after,
  .bv-page .tbr-snake-i:nth-child(12)::after {
    display: block;
    right: calc(var(--tbr-snake-arc) * -1);
    left: auto;
    border-left: 0;
    border-right-width: 2px;
    border-radius: 0 var(--tbr-snake-arc) var(--tbr-snake-arc) 0;
  }
  .bv-page .tbr-snake-i:nth-child(8)::after {
    display: block;
    left: calc(var(--tbr-snake-arc) * -1);
    right: auto;
    border-right: 0;
    border-left-width: 2px;
    border-radius: var(--tbr-snake-arc) 0 0 var(--tbr-snake-arc);
  }
}

@media (max-width: 1080px) {
  .bv-page .tbr-hero-grid { gap: 34px; }
  .bv-page .tbr-define-grid { gap: 34px; }
  .bv-page .tbr-split-grid { gap: 34px; }
  .bv-page .tbr-split-grid.tbr-media-grid,
  .bv-page .tbr-split-grid.tbr-media-grid--rev { gap: 40px; }
  .bv-page .tbr-hier > li { flex-basis: calc((100% - 42px) / 4); max-width: calc((100% - 42px) / 4); }
  .bv-page .tbr-hier li:nth-child(4)::after { content: none; }
}

@media (max-width: 820px) {
  .bv-page .tbr-snake {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --tbr-snake-gap-x: 22px;
    --tbr-snake-gap-y: 26px;
    --tbr-snake-arc: 13px;
    padding: 4px 17px;
  }
  .bv-page .tbr-snake-i:nth-child(1) { grid-column: 1; grid-row: 1; }
  .bv-page .tbr-snake-i:nth-child(2) { grid-column: 2; grid-row: 1; }
  .bv-page .tbr-snake-i:nth-child(3) { grid-column: 2; grid-row: 2; }
  .bv-page .tbr-snake-i:nth-child(4) { grid-column: 1; grid-row: 2; }
  .bv-page .tbr-snake-i:nth-child(5) { grid-column: 1; grid-row: 3; }
  .bv-page .tbr-snake-i:nth-child(6) { grid-column: 2; grid-row: 3; }
  .bv-page .tbr-snake-i:nth-child(7) { grid-column: 2; grid-row: 4; }
  .bv-page .tbr-snake-i:nth-child(8) { grid-column: 1; grid-row: 4; }
  .bv-page .tbr-snake-i:nth-child(9) { grid-column: 1; grid-row: 5; }
  .bv-page .tbr-snake-i:nth-child(10) { grid-column: 2; grid-row: 5; }
  .bv-page .tbr-snake-i:nth-child(11) { grid-column: 2; grid-row: 6; }
  .bv-page .tbr-snake-i:nth-child(12) { grid-column: 1; grid-row: 6; }
  .bv-page .tbr-snake-i:nth-child(13) { grid-column: 1; grid-row: 7; }
  .bv-page .tbr-snake-i:nth-child(14) { grid-column: 2; grid-row: 7; }
  .bv-page .tbr-snake-i::before { display: block; }
  .bv-page .tbr-snake-i::after { display: none; }
  .bv-page .tbr-snake-i:nth-child(2)::before,
  .bv-page .tbr-snake-i:nth-child(3)::before,
  .bv-page .tbr-snake-i:nth-child(6)::before,
  .bv-page .tbr-snake-i:nth-child(7)::before,
  .bv-page .tbr-snake-i:nth-child(10)::before,
  .bv-page .tbr-snake-i:nth-child(11)::before,
  .bv-page .tbr-snake-i:nth-child(14)::before { display: none; }
  .bv-page .tbr-snake-i:nth-child(2)::after,
  .bv-page .tbr-snake-i:nth-child(6)::after,
  .bv-page .tbr-snake-i:nth-child(10)::after {
    display: block;
    right: calc(var(--tbr-snake-arc) * -1);
    left: auto;
    border-left: 0;
    border-right-width: 2px;
    border-radius: 0 var(--tbr-snake-arc) var(--tbr-snake-arc) 0;
  }
  .bv-page .tbr-snake-i:nth-child(4)::after,
  .bv-page .tbr-snake-i:nth-child(8)::after,
  .bv-page .tbr-snake-i:nth-child(12)::after {
    display: block;
    left: calc(var(--tbr-snake-arc) * -1);
    right: auto;
    border-right: 0;
    border-left-width: 2px;
    border-radius: var(--tbr-snake-arc) 0 0 var(--tbr-snake-arc);
  }
}

@media (max-width: 900px) {
  .bv-page .tbr-hero { max-height: none; padding: 84px 0 44px; }
  .bv-page .tbr-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .bv-page .tbr-define-grid,
  .bv-page .tbr-split-grid,
  .bv-page .tbr-split-grid--wide-media,
  .bv-page .tbr-split-grid.tbr-media-grid,
  .bv-page .tbr-split-grid.tbr-media-grid--rev,
  .bv-page .tbr-final-grid { grid-template-columns: minmax(0, 1fr); }
  .bv-page .tbr-split-media--first { order: 0; }
  .bv-page .tbr-media-grid + .tbr-media-grid,
  .bv-page .tbr-media-grid.tbr-hier-detail { margin-top: 40px; }
  .bv-page .tbr-sec-head--flush { margin-bottom: 4px; }
  .bv-page .tbr-panels { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bv-page .tbr-triad { grid-template-columns: minmax(0, 1fr); }
  .bv-page .tbr-aud-grid > .tbr-aud-card,
  .bv-page .tbr-ai-grid > .tbr-ai-card,
  .bv-page #tbr-tab-flow .tab-cards-grid > .tab-card,
  .bv-page #tbr-tab-intel .tab-cards-grid > .tab-card {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }
  .bv-page .tbr-sec { padding: 64px 0; }
  .bv-page .tbr-define { padding: 60px 0; }
  .bv-page .tbr-ai, .bv-page .tbr-final { padding: 66px 0; }
}

/* the decorative hero artefact never renders on mobile */
@media (max-width: 768px) {
  .bv-page .tbr-stage { display: none; }
}

/* single column: the snake becomes a plain vertical rail with straight
   connectors, so nothing can overflow a 360px viewport. */
@media (max-width: 560px) {
  .bv-page .tbr-snake {
    grid-template-columns: minmax(0, 1fr);
    --tbr-snake-gap-y: 18px;
    padding: 4px 0;
  }
  .bv-page .tbr-snake-i:nth-child(1) { grid-column: 1; grid-row: 1; }
  .bv-page .tbr-snake-i:nth-child(2) { grid-column: 1; grid-row: 2; }
  .bv-page .tbr-snake-i:nth-child(3) { grid-column: 1; grid-row: 3; }
  .bv-page .tbr-snake-i:nth-child(4) { grid-column: 1; grid-row: 4; }
  .bv-page .tbr-snake-i:nth-child(5) { grid-column: 1; grid-row: 5; }
  .bv-page .tbr-snake-i:nth-child(6) { grid-column: 1; grid-row: 6; }
  .bv-page .tbr-snake-i:nth-child(7) { grid-column: 1; grid-row: 7; }
  .bv-page .tbr-snake-i:nth-child(8) { grid-column: 1; grid-row: 8; }
  .bv-page .tbr-snake-i:nth-child(9) { grid-column: 1; grid-row: 9; }
  .bv-page .tbr-snake-i:nth-child(10) { grid-column: 1; grid-row: 10; }
  .bv-page .tbr-snake-i:nth-child(11) { grid-column: 1; grid-row: 11; }
  .bv-page .tbr-snake-i:nth-child(12) { grid-column: 1; grid-row: 12; }
  .bv-page .tbr-snake-i:nth-child(13) { grid-column: 1; grid-row: 13; }
  .bv-page .tbr-snake-i:nth-child(14) { grid-column: 1; grid-row: 14; }
  .bv-page .tbr-snake-i::after { display: none; }
  .bv-page .tbr-snake-i::before {
    display: block;
    top: 100%;
    right: auto;
    left: 20px;
    width: 2px;
    height: var(--tbr-snake-gap-y);
    margin-top: 0;
  }
  .bv-page .tbr-snake-i:nth-child(14)::before { display: none; }
}

@media (max-width: 640px) {
  .bv-page .tbr-wrap { padding: 0 16px; }
  .bv-page .tbr-hier > li { flex-basis: calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2); }
  .bv-page .tbr-hier li:nth-child(2)::after,
  .bv-page .tbr-hier li:nth-child(4)::after,
  .bv-page .tbr-hier li:nth-child(6)::after { content: none; }
  .bv-page .tbr-define-side { padding: 22px 20px; }
  .bv-page .tbr-snake-i { padding: 12px 14px; }
  .bv-page .tbr-snake-t { font-size: 0.8rem; }
  .bv-page .tbr-img-slot--sq { max-width: 300px; }
  .bv-page .tbr-hero { padding: 76px 0 40px; }
  .bv-page .tbr-hero-ctas .tbr-btn { width: 100%; }
  .bv-page .tbr-final .f-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bv-page .tbr-final .f-row .f-field { margin-bottom: 14px; }
  .bv-page .tbr-final .form-card { padding: 22px 18px; }
  .bv-page .tbr-panel { padding: 20px 18px; }
  .bv-page .tbr-step-card { padding: 16px; }
  .bv-page .tbr-measures { grid-template-columns: minmax(0, 1fr); }
  .bv-page .tbr-factors { grid-template-columns: minmax(0, 1fr); }
  .bv-page .tbr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bv-page .tbr-table tbody th { width: auto; }
}

/* ==========================================================================
   REDUCED MOTION  —  every animation has an escape
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bv-page .tbr-w,
  .bv-page .tbr-kicker-dot,
  .bv-page .tbr-float,
  .bv-page .tbr-spark i,
  .bv-page .tbr-cc-row,
  .bv-page .tbr-rc-node--live .tbr-rc-dot,
  .bv-page .tbr-progress i,
  .bv-page .tbr-ag-bar i,
  .bv-page .tbr-ai-caret,
  .bv-page .tbr-ai-line {
    animation: none !important;
  }
  .bv-page .tbr-w { opacity: 1; transform: none; }
  .bv-page .tbr-spark i { transform: scaleY(1); }
  .bv-page .tbr-cc-row { background-color: transparent; }
  .bv-page .tbr-ai-line { opacity: 1; transform: none; }
  /* the artefact lands in its finished state: bars filled, live stage lit */
  .bv-page .tbr-progress i,
  .bv-page .tbr-ag-bar i { transform: scaleX(1); }
  .bv-page .tbr-rc-node--live .tbr-rc-dot { box-shadow: 0 0 0 3px rgba(0, 132, 200, 0.18); }
  .bv-page .tbr-btn:hover,
  .bv-page .tbr-aud-card:hover,
  .bv-page .tbr-ai-card:hover,
  .bv-page .tbr-snake-i:hover,
  .bv-page .tbr-step-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Rating badge. It sits in the final trust area, not the hero, and it is
   rendered visibly because a rating that exists only in structured data is
   a policy violation, not an optimisation.
   -------------------------------------------------------------------------- */
.bv-page .tbr-stars {
  display: inline-flex;
  gap: 2px;
  color: #f5a623;
  font-size: 0.82rem;
  line-height: 1;
}
.bv-page .tbr-final-trust .tbr-rating {
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.bv-page .tbr-final-trust .tbr-rating .tbr-stars,
.bv-page .tbr-final-trust .tbr-rating .tbr-stars i { color: #f5a623; }
.bv-page .tbr-final-trust .tbr-rating strong { color: var(--tbr-on-dark); }

/* --------------------------------------------------------------------------
   No horizontal page scroll, at any width.
   -------------------------------------------------------------------------- */
.bv-page .tbr-sec,
.bv-page .tbr-define,
.bv-page .tbr-ai,
.bv-page .tbr-final,
.bv-page .cta-banner.tbr-ctab { overflow-x: clip; }
.bv-page .tbr-snake { max-width: 100%; }
.bv-page .tbr-img-slot { width: 100%; }

/* ==========================================================================
   PRODUCT SCREENSHOT EXHIBITS  —  full-width rows + view-full-size lightbox

   The four product screenshots are 1400 x 700 interface mockups. A reader
   has to be able to make out the interface, so each one takes a row of its
   own underneath its copy and fills the content column edge to edge,
   instead of sharing a 50/50 split with a text column. The five conceptual
   posters keep the two-column media split and are untouched here.
   ========================================================================== */
.bv-page .tbr-split-grid.tbr-media-grid.tbr-shotrow,
.bv-page .tbr-split-grid.tbr-media-grid--rev.tbr-shotrow {
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
/* the exhibit always follows its copy, whichever side the source order put
   it on, so the reading order stays copy first and the screenshot reads as
   the evidence for the paragraph above it */
.bv-page .tbr-shotrow .tbr-media-col {
  order: 2;
  display: block;
  width: 100%;
  min-width: 0;
}
.bv-page .tbr-shotrow .tbr-img-slot--shot {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.bv-page .tbr-img-slot--shot {
  border-radius: 16px;
  box-shadow: var(--tbr-shadow-lg);
}
.bv-page .tbr-img-slot--shot img { width: 100%; height: auto; }

/* --- the view-full-size control ----------------------------------------- */
/* permanently visible, not hover-only: a touch device has no hover state
   and the control has to announce itself there too */
.bv-page .tbr-zoom {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(11, 31, 51, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.92;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.bv-page .tbr-zoom i { font-size: 0.8rem; }
.bv-page .tbr-img-slot--shot:hover .tbr-zoom { opacity: 1; }
.bv-page .tbr-zoom:hover {
  background: var(--tbr-blue);
  border-color: var(--tbr-blue);
  opacity: 1;
  transform: translateY(-1px);
}
.bv-page .tbr-zoom:focus-visible {
  opacity: 1;
  background: var(--tbr-blue-dark);
  /* a white ring against the screenshot, a blue ring against the page:
     the control has to be findable on either ground */
  box-shadow: 0 0 0 2px #fff;
  outline: 3px solid var(--tbr-blue);
  outline-offset: 3px;
}
/* a screenshot that failed to load shows the pending frame, and a pending
   frame has nothing to enlarge */
.bv-page .tbr-is-pending .tbr-zoom { display: none; }

/* --- the lightbox -------------------------------------------------------- */
.bv-page .tbr-lightbox {
  position: fixed;
  inset: 0;
  /* above the floating WhatsApp launcher, which the house pins near the top
     of the stack. A modal has to cover the page it dims. */
  z-index: 2147483001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 4vw;
  background: rgba(8, 18, 28, 0.93);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.bv-page .tbr-lightbox.is-open {
  display: flex;
  animation: tbrLbFade 0.2s ease;
}
@keyframes tbrLbFade { from { opacity: 0; } to { opacity: 1; } }

.bv-page .tbr-lightbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 90vh;
}
/* scaled to fit the viewport, and never past the natural size of the file:
   --tbr-lb-max is written by the script from the image itself */
.bv-page .tbr-lightbox-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, var(--tbr-lb-max, 92vw));
  max-height: 76vh;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  animation: tbrLbZoom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tbrLbZoom {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.bv-page .tbr-lightbox-cap {
  max-width: min(92vw, 880px);
  /* the alt text runs long on a narrow screen, so it truncates cleanly
     instead of being cut mid-line by a height cap */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #c9d6e2;
}
.bv-page .tbr-lightbox-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.bv-page .tbr-lightbox-close:hover {
  background: var(--tbr-blue);
  border-color: var(--tbr-blue);
  transform: rotate(90deg);
}
.bv-page .tbr-lightbox-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .bv-page .tbr-split-grid.tbr-media-grid.tbr-shotrow,
  .bv-page .tbr-split-grid.tbr-media-grid--rev.tbr-shotrow { gap: 24px; }
}
@media (max-width: 560px) {
  .bv-page .tbr-zoom {
    top: 8px;
    right: 8px;
    /* a finger target, not a mouse target */
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 10px;
  }
  /* the icon carries it at this width. The accessible name is on the
     button itself, so nothing is lost by dropping the label */
  .bv-page .tbr-zoom .tbr-zoom-t { display: none; }
  .bv-page .tbr-lightbox { padding: 4vh 3vw; }
  .bv-page .tbr-lightbox-close { top: 10px; right: 12px; width: 42px; height: 42px; }
  .bv-page .tbr-lightbox-img { max-height: 68vh; }
}

@media (prefers-reduced-motion: reduce) {
  .bv-page .tbr-lightbox.is-open,
  .bv-page .tbr-lightbox-img { animation: none !important; }
  .bv-page .tbr-zoom:hover { transform: none; }
  .bv-page .tbr-lightbox-close:hover { transform: none; }
}

.bv-page .tbr-railcard {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  width: 47%;
  min-width: 0;max-width: 250px;
  background: #fff;
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-md);
  box-shadow: var(--tbr-shadow-lg);
  padding: 12px 13px;
}


/* ---- hero artefact ---- */

@keyframes tbrPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 132, 200, 0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(0, 132, 200, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 132, 200, 0); }
}


.bv-page .tbr-float {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 7px 13px;
  background: #fff;
  border: 1px solid var(--tbr-line);
  box-shadow: var(--tbr-shadow-md);
  animation: tbrFloat 5.4s ease-in-out infinite;
}

.bv-page .tbr-float i { font-size: 0.68rem; }

.bv-page .tbr-float--a {
  top: 4px; left: 2px;
  color: var(--tbr-blue-dark);
}

.bv-page .tbr-float--a i { color: var(--tbr-blue); }

.bv-page .tbr-float--b {
  bottom: 8px; right: 6px;
  color: var(--tbr-green);
  animation-delay: 1.6s;
}

.bv-page .tbr-float--b i { color: var(--tbr-green); }

@keyframes tbrFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}


.bv-page .tbr-scene { position: relative; height: 100%; }

.bv-page .tbr-dashbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--tbr-line);
  background: linear-gradient(180deg, #fbfdfe, var(--tbr-ground));
}

.bv-page .tbr-dots { display: inline-flex; gap: 5px; }

.bv-page .tbr-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #dbe3ec; display: inline-block;
}

.bv-page .tbr-dashtitle {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--tbr-ink-3);
}

.bv-page .tbr-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px 16px 12px;
}

.bv-page .tbr-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  background: var(--tbr-ground);
}

.bv-page .tbr-kpi b {
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1;
  color: var(--tbr-ink);
}

.bv-page .tbr-kpi em {
  font-style: normal;
  font-size: 0.62rem;
  color: var(--tbr-ink-3);
  line-height: 1.3;
}

.bv-page .tbr-kpi--blue { background: var(--tbr-blue-soft); border-color: rgba(0, 132, 200, 0.2); }

.bv-page .tbr-kpi--blue b { color: var(--tbr-blue-dark); }

.bv-page .tbr-kpi--green { background: var(--tbr-green-soft); border-color: rgba(22, 163, 74, 0.2); }

.bv-page .tbr-kpi--green b { color: var(--tbr-green); }


.bv-page .tbr-spark {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 56px;
  padding: 0 16px 6px;
}

.bv-page .tbr-spark i {
  flex: 1;
  display: block;
  height: var(--h);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, rgba(0, 132, 200, 0.8), rgba(0, 132, 200, 0.28));
  transform-origin: bottom;
  animation: tbrBar 2.8s ease-out forwards;
  transform: scaleY(0.12);
  animation-delay: calc(var(--i) * 0.09s);
}


.bv-page .tbr-dashrows { padding: 6px 16px 0; display: grid; gap: 8px; }

.bv-page .tbr-dashrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  color: var(--tbr-ink-2);
  border: 1px solid var(--tbr-line);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
}

.bv-page .tbr-dashrow > i { color: var(--tbr-blue); font-size: 0.78rem; }

.bv-page .tbr-dashrow span { flex: 1; }

.bv-page .tbr-tag {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-radius: 999px;
  padding: 3px 9px;
}

.bv-page .tbr-tag--green { background: var(--tbr-green-soft); color: var(--tbr-green); }

.bv-page .tbr-tag--amber { background: var(--tbr-amber-soft); color: var(--tbr-amber); }

.bv-page .tbr-tag--blue { background: var(--tbr-blue-soft); color: var(--tbr-blue-dark); }

.bv-page .tbr-cc-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--tbr-ink-3);
  margin-bottom: 9px;
}

.bv-page .tbr-cc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--tbr-ink-2);
  padding: 6px 0;
  border-top: 1px solid var(--tbr-line);
}

.bv-page .tbr-cc-row:first-of-type { border-top: 0; }

.bv-page .tbr-cc-row > i { color: var(--tbr-ink-3); font-size: 0.72rem; }

.bv-page .tbr-cc-val { flex: 1; font-family: var(--font-mono); font-size: 0.68rem; }

.bv-page .tbr-cc-state {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.53rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef2f6;
  color: var(--tbr-ink-3);
  opacity: 0;
  animation: tbrFlip 12s ease-in-out infinite;
  animation-delay: calc(var(--d) * 1s);
}

.bv-page .tbr-cc-row--x .tbr-cc-state { background: #f1f5f9; color: var(--tbr-ink-3); }

.bv-page .tbr-cc-row--ok .tbr-cc-state { background: var(--tbr-blue-soft); color: var(--tbr-blue-dark); }

.bv-page .tbr-rc-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--tbr-ink-3);
  margin-bottom: 10px;
}

.bv-page .tbr-rc-nodes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.bv-page .tbr-rc-node {
  flex: 0 1 auto;
  text-align: center;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--tbr-ink-3);
  border: 1px solid var(--tbr-line);
  border-radius: 6px;
  padding: 5px 2px;
  background: var(--tbr-ground);
  animation: tbrNode 7.2s ease-in-out infinite;
  animation-delay: calc(var(--n) * 0.55s);
}

.bv-page .tbr-rc-status {
  position: relative;
  display: block;
  height: 22px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--tbr-ground);
  border: 1px solid var(--tbr-line);
}

.bv-page .tbr-rc-status span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  animation: tbrStatus 7.2s ease-in-out infinite;
}

.bv-page .tbr-rc-status span:first-child { color: var(--tbr-ink-3); }

.bv-page .tbr-rc-status span:last-child {
  color: var(--tbr-green);
  background: var(--tbr-green-soft);
  animation-name: tbrStatusB;
}

/* the product slogan, moved out of the hero stack into the mid-page CTA */
.bv-page .cta-banner.tbr-ctab .tbr-ctab-slogan {
  font-size: 1.06rem;
  font-weight: 700;
  color: #f1f7fc;
  letter-spacing: 0.01em;
  margin: 0 auto 10px;
  max-width: 46em;
}