/* ============================================================================
   BENALI BUSINESS — the document design system
   ----------------------------------------------------------------------------
   For things people STUDY AND DECIDE FROM: proposals, decks, internal memos,
   client-facing one-pagers. Sibling of the brand system (brand/brand.css),
   deliberately NOT the app system (apps/ — Geist, dense, fast).

   LINEAGE. Tokens are synced from brand/brand.css §01–§04. The slide kit is
   lifted from the Paxus Agent Base deck (2026-08-17), the first ratified
   deck in this direction. The letter-page mechanics descend from the retired
   first-generation proposal template (print-color-adjust, fixed 8.5×11in
   pages, SVG-only cover art) — its look (ivory, slate-deep, accent-word
   headlines) is retired.

   THE LAWS
   1. One font: Hanken Grotesk. Emphasis is weight or ink shade, never italic,
      never an accent-coloured word in a headline (retired with the old template).
   2. Run-on heads everywhere: lead sentence in ink, no trailing period,
      continuation on its own line in --ink-mid. Same as the site.
   3. Kickers are majorelle, sentence case, never uppercase. (Decks ratified
      no-all-caps; documents follow the deck, not the site's tracked-caps
      eyebrow.)
   4. NO EM DASHES OR EN DASHES anywhere in copy (U+2014, U+2013). Operator
      hard rule, carried from the proposal workflow. Use commas, periods, or
      "to" for ranges.
   5. The ramp appears in documents ONLY as pre-rendered inline SVG, ONLY on
      covers and navy divider bands. CSS-gradient hairlines collapse in PDF
      export; canvas artifacts don't print. Decks (screen surfaces) may use
      brand-artifacts.js on navy slides.
   6. Navy is a stage here too: the cover, at most ONE divider band per
      document, and deck opener/closer slides. Never a content-page ground.
   7. Majorelle is ink, not paint: kickers, bullets, one rule on a callout,
      the recommended-option figure. Never a fill, never a button (documents
      have no buttons), never body text.
   8. No fabricated client facts, ever. Pricing confirmed before any send.

   THREE SURFACES in this one file:
     §03 the letter document (print-first: proposals, agreements, one-pagers)
     §04 the document kit (components for §03)
     §05 the deck (1280×720 stage, screen-first: external presentations)
     §06 the memo (screen-first responsive page: internal docs)
   ========================================================================== */


/* ============================================================================
   01 · TOKENS — synced from brand/brand.css. Do not fork values; if the
   brand system moves, this file moves with it.
   ========================================================================== */

