
:root {
  --cream: #f7efe5;
  --cream-dim: rgba(247,239,229,.76);
  --muted: rgba(247,239,229,.58);
  --gold: #e7bf73;
  --gold-light: #f3d8a4;
  --bg-deep: #0c0a08;
  --nav-h: 78px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg-deep); }
body {
  min-height: 100%;
  margin: 0;
  color: var(--cream);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 50% 108%, rgba(244,223,187,.16), transparent 33%),
    radial-gradient(circle at 18% 8%, rgba(233,192,113,.08), transparent 24%),
    linear-gradient(180deg, #28221b 0%, #17130f 44%, #0c0a08 100%);
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body::-webkit-scrollbar, html::-webkit-scrollbar { display: none; width: 0; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
.app-shell { position: relative; width: min(100%, 520px); min-height: 100vh; margin: 0 auto; overflow: hidden; }
.ambient-stars { display: none; }
.app-main { position: relative; z-index: 2; min-height: 100vh; padding: 0 18px calc(var(--nav-h) + var(--safe-bottom) + 22px); }
.page { animation: page-in .16s ease-out both; }
@keyframes page-in { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }

h1,h2,h3,p { margin-top: 0; }
.page-title, .section-title, .lesson-title, .hero-title, .home-title, .module-page-title, .lesson-page-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.04em;
}
.topline { min-height: 42px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.circle-btn {
  position: relative; width: 41px; height: 41px; border-radius: 50%;
  border: 1px solid rgba(247,239,229,.13); background: rgba(30,25,20,.56); color: var(--cream);
  display: inline-flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.20);
  cursor: pointer;
}
.circle-btn.gold { color: var(--gold-light); }
.back-icon::before { content:""; width:11px; height:11px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform: rotate(45deg) translateX(2px); border-radius:1px; }
.page-title { color: var(--cream); font-size: clamp(34px, 9vw, 50px); line-height: .98; margin: 0 0 14px; }
.page-subtitle, .lead { color: var(--cream-dim); font-size: 15px; line-height: 1.45; margin: 0 0 18px; max-width: 340px; }

/* HOME */
.home-page { min-height: calc(100vh - var(--nav-h) - 18px); }
.home-stage {
  position: relative;
  min-height: calc(100vh - var(--nav-h) - 18px);
  margin-left: -18px;
  margin-right: -18px;
  overflow: hidden;
}
.home-bg-blur, .home-bg-image { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-bg-blur {
  background-image: url('assets/home-moon-kids-v6.webp');
  background-size: cover;
  background-position: center center;
  filter: blur(30px);
  transform: scale(1.09);
  opacity: .70;
}
.home-bg-image { object-fit: cover; object-position: center center; }
.home-stage::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,10,8,.24) 0%, rgba(12,10,8,.08) 26%, rgba(12,10,8,.08) 56%, rgba(12,10,8,.66) 100%),
    radial-gradient(circle at center, transparent 20%, rgba(12,10,8,.10) 76%, rgba(12,10,8,.26) 100%);
}
.home-overlay {
  position: absolute; inset: 0; z-index: 2;
  padding: calc(max(20px, env(safe-area-inset-top, 0px)) + 54px) 18px calc(var(--nav-h) + var(--safe-bottom) + 26px);
}
.home-title-block { max-width: 340px; }
.home-title {
  color: var(--cream);
  font-size: clamp(40px, 9.4vw, 50px);
  line-height: .93;
  margin: 0 0 14px;
  max-width: 208px;
}
.home-copy {
  font-size: 14px;
  line-height: 1.42;
  color: rgba(247,239,229,.88);
  max-width: 330px;
  margin: 0 0 16px;
}
.primary-cta {
  min-height: 44px;
  border: 1px solid rgba(243,216,164,.36);
  border-radius: 16px;
  padding: 0 18px;
  color: #23180d;
  background: linear-gradient(180deg, #f4dcae, #d5aa65);
  font-weight: 760;
  font-size: 14px;
  box-shadow: 0 14px 30px rgba(213,170,101,.22), inset 0 1px 0 rgba(255,255,255,.42);
  cursor: pointer;
}

.round-symbol {
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(243,216,164,.18);
  background: linear-gradient(180deg, rgba(243,216,164,.22), rgba(183,131,61,.17)); color: var(--gold-light);
  display:inline-flex; align-items:center; justify-content:center; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); flex:0 0 auto;
}
.round-symbol::before { content: attr(data-symbol); font-size:18px; line-height:1; }
.chevron { width:9px; height:9px; border-top:2px solid currentColor; border-right:2px solid currentColor; color: var(--gold-light); transform: rotate(45deg); opacity:.86; margin-right:4px; }

