/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — BROADCAST & LIVE STREAMING
   Page styles for /en/services/broadcast-live-streaming/  (namespace: .bc-)
   Built on Signal Core tokens in global.css.
   ============================================================================ */

/* Black page base for the Reveal Lift seam: each section paints its own opaque
   background, so the base colour only shows through the footer-reveal seam. */
.bc-page { background: var(--wr-black) !important; }

/* Section scaffolding ------------------------------------------------------ */
.bc-section { position: relative; width: 100%; padding: clamp(104px, 15vh, 208px) var(--wr-pad-x); background: var(--wr-white); }
.bc-section--dark { background: var(--wr-hero); color: var(--wr-white); }
/* One continuous dark tone across every dark section (no per-section steps). */
.bc-section--black { background: var(--wr-hero); color: var(--wr-white); }
.bc-inner { max-width: var(--wr-max-width); margin: 0 auto; width: 100%; }
.bc-eyebrow { margin-bottom: 34px; }

.bc-h2 {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--wr-black);
  max-width: 18ch;
}
.bc-section--dark .bc-h2, .bc-section--black .bc-h2 { color: var(--wr-white); }
.bc-lead {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--wr-black-40);
  max-width: 56ch;
  margin-top: 26px;
}
.bc-section--dark .bc-lead, .bc-section--black .bc-lead { color: var(--wr-white-65); }
.bc-lead strong { color: inherit; font-weight: 700; }
.bc-section--dark .bc-lead strong { color: var(--wr-white); }

/* Buttons ------------------------------------------------------------------ */
.bc-btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 52px; padding: 0 28px; border-radius: var(--wr-radius-pill);
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--wr-black); position: relative; isolation: isolate;
  background: var(--wr-grad); background-size: 200% auto;
  animation: gradientShimmerSlow 4s ease-in-out infinite alternate;
  transition: transform 0.25s var(--wr-ease-out), box-shadow 0.3s ease;
  box-shadow: 0 8px 30px -10px #F0492366;
}
.bc-btn svg { width: 15px; height: 15px; stroke: var(--wr-black); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--wr-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .bc-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px -10px #F0492399; }
  .bc-btn:hover svg { transform: translateX(4px); }
}
.bc-btn--ghost {
  background: transparent; animation: none; box-shadow: none;
  color: var(--wr-black); border: 1.5px solid var(--wr-black-15);
}
.bc-section--dark .bc-btn--ghost, .bc-section--black .bc-btn--ghost { color: var(--wr-white); border-color: var(--wr-white-16); }
.bc-btn--ghost svg { stroke: var(--wr-orange); }
@media (hover: hover) and (pointer: fine) {
  .bc-btn--ghost:hover { transform: translateY(-2px); border-color: var(--wr-orange); }
}
/* Text link with arrow */
.bc-tlink {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--wr-black);
}
.bc-section--dark .bc-tlink, .bc-section--black .bc-tlink { color: var(--wr-white); }
.bc-tlink svg { width: 14px; height: 14px; stroke: var(--wr-orange); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.22s var(--wr-ease-out); }
@media (hover: hover) and (pointer: fine) { .bc-tlink:hover svg { transform: translateX(4px); } }

/* Brand Plate — art-directed image surfaces (image-ready) ------------------ */
.bc-ph {
  position: relative; overflow: hidden; border-radius: var(--wr-radius-card);
  background-color: #0D0A07;
  background-image: repeating-linear-gradient(135deg, #F2F2F20A 0 2px, transparent 2px 11px);
  display: flex; align-items: center; justify-content: center;
}
.bc-ph__tag {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wr-white-45); padding: 7px 12px; border: 1px solid var(--wr-white-16);
  border-radius: var(--wr-radius-pill); background: #0D0A0799; text-align: center;
}
.bc-ph--light { background-color: #0D0A0708; background-image: repeating-linear-gradient(135deg, #0D0A070A 0 2px, transparent 2px 11px); }
.bc-ph--light .bc-ph__tag { color: var(--wr-black-40); border-color: var(--wr-black-15); background: #F2F2F2CC; }

/* ============================================================================
   HERO — Hero Mode system (selectable layouts; active mode carries .is-active)
   ========================================================================== */
.bc-hero { display: none; }
.bc-hero.is-active { display: block; }

.bc-hero {
  position: relative; min-height: 100vh; min-height: 100svh; width: 100%;
  background: var(--wr-hero); color: var(--wr-white); overflow: hidden;
}
/* Fade the hero's clipped background glow to flat bg at the bottom so the
   hero → WHAT WE DELIVER join is seamless (same #0D0A07, no tonal step). */
.bc-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24vh;
  background: linear-gradient(to bottom, transparent, var(--wr-hero));
  z-index: 1; pointer-events: none;
}
.bc-hero__glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 50% at 78% 12%, #F0492322 0%, transparent 62%),
    radial-gradient(46% 40% at 6% 68%, #FFD80016 0%, transparent 56%);
}
.bc-hero__inner {
  position: relative; z-index: 2; max-width: var(--wr-max-width); margin: 0 auto;
  min-height: 100vh; min-height: 100svh; padding: calc(var(--wr-nav-height) + 64px) var(--wr-pad-x) 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.bc-eyebrow-pill {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--wr-white-75); padding: 7px 15px 7px 11px; border-radius: var(--wr-radius-pill);
  background: var(--wr-glass-08); border: 1px solid var(--wr-white-10); margin-bottom: 26px;
}
.bc-eyebrow-pill::before { content: ''; width: 26px; height: 4px; border-radius: 4px; background: var(--wr-grad); flex-shrink: 0; }
.bc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wr-orange); box-shadow: 0 0 0 0 #F0492366; animation: bcPulse 2s ease-out infinite; }
@keyframes bcPulse { 0% { box-shadow: 0 0 0 0 #F0492366; } 70% { box-shadow: 0 0 0 9px #F0492300; } 100% { box-shadow: 0 0 0 0 #F0492300; } }

.bc-h1 {
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.025em;
  color: var(--wr-white); max-width: 19ch; text-wrap: balance;
}
.bc-h1 .wr-gradient-text { display: inline; }
.bc-hero__sub {
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6; color: var(--wr-white-75);
  max-width: 52ch; margin-top: 26px;
}
.bc-hero__sub strong { color: var(--wr-white); font-weight: 700; }
.bc-hero__ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 38px; }

/* ── Hero stat ribbon (rebuilt) — Signal Readout slabs in an even 4-up grid.
   Each stat is a centred column: number, gradient rule, label, all on one axis.
   Host vars are set ON the stat (the slab re-declares its own defaults, so a
   container-level override would be shadowed) to keep labels light on dark. ── */
.bc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; align-items: start;
  gap: clamp(28px, 4vw, 48px) clamp(18px, 3vw, 40px);
  margin-top: clamp(30px, 5vh, 60px);
}
.bc-stats .wr-stat { --stat-fg: var(--wr-white); --stat-muted: var(--wr-white-45); --stat-stage: var(--wr-hero); }
.bc-stats .wr-stat--slab { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bc-stats .wr-stat--slab .wr-stat__kicker { display: none; }
.bc-stats .wr-stat--slab .wr-stat__num { order: 1; justify-content: center; font-size: clamp(54px, 7vw, 86px); }
.bc-stats .wr-stat--slab .wr-stat__rule { order: 2; width: clamp(40px, 50%, 72px); margin: 14px auto 0; }
.bc-stats .wr-stat--slab .wr-stat__label {
  order: 3; margin: 13px auto 0; max-width: 16ch;
  font-size: clamp(13px, 1.05vw, 15px); letter-spacing: 0.11em; line-height: 1.32;
}

/* ---- Hero Mode · Control Room ---- */
/* Hero Mode · Vision Mixer is full-bleed: the monitor fills the first screen,
   the stat ribbon sits just below it. */
.bc-hero--a .bc-hero__inner { display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(28px, 5vh, 56px); }
.bc-hero--a .bc-hero__copy { display: flex; flex-direction: column; }
.bc-monitor {
  position: relative; border-radius: 20px; padding: 14px; background: #0D0A07;
  border: 1px solid var(--wr-white-10); box-shadow: 0 40px 90px -30px #000A, inset 0 1px 0 #F2F2F20D;
}
.bc-monitor__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bc-cam { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden;
  background-color: #0D0A07; background-image: repeating-linear-gradient(135deg, #F2F2F20A 0 2px, transparent 2px 10px);
  border: 1px solid var(--wr-white-08); display: flex; align-items: flex-end; }
.bc-cam--pgm { outline: 2px solid var(--wr-orange); outline-offset: -2px; }
.bc-cam__tag { font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--wr-white-65); margin: 8px; padding: 3px 7px; border-radius: 5px; background: #0D0A07CC; }
.bc-cam__rec { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px; font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--wr-white); padding: 3px 8px 3px 6px; border-radius: var(--wr-radius-pill); background: #F04923; font-weight: 700; }
.bc-cam__rec::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--wr-white); }
.bc-monitor__bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bc-chip { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wr-white-65); padding: 6px 11px; border-radius: var(--wr-radius-pill); background: var(--wr-glass-08); border: 1px solid var(--wr-white-10); }
.bc-chip b { color: var(--wr-yellow); font-weight: 700; }

