/* PRODUCT MOCKUP — inline SVG + HTML mockups for hero visuals.
 * Mimics product UI without needing real screenshots.
 */

[data-mr="1"] .mr-mockup {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 30px 60px rgba(11, 31, 51, 0.16));
}

[data-mr="1"] .mr-mockup__frame {
  background: linear-gradient(180deg, var(--mr-white) 0%, #FAFCFD 100%);
  border: 1px solid rgba(11, 31, 51, 0.08);
  border-radius: var(--mr-radius-lg);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 28px 70px rgba(11, 31, 51, 0.14);
}

[data-mr="1"] .mr-mockup__chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #FAFBFC 0%, #F1F4F7 100%);
  border-bottom: 1px solid rgba(11, 31, 51, 0.06);
}

[data-mr="1"] .mr-mockup__dots {
  display: flex;
  gap: 6px;
}

[data-mr="1"] .mr-mockup__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(11, 31, 51, 0.18);
}

[data-mr="1"] .mr-mockup__breadcrumb {
  font-family: var(--mr-font-mono);
  font-size: 11px;
  color: var(--mr-gray-500);
  letter-spacing: -0.005em;
}

[data-mr="1"] .mr-mockup__body {
  padding: 18px 18px 16px;
  display: grid;
  gap: 14px;
}

/* ---------- shared atoms ---------- */
[data-mr="1"] .mr-mockup__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

[data-mr="1"] .mr-mockup__head h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mr-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}

[data-mr="1"] .mr-mockup__pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: var(--mr-radius-pill);
  background: rgba(20, 149, 139, 0.10);
  color: var(--mr-teal-700);
  letter-spacing: 0.02em;
}

[data-mr="1"] .mr-mockup__pill--success {
  background: rgba(22, 163, 74, 0.12);
  color: var(--mr-success-700);
}

[data-mr="1"] .mr-mockup__chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--mr-radius-pill);
  background: var(--mr-gray-100);
  color: var(--mr-gray-700);
  letter-spacing: 0.02em;
}

[data-mr="1"] .mr-mockup__chip--new { background: var(--mr-teal-100); color: var(--mr-teal-700); }
[data-mr="1"] .mr-mockup__chip--win { background: rgba(22, 163, 74, 0.12); color: var(--mr-success-700); }
[data-mr="1"] .mr-mockup__chip--accent { background: var(--mr-teal-500); color: var(--mr-white); }
[data-mr="1"] .mr-mockup__chip--warn { background: var(--mr-amber-100); color: var(--mr-amber-700); }

[data-mr="1"] .mr-mockup__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mr-gray-300);
}

[data-mr="1"] .mr-mockup__dot--teal { background: var(--mr-teal-500); box-shadow: 0 0 0 3px rgba(20, 149, 139, 0.18); }
[data-mr="1"] .mr-mockup__dot--amber { background: var(--mr-amber-500); }

[data-mr="1"] .mr-mockup__footnote {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(11, 31, 51, 0.08);
  font-size: 11px;
  color: var(--mr-text-muted);
}

[data-mr="1"] .mr-mockup__bot-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--mr-navy-800);
  color: var(--mr-white);
  border-radius: 3px;
  flex-shrink: 0;
}

/* ---------- CRM variant ---------- */
[data-mr="1"] .mr-mockup--crm .mr-mockup__body {
  grid-template-columns: 130px 1fr;
  gap: 14px;
}

[data-mr="1"] .mr-mockup__sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  background: var(--mr-gray-050);
  border-radius: var(--mr-radius-sm);
}

[data-mr="1"] .mr-mockup__sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--mr-gray-600);
}

[data-mr="1"] .mr-mockup__sidebar-item.is-active {
  background: var(--mr-white);
  color: var(--mr-text-primary);
  font-weight: 600;
  border-left: 2px solid var(--mr-teal-500);
}

[data-mr="1"] .mr-mockup__main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

[data-mr="1"] .mr-mockup__filters {
  display: flex;
  gap: 6px;
}

[data-mr="1"] .mr-mockup__filters span {
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--mr-gray-100);
  color: var(--mr-gray-600);
  font-weight: 500;
}