:root {
  /* grounds */
  --paper:        #FCFCFD;
  --tray:         #F5F6F8;   /* screen backdrop behind letter pages */
  --card:         #FFFFFF;   /* the letter page itself */
  --navy:         #0C1030;   /* cover, divider band, deck opener/closer */

  /* ink on light */
  --ink:          #2E333B;
  --ink-mid:      #5B626D;
  --ink-meta:     #656C77;   /* the contrast floor for small text */
  --ink-quiet:    rgba(46, 51, 59, 0.55);
  --ink-ghost:    rgba(46, 51, 59, 0.34);

  /* ink on navy */
  --ink-on-dark:       #FFFFFF;
  --ink-on-dark-mid:   rgba(255, 255, 255, 0.66);
  --ink-on-dark-quiet: rgba(255, 255, 255, 0.58);
  --ink-on-dark-ghost: rgba(255, 255, 255, 0.38);

  /* lines */
  --line:         rgba(46, 51, 59, 0.10);
  --line-strong:  rgba(46, 51, 59, 0.12);
  --line-on-dark: rgba(255, 255, 255, 0.09);

  /* the ramp — SVG cover art only (law 5) */
  --ramp-0: #C9CCF5;
  --ramp-1: #4A52D8;
  --ramp-2: #965CBE;
  --ramp-3: #C4507A;
  --ramp-4: #E0603F;

  --majorelle:      #4A52D8;
  --majorelle-lift: #9AA0EE;

  --r-card:   14px;
  --r-window: 10px;

  --ease-breath: cubic-bezier(0.16, 1, 0.3, 1);

  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

em { font-style: normal; font-weight: 600; color: inherit; }  /* emphasis is
     weight, not italic, not colour — the old template's accent <em> is retired */
strong, b { font-weight: 600; }


/* ============================================================================
   02 · TYPE — the document ramp
   ----------------------------------------------------------------------------
   Smaller than marketing display, bigger than app chrome. Every head takes
   the run-on shape:

     <h2 class="bz-h-section">One base in the middle
       <span>Agents on one side, your systems on the other.</span></h2>
   ========================================================================== */

.bz-kicker     { font-size: 12px; font-weight: 600; color: var(--majorelle); }
.bz-on-dark .bz-kicker, .bz-cover .bz-kicker { color: var(--majorelle-lift); }

.bz-h-cover    { font-size: 34px; font-weight: 500; line-height: 1.15; letter-spacing: -0.028em; color: #fff; }
.bz-h-doc      { font-size: 24px; font-weight: 500; line-height: 1.2;  letter-spacing: -0.024em; }
.bz-h-section  { font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.bz-h-block    { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }

.bz-h-cover > span, .bz-h-doc > span, .bz-h-section > span { display: block; color: var(--ink-mid); }
.bz-h-cover > span { color: var(--ink-on-dark-mid); }
.bz-on-dark .bz-h-doc > span, .bz-on-dark .bz-h-section > span { color: var(--ink-on-dark-mid); }

.bz-meta { font-size: 11px; font-weight: 500; color: var(--ink-meta); }


/* ============================================================================
   03 · THE LETTER DOCUMENT — fixed 8.5×11in pages, print-first
   ----------------------------------------------------------------------------
   Screen shows pages as cards on the tray; print strips the chrome. Every
   page must fit 11in — VERIFY before send (footer clipping is the classic
   failure). Duplicate rules from the proposal workflow apply: the filled file
   goes to both the Vercel route and the pdf-source copy.
   ========================================================================== */

@page { size: letter portrait; margin: 0; }

body.bz-doc {
  font-family: var(--font);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  background: var(--tray);
  padding: 28px 0;
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.bz-page {
  width: 8.5in; height: 11in;
  margin: 0 auto 28px;
  background: var(--card);
  box-shadow: 0 8px 32px rgba(27, 30, 35, 0.14);
  overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  padding: 0.75in 0.85in 0.6in;
}

/* the cover is a navy stage. Art is inline SVG placed behind (.bz-cover-art);
   see templates/proposal.html for the ratified glow composition. */
.bz-cover { background: var(--navy); color: var(--ink-on-dark); padding: 0.75in 0.85in 0.65in; }
.bz-cover-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bz-cover > :not(.bz-cover-art) { position: relative; }  /* lift content above
     the art; the art itself must stay absolute */

/* footer: hairline, running title left, page number right */
.bz-foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10.5px; font-weight: 500; color: var(--ink-meta);
}

/* wordmark lockup: image · hairline divider · counterpart name. Marks are
   PLACED from shared/logos, never re-typeset. */
.bz-lockup { display: flex; align-items: center; gap: 12px; }
.bz-lockup img { height: 11px; display: block; }
.bz-lockup .bz-divider { width: 1px; height: 14px; background: var(--line-strong); }
.bz-cover .bz-lockup .bz-divider { background: rgba(255, 255, 255, 0.28); }
.bz-lockup .bz-counterpart { font-size: 13px; font-weight: 600; }
.bz-cover .bz-lockup .bz-counterpart { color: rgba(255, 255, 255, 0.85); }

@media print {
  body.bz-doc { background: #fff; padding: 0; }
  .bz-page { margin: 0; box-shadow: none; page-break-after: always; }
  .bz-page:last-child { page-break-after: auto; }
}


/* ============================================================================
   04 · THE DOCUMENT KIT
   ========================================================================== */

/* prose: real measure, never full-bleed text */
.bz-prose { max-width: 66ch; font-size: 13px; color: var(--ink-mid); }
.bz-prose + .bz-prose { margin-top: 10px; }
.bz-lede  { max-width: 60ch; font-size: 14.5px; color: var(--ink-mid); }

/* section head block: kicker + run-on head, opens every lettered section */
.bz-section { margin-top: 30px; }
.bz-section > .bz-kicker { margin-bottom: 6px; }
.bz-section > .bz-h-section { margin-bottom: 12px; }

/* fact row: 2 to 4 quiet stat cards. Figures are weight 300 (the brand's
   hairline-figure inheritance). */
.bz-facts { display: flex; gap: 12px; }
.bz-fact {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 15px 17px 13px;
}
.bz-fact .bz-num { font-size: 26px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; }
.bz-fact .bz-cap { margin-top: 8px; font-size: 11.5px; color: var(--ink-mid); line-height: 1.45; }

/* the callout: one statement that must not be skimmed past. Majorelle left
   rule is the only accent paint a content page carries. */
.bz-callout {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 2px solid var(--majorelle); border-radius: var(--r-card);
  padding: 13px 17px; font-size: 13px; color: var(--ink-mid);
}
.bz-callout b { color: var(--ink); }

/* tables: scope, pricing. Hairline rows, no zebra, no heavy header fill. */
.bz-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bz-table th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-meta);
  padding: 0 12px 8px 0; border-bottom: 1px solid var(--line-strong);
}
.bz-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-mid); }
.bz-table td:first-child { color: var(--ink); font-weight: 500; }
.bz-table .bz-num-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* pricing emphasis: the recommended row, not a highlighted box */
.bz-table tr.bz-rec td { color: var(--ink); }
.bz-table tr.bz-rec td:first-child::after {
  content: 'Recommended'; margin-left: 10px; font-size: 10px; font-weight: 600;
  color: var(--majorelle);
}