/* STANDARD PAGES */
.learning-page, .lives-page, .profile-page { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
.learning-title { font-size: 34px; margin:0; }
.gold-banner {
  min-height: 112px; margin: 2px 0 18px; border-radius:20px; padding:18px; position:relative; overflow:hidden; color:#2b1f12;
  background-image: linear-gradient(100deg, rgba(247,225,190,.96), rgba(213,174,116,.83)), url("assets/banner-gold-path.svg");
  background-size: cover; background-position: center; box-shadow: 0 12px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.50);
}
.gold-banner h2 { position:relative; z-index:2; width:min(74%,290px); font-family:Georgia, "Times New Roman", serif; font-weight:500; line-height:1.1; font-size:22px; letter-spacing:-.035em; margin:0 0 8px; }
.gold-banner p { position:relative; z-index:2; font-size:12px; margin:0; opacity:.70; }
.section-title { color: var(--cream); font-size:18px; line-height:1.1; margin:18px 0 10px; display:flex; justify-content:space-between; align-items:center; }
.section-title.no-margin { margin:0; }
.counter { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size:12px; color: var(--muted); }
.list { display:flex; flex-direction:column; gap:8px; }
.row-card {
  position:relative; min-height:61px; width:100%; border:1px solid rgba(247,239,229,.13); border-radius:18px; padding:10px 12px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  background: linear-gradient(180deg, rgba(54,47,39,.74), rgba(36,31,26,.74)); color: var(--cream); text-align:left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.17); cursor:pointer;
}
.row-title { font-size:14px; line-height:1.18; margin:0 0 2px; letter-spacing:-.01em; font-weight:760; }
.row-text { font-size:11.5px; line-height:1.25; margin:0; color: var(--muted); }
.mini-count {
  display: inline-block;
  margin-top: 5px;
  color: var(--gold-light);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 740;
}
.module-card-with-image {
  min-height: 92px;
  padding: 8px 12px 8px 8px;
  grid-template-columns: 116px 1fr auto;
  gap: 12px;
}
.module-thumb {
  width: 116px;
  height: 74px;
  border-radius: 15px;
  background-size: cover;
  background-position: center center;
  box-shadow: inset 0 0 0 1px rgba(247,239,229,.10);
}
.module-card-copy { min-width: 0; }

.pills { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 14px; }
.pill { border:1px solid rgba(243,216,164,.20); border-radius:999px; padding:7px 10px; color: var(--gold-light); background: rgba(243,216,164,.06); font-size:11px; line-height:1; font-weight:700; }
.lesson-title { color: var(--cream); font-size: clamp(28px,7.8vw,42px); line-height:1.03; margin:0 0 8px; }

