/* ============================================================================ buyer-guide.css — PROTOTYPE ONLY, not production Layered on top of main.css + pages/knowledge-article.css. The Buyer Guide is a longer, more structured surface than a knowledge article: it carries decision frameworks, comparison sets and a checklist a buyer may print. So it keeps the knowledge article's reading column, hero, callout, table and next-card idioms and adds only the components that column genuinely cannot express. Every value below is a main.css token. No new colour, radius or shadow is invented, and no component is introduced that an existing .kn-* class already covers. Naming: .bg-* (buyer guide). Chosen because .kn-* is production-owned and a prototype must not risk colliding with it. A note on component weight. Several sections carry three to five paragraphs of reasoning each — the roles, the three buying situations and the seven evaluation dimensions. Boxing prose of that length produces a page of stacked cards that is harder to read than plain text, so those three sections use flat, ruled blocks: distinguishable, but still a reading column. Card chrome is reserved for the genuinely short, genuinely parallel sets (standard/configuration/custom, the three priorities, the demo scenarios) where it earns its keep. ============================================================================ */ /* ── Two-column shell with a sticky contents rail ─────────────────────────── The guide is long enough that a reader needs to know where they are. On desktop the rail sits beside the reading column; the column keeps the same 760px measure the knowledge articles use, so type length is unchanged and the two page types read identically. Below 1080px the rail becomes a collapsible summary above the article rather than a floating panel, because a sticky sidebar on a narrow screen costs more than it returns. */ /* Three tracks, with the reading column dead centre and the rail in the left margin. The first attempt put the rail and the article in a two-track grid, which centred the PAIR: the article landed 146px right of the hero H1 and the CTA, so the page visibly stepped sideways between the hero and the body. An empty third track of equal width keeps the 760px column in the same place as .kn-hero-inner and .bg-cta-in, which are both centred at 760px. No offsets and no negative margins: the side tracks are 1fr, so they stay equal at any width and the column cannot drift. SUPERSEDED by the brand-aligned shell below, which keeps the same 196/760/196 geometry but expresses it as one document grid so full-viewport bands and a persistent rail can coexist. .bg-shell is no longer used by any guide. */ /* ════════════════════════════════════════════════════════════════════════════ BRAND-ALIGNED SHELL Applied family-wide after the Buyer Guide Brand Alignment prototype was approved. The principle: SAME EXACTLLY WEBSITE + SPECIALISED LONG-FORM BUYER GUIDE. A visitor arriving from the homepage or the product page should not cross a visual boundary; a buyer reading 4,000 words should still get a reading column, a contents rail and the answer-first system. Every value is taken from current production CSS, not invented: .wrap max-width 1200px, padding 0 24px main.css:58 .sec padding 88px 0 main.css:59 .sec-alt padding 88px 0; background var(--bg) main.css:60 .sec-cta/-blue padding 88px 0; background var(--b) main.css:61-62 responsive 88 → 64/56 (≤1023) → 56/48 (≤767) main.css:231, 255 .sec-hd-p max-width 720px, centred main.css:71 .h1 clamp(34px,4.4vw,54px)/1.1/-.03em main.css:44 .slbl 11px/700/.07em pill, --b-lt on --b-bd main.css:163-167 .body 16px/1.65, var(--t-m) main.css:50 .card radius var(--r), 1px --br, --sh-s main.css:172-174 Production CSS is read-only: nothing here edits main.css or knowledge-article.css, and no prototype style moves into assets/. ════════════════════════════════════════════════════════════════════════════ */ /* ── Hero ─────────────────────────────────────────────────────────────────── Derived from the common grammar of all three outside-facing heroes: white ground, production .wrap container, content flush to the site content edge, a .slbl pill, the production .h1, and a deck at production .body size. Home and Product add a 48px grid and a right-hand product visual; Industries — the one text-only production hero — uses a plain white ground with no gradient and no artwork. A Buyer Guide has no product visual, so Industries is the precedent and the grid is not borrowed: on a text page it reads as product-page texture behind prose. No bottom border. Production heroes have none, and adding one merely to replace the removed colour band would reintroduce the seam. The ground change of the first body band does the separating — exactly the homepage hero → .sec-alt transition. */ .bga-hero { background: var(--w); padding: 64px 0 72px; } /* Flush left in .wrap, so the hero starts at the same content edge as every production hero rather than 196px inboard of it. */ .bga-hero-in { max-width: none; margin: 0; } .bga-hero .kn-crumb { margin-bottom: 22px; } /* The eyebrow uses the production .slbl class in the markup itself, so no Buyer Guide eyebrow rule is needed at all. This only tightens the gap to the H1, since .slbl carries margin-bottom:16px for use above a section heading. */ .bga-hero .slbl { margin-bottom: 18px; } /* H1 uses the production .h1 class directly — clamp(34px,4.4vw,54px), weight 800, line-height 1.1, letter-spacing -.03em. Only the measure is set, so a long guide title wraps like a heading rather than a paragraph. */ .bga-hero .h1 { max-width: 20ch; margin: 0 0 18px; color: var(--t); text-wrap: balance; } /* Deck at production .body values rather than the knowledge template's 17px, at a production-hero measure. */ .bga-deck { font-size: 16px; line-height: 1.65; color: var(--t-m); max-width: 660px; margin: 0; } .bga-hero .bg-tags { margin-top: 24px; } /* ── Document grid ────────────────────────────────────────────────────────── One grid for the whole guide body, so that two things can be true at once: · background bands span the full viewport, which is how every production section behaves — a full-width
with .wrap inside; · one contents rail stays sticky across every band. The rail and the band stack are both placed explicitly in row 1 and are allowed to overlap: the rail sits in the rail column, the band stack spans the full width, and band backgrounds therefore run behind the rail column as a real full-bleed band should. Because both are explicitly placed, no auto-placement can push them apart — and no 100vw, no subgrid and no negative margins are involved, so there is nothing to leak horizontally. Track sizes reproduce the previously measured layout exactly: 24px minimum gutter, 196px rail, 760px reading column, 196px right column — 1152px of content centred, which is the 1200px .wrap minus its 2 × 24px padding. The rail stays at x137 and the reading column at x333 at 1440px. */ .bga-doc { --bga-tracks: [full-start] minmax(24px, 1fr) [rail-start] minmax(0, 196px) [main-start] minmax(0, 760px) [main-end] minmax(0, 196px) minmax(24px, 1fr) [full-end]; display: grid; grid-template-columns: var(--bga-tracks); /* .kn-article's own 760px max-width and auto margins would otherwise fight the grid; the class is retained on this element so every .kn-article descendant typography rule still applies to the content inside. */ max-width: none; margin: 0; min-width: 0; } .bga-doc > .bg-rail { grid-column: rail-start / main-start; grid-row: 1; align-self: start; position: sticky; top: 90px; /* 66px header + 24px, matching .kn-article scroll-margin-top */ z-index: 2; padding-right: 44px; max-height: calc(100vh - 122px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .bga-bands { grid-column: full-start / full-end; grid-row: 1; min-width: 0; } /* ── Semantic chapter bands ───────────────────────────────────────────────── The outside-facing site changes ground every 616–782px. A guide cannot do that without becoming a zebra, so bands group whole semantic chapters: the ground changes where the guide's argument moves on, never at every H2. Two grounds only, both production tokens, in the production alternation: white (.sec) and var(--bg) (.sec-alt). Padding is the exact production section padding, so two adjacent bands give the same 176px chapter break that two adjacent production sections give. No band is a card, nothing is zebra-striped, and no chapter label is invented — each band is headed by the guide's own first H2. */ .bga-band { display: grid; grid-template-columns: var(--bga-tracks); padding: 88px 0; } .bga-band.is-alt { background: var(--bg); } .bga-band > .bga-col { grid-column: main-start / main-end; min-width: 0; } /* The first heading in a band needs no top rule: the ground change already separates the chapter, and .bg-rule's border would draw a line immediately under a colour change. */ .bga-doc .bga-col > h2.bg-rule:first-child, .bga-doc .bga-col > *:first-child > h2.bg-rule:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .bga-doc .bga-col > *:first-child { margin-top: 0; } .bga-doc .bga-col > *:last-child { margin-bottom: 0; } /* ── Ground-aware component surfaces ──────────────────────────────────────── A var(--bg) band makes five shared component surfaces ambiguous, because they were all designed against a white ground: .bg-signoff thead th var(--bg) identical to the band — invisible .bg-pair-c var(--bg-s) #FAFBFC on #F7F8FA — no reading .bg-dimx .bg-deeper var(--bg-s) no reading .bg-show-i var(--bg-s) no reading .bg-future-k var(--bg-s) no reading On an alt band each is lifted to var(--w). That keeps the relationship the component was designed around — the panel is lighter than its ground — and it is the production idiom exactly: white cards on a .sec-alt section. Borders, border colours and the .is-strong shadow are untouched, so no component loses a distinction it was carrying. .bg-signoff tbody th is deliberately NOT in this list. Below 720px the sign-off table reflows and each row becomes a white card, so that cell's ground is the row, not the band; its var(--bg) fill is what separates the row's header cell from the row's body cells. Lifting it to white erased that distinction — caught by QA on Guide 6 at 390px during the prototype. Any surface whose ground is another component, rather than the band, must be left alone. Guide-specific equivalents live in each guideN.css. */ .bga-band.is-alt .bg-signoff thead th, .bga-band.is-alt .bg-pair-c, .bga-band.is-alt .bg-dimx .bg-deeper, .bga-band.is-alt .bg-show-i, .bga-band.is-alt .bg-future-k { background: var(--w); } /* ── Contents rail ───────────────────────────────────────────────────────── Kept as a functional long-form feature, but reduced to site chrome: the heading takes the production .slbl type scale without the pill, and the list keeps a single hairline in var(--br) — the same border the production .card uses — instead of reading as an application sidebar. */ .bg-rail-h { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--t-l); margin: 0 0 14px; } .bg-toc { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--br); } .bg-toc li { margin: 0; } .bg-toc a { display: block; font-size: 13px; line-height: 1.5; color: var(--t-m); text-decoration: none; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; transition: color .15s, border-color .15s; } .bg-toc a:hover { color: var(--b); border-left-color: var(--b-bd); } /* Mobile contents: a native
, so it works with no JavaScript at all and is keyboard- and screen-reader-correct by default. */ .bg-toc-m { display: none; margin: 0 0 32px; } /* Contents is navigation, not content. It previously used the same recipe as the direct answer — var(--b-lt) on var(--b-bd) at radius var(--r) — so on a band the two sat adjacent and read as a pair of matching tinted blocks. White on var(--br) keeps var(--b-lt) meaning one thing on the page: "this is the answer". */ .bg-toc-m > summary { cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t); background: var(--w); border: 1px solid var(--br); border-radius: var(--r); padding: 12px 16px; list-style: none; } .bg-toc-m > summary:hover { color: var(--b); border-color: var(--b-bd); } .bg-toc-m > summary::-webkit-details-marker { display: none; } .bg-toc-m > summary::after { content: " +"; font-weight: 800; } .bg-toc-m[open] > summary::after { content: " −"; } .bg-toc-m .bg-toc { border-left: 0; border: 1px solid var(--br); border-top: 0; border-radius: 0 0 var(--r) var(--r); padding: 6px 16px 10px; } .bg-toc-m .bg-toc a { border-left: 0; padding-left: 0; } /* ── Direct answer ───────────────────────────────────────────────────────── The single most extractable element on the page: one labelled block, one self-contained answer, no surrounding qualification. Deliberately built from a label plus a paragraph rather than a bare styled div, so the answer keeps its meaning with styling disabled and to a screen reader. */ /* Re-chromed to the production card scale: radius var(--r) rather than var(--r-l), a single 1px var(--b-bd) hairline rather than a 3px coloured top bar, no lifted shadow, and the production .cp padding. The var(--b-lt) ground is the same token the production .slbl pill and .ibox use, so the block reads as site furniture rather than as a marketing card — and it remains the article's lead, which is why no p.kn-lead was introduced. */ .bg-answer { background: var(--b-lt); border: 1px solid var(--b-bd); border-radius: var(--r); box-shadow: none; padding: 24px 26px; margin: 0 0 30px; } .bg-answer-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--b); margin-bottom: 12px; } .bg-answer p { font-size: 17px !important; line-height: 1.68 !important; color: var(--t) !important; margin-bottom: 0 !important; } /* ── Hero audience label ────────────────────────────────────────────────── One label, not three. The approved deck already states what the guide covers and where it starts, so further pills only restated the sentence directly above them. What the deck does not say is who the guide is addressed to, so that is the one thing left here. */ .bg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .bg-tag { font-size: 12px; font-weight: 600; color: var(--t-m); background: var(--w); border: 1px solid var(--br); border-radius: 999px; padding: 5px 13px; } /* ── The three buying situations ─────────────────────────────────────────── Each situation carries three to four paragraphs of reasoning. A flat, ruled block with a numbered anchor: the reader still sees three distinct cases, but the prose is not squeezed into card padding. */ .bg-sit { margin: 4px 0 26px; } .bg-sit-i { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; border-left: 2px solid var(--b-bd); padding: 2px 0 2px 22px; } .bg-sit-i + .bg-sit-i { margin-top: 28px; } .bg-sit-n { width: 30px; height: 30px; border-radius: 50%; background: var(--b-lt); border: 1px solid var(--b-bd); color: var(--b); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 3px; } .kn-article .bg-sit-h { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--t); margin: 5px 0 10px; } .bg-sit-i p { font-size: 15.5px; } .bg-sit-i p:last-child { margin-bottom: 0; } /* ── Scope definition list ──────────────────────────────────────────────── Eight scope questions. A real
: the term genuinely defines the question, and a two-column definition layout reads faster than eight bolded paragraphs. */ .bg-scope { display: grid; grid-template-columns: 190px minmax(0, 1fr); margin: 0 0 26px; border-top: 1px solid var(--br); } .bg-scope dt { font-size: 14.5px; font-weight: 700; color: var(--t); padding: 14px 20px 14px 0; border-bottom: 1px solid var(--br); } .bg-scope dd { font-size: 14.5px; line-height: 1.6; color: var(--t-m); margin: 0; padding: 14px 0; border-bottom: 1px solid var(--br); } /* ── Decision roles ─────────────────────────────────────────────────────── Seven roles, several with a list of eight to ten specific things that role should test. Single file, left-ruled. Two columns were tried and rejected: the CEO block runs to five bullets and the CIO block to ten, so the columns ended badly unbalanced and the eye had to jump between them. */ .bg-roles { margin: 4px 0 26px; } .bg-role { border-left: 2px solid var(--br); padding: 2px 0 2px 22px; } .bg-role + .bg-role { margin-top: 26px; } .kn-article .bg-role-n { font-size: 16px; font-weight: 700; color: var(--b); letter-spacing: .01em; margin: 0 0 10px; } .bg-role p { font-size: 15.5px; } .bg-role ul { margin-bottom: 14px !important; } .bg-role li { font-size: 15px !important; } .bg-role > :last-child { margin-bottom: 0 !important; } /* ── Before / after requirement pair ────────────────────────────────────── Weak requirement on the left, testable outcome on the right. The arrow is decorative and hidden from assistive technology; the two cells carry their own labels so the contrast survives without it. */ .bg-pair { display: flex; flex-direction: column; gap: 12px; margin: 0 0 26px; } .bg-pair-r { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; } .bg-pair-c { border: 1px solid var(--br); border-radius: var(--r); padding: 14px 16px; background: var(--bg-s); } .bg-pair-c.is-strong { background: var(--w); border-color: var(--b-bd); box-shadow: var(--sh-xs); } .bg-pair-k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-l); margin-bottom: 6px; } .bg-pair-c.is-strong .bg-pair-k { color: var(--b); } .bg-pair-t { display: block; font-size: 14.5px; line-height: 1.55; color: var(--t); } .bg-pair-a { color: var(--b); font-size: 18px; line-height: 1; } /* ── Three-part comparison: standard / configuration / custom ───────────── Three short definitions genuinely are parallel and short, so this one is a real three-column set. The third column carries the emphasis border because custom development is the decision that costs the buyer later. */ .bg-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 24px; } .bg-trio-c { border: 1px solid var(--br); border-radius: var(--r); padding: 18px 18px 16px; background: var(--w); box-shadow: var(--sh-xs); } .bg-trio-c.is-warn { border-color: var(--b-bd); background: var(--b-lt); } .kn-article .bg-trio-k { display: block; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--b); } .bg-trio-c p { font-size: 14.5px; line-height: 1.6; margin-bottom: 0; } /* ── Priority framework ──────────────────────────────────────────────────── */ .bg-prio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 26px; } .bg-prio-c { border: 1px solid var(--br); border-radius: var(--r); padding: 16px 16px; background: var(--w); } .bg-prio-n { display: block; font-size: 14px; font-weight: 800; color: var(--t); margin-bottom: 5px; } .bg-prio-d { display: block; font-size: 13.5px; line-height: 1.55; color: var(--t-m); } /* ── The seven evaluation dimensions ────────────────────────────────────── The longest section in the guide: each dimension carries its own questions, and four of the seven point at a companion guide. Numbered sections divided by a rule, not seven cards — seven cards at this measure added roughly a screen and a half and read as a feature grid, which is the opposite of what the section argues. */ .bg-dimlist { margin: 4px 0 26px; } .bg-dimx { padding: 0; } .bg-dimx + .bg-dimx { border-top: 1px solid var(--br); margin-top: 30px; padding-top: 28px; } .kn-article .bg-dimx-h { display: flex; align-items: center; gap: 12px; font-size: 17.5px; font-weight: 700; line-height: 1.35; color: var(--t); margin: 0 0 12px; } .bg-dimx-n { font-size: 12.5px; font-weight: 800; color: var(--b); background: var(--b-lt); border: 1px solid var(--b-bd); border-radius: 6px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; flex: none; } .bg-dimx p { font-size: 15.5px; } .bg-dimx li { font-size: 15px !important; } /* A pointer to the companion guide for a dimension. Not an anchor: the guide it names is not published, and a prototype must not manufacture a URL that would 404. The status is stated in words instead of implied by a broken link, so a reader knows what they are being promised. */ .bg-dimx .bg-deeper { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; background: var(--bg-s); border: 1px solid var(--br); border-radius: var(--r); padding: 12px 16px; margin: 18px 0 0 !important; font-size: 14.5px !important; line-height: 1.5; color: var(--t) !important; font-weight: 600; } .bg-deeper-k { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--b); flex: none; } .bg-deeper-t { flex: 1 1 auto; min-width: 0; } .bg-deeper-s { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t-l); background: var(--w); border: 1px solid var(--br); border-radius: 999px; padding: 3px 10px; margin-left: auto; flex: none; } /* ── "Show me" scenarios ────────────────────────────────────────────────── The section the programme cares most about. Each scenario is an instruction a buyer can read aloud in a demonstration, so it is set as a distinct speakable line rather than body prose — but without quotation styling, which would frame them as testimonials. */ .bg-show { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; } .bg-show-i { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; background: var(--bg-s); border: 1px solid var(--br); border-left: 3px solid var(--b); border-radius: var(--r); padding: 15px 18px; } .bg-show-k { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--b); background: var(--w); border: 1px solid var(--b-bd); border-radius: 4px; padding: 3px 7px; flex: none; margin-top: 1px; } .bg-show-t { font-size: 15px; line-height: 1.6; color: var(--t); font-weight: 500; } /* The one question that should follow every demonstration. */ .bg-ask { background: var(--b); border-radius: var(--r-l); padding: 22px 26px; margin: 0 0 26px; } .bg-ask-k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin-bottom: 8px; } /* Scoped under .kn-article: the article rule .kn-article p sets colour at specificity 0,1,1 and would otherwise win against a single class, leaving this question dark blue on a blue panel. Caught in visual QA. */ .kn-article .bg-ask-q { font-size: 19px; font-weight: 700; line-height: 1.4; color: #fff; letter-spacing: -.01em; margin: 0; } /* ── What to record after each demonstration ───────────────────────────── Seven fields. Short, parallel, and the point is that they form one row of a record, so they are set as a wrapping field set rather than a bullet list. */ .bg-record { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; } .bg-record-i { font-size: 13.5px; font-weight: 600; color: var(--t); background: var(--w); border: 1px solid var(--b-bd); border-radius: var(--r); padding: 9px 14px; } /* ── Tie-break questions ───────────────────────────────────────────────── Eight questions to ask when the feature lists have stopped separating the candidates. Set as emphasised question lines, because in the source each is a heading in its own right. */ .bg-qlist { list-style: none; margin: 0 0 26px !important; padding: 0 !important; } .kn-article .bg-qlist li { font-size: 15.5px !important; font-weight: 600; line-height: 1.55; color: var(--t); padding: 12px 0 12px 20px; margin: 0; border-top: 1px solid var(--br); border-left: 2px solid var(--b-bd); } .kn-article .bg-qlist li:last-child { border-bottom: 1px solid var(--br); } /* ── Responsive sign-off table ──────────────────────────────────────────── A real with real
, so the semantics are correct. Below 720px the same markup re-flows to stacked rows using the header text from data-label, which keeps one accessible source of truth instead of shipping a duplicate card list. */ .bg-signoff { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 26px; } .bg-signoff th, .bg-signoff td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--br); vertical-align: top; line-height: 1.6; } .bg-signoff thead th { font-size: 12.5px; font-weight: 700; color: var(--t); background: var(--bg); letter-spacing: .01em; } .bg-signoff tbody th { font-size: 14.5px; font-weight: 700; color: var(--t); width: 32%; } /* overflow-wrap: break-word lets a token with no line-break opportunity wrap rather than overflow its cell. It changes nothing for ordinary prose — the keyword only takes effect when a single unbreakable run cannot fit — so every cell whose text already fits is laid out identically. Below 720px the table re-flows to stacked rows and the value cell narrows to the mobile column. A slash-joined token gives Chrome no break opportunity, so at 390px an approved 47-character run measured 371px inside a 340px cell and its last character was clipped by the viewport-level overflow-x:clip in main.css:264 — visible loss of approved copy, with no scrollbar to reveal it. Exposed by the Transport & Logistics evaluation record, whose "trip/vehicle/route/customer/receivable/warehouse" is the first such token in the family; the gap itself was always latent in the shared table. Applied to td only: the row header carries short labels and needs no break behaviour. */ .bg-signoff td { color: var(--t-m); overflow-wrap: break-word; } .bg-signoff tr:last-child th, .bg-signoff tr:last-child td { border-bottom: 0; } /* Visually-hidden text. main.css has no .sr-only, and the sign-off table needs a caption that names it for a screen reader without adding visible chrome. */ .bg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Customer proof panel ───────────────────────────────────────────────── Visibly separated from the neutral guidance, and labelled as a named customer example so a reader can never mistake it for part of the framework. */ .bg-proof { background: var(--w); border: 1px solid var(--b-bd); border-radius: var(--r-l); box-shadow: var(--sh-s); padding: 26px 28px 24px; margin: 0 0 26px; } .bg-proof-hd { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .bg-proof-k { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--b); background: var(--b-lt); border: 1px solid var(--b-bd); border-radius: 999px; padding: 4px 12px; } .bg-proof-logo { height: 34px; width: auto; max-width: 140px; object-fit: contain; margin-left: auto; } .bg-proof p { font-size: 15.5px; } /* The editorial lesson. Must stay attached to the panel so the example is never read as "Exactlly implements every ERP in under a year". */ .bg-proof-lesson { border-top: 1px solid var(--br); margin-top: 18px; padding-top: 18px; } .bg-proof-lesson p:last-child { margin-bottom: 0; } .bg-proof-more { margin: 18px 0 0 !important; } .bg-proof-more a { font-size: 14.5px; font-weight: 600; } /* ── Vendor section ─────────────────────────────────────────────────────── Restrained. A tinted band, the verticals, and one closing principle. No superlatives, no badge wall, and visually quieter than the show-me section so the guide never tips into a brochure at the end. */ .bg-vendor { background: var(--b-lt); border: 1px solid var(--b-bd); border-radius: var(--r-l); padding: 28px 30px 26px; margin: 0 0 26px; } .bg-vendor p { font-size: 15.5px; } .bg-vendor > p:first-child { margin-top: 0; } .bg-verticals { background: var(--w); border: 1px solid var(--b-bd); border-radius: var(--r); padding: 14px 18px; font-size: 14.5px !important; line-height: 1.7; font-weight: 600; color: var(--b-dk) !important; } .bg-principle { background: var(--w); border: 1px solid var(--b-bd); border-left: 3px solid var(--b); border-radius: var(--r); padding: 18px 20px; font-size: 15.5px !important; line-height: 1.65; color: var(--t) !important; font-weight: 500; margin-bottom: 0 !important; } /* ── Checklist ──────────────────────────────────────────────────────────── A working tool. Real checkboxes so a reader can tick on screen, and a print stylesheet so the page prints as a usable one-pager rather than a website. Two columns on desktop. Seven groups of three to four items ran to nearly two screens in a single file, which made the checklist feel like more work than the guide it summarises; paired up it reads as one instrument. CSS columns rather than a grid, so the groups reflow naturally at any width and the print rules can keep the same two columns. */ .bg-check { margin: 4px 0 26px; columns: 2; column-gap: 40px; } .bg-check-g { break-inside: avoid; margin-bottom: 22px; } .kn-article .bg-check-h { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--b); padding-bottom: 8px; border-bottom: 1px solid var(--br); margin: 0 0 12px; } .bg-check-l { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 9px; } .bg-check-l li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; } .bg-check-l input[type="checkbox"] { margin-top: 4px; accent-color: var(--b); width: 15px; height: 15px; flex: none; } /* overflow-wrap: break-word lets a checklist item whose first token has no natural break opportunity wrap inside the label instead of overflowing it. Exposed by the Edible Oil guide, whose approved copy contains the 62-character token "Degumming/neutralisation/bleaching/deodorisation/winterisation"; at 390px that ran 127px past a 317px label and `overflow-x: clip` removed approved copy from the page. Every other guide's longest hyphen-free checklist token is 39 characters and already fitted, so this changes the geometry of exactly one label in the family. Measured, not assumed. */ .bg-check-l label { font-size: 14.5px; line-height: 1.55; color: var(--t-m); cursor: pointer; overflow-wrap: break-word; } /* ── More guides in this series ────────────────────────────────────────── Listed so a reader can see where the series is going. Not anchors: none of these pages exists yet, and a link that 404s is worse than a stated status. The "Coming soon" chip is PROTOTYPE STATE, not a Buyer Guide template feature. As each of Guides 2-7 publishes, its row becomes an ordinary link and the chip goes away; once the series is complete the chip and this rule should be deleted rather than kept on as permanent furniture. */ .kn-next .bg-series-h { font-size: 16px; font-weight: 700; color: var(--t); margin: 34px 0 0; } .bg-future { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0 !important; list-style: none; padding: 0 !important; } .bg-future li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; border: 1px solid var(--br); border-radius: var(--r); padding: 14px 18px; background: var(--w); } /* Explicit placement. Auto-placement pushed the status chip onto a third row where it stretched to the full 1fr column and read as a wide empty pill. */ .bg-future-t { grid-area: 1 / 1; font-size: 15px; font-weight: 700; color: var(--t); } .bg-future-d { grid-area: 2 / 1 / 3 / -1; font-size: 14px; line-height: 1.55; color: var(--t-m); } .bg-future-k { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t-l); background: var(--bg-s); border: 1px solid var(--br); border-radius: 999px; padding: 3px 10px; flex: none; white-space: nowrap; grid-area: 1 / 2; justify-self: end; } /* ── Marker suppression ─────────────────────────────────────────────────── .kn-article ul li::before paints a blue dot at specificity 0,1,3, which beats any single-class rule here. Lists that supply their own marker (a checkbox, a rule, a status chip) must switch it off explicitly or they render two markers. Caught in visual QA on the checklist. */ .kn-article .bg-check-l li::before, .kn-article .bg-future li::before, .kn-article .bg-qlist li::before, .kn-article .bg-toc li::before { content: none; } /* Those rows are grids or ruled lines; none of them keeps the article indent. */ .kn-article .bg-check-l li, .kn-article .bg-future li { padding-left: 0; } .kn-article .bg-future li { padding-left: 18px; } /* ── Section rhythm ────────────────────────────────────────────────────── The guide is long, so H2s get a rule above them. Cheaper than a card and it gives the page its scanning rhythm without another box. */ .kn-article h2.bg-rule { border-top: 1px solid var(--br); padding-top: 34px; margin-top: 46px; } .kn-article h2.bg-rule:first-child { border-top: 0; padding-top: 0; margin-top: 0; } /* ── Final CTA ───────────────────────────────────────────────────────────── */ /* The measured production closing band is padding:88px 0 with background var(--b) and its content centred at .sec-hd-p's 720px — confirmed as computed 88px on the homepage, the product page and the industries page. The guide CTA was 56px 0 at 760px, which read as a narrower, shallower band than every other page on the site closes with. */ .bg-cta { background: var(--b); padding: 88px 0; } .bg-cta-in { max-width: 720px; margin: 0 auto; text-align: center; } .bg-cta h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: #fff; letter-spacing: -.02em; margin: 0 0 14px; } .bg-cta p { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .86); margin: 0 auto 12px; max-width: 620px; } .bg-cta-list { list-style: none; padding: 0; margin: 0 auto 24px; max-width: 460px; text-align: left; display: flex; flex-direction: column; gap: 8px; } .bg-cta-list li { font-size: 15px; line-height: 1.55; color: #fff; padding-left: 20px; position: relative; } .bg-cta-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .8); } .bg-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* On a dark band .btn-p is blue-on-blue and loses its chrome entirely. The production pattern for this is customer-story.css:850 (.cs-cta-in .btn-p), so the same inversion is applied here rather than inventing a new button. Caught in visual QA: the CTA was rendering as bold text, not a button. white-space: normal releases main.css:133, which sets nowrap on every .btn. max-width: 100% above already caps the BOX at the 720px .bg-cta-in width, but a capped box cannot contain nowrap text: a CTA label longer than 720px kept its single line and spilled outside the white button, and pushed the document wider than the viewport at 768px. Production already decided a link CTA should wrap rather than overflow — main.css:268 sets exactly `a.btn { max-width:100%; white-space:normal }` — but only below 641px, which is why every guide renders correctly at 390 and not above it. This extends production's own decision to the CTA button at every width. Short labels are unaffected: a one-line label still measures one line under `normal`. Every guide's .bg-cta-row holds a single , so nothing else in the family is in scope, and no