.mc-nav { position: fixed; left: 0; right: 0; top: 0; }
/* ===== figma-grade v2 (MC-FIGMA 2026-10-16): layered hero scene -> camera push into the real lesson player ===== */
.mx-scene { position: relative; }
.mx-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--bg); }
.mx-l { position: absolute; inset: 0; pointer-events: none; }
.mx-plate img { position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: max(112vw, 199svh); height: auto; filter: saturate(.92); transform-origin: 50% 60%; }
.mx-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bg-rgb), .35) 0%, rgba(var(--bg-rgb), 0) 30%, rgba(var(--bg-rgb), .1) 58%, rgba(var(--bg-rgb), .92) 86%, var(--bg) 100%); }
:root[data-theme="dark"] .mx-plate img { filter: saturate(.85) brightness(.6); }
.mx-word { display: flex; align-items: flex-start; justify-content: center; padding-top: 24svh; }
.mx-word span { font-family: var(--f-lat); font-weight: 800; font-size: clamp(60px, 12.6vw, 236px); line-height: .82; letter-spacing: -.035em; color: var(--text); white-space: nowrap; opacity: .94; }
.mx-sides { z-index: 0; }
.mx-word { z-index: 1; }
.mx-sh { position: absolute; aspect-ratio: 9 / 16; height: 40svh; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(var(--fg-rgb), .12); }
.mx-sh img { width: 100%; height: 100%; object-fit: cover; }
.mx-sh.a { left: 3vw; top: 13svh; height: 34svh; rotate: -7deg; }
.mx-sh.b { right: 4vw; top: 12svh; rotate: 6deg; height: 30svh; }
.mx-bezel { position: absolute; z-index: 2; border-radius: 22px; background: #06080e; box-shadow: 0 0 0 1px rgba(var(--fg-rgb), .18), 0 40px 90px rgba(0,0,0,.35); pointer-events: none; display: none; }
html.fxon .mx-bezel { display: block; }
.mx-bezel .tag { position: absolute; left: 50%; top: -38px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--lime); color: var(--on-lime); font-family: var(--f-lat); font-weight: 700; font-size: 13px; letter-spacing: .12em; white-space: nowrap; }
.mx-bezel .tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: mxb 1.6s ease-in-out infinite; }
@keyframes mxb { 50% { opacity: .25; } }
.mx-fg { z-index: 4; }
.mx-fg img { position: absolute; right: -1vw; bottom: 0; width: min(36vw, 540px); height: auto; transform-origin: 70% 100%; }
.mx-copy { position: absolute; z-index: 6; left: var(--mc-gut); bottom: 7svh; max-width: min(40vw, 560px); }
.mx-kick .th, .mx-bezel .tag .th { font-family: var(--f-th-bold); font-weight: 700; letter-spacing: 0; font-size: 1.16em; }
.mx-kick { font-family: var(--f-lat); font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--lime-ink); margin: 0 0 10px; }
.mx-h1 { font-family: var(--f-th-bold); font-weight: 700; font-size: clamp(26px, 2.3vw, 36px); line-height: 1.32; margin: 0 0 10px; color: var(--text); }
.mx-h1 em { font-style: normal; color: var(--text-2); }
.mx-sub { color: var(--text-2); font-size: 19px; line-height: 1.65; margin: 0 0 18px; }
.mx-buy { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mx-price span { font-family: var(--f-lat); font-weight: 800; font-size: clamp(40px, 3.6vw, 56px); line-height: 1; letter-spacing: -.02em; color: var(--text); }
.mx-price small { display: block; font-size: 15px; line-height: 1.5; color: var(--text-3); margin-top: 4px; }
.mx-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 16px; color: var(--lime-ink); font-family: var(--f-th-bold); font-weight: 700; }
.mx-hint svg { width: 18px; height: 18px; animation: mxh 1.8s ease-in-out infinite; }
@keyframes mxh { 50% { transform: translateY(4px); } }
.mx-copy .mc-trust { margin-top: 12px; font-size: 15px; }
.mx-copy::before { content: ""; position: absolute; inset: -60px -90px -40px -80px; z-index: -1; background: radial-gradient(closest-side, rgba(var(--bg-rgb), .9), rgba(var(--bg-rgb), .7) 60%, rgba(var(--bg-rgb), 0)); pointer-events: none; }
/* stage: static flow by default; JS + motion turns it into the clipped "screen" window */
.mx-stage { position: relative; background: var(--bg); padding: clamp(40px, 6vw, 80px) var(--mc-gut) 0; }
.mx-stage-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "h h" "p s"; column-gap: 28px; row-gap: 18px; align-items: start; }
.mx-sh2 { grid-area: h; }
.mx-sh2 .mc-h2 { margin: 4px 0 4px; }
.mx-sh2 .mc-lead { margin: 0; max-width: 70ch; }
.mx-pbox { grid-area: p; min-width: 0; }
.mx-side { grid-area: s; }
html.fxon .mx-scene { height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
html.fxon .mx-stage { position: absolute; inset: 0; z-index: 8; padding: 76px var(--mc-gut) 16px; display: flex; align-items: center; }
html.fxon .mx-stage-in { width: 100%; }
html.fxon .mx-sh2 .mc-lead { display: none; }
@media (max-width: 900px) {
  .mx-stage-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "p" "s"; }
  html.fxon .mx-stage { padding-top: 72px; align-items: flex-start; }
  html.fxon .mx-side .mc-note, html.fxon .mx-side > p { display: none; }
  .mx-copy { max-width: none; right: var(--mc-gut); bottom: 4svh; }
  .mx-h1 { font-size: 23px; line-height: 1.34; }
  .mx-sub { font-size: 17px; line-height: 1.6; margin-bottom: 12px; }
  .mx-copy .mc-trust { display: none; }
  .mx-hint { margin: 8px 0 0 52px; }
  .mx-word { padding-top: 22svh; }
  .mx-word span { font-size: 13.2vw; }
  .mx-fg img { width: 50vw; right: -8vw; bottom: 42svh; }
  .mx-sh.a { left: -6vw; top: 26svh; height: 26svh; }
  .mx-sh.b { right: -4vw; top: 22svh; height: 22svh; }
}
/* what you get: type-led row, no boxes */
.mx-get { padding: clamp(56px, 8vw, 104px) 0 0; }
.mx-get-h { font-family: var(--f-th-bold); font-weight: 700; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.28; margin: 0 0 24px; }
.mx-get-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.mx-gi { border-top: 2px solid var(--text); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.mx-gi .n { font-family: var(--f-lat); font-weight: 800; font-size: 44px; line-height: 1; color: var(--text); letter-spacing: -.02em; }
.mx-gi b { font-family: var(--f-th-bold); font-weight: 700; font-size: 20px; line-height: 1.4; }
.mx-gi > span:last-child { color: var(--text-2); font-size: 17px; line-height: 1.6; }
.mx-gi.bonus { border-top-color: var(--lime); }
.mx-gi.bonus .n { color: var(--lime-ink); }
@media (max-width: 900px) { .mx-get-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mx-get-row { grid-template-columns: 1fr; gap: 20px; } }
/* PDF: physical sheets fanned on a desk */
.mc-pages.mx-fan { display: block; position: relative; height: clamp(320px, 40vw, 560px); }
.mx-fan .mc-page { position: absolute; top: 0; width: 34%; left: calc(var(--i) * 13.2%); z-index: calc(var(--i) + 1); transform: translateY(calc(var(--y, 0px) + var(--py, 0px))) rotate(var(--r, 0deg)); transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.mx-fan .mc-page:nth-child(1) { --r: -9deg; --y: 40px; }
.mx-fan .mc-page:nth-child(2) { --r: -5deg; --y: 18px; }
.mx-fan .mc-page:nth-child(3) { --r: -1.5deg; --y: 6px; }
.mx-fan .mc-page:nth-child(4) { --r: 2deg; --y: 8px; }
.mx-fan .mc-page:nth-child(5) { --r: 5.5deg; --y: 22px; }
.mx-fan .mc-page:nth-child(6) { --r: 9deg; --y: 44px; }
.mx-fan .mc-page img { box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.22); border-color: var(--line); }
.mx-fan .mc-page:hover, .mx-fan .mc-page:focus-visible { z-index: 20; transform: translateY(calc(var(--py, 0px) - 26px)) rotate(0deg) scale(1.04); }
.mx-fan .mc-page:hover img, .mx-fan .mc-page:focus-visible img { transform: none; }
.mx-fan .mc-page span { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 6px 10px; border-radius: 8px; background: rgba(var(--bg-rgb), .9); font-size: 15px; line-height: 1.45; opacity: 0; transition: opacity .25s; }
.mx-fan .mc-page:hover span, .mx-fan .mc-page:focus-visible span { opacity: 1; }
@media (max-width: 900px) { .mc-pages.mx-fan { height: 92vw; max-height: 520px; margin-top: 22px; } .mx-fan .mc-page { width: 44%; left: calc(var(--i) * 11.2%); } }

/* v2 early-access price: struck list price + label */
.mx-list { font-family: var(--f-lat); font-weight: 600; font-size: .5em; color: var(--text-3); text-decoration-thickness: 2px; margin-left: 10px; letter-spacing: 0; }
.mx-price .mx-list { font-size: clamp(20px, 1.8vw, 28px); }
.mc-bar .mx-list { font-size: 15px; margin-left: 4px; }
.mx-early { font-family: var(--f-th-bold); font-weight: 700; color: var(--lime-ink); }
div.mx-early { font-size: 15px; margin: -2px 0 4px; }
.mx-price small .mx-early { font-size: 15px; }
[data-list-price][hidden], [data-early][hidden] { display: none; }