/* Page-scoped styles extracted from business.html. */

/* =====================================================================
   /business.html page-scoped styles (sanctioned per-page pattern).
   Copy source: Marketing/Website/Contracts_Wireframes/page-contracts/02-business.md (FROZEN).
   Tokens from site-tokens.css; shared components from site.css.
   Zero em-dashes anywhere in this file (site copy law).
   Class prefix bz- for page components; pm-/pb-/pc- recreate the real
   prototype UI chrome (Marketing/Website/prototype/chat-prototype-v2/); dash-*
   is the Executive Dashboard concept frame embed per
   Marketing/Website/Contracts_Wireframes/dashboard-concept/NOTES.md + dashboard-frame-embed.css.
   ===================================================================== */

/* ---------- Hero ---------- */
.bz-hero { padding-block: var(--s-9) var(--s-8); }
.bz-hero h1 { max-width: 13ch; }
.bz-hero .lede { max-width: 46ch; margin-bottom: var(--s-6); }

/* ---------- Shared page primitives ---------- */
.bz-split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 980px) {
  .bz-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.bz-fig { margin: 0; }
.bz-fig svg { display: block; width: 100%; height: auto; }

.bz-quote {
  margin: var(--s-7) auto 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-left: 3px solid var(--blue);
  max-width: 46ch;
}
.bz-quote p {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  text-wrap: balance;
}

.bz-note {
  background: var(--bg-cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-14);
  color: var(--ink-muted);
  margin: 0 0 var(--s-5);
}

/* ---------- Section 1: iceberg ---------- */
.ice-water { fill: var(--blue-soft); }
.ice-line { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 7 7; opacity: 0.55; }
.ice-tip { fill: var(--bg); stroke: var(--ink-faint); stroke-width: 2; stroke-linejoin: round; }
.ice-mass { fill: var(--blue); stroke: var(--blue-deep); stroke-width: 2; stroke-linejoin: round; }
.ice-facet { stroke: var(--ink-faint); stroke-width: 1.5; opacity: 0.7; }
.ice-facet-deep { stroke: var(--blue-deep); stroke-width: 1.5; opacity: 0.55; }
.ice-lead { stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 4 5; }
.ice-lead-light { stroke: var(--blue-deep); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.6; }
.ice-t1 { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 26px; fill: var(--ink); }
.ice-t1b { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: 34px; fill: var(--ink); }
.ice-t2 { font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: 17px; fill: var(--ink-soft); }
.ice-t2b { font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: 17px; fill: var(--ink-muted); }

/* ---------- Section 2: stat pair + padlock cards ---------- */
.bz-statpair { display: grid; gap: var(--s-6); margin: var(--s-6) 0 var(--s-4); }
@media (min-width: 760px) {
  .bz-statpair { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .bz-statpair > div + div { border-left: 1px solid var(--line); padding-left: var(--s-7); }
}
.bz-stat-value {
  display: block;
  font-weight: var(--weight-bold);
  font-size: clamp(3.5rem, 10vw, 6.5rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--blue);
}
.bz-stat--return .bz-stat-value { color: var(--ink); }
.bz-stat p { margin: var(--s-3) 0 0; max-width: 40ch; }
.bz-stat-close {
  font-size: var(--fs-20);
  font-weight: var(--weight-medium);
  color: var(--ink);
  max-width: 52ch;
  margin: 0 0 var(--s-3);
}
.bz-sources {
  font-size: var(--fs-13);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 90ch;
  margin: 0 0 var(--s-7);
}
.bz-lockintro { font-size: var(--fs-20); font-weight: var(--weight-medium); color: var(--ink); max-width: 52ch; }
.bz-lockgrid { display: grid; gap: var(--s-5); margin: var(--s-5) 0 var(--s-7); }
@media (min-width: 760px) { .bz-lockgrid { grid-template-columns: 1fr 1fr; } }
.bz-lock {
  background: var(--bg);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.bz-lock:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.bz-lock svg { display: block; margin-bottom: var(--s-4); }
.bz-lock h3 { font-size: var(--fs-20); margin-bottom: var(--s-3); }
.bz-lock p { margin: 0; font-size: var(--fs-14); }
.bz-locksupport p { max-width: var(--measure-prose); }

/* ---------- Section 3: locks open into three words ---------- */
.bz-unlock {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  padding: var(--s-7) var(--s-6);
  margin-top: var(--s-6);
  text-align: center;
}
.bz-openlock-row { display: flex; justify-content: center; gap: var(--s-6); flex-wrap: wrap; }
.bz-openlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bz-converge { display: block; margin: var(--s-4) auto; }
.bz-converge path { stroke: var(--ink-faint); stroke-width: 2; fill: none; }
.bz-threewords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  font-weight: var(--weight-semibold);
  font-size: clamp(1.6rem, 4.5vw, 2.75rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.bz-threewords .sep { color: var(--blue); padding: 0 0.15em; }

/* ---------- Section 4: real-product-UI triptych ---------- */
.trip-grid { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 900px) { .trip-grid { grid-template-columns: repeat(3, 1fr); } }
.trip-frame { margin: 0; display: flex; flex-direction: column; }
.trip-stage {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(11, 15, 42, 0.10);
  background: var(--blue-soft);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 330px;
}
.trip-frame figcaption {
  margin-top: var(--s-3);
  font-size: var(--fs-14);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.trip-caption-all {
  margin-top: var(--s-4);
  font-size: var(--fs-13);
  color: var(--ink-soft);
  max-width: 76ch;
}

/* prototype menubar recreation (pm-) */
.pm-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: rgba(15, 18, 36, 0.86);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  z-index: 3;
}
.pm-menus { display: flex; gap: 12px; overflow: hidden; min-width: 0; flex: 0 1 auto; }
.pm-bar .app { font-weight: var(--weight-semibold); }
.pm-bar .mi { color: rgba(255, 255, 255, 0.85); }
.pm-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pm-icon { width: 15px; height: 15px; display: inline-flex; color: rgba(255, 255, 255, 0.85); }
.pm-icon svg { width: 100%; height: 100%; }
.pm-clock { font-size: 11px; font-variant-numeric: tabular-nums; }
.pm-lucy {
  position: relative;
  width: 24px; height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pm-lucy img {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.pm-lucy .ind {
  position: absolute;
  top: 0; right: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid #1B1F2E;
}
.pm-lucy .ind--idle { background: rgba(255, 255, 255, 0.35); }
.pm-lucy .ind--notify { background: #3559F2; }
.pm-lucy--spot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1.5px dashed rgba(255, 255, 255, 0.85);
  border-radius: 10px;
}
/* quiet-desktop ghost window under the menubar (frame 1) */
.pm-ghostwin {
  position: absolute;
  left: 9%; right: 9%;
  top: 58px; bottom: -14px;
  background: var(--bg);
  border: 1px solid var(--line-hair);
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow-card);
}
.pm-ghostbar {
  height: 26px;
  border-bottom: 1px solid var(--line-hair);
  background: #FAFAF6;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
}
.pm-ghostbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.pm-ghostline { height: 10px; border-radius: 6px; background: rgba(11, 15, 42, 0.06); margin: 12px 16px 0; }
.pm-ghostline.s { width: 55%; }
.pm-ghostline.m { width: 78%; }

/* prototype proactive bubble recreation (pb-) */
.pb-bubble {
  position: absolute;
  top: 44px; right: 12px;
  left: 12px;
  max-width: 330px;
  margin-left: auto;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid rgba(11, 15, 42, 0.06);
  box-shadow: var(--shadow-lift);
  padding: 14px;
  text-align: left;
  z-index: 2;
}
.pb-bubble::before {
  content: "";
  position: absolute;
  top: -7px; right: 16px;
  width: 14px; height: 14px;
  background: #FFFFFF;
  border-top: 1px solid rgba(11, 15, 42, 0.06);
  border-left: 1px solid rgba(11, 15, 42, 0.06);
  transform: rotate(45deg);
}
.pb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pb-head img { width: 30px; height: 30px; border-radius: 50%; }
.pb-name { font-size: 13px; font-weight: var(--weight-semibold); color: var(--ink); }
.pb-sub { font-size: 11px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
.pb-sub .dot { width: 6px; height: 6px; border-radius: 50%; background: #62C654; }
.pb-close { margin-left: auto; color: var(--ink-muted); font-size: 15px; line-height: 1; }
.pb-msg {
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: var(--weight-medium);
  color: var(--ink);
  margin: 0 0 10px;
}
.pb-msg em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 60%, rgba(53, 89, 242, 0.18) 60%);
  padding: 0 2px;
}
.pb-actions { display: flex; flex-direction: column; gap: 6px; }
.pb-btn {
  padding: 7px 10px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  border-radius: 8px;
  border: 1px solid rgba(11, 15, 42, 0.10);
  background: #FFFFFF;
  color: var(--ink);
  text-align: center;
}
.pb-btn--primary { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.pb-row2 { display: flex; gap: 6px; }
.pb-row2 .pb-btn { flex: 1; color: var(--ink-soft); }
.pb-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(11, 15, 42, 0.06);
  font-size: 10.5px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pb-foot svg { flex: 0 0 auto; }

/* prototype chat-window recreation (pc-) */
.pc-win {
  position: absolute;
  left: 12px; right: 12px;
  top: 40px; bottom: -1px;
  background: #FFFFFF;
  border: 1px solid rgba(11, 15, 42, 0.10);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pc-titlebar {
  height: 34px;
  background: #FAFAF6;
  border-bottom: 1px solid rgba(11, 15, 42, 0.06);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  flex: 0 0 auto;
}
.pc-traffic { display: inline-flex; gap: 5px; }
.pc-traffic i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pc-traffic .r { background: #F5685C; }
.pc-traffic .y { background: #F5BD3F; }
.pc-traffic .g { background: #62C654; }
.pc-title {
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pc-title img { width: 15px; height: 15px; border-radius: 50%; }
.pc-goal {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(11, 15, 42, 0.06);
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
}
.pc-goal img { width: 30px; height: 30px; border-radius: 50%; }
.pc-goal-label {
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--weight-semibold);
}
.pc-goal-name { font-size: 13px; font-weight: var(--weight-semibold); color: var(--ink); }
.pc-msgs { padding: 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pc-row { display: flex; gap: 8px; align-items: flex-end; }
.pc-row.user { justify-content: flex-end; }
.pc-av { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.pc-av--user {
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-size: 10px;
  font-weight: var(--weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pc-msg {
  max-width: 84%;
  padding: 8px 11px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.45;
}
.pc-row.lucy .pc-msg { background: #F4F2EB; color: var(--ink); border-bottom-left-radius: 4px; }
.pc-row.user .pc-msg { background: var(--blue); color: #FFFFFF; border-bottom-right-radius: 4px; }

/* ---------- Section 5: scene cards ---------- */
.bz-scenegrid { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
@media (min-width: 760px) { .bz-scenegrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .bz-scenegrid { grid-template-columns: repeat(3, 1fr); } }
/* v6: the five scenes were five always-open cards, about 430 words of prose
   held permanently on screen. Converted to the same <details> accordion the
   homepage already uses (index.html.j2 .scene), with an exclusive name= so
   one opens at a time. Copy unchanged; only its disclosure state changes. */
.bz-scene {
  position: relative;
  background: var(--bg-cream);
  border-radius: var(--r-md);
  transition: box-shadow var(--dur-ui) var(--ease);
}
.bz-scene[open] { box-shadow: var(--shadow-card); }
@media (min-width: 760px) { .bz-scene[open] { grid-column: 1 / -1; } }
.bz-scene summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
}
.bz-scene summary::-webkit-details-marker { display: none; }
.bz-scene h3 { font-size: var(--fs-18); margin: 0; flex: 1; padding-right: 0; }
.bz-scene-toggle { font-family: var(--font-mono); color: var(--blue-deep); flex-shrink: 0; }
.bz-scene-toggle::before { content: "+"; }
.bz-scene[open] .bz-scene-toggle::before { content: "\2212"; }
.bz-scene-body { padding: 0 var(--s-5) var(--s-5); }
.bz-scene p { margin: 0; font-size: var(--fs-14); max-width: 72ch; }
.bz-scene .tag-modeled { position: static; margin-left: 0; flex-shrink: 0; }
.bz-sceneclose { margin-top: var(--s-6); }

/* ---------- Section 6: five-stage strip ---------- */
.bz-stagestrip { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
@media (min-width: 980px) { .bz-stagestrip { grid-template-columns: repeat(5, 1fr); } }
.bz-stage {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.bz-stage h3 { font-size: var(--fs-18); margin-bottom: var(--s-3); }
.bz-stage .desc { font-size: var(--fs-14); margin-bottom: var(--s-4); }
.bz-proof {
  margin: auto 0 0;
  border-top: 1px dashed var(--line);
  padding-top: var(--s-3);
  font-size: var(--fs-13);
  color: var(--ink-muted);
}
.bz-proof strong { color: var(--ink); }
a.bz-stage--gate {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: var(--shadow-blue);
  text-decoration: none;
  transition: background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
a.bz-stage--gate:hover { background: var(--blue-deep); transform: translateY(-2px); }
a.bz-stage--gate h3 { color: var(--on-ink); }
a.bz-stage--gate h3 .arr { font-family: var(--font-mono); font-weight: var(--weight-regular); }
a.bz-stage--gate .desc { color: #DDE3FB; }
a.bz-stage--gate .bz-proof { border-top-color: rgba(255, 255, 255, 0.35); color: #DDE3FB; }
a.bz-stage--gate .bz-proof strong { color: var(--on-ink); }
.bz-striplabel { margin: var(--s-6) 0 0; }
.bz-trustgate { margin-top: var(--s-7); }
.bz-trustgate p { max-width: var(--measure-prose); }

/* ---------- Section 7: dashboard concept embed + payoff tiles ---------- */
/* Embed wrapper, from Marketing/Website/Contracts_Wireframes/dashboard-concept/dashboard-frame-embed.css.
   The concept chip stays INSIDE the frame; the modeled caption stays
   OUTSIDE; the frame is inert so it reads as an exhibit, never an app. */
.dash-concept-figure {
  margin: var(--s-6) auto 0;
  max-width: var(--container);
  padding: 0;
  --shadow-window: 0 30px 80px -32px rgba(11, 15, 42, 0.32), 0 6px 18px -10px rgba(11, 15, 42, 0.18);
}
.dash-concept-figure .dash-window { pointer-events: none; user-select: none; }
.dash-concept-figure figcaption {
  margin-top: var(--s-4);
  font-size: var(--fs-13);
  line-height: var(--lh-default);
  color: var(--ink-soft);
  text-align: center;
}
.dash-concept-figure--payoff-backdrop { position: relative; }
.dash-concept-figure--payoff-backdrop .dash-window {
  opacity: 0.92;
  /* keep the verbatim privacy-floor footer visible: the payoff tiles'
     negative margin overlaps this padding, never the footer text */
  padding-bottom: var(--s-8);
}
.dash-concept-figure--payoff-backdrop .payoff-layer {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--s-8));
  padding: 0 var(--s-5);
}
@media (max-width: 720px) {
  .dash-concept-figure { margin: var(--s-5) auto 0; }
  .dash-concept-figure--payoff-backdrop .payoff-layer { margin-top: calc(-1 * var(--s-6)); }
}

/* Frame internals, from Marketing/Website/Contracts_Wireframes/dashboard-concept/dashboard-frame.html
   (standalone :root dropped; internal headings demoted to .dash-h1/.panel-h). */
.dash-window {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid rgba(11, 15, 42, 0.10);
  border-radius: 14px;
  box-shadow: var(--shadow-window);
  overflow: hidden;
}
.dash-titlebar {
  height: 40px;
  background: #FAFAF6;
  border-bottom: 1px solid rgba(11, 15, 42, 0.06);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-4);
}
.dash-titlebar .traffic { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.dash-titlebar .traffic span { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dash-titlebar .traffic .red { background: #F5685C; }
.dash-titlebar .traffic .yellow { background: #F5BD3F; }
.dash-titlebar .traffic .green { background: #62C654; }
.dash-titlebar .address {
  flex: 1;
  max-width: 380px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
  text-align: center;
  padding: 4px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-titlebar .spacer { width: 47px; flex: 0 0 auto; }
.dash-header {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6) var(--s-4);
}
.dash-header .heading .dash-h1 {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--ink);
}
.dash-header .heading p {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-13);
  color: var(--ink-soft);
  max-width: 56ch;
}
.concept-chip {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  font-weight: var(--weight-semibold);
  line-height: 1;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--blue-soft);
  color: var(--blue-deep);
  border: 1px solid rgba(53, 89, 242, 0.25);
  white-space: nowrap;
}
.concept-chip::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue);
}
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  padding: 0 var(--s-6) var(--s-5);
}
.panel {
  border: 1px solid var(--line-hair);
  border-radius: var(--r-md);
  padding: var(--s-5);
  background: var(--bg);
  min-width: 0;
}
.panel--wide { grid-column: 1 / -1; }
.panel-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.panel-head .panel-h {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--ink);
}
.panel-head .kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-1);
}
.tag-modeled {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg-cream);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  white-space: nowrap;
}
.panel-note { margin: var(--s-4) 0 0; font-size: var(--fs-12); color: var(--ink-muted); }
.workflow-row {
  display: grid;
  grid-template-columns: minmax(180px, 30%) 1fr minmax(150px, auto);
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-hair);
}
.workflow-row:first-of-type { border-top: 0; }
.workflow-row .name { font-size: var(--fs-14); font-weight: var(--weight-semibold); line-height: 1.3; color: var(--ink); }
.workflow-row .name small {
  display: block;
  font-size: var(--fs-12);
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
}
.workflow-row .bar { height: 10px; border-radius: var(--r-pill); background: var(--bg-cream); overflow: hidden; }
.workflow-row .bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--blue); }
.workflow-row .bar i.soft { background: var(--blue-soft); }
.workflow-row .value {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-muted);
  text-align: right;
  white-space: nowrap;
}
.workflow-row .value.quiet { color: var(--ink-muted); }
.spark-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.spark { border: 1px solid var(--line-hair); border-radius: var(--r-sm); padding: var(--s-3); }
.spark .label { font-size: var(--fs-12); font-weight: var(--weight-semibold); color: var(--ink); }
.spark .trend {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ok-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.spark svg { display: block; width: 100%; height: 36px; margin-top: var(--s-2); }
.adopt-row {
  display: grid;
  grid-template-columns: minmax(130px, 40%) 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}
.adopt-row .name { font-size: var(--fs-13); font-weight: var(--weight-medium); color: var(--ink); }
.adopt-row .meter { height: 8px; border-radius: var(--r-pill); background: var(--bg-cream); overflow: hidden; }
.adopt-row .meter i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--blue); }
.adopt-row .word {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.word.up { color: var(--ok-deep); }
.word.flat { color: var(--ink-soft); }
.word.early { color: var(--ink-muted); }
.shadow-strip {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-sm);
  background: var(--bg-cream);
  font-size: var(--fs-12);
  color: var(--ink-muted);
}
.shadow-strip::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
}
.gap-row {
  display: grid;
  grid-template-columns: minmax(200px, 38%) 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-hair);
}
.gap-row:first-of-type { border-top: 0; }
.gap-row .name { font-size: var(--fs-14); font-weight: var(--weight-semibold); color: var(--ink); }
.gap-row .name small {
  display: block;
  font-size: var(--fs-12);
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
}
.demand { display: inline-flex; gap: 5px; align-items: center; }
.demand i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.demand i.on { background: var(--blue); }
.demand .demand-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: var(--s-2);
}
.status-chip {
  justify-self: end;
  font-size: var(--fs-12);
  font-weight: var(--weight-semibold);
  line-height: 1;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.status-chip.case { background: var(--blue-soft); color: var(--blue-deep); }
.status-chip.pooling { background: var(--bg-cream); color: var(--ink-muted); border: 1px solid var(--line); }
.status-chip.logged { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.status-chip.approved { background: rgba(31, 157, 108, 0.12); color: var(--ok-deep); }
.dash-footer {
  border-top: 1px solid var(--line-hair);
  padding: var(--s-4) var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
  text-align: center;
}
@media (max-width: 720px) {
  .dash-grid { grid-template-columns: 1fr; padding: 0 var(--s-4) var(--s-4); }
  .dash-header { flex-wrap: wrap; padding: var(--s-4) var(--s-4) var(--s-3); }
  .concept-chip { margin-left: 0; }
  .spark-grid { grid-template-columns: 1fr 1fr; }
  .workflow-row, .gap-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .workflow-row .value { text-align: left; }
  .gap-row .status-chip { justify-self: start; }
  .dash-titlebar .address { max-width: none; }
  .dash-titlebar .spacer { display: none; }
}

/* payoff tiles over the frame */
.bz-payoffgrid { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .bz-payoffgrid { grid-template-columns: 1fr 1fr; } }
.bz-payoff {
  background: var(--bg);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-lift);
  transition: transform var(--dur-hover) var(--ease);
}
.bz-payoff:hover { transform: translateY(-2px); }
.bz-payoff h3 { font-size: var(--fs-20); margin-bottom: var(--s-3); }
.bz-payoff p { margin: 0; font-size: var(--fs-14); }
.bz-buyers {
  margin-top: var(--s-6);
  background: var(--bg-cream);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
}
.bz-buyers p { margin: 0; font-size: var(--fs-14); color: var(--ink-muted); max-width: none; }
/* v5: the seven per-buyer entry points were one middot run-on line. Split on
   the existing middots into role/benefit cards, no words added. */
.bz-buyers-lead { margin-bottom: var(--s-4) !important; }
.bz-buyerlist {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-3);
}
@media (min-width: 620px) { .bz-buyerlist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bz-buyerlist { grid-template-columns: repeat(4, 1fr); } }
.bz-buyer {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.bz-buyer-role {
  font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--blue-deep);
}
.bz-buyer-win { font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--ink); }

/* ---------- Section 8: flywheels ---------- */
.bz-flywheel { max-width: 760px; margin: var(--s-6) auto 0; }
.fw-ring { fill: var(--blue-soft); fill-opacity: 0.5; stroke: var(--blue); stroke-width: 3; }
.fw-tick { stroke: var(--blue-deep); stroke-width: 3; fill: none; stroke-linecap: round; }
.fw-label { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 27px; fill: var(--ink); text-anchor: middle; }

/* ---------- Section 9: misallocated-budget flow (ink band) ---------- */
.bz-flow { display: grid; gap: var(--s-5); margin: var(--s-7) 0; align-items: center; justify-items: center; }
@media (min-width: 900px) {
  .bz-flow { grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr); justify-items: stretch; }
}
.bz-spendlist { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; width: 100%; }
.bz-spendlist li {
  border: 1px solid var(--line-on-ink);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  color: var(--on-ink-muted);
  font-size: var(--fs-14);
}
.bz-converge-flow path { stroke: var(--on-ink-faint); stroke-width: 2; fill: none; }
.bz-converge-flow .head { fill: var(--on-ink-faint); stroke: none; }
.bz-converge-h { display: none; }
.bz-converge-v { display: block; }
@media (min-width: 900px) {
  .bz-converge-h { display: block; }
  .bz-converge-v { display: none; }
}
.bz-cap {
  background: var(--blue);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  color: var(--on-ink);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-20);
  box-shadow: var(--shadow-blue);
  text-align: center;
  width: 100%;
}
.band--ink .bz-quote p { color: var(--on-ink); }
.band--ink a.btn { text-decoration: none; }
.band--ink a.btn-primary { color: var(--on-ink); }
.band--ink a.btn-primary:hover { color: var(--on-ink); }
.bz-close-cta { margin-top: var(--s-6); }
.bz-closelede { max-width: 64ch; }
.bz-worklink { font-size: var(--fs-16); }

/* ---------- FAQ: h3 inside summary ---------- */
.faq summary h3 {
  margin: 0;
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

/* Extracted from style attributes. */
.csp-02f9b0ea3f { width: 14% }
.csp-1e6c532b13 { width: 26% }
.csp-6509b172bb { width: 22% }
.csp-796300e0ee { width: 64% }
.csp-9ac8fb6f2f { width: 48% }
.csp-d886fc6e67 { width: 56% }
.csp-d90372b07e { width: 78% }
.csp-df197181c9 { width: 82% }