/* The same portrait player, with a separate theme for each existing site. */
.mm-demo {
  --demo-bg: #0e1726;
  --demo-text: #f3f7fb;
  --demo-muted: #b9c6d5;
  --demo-accent: #83e4ea;
  --demo-border: 1px solid #344657;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 350px);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.25rem, 4vw, 3rem);
  margin-block: 1.5rem 3rem;
  border: var(--demo-border);
  border-radius: 24px;
  background: var(--demo-bg);
  color: var(--demo-text);
  scroll-margin-top: 90px;
  text-align: start;
}
.mm-demo__eyebrow {margin: 0 0 1rem; color: var(--demo-accent); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;}
.mm-demo h2 {margin: 0 0 1.2rem; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; color: var(--demo-text);}
.mm-demo h2 span {color: var(--demo-accent);}
.mm-demo__description {max-width: 35ch; margin: 0 0 1.25rem; color: var(--demo-muted); font-size: 1.05rem; font-weight: 500; line-height: 1.7;}
.mm-demo__details {margin: 0 0 1.5rem; color: var(--demo-muted); font-size: .88rem; font-weight: 600;}
.mm-demo__sound {min-height: 44px; padding: .7rem 1.2rem; border: 1px solid var(--demo-accent); border-radius: 10px; background: transparent; color: var(--demo-accent); font: inherit; font-weight: 750; cursor: pointer;}
.mm-demo__sound:hover {background: var(--demo-accent); color: var(--demo-bg);}
.mm-demo__sound:focus-visible, .mm-demo video:focus-visible, .mm-demo-jump:focus-visible {outline: 3px solid var(--demo-accent, #4ecdc4); outline-offset: 5px;}
.mm-demo__player {margin: 0; min-width: 0; justify-self: center;}
.mm-demo video {display: block; width: 100%; max-height: 620px; max-height: min(620px, 72svh); aspect-ratio: 9 / 16; object-fit: contain; border: 1px solid #35485a; border-radius: 16px; background: #06131e;}
.mm-demo__player figcaption {margin-top: .6rem; color: var(--demo-muted); font-size: .75rem; line-height: 1.5; text-align: center;}
.mm-demo__player a {color: inherit; text-decoration: underline; text-underline-offset: 3px;}
.mm-demo--product {--demo-bg: #fdfbff; --demo-text: #0a0a0a; --demo-muted: #4e485c; --demo-accent: #49328d; --demo-border: 3px solid #0a0a0a; width: min(1100px, calc(100% - 3rem)); margin: 3rem auto; border-radius: 6px; box-shadow: 6px 6px 0 #0a0a0a;}
.mm-demo--product .mm-demo__sound {border: 2px solid #0a0a0a; border-radius: 4px; box-shadow: 3px 3px 0 #0a0a0a; color: #0a0a0a;}
.mm-demo--product .mm-demo__sound:hover {background: #ffe66d; color: #0a0a0a;}
.mm-demo-jump {display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.2rem; border: 0; padding: .5rem 0; color: var(--nb-teal, #83e4ea); background: transparent; text-decoration: underline; text-underline-offset: 5px; font: inherit; font-weight: 700; cursor: pointer;}
[hidden].mm-demo__sound {display: none;}
@media (max-width: 640px) {
  .mm-demo {grid-template-columns: minmax(0, 1fr); gap: 1.5rem;}
  .mm-demo__player {width: min(100%, 350px);}
  .mm-demo--product {width: calc(100% - 2rem); margin-block: 2rem;}
}