/* timeline: phase cards in a row (the deck's phase card, letter-sized) */
.bz-phases { display: flex; gap: 12px; }
.bz-phase {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 15px 17px;
}
.bz-phase .bz-key { font-size: 10.5px; font-weight: 600; color: var(--majorelle); margin-bottom: 4px; }
.bz-phase h4 { font-size: 13.5px; font-weight: 600; margin-bottom: 9px; }
.bz-phase ul { list-style: none; display: grid; gap: 7px; }
.bz-phase li { position: relative; padding-left: 14px; font-size: 11.5px; color: var(--ink-mid); line-height: 1.45; }
.bz-phase li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--majorelle);
}

/* checklist / deliverables */
.bz-points { list-style: none; display: grid; gap: 9px; max-width: 66ch; }
.bz-points li { position: relative; padding-left: 18px; font-size: 12.5px; color: var(--ink-mid); line-height: 1.5; }
.bz-points li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--majorelle);
}
.bz-points b { color: var(--ink); }

/* fine print + signature */
.bz-fine { font-size: 10.5px; color: var(--ink-meta); line-height: 1.55; max-width: 72ch; }
.bz-sig-row { display: flex; gap: 40px; margin-top: 26px; }
.bz-sig { flex: 1; max-width: 260px; }
.bz-sig .bz-sig-line { border-bottom: 1px solid var(--ink-quiet); height: 34px; }
.bz-sig .bz-sig-cap { margin-top: 6px; font-size: 10.5px; color: var(--ink-meta); }


/* ============================================================================
   05 · THE DECK — 1280×720 stage, screen-first
   ----------------------------------------------------------------------------
   Lifted from the Paxus Agent Base deck (the ratified slide
   rendition). Navy opener and closer, paper working slides, ONE artifact per
   slide and not on every slide, type capped at 31px, no all-caps anywhere.
   Navigation: arrows/space/Home/End + HUD + hash. Scale: designed at
   1280×720, uniformly scaled to the viewport (see templates/deck.html JS).
   ========================================================================== */

body.bz-deck {
  height: 100%; background: var(--navy); overflow: hidden;
  font-family: var(--font); color: var(--ink);
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
.bz-deck ::selection { background: rgba(74, 82, 216, 0.18); }

#stage {
  width: 1280px; height: 720px; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); background: var(--paper); overflow: hidden;
}
.slide {
  position: absolute; inset: 0; padding: 54px 64px 48px;
  opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease-breath);
  background: var(--paper); display: flex; flex-direction: column;
}
.slide.current { opacity: 1; visibility: visible; }
.slide.navy { background: var(--navy); color: var(--ink-on-dark); }

.slide .eyebrow { font-size: 13px; font-weight: 600; color: var(--majorelle); margin-bottom: 12px; }
.slide.navy .eyebrow { color: var(--majorelle-lift); }
.slide h1 { font-size: 31px; font-weight: 500; line-height: 1.2; letter-spacing: -0.028em; }
.slide h2 { font-size: 26px; font-weight: 500; line-height: 1.25; letter-spacing: -0.022em; max-width: 900px; }
.slide h1 > span, .slide h2 > span { display: block; color: var(--ink-mid); }
.slide.navy h1 > span, .slide.navy h2 > span { color: var(--ink-on-dark-mid); }

.slide .footer {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 500; color: var(--ink-ghost);
}
.slide.navy .footer { color: var(--ink-on-dark-ghost); }

