@charset "utf-8";

/* =====================================================================
   ERGOSPHERE - THE WORKBOOK   namespaced .cb_
   workbook.html (the landing page) and every workbook-*.html worked example.
   Sibling of one-file.html (.of_), business-case.html (.bc_),
   verification.html (.vv_).

   The section's job: teach how good Human Factors is done, with
   ErgoSphere as the instrument. The signature device is HTA notation
   used as the page's own structure. The landing page opens with an HTA
   of the practice itself ("0  Deliver a defensible Human Factors
   assessment", Plan 0, seven subordinate goals). Every case page then
   numbers its sections as those seven nodes, carries a Plan line under
   each heading, and numbers its steps 4.1, 4.2 and so on. The reader
   learns the notation by reading a page written in it.

   Two registers are kept visibly apart on every case page:
     Practice      the HF lesson, tool-agnostic
     In ErgoSphere the same step as it is done in the app
   The chip on each step says which one it is.

   Palette, written literally so the page survives a CMS that strips
   custom properties.
     #0a1628  deep navy      - ground
     #0d1a2d  raised navy    - alternating sections
     #070e1b  darkest navy   - wells, the side rail, the closing block
     #00d4ff  site cyan      - the accent. Company primary: this is
                              company-level content, no audience accent
     #f5b249  amber          - semantic only: the road not taken, and
                              the "capture pending" placeholders
   Display: Poppins.  Body: Mulish.  HTA notation, plan lines, clause
   ids, error codes and filenames: IBM Plex Mono.

   Link AFTER ergosphere-mobile.css. No inline style or script on the
   pages: the side-rail tracking lives in js/ergosphere-workbook.js.
   ===================================================================== */

