/* ── H2W Brand Tokens ───────────────────────────────────────────────── */
:root {
  --h2w-navy: #093151;
  --h2w-blue: #0c4f97;
  --h2w-red: #d20000;
  --h2w-slate: #64748b;
  --h2w-light: #f1f5f9;
  --h2w-border: #e2e8f0;
  --h2w-bg: #f8fafc;
  --h2w-white: #ffffff;
}

/* H2W Brand Colors: Light Blue #0c4f97, Dark Blue #093151, Red #d20000 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #333;
  background: var(--h2w-bg);
  height: 100vh;
  overflow: hidden;
}
.app { display: flex; flex-direction: column; height: 100vh; }
.header {
  background: var(--h2w-navy);
  color: white;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--h2w-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header h1 { font-size: 1.25rem; font-weight: 600; }
.breadcrumb { font-size: 0.875rem; color: rgba(255,255,255,0.6); }
.breadcrumb span { cursor: pointer; }
.breadcrumb span:hover { color: var(--h2w-border); text-decoration: underline; }
.breadcrumb .sep { color: rgba(255,255,255,0.35); margin: 0 0.5rem; cursor: default; }
.breadcrumb .sep:hover { color: rgba(255,255,255,0.35); text-decoration: none; }
/* Language toggle */
.lang-toggle { display: flex; gap: 3px; margin-left: 1.5rem; flex-shrink: 0; }
.lang-btn {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.65); cursor: pointer; font-size: 0.7rem; font-weight: 700;
  padding: 0.2rem 0.55rem; border-radius: 3px; letter-spacing: 0.04em; transition: all 0.15s;
}
.lang-btn:hover { background: rgba(255,255,255,0.22); color: white; }
.lang-btn.active { background: var(--h2w-blue); border-color: var(--h2w-blue); color: white; }
.main { display: flex; flex: 1; overflow: hidden; }
.sidebar {
  width: 280px;
  background: white;
  border-right: 1px solid var(--h2w-border);
  overflow-y: auto;
  padding: 1.5rem;
  flex-shrink: 0;
}
.sidebar h2 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--h2w-navy);
  margin-bottom: 0.75rem;
}
.stream-list { list-style: none; }
.stream-list li {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
  border-radius: 0.375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.15s;
  font-size: 0.8125rem;
}
.stream-list li:hover { background: #f0f5fb; }
.stream-list li.active { background: rgba(12,79,151,0.1); color: var(--h2w-blue); }
.stream-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--h2w-border);
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #475569;
  flex-shrink: 0;
}
.stream-list li.active .stream-num { background: var(--h2w-blue); color: white; }
.stream-name { flex: 1; }
.level-btn {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid var(--h2w-border);
  border-radius: 0.375rem;
  background: white;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  transition: all 0.15s;
}
.level-btn:hover { background: #f0f5fb; }
.level-btn.active { background: var(--h2w-blue); color: white; border-color: var(--h2w-blue); }
.viewer { flex: 1; display: flex; flex-direction: column; background: white; overflow: hidden; }
.viewer-content { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.viewer-main { flex: 1; display: flex; flex-direction: column; position: relative; overflow: hidden; min-width: 0; }
#bpmn-container { flex: 1; min-height: 0; touch-action: pinch-zoom; overflow: hidden; }
.viewer-hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #94a3b8;
  font-size: 1rem;
  pointer-events: none;
}
.viewer-hint.hidden { display: none; }
/* BPMN Legend */
.bpmn-legend {
  display: none; flex-wrap: wrap; gap: 1rem; align-items: center;
  padding: 0.5rem 1.25rem; background: var(--h2w-bg); border-top: 1px solid var(--h2w-border);
  flex-shrink: 0;
}
.bpmn-legend.visible { display: flex; }
.bpmn-legend-title {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--h2w-navy); margin-right: 0.25rem;
}
.legend-item {
  display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: #475569;
}
.legend-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* Process Table */
/* Table resize handle */
.table-resize-handle {
  display: none; height: 6px; cursor: ns-resize; flex-shrink: 0;
  background: var(--h2w-border); position: relative; transition: background 0.15s;
}
.table-resize-handle::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 3px; border-radius: 2px; background: #94a3b8;
}
.table-resize-handle:hover, .table-resize-handle.dragging { background: #cbd5e1; }
.table-resize-handle:hover::after, .table-resize-handle.dragging::after { background: var(--h2w-blue); }
.table-resize-handle.visible { display: block; }
/* Process Table */
.bpmn-table-wrap {
  display: none; overflow-y: auto;
  border-top: 1px solid var(--h2w-border); background: #fff; flex-shrink: 0;
}
.bpmn-table-wrap.visible { display: block; }
.bpmn-table-wrap table {
  width: 100%; border-collapse: collapse; font-size: 0.8rem;
}
.bpmn-table-wrap thead { position: sticky; top: 0; z-index: 1; }
.bpmn-table-wrap th {
  background: var(--h2w-navy); color: #fff; padding: 0.4rem 0.75rem;
  text-align: left; font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.bpmn-table-wrap td {
  padding: 0.35rem 0.75rem; border-bottom: 1px solid var(--h2w-light); color: #334155;
}
.bpmn-table-wrap tr:hover td { background: var(--h2w-bg); }
.bpmn-table-wrap .type-badge {
  display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px;
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
}
.type-badge.start { background: #dcfce7; color: #166534; }
.type-badge.end { background: #fee2e2; color: #991b1b; }
.type-badge.task { background: rgba(12,79,151,0.08); color: var(--h2w-blue); }
.type-badge.gateway { background: #fef3c7; color: #92400e; }
.type-badge.user-task { background: #dbeafe; color: #1e40af; }
.type-badge.service-task { background: #fef9c3; color: #854d0e; }
/* Activity table expand/collapse toggle */
.activity-expand {
  display: inline-block; cursor: pointer; font-size: 0.6rem; color: var(--h2w-blue);
  width: 1rem; text-align: center; transition: transform 0.15s;
  user-select: none; vertical-align: middle;
}
.activity-expand:hover { color: #093d75; }
.activity-sub-row td { background: var(--h2w-bg); }
.activity-sub-row:hover td { background: #eff6ff !important; }
/* Master Activity List */
.master-view {
  display: none; flex-direction: column; height: 100%; overflow: hidden;
}
.master-view.visible { display: flex; }
.master-toolbar {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.6rem 1rem; background: var(--h2w-bg); border-bottom: 1px solid var(--h2w-border); flex-shrink: 0;
}
.master-title {
  font-weight: 700; font-size: 0.8rem; color: var(--h2w-navy); text-transform: uppercase;
  letter-spacing: 0.05em; margin-right: 0.5rem; white-space: nowrap;
}
.master-filters { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.master-filters select {
  padding: 0.3rem 0.5rem; border: 1px solid var(--h2w-border); border-radius: 4px;
  font-size: 0.8rem; color: #334155; background: white;
}
.master-view .bpmn-table-wrap { flex: 1; overflow-y: auto; }
.master-view td:first-child { font-family: monospace; font-size: 0.7rem; color: var(--h2w-slate); white-space: nowrap; }
.master-row-hidden { display: none; }
.master-view tbody tr { cursor: pointer; transition: background 0.1s; }
.master-view tbody tr:hover td { background: var(--h2w-light); }
.master-sub-row td { background: var(--h2w-bg); }
.master-sub-row:hover td { background: #eff6ff; }
.legend-icon svg { display: block; }
/* BPMN Task Detail Panel */
.bpmn-detail-panel {
  width: 0; flex-shrink: 0;
  background: white; border-left: 2px solid var(--h2w-blue);
  box-shadow: -6px 0 24px rgba(9,49,81,0.13);
  transition: width 0.22s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
.bpmn-detail-panel.open { width: 285px; }
.bdp-header {
  background: var(--h2w-navy); color: white; padding: 0.65rem 1rem;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.bdp-code {
  font-family: monospace; font-size: 0.75rem; letter-spacing: 0.05em;
  background: rgba(255,255,255,0.15); padding: 0.2rem 0.5rem; border-radius: 3px;
}
.bdp-close {
  background: none; border: none; color: rgba(255,255,255,0.65); cursor: pointer;
  font-size: 1rem; padding: 0.15rem 0.35rem; border-radius: 3px; line-height: 1; transition: all 0.15s;
}
.bdp-close:hover { background: rgba(255,255,255,0.15); color: white; }
.bdp-body { flex: 1; overflow-y: auto; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.bdp-name { font-size: 0.95rem; font-weight: 700; color: var(--h2w-navy); line-height: 1.35; }
.bdp-divider { border: none; border-top: 1px solid var(--h2w-light); margin: 0; }
.bdp-section { display: flex; flex-direction: column; gap: 0.2rem; }
.bdp-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; }
.bdp-value { font-size: 0.78rem; color: #334155; line-height: 1.45; }
.bdp-value ul { margin: 0.1rem 0 0; padding-left: 1.1rem; }
.bdp-value li { margin-bottom: 0.15rem; }
.bdp-value li[data-action] { cursor: pointer; color: #2563eb; }
.bdp-value li[data-action]:hover { text-decoration: underline; }
.bdp-tool-tag {
  display: inline-block; background: rgba(12,79,151,0.08); color: var(--h2w-blue);
  padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.67rem; font-weight: 600; margin: 2px 3px 2px 0;
  cursor: pointer; transition: opacity 0.15s;
}
.bdp-tool-tag:hover { opacity: 0.7; }
/* Detail panel empty/default state */
.bdp-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.5rem; padding: 1.5rem; color: #94a3b8; text-align: center;
}
.bdp-empty-icon { font-size: 1.75rem; }
.bdp-empty-text { font-size: 0.78rem; line-height: 1.55; }
/* Detail toggle button in toolbar */
.detail-toggle-btn {
  margin-left: auto; background: none; border: 1px solid var(--h2w-border); cursor: pointer;
  font-size: 0.75rem; color: #475569; padding: 0.25rem 0.6rem; border-radius: 4px;
  display: flex; align-items: center; gap: 0.3rem; transition: all 0.15s; flex-shrink: 0;
}
.detail-toggle-btn:hover { background: #f0f5fb; border-color: var(--h2w-blue); color: var(--h2w-blue); }
/* Checklist indicator on BPMN diagram — tasks with a checklist get a blue border */
.has-checklist rect {
  stroke: var(--h2w-blue) !important;
  stroke-width: 3px !important;
  animation: pulse-border 1.5s ease-out 1;
}
@keyframes pulse-border {
  0%   { stroke-width: 3px; }
  50%  { stroke-width: 6px; stroke: var(--h2w-blue); }
  100% { stroke-width: 3px; }
}
/* Lens overlay classes — applied via addCssClasses on BPMN elements */
.lens-assess rect   { stroke: #2563eb !important; stroke-width: 4px !important; fill: #dbeafe !important; }
.lens-discover rect { stroke: #0891b2 !important; stroke-width: 4px !important; fill: #cffafe !important; }
.lens-propose rect  { stroke: #7c3aed !important; stroke-width: 4px !important; fill: #ede9fe !important; }
.lens-deliver rect  { stroke: #059669 !important; stroke-width: 4px !important; fill: #d1fae5 !important; }
.lens-measure rect  { stroke: #d97706 !important; stroke-width: 4px !important; fill: #fef3c7 !important; }
.lens-sustain rect  { stroke: #dc2626 !important; stroke-width: 4px !important; fill: #fee2e2 !important; }
.lens-tool rect     { stroke: #7c3aed !important; stroke-width: 4px !important; fill: #ede9fe !important; }
.lens-gate rect     { stroke: #dc2626 !important; stroke-width: 4px !important; fill: #fee2e2 !important; }
.lens-gate polygon  { stroke: #dc2626 !important; stroke-width: 4px !important; fill: #fee2e2 !important; }
.lens-gate path     { stroke: #dc2626 !important; stroke-width: 3px !important; fill: #fee2e2 !important; }
/* Checklist list in detail panel */
.bdp-checklist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.bdp-checklist li {
  display: flex; align-items: flex-start; gap: 0.45rem;
  font-size: 0.78rem; color: #334155; line-height: 1.4;
}
.bdp-checklist li::before {
  content: ''; flex-shrink: 0;
  width: 13px; height: 13px; margin-top: 1px;
  border: 1.5px solid var(--h2w-blue); border-radius: 2px; background: white;
}
/* Drill-down button in detail panel */
.bdp-drilldown-btn {
  width: 100%; padding: 0.6rem 1rem;
  background: var(--h2w-blue); color: white; border: none; border-radius: 6px;
  cursor: pointer; font-size: 0.85rem;
  display: flex; align-items: center; gap: 0.5rem; justify-content: center;
}
.bdp-drilldown-btn:hover { background: #093d75; }
/* Back to L2 button in toolbar */
.drilldown-back-btn { display: none; background: #e0e7ff !important; border-color: #6366f1 !important; color: #4338ca !important; }
.drilldown-back-btn:hover { background: #c7d2fe !important; }
/* Customer Journey */
.journey-view { display: none; flex-direction: column; overflow: hidden; }
.journey-view.visible { display: flex; }
.journey-arc {
  display: flex; align-items: stretch; gap: 3px; flex-shrink: 0;
  padding: 0.75rem 1rem; background: var(--h2w-navy);
}
.journey-arc-stage {
  flex: 1; padding: 0.55rem 0.5rem 0.55rem 1.1rem; cursor: pointer;
  background: var(--h2w-blue); color: white; text-align: center; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
  transition: background 0.15s;
}
.journey-arc-stage:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.journey-arc-stage:last-child  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); }
.journey-arc-stage:hover { background: #093d75; }
.journey-arc-stage .jas-label { font-size: 0.72rem; font-weight: 700; line-height: 1.2; }
.journey-arc-stage .jas-vs    { font-size: 0.58rem; opacity: 0.65; margin-top: 1px; }
.journey-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
/* Swimlane grid: label col + 6 stage cols */
.journey-grid {
  display: grid; grid-template-columns: 80px repeat(6, 1fr);
  border: 1px solid var(--h2w-border); border-radius: 6px; font-size: 0.77rem;
}
.jg-label {
  background: var(--h2w-light); color: var(--h2w-navy); padding: 0.55rem 0.4rem;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; align-items: center; border-bottom: 1px solid var(--h2w-border); line-height: 1.3;
  border-left: 3px solid var(--h2w-blue);
}
.jg-cell {
  padding: 0.55rem 0.7rem; border-left: 1px solid var(--h2w-border); border-bottom: 1px solid var(--h2w-border);
  color: #334155; font-size: 0.75rem; line-height: 1.45; vertical-align: top;
}
.jg-cell ul { margin: 0; padding-left: 1rem; }
.jg-cell li { margin-bottom: 0.18rem; }
.jg-cell .mot { display: inline-block; background: #fef3c7; color: #92400e; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.68rem; font-weight: 600; white-space: nowrap; }
.jg-cell .tool-badge { display: inline-block; background: rgba(12,79,151,0.08); color: var(--h2w-blue); padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.67rem; font-weight: 600; margin: 1px 2px; cursor: pointer; transition: opacity 0.15s; }
.jg-cell .tool-badge:hover { opacity: 0.7; }
/* Journey grid alternating row shading — 7 cols per row, even rows (2,4,6,8) */
.journey-grid > :nth-child(n+8):nth-child(-n+14),
.journey-grid > :nth-child(n+22):nth-child(-n+28),
.journey-grid > :nth-child(n+36):nth-child(-n+42),
.journey-grid > :nth-child(n+50):nth-child(-n+56) { background: rgba(12, 79, 151, 0.02); }
/* Product track */
.journey-product { border: 1px solid rgba(210,0,0,0.2); border-radius: 6px; overflow: hidden; margin-top: 0.5rem; }
.journey-track-hdr { padding: 0.4rem 0.75rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.journey-track-hdr.product { background: var(--h2w-red); color: white; }
.journey-track-hdr.enable  { background: var(--h2w-navy); color: white; }
.product-stages { display: flex; gap: 4px; padding: 0.75rem; background: #fff8f8; }
.product-stage {
  flex: 1; padding: 0.45rem 0.5rem; background: rgba(210,0,0,0.06);
  border: 1px solid rgba(210,0,0,0.15); border-radius: 4px;
  text-align: center; cursor: pointer; transition: background 0.15s;
}
.product-stage:hover { background: rgba(210,0,0,0.12); }
.product-stage .ps-step { font-size: 0.62rem; font-weight: 700; color: var(--h2w-red); }
.product-stage .ps-name { font-size: 0.72rem; color: #7f1d1d; font-weight: 600; margin-top: 2px; }
.product-stage .ps-desc { font-size: 0.65rem; color: #9f1239; margin-top: 2px; }
/* Enable band */
.journey-enable { border: 1px solid var(--h2w-border); border-radius: 6px; overflow: hidden; margin-top: 0.5rem; }
.enable-stages { display: flex; gap: 4px; padding: 0.75rem; background: var(--h2w-bg); }
.enable-stage {
  flex: 1; padding: 0.45rem 0.6rem; border: 1px solid var(--h2w-border); border-radius: 4px;
  background: white; cursor: pointer; transition: border-color 0.15s;
}
.enable-stage:hover { border-color: var(--h2w-blue); }
.enable-stage .es-vs { font-size: 0.6rem; color: var(--h2w-slate); font-family: monospace; }
.enable-stage .es-name { font-size: 0.75rem; font-weight: 600; color: var(--h2w-navy); margin-top: 2px; }
.enable-stage .es-desc { font-size: 0.66rem; color: var(--h2w-slate); margin-top: 3px; line-height: 1.3; }
/* Employee Journey accent — green arc */
.emp-journey-arc .journey-arc-stage { background: #0c7a3e; }
.emp-journey-arc .journey-arc-stage:hover { background: #065f2e; }
.emp-journey-grid .jg-label { border-left-color: #0c7a3e; }
/* KPI badge (used in both journeys) */
.kpi-badge {
  display: inline-block; background: rgba(12,122,62,0.08); color: #065f2e;
  padding: 0.08rem 0.35rem; border-radius: 3px; font-size: 0.62rem; font-weight: 600;
  cursor: pointer; transition: filter 0.15s;
  margin: 1px 2px; white-space: nowrap;
}
.kpi-badge:hover { filter: brightness(0.85); }
/* Governance gate badge (clickable) */
.gate-badge {
  display: inline-block; background: rgba(220,38,38,0.08); color: #991b1b;
  padding: 0.08rem 0.35rem; border-radius: 3px; font-size: 0.62rem; font-weight: 600;
  margin: 1px 2px; cursor: pointer; white-space: nowrap; transition: background 0.15s;
}
.gate-badge:hover { background: rgba(220,38,38,0.18); }
/* Milestone list (employee journey) */
.milestone-list { list-style: none; margin: 0; padding: 0; }
.milestone-item { font-size: 0.7rem; color: #065f2e; font-weight: 600; margin-bottom: 0.15rem; }
/* Framework tags for journeys in detail panel */
.bdp-fw-journey { background: rgba(12,79,151,0.08); color: var(--h2w-blue); }
.bdp-fw-emp-journey { background: rgba(12,122,62,0.08); color: #065f2e; }
/* Org chart styles */
.org-view { display: none; flex: 1; overflow: auto; padding: 2rem; background: var(--h2w-bg); }
.org-view.visible { display: block; }
.org-section { margin-bottom: 2rem; }
.org-section h3 {
  font-size: 0.875rem; font-weight: 600; color: var(--h2w-navy);
  margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--h2w-blue);
  cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none;
}
.org-section h3::after {
  content: '\25B2'; font-size: 0.5rem; color: #94a3b8; transition: transform 0.2s;
}
.org-section.sec-collapsed h3 { margin-bottom: 0; border-bottom-color: var(--h2w-border); }
.org-section.sec-collapsed h3::after { transform: rotate(180deg); }
.org-section.sec-collapsed > *:not(h3) { display: none; }
.org-entity {
  display: inline-block; vertical-align: top; background: white;
  border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem 1.25rem; margin-right: 1rem; margin-bottom: 1rem; min-width: 260px;
}
.org-entity h4 {
  font-size: 0.8125rem; font-weight: 600; color: var(--h2w-blue); margin-bottom: 0.75rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--h2w-border);
}
.org-dept { margin-bottom: 0.75rem; }
.org-dept-name {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--h2w-slate); margin-bottom: 0.375rem;
}
.org-person {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0; font-size: 0.8125rem;
}
.org-person .name { font-weight: 500; color: var(--h2w-navy); }
.org-person .role { color: var(--h2w-slate); font-size: 0.75rem; }
.org-person.vacant .name { color: #94a3b8; font-style: italic; }
.org-team-label {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  color: #94a3b8; letter-spacing: 0.05em; margin-top: 0.5rem; margin-bottom: 0.25rem;
}
.org-tabs {
  display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 2px solid var(--h2w-border);
}
.org-tab {
  padding: 0.5rem 1.25rem; border: none; background: none; cursor: pointer;
  font-size: 0.8125rem; font-weight: 500; color: var(--h2w-slate);
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s;
}
.org-tab:hover { color: var(--h2w-navy); }
.org-tab.active { color: var(--h2w-blue); border-bottom-color: var(--h2w-blue); }
.org-tab-content { display: none; }
.org-tab-content.visible { display: block; }
.org-table {
  width: 100%; border-collapse: collapse; background: white;
  border: 1px solid var(--h2w-border); border-radius: 0.5rem; overflow: hidden;
  font-size: 0.8125rem;
}
.org-table thead { background: var(--h2w-light); }
.org-table th {
  text-align: left; padding: 0.625rem 1rem; font-weight: 600; color: #475569;
  border-bottom: 2px solid var(--h2w-border); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.03em;
}
.org-table td {
  padding: 0.5rem 1rem; border-bottom: 1px solid var(--h2w-light); color: #334155;
}
.org-table tr:hover td { background: var(--h2w-bg); }
.org-table .dept-row td {
  background: var(--h2w-light); font-weight: 600; color: var(--h2w-blue); padding-top: 0.75rem;
}
.org-table .vacant td { color: #94a3b8; font-style: italic; }
.org-table .team-label td {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #94a3b8; font-weight: 600; padding-top: 0.625rem; background: #fafbfc;
}
/* ===== Org-chart Diagram Tree ===== */
.otree-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2rem 1rem 1rem;
}
.otree-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--h2w-border);
}
.otree-legend-title {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--h2w-navy);
}
.otree-legend-item {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.6875rem; color: #475569;
}
.otree-legend-swatch {
  display: inline-block; width: 16px; height: 12px; border-radius: 2px;
  border: 1.5px solid #c5d5e4; background: white;
}
.otree-legend-swatch.perm { border-style: solid; }
.otree-legend-swatch.contract { border-style: dashed; border-color: #94a3b8; }
.otree-legend-swatch.hire { border-style: solid; border-color: var(--h2w-red); border-width: 2px; }

.otree, .otree ul { list-style: none; margin: 0; padding: 0; }
.otree { display: flex; justify-content: center; }
.otree ul { display: flex; justify-content: center; padding-top: 1.5rem; position: relative; }
.otree li {
  display: flex; flex-direction: column; align-items: center;
  position: relative; padding: 0 0.375rem;
}

/* ── Node box ── */
.otree-node {
  padding: 0.4rem 0.625rem; border: 1.5px solid #c5d5e4; border-radius: 0.375rem;
  background: white; text-align: center; font-size: 0.6875rem; color: var(--h2w-navy);
  font-weight: 500; line-height: 1.3; white-space: nowrap; position: relative;
  z-index: 1; min-width: 90px;
}
.otree-node:hover { border-color: var(--h2w-blue); background: rgba(12,79,151,0.03); }
.otree-node .otree-title { font-weight: 600; font-size: 0.6875rem; color: var(--h2w-navy); }
.otree-node .otree-sub { font-size: 0.5625rem; color: var(--h2w-slate); font-weight: 400; margin-top: 0.0625rem; }

.otree-node.otree-root {
  background: var(--h2w-navy); color: white; border-color: var(--h2w-navy);
  font-weight: 700; font-size: 0.8125rem; padding: 0.625rem 1rem;
}
.otree-node.otree-root .otree-title { color: white; }
.otree-node.otree-root .otree-sub { color: rgba(255,255,255,0.65); }

.otree-node.otree-division {
  background: var(--h2w-blue); color: white; border-color: var(--h2w-blue);
  font-weight: 600; padding: 0.5rem 0.875rem;
}
.otree-node.otree-division .otree-title { color: white; }
.otree-node.otree-division .otree-sub { color: rgba(255,255,255,0.7); }

.otree-node.otree-dept {
  background: rgba(12,79,151,0.06); border-color: var(--h2w-blue); color: var(--h2w-blue);
}
.otree-node.otree-tier {
  background: var(--h2w-light); border-color: var(--h2w-border); font-size: 0.625rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: #475569; padding: 0.3rem 0.5rem;
}
.otree-node.otree-person {
  min-width: 100px; max-width: 140px; white-space: normal;
  font-size: 0.625rem; padding: 0.3rem 0.4rem;
}
.otree-node.otree-vacant { border-style: dashed; border-color: #94a3b8; }
.otree-node.otree-vacant .otree-title { color: #94a3b8; font-style: italic; }
.otree-node.otree-hire { border-color: var(--h2w-red); border-width: 2px; }
.otree-node.otree-contract { border-style: dashed; }

/* ── Connecting lines ── */
/* Vertical stem DOWN from parent node */
.otree-node.otree-stem::after {
  content: ''; position: absolute; bottom: -0.75rem; left: 50%;
  width: 0; height: 0.75rem; border-left: 1.5px solid #c5d5e4;
}
/* Vertical stem UP + horizontal rail from child li */
.otree ul > li::before,
.otree ul > li::after {
  content: ''; position: absolute; top: 0; width: 50%; height: 1.5rem;
  box-sizing: border-box;
}
.otree ul > li::before {
  left: 0; border-right: 1.5px solid #c5d5e4; border-top: 1.5px solid #c5d5e4;
}
.otree ul > li::after {
  right: 0; border-top: 1.5px solid #c5d5e4;
}
.otree ul > li:first-child::before { border-top: none; }
.otree ul > li:last-child::after { border-top: none; }
.otree ul > li:only-child::before { border-top: none; }
.otree ul > li:only-child::after { border-top: none; }
/* Gap between node and child ul */
.otree li { padding-top: 1.5rem; }
.otree > li { padding-top: 0; }
.otree > li::before, .otree > li::after { display: none; }

/* Tools view styles */
.tools-view { display: none; flex: 1; overflow: auto; padding: 2rem; background: var(--h2w-bg); }
.tools-view.visible { display: block; }
.tools-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.tool-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.tool-card h4 {
  font-size: 0.8125rem; font-weight: 600; color: var(--h2w-navy); margin-bottom: 0.125rem;
}
.tool-card .tool-vendor {
  font-size: 0.6875rem; color: #94a3b8; margin-bottom: 0.5rem;
}
.tool-card .tool-purpose {
  font-size: 0.75rem; color: var(--h2w-slate); line-height: 1.4;
}
.tool-card .tool-streams {
  margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem;
}
.tool-card .tool-tag {
  font-size: 0.625rem; background: rgba(12,79,151,0.08); color: var(--h2w-blue); padding: 0.125rem 0.5rem;
  cursor: pointer; transition: opacity 0.15s;
  border-radius: 9999px; font-weight: 500;
}
.tool-card .tool-tag:hover { opacity: 0.7; }
/* Architecture view styles */
.arch-view { display: none; flex: 1; overflow: auto; padding: 2rem; background: var(--h2w-bg); }
.arch-view.visible { display: block; }
.arch-diagram {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem; margin-bottom: 2rem; position: relative;
}
.arch-lane {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem; min-height: 200px;
}
.arch-lane-header {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.375rem 0.75rem; border-radius: 0.25rem;
  margin-bottom: 0.75rem; text-align: center; cursor: pointer; transition: opacity 0.15s;
}
.arch-lane-header:hover { opacity: 0.8; }
.arch-lane-header.acquire { background: rgba(12,79,151,0.1); color: var(--h2w-blue); }
.arch-lane-header.deliver { background: rgba(9,49,81,0.08); color: var(--h2w-navy); }
.arch-lane-header.enable { background: rgba(210,0,0,0.06); color: var(--h2w-red); }
.arch-lane-header.foundation { background: var(--h2w-light); color: #475569; }
.arch-sys {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.625rem; margin-bottom: 0.375rem;
  border: 1px solid var(--h2w-border); border-radius: 0.375rem; background: #fafbfc;
  font-size: 0.75rem; transition: all 0.15s;
}
.arch-sys:hover { border-color: var(--h2w-blue); background: rgba(12,79,151,0.04); }
.arch-sys .sys-name { font-weight: 600; color: var(--h2w-navy); }
.arch-sys .sys-role { color: var(--h2w-slate); font-size: 0.6875rem; }
.arch-arrow {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0; font-size: 0.6875rem; color: #94a3b8;
}
.arch-arrow .arrow { color: var(--h2w-blue); font-weight: 700; font-size: 0.75rem; }
.arch-flow-table {
  width: 100%; border-collapse: collapse; background: white;
  border: 1px solid var(--h2w-border); border-radius: 0.5rem; overflow: hidden;
  font-size: 0.8125rem; margin-top: 1rem;
}
.arch-flow-table thead { background: var(--h2w-light); }
.arch-flow-table th {
  text-align: left; padding: 0.625rem 1rem; font-weight: 600; color: #475569;
  border-bottom: 2px solid var(--h2w-border); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.03em;
}
.arch-flow-table td {
  padding: 0.5rem 1rem; border-bottom: 1px solid var(--h2w-light); color: #334155;
}
.arch-flow-table tr:hover td { background: var(--h2w-bg); }
.arch-flow-table .flow-arrow { color: var(--h2w-blue); font-weight: 700; text-align: center; }
/* Solution Architecture view styles */
.solution-arch-view { display: none; flex: 1; overflow: auto; padding: 2rem; background: var(--h2w-bg); }
.solution-arch-view.visible { display: block; }
/* Main 3-column layout: Web Portals | Infor OS core | 3rd Party */
.sa-main-grid {
  display: grid; grid-template-columns: 140px 1fr 160px;
  gap: 0.75rem; margin-bottom: 1rem; align-items: start;
}
/* Top bar (AI/ML, BI, Cyber) spans full width */
.sa-top-bar {
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center;
  margin-bottom: 1rem;
}
.sa-top-group { text-align: center; }
.sa-top-group-label {
  font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--h2w-slate); margin-bottom: 0.25rem;
}
.sa-top-group .sa-boxes { display: flex; gap: 0.375rem; justify-content: center; }
/* Reusable box module */
.sa-box {
  padding: 0.35rem 0.5rem; border: 1px solid #c5d5e4; border-radius: 0.25rem;
  background: white; font-size: 0.6875rem; text-align: center; color: var(--h2w-navy);
  font-weight: 500; transition: all 0.15s; line-height: 1.3;
}
.sa-box:hover { border-color: var(--h2w-blue); background: rgba(12,79,151,0.03); }
.sa-box small { display: block; font-size: 0.5625rem; color: var(--h2w-slate); font-weight: 400; }
.sa-box.dark {
  background: var(--h2w-navy); color: white; border-color: var(--h2w-navy); font-weight: 600;
}
.sa-box.dark small { color: rgba(255,255,255,0.65); }
.sa-box.accent {
  background: rgba(12,79,151,0.06); border-color: var(--h2w-blue); color: var(--h2w-blue);
}
/* Infor OS container */
.sa-infor-os {
  border: 2px solid var(--h2w-navy); border-radius: 0.5rem; padding: 0;
  background: white; overflow: hidden;
}
.sa-infor-os-header {
  background: var(--h2w-navy); color: white; padding: 0.375rem 0.75rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em;
}
.sa-infor-os-body { padding: 0.625rem; }
/* Middleware bar */
.sa-middleware {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  margin-bottom: 0.625rem;
}
.sa-middleware-label {
  font-size: 0.5625rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--h2w-blue); padding: 0.25rem 0.5rem;
  background: rgba(12,79,151,0.06); border-radius: 0.25rem;
}
/* Infor LN container */
.sa-infor-ln {
  border: 1.5px solid #5a8bb5; border-radius: 0.375rem;
  padding: 0; background: var(--h2w-bg); overflow: hidden;
}
.sa-infor-ln-header {
  background: var(--h2w-blue); color: white; padding: 0.3rem 0.625rem;
  font-size: 0.6875rem; font-weight: 600;
}
.sa-infor-ln-body { padding: 0.5rem; }
/* Module grid inside LN */
.sa-modules {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.375rem;
}
.sa-module {
  padding: 0.3rem 0.375rem; border: 1px solid #c5d5e4; border-radius: 0.25rem;
  background: white; font-size: 0.625rem; text-align: center; color: var(--h2w-navy);
  font-weight: 500; line-height: 1.3;
}
.sa-module:hover { border-color: var(--h2w-blue); background: rgba(12,79,151,0.03); }
/* Central ERP core block */
.sa-erp-core {
  grid-column: 2 / 3; grid-row: 2 / 4;
  background: var(--h2w-navy); color: white; border-radius: 0.375rem;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0.5rem; font-weight: 700; font-size: 0.8125rem;
  line-height: 1.4;
}
.sa-erp-core small { display: block; font-weight: 400; font-size: 0.625rem; opacity: 0.7; }
/* Side panels (Web Portals, 3rd Party) */
.sa-side-panel {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.sa-side-label {
  font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--h2w-blue); text-align: center;
  padding-bottom: 0.25rem; border-bottom: 1px solid var(--h2w-border);
}
.sa-side-box {
  padding: 0.3rem 0.375rem; border: 1px solid #c5d5e4; border-radius: 0.25rem;
  background: white; font-size: 0.625rem; text-align: center; color: var(--h2w-navy);
  font-weight: 500; line-height: 1.3;
}
.sa-side-box:hover { border-color: var(--h2w-blue); }
.sa-side-box small { display: block; font-size: 0.5rem; color: var(--h2w-slate); font-weight: 400; }
.sa-side-box.portal {
  background: rgba(12,79,151,0.06); border-color: var(--h2w-blue);
}
/* Connector arrows between panels */
.sa-connector {
  font-size: 0.5625rem; color: #94a3b8; text-align: center;
  display: flex; align-items: center; gap: 0.25rem; justify-content: center;
}
.sa-connector .arrow-lr { color: var(--h2w-blue); font-weight: 700; }
/* Below-LN area (Factory Track, DMS, IBP etc) */
.sa-below-ln {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.625rem;
  align-items: flex-start;
}
/* Foundation bars at the bottom */
.sa-foundation-bar {
  padding: 0.5rem 0.75rem; border-radius: 0.375rem;
  text-align: center; font-weight: 600; font-size: 0.75rem;
  margin-top: 0.5rem;
}
.sa-foundation-bar.data { background: var(--h2w-blue); color: white; }
.sa-foundation-bar.cloud { background: var(--h2w-navy); color: white; }
/* Digitalisation view */
.digital-view { display: none; flex: 1; overflow: auto; padding: 2rem; background: var(--h2w-bg); }
.digital-view.visible { display: block; }
/* IT Landscape nav list */
.it-landscape-list { list-style: none; }
.it-landscape-list li {
  padding: 0.5rem 0.75rem; margin-bottom: 0.25rem; border-radius: 0.375rem;
  cursor: pointer; display: flex; align-items: center; gap: 0.75rem;
  transition: all 0.15s; font-size: 0.8125rem;
}
.it-landscape-list li:hover { background: #f0f5fb; }
.it-landscape-list li.active { background: rgba(12,79,151,0.1); color: var(--h2w-blue); }
.it-landscape-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; font-size: 0.875rem;
}
/* Products & Services view styles */
.products-view { display: none; flex: 1; overflow: auto; padding: 2rem; background: var(--h2w-bg); }
.products-view.visible { display: block; }
.rate-table {
  width: 100%; border-collapse: collapse; background: white;
  border: 1px solid var(--h2w-border); border-radius: 0.5rem; overflow: hidden;
  font-size: 0.8125rem;
}
.rate-table thead { background: var(--h2w-light); }
.rate-table th {
  text-align: left; padding: 0.625rem 1rem; font-weight: 600; color: #475569;
  border-bottom: 2px solid var(--h2w-border); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rate-table td { padding: 0.5rem 1rem; border-bottom: 1px solid var(--h2w-light); color: #334155; }
.rate-table tr:hover td { background: var(--h2w-bg); }
.rate-table .rate-amount { font-weight: 600; color: var(--h2w-navy); text-align: right; white-space: nowrap; }
.rate-table .rate-code { color: #94a3b8; font-size: 0.6875rem; }
.offering-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.75rem; margin-bottom: 1.5rem;
}
.offering-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 0.75rem 1rem; display: flex; align-items: flex-start; gap: 0.625rem;
}
.offering-card .offering-code {
  font-size: 0.5625rem; font-weight: 700; background: rgba(12,79,151,0.08); color: var(--h2w-blue);
  padding: 0.125rem 0.375rem; border-radius: 0.25rem; white-space: nowrap; flex-shrink: 0;
  margin-top: 0.125rem;
}
.offering-card .offering-name { font-size: 0.8125rem; font-weight: 500; color: var(--h2w-navy); }
.delivery-cards { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.delivery-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem 1.25rem; flex: 1; min-width: 220px;
}
.delivery-card h4 { font-size: 0.8125rem; font-weight: 600; color: var(--h2w-navy); margin-bottom: 0.25rem; }
.delivery-card .delivery-model { font-size: 0.6875rem; color: var(--h2w-blue); font-weight: 500; margin-bottom: 0.375rem; }
.delivery-card p { font-size: 0.75rem; color: var(--h2w-slate); line-height: 1.5; }
.labs-flow {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem; margin-bottom: 1.5rem;
}
.labs-step {
  flex: 1; min-width: 120px; text-align: center; padding: 0.5rem;
}
.labs-step .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--h2w-blue); color: white;
  font-size: 0.6875rem; font-weight: 700; margin-bottom: 0.375rem;
}
.labs-step .step-label { font-size: 0.75rem; font-weight: 600; color: var(--h2w-navy); }
.labs-step .step-desc { font-size: 0.6875rem; color: var(--h2w-slate); margin-top: 0.125rem; }
.labs-arrow { color: var(--h2w-blue); font-size: 1rem; font-weight: 700; flex-shrink: 0; padding: 0 0.25rem; }
.industry-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.industry-tag {
  background: rgba(12,79,151,0.08); color: var(--h2w-blue); font-size: 0.75rem; font-weight: 500;
  padding: 0.375rem 0.75rem; border-radius: 0.375rem;
}
/* Case Studies view styles */
.cases-view { display: none; flex: 1; overflow: auto; padding: 2rem; background: var(--h2w-bg); }
.cases-view.visible { display: block; }
.cases-filter-bar {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; align-items: center;
}
.cases-filter-bar span {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--h2w-navy); margin-right: 0.25rem;
}
.filter-btn {
  padding: 0.3rem 0.7rem; border: 1px solid var(--h2w-border); border-radius: 9999px;
  background: white; cursor: pointer; font-size: 0.6875rem; font-weight: 500;
  color: #475569; transition: all 0.15s;
}
.filter-btn:hover { border-color: var(--h2w-blue); color: var(--h2w-blue); }
.filter-btn.active { background: var(--h2w-blue); color: white; border-color: var(--h2w-blue); }
.case-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  margin-bottom: 1rem; overflow: hidden; transition: all 0.15s;
}
.case-card:hover { border-color: #cbd5e1; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.case-header {
  padding: 1rem 1.25rem; cursor: pointer; display: flex; align-items: flex-start;
  gap: 1rem; user-select: none;
}
.case-header:hover { background: #fafbfc; }
.case-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: rgba(12,79,151,0.08); border-radius: 0.375rem;
  font-size: 0.75rem; font-weight: 700; color: var(--h2w-blue); flex-shrink: 0;
}
.case-meta { flex: 1; min-width: 0; }
.case-title { font-size: 0.875rem; font-weight: 600; color: var(--h2w-navy); margin-bottom: 0.25rem; }
.case-subtitle { font-size: 0.75rem; color: var(--h2w-slate); line-height: 1.4; }
.case-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.375rem; }
.case-tag {
  font-size: 0.5625rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.case-tag.industry { background: rgba(12,79,151,0.08); color: var(--h2w-blue); }
.case-tag.service { background: rgba(210,0,0,0.06); color: var(--h2w-red); }
.case-tag.module { background: #f0fdf4; color: #166534; }
.case-tag.status-pub { background: #dcfce7; color: #166534; }
.case-tag.status-anon { background: #fef3c7; color: #92400e; }
.case-streams { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.375rem; }
.case-stream-badge {
  font-size: 0.5625rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 3px;
  background: rgba(37,99,235,0.08); color: #2563eb; cursor: pointer; transition: opacity 0.15s;
}
.case-stream-badge:hover { opacity: 0.7; }
.case-chevron {
  font-size: 0.625rem; color: #94a3b8; transition: transform 0.2s;
  flex-shrink: 0; margin-top: 0.375rem;
}
.case-card.expanded .case-chevron { transform: rotate(180deg); }
.case-body {
  display: none; padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--h2w-light);
}
.case-card.expanded .case-body { display: block; }
.case-section { margin-top: 1rem; }
.case-section h5 {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--h2w-blue); margin-bottom: 0.375rem;
}
.case-section p, .case-section li {
  font-size: 0.8125rem; color: #334155; line-height: 1.6;
}
.case-section ul { padding-left: 1.25rem; margin: 0; }
.case-section li { margin-bottom: 0.25rem; }
.case-quote {
  border-left: 3px solid var(--h2w-blue); padding: 0.5rem 0.75rem; margin: 0.5rem 0;
  background: var(--h2w-bg); border-radius: 0 0.25rem 0.25rem 0;
}
.case-quote p { font-style: italic; font-size: 0.8125rem; color: #475569; }
.case-quote .quote-author { font-style: normal; font-weight: 500; color: var(--h2w-navy); font-size: 0.75rem; margin-top: 0.25rem; }
.case-kv { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; font-size: 0.8125rem; }
.case-kv dt { font-weight: 500; color: var(--h2w-slate); }
.case-kv dd { color: #334155; }
/* Concepts view styles */
.concepts-view { display: none; flex: 1; overflow: auto; padding: 2rem; background: var(--h2w-bg); }
.concepts-view.visible { display: block; }
.concept-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem 1.25rem; margin-bottom: 0.75rem;
}
.concept-card h4 { font-size: 0.8125rem; font-weight: 600; color: var(--h2w-navy); margin-bottom: 0.25rem; }
.concept-card .concept-aka { font-size: 0.6875rem; color: #94a3b8; margin-bottom: 0.375rem; }
.concept-card .concept-desc { font-size: 0.75rem; color: var(--h2w-slate); line-height: 1.5; }
.concept-card .concept-use {
  margin-top: 0.375rem; font-size: 0.6875rem; color: var(--h2w-red); font-weight: 500;
}
.concept-link {
  margin-top: 0.375rem; font-size: 0.6875rem; color: #2563eb; font-weight: 500;
  cursor: pointer;
}
.concept-link:hover { text-decoration: underline; }
.concepts-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 0.75rem; margin-bottom: 1.5rem;
}
/* Collapsible nav sections */
.nav-section { margin-bottom: 0.5rem; }
.nav-section-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; padding: 0.5rem 0.25rem; user-select: none;
}
.nav-section-header h2 { margin-bottom: 0; }
.nav-section-header .nav-chevron {
  font-size: 0.625rem; color: var(--h2w-blue); transition: transform 0.2s;
}
.nav-section.collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-section-body { overflow: hidden; transition: max-height 0.2s ease; }
.nav-section.collapsed .nav-section-body { max-height: 0 !important; overflow: hidden; }
.nav-sub-header {
  font-size: 0.6875rem; font-weight: 500; color: #94a3b8;
  padding: 0.375rem 0.25rem 0.25rem; margin-top: 0.25rem;
}
/* Detail level bar in main body */
.detail-level-bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1.25rem; background: var(--h2w-bg); border-bottom: 1px solid var(--h2w-border);
  flex-shrink: 0;
}
.detail-level-bar span {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--h2w-navy);
}
.detail-level-bar .level-btn { flex: none; padding: 0.3rem 0.75rem; }
/* Empty state for placeholder sections */
.nav-empty {
  font-size: 0.75rem; color: #94a3b8; font-style: italic;
  padding: 0.5rem 0.75rem;
}
.status {
  position: fixed;
  bottom: 10px; right: 10px;
  background: var(--h2w-navy);
  color: rgba(255,255,255,0.6);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.6875rem;
}
/* Table scroll wrapper for responsive */
.table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Hamburger menu button — hidden on desktop */
.hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 0.375rem; margin-right: 0.75rem; flex-shrink: 0;
}
.hamburger span {
  display: block; width: 20px; height: 2px; background: white;
  margin: 4px 0; border-radius: 1px; transition: all 0.25s ease;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(3px, 4px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(3px, -4px); }
/* Sidebar overlay backdrop — hidden on desktop */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 99;
}
.sidebar-overlay.visible { display: block; }

/* ===== Sidebar Search ===== */
.sidebar-search {
  position: relative;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--h2w-border);
}
.sidebar-search input {
  width: 100%;
  padding: 0.45rem 0.65rem 0.45rem 1.8rem;
  border: 1px solid var(--h2w-border);
  border-radius: 0.375rem;
  font-size: 0.8rem;
  color: #334155;
  background: var(--h2w-bg);
  transition: all 0.15s;
}
.sidebar-search input:focus {
  outline: none;
  border-color: var(--h2w-blue);
  background: white;
  box-shadow: 0 0 0 2px rgba(12,79,151,0.12);
}
.sidebar-search::before {
  content: '\2315';
  position: absolute;
  left: 0.6rem;
  top: 0.45rem;
  font-size: 0.9rem;
  color: #94a3b8;
  pointer-events: none;
}
.sidebar-search .search-kbd {
  position: absolute;
  right: 0.5rem;
  top: 0.4rem;
  font-size: 0.6rem;
  color: #94a3b8;
  background: var(--h2w-light);
  border: 1px solid var(--h2w-border);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  pointer-events: none;
}
.search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--h2w-border);
  border-radius: 0 0 0.375rem 0.375rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  max-height: 320px;
  overflow-y: auto;
  z-index: 50;
}
.search-results.visible { display: block; }
.search-result-item {
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  border-bottom: 1px solid var(--h2w-light);
  transition: background 0.1s;
}
.search-result-item:hover { background: #f0f5fb; }
.search-result-item:last-child { border-bottom: none; }
.search-result-stream {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--h2w-blue);
}
.search-result-task {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--h2w-navy);
  margin-top: 1px;
}
.search-result-match {
  font-size: 0.7rem;
  color: var(--h2w-slate);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-no-results {
  padding: 0.75rem;
  font-size: 0.78rem;
  color: #94a3b8;
  font-style: italic;
  text-align: center;
}

/* ===== Load Error ===== */
.load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0.75rem;
  color: #94a3b8;
  text-align: center;
  padding: 2rem;
}
.load-error-icon { font-size: 2rem; }
.load-error-msg { font-size: 0.875rem; color: var(--h2w-slate); max-width: 400px; }
.load-error-retry {
  padding: 0.4rem 1rem;
  border: 1px solid var(--h2w-blue);
  border-radius: 0.375rem;
  background: white;
  color: var(--h2w-blue);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.load-error-retry:hover { background: var(--h2w-blue); color: white; }

/* ===== Print View ===== */
#print-view {
  display: none;
  padding: 2rem;
  background: white;
}
.print-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--h2w-navy);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}
.print-header h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--h2w-navy);
}
.print-header .print-meta {
  font-size: 0.75rem;
  color: var(--h2w-slate);
  text-align: right;
}
.print-task {
  margin-bottom: 1.5rem;
  break-inside: avoid;
}
.print-task h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--h2w-navy);
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--h2w-border);
}
.print-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.print-checklist li {
  padding: 0.25rem 0;
  font-size: 0.85rem;
  color: #334155;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.print-checklist li::before {
  content: '\2610';
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.2;
}

/* ===== Master load warning ===== */
.master-warning {
  padding: 0.4rem 0.75rem;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.75rem;
  border-bottom: 1px solid #fcd34d;
}
/* ── Extracted Inline Styles ────────────────────────────────────────── */
.nav-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.25rem 0; }
.nav-btn-full-width { grid-column: 1 / -1; }
.arch-sys-flex { flex: 1; min-width: 150px; }
.resource-view-title { font-size: 1.125rem; font-weight: 700; color: var(--h2w-navy); margin-bottom: 1.25rem; }

/* ===== RESPONSIVE: Tablet (<=1024px) ===== */
@media (max-width: 1024px) {
  .sidebar { width: 240px; padding: 1rem; }
  .bpmn-detail-panel.open { width: 240px; }
  .arch-diagram { grid-template-columns: 1fr 1fr; }
  .tools-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .offering-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .concepts-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .org-entity { min-width: 220px; }
  .delivery-cards { gap: 0.75rem; }
  .delivery-card { min-width: 180px; }
  .labs-step { min-width: 90px; }
  .otree-node { font-size: 0.625rem; padding: 0.3rem 0.4rem; }
  .otree-node.otree-person { min-width: 90px; max-width: 120px; }
  .otree li { padding: 0 0.25rem; }
  .otree ul { padding-top: 1.25rem; }
}

/* ===== RESPONSIVE: Small tablet / large phone (<=768px) ===== */
@media (max-width: 768px) {
  body { overflow: auto; height: auto; }
  .app { height: auto; min-height: 100vh; }
  .hamburger { display: flex; flex-direction: column; }
  .header { padding: 0.75rem 1rem; }
  .header h1 { font-size: 1.05rem; }
  .breadcrumb { font-size: 0.75rem; }
  /* Sidebar becomes off-canvas overlay */
  .sidebar {
    position: fixed; top: 0; left: -280px; width: 280px; height: 100vh;
    z-index: 100; transition: left 0.3s ease;
    padding: 1.25rem; padding-top: 4rem;
    box-shadow: none;
  }
  .sidebar.mobile-open {
    left: 0;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }
  .main { flex-direction: column; overflow: auto; }
  .viewer { min-height: 50vh; }
  .viewer-content { flex-direction: column; }
  .bpmn-detail-panel.open { width: 100%; border-left: none; border-top: 2px solid var(--h2w-blue); }
  #bpmn-container { min-height: 300px; }
  /* Detail level bar wraps */
  .detail-level-bar { flex-wrap: wrap; padding: 0.5rem 0.75rem; gap: 0.5rem; }
  .detail-level-bar .level-btn { padding: 0.25rem 0.625rem; font-size: 0.6875rem; }
  /* Legend wraps */
  .bpmn-legend { padding: 0.5rem 0.75rem; gap: 0.5rem; }
  .legend-item { font-size: 0.625rem; }
  /* Tables scroll horizontally via wrapper */
  .table-scroll-wrap { margin: 0 -0.25rem; }
  .org-table, .arch-flow-table, .rate-table { min-width: 500px; }
  .bpmn-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bpmn-table-wrap table { min-width: 500px; }
  /* Resource views — less padding */
  .org-view, .tools-view, .arch-view, .solution-arch-view, .digital-view, .products-view, .concepts-view, .cases-view, .fw-view {
    padding: 1rem;
  }
  /* Architecture: single column */
  .arch-diagram { grid-template-columns: 1fr; gap: 1rem; }
  /* Tools: single column */
  .tools-grid { grid-template-columns: 1fr; }
  /* Offerings: single column */
  .offering-grid { grid-template-columns: 1fr; }
  /* Concepts: single column */
  .concepts-grid { grid-template-columns: 1fr; }
  /* Delivery cards stack */
  .delivery-cards { flex-direction: column; }
  .delivery-card { min-width: 0; }
  /* Labs flow wraps */
  .labs-flow { flex-wrap: wrap; justify-content: center; gap: 0.25rem; }
  .labs-step { min-width: 100px; }
  .labs-arrow { display: none; }
  /* Org entities stack */
  .org-entity { display: block; min-width: 0; margin-right: 0; }
  /* Solution architecture responsive */
  .sa-main-grid { grid-template-columns: 1fr; gap: 1rem; }
  .sa-side-panel { flex-direction: row; flex-wrap: wrap; gap: 0.375rem; }
  .sa-side-box { flex: 1; min-width: 100px; }
  .sa-modules { grid-template-columns: repeat(2, 1fr); }
  .sa-erp-core { grid-column: 1 / -1; grid-row: auto; }
  .sa-top-bar { gap: 0.5rem; }
  /* Framework views: stack timeline, single column grids */
  .fw-phase-timeline { flex-wrap: wrap; gap: 4px; }
  .fw-phase-card {
    clip-path: none !important; min-width: calc(33% - 4px);
    border-radius: 0.375rem; padding: 0.5rem;
  }
  .fw-tool-grid { grid-template-columns: 1fr; }
  .fw-kpi-grid { grid-template-columns: 1fr; }
  .fw-icp-profiles { grid-template-columns: 1fr; }
  .fw-icp-pipeline { flex-direction: column; }
  .fw-icp-stage-arrow { transform: rotate(90deg); }
  .fw-icp-boundary-flow { flex-direction: column; }
  .fw-icp-boundary-arrow { transform: rotate(90deg); }
  /* Case study cards */
  .case-header { padding: 0.75rem; gap: 0.75rem; }
  .case-body { padding: 0 0.75rem 0.75rem; }
  .case-kv { grid-template-columns: 1fr; gap: 0.125rem 0; }
  .case-kv dt { color: var(--h2w-slate); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.375rem; }
  /* Status bar */
  .status { bottom: 5px; right: 5px; font-size: 0.625rem; }
  /* Org tree: collapse to vertical */
  .otree, .otree ul {
    flex-direction: column; align-items: flex-start;
    padding-top: 0; padding-left: 1rem;
  }
  .otree { padding-left: 0; }
  .otree li { align-items: flex-start; padding: 0.25rem 0; }
  .otree ul > li::before, .otree ul > li::after,
  .otree-node.otree-stem::after { display: none; }
  .otree ul { border-left: 2px solid var(--h2w-border); margin-left: 0.5rem; }
  .otree > li > ul { border-left: none; padding-left: 0; }
  .otree-node { white-space: normal; }
  .otree-node.otree-person { min-width: 0; max-width: none; }
  .otree-wrap { overflow-x: visible; padding: 1rem 0.5rem; }
  /* Brand & Content: responsive */
  .bc-matrix-container { grid-template-columns: 1fr; }
  .bc-weeks-grid { grid-template-columns: repeat(2, 1fr); }
  .bc-funnel-bottom-row { grid-template-columns: 1fr; }
  .bc-stage-desc { max-width: none; text-align: left; margin-left: 0; }
  .bc-flywheel { flex-direction: column; text-align: center; }
  .bc-playbook-buyer-split { flex-direction: column; }
}

/* ===== RESPONSIVE: Phone (<=480px) ===== */
@media (max-width: 480px) {
  .header { padding: 0.5rem 0.75rem; }
  .header h1 { font-size: 0.9375rem; }
  .breadcrumb { font-size: 0.6875rem; }
  .org-view, .tools-view, .arch-view, .solution-arch-view, .digital-view, .products-view, .concepts-view, .cases-view, .fw-view {
    padding: 0.75rem;
  }
  .org-section h3 { font-size: 0.8125rem; }
  .case-num { width: 26px; height: 26px; font-size: 0.625rem; }
  .case-title { font-size: 0.8125rem; }
  .case-subtitle { font-size: 0.6875rem; }
  .case-tags { gap: 0.125rem; }
  .case-tag { font-size: 0.5rem; padding: 0.0625rem 0.3rem; }
  .filter-btn { padding: 0.25rem 0.5rem; font-size: 0.625rem; }
  .cases-filter-bar { gap: 0.375rem; }
  /* Rate card table */
  .rate-table { min-width: 400px; }
  /* Org table */
  .org-table { min-width: 450px; }
  /* Products section headers */
  .products-view .org-section h3 { font-size: 0.8125rem; }
  .tool-card h4 { font-size: 0.75rem; }
  .tool-card .tool-purpose { font-size: 0.6875rem; }
  /* Concept cards tighter */
  .concept-card { padding: 0.75rem; }
  .concept-card h4 { font-size: 0.75rem; }
  .concept-card .concept-desc { font-size: 0.6875rem; }
  .otree-node { font-size: 0.5625rem; padding: 0.2rem 0.3rem; }
  .otree-node.otree-root { font-size: 0.6875rem; }
  .otree ul { padding-left: 0.75rem; }
  /* Framework: vertical step list at 480px */
  .fw-phase-timeline {
    flex-direction: column; gap: 2px;
  }
  .fw-phase-card {
    clip-path: none !important; border-radius: 0.25rem;
    flex-direction: row; justify-content: space-between; align-items: center;
    padding: 0.5rem 0.75rem; text-align: left; min-width: 0;
  }
  .fw-phase-label { font-size: 0.7rem; }
  .fw-phase-streams { font-size: 0.55rem; }
  .fw-task-item { flex-wrap: wrap; gap: 0.25rem; }
  .fw-task-stream { margin-left: 0; }
  .fw-gate-card { flex-wrap: wrap; }
  .bc-weeks-grid { grid-template-columns: 1fr; }
  .bc-stage-header { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
  .bc-stage-desc { max-width: none; text-align: left; margin-left: 0; font-size: 0.7rem; }
  .bc-entities-grid { grid-template-columns: 1fr; }
  .bc-templates-grid { grid-template-columns: 1fr; }
}

/* ===== Screen reader only (visually hidden) ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Active state for toggle buttons ===== */
.detail-toggle-btn.active {
  background: var(--h2w-blue);
  color: white;
  border-color: var(--h2w-blue);
}

/* ===== Search result keyboard navigation ===== */
.search-result-item.search-active {
  background: #f0f5fb;
  outline: 2px solid var(--h2w-blue);
  outline-offset: -2px;
}

/* ===== Focus-visible for keyboard accessibility ===== */
.stream-list li:focus-visible,
.it-landscape-list li:focus-visible,
.nav-section-header:focus-visible,
.case-header:focus-visible,
.journey-arc-stage:focus-visible,
.product-stage:focus-visible,
.enable-stage:focus-visible,
.org-section h3:focus-visible {
  outline: 2px solid var(--h2w-blue);
  outline-offset: -2px;
  border-radius: 0.375rem;
}
button:focus-visible,
.level-btn:focus-visible,
.detail-toggle-btn:focus-visible,
.lang-btn:focus-visible,
.filter-btn:focus-visible,
.org-tab:focus-visible,
.load-error-retry:focus-visible {
  outline: 2px solid var(--h2w-blue);
  outline-offset: 2px;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .has-checklist rect { animation: none; }
  .sidebar { transition: none; }
  .bpmn-detail-panel { transition: none !important; }
  .nav-section-body { transition: none; }
  .case-chevron { transition: none; }
  .org-section h3::after { transition: none; }
}

/* ===== FRAMEWORK VIEWS ===== */
.fw-view { display: none; flex: 1; overflow: auto; padding: 2rem; background: var(--h2w-bg); }
.fw-view.visible { display: block; }

/* -- Delivery Methodology Timeline -- */
.fw-intro { font-size: 0.85rem; color: var(--h2w-slate); line-height: 1.6; margin-bottom: 1.5rem; max-width: 720px; }
.fw-section-title {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--h2w-navy); margin-bottom: 0.75rem;
}
.fw-phase-timeline {
  display: flex; align-items: stretch; gap: 3px; flex-shrink: 0;
  margin-bottom: 1.5rem;
}
.fw-phase-card {
  flex: 1; padding: 0.75rem 0.5rem; cursor: pointer;
  background: var(--h2w-blue); color: white; text-align: center; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  transition: background 0.15s;
  border: none; border-radius: 0;
  min-width: 0;
}
.fw-phase-card:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.fw-phase-card:last-child  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); }
.fw-phase-card:hover { background: #093d75; }
.fw-phase-card.active { background: var(--h2w-navy); }
.fw-phase-label { font-size: 0.75rem; font-weight: 700; line-height: 1.2; }
.fw-phase-streams { font-size: 0.6rem; opacity: 0.65; }

/* Phase detail panel */
.fw-phase-detail {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1.25rem; margin-bottom: 1.5rem;
}
.fw-phase-detail-header {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
}
.fw-phase-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; background: var(--h2w-navy); color: white;
  border-radius: 50%; font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}
.fw-phase-name { font-size: 1rem; font-weight: 700; color: var(--h2w-navy); }
.fw-phase-desc {
  font-size: 0.8rem; color: var(--h2w-slate); line-height: 1.5; margin-bottom: 1rem;
}
.fw-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.fw-task-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; border: 1px solid var(--h2w-border); border-radius: 0.375rem;
  cursor: pointer; transition: all 0.15s; font-size: 0.8rem;
}
.fw-task-item:hover { border-color: var(--h2w-blue); background: rgba(12,79,151,0.04); }
.fw-task-code {
  font-family: monospace; font-size: 0.68rem; color: var(--h2w-slate);
  background: var(--h2w-light); padding: 0.15rem 0.4rem; border-radius: 3px; white-space: nowrap;
}
.fw-task-name { color: var(--h2w-navy); font-weight: 500; }
.fw-task-stream {
  margin-left: auto; font-size: 0.6rem; font-weight: 600;
  color: var(--h2w-blue); background: rgba(12,79,151,0.08);
  padding: 0.1rem 0.4rem; border-radius: 9999px; white-space: nowrap;
}

/* -- Tool Landscape Matrix -- */
.fw-tool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.fw-tool-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.fw-tool-card h4 { font-size: 0.875rem; font-weight: 600; color: var(--h2w-navy); margin-bottom: 0.125rem; }
.fw-tool-vendor { font-size: 0.6875rem; color: #94a3b8; margin-bottom: 0.25rem; }
.fw-tool-category { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--h2w-blue); margin-bottom: 0.5rem; }
.fw-tool-tasks { display: flex; flex-direction: column; gap: 0.3rem; }
.fw-tool-task-row {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; padding: 0.25rem 0.5rem;
  border-radius: 0.25rem; cursor: pointer; transition: background 0.1s;
}
.fw-tool-task-row:hover { background: #f0f5fb; }

/* -- Governance & Controls -- */
.fw-gate-grid { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.fw-gate-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem 1.25rem; display: flex; align-items: flex-start; gap: 1rem;
  cursor: pointer; transition: border-color 0.15s;
}
.fw-gate-card:hover { border-color: var(--h2w-red); }
.fw-gate-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: rgba(210,0,0,0.08); color: var(--h2w-red);
  font-size: 1.1rem; font-weight: 700; border-radius: 6px;
}
.fw-gate-body { flex: 1; min-width: 0; }
.fw-gate-name { font-size: 0.875rem; font-weight: 600; color: var(--h2w-navy); margin-bottom: 0.25rem; }
.fw-gate-meta { font-size: 0.75rem; color: var(--h2w-slate); line-height: 1.5; }
.fw-gate-meta strong { color: #334155; }
.fw-gate-stream {
  font-size: 0.6rem; font-weight: 600; color: var(--h2w-blue);
  background: rgba(12,79,151,0.08); padding: 0.1rem 0.4rem;
  border-radius: 9999px; white-space: nowrap; flex-shrink: 0;
  align-self: flex-start; margin-top: 0.25rem;
}

/* -- KPI Framework -- */
.fw-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.fw-kpi-domain {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  overflow: hidden;
}
.fw-kpi-domain-header {
  background: var(--h2w-navy); color: white; padding: 0.6rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
.fw-kpi-domain-name { font-size: 0.8rem; font-weight: 700; }
.fw-kpi-domain-streams { font-size: 0.6rem; opacity: 0.65; display: flex; gap: 4px; }
.fw-kpi-stream-pill { cursor: pointer; padding: 0.05rem 0.4rem; border-radius: 9999px; background: rgba(255,255,255,0.15); transition: background 0.15s; }
.fw-kpi-stream-pill:hover { background: rgba(255,255,255,0.35); }
.fw-kpi-metrics { padding: 0.5rem; }
.fw-kpi-metric {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--h2w-light);
  font-size: 0.78rem;
}
.fw-kpi-metric:last-child { border-bottom: none; }
.fw-kpi-metric-name { color: #334155; font-weight: 500; }
.fw-kpi-target {
  font-family: monospace; font-size: 0.72rem; font-weight: 600;
  color: #166534; background: #dcfce7; padding: 0.15rem 0.5rem;
  border-radius: 3px; white-space: nowrap;
}

/* -- Framework nav active state -- */
#framework-list li.active { background: rgba(12,79,151,0.1); color: var(--h2w-blue); }

/* -- Framework tags in BPMN detail panel -- */
.bdp-fw-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bdp-fw-tag {
  font-size: 0.65rem; padding: 0.15rem 0.5rem; border-radius: 9999px;
  font-weight: 600; white-space: nowrap; cursor: pointer; transition: opacity 0.15s;
}
.bdp-fw-tag:hover { opacity: 0.7; }
/* -- RACI Matrix -- */
.fw-raci-legend {
  font-size: 0.78rem; color: var(--h2w-slate); margin-bottom: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
}
.fw-raci-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.fw-raci-table {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
}
.fw-raci-table th {
  background: var(--h2w-navy); color: white; padding: 0.5rem 0.6rem;
  text-align: center; font-size: 0.68rem; font-weight: 600;
  white-space: nowrap; position: sticky; top: 0;
}
.fw-raci-table th:first-child { text-align: left; min-width: 220px; }
.fw-raci-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--h2w-border); }
.fw-raci-activity {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 500; color: var(--h2w-navy); white-space: nowrap;
}
.fw-raci-cell { text-align: center; }
.fw-raci-row { cursor: pointer; transition: background 0.1s; }
.fw-raci-row:hover { background: rgba(12,79,151,0.04); }
.fw-raci-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px; font-size: 0.65rem;
  font-weight: 700;
}
.raci-R { background: #dbeafe; color: #1e40af; }
.raci-A { background: #fef3c7; color: #92400e; }
.raci-C { background: #e0e7ff; color: #3730a3; }
.raci-I { background: var(--h2w-light); color: var(--h2w-slate); }

/* -- ICP Framework -- */
.fw-icp-profiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.fw-icp-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  overflow: hidden;
}
.fw-icp-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.875rem 1.25rem;
  background: var(--h2w-navy); color: white;
}
.fw-icp-card-title { font-size: 0.875rem; font-weight: 700; }
.fw-icp-bu-pill {
  font-size: 0.6rem; font-weight: 600; padding: 0.15rem 0.5rem;
  border-radius: 9999px; background: rgba(255,255,255,0.15); white-space: nowrap;
}
.fw-icp-dimension { border-top: 1px solid var(--h2w-border); }
.fw-icp-dim-header {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--h2w-blue); padding: 0.625rem 1.25rem;
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem;
}
.fw-icp-dim-header::before {
  content: '\25B8'; font-size: 0.65rem; transition: transform 0.15s;
}
details[open] > .fw-icp-dim-header::before { transform: rotate(90deg); }
.fw-icp-dim-header::-webkit-details-marker { display: none; }

.fw-icp-criteria-table {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
}
.fw-icp-criteria-table tr { border-bottom: 1px solid var(--h2w-light); }
.fw-icp-criteria-table tr:last-child { border-bottom: none; }
.fw-icp-criteria-key {
  padding: 0.4rem 0.75rem 0.4rem 1.25rem; color: var(--h2w-slate);
  font-weight: 500; white-space: nowrap; width: 30%; vertical-align: top;
}
.fw-icp-criteria-val { padding: 0.4rem 1.25rem 0.4rem 0.75rem; color: #334155; }

.fw-icp-signals { padding: 0.25rem 0; }
.fw-icp-signal-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.35rem 1.25rem; font-size: 0.78rem;
  border-bottom: 1px solid var(--h2w-light);
}
.fw-icp-signal-row:last-child { border-bottom: none; }
.fw-icp-signal-name { color: #334155; }
.fw-icp-weight {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0.15rem 0.5rem;
  border-radius: 9999px; white-space: nowrap;
}
.fw-icp-weight-critical { background: #fee2e2; color: #991b1b; }
.fw-icp-weight-high { background: #ffedd5; color: #9a3412; }
.fw-icp-weight-medium { background: #e0e7ff; color: #3730a3; }

.fw-icp-disqualifiers { list-style: none; margin: 0; padding: 0.25rem 0; }
.fw-icp-disqualifier {
  padding: 0.35rem 1.25rem 0.35rem 2rem; font-size: 0.78rem; color: #991b1b;
  border-bottom: 1px solid var(--h2w-light); position: relative;
}
.fw-icp-disqualifier::before {
  content: '\2715'; position: absolute; left: 1.25rem; color: #dc2626;
  font-weight: 700; font-size: 0.65rem;
}
.fw-icp-disqualifier:last-child { border-bottom: none; }

.fw-icp-section-title {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--h2w-navy); margin-bottom: 0.5rem; margin-top: 0.5rem;
}

.fw-icp-pipeline {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  margin-bottom: 2rem;
}
.fw-icp-stage {
  flex: 1; min-width: 120px; background: white; border: 1px solid var(--h2w-border);
  border-radius: 0.375rem; padding: 0.75rem; display: flex;
  flex-direction: column; gap: 0.5rem;
}
.fw-icp-stage-won { border-color: #86efac; background: #f0fdf4; }
.fw-icp-stage-lost { border-color: #fca5a5; background: #fef2f2; }
.fw-icp-stage-name {
  font-size: 0.72rem; font-weight: 600; color: var(--h2w-navy); line-height: 1.3;
}
.fw-icp-stage-body { display: flex; flex-direction: column; gap: 0.375rem; }
.fw-icp-stage-pct {
  position: relative; height: 18px; background: var(--h2w-light);
  border-radius: 9px; overflow: hidden;
}
.fw-icp-pct-bar {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, #0c4f97, #3b82f6);
  border-radius: 9px; transition: width 0.3s;
}
.fw-icp-pct-label {
  position: relative; z-index: 1; font-size: 0.6rem; font-weight: 700;
  color: #334155; display: flex; align-items: center; justify-content: center;
  height: 100%;
}
.fw-icp-stage-arrow {
  display: flex; align-items: center; justify-content: center;
  color: #cbd5e1; font-size: 0.75rem; flex-shrink: 0; padding: 0 0.125rem;
}

.fw-icp-boundary {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1.25rem; margin-bottom: 1.5rem;
}
.fw-icp-boundary-desc {
  font-size: 0.8rem; color: var(--h2w-slate); line-height: 1.5; margin-bottom: 1rem;
}
.fw-icp-boundary-flow {
  display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;
}
.fw-icp-boundary-leads, .fw-icp-boundary-opp { flex: 1; min-width: 180px; }
.fw-icp-boundary-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--h2w-slate); margin-bottom: 0.5rem;
}
.fw-icp-boundary-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.fw-icp-lead-pill {
  font-size: 0.68rem; font-weight: 500; padding: 0.2rem 0.6rem;
  border-radius: 9999px; background: var(--h2w-light); color: #334155;
  border: 1px solid var(--h2w-border);
}
.fw-icp-boundary-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--h2w-blue); flex-shrink: 0; align-self: center;
}
.fw-icp-trigger-box {
  font-size: 0.78rem; font-weight: 600; color: #166534;
  background: #dcfce7; border: 1px solid #86efac;
  padding: 0.5rem 0.75rem; border-radius: 0.375rem;
}

/* -- ABC Scoring Model -- */
.fw-icp-scoring-table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; }
.fw-icp-scoring-table {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.375rem;
}
.fw-icp-scoring-table th {
  background: var(--h2w-navy); color: white; padding: 0.5rem 0.75rem;
  text-align: left; font-weight: 600; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.03em;
}
.fw-icp-scoring-table td {
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--h2w-border);
  vertical-align: top; line-height: 1.4;
}
.fw-icp-scoring-table tbody tr:hover { background: #f8fafc; }
.fw-icp-scoring-dim { font-weight: 600; white-space: nowrap; color: var(--h2w-navy); }
.fw-icp-scoring-wt {
  font-weight: 700; color: var(--h2w-blue); text-align: center; white-space: nowrap;
}
.fw-icp-tiers { margin: 0.75rem 0 1rem; font-size: 0.82rem; }
.fw-icp-tier-badge {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 0.25rem;
  font-size: 0.72rem; font-weight: 600;
}
.fw-icp-tier-a, th.fw-icp-tier-a { background: #dcfce7; color: #166534; }
.fw-icp-tier-b, th.fw-icp-tier-b { background: #dbeafe; color: #1e40af; }
.fw-icp-tier-c, th.fw-icp-tier-c { background: #fef3c7; color: #92400e; }
.fw-icp-overrides { margin: 0.75rem 0 1.5rem; font-size: 0.82rem; }
.fw-icp-overrides ul { margin: 0.5rem 0 0 1.25rem; padding: 0; }
.fw-icp-overrides li { margin-bottom: 0.375rem; }

/* -- Entry Points Grid -- */
.fw-icp-entry-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem; margin: 1rem 0 1.5rem;
}
.fw-icp-entry-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem; border-left: 4px solid var(--h2w-blue);
}
.fw-icp-entry-header {
  font-weight: 700; font-size: 0.88rem; color: var(--h2w-navy); margin-bottom: 0.5rem;
}
.fw-icp-entry-card p { font-size: 0.78rem; color: #475569; margin: 0 0 0.75rem; line-height: 1.5; }
.fw-icp-entry-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fw-icp-entry-share, .fw-icp-entry-point {
  font-size: 0.72rem; background: var(--h2w-bg); padding: 0.2rem 0.5rem;
  border-radius: 0.25rem; color: #475569;
}

/* -- Cross-Sell Flow -- */
.fw-icp-cross-sell-flow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  margin: 1rem 0;
}
.fw-icp-cross-sell-step {
  display: flex; align-items: center; gap: 0.5rem;
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.375rem;
  padding: 0.5rem 0.75rem; font-size: 0.78rem;
}
.fw-icp-cross-sell-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--h2w-navy); color: white; font-size: 0.68rem; font-weight: 700;
  flex-shrink: 0;
}
.fw-icp-cross-sell-timing { font-size: 0.82rem; margin: 0.75rem 0 1.5rem; color: #475569; }

@media print {
  .fw-icp-scoring-table { page-break-inside: avoid; }
  .fw-icp-entry-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* -- Content Matrix (27 B2B Content Types) -- */
.bc-matrix-container {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  margin-bottom: 2rem;
}
.bc-quadrant {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem; min-height: 160px;
}
.bc-quadrant-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--h2w-slate); margin-bottom: 0.75rem;
  display: flex; align-items: center; gap: 0.375rem;
}
.bc-quadrant-label .axis-icon {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
}
.bc-content-chips {
  display: flex; flex-wrap: wrap; gap: 0.375rem;
}
.bc-content-chip {
  font-size: 0.72rem; font-weight: 500; padding: 0.25rem 0.625rem;
  border-radius: 9999px; border: 1px solid rgba(0,0,0,0.08);
  cursor: default; transition: transform 0.1s;
}
.bc-content-chip:hover { transform: scale(1.05); }
.bc-week-badge {
  font-size: 0.55rem; font-weight: 700; background: var(--h2w-navy); color: #fff;
  padding: 0.05rem 0.3rem; border-radius: 3px; margin-left: 0.25rem;
  vertical-align: middle;
}

/* 4-week plan */
.bc-plan-title {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--h2w-navy); margin-bottom: 1rem; margin-top: 0.5rem;
}
.bc-weeks-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-bottom: 2rem;
}
.bc-week-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem; position: relative;
}
.bc-week-num {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  color: var(--h2w-navy); margin-bottom: 0.5rem;
  padding-bottom: 0.375rem; border-bottom: 2px solid var(--h2w-navy);
}
.bc-week-items { list-style: none; padding: 0; margin: 0; }
.bc-week-items li {
  font-size: 0.75rem; color: #334155; padding: 0.25rem 0;
  border-bottom: 1px solid var(--h2w-light); display: flex; align-items: center; gap: 0.375rem;
}
.bc-week-items li:last-child { border-bottom: none; }
.bc-week-items .color-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* Flywheel callout */
.bc-flywheel {
  background: linear-gradient(135deg, #093151 0%, #0c4f97 100%);
  color: white; border-radius: 0.5rem; padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem;
}
.bc-flywheel-stat {
  font-size: 2.5rem; font-weight: 800; line-height: 1; white-space: nowrap;
}
.bc-flywheel-stat small { font-size: 0.875rem; font-weight: 400; opacity: 0.8; display: block; }
.bc-flywheel-text { font-size: 0.85rem; opacity: 0.9; line-height: 1.5; }
.bc-flywheel-arrow {
  font-size: 1.5rem; opacity: 0.6; flex-shrink: 0;
}

/* -- Marketing Playbook (5-stage funnel) -- */
.bc-playbook-buyer-split {
  display: flex; align-items: center; gap: 1.5rem;
  margin-bottom: 2rem; background: white; border: 1px solid var(--h2w-border);
  border-radius: 0.5rem; padding: 1.25rem;
}
.bc-buyer-ring {
  position: relative; width: 100px; height: 100px; flex-shrink: 0;
}
.bc-buyer-ring svg { width: 100%; height: 100%; }
.bc-buyer-labels { display: flex; flex-direction: column; gap: 0.5rem; }
.bc-buyer-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 600;
}
.bc-buyer-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bc-buyer-dot.passive { background: #fca5a5; }
.bc-buyer-dot.active { background: #86efac; }

.bc-funnel-stages {
  display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;
}
.bc-stage-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  overflow: hidden; transition: box-shadow 0.15s;
}
.bc-stage-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.bc-stage-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem; background: var(--h2w-bg); border-bottom: 1px solid var(--h2w-border);
}
.bc-stage-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--h2w-navy); color: white; display: flex;
  align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}
.bc-stage-name { font-size: 0.85rem; font-weight: 600; color: var(--h2w-navy); }
.bc-stage-desc {
  font-size: 0.78rem; color: var(--h2w-slate); margin-left: auto;
  max-width: 50%; text-align: right;
}
.bc-stage-body { padding: 1rem 1.25rem; }
.bc-stage-channels {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
}
.bc-channel-chip {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; font-weight: 500; color: #334155;
  background: var(--h2w-light); padding: 0.35rem 0.75rem;
  border-radius: 9999px; border: 1px solid var(--h2w-border);
}
.bc-channel-icon { font-size: 0.85rem; }
.bc-stage-streams {
  display: flex; gap: 0.375rem; margin-top: 0.75rem; flex-wrap: wrap;
}
.bc-stage-stream-badge {
  font-size: 0.6rem; font-weight: 600; padding: 0.15rem 0.5rem;
  border-radius: 3px; background: rgba(37,99,235,0.08); color: #2563eb;
  cursor: pointer; transition: opacity 0.15s;
}
.bc-stage-stream-badge:hover { opacity: 0.7; }

/* Bottom row: Advertising + Demand Capture + Warm Outbound */
.bc-funnel-bottom-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.bc-funnel-bottom-row .bc-stage-card { display: flex; flex-direction: column; }
.bc-funnel-bottom-row .bc-stage-body { flex: 1; }

/* Funnel arrows */
.bc-funnel-arrow {
  text-align: center; color: #cbd5e1; font-size: 1.25rem;
  padding: 0.25rem 0;
}

/* ── Marketing Playbook: Stage KPIs ──────────────────────────────── */
.bc-kpi-stage-block {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem; margin-bottom: 0.75rem;
}
.bc-kpi-stage-header {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
}
.bc-kpi-stage-name { font-size: 0.82rem; font-weight: 600; color: var(--h2w-navy); }
.bc-kpi-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem; margin-bottom: 0.5rem;
}
.bc-kpi-card {
  background: var(--h2w-light); border-radius: 0.375rem;
  padding: 0.625rem; display: flex; flex-direction: column; gap: 0.25rem;
}
.bc-kpi-card.primary { border-left: 3px solid var(--h2w-blue); }
.bc-kpi-icon { font-size: 1rem; }
.bc-kpi-name { font-size: 0.72rem; font-weight: 600; color: var(--h2w-navy); }
.bc-kpi-target { font-size: 0.68rem; color: var(--h2w-slate); }
.bc-kpi-secondary {
  display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem;
}
.bc-kpi-secondary-chip {
  font-size: 0.65rem; color: var(--h2w-slate); background: var(--h2w-bg);
  padding: 0.2rem 0.5rem; border-radius: 3px; border: 1px solid var(--h2w-border);
}

/* ── Marketing Playbook: Signal Scoring ──────────────────────────── */
.bc-signal-types-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem; margin-bottom: 1.5rem;
}
.bc-signal-type-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 0.875rem; border-left: 3px solid var(--h2w-blue);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.bc-signal-type-header { display: flex; align-items: center; gap: 0.5rem; }
.bc-signal-type-name { font-size: 0.8rem; font-weight: 600; color: var(--h2w-navy); }
.bc-signal-type-desc { font-size: 0.7rem; color: var(--h2w-slate); line-height: 1.4; }
.bc-signal-type-examples { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.bc-signal-tiers {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem; margin-bottom: 1.5rem;
}
.bc-signal-tier-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 0.875rem; border-left: 3px solid; display: flex; flex-direction: column; gap: 0.5rem;
}
.bc-signal-tier-name { font-size: 0.82rem; font-weight: 700; }
.bc-signal-tier-row { font-size: 0.7rem; color: var(--h2w-slate); line-height: 1.4; }
.bc-signal-tier-label { font-weight: 600; color: var(--h2w-navy); }

.bc-signal-stats {
  display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;
}
.bc-signal-stat {
  display: flex; flex-direction: column; align-items: center;
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 0.75rem 1.25rem; min-width: 120px;
}
.bc-signal-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--h2w-navy); }
.bc-signal-stat-label { font-size: 0.68rem; color: var(--h2w-slate); text-align: center; }

/* ── Marketing Playbook: Awareness Journey ───────────────────────── */
.bc-awareness-flow {
  display: flex; align-items: stretch; gap: 0.5rem; margin-bottom: 1.5rem;
  overflow-x: auto;
}
.bc-awareness-card {
  flex: 1; min-width: 170px; background: white; border: 1px solid var(--h2w-border);
  border-radius: 0.5rem; padding: 0.875rem; display: flex; flex-direction: column;
  gap: 0.375rem; text-align: center; border-top: 3px solid var(--h2w-blue);
}
.bc-awareness-num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--h2w-navy);
  color: white; font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 0.25rem;
}
.bc-awareness-name { font-size: 0.78rem; font-weight: 600; color: var(--h2w-navy); }
.bc-awareness-desc { font-size: 0.68rem; color: var(--h2w-slate); line-height: 1.4; flex: 1; }
.bc-awareness-content { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; }
.bc-awareness-stage { margin-top: auto; }
.bc-awareness-arrow {
  display: flex; align-items: center; font-size: 1.25rem; color: var(--h2w-blue);
  font-weight: 700; flex-shrink: 0;
}

/* ── Marketing Playbook: ABM Tiers ───────────────────────────────── */
.bc-abm-tiers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.5rem;
}
.bc-abm-tier-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 0.875rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.bc-abm-tier-header { display: flex; align-items: center; gap: 0.5rem; }
.bc-abm-tier-icon { font-size: 1.1rem; }
.bc-abm-tier-name { font-size: 0.82rem; font-weight: 700; color: var(--h2w-navy); }
.bc-abm-tier-desc { font-size: 0.7rem; color: var(--h2w-slate); line-height: 1.4; }
.bc-abm-tier-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bc-abm-tier-channels { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: auto; }

