/* itsrlabs/apps/platform/static/css/home/public/marketing.css
   ───────────────────────────────────────────────────────────────
   Marketing surface for itsrlabs.com.
   Refined / restrained — designed to read as a serious scientific
   infrastructure company, not a startup landing page. Outfit only,
   conservative weights and sizes, minimal ornament.

   Used by: home/public/index.html, about.html, platform.html, contact.html.
*/

/* ── PRODUCT TILES ────────────────────────────────────────────── */
.mk-tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 760px) { .mk-tile-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .mk-tile-grid { grid-template-columns: repeat(3, 1fr); } }

.mk-tile {
  position: relative;
  background: var(--mk-bone);
  border: 1px solid var(--mk-rule);
  padding: 1.75rem 1.6rem;
  border-radius: 0.85rem;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  text-decoration: none;
  color: var(--mk-ink);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.mk-tile:hover {
  transform: translateY(-3px);
  border-color: var(--mk-rule-strong);
  box-shadow: 0 14px 28px -18px rgba(17, 37, 60, 0.25);
  color: var(--mk-ink);
}
.mk-section--dark .mk-tile {
  background:
    linear-gradient(180deg, rgba(46, 80, 119, 0.22), rgba(8, 23, 42, 0.54)),
    rgba(250, 246, 236, 0.045);
  border-color: rgba(250, 246, 236, 0.12);
  color: var(--mk-bone);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.mk-section--dark .mk-tile:hover {
  border-color: rgba(250, 246, 236, 0.22);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
  color: var(--mk-bone);
}

.mk-tile--scope    { --mk-tile-accent: var(--mk-emerald); }
.mk-tile--script   { --mk-tile-accent: var(--mk-paprika); }
.mk-tile--scrxiv   { --mk-tile-accent: var(--mk-navy); }

.mk-tile-accent {
  height: 2px;
  width: 2rem;
  background: var(--mk-tile-accent, var(--mk-navy));
  margin-bottom: 1.35rem;
  border-radius: 999px;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.4, 1);
}
.mk-tile:hover .mk-tile-accent { width: 3.5rem; }

.mk-tile-tag {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mk-tile-accent, var(--mk-navy));
  font-weight: 500;
}
.mk-tile-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1.55rem;
  margin: 0.55rem 0 0.5rem;
  letter-spacing: -0.01em;
  color: var(--mk-ink);
}
.mk-section--dark .mk-tile-name { color: var(--mk-bone); }
.mk-tile-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mk-text-muted);
  margin: 0;
}
.mk-section--dark .mk-tile-desc { color: var(--mk-text-on-dark-muted); }
.mk-tile-list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  color: var(--mk-text);
}
.mk-section--dark .mk-tile-list { color: var(--mk-text-on-dark); }
.mk-tile-list li {
  display: flex;
  gap: 0.65rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--mk-rule);
}
.mk-section--dark .mk-tile-list li {
  border-top-color: rgba(250, 246, 236, 0.09);
}
.mk-tile-list li:first-child { border-top: 0; }
.mk-tile-list li::before {
  content: "—";
  color: var(--mk-text-faint);
}
.mk-section--dark .mk-tile-list li::before { color: var(--mk-text-on-dark-muted); }
/* ── INSIGHT CARDS (problem statement) ─────────────────────────── */
.mk-insight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 860px) {
  .mk-insight-grid { grid-template-columns: repeat(3, 1fr); }
}

.mk-insight-card {
  --mk-insight-color: var(--mk-teal);
  background: rgba(250, 246, 236, 0.72);
  border: 1px solid var(--mk-rule);
  border-radius: 0.85rem;
  padding: 1.9rem 1.65rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.mk-insight-card--scale { --mk-insight-color: var(--mk-teal); }
.mk-insight-card--workflow { --mk-insight-color: var(--mk-berry); }
.mk-insight-card--repro { --mk-insight-color: var(--mk-violet); }
.mk-insight-accent {
  display: block;
  width: 2.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--mk-insight-color, var(--mk-navy));
  margin-bottom: 1.35rem;
}
.mk-insight-kicker {
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-insight-color, var(--mk-text-faint));
  margin-bottom: 0.6rem;
}
.mk-insight-card h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--mk-ink);
  margin: 0 0 0.6rem;
  line-height: 1.25;
}
.mk-insight-card p {
  font-family: 'Outfit', sans-serif;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--mk-text-muted);
  margin: 0;
}
.mk-insight-card .mk-link {
  margin-top: auto;
  padding-top: 1.1rem;
}

/* Focal statement — lifted card under the problem insights. */
.mk-focal {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
  max-width: max-content;
  width: fit-content;
  padding: 1.15rem 1.65rem;
  background: rgba(250, 246, 236, 0.72);
  border: 1px solid var(--mk-rule);
  border-radius: 0.85rem;
  text-align: center;
}
.mk-focal p {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--mk-ink);
  max-width: none;
}
.mk-focal-lead {
  font-size: clamp(1.12rem, 1.45vw, 1.28rem);
}
.mk-focal-soft {
  font-weight: 400;
}

/* ── PIPELINE / PROCESS STEPS ─────────────────────────────────── */
.mk-pipeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 900px) {
  .mk-pipeline { grid-template-columns: repeat(4, 1fr); }
}
.mk-step {
  background: rgba(250, 246, 236, 0.72);
  border: 1px solid var(--mk-rule);
  border-radius: 0.85rem;
  padding: 1.35rem 1.25rem;
  position: relative;
  min-height: 100%;
}
@media (min-width: 900px) {
  .mk-step {
    border-left: 1px solid var(--mk-rule);
  }
}
.mk-step-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--mk-text-faint);
  text-transform: uppercase;
}
.mk-step-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  margin: 0.6rem 0 0.45rem;
  color: var(--mk-ink);
  letter-spacing: -0.005em;
}
.mk-step-body {
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--mk-text-muted);
  margin: 0;
}
.mk-section--dark .mk-step {
  background: rgba(250, 246, 236, 0.06);
  border-color: var(--mk-rule-light);
}
.mk-section--dark .mk-step-num {
  color: var(--mk-text-on-dark-muted);
}
.mk-section--dark .mk-step-title {
  color: var(--mk-bone);
}
.mk-section--dark .mk-step-body {
  color: var(--mk-text-on-dark);
}

/* ── STAT GRID ────────────────────────────────────────────────── */
.mk-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--mk-rule);
  border: 1px solid var(--mk-rule);
  border-radius: 0.85rem;
  overflow: hidden;
}
@media (min-width: 760px) { .mk-stats { grid-template-columns: repeat(4, 1fr); } }
.mk-section--dark .mk-stats {
  background: rgba(221, 214, 196, 0.16);
  border-color: rgba(221, 214, 196, 0.16);
}
.mk-stat {
  padding: 1.4rem 1.25rem 1.3rem;
  background: var(--mk-bone);
  position: relative;
}
.mk-section--dark .mk-stat {
  background: var(--mk-ink);
}
.mk-stat-value {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(1.85rem, 2.7vw, 2.4rem);
  letter-spacing: -0.018em;
  line-height: 1;
  color: var(--mk-ink);
}
.mk-section--dark .mk-stat-value { color: var(--mk-bone); }
.mk-stat-value sup { font-size: 0.55em; vertical-align: top; color: var(--mk-text-muted); margin-left: 0.1em; font-weight: 500; }
.mk-section--dark .mk-stat-value sup { color: var(--mk-text-on-dark-muted); }
.mk-stat-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--mk-text-muted);
  margin-top: 0.6rem;
  line-height: 1.45;
}
.mk-section--dark .mk-stat-label { color: var(--mk-text-on-dark-muted); }

/* ── INFRA / TECH STACK ROW ───────────────────────────────────── */
.mk-stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: 1px;
  background: var(--mk-rule);
  border: 1px solid var(--mk-rule);
  border-radius: 0.85rem;
  overflow: hidden;
}
.mk-section--dark .mk-stack {
  background: rgba(250, 246, 236, 0.12);
  border-color: rgba(250, 246, 236, 0.12);
}
@media (min-width: 700px) { .mk-stack { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .mk-stack { grid-template-columns: repeat(6, 1fr); } }
.mk-stack-cell {
  padding: 1.1rem 1rem;
  background: var(--mk-bone);
  font-family: 'Outfit', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  height: 7.25rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background 0.24s ease;
}
.mk-section--dark .mk-stack-cell {
  background:
    linear-gradient(180deg, rgba(46, 80, 119, 0.2), rgba(8, 23, 42, 0.46)),
    rgba(250, 246, 236, 0.045);
}
.mk-stack-cell:hover,
.mk-stack-cell:focus,
.mk-stack-cell:focus-within {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(250, 246, 236, 1), rgba(236, 230, 214, 0.92)),
    var(--mk-bone);
  outline: 0;
}
.mk-section--dark .mk-stack-cell:hover,
.mk-section--dark .mk-stack-cell:focus,
.mk-section--dark .mk-stack-cell:focus-within {
  background:
    linear-gradient(180deg, rgba(46, 80, 119, 0.32), rgba(8, 23, 42, 0.58)),
    rgba(250, 246, 236, 0.075);
}
.mk-stack-cell .label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mk-text-faint);
  font-weight: 500;
  max-width: 18ch;
  transform: translateY(0.45rem);
  transition: color 0.2s ease, transform 0.24s ease;
}
.mk-section--dark .mk-stack-cell .label {
  color: var(--mk-text-on-dark-muted);
}
.mk-stack-cell .name {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--mk-ink);
  letter-spacing: -0.005em;
  opacity: 0;
  max-width: 20ch;
  transform: translateY(0.55rem);
  transition: opacity 0.18s ease, transform 0.24s ease;
}
.mk-section--dark .mk-stack-cell .name {
  color: var(--mk-bone);
}
.mk-stack-cell:hover .label,
.mk-stack-cell:focus .label,
.mk-stack-cell:focus-within .label {
  color: var(--mk-navy);
  transform: translateY(0);
}
.mk-section--dark .mk-stack-cell:hover .label,
.mk-section--dark .mk-stack-cell:focus .label,
.mk-section--dark .mk-stack-cell:focus-within .label {
  color: var(--mk-bone);
}
.mk-stack-cell:hover .name,
.mk-stack-cell:focus .name,
.mk-stack-cell:focus-within .name {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 699px) {
  .mk-stack-cell {
    height: 7.75rem;
  }
}

/* ── FOUNDERS ─────────────────────────────────────────────────── */
.mk-founders {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 720px) {
  .mk-founders { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.mk-founder {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mk-founder-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--mk-navy) 0%, var(--mk-ink) 100%);
  border-radius: 0.9rem;
  display: flex;
  align-items: end;
  justify-content: start;
  padding: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--mk-rule);
}
.mk-founder-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}
.mk-founder-portrait--placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 28%, rgba(221, 214, 196, 0.12) 0%, transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(46, 80, 119, 0.4) 0%, transparent 60%);
}
.mk-founder-portrait .mk-portrait-init {
  position: relative;
  z-index: 1;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--mk-bone);
  letter-spacing: -0.01em;
  opacity: 0.85;
}
.mk-founder-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1.35rem;
  margin: 0;
  color: var(--mk-ink);
  letter-spacing: -0.01em;
}
.mk-founder-role {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mk-text-muted);
  margin: 0;
}
.mk-founder-bio p {
  font-family: 'Outfit', sans-serif;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--mk-text);
  margin: 0;
}
.mk-founder-bio p + p { margin-top: 0.85rem; }

/* Founders on an ink section (about.html) — .mk-prose is already dark-aware. */
#story .mk-prose p {
  max-width: min(90ch, 100%);
}
#story .mk-section-card {
  padding-bottom: clamp(1.1rem, 2.5vw, 1.75rem);
}
#story .mk-section-head {
  margin-bottom: 0;
}
.mk-section--dark .mk-founder-name { color: var(--mk-bone); }
.mk-section--dark .mk-founder-role { color: var(--mk-text-on-dark-muted); }
.mk-section--dark .mk-founder-bio p { color: var(--mk-text-on-dark); }
.mk-section--dark .mk-founder-portrait { border-color: rgba(250, 246, 236, 0.14); }

/* Founder social links — pill-shaped, sized off .mk-founder-role so the row
   reads as a quiet caption rather than a call to action. */
.mk-founder-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.mk-founder-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--mk-rule);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--mk-text-muted);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.mk-founder-link i {
  font-size: 0.95rem;
  letter-spacing: normal;
}
.mk-founder-link:hover,
.mk-founder-link:focus-visible {
  color: var(--mk-ink);
  border-color: currentColor;
  background: rgba(0, 0, 0, 0.04);
}
.mk-section--dark .mk-founder-link {
  color: var(--mk-text-on-dark-muted);
  border-color: rgba(250, 246, 236, 0.22);
}
.mk-section--dark .mk-founder-link:hover,
.mk-section--dark .mk-founder-link:focus-visible {
  color: var(--mk-bone);
  border-color: rgba(250, 246, 236, 0.5);
  background: rgba(250, 246, 236, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .mk-founder-link { transition: none; }
}

/* ── VALUES / PRINCIPLES ──────────────────────────────────────── */
.mk-principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.mk-principle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.35rem 1.25rem;
  background: rgba(250, 246, 236, 0.72);
  border: 1px solid var(--mk-rule);
  border-radius: 0.85rem;
  align-items: start;
}
@media (min-width: 800px) {
  .mk-principle {
    grid-template-columns: 0.8fr 4fr 5fr;
    gap: 2.25rem;
  }
}
.mk-principle-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--mk-text-faint);
  text-transform: uppercase;
}
.mk-principle-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--mk-ink);
  line-height: 1.3;
}
.mk-principle-body {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--mk-text-muted);
  margin: 0;
}

/* ── TIMELINE / MILESTONES ────────────────────────────────────── */
.mk-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 760px) { .mk-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mk-timeline { grid-template-columns: repeat(4, 1fr); } }
.mk-milestone {
  padding: 1.4rem 1.3rem;
  background: rgba(250, 246, 236, 0.07);
  border: 1px solid rgba(250, 246, 236, 0.12);
  border-radius: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.mk-milestone .when {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--mk-text-muted);
  text-transform: uppercase;
}
.mk-milestone .what {
  font-family: 'Outfit', sans-serif;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--mk-ink);
}
.mk-section--dark .mk-milestone .what {
  color: var(--mk-bone);
}

