.featured-interactive { padding-top: 0; }
.featured-panel {
  background:
    linear-gradient(135deg, rgba(0, 45, 86, 0.96), rgba(40, 130, 199, 0.9)),
    radial-gradient(circle at 90% 10%, rgba(90, 177, 78, 0.4), transparent 45%);
  color: #f7fbff;
  border: 0;
}
.featured-panel p { color: rgba(247, 251, 255, 0.9); }
.featured-panel h2 { color: #fff; }
/* Solid white chip on navy panel — navy text, never forced white */
.featured-panel .btn,
.featured-panel a.btn,
.featured-panel a.btn:visited {
  background: #fff !important;
  color: var(--navy, #002d56) !important;
  border: 0 !important;
}
.featured-panel .btn:hover,
.featured-panel a.btn:hover {
  background: var(--mint, #eaf6e8) !important;
  color: var(--navy, #002d56) !important;
}

.interactive-card { display: block; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.interactive-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(0, 45, 86, 0.12); color: inherit; }

.lesson-intro { font-size: 1.08rem; color: var(--ink-soft); margin: 0 0 1.25rem; }
.learn-strip {
  background: rgba(90, 177, 78, 0.1);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
}
.learn-strip h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.learn-strip ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); }

.sort-board { display: grid; gap: 0.85rem; }
.sort-row {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.95rem 1rem;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sort-row.is-correct { border-color: rgba(90, 177, 78, 0.5); background: #f0faf4; }
.sort-row.is-wrong { border-color: rgba(198, 40, 40, 0.35); background: #fff6f5; }
.sort-text { margin: 0 0 0.65rem; font-weight: 600; color: var(--ink); }
.sort-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sort-choice.is-selected {
  background: var(--green, #5ab14e);
  color: #fff;
  border-color: var(--green, #5ab14e);
}
.sort-why { margin: 0.65rem 0 0; font-size: 0.92rem; }

.reflection-box {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.scenario-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.15rem;
}
.jigsaw-piece {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0.85rem;
  border-radius: 12px;
  background: rgba(40, 130, 199, 0.06);
}
.choice-board {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.choice-board button {
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
}
.choice-board button.is-selected {
  background: var(--green, #5ab14e);
  color: #fff;
  border-color: var(--green, #5ab14e);
}
.hub-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .hub-pillars, .jigsaw-piece { grid-template-columns: 1fr; }
}