/* ---------------------------------------------------------------
   Avery Dennison · Executive Intelligence
   McKinsey light · Plaza command-center · Disciplined component system
   --------------------------------------------------------------- */

:root {
  --ink:        #051c2c;
  --ink-2:      #1a2b3c;
  --body:       #2b2b2b;
  --muted:      #6b6b6b;
  --muted-2:    #94a0ad;
  --line:       #e6e9ee;
  --line-2:     #d4d8de;
  --bg:         #ffffff;
  --bg-2:       #f7f8fa;
  --bg-3:       #eef1f5;
  --accent:     #2251ff;
  --accent-soft:#eef2ff;
  --good:       #1f8a4c;
  --good-soft:  #ebf6f0;
  --warn:       #c98a1a;
  --warn-soft:  #fdf5e6;
  --bad:        #c0392b;
  --bad-soft:   #fdecea;

  --serif: "Georgia", "Times New Roman", "Bower", Cambria, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --sidebar-w: 244px;
  --topbar-h: 48px;
  --gap: 16px;
  --radius: 2px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-2); }
body {
  font-family: var(--sans);
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 600; letter-spacing: -0.005em; }
h1 { font-size: 24px; margin: 0; line-height: 1.2; }
h2 { font-size: 16px; margin: 0; }
h3 { font-size: 13.5px; margin: 0; font-weight: 700; }
p  { margin: 0 0 8px; }
ul { margin: 4px 0 0 18px; padding: 0; }
ul li { margin-bottom: 3px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--muted); }
.eyebrow {
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.serif { font-family: var(--serif); }

/* ============== APP SHELL ============== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ============== SIDEBAR (McKinsey light) ============== */
.sidebar {
  background: #ffffff;
  color: var(--ink);
  border-right: 1px solid var(--line);
  padding: 0;
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

.sidebar .brand {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}
.sidebar .brand .logo {
  font-family: var(--serif);
  font-size: 18px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.sidebar .brand .tag {
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
  font-weight: 600;
}

.nav-group { padding: 14px 0 6px; border-bottom: 1px solid var(--line); }
.nav-group:last-of-type { border-bottom: 0; }
.nav-group .label {
  padding: 0 22px 8px;
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.sidebar a.nav-item {
  display: block;
  padding: 6px 22px 6px 24px;
  font-size: 12.5px;
  color: var(--ink-2);
  border-left: 2px solid transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar a.nav-item:hover {
  background: var(--bg-2);
  color: var(--ink);
  text-decoration: none;
}
.sidebar a.nav-item.active {
  background: var(--bg-2);
  border-left-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
}
.sidebar .ai-status {
  margin: 16px 16px 20px; padding: 10px 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 11px; color: var(--ink-2);
}
.sidebar .ai-status .label {
  font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  display: block; margin-bottom: 4px;
}
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot.good { background: var(--good); }
.dot.warn { background: var(--warn); }
.dot.bad  { background: var(--bad); }

/* ============== MAIN ============== */
.main { background: var(--bg-2); min-width: 0; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  height: var(--topbar-h);
  background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.topbar .crumbs { font-size: 11.5px; color: var(--muted); letter-spacing: 0.3px; }
.topbar .crumbs a { color: var(--muted); }
.topbar .crumbs .sep { margin: 0 6px; color: var(--muted-2); }
.topbar .crumbs .current { color: var(--ink); font-weight: 600; }
.topbar .top-actions a {
  display: inline-block; margin-left: 18px; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
  position: relative; padding-bottom: 2px;
}
.topbar .top-actions a:hover {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--ink);
}

.content { padding: 28px 32px 80px; max-width: 1320px; }

/* ============== HERO (McKinsey deck cover) ============== */
.hero {
  margin-bottom: 24px;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; padding: 6px 0 18px;
  border-bottom: 2px solid var(--ink);
}
.hero .hero-text { max-width: 760px; }
.hero .hero-text .eyebrow {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 10.5px; letter-spacing: 1.8px;
}
.hero .hero-text h1 {
  font-size: 28px; line-height: 1.18; font-weight: 600;
  letter-spacing: -0.012em;
}
.hero .hero-text .meta {
  color: var(--muted); font-size: 12px; margin-top: 8px;
  letter-spacing: 0.2px;
}
.hero .hero-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ============== TABS ============== */
.tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 20px;
  background: #fff;
}
.tabs a {
  padding: 10px 18px; font-size: 12.5px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.active { color: var(--ink); border-bottom-color: var(--accent); }

/* ============== KPI STRIP ============== */
.kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid var(--line);
  margin-bottom: 24px;
}
.kpi-strip .kpi {
  padding: 18px 22px; border-right: 1px solid var(--line);
  position: relative;
}
.kpi-strip .kpi:last-child { border-right: 0; }
.kpi-strip .kpi::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: var(--ink);
}
.kpi .label {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.kpi .value {
  font-family: var(--serif); font-size: 32px; color: var(--ink);
  margin-top: 6px; line-height: 1.05; font-weight: 600;
  letter-spacing: -0.015em;
}
.kpi .value .unit { font-size: 14px; color: var(--muted); font-family: var(--sans); margin-left: 4px; font-weight: 500; }
.kpi .delta { font-size: 11px; margin-top: 6px; color: var(--muted); letter-spacing: 0.2px; }
.kpi .delta.up   { color: var(--good); }
.kpi .delta.down { color: var(--bad); }

/* ============== SECTION SHELL ============== */
.section { margin-bottom: 28px; }
.section .section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 0 12px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 16px;
}
.section .section-head h2 {
  font-family: var(--serif); font-size: 17px; color: var(--ink); margin: 0;
  font-weight: 600; letter-spacing: -0.005em;
}
.section .section-head .hint {
  color: var(--muted); font-size: 11px; letter-spacing: 0.5px;
  text-transform: uppercase; font-weight: 600;
}

/* ============== GRID ============== */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-split { grid-template-columns: 1.7fr 1fr; }
@media (max-width: 1100px) {
  .grid-2, .grid-3, .grid-4, .grid-split { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
}

/* ============== CARD (disciplined: header / body / footer) ============== */
.card {
  background: #fff;
  border: 1px solid var(--line);
  margin: 0;
  display: flex; flex-direction: column;
}
.card .card-head {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  background: #fff;
}
.card .card-head h3 { font-family: var(--serif); font-size: 13px; margin: 0; font-weight: 700; color: var(--ink); }
.card .card-head .eyebrow { font-size: 9.5px; }
.card .card-body { padding: 14px 16px; flex: 1; }
.card .card-foot {
  padding: 10px 16px; border-top: 1px solid var(--line);
  background: var(--bg-2); font-size: 11.5px; color: var(--muted);
}
.card.flush { padding: 0; }
.card-tight .card-body { padding: 10px 14px; }

/* ============== TILE (drill targets) ============== */
.tile {
  background: #fff; border: 1px solid var(--line); padding: 16px 18px 14px;
  display: block; color: inherit;
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
  position: relative;
}
.tile::after {
  content: "→"; position: absolute; top: 14px; right: 16px;
  font-size: 14px; color: var(--muted-2); transition: color 0.14s, transform 0.14s;
}
.tile:hover {
  border-color: var(--ink); text-decoration: none;
  box-shadow: 0 4px 14px rgba(5,28,44,0.06);
}
.tile:hover::after { color: var(--ink); transform: translateX(2px); }
.tile .eyebrow { margin-bottom: 6px; color: var(--accent); }
.tile .name {
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  margin: 0 0 6px; font-weight: 600; line-height: 1.25;
  padding-right: 20px;
}
.tile .head {
  font-size: 12.5px; color: var(--body); margin-bottom: 8px;
  line-height: 1.5;
}
.tile .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

.tag {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line-2);
  font-size: 10.5px; padding: 2px 8px;
  letter-spacing: 0.3px; font-weight: 600;
}

/* Strategic-play tile — McKinsey numbered card */
.tile-play {
  padding-top: 20px; border-top: 2px solid var(--ink);
}
.tile-play .play-num {
  font-family: var(--serif); font-size: 12px; color: var(--accent);
  font-weight: 700; letter-spacing: 1.2px; margin-bottom: 8px;
}
.tile-play .name { font-size: 17px; }

/* ============== EXHIBIT (AI-generated) ============== */
.exhibit {
  background: #fff; border: 1px solid var(--line); margin: 0;
  position: relative;
}
.exhibit::before {
  content: "EXHIBIT · AI"; position: absolute; top: -8px; left: 16px;
  background: #fff; padding: 0 8px;
  font-size: 9px; letter-spacing: 1.5px; color: var(--accent); font-weight: 800;
}
.exhibit .exhibit-head {
  padding: 12px 16px 8px;
}
.exhibit .exhibit-head h3 { font-family: var(--serif); font-size: 14px; margin: 0; }
.exhibit .exhibit-body { padding: 0 16px 14px; font-size: 13px; color: var(--body); }
.exhibit ul { margin: 4px 0 0 18px; }

.offline {
  display: inline-block; padding: 3px 9px; background: var(--warn-soft);
  border: 1px solid #f0d8a8; color: #8a6500; font-size: 10.5px;
  letter-spacing: 0.3px; margin-top: 8px;
}

/* ============== SMART ALERTS (Plaza-style strip) ============== */
.alerts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid var(--line);
}
.alerts .alert {
  padding: 12px 16px; border-right: 1px solid var(--line);
  border-left: 3px solid var(--warn);
}
.alerts .alert:last-child { border-right: 0; }
.alerts .alert.high { border-left-color: var(--bad); background: var(--bad-soft); }
.alerts .alert.med  { border-left-color: var(--warn); background: var(--warn-soft); }
.alerts .alert.low  { border-left-color: var(--good); background: var(--good-soft); }
.alerts .alert .head {
  font-family: var(--serif); font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px;
}
.alerts .alert .why { font-size: 11.5px; color: var(--body); }
.alerts .alert .meta { font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* ============== TABLES ============== */
table.exec { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.exec th, table.exec td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line);
}
table.exec th {
  color: var(--muted); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 1.1px;
  background: var(--bg-2);
}
table.exec tbody tr:hover td { background: #fbfcfd; }

/* ============== BADGES / SEVERITY ============== */
.badge, .sev {
  display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700;
  border: 1px solid var(--line); background: #fff;
  letter-spacing: 0.8px; text-transform: uppercase;
}
.badge.high, .sev.high   { color: var(--bad);  border-color: #f0c4c0; background: var(--bad-soft); }
.badge.medium, .sev.med, .sev.medium { color: var(--warn); border-color: #f0d8a8; background: var(--warn-soft); }
.badge.low, .sev.low     { color: var(--good); border-color: #c1e2cc; background: var(--good-soft); }

/* ============== FORMS / INPUTS ============== */
input[type=text], select, textarea {
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2);
  padding: 8px 10px; outline: none;
  width: 100%;
}
input[type=text]:focus, select:focus, textarea:focus { border-color: var(--accent); }
label { font-size: 10.5px; letter-spacing: 0.8px; color: var(--muted); text-transform: uppercase; font-weight: 700; }

/* ============== BUTTONS ============== */
.btn {
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  padding: 8px 14px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.5px; cursor: pointer; text-transform: uppercase;
}
.btn:hover { background: #1a3a55; }
.btn.primary { background: var(--accent); border-color: var(--accent); }
.btn.primary:hover { background: #1745d4; }
.btn.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line-2); }
.btn.secondary:hover { border-color: var(--ink); }
.btn.small { padding: 5px 9px; font-size: 10.5px; }

/* ============== TOOLBAR ============== */
.toolbar { display: flex; gap: 4px; flex-wrap: wrap; margin: 0; align-items: center; }
.toolbar a, .toolbar button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; background: #fff; border: 1px solid var(--line-2);
  font-size: 10.5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.8px;
  font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.toolbar a:hover, .toolbar button:hover {
  background: var(--bg-2); border-color: var(--ink); color: var(--ink);
  text-decoration: none;
}
.toolbar a.primary, .toolbar button.primary {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.toolbar a.primary:hover { background: var(--ink-2); color: #fff; }

/* ============== CHIPS ============== */
.chip {
  display: inline-block; padding: 5px 11px; margin: 3px 5px 3px 0;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  font-size: 11.5px; cursor: pointer;
}
.chip:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ============== SLIDERS / SCENARIO ============== */
.lever-row {
  display: grid; grid-template-columns: 1fr 2fr 80px; gap: 14px;
  align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.lever-row:last-child { border-bottom: 0; }
.lever-row label { font-size: 12px; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 600; }
.lever-row input[type=range] { width: 100%; }
.lever-row .val {
  font-family: var(--serif); font-size: 15px; color: var(--ink);
  text-align: right; font-weight: 700;
}

/* ============== Q&A ============== */
.qa-wrap { background: #fff; }
.qa-box { display: flex; gap: 8px; margin-top: 10px; }
.qa-answer {
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 10px 12px; margin-top: 10px; font-size: 12.5px; color: var(--body);
  display: none; white-space: pre-wrap;
}

/* ============== COPILOT DRAWER ============== */
#copilot-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 1300;
  background: var(--ink); color: #fff; border: 0;
  padding: 11px 18px; font-weight: 700; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.6px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(5,28,44,0.18);
}
#copilot-fab:hover { background: var(--accent); }

#copilot-drawer {
  position: fixed; top: 0; right: -480px; width: 460px; height: 100vh;
  background: #fff; border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(5,28,44,0.10);
  display: flex; flex-direction: column; z-index: 1600;
  transition: right 0.24s ease;
}
#copilot-drawer.open { right: 0; }
.cd-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--ink-2); background: var(--ink); color: #fff;
}
.cd-head .cd-title { font-family: var(--serif); font-weight: 700; font-size: 14px; }
.cd-head .cd-sub { font-size: 10px; letter-spacing: 0.8px; opacity: 0.75; margin-top: 2px; text-transform: uppercase; }
.cd-head select {
  background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.25);
  padding: 3px 6px; font-size: 11px; width: auto;
}
.cd-head select option { color: #000; }
.cd-head-actions { display: flex; gap: 4px; }
.cd-icon-btn {
  background: rgba(255,255,255,0.08); color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  width: 32px; height: 32px;
  font-size: 14px; cursor: pointer; line-height: 1;
  transition: background 0.12s, border-color 0.12s;
}
.cd-icon-btn:hover { background: rgba(255,255,255,0.18); }
.cd-icon-btn.on { background: var(--accent); border-color: var(--accent); }

.cd-messages {
  flex: 1; overflow-y: auto; padding: 16px 18px; background: var(--bg-2);
  scroll-behavior: smooth;
}
.cd-msg { margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start; }
.cd-msg .avatar {
  width: 26px; height: 26px; flex-shrink: 0;
  background: var(--ink); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.cd-msg.user .avatar { background: var(--accent); }
.cd-msg .bubble-wrap { flex: 1; min-width: 0; }
.cd-msg .bubble {
  padding: 9px 13px;
  font-size: 12.8px; line-height: 1.55;
  border: 1px solid var(--line);
  white-space: pre-wrap; word-wrap: break-word;
  background: #fff;
  position: relative;
  animation: cd-fade 0.16s ease;
}
@keyframes cd-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cd-msg.user .bubble { background: var(--accent); color: #fff; border-color: var(--accent); }
.cd-msg.assistant .bubble { background: #fff; color: var(--ink-2); white-space: normal; }

/* ---- Rendered markdown inside copilot bubbles ---- */
.cd-msg.assistant .bubble p { margin: 0 0 8px; }
.cd-msg.assistant .bubble p:last-child { margin-bottom: 0; }
.cd-msg.assistant .bubble strong { color: var(--ink); font-weight: 700; }
.cd-msg.assistant .bubble em { font-style: italic; }
.cd-msg.assistant .bubble h4,
.cd-msg.assistant .bubble h5 {
  font-family: var(--serif);
  color: var(--ink);
  margin: 10px 0 6px;
  font-weight: 700;
  line-height: 1.25;
}
.cd-msg.assistant .bubble h4 { font-size: 13.5px; }
.cd-msg.assistant .bubble h5 { font-size: 12.5px; letter-spacing: 0.2px; }
.cd-msg.assistant .bubble h4:first-child,
.cd-msg.assistant .bubble h5:first-child { margin-top: 0; }
.cd-msg.assistant .bubble ul,
.cd-msg.assistant .bubble ol {
  margin: 4px 0 8px;
  padding-left: 20px;
}
.cd-msg.assistant .bubble li { margin-bottom: 3px; line-height: 1.5; }
.cd-msg.assistant .bubble li:last-child { margin-bottom: 0; }
.cd-msg.assistant .bubble code {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--ink);
}
.cd-msg.assistant .bubble table.md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 11.5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.cd-msg.assistant .bubble table.md-table th,
.cd-msg.assistant .bubble table.md-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.cd-msg.assistant .bubble table.md-table th {
  background: var(--bg-2);
  font-weight: 700;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.2px;
}
.cd-msg.assistant .bubble table.md-table tr:last-child td { border-bottom: 0; }
.cd-msg .msg-actions {
  display: flex; gap: 6px; margin-top: 4px;
  opacity: 0; transition: opacity 0.15s;
}
.cd-msg:hover .msg-actions { opacity: 1; }
.cd-msg.assistant .msg-actions { opacity: 0.55; }
.cd-msg.assistant:hover .msg-actions { opacity: 1; }
.msg-actions button {
  background: transparent; border: 0; color: var(--muted);
  font-size: 11px; cursor: pointer; padding: 2px 4px;
}
.msg-actions button:hover { color: var(--ink); }
.msg-actions button.playing { color: var(--accent); }

/* Typing indicator (3 bouncing dots) */
.cd-typing { display: inline-flex; gap: 4px; padding: 2px 4px; }
.cd-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-2); display: inline-block;
  animation: cd-bounce 1s infinite;
}
.cd-typing span:nth-child(2) { animation-delay: 0.15s; }
.cd-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes cd-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.cd-suggested {
  padding: 10px 14px 4px; border-top: 1px solid var(--line); background: #fff;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.cd-suggested .chip { font-size: 11px; padding: 4px 10px; margin: 2px; }

.cd-input {
  display: flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid var(--line); background: #fff;
  align-items: center;
}
.cd-input input { flex: 1; }

.cd-mic {
  width: 38px; height: 38px; flex-shrink: 0;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line-2);
  font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.cd-mic:hover { background: var(--bg-2); border-color: var(--ink); }
.cd-mic.recording {
  background: var(--bad); color: #fff; border-color: var(--bad);
  animation: cd-mic-pulse 1.2s infinite;
}
.cd-mic .mic-dot {
  position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bad); opacity: 0;
}
.cd-mic.recording .mic-dot { opacity: 1; background: #fff; }
@keyframes cd-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(192,57,43,0); }
}

.cd-mic-status {
  font-size: 10.5px; padding: 0 14px 8px;
  background: #fff; color: var(--muted);
  letter-spacing: 0.3px; min-height: 14px;
  text-align: right;
}
.cd-mic-status.busy { color: var(--accent); }
.cd-mic-status.error { color: var(--bad); }

/* ============== RISK / INSIGHTS ROWS ============== */
.risk-row {
  display: grid; grid-template-columns: 1.6fr 0.9fr 0.7fr 0.7fr 2fr;
  gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--line);
  align-items: center; font-size: 12.5px;
}
.risk-row.head {
  font-weight: 700; color: var(--muted); font-size: 10px;
  text-transform: uppercase; letter-spacing: 1.1px; background: var(--bg-2);
}
.risk-row:last-child { border-bottom: 0; }

/* ============== Q&A PAIRS ============== */
.qa-pair { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.qa-pair:last-child { border-bottom: 0; }
.qa-pair .q { font-family: var(--serif); font-weight: 700; color: var(--ink); font-size: 13px; }
.qa-pair .a { color: var(--body); margin-top: 6px; font-size: 12.5px; }

/* ============== BRIEFING TABS ============== */
.brief-tabs { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.brief-tabs a {
  padding: 7px 14px; background: #fff; border: 1px solid var(--line);
  color: var(--ink-2); font-size: 11.5px; letter-spacing: 0.4px; font-weight: 600;
  text-transform: uppercase;
}
.brief-tabs a.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.brief-tabs a:hover { text-decoration: none; border-color: var(--accent); }

/* ============== CHARTS ============== */
.chart-wrap { position: relative; height: 220px; }

/* ============== LEGACY ALIASES ============== */
.headline-banner {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--ink);
  padding: 16px 20px; margin-bottom: 16px;
}
.headline-banner h3 { font-family: var(--serif); font-size: 16px; color: var(--ink); margin: 0 0 4px; }
.headline-banner .meta { font-size: 11.5px; color: var(--muted); }
.persona-tile {
  background: #fff; border: 1px solid var(--line); padding: 14px 16px;
  display: block; color: inherit; transition: border-color 0.12s, box-shadow 0.12s;
}
.persona-tile:hover { border-color: var(--accent); text-decoration: none; box-shadow: 0 4px 12px rgba(5,28,44,0.05); }
.persona-tile .code { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.persona-tile .name { font-family: var(--serif); font-size: 15px; color: var(--ink); margin: 4px 0 4px; font-weight: 600; }
.persona-tile .headline { font-size: 12.5px; color: var(--body); }
.persona-tile .focus-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.ai-panel {
  background: #fff; border: 1px solid var(--line); padding: 16px 18px; margin-bottom: 16px; position: relative;
}
.ai-panel::before {
  content: "EXHIBIT · AI"; position: absolute; top: -8px; left: 16px; background: #fff;
  padding: 0 8px; font-size: 9px; letter-spacing: 1.5px; color: var(--accent); font-weight: 800;
}
.ai-panel h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 14px; }
.ai-panel .body { font-size: 13px; color: var(--body); }
.ai-panel .offline {
  display: inline-block; padding: 3px 9px; background: var(--warn-soft); border: 1px solid #f0d8a8;
  color: #8a6500; font-size: 10.5px; margin-top: 8px;
}
.ai-panel ul { margin: 4px 0 0 18px; }
.ai-pill {
  padding: 4px 10px; font-size: 10px; font-weight: 700; background: var(--ink); color: #fff;
  margin-left: 8px; letter-spacing: 0.8px; text-transform: uppercase;
}
.ai-pill.off { background: var(--bad); }
.theme-row {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  padding: 12px 14px; margin-bottom: 8px;
}
.theme-row h3 { margin: 0 0 4px; font-size: 13.5px; }
.theme-row .summary { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.initiative-link {
  display: inline-block; margin: 2px 6px 2px 0; padding: 3px 9px;
  background: var(--bg-2); color: var(--ink); font-size: 11.5px; border: 1px solid var(--line);
}
.initiative-link:hover { background: var(--bg-3); text-decoration: none; }

/* ============== McKINSEY EXHIBIT SYSTEM ============== */
.exhibit-block {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 1px solid var(--ink);
  margin-bottom: 24px;
}
.exhibit-block .action-title {
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.exhibit-block .action-title .ex-num {
  font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  padding-bottom: 4px; display: inline-block;
}
.exhibit-block .action-title h2 {
  font-family: var(--serif); font-size: 17px; color: var(--ink);
  margin: 4px 0 0; font-weight: 500; line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 1000px;
}
.exhibit-block .exhibit-content { padding: 20px 22px; }
.exhibit-block .source {
  padding: 10px 22px; border-top: 1px solid var(--line);
  font-size: 10.5px; color: var(--muted); font-style: italic;
  background: #fff;
}
.exhibit-block .source a {
  color: var(--ink); font-style: normal; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px; font-size: 10px;
  margin-left: 6px;
}

/* ============== POV / SYNTHESIS BLOCK (McKinsey executive summary) ============== */
.pov {
  background: #ffffff;
  border: 1px solid var(--line); border-top: 3px solid var(--ink);
  padding: 26px 32px 22px; margin-bottom: 24px;
}
.pov .lead-label {
  font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--accent); font-weight: 800; margin-bottom: 10px;
}
.pov .lead {
  font-family: var(--serif); font-size: 22px; color: var(--ink);
  line-height: 1.32; font-weight: 500; margin-bottom: 18px;
  letter-spacing: -0.01em; max-width: 920px;
}
.pov .reasons {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 16px 0 18px;
  border-top: 1px solid var(--line);
}
.pov .reason {
  padding: 14px 20px 14px 0; background: transparent;
  border-left: 0; border-right: 1px solid var(--line);
  position: relative;
}
.pov .reason:first-child { padding-left: 0; }
.pov .reason:not(:first-child) { padding-left: 20px; }
.pov .reason:last-child { border-right: 0; padding-right: 0; }
.pov .reason .num {
  font-family: var(--serif); font-size: 20px; color: var(--ink);
  font-weight: 600; line-height: 1; margin-bottom: 6px;
  display: inline-block;
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}
.pov .reason .text { font-size: 12.5px; color: var(--body); margin-top: 8px; line-height: 1.55; }
.pov .so-what {
  padding: 14px 18px; background: var(--ink); color: #fff;
  font-size: 13px; line-height: 1.55;
  border-left: 3px solid var(--accent);
}
.pov .so-what strong { color: #fff; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; font-size: 10.5px; }
.pov .source {
  font-size: 10.5px; color: var(--muted); font-style: italic;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}

/* ============== PROGRESS BARS (ESG) ============== */
.progress {
  height: 16px; background: var(--bg-3); border: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.progress .bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--accent) 0%, #4a78ff 100%);
}
.progress .goal-mark {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--ink);
}
.progress .pct {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; color: var(--ink); font-weight: 700;
}
.esg-row {
  display: grid; grid-template-columns: 2.2fr 1fr 0.7fr;
  gap: 14px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.esg-row:last-child { border-bottom: 0; }
.esg-row .label { font-size: 12.5px; color: var(--ink); }
.esg-row .target { font-size: 11px; color: var(--muted); text-align: right; }

/* ============== PEER BENCHMARK TABLE ============== */
table.peer { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.peer th, table.peer td {
  text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--line);
}
table.peer th:first-child, table.peer td:first-child { text-align: left; }
table.peer th {
  color: var(--muted); font-weight: 700; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 1.2px; background: var(--bg-2);
}
table.peer tr.self td {
  background: #f0f4ff; font-weight: 700; color: var(--ink);
  border-left: 3px solid var(--accent);
}
.q-good { background: var(--good-soft); color: var(--good); font-weight: 700; padding: 1px 6px; }
.q-mid  { background: var(--warn-soft); color: var(--warn); font-weight: 600; padding: 1px 6px; }
.q-low  { background: var(--bad-soft);  color: var(--bad);  font-weight: 600; padding: 1px 6px; }

/* ============== MARKET SIZING ============== */
.market-row {
  display: grid; grid-template-columns: 1.8fr 0.5fr 0.6fr 0.7fr 0.7fr 0.7fr 0.6fr 1.8fr;
  gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line);
  align-items: center; font-size: 12px;
}
.market-row.head {
  background: var(--bg-2); font-weight: 700; color: var(--muted);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.1px;
}
.h-pill { display: inline-block; padding: 1px 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; }
.h-pill.h1 { background: var(--good-soft); color: var(--good); }
.h-pill.h2 { background: #e6efff; color: var(--accent); }
.h-pill.h3 { background: #f3e6ff; color: #6b2ec9; }

/* ============== HORIZON CARDS ============== */
.horizon {
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--accent);
  padding: 16px 18px;
}
.horizon.h1 { border-top-color: var(--good); }
.horizon.h2 { border-top-color: var(--accent); }
.horizon.h3 { border-top-color: #6b2ec9; }
.horizon h3 { font-family: var(--serif); font-size: 14.5px; margin: 0 0 4px; }
.horizon .window { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.horizon .share { font-family: var(--serif); font-size: 22px; color: var(--ink); margin: 6px 0; font-weight: 700; }
.horizon .share .unit { font-size: 11px; color: var(--muted); font-family: var(--sans); margin-left: 3px; }
.horizon ul { margin: 8px 0 0 16px; font-size: 12.5px; }
.horizon .h-kpis {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--line);
}
.horizon .h-kpi { background: var(--bg-2); padding: 6px 8px; }
.horizon .h-kpi .lbl { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.horizon .h-kpi .val { font-family: var(--serif); font-size: 14px; color: var(--ink); margin-top: 2px; }
.horizon .h-kpi .val .from { color: var(--muted); font-size: 11px; font-family: var(--sans); }

/* ============== 2x2 MATRIX ============== */
.matrix-22 {
  display: grid; grid-template-columns: 60px 1fr 1fr;
  grid-template-rows: 30px 1fr 1fr;
  border: 1px solid var(--line); background: #fff; min-height: 360px;
}
.matrix-22 .cell { padding: 8px; border: 1px solid var(--line); background: #fff; font-size: 11.5px; overflow-y: auto; }
.matrix-22 .axis-label { background: var(--bg-2); color: var(--muted); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; text-align: center; padding: 6px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.matrix-22 .corner { background: var(--bg-3); border: 1px solid var(--line); }
.matrix-22 .item {
  padding: 4px 6px; background: var(--accent-soft); border-left: 2px solid var(--accent);
  margin-bottom: 4px; font-size: 11px;
}
.matrix-22 .item .name { font-weight: 700; color: var(--ink); }

/* ============== SENSITIVITY HEATMAP ============== */
table.heat { border-collapse: collapse; font-size: 12px; width: 100%; }
table.heat th, table.heat td {
  padding: 10px 12px; text-align: center; border: 1px solid var(--line);
  font-weight: 600;
}
table.heat th {
  background: var(--bg-2); color: var(--muted);
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
}
table.heat td.cell { font-family: var(--serif); font-size: 14px; color: var(--ink); }
.h0 { background: #fff5f3; }
.h1 { background: #fef0ea; }
.h2 { background: #fdf5e6; }
.h3 { background: #f3faf5; }
.h4 { background: #d9f0e3; color: var(--good); }

/* ============== WATERFALL ============== */
.waterfall {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 8px; align-items: end; padding: 16px 12px;
  background: #fff; border: 1px solid var(--line); min-height: 280px;
}
.wf-col { display: flex; flex-direction: column; align-items: center; }
.wf-bar { width: 100%; min-height: 20px; }
.wf-bar.start, .wf-bar.end { background: var(--ink); }
.wf-bar.pos { background: var(--good); }
.wf-bar.neg { background: var(--bad); }
.wf-label { font-size: 10px; text-align: center; margin-top: 6px; color: var(--ink); }
.wf-value { font-family: var(--serif); font-size: 12.5px; color: var(--ink); font-weight: 700; margin-top: 4px; }

/* ============== TOP CUSTOMER ROW ============== */
.cust-row {
  display: grid; grid-template-columns: 30px 1.6fr 1fr 0.8fr 0.6fr 1.6fr;
  gap: 12px; align-items: center; padding: 10px 12px;
  border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.cust-row.head { background: var(--bg-2); font-weight: 700; color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.1px; }
.cust-row .rank { font-family: var(--serif); font-size: 16px; color: var(--accent); font-weight: 700; }
.traj { font-size: 10px; padding: 2px 7px; letter-spacing: 0.6px; font-weight: 700; text-transform: uppercase; }
.traj.Expanding { background: var(--good-soft); color: var(--good); }
.traj.Stable    { background: var(--bg-3); color: var(--ink); }
.traj.Lighthouse{ background: #e6efff; color: var(--accent); }

/* ============== INVESTMENT THESIS ============== */
.thesis-row {
  display: grid; grid-template-columns: 38px 1.2fr 2fr;
  gap: 14px; align-items: start; padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.thesis-row:last-child { border-bottom: 0; }
.thesis-row .num {
  font-family: var(--serif); font-size: 24px; color: var(--accent); font-weight: 700; line-height: 1;
}
.thesis-row .point { font-family: var(--serif); font-size: 13.5px; color: var(--ink); font-weight: 700; }
.thesis-row .support { font-size: 12.5px; color: var(--body); }

/* ============== LEADERSHIP / ORG ============== */
.leader {
  background: #fff; border: 1px solid var(--line); padding: 14px 16px;
}
.leader .role { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.leader .name { font-family: var(--serif); font-size: 16px; color: var(--ink); margin: 4px 0 4px; font-weight: 600; }
.leader .prior { font-size: 12px; color: var(--body); }

/* ============== DECISION CARD ============== */
.decision {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent);
  padding: 14px 16px; margin-bottom: 12px;
}
.decision.high { border-left-color: var(--bad); }
.decision.med  { border-left-color: var(--warn); }
.decision.low  { border-left-color: var(--good); }
.decision .row1 { display: flex; justify-content: space-between; align-items: baseline; }
.decision .title { font-family: var(--serif); font-size: 15px; color: var(--ink); font-weight: 700; }
.decision .deadline { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--bad); font-weight: 700; }
.decision .ctx { font-size: 12.5px; color: var(--body); margin: 6px 0 8px; }
.decision .ai-rec {
  background: var(--accent-soft); border: 1px solid #d6def8;
  padding: 8px 12px; font-size: 12.5px;
  display: flex; gap: 12px; align-items: flex-start;
}
.decision .ai-rec .badge {
  background: var(--accent); color: #fff; border: 0; padding: 3px 8px;
  text-transform: uppercase; font-size: 9.5px; letter-spacing: 1px; font-weight: 800;
}
.decision .ai-rec .text { flex: 1; color: var(--ink); }
.decision .ai-rec .conf { font-size: 11px; color: var(--muted); }
.decision .meta-row {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 11.5px; color: var(--muted); padding-top: 8px; border-top: 1px dashed var(--line);
}
.decision .actions { display: flex; gap: 6px; margin-top: 10px; }

/* ============== SIGNAL ROWS (alerts / risks / wins / opps in today) ============== */
.signal {
  display: grid; grid-template-columns: 14px 1fr auto;
  gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line);
  align-items: start; font-size: 12.5px;
}
.signal .ind { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--muted); }
.signal.win  .ind { background: var(--good); }
.signal.risk .ind { background: var(--bad); }
.signal.opp  .ind { background: var(--accent); }
.signal.qa   .ind { background: var(--warn); }
.signal .title { font-family: var(--serif); color: var(--ink); font-weight: 700; font-size: 13px; }
.signal .sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.signal .right { font-size: 11px; text-align: right; color: var(--muted); }
.signal .right .val { font-family: var(--serif); font-size: 14px; color: var(--ink); font-weight: 700; }

/* ============== HEALTH SCORECARD ============== */
.score-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.score-card {
  background: #fff; border: 1px solid var(--line); padding: 14px 16px;
  border-top: 3px solid var(--muted);
}
.score-card.green { border-top-color: var(--good); }
.score-card.amber { border-top-color: var(--warn); }
.score-card.red   { border-top-color: var(--bad); }
.score-card .dim {
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.score-card .metric { font-family: var(--serif); font-size: 16px; color: var(--ink); margin: 6px 0 2px; font-weight: 700; }
.score-card .trend { font-size: 11.5px; }
.score-card .trend.up   { color: var(--good); }
.score-card .trend.down { color: var(--bad); }
.score-card .trend.flat { color: var(--muted); }
.score-card .so-what { font-size: 12px; color: var(--body); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }

/* ============== OPPORTUNITY ROW ============== */
.opp-row {
  display: grid; grid-template-columns: 0.4fr 1.6fr 1.2fr 0.6fr 0.6fr 0.7fr 0.7fr 0.8fr 0.6fr;
  gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line);
  align-items: center; font-size: 12px;
}
.opp-row.head { background: var(--bg-2); font-weight: 700; color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.1px; }
.opp-row .rice {
  font-family: var(--serif); font-weight: 800; color: var(--accent);
  background: var(--accent-soft); padding: 3px 8px; text-align: center;
}
.opp-row .stage-pill { background: var(--bg-3); padding: 2px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; color: var(--ink); }

/* ============== INITIATIVE ROI ROW ============== */
.roi-card {
  background: #fff; border: 1px solid var(--line); padding: 14px 16px; margin-bottom: 10px;
  border-left: 4px solid var(--good);
}
.roi-card.amber { border-left-color: var(--warn); }
.roi-card.red { border-left-color: var(--bad); }
.roi-card .row1 { display: flex; justify-content: space-between; align-items: baseline; }
.roi-card .name { font-family: var(--serif); font-size: 14.5px; color: var(--ink); font-weight: 700; }
.roi-card .owner { font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.roi-card .grid-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 10px; }
.roi-card .metric { }
.roi-card .metric .lbl { font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.roi-card .metric .val { font-family: var(--serif); font-size: 15px; color: var(--ink); font-weight: 700; margin-top: 2px; }
.roi-bar { height: 8px; background: var(--bg-3); position: relative; margin-top: 4px; }
.roi-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.roi-bar.green .fill { background: var(--good); }
.roi-bar.amber .fill { background: var(--warn); }
.roi-bar.red .fill { background: var(--bad); }
.roi-card .ai-line { font-size: 12px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-style: italic; }

/* ============== CUSTOMER 360 ============== */
.cust-hero {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff; padding: 22px 26px; margin-bottom: 18px;
}
.cust-hero .name { font-family: var(--serif); font-size: 26px; font-weight: 700; }
.cust-hero .sub { font-size: 12px; opacity: 0.8; margin-top: 4px; }
.cust-hero .health-row { display: flex; gap: 18px; margin-top: 14px; font-size: 12px; }
.cust-hero .health-row .item .lbl { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.7; font-weight: 700; }
.cust-hero .health-row .item .val { font-family: var(--serif); font-size: 17px; font-weight: 700; margin-top: 3px; }

.product-mix {
  display: flex; height: 26px; background: var(--bg-3); margin: 12px 0;
}
.product-mix .seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; font-weight: 700;
  white-space: nowrap; padding: 0 6px;
}
.timeline-event {
  display: grid; grid-template-columns: 84px 14px 1fr;
  gap: 12px; padding: 8px 0; align-items: start;
  border-bottom: 1px dashed var(--line);
}
.timeline-event .date { font-size: 11px; color: var(--muted); letter-spacing: 0.4px; }
.timeline-event .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted); margin-top: 4px;
}
.timeline-event.win .dot { background: var(--good); }
.timeline-event.risk .dot { background: var(--bad); }
.timeline-event.opportunity .dot { background: var(--accent); }
.timeline-event.engagement .dot { background: var(--warn); }
.timeline-event.milestone .dot { background: var(--ink); }
.timeline-event.decision .dot { background: var(--accent); }
.timeline-event .ev { font-size: 12.5px; color: var(--body); }

/* ============== STRESS TEST CARD ============== */
.stress {
  background: #fff; border: 1px solid var(--line); padding: 16px 18px;
  border-top: 3px solid var(--bad);
}
.stress h3 { font-family: var(--serif); font-size: 15px; color: var(--ink); margin: 0; }
.stress .prob { font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.stress .trigger { font-size: 12.5px; color: var(--body); margin: 8px 0 10px; }
.stress .impacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.stress .impacts .impact { background: var(--bad-soft); padding: 8px 10px; border-left: 2px solid var(--bad); }
.stress .impacts .impact .lbl { font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.stress .impacts .impact .val { font-family: var(--serif); font-size: 15px; color: var(--bad); font-weight: 700; margin-top: 2px; }
.stress ul { font-size: 12.5px; }

/* ============== MINI SPARKLINE ============== */
.spark { display: inline-block; height: 22px; width: 100px; vertical-align: middle; }

/* ============== PULSE OPERATIONAL ROWS ============== */
.op-row {
  display: grid; grid-template-columns: 1.8fr 0.8fr 0.8fr 1.2fr 0.6fr;
  gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line);
  align-items: center; font-size: 12.5px;
}
.op-row.head { background: var(--bg-2); font-weight: 700; color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.1px; }
.op-row .actual { font-family: var(--serif); font-size: 16px; color: var(--ink); font-weight: 700; }
.op-row .target { font-size: 11.5px; color: var(--muted); }

/* ============== HEATMAP GENERIC ============== */
.heatmap { display: grid; gap: 4px; }
.heatmap .cell {
  padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--line);
  font-size: 11.5px; min-height: 50px;
}
.heatmap .cell.h0 { background: #fcfdff; }
.heatmap .cell.h1 { background: #eef3fb; }
.heatmap .cell.h2 { background: #d8e3f5; }
.heatmap .cell.h3 { background: #b9ccef; }
.heatmap .cell.h4 { background: #94aeea; color: #fff; }

/* ============== DRILL PANEL ============== */
[data-drill] {
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
}
[data-drill]:hover {
  background: var(--accent-soft);
}
[data-drill]:hover::after {
  content: "↓";
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-weight: 800; font-size: 14px;
}
.kpi[data-drill]:hover, .score-card[data-drill]:hover, .tile[data-drill]:hover,
.roi-card[data-drill]:hover, .decision[data-drill]:hover, .stress[data-drill]:hover {
  background: var(--accent-soft);
}

#drill-backdrop {
  display: none;
  position: fixed; inset: 0; background: rgba(5,28,44,0.45); z-index: 1400;
}
#drill-backdrop.open { display: block; }

#drill-panel {
  position: fixed; top: 0; right: -70%; width: 68%; max-width: 1080px;
  height: 100vh; background: var(--bg-2); border-left: 1px solid var(--line);
  box-shadow: -16px 0 50px rgba(5,28,44,0.20);
  display: flex; flex-direction: column; z-index: 1500;
  transition: right 0.25s ease;
}
#drill-panel.open { right: 0; }

.drill-head {
  padding: 14px 22px; background: var(--ink); color: #fff;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--ink-2);
}
.drill-head .crumbs {
  font-size: 11px; letter-spacing: 0.5px; color: #cbd3dc;
  overflow-x: auto; white-space: nowrap; max-width: 70%;
}
.drill-head .crumbs span.sep { color: #6a8197; margin: 0 6px; }
.drill-head .crumbs a {
  color: #cbd3dc; cursor: pointer; text-decoration: underline;
}
.drill-head .crumbs span.current { color: #fff; font-weight: 700; }
.drill-head .actions { display: flex; gap: 6px; }
.drill-head .actions button {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.2);
  padding: 5px 10px; font-size: 11px; cursor: pointer; letter-spacing: 0.5px;
  text-transform: uppercase; font-weight: 700;
}
.drill-head .actions button:hover { background: rgba(255,255,255,0.1); }

.drill-body { flex: 1; overflow-y: auto; padding: 18px 22px 60px; }
.drill-body .title-block {
  background: #fff; border: 1px solid var(--line); padding: 16px 18px; margin-bottom: 14px;
}
.drill-body .title-block .eyebrow {
  color: var(--accent); font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase; font-weight: 800;
}
.drill-body .title-block h2 {
  font-family: var(--serif); font-size: 19px; color: var(--ink);
  margin: 4px 0 2px; font-weight: 700;
}
.drill-body .title-block .subtitle { color: var(--muted); font-size: 12px; }
.drill-body .takeaway {
  background: var(--accent-soft); border: 1px solid #d6def8;
  padding: 12px 14px; margin-bottom: 14px;
  font-family: var(--serif); font-size: 14px; color: var(--ink); font-weight: 700;
  border-left: 3px solid var(--accent);
}
.drill-body .takeaway::before {
  content: "AI TAKEAWAY"; display: block;
  font-family: var(--sans); font-size: 9.5px; letter-spacing: 1.4px;
  color: var(--accent); font-weight: 800; margin-bottom: 4px;
}
.drill-body .metrics-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.drill-body .metrics-row .m {
  background: #fff; border: 1px solid var(--line); padding: 10px 12px;
  border-top: 2px solid var(--ink);
}
.drill-body .metrics-row .m .lbl {
  font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.drill-body .metrics-row .m .val {
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  font-weight: 700; margin-top: 2px;
}

.drill-rows {
  background: #fff; border: 1px solid var(--line);
}
.drill-row {
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 0.6fr;
  gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line);
  align-items: center; font-size: 12.5px;
  cursor: default;
}
.drill-row.has-drill { cursor: pointer; }
.drill-row.has-drill:hover { background: var(--accent-soft); }
.drill-row.head {
  background: var(--bg-2); font-weight: 700; color: var(--muted);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.1px;
}
.drill-row .label { font-family: var(--serif); font-weight: 700; color: var(--ink); font-size: 13px; }
.drill-row .value { font-family: var(--serif); font-size: 14px; color: var(--ink); font-weight: 700; }
.drill-row .delta { font-size: 12px; color: var(--muted); }
.drill-row .note  { font-size: 11.5px; color: var(--muted); font-style: italic; }
.drill-row .arrow { color: var(--accent); font-weight: 800; text-align: right; opacity: 0; }
.drill-row.has-drill .arrow { opacity: 1; }
.drill-row .status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
}
.drill-row .status-dot.good { background: var(--good); }
.drill-row .status-dot.warn { background: var(--warn); }
.drill-row .status-dot.bad  { background: var(--bad); }

.drill-empty {
  text-align: center; padding: 28px 16px; color: var(--muted);
}
.drill-loading {
  text-align: center; padding: 40px; color: var(--muted); font-size: 13px;
}
.drill-loading::before {
  content: ""; display: block; width: 30px; height: 30px;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; margin: 0 auto 12px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ai-gen-badge {
  display: inline-block; padding: 2px 8px; font-size: 9.5px;
  background: var(--accent); color: #fff; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; margin-left: 8px;
}

/* ============== STICKY JOURNEY BAR (top of main when journey active) ============== */
.journey-bar {
  background: #ffffff; color: var(--ink);
  padding: 10px 28px 0; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 11;
}
.journey-bar .jb-row {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 8px;
}
.journey-bar .jb-left { display: flex; align-items: baseline; gap: 10px; }
.journey-bar .jb-label {
  font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent); font-weight: 800;
}
.journey-bar .jb-name {
  font-family: var(--serif); font-size: 14px; font-weight: 700;
  color: var(--ink);
}
.journey-bar .jb-step-text {
  flex: 1; font-size: 12px; color: var(--muted); letter-spacing: 0.3px;
}
.journey-bar .jb-actions { display: flex; gap: 6px; }
.journey-bar .jb-btn {
  background: #fff; color: var(--ink); border: 1px solid var(--line-2);
  padding: 5px 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.journey-bar .jb-btn:hover { background: var(--bg-2); text-decoration: none; }
.journey-bar .jb-btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.journey-bar .jb-btn.primary:hover { background: var(--ink-2); }
.journey-bar .jb-btn.ghost { color: var(--muted); border-color: transparent; background: transparent; }
.journey-bar .jb-progress {
  display: flex; gap: 3px;
}
.journey-bar .jb-seg {
  flex: 1; height: 4px; background: var(--line);
  display: block;
}
.journey-bar .jb-seg.done    { background: var(--good); }
.journey-bar .jb-seg.current { background: var(--accent); }
.journey-bar .jb-seg:hover   { opacity: 0.85; }

/* ============== TIERED NAV (Strategic · Operational · Tactical) ============== */
.nav-tier { padding: 14px 0 8px; border-bottom: 1px solid var(--line); }
.nav-tier .tier-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 22px 10px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 6px;
  position: relative;
}
.nav-tier .tier-head::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 10px;
  width: 3px;
}
.tier-strategic .tier-head::before { background: var(--ink); }
.tier-operational .tier-head::before { background: var(--accent); }
.tier-tactical .tier-head::before { background: var(--bad); }
.nav-tier .tier-num {
  font-family: var(--serif); font-weight: 700;
  font-size: 11px; color: var(--muted); letter-spacing: 0.5px;
}
.nav-tier .tier-name {
  font-family: var(--serif); font-size: 13px; color: var(--ink);
  font-weight: 700; letter-spacing: -0.005em;
}
.nav-tier .tier-sub {
  margin-left: auto; font-size: 9px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.nav-tier a.nav-item {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 8px;
}
.ni-chip {
  font-size: 9.5px; padding: 1px 6px; border: 1px solid var(--line-2);
  letter-spacing: 0.3px; font-weight: 700;
  background: #fff; color: var(--muted);
  font-family: var(--sans);
}
.ni-chip.pos { color: var(--good); border-color: #c1e2cc; background: var(--good-soft); }
.ni-chip.warn { color: var(--warn); border-color: #f0d8a8; background: var(--warn-soft); }
.ni-chip.hot { color: var(--bad); border-color: transparent; background: transparent; font-size: 14px; padding: 0; line-height: 1; }

/* Merged nav row: one primary link + thin sub-anchors beneath */
.nav-item-multi {
  border-left: 2px solid transparent;
  margin-bottom: 2px;
}
.nav-item-multi.active { border-left-color: var(--ink); background: var(--bg-2); }
.nav-item-multi .nav-item.primary {
  border-left: 0 !important;
  padding-bottom: 2px !important;
  background: transparent !important;
}
.nav-item-multi.active .nav-item.primary {
  color: var(--ink); font-weight: 600;
}
.nav-item-multi .nav-subs {
  display: flex; flex-wrap: wrap;
  padding: 0 22px 6px 26px;
  column-gap: 14px;
  row-gap: 2px;
}
.nav-item-multi .nav-subs a {
  font-size: 10.5px; color: var(--muted); letter-spacing: 0.2px;
  padding-bottom: 1px;
  position: relative;
}
.nav-item-multi .nav-subs a:hover {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--ink);
}
.nav-item-multi .nav-subs a + a::before {
  content: "·"; position: absolute; left: -9px; top: 0;
  color: var(--muted-2);
}

/* ============== JOURNEY SHORTCUTS in sidebar (condensed) ============== */
.nav-journeys {
  background: var(--bg-2);
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--line);
}
.nav-journeys .label {
  padding: 0 22px 6px;
  font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.nav-journey {
  display: flex !important; align-items: center; gap: 10px;
  padding: 5px 22px 5px 24px !important; font-size: 11.5px !important;
  color: var(--ink-2) !important;
  justify-content: space-between !important;
}
.nav-journey:hover { background: #eef1f5 !important; color: var(--ink) !important; }
.nav-journey .j-dur {
  font-size: 9.5px; color: var(--muted);
  letter-spacing: 0.5px; font-weight: 600;
}

/* ============== VALUE CHAIN ============== */
.vc-strip {
  display: flex; gap: 0; padding: 0; margin-bottom: 18px;
  background: #fff; border: 1px solid var(--line); overflow-x: auto;
}
.vc-stage {
  flex: 1; min-width: 200px; padding: 18px 16px;
  border-right: 1px solid var(--line); position: relative;
  cursor: pointer; transition: background 0.12s;
}
.vc-stage:last-child { border-right: 0; }
.vc-stage:hover { background: var(--accent-soft); }
.vc-stage::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: var(--ink);
}
.vc-stage.good::before { background: var(--good); }
.vc-stage.warn::before { background: var(--warn); }
.vc-stage.bad::before  { background: var(--bad); }
.vc-stage::after {
  content: "→"; position: absolute; right: -12px; top: 30px;
  color: var(--accent); font-size: 22px; font-weight: 800;
  background: #fff; padding: 0 4px; z-index: 2;
}
.vc-stage:last-child::after { display: none; }
.vc-stage .vc-ico { font-size: 22px; margin-bottom: 4px; }
.vc-stage .vc-stage-name {
  font-family: var(--serif); font-size: 14px; font-weight: 700;
  color: var(--ink); margin-bottom: 3px;
}
.vc-stage .vc-headline {
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  font-weight: 700; margin: 6px 0 2px;
}
.vc-stage .vc-metric { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.vc-stage ul {
  margin: 0; padding: 0; list-style: none;
}
.vc-stage ul li {
  font-size: 11.5px; color: var(--body); padding: 3px 0;
  border-top: 1px dashed var(--line);
}
.vc-stage ul li:first-child { border-top: 0; }
.vc-stage ul li .vc-item-name { font-weight: 700; color: var(--ink); display: block; }
.vc-stage ul li .vc-item-sub { font-size: 10.5px; color: var(--muted); }
.vc-stage .vc-kpi-pill {
  display: inline-block; padding: 3px 8px; font-size: 10px; font-weight: 800;
  letter-spacing: 0.6px; text-transform: uppercase; margin-top: 8px;
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line);
}
.vc-stage .vc-kpi-pill.good { background: var(--good-soft); color: var(--good); border-color: #c1e2cc; }
.vc-stage .vc-kpi-pill.warn { background: var(--warn-soft); color: var(--warn); border-color: #f0d8a8; }
.vc-stage .vc-kpi-pill.bad  { background: var(--bad-soft);  color: var(--bad);  border-color: #f0c4c0; }

/* ============== JOURNEYS ============== */
.journey-card {
  background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--accent); padding: 16px 18px;
  display: block; color: inherit;
}
.journey-card:hover { border-color: var(--accent); text-decoration: none; box-shadow: 0 4px 14px rgba(5,28,44,0.06); }
.journey-card .j-head { display: flex; justify-content: space-between; align-items: baseline; }
.journey-card .j-name { font-family: var(--serif); font-size: 16px; color: var(--ink); font-weight: 700; }
.journey-card .j-meta { font-size: 11px; color: var(--muted); letter-spacing: 0.4px; }
.journey-card .j-story { font-size: 12.5px; color: var(--body); margin: 8px 0 10px; }
.journey-card .j-steps {
  display: flex; gap: 0; flex-wrap: wrap; font-size: 11px;
  background: var(--bg-2); padding: 8px 10px;
}
.journey-card .j-steps .j-step {
  padding: 3px 8px; border-right: 1px solid var(--line); position: relative;
}
.journey-card .j-steps .j-step:last-child { border-right: 0; }
.journey-card .j-steps .j-step .n {
  font-family: var(--serif); font-weight: 700; color: var(--accent); margin-right: 4px;
}

/* Journey step shell (page wrapper) */
.journey-shell {
  background: var(--ink); color: #fff; padding: 14px 22px; margin-bottom: 16px;
}
.journey-shell .j-progress {
  display: flex; gap: 4px; margin-top: 10px;
}
.journey-shell .j-progress .seg {
  flex: 1; height: 6px; background: #1f3245;
}
.journey-shell .j-progress .seg.done    { background: var(--good); }
.journey-shell .j-progress .seg.current { background: var(--accent); }
.journey-shell .j-row {
  display: flex; justify-content: space-between; align-items: baseline;
}
.journey-shell .j-row .j-title { font-family: var(--serif); font-size: 17px; font-weight: 700; }
.journey-shell .j-row .j-meta { font-size: 11px; opacity: 0.8; letter-spacing: 0.4px; }
.journey-shell .j-step-row {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; font-size: 11.5px;
}
.journey-shell .j-step-pill {
  padding: 5px 11px; background: #0d2034; color: #cbd3dc; border: 1px solid #1f3245;
}
.journey-shell .j-step-pill.current { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.journey-shell .j-step-pill.done { background: var(--good); color: #fff; border-color: var(--good); }
.journey-shell .j-nav { display: flex; gap: 8px; margin-top: 12px; }
.journey-shell .j-nav a {
  background: #fff; color: var(--ink); padding: 7px 14px; font-size: 11.5px;
  font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
}
.journey-shell .j-nav a:hover { background: var(--accent); color: #fff; text-decoration: none; }
.journey-shell .j-nav a.secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }

.journey-iframe {
  width: 100%; height: 1200px; border: 1px solid var(--line); background: #fff;
}

/* ============== FOOTER ============== */
.footer {
  color: var(--muted); font-size: 11px; padding: 22px 28px;
  border-top: 1px solid var(--line); margin-top: 30px;
  letter-spacing: 0.2px; background: #fff;
}

/* ============== ONTOLOGY · actionable rows ============== */
.ont-table .ont-row td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.ont-table .ont-row.ont-flash {
  animation: ont-flash 1.6s ease;
}
@keyframes ont-flash {
  0%   { background: #fff; }
  20%  { background: var(--accent-soft); }
  100% { background: #fff; }
}
.ont-actions {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.ont-act {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; letter-spacing: 0.4px; font-weight: 700;
  padding: 4px 9px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line-2);
  cursor: pointer; text-transform: uppercase;
}
.ont-act:hover { background: var(--bg-2); border-color: var(--ink); text-decoration: none; }
.ont-act.ai { background: var(--accent); color: #fff; border-color: var(--accent); }
.ont-act.ai:hover { background: #1745d4; color: #fff; }
.ont-act.lite { background: var(--bg-2); color: var(--ink-2); }
.ont-act.lite:hover { color: var(--accent); border-color: var(--accent); }
.ont-impl { display: none; margin-top: 10px; }
.ont-impl.open {
  display: block;
  padding: 10px 14px;
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
}
.ont-impl-head {
  font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent); font-weight: 800;
}
.ont-impl-text {
  font-family: var(--serif); font-size: 13px; color: var(--ink);
  font-weight: 600; line-height: 1.45; margin-top: 4px;
}
.ont-impl-acts {
  list-style: none; padding: 0; margin: 4px 0 0;
  font-size: 11.5px; line-height: 1.55;
}
.ont-impl-acts li { padding: 3px 0; border-top: 1px dashed var(--line); }
.ont-impl-acts li:first-child { border-top: 0; }
.ont-impl-acts li strong { color: var(--ink); }

.sem-search .ont-sem-list li {
  grid-template-columns: 44px 1.4fr 2fr 80px;
}

/* Domains page: per-domain action chips inline under the domain header */
.dom-actions {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 10px;
}
.dom-block { transition: background 0.2s; }
.dom-block.ont-flash {
  animation: ont-flash 1.6s ease;
}

/* Knowledge-graph side-panel actionable strip */
.kg-act-row {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 8px 0 4px;
}
.kg-act-row .ont-act { font-size: 9.5px; padding: 4px 8px; }
#kg-node-impl.open {
  display: block; margin: 6px 0;
  padding: 8px 10px;
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
}

/* ============== INSIGHTS & ACTIONS (LLM card for 360 pages) ============== */
.insights-actions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; margin: 0 0 22px;
  background: #fff; border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
}
.insights-actions .ia-col { padding: 16px 20px; }
.insights-actions .ia-col + .ia-col { border-left: 1px solid var(--line); }
.insights-actions .ia-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.insights-actions .ia-eyebrow {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent); font-weight: 800;
}
.insights-actions .ia-title {
  font-family: var(--serif); font-size: 14px; color: var(--ink);
  font-weight: 600; flex: 1;
}
.insights-actions .ia-refresh {
  background: transparent; border: 0; color: var(--muted);
  font-size: 13px; cursor: pointer;
}
.insights-actions .ia-refresh:hover { color: var(--ink); }
.insights-actions ul { list-style: none; padding: 0; margin: 0; }
.insights-actions .insight-row {
  padding: 9px 0; border-bottom: 1px dashed var(--line);
  display: grid; grid-template-columns: 22px 1fr; gap: 10px;
}
.insights-actions .insight-row:last-child { border-bottom: 0; }
.insights-actions .insight-row .mark {
  font-family: var(--serif); color: var(--accent); font-weight: 700;
  font-size: 13px;
}
.insights-actions .insight-row .title { font-weight: 700; color: var(--ink); font-size: 12.5px; }
.insights-actions .insight-row .why { font-size: 11.5px; color: var(--body); margin-top: 2px; line-height: 1.5; }

.insights-actions .action-row {
  padding: 9px 0; border-bottom: 1px dashed var(--line);
}
.insights-actions .action-row:last-child { border-bottom: 0; }
.insights-actions .action-row .a-text {
  font-weight: 700; color: var(--ink); font-size: 12.5px;
  display: flex; align-items: baseline; gap: 8px;
}
.insights-actions .action-row .a-text::before {
  content: "▸"; color: var(--good); font-size: 11px;
}
.insights-actions .action-row .a-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px;
  font-size: 10.5px; color: var(--muted);
}
.insights-actions .action-row .a-meta b { color: var(--ink-2); font-weight: 700; }
.insights-actions .ia-loading {
  font-size: 11.5px; color: var(--muted); padding: 8px 0;
  font-style: italic;
}

/* Grounding strip: which datasets the AI cited from */
.ia-grounding {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-bottom: 8px; padding: 5px 8px;
  background: var(--bg-2); border: 1px dashed var(--line-2);
  font-size: 10px; letter-spacing: 0.3px;
}
.ia-grounding-h {
  color: var(--muted); font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; font-size: 9px;
}
.ia-source {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; padding: 1px 6px;
  background: #fff; color: var(--ink-2);
  border: 1px solid var(--line-2);
  letter-spacing: 0;
}

/* Evidence chips: the specific data points cited per insight/action */
.ev-row {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px;
}
.ev-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 9.5px; padding: 2px 7px;
  background: var(--accent-soft); border: 1px solid #cbd5ff;
  color: var(--ink-2); letter-spacing: 0.1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ev-chip b {
  color: var(--accent); font-weight: 700;
}
.ev-chip span {
  color: var(--ink-2); font-weight: 500;
}

/* Explainability — collapsible "why this reasoning" */
.explain-d {
  margin-top: 6px;
  font-size: 11px;
}
.explain-d > summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted); font-weight: 600;
  letter-spacing: 0.4px; text-transform: uppercase;
  font-size: 9.5px;
  user-select: none;
}
.explain-d > summary::-webkit-details-marker { display: none; }
.explain-d > summary::before {
  content: "▸ "; color: var(--accent); font-weight: 700;
  transition: transform 0.12s; display: inline-block;
}
.explain-d[open] > summary::before { content: "▾ "; }
.explain-d > summary:hover { color: var(--ink); }
.explain-body {
  margin-top: 4px; padding: 6px 10px;
  background: var(--bg-2); border-left: 2px solid var(--accent);
  color: var(--ink-2); font-size: 11.5px; line-height: 1.5;
  font-style: italic;
}
@media (max-width: 900px) {
  .insights-actions { grid-template-columns: 1fr; }
  .insights-actions .ia-col + .ia-col { border-left: 0; border-top: 1px solid var(--line); }
}

/* ============== HOW IT WORKS · flow diagram + voice loop ============== */
.flow-grid {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr;
  gap: 8px; align-items: stretch;
}
.flow-box {
  background: #fff; border: 1px solid var(--line);
  padding: 14px 16px;
  border-top: 3px solid var(--accent);
}
.flow-box.layer-1 { border-top-color: var(--muted); }
.flow-box.layer-2 { border-top-color: var(--good); }
.flow-box.layer-3 { border-top-color: var(--accent); }
.flow-box.layer-4 { border-top-color: var(--ink); }
.flow-box .flow-eyebrow {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); font-weight: 800; margin-bottom: 6px;
}
.flow-box h4 {
  font-family: var(--serif); font-size: 13.5px; color: var(--ink);
  font-weight: 700; margin: 0 0 8px; line-height: 1.3;
}
.flow-box ul { list-style: none; padding: 0; margin: 0; font-size: 11.5px; line-height: 1.55; }
.flow-box ul li {
  padding: 4px 0; border-top: 1px dashed var(--line);
  color: var(--body);
}
.flow-box ul li:first-child { border-top: 0; }
.flow-box ul li code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; padding: 1px 4px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2);
}
.flow-arrow {
  align-self: center; font-size: 22px; color: var(--muted-2);
  text-align: center; font-weight: 600;
}
@media (max-width: 1100px) {
  .flow-grid { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); padding: 4px 0; }
}

.voice-loop { display: flex; flex-direction: column; gap: 4px; max-width: 720px; }
.vl-step {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 10px 14px; background: var(--bg-2); border-left: 3px solid var(--accent);
}
.vl-step .vl-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; flex-shrink: 0;
}
.vl-step .vl-body strong {
  font-family: var(--serif); font-size: 13px; color: var(--ink);
}
.vl-step code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; padding: 1px 4px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
}
.vl-arrow {
  color: var(--muted-2); font-size: 18px; padding-left: 13px;
  font-weight: 600;
}

/* ============== SEMANTIC SEARCH (Customer 360) ============== */
.sem-search {
  background: #fff; border: 1px solid var(--line);
  border-top: 2px solid var(--ink);
  padding: 18px 22px 16px; margin-bottom: 22px;
}
.sem-search .ss-head { margin-bottom: 10px; }
.sem-search .ss-eyebrow {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent); font-weight: 800; margin-bottom: 4px;
}
.sem-search .ss-title {
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  font-weight: 600; line-height: 1.3;
}
.sem-search .ss-input-row { display: flex; gap: 8px; }
.sem-search .ss-input-row input { flex: 1; font-size: 13.5px; padding: 10px 12px; }
.sem-search .ss-chips {
  margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px;
}
.sem-search .ss-chips .chip { font-size: 10.5px; padding: 3px 9px; }
.sem-search .ss-results { margin-top: 14px; }
.sem-search .ss-loading {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--accent); padding: 8px 0;
}
.sem-search ul.ss-list { list-style: none; padding: 0; margin: 0; }
.sem-search ul.ss-list li {
  display: grid; grid-template-columns: 44px 1fr 2fr 90px;
  gap: 14px; align-items: center;
  padding: 9px 0; border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
}
.sem-search ul.ss-list li:last-child { border-bottom: 0; }
.sem-search .ss-score {
  font-family: var(--serif); font-weight: 800; font-size: 14px;
  text-align: center; padding: 2px 0;
  background: var(--accent-soft); color: var(--accent);
  letter-spacing: 0.4px;
}
.sem-search .ss-name { color: var(--ink); }
.sem-search .ss-why { color: var(--muted); font-style: italic; font-size: 11.5px; }
.sem-search .ss-open {
  font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--ink); font-weight: 700; cursor: pointer;
  border: 1px solid var(--line-2); padding: 4px 8px; text-align: center;
}
.sem-search .ss-open:hover { background: var(--bg-2); border-color: var(--ink); }

/* ============== AI BRIEFING CARDS (Customer 360) ============== */
.brief-card {
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--accent);
  padding: 14px 16px 12px; cursor: pointer; transition: box-shadow 0.14s, border-color 0.14s;
  display: flex; flex-direction: column; gap: 8px;
}
.brief-card:hover { border-color: var(--ink); box-shadow: 0 4px 14px rgba(5,28,44,0.06); }
.brief-card .bc-eyebrow {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent); font-weight: 800;
}
.brief-card .bc-title {
  font-family: var(--serif); font-size: 15px; color: var(--ink);
  font-weight: 700; line-height: 1.25;
}
.brief-card .bc-headline {
  font-family: var(--serif); font-size: 12.5px; color: var(--ink);
  font-weight: 600; line-height: 1.4;
}
.brief-card .bc-why { font-size: 11px; color: var(--muted); }
.brief-card .bc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.brief-card .bc-mini-h {
  font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 4px;
}
.brief-card .bc-cols ul {
  list-style: none; padding: 0; margin: 0; font-size: 11px; line-height: 1.45;
}
.brief-card .bc-cols ul li { padding: 3px 0; border-top: 1px dashed var(--line); }
.brief-card .bc-cols ul li:first-child { border-top: 0; }
.brief-card .bc-rec {
  background: var(--bg-2); padding: 6px 10px;
  font-size: 11px; color: var(--ink-2); border-left: 3px solid var(--good);
}
.brief-card .bc-cta {
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--ink); font-weight: 700;
}

/* ============== CUSTOMER MODAL · graph + briefing + playbook ============== */
.cust-row.has-graph { cursor: pointer; }
.cust-row.has-graph:hover { background: var(--bg-2); }
.cust-row .open-ind {
  font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}

#cust-backdrop {
  position: fixed; inset: 0; background: rgba(5,28,44,0.45);
  z-index: 1400; opacity: 0; pointer-events: none; transition: opacity 0.18s;
}
#cust-backdrop.open { opacity: 1; pointer-events: auto; }

#cust-panel {
  position: fixed; top: 0; right: -100%; width: min(880px, 96vw); height: 100vh;
  background: #fff; box-shadow: -12px 0 40px rgba(5,28,44,0.18);
  display: flex; flex-direction: column; z-index: 1500;
  transition: right 0.24s ease;
}
#cust-panel.open { right: 0; }
.cp-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line);
  background: #fff;
}
.cp-head h2 {
  font-family: var(--serif); font-size: 20px; color: var(--ink);
  margin: 4px 0 2px; font-weight: 600; letter-spacing: -0.005em;
}
.cp-head .cp-eyebrow {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent); font-weight: 800;
}
.cp-meta { font-size: 11.5px; }
.cp-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cp-body {
  flex: 1; overflow-y: auto; padding: 20px 22px 80px;
  background: var(--bg-2);
}
.cp-section {
  background: #fff; border: 1px solid var(--line);
  padding: 16px 18px; margin-bottom: 16px;
}
.cp-sec-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.cp-sec-head .cp-eyebrow {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent); font-weight: 800;
}
.cp-sec-head .cp-hint { color: var(--muted); font-size: 11px; }