/* ── PLATFORM PAGE: PRODUCT SECTION ───────────────────────────── */
.mk-product {
  --mk-product-tint: var(--mk-navy);
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding: 0;
  border-bottom: 1px solid var(--mk-rule);
  overflow: hidden;
}
.mk-product--script { --mk-product-tint: var(--mk-paprika); }
.mk-product--scope  { --mk-product-tint: var(--mk-emerald); }
.mk-product--scrxiv { --mk-product-tint: var(--mk-navy); }

/* Product color streak — full row under info + mock; stronger on the
   content side, reaches 0 only at the far edge. Clears at top/bottom. */
.mk-product::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Fade via tint→0% (not keyword transparent) to avoid a muddy edge. */
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--mk-product-tint) 22%, transparent) 0%,
    color-mix(in srgb, var(--mk-product-tint) 16%, transparent) 55%,
    color-mix(in srgb, var(--mk-product-tint) 10%, transparent) 82%,
    color-mix(in srgb, var(--mk-product-tint) 0%, transparent) 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 18%,
    #000 42%,
    #000 58%,
    rgba(0, 0, 0, 0.4) 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 18%,
    #000 42%,
    #000 58%,
    rgba(0, 0, 0, 0.4) 82%,
    transparent 100%
  );
}
.mk-product--reverse::before {
  background: linear-gradient(
    270deg,
    color-mix(in srgb, var(--mk-product-tint) 22%, transparent) 0%,
    color-mix(in srgb, var(--mk-product-tint) 16%, transparent) 55%,
    color-mix(in srgb, var(--mk-product-tint) 10%, transparent) 82%,
    color-mix(in srgb, var(--mk-product-tint) 0%, transparent) 100%
  );
}
.mk-product > * {
  position: relative;
  z-index: 1;
}

/*
 * Bleed each product row to the section-card edges so the streak
 * starts/ends on the card chrome, while content stays on the padded grid.
 */
.mk-section-card > .mk-product {
  margin-inline: calc(-1 * var(--mk-section-card-padding));
  padding: clamp(1.15rem, 2.4vw, 1.65rem) var(--mk-section-card-padding);
  border-bottom: 0;
  width: auto;
  max-width: none;
  box-sizing: border-box;
}
/* Space + divider after the section head, and between product rows. */
.mk-section-card > .mk-section-head:has(+ .mk-product) {
  margin-bottom: 0;
}
.mk-section-card > .mk-section-head + .mk-product,
.mk-section-card > .mk-product + .mk-product {
  margin-top: clamp(1rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--mk-rule);
}
.mk-section--dark .mk-section-card > .mk-section-head + .mk-product,
.mk-section--dark .mk-section-card > .mk-product + .mk-product {
  border-top-color: rgba(250, 246, 236, 0.14);
}
@media (min-width: 960px) {
  .mk-product { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
  .mk-product--reverse { grid-template-columns: 7fr 5fr; }
  .mk-product--reverse .mk-product-mock { order: -1; }
}
.mk-product-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mk-product-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.mk-product-icon {
  width: 4rem;
  height: 4rem;
  flex: 0 0 auto;
  display: block;
  background: #fff;
  border-radius: 1rem;
  object-fit: cover;
  object-position: center;
}
.mk-product-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.mk-product-tag {
  display: inline-block;
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-text-muted);
}
.mk-product-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--mk-ink);
  line-height: 1.05;
}
.mk-product-expand {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--mk-product-tint);
  margin: 0;
  max-width: 48ch;
}
.mk-product-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--mk-text-muted);
  margin: 0;
  max-width: 48ch;
}
.mk-product-features {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mk-product-features li {
  display: flex;
  gap: 0.6rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.94rem;
  color: var(--mk-ink);
  align-items: baseline;
  line-height: 1.5;
}
.mk-product-features li::before {
  content: "—";
  color: var(--mk-text-faint);
}
.mk-section--dark .mk-product-tag,
.mk-section--dark .mk-product-sub,
.mk-section--dark .mk-product-features li {
  color: var(--mk-text-on-dark);
}
.mk-section--dark .mk-product-name {
  color: var(--mk-bone);
}
.mk-section--dark .mk-product-features li::before {
  color: var(--mk-text-on-dark-muted);
}

.mk-product-mock {
  background:
    linear-gradient(180deg, rgba(46, 80, 119, 0.28), rgba(8, 23, 42, 0.72)),
    #0a1526;
  border: 1px solid rgba(250, 246, 236, 0.12);
  border-radius: 0.9rem;
  padding: 1.4rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  color: var(--mk-text-on-dark);
}
.mk-mock-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(250, 246, 236, 0.1);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  color: var(--mk-text-on-dark-muted);
  margin: -1.4rem -1.4rem 1.2rem;
  background: rgba(250, 246, 236, 0.06);
}
.mk-mock-bar .dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; background: var(--mk-text-on-dark-muted);
  opacity: 0.55;
}

/* SCOPE interactive demo plot mock (js/home/public/scope-demo.js) */
.mk-demo {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Plot title sits on the plot itself, centred over the paper the way the
   engine's layout.title does (x: 0.5, xanchor: 'center'). */
.mk-demo-plot-title {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  text-align: center;
  padding: 0 0.2rem 0.35rem;
}
.mk-demo-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: #212529;
}
.mk-demo-title i { font-style: italic; }
.mk-demo-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  line-height: 1.3;
  color: #6c757d;
}
.mk-demo-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.86rem;
}
.mk-demo-tab {
  flex: 1 1 0;
  padding: 0.42rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 246, 236, 0.22);
  color: var(--mk-text-on-dark);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mk-demo-tab i { font-style: italic; }
.mk-demo-tab:hover {
  color: var(--mk-bone);
  border-color: rgba(250, 246, 236, 0.45);
  background: rgba(250, 246, 236, 0.08);
}
.mk-demo-tab.is-active {
  background: var(--mk-bone);
  border-color: transparent;
  color: #11253c;
  font-weight: 600;
}
/* The plot panel reads as a screenshot of the light-mode viewer. */
.mk-demo-panel {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0.65rem 0.6rem 0.7rem 0.8rem;
  box-sizing: border-box;
  background: #fff;
  border-radius: 0.6rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(250, 246, 236, 0.08);
}
.mk-scope-demo-panel {
  display: grid;
  grid-template-columns: 1fr 3.4rem;
  grid-template-rows: auto 1fr;
  column-gap: 0.35rem;
}
.mk-scope-demo-plot {
  position: relative;
  min-width: 0;
  grid-row: 2;
}
/* One SVG per plot family, stacked and cross-faded. */
.mk-scope-demo-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  touch-action: pan-y;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.mk-scope-demo-svg.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mk-scope-demo-pt {
  transition: fill 0.55s ease, opacity 0.3s ease, r 0.12s ease;
}
.mk-scope-demo-pt.is-hovered {
  stroke: #11253c;
  stroke-width: 0.45;
}
.mk-scope-demo-labels text {
  font-family: 'Outfit', sans-serif;
  font-size: 5px;
  font-weight: 600;
  fill: #11253c;
  text-anchor: middle;
  dominant-baseline: central;
}
.mk-scope-demo-labels rect { fill: rgba(255, 255, 255, 0.82); }
.mk-scope-demo-axes path {
  stroke: #adb5bd;
  stroke-width: 0.5;
  stroke-linecap: round;
  fill: none;
}
.mk-scope-demo-axes text {
  font-family: 'Outfit', sans-serif;
  font-size: 3.2px;
  letter-spacing: 0.04em;
  fill: #868e96;
  text-anchor: start;
  dominant-baseline: hanging;
}
.mk-scope-demo-axes.is-dim { opacity: 0.6; }

/* Cartesian chrome shared by the violin and dot plots */
.mk-scope-demo-grid path {
  stroke: #dee2e6;
  stroke-width: 0.3;
  fill: none;
}
.mk-scope-demo-grid path.is-faint { stroke: #f1f3f5; }
.mk-scope-demo-frame {
  fill: none;
  stroke: #dee2e6;
  stroke-width: 0.4;
}
.mk-scope-demo-cart text {
  font-family: 'Outfit', sans-serif;
  font-size: 3.6px;
  fill: #495057;
}
.mk-scope-demo-cart .tick-y {
  text-anchor: end;
  dominant-baseline: central;
}
.mk-scope-demo-cart .tick-gene {
  font-style: italic;
  font-size: 4px;
}
.mk-scope-demo-cart .tick-x {
  text-anchor: end;
  dominant-baseline: hanging;
}
.mk-scope-demo-cart .tick-x.is-upright { text-anchor: middle; }
.mk-scope-demo-cart .axis-title {
  text-anchor: middle;
  font-size: 3.8px;
  fill: #6c757d;
}

.mk-scope-demo-violin {
  transition: opacity 0.2s ease;
}
.mk-scope-demo-violin.is-hovered > path:first-child { stroke-width: 0.9; }
.mk-scope-demo-dot {
  transition: r 0.15s ease;
}
.mk-scope-demo-dot.is-hovered {
  stroke: #11253c;
  stroke-width: 0.5;
}

/* Right rail — legend, colorbars and keys occupy the same slot, cross-fading. */
.mk-scope-demo-rail {
  position: relative;
  align-self: center;
  height: 100%;
  grid-row: 2;
}
.mk-scope-demo-rail-item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.3rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  color: #495057;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.mk-scope-demo-rail-item.is-shown { opacity: 1; visibility: visible; }
.mk-scope-demo-rail-title {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #868e96;
  margin-bottom: 0.15rem;
}
.mk-scope-demo-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.mk-scope-demo-legend-item i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.mk-scope-demo-legend-item.is-muted { opacity: 0.35; }
.mk-scope-demo-cbar { align-items: center; gap: 0.25rem; }
.mk-scope-demo-cbar-bar {
  width: 9px;
  flex: 0 1 55%;
  min-height: 40px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.mk-scope-demo-cbar-max,
.mk-scope-demo-cbar-min { font-size: 0.6rem; color: #868e96; }

/* DotPlot rail — colorbar (Low/Mid/High) over the % Expressing size key */
.mk-scope-demo-dotkey {
  align-items: center;
  gap: 0.2rem;
  font-size: 0.6rem;
}
.mk-scope-demo-dotkey-scale {
  display: flex;
  align-items: stretch;
  gap: 0.2rem;
  height: 34%;
  min-height: 34px;
}
.mk-scope-demo-dotkey-scale .mk-scope-demo-cbar-bar {
  flex: 0 0 8px;
  min-height: 0;
  order: -1;
}
.mk-scope-demo-dotkey-ticks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.54rem;
  color: #868e96;
}
.mk-scope-demo-dotkey-ticks b { font-weight: 400; }
.mk-scope-demo-sizekey {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  color: #868e96;
  align-self: flex-start;
  padding-left: 0.15rem;
}
.mk-scope-demo-sizekey i {
  display: inline-block;
  border-radius: 50%;
  background: #6c757d;
  flex: 0 0 auto;
}

/* Coexpression channel key */
.mk-scope-demo-coexkey { gap: 0.35rem; }
.mk-scope-demo-coexkey-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
}
.mk-scope-demo-coexkey-item i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.mk-scope-demo-coexkey-item em { font-style: italic; }

/* Plotly-style hover label */
.mk-scope-demo-tip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background: #fff;
  border: 1px solid #dee2e6;
  border-left: 3px solid #4C72B0;
  border-radius: 0.25rem;
  padding: 0.28rem 0.45rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  line-height: 1.25;
  color: #212529;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 2;
}
.mk-scope-demo-tip.is-shown { opacity: 1; }
.mk-scope-demo-tip .sub {
  display: block;
  font-size: 0.6rem;
  color: #868e96;
}

@media (prefers-reduced-motion: reduce) {
  .mk-scope-demo-pt,
  .mk-scope-demo-svg,
  .mk-scope-demo-rail-item { transition: none; }
}

