/* SchoolPro splash: all selectors scoped to .splash for easy integration. */
body { margin: 0; }
.splash {
  --navy: #16334c; --teal: #128783; --muted: #597486;
  box-sizing: border-box; position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center;
  min-height: 100vh; min-height: 100svh; overflow: hidden;
  color: var(--navy); background: #f1f8fb url('../assets/splash-background.png') center / cover no-repeat;
  font-family: 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  padding: 28px clamp(22px, 5vw, 80px) 22px;
}
.splash *, .splash *::before, .splash *::after { box-sizing: border-box; }
.splash[hidden] { display: none; }
.splash .masthead { display: flex; align-items: center; gap: 9px; width: 100%; font-size: 15px; font-weight: 750; }
.splash .brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.splash .edition { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 2px; }
.splash .intro { z-index: 2; text-align: center; padding-top: clamp(20px, 4vh, 52px); }
.splash .logo-wrap { margin: 0 auto 12px; width: 94px; height: 94px; display: grid; place-items: center; }
.splash .logo { width: 100%; height: 100%; object-fit: contain; }
.splash .eyebrow { font-size: 10px; letter-spacing: 3px; font-weight: 700; color: var(--teal); margin: 0 0 9px; }
.splash h1 { font-size: clamp(52px, 6vw, 78px); line-height: 1.08; letter-spacing: -3px; font-weight: 800; margin: 0; }
.splash h1 span { color: var(--teal); }
.splash .tagline { margin: 13px 0 0; font-size: clamp(14px, 1.8vw, 18px); color: var(--muted); }
.splash .values { display: flex; justify-content: center; align-items: center; gap: 16px; font-size: 10px; font-weight: 750; letter-spacing: 2px; margin: 22px 0; }
.splash .values span { color: #aac5ca; font-weight: 400; }
.splash .loading { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 11px 19px; background: #ffffffb8; border: 1px solid #ffffff; border-radius: 30px; color: var(--muted); font-size: 12px; }
.splash .spinner { width: 16px; height: 16px; border: 2px solid #c9e4e6; border-top-color: var(--teal); border-radius: 50%; animation: schoolpro-spin 1s linear infinite; flex-shrink: 0; }
.splash[data-state="ready"] .spinner { animation: none; border-color: var(--teal); background: var(--teal); }
.splash[data-state="error"] .spinner { animation: none; border-color: #b05a39; }
.splash .scene { position: relative; width: min(1020px, 100%); height: clamp(240px, 31vw, 350px); flex-shrink: 0; margin: 6px auto 0; }
.splash .scene img { position: absolute; object-fit: contain; }
.splash .ground { position: absolute; left: -10%; right: -10%; bottom: 0; height: 33%; border-radius: 50%; background: #d9ece880; }
.splash .school { width: 58%; height: 90%; left: 21%; bottom: 5%; z-index: 1; }
.splash .foliage { width: 25%; height: 70%; bottom: 1%; }
.splash .foliage-left { left: -1%; }
.splash .foliage-right { right: -1%; }
.splash .students { width: 29%; height: 68%; left: 22%; bottom: -1%; z-index: 3; }
.splash .sign { width: 19%; height: 62%; right: 15%; bottom: 0; z-index: 2; }
.splash footer { width: 100%; margin-top: auto; padding-top: 26px; text-align: center; font-size: 11px; color: var(--muted); letter-spacing: .3px; }
.splash footer span { color: var(--teal); }
.splash .footer-mark { margin-left: 10px; color: #dfa443; }
@keyframes schoolpro-spin { to { transform: rotate(360deg); } }
@media (min-width: 1100px) and (min-height: 850px) { .splash .intro { padding-top: 55px; } .splash .scene { height: 380px; margin-top: 20px; } }
@media (max-width: 600px) {
  .splash { padding: 22px 20px 20px; }
  .splash .edition { font-size: 8px; letter-spacing: 1px; }
  .splash .intro { padding-top: 36px; }
  .splash .logo-wrap { width: 86px; height: 86px; }
  .splash h1 { letter-spacing: -2.5px; }
  .splash .values { gap: 11px; letter-spacing: 1.6px; margin: 22px 0; }
  .splash .scene { width: calc(100% + 32px); height: 245px; margin-top: 24px; }
  .splash .school { width: 80%; left: 10%; height: 90%; bottom: 12%; }
  .splash .foliage { width: 30%; height: 58%; }
  .splash .foliage-left { left: -5%; } .splash .foliage-right { right: -5%; }
  .splash .students { width: 43%; height: 65%; left: 9%; }
  .splash .sign { width: 26%; height: 55%; right: 8%; }
  .splash footer { padding-top: 24px; font-size: 10px; }
}
@media (max-width: 360px) { .splash .edition { display: none; } .splash .tagline { font-size: 13px; } }
@media (max-height: 650px) and (min-width: 601px) { .splash .intro { padding-top: 14px; } .splash .logo-wrap { width: 65px; height: 65px; } .splash h1 { font-size: 52px; } .splash .scene { height: 220px; } }
@media (prefers-reduced-motion: reduce) { .splash .spinner { animation: none; } }