/* ═══════════════════════════════════════════════════════════════════════════
   MASTER BUYER GUIDE HUB — /pages/buyer-guides.html
   ═══════════════════════════════════════════════════════════════════════════

   Presentation only. No copy, URL, canonical, metadata or proof claim is
   affected by anything in this file.

   ── WHY THIS FILE CHANGED ────────────────────────────────────────────────────
   Four visible defects on the hub all traced to the production
   knowledge-article grammar being inherited by components it was never written
   for. Measured in a rendered page, not assumed:

     1. Duplicate numbering. `.kn-article ol li::before` draws "1." "2." … for
        every ordered list inside an article, so each decision card showed the
        production counter AND its own "01". `list-style:none` does not remove a
        ::before counter.
     2. Stray bullets. `.kn-article ul li::before` does the same with a bullet,
        which is what appeared in "How the guides work together".
     3. A blank CTA. `.kn-article a` sets `color:var(--b)`, and at 0,1,1 it beats
        `.btn-p` at 0,1,0 — so the primary button rendered blue text on a blue
        ground and read as an empty rectangle.
     4. Permanent underlines on card titles, from the same `.kn-article a` rule.

   The fix is to neutralise that inheritance for the hub's own components rather
   than to weaken the production grammar, which prose on this page still needs.

   ── THE ENTERPRISE LAYER ─────────────────────────────────────────────────────
   `.bge-*` are the shared enterprise primitives — hero, widths, cards, links,
   markers, CTA. `.bgh-*` are hub-specific components built on top. Both use
   production tokens only: no hex value is declared in this file.

   Geometry follows the brief: `.wrap` stays the production 1200px outer
   container, the editorial column stays 760px, and framework components that
   need more room use `.bge-wide` at 1080px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ENTERPRISE HERO ────────────────────────────────────────────────────
   White, not a pale-blue slab. A hero on a corporate site announces the page
   and then gets out of the way, so this is a thin band closed by a single hair
   rule — the same device the footer uses to separate itself from the page.

   The H1 is brought down from the marketing scale (clamp 34-54px, weight 800)
   to an enterprise one, and given an explicit measure so it breaks into two
   controlled lines instead of three ragged ones. */

.bge-hero {
  background: var(--w);
  border-bottom: 1px solid var(--br);
  padding: 30px 0 34px;
}

.bge-hero .h1 {
  font-size: clamp(27px, 2.5vw, 35px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.021em;
  max-width: 22ch;
  text-wrap: balance;
  margin-bottom: 14px;
}

.bge-hero .kn-deck {
  font-size: 16px;
  line-height: 1.62;
  color: var(--t-m);
  max-width: 66ch;
}

/* The eyebrow sits on white now, so it needs its own quiet edge. */
.bge-hero .kn-eyebrow {
  background: var(--b-lt);
  border-color: var(--b-bd);
}

/* ── 2. WIDTHS ─────────────────────────────────────────────────────────────
   The editorial measure stays 760px for prose. Framework components — grids,
   the decision architecture, the evidence module — are allowed 1080px, on the
   same left edge, so they read as structure rather than oversized paragraphs.

   This sheet is loaded by the hub alone, so these rules need no page scope.

   The framework rail is achieved by widening the article to 1080px and capping
   the prose measure at 760px, rather than by breaking components out of a narrow
   column with negative margins. Breakouts were tried first and produced a 53px
   horizontal overflow at 1280px that the existing visual suite caught — the
   arithmetic is fine in isolation and fragile in combination. Widening the
   container instead keeps every component in normal flow, so no element can
   escape its parent by construction.

   The hero shares the same 1080px rail, so hero and body align on one left
   edge down the page. */
.kn-article { max-width: 1080px; }
.bge-hero .kn-hero-inner { max-width: 1080px; }

/* Prose keeps a readable measure inside the wider rail. */
.kn-article > section > p,
.kn-article > section > h2,
.kn-article > p,
.kn-article > h2 { max-width: 760px; }

/* Framework components fill the rail. */
.bge-wide { width: 100%; margin-left: 0; }

/* ── 3. MARKER NEUTRALISATION ──────────────────────────────────────────────
   Any enterprise component built on a <ul> or <ol> carries .bge-list, which
   removes the inherited production marker and its indent. Without this the
   component shows two numbers, or a bullet it never asked for. Prose lists on
   the same page keep the production treatment untouched. */

.kn-article .bge-list,
.kn-article ol.bge-list,
.kn-article ul.bge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.kn-article .bge-list > li {
  padding-left: 0;
  margin: 0;
}

.kn-article .bge-list > li::before {
  content: none;
  display: none;
}

/* ── 4. LINK TREATMENT ─────────────────────────────────────────────────────
   Inline prose keeps the production underline: inside a paragraph it is the
   only thing that marks a link. A card, a grid tile or a component title is
   already unmistakably clickable, and a permanent underline there is what made
   the hub read like raw HTML.

   Both rules are 0,2,1 or higher so they beat `.kn-article a` at 0,1,1 without
   !important. */

.kn-article a.bge-plain,
.kn-article .bge-plain a,
.kn-article a.kn-next-card,
.kn-article a.kn-next-card:hover {
  text-decoration: none;
}

/* Titles inside a card inherit the card's colour rather than link blue, so the
   card reads as one object. */
.kn-article a.kn-next-card .kn-next-title { color: var(--t); }

/* ── 5. THE CTA DEFECT ─────────────────────────────────────────────────────
   `.kn-article a` was overriding the button's own colour. These restore the
   production button system inside an article at a specificity that wins. */

.kn-article a.btn {
  text-decoration: none;
  color: var(--w);
}

.kn-article a.btn-p { background: var(--b); color: var(--w); }
.kn-article a.btn-p:hover { background: var(--b-dk); color: var(--w); }
.kn-article a.btn-s { background: var(--w); color: var(--b); }
.kn-article a.btn-s:hover { background: var(--b-lt); color: var(--b); }

/* A CTA is a decision, so it gets air rather than sitting tight under the last
   paragraph like a stray link. */
.bge-cta {
  margin-top: 26px;
  padding: 26px 28px;
  background: var(--bg-s);
  border: 1px solid var(--br);
  border-radius: var(--r);
}

.bge-cta-t {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--t);
  margin-bottom: 8px;
}

