/* ============================================================================
   guide2.css — PROTOTYPE ONLY, not production
   Guide 2: Industry-Specific ERP vs Generic ERP

   Layered on main.css + pages/knowledge-article.css + buyer-guide.css.

   buyer-guide.css is NOT modified by this file or by Guide 2. Guide 1 is frozen,
   so every component Guide 2 shares with it is reused verbatim and every
   component Guide 2 needs on its own is defined here under a .g2-* prefix. That
   keeps the shared stylesheet a fixed surface and makes Guide 1 regression a
   matter of proof rather than hope.

   Reused from buyer-guide.css unchanged:
     .bga-hero .bga-doc .bga-band          brand-aligned shell + bands
     .bg-rail .bg-toc .bg-toc-m            contents, desktop and mobile
     .bg-answer                             direct answer
     .bg-tag                                hero audience label
     .bg-role(s)                            long-form flat ruled sections
     .bg-show .bg-ask                       SHOW ME + the recurring question
     .bg-signoff                            responsive two-column decision table
     .bg-check                              checklist
     .bg-principle                          emphasised closing line
     .bg-future .bg-cta .bg-sr h2.bg-rule   series list, CTA, a11y, rhythm
     #main-content:focus                    skip-target ring suppression

   A naming note for whoever formalises this design system: .bg-signoff is the
   generic responsive two-column decision table, and Guide 2 uses it for two
   tables that are not sign-off tables. The rules are right; only the name is
   historical. Renaming it is a shared-CSS change and was therefore deliberately
   not made here.

   Guide 2's editorial position is neutrality, so several rules below exist
   specifically to PREVENT visual bias: the architecture continuum, the four
   delivery modes and the two red-flag sets are all styled so that no member of
   any set looks better or worse than its siblings.
   ============================================================================ */

/* ── Quotations ────────────────────────────────────────────────────────────
   Guide 2 quotes what vendors and buyers actually say, roughly a dozen times.
   Neither main.css nor knowledge-article.css styles <blockquote> at all, so
   this is a genuinely new component rather than a restyle.

   Deliberately not a testimonial treatment. These are things being held up for
   examination, not endorsements, so there is no portrait, no attribution line
   and no decorative quote glyph. */

.kn-article .g2-quote {
  margin: 0 0 22px;
  padding: 16px 20px;
  background: var(--bg-s);
  border-left: 3px solid var(--b-bd);
  border-radius: 0 var(--r) var(--r) 0;
}

.kn-article .g2-quote p {
  font-size: 16.5px !important;
  line-height: 1.6;
  color: var(--t) !important;
  font-weight: 500;
  margin: 0 !important;
}

/* A run of short alternatives quoted back to back (the "where does the logic
   live?" list) reads as one set rather than five separate interruptions. */
.g2-quotes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; }
.g2-quotes .g2-quote { margin: 0; }

/* ── Architecture continuum ────────────────────────────────────────────────
   Five legitimate ERP architectures, from "broad ERP, mostly standard" to
   "core ERP plus a specialist system".

   The hard requirement here is that this must NOT read as a maturity model.
   So: every item has identical weight, background, border and type; the index
   chips are all one neutral colour rather than a ramp; and there are no arrows
   between items. The connecting spine is a plain rule, which groups the five
   as one range of options without implying travel in either direction. */

.kn-article .g2-arch {
  list-style: none;
  margin: 4px 0 18px !important;
  padding: 0 0 0 0 !important;
  display: block;
  border-left: 2px solid var(--br);
}

.kn-article .g2-arch li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 13px 0 13px 20px !important;
  margin: 0;
  font-size: 15.5px !important;
  line-height: 1.6;
  color: var(--t) !important;
}

/* knowledge-article.css paints an ol counter at .kn-article ol li::before
   (specificity 0,1,3), which would sit on top of the chip. */
.kn-article .g2-arch li::before { content: none; }

.kn-article .g2-arch li + li { border-top: 1px solid var(--br); }

.g2-arch-n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--w);
  border: 1px solid var(--b-bd);
  color: var(--b);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* The sentence that stops the list being read as a ranking. */
.kn-article .g2-arch-note {
  font-size: 15.5px !important;
  font-weight: 600;
  color: var(--t) !important;
  background: var(--b-lt);
  border: 1px solid var(--b-bd);
  border-radius: var(--r);
  padding: 12px 18px;
  margin: 0 0 26px !important;
}

/* ── The break-if-removed test ─────────────────────────────────────────────
   A diagnostic the buyer runs on their own process. Panel-bounded so it reads
   as an exercise rather than more prose, but with no alarm colour: the point
   is to find out, not to warn. */

.g2-break {
  border: 1px solid var(--b-bd);
  border-radius: var(--r-l);
  background: var(--w);
  box-shadow: var(--sh-xs);
  padding: 22px 26px 20px;
  margin: 0 0 26px;
}

