/* MC-FIG (2026-10-16): Style Figma for the curriculum + compare sections, and the phone hero fit. Loads after mc.css + mc-fx.css. */
/* overflow-x:hidden on <body> turns it into a scroll box and kills position:sticky (curriculum stage); clip keeps the crop without that */
body.mc { overflow-x: clip; }

/* ================= CURRICULUM: sticky scene stage (plate -> giant number -> phone with the module's real scene -> chip) ================= */
.fx-cur-in { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--mc-gut); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 4.6vw, 72px); align-items: start; }
.fx-stage { position: sticky; top: 84px; height: calc(100vh - 112px); height: calc(100svh - 112px); min-height: 540px; max-height: 780px; }
.fx-st-win { --i: 0; --rot: -4deg; position: relative; height: 100%; border-radius: 30px; overflow: hidden; isolation: isolate; background: var(--bg-3); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
.fx-st-plate { position: absolute; inset: -10% 0; z-index: 0; }
.fx-st-plate img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14) translateY(calc(var(--i) * -2.4%)); transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); filter: saturate(.85) brightness(.5); }
.fx-st-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bg-rgb), .5), rgba(var(--bg-rgb), .12) 46%, rgba(var(--bg-rgb), .7)); }
:root[data-theme="light"] .fx-st-plate img { filter: saturate(.8) brightness(1.04) contrast(.9); }
:root[data-theme="light"] .fx-st-plate::after { background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, .8)); }
.fx-st-num { position: absolute; z-index: 1; left: clamp(22px, 2.4vw, 36px); top: clamp(22px, 3.2vh, 36px); pointer-events: none; }
.fx-st-num .roll { display: block; overflow: hidden; font-size: clamp(128px, 15vw, 232px); height: .86em; }
.fx-st-num .roll b { display: block; font-family: var(--f-lat); font-weight: 800; font-size: 1em; line-height: .86; height: .86em; letter-spacing: -.05em; color: var(--text); transform: translateY(calc(var(--i) * -100%)); transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.fx-st-num .roll.w { order: -1; font-size: clamp(15px, 1.25vw, 19px); height: 1.4em; margin-bottom: 6px; }
.fx-st-num .roll.w small { display: block; font-family: var(--f-lat); font-weight: 700; font-size: 1em; line-height: 1.4; height: 1.4em; letter-spacing: .34em; color: var(--lime-ink); transform: translateY(calc(var(--i) * -100%)); transition: transform .9s cubic-bezier(.22, 1, .36, 1) .05s; }
.fx-st-num { display: flex; flex-direction: column; }
.fx-st-float { position: absolute; z-index: 2; right: 9%; bottom: -7%; height: 84%; aspect-ratio: 9 / 16; will-change: transform; }
.fx-st-ph { position: relative; width: 100%; height: 100%; border-radius: 34px; background: #06080e; box-shadow: 0 0 0 1px rgba(var(--fg-rgb), .14), 0 40px 80px rgba(0, 0, 0, calc(.55 * var(--shk))); transform: rotate(var(--rot)); transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
:root[data-theme="light"] .fx-st-ph { background: #fff; box-shadow: 0 0 0 1px rgba(11, 15, 25, .12), 0 30px 60px rgba(11, 15, 25, .2), 0 6px 14px rgba(11, 15, 25, .08); }
.fx-st-ph img { position: absolute; left: 8px; top: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; border-radius: 27px; clip-path: inset(100% 0 0 0 round 27px); transform: scale(1.1); transition: clip-path .95s cubic-bezier(.22, 1, .36, 1), transform 1.3s cubic-bezier(.22, 1, .36, 1); }
.fx-st-win.up .fx-st-ph img:not(.on):not(.was) { clip-path: inset(0 0 100% 0 round 27px); }
.fx-st-ph img.was { clip-path: inset(0 0 0 0 round 27px); transform: none; z-index: 0; transition: none; }
.fx-st-ph img.on { clip-path: inset(0 0 0 0 round 27px); transform: none; z-index: 1; }
.fx-st-chip { position: absolute; z-index: 3; left: clamp(22px, 2.4vw, 36px); bottom: clamp(22px, 3.2vh, 36px); display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 48px); padding: 11px 18px; border-radius: 999px; background: rgba(var(--bg-rgb), .92); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); font-family: var(--f-th-bold); font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--text); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .3s, transform .3s; }
.fx-st-chip.swap { opacity: 0; transform: translateY(6px); }
.fx-st-chip i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(var(--lime-rgb), .22); }
.fx-st-ticks { position: absolute; z-index: 3; right: clamp(22px, 2.4vw, 36px); top: clamp(26px, 3.6vh, 40px); display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; font-family: var(--f-lat); font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--text-2); }
.fx-st-ticks li { width: 34px; padding-top: 7px; border-top: 2px solid rgba(var(--fg-rgb), .22); transition: color .4s, border-color .4s; }
.fx-st-ticks li.on { color: var(--text); border-top-color: var(--lime-line); }

