/* 7 AI Video Mistakes (/masterclass/mistakes, PR-825, D2118). An editor's review reel: each mistake is a
   row, the failed frame (red marks) beside the fixed frame (green marks), the prompt line that caused it,
   the fix, one rule. Apple whites and greys; red and green carry meaning only. Scoped to main.mk; the
   header, footer and Explore dialog are /masterclass's (`masterclass.css`). Light only, as /masterclass. */
.mk,.mk-bar{
  --bg:#ffffff; --band:#f5f5f7; --card:#ffffff; --fg:#1d1d1f; --muted:#6e6e73; --line:#d2d2d7;
  --accent:#0071e3; --accent-ink:#ffffff;
  --bad:#d70015; --bad-soft:#fff1f0; --good:#248a3d; --good-soft:#eefaf1; --code:#f5f5f7;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:18px;
}
.mk{display:block;background:var(--bg);color:var(--fg);font-family:var(--text);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
.mk *{box-sizing:border-box}
.mk a{color:var(--accent);text-decoration:none}
.mk a:hover{text-decoration:underline}
.mk :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.mk h1,.mk h2,.mk h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.022em}
.mk h1{font-size:clamp(2.3rem,6vw,4rem);line-height:1.04;font-weight:700}
.mk h2{font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.1;font-weight:700}
.mk h3{font-size:1.15rem;line-height:1.25;font-weight:600}
.mk p{margin:0}
.mk .wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mk section{padding-block:clamp(48px,8vw,96px)}
.mk .band{background:var(--band)}
.mk .eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mk .lead{font-size:clamp(1.08rem,2vw,1.28rem);color:var(--muted);max-width:44ch}

.mk .btn,.mk-bar .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);font:600 1rem var(--text);cursor:pointer;text-decoration:none}
.mk .btn:hover,.mk-bar .btn:hover{filter:brightness(1.08);text-decoration:none}
.mk .btn.ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}

