/*
 * css/metaclarity.css
 * MetaClarity product landing — aligned with home.css design system
 */

:root {
  /* Mirror home.css spacing tokens */
  --mc-section-gap: 80px;
  --mc-section-gap-split: 40px;
  --mc-section-gap-tight: 32px;
  --mc-section-header-gap: 64px;
  --mc-hero-space-top: 8px;
  --mc-meta-blue-light: color-mix(in srgb, var(--mc-meta-blue) 14%, var(--bg-secondary));
}

@media (max-width: 1024px) {
  :root {
    --mc-section-gap: 64px;
    --mc-section-gap-split: 32px;
    --mc-section-gap-tight: 24px;
    --mc-section-header-gap: 48px;
    --mc-hero-space-top: 8px;
  }
}

@media (max-width: 768px) {
  :root {
    --mc-section-gap: 56px;
    --mc-section-gap-split: 28px;
    --mc-section-gap-tight: 20px;
    --mc-section-header-gap: 40px;
    --mc-hero-space-top: 6px;
  }
}

.mc-page {
  background: var(--bg-primary);
  color: var(--text-primary);
  color-scheme: light;
  font-family: var(--font-family);
  overflow-x: clip;
}

.mc-page main {
  background: var(--bg-primary);
  overflow-x: clip;
}

#how-it-works,
#features {
  scroll-margin-top: 80px;
}

/* ── Scroll progress ─────────────────────────────────────────── */

.mc-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 300;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--gradient-primary);
  will-change: transform;
}

/* ── Section header ──────────────────────────────────────────── */

.mc-section-header {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}

.mc-section-header--left {
  max-width: none;
  margin-inline: 0;
  margin-bottom: 32px;
  text-align: left;
}

.mc-section-title {
  margin-bottom: 16px;
  font-size: var(--fs-section-title);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.mc-section-subtitle {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ── Hero ────────────────────────────────────────────────────── */

.mc-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-primary);
  background-image:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--border-primary) 40%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--border-primary) 40%, transparent) 1px,
      transparent 1px
    ),
    var(--gradient-hero);
  background-size: 48px 48px, 48px 48px, auto;
}

.mc-hero::before,
.mc-hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
}

.mc-hero::before {
  top: -8%;
  right: -4%;
  width: min(52vw, 640px);
  height: min(68vh, 720px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--fabric-blue) 16%, transparent) 0%,
    transparent 72%
  );
}

.mc-hero::after {
  bottom: -6%;
  right: 8%;
  width: min(40vw, 480px);
  height: min(44vh, 480px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--brand-primary) 10%, transparent) 0%,
    transparent 70%
  );
}

.mc-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.32fr);
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding: var(--mc-hero-space-top) var(--layout-gutter) var(--mc-section-gap-tight);
}

@media (min-width: 1025px) {
  .mc-hero__inner {
    gap: 24px;
  }

  .mc-hero__visual {
    min-width: 0;
  }
}

/* Desktop: keep left copy as-is; inset dashboard between badge and CTAs */
@media (min-width: 1301px) {
  .mc-hero__inner {
    align-items: stretch;
  }

  .mc-hero__visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    /* Clears left badge band (top) and CTA button band (bottom) */
    padding-block: 72px 52px;
    min-height: 0;
    overflow: hidden;
  }

  .mc-dashboard {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .mc-dashboard__body {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }

  .mc-dashboard__content,
  .mc-dashboard__main {
    min-height: 0;
  }

  .mc-dashboard__main {
    overflow: hidden;
  }

  .mc-dashboard__lineage {
    min-height: 0;
  }
}

.mc-hero__content {
  max-width: 580px;
  min-width: 0;
  margin-top: 30px;
}

.mc-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-bottom: 28px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--border-radius);
}

.mc-hero__badge.hero-badge-beam {
  border: none;
  color: inherit;
  background-color: transparent;
  box-shadow: none;
}

.mc-hero__badge-icon-wrap {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  overflow: visible;
  border: none;
  box-shadow: none;
  background: transparent;
}

.mc-hero__badge-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  overflow: visible;
  border: none;
  outline: none;
}

.mc-hero__badge-icon__spark {
  transform-box: fill-box;
  transform-origin: center;
}