/* Knowledge graph SVG */
.kg-stage { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 880px) { .kg-stage { grid-template-columns: 1fr; } }
.cust-graph { width: 100%; min-height: 360px; }
.cust-graph .kg-svg { width: 100%; height: 360px; display: block; }
.kg-node { cursor: pointer; transition: opacity 120ms ease; }
.kg-node:hover circle { fill-opacity: 0.45; }
.kg-node.active circle { fill-opacity: 0.55; stroke-width: 2.5; }
.kg-node.dim    { opacity: 0.30; }
.kg-edge { transition: stroke 120ms ease, opacity 120ms ease; }
.kg-edge.active { stroke: var(--accent) !important; stroke-width: 2 !important; stroke-dasharray: 0 !important; opacity: 1; }
.kg-edge.dim    { opacity: 0.20; }
.kg-edge-label.active { fill: var(--accent); font-weight: 700; }
.kg-edge-label.dim    { opacity: 0.20; }
.kg-node-label {
  font-size: 10.5px; fill: var(--ink-2); font-family: var(--sans);
  pointer-events: none;
}
.kg-edge-label {
  font-size: 8.5px; fill: var(--muted); font-family: var(--sans);
  pointer-events: none;
}

/* Click-to-inspect detail card */
.kg-node-detail {
  background: var(--card, #fff);
  border: 1px solid var(--line);
  padding: 12px 14px;
  font-size: 12.5px; line-height: 1.5;
  min-height: 360px;
}
.kg-nd-empty { color: var(--muted); font-style: italic; font-size: 12px; }
.kg-nd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.kg-nd-title { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; flex: 1; line-height: 1.25; }
.kg-nd-close { background: none; border: 0; font-size: 14px; color: var(--muted); cursor: pointer; padding: 0 4px; }
.kg-nd-close:hover { color: var(--ink); }
.kg-nd-sub { color: var(--muted); font-size: 11.5px; margin-bottom: 10px; }
.kg-nd-section { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; }
.kg-nd-h { font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.kg-nd-conns { list-style: none; padding: 0; margin: 0; }
.kg-nd-conns li { padding: 3px 0; display: flex; gap: 6px; align-items: baseline; }
.kg-conn-dir { color: var(--accent); font-weight: 700; }
.kg-conn-rel { color: var(--muted); font-size: 11px; font-style: italic; }
.kg-conn-target { color: var(--ink); font-weight: 600; }
.kg-nd-insight { color: var(--ink-2); }
.kg-nd-offline { color: var(--muted); font-weight: 500; font-size: 9px; letter-spacing: 0.6px; margin-left: 6px; text-transform: none; font-style: italic; }
.kg-nd-headline { font-family: var(--serif); font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; margin: 4px 0 6px; }
.kg-nd-sowhat { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.kg-nd-sowhat strong { color: var(--ink); }
.kg-nd-actions { list-style: none; padding: 0; margin: 0; }
.kg-nd-actions li { padding: 5px 0; border-top: 1px dashed var(--line); }
.kg-nd-actions li:first-child { border-top: 0; }
.kg-action-text { font-size: 12px; color: var(--ink); font-weight: 600; line-height: 1.4; }
.kg-action-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.kg-action-owner, .kg-action-when {
  font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 1px 6px; border: 1px solid var(--line); color: var(--muted); font-weight: 700;
}
.kg-action-when { color: var(--accent); border-color: var(--accent); }
.kg-center-name { font-family: Georgia, serif; font-size: 12px; font-weight: 700; }
.kg-center-sub  { font-size: 9.5px; }
.kg-legend {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
}
.kg-pill {
  font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 1px 7px; font-weight: 700; border: 1px solid;
}

/* Briefing block */
.cust-briefing .brief-headline {
  font-family: var(--serif); font-size: 15px; color: var(--ink);
  font-weight: 600; line-height: 1.35; margin-bottom: 8px;
}
.cust-briefing .brief-why { font-size: 12px; color: var(--muted); }
.cust-briefing .brief-mini-h {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 6px;
}
.cust-briefing .brief-col ul {
  list-style: none; padding: 0; margin: 0; font-size: 12px; line-height: 1.55;
}
.cust-briefing .brief-col ul li { padding: 4px 0; border-top: 1px dashed var(--line); }
.cust-briefing .brief-col ul li:first-child { border-top: 0; }
.cust-briefing .brief-rec {
  margin-top: 12px; padding: 10px 14px;
  background: var(--ink); color: #fff;
  border-left: 3px solid var(--good);
  font-size: 12.5px; line-height: 1.55;
}
.cust-briefing .brief-rec .ev-row { margin-top: 6px; }
.cust-briefing .brief-rec .ev-chip {
  background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30);
}
.cust-briefing .brief-rec .ev-chip b { color: #ffd54a; }
.cust-briefing .brief-rec .ev-chip span { color: #cbd5ff; }
.brief-row-text {
  font-weight: 600; color: var(--ink); line-height: 1.45;
}
.pl-row-text {
  font-weight: 600; color: var(--ink); line-height: 1.45;
}
.cust-briefing .brief-col li,
.cust-playbook ul li {
  padding-top: 6px; padding-bottom: 6px;
}

/* Playbook block */
.cust-playbook .pl-cols {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}
.cust-playbook .pl-col {
  background: var(--bg-2); padding: 10px 12px; border-left: 3px solid var(--accent);
}
.cust-playbook .pl-col:nth-child(2) { border-left-color: var(--warn); }
.cust-playbook .pl-col:nth-child(3) { border-left-color: var(--good); }
.cust-playbook .pl-h {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink); font-weight: 700; margin-bottom: 6px;
}
.cust-playbook ul {
  list-style: none; padding: 0; margin: 0; font-size: 12px; line-height: 1.5;
}
.cust-playbook ul li { padding: 4px 0; border-top: 1px dashed var(--line-2); }
.cust-playbook ul li:first-child { border-top: 0; }
.cust-playbook .pl-talk {
  margin-top: 12px; padding: 12px 14px; background: var(--accent-soft);
  border-left: 3px solid var(--accent);
}
.cust-playbook .pl-talk .pl-h { color: var(--accent); }
@media (max-width: 900px) {
  .cust-playbook .pl-cols { grid-template-columns: 1fr; }
}

/* ============== LEAFLET MAP HOST ============== */
.av-map {
  height: 380px; width: 100%; border: 1px solid var(--line);
  background: #eef2f6;
  position: relative; isolation: isolate; z-index: 0;
}
/* Keep Leaflet's internal panes / controls beneath modals & overlays.
   Leaflet defaults: panes 200–700, controls 800 — those overlapped #cust-panel. */
.av-map .leaflet-pane,
.av-map .leaflet-top,
.av-map .leaflet-bottom,
.av-map .leaflet-control { z-index: auto !important; }
.av-map .leaflet-popup-content {
  font-family: var(--sans); font-size: 12px; color: var(--ink-2);
  line-height: 1.5;
}
.av-map .leaflet-popup-content strong { color: var(--ink); }

/* ============== 360 VIEW CARDS (home page Operational tier) ============== */
.grid-360 { gap: 14px; margin-bottom: 24px; }
.card-360 {
  display: block; background: #fff; border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  padding: 18px 20px 14px; color: inherit;
  position: relative; transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
}
.card-360:hover {
  border-color: var(--ink); text-decoration: none;
  box-shadow: 0 4px 14px rgba(5,28,44,0.06);
}
.card-360 .c360-eyebrow {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent); font-weight: 800; margin-bottom: 6px;
}
.card-360 h3 {
  font-family: var(--serif); font-size: 15px; color: var(--ink);
  margin: 0 0 10px; font-weight: 600; letter-spacing: -0.005em;
}
.card-360 .c360-stats { font-size: 12px; color: var(--body); line-height: 1.6; }
.card-360 .c360-stats div { padding: 3px 0; border-top: 1px dashed var(--line); }
.card-360 .c360-stats div:first-child { border-top: 0; }
.card-360 .c360-stats strong { color: var(--ink); font-weight: 700; }
.card-360 .c360-cta {
  margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--ink); font-weight: 700;
}
.card-360:hover .c360-cta { color: var(--accent); }

/* Compact persona tile */
.tile-persona { padding: 12px 14px; }
.tile-persona .name { font-size: 14px; margin-bottom: 4px; }
.tile-persona .head { font-size: 11.5px; }

/* ============== PYRAMID NAVIGATOR (Strategic → Operational → Tactical) ============== */
.pyramid-nav {
  display: grid; grid-template-columns: 1.4fr 1.2fr 1fr;
  gap: 0; margin-bottom: 24px;
  background: #fff; border: 1px solid var(--line);
  position: relative;
}
.pyramid-nav .pyr-step {
  display: block; padding: 18px 22px;
  color: inherit; border-right: 1px solid var(--line);
  position: relative; transition: background 0.14s;
}
.pyramid-nav .pyr-step:last-child { border-right: 0; }
.pyramid-nav .pyr-step:hover { background: var(--bg-2); text-decoration: none; }
.pyramid-nav .pyr-step::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.pyramid-nav .pyr-1::before { background: var(--ink); }
.pyramid-nav .pyr-2::before { background: var(--accent); }
.pyramid-nav .pyr-3::before { background: var(--bad); }
.pyramid-nav .pyr-num {
  font-family: var(--serif); font-size: 11px;
  letter-spacing: 1.2px; color: var(--muted); font-weight: 700;
  margin-bottom: 4px;
}
.pyramid-nav .pyr-name {
  font-family: var(--serif); font-size: 18px; color: var(--ink);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
}
.pyramid-nav .pyr-sub {
  font-size: 11px; color: var(--muted); margin-top: 4px;
  letter-spacing: 0.2px;
}
.pyramid-nav .pyr-tags {
  margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px;
}
.pyramid-nav .pyr-tags span {
  font-size: 10px; padding: 2px 7px;
  background: var(--bg-2); color: var(--ink-2);
  border: 1px solid var(--line-2);
  letter-spacing: 0.3px; font-weight: 600;
}

/* ============== TIER DIVIDER (section chapter mark) ============== */
.tier-divider {
  display: flex; align-items: center; gap: 16px;
  padding: 28px 0 14px;
  margin: 22px 0 16px;
  border-top: 2px solid var(--ink);
  position: relative;
}
.tier-divider .td-num {
  font-family: var(--serif); font-size: 44px; color: var(--ink);
  font-weight: 600; line-height: 1; letter-spacing: -0.02em;
}
.tier-divider .td-text { flex: 1; }
.tier-divider .td-eyebrow {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); font-weight: 800; margin-bottom: 4px;
}
.tier-divider .td-headline {
  font-family: var(--serif); font-size: 18px; color: var(--ink);
  font-weight: 500; letter-spacing: -0.005em; line-height: 1.3;
}
.tier-divider .td-spine {
  width: 80px; height: 2px; background: var(--ink);
}
#tier-strategic { border-top-color: var(--ink); }
#tier-operational { border-top-color: var(--accent); }
#tier-operational .td-num { color: var(--accent); }
#tier-tactical { border-top-color: var(--bad); }
#tier-tactical .td-num { color: var(--bad); }
#tier-tactical .td-eyebrow { color: var(--bad); }