/* ---- Hero Mode · Editorial ---- */
.bc-hero--b .bc-hero__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.bc-hero--b .bc-h1 { font-size: clamp(40px, 6.2vw, 88px); }
.bc-hero--b .bc-figure { position: relative; align-self: stretch; min-height: 64vh; display: flex; }
.bc-hero--b .bc-ph { flex: 1; border-radius: 26px; }
.bc-proofchips { position: absolute; left: -26px; bottom: 30px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.bc-proofchip { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--wr-white); padding: 9px 16px; border-radius: var(--wr-radius-pill); background: #0D0A07CC; border: 1px solid var(--wr-white-16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px -12px #000B; }
.bc-proofchip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--wr-grad); flex-shrink: 0; }

/* ---- Hero Mode · Signal Field ---- */
.bc-hero--c { background: var(--wr-black); }
.bc-hero--c .bc-hero__inner { display: flex; flex-direction: column; justify-content: center; }
.bc-signal { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; opacity: 0.5; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent 100%); }
.bc-signal__bar { position: absolute; height: 5px; border-radius: 5px; background: var(--wr-grad); background-size: 200% auto; left: 0; right: auto; transform: translateX(-100%); animation: bcSweep 7.5s linear infinite, gradientShimmerSlow 5s ease-in-out infinite alternate; }
@keyframes bcSweep { 0% { transform: translateX(-100%); opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }
.bc-hero--c .bc-h1 { font-size: clamp(42px, 7vw, 96px); max-width: 15ch; position: relative; z-index: 2; }
.bc-hero--c .bc-onair { z-index: 2; }
.bc-onair { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wr-white); padding: 8px 16px; border-radius: var(--wr-radius-pill); border: 1px solid var(--wr-white-16); background: var(--wr-glass-08); margin-bottom: 28px; }

/* ============================================================================
   CAPABILITIES — "Multi-Camera. Redundant. Zero Fault Tolerance."
   ========================================================================== */
