/* Design review refinements. Keep the approved palette and font families. */

/* Readable supporting copy, including selectors that previously won the cascade. */
.hero-platform,
.section-description,
.app-description,
.audience-card p,
.learning-moment p:not(.eyebrow),
.faq-section > div > p:not(.eyebrow),
.faq-list details > p,
.closing p:not(.eyebrow),
.audience-bottom p,
.lesson-copy > p:not(.eyebrow),
.discussion-prompt p,
.usecase-grid p,
.usecase-grid > article > div > p,
.subject-overview p,
.evaluation-grid p,
.game-card p {
  font-size: 16px;
  line-height: 1.8;
}
.hero-note,
.practice-note,
.app-access-note,
.site-footer > div > p,
.free-callout p,
.access-grid > article > p,
.form-preview-note {
  font-size: 14px;
  line-height: 1.8;
}
.detail-footnote,
.image-note {
  font-size: 14px !important;
  line-height: 1.8;
}
.eyebrow,
.lesson-copy > .eyebrow,
.discussion-prompt > span,
.access-label,
.audience-label,
.audience-hero-facts,
.school-hero-board > .eyebrow,
.school-hero-board > p:last-child,
.school-hero-board small,
.game-meta,
.card-skill-tags > span,
.feature-number,
.footer-bottom {
  font-size: 12px;
  line-height: 1.7;
}
.app-example figcaption,
.proof-figure figcaption,
.audience-preview-caption {
  font-size: 14px;
  line-height: 1.7;
}
.flow-gallery figcaption b { font-size: 16px; }
.flow-gallery figcaption span { font-size: 15px; }
.card-actions .card-play { font-size: 14px; }
.hero-actions { flex-wrap: wrap; }
.game-card p { min-height: 0; }
.feature-tabs small { font-size: 14px; }
.number-sticker small,
.example-sticker { font-size: 12px; }
.example-sticker b { font-size: 14px; }

/* Comfortable controls on all input types. */
.page-jumps > button,
.filter,
.card-play,
.card-actions .card-play,
.school-hero-board > div > button,
.player-actions button {
  min-height: 44px;
}
.school-hero-board > div > button,
.player-actions button { min-width: 44px; }
.school-hero-board > div {
  grid-template-columns: 75px minmax(0, 1fr) 44px;
}
.school-hero-board > div > span { min-width: 0; }

/* Keep the player close control visible with every game name. */
.player-title { flex: 1; min-width: 0; }
.player-title > div { min-width: 0; }
.player-title img { flex-shrink: 0; }
.player-title b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-actions { flex: 0 0 auto; }
.player-actions button { font-size: 14px; }

/* Reusable content groups used by the expanded feature stories. */
.feature-overview,
.monthly-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.feature-overview > article,
.monthly-report-grid > article { min-width: 0; }
.feature-overview h3,
.monthly-report-grid h3 {
  font-size: 28px;
  line-height: 1.2;
}
.feature-overview p,
.monthly-report-grid p {
  font-size: 16px;
  line-height: 1.8;
}

