/* ── กล่อง Microsoft 365 Family 3D (หน้า /microsoft-365-family/) ── */
.m365-box-stage { --w: min(300px, 62vw); --h: calc(var(--w) * 826 / 628); --d: calc(var(--w) * 0.175); text-align: center; padding: 8px 0 4px; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab; }
.m365-box-stage.dragging { cursor: grabbing; }
.m365-box-scene { position: relative; width: var(--w); height: var(--h); margin: 24px auto 56px; perspective: 1400px; }
.m365-box { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg); will-change: transform; }
.m365-face { position: absolute; backface-visibility: hidden; overflow: hidden; }
.m365-face img { display: block; width: 100%; height: 100%; pointer-events: none; }
.f-front, .f-back { width: var(--w); height: var(--h); left: 0; top: 0; }
.f-front { transform: translateZ(calc(var(--d) / 2)); }
.f-back  { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.f-spine { width: var(--d); height: var(--h); top: 0; left: calc((var(--w) - var(--d)) / 2); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.f-right { width: var(--d); height: var(--h); top: 0; left: calc((var(--w) - var(--d)) / 2); transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); background: linear-gradient(90deg, #3d3059, #4a3b6a); }
.f-top    { width: var(--w); height: var(--d); left: 0; top: calc((var(--h) - var(--d)) / 2); transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); background: #4a3b6a; }
.f-bottom { width: var(--w); height: var(--d); left: 0; top: calc((var(--h) - var(--d)) / 2); transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: #3d3059; }
.m365-box-shadow { position: absolute; left: 50%; bottom: -34px; width: calc(var(--w) * 1.05); height: 26px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(40,25,70,.38) 0%, rgba(40,25,70,0) 70%); filter: blur(4px); }
.m365-box-hint { margin: 0; font-size: .82rem; color: var(--text2, #64748b); }

/* หน้าแรก (ใน Hero เหนือหัวข้อ): ย่อกล่องให้พอดีจอ */
.m365-box-home .m365-box-stage { --w: min(200px, 46vw, 24vh); }
.m365-box-home .m365-box-scene { margin: 0 auto 40px; }
.m365-box-home { margin-bottom: 18px; position: relative; z-index: 2; }