.mc-hero__badge-copy {
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.mc-hero__badge-dot {
  display: inline-block;
  font-size: var(--fs-sm);
  line-height: 1;
  vertical-align: middle;
}

.mc-hero__title {
  margin-bottom: 20px;
  font-size: var(--fs-hero-title);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  overflow-wrap: break-word;
}

.mc-hero__title--animated {
  overflow: hidden;
}

.mc-hero__title-line {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-size: 1em;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(16px);
  animation: mc-hero-title-rise 0.6s ease-out forwards;
}

.mc-hero__title-line--lead,
.mc-hero__title-line--emphasis,
.mc-hero__title-line--body {
  font-size: 1em;
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
  background: none;
}

.mc-hero__title-line--gradient {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-size: 1em;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mc-hero__title-line:nth-child(1) { animation-delay: 0.1s; }
.mc-hero__title-line:nth-child(2) { animation-delay: 0.3s; }
.mc-hero__title-line:nth-child(3) { animation-delay: 0.5s; }
.mc-hero__title-line:nth-child(4) { animation-delay: 0.7s; }

@media (min-width: 1600px) {
  .mc-hero__title {
    font-size: clamp(var(--fontsize-5xl), 3.2vw, var(--fontsize-6xl));
  }
}

@media (min-width: 2200px) {
  .mc-hero__title {
    font-size: clamp(var(--fontsize-6xl), 2.8vw, var(--fontsize-7xl));
  }
}

@keyframes mc-hero-title-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-hero__title-line {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.mc-hero__description {
  max-width: 520px;
  margin-bottom: 40px;
  font-size: var(--fs-md);
  line-height: 1.85;
  color: var(--text-secondary);
  overflow-wrap: break-word;
}

.mc-hero__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  max-width: 100%;
  padding: 30px 0px;
}

.mc-hero__actions .btn {
  min-height: 0;
  padding: 7px 15px;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.mc-hero__actions .btn--primary {
  padding: 7px 17px;
  font-weight: 600;
}

.mc-hero__actions .btn--outline,
.mc-hero__actions .btn--hero-demo {
  padding: 7px 13px;
  font-weight: 500;
}

.mc-hero__actions .btn__icon {
  width: 16px;
  height: 16px;
}

/* Hero demo button hover — see styles.css .btn--hero-demo */

/* Dashboard mockup */

.mc-hero__visual {
  min-width: 0;
  width: 100%;
}

.mc-dashboard {
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  box-shadow:
    0 20px 50px color-mix(in srgb, var(--text-primary) 8%, transparent),
    0 0 0 1px color-mix(in srgb, var(--border-primary) 60%, transparent);
  overflow: hidden;
}

.mc-dashboard__body {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  align-items: stretch;
}

.mc-dashboard__sidebar {
  display: flex;
  flex-direction: column;
  padding: 14px 8px;
  border-right: 1px solid var(--border-primary);
  background: var(--bg-secondary);
}

.mc-dashboard__brand {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 6px 12px;
  margin-bottom: 2px;
}

.mc-dashboard__brand-icon {
  flex-shrink: 0;
  width: 20px;
  height: 18px;
}

.mc-dashboard__brand-name {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.mc-dashboard__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mc-dashboard__nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--border-radius);
  white-space: nowrap;
  pointer-events: none;
}

.mc-dashboard__nav-item svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.85;
}

.mc-dashboard__nav-item--active {
  color: var(--governance-green);
  background: color-mix(in srgb, var(--governance-green) 10%, transparent);
  font-weight: 600;
}

.mc-dashboard__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-primary);
}

.mc-dashboard__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-primary);
}

.mc-dashboard__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 7px 11px;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
}

.mc-dashboard__search svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.55;
}

.mc-dashboard__topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mc-dashboard__topbar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--text-muted);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
}

.mc-dashboard__topbar-icon svg {
  width: 13px;
  height: 13px;
}

.mc-dashboard__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-on-brand);
  border-radius: 50%;
  background: var(--gradient-button);
}

.mc-dashboard__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px;
  min-width: 0;
}

.mc-dashboard__welcome {
  margin-bottom: 12px;
}

.mc-dashboard__welcome-title {
  margin-bottom: 2px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.mc-dashboard__welcome-sub {
  font-size: var(--fs-micro);
  line-height: 1.4;
  color: var(--text-muted);
}

.mc-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.mc-dashboard__stat {
  padding: 10px 9px;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
}

.mc-dashboard__stat-label {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--text-muted);
}

.mc-dashboard__stat-value {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.mc-dashboard__stat-delta {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.3;
}

.mc-dashboard__stat-delta--up {
  color: var(--governance-green);
}

.mc-dashboard__widgets {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 8px;
  align-items: stretch;
  flex: 1;
}

.mc-dashboard__widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}

.mc-dashboard__lineage {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  min-height: 168px;
  padding: 12px;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  overflow: hidden;
}

.mc-dashboard__lineage-title,
.mc-dashboard__assistant-title {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-primary);
}

.mc-dashboard__widget-link {
  flex-shrink: 0;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--governance-green);
  white-space: nowrap;
}

/*
 * Data Lineage Overview
 * Each step = colored box + label directly underneath (never beside).
 * Desktop/tablet/laptop/4K: horizontal SQL → dbt → Snowflake → PBI
 */
.mc-dashboard__lineage-flow {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2px;
  width: 100%;
  min-width: 0;
  margin-top: auto;
  padding-top: 8px;
}

.mc-dashboard__lineage-step {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.mc-dashboard__lineage-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  font-size: var(--fs-micro);
  font-weight: 700;
  border-radius: var(--border-radius);
  color: var(--text-on-brand);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.mc-dashboard__lineage-icon--sql { background: var(--mc-lineage-sql); }
.mc-dashboard__lineage-icon--dbt { background: var(--mc-lineage-dbt); color: var(--text-primary); font-size: var(--fs-micro); }
.mc-dashboard__lineage-icon--snow { background: var(--mc-lineage-snow); font-size: var(--fs-sm); line-height: 1; }
.mc-dashboard__lineage-icon--pbi { background: var(--mc-lineage-pbi); color: var(--text-primary); font-size: var(--fs-micro); }

.mc-dashboard__lineage-name {
  display: block;
  width: 100%;
  font-size: var(--fs-micro);
  line-height: 1.3;
  text-align: center;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.mc-dashboard__lineage-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 14px;
  margin-top: 8px;
  font-size: var(--fs-micro);
  line-height: 1;
  color: color-mix(in srgb, var(--text-muted) 70%, transparent);
}

.mc-dashboard__assistant {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 168px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--governance-green) 15%, transparent);
  border-radius: var(--border-radius);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--governance-green) 6%, var(--bg-primary)) 0%,
      var(--bg-primary) 55%
    );
}

.mc-dashboard__assistant-title {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  color: var(--governance-green);
}

.mc-dashboard__assistant-title svg {
  width: 13px;
  height: 13px;
}