/* The .mobile rules also cover the 390px review canvas on desktop. */
.mobile .eyebrow,
.mobile .hero .eyebrow,
.mobile .lesson-copy > .eyebrow,
.mobile .discussion-prompt > span,
.mobile .audience-label,
.mobile .audience-hero-facts,
.mobile .subject-overview article > span,
.mobile .feature-number,
.mobile .game-meta,
.mobile .card-skill-tags > span,
.mobile .school-hero-board > .eyebrow,
.mobile .school-hero-board small,
.mobile .school-hero-board > p:last-child,
.mobile .footer-bottom {
  font-size: 12px;
  line-height: 1.7;
}
.mobile .hero-description,
.mobile .hero-platform,
.mobile .section-description,
.mobile .app-description,
.mobile .audience-hero > div > p:not(.eyebrow),
.mobile .detail-heading > p:not(.eyebrow),
.mobile .detail-steps p,
.mobile .audience-card p,
.mobile .learning-moment p:not(.eyebrow),
.mobile .faq-section > div > p:not(.eyebrow),
.mobile .faq-list details > p,
.mobile .detail-faq .faq-list details > p,
.mobile .closing p:not(.eyebrow),
.mobile .audience-bottom p,
.mobile .game-card p,
.mobile .lesson-copy > p:not(.eyebrow),
.mobile .discussion-prompt p,
.mobile .explain-list dd,
.mobile .usecase-grid p,
.mobile .usecase-grid > article > div > p,
.mobile .access-grid ul,
.mobile .subject-overview p,
.mobile .evaluation-grid p,
.mobile .detail-callout p,
.mobile .guide-copy > p,
.mobile .guide-copy > ol,
.mobile .guide-copy .explain-list dd {
  font-size: 16px;
  line-height: 1.8;
}
.mobile .hero-note,
.mobile .practice-note,
.mobile .app-access-note,
.mobile .feature-tabs small,
.mobile .site-footer > div > p,
.mobile .free-callout p,
.mobile .access-grid > article > p,
.mobile .load-more p,
.mobile .library-selection p {
  font-size: 14px;
  line-height: 1.8;
}
.mobile .detail-footnote,
.mobile .image-note {
  font-size: 14px !important;
  line-height: 1.8;
}
.mobile .app-example figcaption,
.mobile .proof-figure figcaption,
.mobile .audience-preview-caption {
  font-size: 14px;
  line-height: 1.7;
}
.mobile .number-sticker small,
.mobile .example-sticker,
.mobile .discovery-sticker { font-size: 12px; }
.mobile .example-sticker b { font-size: 14px; }
.mobile .menu-toggle,
.mobile .section-top > .text-link,
.mobile .page-jumps > button,
.mobile .subject-overview .text-link,
.mobile .library-selection .text-link,
.mobile .audience-bottom-actions .text-link,
.mobile .card-play,
.mobile .card-actions .card-play {
  font-size: 14px;
  min-height: 44px;
}
.mobile .action { font-size: 15px; }
.mobile .filter { font-size: 14px; min-height: 44px; }
.mobile .quick-facts span { font-size: 13px; }
.mobile .game-grid,
.mobile .library-list .game-grid {
  grid-template-columns: 1fr;
  gap: 24px;
}
.mobile .game-card-copy { padding: 20px; }
.mobile .game-card h3 { font-size: 29px; line-height: 1.2; }
.mobile .game-card p { min-height: 0; }
.mobile .game-art { height: 260px; }
.mobile .game-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px 14px;
}
.mobile .card-actions { grid-template-columns: 1fr 1fr; gap: 16px; }
.mobile .card-actions .card-play { padding-block: 12px; }
.mobile .flow-gallery {
  grid-template-columns: 1fr;
  gap: 35px;
  max-width: 280px;
  margin-inline: auto;
}
.mobile .flow-gallery img { width: 100%; }
.mobile .flow-gallery figcaption b { font-size: 16px; }
.mobile .flow-gallery figcaption span { font-size: 15px; line-height: 1.8; }
.mobile .school-hero-board > div {
  grid-template-columns: 64px minmax(0, 1fr) 44px;
  gap: 12px;
}
.mobile .school-hero-board > div > button { width: 44px; height: 44px; }
.mobile .feature-overview,
.mobile .monthly-report-grid { grid-template-columns: 1fr; gap: 23px; }

@media (min-width: 721px) and (max-width: 900px) {
  .game-grid,
  .library-list .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-actions { gap: 16px 20px; }
  .hero-actions .action { flex-shrink: 0; }
  .feature-overview,
  .monthly-report-grid { grid-template-columns: 1fr; }
}
@media (min-width: 481px) and (max-width: 720px) {
  .canvas:not(.phone) .mobile .game-grid,
  .canvas:not(.phone) .mobile .library-list .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .canvas:not(.phone) .mobile .game-card-copy { padding: 16px; }
  .canvas:not(.phone) .mobile .game-card h3 { font-size: 26px; }
  .canvas:not(.phone) .mobile .game-card p { font-size: 15px; }
  .canvas:not(.phone) .mobile .card-actions { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 350px) {
  .mobile .school-hero-board { padding: 17px; }
  .mobile .school-hero-board > div {
    grid-template-columns: 48px minmax(0, 1fr) 44px;
    gap: 9px;
  }
  .mobile .school-hero-board > div > img { width: 48px; height: 48px; }
  .mobile .school-hero-board b { font-size: 20px; }
}

.page-jumps > button {min-width:44px}

/* Existing square app icons are kept whole in responsive card panels. */
.game-art.icon,.lesson-art.icon {display:grid;place-items:center}
.game-art.icon>img,.lesson-art.icon>img {display:block;object-fit:contain;object-position:center;width:auto;height:calc(100% - 32px);max-width:calc(100% - 32px);min-height:0;padding:0;border-radius:14px}
.school-hero-board>div>img {object-fit:contain;object-position:center}