/* ── Marketing Playbook: Signal-to-Action Table ──────────────────── */
.bc-signal-actions-table-wrap {
  overflow-x: auto; margin-bottom: 1.5rem; border: 1px solid var(--h2w-border);
  border-radius: 0.5rem;
}
.bc-signal-actions-table {
  width: 100%; border-collapse: collapse; font-size: 0.72rem;
}
.bc-signal-actions-table th, .bc-signal-actions-table td {
  border: 1px solid var(--h2w-border); padding: 0.5rem 0.75rem;
  text-align: left; vertical-align: top; line-height: 1.4;
}
.bc-signal-actions-table thead th {
  background: var(--h2w-navy); color: white; font-weight: 600;
  position: sticky; top: 0;
}
.bc-signal-actions-table tbody tr:nth-child(even) { background: var(--h2w-bg); }
.bc-signal-tier-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.375rem;
}

/* ── Marketing Playbook: Three Rs ────────────────────────────────── */
.bc-threers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem;
}
.bc-threers-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 0.875rem; border-top: 3px solid; display: flex; flex-direction: column; gap: 0.5rem;
}
.bc-threers-header { display: flex; align-items: center; gap: 0.5rem; }
.bc-threers-name { font-size: 0.82rem; font-weight: 700; color: var(--h2w-navy); }
.bc-threers-desc { font-size: 0.7rem; color: var(--h2w-slate); line-height: 1.4; }
.bc-threers-metrics { display: flex; flex-direction: column; gap: 0.25rem; margin-top: auto; }
.bc-threers-metric { font-size: 0.68rem; color: #334155; }

/* ── Marketing Playbook: Content Linkage ─────────────────────────── */
.bc-content-linkage-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem; margin-bottom: 1.5rem;
}
.bc-content-linkage-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 0.875rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.bc-content-linkage-header {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 600; color: var(--h2w-navy);
}
.bc-content-linkage-desc { font-size: 0.7rem; color: var(--h2w-slate); line-height: 1.4; }
.bc-content-linkage-types { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* ── Marketing Playbook: MEDDPICC Alignment ──────────────────────── */
.bc-meddpicc-align-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem; margin-bottom: 1.5rem;
}
.bc-meddpicc-align-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 0.875rem; display: flex; flex-direction: column; gap: 0.5rem;
  border-left: 3px solid var(--h2w-blue);
}
.bc-meddpicc-align-header {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 600; color: var(--h2w-navy);
}
.bc-meddpicc-align-link { font-size: 0.7rem; color: var(--h2w-slate); line-height: 1.4; font-style: italic; }
.bc-meddpicc-align-components { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: auto; }