.bge-cta-d {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--t-m);
  max-width: 62ch;
  margin-bottom: 18px;
}

/* ── 6. ENTERPRISE CARD ────────────────────────────────────────────────────
   White, one hairline border, the production radius, and a shadow only on
   hover. Nothing here floats: a corporate page reads as a set of panels, not a
   deck of cards with drop shadows. */

.bge-card {
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: 22px 24px;
  transition: border-color .15s, box-shadow .15s;
}

a.bge-card:hover { border-color: var(--b-bd); box-shadow: var(--sh-s); }

/* ── 7. SECTION RHYTHM ────────────────────────────────────────────────────
   Long pages fail on spacing before they fail on typography. An enterprise
   section break is a generous gap and, where a section starts a new part of the
   argument, a hair rule. */

.kn-article .bge-sec {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--br);
}

/* The first section opens the page, so it takes no divider: a rule directly
   under the hero reads as a stray line rather than a section break. */
.kn-article .bge-sec:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* A short label above an H2, for sections that are a distinct module rather
   than the next paragraph of prose. */
.bge-lbl {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--t-l);
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUB COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── START HERE — two intentional entry paths ──────────────────────────────
   A buyer arrives holding either a question or an industry. The section used to
   say that in prose and then offer one card, which made the industry path look
   like an afterthought. Two panels, equally weighted, state that there are two
   ways in and let the reader pick. */

.bgh-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.bgh-path {
  display: flex;
  flex-direction: column;
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: 24px 26px;
}

.bgh-path-k {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--b);
  margin-bottom: 10px;
}

.bgh-path-t {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--t);
  margin-bottom: 8px;
}

.bgh-path-d {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--t-m);
  margin-bottom: 18px;
}

.bgh-path-a {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--b);
}

.bgh-path-a::after { content: ' \2192'; }

/* ── THE SEVEN DECISION GUIDES ─────────────────────────────────────────────
   One number per card, from .bgh-step-n only: the inherited production counter
   is removed by .bge-list. The number is set in a quiet fixed-width rail so the
   seven titles start on one vertical line and the sequence is legible as a
   sequence. */

.bgh-steps {
  display: grid;
  gap: 10px;
  margin-top: 22px !important;
}

.bgh-step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 2px 4px;
  align-items: start;
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: 20px 24px;
  transition: border-color .15s, box-shadow .15s;
}

.bgh-step:hover { border-color: var(--b-bd); box-shadow: var(--sh-xs); }

.bgh-step-n {
  grid-row: 1 / span 3;
  font-size: 14px;
  font-weight: 700;
  color: var(--t-l);
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}

.bgh-step-t {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--t);
  max-width: 54ch;
}