.bc-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 72px; }
.bc-cap {
  position: relative; padding: 34px 30px 36px; border-radius: var(--wr-radius-card);
  background:
    radial-gradient(135% 120% at 0% 0%, #F2F2F212 0%, transparent 48%),
    var(--wr-glass-08);
  border: 1px solid var(--wr-white-10); overflow: hidden; isolation: isolate;
  transition: border-color 0.3s ease, transform 0.35s var(--wr-ease-out), box-shadow 0.45s ease;
}
/* Signal glow rising from below — faint at rest, blooms on hover */
.bc-cap::before {
  content: ''; position: absolute; left: 50%; bottom: -32%; width: 82%; height: 72%;
  transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, #F04923 0%, #FFD800 46%, transparent 72%);
  filter: blur(48px); opacity: 0.10; transition: opacity 0.45s ease;
}
.bc-cap__n { position: relative; z-index: 1; font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; background: var(--wr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bc-cap__t { position: relative; z-index: 1; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--wr-white); margin: 18px 0 10px; }
.bc-cap__d { position: relative; z-index: 1; font-size: 14.5px; line-height: 1.6; color: var(--wr-white-65); }

/* ── Signal Edge — a bright signal arc travels the card border on hover.
   Conic gradient masked to a 1.5px ring; the start angle is animated via
   @property so the signal runs the perimeter. On capability / proof / step
   cards. ── */
@property --bc-edge { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.bc-cap::after, .bc-proof-card::after, .bc-step::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--bc-edge),
    transparent 0deg, transparent 228deg,
    #FFD800 286deg, #F04923 344deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px #F0492366);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 2;
}
@keyframes bcEdge { to { --bc-edge: 360deg; } }
@media (hover: hover) and (pointer: fine) {
  .bc-cap:hover, .bc-proof-card:hover, .bc-step:hover { transform: translateY(-3px); }
  .bc-cap:hover { border-color: var(--wr-white-16); box-shadow: 0 30px 70px -40px #F0492366; }
  .bc-cap:hover::before { opacity: 0.34; }
  .bc-cap:hover::after, .bc-proof-card:hover::after, .bc-step:hover::after {
    opacity: 1; animation: bcEdge 1.5s linear infinite;
  }
}

/* ============================================================================
   MARKET CONTEXT — two column problem / position
   ========================================================================== */
.bc-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.bc-split__head { align-self: start; }
.bc-twocol { display: grid; gap: 26px; }
.bc-pt { padding-left: 22px; border-left: 2px solid var(--wr-black-10); }
.bc-section--dark .bc-pt { border-left-color: var(--wr-white-10); }
.bc-pt__t { font-size: 17px; font-weight: 700; color: var(--wr-black); margin-bottom: 7px; }
.bc-section--dark .bc-pt__t { color: var(--wr-white); }
.bc-pt--accent { border-left-color: transparent; position: relative; }
.bc-pt--accent::before { content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--wr-grad); }
.bc-pt__d { font-size: 15px; line-height: 1.6; color: var(--wr-black-40); }
.bc-section--dark .bc-pt__d { color: var(--wr-white-65); }

/* ============================================================================
   PROOF — Federations We Broadcast For (dark grid)
   ========================================================================== */
.bc-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 20px; margin-top: 72px; }
/* Secondary federations — names carried beyond the detailed proof cards, as light-surface chips. */
/* "Also on air for" — federation names continue the More-work row as gradient
   cards: two sub-rows, varied widths, white text, filling to the edge. Fixed
   two-row height + overflow:hidden so any pill that would wrap onto a third row
   (on a narrower screen) is clipped, never left orphaned. */
.bc-proof-also {
  grid-column: span 2; align-self: stretch; margin: 0;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px;
  height: auto; overflow: hidden;
}
.bc-proof-also .bc-chip {
  flex: 1 1 auto; min-width: 120px; height: calc(50% - 6px); min-height: 56px;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 16px; border-radius: 14px; line-height: 1.18; overflow: hidden;
  font-family: "Sora", sans-serif; font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em;
  text-transform: none; color: var(--wr-white); border: none;
  background-color: #0D0A07; background-size: cover; background-position: center;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
  box-shadow: 0 14px 30px -18px rgba(13,10,7,0.6);
  transition: transform 0.18s var(--wr-ease-out);
}
.bc-proof-also .bc-chip::before { content: none; }
@media (hover: hover) and (pointer: fine) { .bc-proof-also .bc-chip:hover { transform: translateY(-2px); } }
@media (max-width: 1024px) { .bc-proof-also { grid-column: 1 / -1; } }
@media (max-width: 600px) { .bc-proof-also { height: 124px; } .bc-proof-also .bc-chip { min-width: 40%; } }
.bc-proof-card {
  position: relative; padding: 30px 26px; border-radius: var(--wr-radius-card);
  background: #FFFFFF;
  border: 1px solid var(--wr-black-08); overflow: hidden;
  display: flex; flex-direction: column; min-height: 208px;
  box-shadow: 0 1px 2px rgba(13,10,7,0.04), 0 18px 40px -32px rgba(13,10,7,0.5);
  transition: border-color 0.3s ease, transform 0.35s var(--wr-ease-out), box-shadow 0.4s ease;
}
.bc-proof-card__league { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wr-orange); }
.bc-proof-card__client { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: var(--wr-black); margin: 12px 0 8px; line-height: 1.12; }
.bc-proof-card__desc { font-size: 14px; line-height: 1.5; color: var(--wr-black-40); margin-bottom: auto; }
.bc-proof-card__count { display: inline-flex; align-items: baseline; gap: 7px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--wr-black-08); }
.bc-proof-card__count b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; background: var(--wr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bc-proof-card__count span { font-size: 12px; font-weight: 600; color: var(--wr-black-40); letter-spacing: 0.04em; }
.bc-proof-card--feature { grid-column: span 1; }

/* ============================================================================
   RELATIONSHIP / PROCESS — numbered season steps
   ========================================================================== */
.bc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 72px; counter-reset: step; }
.bc-step { position: relative; padding: 30px 22px 26px; border-radius: var(--wr-radius-card); background: var(--wr-white); border: 1px solid var(--wr-black-06); }
.bc-step__n { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--wr-orange); font-family: ui-monospace, Menlo, monospace; }
.bc-step__t { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--wr-black); margin: 14px 0 9px; }
.bc-step__d { font-size: 14.5px; line-height: 1.55; color: var(--wr-black-40); }
.bc-step__d a { font-weight: 700; background: var(--wr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bc-step__rule { display: none; }

/* ============================================================================
   PRICING TIERS
   ========================================================================== */
.bc-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 72px; align-items: stretch; }
.bc-tier {
  position: relative; display: flex; flex-direction: column;
  padding: 32px 28px 34px; border-radius: var(--wr-radius-card);
  background: var(--wr-white); border: 1px solid var(--wr-black-10);
}
.bc-tier--feature { border-color: transparent; }
.bc-tier--feature::before { content: ''; position: absolute; inset: 0; border-radius: var(--wr-radius-card); padding: 1.6px; background: var(--wr-grad); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.bc-tier__badge { position: absolute; top: -12px; left: 28px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wr-black); padding: 5px 13px; border-radius: var(--wr-radius-pill); background: var(--wr-grad); }
.bc-tier__name { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wr-black-40); }
.bc-tier__price { font-size: clamp(34px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; color: var(--wr-black); margin: 14px 0 4px; line-height: 1; }
.bc-tier__price small { font-size: 15px; font-weight: 600; color: var(--wr-black-40); letter-spacing: 0; }
.bc-tier__for { font-size: 14.5px; line-height: 1.5; color: var(--wr-black-40); min-height: 44px; margin-bottom: 18px; }
.bc-tier__list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 18px 0 26px; padding-top: 22px; border-top: 1px solid var(--wr-black-06); }
.bc-tier__list li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.45; color: var(--wr-black); }
.bc-tier__list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 9px; border-left: 2px solid var(--wr-orange); border-bottom: 2px solid var(--wr-orange); transform: rotate(-45deg); }
.bc-tier .bc-btn { margin-top: auto; justify-content: center; }
.bc-tier__cta-ghost { margin-top: auto; }
.bc-disclaimer { font-size: 13px; line-height: 1.6; color: var(--wr-black-40); margin-top: 22px; text-align: center; }

