/* /chrome/ only. Everything else on the page is market.css. */
body.mk .cx-banner { background: var(--dark, #1F1A14); color: #FFF9EE; padding: 28px 0; }
body.mk .cx-banner h2 { color: #FFF9EE; margin: 0 0 14px; }
body.mk .cx-banner p { margin: 0; max-width: 46em; color: #F3E7D3; }
body.mk .cx-banner a { color: #F7C873; text-decoration: underline; }
body.mk .cx-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; counter-reset: cx; }
body.mk .cx-steps li { counter-increment: cx; color: #F3E7D3; font-size: 1rem; line-height: 1.5; }
body.mk .cx-steps li b { display: block; color: #FFF9EE; font-size: 1.15rem; margin-bottom: 4px; }
body.mk .cx-steps li b::before { content: counter(cx) ". "; color: #F7C873; }
body.mk .cx-cta { margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
body.mk .cx-note { color: var(--mut); font-size: .95rem; }
body.mk .cx-soon {
  display: inline-flex; align-items: center; min-height: 52px; padding: 12px 24px; border-radius: 999px;
  background: var(--amber-soft, #F6E7CC); color: var(--amber-deep, #8A4C0E); font-weight: 700;
}
body.mk .cx-shot { margin: 34px 0 0; }
body.mk .cx-shot img { display: block; width: 100%; max-width: 1100px; height: auto; border-radius: 18px; box-shadow: 0 24px 60px rgba(60, 40, 10, .18), 0 0 0 1px rgba(60, 40, 10, .08); }

/* The launch pill above the headline. Same anatomy as the home hero's
   eyebrow, flat, with the word New on its own chip. */
body.mk .cx-new {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 18px 0 20px; padding: 6px 16px 6px 6px; border-radius: 999px;
  background: var(--mk-surface); color: var(--ink);
  font-weight: 700; font-size: .9375rem;
}
body.mk .cx-new span {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: var(--amber-deep); color: #FFF8EC;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
}

/* See him at work: three framed screens, tilted like the scene cards. */
body.mk .cx-gallery {
  display: grid; gap: 26px; margin-top: 34px; padding: 6px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
body.mk .cx-gallery > * { min-width: 0; }
body.mk .cx-gallery figure {
  margin: 0; background: var(--mk-surface); border-radius: var(--mk-r-lg);
  padding: 14px 14px 22px;
  transform: rotate(var(--deg, 0deg)); transition: transform .3s var(--mk-ease);
}
body.mk .cx-gallery figure:nth-child(3n+1) { --deg: -1.1deg; }
body.mk .cx-gallery figure:nth-child(3n+2) { --deg:  0.9deg; }
body.mk .cx-gallery figure:nth-child(3n)   { --deg: -0.6deg; }
body.mk .cx-gallery figure:hover { --deg: 0deg; }
body.mk .cx-gallery img { display: block; width: 100%; height: auto; border-radius: var(--mk-r-sm); }
body.mk .cx-gallery figcaption { padding: 16px 8px 0; color: var(--mut); font-size: 1rem; line-height: 1.5; }
body.mk .cx-gallery figcaption b {
  display: block; margin-bottom: 4px; color: var(--ink);
  font-family: var(--serif); font-size: 1.1875rem; letter-spacing: -0.015em;
}
body.mk .cx-badge { margin-top: 34px; }

@media (prefers-reduced-motion: reduce) {
  body.mk .cx-gallery figure { transform: none; transition: none; }
}
body.mk .cx-note a { color: var(--amber-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }