/* ============================================================
   EQUATION STATION SA — Premium Topic Page Styles
   Full redesign: hero, cards, formulas, CTA, sidebar
   ============================================================ */

/* ── TOPIC HERO (Upgraded) ── */
.study-path-nav {
  background: oklch(96% 0.01 85);
  border-bottom: 1px solid oklch(22% 0.02 255 / 0.08);
  padding: 9px 24px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.study-path-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  flex-wrap: wrap;
}
.study-path-nav-inner a {
  color: oklch(22% 0.02 255);
  text-decoration: none;
  font-weight: 600;
}
.study-path-nav-inner a:hover { color: oklch(48% 0.14 254); }
.study-path-sep { color: oklch(48% 0.14 254); font-weight: 700; padding: 0 2px; }
.study-path-current { color: oklch(22% 0.02 255); font-weight: 700; }

.topic-hero {
  position: relative;
  padding: 7rem 0 5rem;
  background: var(--navy-dark);
  overflow: hidden;
  margin-top: 64px;
}
.topic-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, oklch(22% 0.02 255 / 0.97) 0%, oklch(22% 0.02 255 / 0.8) 50%, oklch(22% 0.02 255 / 0.92) 100%);
  z-index: 1;
}
.topic-hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.3;
}
.topic-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}
.topic-hero-content { max-width: 680px; }
.topic-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topic-breadcrumb a { color: rgba(255,255,255,0.45); transition: color var(--transition); }
.topic-breadcrumb a:hover { color: var(--gold); }
.topic-breadcrumb svg { width: 12px; height: 12px; opacity: 0.4; }

.grade-switch {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.grade-switch a {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.65);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: all var(--transition);
}
.grade-switch a:hover { border-color: var(--gold); color: var(--white); }
.grade-switch a.active { background: var(--gold); border-color: var(--gold); color: var(--navy-dark); }

.subtopic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.subtopic-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.subtopic-card-body { padding: 1.1rem 1.25rem 1.25rem; }
.subtopic-card h3 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--navy); }
.subtopic-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 0.85rem; }
.video-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0; cursor: pointer; background: #000; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb .play-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-thumb .play-badge span { width: 52px; height: 52px; border-radius: 50%; background: rgba(26,42,58,0.82); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background var(--transition), color var(--transition); }
.video-thumb:hover .play-badge span { background: var(--gold); color: var(--navy-dark); }
.video-frame-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.video-frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-expand-btn { position: absolute; right: 0.65rem; bottom: 0.65rem; z-index: 2; border: 1px solid rgba(255,255,255,.55); border-radius: 6px; background:rgba(12,18,26,.84); color:#fff; cursor:pointer; font:700 .72rem/1 'IBM Plex Sans',system-ui,sans-serif; padding:.46rem .62rem; }
.video-expand-btn:hover,.video-expand-btn:focus-visible { background:#145daa; outline:2px solid #fff; outline-offset:2px; }
.video-frame-wrap:fullscreen { width:100%; height:100%; aspect-ratio:auto; }
.video-frame-wrap:fullscreen .video-expand-btn { display:none; }
.video-local-notice { display:flex; flex-direction:column; justify-content:center; gap:.55rem; min-height:160px; padding:1.25rem; background:#f7fbff; border:1px solid #bed5e8; color:#16324a; text-align:left; }
.video-local-notice strong { color:#145daa; font-size:.92rem; }
.video-local-notice span { max-width:44ch; color:#49677f; font-size:.82rem; line-height:1.55; }
.video-local-notice code { padding:.12rem .28rem; background:#e8f2fb; border-radius:4px; color:#145daa; }
.subtopic-source { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.5rem; }

.topic-soon-tag { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--off-white); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; vertical-align: middle; }
.all-topics-list a[href$="-g11.html"]:not(.active), .all-topics-list a[href$="-g10.html"]:not(.active) { pointer-events: none; color: var(--text-muted); cursor: default; }
.all-topics-list a[href$="-g11.html"]:not(.active):hover, .all-topics-list a[href$="-g10.html"]:not(.active):hover { background: transparent; }
.all-topics-list a.topic-item-disabled { pointer-events: none; color: var(--text-muted); cursor: default; }
.all-topics-list a.topic-item-disabled:hover { background: transparent; }
.all-topics-list a.topic-item-disabled svg { opacity: 0.35; }

.topic-hero h1 {
  color: var(--white);
  margin-bottom: 1rem;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.1;
}
.topic-hero h1 span { color: var(--gold); }
.topic-hero-desc {
  color: rgba(255,255,255,0.65);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: 2rem;
}
.topic-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.topic-hero-helper {
  color: rgba(255,255,255,0.72);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0 0 1.5rem;
}
.topic-hero-helper a {
  color: var(--gold);
  font-weight: 700;
}
.topic-hero-study-path {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 980px;
  margin-bottom: 2.25rem;
}
.hero-path-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  text-decoration: none;
  padding: 1.15rem 1.2rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 42px rgba(7,19,34,0.16);
  backdrop-filter: blur(10px);
  transition: all var(--transition);
}
.hero-path-card:hover {
  transform: translateY(-3px);
  border-color: oklch(48% 0.14 254 / 0.55);
  background: rgba(255,255,255,0.1);
}
.hero-path-step {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: oklch(48% 0.14 254 / 0.16);
  border: 1px solid oklch(48% 0.14 254 / 0.32);
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-path-card h3 {
  color: var(--white);
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0;
}
.hero-path-card p {
  color: rgba(255,255,255,0.7);
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0;
}
.hero-path-link {
  margin-top: auto;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  background: var(--gold);
  color: var(--navy-dark);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all var(--transition);
  border: 2px solid var(--gold);
}
.btn-hero-primary:hover {
  background: #c9a24e;
  border-color: #c9a24e;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px oklch(48% 0.14 254 / 0.4);
}
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  background: transparent;
  color: rgba(255,255,255,0.85);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all var(--transition);
  border: 2px solid rgba(255,255,255,0.3);
}
.btn-hero-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}
.topic-hero-meta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.topic-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: oklch(48% 0.14 254 / 0.12);
  border: 1px solid oklch(48% 0.14 254 / 0.3);
  border-radius: 50px;
  font-size: 0.72rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.topic-meta-pill svg { width: 11px; height: 11px; }

/* Topic hero image panel (right side) */
.topic-hero-image-panel {
  display: flex;
  align-items: center;
  justify-content: center;
}
.topic-hero-svg-wrap {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: oklch(48% 0.14 254 / 0.08);
  border: 2px solid oklch(48% 0.14 254 / 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── TOPIC LAYOUT ── */
.topic-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
  padding-top: 4rem;
  padding-bottom: 5rem;
}

/* ── CONTENT SECTIONS ── */
.content-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.content-block:hover { box-shadow: var(--shadow-md); }
.content-block-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.content-block-header-icon {
  width: 40px;
  height: 40px;
  background: var(--gold-pale);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.content-block-header-icon svg { width: 18px; height: 18px; color: var(--gold); }
.content-block-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0;
}

/* Section-specific accent colors for visual distinction */
#concepts .content-block-header { border-bottom-color: oklch(48% 0.14 254 / 0.25); }
#concepts .content-block-header-icon { background: linear-gradient(135deg, var(--gold-pale) 0%, oklch(94% 0.03 254) 100%); }

#formulas .content-block-header { border-bottom-color: oklch(22% 0.02 255 / 0.2); }
#formulas .content-block-header-icon { background: linear-gradient(135deg, #e8edf2 0%, #dce3eb 100%); }
#formulas .content-block-header-icon svg { color: var(--navy); }

#outcomes .content-block-header { border-bottom-color: rgba(46,125,50,0.2); }
#outcomes .content-block-header-icon { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); }
#outcomes .content-block-header-icon svg { color: #2e7d32; }

#mistakes .content-block-header { border-bottom-color: rgba(231,76,60,0.2); }
#mistakes .content-block-header-icon { background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%); }
#mistakes .content-block-header-icon svg { color: #e74c3c; }

#resources .content-block-header { border-bottom-color: oklch(48% 0.14 254 / 0.25); }
.content-block-header p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.2rem 0 0;
}
.content-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.content-section-title svg { width: 20px; height: 20px; color: var(--gold); }
.content-section-title h2 { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--navy-dark); }

/* ── VIDEO SECTION ── */
.video-section {
  background: var(--navy-dark);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  margin-bottom: 2rem;
}
.video-section .content-block-header { border-bottom-color: rgba(255,255,255,0.1); }
.video-section .content-block-header h2 { color: var(--white); }
.video-section .content-block-header p { color: rgba(255,255,255,0.45); }
.video-section .content-block-header-icon { background: oklch(48% 0.14 254 / 0.15); }
.video-embed-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.video-embed-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-embed-wrap .yt-embed-wrapper {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  transform: none;
}
.video-embed-wrap .yt-embed-wrapper:hover {
  transform: none;
}
.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: oklch(22% 0.02 255 / 0.8);
}
.video-play-circle {
  width: 72px; height: 72px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px oklch(48% 0.14 254 / 0.4);
}
.video-play-circle svg { width: 28px; height: 28px; color: var(--navy-dark); margin-left: 4px; }
.video-placeholder-text { color: rgba(255,255,255,0.5); font-size: 0.82rem; text-align: center; }
.video-note {
  margin-top: 1.25rem;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.video-note svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }

/* ── CONCEPT CARDS ── */
.concept-grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.concept-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-radius: 8px;
  border-left: 3px solid var(--gold);
  transition: all var(--transition);
}
.concept-card:hover {
  background: var(--gold-pale);
  transform: translateX(3px);
}
.concept-icon {
  width: 32px; height: 32px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.concept-icon svg { width: 14px; height: 14px; color: var(--navy-dark); }
.concept-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
}
.concept-card p {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0;
}
.concept-card p .MJX-TEX {
  font-size: 1.05em !important;
}

