/* Modus product page: the few pieces Vero does not have. Everything else comes from /vero/vero.css,
   so both pages stay one language. Notes for editors: docs/modus-page.md */

/* The clients' app: a phone standing on the canvas, next to the text */
.m-clients { align-items: center; }
.m-rows { margin-block: 1.4rem 1.6rem; }
.m-phone { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin: 0; }
.m-phone-body {
  width: min(300px, 78vw);
  padding: 10px;
  border-radius: 38px;
  background: var(--ink);
  box-shadow: 0 9px 0 #0E1F08, 16px 30px 40px rgba(46, 44, 24, 0.38), inset 1px 1px 0 rgba(255, 255, 255, 0.18);
  rotate: -3deg;
  transition: rotate 0.6s var(--ease);
}
.m-phone-body img { display: block; width: 100%; height: auto; border-radius: 29px; }
.m-phone .v-caption { text-align: center; }
@media (hover: hover) { .m-phone:hover .m-phone-body { rotate: 0deg; } }
[data-motion="off"] .m-phone-body { transition: none; }

/* Yours: what belongs to the office, in words rather than screenshots */
.m-own .v-tile { gap: 0.45rem; justify-content: flex-start; padding: 18px; }
.m-own .v-tile strong { font-size: 1.2rem; font-weight: 800; color: var(--forest); line-height: 1.25; }
.m-own .v-tile span { font-size: 0.98rem; line-height: 1.5; color: #333F2C; }
.m-own .v-tile { height: auto; min-height: 132px; }

/* The year: three pieces in the same tray as the month, each opening on a window onto its screen
   in the demo instead of a foam object. */
.m-year .v-fig { margin-top: 0; }
.m-year .v-piece { gap: 1.1rem; }

/* The office: the clients screen from the demo, in the same dark frame as the tour */
.m-office { align-items: start; }
.m-shot { display: flex; flex-direction: column; gap: 0.9rem; margin: 0; }
.m-shot img { display: block; width: 100%; height: auto; border-radius: clamp(6px, 0.8vw, 10px); }
@media (min-width: 900px) { .m-shot { margin-top: clamp(1rem, 4vw, 3.5rem); } }

/* What an office asks before it starts: the questions beside the heading */
.m-faq { align-items: start; }