/* ============================================================================
   Crelio marketing — product mock CSS.
   In-browser HTML mocks of the production app for hero + product-tour shots.
   ============================================================================ */

/* ── Shared sidebar (mini, in mock) ────────────────────────────────────── */
.m-shell {
  display: grid;
  grid-template-columns: 188px 1fr;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: -0.005em;
}
.m-shell.dark { color: rgba(255,255,255,0.92); }

.m-sidebar {
  background: #0A2039;
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 14px 10px;
  display: flex; flex-direction: column;
  gap: 16px;
}
.m-sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.m-sidebar .brand .mk {
  width: 22px; height: 22px;
  background: var(--brand-navy);
  border-radius: 6px;
  position: relative;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 11px; font-family: var(--font-sans);
}
.m-sidebar .brand .mk::after {
  content: "";
  position: absolute;
  top: 3px; right: 3px;
  width: 5px; height: 7px;
  background: var(--brand-sky);
  border-radius: 1px;
}
.m-sidebar .brand .nm {
  font-size: 13px; font-weight: 600;
  color: #fff;
  letter-spacing: -0.012em;
}
.m-sidebar .grp { display: flex; flex-direction: column; gap: 2px; }
.m-sidebar .grp-lab {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  padding: 4px 10px 6px;
  font-weight: 600;
}
.m-sidebar .nav-i {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px;
  border-radius: 6px;
  color: rgba(255,255,255,0.72);
  font-size: 12.5px;
  font-weight: 500;
}
.m-sidebar .nav-i .ic { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.75; }
.m-sidebar .nav-i.active {
  background: rgba(3,198,255,0.1);
  color: #fff;
}
.m-sidebar .nav-i.active .ic { color: var(--brand-sky); opacity: 1; }
.m-sidebar .nav-i .dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-sky); }

/* light variant */
.m-sidebar.light {
  background: #fff;
  border-right-color: rgba(1,49,124,0.08);
}
.m-sidebar.light .brand { border-bottom-color: rgba(1,49,124,0.08); }
.m-sidebar.light .brand .nm { color: var(--brand-navy); }
.m-sidebar.light .grp-lab { color: rgba(1,49,124,0.4); }
.m-sidebar.light .nav-i { color: rgba(1,49,124,0.72); }
.m-sidebar.light .nav-i.active { background: rgba(1,49,124,0.06); color: var(--brand-navy); }
.m-sidebar.light .nav-i.active .ic { color: var(--brand-navy); }

/* ── Topbar ────────────────────────────────────────────────────────────── */
.m-topbar {
  height: 42px;
  display: flex; align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 10px;
}
.m-shell.light .m-topbar { border-bottom-color: rgba(1,49,124,0.08); background: #fff; }
.m-topbar .crumb {
  display: flex; gap: 6px; align-items: center;
  font-size: 12px; color: rgba(255,255,255,0.5);
}
.m-topbar .crumb .here { color: rgba(255,255,255,0.92); }
.m-shell.light .m-topbar .crumb { color: rgba(1,49,124,0.5); }
.m-shell.light .m-topbar .crumb .here { color: var(--brand-navy); }
.m-topbar .search {
  flex: 1;
  height: 26px;
  max-width: 280px;
  margin: 0 auto;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 0 10px;
  display: flex; align-items: center;
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
  gap: 8px;
}
.m-shell.light .m-topbar .search { background: var(--bg-secondary); border-color: rgba(1,49,124,0.08); color: rgba(1,49,124,0.45); }
.m-topbar .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
}
.m-topbar .right { display: flex; align-items: center; gap: 8px; }
.m-topbar .icbtn { width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; color: rgba(255,255,255,0.5); }
.m-topbar .av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #5BD8FF, #01317C); }

