/* Live product demos on the marketing pages (js/mocks/host.js, 2026-10-18).
   A .mk-slot is an app window: the static fallback first, then the live
   demo frame fades in over it. Set the height per slot with --mk-h (and
   --mk-h-sm for phones). */

.mk-slot {
  position: relative;
  width: 100%;
  height: var(--mk-h, 520px);
  border-radius: var(--mk-r, 16px);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(16, 16, 32, 0.06), 0 26px 60px -28px rgba(16, 16, 40, 0.32);
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
}
.mk-slot.is-bare {
  background: transparent;
  box-shadow: none;
}

.mk-slot > .mk-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.45s ease;
}
.mk-slot > .mk-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
  color-scheme: light;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mk-slot.is-live > .mk-frame { opacity: 1; transform: none; }
.mk-slot.is-live > .mk-fallback { opacity: 0; pointer-events: none; }

@media (max-width: 640px) {
  .mk-slot { height: var(--mk-h-sm, var(--mk-h, 520px)); }
}

@media (prefers-reduced-motion: reduce) {
  .mk-slot > .mk-frame,
  .mk-slot > .mk-fallback { transition: none; transform: none; }
}

/* Until the demo is live the slot is invisible and the old mock shows as it
   always did; then the window (white, hairline, shadow) appears with it. */
.mk-slot:not(.is-live) { background: transparent; box-shadow: none; }
.mk-slot { transition: box-shadow 0.6s ease, background-color 0.6s ease; }

/* Heights by layout (override per slot with --mk-h / --mk-h-sm). */
.mk-slot[data-layout="stage"] { --mk-h: 600px; --mk-h-sm: 600px; }
.mk-slot[data-layout="split"] { --mk-h: 500px; --mk-h-sm: 560px; }
.mk-slot[data-layout="split"][data-tall] { --mk-h: 580px; --mk-h-sm: 620px; }
.mk-slot[data-layout="mini"] { --mk-h: 100%; --mk-h-sm: 100%; --mk-r: 12px; }
/* Per demo: Home's focus card is tall; show it down to the switches. */
.mk-slot[data-mock="focus"][data-layout="split"] { --mk-h: 580px; --mk-h-sm: 640px; }

/* ── On the marketing pages (landing-rd.css blocks) ────────────────────── */
.rd-media:has(> .mk-slot) { padding: 40px 36px; }
.rd-media:has(> .mk-slot[data-tall]) { padding: 36px; }
.rd-media > .mk-slot { max-width: 680px; }
.rd-media > .mk-slot[data-tall] { max-width: 460px; }
.rd-panel:has(> .mk-slot) { max-width: 1240px; }
.rd-frame:has(.mk-slot) { padding: 48px 40px; }
.rd-bento-media:has(> .mk-slot) { display: block; height: 260px; padding: 16px; }
@media (max-width: 640px) {
  .rd-media:has(> .mk-slot) { padding: 20px 14px; }
  .rd-frame:has(.mk-slot) { padding: 16px 12px; }
  .rd-bento-media:has(> .mk-slot) { height: 280px; padding: 12px; }
}

/* Hero cards (chat.html .rd-hv-card): the card keeps its place and its
   bob; the live demo fills it. The fallback wears the old card look. */