.fx-cur-main .mc-lead { max-width: 640px; }
.fx-mods { margin-top: clamp(26px, 3.6vw, 42px); }
.fx-mod { padding: 24px 0 26px; border-top: 2px solid var(--text); }
.fx-mod + .fx-mod { margin-top: 12px; }
.fx-mod-pic { display: none; }
.fx-mod-h { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.fx-mod-h .k { flex: none; font-family: var(--f-lat); font-weight: 800; font-size: 52px; line-height: .9; letter-spacing: -.035em; color: var(--text); transition: color .45s; }
.fx-mod.on .fx-mod-h .k { color: var(--lime-ink); }
.fx-mod-h b { display: block; font-family: var(--f-th-bold); font-weight: 700; font-size: clamp(23px, 2vw, 28px); line-height: 1.3; }
.fx-mod-h small { display: block; font-size: 16px; line-height: 1.5; color: var(--text-3); }
.fx-les { list-style: none; margin: 0; padding: 0; }
.fx-les li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 14px; padding: 16px 0; border-top: 1px solid var(--line); align-items: start; }
.fx-les li:first-child { border-top: 0; }
.fx-les .n { width: 32px; height: 32px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-lat); font-weight: 700; font-size: 14px; border: 1px solid var(--line-2); color: var(--text-2); }
.fx-les li.free .n { background: var(--lime); border-color: var(--lime-line); color: var(--on-lime); }
.fx-les h3 { margin: 0; font-family: var(--f-th-bold); font-weight: 700; font-size: 20px; line-height: 1.45; }
.fx-les p { margin: 4px 0 0; color: var(--text-2); font-size: 17px; line-height: 1.65; }
.fx-les .d { font-family: var(--f-lat); font-size: 14px; line-height: 1.5; color: var(--text-3); text-align: right; white-space: nowrap; padding-top: 4px; }
.fx-les .free-b { margin-left: 6px; font-family: var(--f-th-bold); font-size: 16px; color: var(--lime-ink); white-space: nowrap; text-decoration: underline !important; text-underline-offset: 4px; text-decoration-color: rgba(var(--lime-rgb), .5) !important; }
.fx-cur .mc-sum { margin-top: 18px; }

@media (max-width: 960px) {
  .fx-cur-in { grid-template-columns: minmax(0, 1fr); }
  .fx-stage { display: none; }
  .fx-mod { border-top: 0; padding-top: 8px; }
  .fx-mod + .fx-mod { margin-top: 26px; }
  .fx-mod-pic { display: block; position: relative; margin: 0 0 4px; height: clamp(210px, 58vw, 360px); border-radius: 24px; overflow: hidden; isolation: isolate; }
  .fx-mod-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 5%; transform: scale(1.04); transform-origin: 50% 0; }
  .fx-mod-pic::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(var(--bg-rgb), 0) 40%, rgba(var(--bg-rgb), .9) 86%, var(--bg) 100%); }
  .fx-mod-pic b { position: absolute; z-index: 2; left: 2px; bottom: -4px; font-family: var(--f-lat); font-weight: 800; font-size: clamp(84px, 24vw, 128px); line-height: .84; letter-spacing: -.05em; color: var(--text); }
  .fx-mod-pic span { position: absolute; z-index: 2; right: 4px; bottom: 10px; font-family: var(--f-lat); font-weight: 700; font-size: 13px; letter-spacing: .32em; color: var(--lime-ink); }
  .fx-mod-h .k { display: none; }
}
@media (max-width: 600px) {
  .fx-les li { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 12px; }
  .fx-les h3 { font-size: 19px; }
}

