/* ============================================================================
   Crelio marketing site — v2 additions.
   Layered on top of styles.css. Adds tour-group headers and a couple of
   small visual fixes for the regrouped product tour.
   ============================================================================ */

/* ── Tour-group header — opens each of the five workflow sections ─────── */
.tour-group {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid rgba(1, 49, 124, 0.1);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: end;
}
.tour-group:first-of-type {
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
}
@media (max-width: 960px) {
  .tour-group { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; margin-top: 48px; }
}
.tour-group-marker {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tour-group-marker .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.tour-group-marker .step-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-navy);
}
.tour-group-marker .step-label .verb {
  color: var(--brand-navy);
}
.tour-group-marker .step-label .of {
  color: rgba(1, 49, 124, 0.4);
  margin: 0 8px;
}
.tour-group-marker .step-label .frame {
  color: rgba(1, 49, 124, 0.55);
}
.tour-group-headline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tour-group-headline h3 {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--brand-navy);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.tour-group-headline .sub {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-secondary-color);
  max-width: 56ch;
  text-wrap: pretty;
  margin: 0;
}

/* tour rows inside a group get a slightly tighter top border so it reads as a sub-row */
.tour-group + .tour-row { border-top-color: rgba(1, 49, 124, 0.05); padding-top: 56px; }
.tour-row + .tour-row.in-group { border-top-color: rgba(1, 49, 124, 0.05); }

/* "new" pip on a tour eyebrow */
.eyebrow .new-pip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(3, 198, 255, 0.14);
  color: #006A91;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: 1px;
  border: 1px solid rgba(3, 198, 255, 0.3);
}

/* ── Problem v2 — job-categorized "today" card ──────────────────────── */
.ba-tools-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 480px) { .ba-tools-v2 { grid-template-columns: 1fr; } }
.ba-job {
  border: 1px solid rgba(1, 49, 124, 0.1);
  border-radius: 8px;
  padding: 12px 12px;
  background: var(--bg-secondary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary-color);
}
.ba-job .ic {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(1, 49, 124, 0.06);
  color: var(--brand-navy);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ba-job .job-text { flex: 1; min-width: 0; }
.ba-job .job-text .job {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-navy);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
  line-height: 1.25;
}
.ba-job .job-text .tool {
  font-size: 11.5px;
  color: var(--text-tertiary-color);
  line-height: 1.3;
}

/* ── AI Enrich mock ───────────────────────────────────────────────────── */
.enr-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: 12.5px;
  background: #fff;
}
.enr-side {
  background: #F4F5F7;
  border-right: 1px solid rgba(1, 49, 124, 0.08);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.enr-side .h {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(1, 49, 124, 0.5);
  font-weight: 600;
  padding: 6px 10px;
}
.enr-side .item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  color: rgba(1, 49, 124, 0.72);
  font-size: 12px;
  font-weight: 500;
}
.enr-side .item .ic { color: var(--brand-navy); opacity: 0.7; }
.enr-side .item.active {
  background: rgba(1, 49, 124, 0.06);
  color: var(--brand-navy);
}
.enr-side .item.active .ic { opacity: 1; }
.enr-side .item .pip {
  margin-left: auto;
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(1, 49, 124, 0.45);
}
.enr-side .item.free .badge {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  background: oklch(0.94 0.05 150);
  color: oklch(0.45 0.14 150);
  text-transform: uppercase;
}
.enr-side .item.ent .badge {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  background: oklch(0.93 0.05 285);
  color: oklch(0.45 0.18 285);
  text-transform: uppercase;
}

.enr-main { padding: 18px 22px 16px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.enr-main .crumb {
  font-size: 12px;
  color: rgba(1, 49, 124, 0.55);
  display: flex; align-items: center; gap: 6px;
}
.enr-main .crumb .here { color: var(--brand-navy); font-weight: 500; }
.enr-main h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-navy);
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.2;
}

.enr-target {
  border: 1px solid rgba(1, 49, 124, 0.1);
  border-radius: 10px;
  padding: 12px 14px;
  background: #FAFAF8;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.enr-target .lab {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(1, 49, 124, 0.55);
  font-weight: 600;
}
.enr-target .v {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-navy);
}
.enr-target .v .count {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(1, 49, 124, 0.55);
  font-weight: 500;
}
.enr-target .sep { color: rgba(1, 49, 124, 0.18); }