.section-header-inline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:18px 0 10px;
}
.link-btn {
  border:0;
  background:transparent;
  color: var(--cream-dim);
  font-size:13px;
  padding:2px 0;
  cursor:pointer;
}
.story-rail {
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding: 2px 0 4px;
  scroll-snap-type: x proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.story-rail::-webkit-scrollbar { display:none; }
.story-card {
  position:relative;
  flex:0 0 132px;
  height:194px;
  border-radius:20px;
  border:1px solid rgba(247,239,229,.14);
  overflow:hidden;
  background-size:cover;
  background-position:center center;
  box-shadow: 0 12px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
  scroll-snap-align:start;
}
.story-card__overlay {
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,10,8,.04) 0%, rgba(12,10,8,.16) 45%, rgba(12,10,8,.82) 100%);
}
.story-card__title {
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  color: var(--cream);
  font-size:12px;
  line-height:1.15;
  font-weight:720;
  text-align:left;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* MODULE / LESSON */
.module-page {
  padding-top: max(18px, env(safe-area-inset-top, 0px));
}
.module-topline {
  margin-bottom: 14px;
}
.module-page-title {
  color: var(--cream);
  font-size: clamp(28px, 8vw, 40px);
  line-height: .98;
  margin: 0 0 14px;
}
.full-bleed-image {
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;
}
.module-detail-image {
  height: 224px;
  background-size: cover;
  background-position: center 38%;
  margin-bottom: 14px;
  box-shadow: none;
  border-radius: 0;
}
.module-description { margin: 0 0 12px; color: rgba(247,239,229,.82); font-size: 14px; line-height:1.42; max-width:360px; }

.lesson-list-row {
  min-height: 84px;
  padding: 10px 12px 10px 10px;
  grid-template-columns: 64px 1fr auto;
}
.lesson-thumb {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background-size: cover;
  background-position: center center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(247,239,229,.11);
}
.lesson-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,10,8,.02), rgba(12,10,8,.18));
}

