/* Crux V5 - Capability page components (Phase B.2)
 * Builds on home.css + platform.css (body.home). Adds only capability-specific
 * compositions: intake channels, consequences, the captured-record spec, and the
 * exceptions list. IBM Plex Mono is reserved for real data (values, codes, status).
 */

/* ======================================================================
 * Breadcrumb on the light capability page
 * ==================================================================== */
.home .breadcrumb { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.home .breadcrumb__list a { color: var(--ink-muted); }
.home .breadcrumb__list a:hover { color: var(--ink); }
.home .breadcrumb__current { color: var(--ink); }
.home .breadcrumb__sep { color: var(--ink-muted); }

/* ======================================================================
 * Intake channels + consequences (the intake problem)
 * ==================================================================== */
.home .channels { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 44rem) { .home .channels { grid-template-columns: repeat(3, 1fr); } }
.home .channel {
  border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--card);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem;
}
.home .channel__name { font-family: var(--font-body); font-weight: 600; color: var(--ink); font-size: 1rem; }
.home .channel__note { font-family: var(--font-body); font-size: 0.78rem; color: var(--ink-muted); }
.home .channels__legend { margin-top: 1rem; font-size: 0.78rem; color: var(--ink-muted); max-width: 64ch; line-height: 1.5; }

.home .consequences { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 0.9rem; }
@media (min-width: 52rem) { .home .consequences { grid-template-columns: 1fr 1fr; gap: 0.9rem 2.5rem; } }
.home .consequence { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.6rem; border-top: 1px solid var(--rule); padding-top: 0.85rem; }
.home .consequence__mark { width: 8px; height: 8px; margin-top: 0.5em; border-radius: 1px; background: var(--blue); }
.home .consequence__t { color: var(--ink); font-weight: 600; }
.home .consequence__d { color: var(--ink-body); font-size: 0.95rem; line-height: 1.5; margin-top: 0.2rem; }

/* Intake convergence: many sources funnel into one queue, pieces still missing. */
.home .intake-converge { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; text-align: center; }
.home .intake-converge__cap { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.home .intake-converge__cap--gap { color: var(--navy); }
.home .intake-converge__arrow { color: var(--blue); font-size: 1.15rem; line-height: 1; }
.home .intake-converge__node { max-width: 100%; font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); background: var(--card); border: 1px solid var(--rule-strong); border-left: 3px solid var(--yellow); border-radius: 999px; padding: 0.4rem 1.1rem; }
.home .intake-gap__h { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--ink); }

/* ======================================================================
 * What Crux captures (structured invoice record spec)
 * ==================================================================== */
.home .capture {
  border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--card);
  box-shadow: 0 18px 44px rgba(20, 26, 60, 0.10); overflow: hidden;
}
.home .capture__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.3rem; border-bottom: 2px solid var(--navy);
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
.home .capture__rows { display: grid; }
.home .capfield {
  display: grid; grid-template-columns: 1fr; gap: 0.15rem;
  padding: 0.8rem 1.3rem; border-bottom: 1px solid var(--rule);
}
@media (min-width: 40rem) { .home .capfield { grid-template-columns: 12rem 1fr; gap: 1rem; align-items: baseline; } }
.home .capfield:last-child { border-bottom: 0; }
.home .capfield__k { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--ink-muted); }
.home .capfield__v { font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.home .capfield__v .pillstat { display: inline-flex; align-items: center; gap: 0.4em; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 1px 8px; font-size: 0.8em; color: var(--navy); }
.home .capfield__v .pillstat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.home .capture__note { margin-top: 1rem; font-size: 0.78rem; color: var(--ink-muted); max-width: 64ch; line-height: 1.5; }
/* Invoice Approval "approval record": balance the short intro against the tall
 * capture card. Top-align the two columns, give the card slightly more width, and
 * let the intro column carry the (relocated) note, so the section no longer floats
 * a lone heading beside a full-height card. Scoped to .split--record (this section). */
.home .split--record { align-items: start; }
@media (min-width: 60rem) { .home .split--record { grid-template-columns: 0.9fr 1.1fr; } }
.home .split--record .capture__note { max-width: 42ch; }

/* ======================================================================
 * Exceptions and missing information
 * ==================================================================== */
/* Static explanatory register (not interactive): flat rows with a rule,
 * deliberately unlike the clickable segmented tiles used elsewhere. */
.home .exceptions { display: grid; gap: 0; border-top: 1px solid var(--rule-strong); }
.home .exc {
  display: grid; gap: 0.3rem 1.5rem; padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--rule); background: none;
}
@media (min-width: 52rem) { .home .exc { grid-template-columns: 16rem 1fr; align-items: baseline; } }
.home .exc__t { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.home .exc__t::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 1px; background: var(--blue); transform: translateY(-1px); }
.home .exc__d { color: var(--ink-body); font-size: 0.95rem; line-height: 1.5; }
.home .exc__d .flag { font-family: var(--font-mono); font-size: 0.85em; color: var(--navy); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0 7px; }

