/*
 * Shared editorial shell for the standalone interactive case demos.
 *
 * The product UI inside every phone keeps its own visual language. This layer
 * only turns the repeated dark demo section into a Brawus split composition:
 * warm paper for the story, a focused dark stage for the working prototype,
 * and the shared blue accent used throughout the redesign.
 */

html body#body.has-case-phone-demo {
  --case-demo-frame: #e7e2d7;
  --case-demo-paper: #f7f4ed;
  --case-demo-ink: #111316;
  --case-demo-muted: #62635f;
  --case-demo-line: rgba(17, 19, 22, .15);
  --case-demo-blue: #6479ea;
  --case-demo-stage: #101318;
  --case-demo-stage-2: #151a22;
}

html body#body.has-case-phone-demo :is(
  [data-real-demo],
  [data-brawus-food-demo],
  [data-fitgom-demo],
  [data-insprm-demo],
  [data-krasivom-demo],
  [data-limbam-demo],
  [data-medlink-demo],
  [data-mostm-demo],
  [data-parla-demo],
  [data-sdm-demo],
  [data-sora-demo],
  [data-viptok-demo],
  [data-voice-memos-demo],
  [data-voiceover-demo],
  [data-yumobm-demo]
) {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 0 !important;
  padding: clamp(18px, 2.4vw, 34px) !important;
  overflow: hidden !important;
  overflow: clip !important;
  color: var(--case-demo-ink) !important;
  border: 1px solid var(--case-demo-line) !important;
  border-radius: clamp(25px, 2.6vw, 40px) !important;
  background:
    radial-gradient(circle at 39% 2%, rgba(100, 121, 234, .17), transparent 25rem),
    linear-gradient(135deg, rgba(255, 255, 255, .28), transparent 42%),
    var(--case-demo-frame) !important;
  box-shadow: 0 24px 74px rgba(7, 10, 14, .11) !important;
  font-family: "Tilda Sans", "Mont", Arial, sans-serif;
}

/* Keep legacy texture layers, but make them behave like quiet print details. */
html body#body.has-case-phone-demo :is(
  [data-real-demo],
  [data-brawus-food-demo],
  [data-fitgom-demo],
  [data-insprm-demo],
  [data-krasivom-demo],
  [data-limbam-demo],
  [data-medlink-demo],
  [data-mostm-demo],
  [data-parla-demo],
  [data-sdm-demo],
  [data-sora-demo],
  [data-viptok-demo],
  [data-voice-memos-demo],
  [data-voiceover-demo],
  [data-yumobm-demo]
)::before,
html body#body.has-case-phone-demo :is(
  [data-real-demo],
  [data-brawus-food-demo],
  [data-fitgom-demo],
  [data-insprm-demo],
  [data-krasivom-demo],
  [data-limbam-demo],
  [data-medlink-demo],
  [data-mostm-demo],
  [data-parla-demo],
  [data-sdm-demo],
  [data-sora-demo],
  [data-viptok-demo],
  [data-voice-memos-demo],
  [data-voiceover-demo],
  [data-yumobm-demo]
)::after {
  opacity: .1 !important;
  pointer-events: none !important;
}

/* Inner-shell cases and direct-grid cases share the same editorial split. */
html body#body.has-case-phone-demo :is(
  .real-demo__inner,
  .foodm-demo__shell,
  .insprm-demo__shell,
  .limbam-demo__shell,
  .medlinkm-demo__shell,
  .mostm-demo__shell,
  .parlam-demo__shell,
  .soram-demo__shell,
  .viptokm-demo__shell,
  .vmm-demo__shell,
  .vom-demo__shell
) {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(320px, .84fr) minmax(420px, 1.16fr) !important;
  align-items: stretch !important;
  gap: clamp(16px, 2vw, 28px) !important;
  width: min(1380px, 100%) !important;
  max-width: 1380px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html body#body.has-case-phone-demo :is(
  [data-fitgom-demo],
  [data-krasivom-demo],
  [data-sdm-demo],
  [data-yumobm-demo]
) {
  display: grid !important;
  grid-template-columns: minmax(320px, .84fr) minmax(420px, 1.16fr) !important;
  align-items: stretch !important;
  gap: clamp(16px, 2vw, 28px) !important;
}