.enr-progress {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.enr-prog-card {
  border: 1px solid rgba(1, 49, 124, 0.1);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}
.enr-prog-card .top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.enr-prog-card .top .nm {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-navy);
  display: flex; align-items: center; gap: 8px;
}
.enr-prog-card .top .nm .dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.enr-prog-card .top .nm .dot.ok    { background: oklch(0.55 0.14 150); box-shadow: 0 0 8px oklch(0.55 0.14 150 / 0.5); }
.enr-prog-card .top .nm .dot.run   { background: var(--brand-sky); box-shadow: 0 0 8px rgba(3, 198, 255, 0.55); animation: enr-pulse 1.6s ease-in-out infinite; }
.enr-prog-card .top .nm .dot.queue { background: rgba(1, 49, 124, 0.25); }
@keyframes enr-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.enr-prog-card .top .pct {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(1, 49, 124, 0.55);
  font-variant-numeric: tabular-nums;
}
.enr-prog-card .bar {
  height: 5px;
  background: rgba(1, 49, 124, 0.07);
  border-radius: 999px;
  overflow: hidden;
}
.enr-prog-card .bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-sky));
  border-radius: 999px;
}
.enr-prog-card .stats {
  display: flex; gap: 14px;
  margin-top: 10px;
  font-size: 10.5px;
  color: rgba(1, 49, 124, 0.55);
  font-family: var(--font-mono);
}
.enr-prog-card .stats .stat .v {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-navy);
  font-family: var(--font-sans);
  letter-spacing: -0.012em;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

