/* ============================================================================
   guide4.css — PROTOTYPE ONLY, not production
   Guide 4: ERP Pricing, Licensing & 3–5 Year TCO

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

   buyer-guide.css is NOT modified. The Buyer Guide page system is frozen, so
   every shared component is reused verbatim and everything Guide 4 needs on its
   own lives here under a .g4-* prefix. All six Guide 1-3 files are asserted by
   SHA-256 in this guide's QA, so a shared regression cannot pass unnoticed.

   Guide 4 loads neither guide2.css nor guide3.css. A little CSS is duplicated
   between the three (blockquote treatment, the red-flag list) as the deliberate
   price of keeping four prototypes independent: a change to one must never be
   able to move another.

   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 .bg-tag                     direct answer + hero label
     .bg-pair                               the do-not-ask / ask contrast
     .bg-show .bg-ask                       SHOW ME + the prominent question
     .bg-check                              checklist
     .bg-principle .bg-record               emphasis + chip set
     .bg-vendor                             restrained Exactlly band
     .bg-future .bg-cta .bg-sr h2.bg-rule   series list, CTA, a11y, rhythm
     .kn-def .kn-note .kn-next              knowledge-article idioms
     #main-content:focus                    skip-target ring suppression

   Reused from the PRODUCTION knowledge-article stylesheet, read-only:
     .kn-table-wrap .kn-table               the established scrollable wide
                                            table. Guide 4's two worksheets are
                                            6 and 4 columns wide, and this is
                                            already the site's idiom for that,
                                            so only a min-width modifier is
                                            added below rather than a new
                                            component.

   Guide 4 is a commercial guide, which creates a specific risk: cost content
   drifts easily into scare tactics or into implying one licence model is
   cheaper. Several rules below exist to prevent that. Nothing in this file
   carries an alarm or a success colour, the three risk-allocation modes are
   styled identically, and the two licence models are styled identically.
   ============================================================================ */

/* ── Contents rail overflow ────────────────────────────────────────────────
   Guide 4 has 25 sections, the most in the programme. At the shared 196px rail
   width the list runs well past a laptop viewport, so a sticky rail would clip
   its own tail with no way to reach it.

   Scoped to this page only, exactly as Guide 3 does: buyer-guide.css is
   untouched and Guides 1 and 2 keep the shared behaviour. */

/* ── Contents rail overflow — NOW SHARED ───────────────────────────────────
   This guide previously carried its own scoped rail scroll box because
   buyer-guide.css was frozen. The brand-aligned shell provides it for the
   whole family on .bga-doc > .bg-rail, so the duplicate here is removed:
   four guides were maintaining the same four declarations. Nothing about the
   behaviour changes — the shared rule is the same scroll box, and the rail is
   display:none below 1199px, so the media override went with it. */

/* ── Quotations ────────────────────────────────────────────────────────────
   The approved copy quotes the questions a buyer should and should not ask
   about twenty times. Nothing in main.css or knowledge-article.css styles
   <blockquote>. */

.kn-article .g4-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 .g4-quote p {
  font-size: 16.5px !important;
  line-height: 1.6;
  color: var(--t) !important;
  font-weight: 500;
  margin: 0 !important;
}

/* The question the buyer should ask instead of the one being set aside. */
.kn-article .g4-quote.is-key { background: var(--b-lt); border-left-color: var(--b); }

.g4-quotes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; }
.g4-quotes .g4-quote { margin: 0; }

/* ── Paired panels ─────────────────────────────────────────────────────────
   Used for perpetual against subscription, the two same-period cost profiles,
   and TCO against ROI. Both halves always get identical chrome: this guide
   must never suggest that one licence model is the cheaper one. */

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

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

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

.kn-article .g4-two-c p { font-size: 14.5px !important; }
.kn-article .g4-two-c li { font-size: 14.5px !important; }
.kn-article .g4-two-c ul,
.kn-article .g4-two-c ol { margin-bottom: 0 !important; }
.kn-article .g4-two-c > :last-child { margin-bottom: 0 !important; }

/* A sub-label inside a panel: the Year 1 / Years 2-5 split. */
.g4-sub {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--t-l);
  margin: 14px 0 8px;
}

/* ── Three-part neutral sets ───────────────────────────────────────────────
   Fixed price / estimate / time-and-material, and one-time / recurring /
   variable. Identical chrome across all three members in both cases: the
   approved copy is explicit that no risk-allocation model is superior. */

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

