/* ==========================================================================
   amaze consortium — courses (catalogue, course page, lesson player, certificate)
   Loaded after home.css and subpage.css: same tokens, type and ruled grids.
   ========================================================================== */

/* entrance for content that arrives after the data loads */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.9s var(--ease-out) both; }
.rise-2 { animation-delay: 0.08s; } .rise-3 { animation-delay: 0.16s; } .rise-4 { animation-delay: 0.24s; }

.nav-account {
  min-height: 40px; padding: 0 16px; background: transparent; color: var(--fg); cursor: pointer;
  border: 1px solid rgba(255,255,255,0.24); font: 700 13px/1 var(--font-sans); text-transform: lowercase; white-space: nowrap;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.nav-account:hover { border-color: var(--green); color: var(--green); }

.lms-notice {
  max-width: var(--container); margin: 0 auto clamp(28px, 3vw, 44px); padding: 14px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--green); background: var(--surface);
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.lms-loading { padding: calc(var(--nav-h) + 96px) var(--gutter) 0; text-align: center; font: 400 12px/1.3 var(--font-sans); letter-spacing: 0.18em; text-transform: lowercase; color: var(--faint); }
.lms-empty { padding: 56px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 15px; color: var(--muted); }

/* progress rule, used on cards, the course page and the player */
.progress { height: 3px; background: var(--line); position: relative; }
.progress > i { position: absolute; inset: 0 auto 0 0; background: var(--green); transition: width 0.8s var(--ease-out); }
.theme-light .progress > i { background: var(--accent-ink); }

/* --------------------------------------------------------------------------
   Catalogue
   -------------------------------------------------------------------------- */
.catalog-tools { display: flex; justify-content: space-between; align-items: stretch; gap: 16px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 72px); }
.chips { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.chip {
  padding: 13px 18px; background: transparent; color: var(--muted); cursor: pointer;
  border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font: 400 12px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: lowercase;
  transition: background 0.3s ease, color 0.3s ease;
}
.chip:hover { color: var(--fg); }
.chip.is-active { background: var(--fg); color: var(--bg); }
.chip span { margin-left: 8px; opacity: 0.55; }
.search {
  flex: 0 1 300px; min-width: 200px; padding: 0 16px; min-height: 40px; background: transparent; color: var(--fg);
  border: 1px solid var(--line); font: 400 14px/1 var(--font-sans); text-transform: lowercase; outline: none;
  transition: border-color 0.3s ease;
}
.search::placeholder { color: var(--faint); }
.search:focus { border-color: var(--accent-ink); }

/* Course cards — image on top, then title, instructor, badges and an action. */
.ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.ucard {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 14px 16px;
  background: var(--bg-2); border: 1px solid var(--line);
  transition: border-color 0.35s var(--ease-out), background 0.35s var(--ease-out), transform 0.5s var(--ease-out);
}
.ucard:hover { border-color: rgba(255,255,255,0.34); background: #101312; transform: translateY(-4px); }
.ucard:focus-within { border-color: var(--green); }
.ucard-media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #111413; }
.ucard-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease-out); }
.ucard:hover .ucard-media img { transform: scale(1.05); }
.ucard-blank { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(135deg, #0f1412, #0a0c0b); }
.ucard-blank svg { width: 34%; max-width: 64px; fill: none; stroke: rgba(46,242,162,0.7); stroke-width: 1.4; }
.ucard-blank b { font: 400 12px/1.3 var(--font-sans); letter-spacing: 0.18em; text-transform: lowercase; color: var(--faint); }
.ucard-flag { position: absolute; left: 0; top: 10px; padding: 6px 10px; background: var(--green); color: var(--ink); font: 700 12px/1 var(--font-sans); text-transform: lowercase; }
.ucard-save {
  position: absolute; top: 22px; right: 22px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--bg); border: 1px solid rgba(255,255,255,0.3); color: var(--fg); cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.ucard-save svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ucard-save:hover { border-color: var(--green); color: var(--green); }
.ucard-save.is-on { background: var(--green); border-color: var(--green); color: var(--ink); }
.ucard-save.is-on svg { fill: currentColor; }
.ucard-title { margin-top: 14px; font-size: 17px; font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; text-transform: lowercase; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ucard-title a { color: var(--fg); text-decoration: none; }
/* the whole card is the link; the heart sits above it */
.ucard-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.ucard-by { margin-top: 6px; font-size: 12px; color: var(--muted); text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ucard-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0; }
.b { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid var(--line); font-size: 12px; line-height: 1.2; color: var(--muted); text-transform: lowercase; white-space: nowrap; }
.b--hot { background: rgba(46,242,162,0.16); border-color: transparent; color: var(--green); font-weight: 700; }
.b .star { font-style: normal; color: #f2b42e; }
.ucard .progress { margin-bottom: 12px; }
.ucard-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; }
.ucard-price strong { display: block; font-size: 16px; letter-spacing: -0.02em; text-transform: lowercase; }
.ucard-price small { display: block; margin-top: 3px; font-size: 12px; color: var(--faint); text-transform: lowercase; white-space: nowrap; }
.ucard-btn { flex-shrink: 0; padding: 10px 12px; border: 1px solid var(--green); color: var(--green); font: 700 12px/1 var(--font-sans); text-transform: lowercase; white-space: nowrap; transition: background 0.3s ease, color 0.3s ease; }
.ucard:hover .ucard-btn { background: var(--green); color: var(--ink); }

/* A titled row of cards that pages sideways. */
#course-rails { margin-top: 28px; }
.rail + .rail, .rail-title + .ugrid { margin-top: 0; }
.rail { margin-bottom: clamp(36px, 4vw, 56px); }
.rail-title { margin-bottom: 18px; font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; text-transform: lowercase; }
.rail-title a { color: var(--green); text-underline-offset: 4px; }
.rail-view { position: relative; }
.rail-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 6px 0 4px; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > .ucard { flex: 0 0 calc((100% - 64px) / 5); min-width: 220px; scroll-snap-align: start; }
.rail-arrow {
  position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px;
  background: var(--fg); color: var(--ink); border: 0; cursor: pointer; font-size: 26px; line-height: 1; padding-bottom: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: background 0.25s ease;
}
.rail-arrow:hover { background: var(--green); }
.rail-arrow--prev { left: -18px; }
.rail-arrow--next { right: -18px; }

/* FAQ */
.faq { margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(20px, 2.2vw, 30px) 0;
  background: none; border: 0; color: var(--fg); cursor: pointer; text-align: left;
  font: 700 clamp(18px, 1.8vw, 26px)/1.15 var(--font-sans); letter-spacing: -0.03em; text-transform: lowercase;
}
.faq-q i { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); font-style: normal; font-weight: 400; font-size: 18px; transition: transform 0.5s var(--ease-out), background 0.4s ease, color 0.4s ease; }
.faq-item.is-open .faq-q i { transform: rotate(45deg); background: var(--green); color: var(--ink); border-color: var(--green); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-out); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { max-width: 720px; padding-bottom: clamp(20px, 2.2vw, 30px); font-size: 16px; line-height: 1.75; color: var(--muted); }

/* --------------------------------------------------------------------------
   Course page
   -------------------------------------------------------------------------- */
.course-hero { padding: calc(var(--nav-h) + clamp(40px, 6vw, 88px)) var(--gutter) 0; }
.course-hero-inner { max-width: var(--container); margin: 0 auto; }
.crumb { display: inline-flex; gap: 10px; margin-bottom: clamp(28px, 3.4vw, 48px); text-decoration: none; font: 400 12px/1.3 var(--font-sans); letter-spacing: 0.16em; text-transform: lowercase; color: var(--muted); transition: color 0.3s ease; }
.crumb:hover { color: var(--green); }
.course-h1 { font-size: clamp(36px, 7vw, 112px); font-weight: 700; line-height: 0.94; letter-spacing: -0.04em; text-transform: lowercase; max-width: 16ch; }
.course-hero-foot { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 8vw, 128px); align-items: end; margin-top: clamp(36px, 5vw, 72px); padding: clamp(28px, 3vw, 44px) 0 clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.course-actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.course-actions .progress { width: 100%; max-width: 360px; }
.course-actions small { font: 400 12px/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: lowercase; color: var(--faint); }
.course-facts { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.course-facts li { padding: 18px 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.course-facts small { display: block; margin-bottom: 12px; font: 400 12px/1.3 var(--font-sans); letter-spacing: 0.18em; text-transform: lowercase; color: var(--faint); }
.course-facts span { font-size: clamp(16px, 1.5vw, 22px); font-weight: 700; letter-spacing: -0.03em; text-transform: lowercase; }

.course-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(40px, 6vw, 96px); max-width: var(--container); margin: 0 auto; align-items: start; }
.course-body h2 { margin-bottom: 24px; font: 400 12px/1.3 var(--font-sans); letter-spacing: 0.16em; text-transform: lowercase; color: var(--green); }
.course-block + .course-block { margin-top: clamp(56px, 7vw, 96px); }
.course-desc { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.5; letter-spacing: -0.015em; color: var(--fg); }
.outcomes { list-style: none; border-top: 1px solid var(--line); counter-reset: o; }
.outcomes li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; counter-increment: o; }
.outcomes li::before { content: counter(o, decimal-leading-zero); font: 400 12px/2.1 var(--font-sans); letter-spacing: 0.14em; color: var(--green); }

.module { border-top: 1px solid var(--line); }
.module:last-child { border-bottom: 1px solid var(--line); }
.module-head { width: 100%; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: baseline; padding: 22px 0; background: none; border: 0; color: var(--fg); cursor: pointer; text-align: left; }
.module-head small { font: 400 12px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--green); }
.module-head strong { display: block; font-size: clamp(19px, 1.9vw, 26px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; text-transform: lowercase; }
.module-head em { display: block; margin-top: 8px; font-style: normal; font-size: 14px; color: var(--muted); }
.module-head span { font: 400 12px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: lowercase; color: var(--faint); white-space: nowrap; }
.module-lessons { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-out); }
.module.is-open .module-lessons { grid-template-rows: 1fr; }
.module-lessons > ul { overflow: hidden; list-style: none; }
.lesson-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--fg); font-size: 15px; text-transform: lowercase; transition: color 0.3s ease, padding 0.5s var(--ease-out); }
a.lesson-row:hover { color: var(--green); padding-left: 8px; }
.lesson-row .mark { width: 14px; height: 14px; border: 1px solid var(--faint); justify-self: start; }
.lesson-row.is-done .mark { background: var(--green); border-color: var(--green); }
.lesson-row.is-current { color: var(--green); }
.lesson-row.is-current .mark { border-color: var(--green); }
.lesson-row small { font: 400 12px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--faint); white-space: nowrap; }
.lesson-row small b { font-weight: 400; color: var(--green); margin-right: 10px; }

.course-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
.side-card { padding: 22px; border: 1px solid var(--line); background: var(--surface); }
.side-card h3 { margin-bottom: 18px; font: 400 12px/1.3 var(--font-sans); letter-spacing: 0.18em; text-transform: lowercase; color: var(--faint); }
.instructor { display: flex; align-items: center; gap: 14px; }
.instructor-photo { width: 56px; height: 56px; flex-shrink: 0; display: grid; place-items: center; background: var(--green); color: var(--ink); font-weight: 700; font-size: 20px; text-transform: uppercase; overflow: hidden; }
.instructor-photo img { width: 100%; height: 100%; object-fit: cover; }
.instructor strong { display: block; font-size: 17px; letter-spacing: -0.025em; text-transform: lowercase; }
.instructor span { font-size: 13px; color: var(--muted); text-transform: lowercase; }
.includes { list-style: none; }
.includes li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; text-transform: lowercase; color: var(--muted); }
.includes li:first-child { border-top: 0; padding-top: 0; }
.includes b { font-weight: 700; color: var(--fg); }