.rd-hv-card:has(> .mk-slot) { padding: 0; border: 0; background: none; box-shadow: none; }
.rd-hv-card > .mk-slot.is-hero { --mk-h: 100%; --mk-h-sm: 100%; --mk-r: 14px; }
.rd-hv-chat:has(> .mk-slot) { height: 220px; }
.rd-hv-focus:has(> .mk-slot) { height: 200px; }
.rd-hv-reel:has(> .mk-slot) { height: 200px; }
.mk-fallback.rd-hv-fb {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--rd-line, #E6E6E6);
  border-radius: 14px;
  background: var(--rd-card, #fff);
  box-shadow: var(--rd-shadow, 0 8px 24px rgba(0, 0, 0, 0.08));
  color: var(--rd-ink, #000);
  text-align: left;
}
.rd-hv-reel .mk-fallback.rd-hv-fb {
  border-color: #141414;
  background: radial-gradient(120% 120% at 0% 0%, #7B4DFF 0%, transparent 55%), radial-gradient(100% 100% at 100% 100%, #0D99FF 0%, transparent 60%), #141414;
  color: #FFFFFF;
}
.mk-slot.is-hero.is-live { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 18px 44px -18px rgba(16, 16, 40, 0.35); }
@media (max-width: 640px) {
  .rd-hv-chat:has(> .mk-slot) { height: 230px; }
  .rd-hv-focus:has(> .mk-slot),
  .rd-hv-reel:has(> .mk-slot) { height: 210px; }
}

/* "Around your day" and the other bento rows (2026-10-18): big enough to
   play with. Two wide cards per row on desktop, one per row on phones. */
.rd-bento-grid:has(.mk-slot) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.rd-bento-grid .rd-bento-media:has(> .mk-slot) { height: 420px; padding: 24px; border-radius: 20px; }
.rd-bento-grid:has(.mk-slot) .rd-bento-card h3 { font-size: 24px; letter-spacing: -0.01em; }
.rd-bento-grid:has(.mk-slot) .rd-bento-card p { font-size: 17px; max-width: 46ch; }
@media (max-width: 760px) {
  .rd-bento-grid:has(.mk-slot) { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .rd-bento-grid .rd-bento-media:has(> .mk-slot) { height: 380px; padding: 14px; }
}

/* Use case pages' hero collages (landing-aud.css .aud-hv): each card is a
   small live demo (data-view crops of the builder, chat, journal, reels). */
.aud-hv .rd-hv-card.aud-hv-live { padding: 0; border: 0; background: none; box-shadow: none; }
.aud-hv .rd-hv-card.aud-hv-live > .mk-slot.is-hero { --mk-h: 100%; --mk-h-sm: 100%; --mk-r: 14px; }
.aud-hv .aud-hv-live.aud-hv-a { height: 236px; }
.aud-hv .aud-hv-live.aud-hv-b { top: 300px; width: min(49%, 290px); height: 206px; }
.aud-hv .aud-hv-live.aud-hv-c { left: 0; bottom: 18px; width: min(49%, 286px); height: 206px; }
@media (max-width: 980px) {
  .aud-hv .aud-hv-live.aud-hv-a,
  .aud-hv .aud-hv-live.aud-hv-b,
  .aud-hv .aud-hv-live.aud-hv-c { width: 100%; max-width: 440px; height: 220px; margin: 0 auto; }
}

/* Posters: a real screenshot of the demo, shown until (and unless) the live
   demo loads. */
.mk-slot > .mk-fallback.mk-poster { display: block; }
.mk-poster picture,
.mk-poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mk-slot:has(> .mk-poster):not(.is-live) { background: #FFFFFF; box-shadow: 0 0 0 1px rgba(13, 27, 62, 0.08), 0 24px 56px -28px rgba(13, 27, 62, 0.35); }

/* "Try it live" on phones and modest hardware (js/mocks/host.js LITE). */
.mk-try {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border: 0;
  border-radius: 999px;
  background: #0D1B3E;
  color: #FFFFFF;
  font: 500 14px/1 inherit;
  font-family: inherit;
  box-shadow: 0 8px 20px -8px rgba(13, 27, 62, 0.6);
  cursor: pointer;
}
.mk-try:hover { background: #1B2D63; }
.mk-try:focus-visible { outline: 2px solid #0D99FF; outline-offset: 2px; }
.mk-slot.is-hero .mk-try { right: 10px; bottom: 10px; min-height: 34px; padding: 0 12px 0 10px; font-size: 13px; }
.mk-slot.is-loading::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(13, 27, 62, 0.2);
  border-top-color: #0D1B3E;
  border-radius: 50%;
  animation: mk-spin 0.8s linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }
/* A demo that only loads on request (data-manual): the button is the call
   to action, centred on the poster. */
.mk-slot[data-manual] .mk-try {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  min-height: 52px;
  padding: 0 24px 0 18px;
  font-size: 16px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7), 0 16px 34px -12px rgba(13, 27, 62, 0.6);
}
.mk-slot[data-manual].is-loading::after { right: auto; bottom: auto; left: calc(50% - 11px); top: calc(50% - 11px); }