/* ============== KPI SPARKLINES ============== */
.kpi .spark {
  margin-top: 10px; height: 28px; position: relative;
}
.kpi .spark canvas { width: 100% !important; height: 28px !important; }

/* ============== PERFORMANCE TREE (hierarchy) ============== */
.tree { padding: 8px 4px 4px; }
.tree-root { display: flex; flex-direction: column; align-items: stretch; }
.tnode {
  background: #fff; border: 1px solid var(--line); padding: 10px 14px;
  position: relative;
}
.tnode-lbl {
  font-family: var(--serif); font-size: 13.5px; color: var(--ink);
  font-weight: 700;
}
.tnode-val {
  font-family: var(--serif); font-size: 14.5px; color: var(--ink);
  font-weight: 700; margin-top: 2px;
}
.tnode-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.tnode-tag {
  display: inline-block; margin-top: 4px;
  font-size: 9.5px; padding: 1px 7px; letter-spacing: 0.4px;
  text-transform: uppercase; font-weight: 700;
}
.tnode-tag.tag-pos { background: var(--good-soft); color: var(--good); }
.tnode-tag.tag-mid { background: var(--warn-soft); color: var(--warn); }
.tnode-tag.tag-neg { background: var(--bad-soft); color: var(--bad); }
.tnode.root {
  align-self: center; text-align: center; padding: 14px 30px;
  border-top: 3px solid var(--ink);
  min-width: 240px; margin-bottom: 20px;
}
.tnode.root .tnode-val { font-size: 22px; }
.tnode.mg, .tnode.sg {
  border-top: 3px solid var(--accent);
  padding: 12px 16px; margin-bottom: 14px;
}
.tnode.mg { border-top-color: var(--ink); }
.tnode.sg { border-top-color: var(--accent); }
.tnode.leaf {
  padding: 8px 12px;
  border-left: 3px solid var(--line-2);
}
.tnode.leaf:hover { border-left-color: var(--accent); }
.tnode.leaf .tnode-lbl { font-family: var(--sans); font-size: 12.5px; }
.tnode.leaf .tnode-val { font-family: var(--sans); font-size: 12px; color: var(--ink-2); font-weight: 600; margin-top: 2px; }
.tree-children {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
  position: relative;
  padding-top: 0;
}
.tree-root > .tree-children {
  position: relative;
}
.tree-root > .tree-children::before {
  content: ""; position: absolute; top: -16px; left: 50%;
  width: 1px; height: 16px; background: var(--line-2);
}
.tree-branch { display: flex; flex-direction: column; gap: 6px; }
.tree-branch > .tree-children {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding-left: 14px; border-left: 1px dashed var(--line-2);
}
@media (max-width: 900px) {
  .tree-children { grid-template-columns: 1fr; }
}