/* --------------------------------------------------------------------------
   Lesson player
   -------------------------------------------------------------------------- */
body.view-learn { overflow-x: clip; }
.player-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: 58px; padding: 0 20px;
  display: flex; align-items: center; gap: 18px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.player-bar a.exit { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); text-decoration: none; font-size: 15px; transition: border-color 0.3s, color 0.3s; }
.player-bar a.exit:hover { border-color: var(--green); color: var(--green); }
.player-bar strong { flex: 1; min-width: 0; font-size: 15px; letter-spacing: -0.02em; text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-bar .pct { font: 400 12px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--muted); white-space: nowrap; }
.player-bar .progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.outline-toggle { display: none; min-height: 36px; padding: 0 14px; background: none; border: 1px solid var(--line); color: var(--fg); font: 700 12px/1 var(--font-sans); text-transform: lowercase; cursor: pointer; }

.player { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 100vh; padding-top: 58px; }
.player-outline { position: sticky; top: 58px; height: calc(100vh - 58px); overflow-y: auto; padding: 8px 20px 40px; border-right: 1px solid var(--line); background: var(--bg-2); scrollbar-width: thin; }
.player-outline .module-head { grid-template-columns: 30px 1fr; padding: 18px 0 14px; cursor: default; }
.player-outline .module-head strong { font-size: 15px; }
.player-outline .module:last-child { border-bottom: 0; }
.player-outline .lesson-row { grid-template-columns: 30px 1fr auto; font-size: 14px; padding: 11px 0; }
.player-main { padding: clamp(32px, 5vw, 72px) clamp(20px, 5vw, 72px) 96px; }
.lesson { max-width: 760px; margin: 0 auto; }
.lesson-kicker { font: 400 12px/1.3 var(--font-sans); letter-spacing: 0.16em; text-transform: lowercase; color: var(--green); }
.lesson-title { margin: 18px 0 clamp(28px, 3.4vw, 44px); font-size: clamp(32px, 4.4vw, 60px); font-weight: 700; line-height: 0.98; letter-spacing: -0.04em; text-transform: lowercase; }
.lesson-video { position: relative; aspect-ratio: 16/9; background: #000; border: 1px solid var(--line); margin-bottom: 36px; }
.lesson-video iframe, .lesson-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.prose { font-size: 17px; line-height: 1.75; color: rgba(243,245,242,0.82); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; text-transform: lowercase; color: var(--fg); }
.prose h3 { margin-top: 1.6em; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
.prose strong { color: var(--fg); font-weight: 700; }
.prose a { color: var(--green); }
.prose ul, .prose ol { padding-left: 0; list-style: none; border-top: 1px solid var(--line); }
.prose li { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line); position: relative; }
.prose li::before { content: ''; position: absolute; left: 0; top: 23px; width: 8px; height: 8px; background: var(--green); }
.prose code { padding: 2px 6px; background: rgba(255,255,255,0.08); font: 400 0.88em/1.4 ui-monospace, 'SFMono-Regular', Consolas, monospace; color: var(--fg); }
.prose pre { padding: 20px 22px; overflow-x: auto; background: #0e1110; border: 1px solid var(--line); border-left: 3px solid var(--green); }
.prose pre code { padding: 0; background: none; font-size: 14px; line-height: 1.7; }

.quiz-q { min-width: 0; padding: 28px 0; border: solid var(--line); border-width: 1px 0 0; }
.quiz-q:last-of-type { border-bottom-width: 1px; }
.quiz-q h3 { display: grid; grid-template-columns: 40px 1fr; font-size: clamp(18px, 1.8vw, 23px); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.quiz-q h3 small { font: 400 12px/2.2 var(--font-sans); letter-spacing: 0.14em; color: var(--green); }
.quiz-options { display: grid; gap: 8px; margin: 18px 0 0 40px; }
.quiz-option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); cursor: pointer; font-size: 15px; transition: border-color 0.3s ease, background 0.3s ease; }
.quiz-option:hover { border-color: rgba(255,255,255,0.4); }
.quiz-option input { appearance: none; width: 14px; height: 14px; flex-shrink: 0; border: 1px solid var(--faint); margin: 0; }
.quiz-option input:checked { background: var(--green); border-color: var(--green); }
.quiz-option:has(input:checked) { border-color: var(--green); }
.quiz.is-marked .quiz-option { cursor: default; }
.quiz.is-marked .quiz-option.is-right { border-color: var(--green); background: rgba(46,242,162,0.08); }
.quiz.is-marked .quiz-option.is-wrong { border-color: #ff6b5e; background: rgba(255,107,94,0.08); }
.quiz-why { display: none; margin: 14px 0 0 40px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.quiz.is-marked .quiz-why { display: block; }
.quiz-result { margin-top: 28px; padding: 22px; border: 1px solid var(--line); border-left: 3px solid var(--green); background: var(--surface); }
.quiz-result strong { display: block; font-size: 32px; letter-spacing: -0.04em; line-height: 1; }
.quiz-result span { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); }

.lesson-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1px solid var(--line); }
.lesson-foot .btn-outline[disabled], .lesson-foot .btn-primary[disabled] { opacity: 0.35; pointer-events: none; }
button.btn-primary, button.btn-outline { font-family: var(--font-sans); }
.btn-back { flex-direction: row-reverse; padding-left: 0; padding-right: 24px; }
.btn-back .btn-arrow { margin-left: 0; margin-right: 22px; border-left: 0; border-right: 1px solid rgba(255,255,255,0.24); }

.gate { padding: clamp(32px, 4vw, 56px); border: 1px solid var(--line); background: var(--surface); }
.gate strong, .gate h1 { display: block; max-width: 18ch; font-size: clamp(26px, 3vw, 40px); line-height: 1; letter-spacing: -0.04em; text-transform: lowercase; }
.gate p { max-width: 460px; margin: 18px 0 28px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.gate .hero-buttons { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   Account dialog
   -------------------------------------------------------------------------- */
.dialog { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; background: rgba(5,6,6,0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s; }
.dialog.is-open { opacity: 1; visibility: visible; }
.dialog-box { position: relative; width: min(440px, 100%); max-height: 100%; overflow-y: auto; padding: clamp(26px, 4vw, 40px); background: var(--bg-2); border: 1px solid rgba(255,255,255,0.18); transform: translateY(18px); transition: transform 0.5s var(--ease-out); }
.dialog.is-open .dialog-box { transform: none; }
.dialog-close { position: absolute; top: 0; right: 0; width: 44px; height: 44px; background: none; border: 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--fg); font-size: 15px; cursor: pointer; }
.dialog h2 { margin: 6px 0 8px; font-size: 30px; line-height: 1; letter-spacing: -0.04em; text-transform: lowercase; }
.dialog p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.field { display: block; margin-top: 18px; }
.field span { display: block; margin-bottom: 8px; font: 400 12px/1.3 var(--font-sans); letter-spacing: 0.18em; text-transform: lowercase; color: var(--faint); }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 14px; background: var(--bg); color: var(--fg); border: 1px solid var(--line);
  font: 400 15px/1.4 var(--font-sans); outline: none; transition: border-color 0.3s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--green); }
.dialog .btn-primary { width: 100%; justify-content: space-between; margin-top: 24px; }
.dialog-msg { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--green); background: var(--surface); font-size: 13px; line-height: 1.5; color: var(--fg); }
.dialog-msg.is-error { border-left-color: #ff6b5e; }
.dialog-links { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.linkish { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; font: 400 13px/1.4 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--green); }
.account-list { list-style: none; margin-top: 22px; border-top: 1px solid var(--line); }
.account-list a, .account-list button { display: flex; justify-content: space-between; width: 100%; padding: 15px 0; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--fg); cursor: pointer; text-decoration: none; text-align: left; font: 700 15px/1 var(--font-sans); text-transform: lowercase; transition: color 0.3s, padding 0.5s var(--ease-out); }
.account-list a:hover, .account-list button:hover { color: var(--green); padding-left: 8px; }

/* --------------------------------------------------------------------------
   Certificate
   -------------------------------------------------------------------------- */