/* ============================================================================
   FAQ — accordion
   ========================================================================== */
.bc-faq { max-width: 880px; margin: 72px auto 0; }
.bc-faq__item { border-bottom: 1px solid var(--wr-black-10); }
.bc-faq__item summary { list-style: none; cursor: pointer; padding: 26px 48px 26px 0; position: relative; font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; letter-spacing: -0.01em; color: var(--wr-black); display: flex; }
.bc-faq__item summary::-webkit-details-marker { display: none; }
.bc-faq__item summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px; margin-top: -6px; background: var(--wr-grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform 0.3s var(--wr-ease-out); }
.bc-faq__item[open] summary::after { transform: rotate(135deg); }
.bc-faq__a { padding: 0 48px 28px 0; font-size: 16px; line-height: 1.65; color: var(--wr-black-40); max-width: 70ch; }
.bc-faq__a a { font-weight: 700; background: var(--wr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* FAQ on dark sections */
.bc-section--dark .bc-faq__item, .bc-section--black .bc-faq__item { border-bottom-color: var(--wr-white-10); }
.bc-section--dark .bc-faq__item summary, .bc-section--black .bc-faq__item summary { color: var(--wr-white); }
.bc-section--dark .bc-faq__a, .bc-section--black .bc-faq__a { color: var(--wr-white-65); }

/* ============================================================================
   CLUB CALLOUT
   ========================================================================== */
.bc-callout { position: relative; overflow: hidden; border-radius: var(--wr-radius-card); padding: clamp(36px, 5vw, 60px); background: var(--wr-black); color: var(--wr-white); display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 32px; align-items: center; }
.bc-callout__glow { position: absolute; inset: 0; background: radial-gradient(55% 120% at 100% 0%, #F0492333, transparent 60%); pointer-events: none; }
.bc-callout h2 { position: relative; font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; max-width: 20ch; }
.bc-callout p { position: relative; font-size: 15.5px; line-height: 1.6; color: var(--wr-white-65); margin-top: 16px; max-width: 50ch; }
.bc-callout__cta { position: relative; display: flex; justify-content: flex-end; }

/* ============================================================================
   FINAL CTA
   ========================================================================== */
.bc-cta { text-align: center; }
.bc-cta .bc-eyebrow { display: inline-flex; }
.bc-cta__h { font-size: clamp(34px, 5vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; color: var(--wr-white); max-width: 16ch; margin: 0 auto; }
.bc-cta__sub { font-size: clamp(15px, 1.3vw, 18px); color: var(--wr-white-65); max-width: 50ch; margin: 22px auto 0; line-height: 1.6; }
.bc-cta__ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

/* ============================================================================
   HERO MODE SELECTOR  (switches the active Hero Mode via .is-active)
   ========================================================================== */
.bc-switch {
  position: fixed; z-index: 1200; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 14px;
  border-radius: var(--wr-radius-pill); background: #0D0A07F2; border: 1px solid var(--wr-white-16);
  box-shadow: 0 18px 50px -16px #000C; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bc-switch__label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wr-white-45); margin-right: 4px; }
.bc-switch button { font-family: var(--wr-font); font-size: 12px; font-weight: 700; color: var(--wr-white-65); padding: 8px 14px; border-radius: var(--wr-radius-pill); transition: color 0.2s, background 0.2s; }
.bc-switch button.is-active { color: var(--wr-black); background: var(--wr-grad); }

/* ============================================================================
   ELEVATION — header alignment rhythm, stacked-card section transitions,
   parallax, reveal-behind footer
   ========================================================================== */

/* Header alignment — vary left / center / right for rhythm */
.bc-head { position: relative; }
.bc-head--center { text-align: center; }
.bc-head--center .bc-h2, .bc-head--center .bc-lead { margin-left: auto; margin-right: auto; }
.bc-head--right { text-align: right; }
.bc-head--right .bc-h2, .bc-head--right .bc-lead { margin-left: auto; margin-right: 0; }
@media (max-width: 760px) {
  .bc-head--right { text-align: left; }
  .bc-head--right .bc-h2, .bc-head--right .bc-lead { margin-left: 0; }
}

/* Base section stacking — sections sit ABOVE the fixed footer (z-index:1) so
   they cover it until the page scrolls into the body's padding-bottom zone. */
.bc-section { position: relative; z-index: 2; }
.bc-hero { position: relative; z-index: 2; }
.bc-section > .bc-inner, .bc-hero__inner { position: relative; z-index: 4; }

/* ── FOCAL "arriving card" — the top of a parallax card (tech-hub .th-proof
   move): slides up with a scale ease over the section above, rounded top
   reveals the colour behind. Signal sparks travel its edge (JS canvas). ── */
.bc-section--focal {
  position: relative;
  z-index: 10;
  margin-top: clamp(-240px, -22vh, -150px);
  border-radius: 32px 32px 0 0;
  overflow: visible;
  transform-style: preserve-3d;
  will-change: transform;
}
.bc-section--focal > .bc-inner { padding-top: clamp(20px, 4vh, 56px); }

/* ── Bottom of a parallax card — rounded bottom corners reveal the section
   tucked behind (which carries a negative margin to slide up under it). ── */
.bc-card-bottom {
  position: relative; z-index: 10;
  border-radius: 0 0 32px 32px;
  overflow: visible;
}
.bc-card-under { margin-top: -46px; position: relative; z-index: 2; }

/* ── Signal Trace — spark canvas straddling a card edge; sparks of light run
   along the rounded edge. ── */
.bc-spark { position: absolute; left: 0; width: 100%; height: 110px; pointer-events: none; z-index: 6; opacity: 0; transition: opacity 0.5s ease; }
.bc-spark--top { top: -55px; }
.bc-spark--bottom { bottom: -55px; }

/* Banner ("Your federation mandates streaming…") — a signal-framed panel that
   stands out inside the dark block: lifted glass fill + a gradient border ring
   (the same "signal round the edge" language) + its orange corner glow. */
.bc-section--dark .bc-callout {
  background: var(--wr-glass-08);
  border-radius: var(--wr-radius-card);
}
.bc-section--dark .bc-callout::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--wr-grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1;
}

/* Final CTA — broadcast scan-field backdrop makes "Ready to broadcast?" land
   as the signal sign-off. Content sits above the field. */
.bc-cta { position: relative; overflow: hidden; }
/* Final-CTA scan field — softened: blurred + low opacity so it reads as an
   ambient backdrop, not a distracting graphic. Bar thickness varies per bar
   (set inline in the page script). */
.bc-cta .bc-signal { opacity: 0.26; filter: blur(3px); }
.bc-cta__h { position: relative; z-index: 2; }
.bc-cta__sub, .bc-cta .bc-eyebrow, .bc-cta__ctas { position: relative; z-index: 2; }

/* ── Reveal Lift footer: the footer is fixed beneath the page; body
   padding-bottom (set to footer height by Reveal Lift) is the scroll room that
   lets the page slide up and uncover it. ── */
.bc-foot-reveal #site-footer-mount {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1; width: 100%;
}
.bc-foot-reveal { padding-bottom: 55vh; } /* default room; Reveal Lift sets the exact footer height at runtime */

@media (prefers-reduced-motion: reduce) {
  .bc-section--focal, .bc-card-under { margin-top: 0; }
  .bc-spark { display: none; }
}

/* ============================================================================
   RESPONSIVE CASCADE — ultrawide → desktop → tablet → mobile → compact.
   Container width scales on .bc-page so every .bc-inner / hero tracks the
   --wr-max-width token; grids collapse progressively below.
   ========================================================================== */

/* Guard against any sub-pixel sideways scroll; let long client names wrap. */
.bc-page { overflow-x: hidden; }
.bc-proof-card__client, .bc-cap__t { overflow-wrap: anywhere; }

/* ---- Ultrawide: widen the measure + lift headline ceilings so the page
   fills large displays instead of stranding at 1280px in a margin sea. ---- */
@media (min-width: 1700px) {
  .bc-page { --wr-max-width: 1480px; }
  .bc-h1     { font-size: clamp(34px, 3.6vw, 70px); }
  .bc-h2     { font-size: clamp(30px, 3.2vw, 60px); }
  .bc-cta__h { font-size: clamp(34px, 4.2vw, 78px); }
  .bc-cap-grid, .bc-proof-grid { gap: 26px; }
}
@media (min-width: 2200px) {
  .bc-page { --wr-max-width: 1680px; }
}

/* ---- Tablet landscape & below ---- */
@media (max-width: 1024px) {
  .bc-hero--a .bc-hero__inner, .bc-hero--b .bc-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .bc-hero--b .bc-figure { min-height: 52vh; }
  .bc-proofchips { left: 14px; }
  .bc-cap-grid, .bc-proof-grid { grid-template-columns: repeat(2, 1fr); }
  .bc-steps { grid-template-columns: repeat(2, 1fr); }
  .bc-tiers { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .bc-split { grid-template-columns: 1fr; gap: 32px; }
  .bc-split__head { position: static; }
  .bc-callout { grid-template-columns: 1fr; gap: 24px; }
  .bc-callout__cta { justify-content: flex-start; }
}

/* ---- Tablet portrait: ease the focal/parallax overlap so the stacked
   "arriving card" never collides with text on shorter viewports. ---- */
@media (max-width: 820px) {
  .bc-section--focal { margin-top: clamp(-120px, -10vh, -76px); }
  .bc-card-under { margin-top: -32px; }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .bc-cap-grid, .bc-proof-grid, .bc-steps { grid-template-columns: 1fr; }
  .bc-monitor__grid { grid-template-columns: 1fr 1fr; }
  .bc-stats { gap: 22px 30px; }
  /* Full-width tap targets on a phone. */
  .bc-hero__ctas { width: 100%; }
  .bc-hero__ctas .bc-btn { width: 100%; justify-content: center; }
  .bc-cta__ctas { flex-direction: column; align-items: stretch; max-width: 360px; margin-left: auto; margin-right: auto; }
  .bc-cta__ctas .bc-btn { width: 100%; justify-content: center; }
  .bc-tier .bc-btn { width: 100%; }
  .bc-switch { bottom: 12px; padding: 6px 6px 6px 12px; }
  .bc-switch__label { display: none; }
}

/* ---- Compact phones (≤380px): keep big numerals / prices / the monitor from
   forcing a sideways scroll. ---- */
@media (max-width: 380px) {
  .bc-section { padding-left: 18px; padding-right: 18px; }
  .bc-stats .wr-stat--slab .wr-stat__num { font-size: clamp(44px, 13vw, 60px); }
  .bc-tier__price { font-size: clamp(30px, 11vw, 40px); }
  .bc-monitor { padding: 10px; }
  .bc-monitor__bar { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-btn, .bc-signal__bar, .bc-live-dot { animation: none !important; }
  .bc-cap::after, .bc-proof-card::after, .bc-step::after { animation: none !important; opacity: 0 !important; }
  .bc-signal { display: none; }
}

/* ============================================================================
   Signal Atmosphere — subtle "Aurora" drift on the dark sections so they're
   not just flat black. Canvas rides behind the content (.bc-inner is z-index 4).
   ========================================================================== */
.bc-section--dark { overflow: hidden; }
.bc-section--dark .wr-atmo-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ---- Proof cards: federation photo header (bleeds to the card edges) ---- */
.bc-proof-card__media { display: block; height: 132px; margin: -30px -26px 20px; background-size: cover; background-position: center; position: relative; border-bottom: 1px solid var(--wr-black-08); }
.bc-proof-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,10,7,0.08) 0%, rgba(13,10,7,0.30) 100%); }

/* ============================================================================
   HERO — centre the copy + stack the Signal Readout stat slabs on phones.
   ========================================================================== */
@media (max-width: 1024px) {
  .bc-hero--a .bc-hero__copy { align-items: center; text-align: center; }
  .bc-hero--a .bc-eyebrow-pill { align-self: center; }
  .bc-hero--a .bc-h1,
  .bc-hero--a .bc-hero__sub { margin-left: auto; margin-right: auto; }
  .bc-hero--a .bc-hero__ctas { justify-content: center; }
}
@media (max-width: 768px) {
  .bc-stats { grid-template-columns: repeat(2, 1fr); gap: clamp(30px, 5vh, 42px) 16px; }
  .bc-stats .wr-stat--slab .wr-stat__num { font-size: clamp(46px, 13vw, 72px); }
  .bc-stats .wr-stat__label { font-size: 13px; }
}
@media (max-width: 380px) {
  .bc-stats { grid-template-columns: 1fr; }
}

/* ============================================================================
   FOOTER — match the contact page: rounded inset card on mobile, no logo.
   ========================================================================== */
@media (max-width: 768px) {
  .bc-page .wr-fc { width: auto; margin: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 26px; }
  .bc-page .wr-fc-logo { display: none; }
  .bc-page .wr-fc-card { padding-left: 22px; padding-right: 22px; }
}

/* ---- Club-callout section: tighten the padding so it isn't a huge empty gap ---- */
.bc-callout-sec { padding-top: clamp(44px, 7vh, 86px) !important; padding-bottom: clamp(44px, 7vh, 86px) !important; }

/* ---- Market context: turn the dry bordered points into glass cards ---- */
.bc-section--dark .bc-pt { padding: 20px 20px; border-left: none; background: var(--wr-glass-06); border: 1px solid var(--wr-white-08); border-radius: 16px; }
/* Accent (Well Run) card — the library's Edge Spark: the lapping logo-arc ring
   from Signal Readout/Signal Press --spark, reusing @keyframes wrStatArc +
   @property --wr-stat-arc from signal-readout.css (no new animation invented). */
.bc-section--dark .bc-pt--accent {
  border-color: transparent; position: relative; isolation: isolate;
  background: radial-gradient(125% 130% at 100% 0%, rgba(240,73,35,0.18) 0%, transparent 60%), var(--wr-black);
}
.bc-section--dark .bc-pt--accent::before {
  content: ''; position: absolute; inset: 0; left: 0; right: 0; top: 0; bottom: 0;
  width: auto; height: auto; z-index: 3; border-radius: 16px; padding: 1.5px;
  background: conic-gradient(from var(--wr-stat-arc),
    transparent 0 56%, var(--wr-yellow) 72%, #FFF1B8 79%, var(--wr-orange) 87%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; animation: wrStatArc 3.4s linear infinite;
}
.bc-section--dark .bc-pt--accent::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 26px -6px #F0492359, 0 0 13px -4px #FFD80044;
}
@media (prefers-reduced-motion: reduce) {
  /* keep the masked ring; just stop the lap and show a static gradient edge */
  .bc-section--dark .bc-pt--accent::before { animation: none; background: var(--wr-grad); }
}

/* ---- Reveal-footer backstop: the page uses card-overlap section transitions
   (negative margins) that can leave seams; the fixed reveal-footer sits at z-1
   behind everything and was peeking through those seams. Give <main> an opaque
   floor above it, so seams read as dark spacing. The footer still reveals in the
   body's padding-bottom region BELOW <main>. ---- */
.bc-page main { position: relative; z-index: 2; background: var(--wr-hero); }

/* ============================================================================
   HERO MODE · VISION MIXER — the hero monitor is a working multicam control
   surface: a PGM (program) output, a clickable multiview to cut sources, and a
   control bar (ON AIR / REC / AUDIO / AUTO). Brand only: orange = on-air/PGM/
   rec, yellow = active/preview. Built on Signal Core tokens.
   ========================================================================== */
.bc-mixer { display: flex; flex-direction: column; gap: 10px; flex: 1 0 auto;
  min-height: calc(100svh - var(--wr-nav-height) - 72px); }

/* —— PROGRAM output (the big monitor) —— */
.bc-pgm { position: relative; flex: 1 1 auto; min-height: 280px; border-radius: 12px; overflow: hidden;
  background: #0A0705; border: 1px solid var(--wr-white-10); }
.bc-pgm__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bc-pgm__scan { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, rgba(13,10,7,0) 0 2px, rgba(13,10,7,0.16) 2px 3px); }
.bc-pgm::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(13,10,7,0.6); }
.bc-pgm__flash { position: absolute; inset: 0; pointer-events: none; background: var(--wr-white); opacity: 0; z-index: 3; }
.bc-pgm__flash.is-on { animation: bcCut 0.28s ease-out; }
@keyframes bcCut { 0% { opacity: 0; } 12% { opacity: 0.38; } 100% { opacity: 0; } }

.bc-pgm__tl { position: absolute; top: 12px; left: 12px; z-index: 2; }
.bc-pgm__tr { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bc-pgm__bl { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
.bc-pgm__br { position: absolute; right: 12px; bottom: 12px; z-index: 2; }

.bc-tally { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1 ui-monospace, Menlo, monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--wr-white);
  padding: 6px 11px 6px 9px; border-radius: var(--wr-radius-pill); background: var(--wr-orange);
  box-shadow: 0 0 0 0 rgba(240,73,35,0.5); animation: bcPulse 2s ease-out infinite; }
.bc-tally__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wr-white); }
.bc-tally.is-off { background: var(--wr-glass-08); color: var(--wr-white-65); border: 1px solid var(--wr-white-10); animation: none; box-shadow: none; }
.bc-tally.is-off .bc-tally__dot { background: var(--wr-white-45); }

.bc-pgm__clock, .bc-pgm__rec, .bc-pgm__label {
  font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.08em;
  background: rgba(10,7,5,0.62); padding: 5px 9px; border-radius: 6px; backdrop-filter: blur(2px); }
.bc-pgm__clock { color: var(--wr-white-65); }
.bc-pgm__rec { display: inline-flex; align-items: center; gap: 7px; letter-spacing: 0.1em; color: var(--wr-white); }
.bc-pgm__recdot { width: 8px; height: 8px; border-radius: 50%; background: var(--wr-orange); animation: bcBlink 1s steps(1) infinite; }
@keyframes bcBlink { 50% { opacity: 0.15; } }
.bc-pgm__tc { color: var(--wr-white-75); }
.bc-pgm__rec.is-off { color: var(--wr-white-45); }
.bc-pgm__rec.is-off .bc-pgm__recdot { background: var(--wr-white-45); animation: none; }
.bc-pgm__rec.is-off .bc-pgm__tc { color: var(--wr-white-45); }
.bc-pgm__label { letter-spacing: 0.1em; text-transform: uppercase; color: var(--wr-white); }

.bc-vu { display: flex; align-items: flex-end; gap: 3px; height: 30px; padding: 5px 7px; border-radius: 6px; background: rgba(10,7,5,0.62); }
.bc-vu i { width: 3px; height: 18%; border-radius: 2px; background: linear-gradient(to top, var(--wr-yellow), var(--wr-orange)); }
.bc-vu.is-muted i { background: var(--wr-white-15); }

/* —— MULTIVIEW (clickable source strip) —— */
.bc-mv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bc-mv .bc-cam { cursor: pointer; padding: 0; margin: 0; font: inherit; -webkit-appearance: none; appearance: none;
  text-align: left; background-color: #0A0705; transition: transform 0.18s ease, box-shadow 0.18s ease, outline-color 0.12s; }
.bc-mv .bc-cam:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px #000C; }
.bc-mv .bc-cam:focus-visible { outline: 2px solid var(--wr-yellow); outline-offset: 2px; }
.bc-mv .bc-cam.is-live { outline: 2px solid var(--wr-orange); outline-offset: -2px; }
.bc-mv .bc-cam.is-live::after { content: 'PGM'; position: absolute; top: 6px; left: 6px;
  font: 700 9px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.12em; color: var(--wr-white);
  background: var(--wr-orange); padding: 3px 5px; border-radius: 4px; }

/* —— CONTROL BAR —— */
.bc-ctrls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bc-ctrl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: 600 12px/1 "Sora", sans-serif; letter-spacing: 0.01em; color: var(--wr-white-65);
  padding: 12px 8px; border-radius: 10px; background: var(--wr-glass-08); border: 1px solid var(--wr-white-10);
  -webkit-appearance: none; appearance: none; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.bc-ctrl:hover { color: var(--wr-white); border-color: var(--wr-white-25, rgba(242,242,242,0.25)); }
.bc-ctrl:focus-visible { outline: 2px solid var(--wr-yellow); outline-offset: 2px; }
.bc-ctrl__led { width: 8px; height: 8px; border-radius: 50%; background: rgba(242,242,242,0.22); transition: background 0.2s, box-shadow 0.2s; flex: none; }
/* On-air + record glow orange when live */
.bc-ctrl.is-on[data-ctrl="air"], .bc-ctrl.is-on[data-ctrl="rec"] { color: var(--wr-white); background: rgba(240,73,35,0.14); border-color: rgba(240,73,35,0.5); }
.bc-ctrl.is-on[data-ctrl="air"] .bc-ctrl__led, .bc-ctrl.is-on[data-ctrl="rec"] .bc-ctrl__led { background: var(--wr-orange); box-shadow: 0 0 9px rgba(240,73,35,0.75); }
/* Audio + auto glow yellow when active */
.bc-ctrl.is-on[data-ctrl="audio"], .bc-ctrl.is-on[data-ctrl="auto"] { color: var(--wr-white); background: rgba(255,216,0,0.12); border-color: rgba(255,216,0,0.5); }
.bc-ctrl.is-on[data-ctrl="audio"] .bc-ctrl__led, .bc-ctrl.is-on[data-ctrl="auto"] .bc-ctrl__led { background: var(--wr-yellow); box-shadow: 0 0 9px rgba(255,216,0,0.65); }

/* The spec chips sit just beneath the control bar. */
.bc-mixer .bc-monitor__bar { margin-top: 2px; }

@media (max-width: 420px) {
  .bc-ctrls { grid-template-columns: repeat(2, 1fr); }
  .bc-pgm__clock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-tally, .bc-pgm__recdot, .bc-pgm__flash.is-on { animation: none !important; }
}

/* ============================================================================
   VISION MIXER · FULL-SCREEN — the monitor fills the hero; the headline + sub
   read on the PGM behind a legibility scrim; the control deck (multiview +
   toggles + primary CTA) sits in the monitor bezel.
   ========================================================================== */
.bc-pgm__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 92% at 50% 50%, transparent 28%, rgba(10,7,5,0.58) 100%),
    linear-gradient(180deg, rgba(10,7,5,0.46) 0%, rgba(10,7,5,0.10) 38%, rgba(10,7,5,0.64) 100%); }