/* ── Underwriting mock ─────────────────────────────────────────────────── */
.uw-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.uw-head .ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(3,198,255,0.1);
  color: var(--brand-sky);
  display: grid; place-items: center;
}
.uw-head .title {
  font-size: 14px; font-weight: 600; color: #fff;
  letter-spacing: -0.012em;
}
.uw-head .meta {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  display: flex; gap: 6px; align-items: center;
  margin-top: 2px;
}
.uw-head .meta .ok { color: oklch(0.76 0.14 150); }
.uw-head .meta .sep { color: rgba(255,255,255,0.2); }
.uw-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.uw-head .pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  border-radius: 999px;
  background: oklch(0.30 0.08 150 / 0.45);
  color: oklch(0.78 0.14 150);
  font-size: 11px; font-weight: 500;
  border: 1px solid oklch(0.4 0.1 150 / 0.3);
}
.uw-head .pill .d { width: 5px; height: 5px; border-radius: 50%; background: oklch(0.78 0.14 150); }
.uw-head .btn-sm {
  height: 26px; padding: 0 10px;
  border-radius: 6px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.8); font-size: 12px;
  display: inline-flex; gap: 6px; align-items: center;
}

.uw-tabs {
  display: flex; gap: 2px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}
.uw-tabs .t {
  padding: 9px 12px;
  font-size: 11.5px; font-weight: 500;
  color: rgba(255,255,255,0.5);
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.uw-tabs .t.active {
  color: #fff;
  border-bottom-color: var(--brand-sky);
}

.uw-toolbar {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.uw-seg {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  overflow: hidden;
}
.uw-seg button {
  height: 26px; padding: 0 10px;
  background: transparent; border: none;
  color: rgba(255,255,255,0.6);
  font-size: 11.5px;
}
.uw-seg button.on { background: rgba(255,255,255,0.06); color: #fff; }
.uw-toolbar .divider { width: 1px; height: 20px; background: rgba(255,255,255,0.08); }
.uw-toolbar .meta { font-size: 11px; color: rgba(255,255,255,0.45); margin-left: auto; display: flex; gap: 8px; align-items: center; }
.uw-toolbar .meta .badge {
  background: rgba(3,198,255,0.12);
  color: var(--brand-sky);
  padding: 2px 7px; border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.uw-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}
.uw-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.015);
}
.uw-table th.num, .uw-table td.num { text-align: right; }
.uw-table td {
  padding: 9px 18px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.uw-table tr.group td {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.025);
  font-weight: 600;
  padding: 7px 18px;
}
.uw-table td.label { color: rgba(255,255,255,0.8); }
.uw-table td.dim { color: rgba(255,255,255,0.45); }
.uw-table tr.total td {
  font-weight: 600;
  background: rgba(3,198,255,0.04);
  border-top: 1px solid rgba(3,198,255,0.15);
  color: #fff;
}
.uw-table tr.total td.noi { color: var(--brand-sky); }
.uw-table td.edit {
  background: rgba(3,198,255,0.08);
  color: var(--brand-sky);
  position: relative;
}
.uw-table td.edit::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--brand-sky);
}
.uw-table td.outlier {
  background: rgba(217, 119, 6, 0.12);
  color: oklch(0.80 0.14 70);
}
.uw-table td.outlier::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: oklch(0.80 0.14 70);
}
.uw-table td.delta-up { color: oklch(0.78 0.14 150); }
.uw-table td.delta-warn { color: oklch(0.80 0.14 70); }
.uw-source {
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; gap: 12px; align-items: center;
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.015);
}
.uw-source .src-doc {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  font-size: 11px;
}
.uw-source .ai-pill {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(91,216,255,0.08);
  border: 1px solid rgba(91,216,255,0.18);
  color: #5BD8FF;
  font-size: 11px; font-weight: 500;
}