.g4-three-c {
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: var(--w);
  box-shadow: var(--sh-xs);
  padding: 18px 18px 16px;
}

.kn-article .g4-three-k {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--b);
  margin: 0 0 10px;
}

.kn-article .g4-three-c p { font-size: 14.5px !important; }
.kn-article .g4-three-c li { font-size: 14px !important; }
.kn-article .g4-three-c ul { margin-bottom: 0 !important; }
.kn-article .g4-three-c > :last-child { margin-bottom: 0 !important; }

/* ── Deployment is not licensing ───────────────────────────────────────────
   Guide 3 owns this argument and gives it a full section with two large
   panels. Guide 4 only needs the principle before returning to commercial
   analysis, so this is a deliberately compact single band rather than a copy
   of Guide 3's layout. */

.g4-sep {
  border: 1px solid var(--b-bd);
  border-radius: var(--r);
  background: var(--w);
  margin: 4px 0 18px;
}

.g4-sep-r {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 18px;
  align-items: baseline;
}

.g4-sep-r + .g4-sep-r { border-top: 1px solid var(--br); }

.g4-sep-k {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--b);
}

.g4-sep-v { font-size: 15px; line-height: 1.55; color: var(--t); font-weight: 500; }

/* The two equations the buyer must NOT make. Dashed, muted and clearly set
   apart from the definitions above so they cannot be read as statements. */
.g4-eqs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }

.g4-eq {
  flex: 1 1 220px;
  border: 1px dashed var(--br);
  border-radius: var(--r);
  background: var(--bg-s);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--t-m);
  text-align: center;
}

/* ── Pre-quotation scope worksheet ─────────────────────────────────────────
   Eight things the buyer defines once and sends to every vendor. A ruled
   worksheet rather than eight cards: the brief is explicit that this should
   feel like a sheet to fill in, and eight cards would triple its height. */

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

.g4-scope-i {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 6px 22px;
  padding: 15px 0;
  border-bottom: 1px solid var(--br);
}

.kn-article .g4-scope-h {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--t);
  margin: 0;
}

.kn-article .g4-scope-i p { font-size: 14.5px !important; margin-bottom: 8px !important; }
.kn-article .g4-scope-i li { font-size: 14.5px !important; }
.kn-article .g4-scope-i ul { margin-bottom: 0 !important; }
.kn-article .g4-scope-i > div > :last-child { margin-bottom: 0 !important; }

/* ── Headcount against simultaneous use ────────────────────────────────────
   The commercial distinction the whole licensing section turns on.

   Deliberately NOT an Exactlly component: this is general buyer education and
   Exactlly is not named anywhere in the section. The two panels are styled
   identically, because neither headcount nor concurrency is the "right"
   number to buy on: the point is that they are different questions. */

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

.g4-access-c {
  border: 1px solid var(--b-bd);
  border-radius: var(--r-l);
  background: var(--w);
  box-shadow: var(--sh-xs);
  padding: 20px 22px 18px;
}

.g4-access-k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--b);
  margin-bottom: 6px;
}

/* The question itself, verbatim from the approved copy. A paragraph rather than
   a heading: these are long questions and turning them into H3s would inflate
   the document outline for no navigational gain. */
.kn-article .g4-access-q {
  font-size: 16.5px !important;
  font-weight: 700;
  line-height: 1.5;
  color: var(--t) !important;
  margin: 0 !important;
}

/* The licence concepts a product MAY distinguish. Chips, because the approved
   copy is explicit that not every ERP uses all of them: a list would imply a
   standard set. */
.g4-models { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }

.g4-model {
  font-size: 14px;
  font-weight: 600;
  color: var(--t);
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: 9px 14px;
}

/* ── Exclusions ───────────────────────────────────────────────────────────
   "An exclusion list is often more useful than the inclusion list." Given its
   own bounded panel because it is the part buyers skip. */

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

.kn-article .g4-excl > :first-child { margin-top: 0; }
.kn-article .g4-excl > :last-child { margin-bottom: 0 !important; }
.kn-article .g4-excl li { font-size: 15px !important; }

/* ── Full ERP cost map ─────────────────────────────────────────────────────
   Ten categories. A compact numbered framework rather than ten cards, as the
   brief requires: ten equal cards at this measure would add roughly two
   screens and read as a price list. */

.g4-costmap { margin: 4px 0 22px; }

.g4-cost {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--br);
}

.g4-cost:last-child { border-bottom: 1px solid var(--br); }