[data-mr="1"] .mr-mockup__kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

[data-mr="1"] .mr-mockup__col {
  background: var(--mr-gray-050);
  border-radius: var(--mr-radius-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-mr="1"] .mr-mockup__col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mr-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[data-mr="1"] .mr-mockup__col-head span {
  background: var(--mr-white);
  border-radius: 4px;
  padding: 1px 6px;
}

[data-mr="1"] .mr-mockup__deal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--mr-white);
  border: 1px solid rgba(11, 31, 51, 0.06);
  padding: 7px 9px;
  border-radius: 4px;
  font-size: 11px;
}

[data-mr="1"] .mr-mockup__deal-name {
  font-weight: 600;
  color: var(--mr-text-primary);
}

[data-mr="1"] .mr-mockup__deal-amt {
  color: var(--mr-text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
}

[data-mr="1"] .mr-mockup__deal--accent {
  border-color: rgba(20, 149, 139, 0.45);
  background: rgba(20, 149, 139, 0.04);
}

[data-mr="1"] .mr-mockup__deal--success {
  border-color: rgba(22, 163, 74, 0.4);
  background: rgba(22, 163, 74, 0.05);
}

[data-mr="1"] .mr-mockup__deal--ghost {
  background: transparent;
  border: 1px dashed rgba(11, 31, 51, 0.12);
  color: var(--mr-text-muted);
  justify-content: center;
  font-size: 10.5px;
  font-weight: 500;
}

/* ---------- Lead-gen variant ---------- */
[data-mr="1"] .mr-mockup__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

[data-mr="1"] .mr-mockup__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--mr-gray-050);
  border: 1px solid var(--mr-border-subtle);
  border-radius: var(--mr-radius-sm);
  font-size: 11.5px;
  color: var(--mr-gray-700);
  font-weight: 500;
  flex: 1;
}

[data-mr="1"] .mr-mockup__search svg {
  color: var(--mr-gray-500);
}

[data-mr="1"] .mr-mockup__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

[data-mr="1"] .mr-mockup__table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mr-gray-500);
  padding: 6px 8px;
  border-bottom: 1px solid var(--mr-border-subtle);
}

[data-mr="1"] .mr-mockup__table tbody td {
  padding: 8px;
  border-bottom: 1px solid rgba(11, 31, 51, 0.04);
  color: var(--mr-text-secondary);
}

[data-mr="1"] .mr-mockup__table tbody tr:last-child td {
  border-bottom: none;
}

[data-mr="1"] .mr-mockup__row--accent td {
  background: rgba(20, 149, 139, 0.05);
}

[data-mr="1"] .mr-mockup__row--ghost td {
  text-align: center;
  color: var(--mr-text-muted);
  font-style: italic;
  font-size: 10.5px;
}

/* ---------- Automation variant ---------- */
[data-mr="1"] .mr-mockup__rule {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--mr-gray-050);
  border-radius: var(--mr-radius-md);
  border: 1px solid var(--mr-border-subtle);
}

[data-mr="1"] .mr-mockup__rule-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--mr-text-secondary);
  line-height: 1.4;
}

[data-mr="1"] .mr-mockup__rule-tag {
  flex-shrink: 0;
  display: inline-block;
  width: 50px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 6px;
  border-radius: 3px;
  color: var(--mr-white);
}

[data-mr="1"] .mr-mockup__rule-tag--when { background: var(--mr-teal-700); }
[data-mr="1"] .mr-mockup__rule-tag--if   { background: var(--mr-navy-700); }
[data-mr="1"] .mr-mockup__rule-tag--then { background: var(--mr-teal-500); }

[data-mr="1"] .mr-mockup__rule-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(11, 31, 51, 0.08);
}

[data-mr="1"] .mr-mockup__rule-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  padding: 3px 8px;
  background: var(--mr-white);
  border: 1px solid var(--mr-border-subtle);
  border-radius: var(--mr-radius-pill);
  color: var(--mr-text-secondary);
}

