/* Free online mastering. One instrument, three states: drop, cook, done. Shares the site shell. */
.master-page{font-family:Poppins,Arial,sans-serif;--m-pink:#ff98cb;--m-blue:#7fd8ff;--m-mint:#9ef0c3;--m-amber:#ffd27f;--m-ink:#f7f2f8;--m-dim:#a9a2b0;--m-dim2:#6f6878;--m-line:#ffffff14;--m-mono:"SF Mono",Menlo,Consolas,monospace;--m-ease:cubic-bezier(.2,.75,.2,1);--m-spring:cubic-bezier(.34,1.3,.4,1);--m-accent:var(--m-pink)}
.master-page #topbar{width:100%;margin:0;background:transparent;border-bottom-color:transparent;backdrop-filter:none;transition:background .4s,border-color .4s}
.master-page.is-scrolled #topbar{background:rgba(9,9,12,.9);border-bottom-color:var(--m-line);backdrop-filter:blur(18px)}
.master-page main:focus{outline:none}
.master-page p{color:var(--m-dim)}
.mw{width:min(1120px,calc(100% - var(--gutter)*2));margin:auto}

/* ---------- the instrument: fills the first screen ---------- */
.m-stage-area{position:relative;min-height:calc(100dvh - 88px);display:grid;grid-template-columns:minmax(0,1fr);place-items:center;overflow:hidden;isolation:isolate}
@media(max-width:960px){.m-stage-area{min-height:0;place-items:start center}.m-state{padding-top:8px}.m-state>div{padding-top:24px}
/* on a phone the bar is always over content, so it stops being see through and stops sitting on the words */
.master-page #topbar{background:rgba(9,9,12,.94);border-bottom-color:var(--m-line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}}
#s-cook>div{padding-bottom:230px}
@media(min-width:961px){#s-cook>div{padding-bottom:64px}}
.m-field{position:absolute;inset:0;z-index:-1;pointer-events:none}
.m-field canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.m-field:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b0910 0,transparent 16%,transparent calc(100% - 60px),#0b0910 100%)}
.m-state{grid-area:1/1;width:100%;min-width:0;max-width:100%;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:24px var(--gutter);opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);filter:blur(6px);transition:opacity .55s var(--m-ease),transform .7s var(--m-ease),filter .55s var(--m-ease),visibility 0s .55s}
.m-state:not(.is-on){position:absolute;inset:0 0 auto 0;pointer-events:none}
.m-state.is-on{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:0s}
.m-state>div{width:min(880px,100%);min-width:0;max-width:100%;text-align:center;padding:36px 20px 64px;background:radial-gradient(ellipse at 50% 50%,#0b0910e6 0,#0b0910b8 40%,#0b091000 72%)}

/* drop */
.m-drop-h1{font-size:clamp(34px,8.6vw,104px);line-height:.98;letter-spacing:-.05em;font-weight:600;margin:0;color:var(--m-ink)}
.m-drop-h1 em{font-style:normal;background:linear-gradient(90deg,#ffb7dc,var(--m-pink) 45%,#b89cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-drop-sub{margin:20px auto 0;font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--m-dim);max-width:520px}
.m-drop-sub b{color:var(--m-ink);font-weight:500}
.m-drop{position:relative;border:0;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:14px;margin:34px auto 0;padding:0 8px 0 0;border-radius:999px;background:linear-gradient(120deg,#ffb7dc,var(--m-pink) 55%,#ff8fc4);color:#1a0d16;box-shadow:0 18px 60px #ff98cb33,0 2px 0 #fff3 inset;cursor:pointer;transition:transform .45s var(--m-spring),box-shadow .45s var(--m-ease)}
.m-drop:hover,.m-drop.is-over{transform:translateY(-2px) scale(1.03);box-shadow:0 26px 80px #ff98cb55,0 2px 0 #fff3 inset}
.m-drop-ref:hover{box-shadow:0 26px 80px #7fd8ff55,0 2px 0 #fff3 inset}
.m-drop:focus-within{outline:3px solid #fff;outline-offset:5px}
.m-drop input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.m-drop-ico{width:60px;height:60px;border-radius:50%;background:#1a0d16;display:grid;place-items:center;margin:4px}
.m-drop-ico svg{width:24px;height:24px;fill:none;stroke:var(--m-pink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-drop b{font-size:18px;font-weight:600;letter-spacing:-.02em;padding-right:18px}
.m-drop-fine{margin:16px 0 0;font-size:12px;color:var(--m-dim2);letter-spacing:.02em}
.m-settings{margin:26px auto 0;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:5px;border-radius:999px;border:1px solid var(--m-line);background:#ffffff06;backdrop-filter:blur(10px)}
.m-settings button{min-height:40px;padding:6px 14px;border-radius:999px;background:transparent;color:var(--m-dim);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:7px;transition:background .25s,color .25s}
.m-settings button:hover{color:var(--m-ink)}
.m-settings button i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.m-settings button span{color:var(--m-ink)}
.m-sheet{position:absolute;left:50%;bottom:24px;z-index:6;transform:translate(-50%,12px);width:min(560px,calc(100% - 2*var(--gutter)));padding:18px;border-radius:22px;border:1px solid var(--m-line);background:#16111ff2;backdrop-filter:blur(20px);box-shadow:0 30px 80px #0008;opacity:0;visibility:hidden;transition:opacity .35s var(--m-ease),transform .45s var(--m-spring),visibility 0s .35s;z-index:5;text-align:left}
.m-sheet.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.m-sheet h4{margin:0 0 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--m-dim2);font-weight:600}
.m-sheet h4+.m-seg{margin-bottom:14px}
.m-seg{display:flex;gap:6px}
.m-seg button{flex:1;min-height:46px;padding:7px 10px;border-radius:12px;border:1px solid var(--m-line);background:transparent;color:var(--m-dim);font-size:13px;font-weight:500;transition:background .2s,border-color .2s,color .2s,transform .3s var(--m-spring)}
.m-seg button b{display:block;font-weight:600;color:var(--m-ink);font-size:13px}
.m-seg button span{display:block;font-size:11px;margin-top:1px;color:var(--m-dim2)}
.m-seg button[aria-pressed="true"]{background:#ff98cb1c;border-color:#ff98cb80}
.m-seg button[aria-pressed="true"] span{color:#ffc5e3}
.m-sheet-close{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;background:#ffffff0a;color:var(--m-dim);font-size:18px;line-height:1}
.m-error{margin:18px auto 0;max-width:520px;padding:12px 16px;border-radius:12px;border:1px solid #ff6b6b44;background:#ff6b6b12;color:#ffc9c9;font-size:14px}

/* cook */
.m-cook-file{max-width:100%;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-dim2);font-weight:600;margin:0 0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-cook-file b{color:var(--m-dim);font-weight:600}
.m-cook-stage{font-size:clamp(34px,5.6vw,72px);line-height:1.02;letter-spacing:-.045em;font-weight:600;margin:0;color:var(--m-ink);min-height:1.05em;transition:color .6s}
.m-cook-say{margin:18px auto 0;font-size:clamp(16px,2vw,22px);line-height:1.5;color:var(--m-dim);max-width:640px;min-height:2.9em}
.m-cook-say b{color:var(--m-ink);font-weight:500}
.m-cook-say span{display:block;opacity:0;transform:translateY(8px);animation:m-say .6s var(--m-ease) forwards}
@keyframes m-say{to{opacity:1;transform:none}}
.m-rail{display:flex;align-items:center;justify-content:center;gap:0;margin:34px auto 0;max-width:680px;padding:0 12px}
.m-rail i{width:10px;height:10px;border-radius:50%;background:#ffffff22;flex:none;transition:background .5s,box-shadow .5s,transform .5s var(--m-spring);position:relative}
.m-rail i:before{content:attr(data-n);position:absolute;top:18px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.08em;color:var(--m-dim2);white-space:nowrap;opacity:0;transition:opacity .4s}
.m-rail i.is-on{background:var(--m-accent);box-shadow:0 0 22px var(--m-accent);transform:scale(1.5)}
.m-rail i.is-on:before{opacity:1;color:var(--m-dim)}
.m-rail i.is-done{background:var(--m-ink)}
.m-rail s{flex:1;height:2px;background:#ffffff14;position:relative;overflow:hidden;text-decoration:none}
.m-rail s:after{content:"";position:absolute;inset:0;background:var(--m-ink);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--m-ease)}
.m-rail s.is-done:after{transform:none}
@media(max-width:600px){.m-rail{max-width:100%}.m-rail i:before{display:none}}
.m-cook-time{margin:44px 0 0;font-family:var(--m-mono);font-size:12px;color:var(--m-dim2);letter-spacing:.06em}

/* done */
.m-done-h{font-size:clamp(34px,5.6vw,72px);line-height:1.02;letter-spacing:-.045em;font-weight:600;margin:0;color:var(--m-ink)}
.m-done-h em{font-style:normal;color:var(--m-mint)}
.m-done-sub{margin:14px auto 0;font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--m-dim);max-width:560px}
.m-nums{margin:0 0 18px;max-width:640px}
.m-facts{margin:0;font-size:clamp(14px,1.5vw,16px);line-height:1.7;color:var(--m-dim)}
.m-facts b{color:var(--m-ink);font-weight:600}
.m-facts i,.m-facts-tech i{font-style:normal;color:var(--m-dim2);margin:0 4px}
.m-facts-tech{margin:4px 0 0;font-family:var(--m-mono);font-size:11px;letter-spacing:.04em;color:var(--m-dim2)}
.m-num{padding:16px 10px 14px;border-radius:18px;border:1px solid var(--m-line);background:#ffffff06;backdrop-filter:blur(14px)}
.m-num b{display:block;font-size:clamp(24px,3.6vw,38px);line-height:1;letter-spacing:-.04em;font-weight:600;color:var(--m-ink);font-variant-numeric:tabular-nums}
.m-num b small{font-size:.42em;color:var(--m-dim);font-weight:500;letter-spacing:0;margin-left:4px}
.m-num span{display:block;margin-top:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--m-dim2);font-weight:600}
.m-num u{display:block;margin-top:4px;font-size:12px;color:var(--m-mint);text-decoration:none;font-weight:500}
.m-num u.n{color:var(--m-dim)}
.m-listen{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:22px auto 0}
.m-play{width:58px;height:58px;border-radius:50%;background:var(--m-ink);color:#1a0d16;display:grid;place-items:center;flex:none;transition:transform .35s var(--m-spring),background .2s}
.m-play:hover{transform:scale(1.06)}
.m-play svg{width:22px;height:22px;fill:currentColor}
.m-hold{position:relative;min-height:50px;padding:0 20px;border-radius:999px;border:1px solid var(--m-line);background:#ffffff08;color:var(--m-ink);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:10px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;transition:background .2s,border-color .2s,transform .25s var(--m-spring)}
.m-hold i{width:8px;height:8px;border-radius:50%;background:var(--m-blue);box-shadow:0 0 12px var(--m-blue);transition:background .2s,box-shadow .2s}
.m-hold.is-a{background:#ff98cb1a;border-color:#ff98cb66;transform:scale(.98)}
.m-hold.is-a i{background:var(--m-pink);box-shadow:0 0 12px var(--m-pink)}
.m-hold small{font-weight:500;color:var(--m-dim2);font-size:12px}
.m-chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--m-line);background:transparent;color:var(--m-dim);font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.m-chip[aria-pressed="true"]{color:var(--m-ink);border-color:#ffffff40}
.m-chip i{width:26px;height:14px;border-radius:999px;background:#ffffff1a;position:relative;transition:background .2s}
.m-chip i:after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;transition:left .2s}
.m-chip[aria-pressed="true"] i{background:var(--m-blue)}
.m-chip[aria-pressed="true"] i:after{left:14px}
.m-strip{position:relative;height:150px;margin:18px auto 0;max-width:640px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#ffffff05,#ffffff02);border:1px solid #ffffff0a;cursor:pointer}
.m-strip canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.m-strip-time{position:absolute;right:10px;bottom:6px;font-family:var(--m-mono);font-size:10px;color:var(--m-dim2)}
/* shapes and devices: two small tools under the player */
.m-shape-lab{margin:0 0 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--m-dim2);font-weight:600}
.m-shapes{display:inline-flex;max-width:100%;padding:3px;border-radius:999px;border:1px solid var(--m-line);background:#ffffff06;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.m-shapes::-webkit-scrollbar{display:none}
.m-shape{flex:none;white-space:nowrap;min-height:34px;padding:0 14px;border-radius:999px;border:0;background:transparent;color:var(--m-dim);font-size:13px;font-weight:500;display:inline-flex;align-items:center;transition:background .25s,color .25s}
.m-shape:hover{color:var(--m-ink)}
.m-shape.is-on{color:#1a0d16;background:var(--m-ink);font-weight:600}
.m-shape.is-busy{color:var(--m-ink)}
.m-shape.is-busy span{animation:m-shape-pulse 1s ease-in-out infinite}
@keyframes m-shape-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.m-shape-hint{margin:10px auto 0;font-size:13px;line-height:1.5;color:var(--m-dim);max-width:520px;min-height:1.5em}
.m-shape-hint b{color:var(--m-ink);font-weight:600}
.m-devs{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.m-dev{width:42px;height:42px;border-radius:50%;border:1px solid var(--m-line);background:#ffffff06;color:var(--m-dim);display:grid;place-items:center;transition:background .25s,color .25s,border-color .25s,transform .35s var(--m-spring)}
.m-dev svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.m-dev:hover{color:var(--m-ink);background:#ffffff10;transform:translateY(-1px)}
.m-dev.is-on{color:#1a0d16;background:var(--m-mint);border-color:transparent}
.m-verdict{margin:12px auto 0;max-width:520px;padding:12px 14px 12px 16px;border-radius:16px;border:1px solid var(--m-line);background:#ffffff06;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:13px;line-height:1.45;color:var(--m-ink);text-align:left}
.m-verdict span{flex:1 1 220px}
.m-fix{flex:none;min-height:36px;padding:0 16px;border-radius:999px;border:1px solid #ff98cb66;background:#ff98cb1a;color:var(--m-ink);font-size:13px;font-weight:600;transition:background .25s}
.m-fix:hover{background:#ff98cb33}
.m-fix.is-on{background:transparent;border-color:var(--m-line);color:var(--m-dim);font-weight:500}
.m-dev-fine{margin:10px 0 0;font-size:11px;color:var(--m-dim2)}
@media (max-width:640px){.m-devs{gap:4px}.m-dev{width:40px;height:40px}.m-dev svg{width:18px;height:18px}}
.m-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px auto 0}
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 26px;border-radius:999px;border:1px solid var(--m-line);background:#ffffff08;color:var(--m-ink);font-size:15px;font-weight:600;text-decoration:none;transition:transform .35s var(--m-spring),background .2s,border-color .2s}
.m-btn:hover{transform:translateY(-1px);background:#ffffff10}
.m-btn.p{background:linear-gradient(120deg,#ffb7dc,var(--m-pink) 55%,#ff8fc4);color:#1a0d16;border-color:transparent;box-shadow:0 14px 44px #ff98cb33}
.m-btn.p:hover{box-shadow:0 20px 60px #ff98cb55}
.m-btn.q{background:transparent;color:var(--m-dim);font-weight:500}
.m-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-btn[disabled]{opacity:.55}
.m-done-fine{margin:16px 0 0;font-size:12px;color:var(--m-dim2)}
.m-done-fine a{color:var(--m-dim);text-decoration:underline;text-underline-offset:4px}

/* ---------- below the fold ---------- */
.m-below{padding:70px 0 40px}
.m-h2{font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.045em;font-weight:600;margin:0 0 12px;color:var(--m-ink);max-width:640px}
.m-lead{margin:0 0 34px;font-size:16px;line-height:1.7;max-width:520px}
.m-chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--m-line);border-bottom:1px solid var(--m-line)}
.m-chain div{padding:26px 18px 26px 0;border-right:1px solid var(--m-line);min-width:0}
.m-chain div:nth-child(4n){border-right:0}
.m-chain div:nth-child(-n+4){border-bottom:1px solid var(--m-line)}
@media(min-width:901px){.m-chain div:not(:nth-child(4n+1)){padding-left:18px}}
@media(max-width:900px){.m-chain{grid-template-columns:repeat(2,minmax(0,1fr))}.m-chain div{padding:22px 14px 22px 0}.m-chain div:nth-child(4n){border-right:1px solid var(--m-line)}.m-chain div:nth-child(2n){border-right:0}.m-chain div:nth-child(-n+6){border-bottom:1px solid var(--m-line)}.m-chain div:nth-child(n+7){border-bottom:0}.m-chain div:nth-child(2n+1){padding-left:0}.m-chain div:nth-child(2n){padding-left:14px}}
.m-chain i{display:block;width:10px;height:10px;border-radius:50%;margin-bottom:16px}
.m-chain h3{font-size:16px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px;color:var(--m-ink)}
.m-chain p{margin:0;font-size:13.5px;line-height:1.6}
.m-two{display:grid;gap:14px;margin-top:60px}
@media(min-width:760px){.m-two{grid-template-columns:1fr 1fr;gap:40px}}
.m-two h3{font-size:22px;font-weight:600;letter-spacing:-.03em;margin:0 0 8px;color:var(--m-ink)}
.m-two p{margin:0;font-size:15px;line-height:1.7;max-width:440px}
.m-faq{margin-top:60px;max-width:720px}
.m-faq details{border-top:1px solid var(--m-line)}
.m-faq details:last-child{border-bottom:1px solid var(--m-line)}
.m-faq summary{min-height:62px;padding:19px 34px 19px 0;font-size:16px;font-weight:500;color:var(--m-ink);list-style:none;position:relative;line-height:1.5;cursor:pointer}
.m-faq summary::-webkit-details-marker{display:none}
.m-faq summary:after{content:"";position:absolute;right:6px;top:26px;width:10px;height:10px;border-right:1.5px solid var(--m-dim);border-bottom:1.5px solid var(--m-dim);transform:rotate(45deg);transition:transform .3s var(--m-ease)}
.m-faq details[open] summary:after{transform:rotate(225deg);top:30px}
.m-faq p{margin:0 0 20px;font-size:14.5px;line-height:1.75}
.m-cta{margin:70px 0 30px;padding:34px 28px;border-radius:26px;border:1px solid var(--m-line);background:radial-gradient(ellipse at 20% 0,#ff98cb14,transparent 60%),radial-gradient(ellipse at 90% 100%,#7fd8ff10,transparent 55%),#ffffff04;display:grid;gap:18px}
@media(min-width:760px){.m-cta{grid-template-columns:1fr auto;align-items:center;padding:40px 44px}}
.m-cta h3{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.035em;margin:0 0 8px;color:var(--m-ink)}
.m-cta p{margin:0;font-size:15px;max-width:520px}
.m-cta .m-btn{white-space:nowrap}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.m-state{transition:opacity .2s}.m-cook-say span{animation:none;opacity:1;transform:none}.m-drop:hover{transform:none}}

/* choose step */
.m-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:26px auto 0;max-width:720px}
@media(max-width:560px){.m-cards{grid-template-columns:1fr;max-width:380px}}
.m-card{position:relative;display:grid;gap:4px;justify-items:center;padding:18px 12px 16px;border-radius:20px;border:1px solid var(--m-line);background:#ffffff06;backdrop-filter:blur(14px);color:var(--m-dim);text-align:center;transition:border-color .25s,background .25s,transform .35s var(--m-spring)}
@media(max-width:560px){.m-card{grid-template-columns:auto 1fr;grid-template-rows:auto auto;justify-items:start;text-align:left;column-gap:14px;padding:12px 14px}.m-card .m-card-play{grid-row:1/4}.m-card small{grid-column:2;justify-self:start;margin-top:2px}}
.m-card:hover{border-color:#ffffff33}
.m-card[aria-pressed="true"]{border-color:var(--m-accent);background:color-mix(in srgb,var(--m-accent) 10%,transparent);box-shadow:0 0 0 1px var(--m-accent) inset}
.m-card b{color:var(--m-ink);font-size:16px;font-weight:600;letter-spacing:-.02em;margin-top:8px}
.m-card-sub{font-size:12px;color:var(--m-dim2);line-height:1.4}
.m-card small{margin-top:6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--m-mint);padding:3px 8px;border-radius:999px;background:#9ef0c31a}
.m-card-play{width:50px;height:50px;border-radius:50%;background:var(--m-ink);color:#1a0d16;display:grid;place-items:center;transition:transform .3s var(--m-spring),background .2s;cursor:pointer}
.m-card-play svg{width:18px;height:18px;fill:currentColor}
.m-card-play:hover{transform:scale(1.08)}
.m-card-play.is-wait{background:#ffffff22;color:transparent;position:relative}
.m-card-play.is-wait:after{content:"";position:absolute;inset:14px;border:2px solid #ffffff55;border-top-color:transparent;border-radius:50%;animation:m-spin .9s linear infinite}
@keyframes m-spin{to{transform:rotate(360deg)}}
.m-card-play.is-playing{background:var(--m-accent)}
.m-choose-rows{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:20px auto 0}
.m-row{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--m-dim2);font-weight:600}
.m-seg-s{flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;border:1px solid var(--m-line);border-radius:999px}
.m-seg-s button{flex:none;min-height:34px;padding:4px 13px;border:0;border-radius:999px;font-size:13px;text-transform:none;letter-spacing:0;font-weight:500}
.m-seg-s button[aria-pressed="true"]{background:#ffffff14;color:var(--m-ink)}

/* visual report */
.m-rep-compare{position:relative;height:220px;border-radius:18px;border:1px solid var(--m-line);background:#0d0a13;overflow:hidden;margin-bottom:14px}
@media(max-width:600px){.m-rep-compare{height:170px}}
.m-rep-compare canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.m-rep-legend{position:absolute;right:12px;top:10px;display:flex;gap:14px;font-size:11px;color:var(--m-dim);font-weight:500}
.m-rep-legend i{display:inline-block;width:14px;height:0;border-top:2px dashed #ffffff77;vertical-align:middle;margin-right:6px}
.m-rep-legend i.b{border-top:2px solid var(--m-blue)}
.m-rep{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.m-rep{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.m-rep{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.m-rep{grid-template-columns:1fr}}
.m-rep-card{padding:16px 16px 14px;border-radius:18px;border:1px solid var(--m-line);background:#ffffff05;min-width:0}
.m-rep-card h3{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px;color:var(--m-ink)}
.m-rep-card h3 i{width:8px;height:8px;border-radius:50%;flex:none}
.m-rep-card canvas{display:block;width:100%;height:84px;border-radius:10px;background:#0d0a13}
.m-rep-card p{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--m-dim)}
.m-rep-card p b{color:var(--m-ink);font-weight:500}
/* plans strip in the drop state */
.m-plans{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;margin:18px auto 0;font-size:12px;color:var(--m-dim2);max-width:560px}
.m-plans b{color:var(--m-dim);font-weight:600;margin-right:4px}
.m-plans i{width:4px;height:4px;border-radius:50%;background:var(--m-dim2)}
.m-plans.is-in{color:var(--m-dim)}
.m-plans.is-in b{color:var(--m-mint)}
/* the gate: sign in, code, premium */
.m-gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:#0b0910cc;backdrop-filter:blur(14px)}
.m-gate-card{position:relative;width:min(440px,100%);padding:30px 26px 24px;border-radius:24px;border:1px solid var(--m-line);background:#16111f;box-shadow:0 40px 100px #000a;text-align:left;color:var(--m-ink)}
.m-gate-x{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;background:#ffffff0a;color:var(--m-dim);font-size:20px;line-height:1;border:0}
.m-gate-eyebrow{margin:0 0 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--m-pink);font-weight:600}
.m-gate-card h3{margin:0;font-size:22px;line-height:1.15;letter-spacing:-.02em;font-weight:600;color:var(--m-ink)}
.m-gate-p{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--m-dim)}
.m-gate-p b{color:var(--m-ink);font-weight:600}
.m-gate-form{display:grid;gap:10px;margin-top:18px}
.m-gate-form input[type=text],.m-gate-form input[type=email]{min-height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--m-line);background:#ffffff08;color:var(--m-ink);font:inherit;font-size:15px}
.m-gate-form input:focus{outline:2px solid var(--m-pink);outline-offset:1px}
.m-gate-code{text-align:center;letter-spacing:.3em;font-size:24px!important;font-family:var(--m-mono)}
.m-gate-check{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.45;color:var(--m-dim)}
.m-gate-check input{margin-top:3px}
.m-gate-check a{color:var(--m-ink);text-decoration:underline;text-underline-offset:3px}
.m-gate-form .m-btn{justify-content:center;width:100%}
.m-gate-err{min-height:1em;font-size:13px;color:#ff9a9a}
.m-gate-err:empty{display:none}
.m-gate-fine{margin:14px 0 0;font-size:12px;color:var(--m-dim2)}
.m-gate-back{margin-top:12px;background:none;border:0;color:var(--m-dim);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.m-gate-list{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;color:var(--m-ink)}
.m-gate-list li{padding-left:22px;position:relative}
.m-gate-list li:before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:var(--m-mint);box-shadow:0 0 10px var(--m-mint)}
.m-gate-price{margin:18px 0 12px;font-size:15px;color:var(--m-dim)}
.m-gate-price b{font-size:30px;color:var(--m-ink);letter-spacing:-.03em;margin-right:6px}
#m-gate-upsell .m-btn{width:100%;justify-content:center}
/* pricing below the fold */
.m-pricing{margin-top:56px}
.m-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:22px}
.m-plan{padding:26px 24px;border-radius:22px;border:1px solid var(--m-line);background:#ffffff05}
.m-plan.is-hot{border-color:#ff98cb55;background:linear-gradient(160deg,#ff98cb14,#ffffff05 60%)}
.m-plan-name{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--m-dim2);font-weight:600}
.m-plan-price{margin:10px 0 0;font-size:40px;line-height:1;letter-spacing:-.04em;font-weight:600;color:var(--m-ink)}
.m-plan-price small{font-size:14px;letter-spacing:0;color:var(--m-dim);font-weight:500}
.m-plan ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:9px;font-size:14px;color:var(--m-ink)}
.m-plan li{padding-left:20px;position:relative}
.m-plan li:before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--m-mint)}
.m-plan .m-btn{margin-top:20px;width:100%;justify-content:center}
.m-plan-fine{margin:14px 0 0;font-size:12px;color:var(--m-dim2)}
/* locked drop state */
.m-locked{margin:26px auto 0;max-width:520px;padding:22px 24px;border-radius:22px;border:1px solid #ff98cb44;background:#ff98cb0f}
.m-locked h3{margin:0;font-size:20px;color:var(--m-ink);font-weight:600}
.m-locked p{margin:8px 0 0;font-size:14px;color:var(--m-dim)}
.m-locked .m-btn{margin-top:14px}
/* a premium-only control on the free plan */
.m-shape.is-lock,.m-dev.is-lock{opacity:.55}
.m-toast{position:fixed;left:50%;bottom:24px;z-index:70;transform:translate(-50%,20px);opacity:0;max-width:min(520px,calc(100% - 32px));padding:14px 20px;border-radius:16px;border:1px solid #9ef0c355;background:#16111ff2;color:var(--m-ink);font-size:14px;box-shadow:0 20px 60px #000a;transition:opacity .35s,transform .45s var(--m-spring)}
.m-toast.is-on{opacity:1;transform:translate(-50%,0)}
#m-saved a{color:var(--m-mint);text-decoration:underline;text-underline-offset:3px}
.m-gate-go{display:flex;width:100%;justify-content:center;margin-top:18px}
/* premium */
.m-crown-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:999px;border:1px solid rgba(242,193,78,.4);background:rgba(242,193,78,.08);color:#f2c14e;font-size:.78em;font-weight:600;letter-spacing:.02em;vertical-align:.12em;white-space:nowrap}
.m-plans .spinz-crown,#m-saved .spinz-crown{margin-right:5px;font-size:1.05em}
.m-dim{color:var(--m-dim,#8a8a96)}
/* the done screen in three zones: listen, shape it, take it home */
.m-zone{position:relative;margin:26px auto 0;max-width:640px;padding:26px 22px 22px;border-radius:26px;border:1px solid #ffffff0f;background:linear-gradient(180deg,#ffffff06,#ffffff02);text-align:center}
.m-zone-lab{position:absolute;top:-9px;left:22px;padding:2px 10px;border-radius:999px;background:#100a10;border:1px solid #ffffff14;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--m-dim2);font-weight:600}
.m-zone .m-listen{margin-top:0;gap:8px}.m-zone .m-chip{padding:0 12px}.m-zone .m-hold{padding:0 16px}
/* on a phone the compare pill takes the row and the two helpers share the next one, instead of one stack of four */
@media(max-width:600px){.m-listen .m-hold{width:100%;justify-content:center}.m-listen .m-chip{flex:1 1 0;min-width:0;justify-content:center;padding:0 10px;font-size:11.5px;white-space:nowrap}.m-listen .m-hold small{font-size:11.5px}}
.m-zone .m-strip{margin-top:16px}
.m-zone-sub{margin-top:20px;padding-top:18px;border-top:1px solid #ffffff0a}
.m-zone-title{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--m-dim)}
.m-shape-preview{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;max-width:520px;margin:0 auto 14px;text-align:left}
.m-shape-preview .m-shape-hint{margin:0;max-width:none}
#m-shape-curve{width:150px;height:48px;display:block;border-radius:10px;background:#ffffff05}
#m-shape-curve .ax{stroke:#ffffff14;stroke-width:1;fill:none}
#m-shape-curve .zero{stroke:#ffffff22;stroke-width:1;stroke-dasharray:3 3;fill:none}
#m-shape-curve .cv{fill:none;stroke:var(--m-pink,#f0a6c8);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:d .35s}
#m-shape-curve .cv.side{stroke:#b7a4ff;stroke-dasharray:4 3}
#m-shape-curve .fill{fill:var(--m-pink,#f0a6c8);opacity:.12}
#m-shape-curve .harm{fill:#f0a6c8;opacity:.16}
#m-shape-curve .tick{fill:#ffffff40;font-size:8px;font-family:var(--m-mono)}
.m-zone-shape .m-shapes{margin-top:2px}
@media(max-width:600px){.m-strip{height:112px;border-radius:14px}.m-zone{padding:22px 14px 18px;border-radius:20px}.m-shape-preview{grid-template-columns:1fr;gap:8px;text-align:center}#m-shape-curve{width:100%;max-width:260px;height:56px;margin:0 auto}.m-shape-preview .m-shape-hint{text-align:center}}

/* ---- round 19: the example in the hero, three steps, the plans that sell, the plans sheet ---- */
.m-demo{margin:22px auto 0;max-width:560px}
.m-demo-open{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px 8px 12px;border-radius:999px;border:1px solid var(--m-line);background:#ffffff08;color:var(--m-dim);font-size:13px;font-weight:500;transition:background .2s,color .2s,border-color .2s,transform .35s var(--m-spring)}
.m-demo-open svg{width:14px;height:14px;fill:currentColor}
.m-demo-open:hover{background:#ffffff12;color:var(--m-ink);border-color:#ffffff2a;transform:translateY(-1px)}
.m-demo-player{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px 12px;padding:10px 14px 10px 10px;border-radius:999px;border:1px solid var(--m-line);background:#ffffff08;backdrop-filter:blur(14px)}
.m-demo-play{width:44px;height:44px}
.m-demo-play svg{width:18px;height:18px}
.m-demo-seg button{min-height:34px;padding:5px 14px;font-size:12px}
.m-demo-seg button[aria-pressed=true]{background:var(--m-ink);color:#1a0d16;border-color:transparent}
.m-demo-bar{position:relative;height:6px;border-radius:999px;background:#ffffff14;cursor:pointer;overflow:hidden;min-width:80px}
.m-demo-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--m-pink),var(--m-blue));transition:width .12s linear}
.m-demo-note{grid-column:1/-1;margin:0;font-size:11.5px;color:var(--m-dim2);text-align:left;padding-left:4px}
@media(max-width:520px){.m-demo-player{grid-template-columns:auto 1fr;border-radius:22px}.m-demo-bar{grid-column:1/-1}}
.m-row-hint{flex-basis:100%;margin:0;font-size:12px;color:var(--m-dim2);line-height:1.5}
.m-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.m-steps div{padding:22px 20px;border-radius:20px;border:1px solid var(--m-line);background:#ffffff05}
.m-steps i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(120deg,#ffb7dc,var(--m-pink) 55%,#ff8fc4);color:#1a0d16;font-style:normal;font-weight:700;font-size:14px;margin-bottom:14px}
.m-steps h3{margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--m-ink)}
.m-steps p{margin:0;font-size:14px;line-height:1.6;color:var(--m-dim)}
@media(max-width:640px){.m-steps{grid-template-columns:1fr}}
#how{margin-top:60px}
.m-eyebrow{margin:0 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-pink);font-weight:600}
.m-pricing{margin-top:70px;text-align:center}
.m-pricing .m-h2,.m-pricing .m-lead{margin-left:auto;margin-right:auto}
.m-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:30px;max-width:1040px;margin-left:auto;margin-right:auto;text-align:left}
.m-plan{position:relative;display:flex;flex-direction:column;padding:28px 26px 24px;border-radius:26px;border:1px solid var(--m-line);background:#ffffff05;overflow:hidden;transition:transform .45s var(--m-spring),box-shadow .45s}
.m-plan:hover{transform:translateY(-4px)}
.m-plan.is-hot{border-color:transparent;background:linear-gradient(160deg,#241628,#160f1e 55%,#131a26);box-shadow:0 30px 90px #ff98cb22,0 0 0 1px #ff98cb33}
.m-plan.is-hot:hover{box-shadow:0 34px 100px #ff98cb33,0 0 0 1px #ff98cb55}
.m-plan-glow{position:absolute;inset:-1px;border-radius:27px;padding:1px;background:conic-gradient(from var(--m-spin,0deg),#ff98cb,#c9a7ff,#7fd8ff,#ff98cb);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:m-spin 6s linear infinite}
@property --m-spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes m-spin{to{--m-spin:360deg}}
.m-plan.is-hot:before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#ff98cb2e,transparent 65%);pointer-events:none}
.m-plan-name{position:relative;display:flex;align-items:center;gap:6px;margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-dim2);font-weight:600}
.m-plan.is-hot .m-plan-name{color:#f2c14e}
.m-plan-name .spinz-crown{width:16px;height:16px;fill:currentColor}
.m-plan-price{position:relative;margin:14px 0 0;font-size:52px;line-height:1;letter-spacing:-.05em;font-weight:600;color:var(--m-ink)}
.m-plan-price small{font-size:15px;letter-spacing:0;font-weight:500;color:var(--m-dim)}
.m-plan.is-hot .m-plan-price{background:linear-gradient(120deg,#fff,#ffd3ea 55%,#c9e9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-plan-tag{position:relative;margin:8px 0 0;font-size:14px;color:var(--m-dim);line-height:1.5}
.m-plan.is-hot .m-plan-tag{color:#ffd3ea}
.m-plan-list{position:relative;margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px;font-size:14px;line-height:1.45;color:var(--m-ink)}
.m-plan-list li{display:flex;align-items:center;gap:12px}
.m-plan-list i{flex:none;display:grid;place-items:center;min-width:44px;height:28px;padding:0 8px;border-radius:999px;border:1px solid var(--m-line);background:#ffffff08;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--m-dim)}
.m-plan.is-hot .m-plan-list i{border-color:#ff98cb44;background:#ff98cb14;color:#ffd3ea}
.m-plan-cta{position:relative;margin-top:24px;width:100%}
.m-plan-fine{position:relative;margin:12px 0 0;font-size:12px;color:var(--m-dim2);text-align:center}
.m-plan-anchor{margin:22px auto 0;max-width:520px;font-size:13.5px;line-height:1.6;color:var(--m-dim)}
@media(max-width:640px){.m-plan-price{font-size:44px}}
/* the sheet: the same two cards inside the gate */
.m-gate-card.is-wide{width:min(820px,100%);padding:30px 28px 24px}
.m-gate-card.is-wide h3{font-size:26px}
.m-gate-grid{margin-top:20px}
.m-gate-grid .m-plan-grid{margin-top:0;max-width:none}
.m-gate-grid .m-plan{padding:22px 20px 20px}
.m-gate-grid .m-plan-price{font-size:42px}
.m-gate-grid .m-plan:hover{transform:none}
@media(max-width:640px){.m-gate{align-items:end;padding:0}.m-gate-card.is-wide{width:100%;max-height:92dvh;overflow:auto;border-radius:24px 24px 0 0;padding:24px 18px 28px}.m-gate-card.is-wide h3{font-size:21px}.m-gate-grid .m-plan-list{gap:8px}}
@media(prefers-reduced-motion:reduce){.m-plan-glow{animation:none}.m-plan:hover{transform:none}}
.m-plan-list li{padding-left:0}.m-plan-list li:before{display:none}

.m-plan-badge{position:absolute;right:18px;top:18px;padding:5px 11px;border-radius:999px;background:linear-gradient(120deg,#ffb7dc,var(--m-pink) 55%,#ff8fc4);color:#1a0d16;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 8px 24px #ff98cb44}
.m-plan.is-hot .m-plan-name .spinz-crown{animation:m-crown 3.2s ease-in-out infinite}
@keyframes m-crown{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-2px) rotate(6deg)}}
@media(min-width:700px){.m-plan.is-hot{transform:scale(1.03)}.m-plan.is-hot:hover{transform:scale(1.03) translateY(-4px)}.m-gate-grid .m-plan.is-hot,.m-gate-grid .m-plan.is-hot:hover{transform:none}}
@media(max-width:640px){.m-gate-grid .m-plan{padding:18px 16px 16px}.m-gate-grid .m-plan-price{font-size:36px;margin-top:8px}.m-gate-grid .m-plan-list{margin-top:12px;font-size:13.5px}.m-gate-grid .m-plan-list i{min-width:38px;height:24px;font-size:10.5px}.m-gate-grid .m-plan-cta{margin-top:16px;min-height:48px}.m-gate-card.is-wide .m-gate-p{font-size:13.5px}.m-plan-badge{right:14px;top:14px}}
@media(prefers-reduced-motion:reduce){.m-plan.is-hot .m-plan-name .spinz-crown{animation:none}}

/* Honest proof immediately below the upload action. Compact enough to keep the tool first. */
.m-trust{width:min(920px,100%);margin:20px auto 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--m-line);border-radius:18px;background:#ffffff05;overflow:hidden;text-align:left}
.m-trust li{min-width:0;padding:14px 16px;border-right:1px solid var(--m-line)}
.m-trust li:last-child{border-right:0}
.m-trust b,.m-trust span{display:block}
.m-trust b{font-size:12px;color:var(--m-ink);line-height:1.35}
.m-trust span{margin-top:3px;font-size:10.5px;line-height:1.4;color:var(--m-dim2)}
@media(max-width:760px){.m-trust{grid-template-columns:repeat(2,minmax(0,1fr));max-width:540px}.m-trust li:nth-child(2){border-right:0}.m-trust li:nth-child(-n+2){border-bottom:1px solid var(--m-line)}}
@media(max-width:340px){.m-trust{grid-template-columns:1fr}.m-trust li{border-right:0;border-bottom:1px solid var(--m-line)}.m-trust li:last-child{border-bottom:0}.m-trust li:nth-child(2){border-bottom:1px solid var(--m-line)}}
/* round 20: the example is the same two-lane picture as the finished screen; the human line under the stages; the premium CTA */
.m-demo{max-width:760px}
.m-demo-player{display:block;padding:14px 14px 12px;border-radius:24px}
.m-demo-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-bottom:12px}
.m-demo-note{grid-column:auto;flex:1;min-width:160px;text-align:left;font-size:12px;color:var(--m-dim);padding-left:2px}
.m-demo-strip{height:150px;margin:0;max-width:none;width:100%}
.m-demo-credit{margin:10px 0 0;font-size:11px;color:var(--m-dim2);text-align:left;line-height:1.5}
@media(max-width:520px){.m-demo-player{grid-template-columns:none;border-radius:20px;padding:12px}.m-demo-strip{height:112px}.m-demo-note{flex-basis:100%}}
.m-chain-plus{margin:18px 0 0;font-size:15px;font-weight:500;color:var(--m-ink);letter-spacing:-.01em}
.m-cta-premium{background:radial-gradient(ellipse at 20% 0,#ff98cb22,transparent 60%),radial-gradient(ellipse at 90% 100%,#7fd8ff14,transparent 55%),#ffffff05;border-color:#ff98cb33}
@media(min-width:700px){.m-cta{grid-template-columns:1fr auto;align-items:center}}
.m-drop-h1 em{font-size:.8em;display:inline-block}
.m-card{grid-template-rows:auto auto auto}
.m-cta-plugins{background:radial-gradient(ellipse at 20% 0,#7fd8ff1a,transparent 60%),radial-gradient(ellipse at 90% 100%,#ff98cb14,transparent 55%),#ffffff05;border-color:#7fd8ff33}
/* round 22: the headline gets its room (two lines, no shrinking), the About the audio engine block */
#s-drop>div{width:min(1140px,100%)}
.m-drop-h1{font-size:clamp(34px,7.4vw,96px)}
.m-drop-h1 em{font-size:1em;display:inline}
.m-about{margin-top:70px}
.m-about-body{max-width:640px}
.m-about-body p{margin:0 0 16px;font-size:16px;line-height:1.7;color:var(--m-dim)}
.m-about-body .m-lead{margin-bottom:16px;color:var(--m-ink)}
.m-about .m-chain{margin-top:30px}
#steps{margin-top:60px}
.m-about-body{max-width:680px}
.m-about-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px}
.m-about-stats div{padding:18px 16px;border-radius:18px;border:1px solid var(--m-line);background:linear-gradient(160deg,#ffffff07,#ffffff03)}
.m-about-stats b{display:block;font-size:30px;line-height:1;letter-spacing:-.04em;font-weight:600;background:linear-gradient(120deg,#ffb7dc,var(--m-pink) 45%,#c9a7ff 80%,#7fd8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-about-stats span{display:block;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--m-dim)}
@media(max-width:700px){.m-about-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* round 23: AudioGenie at work, the animated hook */
.m-about-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px;align-items:start}
.m-about-viz{position:relative;padding:16px 16px 14px;border-radius:24px;border:1px solid var(--m-line);background:linear-gradient(160deg,#17111f,#0f0b14 70%);box-shadow:0 30px 80px #00000066,0 0 0 1px #ff98cb14;overflow:hidden}
.m-about-viz:before{content:"";position:absolute;inset:-40% -20% auto;height:70%;background:radial-gradient(ellipse at 50% 100%,#ff98cb18,transparent 60%);pointer-events:none}
#m-genie{display:block;width:100%;height:300px;border-radius:14px;background:#0b0810}
.m-genie-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12px;color:var(--m-dim)}
.m-genie-live{display:inline-flex;align-items:center;gap:7px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;color:var(--m-ink)}
.m-genie-live i{width:7px;height:7px;border-radius:50%;background:#ff6b6b;box-shadow:0 0 0 0 #ff6b6b88;animation:m-live 1.6s ease-out infinite}
@keyframes m-live{0%{box-shadow:0 0 0 0 #ff6b6b88}100%{box-shadow:0 0 0 9px #ff6b6b00}}
.m-genie-stage{margin-left:auto;font-weight:700;font-size:13px;letter-spacing:-.01em;transition:color .4s}
.m-genie-lufs{font-family:var(--m-mono);font-size:11.5px;color:var(--m-dim2);min-width:74px;text-align:right}
.m-genie-note{margin:10px 2px 0;font-size:12.5px;line-height:1.5;color:var(--m-dim);min-height:2.6em}
.m-about .m-chain > div{transition:background .4s,box-shadow .4s}
.m-about .m-chain > div.is-live{background:linear-gradient(180deg,#ffffff0a,transparent);box-shadow:inset 0 2px 0 var(--m-pink)}
.m-about .m-chain > div.is-live h3{color:#fff}
@media(max-width:960px){.m-about-grid{grid-template-columns:1fr}.m-about-viz{order:-1}#m-genie{height:240px}}
@media(prefers-reduced-motion:reduce){.m-genie-live i{animation:none}}

/* round 24: the stage, full width; the FAQ centred like the plans */
.m-about-viz{margin:26px 0 30px;padding:16px 18px 18px;border-radius:26px}
#m-genie{height:440px;border-radius:16px}
.m-genie-head{margin-bottom:12px}
.m-genie-note{flex:1;margin:0;min-height:0;font-size:12.5px;color:var(--m-dim);text-align:center;padding:0 10px}
.m-genie-lufs{margin-left:0;font-size:13px;color:#ffd0c4;font-weight:600}
.m-about-body{max-width:760px}
@media(max-width:960px){#m-genie{height:300px}.m-genie-note{display:none}}
@media(max-width:600px){#m-genie{height:250px}.m-about-viz{padding:12px 12px 14px;border-radius:20px}.m-genie-head{margin-bottom:10px}.m-genie-lufs{font-size:12px}}
.m-faq{max-width:820px;margin-left:auto;margin-right:auto}
.m-faq .m-h2{text-align:center;max-width:none}

/* round 25: copy left, trust boxes right (2 x 2), equal columns */
.m-about-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;margin-top:8px}
.m-about-body{max-width:none}
.m-about-body p:last-child{margin-bottom:0}
.m-about-stats{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:14px;margin-top:0}
.m-about-stats div{display:flex;flex-direction:column;justify-content:center;padding:22px 22px}
.m-about-stats b{font-size:38px}
.m-about-stats span{font-size:13px;margin-top:10px}
@media(max-width:900px){.m-about-cols{grid-template-columns:1fr}.m-about-stats{margin-top:6px}}
@media(max-width:480px){.m-about-stats b{font-size:30px}}

/* ---------- match a reference (premium) ---------- */
.m-drop-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:34px auto 0}
.m-drop-row .m-drop{margin:0}
/* the second path: the same shape, the opposite colour, so the two read as a real choice and not a main and a spare */
.m-drop-ref{border:0;font:inherit;cursor:pointer;color:#07131a;background:linear-gradient(120deg,#a9e9ff,#7fd8ff 55%,#66c6f4);box-shadow:0 18px 60px #7fd8ff33,0 2px 0 #fff3 inset}
/* locked: everyone sees the door, and what it takes to open it, but only a member walks through */
.m-drop-ref.is-locked{background:#ffffff08;border:1px solid var(--m-line);color:var(--m-dim);box-shadow:none}
.m-drop-ref.is-locked:hover{background:#ffffff12;border-color:#7fd8ff55;box-shadow:0 14px 44px #7fd8ff1f}
.m-drop-ref.is-locked b{color:var(--m-ink)}
.m-drop-ref.is-locked .m-drop-ico{background:#ffffff0f}
.m-drop-ref.is-locked .m-drop-ico svg{stroke:#7fd8ff99}
.m-drop-lock{display:none;align-items:center;gap:5px;margin:0 16px 0 -6px;padding:4px 10px;border-radius:999px;background:#7fd8ff1f;color:#9fdcf7;font-size:11px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.m-drop-ref.is-locked .m-drop-lock{display:inline-flex}
.m-drop-lock svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.m-drop-ref b{color:#07131a;padding-right:18px}
.m-drop-ref .m-drop-ico{background:#07131a}
.m-drop-ref .m-drop-ico svg{stroke:#7fd8ff}
@media(max-width:720px){.m-drop-row{flex-direction:column;align-items:center}.m-drop-row .m-drop{width:min(420px,100%);justify-content:flex-start}}
/* round 33: on a phone the two doors stack, so they get phone proportions: a smaller disc, a label that
   never wraps, and the Premium chip pushed to the far edge where it reads as a lock and not as part of the name */
@media(max-width:560px){
.m-drop-row{gap:20px;margin-top:26px}
.m-drop-row .m-drop{width:min(370px,100%);gap:11px;padding-right:16px}
.m-drop-row .m-drop-ico{width:46px;height:46px;margin:3px}
.m-drop-row .m-drop-ico svg{width:20px;height:20px}
.m-drop-row .m-drop b{font-size:15.5px;padding-right:0;white-space:nowrap;letter-spacing:-.01em}
/* the lock rides the top edge as a badge instead of eating the line, so the name of the door still fits on one line */
.m-drop-ref.is-locked .m-drop-lock{position:absolute;top:-10px;right:14px;margin:0;padding:3px 10px;font-size:9.5px;background:#141019;border:1px solid #7fd8ff45;color:#a7ddf4}
.m-drop-lock svg{width:11px;height:11px}
.m-drop-fine{font-size:11.5px}
}
@media(max-width:380px){.m-drop-row .m-drop b{font-size:14.5px}}
.m-ref-x{margin-left:auto;padding:5px 12px;border-radius:999px;border:1px solid var(--m-line);background:none;color:var(--m-dim);font:inherit;font-size:12.5px;cursor:pointer}
.m-ref-x:hover{color:var(--m-ink);border-color:#ffffff33}
.m-ref-say{margin:9px 0 0;font-size:13.5px;line-height:1.6;color:var(--m-dim)}
.m-ref-say b{color:var(--m-ink);font-weight:500}
.m-ref-save{margin-top:11px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.m-ref-keep{padding:7px 14px;border-radius:999px;border:1px solid #7fd8ff55;background:#7fd8ff14;color:#bfe9ff;font:inherit;font-size:12.5px;cursor:pointer;transition:background .2s,border-color .2s}
.m-ref-keep:hover{background:#7fd8ff22;border-color:#7fd8ff88}
.m-ref-save span{font-size:12.5px;color:var(--m-dim2)}
.m-ref-saved{max-width:620px;margin:16px auto 0;text-align:center}
.m-ref-saved-lab{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--m-dim2);margin-bottom:9px}
.m-ref-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.m-ref-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:999px;border:1px solid var(--m-line);background:#ffffff08;color:var(--m-ink);font:inherit;font-size:13px;cursor:pointer;transition:background .2s,border-color .2s}
.m-ref-chip:hover{background:#7fd8ff14;border-color:#7fd8ff55}
.m-ref-chip i{font-style:normal;font-size:11.5px;color:var(--m-dim2)}
.m-ref-chip s{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;text-decoration:none;color:var(--m-dim2);font-size:14px;line-height:1}
.m-ref-chip s:hover{background:#ffffff1a;color:var(--m-ink)}
@media(max-width:560px){.m-ref-card,.m-ref-saved{margin-left:12px;margin-right:12px}}

/* ---------- reference mastering, the section above the engine (everyone sees it) ---------- */
.m-refsec{margin-top:70px}
.m-refsec .m-eyebrow{color:#7fd8ff;display:flex;align-items:center;gap:10px}
.m-refsec-tag{padding:3px 9px;border-radius:999px;background:#7fd8ff1f;color:#9fdcf7;font-size:10px;letter-spacing:.1em}
.m-refsec-tag.is-yours{background:#9ef0c31f;color:#9ef0c3}
.m-refsec-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:stretch;margin-top:26px}
.m-refsec-cols .m-about-body{max-width:none;display:flex;flex-direction:column}
.m-refsec-viz{margin:0;display:flex;flex-direction:column;background:linear-gradient(160deg,#101a22,#0b0f14 70%);box-shadow:0 30px 80px #00000066,0 0 0 1px #7fd8ff14}
.m-refsec-viz:before{background:radial-gradient(ellipse at 50% 100%,#7fd8ff18,transparent 60%)}
.m-refsec-viz .m-genie-live i{background:#7fd8ff;box-shadow:0 0 0 0 #7fd8ff88;animation-name:m-live-blue}
@keyframes m-live-blue{0%{box-shadow:0 0 0 0 #7fd8ff88}100%{box-shadow:0 0 0 9px #7fd8ff00}}
.m-refsec-viz .m-genie-lufs{color:#9fdcf7}
#m-refviz{display:block;width:100%;flex:1;min-height:330px;border-radius:16px;background:#080c10}
.m-refsec-cta{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.m-refsec-cta .m-btn{margin:0}
.m-refsec-cta p{margin:0;font-size:13px;line-height:1.5;color:var(--m-dim2);max-width:280px}
.m-refsec-cta b{color:var(--m-ink);font-weight:500}
@media(max-width:960px){.m-refsec-cols{grid-template-columns:1fr;gap:26px}.m-refsec-viz{order:-1}#m-refviz{min-height:260px}}
@media(max-width:600px){#m-refviz{min-height:220px}.m-refsec .m-eyebrow{flex-wrap:wrap}}
.m-drop-ref.is-calling,.m-ref-next .m-drop.is-calling{animation:m-call 1.3s ease-out 2}
@keyframes m-call{0%{box-shadow:0 0 0 0 #7fd8ff66}70%{box-shadow:0 0 0 18px #7fd8ff00}100%{box-shadow:0 0 0 0 #7fd8ff00}}
@media(prefers-reduced-motion:reduce){.m-drop-ref.is-calling,.m-ref-next .m-drop.is-calling{animation:none}}

/* ---------- round 34: the reference, made visible ----------
   Sri: "it should be by tonal level, capturing the spectrum shape of it and apply to this track as well. All the
   mixing tools should be analysed and apply to user... it's either not done or not visually delivered." It was
   done. This is the delivery: the same stage language as AudioGenie, so reading a record looks like the engine
   that reads it. */
.m-refread{max-width:900px;margin:22px auto 0;padding:16px 18px 18px;border-radius:26px;border:1px solid var(--m-line);background:linear-gradient(180deg,rgba(23,18,28,.93),rgba(13,10,17,.95));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 34px 100px #00000077;text-align:left}
.m-refread-head{display:flex;align-items:center;gap:10px;margin:0 4px 12px}
.m-refread-live{display:flex;align-items:center;gap:9px;min-width:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--m-dim)}
.m-refread-live i{flex:none;width:7px;height:7px;border-radius:50%;background:#ff6b6b;box-shadow:0 0 0 0 #ff6b6b88;animation:m-live 1.6s ease-out infinite}
.m-refread.is-read .m-refread-live i{background:var(--m-blue);box-shadow:0 0 0 0 #7fd8ff88}
.m-refread-live em{flex:none;font-style:normal}
.m-refread-live b{min-width:0;font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--m-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-refread-lufs{margin-left:auto;font-family:var(--m-mono);font-size:13px;font-weight:600;color:#9fdcf7;white-space:nowrap}
#m-refread{display:block;width:100%;height:300px;border-radius:16px;background:#080c10}
.m-refread-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
.m-refread-facts:empty{display:none}
.m-refread-facts.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
/* the same panel, reused at the end to show the match that was promised at the start */
.m-matchpanel{margin:22px auto 26px}
.m-matchpanel #m-matchviz{display:block;width:100%;height:300px;border-radius:16px;background:#080c10}
.m-rf{min-width:0;padding:12px 13px;border-radius:14px;border:1px solid var(--m-line);background:#ffffff05}
.m-rf span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--m-dim2)}
.m-rf b{display:block;margin-top:5px;font-size:14.5px;font-weight:600;color:var(--m-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-rf i{display:flex;align-items:flex-end;gap:3px;height:15px;margin-top:9px}
.m-rf i u{flex:1;min-height:2px;border-radius:2px;text-decoration:none;background:linear-gradient(180deg,#a9e9ff,#4aa9d8)}
.m-rf-meter{display:block;height:6px;margin-top:13px;border-radius:999px;background:#ffffff12;overflow:hidden}
.m-rf-meter u{display:block;height:100%;text-decoration:none;background:linear-gradient(90deg,#a9e9ff,#4aa9d8)}
.m-rf-wide{display:flex;flex-direction:column;justify-content:center}
.m-refread .m-ref-say{margin:15px 2px 0;font-size:14.5px;line-height:1.65;color:var(--m-dim);text-align:left}
.m-refread .m-ref-say b{color:var(--m-ink);font-weight:600}
.m-refread-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:15px}
.m-refread-foot .m-ref-save{margin:0}
.m-refread-foot .m-ref-x{margin-left:auto}
@media(max-width:860px){.m-refread-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.m-refread-facts.is-four{grid-template-columns:repeat(2,minmax(0,1fr))}.m-rf-wide{grid-column:2/4}}
@media(max-width:600px){.m-refread{margin-top:18px;padding:13px 13px 15px;border-radius:20px}#m-refread,.m-matchpanel #m-matchviz{height:215px;border-radius:14px}.m-refread-facts{grid-template-columns:1fr 1fr;gap:8px}.m-rf{padding:10px 11px}.m-rf b{font-size:13.5px}.m-rf-wide{grid-column:1/-1}.m-refread .m-ref-say{font-size:13.5px}.m-refread-live{font-size:10px;gap:7px}.m-refread-live b{font-size:12.5px}}

/* ---------- round 35: Simple and Advanced ----------
   Sri: "we don't want to be numerical, I rather prefer percentage stuff... somewhere have a button for simple and
   advanced." Simple is the default and says what changed as a share of what was there; Advanced puts the decibels
   back. The switch looks the same wherever it appears and drives the whole page. */
.m-mode{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--m-line);background:#ffffff06}
.m-mode button{min-height:34px;padding:0 15px;border:0;border-radius:999px;background:none;color:var(--m-dim2);font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:background .2s,color .2s}
.m-mode button:hover{color:var(--m-ink)}
.m-mode button.is-on{background:#ffffff16;color:var(--m-ink)}
.m-det-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.m-det-head .m-h2{margin:0}
.m-det-head .m-mode{margin-left:auto}
.m-refread-foot .m-mode{padding:2px}
.m-refread-foot .m-mode button{min-height:30px;padding:0 12px;font-size:12px}
@media(max-width:600px){.m-det-head{gap:10px}.m-det-head .m-mode{margin-left:0}.m-mode button{padding:0 13px;font-size:12px;min-height:32px}.m-refread-foot .m-mode{order:3;width:100%;justify-content:center}}

/* ---------- round 36: one path per session ----------
   Sri: "why is the pink button still there after you choose the blue one... you either choose that or choose this,
   and then the entire session creates based on that." So the two doors leave the screen the moment one is chosen,
   the reference panel becomes the step, and your own song gets its own button UNDERNEATH it. Every control has
   one job and keeps it: two file inputs, two buttons, nothing relabelled mid flow. */
.m-file-in{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.m-drop-row[hidden],.m-ref-next[hidden],.m-refread-pick[hidden],.m-ref-saved[hidden],.m-drop-fine[hidden]{display:none}
.m-refread-pick{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.m-refread-pick span{font-size:13px;color:var(--m-dim2)}
.m-refread .m-ref-saved{margin:16px auto 0;text-align:center}
/* step two: the same pink door, now where it belongs, under the record it will be matched to */
.m-ref-next{margin-top:22px;text-align:center;position:relative}
.m-ref-next:before{content:"";display:block;width:1px;height:18px;margin:0 auto 16px;background:linear-gradient(180deg,#ffffff00,#ffffff33)}
.m-ref-next .m-drop{margin:0}
.m-ref-next .m-drop-fine{margin-top:14px}
.m-refread.is-over{border-color:#7fd8ff66;box-shadow:0 34px 100px #00000077,0 0 0 2px #7fd8ff44}
@media(max-width:560px){.m-ref-next .m-drop{width:min(370px,100%);gap:11px;padding-right:16px}.m-ref-next .m-drop-ico{width:46px;height:46px;margin:3px}.m-ref-next .m-drop-ico svg{width:20px;height:20px}.m-ref-next .m-drop b{font-size:15.5px;padding-right:0;white-space:nowrap}.m-refread-pick{gap:10px}.m-refread-pick span{font-size:12px}}

/* ---------- mastering guides ---------- */
.m-guides{margin-top:72px}.m-guide-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;padding:30px 32px;border:1px solid var(--m-line);border-radius:24px;background:radial-gradient(ellipse at 100% 0,#ff98cb18,transparent 54%),#ffffff05}.m-guide-card h3{margin:0;font-size:clamp(24px,3vw,34px);line-height:1.2;letter-spacing:-.035em;color:var(--m-ink)}.m-guide-card p{max-width:720px;margin:12px 0 0;color:var(--m-dim);line-height:1.7}.m-guide-card .m-guide-label{margin:0 0 10px;color:#ff98cb;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.m-guide-card .m-btn{margin:0;white-space:nowrap}.m-guide-all{display:inline-flex;min-height:44px;align-items:center;margin-top:12px;color:var(--m-dim);font-size:13px;text-underline-offset:4px}.m-guide-all:hover{color:var(--m-ink)}
@media(max-width:760px){.m-guide-card{grid-template-columns:1fr;padding:26px 23px}.m-guide-card .m-btn{width:100%;justify-content:center;text-align:center}}

.m-guide-more{max-width:640px;margin:18px auto 0;color:var(--m-muted,#a9a0ad);font-size:14px;line-height:1.65;text-align:center}
.m-guide-more a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.m-guide-more a:hover{color:var(--m-ink,#f7f4f0)}

/* ---------- 2026-09-20 page polish: glass trust bar, section rhythm, shorter copy ---------- */
.m-trust{width:min(1100px,100%);margin:30px auto 0;border:1px solid #ffffff24;border-radius:22px;background:linear-gradient(180deg,#1c1424d9,#110c17eb);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 22px 60px #000000a6,inset 0 1px 0 #ffffff1a}
.m-trust li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-content:start;padding:18px 18px;border-right-color:#ffffff14}
.m-trust i{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ff98cb1c;border:1px solid #ff98cb38}
.m-trust i svg{width:16px;height:16px;fill:none;stroke:var(--m-pink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.m-trust b{font-size:13px;font-weight:600;letter-spacing:-.01em;text-shadow:0 1px 10px #000}
.m-trust span{margin-top:2px;font-size:12px;line-height:1.45;color:#b9b2c0;text-shadow:0 1px 8px #000}
.m-plans{margin-top:22px;font-size:13px;color:var(--m-dim)}
.m-plans b{color:var(--m-ink)}
@media(max-width:760px){.m-trust{margin-top:24px}.m-trust li{grid-template-columns:30px minmax(0,1fr);column-gap:10px;padding:14px 12px}.m-trust i{width:30px;height:30px}.m-trust b{font-size:12.5px}.m-trust span{font-size:11.5px}}
@media(max-width:340px){.m-trust li{grid-template-columns:30px minmax(0,1fr)}}

/* one rhythm for every section, with a hairline that marks where each one starts */
.m-below{padding:0 0 40px}
.m-below>section,.m-below #m-learn>section,.m-about,.m-guides,.m-faq,.m-two{position:relative;margin-top:0!important;padding-top:64px}
.m-below>section+section,.m-below>section+#m-learn,.m-below #m-learn>section+section{margin-top:72px!important}
.m-below>section:before,.m-below #m-learn>section:before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,#ff98cb8c,#c9a7ff40 22%,#ffffff12 50%,transparent)}
.m-below>.m-cta:before,.m-below #m-learn>.m-cta:before,.m-below .m-pricing:before{display:none}
.m-below .m-cta{padding-top:revert}
.m-below:has(#m-learn[hidden]) #steps{display:none}
.m-eyebrow{margin-bottom:14px}
.m-h2{margin-bottom:16px}

/* steps: big quiet numerals on one line, no boxes */
.m-steps{gap:0;margin-top:34px;border-top:1px solid var(--m-line)}
.m-steps div{padding:28px 28px 4px 0;border:0;border-radius:0;background:none;border-right:1px solid var(--m-line)}
.m-steps div+div{padding-left:28px}
.m-steps div:last-child{border-right:0}
.m-steps i{display:block;width:auto;height:auto;border-radius:0;margin:0 0 18px;font-size:44px;line-height:1;font-weight:600;letter-spacing:-.05em;background:linear-gradient(120deg,#ffb7dc,var(--m-pink) 45%,#c9a7ff 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-steps h3{font-size:19px;margin-bottom:8px}
.m-steps p{font-size:14.5px;line-height:1.65;max-width:300px}
@media(max-width:640px){.m-steps div,.m-steps div+div{padding:22px 0;border-right:0;border-bottom:1px solid var(--m-line)}.m-steps div:last-child{border-bottom:0}.m-steps i{font-size:34px;margin-bottom:12px}}

/* engine: short copy, stats in one row */
.m-about-cols{grid-template-columns:1fr;gap:26px;margin-top:0}
.m-about-cols .m-about-body{max-width:720px}
.m-about-body .m-lead{max-width:none;font-size:18px;line-height:1.6}
.m-about-stats{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto}
.m-about-stats div{padding:22px 20px}
.m-about-stats b{font-size:34px}
@media(max-width:760px){.m-about-stats{grid-template-columns:1fr 1fr}.m-about-stats b{font-size:28px}.m-about-body .m-lead{font-size:16.5px}}

/* reference: lead plus three ticks */
.m-refsec-cols{align-items:center;gap:48px}
.m-ticks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
.m-ticks li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.6;color:var(--m-dim)}
.m-ticks li:before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:#7fd8ff1f;border:1px solid #7fd8ff4d}
.m-ticks li:after{content:"";position:absolute;left:7px;top:8px;width:6px;height:9px;border-right:1.8px solid #7fd8ff;border-bottom:1.8px solid #7fd8ff;transform:rotate(40deg) translate(-1px,-2px)}
.m-refsec-cta{margin-top:26px;padding-top:0}

/* guides: header row, one lead card, two smaller cards */
.m-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.m-sec-head .m-h2{margin-bottom:0}
.m-guide-all{margin:0;min-height:44px;font-size:14px;color:var(--m-ink);text-decoration:none;gap:6px}
.m-guide-all span,.m-guide-go span{display:inline-block;transition:transform .3s var(--m-ease)}
.m-guide-all:hover span,.m-guide-card:hover .m-guide-go span{transform:translateX(4px)}
.m-guide-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:16px}
.m-guide-grid .m-guide-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:26px 28px;border-radius:22px;text-decoration:none;color:inherit;background:#ffffff06;transition:transform .35s var(--m-ease),border-color .35s,background .35s}
.m-guide-grid .m-guide-card:hover{transform:translateY(-3px);border-color:#ff98cb59;background:#ffffff0a}
.m-guide-grid .m-guide-card.is-lead{grid-row:1/3;padding:34px 34px;background:radial-gradient(ellipse at 100% 0,#ff98cb26,transparent 58%),#ffffff06}
.m-guide-grid .m-guide-card h3{font-size:18px;line-height:1.35;letter-spacing:-.02em;font-weight:600}
.m-guide-grid .m-guide-card.is-lead h3{font-size:clamp(24px,2.6vw,32px);line-height:1.18;letter-spacing:-.035em}
.m-guide-grid .m-guide-card p:not(.m-guide-label){max-width:520px;font-size:15px}
.m-guide-go{margin-top:auto;padding-top:20px;font-size:14px;font-weight:500;color:var(--m-pink)}
.m-guide-grid .m-guide-card.is-lead .m-guide-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding:13px 22px;border-radius:999px;border:1px solid #ffffff24;background:#ffffff0a;color:var(--m-ink);font-weight:600;translate:0 8px}
.m-guide-grid .m-guide-card.is-lead p:not(.m-guide-label){margin-bottom:26px}
@media(max-width:760px){.m-guide-grid{grid-template-columns:1fr;grid-template-rows:none}.m-guide-grid .m-guide-card.is-lead{grid-row:auto;padding:26px 23px}.m-guide-grid .m-guide-card{padding:22px 23px}.m-sec-head{margin-bottom:18px}}

/* FAQ: heading left, questions right */
.m-faq{max-width:none;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);gap:20px 64px;align-items:start}
.m-faq .m-h2{text-align:left}
.m-faq-head{position:sticky;top:110px}
.m-faq summary{font-size:17px}
.m-faq details p{font-size:15px;color:var(--m-dim)}
@media(max-width:860px){.m-faq{grid-template-columns:1fr}.m-faq-head{position:static}}

.m-plan{display:flex;flex-direction:column}.m-plan .m-plan-list{flex:1 1 auto}
.m-plan .m-plan-list{align-content:start}

/* ---------- 2026-09-20 content update ---------- */
.m-drop-fine:empty,.m-plans:empty{display:none}
.m-trust{margin-top:34px}
.m-about-solo{max-width:860px;margin:0 0 6px}
.m-about-solo .m-lead{font-size:17px;line-height:1.7;color:var(--m-dim);max-width:none;margin:0}
.m-steps h3{font-size:20px}
.m-refsec-cta p{font-size:14px;color:var(--m-dim)}
.m-plan-price small{margin-left:4px}
.m-plan .m-plan-list{margin-top:24px;gap:12px}
.m-plan .m-plan-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;padding-left:0}
.m-plan .m-plan-list li:before{display:none}
.m-plan .m-plan-list i{display:grid;place-items:center;min-width:0;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid #9ef0c34d;background:#9ef0c31a;color:var(--m-mint);font-size:11px;font-style:normal;line-height:1}
.m-plan .m-plan-list li.is-bonus{margin:0 -10px;padding:9px 10px;border-radius:12px;background:linear-gradient(90deg,#ffd27f1f,#ffd27f08);border:1px solid #ffd27f33}
.m-plan .m-plan-list li.is-bonus+li.is-bonus{margin-top:-4px}
.m-plan .m-plan-list li.is-bonus i{border-color:#ffd27f66;background:#ffd27f26;color:var(--m-amber)}
.m-plan .m-plan-list li.is-bonus b{color:var(--m-amber);font-weight:600}
.m-faq .m-eyebrow{margin:0 0 14px;font-size:11px;line-height:1.4;color:var(--m-pink)}
.m-pricing .m-plan-grid{align-items:start}

/* reference block: heading lives in the left column so text and visual centre on each other */
.m-refsec-cols{margin-top:0;align-items:center}
.m-refsec-cols .m-about-body{display:block}
.m-refsec-cols .m-h2{max-width:none;margin-bottom:20px}
.m-refsec-cols .m-lead{max-width:520px}
.m-refsec-viz{margin:0}
@media(max-width:960px){.m-refsec-viz{order:0;margin-top:6px}}
.m-refsec-cols .m-about-body .m-eyebrow{margin:0 0 14px;font-size:11px;line-height:1.4;color:#7fd8ff}

/* ---------- 2026-09-20 visual hooks: step art, stage icons, studio photo, bonus tiles ---------- */
.m-steps{border-top:0;gap:16px;margin-top:30px}
.m-steps div,.m-steps div+div{padding:0 0 26px;border:1px solid var(--m-line);border-radius:22px;background:#ffffff05;overflow:hidden;transition:transform .4s var(--m-ease),border-color .4s}
.m-steps div:last-child{border-right:1px solid var(--m-line)}
.m-steps div:hover{transform:translateY(-4px);border-color:#ff98cb4d}
.m-steps i,.m-steps h3,.m-steps p{margin-left:24px;margin-right:24px}
.m-steps i{font-size:15px;letter-spacing:.08em;margin-bottom:8px}
.m-step-art{display:block;height:150px;margin-bottom:22px;background:radial-gradient(ellipse at 50% 120%,#ff98cb3d,transparent 65%),linear-gradient(180deg,#1b1322,#120d18);border-bottom:1px solid var(--m-line)}
.m-step-art svg{display:block;width:100%;height:100%;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.a1 .tray{stroke:#ffffff2e;stroke-dasharray:5 6}
.a1 .chip rect{fill:#ff98cb24;stroke:var(--m-pink)}.a1 .chip path{stroke:#ffd0e8}
.a1 .chip{animation:m-art-drop 3.2s var(--m-ease) infinite}
.a2 .wave{stroke:url(#x);stroke:var(--m-pink);stroke-dasharray:420;animation:m-art-wave 3.6s linear infinite}
.a2 .dots circle{fill:#ffffff24;stroke:none;animation:m-art-dot 3.6s linear infinite}
.a2 .dots circle:nth-child(1){fill:#ff98cb}.a2 .dots circle:nth-child(2){animation-delay:.4s}.a2 .dots circle:nth-child(3){animation-delay:.8s}.a2 .dots circle:nth-child(4){animation-delay:1.2s}.a2 .dots circle:nth-child(5){animation-delay:1.6s}.a2 .dots circle:nth-child(6){animation-delay:2s}.a2 .dots circle:nth-child(7){animation-delay:2.4s}.a2 .dots circle:nth-child(8){animation-delay:2.8s}
.a3 .bars rect{fill:#c9a7ff;stroke:none;opacity:.85;transform-origin:50% 86px;animation:m-art-bar 1.8s ease-in-out infinite alternate}
.a3 .bars rect:nth-child(2n){animation-delay:.3s;fill:#ff98cb}.a3 .bars rect:nth-child(3n){animation-delay:.6s}
.a3 .dl circle{fill:#9ef0c31f;stroke:#9ef0c3}.a3 .dl path{stroke:#9ef0c3}
@keyframes m-art-drop{0%{transform:translateY(-16px);opacity:0}25%{opacity:1}60%,85%{transform:translateY(12px);opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes m-art-wave{from{stroke-dashoffset:840}to{stroke-dashoffset:0}}
@keyframes m-art-dot{0%,100%{fill:#ffffff24}10%,30%{fill:#ff98cb}}
@keyframes m-art-bar{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.m-step-art *{animation:none!important}}
@media(max-width:640px){.m-steps div,.m-steps div+div{padding:0 0 22px;border:1px solid var(--m-line)}.m-steps div:last-child{border-bottom:1px solid var(--m-line)}.m-step-art{height:120px;margin-bottom:18px}.m-steps i{font-size:14px;margin-bottom:6px}}

.m-chain i.m-chain-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;margin-bottom:16px;background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 38%,transparent)}
.m-chain-ico svg{width:20px;height:20px;fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.m-about-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center;margin:4px 0 34px}
.m-about-photo{position:relative;margin:0;height:260px;border-radius:24px;overflow:hidden;border:1px solid #ffffff1f;box-shadow:0 30px 80px #00000080}
.m-about-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.m-about-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 40%,#100c15b3),radial-gradient(ellipse at 0 100%,#ff98cb40,transparent 60%)}
.m-about-split .m-about-solo{margin:0}
@media(max-width:860px){.m-about-split{grid-template-columns:1fr;gap:22px}.m-about-photo{height:200px}}

.m-bonus{list-style:none;margin:34px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1040px;text-align:left}
.m-bonus a{position:relative;display:block;border-radius:18px;overflow:hidden;border:1px solid #ffd27f40;text-decoration:none;color:var(--m-ink);transition:transform .4s var(--m-ease),border-color .4s}
.m-bonus a:hover{transform:translateY(-4px);border-color:#ffd27f99}
.m-bonus img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.m-bonus span{display:block;padding:14px 16px 16px;font-size:14px;line-height:1.4;font-weight:500;background:#16101c}
.m-bonus b{display:block;margin-bottom:3px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-amber);font-weight:600}
@media(max-width:760px){.m-bonus{grid-template-columns:1fr;max-width:420px}}

/* caption lines under the visuals fade between messages */
.m-genie-note{transition:opacity .35s ease,transform .35s ease}
.m-genie-note.is-out{opacity:0;transform:translateY(4px)}
@media(prefers-reduced-motion:reduce){.m-genie-note{transition:none}}

/* ---------- plans: equal cards, buttons on one line, bonus rows carry the product art ---------- */
.m-pricing .m-plan-grid{align-items:stretch}
.m-plan .m-plan-cta{margin-top:28px}
.m-plan .m-plan-list li.is-bonus{display:block;margin:0;padding:0;border:0;background:none}
.m-plan .m-plan-list li.is-bonus:first-of-type,.m-plan .m-plan-list li:not(.is-bonus)+li.is-bonus{margin-top:10px;padding-top:18px;border-top:1px solid #ffd27f33;border-radius:0}
.m-plan .m-plan-list li.is-bonus+li.is-bonus{margin-top:0}
.m-plan .m-plan-list li.is-bonus a{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center;padding:8px;border-radius:14px;border:1px solid #ffd27f2e;background:linear-gradient(90deg,#ffd27f17,#ffd27f05);color:var(--m-ink);text-decoration:none;transition:transform .35s var(--m-ease),border-color .35s,background .35s}
.m-plan .m-plan-list li.is-bonus a:hover{transform:translateX(3px);border-color:#ffd27f80;background:linear-gradient(90deg,#ffd27f26,#ffd27f0a)}
.m-plan .m-plan-list li.is-bonus img{display:block;width:84px;height:56px;border-radius:9px;object-fit:cover;object-position:82% 50%;border:1px solid #ffffff1f}
.m-plan .m-plan-list li.is-bonus span{font-size:13.5px;line-height:1.35}
.m-plan .m-plan-list li.is-bonus b{display:block;margin-bottom:2px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-amber);font-weight:600}
.m-plan .m-plan-list li.is-bonus img{object-position:50% 50%}
/* desktop: Free and Monthly stack on the left, Annual stands full height on the right */
@media(min-width:861px){
.m-pricing .m-plan-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:auto 1fr;gap:18px;max-width:900px;margin-left:auto;margin-right:auto}
.m-pricing .m-plan[data-plan-card="free"]{grid-column:1;grid-row:1}
.m-pricing .m-plan[data-plan-card="premium-monthly"]{grid-column:1;grid-row:2}
.m-pricing .m-plan[data-plan-card="premium-annual"]{grid-column:2;grid-row:1/3}
.m-pricing .m-plan[data-plan-card="free"] .m-plan-list{grid-template-columns:1fr 1fr;column-gap:14px}
}
@media(min-width:861px){
.m-pricing .m-plan .m-plan-list li.is-bonus a{grid-template-columns:120px minmax(0,1fr);gap:18px;padding:10px}
.m-pricing .m-plan .m-plan-list li.is-bonus img{width:120px;height:80px;border-radius:10px}
.m-pricing .m-plan .m-plan-list li.is-bonus span{font-size:15px}
.m-pricing .m-plan .m-plan-list li.is-bonus b{font-size:10.5px;margin-bottom:4px}
}

/* ---------- plans + FAQ tidy (Sri, 2026-09-20) ---------- */
@media(min-width:861px){
.m-pricing .m-plan.is-hot,.m-pricing .m-plan.is-hot:hover{transform:none}
.m-pricing .m-plan.is-hot:hover{transform:translateY(-4px)}
.m-pricing .m-plan-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.m-pricing .m-plan[data-plan-card="free"] .m-plan-list{grid-template-columns:1fr;column-gap:0}
}
/* questions: centred headline, centred list under it */
.m-faq{display:block;max-width:820px;margin-left:auto;margin-right:auto}
.m-faq-head{position:static;text-align:center;margin-bottom:26px}
.m-faq .m-h2{text-align:center;max-width:none;margin-left:auto;margin-right:auto}
.m-below #m-learn>.m-faq:before{left:50%;width:min(520px,100%);transform:translateX(-50%);background:linear-gradient(90deg,transparent,#ff98cb8c,transparent)}

/* closing banners keep their own padding (the section rhythm rule must not flatten them) */
.m-below .m-cta,.m-below #m-learn>.m-cta{padding:34px 28px;margin-top:72px!important}
@media(min-width:760px){.m-below .m-cta,.m-below #m-learn>.m-cta{padding:40px 44px}}