.g4-cost-n {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--b-lt);
  border: 1px solid var(--b-bd);
  color: var(--b);
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 1px;
}

.kn-article .g4-cost-h { font-size: 15.5px; font-weight: 700; color: var(--t); margin: 0 0 8px; }
.kn-article .g4-cost p { font-size: 14.5px !important; }
.kn-article .g4-cost li { font-size: 14.5px !important; }
.kn-article .g4-cost ul { margin-bottom: 0 !important; }
.kn-article .g4-cost > div > :last-child { margin-bottom: 0 !important; }

/* Category 8 is the one buyers discount because no invoice arrives for it, so
   the economic-cost point is given its own emphasis inside the row. */
.kn-article .g4-cost-note {
  background: var(--bg-s);
  border-left: 3px solid var(--b-bd);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 12px 16px;
  margin: 12px 0 0 !important;
  font-size: 14.5px !important;
  font-weight: 600;
  color: var(--t) !important;
}

/* ── Worksheet tables ──────────────────────────────────────────────────────
   The 3-5 year TCO model (6 columns) and the quote-normalisation sheet
   (4 columns, 21 rows). Both are EMPTY grids the buyer fills in, so the grid
   itself is the content: reflowing them into stacked labelled cells would
   produce 60 and 63 empty labelled boxes, which is unusable.

   They therefore use the production .kn-table-wrap scroll container, which is
   already the site's idiom for a wide table, with only a min-width modifier
   here. The page never scrolls horizontally; the table scrolls inside its own
   bordered region.

   No illustrative values are inserted. There are no sample amounts anywhere in
   this guide. */

.kn-table.g4-tco { min-width: 660px; }
.kn-table.g4-qn { min-width: 620px; }

.kn-article .g4-tco th, .kn-article .g4-tco td,
.kn-article .g4-qn th, .kn-article .g4-qn td { font-size: 14px; }

/* The production .kn-table draws only horizontal rules, which is right for a
   prose table but wrong for a worksheet: with every cell empty, the five year
   columns rendered as one merged grey block and a buyer could not see where
   Year 1 ended and Year 2 began. Vertical separators are added for these two
   tables only. */
.kn-article .g4-tco th + th, .kn-article .g4-tco td,
.kn-article .g4-qn th + th, .kn-article .g4-qn td { border-left: 1px solid var(--br); }

/* Empty worksheet cells need to read as fillable rather than as missing data. */
.kn-article .g4-tco tbody td,
.kn-article .g4-qn tbody td { background: var(--bg-s); min-width: 74px; }

.kn-article .g4-tco tbody th,
.kn-article .g4-qn tbody th { font-weight: 600; color: var(--t); background: var(--w); }

/* The Total row closes the model, so it is the one row that carries weight. */
.kn-article .g4-tco tbody tr.g4-total th,
.kn-article .g4-tco tbody tr.g4-total td { font-weight: 700; color: var(--t); background: var(--bg); }

/* ── Commercial red flags ──────────────────────────────────────────────────
   Nine flags. The same restrained treatment proven in Guides 2 and 3: a left
   rule, no red, no icon. A cost guide is the easiest place to slip into scare
   tactics, so the styling deliberately gives it none of that vocabulary. */

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

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

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

.kn-article .g4-flag p { font-size: 15px !important; }
.kn-article .g4-flag li { font-size: 15px !important; }
/* Only the LAST child loses its bottom margin. Applying it to every paragraph
   left the "Unlimited what?" lead-in flush against its own list, which read as
   a rendering fault next to the evenly spaced flags around it. */
.kn-article .g4-flag > :last-child { margin-bottom: 0 !important; }