/* No permanent underline: the whole row is the affordance. */
.kn-article .bgh-step-t a {
  color: var(--t);
  text-decoration: none;
  font-weight: 700;
}

.kn-article .bgh-step-t a:hover { color: var(--b); }

.bgh-step-q {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--b);
  margin-top: 5px;
  max-width: 62ch;
}

.bgh-step-d {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--t-m);
  margin-top: 5px;
  max-width: 68ch;
}

/* ── CHOOSE YOUR INDUSTRY — one consistent 2-column grid ───────────────────
   Eight equal tiles. Equal by design: two of these industries carry no approved
   named customer proof, and proof availability is not a ranking device, so
   nothing in this treatment can imply an order. */

.bgh-inds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.bgh-ind {
  display: flex;
  flex-direction: column;
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: 20px 22px;
  transition: border-color .15s, box-shadow .15s;
}

.bgh-ind:hover { border-color: var(--b-bd); box-shadow: var(--sh-xs); }

.bgh-ind-t {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--t);
  margin-bottom: 7px;
}

.bgh-ind-d {
  font-size: 14px;
  line-height: 1.6;
  color: var(--t-m);
}

/* The signature workflows, on their own rule so the eight tiles are told apart
   by what they cover rather than by their industry name alone. */
.bgh-sig {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--br);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t-l);
}

/* ── HOW THE GUIDES WORK TOGETHER — decision architecture ──────────────────
   Seven numbered stages with a named role. The previous treatment was a
   bordered list carrying an inherited bullet, which read as an internal
   document. This is one component: a numbered rail, a role, and what the guide
   owns — so the architecture is visible at a glance without a diagram implying
   a precision the arrangement does not have. */

.bgh-arch {
  display: grid;
  gap: 0;
  margin-top: 22px !important;
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: var(--r);
  overflow: hidden;
}

.bgh-arch-r {
  display: grid;
  grid-template-columns: 44px minmax(0, 200px) minmax(0, 1fr);
  gap: 4px 18px;
  align-items: baseline;
  padding: 16px 22px;
  border-top: 1px solid var(--br);
}

.bgh-arch-r:first-child { border-top: none; }

.bgh-arch-n {
  font-size: 13px;
  font-weight: 700;
  color: var(--t-l);
  font-variant-numeric: tabular-nums;
}

.bgh-arch-k {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.008em;
  color: var(--t);
}

.bgh-arch-d {
  font-size: 14px;
  line-height: 1.62;
  color: var(--t-m);
}

/* ── EVIDENCE MODULE ───────────────────────────────────────────────────────
   The SHOW ME argument is the spine of the whole family, so it gets a module of
   its own rather than two more paragraphs. Left rule in production blue, subtle
   ground, and the companion card inside it. */

.bgh-ev {
  margin-top: 22px;
  padding: 24px 26px;
  background: var(--bg-s);
  border: 1px solid var(--br);
  border-left: 3px solid var(--b);
  border-radius: 0 var(--r) var(--r) 0;
}

.bgh-ev-t {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--t);
  margin-bottom: 10px;
}

.kn-article .bgh-ev p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--t-m);
}

.kn-article .bgh-ev p + p { margin-top: 12px; }

/* ── COMPANION GUIDE ───────────────────────────────────────────────────────
   The C8 knowledge guide answers the question one step earlier than Guide 1.
   It is labelled as a companion so it is not mistaken for an eighth decision
   guide, and it keeps its own place on the page. */

.bgh-comp {
  margin-top: 22px;
  border: 1px solid var(--b-bd);
  border-radius: var(--r);
  overflow: hidden;
}

.bgh-comp-h {
  display: block;
  padding: 9px 22px;
  background: var(--b-lt);
  border-bottom: 1px solid var(--b-bd);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--b-dk);
}

.bgh-comp-b { padding: 20px 22px; background: var(--w); }

.bgh-comp-t {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--t);
  margin-bottom: 7px;
}

.bgh-comp-d {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--t-m);
}

.bgh-comp-a {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--b);
}

.bgh-comp-a::after { content: ' \2192'; }

/* ── Narrow widths ─────────────────────────────────────────────────────────
   Production breakpoints. The two-up grids collapse to one column, the wide
   rail stops breaking out, and every numbered rail moves its number above the
   row rather than squeezing the text column. */