.mc-dashboard__assistant-input {
  padding: 7px 9px;
  margin-bottom: 8px;
  font-size: var(--fs-micro);
  line-height: 1.4;
  color: var(--text-muted);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
}

.mc-dashboard__assistant-prompts {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-dashboard__assistant-prompts li {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 5px 0;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--text-secondary);
}

.mc-dashboard__assistant-prompts li + li {
  border-top: 1px solid color-mix(in srgb, var(--border-primary) 70%, transparent);
}

.mc-dashboard__prompt-icon {
  flex-shrink: 0;
  color: var(--fabric-blue);
  font-size: var(--fs-micro);
  line-height: 1.45;
}

.mc-dashboard__assistant-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 8px;
}

.mc-dashboard__assistant-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--text-on-brand);
  border: none;
  border-radius: 50%;
  background: var(--gradient-button);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 30%, transparent);
  cursor: default;
  flex-shrink: 0;
}

.mc-dashboard__assistant-send svg {
  width: 13px;
  height: 13px;
}

/* ── Features grid ───────────────────────────────────────────── */

.mc-features {
  padding-top: calc(var(--mc-section-gap-split) - 8px);
  padding-bottom: calc(var(--mc-section-gap-split) - 8px);
}

.mc-features__inner {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.mc-features__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  max-width: var(--layout-content);
  margin-inline: auto;
}

.mc-feature-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 0;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background-color: var(--bg-card);
  /* Clip corner blob; card-spotlight sets overflow:visible — restore clip here */
  overflow: hidden;
}

/* Decorative quarter-circle blob — bottom-right, tinted per card icon color */
.mc-feature-card::before {
  content: '';
  position: absolute;
  right: -52px;
  bottom: -52px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background-color: color-mix(in srgb, var(--text-muted) 8%, var(--bg-card));
}

.mc-feature-card:has(.mc-feature-card__icon--sky)::before {
  background-color: color-mix(in srgb, var(--fabric-blue) 10%, var(--bg-card));
}

.mc-feature-card:has(.mc-feature-card__icon--purple)::before {
  background-color: color-mix(in srgb, var(--brand-primary) 10%, var(--bg-card));
}

.mc-feature-card:has(.mc-feature-card__icon--blue)::before {
  background-color: color-mix(in srgb, var(--fabric-blue) 10%, var(--bg-card));
}

.mc-feature-card:has(.mc-feature-card__icon--orange)::before {
  background-color: color-mix(in srgb, var(--wai-gold) 10%, var(--bg-card));
}

.mc-feature-card:has(.mc-feature-card__icon--violet)::before {
  background-color: color-mix(in srgb, var(--brand-secondary) 10%, var(--bg-card));
}

.mc-feature-card:has(.mc-feature-card__icon--lavender)::before {
  background-color: color-mix(in srgb, var(--mc-meta-blue) 10%, var(--bg-card));
}

.mc-feature-card__icon {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0;
  border-radius: var(--border-radius);
  flex-shrink: 0;
  align-self: center;
  background: transparent;
  overflow: visible;
}

.mc-feature-card__icon--sky,
.mc-feature-card__icon--purple,
.mc-feature-card__icon--blue,
.mc-feature-card__icon--orange,
.mc-feature-card__icon--violet,
.mc-feature-card__icon--lavender {
  background: transparent;
}

.mc-feature-card__svg,
.mc-feature-card__icon img,
.mc-feature-card__icon svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  overflow: visible;
}

.mc-feature-card__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.mc-feature-card__list {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

.mc-feature-card__list li {
  position: relative;
  margin-bottom: 4px;
  padding-left: calc(40px + 8px);
}

.mc-feature-card__list li::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-primary);
}

/* ── Process workflow (home .workflow animation, 6 steps) ─────── */

.mc-process.workflow--mc {
  padding-top: var(--mc-section-gap-split);
  padding-bottom: var(--mc-section-gap-tight);
  background-color: var(--bg-secondary);
}

