/* ═══════════════════════════════════════════════════════════════════════════
   BUYER GUIDE — ENTERPRISE PRESENTATION LAYER
   ═══════════════════════════════════════════════════════════════════════════

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

   ── WHY THIS IS A SEPARATE STYLESHEET ────────────────────────────────────────
   The natural home for these rules is buyer-guide.css, the shared shell. That
   file is hash-pinned by FROZEN-BASELINE.sha256, and its hash a30b67ac… is also
   hardcoded in twelve QA scripts and five per-guide freeze records. Appending to
   it would have forced a re-baseline in seventeen places for a presentation
   change — a lot of churn to review, and an easy place for a real regression to
   hide.

   So the shell stays byte-frozen and untouched, and the enterprise layer lives
   here instead, loaded only by the two Phase 1 design masters. parity.js
   excludes it explicitly, the same way it already excludes buyer-guides-hub.css,
   because it is a deployable-only sheet with no editorial prototype counterpart.

   ── SCOPE ────────────────────────────────────────────────────────────────────
   Every rule is additionally scoped to body.bge. Phase 1 covers three masters
   only: G1 and Manufacturing carry that class, and the other thirteen guides are
   byte-unchanged and render exactly as before.

   ── WHAT THIS FIXES ──────────────────────────────────────────────────────────
   Measured in a rendered page, not assumed:

     1. A blank primary CTA. `.kn-article a` in knowledge-article.css sets
        color:var(--b), and at 0,1,1 it beats `.btn-p` at 0,1,0 — so the closing
        button rendered blue text on a blue ground and read as an empty
        rectangle. The same rule put a permanent underline on card titles.
     2. A billboard H1. The guides use the production .h1 —
        clamp(34px,4.4vw,54px) at weight 800 — a marketing scale, not an
        enterprise one.
     3. A "long document" impression: sections separated by paragraph spacing
        rather than by structure.

   Production tokens only; no hex value is declared here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Restrained hero ─────────────────────────────────────────────────────── */
body.bge .bga-hero { padding: 34px 0 38px; border-bottom: 1px solid var(--br); }

body.bge .bga-hero .h1 {
  font-size: clamp(27px, 2.5vw, 35px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.021em;
  max-width: 24ch;
}

body.bge .bga-deck { font-size: 16px; line-height: 1.62; max-width: 68ch; }

/* ── The CTA defect ──────────────────────────────────────────────────────── */
body.bge .kn-article a.btn { text-decoration: none; color: var(--w); }
body.bge .kn-article a.btn-p { background: var(--b); color: var(--w); }
body.bge .kn-article a.btn-p:hover { background: var(--b-dk); color: var(--w); }
body.bge .kn-article a.btn-s { background: var(--w); color: var(--b); }

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

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

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

/* ── Link treatment ─────────────────────────────────────────────────────────
   Inline prose keeps the production underline — inside a paragraph it is the
   only thing marking a link. A card or component title is already unmistakably
   clickable, and a permanent underline there is what made the guides read like
   raw HTML. */
body.bge .kn-article a.bge-plain,
body.bge .kn-article .bge-plain a,
body.bge .kn-article .bg-toc a,
body.bge .kn-article a.bg-next,
body.bge .kn-article .bg-next a { text-decoration: none; }

/* ── Marker neutralisation ──────────────────────────────────────────────────
   Any component built on a <ul>/<ol> that carries .bge-list drops the inherited
   production marker and indent, so a component never shows a bullet or a second
   number it never asked for. Prose lists keep the production treatment. */
body.bge .kn-article .bge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
body.bge .kn-article .bge-list > li { padding-left: 0; margin: 0; }
body.bge .kn-article .bge-list > li::before { content: none; display: none; }

/* ── Section rhythm ─────────────────────────────────────────────────────────
   A long guide fails on spacing before it fails on typography. Each H2 opens a
   part of the argument, so it gets real air and a hair rule instead of another
   paragraph gap. This is what reduces the "one long document" impression
   without removing any depth. */
body.bge .kn-article > h2 {
  margin-top: 54px;
  padding-top: 38px;
  border-top: 1px solid var(--br);
}

body.bge .kn-article > h2:first-of-type {
  margin-top: 28px;
  padding-top: 0;
  border-top: none;
}

/* ── Framework width ────────────────────────────────────────────────────────
   Inside the two-track guide layout the content column is already a wide track,
   and a negative-margin breakout cannot escape a grid track — it just gets
   clamped. So .bge-wide fills the track here; the breakout belongs to
   flow-layout pages such as the hub. Measured: the track renders 900px at 1440,
   which is the framework width the guides need. */
body.bge .bge-wide { width: 100%; }
body.bge .bga-doc .bge-wide { width: 100%; margin-left: 0; }

/* ── Grouped capability module ──────────────────────────────────────────────
   Long capability and checklist runs read as raw lists. Grouping them into
   labelled panels makes the same information scannable without hiding any of
   it. */
body.bge .bge-grp {
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-top: 14px;
}

body.bge .bge-grp-h {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--t-l);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--br);
}

