/* bb-arch.css — Phase 3 archetype + component library (DESIGN-SYSTEM section 5).
   STAGING ONLY: loaded on /design-lab/. Not applied to live pages in this phase.
   Built correct-to-spec on the section-3 tokens: dark ramp layering, 10/14px radius,
   8px spacing scale, clamp type scale. No live CSS is modified. */

/* ============================================================
   LIVE-PAGE REVAMP SCOPE (.bb-revamp)
   Archetype sections injected into Elementor HTML widgets sit inside a
   width-constrained column. Break them out to full viewport width and
   neutralize inherited heading transforms from Astra/bb-pillar.
   ============================================================ */
.bb-revamp h1, .bb-revamp h2, .bb-revamp h3, .bb-revamp h4 { text-transform: none !important; }
.bb-revamp .bb-eyebrow { text-transform: uppercase !important; }

/* ============================================================
   ARCHETYPE A — STAGE (hero)
   Asymmetric 58/42. Copy left, artifact right. Statement padding.
   Not centered, no typed-text. Collapses at 900px.
   ============================================================ */
.bb-arch-stage {
  background: var(--bb-d0, #000);
  padding: clamp(72px, 9vw, 128px) 0;
  color: var(--bb-txw2);
  overflow: hidden;
}
.bb-stage-grid {
  display: grid; grid-template-columns: 58fr 42fr;
  gap: var(--bb-s8, 64px); align-items: center;
}
.bb-stage-copy .bb-eyebrow {
  display: inline-block; font-size: var(--bb-t-eyebrow, 0.70rem);
  font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bb-or); margin: 0 0 var(--bb-s4, 16px);
}
.bb-stage-copy h1 {
  font-size: var(--bb-t-display-xl, clamp(2.6rem, 5.2vw, 4.2rem));
  line-height: 1.02; letter-spacing: -0.03em; font-weight: 700;
  color: #fff; margin: 0 0 var(--bb-s4, 16px);
}
.bb-stage-copy h1 em { font-style: normal; color: var(--bb-or); }
.bb-stage-hook {
  font-size: var(--bb-t-lead, 1.05rem); line-height: 1.6;
  color: var(--bb-txw2); font-weight: 500; max-width: 52ch;
  margin: 0 0 var(--bb-s6, 32px);
}
.bb-stage-row--focus { border-left: 2px solid var(--bb-or); padding-left: 12px; }
.bb-stage-row--focus .dot { box-shadow: 0 0 0 3px rgba(255,106,0,0.18); }
.bb-stage-ctas { display: flex; flex-wrap: wrap; gap: var(--bb-s3, 12px); margin: 0 0 var(--bb-s7, 48px); }
.bb-btn-primary, .bb-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--bb-r, 10px);
  font-size: 0.95rem; font-weight: 600; text-decoration: none;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
}
.bb-btn-primary { background: var(--bb-or); color: #fff; }
.bb-btn-primary:hover { background: var(--bb-or-d); transform: translateY(-2px); }
/* .bb-btn-ghost is a SHARED pillar component and this file must not redeclare it
   (section 3 rule 1). It did: `1px solid var(--bb-d7)`, a grey border, which is why
   the secondary CTA on the arch pages looked nothing like the 2px brand-orange ghost
   every other page carries. bb-pillar.css:654 owns it. Removed 2026-08-31. */
.bb-btn-ghost:hover { border-color: var(--bb-or); transform: translateY(-2px); }
.bb-stage-creds {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  padding-top: var(--bb-s5, 24px); border-top: 1px solid var(--bb-d7);
}
.bb-stage-creds span {
  font-family: var(--bb-font-mono); font-size: 0.76rem; color: var(--bb-txw3);
  display: inline-flex; align-items: center; gap: 8px;
}
/* Neutral, not --bb-sig-ok. Signal colours are reserved for diagrams, charts and
   status pills (DESIGN-SYSTEM 3.2); a green credential dot reads as a live status
   it is not. Orange is unavailable here: the hero already spends its three accents
   on the eyebrow, the H1 em and the primary button. */
.bb-stage-creds span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bb-txw4, rgba(255,255,255,0.55)); }
/* hero artifact panel */
.bb-stage-visual {
  background: var(--bb-d5); border: 1px solid var(--bb-d7);
  border-radius: var(--bb-r-lg, 14px); padding: var(--bb-s5, 24px);
  box-shadow: 0 0 0 1px rgba(255,106,0,0.08);
}
.bb-stage-visual-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--bb-font-mono); font-size: 0.76rem; color: var(--bb-txw3);
  padding-bottom: var(--bb-s3, 12px); margin-bottom: var(--bb-s3, 12px);
  border-bottom: 1px solid var(--bb-d7);
}
.bb-stage-visual-head .live {
  display: inline-flex; align-items: center; gap: 6px; color: var(--bb-sig-ok, #2E9E6B);
}
.bb-stage-visual-head .live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bb-sig-ok, #2E9E6B);
  box-shadow: 0 0 0 3px rgba(46,158,107,0.25);
}
.bb-stage-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  font-family: var(--bb-font-mono); font-size: 0.82rem; color: var(--bb-txw2);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bb-stage-row:last-child { border-bottom: 0; }
.bb-stage-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.bb-stage-row .st { margin-left: auto; font-size: 0.72rem; color: var(--bb-txw4); }
.bb-stage-row[data-st="ok"] .dot { background: var(--bb-sig-ok, #2E9E6B); }
.bb-stage-row[data-st="warn"] .dot { background: var(--bb-sig-warn, #E0A32E); }
.bb-stage-row[data-st="broken"] .dot { background: var(--bb-sig-broken, #ED4B00); }
.bb-stage-row[data-st="broken"] .st { color: var(--bb-sig-broken, #ED4B00); }

/* ============================================================
   MOTION SYSTEM (DESIGN-SYSTEM section 9)
   transform/opacity only. Hero entrance (CSS), scroll reveal
   (scroll-driven + IO fallback), diagram state transition.
   ============================================================ */
/* Hero entrance: staggered rise + fade, once, on load */
@keyframes bbRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bb-stage-copy .bb-eyebrow,
.bb-stage-copy h1,
.bb-stage-hook,
.bb-stage-ctas,
.bb-stage-creds,
.bb-stage-visual { animation: bbRise 0.5s cubic-bezier(.2,.7,.2,1) both; }
.bb-stage-copy h1 { animation-delay: 0.06s; }
.bb-stage-hook    { animation-delay: 0.12s; }
.bb-stage-ctas    { animation-delay: 0.18s; }
.bb-stage-creds   { animation-delay: 0.24s; }
.bb-stage-visual  { animation-delay: 0.16s; }

/* Section reveal: final state by default; start state only where JS/scroll can drive it */
.bb-reveal { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .bb-reveal {
    opacity: 0; transform: translateY(16px);
    animation: bbRise 0.5s cubic-bezier(.2,.7,.2,1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}
/* IntersectionObserver fallback path: JS marks <html> then sets start state, .is-visible reveals */
html.bb-io .bb-reveal:not(.is-visible) { opacity: 0; transform: translateY(16px); }
html.bb-io .bb-reveal { transition: opacity 0.5s cubic-bezier(.2,.7,.2,1), transform 0.5s cubic-bezier(.2,.7,.2,1); }
html.bb-io .bb-reveal.is-visible { opacity: 1; transform: none; }

/* Reduced-motion safety: scroll-driven animations ignore animation-duration,
   so force the final (visible) state explicitly. */
@media (prefers-reduced-motion: reduce) {
  .bb-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Diagram broken<->verified: animate the transition (the Tier-3 moment, v1) */
.bb-diag .node-box, .bb-diag .edge { transition: stroke 0.55s ease, stroke-dasharray 0.55s ease, opacity 0.55s ease; }
.bb-diag .brk { transition: opacity 0.4s ease; }

/* ============================================================
   ARCHETYPE B — DIAGNOSTIC SPLIT
   55/45. Argument left (scrolls), evidence right (sticky desktop).
   Dark surface. Feature padding. Collapses at 900px.
   ============================================================ */
.bb-arch-split {
  background: var(--bb-d3);
  padding: var(--bb-s9, 96px) 0;
  color: var(--bb-txw2);
}
.bb-arch-split-grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--bb-s8, 64px);
  align-items: start;
}

/* --- Left: the argument --- */
.bb-arch-split-copy .bb-eyebrow {
  display: inline-block;
  font-size: var(--bb-t-eyebrow, 0.70rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bb-or);
  margin: 0 0 var(--bb-s3, 12px);
}
.bb-arch-split-copy h2 {
  font-size: var(--bb-t-h2, clamp(1.75rem, 3vw, 2.5rem));
  line-height: 1.10;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--bb-txw, #fff);
  margin: 0 0 var(--bb-s4, 16px);
}
.bb-arch-split-copy h2 em {
  font-style: normal;
  color: var(--bb-or);
}
.bb-arch-split-lead {
  font-size: var(--bb-t-lead, 1.05rem);
  line-height: 1.70;
  color: var(--bb-txw2);
  max-width: 60ch;
  margin: 0 0 var(--bb-s5, 24px);
}
.bb-arch-split-copy p {
  font-size: var(--bb-t-body, 0.95rem);
  line-height: 1.72;
  color: var(--bb-txw3);
  max-width: 62ch;
  margin: 0 0 var(--bb-s4, 16px);
}
.bb-arch-split-copy p strong { color: var(--bb-txw, #fff); font-weight: 600; }

/* connective list of failure points */
.bb-arch-split-points {
  list-style: none;
  margin: var(--bb-s5, 24px) 0 0;
  padding: 0;
  display: grid;
  gap: var(--bb-s3, 12px);
}
.bb-arch-split-points li {
  position: relative;
  padding-left: 26px;
  font-size: var(--bb-t-body-s, 0.86rem);
  line-height: 1.65;
  color: var(--bb-txw2);
}
.bb-arch-split-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--bb-sig-broken, #ED4B00);
}

/* --- Right: the evidence artifact (sticky on desktop) --- */
.bb-arch-split-evidence {
  position: sticky;
  top: 96px;
}
.bb-arch-artifact {
  background: var(--bb-d5);
  border: 1px solid var(--bb-d7);
  border-radius: var(--bb-r-lg, 14px);
  padding: var(--bb-s5, 24px);
}
.bb-arch-artifact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-s3, 12px);
  margin: 0 0 var(--bb-s4, 16px);
  padding-bottom: var(--bb-s3, 12px);
  border-bottom: 1px solid var(--bb-d7);
}
.bb-arch-artifact-title {
  font-family: var(--bb-font-mono);
  font-size: var(--bb-t-mono, 0.82rem);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--bb-txw2);
}
.bb-arch-artifact-tag {
  font-family: var(--bb-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bb-sig-broken, #ED4B00);
  border: 1px solid rgba(237,75,0,0.4);
  border-radius: var(--bb-r-sm, 6px);
  padding: 3px 8px;
}
/* signal-chain rows inside the artifact */
.bb-arch-chain { display: grid; gap: var(--bb-s2, 8px); }
.bb-arch-node {
  display: flex;
  align-items: center;
  gap: var(--bb-s3, 12px);
  background: var(--bb-d4);
  border: 1px solid var(--bb-d7);
  border-radius: var(--bb-r-sm, 6px);
  padding: 12px 14px;
}
.bb-arch-node-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto;
}
.bb-arch-node[data-state="ok"]     .bb-arch-node-dot { background: var(--bb-sig-ok, #2E9E6B); }
.bb-arch-node[data-state="warn"]   .bb-arch-node-dot { background: var(--bb-sig-warn, #E0A32E); }
.bb-arch-node[data-state="broken"] .bb-arch-node-dot { background: var(--bb-sig-broken, #ED4B00); }
.bb-arch-node[data-state="broken"] { border-color: rgba(237,75,0,0.45); }
.bb-arch-node-label {
  font-family: var(--bb-font-mono);
  font-size: var(--bb-t-mono, 0.82rem);
  color: var(--bb-txw2);
}
.bb-arch-node-state {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--bb-txw4);
}
.bb-arch-node[data-state="broken"] .bb-arch-node-state { color: var(--bb-sig-broken, #ED4B00); }
.bb-arch-artifact-note {
  margin: var(--bb-s4, 16px) 0 0;
  font-size: var(--bb-t-caption, 0.78rem);
  line-height: 1.6;
  color: var(--bb-txw4);
}

/* ------- responsive ------- */
@media (max-width: 900px) {
  .bb-arch-split-grid { grid-template-columns: 1fr; gap: var(--bb-s6, 32px); }
  .bb-arch-split-evidence { position: static; top: auto; }
  .bb-arch-split { padding: var(--bb-s8, 64px) 0; }
}

/* ============================================================
   ARCHETYPE F — TABBED DEPTH  (CSS-only, all panels in DOM)
   Light surface. Absorbs 3 sections into one. No JavaScript.
   ============================================================ */
.bb-arch-tabs {
  background: var(--bb-l0, #fff);
  padding: var(--bb-s9, 96px) 0;
  color: var(--bb-tx);
}
.bb-arch-tabs .bb-eyebrow {
  display: inline-block;
  font-size: var(--bb-t-eyebrow, 0.70rem);
  font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bb-or-text);
  margin: 0 0 var(--bb-s3, 12px);
}
.bb-arch-tabs h2 {
  font-size: var(--bb-t-h2, clamp(1.75rem, 3vw, 2.5rem));
  line-height: 1.10; letter-spacing: -0.02em; font-weight: 700;
  color: var(--bb-tx); margin: 0 0 var(--bb-s6, 32px); max-width: 20ch;
}
.bb-arch-tabs h2 em { font-style: normal; color: var(--bb-or-text); }

.bb-tabset { position: relative; }
/* Visually hidden but STILL INTERACTIVE. The previous rule used
   `pointer-events: none`, which suppresses the synthetic click a <label for=...>
   forwards to its control, so every tab was inert: clicking a label changed
   nothing and panel 1 stayed open permanently. Verified by measuring
   input.checked before and after a label click. Clipping keeps the radio
   invisible while leaving label activation and keyboard focus working. */
.bb-tabset > input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.bb-tablist {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--bb-l4);
  margin: 0 0 var(--bb-s6, 32px);
}
.bb-tablist label {
  padding: 14px 22px; margin-bottom: -1px;
  font-size: 0.95rem; font-weight: 600; color: var(--bb-tx3);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.bb-tablist label:hover { color: var(--bb-tx); }
#bb-p1:checked ~ .bb-tablist label[for="bb-p1"],
#bb-p2:checked ~ .bb-tablist label[for="bb-p2"],
#bb-p3:checked ~ .bb-tablist label[for="bb-p3"] {
  color: var(--bb-tx); border-bottom-color: var(--bb-or);
}
.bb-tabpanel { display: none; }
#bb-p1:checked ~ .bb-tabpanels #bb-panel1,
#bb-p2:checked ~ .bb-tabpanels #bb-panel2,
#bb-p3:checked ~ .bb-tabpanels #bb-panel3 { display: block; }

/* Generic N-tab wiring. The #bb-p1..#bb-p3 pairs above are design-lab's own fixed
   IDs; these positional rules work for any tab count without adding ID pairs,
   which is what /careers/ needs for five roles. Order-dependent: the Nth input
   must correspond to the Nth label and the Nth panel. */
.bb-tabset > input:nth-of-type(1):checked ~ .bb-tablist > label:nth-of-type(1),
.bb-tabset > input:nth-of-type(2):checked ~ .bb-tablist > label:nth-of-type(2),
.bb-tabset > input:nth-of-type(3):checked ~ .bb-tablist > label:nth-of-type(3),
.bb-tabset > input:nth-of-type(4):checked ~ .bb-tablist > label:nth-of-type(4),
.bb-tabset > input:nth-of-type(5):checked ~ .bb-tablist > label:nth-of-type(5),
.bb-tabset > input:nth-of-type(6):checked ~ .bb-tablist > label:nth-of-type(6) {
  color: var(--bb-tx); border-bottom-color: var(--bb-or);
}
.bb-tabset > input:nth-of-type(1):checked ~ .bb-tabpanels > .bb-tabpanel:nth-of-type(1),
.bb-tabset > input:nth-of-type(2):checked ~ .bb-tabpanels > .bb-tabpanel:nth-of-type(2),
.bb-tabset > input:nth-of-type(3):checked ~ .bb-tabpanels > .bb-tabpanel:nth-of-type(3),
.bb-tabset > input:nth-of-type(4):checked ~ .bb-tabpanels > .bb-tabpanel:nth-of-type(4),
.bb-tabset > input:nth-of-type(5):checked ~ .bb-tabpanels > .bb-tabpanel:nth-of-type(5),
.bb-tabset > input:nth-of-type(6):checked ~ .bb-tabpanels > .bb-tabpanel:nth-of-type(6) {
  display: block;
}
/* The radios are visually hidden but focusable, so the focus ring has to render
   on the associated label instead. */
.bb-tabset > input:nth-of-type(1):focus-visible ~ .bb-tablist > label:nth-of-type(1),
.bb-tabset > input:nth-of-type(2):focus-visible ~ .bb-tablist > label:nth-of-type(2),
.bb-tabset > input:nth-of-type(3):focus-visible ~ .bb-tablist > label:nth-of-type(3),
.bb-tabset > input:nth-of-type(4):focus-visible ~ .bb-tablist > label:nth-of-type(4),
.bb-tabset > input:nth-of-type(5):focus-visible ~ .bb-tablist > label:nth-of-type(5),
.bb-tabset > input:nth-of-type(6):focus-visible ~ .bb-tablist > label:nth-of-type(6) {
  outline: 2px solid var(--bb-or); outline-offset: -2px; border-radius: 4px;
}
.bb-tabpanel-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--bb-s8, 64px); align-items: center;
}
.bb-tabpanel h3 {
  font-size: var(--bb-t-h3, 1.35rem); font-weight: 700; letter-spacing: -0.01em;
  color: var(--bb-tx); margin: 0 0 var(--bb-s3, 12px);
}
.bb-tabpanel p {
  font-size: var(--bb-t-body, 0.95rem); line-height: 1.72; color: var(--bb-tx3);
  max-width: 56ch; margin: 0 0 var(--bb-s4, 16px);
}
.bb-tabpanel-list { list-style: none; margin: var(--bb-s4,16px) 0 0; padding: 0; display: grid; gap: 10px; }
.bb-tabpanel-list li {
  position: relative; padding-left: 24px;
  font-size: var(--bb-t-body-s, 0.86rem); line-height: 1.6; color: var(--bb-tx2);
}
.bb-tabpanel-list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--bb-sig-ok, #2E9E6B);
}
/* ============================================================
   STEPPED SEQUENCE: SEQUENTIAL REVEAL
   Time-based, not scroll-driven. The four steps sit in a horizontal row and
   therefore enter the viewport simultaneously, so a view() timeline animates
   them together no matter how the ranges are offset. The row is armed by JS
   (.bb-steps-armed) and fires on intersection (.is-stepping), which means a
   visitor without JS sees the steps at full opacity instead of a blank row.
   ============================================================ */
.bb-steps-row.bb-steps-armed .bb-step { opacity: 0; transform: translateY(18px); }
.bb-steps-row.bb-steps-armed.is-stepping .bb-step {
  animation: bbRise 0.8s cubic-bezier(.2,.7,.2,1) both;
}
.bb-steps-row.bb-steps-armed.is-stepping .bb-step:nth-child(1) { animation-delay: 0ms; }
.bb-steps-row.bb-steps-armed.is-stepping .bb-step:nth-child(2) { animation-delay: 260ms; }
.bb-steps-row.bb-steps-armed.is-stepping .bb-step:nth-child(3) { animation-delay: 520ms; }
.bb-steps-row.bb-steps-armed.is-stepping .bb-step:nth-child(4) { animation-delay: 780ms; }
@media (prefers-reduced-motion: reduce) {
  .bb-steps-row.bb-steps-armed .bb-step { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Tab panels are display:none until their radio is checked, so a #hash link to
   one can neither scroll nor open it. JS handles the normal path; :target is the
   no-JS fallback, and :has() suppresses the checked panel so only one shows. */
.bb-tabpanels:has(.bb-tabpanel:target) .bb-tabpanel { display: none; }
.bb-tabpanel:target { display: block; }
.bb-tabpanel { scroll-margin-top: 120px; }


/* ============================================================
   LIST MARKER COLLISION FIX
   additional.css paints a global orange check on `.entry-content ul li::before`
   at specificity (0,1,3), which OUTRANKS `.bb-arch-split-points li::before`
   (0,1,2). Only one ::before exists per element, so the two rules merged: the
   tick glyph rendered ON TOP of the archetype's orange square, producing a
   check overlapping a dash. Restated here at (0,2,2) so the archetype wins.
   ============================================================ */
.bb-revamp .bb-arch-split-points li::before,
.bb-arch-split .bb-arch-split-points li::before {
  content: "" !important;
  width: 8px !important; height: 8px !important;
  margin-right: 0 !important;
  display: block !important;
  border-radius: 2px !important;
  background: var(--bb-sig-broken, #ED4B00) !important;
  color: transparent !important;
}
.bb-revamp .bb-tabpanel-list li::before,
.bb-arch-tabs .bb-tabpanel-list li::before {
  content: "" !important;
  width: 7px !important; height: 7px !important;
  margin-right: 0 !important;
  display: block !important;
  border-radius: 2px !important;
  background: var(--bb-sig-ok, #2E9E6B) !important;
  color: transparent !important;
}
/* the same global rule also scales/recolours these list items on hover */
.bb-revamp .bb-arch-split-points li:hover,
.bb-revamp .bb-tabpanel-list li:hover { transform: none !important; color: inherit !important; }

.bb-tabpanel-visual {
  background: var(--bb-l2); border: 1px solid var(--bb-l4);
  border-radius: var(--bb-r-lg, 14px); padding: var(--bb-s5, 24px);
}
.bb-tabpanel-metric {
  font-family: var(--bb-font-mono); font-size: 0.8rem; color: var(--bb-tx3);
  display: flex; justify-content: space-between; padding: 12px 0;
  border-bottom: 1px solid var(--bb-l4);
}
.bb-tabpanel-metric:last-child { border-bottom: 0; }
.bb-tabpanel-metric b { color: var(--bb-tx); font-weight: 600; }

/* ============================================================
   ARCHETYPE C — DIAGRAM FEATURE  (the signature measurement chain)
   Full-width dark. One owned SVG. Broken <-> verified CSS toggle.
   ============================================================ */
.bb-arch-diagram {
  background: var(--bb-d0, #000);
  padding: var(--bb-s10, 112px) 0;
  text-align: center;
}
.bb-arch-diagram .bb-eyebrow {
  display: inline-block; font-size: var(--bb-t-eyebrow, 0.70rem);
  font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bb-or); margin: 0 0 var(--bb-s3, 12px);
}
.bb-arch-diagram h2 {
  font-size: var(--bb-t-display-l, clamp(2rem, 3.6vw, 3rem));
  line-height: 1.06; letter-spacing: -0.025em; font-weight: 700;
  color: #fff; margin: 0 auto var(--bb-s4, 16px); max-width: 18ch;
}
.bb-arch-diagram h2 em { font-style: normal; color: var(--bb-or); }
.bb-arch-diagram-sub {
  font-size: var(--bb-t-body, 0.95rem); line-height: 1.7; color: var(--bb-txw3);
  max-width: 60ch; margin: 0 auto var(--bb-s7, 48px);
}
.bb-diag-frame {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
}
.bb-diag { background: transparent; }
.bb-diag svg { width: 100%; height: auto; }
.bb-diag svg.bb-diag-h { display: block; }
.bb-diag svg.bb-diag-v { display: none; }

/* toggle control */
.bb-diag-toggle { position: absolute; opacity: 0; pointer-events: none; }
.bb-diag-controls {
  display: inline-flex; align-items: center; gap: 14px;
  margin: var(--bb-s6, 32px) 0 0; font-size: var(--bb-t-caption, 0.78rem);
  color: var(--bb-txw3);
}
.bb-diag-switch {
  display: inline-flex; cursor: pointer; user-select: none;
  border: 1px solid var(--bb-d7); border-radius: 999px; overflow: hidden;
}
.bb-diag-switch span {
  padding: 8px 16px; font-family: var(--bb-font-mono); font-size: 0.72rem;
  color: var(--bb-txw3); transition: background 0.2s, color 0.2s;
}
.bb-diag-switch .on-broken { color: var(--bb-sig-broken, #ED4B00); background: rgba(237,75,0,0.12); }
#bb-diag-verified:checked ~ .bb-diag-frame .bb-diag-switch .on-broken { color: var(--bb-txw4); background: transparent; }
#bb-diag-verified:checked ~ .bb-diag-frame .bb-diag-switch .on-verified { color: var(--bb-sig-ok, #2E9E6B); background: rgba(46,158,107,0.14); }

/* --- SVG node + edge language (section 7.3) --- */
.bb-diag .node-box { fill: var(--bb-d5); stroke-width: 1; rx: 6; }
.bb-diag .node-label { font-family: var(--bb-font-mono); font-size: 13px; fill: var(--bb-txw2); }
.bb-diag .node-sub   { font-family: var(--bb-font-sans); font-size: 11px; fill: var(--bb-txw4); }
.bb-diag .edge { stroke-width: 1.5; fill: none; }
.bb-diag .loss-label { font-family: var(--bb-font-mono); font-size: 11px; fill: var(--bb-sig-broken, #ED4B00); }
.bb-diag .leader { stroke: var(--bb-d7); stroke-width: 1; }

/* broken state (default) */
.bb-diag [data-st="ok"]     .node-box { stroke: var(--bb-sig-ok, #2E9E6B); }
.bb-diag [data-st="warn"]   .node-box { stroke: var(--bb-sig-warn, #E0A32E); }
.bb-diag [data-st="broken"] .node-box { stroke: var(--bb-sig-broken, #ED4B00); }
.bb-diag .edge.e-ok     { stroke: var(--bb-sig-ok, #2E9E6B); }
.bb-diag .edge.e-warn   { stroke: var(--bb-sig-warn, #E0A32E); stroke-dasharray: 5 4; }
.bb-diag .edge.e-broken { stroke: var(--bb-sig-broken, #ED4B00); stroke-dasharray: 4 5; opacity: 0.75; }
.bb-diag .brk { opacity: 1; }        /* break crosses + loss labels visible when broken */

/* verified state (toggle) — everything intact green, losses hidden */
#bb-diag-verified:checked ~ .bb-diag-frame .bb-diag [data-st] .node-box { stroke: var(--bb-sig-ok, #2E9E6B); }
#bb-diag-verified:checked ~ .bb-diag-frame .bb-diag .edge { stroke: var(--bb-sig-ok, #2E9E6B); stroke-dasharray: none; opacity: 1; }
#bb-diag-verified:checked ~ .bb-diag-frame .bb-diag .brk { opacity: 0; }
/* the one node the reader should watch, independent of state (section 7.3) */
.bb-diag .node-focus .node-box { stroke: var(--bb-or); stroke-width: 1.5; }
#bb-diag-verified:checked ~ .bb-diag-frame .bb-diag .node-focus .node-box { stroke: var(--bb-or); }

/* legend */
.bb-diag-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px;
  margin: var(--bb-s5, 24px) auto 0; font-size: var(--bb-t-caption, 0.78rem);
  color: var(--bb-txw3);
}
.bb-diag-legend span { display: inline-flex; align-items: center; gap: 7px; }
.bb-diag-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.bb-diag-caption {
  font-size: var(--bb-t-caption, 0.78rem); line-height: 1.6; color: var(--bb-txw4);
  max-width: 64ch; margin: var(--bb-s5, 24px) auto 0;
}

@media (max-width: 860px) {
  .bb-tabpanel-grid { grid-template-columns: 1fr; gap: var(--bb-s6, 32px); }
  .bb-diag svg.bb-diag-h { display: none; }   /* hide horizontal chain */
  .bb-diag svg.bb-diag-v { display: block; }  /* show vertical variant */
}

/* ============================================================
   ARCHETYPE D — STEPPED SEQUENCE  (the only numbered section)
   Horizontal rule through markers on desktop; left rail on mobile.
   ============================================================ */
.bb-arch-steps {
  background: var(--bb-l2);
  padding: var(--bb-s9, 96px) 0;
  color: var(--bb-tx);
}
.bb-arch-steps .bb-eyebrow {
  display: inline-block; font-size: var(--bb-t-eyebrow, 0.70rem);
  font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bb-or-text); margin: 0 0 var(--bb-s3, 12px);
}
.bb-arch-steps h2 {
  font-size: var(--bb-t-h2, clamp(1.75rem, 3vw, 2.5rem));
  line-height: 1.10; letter-spacing: -0.02em; font-weight: 700;
  color: var(--bb-tx); margin: 0 0 var(--bb-s8, 64px); max-width: 22ch;
}
.bb-arch-steps h2 em { font-style: normal; color: var(--bb-or-text); }
.bb-steps-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bb-s5, 24px);
  position: relative;
}
/* the connecting rule through the markers */
.bb-steps-row::before {
  content: ""; position: absolute; top: 22px; left: 0; right: 0; height: 2px;
  background: var(--bb-l4); z-index: 0;
}
.bb-step { position: relative; z-index: 1; }
.bb-step-num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bb-or); color: #fff;
  font-family: var(--bb-font-mono); font-size: 1.05rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 var(--bb-s4, 16px); box-shadow: 0 0 0 6px var(--bb-l2);
}
.bb-step h3 {
  font-size: var(--bb-t-h3, 1.35rem); font-weight: 700; letter-spacing: -0.01em;
  color: var(--bb-tx); margin: 0 0 var(--bb-s2, 8px);
}
.bb-step p {
  font-size: var(--bb-t-body-s, 0.86rem); line-height: 1.65; color: var(--bb-tx3);
  margin: 0; max-width: 30ch;
}

/* ============================================================
   ARCHETYPE G — PROOF CASE  (replaces the quote wall)
   Two case cards. Market/vertical tag, outcome headline,
   3 metric tiles with scope captions, attributed quote + linked site.
   ============================================================ */
.bb-arch-proof {
  background: var(--bb-d3);
  padding: var(--bb-s10, 112px) 0;
  color: var(--bb-txw2);
}
.bb-arch-proof .bb-eyebrow {
  display: inline-block; font-size: var(--bb-t-eyebrow, 0.70rem);
  font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bb-or); margin: 0 0 var(--bb-s3, 12px);
}
.bb-arch-proof h2 {
  font-size: var(--bb-t-h2, clamp(1.75rem, 3vw, 2.5rem));
  line-height: 1.10; letter-spacing: -0.02em; font-weight: 700;
  color: #fff; margin: 0 0 var(--bb-s8, 64px); max-width: 24ch;
}
.bb-arch-proof h2 em { font-style: normal; color: var(--bb-or); }
.bb-cases {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--bb-s6, 32px);
}
.bb-case {
  background: var(--bb-d5); border: 1px solid var(--bb-d7);
  border-radius: var(--bb-r-lg, 14px); padding: var(--bb-s6, 32px);
  display: flex; flex-direction: column;
}
.bb-case-tag {
  font-family: var(--bb-font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bb-txw4);
  margin: 0 0 var(--bb-s4, 16px);
}
.bb-case-tag b { color: var(--bb-or); font-weight: 600; }
.bb-case-headline {
  font-size: var(--bb-t-h3, 1.35rem); line-height: 1.28; font-weight: 700;
  letter-spacing: -0.01em; color: #fff; margin: 0 0 var(--bb-s6, 32px);
}
.bb-case-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bb-s4, 16px);
  padding: var(--bb-s5, 24px) 0; border-top: 1px solid var(--bb-d7);
  border-bottom: 1px solid var(--bb-d7); margin: 0 0 var(--bb-s5, 24px);
}
.bb-case-metric .fig {
  display: block; font-size: var(--bb-t-h3, 1.5rem); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  color: var(--bb-or); line-height: 1.1;
}
.bb-case-metric .cap {
  display: block; font-size: 0.72rem; line-height: 1.35; color: var(--bb-txw4);
  margin-top: 6px;
}
.bb-case-quote {
  font-size: var(--bb-t-body, 0.95rem); line-height: 1.6; color: var(--bb-txw2);
  margin: 0 0 var(--bb-s4, 16px); font-style: italic;
}
.bb-case-attrib {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  font-size: var(--bb-t-caption, 0.78rem); color: var(--bb-txw3);
}
.bb-case-attrib a { color: var(--bb-or); font-weight: 700; text-decoration: none; }
.bb-case-attrib a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .bb-stage-grid { grid-template-columns: 1fr; gap: var(--bb-s6, 32px); }
  .bb-stage-copy h1 { font-size: clamp(2.1rem, 9vw, 3rem); }
  .bb-steps-row { grid-template-columns: 1fr; gap: 0; }
  .bb-steps-row::before { top: 0; bottom: 0; left: 22px; right: auto; width: 2px; height: auto; }
  .bb-step { padding: 0 0 var(--bb-s6, 32px) 72px; }
  .bb-step-num { position: absolute; left: 0; top: 0; }
  .bb-cases { grid-template-columns: 1fr; }
  .bb-case-headline { font-size: 1.2rem; }
}

.bb-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Prevent grid/flex children from forcing tracks wider than the viewport (min-width:auto default). */
.bb-stage-grid > *, .bb-arch-split-grid > *, .bb-tabpanel-grid > *,
.bb-cases > *, .bb-steps-row > * { min-width: 0; }

/* ============================================================
   ARCHETYPE K — COMPACT BAND  (connective tissue, one category only)
   ============================================================ */
.bb-arch-band {
  background: var(--bb-l1);
  padding: var(--bb-s7, 48px) 0;
  border-top: 1px solid var(--bb-l4);
  border-bottom: 1px solid var(--bb-l4);
}
.bb-band-label {
  text-align: center; font-family: var(--bb-font-mono);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bb-tx4); margin: 0 0 var(--bb-s5, 24px);
}
.bb-band-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--bb-s4, 16px) var(--bb-s6, 32px);
}
.bb-band-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border: 1px solid var(--bb-l4); border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: var(--bb-tx2); background: #fff;
}
.bb-band-badge svg { width: 16px; height: 16px; flex: 0 0 auto; }
.bb-band-badge .tick { color: var(--bb-sig-ok, #2E9E6B); }

/* ============================================================
   FIGURE + CAPTION + REDACTION  (bb-fig-*)
   ============================================================ */
.bb-fig { margin: 0; }
.bb-fig-frame {
  position: relative; border: 1px solid var(--bb-d7); border-radius: var(--bb-r, 10px);
  overflow: hidden; background: var(--bb-d4);
}
.bb-fig-frame img, .bb-fig-frame svg { display: block; width: 100%; height: auto; }
.bb-fig-redact {
  position: absolute; background: var(--bb-d0, #000);
  border-radius: 3px; opacity: 0.96;
  display: inline-flex; align-items: center; justify-content: center;
}
.bb-fig-redact::after {
  content: "redacted"; font-family: var(--bb-font-mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-txw4);
}
.bb-fig figcaption {
  font-size: var(--bb-t-caption, 0.78rem); line-height: 1.55; color: var(--bb-tx4);
  margin-top: var(--bb-s3, 12px); padding-left: 14px; border-left: 2px solid var(--bb-l4);
}
.bb-fig--dark figcaption { color: var(--bb-txw4); border-left-color: var(--bb-d7); }

/* ============================================================
   ARCHETYPE H — QUOTE FEATURE  (one strong verified quote, dark)
   ============================================================ */
.bb-arch-quote {
  background: var(--bb-d2); padding: var(--bb-s10, 112px) 0; text-align: center;
}
.bb-quote-mark {
  font-family: var(--bb-font-mono); color: var(--bb-or); font-size: 3rem;
  line-height: 1; margin: 0 0 var(--bb-s4, 16px);
}
.bb-arch-quote blockquote {
  font-size: var(--bb-t-h2-sub, clamp(1.55rem, 2.6vw, 2.2rem));
  line-height: 1.32; letter-spacing: -0.015em; font-weight: 600;
  color: #fff; max-width: 22ch; margin: 0 auto var(--bb-s6, 32px);
}
.bb-arch-quote blockquote em { font-style: normal; color: var(--bb-or); }
.bb-quote-attrib {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--bb-t-caption, 0.78rem); color: var(--bb-txw3);
}
.bb-quote-attrib .who { font-weight: 600; color: var(--bb-txw2); }
.bb-quote-attrib a { color: var(--bb-or); font-weight: 700; text-decoration: none; }
.bb-quote-attrib a:hover { text-decoration: underline; }

/* ============================================================
   VIDEO FACADE  (bb-video-*)  — no third-party until click
   ============================================================ */
.bb-video { max-width: 820px; margin: 0 auto; }
.bb-video-facade {
  position: relative; border-radius: var(--bb-r-lg, 14px); overflow: hidden;
  border: 1px solid var(--bb-d7); cursor: pointer; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--bb-d5), var(--bb-d2));
}
.bb-video-play {
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px;
  border-radius: 50%; background: var(--bb-or); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.18s, background 0.18s;
}
.bb-video-facade:hover .bb-video-play { transform: scale(1.06); background: var(--bb-or-d); }
.bb-video-play svg { width: 26px; height: 26px; margin-left: 4px; fill: #fff; }
.bb-video-dur {
  position: absolute; right: 14px; bottom: 14px;
  font-family: var(--bb-font-mono); font-size: 0.74rem; color: #fff;
  background: rgba(0,0,0,0.6); padding: 4px 9px; border-radius: 5px;
}
.bb-video-facade.is-playing .bb-video-poster,
.bb-video-facade.is-playing .bb-video-play,
.bb-video-facade.is-playing .bb-video-dur { display: none; }
.bb-video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bb-video-cap {
  font-size: var(--bb-t-caption, 0.78rem); color: var(--bb-txw4);
  margin: var(--bb-s3, 12px) 0 0; text-align: center;
}
.bb-video-transcript { margin: var(--bb-s4, 16px) 0 0; border-top: 1px solid var(--bb-d7); }
.bb-video-transcript summary {
  cursor: pointer; padding: 14px 0; font-size: 0.85rem; font-weight: 600;
  color: var(--bb-txw2); list-style: none; display: flex; align-items: center; gap: 8px;
}
.bb-video-transcript summary::-webkit-details-marker { display: none; }
.bb-video-transcript summary::before { content: "＋"; color: var(--bb-or); font-family: var(--bb-font-mono); }
.bb-video-transcript[open] summary::before { content: "－"; }
.bb-video-transcript p {
  font-size: var(--bb-t-body-s, 0.86rem); line-height: 1.7; color: var(--bb-txw3);
  margin: 0 0 var(--bb-s4, 16px); max-width: 68ch;
}

/* ============================================================
   STAGING PAGE CHROME (design-lab only — this file loads only there,
   so these broad selectors are safe and scoped to the lab)
   ============================================================ */
html, body, .site-content, .ast-container, #content, #primary, .entry-content,
.ast-page-builder-template .site-content { background: var(--bb-d0, #000) !important; }
.entry-content > * { margin-block: 0; }
.bb-lab-band {
  background: var(--bb-d0, #000);
  padding: var(--bb-s6, 32px) 0;
  border-bottom: 1px solid var(--bb-d7);
}
.bb-lab-band h1 {
  color: #fff; font-size: 1.4rem; margin: 0 0 6px; font-weight: 700;
}
.bb-lab-band p {
  color: var(--bb-txw3); font-family: var(--bb-font-mono); font-size: 0.8rem; margin: 0;
}
.bb-lab-label {
  display: block;
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-or);
  padding: var(--bb-s5, 24px) 0 0;
}

/* ══ MOBILE PASS 2026-08-31 ═══════════════════════════════════════════════════
   Measured at 425 with a validated viewport. Three defects, all invisible at
   desktop width.

   1. The H2 in .bb-arch-split rendered #111827 on #0D1117: a ratio of 1.07:1,
      i.e. unreadable. This file already sets `color: var(--bb-txw,#fff)` and it
      never applied, because globals.css:186 declares
      `.elementor-widget-html h2 { color: var(--bb-tx) !important }` at
      specificity (0,1,1). A (0,1,1) rule without !important loses, and so does
      any single-class override. The fix needs (0,2,1) AND !important.
      CLAUDE.md section 3 rule 8 documents exactly this.
   2. .bb-stage-ctas start-aligned its buttons at mixed widths, so the hero CTAs
      read as two unrelated elements rather than one pair.
   3. Section padding never got a mobile step: 96px and 128px survived to 425,
      which is where the "too much spacing" reports come from.
   ═══════════════════════════════════════════════════════════════════════════ */
.bb-arch-split .bb-arch-split-copy h2 { color: #FFFFFF !important; }
.bb-arch-split .bb-arch-split-copy h2 em { color: var(--bb-or, #FF6A00) !important; }

@media (max-width: 700px) {
  .bb-stage-ctas {
    flex-direction: column !important; align-items: center !important;
    justify-content: center !important; width: 100% !important;
    margin-bottom: 32px !important; }
  .bb-stage-ctas > a, .bb-stage-ctas > .bb-btn {
    width: 100% !important; max-width: 340px !important; text-align: center !important; }

  /* the hero: 104px clears the transparent header, which overlays it */
  /* .bb-revamp is (0,2,0) and outranks a bare .bb-arch-stage even with !important.

     Measured at 425: the mobile header BAR ends at 125px and the logo mark at 105px,
     and the hero starts at y=0 behind both. The two variants are not interchangeable
     here: .bb-revamp puts its eyebrow 5px into the section and the plain variant puts
     it 25px in, so identical padding leaves them 20px apart. 140/120 lands both about
     40px clear of the logo. Padding alone cannot equalise this, which is why the two
     carry different numbers rather than one shared value. */
  .bb-arch-stage { padding-top: 120px !important; padding-bottom: 56px !important; }
  .bb-arch-stage.bb-revamp { padding-top: 140px !important; padding-bottom: 56px !important; }
  .bb-arch-split, .bb-arch-quote, .bb-arch-steps, .bb-arch-tabs {
    padding-top: 56px !important; padding-bottom: 56px !important; }
}