.enr-table {
  border: 1px solid rgba(1, 49, 124, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.enr-table .hd {
  display: grid;
  grid-template-columns: 1.5fr 1.6fr 1.4fr 80px;
  padding: 8px 14px;
  background: #F4F5F7;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(1, 49, 124, 0.5);
  font-weight: 600;
  border-bottom: 1px solid rgba(1, 49, 124, 0.06);
}
.enr-row {
  display: grid;
  grid-template-columns: 1.5fr 1.6fr 1.4fr 80px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(1, 49, 124, 0.05);
  align-items: center;
  font-size: 12px;
  color: var(--brand-navy);
}
.enr-row:last-child { border-bottom: none; }
.enr-row .col-prop {
  display: flex; flex-direction: column;
}
.enr-row .col-prop .nm { font-weight: 600; }
.enr-row .col-prop .ad { font-size: 10.5px; color: rgba(1, 49, 124, 0.5); margin-top: 1px; }
.enr-row .before {
  color: rgba(1, 49, 124, 0.45);
  font-family: var(--font-mono);
  font-size: 11px;
  text-decoration: line-through;
}
.enr-row .before.empty { font-style: italic; text-decoration: none; }
.enr-row .after {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand-navy);
  display: flex; align-items: center; gap: 6px;
}
.enr-row .after .ck {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: oklch(0.94 0.05 150);
  color: oklch(0.45 0.14 150);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.enr-row .after.suggest .ck { background: oklch(0.95 0.05 65); color: oklch(0.5 0.14 65); }
.enr-row .src {
  font-size: 10.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(1, 49, 124, 0.05);
  color: rgba(1, 49, 124, 0.7);
  font-weight: 500;
  justify-self: start;
}

/* ── Engagements mock ──────────────────────────────────────────────────── */
.eng-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: 12.5px;
  background: #fff;
}
.eng-side {
  background: #F4F5F7;
  border-right: 1px solid rgba(1, 49, 124, 0.08);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.eng-side .h {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(1, 49, 124, 0.5);
  font-weight: 600;
  padding: 6px 10px;
}
.eng-side .filt {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: rgba(1, 49, 124, 0.72);
}
.eng-side .filt.active { background: rgba(1, 49, 124, 0.06); color: var(--brand-navy); font-weight: 500; }
.eng-side .filt .sw {
  width: 9px; height: 9px; border-radius: 2px;
  flex-shrink: 0;
}
.eng-side .filt .ct {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(1, 49, 124, 0.55);
}

.eng-main { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.eng-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.eng-head h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--brand-navy);
  letter-spacing: -0.012em;
  margin: 0;
}
.eng-head .meta {
  font-size: 11px;
  color: rgba(1, 49, 124, 0.55);
  font-family: var(--font-mono);
}
.eng-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid rgba(1, 49, 124, 0.08);
}
.eng-tab {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(1, 49, 124, 0.55);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.eng-tab.active {
  color: var(--brand-navy);
  border-bottom-color: var(--brand-navy);
}
.eng-tab .ct {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: rgba(1, 49, 124, 0.07);
  padding: 1px 6px;
  border-radius: 999px;
  color: rgba(1, 49, 124, 0.65);
}
.eng-tab.active .ct { background: rgba(1, 49, 124, 0.1); color: var(--brand-navy); }

.eng-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.eng-kpi {
  border: 1px solid rgba(1, 49, 124, 0.1);
  border-radius: 9px;
  padding: 10px 12px;
  background: #FAFAF8;
}
.eng-kpi .lab {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(1, 49, 124, 0.55);
  font-weight: 600;
  margin-bottom: 4px;
}
.eng-kpi .v {
  font-size: 19px;
  font-weight: 600;
  color: var(--brand-navy);
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.eng-kpi .v .unit { font-size: 11px; font-weight: 500; color: rgba(1, 49, 124, 0.5); margin-left: 3px; }
.eng-kpi .trend {
  font-size: 10.5px;
  color: oklch(0.52 0.14 150);
  font-family: var(--font-mono);
  margin-top: 4px;
}

.eng-table {
  border: 1px solid rgba(1, 49, 124, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.eng-table .hd {
  display: grid;
  grid-template-columns: 28px 2fr 1.1fr 1fr 0.9fr 0.8fr;
  gap: 8px;
  padding: 8px 14px;
  background: #F4F5F7;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(1, 49, 124, 0.5);
  font-weight: 600;
  border-bottom: 1px solid rgba(1, 49, 124, 0.06);
}
.eng-row {
  display: grid;
  grid-template-columns: 28px 2fr 1.1fr 1fr 0.9fr 0.8fr;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(1, 49, 124, 0.05);
  align-items: center;
  font-size: 12px;
  color: var(--brand-navy);
}
.eng-row:last-child { border-bottom: none; }
.eng-row .sw {
  width: 10px; height: 10px;
  border-radius: 3px;
}
.eng-row .deal .nm { font-weight: 600; }
.eng-row .deal .meta {
  font-size: 10.5px;
  color: rgba(1, 49, 124, 0.55);
  margin-top: 1px;
  display: flex; gap: 6px; align-items: center;
}
.eng-row .type-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.eng-row .type-pill .pdot { width: 6px; height: 6px; border-radius: 50%; }
.eng-row .econ {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--brand-navy);
  font-variant-numeric: tabular-nums;
}
.eng-row .econ .sub { color: rgba(1, 49, 124, 0.5); font-size: 10.5px; display: block; margin-top: 1px; }
.eng-row .signed {
  font-size: 11px;
  color: rgba(1, 49, 124, 0.65);
  font-family: var(--font-mono);
}
.eng-row .stat-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  justify-self: start;
}
.eng-row .stat-pill .d { width: 5px; height: 5px; border-radius: 50%; }

/* service line colors */
.sl-sell  { color: #01317C; background: rgba(1, 49, 124, 0.1); }   /* navy */
.sl-buy   { color: oklch(0.45 0.18 285); background: oklch(0.94 0.06 285 / 0.7); } /* purple */
.sl-lease { color: oklch(0.42 0.14 155); background: oklch(0.94 0.05 155 / 0.8); } /* emerald */
.sl-trep  { color: oklch(0.48 0.15 60);  background: oklch(0.95 0.06 60 / 0.7); }  /* amber */
.sl-debt  { color: oklch(0.45 0.17 25);  background: oklch(0.94 0.06 25 / 0.6); }  /* warm-red */

.sl-sell-bg  { background: #01317C; }
.sl-buy-bg   { background: oklch(0.50 0.22 285); }
.sl-lease-bg { background: oklch(0.50 0.14 155); }
.sl-trep-bg  { background: oklch(0.58 0.16 60); }
.sl-debt-bg  { background: oklch(0.58 0.20 25); }

.st-draft  { color: rgba(1, 49, 124, 0.6); background: rgba(1, 49, 124, 0.08); }
.st-draft .d { background: rgba(1, 49, 124, 0.45); }
.st-active { color: oklch(0.42 0.14 155); background: oklch(0.94 0.05 150 / 0.7); }
.st-active .d { background: oklch(0.55 0.14 150); }
.st-closed { color: rgba(1, 49, 124, 0.55); background: oklch(0.95 0 0); }
.st-closed .d { background: rgba(1, 49, 124, 0.3); }

/* ── Tour spotlight — the AI Agent row that leads the whole tour ─────── */
.tour-spotlight {
  margin: 8px 0 0;
  padding-bottom: 8px;
}
.tour-spotlight-label {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 4px;
}
.tour-spotlight-label .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: var(--brand-navy);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tour-spotlight-label .tag .d {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-sky);
  box-shadow: 0 0 8px rgba(3, 198, 255, 0.6);
}
.tour-spotlight-label .sub {
  font-size: 13.5px;
  color: var(--text-secondary-color);
  letter-spacing: -0.005em;
}
.tour-spotlight .tour-row {
  border-top: none;
  padding-top: 18px;
  padding-bottom: 56px;
}
@media (max-width: 960px) {
  .tour-spotlight-label { flex-wrap: wrap; gap: 10px; }
  .tour-spotlight-label .sub { font-size: 12.5px; }
}

/* ── AI Agent — task execution panel ──────────────────────────────────── */
.agt-main {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 14px;
  background: #fff;
  gap: 12px;
  min-width: 0;
  font-family: var(--font-sans);
  overflow: hidden;
}
.agt-reason {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: -2px 0 0;
  padding: 9px 12px;
  background: linear-gradient(90deg, rgba(3,198,255,0.07), rgba(1,49,124,0.03));
  border: 1px solid rgba(3, 198, 255, 0.2);
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--text-secondary-color);
  line-height: 1.45;
  min-height: 34px;
}
.agt-reason .rdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
  background: var(--brand-sky);
  box-shadow: 0 0 8px rgba(3, 198, 255, 0.7);
  animation: agt-pulse 1s ease-in-out infinite;
}
.agt-reason .rtext {
  display: inline-block;
  animation: agt-reason-in 0.5s ease;
}
@keyframes agt-reason-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
.agt-step.appr-live {
  background: oklch(0.97 0.04 65);
  border-color: oklch(0.86 0.09 65);
}
.agt-step.appr-live .bullet .pulse {
  background: oklch(0.62 0.15 65);
  box-shadow: 0 0 0 3px oklch(0.62 0.15 65 / 0.18);
}
.btn-primary-sm.appr-glow {
  animation: agt-approve-glow 1.3s ease-in-out infinite;
}
@keyframes agt-approve-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(3, 198, 255, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(3, 198, 255, 0.22); }
}
.agt-prompt {
  border: 1px solid rgba(1, 49, 124, 0.1);
  border-radius: 10px;
  padding: 11px 13px;
  background: #FAFAF8;
}
.agt-prompt .lab {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(1, 49, 124, 0.55);
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}
.agt-prompt p {
  margin: 0;
  font-size: 12.5px;
  color: var(--brand-navy);
  line-height: 1.45;
  letter-spacing: -0.005em;
}