/* ── Narrow widths ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  body.bge .bga-hero { padding: 24px 0 26px; }
  body.bge .bga-hero .h1 { font-size: clamp(24px, 6.4vw, 28px); max-width: none; }
  body.bge .bga-deck { font-size: 15px; }
  body.bge .kn-article > h2 { margin-top: 40px; padding-top: 28px; }
  body.bge .bge-cta { padding: 20px 18px; }
  body.bge .bge-grp { padding: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1B — GLOBAL ENTERPRISE ALIGNMENT
   ═══════════════════════════════════════════════════════════════════════════
   Presentation only, still scoped to body.bge. Production tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. THE SHARED SPACING SCALE ────────────────────────────────────────────
   One scale for both masters and the hub, so spacing is a decision made once
   rather than guessed per page. Values are the brief's bands. */
body.bge {
  --bge-gutter: 24px;      /* minimum page gutter, mobile */
  --bge-toc: 220px;        /* guide contents column */
  --bge-gap: 56px;         /* contents-to-article gap, 48-64 band */
  --bge-measure: 780px;    /* editorial reading 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 / component padding, 24-28 band */
  --bge-pad-m: 20px;       /* component inner padding, mobile minimum */
}

/* ── 2. THE GUIDE GRID ─────────────────────────────────────────────────────
   One strict two-column grid. The previous track list was symmetric —
   1fr | 196 | 760 | 196 | 1fr — which left the contents rail floating in a wide
   margin with no defined gap, and put the rail, the "On this page" heading and
   the article on three different left edges.

   Now: the rail starts on the production container's own content edge, so the
   breadcrumb, eyebrow, H1 and contents column all resolve to one baseline. The
   gap is an explicit track, and the article measure is a single named track that
   every body component shares.

   Left gutter is calc((100% - 1152px) / 2): 1152px is the production .wrap
   content box (1200 max-width less 2x24 padding), so at 1440 the rail begins at
   144px — exactly where the hero H1 begins. */
body.bge .bga-doc {
  --bga-tracks:
    [full-start] minmax(var(--bge-gutter), calc((100% - 1152px) / 2))
    [rail-start] minmax(0, var(--bge-toc)) [rail-end]
    minmax(0, var(--bge-gap))
    [main-start] minmax(0, var(--bge-measure)) [main-end]
    minmax(var(--bge-gutter), 1fr) [full-end];
}

/* The rail stops at its own edge and no longer pads itself into the gap: the
   gap is a track now, so the two columns cannot drift. */
body.bge .bga-doc > .bg-rail {
  grid-column: rail-start / rail-end;
  padding-right: 0;
  top: 92px;
}

/* ── 3. PREDOMINANTLY WHITE ────────────────────────────────────────────────
   The guide body was carrying a full-bleed neutral-grey field as its dominant
   ground, which is what read as documentation software. Exactlly pages are
   white with Exactlly-blue accents; grey stays for borders and supporting UI.

   The semantic band structure is kept — it still groups chapters — but the
   alternate ground becomes white and the chapter change is carried by a hair
   rule instead of a slab. */
body.bge .bga-band.is-alt { background: var(--w); }
body.bge .bga-band + .bga-band { border-top: 1px solid var(--br); }

/* ── 4. CONTENTS AS AN ENTERPRISE CARD ─────────────────────────────────────
   A white card with a blue top accent and its own header, so "On this page"
   sits inside the component rather than floating above the grid as a separate
   full-width heading. Deliberately not a documentation sidebar: no full-height
   rule, no dense tree, no grey ground. */