.cert-wrap { min-height: 100vh; display: grid; place-items: center; padding: calc(var(--nav-h) + 32px) var(--gutter) 64px; }
.cert-wrap > div { width: min(1040px, 100%); }
.cert-tools { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; }
.cert-tools .field { margin: 0; min-width: 260px; }
.cert {
  position: relative; width: min(1040px, 100%); aspect-ratio: 1.414 / 1; padding: clamp(28px, 5vw, 72px);
  display: flex; flex-direction: column; background: var(--bone); color: var(--ink); container-type: inline-size;
}
.cert::before { content: ''; position: absolute; inset: clamp(10px, 1.6vw, 20px); border: 1px solid rgba(10,12,11,0.25); pointer-events: none; }
.cert-top { display: flex; justify-content: space-between; align-items: flex-start; font: 400 max(8px, 1.1cqw)/1.4 var(--font-sans); letter-spacing: 0.18em; text-transform: lowercase; color: rgba(10,12,11,0.6); }
.cert-top svg { width: 6cqw; height: 6cqw; fill: #0a7a52; }
.cert-kicker { margin-top: auto; font: 400 max(8px, 1.2cqw)/1.4 var(--font-sans); letter-spacing: 0.18em; text-transform: lowercase; color: #0a7a52; }
.cert-name { margin-top: 1.4cqw; font-size: 7.4cqw; font-weight: 700; line-height: 0.94; letter-spacing: -0.045em; }
.cert-line { max-width: 62cqw; margin-top: 2.4cqw; font-size: max(10px, 1.75cqw); line-height: 1.5; color: rgba(10,12,11,0.7); }
.cert-line b { color: var(--ink); }
.cert-foot { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: auto; padding-top: 2cqw; border-top: 1px solid rgba(10,12,11,0.25); font-size: max(9px, 1.4cqw); text-transform: lowercase; }
.cert-foot small { display: block; margin-bottom: 0.6cqw; font: 400 max(7px, 0.95cqw)/1.3 var(--font-sans); letter-spacing: 0.18em; color: rgba(10,12,11,0.55); }
.cert-foot div:last-child { text-align: right; text-transform: none; }
.cert-foot div:last-child small { text-transform: lowercase; }

@media print {
  @page { size: A4 landscape; margin: 0; }
  body { background: #fff; }
  nav, .cert-tools, .scroll-progress, footer { display: none !important; }
  .cert-wrap { padding: 0; min-height: 0; display: block; }
  .cert { width: 100vw; height: 100vh; aspect-ratio: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) { .rail-track > .ucard { flex-basis: calc((100% - 48px) / 4); } }
@media (max-width: 1100px) {
  .rail-track > .ucard { flex-basis: calc((100% - 32px) / 3); }
  .rail-arrow--prev { left: -8px; } .rail-arrow--next { right: -8px; }
  .course-hero-foot { grid-template-columns: 1fr; align-items: start; }
  .course-body { grid-template-columns: 1fr; }
  .course-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .course-side .side-card { flex: 1 1 260px; }
  .nav-account { display: inline-flex; align-items: center; }
}
@media (max-width: 900px) {
  .player { grid-template-columns: 1fr; }
  .outline-toggle { display: block; }
  .player-outline { position: fixed; top: 58px; left: 0; bottom: 0; z-index: 890; width: min(340px, 88vw); height: auto; transform: translateX(-102%); transition: transform 0.5s var(--ease-out); }
  .player-outline.is-open { transform: none; }
  .player-bar .pct { display: none; }
}
@media (max-width: 640px) {
  .rail-track > .ucard { flex-basis: 78%; }
  .rail-arrow { display: none; }
  .ugrid { grid-template-columns: 1fr; }
  .course-facts { grid-template-columns: repeat(2, 1fr); }
  .search { flex-basis: 100%; }
  .quiz-options, .quiz-why { margin-left: 0; }
  .lesson-foot > * { flex: 1 1 100%; justify-content: space-between; }
}

/* ==========================================================================
   Learning-platform additions: ratings, reviews, tabs, notes, Q&A, forms,
   announcements, locked lessons, the learner dashboard
   ========================================================================== */
.stars { color: var(--green); letter-spacing: 0.06em; }
.stars i { font-style: normal; opacity: 0.25; }
.theme-light .stars { color: var(--accent-ink); }
.course-social { margin-top: 12px; font: 400 12px/1.4 var(--font-sans); letter-spacing: 0.04em; text-transform: lowercase; color: var(--muted); transition: color 0.5s var(--ease-out); }
.course-social--lg { margin-top: clamp(18px, 2vw, 28px); font-size: 14px; }

.select {
  min-height: 40px; padding: 0 34px 0 14px; background: transparent; color: var(--fg); cursor: pointer;
  border: 1px solid var(--line); font: 400 13px/1 var(--font-sans); text-transform: lowercase; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.select option { background: var(--bg-2); color: var(--fg); }
.select:focus { border-color: var(--green); }
.catalog-filters { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 320px; justify-content: flex-end; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tags li { padding: 9px 14px; border: 1px solid var(--line); font-size: 13px; text-transform: lowercase; }
.plain-list { list-style: none; border-top: 1px solid var(--line); }
.plain-list li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--muted); }
.plain-list li::before { content: ''; position: absolute; left: 0; top: 22px; width: 8px; height: 8px; background: var(--green); }

.news { list-style: none; border-top: 1px solid var(--line); }
.news li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.news small, .review-top small { font: 400 12px/1.3 var(--font-sans); letter-spacing: 0.16em; text-transform: lowercase; color: var(--faint); }
.news strong { display: block; margin: 8px 0 4px; font-size: 20px; letter-spacing: -0.03em; text-transform: lowercase; }
.news .prose { font-size: 15px; }

/* reviews */
.review-summary { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.review-summary strong { display: block; font-size: clamp(48px, 6vw, 84px); line-height: 0.86; letter-spacing: -0.05em; }
.review-summary .stars { display: block; margin: 12px 0 6px; }
.review-summary small { font: 400 12px/1.3 var(--font-sans); letter-spacing: 0.16em; text-transform: lowercase; color: var(--faint); }
.review-summary ul { list-style: none; display: grid; gap: 8px; }
.review-summary li { display: grid; grid-template-columns: 34px 1fr 24px; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); }
.reviews { list-style: none; }
.reviews li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.review-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.review-top strong { font-size: 16px; letter-spacing: -0.02em; text-transform: lowercase; }
.review-top .linkish { margin-left: auto; font-size: 12px; }
.reviews p, .qa-item p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.review-form { margin-top: 24px; padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.review-form .btn-outline { margin-top: 20px; }
.review-form .hint { display: block; margin-top: 12px; font-size: 12px; color: var(--faint); }
.star-pick { display: inline-flex; flex-direction: row-reverse; margin-top: 14px; }
.star-pick label { cursor: pointer; padding-right: 4px; font-size: 30px; line-height: 1; color: rgba(255,255,255,0.2); transition: color 0.2s ease; }
.star-pick input { position: absolute; opacity: 0; pointer-events: none; }
.star-pick label:hover, .star-pick label:hover ~ label, .star-pick label:has(input:checked), .star-pick label:has(input:checked) ~ label { color: var(--green); }
.star-pick label:has(input:focus-visible) { outline: 2px solid var(--green); }

/* player: tabs under the lesson */
.tabs-bar { display: flex; flex-wrap: wrap; margin-top: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.tab { padding: 14px 18px; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; font: 700 14px/1 var(--font-sans); text-transform: lowercase; transition: color 0.25s ease, border-color 0.25s ease; }
.tab:hover { color: var(--fg); }
.tab.is-active { color: var(--fg); border-bottom-color: var(--green); }
.tab span { margin-left: 8px; font-weight: 400; font-size: 12px; color: var(--faint); }
.tab-panel { padding-top: 28px; }
.tab-panel .hint { display: block; margin-top: 10px; font-size: 12px; color: var(--faint); }
#note { min-height: 150px; resize: vertical; line-height: 1.6; }
.resources { list-style: none; border-top: 1px solid var(--line); }
.resources a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; font-size: 15px; transition: color 0.3s ease, padding 0.5s var(--ease-out); }
.resources a:hover { color: var(--green); padding-left: 8px; }
.resources i { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--line); font-style: normal; }

.qa-ask .btn-outline { margin-top: 16px; }
.qa-thread { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.qa-replies { margin: 16px 0 0 clamp(16px, 3vw, 36px); padding-left: 18px; border-left: 1px solid var(--line); }
.qa-replies .qa-item { padding: 12px 0; }
.qa-item.is-staff > p { color: var(--fg); }
.badge-staff { padding: 3px 7px; background: var(--green); color: var(--ink); font: 700 12px/1.2 var(--font-sans); letter-spacing: 0.08em; text-transform: lowercase; }
.qa-reply { display: flex; gap: 8px; margin-top: 12px; }
.qa-reply input { flex: 1; min-width: 0; padding: 10px 12px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); font: 400 14px/1.4 var(--font-sans); outline: none; }
.qa-reply input:focus { border-color: var(--green); }
.qa-reply button { padding: 0 14px; background: transparent; color: var(--fg); border: 1px solid rgba(255,255,255,0.24); cursor: pointer; font: 700 12px/1 var(--font-sans); text-transform: lowercase; }
.qa-reply button:hover { border-color: var(--green); color: var(--green); }

/* form (test / assignment) lessons */
.lesson-form { border: 1px solid var(--line); background: #fff; }
.lesson-form iframe { display: block; width: 100%; height: min(78vh, 900px); border: 0; }
.form-alt { margin-top: 14px; font-size: 13px; color: var(--muted); }
.form-alt a { color: var(--green); }

/* locked-order courses */
.lesson-row.is-locked { color: var(--faint); }
.lesson-row.is-locked .mark { border-style: dashed; }
.player-outline .module-head { grid-template-columns: 30px 1fr auto; cursor: pointer; }
.player-outline .module-head span { font-size: 12px; }

/* dashboard */
.rows-plain { margin-top: 24px; border-top: 1px solid var(--line); }
.rows-plain > div { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 22px 0; border-bottom: 1px solid var(--line); }
.rows-plain strong { display: block; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.05; letter-spacing: -0.035em; text-transform: lowercase; }
.rows-plain small { display: block; margin-top: 8px; font: 400 12px/1.3 var(--font-sans); letter-spacing: 0.14em; text-transform: lowercase; color: var(--faint); }
.verified { display: flex; align-items: center; gap: 12px; padding: 0 16px; min-height: 54px; border: 1px solid var(--green); font-size: 13px; text-transform: lowercase; }
.verified::before { content: ''; width: 8px; height: 8px; background: var(--green); flex-shrink: 0; }

@media (max-width: 640px) {
  .review-summary { grid-template-columns: 1fr; }
  .catalog-filters { justify-content: stretch; }
  .catalog-filters .select { flex: 1; }
  .lesson-form iframe { height: 72vh; }
}
@media print { .verified { display: none; } }

/* lesson-type icons */
.lesson-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kind { display: grid; place-items: center; flex-shrink: 0; }
.kind-icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: miter; opacity: 0.75; }
.kind-icon .solid { fill: currentColor; stroke: none; }
.kind--video .kind-icon { color: var(--green); opacity: 1; }
.lesson-kicker.lesson-name .kind-icon { opacity: 1; }

/* --------------------------------------------------------------------------
   academy: courses / programs / webinars sections, and live classes
   -------------------------------------------------------------------------- */
#academy-browse { margin-top: clamp(36px, 4vw, 56px); }
#course-results { margin-top: clamp(36px, 4vw, 56px); }
#rail-top .rail:last-child { margin-bottom: clamp(48px, 6vw, 88px); }
.aca-block { padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.aca-block + .aca-block { margin-top: clamp(56px, 7vw, 104px); }
.aca-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(22px, 2.4vw, 32px); }
.aca-title { font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; }
.aca-all { flex: none; padding-bottom: 4px; border-bottom: 1px solid currentColor; color: var(--fg); font: 700 12px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: lowercase; text-decoration: none; white-space: nowrap; transition: color 0.3s; }
.aca-all:hover { color: var(--green); }
.aca-all .aca-arrow { display: inline-block; margin-left: 6px; transition: transform 0.4s var(--ease-out); }
.aca-all:hover .aca-arrow { transform: translateX(4px); }
.aca-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.aca-empty { padding: 34px clamp(20px, 2.4vw, 32px); border: 1px dashed var(--line); font-size: 15px; color: var(--muted); }
.b--live { background: var(--green); border-color: transparent; color: var(--ink); font-weight: 700; }
.lesson-row small b.is-live { color: var(--ink); background: var(--green); padding: 3px 6px; }

/* a live class inside the player */
.live { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(28px, 3.6vw, 48px); border: 1px solid var(--line); background: var(--surface); }
.live-flag { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: lowercase; color: var(--faint); }
.live-flag::before { content: ''; width: 8px; height: 8px; background: currentColor; }
.live--upcoming .live-flag { color: var(--green); }
.live--live { border-color: var(--green); }
.live--live .live-flag { color: var(--green); }
.live--live .live-flag::before { animation: live-pulse 1.4s ease-in-out infinite; }
.live-when { font-size: clamp(24px, 3vw, 40px); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; text-transform: lowercase; }
.live small { font-size: 13px; color: var(--muted); }
.live .hero-buttons { justify-content: flex-start; margin-top: 12px; }
.live .hero-buttons:empty { display: none; }
@keyframes live-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .live--live .live-flag::before { animation: none; } }
@media (max-width: 1000px) { .aca-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .aca-cards { grid-template-columns: 1fr; }
  .aca-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* the academy list starts straight under the page top: no heading of its own, no tall gap */
#catalogue { padding-top: clamp(28px, 3vw, 44px); }
#catalogue .catalog-tools { margin-top: 0; }
#catalogue #lms-notice:not(:empty) { margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   academy: the featured card — one entry, set apart from everything else.
   a light runs round its edge, it glows, and it is several times the size
   of an ordinary card.
   -------------------------------------------------------------------------- */
@property --feat-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.feat-wrap { margin-bottom: clamp(40px, 5vw, 72px); }
.feat-top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.feat-label { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: lowercase; color: var(--green); white-space: nowrap; }
.feat-label::before { content: '★'; font-size: 13px; letter-spacing: 0; }
.feat-top::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, rgba(46,242,162,0.55), var(--line) 40%); }
.feat { position: relative; padding: 2px; background: rgba(46,242,162,0.22); box-shadow: 0 0 0 1px rgba(46,242,162,0.08), 0 30px 120px -40px rgba(46,242,162,0.55), 0 0 60px -30px rgba(46,242,162,0.5); }
/* the travelling light on the border */
.feat::before { content: ''; position: absolute; inset: 0; background: conic-gradient(from var(--feat-turn), transparent 0 58%, rgba(46,242,162,0.9) 74%, #f2fff9 82%, rgba(46,242,162,0.9) 90%, transparent 100%); animation: feat-turn 7s linear infinite; }
@keyframes feat-turn { to { --feat-turn: 360deg; } }
.feat-in { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); background: radial-gradient(90% 120% at 100% 0%, rgba(46,242,162,0.16), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgba(46,242,162,0.08), transparent 60%), #070a09; }
.feat-media { position: relative; display: block; min-height: clamp(280px, 30vw, 440px); overflow: hidden; background: #0b0f0d; }
.feat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.feat:hover .feat-media img { transform: scale(1.05); }
.feat-blank { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(60% 60% at 50% 45%, rgba(46,242,162,0.18), transparent 70%), linear-gradient(135deg, #101714, #070908); }
.feat-blank svg { width: 26%; max-width: 120px; fill: none; stroke: var(--green); stroke-width: 1.2; filter: drop-shadow(0 0 18px rgba(46,242,162,0.55)); }
.feat-blank b { font: 400 12px/1.3 var(--font-sans); letter-spacing: 0.22em; text-transform: lowercase; color: rgba(243,245,242,0.6); }
/* a band of light crosses the picture now and then */
.feat-sheen { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.16) 50%, transparent 60%); transform: translateX(-120%); animation: feat-sheen 6s var(--ease-out) 1.2s infinite; pointer-events: none; }
@keyframes feat-sheen { 0% { transform: translateX(-120%); } 28%, 100% { transform: translateX(120%); } }
.feat-body { display: flex; flex-direction: column; padding: clamp(24px, 3.4vw, 52px); }
.feat-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 12px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: lowercase; }
.feat-star { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px 8px; background: var(--green); color: var(--ink); }
.feat-star i { font-style: normal; font-size: 13px; letter-spacing: 0; animation: feat-star 2.6s ease-in-out infinite; }
@keyframes feat-star { 50% { transform: scale(1.35) rotate(72deg); } }
.feat-state { padding: 8px 11px 7px; border: 1px solid rgba(46,242,162,0.5); color: var(--green); }
.feat-state.is-live { background: var(--green); color: var(--ink); }
.feat-title { margin-top: clamp(18px, 2.2vw, 30px); font-size: clamp(34px, 5vw, 78px); font-weight: 700; line-height: 0.94; letter-spacing: -0.05em; text-transform: lowercase; text-wrap: balance; }
.feat-title a { color: var(--fg); text-decoration: none; background: linear-gradient(var(--green), var(--green)) 0 100% / 0 3px no-repeat; transition: background-size 0.7s var(--ease-out); }
.feat-title a:hover { background-size: 100% 3px; }
.feat-tag { max-width: 540px; margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: var(--muted); }
.feat-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(22px, 2.6vw, 36px) 0; padding: 0; list-style: none; border-top: 1px solid rgba(46,242,162,0.28); }
.feat-facts li { padding: 14px 12px 0; border-right: 1px solid var(--line); font-size: 13px; line-height: 1.4; text-transform: lowercase; }
.feat-facts li:first-child { padding-left: 0; }
.feat-facts li:last-child { border-right: 0; }
.feat-facts small { display: block; margin-bottom: 6px; font: 400 12px/1 var(--font-sans); letter-spacing: 0.16em; color: var(--faint); }
.feat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: auto; }
.feat-by { font-size: 13px; color: var(--muted); text-transform: lowercase; }
.feat-by b { color: var(--fg); }
/* switching to another featured entry */
.feat.is-new .feat-body > * { animation: rise 0.8s var(--ease-out) both; }
.feat.is-new .feat-body > :nth-child(2) { animation-delay: 0.05s; } .feat.is-new .feat-body > :nth-child(3) { animation-delay: 0.1s; }
.feat.is-new .feat-body > :nth-child(4) { animation-delay: 0.15s; } .feat.is-new .feat-body > :nth-child(5) { animation-delay: 0.2s; }
.feat.is-new .feat-media { animation: feat-wipe 0.9s var(--ease-out) both; }
.feat.is-new .feat-in { animation: feat-swipe 0.8s var(--ease-out) both; }
@keyframes feat-swipe { from { opacity: 0; translate: 70px 0; } }
.feat-stage { display: grid; overflow: clip; overflow-clip-margin: 140px; }
.feat { display: grid; }
@keyframes feat-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* more than one featured entry: numbered tabs under the card */
.feat-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 12px; border: 1px solid var(--line); }
.feat-tabs button { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 16px; background: none; border: 0; border-left: 1px solid var(--line); color: var(--faint); text-align: left; cursor: pointer; transition: color 0.3s ease, background 0.3s ease; }
.feat-tabs button:first-child { border-left: 0; }
.feat-tabs button:hover { color: var(--fg); background: var(--surface); }
.feat-tabs button.is-on { color: var(--fg); background: rgba(46,242,162,0.08); }
.feat-tabs button.is-on::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: rgba(46,242,162,0.28); }
/* the timer: it fills across the active tab, then the next entry comes in */
.feat-tabs i { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: 0 50%; }
.feat-tabs button.is-on i { animation: feat-bar 6s linear forwards; }
.feat-wrap:hover .feat-tabs i, .feat-wrap:focus-within .feat-tabs i, .feat-wrap.is-away .feat-tabs i { animation-play-state: paused; }
@keyframes feat-bar { to { transform: scaleX(1); } }
.feat-tabs small { grid-row: span 2; font: 400 12px/1.6 var(--font-sans); letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.feat-tabs span { font: 700 13px/1.25 var(--font-sans); text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-tabs em { font: 400 12px/1 var(--font-sans); font-style: normal; letter-spacing: 0.14em; text-transform: lowercase; }
@media (max-width: 900px) {
  .feat-in { grid-template-columns: 1fr; }
  .feat-media { min-height: 0; aspect-ratio: 16/10; }
  .feat-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-facts li:nth-child(odd) { padding-left: 0; } .feat-facts li:nth-child(even) { border-right: 0; }
  .feat-facts li:nth-child(n+3) { margin-top: 14px; border-top: 1px solid var(--line); }
  .feat-tabs { grid-auto-columns: minmax(180px, 1fr); overflow-x: auto; scrollbar-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .feat::before, .feat-sheen, .feat-star i, .feat.is-new .feat-body > *, .feat.is-new .feat-media, .feat.is-new .feat-in { animation: none; }
  .feat::before { background: rgba(46,242,162,0.7); }
}

/* the academy page top is just its label and headline; the list starts right under it */
.view-catalog .page-hero { padding-bottom: clamp(32px, 4vw, 56px); }

/* --------------------------------------------------------------------------
   academy: enrolment and payment page (academy/pay.html)
   -------------------------------------------------------------------------- */
.pay { padding: calc(var(--nav-h) + clamp(36px, 5vw, 72px)) var(--gutter) clamp(72px, 9vw, 128px); }
.pay-inner { max-width: var(--container); margin: 0 auto; }
.pay-h1 { margin-top: 18px; font-size: clamp(40px, 6.4vw, 96px); font-weight: 700; line-height: 0.94; letter-spacing: -0.055em; text-transform: lowercase; }
.pay-h1 em { font-style: normal; color: var(--green); }
/* where you are: account → payment → confirmation */
.pay-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(32px, 4vw, 56px) 0 clamp(28px, 3.4vw, 48px); padding: 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pay-steps li { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 16px 18px 0; color: var(--faint); }
.pay-steps li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.pay-steps b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); font: 700 12px/1 var(--font-sans); letter-spacing: 0.06em; }
.pay-steps strong { display: block; font-size: 14px; letter-spacing: -0.01em; text-transform: lowercase; }
.pay-steps span { display: block; margin-top: 4px; font-size: 12px; text-transform: lowercase; }
.pay-steps li.is-on { color: var(--fg); }
.pay-steps li.is-on b { background: var(--green); border-color: var(--green); color: var(--ink); }
.pay-steps li.is-on::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--green); }
.pay-steps li.is-done { color: var(--muted); }
.pay-steps li.is-done b { border-color: var(--green); color: var(--green); }
.pay-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); gap: clamp(24px, 4vw, 64px); align-items: start; }
.pay-panel { padding: clamp(22px, 2.6vw, 36px) 0; border-top: 1px solid var(--line); }
.pay-main > .pay-panel:first-child { border-top: 0; padding-top: 0; }
.pay-panel h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.03em; text-transform: lowercase; }
.pay-panel h2 small { font: 400 12px/1 var(--font-sans); letter-spacing: 0.16em; color: var(--green); }
.pay-lead { max-width: 560px; margin-bottom: 24px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.pay-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 14px; border: 1px solid var(--line); }
.pay-who > div { padding: 16px 18px; min-width: 0; }
.pay-who > div + div { border-left: 1px solid var(--line); }
.pay-who dt { margin-bottom: 8px; font: 400 12px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: lowercase; color: var(--faint); }
.pay-who dd { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; text-transform: lowercase; overflow-wrap: anywhere; }
.pay-who code { padding: 5px 8px; background: rgba(46,242,162,0.12); color: var(--green); font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: none; }
.pay-how, .pay-gets, .pay-facts { margin: 0; padding: 0; list-style: none; }
.pay-how li { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.pay-how li:first-child { border-top: 0; padding-top: 0; }
.pay-how b { flex: none; width: 28px; padding-top: 3px; font: 400 12px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--green); }
.pay-how strong { display: block; font-size: 16px; letter-spacing: -0.015em; text-transform: lowercase; }
.pay-how span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.pay-note { margin-top: 24px; padding: 20px 22px; border: 1px solid rgba(46,242,162,0.35); background: rgba(46,242,162,0.05); }
.pay-note .prose { margin-top: 12px; font-size: 15px; }
.pay-gets li { position: relative; padding: 12px 0 12px 28px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--muted); }
.pay-gets li:first-child { border-top: 0; padding-top: 0; }
.pay-gets li::before { content: ''; position: absolute; left: 2px; top: 18px; width: 9px; height: 9px; background: var(--green); }
.pay-gets li:first-child::before { top: 6px; }
.pay-status { margin-bottom: clamp(22px, 2.6vw, 36px); padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--green); background: rgba(46,242,162,0.06); }
.pay-status strong { display: block; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.02em; text-transform: lowercase; }
.pay-status p { max-width: 620px; margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.pay-status .btn-primary { margin-top: 20px; }
/* the order summary: stays in view while the left column scrolls */
.pay-side { position: sticky; top: 92px; }
.pay-card { background: var(--bg-2); border: 1px solid rgba(46,242,162,0.4); box-shadow: 0 30px 100px -50px rgba(46,242,162,0.5); }
.pay-cover { position: relative; aspect-ratio: 21/9; overflow: hidden; background: #0b0f0d; }
.pay-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pay-type { position: absolute; left: 0; top: 14px; padding: 7px 11px 6px; background: var(--green); color: var(--ink); font: 700 12px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: lowercase; }
.pay-card-body { padding: clamp(20px, 2.2vw, 28px); }
.pay-card h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; text-transform: lowercase; }
.pay-by { margin-top: 8px; font-size: 13px; color: var(--muted); text-transform: lowercase; }
.pay-facts { margin-top: 20px; border-top: 1px solid var(--line); }
.pay-facts li, .pay-lines div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; text-transform: lowercase; }
.pay-facts span, .pay-lines span { color: var(--muted); }
.pay-facts b { font-weight: 400; text-align: right; }
.pay-lines { margin-top: 18px; }
.pay-lines .pay-total { padding-top: 16px; border-bottom: 0; }
.pay-lines .pay-total span { color: var(--fg); font-weight: 700; }
.pay-lines .pay-total b { font-size: clamp(30px, 3vw, 42px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--green); }
.pay-now { display: flex; justify-content: space-between; width: 100%; margin-top: 18px; }
.pay-now.is-off { opacity: 0.45; pointer-events: none; }
.pay-fine { display: flex; gap: 10px; margin-top: 14px; font-size: 12px; line-height: 1.55; color: var(--faint); }
.pay-fine svg { flex: none; width: 14px; height: 14px; margin-top: 2px; fill: none; stroke: var(--green); stroke-width: 1.4; }
.pay-fine a { color: var(--green); }
@media (max-width: 960px) {
  .pay-grid { grid-template-columns: 1fr; }
  .pay-side { position: static; order: -1; }
  .pay-who { grid-template-columns: 1fr; }
  .pay-who > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .pay-steps { grid-template-columns: 1fr; }
  .pay-steps li, .pay-steps li + li { padding: 14px 0; border-left: 0; }
  .pay-steps li + li { border-top: 1px solid var(--line); }
  .pay-steps li.is-on::before { display: none; }
}