.kn-article .g2-break > p:first-child { margin-top: 0; }

.kn-article .g2-break-l {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kn-article .g2-break-l li {
  padding: 14px 0 14px 22px !important;
  margin: 0;
  font-size: 15.5px !important;
  line-height: 1.6;
  color: var(--t) !important;
  font-weight: 500;
  border-top: 1px solid var(--br);
  position: relative;
}

.kn-article .g2-break-l li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 10px;
  height: 1px;
  background: var(--b);
  border-radius: 0;
}

/* ── Four delivery modes ───────────────────────────────────────────────────
   Standard / Configuration / Extension or industry application / Custom
   development.

   Guide 1 used three cards and gave the third an emphasis border, because in
   that guide custom development was the thing that costs the buyer later. That
   would be wrong here: Guide 2's argument is explicitly that an extension or a
   custom development is not automatically the worse answer, so all four cards
   share one identical treatment and there is no colour ramp. What differs
   between them is the ownership consequence, which is text, not styling.

   Two by two rather than four across: at a 760px measure four columns leave
   about 175px each, and two of the four carry a list of lifecycle questions. */

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

.g2-mode {
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: var(--w);
  box-shadow: var(--sh-xs);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
}

.g2-mode-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.g2-mode-n {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--bg);
  border: 1px solid var(--br);
  color: var(--t-m);
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.kn-article .g2-mode-k {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--b);
  margin: 0;
}

.kn-article .g2-mode p { font-size: 14.5px !important; line-height: 1.6; }
.kn-article .g2-mode li { font-size: 14px !important; }
.kn-article .g2-mode ul { margin-bottom: 0 !important; }
.kn-article .g2-mode > :last-child { margin-bottom: 0 !important; }

.g2-mode-lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--t-l);
  margin: 14px 0 8px;
}

/* ── Two-part contrast ─────────────────────────────────────────────────────
   "Our industry is different" set against "We have always done it this way",
   and elsewhere what should be common set against what may legitimately
   differ. Both halves get identical chrome: the point of each pair is that the
   two are not the same thing, not that one is correct. */

.g2-contrast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 4px 0 22px;
}

.g2-contrast-c {
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: var(--bg-s);
  padding: 16px 18px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--t);
  font-weight: 500;
}

.g2-contrast-x { color: var(--t-l); font-size: 20px; font-weight: 700; line-height: 1; }

/* When the middle slot carries the approved copy’s own connective rather than a
   symbol, it is content: normal weight, body size, and not aria-hidden. */
.g2-contrast-x.is-word {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--t-m);
  max-width: 120px;
  text-align: center;
}

/* Common vs may-differ: two headed columns, equal weight. */
.g2-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 4px 0 22px; }

.g2-split-c {
  border: 1px solid var(--br);
  border-top: 3px solid var(--b-bd);
  border-radius: var(--r);
  background: var(--w);
  padding: 18px 20px 14px;
}

.kn-article .g2-split-h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--b);
  margin: 0 0 12px;
}

.kn-article .g2-split-c li { font-size: 14.5px !important; }
.kn-article .g2-split-c ul { margin-bottom: 0 !important; }
.kn-article .g2-split-c p { font-size: 14.5px !important; margin-bottom: 0 !important; }

/* ── Red flags, both sides ─────────────────────────────────────────────────
   Two sets, five each. They use ONE class between them, so neither can drift
   into looking more or less alarming than the other: no red on the generic
   list, no soft grey on the industry-specific list. The marker is the same
   neutral rule used elsewhere in the guide. */

.g2-flagset { margin: 4px 0 26px; }

.g2-flag { border-left: 2px solid var(--b-bd); padding: 2px 0 2px 20px; }
.g2-flag + .g2-flag { margin-top: 20px; }

.kn-article .g2-flag-h {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--t);
  margin: 0 0 7px;
}

.kn-article .g2-flag p { font-size: 15px !important; }
.kn-article .g2-flag > :last-child { margin-bottom: 0 !important; }

/* ── Industry-to-proof map ─────────────────────────────────────────────────
   Eight verticals. Two of them have no comparable public reference, and that
   is stated in the same type and the same row treatment as the six that do:
   the editorial point of the section is that relevant evidence beats a pile of
   logos, which only lands if a gap is shown as plainly as a match. */

.g2-proof { margin: 4px 0 22px; border-top: 1px solid var(--br); }

.g2-proof-r {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 4px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--br);
  align-items: baseline;
}

.g2-proof-i { font-size: 14.5px; font-weight: 700; color: var(--t); }

.g2-proof-v { display: flex; flex-wrap: wrap; gap: 8px; }

.g2-proof-v a {
  font-size: 14px;
  font-weight: 600;
  color: var(--b);
  background: var(--b-lt);
  border: 1px solid var(--b-bd);
  border-radius: 999px;
  padding: 4px 12px;
  text-decoration: none;
}