/* ── scRIPT interactive demo (js/home/public/script-demo.js) ───── */
.mk-demo-panel--stack {
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.85rem 0.75rem;
}
.mk-demo-stage {
  position: relative;
  flex: 1;
  min-height: 0;
}
.mk-demo-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s;
  font-family: 'Outfit', sans-serif;
}
.mk-demo-slide.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Pipeline — the dashboard Jobs widget, restated for the marketing card. */
.mk-demo-stats {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.mk-demo-stat {
  flex: 1;
  padding: 0.38rem 0.6rem;
  border-radius: 0.6rem;
  background: #f0f9ff;
  border: 1px solid rgba(5, 102, 141, 0.1);
  text-align: center;
}
.mk-demo-stat .value {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.mk-demo-stat .label {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}
.mk-demo-joblist {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.28rem;
  flex: 1;
  min-height: 0;
}
/* Rows share whatever height the panel has left, so the last step can never
   run past the card no matter how narrow the column gets; max-height stops a
   short list from stretching into oversized rows. */
.mk-demo-job {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 0;
  min-height: 0;
  max-height: 3.2rem;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0.3rem 0.6rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(0, 0, 0, 0.04);
  background: #fafbfc;
  transition: background 0.18s ease, transform 0.15s ease, opacity 0.25s ease;
}
.mk-demo-job:hover {
  background: #f0f4ff;
  transform: translateY(-1px);
}
.mk-demo-job.is-queued { opacity: 0.62; }
.mk-demo-job-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: #9ca3af;
}
.mk-demo-job.is-done .mk-demo-job-dot { background: #22c55e; }
.mk-demo-job.is-running .mk-demo-job-dot {
  background: #3b82f6;
  animation: mk-demo-pulse 1.5s ease infinite;
}
@keyframes mk-demo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.mk-demo-job-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mk-demo-job-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
}
.mk-demo-job-meta {
  font-size: 0.66rem;
  color: #6b7280;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-demo-job-bar {
  width: 54px;
  height: 5px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mk-demo-job.is-running .mk-demo-job-bar { opacity: 1; }
.mk-demo-job-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #3b82f6;
}
.mk-demo-badge {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
  background: #f3f4f6;
  color: #4b5563;
}
.mk-demo-job.is-done .mk-demo-badge { background: #d1fae5; color: #065f46; }
.mk-demo-job.is-running .mk-demo-badge { background: #dbeafe; color: #1e40af; }

/* Trajectory + integration share the scOPE plot idiom. */
.mk-demo-slide--plot { position: absolute; }
.mk-demo-svg {
  display: block;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  overflow: visible;
}
.mk-script-traj-pt { opacity: 0.95; }
.mk-script-traj-labels text {
  font-family: 'Outfit', sans-serif;
  font-size: 4.2px;
  font-weight: 600;
}
.mk-script-traj-path {
  fill: none;
  stroke: #212529;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.mk-script-traj-arrow { fill: #212529; opacity: 0; }
.mk-script-traj-path.is-c { stroke-width: 0.8; }
.is-shown .mk-script-traj-path.is-a { animation: mk-traj-a 8s ease-in-out infinite; }
.is-shown .mk-script-traj-path.is-b { animation: mk-traj-b 8s ease-in-out infinite; }
.is-shown .mk-script-traj-arrow.is-a { animation: mk-traj-arrow-a 8s ease-in-out infinite; }
.is-shown .mk-script-traj-arrow.is-b { animation: mk-traj-arrow-b 8s ease-in-out infinite; }
.is-shown .mk-script-traj-path.is-c { animation: mk-traj-c 8s ease-in-out infinite; }
.is-shown .mk-script-traj-arrow.is-c { animation: mk-traj-arrow-c 8s ease-in-out infinite; }

@keyframes mk-traj-a {
  0%   { stroke-dashoffset: 1; opacity: 1; }
  32%  { stroke-dashoffset: 0; opacity: 1; }
  88%  { stroke-dashoffset: 0; opacity: 1; }
  96%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes mk-traj-b {
  0%, 20% { stroke-dashoffset: 1; opacity: 1; }
  48%     { stroke-dashoffset: 0; opacity: 1; }
  88%     { stroke-dashoffset: 0; opacity: 1; }
  96%     { stroke-dashoffset: 0; opacity: 0; }
  100%    { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes mk-traj-arrow-a {
  0%, 30% { opacity: 0; }
  38%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes mk-traj-arrow-b {
  0%, 46% { opacity: 0; }
  54%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
/* Gran/Mac stub — narrower stroke, drawn between the two main branches. */
@keyframes mk-traj-c {
  0%, 34% { stroke-dashoffset: 1; opacity: 1; }
  56%     { stroke-dashoffset: 0; opacity: 1; }
  88%     { stroke-dashoffset: 0; opacity: 1; }
  96%     { stroke-dashoffset: 0; opacity: 0; }
  100%    { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes mk-traj-arrow-c {
  0%, 54% { opacity: 0; }
  62%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* Integration — batches slide from separated into a shared embedding. */
.mk-script-integ-pt {
  transform: translate(var(--dx), var(--dy));
}
.is-shown .mk-script-integ-pt {
  animation: mk-script-integrate 8s cubic-bezier(0.55, 0, 0.2, 1) infinite;
}
@keyframes mk-script-integrate {
  0%, 18%   { transform: translate(var(--dx), var(--dy)); }
  52%, 82%  { transform: translate(0, 0); }
  100%      { transform: translate(var(--dx), var(--dy)); }
}
.mk-script-integ-state text {
  font-family: 'Outfit', sans-serif;
  font-size: 4px;
  fill: #6c757d;
  text-anchor: middle;
}
.mk-script-integ-state .is-before,
.mk-script-integ-state .is-after { opacity: 0; }
.is-shown .mk-script-integ-state .is-before { animation: mk-demo-state-before 8s linear infinite; }
.is-shown .mk-script-integ-state .is-after { animation: mk-demo-state-after 8s linear infinite; }
/* Hand off mid-move so one caption is always on screen. */
@keyframes mk-demo-state-before {
  0%, 26% { opacity: 1; }
  34%, 90% { opacity: 0; }
  98%, 100% { opacity: 1; }
}
@keyframes mk-demo-state-after {
  0%, 34% { opacity: 0; }
  42%, 88% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
.mk-demo-key {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  font-size: 0.68rem;
  color: #6c757d;
  padding-top: 0.15rem;
}
.mk-demo-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.mk-demo-key i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Differential expression — the sc_analysis marker table, demo cut. */
.mk-script-de {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 1px solid #e9ecef;
  border-radius: 0.55rem;
  overflow: hidden;
}
.mk-script-de-row {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 1fr 0.75fr 0.8fr 1.05fr;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 0;
  min-height: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.76rem;
  color: #212529;
  border-top: 1px solid #f1f3f5;
  transition: background 0.15s ease;
}
.mk-script-de-row > span {
  text-align: center;
}
.mk-script-de-row > span:first-child {
  text-align: left;
}
.mk-script-de-row .muted { color: #868e96; }
.mk-script-de-row:not(.mk-script-de-head):nth-child(odd) { background: #fcfcfd; }
.mk-script-de-row:not(.mk-script-de-head):hover { background: #f0f4ff; }
.mk-script-de-head {
  flex: 0 0 auto;
  background: #f8f9fa;
  border-top: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6c757d;
}
.mk-script-de .gene {
  font-family: 'Menlo', 'Consolas', monospace;
  font-weight: 600;
  color: #2c3e50;
}
.mk-script-de .group {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid #dee2e6;
  border-radius: 0.3rem;
  background: #fff;
  font-size: 0.68rem;
}
.mk-script-de .lfc {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.7rem;
}
.mk-script-de .lfc.up { background: #dcfce7; color: #166534; }
.mk-script-de .lfc.down { background: #fee2e2; color: #991b1b; }
.mk-script-de-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 0.45rem;
  font-size: 0.66rem;
  color: #868e96;
}
.is-shown .mk-script-de-row:not(.mk-script-de-head) {
  animation: mk-script-row-in 0.45s ease backwards;
  animation-delay: calc(var(--row) * 60ms);
}
@keyframes mk-script-row-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-demo-slide,
  .mk-demo-job,
  .mk-demo-job-bar i { transition: none; }
  .is-shown .mk-script-traj-path,
  .is-shown .mk-script-traj-arrow,
  .is-shown .mk-script-integ-pt,
  .is-shown .mk-script-integ-state text,
  .is-shown .mk-script-de-row { animation: none; }
  .mk-script-traj-path { stroke-dashoffset: 0; }
  .mk-script-traj-arrow { opacity: 1; }
  .mk-script-integ-pt { transform: none; }
  .mk-script-integ-state .is-after { opacity: 1; }
}

/* ── scRxiv interactive demo (js/home/public/scrxiv-demo.js) ───── */

/* Archive — the browse list from scRxiv_dashboard.html */
.mk-xiv-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  margin-bottom: 0.5rem;
  border: 1px solid #e9ecef;
  border-radius: 999px;
  background: #f8f9fa;
  font-size: 0.76rem;
  color: #495057;
  flex: 0 0 auto;
}
.mk-xiv-search svg { color: #adb5bd; flex: 0 0 auto; }
.mk-xiv-search-q { white-space: pre; }
.mk-xiv-caret {
  width: 1px;
  height: 0.85em;
  background: #495057;
  margin-left: -0.25rem;
  animation: mk-xiv-blink 1.1s steps(1) infinite;
}
@keyframes mk-xiv-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.mk-xiv-count {
  margin-left: auto;
  font-size: 0.66rem;
  color: #868e96;
}
.mk-xiv-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
  min-height: 0;
}
.mk-xiv-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 0;
  min-height: 0;
  max-height: 3.2rem;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 0.3rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0.55rem;
  background: #fff;
  transition: background 0.18s ease, opacity 0.3s ease, max-height 0.32s ease,
    transform 0.15s ease, padding 0.3s ease, margin 0.32s ease,
    border-color 0.3s ease;
}
.mk-xiv-row:hover { background: #f0f4ff; transform: translateY(-1px); }
/* Filtered-out rows collapse instead of disappearing, so the list settles. */
.mk-xiv-row.is-hidden {
  flex: 0 0 0;
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
}
.mk-xiv-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  flex: 0 0 auto;
}
.mk-xiv-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mk-xiv-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
}
.mk-xiv-tag {
  font-style: normal;
  font-size: 0.58rem;
  padding: 0.02rem 0.32rem;
  border: 1px solid #dee2e6;
  border-radius: 0.28rem;
  color: #6c757d;
  background: #f8f9fa;
}
.mk-xiv-source {
  font-size: 0.64rem;
  color: #868e96;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-xiv-chip {
  flex: 0 0 auto;
  text-align: right;
  line-height: 1.15;
}
.mk-xiv-chip b {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #0f172a;
}
.mk-xiv-chip i {
  font-style: normal;
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #adb5bd;
}
.mk-xiv-actions {
  display: flex;
  gap: 0.28rem;
  flex: 0 0 auto;
}
.mk-xiv-btn {
  padding: 0.16rem 0.5rem;
  border-radius: 0.35rem;
  font-size: 0.64rem;
  font-weight: 600;
  color: #fff;
  background: #05668d;
  white-space: nowrap;
}
.mk-xiv-btn.is-import {
  background: #fff;
  color: #198754;
  border: 1px solid #198754;
}

/* Subset — atlas → lasso → re-clustered subset, on one 8.5s timeline:
   0-14%  whole atlas · 14-34% selection lands, rest greys out
   34-52% rest fades, Müller glia fly out and re-colour · 52-84% hold  */
.mk-xiv-rest {
  filter: grayscale(0);
  transform-origin: center;
}
.is-shown .mk-xiv-rest { animation: mk-xiv-rest 8.5s ease-in-out infinite; }
@keyframes mk-xiv-rest {
  0%, 14%   { filter: grayscale(0); opacity: 1; }
  28%, 36%  { filter: grayscale(1); opacity: 0.45; }
  52%, 84%  { filter: grayscale(1); opacity: 0; }
  96%, 100% { filter: grayscale(0); opacity: 1; }
}

.mk-xiv-mg circle { fill: var(--c0); }
.is-shown .mk-xiv-mg circle { animation: mk-xiv-mg 8.5s ease-in-out infinite; }
@keyframes mk-xiv-mg {
  0%, 32%   { transform: translate(0, 0); fill: var(--c0); r: 0.85; }
  54%, 84%  { transform: translate(var(--dx), var(--dy)); fill: var(--c1); r: 1.25; }
  100%      { transform: translate(0, 0); fill: var(--c0); r: 0.85; }
}

.mk-xiv-marquee {
  fill: rgba(5, 102, 141, 0.08);
  stroke: #05668d;
  stroke-width: 0.5;
  stroke-dasharray: 2 1.6;
  opacity: 0;
}
.is-shown .mk-xiv-marquee { animation: mk-xiv-marquee 8.5s ease-in-out infinite; }
@keyframes mk-xiv-marquee {
  0%, 8%    { opacity: 0; }
  18%, 34%  { opacity: 1; }
  44%, 100% { opacity: 0; }
}

.mk-xiv-lab text {
  font-family: 'Outfit', sans-serif;
  font-size: 3.6px;
  font-weight: 600;
  text-anchor: middle;
}
.mk-xiv-lab--sub text { font-size: 4px; }
.mk-xiv-lab--atlas, .mk-xiv-lab--sub { opacity: 0; }
.is-shown .mk-xiv-lab--atlas { animation: mk-xiv-lab-atlas 8.5s ease-in-out infinite; }
.is-shown .mk-xiv-lab--sub { animation: mk-xiv-lab-sub 8.5s ease-in-out infinite; }
@keyframes mk-xiv-lab-atlas {
  0%, 30%   { opacity: 1; }
  40%, 88%  { opacity: 0; }
  98%, 100% { opacity: 1; }
}
@keyframes mk-xiv-lab-sub {
  0%, 48%   { opacity: 0; }
  58%, 84%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}

.mk-xiv-state text {
  font-family: 'Outfit', sans-serif;
  font-size: 4px;
  fill: #6c757d;
  text-anchor: middle;
}
.mk-xiv-state .is-before,
.mk-xiv-state .is-after { opacity: 0; }
.is-shown .mk-xiv-state .is-before { animation: mk-xiv-state-before 8.5s linear infinite; }
.is-shown .mk-xiv-state .is-after { animation: mk-xiv-state-after 8.5s linear infinite; }
@keyframes mk-xiv-state-before {
  0%, 34%   { opacity: 1; }
  44%, 88%  { opacity: 0; }
  96%, 100% { opacity: 1; }
}
@keyframes mk-xiv-state-after {
  0%, 44%   { opacity: 0; }
  54%, 84%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}

.mk-xiv-foot {
  padding-top: 0.45rem;
  text-align: center;
  font-size: 0.64rem;
  color: #868e96;
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .mk-xiv-caret { animation: none; }
  .is-shown .mk-xiv-rest,
  .is-shown .mk-xiv-mg circle,
  .is-shown .mk-xiv-marquee,
  .is-shown .mk-xiv-lab,
  .is-shown .mk-xiv-state text { animation: none; }
  .mk-xiv-marquee { opacity: 1; }
  .mk-xiv-lab--atlas { opacity: 1; }
  .mk-xiv-state .is-before { opacity: 1; }
}

/* ── ARCHITECTURE DIAGRAM (platform page) ─────────────────────── */
.mk-arch {
  background: rgba(221, 214, 196, 0.04);
  border: 1px solid rgba(221, 214, 196, 0.14);
  border-radius: 0.85rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .mk-arch { grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
}
.mk-arch-block {
  background: rgba(221, 214, 196, 0.04);
  border: 1px solid rgba(221, 214, 196, 0.14);
  border-radius: 0.65rem;
  padding: 1rem 0.95rem;
  font-family: 'Outfit', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.mk-arch-block .layer {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mk-text-on-dark-muted);
}
.mk-arch-block .item {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  color: var(--mk-bone);
  font-size: 1rem;
  letter-spacing: -0.005em;
}
.mk-arch-block .desc {
  font-size: 0.83rem;
  color: var(--mk-text-on-dark-muted);
  line-height: 1.55;
}

/* ── SUBSCRIPTION TIERS ───────────────────────────────────────── */
.mk-tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 760px) {
  .mk-tier-grid { grid-template-columns: repeat(3, 1fr); }
}
.mk-tier {
  padding: 1.75rem 1.6rem;
  background: var(--mk-bone);
  border: 1px solid var(--mk-rule);
  border-radius: 0.85rem;
  display: flex;
  flex-direction: column;
  position: relative;
  color: var(--mk-ink);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.mk-tier:hover {
  transform: translateY(-3px);
  border-color: var(--mk-rule-strong);
  box-shadow: 0 14px 28px -18px rgba(17, 37, 60, 0.25);
}
.mk-tier-accent {
  height: 2px;
  width: 2rem;
  background: var(--mk-tier-color, var(--mk-navy));
  margin-bottom: 1.35rem;
  border-radius: 999px;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.4, 1);
}
.mk-tier:hover .mk-tier-accent { width: 3.5rem; }

.mk-tier--individual  { --mk-tier-color: var(--mk-navy); }
.mk-tier--lab         { --mk-tier-color: var(--mk-emerald); }
.mk-tier--institution { --mk-tier-color: var(--mk-gold); }

.mk-tier-tag {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mk-tier-color);
  font-weight: 500;
}
.mk-tier-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1.35rem;
  margin: 0.5rem 0 0.65rem;
  letter-spacing: -0.01em;
  color: var(--mk-ink);
}
.mk-tier-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 0.93rem;
  line-height: 1.58;
  color: var(--mk-text-muted);
  margin: 0 0 1.35rem;
}
.mk-tier-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.86rem;
  color: var(--mk-text);
  display: flex;
  flex-direction: column;
}
.mk-tier-list li {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--mk-rule);
  line-height: 1.45;
}
.mk-tier-list li:first-child { border-top: 0; }
.mk-tier-list li::before {
  content: "—";
  color: var(--mk-tier-color);
  opacity: 0.6;
  flex: 0 0 auto;
}

/* ══════════════════════════════════════════════════════════════════
   REDESIGN COMPONENTS (Current Design.dc.html)
   Home hero actions, solution pillars, product tags, CTA bars, beta
   band, and the Platform "at a glance" bento + feature modal.
   ══════════════════════════════════════════════════════════════════ */

/* ── HERO ACTIONS + MONO CHIP ROW ─────────────────────────────── */
.mk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.5rem;
}
.mk-hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
  margin-top: 1.6rem;
  font-family: var(--mk-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--mk-text-on-dark-muted);
}
.mk-hero-chips .sep { opacity: 0.4; }

/* Solution head — give the title more width than the default split. */
@media (min-width: 880px) {
  #solution .mk-section-head--split {
    grid-template-columns: 7fr 5fr;
  }
}
#solution .mk-lede {
  text-align: center;
}

/* ── SOLUTION PILLARS (dark) ──────────────────────────────────── */
.mk-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 860px) { .mk-pillars { grid-template-columns: repeat(3, 1fr); } }
.mk-pillar {
  background: rgba(250, 246, 236, 0.05);
  border: 1px solid rgba(250, 246, 236, 0.12);
  border-radius: 0.85rem;
  padding: 1.9rem 1.65rem;
  display: flex;
  flex-direction: column;
}
.mk-pillar-accent {
  display: block;
  width: 2.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--mk-pillar-color, var(--mk-navy));
  margin-bottom: 1.35rem;
}
.mk-pillar--compute { --mk-pillar-color: var(--mk-teal); }
.mk-pillar--infra   { --mk-pillar-color: var(--mk-berry); }
.mk-pillar--open    { --mk-pillar-color: var(--mk-violet); }
.mk-pillar-kicker {
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-pillar-color, var(--mk-text-on-dark-muted));
  margin-bottom: 0.6rem;
}
.mk-pillar h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--mk-bone);
  margin: 0 0 0.6rem;
}
.mk-pillar p {
  font-family: 'Outfit', sans-serif;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--mk-text-on-dark);
  margin: 0;
}