[data-mr="1"] .mr-mockup__log {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-mr="1"] .mr-mockup__log-head {
  font-size: 10px;
  font-weight: 700;
  color: var(--mr-gray-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-mr="1"] .mr-mockup__log-row {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  padding: 5px 0;
  color: var(--mr-text-secondary);
}

[data-mr="1"] .mr-mockup__log-time {
  font-family: var(--mr-font-mono);
  font-size: 10.5px;
  color: var(--mr-text-muted);
}

/* ---------- Integrations variant ---------- */
[data-mr="1"] .mr-mockup__integrations {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-mr="1"] .mr-mockup__int-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-mr="1"] .mr-mockup__int-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mr-gray-500);
}

[data-mr="1"] .mr-mockup__int-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

[data-mr="1"] .mr-mockup__int-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  background: var(--mr-white);
  border: 1px solid var(--mr-border-subtle);
  border-radius: var(--mr-radius-sm);
  font-size: 11px;
  color: var(--mr-text-primary);
}

[data-mr="1"] .mr-mockup__int-card strong {
  font-weight: 600;
  font-size: 11.5px;
}

[data-mr="1"] .mr-mockup__int-card span {
  font-size: 10px;
  color: var(--mr-text-muted);
}

[data-mr="1"] .mr-mockup__int-card--featured {
  border-color: rgba(20, 149, 139, 0.5);
  background: rgba(20, 149, 139, 0.05);
}

[data-mr="1"] .mr-mockup__int-card--featured span {
  color: var(--mr-teal-700);
  font-weight: 600;
}

/* ---------- Security variant ---------- */
[data-mr="1"] .mr-mockup__shield-wrap {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: center;
}

[data-mr="1"] .mr-mockup__shield {
  color: var(--mr-teal-500);
}

[data-mr="1"] .mr-mockup__cert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

[data-mr="1"] .mr-mockup__cert {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  background: var(--mr-gray-050);
  border: 1px solid var(--mr-border-subtle);
  border-radius: var(--mr-radius-sm);
  font-size: 11px;
}

[data-mr="1"] .mr-mockup__cert strong {
  font-weight: 700;
  color: var(--mr-text-primary);
  font-size: 11.5px;
  letter-spacing: -0.005em;
}

[data-mr="1"] .mr-mockup__cert span {
  font-size: 10px;
  color: var(--mr-text-muted);
}

/* ---------- The-loop variant ---------- */
[data-mr="1"] .mr-mockup__loop-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

[data-mr="1"] .mr-mockup__loop-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  font-size: 10px;
  font-weight: 600;
  color: var(--mr-text-muted);
}

[data-mr="1"] .mr-mockup__loop-step span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mr-gray-100);
  color: var(--mr-gray-500);
  font-weight: 700;
  font-size: 11px;
  border: 2px solid var(--mr-gray-200);
}

[data-mr="1"] .mr-mockup__loop-step.is-done span {
  background: var(--mr-teal-100);
  border-color: var(--mr-teal-500);
  color: var(--mr-teal-700);
}

[data-mr="1"] .mr-mockup__loop-step.is-active span {
  background: var(--mr-teal-500);
  border-color: var(--mr-teal-500);
  color: var(--mr-white);
  box-shadow: 0 0 0 4px rgba(20, 149, 139, 0.22);
}

[data-mr="1"] .mr-mockup__loop-step.is-done strong,
[data-mr="1"] .mr-mockup__loop-step.is-active strong {
  color: var(--mr-text-primary);
}

[data-mr="1"] .mr-mockup__loop-arrow {
  flex: 0 0 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--mr-teal-500), var(--mr-teal-400));
  border-radius: 1px;
  margin-top: 14px;
}

[data-mr="1"] .mr-mockup__loop-arrow--inactive {
  background: var(--mr-gray-200);
}

[data-mr="1"] .mr-mockup__timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(11, 31, 51, 0.08);
}

[data-mr="1"] .mr-mockup__timeline-item {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  font-size: 11px;
  color: var(--mr-text-secondary);
}

[data-mr="1"] .mr-mockup__timeline-item--active {
  background: rgba(20, 149, 139, 0.05);
  margin: 0 -8px;
  padding: 5px 8px;
  border-radius: 4px;
}

