/* Mulu page on top of /appshift.css: illustration-led features and a check-in chat mockup
   real Mulu 2.0 screens in phone frames, and the Screen Time shield rebuilt in HTML. */

.button .i { font-size: 20px; }
.float-tag .i.heart { color: #e0257a; }

/* The idea: the doomscroll comic next to the copy */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.story .comic { width: 100%; height: auto; }
.story h2 { font-size: clamp(32px, 4.4vw, 48px); margin: 12px 0 16px; }
.story p { color: var(--muted); font-size: 18px; }
.story p + p { margin-top: 12px; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; gap: 28px; } }

.steps.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .steps.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .steps.four { grid-template-columns: 1fr; } }
.tone-sky .step-ic { color: var(--sky-fg); }
.tone-sky .num { color: var(--sky-fg); }

/* Features: Mulu's illustrations instead of phones */
.feature .art { display: grid; place-items: center; }
.feature .art img { width: 100%; max-width: 460px; height: auto; }

.problem.four { grid-template-columns: repeat(4, 1fr); }
.problem.four .stat strong { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em; }
.problem.four .stat small a { color: inherit; }
@media (max-width: 1000px) { .problem.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .problem.four { grid-template-columns: 1fr; } }

.promise-link { margin-top: 18px; }
.promise-link a { color: #bb9fff; font-weight: 600; }
.final-mascot { display: block; width: 150px; height: auto; margin: 0 auto 8px; }

/* ─── Real screens ────────────────────────────────────────────────────────────────
   Screenshots are 1206 × 2622 (iPhone, 9:41 status bar). The screen takes their exact
   proportions so nothing is cropped or letterboxed. */
.screen.real { aspect-ratio: 1206 / 2622; background: #f3f1f8; }
.real-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f-shot { padding: 0; background: #f3f1f8; }
.f-shield { padding: 0; background: #050326; }

/* Screen Time shield with Mulu's configuration (shield-config), laid out at 390 pt */
.shield-scr {
  position: absolute; top: 0; left: 0; width: 390px; height: 848px; zoom: var(--k, 0.718);
  display: flex; flex-direction: column; color: #fff; text-align: center;
  font-family: -apple-system, 'Google Sans', var(--font); -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(260px 220px at 85% 8%, rgba(122, 92, 255, 0.45), transparent 70%),
    radial-gradient(240px 220px at 10% 92%, rgba(91, 75, 255, 0.35), transparent 70%),
    #050326;
}
.shield-scr::after { content: ''; position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #fff; }
.shield-scr .sb { flex: none; height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0 46px; font-size: 17px; font-weight: 600; }
.shield-scr .sys { width: 78px; height: 13px; }
.sh-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 40px 40px; }
.sh-lock { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 26px; font-size: 46px; color: #b7a8ff; background: rgba(255, 255, 255, 0.08); }
.sh-body h4 { margin: 0; font-size: 28px; line-height: 33px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.sh-body p { margin: 10px 0 0; font-size: 17px; line-height: 23px; color: rgba(255, 255, 255, 0.85); }
.sh-foot { flex: none; display: grid; gap: 14px; padding: 0 24px 54px; }
.sh-btn { height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 17px; font-weight: 600; background: #8c73ff; }
.sh-ghost { font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }

/* Gallery: phones in a swipeable row; each one grows as it reaches the middle */
.gallery {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 18px max(20px, calc(50% - 150px)) 30px; margin: 0 calc(50% - 50vw);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery figure { flex: none; margin: 0; display: grid; justify-items: center; gap: 14px; scroll-snap-align: center; }
.gallery .phone { width: 240px; }
.gallery figcaption { font-family: var(--hand); font-size: 24px; color: var(--accent); transform: rotate(-2deg); }
@supports (animation-timeline: view()) {
  .gallery figure { animation: gallery-edge linear both; animation-timeline: view(inline); }
  @keyframes gallery-edge {
    0% { transform: scale(0.84); opacity: 0.55; }
    35%, 65% { transform: none; opacity: 1; }
    100% { transform: scale(0.84); opacity: 0.55; }
  }
}
@media (max-width: 520px) { .gallery .phone { width: 210px; } }