/* ── PRODUCT TAG (mono, coloured) ─────────────────────────────── */
.mk-product-tag--script { color: var(--mk-paprika); }
.mk-product-tag--scope  { color: var(--mk-emerald); }
.mk-product-tag--scrxiv { color: var(--mk-navy); }
.mk-section--dark .mk-product-tag--scope { color: #4fae86; }

/* ── SEE-MORE / CTA BAR ───────────────────────────────────────── */
/* Explore CTA — inside the products card, same divider rhythm as rows. */
.mk-section-card > .mk-product + .mk-cta-card {
  margin-top: clamp(1rem, 3vw, 2rem);
  padding-top: clamp(1rem, 3vw, 2rem);
  border-top: 1px solid var(--mk-rule);
}
.mk-cta-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  flex-wrap: wrap;
  padding: 0;
}
.mk-cta-bar-kicker {
  display: block;
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-navy);
  margin-bottom: 0.5rem;
}
.mk-cta-card h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.015em;
  color: var(--mk-ink);
  margin: 0 0 0.4rem;
}
.mk-cta-card p {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--mk-text-muted);
  margin: 0;
  max-width: 56ch;
}

/* ── BETA CTA BAND ────────────────────────────────────────────── */
.mk-beta {
  position: relative;
  background: var(--mk-ink);
  color: var(--mk-bone);
  padding: clamp(1.5rem, 3vw, 2.75rem) 0;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  border-top: 1px solid rgba(250, 246, 236, 0.12);
  border-bottom: 1px solid rgba(250, 246, 236, 0.12);
}
.mk-beta .mk-wrap {
  position: relative;
  z-index: 2;
}
.mk-beta-scatter {
  /* Soften the mid-field so copy stays readable, without a hard cutout. */
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 24%,
    rgba(0, 0, 0, 0.35) 42%,
    rgba(0, 0, 0, 0.28) 50%,
    rgba(0, 0, 0, 0.35) 58%,
    #000 76%,
    #000 100%
  );
  opacity: 0.9;
}
.mk-beta-inner {
  max-width: 720px;
  margin: 0 auto;
}
.mk-beta-kicker {
  display: inline-block;
  font-family: var(--mk-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9dc0ea;
  margin-bottom: 1.35rem;
}
.mk-beta h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--mk-bone);
  margin: 0 0 1.2rem;
}
.mk-beta p {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--mk-text-on-dark);
  margin: 0 auto 2.2rem;
  max-width: 56ch;
}
.mk-beta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

/* ══════════════ PLATFORM — AT A GLANCE (bento) ═══════════════ */
.mk-pf-glance {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.mk-pf-glance > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.mk-pf-tags { display: flex; gap: 0.5rem; }
.mk-pf-tag {
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(250, 246, 236, 0.18);
  border-radius: 0.5rem;
  font-family: var(--mk-mono);
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--mk-text-on-dark-muted);
  white-space: nowrap;
}

/* Product tiles — darkened product highlight (inside section card) */
.mk-section-card .mk-pf-tiles { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.mk-section-card .mk-feature-box {
  margin-bottom: 0;
  background: rgba(250, 246, 236, 0.55);
  border-color: color-mix(in srgb, var(--mk-pf-accent, var(--mk-navy)) 28%, var(--mk-rule));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mk-pf-accent, var(--mk-navy)) 22%, transparent),
    0 18px 36px -18px color-mix(in srgb, var(--mk-pf-accent, var(--mk-navy)) 55%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mk-pf-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}
@media (min-width: 760px) { .mk-pf-tiles { grid-template-columns: repeat(3, 1fr); } }
.mk-pf-tile {
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--mk-pf-accent, var(--mk-navy)) 28%, var(--mk-bone)) 0%,
      color-mix(in srgb, var(--mk-pf-accent, var(--mk-navy)) 8%, var(--mk-bone)) 42%,
      var(--mk-bone) 78%
    );
  border: 1px solid color-mix(in srgb, var(--mk-pf-accent, var(--mk-navy)) 22%, var(--mk-rule));
  border-radius: 0.95rem;
  padding: 1.5rem;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.4rem;
  color: var(--mk-ink);
  transition: transform 0.16s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.mk-pf-tile:hover { transform: translateY(-3px); }
.mk-pf-tile.is-active {
  border-color: var(--mk-pf-accent, var(--mk-navy));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mk-pf-accent, var(--mk-navy)) 35%, transparent),
    0 18px 34px -18px color-mix(in srgb, var(--mk-pf-accent, var(--mk-navy)) 70%, transparent);
}
.mk-pf-tile--script { --mk-pf-accent: var(--mk-paprika); --mk-pf-txt: var(--mk-paprika); }
.mk-pf-tile--scope  { --mk-pf-accent: var(--mk-emerald); --mk-pf-txt: var(--mk-emerald); }
.mk-pf-tile--scrxiv { --mk-pf-accent: var(--mk-navy); --mk-pf-txt: var(--mk-navy); }
.mk-pf-tile > div:last-child {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.mk-pf-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-pf-txt, var(--mk-navy));
}
.mk-pf-tile-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.25rem;
  color: var(--mk-ink);
}
.mk-pf-tile-expand {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--mk-pf-txt, var(--mk-navy));
  margin: 0 0 0.55rem;
}
.mk-pf-tile-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mk-text-muted);
  margin: 0 0 0.85rem;
}
.mk-pf-tile-link {
  display: inline-block;
  margin-top: auto;
  padding: 0.55rem 0.9rem;
  background: var(--mk-pf-accent, var(--mk-navy));
  border-radius: 0.5rem;
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--mk-bone);
  text-decoration: none;
  width: fit-content;
  transition: opacity 0.18s ease;
}
.mk-pf-tile-link:hover { opacity: 0.9; color: var(--mk-bone); }

/* Feature box — nested light surface inside cream panel */
.mk-feature-box {
  background: rgba(250, 246, 236, 0.72);
  border: 1px solid var(--mk-rule);
  border-radius: 1.1rem;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-bottom: 0;
}
.mk-feature-group + .mk-feature-group {
  border-top: 1px solid var(--mk-rule);
  padding-top: 1.6rem;
}
.mk-feature-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.mk-feature-head .lbl {
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mk-pf-accent, var(--mk-navy));
}
.mk-feature-head .hint {
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.65rem;
  color: var(--mk-text-faint);
}
.mk-feature-carousel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  position: relative;
}
.mk-feature-carousel-viewport {
  overflow: hidden;
  scroll-behavior: auto;
  mask-image: linear-gradient(90deg, transparent 0, #000 0.4rem, #000 calc(100% - 0.4rem), transparent 100%);
}
.mk-feature-carousel-viewport::-webkit-scrollbar { display: none; }
.mk-feature-carousel-track,
.mk-feature-grid {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  padding: 0.15rem 0.1rem 0.35rem;
  will-change: transform;
}
.mk-feature-carousel-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--mk-pf-accent, var(--mk-navy)) 55%, var(--mk-ink) 45%);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1px);
  transition: opacity 0.18s ease, color 0.16s ease, transform 0.16s ease;
}
.mk-feature-carousel:hover .mk-feature-carousel-btn,
.mk-feature-carousel:focus-within .mk-feature-carousel-btn {
  opacity: 0.55;
  pointer-events: auto;
}
.mk-feature-carousel-btn:hover {
  opacity: 1;
  color: var(--mk-pf-accent, var(--mk-navy));
  transform: translateY(0);
}
.mk-feature-carousel-btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--mk-pf-accent, var(--mk-navy));
  outline-offset: 2px;
}
.mk-feature-btn {
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  background: var(--mk-bone);
  border: 1px solid var(--mk-rule);
  border-radius: 0.65rem;
  padding: 0.55rem 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 10.5rem;
  width: 10.5rem;
  height: 4.6rem;
  box-sizing: border-box;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.mk-feature-btn:hover {
  transform: translateY(-2px);
  border-color: var(--mk-feat-accent, var(--mk-navy));
  box-shadow: 0 12px 24px -14px rgba(17, 37, 60, 0.5);
}
.mk-feature-btn .n {
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.62rem;
  color: var(--mk-feat-accent, var(--mk-navy));
}
.mk-feature-btn h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--mk-ink);
  margin: 0;
  min-height: calc(1.2em * 2);
  max-height: calc(1.2em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mk-feature-btn .more {
  font-family: var(--mk-mono);
  font-size: 0.58rem;
  line-height: 1;
  color: var(--mk-text-faint);
  margin-top: auto;
}

/* Access — tier cards inside dark section card */
.mk-access-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 760px) {
  .mk-access-grid { grid-template-columns: repeat(3, 1fr); }
}
.mk-access-tier {
  --mk-access-color: var(--mk-navy);
  padding: 1.6rem 1.45rem;
  background: rgba(250, 246, 236, 0.05);
  border: 1px solid rgba(250, 246, 236, 0.12);
  border-radius: 0.85rem;
  display: flex;
  flex-direction: column;
  color: var(--mk-bone);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.mk-access-tier:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--mk-access-color) 55%, rgba(250, 246, 236, 0.2));
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.45);
}
.mk-access-tier--individual { --mk-access-color: #9dc0ea; }
.mk-access-tier--lab { --mk-access-color: #6fc7a3; }
.mk-access-tier--institution { --mk-access-color: #d4b84a; }
.mk-access-tier-accent {
  display: block;
  height: 2px;
  width: 2rem;
  border-radius: 999px;
  background: var(--mk-access-color);
  margin-bottom: 1.2rem;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.4, 1);
}
.mk-access-tier:hover .mk-access-tier-accent { width: 3.5rem; }
.mk-access-tier-tag {
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-access-color);
}
.mk-access-tier-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--mk-bone);
  margin: 0.55rem 0 0.55rem;
}
.mk-access-tier-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--mk-text-on-dark-muted);
  margin: 0 0 1.15rem;
}
.mk-access-tier-list {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.86rem;
  color: var(--mk-text-on-dark);
  display: flex;
  flex-direction: column;
}
.mk-access-tier-list li {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(250, 246, 236, 0.1);
  line-height: 1.45;
}
.mk-access-tier-list li:first-child { border-top: 0; }
.mk-access-tier-list li::before {
  content: "—";
  color: var(--mk-access-color);
  opacity: 0.8;
  flex: 0 0 auto;
}
.mk-access-cta {
  align-self: flex-start;
  margin-top: auto;
}

/* Tech — light cards for cream wash */
.mk-tech-stack {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.mk-tech-card {
  background: rgba(250, 246, 236, 0.72);
  border: 1px solid var(--mk-rule);
  border-radius: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--mk-ink);
  transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.mk-tech-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mk-navy) 22%, var(--mk-rule));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mk-navy) 10%, transparent),
    0 14px 28px -16px color-mix(in srgb, var(--mk-navy) 28%, transparent);
}
.mk-tech-card--row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: start;
}
.mk-tech-copy .mk-overline { margin-bottom: 0; }
.mk-tech-card p,
.mk-tech-copy p {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mk-text-muted);
  margin: 0;
  max-width: 42ch;
}
.mk-tech-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.mk-tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  background: var(--mk-bone);
  border: 1px solid var(--mk-rule);
  border-radius: 0.55rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mk-ink);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.mk-tech-tag:hover {
  border-color: var(--mk-rule-strong);
  transform: translateY(-1px);
  color: var(--mk-ink);
}
.mk-tech-tag .cat {
  font-family: var(--mk-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-text-faint);
}

