/* Murder Mystery for Two page (2026-11-04). Loaded on that page only. Midnight navy, marigold, brass and cream from the game's own art. */
.m2 { --m2-navy: #0f1b33; --m2-navy-2: #09111f; --m2-marigold: #f2a93b; --m2-cream: #f3ead6; overflow-x: clip; }
.m2 h1, .m2 h2, .m2 h3 { overflow-wrap: break-word; }
.m2-hero { background-image: var(--grain), radial-gradient(90% 70% at 85% 0%, #1d3358 0%, var(--m2-navy) 50%, var(--m2-navy-2) 100%); border-bottom: 1px solid #2a3f66; }
.m2-hero-in { display: grid; gap: 1.1rem; padding-block: 0.9rem 1.5rem; }
.m2-hero-copy { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.m2-badge { margin: 0; align-self: flex-start; font-family: var(--display-plain); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem; line-height: 1;
  color: #2a1a05; background: var(--m2-marigold); padding: 0.35rem 0.6rem; border-radius: 0.3rem; }
.m2-hero h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; color: var(--m2-cream); line-height: 0.95; font-size: clamp(2rem, 9vw, 3.7rem); max-width: 14ch; }
.m2-sub { margin: 0; font-size: 1.02rem; line-height: 1.4; color: #e6dcc4; max-width: 34rem; }
.m2-status { margin: 0; font-size: 0.9rem; line-height: 1.35; color: #d9cfb6; }
.m2-hero-art { margin: 0; border-radius: 0.6rem; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.m2-hero-art img { display: block; width: 100%; height: auto; }
.m2-capture .m2-form { border-top: 0; padding: 0.85rem; margin: 0.15rem 0 0; gap: 0.5rem; background: rgba(5, 12, 26, 0.6); border: 1px solid #2f4a78; border-radius: 0.6rem; max-width: 30rem; }
.m2-capture .m2-form h2 { font-size: 1.05rem; }
.m2-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.m2-cta .btn, .m2-form .btn { min-height: 44px; }
.m2-body { display: flex; flex-direction: column; gap: 1.6rem; padding-block: 0.5rem 2.5rem; }
.m2-sec { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.m2-lede { margin: 0; max-width: 44rem; }
.m2-steps { list-style: none; padding: 0; margin: 0.3rem 0 0; display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
.m2-steps li { position: relative; padding: 0.9rem 0.9rem 0.9rem 3.1rem; border: 1px solid #2a3f66; border-radius: 0.5rem; background: rgba(15, 27, 51, 0.6); }
.m2-steps h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.m2-steps p { margin: 0; }
.m2-n { position: absolute; left: 0.8rem; top: 0.85rem; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; background: var(--m2-marigold); color: #2a1a05; font-weight: 800; }
.m2-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 0; }
.m2-shots figure { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.m2-phone { aspect-ratio: 9 / 16; border: 3px solid #2a3f66; border-radius: 1.1rem; overflow: hidden; background: #000; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }
.m2-phone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m2-shots figcaption { font-size: 0.85rem; line-height: 1.3; text-align: center; }
.m2-two { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
.m2-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.m2-ticks li { padding-left: 1rem; border-left: 3px solid var(--m2-marigold); }
.m2-cast { list-style: none; padding: 0; margin: 0.3rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.m2-cast li { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; font-size: 0.9rem; line-height: 1.3; }
.m2-cast img { width: 100%; height: auto; border-radius: 0.5rem; border: 2px solid #2a3f66; }
.m2-links { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.m2-links a { display: inline-block; min-height: 24px; }
@media (min-width: 700px) {
  .m2-hero-in { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 2rem; padding-block: 1.6rem 2rem; }
  .m2-steps { grid-template-columns: 1fr 1fr; }
  .m2-shots { grid-template-columns: repeat(4, 1fr); }
  .m2-two { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .m2-cast { grid-template-columns: repeat(5, 1fr); }
}