.agt-plan-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  color: var(--brand-navy);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(1, 49, 124, 0.08);
}
.agt-plan-head .ic {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: rgba(1, 49, 124, 0.07);
  display: grid; place-items: center;
  color: var(--brand-navy);
}
.agt-plan-head .t {
  font-weight: 600;
  letter-spacing: -0.005em;
}
.agt-plan-head .prog {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(1, 49, 124, 0.55);
  margin-left: 4px;
}
.agt-plan-head .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-sky);
  margin-left: auto;
  box-shadow: 0 0 8px rgba(3, 198, 255, 0.55);
  animation: agt-pulse 1.6s ease-in-out infinite;
}
.agt-plan-head .run {
  font-size: 11px;
  color: rgba(1, 49, 124, 0.6);
  font-style: italic;
}
@keyframes agt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.agt-steps {
  display: flex; flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
}
.agt-step {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.agt-step.run {
  background: rgba(3, 198, 255, 0.05);
  border-color: rgba(3, 198, 255, 0.22);
}
.agt-step .bullet {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.agt-step.done .bullet {
  background: oklch(0.94 0.05 150);
  color: oklch(0.42 0.14 150);
}
.agt-step.run .bullet { background: transparent; }
.agt-step.run .bullet .pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand-sky);
  box-shadow: 0 0 0 4px rgba(3, 198, 255, 0.22);
  animation: agt-pulse 1.4s ease-in-out infinite;
}
.agt-step.queue .bullet .circ {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(1, 49, 124, 0.25);
}
.agt-step .body { min-width: 0; }
.agt-step .body .t {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-navy);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.3;
}
.agt-step.queue .body .t { color: rgba(1, 49, 124, 0.55); }
.agt-step .body .t .badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: oklch(0.94 0.05 150 / 0.7);
  color: oklch(0.4 0.14 150);
  font-weight: 600;
  letter-spacing: 0;
}
.agt-step .body .t .badge.progress {
  background: rgba(3, 198, 255, 0.14);
  color: #006A91;
}
.agt-step .body .t .badge.appr {
  background: oklch(0.95 0.06 65);
  color: oklch(0.46 0.14 65);
}
.agt-step .body .tool {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(1, 49, 124, 0.5);
  margin-top: 4px;
  letter-spacing: 0;
  word-break: break-all;
  line-height: 1.4;
}
.agt-step .body .bar {
  height: 4px;
  background: rgba(1, 49, 124, 0.07);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 7px;
}
.agt-step .body .bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-sky));
  border-radius: 999px;
}
.agt-step .ts {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(1, 49, 124, 0.5);
  margin-top: 1px;
  flex-shrink: 0;
}