/* ── FEATURE MODAL ────────────────────────────────────────────── */
.mk-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(8, 14, 26, 0.66);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 2rem;
  animation: mk-fadeIn 0.2s ease;
}
.mk-modal-overlay[hidden] { display: none; }
.mk-modal-side-nav {
  appearance: none;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 246, 236, 0.22);
  background: rgba(17, 37, 60, 0.45);
  color: var(--mk-bone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.55rem;
  line-height: 0;
  padding: 0;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.mk-modal-side-nav > span {
  display: block;
  line-height: 1;
  /* Optical center — angle quotes sit low in the em box */
  transform: translateY(-0.08em);
}
.mk-modal-side-nav:hover {
  background: rgba(17, 37, 60, 0.7);
  border-color: rgba(250, 246, 236, 0.4);
  transform: translateY(-1px);
}
.mk-modal-side-nav:hover > span {
  transform: translateY(-0.08em);
}
.mk-modal-side-nav:focus-visible {
  outline: 2px solid var(--mk-modal-accent, var(--mk-navy));
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .mk-modal-overlay { gap: 0.4rem; padding: 1rem; }
  .mk-modal-side-nav { width: 2.15rem; height: 2.15rem; font-size: 1.3rem; }
}
.mk-modal {
  width: 560px;
  max-width: min(100%, calc(100vw - 6.5rem));
  background: var(--mk-cream);
  border: 1px solid rgba(17, 37, 60, 0.14);
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6);
  animation: mk-modalIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Stage for the per-feature illustration (js/home/public/feature-viz.js) —
   the faint dot grid gives the panel an instrument-readout feel. */
.mk-modal-viz {
  position: relative;
  height: clamp(168px, 34vw, 192px);
  background:
    radial-gradient(circle at 1px 1px, rgba(250, 246, 236, 0.05) 1px, transparent 1.4px)
      0 0 / 15px 15px,
    linear-gradient(160deg, var(--mk-modal-tint, rgba(46, 80, 119, 0.5)), #0a1526);
  overflow: hidden;
}
/* Styled on .mk-fviz--fallback itself (not .mk-modal-viz) so the fallback
   also renders on the product-page stage (.mk-pd-viz), not just the platform
   modal. currentColor picks up whichever --mk-fv-accent the stage sets. */
.mk-fviz--fallback {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.55rem;
  padding: 0 0 1.9rem;
}
.mk-fviz--fallback .flow {
  position: absolute;
  top: 26px; left: 0; right: 0;
  height: 2px;
  overflow: hidden;
}
.mk-fviz--fallback .flow span {
  position: absolute;
  top: 0; left: 0;
  width: 9px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  animation: mk-flowX 2.4s linear infinite;
}
.mk-fviz--fallback .pulse {
  position: absolute;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor;
  animation: mk-pulseR 1.8s ease-in-out infinite;
}
.mk-fviz--fallback .bar {
  width: 16px; height: 72px;
  background: currentColor;
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  animation: mk-barGrow 1.6s ease-in-out infinite;
}
.mk-fviz--fallback .bar:nth-child(3) { animation-delay: 0.2s; opacity: 0.75; }
.mk-fviz--fallback .bar:nth-child(4) { animation-delay: 0.4s; opacity: 0.9; }
.mk-fviz--fallback .bar:nth-child(5) { animation-delay: 0.6s; opacity: 0.6; }
.mk-fviz--fallback .bar:nth-child(6) { animation-delay: 0.8s; opacity: 0.85; }
.mk-modal-body { padding: 1.6rem 1.75rem 1.75rem; }
.mk-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.mk-modal-kicker {
  font-family: var(--mk-mono);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-modal-accent, var(--mk-navy));
}
.mk-modal-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--mk-ink);
  margin: 0.5rem 0 0;
}
.mk-modal-pos {
  flex-shrink: 0;
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--mk-text-faint);
  padding-top: 0.15rem;
}
.mk-modal-close {
  flex-shrink: 0;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(17, 37, 60, 0.14);
  background: var(--mk-bone);
  color: var(--mk-text-muted);
  font-size: 1rem;
  line-height: 1;
  font-family: inherit;
}
.mk-modal-blurb {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--mk-text-muted);
  margin: 0.9rem 0 0;
}
.mk-modal-actions {
  display: flex;
  gap: 0.65rem;
  margin-top: 1.4rem;
}

@keyframes mk-barGrow { 0%, 100% { transform: scaleY(0.28); } 50% { transform: scaleY(1); } }
@keyframes mk-flowX { 0% { transform: translateX(-140%); } 100% { transform: translateX(1300%); } }
@keyframes mk-pulseR { 0%, 100% { opacity: 0.35; transform: translateX(-50%) scale(0.85); } 50% { opacity: 1; transform: translateX(-50%) scale(1.12); } }
@keyframes mk-modalIn { 0% { opacity: 0; transform: translateY(14px) scale(0.97); } 100% { opacity: 1; transform: none; } }
@keyframes mk-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .mk-fviz--fallback .bar,
  .mk-fviz--fallback .flow span,
  .mk-fviz--fallback .pulse { animation: none; }
}

/* ══════════════ FEATURE ILLUSTRATIONS ═════════════════════════════
   Motion for js/home/public/feature-viz.js. Geometry lives in the JS;
   everything here is timing.

   Each illustration loops on --T, set once on its root, so its parts and
   its caption stay phase-locked without a single JS timer. Staggers ride
   on --i (element index) and are deliberately short: a stagger offsets an
   element's whole cycle, so a long one drifts out of step with the
   caption. Where a wave rolling through the loop *is* the point
   (pipelines, queues, streaming) the stagger is a whole phase wide.
   ══════════════════════════════════════════════════════════════════ */

.mk-fviz {
  position: absolute;
  inset: 0;
  --T: 8s;
  /* Strip reserved at the bottom for the caption; grows when the caption has
     to wrap on a narrow modal. */
  --cap: 1.55rem;
  color: var(--mk-fv-accent, #8bb0d8);
}
.mk-fviz-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - var(--cap));
  display: block;
  overflow: visible;
}
@media (max-width: 600px) {
  .mk-fviz { --cap: 2.6rem; }
  .mk-fviz-tag { font-size: 0.55rem; }
}

/* ── shared vocabulary ────────────────────────────────────────── */
.mk-fviz-t {
  font-family: var(--mk-mono);
  font-size: 4px;
  fill: rgba(250, 246, 236, 0.6);
}
.mk-fviz-t.is-strong { font-size: 3.5px; font-weight: 600; fill: rgba(250, 246, 236, 0.92); }
.mk-fviz-t.is-dim { font-size: 2.9px; fill: rgba(250, 246, 236, 0.45); }
.mk-fviz-node-bg { fill: rgba(250, 246, 236, 0.05); stroke: rgba(250, 246, 236, 0.16); stroke-width: 0.4; }
.mk-fviz-link { stroke: rgba(250, 246, 236, 0.18); stroke-width: 0.45; stroke-dasharray: 2 1.6; }
.mk-fviz-axis { fill: none; stroke: rgba(250, 246, 236, 0.28); stroke-width: 0.45; }
.mk-fviz-thresh { stroke: rgba(250, 246, 236, 0.2); stroke-width: 0.4; stroke-dasharray: 2 1.8; }
.mk-fviz-panel-bg { fill: rgba(250, 246, 236, 0.035); stroke: rgba(250, 246, 236, 0.14); stroke-width: 0.4; }

.mk-fviz-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.4rem;
  display: grid;
  justify-items: center;
  padding: 0 1.1rem;
  font-family: var(--mk-mono);
  font-size: 0.59rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(250, 246, 236, 0.52);
  pointer-events: none;
}
.mk-fviz-tag > div { grid-area: 1 / 1; }

/* Before/after pairs — captions, counters, palette strips. */
.mk-fviz .is-swap > .is-before { animation: mk-fviz-swap-a var(--T) linear infinite; }
.mk-fviz .is-swap > .is-after { opacity: 0; animation: mk-fviz-swap-b var(--T) linear infinite; }
@keyframes mk-fviz-swap-a {
  0%, 24% { opacity: 1; }
  34%, 88% { opacity: 0; }
  97%, 100% { opacity: 1; }
}
@keyframes mk-fviz-swap-b {
  0%, 32% { opacity: 0; }
  42%, 86% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* Anything that only makes sense once the story has resolved. */
.mk-fviz-late {
  opacity: 0;
  animation: mk-fviz-appear var(--T) ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.14s);
}
@keyframes mk-fviz-appear {
  0%, 30% { opacity: 0; }
  42%, 86% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

.mk-fviz-packet {
  fill: currentColor;
  opacity: 0;
  animation: mk-fviz-packet var(--T) linear infinite;
  animation-delay: calc(var(--i) * var(--pstep, 0.55s));
}
@keyframes mk-fviz-packet {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 0.95; }
  40% { transform: translate(var(--dx), var(--dy)); opacity: 0.95; }
  48%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* Arrival glow on a node, on its own short cycle. */
.mk-fviz-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mk-fviz-ring 2.2s ease-out infinite;
}
@keyframes mk-fviz-ring {
  0% { opacity: 0.55; transform: scale(0.96); }
  70%, 100% { opacity: 0; transform: scale(1.1); }
}

.mk-fviz-cursor {
  fill: rgba(250, 246, 236, 0.92);
  opacity: 0;
  animation: mk-fviz-cursor var(--T) ease-in-out infinite;
}

/* Lasso → isolate → re-cluster, shared by both subset illustrations. */
.mk-fviz-marquee {
  fill: rgba(250, 246, 236, 0.06);
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-dasharray: 2 1.6;
  opacity: 0;
  animation: mk-fviz-marquee var(--T) ease-in-out infinite;
}
@keyframes mk-fviz-marquee {
  0%, 8% { opacity: 0; }
  18%, 34% { opacity: 1; }
  44%, 100% { opacity: 0; }
}
.mk-fviz-rest { animation: mk-fviz-rest var(--T) ease-in-out infinite; }
@keyframes mk-fviz-rest {
  0%, 14% { filter: grayscale(0); opacity: 1; }
  28%, 36% { filter: grayscale(1); opacity: 0.4; }
  52%, 84% { filter: grayscale(1); opacity: 0; }
  96%, 100% { filter: grayscale(0); opacity: 1; }
}
/* One colour animation per destination state rather than one per cell. */
.mk-fviz-picked {
  color: var(--c0);
  animation: mk-fviz-recolor var(--T) ease-in-out infinite;
}
.mk-fviz-picked circle {
  animation: mk-fviz-relocate var(--T) cubic-bezier(0.55, 0, 0.2, 1) infinite;
}
@keyframes mk-fviz-recolor {
  0%, 34% { color: var(--c0); }
  54%, 84% { color: var(--c1); }
  100% { color: var(--c0); }
}
@keyframes mk-fviz-relocate {
  0%, 32% { transform: translate(0, 0); }
  54%, 84% { transform: translate(var(--dx), var(--dy)); }
  100% { transform: translate(0, 0); }
}
/* Population labels. They hand over around the move — the atlas names clear
   out as the selection lifts off (32%) and the new ones land once it has
   settled (54%) — so the two sets are never on screen together. */
