.moon-preview {
  --moon-violet: #7450c9;
  --moon-deep: #050607;
  --moon-panel: #0b0c0d;
  background: var(--moon-deep);
  overflow-x: clip;
}

.moon-preview .case-hero.moonbaby-theme {
  min-height: min(900px, 96vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 0;
}

@media (min-width: 1081px) {
  .moon-preview .case-hero.moonbaby-theme {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    padding-inline: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
    background-image:
      linear-gradient(90deg, rgba(5, 3, 14, .66) 0%, rgba(5, 3, 14, .3) 45%, rgba(5, 3, 14, 0) 76%),
      url("../assets/img/moonbaby/hero-cosmos-background.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .moon-preview .case-hero .hero-bg-cosmos { display: none; }
  .moon-preview .case-hero .hero-split {
    grid-template-columns: minmax(0, .47fr) minmax(0, .53fr) !important;
  }
  .moon-preview .case-hero .hero-visual-side { visibility: visible; }
}

.moon-preview .case-hero .hero-split { align-items: center; }
.moon-preview .case-hero h1 { font-size: clamp(3.4rem, 5.5vw, 5.6rem); letter-spacing: 0; }
.moon-preview .mb-logo-title {
  width: min(100%, 500px);
  margin: 0 0 .35rem;
  line-height: 0;
}
.moon-preview .mb-logo-title img { width: 100%; height: auto; display: block; }
.moon-preview .hero-title-2tone { position: relative; }
.moon-preview .star-char {
  position: absolute;
  top: .08em;
  right: clamp(-2.8rem, -3.5vw, -1.6rem);
  margin: 0;
  font-size: .62em;
  pointer-events: none;
}
.moon-preview .hero-subtitle {
  width: min(100%, 28ch);
  max-width: 28ch;
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  white-space: normal;
  text-wrap: balance;
  line-height: 1.14;
}
.moon-preview .case-hero .case-back-link { margin-bottom: clamp(3.5rem, 7vw, 7rem); }
.moon-preview .hero-phones-3d { height: 560px; transform: scale(1.08); transform-origin: center; }
.moon-preview .phone-3d { width: 225px; height: 460px; }
.moon-preview .phone-3d.p-center { width: 245px; height: 500px; }
.moon-preview .phone-3d.p-left { transform: translateX(-145px) translateZ(-60px) rotateY(24deg) rotateX(6deg) scale(.92); }
.moon-preview .phone-3d.p-right { transform: translateX(145px) translateZ(-60px) rotateY(-24deg) rotateX(6deg) scale(.92); }
.moon-preview .phone-asset {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.moon-preview .phone-asset img { width: 100%; height: 100%; object-fit: contain; }
.moon-preview .phone-asset.p-center { box-shadow: none; }
.moon-preview .case-brief { position: relative; z-index: 2; margin-top: -1px; }
.moon-preview .case-facts { background: rgba(5, 6, 7, .88); backdrop-filter: blur(14px); }
.moon-preview .case-fact { min-height: 145px; padding: 1.6rem; }
.moon-preview .case-fact .label { color: var(--accent); font-weight: 700; }
.moon-preview .case-fact .v { color: var(--bone); }
.moon-preview main .label { color: var(--accent); font-weight: 700; }

/* Exact Botbox section background system. */
.moon-preview :is(.mb-challenge, .mb-objectives, .branding-stellar-bg, .mb-system, .mb-journey, .mb-ux-journey, .mb-result) {
  position: relative;
  isolation: isolate;
  background: var(--moon-deep);
}
.moon-preview :is(.mb-objectives, .branding-stellar-bg, .mb-system, .mb-journey, .mb-ux-journey, .mb-result)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 1;
  z-index: 1;
}
.moon-preview .mb-objectives::after {
  content: "";
  position: absolute;
  top: -50px;
  right: min(0px, calc((var(--maxw) - 100vw) / 2));
  width: 160px;
  height: 120px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='120'><circle cx='14' cy='104' r='5.5' fill='%23f3f2ed'/><circle cx='46' cy='82' r='5.5' fill='%23f3f2ed'/><circle cx='78' cy='60' r='5.5' fill='%23c8d98a'/><circle cx='110' cy='38' r='5.5' fill='%23b8d62b'/><circle cx='142' cy='16' r='5.5' fill='%23b8d62b'/></svg>");
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.moon-preview .mb-objectives > .wrap { position: relative; z-index: 1; }

.moon-preview .case-body { padding-top: clamp(6rem, 11vw, 11rem); padding-bottom: clamp(6rem, 11vw, 11rem); }
.moon-preview .case-body .label,
.moon-preview .mb-section-head .label { color: var(--accent); font-weight: 700; }
.moon-preview :is(
  .mb-challenge > .label,
  .mb-brand-concept > .label,
  .mb-objectives .step-center-head > .label,
  .mb-section-label > .label,
  .mb-ux-journey > .label,
  .mb-launch-copy > .label,
  .mb-result .case-body > .label
) {
  display: block;
  width: 100%;
  position: static;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.2;
}
.moon-preview .case-body .case-text h2,
.moon-preview .mb-section-head h2 {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 5.6vw, 6rem);
  line-height: .98;
  letter-spacing: 0;
}

.moon-preview .mb-challenge {
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  grid-template-areas:
    "label label"
    "copy visual";
  align-items: center;
  column-gap: clamp(3rem, 7vw, 8rem);
  row-gap: clamp(2rem, 5vw, 4rem);
}
.moon-preview .mb-challenge > .label {
  grid-area: label;
  position: static;
  display: block;
  font-size: 1.05rem;
}
.moon-preview .mb-challenge .case-text { grid-area: copy; }
.moon-preview .mb-challenge .case-text h2 {
  font-size: clamp(2.1rem, 3.8vw, 4rem);
  line-height: 1.04;
  max-width: 12ch;
}
.moon-preview .mb-challenge .case-text p { max-width: 52ch; }
.moon-preview .mb-challenge .case-text p em {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
  border-bottom: 0;
}
.mb-challenge-visual { grid-area: visual; margin: 0; overflow: hidden; }
.mb-challenge-visual img { width: 100%; display: block; object-fit: cover; }

.mb-band {
  padding-block: clamp(6rem, 11vw, 11rem);
  border-top: 0;
  border-bottom: 0;
}
.mb-objectives { background: var(--moon-deep); padding-block: clamp(5rem, 8vw, 8rem); }
.mb-objectives .step-center-head { max-width: 980px; }
.mb-objectives .step-title-center {
  max-width: 900px;
  margin-inline: auto;
  font-size: clamp(2.8rem, 5vw, 5.25rem);
  line-height: .98;
}
.mb-objectives .step-desc-center { margin-top: 1.5rem; }
.mb-section-head { max-width: 1020px; }
.mb-section-head .label { display: block; margin-bottom: 1.5rem; }
.mb-section-head p { color: var(--bone-dim); max-width: 54ch; margin-top: 1.8rem; }

.mb-goal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 4.5rem);
  margin-top: clamp(3rem, 5vw, 5rem);
}
.mb-goal {
  position: relative;
  padding-top: .5rem;
  text-align: center;
}
.mb-goal { display: grid; grid-template-rows: 78px auto 1fr; align-content: start; }
.mb-goal-icon {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  margin-inline: auto;
}
.mb-goal-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(83%) sepia(60%) saturate(590%) hue-rotate(24deg) brightness(94%) contrast(91%) drop-shadow(0 0 10px rgba(184, 214, 43, .12));
}
.mb-goal-grid h3 { margin-top: 1.15rem; font-family: var(--ff-display); font-size: 1.6rem; }
.mb-goal-grid p { max-width: 28ch; color: var(--bone-dim); font-size: .92rem; margin: .8rem auto 0; }