[data-mr="1"] .mr-mockup__time {
  font-family: var(--mr-font-mono);
  font-size: 10.5px;
  color: var(--mr-text-muted);
}

/* ---------- Pricing variant ---------- */
[data-mr="1"] .mr-mockup__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

[data-mr="1"] .mr-mockup__tier {
  position: relative;
  padding: 14px 12px;
  background: var(--mr-white);
  border: 1px solid var(--mr-border-subtle);
  border-radius: var(--mr-radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-mr="1"] .mr-mockup__tier--featured {
  border-color: rgba(20, 149, 139, 0.5);
  background: linear-gradient(180deg, var(--mr-white) 0%, rgba(20, 149, 139, 0.05) 100%);
  box-shadow: 0 8px 24px rgba(20, 149, 139, 0.12);
}

[data-mr="1"] .mr-mockup__tier-ribbon {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  background: var(--mr-teal-500);
  color: var(--mr-white);
  border-radius: var(--mr-radius-pill);
  white-space: nowrap;
}

[data-mr="1"] .mr-mockup__tier-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mr-text-muted);
}

[data-mr="1"] .mr-mockup__tier--featured .mr-mockup__tier-label {
  color: var(--mr-teal-700);
}

[data-mr="1"] .mr-mockup__tier-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--mr-text-primary);
  letter-spacing: -0.02em;
}

[data-mr="1"] .mr-mockup__tier-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--mr-text-secondary);
}

[data-mr="1"] .mr-mockup__tier-features li {
  position: relative;
  padding-left: 14px;
}

[data-mr="1"] .mr-mockup__tier-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--mr-teal-500);
  font-weight: 700;
}

/* ---------- Replace-CRM variant ---------- */
[data-mr="1"] .mr-mockup__migrate {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}

[data-mr="1"] .mr-mockup__migrate-side {
  padding: 14px 12px;
  background: var(--mr-gray-050);
  border: 1px solid var(--mr-border-subtle);
  border-radius: var(--mr-radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-mr="1"] .mr-mockup__migrate-side--accent {
  background: linear-gradient(180deg, var(--mr-white) 0%, rgba(20, 149, 139, 0.06) 100%);
  border-color: rgba(20, 149, 139, 0.3);
}

[data-mr="1"] .mr-mockup__migrate-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mr-text-muted);
}

[data-mr="1"] .mr-mockup__migrate-side--accent .mr-mockup__migrate-label {
  color: var(--mr-teal-700);
}

[data-mr="1"] .mr-mockup__migrate-stat {
  display: flex;
  flex-direction: column;
  font-size: 10.5px;
  color: var(--mr-text-muted);
}

[data-mr="1"] .mr-mockup__migrate-stat span {
  font-size: 14px;
  font-weight: 700;
  color: var(--mr-text-primary);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

[data-mr="1"] .mr-mockup__migrate-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--mr-teal-500);
}

[data-mr="1"] .mr-mockup__migrate-arrow span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mr-teal-700);
  white-space: nowrap;
}

/* ---------- Owners cockpit variant ---------- */
[data-mr="1"] .mr-mockup__cockpit {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px;
}

[data-mr="1"] .mr-mockup__cockpit-card {
  padding: 12px 10px;
  background: var(--mr-gray-050);
  border: 1px solid var(--mr-border-subtle);
  border-radius: var(--mr-radius-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-mr="1"] .mr-mockup__cockpit-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mr-text-muted);
}

[data-mr="1"] .mr-mockup__cockpit-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--mr-text-primary);
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

[data-mr="1"] .mr-mockup__cockpit-value--ok { color: var(--mr-success-700); }

[data-mr="1"] .mr-mockup__cockpit-trend {
  font-size: 10.5px;
  color: var(--mr-success-700);
  font-weight: 600;
  background: rgba(22, 163, 74, 0.10);
  padding: 1px 6px;
  border-radius: var(--mr-radius-pill);
}