/* The copy is one continuous paper slab, not a stack of nested cards. */
html body#body.has-case-phone-demo :is(
  .real-demo__intro,
  .foodm-demo__intro,
  .fitgom-demo__copy,
  .insprm-demo__intro,
  .krasivom-demo__copy,
  .limbam-demo__intro,
  .medlinkm-demo__intro,
  .mostm-demo__intro,
  .parlam-demo__intro,
  .sdm-demo__copy,
  .soram-demo__intro,
  .viptokm-demo__intro,
  .vmm-demo__intro,
  .vom-demo__intro,
  .yumobm-demo__copy
) {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(28px, 3.4vw, 52px) !important;
  overflow: hidden;
  color: var(--case-demo-ink) !important;
  border: 1px solid rgba(17, 19, 22, .12);
  border-radius: clamp(22px, 2vw, 30px);
  background:
    linear-gradient(var(--case-demo-blue), var(--case-demo-blue)) 0 0 / 52px 3px no-repeat,
    radial-gradient(circle at 100% 0, rgba(100, 121, 234, .11), transparent 18rem),
    var(--case-demo-paper) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .72);
}

html body#body.has-case-phone-demo :is(
  .real-demo__intro,
  .foodm-demo__intro,
  .fitgom-demo__copy,
  .insprm-demo__intro,
  .krasivom-demo__copy,
  .limbam-demo__intro,
  .medlinkm-demo__intro,
  .mostm-demo__intro,
  .parlam-demo__intro,
  .sdm-demo__copy,
  .soram-demo__intro,
  .viptokm-demo__intro,
  .vmm-demo__intro,
  .vom-demo__intro,
  .yumobm-demo__copy
) h2 {
  color: var(--case-demo-ink) !important;
  text-shadow: none !important;
}

/* FitnessGo's font guard deliberately has unusually high specificity. Keep
 * that font decision, but restore readable ink on the shared paper surface. */
html.brawus-v2-html body#body.brawus-v2.has-case-phone-demo .fitgom-demo__copy > h2 {
  color: var(--case-demo-ink) !important;
}

html body#body.has-case-phone-demo :is(
  .real-demo__kicker,
  .foodm-demo__kicker,
  .fitgom-demo__kicker,
  .insprm-demo__kicker,
  .krasivom-demo__kicker,
  .limbam-demo__kicker,
  .medlinkm-demo__kicker,
  .mostm-demo__kicker,
  .parlam-demo__kicker,
  .sdm-demo__kicker,
  .soram-demo__kicker,
  .viptokm-demo__kicker,
  .vom-demo__kicker,
  .yumobm-demo__kicker
) {
  color: var(--case-demo-blue) !important;
}

html body#body.has-case-phone-demo :is(
  .real-demo__lead,
  .foodm-demo__lead,
  .fitgom-demo__lead,
  .insprm-demo__lead,
  .krasivom-demo__lead,
  .limbam-demo__lead,
  .medlinkm-demo__lead,
  .mostm-demo__lead,
  .parlam-demo__lead,
  .sdm-demo__lead,
  .soram-demo__lead,
  .viptokm-demo__lead,
  .vmm-demo__lead,
  .vom-demo__lead,
  .yumobm-demo__lead
) {
  color: var(--case-demo-muted) !important;
  text-shadow: none !important;
}

/* Wordmarks become legible on paper while their coloured marks stay intact. */
html body#body.has-case-phone-demo :is(
  .foodm-demo__brand,
  .fitgom-demo__brand,
  .insprm-demo__mark,
  .krasivom-demo__brand,
  .limbam-demo__brand,
  .medlinkm-demo__brand,
  .mostm-demo__mark,
  .parlam-demo__brand,
  .sdm-demo__brand,
  .soram-demo__brand,
  .viptokm-demo__brand,
  .vmm-demo__brand,
  .vom-demo__wordmark,
  .yumobm-demo__brand
) {
  color: var(--case-demo-ink) !important;
}