/* ── FORMULA CARDS (Premium) ── */
.formula-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.formula-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem;
  position: relative;
  overflow: visible;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.formula-block:hover {
  box-shadow: var(--shadow-md);
  border-color: oklch(48% 0.14 254 / 0.3);
}
.formula-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.formula-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.formula-display {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.8;
  background: transparent;
  padding: 1.25rem 0;
  border-radius: 0;
  margin-bottom: 1rem;
  border: none;
  overflow: visible;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.formula-display .MJX-TEX { color: var(--navy); }
.formula-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
  font-style: italic;
}

.formula-display {
  flex-direction: column;
  gap: 0.45rem;
}

/* Formula source note removed for cleaner student focus */

/* ── MISTAKE CARDS ── */
.mistake-grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.mistake-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  background: #fff5f5;
  border-radius: 8px;
  border-left: 3px solid #e74c3c;
  transition: all var(--transition);
}
.mistake-card:hover { background: #ffeaea; }
.mistake-badge {
  width: 28px; height: 28px;
  background: #e74c3c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mistake-badge svg { width: 13px; height: 13px; color: white; }
.mistake-card h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #c0392b;
  margin: 0 0 0.3rem;
  font-family: var(--font-body);
}
.mistake-card p {
  font-size: 0.87rem;
  color: #666;
  line-height: 1.65;
  margin: 0;
}

/* ── OUTCOME GRID ── */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.outcome-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--off-white);
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.outcome-pill:hover {
  background: var(--gold-pale);
  border-color: oklch(48% 0.14 254 / 0.3);
}
.outcome-check {
  width: 26px; height: 26px;
  background: var(--gold-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.outcome-check svg { width: 13px; height: 13px; color: var(--gold); }
.outcome-pill span { font-size: 0.87rem; color: var(--navy); font-weight: 500; line-height: 1.45; }

/* ── RESOURCES (Premium) ── */
.resource-cards-premium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.resource-card-premium {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.resource-card-premium:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: oklch(48% 0.14 254 / 0.35);
}
.rcp-top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.rcp-pdf-icon {
  flex-shrink: 0;
  width: 44px;
  height: 52px;
  background: #c0392b;
  border-radius: 6px 6px 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
}
.rcp-pdf-icon::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent rgba(255,255,255,0.2) transparent transparent;
}
.rcp-pdf-icon svg { width: 16px; height: 16px; color: white; }
.rcp-pdf-icon span { color: white; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; }
.rcp-meta { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.3rem; }
.rcp-title { font-size: 0.95rem; font-weight: 700; color: var(--navy-dark); line-height: 1.4; margin: 0; }
.rcp-desc { font-size: 0.84rem; color: var(--text-muted); line-height: 1.65; margin: 0 0 1.25rem; flex: 1; }
.rcp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--gold-pale);
  border: 1px solid oklch(48% 0.14 254 / 0.25);
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 3px;
  margin-bottom: 1.25rem;
}
.rcp-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.4rem;
  background: var(--gold);
  color: var(--navy-dark);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: all var(--transition);
  margin-top: auto;
  align-self: flex-start;
}
.rcp-download-btn:hover {
  background: #c9a24e;
  border-color: #c9a24e;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px oklch(48% 0.14 254 / 0.32);
}
.rcp-download-btn svg { width: 13px; height: 13px; }
.rcp-download-btn.is-disabled {
  background: #e9e3d9;
  border-color: #e9e3d9;
  color: #7f7a73;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

/* Algebra study path: short, teacher-directed and responsive. */
#learn-more {
  background: linear-gradient(135deg, #f7fbff 0%, #fffdf8 100%);
  border-color: #c8dced;
  box-shadow: 0 12px 30px rgba(20, 93, 170, 0.08);
}
#learn-more .content-block-header { border-bottom-color: #c8dced; }
#learn-more .content-block-header-icon {
  background: #145daa;
  box-shadow: 0 6px 14px rgba(20, 93, 170, 0.22);
}
#learn-more .content-block-header-icon svg { color: #fff; }
#learn-more .content-block-header p {
  color: #49677f;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.external-resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
}
.external-resource-card {
  --resource-accent: #145daa;
  --resource-wash: #eaf4ff;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 210px;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #d6e3ed;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(20, 44, 68, 0.06);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.external-resource-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--resource-accent);
}
.external-resource-card:nth-child(2) { --resource-accent: #7b4f00; --resource-wash: #fff5df; }
.external-resource-card:nth-child(3) { --resource-accent: #147a69; --resource-wash: #e5f7f2; }
.external-resource-card:nth-child(4) { --resource-accent: #6445a6; --resource-wash: #f1ecff; }
.external-resource-card:hover {
  transform: translateY(-3px);
  border-color: var(--resource-accent);
  box-shadow: 0 12px 22px rgba(20, 44, 68, 0.12);
}
.external-resource-card h3 {
  color: #162c41;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 0.55rem;
}
.external-resource-card p {
  color: #49677f;
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 0 0 1.1rem;
  flex: 1;
}
.external-resource-type {
  display: inline-flex;
  align-self: flex-start;
  color: var(--resource-accent);
  background: var(--resource-wash);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  padding: 0.42rem 0.58rem;
}
.external-resource-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  color: #fff;
  background: var(--resource-accent);
  border: 1px solid var(--resource-accent);
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1;
  padding: 0.68rem 0.78rem;
  text-decoration: none;
  transition: filter 160ms ease, transform 160ms ease;
}
.external-resource-link:hover,
.external-resource-link:focus-visible {
  color: #fff;
  filter: brightness(0.9);
  text-decoration: none;
  transform: translateY(-1px);
}
.external-resource-link:focus-visible { outline: 3px solid #f0bc4c; outline-offset: 3px; }

/* Lesson deck: a focused classroom surface, not a document reader. */
.embed-wrap { margin-bottom: 2rem !important; }
.embed-box {
  border: 1px solid #bed5e8 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 38px rgba(20, 44, 68, 0.14) !important;
}
.embed-topbar {
  background: linear-gradient(110deg, #102d45 0%, #145daa 100%) !important;
  padding: 0.8rem 1rem !important;
}
.embed-slide-area {
  height: min(600px, 72vh) !important;
  padding: clamp(1rem, 3vw, 2.25rem) !important;
  background:
    radial-gradient(circle at top right, rgba(104, 161, 231, 0.16), transparent 30%),
    #f5f9fd !important;
}
.lesson-slide {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(0.95rem, 2.2vw, 1.55rem);
  background: #fff;
  border: 1px solid #d5e2ec;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(20, 44, 68, 0.08);
}
.lesson-cue {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.2rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: #edf6ff;
  color: #145daa;
}
.lesson-cue-step {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: #145daa;
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
}
.lesson-cue strong,
.lesson-cue small { display: block; }
.lesson-cue strong {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  line-height: 1.1;
}
.lesson-cue small { color: #49677f; font-size: 0.75rem; line-height: 1.35; margin-top: 0.12rem; }
.lesson-slide--worked-example .lesson-cue { background: #fff5df; color: #7b4f00; }
.lesson-slide--worked-example .lesson-cue-step { background: #7b4f00; }
.lesson-slide--quiz .lesson-cue { background: #e5f7f2; color: #147a69; }
.lesson-slide--quiz .lesson-cue-step { background: #147a69; }
.lesson-slide--title .lesson-cue { background: #f1ecff; color: #6445a6; }
.lesson-slide--title .lesson-cue-step { background: #6445a6; }
.lesson-slide .sec-head { margin-bottom: 1rem; padding-bottom: 0.9rem; }
.lesson-slide .sec-title { font-size: clamp(1.25rem, 2.8vw, 1.65rem); }
.lesson-slide .sec-sub { font-size: 0.84rem; }
.lesson-slide .card { box-shadow: none; border-color: #d5e2ec; }
.lesson-slide .card-example { border-left-width: 5px; border-left-color: #145daa; background: #fbfdff; }
.lesson-slide .callout { background: #f7fbff; border-color: #d5e2ec; }
.lesson-slide .callout-tag { background: #eaf4ff; color: #145daa; border-color: #bed5e8; }
.lesson-slide .fact-card { box-shadow: none; border-color: #d5e2ec; }
.lesson-slide .fact-card:first-child { border-top: 4px solid #145daa; }
.lesson-slide .fact-card:nth-child(2) { border-top: 4px solid #d99a22; }
.lesson-slide--quiz .quiz-card { border: 1px solid #bfe5dc; box-shadow: none; }
.lesson-slide--quiz .quiz-badge { background: #147a69; }
.lesson-slide--quiz .quiz-opt { border-radius: 8px; }
.lesson-slide--title .slide-title-inner h2 { font-size: clamp(2rem, 5vw, 3rem); }
.lesson-slide--title .slide-title-inner p { max-width: 48ch; font-size: 1rem; }
.learning-ladder {
  display: grid;
  gap: 0.6rem;
  margin: 0.5rem 0 1rem;
}
.learning-ladder-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem;
  background: #f7fafc;
  border: 1px solid #dbe5ed;
  border-radius: 10px;
  opacity: 0.7;
}
.learning-ladder-step > span {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: #dce8f1;
  color: #36546c;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
}
.learning-ladder-step strong,
.learning-ladder-step small { display: block; }
.learning-ladder-step strong { color: #162c41; font-size: 0.86rem; }
.learning-ladder-step small { color: #49677f; font-size: 0.75rem; margin-top: 0.12rem; }
.learning-ladder-step.is-current { background: #eaf4ff; border-color: #72a9df; opacity: 1; }
.learning-ladder-step.is-current > span { background: #145daa; color: #fff; }
.maths-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.maths-task {
  border: 1px solid #d5e2ec;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.maths-task summary {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: pointer;
  list-style: none;
  color: #162c41;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
  padding: 0.8rem;
}
.maths-task summary::-webkit-details-marker { display: none; }
.maths-task summary span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 6px;
  background: #fff5df;
  color: #7b4f00;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
}
.maths-task[open] summary { background: #fffaf0; }
.maths-task > div {
  border-top: 1px solid #d5e2ec;
  color: #36546c;
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 0.75rem 0.8rem;
}

/* Grade 12 Polynomials: short, teacher-led exam route */
.polynomial-video-grid {
  grid-template-columns: minmax(0, 420px);
  max-width: 420px;
  margin-top: 0;
}
#lesson,
#worked-examples,
#practice { scroll-margin-top: 5.5rem; }
.polynomial-route {
  background: linear-gradient(135deg, #f4faff 0%, #fffaf0 100%);
  border-color: #c7dbea;
}
.polynomial-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.polynomial-route-step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 0.7rem;
  align-items: start;
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid #d6e3ec;
  border-radius: 10px;
}
.polynomial-route-step > span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
  background: #153e62;
  color: #fff;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
}
.polynomial-route-step strong {
  color: #132f47;
  font-size: 0.9rem;
  line-height: 1.25;
}
.polynomial-route-step small {
  grid-column: 2;
  display: block;
  margin-top: 0.24rem;
  color: #49677f;
  font-size: 0.77rem;
  line-height: 1.46;
}
.math-inline {
  color: #153e62;
  font-family: "DM Mono", ui-monospace, "Cascadia Mono", monospace;
  font-size: 0.94em;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.polynomial-teacher-note {
  margin-top: 0.85rem;
  padding: 0.8rem 0.95rem;
  border-left: 4px solid #d39a2c;
  border-radius: 0 9px 9px 0;
  background: #fff8e8;
  color: #614515;
  font-size: 0.84rem;
  line-height: 1.55;
}
.polynomial-caps-focus {
  display: block;
  margin-top: 0.35rem;
  color: #76571d;
  font-size: 0.78rem;
  font-weight: 600;
}
.polynomial-work-grid {
  display: grid;
  gap: 0.72rem;
}
.polynomial-work-card {
  overflow: hidden;
  border: 1px solid #d4e1eb;
  border-radius: 11px;
  background: #fff;
}
.polynomial-work-card summary {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
}
.polynomial-work-card summary::-webkit-details-marker { display: none; }
.polynomial-work-card summary > span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
  background: #eaf4ff;
  color: #145daa;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
}
.polynomial-work-card summary strong,
.polynomial-work-card summary small { display: block; }
.polynomial-work-card summary strong {
  color: #152f46;
  font-size: 0.9rem;
}
.polynomial-work-card summary small {
  margin-top: 0.2rem;
  color: #527088;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.48;
}
.polynomial-work-card[open] summary { background: #f7fbff; }
.polynomial-solution {
  padding: 0.15rem 1rem 0.95rem 3.7rem;
  border-top: 1px solid #dce7ef;
  color: #36546c;
  font-size: 0.84rem;
  line-height: 1.58;
}
.polynomial-solution p { margin: 0.55rem 0 0; }
.polynomial-solution p:first-child { margin-top: 0.78rem; }
.polynomial-sprint {
  border-color: #e7d8b5;
  background: linear-gradient(135deg, #fffdf7 0%, #fff7e6 100%);
}
/* Video buttons replace themselves with an embedded player; students remain on the lesson page. */
.subtopic-source::after {
  content: ' \00b7  plays here';
  color: #147a69;
  font-weight: 700;
}

/* ── RELATED TOPICS GRID ── */
.related-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.related-topic-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.related-topic-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.related-topic-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: oklch(48% 0.14 254 / 0.3);
}
.related-topic-card:hover::before { transform: scaleX(1); }
.rtc-icon {
  width: 36px; height: 36px;
  background: var(--gold-pale);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}
.rtc-icon svg { width: 16px; height: 16px; color: var(--gold); }
.related-topic-card h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0;
  font-family: var(--font-body);
}
.related-topic-card p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.rtc-arrow {
  margin-top: auto;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.rtc-arrow svg { width: 13px; height: 13px; }

/* ── PREMIUM SIDEBAR ── */
.topic-sidebar-premium {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sidebar-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.sidebar-block-title {
  padding: 1rem 1.25rem;
  background: var(--navy-dark);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sidebar-block-body { padding: 1.25rem; }

/* Tutor card in sidebar */
.sidebar-tutor-card {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.sidebar-tutor-img-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.sidebar-tutor-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(0.92);
}
.sidebar-tutor-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to top, var(--navy-dark), transparent);
}
.sidebar-tutor-body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.sidebar-tutor-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.25rem;
}
.sidebar-tutor-title {
  font-size: 0.75rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.sidebar-tutor-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sidebar-tutor-bullets li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
}
.sidebar-tutor-bullets li svg { width: 12px; height: 12px; color: var(--gold); flex-shrink: 0; }
.sidebar-book-btn-premium {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.9rem 1.5rem;
  background: var(--gold);
  color: var(--navy-dark);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all var(--transition);
}
.sidebar-book-btn-premium:hover {
  background: #c9a24e;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px oklch(48% 0.14 254 / 0.4);
}
.sidebar-book-btn-premium svg { width: 16px; height: 16px; }

/* Page nav in sidebar */
.page-nav-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.page-nav-list li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border-radius: 6px;
  font-size: 0.84rem;
  color: var(--navy);
  font-weight: 500;
  transition: all var(--transition);
}
.page-nav-list li a:hover {
  background: var(--gold-pale);
  color: var(--gold);
}
.page-nav-list li a svg { width: 13px; height: 13px; color: var(--gold); opacity: 0.7; }

/* All topics list in sidebar */
.all-topics-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
}
.all-topics-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  font-size: 0.83rem;
  color: var(--navy);
  font-weight: 500;
  transition: all var(--transition);
}
.all-topics-list li a:hover {
  background: var(--gold-pale);
  color: var(--gold);
}
.all-topics-list li a.active {
  background: var(--navy-dark);
  color: var(--gold);
  font-weight: 700;
}
.all-topics-list li a svg { width: 12px; height: 12px; opacity: 0.5; }
.all-topics-list li a.active svg { opacity: 1; color: var(--gold); }

/* ── BOTTOM CTA (Premium Booking) ── */
.topic-cta-section {
  background: var(--navy-dark);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.topic-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, oklch(48% 0.14 254 / 0.08) 0%, transparent 60%);
}
.topic-cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}
.topic-cta-text .section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: oklch(48% 0.14 254 / 0.12);
  border: 1px solid oklch(48% 0.14 254 / 0.3);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 50px;
  margin-bottom: 1.25rem;
}
.topic-cta-text h2 {
  color: var(--white);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 0.85rem;
}
.topic-cta-text p {
  color: rgba(255,255,255,0.55);
  font-size: 1rem;
  max-width: 480px;
  line-height: 1.75;
}
.topic-cta-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  justify-content: center;
}
.topic-cta-photo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid oklch(48% 0.14 254 / 0.4);
  box-shadow: 0 0 0 6px oklch(48% 0.14 254 / 0.1);
  display: block;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .topic-layout { grid-template-columns: 1fr; gap: 2rem; }
  .topic-sidebar-premium { position: static; }
  .topic-hero-inner { grid-template-columns: 1fr; }
  .topic-hero-image-panel { display: none; }
  .topic-cta-inner { grid-template-columns: 1fr; }
  .topic-cta-photo { display: none; }
}
@media (max-width: 768px) {
  .topic-hero { padding: 5.5rem 0 3.5rem; }
  .formula-grid { grid-template-columns: 1fr; }
  .outcome-grid { grid-template-columns: 1fr 1fr; }
  .related-topics-grid { grid-template-columns: 1fr 1fr; }
  .resource-cards-premium { grid-template-columns: 1fr; }
  .topic-hero-study-path { grid-template-columns: 1fr; }
  .topic-cta-inner { text-align: center; }
  .topic-cta-actions { justify-content: center; }
}
@media (max-width: 480px) {
  .outcome-grid { grid-template-columns: 1fr; }
  .related-topics-grid { grid-template-columns: 1fr; }
  .topic-hero-actions { flex-direction: column; }
}

/* ── WHATSAPP CTA BUTTON ── */
.btn-whatsapp-premium {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.85rem;
  background: var(--gold);
  color: var(--navy-dark);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all var(--transition);
  border: 2px solid var(--gold);
}
.btn-whatsapp-premium:hover {
  background: #c9a24e;
  border-color: #c9a24e;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px oklch(48% 0.14 254 / 0.35);
}
.btn-whatsapp-premium svg { color: var(--navy-dark); }
.btn-back-topics {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.85rem;
  background: transparent;
  color: rgba(255,255,255,0.75);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all var(--transition);
  border: 2px solid rgba(255,255,255,0.25);
}
.btn-back-topics:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
}

/* ── TOPIC ICON SVG ILLUSTRATIONS ── */
.topic-illustration {
  width: 160px;
  height: 160px;
  opacity: 0.85;
}

/* ── RESOURCES NOTICE ── */
.resources-notice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--gold-pale);
  border: 1px solid oklch(48% 0.14 254 / 0.25);
  border-radius: 8px;
  font-size: 0.84rem;
  color: var(--navy);
  margin-top: 1rem;
}
.resources-notice svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }
.resources-notice a { color: var(--gold); font-weight: 700; }

/* ── FORMULA DISPLAY IMPROVEMENTS ── */
.formula-block {
  background: var(--navy);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 1.75rem 1.8rem;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 30px oklch(22% 0.02 255 / 0.12);
}
.formula-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}
.formula-display {
  font-size: 1.15rem;
  text-align: center;
  padding: 0.65rem 0;
  color: var(--white);
  overflow-x: auto;
  max-width: 100%;
  white-space: normal;
}
.formula-display .MJX-TEX {
  font-size: 1.2rem !important;
  color: var(--white) !important;
}
.formula-note {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.7);
  margin-top: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 0.75rem;
  line-height: 1.65;
}
/* Ensure MathJax never overflows */
.MathJax_Display, mjx-container[display="true"] {
  overflow-x: auto !important;
  max-width: 100% !important;
}

/* ── ACTIVE NAV LINK ── */
.nav-links a.active {
  color: oklch(48% 0.14 254) !important;
}

/* ── AD CONTAINER IMPROVEMENTS ── */
.ad-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  min-height: 90px;
  background: rgba(10,22,40,0.3);
  border-top: 1px solid oklch(48% 0.14 254 / 0.06);
  border-bottom: 1px solid oklch(48% 0.14 254 / 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile polish overrides */
@media (max-width: 640px) {
  .topic-hero {
    padding: 5rem 0 3rem;
  }

  .topic-breadcrumb {
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.7rem;
  }

  .topic-hero h1 {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .topic-hero-desc {
    font-size: 0.96rem;
    line-height: 1.7;
  }

  .topic-hero-helper {
    font-size: 0.88rem;
    margin-bottom: 1.2rem;
  }

  .topic-hero-actions {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0.9rem;
  }

  .topic-hero-study-path {
    gap: 0.85rem;
    margin-bottom: 1.85rem;
  }

  .hero-path-card {
    padding: 1rem;
  }

  .btn-hero-primary,
  .btn-hero-secondary,
  .btn-whatsapp-premium,
  .btn-back-topics,
  .topic-cta-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .topic-layout {
    padding-top: 2rem;
    padding-bottom: 3.5rem;
  }

  .content-block,
  .video-section,
  .sidebar-block,
  .sidebar-tutor-card {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .content-block-header {
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
  }

  .content-block-header h2 {
    font-size: 1.08rem;
  }

  .content-block-header p,
  .topic-cta-text p,
  .concept-card p,
  .mistake-card p,
  .formula-note,
  .resources-notice,
  .faq-item p {
    font-size: 0.92rem;
    line-height: 1.65;
  }

  .concept-card,
  .mistake-card,
  .resource-card-premium,
  .related-topic-card {
    padding: 1rem;
  }

  .formula-block {
    padding: 1.15rem;
  }

  .formula-display {
    font-size: 1rem;
  }

  .resources-notice {
    align-items: flex-start;
  }

  .topic-cta-section {
    padding: 3.5rem 0;
  }

  .topic-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ================================================================
   TOPIC PAGE PREMIUM ENHANCEMENTS
   ================================================================ */

/* Topic Hero Premium */
.topic-hero {
  background: linear-gradient(160deg, #0f1c28 0%, #162a3d 50%, oklch(22% 0.02 255) 100%);
}
.topic-hero::before {
  background: linear-gradient(135deg, oklch(22% 0.02 255 / 0.97) 0%, oklch(22% 0.02 255 / 0.8) 50%, oklch(22% 0.02 255 / 0.92) 100%);
}

.topic-hero-svg-wrap {
  background: oklch(48% 0.14 254 / 0.06);
  border: 2px solid oklch(48% 0.14 254 / 0.18);
  box-shadow: 0 0 40px oklch(48% 0.14 254 / 0.08);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.topic-hero-svg-wrap:hover {
  transform: scale(1.05);
  border-color: oklch(48% 0.14 254 / 0.3);
  box-shadow: 0 0 60px oklch(48% 0.14 254 / 0.12);
}

.btn-hero-primary {
  background: linear-gradient(135deg, var(--gold) 0%, oklch(38% 0.13 254) 100%);
  border: none;
  box-shadow: 0 4px 14px oklch(48% 0.14 254 / 0.25);
}
.btn-hero-primary:hover {
  background: linear-gradient(135deg, #c9a24e 0%, oklch(48% 0.14 254) 100%);
  box-shadow: 0 8px 24px oklch(48% 0.14 254 / 0.35);
}

.btn-hero-secondary {
  border: 2px solid rgba(255,255,255,0.25);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-hero-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

.topic-meta-pill {
  -webkit-backdrop-filter: blur(4px);
  background: oklch(48% 0.14 254 / 0.1);
}

/* Content Block Premium */
.content-block {
  border-radius: 14px;
  background: linear-gradient(145deg, var(--white) 0%, #fdfcfa 100%);
  border: 1px solid oklch(22% 0.02 255 / 0.08);
  box-shadow: 0 1px 2px oklch(22% 0.02 255 / 0.04), 0 4px 12px oklch(22% 0.02 255 / 0.06);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.content-block:hover {
  box-shadow: 0 4px 6px oklch(22% 0.02 255 / 0.03), 0 12px 28px oklch(22% 0.02 255 / 0.09);
}

.content-block-header-icon {
  background: linear-gradient(135deg, var(--gold-pale) 0%, oklch(94% 0.03 254) 100%);
  border-radius: 10px;
  box-shadow: 0 2px 6px oklch(48% 0.14 254 / 0.1);
}

/* Video Section Premium */
.video-section {
  border-radius: 14px;
  background: linear-gradient(145deg, var(--navy-dark) 0%, #152536 100%);
  border: 1px solid oklch(48% 0.14 254 / 0.1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.video-play-circle {
  background: linear-gradient(135deg, var(--gold) 0%, oklch(38% 0.13 254) 100%);
  box-shadow: 0 6px 24px oklch(48% 0.14 254 / 0.4);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.video-play-circle:hover {
  transform: scale(1.1);
}

/* Concept Card Premium */
.concept-card {
  border-radius: 12px;
  background: linear-gradient(145deg, var(--off-white) 0%, #f8f5f1 100%);
  border: 1px solid oklch(22% 0.02 255 / 0.06);
  border-left: 3px solid var(--gold);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.concept-card:hover {
  background: linear-gradient(145deg, var(--gold-pale) 0%, oklch(94% 0.03 254) 100%);
  transform: translateX(4px);
  box-shadow: 0 4px 12px oklch(48% 0.14 254 / 0.08);
}

.concept-icon {
  background: linear-gradient(135deg, var(--gold) 0%, oklch(38% 0.13 254) 100%);
  box-shadow: 0 3px 10px oklch(48% 0.14 254 / 0.25);
}

/* Formula Block Premium */
.formula-block {
  border-radius: 14px;
  background: linear-gradient(145deg, var(--navy) 0%, #1e3042 100%);
  border: 1px solid oklch(48% 0.14 254 / 0.12);
  box-shadow: 0 10px 30px oklch(22% 0.02 255 / 0.12);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.formula-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px oklch(22% 0.02 255 / 0.18), 0 0 30px oklch(48% 0.14 254 / 0.06);
  border-color: oklch(48% 0.14 254 / 0.2);
}

.formula-block::before {
  background: linear-gradient(90deg, var(--gold), #d4b47a);
}

/* Mistake Card Premium */
.mistake-card {
  border-radius: 12px;
  background: linear-gradient(145deg, #fff5f5 0%, #fdf0f0 100%);
  border: 1px solid rgba(231,76,60,0.08);
  border-left: 3px solid #e74c3c;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mistake-card:hover {
  background: linear-gradient(145deg, #ffeaea 0%, #fff0f0 100%);
  box-shadow: 0 4px 12px rgba(231,76,60,0.08);
  transform: translateX(3px);
}

.mistake-badge {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  box-shadow: 0 2px 8px rgba(231,76,60,0.25);
}

/* Outcome Pill Premium */
.outcome-pill {
  border-radius: 12px;
  background: linear-gradient(145deg, var(--off-white) 0%, #f8f5f1 100%);
  border: 1px solid oklch(22% 0.02 255 / 0.06);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.outcome-pill:hover {
  background: linear-gradient(145deg, var(--gold-pale) 0%, oklch(94% 0.03 254) 100%);
  border-color: oklch(48% 0.14 254 / 0.2);
  box-shadow: 0 4px 12px oklch(48% 0.14 254 / 0.06);
  transform: translateY(-2px);
}

.outcome-check {
  background: linear-gradient(135deg, var(--gold-pale) 0%, oklch(94% 0.03 254) 100%);
}

/* Resource Card Premium */
.resource-card-premium {
  border-radius: 14px;
  background: linear-gradient(145deg, var(--white) 0%, #fdfcfa 100%);
  border: 1px solid oklch(22% 0.02 255 / 0.08);
  box-shadow: 0 1px 2px oklch(22% 0.02 255 / 0.04), 0 4px 12px oklch(22% 0.02 255 / 0.06);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.resource-card-premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 6px oklch(22% 0.02 255 / 0.03), 0 12px 28px oklch(22% 0.02 255 / 0.09);
  border-color: oklch(48% 0.14 254 / 0.18);
}

.rcp-download-btn {
  background: linear-gradient(135deg, var(--gold) 0%, oklch(38% 0.13 254) 100%);
  border: none;
  box-shadow: 0 2px 8px oklch(48% 0.14 254 / 0.2);
}
.rcp-download-btn:hover {
  background: linear-gradient(135deg, #c9a24e 0%, oklch(48% 0.14 254) 100%);
  box-shadow: 0 6px 20px oklch(48% 0.14 254 / 0.3);
}

/* Related Topic Card Premium */
.related-topic-card {
  border-radius: 14px;
  background: linear-gradient(145deg, var(--white) 0%, #fdfcfa 100%);
  border: 1px solid oklch(22% 0.02 255 / 0.08);
  box-shadow: 0 1px 2px oklch(22% 0.02 255 / 0.04), 0 4px 12px oklch(22% 0.02 255 / 0.06);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.related-topic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 6px oklch(22% 0.02 255 / 0.03), 0 12px 28px oklch(22% 0.02 255 / 0.09);
  border-color: oklch(48% 0.14 254 / 0.18);
}

.related-topic-card::before {
  background: linear-gradient(90deg, var(--gold), #d4b47a);
}

.rtc-icon {
  background: linear-gradient(135deg, var(--gold-pale) 0%, oklch(94% 0.03 254) 100%);
  box-shadow: 0 2px 6px oklch(48% 0.14 254 / 0.08);
}

/* Sidebar Premium */
.sidebar-block {
  border-radius: 14px;
  background: linear-gradient(145deg, var(--white) 0%, #fdfcfa 100%);
  border: 1px solid oklch(22% 0.02 255 / 0.08);
  box-shadow: 0 1px 2px oklch(22% 0.02 255 / 0.04), 0 4px 12px oklch(22% 0.02 255 / 0.06);
}

.sidebar-block-title {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
}

.sidebar-tutor-card {
  border-radius: 14px;
  background: linear-gradient(145deg, var(--navy-dark) 0%, #152536 100%);
  border: 1px solid oklch(48% 0.14 254 / 0.1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.sidebar-book-btn-premium {
  background: linear-gradient(135deg, var(--gold) 0%, oklch(38% 0.13 254) 100%);
  border: none;
  box-shadow: 0 4px 14px oklch(48% 0.14 254 / 0.25);
}
.sidebar-book-btn-premium:hover {
  background: linear-gradient(135deg, #c9a24e 0%, oklch(48% 0.14 254) 100%);
  box-shadow: 0 8px 24px oklch(48% 0.14 254 / 0.35);
}

.page-nav-list li a {
  border-radius: 8px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-nav-list li a:hover {
  background: linear-gradient(90deg, var(--gold-pale) 0%, oklch(94% 0.03 254 / 0.5) 100%);
  transform: translateX(3px);
}

.all-topics-list li a {
  border-radius: 8px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.all-topics-list li a:hover {
  background: linear-gradient(90deg, var(--gold-pale) 0%, oklch(94% 0.03 254 / 0.5) 100%);
  transform: translateX(3px);
}

/* CTA Section Premium */
.topic-cta-section {
  background: linear-gradient(160deg, #0f1c28 0%, #162a3d 50%, oklch(22% 0.02 255) 100%);
}
.topic-cta-section::before {
  background: linear-gradient(135deg, oklch(48% 0.14 254 / 0.08) 0%, transparent 60%);
}

.topic-cta-photo {
  border: 3px solid oklch(48% 0.14 254 / 0.35);
  box-shadow: 0 0 0 6px oklch(48% 0.14 254 / 0.08), 0 10px 30px rgba(0,0,0,0.2);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.topic-cta-photo:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 8px oklch(48% 0.14 254 / 0.12), 0 16px 40px rgba(0,0,0,0.25);
}

.btn-whatsapp-premium {
  background: linear-gradient(135deg, var(--gold) 0%, oklch(38% 0.13 254) 100%);
  border: none;
  box-shadow: 0 4px 14px oklch(48% 0.14 254 / 0.25);
}
.btn-whatsapp-premium:hover {
  background: linear-gradient(135deg, #c9a24e 0%, oklch(48% 0.14 254) 100%);
  box-shadow: 0 8px 24px oklch(48% 0.14 254 / 0.35);
}

.btn-back-topics {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-back-topics:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

/* Resources Notice Premium */
.resources-notice {
  border-radius: 12px;
  background: linear-gradient(145deg, var(--gold-pale) 0%, oklch(94% 0.03 254) 100%);
  border: 1px solid oklch(48% 0.14 254 / 0.15);
}

/* Grain texture for dark sections */
.topic-hero::after,
.video-section::after,
.topic-cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  pointer-events: none;
  z-index: 1;
}

.topic-hero > *,
.video-section > *,
.topic-cta-section > * {
  position: relative;
  z-index: 2;
}

/* Device hardening for topic pages */
.topic-layout > *,
.topic-hero-inner > *,
.topic-cta-inner > * {
  min-width: 0;
}

.topic-main-col,
.topic-sidebar-premium,
.topic-hero-content,
.topic-cta-text {
  min-width: 0;
}

.topic-breadcrumb,
.topic-hero-meta,
.video-note,
.resources-notice,
.rcp-top,
.topic-cta-actions {
  min-width: 0;
}

.content-block-header p,
.concept-card > div,
.mistake-card > div,
.rcp-top > div,
.rcp-title,
.rcp-desc,
.outcome-pill span,
.faq-item,
.resources-notice span,
.video-note,
.page-nav-list li a,
.all-topics-list li a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.topic-breadcrumb {
  flex-wrap: wrap;
}

.topic-hero-meta {
  row-gap: 0.55rem;
}

.video-note,
.resources-notice {
  align-items: flex-start;
}

.rcp-badge {
  flex-wrap: wrap;
}

.rcp-download-btn,
.btn-primary-premium,
.btn-outline-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 100%;
  flex-wrap: wrap;
  text-align: center;
}

.btn-primary-premium,
.btn-outline-premium {
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all var(--transition);
}

.btn-primary-premium {
  background: linear-gradient(135deg, var(--gold) 0%, oklch(38% 0.13 254) 100%);
  color: var(--navy-dark);
  border: none;
  box-shadow: 0 4px 14px oklch(48% 0.14 254 / 0.25);
}

.btn-primary-premium:hover {
  background: linear-gradient(135deg, #c9a24e 0%, oklch(48% 0.14 254) 100%);
  box-shadow: 0 8px 24px oklch(48% 0.14 254 / 0.35);
  transform: translateY(-2px);
}

.btn-outline-premium {
  background: transparent;
  color: rgba(255,255,255,0.88);
  border: 2px solid rgba(255,255,255,0.3);
}

.btn-outline-premium:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-2px);
}

@media (max-width: 1024px) {
  .topic-sidebar-premium {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .sidebar-block,
  .sidebar-tutor-card {
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .topic-hero {
    padding: 5.25rem 0 3.25rem;
  }

  .topic-hero-desc,
  .topic-cta-text p {
    max-width: 100%;
  }

  .topic-meta-pill {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    padding: 0.32rem 0.72rem;
  }

  .topic-sidebar-premium {
    grid-template-columns: 1fr;
  }

  .page-nav-list,
  .all-topics-list {
    gap: 0.35rem;
  }
}

@media (max-width: 640px) {
  .topic-layout {
    gap: 1.5rem;
  }

  .topic-breadcrumb {
    gap: 0.35rem;
  }

  .topic-hero-meta {
    gap: 0.45rem;
  }

  .topic-hero-helper {
    font-size: 0.85rem;
  }

  .btn-hero-primary,
  .btn-hero-secondary,
  .btn-whatsapp-premium,
  .btn-back-topics,
  .btn-primary-premium,
  .btn-outline-premium,
  .rcp-download-btn,
  .topic-cta-actions a,
  .topic-cta-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .concept-card,
  .mistake-card {
    gap: 0.85rem;
  }

  .rcp-top {
    gap: 0.85rem;
  }

  .rcp-pdf-icon {
    width: 40px;
    height: 48px;
  }

  .page-nav-list li a,
  .all-topics-list li a {
    align-items: flex-start;
  }

  .page-nav-list li a svg,
  .all-topics-list li a svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
  }

  .all-topics-list li a {
    gap: 0.75rem;
  }

  #learn-more { padding: 1.2rem; }
  #learn-more .content-block-header { align-items: flex-start; margin-bottom: 1.1rem; padding-bottom: 1rem; }
  #learn-more .content-block-header h2 { font-size: 1.12rem; }
  .external-resources-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .external-resource-card { min-height: 0; padding: 1.05rem 1.1rem 1.1rem 1.2rem; }
  .external-resource-card p { margin-bottom: 0.85rem; }
  .external-resource-link { width: 100%; justify-content: center; }

  .embed-topbar { padding: 0.65rem 0.75rem !important; }
  .embed-slide-area { height: min(650px, 76vh) !important; padding: 0.7rem !important; }
  .lesson-slide { padding: 0.85rem; border-radius: 11px; }
  .lesson-cue { align-items: flex-start; margin-bottom: 0.85rem; }
  .lesson-cue small { font-size: 0.7rem; }
  .lesson-slide .card { padding: 0.9rem !important; }
  .maths-task-grid { grid-template-columns: 1fr; }
  .learning-ladder-step { padding: 0.6rem; }
  .polynomial-video-grid { grid-template-columns: 1fr; max-width: none; }
  .polynomial-route-grid { grid-template-columns: 1fr; }
  .polynomial-route-step { padding: 0.82rem; }
  .polynomial-work-card summary { padding: 0.82rem; }
  .polynomial-solution { padding: 0.1rem 0.9rem 0.9rem; }
}

@media (max-width: 480px) {
  .topic-hero {
    padding: 4.75rem 0 2.75rem;
  }

  .content-block,
  .video-section,
  .sidebar-block,
  .sidebar-tutor-card,
  .resource-card-premium,
  .related-topic-card {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .topic-meta-pill {
    max-width: 100%;
  }
}

@media (hover: none) {
  .btn-hero-primary:hover,
  .btn-hero-secondary:hover,
  .btn-whatsapp-premium:hover,
  .btn-back-topics:hover,
  .btn-primary-premium:hover,
  .btn-outline-premium:hover,
  .sidebar-book-btn-premium:hover,
  .rcp-download-btn:hover,
  .concept-card:hover,
  .mistake-card:hover,
  .resource-card-premium:hover,
  .related-topic-card:hover,
  .page-nav-list li a:hover,
  .all-topics-list li a:hover,
  .topic-cta-photo:hover {
    transform: none;
  }
}

/* WhatsApp Group CTA */
.wa-group-bar { padding: 14px 24px 0; max-width:1180px; margin:0 auto; }
.wa-group-btn { display:inline-flex; align-items:center; gap:8px; background:#25d366; color:#fff; padding:9px 20px; border-radius:24px; text-decoration:none; font-weight:700; font-size:.87rem; font-family:inherit; transition:background .2s,transform .15s; white-space:nowrap; }
.wa-group-btn:hover { background:#1fb356; transform:translateY(-1px); }
.wa-group-btn svg { flex-shrink:0; }

/* Keep worked quiz mathematics readable without changing the slide layout. */
.quiz-feedback > p { margin:0.35rem 0; }
.quiz-feedback mjx-container[display="true"] { margin:0.65rem 0; max-width:100%; overflow-x:auto; overflow-y:hidden; }

/* .topic-hero h1 span / .topic-meta-pill / .rcp-badge / .rtc-arrow all use
   color:var(--gold) (medium accent blue) with no dark-mode override, sitting
   on the topic hero's or a card's dark background -- found via a contrast
   sweep of the "Summary Notes" topic family (Algebra, Calculus, Functions &
   Graphs, Patterns & Sequences, Trigonometry), all 13 pages, ratio ~2.6-2.9. */
html.es-dark .topic-hero h1 span,
html.es-dark .topic-meta-pill,
html.es-dark .rcp-badge,
html.es-dark .rtc-arrow { color: #68a1e7; }

/* Dark mode for .learning-ladder / .maths-task (used on Algebra & Polynomials slide decks) */
html.es-dark .learning-ladder-step { background: oklch(20% 0.02 255); border-color: oklch(30% 0.02 255); }
html.es-dark .learning-ladder-step > span { background: oklch(28% 0.02 255); color: oklch(85% 0.02 255); }
html.es-dark .learning-ladder-step strong { color: oklch(90% 0.02 255); }
html.es-dark .learning-ladder-step small { color: oklch(75% 0.02 255); }
html.es-dark .learning-ladder-step.is-current { background: rgba(20,93,170,.18); border-color: #68a1e7; }
html.es-dark .learning-ladder-step.is-current > span { background: #145daa; color: #fff; }
html.es-dark .maths-task { background: oklch(20% 0.02 255); border-color: oklch(30% 0.02 255); }
html.es-dark .maths-task summary { color: oklch(90% 0.02 255); }
html.es-dark .maths-task summary span { background: rgba(176,141,87,.25); color: oklch(85% 0.05 80); }
html.es-dark .maths-task[open] summary { background: oklch(24% 0.02 255); }
html.es-dark .maths-task > div { border-color: oklch(30% 0.02 255); color: oklch(78% 0.02 255); }
html.es-dark .polynomial-route,
html.es-dark .polynomial-sprint {
  background: linear-gradient(135deg, oklch(21% 0.025 252), oklch(22% 0.025 78));
  border-color: oklch(34% 0.025 252);
}
html.es-dark .polynomial-route-step,
html.es-dark .polynomial-work-card {
  background: oklch(20% 0.02 255);
  border-color: oklch(32% 0.02 255);
}
html.es-dark .polynomial-route-step strong,
html.es-dark .polynomial-work-card summary strong,
html.es-dark .math-inline { color: oklch(90% 0.025 244); }
html.es-dark .polynomial-route-step small,
html.es-dark .polynomial-work-card summary small,
html.es-dark .polynomial-solution { color: oklch(76% 0.02 244); }
html.es-dark .polynomial-route-step > span { background: #2268a9; }
html.es-dark .polynomial-work-card summary > span { background: rgba(34, 104, 169, .25); color: #83baff; }
html.es-dark .polynomial-work-card[open] summary { background: oklch(24% 0.02 255); }
html.es-dark .polynomial-solution { border-color: oklch(32% 0.02 255); }
html.es-dark .polynomial-teacher-note {
  background: oklch(23% 0.035 80);
  border-color: #d39a2c;
  color: oklch(88% 0.06 82);
}
html.es-dark .polynomial-caps-focus { color: oklch(82% 0.055 82); }

/* Dark mode for the "Lesson deck" redesign block above (.embed-box/.embed-slide-area/.lesson-slide/.lesson-cue) */
html.es-dark .embed-box { border-color: oklch(30% 0.02 255) !important; }
html.es-dark .embed-slide-area {
  background: radial-gradient(circle at top right, rgba(104, 161, 231, 0.10), transparent 30%), oklch(20% 0.02 255) !important;
}
html.es-dark .lesson-slide { background: oklch(20% 0.02 255); border-color: oklch(30% 0.02 255); }
html.es-dark .lesson-cue { background: rgba(104, 161, 231, 0.14); color: #68a1e7; }
html.es-dark .lesson-cue-step { background: #145daa; color: #fff; }
html.es-dark .lesson-cue small { color: oklch(75% 0.02 255); }
html.es-dark .lesson-slide--worked-example .lesson-cue { background: rgba(176,141,87,.20); color: oklch(85% 0.05 80); }
html.es-dark .lesson-slide--worked-example .lesson-cue-step { background: #b08d57; color: #0c121a; }
html.es-dark .lesson-slide--quiz .lesson-cue { background: rgba(20,122,105,.22); color: #4ad9bc; }
html.es-dark .lesson-slide--quiz .lesson-cue-step { background: #147a69; }
html.es-dark .lesson-slide--title .lesson-cue { background: rgba(100,69,166,.24); color: #b8a2f0; }
html.es-dark .lesson-slide--title .lesson-cue-step { background: #6445a6; }
html.es-dark .lesson-slide .card { border-color: oklch(30% 0.02 255); }
html.es-dark .lesson-slide .card-example { background: oklch(22% 0.02 255); border-left-color: #68a1e7; }
html.es-dark .lesson-slide .callout { background: oklch(16% 0.02 255); border-color: oklch(30% 0.02 255); }
html.es-dark .lesson-slide .callout-tag { background: rgba(104,161,231,.18); color: #68a1e7; border-color: rgba(104,161,231,.4); }
html.es-dark .lesson-slide .fact-card { border-color: oklch(30% 0.02 255); }
html.es-dark .lesson-slide--quiz .quiz-card { border-color: rgba(20,122,105,.35); }