/* ── Marketing Playbook: Cadence ─────────────────────────────────── */
.bc-cadence-grid {
  display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.bc-cadence-card {
  flex: 1; min-width: 200px; background: white; border: 1px solid var(--h2w-border);
  border-radius: 0.5rem; padding: 0.875rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.bc-cadence-period {
  font-size: 0.82rem; font-weight: 700; color: var(--h2w-navy);
  border-bottom: 1px solid var(--h2w-border); padding-bottom: 0.375rem;
}
.bc-cadence-activities { font-size: 0.7rem; color: var(--h2w-slate); line-height: 1.45; }

/* -- Brand Assets -- */
.bc-entities-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.bc-entity-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem;
}
.bc-entity-name {
  font-size: 0.9rem; font-weight: 700; color: var(--h2w-navy);
}
.bc-entity-desc { font-size: 0.78rem; color: var(--h2w-slate); line-height: 1.5; }
.bc-entity-focus {
  font-size: 0.72rem; font-weight: 600; color: var(--h2w-blue);
  background: #eff6ff; padding: 0.25rem 0.5rem; border-radius: 4px;
  align-self: flex-start;
}

.bc-colors-grid {
  display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;
}
.bc-color-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
  width: 80px;
}
.bc-color-block {
  width: 64px; height: 64px; border-radius: 0.5rem;
  border: 1px solid var(--h2w-border); box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.bc-color-name { font-size: 0.7rem; font-weight: 600; color: #334155; text-align: center; }
.bc-color-hex { font-size: 0.6rem; color: #94a3b8; font-family: monospace; }
.bc-color-usage { font-size: 0.6rem; color: #94a3b8; text-align: center; line-height: 1.3; }

.bc-templates-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem; margin-bottom: 2rem;
}
.bc-template-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.375rem;
  padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.375rem;
}
.bc-template-name { font-size: 0.8rem; font-weight: 600; color: var(--h2w-navy); }
.bc-template-desc { font-size: 0.72rem; color: var(--h2w-slate); line-height: 1.4; }
.bc-template-meta {
  display: flex; gap: 0.5rem; margin-top: auto;
}
.bc-template-badge {
  font-size: 0.6rem; font-weight: 600; padding: 0.1rem 0.4rem;
  border-radius: 3px; background: var(--h2w-light); color: var(--h2w-slate);
}

/* -- Sales Playbook (6-stage pipeline, 6 motions) -- */
.bc-sales-entity-legend {
  display: flex; gap: 1rem; margin-bottom: 1.5rem;
}
.bc-sales-entity-badge {
  font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.75rem;
  border-radius: 9999px; border: 1px solid var(--h2w-border);
}
.bc-sales-entity-badge.h2w {
  background: rgba(9,49,81,0.08); color: var(--h2w-navy);
}
.bc-sales-entity-badge.h2w-labs {
  background: rgba(210,0,0,0.06); color: var(--h2w-red);
}

.bc-sales-motion-filter {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;
}
.bc-sales-motion-chip {
  font-size: 0.72rem; font-weight: 500; padding: 0.3rem 0.75rem;
  border-radius: 9999px; border: 1px solid var(--h2w-border);
  background: white; color: var(--h2w-slate); cursor: pointer;
  transition: all 0.15s;
}
.bc-sales-motion-chip:hover { border-color: var(--h2w-blue); color: var(--h2w-blue); }
.bc-sales-motion-chip.active {
  background: var(--h2w-navy); color: white; border-color: var(--h2w-navy);
}
.bc-sales-motion-chip.labs.active {
  background: var(--h2w-red); border-color: var(--h2w-red);
}

.bc-sales-motions-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem; margin-bottom: 2rem;
}
.bc-sales-motion-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;
  border-left: 3px solid var(--h2w-navy);
  transition: opacity 0.2s;
}
.bc-sales-motion-card.h2w-labs {
  border-left-color: var(--h2w-red);
}
.bc-sales-motion-name { font-size: 0.8rem; font-weight: 600; color: var(--h2w-navy); }
.bc-sales-motion-card.h2w-labs .bc-sales-motion-name { color: var(--h2w-red); }
.bc-sales-motion-desc { font-size: 0.72rem; color: var(--h2w-slate); line-height: 1.4; }
.bc-sales-motion-meta { display: flex; gap: 0.5rem; margin-top: auto; }