@media (max-width: 767px) {
  .bge-hero { padding: 24px 0 26px; }
  .bge-hero .h1 { font-size: clamp(24px, 6.4vw, 28px); max-width: none; }
  .bge-hero .kn-deck { font-size: 15px; }

  .bgh-paths, .bgh-inds { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bgh-path, .bgh-ind { padding: 20px 18px; }

  .bgh-step { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px; }
  .bgh-step-n { grid-row: auto; padding-top: 0; margin-bottom: 2px; }

  .bgh-arch-r { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 16px 18px; }
  .bgh-arch-n { grid-row: 1 / span 2; }

  .bgh-ev, .bge-cta { padding: 20px 18px; }
  .bgh-comp-h { padding: 8px 18px; }
  .bgh-comp-b { padding: 18px; }

  .kn-article .bge-sec { margin-top: 40px; padding-top: 30px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1B — GLOBAL ENTERPRISE ALIGNMENT (HUB)
   ═══════════════════════════════════════════════════════════════════════════
   Presentation only. Production tokens only. Same shared spacing scale the
   guide masters use, so the hub and the guides are spaced by one decision.
   ═══════════════════════════════════════════════════════════════════════════ */

.kn-article,
.bge-hero {
  --bge-gutter: 24px;
  --bge-rail: 1080px;      /* wide framework, 1000-1080 band */
  --bge-measure: 780px;    /* editorial measure, 760-800 band */
  --bge-sec: 80px;         /* major section spacing, 72-88 band */
  --bge-sub: 44px;         /* subsection spacing, 40-48 band */
  --bge-pad: 26px;         /* card padding, 24-28 band */
  --bge-pad-m: 20px;
}

.kn-article { max-width: var(--bge-rail); }
.bge-hero .kn-hero-inner { max-width: var(--bge-rail); }

.kn-article > section > p,
.kn-article > section > h2,
.kn-article > p,
.kn-article > h2 { max-width: var(--bge-measure); }

.kn-article .bge-sec {
  margin-top: var(--bge-sec);
  padding-top: var(--bge-sub);
}

/* ── HERO: a balanced two-part composition ─────────────────────────────────
   The desktop hero left two thirds of the band empty. The right side now
   carries a restrained count of what the collection actually contains — 15, 7
   and 8 — which are facts the page already states in its own deck: "Fifteen
   guides. Seven follow the decision itself… Eight take those same principles…".
   No claim is added. */
.bge-hero .bge-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: start;
}

.bge-stats {
  display: grid;
  grid-auto-flow: column;
  gap: 0;
  border: 1px solid var(--br);
  border-top: 2px solid var(--b);
  border-radius: var(--r);
  background: var(--w);
  overflow: hidden;
}

.bge-stat {
  padding: 18px 26px;
  border-left: 1px solid var(--br);
  text-align: left;
  min-width: 132px;
}

.bge-stat:first-child { border-left: none; }

.bge-stat-n {
  display: block;
  font-size: 30px;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--b);
  font-variant-numeric: tabular-nums;
}

.bge-stat-l {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--t-l);
}

/* ── START HERE: two primary entry paths ───────────────────────────────────
   These are the page's two doors, so they carry more weight than an
   information box: a blue top accent, a stronger title, equal heights and a
   real action affordance. */
.bgh-paths { gap: 18px; align-items: stretch; }

.bgh-path {
  padding: var(--bge-pad);
  border-top: 2px solid var(--b);
  box-shadow: var(--sh-xs);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.bgh-path:hover {
  border-color: var(--b-bd);
  border-top-color: var(--b-dk);
  box-shadow: var(--sh-m);
}

.bgh-path-k { color: var(--b); font-size: 11px; letter-spacing: .09em; }

.bgh-path-t {
  font-size: 20px;
  font-weight: 750;
  line-height: 1.24;
  letter-spacing: -.019em;
  margin-bottom: 10px;
}

.bgh-path-d { flex: 1 1 auto; margin-bottom: 0; }

/* The affordance is drawn, not written: no new copy, just an arrow rule that
   states the card is a door. */
.bgh-path::after {
  content: '\2192';
  display: block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--br);
  font-size: 16px;
  font-weight: 700;
  color: var(--b);
}

/* ── THE SEVEN DECISION GUIDES: a sequential rail ──────────────────────────
   Not seven equivalent boxes. A continuous rail with a numbered node per stage
   reads as one decision in seven steps, which is the argument the order makes. */
.bgh-steps { gap: 0; position: relative; }

.bgh-step {
  border: none;
  border-radius: 0;
  padding: 22px 0 22px 0;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 2px 0;
  background: transparent;
}