/* ======================================================================
 * Decision states register (approve / return / hold ...)
 * ==================================================================== */
.home .dstates { display: grid; gap: 0.75rem; }
.home .dstate {
  display: grid; gap: 0.75rem 1.75rem; padding: 1.2rem 1.4rem;
  border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--card);
}
@media (min-width: 58rem) { .home .dstate { grid-template-columns: minmax(0, 13rem) 1fr; align-items: start; } }
.home .dstate__pill {
  display: inline-flex; align-items: center; gap: 0.45em; align-self: start;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--navy);
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: 3px 11px;
  /* The pill sits in a fixed-width grid column. Nothing may push past it:
     "Returned for missing information" used to spill across the definition
     list beside it. Labels are now short (the qualifier moved to the note
     below), and this is the guard so a longer one can never overflow again. */
  max-width: 100%; min-width: 0; white-space: normal; text-align: left;
}
.home .dstate__pill::before { flex: 0 0 auto; }
.home .dstate__id { min-width: 0; }
.home .dstate__note {
  display: block; margin-top: 0.6rem;
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.55;
  color: var(--ink-muted); max-width: 22ch;
}
.home .dstate__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.home .dstate__pill--move::before { background: #2CA01C; }
.home .dstate__pill--back::before { background: var(--blue); }
.home .dstate__pill--hold::before { background: var(--ink-muted); }
.home .dstate__grid { display: grid; gap: 0.85rem 2rem; }
@media (min-width: 40rem) { .home .dstate__grid { grid-template-columns: 1fr 1fr; } }
.home .dstate__grid dt { font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.home .dstate__grid dd { margin-top: 0.2rem; color: var(--ink-body); font-size: 0.95rem; line-height: 1.5; }

/* ======================================================================
 * Variance signals (conceptual: healthy / warning / needs attention)
 * ==================================================================== */
.home .varsig { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .home .varsig { grid-template-columns: repeat(3, 1fr); } }
.home .varsig__item {
  border: 1px solid var(--rule-strong); border-top: 4px solid var(--rule-strong);
  border-radius: 10px; background: var(--card); padding: clamp(1.2rem, 3vw, 1.6rem);
}
.home .varsig__item--ok { border-top-color: #2CA01C; }
.home .varsig__item--warn { border-top-color: var(--yellow); }
.home .varsig__item--attn { border-top-color: var(--navy); }
.home .varsig__label { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.home .varsig__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); }
.home .varsig__item--ok .varsig__label::before { background: #2CA01C; }
.home .varsig__item--warn .varsig__label::before { background: var(--yellow); }
.home .varsig__item--attn .varsig__label::before { background: var(--navy); }
.home .varsig__t { font-family: var(--font-body); font-weight: 600; color: var(--ink); font-size: 1.1rem; margin-top: 0.6rem; }
.home .varsig__d { color: var(--ink-body); font-size: 0.95rem; line-height: 1.5; margin-top: 0.4rem; }

/* ======================================================================
 * QuickBooks boundary callout (compact)
 * ==================================================================== */
.home .qbnote {
  display: grid; gap: 1rem; align-items: center; padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--paper-2);
}
@media (min-width: 52rem) { .home .qbnote { grid-template-columns: auto 1fr; gap: 2rem; } }
.home .qbnote__brand { display: flex; align-items: center; }
.home .qbnote__list { display: grid; gap: 0.5rem; color: var(--ink-body); font-size: 0.98rem; }
.home .qbnote__list li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem; }
.home .qbnote__list li::before { content: ""; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 1px; background: var(--blue); }
.home .qbnote__disc { margin-top: 1rem; font-size: 0.72rem; color: var(--ink-muted); line-height: 1.5; max-width: 66ch; }

/* ======================================================================
 * Phase B.5 - Job Cost Reporting
 * Compositions specific to explaining the financial make-up of a job:
 * the hero cost register, the question/friction band, the level ladder,
 * the definition register, the category ledger, and the action stack.
 * ==================================================================== */

/* --- Hero: cost-composition register ------------------------------- */
@media (min-width: 60rem) { .home .hero--jc .hero__grid { grid-template-columns: 0.9fr 1.1fr; } }
.home .jcx { margin: 0; display: grid; gap: 0.85rem; width: 100%; min-width: 0; }
.home .jcx__panel {
  border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--card);
  box-shadow: 0 24px 60px rgba(20, 26, 60, 0.16); overflow: hidden;
}
.home .jcx__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.4rem 1rem; padding: 0.9rem 1.15rem; border-bottom: 2px solid var(--navy);
}
.home .jcx__proj { font-family: var(--font-body); font-weight: 600; color: var(--ink); font-size: 0.98rem; }
.home .jcx__meta { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.home .jcx__hint { display: none; flex-basis: 100%; font-family: var(--font-body); font-size: 0.72rem; color: var(--ink-muted); }
@media (max-width: 47.99rem) { .home .jcx__hint { display: block; } }
.home .jcx__scroll { overflow-x: auto; }
.home .jcx__table { border-collapse: collapse; width: 100%; min-width: 29rem; }
.home .jcx__table th, .home .jcx__table td {
  padding: 0.5rem 0.8rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--rule);
}
.home .jcx__table thead th {
  font-family: var(--font-body); font-weight: 600; font-size: 0.64rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
.home .jcx__table thead th:first-child, .home .jcx__table tbody th, .home .jcx__table tfoot th { text-align: left; }
.home .jcx__table tbody th { font-family: var(--font-body); font-weight: 500; font-size: 0.86rem; color: var(--ink); }
.home .jcx__table td { font-family: var(--font-mono); font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--ink-body); }
.home .jcx__code { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--blue); }
.home .jcx__table tfoot th, .home .jcx__table tfoot td {
  border-top: 2px solid var(--navy); border-bottom: 0; color: var(--ink); font-weight: 600;
}
.home .jcx__table tfoot th { font-family: var(--font-body); font-size: 0.86rem; }
.home .jcx__cap { font-size: 0.75rem; color: var(--ink-muted); line-height: 1.55; max-width: 54ch; }
.home .jcx__legend { font-family: var(--font-body); font-size: 0.72rem; color: var(--ink-muted); padding: 0.7rem 1.15rem 0.9rem; }