.moon-preview .branding-stellar-bg { padding-bottom: 4rem; }
.moon-preview .mb-brand-concept {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "label label"
    "visual copy";
  column-gap: clamp(3rem, 6vw, 7rem);
  row-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.moon-preview .mb-brand-concept::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(28rem, 52vw, 52rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(184, 214, 43, .2) 0%, rgba(184, 214, 43, .08) 34%, transparent 70%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}
.moon-preview .mb-brand-concept > :is(.label, .case-text, .mb-brand-concept-visual) { position: relative; z-index: 1; }
.moon-preview .mb-brand-concept > .label { grid-area: label; position: static; }
.moon-preview .mb-brand-concept > .case-text { grid-area: copy; text-align: left; }
.mb-brand-concept-visual { width: min(100%, 680px); margin: 0 auto; overflow: hidden; }
.moon-preview .mb-brand-concept > .mb-brand-concept-visual { grid-area: visual; }
.mb-brand-concept-visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.moon-preview .case-gallery { grid-template-columns: 1.3fr .7fr; align-items: stretch; }
.moon-preview .case-gallery .g-full { aspect-ratio: auto; }
.moon-preview .case-gallery .g-duo { grid-template-columns: 1fr; }
.moon-preview .case-gallery img { border-radius: 4px !important; }

.mb-system { background: var(--moon-deep); color: var(--bone); }
.mb-section-label { margin-bottom: clamp(3rem, 5vw, 5rem); }
.mb-system .label { color: var(--accent); }
.mb-system .step-title { margin-top: 0; }
.mb-system-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.mb-system-layout .mb-section-head { align-self: start; }
.mb-system-layout .mb-section-head p { color: var(--bone-dim); }
.mb-colors { display: grid; grid-template-columns: repeat(4, 1fr); align-self: end; }
.mb-colors div { aspect-ratio: 1 / 1.4; padding: 1rem; display: flex; flex-direction: column; justify-content: flex-end; background: var(--swatch); color: white; }
.mb-colors span { font-family: var(--ff-mono); font-size: .72rem; }
.mb-colors small { opacity: .68; }
.mb-system-media { width: min(100%, 620px); margin: 0 auto; overflow: hidden; background: transparent; }
.mb-system-media img { width: 100%; height: auto; display: block; object-fit: contain; }

.mb-applications { padding-top: clamp(5rem, 9vw, 9rem); padding-bottom: clamp(6rem, 10vw, 10rem); }
.mb-applications > .label {
  display: block;
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}
.mb-applications-carousel {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
}
.mb-applications-carousel::before,
.mb-applications-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(3rem, 8vw, 7rem);
  pointer-events: none;
}
.mb-applications-carousel::before { left: 0; background: linear-gradient(90deg, var(--moon-deep), transparent); }
.mb-applications-carousel::after { right: 0; background: linear-gradient(-90deg, var(--moon-deep), transparent); }
.mb-applications-grid {
  display: flex;
  gap: clamp(.65rem, 1.2vw, 1rem);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  scroll-behavior: auto;
}
.mb-applications-grid::-webkit-scrollbar { display: none; }
.mb-carousel-edge {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 38px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.2);
  font-size: 2rem;
  line-height: 1;
  transform: translateY(-50%);
  transition: color .2s ease;
  cursor: pointer;
}
.mb-carousel-edge-prev { left: .15rem; }
.mb-carousel-edge-next { right: .15rem; }
.mb-carousel-edge:hover { color: rgba(184,214,43,.65); }
.mb-carousel-edge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mb-application-item {
  flex: 0 0 clamp(150px, 17vw, 215px);
  scroll-snap-align: start;
}
.mb-application-item {
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #0b0911;
  cursor: zoom-in;
}
.mb-application-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease, opacity .35s ease;
}
.mb-application-item:hover img { transform: scale(1.025); opacity: .9; }
.mb-application-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.mb-launch { padding-top: clamp(6rem, 11vw, 11rem); }
.mb-launch > .label {
  display: block;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
}
.mb-launch-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, .7fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
  max-width: 1080px;
  margin-inline: auto;
}
.mb-launch-layout .case-text { width: 100%; max-width: 610px; }
.mb-launch-media { width: min(100%, 410px); margin: 0 auto; }
.mb-launch-media img { display: block; width: 100%; height: auto; object-fit: contain; }
.mb-playstore-gallery {
  padding-top: clamp(4rem, 7vw, 7rem);
  padding-bottom: clamp(2rem, 3vw, 3rem);
}
.mb-playstore-item { flex-basis: clamp(145px, 15vw, 195px); aspect-ratio: 9 / 16; }
.mb-playstore-item-wide { flex-basis: clamp(260px, 31vw, 400px); aspect-ratio: 2.05 / 1; }
.mb-playstore-item img { object-fit: cover; }