.bc-sales-pipeline {
  display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem;
}

.bc-sales-dimmed { opacity: 0.25; }

.bc-sales-crosssell-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.75rem; margin-bottom: 2rem;
}
.bc-sales-crosssell-card {
  display: flex; align-items: center; gap: 0.75rem;
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 0.875rem 1rem; flex-wrap: wrap;
}
.bc-sales-crosssell-from,
.bc-sales-crosssell-to {
  font-size: 0.78rem; font-weight: 600; display: flex; align-items: center; gap: 0.375rem;
}
.bc-sales-crosssell-arrow {
  font-size: 1rem; color: var(--h2w-blue); font-weight: 700;
}
.bc-sales-crosssell-trigger {
  font-size: 0.68rem; color: var(--h2w-slate); width: 100%;
  border-top: 1px solid var(--h2w-border); padding-top: 0.5rem; margin-top: 0.25rem;
}
.bc-sales-entity-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block;
}
.bc-sales-entity-dot.h2w { background: var(--h2w-navy); }
.bc-sales-entity-dot.h2w-labs { background: var(--h2w-red); }

/* ── Section divider ─────────────────────────────────────────────── */
.bc-section-divider {
  border-top: 2px solid var(--h2w-border); margin: 2.5rem 0 1.5rem; padding: 0;
}