.agt-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(1, 49, 124, 0.08);
  gap: 12px;
}
.agt-bar .left {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: rgba(1, 49, 124, 0.55);
}
.agt-bar .left .sp { color: var(--brand-navy); }
.agt-bar .right { display: inline-flex; gap: 6px; align-items: center; }
.agt-bar button {
  border: 1px solid rgba(1, 49, 124, 0.18);
  background: #fff;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 11.5px;
  color: var(--brand-navy);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
}
.agt-bar button.btn-primary-sm {
  background: var(--brand-navy);
  color: #fff;
  border-color: var(--brand-navy);
}
.agt-bar button.btn-edit-sm { color: rgba(1, 49, 124, 0.65); }

/* ── True Ownership / Data layer section ──────────────────────────────── */
.data-layer {
  background: linear-gradient(180deg, rgba(1, 49, 124, 0.02) 0%, transparent 100%);
  padding: 96px 0;
}
@media (max-width: 768px) { .data-layer { padding: 64px 0; } }
.data-layer .section-header { max-width: 860px; margin-bottom: 48px; }
.data-layer-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.data-layer-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(1, 49, 124, 0.1);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--brand-navy);
  letter-spacing: -0.005em;
}
.data-layer-pill .ic {
  color: var(--brand-navy);
  opacity: 0.85;
}
.data-layer-pill .num {
  font-family: var(--font-mono);
  color: rgba(1, 49, 124, 0.55);
  font-weight: 500;
  font-size: 11.5px;
  margin-left: 2px;
}
.data-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
  margin-top: 8px;
}
@media (max-width: 960px) { .data-row { grid-template-columns: 1fr; gap: 32px; } }
.data-text { display: flex; flex-direction: column; gap: 18px; }
.data-text h3 {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-navy);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.data-text .body-text { margin: 0; }
.data-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.data-visual { display: flex; }
.data-visual > div { aspect-ratio: 16 / 11; width: 100%; }

/* ── TrueOwnership mock — chrome + layout ─────────────────────────────── */
.tov-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: 12.5px;
  background: #fff;
}
@media (max-width: 540px) {
  .tov-shell { grid-template-columns: 1fr; }
}
.tov-hero {
  padding: 14px;
  border-right: 1px solid rgba(1, 49, 124, 0.08);
  background: #F4F5F7;
  display: flex;
  flex-direction: column;
}
.tov-img {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background:
    linear-gradient(135deg, oklch(0.45 0.07 230) 0%, oklch(0.32 0.08 250) 100%);
  position: relative;
  margin-bottom: 12px;
  overflow: hidden;
}
.tov-img::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 18px 18px;
}
.tov-img::after {
  content: '';
  position: absolute;
  left: 28%; top: 32%;
  width: 44%; height: 38%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  box-shadow: 8px 8px 0 -2px rgba(255, 255, 255, 0.04);
}
.tov-img .src {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  z-index: 2;
}
.tov-img .apn {
  position: absolute; bottom: 8px; right: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.75);
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  z-index: 2;
}
.tov-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-navy);
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin-bottom: 3px;
}
.tov-addr {
  font-size: 11px;
  color: rgba(1, 49, 124, 0.6);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}
