@font-face{font-family:"M3 Montserrat";src:url(/wp-content/uploads/omgf/nz-learning-fonts/montserrat-normal-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"M3 Manrope";src:url(/wp-content/uploads/omgf/nz-learning-fonts/manrope-normal-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
/* Music Theory for Hard Dance — sales page v3. Scoped to .m3; every rule is
   prefixed so the site-wide polish stylesheets cannot collide with it. */

html body.mt3-body{background:#06070b!important;margin:0}
.m3{
  --bg:#06070b;--card:#0c0f16;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --txt:#f4f1ec;--mut:#a3a9b5;--dim:#737b88;
  --pink:#ff2a83;--pink2:#ff5fa6;--cyan:#13d8e8;--cyan2:#7df3fb;--vio:#8b5cf6;
  --r:18px;--ease:cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;background:var(--bg);color:var(--txt);
  font:400 17px/1.65 "M3 Manrope",Manrope,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;
}
.m3 *,.m3 *::before,.m3 *::after{box-sizing:border-box}
.m3 p,.m3 li{font-family:"M3 Manrope",Manrope,Helvetica,Arial,sans-serif;color:var(--mut);margin:0}
.m3 h1,.m3 h2,.m3 h3{font-family:"M3 Montserrat",Montserrat,Helvetica,Arial,sans-serif;color:var(--txt);margin:0;text-transform:none}
.m3 a{text-decoration:none}
.m3 img{max-width:100%}
.m3-shell{width:min(1240px,calc(100% - 48px));margin-inline:auto;position:relative}

/* ---------- type ---------- */
.m3-grad{background:linear-gradient(92deg,var(--cyan2) 0%,var(--cyan) 35%,var(--vio) 70%,var(--pink) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:m3-shift 9s ease-in-out infinite alternate}
.m3-eyebrow{font:800 12px/1.4 "M3 Montserrat",Montserrat,Arial,sans-serif!important;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)!important;margin-bottom:16px!important}
.m3 .m3-h1{font-weight:900;font-size:clamp(44px,5.6vw,86px);line-height:.96;letter-spacing:-.045em;text-transform:uppercase;margin:22px 0 22px!important;max-width:12ch}
.m3-h1 .m3-grad{display:block}
.m3 .m3-h2{font-weight:900;font-size:clamp(32px,3.6vw,54px);line-height:1.02;letter-spacing:-.04em;text-transform:uppercase}
.m3 .m3-h3{font-weight:800;font-size:clamp(24px,2.2vw,32px);line-height:1.12;letter-spacing:-.03em}
.m3-lede{font-size:clamp(17px,1.25vw,20px)!important;line-height:1.55!important;color:#c3c8d1!important;max-width:46ch}
.m3-sub{font-size:17px;max-width:52ch;margin-top:16px!important}
.m3-inline{color:var(--cyan);border-bottom:1px solid rgba(19,216,232,.35)}
.m3-inline:hover{color:var(--cyan2)}

/* ---------- hero ---------- */
.m3-hero{position:relative;padding:clamp(28px,5vw,72px) 0 clamp(56px,7vw,104px);isolation:isolate}
.m3-hero::after{content:"";position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(transparent,var(--bg));z-index:-1;pointer-events:none}
.m3-aurora{position:absolute;inset:-20% -10% 0;z-index:-3;filter:blur(80px);opacity:.85;pointer-events:none}
.m3-aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.m3-aurora i:nth-child(1){width:46vw;height:46vw;left:48%;top:4%;background:radial-gradient(circle,rgba(19,216,232,.30),transparent 65%);animation:m3-drift1 18s ease-in-out infinite alternate}
.m3-aurora i:nth-child(2){width:40vw;height:40vw;left:62%;top:30%;background:radial-gradient(circle,rgba(255,42,131,.26),transparent 65%);animation:m3-drift2 22s ease-in-out infinite alternate}
.m3-aurora i:nth-child(3){width:38vw;height:38vw;left:-8%;top:-6%;background:radial-gradient(circle,rgba(139,92,246,.20),transparent 65%);animation:m3-drift3 26s ease-in-out infinite alternate}

/* piano-roll grid with notes drifting across */
.m3-roll{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:100% 28px,112px 100%;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 60% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 75% 70% at 60% 45%,#000 20%,transparent 75%)}
.m3-roll span{position:absolute;left:-12%;height:18px;border-radius:4px;
  top:calc(6% + (var(--i) * 41px) % 88%);width:calc(48px + (var(--i) * 37px) % 130px);
  background:linear-gradient(90deg,rgba(19,216,232,.55),rgba(19,216,232,.18));box-shadow:0 0 18px rgba(19,216,232,.35);
  animation:m3-note calc(16s + (var(--i) * 3.7s) % 14s) linear infinite;animation-delay:calc(var(--i) * -2.3s)}
.m3-roll span:nth-child(3n){background:linear-gradient(90deg,rgba(255,42,131,.55),rgba(255,42,131,.16));box-shadow:0 0 18px rgba(255,42,131,.35)}
.m3-roll span:nth-child(4n){background:linear-gradient(90deg,rgba(139,92,246,.5),rgba(139,92,246,.14));box-shadow:none}

.m3-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,72px);align-items:center}
.m3-pill{display:inline-flex!important;align-items:center;gap:10px;padding:8px 16px 8px 12px;border:1px solid var(--line2);border-radius:999px;background:rgba(12,15,22,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:700 13px/1.3 "M3 Manrope",Manrope,Arial,sans-serif!important;color:#d6dae2!important}
.m3-pill b{color:#fff;font-variant-numeric:tabular-nums;font-weight:800}
.m3-dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 rgba(255,42,131,.6);animation:m3-pulse 2s infinite;flex:none}

.m3-buybox{margin-top:30px;padding:22px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 60px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);max-width:560px}
.m3-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
.m3-price strong{font:900 clamp(36px,3.2vw,46px)/1 "M3 Montserrat",Montserrat,Arial,sans-serif;color:#fff;letter-spacing:-.03em}
.m3-price span{font-size:14px;color:var(--mut)}
.m3-price s{color:var(--dim)}
.m3-price em{font-style:normal;font:800 12px/1 "M3 Manrope",Manrope,Arial,sans-serif;letter-spacing:.04em;color:#fff;padding:7px 10px;border-radius:999px;background:linear-gradient(90deg,var(--pink),#ff6a4d);box-shadow:0 6px 20px -6px rgba(255,42,131,.7)}
.m3-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 16px}
.m3-assure{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;padding:0!important;margin:0!important}
.m3-assure li{font-size:13px!important;color:#9aa1ad!important;padding-left:20px!important;position:relative;list-style:none!important}
.m3-assure li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg)}

/* buttons */
.m3-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:58px;padding:0 26px;border-radius:14px;font:800 16px/1 "M3 Manrope",Manrope,Arial,sans-serif;letter-spacing:.01em;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s,border-color .25s;will-change:transform}
.m3-btn-primary{color:#fff!important;background:linear-gradient(100deg,#ff2a83 0%,#ff3d6e 55%,#ff5a4e 100%);box-shadow:0 14px 34px -12px rgba(255,42,131,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.m3-btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:m3-shine 4.5s ease-in-out infinite 1.5s}
.m3-btn-primary i{font-style:normal;font-size:20px;transition:transform .35s var(--ease)}
.m3-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(255,42,131,.95),inset 0 1px 0 rgba(255,255,255,.35)}
.m3-btn-primary:hover i{transform:translateX(5px)}
.m3-btn-ghost{color:var(--txt)!important;border:1px solid var(--line2);background:rgba(255,255,255,.03)}
.m3-btn-ghost:hover{border-color:rgba(19,216,232,.6);color:#fff!important;background:rgba(19,216,232,.08);transform:translateY(-2px)}
.m3-btn-block{width:100%}

.m3-proof{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:var(--mut)!important;font-size:14px;transition:color .2s}
.m3-proof:hover{color:#fff!important}
.m3-stars{color:#ffc53d;letter-spacing:2px;font-size:15px;text-shadow:0 0 12px rgba(255,197,61,.45)}

/* product stage */
.m3-stage{--rx:0deg;--ry:0deg;position:relative;display:grid;place-items:center;min-height:clamp(420px,46vw,640px);perspective:1200px}
.m3-box{position:relative;z-index:2;width:auto!important;height:clamp(360px,40vw,560px)!important;max-width:100%;object-fit:contain;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);transition:transform .6s var(--ease);
  filter:drop-shadow(0 40px 50px rgba(0,0,0,.65)) drop-shadow(0 0 40px rgba(19,216,232,.18));animation:m3-float 7s ease-in-out infinite}
.m3-glow{position:absolute;z-index:1;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(19,216,232,.35),rgba(139,92,246,.18) 45%,transparent 70%);filter:blur(30px);animation:m3-breathe 6s ease-in-out infinite}
.m3-ring{position:absolute;z-index:0;width:88%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(19,216,232,.16);animation:m3-spin 40s linear infinite}
.m3-ring::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px var(--cyan)}
.m3-ring-2{width:66%;border-color:rgba(255,42,131,.16);animation-duration:28s;animation-direction:reverse}
.m3-ring-2::before{background:var(--pink);box-shadow:0 0 16px var(--pink)}
.m3-floor{position:absolute;z-index:1;bottom:6%;width:52%;height:34px;border-radius:50%;background:radial-gradient(ellipse,rgba(19,216,232,.35),transparent 70%);filter:blur(10px);animation:m3-shadow 7s ease-in-out infinite}
.m3-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--line2);background:rgba(10,13,20,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:700 13px/1 "M3 Manrope",Manrope,Arial,sans-serif;color:#e8ebf0;box-shadow:0 18px 40px -18px rgba(0,0,0,.8);white-space:nowrap}
.m3-chip b{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;font-size:13px;color:#06070b;background:var(--cyan)}
.m3-chip-1{left:0;top:22%;animation:m3-bob 6s ease-in-out infinite}
.m3-chip-2{right:0;top:44%;animation:m3-bob 7s ease-in-out infinite -2s}
.m3-chip-2 b{background:var(--pink);color:#fff}
.m3-chip-3{left:6%;bottom:16%;animation:m3-bob 6.5s ease-in-out infinite -4s}
.m3-chip-3 b{background:#ffc53d}

/* ---------- marquee ---------- */
.m3-marquee{position:relative;border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(19,216,232,.05),rgba(255,42,131,.05));overflow:hidden;padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.m3-marquee-track{display:flex;align-items:center;gap:28px;width:max-content;animation:m3-marquee 38s linear infinite}
.m3-marquee span{font:900 clamp(18px,1.8vw,26px)/1 "M3 Montserrat",Montserrat,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px rgba(244,241,236,.4);white-space:nowrap}
.m3-marquee span:nth-of-type(4n+1){color:var(--txt);-webkit-text-stroke:0}
.m3-marquee i{font-style:normal;color:var(--pink);font-size:14px}

/* ---------- stats ---------- */
.m3-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(48px,6vw,88px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line)}
.m3-stats>div{background:linear-gradient(180deg,#0b0e15,#080a10);padding:28px 24px;text-align:center}
.m3-stats strong{display:block;font:900 clamp(38px,4vw,58px)/1 "M3 Montserrat",Montserrat,Arial,sans-serif;letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,#9fb3c2);-webkit-background-clip:text;background-clip:text;color:transparent}
.m3-stats span{display:block;margin-top:10px;font:700 12px/1.3 "M3 Montserrat",Montserrat,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ---------- sections ---------- */
.m3-section{position:relative;padding:clamp(72px,9vw,128px) 0 0}
.m3-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.m3-head-split{max-width:none;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
.m3-head-split .m3-sub{margin:0!important}

/* ---------- tools gallery ---------- */
.m3-gallery{position:relative}
.m3-gallery .mt-gallery-radio{position:absolute!important;opacity:0!important;pointer-events:none;width:1px;height:1px}
.m3-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.m3-tabs label{position:relative;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02);cursor:pointer;font:800 15px/1.2 "M3 Manrope",Manrope,Arial,sans-serif;color:var(--mut);overflow:hidden;transition:color .25s,border-color .25s,background .25s}
.m3-tabs label small{font:800 11px/1 "M3 Montserrat",Montserrat,Arial,sans-serif;letter-spacing:.12em;color:var(--dim)}
.m3-tabs label:hover{color:#fff;border-color:var(--line2)}
.m3-tabs label i{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink))}
#mt-gallery-1:checked~.m3-tabs label[for=mt-gallery-1],#mt-gallery-2:checked~.m3-tabs label[for=mt-gallery-2],#mt-gallery-3:checked~.m3-tabs label[for=mt-gallery-3]{color:#fff;border-color:rgba(19,216,232,.45);background:linear-gradient(160deg,rgba(19,216,232,.10),rgba(255,42,131,.05))}
#mt-gallery-1:checked~.m3-tabs label[for=mt-gallery-1] small,#mt-gallery-2:checked~.m3-tabs label[for=mt-gallery-2] small,#mt-gallery-3:checked~.m3-tabs label[for=mt-gallery-3] small{color:var(--cyan)}
#mt-gallery-1:checked~.m3-tabs label[for=mt-gallery-1] i,#mt-gallery-2:checked~.m3-tabs label[for=mt-gallery-2] i,#mt-gallery-3:checked~.m3-tabs label[for=mt-gallery-3] i{width:100%}
.m3-gallery.is-running.tick #mt-gallery-1:checked~.m3-tabs label[for=mt-gallery-1] i,
.m3-gallery.is-running.tick #mt-gallery-2:checked~.m3-tabs label[for=mt-gallery-2] i,
.m3-gallery.is-running.tick #mt-gallery-3:checked~.m3-tabs label[for=mt-gallery-3] i{animation:m3-progress var(--dur,6000ms) linear forwards}
.m3-gallery:focus-within .m3-tabs label:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.m3-gstage{position:relative;border-radius:24px;border:1px solid var(--line);padding:clamp(18px,3vw,40px);background:radial-gradient(ellipse 60% 80% at 15% 30%,rgba(19,216,232,.10),transparent 60%),radial-gradient(ellipse 50% 70% at 90% 90%,rgba(255,42,131,.08),transparent 60%),linear-gradient(160deg,#0d1118,#08090e);overflow:hidden}
.m3-slide{display:none!important;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
#mt-gallery-1:checked~.m3-gstage .m3-slide-1,#mt-gallery-2:checked~.m3-gstage .m3-slide-2,#mt-gallery-3:checked~.m3-gstage .m3-slide-3{display:grid!important;animation:m3-fadein .6s var(--ease)}
.m3-window{border-radius:16px;border:1px solid var(--line2);background:#0a0d13;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4),0 0 60px -10px rgba(19,216,232,.25);transform:perspective(1400px) rotateY(6deg);transition:transform .7s var(--ease)}
.m3-gstage:hover .m3-window{transform:perspective(1400px) rotateY(0)}
.m3-window-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:#0f131b}
.m3-window-bar i{width:10px;height:10px;border-radius:50%;background:#2a2f3a}
.m3-window-bar i:nth-child(1){background:#ff5f57}.m3-window-bar i:nth-child(2){background:#febc2e}.m3-window-bar i:nth-child(3){background:#28c840}
.m3-window-bar span{margin-left:10px;font:600 11px/1 "M3 Manrope",Manrope,Arial,sans-serif;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m3 .m3-window figure{display:block!important;padding:0!important;background:#0a0d13!important;margin:0!important;height:440px!important;max-height:none!important;overflow:auto;scrollbar-width:thin;scrollbar-color:#16b1c3 #0a0d13}
.m3 .m3-window figure img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:initial!important}
.m3-slide-copy .m3-h3{margin-bottom:16px}
.m3-slide-copy p:not(.m3-eyebrow){font-size:17px}
.m3-check{display:inline-flex!important;align-items:center;gap:10px;margin-top:22px!important;padding:10px 14px;border-radius:10px;border:1px solid rgba(19,216,232,.25);background:rgba(19,216,232,.06);font-size:14px!important;font-weight:700;color:#d8f7fa!important}
.m3-check::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--cyan);color:#06070b;font-size:12px;font-weight:900}
.m3-gcontrols{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:13px;color:var(--dim)}
.m3-gcontrols button{font:700 13px/1 "M3 Manrope",Manrope,Arial,sans-serif;color:var(--mut);background:transparent;border:1px solid var(--line2);border-radius:999px;padding:9px 14px;cursor:pointer}
.m3-gcontrols button:hover{color:#fff;border-color:var(--cyan)}

/* ---------- curriculum ---------- */
.m3-chapters{list-style:none;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:none}
.m3-chapter{--mx:50%;--my:0;position:relative;list-style:none!important;padding:24px 24px 26px!important;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,#0c0f16,#090b11);overflow:hidden;isolation:isolate;transition:transform .45s var(--ease),border-color .3s}
.m3-chapter::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;background:radial-gradient(320px circle at var(--mx) var(--my),rgba(19,216,232,.14),transparent 60%)}
.m3-chapter:hover{transform:translateY(-4px);border-color:rgba(19,216,232,.35)}
.m3-chapter:hover::before{opacity:1}
.m3-chapter-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.m3-num{font:900 40px/1 "M3 Montserrat",Montserrat,Arial,sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(19,216,232,.55);transition:color .3s}
.m3-chapter:hover .m3-num{color:rgba(19,216,232,.18)}
.m3-tag{font:800 10px/1 "M3 Montserrat",Montserrat,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:7px 9px;border-radius:999px;border:1px solid var(--line2)}
.m3-tag-free{color:#06070b;border-color:transparent;background:var(--cyan);box-shadow:0 0 20px -2px rgba(19,216,232,.6)}
.m3-chapter h3{font:800 19px/1.25 "M3 Montserrat",Montserrat,Arial,sans-serif!important;letter-spacing:-.02em;margin-bottom:10px!important}
.m3-chapter p{font-size:15px!important;line-height:1.6!important}
.m3-chapter.is-free{border-color:rgba(19,216,232,.35);background:linear-gradient(180deg,rgba(19,216,232,.08),#090b11 70%)}
.m3-chapter-cta{display:flex;flex-direction:column;justify-content:center;border-style:dashed;border-color:rgba(255,42,131,.35);background:radial-gradient(ellipse at 100% 0,rgba(255,42,131,.14),transparent 60%),#0a0b11}
.m3-chapter-cta .m3-eyebrow{color:var(--pink2)!important;margin-bottom:10px!important}
.m3-chapter-cta h3{font-size:24px!important}
.m3-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:800 15px/1 "M3 Manrope",Manrope,Arial,sans-serif;color:var(--pink2)!important}
.m3-link span{transition:transform .3s var(--ease)}
.m3-link:hover span{transform:translateX(5px)}

.m3-includes{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(40px,5vw,64px);padding:clamp(24px,3.5vw,44px);border-radius:24px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.m3-teacher{display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:start}
.m3-teacher img{width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--bg),0 0 0 4px rgba(19,216,232,.6),0 0 40px -6px rgba(19,216,232,.5)}
.m3-quote{font:800 clamp(20px,1.8vw,26px)/1.25 "M3 Montserrat",Montserrat,Arial,sans-serif!important;color:#fff!important;letter-spacing:-.02em;margin-bottom:10px!important}
.m3-teacher p:not(.m3-quote){font-size:15px}
.m3-sign{margin-top:12px!important;font:700 13px/1 "M3 Manrope",Manrope,Arial,sans-serif!important;color:var(--cyan)!important}
.m3-list{list-style:none;margin:0!important;padding:0!important;display:grid;gap:12px}
.m3-list li{list-style:none!important;position:relative;padding:14px 16px 14px 48px!important;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:15px!important;font-weight:600;color:#dfe3ea!important}
.m3-list li::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--vio));color:#06070b;font-size:12px;font-weight:900}
.m3-trust{grid-column:1/-1;text-align:center;font-size:13px!important;letter-spacing:.02em;color:var(--dim)!important;padding-top:6px}

/* ---------- FAQ ---------- */
.m3-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,80px);align-items:start}
.m3-accordion{display:grid;gap:10px}
.m3-accordion details{border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02);transition:border-color .3s,background .3s}
.m3-accordion details[open]{border-color:rgba(19,216,232,.35);background:linear-gradient(160deg,rgba(19,216,232,.06),rgba(255,255,255,.01))}
.m3-accordion summary{list-style:none;position:relative;cursor:pointer;padding:22px 60px 22px 22px;font:800 17px/1.35 "M3 Manrope",Manrope,Arial,sans-serif;color:#eef0f4}
.m3-accordion summary::-webkit-details-marker{display:none}
.m3-accordion summary::after{content:"";position:absolute;right:22px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;border:1px solid var(--line2);
  background:linear-gradient(var(--cyan),var(--cyan)) center/10px 2px no-repeat,linear-gradient(var(--cyan),var(--cyan)) center/2px 10px no-repeat;transition:transform .35s var(--ease),background-size .35s}
.m3-accordion details[open] summary::after{transform:rotate(180deg);background-size:10px 2px,2px 0}
.m3-accordion details p{padding:0 22px 22px!important;font-size:16px!important}

/* ---------- final offer ---------- */
.m3-final-wrap{padding-bottom:clamp(72px,9vw,120px)}
.m3-final{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(28px,4.5vw,64px);border-radius:28px;isolation:isolate;background:radial-gradient(ellipse at 0 0,rgba(19,216,232,.14),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(255,42,131,.16),transparent 55%),#0a0c12}
.m3-final::before{content:"";position:absolute;inset:0;z-index:-1;padding:1px;border-radius:inherit;background:conic-gradient(from var(--a,0deg),rgba(19,216,232,.8),rgba(139,92,246,.2),rgba(255,42,131,.8),rgba(19,216,232,.2),rgba(19,216,232,.8));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:m3-border 8s linear infinite}
.m3-clock{display:flex;gap:10px;margin-top:28px}
.m3-clock div{min-width:76px;padding:14px 10px;border-radius:14px;border:1px solid var(--line2);background:rgba(6,7,11,.6);text-align:center}
.m3-clock b{display:block;font:900 32px/1 "M3 Montserrat",Montserrat,Arial,sans-serif;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.m3-clock span{display:block;margin-top:6px;font:700 10px/1 "M3 Montserrat",Montserrat,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.m3-final-buy{position:relative;padding:26px;border-radius:22px;border:1px solid var(--line2);background:rgba(6,7,11,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:left}
.m3-final-box{display:block;width:auto!important;height:200px!important;margin:-90px auto 14px;filter:drop-shadow(0 26px 30px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(255,42,131,.2));animation:m3-float 7s ease-in-out infinite}
.m3-final-buy .m3-price{margin-bottom:18px}
.m3-small{margin-top:14px!important;font-size:13px!important;color:var(--dim)!important;text-align:center}

/* ---------- sticky bar ---------- */
.m3-bar{position:fixed;z-index:9990;left:50%;bottom:18px;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 10px;border-radius:18px;border:1px solid var(--line2);background:rgba(8,10,15,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 24px 60px -18px rgba(0,0,0,.9);
  transform:translate(-50%,140%);opacity:0;pointer-events:none;transition:transform .5s var(--ease),opacity .4s}
.m3-bar.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.m3-bar img{width:auto!important;height:46px!important}
.m3-bar-txt{display:grid;gap:3px;padding-right:6px}
.m3-bar-txt b{font:800 14px/1.2 "M3 Manrope",Manrope,Arial,sans-serif;color:#fff;white-space:nowrap}
.m3-bar-txt span{font:800 14px/1 "M3 Manrope",Manrope,Arial,sans-serif;color:#fff}
.m3-bar-txt s{color:var(--dim);font-weight:600;margin-left:6px}
.m3-bar .m3-btn{min-height:48px;padding:0 20px;font-size:15px}

/* footer */
.m3-footer{font:14px/1.6 "M3 Manrope",Manrope,Arial,sans-serif!important;background:#06070b!important;color:#8d95a2;padding:40px 24px!important;border-top:1px solid rgba(255,255,255,.07)}
.m3-footer .tp-shell{width:min(1240px,100%);margin:auto}
.m3-footer .tp-brand{font:900 20px "M3 Montserrat",Montserrat,Arial,sans-serif;color:#f4f1ec;text-decoration:none}
.m3-footer nav{display:flex;flex-wrap:wrap;gap:12px 24px;margin:20px 0}
.m3-footer a{color:#aab2bd;text-decoration:none}
.m3-footer a:hover{color:#13d8e8}
.m3 :focus-visible,.m3-footer :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---------- scroll reveal (armed by JS only) ---------- */
.m3-js .m3 [data-reveal].is-armed{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * 55ms)}
.m3-js .m3 [data-reveal].is-armed.is-in{opacity:1;transform:none}

/* ---------- keyframes ---------- */
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes m3-border{to{--a:360deg}}
@keyframes m3-shift{0%{background-position:0 50%}100%{background-position:100% 50%}}
@keyframes m3-drift1{to{transform:translate(-8vw,6vh) scale(1.15)}}
@keyframes m3-drift2{to{transform:translate(6vw,-8vh) scale(.9)}}
@keyframes m3-drift3{to{transform:translate(10vw,8vh) scale(1.1)}}
@keyframes m3-note{0%{transform:translateX(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(125vw);opacity:0}}
@keyframes m3-pulse{0%{box-shadow:0 0 0 0 rgba(255,42,131,.6)}70%{box-shadow:0 0 0 10px rgba(255,42,131,0)}100%{box-shadow:0 0 0 0 rgba(255,42,131,0)}}
@keyframes m3-shine{0%,60%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
@keyframes m3-float{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes m3-shadow{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.82);opacity:.55}}
@keyframes m3-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}
@keyframes m3-spin{to{transform:rotate(360deg)}}
@keyframes m3-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes m3-marquee{to{transform:translateX(-50%)}}
@keyframes m3-progress{from{width:0}to{width:100%}}
@keyframes m3-fadein{from{transform:translateY(12px)}to{transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .m3-chapters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m3-includes{grid-template-columns:1fr}
  .m3-chip-1{left:-2%}.m3-chip-2{right:-2%}
}
@media (max-width:860px){
  .m3-shell{width:calc(100% - 36px)}
  .m3-hero{padding-top:18px}
  .m3-hero-grid{grid-template-columns:1fr;gap:8px}
  .m3-stage{order:-1;min-height:0;padding:12px 0 4px}
  .m3-box{height:clamp(260px,62vw,380px)!important}
  .m3-ring{width:min(92%,420px)}.m3-ring-2{width:min(70%,320px)}
  .m3-chip{font-size:11px;padding:8px 10px}.m3-chip b{width:20px;height:20px;font-size:11px}
  .m3-chip-1{left:0;top:14%}.m3-chip-2{right:0;top:48%}.m3-chip-3{left:4%;bottom:6%}
  .m3-h1{margin-top:18px!important}
  .m3-stats{grid-template-columns:repeat(2,1fr)}
  .m3-head-split,.m3-faq,.m3-final{grid-template-columns:1fr}
  .m3-slide{grid-template-columns:1fr;gap:24px}
  .m3-window{transform:none}
  .m3 .m3-window figure{height:360px!important}
  .m3-final-box{margin-top:-70px;height:160px!important}
  .m3-final-buy{margin-top:40px}
}
@media (max-width:600px){
  .m3{font-size:16px}
  .m3-h1{font-size:clamp(40px,11.5vw,54px)}
  .m3-buybox{padding:18px}
  .m3-cta-row .m3-btn{width:100%}
  .m3-chapters{grid-template-columns:1fr}
  .m3-tabs{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .m3-tabs label{flex-direction:column;align-items:flex-start;gap:6px;padding:12px;font-size:13px}
  .m3-gcontrols span{display:none}
  .m3-clock div{min-width:0;flex:1}
  .m3-clock b{font-size:26px}
  .m3-bar{left:10px;right:10px;bottom:10px;transform:translateY(140%)}
  .m3-bar.is-on{transform:none}
  .m3-bar-txt b{font-size:12px;white-space:normal}
  .m3-bar .m3-btn{margin-left:auto}
  .m3-roll span{height:12px}
}
@media (prefers-reduced-motion:reduce){
  .m3 *,.m3 *::before,.m3 *::after{animation:none!important;transition:none!important}
  .m3-grad{background-position:30% 50%}
}

/* ---------- mobile paint budget (2026-09-14) ----------
   Phones and tablets: keep the look, drop what forces the GPU to repaint or
   blend large areas every frame. Blur filters, backdrop-filter, mix-blend,
   animated background-position text and the @property border animation are
   replaced with static equivalents; only transform/opacity animations remain. */
@media (max-width:860px), (pointer:coarse){
  .m3-aurora{filter:none;opacity:1;inset:0}
  .m3-aurora i{mix-blend-mode:normal;animation:none!important}
  .m3-aurora i:nth-child(1){width:120vw;height:120vw;left:10%;top:-20%;background:radial-gradient(circle,rgba(19,216,232,.20),transparent 60%)}
  .m3-aurora i:nth-child(2){width:110vw;height:110vw;left:30%;top:25%;background:radial-gradient(circle,rgba(255,42,131,.15),transparent 60%)}
  .m3-aurora i:nth-child(3){display:none}
  .m3-roll span{box-shadow:none}
  .m3-roll span:nth-child(n+9){display:none}
  .m3-grad{animation:none;background-position:30% 50%}
  .m3-glow{filter:none;animation:none;background:radial-gradient(circle,rgba(19,216,232,.28),rgba(139,92,246,.12) 45%,transparent 68%)}
  .m3-floor{filter:none;animation:none}
  .m3-box{filter:drop-shadow(0 24px 30px rgba(0,0,0,.6));will-change:transform}
  .m3-final-box{filter:none;animation:none}
  .m3-pill,.m3-buybox,.m3-chip,.m3-final-buy,.m3-bar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .m3-pill{background:rgba(14,17,25,.92)}
  .m3-buybox{background:linear-gradient(160deg,#12151d,#0c0e14)}
  .m3-chip{background:rgba(12,15,22,.94)}
  .m3-final-buy{background:#0b0d13}
  .m3-bar{background:rgba(10,12,18,.97)}
  .m3-final::before{animation:none;background:linear-gradient(135deg,rgba(19,216,232,.7),rgba(139,92,246,.25) 45%,rgba(255,42,131,.7))}
  .m3-ring{animation-duration:60s}
  .m3-window{box-shadow:0 24px 50px -24px rgba(0,0,0,.9)}
  .m3-btn-primary::after{animation-duration:6s}
}

/* ===== Codex performance pass (2026-09-14), merged from abtest2/performance/music-theory ===== */
/* Load after mt-v3.css. Page-scoped; no layout, font, copy or price changes. */
.m3 :is(.m3-grad,.m3-dot,.m3-box,.m3-final-box,.m3-ring,.m3-floor,.m3-chip,.m3-marquee-track),
.m3 .m3-aurora i,
.m3 .m3-final::before,
.m3 .m3-btn-primary::after { animation:none!important; }
.m3 .m3-grad { background-position:30% 50%; }
.m3 .m3-roll span { display:none; }

/* Soft radial colour is already feathered: no large blur/blend surfaces. */
.m3 .m3-aurora { filter:none; }
.m3 .m3-aurora i { mix-blend-mode:normal; }
.m3 .m3-glow { filter:none; animation:none; }
.m3 .m3-floor { filter:none; }
.m3 .m3-box { filter:drop-shadow(0 24px 30px #0009); will-change:auto; }
.m3 .m3-final-box { filter:drop-shadow(0 20px 24px #0009); }
.m3 :is(.m3-pill,.m3-buybox,.m3-chip,.m3-final-buy,.m3-bar) {
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
.m3 .m3-pill { background:rgba(14,17,25,.92); }
.m3 .m3-buybox { background:linear-gradient(160deg,#12151d,#0c0e14); }
.m3 .m3-chip { background:rgba(12,15,22,.94); }
.m3 .m3-final-buy { background:#0b0d13; }
.m3 .m3-bar { background:rgba(10,12,18,.97); }
.m3 .m3-final::before {
  background:linear-gradient(135deg,rgba(19,216,232,.7),rgba(139,92,246,.25) 45%,rgba(255,42,131,.7));
}

/* Keep a single decorative entrance; never delay the title, CTA or product. */
@media (prefers-reduced-motion:no-preference) {
  .m3 .m3-glow { animation:m3-light-in 300ms ease-out both; }
}
@keyframes m3-light-in { from { opacity:0; } to { opacity:1; } }

/* Premium feedback on interaction, not permanent animated paint work. */
.m3 :is(.m3-btn,.m3-btn i,.m3-chapter,.m3-window) {
  will-change:auto; transition:transform 180ms ease-out;
}
.m3 .m3-btn-primary::after {
  opacity:0; transform:translateX(0);
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.16),transparent);
  transition:opacity 180ms ease-out;
}
@media (hover:hover) and (pointer:fine) {
  .m3 .m3-btn-primary:hover::after { opacity:1; }
}
.m3-js .m3 [data-reveal].is-armed {
  transform:translateY(12px); transition:opacity 280ms ease-out,transform 280ms ease-out;
  transition-delay:0ms;
}
.m3-js .m3 [data-reveal].is-armed.is-in { transform:none; }
.m3 .m3-slide { animation-duration:280ms!important; }

/* The six-second preview indicator updates on the compositor, not width. */
.m3 .m3-tabs label i { width:100%; transform:scaleX(0); transform-origin:left; }
.m3 #mt-gallery-1:checked~.m3-tabs label[for=mt-gallery-1] i,
.m3 #mt-gallery-2:checked~.m3-tabs label[for=mt-gallery-2] i,
.m3 #mt-gallery-3:checked~.m3-tabs label[for=mt-gallery-3] i { transform:scaleX(1); }
.m3 .m3-gallery.is-running.tick .m3-tabs label i { animation-name:m3-progress-transform!important; }
@keyframes m3-progress-transform { from { transform:scaleX(0); } to { transform:scaleX(1); } }

@media (max-width:860px), (pointer:coarse) {
  .m3-js .m3 [data-reveal].is-armed:not(.is-in) { transform:translateY(8px); }
  .m3 .m3-box { filter:none; }
}
@media (prefers-reduced-motion:reduce) {
  .m3 *, .m3 *::before, .m3 *::after {
    animation:none!important; transition:none!important; scroll-behavior:auto!important;
  }
  .m3-js .m3 [data-reveal].is-armed { opacity:1!important; transform:none!important; }
}

/* ===== Hero fits one screen (2026-09-14) =====
   Size the hero from the viewport HEIGHT as well as the width, so pill,
   headline, lede, price, both CTAs, proof line and the box stay above the
   fold on short laptop windows. --m3-top is the measured header height. */
@media (min-width:861px){
  .m3-hero{display:flex;align-items:center;min-height:calc(100vh - var(--m3-top,64px));min-height:calc(100svh - var(--m3-top,64px));padding:clamp(14px,3vh,44px) 0 clamp(18px,3.5vh,52px)}
  .m3-hero-grid{width:min(1240px,calc(100% - 48px))}
  .m3 .m3-h1{font-size:clamp(38px,min(5.6vw,7.2vh),86px);margin:clamp(10px,1.9vh,22px) 0 clamp(10px,1.9vh,22px)!important}
  .m3-pill{padding-block:clamp(5px,.8vh,8px)}
  .m3-lede{font-size:clamp(15px,min(1.25vw,2.1vh),20px)!important}
  .m3-buybox{margin-top:clamp(12px,2.4vh,30px);padding:clamp(14px,2vh,22px)}
  .m3-price strong{font-size:clamp(28px,min(3.2vw,4.6vh),46px)}
  .m3-cta-row{margin:clamp(10px,1.7vh,18px) 0 clamp(8px,1.5vh,16px)}
  .m3-btn{min-height:clamp(44px,6vh,58px)}
  .m3-proof{margin-top:clamp(8px,2vh,22px)}
  .m3-stage{min-height:0;padding-block:clamp(8px,2vh,24px)}
  .m3-box{height:clamp(280px,min(40vw,66vh),560px)!important}
  .m3-ring{width:min(88%,78vh)}
  .m3-ring-2{width:min(66%,58vh)}
}
@media (max-width:860px){
  .m3-box{height:clamp(200px,min(62vw,32svh),380px)!important}
}