/* ── CRM Contact detail mock (light) ───────────────────────────────────── */
.crm-shell {
  background: #fff; color: var(--brand-navy);
}
.crm-detail {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  min-height: 360px;
}
.crm-col {
  padding: 16px;
  border-right: 1px solid rgba(1,49,124,0.08);
  font-size: 12.5px;
}
.crm-col:last-child { border-right: none; border-left: 1px solid rgba(1,49,124,0.08); }
.crm-identity .avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #01317C, #1A4798);
  color: #fff;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 600;
  margin-bottom: 12px;
}
.crm-identity .nm { font-size: 16px; font-weight: 600; letter-spacing: -0.012em; }
.crm-identity .role { font-size: 12px; color: var(--text-secondary-color); margin-top: 2px; }
.crm-identity .badges { display: flex; gap: 6px; margin: 12px 0 16px; flex-wrap: wrap; }
.crm-identity .b {
  font-size: 10.5px; font-weight: 500;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(1,49,124,0.07);
  color: var(--brand-navy);
}
.crm-identity .b.sky { background: rgba(3,198,255,0.12); }
.crm-identity .b.purple { background: oklch(0.94 0.05 295); color: oklch(0.45 0.18 295); }
.crm-identity .field {
  font-size: 11.5px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 0; border-top: 1px solid rgba(1,49,124,0.06);
}
.crm-identity .field .lab { font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-tertiary-color); font-weight: 600; }
.crm-identity .field .val { color: var(--brand-navy); font-weight: 500; word-break: break-word; }
.crm-identity .field .val.mn { font-family: var(--font-mono); font-size: 11px; }

/* Timeline */
.crm-timeline { padding: 0; }
.crm-tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(1,49,124,0.08); padding: 0 16px; }
.crm-tabs .t {
  padding: 12px 14px;
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary-color);
  border-bottom: 2px solid transparent;
}
.crm-tabs .t.active { color: var(--brand-navy); border-bottom-color: var(--brand-navy); }
.crm-feed { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.crm-event {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  font-size: 12px;
}
.crm-event .dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(1,49,124,0.07);
  color: var(--brand-navy);
  display: grid; place-items: center;
}
.crm-event .dot.email { background: rgba(3,198,255,0.12); color: var(--brand-navy); }
.crm-event .dot.note { background: rgba(217,164,9,0.1); color: oklch(0.55 0.16 60); }
.crm-event .dot.deal { background: rgba(38,135,80,0.1); color: oklch(0.52 0.14 150); }
.crm-event .body .head {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 12px;
}
.crm-event .body .head .ag { font-weight: 600; color: var(--brand-navy); }
.crm-event .body .head .ts { color: var(--text-tertiary-color); font-size: 11px; margin-left: auto; font-family: var(--font-mono); }
.crm-event .body .desc { color: var(--text-secondary-color); margin-top: 2px; line-height: 1.4; }
.crm-event .body .quote {
  margin-top: 6px;
  padding: 8px 10px;
  border-left: 2px solid rgba(1,49,124,0.18);
  background: var(--bg-secondary);
  border-radius: 0 6px 6px 0;
  color: var(--brand-navy);
  font-size: 11.5px;
  line-height: 1.5;
}

/* Associations */
.crm-assoc h6 { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-tertiary-color); margin: 0 0 8px; font-weight: 600; }
.crm-assoc { display: flex; flex-direction: column; gap: 16px; }
.crm-assoc .group { }
.crm-assoc .item {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 0;
  border-top: 1px solid rgba(1,49,124,0.06);
}
.crm-assoc .item:first-of-type { border-top: none; }
.crm-assoc .item .ic-sq {
  width: 26px; height: 26px;
  border-radius: 5px;
  background: rgba(1,49,124,0.07);
  display: grid; place-items: center;
  color: var(--brand-navy);
}
.crm-assoc .item .ic-sq.property { background: oklch(0.94 0.05 155); color: oklch(0.45 0.15 155); }
.crm-assoc .item .ic-sq.deal { background: oklch(0.95 0.06 65); color: oklch(0.5 0.15 65); }
.crm-assoc .item .ic-sq.company { background: oklch(0.94 0.05 295); color: oklch(0.45 0.18 295); }
.crm-assoc .item .nm { font-size: 12px; font-weight: 500; color: var(--brand-navy); }
.crm-assoc .item .mt { font-size: 11px; color: var(--text-secondary-color); }
.crm-assoc .item .v { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--brand-navy); font-variant-numeric: tabular-nums; }

