/* Bantu Plaza — Lessons & Exercises. Brand tokens are CSS variables: re-skin in one place.
   (Defaults echo the PDF heritage packs. To match the main marketplace, set --bpex-orange:#C95F0E
   and --bpex-font to 'Plus Jakarta Sans'.) */

@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: local('Ubuntu'), url('../fonts/Ubuntu-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: local('Ubuntu Bold'), url('../fonts/Ubuntu-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Ubuntu'; font-style: italic; font-weight: 400; font-display: swap; src: local('Ubuntu Italic'), url('../fonts/Ubuntu-Italic.ttf') format('truetype'); }

.bpex-wrap {
	--bpex-orange: #ED9537;
	--bpex-black: #1A1A1A;
	--bpex-terracotta: #C75B39;
	--bpex-ochre: #E8B04B;
	--bpex-sand: #F6EEE3;
	--bpex-line: #E4D8C6;
	--bpex-font: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	font-family: var(--bpex-font);
	color: var(--bpex-black);
	max-width: 1100px;
	margin: 0 auto;
	padding: 28px 18px 64px;
	box-sizing: border-box;
	line-height: 1.6;
}
.bpex-wrap *, .bpex-wrap *::before, .bpex-wrap *::after { box-sizing: border-box; }
.bpex-wrap h1, .bpex-wrap h2, .bpex-wrap h3, .bpex-wrap h4 { font-family: var(--bpex-font); color: var(--bpex-black); line-height: 1.2; }
.bpex-wrap a { color: var(--bpex-terracotta); }
.bpex-muted { color: #6f6457; }

/* ---------- buttons ---------- */
.bpex-btn { display: inline-block; background: var(--bpex-orange); color: #fff; border: 0; border-radius: 12px; font-weight: 700; font-family: var(--bpex-font); font-size: 15px; padding: 12px 20px; text-decoration: none; cursor: pointer; transition: background .15s ease, transform .1s ease; }
.bpex-btn:hover { background: var(--bpex-terracotta); color: #fff; }
.bpex-btn:active { transform: translateY(1px); }
.bpex-btn.bpex-secondary { background: #fff; color: var(--bpex-terracotta); border: 1px solid var(--bpex-line); }
.bpex-wrap :focus-visible { outline: 3px solid var(--bpex-ochre); outline-offset: 2px; border-radius: 8px; }

/* ---------- wordmark ---------- */
.bpex-wm-lead { color: var(--bpex-black); }
.bpex-wm-tail { color: var(--bpex-orange); }

/* ---------- index grid ---------- */
.bpex-index-head h1 { font-size: 30px; margin: 0 0 4px; }
.bpex-lead { color: #6f6457; margin: 0 0 22px; max-width: 620px; }
.bpex-card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bpex-lang-card { position: relative; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--bpex-line); border-radius: 18px; padding: 20px; text-decoration: none; color: var(--bpex-black); box-shadow: 0 6px 18px -12px rgba(26,26,26,.3); transition: transform .15s ease, box-shadow .15s ease; }
.bpex-lang-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(26,26,26,.4); }
.bpex-lang-card.is-draft { background: #fcf8f1; border-style: dashed; }
.bpex-wordmark { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.bpex-lang-name { font-size: 14px; color: #6f6457; }
.bpex-bar { display: block; height: 8px; background: var(--bpex-sand); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.bpex-bar-fill { display: block; height: 100%; background: var(--bpex-orange); border-radius: 999px; }
.bpex-pct { font-size: 12px; color: #6f6457; }
.bpex-cta { margin-top: 6px; font-weight: 700; color: var(--bpex-terracotta); }
.bpex-ribbon { display: inline-block; align-self: flex-start; background: var(--bpex-terracotta); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; }

/* ---------- lesson head ---------- */
.bpex-lesson-head { background: var(--bpex-sand); border: 1px solid var(--bpex-line); border-radius: 22px; padding: 26px 26px 22px; margin-bottom: 22px; }
.bpex-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bpex-orange); }
.bpex-title { font-size: 44px; margin: 8px 0 6px; letter-spacing: -.02em; }
.bpex-sub { color: #5b5045; margin: 0; max-width: 640px; }
.bpex-chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.bpex-streak { background: #fff; border: 1px solid var(--bpex-line); border-radius: 999px; padding: 5px 13px; font-weight: 700; font-size: 13px; }
.bpex-progress-chip { background: var(--bpex-orange); color: #fff; border-radius: 999px; padding: 5px 13px; font-weight: 700; font-size: 13px; }
.bpex-savestate { font-size: 12px; color: #6f6457; }

/* ---------- layout ---------- */
.bpex-layout { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .bpex-layout { grid-template-columns: 230px 1fr; align-items: start; } }
.bpex-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) { .bpex-rail { position: sticky; top: 16px; } .bpex-rail ol { flex-direction: column; } }
.bpex-rail li a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--bpex-black); font-size: 14px; padding: 7px 10px; border-radius: 10px; }
.bpex-rail li a:hover { background: var(--bpex-sand); }
.bpex-rail .bpex-rail-scene a { color: #6f6457; font-style: italic; }
.bpex-tick { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--bpex-line); flex: 0 0 auto; }
.bpex-rail li.is-complete .bpex-tick { background: var(--bpex-orange); border-color: var(--bpex-orange); position: relative; }
.bpex-rail li.is-complete .bpex-tick::after { content: '✓'; color: #fff; font-size: 11px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* ---------- sounds ---------- */
.bpex-sounds { background: #fff; border: 1px solid var(--bpex-line); border-radius: 16px; padding: 8px 18px; margin-bottom: 22px; }
.bpex-sounds summary { font-weight: 700; cursor: pointer; padding: 8px 0; }
.bpex-sounds-cols { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bpex-sounds-cols { grid-template-columns: 1fr 1fr; } }
.bpex-sounds dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 6px 0; }
.bpex-sounds dt { font-weight: 700; color: var(--bpex-terracotta); }
.bpex-sounds dd { margin: 0; color: #5b5045; }

/* ---------- modules + study cards ---------- */
.bpex-module { margin: 0 0 30px; }
.bpex-module h2 { font-size: 23px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bpex-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--bpex-black); color: #fff; border-radius: 9px; font-size: 15px; }
.bpex-native { font-style: italic; font-weight: 400; color: #6f6457; font-size: 16px; }
.bpex-rows { display: grid; gap: 8px; }
.bpex-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px 14px; align-items: center; background: #fff; border: 1px solid var(--bpex-line); border-radius: 12px; padding: 10px 14px; }
.bpex-row.is-review { border-color: var(--bpex-ochre); background: #fffaf0; }
.bpex-term { font-weight: 700; }
.bpex-mean { color: #5b5045; }
.bpex-pron { grid-column: 1 / -1; font-style: italic; color: var(--bpex-terracotta); font-size: 14px; }
.bpex-audio { color: #b9ad9c; }
.bpex-selfrate { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 4px; }
.bpex-sr { background: var(--bpex-sand); border: 1px solid var(--bpex-line); border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; }
.bpex-sr.is-on { background: var(--bpex-orange); color: #fff; border-color: var(--bpex-orange); }

/* ---------- callouts ---------- */
.bpex-callout { background: var(--bpex-sand); border: 1px solid var(--bpex-line); border-left: 4px solid var(--bpex-ochre); border-radius: 12px; padding: 12px 16px; margin: 12px 0; color: #5b5045; }
.bpex-callout-clicks { border-left-color: var(--bpex-terracotta); }
.bpex-callout-tip { border-left-color: var(--bpex-orange); }

/* ---------- exercises ---------- */
.bpex-exercises { margin-top: 14px; }
.bpex-start { margin-top: 4px; }
.bpex-ex-progress { font-size: 13px; color: #6f6457; margin-bottom: 8px; }
.bpex-stage { background: #fff; border: 1px solid var(--bpex-line); border-radius: 16px; padding: 20px; min-height: 160px; }
.bpex-q-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bpex-orange); margin: 0 0 6px; }
.bpex-q-prompt { font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.bpex-q-hint { font-size: 13px; color: #6f6457; }
.bpex-flashcard { display: block; width: 100%; min-height: 120px; background: var(--bpex-sand); border: 2px solid var(--bpex-line); border-radius: 14px; cursor: pointer; font-family: var(--bpex-font); }
.bpex-fc-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 116px; }
.bpex-fc-term { font-size: 26px; font-weight: 700; }
.bpex-fc-mean { font-size: 20px; }
.bpex-fc-pron { font-style: italic; color: var(--bpex-terracotta); }
.bpex-options { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.bpex-opt { background: var(--bpex-sand); border: 1px solid var(--bpex-line); border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: var(--bpex-font); }
.bpex-opt:hover { border-color: var(--bpex-orange); }
.bpex-opt.is-correct { background: #e7f6ec; border-color: #2f9e54; color: #1a7f37; }
.bpex-opt.is-wrong { background: #fdecea; border-color: var(--bpex-terracotta); color: var(--bpex-terracotta); }
.bpex-typebox { display: flex; gap: 8px; }
.bpex-input { flex: 1; padding: 12px 14px; border: 2px solid var(--bpex-line); border-radius: 12px; font-size: 16px; font-family: var(--bpex-font); }
.bpex-input.is-correct { border-color: #2f9e54; }
.bpex-input.is-wrong { border-color: var(--bpex-terracotta); }
.bpex-fb { min-height: 1.4em; margin: 10px 0 0; font-weight: 700; }
.bpex-match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bpex-match-col { display: grid; gap: 8px; }
.bpex-match { background: var(--bpex-sand); border: 1px solid var(--bpex-line); border-radius: 10px; padding: 11px; cursor: pointer; font-family: var(--bpex-font); font-size: 15px; }
.bpex-match.is-sel { border-color: var(--bpex-orange); box-shadow: 0 0 0 2px var(--bpex-ochre); }
.bpex-match.is-matched { background: #e7f6ec; border-color: #2f9e54; color: #1a7f37; cursor: default; }
.bpex-match.is-wrong { background: #fdecea; border-color: var(--bpex-terracotta); }
.bpex-result { text-align: center; padding: 10px; }
.bpex-done { font-size: 20px; font-weight: 700; color: #1a7f37; }
.bpex-result-score { font-size: 16px; color: #5b5045; margin-bottom: 12px; }

/* ---------- dialogue scenes ---------- */
.bpex-scene { background: #fff; border: 1px solid var(--bpex-line); border-radius: 16px; padding: 18px 20px; margin: 0 0 26px; }
.bpex-scene h2 { font-size: 20px; margin: 0 0 10px; }
.bpex-line { display: grid; gap: 2px; margin: 0 0 12px; }
.bpex-who { font-weight: 700; color: var(--bpex-terracotta); font-size: 13px; }
.bpex-line-native { font-weight: 700; }
.bpex-line-eng { color: #6f6457; font-style: italic; font-size: 14px; }

/* ---------- selfcheck ---------- */
.bpex-selfcheck { background: var(--bpex-sand); border: 1px solid var(--bpex-line); border-radius: 16px; padding: 18px 22px; margin: 0 0 26px; }
.bpex-selfcheck ol { margin: 4px 0 14px; }
.bpex-answers summary { cursor: pointer; font-weight: 700; color: var(--bpex-terracotta); }
.bpex-closing { margin-top: 12px; color: #5b5045; }

/* ---------- index cross-links ---------- */
.bpex-index-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.bpex-index-links a { background: #fff; border: 1px solid var(--bpex-line); color: var(--bpex-terracotta); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; text-decoration: none; }
.bpex-index-links a:hover { background: var(--bpex-sand); }

/* ---------- "keep going" (lesson -> course / guide / tutor) ---------- */
.bpex-keepgoing { background: var(--bpex-sand); border: 1px solid var(--bpex-line); border-radius: 18px; padding: 20px 22px; margin-top: 10px; }
.bpex-keepgoing h2 { font-size: 20px; margin: 0 0 4px; }
.bpex-next-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 720px) { .bpex-next-grid { grid-template-columns: repeat(3, 1fr); } }
.bpex-next-card { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--bpex-line); border-radius: 14px; padding: 16px; text-decoration: none; color: var(--bpex-black); transition: transform .12s ease, border-color .12s ease; }
.bpex-next-card:hover { transform: translateY(-2px); border-color: var(--bpex-orange); }
.bpex-next-k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bpex-orange); }
.bpex-next-t { font-weight: 700; font-size: 16px; color: var(--bpex-terracotta); }
.bpex-next-d { font-size: 13px; color: #6f6457; }

/* ---------- teaser / lock ---------- */
.bpex-teaser .bpex-rows { filter: none; }
.bpex-lock { position: relative; margin-top: -8px; }
.bpex-lock-fade { height: 70px; margin-top: -70px; background: linear-gradient(180deg, rgba(255,255,255,0), var(--bpex-sand)); pointer-events: none; }
.bpex-lock-card { text-align: center; background: #fff; border: 1px solid var(--bpex-line); border-radius: 16px; padding: 22px; }
.bpex-lock-card h3 { margin: 0 0 6px; }
.bpex-lock-card p { color: #5b5045; max-width: 460px; margin: 0 auto 14px; }

/* ---------- toast ---------- */
.bpex-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--bpex-black); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 700; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); opacity: 0; transition: opacity .25s ease, transform .25s ease; z-index: 9999; }
.bpex-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

.bpex-empty { color: #6f6457; }

@media (max-width: 520px) {
	.bpex-title { font-size: 34px; }
	.bpex-options, .bpex-match-grid { grid-template-columns: 1fr; }
	.bpex-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.bpex-lang-card, .bpex-btn, .bpex-toast { transition: none; }
}

/* CEFR ladder — language groups + level chips */
.bpex-lang-group { margin-bottom: 32px; }
.bpex-lang-group-title { font-size: 20px; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--bpex-line); }
.bpex-level-chip { align-self: flex-start; display: inline-block; background: var(--bpex-sand); color: var(--bpex-terracotta); border: 1px solid var(--bpex-line); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.bpex-lesson-head .bpex-level-chip { background: #fff; }

/* PRO packs — objectives, grammar, closing tutor banner */
.bpex-objectives { background: #fff; border: 1px solid var(--bpex-line); border-radius: 16px; padding: 18px 22px; margin-bottom: 22px; }
.bpex-objectives h2 { font-size: 18px; margin: 0 0 10px; }
.bpex-obj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bpex-obj-list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--bpex-black); }
.bpex-obj-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border: 2px solid var(--bpex-orange); border-radius: 4px; }
.bpex-grammar { margin: 26px 0; }
.bpex-grammar > h2 { font-size: 22px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--bpex-line); }
.bpex-grammar-point { margin-bottom: 22px; }
.bpex-grammar-point h3 { font-size: 17px; color: var(--bpex-terracotta); margin: 0 0 6px; }
.bpex-grammar-body { margin: 0 0 10px; color: var(--bpex-black); }
.bpex-grammar-ex { width: 100%; border-collapse: collapse; font-size: 14px; }
.bpex-grammar-ex td { padding: 7px 10px; border-bottom: 1px solid var(--bpex-line); vertical-align: top; }
.bpex-gx-native { color: var(--bpex-terracotta); font-weight: 700; width: 40%; }
.bpex-gx-eng { width: 38%; }
.bpex-gx-pron { color: #6f6457; font-size: 13px; }
.bpex-grammar-tip { background: var(--bpex-sand); border-radius: 10px; padding: 9px 13px; font-size: 13px; margin-top: 8px; }
.bpex-tutor-banner { margin: 30px 0 8px; }
.bpex-tb-inner { background: var(--bpex-orange); color: #fff; border-radius: 20px; padding: 34px 28px; text-align: center; }
.bpex-tb-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.bpex-tb-inner h2 { font-size: 26px; margin: 8px 0 12px; color: #fff; }
.bpex-tb-inner p { max-width: 620px; margin: 0 auto 18px; font-size: 15px; line-height: 1.55; opacity: .95; }
.bpex-tb-btn { display: inline-block; background: #fff; color: var(--bpex-terracotta); font-weight: 700; border-radius: 12px; padding: 12px 26px; text-decoration: none; }
.bpex-tb-btn:hover { background: var(--bpex-sand); }

/* Complete Collection promo on the lessons index */
.bpex-collection-promo { display: block; margin: 4px 0 26px; background: linear-gradient(120deg, var(--bpex-terracotta), var(--bpex-orange)); color: #fff; border-radius: 18px; padding: 22px 26px; text-decoration: none; box-shadow: 0 8px 24px rgba(201,95,14,.18); transition: transform .12s ease, box-shadow .12s ease; }
.bpex-collection-promo:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201,95,14,.26); }
.bpex-cp-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.22); border-radius: 999px; padding: 4px 12px; }
.bpex-cp-title { display: block; font-size: 21px; font-weight: 800; margin: 10px 0 4px; color: #fff; }
.bpex-cp-sub { display: block; font-size: 15px; opacity: .95; }
.bpex-cp-btn { display: inline-block; margin-top: 12px; font-weight: 700; background: #fff; color: var(--bpex-terracotta); border-radius: 10px; padding: 9px 20px; }