[data-mr="1"] .mr-mockup__cockpit-bar {
  height: 6px;
  background: var(--mr-gray-200);
  border-radius: 3px;
  overflow: hidden;
}

[data-mr="1"] .mr-mockup__cockpit-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--mr-teal-500), var(--mr-teal-400));
  border-radius: 3px;
}

[data-mr="1"] .mr-mockup__cockpit-foot {
  font-size: 10px;
  color: var(--mr-text-muted);
}

[data-mr="1"] .mr-mockup__cockpit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
}

[data-mr="1"] .mr-mockup__cockpit-list li {
  display: flex;
  justify-content: space-between;
  color: var(--mr-text-secondary);
}

/* ---------- Sales-managers / leaderboard variant ---------- */
[data-mr="1"] .mr-mockup__table--leaderboard tbody tr td:first-child {
  font-family: var(--mr-font-mono);
  font-size: 10.5px;
  color: var(--mr-text-muted);
  font-weight: 700;
  width: 30px;
}

/* ---------- Sales-agents variant ---------- */
[data-mr="1"] .mr-mockup__agent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

[data-mr="1"] .mr-mockup__agent-today,
[data-mr="1"] .mr-mockup__agent-quote {
  padding: 12px;
  background: var(--mr-gray-050);
  border: 1px solid var(--mr-border-subtle);
  border-radius: var(--mr-radius-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-mr="1"] .mr-mockup__agent-quote {
  background: linear-gradient(180deg, var(--mr-white) 0%, rgba(20, 149, 139, 0.05) 100%);
  border-color: rgba(20, 149, 139, 0.22);
}

[data-mr="1"] .mr-mockup__agent-eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mr-text-muted);
  margin-bottom: 2px;
}

[data-mr="1"] .mr-mockup__agent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 11px;
  color: var(--mr-text-secondary);
  border-top: 1px solid rgba(11, 31, 51, 0.04);
}

[data-mr="1"] .mr-mockup__agent-row:first-of-type { border-top: none; }

[data-mr="1"] .mr-mockup__agent-quote-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  font-size: 10.5px;
  color: var(--mr-text-muted);
}

[data-mr="1"] .mr-mockup__agent-quote-step.is-active {
  color: var(--mr-text-primary);
  font-weight: 600;
}

[data-mr="1"] .mr-mockup__agent-cta {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--mr-teal-500);
  color: var(--mr-white);
  border: none;
  border-radius: var(--mr-radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: default;
  letter-spacing: -0.005em;
}

/* ---------- Operations / audit variant ---------- */
[data-mr="1"] .mr-mockup__audit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-mr="1"] .mr-mockup__audit-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mr-text-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mr-border-subtle);
  margin-bottom: 4px;
}

[data-mr="1"] .mr-mockup__audit-row {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 10px;
  padding: 6px 0;
  font-size: 11px;
  color: var(--mr-text-secondary);
  border-bottom: 1px solid rgba(11, 31, 51, 0.04);
  line-height: 1.4;
}

[data-mr="1"] .mr-mockup__audit-row strong {
  font-weight: 600;
  color: var(--mr-text-primary);
}

[data-mr="1"] .mr-mockup__audit-row em {
  font-style: normal;
  color: var(--mr-teal-700);
}

[data-mr="1"] .mr-mockup__audit-row--accent {
  background: rgba(20, 149, 139, 0.05);
  margin: 0 -6px;
  padding: 6px;
  border-radius: 4px;
  border-bottom: none;
}

/* ============================================================
   ACQUIRER TRACK VARIANTS (Phase acqmk.3)
   Oversight-derived variants shade toward the oversight navy/teal
   within the existing frame; new atoms below are incremental.
============================================================ */