/* hero */
.mk .hero{padding-block:clamp(40px,7vw,80px) clamp(32px,5vw,56px)}
.mk .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.mk .hero-copy{display:grid;gap:20px;min-width:0}
.mk .hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.mk .hero h1 em{font-style:normal;color:var(--bad)}
.mk .tally{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mk .tally div{background:var(--bg);padding:16px 18px}
.mk .tally b{display:block;font:700 2rem/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mk .tally span{font-size:.85rem;color:var(--muted)}
.mk .tally .bad b{color:var(--bad)}
.mk .reel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mk .reel figure{margin:0;position:relative;aspect-ratio:9/16;max-width:100%;border-radius:12px;overflow:hidden;background:#000}
.mk .reel img{width:100%;height:100%;object-fit:cover;display:block}
.mk .reel figure.x::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;font:700 3rem/1 var(--display);color:#ff453a;background:rgba(0,0,0,.35)}
.mk .reel figure.ok::after{content:"✓";position:absolute;right:8px;bottom:6px;font:700 1.4rem/1 var(--display);color:#30d158}

/* mistake rows */
.mk .mistakes{display:grid;gap:clamp(48px,8vw,88px)}
.mk .m{display:grid;gap:22px;scroll-margin-top:80px}
.mk .m-head{display:grid;gap:8px;max-width:760px}
.mk .m-num{font:600 .8rem var(--mono);color:var(--bad);letter-spacing:.04em}
.mk .m-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
.mk .shot{display:grid;gap:10px;min-width:0}
.mk .tag{display:inline-flex;align-items:center;gap:6px;font:600 .75rem var(--text);letter-spacing:.06em;text-transform:uppercase}
.mk .tag.bad{color:var(--bad)}
.mk .tag.good{color:var(--good)}
.mk .frame{position:relative;aspect-ratio:9/16;max-width:100%;border-radius:var(--r);overflow:hidden;background:#000}
.mk .shot.bad .frame{box-shadow:0 0 0 3px var(--bad)}
.mk .shot.good .frame{box-shadow:0 0 0 3px var(--good)}
.mk .frame img,.mk .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mk .frame svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mk .note{position:absolute;transform:translate(-50%,-50%);max-width:78%;padding:6px 10px;border-radius:10px;font:600 .8rem/1.25 var(--text);color:#fff;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.35);pointer-events:none}
.mk .note.bad{background:var(--bad)}
.mk .note.good{background:var(--good)}
.mk .frame.playing svg,.mk .frame.playing .note{display:none}
.mk .play{justify-self:start;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:7px 14px;font:600 .82rem var(--text);cursor:pointer}
.mk .play:hover{border-color:var(--fg)}
.mk .fixcard{background:var(--good-soft);border-radius:var(--r);padding:22px;display:grid;gap:10px;align-content:start}
.mk .fixcard p{font-size:.95rem;color:var(--muted)}
.mk .why{display:grid;gap:14px;min-width:0}
.mk .why h4{margin:0;font:600 .75rem var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mk pre{margin:0;background:var(--code);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:13px/1.5 var(--mono);white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.mk .band pre{background:var(--bg)}
.mk pre.said{border-left:4px solid var(--bad)}
.mk pre.fix{border-left:4px solid var(--good)}
.mk pre mark{background:rgba(215,0,21,.16);color:inherit;border-radius:3px;padding:0 2px}
.mk pre.fix mark{background:rgba(36,138,61,.18)}
.mk .rule{font:600 1rem/1.4 var(--display);padding-top:4px;border-top:1px solid var(--line)}
.mk .rule::before{content:"Rule · ";color:var(--muted);font-weight:500}

/* mid-page nudge */
.mk .nudge{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:22px 24px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line)}
.mk .nudge p{font:600 1.1rem/1.35 var(--display);max-width:40ch}

/* rules */
.mk .rules-head{display:grid;gap:12px;margin-bottom:28px;max-width:720px}
.mk .rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;list-style:none;margin:0;padding:0;counter-reset:r}
.mk .rules li{counter-increment:r;display:grid;grid-template-columns:32px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.mk .rules li::before{content:counter(r,decimal-leading-zero);font:600 .9rem var(--mono);color:var(--muted);padding-top:2px}
.mk .tpl{display:grid;gap:12px;margin-top:40px}
.mk .tpl-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* join */
.mk .cta{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,5vw,56px);align-items:center}
.mk .cta-copy{display:grid;gap:16px}
.mk .cta ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mk .cta li{display:grid;grid-template-columns:22px 1fr;gap:8px}
.mk .cta li::before{content:"✓";color:var(--good);font-weight:700}
.mk .buy{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px;display:grid;gap:14px;box-shadow:0 20px 50px -24px rgba(0,0,0,.25)}
.mk .price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mk .price b{font:700 2.8rem/1 var(--display);letter-spacing:-.03em}
.mk .price s{color:var(--muted)}
.mk .next{font-size:.92rem;color:var(--fg)}
.mk .fine,.mk .disclosure{font-size:.82rem;color:var(--muted)}
.mk .disclosure{padding-block:24px}

.mk-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(255,255,255,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--line);font-family:var(--text);color:var(--fg)}
.mk-bar div{font-size:.85rem;line-height:1.3}

@media (max-width:960px){.mk .m-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.mk .why{grid-column:1/-1}}
@media (max-width:820px){.mk .hero .wrap,.mk .cta{grid-template-columns:1fr}.mk .rules{grid-template-columns:1fr}.mk-bar{display:flex}}
@media (max-width:420px){.mk .m-body{gap:12px}.mk .note{font-size:.7rem;padding:4px 7px}}
@keyframes mk-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.mk .ring{stroke-dasharray:var(--len);animation:mk-draw .9s ease-out both}
@media (prefers-reduced-motion:reduce){.mk .ring{animation:none}}

/* The lead gate (PR-828, D2126): the lesson opens for a name and an email. */
.mk.locked .gated{display:none}
.mk:not(.locked) .gate{display:none}
.mk .gate-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(24px,5vw,56px);align-items:center}
.mk .gate-copy{display:grid;gap:14px}
.mk .gate-card{background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 20px 50px -24px rgba(0,0,0,.25)}
.mk .gate-card.mc{display:block}
@media (max-width:820px){.mk .gate-in{grid-template-columns:1fr}}

/* The long-form lesson (PR-829, D2128). */
.mk .lesson-intro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(24px,5vw,56px);align-items:start}
.mk .intro-copy{display:grid;gap:16px}
.mk .intro-copy p:not(.eyebrow):not(.lead){color:var(--fg);max-width:62ch}
.mk .toc{position:sticky;top:90px;display:grid;gap:10px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--band)}
.mk .toc ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:.95rem}
.mk .sub-h{margin:40px 0 14px}
.mk .locks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mk .locks li{display:grid;align-content:start;gap:12px;padding:20px 18px;border-radius:var(--r);background:var(--band);border:1px solid var(--line)}
.mk .lk{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--fg);color:var(--bg);font:700 1.4rem var(--display)}
.mk .locks h3{margin:0 0 6px}
.mk .locks p{font-size:.92rem;color:var(--muted)}
.mk .locks .lk-ask{margin-top:8px;color:var(--fg);font-weight:500}
.mk .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.mk table{width:100%;border-collapse:collapse;font-size:.93rem}
.mk th,.mk td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.mk thead th{background:var(--band);font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mk tbody tr:last-child th,.mk tbody tr:last-child td{border-bottom:0}
.mk .matrix td{text-align:center;color:var(--accent);font-size:1.1rem;width:48px}
.mk .matrix th[scope=row]{font-weight:500}
.mk .diag td:nth-child(2){font:600 .9rem var(--mono);white-space:nowrap;color:var(--accent)}
.mk .diag th[scope=row]{font-weight:600;width:30%}
.mk .rebuild{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:start}
.mk .rb{display:grid;gap:12px;min-width:0}
.mk .rb pre{background:var(--bg)}
.mk .rb.bad pre{border-left:4px solid var(--bad)}
.mk .rb.good pre{border-left:4px solid var(--good)}
.mk .lt{display:inline-block;width:1.4em;text-align:center;border-radius:4px;background:var(--fg);color:var(--bg);font-weight:700;margin-right:4px}
.mk .gaps{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.92rem;color:var(--muted)}
.mk .calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 24px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--band)}
.mk .calc label{display:grid;gap:8px;font-size:.9rem;font-weight:500}
.mk .calc input[type=number]{font:inherit;font-size:1.1rem;padding:10px 12px;border-radius:10px;border:1px solid var(--line);width:100%}
.mk .calc input[type=range]{width:100%;accent-color:var(--accent)}
.mk .calc output{font:700 1rem var(--mono);color:var(--accent)}
.mk .calc-out{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mk .calc-out div{background:var(--bg);padding:16px 18px;display:grid;gap:4px}
.mk .calc-out b{font:700 2rem/1 var(--display);font-variant-numeric:tabular-nums}
.mk .calc-out span{font-size:.85rem;color:var(--muted)}
.mk .calc-out .save b{color:var(--good)}
.mk .rules label.check{display:grid;grid-template-columns:22px 1fr;gap:10px;cursor:pointer}
.mk .rules label.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--good)}
.mk .rules label.check input:checked+span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.mk .steps{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:st}
.mk .steps li{counter-increment:st;display:grid;align-content:start;gap:8px;padding:20px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line)}
.mk .steps li::before{content:counter(st);font:700 1.6rem/1 var(--display);color:var(--accent)}
.mk .steps p{font-size:.92rem;color:var(--muted)}
.mk .faq-list{display:grid;border-top:1px solid var(--line);max-width:820px}
.mk .faq-list details{border-bottom:1px solid var(--line);padding:16px 0}
.mk .faq-list summary{cursor:pointer;font:600 1.05rem var(--display)}
.mk .faq-list details p{margin-top:10px;color:var(--muted);max-width:68ch}
@media (max-width:1000px){.mk .locks{grid-template-columns:repeat(2,minmax(0,1fr))}.mk .locks li:last-child{grid-column:1/-1}.mk .steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.mk .lesson-intro,.mk .rebuild{grid-template-columns:1fr}.mk .toc{position:static}.mk .calc{grid-template-columns:1fr}}
@media (max-width:480px){.mk .locks,.mk .steps{grid-template-columns:1fr}.mk .calc-out{grid-template-columns:1fr}}
.mk .table-wrap + .fine,.mk .calc + .fine{margin-top:12px}
.mk #locks .nudge{margin-top:28px}