/* ── GTM Integration: Funnel Alignment ──────────────────────────── */
.bc-gtm-funnel-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.bc-gtm-funnel-row {
  display: grid; grid-template-columns: 180px 30px 1fr;
  gap: 0.5rem; align-items: center; background: white;
  border: 1px solid var(--h2w-border); border-radius: 0.5rem; padding: 0.75rem;
}
.bc-gtm-funnel-mktg { font-size: 0.78rem; font-weight: 600; color: var(--h2w-navy); display: flex; align-items: center; gap: 0.5rem; }
.bc-gtm-funnel-arrow { font-size: 1.2rem; color: var(--h2w-slate); text-align: center; }
.bc-gtm-funnel-sales { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.bc-gtm-funnel-desc { grid-column: 1 / -1; font-size: 0.7rem; color: var(--h2w-slate); border-top: 1px solid var(--h2w-border); padding-top: 0.5rem; margin-top: 0.25rem; }

/* ── GTM Integration: Handoff Criteria ──────────────────────────── */
.bc-gtm-criteria-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem; margin-bottom: 1.5rem;
}
.bc-gtm-criteria-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem; border-left: 3px solid var(--h2w-blue);
}
.bc-gtm-criteria-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;
}
.bc-gtm-criteria-name { font-size: 0.82rem; font-weight: 600; color: var(--h2w-navy); }
.bc-gtm-criteria-desc { font-size: 0.72rem; color: var(--h2w-slate); line-height: 1.4; margin-bottom: 0.5rem; }
.bc-gtm-criteria-meddpicc { display: flex; gap: 0.375rem; flex-wrap: wrap; }