/* ---- slide content kit (proven values, keep verbatim) ---- */
.statrow { display: flex; gap: 16px; margin-top: 32px; }
.stat {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 20px 22px 18px;
}
.stat .num { font-size: 34px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.stat .cap { margin-top: 11px; font-size: 13.5px; color: var(--ink-mid); line-height: 1.45; }

.goalbar {
  margin-top: 22px; background: var(--card); border: 1px solid var(--line);
  border-left: 2px solid var(--majorelle); border-radius: var(--r-card);
  padding: 17px 22px; font-size: 15px; color: var(--ink-mid);
}
.goalbar b { font-weight: 600; color: var(--ink); }

.panes { display: flex; gap: 16px; margin-top: 30px; }
.pane {
  flex: 1; background: var(--tray); border-radius: var(--r-card); padding: 20px 22px;
  font-size: 14px; color: var(--ink-mid); line-height: 1.5;
}
.pane b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.pane.raised { background: var(--card); border: 1px solid var(--line); }

.cols { display: flex; gap: 48px; margin-top: 28px; flex: 1; min-height: 0; }
.col-copy { width: 460px; flex: none; }
.col-visual { flex: 1; min-width: 0; position: relative; }

ul.points { list-style: none; display: grid; gap: 14px; }
ul.points li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--ink-mid); line-height: 1.5; }
ul.points li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--majorelle);
}
ul.points b { font-weight: 600; color: var(--ink); }

/* windows + Ledge (the default capture treatment on a paper slide) */
.ledge { position: relative; }
/* the seam div takes NO a3-art class (its inset: 0 would override the bottom
   anchor); top: auto guards against it regardless */
.ledge-seam { position: absolute; top: auto; left: 2%; right: 2%; bottom: -30px; height: 78px; pointer-events: none; }
.window {
  position: relative; border-radius: var(--r-window); overflow: hidden;
  box-shadow: 0 30px 54px -26px rgba(27,30,35,0.34), 0 2px 5px rgba(27,30,35,0.05), 0 0 0 1px var(--line);
  background: var(--card);
}
.window img { width: 100%; display: block; }
.shot-cap { margin-top: 40px; font-size: 12px; color: var(--ink-meta); }

/* the rising hero window on a navy reveal slide */
.rise-wrap { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 760px; }
.rise {
  border-radius: 11px 11px 0 0; overflow: hidden; display: block;
  box-shadow: 0 -10px 90px -20px rgba(0,0,0,0.8), 0 0 0 1px var(--line-on-dark);
}
.rise img { width: 100%; display: block; }

/* phase cards */
.phases { display: flex; gap: 16px; margin-top: 32px; }
.phase {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 20px 22px;
}
.phase .key { font-size: 12px; font-weight: 600; color: var(--majorelle); margin-bottom: 5px; }
.phase h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 13px; }
.phase ul { list-style: none; display: grid; gap: 9px; }
.phase li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--ink-mid); line-height: 1.45; }
.phase li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--majorelle);
}

/* flow: lead box + arrows */
.flow { display: flex; align-items: stretch; gap: 0; margin-top: 32px; }
.flow .f {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 18px 20px; font-size: 13.5px;
  color: var(--ink-mid); line-height: 1.5;
}
.flow .f b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.flow .f.lead { background: var(--navy); border-color: transparent; color: var(--ink-on-dark-mid); }
.flow .f.lead b { color: #fff; }
.flow .arrow-cell { flex: none; display: flex; align-items: center; padding: 0 10px; color: var(--ink-ghost); font-size: 17px; }

/* closer cards on navy */
.close-cards { display: flex; gap: 16px; margin-top: 36px; }
.close-cards .c {
  flex: 1; border: 1px solid var(--line-on-dark); border-radius: var(--r-card);
  padding: 20px 22px; position: relative;
}
.close-cards .num { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; color: #fff; }
.close-cards .cap { margin-top: 9px; font-size: 13.5px; color: var(--ink-on-dark-mid); line-height: 1.5; }

/* title lockup + agenda */
.lockup { display: flex; align-items: center; gap: 12px; }
.lockup img { height: 11px; display: block; }
.lockup .divider { width: 1px; height: 15px; background: rgba(255,255,255,0.28); }
.lockup .client { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); }
.agenda { display: flex; gap: 24px; font-size: 13px; font-weight: 500; color: var(--ink-on-dark-quiet); }

/* HUD */
#hud {
  position: fixed; right: 18px; bottom: 14px; z-index: 10;
  display: flex; align-items: center; gap: 4px;
  background: rgba(252,252,253,0.12); border-radius: 999px; padding: 4px 8px;
  font-family: inherit; font-size: 12px; color: rgba(255,255,255,0.75);
}
#hud button {
  all: unset; cursor: pointer; padding: 2px 8px; border-radius: 999px;
  font-size: 15px; line-height: 1; color: rgba(255,255,255,0.8);
}
#hud button:hover { background: rgba(255,255,255,0.14); }
#count { min-width: 44px; text-align: center; }

/* the artifact div (navy slides only; needs brand-artifacts.js) */
.a3-art { position: absolute; inset: 0; pointer-events: none; }
.a3-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(154,160,238,0.13) 1px, transparent 1px);
  background-size: 26px 26px;
}