body.bge .bga-doc > .bg-rail {
  background: var(--w);
  border: 1px solid var(--br);
  border-top: 2px solid var(--b);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--sh-xs);
}

body.bge .bg-rail-h {
  display: block;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--br);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--t-l);
}

body.bge .bg-toc { margin: 0; padding: 0; list-style: none; }
body.bge .bg-toc li { margin: 0; padding: 0; }
body.bge .bg-toc li::before { content: none; display: none; }

body.bge .bg-toc a {
  display: block;
  padding: 5px 0 5px 10px;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.45;
  color: var(--t-m);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}

body.bge .bg-toc a:hover {
  color: var(--b);
  border-left-color: var(--b-bd);
}

/* ── 5. BREADCRUMB SEPARATOR WRAP ──────────────────────────────────────────
   Each <li> begins with its own separator, so when the list wraps the new line
   opens with a bare "/" — visible on Manufacturing at 390px, where the second
   line read "/ Manufacturing ERP Buyer's Guide".

   The separator is decorative and already aria-hidden, so it is moved to trail
   the preceding crumb instead. A wrap can then only ever start with crumb text.
   Markup is untouched. */
body.bge .kn-crumb { flex-wrap: wrap; row-gap: 4px; }
body.bge .kn-crumb li .kn-crumb-sep { display: none; }
body.bge .kn-crumb li:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  color: var(--t-l);
  font-size: 12px;
}

/* ── 6. HERO MEASURE ───────────────────────────────────────────────────────
   The 24ch measure produced four heavy lines on the Manufacturing title. A
   measure expressed in px against the editorial band gives a controlled
   three-line composition at 1440 without shrinking the type. */
body.bge .bga-hero .h1 { max-width: 820px; }
body.bge .bga-deck { max-width: 720px; }

/* An approved in-page signature, used as a restrained hero companion. No new
   claim: the words are the guide's own section headings. */
body.bge .bge-sig {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 20px;
}

body.bge .bge-sig span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--b-dk);
  background: var(--b-lt);
  border: 1px solid var(--b-bd);
  border-radius: 999px;
  padding: 5px 12px;
}

/* ── 7. SECTION RHYTHM ON THE SHARED SCALE ─────────────────────────────────*/
body.bge .kn-article > h2,
body.bge .bga-col > h2 {
  margin-top: var(--bge-sec);
  padding-top: var(--bge-sub);
  border-top: 1px solid var(--br);
}

body.bge .kn-article > h2:first-of-type,
body.bge .bga-col > h2:first-child,
body.bge .bga-col > *:first-child > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ── 8. SHOW ME — the signature Buyer Guide component ──────────────────────
   Standardised so it is recognisable across every future guide: one width, one
   padding, one blue treatment, one label, and a body that shares the component
   left edge rather than indenting again. */
body.bge .bg-show {
  background: var(--b-lt);
  border: 1px solid var(--b-bd);
  border-left: 3px solid var(--b);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--bge-pad);
  margin-top: 20px;
}

body.bge .bg-show-h,
body.bge .bg-show > .slbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--b-dk);
}

/* ── 9. THE DIRECT ANSWER ──────────────────────────────────────────────────
   The short-answer block becomes the standard enterprise direct-answer
   component, on the article measure so it cannot float relative to the
   contents column. */
body.bge .bg-answer {
  background: var(--b-lt);
  border: 1px solid var(--b-bd);
  border-left: 3px solid var(--b);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--bge-pad);
}

/* ── 10. GROUPED MODULES AND CHECKLISTS ────────────────────────────────────
   Long capability and checklist runs are grouped, never trimmed. Two columns on
   desktop where the content allows, one on mobile. */
body.bge .bge-grp { padding: var(--bge-pad); }

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

/* ── 11. LEFT-EDGE AND GUTTER DISCIPLINE ───────────────────────────────────
   No component text may sit against a viewport, card, table or panel edge. */
body.bge .bga-col { min-width: 0; }
body.bge .bge-cta { padding: var(--bge-pad); }