.bc-gtm-owner-badge {
  font-size: 0.65rem; font-weight: 600; padding: 0.15rem 0.5rem;
  border-radius: 3px; display: inline-block;
}
.bc-gtm-owner-badge.gtm-owner-mktg { background: rgba(12,79,151,0.1); color: var(--h2w-blue); }
.bc-gtm-owner-badge.gtm-owner-sales { background: rgba(210,0,0,0.08); color: var(--h2w-red); }

/* ── GTM Integration: Shared KPIs ───────────────────────────────── */
.bc-gtm-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem; margin-bottom: 1.5rem;
}
.bc-gtm-kpi-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 1rem; text-align: center;
}
.bc-gtm-kpi-icon { font-size: 1.5rem; margin-bottom: 0.375rem; }
.bc-gtm-kpi-name { font-size: 0.82rem; font-weight: 600; color: var(--h2w-navy); margin-bottom: 0.25rem; }
.bc-gtm-kpi-target { font-size: 0.75rem; color: var(--h2w-slate); margin-bottom: 0.5rem; }
.bc-gtm-kpi-owners { display: flex; gap: 0.375rem; flex-wrap: wrap; justify-content: center; }

/* ── GTM Navigation Banners ─────────────────────────────────────── */
.bc-gtm-nav-banner {
  background: linear-gradient(135deg, var(--h2w-navy) 0%, var(--h2w-blue) 100%);
  border-radius: 0.5rem; padding: 1.5rem; text-align: center; margin-top: 1rem;
}
.bc-gtm-nav-text { display: block; color: rgba(255,255,255,0.8); font-size: 0.8rem; margin-bottom: 0.75rem; }
.bc-gtm-nav-btn {
  background: white; color: var(--h2w-navy); border: none; padding: 0.5rem 1.5rem;
  border-radius: 0.375rem; font-weight: 600; font-size: 0.8rem; cursor: pointer;
  transition: all 0.15s;
}
.bc-gtm-nav-btn:hover { background: var(--h2w-light); transform: translateY(-1px); }
.bc-gtm-nav-btn.small {
  background: rgba(12,79,151,0.08); color: var(--h2w-blue); padding: 0.35rem 0.75rem;
  font-size: 0.72rem;
}
.bc-gtm-nav-btn.small:hover { background: rgba(12,79,151,0.15); }
.bc-gtm-back-banner { margin-bottom: 1rem; }
.bc-gtm-cross-link { margin-top: 0.75rem; }