/* prices: what you pay in bold, the earlier price crossed out after it */
.ucard-price strong { display: inline; font-size: 18px; }
.ucard-price s, .feat-facts s, .was-note s { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--faint); text-decoration-thickness: 1px; }
.feat-facts strong { font-weight: 700; }
.b--off { background: var(--green); border-color: transparent; color: var(--ink); font-weight: 700; }
.was-note { align-self: center; font-size: 13px; color: var(--green); text-transform: lowercase; }
.was-note s { margin: 0 6px 0 0; font-size: 13px; }
.pay-lines .pay-cut span, .pay-lines .pay-cut b { color: var(--green); }

/* a paid entry's curriculum, before payment is confirmed */
.cur-lock { display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap; margin-bottom: 20px; padding: clamp(18px, 2.2vw, 28px); border: 1px solid rgba(46,242,162,0.45); background: rgba(46,242,162,0.06); }
.cur-lock > svg { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--green); stroke-width: 1.2; }
.cur-lock > div { flex: 1 1 320px; min-width: 0; }
.cur-lock strong { display: block; font-size: clamp(17px, 1.7vw, 21px); letter-spacing: -0.02em; text-transform: lowercase; }
.cur-lock p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.lesson-row.is-closed { color: var(--muted); }
.lesson-row.is-closed .kind-icon { stroke: var(--green); }
.lesson-row.is-closed:hover { color: var(--fg); }
.module-lock { display: inline-flex; vertical-align: -2px; margin-right: 10px; }
.module-lock .kind-icon { width: 13px; height: 13px; stroke: var(--green); }