html body#body.has-case-phone-demo :is(
  .foodm-demo__brand > span:last-child,
  .fitgom-demo__brand > b,
  .fitgom-demo__brand > strong,
  .medlinkm-demo__brand > strong,
  .soram-demo__brand > span:last-child,
  .viptokm-demo__brand > strong,
  .vmm-demo__brand p
) :is(strong, small),
html body#body.has-case-phone-demo :is(
  .foodm-demo__brand > span:last-child strong,
  .foodm-demo__brand > span:last-child small,
  .fitgom-demo__brand > b,
  .fitgom-demo__brand > strong,
  .medlinkm-demo__brand > strong,
  .soram-demo__brand > span:last-child strong,
  .soram-demo__brand > span:last-child small,
  .viptokm-demo__brand > strong,
  .viptokm-demo__brand > small,
  .vmm-demo__brand p strong,
  .vmm-demo__brand p small
) {
  color: inherit !important;
}

html body#body.has-case-phone-demo .limbam-demo__brand > span {
  color: #fff !important;
}

html body#body.has-case-phone-demo :is(
  .foodm-demo__flow,
  .fitgom-demo__steps,
  .insprm-demo__flow,
  .krasivom-demo__steps,
  .limbam-demo__flow,
  .medlinkm-demo__flow,
  .mostm-demo__flow,
  .parlam-demo__flow,
  .sdm-demo__steps,
  .soram-demo__flow,
  .viptokm-demo__flow,
  .vmm-demo__flow,
  .vom-demo__flow,
  .yumobm-demo__steps
) {
  color: var(--case-demo-ink) !important;
  border-color: var(--case-demo-line) !important;
}

html body#body.has-case-phone-demo :is(
  .foodm-demo__flow,
  .fitgom-demo__steps,
  .insprm-demo__flow,
  .krasivom-demo__steps,
  .limbam-demo__flow,
  .medlinkm-demo__flow,
  .mostm-demo__flow,
  .parlam-demo__flow,
  .sdm-demo__steps,
  .soram-demo__flow,
  .viptokm-demo__flow,
  .vmm-demo__flow,
  .vom-demo__flow,
  .yumobm-demo__steps
) :is(span, p, strong, b) {
  color: var(--case-demo-ink) !important;
  border-color: var(--case-demo-line) !important;
}

html body#body.has-case-phone-demo :is(
  .foodm-demo__flow,
  .fitgom-demo__steps,
  .insprm-demo__flow,
  .krasivom-demo__steps,
  .limbam-demo__flow,
  .medlinkm-demo__flow,
  .mostm-demo__flow,
  .parlam-demo__flow,
  .sdm-demo__steps,
  .soram-demo__flow,
  .viptokm-demo__flow,
  .vmm-demo__flow,
  .vom-demo__flow,
  .yumobm-demo__steps
) small {
  color: var(--case-demo-muted) !important;
}

html body#body.has-case-phone-demo :is(
  .foodm-demo__flow,
  .fitgom-demo__steps,
  .insprm-demo__flow,
  .krasivom-demo__steps,
  .limbam-demo__flow,
  .medlinkm-demo__flow,
  .mostm-demo__flow,
  .parlam-demo__flow,
  .sdm-demo__steps,
  .soram-demo__flow,
  .viptokm-demo__flow,
  .vmm-demo__flow,
  .vom-demo__flow,
  .yumobm-demo__steps
) > i {
  color: var(--case-demo-blue) !important;
  opacity: .7;
}

html body#body.has-case-phone-demo :is(
  .foodm-demo__note,
  .medlinkm-demo__note,
  .parlam-demo__note,
  .sdm-demo__note,
  .soram-demo__note,
  .viptokm-demo__note,
  .vmm-demo__note,
  .vom-demo__note
) {
  color: var(--case-demo-muted) !important;
  border-color: var(--case-demo-line) !important;
  background: rgba(231, 226, 215, .64) !important;
}

html body#body.has-case-phone-demo .real-demo__hint {
  border-top-color: var(--case-demo-line) !important;
}

html body#body.has-case-phone-demo .real-demo__hint :is(p, strong) {
  color: var(--case-demo-muted) !important;
}

html body#body.has-case-phone-demo .real-demo__hint strong {
  color: var(--case-demo-ink) !important;
}