/* Oversight tint — the four estate-view variants. */
[data-mr="1"] .mr-mockup--oversight-dashboard .mr-mockup__frame,
[data-mr="1"] .mr-mockup--iso-league-table .mr-mockup__frame,
[data-mr="1"] .mr-mockup--risk-radar .mr-mockup__frame,
[data-mr="1"] .mr-mockup--merchant-attrition .mr-mockup__frame {
  background: linear-gradient(180deg, var(--mr-white) 0%, #F2F6FC 100%);
}

[data-mr="1"] .mr-mockup--oversight-dashboard .mr-mockup__breadcrumb,
[data-mr="1"] .mr-mockup--iso-league-table .mr-mockup__breadcrumb,
[data-mr="1"] .mr-mockup--risk-radar .mr-mockup__breadcrumb,
[data-mr="1"] .mr-mockup--merchant-attrition .mr-mockup__breadcrumb {
  color: var(--mr-teal-700);
}

/* Extra chip state — hard-red trend (merchant gone to zero). */
[data-mr="1"] .mr-mockup__chip--danger {
  background: var(--mr-error-100);
  color: var(--mr-error-700);
}

/* ---------- oversight-dashboard variant ---------- */
[data-mr="1"] .mr-mockup__cockpit--kpis {
  grid-template-columns: repeat(4, 1fr);
}

[data-mr="1"] .mr-mockup__cockpit--kpis .mr-mockup__cockpit-card {
  padding: 10px 9px;
  gap: 4px;
}

[data-mr="1"] .mr-mockup__cockpit--kpis .mr-mockup__cockpit-value {
  font-size: 15px;
}

[data-mr="1"] .mr-mockup__cockpit-value--warn {
  color: var(--mr-amber-700);
}

@media (max-width: 560px) {
  [data-mr="1"] .mr-mockup__cockpit--kpis {
    grid-template-columns: 1fr 1fr;
  }
}

[data-mr="1"] .mr-mockup__alert-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-mr="1"] .mr-mockup__alert-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: var(--mr-radius-pill);
  border: 1px solid transparent;
  letter-spacing: 0.01em;
}

[data-mr="1"] .mr-mockup__alert-chip strong {
  font-weight: 800;
}

[data-mr="1"] .mr-mockup__alert-chip--ok {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.22);
  color: var(--mr-success-700);
}

[data-mr="1"] .mr-mockup__alert-chip--amber {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.28);
  color: var(--mr-amber-700);
}

[data-mr="1"] .mr-mockup__alert-chip--red {
  background: rgba(220, 38, 38, 0.07);
  border-color: rgba(220, 38, 38, 0.26);
  color: var(--mr-error-700);
}

[data-mr="1"] .mr-mockup__spark {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px 8px;
  background: var(--mr-white);
  border: 1px solid var(--mr-border-subtle);
  border-radius: var(--mr-radius-sm);
  color: var(--mr-teal-500);
}

[data-mr="1"] .mr-mockup__spark svg {
  width: 100%;
  height: 56px;
  display: block;
}

[data-mr="1"] .mr-mockup__spark-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mr-text-muted);
}

/* ---------- iso-league-table variant ---------- */
[data-mr="1"] .mr-mockup__adoption-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

[data-mr="1"] .mr-mockup__adoption-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--mr-gray-300);
  background: transparent;
}

[data-mr="1"] .mr-mockup__adoption-dots i.is-on {
  background: var(--mr-teal-500);
  border-color: var(--mr-teal-500);
}

/* ---------- risk-radar variant ---------- */
[data-mr="1"] .mr-mockup__risk-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-mr="1"] .mr-mockup__risk-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  font-size: 11px;
  color: var(--mr-text-secondary);
  border-bottom: 1px solid rgba(11, 31, 51, 0.04);
  line-height: 1.4;
}

[data-mr="1"] .mr-mockup__risk-row strong {
  font-weight: 600;
  color: var(--mr-text-primary);
}

[data-mr="1"] .mr-mockup__risk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--mr-radius-pill);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

[data-mr="1"] .mr-mockup__risk-badge--amber {
  background: var(--mr-amber-100);
  color: var(--mr-amber-700);
}

[data-mr="1"] .mr-mockup__risk-badge--red {
  background: var(--mr-error-100);
  color: var(--mr-error-700);
}

[data-mr="1"] .mr-mockup__risk-mix {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--mr-white);
  border: 1px solid var(--mr-border-subtle);
  border-radius: var(--mr-radius-sm);
}