/* ============================================================================
   06 · THE MEMO — screen-first internal document
   ----------------------------------------------------------------------------
   A responsive page, not letter pages. For internal docs that live at a URL
   and only occasionally print. Prints clean via the same exact-color rule.
   ========================================================================== */

body.bz-memo {
  font-family: var(--font); color: var(--ink); font-size: 14px; line-height: 1.6;
  background: var(--paper); -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.bz-memo-page { max-width: 760px; margin: 0 auto; padding: 56px 28px 80px; }

.bz-memo-head { padding-bottom: 22px; border-bottom: 1px solid var(--line-strong); margin-bottom: 30px; }
.bz-memo-head .bz-h-doc { margin: 14px 0 16px; }
.bz-memo-meta { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 12px; color: var(--ink-meta); }
.bz-memo-meta b { font-weight: 600; color: var(--ink-mid); }

.bz-memo .bz-section { margin-top: 34px; }
.bz-memo .bz-prose, .bz-memo .bz-points { max-width: none; font-size: 14px; }

@media print {
  body.bz-memo { background: #fff; }
  .bz-memo-page { max-width: none; padding: 0.6in 0.7in; }
}
@media (max-width: 640px) {
  .bz-facts, .bz-phases { flex-direction: column; }
}


/* ============================================================================
   07 · THE ARTICLE — semantic prose. The workhorse.
   ----------------------------------------------------------------------------
   Most business output is an HTML document that EXPLAINS something: an
   explainer, a training, a plan, a decision writeup. Wrap the body copy in
   `.bz-article` and write PLAIN SEMANTIC HTML — h2/h3/p/ul/ol/table/
   blockquote/pre/figure all style themselves. No utility classes needed for
   prose; the classed components (§04, §08, §09) drop in between.

   Use inside a .bz-memo-page (screen doc), a .bz-page (letter doc), or any
   custom page shell. Everything here survives print (break-inside guards on
   every block component).
   ========================================================================== */

.bz-article { font-size: 14px; line-height: 1.62; color: var(--ink-mid); }
.bz-article > * + * { margin-top: 14px; }

.bz-article h1, .bz-article h2, .bz-article h3, .bz-article h4 { color: var(--ink); }
.bz-article h1 { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.024em; margin-top: 0; }
.bz-article h2 { font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; margin-top: 40px; }
.bz-article h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; margin-top: 30px; }
.bz-article h4 { font-size: 13.5px; font-weight: 600; margin-top: 22px; }
.bz-article h1 > span, .bz-article h2 > span { display: block; color: var(--ink-mid); font-weight: 500; }

.bz-article p { max-width: 70ch; }
.bz-article strong { color: var(--ink); }
.bz-article a { color: var(--majorelle); text-decoration: none; border-bottom: 1px solid rgba(74, 82, 216, 0.25); }
.bz-article a:hover { border-bottom-color: var(--majorelle); }

.bz-article ul, .bz-article ol { max-width: 70ch; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.bz-article ul > li { position: relative; padding-left: 18px; }
.bz-article ul > li::before {
  content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--majorelle);
}
.bz-article ol { counter-reset: bz-ol; }
.bz-article ol > li { position: relative; padding-left: 26px; counter-increment: bz-ol; }
.bz-article ol > li::before {
  content: counter(bz-ol); position: absolute; left: 0; top: 0.1em;
  font-size: 11.5px; font-weight: 600; color: var(--majorelle);
  font-variant-numeric: tabular-nums;
}
.bz-article li > ul, .bz-article li > ol { margin-top: 8px; }
.bz-article li > ul > li::before { background: var(--ink-ghost); }

.bz-article blockquote {
  border-left: 2px solid var(--line-strong); padding: 2px 0 2px 16px;
  color: var(--ink-mid); max-width: 66ch;
}
.bz-article blockquote cite { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: var(--ink-meta); }

.bz-article hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }

.bz-article table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bz-article th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-meta);
  padding: 0 12px 8px 0; border-bottom: 1px solid var(--line-strong);
}
.bz-article td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.bz-article td:first-child { color: var(--ink); font-weight: 500; }

.bz-article figure { margin: 20px 0; break-inside: avoid; }
.bz-article figcaption { margin-top: 10px; font-size: 12px; color: var(--ink-meta); }

/* code — inline and block. The one mono in the business system. */
.bz-article code, .bz-code, .bz-kbd, .bz-term {
  font-family: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
}
.bz-article code {
  font-size: 0.86em; background: var(--tray); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; color: var(--ink);
}
.bz-article pre, .bz-code {
  background: var(--tray); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; overflow-x: auto; font-size: 12px; line-height: 1.6;
  color: var(--ink); max-width: none; break-inside: avoid;
}
.bz-article pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* the terminal block — the one sanctioned dark ground inside a document.
   For commands and agent transcripts in trainings. */