/* ================= COMPARE: "the climb" — cumulative tiers as a staircase, each step with its real picture breaking the card edge ================= */
.fx-cmp { position: relative; overflow-x: clip; padding-top: clamp(96px, 12vw, 164px); }
.fx-cmp-plate { position: absolute; left: 0; right: 0; top: 0; height: clamp(520px, 62vw, 800px); overflow: hidden; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 48%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 48%, transparent 100%); }
.fx-cmp-plate img { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max(110vw, 1500px); max-width: none; height: auto; transform: translateY(var(--py, 0px)); filter: saturate(.85) brightness(.5); }
:root[data-theme="light"] .fx-cmp-plate img { filter: saturate(.75) brightness(1.06) contrast(.88); opacity: .42; }
.fx-cmp-head { position: relative; z-index: 2; }
.fx-cmp-word { position: absolute; left: 0; right: 0; top: calc(clamp(96px, 12vw, 164px) + 172px); z-index: 0; display: flex; justify-content: center; pointer-events: none; }
.fx-cmp-word span { font-family: var(--f-lat); font-weight: 800; font-size: clamp(60px, 13.4vw, 226px); line-height: .82; letter-spacing: -.045em; color: var(--text); opacity: .92; white-space: nowrap; transform: translateY(var(--wy, 0px)); }
.fx-cmp-stage { position: relative; z-index: 1; }
.fx-steps.mc-cmp { --p: 1; margin-top: clamp(40px, 5vw, 72px); gap: clamp(16px, 1.8vw, 26px); align-items: stretch; }
.fx-steps .mc-tier { position: relative; z-index: 0; isolation: isolate; background: transparent; border: 0; box-shadow: none; padding: clamp(24px, 2.4vw, 34px); transform: translateY(calc((1 - var(--p)) * var(--lift, 0px))); }
.fx-steps .mc-tier.hl { background: transparent; box-shadow: none; }
.fx-steps .mc-tier::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 24px; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); }
:root[data-theme="light"] .fx-steps .mc-tier::after { background: #fff; }
.fx-steps .mc-tier.hl::after { border-color: var(--lime-line); box-shadow: var(--glow), var(--shadow-lg); background: linear-gradient(168deg, rgba(var(--lime-rgb), .16), rgba(var(--lime-rgb), 0) 44%), var(--bg-2); }
:root[data-theme="light"] .fx-steps .mc-tier.hl::after { background: linear-gradient(168deg, rgba(200, 245, 66, .32), rgba(200, 245, 66, 0) 48%), #fff; }
.fx-steps .mc-tier::before { content: ""; position: absolute; z-index: -2; pointer-events: none; background: center / cover no-repeat; transform: translateY(calc((1 - var(--p)) * 46%)) rotate(var(--r, 0deg)); }
/* SURVIVAL KIT: the real PLAYBOOK cover sheet */
.fx-steps .mc-tier.t-pdf::before { background-image: url(/mc/pb-01.webp); width: 34%; aspect-ratio: 1200 / 1697; right: 26px; top: -104px; --r: 7deg; border-radius: 6px; background-color: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 18px 36px rgba(0, 0, 0, calc(.5 * var(--shk))); }
/* BASE CAMP: an early episode frame in a phone */
.fx-steps .mc-tier.t-bts::before { background-image: url(/assets/img/scr-condo-flood.webp); width: 28%; aspect-ratio: 9 / 16; right: 30px; top: -126px; --r: -6deg; border-radius: 18px; border: 5px solid #06080e; box-shadow: 0 0 0 1px var(--line-2), 0 20px 40px rgba(0, 0, 0, calc(.55 * var(--shk))); }
:root[data-theme="light"] .fx-steps .mc-tier.t-bts::before { border-color: #fff; }
/* MASTERCLASS: the instructor puppet climbs over the top step */
.fx-steps .mc-tier.t-full::before { background: url(/mc/hero-fg.webp) center bottom / contain no-repeat; width: 78%; aspect-ratio: 1146 / 600; right: -7%; top: -132px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%); mask-image: linear-gradient(180deg, transparent 0%, #000 24%); }
.fx-steps .mc-tier .nm { position: relative; }
@media (min-width: 961px) {
  .fx-steps .mc-tier.t-pdf { margin-top: 152px; --lift: 110px; }
  .fx-steps .mc-tier.t-bts { margin-top: 76px; --lift: 160px; }
  .fx-steps .mc-tier.t-full { margin-top: 0; --lift: 210px; }
  .fx-steps.mc-cmp { padding-top: 126px; }
}
@media (max-width: 960px) {
  .fx-cmp { padding-top: clamp(150px, 34vw, 230px); }
  .fx-cmp-word { top: clamp(66px, 12vw, 110px); }
  .fx-cmp-word span { font-size: min(15vw, 120px); }
  .fx-steps.mc-cmp { gap: 0; margin-top: 8px; }
  .fx-steps .mc-tier { margin-top: 108px; transform: none; }
  .fx-steps .mc-tier::before { transform: rotate(var(--r, 0deg)); }
  .fx-steps .mc-tier.t-pdf::before { width: 92px; top: -86px; right: 24px; }
  .fx-steps .mc-tier.t-bts::before { width: 74px; top: -94px; right: 28px; }
  .fx-steps .mc-tier.t-full::before { width: 210px; top: -98px; right: -4px; }
  .fx-steps .mc-tier .nm { padding-right: 96px; }
  .fx-steps .mc-tier.t-full .nm { padding-right: 0; }
}

/* ================= PHONE HERO FIT (≤900): word above the screen, puppet peeks from behind the screen, copy never meets either ================= */
@media (max-width: 900px) {
  .mx-word { --wf: min(13.2vw, calc((var(--tag-top, 168px) - 64px - 18px) / .82)); padding-top: calc(64px + (var(--tag-top, 168px) - 64px) / 2 - var(--wf) * .41); }
  .mx-word span { font-size: var(--wf); }
  .mx-hero.fit-noword .mx-word { display: none; }
  .mx-sh.b { display: none; }
  .mx-sh.a { left: -7vw; top: calc(var(--sc-mid, 36svh) - 13svh); height: 26svh; }
  .mx-fg { z-index: 1; }
  .mx-fg img { width: 44vw; right: -5vw; bottom: auto; top: calc(var(--sc-mid, 36svh) + 2svh); }
  .mx-copy { bottom: max(26px, 3svh); } /* keeps the CTA clear of the theme toggle (bottom-left) while the hint line sits beside it */
  .mx-hero.fit-1 .mx-sub { display: none; }
  .mx-hero.fit-2 .mx-h1 { font-size: 20px; }
  .mx-hero.fit-2 .mx-price span { font-size: 36px; }
  .mx-hero.fit-2 .mx-kick { margin-bottom: 6px; }
  /* last resort: drop the scroll hint; the CTA then steps right of the theme toggle (bottom-left, 44px) instead of sitting under it */
  .mx-hero.fit-3 .mx-hint { display: none; }
  .mx-hero.fit-3 .mx-buy .mc-btn { margin-left: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-st-plate img, .fx-st-num .roll b, .fx-st-num .roll.w small, .fx-st-ph, .fx-st-ph img, .fx-st-chip { transition: none; }
}

/* starter lessons (S1–S7 setup, P1–P7 one running project): compact two-column list above the 4 main modules */
.fx-start { margin-top: clamp(26px, 3.6vw, 42px); padding: 24px 0 22px; border-top: 2px solid var(--text); }
.fx-start + .fx-mods { margin-top: 12px; }
.fx-start-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 30px; margin-top: 8px; }
.fx-start-h { margin: 8px 0 2px; font-family: var(--f-th-bold); font-weight: 700; font-size: 18px; line-height: 1.5; color: var(--text); }
.fx-start-h small { white-space: nowrap; margin-left: 6px; font-family: var(--f-th); font-weight: 400; font-size: 15px; color: var(--text-3); }
.fx-les-s li { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0; align-items: center; }
.fx-les-s .n { margin-top: 0; font-size: 12px; }
.fx-les-s b { font-family: var(--f-th-bold); font-weight: 700; font-size: 17px; line-height: 1.45; }
.fx-les-s .d { padding-top: 0; }
@media (max-width: 960px) { .fx-start { border-top: 0; padding-top: 8px; } .fx-start-cols { grid-template-columns: 1fr; } }