/* --- The reporting problem: question / friction band ---------------- */
.home .jcgap { border-top: 1px solid var(--rule-strong); display: grid; }
@media (min-width: 52rem) { .home .jcgap { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); } }
.home .jcq { display: grid; gap: 0.4rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.home .jcq__q { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--ink); }
.home .jcq__tag { font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.home .jcq__a { color: var(--ink-body); font-size: 0.95rem; line-height: 1.55; }

/* --- Level ladder: project total down to the record ----------------- */
/* Readability pass: larger type, clearer per-level separation, stronger "who asks"
 * contrast, and more generous row spacing so the drill-down reads before every word. */
.home .hier { border-left: 3px solid var(--rule-strong); }
.home .hlev { position: relative; padding: 1.4rem 0 1.4rem 1.65rem; }
.home .hlev + .hlev { border-top: 1px solid var(--rule); }
.home .hlev::before {
  content: ""; position: absolute; left: 0; top: 2.35rem; width: 1.1rem; height: 2px; background: var(--rule-strong);
}
@media (min-width: 44rem) {
  .home .hlev--2 { margin-left: 1.75rem; }
  .home .hlev--3 { margin-left: 3.5rem; }
  .home .hlev--4 { margin-left: 5.25rem; }
  .home .hlev--5 { margin-left: 7rem; }
}
.home .hlev__k { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.home .hlev__t { font-family: var(--font-body); font-weight: 600; color: var(--ink); font-size: 1.2rem; line-height: 1.2; margin-top: 0.35rem; }
.home .hlev__d { color: var(--ink-body); font-size: 1.02rem; line-height: 1.6; margin-top: 0.4rem; max-width: 60ch; }
.home .hlev__who { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-body); margin-top: 0.5rem; padding-left: 0.7rem; border-left: 2px solid var(--yellow); }

/* --- Financial definition register ---------------------------------- */
.home .defreg { border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--card); overflow: hidden; }
.home .defrow { display: grid; gap: 0.3rem 1.6rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 54rem) { .home .defrow { grid-template-columns: 12rem 1fr 11rem; align-items: baseline; } }
.home .defrow:last-child { border-bottom: 0; }
.home .defrow--head { background: var(--paper-2); border-bottom: 2px solid var(--navy); }
.home .defrow--head span { font-family: var(--font-body); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.home .defrow__t { font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.home .defrow__d { color: var(--ink-body); font-size: 0.95rem; line-height: 1.55; }
.home .defrow__d .rel { font-family: var(--font-mono); font-size: 0.85em; color: var(--navy); }
.home .defrow__src { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }

/* --- Cost category ledger ------------------------------------------- */
.home .cats { border-top: 1px solid var(--rule-strong); }
.home .cat { display: grid; gap: 0.2rem 1.4rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 48rem) { .home .cat { grid-template-columns: 6.5rem 12rem 1fr; align-items: baseline; } }
.home .cat__code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--blue); }
.home .cat__name { font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.home .cat__d { color: var(--ink-body); font-size: 0.93rem; line-height: 1.5; }

/* --- Report to action stack (on navy) ------------------------------- */
.home .actstack { display: grid; }
.home .act { display: grid; gap: 0.3rem 1.4rem; padding: 1.1rem 0; border-top: 1px solid var(--line-dark); align-items: baseline; }
@media (min-width: 54rem) { .home .act { grid-template-columns: 3.5rem 19rem 1fr; } }
.home .act:last-child { border-bottom: 1px solid var(--line-dark); }
.home .act__no { font-family: var(--font-mono); font-size: 0.8rem; color: var(--yellow); }
.home .act__t { font-family: var(--font-body); font-weight: 600; color: var(--on-dark); font-size: 1.05rem; }
.home .act__d { color: var(--on-dark-muted); font-size: 0.95rem; line-height: 1.55; }

/* --- Shared small extensions ---------------------------------------- */
@media (min-width: 40rem) { .home .wf__detail--five > div:last-child { grid-column: 1 / -1; } }
@media (min-width: 56rem) {
  .home .proofgrid--lead .prooffig:first-child { grid-column: 1 / -1; }
  .home .proofgrid--lead .prooffig:first-child .shot { max-width: 46rem; margin-left: auto; margin-right: auto; }
}

/* ======================================================================
 * Phase B.6 - QuickBooks Sync
 * Boundary-first compositions: the hero handoff rail, the operational-needs
 * band, the field-boundary groups, what stays in Crux, the edition panels,
 * the handoff principles, and the connected five-capability chain.
 * ==================================================================== */

/* --- Hero: explanatory handoff rail --------------------------------- */
@media (min-width: 60rem) { .home .hero--qb .hero__grid { grid-template-columns: 1fr 0.92fr; } }
/* Invoice Approval hero carries the longest capability headline; give its title
 * column more width so the sentence wraps to fewer lines (no copy or type-scale
 * change). Scoped to .hero--ia. */
@media (min-width: 60rem) { .home .hero--ia .hero__grid { grid-template-columns: 1.12fr 0.88fr; } }
.home .handoff { margin: 0; display: grid; gap: 0.85rem; width: 100%; min-width: 0; }
.home .handoff__rail {
  border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--card);
  box-shadow: 0 24px 60px rgba(20, 26, 60, 0.16); overflow: hidden;
}
.home .hnode { padding: 1rem 1.25rem; display: grid; gap: 0.28rem; }
.home .hnode--qb { background: var(--paper-2); border-top: 2px solid var(--navy); }
.home .hnode__k { font-family: var(--font-body); font-size: 0.63rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.home .hnode__t { font-family: var(--font-body); font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.home .hnode__d { color: var(--ink-body); font-size: 0.88rem; line-height: 1.5; }
.home .hnode--qb .qb-logo { margin-top: 0.1rem; }
.home .hflow {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 1.25rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-2);
  font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
.home .hflow__arrow { color: var(--blue); font-size: 0.95rem; line-height: 1; }
/* An explanatory sentence about what the diagram is and is not. It is prose the
   reader has to read to trust the page, so it sits on the note floor, not below
   it. Was 12px, which is how a site hides a caveat. */
.home .handoff__cap { font-size: 0.85rem; color: var(--ink-muted); line-height: 1.65; max-width: 60ch; }

/* --- What the construction workflow still needs ---------------------- */
.home .needs { display: grid; border-top: 1px solid var(--rule-strong); margin-top: clamp(1.75rem, 4vw, 2.75rem); }
@media (min-width: 52rem) { .home .needs { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); } }
.home .need { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.25rem 0.75rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.home .need__no { font-family: var(--font-mono); font-size: 0.75rem; color: var(--blue); }
.home .need__t { font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.home .need__d { grid-column: 2; color: var(--ink-body); font-size: 0.93rem; line-height: 1.5; }

/* Division of labour: Crux operating layer vs QuickBooks system of record.
 * Mirrors the responsive .qbflow grid (1fr auto 1fr -> single column). */
.home .divlabor { display: grid; gap: 1rem; align-items: stretch; margin-top: clamp(1.75rem, 4vw, 2.75rem); }
@media (min-width: 56rem) { .home .divlabor { grid-template-columns: 1fr auto 1fr; } }
.home .divlabor__side { background: var(--paper-2); border: 1px solid var(--rule-strong); border-radius: 12px; padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; }
.home .divlabor__side--crux { background: #fffdf2; border-left: 3px solid var(--yellow); }
.home .divlabor__side--qb { border-left: 3px solid #2CA01C; }
.home .divlabor__cap { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.home .divlabor__name { font-family: var(--font-body); font-weight: 700; color: var(--ink); font-size: 1.5rem; margin-top: 0.4rem; letter-spacing: -0.01em; }
.home .divlabor__role { color: var(--ink-body); font-size: 0.9rem; margin-top: 0.15rem; }
.home .divlabor__list { margin-top: 1.1rem; display: grid; gap: 0.55rem; font-size: 0.95rem; color: var(--ink-body); }
.home .divlabor__list li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem; }
.home .divlabor__list li::before { content: ""; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 1px; background: var(--blue); }
.home .divlabor__side--qb .divlabor__list li::before { background: #2CA01C; }
.home .divlabor__boundary { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.4rem; padding: 0.5rem; }
.home .divlabor__arrow { font-size: 1.9rem; line-height: 1; color: var(--blue); }
@media (max-width: 55.99rem) { .home .divlabor__arrow { transform: rotate(90deg); } }
.home .divlabor__boundarylabel { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-muted); max-width: 11rem; }
/* QuickBooks recognition on the boundary diagrams.
 *
 * This block previously did the opposite: it repainted the hero handoff wordmark
 * to Crux navy so it would match the plainer Division of Labour heading. At
 * (0,3,0) it defeated the Intuit-green rule in tower.css at (0,2,0), so on the
 * one route whose entire subject is QuickBooks, the mark rendered in the host
 * brand's own colour. That reads as ownership, which is the specific thing a
 * third-party trademark use has to avoid.
 *
 * Consistency is now resolved the other way. Both places where the QuickBooks
 * name identifies the far side of the accounting boundary carry the same
 * branded text lockup: Intuit green, registered symbol, never abbreviated,
 * never inside a Crux-branded container. The Crux side stays navy, which is
 * what makes the boundary legible before the labels are read.
 *
 * Plain running prose still says "QuickBooks" as plain text. The lockup marks
 * recognition points, not every mention. */
.home .divlabor__name--qb { color: #2CA01C; }
/* The registered symbol is part of the mark, so it takes the mark's colour and
   the same superscript treatment the lockup uses. Left in --ink-muted at the
   heading's full 24px it measured 2.89:1 against white, under the 3:1 needed
   at that size. */
/* Same treatment the homepage lockup gives it: superscript, and set in muted
   ink rather than inheriting the green. Inheriting looked tidier and measured
   2.89:1 against white at superscript size, under the 4.5:1 small text needs.
   Muted ink clears it, and the mark itself still carries Intuit's colour. */
.home .divlabor__name--qb .tm {
  color: var(--ink-muted); font-size: 0.46em; vertical-align: super;
  font-weight: 500; margin-left: 0.12em;
}

/* --- Field boundary groups ------------------------------------------ */
.home .fgroup { border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--card); overflow: hidden; }
.home .fgroup + .fgroup { margin-top: 1rem; }
.home .fgroup__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.4rem 1rem; padding: 0.95rem 1.25rem; border-bottom: 2px solid var(--navy);
}
.home .fgroup__t { font-family: var(--font-body); font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.home .fgroup__tag {
  font-family: var(--font-body); font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-muted); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 2px 9px;
}
.home .fgroup--pending { background: var(--paper-2); }
.home .fgroup--pending .fgroup__head { border-bottom: 1px solid var(--rule-strong); }
.home .flist { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1.1rem 1.25rem 0.9rem; }
.home .fitem {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--navy);
  border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--card); padding: 4px 10px;
}
.home .fgroup__note { padding: 0 1.25rem 1.15rem; font-size: 0.8rem; color: var(--ink-muted); line-height: 1.55; max-width: 74ch; }

/* --- What stays in Crux ---------------------------------------------- */
.home .stays { display: grid; border-left: 2px solid var(--yellow); }
@media (min-width: 52rem) { .home .stays { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 3.5rem); } }
.home .stay { padding: 1rem 0 1rem 1.35rem; border-bottom: 1px solid var(--rule); }
.home .stay__t { font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.home .stay__d { color: var(--ink-body); font-size: 0.93rem; line-height: 1.55; margin-top: 0.25rem; }

/* --- QuickBooks editions --------------------------------------------- */
.home .editions { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .home .editions { grid-template-columns: 1fr 1fr; } }
.home .edition {
  border: 1px solid var(--rule-strong); border-top: 4px solid var(--navy); border-radius: 10px;
  background: var(--card); padding: clamp(1.2rem, 3vw, 1.6rem);
}
.home .edition__n { font-family: var(--font-body); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.home .edition__s { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-top: 0.5rem; }
.home .edition__s::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2CA01C; }
.home .edition__d { color: var(--ink-body); font-size: 0.95rem; line-height: 1.55; margin-top: 0.7rem; }

/* --- Handoff principles (status and exceptions) ---------------------- */
.home .principles { display: grid; border-top: 1px solid var(--rule-strong); }
.home .principle { display: grid; gap: 0.3rem 1.75rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 54rem) { .home .principle { grid-template-columns: 19rem 1fr; align-items: baseline; } }
.home .principle__t { font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.home .principle__d { color: var(--ink-body); font-size: 0.95rem; line-height: 1.55; }

/* --- Connected five-capability chain (on navy) ----------------------- */
.home .chain { display: grid; }
@media (min-width: 62rem) { .home .chain { grid-template-columns: repeat(5, 1fr); gap: 0 1.25rem; } }
.home .chainlink {
  display: grid; gap: 0.32rem; align-content: start; padding: 1.05rem 0;
  border-top: 2px solid var(--line-dark); text-decoration: none;
}
.home .chainlink:hover { border-top-color: var(--yellow); }
.home .chainlink__no { font-family: var(--font-mono); font-size: 0.72rem; color: var(--yellow); }
.home .chainlink__t { font-family: var(--font-body); font-weight: 600; color: var(--on-dark); font-size: 1rem; }
.home .chainlink__d { color: var(--on-dark-muted); font-size: 0.86rem; line-height: 1.5; }
.home .chainlink__here { font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--yellow); margin-left: 0.5rem; }

/* ======================================================================
 * Decision states: interactive state selector (selector.js swap)
 * Without JS the bar is hidden and all state panels stack (readable).
 * ==================================================================== */
.home .dstates { display: block; }
.home .dstates__bar { margin-bottom: 1.25rem; }
.home .dstates__panels { display: grid; gap: 0.75rem; }
.home [data-selector][data-enhanced] .dstates__panels [data-select-panel][hidden] { display: none; }
.home .dstate-panel { border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--card); padding: clamp(1.25rem, 3vw, 1.8rem); display: grid; gap: 1rem; }
@media (min-width: 58rem) { .home .dstate-panel { grid-template-columns: minmax(0, 14rem) 1fr; align-items: start; gap: 1rem 2rem; } }
.home .dstate-panel .dstate__id { align-self: start; }
.home .dstate-panel .dstate__pill { align-self: start; }

/* Approval -> financial context -> visibility flow (invoice-approvals #budget) */
.home .apflow { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 56rem) { .home .apflow { grid-template-columns: 1fr auto 1fr auto 1fr; } }
.home .apflow__step { background: var(--card); border: 1px solid var(--rule-strong); border-radius: 12px; padding: 1.25rem 1.35rem; display: flex; flex-direction: column; }
.home .apflow__step--visual { background: #fffdf2; }
.home .apflow__no { font-family: var(--font-mono); font-size: 0.72rem; color: var(--blue); letter-spacing: 0.06em; }
.home .apflow__t { font-weight: 600; color: var(--ink); font-size: 1.05rem; margin-top: 0.4rem; line-height: 1.2; }
.home .apflow__d { color: var(--ink-body); font-size: 0.92rem; line-height: 1.5; margin-top: 0.5rem; flex: 1 1 auto; }
.home .apflow__step .dstate__pill { align-self: flex-start; margin-top: 0.9rem; }
.home .apflow__step .asst-link { margin-top: 0.9rem; align-self: flex-start; }
.home .apflow__shot { margin-top: 0.9rem; border-radius: 8px; overflow: hidden; border: 1px solid var(--rule-strong); background: var(--card); }
.home .apflow__shot img { display: block; width: 100%; height: auto; }
.home .apflow__arrow { display: flex; align-items: center; justify-content: center; color: var(--blue); font-size: 1.6rem; }
@media (max-width: 55.99rem) { .home .apflow__arrow { transform: rotate(90deg); } }