/* sign in: the google button */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; margin-top: 26px; padding: 16px 20px; background: #fff; border: 1px solid #fff; color: #1f1f1f; cursor: pointer; font: 700 15px/1 var(--font-sans); letter-spacing: -0.005em; text-transform: lowercase; transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease-out); }
.btn-google svg { flex: none; width: 20px; height: 20px; }
.btn-google:hover { background: #e9f9f1; border-color: var(--green); transform: translateY(-1px); }
.btn-google:disabled { opacity: 0.6; cursor: default; transform: none; }
.dialog-small { margin-top: 18px; font-size: 12px; line-height: 1.6; color: var(--faint); }

/* payment page: bkash details, the two-box form, what was sent */
.pay-bkash { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); margin-bottom: 26px; border: 1px solid rgba(46,242,162,0.45); background: rgba(46,242,162,0.06); }
.pay-bkash > div { padding: clamp(18px, 2.2vw, 26px); min-width: 0; }
.pay-bkash > div + div { border-left: 1px solid rgba(46,242,162,0.3); }
.pay-bkash span { display: block; font: 400 12px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: lowercase; color: var(--faint); }
.pay-bkash strong { display: block; margin: 12px 0 10px; font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; user-select: all; }
.pay-who--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-bottom: 4px; }
.form-2 .field { margin-top: 0; }
#pay-form .field input { font-size: 17px; }
#pay-form .btn-primary { margin-top: 20px; }
#pay-form .btn-primary:disabled { opacity: 0.45; cursor: default; }
#pay-form.is-off { opacity: 0.55; }
#pay-form .hint { display: block; margin-top: 14px; }
#pay-form .dialog-msg { margin-top: 16px; }
.pay-status.is-bad { border-color: #f2b42e; background: rgba(242,180,46,0.07); }
.pay-status a:not(.btn-primary) { color: var(--green); }
.pay-sent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 20px 0 16px; border: 1px solid var(--line); }
.pay-sent > div { padding: 14px 16px; min-width: 0; }
.pay-sent > div + div { border-left: 1px solid var(--line); }
.pay-sent dt { margin-bottom: 8px; font: 400 12px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: lowercase; color: var(--faint); }
.pay-sent dd { margin: 0; font-size: 14px; font-weight: 700; text-transform: lowercase; overflow-wrap: anywhere; }
.pay-sent code { font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: none; color: var(--green); }
@media (max-width: 720px) {
  .pay-bkash, .form-2, .pay-who--2 { grid-template-columns: 1fr; }
  /* long button labels wrap instead of pushing the page wider than the screen */
  .pay .btn-primary { max-width: 100%; white-space: normal; text-align: left; }
  .pay .btn-primary .btn-arrow { flex: none; }
  .pay-bkash > div + div { border-left: 0; border-top: 1px solid rgba(46,242,162,0.3); }
  .form-2 .field + .field { margin-top: 18px; }
  .pay-sent { grid-template-columns: 1fr 1fr; }
  .pay-sent > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pay-sent > div:nth-child(odd) { border-left: 0; }
}

/* --------------------------------------------------------------------------
   the lesson page: a stage for the video / document / reading, the course
   content list on the right, tabs underneath
   -------------------------------------------------------------------------- */
.lp { --bar: 58px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 26vw, 420px); padding-top: var(--bar); min-height: 100vh; }
.lp.is-wide { grid-template-columns: minmax(0, 1fr); }
.lp.is-wide .lp-side { display: none; }
.lp-main { min-width: 0; }
.side-toggle { flex: none; min-height: 36px; padding: 0 14px; background: none; border: 1px solid var(--line); color: var(--fg); font: 700 12px/1 var(--font-sans); text-transform: lowercase; cursor: pointer; transition: border-color 0.3s, color 0.3s; }
.side-toggle:hover { border-color: var(--green); color: var(--green); }

/* the stage */
/* (it is a <section>, and sections on this site come with large padding of their own) */
.lp-stage { position: relative; display: grid; place-items: center; min-height: 240px; padding: 0; background: #000; border-bottom: 1px solid var(--line); }
.lp-stage--video .lesson-video { width: min(100%, calc((100vh - var(--bar) - 170px) * 1.7778)); margin: 0 auto; border: 0; }
.lp-stage--gate, .lp-stage--page, .lp-stage--read { background: var(--bg-2); }
/* (a centred grid sizes itself to the whole of its content; these stages have to stay the height they are given) */
.lp-stage--video, .lp-stage--read, .lp-stage--doc { display: block; }
.lp-stage--gate > .gate, .lp-stage--page > * { width: min(100% - 2 * clamp(20px, 5vw, 72px), 820px); margin: clamp(32px, 5vw, 64px) auto; }
.lp-stage--page { display: block; padding: 1px 0; }
.lp-stage--page .lesson-video { margin-bottom: 0; }
.lp-stage--page .lesson-form iframe { min-height: min(72vh, 900px); }
.lp-read { width: 100%; max-height: calc(100vh - var(--bar) - 150px); overflow-y: auto; scrollbar-width: thin; }
.lp-read-in { max-width: 760px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 56px); }
.lp-read .lesson-title { margin-top: 0; }
/* previous / next, on the edges of the stage */
.lp-nav { position: absolute; top: 50%; z-index: 5; display: grid; place-items: center; width: 34px; height: 56px; margin-top: -28px; background: var(--green); color: var(--ink); font-size: 26px; line-height: 1; text-decoration: none; opacity: 0.55; transition: opacity 0.3s ease, width 0.3s var(--ease-out); }
.lp-nav--prev { left: 0; } .lp-nav--next { right: 0; }
.lp-nav:hover, .lp-nav:focus-visible { opacity: 1; width: 44px; }