/* A single dark product stage gives every app contrast without recolouring it. */
html body#body.has-case-phone-demo :is(
  .real-demo__stage,
  .foodm-demo__stage,
  .fitgom-demo__stage,
  .insprm-demo__stage,
  .krasivom-demo__stage,
  .limbam-demo__stage,
  .medlinkm-demo__stage,
  .mostm-demo__stage,
  .parlam-demo__stage,
  .sdm-demo__stage,
  .soram-demo__stage,
  .viptokm-demo__stage,
  .vmm-demo__stage,
  .vom-demo__stage,
  .yumobm-demo__stage
) {
  position: relative;
  z-index: 1;
  isolation: isolate;
  box-sizing: border-box;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(22px, 2.5vw, 38px) !important;
  overflow: hidden !important;
  overflow: clip !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: clamp(22px, 2vw, 30px) !important;
  background:
    radial-gradient(circle at 48% 34%, rgba(100, 121, 234, .29), transparent 22rem),
    radial-gradient(circle at 88% 88%, rgba(100, 121, 234, .1), transparent 17rem),
    linear-gradient(145deg, var(--case-demo-stage-2), var(--case-demo-stage)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 18px 48px rgba(7, 10, 14, .16);
  transition: border-color 240ms ease, box-shadow 240ms ease;
}

html body#body.has-case-phone-demo :is(
  [data-real-demo],
  [data-brawus-food-demo],
  [data-fitgom-demo],
  [data-insprm-demo],
  [data-krasivom-demo],
  [data-limbam-demo],
  [data-medlink-demo],
  [data-mostm-demo],
  [data-parla-demo],
  [data-sdm-demo],
  [data-sora-demo],
  [data-viptok-demo],
  [data-voice-memos-demo],
  [data-voiceover-demo],
  [data-yumobm-demo]
):is(:hover, :focus-within) :is(
  .real-demo__stage,
  .foodm-demo__stage,
  .fitgom-demo__stage,
  .insprm-demo__stage,
  .krasivom-demo__stage,
  .limbam-demo__stage,
  .medlinkm-demo__stage,
  .mostm-demo__stage,
  .parlam-demo__stage,
  .sdm-demo__stage,
  .soram-demo__stage,
  .viptokm-demo__stage,
  .vmm-demo__stage,
  .vom-demo__stage,
  .yumobm-demo__stage
) {
  border-color: rgba(100, 121, 234, .48) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 22px 54px rgba(24, 34, 84, .2);
}

html body#body.has-case-phone-demo :is(
  .real-demo__status,
  .foodm-demo__status,
  .fitgom-demo__status,
  .insprm-demo__status,
  .krasivom-demo__status,
  .limbam-demo__status,
  .medlinkm-demo__status,
  .mostm-demo__status,
  .parlam-demo__status,
  .sdm-demo__status,
  .soram-demo__status,
  .viptokm-demo__status,
  .vmm-demo__status,
  .vom-demo__status,
  .yumobm-demo__status
) {
  position: relative;
  z-index: 4;
  color: rgba(247, 244, 237, .62) !important;
  text-shadow: none !important;
}

@media (min-width: 761px) and (max-width: 1100px) {
  html body#body.has-case-phone-demo :is(
    .real-demo__inner,
    .foodm-demo__shell,
    .insprm-demo__shell,
    .limbam-demo__shell,
    .medlinkm-demo__shell,
    .mostm-demo__shell,
    .parlam-demo__shell,
    .soram-demo__shell,
    .viptokm-demo__shell,
    .vmm-demo__shell,
    .vom-demo__shell,
    [data-fitgom-demo],
    [data-krasivom-demo],
    [data-sdm-demo],
    [data-yumobm-demo]
  ) {
    grid-template-columns: minmax(240px, .78fr) minmax(340px, 1.22fr) !important;
    gap: 14px !important;
  }

  html body#body.has-case-phone-demo :is(
    [data-real-demo],
    [data-brawus-food-demo],
    [data-fitgom-demo],
    [data-insprm-demo],
    [data-krasivom-demo],
    [data-limbam-demo],
    [data-medlink-demo],
    [data-mostm-demo],
    [data-parla-demo],
    [data-sdm-demo],
    [data-sora-demo],
    [data-viptok-demo],
    [data-voice-memos-demo],
    [data-voiceover-demo],
    [data-yumobm-demo]
  ) {
    padding: 16px !important;
  }

  html body#body.has-case-phone-demo :is(
    .real-demo__intro,
    .foodm-demo__intro,
    .fitgom-demo__copy,
    .insprm-demo__intro,
    .krasivom-demo__copy,
    .limbam-demo__intro,
    .medlinkm-demo__intro,
    .mostm-demo__intro,
    .parlam-demo__intro,
    .sdm-demo__copy,
    .soram-demo__intro,
    .viptokm-demo__intro,
    .vmm-demo__intro,
    .vom-demo__intro,
    .yumobm-demo__copy
  ) {
    padding: clamp(22px, 3vw, 32px) !important;
  }

  html body#body.has-case-phone-demo :is(
    .real-demo__stage,
    .foodm-demo__stage,
    .fitgom-demo__stage,
    .insprm-demo__stage,
    .krasivom-demo__stage,
    .limbam-demo__stage,
    .medlinkm-demo__stage,
    .mostm-demo__stage,
    .parlam-demo__stage,
    .sdm-demo__stage,
    .soram-demo__stage,
    .viptokm-demo__stage,
    .vmm-demo__stage,
    .vom-demo__stage,
    .yumobm-demo__stage
  ) {
    padding: 18px !important;
  }
}

