/* Lightweight first-paint shell for standalone public pages. */
.skeleton-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: #f7fbff;
  transition: opacity .24s ease, visibility .24s ease;
}
.skeleton-loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.skel-nav {
  display: flex;
  width: min(calc(100% - 48px), 1100px);
  height: 50px;
  margin-top: 20px;
  padding: 0 20px;
  align-items: center;
  justify-content: space-between;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  animation: pageShellPulse 1.4s ease-in-out infinite;
}
.skel-logo, .skel-links, .skel-badge, .skel-title, .skel-sub, .skel-btn {
  border-radius: 10px;
  background: rgba(15, 23, 42, .075);
  animation: pageShellPulse 1.4s ease-in-out infinite;
}
.skel-logo { width: 120px; height: 24px; }
.skel-links { width: 200px; height: 20px; }
.skel-hero {
  display: flex;
  width: min(100%, 800px);
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  margin-top: -50px;
}
.skel-badge { width: 260px; height: 30px; margin-bottom: 24px; border-radius: 999px; }
.skel-title { width: 90%; height: 50px; margin-bottom: 16px; }
.skel-title.short { width: 60%; margin-bottom: 32px; }
.skel-sub { width: 70%; height: 24px; margin-bottom: 40px; }
.skel-btns { display: flex; gap: 16px; }
.skel-btn { width: 140px; height: 48px; border-radius: 999px; }
@keyframes pageShellPulse { 50% { opacity: .48; } }
@media (max-width: 600px) {
  .skel-nav { width: calc(100% - 28px); margin-top: 14px; padding-inline: 15px; }
  .skel-logo { width: 96px; }
  .skel-links { width: 76px; }
  .skel-title { width: 96%; height: 40px; }
  .skel-title.short { width: 72%; }
  .skel-sub { width: 86%; height: 20px; }
  .skel-btn { width: 124px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-loader, .skel-nav, .skel-logo, .skel-links, .skel-badge,
  .skel-title, .skel-sub, .skel-btn { animation: none !important; transition: none !important; }
}