.cb_section { position: relative; overflow: hidden; width: 100%; clear: both; float: left; }
.cb_ground { background: #0a1628; padding: 84px 0; }
.cb_raised { background: #0d1a2d; padding: 84px 0; }
.cb_wrap { max-width: 760px; margin: 0 auto; position: relative; z-index: 2; clear: both; }
.cb_wrap_wide { max-width: 1120px; margin: 0 auto; position: relative; z-index: 2; clear: both; }
.cb_wrap + .cb_wrap, .cb_wrap_wide + .cb_wrap, .cb_wrap + .cb_wrap_wide, .cb_wrap_wide + .cb_wrap_wide { margin-top: 48px; }

.cb_page .grax_tm_topbar .logo img { max-height: 100px; }
.cb_page .grax_tm_mobile_menu .logo img { max-height: 80px; }

/* ---------- shared type ---------- */
.cb_kicker {
  display: block; font-family: 'Poppins', sans-serif; font-size: 12px; letter-spacing: 4px;
  text-transform: uppercase; color: #00d4ff; font-weight: 500; margin-bottom: 14px;
}
.cb_h2 {
  font-family: 'Poppins', sans-serif; font-size: 32px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; margin: 0 0 28px;
}
.cb_h2 span { color: #00d4ff; }
.cb_mono { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; }
.cb_essay p { font-size: 17px; line-height: 1.9; color: rgba(255,255,255,.78); margin: 0 0 24px; }
.cb_essay p:last-child { margin-bottom: 0; }
.cb_essay p strong { color: #fff; font-weight: 600; }
.cb_essay ul, .cb_essay ol { margin: 0 0 24px; padding: 0; }
.cb_essay ul { list-style: none; }
.cb_essay ol { list-style: none; counter-reset: cb_ol; }
.cb_essay ul:last-child, .cb_essay ol:last-child { margin-bottom: 0; }
.cb_essay ul li, .cb_essay ol li {
  position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.8;
  color: rgba(255,255,255,.75); margin: 0 0 8px;
}
.cb_essay ul li::before {
  content: ""; position: absolute; left: 4px; top: .78em; width: 8px; height: 8px;
  border-radius: 50%; background: rgba(0,212,255,.55);
}
.cb_essay ol li { padding-left: 34px; }
.cb_essay ol li::before {
  counter-increment: cb_ol; content: counter(cb_ol); position: absolute; left: 0; top: .32em;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; color: #00d4ff;
}
.cb_essay a { color: #00d4ff; text-decoration: none; border-bottom: 1px solid rgba(0,212,255,.4); }
.cb_essay a:hover { border-color: #00d4ff; }
.cb_essay code, .cb_code {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: .88em; color: #e6e6e6;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; padding: 1px 6px;
  white-space: nowrap;
}

/* pull-quote: the lesson in one line */
.cb_pull {
  border-left: 3px solid #00d4ff; padding: 8px 0 8px 28px; margin: 0 0 30px;
  font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 300; font-size: 24px;
  line-height: 1.45; color: #fff;
}

.cb_section a:focus-visible, .cb_section button:focus-visible, .footer_section a:focus-visible {
  outline: 2px solid #00d4ff; outline-offset: 3px; border-radius: 2px;
}

/* =====================================================================
   LANDING HERO
   ===================================================================== */
.cb_hero { text-align: center; padding: 168px 0 72px; background: #0a1628; }
.cb_hero_glow {
  position: absolute; left: 50%; top: 40%; width: 1100px; height: 700px; transform: translate(-50%,-50%);
  background: radial-gradient(ellipse, rgba(0,212,255,.07), rgba(0,212,255,.03) 40%, transparent 66%);
  pointer-events: none; z-index: 0;
}
.cb_title {
  font-family: 'Poppins', sans-serif; font-size: 56px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: 4px; line-height: 1.08; margin: 0;
}
.cb_title span { color: #00d4ff; }
.cb_lead {
  font-family: 'Poppins', sans-serif; font-weight: 300; font-style: italic; font-size: 21px;
  line-height: 1.55; color: rgba(255,255,255,.85); max-width: 720px; margin: 28px auto 0;
}

/* =====================================================================
   THE TREE - an HTA of the practice, drawn in HTML. Root, a plan line,
   seven subordinate goals joined by a bus line. This is the legend for
   every case page: each case numbers its sections from these nodes.
   ===================================================================== */
.cb_tree { margin: 64px auto 0; text-align: left; }
.cb_tree_root { display: flex; justify-content: center; }
.cb_node {
  display: block; text-decoration: none; background: #0d1a2d; border: 1px solid rgba(0,212,255,.35);
  border-radius: 6px; padding: 14px 16px 15px; color: #fff; position: relative; z-index: 1;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.cb_node b {
  display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500;
  color: #00d4ff; letter-spacing: 1px; margin-bottom: 5px;
}
.cb_node span { display: block; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.35; color: #fff; }
.cb_node small { display: block; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.6); margin-top: 6px; }
.cb_node.is-root { border-color: #00d4ff; background: rgba(0,212,255,.08); min-width: 360px; text-align: center; }
.cb_node.is-root span { font-size: 17px; }
a.cb_node:hover { border-color: #00d4ff; background: rgba(0,212,255,.12); transform: translateY(-2px); }

.cb_plan {
  display: block; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 13px;
  line-height: 1.7; color: rgba(255,255,255,.62); letter-spacing: .1px;
}
.cb_plan b { color: #00d4ff; font-weight: 500; }
.cb_tree_plan { text-align: center; margin: 14px 0 0; }

/* the bus: a stem from the root, a horizontal bar, and a stub into each child */
.cb_tree_stem { width: 1px; height: 34px; margin: 0 auto; background: rgba(0,212,255,.45); }
.cb_tree_children { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; position: relative; padding-top: 26px; margin: 0; }
.cb_tree_children::before {
  content: ""; position: absolute; top: 0; height: 1px; background: rgba(0,212,255,.45);
  left: calc(100% / 14); right: calc(100% / 14);
}
.cb_tree_children > li { list-style: none; position: relative; margin: 0; padding: 0; }
.cb_tree_children > li::before {
  content: ""; position: absolute; top: -26px; left: 50%; width: 1px; height: 26px; background: rgba(0,212,255,.45);
}
.cb_tree_children .cb_node { height: 100%; }

/* =====================================================================
   STAGES - what each node teaches, as seven rows under the tree
   ===================================================================== */
.cb_stages { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.1); }
.cb_stages li {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,.1); margin: 0;
}
.cb_stages b {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 26px; font-weight: 500; color: #00d4ff; line-height: 1;
}
.cb_stages h3 { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 8px; line-height: 1.3; }
.cb_stages p { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.72); margin: 0; }

/* =====================================================================
   CASE CARDS
   ===================================================================== */
.cb_cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; }
.cb_cases > li { margin: 0; }
.cb_case {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  background: #0a1628; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 26px 26px 24px;
  transition: border-color .25s ease, transform .25s ease, background .25s ease; position: relative;
}
.cb_case:hover { border-color: rgba(0,212,255,.6); transform: translateY(-3px); background: #0b1830; }
.cb_case_top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.cb_case_no { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 2px; color: #00d4ff; }
.cb_case_domain { font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.55); }
.cb_case h3 { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; color: #fff; margin: 0 0 12px; }
.cb_case_sys { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; color: rgba(255,255,255,.55); margin: 0 0 14px; line-height: 1.6; }
.cb_case p.cb_case_blurb { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.75); margin: 0 0 22px; }
.cb_case_foot { margin-top: auto; }
.cb_case_meta {
  display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px;
  color: rgba(255,255,255,.5);
}
.cb_case_meta .cb_status { color: #00d4ff; }
.cb_case_meta .cb_status.is-soon { color: #f5b249; }

/* method chain: chips joined by short lines, in the order they are run */
.cb_chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; padding: 0; list-style: none; }
.cb_chain li { margin: 0; display: inline-flex; align-items: center; }
.cb_chain li + li::before { content: ""; width: 14px; height: 1px; background: rgba(0,212,255,.55); margin: 0 4px; }
.cb_chain span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; color: #e6e6e6; white-space: nowrap;
  background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.3); border-radius: 4px; padding: 3px 8px;
}
.cb_chain_label { display: block; font-family: 'Poppins', sans-serif; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 8px; }
.cb_std_row { margin-top: 14px; }
.cb_std_row span {
  display: inline-block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 3px 8px; margin: 0 4px 6px 0;
}

/* the composite disclosure and the pointer row */
.cb_note {
  background: #070e1b; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 26px 30px;
  font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.75);
}
.cb_note strong { color: #fff; font-weight: 600; }
.cb_pointers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; }
.cb_pointers li { margin: 0; }
.cb_pointer {
  display: block; text-decoration: none; padding: 22px 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  background: #0a1628; transition: border-color .25s ease;
}
.cb_pointer:hover { border-color: rgba(0,212,255,.6); }
.cb_pointer b { display: block; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.cb_pointer span { display: block; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.65); }

/* =====================================================================
   CASE PAGE HERO + LEDGER
   ===================================================================== */
.cb_casehero { padding: 150px 0 64px; background: #0a1628; }
.cb_crumb { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: 1px; color: rgba(255,255,255,.5); margin: 0 0 22px; }
.cb_crumb a { color: #00d4ff; text-decoration: none; }
.cb_crumb i { font-style: normal; margin: 0 8px; color: rgba(255,255,255,.3); }
.cb_casetitle {
  font-family: 'Poppins', sans-serif; font-size: 46px; font-weight: 700; color: #fff; text-transform: uppercase;
  letter-spacing: 3px; line-height: 1.1; margin: 0;
}
.cb_casetitle span { color: #00d4ff; }
.cb_caselead { font-family: 'Poppins', sans-serif; font-weight: 300; font-style: italic; font-size: 20px; line-height: 1.55; color: rgba(255,255,255,.85); max-width: 760px; margin: 24px 0 0; }

.cb_ledger {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 44px 0 0; padding: 0;
  border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #070e1b; overflow: hidden;
}
.cb_ledger > div { padding: 18px 22px; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.cb_ledger > div:nth-child(4n) { border-right: 0; }
.cb_ledger > div:nth-last-child(-n+4) { border-bottom: 0; }
.cb_ledger dt { font-family: 'Poppins', sans-serif; font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.45); margin: 0 0 6px; }
.cb_ledger dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: #fff; }
.cb_ledger dd.cb_mono { font-size: 13px; color: #e6e6e6; }
.cb_ledger dd .cb_chain span { font-size: 11px; }

/* =====================================================================
   CASE BODY - side rail + content
   ===================================================================== */
.cb_body { background: #0a1628; padding: 0 0 84px; }
.cb_layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 64px; align-items: start; max-width: 1120px; margin: 0 auto; }
.cb_rail { position: sticky; top: 96px; }
.cb_rail_label { display: block; font-family: 'Poppins', sans-serif; font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.45); margin: 0 0 12px; }
.cb_rail ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid rgba(255,255,255,.12); }
.cb_rail li { margin: 0; }
.cb_rail a {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline; padding: 9px 0 9px 16px; margin-left: -1px;
  border-left: 2px solid transparent; text-decoration: none; color: rgba(255,255,255,.6); font-size: 13.5px; line-height: 1.4;
  transition: color .2s ease, border-color .2s ease;
}
.cb_rail a b { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 12px; color: rgba(0,212,255,.7); }
.cb_rail a:hover { color: #fff; }
.cb_rail li.is-active a { color: #fff; border-left-color: #00d4ff; }
.cb_rail li.is-active a b { color: #00d4ff; }
.cb_rail_key { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.5); }
.cb_rail_key .cb_chip { margin-right: 6px; }

.cb_content { min-width: 0; }

/* register chips: Practice / In ErgoSphere */
.cb_chip {
  display: inline-block; font-family: 'Poppins', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 3px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.7); vertical-align: middle;
}
.cb_chip.is-tool { border-color: rgba(0,212,255,.55); color: #00d4ff; background: rgba(0,212,255,.07); }

/* a stage: one of the seven nodes */
.cb_stage { padding: 72px 0 0; scroll-margin-top: 96px; }
.cb_stage:first-child { padding-top: 56px; }
.cb_stage_head { display: grid; grid-template-columns: 72px 1fr; gap: 22px; align-items: start; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 34px; }
.cb_stage_no { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 44px; font-weight: 500; color: #00d4ff; line-height: 1; padding-top: 4px; }
.cb_stage_head h2 { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; margin: 0 0 10px; }
.cb_stage_head .cb_plan { margin: 0; }

/* a step: 5.1, 5.2 ... */
.cb_step { margin: 0 0 44px; scroll-margin-top: 96px; }
.cb_step:last-child { margin-bottom: 0; }
.cb_step_head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.cb_step_head h3 { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 600; color: #fff; margin: 0; line-height: 1.3; }
.cb_step_head h3 b { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 15px; color: #00d4ff; margin-right: 10px; }
.cb_step .cb_essay p { font-size: 16.5px; }

/* screenshot slot. Until a capture exists it renders as a labelled
   frame that says what the shot must show, so the page can be read and
   the capture list is visible on the page itself. */
.cb_shot { margin: 28px 0; }
.cb_shot_frame {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden;
  background: #070e1b; border: 1px solid rgba(255,255,255,.14);
}
.cb_shot_frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb_shot_frame.is-pending { border: 1px dashed rgba(245,178,73,.55); display: flex; align-items: center; justify-content: center; text-align: center; padding: 28px; }
.cb_shot_frame.is-pending::before {
  content: "Capture pending"; position: absolute; top: 12px; left: 12px; font-family: 'Poppins', sans-serif; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: #f5b249; border: 1px solid rgba(245,178,73,.5); border-radius: 3px; padding: 3px 8px;
}
.cb_shot_frame.is-pending .cb_shot_brief { max-width: 560px; }
.cb_shot_brief b { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; color: #e6e6e6; margin-bottom: 10px; letter-spacing: .2px; }
.cb_shot_brief span { display: block; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.6); }
.cb_shot figcaption { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.6); margin: 12px 4px 0; }
.cb_shot figcaption b { color: rgba(255,255,255,.85); font-weight: 600; }
.cb_shot.is-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cb_shot.is-pair figcaption { grid-column: 1 / -1; }

/* the fork: a decision point. Taken on the left, not taken on the right. */
.cb_fork { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 30px 0; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; background: #070e1b; }
.cb_fork_label { grid-column: 1 / -1; padding: 12px 22px; font-family: 'Poppins', sans-serif; font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.1); }
.cb_fork_label b { color: #fff; font-weight: 600; letter-spacing: 1px; text-transform: none; font-size: 15px; margin-left: 12px; }
.cb_fork > div { padding: 22px 24px 24px; }
.cb_fork .is-taken { border-right: 1px solid rgba(255,255,255,.1); }
.cb_fork h4 { margin: 0 0 8px; font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; }
.cb_fork .is-taken h4 { color: #00d4ff; }
.cb_fork .is-not h4 { color: #f5b249; }
.cb_fork h4 + b { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 15px; color: #fff; margin-bottom: 10px; }
.cb_fork p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.72); margin: 0; }

/* reading the result: how to interpret what the tool produced */
.cb_read { margin: 30px 0; padding: 22px 26px 24px; border-left: 3px solid #00d4ff; background: rgba(0,212,255,.05); border-radius: 0 8px 8px 0; }
.cb_read h4 { margin: 0 0 12px; font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #00d4ff; }
.cb_read p { font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.78); margin: 0 0 12px; }
.cb_read p:last-child { margin-bottom: 0; }
.cb_read p strong { color: #fff; font-weight: 600; }

/* how to do it: the method's own steps, with the same step in the app
   under each. The card lives in the analysis band only. */
.cb_howto { margin: 30px 0; padding: 22px 26px 24px; border: 1px solid rgba(0,212,255,.3); border-radius: 10px; background: #070e1b; }
.cb_howto h4 { margin: 0 0 16px; font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #00d4ff; }
.cb_howto ol { list-style: none; margin: 0; padding: 0; counter-reset: cb_howto; }
.cb_howto li { position: relative; padding-left: 42px; margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.78); }
.cb_howto li:last-child { margin-bottom: 0; }
.cb_howto li::before { counter-increment: cb_howto; content: counter(cb_howto); position: absolute; left: 0; top: .1em; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; font-weight: 500; color: #00d4ff; }
.cb_howto li b { color: #fff; font-weight: 600; }
.cb_howto li em { display: block; font-style: normal; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.62); margin-top: 4px; padding-left: 12px; border-left: 2px solid rgba(0,212,255,.35); }
.cb_howto li em::before { content: "In ErgoSphere"; display: inline-block; font-family: 'Poppins', sans-serif; font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: #00d4ff; margin-right: 8px; vertical-align: 1px; }

/* the practitioner's aside: a caution, a habit, a thing people get wrong */
.cb_aside { margin: 30px 0; padding: 18px 24px; border: 1px solid rgba(245,178,73,.35); border-radius: 8px; background: rgba(245,178,73,.05); }
.cb_aside h4 { margin: 0 0 8px; font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #f5b249; }
.cb_aside p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.75); margin: 0; }

/* tables: clause to requirement, error mode tables, comparisons */
.cb_tablewrap { overflow-x: auto; margin: 26px 0; -webkit-overflow-scrolling: touch; }
.cb_table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.8); min-width: 620px; }
.cb_table th { text-align: left; font-family: 'Poppins', sans-serif; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 500; padding: 0 14px 12px 0; border-bottom: 1px solid rgba(255,255,255,.18); vertical-align: bottom; }
.cb_table td { padding: 13px 14px 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; }
.cb_table td.cb_mono, .cb_table th.cb_mono { font-size: 13px; color: #e6e6e6; white-space: nowrap; }
.cb_table td strong { color: #fff; font-weight: 600; }
.cb_table tr:last-child td { border-bottom: 0; }
.cb_table .is-in { color: #00d4ff; }
.cb_table .is-out { color: rgba(255,255,255,.45); }
.cb_table .is-new { color: #f5b249; }

/* the HTA excerpt: an indented outline set in mono, with a plan line */
.cb_hta { margin: 26px 0; padding: 22px 26px; background: #070e1b; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 13.5px; line-height: 1.85; color: #e6e6e6; overflow-x: auto; }
.cb_hta ul { list-style: none; margin: 0; padding: 0 0 0 26px; }
.cb_hta > ul { padding-left: 0; }
.cb_hta li { margin: 0; padding: 0; white-space: nowrap; }
.cb_hta b { color: #00d4ff; font-weight: 500; margin-right: 10px; }
.cb_hta i { display: block; font-style: normal; color: rgba(255,255,255,.55); }
.cb_hta i::before { content: "Plan "; color: rgba(0,212,255,.7); }

/* common mistakes: a two-column pair, what people do and what to do instead */
.cb_mistakes { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.1); }
.cb_mistakes li { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.1); margin: 0; }
.cb_mistakes h4 { font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; margin: 0 0 8px; }
.cb_mistakes .is-wrong h4 { color: #f5b249; }
.cb_mistakes .is-right h4 { color: #00d4ff; }
.cb_mistakes p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.75); margin: 0; }

/* the do-it-yourself band and the case pager */
.cb_diy { margin-top: 72px; padding: 36px 38px; border: 1px solid rgba(0,212,255,.35); border-radius: 12px; background: rgba(0,212,255,.05); }
.cb_diy h2 { font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 14px; }
.cb_diy p { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.78); margin: 0 0 22px; }
.cb_diy .cb_cta_row { margin-top: 0; }
.cb_cta_row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.cb_cta_row .btn_primary, .cb_cta_row .btn_secondary { margin: 0; }
.cb_diy_files { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cb_diy_files li { margin: 0; }
.cb_diy_files span, .cb_diy_files a {
  display: inline-block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; color: #e6e6e6; text-decoration: none;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 5px; padding: 6px 12px;
}
.cb_diy_files span.is-pending { color: #f5b249; border-color: rgba(245,178,73,.45); }

.cb_pager { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; }
.cb_pager a { display: block; text-decoration: none; padding: 20px 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; transition: border-color .25s ease; }
.cb_pager a:hover { border-color: rgba(0,212,255,.6); }
.cb_pager a.is-next { text-align: right; }
.cb_pager small { display: block; font-family: 'Poppins', sans-serif; font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 6px; }
.cb_pager b { display: block; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: #fff; }
.cb_pager a.is-disabled { opacity: .45; pointer-events: none; }

/* a stamp: which build the captures came from. A product version, not a review date. */
.cb_build { display: inline-block; margin-top: 18px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 4px 10px; }
.cb_build b { color: #e6e6e6; font-weight: 500; }

/* =====================================================================
   MOTION + RESPONSIVE
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cb_page * { transition: none !important; animation: none !important; }
}

@media (max-width: 1200px) {
  .cb_layout { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
  .cb_tree_children { grid-template-columns: repeat(4, 1fr); padding-top: 0; margin-top: 22px; }
  .cb_tree_children::before, .cb_tree_children > li::before { display: none; }
  .cb_tree_stem { display: none; }
}

@media (max-width: 1040px) {
  .cb_ground, .cb_raised { padding: 64px 0; }
  .cb_hero { padding: 132px 0 56px; }
  .cb_title { font-size: 42px; letter-spacing: 3px; }
  .cb_casetitle { font-size: 34px; letter-spacing: 2px; }
  .cb_cases, .cb_pointers { grid-template-columns: 1fr 1fr; }
  .cb_ledger { grid-template-columns: 1fr 1fr; }
  .cb_ledger > div:nth-child(4n) { border-right: 1px solid rgba(255,255,255,.1); }
  .cb_ledger > div:nth-child(2n) { border-right: 0; }
  .cb_ledger > div:nth-last-child(-n+4) { border-bottom: 1px solid rgba(255,255,255,.1); }
  .cb_ledger > div:nth-last-child(-n+2) { border-bottom: 0; }
  .cb_layout { display: block; }
  .cb_rail { position: static; margin: 40px 0 0; padding: 18px 20px; background: #070e1b; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
  .cb_rail ol { border-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .cb_rail a { padding-left: 0; border-left: 0; }
  .cb_rail li.is-active a { border-left: 0; }
  .cb_rail_key { display: none; }
  .cb_stage { padding-top: 56px; }
}

@media (max-width: 767px) {
  .cb_title { font-size: 32px; letter-spacing: 2px; }
  .cb_lead, .cb_caselead { font-size: 18px; }
  .cb_casetitle { font-size: 28px; }
  .cb_h2 { font-size: 24px; }
  .cb_tree_children { grid-template-columns: 1fr; gap: 10px; }
  .cb_node.is-root { min-width: 0; width: 100%; }
  .cb_stages li { grid-template-columns: 44px 1fr; gap: 14px; }
  .cb_stages b { font-size: 20px; }
  .cb_cases, .cb_pointers { grid-template-columns: 1fr; }
  .cb_ledger { grid-template-columns: 1fr; }
  .cb_ledger > div { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; }
  .cb_ledger > div:last-child { border-bottom: 0 !important; }
  .cb_rail ol { grid-template-columns: 1fr; }
  .cb_stage_head { grid-template-columns: 48px 1fr; gap: 14px; }
  .cb_stage_no { font-size: 30px; }
  .cb_stage_head h2 { font-size: 21px; letter-spacing: 1px; }
  .cb_step_head h3 { font-size: 18px; }
  .cb_shot.is-pair { grid-template-columns: 1fr; }
  .cb_fork { grid-template-columns: 1fr; }
  .cb_fork .is-taken { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .cb_mistakes li { grid-template-columns: 1fr; gap: 14px; }
  .cb_pager { grid-template-columns: 1fr; }
  .cb_pager a.is-next { text-align: left; }
  .cb_diy { padding: 26px 22px; }
  .cb_note { padding: 20px 22px; }
  .cb_pull { font-size: 20px; padding-left: 20px; }
  .cb_hta { font-size: 12.5px; padding: 16px 18px; }
  /* Tables and HTA trees scroll sideways inside their box on a phone.
     Say so, because a clipped right edge reads as a bug, not a scroll.
     Sticky left so the label stays put while the content moves. */
  .cb_tablewrap::before, .cb_hta::before {
    content: "Swipe sideways for the full table"; display: block; position: sticky; left: 0;
    font-family: 'Poppins', sans-serif; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,.45); margin: 0 0 8px; white-space: normal;
  }
  .cb_hta::before { content: "Swipe sideways for the full tree"; font-family: 'Poppins', sans-serif; }
  .cb_howto { padding: 18px 18px 20px; }
  .cb_howto li { padding-left: 32px; }
}