.bz-term {
  background: var(--navy); color: rgba(255, 255, 255, 0.86);
  border-radius: 10px; padding: 14px 16px; overflow-x: auto;
  font-size: 12px; line-height: 1.65; break-inside: avoid;
}
.bz-term .bz-prompt { color: var(--majorelle-lift); user-select: none; }
.bz-term .bz-dim { color: rgba(255, 255, 255, 0.45); }

.bz-kbd {
  display: inline-block; font-size: 0.8em; padding: 1px 6px 2px;
  background: var(--card); border: 1px solid var(--line-strong);
  border-bottom-width: 2px; border-radius: 5px; color: var(--ink);
}


/* ============================================================================
   08 · THE DOC KIT — classed components that drop into any document
   ----------------------------------------------------------------------------
   Doc semantics (sanctioned 2026-08-23): documents and trainings genuinely
   need "careful", "works", "broken" — the brand has no semantic colours, so
   these three are borrowed from the app system's tuned set (deep green,
   brown-leaning amber, brick red — chosen there to sit beside majorelle).
   They paint a LEFT RULE and a LABEL only, never a fill, never body text.
   ========================================================================== */

:root {
  --bz-ok:     #0F8A5F;
  --bz-warn:   #B07207;
  --bz-danger: #C24439;
}

/* callout family — §04's .bz-callout is the neutral base (majorelle rule).
   Variants recolour the rule and add a small lead-in label via data-label. */
.bz-callout { break-inside: avoid; max-width: none; }
.bz-callout[data-label]::before {
  content: attr(data-label); display: block; margin-bottom: 3px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--majorelle);
}
.bz-callout.warn { border-left-color: var(--bz-warn); }
.bz-callout.warn[data-label]::before { color: var(--bz-warn); }
.bz-callout.ok { border-left-color: var(--bz-ok); }
.bz-callout.ok[data-label]::before { color: var(--bz-ok); }
.bz-callout.danger { border-left-color: var(--bz-danger); }
.bz-callout.danger[data-label]::before { color: var(--bz-danger); }

/* do / don't — the pair, always together, do on the left */
.bz-dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; break-inside: avoid; }
.bz-dodont .bz-do, .bz-dodont .bz-dont {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 14px 17px; font-size: 12.5px; color: var(--ink-mid); line-height: 1.55;
}
.bz-dodont .bz-do { border-top: 2px solid var(--bz-ok); }
.bz-dodont .bz-dont { border-top: 2px solid var(--bz-danger); }
.bz-dodont b { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 5px; }
.bz-dodont .bz-do b { color: var(--bz-ok); }
.bz-dodont .bz-dont b { color: var(--bz-danger); }

/* steps — a numbered walkthrough with room for substance per step */
.bz-steps { counter-reset: bz-step; display: grid; gap: 0; }
.bz-step {
  position: relative; counter-increment: bz-step;
  padding: 0 0 26px 44px; break-inside: avoid;
}
.bz-step::before {
  content: counter(bz-step); position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--majorelle); color: #fff;
  font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.bz-step::after {
  content: ''; position: absolute; left: 12.5px; top: 30px; bottom: 6px;
  width: 1px; background: var(--line-strong);
}
.bz-step:last-child { padding-bottom: 0; }
.bz-step:last-child::after { display: none; }
.bz-step > h4, .bz-step > b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 5px; }
.bz-step p { margin: 0 0 8px; font-size: 13px; color: var(--ink-mid); max-width: 64ch; }
.bz-step .bz-figure, .bz-step .bz-term, .bz-step pre { margin: 10px 0 4px; }

/* figure with a real product capture: window + caption. The document
   rendition of the site's Ledge — plain shadow, no canvas. */
.bz-figure { break-inside: avoid; margin: 20px 0; }
.bz-figure .bz-window {
  border-radius: var(--r-window); overflow: hidden; background: var(--card);
  box-shadow: 0 20px 44px -22px rgba(27, 30, 35, 0.3), 0 2px 5px rgba(27, 30, 35, 0.05), 0 0 0 1px var(--line);
}
.bz-figure .bz-window img { width: 100%; display: block; }
.bz-figure figcaption, .bz-figure .bz-figcap { margin-top: 12px; font-size: 12px; color: var(--ink-meta); }