@media (max-width: 768px) {
  .bc-gtm-funnel-row { grid-template-columns: 1fr; }
  .bc-gtm-funnel-arrow { display: none; }
  .bc-gtm-criteria-grid { grid-template-columns: 1fr; }
  .bc-gtm-kpi-grid { grid-template-columns: 1fr; }
}

/* ── MEDDPICC: Category badges ───────────────────────────────────── */
.bc-meddpicc-categories {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem; margin-bottom: 1.5rem;
}
.bc-meddpicc-cat-badge {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 0.875rem; display: flex; flex-direction: column; gap: 0.375rem;
}
.bc-meddpicc-cat-what .bc-meddpicc-cat-name,
.bc-meddpicc-cat-badge.bc-meddpicc-cat-what { border-left: 3px solid #2563eb; }
.bc-meddpicc-cat-who .bc-meddpicc-cat-name,
.bc-meddpicc-cat-badge.bc-meddpicc-cat-who { border-left: 3px solid #16a34a; }
.bc-meddpicc-cat-how .bc-meddpicc-cat-name,
.bc-meddpicc-cat-badge.bc-meddpicc-cat-how { border-left: 3px solid #d97706; }
.bc-meddpicc-cat-name { font-size: 0.82rem; font-weight: 700; color: var(--h2w-navy); }
.bc-meddpicc-cat-desc { font-size: 0.7rem; color: var(--h2w-slate); }
.bc-meddpicc-cat-letters { display: flex; gap: 0.375rem; margin-top: 0.25rem; }
.bc-meddpicc-letter {
  font-size: 0.72rem; font-weight: 600; background: var(--h2w-light);
  padding: 0.15rem 0.5rem; border-radius: 3px; color: var(--h2w-navy);
}

/* ── MEDDPICC: Scorecard matrix ──────────────────────────────────── */
.bc-meddpicc-matrix-wrap {
  overflow-x: auto; margin-bottom: 1.5rem; border: 1px solid var(--h2w-border);
  border-radius: 0.5rem;
}
.bc-meddpicc-matrix {
  width: 100%; border-collapse: collapse; font-size: 0.68rem; min-width: 900px;
}
.bc-meddpicc-matrix th, .bc-meddpicc-matrix td {
  border: 1px solid var(--h2w-border); padding: 0.5rem 0.625rem;
  text-align: left; vertical-align: top; line-height: 1.4;
}
.bc-meddpicc-matrix thead th {
  background: var(--h2w-navy); color: white; font-weight: 600;
  text-align: center; position: sticky; top: 0; z-index: 2;
}
.bc-meddpicc-corner { min-width: 60px; }
.bc-meddpicc-th-letter {
  display: block; font-size: 1.1rem; font-weight: 800; margin-bottom: 0.125rem;
}
.bc-meddpicc-th-name { display: block; font-size: 0.6rem; font-weight: 400; opacity: 0.85; }
.bc-meddpicc-row-label {
  font-weight: 700; text-align: center; min-width: 60px; font-size: 0.78rem;
}

/* ── MEDDPICC: Component cards ───────────────────────────────────── */
.bc-meddpicc-comp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem; margin-bottom: 1.5rem;
}
.bc-meddpicc-comp-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 0.875rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.bc-meddpicc-comp-header { display: flex; align-items: center; gap: 0.5rem; }
.bc-meddpicc-comp-icon { font-size: 1.2rem; }
.bc-meddpicc-comp-letter-big {
  font-size: 0.95rem; font-weight: 800; color: var(--h2w-navy);
  background: var(--h2w-light); padding: 0.1rem 0.45rem; border-radius: 3px;
}
.bc-meddpicc-comp-name { font-size: 0.78rem; font-weight: 600; color: var(--h2w-navy); }
.bc-meddpicc-comp-desc { font-size: 0.7rem; color: var(--h2w-slate); line-height: 1.45; }
.bc-meddpicc-comp-cat {
  align-self: flex-start; font-size: 0.62rem; font-weight: 600;
  padding: 0.15rem 0.5rem; border-radius: 9999px; margin-top: auto;
}
.bc-meddpicc-cat-what-badge { background: rgba(37,99,235,0.1); color: #2563eb; }
.bc-meddpicc-cat-who-badge { background: rgba(22,163,74,0.1); color: #16a34a; }
.bc-meddpicc-cat-how-badge { background: rgba(217,119,6,0.1); color: #d97706; }

/* ── Customer Value Journey ──────────────────────────────────────── */
.bc-value-journey-flow {
  display: flex; align-items: stretch; gap: 0.5rem; margin-bottom: 1.5rem;
  overflow-x: auto;
}
.bc-value-journey-card {
  flex: 1; min-width: 180px; background: white; border: 1px solid var(--h2w-border);
  border-radius: 0.5rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;
  border-top: 3px solid var(--h2w-blue);
}
.bc-value-journey-name { font-size: 0.85rem; font-weight: 700; color: var(--h2w-navy); }
.bc-value-journey-desc { font-size: 0.7rem; color: var(--h2w-slate); line-height: 1.45; flex: 1; }
.bc-value-journey-meddpicc { display: flex; gap: 0.375rem; margin-top: auto; }
.bc-value-journey-arrow {
  display: flex; align-items: center; font-size: 1.25rem; color: var(--h2w-blue);
  font-weight: 700; flex-shrink: 0;
}

/* ── Value Selling Tools ─────────────────────────────────────────── */
.bc-value-tools-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem; margin-bottom: 1.5rem;
}
.bc-value-tool-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 0.875rem; display: flex; flex-direction: column; gap: 0.5rem;
  border-left: 3px solid var(--h2w-blue);
}
.bc-value-tool-header { display: flex; align-items: center; gap: 0.5rem; }
.bc-value-tool-icon { font-size: 1.2rem; }
.bc-value-tool-name { font-size: 0.78rem; font-weight: 600; color: var(--h2w-navy); }
.bc-value-tool-desc { font-size: 0.7rem; color: var(--h2w-slate); line-height: 1.45; }
.bc-value-tool-stages { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; margin-top: auto; }
.bc-value-tool-label { font-size: 0.65rem; color: var(--h2w-slate); font-weight: 500; }

/* ── Competitive Intelligence ────────────────────────────────────── */
.bc-competitive-dim-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem; margin-bottom: 1.5rem;
}
.bc-competitive-dim-card {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  padding: 0.875rem; display: flex; flex-direction: column; gap: 0.375rem;
}
.bc-competitive-dim-header { display: flex; align-items: center; gap: 0.5rem; }
.bc-competitive-dim-icon { font-size: 1.1rem; }
.bc-competitive-dim-name { font-size: 0.8rem; font-weight: 600; color: var(--h2w-navy); }
.bc-competitive-dim-desc { font-size: 0.7rem; color: var(--h2w-slate); line-height: 1.4; }

.bc-competitive-types {
  display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem;
}
.bc-competitive-type-card {
  flex: 1; min-width: 200px; background: white; border: 1px solid var(--h2w-border);
  border-radius: 0.5rem; padding: 0.875rem; display: flex; flex-direction: column; gap: 0.375rem;
}
.bc-competitive-type-name { font-size: 0.8rem; font-weight: 600; color: var(--h2w-navy); }
.bc-competitive-type-desc { font-size: 0.7rem; color: var(--h2w-slate); line-height: 1.4; }

/* ── Value Storytelling Framework ────────────────────────────────── */
.bc-story-principle {
  background: rgba(9,49,81,0.04); border: 1px solid var(--h2w-border);
  border-left: 3px solid var(--h2w-navy); border-radius: 0.375rem;
  padding: 0.75rem 1rem; margin-bottom: 1rem;
  font-size: 0.78rem; color: var(--h2w-navy); font-style: italic;
}
.bc-story-principle-label { font-weight: 700; font-style: normal; }

.bc-story-flow {
  display: flex; align-items: stretch; gap: 0.5rem; margin-bottom: 1.5rem;
  overflow-x: auto;
}
.bc-story-step {
  flex: 1; min-width: 160px; background: white; border: 1px solid var(--h2w-border);
  border-radius: 0.5rem; padding: 0.875rem; display: flex; flex-direction: column;
  gap: 0.375rem; text-align: center;
}
.bc-story-step-num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--h2w-navy);
  color: white; font-size: 0.78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 0.25rem;
}
.bc-story-step-name { font-size: 0.78rem; font-weight: 600; color: var(--h2w-navy); }
.bc-story-step-desc { font-size: 0.68rem; color: var(--h2w-slate); line-height: 1.4; flex: 1; }
.bc-story-step-meddpicc { margin-top: auto; }
.bc-story-arrow {
  display: flex; align-items: center; font-size: 1.25rem; color: var(--h2w-blue);
  font-weight: 700; flex-shrink: 0;
}

/* ── Value Hierarchy ─────────────────────────────────────────────── */
.bc-value-hierarchy {
  display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
  margin-bottom: 1.5rem;
}
.bc-value-hierarchy-level {
  display: flex; align-items: center; gap: 0.75rem;
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.375rem;
  padding: 0.625rem 1rem; width: 100%; max-width: 600px;
}
.bc-value-hierarchy-level.differentiate {
  border-left: 3px solid #16a34a;
}
.bc-value-hierarchy-level.entry {
  border-left: 3px solid var(--h2w-slate); opacity: 0.75;
}
.bc-value-hierarchy-num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--h2w-light);
  color: var(--h2w-navy); font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bc-value-hierarchy-name { font-size: 0.78rem; font-weight: 600; color: var(--h2w-navy); min-width: 120px; }
.bc-value-hierarchy-desc { font-size: 0.7rem; color: var(--h2w-slate); }