/* ── OM editor mock ────────────────────────────────────────────────────── */
.om-shell {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  min-height: 380px;
  background: #0A2039;
  color: rgba(255,255,255,0.92);
}
.om-thumbs {
  background: #071B34;
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.om-thumbs .title {
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); font-weight: 600;
  margin-bottom: 4px;
}
.om-thumb {
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, #0E2440, #142C4D);
  height: 56px;
  position: relative;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.om-thumb .ix {
  position: absolute; right: 6px; top: 4px;
  font-size: 9.5px; color: rgba(255,255,255,0.3);
  font-family: var(--font-mono);
}
.om-thumb .ln {
  height: 5px; border-radius: 2px;
  background: rgba(255,255,255,0.1);
}
.om-thumb .ln.w1 { width: 60%; }
.om-thumb .ln.w2 { width: 38%; background: rgba(3,198,255,0.4); }
.om-thumb.active {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 1px var(--brand-sky), 0 0 18px rgba(3,198,255,0.18);
}

.om-canvas {
  background: #04122A;
  display: flex; flex-direction: column;
  position: relative;
  padding: 18px;
  gap: 12px;
}
.om-canvas .canvas-head {
  display: flex; gap: 10px; align-items: center;
  font-size: 11.5px; color: rgba(255,255,255,0.5);
}
.om-canvas .canvas-head .badge {
  background: rgba(3,198,255,0.12);
  color: var(--brand-sky);
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
}
.om-slide {
  flex: 1; min-height: 280px;
  border-radius: 10px;
  background: linear-gradient(135deg, #01317C 0%, #021F4F 100%);
  position: relative;
  padding: 32px;
  overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,0.08);
}
.om-slide::after {
  content: ""; position: absolute; right: -30px; bottom: -40px;
  width: 160px; height: 220px;
  background: url("assets/crelio-building.svg") no-repeat center/contain;
  opacity: 0.08;
}
.om-slide .eyebrow-w {
  color: rgba(91,216,255,0.85);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600;
}
.om-slide .title {
  font-size: 26px; font-weight: 600;
  letter-spacing: -0.018em; line-height: 1.05;
  color: #fff;
  margin-top: 8px;
  max-width: 18ch;
}
.om-slide .sub {
  font-size: 12.5px; color: rgba(255,255,255,0.7);
  margin-top: 10px; max-width: 36ch;
}
.om-slide .stats {
  display: flex; gap: 24px;
  margin-top: auto;
}
.om-slide .stats .s .v {
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--brand-sky); font-variant-numeric: tabular-nums;
}
.om-slide .stats .s .l {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-top: 2px;
}

/* selected element marker */
.om-slide .sel-marker {
  position: absolute;
  border: 1.5px solid var(--brand-sky);
  border-radius: 3px;
  pointer-events: none;
}
.om-slide .sel-marker.tl, .om-slide .sel-marker.tr, .om-slide .sel-marker.bl, .om-slide .sel-marker.br {
  width: 7px; height: 7px;
  background: var(--brand-sky);
  border: 1.5px solid #fff;
  border-radius: 0;
}

