@media (prefers-reduced-motion: reduce){
  .motion-safe\:animate-beam,.motion-safe\:animate-floaty{animation:none!important}
  *{scroll-behavior:auto!important}
}

:focus-visible{outline:2px solid transparent;outline-offset:2px}

.navlink{
  @apply rounded-lg px-3 py-2 text-sm font-semibold text-ink-800 transition hover:bg-ink-100 focus:outline-none focus:ring-2 focus:ring-brand-600;
}

.mobilelink{
  @apply text-2xl font-semibold text-ink-900 transition focus:outline-none focus:ring-2 focus:ring-brand-600 rounded-xl px-6 py-3 hover:bg-ink-50;
}

.badge{
  @apply inline-flex items-center gap-2 rounded-full border border-ink-200 bg-white px-3 py-1 text-sm text-ink-700 shadow-sm;
}

.card{
  @apply group rounded-2xl border border-ink-200 bg-white p-5 shadow-sm transition hover:-translate-y-1 hover:shadow-lg focus-within:shadow-lg;
}

.cardIcon{
  @apply inline-flex h-11 w-11 items-center justify-center rounded-2xl;
}

.cardTitle{
  @apply mt-4 line-clamp-2 text-base font-semibold leading-snug text-ink-900;
}

.cardText{
  @apply mt-2 text-sm leading-relaxed text-ink-700;
}

.cardLink{
  @apply mt-4 inline-flex items-center gap-2 rounded-lg border border-ink-200 bg-white px-3 py-2 text-sm font-semibold text-ink-900 shadow-sm transition hover:bg-ink-50 focus:outline-none focus:ring-2 focus:ring-brand-600;
}

.footlink{
  @apply rounded-md text-ink-700 underline decoration-ink-300 underline-offset-4 transition hover:text-ink-900 hover:decoration-ink-500 focus:outline-none focus:ring-2 focus:ring-brand-600;
}

img{max-width:100%;height:auto;display:block}