.mc-process__inner {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.workflow--mc .workflow__steps {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.workflow--mc .workflow-step__text {
  max-width: 140px;
  margin-inline: auto;
}

.workflow--mc .workflow-step:nth-child(1) .workflow-step__icon svg {
  animation-delay: 0.05s;
}

.workflow--mc .workflow-step:nth-child(2) .workflow-step__icon svg {
  animation-delay: 0.23s;
}

.workflow--mc .workflow-step:nth-child(3) .workflow-step__icon svg {
  animation-delay: 0.41s;
}

.workflow--mc .workflow-step:nth-child(4) .workflow-step__icon svg {
  animation-delay: 0.59s;
}

.workflow--mc .workflow-step:nth-child(5) .workflow-step__icon svg {
  animation-delay: 0.77s;
}

.workflow--mc .workflow-step:nth-child(6) .workflow-step__icon svg {
  animation-delay: 0.95s;
}

.workflow--mc .workflow-connector:nth-child(1) {
  left: calc(100% / 12 + 24px + var(--workflow-connector-gap));
  width: calc(100% / 6 - 48px - var(--workflow-connector-gap) * 2);
}

.workflow--mc .workflow-connector:nth-child(2) {
  left: calc(100% / 4 + 24px + var(--workflow-connector-gap));
  width: calc(100% / 6 - 48px - var(--workflow-connector-gap) * 2);
}

.workflow--mc .workflow-connector:nth-child(3) {
  left: calc(100% * 5 / 12 + 24px + var(--workflow-connector-gap));
  width: calc(100% / 6 - 48px - var(--workflow-connector-gap) * 2);
}

.workflow--mc .workflow-connector:nth-child(4) {
  left: calc(100% * 7 / 12 + 24px + var(--workflow-connector-gap));
  width: calc(100% / 6 - 48px - var(--workflow-connector-gap) * 2);
}

.workflow--mc .workflow-connector:nth-child(5) {
  left: calc(100% * 3 / 4 + 24px + var(--workflow-connector-gap));
  width: calc(100% / 6 - 48px - var(--workflow-connector-gap) * 2);
}

@supports (animation-timeline: --workflow-reveal) {
  .workflow--mc .workflow-step:nth-child(1) {
    animation-delay: 0.05s;
  }

  .workflow--mc .workflow-step:nth-child(2) {
    animation-delay: 0.17s;
  }

  .workflow--mc .workflow-step:nth-child(3) {
    animation-delay: 0.29s;
  }

  .workflow--mc .workflow-step:nth-child(4) {
    animation-delay: 0.41s;
  }

  .workflow--mc .workflow-step:nth-child(5) {
    animation-delay: 0.53s;
  }

  .workflow--mc .workflow-step:nth-child(6) {
    animation-delay: 0.65s;
  }

  .workflow--mc .workflow-connector:nth-child(1) .workflow-connector__arrow {
    animation-delay: 0.29s;
  }

  .workflow--mc .workflow-connector:nth-child(2) .workflow-connector__arrow {
    animation-delay: 0.41s;
  }

  .workflow--mc .workflow-connector:nth-child(3) .workflow-connector__arrow {
    animation-delay: 0.53s;
  }

  .workflow--mc .workflow-connector:nth-child(4) .workflow-connector__arrow {
    animation-delay: 0.65s;
  }

  .workflow--mc .workflow-connector:nth-child(5) .workflow-connector__arrow {
    animation-delay: 0.77s;
  }
}

@media (min-width: 1025px) {
  .mc-dashboard__lineage {
    padding: 10px 8px;
  }

  .mc-dashboard__lineage-flow {
    gap: 0;
  }

  .mc-dashboard__lineage-icon {
    width: 28px;
    height: 28px;
  }

  .mc-dashboard__lineage-arrow {
    width: 10px;
    margin-top: 6px;
  }

  .mc-dashboard__widget-head {
    gap: 6px;
    margin-bottom: 8px;
  }
}

@media (min-width: 1301px) {
  .mc-dashboard__lineage {
    padding: 12px 10px;
  }

  .mc-dashboard__lineage-icon {
    width: 30px;
    height: 30px;
  }

  .mc-dashboard__lineage-arrow {
    width: 12px;
    margin-top: 7px;
  }
}

@media (min-width: 1600px) {
  .mc-dashboard__lineage {
    padding: 14px 12px;
    min-height: 180px;
  }

  .mc-dashboard__lineage-icon {
    width: 34px;
    height: 34px;
  }

  .mc-dashboard__lineage-arrow {
    width: 16px;
    margin-top: 9px;
  }
}

@media (min-width: 2200px) {
  .mc-dashboard__lineage-icon {
    width: 36px;
    height: 36px;
  }
}

@media (min-width: 1025px) {
  @supports (animation-timeline: --workflow-reveal) {
    .workflow--mc .workflow-connector:nth-child(1) .workflow-connector__arrow {
      animation:
        workflow-chevron-in 0.35s ease forwards,
        fabric-flow-desktop-arrow-pulse 1.4s ease-in-out 0.9s infinite;
      animation-timeline: --workflow-reveal, auto;
      animation-range: entry 10% entry 45%, normal;
      animation-delay: 0.29s, 0s;
    }

    .workflow--mc .workflow-connector:nth-child(2) .workflow-connector__arrow {
      animation:
        workflow-chevron-in 0.35s ease forwards,
        fabric-flow-desktop-arrow-pulse 1.4s ease-in-out 0.9s infinite;
      animation-timeline: --workflow-reveal, auto;
      animation-range: entry 10% entry 45%, normal;
      animation-delay: 0.41s, 0s;
    }

    .workflow--mc .workflow-connector:nth-child(3) .workflow-connector__arrow {
      animation:
        workflow-chevron-in 0.35s ease forwards,
        fabric-flow-desktop-arrow-pulse 1.4s ease-in-out 0.9s infinite;
      animation-timeline: --workflow-reveal, auto;
      animation-range: entry 10% entry 45%, normal;
      animation-delay: 0.53s, 0s;
    }

    .workflow--mc .workflow-connector:nth-child(4) .workflow-connector__arrow {
      animation:
        workflow-chevron-in 0.35s ease forwards,
        fabric-flow-desktop-arrow-pulse 1.4s ease-in-out 0.9s infinite;
      animation-timeline: --workflow-reveal, auto;
      animation-range: entry 10% entry 45%, normal;
      animation-delay: 0.65s, 0s;
    }

    .workflow--mc .workflow-connector:nth-child(5) .workflow-connector__arrow {
      animation:
        workflow-chevron-in 0.35s ease forwards,
        fabric-flow-desktop-arrow-pulse 1.4s ease-in-out 0.9s infinite;
      animation-timeline: --workflow-reveal, auto;
      animation-range: entry 10% entry 45%, normal;
      animation-delay: 0.77s, 0s;
    }
  }
}

@media (max-width: 1024px) {
  .workflow--mc .workflow__steps {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .workflow--mc .workflow-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    align-items: start;
    padding: 16px;
    margin-bottom: 0;
    text-align: left;
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius);
    background-color: var(--bg-card);
    position: relative;
  }

  .workflow--mc .workflow-step:not(:last-child) {
    margin-bottom: 44px;
  }

  .workflow--mc .workflow-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -36px;
    z-index: 2;
    width: 10px;
    height: 6px;
    transform: translateX(-50%);
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    animation: workflow-mobile-chevron-pulse 1.4s ease-in-out infinite;
  }

  .workflow--mc .workflow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -34px;
    width: 2px;
    height: 32px;
    transform: translateX(-50%);
    background-image: repeating-linear-gradient(
      to bottom,
      currentColor 0,
      currentColor 7px,
      transparent 7px,
      transparent 12px
    );
    background-size: 2px 12px;
    animation: workflow-mobile-dash 0.55s linear infinite;
  }

  .workflow--mc .workflow-step:nth-child(1)::before,
  .workflow--mc .workflow-step:nth-child(1)::after {
    color: color-mix(in srgb, var(--ai-cyan) 55%, var(--governance-green));
  }

  .workflow--mc .workflow-step:nth-child(2)::before,
  .workflow--mc .workflow-step:nth-child(2)::after {
    color: var(--brand-primary);
  }

  .workflow--mc .workflow-step:nth-child(3)::before,
  .workflow--mc .workflow-step:nth-child(3)::after {
    color: var(--brand-light);
  }

  .workflow--mc .workflow-step:nth-child(4)::before,
  .workflow--mc .workflow-step:nth-child(4)::after {
    color: color-mix(in srgb, var(--ai-cyan) 55%, var(--governance-green));
  }

  .workflow--mc .workflow-step:nth-child(5)::before,
  .workflow--mc .workflow-step:nth-child(5)::after {
    color: var(--brand-primary);
  }

  .workflow--mc .workflow-step__icon {
    grid-row: span 2;
    margin-bottom: 0;
  }

  .workflow--mc .workflow-step__title {
    margin-bottom: 0;
  }

  .workflow--mc .workflow-step__text {
    max-width: none;
    margin-inline: 0;
    text-align: left;
  }
}