.om-chat {
  background: #0E2440;
  border-left: 1px solid rgba(255,255,255,0.06);
  padding: 14px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.om-chat .head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  font-weight: 600; color: #fff;
}
.om-chat .head .ic {
  width: 22px; height: 22px;
  background: rgba(3,198,255,0.14);
  color: var(--brand-sky);
  border-radius: 6px;
  display: grid; place-items: center;
}
.om-chat .msg {
  font-size: 12px;
  padding: 9px 11px;
  border-radius: 8px;
  line-height: 1.45;
}
.om-chat .msg.user {
  background: rgba(3,198,255,0.08);
  border: 1px solid rgba(3,198,255,0.18);
  color: rgba(255,255,255,0.92);
  align-self: stretch;
}
.om-chat .msg.ai {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.76);
}
.om-chat .tool-call {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--brand-sky);
  background: rgba(3,198,255,0.06);
  padding: 6px 9px;
  border-radius: 5px;
  display: flex; gap: 6px; align-items: center;
}
.om-chat .tool-call .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-sky);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.om-chat .input {
  margin-top: auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.02);
}
.om-chat .input .send {
  margin-left: auto;
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--brand-sky); color: #00141F;
  display: grid; place-items: center;
}

/* ── Sequence builder mock ─────────────────────────────────────────────── */
.seq-shell {
  background: #fff;
  color: var(--brand-navy);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 380px;
}
.seq-head {
  display: flex; align-items: center; justify-content: space-between;
}
.seq-head .nm { font-size: 14px; font-weight: 600; }
.seq-head .meta { font-size: 11.5px; color: var(--text-secondary-color); margin-top: 2px; }
.seq-head .stats { display: flex; gap: 16px; }
.seq-head .stat .v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.012em; }
.seq-head .stat .l { font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-tertiary-color); font-weight: 600; margin-top: 1px; }
.seq-list { display: flex; flex-direction: column; gap: 8px; }
.seq-step {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(1,49,124,0.1);
  border-radius: 8px;
  background: #fff;
  position: relative;
}
.seq-step + .seq-step::before {
  content: "";
  position: absolute; left: 27px; top: -8px;
  width: 1px; height: 8px; background: rgba(1,49,124,0.18);
}
.seq-step .ix {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(1,49,124,0.07);
  color: var(--brand-navy);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
}
.seq-step .ix.mail { background: rgba(3,198,255,0.12); color: var(--brand-navy); }
.seq-step .ix.call { background: oklch(0.94 0.05 65); color: oklch(0.5 0.15 65); }
.seq-step .ix.task { background: rgba(1,49,124,0.07); color: var(--brand-navy); }
.seq-step .nm { font-size: 13px; font-weight: 500; color: var(--brand-navy); }
.seq-step .sub { font-size: 11.5px; color: var(--text-secondary-color); margin-top: 2px; }
.seq-step .when {
  font-size: 11px;
  color: var(--text-tertiary-color);
  font-family: var(--font-mono);
}
.seq-step .ab {
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(3,198,255,0.14);
  color: var(--brand-navy);
  padding: 2px 6px; border-radius: 4px;
  font-weight: 600;
  margin-left: 8px;
}