@media (max-width: 760px) {
  .mb-launch-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .mb-launch-layout .case-text { max-width: none; }
  .mb-launch-media { width: min(82%, 390px); }
  .mb-playstore-gallery { padding-top: 3rem; }
}

body.lightbox-open { overflow: hidden; }
.mb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.5rem, 2vw, 2rem);
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(0, 0, 0, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.mb-lightbox.is-open { opacity: 1; visibility: visible; }
.mb-lightbox-stage {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mb-lightbox-stage img { max-width: 100%; max-height: calc(100vh - 7rem); display: block; margin-inline: auto; object-fit: contain; }
.mb-lightbox-stage figcaption { margin-top: .65rem; color: var(--bone-dim); font-family: var(--ff-mono); font-size: .78rem; }
.mb-lightbox-close,
.mb-lightbox-nav {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(10,10,10,.72);
  color: var(--bone);
  cursor: pointer;
}
.mb-lightbox-close { position: absolute; top: 1rem; right: 1rem; font-size: 2rem; line-height: 1; }
.mb-lightbox-nav { font-size: 2.2rem; line-height: 1; }
.mb-lightbox-close:hover,
.mb-lightbox-nav:hover { color: var(--accent); border-color: var(--accent); }

.mb-journey { padding-top: clamp(6rem, 11vw, 11rem); padding-bottom: clamp(6rem, 11vw, 11rem); }
.mb-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: clamp(3rem, 7vw, 7rem); }
.mb-flow article { min-height: 200px; padding: 1.5rem; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; }
.mb-flow article span { margin-bottom: auto; color: var(--accent); font-family: var(--ff-mono); }
.mb-flow article strong { font-family: var(--ff-display); font-size: 1.25rem; }
.mb-flow article small { color: var(--bone-dim); }
.mb-flow i { color: var(--accent); font-style: normal; }
.moon-preview .mb-ux-journey {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "label label"
    "media copy"
    "flow flow";
  align-items: center;
}
.moon-preview .mb-ux-journey > .label { grid-area: label; }
.moon-preview .mb-ux-journey > .case-text { grid-area: copy; }
.moon-preview .mb-ux-journey > .mb-feature-explorer {
  grid-area: flow;
  margin-top: clamp(2.5rem, 5vw, 5rem);
}
.mb-ux-media {
  grid-area: media;
  width: min(100%, 620px);
  margin: 0 auto;
  overflow: hidden;
  background: #050505;
}
.mb-ux-media video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.mb-feature-explorer {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, 380px) minmax(180px, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  width: min(100%, 1180px);
  margin-inline: auto;
}
.mb-feature-side { display: grid; gap: clamp(3.5rem, 8vw, 7rem); }
.mb-feature-point {
  position: relative;
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .4rem 0;
  border: 0;
  background: transparent;
  color: var(--bone-dim);
  cursor: pointer;
}
.mb-feature-side-left .mb-feature-point { justify-content: flex-end; text-align: right; }
.mb-feature-side-right .mb-feature-point { justify-content: flex-start; text-align: left; }
.mb-feature-copy { display: flex; flex-direction: column; gap: .18rem; }
.mb-feature-copy strong { color: inherit; font-family: var(--ff-display); font-size: clamp(1.1rem, 1.7vw, 1.45rem); }
.mb-feature-copy small { color: inherit; font-size: .82rem; }
.mb-feature-point i {
  position: relative;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(184,214,43,.5);
  border-radius: 50%;
  background: #080909;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mb-feature-point i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(2rem, 5vw, 5rem);
  height: 1px;
  background: linear-gradient(90deg, rgba(184,214,43,.55), transparent);
}
.mb-feature-side-left .mb-feature-point i::after { left: 100%; }
.mb-feature-side-right .mb-feature-point i::after { right: 100%; transform: rotate(180deg); }
.mb-feature-point:is(:hover, :focus-visible, .is-active) { color: var(--accent); }
.mb-feature-point:is(:hover, :focus-visible, .is-active) i {
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(184,214,43,.08), 0 0 20px rgba(184,214,43,.5);
  transform: scale(1.15);
}
.mb-feature-point:focus-visible { outline: none; }
.mb-feature-phone {
  width: 100%;
  aspect-ratio: 968 / 1878;
  margin: 0;
  display: grid;
  place-items: center;
}
.mb-feature-phone img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: 1;
  transition: opacity .16s ease;
}
.mb-feature-phone img.is-changing { opacity: 0; }
.moon-preview .mb-launch-copy > .label,
.moon-preview .mb-result .case-body > .label { grid-column: 1 / -1; }
.moon-preview .mb-launch-copy > .case-text,
.moon-preview .mb-result .case-body > .case-text { grid-column: 2; }