.bc-pgm__stage { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: clamp(58px, 9vh, 120px) clamp(20px, 5vw, 64px); }
.bc-pgm__stage .bc-h1 { font-size: clamp(32px, 5.2vw, 80px); max-width: 17ch; margin: 0 auto;
  text-shadow: 0 2px 34px rgba(10,7,5,0.55); }
.bc-pgm__stage .bc-hero__sub { max-width: 56ch; margin: clamp(16px, 2.2vh, 26px) auto 0;
  color: var(--wr-white-75); text-shadow: 0 1px 18px rgba(10,7,5,0.62); }

.bc-deck { display: flex; flex-direction: column; gap: 10px; flex: none; }
.bc-deck__row { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.bc-deck__row .bc-ctrls { flex: 1 1 360px; }
.bc-deck__row .bc-hero__ctas { margin: 0; flex: 0 1 auto; align-items: stretch; }
.bc-deck__row .bc-hero__ctas .bc-btn { height: 100%; }

@media (max-width: 600px) {
  .bc-pgm__stage .bc-h1 { font-size: clamp(28px, 8.5vw, 46px); }
  .bc-deck__row .bc-hero__ctas { flex: 1 1 100%; }
}

/* Multiview is a compact strip so the PGM dominates the full-screen monitor. */
.bc-mixer .bc-mv { height: clamp(56px, 8vh, 94px); }
.bc-mixer .bc-mv .bc-cam { aspect-ratio: auto; height: 100%; min-height: 0; }

/* ============================================================================
   HERO MODE · VISION MIXER — SCROLL SEQUENCE
   Load state: headline + sub centred in the viewport, the monitor peeking
   ~15% at the bottom. On scroll the pinned stage plays: the text scales down +
   blurs out while the monitor rises to a centred, scaled-up lock — then normal
   scroll resumes. JS (GSAP ScrollTrigger) drives it; CSS holds the load state
   and a static reduced-motion fallback.
   ========================================================================== */
.bc-hero--seq { overflow: visible; }
.bc-seq { position: relative; height: 100svh; overflow: hidden; }
.bc-seq__text {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: calc(var(--wr-nav-height) + 24px) clamp(20px, 5vw, 48px) 0;
  will-change: transform, filter;
}
.bc-seq__text .bc-h1 { font-size: clamp(34px, 6vw, 88px); max-width: 18ch; margin: 0 auto; }
.bc-seq__text .bc-hero__sub { max-width: 56ch; margin: clamp(18px, 2.4vh, 30px) auto 0; }
.bc-seq__stage {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--wr-nav-height) + 14px) clamp(16px, 4vw, 40px) 26px;
}
.bc-seq .bc-mixer {
  flex: none; width: 100%; max-width: var(--wr-max-width); height: 100%; min-height: 0;
  transform: translateY(86%) scale(0.9); transform-origin: center center; will-change: transform;
}
.bc-hero__after { position: relative; z-index: 2; max-width: var(--wr-max-width); margin: 0 auto;
  padding: clamp(40px, 7vh, 90px) var(--wr-pad-x) clamp(40px, 8vh, 96px); }