/* ── Agent / Map mocks ─────────────────────────────────────────────────── */
.agent-shell {
  background: #071B34;
  color: rgba(255,255,255,0.92);
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  min-height: 380px;
}
.agent-cfg {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(255,255,255,0.02);
}
.agent-cfg .head { display: flex; align-items: center; gap: 10px; }
.agent-cfg .head .ic { width: 32px; height: 32px; border-radius: 8px; background: rgba(3,198,255,0.12); color: var(--brand-sky); display: grid; place-items: center; }
.agent-cfg .head .nm { font-size: 14px; font-weight: 600; color: #fff; }
.agent-cfg .head .sub { font-size: 11.5px; color: rgba(255,255,255,0.5); margin-top: 1px; }
.agent-row { font-size: 11.5px; }
.agent-row .lab { color: rgba(255,255,255,0.45); letter-spacing: 0.07em; text-transform: uppercase; font-size: 10px; font-weight: 600; margin-bottom: 6px; }
.agent-modes { display: flex; gap: 4px; }
.agent-mode {
  flex: 1;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 7px 8px;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}
.agent-mode.on {
  background: rgba(3,198,255,0.1);
  border-color: var(--brand-sky);
  color: var(--brand-sky);
}
.agent-skills { display: flex; flex-wrap: wrap; gap: 5px; }
.agent-skill {
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.78);
  font-family: var(--font-mono);
}
.agent-feed {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  display: flex; flex-direction: column;
}
.agent-feed-head {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; gap: 8px; align-items: center;
  font-size: 12px; color: #fff; font-weight: 600;
}
.agent-feed-head .dot { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.78 0.14 150); box-shadow: 0 0 8px oklch(0.78 0.14 150 / 0.6); }
.agent-feed-head .ct { margin-left: auto; font-size: 10.5px; color: rgba(255,255,255,0.5); font-weight: 500; font-family: var(--font-mono); }
.agent-feed-list { padding: 8px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.agent-lead {
  padding: 10px 12px;
  border-radius: 7px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}
.agent-lead:hover { background: rgba(255,255,255,0.03); }
.agent-lead .nm { font-size: 12.5px; font-weight: 500; color: #fff; }
.agent-lead .why { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 2px; line-height: 1.4; }
.agent-lead .score {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brand-sky);
  background: rgba(3,198,255,0.08);
  padding: 4px 8px;
  border-radius: 6px;
  align-self: flex-start;
  border: 1px solid rgba(3,198,255,0.18);
}
.agent-lead .ts {
  font-size: 10.5px; color: rgba(255,255,255,0.4); margin-top: 3px;
  font-family: var(--font-mono);
}
.agent-lead .status {
  font-size: 10.5px;
  padding: 3px 7px;
  border-radius: 999px;
  font-weight: 500;
  align-self: flex-start;
  margin-top: 4px;
}
.agent-lead .status.draft { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.agent-lead .status.queue { background: rgba(217,164,9,0.14); color: oklch(0.80 0.14 70); }
.agent-lead .status.sent { background: oklch(0.30 0.08 150 / 0.45); color: oklch(0.78 0.14 150); }

/* ── Deal room mock ────────────────────────────────────────────────────── */
.dr-shell {
  background: #fff;
  color: var(--brand-navy);
  min-height: 380px;
  display: flex; flex-direction: column;
}
.dr-banner {
  background: linear-gradient(135deg, #01317C, #021F4F);
  color: #fff;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.dr-banner::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 200px; height: 260px;
  background: url("assets/crelio-building.svg") no-repeat center/contain;
  opacity: 0.07;
}
.dr-banner .eyebrow-w {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(91,216,255,0.85);
  font-weight: 600;
}
.dr-banner .title { font-size: 24px; font-weight: 600; letter-spacing: -0.018em; margin-top: 6px; }
.dr-banner .meta { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 4px; display: flex; gap: 8px; }
.dr-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(1,49,124,0.08);
}
.dr-stat { padding: 14px 18px; border-right: 1px solid rgba(1,49,124,0.08); }
.dr-stat:last-child { border-right: none; }
.dr-stat .v {
  font-size: 22px; font-weight: 600; letter-spacing: -0.018em;
  color: var(--brand-navy); font-variant-numeric: tabular-nums;
}
.dr-stat .l { font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-tertiary-color); font-weight: 600; margin-top: 3px; }
.dr-funnel {
  padding: 16px;
}
.dr-funnel .lab { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-tertiary-color); font-weight: 600; margin-bottom: 8px; }
.dr-funnel .bar {
  display: grid; grid-template-columns: 1fr; gap: 6px;
}
.dr-funnel-row {
  display: grid; grid-template-columns: 130px 1fr 60px;
  align-items: center; gap: 10px;
  font-size: 12px;
}
.dr-funnel-row .bg {
  height: 18px; border-radius: 4px; background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}
.dr-funnel-row .fg {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--brand-navy);
  border-radius: 4px;
}
.dr-funnel-row .fg.sky { background: var(--brand-sky); }
.dr-funnel-row .v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--brand-navy); text-align: right; }