/* a pdf, drawn page by page */
.lp-doc { width: 100%; background: #1b1e1d; }
.lp-doc-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 10px 46px; border-bottom: 1px solid var(--line); background: var(--bg-2); font-size: 13px; text-transform: lowercase; }
.lp-doc-bar > strong { flex: 1 1 140px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-doc-pick { flex: 1 1 140px; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lp-doc-pick button { padding: 7px 10px; background: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer; font: 400 12px/1 var(--font-sans); text-transform: lowercase; }
.lp-doc-pick button.is-on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
/* zoom out · 100% · zoom in · fit · page 2 / 9 · full screen */
.lp-doc-tools { display: flex; align-items: center; gap: 6px; }
.lp-doc-tools button, .lp-doc-links button { min-width: 34px; height: 34px; padding: 0 10px; background: none; border: 1px solid var(--line); color: var(--fg); cursor: pointer; font: 700 12px/1 var(--font-sans); text-transform: lowercase; transition: border-color 0.25s ease, color 0.25s ease; }
.lp-doc-tools button[data-zoom="in"], .lp-doc-tools button[data-zoom="out"] { padding: 0; font-size: 18px; font-weight: 400; }
.lp-doc-tools button:hover:not(:disabled), .lp-doc-links button:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.lp-doc-tools button:disabled, .lp-doc-links button:disabled { opacity: 0.35; cursor: default; }
#doc-zoom { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }
.lp-doc-count { min-width: 52px; margin: 0 6px; text-align: center; color: var(--faint); font-variant-numeric: tabular-nums; }
.lp-doc-links { display: flex; align-items: center; gap: 14px; }
.lp-doc-links a { color: var(--green); white-space: nowrap; }
.lp-doc-pages { height: calc(100vh - var(--bar) - 190px); min-height: 360px; overflow: auto; padding: 18px 24px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.lp-doc-pages.is-frame { padding: 0; overflow: hidden; }
.lp-page { position: relative; margin: 0 auto 14px; background: #fff; box-shadow: 0 10px 40px -18px rgba(0,0,0,0.9); }
.lp-page canvas { display: block; width: 100%; height: 100%; }
.lp-page:not(.is-drawn)::after { content: attr(data-page); position: absolute; inset: 0; display: grid; place-items: center; color: #b9bdbb; font: 700 22px/1 var(--font-sans); }
/* filling the screen */
.lp-doc:fullscreen { display: flex; flex-direction: column; width: 100vw; height: 100vh; background: #1b1e1d; }
.lp-doc:fullscreen .lp-doc-bar { padding-inline: 20px; }
.lp-doc:fullscreen .lp-doc-pages { flex: 1; height: auto; min-height: 0; }
.lp-doc-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.lp-doc-msg { max-width: 520px; margin: clamp(40px, 8vh, 96px) auto; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.6; }
.lp-doc-msg strong { display: block; margin-bottom: 8px; font-size: 19px; color: var(--fg); text-transform: lowercase; }
.lp-doc-msg .btn-primary { margin-top: 20px; }

/* under the stage */
.lp-under { padding: clamp(22px, 3vw, 40px) clamp(20px, 4vw, 56px) 96px; }
.lp-under .lesson { max-width: 1040px; margin: 0; }
.lp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; }
.lp-head > div:first-child { flex: 1 1 380px; min-width: 0; }
.lp-head .lesson-title { margin: 14px 0 0; font-size: clamp(24px, 2.8vw, 40px); line-height: 1.04; }
.lp-head .lesson-foot { margin: 0; padding: 0; border: 0; flex: none; }
.lp-under .tabs-bar { margin-top: clamp(24px, 3vw, 40px); }
.lp-under .tab-panel { max-width: 820px; }
.lp-about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 40px; align-items: start; }
.lp-about.has-text { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.lp-about small { display: block; margin-bottom: 8px; font: 400 12px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: lowercase; color: var(--faint); }
.lp-about strong { display: block; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.02em; text-transform: lowercase; }
.lp-about p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.lp-about ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lp-about li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; text-transform: lowercase; }
.lp-about li small { margin: 0; align-self: center; }
.lp-about li span { text-align: right; }

/* the course content list */
.lp-side { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); overflow-y: auto; border-left: 1px solid var(--line); background: var(--bg-2); scrollbar-width: thin; }
.lp-side-top { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.lp-side-top strong { font-size: 15px; letter-spacing: -0.01em; text-transform: lowercase; }
.lp-side-close { display: grid; place-items: center; width: 30px; height: 30px; background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer; font-size: 13px; }
.lp-side-close:hover { border-color: var(--line); color: var(--fg); }
.lp-sec { border-bottom: 1px solid var(--line); }
.lp-sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; width: 100%; padding: 16px 18px; background: rgba(255,255,255,0.025); border: 0; color: var(--fg); cursor: pointer; text-align: left; }
.lp-sec-head strong { display: block; font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; text-transform: lowercase; }
.lp-sec-head span { display: block; margin-top: 7px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.lp-sec-head i { flex: none; width: 8px; height: 8px; margin-top: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.4s var(--ease-out); }
.lp-sec.is-open .lp-sec-head i { transform: rotate(225deg) translate(-3px, -3px); }
.lp-sec > ul { display: none; list-style: none; margin: 0; padding: 0; }
.lp-sec.is-open > ul { display: block; }
.lp-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 18px; transition: background 0.25s ease; }
.lp-item:hover { background: rgba(255,255,255,0.035); }
.lp-item.is-current { background: rgba(46,242,162,0.1); box-shadow: inset 2px 0 0 var(--green); }
.lp-tick { display: grid; place-items: center; width: 16px; height: 16px; margin-top: 2px; padding: 0; background: none; border: 1.5px solid var(--faint); color: var(--ink); }
button.lp-tick { cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease; }
button.lp-tick:hover { border-color: var(--green); }
.lp-tick.is-on { background: var(--green); border-color: var(--green); }
.lp-tick.is-on::after { content: ''; width: 8px; height: 4px; margin-top: -2px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.lp-tick.is-shut { border: 0; color: var(--faint); }
.lp-tick.is-shut .kind-icon { width: 14px; height: 14px; }
.lp-row { display: block; min-width: 0; color: var(--fg); text-decoration: none; }
.lp-row .lesson-name { display: block; font-size: 13.5px; line-height: 1.4; text-transform: lowercase; }
.lp-item.is-done .lp-row .lesson-name { color: var(--muted); }
.lp-item.is-shut .lp-row .lesson-name { color: var(--muted); }
.lp-meta { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 12px; color: var(--faint); text-transform: lowercase; }
.lp-meta .kind-icon { width: 13px; height: 13px; }

@media (max-width: 700px) { .lp-doc-pages { padding: 10px 8px; } .lp-page { margin-bottom: 8px; } }
@media (max-width: 1000px) {
  .lp { grid-template-columns: 1fr; }
  .lp-side { position: static; height: auto; border-left: 0; border-top: 1px solid var(--line); }
  .lp-side-top { position: static; }
  .lp-read { max-height: none; }
  .lp-doc-pages { height: 74vh; }
  .lp-doc-bar { padding: 10px 12px; gap: 8px 12px; }
  .lp-doc-bar > strong, .lp-doc-pick { flex: 1 1 100%; }
  .lp-doc-tools { flex: 1 1 auto; }
  .lp-doc-count { margin-left: auto; }
  /* on a phone the previous / next tabs would sit on top of the page being read */
  .lp-stage--doc .lp-nav { top: auto; bottom: 14px; margin-top: 0; }
  .lp-stage--video .lesson-video { width: 100%; }
  .lp-about { grid-template-columns: 1fr; }
  .lp-nav { width: 28px; height: 46px; margin-top: -23px; font-size: 22px; }
  .lp-head .lesson-foot { flex: 1 1 100%; }
  .player-bar .side-toggle { padding: 0 10px; }
}

/* --------------------------------------------------------------------------
   a live class on the lesson page: first the door, then the room itself
   -------------------------------------------------------------------------- */
.lp-stage--live { display: block; background: var(--bg-2); }
.live-stage { width: 100%; }
.live-stage > .live { width: min(100% - 2 * clamp(20px, 5vw, 72px), 820px); margin: clamp(32px, 5vw, 64px) auto; }
.live-note { max-width: 600px; margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.live-note b { color: var(--fg); }
.live .dialog-msg { margin-top: 6px; }
.live-rec { width: min(100% - 2 * clamp(20px, 5vw, 72px), 820px); margin: 0 auto clamp(32px, 5vw, 64px); }
.live-rec .lesson-kicker { display: block; margin-bottom: 14px; }
.live-rec .lesson-video { margin-bottom: 0; }
/* inside the room */
.live-stage.is-room { background: #000; }
.live-bar { display: flex; align-items: center; gap: 16px; padding: 10px 46px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.live-bar .live-flag { flex: none; color: var(--green); }
.live-bar .live-flag::before { animation: live-pulse 1.4s ease-in-out infinite; }
.live-bar strong { flex: 1; min-width: 0; font-size: 14px; text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-bar .linkish { flex: none; white-space: nowrap; }
.btn--leave { flex: none; min-height: 34px; padding: 0 16px; background: #e5484d; border: 1px solid #e5484d; color: #fff; cursor: pointer; font: 700 12px/1 var(--font-sans); text-transform: lowercase; }
.btn--leave:hover { background: #c93a3f; border-color: #c93a3f; }
.live-frame { display: block; width: 100%; height: calc(100vh - var(--bar) - 55px); min-height: 420px; border: 0; background: #000; }
.live-stage.is-room ~ .lp-nav, .lp-stage:has(.is-room) .lp-nav { display: none; }
@media (max-width: 1000px) {
  .live-frame { height: calc(100vh - var(--bar) - 55px); height: calc(100svh - var(--bar) - 55px); min-height: 360px; }
  .live-bar { padding: 10px 12px; gap: 10px; }
  .live-bar strong { display: none; }
  .live-bar .linkish { margin-left: auto; }
}

/* the built-in room: a slim bar, the tiles on a stage, a dock of controls, chat and people at the side */
/* (the page is scrolled to the room when you go in: stop below the page's own bar, not under it) */
.live-stage { scroll-margin-top: var(--bar); }
.live-stage.is-own { display: flex; flex-direction: column; height: calc(100vh - var(--bar)); height: calc(100svh - var(--bar)); min-height: 460px; background: #050606; }
.live-stage.is-own .live-bar { gap: 14px; padding: 0 clamp(14px, 2vw, 28px); min-height: 52px; background: #070909; border-bottom: 1px solid rgba(255,255,255,0.07); }
.live-stage.is-own .live-flag { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border: 1px solid rgba(229,72,77,0.45); background: rgba(229,72,77,0.1); color: #ff9296; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.live-stage.is-own .live-flag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ff5a5f; box-shadow: 0 0 0 0 rgba(255,90,95,0.6); animation: mr-beat 1.8s ease-out infinite; }
.live-stage.is-own .live-bar strong { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.mr-clock { flex: none; font: 700 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--muted); }
.mr-count { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid rgba(255,255,255,0.1); font-size: 12px; font-weight: 700; color: var(--fg); text-transform: lowercase; }
.mr-count:empty { display: none; }
@keyframes mr-beat { 0% { box-shadow: 0 0 0 0 rgba(255,90,95,0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255,90,95,0); } }

/* the stage: dark, with a faint glow and a fine grid behind the tiles */
.mr { position: relative; flex: 1; min-height: 0; display: flex; background:
    radial-gradient(120% 90% at 50% 0%, rgba(46,242,162,0.07), transparent 60%),
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px) 0 0 / 44px 100%,
    #050606; }
.mr-grid { flex: 1; min-width: 0; display: grid; gap: 10px; padding: clamp(10px, 1.4vw, 20px); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: stretch; }
/* alone in the room: one tile at a film-frame shape in the middle, not stretched across the screen */
.mr-grid[data-n="1"] { place-content: center; grid-template-columns: min(100%, calc((100vh - var(--bar) - 220px) * 16 / 9), 1080px); grid-auto-rows: auto; }
.mr-grid[data-n="1"] .mr-tile { aspect-ratio: 16 / 9; }
.mr-grid[data-n="2"] { --cols: 2; }
.mr-grid[data-n="3"], .mr-grid[data-n="4"] { --cols: 2; }
.mr-grid[data-n="5"], .mr-grid[data-n="6"] { --cols: 3; }
.mr-grid[data-n="7"], .mr-grid[data-n="8"], .mr-grid[data-n="9"] { --cols: 3; }
.mr-grid[data-n="10"], .mr-grid[data-n="11"], .mr-grid[data-n="12"] { --cols: 4; }
/* a big class: the tiles keep a readable size and the grid scrolls */
.mr-grid.is-big:not(.has-screen) { --cols: 5; grid-auto-rows: minmax(118px, 20vh); align-content: start; overflow-y: auto; scrollbar-width: thin; }
/* someone is sharing a screen: that tile takes the room, the rest line up down the side */
.mr-grid.has-screen { --side: clamp(150px, 16vw, 230px); --pad: clamp(10px, 1.4vw, 20px); position: relative; grid-template-columns: minmax(0, 1fr) var(--side); grid-auto-rows: auto; place-content: start stretch; overflow-y: auto; scrollbar-width: thin; }
.mr-grid.has-screen .mr-tile { aspect-ratio: 16 / 10; }
.mr-grid.has-screen .mr-tile.is-screen { position: absolute; inset: var(--pad) calc(var(--side) + var(--pad) + 10px) var(--pad) var(--pad); aspect-ratio: auto; }
.mr-grid.has-screen .mr-tile:not(.is-screen) { grid-column: 2; }
/* …and beside a shared screen a big class shows its first few people; the people list has everyone */
.mr-grid.is-big.has-screen .mr-tile:nth-child(n+8) { display: none; }

.mr-tile { container-type: size; position: relative; min-height: 0; overflow: hidden; background: linear-gradient(155deg, #161b19 0%, #0c0f0e 62%, #090b0a 100%); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 18px 40px -24px rgba(0,0,0,0.9); transition: border-color 0.25s ease, box-shadow 0.25s ease; animation: mr-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes mr-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.mr-tile::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 34%); opacity: 0; transition: opacity 0.25s ease; }
.mr-tile.has-video:not(.is-screen)::after { opacity: 1; }
.mr-tile.is-me { border-color: rgba(46,242,162,0.28); }
.mr-tile.is-speaking { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 34px -6px rgba(46,242,162,0.55); }
.mr-tile.has-hand { border-color: rgba(242,180,46,0.7); }
.mr-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity 0.3s ease; }
.mr-tile.has-video video { opacity: 1; }
.mr-tile.is-screen { background: #000; }
.mr-tile.is-screen video { object-fit: contain; }
.mr-tile.is-screen::before { content: 'presenting'; position: absolute; z-index: 2; top: 10px; left: 10px; padding: 5px 9px; background: var(--green); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.mr-tile.is-me:not(.is-screen) video { transform: scaleX(-1); }   /* your own camera, as in a mirror */
/* no camera: the person's initial on a badge */
.mr-face { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 45%, rgba(46,242,162,0.09), transparent 70%); }
.mr-face i { display: grid; place-items: center; width: clamp(30px, 38cqmin, 132px); aspect-ratio: 1; border: 1px solid rgba(46,242,162,0.5); background: rgba(46,242,162,0.08); box-shadow: 0 0 0 6px rgba(46,242,162,0.05), 0 0 50px -10px rgba(46,242,162,0.45); color: var(--green); font-style: normal; font-weight: 700; font-size: clamp(14px, 17cqmin, 58px); line-height: 1; text-transform: uppercase; }
/* small tiles: a smaller name plate, and the badge sits a little higher to clear it */
@container (max-height: 150px) { .mr-face { align-items: start; padding-top: 8cqmin; } .mr-name { left: 6px; bottom: 6px; padding: 4px 7px; font-size: 12px; } .mr-hand { top: 6px; right: 6px; padding: 4px 6px; } .mr-hand em { display: none; } }
.mr-tile.has-video .mr-face { display: none; }
.mr-name { position: absolute; z-index: 2; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: flex; align-items: center; gap: 7px; padding: 6px 10px; background: rgba(5,6,6,0.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.09); font-size: 12px; font-weight: 700; text-transform: lowercase; }
.mr-name span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-name svg, .mr-controls svg, .mr-hand svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.mr-mic { display: none; color: #ff7b7f; }
.mr-tile.is-muted .mr-mic { display: inline-flex; }
.mr-hand { position: absolute; z-index: 2; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; background: #f2b42e; color: #0a0c0b; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; animation: mr-wave 1.6s ease-in-out infinite; }
.mr-hand em { font-style: normal; }
.mr-hand[hidden] { display: none; }
@keyframes mr-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* notes over the stage: "you are the first one here", and short messages */
.mr-alone, .mr-msg { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); margin: 0; max-width: min(92%, 560px); text-align: center; pointer-events: none; }
.mr-alone { bottom: 16px; padding: 8px 14px; border: 1px solid rgba(255,255,255,0.09); background: rgba(5,6,6,0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12px; color: var(--muted); text-transform: lowercase; }
.mr-alone b { color: var(--fg); }
.mr-alone[hidden] { display: none; }
.mr-msg { top: 16px; padding: 10px 16px; border: 1px solid rgba(46,242,162,0.35); background: rgba(8,12,10,0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; color: var(--fg); box-shadow: 0 16px 40px -18px rgba(0,0,0,0.9); }
.mr-msg:empty { display: none; }
.mr-msg.is-bad { border-color: rgba(229,72,77,0.6); color: #ffb3b5; }

/* the dock */
.mr-controls { flex: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 12px 14px; background: linear-gradient(to top, #070909, #050606); border-top: 1px solid rgba(255,255,255,0.07); }
.mr-set { display: flex; gap: 6px; padding: 5px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); }
.mr-set--end { border-color: transparent; background: none; padding-left: 0; }
.mr-controls button { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px; background: rgba(255,255,255,0.04); border: 1px solid transparent; color: var(--fg); cursor: pointer; font: 700 12px/1 var(--font-sans); text-transform: lowercase; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.mr-controls button:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.18); }
.mr-controls button:active { transform: translateY(1px); }
.mr-controls button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.mr-controls button.is-on { background: var(--green); border-color: var(--green); color: var(--ink); }
.mr-ico { position: relative; display: inline-flex; }
/* microphone and camera: red and struck through while they are off, plain while they are on */
.mr-controls [data-do="mic"]:not(.is-on), .mr-controls [data-do="cam"]:not(.is-on) { background: rgba(229,72,77,0.12); border-color: rgba(229,72,77,0.4); color: #ff9296; }
.mr-controls [data-do="mic"]:not(.is-on):hover, .mr-controls [data-do="cam"]:not(.is-on):hover { background: rgba(229,72,77,0.2); border-color: rgba(229,72,77,0.65); }
.mr-controls [data-do="mic"]:not(.is-on) .mr-ico::after, .mr-controls [data-do="cam"]:not(.is-on) .mr-ico::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.6px; background: currentColor; box-shadow: 0 0 0 1.5px rgba(40,14,15,0.9); transform: rotate(-45deg); }
.mr-controls [data-do="mic"].is-on, .mr-controls [data-do="cam"].is-on { background: rgba(46,242,162,0.1); border-color: rgba(46,242,162,0.5); color: var(--green); }
.mr-controls .mr-leave { background: #e5484d; border-color: #e5484d; color: #fff; padding: 0 18px; }
.mr-controls .mr-leave:hover { background: #c93a3f; border-color: #c93a3f; }
.mr-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,0.25); }
.mr-dot[hidden] { display: none; }

/* chat and people */
.mr-side { position: relative; z-index: 4; flex: none; width: min(340px, 86vw); display: flex; flex-direction: column; background: #080a0a; border-left: 1px solid rgba(255,255,255,0.08); box-shadow: -24px 0 50px -30px rgba(0,0,0,0.9); animation: mr-slide 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes mr-slide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.mr-side[hidden] { display: none; }
.mr-side-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mr-side-top strong { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.mr-side-top button { width: 28px; height: 28px; background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer; font-size: 13px; transition: border-color 0.2s ease, color 0.2s ease; }
.mr-side-top button:hover { border-color: rgba(255,255,255,0.18); color: var(--fg); }
.mr-people, .mr-chat { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 8px 16px; list-style: none; scrollbar-width: thin; }
.mr-people li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13px; text-transform: lowercase; }
.mr-people li > i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: var(--fg); font-style: normal; font-weight: 700; font-size: 12px; text-transform: uppercase; }
.mr-people li.is-host > i { border-color: rgba(46,242,162,0.55); background: rgba(46,242,162,0.1); color: var(--green); }
.mr-people li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-people em { flex: none; font-style: normal; color: var(--faint); font-size: 12px; }
.mr-people em.is-live { color: var(--green); }
.mr-muteall { margin: 12px 16px 16px; }
.mr-chat { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
.mr-chat li { align-self: flex-start; max-width: 88%; padding: 9px 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.035); font-size: 14px; line-height: 1.45; }
.mr-chat small { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--faint); text-transform: lowercase; }
.mr-chat p { margin: 0; overflow-wrap: anywhere; }
.mr-chat li.is-me { align-self: flex-end; border-color: rgba(46,242,162,0.3); background: rgba(46,242,162,0.08); }
.mr-chat li.is-me small { color: var(--green); }
.mr-chat li.is-empty { align-self: stretch; max-width: none; border: 0; background: none; padding: 0; color: var(--faint); font-size: 13px; }
.mr-say { flex: none; display: flex; margin: 0 12px 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); transition: border-color 0.2s ease; }
.mr-say:focus-within { border-color: var(--green); }
.mr-say input { flex: 1; min-width: 0; padding: 13px 14px; background: none; border: 0; color: var(--fg); font: 400 14px/1 var(--font-sans); outline: none; }
.mr-say button { flex: none; width: 46px; background: var(--green); border: 0; color: var(--ink); cursor: pointer; font-size: 18px; }
@media (max-width: 760px) {
  .mr-grid { gap: 6px; padding: 8px; }
  .mr-grid, .mr-grid[data-n] { --cols: 2; }
  .mr-grid[data-n="1"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); place-content: stretch; }
  .mr-grid[data-n="1"] .mr-tile { aspect-ratio: auto; }
  .mr-grid[data-n="2"] { --cols: 1; }
  .mr-grid.is-big:not(.has-screen) { --cols: 3; grid-auto-rows: minmax(96px, 16vh); }
  .mr-grid.is-big.has-screen .mr-tile:nth-child(n+5) { display: none; }
  .mr-grid.has-screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 2.2fr); grid-auto-rows: minmax(64px, 0.5fr); place-content: stretch; overflow: visible; }
  .mr-grid.has-screen .mr-tile { aspect-ratio: auto; }
  .mr-grid.has-screen .mr-tile.is-screen { position: relative; inset: auto; grid-row: 1; }
  .mr-grid.has-screen .mr-tile:not(.is-screen) { grid-column: 1; }
  .mr-name { left: 6px; bottom: 6px; padding: 5px 8px; }
  .mr-hand em { display: none; }
  .mr-controls { gap: 6px; padding: 8px 6px 10px; flex-wrap: nowrap; }
  .mr-set { gap: 4px; padding: 3px; }
  .mr-controls button, .mr-controls .mr-leave { min-width: 40px; min-height: 42px; padding: 0 10px; justify-content: center; }
  .mr-controls button span { display: none; }
  .live-stage.is-own .live-bar strong { display: block; }
  .mr-clock { display: none; }
  .mr-side { position: absolute; inset: 0 0 0 auto; width: min(320px, 92vw); }
}
@media (prefers-reduced-motion: reduce) {
  .mr-tile, .mr-side, .mr-hand, .live-stage.is-own .live-flag::before { animation: none; }
}

/* --------------------------------------------------------------------------
   comfort for learners: readable labels, things that are easy to tap, a way to
   ask for help on every step, and a dashboard that says what to do next
   -------------------------------------------------------------------------- */
.lesson-kicker, .course-block h2, .side-card h3, .hero-tag { letter-spacing: 0.1em; }
.field span { letter-spacing: 0.08em; }
.crumb { display: inline-flex; align-items: center; min-height: 44px; }
.lms-empty .btn-outline { vertical-align: middle; }
/* "a question?" under a button, and the help link itself */
.ask { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); text-transform: lowercase; }
.help-link { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-transform: lowercase; }
.help-link.is-wa { text-decoration: none; padding: 0 12px; border: 1px solid rgba(46,242,162,0.45); background: rgba(46,242,162,0.07); transition: background 0.2s ease, border-color 0.2s ease; }
.help-link.is-wa:hover { background: rgba(46,242,162,0.16); border-color: var(--green); }
.help-link svg, .btn-wa svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 24px; background: var(--green); color: var(--ink); font: 700 15px/1 var(--font-sans); text-decoration: none; text-transform: lowercase; transition: background 0.2s ease; }
.btn-wa:hover { background: var(--fg); }
.btn-wa svg { width: 22px; height: 22px; }
/* how it works: four numbered steps */
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.how li { display: grid; gap: 12px; align-content: start; padding: 18px; border: 1px solid var(--line); background: var(--surface); }
.how b { display: grid; place-items: center; width: 32px; height: 32px; background: var(--green); color: var(--ink); font: 700 14px/1 var(--font-sans); }
.how strong { display: block; font-size: 16px; line-height: 1.25; letter-spacing: -0.02em; text-transform: lowercase; }
.how span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); text-transform: lowercase; }
/* the next live class, on a course page and on the dashboard */
.next-live { display: flex; justify-content: space-between; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); padding: 20px 22px; border: 1px solid rgba(46,242,162,0.4); background: rgba(46,242,162,0.05); }
.next-live.is-now { border-color: #e5484d; background: rgba(229,72,77,0.08); }
.next-live .live-flag { color: var(--green); }
.next-live.is-now .live-flag { color: #ff9296; }
.next-live strong { display: block; margin-top: 10px; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -0.03em; text-transform: lowercase; }
.next-live p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); text-transform: lowercase; }
.next-live p b { color: var(--fg); }
.next-live .hero-buttons { margin: 0; }
/* on a phone, the main button of a course page stays in reach */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(7,9,9,0.96); border-top: 1px solid var(--green); }
  .sticky-cta > div { min-width: 0; }
  .sticky-cta strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: lowercase; }
  .sticky-cta span:not(.btn-arrow) { display: block; margin-top: 3px; font-size: 13px; color: var(--green); text-transform: lowercase; }
  .sticky-cta .btn-primary { flex: none; min-height: 46px; }
  body.has-sticky footer { padding-bottom: 84px; }
  .how { grid-template-columns: minmax(0, 1fr); }
  .how li { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
  .next-live .hero-buttons, .next-live .hero-buttons > * { width: 100%; }
}
@media (min-width: 761px) and (max-width: 1100px) { .how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* lesson page: "carrying on from 3:20" and "lesson complete — next" */
.lp-note { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px; padding: 12px 16px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--muted); text-transform: lowercase; }
.lp-note b { color: var(--fg); }
.lp-note.is-done { border-color: var(--green); background: rgba(46,242,162,0.07); color: var(--fg); }
.lp-note.is-done b { color: var(--green); }
.lp-note[hidden] { display: none; }
/* the camera and microphone test before a live class */
.live-check { margin-top: 22px; padding: 18px; border: 1px solid var(--line); background: #0b0d0c; }
.live-check[hidden] { display: none; }
.live-check-in { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px; align-items: start; }
.live-check-pic { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: #000; border: 1px solid var(--line); font-size: 13px; color: var(--faint); text-transform: lowercase; }
.live-check-pic video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.live-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.live-check li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.live-check li > b { display: grid; place-items: center; width: 28px; height: 28px; font: 700 14px/1 var(--font-sans); }
.live-check li.is-ok > b { background: var(--green); color: var(--ink); }
.live-check li.is-bad > b { background: #e5484d; color: #fff; }
.live-check li strong { display: block; font-size: 15px; text-transform: lowercase; }
.live-check li span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); text-transform: lowercase; }
.live-meter { height: 8px; margin-top: 10px; background: rgba(255,255,255,0.1); }
.live-meter i { display: block; height: 100%; width: 0; background: var(--green); transition: width 0.08s linear; }
.live-check-msg { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); text-transform: lowercase; }
.live-check .hero-buttons { margin-top: 16px; }
@media (max-width: 700px) { .live-check-in { grid-template-columns: minmax(0, 1fr); } }
/* payment page: stuck? */
.pay-help { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; text-transform: lowercase; }
/* my learning */
.dash { display: grid; gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
.dash:empty { display: none; }
.dash .next-live { margin-bottom: 0; }
.dash-continue { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--green); background: linear-gradient(120deg, rgba(46,242,162,0.12), rgba(46,242,162,0.03)); color: var(--fg); text-decoration: none; transition: background 0.25s ease, transform 0.25s ease; }
.dash-continue:hover { transform: translateY(-2px); }
.dash-continue-in { flex: 1 1 320px; min-width: 0; }
.dash-continue strong { display: block; margin-top: 12px; font-size: clamp(24px, 3vw, 36px); line-height: 1.05; letter-spacing: -0.04em; text-transform: lowercase; }
.dash-continue p { margin: 10px 0 16px; font-size: 14px; color: var(--muted); text-transform: lowercase; }
.dash-continue .progress { max-width: 420px; }
.dash-continue small { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); text-transform: lowercase; }
.dash-continue .btn-primary { flex: none; }
.dash-pay { display: grid; gap: 8px; }
.dash-pay a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid rgba(242,180,46,0.55); background: rgba(242,180,46,0.07); color: var(--fg); text-decoration: none; text-transform: lowercase; }
.dash-pay a.is-bad { border-color: rgba(229,72,77,0.6); background: rgba(229,72,77,0.08); }
.dash-pay strong { display: block; font-size: 16px; }
.dash-pay span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.dash-pay i { font-style: normal; font-size: 20px; color: #f2b42e; }
.dash-help { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.dash-help-card { display: grid; gap: 14px; justify-items: start; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--line); background: var(--surface); }
.dash-help-card strong { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.05; letter-spacing: -0.04em; text-transform: lowercase; }
.dash-help-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); text-transform: lowercase; }
.dash-help-card small { font-size: 13px; color: var(--faint); }
.dash-help-card .btn-outline { max-width: 100%; white-space: normal; text-align: left; }
.faq { margin-top: 18px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; text-transform: lowercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-size: 22px; font-weight: 400; color: var(--green); }
.faq details[open] summary::after { content: '–'; }
.faq p { margin: 0 0 20px; max-width: 640px; font-size: 15px; line-height: 1.65; color: var(--muted); text-transform: lowercase; }
@media (max-width: 860px) { .dash-help { grid-template-columns: minmax(0, 1fr); } .dash-continue .btn-primary { width: 100%; justify-content: space-between; } .btn-wa { width: 100%; } }

/* a course's own picture behind its title: soft, and faded into the page's black so the words stay easy to read */
.course-hero.has-cover { position: relative; isolation: isolate; overflow: hidden; }
.course-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.course-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0.74; filter: saturate(0.92); animation: hero-bg-in 1.2s ease both; }
.course-hero-bg::after { content: ''; position: absolute; inset: 0; background:
    linear-gradient(to right, rgba(5,6,6,0.96) 0%, rgba(5,6,6,0.8) 23%, rgba(5,6,6,0.38) 59%, rgba(5,6,6,0.18) 100%),
    linear-gradient(to top, var(--bg) 0%, rgba(5,6,6,0.58) 20%, rgba(5,6,6,0) 52%),
    linear-gradient(to bottom, rgba(5,6,6,0.7) 0%, rgba(5,6,6,0) 24%); }
@keyframes hero-bg-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 0.74; transform: none; } }
/* with a brighter picture behind them, the words carry a soft shadow so they stay easy to read */
.course-hero.has-cover .course-h1, .course-hero.has-cover .page-sub, .course-hero.has-cover .course-social, .course-hero.has-cover .crumb, .course-hero.has-cover .hero-tag, .course-hero.has-cover .ask { text-shadow: 0 1px 18px rgba(0,0,0,0.75), 0 0 2px rgba(0,0,0,0.6); }
.course-hero.has-cover .course-facts { background: rgba(5,6,6,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 760px) {
  .course-hero-bg img { opacity: 0.6; }
  .course-hero-bg::after { background: linear-gradient(to top, var(--bg) 0%, rgba(5,6,6,0.82) 38%, rgba(5,6,6,0.5) 100%); }
}
@media (prefers-reduced-motion: reduce) { .course-hero-bg img { animation: none; } }

/* the payment page: a coupon code */
.pay-coupon { margin-top: 16px; border: 1px dashed rgba(255,255,255,0.22); }
.pay-coupon > summary { padding: 14px 16px; cursor: pointer; list-style: none; font: 700 14px/1.2 var(--font-sans); color: var(--green); text-transform: lowercase; }
.pay-coupon > summary::-webkit-details-marker { display: none; }
.pay-coupon > summary::before { content: '+ '; }
.pay-coupon[open] > summary::before { content: '– '; }
.pay-coupon-row { display: flex; gap: 8px; padding: 0 16px 16px; }
.pay-coupon-row input { flex: 1; min-width: 0; padding: 13px 14px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); font: 700 16px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; outline: none; }
.pay-coupon-row input:focus { border-color: var(--green); }
.pay-coupon-row .btn-outline { flex: none; }
.pay-coupon .dialog-msg { margin: 0 16px 16px; }
.pay-coupon.is-on { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--green); background: rgba(46,242,162,0.08); }
.pay-coupon.is-on strong { display: block; font-size: 15px; text-transform: lowercase; }
.pay-coupon.is-on span { display: block; margin-top: 5px; font-size: 14px; color: var(--muted); text-transform: lowercase; }
.pay-coupon.is-on span b { color: var(--green); }
.pay-bkash strong s { font-size: 0.6em; font-weight: 400; color: var(--faint); }
@media (max-width: 520px) { .pay-coupon-row { flex-direction: column; } .pay-coupon-row .btn-outline { width: 100%; justify-content: space-between; } }

/* --------------------------------------------------------------------------
   a lesson's video in our own player: youtube draws the picture, a sheet over
   it takes every click, and the buttons underneath are ours
   -------------------------------------------------------------------------- */
.lesson-video .vp, .vp { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #000; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* The frame is made taller than the picture and centred, so the strips where youtube draws its
   title, "copy link", "more videos" and logo fall outside the player and are cut off. The picture
   itself stays exactly the size of the player (youtube keeps it 16:9 in the middle of its frame). */
.lesson-video .vp iframe, .vp iframe { position: absolute; inset: auto; left: 50%; top: 50%; --w: min(100cqw, 100cqh * 16 / 9); width: var(--w); height: calc(var(--w) * 9 / 16 + 300px); transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.vp-shield { position: absolute; inset: 0; z-index: 3; cursor: pointer; outline: none; background: rgba(0,0,0,0); }
/* youtube's own title and "watch on youtube" strips are covered whenever it is not playing */
.vp-band { display: none; }
.vp-dim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(0,0,0,0.78); opacity: 0; transition: opacity 0.3s ease; }
.vp.is-paused .vp-dim { opacity: 1; }
.vp.is-ended .vp-dim { opacity: 1; background: #000; }
.vp-big { position: absolute; left: 50%; top: 50%; z-index: 4; display: grid; place-items: center; width: clamp(60px, 9vw, 88px); height: clamp(60px, 9vw, 88px); margin: 0; padding: 0; transform: translate(-50%, -50%); background: var(--green); border: 0; color: var(--ink); cursor: pointer; transition: opacity 0.25s ease, transform 0.25s ease; }
.vp-big svg { width: 44%; height: 44%; fill: currentColor; }
.vp-big:hover { transform: translate(-50%, -50%) scale(1.06); }
.vp.is-playing .vp-big { opacity: 0; pointer-events: none; }
.vp-hint { position: absolute; left: 50%; bottom: 64px; z-index: 5; transform: translateX(-50%); margin: 0; padding: 8px 12px; background: rgba(5,6,6,0.9); border: 1px solid var(--green); font-size: 13px; color: var(--fg); text-transform: lowercase; white-space: nowrap; pointer-events: none; }
.vp-hint[hidden] { display: none; }
/* (a phone that only starts a video from a touch on the video itself: the middle is opened for that one tap) */
.vp.needs-tap .vp-shield, .vp.needs-tap .vp-big { pointer-events: none; }
.vp.needs-tap .vp-big { opacity: 0; }
.vp.needs-tap .vp-dim { opacity: 0; }
/* who is watching */
.vp-mark { position: absolute; z-index: 2; max-width: 80%; padding: 2px 6px; font: 700 clamp(11px, 1.25vw, 15px)/1.3 var(--font-sans); letter-spacing: 0.02em; color: rgba(255,255,255,0.34); text-shadow: 0 0 2px rgba(0,0,0,0.55); white-space: nowrap; pointer-events: none; transition: left 1.2s ease, top 1.2s ease; text-transform: none; }
/* our buttons */
.vp-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 26px 10px 8px; background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0)); transition: opacity 0.3s ease; }
.vp.is-playing.is-idle .vp-bar { opacity: 0; pointer-events: none; }
.vp.is-playing.is-idle { cursor: none; }
.vp-bar button { flex: none; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; background: none; border: 0; color: #fff; cursor: pointer; font: 700 13px/1 var(--font-sans); }
.vp-bar button:hover { color: var(--green); }
.vp-bar button:focus-visible, .vp-shield:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.vp-bar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.vp-bar [data-vp="play"] svg path { fill: currentColor; stroke: none; }
.vp .i-pause, .vp .i-quiet { display: none; }
.vp.is-playing .i-play { display: none; }
.vp.is-playing .i-pause { display: inline; }
.vp.is-muted .i-loud { display: none; }
.vp.is-muted .i-quiet { display: inline; }
.vp-time { flex: none; padding: 0 6px; font: 400 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.75); white-space: nowrap; }
.vp-time b { font-weight: 700; color: #fff; }
.vp-seek { flex: 1; min-width: 40px; height: 40px; margin: 0 6px; -webkit-appearance: none; appearance: none; background: none; cursor: pointer; --at: 0%; }
.vp-seek::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--green) var(--at), rgba(255,255,255,0.3) var(--at)); }
.vp-seek::-moz-range-track { height: 4px; background: rgba(255,255,255,0.3); }
.vp-seek::-moz-range-progress { height: 4px; background: var(--green); }
.vp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--green); }
.vp-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--green); }
.vp-speed { min-width: 46px; }
.vp:fullscreen, .vp:-webkit-full-screen { width: 100vw; height: 100vh; }
@media (max-width: 560px) { .vp-time span, .vp-time { font-size: 12px; } .vp-bar { gap: 0; padding-left: 4px; padding-right: 4px; } .vp-bar button { min-width: 36px; padding: 0 5px; } }

/* a phone with no full screen for web pages: the player fills the browser window */
.vp.is-full, .lesson-video .vp.is-full { position: fixed; inset: 0; z-index: 99999; width: 100vw; height: 100vh; height: 100dvh; }
html.vp-open, html.vp-open body { overflow: hidden; }

/* an entry that lives on another website */
.course-block[hidden], .side-card[hidden] { display: none; }
.aca-block.is-empty { display: none; }
.b.b--out { border-color: rgba(46,242,162,0.5); color: var(--green); text-transform: none; }