@media (max-width: 1023px) {
  body.bge .bge-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  body.bge .bga-hero .h1 { max-width: none; }
  body.bge .kn-article > h2,
  body.bge .bga-col > h2 { margin-top: 52px; padding-top: 30px; }
  body.bge .bg-show,
  body.bge .bg-answer,
  body.bge .bge-grp,
  body.bge .bge-cta { padding: var(--bge-pad-m); }
  body.bge .bga-doc > .bg-rail { padding: 14px 16px; }
}

/* The shell gives .bg-toc a left hairline, which was the rail's only structure
   before it became a card. Inside the card it reads as a stray vertical rule. */
body.bge .bg-toc { border-left: none; }
body.bge .bg-toc a { margin-left: 0; }

/* Both columns must start on one baseline. The rail is a grid item at the row
   top, while the article sits inside .bga-band, whose 88px vertical padding is
   the guide's major section rhythm. Measured: the article began 88px below the
   rail. Offsetting the rail by the same value puts the contents heading and the
   first article line on one horizontal baseline. */
body.bge .bga-doc > .bg-rail { margin-top: 88px; }

@media (max-width: 1023px) {
  body.bge .bga-doc > .bg-rail { margin-top: 0; }
}

/* ── The mobile single column ───────────────────────────────────────────────
   The shell collapses the two-track grid below 1199px, but that reset lives on
   a bare `.bga-doc` inside a media query, so the body.bge override above beat
   it and the desktop tracks leaked into mobile: the hidden rail's 220px track
   and the 56px gap still occupied space, pushing the article to a 90px column
   at 390px. Measured in a render, not assumed.

   Restated here at the same specificity as the override, so the collapse wins
   again below the breakpoint. */
@media (max-width: 1199px) {
  body.bge .bga-doc {
    --bga-tracks:
      [full-start] minmax(var(--bge-gutter), 1fr)
      [rail-start main-start] minmax(0, var(--bge-measure)) [main-end]
      minmax(var(--bge-gutter), 1fr) [full-end];
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1C — MASTER CONTENT CHOREOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════

   The approved visual system from V2 is frozen. Nothing below reopens the page
   system, container, gutter, TOC width, gap, article measure, direct-answer
   component, breadcrumb behaviour, SHOW ME grammar, card language or type
   hierarchy.

   ── WHY THIS IS ENTIRELY CSS ─────────────────────────────────────────────────
   Manufacturing carries 357 approved sentences, and the copy gate is hard. It
   turns out no markup move is needed: the guide is already semantically
   structured, and the question-module grammar the brief asks for is sitting in
   the class names.

       .bg-ask      x15  the buyer question, with its own label and question
       .bg-show     x8   SHOW ME
       .bg-record   x33  exactllyERP handling, 248 .bg-record-i capability lines
       .bg-check-g  x21  checklist groups, each with a heading and a list
       .bg-proof    x3   evidence and proof
       .bg-principle x8  the operating principle
       #s9 #s18 #s33     the three approved chapter headings

   So the grouping is achieved by styling what is already there. Not one
   sentence is moved, rewritten, shortened or re-parented, which is the only way
   to guarantee 357/357 rather than to hope for it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §3. G1: HERO TO GRID GAP ──────────────────────────────────────────────
   The first band opened 88px below the hero rule, which read as a void before
   the guide began. Brought to 68px, inside the 64-72px band. The rail offset is
   driven by the same token so the two columns cannot fall out of baseline. */
body.bge { --bge-band-top: 68px; }

body.bge .bga-band:first-of-type { padding-top: var(--bge-band-top); }
body.bge .bga-doc > .bg-rail { margin-top: var(--bge-band-top); }

/* ── §4. MANUFACTURING DESKTOP HERO ────────────────────────────────────────
   A balanced composition without touching markup: the hero children are placed
   on an explicit two-column grid, with the signature moved to the right column
   and the rest flowing down the left. Mobile keeps the approved pill row
   exactly as reviewed.

   Only the guide that carries a signature gets the two-column treatment, so G1
   is unaffected. */
@media (min-width: 1024px) {
  body.bge .bga-hero-in:has(.bge-sig) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    column-gap: 56px;
    align-items: start;
  }

  body.bge .bga-hero-in:has(.bge-sig) > .kn-crumb { grid-column: 1 / -1; }

  /* The signature sits in the right column, from the first content row down. */
  body.bge .bga-hero-in:has(.bge-sig) > .bge-sig {
    grid-column: 2;
    grid-row: 2 / span 20;
    align-self: start;
    margin-top: 4px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--br);
    border-top: 2px solid var(--b);
    border-radius: var(--r);
    background: var(--w);
    overflow: hidden;
  }

  body.bge .bga-hero-in:has(.bge-sig) > .bge-sig span {
    background: transparent;
    border: none;
    border-top: 1px solid var(--br);
    border-radius: 0;
    padding: 14px 18px;
    font-size: 11.5px;
    letter-spacing: .085em;
    color: var(--b-dk);
  }

  body.bge .bga-hero-in:has(.bge-sig) > .bge-sig span:first-child { border-top: none; }
}