@media (max-width: 768px) {
  .workflow--mc .workflow-step {
    padding: 14px;
  }
}

/* ── Showcase panels ───────────────────────────────────────────── */

.mc-showcase {
  padding-top: var(--mc-section-gap-tight);
  padding-bottom: var(--mc-section-gap-split);
  background-color: var(--bg-secondary);
}

.mc-showcase__inner {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.mc-showcase__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.mc-showcase__grid > * {
  min-width: 0;
}

.mc-showcase-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background-color: var(--bg-primary);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.mc-showcase-panel__header {
  margin-bottom: 20px;
}

.mc-showcase-panel__title {
  margin-bottom: 6px;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.mc-showcase-panel__desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

/* AI Assistant mock */

.mc-ai-mock {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
  overflow: hidden;
}

.mc-ai-mock__chat {
  flex: 1;
  padding: 18px 16px 14px;
}

.mc-ai-mock__user-bubble {
  max-width: 92%;
  margin: 0 0 16px 0;
  padding: 10px 14px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-primary);
  text-align: left;
  border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius);
  background: color-mix(in srgb, var(--governance-green) 10%, var(--bg-primary));
  border: 1px solid color-mix(in srgb, var(--governance-green) 25%, transparent);
}

.mc-ai-mock__user-label {
  font-weight: 600;
}

.mc-ai-mock__reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.mc-ai-mock__reply-icon {
  flex-shrink: 0;
}

.mc-ai-mock__reply-name {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-primary);
}

.mc-ai-mock__reply-text {
  margin: 0 0 10px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-secondary);
}

.mc-ai-mock__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
}

.mc-ai-mock__table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: var(--fs-caption);
}

.mc-ai-mock__table th,
.mc-ai-mock__table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-primary);
  white-space: nowrap;
}

.mc-ai-mock__table th {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-secondary);
}

.mc-ai-mock__table tbody tr:last-child td {
  border-bottom: none;
}

.mc-ai-mock__link {
  font-weight: 500;
  color: var(--fabric-blue);
  text-decoration: none;
}

.mc-ai-mock__link:hover {
  text-decoration: underline;
  cursor:default;
}

.mc-ai-mock__composer {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-primary);
  background: var(--bg-primary);
}

.mc-ai-mock__input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-family: inherit;
  font-size: var(--fs-caption);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
}

.mc-ai-mock__input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 70%, var(--bg-primary));
}

.mc-ai-mock__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  align-self: stretch;
  color: var(--text-on-brand);
  border: none;
  border-radius: var(--border-radius);
  background: var(--governance-green);
  cursor: pointer;
  font-family: var(--font-family);
}

.mc-ai-mock__send svg {
  width: 16px;
  height: 16px;
}

/* Data Lens mock */

.mc-lens-flow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 18px;
}

.mc-lens-flow__step {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mc-lens-flow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius);
}

.mc-lens-flow__icon svg {
  width: 20px;
  height: 20px;
}

.mc-lens-flow__icon--green {
  color: var(--governance-green);
  background: color-mix(in srgb, var(--governance-green) 10%, var(--bg-primary));
}

.mc-lens-flow__icon--blue {
  color: var(--fabric-blue);
  background: color-mix(in srgb, var(--fabric-blue) 10%, var(--bg-primary));
}

.mc-lens-flow__icon--purple {
  color: var(--brand-secondary);
  background: color-mix(in srgb, var(--brand-primary) 10%, var(--bg-primary));
}

.mc-lens-flow__icon--orange {
  color: var(--wai-gold);
  background: color-mix(in srgb, var(--wai-gold) 10%, var(--bg-primary));
}

