:root {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f4f7fb;
  background: #070b13;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #070b13; }

.site-topbar {
  position: sticky;
  z-index: 10;
  top: 0;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: #0b111c;
  border-bottom: 1px solid #283545;
  font-size: 14px;
}
.site-topbar__brand { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: .02em; }
.site-topbar__brand small { color: #748195; font-size: 11px; font-weight: 500; letter-spacing: .14em; }
.brand-mark, .scene__brand-mark { width: 12px; height: 12px; display: inline-block; background: #19d3c5; border-radius: 3px; }
.site-topbar__help { color: #aab5c3; font-size: 13px; }
html[data-present="true"] .site-topbar__help,
html[data-present="true"] .site-topbar__brand small { display: none; }
.scene-nav { position: fixed; z-index: 9; top: 50%; right: 16px; display: flex; flex-direction: column; gap: 7px; transform: translateY(-50%); padding: 9px; border: 1px solid #283545; border-radius: 10px; background: #0b111c; }
.scene-nav a { display: grid; place-items: center; width: 34px; height: 32px; border-radius: 6px; color: #748195; text-decoration: none; font-size: 11px; font-weight: 600; }
.scene-nav a:hover, .scene-nav a.is-active { background: rgba(25,211,197,.12); color: #19d3c5; }
.page-stack { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 40px 56px 96px; }
.loading, .error-panel { width: min(100%, 1242px); padding: 80px; background: #101722; border: 1px solid #283545; border-radius: 10px; }
.error-panel p { color: #aab5c3; }

.scene {
  --page: #070b13;
  --panel: #101722;
  --card: #151f2c;
  --border: #283545;
  --border-subtle: #1d2937;
  --text: #f4f7fb;
  --secondary: #aab5c3;
  --muted: #748195;
  --accent: #19d3c5;
  --accent-soft: rgba(25,211,197,.12);
  flex: none;
  position: relative;
  width: 1242px;
  height: var(--scene-height);
  overflow: hidden;
  color: var(--text);
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.scene--light {
  --page: #f4f6f8;
  --panel: #ffffff;
  --card: #ffffff;
  --border: #d5dde6;
  --border-subtle: #e3e8ef;
  --text: #1f2937;
  --secondary: #475467;
  --muted: #667085;
  --accent: #00b8b0;
  --accent-soft: rgba(0,184,176,.1);
}
.scene__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 60px 72px 42px;
}
.scene__top, .scene__bottom { display: flex; justify-content: space-between; align-items: center; }
.scene__top { min-height: 36px; color: var(--secondary); font-size: 18px; font-weight: 600; }
.scene__brand { display: flex; align-items: center; gap: 12px; letter-spacing: .02em; }
.scene__brand-mark { width: 13px; height: 13px; background: var(--accent); border-radius: 3px; }
.scene__index { color: var(--accent); font-size: 19px; letter-spacing: .08em; }
.scene__index b { color: var(--muted); margin: 0 5px; font-weight: 400; }
.scene__step { display: none; font-size: 17px; letter-spacing: .03em; white-space: nowrap; }
.scene__bottom { margin-top: auto; padding-top: 30px; border-top: 1px solid var(--border); color: var(--muted); font-size: 17px; letter-spacing: .02em; }
.scene__lead { margin-top: 78px; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; color: var(--accent); font-size: 25px; font-weight: 600; letter-spacing: .08em; }
.eyebrow__dash { width: 32px; height: 2px; background: var(--accent); }
.scene__title { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 80px; line-height: 1.15; letter-spacing: -.055em; font-weight: 700; }
.title-line--accent { color: var(--accent); }
.scene__subtitle { max-width: 1050px; margin: 34px 0 0; color: var(--secondary); font-size: 33px; line-height: 1.5; font-weight: 400; }

.media { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.media figcaption { position: absolute; right: 14px; bottom: 14px; left: 14px; width: max-content; max-width: calc(100% - 28px); padding: 9px 14px; color: #f4f7fb; background: rgba(7,11,19,.86); border: 1px solid #283545; border-radius: 6px; font-size: 22px; font-weight: 500; }

/* 01: positioning and real cases */
.scene--hero .scene__lead { margin-top: 76px; }
.scene--hero .scene__title { font-size: 91px; }
.scene--hero .scene__subtitle { max-width: 990px; }
.hero-tags { display: flex; gap: 14px; margin-top: 32px; }
.hero-tags span { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--secondary); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; font-size: 22px; }
.hero-tags b { color: var(--accent); font-size: 17px; }
.hero-gallery { display: grid; grid-template-columns: 1.72fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; width: 100%; height: 785px; margin-top: 54px; }
.hero-gallery__main { grid-row: 1 / 3; }
.hero-gallery__side { min-height: 0; }
.hero-verdict { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
.hero-verdict p { margin: 0; font-size: 29px; font-weight: 600; }
.verdict-rule { width: 46px; height: 3px; background: var(--accent); }

/* 02: pain is typography, not a product screenshot */
.scene--pain .scene__title { font-size: 94px; }
.scene--pain .scene__lead { margin-top: 90px; }
.pain-list { margin-top: 88px; border-top: 1px solid var(--border); }
.pain-row { display: grid; grid-template-columns: 130px 1fr 46px; align-items: center; min-height: 205px; border-bottom: 1px solid var(--border); }
.pain-row__number { align-self: center; color: var(--accent); font-size: 36px; font-weight: 600; }
.pain-row h2 { margin: 0 0 8px; color: var(--text); font-size: 49px; line-height: 1.25; font-weight: 600; }
.pain-row p { margin: 0; color: var(--secondary); font-size: 28px; }
.pain-row__arrow { color: var(--muted); font-size: 40px; }
.pain-closing { display: flex; align-items: center; gap: 22px; margin: 75px 0 0; padding: 30px 0; color: var(--text); border-top: 2px solid var(--accent); font-size: 32px; font-weight: 600; }
.pain-closing span { flex: none; color: var(--accent); font-size: 21px; }

/* 03: the six step method is the main proof */
.scene--root-cause .scene__title { font-size: 84px; }
.method-layout { display: grid; grid-template-columns: 1.32fr 1fr; gap: 24px; height: 716px; margin-top: 65px; }
.flow-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 12px; }
.flow-step { min-width: 0; padding: 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.flow-step span { color: var(--accent); font-size: 20px; font-weight: 600; }
.flow-step h2 { margin: 14px 0 10px; font-size: 35px; font-weight: 600; }
.flow-step p { margin: 0; color: var(--secondary); font-size: 23px; line-height: 1.35; }
.method-layout__image figcaption { font-size: 19px; }
.method-footline { display: flex; align-items: center; justify-content: space-between; margin-top: 42px; color: var(--accent); font-size: 25px; font-weight: 600; white-space: nowrap; }
.method-footline i { width: 28px; height: 1px; background: var(--border); }

/* 04: airy light editorial list */
.scene--audience .scene__lead { margin-top: 82px; }
.audience-list { margin-top: 82px; border-top: 1px solid var(--border); }
.audience-row { display: grid; grid-template-columns: 98px 385px 1fr; align-items: center; gap: 12px; min-height: 208px; border-bottom: 1px solid var(--border); }
.audience-row__index { color: var(--accent); font-size: 31px; font-weight: 600; }
.audience-row h2 { margin: 0; font-size: 37px; line-height: 1.24; font-weight: 600; }
.audience-row p { margin: 0; color: var(--secondary); font-size: 27px; line-height: 1.45; }
.audience-note { margin: 42px 0 0; color: var(--muted); font-size: 23px; }

/* 05: method first, workbench screenshot second */
.scene--method .scene__title { font-size: 76px; }
.scene--method .scene__lead { margin-top: 68px; }
.scene--method .scene__subtitle { max-width: 1050px; }
.tool-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 55px; }
.tool-step { display: flex; flex-direction: column; gap: 15px; padding: 24px 20px; background: var(--panel); border-top: 2px solid var(--accent); border-radius: 0 0 8px 8px; }
.tool-step span { color: var(--accent); font-size: 19px; }
.tool-step strong { font-size: 27px; font-weight: 600; }
.workbench-wrap { margin-top: 46px; padding: 22px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.workbench-wrap__header { display: flex; justify-content: space-between; padding-bottom: 18px; color: var(--secondary); font-size: 20px; }
.workbench-wrap__header span:first-child { color: var(--accent); }
.workbench-wrap__image { height: 480px; border-color: var(--border-subtle); }
.workbench-wrap__image figcaption { font-size: 19px; }
.tool-verdict { margin: 36px 0 0; font-size: 31px; font-weight: 600; }

/* 06–07: results lead, not unlicensed process graphics */
.scene--interior .scene__lead, .scene--enclosed .scene__lead { margin-top: 92px; }
.scene--interior .scene__title, .scene--enclosed .scene__title { font-size: 88px; }
.case-gallery { display: grid; grid-template-columns: 1.48fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; height: 1150px; margin-top: 92px; }
.case-gallery__main { grid-row: 1 / 3; }
.case-gallery__side { min-height: 0; }
.case-lesson { display: grid; grid-template-columns: 220px 1fr; align-items: start; gap: 34px; margin-top: 70px; padding-top: 36px; border-top: 2px solid var(--accent); }
.case-lesson span { color: var(--accent); font-size: 25px; font-weight: 600; }
.case-lesson p { margin: 0; font-size: 42px; line-height: 1.38; font-weight: 600; }

/* 08: two pairs, explicitly a secondary application */
.scene--advanced .scene__lead { margin-top: 74px; }
.scene--advanced .scene__title { font-size: 82px; }
.story-pairs { display: flex; flex-direction: column; gap: 42px; margin-top: 74px; }
.story-pair { padding-top: 20px; border-top: 1px solid var(--border); }
.story-pair__heading { display: flex; align-items: baseline; gap: 22px; margin-bottom: 22px; }
.story-pair__heading > span:first-child { color: var(--accent); font-size: 25px; }
.story-pair__heading h2 { margin: 0; font-size: 39px; font-weight: 600; }
.story-pair__heading > span:last-child { margin-left: auto; color: var(--secondary); font-size: 21px; }
.story-pair__images { display: grid; grid-template-columns: 1.68fr 1fr; gap: 20px; height: 468px; }
.story-pair__images .media figcaption { font-size: 18px; }
.story-closing { margin: 54px 0 0; padding: 28px 0 0; border-top: 2px solid var(--accent); color: var(--text); font-size: 31px; font-weight: 600; }

/* 09A–09C: full curriculum, large titles without table density */
.scene--curriculum-detail .scene__lead { margin-top: 72px; }
.scene--curriculum-detail .scene__title { font-size: 76px; }
.scene--curriculum-detail .scene__subtitle { margin-top: 25px; font-size: 29px; }
.curriculum-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 72px; }
.curriculum-columns--single { grid-template-columns: 1fr; }
.curriculum-module { min-width: 0; border-top: 2px solid var(--accent); }
.curriculum-module__header { display: grid; grid-template-columns: 65px 1fr; gap: 14px; min-height: 164px; padding: 26px 0 25px; }
.curriculum-module__letter { color: var(--accent); font-size: 65px; line-height: 1; font-weight: 700; }
.curriculum-module__header h2 { margin: 4px 0 10px; font-size: 39px; line-height: 1.18; font-weight: 650; }
.curriculum-module__header p { margin: 0; color: var(--secondary); font-size: 23px; line-height: 1.45; }
.curriculum-module__bonus { display: inline-block; margin: 0 0 12px; padding: 5px 10px; color: var(--accent); border: 1px solid var(--border); border-radius: 6px; font-size: 21px; font-weight: 600; }
.lesson-list { margin: 0; padding: 0; list-style: none; }
.lesson-row { display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: start; padding: 17px 0 18px; border-top: 1px solid var(--border); }
.lesson-row__number { padding-top: 2px; color: var(--accent); font-size: 25px; font-weight: 600; }
.lesson-row__content { min-width: 0; line-height: 1.38; }
.lesson-row__title { color: var(--text); font-size: 29px; font-weight: 550; overflow-wrap: anywhere; }
.lesson-row__badge { display: inline-block; margin: 0 0 0 12px; padding: 3px 8px; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; font-size: 18px; font-weight: 500; white-space: nowrap; vertical-align: 2px; }
.curriculum-legend { display: flex; align-items: center; gap: 15px; margin: 46px 0 0; color: var(--muted); font-size: 22px; }
.curriculum-legend__sample { flex: none; padding: 3px 8px; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; font-size: 18px; }
.curriculum-columns--single .curriculum-module__header { min-height: 140px; }
.curriculum-columns--single .lesson-row { min-height: 112px; padding: 25px 0; }
.curriculum-columns--single .lesson-row__title { font-size: 34px; }

/* 09D: supporting tools and a modest learning-support note */
.scene--course-support .scene__lead { margin-top: 67px; }
.scene--course-support .scene__title { font-size: 75px; }
.scene--course-support .scene__subtitle { margin-top: 22px; font-size: 28px; }
.support-intro { display: grid; grid-template-columns: 410px 1fr; gap: 40px; align-items: start; margin-top: 58px; padding: 30px 0; border-top: 2px solid var(--accent); border-bottom: 1px solid var(--border); }
.support-intro__index { color: var(--accent); font-size: 22px; }
.support-intro h2 { margin: 15px 0 0; font-size: 42px; line-height: 1.2; }
.support-intro h2 small { display: block; margin-top: 9px; color: var(--secondary); font-size: 23px; font-weight: 500; }
.support-intro > p { margin: 0; color: var(--secondary); font-size: 27px; line-height: 1.5; }
.support-features { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; margin-top: 18px; }
.support-feature { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 12px; min-height: 93px; border-bottom: 1px solid var(--border); }
.support-feature span { color: var(--accent); font-size: 21px; }
.support-feature strong { font-size: 27px; line-height: 1.32; font-weight: 550; }
.support-closing { margin: 40px 0 0; color: var(--text); font-size: 29px; line-height: 1.35; font-weight: 600; }
.support-group { display: grid; grid-template-columns: 350px 1fr; gap: 35px; align-items: center; margin-top: 48px; padding: 28px 32px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.support-group span { color: var(--accent); font-size: 21px; }
.support-group h2 { margin: 12px 0 0; font-size: 39px; }
.support-group p { margin: 0; color: var(--secondary); font-size: 27px; line-height: 1.45; }

/* 09E: a compact value bridge, separate from the early-bird bonuses */
.scene--value-summary .scene__title { font-size: 75px; }
.scene--value-summary .scene__subtitle { font-size: 29px; }
.value-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 80px; }
.value-module { display: grid; grid-template-columns: 64px 1fr; gap: 8px 15px; min-height: 215px; padding: 28px 0 20px; border-top: 2px solid var(--accent); }
.value-module > span { grid-row: 1 / 3; color: var(--accent); font-size: 31px; font-weight: 600; }
.value-module strong { font-size: 38px; line-height: 1.22; }
.value-module p { margin: 0; color: var(--secondary); font-size: 26px; line-height: 1.4; }
.value-support { display: flex; align-items: center; gap: 32px; margin-top: 45px; padding: 26px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.value-support > span { color: var(--accent); font-size: 25px; font-weight: 600; }
.value-support > div { display: flex; gap: 34px; color: var(--text); font-size: 28px; }
.value-conclusion { margin: 56px 0 0; max-width: 1000px; color: var(--text); font-size: 37px; line-height: 1.4; font-weight: 600; }

/* 09F: live price reveal. Only opacity and gentle transforms are animated. */
.scene--price-reveal .scene__title { font-size: 73px; }
.price-stage { position: relative; flex: 1; margin-top: 75px; }
.price-stage__standard { height: 420px; }
.price-stage__standard span { display: block; color: var(--secondary); font-size: 32px; }
.price-stage__standard strong { position: relative; display: block; width: max-content; margin-top: 8px; color: var(--text); font-size: 205px; line-height: 1.1; letter-spacing: -.07em; transform-origin: left top; transition: transform 420ms ease-out; }
.price-stage__standard strong::after { content: ''; position: absolute; top: 55%; right: 0; left: 0; height: 4px; background: var(--muted); opacity: 0; transition: opacity 360ms ease-out; }
.price-stage.is-shrinking .price-stage__standard strong { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 4px; transform: translateY(-20px) scale(.48); }
.price-stage.is-shrinking .price-stage__standard strong::after { opacity: 1; }
.price-stage__early { position: absolute; top: 132px; left: 0; visibility: hidden; opacity: 0; transform: translateY(30px); transition: opacity 400ms ease-out, transform 400ms ease-out; }
.price-stage.is-price-visible .price-stage__early { visibility: visible; opacity: 1; transform: translateY(0); }
.price-stage__early > span { display: block; color: var(--accent); font-size: 34px; font-weight: 600; }
.price-stage__early strong { display: block; color: var(--accent); font-size: 188px; line-height: 1.02; letter-spacing: -.07em; }
.price-stage__early p { margin: 12px 0 0; color: var(--text); font-size: 29px; font-weight: 600; visibility: hidden; opacity: 0; transform: translateY(12px); transition: opacity 360ms ease-out, transform 360ms ease-out; }
.price-stage.is-badge-visible .price-stage__early p { visibility: visible; opacity: 1; transform: translateY(0); }
.price-stage__early small { display: block; margin-top: 15px; color: var(--secondary); font-size: 23px; }
.price-stage__button { min-height: 76px; margin-top: 32px; padding: 0 34px; color: #041513; background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; font: inherit; font-size: 28px; font-weight: 600; cursor: pointer; transition: opacity 300ms ease-out, transform 300ms ease-out; }
.price-stage__button:hover { transform: translateY(-2px); }
.price-stage__button:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.price-stage.is-shrinking .price-stage__button { visibility: hidden; opacity: 0; }
.price-stage__reasons { margin-top: 40px; visibility: hidden; opacity: 0; transform: translateY(20px); transition: opacity 400ms ease-out, transform 400ms ease-out; }
.price-stage.is-bonus-visible .price-stage__reasons { visibility: visible; opacity: 1; transform: translateY(0); }
.price-stage__reasons h2 { margin: 0 0 20px; color: var(--accent); font-size: 32px; }
.price-stage__reasons ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.price-stage__reasons li { display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--border); }
.price-stage__reasons li span { color: var(--accent); font-size: 24px; }
.price-stage__reasons li strong { font-size: 27px; line-height: 1.32; font-weight: 550; }
.price-stage__reasons > p { margin: 24px 0 0; color: var(--muted); font-size: 22px; }

/* 09G: the three offers are conditional, never standard course content */
.scene--earlybird-bonuses .scene__title { font-size: 75px; }
.scene--earlybird-bonuses .scene__subtitle { font-size: 29px; }
.bonus-eligibility { margin: 52px 0 0; padding: 20px 0; color: var(--text); border-top: 2px solid var(--accent); border-bottom: 1px solid var(--border); font-size: 27px; font-weight: 600; }
.bonus-list { margin-top: 26px; }
.bonus-card { display: grid; grid-template-columns: 145px 1fr; gap: 28px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--border); }
.bonus-card__number { color: var(--accent); font-size: 24px; font-weight: 600; }
.bonus-card h2 { margin: 0; color: var(--text); font-size: 43px; line-height: 1.2; }
.bonus-card p { margin: 12px 0 0; color: var(--secondary); font-size: 27px; line-height: 1.4; }
.bonus-card small { display: block; margin-top: 13px; color: var(--muted); font-size: 22px; }
.bonus-card__tag { display: inline-block; margin-top: 14px; padding: 5px 10px; color: var(--accent); border: 1px solid var(--border); border-radius: 6px; font-size: 20px; }
.bonus-footer { margin: 32px 0 0; color: var(--muted); font-size: 23px; line-height: 1.45; }

/* 09H: signup action remains disabled until a real destination is supplied */
.scene--enrollment-cta .scene__title { font-size: 74px; }
.scene--enrollment-cta .scene__subtitle { font-size: 26px; }
.enrollment-price { margin-top: 75px; padding-top: 30px; border-top: 2px solid var(--accent); }
.enrollment-price > span { color: var(--accent); font-size: 32px; font-weight: 600; }
.enrollment-price strong { display: block; color: var(--accent); font-size: 172px; line-height: 1.05; letter-spacing: -.07em; }
.enrollment-price p { margin: 5px 0 0; color: var(--secondary); font-size: 27px; }
.enrollment-bonuses { margin-top: 48px; padding: 26px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.enrollment-bonuses h2 { margin: 0; color: var(--text); font-size: 32px; }
.enrollment-bonuses p { margin: 9px 0 20px; color: var(--secondary); font-size: 23px; }
.enrollment-bonuses ul { display: flex; flex-wrap: wrap; gap: 14px 26px; margin: 0; padding: 0; list-style: none; }
.enrollment-bonuses li { color: var(--text); font-size: 26px; }
.enrollment-bonuses li::before { content: '·'; margin-right: 8px; color: var(--accent); }
.enrollment-action { display: flex; align-items: center; gap: 30px; margin-top: 46px; }
.enrollment-action button { min-width: 290px; min-height: 78px; color: #041513; background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; font: inherit; font-size: 30px; font-weight: 600; opacity: .52; cursor: not-allowed; }
.enrollment-action span { color: var(--secondary); font-size: 27px; }
.enrollment-note { margin: 22px 0 0; color: var(--muted); font-size: 22px; }

/* 10: unmistakably internal */
.scene--internal { border-color: #36475a; }
.internal-ribbon { align-self: flex-start; margin-top: 70px; padding: 12px 18px; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; font-size: 24px; font-weight: 600; }
.scene--internal .scene__lead { margin-top: 70px; }
.scene--internal .scene__title { font-size: 76px; }
.placeholder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 78px; }
.placeholder-field { display: flex; justify-content: space-between; align-items: center; min-height: 94px; padding: 18px 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.placeholder-field span { color: var(--secondary); font-size: 24px; }
.placeholder-field strong { color: var(--muted); font-size: 24px; font-weight: 500; }
.internal-foot { margin: 68px 0 0; padding-top: 26px; border-top: 2px solid var(--accent); color: var(--secondary); font-size: 27px; }

/* V0.1.1 live-only presenter states; public and PNG export keep the complete scene. */
html[data-mode="live"]:not([data-export-mode="true"]) .scene__index-base { display: none; }
html[data-mode="live"]:not([data-export-mode="true"]) .scene__step { display: inline; }
html[data-mode="live"]:not([data-export-mode="true"]) [data-presenter-reveal="true"] { transition: opacity 300ms ease-out, transform 300ms ease-out; }
html[data-mode="live"]:not([data-export-mode="true"]) [data-presenter-reveal="true"][data-presenter-state="pending"] { opacity: 0; transform: translateY(18px); pointer-events: none; }
html[data-mode="live"]:not([data-export-mode="true"]) [data-presenter-reveal="true"][data-presenter-state="shown"] { opacity: 1; transform: translateY(0); }
html[data-mode="live"]:not([data-export-mode="true"]) [data-presenter-mode="focus"] [data-presenter-state] { transition: opacity 300ms ease-out; }
html[data-mode="live"]:not([data-export-mode="true"]) [data-presenter-mode="focus"] [data-presenter-state="dim"] { opacity: .43; }
html[data-mode="live"]:not([data-export-mode="true"]) [data-presenter-mode="focus"] [data-presenter-state="current"] { opacity: 1; }
html[data-mode="live"]:not([data-export-mode="true"]) .lesson-row,
html[data-mode="live"]:not([data-export-mode="true"]) .audience-row { position: relative; }
html[data-mode="live"]:not([data-export-mode="true"]) .lesson-row[data-presenter-state="current"]::before,
html[data-mode="live"]:not([data-export-mode="true"]) .audience-row[data-presenter-state="current"]::before { content: ''; position: absolute; top: 15px; bottom: 15px; left: -14px; width: 3px; background: var(--accent); }
html[data-mode="live"]:not([data-export-mode="true"]) .lesson-row[data-presenter-state="current"] .lesson-row__title { font-weight: 650; }
html[data-mode="live"]:not([data-export-mode="true"]) [data-presenter-mode="progress"] .flow-step,
html[data-mode="live"]:not([data-export-mode="true"]) [data-presenter-mode="progress"] .tool-step { transition: opacity 300ms ease-out, transform 300ms ease-out; }
html[data-mode="live"]:not([data-export-mode="true"]) [data-presenter-mode="progress"] .flow-step[data-presenter-state="pending"],
html[data-mode="live"]:not([data-export-mode="true"]) [data-presenter-mode="progress"] .tool-step[data-presenter-state="pending"] { opacity: .42; }
html[data-mode="live"]:not([data-export-mode="true"]) [data-presenter-mode="progress"] .flow-step[data-presenter-state="current"] { border-color: var(--accent); transform: translateY(-3px); }
html[data-mode="live"]:not([data-export-mode="true"]) [data-presenter-mode="progress"] .tool-step[data-presenter-state="current"] { transform: translateY(-3px); }
html[data-mode="live"]:not([data-export-mode="true"]) .method-footline span[data-presenter-state="pending"] { color: var(--muted); }
html[data-mode="live"]:not([data-export-mode="true"]) .method-footline i[data-presenter-state="done"] { background: var(--accent); }
html[data-mode="live"]:not([data-export-mode="true"]) .tool-step { position: relative; }
html[data-mode="live"]:not([data-export-mode="true"]) .tool-step:not(:last-child)::after { content: ''; position: absolute; top: 39px; right: -12px; width: 12px; height: 2px; background: var(--border); }
html[data-mode="live"]:not([data-export-mode="true"]) .tool-step[data-presenter-state="done"]::after { background: var(--accent); }

@media (max-width: 1370px) {
  .scene-nav { right: 6px; }
  .page-stack { align-items: flex-start; }
}
html[data-export-mode="true"] .site-topbar,
html[data-export-mode="true"] .scene-nav { display: none; }
html[data-export-mode="true"] .page-stack { gap: 0; padding: 0; }
html[data-export-mode="true"] .scene { border: 0; border-radius: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .price-stage__standard strong, .price-stage__standard strong::after, .price-stage__early, .price-stage__early p, .price-stage__button, .price-stage__reasons, [data-presenter-state] { transition-duration: 0.001ms !important; } }