.bc-hero__after .bc-stats { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .bc-seq { height: auto; overflow: visible; display: flex; flex-direction: column; gap: clamp(28px, 5vh, 52px); }
  .bc-seq__text { position: static; padding-top: calc(var(--wr-nav-height) + 64px); }
  .bc-seq__stage { position: static; padding: 0 clamp(16px, 4vw, 40px); }
  .bc-seq .bc-mixer { transform: none; height: calc(100svh - var(--wr-nav-height) - 130px); }
}

/* ============================================================================
   VISION MIXER · CONTROL-ROOM TELEMETRY + ENHANCED CONTROLS
   A live encoder rail (network / bitrate / encoder / fps / dropped + sparkline),
   multi-destination status, MIX/CUT transition select and an FTB control —
   so the hero reads like a real switcher. Brand tokens only.
   ========================================================================== */
/* Second program layer drives MIX (cross-dissolve) transitions. */
.bc-pgm__img, .bc-pgm__img2 { z-index: 0; }
.bc-pgm__img2 { opacity: 0; transition: opacity 0.34s ease; }
/* Fade-to-black */
.bc-pgm__ftb { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 2; pointer-events: none; transition: opacity 0.5s ease; }
.bc-pgm.is-ftb .bc-pgm__ftb { opacity: 1; }

