/* Screenshot-only refinement of the existing homepage preview areas. */
.classroom-home .visual-stage .real-app-capture {
  padding: 6px;
  border-radius: 37px;
  background: #123e38;
}
.real-app-capture::before,
.real-app-capture::after { display: none; }
.real-app-capture > img,
.authentic-app-capture {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 603 / 1311;
  object-fit: contain;
}
.real-app-capture > img { border-radius: 30px; }
.classroom-home .hero-preview-picker {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 460px;
}
.classroom-home .hero-preview-picker .floating-app {
  transition: background-color .2s, border-color .2s, box-shadow .2s;
  scroll-margin-block-start: calc(var(--home-header-height, 180px) + 20px);
}
.classroom-home .app-tab {
  scroll-margin-block-start: calc(var(--home-header-height, 180px) + 20px);
}
.classroom-home .hero-preview-picker .floating-app span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-preview-picker button:focus-visible,
.app-tabs button:focus-visible {
  outline: 3px solid var(--gold-light, #e8bd5c);
  outline-offset: 3px;
}
.classroom-home .app-tab,
.classroom-home .app-tab > span { min-width: 0; }
.classroom-home .app-tab img { flex-shrink: 0; }
.classroom-home .app-tab :is(strong, small) { overflow-wrap: anywhere; }
.classroom-home .app-showcase { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.classroom-home .showcase-actions { flex-wrap: wrap; }
.classroom-home .showcase-copy h3 { overflow-wrap: anywhere; line-height: 1.15; }
html[lang="hi"] .classroom-home .showcase-copy h3 { line-height: 1.5; }
.classroom-home .showcase-device {
  min-width: 0;
  grid-template-rows: 1fr auto;
  gap: 18px;
  padding: 22px 24px;
}
.classroom-home .showcase-device .device-frame {
  width: 190px;
  max-width: 100%;
  align-self: center;
}
.classroom-home .showcase-device .device-caption {
  position: relative;
  bottom: auto;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}
/* Center the stacked preview without shrinking it to the browser's height. */
@media (max-width: 980px) {
  .classroom-home .hero-visual {
    width: 100%;
    max-width: 540px;
    margin-inline: auto;
  }
}
@media (max-width: 680px) {
  .classroom-home .visual-stage { padding-inline: 8px; }
  .classroom-home .app-showcase { grid-template-columns: minmax(0, 1fr); }
  .classroom-home .showcase-device { padding-inline: 22px; }
  .classroom-home .app-tab { gap: 8px; padding: 10px; }
  .classroom-home .app-tab img { width: 36px; height: 36px; }
  .classroom-home .app-tab strong { font-size: 16px; }
  .classroom-home .hero-preview-picker .floating-app span { min-height: 2.8em; }
}
@media (max-width: 360px) {
  .classroom-home .hero-preview-picker { gap: 4px; }
  .classroom-home .hero-preview-picker .floating-app { padding-inline: 2px; }
  .classroom-home .hero-preview-picker .floating-app span { font-size: 10px; }
}