* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  color: #1b1840;
  background: #fff7ec;
  overflow-x: hidden;
}

@keyframes mjFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes mjBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes mjTwinkle { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes mjSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes mjPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); } 50% { box-shadow: 0 0 0 8px rgba(255,255,255,0.08); } }
@keyframes mjBounceUp {
  0%   { transform: translateY(90px) scale(.9); opacity: 0; }
  55%  { transform: translateY(-18px) scale(1.06); opacity: 1; }
  75%  { transform: translateY(8px) scale(.98); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes mjFadeSlide {
  0%   { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Hover states (inline styles can't do :hover, so they live here keyed off data-hover) */
a, button { font-family: inherit; }
.mj-nav-link:hover { background: rgba(255,255,255,0.18); }
.mj-arrow-btn:hover { background: rgba(255,255,255,0.2); }
.mj-cta-white:hover { transform: translateY(-2px); }
.mj-cta-dark:hover { background: #2d2a6e; }
.mj-cta-pop:hover { transform: translateY(-2px); }
.mj-quiz-opt:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--mj-shadow, #e7ddcb); }
.mj-quiz-next:active { transform: translateY(3px); box-shadow: 0 2px 0 #1ea87a !important; }
.mj-hero-cta { animation: mjPulse 2.8s ease-in-out infinite; }
.mj-hero-cta:hover { transform: translateY(-2px); animation: none; }

.mj-char-fade {
  animation: mjBounceUp .65s cubic-bezier(0.34,1.56,0.64,1);
}

@media (max-width: 720px) {
  .mj-nav-links { display: none !important; }
  .mj-mob-cta { display: inline-flex !important; }
  .mj-hero-stars { display: none !important; }
  .mj-hero-section { padding: 44px 20px 72px !important; min-height: unset !important; }
  .mj-hero-inner { flex-direction: column !important; gap: 36px !important; }
  .mj-hero-text { align-items: center !important; text-align: center !important; }
  .mj-hero-text h1 { text-align: center !important; }
  /* About */
  .mj-about-col { align-items: center !important; text-align: center !important; }
  .mj-about-cta { align-self: center !important; }
  .mj-about-badges { justify-content: center !important; }
  /* How it works cards */
  .mj-how-card { align-items: center !important; text-align: center !important; }
  /* For grown-ups heading */
  .mj-trust-col > span, .mj-trust-col > h2 { text-align: center !important; align-self: center !important; }
  /* Footer */
  .mj-footer-inner { justify-content: center !important; }
  .mj-footer-brand { justify-content: center !important; }
  .mj-footer-nav { justify-content: center !important; }
  /* Hero buttons + pills */
  .mj-hero-btns { justify-content: center !important; }
  .mj-hero-pills { justify-content: center !important; }
  /* Feature slider on mobile */
  .mj-feat-grid { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 16px !important; padding-bottom: 16px !important; scrollbar-width: none !important; }
  .mj-feat-grid::-webkit-scrollbar { display: none; }
  .mj-feat-card { flex: none !important; width: 76vw !important; max-width: 300px !important; scroll-snap-align: start !important; text-align: center !important; align-items: center !important; }
  .mj-feat-hint { display: block !important; }
  /* Trust bullet items */
  .mj-trust-item { align-items: center !important; text-align: center !important; }
  .mj-trust-item > div { align-items: center !important; text-align: center !important; }
  .mj-trust-col { align-items: center !important; text-align: center !important; }
  .mj-trust-col h2 { text-align: center !important; }
  /* Testimonial cards */
  .mj-testimonial-card { align-items: center !important; text-align: center !important; }
  .mj-testimonial-card > div { justify-content: center !important; }
  /* Screenshots heading */
  .mj-screenshots-intro { align-items: center !important; text-align: center !important; }
  /* Stat strip */
  .mj-stat-strip { text-align: center !important; }
}
@media (min-width: 721px) {
  .mj-mob-cta { display: none !important; }
  .mj-sticky-cta { display: none !important; }
}
.mj-sticky-cta { display: none; }
@media (max-width: 720px) {
  .mj-sticky-cta { display: flex !important; }
  body { padding-bottom: 0; }
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Visible keyboard focus */
a:focus-visible, button:focus-visible {
  outline: 3px solid #ffd23f;
  outline-offset: 2px;
}