/* Telemetry rail */
.bc-rail { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px;
  padding: 9px 13px; border-radius: 10px; background: var(--wr-glass-06); border: 1px solid var(--wr-white-08);
  font: 600 11px/1 ui-monospace, Menlo, monospace; }
.bc-rail__group { display: flex; align-items: center; gap: 9px 16px; flex-wrap: wrap; }
.bc-rail__group--dest { margin-left: auto; }
.bc-rail__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bc-rail__k { color: var(--wr-white-45); letter-spacing: 0.08em; }
.bc-rail__v { color: var(--wr-white); font-variant-numeric: tabular-nums; }
.bc-rail__v--up::before { content: '▲'; font-size: 8px; margin-right: 3px; color: var(--wr-yellow); }
.bc-rail__u, .bc-rail__sub { color: var(--wr-white-45); }
.bc-rail__bar { width: 46px; height: 5px; border-radius: 999px; background: var(--wr-white-10); overflow: hidden; }
.bc-rail__bar i { display: block; height: 100%; width: 70%; background: var(--wr-grad); border-radius: 999px; transition: width 0.5s ease; }
.bc-rail__spark { width: 78px; height: 22px; flex: none; }
.bc-rail__spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bc-rail__spark polyline { fill: none; stroke: url(#bcSparkGrad); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.bc-rail__divider { width: 1px; height: 16px; background: var(--wr-white-10); }

/* Destination status chips */
.bc-dest__item { display: inline-flex; align-items: center; gap: 6px; color: var(--wr-white-65); }
.bc-dest__item b { color: var(--wr-white); font-weight: 700; letter-spacing: 0.04em; }
.bc-dest__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wr-orange);
  box-shadow: 0 0 0 0 rgba(240,73,35,0.5); animation: bcPulse 2.2s ease-out infinite; }