/* key–value spec list — facts about a thing, two columns */
.bz-kv { display: grid; grid-template-columns: max-content 1fr; gap: 0 24px; font-size: 12.5px; max-width: 70ch; }
.bz-kv > dt {
  font-size: 11px; font-weight: 600; color: var(--ink-meta);
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.bz-kv > dd { margin: 0; color: var(--ink-mid); padding: 7px 0; border-bottom: 1px solid var(--line); }
.bz-kv > dt:last-of-type, .bz-kv > dd:last-of-type { border-bottom: 0; }

/* badge — a small chromeless status word with its dot */
.bz-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink-mid); white-space: nowrap; }
.bz-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--majorelle); }
.bz-badge.ok::before { background: var(--bz-ok); }
.bz-badge.warn::before { background: var(--bz-warn); }
.bz-badge.danger::before { background: var(--bz-danger); }
.bz-badge.neutral::before { background: var(--ink-ghost); }

/* FAQ — details/summary, hairline rows */
.bz-faq { border-top: 1px solid var(--line-strong); max-width: none; }
.bz-faq details { border-bottom: 1px solid var(--line); }
.bz-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 13px 2px; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.bz-faq summary::-webkit-details-marker { display: none; }
.bz-faq summary::after { content: '+'; font-weight: 400; color: var(--ink-ghost); font-size: 16px; line-height: 1; }
.bz-faq details[open] summary::after { content: '–'; }
.bz-faq .bz-faq-a { padding: 0 2px 14px; font-size: 13px; color: var(--ink-mid); max-width: 66ch; }

/* table of contents — for anything past ~4 sections */
.bz-toc {
  background: var(--tray); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px 20px; break-inside: avoid; max-width: none;
}
.bz-toc .bz-toc-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-meta); margin-bottom: 10px; }
.bz-toc ol { list-style: none; counter-reset: bz-toc; display: grid; gap: 7px; padding: 0; max-width: none; }
.bz-toc li { counter-increment: bz-toc; position: relative; padding-left: 26px; font-size: 13px; }
.bz-toc li::before {
  content: counter(bz-toc, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-size: 11px; font-weight: 600; color: var(--majorelle); font-variant-numeric: tabular-nums;
}
.bz-toc a { color: var(--ink-mid); text-decoration: none; border: 0; }
.bz-toc a:hover { color: var(--ink); }

/* vertical timeline — history or plan told downward */
.bz-vtimeline { display: grid; gap: 0; }
.bz-vt-item { position: relative; padding: 0 0 22px 24px; break-inside: avoid; }
.bz-vt-item::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; border: 2px solid var(--majorelle); background: var(--card);
}
.bz-vt-item.done::before { background: var(--majorelle); }
.bz-vt-item::after { content: ''; position: absolute; left: 4px; top: 18px; bottom: 2px; width: 1px; background: var(--line-strong); }
.bz-vt-item:last-child { padding-bottom: 0; }
.bz-vt-item:last-child::after { display: none; }
.bz-vt-item .bz-vt-when { font-size: 11px; font-weight: 600; color: var(--majorelle); }
.bz-vt-item .bz-vt-what { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 2px 0 3px; }
.bz-vt-item p { margin: 0; font-size: 12.5px; color: var(--ink-mid); max-width: 60ch; }

/* resource links — a list of things to open, each with an arrow */
.bz-resources { display: grid; gap: 8px; max-width: 70ch; }
.bz-resources a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; text-decoration: none; transition: border-color 240ms ease;
}
.bz-resources a:hover { border-color: var(--line-strong); }
.bz-resources .bz-r-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.bz-resources .bz-r-desc { font-size: 12px; color: var(--ink-meta); }
.bz-resources .bz-r-arrow { color: var(--ink-ghost); flex: none; }
.bz-resources a:hover .bz-r-arrow { color: var(--majorelle); }

/* the navy divider band — ONE per document at most (law 6). A moment of
   weight between major parts. Ships with inline-SVG art like the cover. */
.bz-band {
  position: relative; overflow: hidden; background: var(--navy); color: #fff;
  border-radius: var(--r-card); padding: 30px 34px; break-inside: avoid;
}
.bz-band > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bz-band > :not(svg) { position: relative; }
.bz-band .bz-h-section { color: #fff; }
.bz-band .bz-h-section > span { color: var(--ink-on-dark-mid); }
.bz-band p { color: var(--ink-on-dark-mid); font-size: 13px; max-width: 60ch; }


/* ============================================================================
   09 · THE TRAINING KIT — for teaching material
   ----------------------------------------------------------------------------
   Trainings are documents with a spine: parts → lessons → steps/exercises →
   checks. Built on the article + doc kit; these add the teaching-specific
   surfaces. See templates/training.html for the assembled shape.
   ========================================================================== */

/* lesson head — opens every part/lesson */
.bz-lesson-head { padding-bottom: 20px; border-bottom: 1px solid var(--line-strong); margin-bottom: 26px; }
.bz-lesson-head .bz-kicker { margin-bottom: 6px; }
.bz-lesson-head .bz-lesson-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 12px; color: var(--ink-meta); }
.bz-lesson-head .bz-lesson-meta b { font-weight: 600; color: var(--ink-mid); }