/* ============== RACI ROW (tactical owner strip) ============== */
.raci-row {
  display: grid; grid-template-columns: 90px 1.6fr 2.4fr 1.4fr 1.6fr;
  gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line);
  align-items: center; font-size: 12.5px;
}
.raci-row.head {
  background: var(--bg-2); font-weight: 700; color: var(--muted);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.1px;
}
.raci-row.sev-high { border-left: 3px solid var(--bad); padding-left: 15px; }
.raci-row.sev-medium { border-left: 3px solid var(--warn); padding-left: 15px; }
.raci-row.sev-low { border-left: 3px solid var(--good); padding-left: 15px; }
.raci-row .topic strong { font-family: var(--serif); font-size: 13px; font-weight: 700; color: var(--ink); }
.raci-row .why { color: var(--body); }
.raci-row .owner { display: flex; align-items: center; gap: 8px; }
.raci-row .owner-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--ink); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  border-radius: 50%;
}
.raci-row .owner-name { font-weight: 600; color: var(--ink-2); font-size: 11.5px; }
.raci-row .next { font-size: 11px; }
@media (max-width: 1100px) {
  .raci-row { grid-template-columns: 80px 1fr 1.4fr; }
  .raci-row > div:nth-child(4), .raci-row > div:nth-child(5) { display: none; }
}