.tov-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tov-fact {
  background: #fff;
  border: 1px solid rgba(1, 49, 124, 0.08);
  border-radius: 6px;
  padding: 6px 8px;
}
.tov-fact .lab {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(1, 49, 124, 0.5);
  font-weight: 600;
  margin-bottom: 2px;
}
.tov-fact .v {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.tov-sources {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(1, 49, 124, 0.08);
}
.tov-sources .lab {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(1, 49, 124, 0.5);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.tov-sources .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tov-sources .badges span {
  font-size: 9.5px;
  font-family: var(--font-mono);
  padding: 2px 6px;
  background: #fff;
  border: 1px solid rgba(1, 49, 124, 0.1);
  border-radius: 4px;
  color: rgba(1, 49, 124, 0.65);
}

.tov-data {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tov-card {
  border: 1px solid rgba(1, 49, 124, 0.1);
  border-radius: 9px;
  background: #fff;
  padding: 11px 12px;
}
.tov-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(1, 49, 124, 0.55);
  font-weight: 600;
  margin-bottom: 8px;
}
.tov-card-head .ic { color: var(--brand-navy); opacity: 0.85; flex-shrink: 0; }
.tov-card-head .meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(1, 49, 124, 0.5);
  letter-spacing: 0;
  text-transform: none;
}

/* Sales history */
.tov-sales-row {
  display: grid;
  grid-template-columns: 80px 70px 1fr;
  gap: 10px;
  padding: 4px 0;
  font-size: 11.5px;
  color: var(--brand-navy);
  align-items: center;
  border-bottom: 1px dashed rgba(1, 49, 124, 0.08);
}
.tov-sales-row:last-child { border-bottom: none; }
.tov-sales-row .dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(1, 49, 124, 0.7);
}
.tov-sales-row .v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.tov-sales-row .tag {
  font-size: 10.5px;
  color: rgba(1, 49, 124, 0.55);
  font-family: var(--font-mono);
}

/* Active loan */
.tov-loan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
}
.tov-loan .field .lab {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(1, 49, 124, 0.5);
  font-weight: 600;
  margin-bottom: 2px;
}
.tov-loan .field .v {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.tov-loan .tov-pip-wrap { display: flex; align-items: flex-end; }
.tov-loan-pip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: oklch(0.95 0.06 65);
  color: oklch(0.42 0.14 65);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.tov-loan-pip .d {
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.6 0.18 60);
  box-shadow: 0 0 6px oklch(0.6 0.18 60 / 0.5);
}

/* Ownership chain */
.tov-ownership { background: #FAFAF8; }
.tov-chain {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.tov-chain-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 8px;
  padding: 7px 10px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(1, 49, 124, 0.08);
  border-radius: 7px;
  position: relative;
}
.tov-chain-row.depth-2 { margin-left: 16px; }
.tov-chain-row.depth-3 { margin-left: 32px; }
.tov-chain-row.depth-2::before,
.tov-chain-row.depth-3::before {
  content: '';
  position: absolute;
  left: -10px; top: -7px;
  width: 1px; height: 14px;
  background: rgba(1, 49, 124, 0.22);
}
.tov-chain-row.depth-3::before { left: -10px; }
.tov-chain-row .bul {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(1, 49, 124, 0.07);
  color: var(--brand-navy);
  display: grid; place-items: center;
}
.tov-chain-row .body .nm {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-navy);
  letter-spacing: -0.005em;
}
.tov-chain-row .body .sub {
  font-size: 10px;
  color: rgba(1, 49, 124, 0.55);
  font-family: var(--font-mono);
  margin-top: 1px;
}
.tov-chain-row .depth-pip {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(1, 49, 124, 0.45);
  padding: 2px 6px;
  background: rgba(1, 49, 124, 0.05);
  border-radius: 4px;
}