.g2-proof-v a:hover { background: var(--w); }

.g2-proof-none { font-size: 14px; line-height: 1.55; color: var(--t-l); }

/* ── Process chain ──────────────────────────────────────────────
   production, quality, stock, dispatch, invoicing, costing, reporting.

   Arrows are correct here and only here: this is a real sequence in the
   source, not a set of alternatives. The architecture continuum above
   deliberately has none, because those five ARE alternatives.

   Wraps rather than scrolls, and the arrows are decorative so a screen reader
   hears the seven stage names as a plain list. */

.kn-article .g2-chain {
  list-style: none;
  display: flex;
  /* REQUIRED. knowledge-article.css:107 sets flex-direction:column on
     .kn-article ul/ol and wins unless overridden here. Without it the chain
     stacked one stage per line and align-items:center drifted the stages into a
     centred column. flex-wrap:wrap below is retained, so the chain still wraps
     on narrow screens rather than being forced onto one line. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 22px !important;
  padding: 16px 18px !important;
  background: var(--bg-s);
  border: 1px solid var(--br);
  border-radius: var(--r);
}

.kn-article .g2-chain li {
  padding: 0 !important;
  margin: 0;
  font-size: 14.5px !important;
  font-weight: 600;
  color: var(--t) !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kn-article .g2-chain li::before { content: none; }

.g2-chain-a { color: var(--b); font-weight: 700; }

/* ── CTA question ───────────────────────────────────────────────
   The one question the CTA asks the buyer NOT to ask. Sits on the dark band,
   so .g2-quote (which is scoped to .kn-article and uses a light ground) cannot
   be reused. */

.bg-cta .g2-cta-q {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  max-width: 620px;
  margin: 0 auto 18px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .g2-modes { grid-template-columns: minmax(0, 1fr); }
  .g2-split { grid-template-columns: minmax(0, 1fr); }
  /* The contrast pair stacks and the glyph turns, the same way Guide 1's
     weak/strong pair already behaves. */
  .g2-contrast { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .g2-contrast-x { justify-self: center; }
}

@media (max-width: 720px) {
  .g2-break { padding: 18px 18px 16px; }
  .g2-proof-r { grid-template-columns: minmax(0, 1fr); }
  .kn-article .g2-arch li { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding-left: 16px !important; }
  .g2-flag { padding-left: 16px; }
  .kn-article .g2-quote { padding: 14px 16px; }
  .kn-article .g2-quote p { font-size: 15.5px !important; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  .g2-break, .g2-mode, .g2-split-c, .g2-flag, .g2-proof-r { break-inside: avoid; }
  .g2-break { box-shadow: none; }
  .g2-modes { grid-template-columns: repeat(2, 1fr); }
  .g2-proof-v a { background: none; border: 0; padding: 0; }
}


/* ── Ground-aware surfaces on alternate bands ────────────────────────────────
   The brand-aligned shell alternates the body ground between white and
   var(--bg). These four Guide 2 surfaces were designed against white:

     .g2-quote      var(--bg-s)  #FAFBFC on #F7F8FA — no reading
     .g2-mode-n     var(--bg)    identical to the band — invisible
     .g2-contrast-c var(--bg-s)  no reading
     .g2-chain li   var(--bg-s)  no reading

   On an alt band each is lifted to var(--w), keeping the relationship the
   component was designed around — the panel is lighter than its ground — which
   is the production idiom of white cards on a .sec-alt section. Borders and
   border colours are untouched, so the weak/strong and standard/custom
   distinctions each component carries are unaffected.

   Same rule as the shared list in buyer-guide.css, and the same exclusion:
   only surfaces whose ground is the band are lifted. A surface sitting on
   another component keeps its own fill. */

/* SELECTOR CORRECTION (family closure). `.kn-article` was removed from the
   .g2-quote selector: in the aligned shell .kn-article is the grid container and
   .bga-band sits inside it, so .kn-article is an ANCESTOR of the band and the
   old shape could never match. Measured: all 3 alt-band .g2-quote instances sit
   directly on the band at var(--bg-s), d=8.

   The chain rule was RETARGETED rather than merely un-prefixed. It named
   .g2-chain li, but the li carries no background at all — the var(--bg-s)
   surface is the .g2-chain container itself, which also holds the var(--br)
   border. Removing .kn-article alone would have painted seven chain stages
   white and left the panel that actually needs lifting untouched. The container
   is scoped with a child combinator so only a chain whose ground really is the
   band column is lifted. */
.bga-band.is-alt .g2-quote,
.bga-band.is-alt .g2-mode-n,
.bga-band.is-alt .g2-contrast-c,
.bga-band.is-alt > .bga-col > .g2-chain {
  background: var(--w);
}