.mc-lens-flow__label {
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: var(--text-secondary);
}

.mc-lens-flow__arrow {
  flex-shrink: 0;
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--bg-card-hover);
}

.mc-lens-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
  min-width: 0;
  max-width: 100%;
}

.mc-lens-body__left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.mc-lens-query {
  margin: 0;
  padding: 8px 10px;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--text-primary);
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--governance-green) 10%, var(--bg-primary));
  border: 1px solid color-mix(in srgb, var(--governance-green) 25%, transparent);
  overflow-wrap: anywhere;
}

.mc-lens-code {
  flex: 1;
  max-width: 100%;
  padding: 12px;
  margin: 0;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: var(--fs-micro);
  line-height: 1.55;
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mc-lens-code .kw { color: var(--brand-secondary); font-weight: 600; }
.mc-lens-code .fn { color: var(--fabric-blue); }
.mc-lens-code .op { color: var(--text-muted); }
.mc-lens-code .str { color: var(--governance-green); }

.mc-lens-chart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
}

.mc-lens-chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.mc-lens-chart__title {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-primary);
}

.mc-lens-chart__filter {
  padding: 4px 8px;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
}

.mc-lens-chart__bars {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.mc-lens-chart__row {
  display: grid;
  grid-template-columns: 72px 1fr 42px;
  align-items: center;
  gap: 6px;
}

.mc-lens-chart__label,
.mc-lens-chart__value {
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.mc-lens-chart__value {
  text-align: right;
  font-weight: 500;
  color: var(--text-secondary);
}

.mc-lens-chart__bar {
  height: 8px;
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--bg-secondary));
  overflow: hidden;
}

.mc-lens-chart__bar-fill {
  height: 100%;
  border-radius: var(--border-radius);
  background: linear-gradient(90deg, var(--brand-light), var(--brand-secondary));
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.mc-lens-exports {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.mc-lens-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
}

.mc-lens-export-btn svg {
  width: 14px;
  height: 14px;
}

.mc-lens-export-btn--excel { color: var(--governance-green); }
.mc-lens-export-btn--pdf { color: var(--mc-pdf-red); }
.mc-lens-export-btn--ppt { color: var(--wai-gold); }
.mc-lens-export-btn--share { color: var(--fabric-blue); }

/* ── Integrations & Impact ─────────────────────────────────────── */

.mc-impact {
  padding-top: var(--mc-section-gap-split);
  padding-bottom: var(--mc-section-gap-tight);
  background-color: var(--bg-primary);
}

.mc-impact__inner {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.mc-impact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.mc-impact-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background-color: var(--bg-primary);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.mc-impact-card__title {
  margin-bottom: 22px;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.mc-integrations__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 22px;
}

.mc-integrations__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.mc-integrations__category-title {
  margin-bottom: 14px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-muted) 70%, var(--bg-primary));
}

.mc-integrations__logos {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-integrations__logos--grid {
  display: grid;
  align-items: center;
  justify-items: center;
}

.mc-integrations__logos--cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.mc-integrations__logos--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mc-integrations__logos--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mc-integrations__logos--grid > li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding-inline: 8px;
}

.mc-integrations__logos--grid > li + li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: var(--bg-card-hover);
}

.mc-integrations__logo-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mc-integrations__logo-mark {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mc-integrations__logo-text {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  color: var(--text-secondary);
  white-space: nowrap;
}

.mc-integrations__logo-img {
  display: block;
  width: 100%;
  height: 42px;
  object-fit: contain;
  object-position: center;
}

.mc-integrations__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 24px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--brand-primary);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.mc-integrations__link:hover,
.mc-integrations__link:focus-visible {
  color: var(--brand-light);
  text-decoration: none;
}

.mc-integrations__link:hover .mc-integrations__link-text,
.mc-integrations__link:focus-visible .mc-integrations__link-text {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mc-integrations__link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.mc-impact-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 16px;
  flex: 1;
}

.mc-impact-stat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mc-impact-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
}

.mc-impact-stat__icon--green {
  color: var(--governance-green);
  background: color-mix(in srgb, var(--governance-green) 10%, var(--bg-primary));
}

.mc-impact-stat__icon--purple {
  color: var(--brand-secondary);
  background: color-mix(in srgb, var(--brand-primary) 10%, var(--bg-primary));
}

.mc-impact-stat__icon--blue {
  color: var(--fabric-blue);
  background: color-mix(in srgb, var(--fabric-blue) 10%, var(--bg-primary));
}

.mc-impact-stat__svg,
.mc-impact-stat__icon img,
.mc-impact-stat__icon svg {
  width: 20px;
  height: 20px;
}

.mc-impact-stat__copy {
  min-width: 0;
}

.mc-impact-stat__value {
  display: block;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
}

.mc-impact-stat__label {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--text-muted);
}

/* ── CTA ─────────────────────────────────────────────────────── */

.cta-banner--metaclarity {
  padding: 32px var(--layout-gutter) 64px;
}

.cta-banner--metaclarity .cta-banner__inner {
  gap: 24px 32px;
  padding: 32px 40px;
}

.cta-banner--metaclarity .cta-banner__visual {
  width: 76px;
  height: 76px;
}

.cta-banner--metaclarity .cta-banner__icon {
  width: 68px;
  height: 68px;
}

.cta-banner--metaclarity .cta-banner__title {
  margin-bottom: 8px;
  font-size: var(--fs-card-title);
  line-height: 1.3;
}

.cta-banner--metaclarity .cta-banner__text {
  max-width: 520px;
  font-size: var(--fs-base);
  line-height: 1.55;
}