/* -- Buyer Persona Matrix -- */
.fw-bp-filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; align-items: center;
}
.fw-bp-filter-group {
  display: flex; gap: 0.375rem; align-items: center;
}
.fw-bp-filter-label {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--h2w-slate); margin-right: 0.25rem;
}
.fw-bp-filter-chip {
  font-size: 0.72rem; font-weight: 500; padding: 0.25rem 0.625rem;
  border-radius: 9999px; border: 1px solid var(--h2w-border);
  background: white; color: var(--h2w-slate); cursor: pointer;
  transition: all 0.15s;
}
.fw-bp-filter-chip:hover { border-color: var(--h2w-blue); color: var(--h2w-blue); }
.fw-bp-filter-chip.active {
  background: var(--h2w-navy); color: white; border-color: var(--h2w-navy);
}
.fw-bp-filter-sep {
  width: 1px; height: 20px; background: var(--h2w-border); margin: 0 0.25rem;
}
.fw-bp-legend {
  font-size: 0.78rem; color: var(--h2w-slate); margin-bottom: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.fw-bp-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.fw-bp-table {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
}
.fw-bp-table th {
  background: var(--h2w-navy); color: white; padding: 0.5rem 0.6rem;
  text-align: center; font-size: 0.68rem; font-weight: 600;
  white-space: nowrap; position: sticky; top: 0;
}
.fw-bp-table th:first-child { text-align: left; min-width: 200px; }
.fw-bp-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--h2w-border); }
.fw-bp-persona-cell {
  font-weight: 500; color: var(--h2w-navy); white-space: nowrap;
  display: flex; align-items: center; gap: 0.375rem;
}
.fw-bp-dept-tag {
  font-size: 0.55rem; font-weight: 600; padding: 0.1rem 0.35rem;
  border-radius: 3px; background: var(--h2w-light); color: var(--h2w-slate);
}
.fw-bp-cell {
  text-align: center; cursor: pointer; transition: background 0.1s;
}
.fw-bp-cell:hover { background: rgba(12,79,151,0.06); }
.fw-bp-cell.selected { background: rgba(12,79,151,0.1); }
.fw-bp-row { transition: background 0.1s; }
.fw-bp-row:hover { background: rgba(12,79,151,0.03); }
.fw-bp-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 4px; font-size: 0.65rem;
  font-weight: 700;
}
.fw-bp-badge.role-champion { background: #dcfce7; color: #166534; }
.fw-bp-badge.role-decision { background: #dbeafe; color: #1e40af; }
.fw-bp-badge.role-influencer { background: #fef3c7; color: #92400e; }
.fw-bp-badge.role-blocker { background: #fee2e2; color: #991b1b; }
.fw-bp-col-hidden { display: none; }

.fw-bp-detail {
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.5rem;
  margin-bottom: 1.5rem; overflow: hidden;
  animation: bp-slide-in 0.2s ease-out;
}
@keyframes bp-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fw-bp-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1.25rem; background: var(--h2w-navy); color: white;
}
.fw-bp-detail-title { font-size: 0.875rem; font-weight: 700; }
.fw-bp-detail-close {
  background: none; border: none; color: rgba(255,255,255,0.7);
  font-size: 1.1rem; cursor: pointer; padding: 0.25rem;
}
.fw-bp-detail-close:hover { color: white; }
.fw-bp-detail-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.25rem;
}
.fw-bp-detail-section { display: flex; flex-direction: column; gap: 0.375rem; }
.fw-bp-detail-section-title {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--h2w-blue); margin-bottom: 0.125rem;
}
.fw-bp-detail-list {
  list-style: none; padding: 0; margin: 0; font-size: 0.78rem; color: #334155;
}
.fw-bp-detail-list li {
  padding: 0.25rem 0; border-bottom: 1px solid var(--h2w-light);
  line-height: 1.4;
}
.fw-bp-detail-list li:last-child { border-bottom: none; }
.fw-bp-detail-list li::before {
  content: '\2022'; color: var(--h2w-blue); font-weight: 700; margin-right: 0.5rem;
}
.fw-bp-key-message {
  font-size: 0.82rem; color: var(--h2w-navy); font-weight: 500;
  font-style: italic; line-height: 1.5; padding: 0.5rem 0.75rem;
  background: rgba(12,79,151,0.04); border-left: 3px solid var(--h2w-blue);
  border-radius: 0.25rem;
}
.fw-bp-detail-full { grid-column: 1 / -1; }

@media (max-width: 768px) {
  .fw-bp-detail-body { grid-template-columns: 1fr; }
  .fw-bp-filters { flex-direction: column; align-items: flex-start; }
}

/* -- Framework Lens dropdown -- */
.fw-lens-dropdown { position: relative; display: inline-block; }
.fw-lens-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 100;
  background: white; border: 1px solid var(--h2w-border); border-radius: 0.375rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12); min-width: 160px; padding: 0.25rem 0;
  margin-top: 2px;
}
.fw-lens-menu.open { display: block; }
.fw-lens-option {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.75rem; font-size: 0.75rem; cursor: pointer;
  color: #334155; transition: background 0.1s;
}
.fw-lens-option:hover { background: var(--h2w-light); }
.fw-lens-option.active { font-weight: 700; color: var(--h2w-blue); }
.fw-lens-dot {
  width: 10px; height: 10px; border-radius: 50%; border: 2px solid #cbd5e1;
  flex-shrink: 0;
}
.fw-lens-dot.lens-delivery { background: #3b82f6; border-color: #3b82f6; }
.fw-lens-dot.lens-tools { background: #8b5cf6; border-color: #8b5cf6; }
.fw-lens-dot.lens-governance { background: #ef4444; border-color: #ef4444; }

.bdp-fw-phase { background: #dbeafe; color: #1e40af; }
.bdp-fw-tool  { background: #e0e7ff; color: #3730a3; }
.bdp-fw-gate  { background: #fee2e2; color: #991b1b; }
.bdp-fw-kpi   { background: #dcfce7; color: #166534; }

/* ===== PERFORMANCE VIEWS ===== */
.perf-context-bar {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
  background: var(--h2w-navy); color: #fff; border-radius: 0.5rem;
  padding: 1rem 1.5rem; margin-bottom: 1.5rem;
}
.perf-context-item { display: flex; flex-direction: column; gap: 0.15rem; }
.perf-context-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
.perf-context-value { font-size: 1rem; font-weight: 700; }
.perf-context-arrow { font-size: 1.5rem; opacity: 0.5; }

.perf-category-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.perf-category-card {
  border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden;
}
.perf-category-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem; color: #fff; font-weight: 600; font-size: 0.875rem;
}
.perf-category-header .perf-cat-dot {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.6);
}
.perf-metric-row {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: 1px solid #f1f5f9;
  font-size: 0.8125rem; align-items: center;
}
.perf-metric-row:last-child { border-bottom: none; }
.perf-metric-name { font-weight: 500; color: var(--h2w-navy); }
.perf-metric-current { color: #64748b; text-align: right; }
.perf-metric-target { font-weight: 600; color: var(--h2w-blue); text-align: right; }
.perf-metric-freq { font-size: 0.6875rem; color: #94a3b8; text-align: right; }

.perf-team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.perf-team-card {
  border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden;
}
.perf-team-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem; background: var(--h2w-navy); color: #fff;
}
.perf-team-name { font-weight: 600; font-size: 0.875rem; }
.perf-team-streams { font-size: 0.6875rem; opacity: 0.7; }
.perf-kpi-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: 1px solid #f1f5f9;
  font-size: 0.8125rem; align-items: start;
}
.perf-kpi-row:last-child { border-bottom: none; }
.perf-kpi-name { font-weight: 500; color: var(--h2w-navy); }
.perf-kpi-target { font-weight: 600; color: var(--h2w-blue); text-align: right; white-space: nowrap; }
.perf-kpi-freq { font-size: 0.6875rem; color: #94a3b8; text-align: right; white-space: nowrap; }
.perf-kpi-ebit {
  grid-column: 1 / -1; font-size: 0.75rem; color: #059669;
  padding: 0.25rem 0 0 0; font-style: italic;
}

/* Compensation Model */
.perf-pool-card {
  border: 2px solid var(--h2w-red); border-radius: 0.5rem;
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; background: #fef2f2;
}
.perf-pool-title {
  font-size: 1rem; font-weight: 700; color: var(--h2w-red); margin-bottom: 0.75rem;
}
.perf-pool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;
}
.perf-pool-item { display: flex; flex-direction: column; gap: 0.15rem; }
.perf-pool-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: #991b1b; }
.perf-pool-value { font-size: 0.9375rem; font-weight: 600; color: var(--h2w-navy); }
.perf-pool-desc { font-size: 0.8125rem; color: #64748b; margin-top: 0.75rem; line-height: 1.5; }

.perf-schedule-card {
  border: 1px solid #e2e8f0; border-radius: 0.5rem;
  padding: 1rem 1.5rem; margin-bottom: 1.5rem; background: #f8fafc;
}
.perf-schedule-title {
  font-size: 0.9375rem; font-weight: 600; color: var(--h2w-navy); margin-bottom: 0.5rem;
}
.perf-schedule-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem;
}
.perf-schedule-label { font-size: 0.6875rem; text-transform: uppercase; color: #64748b; }
.perf-schedule-value { font-size: 0.8125rem; color: var(--h2w-navy); }

.perf-role-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.perf-role-card {
  border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden;
}
.perf-role-header {
  padding: 0.75rem 1rem; background: var(--h2w-navy); color: #fff;
  font-weight: 600; font-size: 0.9375rem;
}
.perf-role-body { padding: 1rem; }
.perf-role-row {
  display: flex; justify-content: space-between; align-items: start;
  padding: 0.375rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.8125rem;
}
.perf-role-row:last-child { border-bottom: none; }
.perf-role-label { color: #64748b; font-size: 0.75rem; text-transform: uppercase; min-width: 120px; }
.perf-role-value { color: var(--h2w-navy); font-weight: 500; text-align: right; flex: 1; }
.perf-clawback {
  margin-top: 0.75rem; padding: 0.625rem 0.75rem;
  background: #fef2f2; border-left: 3px solid var(--h2w-red);
  border-radius: 0 0.25rem 0.25rem 0; font-size: 0.8125rem; color: #991b1b;
}
.perf-kpi-weights {
  margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.375rem;
}
.perf-weight-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.2rem 0.5rem; background: #eff6ff; border-radius: 0.25rem;
  font-size: 0.75rem; color: var(--h2w-navy);
}
.perf-weight-pct { font-weight: 600; color: var(--h2w-blue); }

/* OKR Framework */
.perf-okr-period-bar {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
  background: var(--h2w-navy); color: #fff; border-radius: 0.5rem;
  padding: 1rem 1.5rem; margin-bottom: 1.5rem;
}
.perf-okr-period-item { display: flex; flex-direction: column; gap: 0.15rem; }
.perf-okr-period-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
.perf-okr-period-value { font-size: 0.9375rem; font-weight: 600; }
.perf-okr-legend { display: flex; gap: 0.75rem; margin-left: auto; }
.perf-okr-legend-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 600;
}
.perf-okr-legend-target { background: rgba(5,150,105,0.2); color: #6ee7b7; }
.perf-okr-legend-stretch { background: rgba(37,99,235,0.2); color: #93c5fd; }
.perf-okr-legend-miss { background: rgba(220,38,38,0.2); color: #fca5a5; }

.perf-okr-cadence {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 1.5rem;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem;
}
.perf-okr-cadence-label { font-size: 0.6875rem; text-transform: uppercase; color: #64748b; }
.perf-okr-cadence-value { font-size: 0.8125rem; color: var(--h2w-navy); font-weight: 500; }

.perf-okr-grid { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.perf-okr-card {
  border: 1px solid #e2e8f0; border-left: 4px solid var(--h2w-blue);
  border-radius: 0 0.5rem 0.5rem 0; overflow: hidden;
}
.perf-okr-card-header {
  display: flex; justify-content: space-between; align-items: start;
  padding: 0.75rem 1rem; background: #f8fafc;
}
.perf-okr-obj-id { font-size: 0.75rem; font-weight: 700; color: var(--h2w-blue); margin-right: 0.5rem; }
.perf-okr-obj-text { font-size: 0.9375rem; font-weight: 600; color: var(--h2w-navy); flex: 1; }
.perf-okr-owner-badge {
  font-size: 0.6875rem; padding: 0.15rem 0.5rem; background: var(--h2w-navy);
  color: #fff; border-radius: 0.25rem; white-space: nowrap;
}
.perf-okr-stream-badges { display: flex; gap: 0.25rem; margin-top: 0.25rem; }
.perf-okr-stream-badge {
  font-size: 0.625rem; padding: 0.1rem 0.4rem; background: #eff6ff;
  color: var(--h2w-blue); border-radius: 0.2rem; font-weight: 600;
}
.perf-okr-kr-table { width: 100%; border-collapse: collapse; }
.perf-okr-kr-table th {
  font-size: 0.6875rem; text-transform: uppercase; color: #64748b;
  padding: 0.4rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0;
}
.perf-okr-kr-table th:nth-child(3),
.perf-okr-kr-table th:nth-child(4) { text-align: right; }
.perf-okr-kr-row td { padding: 0.5rem 1rem; border-bottom: 1px solid #f1f5f9; font-size: 0.8125rem; }
.perf-okr-kr-row:last-child td { border-bottom: none; }
.perf-okr-kr-id { font-weight: 600; color: var(--h2w-blue); white-space: nowrap; width: 60px; }
.perf-okr-kr-text { color: var(--h2w-navy); }
.perf-okr-kr-baseline { color: #64748b; text-align: right; white-space: nowrap; }
.perf-okr-kr-target { font-weight: 600; color: #059669; text-align: right; white-space: nowrap; }

.perf-okr-team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.perf-okr-team-card {
  border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden;
}
.perf-okr-team-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem; background: var(--h2w-navy); color: #fff;
}
.perf-okr-team-name { font-weight: 600; font-size: 0.875rem; }
.perf-okr-cascade-badge {
  font-size: 0.625rem; padding: 0.15rem 0.5rem; background: rgba(255,255,255,0.15);
  border-radius: 0.2rem; color: #93c5fd;
}

/* ===== PRINT STYLES ===== */
@media print {
  /* Hide chrome */
  .header, .sidebar, .sidebar-overlay, .status { display: none !important; }
  body { overflow: visible; height: auto; background: white; }
  .app { display: block; height: auto; }
  .main { display: block; height: auto; }
  .viewer { display: block !important; height: auto; }

  /* Hide non-visible views; show the active one */
  .viewer-content { display: none !important; }
  .org-view, .tools-view, .arch-view, .solution-arch-view,
  .products-view, .concepts-view, .cases-view, .digital-view,
  .master-view, .journey-view { display: none !important; }
  .org-view.visible, .tools-view.visible, .arch-view.visible, .solution-arch-view.visible,
  .products-view.visible, .concepts-view.visible, .cases-view.visible, .digital-view.visible,
  .master-view.visible, .journey-view.visible {
    display: block !important; overflow: visible; padding: 1rem; background: white;
  }
  .fw-view.visible {
    display: block !important; overflow: visible; padding: 1rem;
    background: white; break-inside: avoid;
  }
  .fw-view:not(.visible) { display: none !important; }

  /* Resource view print styles */
  .org-entity, .org-tab-content { break-inside: avoid; }
  .otree-node { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .tool-card { break-inside: avoid; border: 1px solid #ccc; }
  .tools-grid { gap: 0.5rem; }
  .arch-lane { break-inside: avoid; border: 1px solid #ccc; }
  .delivery-card { break-inside: avoid; border: 1px solid #ccc; }
  .offering-card { break-inside: avoid; border: 1px solid #ccc; }
  .concept-card { break-inside: avoid; border: 1px solid #ccc; }
  .case-card { break-inside: avoid; border: 1px solid #ccc; }
  .journey-grid { gap: 0; }
  .journey-arc-stage { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .master-view table { font-size: 0.7rem; }
  .master-view table th { background: #093151 !important; color: white !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .master-row-hidden { display: none !important; }

  /* Framework view print styles */
  .fw-section-title { color: #000; }
  .fw-phase-timeline { gap: 2px; flex-wrap: wrap; }
  .fw-phase-card { clip-path: none !important; border-radius: 3px; border: 1px solid #999; background: #093151 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; min-width: calc(33% - 4px); }
  .fw-phase-detail { break-inside: avoid; border: 1px solid #ccc; }
  .fw-tool-card, .fw-gate-card, .fw-kpi-domain { break-inside: avoid; border: 1px solid #ccc; }
  .fw-icp-card, .fw-icp-boundary { break-inside: avoid; border: 1px solid #ccc; }
  .fw-icp-card-header { background: #093151 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .fw-icp-pipeline { flex-wrap: wrap; }
  .fw-icp-stage { break-inside: avoid; }
  .fw-icp-weight-critical, .fw-icp-weight-high, .fw-icp-weight-medium { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .fw-kpi-domain-header { background: #093151 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .fw-phase-num { background: #093151 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .fw-task-item, .fw-tool-task-row, .fw-gate-card { cursor: default; }

  /* Performance view print styles */
  .perf-context-bar { background: #093151 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .perf-category-card, .perf-team-card, .perf-role-card, .perf-pool-card { break-inside: avoid; border: 1px solid #ccc; }
  .perf-category-header, .perf-team-header, .perf-role-header, .perf-okr-team-header { background: #093151 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .perf-okr-card, .perf-okr-team-card { break-inside: avoid; border: 1px solid #ccc; }
  .perf-okr-period-bar { background: #093151 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* BPMN print view (existing) */
  #print-view { display: block !important; }
}