/* parts nav — where you are in a multi-part training */
.bz-parts { display: flex; gap: 8px; flex-wrap: wrap; }
.bz-part {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; font-weight: 500; color: var(--ink-mid); text-decoration: none;
  background: var(--card);
}
.bz-part .bz-part-n { font-size: 10.5px; font-weight: 600; color: var(--ink-ghost); font-variant-numeric: tabular-nums; }
.bz-part.current { border-color: var(--majorelle); color: var(--ink); }
.bz-part.current .bz-part-n { color: var(--majorelle); }
.bz-part.done { color: var(--ink-meta); }
.bz-part.done .bz-part-n::after { content: ' ✓'; color: var(--bz-ok); }

/* learning objectives — the card at the top of a lesson */
.bz-objectives {
  background: var(--tray); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px 20px; break-inside: avoid;
}
.bz-objectives .bz-obj-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-meta); margin-bottom: 10px; }
.bz-objectives ul { list-style: none; display: grid; gap: 8px; padding: 0; max-width: none; }
.bz-objectives li { position: relative; padding-left: 20px; font-size: 13px; color: var(--ink-mid); }
.bz-objectives li::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 8px; height: 8px;
  border-radius: 2px; border: 1.5px solid var(--majorelle);
}

/* exercise — a bordered block the learner acts on */
.bz-exercise {
  border: 1px solid var(--line-strong); border-radius: var(--r-card);
  overflow: hidden; break-inside: avoid;
}
.bz-exercise .bz-ex-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 18px; background: var(--tray); border-bottom: 1px solid var(--line);
}
.bz-exercise .bz-ex-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--majorelle); }
.bz-exercise .bz-ex-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bz-exercise .bz-ex-time { margin-left: auto; font-size: 11px; color: var(--ink-meta); }
.bz-exercise .bz-ex-body { padding: 15px 18px; font-size: 13px; color: var(--ink-mid); }
.bz-exercise .bz-ex-body > * + * { margin-top: 10px; }
.bz-exercise details { margin-top: 12px; }
.bz-exercise summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--majorelle); list-style: none; }
.bz-exercise summary::-webkit-details-marker { display: none; }
.bz-exercise summary::before { content: '▸ '; }
.bz-exercise details[open] summary::before { content: '▾ '; }
.bz-exercise details > div { margin-top: 8px; padding: 10px 14px; background: var(--tray); border-radius: 8px; font-size: 12.5px; }

/* check your understanding — questions with reveal answers */
.bz-check {
  background: var(--card); border: 1px solid var(--line); border-left: 2px solid var(--majorelle);
  border-radius: var(--r-card); padding: 15px 18px; break-inside: avoid;
}
.bz-check .bz-check-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--majorelle); margin-bottom: 10px; }
.bz-check details + details { margin-top: 9px; }
.bz-check summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 500; color: var(--ink); }
.bz-check summary::-webkit-details-marker { display: none; }
.bz-check summary::before { content: '▸ '; color: var(--ink-ghost); }
.bz-check details[open] summary::before { content: '▾ '; }
.bz-check details > p { margin: 6px 0 4px 16px; font-size: 12.5px; color: var(--ink-mid); }

/* session agenda — time · item rows */
.bz-agenda { display: grid; gap: 0; max-width: 70ch; }
.bz-agenda-row {
  display: grid; grid-template-columns: 86px 1fr auto; gap: 16px; align-items: baseline;
  padding: 10px 2px; border-bottom: 1px solid var(--line);
}
.bz-agenda-row:last-child { border-bottom: 0; }
.bz-agenda-row .bz-ag-time { font-size: 11.5px; font-weight: 600; color: var(--majorelle); font-variant-numeric: tabular-nums; }
.bz-agenda-row .bz-ag-item { font-size: 13px; color: var(--ink); font-weight: 500; }
.bz-agenda-row .bz-ag-item small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-mid); }
.bz-agenda-row .bz-ag-len { font-size: 11px; color: var(--ink-meta); }

@media (max-width: 640px) {
  .bz-dodont { grid-template-columns: 1fr; }
  .bz-kv { grid-template-columns: 1fr; }
  .bz-kv > dt { border-bottom: 0; padding-bottom: 0; }
}