/* ── Wide-table containment ──────────────────────────────────────
   Guide 4 is the first guide in the programme to carry a table wider than the
   reading column, and that exposed a real defect.

   .kn-article is a grid item of .bg-shell, so its default min-width:auto makes
   its minimum size content-based. The two worksheets set a min-width, and that
   propagated out through .kn-table-wrap and forced the entire article column to
   662px at a 390px viewport: every paragraph on the page was 296px too wide,
   not only the tables. Measured before the fix: body.scrollWidth 686 against a
   390px viewport, with article.kn-article the shallowest overflowing element.

   min-width:0 alone did NOT fix it. .kn-article also carries
   margin-left/right:auto from knowledge-article.css, and auto margins disable
   a grid item’s stretch alignment: the item is then shrink-to-fit, sized from
   its own min-content, which the table drives. width:100% makes it fill its
   track again, and the table then scrolls inside its own wrapper as intended.

   Verified by measurement at every width, not by reasoning alone.

   Scoped here rather than added to buyer-guide.css. It is really a property of
   the shell plus any wide table, so it is a candidate for promotion to the
   shared stylesheet the next time a guide needs one; that would be a shared
   change and is therefore not made unilaterally.

   RETARGETED for the brand-aligned shell, and still Guide-4-only. The reading
   column is now .bga-col inside .bga-doc rather than .kn-article inside
   .bg-shell, so the old selector would have matched nothing. .bga-col is a
   plain grid item with no auto margins, so it already stretches; the two
   declarations are kept explicit because the failure they prevent was a
   whole-page overflow, not a table one, and a future component that reintroduces
   auto margins would bring it straight back. Verified by measurement after the
   aligned shell was applied: no overflow at 1440, 1280, 768 or 390. */

.bga-doc .bga-col { min-width: 0; width: 100%; }
.kn-article .kn-table-wrap { max-width: 100%; }

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

@media (max-width: 1199px) {
}

@media (max-width: 860px) {
  .g4-two, .g4-access { grid-template-columns: minmax(0, 1fr); }
  .g4-three { grid-template-columns: minmax(0, 1fr); }
  .g4-scope-i { grid-template-columns: minmax(0, 1fr); }
  .g4-sep-r { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

@media (max-width: 720px) {
  .g4-excl { padding: 18px 18px 16px; }
  .kn-article .g4-quote { padding: 14px 16px; }
  .kn-article .g4-quote p { font-size: 15.5px !important; }
  .g4-flag { padding-left: 16px; }
  .g4-eq { flex: 1 1 100%; }
  .g4-cost { gap: 12px; }
}

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

@media print {
  .bg-rail { display: none !important; }
  .g4-two-c, .g4-three-c, .g4-access-c, .g4-excl, .g4-cost, .g4-flag,
  .g4-scope-i { break-inside: avoid; }
  .g4-access-c, .g4-excl, .g4-three-c { box-shadow: none; }
  .g4-two, .g4-access { grid-template-columns: repeat(2, 1fr); }
  .g4-three { grid-template-columns: repeat(3, 1fr); }
  /* The two worksheets are the pages a buyer takes into a meeting, so they
     print in full rather than scrolling. */
  .kn-table-wrap { overflow: visible !important; }
  .kn-table.g4-tco, .kn-table.g4-qn { min-width: 0 !important; font-size: 10px; }
}


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

     .g4-quote      var(--bg-s)  no reading on an alt band
     .g4-eq         var(--bg-s)  no reading
     .g4-cost-note  var(--bg-s)  no reading

   The two worksheets need a different treatment. .g4-tco and .g4-qn each carry
   THREE internal fills that encode meaning — tbody th var(--w) for the row
   label, tbody td var(--bg-s) for an input cell, and tr.g4-total var(--bg) for
   a total row. Lifting any one of them to white would collapse a distinction
   the worksheet depends on. Instead the table itself takes a white ground on an
   alt band, so all three fills keep the exact relationships they were designed
   with and the worksheet renders identically on either band. */

/* SELECTOR CORRECTION (family closure). `.kn-article` was removed from the
   .g4-cost-note selector, which could never match: .kn-article is the grid
   container and therefore an ANCESTOR of .bga-band, not a descendant.

   .g4-quote is GUARDED rather than merely un-prefixed. Its three alt-band
   instances are two nested inside a painted white .g4-two-c panel — where a
   lift to var(--w) would make them white-on-white — and one .is-key quotation
   carrying var(--b-lt), whose blue this rule would otherwise override. The
   child combinator plus :not(.is-key) therefore matches none of the three
   today, which is the correct outcome: none of them needs lifting. It stays as
   insurance for a quote that later sits directly in an alt band column. */
.bga-band.is-alt > .bga-col > .g4-quote:not(.is-key),
.bga-band.is-alt > .bga-col > .g4-quotes > .g4-quote:not(.is-key),
.bga-band.is-alt .g4-eq,
.bga-band.is-alt .g4-cost-note {
  background: var(--w);
}

/* SELECTOR CORRECTION (family closure): `.kn-article` removed, same reason.
   Both worksheets currently fall on white bands, so this rule is insurance
   rather than something in effect today — but it could not have worked at all
   in its previous shape. */
.bga-band.is-alt .g4-tco,
.bga-band.is-alt .g4-qn {
  background: var(--w);
}