.bgh-step + .bgh-step { border-top: 1px solid var(--br); }
.bgh-step:hover { box-shadow: none; background: var(--bg-s); }

/* The node: a quiet ring that carries the stage number, connected by the rail
   rule between rows. */
.bgh-step-n {
  grid-row: 1 / span 3;
  align-self: start;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--b-bd);
  border-radius: 999px;
  background: var(--b-lt);
  color: var(--b-dk);
  font-size: 13px;
  font-weight: 700;
  padding: 0;
  margin-top: 2px;
}

.bgh-step:hover .bgh-step-n { border-color: var(--b); background: var(--w); }

.bgh-step-t { font-size: 17px; font-weight: 700; letter-spacing: -.014em; }
.bgh-step-q { font-size: 14px; }
.bgh-step-d { font-size: 14.5px; }

/* ── INDUSTRY GRID ─────────────────────────────────────────────────────────
   Equal tiles, equal heights, one blue accent, one drawn action. Proof is
   never a ranking device, so every tile is built identically. */
.bgh-inds { gap: 16px; align-items: stretch; }

.bgh-ind {
  padding: var(--bge-pad);
  box-shadow: var(--sh-xs);
  transition: border-color .15s, box-shadow .15s;
}

.bgh-ind:hover { border-color: var(--b-bd); box-shadow: var(--sh-s); }

.bgh-ind-t {
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.018em;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--b-lt);
}

.bgh-ind:hover .bgh-ind-t { border-bottom-color: var(--b-bd); }

.bgh-ind-d { flex: 1 1 auto; }

.bgh-sig { margin-top: auto; padding-top: 14px; }

.bgh-ind::after {
  content: 'Explore \2192';
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--b);
}

/* ── HOW THE GUIDES WORK TOGETHER: an aligned framework ────────────────────
   Step, role and explanation on three shared columns, so seven rows line up
   exactly. Not a default table: no cell rules, no header band, one hairline
   between rows. */
.bgh-arch { box-shadow: var(--sh-xs); }

.bgh-arch-r {
  grid-template-columns: 52px minmax(0, 190px) minmax(0, 1fr);
  gap: 0 24px;
  padding: 18px var(--bge-pad);
  align-items: start;
}

.bgh-arch-n {
  font-size: 12px;
  font-weight: 700;
  color: var(--b);
  padding-top: 2px;
}

.bgh-arch-k { font-size: 13.5px; line-height: 1.45; }
.bgh-arch-d { font-size: 14px; }

/* ── THE THREE LOWER MODULES ───────────────────────────────────────────────
   Deliberately different from one another, so they do not read as three
   successive generic border boxes: the evidence module is a blue-accented
   panel, the companion is a bordered card with a labelled header band, and the
   conversion module is a blue field. */

.bgh-ev { padding: var(--bge-pad); background: var(--b-lt); border-color: var(--b-bd); }
.kn-article .bgh-ev p { color: var(--t); }

.bgh-comp { box-shadow: var(--sh-xs); }
.bgh-comp-b { padding: var(--bge-pad); display: block; }
.bgh-comp-t { font-size: 17px; font-weight: 750; letter-spacing: -.016em; }

a.bgh-comp-b:hover .bgh-comp-t { color: var(--b); }

/* Conversion module: the one place on the hub that carries a blue field, so
   the close is unmistakable while still using the production button. */
.bge-cta {
  padding: 30px var(--bge-pad);
  background: var(--b-lt);
  border-color: var(--b-bd);
  border-top: 2px solid var(--b);
}

.bge-cta-d { color: var(--t); font-size: 15px; }

/* ── NARROW WIDTHS ─────────────────────────────────────────────────────────*/
@media (max-width: 1023px) {
  .bge-hero .bge-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .bgh-arch-r { grid-template-columns: 44px minmax(0, 150px) minmax(0, 1fr); gap: 0 18px; }
}