.lesson-page-new {
  padding-top: max(18px, env(safe-area-inset-top, 0px));
}
.lesson-title-topline {
  margin-bottom: 12px;
}
.lesson-head {
  margin-bottom: 12px;
}
.lesson-kicker {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lesson-page-title {
  color: var(--cream);
  font-size: clamp(30px, 8.6vw, 42px);
  line-height: .98;
  margin: 0 0 6px;
}
.lesson-subline {
  margin: 0;
  color: var(--cream-dim);
  font-size: 13px;
  line-height: 1.34;
}
.lesson-image-full {
  position: relative;
  height: 256px;
  background-size: cover;
  background-position: center center;
  margin-bottom: 18px;
}
.lesson-image-full::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,10,8,.02) 0%, rgba(12,10,8,.08) 70%, rgba(12,10,8,.35) 100%);
}
.play-large {
  position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%; border:2px solid rgba(255,255,255,.68);
  background: rgba(255,255,255,.10); backdrop-filter: blur(8px); display:flex; align-items:center; justify-content:center; z-index:2;
}
.play-large::before { content:""; width:0; height:0; border-top:11px solid transparent; border-bottom:11px solid transparent; border-left:17px solid rgba(255,255,255,.92); margin-left:5px; }
.audio-title { margin:0 0 9px; color: var(--cream); font-size:15px; font-weight:820; }
.audio-player { min-height:54px; border-radius:16px; border:1px solid rgba(247,239,229,.11); background: rgba(74,64,52,.82); padding:8px 11px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; }
.play-small { width:38px; height:38px; border-radius:13px; background: linear-gradient(180deg, #f3d8a4, #c99a52); display:flex; align-items:center; justify-content:center; color:#25190d; }
.play-small::before { content:""; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:12px solid currentColor; margin-left:3px; }
.wave { height:28px; display:flex; gap:3px; align-items:center; }
.wave i { display:block; width:2px; border-radius:99px; background: linear-gradient(180deg, var(--gold-light), rgba(243,216,164,.30)); }
.audio-time { margin-top:3px; display:flex; justify-content:space-between; color: var(--muted); font-size:10px; }
.material-heading { margin:18px 0 10px; font-size:15px; font-weight:820; }
.text-card { border:1px solid rgba(247,239,229,.13); border-radius:18px; background: linear-gradient(180deg, rgba(54,47,39,.74), rgba(36,31,26,.74)); padding:16px; margin-bottom:10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.17); }
.text-card h3 { color: var(--gold-light); font-size:17px; line-height:1.15; margin:0 0 6px; }
.text-card p { margin:0; color: var(--muted); font-size:14px; line-height:1.42; }
.version-note { margin-top:14px; color: rgba(247,239,229,.35); font-size:11px; }

/* BOTTOM NAV */
.bottom-nav {
  position: fixed; z-index:20; left:50%; bottom:max(10px, env(safe-area-inset-bottom,0px)); transform: translateX(-50%);
  width:min(calc(100% - 28px), 484px); min-height: var(--nav-h); padding:8px 10px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:4px;
  border:1px solid rgba(247,239,229,.13); border-radius:27px; background: rgba(29,24,20,.86); backdrop-filter: blur(20px);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.bottom-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px -14px -20px;
  border-radius: 36px;
  background: rgba(8, 6, 5, .48);
  backdrop-filter: blur(18px);
  box-shadow: 0 -18px 40px rgba(8,6,5,.36);
}
.nav-item {
  border:0; border-radius:18px; background:transparent; color: rgba(247,239,229,.76);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font-size:11px; font-weight:720; padding:4px 0; cursor:pointer;
}
.nav-item.active { color: var(--gold-light); }
.nav-icon {
  width: 23px; height: 23px; display:block; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.nav-home {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 3 10.2v10.3h6.2v-6h5.6v6H21V10.2Zm7 15.5h-2.2v-6H7.2v6H5V11.2L12 5.6l7 5.6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 3 10.2v10.3h6.2v-6h5.6v6H21V10.2Zm7 15.5h-2.2v-6H7.2v6H5V11.2L12 5.6l7 5.6Z'/%3E%3C/svg%3E");
}
.nav-book {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15.8h-12a2.8 2.8 0 0 0-2 .8H20V21H6.5A2.5 2.5 0 0 1 4 18.5Zm2.5-.7a1 1 0 0 0-1 1v12.7a1.2 1.2 0 0 1 .5-.1h12.5V4.8Z'/%3E%3Cpath fill='black' d='M8 7h8v1.5H8Zm0 3h6v1.5H8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15.8h-12a2.8 2.8 0 0 0-2 .8H20V21H6.5A2.5 2.5 0 0 1 4 18.5Zm2.5-.7a1 1 0 0 0-1 1v12.7a1.2 1.2 0 0 1 .5-.1h12.5V4.8Z'/%3E%3Cpath fill='black' d='M8 7h8v1.5H8Zm0 3h6v1.5H8Z'/%3E%3C/svg%3E");
}
.nav-signal {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5Zm2.5-1a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z'/%3E%3Cpath fill='black' d='m10 9 5 3-5 3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5Zm2.5-1a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z'/%3E%3Cpath fill='black' d='m10 9 5 3-5 3Z'/%3E%3C/svg%3E");
}
.nav-profile {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.2a4.3 4.3 0 1 1-4.3 4.3A4.3 4.3 0 0 1 12 4.2Zm0 1.5a2.8 2.8 0 1 0 2.8 2.8A2.8 2.8 0 0 0 12 5.7ZM12 14c4.2 0 7.3 2.1 8 5.2l.1.5h-1.5l-.1-.3c-.5-2.2-2.9-3.9-6.5-3.9s-6 1.7-6.5 3.9l-.1.3H3.9l.1-.5C4.7 16.1 7.8 14 12 14Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.2a4.3 4.3 0 1 1-4.3 4.3A4.3 4.3 0 0 1 12 4.2Zm0 1.5a2.8 2.8 0 1 0 2.8 2.8A2.8 2.8 0 0 0 12 5.7ZM12 14c4.2 0 7.3 2.1 8 5.2l.1.5h-1.5l-.1-.3c-.5-2.2-2.9-3.9-6.5-3.9s-6 1.7-6.5 3.9l-.1.3H3.9l.1-.5C4.7 16.1 7.8 14 12 14Z'/%3E%3C/svg%3E");
}

@media (max-width: 390px) {
  .app-main { padding-left:16px; padding-right:16px; }
  .home-stage { margin-left:-16px; margin-right:-16px; }
  .home-overlay { padding-left:16px; padding-right:16px; }
  .full-bleed-image { width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; }
  .module-card-with-image { grid-template-columns: 102px 1fr auto; }
  .module-thumb { width:102px; height:68px; }
  .story-card { flex-basis: 124px; height: 184px; }
  .lesson-list-row { grid-template-columns: 58px 1fr auto; }
  .lesson-thumb { width:58px; height:58px; border-radius:15px; }
}

@media (min-width: 700px) {
  .app-shell { width:min(100%, 740px); }
  .app-main { padding-left:24px; padding-right:24px; }
  .home-stage { margin-left:-24px; margin-right:-24px; }
  .home-overlay { padding-left:24px; padding-right:24px; }
  .full-bleed-image { width: calc(100% + 48px); margin-left: -24px; margin-right: -24px; }
  .list.gridable { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-rail { gap:14px; }
}





/* HOME HERO V13 */
.home-page--poster {
  min-height: calc(100vh - var(--nav-h) - 18px);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0;
}
.home-stage--v13 {
  min-height: auto;
  background: transparent;
  position: relative;
}
.home-poster-image--v13 {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: cover;
  object-position: center top;
}
.home-overlay--v13 {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: calc(max(18px, env(safe-area-inset-top, 0px)) + 58px) 18px calc(var(--nav-h) + var(--safe-bottom) + 22px);
  pointer-events: none;
}
.home-title-block--v13 {
  max-width: 290px;
}
.home-title--v13 {
  max-width: 200px;
  font-size: clamp(34px, 8.4vw, 44px);
  line-height: .93;
  margin: 0 0 16px;
  text-wrap: balance;
}
.home-copy--v13 {
  max-width: 320px;
  font-size: 14px;
  line-height: 1.44;
  color: rgba(247,239,229,.90);
  margin: 0;
  text-wrap: balance;
}


/* HOME AGREED HERO V15 */
html, body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
}
.home-page--poster {
  min-height: calc(100dvh - var(--nav-h) - var(--safe-bottom) - 18px);
  padding: 0;
  margin: 0;
  display: block;
}
.home-stage--v15 {
  position: relative;
  min-height: calc(100dvh - var(--nav-h) - var(--safe-bottom) - 18px);
  margin-left: -18px;
  margin-right: -18px;
  overflow: hidden;
  background: #0c0a08;
}
.home-stage--v15::after {
  display: none;
}
.home-stage--v15 .home-overlay,
.home-stage--v15 .home-title-block,
.home-stage--v15 .home-title,
.home-stage--v15 .home-copy,
.home-cta-wrap,
.primary-cta--home {
  display: none !important;
}
.home-poster-image--v15 {
  display: block;
  width: 100%;
  height: calc(100dvh - var(--nav-h) - var(--safe-bottom) - 18px);
  min-height: 0;
  object-fit: cover;
  object-position: center top;
}
@media (max-width: 390px) {
  .home-stage--v15 {
    margin-left: -16px;
    margin-right: -16px;
  }
}
@media (min-width: 700px) {
  .home-stage--v15 {
    margin-left: -24px;
    margin-right: -24px;
  }
}


/* CONTENT UPDATE V15.2 */
.lesson-list-row .row-title,
.module-card-with-image .row-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lesson-list-row .row-text,
.module-card-with-image .row-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lesson-image-full .play-large {
  display: none !important;
}


/* V17 library story full-width artwork */
.library-story-page {
  position: relative;
}
.library-story-stage {
  position: relative;
  overflow: hidden;
  background: #0c0a08;
  margin-bottom: 0;
}
.library-story-image {
  display: block;
  width: 100%;
  height: auto;
}
.library-story-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12,10,8,.16) 0%, rgba(12,10,8,.04) 26%, rgba(12,10,8,.00) 54%, rgba(12,10,8,.26) 72%, rgba(12,10,8,.68) 100%),
    linear-gradient(180deg, rgba(12,10,8,.14) 0%, rgba(12,10,8,0) 22%, rgba(12,10,8,0) 74%, rgba(12,10,8,.84) 100%);
  pointer-events: none;
}
.library-story-top {
  position: absolute;
  inset: 0;
  padding: 0 18px 18px;
  z-index: 2;
}
.library-story-head {
  margin-bottom: 0;
  max-width: 82%;
}
.library-story-page .lesson-page-title,
.library-story-page .lesson-subline,
.library-story-page .lesson-kicker {
  text-shadow: 0 2px 14px rgba(0,0,0,.34);
}
.library-story-panel {
  position: relative;
  z-index: 3;
  margin-top: clamp(-280px, -30vh, -210px);
}
.library-story-page .audio-title,
.library-story-page .material-heading {
  position: relative;
  z-index: 3;
}
.library-story-page .audio-player,
.library-story-page .row-card {
  position: relative;
  z-index: 3;
  background: rgba(65, 56, 47, .58);
  backdrop-filter: blur(14px);
}
@media (max-width: 399px) {
  .library-story-top {
    padding-left: 16px;
    padding-right: 16px;
  }
  .library-story-panel {
    margin-top: -220px;
  }
}
@media (min-width: 700px) {
  .library-story-top {
    padding-left: 24px;
    padding-right: 24px;
  }
  .library-story-head {
    max-width: 66%;
  }
  .library-story-panel {
    margin-top: -260px;
  }
}


