/* =========================================================
   Homepage only — compact hero (boss's request, 2026-10-23):
   "too big" → shorter hero so visitors see the programs right away.
   Loaded after home.css in index.html. Delete the <link> to go back to the tall hero.
   ========================================================= */

/* Desktop / laptop */
.mu-hero__content { padding-top: 44px; padding-bottom: 116px; }   /* bottom = room for the stats strip (it overlaps 88px) */
.mu-hero__text { max-width: 640px; gap: 14px; }
.mu-hero h1 { font-size: clamp(30px, 2.9vw, 42px); line-height: 1.15; }
.mu-hero__sub { font-size: 17px; }
.mu-hero .mu-checks { display: none; }           /* same message as the "Real teacher + Structured course + AI practice" line below */
.mu-hero__ctas { margin-top: 4px; }
.mu-hero__ctas .mu-btn--lg { min-height: 52px; }
.mu-formula { margin-top: 4px; padding: 10px 14px; font-size: 13px; }
.mu-hero__slogan { top: 22px; font-size: 21px; }

/* Keep the headline on 2 lines (it may run ~16px past the text column; the sample cards start further right) */
@media (min-width: 1100px) { .mu-hero h1 { white-space: nowrap; } }

/* Speech bubbles on the photo -------------------------------------------------
   .mu-hero__scene is a layer with the photo's own shape (1680 x 944) placed exactly like the
   photo (object-fit: cover, object-position 62% 30%), so % positions below = spots in the picture:
   teacher's mouth ≈ 56% / 40%, boy's mouth ≈ 75% / 53%. */
.mu-hero__scene { position: absolute; left: 62%; top: 30%; transform: translate(-62%, -30%); min-width: 100%; min-height: 100%; aspect-ratio: 1680 / 944; pointer-events: none; z-index: 2; }
.mu-hero__scene .mu-float { position: absolute; left: auto; right: auto; top: auto; bottom: auto; width: 196px; border-radius: 20px; box-shadow: 0 18px 40px rgba(9, 18, 44, .38); }
.mu-hero__scene .mu-float::after { content: ""; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 3px; transform: rotate(45deg); }

/* Teacher → "Today's class summary": left of her face, tail pointing right to her mouth */
.mu-hero__scene .mu-float--summary { right: 52%; top: 52%; transform: translateY(-50%); width: 204px; gap: 7px; padding: 13px 15px; }
.mu-hero__scene .mu-float--summary .mu-float__head b { font-size: 13px; white-space: nowrap; }
.mu-hero__scene .mu-float--summary::after { right: -7px; top: 26%; }

/* Student → "Speaking practice": below-right of the boy, tail pointing up to his mouth */
.mu-hero__scene .mu-float--score { left: 78%; top: 58%; width: 196px; padding: 11px 13px; gap: 10px; }
.mu-hero__scene .mu-float--score b { white-space: nowrap; }
.mu-hero__scene .mu-float--score::after { left: 20px; top: -7px; }
.mu-hero__scene .mu-float--score svg { width: 50px; height: 50px; }

@media (max-width: 1399px) {
  .mu-hero__scene .mu-float--score { display: none; }   /* not enough room beside the boy */
  .mu-hero__text { max-width: 560px; }                 /* keep the subtitle clear of the teacher bubble */
}

/* Less space above "Our Programs" so its cards show on the first screen */
#courses { padding-top: 56px; }
#courses .mu-head { margin-bottom: 28px; }

/* Phones / small tablets (photo sits above the text here) */
@media (max-width: 900px) {
  .mu-hero__photo { height: 220px; }
  .mu-hero__content { padding-top: 4px; padding-bottom: 116px; }
  .mu-hero__slogan { font-size: 15px; top: 12px; }
  #courses { padding-top: 48px; }
}