@media (max-width: 767px) {
  /* A compact stat strip below the intro, not a column beside it. */
  .bge-stats { grid-auto-flow: row; }
  .bge-stat { border-left: none; border-top: 1px solid var(--br); padding: 14px 18px; min-width: 0; }
  .bge-stat:first-child { border-top: none; }
  .bge-stat-n { font-size: 24px; }

  .kn-article .bge-sec { margin-top: 52px; padding-top: 30px; }
  .bgh-path, .bgh-ind, .bgh-ev, .bge-cta, .bgh-comp-b { padding: var(--bge-pad-m); }
  .bgh-path-t { font-size: 18px; }
  .bgh-ind-t { font-size: 17px; }

  .bgh-step { grid-template-columns: minmax(0, 1fr); padding: 20px 0; }
  .bgh-step-n { grid-row: auto; margin-bottom: 10px; }

  .bgh-arch-r { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding: 16px var(--bge-pad-m); }
  .bgh-arch-n { grid-row: 1 / span 2; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1C — HUB POLISH (two items only)
   ═══════════════════════════════════════════════════════════════════════════ */

/* §2A. Mobile stats: a compact three-column strip rather than three
   full-width stacked rows. Labels may wrap; the page gutter is untouched. */
@media (max-width: 767px) {
  .bge-stats { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .bge-stat {
    border-top: none;
    border-left: 1px solid var(--br);
    padding: 14px 12px;
    min-width: 0;
  }
  .bge-stat:first-child { border-left: none; }
  .bge-stat-n { font-size: 22px; }
  .bge-stat-l { font-size: 10px; letter-spacing: .05em; line-height: 1.3; }
}

/* §2B. Industry cards: the Explore action is pinned to a consistent bottom
   position in every card of an equal-height row. .bgh-sig already takes
   margin-top:auto to push the signature down, so the action is separated from
   it by a fixed gap instead of competing for the same auto margin. */
.bgh-ind { display: flex; flex-direction: column; }
.bgh-ind-d { flex: 1 1 auto; margin-bottom: 0; }
.bgh-sig { margin-top: 16px; }
.bgh-ind::after { margin-top: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2 — FRAMEWORK INTERNAL GRID (defect fix)
   ═══════════════════════════════════════════════════════════════════════════
   Measured defect: the row numbers sat 1px from the container border and
   .bgh-arch-r computed 0px horizontal padding.

   Cause: the Phase 1B rule wrote `padding: 18px var(--bge-pad)`. When a var()
   in a shorthand does not resolve at computed-value time the WHOLE declaration
   is invalid — it does not fall back to the longhand or to the earlier rule —
   so the row lost its padding entirely and the number column began at the
   border. A custom property is the wrong tool inside a shorthand that must not
   fail.

   Fixed with explicit values, to the brief's geometry:
     outer padding 26px  |  number 52px  |  role 190px  |  explanation 1fr
     column gap 24px     |  row padding 20px
   Every row uses the same declaration, so no row can indent independently and
   wrapping cannot move a column start. */

.bgh-arch-r {
  display: grid;
  grid-template-columns: 52px minmax(0, 190px) minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 0;
  align-items: baseline;
  padding: 20px 26px;
  border-top: 1px solid var(--br);
}

.bgh-arch-r:first-child { border-top: none; }

/* The number keeps its own reserved column and never borrows the content
   padding. Baseline alignment puts it on the role's first line. */
.bgh-arch-n {
  grid-column: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--b);
  font-variant-numeric: tabular-nums;
  padding: 0;
  margin: 0;
}

.bgh-arch-k { grid-column: 2; }
.bgh-arch-d { grid-column: 3; }

@media (max-width: 1023px) {
  .bgh-arch-r { grid-template-columns: 46px minmax(0, 160px) minmax(0, 1fr); column-gap: 20px; padding: 20px 24px; }
}

@media (max-width: 767px) {
  .bgh-arch-r { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 18px 20px; }
  .bgh-arch-n { grid-row: 1 / span 2; }
  .bgh-arch-k { grid-column: 2; }
  .bgh-arch-d { grid-column: 2; }
}

/* The real cause of the 0px padding, found by measurement after the explicit
   grid above still measured 0: the marker-neutralisation rule
   `.kn-article .bge-list > li { padding-left: 0 }` is 0,2,1 and outranks
   `.bgh-arch-r` at 0,1,0. It was written to remove the inherited production
   list indent, and it was also stripping the component's own padding — so the
   number column began 1px from the border.

   The reset is still right for a bare component list. A component that owns
   padding has to say so at a specificity that wins. */
.kn-article .bge-list > li.bgh-arch-r { padding: 20px 26px; }

@media (max-width: 1023px) {
  .kn-article .bge-list > li.bgh-arch-r { padding: 20px 24px; }
}

@media (max-width: 767px) {
  .kn-article .bge-list > li.bgh-arch-r { padding: 18px 20px; }
}

/* The family-wide internal-padding standard applied to the hub's own
   components: 24px desktop, 20px mobile, measured at the component border. */
@media (max-width: 767px) {
  .bge-stat { padding: 14px 20px; }
}