.moon-preview .ui-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.moon-preview .ui-card { border: 0; border-radius: 0; box-shadow: none; background: var(--moon-panel); }
.moon-preview .ui-card:hover { transform: none; }
.moon-preview .ui-img-wrap { aspect-ratio: 9 / 19.3; padding: 1rem 1rem 0; }
.moon-preview .ui-img-wrap img { object-fit: contain; object-position: bottom; }

.moon-preview .mb-launch-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .7rem;
  overflow: visible;
  padding-bottom: 0;
}
.moon-preview .mb-launch-grid .ps-card { min-width: 0; border-radius: 3px; border: 0; box-shadow: none; }
.moon-preview .mb-launch-grid .ps-card:hover { transform: translateY(-6px); }
.moon-preview .mb-launch-grid img { height: 100%; object-fit: cover; }

.mb-result {
  min-height: clamp(590px, 44vw, 720px);
  margin-top: clamp(1rem, 2vw, 2rem);
  overflow: hidden;
  color: var(--bone);
  background-color: var(--moon-deep);
}
.mb-result-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}
.mb-result-phones {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: min(92vw, 1400px);
  height: auto;
  display: block;
  transform: translateX(-50%);
  pointer-events: none;
}
.moon-preview .mb-result::before { display: none; }
.mb-result::after {
  display: none;
}
.mb-result .case-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(2.75rem, 5vw, 5rem);
  padding-bottom: clamp(17rem, 23vw, 23rem);
  text-align: center;
}
.mb-result .label { color: var(--accent) !important; }
.moon-preview .mb-result .case-body > .case-text {
  grid-column: auto;
  width: min(100%, 850px);
  margin: clamp(1.2rem, 2vw, 2rem) auto 0;
}
.mb-result .case-text h2 { margin-inline: auto; color: var(--bone) !important; }
.mb-result .case-text p {
  max-width: 940px;
  margin-inline: auto;
  color: rgba(255,255,255,.88);
}