/* ============== EXTERNAL NEWS TICKER ============== */
.newsticker {
  display: flex; align-items: stretch;
  background: var(--ink); color: #e6ecf2;
  border-bottom: 1px solid var(--ink);
  position: sticky; top: var(--topbar-h); z-index: 9;
  overflow: hidden;
  font-size: 12px;
}
.newsticker .nt-label {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px;
  background: #04162a;
  border-right: 1px solid #102538;
  white-space: nowrap;
  flex-shrink: 0;
}
.newsticker .nt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e8434a;
  box-shadow: 0 0 0 0 rgba(232,67,74,0.6);
  animation: nt-pulse 1.4s infinite;
  display: inline-block;
}
@keyframes nt-pulse {
  0% { box-shadow: 0 0 0 0 rgba(232,67,74,0.55); }
  100% { box-shadow: 0 0 0 8px rgba(232,67,74,0); }
}
.newsticker .nt-title {
  font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase;
  color: #9fb2c4; font-weight: 700;
}
.newsticker .nt-refresh {
  background: transparent; border: 0; color: #9fb2c4;
  font-size: 13px; cursor: pointer; margin-left: 4px; padding: 0 2px;
}
.newsticker .nt-refresh:hover { color: #fff; }
.newsticker .nt-rail {
  flex: 1; overflow: hidden; position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 60px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 60px), transparent 100%);
}
.newsticker .nt-track {
  display: inline-flex; gap: 0;
  white-space: nowrap;
  padding: 6px 16px;
  animation: nt-scroll 90s linear infinite;
  will-change: transform;
}
.newsticker .nt-track:hover { animation-play-state: paused; }
@keyframes nt-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.nt-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px;
  border-right: 1px solid #14283b;
  font-size: 12px;
}
.nt-item:last-child { border-right: 0; }
.nt-item .nt-cat {
  font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase;
  font-weight: 800; padding: 1px 6px;
  background: #14283b; color: #9fb2c4;
}
.nt-item .nt-imp {
  display: inline-block; width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.nt-item .nt-imp.pos { border-bottom: 7px solid #4dc97f; }
.nt-item .nt-imp.neg { border-top: 7px solid #e8434a; }
.nt-item .nt-imp.mixed {
  width: 8px; height: 8px; border: 0; background: #d6a44a;
  transform: rotate(45deg);
}
.nt-item .nt-head {
  color: #e6ecf2; font-weight: 600;
}
.nt-item .nt-head a { color: inherit; }
.nt-item .nt-head a:hover { color: #fff; text-decoration: underline; }
.nt-item .nt-why {
  color: #9fb2c4; font-style: italic;
  margin-left: 4px;
}
.nt-item .nt-src {
  color: #6a8197; font-size: 10px; letter-spacing: 0.4px;
}
.nt-item.muted { color: #9fb2c4; font-style: italic; }
.newsticker[data-state="loading"] .nt-track { animation: none; }

/* =========================================================
   ONTOLOGY · transformation thesis (flow + 4 story panels)
   ========================================================= */

/* ---- Hero flow strip (4 chapters with arrows) ---- */
.flow-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0 0 22px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(5,28,44,.04);
}
.flow-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  background: linear-gradient(180deg, #fafbfd 0%, #fff 60%);
  border-bottom: 1px solid var(--line);
}
.flow-col {
  position: relative;
  padding: 18px 22px 16px;
  border-right: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: background .14s;
}
.flow-col:last-child { border-right: 0; }
.flow-col:hover {
  background: linear-gradient(180deg, var(--accent-soft) 0%, #fff 80%);
  text-decoration: none;
}
.flow-step {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  margin-bottom: 6px;
}
.flow-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px;
  color: #fff; font-size: 16px; font-weight: 700;
  margin-bottom: 8px;
}
.flow-label {
  font-size: 11px; letter-spacing: 2px; font-weight: 700;
  color: var(--ch-color, var(--ink));
  margin-bottom: 2px;
}
.flow-head {
  font-family: var(--serif);
  font-size: 15px; font-weight: 700; line-height: 1.2;
  color: var(--ink);
  margin-bottom: 10px;
}
.flow-kpi {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 10px;
  padding: 6px 10px;
  background: var(--bg-2);
  border-left: 3px solid var(--ch-color, var(--accent));
  border-radius: 0 3px 3px 0;
}
.flow-kpi-val {
  font-family: var(--serif);
  font-size: 22px; font-weight: 700;
  color: var(--ch-color, var(--ink));
  line-height: 1;
}
.flow-kpi-unit { font-size: 11px; color: var(--muted); }
.flow-terms { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; min-height: 48px; }
.flow-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 10.5px; font-weight: 600;
  color: var(--ink-2);
}
.flow-chip-more {
  background: var(--ch-color, var(--ink));
  border-color: var(--ch-color, var(--ink));
  color: #fff;
}
.flow-owner {
  font-size: 11px;
  border-top: 1px dashed var(--line);
  padding-top: 6px;
  margin-top: 4px;
  line-height: 1.4;
}
.flow-arrow {
  position: absolute;
  top: 56px; right: -10px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 9px;
  color: var(--ink-2);
  z-index: 2;
}

/* ---- Funding + people bars under the flow ---- */
.flow-funding, .flow-people {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  align-items: center;
  background: #fafbfd;
}
.flow-people { background: #fff; }
.flow-funding-label {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.flow-funding-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.funding-chip, .people-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 11px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .14s, background .14s;
}
.funding-chip:hover, .people-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  text-decoration: none;
}
.funding-chip strong, .people-chip strong { font-size: 11.5px; }
.people-chip .muted { font-size: 10.5px; }

/* ---- Story panels (4 chapters) ---- */
.story-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0 0 18px;
  overflow: hidden;
  scroll-margin-top: 80px;
  border-top: 4px solid var(--ch-color, var(--accent));
}
.sp-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 14px; align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fafbfd 0%, #fff 100%);
}
.sp-step {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.sp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px;
  color: #fff; font-size: 18px; font-weight: 700;
}
.sp-title-block { min-width: 0; }
.sp-title {
  font-family: var(--serif);
  font-size: 19px; font-weight: 700; line-height: 1.18;
  margin: 0;
}
.sp-tag { font-size: 12.5px; margin-top: 4px; line-height: 1.45; }
.sp-kpi { text-align: right; min-width: 130px; }
.sp-kpi-val {
  font-family: var(--serif);
  font-size: 24px; font-weight: 700;
  color: var(--ch-color, var(--ink));
  line-height: 1;
}
.sp-kpi-unit { font-size: 11px; margin-top: 4px; }

.sp-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
}
.sp-narrative {
  padding: 18px 22px;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
}
.sp-narr-h {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  margin-bottom: 8px;
}
.sp-narrative p {
  font-size: 13px; line-height: 1.55; margin: 0 0 14px;
  color: var(--ink);
}
.sp-narr-owner {
  font-size: 11.5px;
  color: var(--ink-2);
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-weight: 600;
}