.cta-banner--metaclarity .cta-banner__actions {
  flex-wrap: nowrap;
  gap: 12px;
}

.cta-banner--metaclarity .cta-banner__actions .btn {
  min-height: 0;
  padding: 7px 15px;
  font-size: var(--fs-sm);
}

.cta-banner--metaclarity .cta-banner__actions .btn--primary {
  padding: 7px 17px;
  font-weight: 600;
}

.cta-banner--metaclarity .cta-banner__actions .btn--outline,
.cta-banner--metaclarity .cta-banner__actions .btn--hero-demo {
  padding: 7px 13px;
  font-weight: 500;
}

.cta-banner--metaclarity .cta-banner__actions .btn__icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 1280px) {
  .cta-banner--metaclarity .cta-banner__actions .btn {
    padding: 7px 15px;
    font-size: var(--fs-sm);
  }

  .cta-banner--metaclarity .cta-banner__actions .btn--primary {
    padding: 7px 17px;
  }

  .cta-banner--metaclarity .cta-banner__actions .btn--outline,
  .cta-banner--metaclarity .cta-banner__actions .btn--hero-demo {
    padding: 7px 13px;
  }
}

@media (max-width: 1024px) {
  .cta-banner--metaclarity {
    padding: 28px var(--layout-gutter) 56px;
  }

  .cta-banner--metaclarity .cta-banner__inner {
    gap: 20px;
    padding: 28px 32px;
  }

  .cta-banner--metaclarity .cta-banner__visual {
    width: 68px;
    height: 68px;
  }

  .cta-banner--metaclarity .cta-banner__icon {
    width: 60px;
    height: 60px;
  }

  .cta-banner--metaclarity .cta-banner__actions {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .cta-banner--metaclarity .cta-banner__inner {
    align-items: center;
    text-align: center;
    padding: 24px 16px;
  }

  .cta-banner--metaclarity .cta-banner__visual {
    align-self: center;
  }

  .cta-banner--metaclarity .cta-banner__content {
    width: 100%;
    text-align: center;
  }

  .cta-banner--metaclarity .cta-banner__text {
    margin-inline: auto;
  }

  .cta-banner--metaclarity .cta-banner__actions {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 8px;
  }

  .cta-banner--metaclarity .cta-banner__actions .btn {
    width: auto;
    flex: 0 1 auto;
    max-width: 100%;
    padding: 6px 10px;
    font-size: var(--fs-caption);
  }
}

@media (max-width: 400px) {
  .cta-banner--metaclarity .cta-banner__actions .btn {
    padding: 6px 8px;
    font-size: var(--fs-micro);
  }

  .cta-banner--metaclarity .cta-banner__actions .btn__icon {
    display: none;
  }
}

.mc-page main:has(> .cta-banner:last-child) + .site-footer {
  margin-top: 0;
}

/* ── Scroll reveal ─────────────────────────────────────────────── */

.mc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.mc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Keep shared card-hover lift after reveal settles (reveal transform would otherwise win) */
.mc-reveal.is-visible.card-hover:hover,
.mc-reveal.is-visible.card-hover:focus-visible,
.mc-reveal.is-visible.mc-showcase-panel:hover,
.mc-reveal.is-visible.mc-showcase-panel:focus-visible,
.mc-reveal.is-visible.mc-impact-card:hover,
.mc-reveal.is-visible.mc-impact-card:focus-visible {
  transform: var(--card-hover-lift);
}

.mc-reveal-stagger-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.mc-reveal-stagger-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .mc-reveal,
  .mc-reveal-stagger-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mc-hero__badge {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .mc-hero__badge-icon animate,
  .mc-hero__badge-icon animateTransform {
    display: none;
  }

  .mc-feature-card:hover .mc-feature-card__icon img,
  .mc-feature-card:hover .mc-feature-card__icon svg {
    transform: none;
  }
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .mc-features__grid {
    gap: 14px;
  }

  .mc-feature-card {
    padding: 18px;
  }
}

/* Hero: stack text above dashboard between tablet-wide and small desktop */
@media (max-width: 1300px) {
  .mc-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mc-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    width: 100%;
  }

  .mc-hero__title,
  .mc-hero__description {
    text-align: center;
  }

  .mc-hero__title-line {
    margin-inline: auto;
    font-size: 1em;
  }

  .mc-hero__badge {
    align-self: center;
  }

  .mc-hero__actions {
    justify-content: center;
  }

  .mc-hero__visual {
    max-width: min(100%, 820px);
    margin-inline: auto;
  }
}

