.school-apps {
  padding: clamp(56px, 8vw, 112px) 6%;
  background: radial-gradient(ellipse at 10% 0%, #15476b, transparent 62%), #09182a;
  color: #f4faff;
}
.school-apps-inner {
  max-width: 1040px;
  margin-inline: auto;
}
.school-apps h2 {
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.18;
}
.school-apps p { margin-block: 14px 30px; }
.school-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.school-option {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid #52647a;
  border-radius: 24px;
  background: #13283e;
  color: inherit;
  font: 650 clamp(1rem, 2vw, 1.25rem)/1.45 Anuphan, sans-serif;
  text-align: start;
  cursor: pointer;
}
.school-option[aria-pressed="true"] {
  background: linear-gradient(120deg, #194768, #12304e);
  border-color: #76dfff;
  box-shadow: inset 0 0 0 1px #76dfff;
}
.school-option img {
  width: clamp(64px, 8vw, 96px);
  height: auto;
  border-radius: 22%;
  box-shadow: 0 8px 24px #00142680;
}
.school-stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 16px;
  margin-block: 12px;
}
.school-stores a, .school-stores img { display: block; }
.school-stores img { height: 44px; width: auto; max-width: none; }
html:lang(en) .school-stores img[lang="th"],
html:lang(th) .school-stores img[lang="en"] { display: none; }
.school-apps small { color: #afc1d4; }
.school-apps :focus-visible { outline: 3px solid white; outline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .school-apps.is-visible .school-option img {
    animation: school-arrive 850ms cubic-bezier(.18,.75,.25,1) backwards;
  }
  .school-apps.is-visible .school-option:nth-child(2) img { animation-delay: 140ms; }
  @keyframes school-arrive {
    from { transform: perspective(500px) translateY(22px) rotateY(-60deg) scale(.82); }
    65% { transform: perspective(500px) translateY(-4px) rotateY(5deg) scale(1.04); }
    to { transform: none; }
  }
}