.mk-fviz-lab--atlas,
.mk-fviz-lab--sub { opacity: 0; }
.mk-fviz-lab--atlas { animation: mk-fviz-lab-atlas var(--T) ease-in-out infinite; }
.mk-fviz-lab--sub { animation: mk-fviz-lab-sub var(--T) ease-in-out infinite; }
@keyframes mk-fviz-lab-atlas {
  0%, 26% { opacity: 1; }
  36%, 88% { opacity: 0; }
  97%, 100% { opacity: 1; }
}
@keyframes mk-fviz-lab-sub {
  0%, 50% { opacity: 0; }
  60%, 84% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

/* ── scRIPT · Data Import ─────────────────────────────────────── */
.mk-fviz--data-import { --T: 5s; --pstep: 0.5s; }
/* Format-chip labels run a size up from the shared .mk-fviz-t scale — the
   chip box (feature-viz.js) is widened to match so the longer strings
   (e.g. "matrix.mtx" / "10x/STARSolo") still clear each other. */
.mk-fviz-filechip .mk-fviz-t.is-strong { font-size: 4px; }
.mk-fviz-filechip .mk-fviz-t.is-dim { font-size: 4px; }

/* ── scRIPT · Processing ──────────────────────────────────────── */
/* Steps run in sequence, so the stagger is a whole phase wide; fill-mode
   backwards keeps a step that has not started yet looking queued rather
   than idling in its resting style. Each row gets its own keyframes (below,
   keyed by nth-child) rather than sharing one timeline via animation-delay,
   so all five rows sit on the exact same --T clock: they complete in order,
   hold complete together, then reset together before the cycle repeats. */
.mk-fviz--processing { --T: 10s; }
.mk-fviz-row,
.mk-fviz-row .dot,
.mk-fviz-row .bar b,
.mk-fviz-row .tick { animation-fill-mode: backwards; }
.mk-fviz-rows {
  position: absolute;
  inset: 0.7rem 0.95rem calc(var(--cap) + 0.15rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mk-fviz-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 0;
  min-height: 0;
  padding: 0 0.6rem;
  border-radius: 0.45rem;
  background: rgba(250, 246, 236, 0.045);
  border: 1px solid rgba(250, 246, 236, 0.08);
  animation-duration: var(--T);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.mk-fviz-row .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: rgba(250, 246, 236, 0.28);
  animation-duration: var(--T);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.mk-fviz-row .nm {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mk-text-on-dark);
  white-space: nowrap;
}
.mk-fviz-row .mt {
  flex: 1;
  min-width: 0;
  font-family: var(--mk-mono);
  font-size: 0.56rem;
  color: rgba(250, 246, 236, 0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-fviz-row .bar {
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: rgba(250, 246, 236, 0.14);
  overflow: hidden;
  flex: 0 0 auto;
}
.mk-fviz-row .bar b {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: currentColor;
  animation-duration: var(--T);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.mk-fviz-row .tick {
  flex: 0 0 auto;
  width: 0.7rem;
  font-size: 0.66rem;
  line-height: 1;
  color: #57c98a;
  opacity: 0;
  animation-duration: var(--T);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Rows 1-5 (fixed count — PROC_STEPS in feature-viz.js is a static 5-item
   list) each own a slice of the shared --T timeline below, instead of all
   five reusing one keyframe offset by animation-delay. With a shared
   keyframe + delay, every row loops independently on its own T-length
   cycle, so the first row starts resetting before the last row has even
   finished revealing — the group never holds "all complete" at once and
   never restarts together. Baking each row's slice into its own keyframes
   keeps every row on the exact same clock, so completion cascades in
   order, then all rows hold, then all reset together at 90%-100%. */
.mk-fviz-rows .mk-fviz-row:nth-child(1) { animation-name: mk-fviz-steprow-0; }
.mk-fviz-rows .mk-fviz-row:nth-child(1) .dot { animation-name: mk-fviz-stepdot-0; }
.mk-fviz-rows .mk-fviz-row:nth-child(1) .bar b { animation-name: mk-fviz-stepbar-0; }
.mk-fviz-rows .mk-fviz-row:nth-child(1) .tick { animation-name: mk-fviz-steptick-0; }

.mk-fviz-rows .mk-fviz-row:nth-child(2) { animation-name: mk-fviz-steprow-1; }
.mk-fviz-rows .mk-fviz-row:nth-child(2) .dot { animation-name: mk-fviz-stepdot-1; }
.mk-fviz-rows .mk-fviz-row:nth-child(2) .bar b { animation-name: mk-fviz-stepbar-1; }
.mk-fviz-rows .mk-fviz-row:nth-child(2) .tick { animation-name: mk-fviz-steptick-1; }

.mk-fviz-rows .mk-fviz-row:nth-child(3) { animation-name: mk-fviz-steprow-2; }
.mk-fviz-rows .mk-fviz-row:nth-child(3) .dot { animation-name: mk-fviz-stepdot-2; }
.mk-fviz-rows .mk-fviz-row:nth-child(3) .bar b { animation-name: mk-fviz-stepbar-2; }
.mk-fviz-rows .mk-fviz-row:nth-child(3) .tick { animation-name: mk-fviz-steptick-2; }

.mk-fviz-rows .mk-fviz-row:nth-child(4) { animation-name: mk-fviz-steprow-3; }
.mk-fviz-rows .mk-fviz-row:nth-child(4) .dot { animation-name: mk-fviz-stepdot-3; }
.mk-fviz-rows .mk-fviz-row:nth-child(4) .bar b { animation-name: mk-fviz-stepbar-3; }
.mk-fviz-rows .mk-fviz-row:nth-child(4) .tick { animation-name: mk-fviz-steptick-3; }

.mk-fviz-rows .mk-fviz-row:nth-child(5) { animation-name: mk-fviz-steprow-4; }
.mk-fviz-rows .mk-fviz-row:nth-child(5) .dot { animation-name: mk-fviz-stepdot-4; }
.mk-fviz-rows .mk-fviz-row:nth-child(5) .bar b { animation-name: mk-fviz-stepbar-4; }
.mk-fviz-rows .mk-fviz-row:nth-child(5) .tick { animation-name: mk-fviz-steptick-4; }

@keyframes mk-fviz-steprow-0 { 0%, 1.5% { opacity: 0.4; } 4.5%, 90% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes mk-fviz-stepdot-0 { 0%, 1.5% { background: rgba(250, 246, 236, 0.28); } 4.5%, 13.5% { background: currentColor; } 16.5%, 90% { background: #57c98a; } 100% { background: rgba(250, 246, 236, 0.28); } }
@keyframes mk-fviz-stepbar-0 { 0%, 1.5% { width: 0; } 15%, 90% { width: 100%; } 100% { width: 0; } }
@keyframes mk-fviz-steptick-0 { 0%, 13.5% { opacity: 0; } 18%, 90% { opacity: 1; } 100% { opacity: 0; } }

@keyframes mk-fviz-steprow-1 { 0%, 16.5% { opacity: 0.4; } 19.5%, 90% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes mk-fviz-stepdot-1 { 0%, 16.5% { background: rgba(250, 246, 236, 0.28); } 19.5%, 28.5% { background: currentColor; } 31.5%, 90% { background: #57c98a; } 100% { background: rgba(250, 246, 236, 0.28); } }
@keyframes mk-fviz-stepbar-1 { 0%, 16.5% { width: 0; } 30%, 90% { width: 100%; } 100% { width: 0; } }
@keyframes mk-fviz-steptick-1 { 0%, 28.5% { opacity: 0; } 33%, 90% { opacity: 1; } 100% { opacity: 0; } }

@keyframes mk-fviz-steprow-2 { 0%, 31.5% { opacity: 0.4; } 34.5%, 90% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes mk-fviz-stepdot-2 { 0%, 31.5% { background: rgba(250, 246, 236, 0.28); } 34.5%, 43.5% { background: currentColor; } 46.5%, 90% { background: #57c98a; } 100% { background: rgba(250, 246, 236, 0.28); } }
@keyframes mk-fviz-stepbar-2 { 0%, 31.5% { width: 0; } 45%, 90% { width: 100%; } 100% { width: 0; } }
@keyframes mk-fviz-steptick-2 { 0%, 43.5% { opacity: 0; } 48%, 90% { opacity: 1; } 100% { opacity: 0; } }

@keyframes mk-fviz-steprow-3 { 0%, 46.5% { opacity: 0.4; } 49.5%, 90% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes mk-fviz-stepdot-3 { 0%, 46.5% { background: rgba(250, 246, 236, 0.28); } 49.5%, 58.5% { background: currentColor; } 61.5%, 90% { background: #57c98a; } 100% { background: rgba(250, 246, 236, 0.28); } }
@keyframes mk-fviz-stepbar-3 { 0%, 46.5% { width: 0; } 60%, 90% { width: 100%; } 100% { width: 0; } }
@keyframes mk-fviz-steptick-3 { 0%, 58.5% { opacity: 0; } 63%, 90% { opacity: 1; } 100% { opacity: 0; } }

@keyframes mk-fviz-steprow-4 { 0%, 61.5% { opacity: 0.4; } 64.5%, 90% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes mk-fviz-stepdot-4 { 0%, 61.5% { background: rgba(250, 246, 236, 0.28); } 64.5%, 73.5% { background: currentColor; } 76.5%, 90% { background: #57c98a; } 100% { background: rgba(250, 246, 236, 0.28); } }
@keyframes mk-fviz-stepbar-4 { 0%, 61.5% { width: 0; } 75%, 90% { width: 100%; } 100% { width: 0; } }
@keyframes mk-fviz-steptick-4 { 0%, 73.5% { opacity: 0; } 78%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* ── scRIPT · Integration ─────────────────────────────────────── */
.mk-fviz-batch circle {
  animation: mk-fviz-merge var(--T) cubic-bezier(0.55, 0, 0.2, 1) infinite;
}
@keyframes mk-fviz-merge {
  0%, 18% { transform: translate(var(--dx), var(--dy)); }
  52%, 82% { transform: translate(0, 0); }
  100% { transform: translate(var(--dx), var(--dy)); }
}

/* ── scRIPT · Differential expression ─────────────────────────── */
.mk-fviz--differential-expression { --T: 7s; }
.mk-fviz-hit {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: mk-fviz-hit var(--T) cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 0.05s);
}
@keyframes mk-fviz-hit {
  0%, 8% { opacity: 0; transform: scale(0.2); }
  20%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.2); }
}

/* ── scRIPT · Cell annotation ─────────────────────────────────── */
.mk-fviz-anno {
  color: rgba(250, 246, 236, 0.26);
  animation: mk-fviz-anno var(--T) ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.5s);
}
@keyframes mk-fviz-anno {
  0%, 6% { color: rgba(250, 246, 236, 0.26); }
  16%, 86% { color: var(--c1); }
  95%, 100% { color: rgba(250, 246, 236, 0.26); }
}
.mk-fviz-annolabel {
  color: var(--c1);
  opacity: 0;
  animation: mk-fviz-annolabel var(--T) ease-out infinite;
  animation-delay: calc(var(--i) * 0.5s);
}
.mk-fviz-annolabel text { fill: var(--c1); }
.mk-fviz-annochip { fill: rgba(8, 17, 30, 0.6); stroke: currentColor; stroke-width: 0.4; }
@keyframes mk-fviz-annolabel {
  0%, 10% { opacity: 0; transform: translateY(1.6px); }
  20%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(1.6px); }
}

/* ── scRIPT · Trajectory inference ────────────────────────────── */
.mk-fviz-trajpath {
  fill: none;
  stroke: rgba(250, 246, 236, 0.85);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mk-fviz-trajdraw var(--T) ease-in-out infinite;
}
.mk-fviz-trajpath.is-b { stroke-width: 0.8; animation-delay: 1.4s; }
.mk-fviz-trajarrow {
  fill: rgba(250, 246, 236, 0.85);
  opacity: 0;
  animation: mk-fviz-trajarrow var(--T) ease-in-out infinite;
}
.mk-fviz-trajarrow.is-b { animation-delay: 1.4s; }
@keyframes mk-fviz-trajdraw {
  0%, 6% { stroke-dashoffset: 1; opacity: 1; }
  34%, 86% { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes mk-fviz-trajarrow {
  0%, 32% { opacity: 0; }
  40%, 86% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

/* ── scOPE · Your data, instantly ─────────────────────────────── */
.mk-fviz--visualization-instantly { --T: 4.5s; }
.mk-fviz-frame { fill: rgba(250, 246, 236, 0.03); stroke: rgba(250, 246, 236, 0.16); stroke-width: 0.45; }
.mk-fviz-frame-rule { stroke: rgba(250, 246, 236, 0.13); stroke-width: 0.4; }
.mk-fviz-urlbar { fill: rgba(250, 246, 236, 0.07); }
/* Cells paint in west-to-east; --k is the point's normalised x, so the
   delay spread *is* the sweep. */
.mk-fviz-stream circle {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mk-fviz-stream var(--T) ease-out infinite;
  animation-delay: calc(var(--k) * 1.08s);
}
@keyframes mk-fviz-stream {
  0% { opacity: 0; transform: scale(0.2); }
  6%, 82% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(0.2); }
}
.mk-fviz-sweep {
  fill: currentColor;
  opacity: 0;
  animation: mk-fviz-sweep var(--T) linear infinite;
}
@keyframes mk-fviz-sweep {
  0% { transform: translateX(6px); opacity: 0; }
  4% { opacity: 0.45; }
  24% { transform: translateX(194px); opacity: 0.45; }
  30%, 100% { transform: translateX(194px); opacity: 0; }
}

/* ── scOPE · Atlas-scale rendering ────────────────────────────── */
/* --T here is set from the JS clock that drives this one. */
.mk-fviz-chips {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  display: flex;
  gap: 0.28rem;
  font-family: var(--mk-mono);
  font-size: 0.58rem;
}
.mk-fviz-chips span {
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 246, 236, 0.16);
  color: rgba(250, 246, 236, 0.48);
}
.mk-fviz-chips .is-active {
  color: var(--mk-fv-accent, #8bb0d8);
  border-color: currentColor;
  background: rgba(250, 246, 236, 0.08);
}

/* ── scOPE · Visualize gene expression ────────────────────────── */
.mk-fviz--overlay-gene-expression { --T: 7s; }
/* Delay by expression, so cells drop out in the order a rising threshold
   would drop them. */
.mk-fviz-exprpt {
  animation: mk-fviz-thresh var(--T) ease-in-out infinite;
  animation-delay: calc(var(--t) * 1.8s);
}
@keyframes mk-fviz-thresh {
  0%, 14% { opacity: 1; }
  22%, 68% { opacity: 0.1; }
  76%, 100% { opacity: 1; }
}
.mk-fviz-knob { animation: mk-fviz-knob var(--T) ease-in-out infinite; }
.mk-fviz-knob path { fill: currentColor; }
.mk-fviz-knob line { stroke: currentColor; stroke-width: 0.5; }
/* Travels to EXPR_CUT (0.42) of the 34-unit colorbar, in step with the cells
   dropping out below it. */
@keyframes mk-fviz-knob {
  0%, 14% { transform: translateY(0); }
  48%, 68% { transform: translateY(-14.3px); }
  100% { transform: translateY(0); }
}

/* ── scOPE · Fully interactive ────────────────────────────────── */
/* translate-then-scale, so --z*x/--z*y are exactly the offsets that centre
   a cluster: p ↦ t + s·p. */
.mk-fviz-zoom {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: mk-fviz-zoom var(--T) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* Zoomed cells must not spill over the caption. */
.mk-fviz--fully-interactive-and-customizable .mk-fviz-svg { overflow: hidden; }
@keyframes mk-fviz-zoom {
  0%, 10% { transform: translate(0, 0) scale(1); }
  28%, 40% { transform: translate(var(--z0x), var(--z0y)) scale(var(--s)); }
  58%, 72% { transform: translate(var(--z1x), var(--z1y)) scale(var(--s)); }
  90%, 100% { transform: translate(0, 0) scale(1); }
}
@keyframes mk-fviz-cursor {
  0%, 10% { transform: translate(150px, 30px); opacity: 0; }
  16% { opacity: 1; }
  28%, 40% { transform: translate(120px, 26px); opacity: 1; }
  58%, 72% { transform: translate(70px, 32px); opacity: 1; }
  84% { opacity: 0; }
  100% { transform: translate(150px, 30px); opacity: 0; }
}
.mk-fviz-swatches.is-a { animation: mk-fviz-swap-a var(--T) linear infinite; }
.mk-fviz-swatches.is-b { opacity: 0; animation: mk-fviz-swap-b var(--T) linear infinite; }

/* ── scOPE · Instant quantification ───────────────────────────── */
.mk-fviz-hovered {
  stroke: rgba(250, 246, 236, 0.9);
  stroke-width: 0.5;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: mk-fviz-hovered var(--T) ease-in-out infinite;
  animation-delay: calc(var(--i) * 2.4s);
}
@keyframes mk-fviz-hovered {
  0% { opacity: 0; transform: scale(1); }
  4%, 22% { opacity: 1; transform: scale(2.2); }
  27%, 100% { opacity: 0; transform: scale(1); }
}
.mk-fviz-tip {
  opacity: 0;
  animation: mk-fviz-tip var(--T) ease-out infinite;
  animation-delay: calc(var(--i) * 2.4s);
}
@keyframes mk-fviz-tip {
  0% { opacity: 0; }
  5%, 22% { opacity: 1; }
  27%, 100% { opacity: 0; }
}
.mk-fviz-tip-bg { fill: rgba(8, 17, 30, 0.9); stroke: rgba(250, 246, 236, 0.14); stroke-width: 0.35; }
.mk-fviz-tip-edge { stroke: currentColor; stroke-width: 1; }
.mk-fviz-cursor.is-hover { animation-name: mk-fviz-cursor-hover; }
@keyframes mk-fviz-cursor-hover {
  0% { transform: translate(var(--x0), var(--y0)); opacity: 0; }
  4%, 24% { transform: translate(var(--x0), var(--y0)); opacity: 1; }
  34%, 54% { transform: translate(var(--x1), var(--y1)); opacity: 1; }
  64%, 84% { transform: translate(var(--x2), var(--y2)); opacity: 1; }
  94%, 100% { transform: translate(var(--x2), var(--y2)); opacity: 0; }
}

/* ── scOPE · Parallel analysis ────────────────────────────────── */
.mk-fviz--parallel-analysis { --T: 7s; }
.mk-fviz-panel-hl {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
  opacity: 0;
  animation: mk-fviz-panelhl var(--T) ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.1s);
}
@keyframes mk-fviz-panelhl {
  0% { opacity: 0; }
  6%, 20% { opacity: 0.9; }
  28%, 100% { opacity: 0; }
}
/* The same population breathing in all three panels — one selection,
   three datasets. */
.mk-fviz-sync { animation: mk-fviz-sync 2.6s ease-in-out infinite; }
@keyframes mk-fviz-sync {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ── scOPE · Publication-ready figures ────────────────────────── */
.mk-fviz--publication-ready-figures { --T: 7s; }
.mk-fviz-crop { fill: none; stroke: rgba(250, 246, 236, 0.32); stroke-width: 0.5; }
.mk-fviz-figure { animation: mk-fviz-figure var(--T) ease-in-out infinite; }
@keyframes mk-fviz-figure {
  0%, 20% { opacity: 0.5; }
  46%, 88% { opacity: 1; }
  96%, 100% { opacity: 0.5; }
}
.mk-fviz-scan { opacity: 0; animation: mk-fviz-scan var(--T) linear infinite; }
@keyframes mk-fviz-scan {
  0%, 14% { transform: translateX(0); opacity: 0; }
  20% { opacity: 1; }
  44% { transform: translateX(86px); opacity: 1; }
  50%, 100% { transform: translateX(86px); opacity: 0; }
}
.mk-fviz-fmt {
  opacity: 0.4;
  animation: mk-fviz-fmt var(--T) ease-out infinite;
  animation-delay: calc(var(--i) * 0.28s);
}
@keyframes mk-fviz-fmt {
  0%, 46% { opacity: 0.4; }
  56%, 88% { opacity: 1; }
  96%, 100% { opacity: 0.4; }
}

/* ── scRxiv · Curated catalog ─────────────────────────────────── */
.mk-fviz-catalog {
  position: absolute;
  inset: 0.7rem 0.95rem calc(var(--cap) + 0.15rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.mk-fviz-search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding: 0.26rem 0.55rem;
  border-radius: 0.45rem;
  background: rgba(250, 246, 236, 0.06);
  border: 1px solid rgba(250, 246, 236, 0.14);
  font-family: var(--mk-mono);
  font-size: 0.64rem;
  color: rgba(250, 246, 236, 0.5);
}
/* Typewriter: the steps() lives on the keyframe that starts the typing
   segment, so one loop can type, hold and clear. */
.mk-fviz-search .q {
  display: inline-block;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--mk-text-on-dark);
  animation: mk-fviz-type var(--T) linear infinite;
}
@keyframes mk-fviz-type {
  0% { width: 0ch; animation-timing-function: steps(5, start); }
  20% { width: 5ch; }
  84% { width: 5ch; animation-timing-function: steps(1, start); }
  100% { width: 0ch; }
}
.mk-fviz-search .caret {
  width: 1px;
  height: 0.76rem;
  background: currentColor;
  animation: mk-fviz-caret 1s steps(1) infinite;
}
@keyframes mk-fviz-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.mk-fviz-search .count { margin-left: auto; display: grid; }
.mk-fviz-search .count b { grid-area: 1 / 1; font-weight: 500; white-space: nowrap; }
.mk-fviz-cat-list {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  flex: 1;
  min-height: 0;
}
.mk-fviz-cat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 0;
  min-height: 0;
  padding: 0 0.55rem;
  border-radius: 0.45rem;
  background: rgba(250, 246, 236, 0.045);
  border: 1px solid rgba(250, 246, 236, 0.08);
  overflow: hidden;
}
.mk-fviz-cat-row .dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: currentColor;
}
.mk-fviz-cat-row .nm {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mk-text-on-dark);
  white-space: nowrap;
  overflow: hidden;
}
.mk-fviz-cat-row .nm em {
  font-style: normal;
  font-family: var(--mk-mono);
  font-size: 0.55rem;
  font-weight: 400;
  color: rgba(250, 246, 236, 0.42);
}
.mk-fviz-cat-row .chip {
  flex: 0 0 auto;
  font-family: var(--mk-mono);
  font-size: 0.56rem;
  color: rgba(250, 246, 236, 0.45);
}
.mk-fviz-cat-row .chip b { color: var(--mk-text-on-dark); font-weight: 600; }
.mk-fviz-cat-row .btn {
  flex: 0 0 auto;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--mk-mono);
  font-size: 0.54rem;
}
/* Filtered-out rows collapse rather than vanish, so the list settles. */
.mk-fviz-cat-row.is-out {
  animation: mk-fviz-filterout var(--T) ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.09s);
}
@keyframes mk-fviz-filterout {
  0%, 22% { opacity: 1; flex-grow: 1; transform: none; }
  34%, 78% { opacity: 0; flex-grow: 0.001; transform: translateX(-8px); }
  88%, 100% { opacity: 1; flex-grow: 1; transform: none; }
}
/* Phone variant: same shape, but opacity leads the collapse in and trails it
   out so no partially-transparent frame is ever a crushed one. Applied by the
   max-width: 600px block further down. */
@keyframes mk-fviz-filterout-mobile {
  0%, 22% { opacity: 1; flex-grow: 1; transform: none; }
  28% { opacity: 0; flex-grow: 0.7; transform: translateX(-3px); }
  34%, 78% { opacity: 0; flex-grow: 0.001; transform: translateX(-8px); }
  84% { opacity: 0; flex-grow: 1; transform: none; }
  88%, 100% { opacity: 1; flex-grow: 1; transform: none; }
}

/* ── scRxiv · One-click import ────────────────────────────────── */
.mk-fviz--one-click-import { --pstep: 0.35s; }
.mk-fviz-button {
  transform-box: fill-box;
  transform-origin: center;
  animation: mk-fviz-press var(--T) ease-out infinite;
}
.mk-fviz-button-bg { fill: rgba(250, 246, 236, 0.08); stroke: currentColor; stroke-width: 0.5; }
@keyframes mk-fviz-press {
  0%, 18% { transform: scale(1); }
  22% { transform: scale(0.94); }
  28%, 100% { transform: scale(1); }
}
.mk-fviz-ripple {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mk-fviz-ripple var(--T) ease-out infinite;
}
@keyframes mk-fviz-ripple {
  0%, 18% { opacity: 0; transform: scale(0.3); }
  24% { opacity: 0.8; transform: scale(0.6); }
  40%, 100% { opacity: 0; transform: scale(1.3); }
}
.mk-fviz-cursor.is-click { animation-name: mk-fviz-cursor-click; }
@keyframes mk-fviz-cursor-click {
  0% { transform: translate(124px, 52px); opacity: 0; }
  6% { opacity: 1; }
  18%, 34% { transform: translate(100px, 45px); opacity: 1; }
  46%, 100% { transform: translate(100px, 45px); opacity: 0; }
}
.mk-fviz-packet.is-late { animation-name: mk-fviz-packet-late; }
@keyframes mk-fviz-packet-late {
  0%, 26% { transform: translate(0, 0); opacity: 0; }
  30% { opacity: 0.95; }
  56% { transform: translate(var(--dx), var(--dy)); opacity: 0.95; }
  62%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.mk-fviz-ring.is-late { animation-name: mk-fviz-ring-late; animation-duration: var(--T); }
@keyframes mk-fviz-ring-late {
  0%, 54% { opacity: 0; transform: scale(0.96); }
  62% { opacity: 0.7; transform: scale(1); }
  82%, 100% { opacity: 0; transform: scale(1.1); }
}

/* ── scRxiv · Subset & re-analyze ─────────────────────────────── */
/* Unlike scRIPT's Subsetting, the published atlas does not go anywhere —
   you take a copy out of it — so the source stays on screen, greyed. */
.mk-fviz--subset-re-analyze .mk-fviz-rest { animation-name: mk-fviz-rest-keep; }
@keyframes mk-fviz-rest-keep {
  0%, 14% { filter: grayscale(0); opacity: 1; }
  30%, 86% { filter: grayscale(1); opacity: 0.3; }
  96%, 100% { filter: grayscale(0); opacity: 1; }
}
.mk-fviz-newpanel {
  fill: rgba(250, 246, 236, 0.02);
  stroke: currentColor;
  stroke-width: 0.45;
  animation: mk-fviz-newpanel var(--T) ease-in-out infinite;
}
@keyframes mk-fviz-newpanel {
  0%, 30% { opacity: 0.35; stroke-dasharray: 2.4 2; }
  52%, 86% { opacity: 1; stroke-dasharray: 240 0; }
  96%, 100% { opacity: 0.35; stroke-dasharray: 2.4 2; }
}

/* ── scRxiv · Host your data ──────────────────────────────────── */
.mk-fviz-share-link {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mk-fviz-sharedraw var(--T) ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.5s);
}
@keyframes mk-fviz-sharedraw {
  0%, 20% { stroke-dashoffset: 1; opacity: 0.85; }
  40%, 86% { stroke-dashoffset: 0; opacity: 0.85; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.mk-fviz-share {
  opacity: 0;
  animation: mk-fviz-sharein var(--T) ease-out infinite;
  animation-delay: calc(var(--i) * 0.5s);
}
@keyframes mk-fviz-sharein {
  0%, 34% { opacity: 0; transform: translateX(-3px); }
  46%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateX(-3px); }
}

/* ── scRxiv · Manuscript supplement ───────────────────────────── */
/* The page is the one light surface in the set — it should read as paper. */
.mk-fviz-paper-bg { fill: rgba(243, 238, 226, 0.9); }
.mk-fviz-paper-line { fill: rgba(17, 37, 60, 0.18); }
.mk-fviz-paper-fig { fill: rgba(17, 37, 60, 0.09); stroke: rgba(17, 37, 60, 0.18); stroke-width: 0.3; }
.mk-fviz-paper text { fill: rgba(17, 37, 60, 0.55); }
.mk-fviz-doi-link {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.55;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mk-fviz-doidraw var(--T) ease-in-out infinite;
}
.mk-fviz-doi-link.is-b { animation-delay: 1.4s; }
@keyframes mk-fviz-doidraw {
  0%, 12% { stroke-dashoffset: 1; opacity: 0.9; }
  34%, 88% { stroke-dashoffset: 0; opacity: 0.9; }
  96%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
.mk-fviz-doi { opacity: 0; animation: mk-fviz-appear var(--T) ease-out infinite; animation-delay: 0.5s; }
.mk-fviz-livepanel { opacity: 0; animation: mk-fviz-appear var(--T) ease-out infinite; animation-delay: 1.6s; }

/* ── Platform · Cloud computing ───────────────────────────────── */
.mk-fviz--hassle-free-cloud-computing { --T: 7s; }
.mk-fviz-cloud {
  fill: rgba(250, 246, 236, 0.03);
  stroke: rgba(250, 246, 236, 0.16);
  stroke-width: 0.45;
  stroke-dasharray: 3 2.4;
}
.mk-fviz-worker-bg { fill: rgba(250, 246, 236, 0.06); stroke: currentColor; stroke-width: 0.4; }
.mk-fviz-worker {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mk-fviz-spinup var(--T) ease-out infinite;
  animation-delay: calc(var(--i) * 0.22s);
}
@keyframes mk-fviz-spinup {
  0%, 14% { opacity: 0; transform: scale(0.7); }
  26%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(0.7); }
}

/* ── Platform · Background job scheduling ─────────────────────── */
.mk-fviz--background-job-scheduling { --T: 7.5s; }
.mk-fviz-lane { stroke: rgba(250, 246, 236, 0.07); stroke-width: 11; }
.mk-fviz-gate {
  fill: rgba(250, 246, 236, 0.05);
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-dasharray: 2.6 2;
  animation: mk-fviz-gate 1.8s ease-in-out infinite;
}
@keyframes mk-fviz-gate {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.mk-fviz-job-bg { fill: rgba(8, 17, 30, 0.82); stroke: rgba(250, 246, 236, 0.2); stroke-width: 0.4; }
/* Negative delay: the lane is already full when the modal opens rather than
   starting with five chips stacked at the left edge. */
.mk-fviz-job {
  animation: mk-fviz-queue var(--T) linear infinite;
  animation-delay: calc(var(--i) * -1.5s);
}
@keyframes mk-fviz-queue {
  0% { transform: translateX(0); }
  100% { transform: translateX(220px); }
}
/* Queued → running → done, timed to when the chip is inside the gate. */
.mk-fviz-job .mk-fviz-job-bg {
  animation: mk-fviz-jobstate var(--T) linear infinite;
  animation-delay: calc(var(--i) * -1.5s);
}
@keyframes mk-fviz-jobstate {
  0%, 38% { stroke: rgba(250, 246, 236, 0.2); }
  45%, 52% { stroke: currentColor; }
  60%, 100% { stroke: rgba(87, 201, 138, 0.9); }
}

/* ── Platform · File manager ──────────────────────────────────── */
.mk-fviz--file-manager { --T: 7s; }
.mk-fviz-fm {
  position: absolute;
  inset: 0.7rem 0.95rem calc(var(--cap) + 0.15rem);
  display: grid;
  grid-template-columns: 6.7rem 1fr;
  gap: 0.5rem;
}
.mk-fviz-fm-rail { display: flex; flex-direction: column; gap: 0.25rem; }
.mk-fviz-fm-folder {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 0;
  min-height: 0;
  padding: 0 0.42rem;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  font-family: var(--mk-mono);
  font-size: 0.55rem;
  white-space: nowrap;
  color: rgba(250, 246, 236, 0.45);
}
.mk-fviz-fm-folder i {
  width: 8px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 0.5px 2px 1px 1px;
  background: currentColor;
  opacity: 0.55;
}
.mk-fviz-fm-folder.is-active {
  color: var(--mk-fv-accent, #8bb0d8);
  border-color: currentColor;
  background: rgba(250, 246, 236, 0.07);
}
.mk-fviz-fm-list { display: flex; flex-direction: column; gap: 0.22rem; }
.mk-fviz-fm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 1 1 0;
  min-height: 0;
  padding: 0 0.55rem;
  border-radius: 0.4rem;
  background: rgba(250, 246, 236, 0.045);
  border: 1px solid rgba(250, 246, 236, 0.08);
  animation: mk-fviz-sort var(--T) cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
.mk-fviz-fm-row .nm {
  font-family: var(--mk-mono);
  font-size: 0.6rem;
  color: var(--mk-text-on-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-fviz-fm-row .sz {
  flex: 0 0 auto;
  font-family: var(--mk-mono);
  font-size: 0.56rem;
  color: rgba(250, 246, 236, 0.45);
}
/* --dy is the row's slot offset once the list is sorted by size; one slot
   is the row's own height plus the list gap. */
@keyframes mk-fviz-sort {
  0%, 24% { transform: translateY(0); }
  46%, 82% { transform: translateY(calc(var(--dy) * (100% + 0.22rem))); }
  96%, 100% { transform: translateY(0); }
}

/* ── Platform · Version history ───────────────────────────────── */
.mk-fviz--version-history { --T: 9s; }
.mk-fviz-rail-bg { stroke: rgba(250, 246, 236, 0.12); stroke-width: 0.8; }
.mk-fviz-rail {
  stroke: currentColor;
  stroke-width: 0.8;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mk-fviz-railgrow var(--T) linear infinite;
}
@keyframes mk-fviz-railgrow {
  0%, 4% { stroke-dashoffset: 1; }
  46%, 94% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}
.mk-fviz-commit {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mk-fviz-commit var(--T) ease-out infinite;
  animation-delay: calc(var(--i) * 0.62s);
}
.mk-fviz-commit-dot { fill: currentColor; stroke: rgba(8, 17, 30, 0.85); stroke-width: 0.8; }
@keyframes mk-fviz-commit {
  0%, 4% { opacity: 0; transform: scale(0.4); }
  12%, 90% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0.4); }
}
/* The replay head — the history is not just a log, it can be re-run. */
.mk-fviz-head {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.7;
  opacity: 0;
  animation: mk-fviz-replay var(--T) ease-in-out infinite;
}
@keyframes mk-fviz-replay {
  0%, 52% { transform: translateX(0); opacity: 0; }
  56% { opacity: 0.9; }
  86% { transform: translateX(var(--span)); opacity: 0.9; }
  92%, 100% { transform: translateX(var(--span)); opacity: 0; }
}

/* ── Platform · Team workspaces ───────────────────────────────── */
.mk-fviz--team-workspaces { --T: 7s; --pstep: 0.42s; }
.mk-fviz-avatar { fill: rgba(250, 246, 236, 0.08); stroke: currentColor; stroke-width: 0.5; }
.mk-fviz-member {
  animation: mk-fviz-member 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.4s);
}
@keyframes mk-fviz-member {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

/* ── Platform · Role-based access ─────────────────────────────── */
.mk-fviz--role-based-access { --T: 7s; }
.mk-fviz-cell { fill: rgba(250, 246, 236, 0.04); stroke: rgba(250, 246, 236, 0.14); stroke-width: 0.4; }
.mk-fviz-cell.is-on {
  animation: mk-fviz-cellon var(--T) ease-out infinite;
  animation-delay: calc((var(--i) * 5 + var(--k)) * 0.09s);
}
@keyframes mk-fviz-cellon {
  0%, 6% { fill: rgba(250, 246, 236, 0.04); stroke: rgba(250, 246, 236, 0.14); }
  16%, 88% { fill: rgba(250, 246, 236, 0.12); stroke: currentColor; }
  96%, 100% { fill: rgba(250, 246, 236, 0.04); stroke: rgba(250, 246, 236, 0.14); }
}
.mk-fviz-check {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  animation: mk-fviz-checkin var(--T) ease-out infinite;
  animation-delay: calc((var(--i) * 5 + var(--k)) * 0.09s);
}
@keyframes mk-fviz-checkin {
  0%, 8% { opacity: 0; }
  18%, 88% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* ── reduced motion: hold every illustration at a legible rest ──
   Order matters here: the blanket "reveal" rule and the per-element "hide"
   rules are both two-class selectors, so the hides have to come second. */
@media (prefers-reduced-motion: reduce) {
  .mk-fviz,
  .mk-fviz * { animation: none !important; }
  /* Anything that is normally revealed by its animation. */
  .mk-fviz [class*='mk-fviz'],
  .mk-fviz-stream circle { opacity: 1; }
  /* Anything that only means something while it is moving. */
  .mk-fviz .mk-fviz-cursor,
  .mk-fviz .mk-fviz-packet,
  .mk-fviz .mk-fviz-ripple,
  .mk-fviz .mk-fviz-sweep,
  .mk-fviz .mk-fviz-scan,
  .mk-fviz .mk-fviz-head,
  .mk-fviz .mk-fviz-swatches.is-b,
  /* The still frame is the atlas, so only its names belong on it. */
  .mk-fviz .mk-fviz-lab--sub,
  .mk-fviz .is-after { opacity: 0; }
  .mk-fviz .mk-fviz-trajpath,
  .mk-fviz .mk-fviz-rail,
  .mk-fviz .mk-fviz-share-link,
  .mk-fviz .mk-fviz-doi-link { stroke-dashoffset: 0; }
  .mk-fviz .mk-fviz-anno { color: var(--c1); }
  .mk-fviz .mk-fviz-newpanel { stroke-dasharray: 2.4 2; }
  .mk-fviz-row .bar b { width: 100%; }
  .mk-fviz-row .dot { background: #57c98a; }
  /* The catalog rests filtered, so its counter has to agree. */
  .mk-fviz-search .q { width: auto; }
  .mk-fviz-cat-row.is-out { display: none; }
  .mk-fviz-search .count .is-before { opacity: 0; }
  .mk-fviz-search .count .is-after { opacity: 1; }
}

/* ══════════════ PRODUCT DEEP-DIVE PAGE (/platform/<product>) ═══ */
.mk-pd-hero {
  position: relative;
  background: linear-gradient(155deg, var(--pd-tint, rgba(46, 80, 119, 0.5)), #0a1526);
  color: var(--mk-bone);
  padding: var(--mk-nav-clearance-top) 0 var(--mk-hero-pad-bottom);
  isolation: isolate;
}
.mk-pd-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.mk-pd-hero-main { max-width: 60ch; }
.mk-pd-tag {
  display: block;
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: clamp(0.765rem, 1.08vw, 0.9rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pd-txt, var(--mk-bone)) 55%, var(--mk-bone));
}
.mk-pd-title-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 1rem;
}
.mk-pd-logo {
  width: clamp(5.5rem, 9vw, 7.5rem);
  height: clamp(5.5rem, 9vw, 7.5rem);
  flex: 0 0 auto;
  display: block;
  object-fit: cover;
  object-position: center;
}
.mk-pd-title-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
}
.mk-pd-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--mk-bone);
  margin: 0;
}
.mk-pd-expand {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.35;
  color: var(--pd-txt, var(--mk-bone));
  margin: 0;
}
.mk-pd-blurb {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.6;
  color: rgba(250, 246, 236, 0.82);
  margin: 0;
}
.mk-pd-hero-side {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}
.mk-pd-try {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.1rem;
  background: var(--pd-accent, var(--mk-navy));
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--mk-bone);
  text-align: center;
  text-decoration: none;
  transition: opacity 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.mk-pd-try:hover { opacity: 0.9; color: var(--mk-bone); }
.mk-pd-try--platform {
  background: rgba(250, 246, 236, 0.08);
  border-color: rgba(250, 246, 236, 0.22);
  color: var(--mk-text-on-dark-muted);
}
.mk-pd-try--platform:hover {
  opacity: 1;
  background: rgba(250, 246, 236, 0.14);
  border-color: rgba(250, 246, 236, 0.4);
  color: var(--mk-bone);
}

/* rail + blocks */
/* overflow-x:clip on .mk-page breaks sticky; allow it on product pages. */
.mk-page.mk-pd {
  overflow: visible;
}
.mk-pd-section {
  padding-top: clamp(1.5rem, 3.5vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}
.mk-pd-section .mk-section-card {
  overflow: visible;
}
.mk-pd-body {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
.mk-pd-rail {
  position: sticky;
  top: 5.5rem;
  align-self: start;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.mk-pd-rail-label {
  display: block;
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mk-text-faint);
  padding: 0 0.2rem 0.7rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--mk-rule);
}
.mk-pd-rail-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.55rem;
}
.mk-pd-rail-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--mk-text-muted);
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.mk-pd-rail-item .lbl { line-height: 1.25; }
.mk-pd-rail-item .n {
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.62rem;
  color: var(--pd-accent, var(--mk-navy));
  opacity: 0.75;
  flex: 0 0 auto;
}
.mk-pd-rail-item:hover {
  background: color-mix(in srgb, var(--pd-accent, var(--mk-navy)) 8%, var(--mk-bone));
  color: var(--mk-ink);
}
.mk-pd-rail-item.is-active {
  background: color-mix(in srgb, var(--pd-accent, var(--mk-navy)) 12%, var(--mk-bone));
  border-color: color-mix(in srgb, var(--pd-accent, var(--mk-navy)) 28%, transparent);
  color: var(--mk-ink);
  box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--pd-accent, var(--mk-navy)) 55%, transparent);
}
.mk-pd-rail-item.is-active .n { opacity: 1; }

.mk-pd-blocks {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}
.mk-pd-block {
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.8vw, 2rem);
  align-items: center;
  scroll-margin-top: 6rem;
  background: rgba(250, 246, 236, 0.55);
  border: 1px solid rgba(17, 37, 60, 0.1);
  border-radius: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mk-pd-block:hover {
  border-color: color-mix(in srgb, var(--pd-accent, var(--mk-navy)) 22%, var(--mk-rule));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pd-accent, var(--mk-navy)) 8%, transparent),
    0 14px 28px -18px color-mix(in srgb, var(--pd-accent, var(--mk-navy)) 30%, transparent);
}
.mk-pd-block--rev .mk-pd-viz { order: -1; }
.mk-pd-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mk-mono);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pd-accent, var(--mk-navy));
}
.mk-pd-kicker .rule {
  width: 1.35rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.mk-pd-kicker--muted { color: var(--mk-text-faint); }
.mk-pd-block-text h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--mk-ink);
  margin: 0.75rem 0 0.6rem;
}
.mk-pd-block-text p {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--mk-text-muted);
  margin: 0;
  max-width: 46ch;
}

/* Stage for the feature illustration (js/home/public/feature-viz.js), which
   mounts an absolutely positioned .mk-fviz in here. The illustrations are a
   wide 200 × 56 strip plus a caption line, so the drawing is constrained by
   the stage width; the extra height here is deliberate breathing room above
   and below it. */
.mk-pd-viz {
  position: relative;
  aspect-ratio: 200 / 104;
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(250, 246, 236, 0.12);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--pd-accent, var(--mk-navy)) 35%, #0a1526), #0a1526);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

@media (max-width: 880px) {
  .mk-pd-body { grid-template-columns: 1fr; }
  .mk-pd-rail { position: static; }
  .mk-pd-rail-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
  }
  .mk-pd-rail-item { padding: 0.5rem 0.65rem; }
  .mk-pd-block {
    grid-template-columns: 1fr;
  }
  .mk-pd-block--rev .mk-pd-viz { order: 0; }
}

/* .mk-fviz reserves a taller caption strip below 600px, so give the stage the
   extra height back or the drawing shrinks to fit what is left. */
@media (max-width: 600px) {
  /* aspect-ratio alone ties the stage height to the viewport width, so on a
     320px phone the drawing loses the room its rows need; the floor keeps it
     legible without stretching the wider phones. */
  /* width must stay definite: with only aspect-ratio set, a min-height that
     wins makes the box derive its width from that height and overflow. */
  .mk-pd-viz {
    aspect-ratio: 200 / 133;
    width: 100%;
    min-height: 11.5rem;
  }

  /* flex-shrink: 0 kept this sized to its max-content and pushed it past the
     viewport; let it shrink so its existing flex-wrap can do its job. */
  .mk-pd-hero-side {
    flex-shrink: 1;
    min-width: 0;
    justify-content: flex-start;
  }
}

/* ── PHONE: keep the demo list rows legible ────────────────────────
   The demo panels are sized by aspect-ratio, so a narrow viewport makes them
   short as well as narrow. Their list rows are flex: 1 1 0 with
   overflow: hidden, so once the panel is shorter than the content each row
   clips its two-line label mid-glyph and neighbouring fragments read as
   overlapping text. Two fixes: give the panels a height floor, and drop the
   secondary meta line so every row needs only one line. */
@media (max-width: 600px) {
  /* Tall enough for the longest list (7 archive rows) at content height, so
     nothing runs past the bottom of the card.

     width must be explicit. With only aspect-ratio and a min-height that wins,
     WebKit resolves the width from the used height (360px * 4/3 = 480px) and
     the card blows out of a 390px viewport; Chromium keeps the stretched
     width, so this only reproduces in Safari. A definite width means
     aspect-ratio can only ever derive the height. */
  .mk-demo-panel {
    min-height: 22.5rem;
    width: 100%;
  }

  .mk-demo-job-meta,
  .mk-xiv-source,
  .mk-fviz-cat-row .nm em {
    display: none;
  }

  /* Progress bar is decorative; the badge already says RUNNING. Dropping it
     buys the step name the horizontal room it needs. */
  .mk-demo-job-bar { display: none; }

  /* An archive row carries a name, two tags, two stat chips and two buttons —
     more than fits at 390px. Keep the name, the cell count and Import. */
  .mk-xiv-tag,
  .mk-xiv-chip + .mk-xiv-chip,
  .mk-xiv-btn:not(.is-import) {
    display: none;
  }

  /* block, not flex: text-overflow only ellipsises an inline formatting
     context, and these are flex containers in the default layout. With the
     meta line hidden above, each holds a single run of text. */
  .mk-xiv-name,
  .mk-fviz-cat-row .nm {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The chip stacks its value over its unit, which makes it taller than the
     single-line row it sits in. Inline it, and drop the unit label — the
     dataset name is the content that matters and it needs the width back. */
  .mk-xiv-chip { white-space: nowrap; }
  .mk-xiv-chip b { display: inline; }
  .mk-xiv-chip i { display: none; }

  /* Trim the row box to what single-line content actually needs. */
  .mk-demo-job,
  .mk-xiv-row {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  /* The filter-out animation fades and collapses a row on the same timeline.
     On a short panel the row is already near its content height, so the
     collapsing frames clip the label mid-glyph while the row is still ~50%
     opaque — a visible flicker. Reach opacity 0 before the collapse starts,
     and restore the height before fading back in. */
  .mk-fviz-cat-row.is-out { animation-name: mk-fviz-filterout-mobile; }

  /* Size rows to their content rather than making them share the panel
     height. flex: 1 1 0 is what let a short panel crush a row below its
     content and clip it; the panel min-height above reserves the room this
     needs. .is-hidden still overrides with flex: 0 0 0, so the scRxiv filter
     animation keeps collapsing rows. */
  .mk-demo-job,
  .mk-xiv-row {
    flex: 0 0 auto;
  }

  .mk-demo-joblist,
  .mk-xiv-list {
    justify-content: flex-start;
  }

  .mk-demo-job-name,
  .mk-xiv-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}