@media (max-width: 760px) {
  html body#body.has-case-phone-demo :is(
    [data-real-demo],
    [data-brawus-food-demo],
    [data-fitgom-demo],
    [data-insprm-demo],
    [data-krasivom-demo],
    [data-limbam-demo],
    [data-medlink-demo],
    [data-mostm-demo],
    [data-parla-demo],
    [data-sdm-demo],
    [data-sora-demo],
    [data-viptok-demo],
    [data-voice-memos-demo],
    [data-voiceover-demo],
    [data-yumobm-demo]
  ) {
    padding: 10px !important;
    border-radius: 24px !important;
  }

  html body#body.has-case-phone-demo :is(
    .real-demo__inner,
    .foodm-demo__shell,
    .insprm-demo__shell,
    .limbam-demo__shell,
    .medlinkm-demo__shell,
    .mostm-demo__shell,
    .parlam-demo__shell,
    .soram-demo__shell,
    .viptokm-demo__shell,
    .vmm-demo__shell,
    .vom-demo__shell,
    [data-fitgom-demo],
    [data-krasivom-demo],
    [data-sdm-demo],
    [data-yumobm-demo]
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
  }

  html body#body.has-case-phone-demo :is(
    .real-demo__intro,
    .foodm-demo__intro,
    .fitgom-demo__copy,
    .insprm-demo__intro,
    .krasivom-demo__copy,
    .limbam-demo__intro,
    .medlinkm-demo__intro,
    .mostm-demo__intro,
    .parlam-demo__intro,
    .sdm-demo__copy,
    .soram-demo__intro,
    .viptokm-demo__intro,
    .vmm-demo__intro,
    .vom-demo__intro,
    .yumobm-demo__copy
  ) {
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }

  html body#body.has-case-phone-demo :is(
    .real-demo__stage,
    .foodm-demo__stage,
    .fitgom-demo__stage,
    .insprm-demo__stage,
    .krasivom-demo__stage,
    .limbam-demo__stage,
    .medlinkm-demo__stage,
    .mostm-demo__stage,
    .parlam-demo__stage,
    .sdm-demo__stage,
    .soram-demo__stage,
    .viptokm-demo__stage,
    .vmm-demo__stage,
    .vom-demo__stage,
    .yumobm-demo__stage
  ) {
    height: auto !important;
    padding: 18px 10px 14px !important;
    border-radius: 20px !important;
  }

  html body#body.has-case-phone-demo :is(
    .real-demo__status,
    .foodm-demo__status,
    .fitgom-demo__status,
    .insprm-demo__status,
    .krasivom-demo__status,
    .limbam-demo__status,
    .medlinkm-demo__status,
    .mostm-demo__status,
    .parlam-demo__status,
    .sdm-demo__status,
    .soram-demo__status,
    .viptokm-demo__status,
    .vmm-demo__status,
    .vom-demo__status,
    .yumobm-demo__status
  ) {
    font-size: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body#body.has-case-phone-demo :is(
    .real-demo__stage,
    .foodm-demo__stage,
    .fitgom-demo__stage,
    .insprm-demo__stage,
    .krasivom-demo__stage,
    .limbam-demo__stage,
    .medlinkm-demo__stage,
    .mostm-demo__stage,
    .parlam-demo__stage,
    .sdm-demo__stage,
    .soram-demo__stage,
    .viptokm-demo__stage,
    .vmm-demo__stage,
    .vom-demo__stage,
    .yumobm-demo__stage
  ) {
    transition: none !important;
  }
}