/* V18 real audio links */
.audio-player.has-audio {
  cursor: pointer;
}
.audio-player.has-audio audio {
  display: none;
}
.audio-player .play-small {
  border: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.audio-player.is-placeholder {
  opacity: .86;
}
.audio-player.is-playing .play-small::before {
  width: 13px;
  height: 16px;
  border: 0;
  margin-left: 0;
  background:
    linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
}
.audio-player.is-playing .wave i {
  opacity: .95;
}


/* V19 audio player controls */
.audio-player {
  grid-template-columns: auto 1fr auto;
}
.audio-main {
  min-width: 0;
}
.audio-range {
  --track-h: 5px;
  width: 100%;
  height: 28px;
  display: block;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.audio-range::-webkit-slider-runnable-track {
  height: var(--track-h);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-light) 0 var(--progress), rgba(247,239,229,.18) var(--progress) 100%);
}
.audio-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  margin-top: -6px;
  background: linear-gradient(180deg, #f7dfae, #d5aa65);
  border: 1px solid rgba(255,255,255,.46);
  box-shadow: 0 2px 9px rgba(0,0,0,.35), 0 0 0 5px rgba(231,191,115,.08);
}
.audio-range::-moz-range-track {
  height: var(--track-h);
  border-radius: 999px;
  background: rgba(247,239,229,.18);
}
.audio-range::-moz-range-progress {
  height: var(--track-h);
  border-radius: 999px;
  background: var(--gold-light);
}
.audio-range::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7dfae, #d5aa65);
  border: 1px solid rgba(255,255,255,.46);
  box-shadow: 0 2px 9px rgba(0,0,0,.35);
}
.audio-speed {
  width: 44px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(243,216,164,.22);
  background: rgba(243,216,164,.08);
  color: var(--gold-light);
  font-size: 12px;
  line-height: 1;
  font-weight: 780;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.audio-player.is-playing {
  border-color: rgba(243,216,164,.22);
}
.audio-player.is-playing .audio-range::-webkit-slider-thumb {
  box-shadow: 0 2px 9px rgba(0,0,0,.35), 0 0 0 6px rgba(231,191,115,.12);
}
@media (max-width: 390px) {
  .audio-player {
    grid-template-columns: auto 1fr auto;
    gap: 9px;
  }
  .audio-speed {
    width: 39px;
    font-size: 11px;
  }
}