/* ── §6. CHAPTER MARKERS ───────────────────────────────────────────────────
   The three approved chapter headings become restrained transitions rather than
   another H2 in the run: a small blue rule above, wider air, and the heading
   set in the enterprise chapter voice. White-dominant, no slab. */
body.bge #s9,
body.bge #s18,
body.bge #s33 {
  margin-top: 104px;
  padding-top: 30px;
  border-top: 2px solid var(--b);
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 750;
  letter-spacing: .01em;
  color: var(--t);
}

/* No generated chapter label. The approved headings are sufficient on their
   own; the blue rule and the added air already mark the transition. */

/* ── §5. THE QUESTION MODULE ───────────────────────────────────────────────
   Each of the fifteen buyer questions opens a module. The question itself is
   promoted to the module head — a white card with a blue left edge — so the
   reader can see where one question ends and the next begins. Everything that
   follows is the answer to it, and reads as its body. */
body.bge .bg-ask {
  background: var(--w);
  border: 1px solid var(--b-bd);
  border-left: 3px solid var(--b);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 20px var(--bge-pad);
  margin: 40px 0 22px;
  box-shadow: var(--sh-xs);
}

body.bge .bg-ask-k {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--b);
}

body.bge .bg-ask-q {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.014em;
  color: var(--t);
  margin: 0;
}

/* The operating principle is the direct answer to the question above it, so it
   takes the approved direct-answer treatment. */
body.bge .bg-principle {
  background: var(--b-lt);
  border: 1px solid var(--b-bd);
  border-radius: var(--r);
  padding: 18px var(--bge-pad);
  margin-top: 4px;
}

/* ── §7. EXACTLLYERP HANDLING ──────────────────────────────────────────────
   248 capability lines across 33 records read as a raw dump in one column. The
   record becomes a bordered panel and its lines run in two columns on desktop,
   one on mobile. Every line is kept: this is a column count, not a filter. */
body.bge .bg-record {
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: 18px var(--bge-pad);
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
  align-items: start;
}

body.bge .bg-record-i {
  font-size: 14px;
  line-height: 1.55;
  color: var(--t-m);
  padding-left: 14px;
  position: relative;
}

/* A quiet blue tick rather than a bullet, so a capability line reads as a
   capability rather than as prose. */
body.bge .bg-record-i::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--b-bd);
}

/* ── §8. GROUPED CHECKLIST ─────────────────────────────────────────────────
   The 21 checklist groups already carry a heading and a list each. They become
   cards, two across on desktop and one on mobile. Nothing is hidden: no
   accordion, no progressive disclosure, every item stays in the markup and
   stays crawlable. */
body.bge .bg-check {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

body.bge .bg-check-g {
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: 20px 24px;
  break-inside: avoid;
}

body.bge .bg-check-h {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--br);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--t);
}

/* ── §9. SHOW ME — frozen signature component ──────────────────────────────
   One width, one padding, one blue treatment, one label position, on the
   article measure. Verified identical across all eight instances. */
body.bge .bg-show {
  width: 100%;
  background: var(--b-lt);
  border: 1px solid var(--b-bd);
  border-left: 3px solid var(--b);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--bge-pad);
  margin-top: 20px;
}

body.bge .bg-show-k {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--b-dk);
}

body.bge .bg-show-t {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--t);
  margin: 0 0 10px;
}

body.bge .bg-show-i { font-size: 14.5px; line-height: 1.6; color: var(--t); }