@media (max-width: 760px) {
  .mb-result {
    min-height: 650px;
  }
  .mb-result-bg { object-fit: fill; }
  .mb-result-phones { width: min(175vw, 980px); }
  .mb-result .case-body { padding: 2.5rem 1.25rem 19rem; }
  .mb-result .case-text p { font-size: .95rem; }
}

/* Match Botbox text hierarchy exactly. */
.moon-preview .step-title,
.moon-preview .case-body .case-text .step-title,
.moon-preview .mb-section-head .step-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--bone);
  margin-top: .45rem;
}
.moon-preview .step-title .accent-word { color: var(--accent); }
.moon-preview .step-desc,
.moon-preview .case-body .case-text .step-desc {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--bone-dim);
  max-width: 52ch;
  margin-top: 1.3rem;
  margin-bottom: 0;
}
.moon-preview .step-center-head {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: 3.5rem;
}
.moon-preview .step-title-center,
.moon-preview .mb-section-head .step-title-center {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--bone);
  margin-top: .5rem;
}
.moon-preview .step-title-center .accent-word { color: var(--accent); }
.moon-preview .step-desc-center {
  font-size: 1.1rem;
  color: var(--bone-dim);
  line-height: 1.6;
  margin-top: 1.2rem;
}
.moon-preview .mb-challenge .case-text .step-title { max-width: 15ch; }
.moon-preview .mb-goal-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 4.5rem);
  margin-top: 0;
  border: 0;
  background: transparent;
}
.moon-preview .mb-objectives .step-center-head {
  max-width: 980px;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.moon-preview .mb-objectives .step-title-center {
  max-width: 900px;
  margin-inline: auto;
  font-size: clamp(2.8rem, 5vw, 5.25rem);
  line-height: .98;
}

@media (max-width: 1080px) {
  .moon-preview .hero-phones-3d { transform: scale(1); }
  .moon-preview .mb-challenge {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "copy" "visual";
  }
  .moon-preview .mb-challenge .case-text h2 { max-width: 16ch; }
  .moon-preview .mb-launch-copy > .case-text,
  .moon-preview .mb-result .case-body > .case-text { grid-column: 1; }
  .moon-preview .mb-ux-journey {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "media" "copy" "flow";
  }
  .moon-preview .mb-brand-concept { column-gap: clamp(2rem, 4vw, 4rem); }
  .moon-preview .mb-brand-concept-visual { width: min(100%, 640px); }
  .moon-preview .mb-goal-grid { grid-template-columns: repeat(2, 1fr); }
  .mb-system-layout { grid-template-columns: 1fr; }
  .mb-flow { grid-template-columns: repeat(2, 1fr); }
  .mb-flow i { display: none; }
  .moon-preview .mb-launch-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
  .moon-preview .case-hero.moonbaby-theme { min-height: auto; }
  .moon-preview .case-hero h1 { font-size: clamp(3.25rem, 15vw, 5.3rem); white-space: normal; }
  .moon-preview .mb-logo-title { width: min(100%, 420px); }
  .moon-preview .star-char { right: .05em; top: -.15em; }
  .moon-preview .case-fact { min-height: 0; padding-inline: 0; }
  .moon-preview .case-gallery { grid-template-columns: 1fr; }
  .moon-preview .mb-brand-concept {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "visual" "copy";
  }
  .moon-preview .case-gallery .g-duo { grid-template-columns: 1fr 1fr; }
  .moon-preview .ui-grid { grid-template-columns: repeat(2, 1fr); }
  .mb-feature-explorer {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "phone phone" "left right";
    gap: 2.5rem 1.5rem;
  }
  .mb-feature-phone { grid-area: phone; width: min(72vw, 320px); justify-self: center; }
  .mb-feature-side-left { grid-area: left; }
  .mb-feature-side-right { grid-area: right; }
  .mb-feature-side { gap: 1.2rem; }
  .mb-feature-point i::after { display: none; }
  .mb-application-item { flex-basis: min(62vw, 190px); }
  .mb-lightbox { grid-template-columns: 1fr; padding: 3.5rem 1rem 1rem; }
  .mb-lightbox-stage { grid-column: 1; }
  .mb-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); }
  .mb-lightbox-prev { left: .6rem; }
  .mb-lightbox-next { right: .6rem; }
}

@media (max-width: 560px) {
  .moon-preview .mb-goal-grid, .mb-flow { grid-template-columns: 1fr; }
  .moon-preview .mb-goal { min-height: 0; padding: 0; border: 0; }
  .mb-colors { grid-template-columns: repeat(2, 1fr); }
  .moon-preview .case-gallery .g-duo, .moon-preview .ui-grid { grid-template-columns: 1fr; }
  .moon-preview .mb-launch-grid { grid-template-columns: repeat(2, 1fr); }
  .mb-feature-explorer { grid-template-columns: 1fr; grid-template-areas: "phone" "left" "right"; }
  .mb-feature-side-left .mb-feature-point,
  .mb-feature-side-right .mb-feature-point { justify-content: center; text-align: center; }
}