@media (max-width: 1024px) {
  .mc-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: var(--mc-hero-space-top) var(--layout-gutter) var(--mc-section-gap-tight);
  }

  .mc-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: none;
  }

  .mc-hero__title,
  .mc-hero__description {
    text-align: center;
  }

  .mc-hero__title-line {
    margin-inline: auto;
    font-size: 1em;
  }

  .mc-hero__badge {
    align-self: center;
  }

  .mc-hero__actions {
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .mc-hero__actions::-webkit-scrollbar {
    display: none;
  }

  .mc-hero__actions .btn {
    width: auto;
    flex-shrink: 0;
    justify-content: center;
    padding: 7px 15px;
    font-size: var(--fs-sm);
  }

  .mc-hero__actions .btn--primary {
    padding: 7px 17px;
  }

  .mc-hero__actions .btn--outline,
  .mc-hero__actions .btn--hero-demo {
    padding: 7px 13px;
  }

  .mc-hero__visual {
    max-width: min(100%, 560px);
    margin-inline: auto;
  }

  .mc-section-header {
    margin-bottom: 40px;
  }

  .mc-section-header--left {
    margin-bottom: 28px;
  }

  .mc-features__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: none;
  }

  .mc-feature-card {
    min-height: 0;
  }

  .mc-showcase__grid,
  .mc-impact__grid {
    grid-template-columns: 1fr;
  }

  .mc-lens-body {
    grid-template-columns: 1fr;
  }

  .mc-lens-body__left {
    min-width: 0;
    max-width: 100%;
  }

  .mc-lens-flow__label {
    font-size: var(--fs-micro);
  }

  .mc-dashboard__body {
    grid-template-columns: 1fr;
  }

  .mc-dashboard__sidebar {
    display: none;
  }

  .mc-dashboard__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .mc-dashboard__widgets {
    grid-template-columns: 1fr;
  }

  .mc-dashboard__lineage {
    min-height: 148px;
  }

  .mc-dashboard__lineage-flow {
    gap: 4px;
    justify-content: space-evenly;
  }

  .mc-dashboard__lineage-icon {
    width: 34px;
    height: 34px;
  }

  .mc-dashboard__lineage-arrow {
    width: 16px;
    margin-top: 9px;
  }
}

@media (max-width: 768px) {
  .mc-hero__inner {
    padding: var(--mc-hero-space-top) 20px var(--mc-section-gap-tight);
  }

  .mc-hero__badge {
    font-size: inherit;
    padding: 8px 14px;
    margin-bottom: 22px;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    align-self: center;
  }

  .mc-hero__badge-copy {
    font-size: var(--fs-caption);
  }

  .mc-hero__badge-dot {
    font-size: var(--fs-sm);
  }

  .mc-hero__title {
    font-size: clamp(var(--fontsize-3xl), 9vw, var(--fontsize-4xl));
    line-height: 1.12;
    margin-bottom: 18px;
  }

  .mc-hero__title-line {
    font-size: 1em;
  }

  .mc-hero__description {
    max-width: 100%;
    margin-bottom: 28px;
    font-size: var(--fs-lg);
    line-height: 1.65;
  }

  .mc-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }

  .mc-hero__actions .btn {
    width: auto;
    flex: 0 1 auto;
    justify-content: center;
    padding: 6px 10px;
    font-size: var(--fs-caption);
  }

  .mc-hero__actions .btn--primary {
    padding: 6px 12px;
  }

  .mc-hero__actions .btn--outline,
  .mc-hero__actions .btn--hero-demo {
    padding: 6px 10px;
  }

  .mc-section-header {
    margin-bottom: 32px;
  }

  .mc-section-header--left {
    margin-bottom: 24px;
  }

  .mc-features__grid {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .mc-showcase-panel,
  .mc-impact-card {
    padding: 20px;
  }

  .mc-showcase-panel__title,
  .mc-impact-card__title {
    font-size: var(--fs-base);
  }

  .mc-integrations__logos--cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 8px;
  }

  .mc-integrations__logos--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 8px;
  }

  .mc-integrations__logos--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 8px;
  }

  .mc-integrations__logos--grid > li {
    height: 44px;
  }

  .mc-integrations__logo-img {
    height: 36px;
  }

  .mc-impact-stats {
    grid-template-columns: 1fr;
  }

  .mc-integrations__split {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .mc-lens-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 8px;
    justify-items: center;
  }

  .mc-lens-flow__step {
    flex: unset;
    width: 100%;
  }

  .mc-lens-flow__arrow {
    display: none;
  }

  .mc-lens-exports {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mc-lens-export-btn {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .mc-hero__actions .btn {
    padding: 8px 12px;
    font-size: var(--fs-caption);
  }

  .mc-hero__actions .btn__icon {
    display: none;
  }

  :root {
    --mc-section-gap: 48px;
    --mc-section-gap-split: 24px;
    --mc-section-gap-tight: 16px;
    --mc-section-header-gap: 32px;
    --mc-hero-space-top: 8px;
  }

  .mc-hero__inner {
    padding: var(--mc-hero-space-top) 16px var(--mc-section-gap-tight);
  }

  .mc-hero__title {
    font-size: clamp(32px, 9.2vw, 40px);
    line-height: 1.1;
  }

  .mc-hero__title-line {
    font-size: 1em;
  }

  .mc-hero__description {
    font-size: var(--fs-base);
    line-height: 1.7;
  }

  .mc-hero__badge-copy {
    font-size: var(--fs-caption);
  }

  .mc-dashboard__stats {
    grid-template-columns: 1fr;
  }

  .mc-dashboard__main {
    padding: 10px;
  }

  .mc-dashboard__widget-head {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .mc-dashboard__lineage {
    min-height: 0;
    padding: 12px 10px;
  }

  /* Mobile: keep one clear, continuous left-to-right lineage flow. */
  .mc-dashboard__lineage-flow {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0;
    padding-top: 10px;
  }

  .mc-dashboard__lineage-step {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    gap: 5px;
  }

  .mc-dashboard__lineage-arrow--mid {
    width: 10px;
    min-height: 0;
    margin-top: 6px;
    font-size: var(--fs-micro);
  }

  .mc-dashboard__lineage-arrow--mid::before {
    content: none;
  }

  .mc-dashboard__lineage-icon {
    width: 28px;
    height: 28px;
  }

  .mc-dashboard__lineage-arrow {
    width: 10px;
    margin-top: 6px;
  }

  .mc-dashboard__lineage-name {
    font-size: var(--fs-micro);
    line-height: 1.2;
    overflow-wrap: normal;
  }

  .mc-feature-card {
    padding: 20px;
  }
}