/* ── §9b. STACKED SHOW ME — the eight industry guides ──────────────────────
   The shell gives each SHOW ME row its own grid, `auto minmax(0, 1fr)`. Every
   row is a separate grid, so the auto track resolves against that row's own
   label and a variable-length label drags its description with it. Where the
   labels are uniform this is invisible; where they are scenario titles it is
   not. Measured description-left spread at 1440 before this rule:

     Steel 229px · Transport 194.28px · Manufacturing 169.64px · Edible Oil
     152.14px · Chemical 129.77px · Seeds 126.77px · Cement 117.92px · FMCG
     60.18px

   A shared reserved label track was measured and ruled out. The row content box
   is 684px at 1440 AND at 1280 -- the component sits on the fixed article
   measure, so it does not widen -- and the longest approved label needs
   430.45px on one line, which would leave the description 239.55px. A track
   narrow enough to leave a workable measure wraps most of the labels.

   So the label takes its own row and the description starts at the row content
   left edge: the label cannot influence the description's x at all, rather than
   influencing it consistently. One responsive grammar at every width, rather
   than a layout model that switches at 720px.

   Applied through the .bg-show-stack hook rather than to .bg-show-i globally.
   G1-G7 carry uniform labels, already align at 0px spread, and are visually
   approved on the shell's two-column treatment -- G6's SHOW US component in
   particular. A hook keeps them structurally unreachable, where a body-level
   :has() scope would work only for as long as the industry set and the
   hero-signature set happen to coincide.

   row-gap is held at the 8px the shell already used below 720px, so mobile
   geometry is unchanged and desktop now matches it. Row padding, the blue left
   rail, the white scenario cards and the pale-blue field are untouched. */
body.bge .bg-show-stack .bg-show-i {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 8px;
}

/* fit-content inside its own row, so the pill still hugs its text */
body.bge .bg-show-stack .bg-show-k { justify-self: start; }

/* ── §10. EDGES ────────────────────────────────────────────────────────────*/
@media (max-width: 1023px) {
  body.bge .bg-record,
  body.bge .bg-check { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  body.bge #s9, body.bge #s18, body.bge #s33 { margin-top: 72px; padding-top: 24px; }
  body.bge .bg-ask { padding: 18px var(--bge-pad-m); margin: 32px 0 18px; }
  body.bge .bg-ask-q { font-size: 16px; }
  body.bge .bg-principle,
  body.bge .bg-record,
  body.bge .bg-show { padding: var(--bge-pad-m); }
  body.bge .bg-check-g { padding: 16px 18px; }
}

/* The shell gives each capability line its own bordered box, which read as a
   list in one column but as a chip cloud once the record ran two across. Inside
   a bordered panel the per-item border is redundant, so the line is flattened
   to a blue marker and its text — a capability list, not a tag cloud. */
body.bge .bg-record-i {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2px 0 2px 14px;
  margin: 0;
}

/* As a grid item the eyebrow stretched to the full column. It is a pill, so it
   sizes to its own content. */
@media (min-width: 1024px) {
  body.bge .bga-hero-in:has(.bge-sig) > .slbl,
  body.bge .bga-hero-in:has(.bge-sig) > .bg-tags { justify-self: start; }
}

/* Family-wide internal-padding standard: 24px desktop, 20px mobile. The
   contents card and the checklist groups were below it. */
body.bge .bga-doc > .bg-rail { padding: 16px 24px; }

@media (max-width: 767px) {
  body.bge .bga-doc > .bg-rail { padding: 14px 20px; }
  body.bge .bg-check-g { padding: 16px 20px; }
}

/* §6B. Ordinary list content must not be forced to semibold by component CSS.
   The shell sets .bg-record-i to font-weight 600, which made all 248 capability
   lines read as emphasis and flattened the distinction the markup actually
   draws with <strong>. Normal body weight here; deliberate emphasis in the
   markup is preserved and now visible again. */
body.bge .bg-record-i { font-weight: 400; color: var(--t-m); }
body.bge .bg-record-i strong { font-weight: 650; color: var(--t); }
body.bge .bg-check-l li { font-weight: 400; }
body.bge .bg-check-l li strong { font-weight: 650; color: var(--t); }