.sp-terms { padding: 18px 22px; }
.sp-terms-h {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  margin-bottom: 10px;
}
.sp-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.sp-hero {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ch-color, var(--accent));
  border-radius: 4px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: box-shadow .14s, transform .14s;
}
.sp-hero:hover {
  box-shadow: 0 4px 12px rgba(5,28,44,.08);
  transform: translateY(-1px);
  text-decoration: none;
}
.sp-hero-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 4px;
}
.sp-hero-term {
  font-family: var(--serif);
  font-size: 13.5px; font-weight: 700;
  color: var(--ink);
}
.sp-hero-cat {
  font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.sp-hero-def { font-size: 11.5px; line-height: 1.4; }

.sp-sup { margin-top: 16px; }
.sp-sup > summary {
  cursor: pointer;
  font-size: 11.5px; font-weight: 700;
  color: var(--accent);
  padding: 6px 0;
  list-style: none;
}
.sp-sup > summary::-webkit-details-marker { display: none; }
.sp-sup > summary::before { content: "▶"; font-size: 9px; margin-right: 6px; transition: transform .14s; display: inline-block; }
.sp-sup[open] > summary::before { transform: rotate(90deg); }
.sp-sup-grid { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 8px; }
.sp-sup-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  font-size: 11px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.sp-sup-chip strong { font-weight: 600; }
.sp-sup-chip .muted { font-size: 9.5px; letter-spacing: 0.3px; text-transform: uppercase; }
.sp-sup-chip:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }

/* ---- Term drawer (right-side slide-out) ---- */
.term-drawer-bg {
  position: fixed; inset: 0;
  background: rgba(5,28,44,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .18s;
  z-index: 99;
}
.term-drawer-bg.open { opacity: 1; pointer-events: auto; }
.term-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 420px; max-width: 92vw;
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(5,28,44,.12);
  padding: 22px 22px 18px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .22s ease;
  z-index: 100;
}
.term-drawer.open { transform: translateX(0); }
.td-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.td-cat {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  margin-bottom: 4px;
}
.td-term {
  font-family: var(--serif);
  font-size: 22px; font-weight: 700; line-height: 1.15;
  color: var(--ink);
}
.td-close {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  border-radius: 4px;
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 13px;
}
.td-close:hover { background: var(--bg-2); }
.td-def {
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink);
  padding: 0 0 12px;
  border-bottom: 1px dashed var(--line);
}
.td-domains { padding: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.td-impl { margin-top: 14px; }
.td-actions {
  display: flex; gap: 6px;
  position: sticky; bottom: 0;
  padding-top: 14px;
  background: linear-gradient(180deg, transparent 0%, #fff 30%);
}

/* ---- Reference glossary fold ---- */
.glossary-fold {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 18px 0 30px;
}
.glossary-fold > summary {
  cursor: pointer;
  padding: 14px 22px;
  list-style: none;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.glossary-fold > summary::-webkit-details-marker { display: none; }
.glossary-fold > summary::before {
  content: "▶";
  font-size: 9px;
  color: var(--muted);
  margin-right: 8px;
  transition: transform .14s;
  display: inline-block;
}
.glossary-fold[open] > summary::before { transform: rotate(90deg); }
.cat-details {
  border-top: 1px solid var(--line);
  background: #fff;
}
.cat-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  transition: background .14s;
}
.cat-summary::-webkit-details-marker { display: none; }
.cat-summary::before { content: "▶"; font-size: 8px; color: var(--muted); transition: transform .14s; }
.cat-details[open] > .cat-summary::before { transform: rotate(90deg); }
.cat-summary:hover { background: var(--bg-2); }
.cat-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cat-count {
  background: var(--ink); color: #fff;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 3px;
}
.hero-dot { color: #ffb500; font-size: 12px; margin-left: 4px; }
.ont-row.is-hero td:first-child { background: linear-gradient(90deg, #fffbe6 0%, transparent 100%); }

@media (max-width: 980px) {
  .flow-strip { grid-template-columns: 1fr 1fr; }
  .flow-col:nth-child(2) { border-right: 0; }
  .flow-col:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .flow-arrow { display: none; }
  .sp-body { grid-template-columns: 1fr; }
  .sp-narrative { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* =========================================================
   OVERVIEW · "not a dashboard, agentic decision system"
   ========================================================= */

/* ---- 3-step thesis bar (Reporting → Analytics → Agentic) ---- */
.ov-thesis {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.4fr;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 0 0 18px;
  box-shadow: 0 1px 3px rgba(5,28,44,.04);
}
.ov-thesis-l, .ov-thesis-m, .ov-thesis-r {
  padding: 8px 14px;
  border-left: 3px solid var(--line-2);
  position: relative;
}
.ov-thesis-r {
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-soft) 0%, #fff 80%);
  border-radius: 0 4px 4px 0;
}
.ov-thesis-lbl {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  margin-bottom: 4px;
}
.ov-thesis-r .ov-thesis-lbl { color: var(--accent); }
.ov-thesis-q {
  font-family: var(--serif); font-size: 15px;
  color: var(--ink); font-weight: 600; line-height: 1.3;
}
.ov-thesis-q strong { color: var(--accent); }
.ov-thesis-arrow { color: var(--muted-2); font-size: 22px; font-weight: 700; }
.ov-thesis-pill {
  display: inline-block;
  margin-top: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 9px; border-radius: 99px;
}

/* ---- BI vs Agentic comparison ---- */
.cmp-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
}
.cmp-col {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.cmp-bi { border-top: 4px solid #8a99ab; }
.cmp-ag { border-top: 4px solid var(--accent); }
.cmp-h {
  padding: 14px 18px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.cmp-ag .cmp-h { background: var(--accent-soft); }
.cmp-lbl {
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  margin-bottom: 4px;
}
.cmp-ag .cmp-lbl { color: var(--accent); }
.cmp-q {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  font-style: italic;
  font-weight: 600;
}
.cmp-list {
  list-style: none;
  margin: 0; padding: 0;
}
.cmp-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
  align-items: baseline;
}
.cmp-list li:last-child { border-bottom: 0; }
.cmp-list li span {
  font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.cmp-list li b { font-weight: 600; color: var(--ink); }
.cmp-ag .cmp-list li b { color: var(--ink); }

.cmp-vs {
  align-self: center;
  font-family: var(--serif);
  font-size: 22px; font-weight: 700;
  color: var(--muted-2);
  padding: 0 8px;
}

.cmp-callout {
  margin-top: 18px;
  padding: 16px 20px;
  background: linear-gradient(90deg, #fffbe8 0%, #fff 60%);
  border-left: 4px solid #ffb500;
  border-radius: 4px;
}
.cmp-callout-h {
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #8a6a00; font-weight: 700;
  margin-bottom: 6px;
}
.cmp-callout p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); }
.cmp-callout code {
  background: #fff;
  border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
}

/* ---- The agent loop diagram ---- */
.loop-diagram {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 0;
}
.loop-row {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.loop-node {
  width: 100%;
  max-width: 580px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  text-align: center;
  position: relative;
}
.loop-node.node-wide { max-width: 640px; }
.lp-step {
  position: absolute;
  top: -10px; left: 14px;
  background: var(--ink);
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px;
}
.lp-title {
  font-family: var(--serif);
  font-size: 14px; font-weight: 700; color: var(--ink);
  margin-bottom: 4px; margin-top: 4px;
}
.lp-eg { font-size: 12px; line-height: 1.5; }
.lp-eg b { color: var(--ink); font-weight: 700; }
.lp-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px; font-weight: 700;
}

.node-q { background: linear-gradient(180deg, var(--accent-soft) 0%, #fff 80%); border-color: #cfdcff; }
.node-op { background: #fff; border-left: 4px solid var(--accent); }
.node-kb { background: #fafbfd; border-left: 4px solid #8a99ab; }
.node-llm {
  background: linear-gradient(180deg, #fff5e8 0%, #fff 80%);
  border-left: 4px solid #ff9000;
}
.node-llm .lp-step { background: #ff7a00; }
.node-out {
  background: #f0fbf3;
  border-left: 4px solid #1e9e5a;
}
.node-out .lp-step { background: #15823f; }

.loop-arrow {
  font-size: 20px; color: var(--muted-2);
  padding: 6px 0;
  font-weight: 700;
}
.loop-arrow-center { padding: 10px 0; }

.loop-fanin {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 0;
}
.loop-fanin-arrow { color: var(--muted-2); font-size: 22px; line-height: 1; }
.loop-three {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.loop-three .loop-node { max-width: none; }

.out-chip {
  display: inline-block;
  background: #fff;
  border: 1px solid #b9e3c5;
  color: #0e7034;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  margin: 3px 3px 0 0;
}

.loop-feedback {
  margin-top: 14px;
  padding: 10px 16px;
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  display: flex; align-items: center; gap: 12px;
  max-width: 720px;
}
.lp-fb-arrow {
  font-size: 24px; color: var(--accent);
  font-weight: 700;
}
.lp-fb-text { font-size: 12px; color: var(--ink-2); line-height: 1.5; }

/* ---- The 3 layers ---- */
.layer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.layer-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--lc, var(--accent));
  border-radius: 6px;
  padding: 16px 18px;
  position: relative;
  display: flex; flex-direction: column;
}
.lc-num {
  position: absolute;
  top: 10px; right: 14px;
  font-family: var(--serif);
  font-size: 28px; font-weight: 700;
  color: var(--lc, var(--accent));
  opacity: 0.18;
}
.lc-name {
  font-family: var(--serif);
  font-size: 17px; font-weight: 700;
  color: var(--ink);
}
.lc-sub {
  font-size: 11px; letter-spacing: 0.4px;
  margin-bottom: 10px;
}
.lc-body { font-size: 12.5px; line-height: 1.55; flex: 1; }
.lc-body p { margin: 0 0 8px; }
.lc-body ul { margin: 0 0 8px; padding-left: 18px; }
.lc-body li { margin-bottom: 4px; }
.lc-body code {
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 1px 5px; border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}
.lc-link {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700; font-size: 11.5px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}

.stack-equation {
  display: flex; align-items: stretch; justify-content: center;
  gap: 10px;
  padding: 18px;
  background: linear-gradient(90deg, #fafbfd 0%, #fff 50%, #fafbfd 100%);
  border: 1px solid var(--line);
  border-radius: 6px;
  flex-wrap: wrap;
}
.se-part {
  text-align: center;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  min-width: 140px;
}
.se-part-out {
  background: linear-gradient(180deg, var(--accent) 0%, #1b46d6 100%);
  color: #fff;
  border-color: var(--accent);
  min-width: 180px;
}
.se-part-out .se-d { color: #cfdcff; }
.se-h {
  font-family: var(--serif);
  font-size: 14px; font-weight: 700; color: var(--ink);
  margin-bottom: 4px;
}
.se-part-out .se-h { color: #fff; }
.se-d { font-size: 11px; letter-spacing: 0.2px; }
.se-op {
  align-self: center;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--muted-2);
  font-weight: 700;
  padding: 0 4px;
}

/* ---- "What it unlocks" prompt cards ---- */
.unlock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.unlock-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 14px 16px;
  position: relative;
}
.uc-num {
  position: absolute;
  top: 10px; right: 12px;
  font-family: var(--serif);
  font-size: 22px; color: var(--accent);
  opacity: 0.35;
}
.uc-h {
  font-family: var(--serif);
  font-size: 14.5px; font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.uc-prompt {
  background: var(--bg-2);
  border-left: 3px solid var(--muted-2);
  padding: 6px 10px;
  border-radius: 0 3px 3px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.uc-prompt b { font-style: normal; color: var(--ink); }
.uc-prompt code {
  background: #fff; border: 1px solid var(--line);
  padding: 0 4px; border-radius: 2px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-style: normal;
}
.uc-why { font-size: 12px; line-height: 1.5; }
.uc-why b { color: var(--ink); }
.uc-why code {
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 0 4px; border-radius: 2px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}

/* ---- TL;DR ---- */
.ov-tldr {
  background: linear-gradient(135deg, #051c2c 0%, #1f3a8a 100%);
  color: #fff;
  border-radius: 6px;
  padding: 28px 32px;
  margin: 20px 0 30px;
  text-align: center;
}
.ov-tldr-eyebrow {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: #9fb2c4; font-weight: 700;
  margin-bottom: 10px;
}
.ov-tldr-text {
  font-family: var(--serif);
  font-size: 17px; line-height: 1.5;
  color: #fff;
}
.ov-tldr-text em { font-style: italic; color: #ffd366; }
.ov-tldr-text strong { color: #fff; }
.ov-tldr-actions {
  margin-top: 18px;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.ov-tldr-actions .btn { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.ov-tldr-actions .btn:hover { background: rgba(255,255,255,.16); }
.ov-tldr-actions .btn.primary { background: #fff; color: var(--ink); border-color: #fff; }

@media (max-width: 980px) {
  .ov-thesis { grid-template-columns: 1fr; }
  .ov-thesis-arrow { transform: rotate(90deg); justify-self: center; }
  .cmp-grid { grid-template-columns: 1fr; }
  .cmp-vs { transform: rotate(90deg); padding: 0; }
  .loop-three { grid-template-columns: 1fr; }
  .loop-fanin { flex-direction: column; }
  .loop-fanin-arrow { transform: rotate(90deg); }
  .stack-equation { flex-direction: column; }
  .se-op { transform: rotate(90deg); }
}

/* ---- "Start here · Overview" sidebar entry ---- */
.nav-overview {
  display: flex; align-items: center; gap: 10px;
  margin: 0 12px 14px;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--accent) 0%, #1b46d6 100%);
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  transition: transform .14s, box-shadow .14s;
}
.nav-overview:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34,81,255,.3);
  color: #fff;
}
.nav-overview.active {
  box-shadow: 0 0 0 2px rgba(255,255,255,.4) inset;
}
.nv-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: rgba(255,255,255,.18);
  border-radius: 4px;
  font-size: 11px;
  flex-shrink: 0;
}
.nv-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nv-title { font-weight: 700; font-size: 12px; }
.nv-sub { font-size: 10px; color: #cfdcff; letter-spacing: 0.2px; }

/* =================================================================
   OVERVIEW · Tabs
   ================================================================= */
.ov-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0 20px;
}
.ov-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink-2);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ov-tab:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.ov-tab.active {
  background: linear-gradient(180deg, #051c2c 0%, #1f3a8a 100%);
  border-color: #051c2c;
  color: #fff;
  box-shadow: 0 6px 18px rgba(5,28,44,0.18);
}
.ov-tab-num {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  opacity: 0.7;
  flex-shrink: 0;
}
.ov-tab.active .ov-tab-num { color: #ffd366; opacity: 1; }
.ov-tab-text { display: flex; flex-direction: column; min-width: 0; }
.ov-tab-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.ov-tab.active .ov-tab-title { color: #fff; }
.ov-tab-sub {
  font-size: 10.5px;
  letter-spacing: 0.2px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}
.ov-tab.active .ov-tab-sub { color: #cfdcff; }

.ov-pane { display: none; }
.ov-pane.active { display: block; animation: ovFade .25s ease; }
@keyframes ovFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .ov-tabs { grid-template-columns: 1fr; }
}

/* =================================================================
   OVERVIEW · AD value chain strip (above the 3 pillars)
   ================================================================= */
.vc-strip {
  background: linear-gradient(135deg, #051c2c 0%, #1f3a8a 100%);
  color: #fff;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.vc-head {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: #cfdcff;
  margin-bottom: 10px;
  font-weight: 600;
}
.vc-flow {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.vc-node {
  flex: 1 1 0;
  min-width: 160px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 6px;
  padding: 10px 12px;
  position: relative;
}
.vc-k {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #cfdcff;
  font-weight: 700;
}
.vc-v {
  font-family: var(--serif);
  font-size: 12px;
  color: #fff;
  margin-top: 4px;
  line-height: 1.35;
}
.vc-tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 9.5px;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--vt, var(--accent));
  color: #fff;
}
.vc-arrow {
  display: flex; align-items: center;
  color: #6a7c8e;
  font-size: 18px;
  font-weight: 700;
  flex: 0 0 auto;
}

/* =================================================================
   OVERVIEW · 3 Big Bets pillars
   ================================================================= */
.bigbet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.bigbet-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--bb, var(--accent));
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.bb-head {
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, #fafbfd 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
}
.bb-tag {
  display: inline-block;
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--bb, var(--accent));
  font-weight: 700;
  margin-bottom: 6px;
}
.bb-name {
  font-family: var(--serif);
  font-size: 17px; font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 4px;
}
.bb-sub { font-size: 11.5px; }
.bb-body {
  padding: 12px 16px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  flex: 1;
  display: flex; flex-direction: column;
}
.bb-section-h {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 6px 0 4px;
}
.bb-body ul { margin: 0 0 6px; padding-left: 16px; }
.bb-body li { margin-bottom: 3px; }
.bb-value li { color: var(--ink-2); }
.bb-value li b { color: var(--bb, var(--accent)); font-weight: 700; }
.bb-metric {
  margin-top: auto;
  background: var(--bg-2);
  border-left: 3px solid var(--bb, var(--accent));
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin-top: 10px;
}
.bb-metric-h {
  font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.bb-metric-v {
  font-family: var(--serif);
  font-size: 18px; font-weight: 700; color: var(--bb, var(--accent));
  margin: 2px 0;
}
.bb-metric-d { font-size: 11px; line-height: 1.4; }

/* Per-pillar agent flow strip */
.bb-flow {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.bf-step {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 2px solid var(--bb, var(--accent));
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.bf-step.bf-end {
  background: var(--bb, var(--accent));
  color: #fff;
  border-color: var(--bb, var(--accent));
}
.bf-arrow {
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 700;
}

/* AD case-in-action spotlight */
.bb-spot {
  margin-top: auto;
  background: linear-gradient(135deg, #fafbfd 0%, #fff 100%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bb, var(--accent));
  border-radius: 0 4px 4px 0;
  padding: 10px 12px;
  margin-top: 12px;
}
.bb-spot-h {
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--bb, var(--accent));
  font-weight: 700;
  margin-bottom: 4px;
}
.bb-spot p {
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  font-style: italic;
}
.bb-spot p b { color: var(--ink); font-style: normal; }
.bb-value li em {
  font-style: italic;
  color: var(--ink);
}

/* =================================================================
   OVERVIEW · SIPOC for each pillar
   ================================================================= */
.sipoc-h {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 22px 0 4px;
}
.sipoc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 4px;
}
.sipoc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--sp, var(--accent));
  border-radius: 6px;
  overflow: hidden;
}
.sp-head {
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 12px;
}
.sp-tag {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sp, var(--accent));
  font-weight: 700;
}
.sp-name {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.sp-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.5;
}
.sp-row:last-child { border-bottom: 0; }
.sp-k {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  align-self: center;
}
.sp-v { color: var(--ink-2); }
.sp-row-proc { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.015) 100%); }
.sp-row-proc .sp-v {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sp-step {
  background: #fff;
  border: 1px solid var(--sp, var(--accent));
  color: var(--sp, var(--accent));
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.sp-arrow {
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 700;
}

/* =================================================================
   OVERVIEW · Agent collaboration board
   ================================================================= */
.collab-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.cb-col {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--cc, var(--accent));
  border-radius: 6px;
  padding: 10px 12px;
}
.cb-col-h {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.cb-agent {
  display: block;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cc, var(--accent));
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 5px;
}
.cb-agent:last-child { margin-bottom: 0; }

.collab-h {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 8px 0 8px;
}
.collab-list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.ch-row {
  display: grid;
  grid-template-columns: 180px 22px 180px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.ch-row:last-child { border-bottom: 0; }
.ch-row:hover { background: var(--bg-2); }
.ch-from, .ch-to {
  background: #fff;
  border: 1px solid var(--cc, var(--accent));
  color: var(--cc, var(--accent));
  border-radius: 3px;
  padding: 4px 8px;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}
.ch-arrow {
  text-align: center;
  font-weight: 700;
  color: var(--muted);
}
.ch-msg {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.ch-msg em {
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 1100px) {
  .collab-board { grid-template-columns: 1fr; }
  .ch-row {
    grid-template-columns: 1fr 22px 1fr;
    grid-template-rows: auto auto;
  }
  .ch-msg { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .sp-row { grid-template-columns: 1fr; gap: 2px; }
}

/* =================================================================
   OVERVIEW · Agent ecosystem ring diagram
   ================================================================= */
.ecosystem {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #fafbfd 0%, #fff 60%, #f5f7fb 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}
.eco-ring {
  position: relative;
  display: none; /* center merged into orbits column */
}
.eco-orbits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  position: relative;
}
.eco-center {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--accent) 0%, #1b46d6 100%);
  color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(34,81,255,.18);
  display: none;
}
.eco-orbits::before {
  content: "SCIKIQ";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--accent) 0%, #1b46d6 100%);
  color: #fff;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 50%;
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(34,81,255,.32);
  z-index: 2;
  border: 3px solid #fff;
  letter-spacing: 0.4px;
}
.eco-orbit {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 11.5px;
}
.eco-orbit-1 { border-top: 3px solid #1f8a4c; }
.eco-orbit-2 { border-top: 3px solid #7a3ea1; }
.eco-orbit-3 { border-top: 3px solid #2251ff; grid-column: 1 / -1; }
.eco-orbit-h {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 6px;
}
.eco-agents { display: flex; gap: 5px; flex-wrap: wrap; }
.eco-agent {
  background: #fff;
  border: 1px solid var(--ec, var(--accent));
  color: var(--ec, var(--accent));
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.eco-side {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
}
.eco-side-h {
  font-family: var(--serif);
  font-size: 12px; font-weight: 700; color: var(--ink);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.eco-side-list {
  list-style: none;
  margin: 0; padding: 0;
  font-size: 11.5px;
  line-height: 1.7;
}
.eco-side-list li { color: var(--ink-2); }
.eco-side-list li b { color: var(--ink); }

/* Registry table */
.registry-h {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin: 6px 0 8px;
}
.registry-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.registry {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  background: #fff;
}
.registry thead th {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.registry tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: middle;
}
.registry tbody tr:last-child td { border-bottom: 0; }
.registry tbody tr:hover { background: var(--bg-2); }
.registry .pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.pill-grow { background: #ebf6f0; color: #1f8a4c; }
.pill-data { background: #f1e8f7; color: #7a3ea1; }
.pill-marg { background: #eef2ff; color: #2251ff; }
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.dot-ok { background: #1f8a4c; box-shadow: 0 0 0 2px #ebf6f0; }
.dot-warn { background: #c98a1a; box-shadow: 0 0 0 2px #fdf5e6; }
.dot-off { background: #c0392b; box-shadow: 0 0 0 2px #fdecea; }

/* =================================================================
   OVERVIEW · Guardrails (Obs / Gov / Sec)
   ================================================================= */
.guard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.guard-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gc, var(--accent));
  border-radius: 6px;
  padding: 14px 16px;
  position: relative;
}
.gc-icon {
  position: absolute;
  top: 10px; right: 14px;
  font-size: 28px;
  color: var(--gc, var(--accent));
  opacity: 0.25;
  line-height: 1;
}
.gc-h {
  font-family: var(--serif);
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.gc-sub { font-size: 11.5px; margin-bottom: 10px; }
.gc-list {
  list-style: none;
  margin: 0; padding: 0;
  font-size: 12px;
  line-height: 1.5;
}
.gc-list li {
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--ink-2);
}
.gc-list li:last-child { border-bottom: 0; }
.gc-list li b { color: var(--gc, var(--accent)); }

/* Ring diagram */
.ring-diagram {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: center;
  background: linear-gradient(135deg, #fafbfd 0%, #fff 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
}
.ring {
  position: relative;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ring-outer {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(34,81,255,0) 60%, rgba(34,81,255,0.05) 100%);
  border: 2px dashed #2251ff;
  margin: 0 auto;
}
.ring-mid {
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(122,62,161,0) 60%, rgba(122,62,161,0.06) 100%);
  border: 2px dashed #7a3ea1;
}
.ring-inner {
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(31,138,76,0) 50%, rgba(31,138,76,0.07) 100%);
  border: 2px dashed #1f8a4c;
}
.ring-core {
  width: 100px; height: 100px;
  background: linear-gradient(135deg, var(--accent) 0%, #1b46d6 100%);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(34,81,255,.25);
}
.ring-core-h {
  font-family: var(--serif);
  font-size: 16px; font-weight: 700;
}
.ring-core-sub {
  font-size: 9.5px;
  color: #cfdcff;
  padding: 0 6px;
  line-height: 1.2;
  margin-top: 2px;
}
.ring-label {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid var(--line);
}
.ring-outer > .ring-label { color: #2251ff; border-color: #2251ff; }
.ring-mid > .ring-label { color: #7a3ea1; border-color: #7a3ea1; }
.ring-inner > .ring-label { color: #1f8a4c; border-color: #1f8a4c; }

.ring-side-h {
  font-family: var(--serif);
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin-bottom: 6px;
}
.ring-side-list {
  list-style: none;
  margin: 0; padding: 0;
  font-size: 11.5px;
  line-height: 1.55;
}
.ring-side-list li {
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--ink-2);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
}
.ring-side-list li:last-child { border-bottom: 0; }
.ring-side-list li span {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}

/* =================================================================
   OVERVIEW · Demo · Agent 365 in action
   ================================================================= */
.demo-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr) auto;
  grid-auto-flow: column;
  gap: 6px;
  align-items: stretch;
  margin-bottom: 14px;
  overflow-x: auto;
}
.demo-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.demo-step {
  flex: 1 1 0;
  min-width: 180px;
  display: flex;
  align-items: stretch;
  position: relative;
}
.demo-num {
  background: var(--ink);
  color: #fff;
  width: 26px;
  border-radius: 4px 0 0 4px;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
}
.demo-box {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 4px 4px 0;
  padding: 10px 12px;
  font-size: 11.5px;
}
.demo-box-policy { background: #f1e8f7; }
.demo-box-route { background: #eef2ff; }
.demo-box-tools { background: #fdf5e6; }
.demo-box-answer { background: #ebf6f0; }

.demo-h {
  font-family: var(--serif);
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  margin-bottom: 2px;
}
.demo-actor {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.demo-q {
  font-style: italic;
  font-family: var(--serif);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.4;
}
.demo-mini {
  list-style: none;
  margin: 0; padding: 0;
  font-size: 11px;
  line-height: 1.55;
}
.demo-mini li { color: var(--ink-2); }
.demo-mini li b { color: var(--ink); }
.demo-arrow {
  display: flex; align-items: center;
  color: var(--muted-2);
  font-size: 18px;
  font-weight: 700;
  padding: 0 1px;
  flex: 0 0 auto;
}
.demo-bul { display: flex; flex-direction: column; gap: 4px; }
.demo-bul .out-chip { display: inline-block; }

/* Monitor strip */
.demo-monitor {
  background: #051c2c;
  color: #fff;
  border-radius: 6px;
  padding: 14px 16px;
  margin-top: 6px;
}
.dm-h {
  font-family: var(--serif);
  font-size: 12.5px;
  color: #cfdcff;
  margin-bottom: 10px;
  font-style: italic;
}
.dm-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.dm-tile {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 8px 10px;
}
.dm-k {
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9fb2c4;
  font-weight: 700;
}
.dm-v {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  margin: 2px 0;
}
.dm-d { font-size: 10.5px; color: #9fb2c4; }
.demo-foot {
  margin-top: 10px;
  font-size: 11.5px;
  text-align: center;
}

@media (max-width: 1100px) {
  .bigbet-grid { grid-template-columns: 1fr; }
  .guard-grid { grid-template-columns: 1fr; }
  .ecosystem { grid-template-columns: 1fr; }
  .ring-diagram { grid-template-columns: 1fr; }
  .ring-outer { margin: 0 auto; }
  .dm-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .eco-orbits { grid-template-columns: 1fr; }
  .eco-orbit-3 { grid-column: auto; }
  .dm-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =================================================================
   OVERVIEW · Pricing model
   ================================================================= */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--pc, var(--accent));
  border-radius: 6px;
  padding: 14px 16px;
  display: flex; flex-direction: column;
}
.pc-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pc, var(--accent));
  font-weight: 700;
  margin-bottom: 6px;
}
.pc-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.pc-sub { font-size: 11.5px; margin-bottom: 10px; }
.pc-body { flex: 1; display: flex; flex-direction: column; }
.pc-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  font-size: 12px;
  line-height: 1.55;
}
.pc-list li {
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--ink-2);
}
.pc-list li:last-child { border-bottom: 0; }
.pc-list li b {
  display: inline-block;
  min-width: 92px;
  color: var(--pc, var(--accent));
  font-weight: 700;
}
.pc-foot {
  font-size: 11px;
  font-style: italic;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* SCIKIQ 4 Cs strip */
.four-cs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.fc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--fc, var(--accent));
  border-radius: 6px;
  padding: 12px 14px;
  position: relative;
}
.fc-letter {
  position: absolute;
  top: 6px; right: 10px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--fc, var(--accent));
  opacity: 0.18;
  line-height: 1;
}
.fc-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--fc, var(--accent));
  margin-bottom: 4px;
}
.fc-line {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* Licensing models */
.price-models-h {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 4px 0 10px;
}
.price-models {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.pm-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex; flex-direction: column;
}
.pm-card-featured {
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
  box-shadow: 0 6px 18px rgba(34,81,255,0.08);
}
.pm-flag {
  position: absolute;
  top: -10px; right: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
}
.pm-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.pm-icon {
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
}
.pm-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.pm-body { flex: 1; font-size: 12px; line-height: 1.5; }
.pm-body p { margin: 0 0 6px; color: var(--ink-2); }
.pm-body ul { margin: 0; padding-left: 16px; }
.pm-body li { margin-bottom: 3px; color: var(--ink-2); }
.pm-best {
  font-size: 11px;
  font-style: italic;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

/* Scope drivers */
.price-drivers {
  background: linear-gradient(135deg, #fafbfd 0%, #fff 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.pd-h {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  text-align: center;
}
.pd-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pd-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 14px;
  text-align: center;
  min-width: 140px;
}
.pd-tile-out {
  background: linear-gradient(135deg, var(--accent) 0%, #1b46d6 100%);
  color: #fff;
  border-color: var(--accent);
}
.pd-tile-out .pd-d { color: #cfdcff; }
.pd-k {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.pd-tile-out .pd-k { color: #cfdcff; }
.pd-v {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 2px 0;
}
.pd-tile-out .pd-v { color: #fff; }
.pd-d { font-size: 10.5px; line-height: 1.35; }
.pd-op {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--muted-2);
  font-weight: 700;
}

/* TCO table */
.price-tco {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
}
.tco-h {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.tco-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tco-table thead th {
  background: var(--bg-2);
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.tco-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.tco-table tbody tr:last-child td { border-bottom: 0; }
.tco-table tbody tr:hover { background: var(--bg-2); }

@media (max-width: 1100px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-models { grid-template-columns: 1fr; }
  .four-cs { grid-template-columns: repeat(2, 1fr); }
  .pd-grid { flex-direction: column; }
  .pd-op { transform: rotate(90deg); }
}
@media (max-width: 600px) {
  .four-cs { grid-template-columns: 1fr; }
}

/* =================================================================
   OVERVIEW · Mobile responsiveness (tablet → phone)
   ================================================================= */

/* Tablet portrait — sidebar already stacks at 900px globally */
@media (max-width: 980px) {
  .content { padding: 20px 18px 60px; max-width: 100%; }
  .topbar { padding: 0 16px; }
  .hero {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 4px 0 14px;
  }
  .hero .hero-text h1 { font-size: 22px; }
  .hero .hero-text .meta { font-size: 11.5px; }

  .exhibit-block .action-title { padding: 12px 14px; }
  .exhibit-block .action-title h2 { font-size: 15px; line-height: 1.3; }
  .exhibit-block .action-title .ex-num { font-size: 10px; }
  .exhibit-block .exhibit-content { padding: 14px 14px; }

  .ov-tab { padding: 10px 12px; gap: 8px; }
  .ov-tab-num { font-size: 18px; }
  .ov-tab-title { font-size: 13px; }
  .ov-tab-sub { font-size: 10px; }

  /* AD value chain becomes vertical */
  .vc-flow { flex-direction: column; }
  .vc-arrow { transform: rotate(90deg); justify-self: center; padding: 2px 0; }

  /* Per-pillar flow strip wraps tighter */
  .bb-flow { padding: 8px 12px; gap: 3px; }
  .bf-step { font-size: 10px; padding: 3px 6px; }

  /* Big bets cards stack — already in place, also reduce internal padding */
  .bb-head { padding: 12px 14px 10px; }
  .bb-body { padding: 10px 14px 12px; font-size: 12px; }
  .bb-name { font-size: 16px; }

  /* SIPOC row labels stack at narrower viewport */
  .sp-row { grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 12px; }
  .sp-row-proc .sp-v { gap: 4px; }

  /* Registry table — let it horizontally scroll, but make font tighter */
  .registry { font-size: 10.5px; }
  .registry thead th, .registry tbody td { padding: 6px 8px; }

  /* Ecosystem panel becomes single column */
  .ecosystem { padding: 14px; }
  .eco-orbits::before {
    position: static;
    transform: none;
    width: auto; height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 10px 14px;
    grid-column: 1 / -1;
  }

  /* Guardrails ring scales down */
  .ring-diagram { padding: 18px 14px; }
  .ring-outer { width: 280px; height: 280px; }
  .ring-mid { width: 210px; height: 210px; }
  .ring-inner { width: 140px; height: 140px; }
  .ring-core { width: 88px; height: 88px; }
  .ring-core-h { font-size: 14px; }
  .ring-core-sub { font-size: 9px; }

  /* Demo track becomes vertical */
  .demo-track { flex-direction: column; gap: 4px; }
  .demo-step { min-width: 0; width: 100%; }
  .demo-arrow { transform: rotate(90deg); justify-content: center; padding: 2px 0; }

  /* Monitor grid 3-col */
  .dm-grid { grid-template-columns: repeat(3, 1fr); }

  /* TLDR padding */
  .ov-tldr { padding: 20px 18px; }
  .ov-tldr-text { font-size: 14px; }
}

/* Phone */
@media (max-width: 720px) {
  .content { padding: 16px 14px 50px; }
  .topbar { padding: 0 12px; height: auto; min-height: var(--topbar-h); flex-wrap: wrap; gap: 4px; }
  .topbar .crumbs { font-size: 10.5px; line-height: 1.4; padding: 8px 0; }
  .topbar .top-actions a { margin-left: 10px; font-size: 9.5px; }

  .hero .hero-text h1 { font-size: 20px; }
  .hero .hero-text .eyebrow { font-size: 9.5px; }
  .hero .hero-text .meta { font-size: 11px; }

  .exhibit-block .action-title h2 { font-size: 14px; }
  .exhibit-block .exhibit-content { padding: 12px; }

  .ov-tab { padding: 10px 12px; }
  .ov-tab-num { font-size: 16px; }
  .ov-tab-title { font-size: 12.5px; }
  .ov-tab-sub { display: none; } /* hide sub label on tiny screens */

  /* Thesis triplet stacks */
  .ov-thesis { padding: 14px; gap: 8px; }
  .ov-thesis-q { font-size: 13px; }

  /* Compare grid */
  .cmp-grid { gap: 8px; }
  .cmp-col { padding: 10px; }
  .cmp-h { padding: 8px 10px; }

  /* Loop diagram fonts */
  .loop-node { padding: 10px 12px; }
  .lp-title { font-size: 13px; }
  .lp-eg { font-size: 11px; }

  /* Layer cards padding */
  .layer-card { padding: 12px 14px; }
  .lc-name { font-size: 15px; }
  .lc-num { font-size: 22px; }

  /* Unlock cards */
  .unlock-card { padding: 12px; }
  .uc-h { font-size: 13.5px; }

  /* Pillars + SIPOC tighter */
  .vc-strip { padding: 12px; }
  .vc-node { min-width: 0; padding: 8px 10px; }
  .vc-v { font-size: 11.5px; }

  .sp-head { flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; }
  .sp-row { grid-template-columns: 1fr; gap: 2px; padding: 8px 12px; }
  .sp-k { font-size: 9.5px; }
  .sp-v { font-size: 11.5px; }
  .sp-row-proc .sp-v { gap: 4px; }
  .sp-step { font-size: 10px; padding: 2px 6px; }

  /* Collab list — already restructured at 1100, ensure compact */
  .ch-row {
    grid-template-columns: 1fr 22px 1fr;
    gap: 6px;
    padding: 8px 10px;
    font-size: 11px;
  }
  .ch-from, .ch-to { font-size: 10px; padding: 3px 6px; }
  .ch-msg { font-size: 11px; }

  /* Guardrails ring shrinks more */
  .ring-outer { width: 240px; height: 240px; }
  .ring-mid { width: 180px; height: 180px; }
  .ring-inner { width: 120px; height: 120px; }
  .ring-core { width: 80px; height: 80px; }
  .ring-label { font-size: 9px; padding: 1px 8px; }
  .ring-side-list li { grid-template-columns: 60px 1fr; gap: 8px; font-size: 11px; }

  /* Demo monitor 2-col on phone */
  .dm-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .dm-v { font-size: 16px; }

  /* Pricing */
  .price-card { padding: 12px 14px; }
  .pc-name { font-size: 16px; }
  .pc-list { font-size: 11.5px; }
  .pc-list li b { min-width: 80px; font-size: 11px; }
  .pm-card { padding: 12px 14px; }
  .price-drivers { padding: 14px 12px; }
  .pd-tile { min-width: 0; width: 100%; padding: 10px 12px; }
  .tco-table { font-size: 11px; }
  .tco-table thead th, .tco-table tbody td { padding: 7px 8px; }

  /* TLDR */
  .ov-tldr { padding: 16px 14px; }
  .ov-tldr-text { font-size: 13px; }
  .ov-tldr-actions .btn { font-size: 11px; padding: 6px 10px; }

  /* Eco agents wrap nicely */
  .eco-agent { font-size: 10px; padding: 2px 7px; }

  /* Crumbs current text truncates on tiny widths */
  .topbar .crumbs .current {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
}

/* Tiny phones */
@media (max-width: 480px) {
  .content { padding: 14px 12px 50px; }
  .hero .hero-text h1 { font-size: 18px; line-height: 1.22; }
  .exhibit-block .action-title { padding: 10px 12px; }
  .exhibit-block .action-title h2 { font-size: 13.5px; }
  .exhibit-block .exhibit-content { padding: 10px; }

  /* Ring small enough not to overflow */
  .ring-outer { width: 200px; height: 200px; }
  .ring-mid { width: 150px; height: 150px; }
  .ring-inner { width: 100px; height: 100px; }
  .ring-core { width: 70px; height: 70px; }
  .ring-core-h { font-size: 12px; }
  .ring-core-sub { display: none; }

  .dm-grid { grid-template-columns: 1fr 1fr; }
  .dm-tile { padding: 6px 8px; }

  /* Collab row · stack from/to vertically */
  .ch-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 4px;
  }
  .ch-arrow { transform: rotate(90deg); width: 18px; justify-self: center; }
  .ch-from, .ch-to { width: 100%; }

  /* Demo boxes — full width with smaller num */
  .demo-num { width: 22px; padding-top: 8px; font-size: 12px; }
  .demo-box { padding: 8px 10px; font-size: 11px; }
  .demo-h { font-size: 12px; }

  /* SIPOC step chevrons wrap tightly */
  .sp-step { font-size: 9.5px; padding: 2px 5px; }
  .sp-arrow { font-size: 11px; }

  /* TLDR very tight */
  .ov-tldr-text { font-size: 12.5px; line-height: 1.45; }
}

/* Make any overflowing tables scroll instead of breaking layout */
.registry-wrap, .tco-table-wrap {
  -webkit-overflow-scrolling: touch;
}