[data-mr="1"] .mr-mockup__risk-mix-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mr-text-muted);
}

[data-mr="1"] .mr-mockup__risk-bar {
  display: grid;
  grid-template-columns: 110px 1fr 64px;
  gap: 10px;
  align-items: center;
}

[data-mr="1"] .mr-mockup__risk-bar-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--mr-text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

[data-mr="1"] .mr-mockup__risk-bar .mr-mockup__cockpit-bar {
  display: block;
}

[data-mr="1"] .mr-mockup__cockpit-bar--danger span {
  background: linear-gradient(90deg, var(--mr-error-500), #EF4444);
}

/* ---------- merchant-attrition variant ---------- */
[data-mr="1"] .mr-mockup__attr {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 10px;
}

@media (max-width: 560px) {
  [data-mr="1"] .mr-mockup__attr {
    grid-template-columns: 1fr;
  }
}

[data-mr="1"] .mr-mockup__attr-panel {
  padding: 12px;
  background: var(--mr-white);
  border: 1px solid var(--mr-border-subtle);
  border-radius: var(--mr-radius-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-mr="1"] .mr-mockup__table--mini {
  font-size: 10.5px;
}

[data-mr="1"] .mr-mockup__table--mini thead th {
  padding: 4px 6px;
  font-size: 9px;
}

[data-mr="1"] .mr-mockup__table--mini tbody td {
  padding: 6px;
}

[data-mr="1"] .mr-mockup__attr-queue {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-mr="1"] .mr-mockup__attr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 10.5px;
  color: var(--mr-text-secondary);
  border-bottom: 1px solid rgba(11, 31, 51, 0.04);
}

[data-mr="1"] .mr-mockup__attr-row:last-child {
  border-bottom: none;
}

[data-mr="1"] .mr-mockup__attr-row .mr-mockup__chip {
  flex-shrink: 0;
  min-width: 52px;
  text-align: center;
}

[data-mr="1"] .mr-mockup__commentary {
  padding: 8px 12px;
  font-size: 11px;
  font-style: italic;
  color: var(--mr-text-secondary);
  background: rgba(20, 149, 139, 0.05);
  border-left: 2px solid var(--mr-teal-500);
  border-radius: 0 var(--mr-radius-sm) var(--mr-radius-sm) 0;
  line-height: 1.5;
}

/* ---------- boarding-velocity variant ---------- */
[data-mr="1"] .mr-mockup__stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- iso-branding variant ---------- */
[data-mr="1"] .mr-mockup__brand-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 16px;
  background: linear-gradient(180deg, var(--mr-white) 0%, var(--mr-gray-050) 100%);
  border: 1px solid var(--mr-border-subtle);
  border-radius: var(--mr-radius-md);
}

[data-mr="1"] .mr-mockup__brand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

[data-mr="1"] .mr-mockup__brand-logo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mr-navy-800);
  padding: 4px 10px;
  border: 1.5px solid var(--mr-navy-800);
  border-radius: 4px;
}

[data-mr="1"] .mr-mockup__brand-swatches {
  display: inline-flex;
  gap: 4px;
}

[data-mr="1"] .mr-mockup__brand-swatches i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

[data-mr="1"] .mr-mockup__brand-swatches i:first-child {
  background: var(--mr-navy-800);
}

[data-mr="1"] .mr-mockup__brand-swatches i:last-child {
  background: var(--mr-teal-500);
}

[data-mr="1"] .mr-mockup__brand-headline {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mr-text-primary);
}

[data-mr="1"] .mr-mockup__brand-sub {
  font-size: 11px;
  color: var(--mr-text-muted);
}

[data-mr="1"] .mr-mockup__brand-cta {
  display: inline-block;
  margin-top: 4px;
  padding: 8px 16px;
  background: var(--mr-teal-500);
  color: var(--mr-white);
  border-radius: var(--mr-radius-sm);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

[data-mr="1"] .mr-mockup__brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- acquirer-licensing variant ---------- */
[data-mr="1"] .mr-mockup--acquirer-licensing .mr-mockup__tier-price {
  font-size: 13.5px;
  line-height: 1.3;
}