/* The climax: true principal card */
.tov-true-owner {
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #01317C 0%, #021F4F 100%);
  color: #fff;
  border-radius: 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.tov-true-owner::before {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(3, 198, 255, 0.18) 0%, transparent 65%);
  pointer-events: none;
}
.tov-true-owner .star {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(3, 198, 255, 0.15);
  color: var(--brand-sky);
  display: grid; place-items: center;
  border: 1px solid rgba(3, 198, 255, 0.4);
  flex-shrink: 0;
}
.tov-true-owner .who { min-width: 0; }
.tov-true-owner .who .lab {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(91, 216, 255, 0.85);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.tov-true-owner .who .nm {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.tov-true-owner .who .meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 1px;
}
.tov-true-owner .conf { text-align: right; }
.tov-true-owner .confidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono);
}
.tov-true-owner .confidence .d {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-sky);
  box-shadow: 0 0 6px rgba(3, 198, 255, 0.6);
}
.tov-true-owner .proof {
  font-size: 9.5px;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

/* Enriched contact panel under true owner */
.tov-enriched {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.tov-true-owner ~ .tov-enriched {
  background: #021F4F;
  color: #fff;
}
.tov-enriched .item {
  font-size: 11px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  letter-spacing: 0;
}
.tov-enriched .item .ck {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(3, 198, 255, 0.18);
  color: var(--brand-sky);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.tov-enriched .item .v {
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tov-enriched .item .meta {
  color: rgba(255, 255, 255, 0.5);
  margin-left: auto;
  font-size: 9.5px;
  flex-shrink: 0;
}
.tov-enriched .enriched-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(91, 216, 255, 0.75);
  font-family: var(--font-mono);
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 2px;
}

/* ── Hero — Crelio definition pill ────────────────────────────────────── */
.crelio-banner {
  margin-bottom: 40px;
  display: flex;
  justify-content: flex-start;
}
@media (max-width: 960px) {
  .crelio-banner { justify-content: center; margin-bottom: 28px; }
}

.crelio-definition {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-bottom: 0;
  padding: 18px 32px;
  background: rgba(1, 49, 124, 0.04);
  border: 1px solid rgba(1, 49, 124, 0.08);
  border-radius: 999px;
  font-size: 22px;
  color: var(--text-secondary-color);
  line-height: 1.15;
  max-width: 100%;
}
.crelio-definition .ipa {
  font-family: var(--font-mono);
  font-size: 20px;
  color: rgba(1, 49, 124, 0.55);
  letter-spacing: -0.005em;
}
.crelio-definition .sep { color: rgba(1, 49, 124, 0.22); font-size: 20px; }
.crelio-definition .pos {
  font-style: italic;
  color: rgba(1, 49, 124, 0.5);
  font-size: 20px;
}
.crelio-definition .meaning {
  color: var(--brand-navy);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.005em;
}
.crelio-definition .meaning .em {
  color: var(--brand-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--brand-sky);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
@media (max-width: 960px) {
  .crelio-definition { font-size: 18px; padding: 14px 24px; gap: 12px 18px; }
  .crelio-definition .ipa, .crelio-definition .pos, .crelio-definition .sep { font-size: 16px; }
  .crelio-definition .meaning { font-size: 18px; }
  .crelio-definition img { height: 48px; }
}
@media (max-width: 600px) {
  .crelio-definition { font-size: 14px; padding: 10px 18px; gap: 8px 12px; border-radius: 22px; }
  .crelio-definition .ipa, .crelio-definition .pos, .crelio-definition .sep { display: none; }
  .crelio-definition .meaning { font-size: 14px; }
  .crelio-definition img { height: 36px; }
}

/* ── Hero — carousel ──────────────────────────────────────────────────── */
.hero-carousel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  width: 100%;
}
.hero-carousel-rail {
  display: flex;
  background: rgba(1, 49, 124, 0.05);
  border: 1px solid rgba(1, 49, 124, 0.08);
  border-radius: 8px;
  padding: 3px;
  align-self: stretch;
}
.hero-carousel-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 30px;
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(1, 49, 124, 0.55);
  background: transparent;
  border: 0;
  border-radius: 6px;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 200ms var(--ease-out),
              background 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
  white-space: nowrap;
}
.hero-carousel-tab:hover {
  color: var(--brand-navy);
}
.hero-carousel-tab .ix {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(1, 49, 124, 0.4);
  font-variant-numeric: tabular-nums;
}
.hero-carousel-tab.active {
  background: #fff;
  color: var(--brand-navy);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(2, 31, 79, 0.06);
}
.hero-carousel-tab.active .ix {
  color: var(--brand-sky);
}
.hero-carousel-stage {
  position: relative;
  aspect-ratio: 16 / 11;
  width: 100%;
}
.hero-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.014);
  transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out);
  pointer-events: none;
}
.hero-carousel-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
@media (max-width: 540px) {
  .hero-carousel-tab .ix { display: none; }
  .hero-carousel-tab { font-size: 12px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-carousel-slide { transition: opacity 200ms linear; transform: none; }
  .hero-carousel-slide.active { transform: none; }
}