.bc-dest__item--idle { color: rgba(242,242,242,0.40); }
.bc-dest__item--idle b { color: rgba(242,242,242,0.55); }
.bc-dest__item--idle .bc-dest__dot { background: rgba(242,242,242,0.30); animation: none; box-shadow: none; }
.bc-dest__meta { color: var(--wr-white-45); }

/* Transition segmented control (Cut / Mix) */
.bc-trans { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--wr-glass-08); border: 1px solid var(--wr-white-10); flex: none; }
.bc-seg { -webkit-appearance: none; appearance: none; cursor: pointer; border: none; background: transparent;
  color: var(--wr-white-65); font: 700 11px/1 "Sora", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 13px; border-radius: 7px; transition: background 0.2s, color 0.2s; }
.bc-seg.is-on { background: var(--wr-white); color: var(--wr-black); }
.bc-seg:focus-visible { outline: 2px solid var(--wr-yellow); outline-offset: 2px; }
.bc-trans__lead { align-self: center; color: var(--wr-white-45); font: 600 10px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.1em; padding: 0 8px 0 2px; }

/* Control bar holds more now — let it flow + wrap. */
.bc-deck .bc-ctrls { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.bc-deck .bc-ctrl { flex: 1 1 auto; min-width: 88px; }
.bc-ctrl--ftb.is-on { background: rgba(13,10,7,0.9); border-color: rgba(242,242,242,0.28); color: var(--wr-white); }
.bc-ctrl--ftb.is-on .bc-ctrl__led { background: var(--wr-white); box-shadow: 0 0 8px rgba(242,242,242,0.5); }

@media (max-width: 600px) {
  .bc-rail { font-size: 10px; gap: 7px 12px; }
  .bc-rail__group--dest { margin-left: 0; }
  .bc-trans { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-dest__dot { animation: none; }
}

/* Tidy the hero stat row — numbers top-aligned, the gradient rule sits right
   under each number (so the rules line up across the row), label beneath. */
/* (Hero stat centring is fully defined in the consolidated block above.) */